yanzong_qianduan/pages/news3/seasoningCondimentsRecord.vue

<template>
	<view style="padding-bottom: 42rpx;">
		<view class="selectContent" style="border:none;background-color: #fff;">
			<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" type="number" @input="handleInput" maxlength="13" label="发货人电话"
				placeholder="请输入发货人手机号">
			</u-field>
			<picker @change="changeOption" mode="selector" range-key="express_name" :value="index" :range="expressList">
				<u-field v-model="express_name" :disabled="true" label="物流公司" placeholder="请选择物流公司"
					right-icon="arrow-right">
				</u-field>
			</picker>
			<view class="wuliu">
				<u-field class='fanfan' style="flex: 1;padding:30upx 0 30upx 30upx" v-model="form.express_no"
					label="物流单号" placeholder="请填写物流单号">
				</u-field>
				<view class="getWuliu" @click="onLogistics">
					查看物流
				</view>
			</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"
						@on-remove="onRemoveTransfer" 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"
						@on-remove="onRemoveChat" 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>
		<view class="footerBtn" @click="onSubmit">
			保存
		</view>
	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	import Config from '@/core/config'
	export default {
		data() {
			return {
				send_name: '',
				express_name: '',
				form: {},
				modeList: [{
					text: '店内现货',
					id: 0,
				}, {
					text: '仓库发货',
					id: 1,
				}],
				expressList: [],
				action: '',
				action: '',
				transferList: [],
				handleList: [],
				chatList: [],
				handChatList: [],
			}
		},
		onLoad(o) {
			this.form = JSON.parse(o.item)
			this.send_name = this.modeList[this.form.send_type].text;
			this.transferList = this.form.transfer_image_ids;
			this.chatList = this.form.chat_image_ids;
			console.log(this.form)
			if (this.form.transfer_image_ids) {
				let list = this.form.transfer_image_ids
				list.forEach(item => {
					item.url = item.file_path;
				});
				this.transferList = list
			}
			if (this.form.chat_image_ids) {
				let list = this.form.chat_image_ids
				list.forEach(item => {
					item.url = item.file_path;
				});
				this.chatList = list
			}
		},
		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: {
			handleInput(e) {
				if (this.validatePhoneNumber(event.target.value)) {
					this.form.send_phone = event.target.value
				} else {
					this.form.send_phone = ''
				}
			},
			validatePhoneNumber(phone) {
				var regExp = /^1[3456789]\d{9}$/;
				if (regExp.test(phone)) {
					return true;
				} else {
					return this.$toast('手机号不合法')
					return false;
				}
			},
			// 提交信息
			async onSubmit() {
				const that = this;
				// 转账记录
				let trList = []
				this.transferList = this.transferList.concat(this.handleList);
				this.transferList.forEach(item => {
					trList.push(item.file_id)
				});
				this.form.transfer_image_id = trList.join(',');
				// 聊天记录
				let atList = []
				this.chatList = this.chatList.concat(this.handChatList);
				this.chatList.forEach(item => {
					atList.push(item.file_id)
				});
				this.form.chat_image_id = atList.join(',');
				console.log(that.form)
				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 parmes = {
					id: that.form.id,
					send_type: that.form.send_type,
					send_company: that.form.send_company,
					sender: that.form.sender,
					send_phone: that.form.send_phone,
					express_no: that.form.express_no,
					express_id: that.form.express_id,
					chat_image_id: that.form.chat_image_id,
					transfer_image_id: that.form.transfer_image_id,
				}
				let {
					status,
					message,
					data
				} = await newFunApi.editTransfer(parmes);
				if (status == 200) {
					uni.showToast({
						title: "录入成功"
					})
					setTimeout(function() {
						uni.$emit('refreshData');
						uni.navigateBack({
							delta: 1
						})
					}, 2000);
				}
			},
			changeMode(e) {
				this.form.setGoodsMode = this.modeList[e.detail.value].text;
			},
			// 选择物流
			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;
					this.express_name = this.findNameById(this.expressList, this.form.express_id)
				}
			},
			// 通过ID查找名称
			findNameById(array, express_id) {
				const result = array.find((item) => item.express_id === express_id);
				return result.express_name;
			},

			onLogistics() {
				uni.navigateTo({
					url: "/pages/news3/LogisticsDetails?logisticsNum=" + this.form.express_no
				})
			},
			onRemoveTransfer(index) {
				this.transferList.splice(index, 1)
			},
			onRemoveChat(index) {
				this.chatList.splice(index, 1)
			},
			//接受上传返回的数据
			transferSuccess(list) {
				let nList = []
				list.forEach(item => {
					if (item.response) {
						nList.push(item)
					}
				});
				list = nList
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						this.handleList = []
						list.forEach(item => {
							this.handleList.push(item.response.data.fileInfo)
						});
					}
				}
			},
			//接受上传返回的数据
			chatSuccess(list) {
				let nList = []
				list.forEach(item => {
					if (item.response) {
						nList.push(item)
					}
				});
				list = nList
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						this.handChatList = []
						list.forEach(item => {
							this.handChatList.push(item.response.data.fileInfo)
						});
					}
				}
			},
		}
	}
</script>

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

	}

	.selectContent {
		border-top: 1px solid transparent;
		margin-top: 6upx;
		padding: 0 40upx !important;
	}

	::v-deep .u-border-bottom:after {
		border: none;
	}

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

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

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

	::v-deep .u-flex-1 {
		width: 360upx !important;
		text-align: right !important;
		color: #B0B0B0 !important;
		margin: 0 !important;
	}

	.wuliu {
		display: flex;
		align-items: center;

		.fanfan {
			padding-right: 0 !important;
		}

		.getWuliu {
			width: 130upx;
			height: 56upx;
			background: #FFFFFF;
			border-radius: 19px 19px 19px 19px;
			opacity: 1;
			border: 1px solid #F55349;

			font-size: 24upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #F55349;
			line-height: 52upx;
			text-align: center;
			margin-left: 10upx;

		}
	}

	.recordList {
		padding: 0 0 30upx 0;

		.recordItem {
			.recordTitle {
				margin-bottom: 10upx;
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #353535;

			}

			.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: 42upx auto 0 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>