286 lines
7.7 KiB
Vue
286 lines
7.7 KiB
Vue
|
<template>
|
|||
|
|
<view id="stores" class="store" :style="[isHome?contentStyle:'']">
|
|||
|
|
<view class='pictrue' :style="[isHome || isHomeComb?logoStyleRadius:'']">
|
|||
|
|
<image :src="merchantInfo.avatar" class=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
<navigator :url="`/pages/merchant/${type}/index?merId=${merId}`" hover-class="none">
|
|||
|
|
<view class="flex merchantInfo">
|
|||
|
|
<text class="name" :style="!isHome?'color: #FFFFFF;':''">{{merchantInfo.name}}</text>
|
|||
|
|
<text v-if="isShowTypeId" class="iconfont icon-ic_rightarrow" :style="!isHome?'color: #FFFFFF;':''"></text>
|
|||
|
|
</view>
|
|||
|
|
</navigator>
|
|||
|
|
<view class="score">
|
|||
|
|
<text v-if="merchantInfo.isSelf" :class="marketingType !== ProductMarketingTypeEnum.Groupbuying && marketingType !== ProductMarketingTypeEnum.Seckill?'bg-color bg-color':'bg-red'" class="bt-color mr10 self_min merType">自营</text>
|
|||
|
|
<text v-if="isShowTypeId && merchantInfo.typeId"
|
|||
|
|
class="bt-color mr10 merType color-FAAD14">{{merchantInfo.typeId | merchantTypeFilter}}</text>
|
|||
|
|
<view class='starsList'>
|
|||
|
|
<block v-for="(itemn, indexn) in merchantInfo.starLevel" :key="indexn">
|
|||
|
|
<text class='iconfont icon-ic_star1 mr-4' :class="marketingType !== ProductMarketingTypeEnum.Groupbuying && marketingType !== ProductMarketingTypeEnum.Seckill?'font-color':'font-red'"></text>
|
|||
|
|
</block>
|
|||
|
|
<block v-show="Number(merchantInfo.starLevel)<5">
|
|||
|
|
<text v-for="(itemn, indexn) in noStarLevel" :key="indexn"
|
|||
|
|
class='iconfont icon-ic_star1 noCheck'></text>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<button v-if="type!=='home'" hover-class="none" class="merCollect merCollectBg"
|
|||
|
|
:class="merchantInfoNew.isCollect ? 'care' : ''" @click="followToggle" :style="[(isHome || isHomeComb) && merchantInfoNew.isCollect ? followColor : '']">
|
|||
|
|
<view v-if="!merchantInfoNew.isCollect" class="iconfont icon-ic_love"></view>
|
|||
|
|
<view class="line-heightOne">{{ merchantInfoNew.isCollect ? '已关注' : '关注' }}</view>
|
|||
|
|
</button>
|
|||
|
|
<navigator v-if="!isShowTypeId" :url="`/pages/merchant/${type}/index?merId=${merId}`" hover-class="none">
|
|||
|
|
<button class="merCollect" :class="marketingType !== ProductMarketingTypeEnum.Groupbuying && marketingType !== ProductMarketingTypeEnum.Seckill?'merCollectBg':'bg-red'" hover-class="none">进店</button>
|
|||
|
|
</navigator>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
import {
|
|||
|
|
getMerCollectAddApi,
|
|||
|
|
getMerCollectCancelApi
|
|||
|
|
} from '@/api/merchant.js';
|
|||
|
|
import {
|
|||
|
|
followMer
|
|||
|
|
} from '@/libs/follow.js';
|
|||
|
|
import {
|
|||
|
|
mapGetters
|
|||
|
|
} from "vuex";
|
|||
|
|
import {
|
|||
|
|
toLogin
|
|||
|
|
} from '@/libs/login.js';
|
|||
|
|
import {ProductMarketingTypeEnum} from "../../enums/productEnums";
|
|||
|
|
export default {
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters(["merchantClassify", "merchantType", 'isLogin', 'uid']),
|
|||
|
|
//最外层盒子的样式
|
|||
|
|
boxStyle() {
|
|||
|
|
return [];
|
|||
|
|
},
|
|||
|
|
//头像圆角
|
|||
|
|
logoStyleRadius() {
|
|||
|
|
if (this.dataConfig) {
|
|||
|
|
return {
|
|||
|
|
'borderRadius': this.dataConfig.logoStyleRadius.val ? this.dataConfig.logoStyleRadius
|
|||
|
|
.val + 'px' : '0'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
contentStyle() {
|
|||
|
|
if (this.dataConfig) {
|
|||
|
|
return {
|
|||
|
|
'background-color': '#fff',
|
|||
|
|
'border-radius': this.dataConfig.bgStyle ? 2 * this.dataConfig.bgStyle.val + 'rpx' : '0',
|
|||
|
|
'margin': this.dataConfig.mbConfig ? 2 * this.dataConfig.mbConfig.val + 'rpx' + ' ' + 2 * this.dataConfig.lrConfig
|
|||
|
|
.val +
|
|||
|
|
'rpx' +
|
|||
|
|
' ' + 0 : '0',
|
|||
|
|
|
|||
|
|
'padding': this.dataConfig.upConfig ? 2 * this.dataConfig.upConfig.val + 'rpx' + ' ' + '20rpx' + ' ' + 2 * this
|
|||
|
|
.dataConfig
|
|||
|
|
.downConfig
|
|||
|
|
.val + 'rpx' : '0'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 关注颜色
|
|||
|
|
followColor() {
|
|||
|
|
if (this.dataConfig) {
|
|||
|
|
return {
|
|||
|
|
border: '1px solid',
|
|||
|
|
color: this.dataConfig.followColor.color[0].item,
|
|||
|
|
background: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
// 商品类型:0-普通，1-秒杀seckill，2-拼团
|
|||
|
|
marketingType: {
|
|||
|
|
type: Number,
|
|||
|
|
default: () => 0
|
|||
|
|
},
|
|||
|
|
// 店铺diy中设置的数据，店铺首页diy中使用
|
|||
|
|
dataConfig: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {}
|
|||
|
|
},
|
|||
|
|
merchantInfo: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {}
|
|||
|
|
},
|
|||
|
|
// 商户id
|
|||
|
|
merId: {
|
|||
|
|
type: Number,
|
|||
|
|
default: () => 0
|
|||
|
|
},
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => 'detail'
|
|||
|
|
},
|
|||
|
|
isShowTypeId: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: () => true
|
|||
|
|
},
|
|||
|
|
//是否是首页展示，true是，false不是
|
|||
|
|
isHome: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: () => false
|
|||
|
|
},
|
|||
|
|
//店铺主页是否是头部组件中使用的diy
|
|||
|
|
isHomeComb: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: () => false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
ProductMarketingTypeEnum: ProductMarketingTypeEnum,
|
|||
|
|
skeletonShow: true,
|
|||
|
|
isShow: true,
|
|||
|
|
avatar: '',
|
|||
|
|
merchantInfoNew: {
|
|||
|
|
...this.merchantInfo
|
|||
|
|
},
|
|||
|
|
noStarLevel: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
merchantInfo: {
|
|||
|
|
handler(newValue, oldValue) {
|
|||
|
|
this.merchantInfoNew = newValue
|
|||
|
|
this.getnoStarLevel()
|
|||
|
|
},
|
|||
|
|
immediate: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getnoStarLevel: function(nVal, oVal) {
|
|||
|
|
if (parseInt(this.merchantInfoNew.starLevel) < 5) this.noStarLevel = 5 - parseInt(this.merchantInfoNew
|
|||
|
|
.starLevel);
|
|||
|
|
},
|
|||
|
|
// 设置是否关注
|
|||
|
|
followToggle: function() {
|
|||
|
|
if (this.isLogin === false) {
|
|||
|
|
toLogin();
|
|||
|
|
} else {
|
|||
|
|
followMer(this.merchantInfoNew.isCollect, this.merId).then(() => {
|
|||
|
|
this.$set(this.merchantInfoNew, 'isCollect', !this.merchantInfoNew.isCollect);
|
|||
|
|
this.$store.commit('MERCHANTJINFO', {
|
|||
|
|
...this.merchantInfoNew
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.noCheck {
|
|||
|
|
color: rgba(204, 204, 204, .5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.care {
|
|||
|
|
border: 1px solid #FFFFFF;
|
|||
|
|
background: inherit !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
//font-size: 24rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-pingweifen {
|
|||
|
|
color: #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchantInfo {
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store {
|
|||
|
|
position: relative;
|
|||
|
|
// z-index: 5;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
//width: 100%;
|
|||
|
|
|
|||
|
|
// top:12rpx;
|
|||
|
|
.pictrue {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.easy-loadimage,
|
|||
|
|
image,
|
|||
|
|
uni-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
margin-left: 12rpx;
|
|||
|
|
|
|||
|
|
navigator {
|
|||
|
|
// display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
max-width: 100%;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
min-width: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.score {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.self_min {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.starsList {
|
|||
|
|
padding-bottom: 4rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|