heating-pay/pages/index/index.vue

<template>
  <view class="content">
    <top-title
      :titleValue="title"
      :pageScroll="scrollVal"
	  :btnTop="btnPos"
      style="width: 100%"
    ></top-title>
    <view class="page-section-spacing" style="width: 100%; position: relative">
		<view class="content-box">
			<view class="content-font">西安聚达康能源科技有限公司</view>
			<view class="call-font">服务热线：13759970386</view>
		</view>
      <swiper
        class="swiper"
        indicator-dots="false"
        autoplay="true"
        duration="500"
        style="height: 440rpx"
      >
        <swiper-item
          v-for="(item, index) in swiperList"
          :key="index"
          class="swiper-content"
        >
          <image :src="item.img"  mode="aspectFill" style="width: 100%; height: 100%"></image>
        </swiper-item>
      </swiper>
      <image src="../../static/Intersect.svg" class="groove-img"></image>
      <view class="rowDot">
        <view v-for="(item, index) in swiperList" :key="index" class="dots">
          <view
            :class="['dot', index === swiperCurrent ? 'active' : '']"
          ></view>
        </view>
      </view>
    </view>

    <view class="page-nav-box">

	  <view v-for="(item, index) in navList" :key="index" class="nav-content" @click="goOtherPage(item)">
	    <image :src="item.url"  mode="aspectFit"  style="width: 38px; height: 38px"></image>
	    <view>{{ item.content }}</view>
	  </view>
    </view>

    <view class="notice-box" style="width:90%;">
      <view class="notice-title-box" style="margin: 0 auto;margin-bottom: 30rpx;">
        <view class="notice-font">缴费订单</view>
        <view class="notice-more-font">
          <view style="margin-right: 8rpx; font-size: 26rpx" @click="goPayList">更多</view>
          <image
            src="/static/right-arrow-blue.png"
            mode="aspectFill"
            style="width: 12rpx; height: 16rpx"
          ></image>
        </view>
      </view>
      <view
        class="notice-content-box"
        v-for="(item, index) in heatList"
        :key="index"
        style="justify-content: start; padding: 30rpx 0 30rpx 30rpx;border-radius: 0;"
        @click="goPayDeatil(item.code)" >
        <image
          src="/static/order-poster.svg"
          style="
            width: 112rpx;
            height: 112rpx;
            margin-right: 20rpx;
            border-radius: 10%;
          "
        ></image>
        <view class="notice-content" style="width: 75%">
          <view class="notice-content-font">{{
            item.name
          }}</view>
          <view class="display-flex-start" style="margin-top: 20rpx">
            <view class="notice-content-time color-a7adba">
				{{item.estate_name  + item.building_name + item.unit + item.room}}
			</view>
			<view class="notice-content-time display-flex-start">
				<text class="color-a7adba">￥：</text>
				<text class="order-money">{{item.total_fee}}</text>
			</view>
          </view>
          <view class="display-between" style="margin-top: 20rpx">
			<view class="notice-content-time color-a7adba" style="visibility: hidden;">
				{{item.time}}
			</view>  
			<view class="display-flex-start">
				<view class="notice-content-time" :style="{color:statusColor[item.status]}">{{statusObj[item.status]}}</view>
			</view>
          </view>
        </view>
      </view>
    </view>
   

    <foot-tabs :selectedIndex="0" :isShow="footFlag"></foot-tabs>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import topTitle from "@/components/top-title/top-title.vue";
