Fix:2562 【商城小程序】千县—点击进入农民店铺链接数据显示混乱

This commit is contained in:
linxi
2024-11-26 14:42:40 +08:00
parent 0ac3babdd2
commit f4cfeb37e8
4 changed files with 939 additions and 1 deletions
+19
View File
@@ -0,0 +1,19 @@
import request from "@/utils/request";
export function getFarmerShop(id) {
return request.get("/countyFamous/farmerShop/" + id)
}
export function setFarmerShopZan(data) {
return request.post("/countyFamous/farmerShop/zan", data)
}
export function getFarmerShopNews(data) {
return request.get("/countyFamous/farmerShop/news", data)
}
export function getFarmerShopQualification(data) {
return request.get("/countyFamous/farmerShop/qualification", data)
}
+7
View File
@@ -405,6 +405,13 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{
"path": "inn/farmerStore",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{ {
"path": "inn/innGoodList", "path": "inn/innGoodList",
"style": { "style": {
+912
View File
@@ -0,0 +1,912 @@
<template>
<view class="container">
<hx-navbar
:fixed="true"
:background-color="[[13,197,197],[13,197,197]]"
:pageScroll.sync="scrollData"
statusBarFontColor="#ffffff"
barPlaceholder="hidden"
transparent="auto"
color='#ffffff'
/>
<view>
<view class="cover-box">
<image
v-if="store.coverType === 1"
:src="store.cover"
class="full-img"
mode="widthFix"
/>
<view
v-if="store.coverType === 2"
:style="{
'width': videoStyle.width,
'height': videoStyle.height
}"
class="video-box"
>
<video
:src="store.cover"
:autoplay="true"
:controls="true"
:loop="false"
object-fit="contain"
play-btn-position="center"
class="video"
/>
</view>
</view>
<view class="innInfoWrap">
<view class="bg-color">
<view class="box-mask flex jc-between ai-end">
<view class="inn-name flex-0 more-t">{{ store.name }}</view>
<view
v-if="store.cityName != undefined && store.cityName.length > 0"
class="city-section flex jc-end ai-center"
>
<image
:src="webUrl + '/20210807215539157727.png'"
style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
/>
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ store.cityName }}</text>
</view>
</view>
</view>
<view class="body-cont flex ai-end">
<view class="inn-logo flex-0">
<image :src="store.logo" v-if="store.logo"></image>
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
</view>
<view class="a3 flex jc-between ai-end" style="width: 100%">
<view class="inn-owner" style="flex-grow: 1;">{{ store.ownerName }}/店主</view>
<view v-if="store.guaranteeValue" class="guarantee flex jc-center ai-center">
保证金{{ store.guaranteeValue }}
</view>
<view class="flex ai-center zan-favorite-wrap">
<view class="zan-box flex flex-0 ai-end" @click="zanStore">
<template v-if="store.hasZan">
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
<text class="on">{{ store.zan }}</text>
</template>
<template v-else>
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
<text>{{ store.zan }}</text>
</template>
</view>
<view class="flex flex-0 ai-end favorite-box">
<image
v-if="store.hasFavorite"
: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>{{ store.favoriteCount }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="inn-signature-wrap">
<view class="triangle"></view>
<view class="inn-signature">
{{ store.content }}
</view>
<!-- <view class="share-btn" @click="changeShare">
<image :src="webUrl + '/page/hotel/share.png'" class="img" />
</view> -->
</view>
<view v-if="store.name" class="map-wrapper">
<view class="map-cont">
<map
:longitude="store.longitude"
:latitude="store.latitude"
style="width: 750rpx;height: 300rpx;"
/>
</view>
<view class="bg"></view>
<view class="map-info">
<view class="map-info-hd">
<image :src="webUrl + '/page/hotel/icon-location.png'" class="icon" />
</view>
<view class="map-info-bd more-t">
{{ store.address }}
</view>
<view class="map-info-ft flex">
<view class="item" @click="showLocation">
<image :src="webUrl + '/page/hotel/navigation.png'" class="img" />
<view>导航</view>
</view>
<view class="item" @click="call">
<image :src="webUrl + '/page/hotel/phone.png'" class="img" />
<view>客服</view>
</view>
</view>
</view>
</view>
<view class="top-tab acea-row row-middle row-center">
<view
v-for="(item, index) in tabList"
:key="index"
:class="item.isShow ? '' : 'hide'"
class="tab"
@click="changeTab(item.value)"
>
<text :class="activeIndex === index ? 'tab-item-active' : 'tab-item-no-active'">
{{ item.text }}
</text>
<view v-show="activeIndex === index" class="btLine"></view>
</view>
</view>
<view>
<view v-if="activeIndex === 0" class="goods-section">
<view>
<view v-if="store.products && store.products.length > 0">
<view class="flex flex-wrap">
<view
v-for="(item,index) in store.products"
:key="index"
class="item"
@click="goGoodsConByID(item)"
>
<image
:src="item.productImage"
class="cover"
/>
<view class="">
<view class="name more-t">{{ item.productName }}</view>
<view class="price-line flex ai-center">
<image
:src="webUrl + '/20221118104357701129.png'"
class="label"
mode="scaleToFill"
/>
<text>{{ item.productPrice }}</text>
</view>
</view>
</view>
</view>
</view>
<view v-else class="tab-no-data">
店主还没有上传内容哦~
</view>
</view>
<!-- <goo-skeleton v-else /> -->
</view>
<view
v-if="activeIndex === 1"
class="info-section"
>
<view v-if="isLoadInfoListSuccess">
<view v-if="infoArray.length > 0" class="info-wrapper">
<view class="info-list">
<view
v-for="(item, index) in infoArray"
:key="index"
class="info-item"
>
<view
:class="item.isTop === 1 ? 'info-item-top' : ''"
:style="{
'background-image': item.isTop ? ('url(' + webUrl + '/page/hotel/info-top-bg.png)') : 'none'
}"
class="info-item-header"
@click="infoClick(item)"
>
<view class="name">
{{ item.title }}
</view>
<view class="intro">
{{ item.content }}
</view>
</view>
<view class="info-item-body">
<view v-if="item.type === 2" class="video">
<video
:src="item.video"
:poster="item.video + '?vframe/jpg/offset/1'"
controls
play-btn-position="center"
class="video-item"
@play="infoItemViewClick(item)"
/>
</view>
<view v-else>
<img-box
:imgList="item.images"
:num="item.images.length"
:img-radius="10"
style="width: 100%;"
@click="infoItemViewClick(item)"
/>
</view>
</view>
<view class="info-item-bottom">
<view class="time">
{{ item.createTime ? item.createTime.replace(/-/g, '.').substr(0, 10) : '' }}
</view>
<view class="btns">
<view class="flex">
<image
:src="webUrl + '/20230803152147141807.png'"
class="icon"
/>
<text class="seeNum-txt">{{ item.pv }}</text>
</view>
<view class="flex">
<image
v-if="!item.hasZan"
:src="webUrl + '/page/hotel/zan-off-2.png'"
class="zan-off-icon"
@click="likeInfoItemHandle(item)"
/>
<image
v-else
:src="webUrl + '/page/hotel/zan-on-2.png'"
class="zan-on-icon"
@click="likeInfoItemHandle(item)"
/>
<text
v-show="item.zan > 0"
:class="item.zanVo ? 'on' : ''"
class="seeNum-txt"
>{{ item.zan }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else class="tab-no-data">
店主还没有上传内容哦~
</view>
</view>
<goo-skeleton v-else />
</view>
<view
v-if="activeIndex === 2"
class="pics-section"
>
<view
v-if="store.cultureImages.length > 0"
class="pics-list acea-row"
>
<view
v-for="(url, index) in store.cultureImages"
:key="index"
:style="{ width: picColumnWidth }"
class="pics-item"
@click="showPic(index)"
>
<image
:style="{
width: picColumnWidth,
height: picColumnWidth,
borderRadius: '8rpx'
}"
:src="url"
/>
</view>
</view>
<view v-else class="tab-no-data">
店主还没有上传内容哦~
</view>
</view>
<view
v-if="activeIndex === 3"
class="qualifications-section"
>
<view v-if="store.qualifications.length > 0">
<image
v-for="(item, index) in store.qualifications"
:key="index"
:src="item"
class="store-img"
mode="widthFix"
/>
</view>
<view v-else class="tab-no-data">
店主还没有上传内容哦~
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { getFarmerShop, setFarmerShopZan, getFarmerShopNews, getFarmerShopQualification } from '@/api/farmer'
import { postCountyFamousNewsZan, postCountyFamousNewsView } from '@/api/qianxian'
import {addStore, removeStore} from "@/api/favorite"
import imgBox from '@/components/imageTypeSet/imagebox.vue'
export default {
components: {
imgBox
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
scrollData: {},
id: '',
store: {},
tabList: [
{ text: '商品', value: 0, isShow: true },
{ text: '资讯', value: 1, isShow: true },
{ text: '文化', value: 2, isShow: true },
{ text: '资质', value: 3, isShow: true }
],
activeIndex: 0,
isLoadInfoListSuccess: false,
picColumnWidth: '325rpx',
infoArray: []
}
},
onPageScroll(e) {
this.scrollData = e
},
onLoad(opts) {
this.id = opts.id
this.getFarmerData()
uni.getSystemInfo({
success: (e) => {
// 两列商品宽度
this.picColumnWidth = (e.screenWidth - uni.upx2px(92)) / 2 + 'px'
}
})
},
methods: {
goGoodsConByID(item) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: item.productId
}
})
},
getNews() {
const params = {
page: 1,
limit: 9999,
farmerShopId: this.id
}
getFarmerShopNews(params).then(res => {
this.infoArray = res.data.records || []
this.isLoadInfoListSuccess = true
})
},
changeTab(index) {
this.activeIndex = index
if(index === 1) {
this.getNews()
} else {
this.isLoadInfoListSuccess = false
}
// this.loading = false
// // 刷新数据
// switch (this.activeIndex) {
// case 1:
// this.fetchInnInfoList()
// break
// case 0:
// this.fetchGoods()
// break
// default:
// break
// }
},
showLocation() {
if (!this.store.latitude || !this.store.longitude) {
this.$dialog.error('暂无位置信息')
} else {
uni.openLocation({
latitude: this.store.latitude,
longitude: this.store.longitude
})
}
},
likeInfoItemHandle(item) {
const params = {
countyFamousNewsId: item.id
}
postCountyFamousNewsZan(params).then(res => {
const {success} = res
if(success) {
this.getNews()
}
})
},
infoItemViewClick(item) {
const params = {
countyFamousNewsId: item.id
}
postCountyFamousNewsView(params).then(res => {
const {success} = res
if(success) {
this.getNews()
}
})
},
call() {
if (this.store.tel != undefined && this.store.tel.length > 0) {
uni.makePhoneCall({
// 手机号
phoneNumber: this.store.tel,
// 成功回调
success: (res) => {
console.log('调用成功!')
},
// 失败回调
fail: (res) => {
console.log('调用失败!')
}
})
} else {
this.$dialog.error('电话为空')
}
},
getFarmerData() {
getFarmerShop(this.id).then(res => {
this.store = res.data || {}
})
},
zanStore() {
const params = {
farmerShopId: this.id
}
setFarmerShopZan(params).then(res => {
const {success} = res
if(success) {
this.getFarmerData()
}
})
},
async doneFavorite() {
if (this.store.hasFavorite) {
const res = await removeStore(this.id)
if (res.success) {
this.getFarmerData()
}
} else {
const res = await addStore(this.id)
if (res.success) {
this.getFarmerData()
}
}
},
showPic: function (index) {
uni.previewImage({
current: index,
urls: this.store.cultureImages
})
},
}
}
</script>
<style lang="less" scoped>
.store-img {
width: 686rpx;
margin-bottom: 20rpx;
vertical-align: middle;
}
.tab-no-data {
text-align: center;
font-size: 32rpx;
color: #999;
line-height: 200rpx;
}
.btLine {
width: 100%;
height: 6rpx;
margin-top: 18rpx;
background: #0DC5C5;
}
.pics-box {
margin: 36rpx;
background: #fff;
}
.pics-list {
position: relative;
padding: 32rpx 0;
flex-wrap: wrap;
}
.pics-list .pics-item {
margin-left: 36rpx;
margin-top: 20rpx;
}
.info-section,
.pics-section,
.qualifications-section {
position: relative;
background-color: #f6f6f6;
}
.info-section,
.qualifications-section {
padding: 32rpx;
}
.info-section {
word-break: break-all;
.info-item + .info-item {
margin: 32rpx 0 0 0;
}
.info-item {
border-radius: 10rpx;
background-color: #fff;
.info-item-header {
position: relative;
padding: 20rpx 20rpx 0 20rpx;
&.info-item-top {
padding-top: 60rpx;
background-size: 100% 80rpx;
background-repeat: no-repeat;
background-image: url();
}
.name {
font-size: 16px;
color: #333;
font-weight: bold;
}
.intro {
margin: 10rpx 0 0 0;
color: #666;
font-size: 14px;
}
}
.info-item-body {
padding: 0 20rpx 20rpx 20rpx;
.video {
padding: 20rpx 0 0 0;
.video-item {
width: 100%;
height: 400rpx;
border-radius: 10rpx;
}
}
}
.info-item-bottom {
display: flex;
align-items: center;
padding: 20rpx;
border-top: 1px solid #f1f1f1;
font-size: 16px;
.time {
flex: 1;
color: #333;
}
.btns {
display: flex;
color: #999;
.flex + .flex {
margin: 0 0 0 32rpx;
}
.flex {
align-items: center;
}
.icon {
width: 32rpx;
height: 32rpx;
margin: 0 8rpx 0 0;
}
.zan-off-icon {
width: 40rpx;
height: 40rpx;
}
.zan-on-icon {
width: 40rpx;
height: 40rpx;
}
.seeNum-txt {
&.on {
color: #D81E06;
}
}
.more-btn {
position: relative;
.more-wrapper {
position: absolute;
right: -20rpx;
top: -150rpx;
z-index: 5;
width: 200rpx;
border-radius: 12rpx;
background-color: #fff;
box-shadow: 0px 1px 6px rgba(0,0,0,0.16);
.more-item + .more-item {
border-top: 1px solid #d5d5d5;
}
.more-item {
display: flex;
align-items: center;
justify-content: center;
height: 70rpx;
font-size: 14px;
color: #333;
.more-icon {
width: 36rpx;
height: 36rpx;
margin: 0 10rpx 0 0;
}
}
}
}
}
}
}
}
.goods-section {
padding: 40rpx 32rpx 0;
background: #F5F5FA;
.item {
position: relative;
width: 332rpx;
height: 528rpx;
box-sizing: border-box;
margin-right: 22rpx;
margin-bottom: 24rpx;
border-radius: 8rpx;
background: #fff;
.name {
padding: 8rpx 6rpx;
font-size: 26rpx;
line-height: 36rpx;
color: #333333;
height: 70rpx;
}
.price-line {
padding: 0 10rpx;
font-size: 26rpx;
line-height: 38rpx;
color: #ED0F0F;
}
.sales-line {
position: absolute;
bottom: 0;
width: 100%;
padding: 8rpx 10rpx 18rpx;
border-top: 1rpx solid #EFEFEF;
font-size: 24rpx;
line-height: 34rpx;
color: #8D8D8D;
}
}
.item:nth-child(2n) {
margin-right: 0;
}
.cover {
width: 332rpx;
height: 332rpx;
background: rgba(255, 255, 255, 0.39);
border-radius: 8rpx;
vertical-align: middle;
}
.label {
width: 40rpx;
height: 24rpx;
margin-right: 4rpx;
vertical-align: middle;
}
.icon {
width: 24rpx;
height: 24rpx;
margin-right: 6rpx;
vertical-align: middle;
}
.btn {
display: flex;
padding: 20rpx 0 40rpx 0;
justify-content: center;
.btn-cont {
padding: 13rpx 30rpx;
border: 1px solid #0DC5C5;
border-radius: 8rpx;
color: #0DC5C5;
.iconfont {
margin: 0 0 0 20rpx;
font-size: 24rpx;
}
}
}
}
.btLine {
width: 100%;
height: 6rpx;
margin-top: 18rpx;
background: #0DC5C5;
}
.tab-item-active {
color:#080F1A;
font-size:32rpx;
}
.tab-item-no-active {
color:#A6AAB3;
font-size:28rpx;
}
.top-tab {
margin: 60rpx 0 0 0;
border-bottom: 1px solid #ddd;
.tab {
margin: 0 35rpx;
&.hide {
display: none;
}
}
}
.map-info {
position: relative;
z-index: 5;
display: flex;
align-items: center;
padding: 40rpx 10rpx 40rpx 32rpx;
color: #333;
font-size: 14px;
.map-info-hd {
.icon {
display: block;
width: 56rpx;
height: 56rpx;
}
}
.map-info-bd {
flex: 1;
padding: 0 60rpx 0 20rpx;
line-height: 60rpx;
}
.map-info-ft {
.item + .item {
margin: 0 0 0 6rpx;
}
.item {
text-align: center;
font-weight: 500;
.img {
display: block;
width: 96rpx;
height: 96rpx;
margin: 0 0 -16rpx 0;
}
}
}
}
.inn-signature-wrap {
position: relative;
z-index: 5;
padding: 0 32rpx;
margin: 20rpx 0 0 0;
.triangle {
position: absolute;
top: -20rpx;
left: 72rpx;
width: 0;
height: 0;
border-left: 20rpx solid transparent;
border-right: 20rpx solid transparent;
border-bottom: 24rpx solid rgba(243,243,246,0.39);
}
.inn-signature {
position: relative;
padding: 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
color: #080F1A;
background: rgba(243,243,246,0.39);
box-shadow: 0px 6px 12px rgba(0,0,0,0.12);
}
.share-btn {
position: absolute;
right: 0;
bottom: -68rpx;
.img {
width: 212rpx;
height: 60rpx;
}
}
}
.zan-favorite-wrap {
font-size: 32rpx;
color: #333;
.on {
color: #FF564A;
}
}
.zan-box {
.img {
width: 36rpx;
height: 36rpx;
margin: 0 8rpx 0 0;
vertical-align: middle;
}
}
.favorite-box {
.icon {
width: 36rpx;
height: 36rpx;
margin: 0 8rpx 0 30rpx;
}
}
.cover-box {
position: relative;
.full-img {
width: 750rpx;
}
.video {
display: block;
width: 100%;
height: 100%;
}
}
.innInfoWrap {
position: relative;
margin-top: -76rpx;
padding: 20rpx 36rpx;
line-height: 1;
z-index: 1;
.bg-color {
position: absolute;
top: -5px;
left: 0;
right: 0;
z-index: 1;
height: 50%;
background: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
.box-mask {
position: absolute;
bottom: 0;
right: 0;
left: 166rpx;
box-sizing: border-box;
padding: 0 32rpx 12rpx 0;
.city-section {
width: 256rpx;
margin-left: 20rpx;
}
}
}
.body-cont {
position: relative;
z-index: 2;
}
}
.inn-logo {
flex-shrink: 0;
width: 56*2rpx;
height: 56*2rpx;
margin-right: 18rpx;
}
.inn-logo image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.inn-name {
width: 280rpx;
font-size: 32rpx;
color: #FFFFFF;
line-height: 48rpx;
}
.inn-owner {
font-size: 24rpx;
color: #8B8F99;
}
</style>
+1 -1
View File
@@ -734,7 +734,7 @@ export default {
return return
} }
uni.navigateTo({ uni.navigateTo({
url: '/pagesInn/inn/innHome?id=' + item.farmerShopId + '&isQianxian=1' url: '/pagesInn/inn/farmerStore?id=' + item.farmerShopId + '&isQianxian=1&from=famous&isFarmer=1'
}) })
}, },
load() { load() {