|
|
@@ -0,0 +1,273 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+ <view class="tab">
|
|
|
+
|
|
|
+ <view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">可使用</view>
|
|
|
+ <view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">可赠送</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="main" :class="{mainActive:tabIndex==1}">
|
|
|
+ <view class="okBox" v-if="tabIndex==1">
|
|
|
+ <view class="tabLine2" :class="{tabActive2:tabIndex2==1}" @click="tabClick2(1)">可使用</view>
|
|
|
+ <view class="tabLine2" :class="{tabActive2:tabIndex2==2}" @click="tabClick2(2)">已使用</view>
|
|
|
+ <view class="tabLine2" :class="{tabActive2:tabIndex2==3}" @click="tabClick2(3)">已过期</view>
|
|
|
+ </view>
|
|
|
+ <view class="itemBg" v-for="(item,index) in items" @click="goDetail(item.ID)">
|
|
|
+ <view class="itemTop">
|
|
|
+ <view class="leftB">
|
|
|
+ <view class="use">￥<span class="use2">{{item.actMoney}}</span></view>
|
|
|
+ <!-- <view class="used">￥<span class="used2">{{item.actMoney}}</span></view> -->
|
|
|
+ </view>
|
|
|
+ <view class="centerB">
|
|
|
+ <view class="name">{{item.actName}}</view>
|
|
|
+ <view class="time" v-if="item.startTime">有效期：{{item.startTime}}-{{item.endTime}}</view>
|
|
|
+ <view class="time" v-else></view>
|
|
|
+ </view>
|
|
|
+ <view class="rightB"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="itemBottom">
|
|
|
+ <view>可用次数：10</view>
|
|
|
+ <view>查看详情 ></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 无数据空白页 -->
|
|
|
+ <nodata v-if="items.length==0"></nodata>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import nodata from '@/components/nodata/nodata.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ nodata
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ tabIndex: 1,
|
|
|
+ tabIndex2: 1,
|
|
|
+ items: [],
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+
|
|
|
+ this.tabIndex = opt.num;
|
|
|
+
|
|
|
+ this.myOrderCoupon()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ console.log(this.tabIndex)
|
|
|
+
|
|
|
+ this.myOrderCoupon()
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ tabClick(num) {
|
|
|
+ this.tabIndex = num;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.myOrderCoupon()
|
|
|
+ },
|
|
|
+ tabClick2(num) {
|
|
|
+ this.tabIndex2 = num;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.myOrderCoupon()
|
|
|
+ },
|
|
|
+ goDetail(id) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'orderDetail?id=' + id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ myOrderCoupon() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ this.$http('opencoupon/listCoupon', {
|
|
|
+
|
|
|
+ // page: this.page,
|
|
|
+ // limit: 10,
|
|
|
+ }, 'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // var list = res.data.Items
|
|
|
+ var list = res.data
|
|
|
+
|
|
|
+ // 处理 undefined和null转为空白字符串
|
|
|
+ // list.forEach((item, index) => {
|
|
|
+ // for (const key in item) {
|
|
|
+ // item[key] = this.$praseStrEmpty(item[key])
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+ this.items = list
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .box {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F4F5F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ line-height: 92rpx;
|
|
|
+ position: fixed;
|
|
|
+ width: calc(100vw - 48rpx);
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabLine {
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabActive {
|
|
|
+ color: #F03B3B;
|
|
|
+ border-bottom: 4rpx solid #F03B3B;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ padding-top: 92rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ background-color: #F4F5F7;
|
|
|
+ }
|
|
|
+ .mainActive{
|
|
|
+ padding-top: 184rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ background-color: #F4F5F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .okBox {
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ border-top: 1rpx solid #EEEEEE;
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ margin-top: -93rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabLine2 {
|
|
|
+
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 144rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabActive2 {
|
|
|
+
|
|
|
+ background-color: rgba(240, 59, 59, 0.06);
|
|
|
+ border-radius: 28rpx;
|
|
|
+ background-color: 0.06;
|
|
|
+
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ color: #F03B3B;
|
|
|
+ width: 144rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemBg {
|
|
|
+ margin: 20rpx 24rpx 0rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 40rpx 20rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemTop {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use {
|
|
|
+
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #F03B3B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use2 {
|
|
|
+
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #F03B3B;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .used {
|
|
|
+
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .used2 {
|
|
|
+
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name{
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .itemBottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ border-top: 1rpx solid #EEEEEE;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 33rpx;
|
|
|
+ }
|
|
|
+</style>
|
guo