feat: 改为动态按钮

This commit is contained in:
wangsongsole 2024-04-22 10:24:59 +08:00
parent 96de9742d6
commit d8c2288f59
17 changed files with 204 additions and 188 deletions

View File

@ -267,3 +267,12 @@ function isWxminiprogram() {
return false
}
}
/* 自定义按钮文案 */
function buttonTextFun(type, code) {
const buttonData = JSON.parse(sessionStorage.getItem("bm_auth")).button_conf
const lastText = buttonData.filter(
(item) => item.type == type && item.code == code
)[0]
return lastText.custom || lastText.default
}

View File

@ -104,7 +104,7 @@
</div>
<button class="exchange-btn"
:style="{'background': computedExChange?bgcolor:'#D7D7D7','color':computedExChange?ftcolor:'#333'}"
@click="exchangeGoodsFn">立即兑换</button>
@click="exchangeGoodsFn">{{buttonTextFun(goodsDetail.type,'receive')}}</button>
</div>
</div>
<!-- 单条弹出框 -->

View File

@ -1329,10 +1329,18 @@ ul {
}
#redPacketsViews .bt {
height: 1.8rem;
line-height: 2.3rem;
width: 2rem;
height: 0.46rem;
background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/but_back_img.png");
background-size: 100% 100%;
margin-top: 1rem;
text-align: center;
line-height: 0.42rem;
color: #df1104;
font-size: 0.16rem;
font-weight: bold;
}
#redPacketsViews .title {
margin-top: 0.3rem;
font-size: 0.25rem;
@ -1341,10 +1349,6 @@ ul {
text-align: center;
}
#redPacketsViews .bt img {
width: 2rem;
}
#redPacketsViews .type {
color: #fd3b2d;
font-size: 0.1rem;

View File

@ -132,7 +132,7 @@
</div>
<button class="exchange-btn"
:style="{'background': computedExChange?bgcolor:'#D7D7D7','color':computedExChange?ftcolor:'#333'}"
@click="exchangeGoodsFn">立即兑换</button>
@click="exchangeGoodsFn">{{buttonTextFun(goodsDetail.type,'receive')}}</button>
</div>
</div>
<!-- 单条弹出框 -->

View File

@ -11,7 +11,7 @@
<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/MarketingSystem/js/api2_0.js?v=1000"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage2_0.css" />
<link rel="stylesheet" href="../homepage2_0.css" />
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js?v=sdfhksdfklwrwer"></script>
<style>
@ -63,8 +63,7 @@
<span>{{goodsInfo.entity.cash_amount_type==='1'?'固额红包':'随机红包'}}</span>
</p>
<p class="bt" @click="receive">
<img src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_btn_receive.png'
alt='' />
{{buttonTextFun(goodsInfo.type,'receive')}}
</p>
</div>
<div class="instruction-box">

View File

