|
|
@@ -0,0 +1,393 @@
|
|
|
+<template>
|
|
|
+<view class="box">
|
|
|
+ <view class="top-box" :style="{background:'#'+themeColor}"> </view>
|
|
|
+ <view class="topTime">
|
|
|
+ <img src="../../static/timg/icon_shijian.png" alt="" class="topTimeImg">
|
|
|
+ <view class="topTimeNum">2022-02-06 12:20</view>
|
|
|
+ </view>
|
|
|
+ <!-- 救援拖车框 -->
|
|
|
+ <view class="tcBox">
|
|
|
+ <view class="tcLeft">
|
|
|
+ <view class="tcStart">
|
|
|
+ <view class="tcStartYq"></view>
|
|
|
+ <view class="tcStartTitle">起点</view>
|
|
|
+ <view class="tcStartTxt">历下区经十路11899号</view>
|
|
|
+ </view>
|
|
|
+ <view class="tcEnd">
|
|
|
+ <view class="tcEndYq"></view>
|
|
|
+ <view class="tcStartTitle">终点</view>
|
|
|
+ <view class="tcStartTxt">历下区经十路山东省济南市历下区新泺大街1166号号</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tcRight">约101.09km</view>
|
|
|
+ </view>
|
|
|
+ <!-- 救援拖车框 -->
|
|
|
+ <view class="contBox">
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span>服务门店</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight">{{shopName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span>救援项目</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight">塔电/轮胎/拖车</view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft2">
|
|
|
+ <span class="stars">*</span> <span>救援场景</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight2">
|
|
|
+ <view class="jyKK jyKKActive">地面</view>
|
|
|
+ <view class="jyKK">车库</view>
|
|
|
+ <view class="jyKK">其他</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span class="stars">*</span> <span>车牌号</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight3" @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="kklineRight3" >
|
|
|
+ <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">
|
|
|
+ <input type="text" placeholder="请输入">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span class="stars">*</span><span>手机号</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight">15588753378</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="height: 120rpx;"></view>
|
|
|
+ <view class="bottom-container">
|
|
|
+ <view class="heji">
|
|
|
+ <span>合计</span> <span style="font-size: 22rpx;color: #FF0000;">￥</span> <span style="font-size: 32rpx;color: #FF0000;" >759</span>
|
|
|
+ </view>
|
|
|
+ <view class="newyyBotbutton" :style="{background:'#'+themeColor}" @click="yuyue">提交订单</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+</view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import timeSelect from '@/components/timeSelect/timeSelect.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ timeSelect
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ comment:'',
|
|
|
+ totalPrice:99,
|
|
|
+ userInfo:'',
|
|
|
+ timedata:'',
|
|
|
+ billDate:'',
|
|
|
+ yuyueData:'',
|
|
|
+ carInfo:'',
|
|
|
+ yyshopInfo:'',
|
|
|
+ themeColor:'',
|
|
|
+ shopName:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.themeColor = uni.getStorageSync("themeColor");
|
|
|
+ this.userInfo = uni.getStorageSync("userInfo");
|
|
|
+ this.shopName=opt.shopName
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.carInfo=this.$store.state.carInfo;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goCarlist(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'../user/addCar/cailist'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ yuyue(){
|
|
|
+ if(!this.billDate){
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择预约时间',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.$http('openreservation/saveOrderSheet', {
|
|
|
+ billDate: this.billDate,
|
|
|
+ comment: this.comment,
|
|
|
+ carID: this.carInfo.id,
|
|
|
+ orderItem: this.yuyueData.map(item => item.ID).join(),
|
|
|
+ shopId: this.yyshopInfo.id,
|
|
|
+ unionId: this.userInfo.unionId
|
|
|
+ },'POST').then(res => {
|
|
|
+ var id=res.data
|
|
|
+ if(res.code==0){
|
|
|
+ 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.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">
|
|
|
+.tcBox{
|
|
|
+ width: 702rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+}
|
|
|
+.heji{
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ line-height: 120rpx;
|
|
|
+}
|
|
|
+.rightJt{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+}
|
|
|
+.kklineRight3{
|
|
|
+ display: flex;
|
|
|
+ color: #3c3c3c;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.kklineRight2{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.jyKK{
|
|
|
+ width: 108rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ border: 2rpx solid #CCCCCC;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+}
|
|
|
+.jyKKActive{
|
|
|
+ background: #FF0000;
|
|
|
+ border: none;
|
|
|
+ height: 60rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+.kklineLeft2{
|
|
|
+ line-height: 60rpx;
|
|
|
+}
|
|
|
+.contBox{
|
|
|
+ width: 662rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
+.stars{
|
|
|
+ color: #FF2400;
|
|
|
+}
|
|
|
+.tcLeft{
|
|
|
+ width: 524rpx;padding-left: 13rpx;
|
|
|
+}
|
|
|
+.tcStart{
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ display: flex;
|
|
|
+ padding: 29rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+}
|
|
|
+.tcEnd{
|
|
|
+ display: flex;
|
|
|
+ padding: 29rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+}
|
|
|
+.tcStartYq{
|
|
|
+ width: 14rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ background: #3F90F7;
|
|
|
+ margin-top: 13rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.tcStartTxt{
|
|
|
+ width: 396rpx;
|
|
|
+}
|
|
|
+.tcEndYq{
|
|
|
+ width: 14rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ background: #FF0000;
|
|
|
+ margin-top: 13rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.tcStartTitle{
|
|
|
+ color: #666666;
|
|
|
+ padding: 0 30rpx 0 20rpx;
|
|
|
+}
|
|
|
+.tcRight{
|
|
|
+ color: #FF0000;
|
|
|
+ line-height: 33rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding-top: 82rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+}
|
|
|
+.kkline{
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.kkline2{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+.kklineRight{
|
|
|
+ color: #3c3c3c;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ width: 450rpx;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.kklineLeft {
|
|
|
+ width: 200rpx;
|
|
|
+}
|
|
|
+.box{
|
|
|
+ background: #F4F5F7;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+.topTime{
|
|
|
+ width: 702rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 37rpx 0;
|
|
|
+ margin-top: -70rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.topTimeImg{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+}
|
|
|
+.topTimeNum{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ padding-left: 18rpx;
|
|
|
+}
|
|
|
+.top-box{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 164rpx;
|
|
|
+ background: #FF0000;
|
|
|
+ border-radius: 0 0 10% 10%;
|
|
|
+}
|
|
|
+.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>
|
