xuan-pay-cweb/subpackages/groupBuyingConfiguration/storeProduct/storeProductAdd.vue

<template>
	<view class="all-container  pd-main  font16 backcor6" style="padding-bottom: 60px;">
		<view class="form-gorup  backcorfff">
			<view class="dis-flex marb10 bor-botm1">
				<view class=" marRight10 fontwig6 padleft15 paddtright10">名称:
				</view>
				<input type="text" name="name" v-model.trim="productData.name" placeholder-class="corf6"
					class=" flex-1 " placeholder="请输入名称">
			</view>
			<view class="dis-flex marb10 bor-botm1">
				<view class=" marRight10 fontwig6 padleft15 paddtright10">价格:
				</view>
				<input type="digit" name="name" v-model.trim="productData.price" placeholder-class="corf6"
					class=" flex-1 " placeholder="请输入价格(保留两位小数)">
			</view>
			<view class="dis-flex marb10 bor-botm1">
				<view class=" marRight10 fontwig6 padleft15 paddtright10">
					规格:
				</view>
				<input type="text" name="name" v-model.trim="productData.spec" placeholder-class="corf6"
					class=" flex-1 " placeholder="请输入规格">
			</view>
			<view class="dis-flex marb10 bor-botm1 paddbotm10">
				<view class=" marRight10 fontwig6 padleft15 paddtright10">分类:
				</view>
				<view class="flex-1 dis-flex ">
					<picker mode="selector" class="flex-1" :range="categoryList" range-key="name"
						@change="bindImgType">
						<view class=" text1 marRight10 font14" v-if="productData.productCategoryId">
							{{productCategoryName}}
						</view>
						<view class=" text1 marRight10 fcor999 font14" v-else>
							请选择分类
						</view>
					</picker>
					<image src="/static/img/jtg.png" mode="widthFix" class="iconw"></image>
				</view>
				
			</view>
			<view class="imageUploadContainer">
				<view class="imageUploadList"> 
					<view class="imageItem"  v-for="(item,index) in imgValue"  :key="index">   
						<image :src="imgUrl+item" mode="aspectFill"  @click="previewImage(imgUrl+item)" :data-index="index"></image>
						<view v-if="isShowDel" class="imageDel" @click="deleteImage(item)" >x</view> 						
					</view>
					<view v-if="isShowAdd" class="imageUpload" @click="upload">+</view>
				</view>
			</view>
		</view>
		
		<view class="footer-btn">
			<button class="backcor89 fcorfff" @click="clickToSave">保存</button>
		</view>
		
		
		
	</view>
</template>

