Merge branch 'master' of http://gitlab.oytour.com/viitto/million

src/App.vue

@@ -10,7 +10,7 @@ export default {
 };
 </script>
 <style>
-@import url("//at.alicdn.com/t/c/font_1890699_yrr2mh5n7ln.css");
+@import url("//at.alicdn.com/t/c/font_1890699_gbysegbhucu.css");
 @font-face {
   font-family: "oswald";
   src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
@@ -19,7 +19,9 @@ export default {
   font-family: 'FZDBSJW';
   src: local('FZDaBiaoSong-B06S')
 }
-
+.text-shadow{
+  text-shadow: rgb(0 0 0 / 50%) 2px 2px 5px;
+}
 .text-subtitle1 {
   font-size: 1.25rem !important;
 }

src/boot/product.js

+const product = {
+    /**
+     * 生成產品詳情地址
+     * @param {*} productInfo 產品信息（必須包含Id和ProductType）
+     */
+    genernalUrl(productInfo) {
+        let t = productInfo.productType ? productInfo.productType : productInfo.ProductType;
+        let configId = productInfo.configId ? productInfo.configId : productInfo.ConfigId;
+        let url = ''
+        if (t && configId) {
+            if (t === 4) {
+                // 接送机，包车
+                url = "/detailCar/" + configId
+            } else if (t === 3) {
+                url = "/detailHotal/" + configId
+            } else if (t === 2) {
+                url = "/detailsScenicSpotTicket/" + configId
+            } else if (t === 1) {
+                url = "/detail/" + encodeURIComponent(item.id) + "/" + 0 + "/" + configId
+            } else if (t === 5) {
+                url = "/hotel/" + configId
+            }
+        } else {
+            throw new Error("參數不合法");
+        }
+        return url
+    },
+};
+
+export default product
\ No newline at end of file

src/boot/utils.js

@@ -6,6 +6,7 @@ import VueCoreVideoPlayer from 'vue-core-video-players'
 import 'viewerjs/dist/viewer.css'
 import user from './user'
 import message from './message'
+import product from './product'
 import VueViewer from 'v-viewer'
 // import VueCoreVideoPlayer from 'vue-core-video-player'
 Vue.prototype.$EventBus = new Vue()
@@ -13,6 +14,7 @@ Vue.use(VueCoreVideoPlayer)
 Vue.use(VueViewer)
 Vue.prototype.$md5 = md5;
 Vue.prototype.$message = message
+Vue.prototype.$product = product
     //域名管理对象
 Vue.prototype.domainManager = function() {
         let domainUrl = '';
@@ -195,8 +197,9 @@ Vue.prototype.OpenNewUrl = function(URL) {
 
 //公用跳转
 Vue.prototype.CommonJump = function(path, obj) {
+    let p = typeof(path) == 'string' ? path : this.$product.genernalUrl(path)
     this.$router.push({
-        path: path,
+        path: p,
         query: obj
     });
 }

src/components/ScenicSpotTicket/orderPreview.vue

@@ -137,7 +137,6 @@ export default {
               x.originalB2CPrice=y.Price
             }
           })
-          x.Count = 60
         })
         this.calcMoney()
         

src/components/car/orderPreview.vue

@@ -43,15 +43,16 @@
         </div>
       </div>
       
-      
+      <template v-if="TicketIds&&TicketIds.length>0">
         <div class="text-grey-6 f12 q-my-md">選擇車類型</div>
         <div class="row wrap">
           <div v-for="(x,i) in dataList.CarTypeList" :key="i">
-          <q-chip size="14px" clickable @click="handleSelect(x,2)" 
+            <q-chip v-if="TicketIds.indexOf(x.Id)!=-1" size="14px" clickable @click="handleSelect(x,2)" 
             :text-color="selectedCarObj&&selectedCarObj.Id==x.Id?'white':'dark'" 
             :color="selectedCarObj&&selectedCarObj.Id==x.Id?'primary':'grey-3'" square>{{ x.CarName }}({{ x.PeopleNum }}人)</q-chip>
           </div>
         </div>
+      </template>
       <div class="text-grey-6 f12 q-my-md">選擇數量</div>
       <div class="row items-end">
         <div class="col" :class="{'column':$q.platform.is.mobile}">
@@ -150,6 +151,8 @@ export default {
         this.p = n;
         if(n&&n.startDate){
           this.chosenObj.startDate = n.startDate;
+          let arr = this.dataAll.filter(x=> x.Date==this.chosenObj.startDate)
+          this.TicketIds = arr[0].Price.map(x=> {return x.TicketId})
           // this.selectedCar = this.dataList.CarTypeList[0].Id
           // this.selectedCarObj = this.dataList.CarTypeList[0]
         }
@@ -178,17 +181,17 @@ export default {
       selectedAirportObj: null,
       onCarObj: null,
       unCarObj: null,
+      TicketIds: null
     };
   },
   created() {
     this.initModel();
-    console.log(this.p,'=======')
     if(this.p.startDate){
       this.chosenObj.startDate = this.p.startDate;
       this.calcMoney()
       this.getCarPriceData2()
     }
-    
+    this.getCarPriceData()
   },
   methods: {
     goOrderHandler(){
@@ -267,6 +270,24 @@ export default {
           
         },null)
     },
+    
+    getCarPriceData() {
+      this.priceList = []
+      this.apipost(
+        "b2c_get_GetCarSingleProductMonthPriceAll",
+        { 
+          ProductId: this.configId, 
+          Month: this.Month,
+          // AirportId: '',
+          // CarTypeId: this.selectedCarObj.Id
+         },
+        (r) => {
+          if (r.data.resultCode == 1) {
+              this.dataAll = r.data.data
+          }
+          
+        },null)
+    },
     handleSelectAirport(item){
       this.selectedAirportObj = item
     },

src/components/goods/style1.vue

