wangfukang
4 weeks ago
8 changed files with 856 additions and 1256 deletions
@ -1,519 +0,0 @@ |
|||||
<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="搜索" v-model="searchForm.keyWord" @confirm="goSearch" confirm-type="search" /> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view style="width: 95%;background: #fff;margin: 0 auto;border-radius: 20rpx;padding: 20rpx;min-height: 160rpx;" v-if="historyList.length > 0 && !searchForm.shopName"> |
|
||||
<view style="height: 60rpx;color: #777;display: flex;justify-content: space-between;align-items: center;"> |
|
||||
<text>历史搜索</text> |
|
||||
<uni-icons type="trash" size="18" color="#999" @tap="clearHistory"></uni-icons> |
|
||||
</view> |
|
||||
<view style="overflow: hidden;"> |
|
||||
<view v-for="(item, index) in historyList" :key="index" @tap="clickHistory(item)" style="margin-right:20rpx;margin-bottom:20rpx;background: rgba(247, 248, 248, 0.6);display: inline-block;padding: 10rpx 20rpx;border-radius: 10rpx;float: left;"> |
|
||||
{{item}} |
|
||||
</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"> |
|
||||
<view class="shop-top"> |
|
||||
<view class="shop-img"> |
|
||||
<img :src="item.shopIcon" alt=""> |
|
||||
<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> |
|
||||
<view style="padding-top: 4rpx;"> |
|
||||
<uni-rate :disabled="true" size="16" disabledColor="rgba(255, 184, 84, 1)" :value="item.shopScore" /> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="shop-tag"> |
|
||||
<text style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;"> |
|
||||
{{item.shopTakeaway && item.shopTakeaway.type ? 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.delFlag == 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, |
|
||||
historyList: [], |
|
||||
searchForm:{ |
|
||||
regionId:JSON.parse(uni.getStorageSync('area')).id, |
|
||||
shopName:'', |
|
||||
shopType:'', |
|
||||
keyWord:'', |
|
||||
shopArea:'', |
|
||||
pageNumber: 1, |
|
||||
pageSize: '10', |
|
||||
merchantType: 1, |
|
||||
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(option) { |
|
||||
if (option && option.shopType && option.shopType !== 'undefined') { |
|
||||
this.searchForm.shopType = option.shopType; |
|
||||
this.getShopList(); |
|
||||
} |
|
||||
let history = uni.getStorageSync('searchHistoryGroup'); |
|
||||
if (history) { |
|
||||
this.historyList = JSON.parse(history); |
|
||||
} |
|
||||
this.searchForm.regionId = JSON.parse(uni.getStorageSync('area')).id |
|
||||
this.getShopArea(); |
|
||||
//this.getShopList(); |
|
||||
}, |
|
||||
onShow() { |
|
||||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|
||||
}, |
|
||||
methods: { |
|
||||
goSearch() { |
|
||||
if (this.searchForm.keyWord && this.searchForm.keyWord.trim()) { |
|
||||
let list = this.historyList; |
|
||||
let index = list.indexOf(this.searchForm.keyWord.trim()); |
|
||||
if (index !== -1) list.splice(index, 1); |
|
||||
list.unshift(this.searchForm.keyWord.trim()); |
|
||||
if (list.length > 10) list.pop(); |
|
||||
this.historyList = list; |
|
||||
uni.setStorageSync('searchHistoryGroup', JSON.stringify(list)); |
|
||||
} |
|
||||
this.searchForm.pageNumber = 1; |
|
||||
this.getShopList(); |
|
||||
}, |
|
||||
clickHistory(item) { |
|
||||
this.searchForm.keyWord = item; |
|
||||
this.goSearch(); |
|
||||
this.$forceUpdate() |
|
||||
}, |
|
||||
clearHistory() { |
|
||||
uni.showModal({ |
|
||||
title: '提示', |
|
||||
content: '确定清空历史搜索吗？', |
|
||||
success: (res) => { |
|
||||
if (res.confirm) { |
|
||||
this.historyList = []; |
|
||||
uni.setStorageSync('searchHistoryGroup', '[]'); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
searchShop(type,value){ |
|
||||
this.searchForm.pageNumber = 1 |
|
||||
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]) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} 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:'/package2/group/groupBuySingle?type=shop&item=' + encodeURIComponent(JSON.stringify(item)) |
|
||||
}) |
|
||||
}else if(type == 'search'){ |
|
||||
uni.navigateTo({ |
|
||||
url:'/package2/group/groupBuySingle' |
|
||||
}) |
|
||||
}else{ |
|
||||
uni.navigateTo({ |
|
||||
url:'/package2/group/groupBuySingle?type=product&item=' + encodeURIComponent(JSON.stringify(item)) |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
back(){ |
|
||||
uni.navigateBack() |
|
||||
}, |
|
||||
checkArea(){ |
|
||||
this.isArea = !this.isArea |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
page { |
|
||||
width: 100%; |
|
||||
min-height: 100%; |
|
||||
font-size: 24rpx; |
|
||||
background: #F5F8F5; |
|
||||
color: #00231C; |
|
||||
} |
|
||||
|
|
||||
.page1 { |
|
||||
width: 100%; |
|
||||
min-height: 100vh; |
|
||||
font-size: 24rpx; |
|
||||
position: relative; |
|
||||
} |
|
||||
.title{ |
|
||||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
width: 100%; |
|
||||
height: auto; |
|
||||
padding-bottom: 20rpx; |
|
||||
} |
|
||||
.title-sreach{ |
|
||||
width: 75%; |
|
||||
display: flex; |
|
||||
height: 200rpx; |
|
||||
} |
|
||||
.back-btn{ |
|
||||
padding-top: 110rpx; |
|
||||
} |
|
||||
.title-name{ |
|
||||
padding-top: 110rpx; |
|
||||
font-size: 36rpx; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.title-search{ |
|
||||
margin-top: 110rpx; |
|
||||
display: flex; |
|
||||
background: #fff; |
|
||||
height: 54rpx; |
|
||||
margin-left: 20rpx; |
|
||||
border-radius: 54rpx; |
|
||||
width: 370rpx; |
|
||||
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: auto; |
|
||||
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; |
|
||||
padding: 0 10rpx 0 0; |
|
||||
} |
|
||||
.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> |
|
||||
Loading…
Reference in new issue