yanzong_qianduan/pages/news3/ManualEntry.vue

<template>
	<view style="padding-bottom: 60rpx;">
		<view class="section">
			<u-field v-model="form.goods_name" label="商品名称" placeholder="请输入商品名称">
			</u-field>
			<u-field v-model="form.goods_sn" label="商品型号" placeholder="请输入商品型号">
			</u-field>
			<u-field v-model="form.goods_price" label="商品价格" placeholder="请输入商品价格">
			</u-field>
			<u-field v-model="form.goods_num" type="number" label="商品数量" placeholder="请输入商品数量">
			</u-field>
		</view>
		<view class="section" style="padding-top: 26upx;">
			<u-input class="realAddr" type="textarea" placeholder="请粘贴或输入文本，点击“识别”自动识别姓名、电话和地址" v-model="content">
			</u-input>
			<view class="btnContent">
				<view class="btn" @click="onIntelligence" :style="{'opacity': content?1:0.6 }">
					识别
				</view>
			</view>
		</view>
		<view class="section">
			<u-field v-model="form.receiver" label="收货人" placeholder="请输入收货人姓名">
			</u-field>
			<u-field v-model="form.receiver_phone" label="手机号" @input="handleInput" maxlength="11" type="number" placeholder="请输入收货人手机号">
			</u-field>
			<u-field @click="cityShow=true" v-model="city" :disabled="true" label="所属城市" placeholder="请选择所属城市"
				right-icon="arrow-right">
			</u-field>
			<u-picker mode="region" v-model="cityShow" @confirm="regionChage">{{form.city}}</u-picker>
			<view class="addrDetail">
				<view class="addrTitle">
					详细地址
				</view>
				<u-input type="textarea" v-model="form.detail" placeholder="请输入详细地址"></u-input>
			</view>
		</view>
		<view class="section">
			<picker @change="changeMode" mode="selector" range-key="text" :value="index" :range="modeList">
				<u-field v-model="send_name" :disabled="true" label="发货模式" placeholder="请选择发货模式"
					right-icon="arrow-right">
				</u-field>
			</picker>
			<u-field v-model="form.send_company" label="发货公司" placeholder="请输入发货公司">
			</u-field>
			<u-field v-model="form.sender" label="发货人" placeholder="请输入发货人">
			</u-field>
			<u-field v-model="form.send_phone" label="发货人电话" type="number" @input="handleSendInput" maxlength="11" placeholder="请输入发货人电话">
			</u-field>
			<picker @change="changeOption" mode="selector" range-key="express_name" :value="index" :range="expressList">
				<u-field v-model="form.express_name" :disabled="true" label="物流公司" placeholder="请选择物流公司"
					right-icon="arrow-right">
				</u-field>
			</picker>
			<u-field v-model="form.express_no" label="物流单号" placeholder="请输入物流单号">
			</u-field>
		</view>
		<view class="recordList">
			<view class="recordItem c">
				<view class="recordTitle">
					转账记录<text class="intro">最多上传6张</text>
				</view>
				<u-upload :action="action" :header="header" @on-uploaded="transferSuccess" width="180" height="180"
					:file-list="transferList" :custom-btn="true" max-count="6">
					<template v-slot:addBtn>
						<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image src="/static/news/icon-upload.png"></image>
							<view class="1">上传图片</view>
						</view>
					</template>
				</u-upload>
			</view>
			<view class="recordItem c">
				<view class="recordTitle">
					聊天记录<text class="intro">最多上传6张</text>
				</view>
				<u-upload :action="action" :header="header" @on-uploaded="chatSuccess" width="180" height="180"
					:file-list="chatList" :custom-btn="true" max-count="6">
					<template v-slot:addBtn>
						<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image src="/static/news/icon-upload.png"></image>
							<view class="1">上传图片</view>
						</view>
					</template>
				</u-upload>
			</view>
		</view>
		<view class="footerBtn" @click="onSubmit">
			提交
		</view>
	</view>
