tourism/uni_applet/pageA/enter/myCateringdustry/shopSetting/editShopImage.vue

<template>
	<view class='content'>
		<view class='wrap'>
			<u--form  ref="uForm">
				<u-form-item labelWidth='240' labelPosition='top' label="门面及门头照片(1张,店名文字清晰)">
					<u-upload :fileList="fileList4" @afterRead="afterRead($event,3)" @delete="deletePic($event,3)" name="4" multiple
						:maxCount="1">
						
					</u-upload>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='top' label="室内照片(1-6张)">
					<u-upload :fileList="fileList5" @afterRead="afterRead($event,4)" @delete="deletePic($event,4)" name="5" multiple
						:maxCount="6">
					</u-upload>
				</u-form-item>
			</u--form>
			<view class="footer">
				<button @click='submit' class="submit">提交</button>
			</view>
		</view>
		<u-modal :show="isSubmit" content='确定提交店铺图片' @confirm="$u.debounce(confirmSubmit, 500)" showCancelButton
			@cancel="isSubmit=false" @close="isSubmit=false" closeOnClickOverlay></u-modal>
	</view>
</template>

<script>
	var that
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				isSubmit:false,
				indoorImageArray:[],
				fileList4:[],
				fileList5:[],
				currectData:{},
			}
		},
		onLoad() {
			that = this
		},
		onShow(){
			if(uni.getStorageSync('myCateringdustry')){
				this.currectData=JSON.parse(uni.getStorageSync('myCateringdustry'))
				if(this.currectData.coverImage){
					this.fileList4=[{url:this.currectData.coverImage}]
				}
				this.fileList5=[]
				if(this.currectData.indoorImage){
					this.indoorImageArray=this.currectData.indoorImage.split(',')
					for(var i=0;i<this.indoorImageArray.length;i++){
						if(this.indoorImageArray[i]){
							this.fileList5.push({url:this.indoorImageArray[i]})
						}
					}
					
				}
			}
		},
		methods: {
			submit(){
				uni.showModal({
						title: '提示',
						content: '确定提交店铺图片？',
						success (res) {
						    if (res.confirm) {
								that.$u.debounce(confirmSubmit, 500)
						    } else if (res.cancel) {
						      console.log('用户点击取消')
						    }
						  }
					})
			},
			confirmSubmit() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('admin.tourism.foodInfo', 'update', {
					foodInfo: JSON.stringify(this.currectData)
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
			
					uni.hideLoading()
				}).then(res => {
					this.isSubmit = false
					uni.showToast({
						icon: "success",
						title: '编辑店铺图片成功',
						duration: 2000
					});
					uni.setStorageSync('myCateringdustry',JSON.stringify(this.currectData))
					uni.navigateBack()
			
				})
			},
			// 删除图片
			deletePic(event,status) {
				this[`fileList${event.name}`].splice(event.index, 1)
				if(status==4){
					that.indoorImageArray.splice(event.index, 1)
					that.currectData.indoorImage =that.indoorImageArray.toString()
				}
				
			},
			// 新增图片
			async afterRead(event,status) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				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,status)
					
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					console.log(that.currectData, this[`fileList${event.name}`])
					
				}
			},
			uploadFilePromise(res,status) {
				return new Promise((resolve, reject) => {
					uploadImage(res, 'cardImages/',
						result => {
							 if(status==3){
								that.currectData.coverImage = result
							}else if(status==4){
								that.indoorImageArray.push(result)
								that.currectData.indoorImage =that.indoorImageArray.toString()
							}
							resolve(res)
						}
					)
				})
			},
		}
	}
</script>

<style>

</style>