order

package.json

@@ -56,8 +56,7 @@
     "autoprefixer": "^10.4.14",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-refresh": "^0.11.0",
+    "react-refresh": "^0.11.0"
-    "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",

src/app.config.js

@@ -4,6 +4,26 @@ export default defineAppConfig({
     'pages/login/index',
     'pages/register/index',
     'pages/forgot/index',
+    'pages/goods-detail/index',
+    'pages/shopping/index',
+    'pages/settle/index',
+    'pages/pay-success/index',
+    'pages/address/index',
+    'pages/address-create/index',
+    'pages/change-pwd/index',
+    'pages/change-phone/index',
+    'pages/home/index',
+    'pages/user-info/index',
+    'pages/add-card/index',
+    'pages/my-card/index',
+    'pages/team/index',
+    'pages/cash/index',
+    'pages/balance/index',
+    'pages/transfer/index',
+    'pages/income/index',
+    'pages/conversion/index',
+    'pages/scope/index',
+    'pages/order/index',
   ],
   window: {
     backgroundTextStyle: 'light',
@@ -11,5 +31,12 @@ export default defineAppConfig({
     navigationBarTitleText: 'WeChat',
     navigationBarTextStyle: 'black',
     navigationStyle: 'custom'
-  }
+  },
+  components: [
+    'pages/index/index',
+    'pages/login/index',
+    'pages/register/index',
+    'pages/forgot/index',
+    'pages/goods-detail/index',
+  ]
 })

src/app.scss

@@ -4,6 +4,18 @@
     color: #2196F3;
 }
 
+.text-gold {
+    color: #F67952
+}
+
+.text96c {
+    color: #F96C6C;
+}
+
+.text853 {
+    color: #34A853;
+}
+
 .text-base {
     font-size: 16px;
     line-height: 24px;
@@ -24,6 +36,10 @@
     text-align: right;
 }
 
+.t14 {
+    font-size: 14px;
+}
+
 
 .grid {
     display: grid;
@@ -76,10 +92,18 @@
     margin-left: 30px;
 }
 
+.ml17 {
+    margin-left: 17px;
+}
+
 .mt-8 {
     margin-top: 32px;
 }
 
+.mt20 {
+    margin-top: 20px;
+}
+
 .mt-22 {
     margin-top: 22px;
 }
@@ -99,3 +123,73 @@
 .bottom-16 {
     bottom: 16px;
 }
