MrShi
7 小时以前 ef46d13d5fa70d1c94f25de294f5ed177b751234
mini-program/pages/index/index.vue
@@ -1,26 +1,42 @@
<template>
   <view class="index">
      <view class="head" :style="{ height: 'calc(' + (navHeight + statusbarHeight + 'px + 248rpx)') }">
         <view :style="{ width: '100%', height: navHeight + statusbarHeight + 'px' }"></view>
         <view class="head-bar" :style="{ height: navHeight + statusbarHeight + 'px' }">
            <view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
            <view class="head-bar-nav" :style="{ height: navHeight + 'px' }" @click="openLoacing">
               <image src="/static/icon/home_ic_location@2x.png" mode="widthFix"></image>
               <text>莲花科技创新产业园F座</text>
               <text>{{position.formatted_addresses.recommend || '点击定位'}}</text>
               <u-icon name="arrow-right" color="#222222" size="13"></u-icon>
            </view>
         </view>
         <view class="search" @click="jumpSearch">
            <u-search placeholder="请输入商品名称搜索" disabled height="36" searchIconColor="#999999" borderColor="#eeeeee"
            <u-search placeholder="请输入商   品名称搜索" disabled height="36" searchIconColor="#999999" borderColor="#eeeeee"
               bgColor="rgba(255,255,255,0.9)" :showAction="false" />
         </view>
         <view class="banner">
            <u-swiper :list="list" keyName="imgurl" height="150"></u-swiper>
            <u-swiper :list="list" keyName="imgurl" height="150" indicator indicatorMode="dot" @click="jumpBanner"></u-swiper>
         </view>
         <u-scroll-list indicatorActiveColor="#004096">
         <swiper class="cate" @change="changeCate">
            <swiper-item v-for="(item, index) in labels" :key="index">
               <view class="cate-list">
                  <view class="cate-item" v-for="(child, a) in item" :key="a" @click="jumpSearch1(child, 1)">
                     <view class="cate-item-image">
                        <image :src="child.imgUrl" mode="widthFix"></image>
                     </view>
                     <text>{{child.name}}</text>
                  </view>
                  <view style="width: 25%; height: 0;"></view>
                  <view style="width: 25%; height: 0;"></view>
               </view>
            </swiper-item>
         </swiper>
         <view class="cate-dian">
            <view :class="cateIndex === index ? 'cate-dian-item active' : 'cate-dian-item'" v-for="(item, index) in labels" :key="index"></view>
         </view>
         <!-- <u-scroll-list indicatorActiveColor="#004096">
            <view class="scroll-list">
               <view class="scroll-list__line" v-for="(item, index) in labels" :key="index">
                  <view class="cate-item" v-for="(child, index) in item" :key="index">
                  <view class="cate-item" v-for="(child, a) in item" :key="a" @click="jumpSearch1(child, 1)">
                     <view class="cate-item-image">
                        <image :src="child.imgUrl" mode="widthFix"></image>
                     </view>
