新增页面

package.json

@@ -18,7 +18,6 @@
     "@dcloudio/uni-app": "3.0.0-3090920231225001",
     "@dcloudio/uni-app-plus": "3.0.0-3090920231225001",
     "@dcloudio/uni-components": "3.0.0-3090920231225001",
-    "@dcloudio/uni-h5": "3.0.0-3090920231225001",
     "@dcloudio/uni-mp-weixin": "3.0.0-3090920231225001",
     "@dcloudio/uni-mp-xhs": "3.0.0-3090920231225001",
     "pinia": "2.0.36",

src/components/tabbar/tabbar.vue

@@ -0,0 +1,79 @@
+<template>
+  <view class='tab-container'>
+    <view v-for='(item, index) in titles' :key='index' class='tab-item' :class='{"tab-item-active":currentIndex==index}'
+          :style='{"flex": fixed?1:0,
+          "min-width":fixed?"150rpx":"auto",
+            "color": currentIndex==index?itemActiveColor:itemColor}'
+          @click.stop='onChange(index)'>
+      <text>{{ item }}</text>
+      <view class='indicator' v-if='currentIndex==index' :style='{
+        background: indicatorColor,
+      }' />
+    </view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+defineProps({
+  titles: {
+    type: Object as PropType<string[]>,
+    default: ''
+  },
+
+  fixed: {
+    type: Boolean,
+    default: true
+  }
+  ,
+  itemColor: {
+    type: String,
+    default: '#666666'
+  },
+  itemActiveColor: {
+    type: String,
+    default: '#333333'
+  },
+  indicatorColor: {
+    type: String,
+    default: '#333333'
+  }
+});
+
+const emits = defineEmits(['change']);
+const currentIndex = ref<number>(0);
+
+const onChange = (index: number) => {
+  currentIndex.value = index;
+  emits('change', index);
+};
+</script>
+
+<style lang='scss' scoped>
+.tab-container {
+  display: flex;
+  flex-direction: row;
+  background: #FFFFFF;
+  height: 85rpx;
+  align-items: center;
+
+  .tab-item {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    font-size: 30rpx;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .tab-item-active {
+    @extend .tab-item;
+    font-size: 34rpx;
+
+    .indicator {
+      width: 68rpx;
+      height: 6rpx;
+      margin-top: 13rpx;
+    }
+  }
+}
+</style>

src/pages.json

@@ -47,6 +47,64 @@
           "navigationBarTitleText": "网页"
         }
       ]
