store/pagesA/pages/send-code/send-code.vue

<template>
	<view class="code">
		<view class="info_box">
			<view class="user flexS" v-if="userInfo">
				<text>客户：</text>
				<view>{{userInfo.nickname|getName(15)||''}}</view>
				<view v-if="userInfo.phone!=userInfo.nickname">{{userInfo.phone||''}}</view>
			</view>
			<view class="info flexS" style="border-top:2rpx solid #eee;">
				<view class="top_left">
					<text>款式</text>
					<text>状态</text>
				</view>
				<view>纯棉版</view>
				<view>精装版</view>
				<view>老人版</view>
				<view>简约版</view>
				<view>总计</view>
			</view>
			<view class="info order_num flexS">
				<view style="line-height: 7vh;">应发货</view>
				<view>{{cottonNum}}</view>
				<view>{{hardNum}}</view>
				<view>{{oldNum}}</view>
				<view>{{simpleNum}}</view>
				<view>{{orderTotal}}</view>
			</view>
			<view class="info num flexS">
				<view style="line-height: 7vh;">已扫码</view>
				<view>{{cotton}}</view>
				<view>{{hard}}</view>
				<view>{{old}}</view>
				<view>{{simple}}</view>
				<view>{{total}}</view>
			</view>
		</view>
		<view class="scroll">
			<scroll-view scroll-y="true">
				<view class="code_box">
					<view class="code_info flexB" v-for="(item,idx) in codeList" :key="idx">
						<text>{{item.security_code}}</text>
						<text>{{item.good_select_id|getGoods}}</text>
						<view class="search_btn" @click="delCode(item.id,idx)">删除</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="fixed_box flexB">
			<view @click="cancel">重新扫描</view>
			<view class="scan_code flexC" @click="scanCode()">扫描</view>
			<view @click="submit">确认发货</view>
		</view>
	</view>
</template>

