|
@@ -98,56 +98,87 @@
|
|
|
</view>
|
|
</view>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
<scroll-view :scroll-y="true" class="box-border-box plr-24 mt-24" @scrolltolower="scrollList">
|
|
<scroll-view :scroll-y="true" class="box-border-box plr-24 mt-24" @scrolltolower="scrollList">
|
|
|
<EnBlank :customSrc='true' v-if="listData<= 0">
|
|
<EnBlank :customSrc='true' v-if="listData<= 0">
|
|
|
<template v-slot:blankImg>
|
|
<template v-slot:blankImg>
|
|
|
<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
|
|
<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
|
|
|
</template>
|
|
</template>
|
|
|
</EnBlank>
|
|
</EnBlank>
|
|
|
- <view v-else class="goos-list-box box-border-box p-24 display-flex" v-for="(item,i) in listData"
|
|
|
|
|
- :key='i' @click="toShop(item)">
|
|
|
|
|
- <view class="left-img-box">
|
|
|
|
|
- <image class="left-img" :src="item.shop_logo" mode="aspectFill"></image>
|
|
|
|
|
- <view class="status-box fc-f" v-if="item.status != 1">
|
|
|
|
|
- 休息中
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="flex-1">
|
|
|
|
|
- <view class="align-items-center mb-8">
|
|
|
|
|
- <view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">
|
|
|
|
|
- {{item.shop_name}}
|
|
|
|
|
|
|
+ <view class="" v-else>
|
|
|
|
|
+ <view class="goos-list-box box-border-box" v-for="(item,i) in listData" :key='i' @click="toShop(item)">
|
|
|
|
|
+ <view class="display-flex p-b-20 mb-26 b-b-EFF2F5">
|
|
|
|
|
+ <view class="left-img-box mr-24">
|
|
|
|
|
+ <image class="left-img" :src="item.shop_logo" mode="aspectFill"></image>
|
|
|
|
|
+ <view class="status-box fc-f" v-if="item.status != 1">
|
|
|
|
|
+ 休息中
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="align-items-center mb-8">
|
|
|
|
|
- <image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
|
|
|
|
|
- <view class="fs-26 fw-600 fc-FF7F00 mr-12">{{item.shop_score}}分</view>
|
|
|
|
|
- <view class="fc-6 fs-24 mr-12">| 预计{{item.delivery_time}}分钟 |</view>
|
|
|
|
|
- <view class="fc-6 fs-24 mr-12">{{item.shop_sales}}人购买</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="align-items-center flex-wrap-wrap">
|
|
|
|
|
- <view class="quan-list display-flex mr-12 mb-12"
|
|
|
|
|
- v-for="(itemCoupon,iCoupon) in item.coupon" :key="iCoupon">
|
|
|
|
|
- <view class="quan-list-1 fs-24 fc-f">券</view>
|
|
|
|
|
- <view class="quan-list-2 fs-24 fc-FB3D03">{{itemCoupon.money}}元</view>
|
|
|
|
|
|
|
+ <view class="flex-1">
|
|
|
|
|
+ <view class="align-items-center mb-8">
|
|
|
|
|
+ <view class="right-box-title fs-28 fw-600 text-overflow-ellipsis-one">
|
|
|
|
|
+ {{item.shop_name}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image class="right-box-title-img" src="@/static/img/toRight.png" mode="">
|
|
|
|
|
+ </image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center mb-12">
|
|
|
|
|
+ <image class="img-x mr-8" src="@/static/img/my/wdpj.png" mode=""></image>
|
|
|
|
|
+ <view class="fs-24 fw-600 fc-FF7F00 mr-12">{{item.shop_score}}</view>
|
|
|
|
|
+ <view class="fc-0 fs-24 mr-12">预计{{item.delivery_time}}分钟 |</view>
|
|
|
|
|
+ <view class="fc-0 fs-24 mr-12">{{item.shop_sales}}人购买</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center flex-wrap-wrap">
|
|
|
|
|
+ <view class="quan-list b-F5541E box-border-box bgc-f align-items-center b-rad-5 mr-10" v-for="(info1,index1) in item.coupon" :key="index1">
|
|
|
|
|
+ <image class="quan-list-1" src="@/static/img/index/q.png" mode=""></image>
|
|
|
|
|
+ <view class="quan-list-2 fs-24 fc-F5531E">{{info1.money}}元</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
- <view class="goods-items-list display-flex view-nowrap">
|
|
|
|
|
- <view class="goods-items-list-box" v-for="(info,iGoods) in item.goods" :key='iGoods'>
|
|
|
|
|
- <image class="mb-12" :src="info.goods_image" mode="scaleToFill"></image>
|
|
|
|
|
- <view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">{{info.goods_name}}
|
|
|
|
|
|
|
+ <view class="goods-items-list display-flex">
|
|
|
|
|
+ <view class="goods-items-list-box" v-for="(info2,index2) in item.goods" :key="index2">
|
|
|
|
|
+ <view v-show="info2.label === 3"
|
|
|
|
|
+ class="label-box text-align-center bgc-F5811E fs-24 fc-f">
|
|
|
|
|
+ 推荐</view>
|
|
|
|
|
+ <view v-show="info2.label === 2"
|
|
|
|
|
+ class="label-box text-align-center bgc-FF5555 fs-24 fc-f">
|
|
|
|
|
+ 新品</view>
|
|
|
|
|
+ <view v-show="info2.label === 1"
|
|
|
|
|
+ class="label-box text-align-center bgc-48D3C5 fs-24 fc-f">
|
|
|
|
|
+ 折扣</view>
|
|
|
|
|
+ <view v-show="info2.label === 4"
|
|
|
|
|
+ class="label-box text-align-center bgc-4db8ff fs-24 fc-f">
|
|
|
|
|
+ 招牌</view>
|
|
|
|
|
+ <image class="mb-18" :src="info2.goods_image" mode="aspectFill"></image>
|
|
|
|
|
+ <view class="mb-12 fw-600 text-overflow-ellipsis-one fs-24">{{info2.goods_name}}
|
|
|
</view>
|
|
</view>
|
|
|
<view class="">
|
|
<view class="">
|
|
|
- <span class="fs-24 fc-FB3D03">¥</span>
|
|
|
|
|
- <span class="fs-32 fc-FB3D03 fw-b">{{info.price}}</span>
|
|
|
|
|
|
|
+ <span class="fs-24 fc-FD5D05 fw-b">¥</span>
|
|
|
|
|
+ <span class="fs-32 fc-FD5D05 fw-b">{{info2.price}}</span>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view class="pt-40 flex-direction align-items-center" v-if="listData.length === listTotal">
|
|
|
|
|
+ <view class="fs-32 fc-0 fw-b">
|
|
|
|
|
+ 小主都到这里了
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-32 fc-0 fw-b mb-26">
|
|
|
|
|
+ 还没有找到满意的店铺吗?
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-24 fc-0 mb-32">
|
|
|
|
|
+ 可以提交你意见与反馈哟。我们一定尽快努力达成!
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="list-but align-items-center flex-justify-center bgc-5CC2FF"
|
|
|
|
|
+ @click="goFeedback">
|
|
|
|
|
+ <view class="fs-28 fc-f mr-10">
|
|
|
|
|
+ 去提交
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="sj-fff"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
<!-- <view class="box-border-box plr-24 mt-24">
|
|
<!-- <view class="box-border-box plr-24 mt-24">
|
|
|
|
|
|
|
@@ -226,7 +257,6 @@
|
|
|
},
|
|
},
|
|
|
scrollList() {},
|
|
scrollList() {},
|
|
|
scrolltolower() {
|
|
scrolltolower() {
|
|
|
- console.log(this.listTotal, this.listData.length);
|
|
|
|
|
if (this.listTotal > this.listData.length) {
|
|
if (this.listTotal > this.listData.length) {
|
|
|
++this.page
|
|
++this.page
|
|
|
this.getGoodsList()
|
|
this.getGoodsList()
|
|
@@ -286,6 +316,22 @@
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
|
|
+ .list-but {
|
|
|
|
|
+ width: 140rpx;
|
|
|
|
|
+ height: 48rpx;
|
|
|
|
|
+ line-height: 48rpx;
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sj-fff {
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ height: 0;
|
|
|
|
|
+ border-top: 8rpx solid transparent;
|
|
|
|
|
+ border-right: 8rpx solid transparent;
|
|
|
|
|
+ border-left: 8rpx solid #fff;
|
|
|
|
|
+ border-bottom: 8rpx solid transparent;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.index-search-box-buttom {
|
|
.index-search-box-buttom {
|
|
|
width: 120rpx;
|
|
width: 120rpx;
|
|
|
height: 60rpx;
|
|
height: 60rpx;
|
|
@@ -476,24 +522,36 @@
|
|
|
|
|
|
|
|
.goos-list-box {
|
|
.goos-list-box {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- // min-height: 428rpx;
|
|
|
|
|
|
|
+ min-height: 100rpx;
|
|
|
|
|
+ padding: 28rpx 30rpx 35rpx;
|
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
|
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
margin-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
|
|
.goods-items-list {
|
|
.goods-items-list {
|
|
|
- width: 530rpx;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
overflow-y: scroll;
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
.goods-items-list-box {
|
|
.goods-items-list-box {
|
|
|
- width: 140rpx;
|
|
|
|
|
- margin-right: 16rpx;
|
|
|
|
|
|
|
+ width: 33.3%;
|
|
|
|
|
+ margin-right: 13rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ .label-box {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ width: 66rpx;
|
|
|
|
|
+ height: 31rpx;
|
|
|
|
|
+ line-height: 31rpx;
|
|
|
|
|
+ border-radius: 10rpx 2rpx 10rpx 2rpx;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
image {
|
|
image {
|
|
|
- width: 140rpx;
|
|
|
|
|
- height: 140rpx;
|
|
|
|
|
- border-radius: 12rpx
|
|
|
|
|
|
|
+ width: 201rpx;
|
|
|
|
|
+ height: 200rpx;
|
|
|
|
|
+ border-radius: 10rpx
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -501,14 +559,13 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.left-img-box {
|
|
.left-img-box {
|
|
|
- width: 100rpx;
|
|
|
|
|
- height: 100rpx;
|
|
|
|
|
- margin-right: 16rpx;
|
|
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ height: 120rpx;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
|
|
|
.left-img {
|
|
.left-img {
|
|
|
- width: 100rpx;
|
|
|
|
|
- height: 100rpx;
|
|
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ height: 120rpx;
|
|
|
border-radius: 12rpx;
|
|
border-radius: 12rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -526,8 +583,8 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.img-x {
|
|
.img-x {
|
|
|
- width: 24rpx;
|
|
|
|
|
- height: 24rpx;
|
|
|
|
|
|
|
+ width: 16rpx;
|
|
|
|
|
+ height: 16rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.right-box-title {
|
|
.right-box-title {
|
|
@@ -541,40 +598,38 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.quan-list {
|
|
.quan-list {
|
|
|
|
|
+ min-width: 88rpx;
|
|
|
|
|
+ height: 28rpx;
|
|
|
|
|
+ line-height: 28rpx;
|
|
|
|
|
+
|
|
|
.quan-list-1 {
|
|
.quan-list-1 {
|
|
|
- width: 32rpx;
|
|
|
|
|
- height: 34rpx;
|
|
|
|
|
- background: #FB3D03;
|
|
|
|
|
- border-radius: 5rpx 0rpx 0rpx 5rpx;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
|
|
+ width: 38rpx;
|
|
|
|
|
+ height: 28rpx;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .quan-list-2 {
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- padding: 0 2rpx;
|
|
|
|
|
- height: 34rpx;
|
|
|
|
|
- border-radius: 0 5rpx 5rpx 0;
|
|
|
|
|
- border: 1rpx solid #FB3D03;
|
|
|
|
|
|
|
+ .index-search {
|
|
|
|
|
+ position: sticky;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ padding: 0 24rpx 20rpx 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .index-search-box {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 72rpx;
|
|
|
|
|
+ padding: 0 6rpx 0 24rpx;
|
|
|
|
|
+ border-radius: 200rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .index-search-box-buttom {
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ background: linear-gradient(-90deg, #3BB5FE, #62C4FF);
|
|
|
|
|
+ border-radius: 200rpx;
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ line-height: 60rpx;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- // .index-search-box {
|
|
|
|
|
- // width: 100%;
|
|
|
|
|
- // height: 72rpx;
|
|
|
|
|
- // padding: 0 6rpx 0 24rpx;
|
|
|
|
|
- // border-radius: 200rpx;
|
|
|
|
|
- // border: 2rpx solid #4FB3EF;
|
|
|
|
|
-
|
|
|
|
|
- // .index-search-box-buttom {
|
|
|
|
|
- // width: 120rpx;
|
|
|
|
|
- // height: 60rpx;
|
|
|
|
|
- // background: linear-gradient(90deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
|
|
- // border-radius: 200rpx;
|
|
|
|
|
- // margin-left: auto;
|
|
|
|
|
- // line-height: 60rpx;
|
|
|
|
|
- // text-align: center;
|
|
|
|
|
- // }
|
|
|
|
|
- // }
|
|
|
|
|
</style>
|
|
</style>
|