yuanqu_ui/work/pages/yyorder/menuput.vue

<template>
	<view :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar color="#ffffff" left-icon="left" title="修改食谱" :background-color="backgroundColor"
				:border="false" statusBar='true' fixed="true" @clickLeft='getBack'>
			</uni-nav-bar>
		</view>
		<image :src="navbg" class="navbg"></image>
		<view class="zxmain">
			<uni-forms ref="form" class="ytforms"  :modelValue="datainfo">
				<view class="ytbox" style="padding-bottom: 16rpx;" >
					<view class="yttit flexcj">
						{{datainfo.menuFoodTime}}
					</view>
					<!-- <view class="cooktit">
						<view class="label">早餐：</view>
						<textarea auto-height="true" v-model="datainfo.menuFoodDetailBk" class="textarea" maxlength='-1' placeholder="请输入或粘贴午餐菜品，用“，”隔开…"></textarea>
					</view> -->
					<view class="cooktit">
						<view class="label">午餐：</view>
						<textarea auto-height="true" v-model="datainfo.menuFoodDetailLu" class="textarea" maxlength='-1' placeholder="请输入或粘贴午餐菜品，用“，”隔开…"></textarea>
					</view>
					<view class="ckpho">
						<view class="ckadd" @click="getphotoFn('lu')">
							<image :src="addimg" ></image>
							<view class="cktit">添加午餐照片</view>
						</view>
						<block v-if="datainfo.menuFoodDetailLuPhoto&&datainfo.menuFoodDetailLuPhoto.length">
							<view class="flexcw mb12">
								<view class="ckimgs" v-for="(itep,idxp) in datainfo.menuFoodDetailLuPhoto" :key="idxp">
									<image :src="cdelimg" class="cdelimg" @click="getDel(idxp,'lu')"></image>
									<image :src="baseUrl+itep" @click="getPreview(idxp,datainfo.menuFoodDetailLuPhoto)" class="ckimg"></image>
								</view>
							</view>
						</block>
					</view>
					<view class="cooktit">
						<view class="label">晚餐：</view>
						<textarea auto-height="true" v-model="datainfo.menuFoodDetailDi" class="textarea" maxlength='-1' placeholder="请输入或粘贴晚餐菜品，用“，”隔开…"></textarea>
					</view>
					<view class="ckpho">
						<view class="ckadd" @click="getphotoFn('di')">
							<image :src="addimg" ></image>
							<view class="cktit">添加晚餐照片</view>
						</view>
						<block v-if="datainfo.menuFoodDetailDiPhoto&&datainfo.menuFoodDetailDiPhoto.length">
							<view class="flexcw mb12">
								<view class="ckimgs" v-for="(itep,idxp) in datainfo.menuFoodDetailDiPhoto" :key="idxp">
									<image :src="cdelimg" class="cdelimg" @click="getDel(idxp,'di')"></image>
									<image :src="baseUrl+itep" @click="getPreview(idxp,datainfo.menuFoodDetailDiPhoto)" class="ckimg"></image>
								</view>
							</view>
						</block>
					</view>
					<view class="cooktita flexc mb10">
						<view class="label" style="flex: 1;">是否启用：</view>
						<switch :checked="datainfo.isUse=='Y'" @change="getChange"/>
						<!-- <uni-data-checkbox :selectedColor="color" :selectedTextColor="color" v-model="datainfo.isUse" :localdata="users" /> -->
					</view>
				</view>	
			</uni-forms>
			<view class="btns">
				<view class="btn btnb" v-if="checkPermi(['system:menuFood:edit'])" @click="getSubmit">确认提交</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {getMenuAdd,getMenuDetail,getMenuPut} from "@/api/mine/order.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {uploadmore} from '@/utils/common.js';
	import config from '@/config.js';
	const baseUrl = config.baseUrl;
	export default {
		components: {},
		data() {
			return {
				navbg:require("@/static/images/navbg.png"),
				upimg:require("@/work/static/yuy/up.png"),
				delimg:require("@/work/static/yuy/delw.png"),
				cdelimg:require("@/work/static/yuy/cdel.png"),
				addimg:require("@/work/static/yuy/add.png"),
				backgroundColor: "transparent",
				datainfo:{},
				nvaHeight: 44,
				marTop: 0, //距离顶部的距离
				stubarHeight: 0, //
				userId:this.$store.state.user.userId,
				patype:'edit',
				id:'',
				baseUrl:'',
				color:'#0391FD',
				users: [{
				  text: '启用',
				  value: "Y"
				}, {
				  text: '禁用',
				  value: "N"
				}],
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0491FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		onUnload() {
			
		},
		created() {
			this.baseUrl=baseUrl;
		},
		onLoad: function(e) {
			if(e.data){
				var data=JSON.parse(decodeURIComponent(e.data))
				this.patype=data.type;
				this.id=data.id;
				this.getMenuDetail()
			}
			uni.getSystemInfo({
				success: (e) => {
					this.stubarHeight = Number(e.statusBarHeight);
					this.nvaHeight = Number(e.statusBarHeight) + 44;
				}
			})
		},
		onShow() {},
		mounted() {
			
		},
		methods: {
			checkPermi,
			checkRole,
			getMenuDetail(){
				getMenuDetail(this.id).then(res=>{
					if(res.code==200){
						var data=JSON.parse(JSON.stringify(res.data));
						var BkPhoto=res.data.menuFoodDetailBkPhoto;
						var LuPhoto=res.data.menuFoodDetailLuPhoto;
						var DiPhoto=res.data.menuFoodDetailDiPhoto;
						data.menuFoodDetailBkPhoto=BkPhoto ? BkPhoto.split(','):[];
						data.menuFoodDetailLuPhoto=LuPhoto ? LuPhoto.split(','):[];
						data.menuFoodDetailDiPhoto=DiPhoto ? DiPhoto.split(','):[];
						this.datainfo=JSON.parse(JSON.stringify(data))
					}
				})
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
			getDel(idxp,type){
				var obj=JSON.parse(JSON.stringify(this.datainfo));
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							if(type=='bk'){
								obj.menuFoodDetailBkPhoto.splice(idxp,1)
							}else if(type=='lu'){
								obj.menuFoodDetailLuPhoto.splice(idxp,1)
							}else if(type=='di'){
								obj.menuFoodDetailDiPhoto.splice(idxp,1)
							}
							that.datainfo=JSON.parse(JSON.stringify(obj))
						} else if (res.cancel) {
						}
					}
				});
			},
			getphotoFn(type) {
				var that = this;
				uni.chooseImage({
					// count: 1, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['camera'], //从相册选择
					success: function(res) {
						let img= res.tempFilePaths;
						let imglen = res.tempFilePaths.length;
						var fuwufile = [];
						uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
							var obj=JSON.parse(JSON.stringify(that.datainfo));
							if(type=='bk'){
								obj.menuFoodDetailBkPhoto=obj.menuFoodDetailBkPhoto.concat(rs);
							}else if(type=='lu'){
								obj.menuFoodDetailLuPhoto=obj.menuFoodDetailLuPhoto.concat(rs);
							}else if(type=='di'){
								obj.menuFoodDetailDiPhoto=obj.menuFoodDetailDiPhoto.concat(rs);
							}
							that.datainfo=JSON.parse(JSON.stringify(obj))
						})
					}
				});
			},
			getChange(e){
				var val=e.detail.value;
				if(val==false){
					this.datainfo.isUse='N'
				}else{
					this.datainfo.isUse='Y'
				}
			},
			getBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getSubmit(){
				var that=this;
				var params=JSON.parse(JSON.stringify(this.datainfo));
				var BkPhoto=params.menuFoodDetailBkPhoto;
				var LuPhoto=params.menuFoodDetailLuPhoto;
				var DiPhoto=params.menuFoodDetailDiPhoto;
				params.menuFoodDetailBkPhoto=BkPhoto&&BkPhoto.length?BkPhoto.join(','):'';
				params.menuFoodDetailLuPhoto=LuPhoto&&LuPhoto.length?LuPhoto.join(','):'';
				params.menuFoodDetailDiPhoto=DiPhoto&&DiPhoto.length?DiPhoto.join(','):'';
				getMenuPut(params).then(res=>{
					if(res.code==200){
						that.$toast("修改成功")
						setTimeout(function(){
							uni.$emit('refreshmenulist')
							uni.navigateBack({
								delta:1
							})
						},1200)
					}
				})
				
			},
		},

	}
