Kaynağa Gözat

完成了主页、商品页,接下来修改标题和完成账户页

Shellmiao 4 yıl önce
işleme
3d5ca74d99

BIN
src/assets/account-fill.png


BIN
src/assets/account.png


BIN
src/assets/cart-Empty-fill.png


BIN
src/assets/cart-Empty.png


BIN
src/assets/code.png


BIN
src/assets/home-fill.png


BIN
src/assets/home.png


+ 17 - 0
src/components/MyTitle/MyTitle.js

@@ -0,0 +1,17 @@
+import React, {Component} from "react";
+import {Image, Text, View} from "@tarojs/components";
+import './MyTitle.scss'
+
+class MyTitle extends Component {
+  render() {
+    return (
+      <View className={'my-title-view'}>
+        <Text className={'my-title'}>
+          &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;{this.props.title}
+        </Text>
+      </View>
+    )
+  }
+}
+
+export default MyTitle;

+ 11 - 0
src/components/MyTitle/MyTitle.scss

@@ -0,0 +1,11 @@
+.my-title {
+  color: #363636;
+  font-family: -apple-system-font, ui-rounded;
+  font-weight: bolder;
+  font-size: small;
+}
+
+.my-title-view {
+  margin-bottom: 3vh;
+  margin-top: 3vh;
+}

+ 14 - 0
src/components/Test/Test.js

@@ -0,0 +1,14 @@
+import React, {Component} from "react";
+import {Text, View} from "@tarojs/components";
+
+class Test extends Component {
+  render() {
+    return (
+      <View>
+        <Text>233ok</Text>
+      </View>
+    )
+  }
+}
+
+export default Test;

+ 16 - 0
src/pages/account/account.js

@@ -0,0 +1,16 @@
+import React, {Component} from "react";
+import {View} from "@tarojs/components";
+import MyTitle from "../../components/MyTitle/MyTitle";
+
+class account extends Component {
+  render() {
+    return (
+      <View>
+        <MyTitle title={'个人信息'}/>
+
+      </View>
+    )
+  }
+}
+
+export default account;

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

@@ -0,0 +1,149 @@
+import React, {Component} from 'react'
+import {View} from "@tarojs/components";
+import {AtCard, AtSearchBar} from "taro-ui"
+
+import "taro-ui/dist/style/components/card.scss";
+import "taro-ui/dist/style/components/search-bar.scss";
+import './shop.scss'
+
+export default class shop extends Component {
+  state = {
+    value: '',
+    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'
+      },
+      {
+        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'
+      },
+      {
+        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'
+      },
+      {
+        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'
+      },
+    ]
+  }
+
+  onChange(value) {
+    this.setState({
+      value: value
+    })
+  }
+
+  renderProductList(Products) {
+    return Products.map((ele, index) => {
+      return (
+        <View className={'shop-card'}>
+          <AtCard
+            note={'联系方式:' + ele.contact}
+            title={ele.title}
+            extra={ele.value + '元'}
+          >
+            {
+              ele.content
+            }
+          </AtCard>
+        </View>
+      )
+    })
+  }
+
+  render() {
+    return (
+      <View>
+        <AtSearchBar
+          value={this.state.value}
+          onChange={this.onChange.bind(this)}
+        />
+        {
+          this.renderProductList(this.state.products)
+        }
+      </View>
+    )
+  }
+}

+ 4 - 0
src/pages/shop/shop.scss

@@ -0,0 +1,4 @@
+.shop-card{
+  margin-top: 3vh;
+  margin-bottom: 3vh;
+}