123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297 |
- <template>
- <view class="container">
- <view class="tab-h flex flex-x-between flex-y-center">
- <view :class="['item',active == 1?'active':'']" @click="onChangeTab(1)">
- <view class="title" :style="[active == 1?{color:setColor}:'']">未使用</view>
- <view class="line" :style="[active == 1?{'background-color':setColor}:'']"></view>
- </view>
- <view :class="['item',active == 2?'active':'']" @click="onChangeTab(2)">
- <view class="title" :style="[active == 2?{color:setColor}:'']">已使用</view>
- <view class="line" :style="[active == 2?{'background-color':setColor}:'']"></view>
- </view>
- <view :class="['item', active == 3?'active':'']" @click="onChangeTab(3)">
- <view class="title" :style="[active == 3?{color:setColor}:'']">已过期</view>
- <view class="line" :style="[active == 3?{'background-color':setColor}:'']"></view>
- </view>
- </view>
- <view class="tab-b">
- <view class="tab-b-c" v-for="(item,index) in list" :key="index" v-if="item.state==active">
- <view class="item">
- <image v-if="item.state==1" src="../../static/coupon_bg_1.png" class="coupon-bg" mode="aspectFit">
- </image>
- <image v-else src="../../static/coupon_bg_3.png" class="coupon-bg" mode="aspectFit"></image>
- <view class="content flex flex-nowarp flex-y-center">
- <view class="left-bar flex flex-nowarp flex-column flex-x-center flex-y-center">
- <view class="money-block flex flex-nowarp flex-x-center flex-y-baseline">
- <view class="money">{{Number(item.reduce)}}</view>
- <view class="unit">元</view>
- </view>
- <view class="desc text-nowarp">满 {{Number(item.full)}}元可用</view>
- </view>
- <view class="right-bar">
- <view class="title-block flex flex-y-center">
- <view class="tips" v-if="item.type == 2">指定商品</view>
- <view class="tips" v-if="item.activity== 1">商家劵</view>
- <view class="title text-nowarp">{{item.name}}</view>
- </view>
- <view class="box-pack-between flex-y-center">
- <view class="time">有效期:{{item.start_time}} - {{item.end_time}}</view>
- <image v-if="item.type==2" @click.stop="bindChecked(index)" class="more-down"
- :class="item.checked?'more-down-deg':''" src="../../static/more-down.png">
- </image>
- </view>
- </view>
- </view>
- </view>
- <view class="coupon-foot flex-grow-1" v-if="item.checked">
- <view class="box-pack-between">
- <view class="mrt16 flex flex-grow-1">
- <text style="min-width: 190rpx;">指定商品:</text>
- <view class="flex-grow-1">
- <view class="box-pack-between" v-for="(items,index) of item.goods"> {{items.name}}
- <text style="color: red;">¥{{items.price}}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- <no-none v-else></no-none> -->
- </view>
- </view>
- <view class="no-more">没有更多了~</view>
- </view>
- </template>
- <script>
- let hideLoading = true;
- export default {
- data() {
- return {
- active: 1,
- userInfo: {},
- list: [],
- setColor: ''
- }
- },
- onLoad() {
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$store.state.color,
- })
- this.setColor = this.$store.state.color;
- this.userInfo = uni.getStorageSync('userInfo')
- this.getData()
- },
- methods: {
- bindChecked(index) {
- this.list[index].checked = !this.list[index].checked;
- },
- onChangeTab(index) {
- if (index != this.active) {
- this.active = index
- }
- },
- getData() {
- this.$http.request('xcx/MyCoupons', {
- user_id: uni.getStorageSync('user_id'),
- store_id: uni.getStorageSync('store_id')
- }, "", "", hideLoading).then(res => {
- for (let s of res.data) {
- s.checked = false;
- };
- this.list = res.data
- })
- }
- }
- }
- </script>
- <style lang="scss">
- page {
- background-color: #F4F5F7;
- }
- .content {
- position: relative;
- }
- .tab-h {
- background-color: #fff;
- position: sticky;
- top: 0;
- z-index: 100
- }
- .tab-b-c {
- margin-bottom: 30rpx;
- }
- .tab-h .item {
- /* padding: 0 30rpx; */
- height: 88rpx;
- position: relative;
- flex: 1;
- text-align: center;
- }
- .tab-h .item .title {
- font-size: 28rpx;
- line-height: 88rpx;
- font-weight: 500;
- }
- // .tab-h .item .active::after {
- // content: "";
- // }
- .tab-h .item .line {
- display: block;
- height: 4rpx;
- width: 40rpx;
- border-radius: 2rpx;
- background-color: none;
- position: absolute;
- bottom: 5rpx;
- left: 50%;
- transform: translateX(-50%)
- }
- .tab-h .item.active .title {
- font-size: 32rpx;
- font-weight: 600;
- color: $theme-color;
- }
- .tab-b {
- padding: 30rpx 25rpx 0;
- }
- .tab-b .item {
- width: 700rpx;
- height: 180rpx;
- position: relative;
- }
- .tab-b .item .coupon-bg {
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- z-index: 0;
- }
- .tab-b .item .content {
- position: relative;
- z-index: 10;
- }
- .tab-b .item .content .left-bar {
- flex: none;
- width: 200rpx;
- height: 180rpx;
- text-align: center;
- }
- .tab-b .item .content .left-bar .money {
- font-size: 58rpx;
- line-height: 70rpx;
- color: #fff;
- font-weight: bold;
- }
- .tab-b .item .content .left-bar .unit {
- font-size: 24rpx;
- color: #fff;
- font-weight: 500;
- margin-left: 6rpx;
- }
- .tab-b .item .content .left-bar .desc {
- font-size: 24rpx;
- line-height: 33rpx;
- margin-top: 16rpx;
- color: #fff;
- }
- .tab-b .item .content .right-bar {
- width: 500rpx;
- flex: none;
- box-sizing: border-box;
- height: 180rpx;
- padding: 0 25rpx;
- }
- .tab-b .item .content .right-bar .title-block {
- height: 106rpx;
- border-bottom: 1rpx dashed #E5E5E5;
- }
- .tab-b .item .content .right-bar .title-block .tips {
- flex: none;
- height: 40rpx;
- background: #2979FF;
- border-radius: 4rpx;
- font-size: 20rpx;
- color: #fff;
- padding: 0 10rpx;
- line-height: 40rpx;
- margin-right: 16rpx;
- }
- .tab-b .item .content .right-bar .title-block .title {
- font-size: 28rpx;
- color: #333;
- font-weight: bold;
- }
- .tab-b .item .content .right-bar .time {
- font-size: 24rpx;
- color: #999;
- height: 73rpx;
- line-height: 73rpx;
- }
- .more-down {
- width: 33rpx;
- height: 33rpx;
- }
- .more-down-deg {
- transform: rotate(180deg);
- animation: showPopUp 0.2s;
- animation-fill-mode: forwards;
- }
- @keyframes showPopUp {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(180deg);
- }
- }
- .CouponContentC {
- color: #999999;
- }
- .coupon-foot {
- background: #FFFFFF;
- padding: 20rpx;
- font-size: 28rpx;
- border-bottom: 1rpx solid #F1F1F1;
- }
- </style>
|