@@ -28,38 +44,55 @@
                  </view>
               </view>
            </view>
         </u-scroll-list>
         </u-scroll-list> -->
         <view class="title">
            <view class="title-left">适用品牌</view>
         </view>
         <u-scroll-list indicatorActiveColor="#004096">
         <swiper class="pingpai" @change="changeBrand">
            <swiper-item v-for="(item, index) in brand" :key="index">
               <view class="pingpai-list">
                  <view class="pingpai-item" v-for="(child, a) in item" :key="a" @click="jumpSearch1(child, 2)">
                     <view class="pingpai-item-image">
                        <image :src="child.imgUrl" mode="widthFix"></image>
                     </view>
                     <text>{{child.name}}</text>
                  </view>
                  <view style="width: 25%; height: 0;"></view>
                  <view style="width: 25%; height: 0;"></view>
               </view>
            </swiper-item>
         </swiper>
         <view class="cate-dian">
            <view :class="brandIndex === index ? 'cate-dian-item active' : 'cate-dian-item'" v-for="(item, index) in brand" :key="index"></view>
         </view>
         <!-- <u-scroll-list indicatorActiveColor="#004096">
            <view class="scroll-list" style="padding: 0;">
               <view class="scroll-list__line" v-for="(item, index) in brand" :key="index">
                  <view class="cate-item1" v-for="(child, index) in item" :key="index">
                  <view class="cate-item1" v-for="(child, a) in item" :key="a" @click="jumpSearch1(child, 2)">
                     <image :src="child.imgUrl" mode="widthFix"></image>
                     <text>{{child.name}}</text>
                  </view>
               </view>
            </view>
         </u-scroll-list>
         </u-scroll-list> -->
         <view class="title">
            <view class="title-left">品质专区</view>
            <view class="title-right">
            <view class="title-right" @click="toZhuanqu">
               <text>更多</text>
               <u-icon name="arrow-right" color="#AAAAAA" size="10"></u-icon>
            </view>
         </view>
         <view class="quality">
            <view class="quality-item" @click="jumpShopZ(specialZone[0])">
               <image class="quality-item-image" :src="specialZone[0].imgUrl" mode="widthFix"></image>
               <image class="quality-item-image" :src="specialZone[0].imgUrl || '/static/icon/default2.png'" mode="widthFix"></image>
            </view>
            <view style="width: 22rpx; height: 100%;"></view>
            <view class="quality-item">
               <view class="quality-item-row" @click="jumpShopZ(specialZone[1])">
                  <image class="quality-item-row-image" :src="specialZone[1].imgUrl" mode="widthFix"></image>
                  <image class="quality-item-row-image" :src="specialZone[1].imgUrl || '/static/icon/default2.png'" mode="widthFix"></image>
               </view>
               <view class="quality-item-row" @click="jumpShopZ(specialZone[2])">
                  <image class="quality-item-row-image" :src="specialZone[2].imgUrl" mode="widthFix"></image>
                  <image class="quality-item-row-image" :src="specialZone[2].imgUrl || '/static/icon/default2.png'" mode="widthFix"></image>
               </view>
            </view>
         </view>
@@ -67,9 +100,9 @@
            <view class="title-left">精选商品</view>
         </view>
         <view class="commodity">
            <view class="commodity-item" v-for="(item, i) in goodsList" :key="i">
            <view class="commodity-item" v-for="(item, i) in goodsList" :key="i" @click="jumpDetails(item.id)">
               <view class="commodity-item-image">
                  <image :src="item.imgurl" mode="widthFix"></image>
                  <image :src="item.imgurl || '/static/icon/default2.png'" mode="widthFix"></image>
               </view>
               <view class="commodity-item-box">
                  <view class="commodity-item-box-title">
@@ -86,13 +119,13 @@
                  </view>
                  <view class="commodity-item-shou">
                     <text>已售{{item.saleNum + item.realSaleNum}}</text>
                     <view class="commodity-item-shou-add">+</view>
                     <view class="commodity-item-shou-add" @click.stop="addCard(item)">+</view>
                  </view>
               </view>
            </view>
         </view>
      </view>
      <view class="dingwei" v-if="!position">
      <view class="dingwei" v-if="isShow">
         <view class="dingwei-left">
            <text>未授权定位</text>
            <text>我们无法获得您当前位置信息为您推荐附近经销商</text>