+    },
+    {
+      "root": "pages/home/subs",
+      "pages": [
+        {
+          "path": "group/join",
+          "style": {
+            "navigationBarTitleText": "扫码加群"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/mine/subs",
+      "pages": [
+        {
+          "path": "profile/index",
+          "style": {
+            "navigationBarTitleText": "会员信息"
+          }
+        },
+        {
+          "path": "recharge/index",
+          "style": {
+            "navigationBarTitleText": "会员充值"
+          }
+        },
+        {
+          "path": "coupon/coupon-list",
+          "style": {
+            "navigationBarTitleText": "优惠券"
+          }
+        },
+        {
+          "path": "order/order-list",
+          "style": {
+            "navigationBarTitleText": "我的订单"
+          }
+        },
+        {
+          "path": "order/order-detail",
+          "style": {
+            "navigationBarTitleText": "订单详情"
+          }
+        },
+        {
+          "path": "address/address-list",
+          "style": {
+            "navigationBarTitleText": "收货地址"
+          }
+        },
+        {
+          "path": "address/add-address",
+          "style": {
+            "navigationBarTitleText": "新增收货地址"
+          }
+        }
+      ]
     }
   ],
   "preloadRule": {
@@ -91,7 +149,7 @@
   },
   "globalStyle": {
     "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "uni-app",
+    "navigationBarTitleText": "VIP顾客中心",
     "navigationBarBackgroundColor": "#FFFFFF",
     "backgroundColor": "#F7F7F7"
   }

src/pages/home/index.vue

@@ -16,33 +16,33 @@
 
       <view class='user-info-card'>
         <image class='user-avatar' :src='bannerList[0]' mode='aspectFill' />
-        <text class='user-name'>设计小仙女</text>
+        <text class='user-name primary-text-color'>设计小仙女</text>
-        <view class='integral-view'>
+        <view class='integral-view primary-text-color'>
           <text>1000</text>
           <text>积分</text>
         </view>
         <view class='divider' style='height: 83rpx' />
         <view class='balance-view'>
-          <text>998.00</text>
+          <text class='accent-text-color'>998.00</text>
           <text>余额（元）</text>
         </view>
       </view>
 
       <view class='menu-view'>
-        <view>
+        <view @click.stop='goPath("/pages/mine/subs/recharge/index")'>
-          <image :src='assetsUrl+"ic_member_card.png"' style='width: 108rpx;height: 72rpx;padding: 11rpx 0' />
+          <image :src='assetsUrl("ic_member_card.png")' style='width: 108rpx;height: 72rpx;padding: 11rpx 0' />
           <text>会员充值</text>
         </view>
         <view class='divider' style='margin: 0;height: 153rpx' />
-        <view>
+        <view @click.stop='goPath("/pages/mine/subs/coupon/coupon-list")'>
-          <image :src='assetsUrl + "ic_coupon.png"' style='width: 108rpx;height: 95rpx' />
+          <image :src='assetsUrl("ic_coupon.png")' style='width: 108rpx;height: 95rpx' />
           <text>优惠券</text>
         </view>
       </view>
 
       <view class='second-menu-view'>
         <view v-for='(item, index) in submenuList' :key='index'>
-          <view class='menu-item' @click='toPath(item.path)'>
+          <view class='menu-item' @click='goPath(item.path)'>
             <image :src='item.icon' />
             <text>{{ item.title }}</text>
           </view>
@@ -65,6 +65,7 @@
 <script setup lang='ts'>
 import { useUserStore } from '@/store';
 import { assetsUrl } from '@/utils/assets';
+import { goPath } from '@/utils';
 
 const store = useUserStore();
 
@@ -77,18 +78,18 @@ const currentBannerIndex = ref(0);
 const submenuList = [
   {
     title: '注册有礼',
-    icon: assetsUrl + 'ic_register_gift.png',
+    icon: assetsUrl('ic_register_gift.png'),
     path: '/pages/order/order'
   },
   {
     title: '团购秒杀',
-    icon: assetsUrl + 'ic_groupbuy.png',
+    icon: assetsUrl('ic_groupbuy.png'),
     path: '/pages/order/order'
   },
   {
     title: '入群有礼',
-    icon: assetsUrl + 'ic_group_gift.png',
+    icon: assetsUrl('ic_group_gift.png'),
-    path: '/pages/order/order'
+    path: '/pages/home/subs/group/join'
   }
 ];
 
@@ -164,7 +165,6 @@ console.log('store.user_name', store.user_name);
     flex: 1;
     font-size: 30rpx;
     font-weight: bold;
-    color: #333333;
     margin-left: 16rpx;
   }
 
@@ -177,13 +177,11 @@ console.log('store.user_name', store.user_name);
     text:nth-child(1) {
       font-size: 36rpx;
       font-weight: bold;
-      color: #333333;
     }
 
     text:nth-child(2) {
       font-size: 26rpx;
       font-weight: 400;
-      color: #333333;
       margin-top: 10rpx;
     }
   }
@@ -194,7 +192,6 @@ console.log('store.user_name', store.user_name);
     text:nth-child(1) {
       font-size: 36rpx;
       font-weight: bold;
-      color: #F32B2B;
     }
   }
 }

src/pages/home/subs/group/join.vue

@@ -0,0 +1,56 @@
+<template>
+  <view class='content card-view'>
+    <text class='title'>入群步骤</text>
+    <view class='indicator' />
+    <text class='step-title'>
+      1.长按识别下方二维码，添加【xxxx】
+    </text>
+    <view class='divider' style='margin-top: 28rpx' />
+    <image :src=' assetsUrl("test_qrcode.png")' />
+    <text class='step-title'>
+      2.识别【xxxx】发您的二维码，即可入群
+    </text>
+  </view>
+</template>
+
+<script lang='ts' setup>
+
+import { assetsUrl } from '@/utils/assets';
+</script>
+
+<style lang='scss' scoped>
+.content {
+  display: flex;
+  margin: 20rpx;
+  padding: 37rpx 20rpx 30rpx 20rpx;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333333;
+}
+
+.indicator {
+  width: 72rpx;
+  height: 10rpx;
+  background: #333333;
+  border-radius: 50rpx;
+  margin-top: 10rpx;
+}
+
+.step-title {
+  font-size: 30rpx;
+  font-weight: 400;
+  color: #333333;
+  margin-top: 55rpx;
+}
+
+image {
+  width: 432rpx;
+  height: 432rpx;
+  margin-top: 67rpx;
+}
+</style>

