<template>
<view class="box">
<view class="top">
<view class="nav" >
<view class="zdyNavLeft">
<image src="../../static/img/nav_icon_back.png" mode="" class="backImg" @click="goback"></image>
<!-- <image src="../../static/img/baigoindex22.png" mode="" class="goIndexImg" @click="goIndex()"></image> -->
</view>
<view class="zdyNavTitle">订单详情</view>
<view style="width: 92rpx;"></view>
</view>
<view style="height: 44px;"></view>
<view class="SheetState" v-if="orderData.sheetState==1">等待付款</view>
<view class="SheetState" v-if="orderData.sheetState==2">待服务</view>
<view class="SheetState" v-if="orderData.sheetState==3||orderData.sheetState==5">订单已完成</view>
<view class="SheetState" v-if="orderData.sheetState==0">订单已取消</view>
<view class="SheetState" v-if="orderData.sheetState==4">订单已完成</view>
</view>
<view v-if="orderData">
<!-- 服务确认码 -->
<view class="orderTop" v-if="false"><!-- v-if="orderData.sheetState==2 || orderData.sheetState==3 || orderData.sheetState==4 || orderData.sheetState==5" -->
<view class="maBox">
<view class="timeLeft">
<span>服务确认码</span>
</view>
<view style="text-decoration:line-through; color: #999999; font-size: 26rpx;"
v-if="orderData.sheetState==3 || orderData.sheetState==4 || orderData.sheetState==5 && orderData.serviceCode!=null">{{orderData.serviceCode}}</view>
<view class="rightShou" v-if="orderData.sheetState==2">
<view class="timeRight" style="color: #FF2400;" @click="showMa">收起</view>
<image src="../../static/img/icon_arrow_up_orange.png" style="width: 17rpx; height: 11rpx; margin-left:10rpx ;">
</image>
</view>
<view style="color: #999999; font-size: 26rpx;" v-if="orderData.sheetState==3 || orderData.sheetState==4 || orderData.sheetState==5">已使用</view>
</view>
<!-- 确认码 -->
<view class="querenMa" v-if="isShowMa==true && orderData.sheetState==2">
<view style="color: #FF2400; font-size: 24rpx; text-align: center;">请到店出示券码即可开始服务</view>
<view class="maBoximg">
<tki-qrcode cid="qrcode1" ref="qrcode" :val="orderData.serviceCode" :size="308" :unit="unit"
:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
:loadMake="loadMake" :usingComponents="true" @result="qrR" />
</view>
<view style="color: #333333; font-size: 26rpx; font-weight: bold; text-align: center;">
{{orderData.serviceCode}}
</view>
</view>
</view>
<view class="orderTop">
<view class="timeBox">
<view class="timeLeft">
<span v-if="orderData.sheetState==1||orderData.sheetState==2||orderData.sheetState==0">预约到店：{{orderData.orderTime}}</span>
<span v-else>服务时间：{{orderData.serviceTime}}</span>
<image v-if="orderData.sheetState==2&&iOSInfo.indexOf('P003')!=-1" src="../../static/img/icon_edit.png" mode="" class="timeEditImg" @click="timeShowClick"></image>
</view>
<!-- <view class="timeRight" @click="qrcodeClick">订单码</view> -->
</view>
<view class="shopBox">
<image src="../../static/img/newshop.png" mode="" class="shopBoximg1"></image>
<view class="shopCont">
<view class="shopName">{{orderData.shopName}}</view>
</view>
<!-- <view class="shopRightBox" @click="map">
<view> <image src="../../static/img/icon_ditu2.png" mode="" class="shopRightImg"></image> </view>
<view class="shopRihgtTxt">地图</view>
</view>
<view class="shopsx"></view>
<view class="shopRightBox" @click="call">
<view> <image src="../../static/img/icon_phone2.png" mode="" class="shopRightImg"></image> </view>
<view class="shopRihgtTxt">电话</view>
</view> -->
</view>
<view class="people">
<image src="../../static/img/icon_ren.png" mode="" class="shopBoximg"></image>
<view class="peopleCont">{{orderData.contactName}}</view>
<view class="peopleCont" style="padding-left: 20rpx;">{{orderData.contactPhone}}</view>
</view>
<view class="PlateNumberBox">
<image src="../../static/img/icon_che.png" mode="" class="shopBoximg"></image>
<view class="">
<view class="PlateNumberBoxTop">
<view class="PlateNumbercx"> <span v-if="orderData.carInfo">{{orderData.carInfo.brand}}</span>
<span style="padding-left: 20rpx;" v-if="orderData.carInfo">{{orderData.carInfo.series}}</span>
</view>
<view class="PlateNumber">{{orderData.plateNumber}}</view>
</view>
<view class="CarModel">{{orderData.carModel}}</view>
</view>
</view>
</view>
<view style="margin-top: -40rpx;"></view>
<!-- 商品明细-->
<view class="detailedBox itemBox" v-if="orderData.goodsList.length!=0">
<view class="detailedTitle">商品明细</view>
<view class="detailedLineBox">
<view class="detailedLine" v-for="(item,index) in orderData.goodsList">
<view>
<image :src="item.Url" mode="" class="detailedImg" v-if="item.Url"></image>
<image src="../../static/img/noimg.png" mode="" class="detailedImg" v-else></image>
</view>
<view class="detailedCont">
<view class="detailedName">{{item.GoodsName}}</view>
<view class="detailedContBottom">
<span class="SalePrice">￥{{item.SalePrice}}</span>
<span>x{{item.SaleQty}}</span>
</view>
</view>
</view>
</view>
</view>
<!-- 商品明细-->
<!-- 项目明细 -->
<view class="detailedBox itemBox" v-if=" orderData.itemList.length!=0">
<view class="detailedTitle">项目明细</view>
<view class="detailedLineBox">
<view class="detailedLine" v-for="(item,index) in orderData.itemList">
<view>
<image :src="item.Url" mode="" class="detailedImg" v-if="item.Url"></image>
<image src="../../static/img/noitem.png" mode="" class="detailedImg" v-else></image>
</view>
<view class="detailedCont">
<view class="detailedName">{{item.ItemName}}</view>
<view class="detailedContBottom">
<span class="SalePrice">￥{{item.SalePrice}}</span>
<span>x1</span>
</view>
</view>
</view>
</view>
</view>
<!-- 项目明细 -->
<!-- 商品费 -->
<view class="goodscost">
<view class="goodscostLine">
<view class="goodscostTxt">商品费</view>
<view class="goodsCostNum">￥{{orderData.goodsMoney}}</view>
</view>
<view class="goodscostLine">
<view class="goodscostTxt">项目费</view>
<view class="goodsCostNum">￥{{orderData.itemMoney}}</view>
</view>
<view class="goodscostLine">
<view class="goodscostTxt">优惠券优惠</view>
<view class="goodsCostNum">-￥{{orderData.couponMoney}}</view>
</view>
<view class="goodscostLine">
<view class="goodscostTxt">实付款</view>
<view class="goodsCostNum" style="color: #FF4F00;">￥{{orderData.payMoney}}</view>
</view>
</view>
<!-- 商品费 -->
<!-- 订单信息 -->
<view class="information">
<view class="detailedTitle">订单信息</view>
<view class="informationLine">
<view class="informationTxt">订单编号：</view>
<view class="informationNum">{{orderData.code}}</view>
<view class="copyBtn" @click="copy(orderData.code)">复制</view>
</view>
<view class="informationLine">
<view class="informationTxt">下单人：</view>
<view class="informationNum">{{orderData.memberName}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">下单时间：</view>
<view class="informationNum">{{orderData.createTime}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">下单备注：</view>
<view class="informationNum">{{orderData.comment}}</view>
</view>
</view>
<!-- 订单信息 -->
<!-- 支付信息 -->
<view class="information">
<view class="detailedTitle">支付信息</view>
<view class="informationLine">
<view class="informationTxt">支付状态：</view>
<view class="informationNum" v-if="orderData.sheetState==2||orderData.sheetState==3||orderData.sheetState==4">已支付</view>
<view class="informationNum" v-if="orderData.sheetState==1">未支付</view>
</view>
<view class="informationLine">
<view class="informationTxt">支付方式：</view>
<view class="informationNum">{{orderData.payMethod==1?'线上支付':'线下支付'}}</view>
</view>
<view class="informationLine">
<view class="informationTxt">支付时间：</view>
<view class="informationNum" v-if="orderData.payTime">{{orderData.payTime}}</view>
</view>
</view>
<!-- 支付信息 -->
<view style="height: 150rpx;"></view>
<!-- <view class="orderBottom" v-if="orderData.SheetState==1||orderData.SheetState==2">
<view class="payBtn" v-if="orderData.SheetState!=2" @click="orderPay">立即支付</view>
<view class="cancelBtn" style="margin-right: 16rpx;" @click="cancelOrder">取消订单</view>
</view>
<view class="orderBottom" v-if="orderData.EvaluateState==1">
<view class="cancelBtn" style="margin-right: 16rpx;" @click="gopingjia">查看评价</view>
</view>
<view class="orderBottom" v-if="orderData.EvaluateState==0&&orderData.EState==1">
<view class="payBtn" @click="evaluate">立即评价</view>
</view> -->
<view class="orderBottom" v-if="orderData.sheetState==2">
<view class="cancelBtn" style="margin-right: 16rpx;" v-if="iOSInfo.indexOf('P004')!=-1||!iOSInfo" @click="goHeXiao">核销</view>
</view>
<!-- 二维码 -->
<view v-if="qrcodeShow" class="qrcodeBox" @click="qrcodeShow=false">
<view @click.stop="qrc">
<tki-qrcode cid="qrcode1" ref="qrcode" :val="qrcodeTopVal" :size="size" :unit="unit"
:pdground="pdground" :icon="icon" :iconSize="iconsize" pdground="#000000"
:lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR"/>
</view>
</view>
<!-- 二维码 -->
<!-- 地图 -->
<!-- 地图 -->
<!-- 预约时间 -->
<view class="timeBox2" v-if="timeShow&&OrderTimes" @click="timeShow=false">
<view class="timeMain">
<view class="timeTop">
<view class="timeTopTitle">选择预约时间</view>
<view class="close" @click="timeShow=false">X</view>
</view>
<view class="timeCont">
<view class="timeLeft2">
<scroll-view scroll-y="true" class="timeSv">
<view class="timeleftLine" v-for="(item,index) in OrderTimes"
:class="{timeLeftActive:index==orderTimeIndex1}"
@click.stop="orderTimeIndex1=index,orderTimeIndex2=-1"
>{{item.date.substring(5,10)}}</view>
</scroll-view>
</view>
<view class="timeRight2">
<scroll-view scroll-y="true" class="timeSv">
<view class="timerightBox">
<view class="timesf" v-for="(item,index) in OrderTimes[orderTimeIndex1].timeList"
:class="{timesfNo:item.type!=1,timesfActive:index==orderTimeIndex2}"
@click.stop="timeSfCk(item,index)"
>
<view class="timeSfNum">{{item.time}}</view>
<view class="timeyy" v-if="item.type==1">可预约</view>
<view class="timeyy" v-if="item.type==2">已约满</view>
<view class="timeyy" v-if="item.type==3">已过期</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="timeBottom">
<view class="timecomplete" @click="timeCk">完成</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
export default {
components: {
tkiQrcode
},
data() {
return {
location:'',
isload:false,
id:'',
iStatusBarHeight:'',
orderData:'',
type:'',
onval: true, // val值变化时自动重新生成二维码
loadMake: true, // 组件加载完成后自动生成二维码
size:500,
qrcodeShow:false,
qrcodeTop:'-100vh',
qrcodeTopVal:'',
ifShow: false,
val: '二维码', // 要生成的二维码值
unit: 'upx', // 单位
background: '#b4e9e2', // 背景色
foreground: '#309286', // 前景色
pdground: '#333333', // 角标色
icon: '', // 二维码图标
iconsize: 40, // 二维码图标大小
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
src: '' ,// 二维码生成后的图片地址或base64
timeShow:false,
orderTime:'',
OrderTimes:'',
orderTimeIndex1:0,
orderTimeIndex2:-1,
isShowMa: true,
iOSInfo:'',
}
},
onLoad(opt) {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
this.location=uni.getStorageSync("location");
this.id=opt.id
this.getData()
this.type=opt.type;
this.getOrderTimes();
var qxnum = uni.getStorageSync("quanxian");
if (qxnum == 1) {
this.iOSInfo = JSON.parse(JSON.stringify(window.iOSInfo));
}else if(qxnum==2){
window.getAndroid=this.getAndroid;
}
},
onShow() {
if(this.id){
this.getData()
}
},
methods: {
getAndroid(e){
this.iOSInfo=e
},
showMa() {
this.isShowMa = !this.isShowMa
},
gopingjia(){
uni.navigateTo({
url:'../me/myAppraiseDetail?id='+this.id
})
},
timeShowClick(){
if(this.OrderTimes){
this.timeShow=true
}else{
uni.showToast({
title: '当前店铺尚未设置可预约时间',
icon:'none',
duration: 3000
});
}
},
goHeXiao() {
console.log(this.id)
//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.europewriteoff.postMessage({
"id": this.id ? this.id : ''
})
}
} else if (android) {
window.android.europewriteoff(this.id)
}
},
map(){
console.log("打开地图")
var that=this;
if(!that.orderData.Lat||!that.orderData.Lng){
uni.showToast({
title: '该店铺未设置定位',
icon:'none',
duration: 3000
});
}else{
uni.openLocation({
latitude:Number(that.orderData.Lat) ,
longitude:Number( that.orderData.Lng),
name:that.orderData.ShopName,
address:that.orderData.Address,
success: function () {
console.log('success');
},
fail(err) {
console.log(err)
}
});
}
},
qrR(){
},
qrc(){
console.log(111)
},
call(){
uni.makePhoneCall({
phoneNumber: this.orderData.contactPhone
});
},
qrcodeClick(){
this.ifShow=true;
this.qrcodeShow=true;
this.qrcodeTopVal=this.orderData.Code;
//this.$refs.qrcode._makeCode()
},
copy(txt){
uni.setClipboardData({
data: txt,
success: function () {
uni.showToast({
title: '复制成功',
icon:'none',
duration: 2000
});
}
});
},
getData(){
uni.showLoading({ title: '加载中'});
this.$http('h5BmSheet/h5BmSheetDetail', {
//lat:this.location.lat,
// lng:this.location.lng,
id:this.id,
},'GET').then(res => {
uni.hideLoading();
this.orderData=res.data;
})
},
goback(){
//console.log("1111")
//return false;
if(this.type==2){
uni.navigateBack({})
}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()
}
}
},
evaluate(){
uni.navigateTo({
url:'evaluate?sheetID='+this.id+'&shopID='+this.orderData.ShopID
})
},
goIndex(){
uni.switchTab({
url:'../index/index'
})
},
cancelOrder(){
var that=this;
uni.showModal({
title: '提示',
content: '确定要取消订单吗',
success: function (res) {
if (res.confirm) {
uni.showLoading({ title: '加载中'});
that.$http('miniAppMyBMemberCar/updateBMSheetState', {
id:that.orderData.ID
},'POST').then(res => {
uni.hideLoading();
if(that.orderData.SheetState!=1){
uni.showModal({
title: '订单取消成功，请等待银行处理',
content: '金额将原路退还至您的账户。若您使用了优惠券，将退至您的账户',
showCancel:false,
success: function (res) {
that.getData()
}
});
}else{
uni.showModal({
title: '提示',
content: '订单取消成功',
showCancel:false,
success: function (res) {
that.getData()
}
});
}
// that.getData()
})
} else if (res.cancel) {
}
}
});
},
orderPay(){
uni.showLoading({ title: '加载中'});
var that=this;
this.$http('miniApp/maintainOrder/orderPay', {
sheetID:this.orderData.ID
},'POST').then(res => {
uni.hideLoading();
var payInfo=JSON.parse(res.data.payInfo)
uni.requestPayment({
provider: 'wxpay',
// timeStamp: String(Date.now()),
timeStamp:payInfo.timeStamp,
nonceStr: payInfo.nonceStr,
package: payInfo.package,
signType: payInfo.signType,
paySign: payInfo.paySign,
success: function (res) {
console.log('success:' + JSON.stringify(res));
uni.showToast({
title: '支付成功',
icon:'none',
duration: 2000
});
that.getData()
},
fail: function (err) {
console.log('fail:' + JSON.stringify(err));
}
});
})
},
timeSfCk(item,index){
if(item.type==1){
this.orderTimeIndex2=index;
var orderTime=this.OrderTimes[this.orderTimeIndex1].date +' '+ item.time
this.orderTime=orderTime
}
},
timeCk(){
this.timeShow=false;
var that=this;
this.$http('h5BmSheet/h5UpdateTimeOfAppointment', {
id:this.id,
billDate:this.orderTime
},'POST').then(res => {
if(res.code==1){
uni.showToast({
title: '修改成功',
icon:'none',
duration: 2000
});
}
setTimeout(() => {
that.getData()
}, 2000);
})
},
getOrderTimes(){
this.$http('h5BmSheet/getOrderTimes', {
},'GET').then(res => {
this.OrderTimes=res.data;
})
}
},
onPullDownRefresh() {
this.getOrderTimes()
this.getData()
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style scoped>
.box{
min-height: 100vh;
background: #F4F5F7;
}
.status_bar{
background: #FF4F00;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 1111;
}
.qrcodeBox{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.7);
}
.zdyNavLeft {
display: flex;
align-items: center;
}
.top{
width: 750rpx;
height: 242rpx;
background: #3F90F7;
/* background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%); */
}
.nav{
line-height: 44px;
font-size: 34rpx;
/* font-weight: 600; */
display: flex;
justify-content: space-between;
/* color: #FFFFFF; */
position: fixed;
width: 100vw;
left: 0;
z-index: 1111;
background: #FFFFFF;
}
.backImg{
width: 44rpx;
height: 44rpx;
margin-left: 10rpx;
margin-right: 20rpx;
}
.zdyNavTitle {
height: 44px;
background: #FFFFFF;
text-align: center;
font-size: 34rpx;
line-height: 44px;
}
.SheetState{
font-size: 34rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
padding-top: 40rpx;
}
.orderTop{
background: #FFFFFF;
border-radius: 10rpx;
margin: 20rpx 24rpx;
}
.timeEditImg{
width: 25rpx;height: 25rpx;padding-left: 20rpx;
}
.timeLeft{
font-size: 28rpx;
color: #3C3C3C;font-weight: 500;
}
.timeRight{
font-size: 26rpx;
color: #3F90F7;
}
.timeBox{
display: flex;
justify-content: space-between;
padding: 24rpx 20rpx;
border-bottom: 1px solid #EEEEEE;
}
.orderTop{
position: relative;
top: -44rpx;
}
.shopBoximg{
width: 40rpx;height: 40rpx;
}
.shopBoximg1{
width: 40rpx;height: 44rpx;
}
.shopRightImg{
width: 52rpx;height: 38rpx;
}
.shopsx{
width: 1px;
height: 50rpx;
background: #EEEEEE;
margin-top: 30rpx;
margin-left: 28rpx;
}
.shopBox{
display: flex;
padding: 30rpx 20rpx 24rpx 20rpx;
}
.shopCont{
width: 418rpx;padding-left: 20rpx;
}
.shopName{
font-size: 28rpx;
color: #3C3C3C;
font-weight: 500;
}
.Address{
color: #999999;font-size: 26rpx;padding-top: 10rpx;
}
.shopRihgtTxt{
color: #999999;font-size: 22rpx;padding-top: 5rpx;
}
.shopRightBox{
padding-top: 30rpx;
padding-left: 28rpx;
}
.peopleCont{
font-size: 28rpx;
font-weight: 500;
color: #3C3C3C;
padding-left: 20rpx;
}
.people{
display: flex;
padding-left: 20rpx;
padding-bottom: 24rpx;
}
.PlateNumberBox{
display: flex;padding-left: 20rpx;padding-bottom: 30rpx;
}
.PlateNumbercx{
font-size: 28rpx;
font-weight: 500;
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{
width: 702rpx;
background: #FFFFFF;
border-radius: 10px;
margin-left: 24rpx;
margin-top: -60rpx;
padding-bottom: 20rpx;
}
.itemBox{
margin-top: 20rpx;
}
.detailedTitle{
font-size: 32rpx;
color: #3C3C3C;
padding-left: 20rpx;padding-top: 30rpx;
font-weight: 600;
padding-bottom: 10rpx;
}
.detailedLine{
display: flex;
padding-left: 20rpx;
padding-top: 40rpx;
}
.detailedImg{
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.detailedCont{
padding-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.detailedName{
font-size: 26rpx;
color: #3C3C3C;
}
.detailedContBottom{
display: flex;
justify-content: space-between;
font-size: 26rpx;
color: #999999;
width: 500rpx;
line-height: 40rpx;
}
.SalePrice{
font-size: 32rpx;
font-weight: 500;
color: #3C3C3C;
}
.goodscost{
width: 702rpx;
background: #FFFFFF;
border-radius: 10px;
margin-left: 24rpx;
margin-top: 20rpx;
padding: 15rpx 0;
}
.goodscostLine{
display: flex;
justify-content: space-between;
font-size: 28rpx;
padding: 20rpx 20rpx;
color: #666666;
}
.goodsCostNum{
color: #3C3C3C;
}
.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;
}
.informationTxt{
width: 150rpx;
color: #666666;
}
.informationNum{
color: #333333;
}
.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;
}
.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: 40rpx;
}
.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: #3F90F7;
}
.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%); */
background: #3F90F7;
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;
}
.goIndexImg{
width: 92rpx;
height: 88rpx;
}
.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;
}
</style>