Преглед изворни кода

完成了标题修改、账户页,接下来做微信账户获取以及与后端的网络请求模块

Shellmiao пре 4 година
родитељ
комит
f1c95d2ca4

+ 1 - 1
src/components/MyTitle/MyTitle.scss

@@ -7,5 +7,5 @@
 
 
 .my-title-view {
 .my-title-view {
   margin-bottom: 3vh;
   margin-bottom: 3vh;
-  margin-top: 3vh;
+  margin-top: 2vh;
 }
 }

+ 3 - 0
src/pages/account/account.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '微网账户'
+}

+ 69 - 3
src/pages/account/account.js

@@ -1,13 +1,79 @@
 import React, {Component} from "react";
 import React, {Component} from "react";
-import {View} from "@tarojs/components";
+import {Text, View} from "@tarojs/components";
 import MyTitle from "../../components/MyTitle/MyTitle";
 import MyTitle from "../../components/MyTitle/MyTitle";
+import {AtAvatar, AtCard, AtDivider} from 'taro-ui'
+import './account.scss'
+
+import "taro-ui/dist/style/components/avatar.scss";
+import "taro-ui/dist/style/components/divider.scss";
+import "taro-ui/dist/style/components/card.scss";
 
 
 class account extends Component {
 class account extends Component {
+  state = {
+    products: [
+      {
+        title: '河南·新乡市·卫辉市 风力发电 10000w',
+        value: 7000,
+        content: '采用风力发电,符合环保标准,接收就近传输',
+        contact: 'xxxxxxxxxxx'
+      },
+      {
+        title: '安徽·巢湖市 水力发电 1000w',
+        value: 5500,
+        content: '采用水力发电,符合环保标准,接收就近传输',
+        contact: 'xxxxxxxxxxx'
+      },
+      {
+        title: '安徽·巢湖市 火力发电 20000w',
+        value: 3500,
+        content: '火力发电',
+        contact: 'xxxxxxxxxxx'
+      },
+      {
+        title: '江苏·扬州市·邗江区 火力发电 20000w',
+        value: 3500,
+        content: '火力发电',
+        contact: 'xxxxxxxxxxx'
+      }]
+  }
+
+  renderProductList(Products) {
+    return Products.map((ele, index) => {
+      return (
+        <View className={'account-card'}>
+          <AtCard
+            note={'联系方式:' + ele.contact}
+            title={ele.title}
+            extra={ele.value + '元'}
+          >
+            {
+              ele.content
+            }
+          </AtCard>
+        </View>
+      )
+    })
+  }
+
   render() {
   render() {
     return (
     return (
-      <View>
+      <View className={'account-view'}>
         <MyTitle title={'个人信息'}/>
         <MyTitle title={'个人信息'}/>
-
+        <View className={'account-avatar'}>
+          <AtAvatar
+            size={'large'}
+            circle
+            image='https://img1.baidu.com/it/u=4106295116,717584435&fm=253&fmt=auto&app=120&f=JPEG?w=542&h=500'/>
+        </View>
+        <View className={'account-name'}>
+          <Text>
+            有喵的柴
+          </Text>
+        </View>
+        <AtDivider content='我发布的交易' lineColor={'#cccccc'} fontColor={'#cccccc'}/>
+        {
+          this.renderProductList(this.state.products)
+        }
       </View>
       </View>
     )
     )
   }
   }

+ 21 - 0
src/pages/account/account.scss

@@ -0,0 +1,21 @@
+.account-avatar {
+  float: left;
+  margin-left: 8vh;
+}
+
+.account-name {
+  float: left;
+  margin-left: 8vh;
+  margin-top: 3vh;
+  font-size: large;
+  font-weight: bold;
+}
+
+.account-card {
+  margin-top: 3vh;
+  margin-bottom: 3vh;
+}
+
+.account-view{
+  margin-bottom: 5vh;
+}

+ 3 - 0
src/pages/shop/shop.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '微网交易'
+}

+ 1 - 0
src/pages/shop/shop.js

@@ -4,6 +4,7 @@ import {AtCard, AtSearchBar} from "taro-ui"
 
 
 import "taro-ui/dist/style/components/card.scss";
 import "taro-ui/dist/style/components/card.scss";
 import "taro-ui/dist/style/components/search-bar.scss";
 import "taro-ui/dist/style/components/search-bar.scss";
+
 import './shop.scss'
 import './shop.scss'
 
 
 export default class shop extends Component {
 export default class shop extends Component {