<script>
	import {insertStoreProduct,getStoreProductById,editStoreProduct,getALLCategory} from '@/Utils/groupBuying.js'
	
	const app = getApp();
	export default {
		data(){
			return{
				reqUrl: app.globalData.url, //请求地址
				imgUrl: app.globalData.imgUrl, //图片访问地址
				status:'',//1.新增 2.编辑
				productData:{
					name:'',//名称
					price:'',//价格
					spec:'',//规格
					storeId:'',//门店id
					img:'',//图片
					productCategoryId:'',//分类
				},
				imgValue:[],//图片
				
				categoryList:[],//分类列表
				productCategoryName:'',
				
				
			}
		},
		
		computed:{
			isShowDel(){	
				return true	
			},
			isShowAdd(){
				if(this.imgValue.length>=1){
					return false
				}else{
					return true
				}
			},
			
		},
		onLoad(option) {
			this.productData.storeId = option.storeId;
			this.status=option.status;
			if(this.status==1){
				uni.setNavigationBarTitle({
					title:"添加产品"
				})
			}else{
				uni.setNavigationBarTitle({
					title:"编辑产品"
				})
			}
			if(option.id){
				this.productData.id =option.id;
				this.getStoreProductById()
			}
			this.getALLCategory();
		},
		methods:{
			/* 获取所有分类列表 */
			getALLCategory(){
				let params = {
					storeId: this.productData.storeId
				}
				getALLCategory(params).then(res => {
					if (res.return_code == '000000') {
						this.categoryList = res.return_data;
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			bindImgType(e) {
				this.productData.productCategoryId = this.categoryList[e.target.value].id;
				this.productCategoryName = this.categoryList[e.target.value].name;
			},
			clickToSave(){

				if(!this.validate()) return;
				
				this.productData.img = this.imgValue.join(",");
				
				if(this.status==1){//1.新增 2.编辑
					this.insertStoreProduct()
					return
				}
				if(this.status==2){
					this.editStoreProduct()
				}
				
				
			},
			/* 根据id查询详情 */
			getStoreProductById(){
				uni.showLoading({
					title:"加载中",
				})
				let that =this;
				let params={
					id:that.productData.id
				}
				getStoreProductById(params).then(res=>{
					uni.hideLoading();
					if (res.return_code == '000000') {
						console.log(res.return_data) ;
						this.productData.name = res.return_data.name;
						this.productData.price = res.return_data.price;
						this.productData.spec = res.return_data.spec;
						this.productData.img = res.return_data.img;
						
						this.productData.productCategoryId=res.return_data.productCategoryId;
						this.productCategoryName=res.return_data.productCategoryName;
						
						this.imgValue.push(res.return_data.img);
					}else{
					    uni.showToast({
					        title: res.return_msg,
					        icon: 'none',
					        duration: 2000
					    })
					}
				})
			},
			/* 增加 */
			insertStoreProduct(){
				insertStoreProduct(this.productData).then(res=>{
					let title ;
					if (res.return_code == '000000') {
					        title = res.return_data;                
					}else{
					    title = res.return_msg;
					}
					uni.showToast({
					    title: title,
					    icon: 'none',
					    duration: 2000
					}) 
					setTimeout(()=>{
						uni.navigateBack();
					},1000)
				})
			},
			/* 修改 */
			editStoreProduct(){
				editStoreProduct(this.productData).then(res=>{
					let title ;
					if (res.return_code == '000000') {
					        title = res.return_data;                
					}else{
					    title = res.return_msg;
					}
					uni.showToast({
					    title: title,
					    icon: 'none',
					    duration: 2000
					}) 
					setTimeout(()=>{
						uni.navigateBack();
					},1000)
				})
			},
			validate(){
				var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
				if(!reg.test(this.productData.price)||this.productData.price==0){
					uni.showToast({
						title:"请输入正确的金额格式",
						icon:"none"
					})
					this.productData.price="";
					return
				}
				
				
				if(!this.productData.name||!this.productData.price||!this.productData.spec){
					uni.showToast({
						title:"请填写完整哦!",
						icon:"none"
					})
					return false
				}
				if(!this.productData.productCategoryId){
					uni.showToast({
						title:"请选择分类!",
						icon:"none"
					})
					return false
				}
				
				
				if(this.imgValue.length==0){
					uni.showToast({
						title:"请选择图片上传",
						icon:"none"
					})
					return false
				}
				
				
				
				
				return true
			},
			
			// 删除图片
			deleteImage(data){
				let arr = this.imgValue.filter((item)=>item!=data);
				this.imgValue = arr;
			},
			// 预览
			previewImage(img){
				uni.previewImage({
					current: 0,
					indicator: "number",
					loop: "true",
					urls:[img]
				}) 
			},
			//上传图片
			upload() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.uploadFile(tempFilePaths[0]);
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			//上传
			uploadFile(imgURL) {
				 const that = this;
				uni.uploadFile({
					url: that.reqUrl + '/fileUpload/uploadfile',
					filePath: imgURL,
					header: {
						"Authorization": app.globalData.token
					},
					name: 'files',
					success: function(uploadFileRes) {
						that.getImgSignedUrl(JSON.parse(uploadFileRes.data)
							.return_data);
					}
				});
			},
			//查看临时图片路径
			getImgSignedUrl( item1) {
				this.imgValue.push(item1);
				console.log(this.imgValue,"this.imgValue")
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	
	
/* 表单 */
.form-gorup {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			
			input {
				height: 40px;
				line-height: 40px;
				border-radius: 0;
				box-sizing: border-box;
			}
		}
		.form-gorup-title {
			padding: 20rpx 0;
			margin-bottom: 5rpx;
			font-weight: 500;
			
			width: 74px;
			white-space: nowrap;
			text-align: right;
		}

/* 图片 */
.imageUploadContainer{
		padding: 10upx 5upx;
		margin: 10upx 5upx;
	}
	.name{
		text-align: center;
		margin-top:-30upx;
	}
	.dragging{
		transform: scale(1.2)
	}
	
	.imageUploadList{
		display: flex;
		flex-wrap: wrap;
	}
	
	.imageItem, .imageUpload{
		width: 200upx;
		height: 200upx;
		margin: 30upx 15upx 30upx;
	}
	
	.imageDel{
		position: relative;
		left: 180upx;
		bottom: 225upx;
		background-color: rgba(0,0,0,0.5);
		width: 36upx;
		text-align: center;
		line-height: 35upx;
		border-radius: 17upx;
		color: white;
		font-size: 30upx;
		padding-bottom: 2upx;
	}
	
	.imageItem image, .moveImage{
		width: 200upx;
		height: 200upx;
		border-radius: 8upx;
	}
	
	.imageUpload{
		line-height: 200upx;
		text-align: center;
		font-size: 150upx;
		color: #D9D9D9;
		border: 1px solid #D9D9D9;
		border-radius: 8upx;
	}
	
	.moveImage{
		position: absolute;
	}
	.uni-list {
		width: 260px;
	}	
	.popup_foot {
		display: flex;
		border-top: 1px #F9F9F9 solid;
		line-height: 40px;
		height: 40px;
		margin-top: 30px;
	}
	.build_01{
		line-height: 35px;
	}
	.build_01 input{
		background: #ededed;
	}
	.popup_foot_l {
		width: 50%;
		text-align: center;
	}
	
	.popup_foot_r {
		width: 50%;
		text-align: center;
		border-left: 1px #F9F9F9 solid;
		color: #5095D3;
	}

/* 底部按钮 */
.footer-btn{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	button{
		height: 50px;
		line-height: 50px;
	}
}
</style>