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