liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lifizer
2024-08-23 10:55:33 +08:00
parent 0528865e7b
commit 99dd695553
4 changed files with 382 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/favorite.js
+7
View File
@@ -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
+10
View File
@@ -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
+10 -14
View File
@@ -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 {getUrlParam} from "@/utils/common.js"
import {formatDateTime} from '@/utils'
import {getUrlParam} from '@/utils/common.js'
import imgBox from '@/components/imageTypeSet/imagebox.vue'
import cookie from "@/utils/store/cookie"
import {addStore, removeStore} from "@/api/favorite"
import cookie from '@/utils/store/cookie'
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
+355 -108
View File
@@ -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"
:class="{'active':tabsIndex===index,'has-vertical':tabsVertical===index}" v-for="(item,index) in tabs"
:key="index" @click="changeTabs(index)">
<view
v-for="(item,index) in tabs"
: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"
class="manage flex jc-end"
v-if="(tabsIndex === 0 && productList.length> 0) ||
(tabsIndex === 1 && storeList.length> 0) ||
(tabsIndex === 2 && videoList.length> 0) ||
(tabsIndex === 3 && countyFamousList.length> 0)
"
>
<view class="flex ai-center" @click="changeManage">
<image :src="webUrl+'/20240107224533038041.png'" mode="scaleToFill"/>
管理
<view
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
@scrolltolower="fetchProduct()" v-if="tabsIndex===0">
<view class="tc" style="margin-top: 200rpx;" v-if="productList.length===0">
<image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
<scroll-view
v-if="tabsIndex === 0"
:class="{'manage-state': isManage}"
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 class="item-commodity flex ai-center" v-for="(item,index) in productList" :key="index">
<CheckboxIcon style="margin-right: 16rpx;" :default-state="item['state']" :mark="[index]" @change="onChange"
v-if="isManage"/>
<image class="cover flex-0" :src="item['image']" mode="scaleToFill" @click="navToGoods(item['productId'])"/>
<view
v-for="(item,index) in productList"
:key="index"
class="item-commodity flex ai-center"
>
<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()"
v-if="tabsIndex===1">
<view class="tc" style="margin-top: 200rpx;" v-if="storeList.length===0">
<image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
<scroll-view
v-if="tabsIndex === 1"
:class="{'manage-state':isManage}"
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 class="item-store flex ai-start" v-for="(item,index) in storeList" :key="index">
<view
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"
v-if="isManage"/>
<image class="cover" :src="item['logo']" mode="scaleToFill"/>
<CheckboxIcon
v-if="isManage"
: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'}"
@click="navToStore(item['hotelId'])">进店逛逛
<image style="width: 24rpx;height: 24rpx" :src="webUrl+'/20240109234706982937.png'" mode="scaleToFill"/>
<view
:style="{'margin-right':(isManage?48:0)+'rpx'}"
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"
v-for="(img,i) in item['productImages']" :key="i"/>
<image
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
@scrolltolower="fetchVideo()"
v-if="tabsIndex===2">
<view class="tc" style="margin-top: 200rpx;" v-if="videoList.length===0">
<image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
<scroll-view
v-if="tabsIndex === 2"
scroll-y
:class="{'manage-state':isManage}"
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">
<CheckboxIcon class="video-check" :default-state="item['state']" :mark="[index]" @change="onChange"
v-if="isManage"/>
<image class="img-cover" :src="item['cover']" mode="scaleToFill" @click="navToVideo(item['videoId'])"/>
<view
v-for="(item,index) in videoList"
:key="index"
class="item-video"
>
<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 {postCartAdd} from "@/api/store";
import CheckboxIcon from "@/components/CheckboxIcon.vue";
import {
getProductList,
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
if (that.page === 1) {
that.productList = []
const _this = this
if (_this.page === 1) {
_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
if (that.page === 1) {
that.storeList = []
const _this = this
if (_this.page === 1) {
_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
if (that.page === 1) {
that.videoList = []
const _this = this
if (_this.page === 1) {
_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>