123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286 |
- <template>
- <view class="">
- <view class="coupon_bg">
- <image class="coupon_bg_title" src="https://zxzhdc.zx-xcx.com/dining/model-title.png"></image>
- <view class="coupon_bg_content">
- <scroll-view scroll-y="true" style="max-height: 300rpx;">
- <view>
- <view class="coupon flex" v-for="(item,index) of couponList" :key='index'>
- <view class="coupon-left flex-y-center">
- <view class="w100">
- <view class="title text-1">
- {{item.name}}
- </view>
- <view v-if="item.type==1" class="title text-1"
- style="font-size: 26rpx;color: #EB8E55;">
- 满¥{{Number(item.full)}}元减¥<text
- style="color: red;font-size:30rpx;">{{ Number(item.reduce) }} </text>元
- </view>
- <view v-if="item.type==3" class="date text-1">
- <text style="color: red;font-size: 28rpx;">{{ item.gift }}</text>
- </view>
- <view class="date text-1">
- 有效期: {{item.start_time}}~{{item.end_time}}
- </view>
- </view>
- </view>
- <view class="coupon-center">
- <view class="rund top">
- </view>
- <view class="line">
- </view>
- <view class="rund bottom">
- </view>
- </view>
- <view class="coupon-right flex-center flex-grow-1">
- <view class="ft28 getCoupon" v-if="item.state == 1" @tap="receive" :data-id='item.id'
- :data-index="index">
- <view class="">
- 立即
- </view>
- <view class="">
- 领取
- </view>
- </view>
- <block v-if="item.state == 2">
- <view class="flex-x-center flex-y-center info-btn fs-sm" style="color:#999;">已领取
- </view>
- </block>
- </view>
- </view>
- </view>
- </scroll-view>
-
- <view class="coupon_bg_content_pr flex-y-bottom flex-x-center">
- <image class="img2" src="../static/home/model-bg-btn.png"></image>
- <view class="img3" @click="Getall">
- <image class="" src="/static/home/model-btn.png"></image>
- <view class="img3-pr flex-center">一键领取</view>
- </view>
- </view>
-
- </view>
- </view>
- <gbClose/>
- </view>
- </template>
- <script>
- import gbClose from './close.vue';
- import {
- mapState,
- } from 'vuex'
- export default {
- components: {
- gbClose
- },
- data() {
- return {
- couponLists: [],
- }
- },
- computed: {
- ...mapState(['systemInfo', 'store_id', 'userInfo', 'couponList']),
- },
- watch: {
- couponList: {
- handler(val) {
- console.log(val, "val")
- if (val.length > 0) {
- this.couponLists = val;
- }
- },
- deep: true,
- },
- },
- mounted() {
- if (this.couponList.length > 0) {
- this.couponLists = this.couponList;
- }
- },
-
- methods: {
- receive: function(t) {
- let subscribe = uni.getStorageSync('balance_subscribe');
- console.log(t)
- var that = this,
- id = t.currentTarget.dataset.id,
- index = t.currentTarget.dataset.index;
-
- that.$http.request('xcx/LqCoupons', {
- user_id: this.userInfo.id,
- store_id: this.store_id,
- coupon_id: id,
- }, "", "", true).then(res => {
- that.couponList[index].state = 2;
- let couponLength = that.couponList.filter((v, i) => v.state == 2);
- if(couponLength.length == that.couponList.length){
- console.log( "领取关闭");
- that.bus.$emit('send', 2);
- }
- uni.showToast({
- title: '领取成功',
- icon: 'none'
- })
- })
-
-
- },
-
-
- Getall(e){
- var that = this
- that.$http.request('xcx/yijianLqCoupons', {
- user_id: this.userInfo.id,
- store_id: this.store_id,
- }, "", "", true).then(res => {
- that.couponList.forEach((v)=>{
- v.state=2
- })
- that.bus.$emit('send', 2);
- uni.showToast({
- title: '领取成功',
- icon: 'none'
- })
- })
- },
- }
- }
- </script>
- <style lang="scss">
- .coupon_bg {
- width: 100%;
- text-align: center;
- border-radius: 0px 0px 16px 16px;
- }
- .coupon_bg_title {
- width: 688rpx;
- height: 404rpx;
- display: block;
- margin-bottom: -2px;
- }
- .coupon_bg_content {
- width: 600rpx;
- // height: 460rpx;
- background: #f41018;
- margin: 0 auto;
- border-bottom-left-radius: 10px;
- border-bottom-right-radius: 10px;
- }
- .coupon_bg_content .img1 {
- width: 528rpx;
- height: 160rpx;
- }
- .coupon_bg_content_pr {
- position: relative;
- }
- .coupon_bg_content .img2 {
- width: 600rpx;
- height: 166rpx;
- }
- .coupon_bg_content .img3 {
- width: 323rpx;
- height: 77rpx;
- position: absolute;
- bottom: 20rpx;
- color: #751300;
- }
- .coupon_bg_content .img3 image {
- width: 100%;
- height: 100%;
- }
- .coupon_bg_content .img3 .img3-pr {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 90%;
- }
- .coupon {
- width: 528rpx;
- height: 160rpx;
- background: linear-gradient(180deg, #ffefb4 33%, #ffee75 89%);
- border-radius: 8rpx;
- margin: 0 auto;
- margin-bottom: 20rpx;
- .coupon-left {
- width: 404rpx;
- font-size: 28rpx;
- font-weight: 400;
- color: #EB8E55;
- padding-left: 22rpx;
- text-align: left;
- .title {
- font-size: 32rpx;
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
- font-weight: 500;
- color: #F03100;
- margin-bottom: 4rpx;
- }
- .date {
- margin-bottom: 4rpx;
- font-size: 24rpx;
- }
- .code {
- font-size: 24rpx;
- }
- }
- .coupon-center {
- position: relative;
- width: 30rpx;
- .rund {
- width: 24rpx;
- height: 24rpx;
- background: #F41018;
- border-radius: 50%;
- position: absolute;
- }
- .top {
- top: -10rpx;
- }
- .bottom {
- bottom: -10rpx;
- }
- .line {
- width: 1rpx;
- height: 124rpx;
- border: 2rpx dashed #EB8E55;
- position: absolute;
- left: 10rpx;
- top: 20rpx;
- }
- }
- .coupon-right {
- .used {
- width: 140rpx;
- height: 140rpx;
- }
- .getCoupon {
- color: #EB8E55;
- font-weight: 600;
- }
- }
- }
- </style>
|