count-pass-app/subpages/order/mixedOrderAdd.vue

<template>
	<view class="order">
		<view class="example">
			<u-form labelPosition="left" :model="orderForm" :rules="rules" ref="form1" labelWidth='90'>
				<!-- 下单日期 -->
				<u-form-item :label="$t('order.orderDate')" borderBottom prop="setDate">
					<u-input readonly v-model="orderForm.setDate" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.orderDate')" />
				</u-form-item>

				<!-- 有效日期 -->
				<template v-if="orderForm.orderType == '2'">
					<u-form-item :label="$t('order.endDate')" borderBottom prop="orderValidDate"
						@click="showEndDateCalendar = true">
						<u-input readonly v-model="orderForm.orderValidDate" border="none"
							:placeholder="$t('base.common.placeholderS')+$t('order.endDate')" />
					</u-form-item>
				</template>


				<!-- 选择企业 -->
				<u-form-item :label="$t('order.enterprise')" borderBottom prop="tenantId"
					@click="showPopup('popupTenantId')">
					<u-input readonly v-model="orderForm.tenantName" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.enterprise')" />
				</u-form-item>


				<!-- 临时/固定 -->
				<u-form-item :label="$t('order.orderType')" borderBottom prop="orderType"
					@click="showPopup('popupOrderType')">
					<u-input readonly v-model="orderForm.orderTypeName" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.orderType')" />
				</u-form-item>


				<!-- 业务类型 -->
				<!-- 				<u-form-item :label="$t('order.vehicleType')" borderBottom prop="vehicleType"
					@click="showPopup('popupVehicleType')">
					<u-input readonly v-model="orderForm.vehicleTypeName" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.vehicleType')" />
				</u-form-item> -->


				<u-form-item :label="$t('order.vehicleType')" borderBottom prop="vehicleType">
					<u-radio-group v-model="orderForm.vehicleType" @change="onVehicleTypeConfirm" placement="row"
						class="p-input">
						<u-radio :customStyle="{marginRight: '10px'}" v-for="item in vehicleTypeOption"
							:key="item.value" :label="item.text" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<template>
					<u-form-item :label="$t('order.companyName')" borderBottom prop="companyId"
						@click="showPopup('popupCompanyId')">
						<u-input readonly v-model="orderForm.companyName" border="none"
							:placeholder="$t('base.common.placeholderS')+$t('order.companyName')">
							<template slot="suffix">
								<view v-if="paymentOption && paymentOption=='1'"
									style="color: darkgreen;font-size: 9pt;">
								</view>
							</template>

						</u-input>
					</u-form-item>
				
						<view v-if="paymentOption && paymentOption.isShow=='1' && paymentOption.agentResponsible=='1'"
						style="display: flex;flex-direction:justify-content:flex-end;flex-direction: column;
    text-align: end;">
						<view style="color: red;font-size: 9pt;">
							{{$t('order.allTotal')}}:{{paymentOption.total}}
						</view>
						<view style="color: red;font-size: 9pt;">
							{{$t('order.waitTotal')}}:{{paymentOption.waitTotal}}
						</view>
						<view style="color: red;font-size: 9pt;">
							{{$t('order.source')}}:{{paymentOption.companyName}}
						</view>
					</view>
				</template>

				<u-form-item v-if="orderForm.orderType != '4'" u-form-item :label="$t('order.vehicle')" borderBottom
					prop="vehicle" @click="toSelectVehicle">
					<u--input readonly v-model="orderForm.vehicle" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.vehicle')"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item :label="$t('order.remarks')" borderBottom prop="remarks">
					<u-input v-model="orderForm.remark" border="none"
						:placeholder="$t('base.common.placeholderI')+$t('order.remarks')" />
				</u-form-item>
			</u-form>
			<template v-if="materialList.length">
				<view class="material-content">
					<view v-for="(item, index) in materialList" :key="index" class="order-card">
						<view class="order-card-title">
							<text class="label">{{item.text}}</text>
							<u-tag :text="$t('base.button.delete')" plain shape="circle"
								@click="tableDelete(item)"></u-tag>
						</view>
						<view class="order-card-info">
							<u-input class="info" suffixIcon="edit-pen" border="none" v-model="item.orderNumber"
								:placeholder="$t('base.common.placeholderI')+$t('order.orderNumber')" type="digit" />
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<u-empty mode="list" :text="$t('base.common.placeholderI')+$t('order.mixedMaterial')"
					icon="https://cdn.uviewui.com/uview/empty/list.png">
					<u-button type="primary" size="small"
						:text="$t('base.common.placeholderI')+' '+$t('order.mixedMaterial')"
						@click="selectMater()"></u-button>
				</u-empty>
			</template>
		</view>
		<view class="bottom-content">
			<button class="bind-btn" @click="submit('form1')">{{$t('base.common.submit')}}
			</button>
		</view>

		<uni-fab v-if="materialList.length" ref="fab" buttonColor="#3c9cff" @fabClick="selectMater" />
		<u-toast ref="loadingToast"></u-toast>
		<CarKeyboard :show.sync="carKeyboardShow" :vehicleNo="orderForm.vehicle" @confirm="onKeyBoardConfirm"
			vehicleType="car"></CarKeyboard>
		<!-- 下单日期 -->
		<u-calendar color="#4680F9" round='25' :show="showSetDateCalendar" @confirm="onSetDateConfirm"
			@close="showSetDateCalendar=false"></u-calendar>
		<!-- 有效日期 -->

		<u-datetime-picker :show="showEndDateCalendar" v-model="defaultEndDate" :defaultDate="defaultEndDate"
			mode="datetime" @confirm="onEndDateConfirm" @close="showEndDateCalendar=false" />
		<!-- <u-calendar color="#4680F9" :defaultDate="defaultEndDate" :show="showEndDateCalendar"
			@confirm="onEndDateConfirm" @close="showEndDateCalendar=false" /> -->
		<!-- 临时或固定 -->
		<PopupSelect ref="popupOrderType" :option="orderTypeOption" @onConfirm="onOrderTypeConfirm" />
		<!-- 业务类型 -->
		<!-- 	<PopupSelect ref="popupVehicleType" :option="vehicleTypeOption" @onConfirm="onVehicleTypeConfirm" /> -->
		<!-- 客户 -->
		<PopupSelect ref="popupCompanyId" :hasSearch='false' :option="companyOption" @onConfirm="onCompanyConfirm" />
		<!-- 原料 -->
		<PopupSelect ref="popupmaterialId" kind="m" :hasSearch='false' :option="materialOption"
			@onConfirm="onProductConfirm" />
		<!-- 企业选项 -->
		<PopupSelect ref="popupTenantId" :hasSearch='false' :option="tenantOption" @onConfirm="onTenantConfirm" />

	</view>