@@ -114,7 +147,7 @@
         Login
      },
      computed: {
         ...mapState(['navHeight', 'statusbarHeight', 'position'])
         ...mapState(['navHeight', 'statusbarHeight', 'position', 'userInfo'])
      },
      data() {
         return {
@@ -130,14 +163,17 @@
            specialZone: [],
            goodsList: [],
            page: 1,
            next: true
            next: true,
            isShow: false,
            cateIndex: 0,
            brandIndex: 0,
         }
      },
      async onLoad() {
         await this.$onLaunched;
         // this.$nextTick(() => {
         //    this.$refs.loginRef.open()
         // })
         if (!this.position) {
            this.isShow = true
         }
         this.getBanner()
         this.getLabels()
         this.getGoodsList()
@@ -146,6 +182,57 @@
         this.getGoodsList()
      },
      methods: {
         changeCate(e) {
            this.cateIndex = e.detail.current
         },
         changeBrand(e) {
            this.brandIndex = e.detail.current
         },
         jumpBanner(e) {
            // 外链
            if (this.list[e].type == 1 && this.list[e].content) {
               uni.navigateTo({
                  url: '/pagesA/pages/webview/webview?url=' + this.list[e].content
               })
            // 富文本
            } else if (this.list[e].type == 0 && this.list[e].content) {
               uni.setStorageSync('fuwenben', this.list[e].content);
               uni.navigateTo({
                  url: '/pagesA/pages/richText/richText'
               })
            // 图片预览
            } else {
               uni.previewImage({
                  urls: [this.list[e].imgurl],
                  current: this.list[e].imgurl
               })
            }
         },
         toZhuanqu() {
            uni.navigateTo({
               url: '/pages/zhuanqu/zhuanqu'
            })
         },
         addCard(e) {
            if (!this.userInfo) {
               this.$refs.loginRef.open()
               return
            }
            this.$u.api.addCart({
               goodsId: e.id,
               goodsSkuId: e.goodsSkuResponseList[0].id,
               num: 1
            }).then(res => {
               if (res.code === 200) {
                  uni.showToast({ title: '添加成功', icon: 'success', mask: true })
               }
            })
         },
         jumpDetails(id) {
            uni.navigateTo({
               url: '/pages/details/details?id=' + id
            })
         },
         jumpShopZ(item) {
            uni.navigateTo({
               url: '/pages/special-zone/special-zone?qualityId=' + item.id
@@ -165,19 +252,19 @@
            this.$u.api.getGoodsLabelsByType({ type: 0 })
               .then(res => {
                  if (res.code === 200) {
                     this.labels = this.alternateChunkArraySimple(res.data)
                     this.labels = this.chunkArray(res.data)
                  }
               })
            this.$u.api.getGoodsLabelsByType({ type: 14 })
               .then(res => {
                  if (res.code === 200) {
                     this.brand = this.alternateChunkArraySimple(res.data, 2)
                     this.brand = this.chunkArray(res.data, 4)
                  }
               })
            this.$u.api.getGoodsLabelsByType({ type: 12 })
               .then(res => {
                  if (res.code === 200) {
                     this.specialZone = res.data
                     this.specialZone = res.data.length > 0 ? res.data.slice(0, 3) : []
                  }
               })
         },
@@ -204,6 +291,14 @@
               }
            })
         },
         chunkArray(arr, size = 8) {
            return arr.reduce((acc, _, i) => {
               if (i % size === 0) {
                  acc.push(arr.slice(i, i + size));
               }
               return acc;
            }, []);
         },
         // 分割数据
         alternateChunkArraySimple(arr, chunkSize = 4) {
            const result = [
@@ -226,8 +321,12 @@
                  countInCurrentChunk = 0; // 重置计数器
               }
            }
            return result;
            if (result[1].length === 0) {
               return [result[0]]
            } else {
               return result;
            }
         },
         goToAppSetting() {
            var that = this;
@@ -247,30 +346,33 @@
               highAccuracyExpireTime: 3000,
               isHighAccuracy: true,
               success: function(addr) {
               }
            });
         },
         openLoacing() {
            var that = this;
            uni.chooseLocation({
               success(res1) {
                  const locParam = {
                     latitude: addr.latitude,
                     longitude: addr.longitude
                     latitude: res1.latitude,
                     longitude: res1.longitude
                  };
                  const qqmapsdk = new QQMapWX({
                     key: '4PXBZ-JLBC7-LCLXG-P2SZX-C4HYE-LDBLQ'
                     key: 'HEIBZ-QJLLM-SZ36X-6ZBHI-S6Y2J-S6FND'
                  });
                  // 腾讯地图逆地理编码
                  qqmapsdk.reverseGeocoder({
                     locParam,
                     success: function(res) {
                        console.log(res, '==================获取地址');
                        console.log(res,  '==================index获取地址')
                        console.log(locParam)
                        that.$store.commit('setPosition', res.result)
                     },
                     fail: (err) => {
                        console.error('获取位置失败===========', err);
                     }
                  });
               }
            });
         },
         openLoacing() {
            uni.chooseLocation({
               success(res) {
                  console.log(res)
               }
            })
         },
