tourism/uni_applet/pageA/enter/myCateringdustry/addfood.vue

<template>
	<view class='content'>
		<view class='wrap'>
			<u--form labelPosition="left" :model="form"  ref="uForm">
				<u-form-item labelWidth='120' labelPosition='left' label="店铺名称">
					<view style='text-align:right'>{{form.shopNames}}</view>
				</u-form-item>
				<u-form-item
				labelPosition="left"
				:uclass='"flex-align-center"'
					label="分类"
					prop="classify"
					borderBottom
					labelWidth='120'
					ref="item1">
					<view style='flex-direction:row-reverse ;' class='flex align-item-center'>
						<view class='add' @click='add'>新增</view>
						<view style='margin-right:10rpx;' @click='openClassify'>{{form.classify?form.classify:'选择分类'}}<image src="@/static/image/yjt.png" mode=""
								style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image></view>
					</view>
				</u-form-item>
				<u-form-item
				labelPosition="left"
					label="菜品名称"
					 labelWidth='120'
					prop="dishName"
					borderBottom
					ref="item1">
					<u--input inputAlign='right' v-model="form.dishName" placeholder="输入菜品名称.2-8个字" border="none"></u--input>
				</u-form-item>
				<u-form-item
				labelPosition="left"
					labelWidth='150'
					label="菜品单价（选填）"
					prop="userInfo"
					ref="item1">
					<view class='flex align-item-center'>
						<u--input inputAlign='right' v-model="form.dishPrice" placeholder="输入菜品单价" border="none"></u--input>元
					</view>
					
				</u-form-item>
				<view class='caution'>注：如不想用户查看价格可在店铺设置中关闭查看功能。</view>
				<u-form-item labelWidth='240' labelPosition='top' label="上传菜品图片（清晰、美观）">
					<u-upload :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic" name="1" multiple
						:maxCount="1">
						
					</u-upload>
				</u-form-item>
			</u--form>
			<view class="mercharts_footer">
				<button @click='submit' class="submit">提交</button>
			</view>
		</view>
		<u-overlay :show="show" @click="show = false">
				<view style='flex-wrap: wrap;' class='wrap flex'>
					<view v-for='item in classifyList' style='width:33.3333%;'>
						<view @click='selectClassify(item)' class='classifyItem' :class='form.classify==item.classifyName?"active":""'>{{item.classifyName}}</view>
					</view>
					
				</view>
			</u-overlay>
		<u-modal :show="isSubmit" content='确认添加菜品信息？' @confirm="$u.debounce(confirmSubmit, 500)" showCancelButton
			@cancel="isSubmit=false" @close="isSubmit=false" closeOnClickOverlay></u-modal>
			<u-modal :show="show1" title='添加分类'  @confirm="$u.debounce(classifySubmit, 500)" showCancelButton
				@cancel="show1=false" @close="show1=false" closeOnClickOverlay>
				<view class="slot-content">
					<view>
						<u--input inputAlign='center' v-model="classifyName" placeholder="输入分类名称" border="none"></u--input>
					</view>
				</view>
			</u-modal>
	</view>
</template>

<script>
	var that = this
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				form:{
					foodId:'',
					classify:'',
				},
				classifyName:'',
				show:false,
				show1:false,
				isSubmit:false,
				dataList:[],
				classifyList:[],
				fileList1:[]
			}
		},
		onLoad(options) {
			that = this
			this.form.foodId=options.foodId
			this.form.shopNames=options.shopNames
			this.getList()
		},
		onShow(){
			
		},
		methods: {
			getList(){
				this.$request.baseRequest('admin.tourism.dishClassifyInfo', 'list', {
					foodId:this.form.foodId,
					page:1,
					limit:9999
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
				}).then(res => {
					this.classifyList = res.data.items
					this.form.classify = res.data.items[0].classifyName
				})
			},
			add(){
				this.show1 = true
			},
			openClassify(){
				this.show = true
			},
			selectClassify(item){
				console.log(item)
				this.form.classify = item.classifyName
			},
			submit(){
					if(this.form.dishName.length<2||this.form.dishName.length>8){
							uni.showToast({
								icon: "none",
								title: '菜品名称2-8个字！',
								duration: 3000
							});
							return
						}
						if(this.form.dishPrice<=0){
							uni.showToast({
								icon: "none",
								title: '菜品单价输入错误！',
								duration: 3000
							});
							return
						}
						if(!this.form.dishImage){
							uni.showToast({
								icon: "none",
								title: '菜品图片不能为空！',
								duration: 3000
							});
							return
						}
			uni.showModal({
					title: '提示',
					content: '确认添加菜品信息？',
					success (res) {
					    if (res.confirm) {
							that.$u.debounce(confirmSubmit, 500)
					    } else if (res.cancel) {
					      console.log('用户点击取消')
					    }
					  }
				})
				// this.isSubmit = true
			},
			classifySubmit() {
				console.log(this.form)
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('admin.tourism.dishClassifyInfo', 'add', {
					dishClassifyInfo: JSON.stringify({foodId:this.form.foodId,classifyName:this.classifyName})
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
			
					uni.hideLoading()
				}).then(res => {
					this.show1 = false
					uni.showToast({
						icon: "success",
						title: '添加分类成功',
						duration: 2000
					});
					this.getList()
				})
			},
			confirmSubmit() {
				console.log(this.form)
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('admin.tourism.foodDishesInfo', 'add', {
					foodDishesInfo: JSON.stringify(this.form)
				}, 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.navigateBack()
			
				})
			},
			// 删除图片
			deletePic(event,status) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			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.form, this[`fileList${event.name}`])
					
				}
			},
			uploadFilePromise(res,status) {
				return new Promise((resolve, reject) => {
					uploadImage(res, 'cardImages/',
						result => {
							
							that.form.dishImage = result
							resolve(res)
						}
					)
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
.add,.active{
	background: #5F7DE9;
	color: #fff;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	font-size: 26rpx;
 }
 .classifyItem{
	padding: 10rpx 20rpx;
	font-size: 26rpx;
	text-align: center;
	margin: 0 30px;
 }
 /deep/.flex-align-center{
	 align-items: center;
	 justify-content: space-between;
 }
</style>