| | |
| | | <template> |
| | | <view class="box"> |
| | | <view class="cate"> |
| | | <view class="cate-item" @click="i = index" v-for="(item, index) in cate" :key="index"> |
| | | <view class="cate-item" @click="sele(item.id)" v-for="(item, index) in cate" :key="index"> |
| | | <text>{{item.name}}</text> |
| | | <view class="cate-item-x" v-if="i === index"></view> |
| | | <view class="cate-item-x" v-if="status === index"></view> |
| | | </view> |
| | | </view> |
| | | <view class="list"> |
| | | <view class="item disable"> |
| | | <view :class="[1,2].includes(status) ? 'item disable' : 'item'" v-for="(item, index) in list" :key="index"> |
| | | <view class="item-a"> |
| | | <text class="item-a-num">8</text> |
| | | <text>满100可用</text> |
| | | <text class="item-a-num" v-if="item.couponType === 0">{{item.price}}</text> |
| | | <text class="item-a-num1" v-else-if="item.couponType === 1">{{item.price}}</text> |
| | | <text>满{{item.limitPrice}}可用</text> |
| | | </view> |
| | | <view class="item-b"> |
| | | <view class="item-b-left"> |
| | | <text>新客专享</text> |
| | | <text>2020.5.25 日到期</text> |
| | | <text>{{item.name}}</text> |
| | | <text>{{item.endDate.substring(0, 10)}} 日到期</text> |
| | | </view> |
| | | <image src="/static/images/ic_yishiyong@2x.png" mode="widthFix"></image> |
| | | <!-- <view class="item-b-btn">查看详情</view> --> |
| | | <image src="/static/images/ic_yishiyong@2x.png" mode="widthFix" v-if="status === 1"></image> |
| | | <image src="/static/images/ic_yiguoqi@2x.png" mode="widthFix" v-else-if="status === 2"></image> |
| | | <view class="item-b-btn" v-else @click="jumpDetails(item.id)">查看详情</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | i: 0, |
| | | status: 0, |
| | | current: 1, |
| | | list: [], |
| | | next: true, |
| | | cate: [ |
| | | { name: '未使用', id: 0 }, |
| | | { name: '已使用', id: 1 }, |
| | | { name: '已过期', id: 2 } |
| | | ] |
| | | }; |
| | | }, |
| | | onLoad() { |
| | | this.getList() |
| | | }, |
| | | onReachBottom() { |
| | | this.getList() |
| | | }, |
| | | methods: { |
| | | jumpDetails(id) { |
| | | uni.navigateTo({ |
| | | url: '/pages/coupon-details/coupon-details?id='+id |
| | | }) |
| | | }, |
| | | sele(id) { |
| | | this.status = id |
| | | this.current = 1 |
| | | this.list = [] |
| | | this.next = true |
| | | this.getList() |
| | | }, |
| | | getList() { |
| | | if (!this.next) return |
| | | this.$u.api.memberCouponPage({ |
| | | couponType: 1, |
| | | current: this.current, |
| | | size: 10, |
| | | status: this.status |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | console.log(res) |
| | | this.current++ |
| | | this.list.push(...res.data.records) |
| | | if (this.list.length === res.data.total) { |
| | | this.next = false |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | color: #999999 !important; |
| | | } |
| | | } |
| | | .item-a-num1 { |
| | | color: #999999 !important; |
| | | &::after { |
| | | color: #999999 !important; |
| | | } |
| | | } |
| | | text { |
| | | color: #999999 !important; |
| | | } |
| | |
| | | color: #E4001D; |
| | | } |
| | | } |
| | | .item-a-num1 { |
| | | font-weight: 600; |
| | | font-size: 44rpx; |
| | | color: #E4001D; |
| | | &::after { |
| | | content: '折'; |
| | | font-weight: 600; |
| | | font-size: 24rpx; |
| | | color: #E4001D; |
| | | } |
| | | } |
| | | text { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |