You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
3.0 KiB
159 lines
3.0 KiB
<template>
|
|
<view class="content">
|
|
<view class="item" v-for="(item,index) in list" :key='index'>
|
|
<view class="top" @click="toShop(item.id)">
|
|
<view class="tl">
|
|
<view class="t1" @click="toShop(item.id)">
|
|
<image :src="item.logo" mode=""></image>
|
|
</view>
|
|
<view class="t2">
|
|
<view class="t2t">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="t2b">
|
|
关注数 {{item.followCount}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="t3">
|
|
进店
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<scroll-view class="scroll-box" scroll-x="true">
|
|
<view class="scroll-view">
|
|
<view class="items" @click="toDetail(itemz.id)" v-for="(itemz,indexz) in item.prolist" :key='indexz'>
|
|
<image :src="itemz.pic" mode=""></image>
|
|
<view class="mo">
|
|
￥{{itemz.sell_price}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
props:{
|
|
list:{
|
|
default:()=>{
|
|
return[]
|
|
}
|
|
},
|
|
},
|
|
mounted: function() {
|
|
console.log("店铺信息=====",this.list)
|
|
},
|
|
methods:{
|
|
toShop(id){
|
|
uni.navigateTo({
|
|
url:'/pagesA/shop/index?id='+id
|
|
// url:'/pages/business/index?id='+id
|
|
})
|
|
},
|
|
toDetail(id){
|
|
uni.navigateTo({
|
|
url:'/pages/shop/product?id='+id
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.item {
|
|
padding: 20rpx;
|
|
// border: 1px sol#000000;
|
|
box-shadow: 0 4rpx 8rpx 0 rgba(0,0,0,0.03);
|
|
margin-bottom: 24rpx;
|
|
border-radius: 12rpx;
|
|
background: #FFF;
|
|
.bottom{
|
|
margin-top: 20rpx;
|
|
.scroll-box {
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
.scroll-view {
|
|
// width: 100%;
|
|
// overflow: hidden;
|
|
white-space: nowrap;
|
|
// display: flex;
|
|
.items{
|
|
border-radius: 16rpx;
|
|
display: inline-block;
|
|
width: 208rpx;
|
|
height: 208rpx;
|
|
margin-right: 16rpx;
|
|
position: relative;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 6rpx;
|
|
}
|
|
.mo{
|
|
position: absolute;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
font-size: 24rpx;
|
|
padding: 0 14rpx;
|
|
border-radius: 16rpx;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
right: 0;
|
|
bottom: 16rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.tl{
|
|
display: flex;
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.t1 {
|
|
image {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
border-radius: 50%;
|
|
margin-right: 14rpx;
|
|
}
|
|
}
|
|
|
|
.t2 {
|
|
.t2t {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.t2b {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.t3 {
|
|
width: 96rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
border-radius: 24rpx;
|
|
box-sizing: border-box;
|
|
padding: 0rpx 10rpx;
|
|
background: linear-gradient(to right,#00AE68, #096742);
|
|
color: #FFFFFF;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|