Forráskód Böngészése

feat(client): 新增首页地址页面

yizhiyang 1 éve
szülő
commit
8d0a4ea37a

+ 1 - 1
src/PageMine/address/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="address">
-    <page-navbar bgColor="#fff" title="地址"></page-navbar>
+    <page-navbar bgColor="#fff" title="我的地址"></page-navbar>
     <base-card
       padding="24rpx"
       marginBottom="24rpx"

+ 50 - 48
src/PageMine/favourite/index.vue

@@ -1,63 +1,65 @@
 <template>
-  <view class="favorite">
+  <view>
     <page-navbar bgColor="#fff" title="我的收藏" />
     <view class="direction" style="background-color: #fff">
       <base-tabs :list="listCollect" paddingLeft="30rpx" paddingRight="30rpx"></base-tabs>
     </view>
-    <view style="margin: 24rpx 0">
-      <view class="f-s-24 text-center" style="color: #9fa0a6">以下是您收藏的商家</view>
-    </view>
+    <view class="favorite">
+      <view style="margin: 24rpx 0">
+        <view class="f-s-24 text-center" style="color: #9fa0a6">以下是您收藏的商家</view>
+      </view>
 
-    <base-card padding="24rpx" marginBottom="24rpx">
-      <view class="fl-flex" style="position: relative">
-        <base-img
-          src="/static/img.jpg"
-          width="160rpx"
-          height="160rpx"
-          borderRadius="16rpx"
-        ></base-img>
-        <view class="merchant-list u-m-l-32">
-          <view class="f-s-30 text-primary u-m-b-14 text-bold u-m-t-8">
-            理想汽车(银泰城店)
+      <base-card padding="24rpx" marginBottom="24rpx">
+        <view class="fl-flex" style="position: relative">
+          <base-img
+            src="/static/img.jpg"
+            width="160rpx"
+            height="160rpx"
+            borderRadius="16rpx"
+          ></base-img>
+          <view class="merchant-list u-m-l-32">
+            <view class="f-s-30 text-primary u-m-b-14 text-bold u-m-t-8">
+              理想汽车(银泰城店)
+            </view>
+            <view class="fl-flex u-m-b-14 fl-align-center">
+              <u-rate
+                v-model="value"
+                readonly
+                gutter="0"
+                size="24"
+                activeColor="#ffa033"
+              ></u-rate>
+              <view class="f-s-26 text-999">(3.0)</view>
+            </view>
+            <view class="f-s-24 text-999">世纪城国际展览中心世纪城国际展览中心</view>
           </view>
-          <view class="fl-flex u-m-b-14 fl-align-center">
-            <u-rate
-              v-model="value"
-              readonly
-              gutter="0"
-              size="24"
-              activeColor="#ffa033"
-            ></u-rate>
-            <view class="f-s-26 text-999">(3.0)</view>
+          <view style="position: absolute; right: 0; bottom: -30rpx">
+            <u-icon name="more-dot-fill" color="#333" size="28"></u-icon>
           </view>
-          <view class="f-s-24 text-999">世纪城国际展览中心世纪城国际展览中心</view>
         </view>
-        <view style="position: absolute; right: 0; bottom: -30rpx">
-          <u-icon name="more-dot-fill" color="#333" size="28"></u-icon>
-        </view>
-      </view>
-    </base-card>
+      </base-card>
 
-    <base-card padding="24rpx" marginBottom="24rpx">
-      <view class="fl-flex" style="position: relative">
-        <base-img
-          src="/static/img.jpg"
-          width="160rpx"
-          height="160rpx"
-          borderRadius="16rpx"
-        ></base-img>
-        <view class="merchant-list u-m-l-32">
-          <view class="f-s-30 text-primary u-m-b-14 text-bold u-m-t-8">
-            驾驰腾雾金合成小保养
+      <base-card padding="24rpx" marginBottom="24rpx">
+        <view class="fl-flex" style="position: relative">
+          <base-img
+            src="/static/img.jpg"
+            width="160rpx"
+            height="160rpx"
+            borderRadius="16rpx"
+          ></base-img>
+          <view class="merchant-list u-m-l-32">
+            <view class="f-s-30 text-primary u-m-b-14 text-bold u-m-t-8">
+              驾驰腾雾金合成小保养
+            </view>
+            <view class="f-s-26 u-m-b-18"> 100+收藏 </view>
+            <view class="f-s-24 text-999">世纪城国际展览中心世纪城国际展览中心</view>
+          </view>
+          <view style="position: absolute; right: 0; bottom: -30rpx">
+            <u-icon name="more-dot-fill" color="#333" size="28"></u-icon>
           </view>
