完善了详情界面，加了map，功率

src/components/FloatLayout/FloatLayout.js

@@ -0,0 +1,89 @@
+import React, {Component} from 'react'
+import {AtButton, AtFloatLayout, AtForm, AtInputNumber} from "taro-ui"
+
+import "taro-ui/dist/style/components/float-layout.scss";
+import "taro-ui/dist/style/components/button.scss"
+import "taro-ui/dist/style/components/form.scss";
+import "taro-ui/dist/style/components/input-number.scss";
+import "taro-ui/dist/style/components/icon.scss";
+import MyTitle from "../MyTitle/MyTitle";
+import {Text, View} from "@tarojs/components";
+import './FloatLayout.scss'
+import MyMap from "../MyMap/MyMap";
+
+class FloatLayout extends Component {
+  state = {
+    value: ''
+  }
+
+  handleValueChange(value) {
+    this.setState({
+      value: value
+    })
+  }
+
+  handleTitleChange(title) {
+
+  }
+
+  handleContentChange(content) {
+
+  }
+
+  render() {
+    return (
+      <AtFloatLayout
+        isOpened={this.props.isOpened}
+        title={this.props.title}
+      >
+        <View className={'index-form'}>
+          <MyTitle title={"交易价格"}/>
+          <View className={'float-value'}>
+            <Text>
+              {this.props.value + '元'}
+            </Text>
+          </View>
+          <MyTitle title={"交易功率"}/>
+          <View className={'float-value'}>
+            <Text>
+              {this.props.www + ' W'}
+            </Text>
+          </View>
+          <MyTitle title={"发布者联系方式"}/>
+          <View className={'float-value'}>
+            <Text>
+              {this.props.contact}
+            </Text>
+          </View>
+          <MyTitle title={"交易描述"}/>
+          <View className={'float-value'}>
+            <Text>
+              {this.props.content}
+            </Text>
+          </View>
+          <MyTitle title={"发电地址"}/>
+          <View className={'float-map'}>
+            <MyMap/>
+          </View>
+          <MyTitle title={"购买功率(单位：W)"}/>
+          <View className={'float-form-num'}>
+            <AtInputNumber
+              type={'number'}
+              min={0}
+              max={this.props.www}
+              step={100}
+              width={450}
+              value={this.state.value}
+              onChange={this.handleValueChange.bind(this)}
+            />
+          </View>
+          <View className={'float-form-button'}>
+            <AtButton type={'primary'}>购买电力</AtButton>
+          </View>
+        </View>
+      </AtFloatLayout>
+    )
+  }
+}
+
+export default FloatLayout;

src/components/FloatLayout/FloatLayout.scss

@@ -0,0 +1,24 @@
+.float-value {
+  margin-left: 5vh;
+  margin-bottom: 5vh;
+}
+
+.float-form-content {
+  width: 90%;
+  margin-left: 5%;
+}
+
+.float-form-num {
+  text-align: center;
+}
+
+.float-form-button {
+  margin-top: 3vh;
+  width: 90%;
+  margin-left: 5%;
+  margin-bottom: 5vh;
+}
+
+.float-map {
+  margin-left: 7%;
+}

src/components/InitComponent/InitComponent.js

@@ -0,0 +1,37 @@
+import React, {Component} from 'react'
+import {Text, View} from "@tarojs/components";
+import Taro from '@tarojs/taro'
+
+class InitComponent extends Component {
+  state = {
+    hasUserInfo: false,
+  }
+
+  constructor(props) {
+    super(props);
+    if (!this.state.hasUserInfo) {
+      Taro.login({
+        success: (res) => {
+          if (res.code) {
+            console.log(res.code)
+            this.setState({
+              hasUserInfo: true,
+            })
+          } else {
+            console.log('登录失败！' + res.errMsg)
+          }
+        }
+      })
+    }
+  }
+
+  render() {
+    return (
+      <View>
+
+      </View>
+    )
+  }
+}
+
+export default InitComponent;

