<template>
<view class="content">
<u-navbar title="美食推荐" :safeAreaInsetTop="true" placeholder='true' fixed>
<view class="u-nav-slot" slot="left" @click='leftClick'>
<view class="iconfont applet-colors-ditu"></view>
</view>
</u-navbar>
<mescroll-uni :up="upOption" :down="downOption" ref="mescrollRef" @init="mescrollInit"
@up="upCallback" @down="downCallback" :top="150">
<view class="flex content1">
<view @click='placeSelect' class='address flex'>
<view class='detailedAddress'>{{detailedAddress1}}</view>
<view class='iconfont applet-xiala'></view>
</view>
<view class="search-wrap">
<view class="search flex justify-space-between align-item-center flex-between" @click="search">
<view class="left flex">
<image class="dSLComVueTopLeftImg" style="width: 40rpx;height: 40rpx"
src="@/static/image/card/search.png"></image>
<text class="search-val"> {{searchVal?searchVal:'搜索美食'}}</text>
</view>
<view class="right">
<image style='width:32rpx;height:32rpx;' v-if="searchVal" @click.stop="delSearchVal"
src="@/static/image/card/searchdel.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="tag-type head">
<view v-for='item in jobs' @click="change(item)" class="item" :class="item.checked?'item-active':''">
{{item.iname}}
</view>
</view>
<scroll-view scroll-x="true" scroll-with-animation="true" class='list-type'>
<view v-for='item in searchTypes' @click='changetype(item)'
:class='searchType==item.value?"Semibold active":"Regular"' class="typeitem">{{item.name}}</view>
</scroll-view>
<view class='findItem' v-for='item in findList' @click="toShop(item)" v-if="item.foodDishesInfoList&&item.foodDishesInfoList.length!=0">
<view class='flex row2'>
<view class='name'>{{item.shopNames}}</view>
</view>
<view style='align-items: flex-start;' class='flex' >
<view style='width:100vw;' class="left flex " :class='item.foodDishesInfoList.length==4?"justify-space-between":""'>
<!-- @click.stop='previewImg(item1)' -->
<view v-for='item1 in item.foodDishesInfoList' class="img">
<u--image radius='4' :showLoading="true" :src="item1.dishImage" width="150rpx"
height="150rpx" ></u--image>
</view>
</view>
</view>
<view class="tag-type1 flex">
<text class="text" v-for='item1 in item.labels'> {{item1}}</text>
</view>
<view class='address flex justify-space-between'>
<view style='width:60vw;' class='flex'>
<view class='iconfont applet-dizhi'></view>
<view class="detailedAddress" @click.stop="toShopDetail(item)">
{{item.detailedAddress}}
</view>
<!-- <view>{{item.province}}{{item.city}}{{item.area}}</view> -->
</view>
<view style="color: #999;width:40vw;text-align:right;font-size: 28rpx;">
距离{{item.distance1>1000?item.distance:item.distance1}} {{item.distance1>1000?'km':'m'}}
</view>
</view>
</view>
</mescroll-uni>
<!-- <mescroll-body ref="mescrollRef" :up="upOption" :down="downOption" @init="mescrollInit" @up="upCallback" @down="downCallback"></mescroll-body> -->
<!-- <view class='group' @click='group'>
<button class="tuan">团</button>
</view> -->
</view>
</template>
<script>
var that;
var GDMapWX = require('@/js_sdk/js-amap/amap-wx.130.js');
import uniTag from '@/uni_modules/uni-tag/components/uni-tag/uni-tag.vue';
import MoteLinesDivide from "@/components/text-over-flow/text-over-flow.vue"
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import {
authorizedLocation
} from '@/util/util.js'
export default {
components: {
MoteLinesDivide,
uniTag
},
mixins: [MescrollMixin],
data() {
return {
place: '',
searchVal: "",
current: 0,
mescroll: null,
findList: [],
inverted: true,
handleList: [],
labels: [],
searchType: '1',
label: '',
longitude: '',
latitude: '',
curPageLen: 0,
totalPage: 0,
detailedAddress: '正在定位...',
detailedAddress1: '',
downOption: {
auto: false,
textColor: '#bbb'
},
searchTypes: [{
name: '默认排序',
value: '1'
}, {
name: '距离最近',
value: '2'
},
// {
// name: '最多点赞',
// value: '3'
// }, {
// name: '我的收藏',
// value: '4'
// },
],
jobs: [{
id: 1,
iname: '海鲜',
checked: false
},
{
id: 2,
iname: '自助',
checked: false
}, {
id: 3,
iname: '烧烤',
checked: false
},
{
id: 4,
iname: '火锅',
checked: false
},
{
id: 5,
iname: '家常菜',
checked: false
},
{
id: 6,
iname: '面食',
checked: false
},
{
id: 7,
iname: '小龙虾',
checked: false
},
{
id: 8,
iname: '早餐',
checked: false
}
],
upOption: {
page: {
size: 10 // 每页数据的数量,默认10
},
auto: false,
noMoreSize: 1,
textNoMore: '没有更多了~',
textColor: '#bbb'
},
};
},
onLoad() {
that = this
// this.getList()
// this.getLocation()
// this.mescroll.resetUpScroll();
},
onShow() {
//判断是否有定位权限
this.searchVal = uni.getStorageSync("search_food_val")
if (this.detailedAddress == '正在定位...') {
this.isdingwei()
}
},
methods: {
toShopDetail(val){
console.log(val)
uni.navigateTo({
url: "/pageA/food/detailMap?val="+JSON.stringify(val)
})
},
leftClick() {
uni.navigateTo({
url: "/pageA/food/fondMap"
})
},
previewImg(item) {
uni.previewImage({
current: 0,
urls: [item.dishImage],
loop: true,
})
},
toShop(val) {
uni.navigateTo({
url: "/pageA/food/menu?val=" + JSON.stringify(val)
})
},
delSearchVal() {
this.searchVal = ''
uni.removeStorageSync("search_food_val")
that.mescroll.resetUpScroll()
},
isdingwei() {
authorizedLocation().then(res => {
let _obj = {}
if (res == '取消授权') {
//获取上一次，无上一次山海广场
let _place = uni.getStorageSync("LocationPlace")
if (_place && _place.latitude) {
_obj = {
latitude: _place.latitude,
longitude: _place.longitude
}
} else {
_obj = {
latitude: 40.22086204872,
longitude: 122.08338497727
}
}
} else {
_obj = {
latitude: res.latitude,
longitude: res.longitude
}
}
this.longitude = _obj.longitude
this.latitude = _obj.latitude
var amapPluginInstance = new GDMapWX.AMapWX({
key: '6bafe91754a563ff2b7c02542c1ef4e8'
});
amapPluginInstance.getRegeo({
success: function(res) {
console.log(res)
that.detailedAddress = res[0].desc
that.detailedAddress1 = that.detailedAddress.length>4 ? that.detailedAddress.slice(0,4)+'...' : that.detailedAddress
that.mescroll.resetUpScroll()
//成功回调
},
fail: function(info) {
//失败回调
console.log(info)
}
})
})
},
search() {
uni.navigateTo({
url: "/pageA/food/search"
})
},
change(item) {
this.searchVal = item.iname
this.mescroll.resetUpScroll()
// if (this.label == item.iname) {
// this.label = ''
// } else {
// this.label = item.iname
// }
// this.inverted = !this.inverted;
// that.upCallback({
// num: 1,
// size: 10
// })
},
changetype(item) {
this.searchType = item.value
that.upCallback({
num: 1,
size: 10
})
},
placeSelect() {
uni.chooseLocation({
success: function(res) {
console.log(res);
that.latitude = res.latitude
that.longitude = res.longitude
uni.setStorageSync("findlatitude", res.latitude)
uni.setStorageSync("findlongitude", res.longitude)
// let _address = that.$helper.formatLocation(res.address)
that.detailedAddress = res.name
that.detailedAddress1 = that.detailedAddress.length>4 ? that.detailedAddress.slice(0,4)+'...' : that.detailedAddress
uni.setStorageSync("detailedAddress", res.name)
that.$forceUpdate()
that.upCallback({
num: 1,
size: 10
})
}
});
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
downCallback() {
this.mescroll.resetUpScroll()
// if (uni.getStorageSync("userInfo").phone) {
// this.mescroll.resetUpScroll()
// } else {
// that.mescroll.endBySize(0, 0)
// this.showAuthorizePhone = true
// }
},
getDistance(latitude, longitude) {
console.log(latitude, longitude, that.latitude, that.longitude)
return new Promise((resolve, reject) => {
qqmapsdk.direction({
mode: 'driving', //可选值：'driving'（驾车） trucking 货车
//from参数不填默认当前地址
// latitude纬度 longitude 经度
from: {
latitude: that.latitude,
longitude: that.longitude
},
to: {
latitude: latitude,
longitude: longitude
},
size: 4, // 车型 1: 微型车 2: 轻型车 3: 中型车 4: 重型车
policy: 'LEAST_TIME', //'9', //参考实时路况，高速优先，尽量躲避拥堵
height: 4,
width: 2.5,
length: 13,
weight: 6.8,
axle_weight: 34,
axle_count: 6,
is_trailer: 1,
success: function(res1, data) {
console.log(res1, data[0].distance, data)
resolve(data[0])
}
})
})
},
async upCallback(page) {
uni.showLoading({
title: '数据加载中'
})
await that.$request.baseRequest('admin.tourism.foodInfo', 'foodList', {
page: page.num,
limit: page.size,
searchType: this.searchType,
searchKeyWord: this.searchVal,
place: this.detailedAddress,
userLongitude: this.longitude,
userLatitude: this.latitude,
}, failres => {
uni.showToast({
icon: "none",
title: failres.errmsg,
duration: 3000
});
}).then(res => {
uni.hideLoading()
if (page.num == 1) that.findList = [], that.handleList = [];
that.curPageLen = res.data.items.length;
that.handleList = res.data.items
that.totalPage = res.data.total;
})
if (that.handleList.length > 0) {
for (var i = 0; i < that.handleList.length; i++) {
that.handleList[i].latitude = that.handleList[i].location.split(',')[0]
that.handleList[i].longitude = that.handleList[i].location.split(',')[1]
// var data = await that.getDistance(that.handleList[i].latitude, that.handleList[i].longitude)
that.handleList[i].distance1 = JSON.parse(JSON.stringify(that.handleList[i].distance))
that.handleList[i].distance = (that.handleList[i].distance / 1000).toFixed(1)
if (that.handleList[i].label) {
that.handleList[i].labels = that.handleList[i].label.split(",")
}
if (that.handleList[i].foodDishesInfoList) {
that.handleList[i].foodDishesInfoList = that.handleList[i].foodDishesInfoList.splice(0, 4)
}
}
that.findList = that.findList.concat(that.handleList)
} else {
uni.hideLoading()
}
that.$nextTick(() => {
that.mescroll.endBySize(that.curPageLen, that.totalPage)
});
},
group() {
uni.navigateTo({
url: '/pageA/food/groupBuying'
})
},
}
}
</script>
<style lang="scss" scoped>
.content {}
.content1 {
padding: 20rpx;
background-color: #fff;
.search {
// color: #9199af;
// background: #f9d27d;
border-radius: 50rpx;
padding: 15rpx 0 15rpx 15rpx;
box-sizing: border-box;
margin-right: 20rpx;
}
.left {
width: 80%;
text {
white-space: nowrap;
overflow: scroll;
position: relative;
margin-left: 20rpx;
color: #BBBBBB;
display: flex;
align-items: center;
}
}
.right {
// width:14%;
// margin-right: 20rpx
display: flex;
}
}
.search-wrap {
width: 70%;
background: rgb(249, 249, 249);
// border: 1px solid #f9d27d;
border-radius: 50rpx;
.left{
align-items: center;
}
.search-val{
color:#BBBBBB;
}
}
.address {
width: 27%;
}
.findItem {
background: #fff;
margin: 20rpx;
border-radius: 20rpx;
padding: 20rpx;
font-size: 32rpx;
.row2 {
margin:0 0 20rpx 0;
}
.left {
// background: red;
}
.name {
color: #333;
// margin-left: 10rpx;
font-weight: 700;
font-size: 32rpx;
}
.description {
color: #666;
margin-top: 10rpx;
}
.address {
// margin-top: 30rpx;
width: 100%;
color: #393733;
// margin-top: 20rpx;
}
.img{
margin: 10rpx;
}
.left .img:first-child{
margin-left:0;
}
.left .img:last-child{
margin-right:0;
}
.detailedAddress {
width: 70vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color:#999 ;
line-height: 40rpx;
text-align: left;
font-size: 28rpx;
}
}
.applet-dianpu1 {
color: #393733;
font-size: 50rpx;
}
.applet-dizhi {
color: #999;
font-size: 38rpx;
position: relative;
// top: -2rpx;
}
.group {
position: fixed;
// margin-left: 350px;
bottom: 40rpx;
right: 40rpx;
z-index: 999;
}
.tuan {
background: #eaad1a;
border-radius: 50px;
color: #fff;
}
.applet-colors-tianjia2 {}
// .text {
// font-size: 26rpx;
// font-weight: 500;
// color: #eaad1a;
// opacity: 0.5;
// margin-right: 56rpx;
// }
.head {
white-space: nowrap;
overflow-x: scroll;
padding-left: 20rpx;
width: calc(100vw);
box-sizing: border-box;
.item {
display: inline-block;
background: #F0F0F0;
color: #999;
padding: 10rpx 26rpx;
margin-right: 20rpx;
border-radius: 50rpx;
font-size: 24rpx;
}
}
.tag-type1 {
margin: 20rpx 0;
.text {
border-radius: 4px;
background-color: #FDF2E5;
color: #E95700;
margin-right: 30rpx;
padding: 10rpx 26rpx;
font-size: 24rpx;
margin-right: 20rpx;
}
}
.tag-type {
// margin: 20rpx 0;
.text {
border-radius: 4px;
background-color: #FDF2E5;
color: #E95700;
margin-right: 30rpx;
padding: 10rpx 26rpx;
font-size: 24rpx;
margin-right: 20rpx;
}
}
.list-type {
background: #fff;
width: 100vw;
padding-top: 5px;
height: 88rpx;
overflow-x: scroll;
white-space: nowrap;
}
.typeitem {
margin: 20rpx 20rpx 0 20rpx;
position: relative;
display: inline-block;
padding-bottom: 10px;
font-size: 28rpx;
color: #888;
}
.typeitem.active {
color: #eaad1a;
font-size: 32rpx;
}
.typeitem.active:after {
content: '';
display: block;
position: absolute;
height: 3px;
bottom: 0;
background: #eaad1a;
width: 44rpx;
left: 50%;
transform: translateX(-50%);
}
.tag-type {
background: #fff;
uni-tag {
margin-left: 20rpx !important;
}
}
.applet-colors-ditu {
font-size: 40rpx;
}
/deep/.mescroll-upwarp {
padding: 30rpx 0;
}
.applet-xiala{
margin: 0 16rpx 0 -4px;
}
</style>