+<template>
+  <div class="rounded-borders overflow-hidden q-pb-md" :style="{'width':width,'background-color':bgColor}" v-if="product">
+    <q-img :src="product.ImgCover" spinner-color="white" :ratio="16/9" fit="cover">
+        <div class="absolute-top text-shadow" style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));">
+            {{ formatEnum(product.ProductType) }}
+        </div>
+    </q-img>
+    <div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer"  style="height: 74px;" @click="CommonJump(product,{})">{{ product.Title }}</div>
+    <div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
+        <span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
+        <span class="f12 q-ml-sm">起</span>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import ListProductTypeEnum from 'src/utils/listProductType';
+import EnumHelper from '../../utils/enumhelper'
+export default {
+    props:{
+        product:{
+            type:Object,
+            required:true
+        },
+        width:{
+            type:String,
+            default:"250px"
+        },
+        bgColor:{
+            type:String,
+            default:'#fff'
+        }
+    },
+    data() {
+        return {
+            
+        }
+    },
+    methods: {
+        formatEnum(t){
+            let temp = EnumHelper.ParseToEnum(ListProductTypeEnum,t,'value')
+            return temp.desc
+        }
+    },
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/components/goods/style2.vue

+<template>
+    <!-- <div class="rounded-borders overflow-hidden q-pb-md" :style="{'width':width,'background-color':bgColor}" v-if="product">
+      <q-img :src="product.ImgCover" spinner-color="white" :ratio="16/9" fit="cover" />
+      <div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer">{{ product.Title }}{{ product.Title }}{{ product.Title }}{{ product.Title }}{{ product.Title }}</div>
+      <div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
+          <span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
+          <span class="f12 q-ml-sm">起</span>
+      </div>
+    </div> -->
+    <div class="rounded-borders overflow-hidden" v-if="product">
+       <div class="row" :style="{'background-color':bgColor}" >
+        <q-img :src="product.ImgCover" spinner-color="dark" :ratio="4/3" fit="cover" class=" col-5" >
+            <div class="absolute-top text-shadow" style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));">
+                {{ formatEnum(product.ProductType) }}
+            </div>
+        </q-img>
+        <div class="q-px-md col">
+            <div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height:50px;" @click="CommonJump(product,{})">{{ product.Title }}</div>
+            <div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
+                <span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
+                <span class="f12 q-ml-sm">起</span>
+            </div>
+        </div>
+       </div>
+    </div>
+</template>
+  
+  
+  <script>
+  import ListProductTypeEnum from 'src/utils/listProductType';
+import EnumHelper from '../../utils/enumhelper'
+  export default {
+      props:{
+          product:{
+              type:Object,
+              required:true
+          },
+          width:{
+              type:String,
+              default:"250px"
+          },
+          bgColor:{
+              type:String,
+              default:'#fff'
+          }
+      },
+      methods: {
+        formatEnum(t){
+            let temp = EnumHelper.ParseToEnum(ListProductTypeEnum,t,'value')
+            return temp.desc
+        }
+    },
+  }
+  </script>
+  
+  <style>
+  
+  </style>
\ No newline at end of file

src/components/searchdata/kkday.vue

@@ -733,29 +733,7 @@ this.dayArray = this.dayArray.filter(item => arr.includes(item.id))
 // this.msg.dayNumList = arr;
     },
     GotoDetails(item) {
-      if(item.productType === 4) { // 接送机，包车
-      this.CommonJump(
-        "/detailCar/"+item.configId,
-        {}
-      );
-      return 
-      }else if(item.productType === 3) { // 住宿
-      this.CommonJump(
-        "/detailHotal/"+item.configId,
-        {}
-      );
-      return 
-      }else if(item.productType === 2) { // 景区门票
-      this.CommonJump(
-        "/detailsScenicSpotTicket/"+item.configId,
-        {}
-      );
-      return 
-      }
-      this.CommonJump(
-        "/detail/" + encodeURIComponent(item.id) + "/" + item.tcid + "/" + item.configId,
-        {}
-      );
+      this.CommonJump(item,{});
     },
   },
 };

src/css/app.scss