+
+.columns-2 {
+    columns: 2;
+}
+
+.top-10 {
+    top: 10px
+}
+
+.left-10 {
+    left: 10px;
+}
+
+.next-icon {
+    width: 6px;
+    height: 10px;
+}
+
+.bt-none {
+    border-bottom: none !important
+}
+
+
+.nav-icon {
+    background: #FFFFFF;
+    box-shadow: 0px 16px 50px 0px rgba(49, 79, 124, 0.08);
+    border-radius: 16px 16px 16px 16px;
+}
+
+.addr-detail-title {
+    width: 100vw;
+    height: 60px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #1F2933;
+    line-height: 60px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-start {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.flex-around {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}

src/components/action.jsx

@@ -4,26 +4,31 @@ import { View } from '@tarojs/components';
 import cart from '@/images/cart.png'
 import cart1 from '@/images/cart1.png'
 import home1 from '@/images/home1.png'
+import home from '@/images/home.png'
 import user from '@/images/user.png'
+import user1 from '@/images/user1.png'
 import './action.scss'
 import { useState } from 'react';
 import Taro from '@tarojs/taro'
+import { useRouter } from '@tarojs/taro';
 
-const home = home1
 
 const TabbarAction = (props = {}) => {
-
+    const router = useRouter()
     const { index = 0 } = props
 
     const [activeIndex, setActiveIndex] = useState(index)
 
 
     const onSwitch = (_, id) => {
+        if (activeIndex == id) {
+            return
+        }
         setActiveIndex(id)
         if (id === 0) {
             nav('/pages/index/index')
         } else if (id === 1) {
-            nav('/pages/goods/index')
+            nav('/pages/shopping/index')
         } else if (id === 2) {
             nav('/pages/home/index')
         }
@@ -37,7 +42,7 @@ const TabbarAction = (props = {}) => {
 
 
     return <View>
-        <Tabbar bottom size={24} className='tabbar-container' onSwitch={onSwitch} activeVisible={activeIndex}
+        <Tabbar bottom size={24} className='tabbar-container' onSwitch={onSwitch} activeVisible={activeIndex} visible={activeIndex}
             unactiveColor='#A9A9AA'
             activeColor='#F67952'
         >

src/pages/add-card/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '我的团队'
+})

src/pages/add-card/index.jsx

@@ -0,0 +1,113 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [account, setAccount] = useState('')
+    const [pwd, setPwd] = useState()
+    const [loginMode, setLoginMode] = useState('account')
+
+    const [mobile, setMobile] = useState('')
+    const [smsCode, setSmsCode] = useState('')
+    const [interval, setIntervalTime] = useState(0)
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    // 去登陆
+    const loginFn = () => {
+        Taro.redirectTo({
+            url: '/pages/login/index'
+        })
+    }
+
+    //清理数据
+    const cleanFn = () => {
+        if (loginMode === 'account') {
+            setAccount('')
+            setPwd('')
+            return
+        }
+        setMobile('')
+        setSmsCode('')
+    }
+
+    // 倒计时
+    const countDown = () => {
+        if (!mobile) {
+            return
+        }
+        setIntervalTime(60)
+        if (interval > 0) {
+            return
+        }
+        let start = 60
+        const timer = setInterval(() => {
+            if (start > 0) {
+                start--
+                if (start <= 0) {
+                    clearInterval(timer)
+                }
+                setIntervalTime(start)
+            }
+        }, 1000)
+    }
+
+    return <View className="login-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            添加银行卡
+
+        </View>
+        <View className="change-pwd-container bg-slate-50 relative">
+            <View>
+                <View className="form-item mt-22">
+                    <View className="form-label">银行卡号</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" placeholder="请输入银行卡号" onInput={(v) => {
+                            setAccount(v.detail.value)
+                        }} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">银行名称</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" type='text' placeholder="请输入银行名称" onInput={(v) => {
+                            setPwd(v.detail.value)
+                        }} />
+                        {
+                            pwd && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+                    </View>
+                </View>
+                <View className="change-phone-footer flex flex-col justify-center">
+                    <Button className="login-btn">保存</Button>
+
+                </View>
+            </View>
+
+        </View>
+
+    </View>
+}
+
+
+export default Login

src/pages/add-card/index.scss

@@ -0,0 +1,117 @@
+.login-header {
+    height: 86px;
+}
+
+.login-frame {
+    height: auto;
+    font-size: 14px;
+    background: #FBFBFD;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+}
+
+.change-pwd-container {
+    width: 375px;
+    height: calc(100vh - 86px);
+    border-radius: 20px 20px 0 0;
+    box-shadow: 0px 8px 51px 0px rgba(230, 234, 238, 0.8);
+    box-sizing: border-box;
+    padding: 20px 30px;
+}
+
+.form-item {
+    height: 68px;
+    opacity: 1;
+}
+
+.form-label {
+    font-size: 12px;
+    font-weight: bold;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    color: #2a2b2d;
+    line-height: 16px;
+}
+
+.form-input>.weui-input {
+    border: none;
+    height: 52px;
+    line-height: 52px;
+    border-bottom: 1px solid #262A34;
+    position: relative;
+    font-size: 16px;
+    color: #000;
+}
+
+.form-input>.weui-input:focus {
+    border-bottom: 2px solid #F67952;
+}
+
+.form-input-placeholder,
+.form-input>.weui-input::placeholder {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: bold;
+    color: #aeafb4;
+}
+
+.form-control {
+    height: 52px;
+    position: relative;
+}
+
+.forgot-password {
+    height: 24px;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #666;
+    line-height: 24px;
+
+    text-align: right;
+}
+
+
+.login-btn {
+    width: 253px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+}
+
+.change-phone-footer {
+    margin-top: 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.quick-login {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #000000;
+    line-height: 24px;
+    margin-top: 30px;
+}
+
+.code-btn {
+    width: 83px;
+    height: 30px;
+    background: #F67952;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    font-size: 12px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    border: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    bottom: 12px;
+}

src/pages/address-create/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '编辑地址'
+})

src/pages/address-create/index.jsx

@@ -0,0 +1,167 @@
+import React from 'react'
+import { Image, Text, View, Input, Label } from '@tarojs/components'
+import './index.scss'
+
+import { useEffect } from 'react';
+import { useState } from 'react';
+import backNav from '@/images/backNav.png'
+import next from '@/images/next.png'
+import uncheck from '@/images/uncheck.png'
+import checked from '@/images/checked.png'
+import Taro from '@tarojs/taro';
+import { useRouter } from '@tarojs/taro';
+import { Button, Textarea, Address } from '@nutui/nutui-react-taro';
+
+
+
+function Index() {
+
+  const param = useRouter().params
+  const [id] = useState(param.id)
+  const [home] = useState(param.home)
+  const [addrId, setAddrId] = useState(0)
+  const [isDefault, setIsDefault] = useState(false)
+  const [user, setUser] = useState('')
+  const [phone, setPhone] = useState('')
+  const [addrInfo, setAddrInfo] = useState('')
+
+
+  const [text, setText] = useState('请选择地址')
+  const [normal, setNormal] = useState(false)
+  const [province, setProvince] = useState([
+    { id: 1, name: '北京', title: 'B' },
+    { id: 2, name: '广西', title: 'G' },
+    { id: 3, name: '江西', title: 'J' },
+    { id: 4, name: '四川', title: 'S' },
+    { id: 5, name: '浙江', title: 'Z' },
+  ])
+
+  const [city, setCity] = useState([])
+
+  const [country, setCountry] = useState([])
+  const [town, setTown] = useState([])
+
+  const [address, setAddress] = useState({
+    province,
+    city,
+    country,
+    town,
+  })
+
+  const onChange = (cal) => {
+    setTimeout(() => {
+      switch (cal.next) {
+        case 'city':
+          setCity([
+            { id: 7, name: '朝阳区', title: 'C' },
+            { id: 8, name: '崇文区', title: 'C' },
+            { id: 9, name: '昌平区', title: 'C' },
+            { id: 6, name: '石景山区', title: 'S' },
+            { id: 3, name: '八里庄街道', title: 'B' },
+            { id: 10, name: '北苑', title: 'B' },
+          ])
+          break;
+        case 'country':
+          setCountry([
+            { id: 3, name: '八里庄街道', title: 'B' },
+            { id: 9, name: '北苑', title: 'B' },
+            { id: 4, name: '常营乡', title: 'C' },
+          ])
+          break;
+        default:
+          setNormal(false)
+      }
+    }, 200)
+  }
+  const close = (val) => {
+    console.log(val, "Data")
+    setNormal(false)
+
+    if (val.data && !!val.data.addressStr) {
+      setText((val.data).addressStr)
+      setAddress({ province: val.data.province, city: val.data.city, country: val.data.country, town: val.data.town })
+    }
+  }
+
+
+  useEffect(() => {
+
+
+  }, [id])
+
+
+  // 跳转
+  const navDetailFn = (id) => {
+    Taro.navigateTo({
+      url: `/pages/pay-success/index?id=${id}`
+    })
+  }
+  // 返回页面
+  const backFn = () => {
+    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+  }
+
+  return (
+    <View className='addr-container'>
+      <View className='addr-detail-title'>
+        <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+        {
+          home ? '我的地址' : "新增地址"
+        }
+
+      </View>
+
+      <View className='addr-body' >
+        <View className='addr-item'>
+          <View className='addr-form'>
+            <View className='addr-form-name'>收货人</View>
+            <Input className='addr-form-input' placeholder='请输入收货人' value={user} onInput={(e) => {
+              setUser(e.detail.value)
+            }} />
+          </View>
+          <View className='addr-form'>
+            <View className='addr-form-name'>电话</View>
+            <Input className='addr-form-input' placeholder='请输入收货人' value={phone} onInput={(e) => {
+              setPhone(e.detail.value)
+            }} />
+          </View>
+          <View className='addr-form'>
+            <View className='addr-form-name'>所在地区</View>
+            <View className='flex justify-between items-center addr-form-input' onClick={() => { setNormal(true) }}>
+              <Label>{text}</Label>
+              <Image src={next} className='next-icon' />
+            </View>
+          </View>
+          <View className='addr-form bt-none'>
+            <View className='addr-form-name '>详细地址</View>
+          </View>
+          <Textarea placeholder='请输入详细地址' autosize rows="4" maxlength={100} defaultValue={addrInfo} onChange={(e) => {
+            setAddrInfo(e)
+          }} />
+        </View>
+        <View className=' mt-22 addr-item'>
+          <View className='addr-form  bt-none' onClick={() => {
+            setIsDefault(x => !x)
+          }}>
+            <View className='text-black'>设为默认地址</View>
+            <Image src={isDefault ? checked : uncheck} className='w-6 h-6' />
+          </View>
+        </View>
+      </View>
+      <Button className='addr-btn' >保存地址</Button>
+
+      <Address
+        modelValue={normal}
+        province={province}
+        city={city}
+        country={country}
+        town={town}
+        customAddressTitle="请选择所在地区"
+        onChange={onChange}
+        onClose={close}
+      />
+    </View>
+  )
+}
+
+export default Index

src/pages/address-create/index.scss

@@ -0,0 +1,109 @@
+.addr-container {
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-size: 14px;
+    background: #FBFBFD;
+    height: 100vh;
+}
+
+.nav-icon {
+    background: #FFFFFF;
+    box-shadow: 0px 16px 50px 0px rgba(49, 79, 124, 0.08);
+    border-radius: 16px 16px 16px 16px;
+}
+
+.addr-detail-title {
+    width: 100vw;
+    height: 60px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #1F2933;
+    line-height: 60px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.addr-body {
+    padding: 21px;
+    height: auto;
+    box-sizing: border-box;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+}
+
+.addr-box {
+    width: 333px;
+    background: #FFFFFF;
+    box-shadow: 4px 7px 9px 0px rgba(56, 63, 68, 0.03);
+    border-radius: 10px 10px 10px 10px;
+    box-sizing: border-box;
+    padding: 0 12px;
+}
+
+.addr-item {
+    width: 333px;
+    background: #FFFFFF;
+    box-shadow: 4px 7px 9px 0px rgba(56, 63, 68, 0.03);
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+}
+
+.addr-form {
+    width: 308px;
+    box-sizing: border-box;
+    height: 48px;
+    border-bottom: 1px solid #F9F9F9;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+}
+
+.addr-form-name {
+    font-weight: bold;
+    color: #000000;
+    font-size: 15px;
+    margin-right: 10px;
+}
+
+.addr-form-input {
+    width: 230px;
+}
+
+.addr-btn {
+    width: 233px;
+    height: 55px;
+    border-radius: 107px 107px 107px 107px;
+    border: none;
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    background: #F67952;
+    position: fixed;
+    bottom: 30px;
+    left: calc((100vw - 233px)/2);
+}
+
+.addr-item>.nut-textarea {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.addr-item .weui-input {
+    color: var(--nutui-textarea-text-color, var(--nutui-gray-1, #1a1a1a));
+
+}

src/pages/address/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '我的地址'
+})

src/pages/address/index.jsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { Image, Text, View } from '@tarojs/components'
+import './index.scss'
+
+import { useEffect } from 'react';
+import { useState } from 'react';
+import backNav from '@/images/backNav.png'
+import uncheck from '@/images/uncheck.png'
+import checked from '@/images/checked.png'
+
+import edit from '@/images/edit.png'
+import Taro from '@tarojs/taro';
+import { useRouter } from '@tarojs/taro';
+import { Button } from '@nutui/nutui-react-taro';
+
+
+
+function Index() {
+
+  const param = useRouter().params
+  const [id] = useState(param.id)
+  const [home] = useState(param.home)
+  const [addrId, setAddrId] = useState(0)
+
+
+  useEffect(() => {
+  }, [id])
+
+
+  // 跳转
+  const navDetailFn = (id) => {
+    Taro.navigateTo({
+      url: `/pages/address-create/index?id=${id}`
+    })
+  }
+  // 返回页面
+  const backFn = () => {
+    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+  }
+
+  return (
+    <View className='addr-container'>
+      <View className='addr-detail-title'>
+        <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+        {
+          home ? '我的地址' : "选择地址"
+        }
+
+      </View>
+
+      <View className='addr-body' >
+        <View className='addr-item'>
+          <View className='addr-icon w-6 h-6' onClick={() => {
+            setAddrId(1)
+          }}>
+            <Image src={addrId == 1 ? checked : uncheck} className="w-6 h-6" />
+          </View>
+          <View className='addr-item-content' onClick={() => {
+            setAddrId(1)
+          }}>
+            <View className='addr-item-title'>
+              <View className='addr-item-name'>李四 18080093730</View>
+              <View className='addr-default'>默认地址</View>
+            </View>
+            <View className='addr-item-info'>四川省成都市天府二街</View>
+          </View>
+          <View className='addr-edit-icon' onClick={() => {
+            navDetailFn('')
+          }}>
+            <Image src={edit} />
+          </View>
+        </View>
+
+      </View>
+      <Button className='addr-btn' onClick={() => {
+        navDetailFn('')
+      }}>新增地址</Button>
+    </View>
+  )
+}
+
+export default Index

src/pages/address/index.scss

@@ -0,0 +1,118 @@
+.addr-container {
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-size: 14px;
+    background: #FBFBFD;
+    height: 100vh;
+}
+
+.nav-icon {
+    background: #FFFFFF;
+    box-shadow: 0px 16px 50px 0px rgba(49, 79, 124, 0.08);
+    border-radius: 16px 16px 16px 16px;
+}
+
+.addr-detail-title {
+    width: 100vw;
+    height: 60px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #1F2933;
+    line-height: 60px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.buy-btn {
+    width: 264px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    position: fixed;
+    bottom: 20px;
+    z-index: 888;
+    border: none;
+    left: calc((100vw - 264px)/2);
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: 22px;
+    font-size: 16px;
+}
+
+.addr-body {
+    padding: 21px;
+    height: auto;
+    box-sizing: border-box;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+}
+
+
+
+.addr-item {
+    width: 333px;
+    height: 86px;
+    background: #FFFFFF;
+    box-shadow: 4px 7px 9px 0px rgba(56, 63, 68, 0.03);
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+}
+
+
+.addr-edit-icon {
+    width: 16px;
+    height: 18px;
+}
+
+.addr-item-content {
+    width: 228px;
+    display: flex;
+    flex-direction: column;
+}
+
+.addr-item-title {
+    display: flex;
+    flex-direction: row;
+    font-weight: 500;
+    color: #000000;
+    line-height: 20px;
+    font-size: 16px;
+}
+
+.addr-default {
+    background: #F67952;
+    border-radius: 6px 6px 6px 6px;
+    font-weight: 400;
+    color: #FFFFFF;
+    font-size: 12px;
+    padding: 2px 6px;
+    margin-left: 8px;
+}
+
+.addr-btn {
+    width: 233px;
+    height: 55px;
+    border-radius: 107px 107px 107px 107px;
+    border: none;
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    background: #F67952;
+    position: fixed;
+    bottom: 30px;
+    left: calc((100vw - 233px)/2);
+}

src/pages/balance/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '我的余额'
+})

src/pages/balance/index.jsx

@@ -0,0 +1,96 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { Picker } from "@nutui/nutui-react-taro"
+import { Tabs, TabPane } from "@nutui/nutui-react-taro"
+import { Infiniteloading } from "@nutui/nutui-react-taro"
+import { useEffect } from "react"
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [tabKey, setTabKey] = useState('0')
+    const [page, setPage] = useState(1)
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+    useEffect(() => { }, [tabKey])
+
+
+    return <View className="cash-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            我的余额
+
+        </View>
+        <View className="balance-container relative">
+            <View className="balance-amount flex-col ">
+                <View className="flex-between mt-22">
+                    <Text>当前余额</Text>
+                    <Text className="balance-amount-price">50000</Text>
+                </View>
+                <View className="flex-around mt-22">
+                    <View className="balance-btn flex-center" onClick={() => {
+                        Taro.navigateTo({ url: '/pages/cash/index' })
+                    }}>立即提现</View>
+                    <View className="balance-btn flex-center" onClick={() => {
+                        Taro.navigateTo({ url: '/pages/transfer/index' })
+                    }}>转赠他人</View>
+                </View>
+            </View>
+
+            <View className="amount-container">
+                <View className="amount-tabs flex-around">
+                    <View className={'tab-pane ' + (tabKey == '0' ? 'tab-pane-active' : '')} onClick={() => setTabKey('0')}>余额流水</View>
+                    <View className={'tab-pane ' + (tabKey == '1' ? 'tab-pane-active' : '')} onClick={() => setTabKey('1')}>充值记录</View>
+                    <View className={'tab-pane ' + (tabKey == '2' ? 'tab-pane-active' : '')} onClick={() => setTabKey('2')}>提现记录</View>
+                </View>
+                <View className="balanceScroll" id="balanceScroll">
+                    <Infiniteloading
+                        containerId="balanceScroll"
+                        useWindow={false}
+                        loadTxt="loading"
+                        loadMoreTxt="没有数据啦～"
+                        loadIcon='loading'
+                        hasMore={false}
+                        onLoadMore={(x) => {
+                            setPage(p => p + 1)
+                            x()
+                        }}
+                    >
+                        <View className="amount-item flex-between">
+                            <View className="amount-item-detail flex-col">
+                                <View>完成每日登陆</View>
+                                <View className="amount-item-time">2021/04/09 19:42:36</View>
+                            </View>
+                            <View className="amount-item-log">+1.00</View>
+                        </View>
+
+                        <View className="amount-item flex-between">
+                            <View className="amount-item-detail flex-col">
+                                <View>完成每日登陆</View>
+                                <View className="amount-item-time">2021/04/09 19:42:36</View>
+                            </View>
+                            <View className="amount-item-log">+1.00</View>
+                        </View>
+                    </Infiniteloading>
+                </View>
+            </View>
+
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/balance/index.scss

@@ -0,0 +1,109 @@
+.cash-frame {
+    min-height: 100vh;
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+}
+
+.balance-container {
+    width: 375px;
+    box-sizing: border-box;
+    padding: 20px 20px;
+}
+
+
+.balance-amount {
+    width: 332px;
+    height: 141px;
+    background: #F67952;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+
+    color: #FFFFFF;
+    font-size: 16px;
+    box-sizing: border-box;
+    padding: 0 15px;
+}
+
+
+
+.balance-amount-price {
+    font-size: 26px;
+    font-weight: bold;
+}
+
+
+.balance-btn {
+    width: 140px;
+    height: 44px;
+    background: #FFFFFF;
+    border-radius: 23px 23px 23px 23px;
+    opacity: 1;
+    font-size: 14px;
+    font-weight: 400;
+    color: #FF4700;
+}
+
+
+.amount-container {
+    width: 336px;
+    margin-top: 34px;
+}
+
+.amount-tabs {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    color: #7D7D7E;
+    height: 40px;
+}
+
+.tab-pane {
+    width: 88px;
+    height: 40px;
+    text-align: center;
+    position: relative;
+}
+
+.tab-pane-active::before {
+    content: "";
+    background-color: #F67952;
+    border-radius: 5px;
+    width: 88px;
+    height: 5px;
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+}
+
+.tab-pane-active {
+    color: #F67952;
+}
+
+.amount-item {
+    width: 330px;
+    height: 78px;
+    background: #FFFFFF;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    font-weight: 500;
+    color: #000;
+    padding: 0 15px;
+    box-sizing: border-box;
+    margin-top: 18px;
+}
+
+.amount-item-time {
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+}
+
+.amount-item-log {
+    font-weight: bold;
+    color: #FF4700;
+    font-size: 20px;
+}
+
+.balanceScroll {
+    height: calc(100vh - 86px - 144px - 40px - 52px);
+}

src/pages/cash/index.config.js

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

src/pages/cash/index.jsx

@@ -0,0 +1,106 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { Picker } from "@nutui/nutui-react-taro"
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [account, setAccount] = useState('')
+
+    const [visible, setVisible] = useState(false)
+    const [bank, setBank] = useState({ value: 0, text: '' })
+
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    const confirmPicker = (val, list) => {
+        list.forEach(item => {
+            console.log(item, "C")
+            setBank(item)
+        })
+    }
+
+    const listData1 = [
+        [
+            { value: 1, text: '南京市', },
+            { value: 2, text: '无锡市', },
+            { value: 3, text: '海北藏族自治区', },
+            { value: 4, text: '北京市', },
+            { value: 5, text: '连云港市', },
+            { value: 6, text: '浙江市', },
+            { value: 7, text: '江苏市', },
+            { value: 8, text: '大庆市', },
+            { value: 9, text: '绥化市', },
+            { value: 10, text: '潍坊市', },
+            { value: 11, text: '请按市', },
+            { value: 12, text: '乌鲁木齐市' },
+        ],
+    ]
+
+
+    return <View className="cash-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            立即提现
+
+        </View>
+        <View className="cash-container relative">
+            <View className="cash-amount flex-col justify-center">
+                <Text>当前余额</Text>
+                <Text className="cash-amount-price">50000</Text>
+            </View>
+            <View>
+                <View className="form-item mt-22">
+                    <View className="form-label">提现金额</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" type="digit" placeholder="请输入提现金额" onInput={(v) => {
+                            setAccount(v.detail.value)
+                        }} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">银行卡</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" disabled placeholder="选择提现银行卡" value={bank.text} />
+                        <Button className="code-btn" onClick={() => { setVisible(true) }}>选择银行卡</Button>
+                    </View>
+                </View>
+                {
+                    account && !!bank.value &&
+                    <View className="cash-footer ">
+                        <Button className="cash-btn">立即提现</Button>
+                    </View>
+                }
+            </View>
+
+        </View>
+        <Picker
+            isVisible={visible}
+            listData={listData1}
+            onConfirm={(values, list) => confirmPicker(values, list)}
+            onClose={() => setVisible(false)}
+
+        />
+    </View>
+}
+
+
+export default Login

