<template>
<view class="box">
<homenav :iStatusBarHeight="iStatusBarHeight" :title="'消费明细'" ></homenav>
<view class="contentBox">
<view class="top" :style="{background:'#'+themeColor}">
<view class="orderState">
<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;">
</image>
<!-- <view class="SheetState" v-if="orderData.billsheet.PayState==2">已结算</view>
<view class="SheetState" v-if="orderData.billsheet.PayState==0">未结算</view>
-->
<!-- SheetType单据类型(1维修单 2销售单3洗车单4销售退货) -->
<view class="stateBox" v-if="orderData.billsheet.SheetType == 1">
<!-- 0待施工（已保存）1施工中（已派工）2已完工 3已质检 4 已作废 -->
<view class="SheetState" v-if="orderData.billsheet.SheetState == 0">待施工</view>
<view class="SheetState" v-if="orderData.billsheet.SheetState == 1">施工中</view>
<view class="SheetState" v-if="orderData.billsheet.SheetState == 2">已完工</view>
<view class="SheetState" v-if="orderData.billsheet.SheetState == 3">已质检</view>
<view class="SheetState" v-if="orderData.billsheet.SheetState == 4">已作废</view>
<!-- 结算状态 -->
<view class="SheetState" v-if="orderData.billsheet.PayState == 0">/未结算</view>
<view class="SheetState" v-if="orderData.billsheet.PayState == 2">/已结算</view>
</view>
<view class="stateBox" v-if="orderData.billsheet.SheetType == 2">
<!-- 0待施工（已保存）1施工中（已派工）2已审核 3已质检 4 已作废 -->
<view class="SheetState" v-if="orderData.billsheet.SheetState < 2 ">未审核</view>
<view class="SheetState" v-if="orderData.billsheet.SheetState == 2">已审核</view>
<view class="SheetState" v-if="orderData.billsheet.SheetState == 4">已作废</view>
<!-- 结算状态 -->
<view class="SheetState" v-if="orderData.billsheet.PayState == 0">/未结算</view>
<view class="SheetState" v-if="orderData.billsheet.PayState == 2">/已结算</view>
</view>
<view class="stateBox" v-if="orderData.billsheet.SheetType == 3">
<!-- 0待施工（已保存）1施工中（已派工）2已完工 3已质检 4 已作废 -->
<view class="SheetState" v-if="orderData.billsheet.SheetState == 0">已保存</view>
<view class="SheetState" v-if="orderData.billsheet.SheetState == 4">已作废</view>
<!-- 结算状态 -->
<view class="SheetState" v-if="orderData.billsheet.PayState == 0">/未结算</view>
<view class="SheetState" v-if="orderData.billsheet.PayState == 2">/已结算</view>
</view>
</view>
</view>
<view class="shopBox2">
<view class="newboxTop">
<view class="newline1">{{orderData.billsheet.CustomerName}}</view>
<view class="newline1" style="padding-left: 20rpx;">{{orderData.billsheet.PlateNumber}}</view>
</view>
<view class="CarModel" v-if="orderData.billsheet.CarModel">{{orderData.billsheet.CarModel}}</view>
<view class="goodscostLine" >
<view class="informationTxt">进店里程</view>
<view class="goodsCostNum3 " style="font-size: 28rpx;" v-if="orderData.billsheet.CurrentMileage>0">
{{orderData.billsheet.CurrentMileage}}公里
</view>
</view>
<view class="goodscostLine" >
<view class="informationTxt">建议下次保养里程</view>
<view class="goodsCostNum3 " style="font-size: 28rpx;color: #FDC752;" v-if="orderData.billsheet.NextCareMilage">
{{orderData.billsheet.NextCareMilage}}公里
</view>
</view>
<!-- <view class="goodscostLine" style="font-size: 28rpx;color: #FDC752;" v-if="orderData.billsheet.SheetType==1">
<view class="informationTxt">建议下次保养时间</view>
<view class="goodsCostNum3 " v-if="orderData.billsheet.NextCareDate">
{{orderData.billsheet.NextCareDate.slice(0,10)}}
</view>
</view> -->
<view class="baoyangtis">建议下次保养，里程或日期，先到为准</view>
</view>
<!-- 店铺信息 -->
<view class="shopBox">
<!-- <image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image> -->
<view class="shopCont">
<view class="shopName">{{orderData.billsheet.ShopName}}</view>
<view class="Address" v-if="orderData.billsheet.shopMobilePhone">服务电话：{{orderData.billsheet.shopMobilePhone}}</view>
<view class="Address">{{orderData.billsheet.Address}}</view>
</view>
<view class="shopRightBox" @click="map">
<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="carMes">
<view class="plate">{{orderData.billsheet.time}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">单号</view>
<view class="informationNum">{{orderData.billsheet.Code}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">服务顾问</view>
<view class="informationNum" v-if="orderData.billsheet.PickName">{{orderData.billsheet.PickName}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">技师</view>
<view class="informationNum" v-if="orderData.billsheet.workNames">{{orderData.billsheet.workNames}}</view>
</view>
<!-- <view class="informationLine">
<view class="informationTxt">手机号：</view>
<view class="informationNum">{{orderData.billsheet.MobilePhone}}</view>
</view> -->
<!-- <view class="informationLine">
<view class="informationTxt">接车时间：</view>
<view class="informationNum">{{orderData.billsheet.time}}</view>
</view> -->
<view class="informationLine" v-if="FaultDescription">
<view class="informationTxt">故障描述</view>
<view class="informationNum" v-if="orderData.billsheet.FaultDescription">
{{orderData.billsheet.FaultDescription}}
</view>
</view>
<view class="informationLine" v-if="RepairDescription">
<view class="informationTxt">维修建议</view>
<view class="informationNum" v-if="orderData.billsheet.RepairDescription">
{{orderData.billsheet.RepairDescription}}
</view>
</view>
<!-- <view class="informationLine" >
<view class="informationTxt">保养技师：</view>
<view class="informationNum" v-if="orderData.billsheet.workNames">
{{orderData.billsheet.workNames}}
</view>
</view> -->
<view class="informationLine" v-if="Comment">
<view class="informationTxt">备注</view>
<view class="informationNum" v-if="orderData.billsheet.Comment">{{orderData.billsheet.Comment}}
</view>
</view>
<view class="imgListBox">
<image class="pictureImg" @click="seeImg(index)" :src="item.imgPath" mode="" v-for="(item,index) in imgList"></image>
</view>
</view>
<!-- 项目明细 -->
<view class="detailedBox itemBox" v-if=" orderData.listItems.length!=0" >
<view class="detailedTitle">项目</view>
<view class="detailedLineBox">
<view class="detailedLine" v-for="(item,index) in orderData.listItems">
<view style="display: flex;justify-content: space-between;">
<view class="detailedName"><span v-if="item.CardDetailID" class="kaColor">卡</span>{{item.ItemName}}
</view>
<view class="price" v-if="ItemMoney">
<span>￥</span>
{{item.AmountMoney?item.AmountMoney:0}}
</view>
</view>
<view class="itemWorkHoursBox" v-if="itemWorkHours||itemPrice||ItemMoneyReal" :class="{nopb:ItemComment&&item.Comment}">
<view class="itemWorkHoursBoxleft">
<view class="itemWorkHours" v-if="itemWorkHours">
工时：<span class="SalePrice">{{item.SaleQty}}</span>
</view>
<view class="itemPrice" v-if="itemPrice">
单价：<span class="SalePrice">{{item.SalePrice}}</span>
</view>
</view>
<view class="price yhprice" v-if="ItemMoneyReal">
<span>￥</span>
{{item.discountPriceReal?item.discountPriceReal:0}}
</view>
</view>
<view class="secondBox" v-if="ItemComment" :class="{noLine:index == orderData.listItems.length-1}">
<view class="comment" v-if="item.Comment">{{item.Comment}}</view>
<view class="secondRight">
<!-- <view class="grayPrice">￥{{item.CheckOutTaxRate}}</view> -->
</view>
</view>
</view>
</view>
</view>
<!-- 商品明细-->
<view class="detailedBox itemBox" v-if="orderData.listParts.length!=0">
<view class="detailedTitle">商品</view>
<view class="detailedLineBox">
<view class="detailedLine" v-for="(item,index) in orderData.listParts">
<view class="goodTop">
<view class="detailedName"><span v-if="item.CardDetailID"
class="kaColor">卡</span>
<span class="GoodsName" style="padding-right: 4rpx;" v-if="brandSetting&&item.Brand">{{item.Brand}} </span>
<span class="GoodsName">{{item.GoodsName}}</span>
<span class="GoodsName" style="padding-left: 4rpx;" v-if="specSetting&&item.Spec"> {{item.Spec}}</span>
<span class="GoodsName" v-if="factoryNumber&&item.FactoryCode">({{item.FactoryCode}})</span>
</view>
<view class="price" v-if="goodsMoney">
<span>￥</span>
{{item.AmountMoney?item.AmountMoney:0}}
</view>
<!-- <view class="qty" v-if="goodsNumber">x{{item.SaleQty}}</view> -->
</view>
<view class="itemWorkHoursBox" v-if="goodsPrice||goodsNumber||goodsMoneyReal" :class="{nopb:GoodsComment&&item.Comment}">
<view class="itemWorkHoursBoxleft">
<view class="itemWorkHours" v-if="goodsNumber">
数量：<span class="SalePrice">{{item.SaleQty}}<span v-if="item.Unit">（{{item.Unit}})</span> </span>
</view>
<view class="itemPrice" v-if="goodsPrice">
单价：<span class="SalePrice">{{item.SalePrice}}</span>
</view>
</view>
<view class="price yhprice" v-if="goodsMoneyReal">
<span>￥</span>
{{item.discountPriceReal?item.discountPriceReal:0}}
</view>
</view>
<view class="secondBox" v-if="GoodsComment" :class="{noLine:index == orderData.listParts.length-1}">
<view class="comment" v-if="GoodsComment&&item.Comment">{{item.Comment}}</view>
</view>
</view>
</view>
</view>
<!-- 费用明细 -->
<view class="goodscost"
v-if="AmountMoney || TotalDiscountMoney || CardMoneyT || CardMoneyC || ReceiptsMoney">
<view class="detailedTitle">费用明细</view>
<view class="goodscostLine" v-if="AmountMoney">
<view class="goodscostTxt">应收总计</view>
<view class="goodsCostNum3">￥{{orderData.billsheet.AmountMoney?orderData.billsheet.AmountMoney:0}}</view>
</view>
<view class="goodscostLine" v-if="TotalDiscountMoney" @click="dmBtn">
<view class="goodscostTxt">优惠总计</view>
<view class="goodsCostNum3 DiscountMoneyTop">
<span>￥{{orderData.billsheet.TotalDiscountMoney?orderData.billsheet.TotalDiscountMoney:0}}</span>
<image v-if="DiscountMoneyDetail&&!dmShow" class="DiscountMoneyIcon" src="../../static/img/icon_arrow_down.png" mode=""></image>
<image v-if="DiscountMoneyDetail&&dmShow" class="DiscountMoneyIcon" src="../../static/img/icon_arrow_up.png" mode=""></image>
</view>
</view>
<view class="yhmx" v-if="DiscountMoneyDetail&&dmShow"><!-- 优惠明细 -->
<view class="goodscostLine" v-for="(item,index) in orderData.discountList" v-if="DiscountMoneyDetailNullZero&&item.price!=0">
<view class="goodscostTxt">{{item.type}}</view>
<view class="goodsCostNum3">￥{{item.price?item.price:0}}</view>
</view>
<view class="goodscostLine" v-for="(item,index) in orderData.discountList" v-if="!DiscountMoneyDetailNullZero">
<view class="goodscostTxt">{{item.type}}</view>
<view class="goodsCostNum3">￥{{item.price?item.price:0}}</view>
</view>
</view>
<view class="goodscostLine" v-if="CardMoneyT">
<view class="goodscostTxt">计次卡冲销</view>
<view class="goodsCostNum3">￥{{orderData.billsheet.CardMoneyT?orderData.billsheet.CardMoneyT:0}}</view>
</view>
<view class="goodscostLine" v-if="CardMoneyC">
<view class="goodscostTxt">储值卡冲销</view>
<view class="goodsCostNum3">￥{{orderData.billsheet.CardMoneyCWriteOff?orderData.billsheet.CardMoneyCWriteOff:0}}</view>
</view>
<view class="goodscostLine" v-if="ReceiptsMoney">
<view class="goodscostTxt">支付金额</view>
<view class="goodsCostNum"><span style="font-size: 28rpx;">￥</span>{{orderData.billsheet.money?orderData.billsheet.money:0}}</view>
</view>
<view class="goodscostLine" >
<view class="goodscostTxt">结算方式</view>
<view class="goodsCostNumJsfs" style="color: #333333;">{{orderData.billsheet.lastPayMethod?orderData.billsheet.lastPayMethod:''}}</view>
</view>
</view>
<!-- 手机号授权 -->
<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
<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" mode="" class="authorizCloseImg"></image>
</view>
</view>
</view>
<view v-if="appraise == true && orderData.billsheet.PayState == 2" class="bottom">
<view
v-if="(orderData.billsheet.EvaluateState == 0) && (lastDay <= 30) && appraise == true && orderData.billsheet.PayState == 2"
@click.stop="goAppraise()" class="ping">评价</view>
<view v-if="orderData.billsheet.EvaluateState == 1" @click.stop="goAppraiseDetail()" class="kan">查看评价</view>
</view>
</view>
</template>
<script>
import homenav from "../../components/homenav/nav.vue"
export default {
components: {
homenav
},
data() {
return {
location: '',
id: '',
orderData: '',
themeColor: '',
authorizShow: false,
userInfo: '',
ext: '',
wxOpenData: '',
appraise: false,
lastDay: '',
// 权限
FaultDescription: false, //故障描述
RepairDescription: false, //维修建议
Comment: false, //备注
ItemMoney: false, //项目、商品金额
ItemComment: false, //项目备注
GoodsComment: false, //商品备注
AmountMoney: false, //应收总计
TotalDiscountMoney: false, //优惠总计
CardMoneyT: false, //计次卡冲销
CardMoneyC: false, //储值卡冲销
ReceiptsMoney: false, //支付金额
brandSetting:false,
specSetting:false,
factoryNumber:false,
goodsNumber:false,
goodsPrice:false,
itemWorkHours:false,
itemPrice:false,
iStatusBarHeight:'',
ShowSetting:'',
goodsMoney:'',
Picture:false,//图片
imgList:[],
ItemMoneyReal:false,
goodsMoneyReal:false,
DiscountMoneyDetail:false,
DiscountMoneyDetailNullZero:false,
dmShow:false,
}
},
onLoad(opt) {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
this.id = opt.id
this.themeColor = uni.getStorageSync("themeColor");
this.userInfo = this.$store.state.userInfo;
this.ext = this.$common.getExtStoreId();
if (this.userInfo) {
this.getData()
this.myPower();
this.showPower();
} else {
this.$common.automaticlogin().then(val => {
this.userInfo = this.$store.state.userInfo;
this.wxOpenData = this.$store.state.wxOpenData;
this.themeColor = uni.getStorageSync("themeColor");
this.getData()
this.myPower();
this.showPower();
if(!this.userInfo){
this.authorizShow=true
}
})
}
},
methods: {
dmBtn(){
this.dmShow=!this.dmShow
},
seeImg(index){
console.log(index)
var imgs=[]
this.imgList.forEach(item=>{
imgs.push(item.imgPath)
})
uni.previewImage({
urls:imgs ,
current: index,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
},
//显示权限
showPower() {
this.$http('openweiXinCardInfoController/getShowSetting', {
}, 'GET').then(res => {
// 权限
// FaultDescription:false,//故障描述
// RepairDescription:false,//维修建议
// Comment:false,//备注
// ItemMoney:false,//项目、商品金额
// ItemComment:false,//项目备注
// GoodsComment:false,//商品备注
// AmountMoney:false,//应收总计
// TotalDiscountMoney:false,//优惠总计
// CardMoneyT:false,//计次卡冲销
// CardMoneyC:false,//储值卡冲销
// ReceiptsMoney:false,//支付金额
this.ShowSetting=res.data
var list = res.data
list.forEach((item, index) => {
if (item.fieldValue == 'FaultDescription') {
this.FaultDescription = item.isChecked
}
if (item.fieldValue == 'RepairDescription') {
this.RepairDescription = item.isChecked
}
if (item.fieldValue == 'Comment') {
this.Comment = item.isChecked
}
if (item.fieldValue == 'ItemMoney') {
this.ItemMoney = item.isChecked
}
if (item.fieldValue == 'ItemComment') {
this.ItemComment = item.isChecked
}
if (item.fieldValue == 'GoodsComment') {
this.GoodsComment = item.isChecked
}
if (item.fieldValue == 'AmountMoney') {
this.AmountMoney = item.isChecked
}
if (item.fieldValue == 'CardMoneyT') {
this.CardMoneyT = item.isChecked
}
if (item.fieldValue == 'CardMoneyC') {
this.CardMoneyC = item.isChecked
}
if (item.fieldValue == 'ReceiptsMoney') {
this.ReceiptsMoney = item.isChecked
}
if (item.fieldValue == 'TotalDiscountMoney') {
this.TotalDiscountMoney = item.isChecked
}
if (item.fieldValue == 'brand') {
this.brandSetting = item.isChecked
}
if (item.fieldValue == 'spec') {
this.specSetting = item.isChecked
}
if (item.fieldValue == 'factoryNumber') {
this.factoryNumber = item.isChecked
}
if (item.fieldValue == 'goodsNumber') {
this.goodsNumber = item.isChecked
}
if (item.fieldValue == 'goodsPrice') {
this.goodsPrice = item.isChecked
}
if (item.fieldValue == 'itemWorkHours') {
this.itemWorkHours = item.isChecked
}
if (item.fieldValue == 'itemPrice') {
this.itemPrice = item.isChecked
}
if (item.fieldValue == 'goodsMoney') {
this.goodsMoney = item.isChecked
}
if (item.fieldValue == 'ItemMoneyReal') {
this.ItemMoneyReal = item.isChecked
}
if (item.fieldValue == 'goodsMoneyReal') {
this.goodsMoneyReal = item.isChecked
}
if (item.fieldValue == 'DiscountMoneyDetail') {
this.DiscountMoneyDetail = item.isChecked
}
if (item.fieldValue == 'DiscountMoneyDetailNullZero') {
this.DiscountMoneyDetailNullZero = item.isChecked
}
if(item.fieldValue =='Picture'){
this.Picture = item.isChecked
if(item.isChecked){
this.queryBillInsurancePolicy()
}
}
})
})
},
queryBillInsurancePolicy(){
this.$http('openweiXinCardInfoController/queryBillInsurancePolicy', {
sheetID:this.id
}, 'GET').then(res => {
this.imgList=res.data
})
},
//评价权限
myPower() {
this.$http('openMiniEvaluate/getEvaluateSetting', {
}, 'GET').then(res => {
// var list = res.data.Items
this.appraise = res.data
})
},
goAppraiseDetail(item) {
uni.navigateTo({
url: 'myAppraiseDetail?sheetId=' + this.orderData.billsheet.id
})
},
goAppraise(item) {
uni.navigateTo({
url: 'appraise?sheetID=' + this.orderData.billsheet.id + '&shopID=' + this.orderData.billsheet
.shopID
})
},
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.newCustomer){
uni.showModal({
title: '提示',
content: data.newCustomerMsg,
success: function(resTK) {
}
});
var token=res.data.token
data.loginInfo={}
data.loginInfo.token=token
this.$store.commit('mutationswxOpenData', data);
return false;
}
if (data.loginInfo) {
this.userInfo = data.loginInfo.openUser;
this.wxOpenData = data.loginInfo;
this.$store.commit('mutationswxOpenData', data)
this.$store.commit('mutationsuserInfo', this.userInfo)
this.getData()
}
})
},
map() {
console.log("打开地图")
var that = this;
if (!that.orderData.billsheet.lat || !that.orderData.billsheet.lng) {
uni.showToast({
title: '该店铺未设置定位',
icon: 'none',
duration: 3000
});
} else {
uni.openLocation({
latitude: Number(that.orderData.billsheet.lat),
longitude: Number(that.orderData.billsheet.lng),
name: that.orderData.billsheet.ShopName,
address: that.orderData.billsheet.Address,
success: function() {
console.log('success');
},
fail(err) {
console.log(err)
}
});
}
},
call() {
uni.makePhoneCall({
phoneNumber: this.orderData.billsheet.shopMobilePhone
});
},
getData() {
let that = this
uni.showLoading({
title: '加载中'
});
this.$http('openweiXinCardInfoController/queryConsumptionDetail', {
// lat: this.location.lat,
// lng: this.location.lng,
id: this.id,
}, 'POST').then(res => {
uni.hideLoading();
this.orderData = res.data;
console.log('data===', this.orderData);
})
},
//时间对比
getDateBeforeNow(stringTime) {
console.log("传参未格式化", stringTime);
stringTime = new Date(stringTime.replace(/-/g, '/'))
// 统一单位换算
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var week = day * 7;
var month = day * 30;
var year = month * 12;
var time1 = new Date().getTime(); //当前的时间戳 console.log("当前时间", time1);
// 对时间进行毫秒单位转换 var time2 = new Date(stringTime).getTime(); //指定时间的时间戳
console.log("传过来的时间", time2);
var time = time1 - time2;
console.log("计算后的时间", time);
var result =
null; // if (time < 0) { // // alert("传过来的时间的时间不能晚于当前时间！"); // result = stringTime; // } else if (time / year >= 1) {
// result = parseInt(time / year) + "年前";
// } else if (time / month >= 1) {
// result = parseInt(time / month) + "月前";
// } else if (time / week >= 1) { // result = parseInt(time / week) + "周前"; // } else if (time / day >= 1) {
// result = parseInt(time / day) + "天前";
// } else if (time / hour >= 1) { // result = parseInt(time / hour) + "小时前";
// } else if (time / minute >= 1) {
// result = parseInt(time / minute) + "分钟前"; // } else {
// result = "刚刚"; // }
if (time < 0) {
// alert("传过来的时间的时间不能晚于当前时间！");
result = -1;
} else if (time / day >= 0) {
result = parseInt(time / day); //多少天前
}
console.log("多少天前", result);
return result;
},
goback() {
uni.navigateBack({})
},
},
onPullDownRefresh() {
this.getData()
this.myPower();
this.showPower();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style scoped>
.imgListBox{
display: flex;
flex-wrap: wrap;
}
.pictureImg{
width:170rpx;height: 170rpx;
margin: 2rpx;
}
.SalePrice{
color: #3C3C3C;
font-weight: 600;
}
.GoodsName{
font-size: 30rpx !important;
}
.itemWorkHoursBox{
display: flex;
justify-content: space-between;
font-size: 24rpx;
font-weight: 400;
color: #999999;
padding-top: 20rpx;padding-bottom: 20rpx;
}
.itemWorkHoursBoxleft{
display: flex;
}
.nopb{
padding-bottom: 0px;
}
.itemWorkHours{
padding-right: 50rpx;
}
.itemPrice{
}
.newboxTop{
display: flex;
padding-left: 20rpx;
font-size: 30rpx;
border-bottom: 1rpx solid #EEEEEE;
font-weight: bold;
padding-bottom: 15rpx;
}
.baoyangtis{
font-size: 26rpx;
padding-left: 20rpx;
}
.CarModel{
font-size: 26rpx;
padding: 15rpx 20rpx;
}
.baoyangtis{
padding: 15rpx 20rpx 0 15rpx;
}
.box {
min-height: 100vh;
background: #F4F5F7;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.contentBox {
background: #F4F5F7;
padding-bottom: 100rpx;
}
.top {
height: 190rpx;
background: #FF0000;
}
.stateBox {
display: flex;
}
.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;
}
.shopBox2{
padding: 30rpx 0rpx;
margin: 0rpx 24rpx;
margin-top: -60rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
}
.shopBox2 .informationTxt {
width: 350rpx;
}
.shopBox {
display: flex;
padding: 30rpx 20rpx;
margin: 0rpx 24rpx;
margin-top: 20rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
}
.shopCont {
width: 470rpx;
/* padding-left: 20rpx; */
}
.shopName {
font-size: 30rpx;
font-weight: bold;
color: #3C3C3C;
line-height: 45rpx;
}
.Address {
color: #999999;
font-size: 24rpx;
margin-top: 10rpx;
}
.shopRihgtTxt {
color: #999999;
font-size: 24rpx;
}
.shopRightBox {
padding-left: 28rpx;
}
.peopleCont {
font-size: 28rpx;
color: #3C3C3C;
padding-left: 20rpx;
}
.people {
display: flex;
padding-left: 20rpx;
padding-top: 30rpx;
padding-bottom: 36rpx;
}
.PlateNumberBox {
display: flex;
padding-left: 20rpx;
padding-bottom: 30rpx;
}
.PlateNumbercx {
font-size: 28rpx;
color: #3C3C3C;
padding-left: 20rpx;
}
.PlateNumber {
width: 130rpx;
height: 32rpx;
border-radius: 4rpx;
border: 1px solid #F19D01;
line-height: 32rpx;
text-align: center;
font-size: 22rpx;
color: #F19D01;
margin-left: 26rpx;
}
.PlateNumberBoxTop {
display: flex;
}
.CarModel {
font-size: 26rpx;
color: #999999;
padding-left: 20rpx;
padding-top: 6rpx;
padding-right: 20rpx;
padding-bottom: 15rpx;
width: 600rpx;
}
.detailedBox {
background: #FFFFFF;
border-radius: 10px;
margin: 20rpx 24rpx;
padding-bottom: 20rpx;
}
.itemBox {
margin-top: 20rpx;
}
.carMes {
padding: 23rpx 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom: 1rpx solid #EEEEEE;
}
.plate {
font-size: 30rpx;
color: #3C3C3C;
font-weight: bold;
margin-right: 20rpx;
}
.mileage {
font-size: 24rpx;
color: #F19D01;
padding: 0rpx 10rpx;
border: 1rpx solid #F19D01;
border-radius: 4rpx;
height: 36rpx;
}
.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 {
padding: 20rpx 20rpx 0rpx;
}
.detailedImg {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.detailedName {
font-size: 30rpx;
color: #3C3C3C;
font-weight: 500;
}
.kaColor {
background: #F19D01;
border-radius: 4rpx;
color: #FFFFFF;
font-size: 24rpx;
margin-right: 8rpx;
padding: 3rpx 5rpx;
}
.qty {
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
.secondBox {
display: flex;
/* padding: 20rpx 0rpx; */
justify-content: space-between;
align-items: baseline;
border-bottom: 1rpx solid #EEEEEE;
}
.noLine {
border-bottom: 0 solid #FFFFFF;
}
.comment {
margin-right: 20rpx;
font-size: 24rpx;
font-weight: 400;
color: #999999;
flex-grow: 1;
padding: 20rpx 0rpx;
}
.secondRight {
display: flex;
justify-content: flex-end;
align-items: baseline;
}
.grayPrice {
font-size: 24rpx;
font-weight: 400;
color: #999999;
text-decoration: line-through;
}
.price {
font-size: 26rpx;
font-weight: 500;
/* color: #FF0000; */
display: flex;
color: #3C3C3C;
align-items: center;
}
span {
font-size: 24rpx;
}
.goodTop {
display: flex;
justify-content: space-between;
}
.goodscost {
background: #FFFFFF;
border-radius: 10px;
margin: 20rpx 24rpx;
padding-bottom: 20rpx;
}
.goodscostLine {
display: flex;
justify-content: space-between;
font-size: 26rpx;
padding: 15rpx 20rpx;
color: #333333;
}
.goodsCostNum {
color: #FF0000;
font-weight: 500;
font-size: 36rpx;
}
.goodsCostNumJsfs{
color: #333333;
}
.goodsCostNum3{
font-weight: 500;
}
.information {
width: 702rpx;
background: #FFFFFF;
border-radius: 10px;
margin-left: 24rpx;
margin-top: 20rpx;
padding: 0rpx 0 15rpx 0;
}
.informationLine {
display: flex;
font-size: 26rpx;
padding: 15rpx 20rpx;
justify-content: space-between;
}
.informationTxt {
width: 200rpx;
color: #999999;
}
.informationNum {
color: #333333;
width: calc(100vw - 200rpx);
text-align: right;
}
.copyBtn {
width: 86rpx;
height: 40rpx;
background: #F4F5F7;
border-radius: 20rpx;
font-size: 24rpx;
color: #333333;
text-align: center;
line-height: 40rpx;
margin-left: 20rpx;
}
.orderBottom {
width: 750rpx;
height: 98rpx;
background: #FFFFFF;
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: flex-end;
}
.cancelBtn {
width: 150rpx;
height: 56rpx;
border-radius: 36rpx;
border: 2rpx solid #DDDDDD;
text-align: center;
line-height: 56rpx;
font-size: 28rpx;
color: #3C3C3C;
margin-top: 21rpx;
margin-right: 16rpx;
margin-left: 20rpx;
}
.payBtn {
width: 150rpx;
height: 56rpx;
border-radius: 36rpx;
border: 2rpx solid #FF4F00;
text-align: center;
line-height: 56rpx;
font-size: 28rpx;
color: #FF4F00;
margin-top: 21rpx;
margin-right: 16rpx;
margin-left: 20rpx;
}
.timeBox2 {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
.timeLeftActive {
background: #FFFFFF;
}
.timeMain {
width: 100vw;
height: 70vh;
margin-top: 30vh;
background: #FFFFFF;
border-radius: 24rpx 24rpx 0px 0px;
}
.timesfNo {
background: #F5F5F5;
}
.timesfActive {
background: #FF4F00;
}
.timesfActive .timeSfNum {
color: #FFFFFF;
}
.timesfActive .timeyy {
color: #FFFFFF;
}
.topBox {
padding: 20rpx 24rpx;
}
.timeTop {
display: flex;
line-height: 90rpx;
padding-left: 24rpx;
padding-right: 24rpx;
justify-content: space-between;
}
.timeTopTitle {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #3C3C3C;
}
.close {
color: #999999;
font-size: 30rpx;
padding-left: 30rpx;
}
.timeCont {
height: calc(70vh - 210rpx);
}
.timeSv {
height: calc(70vh - 210rpx);
}
.timeLeft2 {
width: 162rpx;
background: #F4F5F7;
border-top: 1px soid #F4F5F7;
border-right: 1px soid #F4F5F7;
}
.timeRight2 {
width: 588rpx;
}
.timesf {
width: 165rpx;
height: 98rpx;
border-radius: 7rpx;
border: 2rpx solid #EEEEEE;
text-align: center;
margin-left: 20rpx;
margin-bottom: 24rpx;
}
.timeBottom {
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
display: flex;
align-items: center;
}
.timerightBox {
display: flex;
flex-wrap: wrap;
}
.timeCont {
display: flex;
}
.timeSfNum {
color: #666666;
font-size: 28rpx;
padding-top: 15rpx;
}
.timeyy {
font-size: 24rpx;
color: #999999;
}
.timecomplete {
width: 690rpx;
height: 74rpx;
background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
border-radius: 37rpx;
line-height: 74rpx;
text-align: center;
font-size: 30rpx;
color: #FFFFFF;
margin-left: 30rpx;
}
.timeleftLine {
font-size: 30rpx;
color: #999999;
text-align: center;
padding: 28rpx 10rpx;
border-bottom: 1px solid #EEEEEE;
}
.yuyueBox {
background: #FFFFFF;
border-radius: 10rpx;
margin-left: 24rpx;
margin-right: 24rpx;
}
.yuyueTime {
display: flex;
padding-left: 20rpx;
padding-top: 30rpx;
padding-bottom: 36rpx;
align-items: center;
}
.yuyueState {
display: flex;
padding-left: 20rpx;
padding-top: 30rpx;
padding-bottom: 36rpx;
}
.maBox {
display: flex;
justify-content: space-between;
padding: 24rpx 20rpx;
}
.querenMa {
margin: 20rpx 0;
padding-bottom: 30rpx;
}
.maBoximg {
width: 308rpx;
height: 308rpx;
margin: 30rpx 197rpx;
}
.rightShou {
display: flex;
justify-content: flex-start;
align-items: center;
}
.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;
}
.bottom {
position: fixed;
width: 100%;
padding: 20rpx 24rpx;
right: 0;
bottom: 0;
background: #ffffff;
font-size: 28rpx;
display: flex;
justify-content: flex-end;
height: 58rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.ping {
text-align: center;
/* color: #FF4F00; */
color: #666666;
width: 150rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 36rpx;
border: 2rpx solid #DDDDDD;
}
.kan {
text-align: center;
color: #666666;
width: 150rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 36rpx;
border: 2rpx solid #DDDDDD;
}
.goodscostTxt{
color: #999999;
}
.DiscountMoneyIcon{
width: 30rpx;height: 20rpx; margin-top: 10rpx;
margin-left: 10rpx;
}
.DiscountMoneyTop{
display: flex;
}
.yhprice{
color: #FF0000;
}
.yhmx .goodsCostNum3{
color: #666;
font-weight: 400;
}
</style>