maishidaSJ/pages/UserCenter/mendian/addmendianSP.vue

<template>
	<view class="contentV">
		<customNav :shownav="true" :deleteBt="edeatState" :title="$t('index.shangpinedit')" titledetl="" v-on:Enavbarsel="navbarsel"></customNav>
		<view class="contentInRowC" style="margin-top: 40rpx;">
			<text style="font-size: 28rpx;color: darkgray;">{{$t('goods.xiugaishx')}}</text>
		</view>
		<!-- <view class="contentInRowL" style="margin-left: 30rpx;margin-top: 60rpx;">
			<text>{{$t('shangpin.fenleiyuyan')}}: {{langtext}}</text>
			<uni-icons style="margin-left: 16rpx;" custom-prefix="custom-icon" color="#006AFF" type="loop" size="26" @click="changeLang"></uni-icons>
		</view> -->
		<view class="yzmctV" >
			<view class="contentInRowS" style="width: 80%;align-items: center;">
				<view v-if="stackingUp==1" style="align-items: center;" @click="salestate">
					<uni-icons custom-prefix="custom-icon" color="darkgray" type="checkbox-filled" size="26"></uni-icons>
					<text style="font-size: 30rpx;color:darkgray;">{{$t('mend.yishangjia')}}</text>
				</view>
				<view  v-if="stackingUp==0" style="align-items: center;" @click="salestate">
					<uni-icons custom-prefix="custom-icon" color="crimson" type="checkbox-filled" size="26"></uni-icons>
					<text style="font-size: 30rpx;color:crimson;">{{$t('mend.yishangjia')}}</text>
				</view>
				
				<view v-if="shenhe=='0'" style="align-items: center;">
					<uni-icons custom-prefix="custom-icon" color="darkgray" type="checkbox-filled" size="26"></uni-icons>
					<text style="font-size: 30rpx;color:darkgray;">{{$t('order.weishenhe')}}</text>
				</view>
				<view  v-if="shenhe=='1'" style="align-items: center;">
					<uni-icons custom-prefix="custom-icon" color="crimson" type="checkbox-filled" size="26"></uni-icons>
					<text style="font-size: 30rpx;color:crimson;">{{$t('order.shenhetg')}}</text>
				</view>
			</view>
		</view>
		
		<view class="yzmctV">
			<text class="yzmbt">{{$t('mend.shangpinmc')}}:</text>
			<input class="noinputV"  type="text" :placeholder="$t('mend.qingshurspmc')" :value="name" @input="inpuact1">
		</view>
		<view class="yzmctV">
			<text class="yzmbt">{{$t('mend.shangpinjj')}}:</text>
			<input class="noinputV"  type="text" :placeholder="$t('mend.qingshurspjj')" :value="introduce" @input="inpuact2">
		</view>
		<view class="yzmctV">
			<text class="yzmbt">{{$t('index.goodsfenlei')}}:</text>
			<view class="xialakuangL">
				<uni-data-select class="" v-model="value" :localdata="range" :placeholder="$t('mend.qingxuanze')" @change="selectchangefl" ></uni-data-select>
			</view>
		</view>
		
		<danxuanlist style="width:100%;" :infolistD="infosku" :isedit="true" v-on:ElistDatachange="listDatachange"></danxuanlist>
		
		<view class="yzmctV">
			<text class="yzmbt">{{$t('mend.shangpinjg')}}:</text>
			<input class="noinputV" type="number" :value="price" :placeholder="$t('mend.shangpinsj')"  @input="inpuact3">
		</view>
		
		<view class="contentInRowL" style="padding-left: 8%;margin-top: 40rpx;">
			<text class="yzmbt">{{$t('mend.shangpintp')}}:</text>
		</view>
		<view class="yzmctV">
			<yhdslCropper ref="yhdslCropper" :quality="1" mode="scale"  @uploadImg="uploadImg" :scale="scale"></yhdslCropper>
			<image class="imagV" :src="baseUrl+spImage" mode="scaleToFill" @click="selectImage"></image>
		</view>
		<view class="yzmctV" style="margin-bottom: 40rpx;">
			<text class="querenBt" @click="tijiao">{{$t('index.tijiao')}}</text>
		</view>
		<uni-popup ref="langPop">
			<view class="contentColumnC" style="width: 100%;background-color: white;">
				<text class="poptextList" style="margin-top: 20rpx;" @click="langSel('0')">Tiếng Việt</text>
				<text class="poptextList" @click="langSel('2')">简体中文</text>
				<text class="poptextList" @click="langSel('3')">繁體中文</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>	
	import api from "@/pages/api/api.js";
	import ApibaseUrl from "@/config/urlConfig.js"
	import yhdslCropper from '@/components/yhdsl-cropper/yhdsl-cropper.vue';
	
	export default {
		components: {
		    yhdslCropper
		},
		data() {
			return {
				foodDT:[],
				value:0,
				range: [],
				flId:0,
				spid:-1,
				mdid:-1,
				name: "", 
				image: "", 
				price: 0, 
				introduce: "", 
				recommend: 0, 
				sort: 0,
				shangpinfenlei:[],
				infosku:[],
				sku:[],
				spImage:'',
				baseUrl:this.$baseImagurl,
				scale:1,
				edeatState:0,
				stackingUp:0,
				shenhe:'0',//0未审核或不通过，1已审核
				lang:"0",
				langtext:'Tiếng Việt'
			}
		},
		onLoad(option) {
			console.log('option',option)
			var language = uni.getStorageSync('language');
			if(language=='yuenan'){
				this.lang='0';
				this.langtext='Tiếng Việt';
			}
			if(language=='zh-Hans'){
				this.lang='2';
				this.langtext='简体中文';
			}
			if(language=='zh-Hant'){
				this.lang='3';
				this.langtext='繁體中文';
			}
			if(option.mendid){
				this.mdid=option.mendid;
			}
			if(option.spid){
				this.spid=option.spid;
			}
			if(option.sh){
				if(option.sh!='null'){
					this.shenhe=option.sh;
				}
			}
			if(this.spid>=0){
				this.edeatState=1;
				this.getGoodsDetail(this.spid);
			}
			else{
				this.getmendianshangpinFL(this.mdid);
			}
			
		},
		onShow() {
			console.log("onShowonShowonShow");
		},
		methods: {
			salestate(){
				if(this.shenhe=='0'){
					return
				}
				if(this.stackingUp==0){
					this.stackingUp=1;
				}
				else{
					this.stackingUp=0;
				}
			},
			changeLang(){
				this.$refs.langPop.open('bottom');
			},
			langInit(){
				if(this.lang=='0'){
					this.langtext='Tiếng Việt';
				}
				if(this.lang=='2'){
					this.langtext='简体中文';
				}
				if(this.lang=='3'){
					this.langtext='繁體中文';
				}
			},
			langSel(index){
				this.lang=index;
				this.langInit();
				this.$refs.langPop.close();
				this.getmendianshangpinFL(this.mdid);
				
			},
			inpuact1(v){
				if(this.shangpinfenlei.length==1){
					uni.showToast({
						title:this.$t('mend.qxtianjiafl'),
						icon:"none",
						duration: 3000
					})
				}
				this.name = v.target.value;
			},
			inpuact2(v){
				this.introduce = v.target.value;
			},
			inpuact3(v){
				this.price = v.target.value;
			},
			selectchangefl(e){
				this.flId=e;
				console.log(e)
			},
			
			tijiao(){
				this.addmendianshangpin()
			},
			
			listDatachange(listData){
				this.sku=listData;
			},
			selectImage(){
				 this.$refs.yhdslCropper.chooseImage();
			},
			uploadImg(e) {
				console.log('------------uploadImg:',e)
				this.spImage = e;
				var that = this;
				var uplurl = ApibaseUrl.getUploadUrl();
				uni.uploadFile({
					url: uplurl, //上传图片api
					filePath: e,
					name: 'file',
					header:{
						//"Authorization": userinfo.token
					},
					success: (res) => {
						let group =  JSON.parse(res.data);
						this.spImage=group.data;
						console.log(group)
						uni.showToast({
							title:that.$t('mend.shangccg'),
							icon:"success"
						})
					}
				});
			},
			
			getmendianshangpinFL(id){
				api('getmendianshangpinFL',{
					id:id,
					language:this.lang
				},r=>{
					this.shangpinfenlei=r.data.data;
					var Trange=[];
					for(var i=0;i<this.shangpinfenlei.length;i++){
						Trange.push({value:this.shangpinfenlei[i].id, text:this.shangpinfenlei[i].name});
					}
					this.range=Trange;
					if(this.shangpinfenlei.length==0){
						this.value=0;
						this.flId=0;
						uni.showToast({
							title:this.$t('mend.qxtianjiafl'),
							icon:"none",
							duration: 3000
						})
					}
				},failc=>{
					uni.hideLoading();
					//console.log('getadvertis----',failc)
				})
			},
			getGoodsDetail(id){
				api('GoodsDetail',{
					id:id
				},r=>{
					console.log('12--',r.data.data)
					this.foodDT=r.data.data;
					this.flId=this.foodDT.fenlei.id;
					this.mdid=this.foodDT.store.id;
					this.name=this.foodDT.name;
					this.spImage=this.foodDT.image;
					this.price=this.foodDT.price;
					this.introduce=this.foodDT.introduce;
					this.stackingUp = this.foodDT.stackingUp;
					this.lang=r.data.data.fenlei.language;
					//this.sku=[];
					this.sku=this.foodDT.foodSku;
					if(0==this.sku.length||undefined==this.sku.length){
						this.sku=[];
					}
					this.infosku= this.sku;
					this.langInit();
					this.getmendianshangpinFL(this.mdid);
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			addmendianshangpin(){
				console.log("addmendianshangpin")
				if(this.name==""){
					uni.showToast({
						title:this.$t('mend.qingshurspmc'),
						icon:"none"
					})
					return;
				}
				if(this.introduce==""){
					uni.showToast({
						title:this.$t('mend.qingshurspjj'),
						icon:"none"
					})
					return;
				}
				if(this.flId==0){
					uni.showToast({
						title:this.$t('mend.qingxuanzefl'),
						icon:"none"
					})
					return;
				}
				if(this.price<=0){
					uni.showToast({
						title:this.$t('mend.shangpinsj'),
						icon:"none"
					})
					return;
				}
				if(this.spImage==""){
					uni.showToast({
						title:this.$t('mend.qingxuanze')+this.$t('mend.shangpintp'),
						icon:"none"
					})
					return;
				}
				
				
				var spdata;
				if(this.spid<0){
					spdata={
						"flId": this.flId, 
						"mdid": this.mdid, 
						"name": this.name, 
						"image":this.spImage, 
						"price": this.price, 
						"introduce": this.introduce,
						"stackingUp":this.stackingUp,
						"recommend": 0, 
						"sort": 0, 
						"sku":this.sku,
						"language":this.lang
					}
				}
				else{
					spdata={
						"id":this.spid,
						"flId": this.flId, 
						"mdid": this.mdid, 
						"name": this.name, 
						"image":this.spImage, 
						"price": this.price, 
						"introduce": this.introduce, 
						"stackingUp":this.stackingUp,
						"recommend": 0, 
						"sort": 0, 
						"sku":this.sku,
						"language":this.lang
					}
				}
				var checkdataR = this.checkdata(spdata);
				if(!checkdataR){
					return;
				}
				
				api('addmendianshangpin',spdata,
				r=>{
					uni.navigateBack({
							delta:1,//返回层数，2则上上页
					})
				},failc=>{
					console.log('addmendianshangpin',failc)
				})
				
			},
			checkdata(data){
				if(data.flId.length<1){
					uni.showToast({
						title:this.$t('index.xuanzspfl'),
						icon:"error"
					})
					return false;
				}
				if(data.name.length<1){
					uni.showToast({
						title:this.$t('mend.qingshurspmc'),
						icon:"error"
					})
					return false;
				}
				if(data.introduce.length<1){
					uni.showToast({
						title:this.$t('mend.qingshurspjj'),
						icon:"error"
					})
					return false;
				}
				if(data.image.length<1){
					uni.showToast({
						title:this.$t('mend.qingtianx'),
						icon:"error"
					})
					return false;
				}
				if(data.price.length<1){
					uni.showToast({
						title:this.$t('mend.shangpinsj'),
						icon:"error"
					})
					return false;
				}
				return true;
			},
			navbarsel(index){
				if(index!=5){
					return;
				}
				var that = this;
				uni.showModal({
					cancelText: that.$t('order.quxiao'), // 取消按钮的文字
					confirmText: that.$t('comp.queren'), // 确认按钮的文字 
				    title: that.$t('api.message'),
				    content: that.$t('index.sanchushangp'),
				    success: function (res) {
						if (res.confirm) { //这里是点击了确定以后
							that.delefood();
						} else { //这里是点击了取消以后
						  console.log('用户点击取消')
						}
						
				    }
				})
			},
			delefood(){
				api('delefood',{
					id:this.spid
				},
				r=>{
					console.log(r)
					if(r.data.code==200){
						uni.showToast({
							title:this.$t('index.sanchuchengg'),
							icon:"none",
							duration: 2500
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 2500);
					}
					else{
						uni.showToast({
							title:r.data.msg,
							icon:"none"
						})
					}
				},failc=>{
					uni.showToast({
						title:failc,
						icon:"none"
					})
				})
			},
		}
	}
</script>

<style>
.contentV{
	display: flex;
	width: 100%;
	justify-content: center;
	display: inline-block;   
}

.skuViewCt{
	display: flex;
	flex-direction: column;
	justify-content:center;
	width: 100%;
	margin-top: 10rpx;
}

.contensb{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items:center;
	margin-left: 5%;
	width: 90%;
}

.contensbgg{
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-start;
	align-items:center;
	margin-left: 5%;
	width: 90%;
}
.rconten{
	margin-left: 5%;
	flex-wrap: wrap;
	margin-top: 0rpx;
}
.peisongsuoming{
	font-size: 30rpx;
	line-height: 38rpx;
	height: 38rpx;
	color: dimgray;
}
.guige{
	padding: 8rpx;
	border: 2rpx solid rosybrown;
	border-radius: 6rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 26rpx;
}
.imageR{
	width: 56rpx;
	height: 56rpx;
	margin-left: 6rpx;
}

.yzmctV{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 40rpx;
}
.noinputV{
	font-size: 30rpx;
	margin-left: 20rpx;
	width: 60%;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 20rpx;
	border: 2rpx solid darkgray;
}

.addrtext{
	margin-left: 20rpx;
	font-size: 26rpx;
	width: 60%;
	height: 60rpx;
	line-height: 60rpx;
	text-decoration:underline;
}

.yzmbt{
	font-size: 28rpx;
	text-align: left;
}

.yzmbts{
	font-size: 28rpx;
	width: 70rpx;
}
.yzmbtsr{
	margin-left: 80rpx;
	font-size: 28rpx;
	width: 70rpx;
}

.xialakuangL{
	margin-left: 20rpx;
	width: 60%;
	height: 60rpx;
	line-height: 60rpx;
}

.xialakuang{
	margin-left: 20rpx;
	width: 20%;
	height: 60rpx;
	line-height: 60rpx;
}
.imagV{
	width: 640rpx;
	height: 640rpx;
	background-color: antiquewhite;
}

.querenBt{
	margin-top: 30rpx;
	width: 80%;
	height: 60rpx;
	line-height: 60rpx;
	padding: 10rpx;
	border-radius: 20rpx;
	border: solid #40AE36;
	border-width: 0px 0px 6rpx 0px;
	text-align: center;
	justify-content: center;
	background-color: #40AE36;
	color: white;
	box-shadow: 0rpx 0rpx 10rpx 0rpx #40AE36;
}
.poptextList{
	width: 400rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border: solid lavender;
	border-width: 0px 0px 1rpx 0px;
}

</style>