style:重构运营商页面

src/router/index.js

@@ -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',

src/views/promotion/xcprom.vue

@@ -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>