leave-unused/pagesA/release/release.vue

<template>
	<view class="pad-x20" v-if="isLoading">
		<!-- 头部 -->
		<status-nav :ifReturn="true" :navBarTitle="pageTitle"></status-nav>
		<!-- 提示 -->
		<view class="notice-tips color-orange font26 border-box pad-all20 flex"><image src="/static/icon-notice.png" mode="widthFix"></image>请确保商品信息及联系方式的真实性!</view>
		<!-- 商品编辑 -->
		<view class="release-form color-48 background-white border-box">
			<view class="item font26 mar-x30 flex">
				<view class="title">小区选择<text class="color-red">*</text></view>
				<picker mode="selector" :range="estateList" @change="choiceEstate" :value="estateIndex" :range-key="'name'">
					<view class="cate-name">
						<text>{{estateList[estateIndex].name}}</text>
						<image src="/static/icon-arrow-down.png" mode=""></image>
					</view>
				</picker>
			</view>
			<view class="item font26 mar-x30 flex">
				<view class="title">商品分类<text class="color-red">*</text></view>
				<picker mode="selector" :range="cateList" @change="choiceCate" :value="cateIndex" :range-key="'name'">
					<view class="cate-name">
						<text>{{cateList[cateIndex].name}}</text>
						<image src="/static/icon-arrow-down.png" mode=""></image>
					</view>
				</picker>
			</view>
			<view class="item font26 mar-x30 flex">
				<view class="title">商品名称<text class="color-red">*</text></view>
				<input type="text" v-model="goodsDetail.name" placeholder="请输入商品名称" placeholder-style="color:#8c8c9b">
			</view>
			<view class="item font26 mar-x30 flex">
				<view class="title">商品原价</view>
				<input type="number" v-model="goodsDetail.original_price" placeholder="请输入商品原价" placeholder-style="color:#8c8c9b">
			</view>
			<view class="item font26 mar-x30 flex">
				<view class="title">商品售价<text class="color-red">*</text></view>
				<input type="number" v-model="goodsDetail.price" placeholder="请输入商品售价" placeholder-style="color:#8c8c9b">
			</view>
			<view class="item font26 mar-x30 flex">
				<view class="title">联系方式<text class="color-red">*</text></view>
				<input type="number" v-model="phone" placeholder="请输入联系方式" placeholder-style="color:#8c8c9b">
			</view>
			<view class="item font26 mar-x30 flex">
				<view class="title">商品描述<text class="color-red">*</text></view>
				<textarea v-model="goodsDetail.msg" placeholder="请输入商品描述" placeholder-style="color:#8c8c9b"></textarea>
			</view>
			<view class="item font26 mar-x30 flex">
				<view class="title">封面图<text class="color-red">*</text></view>
				<view class="upload-box border-box flex">
					<view class="img radius10 border-box" v-if="cover!==''">
						<image :src="cover" mode="widthFix"></image>
						<image class="del-btn" src="/static/icon-del.png" mode="widthFix" @tap="cover=''"></image>
					</view>
					<view class="upload-btn radius10 border-box flex" @tap="changeImg('cover')" v-if="cover==''"><image src="/static/icon-release.png" mode="widthFix"></image></view>
				</view>
			</view>
			<view class="item font26 mar-x30 flex">
				<view class="title">商品图片<text class="color-red">*</text></view>
				<view class="upload-box border-box flex">
					<view class="img radius10 border-box" v-for="(item,index) in goodsImg" :key="index">
						<image :src="item" mode="widthFix"></image>
						<image class="del-btn" src="/static/icon-del.png" mode="widthFix" @tap="delImg(index)"></image>
					</view>
					<view class="upload-btn radius10 border-box flex" @tap="changeImg('img')" v-if="goodsImg.length<4"><image src="/static/icon-release.png" mode="widthFix"></image></view>
				</view>
			</view>
		</view>
		<view class="release-btn background-blue font32 radius10 color-ff flex" @tap="addGoodsEv">提交</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				pageTitle:'', //页面名称
				estateList:[], //小区列表
				estateIndex:0, //小区选择
				cateList:[], //分类列表
				cateIndex:0, //分类选择
				goodsDetail:{}, //商品详情
				cover:'', //封面图
				goodsImg:[], //商品图片
				phone:'', //联系电话
				isEdit:false, //是否编辑进入
				isLoading:false, //是否记载完成
				page:1, //页数
				size:100, //条数
				StagingImg:'', //暂存img 
				goods_id:-1, //商品id
			}
		},
		onLoad(op) {
			if(op.id){
				// 判断是否是编辑进入
				this.isEdit = true;
				this.pageTitle = '编辑商品';
				// 获取商品id
				this.goods_id = op.id;
			}else{
				this.pageTitle = '新增商品';
				// 获取用户信息
				this.getUserInfo();
			}
			// 查询小区列表
			this.getEstateList();
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				this.$requst.get('/api/v1/user/info').then(res=>{
					console.log(res,'用户信息');
					if(res.code==0) {
						this.phone = res.data.mobile;
					}
				})
			},
			// 查询小区列表
			getEstateList(){
				this.$requst.get('/api/v1/goods/area').then(res=>{
					if(res.code == 0){
						console.log(res,'小区列表')
						let estateArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id:item.id,
								name:item.title,
							}
							estateArr.push(obj)
						})
						this.estateList = this.estateList.concat(estateArr);
						this.estateIndex =  this.estateList.findIndex(item=> item.id === uni.getStorageSync('area_id'));
						// 查询分类
						this.getCateList();
					}
				})
			},
			
			// 查询分类
			getCateList(){
				if(this.page==1) this.goodsList = [];
				this.$requst.get('/api/v1/goods/category').then(res=>{
					if(res.code == 0){
						console.log(res,'物品分类列表')
						let cateArr = [];
						res.data.forEach(item=>{
							let obj = {
								id:item.id,
								name:item.title
							}
							cateArr.push(obj)
						})
						this.cateList = cateArr;
						if(this.isEdit){
							// 查询商品详情
							this.getGoodsDetail(this.goods_id);
						}else{
							this.isLoading = true;
						}
					}
				})
			},
			
			// 查询商品详情
			getGoodsDetail(id){
				this.$requst.get('/api/v1/goods/detail',{id:id}).then(res=>{
					if(res.code == 0){
						console.log(res,'闲置商品详情');
						// 获取图片
						this.goodsImg = res.data.images;
						// 获取电话
						this.phone = res.data.phone;
						// 获取封面图
						this.cover = res.data.cover;
						// 获取当前分类
						this.cateIndex =  this.cateList.findIndex(item=> item.name === res.data.category_name);
						// 获取当前小区
						this.estateIndex =  this.estateList.findIndex(item=> item.name === res.data.area_name);
						// 获取商品详情
						this.goodsDetail = {
							id:res.data.id,
							name:res.data.title,
							original_price:parseFloat(res.data.original_price),
							price:parseFloat(res.data.price),
							msg:res.data.content
						};
					}
					this.isLoading = true;
				})
			},
			
			// 新增or编辑闲置商品
			addGoodsEv(){
				let params = {
					id:this.goods_id!==-1?this.goods_id:'',
					title:this.goodsDetail.name,
					cover:this.cover,
					category_id:this.cateList[this.cateIndex].id,
					area_id:this.estateList[this.estateIndex].id,
					phone:this.phone,
					original_price:this.goodsDetail.original_price,
					price:this.goodsDetail.price,
					images:this.goodsImg.join(','),
					content:this.goodsDetail.msg
				}
				this.$requst.post(this.isEdit?'/api/v1/goods/edit':'/api/v1/goods/add',params).then(res=>{
					if(res.code == 0){
						if(this.isEdit){
							this.$toolAll.tools.showToast('修改成功');
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1,
									fail: () => {
										uni.reLaunch({
											url: '/pages/idle/idle'
										})
									}
								})
							},500)
						}else{
							this.$toolAll.tools.showToast('添加成功');
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/idle/idle',
								})
							},500)
						}
					}else{
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			},
			
			// 选择分类
			choiceCate(e){
				this.cateIndex = e.detail.value;
			},
			
			// 选择小区
			choiceEstate(e){
				this.estateIndex = e.detail.value;
			},
			
			// 选择图片
			changeImg(type){
				if(type=='cover') this.cover = '';
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album','camera'], //从相册选择
					success: (res)=> {
						this.StagingImg = res.tempFilePaths[0];
						// 上传图片
						this.uploadImg(type);
					}
				})
			},
			
			// 上传图片
			uploadImg(type){
				uni.showLoading({
					title: '上传中'
				});
				this.$requst.upload('/api/v1/file/upload/image',{path:this.StagingImg}).then(res=>{
					if(res.code==0) {
						if(type=='cover'){
							this.cover = this.$hostHttp+res.data.src;
						}
						if(type=='img'){
							this.goodsImg.push(this.$hostHttp+res.data.src);
						}
					}
					uni.hideLoading();
				})
			},
			
			// 删除图片
			delImg(index){
				this.goodsImg.splice(index,1);
			}
		}
	}