src/components/MyMap/MyMap.js

@@ -0,0 +1,19 @@
+import React, {Component} from "react";
+import {Map} from "@tarojs/components";
+
+class MyMap extends Component {
+  onTap() {
+  }
+
+  render() {
+    return (
+      <Map
+        onClick={this.onTap}
+        latitude={37.735097}
+        longitude={115.665993}
+      />
+    )
+  }
+}
+
+export default MyMap;

src/components/TradeCard/TradeCard.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react'
+import {AtCard} from "taro-ui";
+import FloatLayout from "../FloatLayout/FloatLayout";
+import {View} from "@tarojs/components";
+import './TradeCard.scss'
+
+class TradeCard extends Component {
+  state = {
+    isOpened: false,
+  }
+
+  handleCardClick = () => {
+    this.setState({
+      isOpened: true
+    })
+  }
+
+  render() {
+    return (
+      <View className={'shop-card'}>
+        <AtCard
+          note={'价格：' + this.props.ele.value + '元'}
+          title={this.props.ele.title}
+          extra={'>>'}
+          onClick={this.handleCardClick}
+        >
+          {
+            this.props.ele.content
+          }
+        </AtCard>
+        <FloatLayout
+          isOpened={this.state.isOpened}
+          title={this.props.ele.title}
+          content={this.props.ele.content}
+          value={this.props.ele.value}
+          contact={this.props.ele.contact}
+          www={this.props.ele.www}
+        />
+      </View>
+    )
+  }
+}
+
+export default TradeCard;

src/components/TradeCard/TradeCard.scss

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

src/pages/account/account.js

@@ -7,50 +7,48 @@ 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";
+import InitComponent from "../../components/InitComponent/InitComponent";
+import TradeCard from "../../components/TradeCard/TradeCard";
 
 class account extends Component {
   state = {
     products: [
       {
-        title: '河南·新乡市·卫辉市 风力发电 10000w',
+        title: '河南·新乡市·卫辉市 风力发电',
         value: 7000,
-        content: '采用风力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用风力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www:'100'
       },
       {
-        title: '安徽·巢湖市 水力发电 1000w',
+        title: '安徽·巢湖市 水力发电',
         value: 5500,
-        content: '采用水力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用水力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www:'1050'
       },
       {
-        title: '安徽·巢湖市 火力发电 20000w',
+        title: '安徽·巢湖市 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www:'15000'
       },
       {
-        title: '江苏·扬州市·邗江区 火力发电 20000w',
+        title: '江苏·扬州市·邗江区 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www:'20000'
       }]
   }
 
   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>
+        <TradeCard
+          ele={ele}
+        />
       )
     })
   }
