zhywpt-sp/subpackage/orders/order-details-new.vue

<!-- 新办订单-订单详情 -->
<template>
	<navBar title="订单详情" navbgClass="nav-bgXin" fontColor='#fff' :scrollTop="scrollTop"></navBar>
	<view class="bg-img">
		<image :src="`${$imgUrl}order/bg-order.png`" mode="scaleToFill" class="icon"></image>
	</view>
	<view class="content">
		<view class="status">
			<text v-if="state.orderInfo.orderStep == 12 && state.reshipment=='1'">补货中</text>
			<text
				v-if="state.orderInfo.orderStatus == OrderStatus.已取消 && state.orderInfo.remoteStatus=='7'">审核不通过</text>
			<text v-else-if="state.orderInfo.orderStep == 35">下单</text>
			<text
				v-else>{{state.orderInfo.orderStatus == OrderStatus.已取消 ? '已取消' : $util.getOrderStatusName(state.orderInfo.orderStep)}}</text>
		</view>
		<view>
			<text>创建时间：</text>
			<text>{{getOrderTime(state.orderInfo.insertTime)}}</text>
		</view>
		<view class="order">
			<view class="num">
				<text>订单号：</text>
				<text>{{state.orderInfo.orderNo}}</text>
			</view>
			<view class="name" v-if="$util.getOrderStatusName(state.orderInfo.orderStep)=='已完成'">
				<text>付款时间：</text>
				<text>{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
			</view>
			<view class="name" v-else>
				<text>产品名称：</text>
				<text>{{state.orderInfo.productName ?state.orderInfo.productName: ''}}</text>
			</view>
		</view>
		<view class="message" v-if="state.orderInfo.orderInfoExt">
			<view class="message-top1">
				<view class="msg">
					<view class="vehiclePlate">
						<text>快递单号：</text>
						<text>{{state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt: ''}}</text>
						<image style="width: 36rpx;height: 36rpx;position: relative;top: -4rpx;"
							:src="`${$imgUrl}order/copy-template.png`" @click="copy(state.orderInfo.orderInfoExt)">
						</image>
					</view>
					<view>
						<text>物流公司：</text>
						<text>{{state.orderInfo.orderInfoExt?getCodeName('快递物流公司',state.orderInfo.orderInfoExt.courierCompany): ''}}</text>
					</view>
					<view>
						<text>发货时间：</text>
						<text>{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.deliveryTime:"")}}</text>
					</view>
					<view>
						<text>收货时间：</text>
						<text>{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.receivingTime:"")}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="message" v-if="state.orderInfo.cardId">
			<view class="message-top1">
				<image :src="`${$imgUrl}order/obu.png`" mode=""></image>
				<view class="msg">
					<view class="vehiclePlate">
						<text>卡号：</text>
						<text>{{state.orderInfo.cardId ?state.orderInfo.cardId: ''}}</text>
					</view>
					<view>
						<text>卡状态：</text>
						<text class="cardStatus">{{getETCStatusName(state.orderInfo.cardStatus)}}</text>
					</view>
					<view>
						<text>签号：</text>
						<text>{{state.orderInfo.obuId ?state.orderInfo.obuId: ''}}</text>
					</view>
					<view>
						<text>签状态：</text>
						<text class="cardStatus">{{getOBUStatusName(state.orderInfo.obuStatus)}}</text>
					</view>
					<view>
						<text>激活时间：</text>
						<text>{{getOrderTime(state.orderInfo.cardEnableTime)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="message">
			<view class="message-top">
				<image :src="`${$imgUrl}order/car.png`" mode=""></image>
				<view class="msg">
					<view class="vehiclePlate">
						<text>订单车牌：</text>
						<text>{{state.orderInfo.vehiclePlate}}</text>
					</view>
					<view>
						<text>所属类型：</text>
						<text>{{state.orderInfo.userType === 'UNIT_USER' ? '单位' : '个人'}}</text>
					</view>
					<view>
						<text>车辆类型：</text>
						<text>{{getCarTypeName(state.orderInfo.vanType)}}</text>
					</view>
					<view>
						<text>订单金额：</text>
						<text
							class="amount">￥{{state.orderInfo.amount / 100 ?state.orderInfo.amount / 100: '0.00'}}</text>
					</view>
				</view>
			</view>
			<view v-if="state.orderInfo.orderStatus == 'NORMAL'">
				<!-- 渠道线上按钮不展示 -->
				<view class="btns" v-if="!(state.orderInfo.orderSource == 'CHANNEL' && state.orderInfo.promotionModes == 1)">
					<view v-if=" state.orderInfo.orderSource == 'WECHAT' && (state.orderInfo.orderStep=='ORDER_INIT'||state.orderInfo.orderStep=='CUSTOMER_UPLOAD') " class="btn btn-primary"
						@click.stop="gotoEditUserOrUnitInfo(state.orderInfo)">继续申请</view>
					<view v-if="state.orderInfo.orderSource == 'WECHAT' && state.orderInfo.orderStep=='WAITING_ACTIVE' && state.orderInfo.shippingStatus == 'RECEIVED'" class="btn btn-primary" @click.stop="gotoReturnOrder(state.orderInfo)">申请退货</view>
					<view v-if="state.orderInfo.orderSource == 'WECHAT' && state.orderInfo.orderStep=='WAITING_ACTIVE' && state.orderInfo.shippingStatus == 'RECEIVED'" class="btn btn-primary" @click.stop="gotoExchangeOrder(state.orderInfo)">申请换货</view>
					<view v-if="state.orderInfo.orderSource == 'WECHAT' && state.orderInfo.orderStep=='WAITING_RECEIVE' && state.orderInfo.shippingStatus=='WAIT_RECEIVING'" class="btn btn-primary" @click.stop="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
					<view v-if="state.orderInfo.orderSource == 'WECHAT' && (state.orderInfo.orderStep=='WAITING_AUDIT' || state.orderInfo.orderStep=='WAITING_SEND') && state.orderInfo.shippingStatus=='WAIT_SHIPPING'" 
					class="btn btn-primary" @click.stop="gotoEditAddressNew(state.orderInfo)">修改地址</view>
						<!--//评价暂不上线
					<view v-if="state.orderInfo.canEvaluate== true" class="btn btn-primary" @click.stop="gotoEvaluateProduct(state.orderInfo)">去评价产品</view>-->
					<view v-if="state.orderInfo.orderSource == 'WECHAT' && (state.orderInfo.orderStep=='ORDER_INIT'||state.orderInfo.orderStep=='CUSTOMER_UPLOAD'||state.orderInfo.orderStep=='VEHICLE_UPLOAD'||state.orderInfo.orderStep=='ORDER_PAID'||state.orderInfo.orderStep=='ORDER_SIGNED'||state.orderInfo.orderStep=='WAITING_AUDIT'||state.orderInfo.orderStep=='AUDIT_FAIL'||state.orderInfo.orderStep=='WAITING_SEND')"
						class="btn btn-primary" @click.stop="gotoCancelOrder(state.orderInfo)">取消订单</view>
					<view v-if="state.orderInfo.orderStep=='VEHICLE_UPLOAD'" class="btn btn-primary" @click.stop="gotoOrderDetailsPay(state.orderInfo)">支付</view>
					<view v-if="state.orderInfo.orderStep=='WAITING_ACTIVE'" class="btn btn-primary" @click.stop="gotoActiveOrder(state.orderInfo)">去激活</view>
					<view v-if="state.orderInfo.orderStep=='ORDER_PAID'" class="btn btn-primary" @click.stop="gotoOrderSign(state.orderInfo)">签约</view>
				</view>
			</view>
			<view v-if="false" class="btn-view">
				<view class="btn-view"
					v-if="state.orderInfo.orderStatus == OrderStatus.正常 && state.orderInfo['orderSource'] !='SERVICE_HALL'">
					<!-- 信息填写未完成 -->
					<view class="btn-status"
						v-if="state.orderInfo.orderStep == OrderStatus['完成个人/单位信息上传'] || state.orderInfo.orderStep == OrderStatus.完成填写基本信息 || state.orderInfo.orderStep == OrderStatus.待支付3">
						<view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
						<view class="btn-green" @click="gotoEditUserOrUnitInfo(state.orderInfo)">继续申请</view>
					</view>

					<!-- 审核中/审核不通过 -->
					<view
						v-if="state.orderInfo.orderStep == OrderStatus.审核不通过 || state.orderInfo.orderStep == OrderStatus.待审核"
						class="btn-status">
						<view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
						<view class="btn space" @click="gotoEditUserOrUnitInfo(state.orderInfo)"
							v-if="state.orderInfo.orderStep == OrderStatus.审核不通过">修改资料</view>
						<!-- <view class="btn space" v-if="state.orderInfo.orderStep == OrderStatus.审核不通过"
							@click="gotoEditUserOrUnitInfo(state.orderInfo)">修改资料</view> -->
						<view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view>
					</view>
					<!-- 待支付 -->
					<view
						v-if="state.orderInfo.orderStep == OrderStatus['完成车辆信息上传/待支付'] || state.orderInfo.orderStep == OrderStatus.待支付2 "
						class="btn-status">
						<view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
						<view class="btn-green width-num-1" @click="gotoOrderDetailsPay(state.orderInfo)">支付</view>
					</view>
					<!-- 待签约-->
					<view v-if="state.orderInfo.orderStep == OrderStatus['已支付/待签约']" class="btn-status">
						<view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
						<view class="btn-green" @click="gotoOrderSign(state.orderInfo)">去签约</view>
					</view>
					<!-- 待发货 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.待发货" class="btn-status">
						<view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
						<view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view>
					</view>
					<!-- 待收货 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.待收货" class="btn-status">
						<!-- <view class="btn space" @click="gotoOrderDetails(state.orderInfo)">查看物流</view> -->
						<view class="btn space" @click.stop="gotoReplenishmentOrder(state.orderInfo)"
							v-if="state.orderInfo.deviceType == deviceType">申请补货</view>
						<view class="btn space" @click="gotoReturnOrder(state.orderInfo)" v-else>申请退货</view>
						<view class="btn-green space" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
						<view class="btn-green" @click.stop="closeOrder(state.orderInfo)"
							v-if="state.orderInfo.finishOrder">结束订单</view>
					</view>
					<!-- 待激活 -->
					<!-- 确认收货之后可以退换补 异地 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.待激活" class="btn-status">
					<!-- 	<view class="btn space" @click="gotoReturnOrder(state.orderInfo)"
							v-if="state.orderInfo.applyReturn || state.orderInfo.deviceType == deviceType">申请退货</view> -->
						<view class="btn space" @click="gotoReturnOrder(state.orderInfo)" v-if="state.orderInfo.shippingStatus == 'RECEIVED'">申请退货</view>
						<view class="btn space" @click="gotoExchangeOrder(state.orderInfo)" v-if="state.orderInfo.shippingStatus == 'RECEIVED'">申请换货</view>
						<view class="btn space" @click.stop="gotoReplenishmentOrder(state.orderInfo)"
							v-if="state.orderInfo.deviceType == deviceType">申请补货</view>
						<view class="btn-green space" @click="gotoActiveOrder(state.orderInfo)">去激活</view>
						<view class="btn-green" @click.stop="closeOrder(state.orderInfo)"
							v-if="state.orderInfo.finishOrder">结束订单</view>
					</view>

					<!-- 订单已结束 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.已结束 && state.orderInfo.isUseAgain"
						class="btn-status">
						<view class="btn-green" @click.stop="gotoAgainUseOrder(state.orderInfo)">再次使用订单</view>
					</view>
					<!-- 异地-邮寄地址填写 -->
					<view
						v-if="state.orderInfo.orderStep == OrderStatus.邮寄地址填写 && state.orderInfo.deviceType==deviceType"
						class="btn-status">
						<view class="btn-green" @click.stop="gotoAddressOrder(state.orderInfo)">邮寄地址填写</view>
					</view>
					<!-- 异地开始 -->
					<view v-if="state.orderInfo.orderStep == 31" class="btn-status">
						<view class="btn btn-green" @click="gotoReturnOrder(state.orderInfo)">退货</view>
					</view>
					<view v-if="state.orderInfo.orderStep == 33" class="btn-status">
						<view class="btn btn-green" @click="gotoExchangeOrder(state.orderInfo)"
							v-if="state.orderInfo.orderType!='REPLENISHMENT'">换货</view>
					</view>
					<view v-if="state.orderInfo.orderStep == 35" class="btn-status">
						<view class="btn btn-green" @click="placeAnOrder(state.orderInfo)">下单</view>
					</view>
					<!-- 异地结束-->
					<!-- 订单完成 -->
					<view v-if="state.isWeiXin==1">
						<view
							v-if="state.orderInfo.orderStep == OrderStatus.已完成 && (state.orderInfo.orderType =='ISSUE' || state.orderInfo.orderType =='VALUE_TO_ACCOUNT')"
							class="btn-status">
							<view class="btn space"
								v-if="( state.orderInfo.isProduct==1 && state.orderInfo.isService==1) ">
								已评价</view>
							<view class="btn-green" v-else @click.stop="gotoEvaluateProduct(state.orderInfo)">去评价产品
							</view>
						</view>
					</view>
					<view v-if="state.isWeiXin==2">
						<view class="btn-status" v-if="state.orderInfo.orderStep == OrderStatus.已完成">

							<view class="btn space" v-if="state.orderInfo.isStaff==1 && state.orderInfo.isProduct==1">
								已评价
							</view>
							<view class='evaluation' v-else>
								<view class="btn-green" @click.stop="gotoEvaluateSalesman(state.orderInfo)">去评价
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<!-- 待激活 -->
					<view class="btn-status" style="display: flex;justify-content: flex-end;"
						v-if="state.orderInfo.orderStep == OrderStatus.待激活 && state.orderInfo.cardId && state.orderInfo.obuId">
						<view class="btn btn-green" @click.stop="gotoActiveOrder(state.orderInfo)"
							style="border: 1px solid #00B38B;">去激活</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 弹窗 -->
	<u-popup v-model="state.showActiveOrder" mode="center">
		<popup-active-order content="确认是否重新激活订单" @cancel="state.showActiveOrder = false"
			@confirm="toActiveOrder"></popup-active-order>
	</u-popup>
</template>

<script setup lang="ts">
	import popupActiveOrder from "@/pages/order/components/popup-active-order.vue";
	import { reactive, ref } from "vue";
	import { onLoad, onUnload, onShow, onPageScroll } from "@dcloudio/uni-app";
	import { requestNew } from "@/utils/network/request";
	import { updateShippingAddress, orderDetailQuery } from "@/utils/network/api";
	import useOrderSkip from "@/composables/order/useOrderSkip";
	import { getETCStatusName, getOBUStatusName, msg, getOrderTypeName, getCarTypeName, getOrderTime, isBlank, timesDiff } from "@/utils/utils";
	import { OrderStatus } from "@/datas/enum";
	import { deviceType } from "@/utils/network/difference";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import {
		getCodeName
	} from "@/datas/queryKey.js";
	import {
		setItem,
		getItem,
	} from "@/utils/storage";
	const state = reactive({
		orderInfo: {
			orderInfoExt: {}
		} as any, //订单信息
		showActiveOrder: false, //激活弹窗
		isWeiXin: 1,  //1  微信   2 app
		appraise: "",
		id: "",
		reshipment: "",//异地补货
	});
	const scrollTop = ref(0); //滚动距离
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	//按钮跳转业务逻辑
	const { gotoEditAddress, gotoCancelOrder, gotoEditUserOrUnitInfo,
		gotoConfirmReceipt, gotoCheckLogistics, gotoEvaluateProduct,gotoEditAddressNew,
		gotoActiveOrder, gotoReturnOrder, gotoExchangeOrder, gotoOrderSign, gotoOrderDetailsPay, gotoEvaluateSalesman, closeOrder, gotoAgainUseOrder, gotoAddressOrder, placeAnOrder, gotoReplenishmentOrder, gotoOrderDetails } = useOrderSkip();


	//获取订单详情
	const getOrderDetails = (id, appraise) => {
		const options = {
			type: 2,
			data: { "orderNo": id },
			method: 'POST',
			showLoading: true,
		}
		requestNew(orderDetailQuery, options).then((res) => {
			state.orderInfo = res.data;
			console.log("state.orderInfo", state.orderInfo)
			// 订单发货后未激活  30天 以后 结束订单功能  insertTime   >30  算出来距离今天是负数  updateTime<30(结束订单)
			for (var i in state.orderInfo) {
				if (state.orderInfo['insertTime']) {
					if (timesDiff(state.orderInfo['insertTime'].replace("T", " ")).days > 30) {
						state.orderInfo['finishOrder'] = true  //可以结束
					} else {
						state.orderInfo['finishOrder'] = false  //不可以结束
					}
				}
				if (state.orderInfo['updateTime']) {
					if (timesDiff(state.orderInfo['updateTime'].replace("T", " ")).days <= 30) {
						state.orderInfo['isUseAgain'] = true  //可以结束
					} else {
						state.orderInfo['isUseAgain'] = false  //不可以结束
					}
				}
				// 收货日期超过7个自然日不允许申请退货
				if (state.orderInfo.orderInfoExt['receivingTime']) {
					if (timesDiff(state.orderInfo.orderInfoExt['receivingTime'].replace("T", " ")).days > 7) {
						state.orderInfo['applyReturn'] = false  //不展示申请退货
					} else {
						state.orderInfo['applyReturn'] = true  //展示申请退货
					}
				}
			}
			console.log("获取订单详情", state.orderInfo, state.orderInfo['applyReturn'])
		})
	}

	//修改订单收货地址
	const requestEditOrderAddr = (addr) => {
		console.log("addr", addr)
		const options = {
			type: 2, data: {
				"id": state.orderInfo.id,
				'consignee': addr.consignee,
				'consigneeTel': addr.consigneeTel,
				'region': addr.region,
				'address': addr.address,
				'postalCode': addr.postalCode,
				'orderId': state.orderInfo.orderNo,

			},
			method: 'POST',
			showLoading: true,
		}

		requestNew(updateShippingAddress, options).then((res) => {
			state.orderInfo.orderInfoExt.id = addr.id,
				state.orderInfo.orderInfoExt.consignee = addr.consignee;
			state.orderInfo.orderInfoExt.consigneeTel = addr.consigneeTel;
			state.orderInfo.orderInfoExt.region = addr.region;
			state.orderInfo.orderInfoExt.address = addr.address;
			state.orderInfo.orderInfoExt.postalCode = addr.postalCode;
			setTimeout(() => {
				msg('收货地址修改成功');
			}, 1000)
		})
	}

	//激活订单
	const toActiveOrder = () => {
		gotoActiveOrder(state.orderInfo);
		state.showActiveOrder = false;
	}

	//是否有售后信息
	const isHaveAfterSaleInfo = () => {
		if (isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.returnMode : null) && isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.exchangeMode : null)) {
			return false;
		}
		return true;
	}

	onLoad((options) => {
		state.isWeiXin = options.isWeiXin
		state.reshipment = options.reshipment
		console.log("options.reshipment", options.reshipment)
		// state.orderInfo = JSON.parse(options.passData);
		state.orderInfo = getItem("orderListData");
		//刷新订单信息
		uni.$on('refreshOrder', (data) => {
			getOrderDetails(options.id, state.orderInfo.appraise);
		});

		//修改收货地址 
		uni.$on('selectAddressSuccess', (addr) => {
			requestEditOrderAddr(addr);
		});
		console.log("optionssdsfd", options)
		state.id = options.id
		state.appraise = options.appraise
	})
	onShow(() => {
		// getOrderDetails(state.id, state.appraise);
	})
	onUnload(() => {
		uni.$off('refreshOrder');
		uni.$off('selectAddressSuccess');
		console.log("已评价")
	})
	const copy = (value) => {
		uni.setClipboardData({
			data: value,
			success(res) {
			}
		})
	}
