order
This commit is contained in:
tangping
parent
c032eacf07
commit
0f0850ca39
@ -56,8 +56,7 @@
|
||||
"autoprefixer": "^10.4.14",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-refresh": "^0.11.0",
|
||||
"tailwindcss": "^3.3.2"
|
||||
"react-refresh": "^0.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.8.0",
|
||||
|
||||
@ -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',
|
||||
]
|
||||
})
|
||||
|
||||
94
src/app.scss
94
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;
|
||||
}
|
||||
@ -98,4 +122,74 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
BIN
src/assets/images/addr.png
Normal file
BIN
src/assets/images/addr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/images/bal.png
Normal file
BIN
src/assets/images/bal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/delivery.png
Normal file
BIN
src/assets/images/delivery.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/images/done.png
Normal file
BIN
src/assets/images/done.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/images/edit.png
Normal file
BIN
src/assets/images/edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/empty.png
Normal file
BIN
src/assets/images/empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/images/eye.png
Normal file
BIN
src/assets/images/eye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/friend.png
Normal file
BIN
src/assets/images/friend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/images/home.png
Normal file
BIN
src/assets/images/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/income.png
Normal file
BIN
src/assets/images/income.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/level1.png
Normal file
BIN
src/assets/images/level1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/level2.png
Normal file
BIN
src/assets/images/level2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/mall.png
Normal file
BIN
src/assets/images/mall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/images/message.png
Normal file
BIN
src/assets/images/message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/next.png
Normal file
BIN
src/assets/images/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 374 B |
BIN
src/assets/images/paysuccess.png
Normal file
BIN
src/assets/images/paysuccess.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/images/scope.png
Normal file
BIN
src/assets/images/scope.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/setting.png
Normal file
BIN
src/assets/images/setting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/team.png
Normal file
BIN
src/assets/images/team.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/images/uncheck.png
Normal file
BIN
src/assets/images/uncheck.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/images/user1.png
Normal file
BIN
src/assets/images/user1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/waitpay.png
Normal file
BIN
src/assets/images/waitpay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@ -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'
|
||||
>
|
||||
|
||||
3
src/pages/add-card/index.config.js
Normal file
3
src/pages/add-card/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的团队'
|
||||
})
|
||||
113
src/pages/add-card/index.jsx
Normal file
113
src/pages/add-card/index.jsx
Normal file
@ -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
|
||||
117
src/pages/add-card/index.scss
Normal file
117
src/pages/add-card/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/address-create/index.config.js
Normal file
3
src/pages/address-create/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '编辑地址'
|
||||
})
|
||||
167
src/pages/address-create/index.jsx
Normal file
167
src/pages/address-create/index.jsx
Normal file
@ -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
|
||||
109
src/pages/address-create/index.scss
Normal file
109
src/pages/address-create/index.scss
Normal file
@ -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));
|
||||
|
||||
}
|
||||
3
src/pages/address/index.config.js
Normal file
3
src/pages/address/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的地址'
|
||||
})
|
||||
82
src/pages/address/index.jsx
Normal file
82
src/pages/address/index.jsx
Normal file
@ -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
|
||||
118
src/pages/address/index.scss
Normal file
118
src/pages/address/index.scss
Normal file
@ -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);
|
||||
}
|
||||
3
src/pages/balance/index.config.js
Normal file
3
src/pages/balance/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的余额'
|
||||
})
|
||||
96
src/pages/balance/index.jsx
Normal file
96
src/pages/balance/index.jsx
Normal file
@ -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
|
||||
109
src/pages/balance/index.scss
Normal file
109
src/pages/balance/index.scss
Normal file
@ -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);
|
||||
}
|
||||
3
src/pages/cash/index.config.js
Normal file
3
src/pages/cash/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '立即提现'
|
||||
})
|
||||
106
src/pages/cash/index.jsx
Normal file
106
src/pages/cash/index.jsx
Normal file
@ -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
|
||||
128
src/pages/cash/index.scss
Normal file
128
src/pages/cash/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/change-phone/index.config.js
Normal file
3
src/pages/change-phone/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '修改手机号'
|
||||
})
|
||||
122
src/pages/change-phone/index.jsx
Normal file
122
src/pages/change-phone/index.jsx
Normal file
@ -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
|
||||
116
src/pages/change-phone/index.scss
Normal file
116
src/pages/change-phone/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/change-pwd/index.config.js
Normal file
3
src/pages/change-pwd/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '找回密码'
|
||||
})
|
||||
134
src/pages/change-pwd/index.jsx
Normal file
134
src/pages/change-pwd/index.jsx
Normal file
@ -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
|
||||
116
src/pages/change-pwd/index.scss
Normal file
116
src/pages/change-pwd/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/conversion/index.config.js
Normal file
3
src/pages/conversion/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '立即转换'
|
||||
})
|
||||
91
src/pages/conversion/index.jsx
Normal file
91
src/pages/conversion/index.jsx
Normal file
@ -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
|
||||
128
src/pages/conversion/index.scss
Normal file
128
src/pages/conversion/index.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '找回密码'
|
||||
navigationBarTitleText: '修改密码'
|
||||
})
|
||||
|
||||
@ -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 = eyeClose
|
||||
const activeEye = eye
|
||||
|
||||
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">
|
||||
|
||||
3
src/pages/goods-detail/index.config.js
Normal file
3
src/pages/goods-detail/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '商品详情'
|
||||
})
|
||||
112
src/pages/goods-detail/index.jsx
Normal file
112
src/pages/goods-detail/index.jsx
Normal file
@ -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
|
||||
101
src/pages/goods-detail/index.scss
Normal file
101
src/pages/goods-detail/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/home/index.config.js
Normal file
3
src/pages/home/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的'
|
||||
})
|
||||
158
src/pages/home/index.jsx
Normal file
158
src/pages/home/index.jsx
Normal file
@ -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
|
||||
197
src/pages/home/index.scss
Normal file
197
src/pages/home/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/income/index.config.js
Normal file
3
src/pages/income/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的收益'
|
||||
})
|
||||
94
src/pages/income/index.jsx
Normal file
94
src/pages/income/index.jsx
Normal file
@ -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
|
||||
115
src/pages/income/index.scss
Normal file
115
src/pages/income/index.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '首页'
|
||||
navigationBarTitleText: '商城'
|
||||
})
|
||||
|
||||
@ -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'>
|
||||
<View className='goods-container '>
|
||||
{
|
||||
list.map(item => {
|
||||
return <View className='goods-item' key={item}>
|
||||
{item}
|
||||
return <View className='goods-item' key={item} onClick={() => {
|
||||
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>
|
||||
|
||||
@ -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 {
|
||||
width: 170px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
height: auto;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.goods-item-image image {
|
||||
height: 142px;
|
||||
width: 174px;
|
||||
background: red;
|
||||
margin-top: 8px;
|
||||
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;
|
||||
}
|
||||
@ -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 = eyeClose
|
||||
const activeEye = eye
|
||||
|
||||
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">
|
||||
|
||||
3
src/pages/my-card/index.config.js
Normal file
3
src/pages/my-card/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的银行卡'
|
||||
})
|
||||
50
src/pages/my-card/index.jsx
Normal file
50
src/pages/my-card/index.jsx
Normal file
@ -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
|
||||
61
src/pages/my-card/index.scss
Normal file
61
src/pages/my-card/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/order/index.config.js
Normal file
3
src/pages/order/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的订单'
|
||||
})
|
||||
87
src/pages/order/index.jsx
Normal file
87
src/pages/order/index.jsx
Normal file
@ -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
|
||||
112
src/pages/order/index.scss
Normal file
112
src/pages/order/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/pay-success/index.config.js
Normal file
3
src/pages/pay-success/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '支付成功'
|
||||
})
|
||||
43
src/pages/pay-success/index.jsx
Normal file
43
src/pages/pay-success/index.jsx
Normal file
@ -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
|
||||
51
src/pages/pay-success/index.scss
Normal file
51
src/pages/pay-success/index.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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 = eyeClose
|
||||
const activeEye = eye
|
||||
|
||||
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">
|
||||
|
||||
3
src/pages/scope/index.config.js
Normal file
3
src/pages/scope/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的积分'
|
||||
})
|
||||
88
src/pages/scope/index.jsx
Normal file
88
src/pages/scope/index.jsx
Normal file
@ -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
|
||||
109
src/pages/scope/index.scss
Normal file
109
src/pages/scope/index.scss
Normal file
@ -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);
|
||||
}
|
||||
3
src/pages/settle/index.config.js
Normal file
3
src/pages/settle/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '商品结算'
|
||||
})
|
||||
100
src/pages/settle/index.jsx
Normal file
100
src/pages/settle/index.jsx
Normal file
@ -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
|
||||
197
src/pages/settle/index.scss
Normal file
197
src/pages/settle/index.scss
Normal file
@ -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;
|
||||
|
||||
}
|
||||
3
src/pages/shopping/index.config.js
Normal file
3
src/pages/shopping/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '首页'
|
||||
})
|
||||
93
src/pages/shopping/index.jsx
Normal file
93
src/pages/shopping/index.jsx
Normal file
@ -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
|
||||
86
src/pages/shopping/index.scss
Normal file
86
src/pages/shopping/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/team/index.config.js
Normal file
3
src/pages/team/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的团队'
|
||||
})
|
||||
129
src/pages/team/index.jsx
Normal file
129
src/pages/team/index.jsx
Normal file
@ -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
|
||||
97
src/pages/team/index.scss
Normal file
97
src/pages/team/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/transfer/index.config.js
Normal file
3
src/pages/transfer/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '转赠他人'
|
||||
})
|
||||
105
src/pages/transfer/index.jsx
Normal file
105
src/pages/transfer/index.jsx
Normal file
@ -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
|
||||
127
src/pages/transfer/index.scss
Normal file
127
src/pages/transfer/index.scss
Normal file
@ -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;
|
||||
}
|
||||
3
src/pages/user-info/index.config.js
Normal file
3
src/pages/user-info/index.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '编辑资料'
|
||||
})
|
||||
133
src/pages/user-info/index.jsx
Normal file
133
src/pages/user-info/index.jsx
Normal file
@ -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
|
||||
153
src/pages/user-info/index.scss
Normal file
153
src/pages/user-info/index.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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))
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user