<template>
<view class="box">
<view class="top">
<view class="shopTop">
<swiper class="swiper" circular :autoplay="false" :interval="interval"
:duration="duration" v-if="shopInfo.imgs">
<swiper-item v-for="(item,index) in shopInfo.imgs.split(',')">
<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 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="newshopDadressName">{{shopInfo.address?shopInfo.address:'--'}}</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-top: 10rpx;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">
<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:;" 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">￥{{item.Price}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
interval:2000,
distance:0.05,
leftIndex:0,
yydetailShow:false,
userInfo:'',
bizTagId:'',
leftData:'',
rightData:'',
rightTitle:'',
selectedItems: [],
location: {
lng: '',
lat: '',
},
shopInfo:'',
naShopId:'',
}
},
onLoad(opt) {
this.userInfo = uni.getStorageSync("userInfo");
this.naShopId=opt.naShopId;
if(this.naShopId == null ||this.naShopId == 'null' ){
this.naShopId=''
}
console.log(this.naShopId)
var that = this;
that.getInfo()
//this.listBigTags()
},
computed: {
totalPrice () {
return this.selectedItems.reduce((i, k) => {
return Number(i) + Number(k.Price)
}, 0).toFixed(2)
}
},
methods: {
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 => {
this.shopInfo = res.data.shopInfo;
uni.setStorage({
key: 'yyshopInfo',
data:that.shopInfo,
success: function () {
}
});
this.listBigTags()
})
},
listBigTags(){
uni.showLoading({
title: '加载中'
});
this.$http('openreservation/listBigTags', {
shopId:this.shopInfo.id,
unionId:this.userInfo.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) {
let index = this.selectedItems.findIndex(i => i.ID === item.ID)
if (index !== -1) {
this.selectedItems.splice(index, 1)
} else {
this.selectedItems.push(item)
}
},
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.contactorPhone
});
},
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.selectedItems.length) {
uni.showToast({
title: '请选择预约项目',
icon: 'none',
duration: 3000
});
} else {
this.$store.commit('mutationsyuyueData', this.selectedItems)
uni.navigateTo({
url:'confirmYuyue'
})
}
}
}
}
</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;
}
.newshopNames{
width: 702rpx;
margin-left: 24rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-top: -60rpx;
position: relative;
}
.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: 30rpx 20rpx;
background: url(http://dmsphoto.66km.com.cn/thFiles/010748B7-5678-46C3-941B-60B3CD4D10CB.png) no-repeat;
background-size: 100% 100%;
}
.newshopDadressName{
color: #999999;padding-top: 16rpx;
font-size: 24rpx;line-height: 24rpx;
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;
margin-top: 20rpx;
padding-bottom: 120rpx;
min-height: 40vh;
}
.yuyueLeft{
background: #F5F5F5;
width: 154rpx;
}
.yuyueRight{
width: 596rpx;
background: #FFFFFF;
}
.yuyueleftLine{
font-size: 26rpx;
padding:30rpx 24rpx;
color: #3C3C3C;
font-weight: 400;
}
.leftActive{
background: #FFFFFF;
font-weight: 500;
}
.yuyueRightTitle{
color: #999999;font-size: 26rpx;
background: #F9F9F9;
padding-left: 24rpx;
line-height: 62rpx;
}
.yrTop{
display: flex;
justify-content: space-between;
}
.ItemName{
color: #3C3C3C;
font-size: 28rpx;
width: 480rpx;
}
.itemSm{
color: #999999;
line-height: 33rpx;
font-size: 24rpx;
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;
}
</style>