@@ -24,6 +24,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .flex-noShark {
+    flex-shrink: 0;
+  }
 
   .margin {
       margin: 10px;
@@ -114,6 +117,9 @@
 .f36 {
     font-size: 36px;
 }
+.f42 {
+    font-size: 42px;
+}
 .text-center {
     text-align: center;
 }

src/pages/Pickuporder/orderForm.vue

@@ -423,6 +423,12 @@
           <q-input standout v-model="parameters.Remark" input-style="height:170px;" type="textarea"  placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter />
         </q-card>
         </q-form>
+        <coupon
+          v-if="sumPrice>0&&productType"
+          :product-type="productType"
+          :current-price="sumPrice"
+          @change="changeDiscountHandler"
+        ></coupon>
       </div>
       
       <div class="relative-position" v-if="details"
@@ -510,15 +516,21 @@
               <div class="col">{{CarObj.CarName}} x {{ chosenObj.Count }}</div>
               <div>{{details.CurrencyCode}} {{ moneyFormat(OrderDate.originalB2CPrice,2) }}</div>
             </div>
-            <!-- <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
-            <div class="row q-mb-sm items-center" v-if="(chosenObj.Count)>0">
-              <div class="col">總金額</div>
-              <div class="text-subtitle2 text-weight-bolder text-primary">{{details.CurrencyCode}} {{ moneyFormat(OrderDate.sumPrice,2) }}</div>
-            </div> -->
+            <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
+            <div class="row q-mb-sm items-center">
+                <div class="col">優惠金額</div>
+                <div
+                  class="text-subtitle2 text-weight-bolder text-teal"
+                  v-if="parameters.DiscountsMoney > 0"
+                >
+                  CNY - {{ moneyFormat(parameters.DiscountsMoney, 2) }}
+                </div>
+                <div class="text-grey-5" v-else>暫無優惠</div>
+              </div>
             <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
             <div class="row q-mb-sm items-center" v-if="chosenObj.Count>0">
               <div class="col">支付金額</div>
-              <div class="text-h6 text-weight-bolder text-primary product-price">{{details.CurrencyCode}} {{ moneyFormat(OrderDate.sumPrice,2) }}</div>
+              <div class="text-h6 text-weight-bolder text-primary product-price">{{details.CurrencyCode}} {{ moneyFormat(parameters.Money,2) }}</div>
             </div>
           </div>
           <div class="text-right q-mt-md" v-if="step!=3">
@@ -570,6 +582,9 @@ export default {
   },
   data() {
     return {
+      CouponIds: [],
+      productType: null,
+      sumPrice: 0,//总金额
       order: null,//订单信息
       orderKey: "",
       isShowDialog: false,
@@ -608,6 +623,8 @@ export default {
           Unit_Price: '',//单价
           Num: '',//数量
           Money: 0.0,
+          DiscountsMoney: 0,//优惠金额
+          DiscountsIds: '',//优惠券id
           Sex: 1,//1男2女
           SurName: '',//姓
           Name: '',//名
@@ -661,6 +678,19 @@ export default {
     this.getUserInfoHandler()
   },
   methods: {
+    changeDiscountHandler(coupon) {
+        if (coupon) {
+          this.parameters.DiscountsMoney = coupon.discountMoney;
+          this.CouponIds = [coupon.couponId];
+          this.parameters.DiscountsIds = this.CouponIds.join(",")
+        } else {
+          this.parameters.DiscountsMoney = 0;
+          this.CouponIds = [];
+          this.parameters.DiscountsIds = ''
+        }
+        this.parameters.Money = this.sumPrice - this.parameters.DiscountsMoney
+        this.$forceUpdate();
+      },
     // 获取商品详情
     getCarData() {
       this.$q.loading.show();
@@ -680,6 +710,14 @@ export default {
             }
             this.parameters.CarId = this.OrderDate.CarId
             this.parameters.OrderType = this.details.CarType
+            //13接机 14送机 12包车
+            if(this.parameters.OrderType==1){
+              this.productType = 13
+            }else if(this.parameters.OrderType==2){
+              this.productType = 14
+            }else if(this.parameters.OrderType==3){
+              this.productType = 12
+            }
           } else {
             this.$q.notify({
               type: "negative",
@@ -711,6 +749,7 @@ export default {
               this.parameters.Unit_Price = this.OrderDate.originalB2CPrice
               this.parameters.Num = this.chosenObj.Count
               this.parameters.Money = this.OrderDate.sumPrice
+              this.sumPrice = this.OrderDate.sumPrice
             }
           }
         }
@@ -780,15 +819,7 @@ export default {
       })
     },
     AddOrderInfo(ErpOrderId){
-      let GoodsType = null
-      //13接机 14送机 12包车
-      if(this.parameters.OrderType==1){
-        GoodsType = 13
-      }else if(this.parameters.OrderType==2){
-        GoodsType = 14
-      }else if(this.parameters.OrderType==3){
-        GoodsType = 12
-      }
+      
       this.apipost(
         "AddOrderInfo_post",
         {
@@ -799,10 +830,10 @@ export default {
           GoodsId: this.parameters.ProductId,//商品id
           GoodsName: this.details.Name,//商品名称
           GoodsPic: this.details.ImageList[0],//商品图片
-          GoodsType: GoodsType,//商品类型（见枚举） 12包车 13 接机 14送机
+          GoodsType: this.productType,//商品类型（见枚举） 12包车 13 接机 14送机
           OrderMake: this.parameters.OrderDate,//订单摘要（例如出行时间）
           TotalPrice: this.parameters.Money,//总价格
-          PreferentialPrice: 0,//	优惠总金额
+          PreferentialPrice: this.parameters.DiscountsMoney,//	优惠总金额
           ErpOrderId: ErpOrderId,//erp订单id
           Country: this.userInfo.Country,//国家id
           PlatformTax: 0,//平台税金默认0
@@ -821,22 +852,14 @@ export default {
       })
     },
     goPayHandler(pay){
-      let key = this.$md5(JSON.stringify(pay))
-      let pays = localStorage.getItem('pays')
-      pays = pays?JSON.parse(pays):[]
-      pays.push({
-        key,
-        pay
-      })
-      localStorage.setItem("pays",JSON.stringify(pays))
-      let pickuporderCars = localStorage.getItem('pickuporderCars')
-      pickuporderCars = pickuporderCars?JSON.parse(pickuporderCars):[]
-      let i = pickuporderCars.findIndex(x=>x.key==this.orderKey)
-      if(i>=0){
-        pickuporderCars.splice(i,1)
-        localStorage.setItem("pickuporderCars",JSON.stringify(pickuporderCars))
+      let pickuporderCars = localStorage.getItem("pickuporderCars");
+      pickuporderCars = pickuporderCars ? JSON.parse(pickuporderCars) : [];
+      let i = pickuporderCars.findIndex((x) => x.key == this.orderKey);
+      if (i >= 0) {
+        pickuporderCars.splice(i, 1);
+        localStorage.setItem("pickuporderCars", JSON.stringify(pickuporderCars));
       }
-      this.CommonJump('/pay/'+key, {});
+      this.CommonJump("/pay/" + pay.OrderNo, {});
     },
     // 航班起飞抵达时间
     getTime(type){

src/pages/ScenicSpotTicket/details.vue

@@ -920,13 +920,14 @@ export default {
             let arr = []
             r.data.data.forEach(x=>{
               x.PriceList = x.PriceList.sort((a,b)=>{return a.Price-b.Price})
+              let MailingMoneyList = x.PriceList.sort((a,b)=>{return b.MailingMoney-a.MailingMoney})
               let dataObj = {
                   startDate: x.Date,
                   originalB2CPrice: x.PriceList[0].Price,
                   remainNum: 1,
                   Count: 1,
                   safeMoney: 0,
-                  MailingMoney: x.PriceList[0].MailingMoney,
+                  MailingMoney: MailingMoneyList[0].MailingMoney,
                   PriceList: x.PriceList,
                 }
                 if(date.formatDate(Date.now(), 'YYYY-MM-DD')!=x.Date&&x.Date>date.formatDate(Date.now(), 'YYYY-MM-DD')){

src/pages/ScenicSpotTicket/orderForm.vue

@@ -170,6 +170,15 @@
                       <div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
                       </template>
                   </q-input>
+              </div>
+              <div :class="filedGuestWidth">
+                <q-input
+                    standout
+                    v-model="parameters.MailingAddress"
+                    label="郵寄地址"
+                    :rules="[(val) => !!val || '請輸郵寄地址']"
+                    ref="MailingAddress"
+                ></q-input>
             </div>
               <div :class="filedGuestWidth">
                   <div class="row items-center q-mt-md">
@@ -270,11 +279,15 @@
                   </template>
                 </div>
               </template>
-              <div class="row q-mb-sm" v-if="parameters.MailingState==2&&parameters.MailingMoney>0">
-                  <div class="col text-grey-6">邮寄费</div>
-                  <div class="text-red">{{ moneyFormat(parameters.MailingMoney,2) }}</div>
-              </div>
               <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
+              <div class="row q-mb-sm items-center" v-if="parameters.MailingState==2&&parameters.MailingMoney>0">
+                <div class="col">邮寄费</div>
+                <div
+                  class="text-subtitle2 text-weight-bolder text-grey-6"
+                >
+                  CNY  {{ moneyFormat(parameters.MailingMoney,2) }}
+                </div>
+              </div>
               <div class="row q-mb-sm items-center">
                 <div class="col">優惠金額</div>
                 <div
@@ -362,7 +375,7 @@
             OrderId: 0,
             Money: 0.0,
             DiscountsMoney: 0,//优惠金额
-            CouponAllotIds: '',
+            DiscountsIds: '',//优惠券id
             Remark: '',
             MailingState: '',//邮寄状态 1自取 2邮寄
             MailingAddress: '',//MailingState =2 填写邮寄
@@ -409,11 +422,11 @@
         if (coupon) {
           this.parameters.DiscountsMoney = coupon.discountMoney;
           this.CouponIds = [coupon.couponId];
-          this.parameters.CouponAllotIds = this.CouponIds.join(",")
+          this.parameters.DiscountsIds = this.CouponIds.join(",")
         } else {
           this.parameters.DiscountsMoney = 0;
           this.CouponIds = [];
-          this.parameters.CouponAllotIds = ''
+          this.parameters.DiscountsIds = ''
         }
         this.parameters.Money = this.sumPrice - this.parameters.DiscountsMoney
         this.$forceUpdate();
@@ -497,6 +510,12 @@
         this.$refs.SurName.validate()
         this.$refs.Name.validate()
         this.$refs.Mobile.validate()
+        if(this.parameters.MailingState==2){
+          this.$refs.MailingAddress.validate()
+        }else{
+          this.parameters.MailingAddress = ''
+        }
+        
         console.log(this.parameters,'----')
         let flag = true
         flag = await this.formValidateHandler('baseUserInfo')

src/pages/city/cityDetail.vue

@@ -76,13 +76,40 @@
   top: 20px;
   left: 20px;
   font-weight: bold;
-  font-size: 30px;
+  font-size: 44px;
   color: #fff;
+  text-shadow: rgb(0 0 0 / 50%) 2px 2px 5px;
+}
+@keyframes icon-bounce {
+  0% {
+    transform: translateY(0) scale(1.15,.5);
+  }
+  20% {
+    transform: translateY(-20px) scaleY(1.1);
+  }
+  50% {
+    transform: translateY(-5px) scale(1);
+  }
+  80% {
+    transform: translateY(-10px) scale(1);
+  }
+  100% {
+    transform: translateY(0) scale(1.15,.8);
+  }
+}
+.desktop-navs{
+  width:100px;
+}
+.desktop-navs:hover img {
+  animation-name: icon-bounce;
+  animation-duration: 1s;
+  animation-timing-function: ease-in;
+  animation-iteration-count: infinite;
 }
 </style>
 <template>
-  <div class="back">
-    <div v-if="detail" class="wapper">
+  <div class="content-page" >
+    <div v-if="detail" :class="{'q-mx-md':$q.platform.is.mobile}">
       <div class="row items-center q-pt-md q-mb-lg">
         <q-breadcrumbs
           class="col f12 no-wrap q-mr-md"
@@ -99,42 +126,102 @@
         <!-- <div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div> -->
       </div>
 
-      <div class="flex relative">
-        <div class="absolute name">{{detail.AreaName}}</div>
-        <img
-          class="main"
-          :src="detail.ImageList[0]"
-        />
-        <div class="card-img-box">
+      <div class="relative row" :style="{'height':$q.platform.is.mobile?'200px':'370px'}">
+        <div class="absolute name" style="z-index: 1;">{{detail.AreaName}}</div>
+        <q-img :src="detail.ImageList[0]" spinner-color="dark" class="col rounded-borders full-height" />
+        <q-img :src="detail.ImageList[1]" v-if="detail.ImageList.length>1" spinner-color="dark" style="width:260px" class="full-height desktop-only rounded-borders q-ml-md" />
+        <div class="absolute q-py-sm q-px-md row items-center bg-dark text-white rounded-borders cursor-pointer" style="bottom:20px;left: 20px;">
+          <q-icon name="iconfont iconzhinanzhen" size="16px"></q-icon>
+          <span class="q-ml-sm">訪前須知</span>
+        </div>
+        <div class="absolute q-py-sm q-px-md row items-center bg-dark text-white rounded-borders cursor-pointer" style="bottom:20px;right: 20px;" @click="showPreview(detail.ImageList,0)">
+          <q-icon name="iconfont iconimage" size="16px"></q-icon>
+          <span class="q-ml-sm">查看照片</span>
+        </div>
+        <!-- <div class="card-img-box">
           <img
             class="card-img q-mb-xs"
             :src="detail.ImageList[1] || detail.ImageList[0]"
           />
           <div class="card-img" id="map"></div>
+        </div> -->
       </div>
+
+      <div class="q-mt-md row justify-center">
+        <div class="bg-white row rounded-borders light-shadow" :class="{'q-pa-lg':$q.platform.is.desktop,'col-12 q-px-md q-pa-md':$q.platform.is.mobile}" style="max-width:100%">
+          <div class="text-center cursor-pointer" :class="{'desktop-navs ':$q.platform.is.desktop,'col-3  q-mb-md':$q.platform.is.mobile}" v-for="item in navList" :key="item.img" @click="navClick(item)">
+            <img width="30" height="30" :src="require(`../../assets/img/${item.img}.png`)" />
+            <div class="f12" :class="{'q-mt-md ':$q.platform.is.desktop,'q-mt-sm':$q.platform.is.mobile}">{{ item.title }}</div>
           </div>
+        </div>
+        <!-- <div v-for="item in navList" :key="item.img" class="nav-item" @click="navClick(item)">
           
-      <div class="flex justify-between q-mt-sm">
-        <div v-for="item in navList" :key="item.img" class="nav-item" @click="navClick(item)">
           <img
             class="nav-img"
             :src="require(`../../assets/img/${item.img}.png`)"
           />
           <div class="f16 bold text-center">{{ item.title }}</div>
+        </div> -->
       </div>
-      </div>
+      <div v-if="detail.TopList.length>0">
         <div class="top-title">TOP榜单</div>
         <div>本地销量最好的商品</div>
-      <div class="mt" style="width: 1200px; overflow-x: auto;">
-        <div style="width: 2920px">
-        <topCard @click.native="navToDetail(item)" v-for="item in detail.TopList" :data="item" :key="item.ID" /></div>
+        
+        <q-carousel
+          v-model="hotSilder"
+          transition-prev="slide-right"
+          transition-next="slide-left"
+          swipeable
+          animated
+          control-color="dark"
+          control-type="regular"
+          padding
+          arrows
+          height="300px"
+          flat
+          class="bg-transparent rounded-borders q-mt-md"
+      >
+        <q-carousel-slide :name="index" v-for="(item, index) in Math.ceil(detail.TopList.length/topPageCount)" :key="index" class="column no-wrap">
+          <div class="row fit justify-start items-center q-gutter-md q-col-gutter no-wrap">
+            <template v-for="(x,i) in topPageCount">
+              <goods-style1 v-if="(i+(index*topPageCount))<detail.TopList.length" :product="detail.TopList[i+(index*topPageCount)]" :key="detail.TopList[i+(index*topPageCount)].ConfigId" :class="{'col-3':topPageCount==4,'col-12':topPageCount==1}" ></goods-style1>
+            </template>
+          </div>
+        </q-carousel-slide>
+        </q-carousel>
       </div>
       <div class="top-title">最新推荐</div>
       <div>已售出商品的最新榜單</div>
-      <div class="flex justify-between flex-wrap mt">
+      <!-- <div class="flex justify-between flex-wrap mt">
         <likeCard @click.native="navToDetail(item)" v-for="item in detail.NewList" :data="item" :key="item.ID" />
+      </div> -->
+      <q-carousel
+          v-model="newSilder"
+          transition-prev="slide-right"
+          transition-next="slide-left"
+          swipeable
+          animated
+          control-color="dark"
+          control-type="regular"
+          padding
+          arrows
+          height="400px"
+          flat
+          class="bg-transparent rounded-borders q-mt-md desktop-only"
+      >
+        <q-carousel-slide :name="index" v-for="(item, index) in Math.ceil(detail.NewList.length/4)" :key="index"  class="column no-wrap">
+          <div class="row">
+            <template v-for="(x,i) in 4">
+              <goods-style2 v-if="(i+(index*4))<detail.NewList.length" :product="detail.NewList[i+(index*4)]" :key="detail.NewList[i+(index*4)].ConfigId" class="q-pr-md col-6  q-mb-md"></goods-style2>
+            </template>
+          </div>
+        </q-carousel-slide>
+        </q-carousel>
+      <div class="mobile-only q-mt-md">
+        <goods-style2 :product="x" :key="i" class="q-pr-md col-6  q-mb-md" v-for="(x,i) in detail.NewList"></goods-style2>
       </div>
-      <div class="top-title">關於{{detail.AreaName}}</div>
+      <city-info :city="detail"></city-info>
+      <!-- <div class="top-title">關於{{detail.AreaName}}</div>
       <div class="flex justify-between">
         <div style="width: 720px">
           {{detail.Introduction}}
@@ -143,14 +230,7 @@
           <div id="baidu-map"></div>
         </div>
       </div>
-      <!-- <div class="top-title">當地天氣</div> -->
       <div class="mt pt">
-        <!-- <div class="flex">
-          <div class="time-item" v-for="item in 4" :key="item">
-            <div class="f16">12月-2月</div>
-            <div class="f26 bold">-12° -17°</div>
-          </div>
-        </div> -->
         <div class="flex mt">
           <div class="flex items-center time-item">
             <img
@@ -159,7 +239,6 @@
             />
             <div>
               <div class="f16 bold">時區 {{detail.TimeZones}}</div>
-              <!-- <div>-12° -17°</div> -->
             </div>
           </div>
           <div class="flex items-center time-item">
@@ -169,7 +248,6 @@
             />
             <div>
               <div class="f16 bold">貨幣 {{detail.CurrencyName}}</div>
-              <!-- <div>-12° -17°</div> -->
             </div>
           </div>
           <div class="flex items-center time-item">
@@ -179,7 +257,6 @@
             />
             <div>
               <div class="f16 bold">電壓 {{detail.Voltage}}</div>
-              <!-- <div>-12° -17°</div> -->
             </div>
           </div>
           <div class="flex time-item">
@@ -195,7 +272,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
       <nearCity :name="detail.AreaName" :cityList="detail.AdjacentCityList" />
       <q-dialog  v-model="show">
         <div style="width: 900px;">
@@ -209,12 +286,19 @@
 import topCard from "./components/top-card.vue";
 import likeCard from "./components/like-card.vue";
 import nearCity from "./components/near-city.vue";
+import goodsStyle1 from '../../components/goods/style1.vue';
+import goodsStyle2 from '../../components/goods/style2.vue';
+import cityInfo from "./components/city-info.vue";
 export default {
-  components: { topCard, likeCard, nearCity },
+  components: { topCard, likeCard, nearCity,goodsStyle1,goodsStyle2,cityInfo },
   data() {
     return {
       show: false,
       detail: null,
+      hotSilder:0,
+      newSilder:0,
+      topPageCount:4,
+      newPageCount:2,
       navList: [
         {
           title: "观光行程",
@@ -236,6 +320,10 @@ export default {
     };
   },
   mounted() {
+    if(this.$q.platform.is.mobile){
+      this.topPageCount=1
+      this.newPageCount=2
+    }
     this.getData();
     var newStartDate = new Date();
     var newStartDateStr = this.formatDate(
@@ -283,12 +371,12 @@ export default {
       );
     },
     createMap() {
-      let map = new BMapGL.Map("baidu-map"); // 创建地图实例
-      this.map = map;
-      let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
-      map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
-            this.addMarker();
-            this.addLabel()
+      // let map = new BMapGL.Map("baidu-map"); // 创建地图实例
+      // this.map = map;
+      // let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
+      // map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
+      //       this.addMarker();
+      //       this.addLabel()
     },
     addMarker() {
       let icon = require(`../../assets/img/marker.png`);
@@ -330,12 +418,12 @@ export default {
       });
     },
     createTopMap() {
-      let map = new BMapGL.Map("map"); // 创建地图实例
-      this.topMap = map;
-      let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
-      map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
-      this.addTopMarker()
-      this.addTopLabel()
+      // let map = new BMapGL.Map("map"); // 创建地图实例
+      // this.topMap = map;
+      // let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
+      // map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
+      // this.addTopMarker()
+      // this.addTopLabel()
     },
     addTopMarker() {
       let icon = require(`../../assets/img/marker.png`);
@@ -385,7 +473,15 @@ export default {
       map.centerAndZoom(pointA, 11); // 初始化地图，设置中心点坐标和地图级别
       map.enableScrollWheelZoom()
       })
-    }
+    },
+    showPreview(images, index = 0) {
+      this.$viewerApi({
+        options: {
+          initialViewIndex: index,
+        },
+        images,
+      });
+    },
   },
 };
 </script>
\ No newline at end of file

src/pages/city/components/city-info.vue

+<template>
+  <div class="q-mt-lg">
+    <div class="top-title">{{ cityInfo.AreaName }}旅遊指南</div>
+    <div class="q-mt-md rounded-borders q-pa-lg bg-white light-shadow">
+        <div class="text-h6 text-weight-bold">關於{{ cityInfo.AreaName }}</div>
+        <div class="q-my-md f12 text-grey-9" v-html="cityInfo.Introduction"></div>
+        <q-separator class="q-my-xl" color="grey-2" />
+        <div class="text-h6 q-my-md text-weight-bold">實用訊息</div>
+        <div class="q-mt-md" :class="{'row justify-between q-mr-lg':$q.platform.is.desktop,'column q-gutter-md':$q.platform.is.mobile}">
+            <div>
+                <div class="f12 text-grey-9">時區：</div>
+                <div class="q-my-md text-subtitle1">{{ cityInfo.TimeZones }}</div>
+                <div class="text-body2 text-grey-6">出行注意時差，安排好休息時間哦</div>
+            </div>
+            <div>
+                <div class="f12 text-grey-9">貨幣：</div>
+                <div class="q-my-md text-subtitle1">{{ cityInfo.CurrencyName }}</div>
+                <div class="text-body2 text-grey-6">建議您出行錢準備充足的當地貨幣</div>
+            </div>
+            <div>
+                <div class="f12 text-grey-9">电压：</div>
+                <div class="q-my-md text-subtitle1">{{ cityInfo.Voltage }}</div>
+            </div>
+            <div>
+                <div class="f12 text-grey-9">最佳出行月份</div>
+                <div class="q-mt-md" v-for="(x,i) in cityInfo.BestTravelTimeList" :key="i">
+                    <div class="q-mb-sm text-subtitle1">{{ x.Month }}</div>
+                    <div class="text-body2 text-grey-6">{{ x.Description }}</div>
+                </div>
+                
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props:['city'],
+    data() {
+        return {
+            cityInfo:{}
+        }
+    },
+    created() {
+        this.cityInfo = this.city
+        this.cityInfo.Introduction=this.cityInfo.Introduction.replace(/\n/g,"<br>")
+    },
+}
+</script>
+
+<style>
+.top-title {
+    font-size: 26px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 44px;
+  }
+</style>
\ No newline at end of file

src/pages/city/components/near-city.vue

@@ -37,7 +37,11 @@
 <template>
   <div>
     <div class="title">附近的城市</div>
-    <div class="flex">
+    <q-scroll-area
+      :thumb-style="thumbStyle"
+      style="height: 290px;width100%;"
+    >
+        <div class="row no-wrap">
           <div
           @click="navToSearch(item)"
           class="relative card"
@@ -46,11 +50,13 @@
         >
           <img class="card-img" :src="item.ImageList[0]" />
           <div class="info">
-          <div>{{ item.AreaName }}</div>
+            <div class="text-subtitle1 text-weight-bold text-shadow">{{ item.AreaName }}</div>
             <!-- <div>10Km</div> -->
           </div>
         </div>
         </div>
+      
+    </q-scroll-area>
     <div class="flex flex-center">
       <q-btn
         @click="navToSearch()"
@@ -72,7 +78,15 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      thumbStyle: {
+        right: '2px',
+        borderRadius: '2px',
+        backgroundColor: '#027be3',
+        width: '2px',
+        opacity: '0'
+      }
+    };
   },
   methods: {
     navToSearch(item) {

src/pages/city/components/top-card.vue

@@ -19,8 +19,8 @@
 }
 .card-img {
   width: 272px;
-height: 162px;
-border-radius: 10px;
+  height: 162px;
+  border-radius: 10px;
 }
 .title {
   margin-top: 17px;
@@ -40,7 +40,7 @@ color: #36A1FA;
 </style>
 <template>
   <div class="card">
-    <div class="relative">
+    <!-- <div class="relative">
       <div class="address">
         <i
           class="iconfont icondingweixiao q-icon notranslate"
@@ -58,7 +58,8 @@ color: #36A1FA;
         class="card-img"
         :src="data.ImgCover"
       />
-    </div>
+    </div> -->
+
     <div class="title ellipsis-2">{{data.Title}}</div>
     <!-- <div>
       <i

src/pages/pay/pay.vue

@@ -155,9 +155,9 @@ export default {
     },
     goHomeHandler(){
       this.loading=false
-      // setTimeout(() => {
-      //     location.href = location.origin;
-      //   }, 3000);
+      setTimeout(() => {
+          location.href = location.origin;
+        }, 3000);
     },
     cancelPayHandler(){
       this.showPay=''

src/pages/pay/paysuccess.vue

@@ -131,9 +131,9 @@ export default {
         },
         goHomeHandler() {
             this.loading = false
-            // setTimeout(() => {
-            //     location.href = location.origin;
-            //   }, 3000);
+            setTimeout(() => {
+                location.href = location.origin;
+              }, 3000);
         }
     },
 }

src/pages/usercenter/mobileUserCenter.vue

 <style lang="scss" scoped>
 .avatar {
-  width: 94px;
-  height: 94px;
+  width: 60px;
+  height: 60px;
   background: #ffffff;
   border: 2px solid #f0efef;
   border-radius: 50%;
@@ -9,52 +9,129 @@
   display: block;
 }
 .nav-item {
-  margin: 10px 28px;
+  margin:0 10px;
   padding: 10px;
+  border-bottom: 1px solid #eee;
+}
+.nav-item:last-child {
+  border-bottom: none;
 }
 .select {
-height: 41px;
-border-radius: 8px;
-color: #ffffff;
+  height: 41px;
+  border-radius: 8px;
+  color: #ffffff;
+}
+.action-item {
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  margin-left: 10px;
+}
+.edit-info {
+  width: 12px;
+  height: 12px;
+}
+.padding-20 {
+  padding: 20px;
+}
+.card {
+  margin: 25px 15px;
+  border-radius: 15px;
+  padding: 10px;
+}
+.order-item {
+  width: 25%;
+  display: inline-block;
+}
+.order-img {
+  width: 26px;
+  height: 26px;
+}
+.go-play {
+  width: 36px;
+  height: 36px;
+}
+.play-box {
+padding: 8px;
+background: #FAF9F9;
+border-radius: 9px;
+margin: 10px 13px 0 13px;
 }
 </style>
 <template>
   <div class="user-nav-box">
-    <div class="flex justify-between">
-      <span class="f42">个人中心</span>
+    <div class="padding-20">
+      <div class="flex justify-between items-center">
+        <span class="f20">个人中心</span>
+        <div>
+          <img class="action-item" src="../../assets/img/userCenter/help.png" />
+          <img @click="CommonJump('/setInfo')" class="action-item" src="../../assets/img/userCenter/set.png" />
+        </div>
+      </div>
+      <div class="flex items-center q-mt-md">
         <div>
-      <img />
-      <img /></div>
+          <img class="avatar" v-if="LoginUser.photo" :src="LoginUser.photo" />
+          <img class="avatar" v-else src="../../assets/img/avatar.png" />
+        </div>
+        <div class="q-ml-md">
+          <div class="f18">hello，开起你的旅程吧~</div>
+          <div @click="CommonJump('/setUserInfo')">
+            <img class="edit-info" src="../../assets/img/userCenter/edit.png" />
+            個人信息管理
+          </div>
+        </div>
+      </div>
+    </div>
+      <div class="bg-white  card">
+        <div
+          class="order-item cursor-pointer"
+          @click="navigateTo(item.key)"
+          v-for="item in orderList"
+          :key="item.key"
+          :class="{ 'select bg-primary': selectKey === item.key }"
+        >
+          <div class="column flex-center">
+            <img class="order-img" :src="require(`../../assets/img/userCenter/${item.icon}.png`)" />
+            <div>{{ item.label }}</div>
+          </div>
+          <!-- <span class="text-primary">{{ item.label }}</span> -->
+        </div>
+        
+        <div class="flex play-box q-mt-md">
+            <img class="go-play q-mr-md" src="../../assets/img/userCenter/set.png" />
+            <div class="f12">
+              <div>即將出行</div>
+              <div class="text-grey-6">[2023年3月6日]日本富士山尊享一日遊</div>
             </div>
-    <div class="q-mt-lg">
-      <div class="bg-white q-mt-xl q-pb-lg">
+        </div>
+      </div>
+      <div class="bg-white card">
         <div
           class="nav-item flex justify-between items-center cursor-pointer"
           @click="navigateTo(item.key)"
           v-for="item in menuList"
           :key="item.key"
-        :class="{'select bg-primary': selectKey === item.key}"
         >
           <div class="flex items-center">
             <i class="iconfont" :class="item.icon"></i>
             <span class="q-ml-lg">{{ item.label }}</span>
           </div>
+        <i class="iconfont iconpreviewright"></i>
           <!-- <span class="text-primary">{{ item.label }}</span> -->
         </div>
       </div>
-    </div>
-    <div class="bg-white q-mt-lg q-py-lg">
+    <div class="bg-white card">
       <div
         class="nav-item flex justify-between items-center cursor-pointer"
         @click="navigateTo(item.key)"
         v-for="item in menuList2"
         :key="item.key"
-        :class="{'select bg-primary': selectKey === item.key}"
       >
         <div class="flex items-center">
           <i class="iconfont" :class="item.icon"></i>
           <span class="q-ml-lg">{{ item.label }}</span>
         </div>
+        <i class="iconfont iconpreviewright"></i>
         <!-- <span class="text-primary">{{item.label}}</span> -->
       </div>
     </div>
@@ -64,8 +141,34 @@ color: #ffffff;
 export default {
   data() {
     return {
-      selectKey: '',
+      selectKey: "",
       LoginUser: {},
+      orderList: [
+        {
+          icon: "order-pay",
+          key: "/order?type=1",
+          label: "待付款",
+          number: "",
+        },
+        {
+          icon: "order-use",
+          key: "/order?type=2",
+          label: "待出行",
+          number: "",
+        },
+        {
+          icon: "order-finish",
+          key: "/order?type=3",
+          label: "已完成",
+          number: "",
+        },
+        {
+          icon: "order-all",
+          key: "/order?type=0",
+          label: "全部订单",
+          number: "",
+        },
+      ],
       menuList: [
         {
           icon: "iconqianbao",
@@ -73,12 +176,6 @@ export default {
           label: "可用優惠券",
           number: "",
         },
-        {
-          icon: "iconorder",
-          key: "/order",
-          label: "訂單",
-          number: "",
-        },
         // {
         //   icon: "iconmessage",
         //   key: "",
@@ -111,24 +208,24 @@ export default {
           label: "登录方式管理",
           number: "",
         },
-        {
-          icon: "iconset",
-          key: "/setInfo",
-          label: "账户设置",
-          number: "",
-        },
+        // {
+        //   icon: "iconset",
+        //   key: "/setInfo",
+        //   label: "账户设置",
+        //   number: "",
+        // },
       ],
     };
   },
   mounted() {
-    this.selectKey = this.$route.path
+    this.selectKey = this.$route.path;
     if (localStorage.b2bUser) {
       this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
     }
   },
   methods: {
     navigateTo(route) {
-      this.selectKey= route
+      this.selectKey = route;
       this.CommonJump(route, {});
     },
   },

src/pages/usercenter/order.vue

 <style lang="scss" scoped>
 .form-item {
   max-width: 320px;
-  margin: 10px;
 }
 .content {
   width: 900px;
@@ -72,8 +71,8 @@
   width: 120px;
 }
 .nav-item {
-  width: 100px;
-  margin: 0 10px;
+  width: 25%;
+  max-width: 100px;
   text-align: center;
 }
 .border-bottom {
@@ -89,11 +88,10 @@
 }
 </style>
 <template>
-  <div class="content q-ma-lg bg-white">
-    <div class="flex justify-between">
-      <div>
+  <div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
+    <div class="flex justify-between margin">
+      <div :class="$q.platform.is.desktop ? 'form-item': 'full-width'">
         <q-input
-          class="form-item"
           placeholder="輸入商品名稱/訂單號"
           v-model="GoodsName"
           clearable
@@ -112,7 +110,8 @@
         <div :class="orderStatus === item.ID ? 'border-bottom' : ''"></div>
       </div>
     </div>
-    <div>
+    <!-- pc -->
+    <div v-if="$q.platform.is.desktop">
       <div class="card" v-for="item in orderList" :key="item.id">
         <div class="flex card-title justify-between">
           <div class="flex">
@@ -159,9 +158,53 @@
           </div>
         </div>
       </div>
-      <noneData v-show="!orderList.length"></noneData>
+    </div>
+    <!-- mobile -->
+    <div v-else>
+      <div class="card" v-for="item in orderList" :key="item.id">
+        <div class="flex card-title justify-between">
+          <div class="flex">
+            <span><span class="text-grey-6">订单号:</span>{{ item.orderNo }}</span>
+          </div>
+          <span class="text-grey-6">{{ item.orderStatusStr }}</span>
+        </div>
+        <div class="q-pa-md">
+          <div class="flex no-wrap full-width">
+            <img class="product-img mr flex-noShark" :src="item.goodsPic" />
+            <div>
+              <div class="ellipsis-2">{{ item.goodsName }}</div>
+              <div>x1</div>
+            </div>
+          </div>
+          <div>
+            <!-- <div>
+              <i class="iconfont iconpeople1"></i>{{ item.surName
+              }} {{ item.name }}
+            </div> -->
+            <div>
+              <div class="f18 text-right">CNY{{ item.totalPrice }}</div>
+              <!-- <div>{{ item.payTypeStr }}</div> -->
+            </div>
+            <!-- <div>
+              <div class="primary">{{item.orderStatusStr}}</div>
+              <div class="q-mt-sm cursor-pointer">订单详情</div>
+            </div> -->
+            <div class="flex justify-end q-mt-sm">
+              <q-btn 
+                color="primary"
+                @click="cancalOrder(item)"
+                unelevated
+                outline
+                size="sm"
+                label="取消订单">
+                </q-btn>
+            </div>
+          </div>
         </div>
       </div>
+    </div>
+      <noneData v-show="!orderList.length"></noneData>
+  </div>
 </template>
 
 <script>
@@ -181,6 +224,10 @@ export default {
     };
   },
   mounted() {
+    this.type = this.$route.query.type
+    if(this.type) {
+      this.orderStatus = Number(this.type)
+    }
     this.getOrderEnums();
     this.getOrderList();
   },

src/pages/usercenter/setAddress.vue

@@ -125,9 +125,27 @@
                   :rules="[(val) => !!val || '请输入全名']"
                 ></q-input>
               </div>
+              <div class="col">
+                <div class="title">國家/地區</div>
+                <q-select
+                  @input="changeCountry"
+                emit-value
+                map-options
+                  ref="CountryId"
+                  square
+                  outlined
+                  option-value="ID"
+                  option-label="Name"
+                  class="form-item"
+                  v-model="form.CountryId"
+                  :options="countList"
+                  placeholder="Filled"
+                  :rules="[(val) => Boolean(val) || '请选择國家/地區']"
+                />
+              </div>
             </div>
             <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
-              <div class="col">
+              <!-- <div class="col">
                 <div class="title">選擇手機區號</div>
                 <q-select
                   ref="AreaCode"
@@ -143,7 +161,7 @@
                   placeholder="選擇手機區號"
                   :rules="[(val) => Boolean(val) || '请選擇手機區號']"
                 />
-              </div>
+              </div> -->
               <div class="col">
                 <div class="title">手機號碼</div>
                 <q-input
@@ -153,27 +171,12 @@
                   v-model="form.Mobile"
                   outlined
                   :rules="[(val) => !!val || '请输入手機號碼']"
-                ></q-input>
-              </div>
+                >
+                  <template v-slot:prepend>
+                    <div class="text-subtitle2">
+                      {{ form.PhoneCountryStr }}
                     </div>
-
-            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
-              <div class="col">
-                <div class="title">國家/地區</div>
-                <q-select
-                emit-value
-                map-options
-                  ref="CountryId"
-                  square
-                  outlined
-                  option-value="ID"
-                  option-label="Name"
-                  class="form-item"
-                  v-model="form.CountryId"
-                  :options="countList"
-                  placeholder="Filled"
-                  :rules="[(val) => Boolean(val) || '请选择國家/地區']"
-                />
+                  </template></q-input>
               </div>
               <div class="col">
                 <div class="title">城市</div>
@@ -253,12 +256,6 @@ export default {
     this.getCountryInfo();
   },
   methods: {
-    addAddress() {
-      this.isShowDialog = true
-      this.form = {
-        Name: "",
-        Mobile: "",}
-    },
     getCountryInfo() {
       this.apipost(
         "GetCountryInfo_post",
@@ -268,6 +265,17 @@ export default {
             const { phoneCountList, countList } = res.data.data;
             this.countList = countList;
             this.phoneCountList = phoneCountList;
+            this.form.CountryId = this.countList[0].ID;
+            this.changeCountry(this.form.CountryId);
+            this.phoneCountList.forEach((x) => {
+              let temp = this.countList.find((y) => y.ID == x.ID);
+              x.EnName = `${temp.EnName}(${x.PhoneCode})`;
+            });
+            this.form.CountryId =
+              this.form.CountryId == 0
+                ? this.countList[0].ID
+                : this.form.CountryId;
+            this.changeCountry(this.form.CountryId);
           } else {
             // this.$notify(res.data.message);
             this.$q.notify({
@@ -281,6 +289,18 @@ export default {
         null
       );
     },
+    changeCountry(id) {
+      this.form.AreaCode = this.phoneCountList.find(
+        (x) => x.ID == id
+      ).PhoneCode;
+      this.form.PhoneCountryStr = "+" + this.form.AreaCode;
+    },
+    addAddress() {
+      this.isShowDialog = true
+      this.form = {
+        Name: "",
+        Mobile: "",}
+    },
     changeCouponType(item) {
       this.selectedKey = item;
     },
@@ -288,7 +308,6 @@ export default {
       this.formHasError = false;
       const verifyArr = [
         "Name",
-        "AreaCode",
         "Mobile",
         "CountryId",
         "CityName",
@@ -296,17 +315,13 @@ export default {
         "PostalCode",
       ];
       verifyArr.forEach((item) => {
-        console.log("this.$refs[item]", this, item, this.$refs[item]);
         this.$refs[item].validate();
       });
       verifyArr.forEach((item) => {
-        console.log("item", item);
         if (this.$refs[item].hasError) {
-          console.log("item", item);
           this.formHasError = true;
         }
       });
-      console.log("this.formHasError", this.formHasError, this.form);
       if (this.formHasError) {
         return;
       }
@@ -335,7 +350,6 @@ export default {
       );
     },
     editUser(item) {
-      console.log("editUser", item);
       this.form = {...item};
       this.form.AreaCode = Number(this.form.AreaCode)
       this.form.IsDefault = this.form.IsDefault === 1

src/pages/usercenter/setUserInfo.vue

@@ -7,11 +7,10 @@
   max-width: 940px;
 }
 .tips {
-  height: 42px;
   background: #f5f5f5;
   border-radius: 8px;
-  padding: 0 35px;
-  line-height: 42px;
+  padding: 10px 35px;
+  line-height: 22px;
 }
 ::v-deep .q-field__control {
   height: 40px;
@@ -28,11 +27,16 @@
 .title {
   margin-top: 20px;
   margin-bottom: 10px;
+  margin-left: 10px;
 }
 </style>
 <template>
-  <div class="content q-ma-lg bg-white q-pa-lg">
-    <div class="tips">
+  <div
+    class="bg-white"
+    :class="$q.platform.is.desktop ? 'content q-ma-lg' : 'full-width'"
+  >
+    <div class="q-ma-lg">
+      <div class="tips q-mb-lg">
         個人信息<span class="text-grey-6"
           >(以下信息仅用于帮助你在支付时自动填写你的个人资料，你的信息将会安全地被印象保存且不会公开)</span
         >
@@ -40,7 +44,7 @@
       <div>
         <form @submit.prevent.stop="submit" class="q-gutter-md">
           <div>
-        <div class="row">
+            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
               <div class="col">
                 <div class="title">姓</div>
                 <q-input
@@ -62,7 +66,7 @@
                 ></q-input>
               </div>
             </div>
-        <div class="row">
+            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
               <div class="col">
                 <div class="title">姓氏（需與旅遊證件一致）</div>
                 <q-input
@@ -84,10 +88,11 @@
                 ></q-input>
               </div>
             </div>
-        <div class="row">
+            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
               <div class="col">
                 <div class="title">居住國家/地區</div>
                 <q-select
+                  @input="changeCountry"
                   emit-value
                   map-options
                   ref="Country"
@@ -119,8 +124,8 @@
               </div>
             </div>
 
-        <div class="row">
-          <div class="col">
+            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
+              <!-- <div class="col">
             <div class="title">國家/地區代碼</div>
             <q-select
                 emit-value
@@ -135,7 +140,7 @@
               :options="phoneCountList"
               :rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
             />
-          </div>
+          </div> -->
               <div class="col">
                 <div class="title">電話（首次需驗證）</div>
                 <q-input
@@ -144,10 +149,14 @@
                   v-model="form.Moblie"
                   outlined
                   :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
-            ></q-input>
+                >
+                  <template v-slot:prepend>
+                    <div class="text-subtitle2">
+                      {{ form.PhoneCountryStr }}
                     </div>
+                  </template></q-input
+                >
               </div>
-        <div class="row">
               <div class="col">
                 <div class="title">出生日期</div>
                 <q-input
@@ -173,6 +182,8 @@
                   </template>
                 </q-input>
               </div>
+            </div>
+            <div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
               <div class="col">
                 <div class="title">電子郵件（接收订单确认邮件）</div>
                 <q-input
@@ -180,7 +191,9 @@
                   class="form-item"
                   v-model="form.Mailbox"
                   outlined
-              :rules="[(val) => !!val || '请输入電子郵件（接收订单确认邮件）']"
+                  :rules="[
+                    (val) => !!val || '请输入電子郵件（接收订单确认邮件）',
+                  ]"
                 ></q-input>
               </div>
             </div>
@@ -191,6 +204,7 @@
         </form>
       </div>
     </div>
+  </div>
 </template>
 <script>
 export default {
@@ -215,7 +229,6 @@ export default {
   },
   mounted() {
     this.userInfo = JSON.parse(window.localStorage.getItem("b2bUser"));
-    console.log("getUserInfo", this.userInfo);
     this.getUserInfo();
     this.getCountryInfo();
     this.GetAppellationEnum();
@@ -230,8 +243,14 @@ export default {
             const { phoneCountList, countList } = res.data.data;
             this.countList = countList;
             this.phoneCountList = phoneCountList;
+            this.phoneCountList.forEach((x) => {
+              let temp = this.countList.find((y) => y.ID == x.ID);
+              x.EnName = `${temp.EnName}(${x.PhoneCode})`;
+            });
+            if (this.form.Country) {
+              this.changeCountry(this.form.Country);
+            }
           } else {
-            // this.$notify(res.data.message);
             this.$q.notify({
               type: "negative",
               message: res.data.message,
@@ -243,6 +262,12 @@ export default {
         null
       );
     },
+    changeCountry(id) {
+      this.form.PhoneCountry = this.phoneCountList.find(
+        (x) => x.ID == id
+      ).PhoneCode;
+      this.form.PhoneCountryStr = "+" + this.form.PhoneCountry;
+    },
     GetAppellationEnum() {
       this.apipost(
         "GetAppellationEnum_post",
@@ -272,6 +297,9 @@ export default {
         (res) => {
           if (res.data.resultCode == 1) {
             this.form = res.data.data;
+            if (this.phoneCountList.length) {
+              this.changeCountry(this.form.Country);
+            }
           } else {
             // this.$notify(res.data.message);
             this.$q.notify({
@@ -286,7 +314,7 @@ export default {
       );
     },
     submitUserInfo() {
-      let params = {...this.form}
+      let params = { ...this.form };
       // params.Appellation = params.Appellation.ID
       // params.Country = params.Country.ID
       // params.PhoneCountry = params.PhoneCountry.ID
@@ -312,23 +340,28 @@ export default {
           }
         },
         null
-      ) ;
+      );
     },
     submit() {
       this.formHasError = false;
-      const verifyArr = ["Surname", "Name", "BirthDate", "Appellation", "EnName", "EnSurname", "Country", "Moblie"];
+      const verifyArr = [
+        "Surname",
+        "Name",
+        "BirthDate",
+        "Appellation",
+        "EnName",
+        "EnSurname",
+        "Country",
+        "Moblie",
+      ];
       verifyArr.forEach((item) => {
-        console.log('this.$refs[item]', this, item, this.$refs[item])
         this.$refs[item].validate();
       });
       verifyArr.forEach((item) => {
-          console.log('item', item)
         if (this.$refs[item].hasError) {
-          console.log('item', item)
           this.formHasError = true;
         }
       });
-      console.log('this.formHasError', this.formHasError, this.form)
       if (this.formHasError) {
         return;
       }

src/utils/listProductType.js

+const ListProductTypeEnum = Object.freeze({
+
+    TRIP: {
+        value: 1,
+        desc: '線路旅遊'
+    },
+    SCENIC: {
+        value: 2,
+        desc: '景點門票'
+    },
+    HOTEL: {
+        value: 3,
+        desc: '酒店住宿'
+    },
+    CAR: {
+        value: 4,
+        desc: '目的地用車'
+    },
+    JALAN: {
+        value: 5,
+        desc: '酒店住宿'
+    },
+})
+
+export default ListProductTypeEnum
\ No newline at end of file