menduner-uniapp/pagesA/coupon/index.vue

<template>
  <layout-page>
    <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore">
      <view class="defaultBgc content">
        <view
          v-for="item in items"
          :key="item.id"
          class="content-item"
          :class="{ used: item.status === 2, disabled: item.status === 3 }"
        >
          <view class="msg">
            <view class="item">
              <view class="name">{{ item.name }}</view>
              <view class="price">
                <uni-icons color="#f30" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
                {{ item.price }}
              </view>
            </view>
            <view class="item">
              <view class="desc">有效期：{{ item.legalTime }}</view>
              <view class="desc">满 {{ item.used }} 可用</view>
            </view>
          </view>
          <view class="use">
            <button
            class="btn"
            :class="{ disabled: item.status !== 1 }"
            @tap="handleTo(item.status)"
            >{{ item.status === 1 ? '立即使用' : item.status === 2 ? '已使用' : '已过期'}}</button>
          </view>
        </view>
        <uni-load-more :status="more" />
      </view>
    </scroll-view>
  </layout-page>
</template>

<script setup>
import { ref } from 'vue'
import {
  getCouponPage
} from '@/api/sign'
import { timesTampChange } from '@/utils/date'


const pageInfo = ref({
  pageNo:1,
  pageSize: 20
})
const total = ref(0)
const items = ref([])
const more = ref('more')

getMyCoupon()

async function getMyCoupon () {
  try {
    const { data } = await getCouponPage({ ...pageInfo.value })
    if (!data || !data.list || !data.list.length) {
      if (pageInfo.value.pageNo === 1) {
        more.value = 'more'
        return
      }
      pageInfo.value.pageNo--
      more.value = 'more'
      return
    }
    items.value.push(...data.list.map(e => {
      return {
        ...e,
        price: (e.discountPrice / 100).toFixed(2),
        legalTime: timesTampChange(e.validStartTime, 'Y-M-D') + ' 至 ' + timesTampChange(e.validEndTime, 'Y-M-D'),
        used: (e.usePrice / 100).toFixed(2)
      }
    }))
    total.value = +data.total
    more.value = items.value.length >= total.value ? 'noMore' : 'more'
  } catch (error) {
    if (pageInfo.value.pageNo === 1) {
      more.value = 'more'
      return
    }
    pageInfo.value.pageNo--
    more.value = 'more'
  }
}

function handleTo (status) {
  if (status !== 1) {
    return
  }
  wx.navigateToMiniProgram({  
    appId: 'wx6decdf12f9e7a061', // 目标小程序的 appId
    // envVersion: 'develop',
    success(res) {  
        // 打开成功  
        console.log('成功跳转至小程序:', res);  
    },  
    fail(err) {  
        // 打开失败
        uni.showToast({
          title: '打开商城失败',
          icon: 'none'
        })
    }  
  })
}

function loadingMore () {
  if (more.value === 'noMore') {
    return
  }
  more.value = 'loading'
  pageInfo.value.pageNo++
  getMyCoupon()
}
</script>

<style lang="scss" scoped>
.content {
  // height: 100vh;
  width: 100vw;
  padding: 20rpx;
  box-sizing: border-box;
  &-item {
    margin-bottom: 20rpx;
    .msg {
      background: #FFF;
      padding: 40rpx;
      box-sizing: border-box;
      -webkit-mask: radial-gradient(circle at 0.375rem 100%, #00000000 0.375rem, red 0) -0.375rem;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0.375rem;
        width: calc( 100% - 0.75rem);
        height: 0;
        border-top: 2rpx dashed #eee;
      }
    }
    .use {
      background: #FFF;
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      font-size: .85em ;
      -webkit-mask: radial-gradient(circle at 0.375rem 0%, #0000 0.375rem, red 0) -0.375rem;
      .btn {
        margin: 0;
        position: relative;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        vertical-align: baseline;
        transform: translate(0, 0);
        padding: 0 0.5rem;
        height: 1.5625rem;
        width: 200rpx;
        border-radius: 1.25rem;
        background: linear-gradient(90deg, #ff3000, rgba(255, 48, 0, 0.6));
        color: #ffffff;
        font-size: 0.75rem;
        font-weight: 400;
        &.disabled {
          background: rgba(130, 130, 130, 0.5);
        }
      }
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .name {
        font-weight: bolder;
        font-size: 36rpx;
      }
      .price {
        color: #f30;
        font-size: 54rpx;
      }
      .desc {
        color: #999;
        font-size: 24rpx;
      }
      
    }
  }
}
</style>