-          <view class="f-s-26 u-m-b-18"> 100+收藏 </view>
-          <view class="f-s-24 text-999">世纪城国际展览中心世纪城国际展览中心</view>
-        </view>
-        <view style="position: absolute; right: 0; bottom: -30rpx">
-          <u-icon name="more-dot-fill" color="#333" size="28"></u-icon>
         </view>
-      </view>
-    </base-card>
+      </base-card>
+    </view>
   </view>
 </template>
 

+ 6 - 0
src/pages.json

@@ -65,6 +65,12 @@
     {
       "root": "pagesHome",
       "pages": [
+        {
+          "path": "homeAddress/index",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "homeSearch/index",
           "style": {

+ 10 - 9
src/pages/home/index.vue

@@ -197,15 +197,16 @@ export default {
     },
     // 手动选择城市
     manualGetLocation() {
-      uni.chooseLocation({
-        success: res => {
-          let { longitude, latitude } = res;
-          this.queryParams.longitude = longitude.toFixed(5);
-          this.queryParams.latitude = latitude.toFixed(5);
-          this.handlerGetRegion(longitude.toFixed(5), latitude.toFixed(5));
-        },
-        fail: err => {},
-      });
+      this.$Router.push('/pagesHome/homeAddress/index');
+      // uni.chooseLocation({
+      //   success: res => {
+      //     let { longitude, latitude } = res;
+      //     this.queryParams.longitude = longitude.toFixed(5);
+      //     this.queryParams.latitude = latitude.toFixed(5);
+      //     this.handlerGetRegion(longitude.toFixed(5), latitude.toFixed(5));
+      //   },
+      //   fail: err => {},
+      // });
     },
     // 点击swiper跳转
     handlerSwiperSkip(e) {

+ 70 - 0
src/pagesHome/homeAddress/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <view class="home-address">
+    <page-navbar bgColor="#fff" title="地址"></page-navbar>
+    <view class="address-update fl-flex-item">
+      <view class="fl-flex fl-align-center">
+        <u--image
+          src="/static/pagesHome/payment-success.png"
+          width="44rpx"
+          height="44rpx"
+        ></u--image>
+        <view class="f-s-28 text-primary u-m-l-8">地图定位</view>
+      </view>
+      <view class="address-line"></view>
+      <view class="fl-flex fl-align-center">
+        <u--image
+          src="/static/pagesHome/payment-success.png"
+          width="44rpx"
+          height="44rpx"
+        ></u--image>
+        <view class="f-s-28 text-primary u-m-l-8">刷新定位</view>
+      </view>
+    </view>
+    <base-card padding="24rpx" radius="8rpx">
+      <view class="fl-flex-item u-m-b-32">
+        <view class="f-s-28 text-333 text-bold">常用地址</view>
+        <view class="fl-flex fl-align-center">
+          <view class="f-s-24 text-666">更多</view>
+          <u-icon name="arrow-right" color="#666" size="16"></u-icon>
+        </view>
+      </view>
+      <view
+        style="border-bottom: 1rpx solid #d8d8d8"
+        class="u-p-b-24 u-m-t-24"
+        v-for="(item, index) in 4"
+        :key="index"
+      >
+        <view class="fl-flex u-m-b-16">
+          <view class="f-s-28 text-primary u-m-r-16">王忠青</view>
+          <view class="f-s-28 text-primary u-m-r-8">18285564342</view>
+          <base-text text="常用" padding="3rpx" fontSize="24rpx"></base-text>
+        </view>
+        <view class="f-s-24 text-666">中国科学院近代物理研究所-东门【详情地址】</view>
+      </view>
+    </base-card>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'home-address',
+};
+</script>
+
+<style lang="scss" scoped>
+.home-address {
+  padding: 24rpx 32rpx;
+  .address-update {
+    height: 88rpx;
+    background-color: #fff;
+    border-radius: 8rpx;
+    padding: 0 86rpx;
+    margin-bottom: 24rpx;
+  }
+  .address-line {
+    height: 40rpx;
+    width: 2rpx;
+    background-color: #d8d8d8;
+  }
+}
+</style>