TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

商城首页新增店铺，店铺详情，店铺列表，

Browse Source
This commit is contained in:
张冬雪
2022-06-08 11:51:41 +08:00
parent 1c6091371e
commit 705619f013
17 changed files with 7058 additions and 4229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
pages/store/index.vue
View File

@@ -26,7 +26,7 @@
</u-scroll-list>
<!-- 每日上新 -->
<view class="new-box">
<view class="title">上新精选</view>
<view class="title">上新精选<text class="title-des"> | 精品上新新品推荐</text></view>
<view class="news">
<view class="news-item" v-for="(item, index) in newGood" :key="index" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
<view class="news-cover">
@@ -37,6 +37,22 @@
</view>
</view>
</view>
<!-- 线下商家 -->
<view class="offline-box">
<view class="title">推荐店铺 <view class="more"><text class="title-des"> | 您身边的优质体验店</text> <text class="more-txt" @click="$Router.push({name: 'ShopList'})">更多></text></view></view>
<view class="card-box">
<block v-for="(item, index) in 6" :key="index">
<view class="card-box-item" style="{'backgrond': #FFF}" v-if="index<4" @click="$Router.push({name: 'ShopDetail', params: {id: item.meal_id}})">
<view class="card-title">吉屋居酒屋吉屋居酒屋吉屋居酒屋</view>
<view class="card-subtitle">距离0.5KM</view>
<view class="card-btn">前往体验</view>
<image class="card-cover" src="/static/img/text_back.jpg" mode="aspectFill" />
</view>
</block>
</view>
</view>
<!-- 推荐品类 -->
<view class="card-box">
<block v-for="(item, index) in meals" :key="index">
@@ -47,6 +63,8 @@
</view>
</block>
</view>
<!-- goods -->
<view class="goods-box">
<oct-goods
@@ -78,6 +96,7 @@
methods:{
getMall(){
mall().then(res => {
console.log(res);
this.banners = res.banners
this.goodsArr = res.goods
this.newGood = res.news
@@ -109,6 +128,7 @@
color: $text-color;
font-weight: bold;
margin-bottom: -$margin/2;
}
}
// 商城分类
@@ -157,7 +177,10 @@
font-weight: bold;
color: $text-color;
line-height: 40rpx;
@extend .nowrap;
width: calc(100% - 80rpx);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-subtitle{
font-size: 20rpx;
@@ -169,6 +192,7 @@
width: 80rpx;
height: 80rpx;
position: absolute;
border-radius: 50%;
right: $margin;
top: $margin;
}
@@ -189,6 +213,13 @@
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
padding-bottom: 10rpx;
.title-des{
font-size: 24rpx;
padding-left: 10rpx;
color: $text-gray-m;
font-weight: normal;
}
}
.news{
margin: $margin/2 -10rpx 0;
@@ -228,6 +259,78 @@
}
}
}
.offline-box{
.title{
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
margin-top: $margin;
margin-left: $margin;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.more{
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-right: $padding;
.more-txt{
font-size: 24rpx;
color: $text-gray;
font-weight: normal;
}
}
}
.card-btn{
font-size: 20rpx;
color: #fff;
padding: 4rpx 20rpx;
border-radius: 20rpx;
background-color: $text-price;
display: inline-block;
}
// .card-title{
// font-weight: normal;
// font-size: 28rpx!important;
// }
.card-box {
// &-item{
// background: #fff !important;
// }
&-item:nth-child(1){
background: #fef2ae;
}
&-item:nth-child(2){
background: #c9ead9;
}
&-item:nth-child(3){
margin-top: $padding - 8;
background: #bde0ff;
}
&-item:nth-child(4){
margin-top: $padding - 8;
background: #ffd9e1;
}
}
.card-cover{
width: 100rpx;
height: 100rpx;
position: absolute;
right: $margin;
top: $margin;
}
.title-des{
font-size: 26rpx;
padding-left: 10rpx;
color: $text-gray-m;
font-weight: normal;
}
}
// swiper
.swiper{
background: linear-gradient(#FFF, #F3F6FB);