src/pages/cash/index.scss

@@ -0,0 +1,128 @@
+.cash-frame {
+    height: 100vh;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+}
+
+.cash-container {
+    width: 375px;
+    box-sizing: border-box;
+    padding: 20px 20px;
+}
+
+.form-item {
+    height: 68px;
+    opacity: 1;
+}
+
+.form-label {
+    font-size: 12px;
+    font-weight: bold;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    color: #2a2b2d;
+    line-height: 16px;
+}
+
+.form-input>.weui-input {
+    border: none;
+    height: 52px;
+    line-height: 52px;
+    border-bottom: 1px solid #262A34;
+    position: relative;
+    font-size: 16px;
+    color: #000;
+}
+
+.form-input>.weui-input:focus {
+    border-bottom: 2px solid #F67952;
+}
+
+.form-input-placeholder,
+.form-input>.weui-input::placeholder {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: bold;
+    color: #aeafb4;
+}
+
+.form-control {
+    height: 52px;
+    position: relative;
+}
+
+.forgot-password {
+    height: 24px;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #666;
+    line-height: 24px;
+
+    text-align: right;
+}
+
+
+.cash-btn {
+    width: 253px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+}
+
+.cash-footer {
+    display: flex;
+    align-items: center;
+    position: fixed;
+    bottom: 100px;
+    justify-content: center;
+    width: 315px;
+}
+
+
+.code-btn {
+    width: 83px;
+    height: 30px;
+    background: #F67952;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    font-size: 12px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    border: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    bottom: 12px;
+}
+
+.cash-amount {
+    width: 332px;
+    height: 120px;
+    background: #F67952;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    margin-bottom: 36px;
+    color: #FFFFFF;
+    font-size: 12px;
+    box-sizing: border-box;
+    padding-left: 23px;
+    padding-bottom: 10px;
+}
+
+.cash-container .form-label {
+    color: #5E6272 !important;
+}
+
+.cash-amount-price {
+    font-size: 26px;
+    font-weight: bold;
+    margin-top: 8px;
+}

src/pages/change-phone/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '修改手机号'
+})

src/pages/change-phone/index.jsx

@@ -0,0 +1,122 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [account, setAccount] = useState('')
+    const [pwd, setPwd] = useState()
+    const [loginMode, setLoginMode] = useState('account')
+
+    const [mobile, setMobile] = useState('')
+    const [smsCode, setSmsCode] = useState('')
+    const [interval, setIntervalTime] = useState(0)
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    // 去登陆
+    const loginFn = () => {
+        Taro.redirectTo({
+            url: '/pages/login/index'
+        })
+    }
+
+    //清理数据
+    const cleanFn = () => {
+        if (loginMode === 'account') {
+            setAccount('')
+            setPwd('')
+            return
+        }
+        setMobile('')
+        setSmsCode('')
+    }
+
+    // 倒计时
+    const countDown = () => {
+        if (!mobile) {
+            return
+        }
+        setIntervalTime(60)
+        if (interval > 0) {
+            return
+        }
+        let start = 60
+        const timer = setInterval(() => {
+            if (start > 0) {
+                start--
+                if (start <= 0) {
+                    clearInterval(timer)
+                }
+                setIntervalTime(start)
+            }
+        }, 1000)
+    }
+
+    return <View className="login-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            修改手机号
+
+        </View>
+        <View className="change-pwd-container bg-slate-50 relative">
+            <View>
+                <View className="form-item mt-22">
+                    <View className="form-label">验证原手机号</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" placeholder="请输入手机号" onInput={(v) => {
+                            setAccount(v.detail.value)
+                        }} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">验证码</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" maxlength={6} placeholder="请输入验证码" onInput={(v) => {
+                            setSmsCode(v.detail.value)
+                        }} />
+                        <Button className="code-btn" disabled={interval > 0} onClick={countDown}>{interval ? interval + 's' : '获取验证码'}</Button>
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">输入新手机号码</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" type='text' placeholder="设置新手机号码" onInput={(v) => {
+                            setPwd(v.detail.value)
+                        }} />
+                        {
+                            pwd && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+                    </View>
+                </View>
+                <View className="change-phone-footer flex flex-col justify-center">
+                    <Button className="login-btn">保存</Button>
+
+                </View>
+            </View>
+
+        </View>
+
+    </View>
+}
+
+
+export default Login

src/pages/change-phone/index.scss

@@ -0,0 +1,116 @@
+.login-header {
+    height: 86px;
+}
+
+.login-frame {
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+}
+
+.change-pwd-container {
+    width: 375px;
+    height: calc(100vh - 86px);
+    border-radius: 20px 20px 0 0;
+    box-shadow: 0px 8px 51px 0px rgba(230, 234, 238, 0.8);
+    box-sizing: border-box;
+    padding: 20px 30px;
+}
+
+.form-item {
+    height: 68px;
+    opacity: 1;
+}
+
+.form-label {
+    font-size: 12px;
+    font-weight: bold;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    color: #2a2b2d;
+    line-height: 16px;
+}
+
+.form-input>.weui-input {
+    border: none;
+    height: 52px;
+    line-height: 52px;
+    border-bottom: 1px solid #262A34;
+    position: relative;
+    font-size: 16px;
+    color: #000;
+}
+
+.form-input>.weui-input:focus {
+    border-bottom: 2px solid #F67952;
+}
+
+.form-input-placeholder,
+.form-input>.weui-input::placeholder {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: bold;
+    color: #aeafb4;
+}
+
+.form-control {
+    height: 52px;
+    position: relative;
+}
+
+.forgot-password {
+    height: 24px;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #666;
+    line-height: 24px;
+
+    text-align: right;
+}
+
+
+.login-btn {
+    width: 253px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+}
+
+.change-phone-footer {
+    margin-top: 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.quick-login {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #000000;
+    line-height: 24px;
+    margin-top: 30px;
+}
+
+.code-btn {
+    width: 83px;
+    height: 30px;
+    background: #F67952;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    font-size: 12px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    border: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    bottom: 12px;
+}

src/pages/change-pwd/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '找回密码'
+})

src/pages/change-pwd/index.jsx

@@ -0,0 +1,134 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [account, setAccount] = useState('')
+    const [pwd, setPwd] = useState()
+    const [showPwd, setShowPwd] = useState(false)
+    const [loginMode, setLoginMode] = useState('account')
+
+    const [mobile, setMobile] = useState('')
+    const [smsCode, setSmsCode] = useState('')
+    const [interval, setIntervalTime] = useState(0)
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    // 去登陆
+    const loginFn = () => {
+        Taro.redirectTo({
+            url: '/pages/login/index'
+        })
+    }
+
+    //清理数据
+    const cleanFn = () => {
+        if (loginMode === 'account') {
+            setAccount('')
+            setPwd('')
+            return
+        }
+        setMobile('')
+        setSmsCode('')
+    }
+
+    // 倒计时
+    const countDown = () => {
+        if (!mobile) {
+            return
+        }
+        setIntervalTime(60)
+        if (interval > 0) {
+            return
+        }
+        let start = 60
+        const timer = setInterval(() => {
+            if (start > 0) {
+                start--
+                if (start <= 0) {
+                    clearInterval(timer)
+                }
+                setIntervalTime(start)
+            }
+        }, 1000)
+    }
+
+    return <View className="login-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            修改密码
+
+        </View>
+        <View className="change-pwd-container relative">
+            <View>
+                <View className="form-item mt-22">
+                    <View className="form-label">账号</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" placeholder="请输入手机号" onInput={(v) => {
+                            setAccount(v.detail.value)
+                        }} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">验证码</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" maxlength={6} placeholder="请输入验证码" onInput={(v) => {
+                            setSmsCode(v.detail.value)
+                        }} />
+                        <Button className="code-btn" disabled={interval > 0} onClick={countDown}>{interval ? interval + 's' : '获取验证码'}</Button>
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">密码</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" type={showPwd ? 'text' : 'password'} placeholder="设置新密码" onInput={(v) => {
+                            setPwd(v.detail.value)
+                        }} />
+                        <Image className="w-6 h-6 absolute right-0 bottom-16" src={showPwd ? activeEye : eyeClose} onClick={() => {
+                            setShowPwd(v => !v)
+                        }} />
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">密码</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" type={showPwd ? 'text' : 'password'} placeholder="再次确认新密码" onInput={(v) => {
+                            setPwd(v.detail.value)
+                        }} />
+                        <Image className="w-6 h-6 absolute right-0 bottom-16" src={showPwd ? activeEye : eyeClose} onClick={() => {
+                            setShowPwd(v => !v)
+                        }} />
+                    </View>
+                </View>
+                <View className="change-pwd-footer flex flex-col justify-center">
+                    <Button className="login-btn">保存</Button>
+
+                </View>
+            </View>
+
+        </View>
+
+    </View>
+}
+
+
+export default Login

src/pages/change-pwd/index.scss

@@ -0,0 +1,116 @@
+.login-header {
+    height: 86px;
+}
+
+.login-frame {
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+}
+
+.change-pwd-container {
+    width: 375px;
+    height: calc(100vh - 86px);
+    border-radius: 20px 20px 0 0;
+    box-shadow: 0px 8px 51px 0px rgba(230, 234, 238, 0.8);
+    box-sizing: border-box;
+    padding: 20px 30px;
+}
+
+.form-item {
+    height: 68px;
+    opacity: 1;
+}
+
+.form-label {
+    font-size: 12px;
+    font-weight: bold;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    color: #2a2b2d;
+    line-height: 16px;
+}
+
+.form-input>.weui-input {
+    border: none;
+    height: 52px;
+    line-height: 52px;
+    border-bottom: 1px solid #262A34;
+    position: relative;
+    font-size: 16px;
+    color: #000;
+}
+
+.form-input>.weui-input:focus {
+    border-bottom: 2px solid #F67952;
+}
+
+.form-input-placeholder,
+.form-input>.weui-input::placeholder {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: bold;
+    color: #aeafb4;
+}
+
+.form-control {
+    height: 52px;
+    position: relative;
+}
+
+.forgot-password {
+    height: 24px;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #666;
+    line-height: 24px;
+
+    text-align: right;
+}
+
+
+.login-btn {
+    width: 253px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+}
+
+.change-pwd-footer {
+    margin-top: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.quick-login {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #000000;
+    line-height: 24px;
+    margin-top: 30px;
+}
+
+.code-btn {
+    width: 83px;
+    height: 30px;
+    background: #F67952;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    font-size: 12px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    border: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    bottom: 12px;
+}

src/pages/conversion/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '立即转换'
+})

src/pages/conversion/index.jsx

@@ -0,0 +1,91 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { Picker } from "@nutui/nutui-react-taro"
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [account, setAccount] = useState('')
+
+    const [visible, setVisible] = useState(false)
+    const [bank, setBank] = useState({ value: 0, text: '' })
+
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    const confirmPicker = (val, list) => {
+        list.forEach(item => {
+            console.log(item, "C")
+            setBank(item)
+        })
+    }
+
+    const listData1 = [
+        [
+            { value: 1, text: '南京市', },
+            { value: 2, text: '无锡市', },
+            { value: 3, text: '海北藏族自治区', },
+            { value: 4, text: '北京市', },
+            { value: 5, text: '连云港市', },
+            { value: 6, text: '浙江市', },
+            { value: 7, text: '江苏市', },
+            { value: 8, text: '大庆市', },
+            { value: 9, text: '绥化市', },
+            { value: 10, text: '潍坊市', },
+            { value: 11, text: '请按市', },
+            { value: 12, text: '乌鲁木齐市' },
+        ],
+    ]
+
+
+    return <View className="conversion-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            立即转换
+        </View>
+        <View className="conversion-container relative">
+            <View className="conversion-amount flex-col justify-center">
+                <Text>当前收益</Text>
+                <Text className="conversion-amount-price">50000</Text>
+            </View>
+            <View>
+                <View className="form-item mt-22">
+                    <View className="form-label">输入转换金额</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" type="digit" placeholder="请输入转换金额" onInput={(v) => {
+                            setAccount(v.detail.value)
+                        }} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
+                    </View>
+                </View>
+                {
+
+                    <View className="conversion-footer ">
+                        <Button className="conversion-btn">立即转换</Button>
+                    </View>
+                }
+            </View>
+
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/conversion/index.scss

