style:重构运营商页面
This commit is contained in:
parent
06049cb3fd
commit
d01d9d01f9
|
@ -2,7 +2,7 @@
|
|||
* @Author: wwxin 2463926940@qq.com
|
||||
* @Date: 2024-06-20 16:54:22
|
||||
* @LastEditors: wwxin 2463926940@qq.com
|
||||
* @LastEditTime: 2024-07-25 10:02:14
|
||||
* @LastEditTime: 2024-07-25 15:15:36
|
||||
* @FilePath: /a-vue3 2/src/router/index.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
|
@ -18,6 +18,12 @@ export const constantRoutes = [
|
|||
hidden: true,
|
||||
component: () => import('@/views/promotion/promotion'),
|
||||
},
|
||||
{
|
||||
path: '/xcprom',
|
||||
name: 'xcprom',
|
||||
hidden: true,
|
||||
component: () => import('@/views/promotion/xcprom'),
|
||||
},
|
||||
{
|
||||
path: '/promotionat',
|
||||
name: 'Promotionat',
|
||||
|
|
|
@ -7,12 +7,11 @@
|
|||
>
|
||||
<div ref="myImg">
|
||||
<img :src="img1" alt="" class="header-img" />
|
||||
<img :src="img2" alt="" class="item" />
|
||||
<van-notice-bar scrollable left-icon="volume-o" v-if="showNoticeBar">
|
||||
{{ ntext.join("" + longSpace) }}
|
||||
</van-notice-bar>
|
||||
</div>
|
||||
<div class="transaction-view" ref="myTransactionView">
|
||||
<div class="transaction-view" ref="myTransactionView" :style="{backgroundColor: backgroundColor}">
|
||||
<div class="ipt-view">
|
||||
<input
|
||||
placeholder="请输入手机号码"
|
||||
|
@ -25,6 +24,19 @@
|
|||
v-on:focus="onInputFocus"
|
||||
/>
|
||||
</div>
|
||||
<div class="ipt-view1 ipt-view">
|
||||
<input
|
||||
placeholder="请输入短信验证码"
|
||||
type="tel"
|
||||
class="ipt1 ipt"
|
||||
maxlength="11"
|
||||
ref="myInput"
|
||||
v-model="mobile"
|
||||
@input="phoneBlur"
|
||||
v-on:focus="onInputFocus"
|
||||
/>
|
||||
<div class="code">获取验证码</div>
|
||||
</div>
|
||||
<button
|
||||
class="trasition-btns"
|
||||
:style="{ backgroundImage: 'url(' + coverBtnImgUrl + ')' }"
|
||||
|
@ -36,14 +48,12 @@
|
|||
<van-checkbox v-model="isCheck" checked-color="red"
|
||||
>我已阅读并同意
|
||||
<a
|
||||
v-if="agreementOne == 1"
|
||||
class="agreement"
|
||||
id="hd"
|
||||
@click="toAgreePages('hdRule')"
|
||||
>《活动规则》</a
|
||||
>
|
||||
<a
|
||||
v-if="agreementTwo == 1"
|
||||
class="agreement"
|
||||
id="ys"
|
||||
@click="toAgreePages('ysRule')"
|
||||
|
@ -53,19 +63,18 @@
|
|||
</div>
|
||||
<div>
|
||||
<a
|
||||
v-if="agreementThree == 1"
|
||||
class="agreement"
|
||||
id="hy2"
|
||||
@click="toAgreePages('hyService')"
|
||||
>《会员服务及自动续费协议》</a
|
||||
>《会员服务协议》</a
|
||||
>
|
||||
<span v-if="promotionCode != 'RZpJsF'"
|
||||
>{{ accTxt }}业务资费:<a>{{ price }}</a
|
||||
>元/{{ priceTxt }}。</span
|
||||
<span
|
||||
>{{ priceTips }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img :src="img2" alt="" class="item" />
|
||||
<img :src="img3" alt="" class="item" />
|
||||
<div class="rule-content">
|
||||
<img :src="img4" alt="" class="rule-info" />
|
||||
|
@ -96,29 +105,25 @@
|
|||
<div class="view">
|
||||
我已阅读并同意
|
||||
<a
|
||||
v-if="agreementOne == 1"
|
||||
class="agreement"
|
||||
id="hd"
|
||||
@click="toAgreePages('hdRule')"
|
||||
>《活动规则》</a
|
||||
>
|
||||
<a
|
||||
v-if="agreementTwo == 1"
|
||||
class="agreement"
|
||||
id="ys"
|
||||
@click="toAgreePages('ysRule')"
|
||||
>《隐私政策》</a
|
||||
>
|
||||
<a
|
||||
v-if="agreementThree == 1"
|
||||
class="agreement"
|
||||
id="hy2"
|
||||
@click="toAgreePages('hyService')"
|
||||
>《会员服务及自动续费协议》</a
|
||||
>《会员服务》</a
|
||||
>
|
||||
<span v-if="promotionCode != 'RZpJsF'"
|
||||
>{{ accTxt }}业务资费:<a>{{ price }}</a
|
||||
>元/{{ priceTxt }}。</span
|
||||
<span
|
||||
>{{priceTips }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -134,7 +139,7 @@
|
|||
</template>
|
||||
<script setup name="promotion">
|
||||
import {
|
||||
resourceInfo,
|
||||
yingnuoInfo,
|
||||
resourceAgree,
|
||||
resourceArea,
|
||||
proOrder,
|
||||
|
@ -154,23 +159,19 @@ let ntext = reactive([]);
|
|||
let showDialogs = ref(false);
|
||||
let dialogTitle = ref("");
|
||||
const promotionCode = ref("");
|
||||
let priceTips = ref("");
|
||||
let img1 = ref("");
|
||||
let img2 = ref("");
|
||||
let img3 = ref("");
|
||||
let img4 = ref("");
|
||||
let price = ref("14");
|
||||
let promotionId = ref("");
|
||||
let priceTxt = ref("月");
|
||||
let accTxt = ref("开通严选会员,") ;
|
||||
let delayDay = ref("");
|
||||
let payMethod = ref("");
|
||||
let periodPayDays = ref("");
|
||||
let confirmSwitch = ref("0");
|
||||
let autoSelect = ref("1");
|
||||
let callbackUrl = ref("");
|
||||
let agreementOne = ref("");
|
||||
let agreementTwo = ref("");
|
||||
let agreementThree = ref("");
|
||||
let backgroundColor = ref("");
|
||||
let mobile = ref("");
|
||||
let isCheck = ref(false);
|
||||
let overlayShow = ref(false);
|
||||
|
@ -241,40 +242,30 @@ const toAgreePages = (types) => {
|
|||
};
|
||||
const shouye = () => {
|
||||
let param = getUrlParam();
|
||||
resourceInfo({promotionCode:promotionCode.value,...param}).then((resp) => {
|
||||
yingnuoInfo({promotionCode:promotionCode.value}).then((resp) => {
|
||||
if (resp.data.code == "S00000") {
|
||||
const result = resp.data.result;
|
||||
document.title = result.name;
|
||||
document.title = result.promotionName;
|
||||
const cdnBaseUrl = "https://prom-cdn.xtl10.fun/";
|
||||
// 图片链接
|
||||
priceTips.value=result.showPrice
|
||||
coverImgUrl.value = cdnBaseUrl + result.backImg;
|
||||
img1.value = cdnBaseUrl + result.logoImg;
|
||||
img2.value = cdnBaseUrl + result.imgOne;
|
||||
img3.value = cdnBaseUrl + result.imgTwo;
|
||||
img4.value = cdnBaseUrl + result.imgThree;
|
||||
coverBtnImgUrl.value = cdnBaseUrl + result.imgXxBtn;
|
||||
img1.value = cdnBaseUrl + result.imgOne;
|
||||
img2.value = cdnBaseUrl + result.imgTwo;
|
||||
img3.value = cdnBaseUrl + result.imgThree;
|
||||
img4.value = cdnBaseUrl + result.imgFour;
|
||||
coverBtnImgUrl.value = cdnBaseUrl + 'shangyou/ua0zbgt/1693808366023/订购202309041417304477037.png'
|
||||
// 其他属性
|
||||
payMethod.value = result.payMethod;
|
||||
price = result.price;
|
||||
delayDay.value = result.delayDay;
|
||||
price.value = result.price;
|
||||
backgroundColor.value=result.backgroundColor;
|
||||
periodPayDays.value = result.periodPayDays;
|
||||
confirmSwitch.value = result.confirmSwitch;
|
||||
autoSelect.value = result.autoSelect;
|
||||
callbackUrl.value = result.callbackUrl;
|
||||
agreementOne.value = result.agreementOne;
|
||||
agreementTwo.value = result.agreementTwo;
|
||||
agreementThree.value = result.agreementThree;
|
||||
|
||||
promotionId.value= result.promotionId;
|
||||
mobile.value = result.tepn;
|
||||
priceTxt.value = result.periodPayDays + "天";
|
||||
accTxt.value = result.agreementTxt;
|
||||
if (
|
||||
promotionCode.value === "afSKPj" ||
|
||||
promotionCode.value === "MadlRh" ||
|
||||
promotionCode.value === "oVkHuA"
|
||||
) {
|
||||
accTxt.value = "开通VIP会员,";
|
||||
}
|
||||
let isRend = true;
|
||||
if (getQueryVariable("phnumber")) {
|
||||
const mobile = getQueryVariable("phnumber");
|
||||
|
@ -435,31 +426,6 @@ const submitData = async () => {
|
|||
""
|
||||
);
|
||||
}
|
||||
if (confirmSwitch.value == "1") {
|
||||
// alert("2");
|
||||
let msgg =
|
||||
"签约会员自动续费,开通成功后,下一笔扣款预计发生在" +
|
||||
delayDay.value +
|
||||
",商户将每隔" +
|
||||
periodPayDays.value +
|
||||
"天,自动从你的支付宝账户扣款" +
|
||||
price +
|
||||
"元。";
|
||||
showDialog({
|
||||
title: "提示",
|
||||
message: msgg,
|
||||
})
|
||||
.then(() => {
|
||||
let P = jumpp;
|
||||
changeURLStatic("phnumber", mobile.value);
|
||||
hrefurl(P, payMethod.value, isIOS());
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
changeURLStatic("phnumber", mobile.value);
|
||||
let P = jumpp;
|
||||
hrefurl(P, payMethod.value, isIOS());
|
||||
}
|
||||
} else {
|
||||
window.location.href = jumpp;
|
||||
}
|
||||
|
@ -609,6 +575,30 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.ipt-view1{
|
||||
width: 85%;
|
||||
display: flex;
|
||||
margin-bottom: 50px !important;
|
||||
.code{
|
||||
width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: rgb(255, 133, 14);
|
||||
border-top-right-radius: 65px;
|
||||
border-bottom-right-radius: 65px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
.ipt1{
|
||||
width: 60% !important;
|
||||
}
|
||||
|
||||
}
|
||||
.ipt-view {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ffe1cc;
|
||||
|
@ -621,12 +611,13 @@ onMounted(() => {
|
|||
.ipt {
|
||||
border: none;
|
||||
color: #000;
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
font-weight: 900;
|
||||
border-radius: 50%;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
.trasition-btns {
|
||||
-webkit-animation: scaleBtn 2s ease-in-out infinite;
|
||||
|
@ -634,7 +625,7 @@ onMounted(() => {
|
|||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: block;
|
||||
height: 1.2rem;
|
||||
height: 1.4rem;
|
||||
margin-bottom: 0.32407rem;
|
||||
width: 6rem;
|
||||
border: none;
|
||||
|
@ -690,4 +681,27 @@ onMounted(() => {
|
|||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.input_1 {
|
||||
width: 85vw;
|
||||
height: 7vh;
|
||||
background-color: #fff;
|
||||
border-radius: 7vh;
|
||||
border: 1px solid #999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.codeText {
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
padding-right: 15px;
|
||||
background-color: rgb(255, 133, 14);
|
||||
border-radius: 0 7vh 7vh 0;
|
||||
height: 7vh;
|
||||
line-height: 7vh;
|
||||
border: 1px solid rgb(153, 153, 153);
|
||||
color: rgb(255, 255, 255);
|
||||
z-index: 5;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue