Compare commits
2 Commits
d93ea66c24
...
c8d1d09279
Author | SHA1 | Date |
---|---|---|
huangzhen | c8d1d09279 | |
huangzhen | 8222d61c32 |
|
@ -8,7 +8,7 @@ import {
|
|||
const routePublic = [
|
||||
{
|
||||
path: "/",
|
||||
redirect: "/home?key=pGp/5HxvwkTcO2ubI72WTBSw7uhGqjFwWgLEcczRgag="
|
||||
redirect: "/home?key=RRNh8MJovInMq/RaPpjkpsL4CWwX13o7Fuerg/xLhwg="
|
||||
},
|
||||
{
|
||||
// 首页(中转处理逻辑)
|
||||
|
|
|
@ -9,7 +9,7 @@ export default {
|
|||
return {
|
||||
key: this.$route.query.key,
|
||||
jumpPath: this.$route.query.jumpPath,
|
||||
wxAuthUrl: 'https://openapi.1688sup.com/wechat/oauth',
|
||||
wxAuthUrl: 'https://utils.85938.cn/utils/v1/wechat/oauth/bale',
|
||||
isAutoEmpower: true,
|
||||
loadingText: '加载中',
|
||||
}
|
||||
|
|
|
@ -90,7 +90,7 @@ export default {
|
|||
overlayLoad: false, // 点击 遮罩 loading
|
||||
|
||||
isWx: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1,
|
||||
wxAuthUrl: 'https://openapi.1688sup.com/wechat/oauth',
|
||||
wxAuthUrl: 'https://utils.85938.cn/utils/v1/wechat/oauth/bale',
|
||||
zfbAuthUrl: 'https://openapi.1688sup.com/alipay/oauth',
|
||||
|
||||
key: this.$route.query.key || localStorage.getItem("key"),
|
||||
|
|
|
@ -76,20 +76,21 @@
|
|||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
.f-input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
height: 42px;
|
||||
border-radius: 100px;
|
||||
padding: 0 16px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 14px;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.f-note {
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.inputBt {
|
||||
margin: 20px auto 20px;
|
||||
|
|
|
@ -13,17 +13,15 @@
|
|||
{{ cash.denomination || 0 }}
|
||||
</span>
|
||||
</p>
|
||||
<!-- <p class="type">
|
||||
<span>固额红包</span>
|
||||
</p> -->
|
||||
<div v-if="!needInput" class="bt" @click="receive">
|
||||
立即领取
|
||||
</div>
|
||||
<p class="type">
|
||||
<span>XX红包</span>
|
||||
</p>
|
||||
<div v-if="!needInput" class="bt" @click="receive">立即领取</div>
|
||||
</div>
|
||||
<div v-if="needInput" class="form">
|
||||
<input type="text" placeholder="请输入真实姓名" class="f-input" v-model="inputVal" maxlength="100">
|
||||
<input type="text" placeholder="请输入支付宝账号" class="f-input" v-model="inputValAgain">
|
||||
<p class="f-note">您可在支付宝的个人信息中查看【支付宝账号】</p>
|
||||
<van-field class="f-input" v-model="inputVal" label="账号" :placeholder="`请输入${getInputText}账号`" />
|
||||
<van-field class="f-input" v-model="inputValAgain" label="再次输入" placeholder="请再次输入" />
|
||||
<p class="f-note">您可在{{ getInputText }}的个人信息中查看【{{ getInputText }}账号】</p>
|
||||
<div class="bt inputBt" @click="receive">
|
||||
立即领取
|
||||
</div>
|
||||
|
@ -33,15 +31,11 @@
|
|||
<div class="instruction">
|
||||
<div class="instruction-1">
|
||||
<p class="center">
|
||||
<img
|
||||
class="notice"
|
||||
src="https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/common_title_notice.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="notice" src="https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/common_title_notice.png" alt="" />
|
||||
</p>
|
||||
<div>
|
||||
<h3 class="instruction-text">使用规则</h3>
|
||||
<p class="scroll" v-html="cash.instruction"></p>
|
||||
<p class="scroll" v-html="'待补充规则'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -68,7 +62,7 @@ export default {
|
|||
overlayLoad: false, // 点击 遮罩 loading
|
||||
|
||||
isWx: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1,
|
||||
wxAuthUrl: 'https://openapi.1688sup.com/wechat/oauth',
|
||||
wxAuthUrl: 'https://utils.85938.cn/utils/v1/wechat/oauth/bale',
|
||||
zfbAuthUrl: 'https://openapi.1688sup.com/alipay/oauth',
|
||||
|
||||
key: this.$route.query.key || localStorage.getItem("key"),
|
||||
|
@ -78,6 +72,7 @@ export default {
|
|||
|
||||
bgDefault: 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/common_img_main_1.png',
|
||||
bgInput: 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/zfb-red-banner.png',
|
||||
goodId: Number(this.$route.query.id),
|
||||
goods: {}, // 商品基本信息
|
||||
cash: {}, // 红包信息
|
||||
inputVal: '',
|
||||
|
@ -95,18 +90,28 @@ export default {
|
|||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getInputText() {
|
||||
if (this.cash.channel === 1) { // 支付宝-账号领取
|
||||
return '支付宝';
|
||||
} else { // 云闪付
|
||||
return '云闪付';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loadingStatus = true;
|
||||
const id = this.$route.query.id;
|
||||
if (!id) return showToast('商品ID不能为空');
|
||||
const { code, data, message } = await DETAIL_QUERY({ key: this.key, id: id }) || {};
|
||||
if (!this.goodId) return showToast('商品ID不能为空');
|
||||
const { code, data, message } = await DETAIL_QUERY({ key: this.key, id: this.goodId }) || {};
|
||||
if (code === 200) {
|
||||
Object.assign(this.goods, data.goods);
|
||||
Object.assign(this.cash, data.cash, {
|
||||
// 处理红包信息 todo
|
||||
channel: 2,
|
||||
receive_mode: 2,
|
||||
end_time: '2024-9-30',
|
||||
denomination: '78.00',
|
||||
});
|
||||
} else {
|
||||
showToast(message || '请求失败');
|
||||
|
@ -117,7 +122,7 @@ export default {
|
|||
if (this.goods.err_code) {
|
||||
return showToast(this.goods.reson || '商品异常');
|
||||
}
|
||||
let account = '默认';
|
||||
let account = '';
|
||||
if (this.needInput) { // 支付宝-账号领取 + 云闪付
|
||||
if (!this.inputVal) {
|
||||
return showToast('请输入账号');
|
||||
|
@ -142,9 +147,9 @@ export default {
|
|||
this.overlayLoad = true;
|
||||
const res = await EXCHANGE({
|
||||
key: this.key,
|
||||
id: [Number(this.$route.query.id)],
|
||||
account: account,
|
||||
name: 'name',
|
||||
id: [this.goodId],
|
||||
account: account || '默认',
|
||||
name: '默认',
|
||||
});
|
||||
if (res && res.code === 200 && res.data) {
|
||||
if (res.data[0].code === 200) {
|
||||
|
@ -163,7 +168,7 @@ export default {
|
|||
// mode 支付宝:1 官方领取 2 账号领取;微信:1 小程序 2 公众号 3 通用领取
|
||||
const channel = this.cash.channel, mode = this.cash.receive_mode;
|
||||
if (channel === 1 && mode === 1) { // 支付宝-官方领取
|
||||
const backLink = encodeURIComponent(`${location.origin}/yxh5/cmsVoucher?key=${localStorage.getItem('key')}&id=${this.$route.query.id}`);
|
||||
const backLink = encodeURIComponent(`${location.origin}/yxh5/cmsVoucher?key=${localStorage.getItem('key')}&id=${this.goodId}`);
|
||||
const url = `${this.zfbAuthUrl}?jump=${backLink}`;
|
||||
// 微信等环境不能直接打开支付宝
|
||||
const ua = navigator.userAgent.toLowerCase();
|
||||
|
@ -175,7 +180,7 @@ export default {
|
|||
.then(() => {
|
||||
this.copyFn(url);
|
||||
})
|
||||
.catch(() => ({}))
|
||||
.catch(() => {})
|
||||
} else {
|
||||
// 唤起支付宝
|
||||
location.replace(url);
|
||||
|
@ -183,7 +188,7 @@ export default {
|
|||
} else if (channel === 2) { // 微信
|
||||
if (!this.isWx) { // 微信环境 默认静默授权
|
||||
if (mode === 2) { // 公众号
|
||||
const backLink = encodeURIComponent(`${location.origin}/yxh5/cmsVoucher?key=${localStorage.getItem('key')}&id=${this.$route.query.id}`);
|
||||
const backLink = encodeURIComponent(`${location.origin}/yxh5/cmsVoucher?key=${localStorage.getItem('key')}&id=${this.goodId}`);
|
||||
const url = `${this.wxAuthUrl}?jump=${backLink}`;
|
||||
showConfirmDialog({
|
||||
confirmButtonText: '复制',
|
||||
|
@ -192,7 +197,7 @@ export default {
|
|||
.then(() => {
|
||||
this.copyFn(url);
|
||||
})
|
||||
.catch(() => ({}))
|
||||
.catch(() => {})
|
||||
} else { // 小程序 + 通用领取
|
||||
// 唤起小程序 todo
|
||||
location.replace('https://www.baidu.com/')
|
||||
|
@ -213,7 +218,7 @@ export default {
|
|||
// 订单轮询
|
||||
async orderPolling() {
|
||||
const that = this;
|
||||
const params = [{ key: this.key, goods_id: Number(this.$route.query.id) }];
|
||||
const params = [{ key: this.key, goods_id: this.goodId }];
|
||||
const res = await ORDER_QUERY({ query: params });
|
||||
if (res && res.code === 200 && res.data.length) {
|
||||
if (res.data[0].status === 2) {
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<p class="line"/>
|
||||
<img class="defaultInputImg" v-if="!pageData" :src="cssData.defaultInputImg" alt="">
|
||||
<div v-if="pageData && !((pageData.degital.product_type === 2) && (pageData.degital.card_show === 2))" class="inputBox">
|
||||
<div v-if="pageData && needInput" class="inputBox">
|
||||
<van-cell-group inset>
|
||||
<van-field v-model="inputVal" label="账号" placeholder="请输入手机号" />
|
||||
<van-field
|
||||
|
@ -35,7 +35,7 @@
|
|||
:class="['detailBtn', pageData && pageData.goods.err_code && 'btnPlacingAshes']"
|
||||
:style="{ color: cssData.btnColor, backgroundColor: cssData.btnBgc }"
|
||||
>
|
||||
{{ pageData && pageData.goods.err_code ? 'code文案' : '立即兑换' }}
|
||||
{{ pageData && btnMap.get(String(pageData.goods.err_code)) ? btnMap.get(String(pageData.goods.err_code)) : '立即兑换' }}
|
||||
</div>
|
||||
<img v-if="cssData.activityDescType === 1 && cssData.bottomImg.length" class="bottomImg" :src="cssData.bottomImg[0].url" alt="">
|
||||
<img v-if="cssData.activityDescType === 2 && cssData.floatImg" @click="changePopComStatus" class="floatImg" :src="cssData.floatImg" alt="">
|
||||
|
@ -59,6 +59,7 @@
|
|||
import "./index.scss";
|
||||
import config from "./config";
|
||||
import { DETAIL_QUERY, GET_THEME, EXCHANGE, ORDER_QUERY } from "@/router/api";
|
||||
import { phoneRegex } from "@/utils";
|
||||
|
||||
export default {
|
||||
name: 'cmsDetail',
|
||||
|
@ -79,17 +80,18 @@ export default {
|
|||
loadingStatus: false, // 页面加载 loading
|
||||
overlayLoad: false, // 点击 遮罩 loading
|
||||
key: this.$route.query.key || localStorage.getItem("key"),
|
||||
// token: this.$route.query.token || localStorage.getItem("key"),
|
||||
goodId: Number(this.$route.query.id),
|
||||
pageData: null,
|
||||
cssData: {
|
||||
btnColor: 'rgb(255, 255, 255)',
|
||||
btnBgc: 'rgb(250, 205, 106)',
|
||||
activityDescType: 1, //活动说明:1 图片 2 悬浮 3 富文本
|
||||
|
||||
bottomImg: [] as Array<any>,
|
||||
floatImg: 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/acticeTextTip.png',
|
||||
floatText: '',
|
||||
|
||||
// 默认背景
|
||||
// 默认配置
|
||||
carouselImg: 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/detailtop.png',
|
||||
defaultInputImg: 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/74A757EF-F86A-4006-8259-AAE60119C9A8.png',
|
||||
},
|
||||
|
@ -101,11 +103,12 @@ export default {
|
|||
codeStatus: false,
|
||||
inputValAgain: '',
|
||||
popComStatus: false,
|
||||
testMap: new Map([ // todo 商品 code 对应 btn 文案
|
||||
btnMap: new Map([ // todo 待接口确认
|
||||
['1', '即将开始'],
|
||||
['2', '已兑换'],
|
||||
['3', '已兑完'],
|
||||
['4', '已过期'],
|
||||
['5', '领取中'],
|
||||
]),
|
||||
}
|
||||
},
|
||||
|
@ -116,6 +119,12 @@ export default {
|
|||
this.$emit('getDefault', config);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
needInput() {
|
||||
// 非(卡密-平台下发) 或 充值验证短信
|
||||
return !((this.pageData.degital.product_type === 2) && (this.pageData.degital.card_show === 2)) || (this.pageData.degital.check_sms_code === 1);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
formData: {
|
||||
handler(newVal: any) {
|
||||
|
@ -135,18 +144,15 @@ export default {
|
|||
},
|
||||
async getData() {
|
||||
this.loadingStatus = true;
|
||||
const id = this.$route.query.id;
|
||||
if (!id) return showToast('商品ID不能为空');
|
||||
const res = await DETAIL_QUERY({ key: this.key, id: id });
|
||||
if (!this.goodId) return showToast('商品ID不能为空');
|
||||
const res = await DETAIL_QUERY({ key: this.key, id: this.goodId });
|
||||
if (res && res.code === 200) {
|
||||
if (res.data) {
|
||||
this.pageData = { ...res.data };
|
||||
console.log('---接口详情数据---', this.pageData);
|
||||
const list = [res.data.degital.describe_url, res.data.degital.detail_url, res.data.degital.show_url]
|
||||
this.imgList = [ ...list.filter(Boolean) ];
|
||||
await this.getCss(res.data.goods.theme_goods_detail_id);
|
||||
if (this.pageData.goods.listStatus === 1) {
|
||||
// 存在待轮询订单
|
||||
if (this.pageData.goods.err_code === 5) { // 存在待轮询订单 todo
|
||||
this.overlayLoad = true;
|
||||
await this.orderPolling();
|
||||
}
|
||||
|
@ -160,7 +166,6 @@ export default {
|
|||
async getCss(themeId: number | string) {
|
||||
const res = await GET_THEME({ id: themeId });
|
||||
if (res && res.code === 200) {
|
||||
console.log('---详情模版数据---', JSON.parse(res.data.config));
|
||||
this.cssData = {
|
||||
...this.cssData,
|
||||
...JSON.parse(res.data.config)
|
||||
|
@ -171,11 +176,17 @@ export default {
|
|||
}
|
||||
},
|
||||
sendCode() {
|
||||
if (!this.inputVal) {
|
||||
return showToast('请输入手机号');
|
||||
} else if (!phoneRegex.test(this.inputVal)) {
|
||||
return showToast('手机号格式不正确');
|
||||
}
|
||||
// 直充发送短信接口 todo
|
||||
showToast('暂无短信接口');
|
||||
if (this.codeStatus) return;
|
||||
const self = this;
|
||||
self.codeNum = 60;
|
||||
this.codeStatus = true;
|
||||
showToast('暂无接口');
|
||||
self.codeTime = setInterval(() => {
|
||||
self.codeNum--;
|
||||
if (self.codeNum < 0) {
|
||||
|
@ -186,16 +197,19 @@ export default {
|
|||
}, 1000)
|
||||
},
|
||||
async receive() {
|
||||
if (this.pageData.goods.err_code && this.pageData.goods.reson) {
|
||||
return showToast(this.pageData.goods.reson);
|
||||
if (this.pageData.goods.err_code) {
|
||||
return showToast(this.pageData.goods.reson || '商品异常');
|
||||
}
|
||||
let account = 'account';
|
||||
// 非卡密-平台下发 + 验证短信
|
||||
if (!((this.pageData.degital.product_type === 2) && (this.pageData.degital.card_show === 2)) || (this.pageData.degital.check_sms_code === 1)) {
|
||||
let account = '';
|
||||
// 非(卡密-平台下发) 或 充值验证短信
|
||||
if (this.needInput) {
|
||||
if (!this.inputVal) {
|
||||
return showToast('请输入账号');
|
||||
} else {
|
||||
if (this.pageData.degital.check_sms_code === 1) {
|
||||
if (!phoneRegex.test(this.inputVal)) {
|
||||
return showToast('手机号格式不正确');
|
||||
}
|
||||
if (!this.inputSms) {
|
||||
return showToast('请输入验证码');
|
||||
}
|
||||
|
@ -212,9 +226,9 @@ export default {
|
|||
this.overlayLoad = true;
|
||||
const res = await EXCHANGE({
|
||||
key: this.key,
|
||||
id: [Number(this.$route.query.id)],
|
||||
account: account,
|
||||
name: 'name',
|
||||
id: [this.goodId],
|
||||
account: account || '默认',
|
||||
name: '默认',
|
||||
});
|
||||
if (res && res.code === 200 && res.data) {
|
||||
if (res.data[0].code === 200) {
|
||||
|
@ -229,7 +243,7 @@ export default {
|
|||
},
|
||||
async orderPolling () {
|
||||
const that = this;
|
||||
const params = [{ key: this.key, goods_id: Number(this.$route.query.id) }];
|
||||
const params = [{ key: this.key, goods_id: this.goodId }];
|
||||
const res = await ORDER_QUERY({ query: params });
|
||||
if (res && res.code === 200 && res.data.length) {
|
||||
if (res.data[0].status === 2) {
|
||||
|
|
|
@ -117,13 +117,14 @@ export default {
|
|||
floatImg: 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/acticeTextTip.png',
|
||||
floatText: '',
|
||||
|
||||
// 默认配置
|
||||
carouselImg: 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/swiper.png',
|
||||
defaultList: [1, 2, 3, 4, 5],
|
||||
defaultListImg: 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/uploads/2024-08-20/A89BB503-00DC-456e-B757-CA04ADFA9C06.png',
|
||||
defaultMatrix: [1, 2, 3, 4, 5, 6],
|
||||
defaultMatrixImg: 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/uploads/2024-08-20/0338CC5C-D9FD-4f9d-B65C-DCAB50F2FAA7.png',
|
||||
},
|
||||
iconMap: new Map([ // todo 商品 code 对应 icon 角标
|
||||
iconMap: new Map([ // todo 待接口确认
|
||||
['1', 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/jijiangkaishi.png'], // 即将开始
|
||||
['2', 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/yiduihuan.png'], // 已兑换
|
||||
['3', 'https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/yiduiwan.png'], // 已兑完
|
||||
|
@ -136,7 +137,7 @@ export default {
|
|||
if (this.$props.comType === 1) {
|
||||
const openid = this.$route.query.openid;
|
||||
if (openid) {
|
||||
localStorage.setItem('openid', openid);
|
||||
localStorage.setItem('openid', openid || '');
|
||||
}
|
||||
this.getData()
|
||||
} else {
|
||||
|
@ -169,8 +170,8 @@ export default {
|
|||
const changeData = this.changeData(res.data);
|
||||
const errCode = changeData[0].goods.err_code;
|
||||
const reson = changeData[0].goods.reson;
|
||||
if (this.startsWith(String(errCode), ['10', '11']) && reson) { // 10XXX key码提示 11XXX 活动提示 12XXX 商品提示
|
||||
return showToast(reson);
|
||||
if (this.startsWith(String(errCode), ['10', '11'])) { // 10XXX key码提示 11XXX 活动提示 12XXX 商品提示
|
||||
return showToast(reson || '活动异常');
|
||||
}
|
||||
// 判断是否直接跳转详情
|
||||
if (changeData.length === 1) {
|
||||
|
@ -179,15 +180,13 @@ export default {
|
|||
sessionStorage.removeItem('jumpPath')
|
||||
this.$router.push(this.jumpPath);
|
||||
} else {
|
||||
this.pageData = [ ...changeData, ...changeData ]; // 处理轮播样式
|
||||
this.initialSlide = changeData.length;
|
||||
await this.getCss(res.data[0].theme_list_id);
|
||||
await this.getCss(res.data[0].theme_list_id, changeData);
|
||||
}
|
||||
} else {
|
||||
showToast('商品数据为空');
|
||||
}
|
||||
} else {
|
||||
showToast(res?.message || '接口请求失败');
|
||||
showToast(res?.message || '请求失败');
|
||||
}
|
||||
},
|
||||
changeData(data: Array<any>) {
|
||||
|
@ -214,16 +213,18 @@ export default {
|
|||
const regex = new RegExp('^(' + prefixes.join('|') + ')');
|
||||
return regex.test(str);
|
||||
},
|
||||
async getCss(id: number | string) {
|
||||
async getCss(id: number | string, changeData: Array<any>) {
|
||||
const res = await GET_THEME({ id: id });
|
||||
if (res && res.code === 200) {
|
||||
this.cssData = {
|
||||
...this.cssData,
|
||||
...JSON.parse(res.data.config)
|
||||
};
|
||||
this.pageData = this.cssData.contentType === 1 ? [ ...changeData, ...changeData ] : [ ...changeData ]; // 处理轮播样式
|
||||
this.initialSlide = changeData.length;
|
||||
this.loadingStatus = false;
|
||||
} else {
|
||||
showToast(res?.message || '接口请求失败');
|
||||
showToast(res?.message || '请求失败');
|
||||
}
|
||||
},
|
||||
onSlideChange(swiper: any) {
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
#reduce {
|
||||
// height: 6rem !important;
|
||||
background: #f4f6f9;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
|
@ -112,12 +111,20 @@
|
|||
color: #cc9590;
|
||||
}
|
||||
|
||||
.inputBoxZFB,.inputBoxYSF {
|
||||
padding: 40px;
|
||||
.form {
|
||||
padding: 20px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.f-input {
|
||||
width: 100%;
|
||||
}
|
||||
.f-note {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#reduce .receiveBtn {
|
||||
|
|
|
@ -1,63 +1,9 @@
|
|||
<template>
|
||||
<van-loading v-if="loadingStatus" class="pageNoneLoading_Vant" size="24px" color="#0094ff" vertical>加载中...</van-loading>
|
||||
<div v-else id="reduce" :style="{ paddingTop: '21px' }">
|
||||
<!-- 弹出框 -->
|
||||
<div class="mask" v-if="maskshow"></div>
|
||||
<!-- 单条弹出框 -->
|
||||
<!-- <div class="prompt" :class="promtshow ? 'proactive' : ''">
|
||||
{{ promttip }}
|
||||
</div> -->
|
||||
<!-- 弹出提示 -->
|
||||
<!-- <div
|
||||
class="popboxshow"
|
||||
v-if="popboxshow"
|
||||
:class="popboxshow ? 'active' : ''"
|
||||
>
|
||||
<div class="tip">
|
||||
<p>{{ tiptext }}</p>
|
||||
<span @click="knowFn">知道了</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 复制提示 -->
|
||||
<!-- <div class="popboxshow" v-if="copyshow" :class="copyshow ? 'active' : ''">
|
||||
<div class="tip">
|
||||
<p>请点击下方[复制]按钮,复制链接到浏览器打开!</p>
|
||||
<span @click="copyFn">复制</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="countdown" v-if="outTime.length > 0">
|
||||
<span>链接有效期:</span>
|
||||
<p>{{ outTime[0] }}</p>
|
||||
时
|
||||
<p>{{ outTime[1] }}</p>
|
||||
分
|
||||
<p>{{ outTime[2] }}</p>
|
||||
秒
|
||||
</div> -->
|
||||
|
||||
<!-- <div
|
||||
class="mask"
|
||||
v-if="loading"
|
||||
ref="load"
|
||||
@touchmove.prevent
|
||||
@mousewheel.prevent
|
||||
>
|
||||
<preload-component />
|
||||
</div> -->
|
||||
|
||||
<div class="couponShow">
|
||||
<!-- <span>
|
||||
<img
|
||||
@click="backgoodsFn"
|
||||
v-if="backAble"
|
||||
class="backIcon"
|
||||
src="https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/MarketingSystem/image/front/backprepageBtn.png"
|
||||
alt=""
|
||||
/>
|
||||
</span> -->
|
||||
<div class="coupon-left">
|
||||
<p class="coupon_money" :style="{ fontSize: fonts() }">
|
||||
<p class="coupon_money">
|
||||
<span>¥</span>{{ parseFloat(info.amount || 1) }}
|
||||
</p>
|
||||
<p class="full_money">
|
||||
|
@ -80,7 +26,7 @@
|
|||
<p class="validity" v-if="info.time_limit.receive_type">
|
||||
领取后{{
|
||||
info.time_limit.receive_type == 0 ? "立即" : "次日凌晨"
|
||||
}}生效,有效期 {{ info.time_limit.receive_day }}天
|
||||
}}生效,有效期 {{ info.time_limit.receive_day || '' }}天
|
||||
</p>
|
||||
<p class="validity" v-if="info.time_limit.start_time">
|
||||
可用时间:{{ info.time_limit.start_time }}-{{
|
||||
|
@ -89,27 +35,12 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付宝-账号领取 -->
|
||||
<div v-if="(info.channel === 1) && (info.receive_mode === 2)" class="inputBoxZFB">
|
||||
<p class="inputTitle">支付宝账号</p>
|
||||
<div v-if="needInput" class="form">
|
||||
<van-cell-group inset>
|
||||
<van-field v-model="inputVal" label="账号" placeholder="请输入支付宝账号" />
|
||||
<van-field v-model="inputValAgain" label="再次输入" placeholder="请再次输入" />
|
||||
<van-field class="f-input" v-model="inputVal" label="账号" :placeholder="`请输入${getInputText}账号`" />
|
||||
<van-field class="f-input" v-model="inputValAgain" label="再次输入" placeholder="请再次输入" />
|
||||
</van-cell-group>
|
||||
<p class="inputTip">
|
||||
您可在支付宝的个人信息中查看【支付宝账号】
|
||||
</p>
|
||||
</div>
|
||||
<!-- 云闪付 -->
|
||||
<div v-if="info.channel === 3" class="inputBoxYSF">
|
||||
<p class="inputTitle">云闪付账号</p>
|
||||
<van-cell-group inset>
|
||||
<van-field v-model="inputVal" label="账号" placeholder="请输入手机号" />
|
||||
<van-field v-model="inputValAgain" label="再次输入" placeholder="请再次输入" />
|
||||
</van-cell-group>
|
||||
<p class="inputTip">
|
||||
温馨提示:单笔交易大于{{ '0' }}元可立减{{ '0' }}元
|
||||
</p>
|
||||
<p class="f-note">您可在{{ getInputText }}的个人信息中查看【{{ getInputText }}账号】</p>
|
||||
</div>
|
||||
<div
|
||||
class="receiveBtn"
|
||||
|
@ -117,63 +48,12 @@
|
|||
:class="goods.err_code != 0 ? 'readOnly' : ''"
|
||||
>
|
||||
立即领取
|
||||
<!-- {{
|
||||
goodInfo.available == 9
|
||||
? buttonTextFun(goodInfo.type, "received")
|
||||
: buttonTextFun(goodInfo.type, "receive")
|
||||
}} -->
|
||||
</div>
|
||||
<div class="coupon_explain">
|
||||
<h1>- 兑换说明 -</h1>
|
||||
<!-- <div class="content">
|
||||
<h3
|
||||
v-if="
|
||||
receive_time.use_time.type == 'week' ||
|
||||
receive_time.use_time.type == 'irregular'
|
||||
"
|
||||
>
|
||||
可用时间
|
||||
</h3>
|
||||
<ul v-if="receive_time.use_time.type == 'week'" class="weekTime">
|
||||
<li v-for="(item, index) in receive_time.use_time.week" :key="index">
|
||||
<p>{{ item }}</p>
|
||||
<div>
|
||||
<p
|
||||
v-for="(item2, index2) in receive_time.use_time.time"
|
||||
:key="index2"
|
||||
>
|
||||
{{ item2[0] }}~{{ item2[1] }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="receive_time.use_time.type == 'irregular'">
|
||||
<li v-for="(item, index) in receive_time.use_time.day" :key="index">
|
||||
<p>{{ item[0] }}至{{ item[1] }}</p>
|
||||
<div>
|
||||
<p
|
||||
v-for="(item2, index2) in receive_time.use_time.time"
|
||||
:key="index2"
|
||||
>
|
||||
{{ item2[0] }}~{{ item2[1] }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<div class="content">
|
||||
<h3>使用须知</h3>
|
||||
<p v-html="info.notice" v-if="info.notice"></p>
|
||||
<p v-else>
|
||||
1、在{{
|
||||
info.channel == 1 ? "支付宝H5" : "微信APP内打开链接"
|
||||
}},点击【一键领取】完成领取{{
|
||||
info.channel == 1 ? "支付宝" : "微信"
|
||||
}}立减金<br />
|
||||
2、{{
|
||||
info.channel == 1 ? "支付宝" : "微信"
|
||||
}}立减金一旦领取不可撤销、不可转让。注意不要将兑换券泄露给他人
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>使用规则</h3>
|
||||
|
@ -192,8 +72,6 @@
|
|||
import "./index.scss";
|
||||
import { DETAIL_QUERY, EXCHANGE, ORDER_QUERY } from "@/router/api";
|
||||
|
||||
let goodsDetail = 0,
|
||||
goodsCount = 0;
|
||||
export default {
|
||||
name: "cmsVoucher",
|
||||
props: {},
|
||||
|
@ -203,7 +81,7 @@ export default {
|
|||
overlayLoad: false, // 点击 遮罩 loading
|
||||
|
||||
isWx: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1,
|
||||
wxAuthUrl: 'https://openapi.1688sup.com/wechat/oauth',
|
||||
wxAuthUrl: 'https://utils.85938.cn/utils/v1/wechat/oauth/bale',
|
||||
zfbAuthUrl: 'https://openapi.1688sup.com/alipay/oauth',
|
||||
|
||||
key: this.$route.query.key || localStorage.getItem("key"),
|
||||
|
@ -212,22 +90,31 @@ export default {
|
|||
alipayuserid: this.$route.query.alipayuserid || localStorage.getItem("alipayuserid"), // 支付宝授权id
|
||||
|
||||
goods: {}, // 商品基本信息
|
||||
info: {}, // 立减金信息
|
||||
inputVal: '',
|
||||
inputValAgain: '',
|
||||
|
||||
info: { // 商品立减金信息
|
||||
amount: 1, // 金额
|
||||
full_amount: 1.01, // 满减金额
|
||||
send_num: 1, // 多少张立减金
|
||||
card_type: ["1"], // 卡种类型
|
||||
// 领取时间
|
||||
time_limit: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
computed: {
|
||||
needInput() {
|
||||
if ((this.info.channel === 1) && (this.info.receive_mode === 2)) { // 支付宝-账号领取
|
||||
return true;
|
||||
} else if (this.info.channel === 3) { // 云闪付
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getInputText() {
|
||||
if (this.info.channel === 1) { // 支付宝-账号领取
|
||||
return '支付宝';
|
||||
} else { // 云闪付
|
||||
return '云闪付';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loadingStatus = true;
|
||||
|
@ -237,8 +124,11 @@ export default {
|
|||
if (code === 200) {
|
||||
Object.assign(this.goods, data.goods);
|
||||
Object.assign(this.info, data.info, {
|
||||
card_type: data.info.card_type ? JSON.parse(data.info.card_type) : ['1'],
|
||||
time_limit: data.info.time_limit ? JSON.parse(data.info.time_limit) : {},
|
||||
card_type: data.info.card_type ? JSON.parse(data.info.card_type) : ["1"],
|
||||
// 处理立减金信息 todo
|
||||
channel: 3,
|
||||
receive_mode: 2,
|
||||
});
|
||||
} else {
|
||||
showToast(message || '请求失败');
|
||||
|
@ -363,63 +253,8 @@ export default {
|
|||
showToast(res?.message || '轮询失败');
|
||||
}
|
||||
},
|
||||
|
||||
cardType(val: any[]) {
|
||||
return val
|
||||
.map((item) => {
|
||||
return item == 1 ? "借记卡" : "信用卡" + " ";
|
||||
})
|
||||
.join(" ");
|
||||
},
|
||||
globalFormatStatus(type: any) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return "立即兑换";
|
||||
case 9:
|
||||
return "已兑换";
|
||||
default:
|
||||
return "立即兑换";
|
||||
}
|
||||
},
|
||||
/* 公众号领取 */
|
||||
publicCollection(order_number: any) {
|
||||
let params = {
|
||||
order_number,
|
||||
channel: 2,
|
||||
channel_user_id: this.openId,
|
||||
is_webview: 1,
|
||||
};
|
||||
},
|
||||
//错误弹出框关闭
|
||||
knowFn() {
|
||||
this.popboxshow = false;
|
||||
this.maskshow = false;
|
||||
},
|
||||
//错误弹出框
|
||||
openErrorDialog(tip: string) {
|
||||
this.maskshow = true;
|
||||
this.tiptext = tip;
|
||||
this.popboxshow = true;
|
||||
},
|
||||
// 单条弹框
|
||||
openDialog(tip: string) {
|
||||
this.promtshow = true;
|
||||
this.promttip = tip;
|
||||
setTimeout(() => {
|
||||
this.promtshow = false;
|
||||
this.promttip = "";
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
/* 动态font */
|
||||
fonts() {
|
||||
const defaultCss = "32px";
|
||||
const count = String(parseFloat(this.info.amount || 1)).length + 1;
|
||||
if (count > 4) {
|
||||
return 32 - (count - 3) * 2.2 + "px";
|
||||
} else {
|
||||
return defaultCss;
|
||||
}
|
||||
return val.map((item) => { return item == 1 ? '借记卡' : '信用卡' + ' '; }).join(' ');
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue