优化城市主页

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/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;">{{ 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;">{{ 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/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,20 +37,26 @@
 <template>
   <div>
     <div class="title">附近的城市</div>
-    <div class="flex">
-      <div
-        @click="navToSearch(item)"
-        class="relative card"
-        v-for="item in cityList"
-        :key="item.Id"
-      >
-        <img class="card-img" :src="item.ImageList[0]" />
-        <div class="info">
-          <div>{{ item.AreaName }}</div>
-          <!-- <div>10Km</div> -->
+    <q-scroll-area
+      :thumb-style="thumbStyle"
+      style="height: 290px;width100%;"
+    >
+        <div class="row no-wrap">
+          <div
+          @click="navToSearch(item)"
+          class="relative card"
+          v-for="item in cityList"
+          :key="item.Id"
+        >
+          <img class="card-img" :src="item.ImageList[0]" />
+          <div class="info">
+            <div class="text-subtitle1 text-weight-bold text-shadow">{{ item.AreaName }}</div>
+            <!-- <div>10Km</div> -->
+          </div>
         </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/setUserInfo.vue

@@ -84,7 +84,7 @@
               class="form-item"
               placeholder="名字（需與旅遊證件一致）"
               v-model="form.EnSurname"
-              outlined
+              standout
               :rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
             ></q-input>
           </div>

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