yuanqu_ui/work/pages/yyorder/menuadd.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">
					<view class="yttit">预订信息</view>
					<uni-forms-item label="选择星期" name="orderFoodTime">
						<view class="flexc flex1">
							<view class="flex1 " :class="datainfo.orderFoodTime?'co16 fw5 f14':'coa f14'">
								{{datainfo.orderFoodTime||'请选择'}}</view>
								<image :src="upimg" class="hupimg"></image>
						</view>	
					</uni-forms-item>
				</view> -->
				<!-- <view class="ytbox" style="padding: 0rpx 16rpx;">
					<view class="table">
						<view class="tatit act">星期一</view>
						<view class="tatit">星期二</view>
						<view class="tatit">星期二</view>
						<view class="tatit">星期二</view>
						<view class="tatit">星期二</view>
						<view class="tatit">星期二</view>
						<view class="tatit">星期二</view>
					</view>
				</view> -->
				<view class="ytbox" style="padding-bottom: 16rpx;" v-for="(ite,idx) in menuFoodList" :key="ite.value">
					<view class="yttit flexcj">{{ite.menuFoodTime}}
					<view class="cooktita flexcc">
						<!-- <view class="label">是否启用：</view> -->
						<uni-data-checkbox :selectedColor="color" :selectedTextColor="color" v-model="ite.isUse" :localdata="users" />
					</view>
						<!-- <view class="delbox flexc"><image :src="delimg"></image>删除食谱</view> -->
					</view>
					<view class="cooktit">
						<view class="label">午餐：</view>
						<textarea auto-height="true" v-model="ite.menuFoodDetailLu" class="textarea" maxlength='-1' placeholder="请输入或粘贴午餐菜品，用“，”隔开…"></textarea>
					</view>
					<view class="ckpho">
						<view class="ckadd" @click="getphotoFn(idx,'lu')">
							<image :src="addimg" ></image>
							<view class="cktit">添加午餐照片</view>
						</view>
						<block v-if="ite.menuFoodDetailLuPhoto&&ite.menuFoodDetailLuPhoto.length">
							<view class="flexcw mb12">
								<view class="ckimgs" v-for="(itep,idxp) in ite.menuFoodDetailLuPhoto" :key="idxp">
									<image :src="cdelimg" class="cdelimg" @click="getDel(idx,idxp,'lu')"></image>
									<image :src="baseUrl+itep" @click="getPreview(idxp,ite.menuFoodDetailLuPhoto)" class="ckimg"></image>
								</view>
							</view>
						</block>
					</view>
					<view class="cooktit">
						<view class="label">晚餐：</view>
						<textarea auto-height="true" v-model="ite.menuFoodDetailDi" class="textarea" maxlength='-1' placeholder="请输入或粘贴晚餐菜品，用“，”隔开…"></textarea>
					</view>
					<view class="ckpho">
						<view class="ckadd" @click="getphotoFn(idx,'di')">
							<image :src="addimg" ></image>
							<view class="cktit">添加晚餐照片</view>
						</view>
						<block v-if="ite.menuFoodDetailDiPhoto&&ite.menuFoodDetailDiPhoto.length">
							<view class="flexcw mb12">
								<view class="ckimgs" v-for="(itep,idxp) in ite.menuFoodDetailDiPhoto" :key="idxp">
									<image :src="cdelimg" class="cdelimg" @click="getDel(idx,idxp,'di')"></image>
									<image :src="baseUrl+itep" @click="getPreview(idxp,ite.menuFoodDetailDiPhoto)" class="ckimg"></image>
								</view>
							</view>
						</block>
					</view>
				</view>	
			</uni-forms>
			<view class="btns">
				<!-- <view class="btn btna"><image :src="addimg" class="addimg"></image>添加食谱</view> -->
				<view class="btn btnb" v-if="checkPermi(['system:menuFood:add'])" @click="getSubmit">确认提交</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {getMenuAdd} from "@/api/mine/order.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import { uploadPhoto } from '@/api/system/user.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,
				baseUrl:'',
				weeklist:[],//食谱日期,
				menuFoodList:[],//食谱
				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'
			}
		},
		created() {
			this.baseUrl=baseUrl;
		},
		onUnload() {
			
		},
		onLoad: function() {
			this.init()
			// this.getDataFn()
			uni.getSystemInfo({
				success: (e) => {
					this.stubarHeight = Number(e.statusBarHeight);
					this.nvaHeight = Number(e.statusBarHeight) + 44;
				}
			})
		},
		onShow() {},
		mounted() {
			
		},
		methods: {
			checkPermi,
			checkRole,
			init(){
				// 食谱日期
				getDictionaryFn('week').then(res=>{
					if(res.code==200){
						// this.weeklist = res.data.map(v => {
						// 	return {
						// 		label: v.dictLabel,
						// 		value: v.dictValue,
								
						// 	}
						// })
						this.menuFoodList = res.data.map(v => {
							return {
								menuFoodTime: v.dictLabel,	
								menuFoodDetailBk: '',	
								menuFoodDetailBkPhoto: [],	
								menuFoodDetailLu: '',	
								menuFoodDetailLuPhoto: [],	
								menuFoodDetailDi: '',	
								menuFoodDetailDiPhoto: [],	
								isUse: 'Y',	
							}
						})
					}
				})
			},
			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(idx,idxp,type){
				var obj=JSON.parse(JSON.stringify(this.menuFoodList[idx]));
				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.menuFoodList.splice(idx,1,obj)
						} else if (res.cancel) {
						}
					}
				});
			},
			getphotoFn(idx,type) {
				var that = this;
				var obj=JSON.parse(JSON.stringify(this.menuFoodList[idx]));
				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){
							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.menuFoodList.splice(idx,1,obj)
						})
					}
				});
			},
			getBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getSubmit(){
				var that=this;
				var foodlist=JSON.parse(JSON.stringify(this.menuFoodList));
				var newArr=[];
				foodlist.forEach(ite=>{
					var obj=JSON.parse(JSON.stringify(ite));
					obj.menuFoodDetailBkPhoto=ite.menuFoodDetailBkPhoto.join(',')
					obj.menuFoodDetailLuPhoto=ite.menuFoodDetailLuPhoto.join(',')
					obj.menuFoodDetailDiPhoto=ite.menuFoodDetailDiPhoto.join(',')
					if(ite.menuFoodDetailBk||ite.menuFoodDetailLu||ite.menuFoodDetailDi||obj.menuFoodDetailBkPhoto||obj.menuFoodDetailLuPhoto||obj.menuFoodDetailDiPhoto){
						newArr.push(obj)
					}
				})
				if(newArr.length<1){
					this.$toast("请输入食谱")
					return
				}
				var params={
					menuFoodList:newArr
				}
				getMenuAdd(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-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-left: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;
		.hupimg{width: 18rpx;height: 14rpx;margin-left: 12rpx;flex: 0 0 auto;}
		.delbox{font-weight: 500;font-size: 26rpx;color: #FF6969;line-height: 1;
			image{width: 26rpx;height: 24rpx;margin-right: 10rpx;}
		}
		.cooktit{min-height: 152rpx;background: #FFFFFF;border-radius: 6rpx;border: 2rpx solid #0391FD;padding: 24rpx 26rpx;display: flex;margin-bottom: 24rpx;
			.label{font-size: 28rpx;font-weight: bold;color: #161616;flex: 0 0 auto;}
			.textarea{font-size: 28rpx;}
		}
	}
	.table{border-bottom: 2rpx solid #DADADA;display: flex;align-items: center;overflow: auto;
		.tatit{font-weight: 500;font-size: 26rpx;color: #666666;height: 100rpx;display: flex;align-items: center;justify-content: center;min-width: 92rpx;flex: 0 0 auto;
			&.act{font-weight: bold;font-size: 30rpx;color: #0391FD;
			border-bottom: 4rpx solid #0391FD;
			}
		}
	}
}
.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>