优化名片

quanwei

2 days ago 73b874c72ad55eb9eef21c36160ac0de58f0189e

 mobile/pages/shop/shop_list.vue

@@ -7,8 +7,8 @@
         <view class="index-search-box index-search-box_re d-b-c" id="searchBox">
            <view class="index-search index-search_re t-c flex-1">
               <span class="icon iconfont icon-sousuo"></span>
               <input type="text" v-model="searchtxt" class="flex-1 ml10 f30 gray3" value="" placeholder-class="f24 gray6"
                placeholder="搜索名称" confirm-type="search" @confirm="search()" />
               <input type="text" v-model="searchtxt" class="flex-1 ml10 f30 gray3" value=""
                  placeholder-class="f24 gray6" placeholder="搜索名称" confirm-type="search" @confirm="search()" />
            </view>
         </view>
         <view class="inner-tab">
@@ -25,9 +25,11 @@
            </view>
         </view>
         <view class="category-box pt20" v-if="category.length>0">
            <scroll-view class="scroll-category" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation="true">
            <scroll-view class="scroll-category" scroll-x="true" :scroll-left="scrollLeft"
               scroll-with-animation="true">
               <view class="category-list">
                  <view class="category-item" v-for="(item,index) in category" :key="item.category_id" @click="tabChange(index)" :id="'item-' + index" :class="{current: index === currentIndex}">
                  <view class="category-item" v-for="(item,index) in category" :key="item.category_id"
                     @click="tabChange(index)" :id="'item-' + index" :class="{current: index === currentIndex}">
                     <text class="category-btn p-0-20">{{item.name}}</text>
                  </view>
               </view>
@@ -35,9 +37,9 @@
         </view>
      </view>
      <view class="prodcut-list-wrap" v-if="store_open">
         <scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
          :refresher-triggered="triggered" @scrolltolower="scrolltolowerFunc" refresher-enabled="true" @refresherrefresh="onRefresh"
          @refresherrestore="onRestore">
         <scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'"
            lower-threshold="50" :refresher-triggered="triggered" @scrolltolower="scrolltolowerFunc"
            refresher-enabled="true" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="shop_list_body">
               <view class="shop_list_body_item" v-for="(item,index) in shopData" :key="index">
                  <view class="shop_list_body_item_shop" @click="goto_shop(item.shop_supplier_id)">
@@ -46,17 +48,30 @@
                     </view>
                     <view class="shop_list_body_item_shop_info">
                        <view class="h1 title">{{item.name}}</view>
                        <view class="h3 brand">主营：{{item.category_name}}</view>
                        <!-- <view class="h3 brand address-row">主营：{{item.category_name}}</view> -->
                        <view class="h3 address-row">
                           <text class="address-text">地址：{{item.address}}</text>
                        </view>
                        <!-- <view class="h3 sales">销量{{item.product_sales}}件<text class="ml10 mr10">|</text>{{item.fav_count}}人关注</view> -->
                     </view>
                     <view class="shop_list_body_item_shop_others">
                        <view class="f26 gray3 collect">店铺评分</view>
                        <view><text class="redEe f32 fb">{{item.server_score}}</text></view>
                        <!-- <view class="f26 gray3 collect">店铺评分</view>
                        <view><text class="redEe f32 fb">{{item.server_score}}</text></view> -->
                        <view class="action-buttons">
                           <view @click.stop="contactShop(item)">
                              <text class="iconfont icon icon-002dianhua action-btn contact-btn"></text>
                           </view>
                           <view @click.stop="navigateToShop(item)">
                              <text class="icon action-btn iconfont nav-btn icon-dizhi1"></text>
                           </view>
                        </view>
                     </view>
                  </view>
                  <view v-if="shopData[index].productList.length>0" :class="shopData[index].productList.length<3?'shop_list_body_item_product2':'shop_list_body_item_product'">
                     <view class="shop_list_body_item_product_item" v-for="(item1,index2) in shopData[index].productList" :key="index2"
                      @click="goto_product(item1.product_id)">
                  <view v-if="shopData[index].productList.length>0"
                     :class="shopData[index].productList.length<3?'shop_list_body_item_product2':'shop_list_body_item_product'">
                     <view class="shop_list_body_item_product_item"
                        v-for="(item1,index2) in shopData[index].productList" :key="index2"
                        @click="goto_product(item1.product_id)">
                        <view>
                           <image :src="item1.image[0].file_path"></image>
                        </view>
@@ -64,7 +79,8 @@
                           <view class="f22 red">¥
                              <text class="f32">
                                 {{item1.product_price}}
                              </text></view>
                              </text>
                           </view>
                        </view>
                     </view>
                  </view>