</script>
<style>
/* 	page {
		background: #ffffff;
	} */
</style>
<style lang="scss" scoped>
.zxmain /deep/	.uni-switch-input.uni-switch-input-checked{background-color: #0391FD !important;}
.zxmain /deep/ uni-switch::before{display: none;}
.zxmain /deep/ .uni-forms .uni-forms-item{padding: 8rpx 26rpx 8rpx;border: 2rpx solid #0391FD;margin-bottom: 24rpx;border-radius: 12rpx;}
.zxmain /deep/ .uni-forms-item__label{flex: 0 0 auto;width: 144rpx !important;font-size: 28rpx;font-weight: bold;position: relative;color: #161616;text-align-last: justify;}
.zxmain /deep/ .uni-forms-item__label text{flex: 1;}
.zxmain /deep/ .uni-forms-item__label .is-required{position: absolute;right: 0;color: #F10C31;margin-top: 16rpx;}
// .zxmain /deep/ uni-textarea{flex: 1;width: auto;text-align: right;}
.zxmain /deep/ .uni-textarea-placeholder{font-size: 28rpx;color: #DDDDDD !important;}
.zxmain /deep/ .uni-easyinput__placeholder-class{font-size: 28rpx;color: #DDDDDD;}
.zxmain /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
.zxmain /deep/ .uni-easyinput{flex: 1;text-align: right;}
.zxmain /deep/ .uni-easyinput__content-input{font-size: 28rpx;}
 .zxmain /deep/ .uni-forms-item__error{margin-top:20rpx;left: auto;right: 0;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 692rpx;position: absolute;left: 0;right: 0;top: 0;z-index: -1;}	
.zxmain{position: relative;padding: 36rpx 32rpx 28rpx;box-sizing: border-box;}
.ytforms{
	.yttit{font-size: 28rpx;font-weight: bold;margin-bottom: 32rpx;line-height: 40rpx;
color: #161616;display: flex;align-items: center;padding: 0rpx 26rpx;box-sizing: border-box;position: relative;
		&::before{content: '';width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 4rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 0rpx;}
	}
	.ytbox{background-color: #ffffff;padding: 36rpx 28rpx 12rpx;border-radius: 14rpx;box-sizing: border-box;margin-bottom: 18rpx;
		.cooktit{min-height: 152rpx;background: #FFFFFF;border-radius: 6rpx;border: 2rpx solid #0391FD;padding: 24rpx 26rpx;display: flex;margin-bottom: 24rpx;
			.textarea{font-size: 28rpx;}
		}
		.label{font-size: 28rpx;font-weight: bold;color: #161616;flex: 0 0 auto;}
	}
}
.btns{
	padding: 42rpx 28rpx 0;
	.btn{width: 100%;height: 90rpx;border-radius: 14rpx;font-weight: 500;font-size: 28rpx;margin-bottom: 34rpx;display: flex;align-items: center;justify-content: center;box-sizing: border-box;
		.addimg{width: 14rpx;height: 14rpx;flex: 0 0 auto;margin-right: 14rpx;}
		&.btna{background: #DFF1FF;border:2rpx solid #0391FD;color: #0391FD;}
		&.btnb{background: #0391FD;color: #ffffff;}
	}
}
.ckpho{
	.ckadd{display: flex;align-items: center;width: 100%;height: 78rpx;background: #EBF6FF;justify-content: center;margin-bottom: 26rpx;
border-radius: 3px;
		image{width: 18rpx;height: 18rpx;margin-right: 14rpx;}
		.cktit{font-weight: 500;font-size: 26rpx;color: #0391FD;}
	}
	.ckimgs{position: relative;margin: 0 28rpx 10rpx 0;
		.cdelimg{position: absolute;width: 22rpx;height: 24rpx;right: -11rpx;top: -11rpx;z-index: 1;}
		.ckimg{width: 136rpx;height: 100rpx;}
		&:nth-of-type(4n){margin-right: 0;}
	}
}
</style>