done p1

app.json

@@ -16,7 +16,11 @@
     "pages/shop/success/index",
     "pages/order/detail/index",
     "pages/order/detail-group/index",
-    "pages/order/success/index"
+    "pages/order/success/index",
+    "pages/my/coupon/index",
+    "pages/my/money/index",
+    "pages/my/firend/index",
+    "pages/my/setting/index"
   ],
   "window": {
     "navigationBarTextStyle": "black",

app.wxss

@@ -155,6 +155,9 @@ page-container .content{
 .money-promation{
   color:#FF8400;
 }
+.money-blue{
+  color:#1A4DEB;
+}
 .money-promation::before{
   content: "-¥ ";
 }
@@ -176,3 +179,95 @@ page-container .content{
   left:0;right:0;
   background-color: #fff;
 }
+
+
+.cells{
+  margin:20rpx;
+  border-radius: 24rpx;
+  background-color: #fff;
+  overflow: hidden;
+}
+.cells .cell{
+  display: flex;
+  align-items: center;
+  padding:0 40rpx;
+  min-height: 116rpx;
+  font-size: 30rpx;
+  position: relative;
+}
+.cells .cell.cell-active{
+  background-color:rgba(0,0,0,.1);
+}
+.cells .cell::after{
+  content: '';
+  border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
+  position: absolute;
+  bottom:0;
+  left:40rpx;
+  right:40rpx;
+}
+.cells .cell:last-child::after{
+  border:0;
+}
+.cells .cell-hd{
+  margin-right:20rpx;
+}
+.cells .cell-hd .icon{
+  width:40rpx;height:40rpx;
+  vertical-align: middle;
+}
+.cells .cell-bd{
+  flex:1;
+}
+.cells .cell-ft{
+  position: relative;
+  padding-right:40rpx;
+}
+.cells .cell-ft::after{
+  content:" ";
+  width:24rpx;height:48rpx;
+  -webkit-mask-position:0 0;
+  mask-position:0 0;
+  -webkit-mask-repeat:no-repeat;
+  mask-repeat:no-repeat;
+  -webkit-mask-size:100%;
+  mask-size:100%;
+  background-color:currentColor;
+  color:var(--weui-FG-2);
+  -webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);position:absolute;top:50%;right:0;margin-top:-24rpx
+}
+
+.tab-bar{
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+  font-size: 34rpx;
+  font-weight: 600;
+}
+.tab-bar .item-container{
+  flex:1;
+  text-align: center;
+}
+.tab-bar .item{
+  position: relative;
+  padding:40rpx 0;
+  color: #7C8695;
+  transition-duration: .4s;
+  display: inline-block;
+}
+.tab-bar .item::before{
+  opacity: 0;
+  content: "";
+  height:8rpx;
+  width:100%;
+  position: absolute;
+  bottom:0;
+  background-color: #1A4DEB;
+  transition-duration: .4s;
+}
+.tab-bar .current .item{
+  color: #000;
+}
+.tab-bar .current .item::before{
+  opacity: 1;
+}

pages/my/coupon/index.js

@@ -0,0 +1,71 @@
+// pages/my/coupon/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    tabIndex:0
+
+  },
+
+  changeTab(event){
+    const tabIndex = event.currentTarget.dataset.index;
+    this.setData({tabIndex})
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/my/coupon/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "跑腿券"
+}

pages/my/coupon/index.wxml

@@ -0,0 +1,21 @@
+<view class="tab-bar">
+  <view class="item-container {{tabIndex==0?'current':''}}" bind:tap="changeTab" data-index="0">
+    <view class="item">待使用</view>
+  </view>
+  <view class="item-container {{tabIndex==1?'current':''}}" bind:tap="changeTab" data-index="1">
+    <view class="item">已使用</view>
+  </view>
+  <view class="item-container {{tabIndex==2?'current':''}}" bind:tap="changeTab" data-index="2">
+    <view class="item">已失效</view>
+  </view>
+</view>
+
+<view class="coupon-list">
+  <view class="item" wx:for="{{3}}" wx:key="index">
+    <view class="left">
+      <view class="name">平台奖励跑腿券</view>
+      <view class="desc">有效期至2025.03.06</view>
+    </view>
+    <view class="right money money-blue">3.0</view>
+  </view>
+</view>

pages/my/coupon/index.wxss

@@ -0,0 +1,41 @@
+.coupon-list{
+
+}
+.coupon-list .item{
+  display: flex;
+  margin:20rpx;
+  padding:50rpx 40rpx 50rpx 44rpx;
+  background-color: #fff;
+  border-radius: 18rpx;
+  box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+}
+.coupon-list .item .left{
+  flex:1;
+}
+.coupon-list .item .name{
+  font-size: 34rpx;
+  font-weight: 500;
+}
+.coupon-list .item .desc{
+  font-weight: 26rpx;
+  color: #888888;
+  margin-top:40rpx;
+}
+.coupon-list .item .money{
+  font-size:54rpx;
+}
+.coupon-list .item::before,.coupon-list .item::after{
+  content:'';
+  position: absolute;
+  width:24rpx;height:24rpx;
+  left:-12rpx;top:calc(50% - 12rpx);
+  background: #F5F5F5;
+  border-radius: 50%;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+}
+.coupon-list .item::before{
+  right:-12rpx;
+  left:auto;
+}