</script>
<style>
	page {
		background: #E9EDF0;
		padding-bottom: 30rpx;
		font-size: 28rpx;
	}
</style>
<style lang="scss" scoped>
	.bg-img {
		width: 100%;
		position: absolute;
		z-index: 0;

		.icon {
			width: 100%;
			height: 534rpx;
		}
	}

	.content {
		position: relative;
		color: white;
		padding: 0 30rpx;
		padding-top: 200rpx;
	}

	.status>text {
		font-weight: bold;
		font-size: 40rpx;
		line-height: 82rpx;
	}

	.order {
		background: linear-gradient(to bottom, rgb(188, 195, 205), #ffffff);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid #FFFFFF;
		color: black;
		font-weight: 400;
		font-size: 30rpx;
		margin-top: 80rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.order>.num {
		color: #111111;
	}

	.order>.name {
		color: #666666;
		margin-top: 10rpx;
	}

	.message {
		background: white;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid #FFFFFF;
		color: #666666;
		margin-top: 30rpx;
		padding: 20rpx 20rpx 0 20rpx;
	}

	.message image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.message-top1 {
		display: flex;
		padding-bottom: 20rpx;
		align-items: center;
	}

	.message-top1>.msg>view {
		line-height: 50rpx;
	}

	.message-top {
		display: flex;
		border-bottom: 2rpx solid #E6E9EB;
		padding-bottom: 20rpx;
	}

	.vehiclePlate {
		font-weight: 400;
		font-size: 30rpx;
		color: #111111;
	}

	.amount {
		color: #E8C66A;
	}

	.msg {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.btn-view {

		.btn-status {
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0;
			border-top: 1rpx solid #DCDCDC;
		}

		.space {
			margin-right: 19rpx
		}

		.btn {
			border: 1px solid #133850;
			color: #133850;
			border-radius: 30rpx;
			font-size: 24rpx;
			height: 52rpx;
			width: 130rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-green {
			color: white;
			background-color: #133850;
			border-radius: 30rpx;
			height: 52rpx;
			padding: 2rpx 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
		}

		.width-num-1 {
			width: 115rpx;
		}

		.width-num-2 {
			width: 221rpx;
		}

		.width-num-3 {
			width: 201rpx;
		}
	}

	.cardStatus {
		color: #3CCA7C;
	}
	
	.btns {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-top: 1px solid #dcdcdc;
		margin: 0 30rpx;
		padding: 20rpx 0;
	}
	
	.btn {
		height: 60rpx;
		line-height: 58rpx;
		border-radius: 30rpx;
		padding: 0 24rpx;
		font-size: 23rpx;
		box-sizing: border-box;
		margin-right: 12rpx;
	}
	
	
	
	.btns .btn:last-child {
		margin: 0;
	}
	
	.btns .state {
		position: absolute;
		left: 0;
		font-size: 26rpx;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		color: #999999;
		line-height: 58rpx;
	
		text {
			font-size: 26rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #00B38B;
			line-height: 58rpx;
		}
	}
	
	.btn-primary {
		color: white;
		background-color: #133850;
	}
</style>