@@ -0,0 +1,128 @@
+.conversion-frame {
+    height: 100vh;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+}
+
+.conversion-container {
+    width: 375px;
+    box-sizing: border-box;
+    padding: 20px 20px;
+}
+
+.form-item {
+    height: 68px;
+    opacity: 1;
+}
+
+.form-label {
+    font-size: 12px;
+    font-weight: bold;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    color: #2a2b2d;
+    line-height: 16px;
+}
+
+.form-input>.weui-input {
+    border: none;
+    height: 52px;
+    line-height: 52px;
+    border-bottom: 1px solid #262A34;
+    position: relative;
+    font-size: 16px;
+    color: #000;
+}
+
+.form-input>.weui-input:focus {
+    border-bottom: 2px solid #F67952;
+}
+
+.form-input-placeholder,
+.form-input>.weui-input::placeholder {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: bold;
+    color: #aeafb4;
+}
+
+.form-control {
+    height: 52px;
+    position: relative;
+}
+
+.forgot-password {
+    height: 24px;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #666;
+    line-height: 24px;
+
+    text-align: right;
+}
+
+
+.conversion-btn {
+    width: 253px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+}
+
+.conversion-footer {
+    display: flex;
+    align-items: center;
+    position: fixed;
+    bottom: 100px;
+    justify-content: center;
+    width: 315px;
+}
+
+
+.code-btn {
+    width: 83px;
+    height: 30px;
+    background: #F67952;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    font-size: 12px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    border: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    bottom: 12px;
+}
+
+.conversion-amount {
+    width: 332px;
+    height: 120px;
+    background: #F67952;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    margin-bottom: 36px;
+    color: #FFFFFF;
+    font-size: 12px;
+    box-sizing: border-box;
+    padding-left: 23px;
+    padding-bottom: 10px;
+}
+
+.conversion-container .form-label {
+    color: #5E6272 !important;
+}
+
+.conversion-amount-price {
+    font-size: 26px;
+    font-weight: bold;
+    margin-top: 8px;
+}

src/pages/forgot/index.config.js

@@ -1,3 +1,3 @@
 export default definePageConfig({
-    navigationBarTitleText: '找回密码'
+    navigationBarTitleText: '修改密码'
 })

src/pages/forgot/index.jsx

@@ -2,13 +2,13 @@ import { Image, Input, Text, View } from "@tarojs/components"
 import back from '@/images/back.png'
 import checked from '@/images/checked.png'
 import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
 import './index.scss'
 import { Button } from "@nutui/nutui-react-taro"
 import { useState } from "react"
 import Taro from "@tarojs/taro"
 
-const unChecked = checked
+const activeEye = eye
-const activeEye = eyeClose
 
 const Login = () => {
 
@@ -81,7 +81,10 @@ const Login = () => {
                         <Input className="form-input" placeholder="请输入手机号" onInput={(v) => {
                             setAccount(v.detail.value)
                         }} />
-                        <Image className="w-6 h-6 absolute right-0 bottom-16" src={account ? checked : unChecked} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
                     </View>
                 </View>
                 <View className="form-item mt-22">

src/pages/goods-detail/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '商品详情'
+})

src/pages/goods-detail/index.jsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
+// import { Swiper, SwiperItem } from '@nutui/nutui-react-taro';
+import './index.scss'
+import TabbarAction from '@/components/action';
+import { Infiniteloading } from '@nutui/nutui-react-taro';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import backNav from '@/images/backNav.png'
+import Taro from '@tarojs/taro';
+import { useRouter } from '@tarojs/taro';
+import { useDidShow } from '@tarojs/taro';
+import { Button } from '@nutui/nutui-react-taro';
+
+
+
+function Index() {
+
+  const param = useRouter().params
+  const [id] = useState(param.id)
+
+  const [swiperProgress, setSwiperProgress] = useState(1)
+  const list = [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg'
+  ]
+
+  useDidShow(() => {
+    console.log(12)
+
+  })
+
+
+
+  useEffect(() => {
+
+
+  }, [id])
+
+
+
+
+  // 跳转
+  const navDetailFn = () => {
+    Taro.navigateTo({
+      url: `/pages/settle/index?id=${id}`
+    })
+  }
+  // 返回页面
+  const backFn = () => {
+    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+  }
+
+  return (
+    <View className='home-container'>
+      <View className='goods-detail-title'>
+        <Image src={backNav} className="square-35 absolute left-10 " onClick={backFn} />
+        商品详情
+      </View>
+
+      <View className='goods-body' catchMove>
+        <View catchMove className='relative'>
+          <Swiper
+            loop={true}
+            current={0}
+            autoplay={true}
+            className='goods-swiper'
+            interval={3000}
+            circular
+            indicatorActiveColor='#F67952'
+            displayMultipleItems={1}
+            adjustHeight
+            onChange={(e) => {
+              setSwiperProgress(x => x % 3 + 1)
+            }}
+          >
+            {list.map((item) => {
+              return (
+                <SwiperItem key={item} className='goods-swiper-item'>
+                  <Image src={item} alt="" />
+                </SwiperItem>
+              )
+            })}
+          </Swiper>
+          <View className='goods-swiper-progress'>
+            <View style={{ backgroundColor: '#F67952', height: '100%', width: list.length ? ((swiperProgress / list.length) > 1 ? 1 : (swiperProgress / list.length)) * 100 + '%' : 0 }}></View>
+          </View>
+        </View>
+        <View className='goods-content'>
+          <View className='line-clamp-2 goods-name'>
+            银美孚1号 全合成油5w全合成油 5W-30 SN级 4L
+          </View>
+          <View className='goods-desc line-clamp-2'>
+            <View>规格</View>
+          </View>
+          <View className='goods-item-price'>
+            <Text className='goods-item-price-sale'>¥199</Text>
+            <Text className='goods-item-price-origin'>原价888</Text>
+          </View>
+
+          <View className='goods-content-box'>
+            图文内容专区
+          </View>
+        </View>
+      </View>
+      <Button className='buy-btn' onClick={navDetailFn}>立即购买</Button>
+    </View>
+  )
+}
+
+export default Index

src/pages/goods-detail/index.scss

