💪 optimize: 优化代码并解决bug
This commit is contained in:
wangsongsole
parent
2a0d1283bb
commit
bc00a73766
|
|
@ -70,11 +70,9 @@
|
|||
</div>
|
||||
<div class="imgbox">
|
||||
<!-- type :1 兑换码 2:立减金,channel:1支付宝，2微信 -->
|
||||
<img class="le-img" :src="distinguishLogo(item)"
|
||||
:class="(item.available===1||(item.type===3&&item.available===8))?'':'changegray'"></img>
|
||||
<img class="le-img" :src="distinguishLogo(item)" :class="statusFun(item)?'':'changegray'"></img>
|
||||
</div>
|
||||
<div class="item-name"
|
||||
:class="(item.available===1||(item.type===3&&item.available===8))?'':'changegray'">
|
||||
<div class="item-name" :class="statusFun(item)?'':'changegray'">
|
||||
{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -101,9 +99,8 @@
|
|||
<ul class="listcommity" v-if="goodsNum">
|
||||
<li v-for="(item,i) in swiperDataList" :key="i" @click="exchangeBtn(item)">
|
||||
<div>
|
||||
<img :src="distinguishLogo(item)" alt=""
|
||||
:class="(item.available===1||(item.type===3&&item.available===8))?'':'changegray'">
|
||||
<font :class="(item.available===1||(item.type===3&&item.available===8))?'':'changegray'">
|
||||
<img :src="distinguishLogo(item)" alt="" :class="statusFun(item)?'':'changegray'">
|
||||
<font :class="statusFun(item)?'':'changegray'">
|
||||
{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}</font>
|
||||
</div>
|
||||
<span class="goodsStatus">
|
||||
|
|
@ -132,8 +129,8 @@
|
|||
</div>
|
||||
|
||||
<ul class="listcommity" v-if="goodsNum">
|
||||
<li :class="(item.available===1||(item.type===3&&item.available===8))?'':'changegray'"
|
||||
v-for="(item,i) in swiperDataList" :key="i" @click="exchangeBtn(item)">
|
||||
<li :class="statusFun(item)?'':'changegray'" v-for="(item,i) in swiperDataList" :key="i"
|
||||
@click="exchangeBtn(item)">
|
||||
<div>
|
||||
<span class="goodsIcon">
|
||||
<img v-if="[4,9].includes(item.available)"
|
||||
|
|
@ -508,6 +505,21 @@
|
|||
}
|
||||
},
|
||||
|
||||
/* 区分状态 */
|
||||
statusFun (item) {
|
||||
if (item.available === 1) {
|
||||
return true;
|
||||
} else if (item.available === 8) {
|
||||
if (item.type === 3) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/* 集中跳转 */
|
||||
toPage ({ type, entity }) {
|
||||
/* NOTE: 1 兑换码 2 立减金 3 红包 */
|
||||
|
|
|
|||
|
|
@ -135,6 +135,10 @@
|
|||
modelPop
|
||||
},
|
||||
|
||||
mounted () {
|
||||
console.log(window.navigator.userAgent.toLowerCase().indexOf("windows") > -1);
|
||||
},
|
||||
|
||||
methods: {
|
||||
/* 立即领取 */
|
||||
receive () {
|
||||
|
|
@ -169,21 +173,22 @@
|
|||
|
||||
/* 根据环境进行下一步操作 1 支付宝 2 微信 */
|
||||
judgeEnvironment (order_number, weiXinUrl) {
|
||||
console.log(weiXinUrl);
|
||||
let ua = window.navigator.userAgent.toLowerCase();
|
||||
/* 判断如果是微信/安卓百度浏览器 则复制链接 */
|
||||
if (this.goodsInfo.entity.channel === 1) {
|
||||
const aliPaysUrl = `alipays://platformapi/startapp?appId=2021004100663111&page=pages/index/index?order_number=${encodeURIComponent(window.btoa(order_number))}`;
|
||||
if (isWx() || (ua.indexOf("android") > -1 && ua.indexOf("baiduboxapp") > -1) || ua.indexOf("windows") > -1) {
|
||||
this.tip('请点击下方[复制]按钮，复制链接到浏览器打开！', 1, '点击复制');
|
||||
this.copyLink = aliPaysUrl;
|
||||
this.tip('请点击下方[复制]按钮，复制链接到浏览器打开！', 1, '点击复制');
|
||||
} else {
|
||||
location.replace(aliPaysUrl);
|
||||
}
|
||||
}
|
||||
if (this.goodsInfo.entity.channel === 2) {
|
||||
if (isAli() || ua.indexOf("windows") > -1) {
|
||||
this.tip('请点击下方[复制]按钮，复制链接到浏览器打开！', 1, '点击复制');
|
||||
if (ua.indexOf("windows") > -1) {
|
||||
this.copyLink = weiXinUrl;
|
||||
this.tip('请点击下方[复制]按钮，复制链接到浏览器打开！', 1, '点击复制');
|
||||
} else {
|
||||
location.replace(weiXinUrl);
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
59
ysf.css
59
ysf.css
|
|
@ -52,6 +52,9 @@ body {
|
|||
bottom: 0;
|
||||
z-index: 9999;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -76,7 +79,57 @@ body {
|
|||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.random-pop {
|
||||
background: url('./ysf-pop.png') no-repeat;
|
||||
background-size: cover;
|
||||
height: 3rem;
|
||||
width: 2.6rem;
|
||||
margin-top: -1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 0.08rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.r-p-money {
|
||||
height: 0.8rem;
|
||||
text-align: center;
|
||||
line-height: 1.15rem;
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
margin-right: 0.1rem;
|
||||
margin-left: 0;
|
||||
color: rgb(244, 52, 43);
|
||||
}
|
||||
|
||||
.r-p-tag {
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.r-p-type {
|
||||
font-size: 0.1rem;
|
||||
background-color: rgb(244, 52, 43, 0.1);
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.03rem 0.15rem;
|
||||
display: inline-block;
|
||||
color: rgb(244, 52, 43);
|
||||
margin-top: 0.1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.r-p-text {
|
||||
text-align: center;
|
||||
font-size: 0.12rem;
|
||||
margin-top: 0.7rem;
|
||||
line-height: 0.22rem;
|
||||
margin-bottom: 0.1rem;
|
||||
color: #fae5e5;
|
||||
}
|
||||
.r-p-but {
|
||||
background: url('./ysf-but.png') no-repeat;
|
||||
background-size: cover;
|
||||
height: 0.44rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.prompt {
|
||||
display: inline-block;
|
||||
min-width: 50%;
|
||||
|
|
@ -143,7 +196,7 @@ body {
|
|||
text-align: center;
|
||||
}
|
||||
.disable {
|
||||
background-color: rgb(253 138 142) !important;
|
||||
background-color: rgb(253, 138, 142) !important;
|
||||
}
|
||||
.information {
|
||||
text-align: center;
|
||||
|
|
@ -207,7 +260,7 @@ body {
|
|||
border: 0;
|
||||
font-size: 0.15rem;
|
||||
color: white;
|
||||
background: rgb(238 25 32);
|
||||
background: rgb(238, 25, 32);
|
||||
}
|
||||
|
||||
.illustrate {
|
||||
|
|
@ -248,7 +301,7 @@ body {
|
|||
}
|
||||
.type {
|
||||
font-size: 0.1rem;
|
||||
background-color: rgb(238 25 32);
|
||||
background-color: rgb(238, 25, 32);
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.03rem 0.15rem;
|
||||
display: inline-block;
|
||||
|
|
|
|||
33
ysf.html
33
ysf.html
|
|
@ -23,7 +23,16 @@
|
|||
{{prompt_text}}
|
||||
</div>
|
||||
<!-- 弹出提示 -->
|
||||
<model-pop :show.sync="popShow" title="温馨提示" :status="popStatus" :text="popText"></model-pop>
|
||||
<model-pop @backFunction="backGoodsFn" :show.sync="popShow" title="温馨提示" :status="popStatus"
|
||||
:text="popText"></model-pop>
|
||||
<div v-show="money" class="mask" @touchmove.prevent @mousewheel.prevent>
|
||||
<div class="random-pop">
|
||||
<p class="r-p-money"><span class="r-p-tag">￥</span>{{parseFloat(money)}}</p>
|
||||
<p class="r-p-type">随机红包</p>
|
||||
<p class="r-p-text">领取成功<br>请前往【云闪付】-【卡包】中查看</p>
|
||||
<p class="r-p-but" @click="backGoodsFn"></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 单条弹出框 -->
|
||||
<img class="bubble" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/ysf-logo.png" alt="">
|
||||
<div class="content">
|
||||
|
|
@ -40,8 +49,9 @@
|
|||
<div class="form">
|
||||
<div v-if="ysf.available===1">
|
||||
<p class="form-label">云闪付账号</p>
|
||||
<input class="form-input" v-model="account" type="text" placeholder="请输入手机号" />
|
||||
<input class="form-input mt0" v-model="confirmAccount" type="text" placeholder="请再次输入手机号" />
|
||||
<input class="form-input" maxlength="11" v-model="account" type="text" placeholder="请输入手机号" />
|
||||
<input class="form-input mt0" maxlength="11" v-model="confirmAccount" type="text"
|
||||
placeholder="请再次输入手机号" />
|
||||
<p class="form-note">您可在云闪付的个人信息中查看【云闪付账号】</p>
|
||||
</div>
|
||||
<button :class="ysf.available!==1?'disable':''" class="form-button"
|
||||
|
|
@ -91,7 +101,6 @@
|
|||
|
||||
<script>
|
||||
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
||||
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
|
||||
new Vue({
|
||||
el: "#ysf",
|
||||
data () {
|
||||
|
|
@ -105,9 +114,9 @@
|
|||
popText: '',
|
||||
popStatus: 1, /*1 成功 2提示 3失败 */
|
||||
prompt_text: '',
|
||||
cls: null
|
||||
cls: null,
|
||||
money: 0
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
components: {
|
||||
|
|
@ -118,14 +127,14 @@
|
|||
/* 立即领取 */
|
||||
submit () {
|
||||
if (this.ysf.available !== 1) return;
|
||||
if ((phoneReg.test(this.account) || emailReg.test(this.account)) && this.confirmAccount) {
|
||||
if (phoneReg.test(this.account) && this.confirmAccount) {
|
||||
if (this.account === this.confirmAccount) {
|
||||
this.finalSubmit();
|
||||
} else {
|
||||
this.tips('手机号输入不一致');
|
||||
}
|
||||
} else {
|
||||
this.tips('请输入正确的手机号或邮箱号');
|
||||
this.tips('请输入正确的手机号');
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -143,7 +152,11 @@
|
|||
req.axiosPost("/key/usage", data)
|
||||
.then(({ code, data, message }) => {
|
||||
if (code == 200) {
|
||||
this.tip('领取成功，请前往【云闪付】-【卡包】中查看', 1);
|
||||
if (self.ysf.entity.cash_amount_type === '2') {
|
||||
this.money = data.amount;
|
||||
} else {
|
||||
this.tip('领取成功，请前往【云闪付】-【卡包】中查看', 1);
|
||||
}
|
||||
} else {
|
||||
if (code == 403) {
|
||||
if (this.backAble) {
|
||||
|
|
@ -164,6 +177,7 @@
|
|||
|
||||
/* 返回 */
|
||||
backGoodsFn () {
|
||||
this.money = 0;
|
||||
if (this.backAble) {
|
||||
window.location.replace('./homepage.html');
|
||||
} else {
|
||||
|
|
@ -171,7 +185,6 @@
|
|||
}
|
||||
},
|
||||
|
||||
|
||||
/* 触发提示 */
|
||||
tip (text, status,) {
|
||||
this.popText = text;
|
||||
|
|
|
|||
Loading…
Reference in New Issue