118 lines
2.7 KiB
Vue
118 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="shopItem bg-w" v-for="(item, i) in list" :key="i">
|
||
|
|
<view class="flex flex-between">
|
||
|
|
<view>
|
||
|
|
<image :src="filterImg(item.logoImage)" mode="" class="img"></image>
|
||
|
|
</view>
|
||
|
|
<view class="flex flex-column" style="width: 380rpx;">
|
||
|
|
<view class="flex flex-align-center">
|
||
|
|
<text class="blod font34">{{item.name}}</text>
|
||
|
|
<!-- <text class="tips bg-base" v-if="item.goodsType==2">精选</text> -->
|
||
|
|
</view>
|
||
|
|
<text class="font26 color-b6 line">{{item.introduce}}</text>
|
||
|
|
<text class="font26 color-b9">距离{{item.distance | distance}}</text>
|
||
|
|
</view>
|
||
|
|
<text class="color-purple btn font32" @click="goStore(item)">进店</text>
|
||
|
|
</view>
|
||
|
|
<view class="flex flex-align-center b-b" v-if="item.cupboardGoodsJSONArray">
|
||
|
|
<view class="imgs" v-for="(cupboard, index) in item.cupboardGoodsJSONArray" :key="index" @tap="jumpGoodsDetail(cupboard)">
|
||
|
|
<image :src="filterImg(cupboard.mainImage)" mode="aspectFill" class="pic"></image>
|
||
|
|
<text class="name line">{{cupboard.titleName}}</text>
|
||
|
|
<text class="price color-red">¥{{cupboard.wholesalePrice}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { distanceTransform } from "@/common/utils/index.js"
|
||
|
|
import publics from "@/common/utils/public.js"
|
||
|
|
export default{
|
||
|
|
props:{
|
||
|
|
list: {
|
||
|
|
type: Array,
|
||
|
|
default: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
filters:{
|
||
|
|
distance(distance){
|
||
|
|
return distanceTransform(distance)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
filterImg(img){
|
||
|
|
return publics.filterImgUrl(img, 3)
|
||
|
|
},
|
||
|
|
goStore(item){
|
||
|
|
this.$navigateTo("/pages/home/store?id="+item.id)
|
||
|
|
},
|
||
|
|
jumpGoodsDetail(item){
|
||
|
|
this.$navigateTo('/pages/home/details?id='+item.id)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.shopItem{
|
||
|
|
margin-top: 10rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
padding: 30rpx;
|
||
|
|
.img{
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.tips{
|
||
|
|
color: white;
|
||
|
|
font-size: 24rpx;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
padding: 0 10rpx;
|
||
|
|
font-weight: normal;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
transform: scale(0.9);
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.btn{
|
||
|
|
border: 2rpx solid #F8D247;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
padding: 0 20rpx;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
}
|
||
|
|
.b-b{
|
||
|
|
margin-top: 30rpx;
|
||
|
|
border-top: 2rpx solid #f8f6f9;
|
||
|
|
}
|
||
|
|
.imgs{
|
||
|
|
width: 32%;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
margin-right: 1.5%;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: #fcfcfc;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
font-size: 28rpx;
|
||
|
|
.pic{
|
||
|
|
width: 100%;
|
||
|
|
height: 180rpx;
|
||
|
|
display: block;
|
||
|
|
border-radius: 20rpx 20rpx 0 0;
|
||
|
|
}
|
||
|
|
.name{
|
||
|
|
margin: 6rpx 10rpx;
|
||
|
|
}
|
||
|
|
.price{
|
||
|
|
margin: 0 10rpx 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.imgs:last-child{
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|