<template> <view class="coupon-list"> <view v-if="couponInfo" class="coupon-box"> <view class="coupon-head"> <view class="coupon-sel"></view> <view class="coupon-title"> <view class="coupon-title-1">{{couponInfo.title}}</view> </view> <view class="coupon-price"> ¥<text>{{couponInfo.subAmount}}</text> </view> </view> <view class="coupon-desc"> <view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期:{{couponInfo.validDateStr}}</view> <view> <u-icon class="icon" size="30" name="info-circle"></u-icon> <text class="couponRuleDesc">{{couponInfo.ruleDesc}}</text> </view> </view> </view> <u-empty :text="noDataText" v-if="!couponInfo && status!='loading'" mode="coupon"></u-empty> <u-button v-if="!isDisabled" class="handleSubmit" :disabled="isDisabled" shape="circle" @click="handleSubmit" type="error">确认领取</u-button> </view> </template> <script> import {couponData, receivesCoupon} from '@/api/coupon.js' export default{ name: 'getCoupon', data () { return { couponInfo: null, // 领取优惠券信息 isDisabled: true, // 是否可领取 status: 'loading', noDataText: '暂无优惠券' } }, onLoad(options) { console.log(options,'options') // 存储当前扫码的券码 if (options.scene) { let scene = decodeURIComponent(options.scene); console.log(scene,'1111') //&是我们定义的参数链接方式 let customerType = scene.split(',')[0]; let storeId = scene.split(',')[1]; let couponCode = scene.split(',')[2]; console.log(scene.split(','),'222') //其他逻辑处理。。。。。 this.$store.state.vuex_couponInfo.customerType = customerType this.$store.state.vuex_couponInfo.storeId = storeId this.$store.state.vuex_couponInfo.couponCode = couponCode // 获取要领取的优惠券 this.getCoupon(couponCode) } else { // 判断是否扫码过 if (this.$store.state.vuex_couponCode != '') { let couponCode = this.$store.state.vuex_couponCode this.getCoupon(couponCode) } else { // 返回首页 uni.reLaunch({ url: "/pages/index/index" }) } } }, methods: { // 获取要领取的优惠券 getCoupon (code) { this.status = 'loading' couponData({couponCode:code}).then(res=>{ this.status = 'onmore' if (res.status == 200 ) { this.couponInfo = res.data this.isDisabled = res.data ? false : true } else { this.couponInfo = null this.isDisabled = true this.noDataText = res.message } }) }, // 确认领取优惠券 handleSubmit () { let params= { wechatCustomerType: this.$store.state.vuex_couponInfo.customerType, storeId: this.$store.state.vuex_couponInfo.storeId, code: this.$store.state.vuex_couponInfo.couponCode } receivesCoupon(params).then(res =>{ if (res.status == 200) { this.toashMsg('领取成功') setTimeout(()=>{ uni.reLaunch({ url: '/pages/index/index' }) },500) } }) } }, } </script> <style lang="scss"> .coupon-list{ width: 100%; height: 100%; padding: 25rpx; .u-size-default.data-v-3bf2dba7 { margin-top: 100px; width: 60%; } } .coupon-box.diabled{ background: #999; } .coupon-box{ margin-bottom: 30rpx; border-radius: 15rpx; box-shadow: 2rpx 2rpx 10rpx #ddd; background: #ff0000; color: #FFFFFF; .coupon-head{ display: flex; align-items: center; padding: 20rpx 30rpx; position: relative; border-bottom: 15rpx dotted #FFFFFF; margin-bottom: -8rpx; .coupon-sel{ position: absolute; width: 56rpx; height: 46rpx; right: 0; top: 0; } .coupon-checked{ background: url(/static/img/select.png) no-repeat center; background-size: 100% 100%; } .coupon-title{ flex-grow: 1; font-size: 32rpx; } .coupon-price{ padding: 0 15rpx; color: #FFFFFF; text{ font-size: 60rpx; } } } .coupon-desc{ padding: 10rpx 30rpx; color: #666; background: #FFFFFF; border-bottom-left-radius:10rpx; border-bottom-right-radius: 10rpx; >view{ padding: 5rpx 0; display: flex; align-items: flex-start; } .couponRuleDesc{ width: 100%; padding-right: 30rpx; word-wrap: break-word; } .icon{ margin-right: 10rpx; } } } </style>