viczhq il y a 3 semaines
Parent
commit
913e8334ce
34 fichiers modifiés avec 1533 ajouts et 93 suppressions
  1. 3 3
      project.private.config.json
  2. 6 2
      src/app.config.js
  3. 1 1
      src/components/ProductCard/index.jsx
  4. 6 4
      src/components/ProductCard/index.less
  5. 97 53
      src/components/index/ProductList/index.jsx
  6. 58 26
      src/components/index/ProductList/index.less
  7. BIN
      src/images/earningsOrder/tag.png
  8. BIN
      src/images/earningsOrder/vip.png
  9. BIN
      src/images/productManagement/add.png
  10. BIN
      src/images/productManagement/back.png
  11. BIN
      src/images/productManagement/delete.png
  12. BIN
      src/images/productManagement/manger.png
  13. BIN
      src/images/productManagement/selectIcon.png
  14. BIN
      src/images/productManagement/toTop.png
  15. BIN
      src/images/storeManagement/storeManagement.png
  16. BIN
      src/images/storeManagement/storeManagementIcon.png
  17. 3 0
      src/pages/earningsDetail/index.config.js
  18. 65 0
      src/pages/earningsDetail/index.jsx
  19. 61 0
      src/pages/earningsDetail/index.less
  20. 3 0
      src/pages/earningsOrder/index.config.js
  21. 159 0
      src/pages/earningsOrder/index.jsx
  22. 241 0
      src/pages/earningsOrder/index.less
  23. 1 0
      src/pages/index/index.less
  24. 33 4
      src/pages/member/index.jsx
  25. 67 0
      src/pages/member/index.less
  26. 3 0
      src/pages/productClassify/index.config.js
  27. 46 0
      src/pages/productClassify/index.jsx
  28. 37 0
      src/pages/productClassify/index.less
  29. 3 0
      src/pages/productManagement/index.config.js
  30. 141 0
      src/pages/productManagement/index.jsx
  31. 197 0
      src/pages/productManagement/index.less
  32. 3 0
      src/pages/storeManagement/index.config.js
  33. 115 0
      src/pages/storeManagement/index.jsx
  34. 184 0
      src/pages/storeManagement/index.less

+ 3 - 3
project.private.config.json

