C端商品根据状态展示样式交互处理

This commit is contained in:
Apple 2022-06-16 18:07:46 +08:00
parent 7e563a4c52
commit 92d10176f4
2 changed files with 25 additions and 27 deletions

View File

@ -11,8 +11,8 @@
</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">
<link rel="stylesheet" href="http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage1_3_0.css?v=1">
<script src="http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_3_0.js?v=1"></script>
<link rel="stylesheet" href="http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage1_3_0.css?v=12">
<script src="http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_3_0.js?v=1234"></script>
<style>
* {
margin: 0 auto;
@ -33,7 +33,7 @@
<body>
<div id="exchangePage">
<div v-if="!suspension" :class="[goodsDetail.available!=1?'readOnly':'']">
<div v-if="!suspension">
<div class="about-good">
<span>
<img @click="backgoodsFn" v-if="backAble"
@ -52,15 +52,17 @@
<div class="ipt-acc" style="position: relative;z-index: 999;">
<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"
<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"
<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" v-show="describe.type||detailUrl">
@ -77,7 +79,7 @@
{{this.promttip}}
</div>
<!-- 弹出框 -->
<div class="mask" v-if="maskshow||bindClick" @click="openErrTip">
<div class="mask" v-if="maskshow">
</div>
<!-- 悬浮提示 -->
<div v-if="suspension" class="suspensionDom">
@ -176,12 +178,11 @@
})
},
methods: {
openErrTip(){
/*点击遮罩,若该商品无法兑换,显示错误提示*/
if(goodsDetail.available!=1){
this.openErrorDialog(product_status(goodsDetail.available,goodsDetail));
this.bindClick=true;
}
openErrorDialog(tip) {
this.maskshow = true;
this.popboxtype = '提示';
this.tiptext = tip;
this.popboxshow = true;
},
backgoodsFn() {
if (goodsCount > 1) {
@ -212,6 +213,11 @@
},
//兑换商品
exchangeGoodsFn() {
console.log(217,this.goodsDetail);
if(this.goodsDetail.available!=1){
this.openErrorDialog(product_status(this.goodsDetail.available,this.goodsDetail));
return
}
if (!this.account) {
this.openDialog('请输入兑换账号!');
return false;
@ -292,9 +298,7 @@
this.popboxshow = true;
this.successTip = '兑换成功请直接登录app使用';
} else {
this.popboxtype = '提示';
this.popboxshow = true;
this.tiptext = res.message;
this.openErrorDialog(res.message);
if (res.code == -1) {
if (goodsCount > 1) {
setTimeout(() => {

View File

@ -35,7 +35,7 @@
<body>
<div id="reduce">
<!-- 弹出框 -->
<div class="mask" v-if="maskshow||bindClick" @click="openErrTip"></div>
<div class="mask" v-if="maskshow"></div>
<!-- 单条弹出框 -->
<div class="prompt" :class="promtshow?'proactive':''">
{{this.promttip}}
@ -47,7 +47,6 @@
<span @click="knowFn">知道了</span>
</div>
</div>
<div :class="[goodInfo.available!=1?'readOnly':'']">
<div class="couponShow">
<span>
<img @click="backgoodsFn" v-if="backAble" class="backIcon"
@ -76,7 +75,7 @@
</p>
</div>
</div>
<div class="receiveBtn" @click="receiveFn">立即领取</div>
<div class="receiveBtn" @click="receiveFn" :class="goodInfo.available!=1?'readOnly':''">立即领取</div>
<div class="coupon_explain">
<h1>- {{reduceInfo.batch_goods_name}}兑换说明 -</h1>
<div class="content">
@ -92,7 +91,6 @@
</div>
</div>
</div>
</div>
</body>
<script>
let goodsDetail=null,goodsCount=null;
@ -148,13 +146,6 @@
},
},
methods: {
openErrTip(){
/*点击遮罩,若该商品无法兑换,显示错误提示*/
if(goodsDetail.available!=1){
this.openErrorDialog(product_status(goodsDetail.available,goodsDetail));
this.bindClick=true;
}
},
backgoodsFn() {
if (goodsCount > 1) {
window.location.replace('./homepage.html');
@ -164,6 +155,10 @@
},
receiveFn() {
let self = this;
if(self.goodInfo.available!=1){
self.openErrorDialog(product_status(self.goodInfo.available,self.goodInfo));
return
}
let data = {
key: sessionStorage.getItem("key"),
goods_id: this.goodInfo.entity.goods_id,
@ -200,7 +195,6 @@
} else {
self.openErrorDialog(res.message);
// window.location.replace("./index.html");
}
}
}