修改登录+新增订单详情

src/components/auth/verifyCode.vue

+<template>
+  <form
+    autocorrect="off"
+    autocapitalize="off"
+    autocomplete="off"
+    spellcheck="false"
+  >
+    <div class="row justify-between q-my-md">
+      <div
+        v-for="(x, i) in cols"
+        :key="i"
+        class="override-verfity-ipt col"
+        :class="{ 'q-ml-sm': i > 0 }"
+      >
+        <q-input
+          standout
+          v-model="cols[i]"
+          @focus="codeFocus($event)"
+          ref="codes"
+          @keyup="changFocus($event, i)"
+          maxlength="1"
+          mask="#"
+          dense
+        />
+      </div>
+      
+    </div>
+    <div class="q-mt-sm text-negative f12" v-if="hasError">{{ errorMsg }}</div>
+  </form>
+</template>
+
+<script>
+export default {
+  props: {
+    /**
+     * @description 请传入能够被12整除的整数
+     */
+    digit: Number,
+
+    /**
+     * @description 提示语
+     */
+    hint: String,
+
+    /**
+     * @description 绑定值
+     */
+    value: [String, Number],
+  },
+  data() {
+    return {
+      cols: [],
+      hasError: false,
+      errorMsg: "",
+      colStyle: "",
+    };
+  },
+  created() {
+    this.initColHandler();
+  },
+  methods: {
+    initColHandler() {
+      for (let i = 0; i < this.digit; i++) {
+        this.cols.push("");
+      }
+      this.colStyle = `col-${12 / this.digit}`;
+    },
+    changFocus(event, index) {
+      if (event.key == "Backspace") {
+        if (index != 0) {
+          this.$refs.codes[index - 1].focus();
+        }
+      } else if (index < this.digit-1) {
+        if (this.cols[index] != "") {
+          this.$refs.codes[index + 1].focus();
+        }
+      }
+      this.updateValue();
+    },
+    updateValue() {
+      let tempValue = "";
+      this.cols.forEach((x) => {
+        tempValue += x;
+      });
+      this.$emit("input", tempValue);
+    },
+    codeFocus(e) {
+      e.target.select();
+    },
+    validate() {
+      if (this.value.length != this.cols.length) {
+        this.errorMsg = "请输入正确的验证码";
+        this.hasError = true;
+      } else {
+        this.errorMsg = "";
+        this.hasError = false;
+      }
+      return !this.hasError
+    },
+  },
+};
+</script>
+
+<style>
+.override-verfity-ipt .q-field--dense .q-field__control,
+.override-verfity-ipt .q-field--dense .q-field__marginal {
+  height: 60px !important;
+  text-align: center;
+  font-family: din;
+  font-size: 32px;
+}
+.override-verfity-ipt .q-field--dense .q-field__control input,
+.override-verfity-ipt .q-field--dense .q-field__marginal input {
+  text-align: center;
+}
+</style>

src/components/label_background_article/center.vue

 <template>
   <!--背景圖 - 文中-->
-  <div class="q-mt-lg">
+  <div>
     <section class="about3" :style="{backgroundImage:`url('${plugData.ImageUrl}')`}">
       <div class="section-block">
         <div class="about-main">

src/components/navs/hor-btm.vue

@@ -382,9 +382,7 @@ cursor: pointer;
       <div  v-for="item in dataList.BottomList" :key="item.Id">
         <div class="text-subtitle1 text-weight-bold text-white">{{ item.NavTitle }}</div>
         <div class="q-mt-xl row" style="width:210px">
-            <div class="bg-white rounded-borders q-pa-xs overflow-hidden q-mb-md q-mr-md" @click="navigateTo(item2)" v-for="item2 in item.SubList" :key="item2.Id"  style="width:40px;height:34px;">
-              <img style="width:100%" :src="item2.Icon" :title="item2.NavTitle" />
-            </div>
+          <img  v-for="item2 in item.SubList" :key="item2.Id" style="width:40px;border-radius: 2px;" class="q-mb-md q-mr-md bg-white" :src="item2.Icon" :title="item2.NavTitle" />
         </div>
       </div>
     </div>

src/pages/line/orderPreview.vue

