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.
486 lines
12 KiB
486 lines
12 KiB
1 month ago
|
<template>
|
||
|
|
<!-- 拼团页 -->
|
||
|
|
<view class="page1">
|
||
|
|
<view class="title">
|
||
|
|
<view class="title-sreach">
|
||
|
|
<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
||
|
|
<uni-icons type="left" size="28"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
||
|
|
搜索页
|
||
|
|
</view>
|
||
|
|
<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}">
|
||
|
|
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
|
||
|
|
<input type="text" placeholder="搜索" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="width: 95%;background: #fff;margin: 0 auto;border-radius: 10px;padding: 10px;min-height: 80px;">
|
||
|
|
<view style="height: 30px;color: #777;">
|
||
|
|
历史搜索
|
||
|
|
</view>
|
||
|
|
<view style="">
|
||
|
|
<view style="margin-right:10px;background: #eee;display: inline-block;padding: 5px 10px;border-radius: 5px;float: left;">
|
||
|
|
麻辣
|
||
|
|
</view>
|
||
|
|
<view style="margin-right:10px;background: #eee;display: inline-block;padding: 5px 10px;border-radius: 5px;float: left;">
|
||
|
|
牛肉
|
||
|
|
</view>
|
||
|
|
<view style="margin-right:10px;background: #eee;display: inline-block;padding: 5px 10px;border-radius: 5px;float: left;">
|
||
|
|
雪
|
||
|
|
</view>
|
||
|
|
<view style="margin-right:10px;background: #eee;display: inline-block;padding: 5px 10px;border-radius: 5px;float: left;">
|
||
|
|
面
|
||
|
|
</view>
|
||
|
|
<view style="margin-right:10px;background: #eee;display: inline-block;padding: 5px 10px;border-radius: 5px;float: left;">
|
||
|
|
茶
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="title-sort" style="clear: both;">
|
||
|
|
<view class="sort-member">
|
||
|
|
<view class="sort-text" @tap="searchShop('all','')">
|
||
|
|
综合排序 <text style="font-size: 20rpx;">▼</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="sort-member">
|
||
|
|
<view class="sort-text" @tap="searchShop('sale','')">
|
||
|
|
销量优先 <text style="font-size: 20rpx;">▼</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="sort-member">
|
||
|
|
<view class="sort-text" @tap="searchShop('score','')">
|
||
|
|
评分优先 <text style="font-size: 20rpx;">▼</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="sort-member" style="position: relative;">
|
||
|
|
<view class="sort-text" @tap="checkArea">
|
||
|
|
区域选择 <text style="font-size: 20rpx;">▼</text>
|
||
|
|
</view>
|
||
|
|
<view class="sort-value" v-if="isArea">
|
||
|
|
<view class="sort-value1" v-for="(item,index) in shopArea" :key="index" @tap="searchShop('area',item.id)">{{item.title}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="shop-list">
|
||
|
|
<view class="shop-member" v-for="(item,index) in shopList" :key="index" @tap="goDetail('shop',item)">
|
||
|
|
<view class="shop-top">
|
||
|
|
<view class="shop-img">
|
||
|
|
<img :src="item.shopIcon" alt="" @tap="goDetail('shop',item)">
|
||
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png" alt="" style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
|
||
|
|
</view>
|
||
|
|
<view class="shop-content" @tap="goDetail('shop',item)">
|
||
|
|
<view class="shop-name">
|
||
|
|
{{item.shopName}}
|
||
|
|
</view>
|
||
|
|
<view class="shop-content-center">
|
||
|
|
<view class="shop-rate">
|
||
|
|
<view class="shop-rate-num">{{item.shopScore}}</view>
|
||
|
|
<uni-rate :disabled="true" size="16" disabledColor="rgba(255, 184, 84, 1)" :value="item.shopScore" />
|
||
|
|
</view>
|
||
|
|
<view class="shop-tag">
|
||
|
|
<text style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
|
||
|
|
{{item.shopTakeaway.type}}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="shop-content-bottom">
|
||
|
|
<view class="shop-deal">
|
||
|
|
<text v-if = "item.subtitle != null" style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
|
||
|
|
{{item.subtitle}}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<view class="shop-deal1">
|
||
|
|
已拼<text style="color: red;font-weight: 700;"> {{item.saleCount != null ? item.saleCount : 0}} </text>单
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="shop-bottom" v-if="item.products != null && item.products.length > 0">
|
||
|
|
<view class="menu-member" v-if='item1.isPush == 1' v-for="(item1,index1) in item.products" :key="index1" @tap="goDetail('product',item1)">
|
||
|
|
<view class="menu-img">
|
||
|
|
<img :src="item1.productPicture" alt="">
|
||
|
|
</view>
|
||
|
|
<view class="menu-content">
|
||
|
|
<view class="shop-menu-name">
|
||
|
|
{{item1.productName}}
|
||
|
|
</view>
|
||
|
|
<view class="shop-menu-price">
|
||
|
|
¥{{item1.attributeListPrice | sliceMsg}}
|
||
|
|
</view>
|
||
|
|
<view class="shop-menu-purchase">
|
||
|
|
拼团 <text style="color: red;">¥{{item1.productGroupBuyPrices | slicePrice}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<uni-load-more :status="loadStatus" @change="onChange" v-if="shopList.length > 0" />
|
||
|
|
</view>
|
||
|
|
<view style="width: 100%;height: 120rpx;"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loadStatus: 'more',
|
||
|
|
isArea:false,
|
||
|
|
searchScore: false,
|
||
|
|
searchSale: false,
|
||
|
|
shopArea:[],
|
||
|
|
totalPages:1,
|
||
|
|
searchForm:{
|
||
|
|
regionId:JSON.parse(uni.getStorageSync('area')).id,
|
||
|
|
shopType:'',
|
||
|
|
shopArea:'',
|
||
|
|
pageNumber: 1,
|
||
|
|
pageSize: '10',
|
||
|
|
sort: "shoprank",
|
||
|
|
order: "desc",
|
||
|
|
sortOrder:'shoprank',
|
||
|
|
orderOrder:'desc',
|
||
|
|
sortScore:'',
|
||
|
|
orderScore:'',
|
||
|
|
sortSale:'',
|
||
|
|
orderSale:''
|
||
|
|
},
|
||
|
|
shopList:[],
|
||
|
|
menuButtonInfo:{}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
filters: {
|
||
|
|
sliceMsg(val) {
|
||
|
|
var name = ''
|
||
|
|
if (typeof(val) == 'string') {
|
||
|
|
let newObj = JSON.parse(val)
|
||
|
|
for (let as in newObj) {
|
||
|
|
name = newObj[as].specPrice
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return name;
|
||
|
|
},
|
||
|
|
slicePrice(val){
|
||
|
|
let begin = ''
|
||
|
|
if(val != null){
|
||
|
|
begin = val[0].groupPrice
|
||
|
|
for(let i = 0;i < val.length;i++){
|
||
|
|
if(val[i].groupPrice < begin){
|
||
|
|
begin = val[i].groupPrice
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return begin;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
if (this.searchForm.pageNumber >= this.totalPages) return;
|
||
|
|
// this.status = 'loading';
|
||
|
|
this.searchForm.pageNumber ++;
|
||
|
|
this.getShopList();
|
||
|
|
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getShopArea();
|
||
|
|
// this.getShopList();
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中...',
|
||
|
|
mask: true
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
searchShop(type,value){
|
||
|
|
if(type == 'area'){
|
||
|
|
this.searchForm.shopArea = value
|
||
|
|
}else if(type == 'score'){
|
||
|
|
this.searchScore = !this.searchScore
|
||
|
|
this.searchSale = false
|
||
|
|
this.searchForm.sort = 'shopScore'
|
||
|
|
}else if(type == 'sale'){
|
||
|
|
this.searchSale = !this.searchSale
|
||
|
|
this.searchScore = false
|
||
|
|
this.searchForm.sort = 'saleCount'
|
||
|
|
}else if(type == 'all'){
|
||
|
|
this.searchForm.sortOrder = 'shoprank'
|
||
|
|
this.searchForm.orderOrder = 'desc'
|
||
|
|
this.searchForm.shopArea = ''
|
||
|
|
this.searchForm.sort = 'shoprank'
|
||
|
|
this.searchScore = false
|
||
|
|
this.searchScore = false
|
||
|
|
this.searchSale = false
|
||
|
|
}else if(type == 'typeUp'){
|
||
|
|
//TODO跳转新页面
|
||
|
|
}
|
||
|
|
this.getShopList();
|
||
|
|
},
|
||
|
|
getShopArea(){
|
||
|
|
let that = this
|
||
|
|
that.tui.request("/app/shopArea/getByParentId/"+JSON.parse(uni.getStorageSync('area')).id, "GET", {}, false, true).then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
if(res.result != null){
|
||
|
|
for(let m = 0;m<res.result.length;m++){
|
||
|
|
if(res.result[m].isCanteen == 1){
|
||
|
|
that.shopArea.push(res.result[m])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
console.log(that.shopArea)
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
that.tui.toast(res.message)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
}).catch((res) => {})
|
||
|
|
},
|
||
|
|
getShopList(){
|
||
|
|
this.loadStatus = 'loading'
|
||
|
|
if(this.searchSale){
|
||
|
|
this.searchForm.sortSale = 'saleCount'
|
||
|
|
this.searchForm.orderSale = 'desc'
|
||
|
|
this.searchForm.sortOrder = ''
|
||
|
|
}else{
|
||
|
|
this.searchForm.sortSale = ''
|
||
|
|
}
|
||
|
|
if(this.searchScore){
|
||
|
|
this.searchForm.sortScore = 'shopScore'
|
||
|
|
this.searchForm.orderScore = 'desc'
|
||
|
|
this.searchForm.sortOrder = ''
|
||
|
|
}else{
|
||
|
|
this.searchForm.sortScore = ''
|
||
|
|
}
|
||
|
|
let that = this
|
||
|
|
that.tui.request("/app/shop/getByCondition", "GET", this.searchForm, false, true).then((res) => {
|
||
|
|
that.loadStatus = 'nomore';
|
||
|
|
if (res.code == 200) {
|
||
|
|
if (that.searchForm.pageNumber == 1) {
|
||
|
|
that.shopList = res.result.content
|
||
|
|
} else {
|
||
|
|
that.shopList = [...that.shopList, ...res.result.content]
|
||
|
|
}
|
||
|
|
that.totalPages = res.result.totalPages
|
||
|
|
that.isArea = false
|
||
|
|
that.$forceUpdate()
|
||
|
|
} else {
|
||
|
|
that.tui.toast(res.message)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
uni.hideLoading()
|
||
|
|
}).catch((res) => {})
|
||
|
|
},
|
||
|
|
goDetail(type,item){
|
||
|
|
if(type == 'shop'){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/package1/group/groupBuySingle?type=shop&item=' + JSON.stringify(item)
|
||
|
|
})
|
||
|
|
}else if(type == 'search'){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/package1/group/groupBuySingle'
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/package1/group/groupBuySingle?type=product&item=' + JSON.stringify(item)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
back(){
|
||
|
|
uni.navigateBack()
|
||
|
|
},
|
||
|
|
checkArea(){
|
||
|
|
this.isArea = !this.isArea
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 24rpx;
|
||
|
|
background: #F5F8F5;
|
||
|
|
color: #00231C;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page1 {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 24rpx;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
|
||
|
|
width: 100%;
|
||
|
|
height: 54%;
|
||
|
|
}
|
||
|
|
.title-sreach{
|
||
|
|
width: 75%;
|
||
|
|
display: flex;
|
||
|
|
height: 200rpx;
|
||
|
|
}
|
||
|
|
.back-btn{
|
||
|
|
padding-top: 55px;
|
||
|
|
}
|
||
|
|
.title-name{
|
||
|
|
padding-top: 55px;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.title-search{
|
||
|
|
margin-top: 55px;
|
||
|
|
display: flex;
|
||
|
|
background: #fff;
|
||
|
|
height: 54rpx;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
border-radius: 54rpx;
|
||
|
|
width: 380rpx;
|
||
|
|
input{
|
||
|
|
height: 54rpx;
|
||
|
|
line-height: 54rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title-sort{
|
||
|
|
height: 60rpx;
|
||
|
|
display: flex;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
.sort-member{
|
||
|
|
line-height: 60rpx;
|
||
|
|
text-align: center;
|
||
|
|
background: #fff;
|
||
|
|
width: 20%;
|
||
|
|
margin-left: 4%;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
.sort-value{
|
||
|
|
width: 160rpx;
|
||
|
|
height: auto;
|
||
|
|
max-height: 300rpx;
|
||
|
|
overflow: scroll;
|
||
|
|
background: rgba(0, 0, 0, 0.7);
|
||
|
|
position: absolute;
|
||
|
|
top: 80rpx;
|
||
|
|
right: 0;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 22rpx;
|
||
|
|
}
|
||
|
|
.sort-value1{
|
||
|
|
border-bottom: 1rpx solid #eee;
|
||
|
|
}
|
||
|
|
.shop-list{
|
||
|
|
width: 95%;
|
||
|
|
height: auto;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.shop-member{
|
||
|
|
width: 100%;
|
||
|
|
height: 480rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background: #fff;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
.shop-img{
|
||
|
|
width: 160rpx;
|
||
|
|
height: 160rpx;
|
||
|
|
position: relative;
|
||
|
|
img{
|
||
|
|
width: 100%;
|
||
|
|
background-size: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.shop-top{
|
||
|
|
padding: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.shop-content{
|
||
|
|
flex: 1;
|
||
|
|
padding-left: 20rpx;
|
||
|
|
}
|
||
|
|
.shop-name{
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
.shop-content-center{
|
||
|
|
display: flex;
|
||
|
|
margin: 20rpx 0;
|
||
|
|
}
|
||
|
|
.shop-rate{
|
||
|
|
background: rgba(249, 212, 157, 0.34);
|
||
|
|
height: 40rpx;
|
||
|
|
display: flex;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
}
|
||
|
|
.shop-rate-num{
|
||
|
|
width: 50rpx;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
|
||
|
|
color: #fff;
|
||
|
|
line-height: 40rpx;
|
||
|
|
font-size: 22rpx;
|
||
|
|
border-bottom-left-radius: 20rpx;
|
||
|
|
border-top-left-radius: 20rpx;
|
||
|
|
border-bottom-right-radius: 10rpx;
|
||
|
|
border-top-right-radius: 10rpx;
|
||
|
|
}
|
||
|
|
.shop-tag{
|
||
|
|
flex: 1;
|
||
|
|
line-height: 40rpx;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.shop-content-bottom{
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.shop-deal{
|
||
|
|
flex:1;
|
||
|
|
}
|
||
|
|
.shop-bottom{
|
||
|
|
border-top: 2rpx solid #eee;
|
||
|
|
width: 100%;
|
||
|
|
overflow-x: scroll;
|
||
|
|
display: flex;
|
||
|
|
height: 280rpx;
|
||
|
|
overflow-y: hidden;
|
||
|
|
}
|
||
|
|
.menu-member{
|
||
|
|
width: 140rpx;
|
||
|
|
height: 100%;
|
||
|
|
margin: 10rpx 0 0 20rpx;
|
||
|
|
}
|
||
|
|
.menu-img{
|
||
|
|
height: 140rpx;
|
||
|
|
width: 140rpx;
|
||
|
|
img{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-size: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.menu-content{
|
||
|
|
font-size: 22rpx;
|
||
|
|
}
|
||
|
|
.shop-menu-name{
|
||
|
|
margin-top: 10rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.shop-menu-price{
|
||
|
|
margin-top: 6rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.shop-menu-purchase{
|
||
|
|
display: flex;
|
||
|
|
background: rgba(255, 57, 57, 0.1);
|
||
|
|
height: 36rpx;
|
||
|
|
line-height: 36rpx;
|
||
|
|
padding: 0 0 0 4rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
</style>
|