店铺优化
This commit is contained in:
parent
4ab82767f2
commit
50a2cac271
@ -186,29 +186,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="pic-wrapper">
|
||||
<view class="pic-item" v-for="(goods,index) in item.recommend" :key="index">
|
||||
<navigator :url="`/pages/goods_details/index?id=${goods.product_id}`">
|
||||
<image :src="goods.image" mode=""></image>
|
||||
<view class="price">
|
||||
<text>¥</text>{{goods.price}}
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <scroll-view scroll-x="true" class="pro-box" :class="'styleType'+store_street_theme">
|
||||
<navigator :url="`/pages/goods_details/index?id=${itemn.product_id}`"
|
||||
hover-class="none" class="pro-item" v-for="(itemn,indexn) in item.recommend" :key='indexn'>
|
||||
<view class="picture">
|
||||
<easy-loadimage mode="widthFix" :image-src="itemn.image"></easy-loadimage>
|
||||
<view v-if="itemn.border_pic" :style="{ backgroundImage: `url(${itemn.border_pic})` }"
|
||||
class="border-picture"></view>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text>¥</text>{{itemn.price}}
|
||||
</view>
|
||||
</navigator>
|
||||
</scroll-view> -->
|
||||
</view>
|
||||
<view class='loadingicon acea-row row-center-wrapper' v-if='loading'>
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||||
@ -1502,8 +1479,6 @@
|
||||
|
||||
.store-item {
|
||||
margin: 20rpx auto;
|
||||
// padding: 40rpx 20rpx;
|
||||
// background-color: #fff;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
@ -1614,56 +1589,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// .left-wrapper {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// .logo {
|
||||
// width: 80rpx;
|
||||
// height: 80rpx;
|
||||
// image {
|
||||
// width: 80rpx;
|
||||
// height: 80rpx;
|
||||
// border-radius: 6rpx;
|
||||
// }
|
||||
// }
|
||||
// .con-box {
|
||||
// margin-left: 20rpx;
|
||||
// .font-bg-red {
|
||||
// width: max-content;
|
||||
// white-space: nowrap;
|
||||
// margin-left: 20rpx;
|
||||
// font-size: 18rpx;
|
||||
// padding: 2rpx 10rpx;
|
||||
// color: #FFFFFF;
|
||||
// background-color: #E93323;
|
||||
// border-radius: 13rpx;
|
||||
// }
|
||||
// .name {
|
||||
// font-size: 30rpx;
|
||||
// color: #333;
|
||||
// font-weight: bold;
|
||||
// margin-bottom: 10rpx;
|
||||
// .store-margin{
|
||||
// width: 28rpx;
|
||||
// height: 30rpx;
|
||||
// margin-left: 10rpx;
|
||||
// }
|
||||
// .mer_name{
|
||||
// max-width: 360rpx;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .link {
|
||||
// width: 114rpx;
|
||||
// height: 50rpx;
|
||||
// line-height: 50rpx;
|
||||
// background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
||||
// border-radius: 25rpx;
|
||||
// text-align: center;
|
||||
// color: #fff;
|
||||
// font-size: 24rpx;
|
||||
// }
|
||||
}
|
||||
|
||||
.pro-box {
|
||||
|
@ -22,8 +22,8 @@
|
||||
</view>
|
||||
<view class="nav-wrapper" :class="'styleType'+store_street_theme">
|
||||
<view class='nav acea-row row-middle' :class="'styleType'+store_street_theme">
|
||||
<view v-for="item in downMenus" :key="item.key" class='item' :class="{'font-colors':firstKey == item.key}"
|
||||
@click='set_where(item.key)'>
|
||||
<view v-for="item in downMenus" :key="item.key" class='item'
|
||||
:class="{'font-colors':firstKey == item.key}" @click='set_where(item.key)'>
|
||||
<view class="">
|
||||
{{item.title}}
|
||||
</view>
|
||||
@ -41,49 +41,54 @@
|
||||
</view>
|
||||
<!-- 店铺 -->
|
||||
<block>
|
||||
<view class="mer-box">
|
||||
<block v-if="store_street_theme == 1">
|
||||
<view class="mer-item" v-for="(item,index) in storeList" :key='index'>
|
||||
<view class="mer-hd" @click="goStore(item.mer_id)">
|
||||
<image :src="item.mini_banner?item.mini_banner:item.mer_banner" mode="aspectFill"></image>
|
||||
<view class="mer-name">
|
||||
<image :src="item.mer_avatar"></image>
|
||||
<view class="">
|
||||
<view class="mer-top">
|
||||
<view class="txt line1">{{item.mer_name}}</view>
|
||||
<image v-if="margin_ico_switch==1 && margin_ico && item.is_margin==10" :src="margin_ico"
|
||||
class="store-margin"></image>
|
||||
<text v-if="item.type_name" class="font-bg-red ml8">{{item.type_name}}</text>
|
||||
<text v-else-if="item.is_trader" class="font-bg-red ml8">自营</text>
|
||||
<view class="store-wrapper">
|
||||
<view class="store-item" v-for="(item,index) in storeList" :key="index">
|
||||
<view class="head">
|
||||
<view class="bgc_img" :style="{ backgroundImage: `url(${item.mer_banner})`}">
|
||||
<view class="head_conent">
|
||||
<view class="head_conent_l" @click="goStore(item.mer_id)">
|
||||
<view class="conent_l_top">
|
||||
<view class="avatar" :style="{backgroundImage:`url(${item.mer_avatar})`}">
|
||||
</view>
|
||||
<view class="mer-btn">
|
||||
<view class="">
|
||||
{{item.care_count<10000 ? item.care_count : (item.care_count/10000).toFixed(2)+'万'}}人关注
|
||||
<view class="top_text">
|
||||
<p>{{item.mer_name}}</p>
|
||||
<view class="text">
|
||||
<image src="@/static/images/phone.png" mode=""></image>
|
||||
<span>
|
||||
{{item.service_phone}}
|
||||
</span>
|
||||
</view>
|
||||
<view class="line" v-if="item.distance"></view>
|
||||
<view class="distance" v-if="item.distance" @click.stop="showStoreLocation(item)">
|
||||
<view class="">
|
||||
{{item.distance}}
|
||||
<view class="text">
|
||||
<image src="@/static/images/clock.png" mode=""></image>
|
||||
<span>
|
||||
{{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}
|
||||
</span>
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="conent_l_bom">
|
||||
<view class="text">
|
||||
<image src="@/static/images/dingwei.png" mode=""></image>
|
||||
<p>
|
||||
{{item.mer_address}}
|
||||
</p>
|
||||
</view>
|
||||
|
||||
<view class="text">
|
||||
<image src="@/static/images/shangpu.png"></image>
|
||||
<p>
|
||||
{{item.mer_info}}
|
||||
</p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="head_conent_r" @click="qctail(item)">
|
||||
<image class="miniban" :src="item.mer_certificate[0]"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="pro-box" :class="'styleType'+store_street_theme">
|
||||
<navigator :url="`/pages/goods_details/index?id=${itemn.product_id}&product_type=${product_type}`"
|
||||
hover-class="none" class="pro-item" v-for="(itemn,indexn) in item.recommend" :key='indexn'>
|
||||
<view class="picture">
|
||||
<easy-loadimage mode="widthFix" :image-src="itemn.image"></easy-loadimage>
|
||||
<view v-if="itemn.border_pic" :style="{ backgroundImage: `url(${itemn.border_pic})` }"
|
||||
class="border-picture"></view>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text>¥</text>{{itemn.price}}
|
||||
</view>
|
||||
</navigator>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="store_street_theme == 2">
|
||||
@ -115,7 +120,8 @@
|
||||
class="pro-item" v-for="(itemn,indexn) in item.recommend" :key='indexn'>
|
||||
<view class="picture">
|
||||
<easy-loadimage mode="widthFix" :image-src="itemn.image"></easy-loadimage>
|
||||
<view v-if="itemn.border_pic" :style="{ backgroundImage: `url(${itemn.border_pic})` }"
|
||||
<view v-if="itemn.border_pic"
|
||||
:style="{ backgroundImage: `url(${itemn.border_pic})` }"
|
||||
class="border-picture"></view>
|
||||
</view>
|
||||
<view class="price">
|
||||
@ -159,8 +165,9 @@
|
||||
<view @click="go_details(itemn.product_type,itemn.product_id)">
|
||||
<view class="picture">
|
||||
<image :src="itemn.image"></image>
|
||||
<view v-if="itemn.border_pic" :style="{ backgroundImage: `url(${itemn.border_pic})` }"
|
||||
class="border-picture"></view>
|
||||
<view v-if="itemn.border_pic"
|
||||
:style="{ backgroundImage: `url(${itemn.border_pic})` }" class="border-picture">
|
||||
</view>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text>¥</text>{{itemn.price}}
|
||||
@ -181,20 +188,35 @@
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<u-popup class="pop" :show="show" @close="close" mode="center" bgColor='transparent'>
|
||||
<image :src="image"></image>
|
||||
<image src="@/static/images/guanbi.png" class="guanbi" @click="close"></image>
|
||||
</u-popup>
|
||||
</view>
|
||||
<rightSlider v-if="rightBox" :status="rightBox" :merList="merList" :storeTypeArr="storeTypeArr" @confirm="confirm"
|
||||
@close="close"></rightSlider>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeMerchantList, getGeocoder } from '@/api/store.js';
|
||||
import {
|
||||
storeMerchantList,
|
||||
getGeocoder
|
||||
} from '@/api/store.js';
|
||||
import recommend from './component/recommend';
|
||||
import rightSlider from './component/rightSlider';
|
||||
import { merClassifly, getStoreTypeApi } from '@/api/store.js';
|
||||
import { mapGetters } from "vuex";
|
||||
import { goShopDetail } from '@/libs/order.js'
|
||||
import { configMap } from '@/utils';
|
||||
import {
|
||||
merClassifly,
|
||||
getStoreTypeApi
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import {
|
||||
configMap
|
||||
} from '@/utils';
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||||
const app = getApp();
|
||||
export default {
|
||||
@ -270,7 +292,9 @@
|
||||
count: 0,
|
||||
storeTypeArr: [], //店铺类型
|
||||
merList: [], //商户分类
|
||||
product_type: 0
|
||||
product_type: 0,
|
||||
show:false,
|
||||
image: '' //图片
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
@ -446,7 +470,8 @@
|
||||
console.log(res)
|
||||
this.detaile_address = res.data.address;
|
||||
this.location_address = res.data.address;
|
||||
this.recommend_address = res.data.address.length > 4 ? res.data.address.slice(0, 4) + '...' :
|
||||
this.recommend_address = res.data.address.length > 4 ? res.data.address
|
||||
.slice(0, 4) + '...' :
|
||||
res.data.address
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
@ -541,6 +566,7 @@
|
||||
// 组件关闭
|
||||
close() {
|
||||
this.rightBox = false
|
||||
this.show = false
|
||||
},
|
||||
//点击事件处理
|
||||
set_where: function(e) {
|
||||
@ -556,6 +582,20 @@
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll(e) {
|
||||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
qctail(item) {
|
||||
console.log(item);
|
||||
if (item.mer_certificate == '') {
|
||||
return
|
||||
}
|
||||
this.show = true
|
||||
this.image = item.mer_certificate[0]
|
||||
console.log(this.show);
|
||||
},
|
||||
},
|
||||
//刷新
|
||||
onPullDownRefresh() {
|
||||
@ -576,12 +616,8 @@
|
||||
this.sotreParam.page += 1
|
||||
this.storeMerchantList()
|
||||
}
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll(e) {
|
||||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||||
uni.$emit('scroll');
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -820,186 +856,122 @@
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.mer-box {
|
||||
padding: 20rpx 20rpx;
|
||||
margin-top: 168rpx;
|
||||
.store-wrapper {
|
||||
margin-top: 165rpx;
|
||||
border-top: 1px solid #F6F6F6;
|
||||
|
||||
.store-margin {
|
||||
width: 30rpx !important;
|
||||
height: 32rpx !important;
|
||||
margin: 0 0 0 10rpx !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.store-item {
|
||||
margin: 20rpx auto;
|
||||
|
||||
.mer-item {
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
|
||||
&.mer-item3 {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.mer-hd {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 134rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mer-name {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10rpx;
|
||||
|
||||
image {
|
||||
width: 79rpx;
|
||||
height: 79rpx;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.easy-loadimage {
|
||||
width: 100%;
|
||||
height: 214rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.pro-box {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 20rpx 30rpx;
|
||||
|
||||
.pro-item {
|
||||
display: inline-block;
|
||||
width: 218rpx;
|
||||
margin-right: 14rpx;
|
||||
|
||||
.picture,
|
||||
/deep/image,
|
||||
uni-image {
|
||||
width: 100%;
|
||||
height: 214rpx;
|
||||
border-radius: 8rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-top: 5rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--view-priceColor);
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.styleType3 {
|
||||
padding: 20rpx;
|
||||
|
||||
.pro-item {
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
padding: 10rpx 0 20rpx;
|
||||
|
||||
.picture,
|
||||
/deep/image,
|
||||
uni-image {
|
||||
width: 194rpx;
|
||||
height: 194rpx;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mer-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
|
||||
.font-bg-red {
|
||||
margin-left: 20rpx;
|
||||
font-size: 18rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
width: auto;
|
||||
background-color: var(--view-theme);
|
||||
border-color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
|
||||
.mer-btn {
|
||||
color: rgba($color: #fff, $alpha: 0.7);
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.line {
|
||||
width: 2rpx;
|
||||
height: 18rpx;
|
||||
color: rgba($color: #fff, $alpha: 0.7);
|
||||
margin: 0 12rpx;
|
||||
}
|
||||
|
||||
.distance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-shop {
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FFFFFF;
|
||||
padding: 27rpx 0;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
|
||||
.bgc_img {
|
||||
width: 95%;
|
||||
height: 200px;
|
||||
background-size: cover;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.head_conent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.head_conent_l {
|
||||
width: 70%;
|
||||
|
||||
|
||||
.conent_l_top {
|
||||
display: flex;
|
||||
height: 200rpx;
|
||||
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 180rpx;
|
||||
background-size: cover;
|
||||
margin: 10px 0 10px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.top_text {
|
||||
margin: 10px 0 0 15px;
|
||||
|
||||
.text {
|
||||
margin: 12.5rpx 0px;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
width: 160px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.conent_l_bom {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
|
||||
p {
|
||||
width: 190px;
|
||||
margin: 10rpx 0 10Rpx 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
image {
|
||||
margin: 10rpx 0 10px 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.head_conent_r {
|
||||
height: 200px;
|
||||
width: 30%;
|
||||
|
||||
.miniban {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-xiangyou {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1088,4 +1060,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.guanbi {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.pop {
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user