<script>
	import {
		getUser,
		scanCodeInfo,
		submitCodeInfo,
		orderQuery,
		delScancode
	} from '../../../apis/shop.js'
	export default {
		data() {
			return {
				codeList: [], //防伪码
				userInfo: '', // 用户信息
				cotton: 0, //纯棉老人版
				hard: 0, //精装
				old: 0, //老人
				simple: 0, //简约
				// total: 0, //防伪码数量
				order_no: '', //订单编号
				user_id: '', //用户id
				orderTotal: 0, //订单里的商品数量
				isPoint: true, //是否可以点击
				goods: '', //订商品详情
				cottonNum: 0,
				hardNum: 0,
				oldNum: 0,
				simpleNum: 0,
				goods_id: [],
				ids: [] //重新扫描时需要删除的id合集
			}
		},
		onLoad(ops) {
			this.getOrder(ops.order_no);
			this.order_no = ops.order_no;
		},
		computed: {
			total() {
				return this.cotton + this.hard + this.old + this.simple || 0
			}
		},
		filters: {
			getGoods(id) {
				switch (id) {
					case 1:
						return '精装版'
						break;
					case 2:
						return '简约版'
						break;
					case 3:
						return '老人版'
						break;
					case 4:
						return '纯棉老人版'
						break;
					default:
						break;
				}
			},
		},
		methods: {
			//总件数
			totalNum(data) {
				let total = 0
				for (let k in data) {
					total += data[k].sku.reduce((t, e) => t + Number(e.num), 0)
				}
				return total;
			},
			/*获取订单详情*/
			getOrder(order_no) {
				orderQuery({
						order_no
					})
					.then(res => {
						if (res.code == 200) {
							let list = res.data;
							const {
								code,
								goods
							} = res.data;
							code.map(j => {
								this.codeList.push({
									good_select_id: j.good_select_id,
									code: j.code,
									security_code: j.security_code,
									id: j.id,
								})
								this.ids.push(j.id)
								this.changeNum(j.good_select_id, true)
							})
							goods.map(i => {
								let num = i.sku.reduce((t, e) => t + Number(e.num), 0);
								if (i.id == 1) {
									this.hardNum = num
								}
								if (i.id == 2) {
									this.simpleNum = num
								}
								if (i.id == 3) {
									this.oldNum = num
								}
								if (i.id == 4) {
									this.cottonNum = num
								}
								this.goods_id.push(i.id);

							})
							this.userInfo = res.data.user;
							this.orderTotal = this.totalNum(goods)
						} else {
							uni.showModal({
								content: res.data || '获取订单详情失败',
								showCancel: false
							});
						}
					})
					.catch(err => {});
			},
			//扫码发货
			submit() {
				let code = [];
				this.codeList.map(i => {
					if (!i.id) {
						code.push(i.code)
					}
				})
				if (this.codeList.length != this.orderTotal) {
					uni.showModal({
						content: '发货防伪码数量与订单套数不一致',
						showCancel: false
					})
					return false;
				};
				if (code.length == 0) {
					uni.redirectTo({
						url: '../delivery-method/delivery-method?user_id=' +
							this.userInfo.id + '&order_no=' + this
							.order_no
					})
					return false
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				submitCodeInfo({
					code,
					order_no: this.order_no
				}).then(res => {
					if (res.code == 200) {
						uni.showModal({
							content: '发货防伪码提交成功',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.redirectTo({
										url: '../delivery-method/delivery-method?user_id=' +
											this.userInfo.id + '&order_no=' + this
											.order_no
									})
								}
							}
						})
					} else {
						uni.showModal({
							content: res.data || '提交失败',
							showCancel: false
						})
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			changeNum(id, type) {
				switch (id) {
					case 1:
						type ? this.hard++ : this.hard--
						return '精装版'
						break;
					case 2:
						type ? this.simple++ : this.simple--
						return '简约版'

						break;
					case 3:
						type ? this.old++ : this.old--
						return '老人版'
						break;
					case 4:
						type ? this.cotton++ : this.cotton--
						return '纯棉老人版'
						break;
					default:
						break;
				}
			},
			//重新扫描  
			cancel() {
				uni.showModal({
					content: '确定要重新扫描吗，重新扫描将清除所有数据',
					success: res => {
						if (res.confirm) {
							if (this.ids.length == 0) {
								this.codeList = [];
								this.cotton = this.hard = this.old = this.simple = 0;
								return false
							}
							delScancode({
								ids: this.ids
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功'
									})
									this.ids = [];
									this.codeList = [];
									this.cotton = this.hard = this.old = this.simple = 0;
								} else {
									uni.showModal({
										content: res.data || '删除失败',
										showCancel: false
									})
								}
							})
						}
					}
				})
			},
			//删除
			delCode(id, idx) {
				uni.showModal({
					content: '确定要删除当前数据吗？',
					success: res => {
						if (res.confirm) {
							if (id) { //删除已提交的code码
								this.delOrderCode(id, idx);
								return false;
							}
							this.changeNum(this.codeList[idx].good_select_id, false)
							this.codeList.splice(idx, 1)
							uni.showToast({
								title: '删除成功'
							})
						}
					}
				})
			},
			//删除订单列表中的code
			delOrderCode(id, idx) {
				let ids = [id]
				delScancode({
					ids
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功'
						})
						//删除数组中的id
						let index = this.ids.indexOf(id)
						if (index > -1) {
							this.ids.splice(index, 1);
						}
						this.changeNum(this.codeList[idx].good_select_id, false)
						this.codeList.splice(idx, 1)
					} else {
						uni.showModal({
							content: res.data || '删除失败',
							showCancel: false
						})
					}
				})
			},
			//直接扫码发货
			scanCode() {
				let list = [];
				this.codeList.map(i => {
					list.push(i.code)
				})
				uni.scanCode({
					success: res => {
						var idx = res.result.lastIndexOf("\?"); //idx等于-1代表扫的是新码
						var index = idx === -1 ? res.result.lastIndexOf("\/") : res.result;
						let codeNum = res.result.substring(index + 1, res.result.length);
						if (list.indexOf(codeNum) === -1) {
							uni.showLoading({
								title: '识别中...'
							})
							scanCodeInfo({
								code: codeNum
							}).then(res => {
								if (res.code == 200) {
									if (this.goods_id.indexOf(res.data.good_select_id) === -1) {
										uni.showModal({
											content: '订单不存在此规格',
											showCancel: false
										})
										return false;
									}
									this.changeNum(res.data.good_select_id, true)
									if (this.hard > this.hardNum || this.cotton > this.cottonNum ||
										this.simple > this.simpleNum || this
										.old > this.oldNum) {
										uni.showModal({
											content: '超出此规格数量',
											showCancel: false,
										})
										this.changeNum(res.data.good_select_id, false)
										return false;
									}
									this.codeList.push({
										good_select_id: res.data.good_select_id,
										code: res.data.code,
										security_code: res.data.security_code,
										id: '',
									})
								} else {
									uni.showModal({
										content: res.data || '扫码失败，请重试',
										showCancel: false
									})
								}
								uni.hideLoading()
							}).catch(err => {
								uni.hideLoading()
							})
						} else {
							uni.showModal({
								content: '防伪码已存在',
								showCancel: false
							})
						}
					},
					fail: err => {
						uni.showModal({
							content: '扫码失败',
							showCancel: false
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.code {
		width: 100%;
		height: 100vh;
		position: relative;

		.info_box {
			width: 100%;
			height: 28vh;

			.top_left {
				position: relative;

				text {
					position: absolute;
				}

				text:first-child {
					top: 2rpx;
					right: 7rpx;
				}

				text:last-child {
					bottom: 2rpx;
					left: 7rpx;
				}

				&::after {
					display: block;
					content: '';
					width: 147rpx;
					height: 2rpx;
					background: #eee;
					transform: rotate(34deg);
					position: absolute;
					top: 43rpx;
					left: -12rpx;
				}

			}

			.info,
			.user {
				width: 100%;
				height: 7vh;

				view,
				text {
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.info {
				>view {
					width: 20%;
					text-align: center;
					height: 7vh;
					border-right: 2rpx solid #EEEEEE;
				}

				>view:not(:first-child) {
					line-height: 7vh;
				}
			}

			.user {
				padding-left: 30rpx;
				box-sizing: border-box;
			}


			.num {
				background: #FFF4F3;

				view {
					color: $base-color;
				}
			}

			.order_num {
				background: #f8f8f8;

				view {
					color: #333;
				}
			}
		}

		.scroll {
			width: 100%;
			height: 68vh;

			scroll-view {
				width: 100%;
				height: 100%;
			}

			.code_box {
				padding-bottom: 140rpx;
				width: 100%;

				.code_info {
					width: 100%;
					padding: 0 24rpx;
					box-sizing: border-box;
					height: 104rpx;

					text {
						width: 33.33%;
						text-align: left;
						font-size: 32rpx;
					}
				}

				.code_info:nth-child(2n) {
					background: #F8F8F8;
				}
			}
		}
	}

	.fixed_box {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		box-shadow: 0px -4rpx 24rpx rgba(0, 0, 0, 0.1);
		bottom: 0;
		left: 0;
		padding: 0 50rpx;
		box-sizing: border-box;

		view {
			font-size: 32rpx;
			color: $base-color;
			font-weight: bold;
		}

		.scan_code {
			width: 172rpx;
			height: 172rpx;
			background: $base-line-bg;
			box-shadow: 0px 6rpx 20rpx rgba(254, 34, 0, 0.43);
			font-size: 40rpx;
			border-radius: 50%;
			color: #fff;
			margin-top: -108rpx;
			letter-spacing: 5rpx;
		}
	}
</style>