|
|
@@ -1,28 +1,39 @@
|
|
|
<template>
|
|
|
<view class="discountsDetail">
|
|
|
- <zs-img width="100%" height="310rpx" :src="banner"></zs-img>
|
|
|
+ <zs-choose-tab></zs-choose-tab>
|
|
|
|
|
|
- <!-- titleArr: 选择项数组 dropArr: 下拉项数组 二维数组 @finishDropClick: 下拉筛选完成事件-->
|
|
|
- <cc-dropDownMenu :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick"></cc-dropDownMenu>
|
|
|
-
|
|
|
<!-- 内容 -->
|
|
|
<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
|
|
|
<view class="item" v-for="(item,index) in list" :key="index">
|
|
|
<!-- <image :src="item.src" mode="" class="icon" @click="goDetail(item)"></image> -->
|
|
|
- <zs-img :src="item.logoPath" width="164rpx" height="164rpx" radius="full" @click.native="goDetail(item)"></zs-img>
|
|
|
+ <zs-img :src="item.logoPath" width="200rpx" height="200rpx" radius="full" @click.native="goDetail(item)"></zs-img>
|
|
|
<view class="info">
|
|
|
<view class="title">
|
|
|
{{item.shopVo.shopName}}
|
|
|
</view>
|
|
|
- <view class="activity" :class="!item.activityContent?'white':''">
|
|
|
- <image class="card" src="../../static/card-icon.png" mode=""></image>
|
|
|
- {{item.activityContent || '-'}}
|
|
|
+ <view class="desc">
|
|
|
+ 2人24菜12嫩牛肉、精品千层肚、嫩肉
|
|
|
+ 片、老肉片、午餐肉24菜12嫩牛肉、精品千层肚、嫩肉
|
|
|
+ 片、老肉片、午餐肉24菜12嫩牛肉、精品千层肚、嫩肉
|
|
|
+ 片、老肉片、午餐肉
|
|
|
</view>
|
|
|
- <view class="address" >
|
|
|
- <image class="position" src="../../static/address-icon.png" mode=""></image>
|
|
|
- 距离你{{(item.shopVo.distance/1000).toFixed(2)}}km ·{{item.district}}
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="left">
|
|
|
+ <view class="unit">
|
|
|
+ ￥
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ 50
|
|
|
+ </view>
|
|
|
+ <view class="old-price">
|
|
|
+ 市场价 ￥299
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="right">
|
|
|
+ 销量5999
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</zs-list>
|
|
|
@@ -45,24 +56,6 @@
|
|
|
status:'more',
|
|
|
list: [],
|
|
|
btnText:'去使用',
|
|
|
- titleArr: ['全城', '距离最近'],
|
|
|
- dropArr: [
|
|
|
- // 距离
|
|
|
- [
|
|
|
- {
|
|
|
- text: '全城',
|
|
|
- value: "440103"
|
|
|
- }
|
|
|
- ],
|
|
|
-
|
|
|
- // 类型
|
|
|
- [
|
|
|
- {
|
|
|
- text: '距离最近',
|
|
|
- value: "40-60"
|
|
|
- }
|
|
|
- ],
|
|
|
- ],
|
|
|
banner:'',
|
|
|
filterResultData: [],
|
|
|
query:{
|
|
|
@@ -76,9 +69,6 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- finishClick(resultData) {
|
|
|
- this.filterResultData = resultData;
|
|
|
- },
|
|
|
|
|
|
goDetail(item){
|
|
|
uni.setStorageSync('shopInfo',JSON.stringify(item))
|
|
|
@@ -154,116 +144,25 @@
|
|
|
width: 100%;
|
|
|
}
|
|
|
.discountsDetail {
|
|
|
+ background: #F9F9F9;
|
|
|
+ padding-top: 80rpx;
|
|
|
.banner{
|
|
|
width: 100%;
|
|
|
height: 310rpx;
|
|
|
position: relative;
|
|
|
z-index: 99;
|
|
|
}
|
|
|
- .recommend{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 20rpx 30rpx;
|
|
|
- .recommend-item.color{
|
|
|
- background: linear-gradient(0deg, #FFDA84 0%, #FFF6E1 100%);
|
|
|
-
|
|
|
- }
|
|
|
- .recommend-item{
|
|
|
- padding: 18rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- width: 335rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: linear-gradient(0deg, #FF9898 0%, rgba(255,101,101,0.09) 100%);;
|
|
|
- box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.16);
|
|
|
- .top{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .title{
|
|
|
- color: #0F0F0F;
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
- .type-box{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 16rpx;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- border: 1rpx solid #FF4343;
|
|
|
- .hot{
|
|
|
- width: 16.7rpx;
|
|
|
- height: 21.7rpx;
|
|
|
- }
|
|
|
- .type{
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #FF4343;
|
|
|
- margin-left: 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .image-box{
|
|
|
- position: relative;
|
|
|
- margin-top: 20rpx;
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- display: flex;
|
|
|
- .icon{
|
|
|
- width: 116rpx;
|
|
|
- height: 116rpx;
|
|
|
- margin-left: 15rpx;
|
|
|
- }
|
|
|
- .info{
|
|
|
- padding: 16rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- .title{
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .btn-box{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- font-size: 18rpx;
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- margin-top: 10rpx;
|
|
|
- .btn{
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- padding: 0 14rpx;
|
|
|
- background: #FE5B47;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .desc{
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #FF4343;
|
|
|
- padding: 0 18rpx 0 10rpx;
|
|
|
- background: rgba(254, 91, 71, .17);
|
|
|
- border-radius: 0 8rpx 8rpx 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
.zs-list {
|
|
|
- // padding-top: 20rpx;
|
|
|
+ margin: 0 24rpx;
|
|
|
.item {
|
|
|
display: flex;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
+ padding: 24rpx;
|
|
|
background: #fff;
|
|
|
border-radius: 16rpx;
|
|
|
- margin: 20rpx 30rpx 0;
|
|
|
- border-bottom: 1rpx solid #F0F0F0;
|
|
|
+ margin: 20rpx 0 0;
|
|
|
.icon{
|
|
|
- border-radius: 8px;
|
|
|
+ border-radius: 16px;
|
|
|
}
|
|
|
.info{
|
|
|
flex: 1;
|
|
|
@@ -281,52 +180,53 @@
|
|
|
text-overflow: ellipsis;
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
- .address{
|
|
|
- color: #bebebe;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+
|
|
|
+ .desc{
|
|
|
font-size: 24rpx;
|
|
|
- .u-icon{
|
|
|
- align-self: flex-start;
|
|
|
- }
|
|
|
- .position {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .activity.white{
|
|
|
- color: #fff;
|
|
|
- background: #fff;
|
|
|
- .card{
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ color: #AAAAAA;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 弹性伸缩盒子模型显示 */
|
|
|
+ display: -webkit-box;
|
|
|
+ /* 限制在一个块元素显示的文本的行数 */
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ /* 设置或检索伸缩盒对象的子元素的排列方式 */
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
}
|
|
|
- .activity{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FF4D3A;
|
|
|
- line-height: 42rpx;
|
|
|
+
|
|
|
+ .price-box{
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- background: linear-gradient(90deg, #FAF4EB 0%, rgba(255,235,207,0) 100%);
|
|
|
- .card{
|
|
|
- width: 30.4rpx;
|
|
|
- height: 30rpx;
|
|
|
- vertical-align: bottom;
|
|
|
- margin: 0 8rpx 0 14rpx;
|
|
|
+ .left{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .unit{
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #FF4D3A;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FF4D3A;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .old-price{
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
}
|
|
|
- // text-align: center;
|
|
|
- // background: linear-gradient(90deg, rgba(253,149,108,0) 0%, #FD8B64 50%, rgba(253,140,101,0) 100%);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- #map {
|
|
|
- position: relative;
|
|
|
- top: -100000px;
|
|
|
- left: -1000000px;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