pages/my/firend/index.js

@@ -0,0 +1,66 @@
+// pages/my/firend/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/my/firend/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "我的邻友"
+}

pages/my/firend/index.wxml

@@ -0,0 +1,12 @@
+<view class="firend-list">
+  <view class="item" wx:for="{{3}}" wx:key="index">
+    <view class="left">
+      <view class="name">跑腿订单返现</view>
+      <view class="desc">134****6777</view>
+    </view>
+    <view class="right">
+      <view class="status">待使用</view>
+      <view class="desc">2023.04.06 17:00</view>
+    </view>
+  </view>
+</view>

pages/my/firend/index.wxss

@@ -0,0 +1,29 @@
+
+.firend-list .item{
+  display: flex;
+  margin:20rpx;
+  padding: 30rpx;
+  background-color: #fff;
+  border-radius: 18rpx;
+}
+.firend-list .item .left{
+  flex:1;
+}
+.firend-list .item .right{
+  text-align: right;
+}
+.firend-list .item .name{
+  font-size: 32rpx;
+  font-weight: 500;
+}
+.firend-list .item .desc{
+  font-size: 30rpx;
+  color: #888888;
+  margin-top:34rpx;
+}
+.firend-list .item .left .desc{
+  font-size: 34rpx;
+}
+.firend-list .item .status{
+  color:#1A4DEB;
+}

pages/my/index/index.js

@@ -8,6 +8,17 @@ Page({
 
   },
 
+  goToCouponList(){
+    wx.navigateTo({
+      url: '/pages/my/coupon/index',
+    })
+  },
+  goToMoney(){
+    wx.navigateTo({
+      url: '/pages/my/money/index',
+    })
+  },
+
   /**
    * 生命周期函数--监听页面加载
    */

pages/my/index/index.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationStyle": "custom"
 }

pages/my/index/index.wxml

@@ -1,2 +1,50 @@
-<!--pages/my/index/index.wxml-->
+<view class="user-info">
-<text>pages/my/index/index.wxml</text>
+  <view class="content">
+    <image class="avatar" src="/assets/imgs/for_test/avatar.png"/>
+    <view class="name">微信用户</view>
+    <navigator class="setting" url="/pages/my/setting/index">
+      <image src="/assets/icon/my/setting@2x.png" class="icon"/>
+    </navigator>
+  </view>
+</view>
+
+<view class="page-container property">
+  <view class="item" bind:tap="goToCouponList">
+    <view class="value">2</view>
+    <view class="key">跑腿券(张)</view>
+  </view>
+  <view class="item" bind:tap="goToMoney">
+    <view class="money value">0.0</view>
+    <view class="key">消费金(元)</view>
+  </view>
+</view>
+
+<view class="cells">
+  <navigator url="" class="cell" hover-class="cell-active">
+    <view class="cell-hd">
+      <image class="icon" src="/assets/icon/my/share@2x.png"></image>
+    </view>
+    <view class="cell-bd">
+      <view>邀请邻友</view>
+    </view>
+    <view class="cell-ft"></view>
+  </navigator>
+  <navigator url="/pages/my/firend/index" class="cell" hover-class="cell-active">
+    <view class="cell-hd">
+      <image class="icon" src="/assets/icon/my/firend@2x.png"></image>
+    </view>
+    <view class="cell-bd">
+      <view>我的邻友</view>
+    </view>
+    <view class="cell-ft"></view>
+  </navigator>
+  <navigator url="" class="cell" hover-class="cell-active">
+    <view class="cell-hd">
+      <image class="icon" src="/assets/icon/my/cs@2x.png"></image>
+    </view>
+    <view class="cell-bd">
+      <view>在线客服</view>
+    </view>
+    <view class="cell-ft"></view>
+  </navigator>
+</view>

pages/my/index/index.wxss

@@ -1 +1,79 @@
-/* pages/my/index/index.wxss */
+.user-info{
+  height:460rpx;
+  background-color: #1A4DEB;
+  position: relative;
+  overflow: hidden;
+}
+.user-info::before{
+  content:'';
+  position: absolute;
+  width:215rpx;height:215rpx;
+  border: 50rpx solid #2459FF;
+  border-top:0;
+  border-left: 0;
+  top:0;left:0;
+  border-radius: 0 0 100% 0;
+}
+.user-info::after{
+  content:'';
+  position: absolute;
+  width:135rpx;height:135rpx;
+  border: 50rpx solid #2459FF;
+  border-right:0;
+  border-bottom: 0;
+  right:0;bottom:0;
+  border-radius: 100% 0 0 0;
+  z-index: 0;
+}
+
+.user-info .content{
+  display: flex;
+  align-items: center;
+  margin:218rpx 40rpx 0 46rpx;
+  position: relative;
+  z-index: 1;
+}
+.user-info .content .avatar{
+  width:112rpx;height:112rpx;
+}
+.user-info .content .name{
+  color:#fff;
+  font-size: 36rpx;
+  font-weight: 600;
+  flex:1;
+  margin-left:30rpx;
+}
+.user-info .content .setting{
+  background-color: #fff;
+  width:66rpx;height:66rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  padding:18rpx 16rpx;
+  box-sizing: border-box;
+}
+.user-info .content .setting .icon{
+  width:36rpx;height:30rpx;
+}
+
+.property{
+  padding:52rpx 0;
+  display: flex;
+  margin-top: -100rpx;
+  position: relative;
+}
+.property .item{
+  flex:1;
+  text-align: center;
+}
+.property .item:first-child{
+  border-right:1rpx solid rgba(124, 134, 149, 0.3);
+}
+.property .item .key{
+  margin-top: 36rpx;
+  font-size: 28rpx;
+}
+.property .item .value{
+  font-size:56rpx;
+  color:#1A4DEB;
+}

