perf(client): 优化代码

src/PageMine/address/editAddress.vue

@@ -5,30 +5,30 @@
       <view class="f-s-32 text-333 u-m-b-24 text-bold"> 地址信息</view>
       <u--form
         labelPosition="left"
-        :model="model1"
+        :model="userInfo"
         :rules="rules"
         ref="uForm"
         labelWidth="80"
         :labelStyle="labelStyle"
       >
-        <u-form-item label="用户名" prop="userInfo.name" borderBottom required>
+        <u-form-item label="用户名" prop="receiveName" borderBottom required>
           <u--input
-            v-model="model1.userInfo.name"
+            v-model="userInfo.receiveName"
             border="none"
             placeholder="请输入用户名"
           ></u--input>
         </u-form-item>
-        <u-form-item label="联系方式" prop="userInfo.name" borderBottom required>
+        <u-form-item label="联系方式" prop="phone" borderBottom required>
           <u--input
-            v-model="model1.userInfo.name"
+            v-model="userInfo.phone"
             border="none"
             placeholder="请输入联系方式"
           ></u--input>
         </u-form-item>
 
-        <u-form-item label="所属地区" prop="userInfo.sex" borderBottom required>
+        <u-form-item label="所属地区" prop="regionArea" borderBottom required>
           <u--input
-            v-model="model1.userInfo.sex"
+            v-model="userInfo.regionArea"
             disabled
             disabledColor="#ffffff"
             placeholder="请选择所属地区"
@@ -37,15 +37,21 @@
           <u-icon slot="right" name="arrow-right" color="#999999" size="12"></u-icon>
         </u-form-item>
 
-        <u-form-item label="详细地址" prop="userInfo.sex" borderBottom required>
+        <u-form-item label="详细地址" prop="detailAddress" borderBottom required>
           <u--input
-            v-model="model1.userInfo.sex"
+            v-model="userInfo.detailAddress"
             disabled
             disabledColor="#ffffff"
             placeholder="请输入详情地址"
             border="none"
           ></u--input>
-          <u-icon slot="right" name="map" color="#000" size="20"></u-icon>
+          <u-icon
+            slot="right"
+            name="map"
+            color="#000"
+            size="20"
+            @click="orientation"
+          ></u-icon>
         </u-form-item>
 
         <u-form-item>
@@ -57,11 +63,13 @@
       </u--form>
     </base-card>
     <view class="editAddress-bottom">
-      <base-button text="保存" :buttonStyle="customStyle"></base-button>
+      <base-button text="保存" @click="handleSave"></base-button>
     </view>
+    <region-picker :show="show"></region-picker>
   </view>
 </template>
 