import footTabs from "@/components/foot-tabs/footTabs.vue";
export default {
  components: {
    "foot-tabs": footTabs,
    "top-title": topTitle,
  },
  data() {
    return {
      title: "聚达康暖通",
      scrollVal: Number,
      footFlag: true,
	  btnPos:uni.getMenuButtonBoundingClientRect().top + 6,
	  shareImgUrl:'',
      swiperList: [
        {
          img: "/static/poster-bg.png",
        },
		{
		  img: "/static/poster-bg.png",
		},
      ],
      swiperCurrent: 0,
      navList: [
        {
          url: "/static/navList/appeal.png",
          path: "/pages/heatingPage/list",
          content: "供暖缴费",
        },
        {
          url: "/static/navList/policy.png",
          path: "/pages/heatingPage/reportFix",
          content: "一件报修",
        },
      ],
      heatList: [],
	  statusObj:{
		  '0':'未缴费',
		  '1':'已缴费',
		  '2':'空置已缴费',
		  '3':'空置转全额'
	  },
	  statusColor:{
		  '0':'#D9001B',
		  '1':'#70B603',
		  '2':'#4B7902',
		  '3':'#BFBF00',
	  }
    };
  },
  onShow() {
    uni.hideTabBar({});
	this.getHeatList()
  },
  onLoad() {
    // uni.showLoading({
    //   title: "加载中",
    //   mask: true,
    // });
    //this.getSwiperList();
  },
  onShareAppMessage() {
  //  url: "/pages/index/index";
      return {
        title: '缴费系统',
        path: '/pages/index/index',
		imageUrl:'/static/shareImg2.png',
      }
  },
  methods: {
    swiperChange(e) {
      this.swiperCurrent = e.detail.current;
    },
	goOtherPage(item){
		uni.navigateTo({
			url:item.path
		})
	},
    getSwiperList() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=main_pics&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          order_by: "weight desc",
          s_status: 1,
          page: 1,
          page_size: 7,
        },
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            res.data.data.list.forEach((item) => {
              item.pic_path = getApp().globalData.shareUrl + item.pic_path;
            });
            this.swiperList = res.data.data.list;
			// this.shareImgUrl = res.data.data.list[0].pic_path
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getHeatList() {
      let md5Sign = md5(
        "method=" +
          "user" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=user&source=user&action=get_order_list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        // page: 1,
        // page_size: 2,
		openId:getApp().globalData.open_id ? getApp().globalData.open_id : uni.getStorageSync('openId')
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.heatList = res.data.data.list;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    goPayDeatil(id) {
      uni.navigateTo({
        url: "/pages/heatingPage/pay?id=" + id,
      });
    },

    goPayList() {
      uni.navigateTo({
        url: "/pages/heatingPage/list",
      });
    },
  },
  onPageScroll(e) {
    this.scrollVal = e.scrollTop;
    if (e.scrollTop < uni.getSystemInfoSync().windowHeight) {
      this.footFlag = true;
    }
  },
  onReachBottom(e) {
    this.footFlag = false;
  },
};
</script>

<style>
.unclick {
  background-color: #bfbfbf !important;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.groove-img {
  width: 100%;
  height: 100rpx;
  bottom: -22rpx;
  position: absolute;
}
.rowDot {
  display: flex;
  position: absolute;
  top: 310rpx;
  left: 80rpx;
}
.dots {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.dot {
  margin-right: 8rpx;
  width: 40rpx;
  height: 8rpx;
  opacity: 1;
  border-radius: 6rpx;
  background: #fff5f9;
}
.dot.active {
  background: #ff4e54;
}
/* .swiper-content { */
  /* border-radius: 0 0 10% 10%; */
/* } */
.page-nav-box {
  width: 88%;
  height: 180rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 20rpx 10rpx 30rpx 10rpx;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
  position: absolute;
  top: 360rpx;
  background-color: #fff;
}
.nav-content {
  width: 25%;
  height: 130rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
  font-size: 28rpx;
  justify-content: space-around;
  letter-spacing: 0.02em;
  color: #0d1937;
  font-family: PingFang SC;
  font-style: normal;
  /* font-weight: 600; */
}
.notice-box {
  width: 90%;
  margin-top: 200rpx;
  margin-bottom: 20rpx;
}
.notice-title-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}
.notice-font {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: bold;
  font-size: 38rpx;
  letter-spacing: 0.02em;
  color: #0d1937;
}
.notice-more-font {
  font-size: 28rpx;
  color: #146afb;
  display: flex;
  align-items: center;
}

.notice-content-box {
  display: flex;
  padding: 30rpx 20rpx 30rpx 20rpx;
  background-color: #ffffff;
  box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
  border-radius: 32rpx;
  margin-top: 20rpx;
  justify-content: space-between;
}
.maskModal {
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 32rpx;
  height: 100%;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}
.notice-content-font {
  font-size: 32rpx;
  color: #0d1937;
  /* font-weight: 600; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice-content-time {
  font-size: 26rpx;
  letter-spacing: 0.02em;
  color: #cfcfcf;
}
.park-box {
  border-radius: 32rpx;
  margin-right: 20rpx;
  position: relative;
  height: 500rpx;
}
.park-content-box {
  width: 394rpx;
  background-color: #ffffff;
  border-radius: 56rpx 0px 32rpx 32rpx;
  position: absolute;
  top: 210rpx;
  font-size: 30rpx;
  padding: 30rpx;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
}
.park-title {
  /* font-weight: 600; */
  line-height: 36rpx;
  letter-spacing: 0.02em;
  color: #0d1937;
}
.park-address {
  /* font-weight: 600; */
  font-size: 26rpx;
  letter-spacing: 0.02em;
  color: #cfcfcf;
  margin-top: 10rpx;
}
.park-title-img {
  width: 16rpx;
  height: 16rpx;
  margin-right: 4rpx;
}
.park-footer-box {
  margin-top: 30rpx;
}
.park-footer-img {
  width: 24rpx;
  height: 24rpx;
  margin-right: 6rpx;
}
.park-footer-font {
  color: #cfcfcf;
  font-size: 24rpx;
  margin-top: 10rpx;
}
.width-30 {
  width: 30%;
}
.attract-content {
  color: #697594;
  /* font-weight: 600; */
  font-size: 24rpx;
  margin-top: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.online-box {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #589cff;
  margin-right: 5rpx;
}
.offline-box {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #ffcf86;
  margin-right: 5rpx;
}
.color-a7adba {
  color: #a7adba;
}
.content-box {
    position: absolute;
    width: 100%;
    top: 150rpx;
    display: flex;
    flex-direction: column;
    z-index: 999;
    justify-content: space-around;
    height: 80px;
    align-items: center;

}
.content-font {
		color: #fff;
		font-weight: bold;
		font-size: 40rpx;
	}
.call-font {
		color: #fff;
		font-size: 32rpx;
	}
	.order-money {
		color: #d9001b;
		font-size: 36rpx;
		font-weight: 500;
	}
</style>