@@ -0,0 +1,101 @@
+.home-container {
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-size: 14px;
+    background: #FDFDFD;
+}
+
+.goods-detail-title {
+    width: 100vw;
+    height: 60px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 0px 0px 0px 0px;
+    opacity: 1;
+    font-size: 18px;
+    font-weight: bold;
+    color: #181A20;
+    line-height: 60px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.goods-body {
+    height: calc(100vh - 60px);
+    padding-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.goods-swiper {
+    width: 100vw;
+    height: 412px;
+}
+
+.goods-swiper-item img {
+    height: 412px !important;
+}
+
+.goods-swiper-progress {
+    width: 100vw;
+    height: 4px;
+    position: absolute;
+    bottom: 0;
+    z-index: 888;
+}
+
+.buy-btn {
+    width: 264px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    position: fixed;
+    bottom: 20px;
+    z-index: 888;
+    border: none;
+    left: calc((100vw - 264px)/2);
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: 22px;
+    font-size: 16px;
+}
+
+.goods-content {
+    box-sizing: border-box;
+    padding: 16px;
+}
+
+.goods-name {
+    width: 100%;
+    height: 48px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #10254E;
+    line-height: 24px;
+}
+
+.goods-desc {
+
+    font-weight: 400;
+    color: #9B9B9B;
+    font-size: 12px;
+}
+
+.goods-item-price {
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 10px;
+    font-weight: 400;
+    margin-top: 6px;
+}
+
+.goods-item-price-sale {
+    font-size: 16px;
+    font-weight: bold;
+    color: #F83A52;
+    margin-right: 6px;
+}
+
+.goods-content-box {
+    margin-top: 20px;
+}

src/pages/home/index.config.js

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

src/pages/home/index.jsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import './index.scss'
+import { Image, Text, View } from '@tarojs/components'
+import TabbarAction from '@/components/action';
+import message from '@/images/message.png'
+import setting from '@/images/setting.png'
+import level1 from '@/images/level1.png'
+import level2 from '@/images/level2.png'
+import bal from '@/images/bal.png'
+import income from '@/images/income.png'
+import scope from '@/images/scope.png'
+import waitpay from '@/images/waitpay.png'
+import delivery from '@/images/delivery.png'
+import done from '@/images/done.png'
+import team from '@/images/team.png'
+import mall from '@/images/mall.png'
+import addr from '@/images/addr.png'
+import friend from '@/images/friend.png'
+import { Avatar } from '@nutui/nutui-react-taro';
+import next from '@/images/next.png'
+
+
+const Index = () => {
+
+    return <View className='home-container'>
+        <View className='home-title flex-center'>我的
+            <View className='home-title-extra'>
+                <Image src={setting} className='home-title-icon' />
+                <Image src={message} className='home-title-icon' />
+            </View>
+        </View>
+
+        <View className='my-body'>
+            <View className='my-header flex-between'>
+                <View className='my-content flex-start'>
+
+                    <View className='my-avatar flex-center'>
+                        <Avatar size={56} icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+                        />
+                    </View>
+
+                    <View className='my-content-info flex-col'>
+                        <View className='my-info-name flex-start'>
+                            <Text>这个是姓名</Text>
+                            <View className='my-level'>
+                                <Text className='my-lev-text'>V5</Text>
+                            </View>
+                        </View>
+                        <View className='my-id-box flex-start'>
+                            <Text>区域合伙人</Text>
+                            <Image className='my-id-icon' src={level1} />
+                        </View>
+                    </View>
+                </View>
+                <View className='my-edit'>
+                    <Text>编辑资料</Text>
+                    <Image className='next-icon' src={next} />
+                </View>
+            </View>
+
+            <View className='bal-container flex-between'>
+                <View className='bal-item flex-start'>
+                    <Image src={bal} className='bal-icon' />
+                    <View className='bal-item-content flex-col'>
+                        <Text>12345</Text>
+                        <Text className='bal-item-helper'>余额</Text>
+                    </View>
+                </View>
+                <View className='bal-item flex-start'>
+                    <Image src={income} className='bal-icon' />
+                    <View className='bal-item-content flex-col'>
+                        <Text>12345</Text>
+                        <Text className='bal-item-helper'>收益</Text>
+                    </View>
+                </View>
+                <View className='bal-item flex-start'>
+                    <Image src={scope} className='bal-icon' />
+                    <View className='bal-item-content flex-col'>
+                        <Text>12345</Text>
+                        <Text className='bal-item-helper'>积分</Text>
+                    </View>
+                </View>
+            </View>
+
+            <View className='my-order-container'>
+                <View className='my-order-title flex-between'>
+                    <Text>我的订单</Text>
+                    <View className='my-order-more flex-center'>
+                        <Text>全部订单</Text>
+                        <Image className='next-icon' src={next} />
+                    </View>
+                </View>
+                <View className='my-order-tool flex-around'>
+                    <View className='flex-col my-order-tool-item'>
+                        <View className="relative my-order-tool-box">
+                            <Image className='my-order-tool-icon' src={waitpay} />
+                            <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text>
+                        </View>
+                        <Text>待付款</Text>
+                    </View>
+                    <View className='flex-col my-order-tool-item'>
+                        <View className="relative my-order-tool-box">
+                            <Image className='my-order-tool-icon' src={delivery} />
+                            <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text>
+                        </View>
+                        <Text>待发货</Text>
+                    </View>
+                    <View className='flex-col my-order-tool-item'>
+                        <View className="relative my-order-tool-box">
+                            <Image className='my-order-tool-icon' src={done} />
+                            <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text>
+                        </View>
+                        <Text>已完成</Text>
+                    </View>
+                </View>
+            </View>
+            <View className='my-order-container'>
+                <View className='my-order-title flex-between'>
+                    <Text>常用工具</Text>
+
+                </View>
+                <View className='my-order-tool flex-around'>
+                    <View className='flex-col my-order-tool-item'>
+                        <View className="relative my-order-tool-box">
+                            <Image className='my-tool-icon' src={team} />
+
+                        </View>
+                        <Text>我的团队</Text>
+                    </View>
+                    <View className='flex-col my-order-tool-item'>
+                        <View className="relative my-order-tool-box">
+                            <Image className='my-tool-icon' src={mall} />
+
+                        </View>
+                        <Text>购物金商城</Text>
+                    </View>
+                    <View className='flex-col my-order-tool-item'>
+                        <View className="relative my-order-tool-box">
+                            <Image className='my-tool-icon' src={addr} />
+                        </View>
+                        <Text>地址管理</Text>
+                    </View>
+                    <View className='flex-col my-order-tool-item'>
+                        <View className="relative my-order-tool-box">
+                            <Image className='my-tool-icon' src={friend} />
+                        </View>
+                        <Text>邀请好友</Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+
+
+        <TabbarAction index={2} />
+    </View>
+}
+
+export default Index

src/pages/home/index.scss

@@ -0,0 +1,197 @@
+.home-container {
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-size: 14px;
+    background: linear-gradient(#fdf3f1, #FCFCFE);
+    font-weight: 400;
+}
+
+.home-title {
+    width: 100vw;
+    height: 60px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 0px 0px 0px 0px;
+    opacity: 1;
+    font-size: 18px;
+    font-weight: bold;
+    color: #181A20;
+    text-align: center;
+}
+
+.home-title-extra {
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    right: 16px;
+    top: 21px;
+}
+
+.home-title-icon {
+    width: 18px;
+    height: 18px;
+    margin-right: 12px;
+    display: block;
+}
+
+.my-body {
+    height: calc(100vh - 60px - 66px);
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 13px 20px;
+    padding-right: 20px;
+}
+
+.my-header {
+    margin-top: 18px;
+}
+
+.my-edit {
+    color: rgba(0, 0, 0, 0.4);
+}
+
+.my-edit text {
+    margin-right: 10px;
+}
+
+.my-content-info {
+    margin-left: 9px;
+    color: #000;
+
+}
+
+.my-avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: 3px solid #ffffffa3;
+}
+
+.my-level {
+    width: 25px;
+    height: 16px;
+    background: linear-gradient(117deg, #0F1732 0%, #2F3A58 100%);
+    border-radius: 7px;
+    opacity: 1;
+    font-weight: bold;
+    line-height: 16px;
+    font-size: 10px;
+    text-align: center;
+    margin-left: 10px;
+}
+
+.my-lev-text {
+    background: linear-gradient(297deg, #FCA12D 0%, #FEF9F8 100%);
+    background-clip: text;
+    color: transparent;
+}
+
+.my-id-box {
+    color: rgba(0, 0, 0, 0.4);
+    margin-top: 2px;
+}
+
+.my-id-icon {
+    width: 18px;
+    height: 18px;
+    margin-left: 8px;
+}
+
+
+.bal-container {
+    margin-top: 38px;
+}
+
+.bal-item {
+    width: 102px;
+    height: 62px;
+    background: #FFFFFF;
+    box-shadow: -2px 8px 46px 0px rgba(37, 45, 50, 0.05);
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    box-sizing: border-box;
+    padding-left: 8px;
+}
+
+.bal-icon {
+    width: 22px;
+    height: 22px;
+}
+
+.bal-item-content {
+    font-weight: bold;
+    color: #181A20;
+    margin-left: 6px;
+    line-height: 20px;
+}
+
+.bal-item-helper {
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+    list-style: 14px;
+}
+
+.my-order-container {
+    margin-top: 38px;
+}
+
+.my-order-title {
+    font-weight: 600;
+    color: #000000;
+}
+
+.my-order-more {
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 12px;
+    margin-right: 8px;
+}
+
+.my-order-more text {
+    margin-right: 10px;
+}
+
+.my-order-tool {
+    margin-top: 20px;
+}
+
+.my-order-tool-item {
+    align-items: center;
+    justify-content: center;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+}
+
+.my-order-tool-icon {
+    width: 32px;
+    height: 32px;
+}
+
+.my-order-tool-box {
+    height: 32px;
+}
+
+.my-order-mark {
+    background: #1C274C;
+    opacity: 1;
+    border: 1px solid #FFFFFF;
+    border-radius: 50%;
+    color: #fff;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    display: inline-block;
+    text-align: center;
+    position: absolute;
+    top: -4px;
+    right: -6px;
+}
+
+.my-tool-icon {
+    width: 25px;
+    height: 24px;
+}

src/pages/income/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '我的收益'
+})

src/pages/income/index.jsx

@@ -0,0 +1,94 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { Picker } from "@nutui/nutui-react-taro"
+import { Tabs, TabPane } from "@nutui/nutui-react-taro"
+import { Infiniteloading } from "@nutui/nutui-react-taro"
+import { useEffect } from "react"
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [tabKey, setTabKey] = useState('0')
+    const [page, setPage] = useState(1)
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+    useEffect(() => { }, [tabKey])
+
+
+    return <View className="profit-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            我的收益
+
+        </View>
+        <View className="profit-container relative">
+            <View className="profit-amount flex-between ">
+                <View className="flex-col justify-between profit-amount-left">
+                    <Text>当前余额</Text>
+                    <Text className="profit-amount-price">50000</Text>
+                </View>
+                <View className="flex-around ">
+
+                    <View className="profit-btn flex-center" onClick={() => {
+                        Taro.navigateTo({ url: '/pages/transfer/index' })
+                    }}>转换余额</View>
+                </View>
+            </View>
+
+            <View className="amount-container">
+                <View className="amount-tabs flex-around">
+                    <View className={'tab-pane ' + (tabKey == '0' ? 'tab-pane-active' : '')} onClick={() => setTabKey('0')}>收益流水</View>
+                    <View className={'tab-pane ' + (tabKey == '1' ? 'tab-pane-active' : '')} onClick={() => setTabKey('1')}>提现记录</View>
+                    <View className={'tab-pane ' + (tabKey == '2' ? 'tab-pane-active' : '')} onClick={() => setTabKey('2')}>发放明细</View>
+                </View>
+                <View className="profitScroll" id="profitScroll">
+                    <Infiniteloading
+                        containerId="profitScroll"
+                        useWindow={false}
+                        loadTxt="loading"
+                        loadMoreTxt="没有数据啦～"
+                        loadIcon='loading'
+                        hasMore={false}
+                        onLoadMore={(x) => {
+                            setPage(p => p + 1)
+                            x()
+                        }}
+                    >
+                        <View className="amount-item flex-between">
+                            <View className="amount-item-detail flex-col">
+                                <View>完成每日登陆</View>
+                                <View className="amount-item-time">2021/04/09 19:42:36</View>
+                            </View>
+                            <View className="amount-item-log">+1.00</View>
+                        </View>
+
+                        <View className="amount-item flex-between">
+                            <View className="amount-item-detail flex-col">
+                                <View>完成每日登陆</View>
+                                <View className="amount-item-time">2021/04/09 19:42:36</View>
+                            </View>
+                            <View className="amount-item-log">+1.00</View>
+                        </View>
+                    </Infiniteloading>
+                </View>
+            </View>
+
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/income/index.scss

@@ -0,0 +1,115 @@
+.profit-frame {
+    min-height: 100vh;
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+}
+
+.profit-container {
+    width: 375px;
+    box-sizing: border-box;
+    padding: 20px 20px;
+}
+
+
+.profit-amount {
+    width: 332px;
+    height: 120px;
+    background: #F67952;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+
+    color: #FFFFFF;
+    font-size: 16px;
+    box-sizing: border-box;
+    padding: 0 20px;
+}
+
+
+
+.profit-amount-price {
+    font-size: 26px;
+    font-weight: bold;
+}
+
+
+.profit-btn {
+    width: 140px;
+    height: 44px;
+    background: #FFFFFF;
+    border-radius: 23px 23px 23px 23px;
+    opacity: 1;
+    font-size: 14px;
+    font-weight: 400;
+    color: #FF4700;
+}
+
+
+.amount-container {
+    width: 336px;
+    margin-top: 34px;
+}
+
+.amount-tabs {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    color: #7D7D7E;
+    height: 40px;
+}
+
+.tab-pane {
+    width: 88px;
+    height: 40px;
+    text-align: center;
+    position: relative;
+}
+
+.tab-pane-active::before {
+    content: "";
+    background-color: #F67952;
+    border-radius: 5px;
+    width: 88px;
+    height: 5px;
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+}
+
+.tab-pane-active {
+    color: #F67952;
+}
+
+.amount-item {
+    width: 330px;
+    height: 78px;
+    background: #FFFFFF;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    font-weight: 500;
+    color: #000;
+    padding: 0 15px;
+    box-sizing: border-box;
+    margin-top: 18px;
+}
+
+.amount-item-time {
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+}
+
+.amount-item-log {
+    font-weight: bold;
+    color: #FF4700;
+    font-size: 20px;
+}
+
+.profitScroll {
+    height: calc(100vh - 86px - 144px - 40px - 52px);
+}
+
+.profit-amount-left {
+    height: 80px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+}

src/pages/index/index.config.js

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '商城'
 })

src/pages/index/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from '@tarojs/components'
+import { Image, Text, View } from '@tarojs/components'
 import {
   Button
 } from "@nutui/nutui-react-taro";
@@ -9,7 +9,7 @@ import { Infiniteloading } from '@nutui/nutui-react-taro';
 import { useEffect } from 'react';
 import { useState } from 'react';
 
-
+import Taro from '@tarojs/taro';
 
 
 function Index() {
@@ -31,6 +31,14 @@ function Index() {
 
   }, [page])
 