</script>
<style scoped>
	.notice-tips{
		align-items: center;
		background-color: rgba(255,133,0,.2);
		height: 70rpx;
		line-height: 36rpx;
	}
	.notice-tips>image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
		animation: opacity_name 0.8s linear alternate infinite;
	}
	@keyframes opacity_name {
		from {
			opacity: .1;
			transform: scale(.8);
		}
		to {
			opacity: 1;
			transform: scale(1.2);
		}
	}
	.release-form{
		padding: 20rpx;
	}
	.release-form .item{
		align-items: center;
	}
	.release-form .item:last-child{
		margin-bottom: 0;
	}
	.release-form .item>.title{
		width: 140rpx;
	}
	.release-form .item>picker,
	.release-form .item>input,
	.release-form .item>textarea{
		box-sizing: border-box;
		width: calc(100% - 140rpx);
		height: 80rpx;
		padding: 0 10rpx;
		border: 2rpx solid #f4f5f6;
		border-radius: 5rpx;
	}
	.release-form .item>textarea{
		padding: 10rpx;
		height: 200rpx;
		line-height: 1.5;
	}
	.release-form .item .cate-name{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 76rpx;
	}
	.release-form .item image{
		width: 28rpx;
		height: 16rpx;
	}
	.release-form .item>.upload-box{
		flex-wrap: wrap;
		box-sizing: border-box;
		width: calc(100% - 140rpx);
	}
	.release-form .item .img,
	.release-form .item .upload-btn{
		position: relative;
		width: 132rpx;
		height: 132rpx;
		margin: 10rpx 10rpx 0 0;
		overflow: hidden;
	}
	.release-form .item>.img:nth-of-type(4n){
		margin-right: 0;
	}
	.release-form .item .img>image:first-child{
		width: 100%;
		min-height: 100%;
	}
	.release-form .item .img>.del-btn{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 2rpx;
		top: 2rpx;
	}
	.release-form .item .upload-btn{
		justify-content: center;
		align-items: center;
		margin-right: 0;
		background-color: #ccc;
	}
	.release-form .item .upload-btn>image{
		width: 48rpx;
		height: 48rpx;
		filter: grayscale(100%);
	}
	.release-btn{
		justify-content: center;
		align-items: center;
		width: 80%;
		height: 90rpx;
		margin: 40rpx auto 0;
	}
</style>