src/pages/mall/index.vue

@@ -2,7 +2,7 @@
   <view class='content'>
     <view class='search-view'>
       <view class='search-input'>
-        <image :src='assetsUrl+"ic_search.png"'></image>
+        <image :src=' assetsUrl("ic_search.png")'></image>
         <input placeholder='输入名称、款号搜索' />
       </view>
     </view>
@@ -22,14 +22,14 @@
             <image class='goods-image' :src='item.goodsImage' />
             <text class='goods-name'>{{ item.goodsName }}</text>
             <text class='goods-price'>¥{{ item.goodsPrice }}</text>
-            <image class='add-image' :src='assetsUrl+"ic_add_goods.png"' />
+            <image class='add-image' :src=' assetsUrl("ic_add_goods.png")' />
           </view>
         </grid-view>
       </scroll-view>
     </view>
 
     <view class='shopping-cart'>
-      <image :src='assetsUrl+"ic_shopping_cart.png"' />
+      <image :src=' assetsUrl("ic_shopping_cart.png")' />
       <text>10</text>
     </view>
   </view>
@@ -95,6 +95,7 @@ const changeCategory = (index: number) => {
     align-items: center;
     background: #F7F7F7;
     padding: 17rpx 23rpx;
+    font-size: 26rpx;
     width: 100%;
 
     image {
@@ -127,6 +128,7 @@ const changeCategory = (index: number) => {
       text {
         width: 100%;
         text-align: center;
+        font-size: 30rpx;
       }
     }
 
@@ -219,6 +221,7 @@ const changeCategory = (index: number) => {
     top: -5rpx;
     right: -5rpx;
     color: white;
+    font-size: 26rpx;
     position: absolute;
     border-radius: 50%;
     border: 2rpx solid #FFFFFF;

src/pages/mine/index.vue

@@ -3,18 +3,18 @@
     <view class='user-info-view'>
       <image
         class='image-bg'
-        :src="assetsUrl+'test_bg.png'"
+        :src=" assetsUrl('test_bg.png')"
       />
 
       <view class='top-row'>
-        <image :src='assetsUrl+"ic_coupon.png"' />
+        <image :src=' assetsUrl("ic_coupon.png")' />
 
         <view class='u-flex-column'>
           <text>设计小仙女</text>
           <text>15542535625</text>
         </view>
 
-        <image :src='assetsUrl+"ic_qrcode_white.png"' />
+        <image :src=' assetsUrl("ic_qrcode_white.png")' />
       </view>
 
       <view class='bottom-row'>
@@ -22,11 +22,11 @@
           <text>100</text>
           <text>积分</text>
         </view>
-        <view>
+        <view @click.stop='goPath("/pages/mine/subs/recharge/index")'>
           <text>255.00</text>
           <text>余额</text>
         </view>
-        <view>
+        <view @click.stop='goPath("/pages/mine/subs/coupon/coupon-list")'>
           <text>3</text>
           <text>优惠券</text>
         </view>
@@ -36,14 +36,14 @@
     <view class='integral-add-view'>
       <text>将会员卡放入微信卡包，及时了解积分变动</text>
       <text>去添加</text>
-      <image :src='assetsUrl+"ic_arrow_right_yellow.png"' />
+      <image :src=' assetsUrl("ic_arrow_right_yellow.png")' />
     </view>
 
     <text class='title-view'>
       我的订单
     </text>
     <view class='card-order-view'>
-      <view v-for='(item,index) in orderActionList' :key='index'>
+      <view v-for='(item,index) in orderActionList' :key='index' @click.stop='goPath(item.path)'>
         <image :src='item.icon' />
         <text>{{ item.title }}</text>
         <text v-if='item.amount>0'>{{ item.amount }}</text>
@@ -55,7 +55,7 @@
     </text>
 
     <view class='card-service-view'>
-      <view v-for='(item,index) in serviceList' :key='index'>
+      <view v-for='(item,index) in serviceList' :key='index' @click.stop='goPath(item.path)'>
         <image :src='item.icon' />
         <text>{{ item.title }}</text>
       </view>
@@ -66,47 +66,48 @@
 <script setup lang='ts'>
 import { useUserStore } from '@/store';
 import { assetsUrl } from '@/utils/assets';
+import { goPath } from '@/utils';
 
 const orderActionList = ref([{
   title: '进行中',
-  icon: assetsUrl + 'ic_order_progressing.png',
+  icon: assetsUrl('ic_order_progressing.png'),
-  path: '',
+  path: '/pages/mine/subs/order/order-list',
   amount: 10
 }, {
   title: '已结束',
-  icon: assetsUrl + 'ic_order_finish.png',
+  icon: assetsUrl('ic_order_finish.png'),
-  path: '',
+  path: '/pages/mine/subs/order/order-list?index=1',
   amount: 0
 }, {
   title: '全部订单',
-  icon: assetsUrl + 'ic_order_all.png',
+  icon: assetsUrl('ic_order_all.png'),
-  path: '',
+  path: '/pages/mine/subs/order/order-list?index=2',
   amount: 0
 }]);
 
 const serviceList = [
   {
     title: '会员信息',
-    icon: assetsUrl + 'ic_member_service_info.png',
+    icon: assetsUrl('ic_member_service_info.png'),
-    path: ''
+    path: '/pages/mine/subs/profile/index'
   },
   {
     title: '消费记录',
-    icon: assetsUrl + 'ic_member_service_record.png',
+    icon: assetsUrl('ic_member_service_record.png'),
     path: ''
   },
   {
     title: '关注公众号',
-    icon: assetsUrl + 'ic_member_service_follow.png',
+    icon: assetsUrl('ic_member_service_follow.png'),
     path: ''
   },
   {
     title: '收货地址',
-    icon: assetsUrl + 'ic_member_service_address.png',
+    icon: assetsUrl('ic_member_service_address.png'),
-    path: ''
+    path: '/pages/mine/subs/address/address-list'
   }, {
     title: '联系商家',
-    icon: assetsUrl + 'ic_member_service_contact.png',
+    icon: assetsUrl('ic_member_service_contact.png'),
     path: ''
   }
   // ,{
@@ -288,6 +289,7 @@ console.log('store.user_name', store.user_name);
       min-width: 40rpx;
       min-height: 35rpx;
       align-items: center;
+      font-size: 26rpx;
       justify-content: center;
       background: #F32B2B;
       border-radius: 50%;
@@ -309,6 +311,7 @@ console.log('store.user_name', store.user_name);
     align-items: center;
     justify-content: center;
     padding: 30rpx 0;
+    font-size: 26rpx;
   }
 
   image {

src/pages/mine/subs/address/add-address.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang='ts' setup>
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/pages/mine/subs/address/address-list.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class='content'>
+    <scroll-view :scroll-y='true'>
+      <address-item v-for='(item,index) in addressList' :key='index' :item='item' />
+    </scroll-view>
+
+    <view class='bottom-button-view'>
+      <button class='primary-button' @click.stop='goPath("add-address")'>+新增地址</button>
+    </view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+
+import AddressItem from './components/address-item.vue';
+import { goPath } from '@/utils';
+
+const addressList = ref<{
+  name: string,
+  mobile: string,
+  address: string,
+  status: number
+}[]>([{
+  name: '黄先生',
+  mobile: '13xxxxxx8900',
+  status: 1
+}, {
+  name: '李先生',
+  mobile: '13xxxxxx8900',
+  status: 0
+}]);
+</script>
+
+<style lang='scss' scoped>
+</style>

src/pages/mine/subs/address/components/address-item.vue

@@ -0,0 +1,92 @@
+<template>
+  <view class='card-view'>
+    <view class='c-flex-row'>
+      <text>默认</text>
+      <text>
+        黄先生
+        <!--        {{ item.name }}-->
+      </text>
+      <text>
+        13xxxxxx8900
+        <!--        {{ item.mobile }}-->
+      </text>
+    </view>
+    <text class='address'>
+      湖南省 长沙市 雨花区 地址地址地址
+            {{ item.address }}
+    </text>
+
+    <view class='btn-view c-flex-row'>
+      <text>编辑</text>
+      <text>删除</text>
+    </view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+
+defineProps({
+  item: <any>[]
+});
+</script>
+
+<style lang='scss' scoped>
+.card-view {
+  margin: 20rpx 30rpx;
+  padding: 38rpx 30rpx 30rpx 34rpx;
+
+  view:nth-of-type(1) {
+    text:nth-of-type(1) {
+      border-radius: 5rpx;
+      border: 1rpx solid #F32B2B;
+      color: #F32B2B;
+      font-size: 24prx;
+      padding: 1rpx 8rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-left: 10rpx;
+      color: #333333;
+    }
+
+    text:nth-of-type(3) {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-left: 20rpx;
+      color: #333333;
+    }
+  }
+
+  .address {
+    font-size: 26rpx;
+    font-weight: 400;
+    margin-top: 10rpx;
+    color: #999999;
+  }
+
+  .btn-view {
+    display: flex;
+    align-self: flex-end;
+    align-items: center;
+
+    text:nth-of-type(n+1) {
+      display: flex;
+      width: 84rpx;
+      height: 48rpx;
+      border-radius: 24rpx;
+      border: 1rpx solid #F32B2B;
+      align-items: center;
+      justify-content: center;
+      color: #F32B2B;
+      margin-left: 20rpx;
+    }
+
+    text:nth-of-type(2) {
+      border: 1rpx solid #DDDDDD;
+      color: #666666;
+    }
+  }
+}
+</style>

src/pages/mine/subs/coupon/components/coupon-item.vue

@@ -0,0 +1,122 @@
+<template>
+  <view class='coupon-content'>
+    <image v-if='item.status==0' :src='assetsUrl("bg_coupon.png")' />
+    <image v-else-if='item.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
+    <view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
+      <text>{{ item.price }}</text>
+      <text>满{{ item.threshold }}元可用</text>
+    </view>
+
+    <view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
+      <text>{{ item?.title }}</text>
+      <text>有效期至{{ item.useTime }}</text>
+      <text class='btn-text' :class='{"btn-text-disabled": item.status==1}'>
+        立即使用
+      </text>
+    </view>
+  </view>
+
+</template>
+
+<script lang='ts' setup>
+
+import { assetsUrl } from '@/utils/assets';
+
+defineProps({
+  item: Object
+});
+</script>
+
+<style lang='scss' scoped>
+.coupon-content {
+  display: flex;
+  flex-direction: row;
+  height: 200rpx;
+  position: relative;
+  margin: 30rpx 30rpx 10rpx 30rpx;
+
+  image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    padding-left: 50rpx;
+
+    text:nth-of-type(1) {
+      font-size: 55rpx;
+      font-weight: bold;
+    }
+
+    text:nth-of-type(1):after {
+      content: '元';
+      font-size: 24rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 26rpx;
+      font-weight: 400;
+    }
+  }
+
+  .left-content-disabled {
+    @extend .left-content;
+    color: #C2C2C2;
+  }
+
+  .right-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex: 1;
+    justify-content: center;
+    margin-left: 100rpx;
+
+    text:nth-of-type(1) {
+      font-size: 30rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 26rpx;
+      margin-top: 20rpx;
+      color: #333333;
+    }
+
+    .btn-text {
+      display: flex;
+      width: 146rpx;
+      height: 55rpx;
+      align-items: center;
+      justify-content: center;
+      border-radius: 28rpx;
+      border: #F32B2B solid 2rpx;
+      font-size: 28rpx;
+      font-weight: bold;
+      color: #F32B2B;
+      position: absolute;
+      right: 20rpx;
+    }
+
+    .btn-text-disabled {
+      @extend .btn-text;
+      color: #C2C2C2;
+      border: none;
+    }
+  }
+
+  .right-content-disabled {
+    @extend .right-content;
+    color: #C2C2C2;
+    text:nth-of-type(2) {
+      color: #C2C2C2;
+    }
+  }
+}
+
+</style>

src/pages/mine/subs/coupon/coupon-list.vue

@@ -0,0 +1,68 @@
+<template>
+  <tabbar :titles='["全部","未使用","已使用"]' :indicator-color='"#D95554"' @change='args => {}' />
+  <scroll-view :scroll-y='true' class='content'>
+    <coupon-item v-for='item in coupons' :item='item' />
+  </scroll-view>
+</template>
+
+<script lang='ts' setup>
+
+import CouponItem from './components/coupon-item.vue';
+
+const coupons = [{
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 100,
+  threshold: 10,
+  priceDesc: '满100减10',
+  useTime: '2021-12-31',
+  status: 1,
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 200,
+  threshold: 80,
+  priceDesc: '满100减10',
+  useTime: '2021-01-01',
+  status: 1,
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 300,
+  threshold: 60,
+  priceDesc: '满100减10',
+  useTime: '2023-12-31',
+  status: '0',
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满100减10',
+  price: 50,
+  threshold: 50,
+  priceDesc: '满100减10',
+  useTime: '2021-10-31',
+  status: 0,
+  useStatus: '未使用'
+}, {
+  id: 1,
+  title: '优惠券',
+  desc: '满1000减30',
+  price: 200,
+  threshold: 30,
+  priceDesc: '满100减10',
+  useTime: '2024-12-31',
+  status: 0,
+  useStatus: '未使用'
+}];
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/pages/mine/subs/order/components/order-item.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang='ts' setup>
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/pages/mine/subs/order/order-detail.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang='ts' setup>
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/pages/mine/subs/order/order-list.vue

@@ -0,0 +1,11 @@
+<template>
+  <tabbar :titles="['全部', '进行中', '已结束']" @change='args => {}' />
+</template>
+
+<script lang='ts' setup>
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/pages/mine/subs/profile/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <view class='content'>
+    <view class='top-card-view'>
+      <image class='bg-image' :src='assetsUrl("test_bg.png")' />
+      <image class='avatar-image' :src='assetsUrl("test_bg.png")' />
+      <text>设计小仙女</text>
+      <text>会员卡</text>
+    </view>
+
+    <view class='basic-info-view c-flex-column'>
+      <view class='c-flex-row'>
+        <text>头像</text>
+        <view class='avatar-view'>
+          <image class='avatar-image' :src='assetsUrl("test_bg.png")' />
+          <button class='avatar-btn' open-type='chooseAvatar' />
+        </view>
+      </view>
+
+      <view class='c-flex-row'>
+        <text class='nickname'>姓名</text>
+        <input placeholder='请输入姓名' type='nickname' />
+      </view>
+
+      <view class='divider' />
+      <view class='c-flex-row'>
+        <text>手机号</text>
+        <input placeholder='15523653265' />
+      </view>
+
+      <view class='divider' />
+      <view class='c-flex-row'>
+        <text>性别</text>
+        <view class='c-flex-row' @click.stop='changeGender(0)'>
+          <image class='gender-image'
+                 :src='assetsUrl(currentGender==0?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
+          <text class='gender-text'>男</text>
+        </view>
+        <view class='c-flex-row' @click.stop='changeGender(1)'>
+          <image class='gender-image'
+                 :src='assetsUrl(currentGender==1?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
+          <text class='gender-text'>女</text>
+        </view>
+      </view>
+
+      <view class='divider' />
+      <view class='c-flex-row'>
+        <text>生日</text>
+        <picker mode='date' @change='changeDate'>
+          <text>请选择生日</text>
+        </picker>
+      </view>
+    </view>
+
+    <button class='primary-button'>保存</button>
+  </view>
+</template>
+
+<script lang='ts' setup>
+import { assetsUrl } from '@/utils/assets';
+
+const currentGender = ref<number>(0);
+
+const changeGender = (index: number) => {
+  currentGender.value = index;
+};
+
+const changeDate = (e: any) => {
+  console.log(e);
+};
+
+</script>
+
+<style lang='scss' scoped>
+.top-card-view {
+  display: flex;
+  height: 338rpx;
+  position: relative;
+  margin: 30rpx;
+
+  .bg-image {
+    width: 100%;
+    height: 100%;
+    border-radius: 30rpx;
+    position: absolute;
+  }
+
+  .avatar-image {
+    width: 95rpx;
+    height: 95rpx;
+    margin-left: 36rpx;
+    margin-top: 60rpx;
+    background: #FFFFFF;
+    border: 1rpx solid #707070;
+    position: relative;
+    border-radius: 50%;
+  }
+
+  text:nth-of-type(1) {
+    font-size: 30rpx;
+    font-weight: 800;
+    color: #FFFFFF;
+    position: absolute;
+    top: 64rpx;
+    left: 158rpx;
+  }
+
+  text:nth-of-type(2) {
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #FFFFFF;
+    position: absolute;
+    top: 116rpx;
+    left: 158rpx;
+  }
+}
+
+.basic-info-view {
+  margin: 0 30rpx 30rpx 30rpx;
+
+  .avatar-view {
+    display: flex;
+    position: relative;
+
+    .avatar-image {
+      width: 110rpx;
+      height: 110rpx;
+      border-radius: 50%;
+    }
+
+    .avatar-btn {
+      @extend .avatar-image;
+      position: absolute;
+      border: none;
+      background: #00000000;
+    }
+  }
+
+  input {
+    font-size: 30rpx;
+    font-weight: 400;
+    color: #333333;
+  }
+
+  view:not(.divider):nth-of-type(n+1) {
+    padding: 0 20rpx;
+    height: 120rpx;
+
+    .gender-image {
+      width: 37rpx;
+      height: 37rpx;
+    }
+
+    .gender-text {
+      width: 80rpx;
+      color: #333333;
+      font-size: 30rpx;
+      margin-left: 10rpx;
+    }
+
+    text:not(.gender-text):nth-of-type(1) {
+      font-size: 30rpx;
+      width: 120rpx;
+      font-weight: 400;
+      color: #7E7E7E;
+    }
+
+    .nickname:before {
+      content: '*';
+      color: #F32B2B;
+    }
+  }
+}
+</style>

src/pages/mine/subs/recharge/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <view class='content'>
+    <view class='balance-view'>
+      <image :src='assetsUrl("bg_member_recharge.png")' />
+      <view class='balance-content'>
+        <text>累计余额（元）</text>
+        <text>￥1</text>
+      </view>
+      <view class='balance-content'>
+        <text>当前余额（元）</text>
+        <text class='accent-text-color'>￥1</text>
+      </view>
+    </view>
+
+    <view class='recharge-option-card'>
+      <text>充值金额</text>
+      <tabbar :titles='rechargeItems?.map(res=>res.title)' @change='change' />
+      <view class='divider' />
+      <view class='option-item'>
+        <image :src='assetsUrl("bg_member_recharge_item.png")' />
+        <text>充值{{ rechargeItems[currentIndex].title }}送{{ rechargeItems[currentIndex].price / 10 }}元</text>
+        <text class='accent-text-color'>
+          实得{{ rechargeItems[currentIndex].price + (rechargeItems[currentIndex].price / 10) }}元
+        </text>
+      </view>
+    </view>
+
+    <view class='bottom-button-view'>
+      <button class='primary-button'>充值</button>
+    </view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+import { assetsUrl } from '@/utils/assets';
+
+const rechargeItems = ref([
+  {
+    title: '100元',
+    price: 100
+  },
+  {
+    title: '200元',
+    price: 200
+  },
+  {
+    title: '500元',
+    price: 500
+  }, {
+    title: '1000元',
+    price: 1000
+  }]);
+const currentIndex = ref<number>(0);
+
+const change = (index: number) => {
+  currentIndex.value = index;
+};
+</script>
+
+<style lang='scss' scoped>
+.balance-view {
+  display: flex;
+  flex-direction: row;
+  height: 280rpx;
+  position: relative;
+
+  image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  .balance-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+
+    color: white;
+
+    text:nth-of-type(1) {
+      font-size: 30rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 40rpx;
+      margin-top: 10rpx;
+    }
+  }
+}
+
+.recharge-option-card {
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  border-radius: 30rpx 30rpx 0 0;
+  position: relative;
+  margin-top: -25rpx;
+
+  text:nth-of-type(1) {
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-top: 20rpx;
+    margin-left: 30rpx;
+    margin-bottom: 20rpx;
+  }
+
+  .option-item {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin: 36rpx 20rpx;
+
+    image {
+      width: 100%;
+      height: 167rpx;
+      border-radius: 20rpx;
+    }
+
+    text:nth-of-type(1) {
+      font-size: 36rpx;
+      color: #FFFFFF;
+      margin-top: 27rpx;
+      margin-left: 30rpx;
+      position: absolute;
+    }
+
+    text:nth-of-type(2) {
+      display: flex;
+      font-size: 30rpx;
+      margin-top: 85rpx;
+      margin-left: 30rpx;
+      align-items: center;
+      justify-content: center;
+      width: 185rpx;
+      height: 50rpx;
+      background: #FFFFFF;
+      border-radius: 25rpx;
+      position: absolute;
+    }
+  }
+}
+</style>

src/pages/qrcode/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class='content'>
     <view class='member-info-view'>
-      <image :src='assetsUrl+"ic_crown.png"' />
+      <image :src='assetsUrl("ic_crown.png")' />
       <view class='flex flex-col'>
         <text>武汉白银会员</text>
         <view />
@@ -13,7 +13,7 @@
         <text class='balance-text'>账户余额：256.32元</text>
         <view class='btn-recharge'>
           <text>去充值</text>
-          <image :src='assetsUrl+"ic_arrow_right.png"' />
+          <image :src='assetsUrl("ic_arrow_right.png")' />
         </view>
       </view>
       <view class='divider' />
@@ -29,7 +29,7 @@
 
       <view class='card-info-view'>
         <view>
-          <image :src='assetsUrl+"ic_card.png"' />
+          <image :src='assetsUrl("ic_card.png")' />
           <text>卡信息</text>
         </view>
 

src/static/styles/common.scss

@@ -1,4 +1,79 @@
 page {
-  font-size: 28rpx;
+  font-size: 25rpx;
-  background-color: #f9f9f8;
+  background-color: #F5F5F5;
+}
+
+.primary-text-color {
+  color: #333333;
+}
+
+.secondary-text-color {
+  color: #666666;
+}
+
+.accent-text-color {
+  color: #F32B2B;
+}
+
+.primary-bg-color {
+  background: #FFFFFF;
+}
+
+.accent-bg-color {
+  background: #333333;
+}
+
+.c-flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.c-flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  @extend .c-flex-column;
+}
+
+.card-view {
+  @extend .c-flex-column;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  justify-content: center;
+}
+
+.divider {
+  width: 100%;
+  height: 0.3rpx;
+  background: #E4E4E4;
+}
+
+.bottom-button-view {
+  display: flex;
+  position: fixed;
+  background: #FFFFFF;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10rpx 30rpx 78rpx 30rpx;
+
+  button {
+    width: 100%;
+  }
+}
+
+.primary-button {
+  @extend .accent-bg-color;
+  display: flex;
+  height: 80rpx;
+  border-radius: 43rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+  align-items: center;
+  justify-content: center;
+  min-width: 80%;
+  color: #FFFFFF;
 }