+
+  // 跳转
+  const navDetailFn = (id) => {
+    Taro.navigateTo({
+      url: `/pages/goods-detail/index?id=${id}`
+    })
+  }
+
   return (
     <View className='home-container'>
       <View className='home-title'>首页</View>
@@ -46,19 +54,30 @@ function Index() {
           onLoadMore={(x) => {
             setPage(p => p + 1)
             x()
-            console.log(x)
           }}
         >
           <View className='goods-container '>
             {
               list.map(item => {
-                return <View className='goods-item' key={item}>
+                return <View className='goods-item' key={item} onClick={() => {
-                  {item}
+                  navDetailFn(item)
+                }}>
+                  <View className='goods-item-image'>
+                    <Image src='https://img.yzcdn.cn/vant/cat.jpeg' />
+                  </View>
+                  <View className='goods-item-name line-clamp-2'>
+                    这个是商品的名称，但是可能有一点点的长
+                  </View>
+                  <View className='goods-item-desc line-clamp-2 '>
+                    这个是商品的介绍
+                  </View>
+                  <View className='goods-item-price'>
+                    <Text className='goods-item-price-sale'>¥199</Text>
+                    <Text className='goods-item-price-origin'>原价888</Text>
+                  </View>
                 </View>
               })
             }
-
-
           </View>
         </Infiniteloading>
       </View>

src/pages/index/index.scss

@@ -20,27 +20,70 @@
 
 .home-body {
     height: calc(100vh - 60px - 66px);
+    padding-bottom: 10px;
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
 .goods-container {
-    display: flex;
     width: 100vw;
     height: auto;
     box-sizing: border-box;
+    display: flex;
     flex-wrap: wrap;
     flex-direction: row;
-    // background: red;
+    justify-content: space-around;
     padding: 0 8px;
-    justify-content: space-between;
     margin-top: 24px;
+    // column-count: 2;
+    // column-gap: 10px;
+    // column-width: 170px;
+    // counter-reset: count;
+
 }
 
 .goods-item {
-    height: 142px;
+    width: 170px;
-    width: 174px;
+    margin-bottom: 24px;
-    background: red;
+    position: relative;
-    margin-top: 8px;
+    height: auto;
+    break-inside: avoid;
+}
+
+
+
+.goods-item-image image {
+    height: 142px;
+    width: 170px;
+    border-radius: 12px 12px 0 0;
+}
+
+
+.goods-item-name {
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.goods-item-desc {
+    font-size: 10px;
+    font-weight: 400;
+    color: #000000;
+    line-height: 16px;
+    margin-top: 6px;
+}
+
+.goods-item-price {
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 10px;
+    font-weight: 400;
+    margin-top: 6px;
+}
+
+.goods-item-price-sale {
+    font-size: 16px;
+    font-weight: bold;
+    color: #F83A52;
+    margin-right: 6px;
 }

src/pages/login/index.jsx

@@ -2,14 +2,14 @@ import { Image, Input, Text, View } from "@tarojs/components"
 import back from '@/images/back.png'
 import checked from '@/images/checked.png'
 import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
 import './index.scss'
 import { Button } from "@nutui/nutui-react-taro"
 import { useState } from "react"
 import Taro from "@tarojs/taro"
 import { useDidShow } from "@tarojs/taro"
 
-const unChecked = checked
+const activeEye = eye
-const activeEye = eyeClose
 
 const Login = () => {
 
@@ -93,7 +93,9 @@ const Login = () => {
                             <Input className="form-input" placeholder="请输入账号" onInput={(v) => {
                                 setAccount(v.detail.value)
                             }} />
-                            <Image className="w-6 h-6 absolute right-0 bottom-16" src={account ? checked : unChecked} />
+                            {
+                                !!account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                            }
                         </View>
                     </View>
                     <View className="form-item mt-22">
@@ -125,7 +127,10 @@ const Login = () => {
                             <Input className="form-input" placeholder="请输手机号" placeholderClass="form-input-placeholder" onInput={(v) => {
                                 setMobile(v.detail.value)
                             }} />
-                            <Image className="w-6 h-6 absolute right-0 bottom-16" src={mobile ? checked : unChecked} />
+                            {
+                                mobile && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                            }
+
                         </View>
                     </View>
                     <View className="form-item mt-22">

src/pages/my-card/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '我的银行卡'
+})

src/pages/my-card/index.jsx

@@ -0,0 +1,50 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+
+
+
+const Login = () => {
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    const navCreate = () => {
+        Taro.navigateTo({
+            url: '/pages/add-card/index'
+        })
+    }
+
+
+    return <View className="login-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            我的银行卡
+
+        </View>
+        <View className="change-pwd-container bg-slate-50 relative flex flex-col items-center">
+            <View className="card-item flex-col justify-center">
+                <View className="flex-between">
+                    <View className="bank-name">xxx银行</View>
+                    <View className="bank-number">123456789777</View>
+                </View>
+                <View className="card-item-des">解除绑定</View>
+            </View>
+            <View className="change-phone-footer flex flex-col justify-center">
+                <Button className="login-btn" onClick={navCreate}>新增银行</Button>
+            </View>
+
+        </View>
+
+    </View>
+}
+
+
+export default Login

src/pages/my-card/index.scss

@@ -0,0 +1,61 @@
+.login-header {
+    height: 86px;
+}
+
+.login-frame {
+    height: auto;
+    font-size: 14px;
+    background: #FBFBFD;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+}
+
+.change-pwd-container {
+    width: 375px;
+    height: calc(100vh - 86px);
+    border-radius: 20px 20px 0 0;
+    box-shadow: 0px 8px 51px 0px rgba(230, 234, 238, 0.8);
+    box-sizing: border-box;
+    padding: 20px 30px;
+}
+
+.login-btn {
+    width: 253px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+
+}
+
+.change-phone-footer {
+    margin-top: 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: fixed;
+    bottom: 60px;
+}
+
+
+.card-item {
+    width: 334px;
+    height: 124px;
+    background: #F67952;
+    border-radius: 30px 30px 30px 30px;
+    opacity: 1;
+    box-sizing: border-box;
+    padding: 0 25px;
+    font-weight: bold;
+    color: #FFFFFF;
+    font-size: 12px;
+    margin-top: 12px;
+}
+
+.card-item-des {
+    font-size: 16px;
+    margin-top: 10px;
+}

src/pages/order/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '我的订单'
+})

src/pages/order/index.jsx

@@ -0,0 +1,87 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+
+import empty from '@/images/empty.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { Picker } from "@nutui/nutui-react-taro"
+import { Infiniteloading } from "@nutui/nutui-react-taro"
+import { useEffect } from "react"
+
+
+
+const Login = () => {
+
+    const [tabKey, setTabKey] = useState('0')
+    const [page, setPage] = useState(1)
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+    useEffect(() => { }, [tabKey])
+
+
+    return <View className="order-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            我的订单
+
+        </View>
+        <View className="order-container relative">
+
+            <View className="order-tabs flex-around">
+                <View className={'order-tab-pane ' + (tabKey == '0' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('0')}>全部</View>
+                <View className={'order-tab-pane ' + (tabKey == '1' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('1')}>待付款</View>
+                <View className={'order-tab-pane ' + (tabKey == '2' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('2')}>待发货</View>
+                <View className={'order-tab-pane ' + (tabKey == '3' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('3')}>已完成</View>
+            </View>
+            <View className="orderScroll" id="orderScroll">
+                <Infiniteloading
+                    containerId="orderScroll"
+                    useWindow={false}
+                    loadTxt="loading"
+                    loadMoreTxt="没有数据啦～"
+                    loadIcon='loading'
+                    hasMore={false}
+                    onLoadMore={(x) => {
+                        setPage(p => p + 1)
+                        x()
+                    }}
+                >
+                    <View className="order-item-container mt20 flex-col">
+                        <View className="flex-between">
+                            <Text>订单号：1947034434</Text>
+                            <Text className="text-gold">等待付款</Text>
+                        </View>
+                        <View className="order-goods flex-between">
+                            <View className="order-goods-left flex-start">
+                                <Image src={'https://img.yzcdn.cn/vant/cat.jpeg'} className="order-goods-img" />
+                                <View className="flex-col ml17">
+                                    <Text>商品名称</Text>
+                                    <Text>¥199.00</Text>
+                                </View>
+                            </View>
+                            <View className="order-goods-num">X1</View>
+                        </View>
+                        <View className="order-goods-action flex-between">
+                            <View className="order-goods-settle">
+                                <Text>已付金额:</Text>
+                                <Text className="text-gold">¥19999.00</Text>
+                            </View>
+                            <Button className="order-goods-btn flex-center order-btn-cancel">取消订单</Button>
+                            <Button className="order-goods-btn flex-center order-btn-pay">立即付款</Button>
+                        </View>
+                    </View>
+                </Infiniteloading>
+            </View>
+
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/order/index.scss

@@ -0,0 +1,112 @@
+.order-frame {
+    min-height: 100vh;
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+}
+
+.order-container {
+    width: 375px;
+    box-sizing: border-box;
+    padding: 10px 0px;
+}
+
+
+.order-tabs {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    color: #7D7D7E;
+    height: 36px;
+    margin: 0 20px;
+}
+
+.order-tab-pane {
+    width: 64px;
+    height: 36px;
+    text-align: center;
+    position: relative;
+}
+
+.order-tab-pane-active::before {
+    content: "";
+    background-color: #F67952;
+    border-radius: 5px;
+    width: 64px;
+    height: 5px;
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+}
+
+.order-tab-pane-active {
+    color: #F67952;
+}
+
+
+.orderScroll {
+    height: calc(100vh - 86px - 50px);
+}
+
+.order-item-container {
+    width: 375px;
+    height: 206px;
+    background: #FFFFFF;
+    box-shadow: -2px 8px 46px 0px rgba(37, 45, 50, 0.05);
+    border-radius: 0px 0px 0px 0px;
+    opacity: 1;
+    box-sizing: border-box;
+    padding: 10px 20px;
+    color: #181A20;
+}
+
+.order-item-container:first {
+    margin-top: 30px;
+}
+
+.order-goods {
+    height: 110px;
+    color: rgba(0, 0, 0, 0.5);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    ;
+}
+
+.order-goods-img {
+    width: 75px;
+    height: 63px;
+    border-radius: 12px;
+}
+
+.order-goods-action {
+    margin-top: 12px;
+}
+
+.order-goods-btn {
+    width: 84px;
+    height: 36px;
+    border-radius: 20px 20px 20px 20px;
+    opacity: 1;
+    line-height: 36px;
+    padding: 0;
+}
+
+.order-btn-pay {
+    background: #F67952;
+    border: none;
+    color: #FFFFFF;
+}
+
+.order-btn-cancel {
+    background: rgba(246, 121, 82, 0.15);
+    border: none;
+    color: #F67952
+}
+
+.order-btn-algin {
+    border: 1px solid #F67952;
+    color: #F67952
+}
+
+.order-btn-delete {
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    color: #5E6272;
+}

src/pages/pay-success/index.config.js

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

src/pages/pay-success/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Image, View, Text } from '@tarojs/components'
+import './index.scss'
+
+import { useEffect } from 'react';
+import { useState } from 'react';
+import paysuccess from '@/images/paysuccess.png'
+import Taro from '@tarojs/taro';
+import { useRouter } from '@tarojs/taro';
+import { Button } from '@nutui/nutui-react-taro';
+
+
+
+function Index() {
+    // 跳转
+    const navDetailFn = (id) => {
+        Taro.navigateTo({
+            url: `/pages/goods-detail/index?id=${id}`
+        })
+    }
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+    const goHome = () => {
+        Taro.navigateTo({
+            url: '/pages/index/index'
+        })
+    }
+
+    return (
+        <View className='ps-container'>
+            <Image src={paysuccess} className='pay-success' />
+            <Text className='pay-title'>支付成功</Text>
+            <Text className='t14'>您已成功购买商品，请到“我的订单”查看</Text>
+            <Button className='go-order pay-btn' onClick={navDetailFn}>我的订单</Button>
+            <Button className='go-home pay-btn' onClick={goHome}>返回首页</Button>
+        </View>
+    )
+}
+
+export default Index

src/pages/pay-success/index.scss

@@ -0,0 +1,51 @@
+.ps-container {
+    background: #FBFBFD;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    line-height: 23px;
+    text-align: center;
+    height: 100vh;
+}
+
+.pay-success {
+    width: 209px;
+    height: 208px;
+    margin: 0 auto;
+    margin-top: 130px;
+}
+
+.pay-title {
+    font-weight: 600;
+    color: #000000;
+    line-height: 34px;
+    font-size: 24px;
+    margin-top: 60px;
+    margin-bottom: 10px;
+}
+
+.pay-btn {
+    width: 233px;
+    height: 55px;
+    border-radius: 107px 107px 107px 107px;
+    opacity: 1;
+    border: none;
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.go-order {
+    color: #FFFFFF;
+    background: #F67952;
+    margin-top: 53px;
+}
+
+.go-home {
+
+
+    background: #FFE9E2;
+    color: #F67952;
+    margin-top: 15px;
+}

src/pages/register/index.jsx

@@ -2,13 +2,13 @@ import { Image, Input, Text, View } from "@tarojs/components"
 import back from '@/images/back.png'
 import checked from '@/images/checked.png'
 import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
 import './index.scss'
 import { Button } from "@nutui/nutui-react-taro"
 import { useState } from "react"
 import Taro from "@tarojs/taro"
 
-const unChecked = checked
+const activeEye = eye
-const activeEye = eyeClose
 
 const Login = () => {
 
@@ -64,7 +64,10 @@ const Login = () => {
                     <Input className="form-input" placeholder="请输手机号" placeholderClass="form-input-placeholder" onInput={(v) => {
                         setMobile(v.detail.value)
                     }} />
-                    <Image className="w-6 h-6 absolute right-0 bottom-16" src={mobile ? checked : unChecked} />
+                    {
+                        mobile && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                    }
+
                 </View>
             </View>
             <View className="form-item mt-22">

src/pages/scope/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '我的积分'
+})

src/pages/scope/index.jsx

@@ -0,0 +1,88 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { Picker } from "@nutui/nutui-react-taro"
+import { Tabs, TabPane } from "@nutui/nutui-react-taro"
+import { Infiniteloading } from "@nutui/nutui-react-taro"
+import { useEffect } from "react"
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [tabKey, setTabKey] = useState('0')
+    const [page, setPage] = useState(1)
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+    useEffect(() => { }, [tabKey])
+
+
+    return <View className="cash-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            我的积分
+
+        </View>
+        <View className="scope-container relative">
+            <View className="scope-amount flex-col ">
+                <View className="flex-between mt-22">
+                    <Text>当前积分</Text>
+                    <Text className="scope-amount-price">50000</Text>
+                </View>
+            </View>
+
+            <View className="amount-container">
+                <View className="amount-tabs flex-around">
+                    <View className={'tab-pane ' + (tabKey == '0' ? 'tab-pane-active' : '')} onClick={() => setTabKey('0')}>余额流水</View>
+                    <View className={'tab-pane ' + (tabKey == '1' ? 'tab-pane-active' : '')} onClick={() => setTabKey('1')}>充值记录</View>
+                    <View className={'tab-pane ' + (tabKey == '2' ? 'tab-pane-active' : '')} onClick={() => setTabKey('2')}>提现记录</View>
+                </View>
+                <View className="scopeScroll" id="scopeScroll">
+                    <Infiniteloading
+                        containerId="scopeScroll"
+                        useWindow={false}
+                        loadTxt="loading"
+                        loadMoreTxt="没有数据啦～"
+                        loadIcon='loading'
+                        hasMore={false}
+                        onLoadMore={(x) => {
+                            setPage(p => p + 1)
+                            x()
+                        }}
+                    >
+                        <View className="amount-item flex-between">
+                            <View className="amount-item-detail flex-col">
+                                <View>完成每日登陆</View>
+                                <View className="amount-item-time">2021/04/09 19:42:36</View>
+                            </View>
+                            <View className="amount-item-log">+1.00</View>
+                        </View>
+
+                        <View className="amount-item flex-between">
+                            <View className="amount-item-detail flex-col">
+                                <View>完成每日登陆</View>
+                                <View className="amount-item-time">2021/04/09 19:42:36</View>
+                            </View>
+                            <View className="amount-item-log">+1.00</View>
+                        </View>
+                    </Infiniteloading>
+                </View>
+            </View>
+
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/scope/index.scss

@@ -0,0 +1,109 @@
+.cash-frame {
+    min-height: 100vh;
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+}
+
+.scope-container {
+    width: 375px;
+    box-sizing: border-box;
+    padding: 20px 20px;
+}
+
+
+.scope-amount {
+    width: 332px;
+    height: 78px;
+    background: #F67952;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+
+    color: #FFFFFF;
+    font-size: 16px;
+    box-sizing: border-box;
+    padding: 0 15px;
+}
+
+
+
+.scope-amount-price {
+    font-size: 26px;
+    font-weight: bold;
+}
+
+
+.scope-btn {
+    width: 140px;
+    height: 44px;
+    background: #FFFFFF;
+    border-radius: 23px 23px 23px 23px;
+    opacity: 1;
+    font-size: 14px;
+    font-weight: 400;
+    color: #FF4700;
+}
+
+
+.amount-container {
+    width: 336px;
+    margin-top: 34px;
+}
+
+.amount-tabs {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    color: #7D7D7E;
+    height: 40px;
+}
+
+.tab-pane {
+    width: 88px;
+    height: 40px;
+    text-align: center;
+    position: relative;
+}
+
+.tab-pane-active::before {
+    content: "";
+    background-color: #F67952;
+    border-radius: 5px;
+    width: 88px;
+    height: 5px;
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+}
+
+.tab-pane-active {
+    color: #F67952;
+}
+
+.amount-item {
+    width: 330px;
+    height: 78px;
+    background: #FFFFFF;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    font-weight: 500;
+    color: #000;
+    padding: 0 15px;
+    box-sizing: border-box;
+    margin-top: 18px;
+}
+
+.amount-item-time {
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+}
+
+.amount-item-log {
+    font-weight: bold;
+    color: #FF4700;
+    font-size: 20px;
+}
+
+.scopeScroll {
+    height: calc(100vh - 86px - 78px - 40px - 52px);
+}

src/pages/settle/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '商品结算'
+})

src/pages/settle/index.jsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
+import './index.scss'
+
+import { useEffect } from 'react';
+import { useState } from 'react';
+import backNav from '@/images/backNav.png'
+import next from '@/images/next.png'
+import Taro from '@tarojs/taro';
+import { useRouter } from '@tarojs/taro';
+import { Button } from '@nutui/nutui-react-taro';
+
+
+
+function Index() {
+
+  const param = useRouter().params
+  const [id] = useState(param.id)
+
+  const [swiperProgress, setSwiperProgress] = useState(1)
+  const list = [
+    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg'
+  ]
+
+
+
+  useEffect(() => {
+
+
+  }, [id])
+
+
+  // 跳转
+  const navDetailFn = (id) => {
+    Taro.navigateTo({
+      url: `/pages/pay-success/index?id=${id}`
+    })
+  }
+
+  // 返回页面
+  const backFn = () => {
+    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+  }
+
+  // 选择地址
+  const goAddr = (id) => {
+    Taro.navigateTo({
+      url: '/pages/address/index?id=' + id
+    })
+  }
+
+  return (
+    <View className='settle-container'>
+      <View className='settle-detail-title'>
+        <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+        填写订单
+      </View>
+
+      <View className='settle-body' >
+        <View className='settle-address'>
+          <View className='address-title'>选择收货地址</View>
+          <View className='address-area' onClick={() => { goAddr('') }}>
+            <View className='address-item'>
+              <View className='address-item-name'>李四 18080093730</View>
+              <View className='address-info'>四川省 成都市 天府二街</View>
+              {/* <View className='address-item-name text-gold'>选择地址</View> */}
+            </View>
+            <View className='address-next'>
+              <Image src={next} />
+            </View>
+          </View>
+        </View>
+
+        <View className='settle-goods'>
+          <View className='settle-goods-title'>商品信息</View>
+          <View className='settle-goods-info'>
+            <Image className='settle-goods-img' />
+            <View className='settle-goods-content'>
+              <View className='settle-goods-content-title line-clamp-1'>商品名称</View>
+              <View className='settle-goods-content-price'>
+                <View className='settle-goods-content-price-1'>¥199</View>
+                <View className='settle-goods-content-price-num'>x1</View>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        <View className='settle-price-container'>
+          <View>总价：</View>
+          <View className='settle-price-p'>¥199</View>
+        </View>
+      </View>
+      <Button className='buy-btn' onClick={navDetailFn}>去支付</Button>
+    </View>
+  )
+}
+
+export default Index

src/pages/settle/index.scss

@@ -0,0 +1,197 @@
+.settle-container {
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-size: 14px;
+    background: #FBFBFD;
+    height: 100vh;
+}
+
+.nav-icon {
+    background: #FFFFFF;
+    box-shadow: 0px 16px 50px 0px rgba(49, 79, 124, 0.08);
+    border-radius: 16px 16px 16px 16px;
+}
+
+.settle-detail-title {
+    width: 100vw;
+    height: 60px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #1F2933;
+    line-height: 60px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.buy-btn {
+    width: 264px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    position: fixed;
+    bottom: 20px;
+    z-index: 888;
+    border: none;
+    left: calc((100vw - 264px)/2);
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: 22px;
+    font-size: 16px;
+}
+
+.settle-body {
+    padding: 21px;
+    height: auto;
+    box-sizing: border-box;
+    width: 100vw;
+}
+
+.settle-address {
+    margin-top: 10px;
+}
+
+.address-title {
+    height: 20px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 20px;
+}
+
+.address-area {
+    width: 333px;
+    height: 74px;
+    background: #FFFFFF;
+    box-shadow: 4px 7px 9px 0px rgba(56, 63, 68, 0.06);
+    border-radius: 10px 10px 10px 10px;
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 14px;
+}
+
+.address-item {
+    width: 290px;
+    display: flex;
+    flex-flow: column wrap;
+}
+
+.address-item-name {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: bold;
+}
+
+.address-info {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    margin-top: 4px;
+}
+
+.address-area .address-next {
+    width: 6px;
+    height: 10px;
+}
+
+.address-area .address-next image {
+    width: 100%;
+    height: 100%;
+
+}
+
+
+.settle-goods {
+    width: 100%;
+    margin-top: 36px;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.settle-goods-title {
+    height: 20px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 20px;
+}
+
+.settle-goods-info {
+    width: 333px;
+    height: 92px;
+    box-shadow: 4px 7px 9px 0px rgba(56, 63, 68, 0.02);
+    background: #FFFFFF;
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    margin-top: 24px;
+    display: flex;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    align-items: center;
+    padding: 0 14px;
+}
+
+.settle-goods-img {
+    width: 84px;
+    height: 73px;
+    background: rgba(62, 66, 41, 0.1);
+    border-radius: 15px 15px 15px 15px;
+    opacity: 1;
+    border: none;
+}
+
+.settle-goods-content {
+    display: flex;
+    flex-direction: column;
+    margin-left: 19px;
+    width: 200px;
+}
+
+.settle-goods-content-title {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    line-height: 16px;
+}
+
+.settle-goods-content-price {
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 14px;
+    margin-top: 6px;
+}
+
+.settle-goods-content-price-1 {
+    font-weight: 500;
+    color: #000000;
+    line-height: 19px;
+    font-size: 16px;
+}
+
+.settle-price-container {
+    margin-top: 20px;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.5);
+    line-height: 16px;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.settle-price-p {
+    font-size: 16px;
+    font-weight: 500;
+    color: #F67952;
+    line-height: 19px;
+
+}

src/pages/shopping/index.config.js

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

src/pages/shopping/index.jsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { Image, Text, View } from '@tarojs/components'
+import {
+  Button
+} from "@nutui/nutui-react-taro";
+import './index.scss'
+import TabbarAction from '@/components/action';
+import { Infiniteloading } from '@nutui/nutui-react-taro';
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+import Taro from '@tarojs/taro';
+
+
+function Index() {
+
+  const [list, setList] = useState([])
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(true)
+
+  useEffect(() => {
+    if (list.length > 50) {
+      setHasMore(false)
+      return
+    }
+    let l = []
+    for (let i = list.length; i < 10 + list.length; i++) {
+      l.push(i)
+    }
+    setList([...list, ...l])
+
+  }, [page])
+
+
+  // 跳转
+  const navDetailFn = (id) => {
+    Taro.navigateTo({
+      url: `/pages/goods-detail/index?id=${id}`
+    })
+  }
+
+  return (
+    <View className='home-container'>
+      <View className='home-title'>商城</View>
+      <TabbarAction index={1} />
+      <View className='home-body' id="shoppingScroll">
+        <Infiniteloading
+          containerId="shoppingScroll"
+          useWindow={false}
+          loadTxt="loading"
+          loadMoreTxt="没有数据啦～"
+          loadIcon='loading'
+          hasMore={hasMore}
+          onLoadMore={(x) => {
+            setPage(p => p + 1)
+            x()
+          }}
+        >
+          <View className='shopping-container '>
+            {
+              list.map(item => {
+                return <View className='shopping-item' key={item} onClick={() => {
+                  navDetailFn(item)
+                }}>
+                  <View className='shopping-item-image'>
+                    <Image src='https://img.yzcdn.cn/vant/cat.jpeg' />
+                  </View>
+                  <View className='shopping-item-content'>
+                    <View className='shopping-item-name line-clamp-2'>
+                      这个是商品的名称，但是可能有一点点的长
+                    </View>
+                    <View className='shopping-item-desc line-clamp-2 '>
+                      这个是商品的介绍
+                    </View>
+                    <View className='shopping-item-price text-right'>
+                      <Text className='shopping-item-price-sale'>¥199</Text>
+                      <Text className='shopping-item-price-origin'>原价888</Text>
+                    </View>
+                  </View>
+
+                </View>
+              })
+            }
+
+
+          </View>
+        </Infiniteloading>
+      </View>
+    </View>
+  )
+}
+
+export default Index

src/pages/shopping/index.scss

@@ -0,0 +1,86 @@
+.home-container {
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-size: 14px;
+    background: #FDFDFD;
+}
+
+.home-title {
+    width: 100vw;
+    height: 60px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 0px 0px 0px 0px;
+    opacity: 1;
+    font-size: 18px;
+    font-weight: bold;
+    color: #181A20;
+    line-height: 60px;
+    text-align: center;
+}
+
+.home-body {
+    height: calc(100vh - 60px - 66px);
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.shopping-container {
+    width: 100vw;
+    height: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 0 8px;
+    margin-top: 24px;
+
+}
+
+.shopping-item {
+    width: 351px;
+    height: 288px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    margin-top: 16px;
+}
+
+.shopping-item-image image {
+    width: 100%;
+    height: 194px;
+    border-radius: 10px 10px 0 0;
+}
+
+.shopping-item-content {
+    padding: 0px 14px;
+}
+
+.shopping-item-name {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+}
+
+.shopping-item-desc {
+    font-size: 12px;
+    margin-top: 6px;
+    color: #000;
+}
+
+.shopping-item-price {
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 10px;
+    font-weight: 400;
+    margin-top: 6px;
+}
+
+.shopping-item-price-sale {
+    font-size: 16px;
+    font-weight: bold;
+    color: #F83A52;
+    margin-right: 6px;
+}

src/pages/team/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '我的团队'
+})

src/pages/team/index.jsx

@@ -0,0 +1,129 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import level2 from '@/images/level2.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { Avatar } from "@nutui/nutui-react-taro"
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [account, setAccount] = useState('')
+    const [pwd, setPwd] = useState()
+    const [loginMode, setLoginMode] = useState('account')
+
+    const [mobile, setMobile] = useState('')
+    const [smsCode, setSmsCode] = useState('')
+    const [interval, setIntervalTime] = useState(0)
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    // 去登陆
+    const loginFn = () => {
+        Taro.redirectTo({
+            url: '/pages/login/index'
+        })
+    }
+
+    //清理数据
+    const cleanFn = () => {
+        if (loginMode === 'account') {
+            setAccount('')
+            setPwd('')
+            return
+        }
+        setMobile('')
+        setSmsCode('')
+    }
+
+    // 倒计时
+    const countDown = () => {
+        if (!mobile) {
+            return
+        }
+        setIntervalTime(60)
+        if (interval > 0) {
+            return
+        }
+        let start = 60
+        const timer = setInterval(() => {
+            if (start > 0) {
+                start--
+                if (start <= 0) {
+                    clearInterval(timer)
+                }
+                setIntervalTime(start)
+            }
+        }, 1000)
+    }
+
+    return <View className="login-frame team-page  h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            我的团队
+        </View>
+
+        <View className="team-container flex-col items-center">
+            <View className="team-logo flex-col items-center">
+                <Image src={level2} className="team-logo-img" />
+                <Text>城市合伙人</Text>
+                <Text className="team-logo-text">我的等级</Text>
+            </View>
+
+            <View className="team-pre-container flex-around">
+                <View className="team-pre-item flex-col justify-center">
+                    <Text className="team-pre-price">0.00</Text>
+                    <Text>大区业绩</Text>
+                </View>
+                <View className="team-pre-item flex-col justify-center">
+                    <Text className="team-pre-price">0.00</Text>
+                    <Text>小区业绩</Text>
+                </View>
+            </View>
+
+            <View className="invite-container flex-col items-start">
+                <View className="invite-title">我邀请的人</View>
+                <View className="invite-item flex-between">
+                    <View className="invite-item-left flex-start items-center">
+                        <Avatar size={42} icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+                        />
+                        <View className="flex-col  invite-item-content">
+                            <Text>PB-60635</Text>
+                            <Text className="team-pre-item">2021-04-09</Text>
+                        </View>
+                    </View>
+                    <View className="invite-level">
+                        <Text className="invite-level-text">V5</Text>
+                    </View>
+                </View>
+                <View className="invite-item flex-between">
+                    <View className="invite-item-left flex-start items-center">
+                        <Avatar size={42} icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+                        />
+                        <View className="flex-col  invite-item-content">
+                            <Text>PB-60635</Text>
+                            <Text className="team-pre-item">2021-04-09</Text>
+                        </View>
+                    </View>
+                    <View className="invite-level">
+                        <Text className="invite-level-text">V5</Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/team/index.scss

@@ -0,0 +1,97 @@
+.team-page {
+    height: 100vh;
+    font-size: 14px;
+    background: #FBFBFD;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+}
+
+.team-container {
+    width: 375px;
+    height: calc(100vh - 86px);
+    box-sizing: border-box;
+    padding: 20px 30px;
+    font-weight: 400;
+    color: #181A20;
+    font-size: 16px;
+}
+
+.team-logo-img {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 10px;
+}
+
+.team-logo-text {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.team-pre-container {
+    width: 332px;
+    height: 98px;
+    background: #FFFFFF;
+    box-shadow: -2px 8px 46px 0px rgba(37, 45, 50, 0.05);
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    margin-top: 16px;
+}
+
+.team-pre-item {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.team-pre-price {
+    font-size: 20px;
+    font-weight: bold;
+    color: #000;
+}
+
+.invite-container {
+    margin-top: 20px;
+}
+
+.invite-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #000;
+    text-align: left;
+}
+
+.invite-item {
+    width: 332px;
+    height: 82px;
+    background: #FFFFFF;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    margin-top: 16px;
+    box-sizing: border-box;
+    padding: 0 12px;
+    color: #181A20;
+}
+
+.invite-item-content {
+    margin-left: 12px;
+    font-size: 14px;
+    height: 40px;
+    line-height: 20px;
+}
+
+.invite-level {
+    width: 38px;
+    height: 24px;
+    background: linear-gradient(117deg, #0F1732 0%, #2F3A58 100%);
+    border-radius: 12px;
+    opacity: 1;
+    font-weight: bold;
+    line-height: 24px;
+    font-size: 12px;
+    text-align: center;
+    margin-left: 10px;
+}
+
+.invite-level-text {
+    background: linear-gradient(297deg, #FCA12D 0%, #FEF9F8 100%);
+    background-clip: text;
+    color: transparent;
+}

src/pages/transfer/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '转赠他人'
+})

src/pages/transfer/index.jsx

@@ -0,0 +1,105 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { Picker } from "@nutui/nutui-react-taro"
+
+const activeEye = eye
+
+const Login = () => {
+
+    const [account, setAccount] = useState('')
+    const [pwd, setPwd] = useState('')
+    const [showPwd, setShowPwd] = useState(false)
+
+    const [visible, setVisible] = useState(false)
+    const [bank, setBank] = useState({ value: 0, text: '' })
+
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    return <View className="transfer-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            转赠他人
+
+        </View>
+        <View className="transfer-container relative">
+            <View className="transfer-amount flex-col justify-center">
+                <Text>当前余额</Text>
+                <Text className="transfer-amount-price">50000</Text>
+            </View>
+            <View>
+                <View className="form-item mt-22">
+                    <View className="form-label">对方账号</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" placeholder="请输入对方账号" onInput={(v) => {
+                            setAccount(v.detail.value)
+                        }} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">确认对方账号</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" placeholder="再次确认对方账号" onInput={(v) => {
+                            setAccount(v.detail.value)
+                        }} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">转赠数量</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" type="digit" placeholder="请输入转赠数量" onInput={(v) => {
+                            setAccount(v.detail.value)
+                        }} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">交易密码</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" type={showPwd ? 'text' : 'password'} placeholder="请输入密码" onInput={(v) => {
+                            setPwd(v.detail.value)
+                        }} />
+                        <Image className="w-6 h-6 absolute right-0 bottom-16" src={showPwd ? activeEye : eyeClose} onClick={() => {
+                            setShowPwd(v => !v)
+                        }} />
+                    </View>
+                </View>
+
+                {
+                    account &&
+                    <View className="transfer-footer ">
+                        <Button className="transfer-btn">立即赠送</Button>
+                    </View>
+                }
+            </View>
+
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/transfer/index.scss

@@ -0,0 +1,127 @@
+.transfer-frame {
+    height: 100vh;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+}
+
+.transfer-container {
+    width: 375px;
+    box-sizing: border-box;
+    padding: 20px 20px;
+}
+
+.form-item {
+    height: 68px;
+    opacity: 1;
+}
+
+.form-label {
+    font-size: 12px;
+    font-weight: bold;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    color: #2a2b2d;
+    line-height: 16px;
+}
+
+.form-input>.weui-input {
+    border: none;
+    height: 52px;
+    line-height: 52px;
+    border-bottom: 1px solid #262A34;
+    position: relative;
+    font-size: 16px;
+    color: #000;
+}
+
+.form-input>.weui-input:focus {
+    border-bottom: 2px solid #F67952;
+}
+
+.form-input-placeholder,
+.form-input>.weui-input::placeholder {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: bold;
+    color: #aeafb4;
+}
+
+.form-control {
+    height: 52px;
+    position: relative;
+}
+
+.forgot-password {
+    height: 24px;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #666;
+    line-height: 24px;
+
+    text-align: right;
+}
+
+
+.transfer-btn {
+    width: 253px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+}
+
+.transfer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 315px;
+    margin-top: 70px;
+}
+
+
+.code-btn {
+    width: 83px;
+    height: 30px;
+    background: #F67952;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    font-size: 12px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    border: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    bottom: 12px;
+}
+
+.transfer-amount {
+    width: 332px;
+    height: 120px;
+    background: linear-gradient(136deg, #00C982 0%, #0db17f 100%);
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    margin-bottom: 36px;
+    color: #FFFFFF;
+    font-size: 12px;
+    box-sizing: border-box;
+    padding-left: 23px;
+    padding-bottom: 10px;
+}
+
+.transfer-container .form-label {
+    color: #5E6272 !important;
+}
+
+.transfer-amount-price {
+    font-size: 26px;
+    font-weight: bold;
+    margin-top: 8px;
+}

src/pages/user-info/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '编辑资料'
+})

src/pages/user-info/index.jsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import { Image, Text, View, Input, Label } from '@tarojs/components'
+import './index.scss'
+
+import { useEffect } from 'react';
+import { useState } from 'react';
+import backNav from '@/images/backNav.png'
+import next from '@/images/next.png'
+import uncheck from '@/images/uncheck.png'
+import checked from '@/images/checked.png'
+import Taro from '@tarojs/taro';
+import { useRouter } from '@tarojs/taro';
+import { Button, Textarea, Address } from '@nutui/nutui-react-taro';
+import { Avatar } from '@nutui/nutui-react-taro';
+import { Overlay } from '@nutui/nutui-react-taro';
+
+
+
+function Index() {
+
+  const param = useRouter().params
+  const [id] = useState(param.id)
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+
+
+  }, [id])
+
+
+  // 跳转
+  const navDetailFn = (id) => {
+    Taro.navigateTo({
+      url: `/pages/pay-success/index?id=${id}`
+    })
+  }
+  // 返回页面
+  const backFn = () => {
+    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+  }
+
+  // editAvatar
+  const editAvatarFn = () => {
+    setVisible(true)
+
+  }
+
+  const loadAvatar = (type = 'album') => {
+
+    Taro.chooseImage({
+      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: [type], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
+      success: function (res) {
+        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+        var tempFilePaths = res.tempFilePaths
+        console.log(tempFilePaths)
+      }
+    })
+  }
+
+
+  return (
+    <View className='addr-container'>
+      <View className='addr-detail-title'>
+        <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+        编辑资料
+      </View>
+
+      <View className='addr-body' >
+        <View className=' addr-item'>
+          <View className='item-bg' >
+            <View className='my-order-title flex-between'>
+              <Avatar size={46} icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+              />
+              <View className='my-order-more flex-center' onClick={editAvatarFn}>
+                <Text>修改头像</Text>
+                <Image className='next-icon' src={next} />
+              </View>
+            </View>
+          </View>
+        </View>
+
+        <View className='addr-item mt-22'>
+          <View className='addr-form'>
+            <View className='addr-form-name'>个人信息</View>
+            <View className='flex justify-between items-center ' onClick={() => { setNormal(true) }}>
+              <Label />
+              <Image src={next} className='next-icon' />
+            </View>
+          </View>
+          <View className='addr-form'>
+            <View className='addr-form-name'>修改密码</View>
+            <View className='flex justify-between items-center ' onClick={() => { setNormal(true) }}>
+
+              <Image src={next} className='next-icon' />
+            </View>
+          </View>
+          <View className='addr-form'>
+            <View className='addr-form-name'>修改手机号</View>
+            <View className='flex justify-between items-center ' onClick={() => { setNormal(true) }}>
+              <Label>18080093730</Label>
+              <Image src={next} className='next-icon ml-2' />
+            </View>
+          </View>
+          <View className='addr-form'>
+            <View className='addr-form-name'>我的银行卡</View>
+            <View className='flex justify-between items-center ' onClick={() => { setNormal(true) }}>
+              <Image src={next} className='next-icon' />
+            </View>
+          </View>
+        </View>
+
+      </View>
+      <Overlay visible={visible} >
+        <View className='modify-box'>
+          <View className='modify-item '>
+            <View className='modify-item-btn flex-center' onClick={() => {
+              loadAvatar('camera')
+            }}>立即拍照</View>
+            <View className='modify-item-btn flex-center bt-none' onClick={() => {
+              loadAvatar('album')
+            }}>从相册选取</View>
+          </View>
+          <View className='modify-item mt-4'>
+            <View className='modify-item-btn bt-none flex-center' onClick={() => { setVisible(false) }}>取消</View>
+          </View>
+        </View>
+      </Overlay>
+    </View>
+  )
+}
+
+export default Index

src/pages/user-info/index.scss

@@ -0,0 +1,153 @@
+.addr-container {
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-size: 14px;
+    background: #FBFBFD;
+    height: 100vh;
+}
+
+.nav-icon {
+    background: #FFFFFF;
+    box-shadow: 0px 16px 50px 0px rgba(49, 79, 124, 0.08);
+    border-radius: 16px 16px 16px 16px;
+}
+
+.addr-detail-title {
+    width: 100vw;
+    height: 60px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #1F2933;
+    line-height: 60px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.addr-body {
+    padding: 21px;
+    height: auto;
+    box-sizing: border-box;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+}
+
+.addr-box {
+    width: 333px;
+    background: #FFFFFF;
+    box-shadow: 4px 7px 9px 0px rgba(56, 63, 68, 0.03);
+    border-radius: 10px 10px 10px 10px;
+    box-sizing: border-box;
+    padding: 0 12px;
+}
+
+.addr-item {
+    width: 333px;
+    background: #FFFFFF;
+    box-shadow: 4px 7px 9px 0px rgba(56, 63, 68, 0.03);
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+}
+
+.addr-form {
+    width: 308px;
+    box-sizing: border-box;
+    height: 48px;
+    border-bottom: 1px solid #F9F9F9;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+}
+
+.addr-form-name {
+    font-weight: bold;
+    color: #000000;
+    font-size: 15px;
+    margin-right: 10px;
+}
+
+.addr-form-input {
+    width: 230px;
+}
+
+.addr-btn {
+    width: 233px;
+    height: 55px;
+    border-radius: 107px 107px 107px 107px;
+    border: none;
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    background: #F67952;
+    position: fixed;
+    bottom: 30px;
+    left: calc((100vw - 233px)/2);
+}
+
+.addr-item>.nut-textarea {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.addr-item .weui-input {
+    color: var(--nutui-textarea-text-color, var(--nutui-gray-1, #1a1a1a));
+
+}
+
+
+.my-order-title {
+    font-weight: 600;
+    color: #000000;
+    width: 100%;
+}
+
+.my-order-more {
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.4);
+    margin-right: 8px;
+}
+
+.my-order-more text {
+    margin-right: 10px;
+}
+
+.item-bg {
+    width: 308px;
+    padding: 14px 0;
+}
+
+.modify-box {
+    padding: 10px;
+    width: 100vw;
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 0px;
+}
+
+.modify-item {
+    background: #FFFFFF;
+    box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    font-weight: 400;
+    color: #181A20;
+}
+
+.modify-item-btn {
+    height: 68px;
+    font-size: 16px;
+    border-bottom: 1px solid #D8D8D8;
+}

src/tailwind.scss

@@ -487,6 +487,10 @@
     grid-template-columns: repeat(12, minmax(0, 1fr))
 }
 
+.grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+}
+
 .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr))
 }