@@ -58,6 +56,7 @@ class account extends Component {
   render() {
     return (
       <View className={'account-view'}>
+        <InitComponent/>
         <MyTitle title={'个人信息'}/>
         <View className={'account-avatar'}>
           <AtAvatar

src/pages/shop/shop.js

@@ -6,106 +6,124 @@ import "taro-ui/dist/style/components/card.scss";
 import "taro-ui/dist/style/components/search-bar.scss";
 
 import './shop.scss'
+import FloatLayout from "../../components/FloatLayout/FloatLayout";
+import TradeCard from "../../components/TradeCard/TradeCard";
 
 export default class shop extends Component {
   state = {
     value: '',
     products: [
       {
-        title: '河南·新乡市·卫辉市 风力发电 10000w',
+        title: '河南·新乡市·卫辉市 风力发电',
         value: 7000,
-        content: '采用风力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用风力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www: '10000'
       },
       {
-        title: '安徽·巢湖市 水力发电 1000w',
+        title: '安徽·巢湖市 水力发电',
         value: 5500,
-        content: '采用水力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用水力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www: '1000'
       },
       {
-        title: '安徽·巢湖市 火力发电 20000w',
+        title: '安徽·巢湖市 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www: '20000'
       },
       {
-        title: '江苏·扬州市·邗江区 火力发电 20000w',
+        title: '江苏·扬州市·邗江区 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www: '20000'
       },
       {
-        title: '河南·新乡市·卫辉市 风力发电 10000w',
+        title: '河南·新乡市·卫辉市 风力发电',
         value: 7000,
-        content: '采用风力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用风力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www: '10000'
       },
       {
-        title: '安徽·巢湖市 水力发电 1000w',
+        title: '安徽·巢湖市 水力发电',
         value: 5500,
-        content: '采用水力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用水力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www: '1000'
       },
       {
-        title: '安徽·巢湖市 火力发电 20000w',
+        title: '安徽·巢湖市 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www: '20000'
       },
       {
-        title: '江苏·扬州市·邗江区 火力发电 20000w',
+        title: '江苏·扬州市·邗江区 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www: '20000'
       },
       {
-        title: '河南·新乡市·卫辉市 风力发电 10000w',
+        title: '河南·新乡市·卫辉市 风力发电',
         value: 7000,
-        content: '采用风力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用风力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www: '10000'
       },
       {
-        title: '安徽·巢湖市 水力发电 1000w',
+        title: '安徽·巢湖市 水力发电',
         value: 5500,
-        content: '采用水力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用水力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www: '1000'
       },
       {
-        title: '安徽·巢湖市 火力发电 20000w',
+        title: '安徽·巢湖市 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www: '20000'
       },
       {
-        title: '江苏·扬州市·邗江区 火力发电 20000w',
+        title: '江苏·扬州市·邗江区 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www: '20000'
       },
       {
-        title: '河南·新乡市·卫辉市 风力发电 10000w',
+        title: '河南·新乡市·卫辉市 风力发电',
         value: 7000,
-        content: '采用风力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用风力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www: '1000'
       },
       {
-        title: '安徽·巢湖市 水力发电 1000w',
+        title: '安徽·巢湖市 水力发电',
         value: 5500,
-        content: '采用水力发电，符合环保标准，接收就近传输',
-        contact: 'xxxxxxxxxxx'
+        content: '采用水力发电，符合环保标准，接受就近传输',
+        contact: 'xxxxxxxxxxx',
+        www: '1000'
       },
       {
-        title: '安徽·巢湖市 火力发电 20000w',
+        title: '安徽·巢湖市 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www: '15000'
       },
       {
-        title: '江苏·扬州市·邗江区 火力发电 20000w',
+        title: '江苏·扬州市·邗江区 火力发电',
         value: 3500,
         content: '火力发电',
-        contact: 'xxxxxxxxxxx'
+        contact: 'xxxxxxxxxxx',
+        www: '15000'
       },
     ]
   }
@@ -119,17 +137,9 @@ export default class shop extends Component {
   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>
+        <TradeCard
+          ele={ele}
+        />
       )
     })
   }

src/pages/shop/shop.scss

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

src/utils/get.js

@@ -0,0 +1,6 @@
+import baseOptions from "./request";
+
+export default function get(url, data = '') {
+  let option = {url, data}
+  return baseOptions(option)
+}

src/utils/post.js

@@ -0,0 +1,6 @@
+import baseOptions from "./request";
+
+export default function post(url, data, contentType) {
+  let params = {url, data, contentType}
+  return baseOptions(params, 'POST')
+}

src/utils/request.js

@@ -0,0 +1,20 @@
+export default function baseOptions(params, method = 'GET') {
+  let base = 'http://127.0.0.1:8000'
+  let {url, data} = params
+  let contentType = 'application/x-www-form-urlencoded'
+  contentType = params.contentType || contentType
+  const option = {
+    isShowLoading: false,
+    url: base + url,
+    data: data,
+    method: method,
+    header: {'content-type': contentType}, // 默认contentType ,预留token
+    success(res) {
+
+    },
+    error(e) {
+      console.log('请求接口出现问题')
+    }
+  }
+  return Taro.request(option)
+}