Feat(千县店铺):收藏功能对接

api/favorite.js

@@ -68,4 +68,11 @@ export function getVideoList(page = 1, limit = 10) {
  * */
 export function removeFavorite(ids) {
     return request.post('/collection/delete', ids)
+}
+
+/**
+ * 收藏千县名品县城列表
+ * */
+export function getCountyFamousList(page = 1, limit = 10) {
+    return request.get('/collection/countyFamous/list', {page, limit})
 }

api/qianxian.js

@@ -25,6 +25,16 @@ export function postCountyFamousShopZan(data) {
     return request.post('/countyFamous/shop/zan', data, { login: true })
 }
 
+// 千县名品店铺点赞/取消赞
+export function postCountyFamousShopAddFavorite(data) {
+    return request.post('/collection/countyFamous/add', data, { login: true })
+}
+
+// 千县名品店铺点赞/取消赞
+export function postCountyFamousShopRemoveFavorite(data) {
+    return request.post('/collection/countyFamous/remove', data, { login: true })
+}
+
 // 千县名品资讯点赞/取消赞
 export function postCountyFamousNewsZan(data) {
     return request.post('/countyFamous/news/zan', data, { login: true })

pkg_product/views/famousQianxianShop.vue

@@ -69,20 +69,18 @@
                   <text>{{ inn.zan }}</text>
                 </template>
               </view>
-              <view class="flex flex-0 ai-end favorite-box">
+              <view class="flex flex-0 ai-end favorite-box" @click="doneFavorite">
                 <image
                   v-if="isFavorite"
                   :src="webUrl + '/icon/icon-star-on.png'"
                   mode="scaleToFill"
                   class="icon"
-                  @click="doneFavorite"
                 />
                 <image
                   v-else
                   :src="webUrl + '/icon/icon-star-off.png'"
                   mode="scaleToFill"
                   class="icon"
-                  @click="doneFavorite"
                 />
                 <text>{{ favoriteCount }}</text>
               </view>
@@ -95,9 +93,9 @@
         <view class="inn-signature">
           {{ inn.shopIntro }}
         </view>
-        <view class="share-btn" @click="changeShare">
+        <!-- <view class="share-btn" @click="changeShare">
           <image :src="webUrl + '/page/hotel/share.png'" class="img" />
-        </view>
+        </view> -->
       </view>
       <view v-if="inn.name" class="map-wrapper">
         <view class="map-cont">
@@ -449,25 +447,23 @@
 </template>
 
 <script>
-import {
-  getPoster
-} from "@/api/inn.js"
 import {
   getCountyFamousCityShop,
   getCountyFamousCityNews,
   getCountyFamousCityGuide,
   postCountyFamousShopZan,
+  postCountyFamousShopAddFavorite,
+  postCountyFamousShopRemoveFavorite,
   postCountyFamousNewsZan,
   postCountyFamousNewsView,
   getCountyFamousIndustry,
   getCountyFamousIndustryProject,
   getCountyFamousInvestmentFile
 } from '@/api/qianxian'
-import {formatDateTime} from "@/utils"
+import {formatDateTime} from '@/utils'
-import {getUrlParam} from "@/utils/common.js"
+import {getUrlParam} from '@/utils/common.js'
 import imgBox from '@/components/imageTypeSet/imagebox.vue'
-import cookie from "@/utils/store/cookie"
+import cookie from '@/utils/store/cookie'
-import {addStore, removeStore} from "@/api/favorite"
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 
 export default {
@@ -798,13 +794,13 @@ export default {
     },
     async doneFavorite() {
       if (this.isFavorite) {
-        const res = await removeStore(this.id)
+        const res = await postCountyFamousShopRemoveFavorite({ countyFamousDataId: this.id })
         if (res.success) {
           this.isFavorite = false
           this.favoriteCount = res.data.favoriteCount
         }
       } else {
-        const res = await addStore(this.id)
+        const res = await postCountyFamousShopAddFavorite({ countyFamousDataId: this.id })
         if (res.success) {
           this.isFavorite = true
           this.favoriteCount = res.data.favoriteCount

pkg_user/views/myFavorite.vue

@@ -1,46 +1,88 @@
 <template>
-  <view v-if="ready">
+  <view>
-
     <view class="my-tabs flex jc-between">
-      <view class="tab-item flex jc-center ai-center"
+      <view
-            :class="{'active':tabsIndex===index,'has-vertical':tabsVertical===index}" v-for="(item,index) in tabs"
+        v-for="(item,index) in tabs"
-            :key="index" @click="changeTabs(index)">
+        :key="index"
+        :class="{
+          'active': tabsIndex === index,
+          'has-vertical':index < 3
+        }"
+        class="tab-item flex jc-center ai-center"
+        @click="changeTabs(index)"
+      >
         {{ item.label }}
       </view>
     </view>
-
     <view
-      v-if="!isManage"
+      v-if="(tabsIndex === 0 && productList.length> 0) ||
-      class="manage flex jc-end"
+        (tabsIndex === 1 && storeList.length> 0) ||
-      
+        (tabsIndex === 2 && videoList.length> 0) ||
+        (tabsIndex === 3 && countyFamousList.length> 0)
+      "
     >
-      <view class="flex ai-center" @click="changeManage">
+      <view
-        <image :src="webUrl+'/20240107224533038041.png'" mode="scaleToFill"/>
+        v-if="!isManage"
-        管理
+        class="manage flex jc-end"
+      >
+        <view class="flex ai-center" @click="changeManage">
+          <image
+            :src="webUrl+'/20240107224533038041.png'"
+            mode="scaleToFill"
+          />
+          管理
+        </view>
+      </view>
+      <view
+        v-else
+        class="manage flex jc-end ai-center"
+        style="color:#C41617"
+        @click="changeManage"
+      >
+        <view>退出管理</view>
       </view>
-    </view>
-    <view
-      v-else
-      class="manage flex jc-end ai-center"
-      style="color:#C41617"
-      @click="changeManage"
-    >
-      <view>退出管理</view>
     </view>
     <!--商品列表-->
-    <scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y
+    <scroll-view
-                 @scrolltolower="fetchProduct()" v-if="tabsIndex===0">
+      v-if="tabsIndex === 0"
-      <view class="tc" style="margin-top: 200rpx;" v-if="productList.length===0">
+      :class="{'manage-state': isManage}"
-        <image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
+      class="scroll-box"
+      scroll-y
+      @scrolltolower="fetchProduct()"
+    >
+      <view
+        v-if="productList.length === 0"
+        class="tc no-data"
+      >
+        <image
+          :src="webUrl+'/20240102232718644743.png'"
+          mode="scaleToFill"
+          class="img"
+        />
       </view>
-
+      <view
-      <view class="item-commodity flex ai-center" v-for="(item,index) in productList" :key="index">
+        v-for="(item,index) in productList"
-        <CheckboxIcon style="margin-right: 16rpx;" :default-state="item['state']" :mark="[index]" @change="onChange"
+        :key="index"
-                      v-if="isManage"/>
+        class="item-commodity flex ai-center"
-        <image class="cover flex-0" :src="item['image']" mode="scaleToFill" @click="navToGoods(item['productId'])"/>
+      >
-
+        <CheckboxIcon
+          v-if="isManage"
+          :default-state="item['state']"
+          :mark="[index]"
+          style="margin-right: 16rpx;"
+          @change="onChange"
+        />
+        <image
+          :src="item['image']"
+          mode="scaleToFill"
+          class="cover flex-0"
+          @click="navToGoods(item['productId'])"
+        />
         <view style="width: 100%">
-          <view class="more-t bold" @click="navToGoods(item['productId'])">{{ item['storeName'] }}</view>
+          <view
+            class="more-t bold"
+            @click="navToGoods(item['productId'])"
+          >{{ item['storeName'] }}</view>
           <view class="sub" @click="navToGoods(item['productId'])">规格:{{ item['sku'] }}</view>
           <view class="flex jc-between ai-end">
             <view class="price flex ai-end" @click="navToGoods(item['productId'])">
@@ -56,62 +98,178 @@
       </view>
     </scroll-view>
     <!--店铺列表-->
-    <scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y @scrolltolower="fetchStore()"
+    <scroll-view
-                 v-if="tabsIndex===1">
+      v-if="tabsIndex === 1"
-      <view class="tc" style="margin-top: 200rpx;" v-if="storeList.length===0">
+      :class="{'manage-state':isManage}"
-        <image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
+      class="scroll-box"
+      scroll-y
+      @scrolltolower="fetchStore()"
+    >
+      <view
+        v-if="storeList.length === 0"
+        class="tc no-data"
+      >
+        <image
+          :src="webUrl+'/20240102232718644743.png'"
+          mode="scaleToFill"
+          class="img"
+        />
       </view>
-
+      <view
-      <view class="item-store flex ai-start" v-for="(item,index) in storeList" :key="index">
+        v-for="(item,index) in storeList"
+        :key="index"
+        class="item-store flex ai-start"
+      >
         <view class="flex flex-0 ai-center">
-          <CheckboxIcon style="margin-right: 16rpx;" :default-state="item['state']" :mark="[index]" @change="onChange"
+          <CheckboxIcon
-                        v-if="isManage"/>
+            v-if="isManage"
-          <image class="cover" :src="item['logo']" mode="scaleToFill"/>
+            :default-state="item['state']"
+            :mark="[index]"
+            style="margin-right: 16rpx;"
+            @change="onChange"
+          />
+          <image
+            :src="item['logo']"
+            mode="scaleToFill"
+            class="cover"
+          />
         </view>
-
         <view>
           <view class="flex jc-between ai-start" style="width: 594rpx">
             <view>
               <view class="one-t bold">{{ item['name'] }}</view>
               <view class="sub">{{ item['time'] === '刚刚' ? '刚刚' : item['time'] + '收藏' }}</view>
             </view>
-            <view class="btn-nav flex jc-center ai-center" :style="{'margin-right':(isManage?48:0)+'rpx'}"
+            <view
-                  @click="navToStore(item['hotelId'])">进店逛逛
+              :style="{'margin-right':(isManage?48:0)+'rpx'}"
-              <image style="width: 24rpx;height: 24rpx" :src="webUrl+'/20240109234706982937.png'" mode="scaleToFill"/>
+              class="btn-nav flex jc-center ai-center"
+              @click="navToStore(item['hotelId'])"
+            >
+              进店逛逛
+              <image
+                :src="webUrl+'/20240109234706982937.png'"
+                style="width: 24rpx;height: 24rpx"
+                mode="scaleToFill"
+              />
             </view>
           </view>
           <view class="flex jc-start ai-center" style="margin-top: 16rpx;">
-            <image class="img-product" :src="img" mode="scaleToFill"
+            <image
-                   v-for="(img,i) in item['productImages']" :key="i"/>
+              v-for="(img,i) in item['productImages']"
+              :key="i"
+              :src="img" mode="scaleToFill"
+              class="img-product"
+            />
           </view>
         </view>
       </view>
     </scroll-view>
     <!--视频列表-->
-    <scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y
+    <scroll-view
-                 @scrolltolower="fetchVideo()"
+      v-if="tabsIndex === 2"
-                 v-if="tabsIndex===2">
+      scroll-y
-      <view class="tc" style="margin-top: 200rpx;" v-if="videoList.length===0">
+      :class="{'manage-state':isManage}"
-        <image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
+      class="scroll-box"
+      @scrolltolower="fetchVideo()"
+    >
+      <view
+        v-if="videoList.length === 0"
+        class="tc no-data"
+      >
+        <image
+          :src="webUrl+'/20240102232718644743.png'"
+          mode="scaleToFill"
+          class="img"
+        />
       </view>
-
       <view class="flex flex-wrap" style="padding:40rpx 32rpx">
-        <view class="item-video" v-for="(item,index) in videoList" :key="index">
+        <view
-          <CheckboxIcon class="video-check" :default-state="item['state']" :mark="[index]" @change="onChange"
+          v-for="(item,index) in videoList"
-                        v-if="isManage"/>
+          :key="index"
-
+          class="item-video"
-          <image class="img-cover" :src="item['cover']" mode="scaleToFill" @click="navToVideo(item['videoId'])"/>
+        >
+          <CheckboxIcon
+            v-if="isManage"
+            :default-state="item['state']"
+            :mark="[index]"
+            class="video-check"
+            @change="onChange"
+          />
+          <image
+            :src="item['cover']"
+            mode="scaleToFill"
+            class="img-cover"
+            @click="navToVideo(item['videoId'])"
+          />
           <view class="item-mask flex jc-end ai-end">
-            <image class="icon-heart" :src="webUrl+'/20240113205505660820.png'" mode="scaleToFill"/>
+            <image
+              :src="webUrl+'/20240113205505660820.png'"
+              mode="scaleToFill"
+              class="icon-heart"
+            />
             <text>{{ item['favoriteCount'] }}</text>
           </view>
         </view>
       </view>
     </scroll-view>
-
+    <!--千县店铺列表-->
+    <scroll-view
+      v-if="tabsIndex === 3"
+      :class="{'manage-state':isManage}"
+      class="scroll-box county-scroll"
+      scroll-y
+      @scrolltolower="fetchCountyFamous()"
+    >
+      <view
+        v-if="countyFamousList.length === 0"
+        class="tc no-data"
+      >
+        <image
+          :src="webUrl+'/20240102232718644743.png'"
+          mode="scaleToFill"
+          class="img"
+        />
+      </view>
+      <view class="county-list-wrap">
+        <view
+          v-for="(item, index) in countyFamousList"
+          :key="index"
+          class="county-item"
+          @click="gotoQianxianShop(item)"
+        >
+          <view class="img-wrap">
+            <CheckboxIcon
+              v-if="isManage"
+              :default-state="item['state']"
+              :mark="[index]"
+              class="check"
+              @change="onChange"
+            />
+            <image
+              :src="item.cover + (item.coverType === 1 ? '' : '?vframe/jpg/offset/1')"
+              mode="scaleToFill"
+              class="cover"
+            />
+          </view>
+          <view class="county-info">
+            <view class="name one-t">
+              {{ item.name }}
+            </view>
+            <view class="intro more-t">
+              {{ item.shopIntro }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
     <view class="fixed-manage flex jc-between ai-center" v-if="isManage">
       <view style="margin-left: 30rpx;">
-        <CheckboxIcon style="margin-right: 16rpx;" :default-state="isAll" :mark="[-1]" @change="onChange"/>
+        <CheckboxIcon
+          :default-state="isAll"
+          :mark="[-1]"
+          style="margin-right: 16rpx;"
+          @change="onChange"
+        />
         <text style="color:#666666;font-size: 32rpx">全选({{ selectCount }})</text>
       </view>
       <view class="flex ai-center">
@@ -123,22 +281,27 @@
 </template>
 
 <script>
-import {getProductList, getStoreList, getVideoList, removeFavorite} from "@/api/favorite";
+import {
-import {postCartAdd} from "@/api/store";
+  getProductList,
-import CheckboxIcon from "@/components/CheckboxIcon.vue";
+  getStoreList,
+  getVideoList,
+  getCountyFamousList,
+  removeFavorite
+} from '@/api/favorite'
+import { postCartAdd } from '@/api/store'
+import CheckboxIcon from '@/components/CheckboxIcon.vue'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
-
 export default {
-  components: {CheckboxIcon},
+  components: { CheckboxIcon },
   mixins: [pageListenMixins],
   data() {
     return {
-      ready: false,
       webUrl: this.$VUE_APP_RESOURCES_URL,
       tabs: [
         {key: 0, label: '商品'},
         {key: 1, label: '店铺'},
         {key: 2, label: '视频'},
+        {key: 3, label: '千县'},
       ],
       tabsIndex: 0,
       isManage: false,
@@ -147,17 +310,14 @@ export default {
       productList: [],
       storeList: [],
       videoList: [],
+      countyFamousList: [],
       pageKeyId: Object.freeze('userCollectionIndex')
     }
   },
   computed: {
-    tabsVertical: function () {
-      if (this.tabsIndex === 0) return 1
-      if (this.tabsIndex === 1) return -1
-      if (this.tabsIndex === 2) return 0
-    },
     selectCount: function () {
-      let count = 0, countList
+      let count = 0
+      let countList = []
       switch (this.tabsIndex) {
         case 0:
           countList = this.productList
@@ -177,7 +337,6 @@ export default {
     }
   },
   mounted() {
-    this.ready = true
     this.fetchProduct()
   },
   methods: {
@@ -186,7 +345,6 @@ export default {
         url: "/pages/shop/GoodsCon/index?id=" + id
       })
     },
-
     changeTabs(index) {
       if (this.isManage) return
       // fix bug#1111
@@ -195,7 +353,6 @@ export default {
       this.page = 1
       this.fetchData()
     },
-
     fetchData() {
       switch (this.tabsIndex) {
         case 0:
@@ -207,20 +364,20 @@ export default {
         case 2:
           this.fetchVideo()
           break
+        case 3:
+          this.fetchCountyFamous()
+          break
       }
     },
-
     changeManage() {
       this.isManage = !this.isManage
     },
-
     onChange(state, mark) {
       if (mark[0] === -1) {
         this.isAll = state
         this.handleAll(state)
         return
       }
-
       switch (this.tabsIndex) {
         case 0:
           this.productList[mark]['state'] = state
@@ -234,9 +391,12 @@ export default {
           this.videoList[mark]['state'] = state
           this.isAll = this.selectCount === this.videoList.length
           break
+        case 3:
+          this.countyFamousList[mark]['state'] = state
+          this.isAll = this.selectCount === this.countyFamousList.length
+          break
       }
     },
-
     handleAll(state) {
       switch (this.tabsIndex) {
         case 0:
@@ -248,9 +408,11 @@ export default {
         case 2:
           this.videoList.forEach(item => item.state = state)
           break
+        case 3:
+          this.countyFamousList.forEach(item => item.state = state)
+          break
       }
     },
-
     remove() {
       const _this = this
       const ids = []
@@ -270,6 +432,11 @@ export default {
             if (item['state']) ids.push(item.id)
           })
           break
+        case 3:
+          _this.countyFamousList.forEach(item => {
+            if (item['state']) ids.push(item.id)
+          })
+          break
       }
       if (ids.length < 1) {
         return
@@ -292,7 +459,6 @@ export default {
         }
       })
     },
-
     removeAfter() {
       switch (this.tabsIndex) {
         case 0:
@@ -304,55 +470,68 @@ export default {
         case 2:
           this.videoList = this.videoList.filter(item => !item['state'])
           break
+        case 3:
+          this.countyFamousList = this.videoList.filter(item => !item['state'])
+          break
       }
     },
-
     async fetchProduct() {
-      let that = this
+      const _this = this
-      if (that.page === 1) {
+      if (_this.page === 1) {
-        that.productList = []
+        _this.productList = []
       }
-      const res = await getProductList(that.page)
+      const res = await getProductList(_this.page)
       if (res.success) {
         res.data['records']?.forEach(item => {
           item.state = false
-          that.productList.push(item)
+          _this.productList.push(item)
         })
-        that.page++
+        _this.page++
       }
     },
-
     async fetchStore() {
-      let that = this
+      const _this = this
-      if (that.page === 1) {
+      if (_this.page === 1) {
-        that.storeList = []
+        _this.storeList = []
       }
-      const res = await getStoreList(that.page)
+      const res = await getStoreList(_this.page)
       if (res.success) {
         res.data['records']?.forEach(item => {
           item.time = uni.$u.timeFrom(Date.parse(item.createTime))
           item.state = false
-          that.storeList.push(item)
+          _this.storeList.push(item)
         })
-        that.page++
+        _this.page++
       }
     },
-
     async fetchVideo() {
-      let that = this
+      const _this = this
-      if (that.page === 1) {
+      if (_this.page === 1) {
-        that.videoList = []
+        _this.videoList = []
       }
-      const res = await getVideoList(that.page)
+      const res = await getVideoList(_this.page)
       if (res.success) {
         res.data['records']?.forEach(item => {
           item.state = false
-          that.videoList.push(item)
+          _this.videoList.push(item)
         })
-        that.page++
+        _this.page++
+      }
+    },
+    async fetchCountyFamous() {
+      const _this = this
+      if (_this.page === 1) {
+        _this.countyFamousList = []
+      }
+      const res = await getCountyFamousList(_this.page)
+      if (res.success) {
+        res.data['records']?.forEach(item => {
+          item.state = false
+          _this.countyFamousList.push(item)
+        })
+        _this.page++
       }
     },
-
     async addCart(item) {
       const param = {
         productId: item.productId,
@@ -367,23 +546,25 @@ export default {
         }).catch()
       }
     },
-
     navToStore(id) {
       uni.navigateTo({
         url: '/pagesInn/inn/innHome?id=' + id
       })
     },
-
     navToVideo(videoId) {
       if (this.isManage) return
       uni.navigateTo({
         url: '/pkg-video/views/watch?videoId=' + videoId
       })
+    },
+    gotoQianxianShop(item) {
+      if (this.isManage) return
+      uni.navigateTo({
+        url: `/pkg_product/views/famousQianxianShop?id=${item.countyFamousDataId}`
+      })
     }
   }
 }
-
-
 </script>
 
 <style scoped lang="less">
@@ -407,13 +588,16 @@ export default {
     color: #FFFFFF;
     font-size: 34rpx;
     font-weight: bold;
+    &.has-vertical:after {
+      width: 0;
+    }
   }
 
   .has-vertical:after {
     content: '';
     position: absolute;
     right: 0;
-    width: 2rpx;
+    width: 0;
     height: 36rpx;
     background: #999999;
   }
@@ -434,6 +618,19 @@ export default {
   height: calc(100vh - 168rpx);
   box-sizing: border-box;
   background: #FFFFFF;
+  &.county-scroll {
+    background-color: #f0f0f0;
+  }
+  .no-data {
+    padding: 100px 0 0 0;
+    border-top: 20px solid #f0f0f0;
+    .img {
+      display: block;
+      width: 305rpx;
+      height: 332rpx;
+      margin: 0 auto;
+    }
+  }
 }
 
 .manage-state {
@@ -583,4 +780,54 @@ export default {
     font-size: 32rpx;
   }
 }
+.county-list-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  width: 710rpx;
+  margin: 0 auto;
+  background-color: #f0f0f0;
+  .county-item {
+    width: 344rpx;
+    height: 440rpx;
+    padding: 12rpx;
+    margin: 0 22rpx 22rpx 0;
+    box-sizing: border-box;
+    border-radius: 16rpx;
+    background-color: #fff;
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+    .img-wrap {
+      position: relative;
+      .cover {
+        display: block;
+        width: 320rpx;
+        height: 280rpx;
+        border-radius: 16rpx;
+      }
+      .check {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 5;
+      }
+    }
+    .county-info {
+      .name {
+        width: 100%;
+        padding: 10rpx 0 0 0;
+        font-size: 36rpx;
+        font-weight: bold;
+        color: #333;
+        line-height: 48rpx;
+      }
+      .intro {
+        padding: 10rpx 0 0 0;
+        font-size: 28rpx;
+        line-height: 32rpx;
+        color: #666;
+      }
+    }
+  }
+}
 </style>