style feature perf

src/components/CarsListContent/index.jsx

@@ -0,0 +1,76 @@
+
+import { View, Swiper, Image, SwiperItem, Text, Input } from "@tarojs/components"
+import { useEffect, useState, useMemo } from "react"
+import Taro, { useReachBottom } from "@tarojs/taro"
+import ButtontWX from '@/components/ButtontWX'
+import addresss from '@/assets/mineImgaes/addresss.png'//地址
+
+import { getMachinery, } from "@/services/homes"
+
+
+import './style.less'
+
+export default (props) => {
+  const location = Taro.getStorageSync('location')
+  // const { carsList } = props
+
+  const [carsList, setCarsList] = useState([])
+
+
+  useEffect(() => {
+    getMachinery(location).then((e) => {
+      setCarsList(e.records)
+    })
+
+  }, [location])
+
+
+
+
+  const startReserve = () => {
+    Taro.navigateTo({ url: `/pages/OrderInfo/index?id${1}` })
+
+  }
+  const goCarsInfo = (res) => {
+    Taro.navigateTo({ url: `/pages/CheckDetails/index?id=${res}&location=${location}` })
+
+  }
+  const goMapInfo = (res) => {
+    Taro.navigateTo({ url: `/pages/CheckMap/index?mapId=${res + 111}` })
+
+  }
+
+
+  return (
+
+
+    <>
+      {
+        carsList.map((item, index) => {
+          return (
+            <View key={index} className='carsListImga-bottom-box'>
+              <Image src={item.thumb} onClick={() => goCarsInfo(item.machineryId)} />
+              <View className='carsListImga-bottom-box-flaxBox'>
+                <View className='carsListImga-bottom-box-flaxBox-liftText'>
+                  <View className='carsListImga-bottom-box-flaxBox-liftText-Titles'>{item.name}</View>
+                  <View className='carsListImga-bottom-box-flaxBox-liftText-price'>{item.price}/<Text>公顷</Text></View>
+                </View>
+                <View className='carsListImga-bottom-box-flaxBox-rightBut'>
+                  <ButtontWX onClick={startReserve} butText='预约' butWidth={80} butHeight={34} butFontSize={19} butBorderRadius={0} />
+                </View>
+              </View>
+              <View className='content-header-box-map' onClick={() => goMapInfo(item.machineryId)}>
+                <View className='content-header-box-map-liftCentent'>
+                  <Image src={addresss} />
+                  <View>距离当前位置公里</View>
+                </View>
+                <View className='content-header-box-map-rightCentent'>进入地图&gt;&gt;</View>
+              </View>
+            </View>
+          )
+        })
+      }
+
+    </>
+  )
+}

src/components/CarsListContent/style.less

@@ -0,0 +1,75 @@
+.carsListImga-bottom-box {
+  margin: 30px auto 0 auto;
+  background: #f2f2f2;
+  width: 93vw;
+  > Image {
+    width: 100%;
+    margin: 0 auto;
+  }
+  &-flaxBox {
+    width: 94%;
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: 40px;
+    margin-bottom: 38px;
+    &-liftText {
+      width: 95%;
+
+      &-Titles {
+        width: 95%;
+
+        text-overflow: ellipsis; //显示...
+        white-space: nowrap; //不换行
+        overflow: hidden;
+        font-size: 36px;
+        font-weight: bold;
+        color: #222222;
+      }
+      &-price {
+        margin-top: 44px;
+        font-size: 44px;
+        font-weight: 800;
+        color: #666666;
+        background: linear-gradient(180deg, #fa7878 0%, #b61515 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        > Text {
+          font-size: 25px;
+        }
+      }
+    }
+    &-rightBut {
+      align-items: center;
+      margin: 0 auto;
+    }
+  }
+  .content-header-box-map {
+    width: 94%;
+
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 60px;
+    &-liftCentent {
+      display: flex;
+      align-items: center;
+      > Image {
+        width: 22px;
+        height: 27px;
+      }
+      > View {
+        padding-left: 15px;
+        font-size: 30px;
+        font-weight: 800;
+        color: #222222;
+      }
+    }
+    &-rightCentent {
+      font-size: 30px;
+      font-weight: 500;
+      color: #666666;
+    }
+  }
+}

src/components/tabs/index.js

