QianNiaoShop/pages/order/OrderAdd.vue

<template>
	<view class="detail-view">
		<view class="top-view clearfix"></view>
		<view class="form-cont">
			<view class="customer-view">
				<view class="title clearfix" @click="goPage('/pagesT/customer/selCustomer')">
					<view class="float_left ellipsis">{{ add_form.customerName }}</view>
					<view class="float_right"><u-icon color="#879BBA" name="arrow-right" size="24"></u-icon></view>
				</view>
				<view class="address-view">
					<view class="remark_cont" v-if="add_form.customerName === '选择客户'">+{{ add_form.deliveryType !== 2 ? '选择收货信息' : '选择自提点' }}</view>
					<block v-else>
						<view @click="openSelect('address_show')" class="remark_particulars" v-if="add_form.deliveryType !== 2">
							<block v-if="address_list.length > 0">
								<view class="clearfix">
									<view class="float_left">联系人：{{ address_list[address_index].name || '--' }}</view>
									<view class="float_right" style="color: #4076D6;">{{ address_list[address_index].mobile || '--' }}</view>
								</view>
								<view class="site">
									{{ address_list[address_index].area.provinceName }}{{ address_list[address_index].area.cityName
									}}{{ address_list[address_index].area.districtName }}{{ address_list[address_index].area.address }}
								</view>
							</block>
							<block v-else>
								<view style="text-align: left;">
									<text style="margin-right: 30rpx;">暂无收货信息</text>
									<u-icon name="plus" size="24" color="#007AFF"></u-icon>
									<text style="color: #007AFF;" @click="goPage(`/pagesT/order/AddShippingAddress?customerId=${add_form.customerId}`)">去新增</text>
								</view>
							</block>
							<view class="arrow-right-icon"><u-icon color="#879BBA" name="arrow-right" size="24"></u-icon></view>
						</view>
						<view @click="openSelect('express_show')" class="remark_particulars" v-else>
							<block v-if="self_express_list.length > 0">
								<view class="clearfix">
									<view class="float_left">自提点：{{ self_express_list[express_rule_index].name || '--' }}</view>
									<view class="float_right" style="color: #4076D6;">{{ self_express_list[express_rule_index].mobile || '--' }}</view>
								</view>
								<view class="site">{{ self_express_list[express_rule_index].addressName }}</view>
							</block>
							<block v-else>
								<view style="text-align: left;">
									<text style="margin-right: 30rpx;">暂无自提点</text>
									<u-icon name="plus" size="24" color="#007AFF"></u-icon>
									<text style="color: #007AFF;" @click="goPage(`/pagesT/order/AddShippingAddress?customerId=${add_form.customerId}`)">去新增</text>
								</view>
							</block>
							<view class="arrow-right-icon"><u-icon color="#879BBA" name="arrow-right" size="24"></u-icon></view>
						</view>
					</block>
				</view>
			</view>
			<view class="form-model-view">
				<view class="title clearfix">
					<view class="float_left ellipsis">商品清单</view>
					<view class="float_right">共{{ goods_list.length }}种商品，{{ numTotal }}件</view>
				</view>
				<view class="btn" v-if="!goods_list.length" @click="selGoods">选择商品</view>
				<view class="goods-view" v-if="goods_list.length">
					<block v-for="(item, index) in goods_list" :key="index"><image v-if="index <= 4" :src="item.images[0]" mode="aspectFill"></image></block>
					<view class="more-goods" @click="openSelect('sel_pop')">查看详情</view>
				</view>

				<view class="form-item clearfix" style="border-top: 1px solid #ECF0F7;padding-top: 20rpx;">
					<view class="label">配送方式</view>
					<view class="value">
						<u-input :placeholder-style="inputStyle" class="dis-input" placeholder="请选择配送方式" disabled v-model="deliveryType_name" @click="openDelivery" />
						<u-icon name="arrow-right" size="24" color="#CAD0D7"></u-icon>
					</view>
				</view>
				<view class="form-item clearfix" v-if="add_form.deliveryType === 3">
					<view class="label">物流类型</view>
					<view class="value">
						<u-input
							:placeholder-style="inputStyle"
							class="dis-input"
							placeholder="请选择物流类型"
							disabled
							v-model="particularsType_name"
							@click="particularsType_show = true"
						/>
						<u-icon name="arrow-right" size="24" color="#CAD0D7"></u-icon>
					</view>
				</view>
				<view class="form-item clearfix">
					<view class="label">支付方式</view>
					<view class="value">
						<u-input :placeholder-style="inputStyle" class="dis-input" placeholder="请选择支付方式" disabled v-model="payType_name" @click="payType_show = true" />
						<u-icon name="arrow-right" size="24" color="#CAD0D7"></u-icon>
					</view>
				</view>
			</view>
			<view class="form-model-view">
				<view class="form-item clearfix importend-item">
					<view class="label">商品总额</view>
					<view class="value">{{ $utils.formattedNumber(totalMoney) }}</view>
				</view>
				<view class="form-item clearfix">
					<view class="label">订单优惠</view>
					<view class="value error-value">
						<input
							placeholder="请输入订单优惠"
							placeholder-class="input-pl"
							:disabled="!$accessCheck($Access.OrderAddeditGoodsPrice)"
							class="dis-input input-sj"
							type="digit"
							@focus="totalReduceMoneyFocus"
							@blur="totalReduceMoneyBlur"
							v-model="add_form.totalReduceMoney"
						/>
					</view>
				</view>
				<view class="form-item clearfix">
					<view class="label">应收</view>
					<view class="value">{{ $utils.formattedNumber(payMoney) }}</view>
				</view>
				<view class="form-item clearfix">
					<view class="label">实收</view>
					<view class="value error-value">
						<input
							class="dis-input input-sj"
							placeholder="请输入实收金额"
							placeholder-class="input-pl"
							:disabled="!$accessCheck($Access.OrderAddeditGoodsPrice)"
							type="digit"
							@focus="receivedMoneyFocus"
							@blur="receivedMoneyBlur"
							v-model="add_form.receivedMoney"
						/>
					</view>
				</view>
				<view class="form-item clearfix importend-item">
					<view class="label">结算账户</view>
					<view class="value">
						<u-input
							:placeholder-style="inputStyle"
							class="dis-input"
							@click="goPage('/pagesT/account/selAccount?shopId=' + account_shopId)"
							placeholder="请选择结算账户"
							disabled
							v-model="accountName"
						/>
						<u-icon name="arrow-right" size="24" color="#CAD0D7"></u-icon>
					</view>
				</view>
			</view>
			<view class="form-model-view">
				<view class="bz-label">订单备注</view>
				<view class="bz-value"><u-input type="textarea" v-model="add_form.remark" /></view>
			</view>
		</view>
		<u-select @confirm="particularsTypeChange" v-model="particularsType_show" label-name="label" value-name="value" :list="particularsType_list"></u-select>
		<u-select @confirm="deliveryTypeChange" v-model="delivery_show" label-name="title" value-name="deliveryType" :list="deliveryType_list"></u-select>
		<u-select @confirm="payTypeChange" v-model="payType_show" label-name="label" value-name="value" :list="payType_list"></u-select>
		<u-popup v-model="sel_pop" mode="bottom">
			<view class="sel-goods-pop">
				<view class="pop-tit clearfix">
					<view class="float_left">本次已选商品</view>
					<view class="float_right" @click="clearGoods">
						<text class="custom-icon custom-icon-shanchu"></text>
						<text>清空</text>
					</view>
				</view>
				<scroll-view class="goods-ul" scroll-y>
					<view class="goods-li" v-for="(item, index) in goods_list" :key="index">
						<view class="goods-name">{{ item.title }}</view>
						<view class="goods-code clearfix">
							<view class="float_left">{{ item.code }}</view>
							<view class="float_right price-input-view">
								<text class="label">单价：</text>
								<input :disabled="!$accessCheck($Access.OrderAddeditGoodsPrice)" class="price-input" type="digit" v-model="item.salePrice" />
								<text class="yuan">元</text>
							</view>
						</view>
						<view class="goods-code clearfix">
							<view class="float_left">
								{{ item.unitName }};
								<text v-for="(sku, skuI) in item.specGroup" :key="skuI">{{ sku.specValueName }};</text>
							</view>
							<view class="float_right" v-if="item.isEq === 4">
								<u-number-box :min="0" :index="index" @change="addBuyNumChange" :value="item.buyNum"></u-number-box>
							</view>
							<view class="float_right" v-else>
								<view class="price-input-view" style="margin-bottom: 10rpx;">
									<text class="label">数量：</text>
									<input class="price-input" type="digit" v-model="item.buyNum" />
								</view>
								<view class="price-input-view">
									<text class="label" style="left: -120rpx;">其他单位：</text>
									<input class="price-input" type="digit" v-model="item.otherNum" />
								</view>
							</view>
						</view>
						<text class="custom-icon custom-icon-shanchu" @click="delGoods(index)"></text>
					</view>
					<view style="padding-top: 100rpx;" v-if="!goods_list.length"><u-empty text="未选择商品" mode="data"></u-empty></view>
				</scroll-view>
			</view>
		</u-popup>
		<u-select v-model="address_show" value-name="id" label-name="name" :list="address_list" @confirm="addressChange"></u-select>
		<u-select v-model="express_show" value-name="id" label-name="name" :list="self_express_list" @confirm="expressChange"></u-select>
		<view class="detail-bottom"><u-button class="handel-btn" @click="submit" :loading="sub_load" :ripple="true" type="primary">提交订单</u-button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sub_load: false,
			sel_pop: false,
			express_show: false,
			address_show: false,
			goodsData: '',
			customerData: '',
			AccountData: '',
			goods_list: [],
			address_list: [],
			address_index: 0,
			deliveryType_list: [], //配送方式
			payType_list: [
				{
					label: '货到付款',
					value: 3
				},
				{
					label: '先款后货',
					value: 9
				}
			],
			particularsType_list: [
				{
					label: '物流专线',
					value: 4
				},
				{
					label: '物流专车',
					value: 5
				}
			],
			self_express_list: [],
			deliveryType_name: '',
			particularsType_name: '', //物流详情名称
			particularsType: '', //物流详情id
			payType_name: '货到付款', //支付方式名称
			delivery_show: false,
			payType_show: false,
			account_shopId: '',
			payWay: 3, //支付方式
			express_rule_index: 0,
			accountName: '',
			shop_id: '',
			order_detail: {},
			add_form: {
				deliveryType: '',
				customerName: '选择客户',
				addressId: '',
				remark: '',
				accountList: '',
				currentAccountName: '',
				receivedMoney: 0,
				lists: [],
				totalMoney: 0,
				payMoney: 0,
				totalReduceMoney: 0,
				userCenterId: '',
				customerId: '',
				selfRuleId: '',
				selfRuleData: '',
				operatorName: '',
				payType: 3 //支付方式id
			},
			rules: {
				customerName: [
					{
						required: true,
						message: '请选择客户',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'change'
					}
				]
			},
			particularsType_show: false
		};
	},
	watch: {
		customerData(val) {
			if (val) {
				this.add_form.userCenterId = val.userCenterId;
				this.add_form.customerId = val.id;
				this.add_form.customerName = val.name;
				this.account_shopId = val.shopId;
				// 获取客户收货地址列表
				if (this.add_form.deliveryType !== 2) {
					this.getAllShippingAddress();
				}
			}
		},
		goodsData(val) {
			if (val) {
				uni.removeStorageSync('orderGoods');
				this.goods_list = val;
			}
		},
		AccountData(val) {
			if (val) {
				this.accountName = val.name;
				this.add_form.accountList = [
					{
						accountId: val.id,
						accountNumber: val.accountNumber,
						accountName: val.name,
						money: this.add_form.receivedMoney,
						discountMoney: 0,
						finalMoney: this.add_form.receivedMoney,
						payWay: this.payWay,
						remark: val.remark
					}
				];
			}
		}
	},
	computed: {
		userName() {
			return this.$store.state.userInfo.name;
		},
		numTotal() {
			if (!this.goods_list.length) {
				return 0;
			} else if (this.goods_list.length === 1) {
				return Number(this.goods_list[0].buyNum);
			} else {
				let sum = 0;
				this.goods_list.forEach(item => {
					sum = sum + Number(item.buyNum);
				});
				return sum;
			}
		},
		// 商品总额
		totalMoney() {
			if (!this.goods_list.length) {
				return 0;
			} else if (this.goods_list.length === 1) {
				return Number(this.goods_list[0].buyNum) * Number(this.goods_list[0].salePrice);
			} else {
				let sum = 0;
				this.goods_list.forEach(item => {
					sum = sum + Number(item.buyNum) * Number(item.salePrice);
				});
				return sum;
			}
		},
		payMoney() {
			return this.totalMoney - this.add_form.totalReduceMoney;
		}
	},
	onShow() {
		this.getAllShippingAddress();
	},
	onLoad(options) {
		if (options.customer) {
			const customer = JSON.parse(options.customer);
			this.add_form.userCenterId = customer.userCenterId;
			this.add_form.customerId = customer.customerId;
			this.add_form.customerName = customer.customerName;
			this.account_shopId = customer.shopId;
			// 获取客户收货地址列表
			this.getAllShippingAddress();
		}
		if (options.id) {
			this.order_id = options.id;
			this.add_form.userCenterId = options.userCenterId;
			uni.setNavigationBarTitle({
				title: '编辑订单'
			});
			this.getOrderInfoById();
		} else {
			this.add_form.currentAccountName = this.userName;
		}
		this.getAllDelivery();
		// 获取自提点
		this.getAllSelfExpressRule();
	},
	methods: {
		// 详情
		getOrderInfoById() {
			this.$u.api
				.getOrderInfoById(this.add_form.userCenterId, {
					orderId: this.order_id
				})
				.then(({ data }) => {
					uni.stopPullDownRefresh();
					this.order_detail = data;
					this.deliveryType_name = data.deliveryName;
					if (data.accountList && data.accountList.length) {
						this.accountName = data.accountList[0].accountName;
					}

					//由于订单是按照店铺拆单的
					// 所以在编辑订单时，增加此订单的商品时应该只能选择本店铺下的商品
					this.shop_id = data.shopId;
					this.account_shopId = data.shopId;
					this.add_form = {
						deliveryType: data.deliveryType,
						customerName: data.customerName,
						addressId: '',
						remark: data.remark,
						accountList: data.accountList,
						currentAccountName: data.currentAccountName,
						receivedMoney: data.receivedMoney,
						totalMoney: data.totalMoney,
						payMoney: data.payMoney,
						totalReduceMoney: data.totalReduceMoney,
						userCenterId: data.userCenterId,
						customerId: data.customerId,
						selfRuleId: data.selfRuleId,
						selfRuleData: data.selfRuleData,
						operatorName: data.operatorName,
						payType: Number(data.payType)
					};
					if (this.add_form.payType === 9) {
						this.payType_name = '先款后货';
					}
					if (this.add_form.deliveryType === 4) {
						this.add_form.deliveryType = 3;
						this.deliveryType_name = '物流';
						this.particularsType = 4;
						this.particularsType_name = '物流专线';
					}
					if (this.add_form.deliveryType === 5) {
						this.add_form.deliveryType = 3;
						this.deliveryType_name = '物流';
						this.particularsType = 5;
						this.particularsType_name = '物流专车';
					}
					this.goods_list = data.goodsData.map(item => {
						return {
							...item,
							salePrice: item.price,
							title: item.goodsName,
							code: item.goodsCode
						};
					});
					if (data.customerId) {
						// 获取客户收货地址列表
						this.getAllShippingAddress(this.add_form.deliveryType !== 2 ? data.receiveData.id : '');
					}
					// if (this.add_form.deliveryType === 2) {
					// 	const selfRuleData = JSON.parse(data.selfRuleData);
					// } else {
					// 	const receiveData = data.receiveData;
					// }
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		openSelect(key) {
			this[key] = true;
		},
		selGoods() {
			if (!this.add_form.customerId) {
				this.$u.toast('请选择客户');
				return;
			}
			uni.setStorageSync('orderGoods', JSON.stringify(this.goods_list));
			this.goPage('/pagesT/goods/selGoods?userCenterId=' + this.add_form.userCenterId + '&shopId=' + this.shop_id);
		},
		// 配送方式
		getAllDelivery() {
			this.$u.api
				.getAllDelivery({
					page: 1,
					pageSize: 100
				})
				.then(res => {
					this.deliveryType_list = res.data;
					const defaultType = res.data.find(item => item.defaultStatus === 5);
					if (defaultType && !this.add_form.deliveryType) {
						this.add_form.deliveryType = defaultType.deliveryType;
						this.deliveryType_name = defaultType.title;
					}
				});
		},
		openDelivery() {
			this.delivery_show = true;
		},
		getAllShippingAddress(id) {
			this.$u.api.getAllShippingAddress(this.add_form.customerId).then(res => {
				if (res.data.length) {
					this.add_form.addressId = res.data[0].id;
					this.address_list = res.data.map(item => {
						return {
							...item,
							name: item.name || item.mobile
						};
					});
				} else {
					this.address_list = [];
				}
			});
		},
		// 获取自提点
		getAllSelfExpressRule() {
			this.$u.api.getAllSelfExpressRule().then(res => {
				this.self_express_list = res.data.map(item => {
					return {
						...item,
						name: item.setData.name,
						mobile: item.setData.mobile,
						addressName: item.setData.provinceName + '-' + item.setData.cityName + '-' + item.setData.districtName + '-' + item.setData.address
					};
				});

				if (res.data.length) {
					this.add_form.selfRuleId = res.data[0].id;
					this.add_form.selfRuleData = res.data[0].setData;
				}
			});
		},
		// 配送方式
		deliveryTypeChange(arr) {
			this.add_form.deliveryType = arr[0].value;
			this.deliveryType_name = arr[0].label;
			if (arr[0].value === 1) {
				this.getAllShippingAddress(this.add_form.customerId);
			} else if (arr[0].value === 2) {
				if (this.self_express_list.length) {
					const target = this.self_express_list[0];
					this.add_form.selfRuleId = target.id;
					this.add_form.selfRuleData = target.setData;
				}
			}
		},
		payTypeChange(e) {
			this.payType_name = e[0].label;
			this.add_form.payType = e[0].value;
		},
		particularsTypeChange(e) {
			this.particularsType_name = e[0].label;
			this.particularsType = e[0].value;
		},
		addressChange(arr) {
			this.add_form.addressId = arr[0].value;
			this.address_index = this.address_list.findIndex(item => item.id === arr[0].value);
		},
		expressChange(arr) {
			this.add_form.selfRuleId = arr[0].value;
			this.add_form.selfRuleData = arr[0].setData;
			this.express_rule_index = this.self_express_list.findIndex(item => item.id === arr[0].value);
		},
		submit() {
			if (!this.goods_list.length) {
				this.$u.toast('请选择商品');
				return;
			}
			if (this.add_form.receivedMoney > 0 && !this.add_form.accountList.length) {
				this.$u.toast('请选择结算账户');
				return;
			}
			let lists = this.goods_list.map(item => {
				return {
					skuId: item.skuId,
					code: item.code,
					goodsId: item.id,
					buyNum: item.buyNum,
					otherNum: item.otherNum,
					shopId: item.shopId,
					basicGoodsId: item.basicGoodsId || item.goodsBasicId,
					goodsName: item.title,
					unitName: item.unitName,
					specGroup: item.specGroup,
					inventory: item.inventory,
					salePrice: item.salePrice,
					subMoney: item.salePrice * item.buyNum,
					shopName: item.shopName,
					goodsImages: item.images[0],
					brandId: item.brandId,
					brandName: item.brandName,
					categoryPath: item.categoryPath,
					categoryName: item.categoryName,
					conversion: item.conversion,
					barCode: item.barCode,
					storageCode: item.storage,
					warehouseId: item.warehouseId,
					originPrice: item.originPrice,
					specType: item.specType,
					supplierId: item.supplierId,
					supplierName: item.supplierName,
					isEq: item.isEq
				};
			});

			let params = {
				...this.add_form,
				totalMoney: this.totalMoney,
				payMoney: this.payMoney,
				operatorName: this.userName
			};
			if (this.particularsType) {
				params.deliveryType = this.particularsType;
			}
			// this.$refs.uForm.validate(valid => {
			// if (valid) {
			if (this.order_id) {
				params.goodsData = lists.map(item => {
					return {
						...item,
						goodsCode: item.code,
						images: [item.goodsImages],
						price: item.salePrice,
						totalMoney: item.subMoney
					};
				});
				this.sub_load = true;
				this.$u.api
					.newOrderEdit(this.order_id, {
						...this.order_detail,
						...params
					})
					.then(res => {
						this.sub_load = false;
						this.$u.toast('修改成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					})
					.catch(res => {
						this.sub_load = false;
					});
			} else {
				params.lists = lists;
				this.sub_load = true;
				this.$u.api
					.newAddOrder(params)
					.then(res => {
						this.sub_load = false;
						this.$u.toast('下单成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					})
					.catch(res => {
						this.sub_load = false;
					});
			}
			// }
			// });
		},
		delGoods(index) {
			this.goods_list.splice(index, 1);
			if (!this.goods_list.length) {
				this.sel_pop = false;
			}
		},
		addBuyNumChange({ value, index }) {
			const target = this.$u.deepClone(this.goods_list);
			if (Number(value) === 0) {
				target.splice(index, 1);
			} else {
				target[index].buyNum = value;
			}
			this.goods_list = target;
		},
		clearGoods() {
			this.goods_list = [];
			this.sel_pop = false;
		},
		barCode() {
			if (!this.add_form.customerId) {
				this.$u.toast('请选择客户');
				return;
			}
			uni.scanCode({
				scanType: ['barCode'],
				success: res => {
					this.sendBarCode(res.result);
				}
			});
		},
		sendBarCode(result) {
			this.$u.api
				.getGoodsByBarCode({
					barCode: result
				})
				.then(res => {
					const detail = res.data.detail;
					const index = this.goods_list.findIndex(item => item.skuId === detail.skuId);
					if (index !== -1) {
						this.$u.toast('该商品已存在');
						return;
					} else {
						this.goods_list.push({
							...detail,
							buyNum: 1
						});
					}
				});
		},
		// 实收输入框获取焦点
		receivedMoneyFocus(key) {
			if (!this.add_form.receivedMoney || this.add_form.receivedMoney <= 0) {
				this.add_form.receivedMoney = '';
			}
		},
		// 实收输入框失去焦点
		receivedMoneyBlur() {
			if (!this.add_form.receivedMoney || this.add_form.receivedMoney <= 0) {
				this.add_form.receivedMoney = 0;
			}
		},
		// 订单优惠输入框获取焦点
		totalReduceMoneyFocus(key) {
			if (!this.add_form.totalReduceMoney || this.add_form.totalReduceMoney <= 0) {
				this.add_form.totalReduceMoney = '';
			}
		},
		// 订单优惠输入框失去焦点
		totalReduceMoneyBlur() {
			if (!this.add_form.totalReduceMoney || this.add_form.totalReduceMoney <= 0) {
				this.add_form.totalReduceMoney = 0;
			}
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		// this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss" scoped>
.top-view {
	background: linear-gradient($uni-color-primary, $uni-color-primary, $uni-color-primary, #f5f5f6 100%);
	height: 360rpx;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: -1;
}

.form-cont {
	transform: translateY(70rpx);
	position: relative;
	z-index: 1;
	padding-bottom: 80rpx;
	.form-model-view {
		width: 710rpx;
		background-color: #ffffff;
		margin: 16rpx auto;
		border-radius: 8rpx;
		padding: 10rpx 32rpx;
		.title {
			padding: 24rpx 0;
			.float_left {
				font-size: 28rpx;
				font-weight: 600;
				color: #2d405e;
			}
			.float_right {
				font-size: 28rpx;
				color: #879bba;
			}
		}
		.btn {
			width: 646rpx;
			height: 106rpx;
			background-color: #ecf0f7;
			color: #4076d6;
			text-align: center;
			line-height: 106rpx;
			font-size: 26rpx;
			border-radius: 12rpx;
			margin: 0 auto 24rpx;
		}
		.goods-view {
			text-align: left;
			position: relative;
			width: 100%;
			margin-bottom: 24rpx;
			image {
				width: 102rpx;
				height: 102rpx;
				border-radius: 8rpx;
				margin: 0 6rpx;
				vertical-align: middle;
				border: 1px solid #ecf0f7;
			}

			.more-goods {
				width: 102rpx;
				height: 102rpx;
				border-radius: 8rpx;
				margin: 0 6rpx;
				display: inline-block;
				background-color: #ecf0f7;
				line-height: 102rpx;
				text-align: center;
				vertical-align: middle;
				font-size: 22rpx;
				color: #4076d6;
			}
		}
		.form-item {
			line-height: 80rpx;
			.label {
				float: left;
				color: #879bba;
			}
			.value {
				float: right;
				width: 400rpx;
				text-align: right;
				.input-sj {
					border-bottom: 1px solid $uni-color-primary;
				}
				&.error-value {
					color: #f67778;
				}
			}
			&.importend-item {
				.label {
					color: #2d405e;
					font-weight: bold;
				}
				.value {
					font-family: DIN-Medium;
					color: #2d405e;
				}
			}
		}
		.bz-label {
			line-height: 80rpx;
			font-weight: bold;
		}
	}
}

.customer-view {
	width: 710rpx;
	background-color: #ffffff;
	margin: 0 auto 34rpx;
	border-radius: 8rpx;
	padding: 0 32rpx;

	.title {
		padding: 32rpx 0 24rpx;

		.float_left {
			font-size: 32rpx;
			font-weight: 600;
			width: calc(100% - 120rpx);
			color: #2d405e;
		}
	}

	.address-view {
		border-top: 1px solid #ecf0f7;
		line-height: 48rpx;
		height: 142rpx;
		font-size: 28rpx;

		.remark_cont {
			width: 170rpx;
			margin: 0 auto;
			line-height: 142rpx;
			color: #4076d6;
			font-size: 26rpx;
		}

		.remark_particulars {
			padding: 24rpx 0;
			padding-right: 24rpx;
			color: #879bba;
			font-size: 26rpx;
			position: relative;
			.arrow-right-icon {
				position: absolute;
				right: -10rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
}

.sel-goods-pop {
	padding-bottom: 1px;

	.pop-tit {
		line-height: 70rpx;
		background-color: #ecf0f7;
		padding: 0 24rpx;
		.float_right {
			font-size: 24rpx;
			color: #666666;
			.custom-icon-shanchu {
				font-size: 26rpx;
				margin-right: 10rpx;
			}
		}
	}

	.goods-ul {
		min-height: 400rpx;
		max-height: 600rpx;

		.goods-li {
			padding: 24rpx;
			position: relative;
			border-bottom: 1px solid #f5f5f5;

			.goods-name {
				width: 660rpx;
			}

			.goods-code {
				padding-top: 10rpx;
				font-size: 24rpx;
				line-height: 50rpx;
				color: #879bba;

				.price-input-view {
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 10rpx;
					border: 1px solid #ecf0f7;
					border-radius: 8rpx;
					width: 212rpx;
					text-align: center;
					color: #333333;
					position: relative;

					.label {
						position: absolute;
						left: -80rpx;
						top: 50%;
						display: block;
						transform: translateY(-50%);
					}

					.price-input {
						width: 150rpx;
						height: 50rpx;
						display: inline-block;
						vertical-align: middle;
						margin-right: 10rpx;
						transform: translateY(-4rpx);
						font-size: 24rpx;
					}

					.yuan {
						color: #879bba;
					}
				}
			}

			.custom-icon-shanchu {
				position: absolute;
				right: 24rpx;
				top: 24rpx;
				width: 40rpx;
				height: 40rpx;
				color: $uni-color-error;
			}
		}
	}

	.btn-view {
		width: 680rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		background-color: $uni-color-primary;
		color: #ffffff;
		text-align: center;
		margin: 20rpx auto;
	}
}
</style>