377 lines
8.6 KiB
Vue
377 lines
8.6 KiB
Vue
<template>
|
||
<view>
|
||
<view v-if="merchantList.length" class="store-wrapper">
|
||
<view v-for="(item,index) in merchantList" :key="item.id">
|
||
<view v-if="(item.proList&&item.proList.length && isStreet) || (!isStreet)" class="store-item" :class="isStreet?'street-noPad':''"
|
||
:style="[isStreet ? { 'background-image': item.streetBackImage?'url('+ item.streetBackImage +')': 'url('+ moren +')' } : '',isHome?merchantStyle.contentStyle:'']">
|
||
<view @click="goShop(item.id)" class="head" :class="isStreet?'street-backImage':''">
|
||
<view class="left-wrapper">
|
||
<view class="logo" :class="isStreet?'street-logo':''" :style="{'background-image': isStreet?`url(${urlDomain}crmebimage/presets/shang.png)`:''}">
|
||
<image v-show="(isShowHome.logoShow&&isHome) ||!isHome" :src="isStreet?item.rectangleLogo:item.avatar" mode=""></image>
|
||
</view>
|
||
<view class="con-box">
|
||
<view class="name line1 acea-row row-middle" :class="isStreet?'street-name':''" :style="[isHome?merchantStyle.nameColor:'']">
|
||
<text v-show="(isShowHome.nameShow&&isHome) ||!isHome" class="mer_name line1">{{item.name}}</text>
|
||
<text v-if="item.isSelf && ((isShowHome.typeShow&&isHome) ||!isHome)" class="font-bg-red mr10 merType" :class="isHome?'':'bg-color'" :style="[isHome?merchantStyle.labelColor:'']">自营</text>
|
||
</view>
|
||
<view class="star-box">
|
||
<view v-if="!isStreet" class="score">
|
||
<view class='starsList'>
|
||
<block v-for="(itemn, indexn) in item.starLevel" :key="indexn">
|
||
<text class='iconfont icon-pingfen font-color'></text>
|
||
</block>
|
||
<block v-show="Number(item.starLevel)<5">
|
||
<text v-for="(itemn, indexn) in 5-parseInt(item.starLevel)" :key="indexn" class='iconfont icon-pingfen noCheck'></text>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view v-show="!isStreet" class="lines tui-skeleton-rect"></view>
|
||
<view class="fans" :style="isStreet?'color:#fff':'color:#999'">
|
||
{{ item.followerNum < 10000 ? item.followerNum : (item.followerNum / 10000).toFixed(2) + '万' }}人关注
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="!isStreet" class="link" @click="goShop(item.id)">进店</view>
|
||
</view>
|
||
<view v-if="item.proList.length" class="pic-wrapper" :class="isStreet?'street-wrapper':''">
|
||
<view v-for="(goods,indexn) in item.proList" :key="indexn" class="proList"
|
||
@click="godDetail(goods)">
|
||
<view class="pic-item" :class="isStreet?'street-pic':''">
|
||
<image :src="goods.image" mode="aspectFill"></image>
|
||
<!-- <easy-loadimage :image-src="goods.image"></easy-loadimage> -->
|
||
<view v-if="!isStreet" class="price">
|
||
<text>￥</text>{{goods.price}}
|
||
</view>
|
||
</view>
|
||
<view class="pic-name line2" v-if="isStreet">{{goods.name}}</view>
|
||
<view v-if="isStreet" class="street-price">
|
||
￥{{goods.price}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
import {
|
||
goProductDetail
|
||
} from '@/libs/order.js'
|
||
import {
|
||
mapGetters
|
||
} from "vuex";
|
||
import easyLoadimage from '@/components/base/easy-loadimage.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
urlDomain: this.$Cache.get("imgHost"),
|
||
skeletonShow: true,
|
||
isShow: true,
|
||
moren: '',
|
||
noStarLevel: 0
|
||
}
|
||
},
|
||
components: {
|
||
easyLoadimage
|
||
},
|
||
computed: mapGetters(['uid']),
|
||
props: {
|
||
merchantList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
//是否是店铺街，true是，false不是
|
||
isStreet: {
|
||
type: Boolean,
|
||
default: () => false
|
||
},
|
||
//是否是首页展示，true是，false不是
|
||
isHome: {
|
||
type: Boolean,
|
||
default: () => false
|
||
},
|
||
//首页中展示字段判断
|
||
isShowHome: {
|
||
type: Object,
|
||
default: () => ({
|
||
logoShow: true,
|
||
typeShow:true,
|
||
nameShow: true
|
||
})
|
||
},
|
||
merchantStyle: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
},
|
||
created() {
|
||
this.moren = this.urlDomain + 'crmebimage/presets/mermoren.png';
|
||
},
|
||
methods: {
|
||
godDetail(item) {
|
||
goProductDetail(item.id, 0, '')
|
||
},
|
||
menusTap(url) {
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
},
|
||
goShop(id) {
|
||
uni.navigateTo({
|
||
url: `/pages/merchant/home/index?id=${id}`
|
||
})
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.mb8{
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.noCheck{
|
||
color: #ddd;
|
||
}
|
||
.score {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
line-height: 1;
|
||
height: 19rpx;
|
||
|
||
.iconfont {
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
.store-wrapper {
|
||
//padding: 0 20rpx;
|
||
}
|
||
|
||
.star-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.lines {
|
||
width: 2rpx;
|
||
height: 14rpx;
|
||
background: #BFBFBF;
|
||
border-radius: 0px 0px 0px 0px;
|
||
opacity: 1;
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.fans {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.num {
|
||
color: $theme-color;
|
||
font-size: 24rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.street {
|
||
&-logo {
|
||
width: 191rpx !important;
|
||
height: 80rpx !important;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 0 !important;
|
||
margin-right: 0 !important;
|
||
|
||
image {
|
||
width: 130rpx !important;
|
||
height: 44rpx !important;
|
||
margin-top: 13rpx;
|
||
margin-left: 17rpx;
|
||
}
|
||
}
|
||
|
||
&-name {
|
||
color: #fff;
|
||
}
|
||
|
||
&-pad20 {
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
&-noPad {
|
||
border-top-left-radius: 16rpx;
|
||
border-top-right-radius: 16rpx;
|
||
width: 100%;
|
||
height: 353rpx;
|
||
padding: 24rpx !important;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 97rpx !important;
|
||
}
|
||
|
||
&-pic {
|
||
border-radius: 8rpx !important;
|
||
overflow: hidden;
|
||
margin-right: 12rpx !important;
|
||
}
|
||
|
||
&-price {
|
||
font-size: 28rpx;
|
||
color: #FD502F;
|
||
margin-top: 5rpx;
|
||
|
||
font-weight: 800;
|
||
}
|
||
|
||
&-wrapper {
|
||
padding: 20rpx !important;
|
||
margin-top: -2rpx;
|
||
}
|
||
|
||
&-active {
|
||
background-size: 111rpx 19rpx;
|
||
}
|
||
}
|
||
|
||
.backImage {
|
||
|
||
padding: 24rpx 0 24rpx 20rpx;
|
||
border-radius: 16px 16px 0px 0px;
|
||
}
|
||
|
||
.store-item {
|
||
margin-bottom: 30rpx;
|
||
padding: 24rpx;
|
||
background-color: #fff;
|
||
border-radius: 24rpx;
|
||
|
||
.head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.logo {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
margin-right: 20rpx;
|
||
|
||
image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.con-box {
|
||
.bt-color {
|
||
width: max-content;
|
||
white-space: nowrap;
|
||
font-size: 16rpx;
|
||
padding: 2rpx 10rpx;
|
||
background-color: #fff;
|
||
@include main_color(theme);
|
||
border-radius: 13rpx;
|
||
|
||
}
|
||
|
||
.name {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin-top: -7rpx;
|
||
|
||
.mer_name {
|
||
max-width: 400rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.link {
|
||
width: 114rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
@include linear-gradient(theme);
|
||
border-radius: 25rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.pic-wrapper {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-rows: auto;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-gap: 20rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 0px 16rpx 16rpx 16rpx;
|
||
padding-top: 20rpx;
|
||
|
||
.pic-name {
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.pic-item {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 170rpx;
|
||
overflow: hidden;
|
||
border-radius: 14rpx;
|
||
|
||
.easy-loadimage,
|
||
image,
|
||
uni-image {
|
||
overflow: hidden;
|
||
border-radius: 16rpx;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.price {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 36rpx;
|
||
padding: 0 10rpx;
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
background: rgba(0, 0, 0, .5);
|
||
border-radius: 16rpx 2rpx 16rpx 2rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
|
||
text {
|
||
font-size: 18rpx;
|
||
}
|
||
}
|
||
|
||
&:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|