@@ -9,9 +9,9 @@
9 9
     "miniprogram": {
10 10
       "list": [
11 11
         {
12
-          "name": "pages/seckillSub/seckillIndex/index",
13
-          "pathName": "pages/productDetail/index",
14
-          "query": "id=1",
12
+          "name": "pages/productManagement/index",
13
+          "pathName": "pages/earningsOrder/index",
14
+          "query": "",
15 15
           "launchMode": "default",
16 16
           "scene": null
17 17
         }

+ 6 - 2
src/app.config.js

@@ -1,12 +1,16 @@
1 1
 
2
-import Taro from '@tarojs/taro'
3 2
 export default defineAppConfig({
4 3
   pages: [
5 4
     'pages/index/index',
6 5
     'pages/member/index',
7 6
     "pages/mine/index",
8 7
     "pages/seckillIndex/index",
9
-    "pages/productDetail/index"
8
+    "pages/productDetail/index",
9
+    "pages/storeManagement/index",
10
+    "pages/productManagement/index",
11
+    "pages/productClassify/index",
12
+    "pages/earningsDetail/index",
13
+    "pages/earningsOrder/index"
10 14
   ],
11 15
   subpackages: [
12 16
   ],

+ 1 - 1
src/components/ProductCard/index.jsx

@@ -4,7 +4,7 @@ import './index.less'
4 4
 const ProductCard = ({ product }) => {
5 5
   return (
6 6
     <View className='product-card'>
7
-      <Image className='product-img' src={product.imageUrl} mode='aspectFill' />
7
+      <Image className='product-img' src={product.imageUrl} mode='widthFix' />
8 8
       <View className='product-content'>
9 9
         <Text className='title'>{product.name}</Text>
10 10
         <View className='price-row'>

+ 6 - 4
src/components/ProductCard/index.less

@@ -4,15 +4,16 @@
4 4
     border-radius: 20px;
5 5
     display: flex;
6 6
     flex-wrap: wrap;
7
-    gap: 17px;
7
+    justify-content: space-between;
8 8
     .product-card {
9
-        width: 352px;
9
+        width: 332px;
10 10
         background-color: #fff;
11 11
         border-radius: 20px;
12 12
         margin-bottom: 10px;
13 13
         .product-img {
14
-            width: 352px;
15
-            height: 258px;
14
+            width: 100%;
15
+            height: 324px;
16
+            background-color: red;
16 17
         }
17 18
 
18 19
         .product-content {
@@ -40,6 +41,7 @@
40 41
                     color: #ff4d4f;
41 42
                     font-size: 36px;
42 43
                     line-height: 26px;
44
+                    margin-right: 10px;
43 45
                     .currency {
44 46
                         font-size: 22px;
45 47
                     }

+ 97 - 53
src/components/index/ProductList/index.jsx

@@ -1,49 +1,73 @@
1
+import React, { useState } from "react";
1 2
 import { View, Text, Image } from "@tarojs/components";
3
+import { AtCheckbox } from "taro-ui";
2 4
 import Taro from "@tarojs/taro";
3 5
 import "./index.less";
4
-import joinStoreBg from '../../../images/index/jionStore.png'
5
-import saveMoneyBg from '../../../images/index/save-money.png'
6
-import shareEarnBg from '../../../images/index/share-earn.png'
7
-import seckillIcon from '../../../images/seckill/seckillIcon.png'
6
+import joinStoreBg from "../../../images/index/jionStore.png";
7
+import saveMoneyBg from "../../../images/index/save-money.png";
8
+import shareEarnBg from "../../../images/index/share-earn.png";
9
+import seckillIcon from "../../../images/seckill/seckillIcon.png";
8 10
 const ProductList = (props) => {
9
-  const { isSeckill } = props;
11
+  const { isSeckill } = props; //是否是秒杀产品引用
12
+  const { isManagement } = props; //是否是管理产品引用
13
+  const { isManagementStatus } = props; //是否是管理状态引用
14
+  const [selectedProducts, setSelectedProducts] = useState([]); // 管理选中的商品列表
10 15
   // 模拟商品数据
11 16
   const products = [
12 17
     {
13 18
       id: 1,
14
-      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
19
+      image:
20
+        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
15 21
       name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
16 22
       price: 99.99,
17 23
       originalPrice: 199.99,
18 24
       saveMoney: 10,
19
-      shareEarn: 20
25
+      shareEarn: 20,
20 26
     },
21 27
     {
22
-      id: 1,
23
-      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
28
+      id: 2,
29
+      image:
30
+        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
24 31
       name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
25 32
       price: 99.99,
26 33
       originalPrice: 199.99,
27 34
       saveMoney: 10,
28
-      shareEarn: 20
35
+      shareEarn: 20,
29 36
     },
30 37
     {
31
-      id: 1,
32
-      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
38
+      id: 3,
39
+      image:
40
+        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
33 41
       name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
34 42
       price: 99.99,
35 43
       originalPrice: 199.99,
36 44
       saveMoney: 10,
37
-      shareEarn: 20
45
+      shareEarn: 20,
38 46
     },
39
-    // ... 其他商品数据
40 47
   ];
41 48
   // 跳转产品详情
42 49
   const toDetail = (id) => {
43
-    Taro.navigateTo({
44
-      url: `/pages/productDetail/index?id=${id}`
50
+    // if(isManagementStatus){
51
+    //   handleChange()
52
+    // }else{
53
+    //   Taro.navigateTo({
54
+    //     url: `/pages/productDetail/index?id=${id}`,
55
+    //   });
56
+    // }
57
+  };
58
+  // 单选
59
+  const handleChange = (productId) => {
60
+    setSelectedProducts((prevSelected) => {
61
+      const isSelected = prevSelected.includes(productId);
62
+      if (isSelected) {
63
+        // 如果已经选中,则取消选择
64
+        return prevSelected.filter((id) => id !== productId);
65
+      } else {
66
+        // 如果未选中,则添加到选中列表
67
+        return [...prevSelected, productId];
68
+      }
45 69
     });
46
-  }
70
+  };
47 71
   return (
48 72
     <View className="product-list-wrap">
49 73
       {isSeckill && (
@@ -54,43 +78,63 @@ const ProductList = (props) => {
54 78
       )}
55 79
       {products.map((product, index) => (
56 80
         <View key={product.id}>
57
-          <View onClick={() => toDetail(product.id)} className="product-item">
58
-            <Image className="product-img" src={product.image} mode="aspectFill" />
59
-            <View className="product-info">
60
-              <View className="product-name" style={{"WebkitBoxOrient": "vertical"}}>
61
-                <Text className="self-tag">{!isSeckill ? '自营' : '鱼市秒杀'}</Text>
62
-                {product.name}
63
-              </View>
64
-              <View className="price-line">
65
-                <View className="price-info">
66
-                  <Text className="symbol">¥</Text>
67
-                  <Text className="price">{product.price}</Text>
68
-                  <Text className="original-price">¥{product.originalPrice}</Text>
81
+          <View className="product-item">
82
+            {isManagement && isManagementStatus && (
83
+              <AtCheckbox
84
+                options={[{ value: product.id.toString(), label: "" }]} // 确保每个复选框的 options 是独立的
85
+                selectedList={selectedProducts.map((id) => id.toString())}
86
+                onChange={(selectedList) => handleChange(product.id)} // 传递当前 product.id
87
+              />
88
+            )}
89
+            <View className="right">
90
+              <Image
91
+                className="product-img"
92
+                src={product.image}
93
+                mode="aspectFill"
94
+              />
95
+              <View className="product-info">
96
+                <View
97
+                  className="product-name"
98
+                  style={{ WebkitBoxOrient: "vertical" }}
99
+                >
100
+                  <Text className="self-tag">
101
+                    {!isSeckill ? "自营" : "鱼市秒杀"}
102
+                  </Text>
103
+                  {product.name}
69 104
                 </View>
70
-                {!isSeckill && (
71
-                  <View className="add-btn">
72
-                    <Image 
73
-                      className="join-store-bg" 
74
-                      src={joinStoreBg}
75
-                      mode="aspectFit"
76
-                    />
77
-                    <Text className="btn-text">加入小店</Text>
78
-                  </View>
79
-                )}
80
-              </View>
81
-              <View className="profit-line">
82
-                <View className="save-money">
83
-                  <Image className="bg" src={saveMoneyBg} mode="aspectFit" />
84
-                  <View className="content">
85
-                    <Text className="label">自购省</Text>
86
-                    <Text className="money">¥{product.saveMoney}</Text>
105
+                <View className="price-line">
106
+                  <View className="price-info">
107
+                    <Text className="symbol">¥</Text>
108
+                    <Text className="price">{product.price}</Text>
109
+                    <Text className="original-price">
110
+                      ¥{product.originalPrice}
111
+                    </Text>
87 112
                   </View>
113
+                  {!isSeckill && !isManagement && (
114
+                    <View className="add-btn">
115
+                      <Image
116
+                        className="join-store-bg"
117
+                        src={joinStoreBg}
118
+                        mode="aspectFit"
119
+                      />
120
+                      <Text className="btn-text">加入小店</Text>
121
+                    </View>
122
+                  )}
88 123
                 </View>
89
-                <View className="share-earn">
90
-                  <Image className="bg" src={shareEarnBg} mode="aspectFit" />
91
-                  <View className="content">
92
-                    <Text className="label">分享赚</Text>
93
-                    <Text className="money">¥{product.shareEarn}</Text>
124
+                <View className="profit-line">
125
+                  <View className="save-money">
126
+                    <Image className="bg" src={saveMoneyBg} mode="aspectFit" />
127
+                    <View className="content">
128
+                      <Text className="label">自购省</Text>
129
+                      <Text className="money">¥{product.saveMoney}</Text>
130
+                    </View>
131
+                  </View>
132
+                  <View className="share-earn">
133
+                    <Image className="bg" src={shareEarnBg} mode="aspectFit" />
134
+                    <View className="content">
135
+                      <Text className="label">分享赚</Text>
136
+                      <Text className="money">¥{product.shareEarn}</Text>
137
+                    </View>
94 138
                   </View>
95 139
                 </View>
96 140
               </View>
@@ -104,7 +148,7 @@ const ProductList = (props) => {
104 148
 };
105 149
 
106 150
 ProductList.defaultProps = {
107
-  isSeckill: false
151
+  isSeckill: false,
108 152
 };
109 153
 
110
-export default ProductList; 
154
+export default ProductList;

+ 58 - 26
src/components/index/ProductList/index.less

@@ -3,34 +3,61 @@
3 3
   background: #FFFFFF;
4 4
   border-radius: 16px;
5 5
   position: relative;
6
-  
6
+
7 7
   .product-item {
8 8
     padding: 27px 20px 27px 17px;
9 9
     display: flex;
10
-    
10
+    align-items: center;
11
+
12
+    // 单选框内容
13
+    .at-checkbox::after,
14
+    .at-checkbox::before {
15
+      content: none;
16
+    }
17
+    .at-checkbox__option-wrap {
18
+      padding: 0 15px 0 0;
19
+    }
20
+
21
+    .at-checkbox__option {
22
+      padding: 0;
23
+    }
24
+
25
+    .at-checkbox__option--selected .at-checkbox__icon-cnt {
26
+      background-color: #f6c71a;
27
+    }
28
+
29
+    .at-checkbox__icon-cnt {
30
+      margin-right: 0;
31
+    }
32
+
33
+    .right {
34
+      display: flex;
35
+    }
36
+
11 37
     .product-img {
12 38
       width: 260px;
13 39
       height: 256px;
14 40
       margin-right: 20px;
15 41
       flex-shrink: 0;
16 42
     }
17
-    
43
+
18 44
     .product-info {
19 45
       flex: 1;
20 46
       min-width: 0; // 解决flex布局下文本溢出问题
21 47
       display: flex;
22 48
       flex-direction: column;
23 49
       justify-content: space-between;
50
+
24 51
       .product-name {
25 52
         font-size: 28px;
26
-        overflow : hidden;
53
+        overflow: hidden;
27 54
         text-overflow: ellipsis;
28 55
         display: -webkit-box;
29 56
         -webkit-line-clamp: 2;
30 57
         /* autoprefixer: ignore next */
31 58
         -webkit-box-orient: vertical;
32
-        
33
-        
59
+
60
+
34 61
         .self-tag {
35 62
           display: inline-block;
36 63
           padding: 2px 8px;
@@ -43,40 +70,40 @@
43 70
           vertical-align: middle;
44 71
         }
45 72
       }
46
-      
73
+
47 74
       .price-line {
48 75
         display: flex;
49 76
         justify-content: space-between;
50 77
         align-items: center;
51
-        
78
+
52 79
         .price-info {
53 80
           display: flex;
54 81
           align-items: baseline;
55
-          
82
+
56 83
           .symbol {
57 84
             font-size: 22px;
58 85
             color: #FF1D17;
59 86
           }
60
-          
87
+
61 88
           .price {
62 89
             font-size: 36px;
63 90
             color: #FF1D17;
64 91
             font-weight: bold;
65 92
             margin-right: 8px;
66 93
           }
67
-          
94
+
68 95
           .original-price {
69 96
             font-size: 26px;
70 97
             color: #999999;
71 98
             text-decoration: line-through;
72 99
           }
73 100
         }
74
-        
101
+
75 102
         .add-btn {
76 103
           position: relative;
77 104
           width: 158px;
78 105
           height: 58px;
79
-          
106
+
80 107
           .join-store-bg {
81 108
             width: 100%;
82 109
             height: 100%;
@@ -84,7 +111,7 @@
84 111
             top: 0;
85 112
             left: 0;
86 113
           }
87
-          
114
+
88 115
           .btn-text {
89 116
             padding-left: 8px;
90 117
             position: absolute;
@@ -99,22 +126,25 @@
99 126
           }
100 127
         }
101 128
       }
102
-      
129
+
103 130
       .profit-line {
104 131
         display: flex;
105 132
         gap: 20px;
106
-        .save-money{
107
-            color: #F6C71A;
133
+
134
+        .save-money {
135
+          color: #F6C71A;
108 136
         }
109
-        .share-earn{
110
-            color: #fff;
137
+
138
+        .share-earn {
139
+          color: #fff;
111 140
         }
141
+
112 142
         .save-money,
113 143
         .share-earn {
114 144
           position: relative;
115 145
           width: 192px;
116 146
           height: 84px;
117
-          
147
+
118 148
           .bg {
119 149
             width: 100%;
120 150
             height: 100%;
@@ -122,7 +152,7 @@
122 152
             top: 0;
123 153
             left: 0;
124 154
           }
125
-          
155
+
126 156
           .content {
127 157
             position: relative;
128 158
             z-index: 1;
@@ -132,7 +162,7 @@
132 162
             align-items: center;
133 163
             justify-content: center;
134 164
             font-size: 28px;
135
-            
165
+
136 166
             .label,
137 167
             .money {
138 168
               line-height: 41px;
@@ -142,20 +172,22 @@
142 172
       }
143 173
     }
144 174
   }
145
-  
175
+
146 176
   .divider {
147 177
     height: 1px;
148 178
     margin: 0 17px 0 20px;
149 179
     border-top: 1px dashed #D8D8D8;
150 180
   }
151
-  .seckill-icon{
181
+
182
+  .seckill-icon {
152 183
     padding: 18px 0 0 17px;
153 184
     font-size: 26px;
154 185
     font-weight: bold;
155
-    Image{
186
+
187
+    Image {
156 188
       height: 26px;
157 189
       width: 26px;
158 190
       margin-right: 10px;
159 191
     }
160 192
   }
161
-} 
193
+}

BIN
src/images/earningsOrder/tag.png


BIN
src/images/earningsOrder/vip.png


BIN
src/images/productManagement/add.png


BIN
src/images/productManagement/back.png


BIN
src/images/productManagement/delete.png


BIN
src/images/productManagement/manger.png


BIN
src/images/productManagement/selectIcon.png


BIN
src/images/productManagement/toTop.png


BIN
src/images/storeManagement/storeManagement.png


BIN
src/images/storeManagement/storeManagementIcon.png


+ 3 - 0
src/pages/earningsDetail/index.config.js

@@ -0,0 +1,3 @@
1
+export default definePageConfig({
2
+  navigationBarTitleText: '收益详情'
3
+})

+ 65 - 0
src/pages/earningsDetail/index.jsx

@@ -0,0 +1,65 @@
1
+import { Component } from 'react'
2
+import { View, Text } from '@tarojs/components'
3
+import './index.less'
4
+
5
+export default class Index extends Component {
6
+
7
+  componentWillMount () { }
8
+
9
+  componentDidMount () { }
10
+
11
+  componentWillUnmount () { }
12
+
13
+  componentDidShow () { }
14
+
15
+  componentDidHide () { }
16
+
17
+  render () {
18
+    return (
19
+      <View className='index'>
20
+        <View className='earnings-list'>
21
+          <View className='earnings-list-item'>
22
+            <View className='item-line title-one'>
23
+              <Text className='title'>今天预估总收益</Text>
24
+              <Text className='money'>¥100.00</Text>
25
+            </View>
26
+            <View className='dotted-line'></View>
27
+            <View className='item-line title-two'>
28
+              <Text className='title'>预估推广收益</Text>
29
+              <Text className='money'>¥70.00</Text>
30
+            </View>
31
+            <View className='line'></View>
32
+            <View className='item-line title-two'>
33
+              <Text className='title'>预估推广收益</Text>
34
+              <Text className='money'>¥70.00</Text>
35
+            </View>
36
+            <View className='item-line'>
37
+              <Text className='title'>惊喜红包</Text>
38
+              <Text className='money'>¥70.00</Text>
39
+            </View>
40
+            <View className='item-line'>
41
+              <Text className='title'>惊喜红包</Text>
42
+              <Text className='money'>¥70.00</Text>
43
+            </View>
44
+            <View className='item-line'>
45
+              <Text className='title'>惊喜红包</Text>
46
+              <Text className='money'>¥70.00</Text>
47
+            </View>
48
+            <View className='item-line'>
49
+              <Text className='title'>惊喜红包</Text>
50
+              <Text className='money'>¥70.00</Text>
51
+            </View>
52
+            <View className='item-line'>
53
+              <Text className='title'>惊喜红包</Text>
54
+              <Text className='money'>¥70.00</Text>
55
+            </View>
56
+            <View className='item-line'>
57
+              <Text className='title'>惊喜红包</Text>
58
+              <Text className='money'>¥70.00</Text>
59
+            </View>
60
+          </View>
61
+        </View>
62
+      </View>
63
+    )
64
+  }
65
+}

+ 61 - 0
src/pages/earningsDetail/index.less

@@ -0,0 +1,61 @@
1
+.index {
2
+    background-color: #f9f9f9;
3
+    padding: 20px 16px;
4
+    box-sizing: border-box;
5
+    min-height: 100vh;
6
+
7
+    .earnings-list {
8
+        .dotted-line{
9
+            width: 100%;
10
+            border: 1px dashed #D8D8D8;
11
+            margin: 6px 0 30px 0;
12
+        }
13
+        .line {
14
+            width: 100%;
15
+            border: 1px solid #D8D8D8;
16
+            margin: 9px 0 30px 0;
17
+        }
18
+        .earnings-list-item {
19
+            padding: 30px 17px 7px 17px;
20
+            box-sizing: border-box;
21
+            background-color: #fff;
22
+            border-radius: 20px;
23
+
24
+            .item-line {
25
+                display: flex;
26
+                justify-content: space-between;
27
+                align-items: center;
28
+                font-size: 26px;
29
+                color: #BDBDBD;
30
+                margin-bottom: 20px;
31
+
32
+            }
33
+
34
+            .title-one {
35
+                .title {
36
+                    color: #000000;
37
+                    line-height: 43px;
38
+                    font-size: 30px;
39
+                }
40
+
41
+                .money {
42
+                    color: #FF1D17;
43
+                    font-size: 30px;
44
+                }
45
+            }
46
+
47
+            .title-two {
48
+                .title {
49
+                    color: #A19D99;
50
+                    font-size: 28px;
51
+                    line-height: 41px;
52
+                }
53
+
54
+                .money {
55
+                    color: #A19D99;
56
+                    font-size: 28px;
57
+                }
58
+            }
59
+        }
60
+    }
61
+}

+ 3 - 0
src/pages/earningsOrder/index.config.js

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

+ 159 - 0
src/pages/earningsOrder/index.jsx

@@ -0,0 +1,159 @@
1
+import { Component } from "react";
2
+import { View, Text, Image, Picker } from "@tarojs/components";
3
+import { AtDivider } from "taro-ui";
4
+import "./index.less";
5
+import selectIcon from "../../images/productManagement/selectIcon.png";
6
+import vip from "../../images/earningsOrder/vip.png";
7
+import Taro from "@tarojs/taro";
8
+
9
+export default class Index extends Component {
10
+  state = {
11
+    current: 0,
12
+    productOptions: ["全部", "咸鱼商品", "自建商品"], //商品下拉选项
13
+    selectedProduct: "全部", //商品默认名称
14
+    timeOptions: ["全部时间", "一个月前", "一周前"], //下单时间下拉选项
15
+    selectTime: "下单时间", //下单时间
16
+    tabList: [
17
+      { title: "全部", num: 0 },
18
+      { title: "已付款", num: 0 },
19
+      { title: "已完成", num: 2 },
20
+      { title: "已结算", num: 10 },
21
+      { title: "无效", num: 0 },
22
+    ],
23
+  };
24
+
25
+  handleTabClick = (index) => {
26
+    this.setState({ current: index });
27
+  };
28
+  // 下单时间下拉选项
29
+  timeSelectOption = (e) => {
30
+    const selectTime = this.state.timeOptions[e.detail.value];
31
+    this.setState({ selectTime });
32
+  };
33
+  // 商品下拉选项
34
+  productSelectOption = (e) => {
35
+    const selectedProduct = this.state.productOptions[e.detail.value];
36
+    this.setState({ selectedProduct });
37
+  };
38
+  handleCopy = async (text) => {
39
+    try {
40
+      await Taro.setClipboardData({
41
+        data: text,
42
+      });
43
+      Taro.showToast({
44
+        title: "内容已复制",
45
+        icon: "success",
46
+        duration: 2000,
47
+      });
48
+    } catch (error) {
49
+      Taro.showToast({
50
+        title: "复制失败",
51
+        icon: "error",
52
+        duration: 2000,
53
+      });
54
+    }
55
+  };
56
+
57
+  render() {
58
+    const { current, tabList } = this.state;
59
+    return (
60
+      <View className="index">
61
+        {/* tab切换 */}
62
+        <View className="tab-container">
63
+          {tabList.map((tab, index) => (
64
+            <View
65
+              key={index}
66
+              className={`tab-item ${current === index ? "active" : ""}`}
67
+              onClick={() => this.handleTabClick(index)}
68
+            >
69
+              <Text>{tab.title}</Text>
70
+              {tab.num > 0 && <Text className="tag">{tab.num}</Text>}
71
+            </View>
72
+          ))}
73
+        </View>
74
+        {/* 下拉筛选 */}
75
+        <View className="filter-container">
76
+          <Picker
77
+            mode="selector"
78
+            range={this.state.timeOptions}
79
+            onChange={this.timeSelectOption}
80
+          >
81
+            <View className="filter-item">
82
+              <Text>{this.state.selectTime}</Text>
83
+              <Image src={selectIcon} className="select-icon" />
84
+            </View>
85
+          </Picker>
86
+          <Picker
87
+            mode="selector"
88
+            range={this.state.productOptions}
89
+            onChange={this.productSelectOption}
90
+          >
91
+            <View className="filter-item">
92
+              <Text>{this.state.selectedProduct}</Text>
93
+              <Image src={selectIcon} className="select-icon" />
94
+            </View>
95
+          </Picker>
96
+        </View>
97
+        {/* 订单列表 */}
98
+        <View className="order-list">
99
+          <View className="order-item">
100
+            {/* 头部信息 */}
101
+            <View className="order-header">
102
+              <View className="user-info">
103
+                <Image className="avatar" src="" />
104
+                <Text className="username">张三</Text>
105
+              </View>
106
+              <Text className="pay-status">已付款</Text>
107
+            </View>
108
+            <AtDivider content="" />
109
+            {/* 订单信息 */}
110
+            <View className="order-info">
111
+              <View className="order-details">
112
+                <View className="detail-item">
113
+                  <Text className="label">订单编号:</Text>
114
+                  <Text className="value">2024031512345</Text>
115
+                  <Text
116
+                    className="copy-text"
117
+                    onClick={() => this.handleCopy("2024031512345")}
118
+                  >
119
+                    复制
120
+                  </Text>
121
+                </View>
122
+                <View className="detail-item">
123
+                  <Text className="label">下单时间:</Text>
124
+                  <Text className="value">2024-03-15 12:34:56</Text>
125
+                </View>
126
+                <View className="detail-item">
127
+                  <Text className="label">订单类型:</Text>
128
+                  <Text className="value">普通订单</Text>
129
+                </View>
130
+              </View>
131
+              <View className="member-info">
132
+                <Image className="member-icon" src={vip} />
133
+                <Text className="member-text">闲鱼会员</Text>
134
+              </View>
135
+            </View>
136
+
137
+            {/* 产品信息 */}
138
+            <View className="product-info">
139
+              <Image className="product-image" src="" />
140
+              <View className="product-details">
141
+                <Text className="product-name">
142
+                  这是一个很长的产品名称这是一个很长的产品名称这是一个很长的产品名称
143
+                </Text>
144
+                <View className="promotion-info">
145
+                  <View className="tag">推广收入</View>
146
+                  <Text className="amount">¥99.99</Text>
147
+                </View>
148
+                <View className="payment-info">
149
+                  <Text className="label">实付金额:</Text>
150
+                  <Text className="amount">¥199.99</Text>
151
+                </View>
152
+              </View>
153
+            </View>
154
+          </View>
155
+        </View>
156
+      </View>
157
+    );
158
+  }
159
+}

+ 241 - 0
src/pages/earningsOrder/index.less

@@ -0,0 +1,241 @@
1
+.index {
2
+    background-color: #f9f9f9; // ... 其他样式 ...
3
+    min-height: 100vh;
4
+}
5
+
6
+// tab切换
7
+.tab-container {
8
+    display: flex;
9
+    justify-content: space-between;
10
+    background-color: #fff;
11
+    padding: 22px 34px;
12
+    box-sizing: border-box;
13
+
14
+    .tab-item {
15
+        font-size: 26px;
16
+        color: #000000;
17
+
18
+        .tag {
19
+            margin-left: 4px;
20
+            font-size: 26px;
21
+            color: #fff;
22
+            background-color: #f6c71a;
23
+            border-radius: 20px;
24
+            padding: 2px 20px;
25
+            font-weight: normal;
26
+        }
27
+    }
28
+
29
+    .tab-item.active {
30
+        color: #F6C71A;
31
+        /* 高亮颜色 */
32
+        font-size: 28px;
33
+        font-weight: bold;
34
+    }
35
+}
36
+
37
+// 下拉筛选
38
+.filter-container {
39
+    border-top: 1px solid #F4F4F4;
40
+    background-color: #fff;
41
+    height: 70px;
42
+    padding: 0 134px;
43
+    display: flex;
44
+    align-items: center;
45
+    justify-content: space-between;
46
+
47
+    .filter-item {
48
+        display: flex;
49
+        align-items: center;
50
+        font-size: 26px;
51
+        color: #000000;
52
+
53
+        .select-icon {
54
+            width: 14px;
55
+            height: 14px;
56
+            margin-left: 4px;
57
+        }
58
+    }
59
+}
60
+
61
+// 订单列表样式
62
+.order-list {
63
+    padding: 24px;
64
+
65
+    .at-divider {
66
+        height: 0;
67
+        margin-bottom: 18px;
68
+    }
69
+
70
+    .order-item {
71
+        background: #FFFFFF;
72
+        border-radius: 20px;
73
+        padding: 0 18px 34px 18px;
74
+        margin-bottom: 24px;
75
+        box-sizing: border-box;
76
+
77
+        .order-header {
78
+            display: flex;
79
+            justify-content: space-between;
80
+            align-items: center;
81
+            height: 98px;
82
+
83
+            .user-info {
84
+                display: flex;
85
+                align-items: center;
86
+
87
+                .avatar {
88
+                    width: 58px;
89
+                    height: 58px;
90
+                    background-color: red;
91
+                    border-radius: 50%;
92
+                    margin-right: 10px;
93
+                }
94
+
95
+                .username {
96
+                    font-size: 26px;
97
+                    color: #000000;
98
+                }
99
+            }
100
+
101
+            .pay-status {
102
+                color: #FB8E36;
103
+                font-size: 26px;
104
+            }
105
+        }
106
+
107
+        .order-info {
108
+            display: flex;
109
+            justify-content: space-between;
110
+            padding-bottom: 24px;
111
+
112
+            .order-details {
113
+                .detail-item {
114
+                    display: flex;
115
+                    align-items: center;
116
+                    margin-bottom: 8px;
117
+
118
+                    .label {
119
+                        color: #999;
120
+                        font-size: 22px;
121
+                        margin-right: 12px;
122
+                        line-height: 32px;
123
+                    }
124
+
125
+                    .value {
126
+                        color: #999;
127
+                        font-size: 22px;
128
+                        line-height: 32px;
129
+                    }
130
+
131
+                    .copy-text {
132
+                        color: #F6C71A;
133
+                        font-size: 22px;
134
+                        margin-left: 30px;
135
+                        line-height: 32px;
136
+                    }
137
+                }
138
+            }
139
+
140
+            .member-info {
141
+                display: flex;
142
+                flex-direction: column;
143
+                justify-content: flex-start;
144
+                align-items: center;
145
+
146
+                .member-icon {
147
+                    width: 58px;
148
+                    height: 49px;
149
+                }
150
+
151
+                .member-text {
152
+                    font-size: 18px;
153
+                    color: #E7BE78;
154
+                    line-height: 26px;
155
+                    margin-top: 4px;
156
+                }
157
+            }
158
+        }
159
+
160
+        .product-info {
161
+            display: flex;
162
+            padding-top: 20px;
163
+            height: 168px;
164
+
165
+            .product-image {
166
+                width: 297px;
167
+                height: 168px;
168
+                background-color: red;
169
+                border-radius: 8px;
170
+                margin-right: 16px;
171
+            }
172
+
173
+            .product-details {
174
+                flex: 1;
175
+                height: 100%;
176
+                display: flex;
177
+                flex-direction: column;
178
+                justify-content: space-between;
179
+
180
+                .product-name {
181
+                    font-size: 28px;
182
+                    color: #000000;
183
+                    line-height: 41px;
184
+                    overflow: hidden;
185
+                    text-overflow: ellipsis;
186
+                    display: -webkit-box;
187
+                    -webkit-line-clamp: 2;
188
+                    -webkit-box-orient: vertical;
189
+                    margin-bottom: 16px;
190
+                }
191
+
192
+                .promotion-info {
193
+                    display: flex;
194
+                    align-items: center;
195
+                    justify-content: center;
196
+                    margin-bottom: 16px;
197
+                    height: 30px;
198
+                    width: fit-content;
199
+                    border-radius: 10px;
200
+
201
+                    .tag {
202
+                        color: #F6C71A;
203
+                        font-size: 18px;
204
+                        z-index: 1;
205
+                        background-color: #fff;
206
+                        padding: 2px 6px;
207
+                        box-sizing: border-box;
208
+                        border: 1px solid #F6C71A;
209
+                    }
210
+
211
+                    .amount {
212
+                        color: #fff;
213
+                        font-size: 18px;
214
+                        z-index: 1;
215
+                        background-color: #f6c71a;
216
+                        padding: 2px 4px;
217
+                        box-sizing: border-box;
218
+                        border: 1px solid #F6C71A;
219
+                    }
220
+                }
221
+
222
+                .payment-info {
223
+                    display: flex;
224
+                    align-items: center;
225
+                    font-weight: 500;
226
+
227
+                    .label {
228
+                        color: #000000;
229
+                        font-size: 22px;
230
+                        margin-right: 10px;
231
+                    }
232
+
233
+                    .amount {
234
+                        color: #000000;
235
+                        font-size: 22px;
236
+                    }
237
+                }
238
+            }
239
+        }
240
+    }
241
+}

+ 1 - 0
src/pages/index/index.less

@@ -58,6 +58,7 @@
58 58
       .at-tabs__header {
59 59
         background-color: transparent;
60 60
         height: 100%;
61
+        text-align: left;
61 62
       }
62 63
 
63 64
       .at-tabs__item {

+ 33 - 4
src/pages/member/index.jsx

@@ -1,5 +1,7 @@
1 1
 import { Component } from "react";
2 2
 import { View, Text, Image } from "@tarojs/components";
3
+import { AtIcon } from "taro-ui";
4
+import Taro from "@tarojs/taro";
3 5
 import "./index.less";
4 6
 import vip from "../../images/member/vip.png";
5 7
 import home from "../../images/nav/home.png";
@@ -36,7 +38,7 @@ export default class Index extends Component {
36 38
               </View>
37 39
             </View>
38 40
             {/* 我的小店 */}
39
-            <View className="my-shop">
41
+            <View onClick={() => Taro.navigateTo({ url: `/pages/storeManagement/index?isManager=${true}` })} className="my-shop">
40 42
               <Image className="my-shop-icon" src={home} />
41 43
               <Text className="my-shop-text">我的小店</Text>
42 44
             </View>
@@ -46,16 +48,16 @@ export default class Index extends Component {
46 48
             <Text className="estimated-income-title">预估收益</Text>
47 49
             <View className="estimated-income-content">
48 50
               <View className="income-item">
49
-                <Text className="amount">¥0.00</Text>
51
+                <Text className="amount">0.00</Text>
50 52
                 <Text className="label">今日预估收益</Text>
51 53
               </View>
52 54
               <View className="divider"></View>
53 55
               <View className="income-item">
54
-                <Text className="amount">¥0.00</Text>
56
+                <Text className="amount">0.00</Text>
55 57
                 <Text className="label">累计收益</Text>
56 58
               </View>
57 59
             </View>
58
-            <view className="estimated-income-detail">
60
+            <view onClick={() => Taro.navigateTo({ url: `/pages/earningsDetail/index` })} className="estimated-income-detail">
59 61
               收益详情
60 62
               <Image className="to-detail" src={toDetail} />
61 63
             </view>
@@ -77,6 +79,33 @@ export default class Index extends Component {
77 79
               <View className="right">点击提现</View>
78 80
             </View>
79 81
           </View>
82
+          {/* 今日订单 */}
83
+          <View className="today-order">
84
+            <View className="today-order-header">
85
+              <View className="today-order-header-left">
86
+                <Image className="today-order-icon" src={order} />
87
+                <Text className="today-order-title">今日订单</Text>
88
+              </View>
89
+              <View className="today-order-header-right">
90
+                历史订单
91
+                <AtIcon value='chevron-right' size='10' color='#A1A1A1'></AtIcon>
92
+              </View>
93
+            </View>
94
+            <View className="today-order-content">
95
+              <View className="order-item">
96
+                <Text className="label">订单总量</Text>
97
+                <Text className="amount">0</Text>
98
+              </View>
99
+              <View className="order-item">
100
+                <Text className="label">推广订单</Text>
101
+                <Text className="amount">0</Text>
102
+              </View>
103
+              <View className="order-item">
104
+                <Text className="label">购买历史</Text>
105
+                <Text className="amount">0</Text>
106
+              </View>
107
+            </View>
108
+          </View>
80 109
         </View>
81 110
       </View>
82 111
     );

+ 67 - 0
src/pages/member/index.less

@@ -248,4 +248,71 @@
248 248
             }
249 249
         }
250 250
     }
251
+
252
+    // 今日订单
253
+    .today-order {
254
+        margin-top: 20px;
255
+        .today-order-header {
256
+            display: flex;
257
+            align-items: center;
258
+            justify-content: space-between;
259
+            margin-bottom: 12px;
260
+            .today-order-header-left{
261
+                display: flex;
262
+                align-items: center;
263
+                .today-order-icon {
264
+                    width: 36px;
265
+                    height: 36px;
266
+                }
267
+    
268
+                .today-order-title {
269
+                    font-size: 28px;
270
+                    color: #000000;
271
+                    line-height: 40px;
272
+                    font-weight: 700;
273
+                    margin-left: 10px;
274
+                }
275
+            }
276
+            .today-order-header-right{
277
+                font-size: 22px;
278
+                color: #A1A1A1;
279
+                line-height: 40px;
280
+                margin-right: 10px;
281
+                display: flex;
282
+                align-items: center;
283
+            }
284
+        }
285
+        .today-order-content {
286
+            width: 100%;
287
+            height: 142px;
288
+            border-radius: 20px;
289
+            background-color: #fff;
290
+            padding: 0 20px;
291
+            box-sizing: border-box;
292
+            display: flex;
293
+            justify-content: space-between;
294
+            align-items: center;
295
+
296
+            .order-item {
297
+                flex: 1;
298
+                display: flex;
299
+                flex-direction: column;
300
+                align-items: center;
301
+                justify-content: space-between;
302
+
303
+                .label {
304
+                    font-size: 24px;
305
+                    color: #A1A1A1;
306
+                    line-height: 40px;
307
+                }
308
+
309
+                .amount {
310
+                    font-size: 28px;
311
+                    font-weight: 700;
312
+                    color: #000000;
313
+                    line-height: 40px;
314
+                }
315
+            }
316
+        }
317
+    }
251 318
 }

+ 3 - 0
src/pages/productClassify/index.config.js

@@ -0,0 +1,3 @@
1
+export default definePageConfig({
2
+  navigationBarTitleText: '商品分类'
3
+})

+ 46 - 0
src/pages/productClassify/index.jsx

@@ -0,0 +1,46 @@
1
+import { Component } from "react";
2
+import { View, Text } from "@tarojs/components";
3
+import { AtTabs, AtTabsPane } from "taro-ui";
4
+import "./index.less";
5
+import Taro from "@tarojs/taro";
6
+import ProductList from '../../components/index/ProductList'
7
+
8
+export default class Index extends Component {
9
+  state = {
10
+    current: 0, // 当前选中的标签页索引
11
+    tabList: [
12
+      { title: "全部商品" },
13
+      { title: "选项2" },
14
+      { title: "选项3" },
15
+      { title: "选项4" },
16
+    ], // 标签页列表
17
+  };
18
+  handleClick(value) {
19
+    this.setState({
20
+      current: value,
21
+    });
22
+  }
23
+  render() {
24
+    return (
25
+      <View className="index">
26
+        <AtTabs
27
+          current={this.state.current}
28
+          tabList={this.state.tabList}
29
+          onClick={this.handleClick.bind(this)}
30
+        >
31
+          {this.state.tabList.map((tab, index) => (
32
+            <AtTabsPane current={this.state.current} index={index} key={index}>
33
+              <View className="tab-content">
34
+                <ProductList />
35
+              </View>
36
+            </AtTabsPane>
37
+          ))}
38
+        </AtTabs>
39
+        {/* 底部按钮 */}
40
+        <View onClick={() => Taro.navigateBack()} className="bottom-button">
41
+          返回店铺首页
42
+        </View>
43
+      </View>
44
+    );
45
+  }
46
+}

+ 37 - 0
src/pages/productClassify/index.less

@@ -0,0 +1,37 @@
1
+.index {
2
+    min-height: 100vh;
3
+    background-color: #f9f9f9;
4
+    padding-bottom: 100px;
5
+    padding-top: 80px;
6
+    .at-tabs__header{
7
+        position: fixed;
8
+        top: 0;
9
+        width: 100%;
10
+        z-index: 1;
11
+    }
12
+    .at-tabs__item {
13
+        color: #787878;
14
+    }
15
+
16
+    .at-tabs__item--active {
17
+        color: #000000 !important;
18
+    }
19
+
20
+    .at-tabs__item-underline {
21
+        background-color: #f3e801;
22
+    }
23
+
24
+    .bottom-button {
25
+        width: 100%;
26
+        height: 88px;
27
+        background-color: #F6C71A;
28
+        font-weight: 700;
29
+        font-size: 28px;
30
+        color: #3D3D3D;
31
+        display: flex;
32
+        align-items: center;
33
+        justify-content: center;
34
+        position: fixed;
35
+        bottom: 0;
36
+    }
37
+}

+ 3 - 0
src/pages/productManagement/index.config.js

@@ -0,0 +1,3 @@
1
+export default definePageConfig({
2
+  navigationBarTitleText: '商品管理'
3
+})

+ 141 - 0
src/pages/productManagement/index.jsx

@@ -0,0 +1,141 @@
1
+import { Component } from "react";
2
+import { View, Picker, Image, Text } from "@tarojs/components";
3
+import { AtTabs, AtTabsPane, AtCheckbox } from "taro-ui";
4
+import Taro from "@tarojs/taro";
5
+import "./index.less";
6
+import ProductList from "../../components/index/ProductList"; //商品列表
7
+import add from "../../images/productManagement/add.png";
8
+import back from "../../images/productManagement/back.png";
9
+import manger from "../../images/productManagement/manger.png";
10
+import selectIcon from "../../images/productManagement/selectIcon.png";
11
+import deleteIcon from "../../images/productManagement/delete.png";
12
+import toTop from "../../images/productManagement/toTop.png";
13
+export default class Index extends Component {
14
+  state = {
15
+    isManagementStatus: false, //是否是管理状态
16
+    current: 0, //tabs坐标
17
+    selectedOption: "全部商品", //商品默认名称
18
+    tabList: [{ title: "在售中 (20)" }], //tabs标题
19
+    options: ["全部商品", "选项2", "选项3"], //商品下拉选项
20
+    checkedList: ["all"], //全选
21
+    checkboxOption: [
22
+      {
23
+        value: "allValue",
24
+        label: "全选",
25
+      },
26
+    ], //全选
27
+  };
28
+  // tabs切换
29
+  handleClick(value) {
30
+    this.setState({
31
+      current: value,
32
+    });
33
+  }
34
+  // 商品下拉选项
35
+  handleSelectOption = (e) => {
36
+    const selectedOption = this.state.options[e.detail.value];
37
+    this.setState({ selectedOption });
38
+  };
39
+  // 切换管理状态
40
+  changeManagement = (type) => {
41
+    if(type === 'management'){
42
+      this.setState({
43
+        isManagementStatus: true,
44
+      });
45
+    }else{
46
+      this.setState({
47
+        isManagementStatus: false,
48
+      });
49
+    }
50
+  };
51
+  // 全选
52
+  handleChange(value) {
53
+    this.setState({
54
+      checkedList: value,
55
+    });
56
+  }
57
+  render() {
58
+    return (
59
+      <View className="index">
60
+        {/* tab分类 */}
61
+        <View className="tabs-list">
62
+          <AtTabs
63
+            tabList={this.state.tabList}
64
+            current={this.state.current}
65
+            scroll
66
+          >
67
+            <AtTabsPane current={this.state.current} index={0}>
68
+              {/* 内容 */}
69
+              <View className="tabs-content">
70
+                {/* 商品下拉分类 */}
71
+                <View className="product-category">
72
+                  <Picker
73
+                    mode="selector"
74
+                    range={this.state.options}
75
+                    onChange={this.handleSelectOption}
76
+                  >
77
+                    <View className="product-category-left">
78
+                      {this.state.selectedOption}
79
+                      <Image
80
+                        className="selectIcon"
81
+                        src={selectIcon}
82
+                        mode="aspectFit"
83
+                      />
84
+                    </View>
85
+                  </Picker>
86
+                  <View className="product-category-right">
87
+                    前6款商品将推荐给直属会员
88
+                  </View>
89
+                </View>
90
+                {/* 商品列表 */}
91
+                <ProductList isManagement={true} isManagementStatus={this.state.isManagementStatus}/>
92
+              </View>
93
+            </AtTabsPane>
94
+          </AtTabs>
95
+        </View>
96
+        {/* 底部购买模块 */}
97
+        {!this.state.isManagementStatus ? (
98
+          <View className="bottom-buy">
99
+            <View onClick={() => Taro.navigateBack()} className="bottom-buy-left">
100
+              <Image  src={back} mode="aspectFit" />
101
+              <Text className="bottom-buy-text">返回店铺</Text>
102
+            </View>
103
+            <View className="bottom-buy-right">
104
+              <View onClick={() => this.changeManagement('management')} className="bottom-buy-right-self">
105
+                <Image src={manger} mode="aspectFit" />
106
+                <Text className="bottom-buy-text">批量管理</Text>
107
+              </View>
108
+              <View onClick={() => Taro.navigateTo({ url: '/pages/productClassify/index' })} className="bottom-buy-right-share">
109
+                <Image src={add} mode="aspectFit" />
110
+                <Text className="bottom-buy-text">添加商品</Text>
111
+              </View>
112
+            </View>
113
+          </View>
114
+        ) : (
115
+          <View className="operation-product">
116
+            <View className="operation-product-top">
117
+              <View className="left">
118
+                <AtCheckbox
119
+                  options={this.state.checkboxOption}
120
+                  selectedList={this.state.checkedList}
121
+                  onChange={this.handleChange.bind(this)}
122
+                />
123
+              </View>
124
+              <View className="right">
125
+                <View className="item">
126
+                  <Image src={toTop} mode="aspectFit" />
127
+                  <Text>移至顶部</Text>
128
+                </View>
129
+                <View className="item">
130
+                  <Image src={deleteIcon} mode="aspectFit" />
131
+                  <Text>删除</Text>
132
+                </View>
133
+              </View>
134
+            </View>
135
+            <View onClick={() => this.changeManagement('finish')} className="operation-product-bottom">完成</View>
136
+          </View>
137
+        )}
138
+      </View>
139
+    );
140
+  }
141
+}

+ 197 - 0
src/pages/productManagement/index.less

@@ -0,0 +1,197 @@
1
+.index {
2
+    background-color: #f9f9f9;
3
+    min-height: 100vh;
4
+    .tabs-list {
5
+        box-sizing: border-box;
6
+        box-sizing: border-box;
7
+        background-color: #fff;
8
+        .at-tabs__header {
9
+            background-color: transparent;
10
+            height: 57px;
11
+            text-align: left;
12
+        padding-left: 22px;
13
+
14
+        }
15
+  
16
+        .at-tabs__item {
17
+          color: #000;
18
+          font-size: 26px;
19
+          padding: 0;
20
+          margin-right: 34px;
21
+          height: 100%;
22
+          &--active {
23
+            color: #F6C71A;
24
+            font-size: 28px;
25
+          }
26
+        }
27
+  
28
+        .at-tabs__item-underline {
29
+          background-color: #F6C71A;
30
+          height: 4px;
31
+          border-radius: 2px;
32
+          bottom: 0;
33
+          width: 80px;
34
+          left: 50%;
35
+          transform: translateX(-50%);
36
+        }
37
+        .at-tabs__underline {
38
+            display: none;
39
+        }
40
+        .tabs-content{
41
+            width: 100%;
42
+            border-radius: 0 0 20px 20px;
43
+            .product-category{
44
+                height: 74px;
45
+                width: 100%;
46
+                padding: 0 16px 0 37px;
47
+                box-sizing: border-box;
48
+                display: flex;
49
+                align-items: center;
50
+                justify-content: space-between;
51
+                background-color: #f9f9f9;
52
+                .product-category-left{
53
+                    color: #666666;
54
+                    font-size: 26px;
55
+                    line-height: 38px;
56
+                    display: flex;
57
+                    align-items: center;
58
+                    .selectIcon{
59
+                        height: 16px;
60
+                        width: 16px;
61
+                        margin-left: 8px;
62
+                    }
63
+                }
64
+                .product-category-right{
65
+                    color: #E5A17C;
66
+                    line-height: 35px;
67
+                    font-size: 24px;
68
+                }
69
+            }
70
+        }
71
+      }
72
+      // 底部购买模块
73
+      .bottom-buy {
74
+        width: 100%;
75
+        background-color: #fff;
76
+        height: 126px;
77
+        padding: 19px 22px 19px 32px;
78
+        box-sizing: border-box;
79
+        position: fixed;
80
+        bottom: 0;
81
+        display: flex;
82
+        justify-content: space-between;
83
+        align-items: center;
84
+        .bottom-buy-left {
85
+            display: flex;
86
+            align-items: center;
87
+            height: 100%;
88
+            image {
89
+                width: 38px;
90
+                height: 36px;
91
+                margin-right: 8px;
92
+            }
93
+
94
+            .bottom-buy-text {
95
+                font-size: 26px;
96
+                line-height: 38px;
97
+                color: #000000;
98
+            }
99
+        }
100
+        .bottom-buy-right {
101
+            width: 513px;
102
+            height: 100%;
103
+            display: flex;
104
+            border-radius: 60px;
105
+            overflow: hidden;
106
+            .bottom-buy-right-self,.bottom-buy-right-share{
107
+                line-height: 43px;
108
+                font-size: 30px;
109
+                width: 50%;
110
+                display: flex;
111
+                justify-content: center;
112
+                align-items: center;
113
+                image{
114
+                    margin-right: 9px;
115
+                }
116
+            }
117
+            .bottom-buy-right-self{
118
+                background-color: #fbe00f;
119
+                color: #000000;
120
+                image{
121
+                    width: 28px;
122
+                    height: 26px;
123
+                }
124
+            }
125
+            .bottom-buy-right-share{
126
+                background-color: #ff1c14;
127
+                color: #fff;
128
+                image{
129
+                    width: 28px;
130
+                    height: 28px;
131
+                }
132
+            }
133
+        }
134
+    }
135
+    // 操作按钮
136
+    .operation-product{
137
+        position: fixed;
138
+        bottom: 0;
139
+        width: 100%;
140
+        height: 176px;
141
+        background-color: #fff;
142
+        .operation-product-top{
143
+            height: 50%;
144
+            display: flex;
145
+            align-items: center;
146
+            padding: 0 63px 0 37px;
147
+            box-sizing: border-box;
148
+            justify-content: space-between;
149
+            .at-checkbox::after,.at-checkbox::before{
150
+                content: none;
151
+            }
152
+            .at-checkbox__option-wrap {
153
+                padding-top: 0;
154
+                padding-bottom: 0;
155
+              }
156
+            .at-checkbox__option{
157
+                padding: 0;
158
+            }
159
+            .at-checkbox__option--selected .at-checkbox__icon-cnt{
160
+                background-color: #f6c71a;
161
+            }
162
+            .at-checkbox__icon-cnt{
163
+                margin-right: 10px;
164
+            }
165
+            .at-checkbox__title{
166
+                color: #000000;
167
+            }
168
+            .right{
169
+                display: flex;
170
+                align-items: center;
171
+                .item{
172
+                    display: flex;
173
+                    align-items: center;
174
+                    color: #000000;
175
+                    font-size: 26px;
176
+                    margin-left: 49px;
177
+                    Image{
178
+                        width: 32px;
179
+                        height: 23px;
180
+                        margin-right: 4px;
181
+                    }
182
+                }
183
+            }
184
+        }
185
+        .operation-product-bottom{
186
+            height: 50%;
187
+            background-color: #F6C71A;
188
+            font-size: 30px;
189
+            color: #3D3D3D;
190
+            font-weight: 700;
191
+            display: flex;
192
+            align-items: center;
193
+            justify-content: center;
194
+        }
195
+    }
196
+}
197
+

+ 3 - 0
src/pages/storeManagement/index.config.js

@@ -0,0 +1,3 @@
1
+export default definePageConfig({
2
+  navigationBarTitleText: '店铺管理'
3
+})

+ 115 - 0
src/pages/storeManagement/index.jsx

@@ -0,0 +1,115 @@
1
+import { Component } from "react";
2
+import { View, Text, Image } from "@tarojs/components";
3
+import { AtIcon } from "taro-ui";
4
+import "./index.less";
5
+import storeManagement from "../../images/storeManagement/storeManagement.png";
6
+import storeManagementIcon from "../../images/storeManagement/storeManagementIcon.png";
7
+import ProductCard from "../../components/ProductCard"; //卡片模块
8
+import Taro from "@tarojs/taro";
9
+
10
+export default class Index extends Component {
11
+  state = {
12
+    isManager: true,
13
+    productList: [
14
+      {
15
+        id: 1,
16
+        name: "青岛大虾",
17
+        price: 99.9,
18
+        originalPrice: 159.9,
19
+        image: "https://example.com/img1.jpg",
20
+        sales: 1234,
21
+        tag: "热销",
22
+      },
23
+      {
24
+        id: 2,
25
+        name: "三文鱼刺身",
26
+        price: 158,
27
+        originalPrice: 198,
28
+        image: "https://example.com/img2.jpg",
29
+        sales: 856,
30
+        tag: "新品",
31
+      },
32
+      {
33
+        id: 3,
34
+        name: "帝王蟹",
35
+        price: 299,
36
+        originalPrice: 399,
37
+        image: "https://example.com/img3.jpg",
38
+        sales: 566,
39
+        tag: "限时",
40
+      },
41
+    ],
42
+  };
43
+
44
+  componentWillMount() {}
45
+
46
+  componentDidMount() {
47
+    const { router } = Taro.getCurrentInstance();
48
+    const params = router.params;
49
+    this.setState({
50
+      isManager: params.isManager,
51
+    });
52
+  }
53
+
54
+  componentWillUnmount() {}
55
+
56
+  componentDidShow() {}
57
+
58
+  componentDidHide() {}
59
+
60
+  render() {
61
+    return (
62
+      <View className="index">
63
+        {/* 头部卡片 */}
64
+        <View className="header-card">
65
+          <Image className="bg-image" src={storeManagement} mode="widthFix" />
66
+          {/* 分享店铺 */}
67
+          <View className="share-shop">
68
+            <Text>分享店铺</Text>
69
+            <AtIcon value="chevron-right" size="10" color="#fff"></AtIcon>
70
+          </View>
71
+          {/* 个人信息 */}
72
+          <View className="user-info">
73
+            <View className="avatar-wrapper">
74
+              <Image className="avatar" src="" />
75
+              <View className="change-avatar-btn">更换头像</View>
76
+            </View>
77
+            <View className="info-content">
78
+              <Text className="name">张三</Text>
79
+              <Text className="desc">这里是店铺介绍文字内容</Text>
80
+            </View>
81
+          </View>
82
+        </View>
83
+        {/* 商品列表 */}
84
+        <View className="product-list">
85
+          <View className="product-list-title">
86
+            <Text className="title">店长推荐</Text>
87
+            <Text className="icon"></Text>
88
+          </View>
89
+          <View className="product-card-list">
90
+            {this.state.productList.map((product) => (
91
+              <ProductCard key={product.id} product={product} />
92
+            ))}
93
+          </View>
94
+          {/* 底部购买模块 */}
95
+          {this.state.isManager && (
96
+            <View className="bottom-buy">
97
+              <View className="bottom-buy-left">
98
+                <Image src={storeManagementIcon} mode="aspectFit" />
99
+                <Text className="bottom-buy-text">浏览店铺</Text>
100
+              </View>
101
+              <View className="bottom-buy-right">
102
+                <View className="bottom-buy-right-self">
103
+                  <Text className="bottom-buy-text">店铺模版</Text>
104
+                </View>
105
+                <View onClick={() => Taro.navigateTo({ url:'/pages/productManagement/index' })} className="bottom-buy-right-share">
106
+                  <Text  className="bottom-buy-text">商品管理</Text>
107
+                </View>
108
+              </View>
109
+            </View>
110
+          )}
111
+        </View>
112
+      </View>
113
+    );
114
+  }
115
+}

+ 184 - 0
src/pages/storeManagement/index.less

@@ -0,0 +1,184 @@
1
+.index {
2
+    padding: 18px 16px 0 16px;
3
+    box-sizing: border-box;
4
+    background-color: #f9f9f9;
5
+    padding-bottom: 150px;
6
+    .header-card {
7
+        width: 100%;
8
+        height: 256px;
9
+        position: relative;
10
+        padding: 80px 0 0 17px;
11
+        box-sizing: border-box;
12
+
13
+        .bg-image {
14
+            width: 100%;
15
+            height: 256px;
16
+            position: absolute;
17
+            top: 0;
18
+            left: 0;
19
+        }
20
+
21
+        .user-info {
22
+            position: relative;
23
+            z-index: 1;
24
+            display: flex;
25
+            align-items: center;
26
+
27
+            .avatar-wrapper {
28
+                position: relative;
29
+                width: 116px;
30
+                height: 116px;
31
+                margin-right: 28px;
32
+
33
+                .avatar {
34
+                    width: 116px;
35
+                    height: 116px;
36
+                    border-radius: 50%;
37
+                    background-color: red;
38
+                }
39
+
40
+                .change-avatar-btn {
41
+                    position: absolute;
42
+                    bottom: -6px;
43
+                    left: 50%;
44
+                    transform: translateX(-50%);
45
+                    width: 85px;
46
+                    height: 26px;
47
+                    background: #3d3d3d;
48
+                    border-radius: 13px;
49
+                    color: #FFFFFF;
50
+                    font-size: 16px;
51
+                    display: flex;
52
+                    align-items: center;
53
+                    justify-content: center;
54
+                }
55
+            }
56
+
57
+            .info-content {
58
+                display: flex;
59
+                flex-direction: column;
60
+                color: #FFFFFF;
61
+
62
+                .name {
63
+                    font-size: 34px;
64
+                    line-height: 40px;
65
+                    margin-bottom: 14px;
66
+                }
67
+
68
+                .desc {
69
+                    font-size: 18px;
70
+                    line-height: 40px;
71
+                    opacity: 0.8;
72
+                }
73
+            }
74
+        }
75
+
76
+        .share-shop {
77
+            position: absolute;
78
+            top: 20px;
79
+            right: 20px;
80
+            z-index: 1;
81
+            display: flex;
82
+            align-items: center;
83
+            color: #FFFFFF;
84
+            font-size: 14px;
85
+            justify-content: center;
86
+            align-items: center;
87
+
88
+            Text {
89
+                font-size: 22px;
90
+                line-height: 40px;
91
+                margin-right: 7px;
92
+            }
93
+        }
94
+    }
95
+
96
+    // 产品列表
97
+    .product-list {
98
+        background-color: #fff;
99
+        border-radius: 20px;
100
+        margin-top: -20px;
101
+        padding: 30px 0;
102
+        box-sizing: border-box;
103
+        position: relative;
104
+        z-index: 1;
105
+        .product-list-title {
106
+            display: flex;
107
+            flex-direction: column;
108
+            margin-bottom: 24px;
109
+            width: 100%;
110
+            justify-content: center;
111
+            align-items: center;
112
+
113
+            .title {
114
+                color: #000000;
115
+                font-size: 28px;
116
+                font-weight: 700;
117
+                line-height: 41px;
118
+                margin-bottom: 15px;
119
+            }
120
+
121
+            .icon {
122
+                width: 76px;
123
+                height: 12px;
124
+                background: linear-gradient(180deg, #FBE00F 0%, #FFCC19 100%);
125
+                border-radius: 10px 10px 0px 0px;
126
+            }
127
+        }
128
+    }
129
+        // 底部购买模块
130
+        .bottom-buy {
131
+            width: 100%;
132
+            background-color: #fff;
133
+            height: 126px;
134
+            padding: 19px 35px 19px 44px;
135
+            box-sizing: border-box;
136
+            position: fixed;
137
+            bottom: 0;
138
+            display: flex;
139
+            justify-content: space-between;
140
+            align-items: center;
141
+            .bottom-buy-left {
142
+                display: flex;
143
+                flex-direction: column;
144
+                align-items: center;
145
+                image {
146
+                    width: 36px;
147
+                    height: 36px;
148
+                    margin-bottom: 7px;
149
+                }
150
+    
151
+                .bottom-buy-text {
152
+                    font-size: 22px;
153
+                    line-height: 32px;
154
+                    color: #000000;
155
+                }
156
+            }
157
+            .bottom-buy-right {
158
+                width: 550px;
159
+                height: 100%;
160
+                display: flex;
161
+                border-radius: 60px;
162
+                overflow: hidden;
163
+                .bottom-buy-right-self,.bottom-buy-right-share{
164
+                    line-height: 43px;
165
+                    font-size: 30px;
166
+                    width: 50%;
167
+                    display: flex;
168
+                    justify-content: center;
169
+                    align-items: center;
170
+                    image{
171
+                        margin-right: 9px;
172
+                    }
173
+                }
174
+                .bottom-buy-right-self{
175
+                    background-color: #fbe00f;
176
+                    color: #000000;
177
+                }
178
+                .bottom-buy-right-share{
179
+                    background-color: #ff1c14;
180
+                    color: #fff;
181
+                }
182
+        }
183
+    }
184
+}