You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
9.4 KiB
290 lines
9.4 KiB
<!-- 商铺信息 -->
|
|
<template>
|
|
<view class="container">
|
|
<!-- 商铺详情3 -->
|
|
<view class="shopInfo-3">
|
|
<view class="shopInfo-tabbar dis-flex b-f">
|
|
<view class="tabbar-item flex-box t-c p-r" v-for="(tabItem,index) in shopinfoData" @click="selectTabbar(tabItem)" :key="index">
|
|
<text class="f-28" :class="currentTab===tabItem.order?'tabbar-item-active':''">{{tabItem['title']}}</text>
|
|
<view class="tabbar-item-active-btm" v-if="currentTab===tabItem.order"></view>
|
|
</view>
|
|
</view>
|
|
<view class="shop b-color-f8" style="padding: 20upx 30upx 60upx;">
|
|
<view class="shangjia" style="padding-bottom: 80upx;">
|
|
<view class="shangjia-i" :class="{shangjiaISty: item2.goods.length == 0}" v-for="(item2, key2) in shopInfoList"
|
|
:key="key2">
|
|
<view class="a shangjia-i-t" @click="navigateTo(item2.shop_url,item2,shopInfoList)">
|
|
<view class="shangjia-i-l">
|
|
<image class="image" :src="item2.logo" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="shangjia-i-r">
|
|
<view class="shangjia-i-r-d">
|
|
<view class="dis-flex flex-y-center flex-x-between">
|
|
<view class="shop3-title-width shangjia-i-r-t1 over-omit onelist-hidden">{{ item2.storename }}</view>
|
|
<view class="store-containerIcon dis-flex flex-y-center">
|
|
<image :src="imgfixUrls + 'citydeliveryicon.png'" class="image30" v-if="item2.deliverystatus == 1" />
|
|
<image :src="imgfixUrls + 'homePage/home_logo2.png'" class="image30" v-if="item2['attestation']['attestation'] == 2" />
|
|
<image :src="imgfixUrls + 'homePage/home_logo3.png'" class="image30" v-if="item2['attestation']['bondflag'] == 1" />
|
|
<image :src="imgfixUrls + 'diypage/720icon.png'" mode="" class="m-right10" v-if="item2.panorama===1"></image>
|
|
<image :src="imgfixUrls + 'diypage/videoicon.png'" mode="" v-if="item2.videourl===1"></image>
|
|
</view>
|
|
</view>
|
|
<view class="shangjia-i-r-t2 over-omit dis-flex flex-x-between flex-y-center">
|
|
<view class="dis-flex flex-y-center">
|
|
<view class="shangjia-i-r-t2-icon">
|
|
<view class="star star-dark">
|
|
<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view>
|
|
</view>
|
|
<view class="star star-light">
|
|
<view class="star-width" :style="'width:'+(item2.score / 5) * 100+'%;'">
|
|
<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="f-28 col-6 star-grade">{{item2.score}}分</view>
|
|
</view>
|
|
<view class="shop3-distance f-24 col-6" v-if="!!item2.distance">{{item2.distance}}</view>
|
|
</view>
|
|
<view class="shangjia-i-r-t3 over-omit">
|
|
<view class="p" v-html="item2.storehours"></view>
|
|
</view>
|
|
<view class="shangjia-i-r-t3 over-omit" v-if="item2.catename">
|
|
<view class="p">{{item2.catename}}</view>
|
|
</view>
|
|
<view class="shangjia-i-r-t4 over-omit">
|
|
<view v-for="(item3,index3) in item2.tags" class="tags_view" :key="index3">{{item3}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shangjia-i-b" style="margin-top: 20upx;" v-if="((shopFold && shopFoldIndex == key2) || (shopFoldIndex !== key2)) && item2.goods.length > 0">
|
|
<view class="shangjia-i-b-t1" v-if="item2.goods.length <= 2">
|
|
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0">
|
|
<view class="em" :class="tag.css">{{ tag.tag }}</view>
|
|
<view class="span">{{ tag.name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="shangjia-i-b-t1" @click="shangjiaFold(key2)" v-if="item2.goods.length > 2">
|
|
<view class="i icon iconfont icon-unfold"></view>
|
|
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0">
|
|
<view class="em" :class="tag.css">{{ tag.tag }}</view>
|
|
<view class="span">{{ tag.name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="item2.goods.length == 2 && key3 == 1">
|
|
<view class="em" :class="tag.css">{{ tag.tag }}</view>
|
|
<view class="span">{{ tag.name }}</view>
|
|
</view>
|
|
<view class="shangjia-i-b-t2" v-if="item2.goods.length > 2">
|
|
<view class="em" :class="tag.css" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 > 0">{{ tag.tag }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="shangjia-i-b" style="margin-top: 20upx;" v-if="!shopFold && shopFoldIndex == key2 && item2.goods.length > 2">
|
|
<view class="shangjia-i-b-t1" @click="shangjiaUpFold(key2)">
|
|
<view class="i icon iconfont icon-fold"></view>
|
|
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3">
|
|
<view class="em" :class="tag.css">{{ tag.tag }}</view>
|
|
<view class="span">{{ tag.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style=" background-color: #F8F8F8;">
|
|
<load-more :isMore="loadingMore"></load-more>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js'
|
|
import loadMore from '@/components/template/loadmore.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentTab: null,
|
|
shopFold: true,
|
|
shopFoldIndex: -1,
|
|
shopInfoList: null,
|
|
pageTotal: null,
|
|
current_page: 1,
|
|
tabItemInfo: {},
|
|
scrollTop: 0,
|
|
loadingMore: false,
|
|
mobileHeight: 0,
|
|
img:''
|
|
}
|
|
},
|
|
components: {
|
|
loadMore
|
|
},
|
|
props: {
|
|
shopinfoData: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
},
|
|
shopinfoStyle: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
computed:{
|
|
curLoction(){
|
|
return uni.getStorageSync('curLoction')
|
|
}
|
|
},
|
|
mounted() {
|
|
this.img = this.imgfixUrl;
|
|
uni.$on('isBottomMore',this.shopInfomore);
|
|
},
|
|
destroyed() {
|
|
uni.$off('isBottomMore',this.shopInfomore);
|
|
},
|
|
watch: {
|
|
'shopinfoData': {
|
|
handler(newData, oldData) {
|
|
if (!!newData && Object.keys(newData)['length'] > 0) {
|
|
let tabItem = Object.keys(newData)[0];
|
|
this.selectTabbar(newData[tabItem])
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
selectTabbar(tabItem, page = 1, isPage = false) {
|
|
let _this = this,
|
|
requestData = {
|
|
order: tabItem.order,
|
|
is_total: "1",
|
|
page,
|
|
lat: !!_this.curLoction ? _this.curLoction.latitude : '',
|
|
lng: !!_this.curLoction ? _this.curLoction.longitude : ''
|
|
};
|
|
App._post_form('&p=store&do=homeList', requestData, res => {
|
|
let storeList = res.data.list;
|
|
for (let i = 0; i < storeList.length; i++) {
|
|
let goodsList = [];
|
|
for (let j in storeList[i].goods) {
|
|
let goodsData = storeList[i].goods[j];
|
|
if (goodsData !== '') {
|
|
if (j == 'active') {
|
|
goodsData.css = 'qiang'
|
|
goodsData.tag = '抢'
|
|
} else if (j == 'coupon') {
|
|
goodsData.css = 'hui'
|
|
goodsData.tag = '券'
|
|
} else if (j == 'fightgroup') {
|
|
goodsData.css = 'pin'
|
|
goodsData.tag = '拼'
|
|
} else if (j == 'groupon') {
|
|
goodsData.css = 'tuan'
|
|
goodsData.tag = '团'
|
|
} else if (j == 'halfcard') {
|
|
goodsData.css = 'ka'
|
|
goodsData.tag = '卡'
|
|
} else if (j == 'packages') {
|
|
goodsData.css = 'li'
|
|
goodsData.tag = '礼'
|
|
}else if (j == 'bargain') {
|
|
goodsData.css = 'kan'
|
|
goodsData.tag = '砍'
|
|
}
|
|
goodsList.push(goodsData);
|
|
}
|
|
}
|
|
storeList[i].goods = goodsList;
|
|
}
|
|
if (isPage) {
|
|
if (storeList.length > 0) {
|
|
_this["shopInfoList"].push(...storeList);
|
|
} else {
|
|
_this.loadingMore = true;
|
|
}
|
|
} else {
|
|
_this.setData({
|
|
current_page: 1,
|
|
shopInfoList: storeList,
|
|
currentTab: tabItem.order,
|
|
pageTotal: res.data.total,
|
|
tabItemInfo: tabItem,
|
|
loadingMore: storeList.length === 0 || _this.current_page === res.data.total,
|
|
scrollTop: 0
|
|
})
|
|
}
|
|
}, false, () => {})
|
|
},
|
|
navigateTo(url,aa,bb) {
|
|
|
|
let isHttpUrl = url.indexOf('https') !== -1;
|
|
if (isHttpUrl) {
|
|
location.href = url;
|
|
} else {
|
|
App.navigationTo({
|
|
url: url
|
|
})
|
|
}
|
|
console.log(url,isHttpUrl);
|
|
},
|
|
shangjiaFold(key2) {
|
|
this.shopFold = false
|
|
this.shopFoldIndex = key2
|
|
},
|
|
shangjiaUpFold(key2) {
|
|
this.shopFold = true
|
|
this.shopFoldIndex = key2
|
|
},
|
|
shopInfomore() {
|
|
if (this.current_page >= this.pageTotal) {
|
|
this.loadingMore = true;
|
|
return false;
|
|
}
|
|
console.log(this.current_page,this.pageTotal)
|
|
this.selectTabbar(this.tabItemInfo, ++this.current_page, true);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../../../common/css/old_diyPages";
|
|
|
|
// 商铺3
|
|
.shopInfo-3 {
|
|
.shopInfo-tabbar {
|
|
.tabbar-item-active {
|
|
color: #FF4444;
|
|
}
|
|
|
|
.tabbar-item {
|
|
padding-bottom: 20upx;
|
|
&>text {
|
|
display: inline-block;
|
|
height: 70upx;
|
|
line-height: 60upx;
|
|
}
|
|
}
|
|
|
|
.tabbar-item-active-btm {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
width: 56upx;
|
|
height: 8upx;
|
|
background: rgba(255, 68, 68, 1);
|
|
border-radius: 8upx 8upx 0 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|