@@ -0,0 +1,148 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 5:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Component({
+    options: {
+        addGlobalClass: true,
+        pureDataPattern: /^_/,
+        multipleSlots: true
+    },
+    properties: {
+        tabs: { type: Array, value: [] },
+        tabClass: { type: String, value: '' },
+        swiperClass: { type: String, value: '' },
+        activeClass: { type: String, value: '' },
+        tabUnderlineColor: { type: String, value: '#07c160' },
+        tabActiveTextColor: { type: String, value: '#000000' },
+        tabInactiveTextColor: { type: String, value: '#000000' },
+        tabBackgroundColor: { type: String, value: '#ffffff' },
+        activeTab: { type: Number, value: 0 },
+        swipeable: { type: Boolean, value: true },
+        animation: { type: Boolean, value: true },
+        duration: { type: Number, value: 500 }
+    },
+    data: {
+        currentView: 0
+    },
+    observers: {
+        activeTab: function activeTab(_activeTab) {
+            var len = this.data.tabs.length;
+            if (len === 0) return;
+            var currentView = _activeTab - 1;
+            if (currentView < 0) currentView = 0;
+            if (currentView > len - 1) currentView = len - 1;
+            this.setData({ currentView: currentView });
+        }
+    },
+    lifetimes: {
+        created: function created() {}
+    },
+    methods: {
+        handleTabClick: function handleTabClick(e) {
+            var index = e.currentTarget.dataset.index;
+            this.setData({ activeTab: index });
+            this.triggerEvent('tabclick', { index: index });
+        },
+        handleSwiperChange: function handleSwiperChange(e) {
+            var index = e.detail.current;
+            this.setData({ activeTab: index });
+            this.triggerEvent('change', { index: index });
+        }
+    }
+});
+
+/***/ })
+
+/******/ });

src/components/tabs/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

src/components/tabs/index.wxml

@@ -0,0 +1,20 @@
+<view class="weui-tabs">
+  <view class="weui-tabs-bar__wrp">
+    <scroll-view scroll-x scroll-into-view="item_{{currentView}}" scroll-with-animation="{{animation}}">
+      <view class="weui-tabs-bar__content">
+        <block wx:for="{{tabs}}" wx:key="title">
+          <view id="item_{{index}}" class="weui-tabs-bar__item" style="background-color: {{tabBackgroundColor}}; color: {{activeTab === index ? tabActiveTextColor : tabInactiveTextColor}};" bindtap="handleTabClick" data-index="{{index}}">
+            <view class="weui-tabs-bar__title {{tabClass}} {{activeTab === index ? activeClass : ''}}" style="border-bottom-color: {{activeTab === index ? tabUnderlineColor : 'transparent'}}">
+              <text class="">{{item.title}}</text>
+            </view>
+          </view>
+        </block>
+      </view>
+    </scroll-view>
+  </view>
+  <swiper class="{{swiperClass}}" current="{{activeTab}}" duration="{{duration}}" bindchange="handleSwiperChange">
+    <swiper-item wx:for="{{tabs}}" wx:key="title">
+      <slot name="tab-content-{{index}}"></slot>
+    </swiper-item>
+  </swiper>
+</view>

src/components/tabs/index.wxss

@@ -0,0 +1,20 @@
+.weui-tabs {
+  width: 100%;
+}
+.weui-tabs-bar__wrp {
+  width: 100%;
+  background: #fff;
+}
+.weui-tabs-bar__content {
+  width: 100%;
+  white-space: nowrap;
+}
+.weui-tabs-bar__item {
+  display: inline-block;
+}
+.weui-tabs-bar__title {
+  display: inline-block;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  border-bottom-color: transparent;
+}

src/pages/CheckDetails/TextContent.jsx

@@ -0,0 +1,15 @@
+import { Image } from "@tarojs/components"
+import './TextContent.less'
+
+export default (props) => {
+  const { item } = props
+  return (
+    <view className='cardext'>
+      {
+        item.contentType == 'image' ?
+          <Image key={item.extId} style={{ width: '100%' }} src={item.content} /> :
+          <view className='storezn'>{item.content}</view>
+      }
+    </view>
+  )
+}

src/pages/CheckDetails/TextContent.less

@@ -0,0 +1,5 @@
+.cardext {
+  .storezn {
+    text-indent: 2em;
+  }
+}

src/pages/CheckDetails/index.jsx

