zd2.0/pages/shop/cartAciton.vue

<template>
	<view class="content padding-t-30">
		<view class="listBox">
			<view class="list">
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">店铺名称</text>
					</view>
					<view class="right flex">
						<text>{{shopAction.name}}</text>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">车辆品牌</text>
					</view>
					<view class="right flex">
						<text>{{cartName}}</text>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">客户名称</text>
					</view>
					<view class="right flex">
						<text>{{userName}}</text>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">客户手机</text>
					</view>
					<view class="right flex">
						<text>{{userPhone}}</text>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">车架号</text>
					</view>
					<view class="right flex">
						<input class="input" type="text" v-model="cartId" placeholder="请输入车架号"
							placeholder-class="placeholder" />
						<image @click="openScend" class="img margin-l-10" src="../../static/icon/scend.png"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">批次</text>
					</view>
					<view class="right flex">
						<picker class="input" mode="selector" range-key='name' :range="pcList" @change="changePc">
							<view class="flex items-right">
								<view class="margin-r-10" v-if="pcList.length>0">
									{{pcList[pcIndex].name}}
								</view>
								<image class="iconTip" src="../../static/icon/dom.png" mode="aspectFit"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">型号</text>
					</view>
					<view class="right flex">
						<picker class="input" mode="selector" range-key='name' :range="typeList" @change="changeType">
							<view class="flex items-right">
								<view class="margin-r-10"  v-if="typeList.length>0">{{typeList[tpyeIndex].name}}</view>
								<image class="iconTip" src="../../static/icon/dom.png" mode="aspectFit"></image>
							</view>
							
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view :class="{bgGray:loding}" class="add-btn" @click="confirm">提交</view>
	</view>
</template>

<script>
	import {
		orderDetail,
		set_car_number,
		batch,
		carType
	} from '@/api/shop.js';
	// #ifdef H5
	import weixinObj from "@/plugin/jweixin-module/index.js";
	import {
		weixindata
	} from "../../utils/wxAuthorized.js"
	// #endif
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState('shop', ['shopAction'])
		},
		watch: {
			cartId(newValue, oldValue) {
				for (let i = 0; i < this.pcList.length; i++) {
					if(+this.pcList[i].lan == newValue.length){
						this.changePc({
							detail:{
								value:i
							}
						})
						break
					}
				}
			}
		},
		data() {
			return {
				pcIndex: 0, //当前选中的批次
				tpyeIndex: 0, //当前选中的类型
				cartId: '', //车架号
				userName: '',
				userPhone: '',
				cartName: '',
				orderid: '', //保存订单id
				loding: false, //啊判断是否上传中
				pcList: [], //车辆批次列表
				typeList: [] //车辆类型列表
			}
		},
		onLoad(option) {
			this.orderid = option.id;
			this.getOrderDetail();
			// 获取车辆批次
			this.batch();
			this.carType();
		},
		methods: {
			batch() {
				batch().then((e) => {
					this.pcList = e.data;
					console.log(e);
				}).catch((e) => {
					console.log(e);
				})
			},
			carType() {
				carType().then((e) => {
					this.typeList = e.data;
					console.log(e);
				})
			},
			// 车辆批次切换
			changePc(e) {
				this.pcIndex = e.detail.value;
				console.log(e, '切换');
			},
			// 车辆类型切换
			changeType(e) {
				this.tpyeIndex = e.detail.value;
				console.log(e, '切换');
			},
			// 提交事件
			confirm() {
				if (!this.cartId) {
					uni.showModal({
						title: '提示',
						content: '请扫码或输入车架号',
						showCancel: false,
					});
					return
				}
				if (this.loding) {
					return
				}
				this.loding = true;
				set_car_number({
					order_id: this.orderid,
					car_number: this.cartId,
					car_batch: this.pcList[this.pcIndex].value,
					car_type: this.typeList[this.tpyeIndex].value,
				}).then((e) => {
					this.loding = false;
					uni.showModal({
						title: '提示',
						content: '车辆激活成功过!',
						showCancel: false,
						success: res => {
							uni.navigateBack()
						},
					});

					console.log(e);
				}).catch((e) => {
					this.loding = false;
					console.log(e);
				})

			},
			getOrderDetail() {
				let that = this;
				orderDetail({}, that.orderid).then(({
					data
				}) => {
					that.userName = data.real_name;
					that.userPhone = data.user_phone;
					that.cartName = data._info[0].cart_info.productInfo.store_name
					console.log(data, '数据');
				}).catch((e) => {
					console.log(e);
				})
			},
			openScend() {
				let that = this;
				// #ifdef H5
				weixindata().then(() => {
					weixinObj.scanQRCode({
						needResult: 1,
						success: (data) => {
							that.cartId = data.resultStr;
						}
					});
				})
				// #endif
				// #ifndef H5
				uni.scanCode({
					success: (e) => {
						// 保存二维码
						that.cartId = e.result;
						console.log(e);
					},
					fail() {
						console.log(e);
					}
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	.listBox {
		margin: $page-row-spacing;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.list {
		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;
			.iconTip {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;
			justify-content: flex-end;
			padding-left: 20rpx;

			.img {
				width: 36rpx;
			}
		}

		.input {
			flex-grow: 1;
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
		}

		.titleBox {
			flex-shrink: 0;

			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}

	.add-btn {
		background-color: $color-green;
		font-size: 28rpx;
		padding: 30rpx;
		color: #FFFFFF;
		margin: 0 50rpx;
		border-radius: 100rpx;
		margin-top: 100rpx;
		text-align: center;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 95;

		&.bgGray {
			background-color: $font-color-disabled;
		}
	}
</style>