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"
        @change="swiperChange"
      >
        <swiper-item
          v-for="(item, index) in swiperList"
          :key="index"
          class="swiper-content"
        >
          <image :src="item.pic_path"  mode="aspectFill" style="width: 100%; height: 100%" @click="swiperNavGoPage(item)"></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 activityList"
        :key="index"
        style="justify-content: start; padding: 30rpx 0 30rpx 30rpx;border-radius: 0;"
        @click="goActiveDeatil(item.id)" >
        <image
          :src="item.url"
          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.title
          }}</view>
          <view class="display-flex-start" style="margin-top: 20rpx">
            <view class="notice-content-time color-a7adba">
				{{item.address}}
			</view>
			<view class="notice-content-time display-flex-start">
				<text class="color-a7adba">￥：</text>
				<text class="order-money">{{item.money}}</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: #d9001b;">{{item.orderStatus}}</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/swiper/swiper1.jpg",
        // },
        // {
        //   img: "/static/swiper/swiper2.jpg",
        // },
      ],
      swiperCurrent: 0,
      navList: [
        {
          url: "/static/navList/appeal.png",
          path: "/pages/heatingPage/list",
          content: "供暖缴费",
        },
        {
          url: "/static/navList/policy.png",
          path: "/pages/supply/putSupply",
          content: "一件报修",
        },
      ],
      activityList: [
        {
          url: "/static/order-poster.svg",
          title: "2022-2023年度供暖费",
          address: "千林郡5号楼1单元10层1001室",
		  money:'2385.40',
          time: "2021-09-05",
          orderStatus:'待缴费'
        },
        {
          url: "/static/order-poster.svg",
          title: "2022-2023年度供暖费",
          address: "千林郡5号楼1单元10层1001室",
		  money:'2385.40',
          time: "2021-09-05",
		  orderStatus:'已缴费'
        },
      ],
    };
  },
  onShow() {
    uni.hideTabBar({});
    //this.getActive();
  },
  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;
    },
	swiperNavGoPage(info){
	  let pageObj = {
		  'consult':'/pages/appeal/index',
		  'policy':'/pages/policy/index',
		  'park':'/pages/park/index',
		  'activity':'/pages/activity/index',
		  'notice':'/pages/notice/index',
		  'company':'/pages/enterprise/index',
	  }
	  let pageDetailObj = {
		  'consult':'/pages/appeal/appeal_detail?id=',
		  'policy':'/pages/policy/policy_deatil?id=',
		  'park':'/pages/park/park_detail?id=',
		  'activity':'/pages/activity/activity_detail?id=',
		  'notice':'/pages/notice/notice_detail?id=',
		  'company':'/pages/enterprise/enterprise_detail?id=',
	  }
	  console.log(info.link_table,info.link_id)
	  if(info.link_table){
		if(info.link_id && info.link_id != '0'){
			  uni.navigateTo({
				url:pageDetailObj[info.link_table] + info.link_id
			  })
		}else {
			  uni.navigateTo({
				url:pageObj[info.link_table]
			  })
		}  
	  }else {
		  return
	  }
	},
	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.swiperList[0].pic_path = '/static/poster-bg.png' 
			this.swiperList[1].pic_path = '/static/poster-bg.png' 
			// this.shareImgUrl = res.data.data.list[0].pic_path
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getActive() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=activity&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        page: 1,
        page_size: 2,
		s_cancel : 0,
		order_by : "weight desc,id desc"
      };
      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) {
            let list = res.data.data.list;
            this.activityList = list.map((item) => {
              let ob = {
                url: "",
                title: "",
                department: "",
                time: "",
                browe: 0,
                share: 0,
                type: "",
                id: "",
              };
              ob.url = item.pic_url ? getApp().globalData.shareUrl + item.pic_url : '/static/activity/default.png';
              ob.title = item.name;
              ob.department = item.sponsor;
              ob.time = this.$options.filters["globalTime"](item.start_time);
              ob.browe = parseInt(item.base_read_count) + parseInt(item.real_read_count);
              ob.share =  parseInt(item.real_repost_count) + parseInt(item.base_repost_count);
              ob.isOnline = item.type == 1 ? 1 : 0;
              ob.id = item.id;
              return ob;
            });
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    goNoticeDeatil(id) {
      uni.navigateTo({
        url: "/pages/notice/notice_deatil?id=" + id,
      });
    },
    goAttractDeatil(id, type) {
      if (type == "0") return;
      uni.navigateTo({
        url: "/pages/attract/attract_deatil?id=" + id,
      });
    },
    goActiveDeatil(id) {
      uni.navigateTo({
        url: "/pages/activity/activity_deatil?id=" + id,
      });
    },
    goAttract() {
      uni.navigateTo({
        url: "/pages/attract/index",
      });
    },
    goNotice() {
      uni.navigateTo({
        url: "/pages/notice/index",
      });
    },
    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>