distribution-uni/package1/index/feedBack.vue

<!-- 底部菜单--库存--新增商品 -->
<template>
	<view>
		<view class="formBox">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="170rpx">
				<uni-forms-item label="问题图片" name="productPicture">
					<view v-if="formData.productPicture !=''">
						<img :src="formData.productPicture" alt="" class="upload-img">
					</view>
					<u-upload :fileList="formData.productPicture" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1"></u-upload>
				</uni-forms-item>
				<uni-forms-item label="问题说明" name="productIntro">
					<uni-easyinput type="textarea" autoHeight v-model="formData.productIntro" placeholder="请简要描述问题"
						trim="all" />
				</uni-forms-item>
			</uni-forms>

			<u-button type="primary" @tap.stop="submit()">保存</u-button>
			
		</view>
		<view class="make-call" @tap="makeCall('15533910775')">联系客服</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				formData: {
					productPicture: '',
					productIntro: ''
				},
				categoryList: [],
				productId:'',
				arrtList: [],
				arrtChange: [],
				dataList:[],
				shopName:'',
				rules: {
					productIntro: {
						rules: [{
							required: true,
							errorMessage: '请简要描述问题',
						}, ],
					}
				}
			}
		},
		onLoad(option) {
			this.shopName = uni.getStorageSync('shopName')
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				
				let lists = [].concat(event.file)
				if (this.formData.productPicture == undefined) this.formData.productPicture = [];
				let fileListLen = this[`fileList${event.name}`].length
				
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let that = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.tui.interfaceUrl() + '/upload/file',
						filePath: url,
						name: 'file',
						header: {
							"content-type": "multipart/form-data",
							'accessToken': this.tui.getToken()
						},
						formData: {},
						success: (uploadFileRes) => {
							
							let path = JSON.parse(uploadFileRes.data)
							//后端返回的地址，存入图片地址
							this.formData.productPicture = path.result
						}
					});
				})
			},
			makeCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone + ''
				});
			},
			// 触发提交表单
			submit() {
				let that = this;
				let url = ''
				this.$refs.form.validate().then(res => {
					that.tui.request('/app/problemFeedback/saveOrUpdateProblemFeedback', "post", {
						problemPicture:that.formData.productPicture,
						problemContent:that.formData.productIntro,
						shopName:this.shopName
					}, false, false).then((res1) => {
						if (res1.code == 200) {
							this.tui.toast('反馈成功！')
							setTimeout(res=>{
								uni.navigateBack({
									delta: 2
								})
							},1000)
							
						} else {
							uni.showToast({
								title: "添加失败",
								icon: 'none'
							})
						}
					})
				}).catch(err => {
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formBox {
		margin: 20rpx;
		padding: 20rpx 26rpx;
		border-radius: 14rpx;
		box-shadow: 0px 1px 10px 2px #e2e2e2;
		background-color: #fff;

		.uni-data-select {
			width: 100%;
		}

		.attrs {
			text {
				display: inline-block;
				border: 1px solid $u-primary;
				padding: 14rpx 20rpx;
				margin: 20rpx;
				background-color: #fff;
				color: $u-primary;
			}

			.checkedText {
				background-color: $u-primary;
				color: #fff;
			}
		}
	}
	.upload-img{
		width: 160rpx;
		height: 160rpx;
	}
	.make-call{
		font-size: 24rpx;
		text-decoration: underline;
		color: blue;
		position: fixed;
		bottom: 60rpx;
		text-align: center;
		width: 100%;
	}
</style>