|
@@ -1,59 +1,51 @@
|
|
|
<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>
|
|
|
- <view class="flex content1">
|
|
|
- <view @click='placeSelect' class='address flex'>
|
|
|
- <view class='detailedAddress'>{{detailedAddress1}}</view>
|
|
|
- <view class='iconfont applet-xiala'></view>
|
|
|
+ <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>
|
|
|
- <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: 30rpx;height: 30rpx;flex: none;" src="@/static/image/card/search.png"></image>
|
|
|
- <text class="search-val"> {{searchVal?searchVal:'搜索美食'}}</text>
|
|
|
+ </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="right">
|
|
|
- <image style='width:32rpx;height:32rpx;' v-if="searchVal" @click.stop="delSearchVal"
|
|
|
- src="@/static/image/card/searchdel.png" mode="widthFix"></image>
|
|
|
+ <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>
|
|
|
- </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>
|
|
|
- <mescroll-uni height="1200" :up="upOption" :down="downOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback"
|
|
|
- @down="downCallback" >
|
|
|
- <view class='findItem' v-for='item in findList' @click="toShop(item)">
|
|
|
- <view style='align-items: flex-start;' class='flex'>
|
|
|
+ <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 style='align-items: flex-start;' class='flex' >
|
|
|
<view style='width:100vw;' class="left flex">
|
|
|
- <!-- @click.stop='previewImg(item1)' -->
|
|
|
- <view v-for='item1 in item.foodDishesInfoList' style='margin:10rpx;'>
|
|
|
- <u--image radius='4' :showLoading="true" :src="item1.dishImage" width="80px"
|
|
|
- height="80px"></u--image>
|
|
|
+ <!-- @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='flex row2'>
|
|
@@ -66,22 +58,22 @@
|
|
|
<text class="text" v-for='item1 in item.labels'> {{item1}}</text>
|
|
|
</view>
|
|
|
<view class='address flex justify-space-between'>
|
|
|
- <view @click.stop='' style='width:60vw;' class='flex'>
|
|
|
+ <view style='width:60vw;' class='flex'>
|
|
|
<view class='iconfont applet-dizhi'></view>
|
|
|
- <view class="detailedAddress">
|
|
|
+ <view class="detailedAddress" @click.stop="toShopDetail(item)">
|
|
|
{{item.detailedAddress}}
|
|
|
</view>
|
|
|
<!-- <view>{{item.province}}{{item.city}}{{item.area}}</view> -->
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
- <view style="color: #888;width:40vw;text-align:right;">
|
|
|
- {{item.distance1>1000?item.distance:item.distance1}} {{item.distance1>1000?'km':'m'}}
|
|
|
+ <view style="color: #999;width:40vw;text-align:right;">
|
|
|
+ 距离{{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>
|
|
|
+
|
|
|
<!-- <view class='group' @click='group'>
|
|
|
<button class="tuan">团</button>
|
|
|
</view> -->
|
|
@@ -91,7 +83,7 @@
|
|
|
<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";
|
|
@@ -107,7 +99,7 @@
|
|
|
data() {
|
|
|
return {
|
|
|
place: '',
|
|
|
- searchVal: "",
|
|
|
+ searchVal: "",
|
|
|
current: 0,
|
|
|
mescroll: null,
|
|
|
findList: [],
|
|
@@ -121,49 +113,49 @@
|
|
|
curPageLen: 0,
|
|
|
totalPage: 0,
|
|
|
detailedAddress: '正在定位...',
|
|
|
- detailedAddress1:'',
|
|
|
+ detailedAddress1: '',
|
|
|
downOption: {
|
|
|
auto: false,
|
|
|
textColor: '#bbb'
|
|
|
},
|
|
|
searchTypes: [{
|
|
|
- name: '默认排序',
|
|
|
- value: '1'
|
|
|
- }, {
|
|
|
- name: '距离最近',
|
|
|
- value: '2'
|
|
|
- },
|
|
|
- // {
|
|
|
- // name: '最多点赞',
|
|
|
- // value: '3'
|
|
|
- // }, {
|
|
|
- // name: '我的收藏',
|
|
|
- // value: '4'
|
|
|
- // },
|
|
|
+ name: '默认排序',
|
|
|
+ value: '1'
|
|
|
+ }, {
|
|
|
+ name: '距离最近',
|
|
|
+ value: '2'
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // name: '最多点赞',
|
|
|
+ // value: '3'
|
|
|
+ // }, {
|
|
|
+ // name: '我的收藏',
|
|
|
+ // value: '4'
|
|
|
+ // },
|
|
|
],
|
|
|
jobs: [{
|
|
|
id: 1,
|
|
|
iname: '海鲜',
|
|
|
- checked:false
|
|
|
+ checked: false
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
iname: '自助',
|
|
|
- checked:false
|
|
|
+ checked: false
|
|
|
}, {
|
|
|
id: 3,
|
|
|
iname: '烧烤',
|
|
|
- checked:false
|
|
|
+ checked: false
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
iname: '火锅',
|
|
|
- checked:false
|
|
|
+ checked: false
|
|
|
},
|
|
|
{
|
|
|
id: 5,
|
|
|
iname: '家常菜',
|
|
|
- checked:false
|
|
|
+ checked: false
|
|
|
},
|
|
|
{
|
|
|
id: 6,
|
|
@@ -201,31 +193,38 @@
|
|
|
onShow() {
|
|
|
//判断是否有定位权限
|
|
|
this.searchVal = uni.getStorageSync("search_food_val")
|
|
|
- if(this.detailedAddress=='正在定位...'){
|
|
|
+ if (this.detailedAddress == '正在定位...') {
|
|
|
this.isdingwei()
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- leftClick(){
|
|
|
+ toShopDetail(val){
|
|
|
+ console.log(val)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pageA/food/detailMap?val="+JSON.stringify(val)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ leftClick() {
|
|
|
uni.navigateTo({
|
|
|
url: "/pageA/food/fondMap"
|
|
|
})
|
|
|
},
|
|
|
- previewImg(item){
|
|
|
+ previewImg(item) {
|
|
|
uni.previewImage({
|
|
|
- current: 0,
|
|
|
+ current: 0,
|
|
|
urls: [item.dishImage],
|
|
|
- loop:true,
|
|
|
+ loop: true,
|
|
|
})
|
|
|
},
|
|
|
- toShop(val){
|
|
|
+ toShop(val) {
|
|
|
uni.navigateTo({
|
|
|
- url: "/pageA/food/menu?val="+JSON.stringify(val)
|
|
|
+ url: "/pageA/food/menu?val=" + JSON.stringify(val)
|
|
|
})
|
|
|
},
|
|
|
- delSearchVal(){
|
|
|
+ delSearchVal() {
|
|
|
this.searchVal = ''
|
|
|
-
|
|
|
+ uni.removetorageSync("search_food_val")
|
|
|
that.mescroll.resetUpScroll()
|
|
|
},
|
|
|
isdingwei() {
|
|
@@ -254,37 +253,22 @@
|
|
|
}
|
|
|
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)
|
|
|
- }
|
|
|
- })
|
|
|
- // qqmapsdk.reverseGeocoder({
|
|
|
- // location: _obj,
|
|
|
- // success: function(res) {
|
|
|
- // console.log(res)
|
|
|
- // that.detailedAddress = res.result.formatted_addresses.recommend
|
|
|
- // that.mescroll.resetUpScroll()
|
|
|
- // },
|
|
|
- // fail: function(error) {
|
|
|
- // console.error(error);
|
|
|
- // },
|
|
|
- // complete: function(res) {
|
|
|
- // // console.log(res);
|
|
|
- // }
|
|
|
-
|
|
|
- // })
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
})
|
|
|
},
|
|
@@ -390,8 +374,8 @@
|
|
|
searchType: this.searchType,
|
|
|
searchKeyWord: this.searchVal,
|
|
|
place: this.detailedAddress,
|
|
|
- userLongitude:this.longitude,
|
|
|
- userLatitude:this.latitude,
|
|
|
+ userLongitude: this.longitude,
|
|
|
+ userLatitude: this.latitude,
|
|
|
}, failres => {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
@@ -417,12 +401,12 @@
|
|
|
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)
|
|
|
+ if (that.handleList[i].foodDishesInfoList) {
|
|
|
+ that.handleList[i].foodDishesInfoList = that.handleList[i].foodDishesInfoList.splice(0, 4)
|
|
|
}
|
|
|
}
|
|
|
that.findList = that.handleList
|
|
|
-
|
|
|
+
|
|
|
} else {
|
|
|
uni.hideLoading()
|
|
|
}
|
|
@@ -450,67 +434,70 @@
|
|
|
// color: #9199af;
|
|
|
// background: #f9d27d;
|
|
|
border-radius: 50rpx;
|
|
|
- padding: 10rpx 0 10rpx 30rpx;
|
|
|
+ padding: 15rpx 0 15rpx 30rpx;
|
|
|
box-sizing: border-box;
|
|
|
margin-right: 20rpx;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.left {
|
|
|
width: 80%;
|
|
|
|
|
|
text {
|
|
|
- height: 46rpx;
|
|
|
white-space: nowrap;
|
|
|
overflow: scroll;
|
|
|
position: relative;
|
|
|
margin-left: 20rpx;
|
|
|
- color: #9199af;
|
|
|
+ color: #BBBBBB;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
// width:14%;
|
|
|
- margin-right: 20rpx
|
|
|
+ // margin-right: 20rpx
|
|
|
+ display: flex;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.search-wrap {
|
|
|
- width: 76%;
|
|
|
+ width: 70%;
|
|
|
background: rgb(249, 249, 249);
|
|
|
// border: 1px solid #f9d27d;
|
|
|
border-radius: 50rpx;
|
|
|
+ .left{
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .search-val{
|
|
|
+ color:#BBBBBB;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.address {
|
|
|
- width: 24%;
|
|
|
- margin-right:10rpx;
|
|
|
+ width: 30%;
|
|
|
}
|
|
|
|
|
|
.findItem {
|
|
|
background: #fff;
|
|
|
- margin: 10rpx;
|
|
|
+ margin: 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 20rpx;
|
|
|
- font-size:32rpx;
|
|
|
- .detailedAddress{
|
|
|
- width: 70vw;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .row2{
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ .row2 {
|
|
|
margin: 20rpx 0;
|
|
|
}
|
|
|
- .left {
|
|
|
- margin-right: 20rpx;
|
|
|
|
|
|
- .cover {
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
+ .left {
|
|
|
+ // background: red;
|
|
|
}
|
|
|
|
|
|
.name {
|
|
|
color: #333;
|
|
|
margin-left: 10rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 36rpx;
|
|
|
}
|
|
|
|
|
|
.description {
|
|
@@ -519,19 +506,26 @@
|
|
|
}
|
|
|
|
|
|
.address {
|
|
|
- margin-top: 20rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
width: 100%;
|
|
|
color: #393733;
|
|
|
}
|
|
|
+ .img{
|
|
|
+ margin: 10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.applet-dianpu1 {
|
|
|
- color: #999999;
|
|
|
+ color: #393733;
|
|
|
+ font-size: 50rpx;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.applet-dizhi {
|
|
|
color: #393733;
|
|
|
- font-size:38rpx;
|
|
|
+ font-size: 40rpx;
|
|
|
+ position: relative;
|
|
|
+ top: -2rpx;
|
|
|
}
|
|
|
|
|
|
.group {
|
|
@@ -548,8 +542,7 @@
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
- .applet-colors-tianjia2 {
|
|
|
- }
|
|
|
+ .applet-colors-tianjia2 {}
|
|
|
|
|
|
// .text {
|
|
|
// font-size: 26rpx;
|
|
@@ -558,41 +551,42 @@
|
|
|
// opacity: 0.5;
|
|
|
// margin-right: 56rpx;
|
|
|
// }
|
|
|
- .head{
|
|
|
+ .head {
|
|
|
white-space: nowrap;
|
|
|
overflow-x: scroll;
|
|
|
padding-left: 20rpx;
|
|
|
width: calc(100vw);
|
|
|
-
|
|
|
+
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
- .item {
|
|
|
- display: inline-block;
|
|
|
- background: #e9eaec;
|
|
|
- color: #566068;
|
|
|
- padding: 10rpx 26rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: inline-block;
|
|
|
+ background: #F0F0F0;
|
|
|
+ color: #999;
|
|
|
+ padding: 10rpx 26rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.tag-type {
|
|
|
- .text{
|
|
|
+ .text {
|
|
|
border-radius: 4px;
|
|
|
- background-color: rgba(253, 242, 229, 1);
|
|
|
- color: rgba(233, 87, 0, 1);
|
|
|
+ background-color: #FDF2E5;
|
|
|
+ color: #E95700;
|
|
|
margin-right: 30rpx;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
+ padding: 10rpx 26rpx;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.list-type {
|
|
|
background: #fff;
|
|
|
width: 100vw;
|
|
|
padding-top: 5px;
|
|
|
- height: 86rpx;
|
|
|
+ height: 88rpx;
|
|
|
overflow-x: scroll;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
@@ -608,6 +602,7 @@
|
|
|
|
|
|
.typeitem.active {
|
|
|
color: #eaad1a;
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
.typeitem.active:after {
|
|
@@ -617,18 +612,35 @@
|
|
|
height: 3px;
|
|
|
bottom: 0;
|
|
|
background: #eaad1a;
|
|
|
- width: 18px;
|
|
|
+ width: 44rpx;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
-
|
|
|
- .tag-type{
|
|
|
+
|
|
|
+ .detailedAddress {
|
|
|
+ width: 70vw;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ color:#999 ;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-type {
|
|
|
background: #fff;
|
|
|
- uni-tag{
|
|
|
- margin-left:20rpx !important;
|
|
|
+
|
|
|
+ uni-tag {
|
|
|
+ margin-left: 20rpx !important;
|
|
|
}
|
|
|
}
|
|
|
- .applet-colors-ditu{
|
|
|
+
|
|
|
+ .applet-colors-ditu {
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
+ /deep/.mescroll-upwarp {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ }
|
|
|
+ .applet-xiala{
|
|
|
+ margin: 0 16rpx 0 -4px;
|
|
|
+ }
|
|
|
</style>
|