<template>
<view class="box">
<!-- 自定义导航 -->
<view class="zdyNavBox">
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
<view class="zdyNav">
<view class="zdyNavLeft">
<image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback"></image>
</view>
<view class="zdyNavTitle">订单详情</view>
<view style="width: 50px;"></view>
</view>
</view>
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
<view style="height: 44px;"></view>
<view class="top">
<view class="orderState">
<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
<view class="SheetState" v-if="orderData.data.sheetState == 1">待付款</view>
<view class="SheetState" v-if="orderData.data.sheetState == 2">待服务</view>
<view class="SheetState" v-if="orderData.data.sheetState == 3">已完成</view>
<view class="SheetState" v-if="orderData.data.sheetState == 4">已取消</view>
</view>
</view>
<!-- 店铺信息 -->
<view class="shopBox">
<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
<view class="shopCont">
<view class="shopName">{{orderData.shopInfo.shopName}}</view>
<view class="Address">
{{orderData.shopInfo.provinceName}}{{orderData.shopInfo.cityName}}{{orderData.shopInfo.areaName}}{{orderData.shopInfo.address}}
</view>
</view>
<!-- <view class="shopRightBox" @click="map"> -->
<view class="shopRightBox">
<image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
<view class="shopRihgtTxt">地图</view>
</view>
<view class="shopsx"></view>
<view class="shopRightBox" @click="call">
<image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
<view class="shopRihgtTxt">电话</view>
</view>
</view>
<!-- 订单内容 -->
<view class="information">
<view class="detailedTitle">订单内容</view>
<view v-if="orderData.openSheetDetail.length>0" v-for="(item,index) in orderData.openSheetDetail" :key="index">
<view class="informationLine2">
<view class="goodsName">{{item.itemName}}</view>
<view class="salePrice"><span class="informationNum">￥</span>{{item.salePrice}}</view>
</view>
</view>
<view v-if="orderData.data.sheetState != 1 && orderData.data.sheetState != 4" class="line"></view>
<view v-if="orderData.data.sheetState != 1 && orderData.data.sheetState != 4">
<view class="goodsName2">
券码信息（{{quanMaList.length?quanMaList.length:0}}张可用）
</view>
<view class="detailedLineBox" v-for="(v,index) in orderData.OpenSheetQRCode">
<view class="detailedLine">
<view v-if="v.writeoffState==1" class="detailedName">
<view class="redPoint"></view>
<view class="code">{{v.qrCode}}</view>
<view class="quanState">待使用</view>
</view>
<view v-if="v.writeoffState==3" class="detailedName">
<view class="redPoint"></view>
<view class="code old" >{{v.qrCode}}</view>
<view class="quanState2">已使用</view>
</view>
<image src="../../static/img/icon_erweima.png" mode="" style="width: 36rpx;height: 36rpx;"
v-if="v.writeoffState==1" @click="isShowMaSHow(index)"></image>
</view>
<view class="writeoffLineBox" v-if="v.writeoffState==3">
<view class="writeoffLine">
<view class="writeoffLineTxt">核销时间：{{v.writeoffTime}}</view>
<view class="writeoffLineTxt">核销人：{{v.writeoffName}}</view>
</view>
<view class="writeoffLine">
<view class="writeoffLineTxt">核销门店：{{v.writeoffShopName?v.writeoffShopName:''}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 实付款 -->
<view class="money">
<view class="informationNum">实付款：</view>
<view class="informationNum" style="color: #FF0000;font-weight: bold;">￥{{orderData.data.realMoney}}</view>
</view>
<!-- 订单信息 -->
<view class="information">
<view class="detailedTitle">订单信息</view>
<view class="informationLine">
<view class="informationTxt">车牌号：</view>
<view class="informationNum">{{orderData.data.plateNumber}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">车型：</view>
<view class="informationNum" style="width: 480rpx;">{{orderData.data.carModel}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">联系人：</view>
<view class="informationNum">{{orderData.data.customerName}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">手机号：</view>
<view class="informationNum">{{orderData.data.mobilePhone}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">预约时间：</view>
<view class="informationNum">{{orderData.data.hTime}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">订单单号：</view>
<view class="informationNum">{{orderData.data.code}}<span class="codeCopy"
@click="copy(orderData.data.code)">复制</span></view>
</view>
<view class="informationLine">
<view class="informationTxt">下单人：</view>
<view class="informationNum">{{orderData.data.userMobilePhone}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">下单时间：</view>
<view class="informationNum">{{orderData.data.createTime}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">订单类型：</view>
<view class="informationNum" style="width: 480rpx;">钣喷</view>
</view>
</view>
<!-- 支付信息 -->
<view class="information">
<view class="detailedTitle">支付信息</view>
<view class="informationLine">
<view class="informationTxt">支付状态：</view>
<view class="informationNum" v-if="orderData.data.payState==1">未支付</view>
<view class="informationNum" v-if="orderData.data.payState==2">已支付</view>
</view>
<view class="informationLine">
<view class="informationTxt">支付方式：</view>
<view class="informationNum" v-if="orderData.data.payType==1">在线支付</view>
<view class="informationNum" v-if="orderData.data.payType==2">线下支付</view>
</view>
<view class="informationLine">
<view class="informationTxt">支付时间：</view>
<view class="informationNum">{{orderData.data.payTime?orderData.data.payTime:'-'}}</view>
</view>
</view>
<!-- 核销信息 -->
<view class="information writeoffXx" v-if="orderData.data.sheetState == 3">
<view class="detailedTitle">核销信息</view>
<view class="informationLine">
<view class="informationTxt">核销状态：</view>
<view class="informationNum" v-if="orderData.data.writeoffState==1">未核销</view>
<view class="informationNum" v-if="orderData.data.writeoffState==2">部分核销</view>
<view class="informationNum" v-if="orderData.data.writeoffState==3">已核销</view>
</view>
<view class="informationLine">
<view class="informationTxt">核销时间：</view>
<view class="informationNum">{{orderData.data.writeoffTime?orderData.data.writeoffTime:'-'}} {{orderData.data.writeoffName}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">核销门店：</view>
<view class="informationNum">{{orderData.data.writeoffShopName?orderData.data.writeoffShopName:'-'}}</view>
</view>
</view>
<view style="height: 50rpx;background-color: #F4F5F7;"></view>
<!-- 待付款 -->
<view class="bottom" v-if="orderData.data.sheetState == 1">
<view v-if="iOSInfo.indexOf('Q030')!=-1||!iOSInfo" class="cancel" @click="cancelBespeak">取消订单</view>
</view>
<!-- 待服务 -->
<view class="bottom" v-if="orderData.data.sheetState == 2">
<view v-if="(iOSInfo.indexOf('Q030')!=-1||!iOSInfo) && orderData.data.payType==2" class="cancel" @click="cancelBespeak">取消订单</view>
<view v-if="(iOSInfo.indexOf('Q031')!=-1||!iOSInfo) && orderData.data.payType==1" class="defer" @click="isShowTui=true">退款</view>
<view v-if="(iOSInfo.indexOf('Q035')!=-1||!iOSInfo) && (orderData.data.payType==2) && (orderData.data.payState==1)" class="defer" @click="payDone">支付完成</view>
<!-- 在线支付 -->
<view v-if="(iOSInfo.indexOf('Q032')!=-1||!iOSInfo) && (orderData.data.payType==1)" class="defer" @click="goHeXiao">核销</view>
<!-- 线下支付 -->
<view v-if="(iOSInfo.indexOf('Q032')!=-1||!iOSInfo) && (orderData.data.payType==2) && (orderData.data.payState==2)" class="defer" @click="goHeXiao">核销</view>
<!-- <view v-if="iOSInfo.indexOf('Q033')!=-1||!iOSInfo" class="defer" @click="">开单</view> -->
<!-- <view v-if="iOSInfo.indexOf('Q034')!=-1||!iOSInfo" class="defer" @click="">开卡</view> -->
</view>
<!-- 券码 -->
<view class="maBox" v-if="isShowMa==true" @click="isShowMa=false">
<view class="querenMa">
<view class="maTop">
<view class="maTitle">请到店出示券码即可开始服务</view>
<image @click="isShowMa=false" src="../../static/img/icon_delete.png" mode=""
style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
</view>
<swiper class="swiper" circular :current='swiperIndex' :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
<swiper-item v-for="(item,index) in quanMaList">
<view class="swiper-item">
<view class="maCode">{{item}}</view>
<view class="maBoximg">
<tki-qrcode cid="qrcode1" ref="qrcode" :val="item" :size="400" :unit="unit"
:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
:loadMake="loadMake" :usingComponents="true" @result="qrR" />
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
<!-- 退款原因 -->
<view class="tuikuanBox" v-if="isShowTui==true">
<view class="tuikuan">
<view class="tuiTop">
<view class="tuiTitle">退款</view>
<image @click="isShowTui=false" src="../../static/img/icon_close.png" mode="" style="width: 26rpx; height: 26rpx;"></image>
</view>
<view class="contLine">
<view class="contlineLeft">
<image src="../../static/img/icon_star.png" mode="" class="star"></image>
退款原因
</view>
<view class="contlineRight carModelRight" @click="">
<picker class="carModel" @change="bindChange" mode="selector" :value="index" :range="tuicauseList" range-key="contents">
<view class="uni-input">{{tuicauseList[index].contents}}</view>
</picker>
<image src="../../static/img/little_rightArrow.png" mode="" class="contlineRightJt"></image>
</view>
</view>
<view class="contLine">
<view class="contlineLeft">
<image src="../../static/img/icon_star.png" mode="" class="star"></image>
退款金额
</view>
<view class="contlineRight carModelRight" @click="cktime">
<span class="carModel">{{orderData.data.realMoney}}</span>
</view>
</view>
<view class="contLine">
<view class="contlineLeft">
<image src="" mode="" class="star"></image>
补充描述
</view>
<view class="contlineRight">
<textarea placeholder-style="color:#999999" placeholder="请输入" v-model="tuikuanContent"
class="contlineRightInput" maxlength="-1" auto-height="true" @confirm="feedDone" />
</view>
</view>
<view class="tuiBtns">
<view class="btn" @click="isShowTui=false">取消</view>
<view class="btn2" @click="goTui">确认退款</view>
</view>
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
export default {
components: {
tkiQrcode
},
data() {
return {
id: '',
iStatusBarHeight:'',
orderData: '',
onval: true, // val值变化时自动重新生成二维码
loadMake: true, // 组件加载完成后自动生成二维码
size: 500,
qrcodeShow: false,
qrcodeTop: '-100vh',
qrcodeTopVal: '',
ifShow: false,
val: '二维码', // 要生成的二维码值
unit: 'upx', // 单位
background: '#b4e9e2', // 背景色
foreground: '#309286', // 前景色
pdground: '#262637', // 角标色
icon: '', // 二维码图标
iconsize: 40, // 二维码图标大小
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
src: '', // 二维码生成后的图片地址或base64
isShowMa: false,
quanMaList:[],
isShowTui: false,
tuicauseList:[],
tuikuanContent:'',
index: 0,
iOSInfo:'',
swiperIndex:0,
back:'',
}
},
onLoad(opt) {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
this.id = opt.id
this.back=opt.back;
if (this.id) {
this.getData()
}
this.getTuiKuanData()
var qxnum = uni.getStorageSync("quanxian");
if (qxnum == 1) {
this.iOSInfo = JSON.parse(JSON.stringify(window.iOSInfo));
}else if(qxnum==2){
window.getAndroid=this.getAndroid;
}
},
methods: {
isShowMaSHow(index){
this.swiperIndex=index
this.isShowMa=true
},
getAndroid(e){
this.iOSInfo=e
},
payDone(){
var that = this
uni.showModal({
title: '提示',
content: '确认已支付完成吗',
success: function (res) {
if (res.confirm) {
uni.showLoading({
title: '加载中'
})
that.$http('openH5Indent/complete', {
id: that.id,
}, 'POST').then(res => {
uni.hideLoading();
// var list = res.data.Items
setTimeout(function() {
that.getData();
}, 1000);
})
} else if (res.cancel) {
}
}
});
},
goTui(){
let yuanyin = this.tuicauseList[this.index].contents
if (!yuanyin) {
uni.showToast({
title: '请选择退款原因',
icon: 'none',
duration: 3000
});
return false;
}
uni.showLoading({
title: '加载中'
})
var that = this
this.$http('openH5Indent/reimburse', {
id: this.id,
refundReason: yuanyin,
refundComment: this.tuikuanContent,
realMoney:this.orderData.data.realMoney
}, 'GET').then(res => {
uni.hideLoading();
// var list = res.data.Items
// var list = res.data
console.log("result+=", res);
if (res.code == 1) {
that.isShowTui = false
uni.showToast({
title: '退款成功',
icon: 'none',
duration: 2000
});
setTimeout(function() {
that.getData();
}, 1000);
}
})
},
bindChange(e) {
console.log(e);
this.index = e.detail.value
},
feedDone(e) {
this.tuikuanContent = e.target.value
},
// 核销
goHeXiao(){
//app交互
var standalone = window.navigator.standalone
var userAgent = window.navigator.userAgent.toLowerCase()
var safari = /safari/.test(userAgent)
var ios = /iphone|ipod|ipad|mac/.test(userAgent)
var android = /android/.test(userAgent)
if (ios) {
if ( true) {//!standalone&& !safari
window.webkit.messageHandlers.goHeXiao.postMessage({"id":this.id?this.id:''})
}
} else if (android) {
window.android.writeoff(this.id)
}
},
getTuiKuanData() {
uni.showLoading({
title: '加载中'
});
this.$http('openH5Indent/getOpenReason', {
// id: this.id,
}, 'GET').then(res => {
uni.hideLoading();
this.tuicauseList = res.data;
})
},
pay(){
this.$http('openMallOrder/unifiedPay', {
sheetId:this.id
},'POST').then(res => {
if(res.code==0){
this.requestPayment(res.data)
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 3000
});
}
})
},
requestPayment(res){
var payInfo=res;
//console.log(payInfo)
//console.log(String(Date.now()))
var that=this;
uni.requestPayment({
provider: 'wxpay',
//timeStamp: String(Date.now()),
timeStamp: payInfo.timeStamp,
nonceStr: payInfo.nonceStr,
package:payInfo.package,
signType: payInfo.signType,
paySign: payInfo.paySign,
appid:payInfo.appId,
success: function (res) {
console.log('success:' + JSON.stringify(res));
uni.showToast({
title: '支付成功',
icon:'none',
duration: 2000
});
that.getData()
},
fail: function (err) {
console.log(err)
uni.showToast({
title: '支付失败',
icon:'none',
duration: 2000
});
}
});
},
copy(txt) {
uni.setClipboardData({
data: txt,
success: function() {
uni.showToast({
title: '复制成功',
icon: 'none',
duration: 2000
});
}
});
},
upTime() {
uni.showLoading({
title: '加载中'
})
var that = this
this.$http('openH5Indent/carOwner/updateTimeOfAppointment', {
id: this.id,
shopId: this.orderData.shopInfo.id,
billDate: this.billDate
}, 'POST').then(res => {
uni.hideLoading();
// var list = res.data.Items
var list = res.data
console.log("result+=", res.data);
uni.showToast({
title: '延期成功',
icon: 'none',
duration: 2000
});
setTimeout(function() {
that.getData();
}, 1000);
})
},
cancelBespeak(){
var that = this
uni.showModal({
title: '提示',
content: '是否取消该订单',
cancelText:'否',
confirmText:'是',
success: function (res) {
if (res.confirm) {
uni.showLoading({
title: '加载中'
})
that.$http('openH5Indent/updateSheetState', {
id: that.id,
}, 'POST').then(res => {
uni.hideLoading();
// var list = res.data.Items
uni.showToast({
title: '取消成功',
icon: 'none',
duration: 2000
});
setTimeout(function() {
that.getData();
}, 1000);
})
} else if (res.cancel) {
}
}
});
},
map() {
console.log("打开地图")
var that = this;
if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
uni.showToast({
title: '该店铺未设置定位',
icon: 'none',
duration: 3000
});
} else {
uni.openLocation({
latitude: Number(that.orderData.shopInfo.lat),
longitude: Number(that.orderData.shopInfo.lng),
name: that.orderData.shopInfo.shopName,
address: that.orderData.shopInfo.provinceName + that.orderData.shopInfo.cityName + that
.orderData.shopInfo.areaName + that.orderData.shopInfo.address,
success: function() {
console.log('success');
},
fail(err) {
console.log(err)
}
});
}
},
call() {
uni.makePhoneCall({
phoneNumber: this.orderData.shopInfo.mobilePhone
});
},
getData() {
uni.showLoading({
title: '加载中'
});
this.$http('openH5Indent/queryOpenSheet', {
id: this.id,
}, 'GET').then(res => {
uni.hideLoading();
this.orderData = res.data;
if (this.quanMaList) {
this.quanMaList = [];
}
let maList = this.orderData.OpenSheetQRCode;
if (maList) {
maList.forEach(item =>{
if (item.writeoffState==1) {
this.quanMaList.push(item.qrCode);
}
})
}
console.log('可用券码--',this.quanMaList);
})
},
goback() {
if(this.back==1){
uni.navigateBack({
delta: 1
})
}else{
var standalone = window.navigator.standalone
var userAgent = window.navigator.userAgent.toLowerCase()
var safari = /safari/.test(userAgent)
var ios = /iphone|ipod|ipad|mac/.test(userAgent)
var android = /android/.test(userAgent)
if (ios) {
if ( true) {//!standalone&& !safari
window.webkit.messageHandlers.goMyNav.postMessage(null)
}
} else if (android) {
window.android.postMessage()
}
}
},
gohome(){
uni.switchTab({
url:'../../index/index'
})
},
},
onPullDownRefresh() {
this.getData()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style scoped>
.box {
min-height: 100vh;
background: #F4F5F7;
padding-bottom: 135rpx;
}
.zdyNavBox{
width: 100vw;
background: #FFFFFF;
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
}
.zdyNav{
height: 44px;
display: flex;
justify-content: space-between;
align-items: center;
}
.backImg{
width: 44rpx;
height: 44rpx;
margin-left: 10rpx;
margin-right: 20rpx;
}
.homeImg{
width: 44rpx;
height: 44rpx;
}
.zdyNavLeft{
display: flex;
align-items: center;
}
.zdyNavTitle{
height: 44px;
background: #FFFFFF;
text-align: center;
font-size: 34rpx;
line-height: 44px;
}
.top {
height: 190rpx;
background-color: #FF0000;
}
.orderState {
display: flex;
justify-content: center;
align-items: center;
padding-top: 40rpx;
}
.SheetState {
display: flex;
justify-content: center;
font-size: 36rpx;
font-weight: 500;
color: #FFFFFF;
margin-left: 15rpx;
}
.timeEditImg {
width: 25rpx;
height: 25rpx;
padding-left: 20rpx;
}
.shopBoximg {
width: 40rpx;
height: 40rpx;
}
.shopRightImg {
width: 44rpx;
height: 45rpx;
}
.shopsx {
width: 1px;
height: 50rpx;
background: #EEEEEE;
margin-top: 30rpx;
margin-left: 28rpx;
}
.shopBox {
display: flex;
padding: 30rpx 20rpx;
margin: 0rpx 24rpx;
margin-top: -60rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
}
.shopCont {
width: 405rpx;
padding-left: 20rpx;
}
.shopName {
font-size: 30rpx;
font-weight: bold;
color: #3C3C3C;
line-height: 42rpx;
}
.Address {
color: #999999;
font-size: 24rpx;
margin-top: 10rpx;
}
.shopRihgtTxt {
color: #999999;
font-size: 24rpx;
}
.shopRightBox {
padding-left: 28rpx;
}
.detailedTitle {
padding: 23rpx 20rpx;
display: flex;
text-align: center;
align-content: flex-start;
border-bottom: 1rpx solid #EEEEEE;
font-size: 30rpx;
font-weight: bold;
color: #3C3C3C;
}
.detailedLine {
display: flex;
padding: 16rpx 20rpx;
justify-content: space-between;
align-items: center;
}
.detailedImg {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.detailedName {
display: flex;
align-items: center;
}
.code {
font-size: 26rpx;
color: #333333;
font-weight: bold;
width: 180rpx
}
.old {
color: #999999;
font-weight: 400;
text-decoration: line-through;
}
.redPoint {
width: 10rpx;
height: 10rpx;
background: #FF0000;
border-radius: 10rpx;
margin-right: 10rpx;
}
.quanState {
font-size: 22rpx;
color: #F19D01;
padding: 0 10rpx;
border: 1rpx solid #F19D01;
border-radius: 4rpx;
margin-left: 20rpx;
}
.quanState2{
font-size: 22rpx;
color: #999999;
padding: 0 10rpx;
border: 1rpx solid #DDDDDD;
border-radius: 4rpx;
margin-left: 20rpx;
}
.information {
background: #FFFFFF;
border-radius: 10rpx;
margin: 20rpx 24rpx;
padding-bottom: 15rpx;
}
.informationLine {
display: flex;
padding: 15rpx 20rpx;
}
.informationLine2 {
display: flex;
justify-content: space-between;
font-size: 26rpx;
padding: 20rpx;
align-items: center;
padding-bottom: 0;
}
.salePrice {
font-size: 26rpx;
font-weight: 500;
color: #333333;
line-height: 45rpx;
}
.money {
background: #FFFFFF;
border-radius: 10rpx;
margin: 20rpx 24rpx;
display: flex;
justify-content: space-between;
font-size: 26rpx;
padding: 30rpx 20rpx;
}
.informationTxt {
width: 190rpx;
font-size: 26rpx;
color: #999999;
}
.line {
height: 20rpx;
background-color: #FFFFFF;
border-bottom: 1rpx solid #EEEEEE;
}
.goodsName {
width: 80%;
color: #333333;
font-size: 26rpx;
}
.goodsName2{
padding: 20rpx 20rpx 15rpx;
color: #333333;
font-size: 26rpx;
}
.informationNum {
color: #333333;
font-size: 26rpx;
}
.codeCopy {
width: 77rpx;
height: 36rpx;
background: #F4F5F7;
border-radius: 22rpx;
font-size: 24rpx;
color: #333333;
text-align: center;
line-height: 33rpx;
padding: 0 15rpx;
margin-left: 20rpx;
}
.bottom {
display: flex;
justify-content: flex-end;
padding: 20rpx;
background-color: #FFFFFF;
align-items: center;
height: 98rpx;
width: 100vw;
position: fixed;
bottom: 0rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.cancel {
color: #3C3C3C;
font-size: 28rpx;
width: 150rpx;
height: 56rpx;
border-radius: 36rpx;
border: 1rpx solid #DDDDDD;
text-align: center;
line-height: 56rpx;
margin-right: 40rpx;
}
.defer {
color: #D53533;
font-size: 28rpx;
width: 150rpx;
height: 56rpx;
border-radius: 36rpx;
border: 1rpx solid #D53533;
text-align: center;
line-height: 56rpx;
margin-right: 40rpx;
}
.itemBox {
margin: 20rpx;
border-radius: 10rpx;
border: 2rpx solid #EEEEEE;
}
.itemTop {
padding: 18rpx 20rpx;
padding-right: 0;
background-color: #FFEFD5;
display: flex;
justify-content: space-between;
align-content: center;
}
.topTitle {
width: 104rpx;
font-size: 26rpx;
color: #333333;
margin-right: 20rpx;
text-align: right;
}
.leftItem {
font-size: 26rpx;
color: #333333;
margin-right: 20rpx;
flex-grow: 1;
/* 隐藏文字显示 ...不换行 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.itemContent {
padding: 20rpx;
padding-right: 0;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
align-content: center;
}
.maBox {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
top: 0;
z-index: 9999;
}
.querenMa {
width: 578;
height: 640rpx;
background: #ffffff;
margin: 0 86rpx;
margin-top: 50%;
border-radius: 24rpx;
}
.maTop {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 20rpx 15rpx;
}
.maTitle {
color: #666666;
font-size: 26rpx;
text-align: center;
padding-left: 100rpx;
}
.swiper{
width: 100%;
height: 85%;
background: #FFFFFF;
}
.swiper-item{
width: 100%;
height: 100%;
}
.maCode {
font-size: 30rpx;
font-weight: 500;
color: #333333;
line-height: 42rpx;
margin-bottom: 40rpx;
text-align: center;
}
.maBoximg {
width: 400rpx;
height: 400rpx;
margin-left: 86rpx;
}
.tuikuanBox {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.tuikuan {
width: 638rpx;
height: 664rpx;
background: #ffffff;
margin: 0 36rpx;
margin-top: 50%;
border-radius: 24rpx;
padding: 30rpx 20rpx;
}
.tuiTop {
display: flex;
justify-content: space-between;
margin-bottom: 36rpx;
}
.tuiTitle {
width: 56rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: 500;
color: #3C3C3C;
line-height: 40rpx;
}
.contLine {
display: flex;
justify-content: space-between;
font-size: 28rpx;
padding: 30rpx 0;
border-bottom: 1px solid #EEEEEE;
}
.contlineLeft {
color: #666666;
line-height: 40rpx;
align-items: center;
}
.star {
width: 14rpx;
height: 14rpx;
padding-bottom: 5rpx;
}
.carModel {
width: 350rpx;
text-align: left;
}
.noColor {
color: #CCCCCC;
}
.carModelRight {
display: flex;
justify-content: flex-start;
align-items: center;
}
.contlineRight {
color: #333333;
line-height: 40rpx;
width: 400rpx;
text-align: right;
}
.contlineRightInput {
color: #333333;
text-align: left;
font-size: 28rpx;
min-height: 182rpx;
width: 400rpx;
}
.contlineRightJt {
width: 30rpx;
height: 30rpx;
}
.tuiBtns {
display: flex;
padding: 40rpx 20rpx 10rpx;
}
.btn {
width: 288rpx;
height: 98rpx;
background: #F4F5F7;
border-radius: 10rpx;
margin-right: 22rpx;
font-size: 30rpx;
font-weight: 500;
color: #3C3C3C;
line-height: 98rpx;
text-align: center;
}
.btn2 {
width: 288rpx;
height: 98rpx;
background: #3F90F7;
border-radius: 10rpx;
font-size: 30rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 98rpx;
text-align: center;
}
.writeoffLine{
display: flex;justify-content: space-between;
color: #999999;font-size: 24rpx;
line-height: 33rpx;padding-top: 8rpx;
}
.writeoffLineBox{
padding: 0 20rpx;
}
.detailedLineBox .detailedLine{
padding-bottom: 0rpx;
}
.writeoffXx .informationNum{
width: 500rpx;
}
.detailedLineBox{
padding-bottom: 10rpx;
}
</style>