src/store/modules/shoppingcart/index.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia';
+
+const useShoppingCartStore = defineStore('shoppingCart', {
+  state: () => ({
+    list: [],
+    total: 0,
+    count: 0
+  }),
+  getters: {
+    getList() {
+      return this.list;
+    },
+    getTotal() {
+      return this.total;
+    },
+    getCount() {
+      return this.count;
+    }
+  }
+});

src/utils/assets.ts

@@ -1 +1 @@
-export const assetsUrl ='/static/images/'
+export const assetsUrl = (name) => `/static/images/${name}`;

src/utils/common/index.ts

@@ -10,11 +10,11 @@ export function mpUpdate() {
       title: '更新提示',
       content: '检测到新版本，是否下载新版本并重启小程序？',
       success(res) {
-        if (res.confirm) {
+        if(res.confirm) {
           // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
           updateManager.applyUpdate();
         }
-      },
+      }
     });
   });
   updateManager.onUpdateFailed(() => {
@@ -22,7 +22,22 @@ export function mpUpdate() {
     uni.showModal({
       title: '已经有新版本了哟~',
       content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
-      showCancel: false,
+      showCancel: false
     });
   });
 }
+
+export function showToast(title: string, icon: string = 'none', duration: number = 2000) {
+  uni.showToast({
+    title,
+    icon,
+    duration
+  });
+}
+
+export function goPath(path: string) {
+  uni.navigateTo({
+    url: path
+  }).then(r => {
+  });
+}

types/components.d.ts

@@ -10,5 +10,6 @@ declare module 'vue' {
     PageNav: typeof import('./../src/components/page-nav/page-nav.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Tabbar: typeof import('./../src/components/tabbar/tabbar.vue')['default']
   }
 }