|
@@ -0,0 +1,288 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="top"></view>
|
|
|
+ <view class="lineBOx">
|
|
|
+ <view class="line" v-for="(item,index) in list">
|
|
|
+ <view class="lineLeft">
|
|
|
+ <view class="lineName">{{item.actName}}</view>
|
|
|
+ <view class="moneyBox">
|
|
|
+ <span class="moneyBs">¥</span>
|
|
|
+ <span class="moneyNum">{{item.actMoney}}</span>
|
|
|
+ <span class="mdsky">{{item.whereMoney!==0?'满'+item.whereMoney+'可用':'无限制'}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="endOffsetDays">
|
|
|
+ <span v-if="item.endOffsetDays">领取后{{item.endOffsetDays}}天有效</span>
|
|
|
+ <span v-else>{{item.startTime|dateformat}} - {{item.endTime|dateformat}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="lineRight">
|
|
|
+ <view class="receiveBtn" @click="receive(item.id)">领取</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 领取说明 -->
|
|
|
+ <view class="illustrateBox">
|
|
|
+ <view class="illustratex"></view>
|
|
|
+ <view class="illustrate">领取说明</view>
|
|
|
+ <view class="illustratex"></view>
|
|
|
+ </view>
|
|
|
+ <view class="comment" v-html="comment"> </view>
|
|
|
+ <!-- 一键领取 -->
|
|
|
+ <!-- <view class="oneClick">一键领取</view> -->
|
|
|
+ <!-- 手机号授权 -->
|
|
|
+ <view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
|
|
|
+ <view class="authorizCont" @click.stop="">
|
|
|
+ <view class="authorizName">{{wxOpenData.miniAppName}}</view>
|
|
|
+ <view class="authorizMs">您好,欢迎访问本店,授权手机号登录能获取我们最新的促销活动哦~</view>
|
|
|
+ <button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
|
|
|
+ </view>
|
|
|
+ <view style="text-align: center;padding-top: 56rpx;">
|
|
|
+ <image src="../../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list:[],
|
|
|
+ comment:'',
|
|
|
+ authorizShow:false,
|
|
|
+ userInfo:'',
|
|
|
+ ext:'',
|
|
|
+ wxOpenData:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.userInfo=this.$store.state.userInfo;
|
|
|
+ this.ext=this.$common.getExtStoreId();
|
|
|
+ if(this.userInfo){
|
|
|
+ this.getCouponCenterList()
|
|
|
+ }else{
|
|
|
+ this.$common.automaticlogin().then(val => {
|
|
|
+ this.userInfo=this.$store.state.userInfo;
|
|
|
+ this.wxOpenData=this.$store.state.wxOpenData;
|
|
|
+ this.getCouponCenterList()
|
|
|
+ if(!this.userInfo){
|
|
|
+ this.authorizShow=true
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters:{
|
|
|
+ dateformat(val){
|
|
|
+ return val.slice(0,10)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ receive(id){
|
|
|
+ uni.showLoading({
|
|
|
+ title: '领取中'
|
|
|
+ })
|
|
|
+ this.$http('opencoupon/getCoupons', {
|
|
|
+ id: id,
|
|
|
+ }, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '领取成功',
|
|
|
+ icon:'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ this.getCouponCenterList();
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCouponCenterList(){
|
|
|
+ var params={}
|
|
|
+ this.$http('opencoupon/getCouponCenterList', params, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.list = res.data.list;
|
|
|
+ this.comment=res.data.comment;
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ authorizShowno(){
|
|
|
+ this.authorizShow=false
|
|
|
+ },
|
|
|
+ decryptPhoneNumber: function(e) {
|
|
|
+ console.log(e);
|
|
|
+ this.code=e.detail.code
|
|
|
+ this.wxPhoneLogin()
|
|
|
+ this.authorizShow=false;
|
|
|
+ },
|
|
|
+ wxPhoneLogin(){
|
|
|
+ var that=this;
|
|
|
+ this.$http('miniApp2/sys/wxPhoneLogin', {
|
|
|
+ appId:this.ext.appId,
|
|
|
+ unionId:this.ext.unionId,
|
|
|
+ code:this.code,
|
|
|
+ openId:this.wxOpenData.openid
|
|
|
+ },'POST').then(res => {
|
|
|
+ var data = res.data;
|
|
|
+ if(data.loginInfo){
|
|
|
+ this.userInfo=data.loginInfo.openUser;
|
|
|
+ this.wxOpenData=data.loginInfo;
|
|
|
+ this.$store.commit('mutationswxOpenData', data)
|
|
|
+ this.$store.commit('mutationsuserInfo', this.userInfo)
|
|
|
+ this.getCouponCenterList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .comment{
|
|
|
+ padding: 0 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .oneClick{
|
|
|
+ width: 368rpx;height: 82rpx;text-align: center;line-height: 82rpx;
|
|
|
+ background: url('http://dmsphoto.66km.com.cn/thFiles/D810AED4-98B9-49DB-87E6-42C015BAD016.png');
|
|
|
+ background-size: 100% 100%;font-weight: 500;
|
|
|
+ color: #FF0000;font-size: 30rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 80rpx;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ min-height: 100vh;
|
|
|
+ background:#FD5300 ;
|
|
|
+ }
|
|
|
+ .top{
|
|
|
+ height: 272rpx;
|
|
|
+ background: url('http://dmsphoto.66km.com.cn/thFiles/8CE54BE7-E78E-4BC5-98B7-6320CE691301.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .line{
|
|
|
+ background: url('http://dmsphoto.66km.com.cn/thFiles/47158ED0-1F6C-4C6D-840B-D92AADFED33D.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ height: 200rpx;display: flex;justify-content: space-between;
|
|
|
+ }
|
|
|
+ .lineBOx{
|
|
|
+ padding: 0 24rpx;
|
|
|
+ }
|
|
|
+ .lineLeft{
|
|
|
+ padding-left: 20rpx;padding-top: 24rpx;
|
|
|
+ }
|
|
|
+ .lineName{
|
|
|
+ font-weight: 500;font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+ .moneyBox{
|
|
|
+ padding-top: 8rpx;
|
|
|
+ }
|
|
|
+ .moneyBs{
|
|
|
+ font-weight: 500;font-size: 28rpx;
|
|
|
+ color: #FF0000;
|
|
|
+ }
|
|
|
+ .moneyNum{
|
|
|
+ font-weight: 500;font-size: 48rpx;
|
|
|
+ color: #FF0000;
|
|
|
+ }
|
|
|
+ .mdsky{
|
|
|
+ font-weight: 400;font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .endOffsetDays{
|
|
|
+ font-weight: 400;font-size: 24rpx;
|
|
|
+ color: #666666;padding-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .receiveBtn{
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: #FF502D;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .lineRight{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ }
|
|
|
+ .illustrateBox{
|
|
|
+ display: flex;padding: 30rpx 0;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .illustratex{
|
|
|
+ width: 34rpx;height: 5rpx;background: #FFFFFF;margin-top: 15rpx;
|
|
|
+ }
|
|
|
+ .illustrate{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;padding: 0 16rpx;
|
|
|
+ line-height: 40rpx
|
|
|
+ }
|
|
|
+ .authorizBox{
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .authorizCont{
|
|
|
+ margin-top: 30vh;
|
|
|
+ width: 564rpx;
|
|
|
+ height: 408rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin-left: 93rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .authorizCloseImg{
|
|
|
+ width: 62rpx;
|
|
|
+ height: 62rpx;
|
|
|
+ }
|
|
|
+ .sqLogoBox{
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: -50rpx;
|
|
|
+ left: 192rpx;
|
|
|
+ }
|
|
|
+ .authorizName{
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 58rpx;
|
|
|
+ }
|
|
|
+ .authorizMs{
|
|
|
+ color: #999999;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ width: 452rpx;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 56rpx;
|
|
|
+ }
|
|
|
+ .authorizContbutton{
|
|
|
+ width: 422rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #D53533;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size:30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-top: 62rpx;
|
|
|
+ margin-left:71rpx;
|
|
|
+ }
|
|
|
+</style>
|