<template>
<view class="box">
<!-- <view class="yuyuCheckTis" :style="{background:'#'+themeColor}">
温馨提示：该报价仅为参考价格，实际以门店为准（不同品牌和车型费用不同）
</view> -->
<view class="cont">
<view class="contkk">
<view class="kkline">
<view class="kklineLeft">
<span class="stars">*</span> <span>预约门店</span>
</view>
<view class="kklineRight">{{yyshopInfo.shopName}}</view>
</view>
<!-- <view class="kkline">
<view class="kklineLeft">
<span class="stars">*</span> <span>预约车辆</span>
</view>
<view class="kklineRight" @click="goCarlist">
<span>{{carInfo.plateNumber?carInfo.plateNumber:'请选择'}}</span>
<img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
</view>
</view> -->
<view class="kkline ">
<view class="kklineLeft">
<span class="stars">*</span> <span>预约时间</span>
</view>
<view class="kklineRight" @click="cktime">
<span>{{billDate?billDate:'请选择'}}</span>
<img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
</view>
</view>
<view class=" lineborderNo" >
<view class="bzline">
<view class="beiz"><span class="stars">*</span>手机号</view>
<input type="number" v-model="mobilePhone" placeholder="请输入手机号" class="beizInput" placeholder-style="color:#cccccc;">
</view>
</view>
</view>
<view class="contkk" style="margin-top: 20rpx;">
<view class="kkline2">
<view class="kklineLeft1">预约项目</view>
<view class="kklineRight1">(以实际门店价格为准)</view>
</view>
<view class="kkline2" v-for="(item,index) in yuyueData">
<view class="kklineLeft3">{{item.ItemName}}</view>
<view class="kklineRight3" v-if="item.Price">￥{{item.Price}}</view>
</view>
</view>
<view class="contkk" style="margin-top: 20rpx;">
<view class="bzline">
<view class="beiz">备注</view>
<input type="text" v-model="comment" placeholder="请输入备注（选填）" class="beizInput" placeholder-style="color:#cccccc;">
</view>
</view>
</view>
<view style="height: 120rpx;"></view>
<view class="bottom-container">
<view>
<view class="bottom-container-price"><span class="qianhaospan" v-if="totalPrice" >￥</span> {{totalPrice}} <span></span></view>
<view class="ckj">参考价格（到店支付）</view>
</view>
<view class="newyyBotbutton" :style="{background:'#'+themeColor}" @click="yuyue">立即预约</view>
</view>
<timeSelect ref="timeSelect" :stationID="stationID" :timedata="timedata" :themeColor="themeColor" @changeTime="changeTime"></timeSelect>
</view>
</template>
<script>
import timeSelect from '@/components/timeSelect/timeSelect.vue'
export default {
components: {
timeSelect
},
data() {
return {
comment:'',
totalPrice:'',
userInfo:'',
timedata:'',
billDate:'',
yuyueData:'',
carInfo:'',
yyshopInfo:'',
themeColor:'',
isgo:true,
stationID:'',
mobilePhone:'',
ext:'',
}
},
onLoad(opt) {
this.themeColor = uni.getStorageSync("themeColor");
console.log(this.$store.state.yuyueData)
this.yuyueData=this.$store.state.yuyueData;
this.stationID=this.yuyueData[0].StationID
this.totalPrice=opt.totalPrice
//this.carInfo=this.$store.state.carInfo
//this.userInfo = uni.getStorageSync("userInfo");
this.userInfo = this.$store.state.userInfo;
this.yyshopInfo=uni.getStorageSync("yyshopInfo")
this.ext=this.$common.getExtStoreId();
//this.getOrderTimes()
if(this.userInfo){
console.log(this.userInfo)
//var customerInfo=uni.getStorageSync("wxOpenData").loginInfo.customerInfo;
this.mobilePhone=this.userInfo.mobilePhone;
}
},
onShow() {
this.carInfo=this.$store.state.carInfo;
console.log(this.carInfo)
},
methods: {
goCarlist(){
uni.navigateTo({
url:'../user/addCar/cailist'
})
},
yuyue(){
/* if(!this.carInfo){
uni.showToast({
title: '请选择车辆',
icon: 'none',
duration: 3000
});
return false;
}
if(!this.carInfo.id){
uni.showToast({
title: '请选择车辆',
icon: 'none',
duration: 3000
});
return false;
} */
var reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
if(reg.test(this.mobilePhone) == false ){
console.log("手机号码格式不正确");
uni.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 3000
});
return false;
}
if(!this.billDate){
uni.showToast({
title: '请选择预约时间',
icon: 'none',
duration: 3000
});
return false;
}
if(!this.mobilePhone){
uni.showToast({
title: '请填写手机号',
icon: 'none',
duration: 3000
});
return false;
}
if(!this.isgo){
return false
}
this.isgo=false;
this.$http('openreservation/saveOrderSheet', {
billDate: this.billDate,
comment: this.comment,
// carID: this.carInfo?.id || '',
carID: '',
orderItem: this.yuyueData.map(item => item.ID).join(),
shopId: this.yyshopInfo.id,
unionId: this.ext.unionId,
stationID:this.stationID,
mobilePhone:this.mobilePhone
},'POST').then(res => {
this.isgo=true;
var id=res.data
if(res.code==0){
if(this.userInfo){
uni.showModal({
title: '提示',
content: '预约订单提交成功',
confirmText:'返回首页',
cancelText:'查看订单',
success: function (res) {
if (res.confirm) {
// console.log('用户点击确定');
uni.switchTab({
url:'index'
})
} else if (res.cancel) {
// console.log('用户点击取消');
// uni.reLaunch({
// url:'../user/bespeakDetail?id='+id
// })
uni.redirectTo({
url:'../user/bespeakDetail?id='+id
})
}
}
});
}else{
uni.showModal({
title: '提示',
content: '预约订单提交成功',
confirmText:'返回首页',
showCancel:false,
success: function (res) {
if (res.confirm) {
// console.log('用户点击确定');
uni.switchTab({
url:'index'
})
}
}
});
}
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 3000
});
}
})
},
changeTime(data){
console.log(data)
this.billDate=data
},
cktime(){
this.$refs.timeSelect.open();
},
}
}
</script>
<style scoped lang="less">
.box{
background: #F4F5F7;
min-height: 100vh;
}
.yuyuCheckTis{
color: #C8841C;
line-height: 37rpx;
font-size: 28rpx;
background: #FFF7EB;
padding: 18rpx 24rpx;
font-weight: 400;
}
.cont{
padding: 24rpx;
}
.contkk{
background: #ffffff;
border-radius: 10rpx;
padding: 0 20rpx;
}
.kkline{
display: flex;
padding: 30rpx 0;
border-bottom: 1px solid #EEEEEE;
color: #666666;
font-size: 28rpx;
}
.kkline2{
display: flex;
justify-content: space-between;
padding: 30rpx 0;
border-bottom: 1px solid #EEEEEE;
color: #666666;
font-size: 28rpx;
}
.stars{
color: #FF2400;
}
.kklineRight{
color: #3c3c3c;
font-size: 28rpx;
display: flex;
justify-content: space-between;
width: 450rpx;
}
.kklineLeft {
width: 200rpx;
}
.rightJt{
width: 30rpx;
height: 30rpx;
margin-top: 4rpx;
}
.lineborderNo{
border-bottom: none;
}
.kklineLeft1{
font-weight: 500;
color: #3C3C3C;
font-size: 28rpx;
}
.kklineRight1{
font-weight: 400;
color: #999999;
font-size: 26rpx;
}
.kklineLeft3{
font-weight: 400;
color: #666666;
font-size: 28rpx;
width: 480rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kklineRight3{
font-weight: 400;
color: #3C3C3C;
font-size: 28rpx;
}
.bzline{
display: flex;padding: 30rpx 0;
}
.beizInput{
width: 450rpx;font-size: 28rpx;
}
.beiz{
color: #666666;font-size: 28rpx;
width: 200rpx;
}
.bottom-container{
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.1000);
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
}
.newyyBotbutton{
width: 204rpx;
height: 74rpx;
background: #D53533;
border-radius: 37rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 74rpx;
text-align: center;
margin-right: 30rpx;
margin-top: 23rpx;
}
.bottom-container-price{
color: #FF0000;
padding-top: 30rpx;
padding-left: 30rpx;
font-size: 32rpx;
}
.qianhaospan{
font-size: 22rpx;
}
.ckj{
color: #999999;font-size: 24rpx;
padding-left: 30rpx;
}
</style>