123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239 |
- <template>
- <view class="page">
- <view class="body after-navber">
- <view class="info">
- <view class="info-list" style="width:100%;">
- <block v-for="(coupon, index) in coupon_list" :key="index">
- <view class="info-one">
- <image class="bga" src="../../static/icon-coupon-enabled.png">
- </image>
- <view class="info-content flex-row flex-x-center flex-y-center fs-b">
- <navigator hover-class="none"
- class="info-content flex-row flex-x-center flex-y-center">
- <view class="flex-grow-0">
- <view class="flex-row flex-y-bottom">
- <block>
- <view class="flex-grow-0">¥</view>
- <view class="flex-grow-1" style="font-size:23pt;">
- {{ Number(coupon.reduce) }}
- </view>
- </block>
- </view>
- </view>
- <view class="flex-grow-1">
- <view style="margin-left:16rpx;">
- <view style="margin-bottom:4rpx;">{{coupon.name}}</view>
- <view>满{{Number(coupon.full)}}可用</view>
- </view>
- </view>
- </navigator>
- <view class="flex-grow-0">
- <block v-if="coupon.state==1">
- <view @tap="receive" :data-index="index" :data-name="coupon.name"
- class="flex-x-center flex-y-center info-btn fs-sm" :data-id="coupon.id"
- style="color:#ff4544;">立即领取</view>
- </block>
- <block v-if="coupon.state == 2">
- <view class="flex-x-center flex-y-center info-btn fs-sm"
- style="color:#999;">已领取</view>
- </block>
- </view>
- </view>
- <view class="info-footer fs-sm box-pack-between flex-y-center">
- <view class="">
- <view v-if="coupon.type==2" style="font-size: 24rpx;">指定商品可用</view>
- <view class="info-day">有效日期:{{coupon.start_time}}~{{coupon.end_time}}</view>
- </view>
- <image v-if="coupon.type==2" @click.stop="bindChecked(index)" class="more-down"
- :class="coupon.checked?'more-down-deg':''" src="../../static/more-down.png">
- </image>
- </view>
- <view class="coupon-foot flex-grow-1" v-if="coupon.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="(item,index) of coupon.goods">
- {{item.name}} <text style="color: red;">¥{{item.price}}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </block>
- </view>
- <block v-if="coupon_list.length <= 0">
- <view class="flex-x-center"><text style="margin-top:50rpx;color: #999;">暂无优惠券</text></view>
- </block>
- </view>
- </view>
- <!-- #ifdef MP-ALIPAY -->
- <!-- <subscribe-msg /> -->
- <!-- #endif -->
- </view>
- </template>
- <script>
- var share_count = 0;
- let hideLoading = true;
- import {
- mapState,
- mapGetters,
- mapMutations
- } from 'vuex'
-
-
- export default {
- data() {
- return {
- coupon_list: [],
- get_coupon_list: "",
- wxapp_img: {},
- page: 1,
- staff_id: "",
- is_load: false,
- is_load_more: false,
-
- // systemInfo: {},
- };
- },
- props: {},
- computed: {
- ...mapState(['setColor', 'store_id', 'systemInfo', 'userInfo', 'merchant_id']),
- dateRange() {
- const {
- store_id,
- systemInfo,
- userInfo
- } = this;
- return {
- store_id,
- systemInfo,
- userInfo,
- }
- },
- },
- watch: {
- setColor(nVal) {
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: nVal,
- })
- },
- // 弹窗校检
- dateRange: {
- handler(val) {
- console.log(val,"dateRange")
- if(val.store_id && val.userInfo.id && val.systemInfo){
- this.http();
- }
- }}
- },
- onLoad: function(t) {
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$store.state.color,
- })
- this.setColor = this.$store.state.color;
- if(this.$store.state.userInfo && this.$store.state.store_id){
- this.http();
- }
- },
-
- onShareAppMessage(e) {
- return {}
- },
- onReachBottom() {
- if (!this.is_load) {
- this.page = this.page + 1;
- this.http();
- }
- },
- methods: {
- bindChecked(index) {
- this.coupon_list[index].checked = !this.coupon_list[index].checked;
- },
- http() {
- this.$http.request('xcx/LqCoupons_lists', {
- user_id: this.userInfo.id,
- store_id: this.store_id,
- }, "", "", hideLoading).then(res => {
- console.log(res, "LqCoupons_lists")
- for (let s of res.data) {
- s.checked = false;
- s.state = 1;
- };
- this.coupon_list = res.data;
- })
- },
- receive: function(t) {
- let subscribe = uni.getStorageSync('balance_subscribe');
- var that = this,name = t.target.dataset.name,
- id = t.target.dataset.id,
- index = t.target.dataset.index;
- // 调用方法,唤起订阅组件
- // #ifdef MP-ALIPAY
- my.requestSubscribeMessage({
- thirdTypeAppId: that.systemInfo.alipay_appid, // 可选,isv接入场景下必填
- entityIds: [subscribe.alipay_coupons], // 模板id列表,最多3个
- // 接收结果的回调方法
- complete:(r)=>{
- console.log('订阅回调', r);
- that.$http.request('xcx/LqCoupons', {
- user_id: this.userInfo.id,
- store_id: this.store_id,
- coupon_id: id,
- }, "", "", hideLoading).then(res => {
- that.coupon_list[index].state = 2;
- uni.showToast({
- title: '领取成功',
- icon: 'none'
- })
- })
- },
- });
- // #endif
- // #ifdef MP-WEIXIN
- uni.requestSubscribeMessage({
- tmplIds: [subscribe.card_tid],
- // success: (r) => {
- // that.CardMsgSubscribe(name);
- // },
- complete: (r) => {
- that.$http.request('xcx/LqCoupons', {
- user_id: this.userInfo.id,
- store_id: this.store_id,
- coupon_id: id,
- }, "", "", hideLoading).then(res => {
- that.coupon_list[index].state = 2;
- uni.showToast({
- title: '领取成功',
- icon: 'none'
- })
- })
- }
- })
- // #endif
- },
-
- CardMsgSubscribe(name){
- let that = this;
- that.$http.request('xcx/LqCoupons', {
- user_id: this.userInfo.id,
- store_id: this.store_id,
- name: name,
- }, "", "", hideLoading).then(res => {
- })
- },
- }
- };
- </script>
- <style>
- @import "./coupon-list.css";
- </style>
|