个人中心模块

project.private.config.json

@@ -9,8 +9,29 @@
     "miniprogram": {
       "list": [
         {
+          "name": "pages/infoEdit/index",
+          "pathName": "pages/productSub/infoEdit/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/productManagement/index",
+          "pathName": "pages/productManagement/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/storeManagement/index",
+          "pathName": "pages/storeManagement/index",
+          "query": "isManager=true",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "pages/productManagement/index",
-          "pathName": "pages/earningsOrder/index",
+          "pathName": "pages/mine/index",
           "query": "",
           "launchMode": "default",
           "scene": null

src/app.config.js

@@ -10,9 +10,22 @@ export default defineAppConfig({
     "pages/productManagement/index",
     "pages/productClassify/index",
     "pages/earningsDetail/index",
-    "pages/earningsOrder/index"
+    "pages/earningsOrder/index",
+    "pages/infoEdit/index",
+    "pages/userSpecification/index",
+    "pages/cashOut/index",
+    "pages/cashOutRecord/index",
+    "pages/statementRecords/index",
+    "pages/Alipay/index"
   ],
   subpackages: [
+    {
+      "root": "pages/productSub",
+      "pages": [
+        "infoEdit/index"
+      ],
+      independent: true
+    },
   ],
   navigateToMiniProgramAppIdList: [
     "ttf31985a46c214faf"

src/components/index/ProductList/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { View, Text, Image } from "@tarojs/components";
 import { AtCheckbox } from "taro-ui";
 import Taro from "@tarojs/taro";
@@ -11,6 +11,7 @@ const ProductList = (props) => {
   const { isSeckill } = props; //是否是秒杀产品引用
   const { isManagement } = props; //是否是管理产品引用
   const { isManagementStatus } = props; //是否是管理状态引用
+  const { isSelectAll } = props; //是否是全选
   const [selectedProducts, setSelectedProducts] = useState([]); // 管理选中的商品列表
   // 模拟商品数据
   const products = [
@@ -47,16 +48,26 @@ const ProductList = (props) => {
   ];
   // 跳转产品详情
   const toDetail = (id) => {
-    // if(isManagementStatus){
-    //   handleChange()
-    // }else{
-    //   Taro.navigateTo({
-    //     url: `/pages/productDetail/index?id=${id}`,
-    //   });
-    // }
+    if (isManagementStatus) {
+      selectProduct(id);
+    } else {
+      Taro.navigateTo({
+        url: `/pages/productDetail/index?id=${id}`,
+      });
+    }
   };
+  // 监听 isSelectAll 的变化
+  useEffect(() => {
+    if (isSelectAll) {
+      // 如果 isSelectAll 为 true，选中所有商品
+      setSelectedProducts(products.map((product) => product.id));
+    } else {
+      // 如果 isSelectAll 为 false，取消所有选中
+      setSelectedProducts([]);
+    }
+  }, [isSelectAll]); // 依赖项是 isSelectAll
   // 单选
-  const handleChange = (productId) => {
+  const selectProduct = (productId) => {
     setSelectedProducts((prevSelected) => {
       const isSelected = prevSelected.includes(productId);
       if (isSelected) {
@@ -78,12 +89,12 @@ const ProductList = (props) => {
       )}
       {products.map((product, index) => (
         <View key={product.id}>
-          <View className="product-item">
+          <View onClick={() => toDetail(product.id)} className="product-item">
             {isManagement && isManagementStatus && (
               <AtCheckbox
                 options={[{ value: product.id.toString(), label: "" }]} // 确保每个复选框的 options 是独立的
                 selectedList={selectedProducts.map((id) => id.toString())}
-                onChange={(selectedList) => handleChange(product.id)} // 传递当前 product.id
+                onChange={(selectedList) => selectProduct(product.id)} // 传递当前 product.id
               />
             )}
             <View className="right">

src/components/index/ProductList/index.less

@@ -59,7 +59,6 @@
 
 
         .self-tag {
-          display: inline-block;
           padding: 2px 8px;
           background: #FFD43A;
           border-radius: 4px;

src/pages/Alipay/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '支付宝'
+})

src/pages/Alipay/index.jsx

@@ -0,0 +1,55 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import { AtInput } from "taro-ui";
+import "./index.less";
+import aliPayIcon from "../../images/aliPayIcon.png";
+export default class Index extends Component {
+  state = {
+    name: "", // 账户姓名
+    account: "", // 支付宝账户
+  };
+
+  handleChangeName(value) {
+    this.setState({ name: value });
+  }
+  handleChangeAccount(value) {
+    this.setState({ account: value });
+  }
+  render() {
+    return (
+      <View className="index">
+        {/* 支付宝信息 */}
+        <View className="alipay-info">
+          <AtInput
+            name="value"
+            title="账户姓名"
+            type="text"
+            placeholder="请输入账户姓名"
+            value={this.state.name}
+            onChange={this.handleChangeName.bind(this)}
+          />
+          <AtInput
+            name="value"
+            title="支付宝账户"
+            type="text"
+            placeholder="请输入支付宝账户"
+            value={this.state.account}
+            onChange={this.handleChangeAccount.bind(this)}
+          />
+        </View>
+        {/* 注意 */}
+        <View className="attention">
+          <View className="attention-top">
+            <Image src={aliPayIcon} className="attention-icon" />
+            注意：
+          </View>
+          <View className="attention-bottom">
+            所维护的支付宝账户所有人需要与提现认证提交的自然人为同一人，避免影响提现
+          </View>
+        </View>
+        {/* 提交 */}
+        <View className="submit">提交</View>
+      </View>
+    );
+  }
+}

src/pages/Alipay/index.less

@@ -0,0 +1,62 @@
+.index {
+    padding: 30px 16px;
+    background-color: #f9f9f9;
+    box-sizing: border-box;
+    min-height: 100vh;
+
+    .alipay-info {
+        padding: 0 17px;
+        border-radius: 20px;
+        background-color: #fff;
+        box-sizing: border-box;
+        overflow: hidden;
+
+        .at-input__title {
+            font-size: 28px;
+            color: #000000;
+        }
+
+        .at-input {
+            margin-left: 0;
+        }
+    }
+
+    // 注意
+    .attention {
+        padding: 22px 41px 22px 19px;
+        box-sizing: border-box;
+        background-color: #fdf7e7;
+        border-radius: 20px;
+        margin-top: 20px;
+        font-size: 26px;
+        color: #A0A0A0;
+        line-height: 38px;
+
+        .attention-top {
+            display: flex;
+            align-items: center;
+
+            .attention-icon {
+                width: 38px;
+                height: 38px;
+                margin-right: 10px;
+            }
+        }
+    }
+    // 提交
+    .submit{
+        background-color: #f6c71a;
+        margin: 0 16px;
+        position: fixed;
+        bottom: 30px;
+        left: 0;
+        right: 0;
+        height: 88px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28px;
+        color: #000000;
+        border-radius: 70px;
+    }
+}

src/pages/cashOut/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '提现'
+})

src/pages/cashOut/index.jsx

@@ -0,0 +1,54 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import { AtList, AtListItem } from "taro-ui"
+import './index.less'
+
+export default class Index extends Component {
+
+  render () {
+    return (
+      <View className='index'>  
+      {/* 提现 */}
+        <View className='cash-out'>
+          <View className='balance-section'>
+          <View className='balance-info'>
+            <Text className='label'>可提现金额</Text>
+            <View className='amount'>
+              <Text className='integer'>¥888.</Text>
+              <Text className='decimal'>00</Text>
+            </View>
+          </View>
+          <View className='action'>
+            <View className='withdraw-btn'>提现</View>
+          </View>
+        </View>
+      </View>
+      {/* 提现功能 */}
+      <View className='cash-out-function'>
+        <AtList>
+        <AtListItem title='提现认证' extraText='认证审核中' arrow='right' />
+        <AtListItem title='标题记录' extraText='' arrow='right' />
+        <AtListItem title='支付账户' extraText='需维护支付宝账户信息' arrow='right' />
+        <AtListItem title='标题结算单记录' extraText='6月结算单已出' arrow='right' />
+        </AtList>
+      </View>
+      {/* 结算单说明 */}
+      <View className='settlement-statement'>
+        <Text className='title'>结算单说明</Text>
+        <View className='contentBox'>
+        <View className='content indent'>1. 每月 <Text className='highlight'>27</Text>号 出上月结算单</View>
+        <View className='content sub-content'>收益可在当月27号至30号全天申请提现</View>
+        <View className='content sub-content'>错过需要等下个月,提现金额会在1-5个工作日到账</View>
+        <View className='content indent'>2. 会员需要在提现前完成 提现认证 并审核通过</View>
+        <View className='content sub-content'>维护完善 支付宝账户信息，否则将影响提现进行</View>
+        <View className='content indent'>3. 结算单收益:订单完成时间在上个月的总收益</View>
+        <View className='content sub-content'>上个月【已付款】但未完成订单可在下个月提现</View>
+        <View className='content indent'>4. 可提现金额已扣除各项税费，提现金额需大于1元</View>
+        <View className='content indent'>5. 本月未提现收益不会清 0</View>
+        <View className='content sub-content'>会累积到账户余额，下个月合并提现</View>
+        </View>
+      </View>
+      </View>
+    )
+  }
+}

src/pages/cashOut/index.less

@@ -0,0 +1,118 @@
+.index {
+    min-height: 100vh;
+    background-color: #f0f2f5;
+    padding: 20px 16px 0 16px;
+    box-sizing: border-box;
+
+}
+
+.cash-out {
+    .balance-section {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #fff;
+        border-radius: 20px;
+        padding: 0 17px;
+        box-sizing: border-box;
+
+        .balance-info {
+            padding: 35px 0 25px 0;
+            box-sizing: border-box;
+
+            .label {
+                font-size: 28px;
+                color: #000000;
+                display: block;
+                margin-bottom: 11px;
+                line-height: 41px;
+                font-weight: 500;
+            }
+
+            .amount {
+                display: flex;
+                align-items: baseline;
+                font-weight: 700;
+                line-height: 70px;
+                color: #F6C71A;
+
+                .integer {
+                    font-size: 48px;
+                }
+
+                .decimal {
+                    font-size: 36px;
+                }
+            }
+        }
+
+        .action {
+            .withdraw-btn {
+                color: #F6C71A;
+                padding: 13px 53px;
+                line-height: 38px;
+                border-radius: 60px;
+                font-size: 26px;
+                border: 1px solid #F6C71A;
+            }
+        }
+    }
+}
+
+// 提现功能
+.cash-out-function {
+    margin-top: 20px;
+    border-radius: 20px;
+    background-color: #fff;
+    overflow: hidden;
+
+    .item-content__info-title {
+        font-weight: 500;
+        font-size: 28px;
+        color: #000000;
+    }
+    .item-extra__info{
+        font-size: 24px;
+    }
+    .at-list__item-extra{
+        max-width: 400px;
+    }
+    .at-list__item .item-extra__icon-arrow{
+        font-size: 32px;
+    }
+    .at-list__item{
+        padding: 31px 17px;
+    }
+}
+// 结算单说明
+.settlement-statement{
+    margin-top: 30px;
+    padding: 0 17px;
+    box-sizing: border-box;
+    .title{
+        font-size: 24px;
+        line-height: 35px;
+        color: #000000;
+    }
+    .contentBox{
+        margin-top: 10px;
+    }
+    .content{
+        font-size: 22px;
+        line-height: 32px;
+        color: #B5B5B5;
+        
+        &.indent {
+            padding-left: 24px;
+            text-indent: -24px;
+        }
+        
+        &.sub-content {
+            padding-left: 24px;
+        }
+
+        .highlight{
+            color: #EC8F2B;
+        }
+    }
+}

src/pages/cashOutRecord/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '提现记录'
+})

src/pages/cashOutRecord/index.jsx

@@ -0,0 +1,45 @@
+import { Component } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import './index.less'
+import wallet from '../../images/wallet.png'
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        {/* 提现记录 */}
+        <View className='cash-out-record'>
+          {/* 累计提现金额 */}
+          <View className='total-amount'>
+            <View className='left'>
+              <Image src={wallet} className='icon' />
+              <Text className='title'>累计提现金额</Text>
+            </View>
+            <View className='amount'>
+              <Text className='integer'>￥10000.</Text>
+              <Text className='decimal'>00</Text>
+            </View>
+          </View>
+          {/* 提现记录 */}
+          <View className='record-item'>
+            <View className='item-time'>2024-06-27 10:00:00</View>
+            <View className='item-amount'>
+              <View className='amount'>￥ 10000.00</View>
+              <View className='status'>提现成功</View>
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}

src/pages/cashOutRecord/index.less

@@ -0,0 +1,84 @@
+.index {
+    background-color: #f9f9f9;
+    min-height: 100vh;
+    padding: 30px 16px 0 16px;
+    box-sizing: border-box;
+
+    .cash-out-record {
+        .total-amount {
+            height: 170px;
+            background-color: #fff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 17px;
+            box-sizing: border-box;
+
+            .left {
+                display: flex;
+                align-items: center;
+
+                .icon {
+                    width: 60px;
+                    height: 60px;
+                    margin-right: 10px;
+                }
+
+                .title {
+                    color: #000000;
+                    line-height: 41px;
+                    font-size: 28px;
+                }
+            }
+
+            .amount {
+                display: flex;
+                align-items: baseline;
+                color: #F6C71A;
+                font-weight: bold;
+
+                .integer {
+                    font-size: 48px;
+                }
+
+                .decimal {
+                    font-size: 36px;
+                }
+            }
+        }
+
+        // 提现记录
+        .record-item {
+            background-color: #fff;
+            padding: 46px 16px 0 16px;
+            box-sizing: border-box;
+            border-radius: 20px;
+            display: flex;
+            justify-content: space-between;
+            height: 170px;
+            margin-top: 26px;
+            .item-time {
+                font-size: 26px;
+                color: #000000;
+                line-height: 38px;
+            }
+
+            .item-amount {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+                .status {
+                    font-size: 24px;
+                    color: #91A95B;
+                    line-height: 35px;
+                }
+
+                .amount {
+                    font-size: 28px;
+                    color: #000000;
+                    line-height: 41px;
+                }
+            }
+        }
+    }
+}

src/pages/infoEdit/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '编辑个人信息'
+})

src/pages/infoEdit/index.jsx

@@ -0,0 +1,76 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import { AtInput } from "taro-ui";
+import "./index.less";
+
+export default class Index extends Component {
+  state = {
+    wxAccount: "",
+    nickName: "",
+    phone: "",
+  };
+  handleAccountChange (value) {
+    this.setState({
+      wxAccount: value,
+    });
+    return value;
+  }
+  handleNickNameChange (value) {
+    this.setState({
+      nickName: value,
+    });
+    return value;
+  }
+  handlePhoneChange (value) {
+    this.setState({
+      phone: value,
+    });
+    return value;
+  }
+  render() {
+    return (
+      <View className="index">
+        {/* 头像 */}
+        <View className="info-edit">
+          <Image
+            src="https://video-img.fyshark.com/1731495433480WechatIMG674.jpg"
+            className="info-edit-img"
+          />
+          <Text className="info-edit-title">更换头像</Text>
+        </View>
+        {/* 内容 */}
+        <View className="info-edit-content">
+          <AtInput
+            name="value"
+            title="微信账号"
+            type="text"
+            placeholder="请输入微信账号"
+            value={this.state.wxAccount}
+            onChange={this.handleAccountChange.bind(this)}
+          />
+          <AtInput
+            name="value"
+            title="鱼市昵称"
+            type="text"
+            placeholder="请输入鱼市昵称"
+            value={this.state.nickName}
+            onChange={this.handleNickNameChange.bind(this)}
+          />
+          <AtInput
+          border={false}  
+            name="value"
+            title="手机号"
+            type="text"
+            placeholder="请输入手机号"
+            value={this.state.phone}
+            onChange={this.handlePhoneChange.bind(this)}
+          />
+        </View>
+        {/* 提交按钮 */}
+        <View className="info-edit-submit">
+          <Text className="info-edit-submit-text">提交</Text>
+        </View>
+      </View>
+    );
+  }
+}

src/pages/infoEdit/index.less

@@ -0,0 +1,53 @@
+.index{
+    padding-top: 67px;
+    background-color: #f5f5f5;
+    min-height: 100vh;
+    // 头像
+    .info-edit{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 36px;
+        .info-edit-img{
+            width: 210px;
+            height: 210px;
+            border-radius: 50%;
+            margin-bottom: 14px;
+        }
+        .info-edit-title{
+            line-height: 41px;
+            font-size: 28px;
+            color: #F09A31;
+        }
+    }
+    // 内容
+    .info-edit-content{
+        margin: 0 16px;
+        border-radius: 20px;
+        overflow: hidden;
+        padding: 0 20px;
+        background-color: #fff;
+        .at-input__title{
+            font-size: 28px;
+            color: #222222;
+        }
+    }
+    // 提交按钮
+    .info-edit-submit{
+        position: fixed;
+        bottom: 30px;
+        left: 0;
+        right: 0;
+        margin: 0 16px;
+        background-color: #f6c71a;
+        border-radius: 70px;
+        height: 88px;
+        font-size: 28px;
+        color: #000000;
+        font-weight: 700;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

src/pages/mine/index.config.js

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '我的小店'
+  navigationBarTitleText: '鱼市'
 })

src/pages/mine/index.jsx

@@ -1,23 +1,54 @@
 import { Component } from 'react'
-import { View, Text } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { View, Text, Image } from '@tarojs/components'
+import { AtList, AtListItem } from "taro-ui"
 import './index.less'
-
+import loginOut from '../../images/mine/loginOut.png'
+import edit from '../../images/mine/edit.png'
+import norm from '../../images/mine/norm.png'
 export default class Index extends Component {
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
+  handleLogout = () => {
+    Taro.showModal({
+      title: '',
+      content: '退出后，请重新登录!',
+      cancelText: '暂不退出',
+      confirmText: '退出登录',
+      cancelColor: '#000000',
+      confirmColor: '#F6C71A',
+      success: function (res) {
+        if (res.confirm) {
+          console.log('用户点击退出登录')
+        }
+      }
+    })
+  }
 
   render () {
     return (
       <View className='index'>
-        <Text>我的</Text>
+        {/* 个人信息 */}
+        <View className="info">
+          <Image src='' className="avatar" />
+          <View className="info-right">
+            <View className='user-info'>
+            <View className="name">张三</View>
+            <View className="account">138001</View>
+            </View>
+            <Image className='edit-icon' src={edit}></Image>
+          </View>
+        </View>
+        {/* 功能 */}
+        <View className='function'>
+          <AtList>
+            <AtListItem title='用户规范' arrow='right' thumb={norm}/>
+            <AtListItem 
+              title='退出登录' 
+              arrow='right' 
+              thumb={loginOut}
+              onClick={this.handleLogout}
+            />
+          </AtList>
+        </View>
       </View>
     )
   }

src/pages/mine/index.less

@@ -0,0 +1,73 @@
+.index {
+    background-color: #f5f5f5;
+    padding: 0 16px;
+    box-sizing: border-box;
+    min-height: 100vh;
+
+    .info {
+        height: 170px;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        box-sizing: border-box;
+        justify-content: space-between;
+
+        .avatar {
+            width: 116px;
+            height: 116px;
+            border-radius: 50%;
+            margin-right: 18px;
+            background-color: red;
+        }
+
+        .info-right {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex: 1;
+
+            .user-info {
+                color: #000000;
+
+                .name {
+                    font-size: 34px;
+                    line-height: 49px;
+                }
+
+                .account {
+                    font-size: 28px;
+                    line-height: 41px;
+                }
+            }
+
+            .edit-icon {
+                width: 28px;
+                height: 28px;
+            }
+        }
+    }
+
+    // 功能
+    .function {
+        border-radius: 20px;
+        overflow: hidden;
+        background-color: #ffffff;
+
+        .at-list__item .item-extra__icon-arrow {
+            font-size: 44px;
+        }
+
+        .at-list__item--thumb .item-thumb {
+            width: 40px;
+            height: 40px;
+        }
+
+        .item-content__info-title {
+            font-size: 28px;
+            color: #000000;
+        }
+        .at-list__item{
+            padding: 31px 17px;
+        }
+    }
+}

src/pages/productManagement/index.jsx

@@ -14,10 +14,11 @@ export default class Index extends Component {
   state = {
     isManagementStatus: false, //是否是管理状态
     current: 0, //tabs坐标
+    isSelectAll: false, //是否全选
     selectedOption: "全部商品", //商品默认名称
     tabList: [{ title: "在售中 (20)" }], //tabs标题
     options: ["全部商品", "选项2", "选项3"], //商品下拉选项
-    checkedList: ["all"], //全选
+    checkedList: [""], //全选
     checkboxOption: [
       {
         value: "allValue",
@@ -52,6 +53,7 @@ export default class Index extends Component {
   handleChange(value) {
     this.setState({
       checkedList: value,
+      isSelectAll:!this.state.isSelectAll
     });
   }
   render() {
@@ -88,7 +90,7 @@ export default class Index extends Component {
                   </View>
                 </View>
                 {/* 商品列表 */}
-                <ProductList isManagement={true} isManagementStatus={this.state.isManagementStatus}/>
+                <ProductList isSelectAll={this.state.isSelectAll} isManagement={true} isManagementStatus={this.state.isManagementStatus}/>
               </View>
             </AtTabsPane>
           </AtTabs>

src/pages/productSub/infoEdit/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '编辑个人信息'
+})

src/pages/productSub/infoEdit/index.jsx

@@ -0,0 +1,25 @@
+import { Component } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import './index.less'
+import vip from '../../../images/index/back-top.png'
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <Image src='https://video-img.fyshark.com/1731495433480WechatIMG674.jpg' className='vip-icon' />
+        <Text>编辑个人信息</Text>
+      </View>
+    )
+  }
+}

src/pages/productSub/infoEdit/index.less

@@ -0,0 +1,4 @@
+Image{
+    height: 200px;
+    width: 200px;
+}

src/pages/statementRecords/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '结算单记录'
+})

src/pages/statementRecords/index.jsx

@@ -0,0 +1,49 @@
+import { Component } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import './index.less'
+import statementRecordsIcon from '../../images/statementRecordsIcon.png'
+export default class Index extends Component {
+
+
+  state = {
+    records: [
+      { month: '2020年06月结算单', amount: '70' },
+      { month: '2020年05月结算单', amount: '85' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+    ]
+  }
+
+  render () {
+    return (
+      <View className='index'>
+        {/* 结算单记录列表 */}
+        <View className='record-list'>
+          {this.state.records.map((item, index) => (
+            <View className='record-item' key={index}>
+              <View className='left'>
+                <Image src={statementRecordsIcon} className='icon' />
+                <Text className='month'>{item.month}</Text>
+              </View>
+              <View className='right'>
+                <Text className='amount'>¥{item.amount}</Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      </View>
+    )
+  }
+}

src/pages/statementRecords/index.less

@@ -0,0 +1,48 @@
+.index {
+    background-color: #f9f9f9;
+    padding: 30px 16px;
+    min-height: 100vh;
+    box-sizing: border-box;
+    .record-list {
+        background-color: #fff;
+        padding: 0 17px;
+        border-radius: 20px;
+        overflow: hidden;
+
+        .record-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 100px;
+            border-bottom: 1px solid #D8D8D8;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            .left {
+                display: flex;
+                align-items: center;
+
+                .icon {
+                    height: 52px;
+                    width: 52px;
+                    margin-right: 10px;
+                }
+
+                .month {
+                    color: #444444;
+                    font-size: 28px;
+                }
+            }
+
+            .right {
+                .amount {
+                    color: #666666;
+                    font-size: 28px;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+}

src/pages/userSpecification/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '用户规范'
+})

src/pages/userSpecification/index.jsx

@@ -0,0 +1,24 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import './index.less'
+
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <Text>用户规范</Text>
+      </View>
+    )
+  }
+}