</template>

<script>
	import PopupSelect from '../../components/popup-select/index'
	import dayjs from 'dayjs'
	import CarKeyboard from '../../components/carKeyboard/carKeyboard'
	import {
		getTenantCacheList,
		getOrderType,
	} from '../../utils/util.js'

	import {
		saveMixedOrder,
		getOption,
		getMaterialsByCompany
	} from '../../api/order'
	export default {
		components: {
			CarKeyboard,
			PopupSelect
		},
		data() {
			return {
				carKeyboardShow: false,
				start: dayjs().format('YYYY-MM-DD'),
				orderForm: {
					kind: "",
					setDate: dayjs().format('YYYY-MM-DD'), //订单日期
					orderValidDate: dayjs().add(30, 'day').format('YYYY-MM-DD HH:mm:ss'), //有效日期
					tenantId: '', //企业
					orderType: '1', //订单类型
					companyId: '', //客商
					orderNumber: "",
					materialId: "",
					vehicle: '', //车号
					driverId: '', //司机id\
					vehicleType: '101',
					xfFlag: '',
					phone: '',
					idcard: "",
					driver: '',
					tenantName: '',
					vehicleTypeName: '', //业务类型
					companyName: "", //客商
					materialName: "", //物料id
					orderTypeName: this.$t('order.tempOrder'),
					sourceId: "", //第三方大订单ID
					remark: "",
				},
				materialList: [],
				rules: {
					orderType: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.orderType')
					}],
					vehicleType: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.vehicleType')
					}],
					tenantId: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.enterprise')
					}],
					companyId: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.companyName')
					}],
					materialId: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.materialName')
					}],
					orderNumber: [{
						required: true,
						message: this.$t('base.common.placeholderI') + this.$t('order.orderNumber')
					}]
				},
				vehicleTypeOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}, ],
				orderTypeOption: [{
					text: this.$t("order.tempOrder"),
					isShow: true,
					value: '1',
					index: 1,
					key: "add_temp_order",
				}, ],
				paymentOption: {},
				//产品选项
				materialOption: [{
					text: this.$t('base.common.noData'),
					value: null,
				}], //物料选项
				//客户选项
				companyOption: [{
					text: this.$t('base.common.noData'),
					compvalueanyId: null
				}], //供应商选项
				// vehicleOption:[{vehicle:this.$t('base.common.noData'),value:null}], //司机选项
				tenantOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //企业选项
				showSetDateCalendar: false,
				showEndDateCalendar: false,
				defaultEndDate: dayjs().add(30, 'day').format('YYYY-MM-DD HH:mm:ss'), //默认有效日期
				//业务对应的客户信息
				vehicleTypeCompanyList: [],
				//客户对应的物料信息
				companyMaterialList: [],
			}
		},
		onLoad(options) {
			this.bindTenant()
			this.orderTypeOption = getOrderType(this.orderTypeOption);
			console.log("允许操作的订单类型、", this.orderTypeOption);
		},

		methods: {
			tableDelete(material) {
				let index = this.materialList.findIndex(item => {
					if (item.value == material.value) {
						return true
					}
				})
				this.materialList.splice(index, 1)
			},
			//选择品种
			selectMater() {
				var packMaterialOption = this.materialOption.filter((p) => {
					return p.kind == '101'
				});
				console.log("解析后的物料信息、", this.materialOption.length, packMaterialOption);
				uni.navigateTo({
					url: `/subpages/order/materMultipleSelect?option=${JSON.stringify(packMaterialOption)}&selectedOption=${JSON.stringify(this.materialList)}`
				})
			},
			//去选择司机
			toSelectVehicle() {
				uni.navigateTo({
					url: '/subpages/order/vehicle'
				})
			},
			//车号键盘输出
			onKeyBoardConfirm(id) {
				this.orderForm.vehicle = id
			},
			//显示车牌键盘
			carKeyboardOut() {
				this.carKeyboardShow = true
			},
			//选择订单类型后加载选项 //获取品种信息 101:销售，102：采购
			bindOption() {
				this.clear(true);
				console.log("订单租户信息、", this.orderForm.tenantId);
				if (!this.orderForm.tenantId) {
					console.log("订单业务租户信息");
					return;
				}
				var that = this;
				console.log("当前租户ID、", that.orderForm.tenantId);
				if (that.orderForm.tenantId) {
					let data = JSON.parse(JSON.stringify(that.orderForm))
					getOption(data).then(res => {
						console.log("查询基础数据返回、", res);
						if (res.statusCode === 200) {
							console.log("用户业务类型、", res.data.data.appVehicleType)
							console.log("用户客户信息、", res.data.data.appCompany)
							console.log("用户品种信息、", res.data.data.appMaterial)
							that.vehicleTypeOption = [{
								value: '101',
								text: this.$t("order.saleBusiness")
							}]
							if (that.vehicleTypeOption && that.vehicleTypeOption.length > 0) {
								that.orderForm.vehicleType = that.vehicleTypeOption[0].value

								that.vehicleTypeCompanyList = res.data.data.appCompany
								that.bindCompany();
								that.bindMaterial();
							}
						}
					})
				}
			},

			bindCompany() {
				var vehicleType = this.orderForm.vehicleType;
				if (vehicleType && this.vehicleTypeCompanyList) {
					this.companyOption = [{
						text: this.$t('order.notSelected'),
						value: null
					}] //物料选项
					var companyInfos = this.vehicleTypeCompanyList.filter(function(company) {
						return company.vehicleType == vehicleType;
					});

					if (companyInfos && companyInfos.length > 0) {
						companyInfos[0].companyList.forEach(item => {
							this.companyOption.push({
								text: item.companyName,
								value: item.companyId
							})
						})
						this.orderForm.companyId = this.companyOption[1].value
						this.orderForm.companyName = this.companyOption[1].text
					}
					console.log("客户信息、", this.companyOption);
				}
			},
			bindMaterial() {
				var companyId = this.orderForm.companyId;
				this.materialOption = []
				this.orderForm.materialId = ''
				this.orderForm.materialName = ''
				this.paymentOption = {}
				if (companyId) {
					getMaterialsByCompany(this.orderForm).then(res => {
						if (res.data.code == 0) {
							this.paymentOption = res.data.hardInfo
							// this.materialOption = [{
							// 	text: this.$t('order.notSelected'),
							// 	value: null
							// }] //物料选项
							var materialInfos = res.data.data;
							console.log("1111213213", materialInfos);
							if (materialInfos && materialInfos.length > 0) {
								materialInfos.forEach(item => {
									this.materialOption.push({
										text: item.name,
										value: item.id,
										type: item.materTypeName ? item.materTypeName : '暂无分类',
										kind: item.kind
									})
								})

								if (this.materialOption[1] && this.materialOption.length == 2) {
									this.orderForm.materialId = this.materialOption[1].value
									this.orderForm.materialName = this.materialOption[1].text
									this.orderForm.kind = this.materialOption[1].kind

								}
							}
							console.log("品种信息、", this.materialOption);
						}
					})
				}
			},
			//
			bindTenant() {
				this.tenantOption = getTenantCacheList();
				if (this.tenantOption.length > 0) {
					this.orderForm.tenantId = this.tenantOption[0].value
					this.orderForm.tenantName = this.tenantOption[0].text
				}
				this.bindOption();
			},
			//提交订单
			submit(ref) {
				let _this = this
				console.log("提交的订单信息、混装信息、", this.orderForm, this.materialList);
				if (!this.orderForm.vehicle) {
					uni.showToast({
						title: this.$t('base.common.placeholderI') + this.$t('order.vehicle'),
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.orderForm.companyId) {
					uni.showToast({
						title: this.$t('base.common.placeholderI') + this.$t('order.companyName'),
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.materialList || this.materialList.length == 0) {
					uni.showToast({
						title: this.$t('base.common.placeholderS') + this.$t('order.materialName'),
						icon: 'none',
						duration: 2000
					})
					return;
				}
				var index = this.materialList.findIndex(p => {
					return !p.orderNumber
				});
				if (index > -1) {
					uni.showToast({
						title: '【' + (index + 1) + '】' + this.$t('base.common.placeholderI') + this.$t(
							'order.orderNumber'),
						icon: 'none',
						duration: 2000
					})
					return;
				}

				this.$refs[ref].validate().then(() => {
					this.$refs.loadingToast.show({
						type: "loading",
						message: this.$t('base.common.loading'),
						duration: "1000000"
					})
					var dataList = [];
					this.materialList.forEach(p => {
						let data = JSON.parse(JSON.stringify(_this.orderForm))
						data.materialId = p.value
						data.orderNumber = p.orderNumber
						dataList.push(data);
					});
					console.log("提交的订单信息、", dataList);
					saveMixedOrder(dataList).then(res => {
						this.$refs.loadingToast.hide()
						if (res.statusCode === 200) {
							uni.showModal({
								// title: '提示',
								content: this.$t("order.isContinueAddOrder"),
								showCancel: true,
								cancelText: this.$t("base.button.goBack"),
								confirmText: this.$t("base.button.continue"),
								success: function(res) {
									if (res.confirm) {
										_this.orderForm = {
												setDate: dayjs().format('YYYY-MM-DD'), //订单日期
												orderValidDate: dayjs().add(30, 'day').format(
													'YYYY-MM-DD HH:mm:ss'), //有效日期
												vehicleType: '101', //订单类型
												vehicleTypeName: '', //业务类型
												companyId: '', //客商
												materialId: "", //物料
												orderNumber: "0", //数量
												vehicle: '', //车号
												driverId: '', //司机id\
												orderType: '1',
												orderTypeName: '临时订单',
												phone: '',
												idcard: "",
												driver: '',
												companyName: "", //客商
												materialName: "", //物料id
											},
											console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
										uni.redirectTo({
											url: '/subpages/order/dealerList?index=0'
										})
									}
								}
							})
						}
					})
				}).catch(err => {
					console.log('err', err);
					this.$refs.loadingToast.hide()
				})
			},
			formatOption(data) {
				let arr = []
				data.forEach(item => {
					arr.push({
						text: item.name || item.label,
						value: item.value || item.id
					})
				})
				if (arr.length) {
					arr.unshift({
						text: this.$t('order.notSelected'),
						value: null
					})
				} else {
					arr.unshift({
						text: this.$t('base.common.noData'),
						value: null
					})
				}
				return arr
			},
			//显示选择
			showPopup(refs) {
				this.$refs[refs].showPicker = true
			},
			//选择下单日期
			onSetDateConfirm(date) {
				this.orderForm.setDate = dayjs(date).format('YYYY-MM-DD');
				this.showSetDateCalendar = false;
			},
			//选择下单日期
			onEndDateConfirm(date) {
				this.orderForm.orderValidDate = dayjs(date.value).format('YYYY-MM-DD HH:mm:ss');
				this.showEndDateCalendar = false;
			},
			//选择订单类型
			onOrderTypeConfirm(value) {
				this.orderForm.orderType = ''
				this.orderForm.orderTypeName = ''
				if (value.value) {
					this.orderForm.orderType = value.value
					this.orderForm.orderTypeName = value.text
				}
			},
			//选择订单类型
			onVehicleTypeConfirm(value) {
				this.orderForm.vehicleType = value
				this.clear(false)
				this.bindCompany();
				this.bindMaterial();
			},
			//选择客户
			onCompanyConfirm(value) {
				this.orderForm.companyId = ''
				this.orderForm.companyName = ''
				if (value.value) {
					this.orderForm.companyId = value.value
					this.orderForm.companyName = value.text
				}
				this.bindMaterial();
			},

			//选择原料
			onProductConfirm(value) {
				console.log("选择的物料信息、", value);
				this.orderForm.materialId = ''
				this.orderForm.materialName = ''
				if (value.value) {
					this.orderForm.materialId = value.value
					this.orderForm.materialName = value.text
				}
			},
			//选择企业
			onTenantConfirm(value) {
				this.orderForm.tenantId = ''
				this.orderForm.tenantName = ''
				if (value.value) {
					this.orderForm.tenantId = value.value
					this.orderForm.tenantName = value.text

				}
				this.bindOption();
			},

			clear(isVehicleType) {
				if (isVehicleType == true) {
					this.vehicleTypeOption = [{
						text: this.$t('base.common.noData'),
						value: null
					}]
					this.orderForm.vehicleType = ''
				}
				this.companyOption = [{
					text: this.$t('base.common.noData'),
					value: null
				}] //客户选项
				this.materialOption = [{
					text: this.$t('base.common.noData'),
					value: null
				}] //物料选项

				this.orderForm.companyId = ''
				this.orderForm.materialId = ''
				this.orderForm.companyName = ''
				this.orderForm.materialName = ''
				this.orderForm.orderNumber = '0';
				this.orderForm.driver = '';
				this.orderForm.driverId = '';
				this.orderForm.vehicle = '';

			},
		}
	}
</script>


<style lang="less" scoped>
	.order {
		padding: 32rpx;

		.picker-title {
			display: flex;
			padding: 0 32rpx;
			line-height: 84rpx;
			justify-content: space-between;

			.confirm {
				color: #4680F9;
			}
		}

		.picker-wrap {
			height: 440rpx;

			.picker-view {
				height: 100%;

				.item {
					display: flex;
					justify-content: space-between;
					height: 88rpx;
					line-height: 88rpx;
					padding: 0 32rpx;

					.text {
						width: 33%;
					}

					.text1 {
						width: 33%;
						text-align: center;
					}

					.text2 {
						width: 33%;
						text-align: right;
					}
				}

				.btn-item {
					display: flex;
					justify-content: center;
					height: 88rpx;
					line-height: 88rpx;
					padding: 0 32rpx;
					align-items: center;

					.add-vehicle {
						line-height: 64rpx;
						height: 64rpx;
						background: #4680F9;
						width: 25%;
						font-size: 28rpx;
					}
				}
			}
		}

		.form-wrap {
			height: 444rpx;
			padding: 0 32rpx;
		}
	}

	.order-card {
		background-size: 100% 100%;
		background-color: #fff;
		overflow: hidden;
		margin: 12rpx 12rpx 0;
		padding: 8rpx 12rpx;
		z-index: 50;
		border: 3px solid #eaebec;

		.order-card-title {
			display: flex;
			justify-content: left;
			align-items: center;
			padding: 0 0 16rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #222;
			position: relative;
			flex-direction: row;
			justify-content: space-between;

			.orderStatus-info {
				position: absolute;
				right: 0;
				padding-right: 10px;

				.iconImg {
					width: 100rpx;
					height: 88rpx;
					margin-top: 15rpx;
				}

				.iconImg2 {
					width: 100rpx;
					height: 100rpx;
					margin-top: 15rpx;
				}

				.iconImg1 {
					width: 130rpx;
					height: 80rpx;
					margin-top: 20rpx;
				}
			}

			.type {
				height: 80rpx;
				color: #3275F5;
				line-height: 80rpx;
				padding: 0 14rpx;
				background-color: #E8F6FF;
				margin-right: 36rpx;
			}

			.out-type {
				height: 50rpx;
				color: #fa3534;
				line-height: 50rpx;
				padding: 0 20rpx;
				border-radius: 50rpx;
				background-color: #fab6b64a;
				margin-right: 78rpx;
				font-size: 24rpx;
			}

			.fixed {
				color: red;
			}

			.info {
				color: #111111;
				flex: 1;
			}

			.status {
				position: absolute;
				top: 0;
				right: 0;
				background: #3275F5;
				width: 200rpx;
				text-align: center;
				line-height: 42rpx;
				height: 42rpx;
				color: #FEFEFE;
				transform: rotate(45deg) translate3d(65rpx, -56rpx, 0);
				font-size: 24rpx;
				font-weight: normal;
			}

			.bad-status {
				background: #CCCCCC;
				color: #FEFEFE;
			}
		}

		.order-card-info {
			position: relative;
			background-color: #f5f7fa;
			font-size: 28rpx;
			line-height: 56rpx;
			padding: 30rpx 40rpx;
			color: #222;
			position: relative;
			background-size: 100% 100%;

			.order-type {
				position: absolute;
				right: 10px;
				top: 5px;
			}


			.cell {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: flex;

				.label {
					// width: 80rpx;
					font-weight: bold;
					margin-right: 20rpx;
				}

				.right {
					padding-right: 20px;
				}

				.info {

					font-size: 24rpx;
				}

				.used {

					color: #e22f61;
				}

				.green {
					font-size: 30rpx;
					color: green;
				}
			}

			.row {
				font-size: 24rpx;
				line-height: 54rpx;
				display: flex;
				flex-direction: row;

				.cell {
					flex: 1;
				}
			}

			.qrcode-logo {
				position: absolute;
				width: 128rpx;
				height: 128rpx;
				bottom: 24rpx;
				right: 24rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.code {
			display: flex;
			flex-direction: row;
			line-height: 40rpx;
			padding: 20rpx 0;

			.label {
				font-size: 26rpx;
				color: #999;
				margin-right: 36rpx;
			}

			.info {
				flex: 1;
				font-size: 22rpx;
				color: #222;
			}
		}

		.order-card-bottom {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding: 20rpx 0 4rpx;
			border-top: solid 1px #f5f7fa;

			.btn {
				margin-left: 28rpx;

				.oper-btn {
					margin: 0;
					width: 152rpx;
					height: 52rpx;
					line-height: 48rpx;
					background: #fff;
					color: #222;
					border: 2rpx solid #ccc;
				}
			}
		}

		.order-card-bottom-sides {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 10rpx;
			border-top: solid 1px #6a6a6a;
			background: linear-gradient(to right, #c1c1c1, #e7efef);

			.btn {
				width: 20%;
				margin-left: 28rpx;
			}
		}

		.card-oper {
			background-color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding: 24rpx;

			.btn {
				width: 25%;
				margin-left: 32rpx;
			}
		}
	}

	.bottom-content {
		position: fixed;
		bottom: 10px;
		display: flex;
		align-items: center;
		line-height: 60rpx;
		width: 100%;
		justify-content: center;
	}

	.material-content {
		padding-bottom: 190rpx;
	}

	.bind-btn {
		width: 50%;
	}

	// button {
	// 	// background:linear-gradient(to right,#4680F9 0%,#00e2fa 80%,#00e2fa 100%);
	// 	background: #4680F9;
	// 	line-height: 100rpx;
	// 	color: #fff;
	// 	border: none;
	// }

	uni-button:after {
		border: none;
	}

	uni-input {
		height: 72rpx;
		padding: 0 10rpx 0 20rpx;
	}

	.uni-forms-item__inner {
		padding: 20rpx 0;
	}

	// /deep/ .u-button--primary {
	// 	background-color: #4680F9;
	// 	border-color: #4680F9;
	// }
</style>