mobileclient/coupon/details.html

485 lines
22 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
<title>详情</title>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
</script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/js/swiper.min.js"></script>
<link href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/css/swiper.min.css" rel="stylesheet">
2022-10-12 14:08:25 +08:00
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/details.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/payPop.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/payPop.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/modelPop.js"></script>
</head>
<body>
<div id="exchangePage">
<!-- 时提框 -->
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText" :bottom_text="bottomText"
@backFunction="backFunctionPop"></model-pop>
<div v-if="!suspension" class="content">
<!-- 返回模块-->
<img @click="backHandler" class="back" v-if="backAble"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<!-- 优惠券权益商品 -->
<div v-if="goodsDetail.type===1">
<div class="about-good">
<img :src="goodsShow[0]" alt="" v-if="goodsShow.length<=1">
<div class="swiper-container" v-else>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,i) in goodsShow" :key="i">
<img :src="item" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="ipt-acc" style="position: relative;z-index: 999;" @click="bindAvailable">
<div class="title">
<p>
<span class="sign"></span>{{goodsDetail.origin_price}}
</p>
<p class="text">{{goodInfo.product_name}}</p>
</div>
<p v-if="acctype=='tel'"><span>账号:</span><input :type="acctype"
onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen"
v-model="account" :placeholder="placeholder" @focus="(e)=>focusFn(e)"></p>
<p v-if="acctype=='tel'"><span>再次输入:</span> <input :type="acctype"
onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen"
v-model="reAccount" placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
<p v-if="acctype!='tel'"><span>账号:</span> <input :type="acctype" :maxlength="maxlen"
v-model="account" :disabled="goodsDetail.available!=1" :placeholder="placeholder"
@focus="(e)=>focusFn(e)"></p>
<p v-if="acctype!='tel'"><span>再次输入:</span><input :type="acctype" :maxlength="maxlen"
v-model="reAccount" :disabled="goodsDetail.available!=1" placeholder="请再次输入"
@focus="(e)=>focusFn(e)"></p>
</div>
<div class="bottom" id="bottom" :style="{borderWidth:(describe.type||detailUrl)?'0.05rem':'0'}"
v-show="describe.type||detailUrl">
<img :src="detailUrl" v-show="detailUrl">
<img :src="describe.bg_image" v-show="describe.type==1&&describe.bg_image">
<div v-html="describe.content" class="goodsTip" v-show="describe.type==3&&describe.content"></div>
</div>
</div>
<!-- 优惠券立减金 -->
<div class="reduce" v-if="goodsDetail.type===2">
<div class="couponShow">
<div class="coupon-left">
<p class="coupon_money">
<span></span>{{goodInfo.reduce_amount}}
</p>
<p class="full_money">满{{goodInfo.denomination}}可用</p>
</div>
<div class="coupon-right">
<p class="title">{{goodInfo.batch_goods_name}}</p>
<p style="font-size: 0.11rem">
{{goodInfo.card_type|cardType}}可用
</p>
<p class="validity">
有效期:{{receive_time.effect_time.start_time}}至{{receive_time.effect_time.end_time}}
</p>
<p class="validity" v-if="receive_time.use_time.type=='received'">
领取后{{receive_time.use_time.effect_date_type==0?'立即':'次日凌晨'}}生效,有效期
{{receive_time.use_time.effect_day}}天
</p>
<p class="validity" v-if="receive_time.use_time.type=='fiexd'">
可用时间:{{receive_time.use_time.fiexd_time.start_time}}-{{receive_time.use_time.fiexd_time.end_time}}
</p>
</div>
</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>
1、在{{goodInfo.channel==1?'支付宝H5':'微信APP内打开链接'}},点击【一键领取】完成领取{{goodInfo.channel==1?'支付宝':'微信'}}立减金<br />
2、{{goodInfo.channel==1?'支付宝':'微信'}}立减金一旦领取不可撤销、不可转让。注意不要将兑换券泄露给他人
</p>
</div>
<div class="content">
<h3>使用规则</h3>
<p v-html="goodInfo.instruction"></p>
</div>
</div>
</div>
<!-- 支付模块-->
<div class="exchange-btn-fr">
<div class="pay_left">
<div class="order" v-if="!backAble">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/toOrder.png" alt=""
@click="toOrder">
<p>订单</p>
</div>
<div class="title">
<p>
<span class="sign"></span>{{goodsDetail.coupon_price}}
</p>
<p class="text" v-if="goodsDetail.origin_price-goodsDetail.coupon_price!==0">共省&nbsp;¥
{{(goodsDetail.origin_price-goodsDetail.coupon_price).toFixed(2)}}</p>
</div>
</div>
<button class="exchange-btn" v-if="goodsDetail.type===1"
:style="{'background': exchangeOpen?bgcolor:'#D7D7D7','color':exchangeOpen?ftColor:'#333'}"
@click="exchangeGoodsFn">立即支付</button>
<button class="exchange-btn" v-else :style="{'background': bgcolor,'color':ftColor}"
@click="exchangeGoodsFn">立即支付</button>
</div>
</div>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
</div>
<!-- 悬浮提示 -->
<div v-if="suspension" class="suspensionDom">
<img @click="suspension = false"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<h4>活动规则</h4>
<div v-html="describe.content">
</div>
</div>
<img class="susTip" @click="suspension = true"
v-if="describe.type==='2'&&describe.content&&!suspension&&goodsDetail.type===1"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png" alt="">
<!-- 弹出框 -->
<!-- 支付弹窗 -->
<pay-pop :show.sync="show" :active="payType" @payFunction="payFunction" :money="goodsDetail.coupon_price" />
</div>
</body>
<script>
let goodsCount = null, goodsDetail = null;
new Vue({
el: '#exchangePage',
data () {
return {
account: '',
reAccount: '',
maxlen: 11,
acctype: 'tel',
promttip: '',
promtshow: false,
productType: 0,
placeholder: '',
exchangeOpen: false,
suspension: false,
describe: {},
detailUrl: '',
goodInfo: '',
bgcolor: '',
ftColor: '',
goodsDetail: {},//商品详情
backAble: true,
goodsShow: [
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220120/9bedd7af6a8a570be8f2858564f9ec6d.png'
],
show: false, /* 控制支付弹窗 */
payType: 2, /* 支付方式 */
/* 提示框状态 */
popShow: false,
popTitle: '',
popText: '',
popStatus: 1, /*1 成功 2提示 3失败 */
bottomText: '', /* 复制按钮 */
href: '',/* 支付地址 */
receive_time: {}
}
},
filters: {
cardType (val) {
return val.map((item) => {
return item == 1 ? "借记卡" : "信用卡" + " ";
}).join(" ");
},
},
watch: {
account (va) {
va && this.watchAccount()
},
reAccount (va) {
va && this.watchAccount()
},
productType: {
immediate: true,
handler (newVal) {
this.maxlen = 50;
this.acctype = "text";
const placeholderArray = [
"请输入昵称", "请输入手机号", "请输入邮箱", "请输入手机号或邮箱", "请输入QQ号",
"请输入手机号或QQ号", "请输入邮箱或QQ号", "请输入手机号/邮箱/QQ号", "请输入微信号",
"请输入手机号或微信", "请输入邮箱或微信号", "请输入手机号/邮箱/微信号", "请输入QQ号或微信号",
"请输入手机号/QQ号/微信号", "请输入邮箱/QQ号/微信号", "请输入手机号/邮箱/QQ号/微信号"
]
this.placeholder = placeholderArray[newVal]
if ([1, 4, 5].includes(newVal)) this.acctype = "tel"
if ([8, 9, 12, 13].includes(newVal)) this.maxlen = 20
if (newVal === 4) this.maxlen = 10
if (newVal === 5) this.maxlen = 11
}
}
},
components: {
modelPop,
payPop
},
created () {
document.title = localStorage.getItem('title');
let detailsConfig = JSON.parse(localStorage.getItem('product_detail'));
goodsCount = localStorage.getItem('goodsCount');
this.backAble = goodsCount > 1;//多个商品才有返回
this.bgcolor = detailsConfig.button_color;
this.ftColor = detailsConfig.font_color;
this.describe = detailsConfig.describe;
goodsDetail = JSON.parse(localStorage.getItem('goodsInfo'));//商品详情
this.goodsDetail = goodsDetail;//商品详情
let goodsInform = goodsDetail.entity; //商品信息
this.goodInfo = goodsInform;
let goods_desc = goodsInform.describe_url;
this.goodsShow = goods_desc && goods_desc.length > 0 ? goods_desc : [goodsDetail.show_url];
this.detailUrl = goodsInform.detail_url ? goodsInform.detail_url : '';
this.productType = goodsDetail.entity.account_type;
this.receive_time = goodsDetail.entity.time_limit;
this.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {
loop: true, // 循环模式选项
autoplay: 3000, //可选选项,自动滑动
pagination: '.swiper-pagination',
})
})
},
methods: {
bindAvailable () {
if (goodsDetail.available != 1) {
this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
return
}
},
/* 跳转订单 */
toOrder () {
window.location.replace('./myOrder.html');
},
openErrorDialog (tip, bottomText) {
this.popTitle = '温馨提示'
this.popText = tip
this.popStatus = 2
this.popShow = true
this.bottomText = bottomText
},
backHandler () {
if (goodsCount > 1) {
window.location.replace('./couponCollection.html');
} else {
history.go(-2);
}
},
// 单条弹框
openDialog (tip) {
this.promtshow = true;
this.promttip = tip
setTimeout(() => {
this.promtshow = false;
this.promttip = '';
}, 3000)
},
/* 弹窗回调 */
backFunctionPop (type) {
if (this.bottomText === '点击复制' && type) {
var aux = document.createElement("input");
aux.setAttribute("value", this.href);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.openDialog('复制成功')
}
},
//兑换商品
exchangeGoodsFn () {
if (this.goodsDetail.type === 1) { /* 兑换码 */
if (goodsDetail.available != 1) {
this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
return
}
if (!this.account) {
this.openDialog('请输入兑换账号!');
return false;
} else {
let nameReg = /\w{4}/.test(this.account);
let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.account);
let qqReg = /^[1-9][0-9]{4,9}$/.test(this.account);
let emailsReg = /^[A-Za-z0-9\u4e00-\u9fa5\.]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.account);
let weiXinReg = /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/.test(this.account);
let regFlag = true;
const array = [nameReg, phoneReg, emailsReg, phoneReg || emailsReg, qqReg,
phoneReg || qqReg, emailsReg || qqReg, phoneReg || emailsReg || qqReg, weiXinReg,
phoneReg || weiXinReg, emailsReg || weiXinReg, phoneReg || emailsReg || weiXinReg,
qqReg || weiXinReg, phoneReg || qqReg || weiXinReg, emailsReg || qqReg || weiXinReg,
phoneReg || emailsReg || qqReg || weiXinReg]
regFlag = array[this.productType]
if (!regFlag) {
this.openDialog("充值账号格式不正确!");
return false;
}
}
if (this.reAccount == "") {
this.openDialog("请再次输入账号!");
return false;
}
if (this.account != this.reAccount) {
this.reAccount == ""
this.openDialog("两次输入的账号必须一致!");
return false;
}
}
this.show = true
},
focusFn (a) {
let ele = document.querySelector('.ipt-acc');
setTimeout(function () {
ele.scrollIntoView(false);
document.body.scrollTop = ele.scrollHeight;
document.documentElement.scrollTop = ele.scrollHeight;
}, 400);
},
/* 去支付 */
async payFunction ({ payType, isSupport }) {
this.payType = payType
this.show = false
let orderInfo = await this.createdOrder(payType);
this.createdPay(orderInfo.order_number);
},
//创建优惠券订单
createdOrder (payType) {
let self = this;
let data = {
"token": localStorage.getItem('token'),
"key": localStorage.getItem('key'),
"code_batch_id": this.goodsDetail.code_batch_id,
"goods_id": this.goodInfo.goods_id,
"account": this.account,
"pay_type": payType == 2 ? 1 : 5
}
return new Promise((resolve, reject) => {
req.axiosPost('/key/createCouponOrder', data).then(res => {
if (res.code == 200) {
resolve(res.data);
} else {
this.openErrorDialog(res.message);
if (res.code == -1) {
if (goodsCount > 1) {
setTimeout(() => {
window.location.replace('./couponCollection.html');
}, 3000);
} else {
/*跳转起始页面*/
let entryLink = localStorage.getItem('entryLink');
setTimeout(() => {
window.location.replace(entryLink);
}, 3000);
}
}
}
}).catch(err => {
});
});
},
//优惠券订单支付
createdPay (orderNumber) {
req.axiosGet('/key/coupon/createPay/' + orderNumber).then(res => {
if (res.code == 200) {
this.payWayRun(res.data);
} else {
this.openErrorDialog(res.message);
}
}).catch(err => { });
},
//根据环境去执行
payWayRun (result) {
console.log(391, this.payType);
if (this.payType == 1) {// 1微信支付 2 支付宝支付
if (isWx()) {
} else {
}
}
if (this.payType == 2) {// 1微信支付 2 支付宝支付
if (isWx()) {
this.openErrorDialog(`请在其他浏览器打开链接`, '点击复制')
this.href = result;
} else {
window.location.href = result;
}
}
},
/* 监听账号 */
watchAccount () {
if (this.account === this.reAccount) {
this.exchangeOpen = true;
} else {
this.exchangeOpen = false;
}
}
},
})
</script>
</html>