新增：微信小程序订单中心页 pages/order/center

pages.json

@@ -186,6 +186,13 @@
         "navigationBarTitleText": "订单结算台"
       }
     },
+    {
+      "path": "pages/order/center",
+      "style": {
+        "navigationBarTitleText": "订单中心",
+        "enablePullDownRefresh": true
+      }
+    },
     {
       "path": "pages/order/index",
       "style": {

pages/address/create.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="container">
+  <view class="container" :style="appThemeStyle">
     <!-- 标题 -->
     <view class="page-title">收货地址</view>
     <!-- 表单组件 -->
@@ -12,7 +12,7 @@
           <u-input v-model="form.phone" placeholder="请输入收货人手机号" />
         </u-form-item>
         <u-form-item label="地区" prop="region">
-          <select-region v-model="form.region" />
+          <select-region ref="sRegion" v-model="form.region" />
         </u-form-item>
         <u-form-item label="详细地址" prop="detail" :border-bottom="false">
           <u-input v-model="form.detail" placeholder="街道门牌、楼层等信息" />
@@ -22,6 +22,9 @@
     <!-- 操作按钮 -->
     <view class="footer">
       <view class="btn-wrapper">
+        <!-- #ifdef MP-WEIXIN -->
+        <view class="btn-item btn-item-wechat" @click="chooseAddress()">选择微信收货地址</view>
+        <!-- #endif -->
         <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
       </view>
     </view>
@@ -100,6 +103,27 @@
 
     methods: {
 
+      // 选择微信地址
+      // #ifdef MP-WEIXIN
+      chooseAddress() {
+        const app = this
+        const { form, $refs } = this
+        uni.chooseAddress({
+          success(res) {
+            const names = $refs.sRegion.getOptionItemByNames(res)
+            form.name = res.userName
+            form.phone = res.telNumber
+            form.detail = res.detailInfo
+            form.region = names.length > 0 ? names : []
+          },
+          fail({ errMsg }) {
+            app.$toast(errMsg)
+            console.error('获取微信地址失败：', errMsg)
+          }
+        })
+      },
+      // #endif
+
       // 表单提交
       handleSubmit() {
         const app = this
@@ -146,34 +170,40 @@
     background: #fff;
   }
 
-  /* 底部操作栏 */
-
+  // 底部操作栏
   .footer {
-    margin-top: 60rpx;
+    margin-top: 80rpx;
 
     .btn-wrapper {
       height: 100%;
-      display: flex;
-      align-items: center;
+      // display: flex;
+      // align-items: center;
       padding: 0 20rpx;
     }
 
     .btn-item {
       flex: 1;
       font-size: 28rpx;
-      height: 100rpx;
-      line-height: 100rpx;
-      text-align: center;
+      height: 86rpx;
       color: #fff;
       border-radius: 50rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .btn-item-wechat {
+      background: #0ba90b;
+      margin-bottom: 26rpx;
     }
 
     .btn-item-main {
-      background: linear-gradient(to right, #f9211c, #ff6335);
+      background: linear-gradient(to right, $main-bg, $main-bg2);
+      color: $main-text;
 
       // 禁用按钮
       &.disabled {
-        background: #ff9779;
+        opacity: 0.6;
       }
     }
 

pages/address/update.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="container">
+  <view class="container" :style="appThemeStyle">
     <!-- 标题 -->
     <view class="page-title">收货地址</view>
     <!-- 表单组件 -->
@@ -12,7 +12,7 @@
           <u-input v-model="form.phone" placeholder="请输入收货人手机号" />
         </u-form-item>
         <u-form-item label="地区" prop="region">
-          <select-region v-model="form.region" />
+          <select-region ref="sRegion" v-model="form.region" />
         </u-form-item>
         <u-form-item label="详细地址" prop="detail" :border-bottom="false">
           <u-input v-model="form.detail" placeholder="街道门牌、楼层等信息" />
@@ -22,6 +22,9 @@
     <!-- 操作按钮 -->
     <view class="footer">
       <view class="btn-wrapper">
+        <!-- #ifdef MP-WEIXIN -->
+        <view class="btn-item btn-item-wechat" @click="chooseAddress()">选择微信收货地址</view>
+        <!-- #endif -->
         <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
       </view>
     </view>
@@ -116,6 +119,26 @@
           })
       },
 
+      // 选择微信地址
+      // #ifdef MP-WEIXIN
+      chooseAddress() {
+        const { form, $refs } = this
+        uni.chooseAddress({
+          success(res) {
+            const names = $refs.sRegion.getOptionItemByNames(res)
+            form.name = res.userName
+            form.phone = res.telNumber
+            form.detail = res.detailInfo
+            form.region = names.length > 0 ? names : []
+          },
+          fail({ errMsg }) {
+            app.$toast(errMsg)
+            console.error('获取微信地址失败：', errMsg)
+          }
+        })
+      },
+      // #endif
+
       // 生成默认的表单数据
       createFormData(detail) {
         const { form } = this
@@ -184,34 +207,40 @@
     background: #fff;
   }
 
-  /* 底部操作栏 */
-
+  // 底部操作栏
   .footer {
-    margin-top: 60rpx;
+    margin-top: 80rpx;
 
     .btn-wrapper {
       height: 100%;
-      display: flex;
-      align-items: center;
+      // display: flex;
+      // align-items: center;
       padding: 0 20rpx;
     }
 
     .btn-item {
       flex: 1;
       font-size: 28rpx;
-      height: 100rpx;
-      line-height: 100rpx;
-      text-align: center;
+      height: 86rpx;
       color: #fff;
       border-radius: 50rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .btn-item-wechat {
+      background: #0ba90b;
+      margin-bottom: 26rpx;
     }
 
     .btn-item-main {
-      background: linear-gradient(to right, #f9211c, #ff6335);
+      background: linear-gradient(to right, $main-bg, $main-bg2);
+      color: $main-text;
 
       // 禁用按钮
       &.disabled {
-        background: #ff9779;
+        opacity: 0.6;
       }
     }
 

pages/order/center.vue

@@ -0,0 +1,142 @@
+<template>
+  <view class="container" :style="appThemeStyle">
+    <!-- 订单页列表 -->
+    <view class="order-list">
+      <view class="order-item" v-for="(item, index) in orderList" :key="index" @click="$navTo(item.path)">
+        <view class="order-item-icon" :style="{ color: item.color }">
+          <text class="iconfont" :class="item.icon"></text>
+        </view>
+        <view class="order-item-name">{{ item.name }}</view>
+        <view class="icon-arrow">
+          <text class="iconfont icon-arrow-right"></text>
+        </view>
+      </view>
+    </view>
+    <!-- 操作按钮 -->
+    <view class="footer">
+      <view class="btn-wrapper">
+        <view class="btn-item btn-item-main" @click="$navTo('pages/index/index')">
+          <view class="btn-item-icon">
+            <text class="iconfont icon-shouye2"></text>
+          </view>
+          <view class="btn-item-name">
+            <text>返回首页</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import * as UserApi from '@/api/user'
+
+  // 订单页数据
+  const orderList = [{
+      name: '商城订单',
+      icon: 'icon-qpdingdan',
+      color: 'rgb(253 65 0)',
+      path: 'pages/order/index'
+    },
+    {
+      name: '充值订单',
+      icon: 'icon-jifen',
+      color: 'rgb(191, 150, 7)',
+      path: 'pages/wallet/recharge/order'
+    }
+  ]
+
+  export default {
+    data() {
+      return {
+        orderList
+      }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+      // 获取当前用户信息
+      this.getUserInfo()
+    },
+
+    methods: {
+
+      // 获取当前用户信息
+      getUserInfo() {
+        const app = this
+        UserApi.info()
+          .then(result => {
+            const userInfo = result.data.userInfo
+            app.avatarUrl = userInfo.avatar_url
+            app.form.avatarId = userInfo.avatar_id
+            app.form.nickName = userInfo.nick_name
+          })
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .order-list {
+    padding: 0 25rpx;
+    background-color: #fff;
+
+    .order-item {
+      position: relative;
+      padding: 26rpx 16rpx;
+      border-bottom: 1rpx solid #eee;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 30rpx;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .order-item-icon {
+      font-size: 34rpx;
+      margin-right: 18rpx;
+    }
+
+    .icon-arrow {
+      position: absolute;
+      top: 26rpx;
+      right: 6rpx;
+    }
+  }
+
+  // 底部操作栏
+  .footer {
+    position: fixed;
+    bottom: var(--window-bottom);
+    left: 0;
+    right: 0;
+    z-index: 11;
+    box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
+    background: #fff;
+
+    // 设置ios刘海屏底部横线安全区域
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+
+    .btn-item {
+      font-size: 30rpx;
+      height: 90rpx;
+      border-radius: 50rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .btn-item-icon {
+      font-size: 34rpx;
+      margin-right: 18rpx;
+    }
+
+  }
+</style>

utils/iconfont.scss

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2282770 */
-  src: url('https://at.alicdn.com/t/font_2282770_p9nx0bv86i.woff2?t=1649761463203') format('woff2'),
-       url('https://at.alicdn.com/t/font_2282770_p9nx0bv86i.woff?t=1649761463203') format('woff'),
-       url('https://at.alicdn.com/t/font_2282770_p9nx0bv86i.ttf?t=1649761463203') format('truetype'),
-       url('https://at.alicdn.com/t/font_2282770_p9nx0bv86i.svg?t=1649761463203#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/c/font_2282770_ppelmhipjad.woff2?t=1673233477801') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_2282770_ppelmhipjad.woff?t=1673233477801') format('woff'),
+       url('https://at.alicdn.com/t/c/font_2282770_ppelmhipjad.ttf?t=1673233477801') format('truetype'),
+       url('https://at.alicdn.com/t/c/font_2282770_ppelmhipjad.svg?t=1673233477801#iconfont') format('svg');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shouye2:before {
+  content: "\e60d";
+}
+
 .icon-jiagou3:before {
   content: "\e69c";
 }