@alu008/test_yuanqikaixiang 1.0.0

package/subpackages/coupon/coupon.vue

@@ -0,0 +1,276 @@
+<template>
+  <view class="couponContent">
+    <u-sticky bgColor="#fff">
+      <u-tabs
+        :list="tabsList"
+        :activeStyle="{
+          color: '#7C66FF',
+          fontWeight: 'bold',
+          fontSize: '28rpx',
+        }"
+        :inactiveStyle="{
+          color: '#666666',
+          fontWeight: 'bold',
+          fontSize: '28rpx',
+        }"
+        @change="changeStatus"
+        lineColor="#fff"
+        :scrollable="false"
+        :current="current"
+      ></u-tabs>
+      <!-- :current="current" -->
+    </u-sticky>
+
+    <view class="couponList">
+<!--    
+      <view class="list">
+        <view   v-if="couponList.length > 0" v-for="value in couponList" :key="value.id" class="item">
+          <view :style="{background:value.state == 'UserCouponState_Unused'? '#7c66ff':'#DDDDDD' }" class="count">
+            <view :style="{color:value.state == 'UserCouponState_Unused'? '#fff':'#999' }" class="amount">¥<text class="number">{{ value.coupon.giftAmount }}</text></view>
+            <view :style="{color:value.state == 'UserCouponState_Unused'? '#fff':'#999' }" class="limit">{{ value.coupon.conditionAmount == 0?'无门槛使用':`满${value.coupon.conditionAmount}元可用` }}</view>
+          </view>
+          <view class="couponDetail">
+            <view class="type">{{ value.coupon.name }}</view>
+            <view class="time">{{ value.expiredAt }} 过期</view>
+            <view class="useLimit">此券可与其他券叠加使用</view>
+          </view>
+          <view class="checkItem">
+             <view @click="toUse" v-if="value.state == 'UserCouponState_Unused'" class="useMust">立即使用</view> 
+             <image
+                v-else-if="value.state == 'UserCouponState_Expired'"
+                src="https://img.shinemang.com/static/expire.png"
+                mode="scaleToFill"
+             />
+              <image
+                v-else-if="value.state == 'UserCouponState_Used'"
+                src="https://img.shinemang.com/static/isUse.png"
+                mode="scaleToFill"
+             />
+          </view>
+        </view>
+      </view> -->
+    </view>
+
+   <view v-if="!isFirstLoading && couponList.length == 0" class="noData">
+         <image
+            src="https://img.shinemang.com/static/noData.png"
+            mode="scaleToFill"
+         />
+         <view>暂无相关优惠券~</view>
+
+         <!-- <view class="toShop">去逛逛</view> -->
+    </view>
+  </view>
+</template>
+
+<script>
+  import { fetchUserCouponList } from '@/utils/fetch';
+export default {
+  data() {
+    return {
+      tabsList: [
+        {
+          name: "全部",
+          status: "UserCouponState_Nil",
+        },
+        {
+          name: "待使用",
+          status: "UserCouponState_Unused",
+        },
+        {
+          name: "已使用",
+          status: "UserCouponState_Used",
+        },
+        {
+          name: "已过期",
+          status: "UserCouponState_Expired",
+        },
+      ],
+      current:0,
+      pageSize:10,
+      pageNo:1,
+      state:'UserCouponState_Nil',
+      isFirstLoading: true,
+      hasMore:true,
+      couponList:[]
+    };
+  },
+  components: {
+    // login,
+  },
+  onLoad() {
+    this.fetchCouponList()
+  },
+  methods: {
+    toUse(){
+       uni.switchTab({ url: '/pages/vip/vip' })
+    },
+    changeStatus(e) {
+      console.log(e)
+      if(e.status == this.state) return;
+
+      this.state = e.status;
+      this.pageNo = 1;
+     uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+      this.fetchCouponList();
+    },
+    fetchCouponList(){
+      fetchUserCouponList({
+        page: this.pageNo,
+        page_size: this.pageSize,
+        state: this.state
+      }).then((res)=>{
+        this.couponList = this.pageNo == 1 ? res.list : this.couponList.concat(res.list);
+       
+        if(res.list && res.list.length < this.pageSize){
+          this.hasMore = false;
+        }else{
+          this.hasMore = true
+        }
+        this.isFirstLoading = false
+      })
+    },
+  },
+  onShow() {},
+    onShareAppMessage() {
+  },
+  onShareTimeline(){
+   
+  },
+    onReachBottom() {
+      console.log('kskjfskldjflsdjf')
+    if (this.hasMore) {
+      this.pageNo++;
+      this.fetchCouponList();
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+page {
+  background: #f6f6f6;
+}
+.couponContent {
+  .noData {
+    text-align: center;
+    margin-top: 48rpx;
+    color: #999999;
+    font-size: 28rpx;
+    image {
+      width: 370rpx;
+      height: 368rpx;
+    }
+    view {
+      margin-top: -10rpx;
+    }
+
+    .toShop {
+      width: 322rpx;
+      height: 80rpx;
+      background: #7c66ff;
+      border-radius: 864rpx 864rpx 864rpx 864rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 32rpx;
+      margin: auto;
+      margin-top: 40rpx;
+    }
+  }
+
+  .couponList {
+    margin-top: 30rpx;
+    padding-bottom: 30rpx;
+    
+   
+    .list {
+      width: 100%;
+    
+      padding: 0 32rpx;
+      .item {
+        margin-bottom: 24rpx;
+        width: 686rpx;
+        height: 202rpx;
+        background: #ffffff;
+        box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
+        border-radius: 16rpx;
+
+        display: flex;
+        /* grid-template-columns: 190rpx 310rpx 144rpx; */
+        align-items: center;
+        /* justify-content: space-between; */
+        /* justify-content: space-around; */
+        /* padding-right: 24rpx; */
+
+        .count {
+          width: 190rpx;
+          height: 202rpx;
+          background: #7c66ff;
+          border-radius: 16rpx 0 0 16rpx;
+
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          color: #fff;
+          .amount {
+            font-weight: bold;
+            font-size: 32rpx;
+            .number {
+              font-size: 70rpx;
+            }
+          }
+          .limit {
+            font-size: 24rpx;
+            color: rgba(255, 255, 255, 0.8);
+            margin-top: 10rpx;
+          }
+        }
+        .couponDetail {
+          width: 310rpx;
+            margin-left: 24rpx;
+          .type {
+            font-size: 28rpx;
+          }
+          .time {
+            color: #999999;
+            margin-top: 40rpx;
+            /* margin-bottom: 22rpx; */
+          }
+          .useLimit {
+            font-size: 26rpx;
+          }
+        }
+        .checkItem {
+          /* width: 144rpx; */
+          margin-left: 15rpx;
+
+          .useMust {
+            /* width: 144rpx;
+             */
+             padding: 0 20rpx;
+            height: 60rpx;
+            background: #7c66ff;
+            border-radius: 1158rpx 1158rpx 1158rpx 1158rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+           
+          }
+          image {
+            width: 120rpx;
+            height: 120rpx;
+            margin-right: 36rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</style>