<template> <view class="page"> <u-navbar :is-back="false" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36' height='8'></u-navbar> <image src="https://api.ccttiot.com/smartmeter/img/static/uS8TEdeETwvOdHDswc9c" mode="" class="imgbj"></image> <view class="title" @click="btnshanghu"> 商户中心 </view> <view class="serchshop"> <view class="dingwei" @click="btnweizhi"> <image src="https://api.ccttiot.com/smartmeter/img/static/uSDeC51wazjnZ9cFQx6l" mode="" class="dwimg"></image> {{tit}} <image src="https://api.ccttiot.com/smartmeter/img/static/u0FZH7ZLG168c7W0FUMk" mode="" class="xlimg"></image> </view> <view class="search"> <input type="text" v-model="sousuovalue" @confirm="confirm" placeholder="搜索门店"/> <u-icon name="search"></u-icon> </view> </view> <view class="shoplist" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchCancel"> <view class="shop_item" v-for="(item,index) in listshop" :key="index" @click="btndetail(item.storeId)"> <view class="lt"> <image :src="item.picture" mode=""></image> <view class="hour"> {{item.minimumTime == undefined ? '--' : item.minimumTime}}小时起订 </view> </view> <view class="rt"> <view class="name"> {{item.name == undefined ? '--' : item.name}} </view> <view class="dizhi"> {{item.address == undefined ? '--' : item.address}} </view> <view class="juli"> <view class="kmjuli"> 距我{{item.distance == undefined ? '--' : item.distance}}km </view> <view class="juliimg"> <image @click.stop="btndaohang(item.lng,item.lat,item.name,item.address)" src="https://api.ccttiot.com/smartmeter/img/static/ufhdTzq4mHUlHgCKgI5Y" mode=""></image> <image @click.stop="btntel(item.serverPhone)" src="https://api.ccttiot.com/smartmeter/img/static/uOxtHZOxGREoFVXEv73f" mode=""></image> </view> </view> <view class="yuding"> <image src="https://api.ccttiot.com/smartmeter/img/static/u7zHXOY1SGwic7jQESUR" mode="" class="one"></image> 预定包间 <image src="https://api.ccttiot.com/smartmeter/img/static/urIGUWi7cHWqp9qem3Ag" mode="" class="two"></image> </view> </view> </view> <view class="" style="width: 100%;text-align: center;margin-top: 100rpx;font-size: 34rpx;color: #ccc;"> 没有更多门店啦,敬请期待吧... </view> </view> <view class="jiameng" @click="btnjiameng"> <image src="https://api.ccttiot.com/smartmeter/img/static/usIK790XacHJ1pXUbbfW" mode=""></image> </view> <view class="xuanfu" v-if="imgflag"> <image @click="btnopen(1)" src="https://api.ccttiot.com/smartmeter/img/static/uKeCHdot1z4QJldDe3UL" mode=""></image> <image @click="btnopen(2)" src="https://api.ccttiot.com/smartmeter/img/static/u4lmGbm77OWC2Uik2737" mode=""></image> <image @click="btnopen(3)" src="https://api.ccttiot.com/smartmeter/img/static/uUjamKC7Kvd9KMLLOeBD" mode=""></image> <image @click="btnopen(4)" src="https://api.ccttiot.com/smartmeter/img/static/u9ccoP5o6Gt6rCKwsXva" mode=""></image> </view> <view class="xuanfus" v-else> <image @click="btnopen(1)" src="https://api.ccttiot.com/smartmeter/img/static/uKeCHdot1z4QJldDe3UL" mode=""></image> <image @click="btnopen(2)" src="https://api.ccttiot.com/smartmeter/img/static/u4lmGbm77OWC2Uik2737" mode=""></image> <image @click="btnopen(3)" src="https://api.ccttiot.com/smartmeter/img/static/uUjamKC7Kvd9KMLLOeBD" mode=""></image> <image @click="btnopen(4)" src="https://api.ccttiot.com/smartmeter/img/static/u9ccoP5o6Gt6rCKwsXva" mode=""></image> </view> <view class="karaokeroom" v-if="jinxinflag"> <view class="top"> 正在进行中的订单 </view> <view class="roomlist"> <view class="room_item" v-for="(item,index) in jinxinglist" :key="index" :id="mdindex == index ? 'active' : ''" @click="btnmd(index)"> <view class="lt"> <image :src="item.picture" mode=""></image> </view> <view class="rt" style="font-size: 22rpx;"> <view class=""> <text>预约门店:</text> <text>{{item.storeName == null ? '--' : item.storeName}}</text> </view> <view class=""> <text>预约包厢:</text> <text>{{item.roomName == null ? '--' : item.roomName}}</text> </view> <view class=""> <text>开始时间:</text> <text>{{item.reserveStartTime == null ? '--' : item.reserveStartTime}}</text> </view> <view class=""> <text>结束时间:</text> <text>{{item.reserveEndTime == null ? '--' : item.reserveEndTime}}</text> </view> </view> </view> </view> <view class="anniu" @click="btnanniu"> {{jinxintxt}} </view> </view> <image v-if="jinxinflag" @click="jinxinflag = false" class="jinxinx" src="https://api.ccttiot.com/smartmeter/img/static/uH5fAInJQYhf3wlXkuYI" mode=""></image> <view class="mask" v-if="jinxinflag"></view> </view> </template> <script> export default { data() { return { jinxintxt:'开包厢', imgflag:true, longitude:'', latitude:'', tit:'', listshop:[], cityid:'', pagesum:1, pagesize:10, touchStartX: 0, // 触屏起始点x touchStartY: 0, // 触屏起始点y xiaflag:true, total:'', qingqiuflag:true, jinxinglist:[], mdindex:-1, jinxinflag:false, sousuovalue:'' } }, onLoad(option) { if(option.cityId){ this.cityid = option.cityId this.tit = option.cityName this.longitude = '' this.latitude = '' this.getweizhi() }else{ this.getweizhi() } this.getinfo() this.getorder() }, methods: { // 点击跳转到商户中心 btnshanghu(){ uni.navigateTo({ url:'/page_shanghu/index' }) }, // 点击选择开包厢 btnmd(index){ this.mdindex = index }, // 请求正在进行中的订单 getorder(){ this.$u.get(`/app/order/getInProgressOrderList`).then(res =>{ if(res.code == 200){ this.jinxinglist = res.data } }) }, // 点击进行导航 btndaohang(lng,lat,name,addres){ uni.openLocation({ latitude:lat,//纬度-目的地/坐标点 longitude:lng,//经度-目的地/坐标点 name:name,//地点名称 address:addres//详细地点名称 }) }, // 点击拨打电话 btntel(serverPhone){ uni.makePhoneCall({ phoneNumber: serverPhone, success: function(res) { console.log('拨打电话成功', res) }, fail: function(err) { console.error('拨打电话失败', err) uni.showToast({ title: '取消拨打电话', icon: 'none' }) } }) }, // 选择订单后进行操作 btnanniu(){ if(this.jinxintxt == '开店门'){ let storeId = this.jinxinglist[this.mdindex].storeId console.log(this.jinxinglist[this.mdindex],this.mdindex); this.$u.get(`app/store/openGate/${storeId}`).then(res => { if(res.code == 200){ this.jinxinflag = false uni.showToast({ title: '开启店门成功', icon: 'success', duration: 2000 }) }else{ uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }) }else if(this.jinxintxt == '开包厢'){ let roomId = this.jinxinglist[this.mdindex].roomId this.$u.get(`app/room/openRoomGate/${roomId}`).then(res => { if(res.code == 200){ this.jinxinflag = false uni.showToast({ title: '开启包厢门成功', icon: 'success', duration: 2000 }) }else{ uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }) }else if(this.jinxintxt == '去续单'){ this.jinxinflag = false let roomId = this.jinxinglist[this.mdindex].roomId let orderNo = this.jinxinglist[this.mdindex].orderNo uni.navigateTo({ url:'/page_user/xudan?roomId=' + roomId + '&orderNo=' + orderNo }) } }, // 点击进行开店门开包厢等操作 btnopen(num){ if(num == 1){ if(this.jinxinglist.length > 1){ this.jinxinflag = true this.jinxintxt = '开店门' }else if(this.jinxinglist.length == 1){ let storeId = this.jinxinglist[0].storeId this.$u.get(`app/store/openGate/${storeId}`).then(res => { if(res.code == 200){ uni.showToast({ title: '开启店门成功', icon: 'success', duration: 2000 }) }else{ uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }) }else{ uni.showToast({ title: '您当前没有订单', icon: 'none', duration: 2000 }) } }else if(num == 2){ if(this.jinxinglist.length > 1){ this.jinxinflag = true this.jinxintxt = '开包厢' }else if(this.jinxinglist.length == 1){ let roomId = this.jinxinglist[0].roomId this.$u.get(`app/room/openRoomGate/${roomId}`).then(res => { if(res.code == 200){ uni.showToast({ title: '开启包厢门成功', icon: 'success', duration: 2000 }) }else{ uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }) }else{ uni.showToast({ title: '您当前没有订单', icon: 'none', duration: 2000 }) } }else if(num == 3){ if(this.jinxinglist.length > 1){ this.jinxinflag = true this.jinxintxt = '去续单' }else if(this.jinxinglist.length == 1){ let roomId = this.jinxinglist[0].roomId let orderNo = this.jinxinglist[0].orderNo uni.navigateTo({ url:'/page_user/xudan?roomId=' + roomId + '&orderNo=' + orderNo }) }else{ uni.showToast({ title: '您当前没有订单', icon: 'none', duration: 2000 }) } }else if(num == 4){ uni.scanCode({ onlyFromCamera: true, scanType: ['qrCode'], success: res => { console.log(res); }, fail: err => { console.error('扫描失败:', err) uni.showToast({ title: '扫描失败', icon: 'none' }) } }) } }, // 点击输入框确定执行搜索 confirm(){ this.getshop() }, // 根据定位来获取门店 getshop(){ let data = { phoneLon:this.longitude, phoneLat:this.latitude, cityId:this.cityid, keyword:this.sousuovalue } this.$u.post(`/app/getStoreListByLocation?pageNum=${this.pagesum}&pageSize=${this.pagesize}`,data).then(res => { if(res.code == 200){ this.xiaflag = true this.total = res.total if (this.pagesum > 1) { this.pagesum++ this.listshop = this.listshop.concat(res.rows) this.qingqiuflag = true } else { this.pagesum++ this.listshop = res.rows this.qingqiuflag = true } console.log(this.listshop); } }) }, // 获取用户详情 getinfo(){ this.$u.get(`/getAppInfo`).then(res => { if(res.code == 200){ uni.setStorageSync('user', res.data) }else if(res.code == 401){ this.jingmo() } }) }, // 静默登录 jingmo(){ let that = this wx.login({ success(res) { if (res.code) { console.log('登录!', res) let data = { jsCode: res.code, } that.$u.post(`/loginByopenid?jsCode=${res.code}`,data).then(res=>{ if (res.code == 200) { console.log("老用户登录",res) wx.setStorageSync('token', res.token) } }) } }, }) }, // 获取自身当前经纬度 getweizhi(){ uni.getLocation({ type: 'wgs84', success: res => { this.longitude = res.longitude this.latitude = res.latitude this.getshop() this.$u.get(`app/getCity?lon=${this.longitude}&lat=${this.latitude}`).then(res => { if(res.code == 200){ if(this.cityid == ''){ this.tit = res.data.cityName } } }) }, fail: err => { // 获取失败,err为错误信息 console.log('getLocation err:', err); } }) }, // 按下滑动 onTouchStart(e) { this.imgflag = false this.touchStartX = e.touches[0].clientX; this.touchStartY = e.touches[0].clientY; }, // 松开滑动 onTouchEnd(e) { this.imgflag = true let deltaX = e.changedTouches[0].clientX - this.touchStartX; let deltaY = e.changedTouches[0].clientY - this.touchStartY; if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) { if (deltaX >= 0) { // console.log("左滑") } else { // console.log("右滑") } } else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) { if (deltaY < 100) { if(this.qingqiuflag == true){ let sum = (this.pagesum - 1) * this.pagesize console.log(sum,this.total); if (this.total > sum) { this.qingqiuflag = false this.getshop() } } } else { console.log("下滑") } } }, // 滑动取消 onTouchCancel() { this.imgflag = true }, // 点击跳转门店详情页 btndetail(storeId){ console.log(storeId); uni.reLaunch({ url:'/pages/index/index?storeId=' + storeId }) }, // 点击跳转到加盟合作页 btnjiameng(){ uni.navigateTo({ url:'/page_user/zhaoshang' }) }, // 点击选择定位位置 btnweizhi(){ uni.navigateTo({ url:'/page_user/city' }) } } } </script> <style lang="scss"> page { background: #fff; border-radius: 0rpx 0rpx 0rpx 0rpx; } #active{ border: 1px solid #226914 !important; background-color: #226914 !important; color: #fff !important; } .jinxinx{ width: 60rpx; height: 60rpx; position: fixed; top: 1216rpx; left: 50%; transform: translateX(-50%); z-index: 2; } .karaokeroom{ position: fixed; top: 332rpx; left: 50%; transform: translateX(-50%); z-index: 2; width: 674rpx; height: 828rpx; background: linear-gradient( 180deg, #DEF1DA 0%, #FFFFFF 100%, #FFFFFF 100%); border-radius: 36rpx 36rpx 36rpx 36rpx; .top{ font-weight: 600; font-size: 44rpx; color: #48893B; width: 100%; text-align: center; margin-top: 52rpx; margin-bottom: 44rpx; } .anniu{ width: 584rpx; height: 86rpx; background: #48893B; border-radius: 43rpx 43rpx 43rpx 43rpx; font-size: 36rpx; color: #FFFFFF; text-align: center; line-height: 86rpx; margin: auto; position: fixed; left: 50%; transform: translateX(-50%); bottom: 72rpx; } .roomlist{ height: 480rpx; overflow: scroll; .room_item{ width: 584rpx; height: 224rpx; border: 2rpx solid #969696; background-color: #fff; border-radius: 20rpx; margin: auto; display: flex; align-items: center; padding: 34rpx; box-sizing: border-box; margin-top: 26rpx; .lt{ image{ width: 154rpx; height: 154rpx; margin-right: 22rpx; } } } } } .mask{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-color: #000; opacity: .2; } .page { width: 750rpx; .xuanfu{ position: fixed; top: 38%; right: 30rpx; animation: fadeInDowns .5s ease-out forwards; image{ width: 90rpx; height: 90rpx; display: block; margin-bottom: 44rpx; } } @keyframes fadeInDowns { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } .xuanfus{ position: fixed; top: 34%; right: -80rpx; animation: fadeInDown .5s ease-out forwards; image{ width: 90rpx; height: 90rpx; display: block; margin-top: 44rpx; } } .jiameng{ width: 100%; text-align: center; background-color: #fff; margin: auto; position: fixed; bottom: 0; left: 0; image{ width: 710rpx; height: 196rpx; } } .shoplist{ width: 750rpx; height: 1250rpx; background: #FFFFFF; margin-top: 28rpx; border-radius: 30rpx 30rpx 0 0; padding: 48rpx; padding-top: 0 !important; box-sizing: border-box; overflow: scroll; padding-bottom: 240rpx !important; box-sizing: border-box; .shop_item{ display: flex; margin-top: 40rpx; box-sizing: border-box; width: 674rpx; height: 350rpx; background: #FFFFFF; padding: 20rpx 18rpx; box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15); border-radius: 18rpx 18rpx 18rpx 18rpx; .rt{ .yuding{ display: flex; align-items: center; font-size: 24rpx; color: #48893B; margin-top: 26rpx; margin-left: 248rpx; .one{ width: 32rpx; height: 32rpx; margin-right: 10rpx; } .two{ width: 14rpx; height: 36rpx; margin-left: 10rpx; } } .juli{ display: flex; justify-content: space-between; margin-top: 56rpx; align-items: center; .kmjuli{ width: 210rpx; height: 40rpx; border-radius: 4rpx 4rpx 4rpx 4rpx; border: 2rpx solid #48893B; text-align: center; line-height: 36rpx; font-size: 26rpx; color: #48893B; } .juliimg{ image{ width: 60rpx; height: 60rpx; margin-left: 26rpx; } } } .dizhi{ font-size: 26rpx; color: #7C7C7C; margin-top: 16rpx; } .name{ font-weight: 600; font-size: 36rpx; color: #3D3D3D; } } .lt{ margin-right: 38rpx; image{ width: 186rpx; height: 236rpx; border-radius: 10rpx; } .hour{ font-size: 32rpx; color: #48893B; margin-top: 32rpx; } } } } .serchshop{ display: flex; margin-top: 40rpx; align-items: center; justify-content: space-between; padding-left: 34rpx; padding-right: 34rpx; box-sizing: border-box; .search{ width: 468rpx; height: 72rpx; line-height: 72rpx; background: #FFFFFF; border-radius: 6rpx 6rpx 6rpx 6rpx; position: relative; input{ margin-left: 94rpx; height: 72rpx; line-height: 72rpx; } /deep/ .uicon-search{ position: absolute; top: 24rpx !important; left: 26rpx !important; } } .dingwei{ display: flex; font-weight: 600; font-size: 32rpx; color: #48893B; align-items: center; .dwimg{ width: 40rpx; height: 40rpx; margin-right: 12rpx; } .xlimg{ width: 26rpx; height: 14rpx; margin-left: 12rpx; } } } .title { font-weight: 600; font-size: 36rpx; color: #226914; line-height: 50rpx; padding-left: 34rpx; box-sizing: border-box; } .imgbj{ width: 750rpx; height: 610rpx; position: fixed; top: 0; left: 0; z-index: -1; } } </style>