@@ -594,16 +594,16 @@ export default {
         TCID: 0,
         OrderId: 0,
         VisaPlanId: 0,
-        SurName: "羅",
-        Name: "超",
-        PassportNo: "D56465465",
-        ESurName: "LUO",
-        EName: "CHAO",
+        SurName: "",
+        Name: "",
+        PassportNo: "",
+        ESurName: "",
+        EName: "",
         GuestType: 0,
         EnableSignRoom: false,
-        PassportExpiry: "2035-12-31",
+        PassportExpiry: "",
         FormatTypeName: "",
-        MobilePhone: "17308037817",
+        MobilePhone: "",
         RoomType: 0,
         IsSignRoom: false,
         Sex: 1,
@@ -619,7 +619,7 @@ export default {
         IsDepartureRecord: 2,
         IsHightSchool: 2,
         IsB2B: 1,
-        Birthday: "1990-12-26",
+        Birthday: "",
       },
       guests: [],
       disableSign: false,

src/pages/usercenter/order/orderDetail.vue

+<template>
+  <div class="content-page order-preview">
+    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
+        <div class="text-subtitle1 text-weight-bolder">訂單狀態</div>
+        <div class="q-mt-lg row">
+            <div class="col">
+                <div class="row items-center">
+                    <q-icon name="iconfont icontishi" size="32px" color="warning" />
+                    <div class="q-ml-md text-h6 text-orange text-weight-bold">待支付</div>
+                </div>
+                <div class="q-mt-md f12 text-grey-6">請在您下單成功後30分鐘內完成支付，否則訂單會被系統自動取消</div>
+            </div>
+            <div class="">
+                <div class="f12 text-grey-6">訂單編號：#D2022325159852</div>
+                <div class="f12 text-grey-6 q-mt-md">下單日期：2023年3月14日 19:02</div>
+            </div>
+        </div>
+        <q-separator color="grey-2" class="q-my-md" />
+        <div class="row">
+            <div class="text-subtitle1 col">
+                <span>應付金額：</span>
+                <span class="text-subtitle2">CNY</span>
+                <span class="q-ml-sm text-weight-bolder">{{ moneyFormat('3580.00',2) }}</span>
+            </div>
+            <div class="">
+                <q-btn color="primary" outline dense label="取消訂單" class="q-mr-md q-px-md"/>
+                <q-btn color="primary" unelevated dense label="前往付款" class="q-px-md"/>
+            </div>
+        </div>
+    </q-card>
+
+    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
+        <div class="text-subtitle1 text-weight-bolder">商品訊息</div>
+        <div class="row q-mt-md">
+            <q-img
+              src="http://imgfile.oytour.com/Upload/DMC/202302280651141800000000003.jpg"
+              class="rounded-borders q-mr-md"
+              spinner-color="grey-2"
+              style="width: 150px"
+            />
+            <div class="col">
+              <div class="text-body1 ellipsis">忠清北道私人包車一日遊｜玉笋峰悬索桥 & 单轨列车登飞凤山(滑翔伞) & 朴达岭 & 国弓体验</div>
+              <div class="q-mt-sm text-grey-6">2023-03-15從成都出發 成人x2; </div>
+              <div class="q-mt-sm text-dark">
+                出行日期：2023年3月30日（本地时间）
+              </div>
+              <div class="q-mt-sm text-grey-6">
+                商品類型：包車
+              </div>
+            </div>
+          </div>
+    </q-card>
+
+    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
+        <div class="text-subtitle1 text-weight-bolder">訂購人訊息</div>
+        <div class="f12 q-mt-sm text-grey-6">如你的预订有任何变动，我们将及时通知你</div>
+        <div class="row q-col-gutter-md q-mt-md">
+            <div class="col-6">
+                <div class="f12 text-grey-6">姓氏</div>
+                <div class="q-mt-sm text-body1">羅</div>
+            </div>
+            <div class="col-6">
+                <div class="f12 text-grey-6">名字</div>
+                <div class="q-mt-sm text-body1">超</div>
+            </div>
+            <div class="col-6">
+                <div class="f12 text-grey-6">手機號碼</div>
+                <div class="q-mt-sm text-body1">86-17308037817</div>
+            </div>
+            <div class="col-6">
+                <div class="f12 text-grey-6">邮箱 (用于接收订单确认邮件)</div>
+                <div class="q-mt-sm text-body1">alex9012@vip.qq.com</div>
+            </div>
+        </div>
+        <div>
+            <q-separator color="grey-2" class="q-my-md" />
+            <div class="text-subtitle1 text-weight-bolder">用戶備註</div>
+            <div class="rounded-borders bg-orange-1 col q-mt-md q-pa-md text-orange">
+                凍死了防控就是大陸飛科技阿斯蒂芬盧卡斯經費達拉斯
+            </div>
+        </div>
+    </q-card>
+    
+    
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/router/routes.js

@@ -94,12 +94,12 @@ const routes = [{
                 component: () =>
                     import ('pages/usercenter/orderlist.vue')
             },
-            {
-                path: '/orderinfo/:id', //订单详情
-                meta: { isUserCenter: true, needLogin: true, title: '订单详情' },
-                component: () =>
-                    import ('pages/usercenter/orderinfo.vue')
-            },
+            // {
+            //     path: '/orderinfo/:id', //订单详情
+            //     meta: { isUserCenter: true, needLogin: true, title: '订单详情' },
+            //     component: () =>
+            //         import ('pages/usercenter/orderinfo.vue')
+            // },
             {
                 path: '/passengerList/:id', //旅客名单
                 meta: { isUserCenter: true, needLogin: true, title: '旅客名单' },
@@ -190,12 +190,18 @@ const routes = [{
                 component: () =>
                     import ('pages/pay/paysuccess.vue')
             },
+            {
+                path: '/orderinfo/:orderno', //訂單詳情
+                meta: { title: '訂單詳情', isUserCenter: false, needLogin: true, },
+                component: () =>
+                    import ('pages/usercenter/order/orderDetail.vue')
+            },
         ]
 
     },
     {
         path: '/userCenter', //移动端个人中心
-        meta: { isUserCenter: true, needLogin: true,title: '个人中心' },
+        meta: { isUserCenter: true, needLogin: true, title: '个人中心' },
         component: () =>
             import ('pages/usercenter/mobileUserCenter.vue')
     },