|
|
@@ -0,0 +1,559 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <img src="~/assets/image/activity/double-eleven/head.png" width="100%">
|
|
|
+ <div class="double-eleven">
|
|
|
+ <van-overlay :show="login" style="background: transparent;">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div class="wrapper-login">
|
|
|
+ 请先登录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-overlay>
|
|
|
+ <div class="double-eleven-container">
|
|
|
+
|
|
|
+ <div class="default" v-if="!couponsList.length">
|
|
|
+ <img src="~/assets/image/activity/double-eleven/couponbj.png" width="100%" >
|
|
|
+ <div class="default-img" >
|
|
|
+ <img src="~/assets/image/activity/double-eleven/default.png" >
|
|
|
+ 暂无优惠券哦～
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="coupon" >
|
|
|
+ <div class="let-title">
|
|
|
+ <div><span>7</span>折</div>
|
|
|
+ <div>折扣券</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">月卡套餐7折优惠券</div>
|
|
|
+ <div class="tips">满90元可用，优惠券有效期<span style="color:#D358A8">3</span>天</div>
|
|
|
+ <div class="number">剩余数量：2893张</div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" @click="receiveCouponRewards({id:11})"></div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div class="coupon" v-for="item in couponsList" :key="item.id">
|
|
|
+ <!-- <div class="icon">{{item.couponName}}</div> -->
|
|
|
+ <!-- 类型（1.抵扣券 2.折扣券 3.红包券)" -->
|
|
|
+ <div class="let-title">
|
|
|
+ <div v-if="item.couponType===1">¥<span>{{item.couponValue}}</span></div>
|
|
|
+ <div v-else><span>{{item.deductionPrice}}</span>折</div>
|
|
|
+ <div v-if="item.maxValue" class="maxValue">满{{ item.maxValue }}元减</div>
|
|
|
+ <div v-else class="maxValue">{{ item.useThreshold }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">{{item.couponName}}</div>
|
|
|
+ <div class="tips">{{item.couponExplain}}</div>
|
|
|
+ <div class="number">剩余数量：{{item.remainder}}张</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.receivingStatus===1" class="btn" @click="receiveCouponRewards(item)"></div>
|
|
|
+ <div v-else-if="item.receivingStatus===2" class="btn-collect"></div>
|
|
|
+ <div v-else-if="item.receivingStatus===3" class="btn-nocoupon"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <img src="~/assets/image/activity/double-eleven/game.png" width="100%" style="margin-top:30px">
|
|
|
+ <img src="~/assets/image/activity/double-eleven/blacktechnology.png" width="100%">
|
|
|
+ <img src="~/assets/image/activity/double-eleven/advantage.png" width="100%">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-popup v-model="show" style="background: transparent;" :close-on-click-overlay="false">
|
|
|
+ <div class="popup-container">
|
|
|
+ <div class="coupon">
|
|
|
+ <div class="let-title">
|
|
|
+ <div v-if="coupons.couponType===1">¥<span>{{coupons.couponValue}}</span></div>
|
|
|
+ <div v-else><span>{{coupons.deductionPrice}}</span>折</div>
|
|
|
+ <div v-if="coupons.maxValue" class="maxValue">满{{ coupons.maxValue }}元减</div>
|
|
|
+ <div v-else class="maxValue">{{ coupons.useThreshold }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">{{coupons.couponName}}</div>
|
|
|
+ <div class="tips">{{coupons.couponExplain}}</div>
|
|
|
+ <div class="number">有效期：{{coupons.validityPeriod}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="coupon" >
|
|
|
+ <div class="let-title">
|
|
|
+ <div><span>7</span>折</div>
|
|
|
+ <div class="maxValue">满5000元减</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">月卡套餐7折优惠券</div>
|
|
|
+ <div class="tips">满90元可用，优惠券有效期<span style="color:#D358A8">3</span>天</div>
|
|
|
+ <div class="number">剩余数量：2893张</div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+
|
|
|
+ <img src="~/assets/image/activity/double-eleven/btn2.png" width="100%" @click="goOrder">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="coupon-tips">优惠券可在【我的】-【卡券】内查看</div>
|
|
|
+ <img src="~/assets/image/activity/double-eleven/close.png" class="close" @click="show=false"/>
|
|
|
+ </van-popup>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Toast } from 'vant';
|
|
|
+const webUni = require('../../../plugins/uni');
|
|
|
+export default {
|
|
|
+ name: 'doubleEleven',
|
|
|
+ auth: false,
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show:false,
|
|
|
+ coupons:{},
|
|
|
+ login:false,
|
|
|
+ loading:false,
|
|
|
+ couponsList:[],
|
|
|
+ token:'',
|
|
|
+ client:''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async fetch() {
|
|
|
+ if (this.$route.query.type === 'pc') {
|
|
|
+ this.$router.push({ path: '/activity/doubleEleven/pc', query: { token: this.$route.query.token, type: 'pc' } })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
|
|
|
+ this.token = await window.native.getToken();
|
|
|
+ } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
|
|
|
+ window.webkit.messageHandlers.getToken.postMessage('获取token');
|
|
|
+
|
|
|
+ let _this = this
|
|
|
+ window.getIosToken=(token) => {
|
|
|
+ _this.token = token
|
|
|
+ resolve();
|
|
|
+ };
|
|
|
+ }else if(this.$route.query.token && this.$route.query.token != 'needToken'){
|
|
|
+ this.token = this.$route.query.token;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getCoupons()
|
|
|
+
|
|
|
+ if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
|
|
|
+ this.client = 1;
|
|
|
+ } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
|
|
|
+ this.client = 2;
|
|
|
+ } else if (this.$userAgent.isMiniProgram) {
|
|
|
+ this.client = 5;
|
|
|
+ } else {
|
|
|
+ this.client = 7;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.visit()
|
|
|
+
|
|
|
+ },
|
|
|
+ head: {
|
|
|
+ title: '双十一 大额优惠券免费领',
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // const _this = this
|
|
|
+ // setInterval(() => {
|
|
|
+ // _this.getCoupons()
|
|
|
+ // }, 600000);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ visit() {
|
|
|
+ this.$axios.$post('/user/v5/userAccess/user/visit',
|
|
|
+ {
|
|
|
+ loginType: this.token ? 1 : 2,
|
|
|
+ accessType: 13
|
|
|
+ },
|
|
|
+ );
|
|
|
+ },
|
|
|
+ goOrder()
|
|
|
+ {
|
|
|
+ const productId = !this.coupons.products || this.coupons.products.split(',').length > 1 ? -1 : parseInt(this.coupons.products)
|
|
|
+ if (this.$route.query.type === 'pc') {
|
|
|
+ window.vgeminipc.startPhoneMeal(productId)
|
|
|
+ } else if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
|
|
|
+ window.native.startPurchasePage(productId);
|
|
|
+ } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
|
|
|
+ window.webkit.messageHandlers.activity202211.postMessage({productId});
|
|
|
+ } else if (this.$userAgent.isMiniProgram) {
|
|
|
+ this.$wx.miniProgram.navigateTo({
|
|
|
+ url:
|
|
|
+ '/packageA/order/buy/index',
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ webUni.webView.navigateTo({
|
|
|
+ url: '/pages/order/order?productId=' + productId
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getCoupons()
|
|
|
+ {
|
|
|
+ const res = await this.$axios.$post('/activity/v5/couponActivity/getCouponActivityInfo', {},
|
|
|
+ { headers: { Authorization: this.token }});
|
|
|
+ if(res.status === 0)
|
|
|
+ {
|
|
|
+ res.data.forEach(element => {
|
|
|
+ if(element.receivingStatus !== 3)
|
|
|
+ {
|
|
|
+ element.remainder = element.remainder
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.couponsList = res.data;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ async receiveCouponRewards(row)
|
|
|
+ {
|
|
|
+ if(!this.token)
|
|
|
+ {
|
|
|
+ this.login = true
|
|
|
+ const _this = this
|
|
|
+ // setTimeout(() => {window.location.href='https://client.phone.androidscloud.com/cloud/phone/web/#/pages/login/index';_this.login = false},1000);
|
|
|
+
|
|
|
+ setTimeout(() => {window.location.href='https://prese.phone.androidscloud.com/cloud/phone/web/#/pages/index/index';_this.login = false},1000);
|
|
|
+
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.loading) return
|
|
|
+ this.loading = true
|
|
|
+ Toast.loading({ duration: 0, forbidClick: true,});
|
|
|
+
|
|
|
+ try {
|
|
|
+ const data = { goodsId: row.id, };
|
|
|
+ const res = await this.$axios.$get('/activity/v5/couponActivity/receiveCouponRewards',{ params: { goodsId:row.id} ,headers: { Authorization: this.token }});
|
|
|
+
|
|
|
+ if(res.status === 0)
|
|
|
+ {
|
|
|
+ this.coupons = res.data
|
|
|
+ this.show = true
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ Toast({
|
|
|
+ message: res.msg,
|
|
|
+ position: 'top',
|
|
|
+ duration: 4000,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ await this.getCoupons()
|
|
|
+ this.loading = false
|
|
|
+ Toast.clear();
|
|
|
+
|
|
|
+ }catch (error) {
|
|
|
+ Toast.clear();
|
|
|
+ this.loading = false
|
|
|
+ // await this.getCoupons()
|
|
|
+ Toast({
|
|
|
+ message: error.message,
|
|
|
+ position: 'top',
|
|
|
+ duration: 4000,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.double-eleven{
|
|
|
+ background-image: url('../../../assets/image/activity/double-eleven/bj.png');
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: round;
|
|
|
+ min-height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: -1px;
|
|
|
+}
|
|
|
+img{
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.double-eleven-container{
|
|
|
+ padding: 10px;
|
|
|
+ img{
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.coupon{
|
|
|
+ width: 100%;
|
|
|
+ height: 105px;
|
|
|
+ background: #FDFFFD;
|
|
|
+ box-shadow: 0px 11px 12px 0px rgba(255,121,168,0.46);
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ // padding: 18px 10px 8px 10px;
|
|
|
+
|
|
|
+ .icon{
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ background: url('../../../assets/image/activity/double-eleven/icon.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ line-height: 70px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Yuanti SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #F0F3FC;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5px;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+
|
|
|
+ .let-title{
|
|
|
+ width: 100px;
|
|
|
+ height: 105px;
|
|
|
+ display: inline-block;
|
|
|
+ background: #F6E1E1;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Source Han Sans;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #F04545;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16px 0;
|
|
|
+ border-radius: 12px 0 0 12px;
|
|
|
+ vertical-align: top;
|
|
|
+ span{
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ .maxValue{
|
|
|
+ font-size: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content{
|
|
|
+ width: calc(100% - 180px);
|
|
|
+ height: 105px;
|
|
|
+ display: inline-block;
|
|
|
+ // margin-top: -2px;
|
|
|
+ // margin-left: 5px;
|
|
|
+ padding: 10px 5px;
|
|
|
+
|
|
|
+ .title{
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #333333;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .tips{
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number{
|
|
|
+ margin-top: 5px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ background: linear-gradient(90deg, #FF4BD3, #7492FE);
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding: 0 5px;
|
|
|
+ width: fit-content;
|
|
|
+ margin-top: 3px;
|
|
|
+ // display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url('../../../assets/image/activity/double-eleven/btn.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: Yuanti SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #F0F3FC;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 2px;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-top: 23px;
|
|
|
+ // vertical-align: initial;
|
|
|
+ // display: inline-block;
|
|
|
+ // vertical-align:text-bottom;
|
|
|
+ // float:right;
|
|
|
+ }
|
|
|
+ .btn-collect{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url('../../../assets/image/activity/double-eleven/collect.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: Yuanti SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #F0F3FC;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 2px;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-top: 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-nocoupon{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url('../../../assets/image/activity/double-eleven/nocoupon.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: Yuanti SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #F0F3FC;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 2px;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-top: 23px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.popup-container{
|
|
|
+ width: 295px;
|
|
|
+ height: 407px;
|
|
|
+ background: url('../../../assets/image/activity/double-eleven/bj2.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding-top: 210px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+
|
|
|
+ .coupon{
|
|
|
+ width: 255px;
|
|
|
+ height: 95px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .let-title{
|
|
|
+ width: 90px;
|
|
|
+ height: 95px;
|
|
|
+ display: inline-block;
|
|
|
+ background: #F6E1E1;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: Source Han Sans;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #F04545;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16px 0;
|
|
|
+ border-radius: 12px 0 0 12px;
|
|
|
+ vertical-align: top;
|
|
|
+ span{
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .maxValue{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ width: calc(100% - 100px);
|
|
|
+ margin-bottom: 25px;
|
|
|
+ .title{
|
|
|
+ font-size: 14px !important;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #333333;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 23px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .tips{
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number{
|
|
|
+ margin-top: 7px;
|
|
|
+ height: 15px;
|
|
|
+ line-height: 15px;
|
|
|
+ background: linear-gradient(90deg, #FF4BD3, #7492FE);
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding: 0 5px;
|
|
|
+ width: fit-content;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.coupon-tips{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 30px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+.close{
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-left: calc(50% - 22px);
|
|
|
+ width: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrapper-login{
|
|
|
+ width: 150px;
|
|
|
+ height: 40px;
|
|
|
+ background: #000000;
|
|
|
+ opacity: 0.6;
|
|
|
+ border-radius: 45px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align:center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login{
|
|
|
+ background-color:transparent;
|
|
|
+ }
|
|
|
+ .default{
|
|
|
+ width:100%;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 24px;
|
|
|
+ .default-img{
|
|
|
+ position: absolute;
|
|
|
+ top: calc(50% - 50px);
|
|
|
+ left: calc(50% - 50px);
|
|
|
+ color: #333;
|
|
|
+ img {
|
|
|
+ width: 100px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
huangxiaojing