@@ -278,6 +380,18 @@
            uni.navigateTo({
               url: '/pages/search/search'
            })
         },
         jumpSearch1(row, type) {
            console.log(row)
            if (type === 1) {
               uni.navigateTo({
                  url: '/pages/search/search?categoryId=' + row.id
               })
            } else {
               uni.navigateTo({
                  url: '/pages/search/search?applicableBrandId=' + row.id
               })
            }
         }
      }
   }
@@ -347,12 +461,6 @@
         .head-bar {
            width: 100%;
            position: fixed;
            padding: 0 30rpx;
            box-sizing: border-box;
            top: 0;
            left: 0;
            z-index: 999;
            // background-color: #ffffff;
            .head-bar-nav {
@@ -367,10 +475,14 @@
               }
               text {
                  max-width: 400rpx;
                  font-weight: 500;
                  font-size: 32rpx;
                  color: #111111;
                  margin-right: 8rpx;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
               }
            }
         }
@@ -463,6 +575,7 @@
               .commodity-item-image {
                  width: 100%;
                  height: 336rpx;
                  overflow: hidden;
                  display: flex;
                  align-items: center;
                  justify-content: center;
@@ -549,6 +662,130 @@
               }
            }
         }
         .cate-dian {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30rpx;
            .active {
               background-color: #004096 !important;
            }
            .cate-dian-item   {
               width: 40rpx;
               height: 4rpx;
               background: #E2E2E2;
               margin-right: 8rpx;
               &:last-child {
                  margin: 0 !important;
               }
            }
         }
         .cate {
            width: 100%;
            height: 310rpx;
            margin-top: 40rpx;
            .cate-list {
               width: 100%;
               height: 300rpx;
               display: flex;
               align-items: flex-start;
               justify-content: space-between;
               flex-wrap: wrap;
               .cate-item {
                  width: 25%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  margin-bottom: 30rpx;
                  .cate-item-image {
                     width: 88rpx;
                     height: 88rpx;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     background: linear-gradient(180deg, #E6E6E6 0%, #F9F9FB 100%);
                     border-radius: 24rpx;
                     image {
                        width: 100%;
                     }
                  }
                  text {
                     width: 100%;
                     text-align: center;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     font-weight: 400;
                     font-size: 26rpx;
                     color: #333333;
                     margin-top: 16rpx;
                  }
               }
            }
         }
         .pingpai {
            width: 100%;
            height: 310rpx;
            margin-top: 40rpx;
            .pingpai-list {
               width: 100%;
               height: 300rpx;
               display: flex;
               align-items: flex-start;
               justify-content: space-between;
               flex-wrap: wrap;
               .pingpai-item {
                  width: 49%;
                  height: 104rpx;
                  padding: 0 40rpx;
                  box-sizing: border-box;
                  background: #FFFFFF;
                  border-radius: 16rpx;
                  display: flex;
                  align-items: center;
                  margin-bottom: 30rpx;
                  .pingpai-item-image {
                     width: 46rpx;
                     height: 46rpx;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     margin-right: 20rpx;
                     flex-shrink: 0;
                     image {
                        width: 100%;
                     }
                  }
                  text {
                     flex: 1;
                     text-align: center;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     font-weight: 500;
                     font-size: 30rpx;
                     color: #222222;
                  }
               }
            }
         }
         .scroll-list {
            @include flex(column);
@@ -586,14 +823,14 @@
            }
            .cate-item {
               width: calc(100vw / 4 - 96rpx);
               width: calc(100vw / 4 - 86rpx);
               height: auto;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               margin-bottom: 30rpx;
               margin-right: 96rpx;
               margin-right: 86rpx;
               &:last-child {
                  margin-right: 0 !important;
@@ -614,6 +851,10 @@
               }
               text {
                  width: 100%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #333333;