@@ -125,7 +141,7 @@
            screenWidth: 0,
            currentIndex: 0,
            category_id: '',
            store_open:false
            store_open: false
         };
      },
      computed: {
@@ -148,11 +164,22 @@
      mounted() {
         this.init();
         this._freshing = false;
			
         this.restoreData();
         // 获取分类 by lyzflash
         this.getCategory();
         /*获取订单列表*/
         this.getData();
      },
      onLoad(option) {
         let self = this;
         if( option.category_id){
            self.category.forEach(function(index,item){
               if(item.category_id==option.category_id){
                  self.tabChange(index)
               }
            })
         }
      },
      methods: {
         /*初始化*/
@@ -204,21 +231,22 @@
               page: page || 1,
               list_rows: list_rows,
               sortType: self.type_active,
               supplier_type: 10,
               name: self.keyWord,
               category_id: self.category_id // 分类id by lyzflash
            }, (res) => {
               self.loading = false;
                self.store_open = res.data.store_open;
               if(!self.store_open){
               self.store_open = res.data.store_open;
               if (!self.store_open) {
                  uni.setNavigationBarTitle({
                    title: '我的订单',
                     title: '我的订单',
                  });
                  self.gotoPage('/pages/index/index');
               }else{
               } else {
                  uni.setNavigationBarTitle({
                    title: '人气好店',
                     title: '人气好店',
                  });
               } 
               }
               self.last_page = res.data.list.last_page;
               self.shopData = self.shopData.concat(res.data.list.data);
               if (res.data.list.last_page <= 1) {
@@ -231,8 +259,7 @@
         /*获取分类*/
         getCategory() {
            let self = this;
            self._post('supplier.index/category', {
            }, (res) => {
            self._post('supplier.index/category', {category_type:10}, (res) => {
               self.category = res.data.category;
            })
         },
@@ -272,13 +299,57 @@

         //跳转店铺首页
         goto_shop(shop_supplier_id) {
            uni.setStorageSync('shop_supplier_id',shop_supplier_id)
            this.gotoPage('/pages/shop/shop?shop_supplier_id=' + shop_supplier_id);
         },
         //跳转商品页面
         goto_product(product_id) {
            this.gotoPage('/pages/product/detail/detail?product_id=' + product_id);
         },
			
         //联系店铺
         contactShop(shop) {
            // 如果有电话号码，直接拨打电话
            if (shop.link_phone) {
               uni.makePhoneCall({
                  phoneNumber: shop.link_phone,
                  fail: () => {
                     uni.showToast({
                        title: '拨打电话失败',
                        icon: 'none'
                     });
                  }
               });
            } else {
               uni.showToast({
                  title: '暂无联系电话',
                  icon: 'none'
               });
            }
         },
         //导航到店铺
         navigateToShop(shop) {
            if (shop.address) {
               // 打开地图导航
               uni.openLocation({
                  latitude: shop.latitude || 0,
                  longitude: shop.longitude || 0,
                  name: shop.name,
                  address: shop.address,
                  fail: () => {
                     uni.showToast({
                        title: '打开导航失败',
                        icon: 'none'
                     });
                  }
               });
            } else {
               uni.showToast({
                  title: '暂无店铺地址',
                  icon: 'none'
               });
            }
         },

         /**
          * 分类导航
          * 点击事件
@@ -547,7 +618,7 @@

   .shop_list_body_item_shop {
      width: 100%;
      height: 150rpx;
      min-height: 150rpx;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
@@ -653,6 +724,51 @@
      color: #585858;
   }

   .address-row {
      /* display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-wrap: break-word;
   }

   .address-text {
      flex: 1;
      color: #585858;
   }

   .action-buttons {
      display: flex;
      align-items: center;
      margin-left: 20rpx;
   }

   .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-left: 10rpx;
   }

   .contact-btn {
      color: #4caf50;
      font-size: 50rpx;
   }

   .nav-btn {
      font-size: 50rpx;
      color: #2196f3;
   }

   .action-btn .iconfont {
      font-size: 28rpx;
   }

   .sales {
      color: #585858;
   }
@@ -660,6 +776,7 @@
   .collect {
      margin-bottom: 26rpx;
   }

   // 分类相关 by lyzflash
   .scroll-category {
      width: 100%;
@@ -667,10 +784,12 @@
      white-space: nowrap;
      text-align: start;
   }

   .scroll-category .current .category-btn {
      @include border_color("border_color");
      @include text_color("font_color");
   }

   .scroll-category .category-item {
      height: 50rpx;
      text-align: center;
@@ -678,6 +797,7 @@
      display: inline-block;
      position: relative;
   }

   .category-btn {
      display: inline-block;
      border-radius: 50rpx;
@@ -685,4 +805,4 @@
      font-size: 28rpx;
      border: 2rpx solid #ccc;
   }
</style>
</style>