Skip to content

G
gxpt_wechat
Commit b2ec91e2 by zhangzhen
Options

首页满房提示

parent 4886270f
Showing with 342 additions and 21 deletions
components/storeList/popStoreList.vue 0 → 100644
<template>
<view class="store-list">
<view class="flex-col" v-for="(val,i) in list" :key="i" @tap.stop="onNavToHome(val)">
<view class="flex-row">
<view class="room-img-box">
<image :src="val.images[0]" mode="aspectFill" @tap.stop="onPreview(val)"></image>
</view>
<view class="flex-1 part-right">
<view class="part-title">
<view class='cu-tag radius sm bg-pink'>{{storeTypeEnum[val.storeType]}}</view>
<text class="text-title text-lg text-bold">【{{val.name}}】</text>
</view>
<view class="flex-between">
<view class="flex-row part-title">
<text class="cuIcon-location text-pink margin-right"></text>
<view class="flex-1">
<text class="text-gray text-sm">{{val.address}}</text>
</view>
</view>
<!-- <view class="nav-icon" @tap.stop="onNavToMap(val)">
<image :src="assetsPath+'/map_icon.png'" mode="widthFix"></image>
</view> -->
</view>
<view class="flex-between part-title">
<view class='cu-tag radius line-pink'>距离{{Number(val.distance).toFixed(2)}}km</view>
<view class="location">
<button class="cu-btn bg-pink" >去预定</button>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import config from "@/config/index.config"
import {
getDictItem
} from "@/utils/tools.js"
export default {
name: "storeList",
props: {
value: {
type: Array,
default: []
}
},
data() {
return {
assetsPath: config.assetsPath,
list: [],
storeTypeEnum:{},
};
},
watch: {
value: {
deep: true,
handler(val, oldVal) {
this.onLoading()
}
}
},
mounted() {
let dicts = JSON.parse(uni.getStorageSync('dicts'))
this.storeTypeEnum = getDictItem(dicts,"store_type");
},
methods: {
onLoading() {
this.list = this.value;
},
onNavToHome(val){
this.$emit("change",val.id)
},
onPreview(item) {
uni.previewImage({
urls: item.images,
current: 0
})
},
onNavToMap(val) {
uni.openLocation({
latitude: Number(val.latitude),
longitude: Number(val.longitude),
scale: 18,
name: val.address,
address:val.address,
success: (res) => {
console.log(res)
},
complete: (res) => {
console.log(res, 909090)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.store-list {
display: flex;
flex-direction: column;
width: 100%;
>.flex-col {
display: flex;
flex-direction: column;
width: 100%;
background: #ffffff;
box-shadow: 0 4upx 8upx rgba(0, 0, 0, 0.1);
border-radius: 12upx;
overflow: hidden;
padding: 12upx;
margin: 12upx 0;
.room-img-box {
display: flex;
width: 200upx;
height: 240upx;
border-radius: 12upx;
overflow: hidden;
margin: 0 20upx 0 0;
image {
height: 100%;
}
}
.part-right {
display: flex;
flex-direction: column;
width: 100%;
padding: 0 10upx 0 0;
.part-title {
display: flex;
flex: 1;
align-items: center;
width: 100%;
.margin-right {
margin-right: 6upx;
margin-top: 4upx;
}
.location {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.cu-btn {
padding: 12upx 20upx;
height: auto;
}
}
}
.part-tag-box {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10upx 12upx;
.part-tag {
display: flex;
flex-wrap: wrap;
width: 96%;
.cu-tag {
margin: 4upx 1%;
}
}
}
}
.part-bottom-box {
display: flex;
width: 100%;
justify-content: space-between;
height: 100upx;
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 20upx;
font-size: 32upx;
}
.nav-use {
display: flex;
align-items: flex-end;
}
}
}
}
.nav-icon{
display: flex;
justify-content: center;
align-items: center;
width: 80upx;
image{
display: block;
width: 100%;
height: auto;
}
}
</style>
\ No newline at end of file
components/storeList/storeList.vue
......@@ -13,17 +13,24 @@
<view class="flex-between">
<view class="flex-row part-title">
<text class="cuIcon-location text-pink margin-right"></text>
<view class="flex-1">
<text class="text-gray">{{val.address}}</text>
</view>
<view class="nav-icon" @tap.stop="onNavToMap(val)">
<image src="../../static/map_icon.png" mode="widthFix"></image>
</view>
<!-- <view class="nav-icon" @tap.stop="onNavToMap(val)">
<image :src="assetsPath+'/map_icon.png'" mode="widthFix"></image>
</view> -->
</view>
<view class="part-title">
<text></text>
<text class="text-pink">前有人预定</text>
</view>
<view class="flex-between part-title">
<view class='cu-tag radius line-pink'>距离{{Number(val.distance).toFixed(2)}}km</view>
<view class="location">
<button class="cu-btn bg-blue" >去预定</button>
<button class="cu-btn bg-pink" >去预定</button>
</view>
</view>
</view>
......@@ -34,6 +41,7 @@
</template>
<script>
import config from "@/config/index.config"
import {
getDictItem
} from "@/utils/tools.js"
......@@ -48,6 +56,7 @@
},
data() {
return {
assetsPath: config.assetsPath,
list: [],
storeTypeEnum:{},
};
......
pages/index/index.vue
......@@ -170,6 +170,29 @@
</view>
</view>
</uni-popup>
<uni-popup ref="popupStoreList" type="center">
<view class="flex-col pop-store-list">
<view class="flex-col content-box">
<view class="title">
<text class="text-black text-xl text-bold">温馨提示</text>
</view>
<view class="close-box text-xxl" @tap="onClose">
<text class="cuIcon-roundclosefill text-pink"></text>
</view>
</view>
<view class="tip-text">
<text class="text-title text-lg">本店当前时段所有包厢已被占用，您可以预约本店的其他时段，或者预定凑角附近的其它门店。</text>
</view>
<!-- 展示所有房间列表 -->
<view class="store-box">
<StoreList v-model="popStoreList" @change="onStoreChage"></StoreList>
</view>
</view>
</uni-popup>
<LoginPop ref="loginPop" />
<f-tabbar></f-tabbar>
</view>
......@@ -195,9 +218,10 @@
getDictItem
} from "@/utils/tools.js"
import moment from '@/common/moment';
import StoreList from "@/components/storeList/popStoreList"
export default {
components: {
StoreList,
fTabbar,
fNavbar,
ToolBox,
......@@ -205,6 +229,7 @@
},
data() {
return {
popStoreList: [],
scrollTop: 0,
storeId: '',
storeList: [],
......@@ -263,16 +288,14 @@
roomVoList: [],
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
objListDate: [],
timer2: null
timer2: null,
timerLocation:null
}
},
onShow() {
if(uni.getStorageSync("storeId")){
uni.removeStorageSync('storeId')
}
this.onGetSysConfig();
this.list = [];
this.onSetShowPoint()
this.onGetListStore();
},
onReachBottom() {
if (this.status == 'loadmore') {
......@@ -285,11 +308,28 @@
},
onLoad(option) {
this.onGetDicts();
this.onSetShowPoint();
// 隐藏原生的tabbar
uni.hideTabBar();
this.$refs.loginPop.open();
if(this.timerLocation){
clearInterval(this.timerLocation)
this.timerLocation = null;
}
this.timerLocation = setInterval(()=>{
uni.removeStorageSync("storeId")
this.onLoading();
},2*60*1000)
},
methods: {
onStoreChage(id){
uni.setStorageSync("storeId", id);
this.onClose();
setTimeout(()=>{
this.onGetListStore();
},200)
},
onSetShowPoint() {
let h = new Date().getHours();
let list = []
......@@ -334,19 +374,11 @@
uni.showLoading({
title: '加载中'
})
if (this.timer2) {
clearTimeout(this.timer2);
this.timer2 = null;
}
if (uni.getStorageSync("latitude") && uni.getStorageSync("longitude")) {
this.latitude = uni.getStorageSync("latitude");
this.longitude = uni.getStorageSync("longitude");
this.onGetListStore()
}
uni.getLocation({
type: "gcj02",
complete: (res) => {
......@@ -356,9 +388,9 @@
uni.setStorageSync("latitude", res.latitude)
uni.setStorageSync("longitude", res.longitude)
this.timer2 = setTimeout(() => {
setTimeout(() => {
this.onGetListStore()
}, 5000)
}, 10)
} else {
this.$refs.popup.open()
......@@ -377,7 +409,8 @@
if (res.data.code == 200 && res.data.data.length) {
let obj = {}
if (uni.getStorageSync("storeId")) {
obj = res.data.data.find(item => item.id === uni.getStorageSync("storeId"))
obj = res.data.data.find(item => item.id === uni.getStorageSync("storeId"));
// uni.removeStorageSync('storeId')
} else {
obj = res.data.data[0];
uni.setStorageSync("storeId", obj.id);
......@@ -387,6 +420,14 @@
distance: obj.distance ? Number(obj.distance.substr(0, 8)).toFixed(2) : 0
}
that.onGetRoomList(obj.id)
this.popStoreList = res.data.data.map(item => {
return {
...item,
images: item.images ? item.images.split(",").map(val => this.hostUrl +
val) : []
}
}).filter(item => item.id != obj.id)
}
})
},
......@@ -396,9 +437,23 @@
storeId
}).then(res => {
if (res.data.code == 200 && res.data.data.length) {
that.roomVoList = res.data.data.map(item => {
let list = res.data.data.map(item => {
let sortNum = 1;
if(item.roomStat ===3){
sortNum = 5
} else if(item.recordsStatus === 0){
sortNum = 4
} else if(item.recordsStatus === 1){
sortNum = 3
} else if(item.status ===1){
sortNum = 2
}else if(item.status ===0){
sortNum = 1
}
return {
...item,
sortNum,
recordsTime: item.recordsTime? moment(item.recordsTime).format("HH:mm") : "",
facilities: item.facilities ? item.facilities.split(",") : [],
images: item.images ? item.images.split(",").map(val => this.hostUrl +
......@@ -412,6 +467,16 @@
})
}
})
list.sort((a,b)=>a.sortNum-b.sortNum);
that.roomVoList = list;
let l = that.roomVoList.filter(item=>item.sortNum === 1)
console.log(l.length,99999)
if(l.length<=0){
that.$refs.popupStoreList.open();
}
} else {
that.roomVoList = []
}
......@@ -529,6 +594,7 @@
},
onClose() {
this.$refs.popup.close()
this.$refs.popupStoreList.close()
},
onNavToSet() {
uni.openSetting({
......@@ -1222,4 +1288,38 @@
font-size: 20upx;
}
}
.pop-store-list{
display: flex;
flex-direction: column;
width: 90vw;
height: 68vh;
background-color: #ffffff;
border-radius: 20upx;
box-shadow: 0 6upx 16upx rgba(255, 0, 255, 0.34);
padding-bottom: 20upx;
overflow: hidden;
.content-box{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 10%;
.close-box{
position: absolute;
top: 30upx;
right: 30upx;
}
}
.tip-text{
width: 90%;
margin: 0 auto 10px;
}
.store-box{
display: flex;
flex: 1;
width: 100%;
overflow-y: auto;
padding: 0 2%;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment