yiliangyiyun-app/pageB/contract/contract.vue

<template>
	<view class="center">
		<view v-for="(item , index) in lists" :Key="index" class="region">
			<view>
				<view class="c-row ">
					<text class="tit" v-if="item.orderType == '采购'">{{item.orderType}}</text>
					<text class="tit2" v-if="item.orderType == '销售'">{{item.orderType}}</text>
					<view class="enterprise">
						编号{{item.contractNo}}({{item.procurementPlanType}})
					</view>
					<!-- <text class="status status1" v-if="item.status == '已挂单'">{{item.status}}</text>
					<text class="status status2" v-if="item.status == '已成交'">{{item.status}}</text>
					<text class="status status3" v-if="item.status == '已完成'">{{item.status}}</text>
					<text class="status status1" v-if="item.status == '审核中'">{{item.status}}</text>
					<text class="status status1" v-if="item.status == '执行中'">{{item.status}}</text> -->
					<text class="status status1">{{item.status}}</text>

				</view>
			</view>
			<view>
				<view class="c-row ">
					<text class="tit1" v-if="item.orderType == '采购'">买方</text>
					<text class="tit1" v-if="item.orderType == '销售'">卖方</text>
					<view class="enterprise">
						{{item.contracter}}
					</view>
				</view>
			</view>
			<view class="forList flex">
				<view class="title">{{item.goodsName}}:<text>{{item.transactionsNumber}}</text></view>
				<view class="title">单价:￥<text>{{item.unitPrice}}</text></view>
				<view class="title">基差:￥<text>{{item.basis}}</text></view>
			</view>
			<view class="c-row flex annius">
				<text class="anniu" @click="commit(item)"> 附件</text>
				<text class="anniu" @click="someprice(item)"
					v-if="item.procurementPlanType == '期货' && (item.status == '已成交' || item.status == '已挂单')"> 点价</text>
				<text class="anniu1" @click="commit1(item)" v-if="item.orderType == '采购'"> 发货</text>

			<!-- 	<text class="anniu" @click="commit"> 附件</text>
				<text class="anniu" @click="someprice(item)" v-if="item.procurementPlanType == '期货' && (item.status == '已成交' || item.status == '已挂单')"> 点价</text>
				<text class="anniu1" @click="commit1(item)" v-if="item.orderType == '采购'&&item.status != '待审核'"> 发货</text> -->

				<text class="anniu1" @click="commit2(item)" v-if="item.orderType == '销售'"> 收货</text>
			</view>
		</view>
		<view v-if='pricestatus' class='shade'>
			<view class='shade-content'>
				<view class="titles1">点价</view>
				<view class='shade-content-item flex'>
					<input v-model='price' placeholder="请输入点价价格" type="number" class="pointprice">
					<text style="font-size: 16px; color: #AFB3BF;margin-top: -3px;">元/吨</text>
				</view>
				<view class="flex">
					<view class="btns btn1" @click='pricestatus=false'>取消</view>
					<view class="btns btn2" @click='amendprice'>确定</view>
				</view>
			</view>
		</view>
		<view v-if='shadestatus' class='shade'>
			<view class='shade-content'>
				<view class='shade-content-item'>
					<view class="titles">请于以下时间段进行点价操作：</view>
					<view class="timeslot">11：30 ~ 12：30</view>
					<view class="timeslot">15：20 ~ 20：00</view>
					<view class="timeslot">23：00 ~ 08：00</view>
				</view>
				<view class="cancel" @click='shadestatus=false'>知道了</view>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<!-- <button class="cu-btn commit margin-tb-sm lg" @click="commit">提交</button> -->
		</view>
		<!-- </block> -->
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import {
		mapState
	} from 'vuex';
	export default {
		name: "trust",
		data() {
			return {
				lists: [],
				shadestatus: false,
				pricestatus: false,
				goods: {
					pageSize: 10,
					currentPage: 1,
					// pcFlag : 0,
				},
				procurementPlanInfo: {
					pageSize: 10,
					currentPage: 1
				},
				price: "",
				tran: {
					total: 0,
					price: 0,
					startPlace: undefined,
					endPlace: undefined,
					goodsName: undefined,
					sender: '',
					senderPhone: '',
					status: 0,
					receiver: '',
					receiverPhone: '',
					verifyCode: '',
					driver: '',
					driverPhone: '',
					carNo: '',
					personNoImg: '',
					personNoImg1: '',
					driverNoImg: '',
					driverNoImg1: '',
					carNoImg: '',
					carNoImg1: ''
				},
				id: 0,
				PageCur: "trust",
				TabCur: 0,
				priceTypeIndex: -1,
				priceType: ['库内价', '到库价', '到港价'],
				unitPrice: 0,
				seller: '',
				sellerPhone: '',
				minSale: '',
				exsitCount: 0,
				origin: '',
				stock: '',
				goodsName: '',
				verifyCode: '',
				sendText0: '获取验证码',
				sendText1: '获取验证码',
				sendText2: '获取验证码',
				sendText3: '获取验证码',
				sendDisabled0: false,
				sendDisabled1: false,
				sendDisabled2: false,
				sendDisabled3: false,
				buyer: '',
				buyerPhone: '',
				level: '',
				sender: '',
				senderPhone: '',
				receiver: '',
				receiverPhone: '',
				total: 0,
				startPlace: '',
				endPlace: '',
				driver: '',
				driverPhone: '',
				carNo: '',
				personNoImg: '',
				personNoImg1: '',
				driverNoImg: '',
				driverNoImg1: '',
				carNoImg: '',
				carNoImg1: '',
				showTran: true
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		// onShow() {
		// 	this.loadData()
		// },
		onLoad() {
			this.getList()
		},
		methods: {
			amendprice() {
				this.$api.doRequest('post', '/purchaseOrder/api/pointPrice', {
						id: this.id,
						unitPrice: Number(this.price)
					}).then(res => {
						if (res.data.code == 200) {
							this.pricestatus = false
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.errmsg,
							icon: 'none',
							duration: 2000
						})
					});
			},
			someprice(item) {
				var time = new Date().getTime()
				var time1 = new Date(new Date(new Date().toLocaleDateString()).getTime() - (1 * 60 * 60 * 1000))
				var time2 = new Date()
				time2.setHours(8);
				time2.setMinutes(0);
				time2.setSeconds(0);
				var time3 = new Date()
				time3.setHours(11);
				time3.setMinutes(30);
				time3.setSeconds(0);
				var time4 = new Date()
				time4.setHours(12);
				time4.setMinutes(30);
				time4.setSeconds(0);
				var time5 = new Date()
				time5.setHours(15);
				time5.setMinutes(30);
				time5.setSeconds(0);
				var time6 = new Date()
				time6.setHours(20);
				time6.setMinutes(0);
				time6.setSeconds(0);
				if (time < time2.getTime() && time > time1 || time < time4.getTime() && time > time3.getTime() || time <
					time6.getTime() && time > time5.getTime()) {
					this.id = item.id
					this.pricestatus = true
				} else {
					this.shadestatus = true
				}
			},
			commit(item) {
				uni.navigateTo({
					url: `/pageB/contract/enclosures?id=${item.id}`
				})
			},
			commit1(item) {
				uni.navigateTo({
					url: `/pageB/contract/look?id=${item.id}&contractNo=${item.contractNo}&contracter=${item.contracter}&goodsName=${item.goodsName}`
				})
			},
			commit2(item) {
				uni.navigateTo({
					url: `/pageB/contract/collectLook?id=${item.id}&contractNo=${item.contractNo}&customer=${item.customer}&goodsName=${item.goodsName}&contracter=${item.contracter}`
				})
			},
			getList() {
				this.goods.commonId = this.userInfo.id
				// this.goods.pcFlag = 0
				this.$api.doRequest('get', '/purchaseOrder/selectPurchaseOrderApp', this.goods).then(res => {
						if (res.data.code == 200) {
							this.lists = res.data.data.records
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.errmsg,
							icon: 'none',
							duration: 2000
						})
					});
			},


			ChooseImageCar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'carNoImg/',
							result => {
								if (this.carNoImg.length != 0) {
									this.carNoImg1 = result
								} else {
									this.carNoImg = result
								}
								uni.hideLoading();
							}
						)
					}
				});
			},
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current: 0,
					urls: img
				});
			},
			// DelImg(e) {
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '确定要删除该照片吗？',
			// 		cancelText: '取消',
			// 		confirmText: '确定',
			// 		success: res => {
			// 			if (res.confirm) {
			// 				if (e.currentTarget.dataset.index == 0) {
			// 					this.personNoImg = "";
			// 				} else if (e.currentTarget.dataset.index == 1) {
			// 					this.personNoImg1 = "";
			// 				} else if (e.currentTarget.dataset.index == 2) {
			// 					this.driverNoImg = "";
			// 				} else if (e.currentTarget.dataset.index == 3) {
			// 					this.driverNoImg1 = "";
			// 				} else if (e.currentTarget.dataset.index == 4) {
			// 					this.carNoImg = "";
			// 				} else if (e.currentTarget.dataset.index == 5) {
			// 					this.carNoImg1 = "";
			// 				}
			// 			}
			// 		}
			// 	})
			// },

			commit11() {
				if (this.hasLogin) {
					uni.showModal({
						title: '登录提示',
						content: '您尚未登录，是否立即登录？',
						showCancel: true,
						confirmText: '登录',
						success: (e) => {
							if (e.confirm) {
								uni.navigateTo({
									url: '/pagesB/contract/look'
								})
							}
						},
						fail: () => {},
						complete: () => {}
					})
				} else {
					const that = this
					if (this.TabCur == 0) {
						// if (!that.seller) {
						// 	this.$api.msg('请填写卖方');
						// 	return;
						// }
						// if (!that.sellerPhone) {
						// 	this.$api.msg('请填写手机号码');
						// 	return;
						// }
						// if (!that.exsitCount) {
						// 	this.$api.msg('请填写库存量');
						// 	return;
						// }
						// if (!that.minSale) {
						// 	this.$api.msg('请填写最小成交量');
						// 	return;
						// }
						// if (!that.goodsName) {
						// 	this.$api.msg('请填写货名');
						// 	return;
						// }
						// if (!that.verifyCode) {
						// 	this.$api.msg('请填写验证码');
						// 	return;
						// }

						// if (!that.price) {
						// 	that.$api.msg('请选择价格类型')
						// 	return
						// }
						// if (!that.unitPrice) {
						// 	that.$api.msg('请填写协议价格（元/吨）');
						// 	return
						// }
						// if (!that.origin) {
						// 	this.$api.msg('请填写产地');
						// 	return;
						// }
						// if (!that.stock) {
						// 	this.$api.msg('请填写库存地');
						// 	return;
						// }
						// if (!that.level) {
						// 	this.$api.msg('请填写国标等级');
						// 	return;
						// }
						// that.saleInfo.seller = that.seller
						// that.saleInfo.sellerPhone = that.sellerPhone
						// that.saleInfo.priceType = that.price
						// that.saleInfo.unitPrice = that.unitPrice
						// that.saleInfo.minSale = that.minSale
						// that.saleInfo.exsitCount = that.exsitCount
						// that.saleInfo.origin = that.origin
						// that.saleInfo.stock = that.stock
						// that.saleInfo.verifyCode = that.verifyCode
						// that.saleInfo.goodsName = that.goodsName
						// that.saleInfo.buyer = that.buyer
						// that.saleInfo.buyerPhone = that.buyerPhone
						// that.saleInfo.level = that.level
					} else if (this.TabCur == 1) {
						if (!that.buyer) {
							this.$api.msg('请填写买方');
							return;
						}
						if (!that.buyerPhone) {
							this.$api.msg('请填写手机号码');
							return;
						}
						if (!that.goodsName) {
							this.$api.msg('请填写货名');
							return;
						}
						if (!that.verifyCode) {
							this.$api.msg('请填写验证码');
							return;
						}
						if (!that.price) {
							that.$api.msg('请选择价格类型')
							return
						}
						if (!that.unitPrice) {
							that.$api.msg('请填写协议价格（元/吨）');
							return
						}
						if (!that.origin) {
							this.$api.msg('请填写产地');
							return;
						}
						if (!that.stock) {
							this.$api.msg('请填写库存地');
							return;
						}
						if (!that.level) {
							this.$api.msg('请填写国标等级');
							return;
						}
						that.saleInfo.seller = that.seller
						that.saleInfo.sellerPhone = that.sellerPhone
						that.saleInfo.priceType = that.price
						that.saleInfo.unitPrice = that.unitPrice
						that.saleInfo.minSale = that.minSale
						that.saleInfo.exsitCount = that.exsitCount
						that.saleInfo.origin = that.origin
						that.saleInfo.stock = that.stock
						that.saleInfo.verifyCode = that.verifyCode
						that.saleInfo.goodsName = that.goodsName
						that.saleInfo.buyer = that.buyer
						that.saleInfo.buyerPhone = that.buyerPhone
						that.saleInfo.level = that.level
					} else if (this.TabCur == 2) {
						if (!that.sender) {
							this.$api.msg('请填写发货方');
							return;
						}
						if (!that.senderPhone) {
							this.$api.msg('请填写发货方手机号码');
							return;
						}
						if (!that.receiver) {
							this.$api.msg('请填写收货方');
							return;
						}
						if (!that.receiverPhone) {
							this.$api.msg('请填写收货方手机号码');
							return;
						}
						if (!that.goodsName) {
							this.$api.msg('请填写货名');
							return;
						}
						if (!that.verifyCode) {
							this.$api.msg('请填写验证码');
							return;
						}
						that.tran.sender = that.sender
						that.tran.senderPhone = that.senderPhone
						that.tran.receiver = that.receiver
						that.tran.receiverPhone = that.receiverPhone
						that.tran.verifyCode = that.verifyCode
						that.tran.goodsName = that.goodsName
						that.tran.total = that.total
						that.tran.price = that.price
						that.tran.startPlace = that.startPlace
						that.tran.endPlace = that.endPlace
					} else if (this.TabCur == 3) {
						if (!that.startPlace) {
							this.$api.msg('请填写起始地');
							return;
						}
						if (!that.endPlace) {
							this.$api.msg('请填写目的地');
							return;
						}
						if (!that.driver) {
							this.$api.msg('请填写承运人');
							return;
						}
						if (!that.driverPhone) {
							this.$api.msg('请填写承运人手机号码');
							return;
						}
						if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(that.driverPhone)) {
							that.$api.msg('请输入正确的承运人手机号码');
							return
						}
						if (!that.carNo) {
							this.$api.msg('请填写车牌号');
							return;
						}
						if (!that.verifyCode) {
							this.$api.msg('请填写验证码');
							return;
						}
						if (!that.personNoImg || !that.personNoImg1) {
							that.$api.msg('请上传身份证正、反面照片');
							return
						}
						if (!that.driverNoImg || !that.driverNoImg1) {
							that.$api.msg('请上传驾驶证主、副页照片');
							return
						}
						if (!that.carNoImg || !that.carNoImg1) {
							that.$api.msg('请上传行车证主、副页照片');
							return
						}
						that.tran.driver = that.driver
						that.tran.driverPhone = that.driverPhone
						that.tran.verifyCode = that.verifyCode
						that.tran.price = that.price
						that.tran.startPlace = that.startPlace
						that.tran.endPlace = that.endPlace
						that.tran.carNo = that.carNo
						that.tran.personNoImg = that.personNoImg
						that.tran.personNoImg1 = that.personNoImg1
						that.tran.driverNoImg = that.driverNoImg
						that.tran.driverNoImg1 = that.driverNoImg1
						that.tran.carNoImg = that.carNoImg
						that.tran.carNoImg1 = that.carNoImg1
					}
					// 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
					wx.getSetting({
						// withSubscriptions: true,//是否获取用户订阅消息的订阅状态，默认false不返回
						success(res) {
							if (res.authSetting['scope.subscribeMessage']) {
								uni.openSetting({ // 打开设置页
									success(res) {
										console.log(res.authSetting)
									}
								});
							} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
								uni.requestSubscribeMessage({
									tmplIds: ['8cVkckXi_8zfHeScXRHhjN6cgZFYYCWIMPDTiPWagXY'], // 
									success(res) {
										if (res['8cVkckXi_8zfHeScXRHhjN6cgZFYYCWIMPDTiPWagXY'] ==
											"accept") { // 字段就是tmplIds模板id
											uni.showLoading({
												title: '正在提交',
												mask: true
											})
											if (that.TabCur == 0) {
												that.$api.request('sale', 'addSale', that.saleInfo,
													failres => {
														uni.hideLoading()
														that.$api.msg(failres.errmsg);
													}).then(res => {
													uni.hideLoading()
													uni.showModal({
														title: '提示',
														content: "发布提交成功，工作人员会尽快联系该号码：" +
															that.sellerPhone,
														showCancel: false,
														confirmText: '确定',
														success: () => {
															uni.navigateBack()
														}
													})
													// that.$api.prePage().refreshList(data, that.manageType);
												})
											} else if (that.TabCur == 1) {
												that.$api.request('sale', 'addBuy', that.saleInfo,
													failres => {
														uni.hideLoading()
														that.$api.msg(failres.errmsg);
													}).then(res => {
													uni.hideLoading()
													uni.showModal({
														title: '提示',
														showCancel: false,
														content: "发布提交成功，工作人员会尽快联系该号码：" +
															that.buyerPhone,
														confirmText: '确定',
														success: () => {
															uni.navigateBack()
														}
													})
													// that.$api.prePage().refreshList(data, that.manageType);
												})
											} else if (that.TabCur == 2) {
												that.$api.request('tran', 'addTran', that.tran,
													failres => {
														uni.hideLoading()
														that.$api.msg(failres.errmsg);
													}).then(res => {
													uni.hideLoading()
													uni.showModal({
														title: '提示',
														showCancel: false,
														content: "发布提交成功，工作人员会尽快联系该号码：" +
															that.senderPhone,
														confirmText: '确定',
														success: () => {
															uni.navigateBack()
														}
													})
													// that.$api.prePage().refreshList(data, that.manageType);
												})
											} else if (that.TabCur == 3) {
												that.$api.request('tran', 'addCarDriver', that.tran,
													failres => {
														uni.hideLoading()
														that.$api.msg(failres.errmsg);
													}).then(res => {
													uni.hideLoading()
													uni.showModal({
														title: '提示',
														showCancel: false,
														content: "发布提交成功，工作人员会尽快联系该号码：" +
															that.driverPhone,
														confirmText: '确定',
														success: () => {
															uni.navigateBack()
														}
													})
													// that.$api.prePage().refreshList(data, that.manageType);
												})
											}
										}
									}
								})
							}
						}
					})
				}
			}
		},
	}
</script>

<style scoped>
	.center {
		padding: 10px 20px;
		background-color: #F5F6FA;
	}

	.region {
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 10px;
	}

	.zan-dialog__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background: rgba(0, 0, 0, 0);
		/*设置阴影半透明背景如： background: rgba(0, 0, 0, 0.4);*/
		display: none;
	}

	.zan-dialog__container {
		position: fixed;
		bottom: 400rpx;
		width: 650rpx;
		/*弹窗布局宽*/
		height: 350rpx;
		/*弹窗布局高，与下面弹出距离transform有关*/
		margin-left: 50rpx;
		background: #f8f8f8;
		transform: translateY(300%);
		/*弹框弹出距离，与弹框布局高度有关，如300%表示弹起距离为3倍弹窗高度 */
		transition: all 0.4s ease;
		z-index: 12;
		border-radius: 20rpx;
		box-shadow: 0px 3px 3px 2px gainsboro;
		/*弹框的悬浮阴影效果，如不需要可注释该行*/
	}

	.zan-dialog--show .zan-dialog__container {
		transform: translateY(0);
	}

	.zan-dialog--show .zan-dialog__mask {
		display: block;
	}

	.container {
		padding-bottom: 160rpx;
	}

	.cu-form-group input {
		text-align: right;
	}

	.text-white text {
		background: linear-gradient(45deg, #3DC146, #B2D612);
		padding: 5px 10px;
		border-radius: 38rpx;
	}

	.cu-form-group textarea {
		text-align: right;
	}

	.commit {
		background: linear-gradient(45deg, #DF331C, #DA611A);
		color: #fff;
	}

	.shade {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		height: 100%;

		z-index: 999999;
	}

	.shade-content {
		background: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 20px;
		transform: translateX(-50%) translateY(-50%);
		z-index: 999999;
		text-align: center;
	}

	.shade-content-item {
		width: 277px;
		text-align: center;
		height: 121px;
		padding: 35px 10px;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}

	.forList {
		width: 90%;
		height: 30px;
		margin: 0 auto;
		background-color: #F9F9FA;
		border-radius: 10px;
	}

	.forList .title {
		line-height: 30px;
		margin-left: 25px;
		color: #9698A2;
	}

	.tit {
		width: 34px;
		height: 24px;
		background-color: #E9F8F0;
		color: #22C572;
		padding: 2px 3px;
		border-radius: 5px;
	}

	.tit1 {
		width: 34px;
		height: 24px;
		background-color: #FEECE6;
		color: #FE6430;
		padding: 2px 3px;
		border-radius: 5px;
	}

	.tit2 {
		width: 34px;
		height: 24px;
		background-color: #EBEEFA;
		color: #5C76DF;
		padding: 2px 3px;
		border-radius: 5px;
	}

	.enterprise {
		font-size: 16px;
		font-weight: 600;
		margin-left: 20px;
	}

	.annius {
		width: 70%;
		margin-left: 110px;
		justify-content: flex-end;
	}

	.anniu {
		width: 50px;
		font-size: 16px;
		border: 1px solid #CDCDCD;
		border-radius: 12px;
		position: relative;
		margin-right: 10px;
		text-align: center;
		line-height: 30px;
	}

	.anniu1 {
		width: 50px;
		font-size: 16px;
		border: 1px solid #22C572;
		border-radius: 15px;
		color: #22C572;
		position: relative;
		margin-right: 10px;
		text-align: center;
		line-height: 30px;
	}

	.titles {
		color: #333333;
		font-size: 16px;
		font-weight: 600;
		margin-top: -16px;
		margin-bottom: 10px;

	}

	.timeslot {
		font-size: 14px;
		color: #333333;
		height: 20px;
	}

	.cancel {
		text-align: center;
		width: 100%;
		color: #22C572;
		border-top: 1px solid #EEEEEE;
		margin-bottom: 6px;
		font-size: 18px;
		line-height: 40px;
		display: inline-block;
	}

	.pointprice {
		border-bottom: 1px solid #EEEEEE;
		text-align: left;
		padding-left: 10px;
		width: 70%;
		margin: 0 auto;
	}

	.titles1 {
		color: #333333;
		font-size: 16px;
		font-weight: 600;
		margin-top: 10px;
	}

	.btns {
		width: 50%;
		line-height: 50px;
		font-size: 18px;
		border-top: 1px solid #EEEEEE;
		margin-top: -20px;
	}

	.btn1 {
		color: #AFB3BF;
		border-right: 1px solid #EEEEEE;
	}

	.btn2 {
		color: #22C572;
	}

	.status {
		right: 20px;
		position: absolute;
	}

	.status1 {
		color: #FE6430;
	}

	.status2 {
		color: #22C572;
	}

	.status3 {
		color: #AFB3BF;
	}
</style>