mkm/nk-shop2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

店铺优化

Browse Source
This commit is contained in:
THK3121 2023-06-09 18:05:40 +08:00
parent 4ab82767f2
commit 50a2cac271
2 changed files with 1064 additions and 1158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
pages/columnGoods/goods_search_con/index.vue
View File

@ -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 {

437
pages/nongKe/supply_chain/supplier.vue
View File

@ -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>