首次提交

This commit is contained in:
duan
2024-06-06 11:50:53 +08:00
parent cab4751927
commit 544c3b65b2
344 changed files with 72919 additions and 1 deletions

View File

@@ -0,0 +1,636 @@
<template>
<view class="content">
<view class="search-box">
<!-- mSearch组件 如果使用原样式删除组件元素-->
<!-- <mSearch class="mSearch-input-box" :mode="2" button="inside" :placeholder="defaultKeyword"
@search="doSearch(false)" @input="inputChange" @confirm="doSearch(false)" v-model="keyword"></mSearch> -->
<!-- 原样式 如果使用原样式恢复下方注销代码 -->
<!-- <view class="input-box">
<input type="text" :adjust-position="true" :placeholder="defaultKeyword" @input="inputChange" v-model="keyword" @confirm="doSearch(false)"
placeholder-class="placeholder-class" confirm-type="search">
</view>
<view class="search-btn" @tap="doSearch(false)">搜索</view> -->
<view class="margin-lr">
<u-search style="width: 100%;" placeholder="请输入商家或者商品名称" :focus="true" v-model="keyword"
:show-action="true" :animation="true" shape="square" action-text="取消" @custom="goBack()"
@search="doSearch(false)">
</u-search>
</view>
<!-- <u-dropdown v-show="isShowKeywordList">
<u-dropdown-item v-model="value1" :title="title" :options="options1" @change="confirm">
</u-dropdown-item>
<u-dropdown-item v-model="value2" :title="title1" :options="options2" @change="confirm2">
</u-dropdown-item>
</u-dropdown> -->
<view v-show="isShowKeywordList" style="width: 100%;z-index: 999;">
<view class="flex justify-between align-center bg-white padding-tb padding-lr-sm">
<view class="flex-sub text-center" :class="current==1?'select':''" @click="confirm(1)">综合排序</view>
<view class="flex-sub text-center" :class="current==3?'select':''" @click="confirm(3)">距离优先</view>
<view class="flex-sub text-center" :class="current==4?'select':''" @click="confirm(4)">销量优先</view>
<view class="flex-sub text-center flex" @click="isShow = !isShow" >
<view class="flex align-center" style="margin: 0 auto;">
<view :class="isShow?'select':''" >筛选</view>
<u-icon v-if="!isShow" name="arrow-down" size="28"></u-icon>
<u-icon v-if="isShow" name="arrow-up" color="#FCD202" size="28"></u-icon>
</view>
</view>
</view>
<view v-if="isShow" style="position: absolute;top: 150rpx;width: 100%;z-index: 1000;background: rgba(0,0,0,.5);height: 100vh;" @click="isShow =false">
<view class="padding-lr bg-white">
<view class="flex justify-between align-center padding-tb-sm u-border-bottom" v-for="(item,index) in options4" :key='index' @click.stop="getSelect(item)" >
<view class="text-df" :class="item.select?'select':''">{{item.shopTypeName}}</view>
<u-icon v-if="item.select" name="checkmark" color="#FCD202" size="28"></u-icon>
</view>
</view>
</view>
</view>
<!-- 原样式 end -->
<!-- 活动筛选 -->
<view class="hd flex justify-center" v-if="hdlist.length>0 && isShowKeywordList">
<view class="hd-box">
<scroll-view scroll-x="true" class="scroll-view_H">
<view class="hd-box-item" :style="currenthd==index?'background-color:#fcd202;font-weight:bold':''" @click="searchhd(index,item.activityId)" v-for="(item,index) in hdlist" :key="index">{{item.activityTitle}}</view>
</scroll-view>
</view>
</view>
</view>
<view class="search-keyword">
<view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
<view class="padding-lr">
<view class="" v-for="(item,index) in keywordList" :key='index'>
<view class=" flex justify-between bg-white padding" style="margin-bottom: 20rpx;"
@click="goNav('/pages/index/shop/index?shopId='+item.shopId)">
<image :src="item.shopCover" class="radius" style="width: 160rpx;height: 160rpx;"></image>
<view class=" margin-left-sm" style="width: 450rpx;">
<view class=" flex flex-direction justify-between">
<view class="text-lg text-bold text-black">{{item.shopName}}</view>
<view class="flex align-center margin-top-xs" style="width: 100%;">
<u-icon name="star-fill" color="#FD6416" size="28"></u-icon>
<text class="text-lg" style=""> {{item.shopScore?item.shopScore:0}}</text>
<text class="text-gray flex-sub margin-left-xs">销量{{item.shopSales?item.shopSales:0}}</text>
<text class="text-gray margin-left-xs">{{item.errandTime}}分钟</text>
<text class="text-gray margin-left-xs">{{item.distance}}</text>
</view>
<view class="text-gray margin-top-xs flex justify-between">
<view>起送 ¥{{item.minimumDelivery}} 配送 ¥{{item.errandMoney?item.errandMoney:0}}</view>
<view style="color: #FCD202;">{{item.autoSendOrder==1?'商家配送':'平台配送'}}</view>
</view>
<view class="text-gray margin-top-xs" v-if="item.businessHours&&item.lockHours">
营业时间{{item.businessHours}}-{{item.lockHours}}</view>
<view class="flex margin-top-xs justify-between align-start" style="width: 100%;">
<view class="flex flex-wrap align-center" style="width: 100%;height: 100%;overflow: hidden;">
<view class="lable flex justify-center align-center" v-if="item.exemptMinMoney">{{item.exemptMinMoney}}免配送费</view>
<view class="lable flex justify-center align-center" v-for="(ite,ind) in item.shopLable" :key='ind'
v-if="item.shopLable">
{{ite}}
</view>
<view class="lable flex justify-center align-center" v-if="item.couponList" style="border-radius: 4rpx;border: 1rpx solid red;background-color: #ffffff;color: red;box-sizing: border-box;" v-for="(it,ide) in item.couponList" :key="ide">{{it.minMoney}}{{it.money}}</view>
</view>
</view>
</view>
<view class="flex margin-top-xs">
<view v-for="(ite,ind) in item.goodsList" :key='ind'
@click.stop="goDet(ite.goodsId,item.shopId)" style="width: 33%;">
<image :src="ite.goodsCover" style="width: 120rpx;height: 120rpx;"
class="radius" mode=""></image>
<view class="u-line-1 text-df text-bold margin-top-xs">{{ite.goodsName}}</view>
<view class="text-bold margin-top-xs" style="color: #FD6416;"> <text
class="text-sm">¥</text> {{ite.goodsMoney}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- <view v-if="keywordList.length == 0">
暂无数据
</view> -->
<empty v-if="keywordList.length == 0"></empty>
</view>
<view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
<view class="keyword-block" v-if="hotKeywordList.length>0">
<view class="keyword-list-header">
<view>热门搜索</view>
<view>
<image @tap="hotToggle" :src="'/static/images/index/attention'+forbid+'.png'"></image>
</view>
</view>
<view class="keyword" v-if="forbid==''">
<view v-for="(keyword,index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">
{{keyword}}
</view>
</view>
<view class="hide-hot-tis" v-else>
<view>当前搜热已隐藏</view>
</view>
</view>
<view class="keyword-block" v-if="oldKeywordList.length>0">
<view class="keyword-list-header">
<view>历史记录</view>
<view>
<image @tap="oldDelete" src="/static/images/index/delete.png"></image>
</view>
</view>
<view class="keyword">
<view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword.message)" :key="index">
{{keyword.message}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import empty from '@/components/empty.vue'
export default {
components: {
empty
},
data() {
return {
currenthd:-1,
hdlist:[],
activityId:'',
isShow: false,
defaultKeyword: "",
keyword: "",
oldKeywordList: [], //历史记录
hotKeywordList: [], //热搜
keywordList: [], //搜索列表
forbid: '',
isShowKeywordList: false,
limit: 10,
page: 1,
userId: '',
isVip: false,
lng: '',
lat: '',
value1: 1,
value2: 0,
options1: [{
label: '综合排序',
value: 1,
},
{
label: '距离优先',
value: 3,
},
{
label: '销量优先',
value: 4,
}
],
options2: [{
value: '',
label: "全部"
}],
options4: [{
id: '',
select: true,
shopTypeName: "全部"
}],
current: 1,
shopTypeId: '',
title: '综合排序',
title1: '筛选',
totalCount: 0
}
},
onLoad() {
let that = this
this.getSearchList()
this.gethdlist();
this.userId = uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
this.lng = uni.getStorageSync('lng')
this.lat = uni.getStorageSync('lat')
this.getShopType()
this.isVip = uni.getStorageSync('isVIP')
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: function(res) {
// that.lat = res.latitude;
// that.lng = res.longitude;
}
});
},
methods: {
//筛选活动
searchhd(index,activityId){
if(index==this.currenthd){
this.currenthd = -1
this.activityId = '';
this.doSearch(false);
}else{
this.currenthd = index;
this.activityId=activityId;
this.doSearch(false);
}
},
//获取所有活动
gethdlist(){
this.$Request.get("/app/activityManage/getActivityList").then(res => {
if (res.code == 0) {
res.data.records.map((item,index)=>{
if(item.activityId==14){
res.data.records.splice(index, 1)
}
})
this.hdlist = res.data.records
}
});
},
getSelect(e) {
this.options4.forEach(res=>{
if(res.id == e.id) {
res.select = true
this.page = 1
this.shopTypeId = e.id
// this.getShopList();
this.doSearch(this.keyword);
this.isShow = false
} else {
res.select = false
}
})
},
confirm(e) {
console.log(e)
this.page = 1
this.current = e;
this.doSearch(this.keyword);
},
confirm2(e) {
console.log(e)
this.page = 1
this.shopTypeId = e
if (e == 0) {
this.title1 = '筛选'
} else {
this.title1 = this.options2[e].label
}
this.doSearch(this.keyword);
},
// 获取搜索历史
getSearchList() {
let data = {
page: this.page,
limit: this.limit,
}
this.$Request.get("/app/searchhistory/selectSearchHistory", data).then(res => {
console.log(res)
if (res.code == 0) {
this.oldKeywordList = res.data.list
}
});
this.$Request.getT('/app/common/type/309').then(res => { //订单状态通知
if (res.code == 0) {
this.hotKeywordList = res.data.value.split(',')
}
})
},
//清除历史搜索
oldDelete() {
uni.showModal({
content: '确定清除历史搜索记录?',
success: (res) => {
if (res.confirm) {
console.log('用户点击确定');
this.$Request.get("/app/searchhistory/deleteSearchHistory").then(res => {
if (res.code == 0) {
this.getSearchList()
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
//执行搜索
doSearch(keyword) {
this.keyword = keyword === false ? this.keyword : keyword;
this.isShowKeywordList = true;
if (!this.keyword) {
uni.showToast({
title: '请输入内容',
icon: 'none',
duration: 1000
})
return
}
let data = {
impotr: this.keyword,
screen: this.current,
shopTypeId: this.shopTypeId,
limit: this.limit,
page: this.page,
lng: this.lng,
lat: this.lat,
userId: this.userId,
activityId:this.activityId
}
this.$Request.get("/app/goods/selectShop", data).then(res => {
if (res.code == 0) {
this.totalCount = res.data.totalCount
res.data.list.forEach(ret => {
if (ret.distance > 1000) {
ret.distance = Number((ret.distance / 1000)).toFixed(2) + "km"
} else {
if (ret.distance == 0) {
ret.distance = "0m";
} else {
ret.distance = Number(ret.distance).toFixed(1) + "m";
}
}
ret.shopLable = ret.shopLable ? ret.shopLable.split(',') : ''
ret.errandTime = Math.round(ret.errandTime)
ret.shopScore = ret.shopScore.toFixed(1)
})
if (this.page == 1) this.keywordList = [];
this.keywordList = [...this.keywordList, ...res.data.list]
}
});
},
// 商户类型
getShopType() {
this.$Request.getT('/app/shoptype/selectShopTypeList').then(res => {
if (res.code == 0) {
res.data.forEach(res => {
res.select = false
})
this.options4 = [...this.options4, ...res.data]
}
})
},
// 点击取消返回首页
goBack() {
uni.navigateBack()
},
//热门搜索开关
hotToggle() {
this.forbid = this.forbid ? '' : '_forbid';
},
// 跳转商品详情
goDet(goodsId, shopId) {
uni.navigateTo({
url: '/pages/index/shop/goodsDet?goodsId=' + goodsId + '&shopId=' + shopId + '&orderType=1'
})
},
goNav(url) {
console.log(url)
if (this.userId) {
uni.navigateTo({
url
})
} else {
uni.navigateTo({
url: '/pages/public/login'
})
}
},
// 跳转订单
goOrder(e) {
if (this.userId) {
uni.navigateTo({
url: '/pages/index/game/order?id=' + e.id
});
} else {
uni.navigateTo({
url: '/pages/public/login'
});
}
},
},
onReachBottom: function() {
// this.page = this.page + 1;
// this.doSearch(false);
if(this.keywordList.length<this.totalCount) {
this.page = this.page + 1;
this.doSearch(false);
} else {
uni.showToast({
title: '已经到底了',
icon: 'none'
})
}
},
onPullDownRefresh: function() {
this.page = 1;
this.doSearch(false);
},
}
</script>
<style lang="scss">
page {
/* background-color: #FFFFFF; */
}
.hd{
width: 100%;
height: auto;
// margin-top: 20rpx;
padding-top: 20rpx;
padding-bottom: 20rpx;
background-color: rgb(248,248,248);
.hd-box{
width: 686rpx;
height: 100%;
.scroll-view_H{
width: 100%;
white-space: nowrap;
}
.hd-box-item{
display: inline-block;
padding: 10rpx 20rpx 10rpx 20rpx;
background-color: #ffffff;
font-size: 24rpx;
border-radius: 8rpx;
margin-right: 10rpx;
}
}
}
.select{
color: #FCD202;
}
.search-box {
width: 100%;
/* background-color: rgb(242, 242, 242); */
padding: 15upx 0 0;
/* display: flex; */
/* justify-content: space-between; */
position: sticky;
top: 0;
background-color: #FFF;
z-index: 99;
}
.search-box .mSearch-input-box {
width: 100%;
}
.search-box .input-box {
width: 85%;
flex-shrink: 1;
display: flex;
justify-content: center;
align-items: center;
}
.search-box .search-btn {
width: 15%;
margin: 0 0 0 2%;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
font-size: 28upx;
/* color: #fff; */
background: linear-gradient(to right, #ff9801, #ff570a);
border-radius: 60upx;
}
.search-box .input-box>input {
width: 100%;
height: 60upx;
font-size: 32upx;
border: 0;
border-radius: 60upx;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0 3%;
margin: 0;
background-color: #ffffff;
}
.placeholder-class {
color: #9e9e9e;
}
.search-keyword {
width: 100%;
/* background-color: #111224; */
}
.keyword-list-box {
height: calc(100vh - 110upx);
/* padding-top: 10upx; */
/* border-radius: 20upx 20upx 0 0; */
/* background-color: #fff; */
}
.keyword-entry-tap {
background-color: #eee;
}
.keyword-entry {
width: 94%;
height: 80upx;
margin: 0 3%;
font-size: 30upx;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 1upx #e7e7e7;
}
.keyword-entry image {
width: 60upx;
height: 60upx;
}
.keyword-entry .keyword-text,
.keyword-entry .keyword-img {
height: 80upx;
display: flex;
align-items: center;
}
.keyword-entry .keyword-text {
width: 90%;
}
.keyword-entry .keyword-img {
width: 10%;
justify-content: center;
}
.keyword-box {
height: calc(100vh - 110upx);
/* border-radius: 20upx 20upx 0 0; */
/* background-color: #111224; */
}
.keyword-box .keyword-block {
padding: 10upx 0;
}
.keyword-box .keyword-block .keyword-list-header {
width: 94%;
padding: 10upx 3%;
font-size: 27upx;
font-weight: 700;
/* color: #FFFFFF; */
display: flex;
justify-content: space-between;
}
.keyword-box .keyword-block .keyword-list-header image {
width: 40upx;
height: 40upx;
}
.keyword-box .keyword-block .keyword {
width: 94%;
padding: 3px 3%;
display: flex;
flex-flow: wrap;
justify-content: flex-start;
}
.keyword-box .keyword-block .hide-hot-tis {
display: flex;
justify-content: center;
font-size: 28upx;
/* color: #FFFFFF; */
}
.keyword-box .keyword-block .keyword>view {
display: flex;
justify-content: center;
align-items: center;
border-radius: 10upx;
padding: 0 20upx;
margin: 10upx 20upx 10upx 0;
height: 60upx;
font-size: 28upx;
background-color: #eee;
/* color: #FFFFFF; */
}
.lable {
border: 1rpx solid #FFE6D9;
height: 40rpx;
padding: 0 14rpx;
background: #FFE6D9;
border-radius: 4rpx;
font-weight: 500;
color: #FD6416;
font-size: 20rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
</style>