李志伟 3 years ago
parent
commit
909e725d0d

+ 15
- 0
src/assets/walletCard/index.jsx View File

@@ -0,0 +1,15 @@
1
+import { View,Image } from "@tarojs/components"
2
+import walletImg from '@/assets/bank/walletBgi.png'
3
+import './style.less'
4
+
5
+export default (props) => {
6
+  const {value,onClick}=props
7
+  return (
8
+    <View className='walletCard'>
9
+      <Image src={walletImg} className='walletImg' />
10
+      <View className='title'>钱包余额(元)</View>
11
+      <View className='price'>2022.56</View>
12
+      <View className='withdrawalBtn' onClick={onClick}>提现</View>
13
+    </View>
14
+    )
15
+}

+ 36
- 0
src/assets/walletCard/style.less View File

@@ -0,0 +1,36 @@
1
+.walletCard{
2
+  height: calc(calc(100vw - 60px) / 2);
3
+  border-radius: 40px;
4
+  padding: 67px 0 45px 80px;
5
+  color: #fff;
6
+  font-weight: bold;
7
+  box-sizing: border-box;
8
+  .walletImg{
9
+    position: absolute;
10
+    width: 100%;
11
+    height:calc(calc(100vw - 60px) / 2);
12
+    top: 0;
13
+    left: 0;
14
+  }
15
+  .title{
16
+    font-size: 32px;
17
+    position: relative;
18
+    font-weight: 400;
19
+  }
20
+  .price{
21
+    font-size: 66px;
22
+    position: relative;
23
+    margin-top: 20px;
24
+  }
25
+  .withdrawalBtn{
26
+    width: 160px;
27
+    position: relative;
28
+    height: 68px;
29
+    background: linear-gradient(180deg, #37BC6A, #127B39);
30
+    border-radius: 32px;
31
+    font-size: 38px;
32
+    text-align: center;
33
+    line-height: 68px;
34
+    margin-top: 10px;
35
+  }
36
+}

+ 12
- 0
src/components/ListTitle/index.jsx View File

@@ -0,0 +1,12 @@
1
+import { View } from "@tarojs/components"
2
+import './style.less'
3
+
4
+export default (props) => {
5
+  const {value}=props
6
+  return (
7
+    <View className='listTitle'>
8
+      <View className='verticalLine' />
9
+      {value}
10
+    </View>
11
+  )
12
+}

+ 13
- 0
src/components/ListTitle/style.less View File

@@ -0,0 +1,13 @@
1
+.listTitle{
2
+  display: flex;
3
+  align-items: center;
4
+  font-size: 34px;
5
+  color: #333;
6
+  margin: 60px 0 10px;
7
+  .verticalLine{
8
+    width: 8px;
9
+    height: 32px;
10
+    background: #000;
11
+    margin-right: 23px;
12
+  }
13
+}

+ 3
- 1
src/pages/index/components/User/index.jsx View File

@@ -29,7 +29,9 @@ export default (props) => {
29 29
   const goMachinery = () => {
30 30
     Taro.navigateTo({ url: '/pages/machineryList/index' });
31 31
    }
32
-  const goWallet = () => { }
32
+  const goWallet = () => {
33
+    Taro.navigateTo({ url: '/pages/wallet/index' });
34
+   }
33 35
   const goBank = () => { }
34 36
   const signOut = () => { 
35 37
     Taro.reLaunch({ url: '/pages/index/index?tab=2' });

+ 7
- 0
src/pages/wallet/index.config.js View File

@@ -0,0 +1,7 @@
1
+export default {
2
+  navigationBarTitleText: '我的钱包',
3
+  navigationStyle: 'custom',
4
+  styleIsolation: 'shared',
5
+  enableShareAppMessage: true,
6
+  disableScroll: true,
7
+}

+ 61
- 0
src/pages/wallet/index.jsx View File

@@ -0,0 +1,61 @@
1
+import { View, ScrollView } from "@tarojs/components"
2
+import withLayout from '@/layouts'
3
+import CustomNav from "@/components/CustomNav"
4
+import WalletCard from "@/assets/walletCard"
5
+import ListTitle from "@/components/ListTitle"
6
+import './style.less'
7
+
8
+export default withLayout((props) => {
9
+  const goWithdrawal = () => { }
10
+  return (
11
+    <View className='page-index'>
12
+      <View className='index-navbar'>
13
+        <CustomNav title='我的钱包' />
14
+      </View>
15
+      <View className='index-container wallet'>
16
+        <ScrollView scrollY style={{ height: '100%' }}>
17
+          <WalletCard onClick={goWithdrawal} />
18
+          <ListTitle value='零钱明细' />
19
+          {/* <View className='listTitle'>
20
+            <View className='verticalLine' />
21
+            零钱明细
22
+          </View> */}
23
+          <View className='dayClass'>2022-03-10</View>
24
+          <View className='walletCell'>
25
+            <View className='content'>
26
+              <View>提现</View>
27
+              <View className='withDrawalDetail'>申请提现,建设银行5321532154646465
28
+                4135456465465</View>
29
+            </View>
30
+            <View className='money'>-9000元</View>
31
+          </View>
32
+          <View className='walletCell'>
33
+            <View className='content'>
34
+              <View>提现</View>
35
+              <View className='withDrawalDetail'>申请提现,建设银行5321532154646465
36
+                4135456465465</View>
37
+            </View>
38
+            <View className='money'>-9元</View>
39
+          </View>
40
+
41
+          <View className='dayClass'>2022-03-10</View>
42
+          <View className='walletCell'>
43
+            <View className='content'>
44
+              <View>收入</View>
45
+              <View className='withDrawalDetail'>取消订单-退回未使用金额</View>
46
+            </View>
47
+            <View className='money revenue'>+200元</View>
48
+          </View>
49
+          <View className='walletCell'>
50
+            <View className='content'>
51
+              <View>提现</View>
52
+              <View className='withDrawalDetail'>申请提现,建设银行5321532154646465
53
+                4135456465465</View>
54
+            </View>
55
+            <View className='money'>-90元</View>
56
+          </View>
57
+        </ScrollView>
58
+      </View>
59
+    </View>
60
+  )
61
+})

+ 60
- 0
src/pages/wallet/style.less View File

@@ -0,0 +1,60 @@
1
+.wallet{
2
+  margin: 30px;
3
+  font-weight: bold;
4
+  // .listTitle{
5
+  //   display: flex;
6
+  //   align-items: center;
7
+  //   font-size: 34px;
8
+  //   color: #333;
9
+  //   margin: 60px 0 10px;
10
+  //   .verticalLine{
11
+  //     width: 8px;
12
+  //     height: 32px;
13
+  //     background: #000;
14
+  //     margin-right: 23px;
15
+  //   }
16
+  // }
17
+  .dayClass{
18
+    height: 68px;
19
+    background: #F8F8F8;
20
+    font-size: 30px;
21
+    color: #333333;
22
+    line-height: 68px;
23
+    margin-top: 30px;
24
+    padding-left: 20px;
25
+  }
26
+  .walletCell{
27
+    background: #FFF;
28
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.12);
29
+    font-weight: bold;
30
+    display: flex;
31
+    align-items: center;
32
+    padding: 30px 20px;
33
+    margin-bottom: 1px;
34
+    .content{
35
+      width: 63vw;
36
+      font-size: 32px;
37
+      line-height: 32px;
38
+      color: #333;
39
+      .withDrawalDetail{
40
+        margin-top: 26px;
41
+        font-style: 30px;
42
+        color: #666;
43
+        font-weight:400;
44
+        overflow: hidden;
45
+        text-overflow:ellipsis;
46
+        white-space: nowrap;
47
+      }
48
+    }
49
+    .money{
50
+      font-size: 40px;
51
+      color: #FF3F3F;
52
+      position: absolute;
53
+      right: 30px;
54
+    }
55
+    .revenue{
56
+      font-size: 30px;
57
+      color: #00AE3A;
58
+    }
59
+  }
60
+}

+ 4
- 0
src/routes.js View File

@@ -26,6 +26,10 @@ const mainPages = [
26 26
     title: '查看详情',
27 27
     page: 'pages/machineryDetail/index',
28 28
   },
29
+  {
30
+    title: '我的钱包',
31
+    page: 'pages/wallet/index',
32
+  },
29 33
   
30 34
 ];
31 35