pages/my/money/index.js

@@ -0,0 +1,66 @@
+// pages/my/money/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/my/money/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "消费金"
+}

pages/my/money/index.wxml

@@ -0,0 +1,15 @@
+<view class="consume">
+  <view class="title">消费金 (元)</view>
+  <view class="money">3.3</view>
+  <view class="tips">买券自动抵扣</view>
+</view>
+
+<view class="money-list">
+  <view class="item" wx:for="{{3}}" wx:key="index">
+    <view class="left">
+      <view class="name">跑腿订单返现</view>
+      <view class="desc">2024.03.01 10:12:20</view>
+    </view>
+    <view class="money money-blue">3.3</view>
+  </view>
+</view>

pages/my/money/index.wxss

@@ -0,0 +1,53 @@
+
+.consume{
+  border-radius: 18rpx;
+  background: linear-gradient(270deg, #3566FF 0%, #1A4DEB 60%);
+  box-shadow: 0 10rpx 10rpx 0 rgba(54, 98, 236, 0.2);
+  margin:20rpx;
+  padding:40rpx 30rpx;
+  color:#fff;
+  position:relative;
+}
+.consume .title{
+  font-size: 32rpx;
+}
+.consume .money{
+  font-size: 70rpx;
+  margin-top:40rpx;
+  color:#fff;
+}
+.consume .tips{
+  position:absolute;
+  right:0;top:32rpx;
+  border-radius: 60rpx 0 0 60rpx;
+  background-color: #1A4DEB;
+  line-height: 40rpx;
+  font-size: 22rpx;
+  padding:0 16rpx;
+}
+
+.money-list{
+  margin-top:46rpx;
+}
+.money-list .item{
+  display: flex;
+  margin:20rpx;
+  padding: 30rpx;
+  background-color: #fff;
+  border-radius: 18rpx;
+}
+.money-list .item .left{
+  flex:1;
+}
+.money-list .item .name{
+  font-size: 34rpx;
+  font-weight: 500;
+}
+.money-list .item .desc{
+  font-size: 28rpx;
+  color: #888888;
+  margin-top:44rpx;
+}
+.money-list .item .money::before{
+  content: '+';
+}

pages/my/setting/index.js

@@ -0,0 +1,66 @@
+// pages/my/setting/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/my/setting/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/my/setting/index.wxml

@@ -0,0 +1,23 @@
+<view class="cells">
+  <view class="cell">
+    <view class="cell-bd">修改头像</view>
+    <view class="cell-ft">
+      <image src="/assets/imgs/for_test/avatar.png" class="avatar"/>
+    </view>
+  </view>
+  <view class="cell">
+    <view class="cell-bd">修改昵称</view>
+    <view class="cell-ft">西瓜</view>
+  </view>
+</view>
+
+<view class="cells">
+  <view class="cell">
+    <view class="cell-bd">隐私政策</view>
+    <view class="cell-ft"></view>
+  </view>
+  <view class="cell">
+    <view class="cell-bd">用户协议</view>
+    <view class="cell-ft"></view>
+  </view>
+</view>

pages/my/setting/index.wxss

@@ -0,0 +1,3 @@
+.cell .avatar{
+  width:80rpx;height:80rpx;
+}

pages/order/index/index.wxss

@@ -1,38 +1,7 @@
 .nav-bar{
   background-color: #fff;
 }
-.tab-bar{
+
-  display: flex;
-  justify-content: space-between;
-  background-color: #fff;
-  font-size: 34rpx;
-  font-weight: 600;
-}
-.tab-bar .item-container{
-  padding:0 110rpx;
-}
-.tab-bar .item{
-  position: relative;
-  padding:40rpx 0;
-  color: #7C8695;
-  transition-duration: .4s;
-}
-.tab-bar .item::before{
-  opacity: 0;
-  content: "";
-  height:8rpx;
-  width:100%;
-  position: absolute;
-  bottom:0;
-  background-color: #1A4DEB;
-  transition-duration: .4s;
-}
-.tab-bar .current .item{
-  color: #000;
-}
-.tab-bar .current .item::before{
-  opacity: 1;
-}
 
 .order-list{}
 .order-list .item{