Browse Source

酒店预约,添加城市搜索提示,及其他优化

DaMowang 2 years ago
parent
commit
d6c8de0f2e

+ 1 - 1
src/pages.json

@@ -114,7 +114,7 @@
 		{
 			"path": "pages/accountDetails/running",
 			"style": {
-				"navigationBarTitleText": "流水明细"
+				"navigationBarTitleText": "云宝明细"
 			}
 		},
 		{

+ 2 - 2
src/pages/cash/index.vue

@@ -5,10 +5,10 @@
                 <input type="number" :maxlength="12" v-model="inputMoney" placeholder="请输入提现金额" />
             </view>
             <view class="option flex_r flex_ac flex_jb">
-                <view class="balance flex_r flex_ac">账户余额¥{{ user_money }}</view>
+                <view class="balance flex_r flex_ac">账户{{ islocal?'余额':'云宝' }}¥{{ user_money }}</view>
                 <view class="option_text" @tap="getListPage">提现记录</view>
             </view>
-            <view class="hint">支持余额提现</view>
+            <view class="hint">支持{{ islocal?'余额':'云宝' }}提现</view>
         </view>
         <view class="upload flex_c flex_jc flex_ac">
             <block v-if="imgs == '' || imgs == undefined">

+ 1 - 1
src/pages/my/index.vue

@@ -111,7 +111,7 @@
                     </navigator>
                     <navigator class="fun_list flex_c flex_ac" url="/pages/accountDetails/running" hover-class="none">
                         <image class="fun_img" src="/static/my/fund.png"></image>
-                        <view class="fun_text">流水明细</view>
+                        <view class="fun_text">云宝明细</view>
                     </navigator>
                     <navigator class="fun_list flex_c flex_ac" url="/pages/accountDetails/withdraw" hover-class="none">
                         <image class="fun_img" src="/static/my/withdraw.png"></image>

+ 130 - 26
src/pagesB/components/h-address/address.vue

@@ -1,36 +1,60 @@
 <template>
 	<view class="t-index-address">
 		<scroll-view class="t-index-address__scroll-view" :scroll-into-view="scrollview" :scroll-y="true" :enable-flex="true">
-			<div class="city_hot">
-				<div class="hot_item" v-for="(i,s) in hotCitys" :key="s" @click="$emit('select', i)">{{ i.cityName }}</div>
+			<div class="keyw">
+				<span class="lico iconfont">&#xe661;</span>
+				<input v-model="keyword" @input="Suggestion" placeholder="城市、地址关键字" class="inp"/>
+				<div class="sugs_list" v-if="sugs.length">
+					<div class="sugs_item" v-for="(i,s) in sugs" :key="s" @click="onsug(i)">
+						<div class="tit">{{ i.title }}</div>
+						<div class="address ellipsis">{{ i.province }} - {{ i.city }}</div>
+					</div>
+				</div>
 			</div>
-			<view :id="group.initials" v-for="group in cityList" :key="group.initials">
-				<view class="t-index-address__anchor">
-					<text>{{ group.initials }}</text>
-				</view>
-				<view class="t-index-address__list">
-					<view class="t-index-address__cell" v-for="(city, index) in group.list" :key="index" @click="$emit('select', city)">
-						<text>{{ city.cityName }}</text>
+			<template v-if="!sugs.length">
+				<div class="city_hot">
+					<div class="tit_hot">热门城市</div>
+					<div class="city_box">
+						<div class="hot_item" v-for="(i,s) in hotCitys" :key="s" @click="$emit('select', i)">{{ i.cityName }}</div>
+					</div>
+				</div>
+				<view :id="group.initials" v-for="group in cityList" :key="group.initials">
+					<view class="t-index-address__anchor">
+						<text>{{ group.initials }}</text>
+					</view>
+					<view class="t-index-address__list">
+						<view class="t-index-address__cell" v-for="(city, index) in group.list" :key="index" @click="$emit('select', city)">
+							<text>{{ city.cityName }}</text>
+						</view>
 					</view>
 				</view>
-			</view>
+			</template>
 		</scroll-view>
-		<view class="t-index-address__sidebar">
-			<view class="t-index-address__index" v-for="group in cityList" :key="group.initials" @touchstart.stop.prevent="onTouchMove(group.initials)" @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
-				<span>{{ group.initials }}</span>
+		<template v-if="!sugs.length">
+			<view class="t-index-address__sidebar">
+				<view class="t-index-address__index" v-for="group in cityList" :key="group.initials" @touchstart.stop.prevent="onTouchMove(group.initials)" @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
+					<span>{{ group.initials }}</span>
+				</view>
+			</view>
+			<view class="t-index-address__alert" v-if="touchmove">
+				<text>{{ activeIndex }}</text>
 			</view>
-		</view>
-		<view class="t-index-address__alert" v-if="touchmove">
-			<text>{{ activeIndex }}</text>
-		</view>
+		</template>
 	</view>
 </template>
 <script>
+import {similar} from '@/pagesB/static/js/similar.js';
+import QQMapWX from '@/pagesB/static/js/qqmap-wx-jssdk.min.js';
+const showmap = new QQMapWX({ key: 'K7LBZ-RE23Q-JEN5D-4ZNEI-MS54Q-BHF6D' });
 import { post } from "@/request/api.js";
 
 export default {
 	data() {
 		return {
+			keyword: "",
+			sugs: [], //关键词结果,城市列表
+			sugone: {},
+
 			scrollview: "A",
 			hotCitys: [],
 			cityList: [],
@@ -67,6 +91,37 @@ export default {
 		onTouchStop() {
 			this.touchmove = false;
 		},
+		Suggestion(va){
+			let that = this;
+			if (!va.detail.value.length)  this.sugs = [];
+			showmap.getSuggestion({
+				keyword: this.keyword,
+				success(res){
+					let da = res.data
+					console.log(da);
+					that.sugs = da;
+					let s1 = similar(this.keyword,da[0].city)
+					let s2 = similar(this.keyword,da[0].district)
+					that.sugs.unshift({
+						title: s1 > s2 ? da[0].city : da[0].district,
+						province: da[0].province,
+						city: da[0].city,
+						location: da[0].location
+					})
+				}
+			})
+		},
+		onsug(va){
+			let { lat, lng } = va.location
+			let adres = { longitude: lng, latitude: lat };
+            post("local/hotel/city", adres).then(res => {
+                if (res.code == 0) {
+                    let da = res.data;
+					da.queryText = va.title;
+					this.$emit('select', da);
+                }
+            })
+		}
 	},
 	mounted() {
 		this.initCityList();
@@ -143,16 +198,65 @@ export default {
 	}
 }
 
+.keyw{
+	position: relative;
+	padding: 0 32rpx;
+	.lico{
+		position: absolute;
+		height: 32rpx;
+		line-height: 32rpx;
+		top: 13rpx;
+		left: 50rpx;
+	}
+	.inp{
+		height: 58rpx;
+		line-height: 58rpx;
+		font-size: 30rpx;
+		background-color: rgba($color: #000, $alpha: 0.05);
+		border-radius: 8rpx;
+		padding: 0 68rpx;
+	}
+	.sugs_list{
+		margin-bottom: 30rpx;
+		padding-top: 20rpx;
+		.sugs_item{
+			margin-bottom: 16rpx;
+			&:last-child{
+				margin-bottom: 0;
+			}
+		}
+		.tit{
+			font-size: 28rpx;
+			font-weight: 600;
+			.city{
+				font-size: 25rpx;
+				font-weight: 400;
+				margin-left: 16rpx;
+			}
+		}
+		.address{
+			font-size: 24rpx;
+			color: #999;
+		}
+	}
+}
+
 .city_hot {
-	padding: 28rpx 32rpx;
-	display: grid;
-	justify-content: space-between;
-	// 划分列 功能函数关键字 repeat (auto-fill,100rpx)
-	// 根据子元素的盒子的份额自动计算可以平铺几次
-	grid-template-columns: repeat(auto-fill, 100rpx);
-	// grid-gap 是 row-gap 和 column-gap 的简写形式。
-	grid-gap: 0 1px;
-	margin-bottom: -10rpx;
+	.tit_hot{
+		font-size: 30rpx;
+		padding: 16rpx 32rpx;
+	}
+	.city_box {
+		padding: 0 32rpx 28rpx;
+		display: grid;
+		justify-content: space-between;
+		// 划分列 功能函数关键字 repeat (auto-fill,100rpx)
+		// 根据子元素的盒子的份额自动计算可以平铺几次
+		grid-template-columns: repeat(auto-fill, 100rpx);
+		// grid-gap 是 row-gap 和 column-gap 的简写形式。
+		margin-bottom: -10rpx;
+		grid-gap: 0 1px;
+	}
 
 	.hot_item {
 		width: 100rpx;

+ 16 - 1
src/pagesB/hotel/hotelList.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="hotelList">
 		<scroll-view @scrolltolower="scrolltolower" class="scroll-view" :scroll-y="true" :lower-threshold="100">
-            <div class="h_List">
+            <div class="h_List" v-if="hotelList.length">
                 <div class="hotel_item flex_r flex_jb" v-for="(i,s) in hotelList" :key="s" @click="hotelById(i.hotelID)">
                     <image :src="i.mainImage" mode="aspectFill" class="h_img"/>
                     <div class="info">
@@ -18,6 +18,10 @@
                     </div>
                 </div>
             </div>
+            <div class="onlist" v-else>
+                <image class="errimg" src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/8ff923549b8ef026eeca56d23d5e4bdc3a69299epng" mode="widthFix" />
+                <div class="errmsg">没有搜索到酒店喔~</div>
+            </div>
         </scroll-view>
     </div>
 </template>
@@ -63,6 +67,17 @@ export default {
 </script>
 
 <style scoped lang='scss'>
+.onlist{
+    padding-top: 100rpx;
+    text-align: center;
+    .errimg{
+        width: 500rpx;
+    }
+    .errmsg{
+        font-size: 28rpx;
+        color: #999;
+    }
+}
 .scroll-view{
     height: 100vh;
 }

+ 31 - 13
src/pagesB/hotel/index.vue

@@ -4,12 +4,12 @@
             <div class="tabtit">酒店预约</div>
             <div class="formbar">
                 <div class="li flex_r flex_jb flex_ac">
-                    <div class="flex_r flex_ac">
+                    <div class="flex_r flex_jb flex_ac">
                         <div class="address" @click="showAddress = !showAddress">
                             <span class="address_name">{{qda.cityName}}</span>
                             <span class="iconfont ico">&#xeb6d;</span>
                         </div>
-                        <div class="addressStr ellipsis">{{ addrStr }}</div>
+                        <div class="addressStr">{{ addrStr }}</div>
                     </div>
                     <div @click="locationf" class="location">
                         <span class="iconfont ico2">&#xe61e;</span>
@@ -31,7 +31,8 @@
                     <input type="text" v-model="qda.queryText" placeholder="关键字/位置/品牌/酒店名称">
                 </div>
                 <div class="li" @click="popupShow = true">
-                    <input type="text" placeholder="价格/星级">
+                    <span v-if="priceRange.length || Leve">{{numinfo}} {{LeveStr}}</span>
+                    <input type="text" placeholder="价格/星级" v-else>
                 </div>
             </div>
         </div>
@@ -71,7 +72,7 @@
 import DatePicker from "@/pagesB/components/date-picker/date-picker.vue";
 import HAddress from "@/pagesB/components/h-address/address.vue";
 import nniSlider from "@/pagesB/components/nni-slider/slider.vue";
-import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js';
+import QQMapWX from '@/pagesB/static/js/qqmap-wx-jssdk.min.js';
 const showmap = new QQMapWX({ key: 'K7LBZ-RE23Q-JEN5D-4ZNEI-MS54Q-BHF6D' });
 import { post } from "@/request/api.js";
 import { setCache } from "@/utils/storage.js"
@@ -114,6 +115,7 @@ export default {
                 { p: [800, 1500], txt: "¥800-1500" },
                 { p: [1500, 1500], txt: "¥1500以上" },
             ],
+            LeveStr: "", 
             Leve: undefined,
             Levels: [
                 { v: 2, t: "二星/经济" },
@@ -135,8 +137,11 @@ export default {
         selectaddress(da) {
             this.qda.cityName = da.cityName;
             this.qda.cityCode = da.cityCode;
-            this.addrStr = ""
-            this.showAddress = false
+            this.qda.queryText = da.queryText || undefined;
+            this.addrStr = "";
+            delete this.qda.longitude;
+            delete this.qda.latitude;
+            this.showAddress = false;
         },
         search() {
             let qd = Object.assign({}, this.qda)
@@ -149,6 +154,7 @@ export default {
             this.adres = { longitude: lng, latitude: lat };
             this.getToCity()
         },
+        // 获取当前城市
         getToCity() {
             post("local/hotel/city", this.adres).then(res => {
                 if (res.code == 0) {
@@ -159,13 +165,13 @@ export default {
             })
         },
         locationf() {
+            delete this.qda.queryText;
             this.getLocation();
-            let that = this
+            let that = this;
             showmap.reverseGeocoder({
                 success(result) {
                     let da = result.result
-                    let { district, street, street_number } = da.address_component
-                    that.addrStr = district + street_number
+                    that.addrStr = da.formatted_addresses.recommend;
                     let { lat, lng } = da.location
                     that.qda = { ...that.qda, longitude: lng, latitude: lat }
                 }
@@ -217,11 +223,22 @@ export default {
             handler(va) {
                 this.numinfo = `¥${va[0]} - ${va[1]}`
             }
-        }
+        },
+        Leve: {
+            immediate: true,
+            deep: true,
+            handler(va) {
+                for (const i of this.Levels) {
+                    if(i.v == va){
+                        this.LeveStr = i.t
+                    }
+                }
+            }
+        },
     },
     onLoad(da) {
         this.$refs.dayPicker.getInit();
-        this.getLocation();
+        this.locationf();
     },
     onShow() {},
     mounted() {},
@@ -323,8 +340,9 @@ export default {
     }
 
     .addressStr {
-        width: 366rpx;
-        margin-left: 16rpx;
+        width: 350rpx;
+        font-size: 28rpx;
+        margin-left: 10rpx;
     }
 
     .location {

+ 0 - 0
src/utils/qqmap-wx-jssdk.min.js → src/pagesB/static/js/qqmap-wx-jssdk.min.js


+ 37 - 0
src/pagesB/static/js/similar.js

@@ -0,0 +1,37 @@
+export function similar(s, t, f) {
+    if (!s || !t) {
+        return 0
+    }
+    var l = s.length > t.length ? s.length : t.length
+    var n = s.length
+    var m = t.length
+    var d = []
+    f = f || 3
+    var min = function (a, b, c) {
+        return a < b ? (a < c ? a : c) : (b < c ? b : c)
+    }
+    var i, j, si, tj, cost
+    if (n === 0) return m
+    if (m === 0) return n
+    for (i = 0; i <= n; i++) {
+        d[i] = []
+        d[i][0] = i
+    }
+    for (j = 0; j <= m; j++) {
+        d[0][j] = j
+    }
+    for (i = 1; i <= n; i++) {
+        si = s.charAt(i - 1)
+        for (j = 1; j <= m; j++) {
+            tj = t.charAt(j - 1)
+            if (si === tj) {
+                cost = 0
+            } else {
+                cost = 1
+            }
+            d[i][j] = min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost)
+        }
+    }
+    let res = (1 - d[n][m] / l)
+    return res.toFixed(f)
+}