</template>

<script>
	import * as UploadApi from '@/api/upload'
	import * as newFunApi from '@/api/newFun'
	import Config from '@/core/config'
	export default {
		data() {
			return {
				city: null,
				send_name: null,
				express_name: null,
				form: {
					goods_sn: '',
					goods_num: null,
					goods_price: '',
					receiver: '',
					receiver_phone: '',
					detail: '',
					send_type: null,
					send_company: '',
					sender: '',
					send_phone: '',
					express_id: '',
					express_no: '',
					transfer_image_id: '',
					chat_image_id: '',
					goods_name: '',
					province_id: '',
					city_id: '',
					region_id: ''
				},
				content: '',
				modeList: [{
					text: '店内现货',
					id: 0,
				}, {
					text: '仓库发货',
					id: 1,
				}],
				cityShow: false,
				transferList: [],
				chatList: [],
				expressList: [],
				action: '',
				action:'',
			}
		},
		onReady() {
			this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
			this.header = {
				'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
				'Access-Token': uni.getStorageSync('AccessToken'),
				'platform': "MP-WEIXIN",
			}
			this.getExpressAll()
		},
		methods: {
			// 智能识别
			onIntelligence() {
				if (!this.content) {
					return this.$toast('请输入识别内容')
				}
				newFunApi.analysis({
						content: this.content
					})
					.then(res => {
						if (res.status) {
							let data = res.data.detail
							this.form.city = data.region.province + data.region.city + data.region.region;
							this.form.receiver = data.name
							this.form.receiver_phone = data.phone
							this.form.detail = data.detail
							uni.showToast({
								title: '识别成功',
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '识别失败',
								icon: 'none',
								duration: 2000
							})
						}
					})
					.finally()
			},
			// 提交信息
			async onSubmit() {
				const that = this;
				if (!that.form.goods_name) {
					return that.$toast('请选择商品名称')
				}
				if (!that.form.goods_sn) {
					return that.$toast('请选择商品型号')
				}
				if (!that.form.goods_price) {
					return that.$toast('请输入商品价格')
				}
				if (!that.form.goods_num) {
					return that.$toast('请输入商品数量')
				}
				if (!that.form.receiver) {
					return that.$toast('请输入收货人姓名')
				}
				if (!that.form.receiver_phone) {
					return that.$toast('请输入收货人手机号')
				}
				if (!that.city) {
					return that.$toast('请选择所属城市')
				}
				if (!that.form.detail) {
					return that.$toast('请输入详细地址')
				}
				if (!that.send_name) {
					return that.$toast('请选择发货模式')
				}
				if (!that.form.send_company) {
					return that.$toast('请输入发货公司')
				}
				if (!that.form.sender) {
					return that.$toast('请输入发货人')
				}
				if (!that.form.send_phone) {
					return that.$toast('请输入发货手机号')
				}
				if (!that.express_name) {
					return that.$toast('请选择物流公司')
				}
				if (!that.form.express_no) {
					return that.$toast('请输入物流单号')
				}
				if (!that.form.transfer_image_id) {
					return that.$toast('请上传转账记录')
				}
				let {
					status,
					message,
					data
				} = await newFunApi.addTransfer(that.form);
				if (status == 200) {
					uni.showToast({
						title: "录入成功"
					})
					setTimeout(function() {
					   uni.$emit('refreshData');
					   uni.navigateBack({
					   	delta: 1
					   })
					}, 2000);
				}
			},
			handleSendInput(e) {
				if (this.validatePhoneNumber(event.target.value)) {
					this.form.send_phone = event.target.value
				} else {
					this.form.send_phone = ''
				}
			},
			handleInput(e) {
				if (this.validatePhoneNumber(event.target.value)) {
					this.form.receiver_phone = event.target.value
				} else {
					this.form.receiver_phone = ''
				}
			},
			validatePhoneNumber(phone) {
				var regExp = /^1[3456789]\d{9}$/;
				if (regExp.test(phone)) {
					return true;
				} else {
					return this.$toast('手机号不合法')
					return false;
				}
			},
			changeMode(e) {
				this.send_name = this.modeList[e.detail.value].text;
				this.form.send_type = this.modeList[e.detail.value].id;
			},
			// 选择物流
			changeOption(e) {
				this.express_name = this.expressList[e.detail.value].express_name;
				this.form.express_id = this.expressList[e.detail.value].express_id
			},
			/**
			 * 物流
			 */
			async getExpressAll() {
				let {
					status,
					message,
					data
				} = await newFunApi.expressAll();
				if (status == 200) {
					this.expressList = data.list;
				}
			},
			regionChage(e) {
				console.log(e)
				this.city = e.province.name + e.city.name + e.area.name;
				this.form.province_id = e.province.code;
				this.form.city_id = e.city.code
				this.form.region_id = e.area.code
			},
			//接受上传返回的数据
			transferSuccess(list) {
				console.log(list)
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.form.transfer_image_id = idList.join(',');
					}
				}
			},
			//接受上传返回的数据
			chatSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.form.chat_image_id = idList.join(',');
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		min-height: 100%;
		background-color: #F7F8FA;
		padding-bottom: 96upx;
	}

	.section {
		background-color: #fff;
		padding: 0 36upx;
		margin-top: 16upx;

		.realAddr {
			padding: 40upx 0 !important;

			::v-deep .uni-input-wrapper {
				text-align: left !important;
			}

			::v-deep .uni-input-placeholder {
				white-space: pre-wrap;
			}
		}

		.btnContent {
			display: flex;
			justify-content: flex-end;
			padding-bottom: 30upx;
		}

		.btn {
			width: 120upx;
			height: 50upx;
			background: #FE483B;
			border-radius: 19px 19px 19px 19px;
			opacity: 1;
			line-height: 50upx;
			text-align: center;

			font-size: 24upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;

		}

		.addrDetail {
			padding: 0 10upx;

			.addrTitle {

				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #303030;
				margin-top: 32upx;
			}
		}
	}

	.selectContent {
		border-top: 1px solid transparent;
		margin-top: 6upx;
		padding-bottom: 100upx;
	}

	::v-deep .u-field {
		padding: 20upx !important;
	}

	::v-deep .uni-input-wrapper {
		text-align: right;
	}

	::v-deep .u-label {
		flex: auto !important
	}

	::v-deep .u-flex-1 {
		width: 400upx;
	}

	::v-deep .u-flex-1,
	::v-deep .fild-body {
		text-align: right;
		margin: 0 !important;
	}
	::v-deep .u-input__textarea{
		padding: 40upx 0 20upx 0 !important;
	}
	.recordList {
		padding: 30upx;
		background-color: #fff;
		margin-top: 14upx;

		.recordItem {
			.recordTitle {

				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #353535;
				margin-bottom: 20upx;

				.intro {

					font-size: 24upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #9F9F9F;
					margin-left: 28upx;
				}

			}

			.picList {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				margin: 12upx 0;
				text-align: center;

				image {
					width: 200upx;
					height: 160upx;

				}
			}
		}
	}

	.footerBtn {
		width: 86%;
		height: 88upx;
		background: #FF5050;
		border-radius: 36px 36px 36px 36px;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 88upx;
		text-align: center;
		margin: 76upx auto 0upx auto;

	}

	.c {
		padding-top: 20rpx;
		overflow: hidden;

		.slot-btn {
			width: 180rpx;
			height: 180rpx;
			background: #F6F6F6;
			border-radius: 10rpx;
			border: 1px solid #C0C0C0;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #6D6D6D;

			.l {
				line-height: 30rpx;
			}

			image {
				width: 50rpx;
				height: 50rpx;
				display: block;
				margin: 0 auto;
				margin-top: 30rpx;
			}
		}
	}
</style>