feat: 我的收益详情

src/pages.json

@@ -56,12 +56,18 @@
       }
     },
     {
-      "path": "pages/mine/myEarnings",
+      "path": "pages/mine/myEarnings/list",
       "style": {
         "navigationBarTitleText": "我的收益"
       }
     },
     {
+      "path": "pages/mine/myEarnings/detail",
+      "style": {
+        "navigationBarTitleText": "收益详情"
+      }
+    },
+    {
       "path": "pages/mine/address/list",
       "style": {
         "navigationBarTitleText": "我的地址"

src/pages/mine/address/form.vue

@@ -1,11 +1,9 @@
 <template>
 	<zj-page-layout :hasFooter="true">
-		<u-notice-bar direction="column" icon=" " :text="['地址信息仅用于上门服务，隐私信息将完全保密']"></u-notice-bar>
-
 		<view class="form-container">
 			<view class="clipboard">
 				<view class="box">
-					<u--textarea v-model="clipboard" border="none" placeholder="试试粘贴“收件人姓名，手机号，详细地址”，可快速识别您的用户及地址信息"></u--textarea>
+					<u--textarea v-model="clipboard" border="none" :confirmType="'done'" placeholder="试试粘贴“收件人姓名，手机号，详细地址”，可快速识别您的用户及地址信息"></u--textarea>
 					<view class="btns">
 						<u-button text="清空" size="small" @click="clipboard = ''"></u-button>
 						<u-button type="primary" text="识别" size="small" @click="shibie"></u-button>
@@ -35,7 +33,7 @@
 			<view class="row">
 				<view class="title">所在街道</view>
 				<view class="right">
-					<picker @change="onStreetChange" :value="streetValue" :range="streetList" range-key="name" :disabled="!regionValue[2]">
+					<picker @change="onStreetChange" :value="streetValue" :range="streetList" range-key="name" mode="selector" :disabled="!regionValue[2]">
 						<view class="picker">
 							<view v-if="streetValue !== ''">{{streetList[streetValue].name}}</view>
 							<view v-else style="color: #666666;">请选择街道</view>

src/pages/mine/index.vue

@@ -87,7 +87,7 @@ export default {
       userStats: [
         { name: '我的点赞', num: 0, url: '/pages/mine/myLike' },
         { name: '我的收藏', num: 0, url: '/pages/mine/myCollection' },
-        { name: '我的收益', num: 0, url: '/pages/mine/myEarnings' },
+        { name: '我的收益', num: 0, url: '/pages/mine/myEarnings/list' },
       ],
       issueStats: [
         { name: '我的发布', icon: 'icon-xiangji', num: 1 },

src/pages/mine/myEarnings/detail.vue

@@ -0,0 +1,107 @@
+<template>
+  <zj-page-layout
+  	:hasFooter="false"
+  	:isScroll="true"
+  	:refresherTriggered="refresherTriggered"
+  	@refresherrefresh="refresherrefresh">
+    <view class="goods-container">
+      <view class="title">商品信息</view>
+      <view class="goods">
+        <image src="@/static/user/other_book.png"></image>
+        <view class="main">
+          <view class="name">商品名称</view>
+          <view class="des">商品描述</view>
+          <view class="price"><text>¥18.00</text>x2</view>
+        </view>
+      </view>
+      <view class="total">订单总金额<text>¥1200.00</text></view>
+    </view>
+
+    <view class="order-container">
+      <view class="title">订单信息</view>
+      <view class="row">订单编号：1234321232</view>
+      <view class="row">创建时间：1234321232</view>
+      <view class="row">付款时间：1234321232</view>
+      <view class="row">支付方式：1234321232</view>
+      <view class="row">支付单号：1234321232</view>
+      <view class="row">发货时间：1234321232</view>
+      <view class="row">收货时间：1234321232</view>
+      <view class="row">结算金额：<text>¥1200.00</text></view>
+    </view>
+
+  </zj-page-layout>
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+.goods-container {
+  background: #ffffff;
+  margin-top: 30rpx;
+  padding: 30rpx 30rpx 0;
+  .title {
+    font-weight: 500;
+  }
+  .goods {
+    display: flex;
+    padding: 30rpx 0;
+    image {
+      width: 120rpx;
+      height: 120rpx;
+    }
+    .main {
+      flex: 1;
+      margin-left: 20rpx;
+      .name {
+        font-size: 32rpx;
+      }
+      .des {
+        margin-top: 12rpx;
+        font-size: 28rpx;
+        color: $reg-font;
+      }
+      .price {
+        margin-top: 12rpx;
+      	text {
+      		color: $assist-color;
+      		font-weight: 500;
+      		font-size: 32rpx;
+          margin-right: 12rpx;
+      	}
+      }
+    }
+  }
+  .total {
+    border-top: 1px solid #eaeaea;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    font-size: 28rpx;
+    text {
+      margin-left: 12rpx;
+      color: $assist-color;
+    }
+  }
+}
+
+.order-container {
+  background: #ffffff;
+  margin-top: 30rpx;
+  padding: 30rpx;
+  .title {
+    font-weight: 500;
+    margin-bottom: 20rpx;
+  }
+  .row {
+    margin-top: 12rpx;
+    font-size: 28rpx;
+    text {
+      color: $assist-color;
+    }
+  }
+}
+
+</style>

src/pages/mine/myEarnings.vue → src/pages/mine/myEarnings/list.vue

@@ -6,18 +6,33 @@
   	@refresherrefresh="refresherrefresh"
   	@scrolltolower="scrolltolower">
     <view class="total-container">
-      <view class="num">¥1008.00</view>
-      <view class="text">总收益</view>
+      <view class="top">
+        <view class="num">¥1008.00</view>
+        <view class="text">总收益</view>
+      </view>
+      <view class="bottom">
+        <view class="item">
+          <view class="num">¥1008.00</view>
+          <view class="text">已结算</view>
+        </view>
+        <view class="item">
+          <view class="num">¥1008.00</view>
+          <view class="text">待结算</view>
+        </view>
+      </view>
     </view>
     <view class="list-container">
       <view class="title">收益明细</view>
-      <view class="item">
+      <view class="item" @tap="$navPage(`/pages/mine/myEarnings/detail`)">
         <view class="left">
-          <view class="top">订单号：S123456789</view>
-          <view class="time">2023-09-11 21:22:33</view>
+          <view class="row">订单编号：S123456789</view>
+          <view class="row">订单金额：¥1800.00</view>
+          <view class="row">支付时间：2023-09-11 21:22:33</view>
+        </view>
+        <view class="right">
+          <view class="status">已结算</view>
+          <view class="price">+150.00</view>
         </view>
-        <view class="price">+150.00</view>
-        <text class="iconfont icon-jinru"></text>
       </view>
     </view>
   </zj-page-layout>
@@ -82,18 +97,43 @@
 .total-container {
   background: #ffffff;
   margin-top: 30rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 30rpx 0;
-  .num {
-    font-size: 36rpx;
-    color: $assist-color;
-    font-weight: 500;
+  .top {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30rpx 0;
+    .num {
+      font-size: 36rpx;
+      color: $assist-color;
+      font-weight: 500;
+    }
+    .text {
+      font-size: 28rpx;
+      margin-top: 12rpx;
+    }
   }
-  .text {
-    font-size: 28rpx;
-    margin-top: 16rpx;
+  .bottom {
+    display: flex;
+    border-top: 1px solid #eaeaea;
+    .item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 30rpx 0;
+      &:first-child {
+        border-right: 1px solid #eaeaea;
+      }
+      .num {
+        font-size: 36rpx;
+        color: $assist-color;
+        font-weight: 500;
+      }
+      .text {
+        font-size: 28rpx;
+        margin-top: 12rpx;
+      }
+    }
   }
 }
 .list-container {
@@ -106,27 +146,31 @@
   .item {
     background: #ffffff;
     display: flex;
-    align-items: center;
     padding: 20rpx 30rpx;
     margin-top: 20rpx;
     .left {
       flex: 1;
-      .top {
+      .row {
         font-size: 28rpx;
+        margin-top: 12rpx;
+        &:first-child {
+          margin-top: 0;
+        }
       }
-      .time {
-        font-size: 24rpx;
-        color: $sec-font;
-        margin-top: 8rpx;
-      }
-    }
-    .price {
-      color: $assist-color;
-      margin-right: 10rpx;
     }
-    .iconfont {
-      color: $sec-font;
+    .right {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: end;
+      .status {
+        color: $minor-color;
+      }
+      .price {
+        font-weight: 500;
+      }
     }
+
   }
 }
 </style>

src/styles/config.scss

@@ -14,7 +14,7 @@
 // 主题颜色
 $theme-color: #01C30B; // 主题色
 $assist-color: #FF3E42; // 辅助色
-$minor-color: #FF577E; // 次辅色
+$minor-color: #f9ae3d; // 次辅色
 $success-color: #19be6b; // 成功
 
 // 字体颜色