<template> <view> <!-- <view class="width90" v-if="couponsDetails.highDiscount.usingRange == 8"> <view class="flright fotct"> <image class="coupon-img" :src="imageUrl+couponsDetails.highDiscount.discountImg"></image> </view> <view class="coupon-mes mart10" style="margin-right: 90px;"> <view class="fcor333 fontwig6 font24 width100 text2">{{couponsDetails.highDiscount.discountName}}</view> <view class="fcor666 font13 width100 mart5"> 活动截止时间:{{salesEndTime | formatDate('-')}}</view> </view> <view class="fcor666 font13 width100 mart5"> 领取有效期:{{couponsDetails.highDiscount.effectiveDay}}天 </view> </view> --> <!-- <view class="line1 mart15" v-if="couponsDetails.highDiscount.usingRange == 8"></view> --> <!-- <button class="coupne-btn width60w mart20 marb20" v-if="userInfo != 1 && couponsDetails.highDiscountAgentCode.status == 1 && couponsDetails.highDiscount.usingRange == 8" @click="receiveDiscount">点击领取</button> <view class="alijus width90 mart20" v-if="userInfo != 1 && couponsDetails.highDiscountAgentCode.status != 1 && couponsDetails.highDiscount.usingRange == 8"> <view class="width40" style="margin-right: 5%;" @click="useDiscount"> <view class="width100 btnno fotct font16 backcor008">立即使用</view> </view> <view class="width40" style="margin-left: 5%;" @click="jumpCounlist"> <view class="width100 btnno fotct font16 backcor008">立即查看</view> </view> </view> <view class="width90 mart30" v-if="couponsDetails.highDiscount.usingRange == 8"> <image :src="imagewxUrl+imgadres3" mode="widthFix" class="width100" v-if="couponsDetails.highDiscountAgentCode.status ==1"></image> <image :src="imagewxUrl+imgadres2" mode="widthFix" class="width100 mart10" v-if="couponsDetails.highDiscountAgentCode.status != 1"></image> </view> --> <image :src="imageres5" class="width100 headbgimg" mode="widthFix" v-if="couponsDetails.highDiscount.usingRange == 8"></image> <view class="width90 contents backcorfff height260 border-r fotct" v-if="couponsDetails.highDiscount.usingRange == 8"> <view class="width90 font18 fontwig6 fcor333 paddtop10 ">{{couponsDetails.highDiscount.discountName}} </view> <view class="width90 font14 fcor333 paddtop5">领取有效期: {{couponsDetails.highDiscount.effectiveDay}}天 </view> <view class="width90 font14 fcor333">活动截止时间:{{salesEndTime | formatDate('-')}}</view> <image class="headcontimg paddtop5" :src="imageUrl+couponsDetails.highDiscount.discountImg"></image> <button class="contentbtn width60w mart10 marb20 height40 fontwig6" lang="zh_CN" v-if="userInfo == 1" @click="jumpres">点击领取</button> <button class="contentbtn width60w mart10 marb20 height40 fontwig6" lang="zh_CN" v-if="userInfo != 1 && couponsDetails.highDiscountAgentCode.status == 1 && couponsDetails.highDiscount.usingRange == 8" @click="receiveDiscount">点击领取</button> <view class="alijus width90 mart20" v-if="userInfo != 1 && couponsDetails.highDiscountAgentCode.status != 1 && couponsDetails.highDiscount.usingRange == 8"> <view class="width40" style="margin-right: 5%;" @click="useDiscount"> <view class="width100 btnno fotct font16 backgrounde72">立即使用</view> </view> <view class="width40" style="margin-left: 5%;" @click="jumpCounlist"> <view class="width100 btnno fotct font16 backgrounde72">立即查看</view> </view> </view> </view> <view class="contconpon width90 border-r" v-if="minecoupones && couponsDetails.highDiscount.usingRange == 8"> <image :src="imagewxUrl+imgadres3" mode="widthFix" class="width100" v-if="couponsDetails.highDiscountAgentCode.status ==1"></image> <image :src="imagewxUrl+imgadres2" mode="widthFix" class="width100 mart10" v-if="couponsDetails.highDiscountAgentCode.status != 1"></image> </view> <!-- //新的优惠券领取 --> <image :src="imageres4" class="width100 headbgimg" mode="widthFix" v-if="couponsDetails.highDiscount.usingRange != 8"></image> <view class="width90 contents backcorfff height260 border-r fotct" v-if="couponsDetails.highDiscount.usingRange != 8"> <view class="width90 font18 fontwig6 fcor333 paddtop10 ">{{couponsDetails.highDiscount.discountName}} </view> <view class="width90 font14 fcor333 paddtop5">领取有效期: {{couponsDetails.highDiscount.effectiveDay}}天 </view> <view class="width90 font14 fcor333">活动截止时间:{{salesEndTime | formatDate('-')}}</view> <image class="headcontimg paddtop5" :src="imageUrl+couponsDetails.highDiscount.discountImg"></image> <button class="contentbtn width60w mart10 marb20 height40 fontwig6" lang="zh_CN" v-if="userInfo == 1" @click="jumpres">点击领取</button> <button class="contentbtn width60w mart10 marb20 height40 fontwig6" lang="zh_CN" v-if="userInfo != 1 && couponsDetails.highDiscountAgentCode.status == 1 && couponsDetails.highDiscount.usingRange != 8" @click="receiveDiscount">点击领取</button> <button class="backcor99 fcorfff width60w mart10 marb20 height40 fontwig6" lang="zh_CN" v-if="userInfo != 1 && couponsDetails.highDiscountAgentCode.status != 1 && couponsDetails.highDiscount.usingRange != 8">已领取</button> </view> <view class="contconpon width90 backcorfff border-r" v-if="minecoupones && couponsDetails.highDiscount.usingRange != 8"> <view class="product-list width94 alijusnostart" v-for="product in minecoupones" :key="product.id"> <image class="prodimg" :src="imageUrl+product.highCoupon.couponImg"> </image> <view class="margle10"> <view class="font15 fontwig6 fcor333">{{ product.highCoupon.couponName }}</view> <view class="price mart5"> ¥{{ product.highCoupon.discountPrice}} <text class="margle10 slogan">¥{{ product.highCoupon.salesPrice}}</text> </view> <view class="usebtn border-r height25l font14 fontwig6 fotct mart5" @tap="toGoods(product.highCoupon.id)">去使用</view> </view> </view> </view> <view :style="{display: usercouFeedbackHidden}" class="popup_content"> <view class="popup_title font18 fcor333 fontwig6 paddtop10">温馨提示</view> <view class="popup_title font16 fcor666 paddtop20 height60">请在有效期30天内使用。过期作废!</view> <view class="width100 bor-botm1 mart10"></view> <view class="alijus width90 mart20"> <view class="width40" style="margin-right: 5%;" @click="hideDiv()"> <view class="width100 btnno font16 backcor99">取消</view> </view> <wx-open-launch-weapp style="width: 40%;margin-left: 5%;" id="launch-btn" username="gh_5fb54244cdbb"> <script type="text/wxtag-template"> <style> .download { color: #ffffff; background: #0083f5; width:100%; height:100%; align-items: center; justify-content: center; font-size: 16px; } </style> <button class="download" style="height:40px;line-height: 40PX;width:100%;border:none;">去使用</button> </script> </wx-open-launch-weapp> </view> </view> <view class="popup_overlay" :style="{display: usercouFeedbackHidden}" @click="hideDiv()"></view> </view> </template> <script> import { getCouponByDiscount, getDiscountByQrCode, receiveDiscount, HandleCode, getUserInfo, getH5AccessToken, loginByPhone, verifyWx, useDiscount } from '../../../Utils/Api.js'; // #ifdef H5 var wx = require('jweixin-module'); // #endif let app = getApp(); export default { data() { return { minecoupones: [], imageUrl: app.globalData.imgUrl, imagewxUrl: app.globalData.imageWxImg, imgadres: 'noorder.png', imgadres2: 'onCoupon.jpg', imgadres3: 'showCoupon.jpg', imageres4: 'https://hsg.dctpay.com/filesystem/wxApplets/couponbg1.png', imageres5: 'https://hsg.dctpay.com/filesystem/wxApplets/couponbg2.png', // 中石油 pageNum: 1, pageSize: 10, isNoMoreData: false, couponsDetails: '', salesEndTime: '', codes: '', userInfo: '', usercouFeedbackHidden: 'none', // 默认隐藏 } }, filters: { //过滤器 用于格式化时间 formatDate: function(value, spe = '/') { let data = new Date(value); let year = data.getFullYear(); let month = data.getMonth() + 1; let day = data.getDate(); let h = data.getHours(); let mm = data.getMinutes(); let s = data.getSeconds(); month = month >= 10 ? month : "0" + month; day = day >= 10 ? day : "0" + day; h = h >= 10 ? h : "0" + h; mm = mm >= 10 ? mm : "0" + mm; s = s >= 10 ? s : "0" + s; return `${year}${spe}${month}${spe}${day}`; } }, onShow() { uni.getStorage({ key: 'user', success: (res) => { app.globalData.userInfo = res.data; if (app.globalData.userInfo.phone) { this.userInfo = 2; } else { this.userInfo = 1; } }, fail() { this.userInfo = 1; } }); }, onLoad() { var arr1 = window.location.href; var arr2 = arr1.split('='); if (!app.globalData.openId) { this.getH5AccessToken(arr2[1]); } this.getDiscountByQrCode(); }, created() { // #ifdef H5 uni.showLoading({ title: '加载中' }) let url = window.location.href.split('#')[0]; let datas = { url: url } verifyWx(datas).then(res => { uni.hideLoading(); if (res.return_code == '000000') { wx.config({ debug: false, // 开启调试模式,返回值会在客户端alert出来。 appId: res.return_data.appId, // 必填,公众号的唯一标识 timestamp: res.return_data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.return_data.nonceStr, // 必填,生成签名的随机串 signature: res.return_data.signature, // 必填,签名 jsApiList: ['onMenuShareTimeline'], // 必填,需要使用的JS接口列表 openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表 }); wx.ready(function(res) {}); wx.error(function(err) {}); } }); // #endif }, methods: { //获取卡券详情 getDiscountByQrCode() { let that = this; uni.getStorage({ key: 'staffCode', success: (res) => { let params = { code: res.data } getDiscountByQrCode(params).then(res => { if (res.return_code == '000000') { that.couponsDetails = res.return_data; that.salesEndTime = res.return_data.highDiscount.salesEndTime; that.getCouponByDiscount(res.return_data.highDiscount.id); } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }) } }); }, //使用优惠券 useDiscount() { let datas = { discountAgentCodeId: this.couponsDetails.highDiscountAgentCode.id } useDiscount(datas).then(res => { if (res.return_code == '000000') { this.onhiddle(); } else { uni.showToast({ title: res.return_msg, duration: 2000, icon: 'none' }) } }) }, //弹出框 onhiddle() { this.usercouFeedbackHidden = 'block'; }, hideDiv() { // 隐藏输入弹出框 this.usercouFeedbackHidden = 'none'; }, //根据优惠券查询卡券列表 getCouponByDiscount(item) { let params = { discountId: item } getCouponByDiscount(params).then(res => { if (res.return_code == '000000') { this.minecoupones = res.return_data; } }) }, //领取 receiveDiscount() { uni.showLoading({ title: '领取中...' }) let params = { codeId: this.couponsDetails.highDiscountAgentCode.id } receiveDiscount(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); uni.showToast({ icon: 'none', title: res.return_data, duration: 2000 }) this.getDiscountByQrCode(); } else { uni.hideLoading(); uni.showToast({ icon: 'none', title: res.return_msg, duration: 2000 }) } }) }, //跳转登录 jumpres() { uni.navigateTo({ url: '../../login/register?id=2' }) }, //H5 获取openId getH5AccessToken(item) { let params = { code: item } getH5AccessToken(params).then(res => { if (res.return_code == '000000') { app.globalData.openId = res.return_data.openid; uni.setStorage({ key: "openId", data: res.return_data.openid }) } }); }, // 微信获取手机号 loginByPhone(PhoneNumber) { if (PhoneNumber.detail.iv == undefined) { uni.showToast({ title: "用户取消授权", icon: "none" }); return; } let params = { openId: app.globalData.openId, iv: PhoneNumber.detail.iv, encryptedData: PhoneNumber.detail.encryptedData } loginByPhone(params).then(res => { if (res.return_code == '000000') { uni.showToast({ title: '手机号授权成功', icon: 'none', duration: 2000 }) this.user = res.return_data.object.highUser; app.globalData.token = res.return_data.uniqueCode; app.globalData.userInfo = res.return_data .object .highUser; uni.setStorage({ key: "user", data: res.return_data .object .highUser }) uni.setStorage({ key: "token", data: res.return_data.uniqueCode }) this.receiveDiscount(); this.userInfo = 2; } }); }, //商品跳转 toGoods(e) { if (app.globalData.userInfo) { uni.navigateTo({ url: '../../order/confirmation?id=' + e }) } else { uni.showToast({ icon: 'none', title: '请点击领取后再使用', duration: 2000 }) } }, //跳转列表 jumpCounlist() { uni.reLaunch({ url: '/pages/user/coupon/coupon' }) } } } </script> <style lang="scss"> page { background-color: #3fa9fd; } .popup_content { position: fixed; top: 40%; left: 50%; width: 520upx; height: 400upx; margin-left: -270upx; margin-top: -270upx; border: 10px solid white; background-color: white; z-index: 1002; overflow: auto; border-radius: 20upx; } .popup_title { display: flex; justify-content: center; text-align: center; width: 480upx; } // 弹窗 .popup_overlay { position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=88); } .coupon-img { width: 80px; height: 80px; } // .product-list { // display: flex; // justify-content: space-between; // flex-wrap: wrap; // .product { // width: 48%; // border-radius: 20upx; // background-color: #fff; // margin: 0 0 15upx 0; // box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1); // image { // width: 100%; // border-radius: 20upx 20upx 0 0; // } // .name { // width: 92%; // padding: 8upx 4%; // display: -webkit-box; // -webkit-box-orient: vertical; // -webkit-line-clamp: 1; // text-align: justify; // overflow: hidden; // font-size: 30upx; // } // .info { // display: flex; // justify-content: space-between; // align-items: flex-end; // width: 92%; // padding: 10upx 4% 10upx 4%; // .price { // color: #e65339; // font-size: 30upx; // font-weight: 600; // } // .slogan { // color: #807c87; // font-size: 24upx; // text-decoration: line-through; // margin-right: 10px; // } // } // } // } .product-list { .prodimg { width: 80px; height: 80px; } .price { color: #e65339; font-size: 30upx; font-weight: 600; } .slogan { color: #807c87; font-size: 24upx; text-decoration: line-through; margin-right: 10px; } .usebtn { width: 60px; background: linear-gradient(to right, #fccd17, #fceb63); color: #e72114; } } .coupne-btn { background-color: red; color: #FFFFFF; } .btnno { height: 40px; line-height: 40PX; display: flex; justify-content: center; color: #ffffff; } .headbgimg { position: absolute; } .contents { position: relative; top: 160px; .headcontimg { width: 90px; height: 90px; } .contentbtn { background: linear-gradient(to right, #fccd17, #fceb63); color: #e72114; } } .backgrounde72 { background-color: #e72114; } .contconpon { position: relative; top: 180px; padding-top: 10px; padding-bottom: 10px; } </style>