@@ -7,6 +7,7 @@ import ButtontWX from "@/components/ButtontWX"
 import decorate from "@/assets/icons/comm/decorate.png"
 import addresss from '@/assets/mineImgaes/addresss.png'//地址
 import { getMachineryInfo } from "@/services/homes"
+import TextContent from "./TextContent"
 
 
 import './style.less'
@@ -21,12 +22,16 @@ export default (props) => {
 
   const [carsInfo, setCarsInfo] = useState({})
   const [imagesList, setImagesList] = useState([])
+  const [contentList, setContentList] = useState([])
+
 
   useEffect(() => {
 
     getMachineryInfo(id, { location: location, attached: true }).then((e) => {
       setImagesList(e.imagesList)
+      setContentList(e.contentList)
       setCarsInfo(e)
+
       console.log('e', e);
     })
 
@@ -82,17 +87,25 @@ export default (props) => {
             <View className='startReserve-centent'>
               <View className='articleTitle-box-Details'>
                 <Image src={decorate} />
-                <View>作业详情</View>
+                <View>农机详情</View>
                 <Image src={decorate} />
               </View>
-              <Image style={{ width: '100%' }} src='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' />
-              <Image style={{ width: '100%' }} src='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' />
-              <Image style={{ width: '100%' }} src='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' />
+              {
+                contentList.map((item, index) => {
 
-              <View className='startReserve-Bottom'>
-                <ButtontWX butText='预约' onClick={startReserve} butWidth={300} butHeight={49} butFontSize={16} butBorderRadius={49} />
+                  return (
+                    <TextContent item={item} />
+                  )
+
+
+                })
+              }
+
+
+            </View>
+            <View className='startReserve-Bottom-oen'>
+              <ButtontWX butText='预约' onClick={startReserve} butWidth={300} butHeight={49} butFontSize={16} butBorderRadius={49} />
 
-              </View>
             </View>
 
 

src/pages/CheckDetails/style.less

@@ -86,9 +86,9 @@
     }
   }
 
-  .startReserve-Bottom {
-    position: absolute;
-    bottom: -3vh;
+  .startReserve-Bottom-oen {
+    position: relative;
     width: 92vw;
+    margin: 2em 0;
   }
 }

src/pages/CheckMap/style.less

@@ -77,6 +77,7 @@
         align-items: center;
         justify-content: center;
         margin-top: 32px;
+        margin-bottom: 2em;
         > Image {
           width: 33px;
           height: 33px;

src/pages/MoreCars/index.config.js

@@ -4,6 +4,10 @@ export default {
   navigationStyle: 'custom',
   disableScroll: true,
   usingComponents: {
+    "mp-tabbar": "weui-miniprogram/tabbar/tabbar",
+    "mp-tabs": "../../components/tabs/index",
+
+
   }
 
 

src/pages/MoreCars/index.jsx

@@ -8,48 +8,46 @@ import {
 import { useState } from "react"
 import CustomNav from "@/components/CustomNav"
 import searchs from '@/assets/homesImgaes/searchs.png'//搜索图片
-import ButtontWX from '@/components/ButtontWX'
-import addresss from '@/assets/mineImgaes/addresss.png'//地址
+import { getMachineryType } from "@/services/homes"
+import CarsListContent from "@/components/CarsListContent"
 
 import './style.less'
 
 
 
+
 export default (props) => {
+  const [activeTab, setActiveTab] = useState(1)
 
-  const carsList = [
-    { carsName: '联合收割机', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg', jiage: '300', carsLocation: '3.9' },
-    { carsName: '水稻播种机', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd031719b1.jpg', jiage: '300', carsLocation: '3.9' },
-    { carsName: '秸秆统一处理 型号：GB2312', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd03201503.jpg', jiage: '免费', carsLocation: '3.9' },
-    { carsName: '花生稻子小麦收割一体机', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd0324f649.jpg', jiage: '550', carsLocation: '3.9' },
-    { carsName: '拖拉机', carsUrl: 'https://image.cnhnb.com/image/jpg/miniapp/2020/03/26/ef945970d2cc4948b61d45ce57ac1179.jpg', jiage: '180', carsLocation: '3.9' },
-    { carsName: '自行车', carsUrl: 'https://image.cnhnb.com/image/jpg/miniapp/2020/03/26/e8745759793d48398f82e6658186686a.jpg', jiage: '20', carsLocation: '3.9' },
-  ]
 
   const handleSearch = (e) => {
     console.log(e.detail.value)
   }
 
-  const [distanceValue, setDistanceValue] = useState('距离')
-  const distanceValueState = {
-    selector: ['由近到远', '由远到近'],
-    selectorChecked: distanceValue,
-  }
-  const onChangeDistance = e => {
-    setDistanceValue(distanceValueState.selector[e.detail.value])
-  }
-
-
+  const tabs = [
+    {
+      title: '全部',
+    },
+    {
+      title: '收割机',
+    },
+    {
+      title: '水稻机',
+    },
+    {
+      title: '战斗机',
+    },
+    {
+      title: '清障机',
+    },
+  ]
 
-  const [selectValueType, setselectValueType] = useState('类型')
-  const selectValueTypeState = {
-    selector: ['收割机', '水稻机', '清障机', '战斗机', '公鸡'],
-    selectorChecked: selectValueType,
-  }
 
 
-  const onChangeType = e => {
-    setselectValueType(selectValueTypeState.selector[e.detail.value])
+  const handleTabChange = (e) => {
+    console.log('e', e.detail.index);
+    const { index } = e.detail
+    setActiveTab(index)
   }
 
 
@@ -59,53 +57,25 @@ export default (props) => {
         <CustomNav title='更多' />
       </View>
       <scroll-view scrollY style='height: 100%;' >
-
         <View className='heads-content-searchClass-abcc'>
           <Input type='text' className='heads-content-searchClass-abcc-searchInput' onBlur={handleSearch} placeholder='搜索关键字查询订单' />
           <Image src={searchs} className='heads-content-searchClass-abcc-searchInput-searchImg' />
         </View>
-        <View className='pick-box'>
-
-          <Picker className='picker-box' mode='selector' range={distanceValueState.selector} onChange={onChangeDistance}>
-            <View className='picker-text'>
-              {distanceValueState.selectorChecked}
-              <View className='heads-top-box-left-addresssImg-DownIcon-Picker' />
-            </View>
-          </Picker>
-          <Picker className='picker-box' mode='selector' range={selectValueTypeState.selector} onChange={onChangeType}>
-            <View className='picker-text'>
-              {selectValueTypeState.selectorChecked}
-              <View className='heads-top-box-left-addresssImg-DownIcon-Picker' />
-            </View>
-          </Picker>
-        </View>
-        {/* 内容区域 */}
+        <mp-tabs
+          tabClass='tabs-Unselected'
+          swiperClass='tabs-swiper'
+          activeClass='tabs-Selected'
+          current={activeTab}
+          activeTab={activeTab}
+          tabs={tabs}
+          onChange={handleTabChange}
+        ></mp-tabs>
 
-        {
-          carsList.map((item, index) => {
-            return (
-              <View key={index} className='carsListImga-bottom-box-copyStyleless'>
-                <Image src={item.carsUrl} />
-                <View className='carsListImga-bottom-box-copyStyleless-flaxBox'>
-                  <View className='carsListImga-bottom-box-copyStyleless-flaxBox-liftText'>
-                    <View className='carsListImga-bottom-box-copyStyleless-flaxBox-liftText-Titles'>{item.carsName}</View>
-                    <View className='carsListImga-bottom-box-copyStyleless-flaxBox-liftText-price'>{item.jiage}/<Text>公顷</Text></View>
-                  </View>
-                  <View className='carsListImga-bottom-box-copyStyleless-flaxBox-rightBut'>
-                    <ButtontWX butText='预约' butWidth={80} butHeight={34} butFontSize={19} butBorderRadius={0} />
-                  </View>
-                </View>
-                <View className='content-header-box-map-copyStyleless'>
-                  <View className='content-header-box-map-copyStyleless-liftCentent'>
-                    <Image src={addresss} />
-                    <View>距离当前位置{item.carsLocation}公里</View>
-                  </View>
-                  <View className='content-header-box-map-copyStyleless-rightCentent'>进入地图&gt;&gt;</View>
-                </View>
-              </View>
-            )
-          })
-        }
+
+        {/* 内容区域 */}
+        <View className='cententText'>
+          <CarsListContent />
+        </View>
       </scroll-view>
     </View>
   )

src/pages/MoreCars/style.less

@@ -22,117 +22,30 @@
     top: 19px;
   }
 }
-
-.pick-box {
-  width: 93vw;
-  margin: 0 auto;
+.tabs-Unselected {
+  color: #c0c8d3;
   text-align: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  margin: 29px auto 32px auto;
-  padding-bottom: 18px;
-
-  .picker-box {
-    display: inline-block;
-    .picker-text {
-      line-height: 73px;
-      text-align: center;
-      border-radius: 42px;
-      font-size: 30px;
-      font-weight: 700;
-      // position: relative;
-      top: 34px;
-      height: 9.9vw;
-      left: 12px;
-      padding-right: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .picker-text-line {
-        color: #808080;
-        padding-left: 6px;
-        font-weight: 100;
-      }
-      .heads-top-box-left-addresssImg-DownIcon-Picker {
-        border-top: 7px solid #000;
-        border-left: 7px solid transparent;
-        border-right: 7px solid transparent;
-        margin-left: 15px;
-      }
-    }
-  }
+  font-size: 28px;
+  line-height: 91px;
+  box-sizing: border-box;
+  padding: 0 32px;
+  letter-spacing: 2px;
+}
+.tabs-swiper {
+  max-height: 0;
+}
+.tabs-Selected {
+  box-sizing: border-box;
+  font-size: 32px;
+  color: #4c4c4c;
+  // width: 25vw;
+  font-weight: bold;
+  text-align: center;
+  border-bottom: 6px solid #4c4c4c;
+  padding: 0 32px;
+  letter-spacing: 2px;
 }
 
-.carsListImga-bottom-box-copyStyleless {
-  margin: 30px auto 0 auto;
-  background: #f2f2f2;
-  width: 93vw;
-  > Image {
-    width: 100%;
-    margin: 0 auto;
-  }
-  &-flaxBox {
-    width: 94%;
-    display: flex;
-    align-items: center;
-    margin: 0 auto;
-    margin-top: 40px;
-    margin-bottom: 38px;
-    &-liftText {
-      width: 95%;
-
-      &-Titles {
-        width: 95%;
-
-        text-overflow: ellipsis; //显示...
-        white-space: nowrap; //不换行
-        overflow: hidden;
-        font-size: 36px;
-        font-weight: bold;
-        color: #222222;
-      }
-      &-price {
-        margin-top: 44px;
-        font-size: 44px;
-        font-weight: 800;
-        color: #666666;
-        background: linear-gradient(180deg, #fa7878 0%, #b61515 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        > Text {
-          font-size: 25px;
-        }
-      }
-    }
-    &-rightBut {
-      align-items: center;
-      margin: 0 auto;
-    }
-  }
-  .content-header-box-map-copyStyleless {
-    width: 94%;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-bottom: 60px;
-    &-liftCentent {
-      display: flex;
-      align-items: center;
-      > Image {
-        width: 22px;
-        height: 27px;
-      }
-      > View {
-        padding-left: 15px;
-        font-size: 30px;
-        font-weight: 800;
-        color: #222222;
-      }
-    }
-    &-rightCentent {
-      font-size: 30px;
-      font-weight: 500;
-      color: #666666;
-    }
-  }
+.cententText {
+  padding-bottom: 6em;
 }

src/pages/MyAddressInfo/index.jsx

@@ -1,52 +0,0 @@
-import { View, Form, Input, Button } from "@tarojs/components"
-import CustomNav from "@/components/CustomNav"
-import ButtontWX from '@/components/ButtontWX'
-
-
-import './style.less'
-
-
-
-
-export default (props) => {
-  const formSubmit = e => {
-    console.log(e.detail.value)
-  }
-
-  const formReset = e => {
-    console.log(e)
-  }
-  return (
-    <View className='page-index'>
-      <View className='index-navbar'>
-        <CustomNav title='我的地址' />
-      </View>
-      <scroll-view scrollY style='height: 100%;' >
-        <View className='form-content'>
-          <Form onSubmit={formSubmit} onReset={formReset} >
-            <View className='example-body'>
-              <View>姓名：</View>
-              <Input name='name' placeholder='请输入姓名' />
-            </View>
-            <View className='example-body'>
-              <View>手机号：</View>
-              <Input name='phone' placeholder='请输入手机号' />
-            </View>
-            <View className='example-body'>
-              <View>定位信息：</View>
-              <Input name='locast' placeholder='请输入定位信息' />
-            </View>
-            <View className='example-body'>
-              <View>地址信息：</View>
-              <Input name='locastInfo' placeholder='请输入地址信息' />
-            </View>
-            <View className='buton-bottom'>
-              <ButtontWX onClick={() => { }} formType='submit' butText='保存' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
-            </View>
-          </Form>
-
-        </View>
-      </scroll-view>
-    </View >
-  )
-}

src/pages/MyAddressList/AddressInfos/index.jsx

@@ -0,0 +1,50 @@
+import { View, Form, Input, Switch, Textarea } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import CustomNav from "@/components/CustomNav"
+import ButtontWX from '@/components/ButtontWX'
+
+import './style.less'
+import { useEffect } from "react"
+
+
+
+
+export default (props) => {
+  const formSubmit = e => {
+    const value = e.detail.value
+    console.log(value)
+
+  }
+
+  const formReset = e => {
+    console.log(e)
+  }
+  const handelSwitch = (e) => {
+    const { value } = e.detail
+    console.log('e', value);
+
+  }
+  return (
+
+    <View className='form-content'>
+      <Form onSubmit={formSubmit} onReset={formReset} >
+        <View className='example-body'>
+          <View>详细地址：</View>
+          <Textarea name='locastInfo' className='aTextareaCentent' placeholder='请输入地址信息' />
+        </View>
+        <View className='example-body'>
+          <View>是否设为默认地址：</View>
+          {/* <Textarea name='locastInfo' className='aTextareaCentent' placeholder='请输入地址信息' /> */}
+
+
+          <Switch name='Switch' onChange={handelSwitch} />
+        </View>
+        <View className='buton-bottom'>
+          <ButtontWX onClick={formSubmit} formType='submit' butText='保存' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
+        </View>
+      </Form>
+
+    </View>
+
+  )
+}

src/pages/MyAddressInfo/style.less → src/pages/MyAddressList/AddressInfos/style.less

@@ -19,6 +19,15 @@
       padding-bottom: 30px;
       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     }
+    .aTextareaCentent {
+      // width: 85%;
+      background: #fefefe;
+      border: 2px solid rgba(0, 0, 0, 0.2);
+      border-radius: 20px;
+      // min-height: 25vh;
+      // margin: 1em auto;
+      padding: 10px 37px;
+    }
   }
   .buton-bottom {
     width: 100%;

src/pages/MyAddressList/index.jsx

@@ -0,0 +1,33 @@
+import { View, Form, Input, Button, Textarea } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import CustomNav from "@/components/CustomNav"
+import ButtontWX from '@/components/ButtontWX'
+import { useEffect } from "react"
+
+import './style.less'
+
+
+
+
+export default (props) => {
+
+  const addAddress = () => {
+    Taro.navigateTo({ url: `/pages/MyAddressList/AddressInfos/index?id=${1}` })
+  }
+
+  useEffect(() => {
+
+  })
+  return (
+    <View className='page-index'>
+      <View className='index-navbar'>
+        <CustomNav title='我的地址' />
+      </View>
+      <scroll-view scrollY style='height: 100%;' >
+        <ButtontWX onClick={addAddress} formType='submit' butText='+新增收货地址' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
+      </scroll-view>
+    </View >
+  )
+}
+
+

src/pages/index/tabs/Homes.jsx

@@ -2,15 +2,12 @@
 import { View, Swiper, Image, SwiperItem, Text, Input } from "@tarojs/components"
 import { useEffect, useState, useMemo } from "react"
 import Taro, { useReachBottom } from "@tarojs/taro"
-import ButtontWX from '@/components/ButtontWX'
 import addresss from '@/assets/mineImgaes/addresss.png'//地址
 import searchs from '@/assets/homesImgaes/searchs.png'//搜索图片
 import carsListImga from '@/assets/homesImgaes/carsListImga.png'//农机列表图片
-
+import CarsListContent from "@/components/CarsListContent"
 import { getHomeBanner, getMachinery, } from "@/services/homes"
 
-
-
 import './HomesCss/style.less'
 
 export default (props) => {
@@ -18,61 +15,22 @@ export default (props) => {
   const [bannerHome, setBannerHome] = useState([])
   const [carsList, setCarsList] = useState([])
 
-  let pageSize = 10;//每页加载的数据量
-  let pageNum = 1;//当前页
-  let totalPage = 0;//总页数
-  let resultData = [];
+
 
   useEffect(() => {
     getHomeBanner({ position: 'banner' }).then((e) => {
       console.log('e', e);
-      // let bame = e.filter(ele => ele.position == "banner")
       setBannerHome(e)
     })
-    getMachinery(location, {
-      pageSize: 3,
-      pageNum: 1,
-    }).then((e) => {
+    getMachinery(location).then((e) => {
       setCarsList(e.records)
     })
 
   }, [])
 
 
-  useReachBottom(() => {
-    console.log('chufa',);
-
-    if (pageNum < totalPage) {
-      pageNum += 1;
-      //加载下一页
-      loadData()
-      console.log('chufa',);
-    } else {
-      Taro.showToast({
-        icon: "none",
-        title: '没有更多数据了',
-      })
-    }
-  }, [1])
-
-
-
-
-  const loadData = () => {
-    getMachinery(location, {
-      pageSize: pageSize,
-      pageNum: pageNum,
-    }).then((e) => {
-      pageNum = e.data.content.pageNum;
-      totalPage = e.data.content.totalPageNum;
-      resultData = e.data.content.rows;
-
-      setCarsList(e.records)
-    })
-  }
 
 
-  console.log("🚀 ~ file: Homes.jsx ~ line 36 ~ imglist ~ imglist", bannerHome)
 
 
 
@@ -85,23 +43,8 @@ export default (props) => {
 
   }
 
-  const startReserve = () => {
-    Taro.navigateTo({ url: `/pages/OrderInfo/index?id${1}` })
-
-  }
-  const goCarsInfo = (res) => {
-    Taro.navigateTo({ url: `/pages/CheckDetails/index?id=${res}&location=${location}` })
-
-  }
-  const goMapInfo = (res) => {
-    Taro.navigateTo({ url: `/pages/CheckMap/index?mapId=${res + 111}` })
-
-  }
-
 
   return (
-
-
     <scroll-view className='scrollView' scrollY style='height: 100%;' >
       <View className='heads-top-box'>
         <View className='heads-top-box-left'>
@@ -132,33 +75,7 @@ export default (props) => {
         </View>
         <View onClick={goToCarsList} className='content-header-box-rightCentent'>更多&gt;&gt;</View>
       </View>
-
-      {
-        carsList.map((item, index) => {
-          return (
-            <View key={index} className='carsListImga-bottom-box'>
-              <Image src={item.thumb} onClick={() => goCarsInfo(item.machineryId)} />
-              <View className='carsListImga-bottom-box-flaxBox'>
-                <View className='carsListImga-bottom-box-flaxBox-liftText'>
-                  <View className='carsListImga-bottom-box-flaxBox-liftText-Titles'>{item.name}</View>
-                  <View className='carsListImga-bottom-box-flaxBox-liftText-price'>{item.price}/<Text>公顷</Text></View>
-                </View>
-                <View className='carsListImga-bottom-box-flaxBox-rightBut'>
-                  <ButtontWX onClick={startReserve} butText='预约' butWidth={80} butHeight={34} butFontSize={19} butBorderRadius={0} />
-                </View>
-              </View>
-              <View className='content-header-box-map' onClick={() => goMapInfo(item.machineryId)}>
-                <View className='content-header-box-map-liftCentent'>
-                  <Image src={addresss} />
-                  <View>距离当前位置公里</View>
-                </View>
-                <View className='content-header-box-map-rightCentent'>进入地图&gt;&gt;</View>
-              </View>
-            </View>
-          )
-        })
-      }
-
+      <CarsListContent carsList={carsList} />
     </scroll-view>
   )
 }

src/pages/index/tabs/HomesCss/style.less

@@ -81,79 +81,3 @@
     color: #666666;
   }
 }
-
-.carsListImga-bottom-box {
-  margin: 30px auto 0 auto;
-  background: #f2f2f2;
-  width: 93vw;
-  > Image {
-    width: 100%;
-    margin: 0 auto;
-  }
-  &-flaxBox {
-    width: 94%;
-    display: flex;
-    align-items: center;
-    margin: 0 auto;
-    margin-top: 40px;
-    margin-bottom: 38px;
-    &-liftText {
-      width: 95%;
-
-      &-Titles {
-        width: 95%;
-
-        text-overflow: ellipsis; //显示...
-        white-space: nowrap; //不换行
-        overflow: hidden;
-        font-size: 36px;
-        font-weight: bold;
-        color: #222222;
-      }
-      &-price {
-        margin-top: 44px;
-        font-size: 44px;
-        font-weight: 800;
-        color: #666666;
-        background: linear-gradient(180deg, #fa7878 0%, #b61515 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        > Text {
-          font-size: 25px;
-        }
-      }
-    }
-    &-rightBut {
-      align-items: center;
-      margin: 0 auto;
-    }
-  }
-  .content-header-box-map {
-    width: 94%;
-
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-bottom: 60px;
-    &-liftCentent {
-      display: flex;
-      align-items: center;
-      > Image {
-        width: 22px;
-        height: 27px;
-      }
-      > View {
-        padding-left: 15px;
-        font-size: 30px;
-        font-weight: 800;
-        color: #222222;
-      }
-    }
-    &-rightCentent {
-      font-size: 30px;
-      font-weight: 500;
-      color: #666666;
-    }
-  }
-}

src/pages/index/tabs/Mine.jsx

@@ -30,16 +30,19 @@ export default (props) => {
 
 
   const userInfo = useMemo(() => {
-    console.log($instance.router.params)
+    console.log($instance.router.params, '$instance.router.params路由')
     if ($instance.router.params.userOk || person.phone) {
       setIsLoginBox(true)
       return { phone: person.phone, nickName: person.nickName }
     }
+
   }, [$instance.router.params, person])
 
 
+
+
   const setAddress = (dd) => {
-    Taro.navigateTo({ url: `/pages/MyAddressInfo/index?id${dd}` })
+    Taro.navigateTo({ url: `/pages/MyAddressList/index?id${dd}` })
 
   }
 
@@ -87,7 +90,7 @@ export default (props) => {
             :
             <>
               <View style={{ backgroundImage: "url(" + require("@/assets/mineImgaes/mineBack.png") + ")" }} className='User-Avatar-background-trueBox'>
-                <View className='setPassword'>修改密码</View>
+                <View className='setPassword'>修改个人信息</View>
                 <Image className='User-Avatar-background-trueBox-userImg' src='https://profile.csdnimg.cn/3/1/5/0_qq_42551866' />
                 <View className='User-Avatar-background-trueBox-name'>
                   <View >{userInfo.nickName}</View>

src/pages/index/tabs/MineCss/style.less

@@ -80,7 +80,7 @@
   .setPassword {
     position: absolute;
     right: 2.5vw;
-    width: 158px;
+    width: 178px;
     height: 54px;
     background: #000000;
     opacity: 0.3;

src/routes.js

@@ -15,9 +15,14 @@ const Pages = [
     page: 'pages/UserLogin/index',
   },
   {
-    title: '我的地址',
-    page: 'pages/MyAddressInfo/index',
+    title: '我的地址列表',
+    page: 'pages/MyAddressList/index',
   },
+  {
+    title: '我的详细地址',
+    page: 'pages/MyAddressList/AddressInfos/index',
+  },
+
   {
     title: '关于我们',
     page: 'pages/AboutUsPage/index',

src/services/address.js

@@ -0,0 +1,11 @@
+
+import request from '@/utils/request'
+
+
+
+/**
+ * banner轮播图
+ * @param {*} data 
+ * @returns 
+ */
+export const getHomeBanner = (data) => request(`/banner`, { data, method: 'get' })

src/services/homes.js

@@ -1,5 +1,8 @@
 
 import request from '@/utils/request'
+
+
+
 /**
  * banner轮播图
  * @param {*} data 
@@ -23,3 +26,14 @@ export const getMachinery = (pram, data) => request(`/machinery?location=${pram}
  */
 export const getMachineryInfo = (pram, data) => request(`/machinery-summary/${pram}`, { data, method: 'get' })
 
+
+
+/**
+ * 农机分类Tab列查询
+ * @param {*} data 
+ * @returns 
+ */
+export const getMachineryType = (pram, data) => request(`/machinery-type`, { data, method: 'get' })
+
+
+

src/utils/request.js

@@ -13,7 +13,7 @@ export default (url, options) => {
   }
 
   const urlWithParams = queryStr ? `${url}?${queryStr}` : url;
-  const nwUrl = `${HOST}/api/wx/${appid}${urlWithParams}`
+  const nwUrl = `${HOST}/api/wx/farmer${urlWithParams}`
 
   const authToken = Taro.getStorageSync('token')
   const tokenHeader = authToken ? { Authorization: authToken } : {}