@ -92,7 +92,8 @@
</p>
</div>
</div>
<div class="receiveBtn" @click="receiveFn" :class="goodInfo.available!=1?'readOnly':''">立即领取</div>
<div class="receiveBtn" @click="receiveFn" :class="goodInfo.available!=1?'readOnly':''">
{{buttonTextFun(goodsInfo.type,'receive')}}</div>
<div class="coupon_explain">
<h1>- 兑换说明 -</h1>
<div class="content">
@ -210,11 +211,11 @@
globalFormatStatus (type) {
switch (type) {
case 1:
return "立即兑换"
return "立即兑换";
case 9:
return "已兑换"
return "已兑换";
default:
return "立即兑换"
return "立即兑换";
}
},
backgoodsFn () {

View File

@ -60,7 +60,7 @@
</p>
</div>
<button :class="ysf.available===9?'disable':''" class="form-button"
@click="submit">{{ysf.available===9?'已领取':'立即领取'}}</button>
@click="submit">{{ysf.available===9?buttonTextFun(ysf.type,'received'):buttonTextFun(ysf.type,'receive')}}</button>
</div>
<div class="segmentation">
<i class="left"></i>

View File

@ -56,7 +56,7 @@
<p class="form-note">您可在云闪付的个人信息中查看【云闪付账号】</p>
</div>
<button :class="ysf.available=== 9 ? 'disable':''" class="form-button" :disabled="ysf.available=== 9"
@click="submit">{{ysf.available!==9?'立即领取':'已领取'}}</button>
@click="submit">{{ysf.available!==9?buttonTextFun(ysf.type,'receive'):buttonTextFun(ysf.type,'received')}}</button>
</div>
<div class="segmentation">
<i class="left"></i>

View File

@ -52,8 +52,7 @@
<span>{{goodsInfo.entity.cash_amount_type==='1'?'固额红包':'随机红包'}}</span>
</p>
<p class="bt" v-show="goodsInfo.available==9">
<img src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/_h-common_btn_receive@2x.png'
alt='' />
{{buttonTextFun(goodInfo.type,'received')}}
</p>
</div>
<div class="form">
@ -62,7 +61,7 @@
maxlength="100">
<input type="text" placeholder="请输入支付宝账号" class="f-input" v-model="form.receive_account">
<p class="f-prompt">您可在支付宝的个人信息中查看【支付宝账号】</p>
<button class="but" @click="receive">立即领取</button>
<button class="but" @click="receive">{{buttonTextFun(goodInfo.type,'receive')}}</button>
</template>
</div>
<div class="instruction-box">

View File

@ -60,9 +60,10 @@
<p class="form-note">
您可在支付宝的个人信息中查看【支付宝账号】
</p>
<button :class="goods.available===9?'disable':''" class="form-button" @click="submit">立即领取</button>
<button :class="goods.available===9?'disable':''" class="form-button"
@click="submit">{{buttonTextFun(goods.type,'received')}}</button>
</template>
<button v-else class="form-button disable">已领取</button>
<button v-else class="form-button disable">{{buttonTextFun(goods.type,'received')}}</button>
</div>
<div class="segmentation">
<i class="left"></i>

View File

@ -11,7 +11,7 @@
<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/MarketingSystem/js/api2_0.js?v=1000"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage2_0.css" />
<link rel="stylesheet" href="./homepage2_0.css" />
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
<style>
* {
@ -61,10 +61,9 @@
<p class='type'>
<span>{{goodsInfo.entity.cash_amount_type==='1'?'固额红包':'随机红包'}}</span>
</p>
<p class="bt" @click="receive">
<img src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_btn_receive.png'
alt='' />
</p>
<div class="bt" @click="receive">
{{buttonTextFun(goodsInfo.type,'receive')}}
</div>
</div>
<div class="instruction-box">
<div class="instruction-header"></div>

View File

@ -98,9 +98,8 @@
</p>
</div>
</div>
<div class="receiveBtn" @click="receiveFn" :class="goodInfo.available!=1?'readOnly':''">立即领取</div>
<div class="receiveBtn" @click="receiveFn" :class="goodInfo.available!=1?'readOnly':''">
{{buttonTextFun(goodInfo.type,'receive')}}</div>
<div class="coupon_explain">
<h1>- 兑换说明 -</h1>
<div class="content">
@ -128,7 +127,7 @@
</div>
<div class="content">
<h3>使用须知</h3>
<p v-html="goodInfo.notice" v-if="goodInfo.notice"></p>
<p v-html="goodInfo.entity.notice" v-if="goodInfo.entity.notice"></p>
<p v-else>
1、在{{reduceInfo.channel==1?'支付宝H5':'微信APP内打开链接'}},点击【一键领取】完成领取{{reduceInfo.channel==1?'支付宝':'微信'}}立减金<br />
2、{{reduceInfo.channel==1?'支付宝':'微信'}}立减金一旦领取不可撤销、不可转让。注意不要将兑换券泄露给他人

View File

@ -62,7 +62,7 @@
</p>
</div>
<button :class="ysf.available===9?'disable':''" class="form-button"
@click="submit">{{ysf.available===9?'已领取':'立即领取'}}</button>
@click="submit">{{ysf.available===9?buttonTextFun(ysf.type,'received'):buttonTextFun(ysf.type,'receive')}}</button>
</div>
<div class="segmentation">
<i class="left"></i>

View File

@ -55,7 +55,7 @@
<p class="form-note">您可在云闪付的个人信息中查看【云闪付账号】</p>
</div>
<button :class="ysf.available===9?'disable':''" class="form-button"
@click="submit">{{ysf.available!==9?'立即领取':'已领取'}}</button>
@click="submit">{{ysf.available!==9?buttonTextFun(ysf.type,'receive'):buttonTextFun(ysf.type,'received')}}</button>
</div>
<div class="segmentation">
<i class="left"></i>

View File

@ -99,10 +99,19 @@ body {
}
#redPacketsViews .bt {
height: 1.8rem;
line-height: 2.6rem;
width: 2rem;
height: 0.46rem;
background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/but_back_img.png");
background-size: 100% 100%;
text-align: center;
line-height: 0.42rem;
color: #df1104;
font-size: 0.16rem;
font-weight: bold;
margin: 0 auto;
margin-top: 1rem;
}
#redPacketsViews .title {
margin-top: 0.3rem;
font-size: 0.25rem;
@ -111,10 +120,6 @@ body {
text-align: center;
}
#redPacketsViews .bt img {
width: 2rem;
}
#redPacketsViews .type {
color: #fd3b2d;
font-size: 0.1rem;

View File

@ -51,8 +51,7 @@
<span>{{goodsInfo.entity.cash_amount_type==='1'?'固额红包':'随机红包'}}</span>
</p>
<p class="bt" v-show="goodsInfo.available==9">
<img src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/_h-common_btn_receive@2x.png'
alt='' />
{{buttonTextFun(goodsInfo.type,'received')}}
</p>
</div>
<div class="form">
@ -61,7 +60,7 @@
maxlength="100">
<input type="text" placeholder="请输入支付宝账号" class="f-input" v-model="form.receive_account">
<p class="f-prompt">您可在支付宝的个人信息中查看【支付宝账号】</p>
<button class="but" @click="receive">立即领取</button>
<button class="but" @click="receive">{{buttonTextFun(goodsInfo.type,'receive')}}</button>
</template>
</div>
<div class="instruction-box">

View File

@ -60,9 +60,10 @@
<p class="form-note">
您可在支付宝的个人信息中查看【支付宝账号】
</p>
<button :class="goods.available===9?'disable':''" class="form-button" @click="submit">立即领取</button>
<button :class="goods.available===9?'disable':''" class="form-button"
@click="submit">{{buttonTextFun(goods.type,'receive')}}</button>
</template>
<button v-else class="form-button disable">已领取</button>
<button v-else class="form-button disable">{{buttonTextFun(goods.type,'received')}}</button>
</div>
<div class="segmentation">
<i class="left"></i>