<template>
<view class="box">
<homenav :iStatusBarHeight="iStatusBarHeight" :title="'在线预约'" ></homenav>
<view class="top">
<view class="shopTop">
<swiper class="swiper" circular :autoplay="true" :interval="interval" :duration="duration"
v-if="shopInfo.imgs">
<swiper-item v-for="(item,index) in shopInfo.imgs.split(',')" v-if="item">
<view class="swiper-item">
<img mode="aspectFit" :src="item" alt="">
</view>
</swiper-item>
</swiper>
</view>
<!-- 门店详情 -->
<view class="newshopNames" v-if="shopInfo">
<view class="newshopDstop">
<view class="newshopDname">{{shopInfo.shopName}}</view>
<view v-if="data.isShowScore == 1 && data.isShowEvaluate == 1" class="appraiseBg">
<view class="appraiseBox">
<view v-if="data.isShowScore == 1 && data.shopInfo.miniV2ShopScore" class="appraise">
{{data.shopInfo.miniV2ShopScore}}
<span style='font-size: 26rpx; margin-left: 3rpx;'>分</span>
</view>
<view v-if="data.isShowScore == 1 && !data.shopInfo.miniV2ShopScore" class="appraise"
style='font-size: 26rpx;'>暂无评分</span>
</view>
<view class="line"></view>
<view @click="goShopAppraiseList()" v-if="data.isShowEvaluate == 1 && data.evaluateCount"
class="appraiseCount">评价数
{{data.evaluateCount}}
<image class="rightArrow" src="../../static/timg/icon_arrow_right.png" mode=""></image>
</view>
<view v-if="data.isShowEvaluate == 1 && !data.evaluateCount"
class="appraiseCount">暂无评价</view>
</view>
</view>
<view class="newshopDtime">
营业时间： <span>{{shopInfo.startTime}} - {{shopInfo.endTime}}</span>
</view>
<view class="newshopDbqbox" v-if="shopInfo.brands">
<view class="newshopDbqline" v-for="(item,index) in shopInfo.brands.split(',')">{{item}}</view>
</view>
</view>
<view class="newshopDadressBpx">
<view class="newshopDaleft">
<view class="newshopDaleftTop">
<!-- <img src="../../static/timg/icon_coordinate@2x.png" alt="" class="shopaddressIcon"> -->
<!-- <span class="shopDdistance" v-if="Number(shopInfo.distance)>1">距离{{shopInfo.distance}}km</span>
<span class="shopDdistance" v-else-if="Number(shopInfo.distance)">距离{{shopInfo.distance*1000}}m</span>
<span class="shopDdistance" v-else>距离--km</span> -->
</view>
<view class="" style="display: flex;">
<img src="../../static/timg/icon_coordinate@2x.png"
style="margin-top: 24rpx;margin-right: 10rpx;" class="shopaddressIcon">
<view class="newshopDadressName">
{{shopInfo.address?shopInfo.address:'--'}}
</view>
</view>
</view>
<view class="newshopDaright">
<view class="newshopDrline" @click="goLocation()">
<img src="../../static/timg/icon_map@2x.png" alt="" class="newshopDrlineimg">
<view class="newshopDrlineTxt">地图</view>
</view>
<view class="newshopDRsx"></view>
<view class="newshopDrline" @click="phones()">
<img src="../../static/timg/icon_phone@2x.png" alt="" class="newshopDrlineimg">
<view class="newshopDrlineTxt">电话</view>
</view>
</view>
</view>
</view>
</view>
<!-- 预约详情-->
<view class="yuyue-container">
<view class="yuyueLeft">
<view class="yuyueleftLine" v-for="(item,index) in leftData" @click="listItemWxInfo(item,index)"
:class="{leftActive:leftIndex==index}">{{item.Name}}</view>
</view>
<view class="yuyueRight">
<!-- <view class="yuyueRightTitle">{{rightTitle}}</view> -->
<view v-for="(item,index) in rightData" @click="checkItem(item)"
style="padding-left: 24rpx;padding-right: 24rpx;">
<view class="yrTop">
<view class="ItemName">{{item.ItemName}}</view>
<image src="../../static/timg/ickno.png" v-if="selectedItems.findIndex(i=>i.ID===item.ID)==-1"
mode="" class="yrTopImg"></image>
<image src="../../static/timg/icon_checked@2x.png"
v-if="selectedItems.findIndex(i=>i.ID===item.ID)!=-1" mode="" class="yrTopImg"></image>
</view>
<view class="itemSm">
{{item.Comment}}
</view>
<view class="Price" v-if="item.Price">
<view class="yuyue-price"> <span class="qianhaospan">￥</span> {{item.Price||'--'}} </view>
</view>
</view>
<view class="nodataBox" v-if="rightData.length==0">
<image src="http://dmsphoto.66km.com.cn/thFiles/3C95A4C5-73F8-4B34-902B-703B8A0825C9.png"
mode="widthFix" class="nodataImg"></image>
<view class="noTxt">暂无数据</view>
</view>
</view>
</view>
<view class="bottom-container newbottom-container">
<view class="newyyBox" @click="yuyueDetail">
<view class="yyBleft">
<img src="../../static/timg/icon_qingdan@2x.png" alt="" class="yyBleftimg">
</view>
<view>
<view class="totalPriceBox"><span>预估总额:</span> <span class="totalPrice"><span
class="qianhaospan">￥</span>{{totalPrice}}</span> </view>
<span class="hejishul">合计数量: {{selectedItems.length}}</span>
</view>
</view>
<view href="javascript:;" :style="{background:'#'+themeColor}" class=" newbottom-container-button"
@click="yuyue">立即预约</view>
</view>
<view class="yydetailBox" v-if="yydetailShow" @click="yydetailShow=false">
<view class="yyDetailTop" @click.stop="">
<view class="yyDetailTopleft">清单</view>
<view class="yyDetailTopRight">
<view class="yydetalqk" @click="yyqingk">清空</view>
<view class="yydetailx" @click="yydetailShow=false">X</view>
</view>
</view>
<view class="yydetailCont" @click.stop="">
<view class="yydetailContLine" v-for="(item,index) in selectedItems">
<view class="yydlineName">{{item.ItemName}}</view>
<view class="yydlineCommnt" v-if="true">{{item.Comment}}</view>
<view class="yydPrice" v-if="item.Price">￥{{item.Price||'--'}}</view>
</view>
</view>
</view>
<!-- 手机号授权 -->
<view class="authorizBox" v-if="authorizShow" @click="authorizShowno">
<view class="authorizCont" @click.stop="">
<view class="authorizName">{{wxOpenData.miniAppName}}</view>
<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
</view>
<view style="text-align: center;padding-top: 56rpx;">
<image src="../../static/timg/icon_guanbi@2x.png" @click="authorizShowno" mode="" class="authorizCloseImg"></image>
</view>
</view>
</view>
</template>
<script>
import homenav from "../../components/homenav/nav.vue"
export default {
components: {
homenav
},
data() {
return {
interval: 3000,
duration: 500,
distance: 0.05,
leftIndex: 0,
yydetailShow: false,
userInfo: '',
bizTagId: '',
leftData: '',
rightData: '',
rightTitle: '',
selectedItems: [],
location: {
lng: '',
lat: '',
},
shopInfo: '',
naShopId: '',
themeColor: '',
data: {},
iStatusBarHeight:'',
ext:'',
shareId:'',
authorizShow:false,
wxOpenData:'',
code:'',
scene:'',
naUnionId:'',
}
},
onLoad(opt) {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
//this.userInfo = uni.getStorageSync("userInfo");
this.userInfo = this.$store.state.userInfo;
this.themeColor = uni.getStorageSync("themeColor");
this.naShopId = opt.naShopId;
this.naUnionId=opt.naUnionId
if (this.naShopId == null || this.naShopId == 'null') {
this.naShopId = ''
}
console.log(this.naShopId)
//scene=8049C9CFFFEF4BE3B0893890B676F909
var that = this;
this.ext=this.$common.getExtStoreId();
if(this.userInfo){
if(opt.scene&&opt.scene!='undefined'){
this.scene=opt.scene;
this.getShareParams()
}else{
that.getInfo()
}
}else{
this.$common.automaticlogin().then(val => {
this.themeColor = uni.getStorageSync("themeColor");
this.userInfo=this.$store.state.userInfo;
this.wxOpenData=this.$store.state.wxOpenData;
if(opt.scene&&opt.scene!='undefined'){
this.scene=opt.scene;
this.getShareParams()
}else{
that.getInfo()
}
if(!this.userInfo){
uni.hideLoading();
this.authorizShow=true
}
})
}
//this.listBigTags()
},
computed: {
totalPrice() {
return this.selectedItems.reduce((i, k) => {
return Number(i) + Number(k.Price)
}, 0).toFixed(2)
}
},
methods: {
getShareParams(){
this.$http('openMall/getShareParamsCache', {
scene:this.scene,
},'GET').then(res => {
var data= JSON.parse(res.data) ;
console.log(data)
this.naShopId=data.naShopId;
this.getInfo();
})
},
authorizShowno(){
this.authorizShow=false
},
decryptPhoneNumber: function(e) {
console.log(e);
this.code=e.detail.code
this.wxPhoneLogin()
this.authorizShow=false;
},
wxPhoneLogin(){
var that=this;
this.$http('miniApp2/sys/wxPhoneLogin', {
appId:this.ext.appId,
unionId:this.ext.unionId,
code:this.code,
openId:this.wxOpenData.openid
},'POST').then(res => {
var data = res.data;
if(data.loginInfo){
this.userInfo=data.loginInfo.openUser;
this.wxOpenData=data.loginInfo;
this.$store.commit('mutationswxOpenData', data)
this.$store.commit('mutationsuserInfo', this.userInfo)
this.getInfo()
}
})
},
goShopAppraiseList() {
uni.navigateTo({
url: '../user/ShopAppraiseList?shopID=' + this.data.shopInfo.id
// url: 'ShopAppraiseList?shopID=' + this.numList.shopInfo.id
})
},
getInfo() {
uni.showLoading({
title: '加载中'
})
var that = this;
this.$http('openreservation/getInfo', {
lat: this.location.lat ? this.location.lat : '',
lng: this.location.lng ? this.location.lng : '',
shopId: this.naShopId,
}, 'GET').then(res => {
uni.hideLoading();
this.shopInfo = res.data.shopInfo;
this.data = res.data;
uni.setStorage({
key: 'yyshopInfo',
data: that.shopInfo,
success: function() {
}
});
this.listBigTags()
})
},
listBigTags() {
uni.showLoading({
title: '加载中'
});
if(this.naUnionId){
var unionId=this.naUnionId
}else{
var unionId=this.userInfo.unionId
}
//openreservation/listBigTags
this.$http('openreservation/listItemWxCategory', {
shopId: this.shopInfo.id,
unionId: unionId
}, 'GET').then(res => {
uni.hideLoading();
this.bizTagId = res.data[0].ID
this.rightTitle = res.data[0].Name
this.leftData = res.data;
this.GetlistItemWxInfo()
})
},
GetlistItemWxInfo() {
//console.log("listItemWxInfo")
uni.showLoading({
title: '加载中'
});
console.log("bizTagId" + this.bizTagId)
this.$http('openreservation/listItemWxInfo', {
shopId: this.shopInfo.id,
bizTagId: this.bizTagId
}, 'GET').then(res => {
//console.log(res)
uni.hideLoading();
// es.data.forEach(mode => {
// mode.ck=false
// })
this.rightData = res.data
console.log(this.rightData)
})
},
checkItem(item) {
item.bizTagId=this.bizTagId;
var bizTagId=this.bizTagId;
console.log(item)
let index = this.selectedItems.findIndex(i => i.ID === item.ID)
if (index !== -1) {
this.selectedItems.splice(index, 1)
} else {
this.selectedItems.push(item);
this.selectedItems = this.selectedItems.filter(function(i) {
return i.bizTagId==bizTagId
})
/* this.selectedItems.forEach(i=>{
if(i.bizTagId!=this.bizTagId){
}
}) */
}
console.log(this.selectedItems)
},
goLocation() {
var that = this;
if (!that.shopInfo.lat || !that.shopInfo.lng) {
uni.showToast({
title: '该店铺未设置定位',
icon: 'none',
duration: 3000
});
} else {
uni.openLocation({
latitude: Number(that.shopInfo.lat),
longitude: Number(that.shopInfo.lng),
name: that.shopInfo.shopName,
address: that.shopInfo.provinceName + that.shopInfo.cityName + that.shopInfo.areaName +
that.shopInfo.address,
success: function() {
console.log('success');
},
fail(err) {
console.log(err)
}
});
}
},
phones() {
uni.makePhoneCall({
phoneNumber: this.shopInfo.mobilePhone
});
},
listItemWxInfo(item, index) {
console.log(item)
this.leftIndex = index;
this.bizTagId = item.ID
if (item.ID == '') {
this.bizTagId = ''
}
this.rightTitle = item.Name;
this.GetlistItemWxInfo()
},
yuyueDetail() {
this.yydetailShow = true;
},
yyqingk() {
this.selectedItems = []
},
yuyue() {
if(this.shopInfo.shopState!=1){
uni.showToast({
title: '当前门店暂未营业',
icon: 'none',
duration: 3000
});
return false
}
if(!this.userInfo){
this.authorizShow=true
}else{
if (!this.selectedItems.length) {
uni.showToast({
title: '请选择预约项目',
icon: 'none',
duration: 3000
});
} else {
this.$store.commit('mutationsyuyueData', this.selectedItems)
uni.navigateTo({
url: 'confirmYuyue?totalPrice='+this.totalPrice
})
}
}
}
}
}
</script>
<style scoped lang="less">
.nodataBox {
text-align: center;
}
.nodataImg {
width: 400rpx;
padding-top: 100rpx;
}
.noTxt {
font-size: 32rpx;
color: #999999;
padding-top: 50rpx;
}
.box {
background: #F4F5F7;
min-height: 100vh;
}
.swiper-item img {
width: 750rpx;
height: 500rpx;
}
.swiper-item {
height: 500rpx;
}
.swiper {
height: 500rpx;
}
.shopTop {
height: 500rpx;
}
.newshopNames {
width: 750rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-top: -60rpx;
position: relative;
border-radius: 24rpx 24rpx 0px 0px;
padding-bottom: 20rpx;
}
.newshopDname {
color: #333333;
font-size: 30rpx;
padding-left: 20rpx;
padding-top: 23rpx;
font-weight: 500;
}
.newshopDtime {
color: #999999;
font-size: 24rpx;
padding-left: 20rpx;
padding-top: 10rpx;
font-weight: 400;
}
.newshopDstop {
padding-bottom: 21rpx;
border-bottom: 1px solid #EEEEEE;
}
.newshopDetailtop {
margin-bottom: 20rpx;
}
.newshopDbqbox {
display: flex;
flex-wrap: wrap;
padding-left: 20rpx;
}
.newshopDbqline {
line-height: 30rpx;
height: 30rpx;
border-radius: 4rpx;
border: 1px solid #F19D01;
color: #f19D01;
font-size: 24rpx;
padding: 0 8rpx;
margin-right: 16rpx;
margin-top: 10rpx;
}
.newshopDbqbox {
padding-top: 5rpx;
}
.shopaddressIcon {
width: 22rpx;
height: 30rpx;
}
.shopDdistance {
color: #3C3C3C;
font-size: 24rpx;
line-height: 30rpx;
padding-left: 16rpx;
font-weight: 500;
}
.newshopDaleftTop {
display: flex;
}
.newshopDadressBpx {
display: flex;
padding: 20rpx 20rpx;
background: url(http://dmsphoto.66km.com.cn/thFiles/010748B7-5678-46C3-941B-60B3CD4D10CB.png) no-repeat;
background-size: 100% 100%;
margin-left: 24rpx;
}
.newshopDadressName {
color: #999999;
padding-top: 16rpx;
font-size: 24rpx;
line-height: 36rpx;
width: 480rpx;
font-weight: 400;
}
.newshopDrlineimg {
width: 44rpx;
height: 44rpx;
}
.newshopDrlineTxt {
color: #999999;
font-size: 24rpx;
text-align: center;
padding-top: 7rpx;
font-weight: 400;
}
.newright-item .yuyue-item {
padding-top: 20rpx;
}
.newshopDRsx {
width: 2rpx;
height: 71rpx;
background: #EEEEEE;
}
.newshopDaright {
display: flex;
justify-content: space-between;
width: 150rpx;
padding-left: 20rpx;
}
.yrTopImg {
width: 36rpx;
height: 36rpx;
}
.yuyue-container {
display: flex;
padding-bottom: 120rpx;
min-height: 40vh;
}
.yuyueLeft {
background: #F5F5F5;
width: 154rpx;
}
.yuyueRight {
width: 596rpx;
background: #FFFFFF;
}
.yuyueleftLine {
font-size: 24rpx;
padding: 30rpx 24rpx;
color: #3C3C3C;
}
.leftActive {
background: #FFFFFF;
font-weight: bold;
}
.yuyueRightTitle {
color: #999999;
font-size: 26rpx;
background: #F9F9F9;
padding-left: 24rpx;
line-height: 62rpx;
}
.yrTop {
display: flex;
justify-content: space-between;
align-items: center;
}
.ItemName {
color: #3C3C3C;
font-size: 28rpx;
width: 480rpx;
font-weight: bold;
margin-top: 20rpx;
margin-bottom: 10rpx;
}
.itemSm {
color: #999999;
line-height: 33rpx;
font-size: 22rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.qianhaospan {
font-size: 22rpx;
}
.yuyue-price {
color: #FF3B30;
font-size: 32rpx;
padding-top: 8rpx;
border-bottom: 1px solid #EEEEEE;
padding-bottom: 19rpx;
}
.newbottom-container-button {
width: 203rpx;
height: 74rpx;
background: #D53533;
border-radius: 37rpx;
color: #FEFFFE;
font-size: 30rpx;
line-height: 74rpx;
text-align: center;
}
.newbottom-container {
display: flex;
justify-content: space-between;
padding-left: 32rpx !important;
width: 696rpx !important;
z-index: 66;
padding: 23rpx 32rpx !important;
height: 76rpx !important;
position: fixed;
left: 0;
bottom: 0;
background: #FFFFFF;
box-shadow: 0px -2px 10px 0px rgba(153, 153, 153, 0.1000);
}
.yuyue-main .newright-item {
padding-bottom: 19rpx;
}
.yyBleftimg {
width: 45rpx;
height: 35rpx;
margin-top: 2rpx;
}
.yyBleft {
display: flex;
align-items: center;
padding-right: 33rpx;
}
.newyyBox {
display: flex;
}
.newyyBox .totalPriceBox {
line-height: 45rpx;
color: #666666;
font-size: 24rpx;
font-weight: 500;
}
.newyyBox .totalPrice {
color: #FF0000;
font-size: 32rpx;
}
.hejishul {
color: #999999;
font-size: 24rpx;
font-weight: 400;
}
.yydetailBox {
position: fixed;
bottom: 0;
left: 0;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, 0.4);
z-index: 6;
}
.yydetailCont {
width: 100vw;
height: calc(50vh + 2rpx);
overflow-y: scroll;
background: #F0F0F0;
position: absolute;
left: 0;
bottom: 119rpx;
}
.yyDetailTop {
width: 750rpx;
height: 90rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 0px 0px;
position: absolute;
left: 0;
bottom: calc(50vh + 120rpx);
display: flex;
justify-content: space-between;
}
.yyDetailTopleft {
color: #3C3C3C;
font-size: 30rpx;
line-height: 90rpx;
padding-left: 24rpx;
font-weight: 500;
}
.yyDetailTopRight {
display: flex;
padding-right: 24rpx;
}
.yydetailx {
line-height: 90rpx;
color: #999999;
font-size: 30rpx;
}
.yydetalqk {
width: 86rpx;
height: 41rpx;
background: #F4F5F7;
border-radius: 21rpx;
text-align: center;
line-height: 41rpx;
color: #666666;
font-size: 24rpx;
margin-top: 25rpx;
margin-right: 38rpx;
}
.yydetailContLine {
width: 702rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-top: 20rpx;
margin-left: 24rpx;
padding: 24rpx 0px;
}
.yydlineName {
color: #3C3C3C;
font-size: 26rpx;
padding-left: 24rpx;
}
.yydlineCommnt {
color: #999999;
font-size: 26rpx;
padding-left: 22rpx;
line-height: 30rpx;
padding-top: 10rpx;
}
.yydPrice {
padding-left: 22rpx;
padding-top: 10rpx;
color: #FF3B30;
font-size: 32rpx;
}
.appraiseBg{
display: flex;
align-items: center;
}
.appraiseBox {
padding: 5rpx 20rpx;
padding-right: 30rpx;
margin-top: 10rpx;
height: 62rpx;
background: rgba(255, 0, 0, 0.08);
border-radius: 0 15rpx 15rpx 0;
display: flex;
align-items: center;
}
.appraise {
color: #FF0000;
font-size: 38rpx;
font-weight: bold;
}
.line {
margin: 0 20rpx;
width: 1rpx;
height: 30rpx;
background: #E9E8E8;
}
.appraiseCount {
font-size: 24rpx;
font-weight: 400;
color: #666666;
flex-grow: 1;
}
.rightArrow {
width: 7rpx;
height: 15rpx;
margin-left: 16rpx;
}
.authorizBox{
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
.authorizCont{
margin-top: 30vh;
width: 564rpx;
height: 408rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin-left: 93rpx;
position: relative;
}
.authorizCloseImg{
width: 62rpx;
height: 62rpx;
}
.sqLogoBox{
width: 180rpx;
height: 180rpx;
background: #FFFFFF;
border-radius: 90rpx;
text-align: center;
position: absolute;
top: -50rpx;
left: 192rpx;
}
.authorizName{
color: #333333;
line-height: 42rpx;
font-size: 30rpx;
text-align: center;
padding-top: 58rpx;
}
.authorizMs{
color: #999999;
line-height: 36rpx;
font-size: 26rpx;
width: 452rpx;
padding-top: 24rpx;
text-align: center;
margin-left: 56rpx;
}
.authorizContbutton{
width: 422rpx;
height: 88rpx;
background: #D53533;
border-radius: 44rpx;
line-height: 88rpx;
text-align: center;
font-size:30rpx;
color: #FFFFFF;
margin-top: 62rpx;
margin-left:71rpx;
}
</style>