wanma-benteng
/
new-mshop-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加：商家组件添加风格三样式

This commit is contained in:
wuhui_zzw 2023-11-17 17:55:03 +08:00
parent 7b862c9946
commit 62e5573bcb
1 changed files with 410 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

413
pages/index/component/shopList.vue
View File

@ -5,6 +5,7 @@
<image class="title-img" mode="widthFix" :src="logoUrl"></image>
</view>
<view class="mer-box">
<!-- 风格一 -->
<block v-if="tabConfig == 0">
<view class="mer-item" v-for="(item, index) in brandList" :key="index" :style="'border-radius:'+bgStyle+'rpx'">
<view class="mer-hd" @click="goStore(item.mer_id)" :style="'border-radius:'+bgStyle+'rpx '+bgStyle+'rpx 0 0'">
@ -38,13 +39,74 @@
</view>
</view>
</block>
<block v-else>
<!-- 风格二 -->
<block v-else-if="tabConfig == 1">
<view class="mer_count">
<view class="item" v-for="(item, index) in brandList" :key="index" @click="goStore(item.mer_id)">
<image :src="item.mer_avatar" mode="widthFix"></image>
</view>
</view>
</block>
<!-- 风格三 -->
<block v-else-if="tabConfig == 2">
<view class="mobile-page-style-3">
<view class="shop-block" v-for="(item, index) in brandList" :key="index" :style="'border-radius:'+bgStyle+'rpx'">
<view class="shop-block-top">
<view class="image">
<image class="store-avatar" :src="item.mer_avatar" mode="widthFix"></image>
<view class="store-type" v-if="item.type_name">{{ item.type_name }}</view>
</view>
<view class="store-desc">
<view class="store-name">
<view class="store-title">{{ item.mer_name }}</view>
<view class="store-name-label" v-if="item.is_best">优选</view>
</view>
<view class="statistics">
<view class="stars">
<text :class="['iconfont', 'icon-shitixing', 'stars-i',{'active-i': (item.service_score >= 1)}]"></text>
<text :class="['iconfont', 'icon-shitixing', 'stars-i',{'active-i': (item.service_score >= 2)}]"></text>
<text :class="['iconfont', 'icon-shitixing', 'stars-i',{'active-i': (item.service_score >= 3)}]"></text>
<text :class="['iconfont', 'icon-shitixing', 'stars-i',{'active-i': (item.service_score >= 4)}]"></text>
<text :class="['iconfont', 'icon-shitixing', 'stars-i',{'active-i': (item.service_score >= 5)}]"></text>
</view>
<view class="per-avg">人均 {{ item.avg_consumption }} 元</view>
<view class="month-sale">月售 {{ item.month_sales }}</view>
</view>
<view class="class-address">
<view class="store-class">{{ item.category_name }}</view>
<view class="store-address">{{ item.mer_address }}</view>
<view class="store-distance">{{ item.distance }}</view>
</view>
<view class="other-label-list" v-if="item.mer_label">
<view class="other-label-item" v-for="label_name in item.mer_label.split(',')">
{{label_name}}
</view>
</view>
</view>
</view>
<view class="goods-list">
<!--仅显示2个商品-->
<view class="goods-block" v-for="(goodsInfo,index) in item.all_recommend" :key="index" v-if="index <= 1">
<view class="left-label">
<view class="left-label-tag" v-if="goodsInfo.brand_name">{{ goodsInfo.brand_name }}</view>
</view>
<div class="right-desc">
<!--<view class="goods-info-left">-->
<text class="iconfont icon-goumaishangpin goods-info-left-icon"></text>
<view class="price">¥{{ goodsInfo.price }}</view>
<view class="line-price">¥{{ goodsInfo.ot_price }}</view>
<!--</view>-->
<!--<view class="goods-info-right">-->
<view class="goods-name">{{ goodsInfo.store_name }}</view>
<text class="iconfont icon-xiangyou goods-info-right-icon"></text>
<!--</view>-->
</div>
</view>
</view>
</view>
</view>
</block>
<!-- 统一底部 -->
<view class="more-shop" @click="moreShop">
<text>更多店铺</text>
<text class="iconfont icon-xiangyou"></text>
@ -86,11 +148,13 @@ export default {
priceShow: this.dataConfig.priceShow.val,
diy_id: this.dataConfig.did,
unique: this.dataConfig.timestamp,
latitude: 0,
longitude: 0
}
},
created() {},
mounted() {
this.storeMerchant();
this.selfLocation();
},
methods: {
// 进店看看
@ -114,11 +178,37 @@ export default {
unique: this.unique,
page: 1,
limit: this.numConfig ? this.numConfig : 4,
is_best: 1
is_best: 1,
latitude: this.latitude || 0,
longitude: this.longitude || 0
}).then(res => {
this.brandList = res.data.list;
});
},
//获取定位
selfLocation() {
let self = this
uni.getLocation({
type: 'gcj02',
success: (res) => {
console.log(res)
let latitude, longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
self.latitude = res.latitude
self.longitude = res.longitude
console.log(res)
self.storeMerchant();
},
complete: function() {
// self.getList();
self.storeMerchant();
}
});
},
}
};
</script>
@ -278,6 +368,10 @@ export default {
font-size: 22rpx;
}
}
}
}
.mer_count{
@ -303,4 +397,317 @@ export default {
}
}
}
.mobile-page-style-3{
--store-avatar-size-: 200rpx;
.shop-block{
--shop-block-background-: #ffffff;
padding: 20rpx;
background: var(--shop-block-background-);
margin-bottom: 20rpx;
.shop-block-top{
width: 100%;
height: var(--store-avatar-size-);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
.image{
height: var(--store-avatar-size-);
width: var(--store-avatar-size-);
position: relative;
border-radius: 10rpx;
overflow: hidden;
.store-avatar{
width: 100% !important;
height: 100% !important;
}
.store-type{
position: absolute;
top: 0;
left: 0;
height: 36rpx;
line-height: 36rpx;
padding: 0 10rpx;
font-size: 24rpx;
background: #f5dda9;
color: #000000;
border-radius: 6rpx;
}
}
.store-desc{
padding-left: 20rpx;
width: calc(100% - var(--store-avatar-size-));
height: var(--store-avatar-size-);
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: flex-start;
.store-name{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
height: 50rpx;
line-height: 50rpx;
.store-title{
font-size: 30rpx;
font-weight: bold;
max-width: calc(100% - 80rpx);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.store-name-label{
height: 34rpx;
line-height: 36rpx;
font-size: 24rpx;
background: black;
color: #93674b;
border-radius: 6rpx;
width: 70rpx;
text-align: center;
margin-left: 10rpx;
}
}
.statistics{
--stars-width-: 160rpx;
--month-sale-width-: 130rpx;
--stars-size-: calc((var(--stars-width-) - 10rpx) / 5);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50rpx;
font-size: 24rpx;
.stars{
width: var(--stars-width-);
.stars-i{
height: var(--stars-size-) !important;
line-height: var(--stars-size-) !important;;
width: var(--stars-size-) !important;
background: #cccccc;
color: #FFFFFF;
float: left;
text-align: center;
border-radius: 2rpx;
font-size: 22rpx;
}
.stars-i:not(:last-child){
margin-right: 2rpx;
}
.active-i{
background: #f65906!important;
}
}
.per-avg{
width: calc(100% - (var(--stars-width-) + var(--month-sale-width-)));
padding-left: 10rpx;
height: 30rpx;
line-height: 32rpx;
color: #919191;
}
.month-sale{
text-align: right;
width: var(--month-sale-width-);
height: 30rpx;
line-height: 32rpx;
color: #919191;
}
}
.class-address{
height: 50rpx;
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #7a7a7a;
.store-class{
width: 130rpx;
white-space: nowrap;
overflow: hidden;
margin-right: 10rpx;
}
.store-address{
width: calc(100% - 130rpx - 120rpx);
white-space: nowrap;
overflow: hidden;
}
.store-distance{
color: #3a3a3a;
width: 120rpx;
white-space: nowrap;
overflow: hidden;
text-align: right;
}
}
.other-label-list{
height: 50rpx;
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
white-space: nowrap;
overflow: hidden;
.other-label-item{
height: 36rpx;
line-height: 36rpx;
padding: 0 10rpx;
background: #fcf0e6;
color: #f19d75;
border-radius: 6rpx;
font-size: 24rpx;
}
.other-label-item:not(:last-child){
margin-right: 10rpx;
}
}
}
}
.goods-list{
width: 100%;
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
.goods-block{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
height: 60rpx;
.left-label{
--left-label-tag-border-color-: #f8ddd4;
width: var(--store-avatar-size-);
height: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
padding-right: 20rpx;
.left-label-tag{
border: 2rpx solid var(--left-label-tag-border-color-);
padding: 0 10rpx 0 20rpx;
height: 44rpx;
line-height: 44rpx;
font-size: 24rpx;
color: #e75a29;
position: relative;
}
.left-label-tag:after, .left-label-tag:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
top: -4rpx;
width: 0;
}
.left-label-tag:after {
border-width: 20rpx;
border-left-color: var(--shop-block-background-);
top: 0;
}
.left-label-tag:before {
border-width: 24rpx;
border-left-color: var(--left-label-tag-border-color-);
}
}
.right-desc{
width: calc((100% - var(--store-avatar-size-)));
height: 100%;
padding-left: 20rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
//.goods-info-left{
// width: calc((100% - var(--store-avatar-size-)) * 0.4);
// height: 100%;
// display: inline-flex;
// flex-direction: row;
// flex-wrap: nowrap;
// justify-content: flex-start;
// align-items: center;
.goods-info-left-icon{
height: 36rpx;
width: 36rpx;
background: linear-gradient(180deg, #fd931e, #ec6b00);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin-right: 10rpx;
color: #FFFFFF;
}
.price{
color: #e33a25;
font-size: 24rpx;
margin-right: 10rpx;
}
.line-price{
color: #767676;
font-size: 24rpx;
text-decoration: line-through;
}
//}
//.goods-info-right{
// width: calc((100% - var(--store-avatar-size-)) * 0.6);
// height: 100%;
// display: inline-flex;
// flex-direction: row;
// flex-wrap: nowrap;
// justify-content: flex-start;
// align-items: center;
.goods-name{
width: calc(100% - 30rpx);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 20rpx;
font-size: 24rpx;
}
.goods-info-right-icon{
height: 60rpx;
line-height: 60rpx;
width: 30rpx;
text-align: center;
font-size: 30rpx;
}
//}
}
}
}
}
}
</style>