+
 <script>
 export default {
   name: 'editAddress',
@@ -76,10 +84,11 @@ export default {
         postCode: '', //城市
         region: '', //区
         detailAddress: '', //详细地址(街道)
+        regionArea: '', //所属地区 页面渲染
       },
-      showSex: false,
+      show: true,
       rules: {
-        'userInfo.name': {
+        receiveName: {
           type: 'string',
           required: true,
           message: '请填写姓名',
@@ -100,17 +109,20 @@ export default {
   onReady() {
     this.$refs.uForm.setRules(this.rules);
   },
-  onShow() {
-    this.init();
+  onShow() {},
+  computed: {
+    labelStyle() {
+      return {
+        height: '50rpx',
+      };
+    },
   },
   methods: {
-    init() {
-      COMMON_API.region().then(res => {
-        console.log(res.data, '0000000000');
-      });
+    orientation() {
+      this.getOrientationInfo();
     },
+    handleSave() {},
   },
-  computed: {},
 };
 </script>
 

src/PageMine/feedback/index.vue

@@ -7,7 +7,7 @@
         labelPosition="top"
         ref="uForm"
         labelWidth="auto"
-        :model="legalInfo"
+        :model="feedbackInfo"
         :rules="rules"
       >
         <base-card marginBottom="24rpx" padding="24rpx">
@@ -21,7 +21,7 @@
             />
           </u-form-item>
           <u-form-item>
-            <upload-img> </upload-img>
+            <upload-img @upload="handleUpdate"> </upload-img>
           </u-form-item>
         </base-card>
         <base-card>
@@ -36,13 +36,16 @@
       </u--form>
     </view>
     <view class="feedback-bottom">
-      <base-button text="提交" @click="handlerSubmitFeedback"></base-button>
+      <base-button
+        text="提交"
+        :loading="loadingShow"
+        @click="handlerSubmitFeedback"
+      ></base-button>
     </view>
   </view>
 </template>
 
 <script>
-// import { getFeedback } from '@/api/client/mine.js';
 import FEEDBACK_API from '@/api/client/feedback.js';
 export default {
   data() {
@@ -53,6 +56,7 @@ export default {
         images: '',
         channel: 0,
       },
+      loadingShow: false,
       rules: {
         content: {
           type: 'string',
@@ -73,10 +77,16 @@ export default {
   methods: {
     // 提交反馈意见
     handlerSubmitFeedback() {
+      this.loadingShow = true;
       this.$refs.uForm.validate().then(res => {
+        console.log(this.feedbackInfo, 'feedbackInfo');
         console.log(res, '点击按钮');
+        this.loadingShow = false;
       });
     },
+    handleUpdate(val) {
+      console.log(val, 'val');
+    },
   },
 };
 </script>

src/api/common.js

@@ -1,10 +1,28 @@
 /* 公共接口 */
 import request from '@/utils/request';
-
+const basePathRegion = '/maintain/region/';
 const COMMON_API = {
-  region: () => {
+  /**
+   * 根据等级查询省市区
+   * @returns
+   */
+  queryByLevel: params => {
+    return request({
+      url: basePathRegion + 'queryByLevel', ///region/query
+      method: 'get',
+      data: params,
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    });
+  },
+  /**
+   * 根据上级id查询省市区
+   * @returns
+   */
+  queryRegion: () => {
     return request({
-      url: '/maintain/common/region/query',
+      url: basePathRegion + 'query',
       method: 'get',
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded',

src/components/region-picker/region-picker.vue

@@ -0,0 +1,72 @@
+<template>
+  <view class="region-picker">
+    <u-picker
+      :show="show"
+      ref="uPicker"
+      :columns="columns"
+      @confirm="confirm"
+      @change="changeHandler"
+    ></u-picker>
+  </view>
+</template>
+
+<script>
+import COMMON_API from '@/api/common.js';
+export default {
+  name: 'region-picker',
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: [
+        ['中国', '美国'],
+        ['深圳', '厦门', '上海', '拉萨'],
+      ],
+      columnData: [
+        ['深圳', '厦门', '上海', '拉萨'],
+        ['得州', '华盛顿', '纽约', '阿拉斯加'],
+      ],
+    };
+  },
+  created() {
+    this.getInitRegion();
+  },
+  methods: {
+    getInitRegion() {
+      COMMON_API.queryByLevel({ level: 1 }).then(res => {
+        console.log(res.data, 'data');
+      });
+    },
+    // getCOMMON_API queryRegion
+    changeHandler(e) {
+      const {
+        columnIndex,
+        value,
+        values, // values为当前变化列的数组内容
+        index,
+        // 微信小程序无法将picker实例传出来，只能通过ref操作
+        picker = this.$refs.uPicker,
+      } = e;
+      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
+      if (columnIndex === 0) {
+        // picker为选择器this实例，变化第二列对应的选项
+        picker.setColumnValues(1, this.columnData[index]);
+      }
+    },
+    // 回调参数为包含columnIndex、value、values
+    confirm(e) {
+      console.log('confirm', e);
+      this.show = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.region-picker {
+}
+</style>

src/components/upload-img/upload-img.vue

@@ -6,7 +6,7 @@
 
 <template>
   <u-upload
-    :fileList="fileList1"
+    :fileList="fileList"
     @afterRead="afterRead"
     @delete="deletePic"
     :multiple="multiple"
@@ -14,8 +14,11 @@
     :accept="accept"
     :deletable="deletable"
     :previewFullImage="previewFullImage"
+    :imageMode="imageMode"
+    :width="width"
+    :height="height"
   >
-    <view class="upload-img direction fl-justify-center">
+    <view class="upload-img direction fl-justify-center" :style="{ width, height }">
       <u--image
         src="/static/components/upload-img.png"
         width="48rpx"
@@ -28,6 +31,7 @@
 
 <script>
 import { uploadFile } from '@/utils/upload.js';
+
 export default {
   name: 'upload-img',
   props: {
@@ -41,7 +45,7 @@ export default {
     },
     maxCount: {
       type: String | Number,
-      default: 1,
+      default: 9,
     },
     previewFullImage: {
       type: Boolean,
@@ -53,12 +57,24 @@ export default {
     },
     multiple: {
       type: Boolean,
-      default: false,
+      default: true,
+    },
+    imageMode: {
+      type: String,
+      default: 'aspectFill',
+    },
+    width: {
+      type: String,
+      default: '195rpx',
+    },
+    height: {
+      type: String,
+      default: '195rpx',
     },
   },
   data() {
     return {
-      fileList1: [],
+      fileList: [],
     };
   },
   methods: {
@@ -66,68 +82,44 @@ export default {
     deletePic(event) {
       this[`fileList${event.name}`].splice(event.index, 1);
     },
-    created() {
-      console.log(fileList1, 'fileList1');
-    },
+
     // 新增图片
     async afterRead(event) {
-      console.log(event.file, 'event.file');
-      /* 当设置 multiple 为 true 时 */
-      uploadFile(event.file.url).then(res => {
-        console.log(res.data, 'res.data');
-        this.fileList1.push(res.data.url);
+      /*  当设置multiple为true时, file为数组格式，否则为对象格式 */
+      let lists = [].concat(event.file);
+
+      let fileListLen = this[`fileList${event.name}`].length;
+      lists.map(item => {
+        this[`fileList${event.name}`].push({
+          ...item,
+          status: 'uploading',
+          message: '上传中',
+        });
       });
-      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
-      // let lists = [].concat(event.file);
-      // let fileListLen = this[`fileList${event.name}`].length;
-      // lists.map(item => {
-      //   this[`fileList${event.name}`].push({
-      //     ...item,
-      //     status: 'uploading',
-      //     message: '上传中',
-      //   });
-      // });
-      // for (let i = 0; i < lists.length; i++) {
-      //   const result = await uploadFile(lists[i].url);
-      //   let item = this[`fileList${event.name}`][fileListLen];
-      //   this[`fileList${event.name}`].splice(
-      //     fileListLen,
-      //     1,
-      //     Object.assign(item, {
-      //       status: 'success',
-      //       message: '',
-      //       url: result,
-      //     }),
-      //   );
-      //   fileListLen++;
-      // }
-    },
 
-    // uploadFile(url) {
-    //   return new Promise((resolve, reject) => {
-    //     let a = uni.uploadFile({
-    //       url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
-    //       filePath: url,
-    //       name: 'file',
-    //       formData: {
-    //         user: 'test',
-    //       },
-    //       success: res => {
-    //         setTimeout(() => {
-    //           resolve(res.data.data);
-    //         }, 1000);
-    //       },
-    //     });
-    //   });
-    // },
+      for (let i = 0; i < lists.length; i++) {
+        const result = await uploadFile(lists[i].url);
+        let item = this[`fileList${event.name}`][fileListLen];
+        this[`fileList${event.name}`].splice(
+          fileListLen,
+          1,
+          Object.assign(item, {
+            status: 'success',
+            message: '',
+            url: result,
+          }),
+        );
+        fileListLen++;
+      }
+      this.$emit('upload', this.fileList);
+      console.log(this.fileList, '图片地址');
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .upload-img {
-  width: 214rpx;
-  height: 210rpx;
   border-radius: 8rpx;
   border: 2rpx dashed #e6e6e6;
 }

src/mixin/index.js

@@ -5,6 +5,7 @@
  **/
 
 import { mapGetters } from 'vuex';
+import { getCurrentLocation } from '@/api/client/home';
 
 const globalMixins = {
   data() {
@@ -13,6 +14,7 @@ const globalMixins = {
       topIconDistance: '',
       statusBarHeight: '', //状态栏高度
       navBarHeight: '', //导航栏高度
+      mapLocationInfo: {}, // 地图信息
     };
   },
   computed: {
@@ -46,6 +48,23 @@ const globalMixins = {
         },
       });
     },
+    /* 获取当前定位的信息 -- 用于将经纬度地区传给后端 */
+    getOrientationInfo() {
+      uni.chooseLocation({
+        type: 'gcj02',
+        success: res => {
+          let { longitude, latitude } = res;
+
+          let point = `${latitude},${longitude}`;
+          getCurrentLocation({ point }).then(res => {
+            if (res.code === 'OK') {
+              this.mapLocationInfo = res.data;
+              console.log(res.data, '当前地址信息');
+            }
+          });
+        },
+      });
+    },
   },
 };
 

src/pages/home/home copy.vue

@@ -1,386 +0,0 @@
-<template>
-  <view class="container">
-    <view class="container-top-box">
-      <view class="top-title">
-        <view class="address" @click.stop="manualGetLocation">
-          <span>{{ nowAddress }}</span>
-          <u-icon name="arrow-down-fill" color="#333333" size="16"></u-icon>
-        </view>
-        <view class="title">车旅程</view>
-        <view></view>
-      </view>
-      <view class="top-search">
-        <u-search
-          placeholder="请输入搜索内容"
-          :showAction="false"
-          v-model="keyword"
-          @click="$u.route('/pagesHome/homeSearch/index')"
-          bgColor="#fff"
-          :disabled="true"
-        />
-      </view>
-
-      <view class="top-swiper-box">
-        <u-swiper :list="swiperUrlList" @click="handlerSwiperSkip" indicator circular />
-      </view>
-    </view>
-
-    <view class="container-tabbar-box">
-      <view class="tabar-box">
-        <view
-          class="tabbar-item"
-          v-for="(item, index) of categories"
-          :key="index"
-          @tap="handleMenuClick(item)"
-        >
-          <view class="item-img">
-            <image class="img" :src="item.icon"></image>
-          </view>
-          <view class="item-name">{{ item.name }}</view>
-        </view>
-      </view>
-    </view>
-
-    <view class="container-list-box">
-      <view class="item-box">
-        <view class="item-top">
-          <view class="top-title">热门推荐</view>
-          <view class="top-more" @click="$u.route('/pagesHome/home/popularRecommend')">
-            <span>查看更多</span>
-            <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
-          </view>
-        </view>
-        <view class="item-list">
-          <view
-            class="item"
-            v-for="(item, index) in homeData.recommends"
-            :key="item.id"
-            @click="$u.route(`/pagesHome/marketer/index?id=${item.id}`)"
-          >
-            <hot-item v-if="index < 4" :item="item"></hot-item>
-          </view>
-        </view>
-        <u-empty
-          v-if="!homeData.recommends"
-          mode="data"
-          icon="http://cdn.uviewui.com/uview/empty/data.png"
-        >
-        </u-empty>
-      </view>
-
-      <view class="item-box">
-        <view class="item-top">
-          <view class="top-title">附近商家</view>
-          <view class="top-more" @click="$u.route('/pagesHome/home/nearbyBusiness')">
-            <span>查看更多</span>
-            <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
-          </view>
-        </view>
-        <view class="item-list">
-          <view
-            class="item"
-            v-for="(item, index) in homeData.nears"
-            :key="item.id"
-            @click="$u.route(`/pagesHome/marketer/index?id=${item.id}`)"
-          >
-            <recommend-item v-if="index < 4" :item="item"></recommend-item>
-          </view>
-        </view>
-        <u-empty
-          v-if="!homeData.nears"
-          mode="data"
-          icon="http://cdn.uviewui.com/uview/empty/data.png"
-        >
-        </u-empty>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-import { getCurrentLocation, getHomePageApi, getSwiperListApi } from '@/api/client/home';
-import { getMapLocation } from '@/utils/mapUtil.js';
-import { inviteBind } from '@/api/client/mine.js';
-import RecommendItem from './components/RecommendItem.vue';
-import HotItem from './components/HotItem.vue';
-import { mapGetters } from 'vuex';
-export default {
-  components: { RecommendItem, HotItem },
-  data() {
-    return {
-      list: [],
-      keyword: '',
-      swiperUrlList: [], // 轮播图url列表
-      swiperList: [],
-      homeData: {
-        categories: [],
-        nears: [],
-        recommends: [],
-      },
-      queryParams: {
-        longitude: '',
-        latitude: '',
-        region: '',
-      },
-      nowAddress: '', //当前地址
-    };
-  },
-  computed: {
-    ...mapGetters(['location', 'userId', 'invitationCode']),
-    categories() {
-      let initData = this.homeData.categories.map(item => {
-        if (!item.icon) {
-          item.icon = 'level';
-        }
-        return item;
-      });
-      let result =
-        initData.length > 14
-          ? initData.splice(0, 14).concat([
-              {
-                id: 'all',
-                icon: 'grid-fill',
-                name: '全部',
-                type: {
-                  code: 'ALL',
-                  description: '全部',
-                },
-              },
-            ])
-          : initData.push({
-              id: 'all',
-              icon: 'grid-fill',
-              name: '全部',
-            });
-      return result;
-    },
-  },
-  onShow() {
-    // 如果 invitationCode 存在且不等于特殊值时执行代码
-    if (this.invitationCode) {
-      let params = {
-        userId: this.invitationCode,
-        targetId: this.userId,
-        type: 1,
-      };
-      inviteBind(params).then(res => {
-        if (res && res.code == 200) {
-          uni.showToast({
-            title: '您已成功加入团队',
-            icon: 'success',
-            dration: 2000,
-          });
-        }
-        // console.log("绑定邀请码结果：", res);
-      });
-      this.$store.commit('SET_INVITATIONCODE', '');
-    } else {
-    }
-  },
-  mounted() {
-    this.getSwiperList();
-    // 页面显示时  获取当前零维度
-    uni.getLocation({
-      type: 'gcj02',
-      success: res => {
-        let { longitude, latitude } = res;
-        this.queryParams.longitude = longitude;
-        this.queryParams.latitude = latitude;
-        // getCurrentLocation 获取当前编码region
-        this.handlerGetRegion(longitude, latitude);
-      },
-      fail: () => {
-        this.manualGetLocation();
-      },
-    });
-  },
-  methods: {
-    // 获取当前编码region
-    handlerGetRegion(longitude, latitude) {
-      let point = `${latitude},${longitude}`;
-      getCurrentLocation({
-        point,
-      }).then(res => {
-        let { city, district, id } = res.data;
-        this.queryParams.region = res.data.id;
-        if (district) {
-          this.nowAddress = district.name;
-        } else if (city) {
-          this.nowAddress = city.name;
-        } else {
-          this.nowAddress = '地图';
-        }
-        this.getHomeData(this.queryParams);
-        this.$store.commit('SET_LOCATION', {
-          longitude: longitude,
-          latitude: latitude,
-          region: res.data.id,
-          address: res.data.name,
-        });
-      });
-    },
-    /* 轮播图 */
-    getSwiperList() {
-      getSwiperListApi().then(res => {
-        this.swiperList = res.data;
-        res.data.map(rs => {
-          this.swiperUrlList.push(rs.viewUrl);
-        });
-      });
-    },
-    // 获取首页数据
-    getHomeData(location) {
-      getHomePageApi(location).then(res => {
-        this.homeData = res.data;
-        // 将分类数据做缓存处理
-        this.$store.commit('SET_CATEGORIES', this.homeData.categories);
-      });
-    },
-    // 手动选择城市
-    manualGetLocation() {
-      uni.chooseLocation({
-        success: res => {
-          let { longitude, latitude } = res;
-          this.queryParams.longitude = longitude.toFixed(5);
-          this.queryParams.latitude = latitude.toFixed(5);
-          this.handlerGetRegion(longitude.toFixed(5), latitude.toFixed(5));
-        },
-        fail: err => {},
-      });
-    },
-    // 点击swiper跳转
-    handlerSwiperSkip(e) {},
-    // 点击菜单
-    handleMenuClick(item) {
-      if (item.name === '全部') {
-        uni.$u.route('/pagesHome/category/index');
-      } else {
-        uni.navigateTo({
-          url: `/pagesHome/storeList/index?id=${item.id}&name=${item.name}`,
-        });
-      }
-    },
-
-    /* 询价 */
-    btnClick() {
-      uni.navigateTo({
-        url: `/pages/client/clientUser/inquiry`,
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.container {
-  font-size: 28rpx;
-  min-height: calc(100vh - 30rpx);
-  background-color: #f9f9f9;
-  padding-bottom: 30rpx;
-  .container-top-box {
-    padding: 108rpx 32rpx 34rpx;
-    box-sizing: border-box;
-    background: linear-gradient(180deg, #d4e3ff 0%, #f0f1f9 53%, #f9f9f9);
-
-    .top-title {
-      display: grid;
-      grid-template-columns: 33% 33% 33%;
-      justify-content: space-between;
-      margin-bottom: 34rpx;
-      align-items: center;
-
-      .address {
-        display: flex;
-        color: #333333;
-      }
-
-      .title {
-        color: #0c1223;
-        font-weight: bold;
-        font-size: 34rpx;
-        text-align: center;
-      }
-    }
-
-    .top-search {
-      margin-bottom: 34rpx;
-    }
-
-    .top-swiper-box {
-      width: 100%;
-      height: 256rpx;
-      border-radius: 20rpx;
-      background-color: #fff;
-    }
-  }
-
-  .container-tabbar-box {
-    padding: 0 32rpx 0;
-
-    .tabar-box {
-      width: 100%;
-      border-radius: 20rpx;
-      padding: 12rpx 34rpx 32rpx;
-      box-sizing: border-box;
-      background-color: #fff;
-      display: grid;
-      grid-template-columns: repeat(5, 18%);
-      justify-content: space-between;
-      grid-gap: 24rpx 0;
-      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
-      .tabbar-item {
-        text-align: center;
-
-        .item-img {
-          .img {
-            width: 56rpx;
-            height: 56rpx;
-          }
-        }
-
-        .item-name {
-          margin-top: 16rpx;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-
-  .container-list-box {
-    padding: 0 32rpx 0;
-    box-sizing: border-box;
-    .item-box {
-      margin-top: 32rpx;
-
-      .item-top {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 32rpx;
-        .top-title {
-          color: #0c1223;
-          font-size: 34rpx;
-          font-weight: bold;
-        }
-
-        .top-more {
-          display: flex;
-          color: #999999;
-          font-size: 24rpx;
-          align-items: center;
-        }
-      }
-      .item-list {
-        display: grid;
-        grid-template-columns: repeat(2, 47.81%);
-        justify-content: space-between;
-        .item {
-          border-radius: 16rpx;
-        }
-      }
-    }
-  }
-}
-</style>

src/pages/home/index.vue

@@ -92,8 +92,10 @@
 <script>
 import { getHomePageApi, getSwiperListApi } from '@/api/client/home';
 import { inviteBind } from '@/api/client/mine.js';
+import HomeStore from './HomeStore.vue';
 export default {
   name: 'home',
+  components: { HomeStore },
   data() {
     return {
       list: [],
@@ -167,7 +169,6 @@ export default {
             this.getHomeData(this.params);
           });
         },
-        fail: err => {},
       });
     },
 

src/pagesHome/homeSearch/index.vue

@@ -133,14 +133,18 @@ export default {
 
     // 点击搜索按钮
     handlerSearchBtn() {
-      let params = {
-        name: this.search_text,
-      };
-      this.search_list.unshift(params);
-      uni.setStorageSync('searchItem', this.search_list);
-      uni.navigateTo({
-        url: `/pagesHome/storeList/index?keyword=${this.search_text}`,
-      });
+      if (this.search_text) {
+        let params = {
+          name: this.search_text,
+        };
+        this.search_list.unshift(params);
+        uni.setStorageSync('searchItem', this.search_list);
+        uni.navigateTo({
+          url: `/pagesHome/storeList/index?keyword=${this.search_text}`,
+        });
+      } else {
+        this.$u.toast('搜索内容不能为空');
+      }
     },
 
     // 删除搜索记录按钮

src/pagesHome/storeList/index.vue

@@ -1,150 +1,34 @@
 <template>
-  <view class="container" @click="filterShow = false">
+  <view class="store-list">
     <page-navbar bgColor="#fff" title="商家列表"></page-navbar>
-
-    <view class="top-box">
-      <view class="search-box">
-        <view class="search-left">
-          <u-search
-            placeholder="请输入搜索内容"
-            :showAction="false"
-            v-model="sellerListParams.keyword"
-          />
-        </view>
-        <view class="search-right" @click="handlerSearch">搜索</view>
-      </view>
-      <view class="filter-box">
-        <view class="filter-item">
-          <view class="fiter2" @tap.stop="handlerSelectAllFilter(2)">
-            <span>{{ sortCondition }}</span>
-            <u-icon name="arrow-down-fill"></u-icon>
-          </view>
-          <view class="fiter1" @tap.stop="handlerSelectMenu(1)">
-            <span>筛选</span>
-            <u-icon name="arrow-down-fill"></u-icon>
-          </view>
-        </view>
-        <view class="filter-drapdown" v-show="filterShow">
-          <view class="filter1" v-show="filterType == 1">
-            <view class="scroll-box">
-              <scroll-view
-                :scroll-top="scrollTop"
-                scroll-y="true"
-                class="filter-menu-left scroll-Y"
-                @scrolltoupper="upper"
-                @scrolltolower="lower"
-                @scroll="scroll"
-              >
-                <view
-                  id="demo1"
-                  class="scroll-view-item uni-bg-red menu-item"
-                  :class="current == index ? 'act-left-menu' : ''"
-                  v-for="(item, index) of menuList"
-                  :key="index"
-                  @click.stop="handlerSelectLMenu(item, index)"
-                  >{{ item.name }}
-                </view>
-              </scroll-view>
-              <scroll-view
-                :scroll-top="scrollTop"
-                scroll-y="true"
-                class="filter-menu-right scroll-Y"
-                @scrolltoupper="upper"
-                @scrolltolower="lower"
-                @scroll="scroll"
-              >
-                <view
-                  id="demo1"
-                  class="scroll-view-item uni-bg-red"
-                  v-for="item of 15"
-                  :key="item"
-                >
-                  <view class="menu-right-title">洗车</view>
-                  <view class="menu-right-contentbox">
-                    <span class="menu-item" v-for="item of 7" :key="item">测试</span>
-                  </view>
-                </view>
-              </scroll-view>
-            </view>
-          </view>
-          <view class="filter2" v-show="filterType == 2">
-            <view @tap="sellerListFilter(1)">离我最近</view>
-            <view @tap="sellerListFilter(2)">好评优先</view>
-            <view @tap="sellerListFilter(3)">销量优先</view>
-          </view>
-        </view>
+    <view class="fl-flex fl-align-center store-list-search">
+      <u-search
+        placeholder="请输入搜索内容"
+        :showAction="false"
+        v-model="sellerListParams.keyword"
+        :inputStyle="inputStyle"
+      />
+      <view @click="handlerSearch" class="f-s-28 u-m-l-28" style="color: #215ebe">
+        搜索
       </view>
     </view>
 
-    <view class="content-box">
-      <view
-        class="content-item"
-        v-for="(item, index) in sellerList"
-        :key="index"
-        @tap="goSellerDetail(item.id)"
-      >
-        <view class="item-left">
-          <image class="img" :src="item.logo" mode="aspectFit"></image>
-          <!-- <image class="img" :src="error || !loaded ? 'https://cdn.uviewui.com/uview/album/10.jpg' : item.logo"
-            mode="scaleToFill"></image> -->
-        </view>
-        <view class="item-right">
-          <view>
-            <view class="item-title">
-              <view class="tag">常去</view>
-              <view class="title">{{ `${item.name}(${item.address})` }}</view>
-            </view>
-            <view class="str-box">
-              <view class="srt-left">
-                <u-rate activeColor="#fc8400" :value="item.score" readonly></u-rate>
-                <text>{{ item.score }}</text>
-              </view>
-              <view class="border"></view>
-              <!-- <view class="srt-right">{{ item.sale }}单</view> -->
-              <view class="srt-right"></view>
-            </view>
-          </view>
+    <view class="fl-flex fl-align-center store-list-sort">
+      <view class="f-s-28 text-333 u-m-r-8">综合排序</view>
+      <u-icon name="arrow-down" color="#616570" size="12"></u-icon>
+    </view>
 
-          <view class="bottom-textbox">
-            <view class="bottom-left">宝安中心区美容洗车</view>
-            <view class="bottom-right">{{ (item.distance / 1000).toFixed(2) }}KM</view>
-          </view>
-        </view>
-      </view>
-      <u-empty
-        v-if="sellerList.length == 0"
-        mode="data"
-        icon="http://cdn.uviewui.com/uview/empty/data.png"
-      ></u-empty>
+    <view class="store-list-main">
+      <base-list :list="sellerList" @click="handleMerchant"></base-list>
     </view>
   </view>
 </template>
 
 <script>
 import { getSellerList } from '@/api/client/business.js';
-import { mapGetters } from 'vuex';
-
 export default {
   data() {
     return {
-      filterShow: false,
-      filterType: 0,
-      sortCondition: '综合排序',
-      current: 0,
-      menuList: [
-        {
-          name: '汽车',
-        },
-        {
-          name: '汽车2',
-        },
-        {
-          name: '汽车3',
-        },
-        {
-          name: '汽车4',
-        },
-      ],
       sellerList: [],
       sellerListParams: {
         longitude: '',
@@ -158,7 +42,6 @@ export default {
     };
   },
   onLoad(option) {
-    console.log(option, 'loading');
     if (option.id) {
       this.sellerListParams.categoryId = option.id;
     }
@@ -167,302 +50,52 @@ export default {
     }
   },
   mounted() {
-    let { latitude, longitude, region } = this.location;
-    this.sellerListParams.latitude = latitude;
-    this.sellerListParams.longitude = longitude;
-    this.sellerListParams.region = region;
-    console.log(this.sellerListParams, ' this.sellerListParams');
-    this.getData();
+    this.sellerListParams = Object.assign(this.sellerListParams, { ...this.location });
+    this.getInitDataList();
   },
   computed: {
-    ...mapGetters(['location']),
+    inputStyle() {
+      return {
+        height: '72rpx',
+      };
+    },
   },
   methods: {
-    // 点击综合排序
-    handlerSelectAllFilter(e) {
-      this.filterShow = true;
-      this.filterType = 2;
-    },
-    // 排序条件
-    sellerListFilter(e) {
-      switch (e) {
-        case 1:
-          this.sortCondition = '离我最近';
-          this.sellerListParams.sort = 'NEAREST';
-          break;
-        case 2:
-          this.sortCondition = '好评优先';
-          this.sellerListParams.sort = 'FAVORITE';
-          break;
-        case 3:
-          this.sortCondition = '销量优先';
-          this.sellerListParams.sort = 'BESTSELLING';
-          break;
-        default:
-          break;
-      }
-      this.getData();
-    },
     // 获取初始化列表
-    getData() {
-      getSellerList(this.sellerListParams)
-        .then(res => {
-          this.sellerList = res.data;
-        })
-        .catch(err => {});
+    getInitDataList() {
+      getSellerList(this.sellerListParams).then(res => {
+        this.sellerList = res.data || [];
+      });
     },
     // 点击进入详情
-    goSellerDetail(id) {
+    handleMerchant(val) {
       uni.navigateTo({
-        url: `/pagesHome/category/categoryStoreList?id=${id}`,
+        url: `/pagesHome/marketer/index?id=${val.id}`,
       });
     },
-    //
-    handlerSelectMenu(e) {
-      // uni.navigateTo({
-      // 	url:'/pages/client/clientPackage/category'
-      // })
-      // this.filterShow = true;
-      // this.filterType = 1;
-    },
-    // 选择左侧菜单
-    handlerSelectLMenu(item, index) {
-      this.current = index;
-    },
-    scroll() {},
-    lower() {},
-    upper() {},
-    // 搜索
+    // 搜索列表
     handlerSearch() {
-      this.getData();
+      this.getInitDataList();
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.container {
+.store-list {
   min-height: 100vh;
-  background-color: #f9f9f9;
-
-  .top-box {
-    width: 100%;
+  .store-list-search {
+    padding: 20rpx 32rpx;
     background-color: #fff;
-    padding: 10rpx 20rpx;
-    box-sizing: border-box;
-
-    .search-box {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-
-      .search-left {
-        width: 80%;
-      }
-
-      .search-right {
-        text-align: center;
-      }
-    }
-
-    .filter-box {
-      margin-top: 20rpx;
-
-      .filter-item {
-        display: flex;
-        justify-content: space-between;
-
-        .fiter1,
-        .fiter2 {
-          display: flex;
-          align-items: center;
-        }
-
-        .filter-l {
-          width: 200rpx;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .fiter1 {
-          color: #808080;
-          font-size: 24rpx;
-        }
-      }
-
-      .filter-drapdown {
-        position: fixed;
-        left: 0;
-        width: 100%;
-        background-color: #fff;
-        // height: 300rpx;
-        z-index: 999;
-        box-shadow: 0 10rpx 20rpx -5rpx rgba(0, 0, 0, 0.2);
-
-        .filter1 {
-          .scroll-box {
-            display: flex;
-            max-height: 1200rpx;
-
-            .filter-menu-left {
-              width: 30%;
-              background-color: #ebebeb;
-              overflow-y: scroll;
-
-              .menu-item {
-                width: 100%;
-                height: 100rpx;
-                text-align: center;
-                line-height: 100rpx;
-                font-size: 30rpx;
-                background-color: #ebebeb;
-                color: #5a5a5a;
-              }
-
-              .act-left-menu {
-                background-color: #fff;
-                color: #5992bb;
-                border-right: 8rpx solid #5992bb !important;
-              }
-            }
-
-            .filter-menu-right {
-              background-color: #fff;
-              padding: 10rpx 20rpx;
-              box-sizing: border-box;
-              width: 70%;
-              overflow-y: scroll;
-
-              .menu-right-title {
-                font-size: 30rpx;
-                color: #000;
-                margin-bottom: 10rpx;
-              }
-
-              .menu-right-contentbox {
-                padding: 0 0 0 30rpx;
-                display: flex;
-                justify-content: left;
-                flex-wrap: wrap;
-
-                .menu-item {
-                  // width: 100rpx;
-                  padding: 0 20rpx;
-                  height: 40rpx;
-                  background-color: #cccccc;
-                  color: #000;
-                  text-align: center;
-                  line-height: 40rpx;
-                  margin: 10rpx 20rpx;
-                }
-              }
-            }
-          }
-        }
-
-        .filter2 {
-          padding: 20rpx 50rpx;
-          box-sizing: border-box;
-
-          view {
-            margin: 30rpx 0;
-          }
-        }
-      }
-    }
+    height: 72rpx;
+    line-height: 72rpx;
   }
-
-  .content-box {
-    width: 100%;
-
-    .content-item {
-      background-color: #fff;
-      padding: 10rpx 20rpx;
-      box-sizing: border-box;
-      margin: 10rpx 0;
-      display: flex;
-
-      .item-left {
-        margin-right: 10rpx;
-
-        .img {
-          width: 200rpx;
-          height: 200rpx;
-          border-radius: 10rpx;
-        }
-      }
-
-      .item-right {
-        height: 200rpx;
-        align-content: space-between;
-
-        .item-title {
-          display: flex;
-          align-items: center;
-
-          .tag {
-            width: 80rpx;
-            height: 46rpx;
-            line-height: 35rpx;
-            padding: 4rpx;
-            font-size: 22rpx;
-            box-sizing: border-box;
-            background-color: #f6e7d4;
-            color: #f99a47;
-            border: 2rpx solid #f99a47;
-            text-align: center;
-            // align-items: center;
-            margin-right: 10rpx;
-          }
-
-          .title {
-            width: 85%;
-            font-size: 30rpx;
-            color: #000;
-            font-weight: bold;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-          }
-        }
-
-        .str-box {
-          display: flex;
-          margin-top: 10rpx;
-
-          .srt-left {
-            display: flex;
-            color: #fc8400;
-          }
-
-          .border {
-            border-left: 2rpx solid #cfcfcf;
-            margin: 0 20rpx;
-          }
-
-          .srt-right {
-          }
-        }
-
-        .bottom-textbox {
-          display: flex;
-          justify-content: space-between;
-          font-size: 26rpx;
-          margin-top: 40rpx;
-
-          .bottom-left {
-            color: #c7c7c7;
-          }
-
-          .bottom-right {
-            color: #000;
-          }
-        }
-      }
-    }
+  .store-list-sort {
+    padding: 0 32rpx;
+    background-color: #fff;
+  }
+  .store-list-main {
+    padding: 24rpx 32rpx;
   }
 }
 </style>

src/utils/map.js

@@ -0,0 +1,63 @@
+import { getCurrentLocation } from '@/api/client/home';
+
+export function getMapLocation() {
+  uni.chooseLocation({
+    success: res => {
+      console.log(res);
+      // this.getRegionFn(res);
+    },
+    fail: () => {
+      // 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
+      uni.getSetting({
+        success: res => {
+          console.log(res);
+          var status = res.authSetting;
+          if (!status['scope.userLocation']) {
+            // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
+            uni.showModal({
+              title: '是否授权当前位置',
+              content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
+              success: tip => {
+                if (tip.confirm) {
+                  // 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
+                  uni.openSetting({
+                    success: data => {
+                      // 如果用户授权了地理信息在，则提示授权成功
+                      if (data.authSetting['scope.userLocation'] === true) {
+                        uni.showToast({
+                          title: '授权成功',
+                          icon: 'success',
+                          duration: 1000,
+                        });
+                        // 授权成功后，然后再次chooseLocation获取信息
+                        uni.chooseLocation({
+                          success: res => {
+                            console.log('详细地址', res);
+                            // this.getRegionFn(res);
+                          },
+                        });
+                      } else {
+                        uni.showToast({
+                          title: '授权失败',
+                          icon: 'none',
+                          duration: 1000,
+                        });
+                      }
+                    },
+                  });
+                }
+              },
+            });
+          }
+        },
+        fail: res => {
+          uni.showToast({
+            title: '调用授权窗口失败',
+            icon: 'none',
+            duration: 1000,
+          });
+        },
+      });
+    },
+  });
+}

src/utils/mapUtil.js

@@ -1,61 +0,0 @@
- export function getMapLocation(){
-	 	uni.chooseLocation({
-	 		success:(res)=> {
-	 			console.log(res);
-	 			// this.getRegionFn(res);
-	 		},
-	 		fail:()=>{
-	 			// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
-	 			uni.getSetting({
-	 				success: (res) => {
-	 					console.log(res);
-	 					var status = res.authSetting;
-	 					if(!status['scope.userLocation']){
-	 					// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
-	 						uni.showModal({
-	 							title:"是否授权当前位置",
-	 							content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
-	 							success:(tip)=>{
-	 								if(tip.confirm){
-	 								// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
-	 									uni.openSetting({
-	 										success:(data)=>{
-	 										// 如果用户授权了地理信息在，则提示授权成功
-	 											if(data.authSetting['scope.userLocation']===true){
-	 												uni.showToast({
-	 													title:"授权成功",
-	 													icon:"success",
-	 													duration:1000
-	 												})
-	 												// 授权成功后，然后再次chooseLocation获取信息
-	 												uni.chooseLocation({
-	 													success: (res) => {
-	 														console.log("详细地址",res);
-	 														// this.getRegionFn(res);
-	 													}
-	 												})
-	 											}else{
-	 												uni.showToast({
-	 													title:"授权失败",
-	 													icon:"none",
-	 													duration:1000
-	 												})
-	 											}
-	 										}
-	 									})
-	 								}
-	 							}
-	 						})
-	 					}
-	 				},
-	 				fail: (res) => {
-	 					uni.showToast({
-	 						title:"调用授权窗口失败",
-	 						icon:"none",
-	 						duration:1000
-	 					})
-	 				}
-	 			})
-	 		}
-	 	});
- }