style:重构运营商页面

This commit is contained in:
wwxin 2024-07-25 16:00:02 +08:00
parent 06049cb3fd
commit d01d9d01f9
2 changed files with 92 additions and 72 deletions

View File

@ -2,7 +2,7 @@
* @Author: wwxin 2463926940@qq.com * @Author: wwxin 2463926940@qq.com
* @Date: 2024-06-20 16:54:22 * @Date: 2024-06-20 16:54:22
* @LastEditors: wwxin 2463926940@qq.com * @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 * @FilePath: /a-vue3 2/src/router/index.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -18,6 +18,12 @@ export const constantRoutes = [
hidden: true, hidden: true,
component: () => import('@/views/promotion/promotion'), component: () => import('@/views/promotion/promotion'),
}, },
{
path: '/xcprom',
name: 'xcprom',
hidden: true,
component: () => import('@/views/promotion/xcprom'),
},
{ {
path: '/promotionat', path: '/promotionat',
name: 'Promotionat', name: 'Promotionat',

View File

@ -7,12 +7,11 @@
> >
<div ref="myImg"> <div ref="myImg">
<img :src="img1" alt="" class="header-img" /> <img :src="img1" alt="" class="header-img" />
<img :src="img2" alt="" class="item" />
<van-notice-bar scrollable left-icon="volume-o" v-if="showNoticeBar"> <van-notice-bar scrollable left-icon="volume-o" v-if="showNoticeBar">
{{ ntext.join("" + longSpace) }} {{ ntext.join("" + longSpace) }}
</van-notice-bar> </van-notice-bar>
</div> </div>
<div class="transaction-view" ref="myTransactionView"> <div class="transaction-view" ref="myTransactionView" :style="{backgroundColor: backgroundColor}">
<div class="ipt-view"> <div class="ipt-view">
<input <input
placeholder="请输入手机号码" placeholder="请输入手机号码"
@ -25,6 +24,19 @@
v-on:focus="onInputFocus" v-on:focus="onInputFocus"
/> />
</div> </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 <button
class="trasition-btns" class="trasition-btns"
:style="{ backgroundImage: 'url(' + coverBtnImgUrl + ')' }" :style="{ backgroundImage: 'url(' + coverBtnImgUrl + ')' }"
@ -36,14 +48,12 @@
<van-checkbox v-model="isCheck" checked-color="red" <van-checkbox v-model="isCheck" checked-color="red"
>我已阅读并同意 >我已阅读并同意
<a <a
v-if="agreementOne == 1"
class="agreement" class="agreement"
id="hd" id="hd"
@click="toAgreePages('hdRule')" @click="toAgreePages('hdRule')"
>活动规则</a >活动规则</a
> >
<a <a
v-if="agreementTwo == 1"
class="agreement" class="agreement"
id="ys" id="ys"
@click="toAgreePages('ysRule')" @click="toAgreePages('ysRule')"
@ -53,19 +63,18 @@
</div> </div>
<div> <div>
<a <a
v-if="agreementThree == 1"
class="agreement" class="agreement"
id="hy2" id="hy2"
@click="toAgreePages('hyService')" @click="toAgreePages('hyService')"
>会员服务及自动续费协议</a >会员服务协议</a
> >
<span v-if="promotionCode != 'RZpJsF'" <span
>{{ accTxt }}业务资费:<a>{{ price }}</a >{{ priceTips }}</span
>/{{ priceTxt }}</span
> >
</div> </div>
</div> </div>
</div> </div>
<img :src="img2" alt="" class="item" />
<img :src="img3" alt="" class="item" /> <img :src="img3" alt="" class="item" />
<div class="rule-content"> <div class="rule-content">
<img :src="img4" alt="" class="rule-info" /> <img :src="img4" alt="" class="rule-info" />
@ -96,29 +105,25 @@
<div class="view"> <div class="view">
我已阅读并同意 我已阅读并同意
<a <a
v-if="agreementOne == 1"
class="agreement" class="agreement"
id="hd" id="hd"
@click="toAgreePages('hdRule')" @click="toAgreePages('hdRule')"
>活动规则</a >活动规则</a
> >
<a <a
v-if="agreementTwo == 1"
class="agreement" class="agreement"
id="ys" id="ys"
@click="toAgreePages('ysRule')" @click="toAgreePages('ysRule')"
>隐私政策</a >隐私政策</a
> >
<a <a
v-if="agreementThree == 1"
class="agreement" class="agreement"
id="hy2" id="hy2"
@click="toAgreePages('hyService')" @click="toAgreePages('hyService')"
>会员服务及自动续费协议</a >会员服务</a
> >
<span v-if="promotionCode != 'RZpJsF'" <span
>{{ accTxt }}业务资费:<a>{{ price }}</a >{{priceTips }}</span
>/{{ priceTxt }}</span
> >
</div> </div>
</div> </div>
@ -134,7 +139,7 @@
</template> </template>
<script setup name="promotion"> <script setup name="promotion">
import { import {
resourceInfo, yingnuoInfo,
resourceAgree, resourceAgree,
resourceArea, resourceArea,
proOrder, proOrder,
@ -154,23 +159,19 @@ let ntext = reactive([]);
let showDialogs = ref(false); let showDialogs = ref(false);
let dialogTitle = ref(""); let dialogTitle = ref("");
const promotionCode = ref(""); const promotionCode = ref("");
let priceTips = ref("");
let img1 = ref(""); let img1 = ref("");
let img2 = ref(""); let img2 = ref("");
let img3 = ref(""); let img3 = ref("");
let img4 = ref(""); let img4 = ref("");
let price = ref("14"); let price = ref("14");
let promotionId = ref(""); let promotionId = ref("");
let priceTxt = ref("月");
let accTxt = ref("开通严选会员,") ;
let delayDay = ref("");
let payMethod = ref(""); let payMethod = ref("");
let periodPayDays = ref(""); let periodPayDays = ref("");
let confirmSwitch = ref("0"); let confirmSwitch = ref("0");
let autoSelect = ref("1"); let autoSelect = ref("1");
let callbackUrl = ref(""); let callbackUrl = ref("");
let agreementOne = ref(""); let backgroundColor = ref("");
let agreementTwo = ref("");
let agreementThree = ref("");
let mobile = ref(""); let mobile = ref("");
let isCheck = ref(false); let isCheck = ref(false);
let overlayShow = ref(false); let overlayShow = ref(false);
@ -241,40 +242,30 @@ const toAgreePages = (types) => {
}; };
const shouye = () => { const shouye = () => {
let param = getUrlParam(); let param = getUrlParam();
resourceInfo({promotionCode:promotionCode.value,...param}).then((resp) => { yingnuoInfo({promotionCode:promotionCode.value}).then((resp) => {
if (resp.data.code == "S00000") { if (resp.data.code == "S00000") {
const result = resp.data.result; const result = resp.data.result;
document.title = result.name; document.title = result.promotionName;
const cdnBaseUrl = "https://prom-cdn.xtl10.fun/"; const cdnBaseUrl = "https://prom-cdn.xtl10.fun/";
// //
priceTips.value=result.showPrice
coverImgUrl.value = cdnBaseUrl + result.backImg; coverImgUrl.value = cdnBaseUrl + result.backImg;
img1.value = cdnBaseUrl + result.logoImg; img1.value = cdnBaseUrl + result.imgOne;
img2.value = cdnBaseUrl + result.imgOne; img2.value = cdnBaseUrl + result.imgTwo;
img3.value = cdnBaseUrl + result.imgTwo; img3.value = cdnBaseUrl + result.imgThree;
img4.value = cdnBaseUrl + result.imgThree; img4.value = cdnBaseUrl + result.imgFour;
coverBtnImgUrl.value = cdnBaseUrl + result.imgXxBtn; coverBtnImgUrl.value = cdnBaseUrl + 'shangyou/ua0zbgt/1693808366023/订购202309041417304477037.png'
// //
payMethod.value = result.payMethod; payMethod.value = result.payMethod;
price = result.price; price.value = result.price;
delayDay.value = result.delayDay; backgroundColor.value=result.backgroundColor;
periodPayDays.value = result.periodPayDays; periodPayDays.value = result.periodPayDays;
confirmSwitch.value = result.confirmSwitch; confirmSwitch.value = result.confirmSwitch;
autoSelect.value = result.autoSelect; autoSelect.value = result.autoSelect;
callbackUrl.value = result.callbackUrl; callbackUrl.value = result.callbackUrl;
agreementOne.value = result.agreementOne;
agreementTwo.value = result.agreementTwo;
agreementThree.value = result.agreementThree;
promotionId.value= result.promotionId; promotionId.value= result.promotionId;
mobile.value = result.tepn; 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; let isRend = true;
if (getQueryVariable("phnumber")) { if (getQueryVariable("phnumber")) {
const mobile = 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 { } else {
window.location.href = jumpp; window.location.href = jumpp;
} }
@ -609,6 +575,30 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; 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 { .ipt-view {
background-color: #fff; background-color: #fff;
border: 1px solid #ffe1cc; border: 1px solid #ffe1cc;
@ -621,12 +611,13 @@ onMounted(() => {
.ipt { .ipt {
border: none; border: none;
color: #000; color: #000;
font-size: 22px; font-size: 20px;
width: 100%; width: 100%;
font-weight: 900; font-weight: 900;
border-radius: 50%; border-radius: 50%;
padding-left: 20px; padding-left: 20px;
} }
} }
.trasition-btns { .trasition-btns {
-webkit-animation: scaleBtn 2s ease-in-out infinite; -webkit-animation: scaleBtn 2s ease-in-out infinite;
@ -634,7 +625,7 @@ onMounted(() => {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: block; display: block;
height: 1.2rem; height: 1.4rem;
margin-bottom: 0.32407rem; margin-bottom: 0.32407rem;
width: 6rem; width: 6rem;
border: none; border: none;
@ -690,4 +681,27 @@ onMounted(() => {
justify-content: center; justify-content: center;
height: 100%; 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> </style>