uniapp视频图片上传

<template>
	<view class="release-page">
			
			<!-- #ifdef APP-PLUS -->
				<uni-nav-bar fixed="true" left-icon="back" :status-bar="true" :border="false" title="发布" @clickLeft="back">
				</uni-nav-bar>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
				<uni-nav-bar fixed="true" :border="false">
				</uni-nav-bar>
				<view  style="height:80rpx;"></view>
			<!-- #endif -->
			
			<view class="allBox">
				
				<!-- 输入内容 -->
				<view class="textBox">
					<textarea class="site fontSize" minlength="0" maxlength="100" @input="descInput" v-model="form.goods_text" placeholder="请输入内容"></textarea>
					<text class="xianzhi">{{remnant}}/100</text>
					<view class="video" @click="getVideo">
						<image src="/static/image/video1.png"></image>
					</view>
					<view class="photo" @click="getImg">
						<image src="/static/image/photo1.png"></image>
					</view>
					<text class="inputCss fontSize">
						<text class="tipsX">*</text>
						上传图片或视频(图片最多上传9张,视频最多上传1个)
					</text>
				</view>
				<view class="upload">
					<!-- <input class="inputCss fontSize" disabled placeholder="上传图片或时评(图片最多上传9张,视频最多上传1个)" type="text" /> -->
				
					<view class="imageBox flexWrap">
						<view v-if="showList.length > 0" v-for="(item,index) in showList" :key="index" class="imgre">
							<text @click="del(index)" class="del themeG">×</text>
							<image v-if="item.type == 'img'" @click="lookPic(index,showList)" :src="item.img" mode="" class="selectImg"></image>
							<image v-if="item.type =='video'" @click="payModeSelect(index)" :src="item.img+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,ar_auto'"
							 mode="" class="selectImg"></image>
							 <u-icon v-if="item.type =='video'" @click="payModeSelect(index)" color="#fff" name="play-circle" size="60" class="play"></u-icon>
						</view>
						<!-- <image @click="getImg" v-if="fileList.length < 9" src="../../../static/image/save.png" mode="" class="selectImg"></image> -->
					</view>
				
				</view>
				<view class="formBox">
					<!-- 商品分类 -->
					<view class="classification">
						<text class="tipsX">*</text>
						<text class="fontSize">商品分类</text>
						<view class="selectList">
							<picker mode="multiSelector" class="cpicker" @change="changePicker" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
							 :range="multiArray">
								<input disabled type="text" v-model="form.memberType" class="listIpt" />
							</picker>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 商品标题 -->
					<view class="classification">
						<text class="tipsX">*</text>
						<text class="fontSize">商品标题</text>
						<view class="selectList">
							<input type="text" v-model="form.goods_name" class="listIpt" />
							<!-- <u-icon name="arrow-right"></u-icon> -->
						</view>
					</view>
					<!-- 商品原价 -->
				<!-- 	<view class="classification" @click="getFocus(0)">
						<text>商品原价</text>
						<view class="selectList">
							<text v-if="form.goods_marketprice">¥</text>
							<input type="number" :focus="evaluateState" @blur="blurFocus(0)" maxlength="8" v-model="form.goods_marketprice" :style="{priceWidth+'upx'}" @input="priceInput" class="listIpt" />
						
						</view>
					</view> -->
					
					<!-- 商品现价 -->
					<view class="classification" @click="getFocus(1)">
						<text class="tipsX">*</text>
						<text class="fontSize">商品现价</text>
						<view class="selectList">
							<text v-if="form.goods_price">¥</text>
							<input type="number" :focus="evaluateState1" @blur="blurFocus(1)" maxlength="8" v-model="form.goods_price" :style="{priceWidth2+'upx'}" @input="priceInput2" class="listIpt" />
							<!-- <u-icon name="arrow-right"></u-icon> -->
						</view>
					</view>
					
					<!-- 库存 -->
					<view class="classification" @click="getFocus(0)">
						<text class="tipsX">*</text>
						<text class="fontSize">商品库存</text>
						<view class="selectList">
							<input type="number" :focus="evaluateState" @blur="blurFocus(0)" maxlength="8" v-model="form.goods_storage" @input="priceInput" class="listIpt" />
						</view>
					</view>
					<!--  配送方式 -->
					<view class="classification">
						<text class="tipsX">*</text>
						<text class="fontSize">配送方式</text>
						<view class="selectList">
							<picker mode="selector" class="cpicker" @change="changePickerF" :value="listIndex" :range="listMode">
								<text class="fontSizeSM">{{listMode[listIndex]}}</text>
							</picker>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 商品运费 -->
					<view class="classification" @click="getFocus(2)">
						<text class="tipsX">*</text>
						<text class="fontSize">商品运费</text>
						<view class="selectList">
							<text v-if="form.goods_freight || listIndex && default_shipping_fee">¥</text>
							<input v-if="listIndex == 1" :value="default_shipping_fee" type="number" disabled style="100px;" class="listIpt" />
							<input v-else type="number" :focus="evaluateState2" @blur="blurFocus(2)" maxlength="8" :style="{priceWidth3+'upx'}" @input="priceInput3" v-model="form.goods_freight" class="listIpt" />
						</view>
					</view>
					<!-- 是否可以退款 -->
				<!-- 	<view class="classification">
						<text>能否退货</text>
						<view class="selectList">
							<picker mode="selector" class="cpicker" @change="isRefundChangePicker" :value="isRefund"
							 :range="isRefundList">
								<text>{{isRefundList[isRefund]}}</text>
							</picker>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view> -->
					<!--   发货地址 -->
					<view class="classification" @click="selectAddress">
						<text class="tipsX">*</text>
						<text class="fontSize">发货地址</text>
						<view class="selectList">
							<input type="text" disabled v-model="addressText" class="listIpt" />
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="relesePage" @click="uploadShop" :class="{'isClick':isClick}">
					发布
				</view>
			</view>
			
			
			
			<!-- 弹框 -->
			<uni-popup ref="payMode" type="center" :animation="true">
				<view class="picBox">
					<video :src="lookPicIndex" controls autoplay></video>
				</view>
			</uni-popup>
			
	</view>
</template>

<script>
	import uniPopup from '@/component/uni-popup/uni-popup.vue';
	import uniNavBar from '@/component/uni-nav-bar/uni-nav-bar.vue';
	export default {
		components: {
			uniPopup,
			uniNavBar
		},
		data() {
			return {
				showList: [],
				fileList: [],
				listMode:['快递','平台配送'],
				listIndex:1,
				isRefundList:['否','是'],
				isRefund:0,
				form: {
					goods_name: '',
					goods_price: '',
					goods_freight_type:1,
					goods_freight: '',
					memberType: '',
					goods_text: '',
					goods_storage:''
				},
				place_of_delivery: '',
				idsForm: {
					gc_id_1: '',
					gc_id_2: '',
					gc_id_3: ''
				},
				addressText: '',
				video: '',
				image: '',
				show: false,
				// needFreight: null,
				remnant: 0,
				oneType: [],
				twoType: [],
				threeType: [],
				oneTypeIndex: 0,
				twoTypeIndex: 0,
				multiArray: [],
				multiIndex: [0, 0, 0],
				oldIndex: [],
				allClass: [],
				isFreight: false,
				lookPicIndex:'',
				recordIndex: null,
				priceWidth:60,
				afterWidth:0,
				priceWidth2:60,
				afterWidth2:0,
				priceWidth3:60,
				afterWidth3:0,
				evaluateState:false,
				evaluateState1:false,
				evaluateState2:false,
				titleFocus:false,
				imgList:[],
				isClick:false,
				default_shipping_fee:''
			}
		},
		onLoad(e) {
			let addressId = uni.getStorageSync("address");
			if (addressId) {
				let that = this;
				that.place_of_delivery = addressId;
				that.getAddressDetail(addressId);
				uni.getStorage({
					key:"allData",
					success(res) {
						let data = JSON.parse(res.data);
						if(data.form.goods_price){
							that.priceWidth2 = that.priceWidth2+(data.form.goods_price.length*20);
						}
						if(data.form.goods_freight){
							that.priceWidth3 = that.priceWidth3+(data.form.goods_freight.length*20);
						}
						that.form = data.form;
						that.fileList = data.fileList;
						that.showList = data.showList;
						that.idsForm = data.idsForm;
						that.video = data.video;
						that.listIndex = data.listIndex;
					}
				})
				
			}
			
		},
		onShow() {
			let that = this;
			that.getAddressData();
			that.getUserInfo();
			that.getClass();
			uni.getStorage({
				key: 'address',
				success(res) {
					if (res.data) {
						that.getAddressDetail(res.data);
						that.place_of_delivery = res.data;
					}
				}
			});
		},
		methods: {
			
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			getAddressData () {
				let that = this;
				that.$util.request({
					url:'/mobile/index.php?act=member_address&op=address_list',
					method:'get',
					data:{}
				}).then(res =>{
					if(res.error_code == 0) {
						for(var i = 0; i < res.datas.address_list.length ; i++){
							if(res.datas.address_list[i].is_default == 1){
								that.addressText = res.datas.address_list[i].area_info + ' ' + res.datas.address_list[i].address;
								that.place_of_delivery = res.datas.address_list[i].address_id;
							}
						}
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=index',
					method: 'post',
					data: {}
				}).then(res => {
					if (res.error_code == 0) {
						if (res.datas.member_is_store == 0) {
							uni.showToast({
								title: '您还不是卖家,请先申请入驻',
								icon: 'none',
								duration: 1000,
								success() {
									// 此处得改
									setTimeout(() => {
										uni.navigateTo({
											url: '/pagesB/pages/sellerPresence/sellerPresence'
										})
									}, 1000)
								}
							})

						}
					}
				})
			},
				// 图片预览
			lookPic(current,urls){
				let newArr = [];
				for(var i = 0; i < urls.length; i++){
					if(urls[i].type == 'img'){
						newArr.push(urls[i].img);
					}
				}
				urls = newArr;
				uni.previewImage({
					current:current,
					urls:urls,
					indicator:'number'
				})
			},
			// 弹窗
			payModeSelect(index) {
				let that = this;
				this.$refs.payMode.open()
				this.lookPicIndex = this.showList[index].img;
			},
			closeWin() {
				this.$refs.payMode.close()
			},
			getAddressDetail(id) {
				let that = this;
				that.$util.request({
					url: '/mobile/index.php?act=member_address&op=address_info',
					method: 'get',
					data: {
						address_id :id
					}
				}).then(res => {
					that.addressText = res.datas.address_info.area_info + ' ' + res.datas.address_info.address;;
				})
			},
			getImg() {
				let that = this;
				if (that.showList.length >= 9) {
					uni.showToast({
						title: '上传数量上限',
						icon: 'none',
						duration: 1000
					})
					return false;
				}
				uni.chooseImage({
					count: 9,
					sourceType: ['album', 'camera'],
					success(res) {
							
						// let img = res.tempFilePaths;
						// console.log(res.tempFilePaths)
						// let img = res.tempFilePaths[0].join(",");
						
						let url = 'index.php?act=goods&op=authUploadImg';
						// console.log(img);
						let iNum = 9 - that.showList.length;
						for(let i = 0; i < res.tempFilePaths.length; i++){
							if(i == iNum){
								return false
							}
							setTimeout(()=>{
								that.uploadImg(res.tempFilePaths[i], 'img', '图片', url)
							},i*200)
						}
						if(res.tempFilePaths.length > iNum){
							uni.showToast({
								title:'上传数量上限',
								icon:'none'
							})
						}
						// console.log(res.tempFilePaths[0].split(","))
						// that.uploadImg(res.tempFilePaths[0], 'img', '图片', url)
					}
				})
			},
			// 获取视频
			getVideo() {
				let that = this;
				if (that.showList.length >= 9) {
					uni.showToast({
						title: '上传数量上限',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (that.video) {
					uni.showToast({
						title: '视频只能上传1个',
						icon: 'none',
						duration: 1000
					})
					return
				}
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						let url = 'index.php?act=goods&op=upload_video';
						let str = res.tempFilePath.substring(0,4);
						// 拍摄
						if(str != "file"){
							let result = that.uploadPro(res.tempFilePath, '视频', url);
							result.then(imgStr=>{
								imgStr = JSON.parse(imgStr.data);
								if (imgStr.error_code == 0) {
									that.recordIndex = that.showList.length;
									that.showList.push({
										img: imgStr.datas.full_image_url,
										type: 'video'
									})
									that.video = imgStr.datas.image_url;
									uni.showToast({
										title: imgStr.message,
										icon: "none"
									})
								} else {
									uni.showToast({
										title: imgStr.message,
										icon: "none"
									})
								}
								uni.hideLoading();
							});
						}else{
							that.uploadImg(res.tempFilePath, 'video', '视频', url)
						}
						
					},
					fail(e) {
						console.log(e)
					}
				});
			},
			// 图片视屏删除
			del(index) {
				if (this.recordIndex == index) {
					this.video = '';
					this.showList.splice(index, 1);
					this.recordIndex = null;
				} else {
					this.showList.splice(index, 1);
					if(this.recordIndex != null && this.recordIndex < index){
						this.fileList.splice(index-1, 1);
					}else{
						this.fileList.splice(index, 1);
					}
					if (this.recordIndex > index) {
						this.recordIndex--;
					}
				}
			},
			// 返回上一页
			onBackPress(e) {
				if (e.from == "backbutton") {
					uni.removeStorage({
						key: 'allData'
					})
					uni.navigateBack({
						delta: 1
					})
				}
			},
			// 发布
			uploadShop() {
				let that = this;
				if(that.isClick){
					return false;
				}
				that.image = '';
				for (var i = 0; i < that.fileList.length; i++) {
					if (that.fileList[i].type == 'img') {
						that.image += that.fileList[i].img;
						that.image += ','
					}
				}
				that.image = that.image.substr(0, that.image.length - 1);
				// if (this.listIndex == 1) {
				// 	this.form.goods_freight = this.needFreight;
				// }
				if(that.image == "" && that.video == ""){
					uni.showToast({
						title:'必须上传一张图片或者视频',
						icon:'none'
					})
					return false
				}
				if(that.idsForm.gc_id_1 == '' && that.idsForm.gc_id_2 == ''){
					uni.showToast({
						title:'请选择分类',
						icon:'none'
					})
					return false
				}
				if(that.form["goods_storage"] < 1){
					uni.showToast({
						title:'库存不能小于1',
						icon:'none'
					})
					return false
				}
				for (var i in that.form){
					if(that.listIndex == 1){
						if(that.form[i] == '' && i != "goods_freight"){
							uni.showToast({
								title:'请完善信息',
								icon:'none'
							})
							return false
						}
					}else{
						if(that.form[i] == ''){
							uni.showToast({
								title:'请完善信息',
								icon:'none'
							})
							return false
						}
					}
				}
				let data = {
					goods_text: that.form.goods_text,
					gc_id_1: that.idsForm.gc_id_1,
					gc_id_2: that.idsForm.gc_id_2,
					goods_name: that.form.goods_name,
					goods_price: that.form.goods_price,
					goods_freight: that.form.goods_freight,
					goods_freight_type:that.form.goods_freight_type,
					place_of_delivery: that.place_of_delivery,
					goods_video: that.video,
					goods_image: that.image,
					goods_storage:that.form.goods_storage
				}
				that.isClick = true;
				that.$util.request({
					url: '/mobile/index.php?act=goods&op=add_goods',
					method: 'post',
					data: data
				}).then(res => {
					if (res.error_code == 0) {
						uni.showToast({
							title: res.message,
							icon: 'success',
							duration: 1000,
							success() {
								setTimeout(()=>{
									uni.navigateTo({
										url: '/pagesA/pages/user/sell'
									})
									that.clearData();
								},1000)
							}
						})
						uni.removeStorage({
							key: 'allData'
						})
						uni.removeStorage({
							key: 'address'
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 1000
						})
					}
					setTimeout(()=>{
						that.isClick = false;
					},2000)
				})
			},
			// 跳转到地址
			selectAddress() {
				let allData = {
					form:this.form,
					fileList:this.fileList,
					showList:this.showList,
					idsForm:this.idsForm,
					video:this.video,
					listIndex:this.listIndex
				}
				uni.setStorage({
					key: 'allData',
					data: JSON.stringify(allData)
				})
				uni.navigateTo({
					url: '/pages/address/address?type=releaseA'
				})
			},
			descInput() {
				var txtVal = this.form.goods_text.length;
				this.remnant = txtVal;
			},
			popup(index) {
				this.form.freeItem = this.list[index].text;
			},
			// 获取分类
			getClass() {
				this.multiArray = [];
				this.oneType = [];
				this.twoType = [];
				this.$util.request({
					url: '/mobile/index.php?act=goods_class&op=getAllClass',
					method: 'get',
					data: {}
				}).then(res => {
					this.allClass = res.datas.goods_class;
					this.default_shipping_fee = res.datas.default_shipping_fee;
					this.renderPicker(true);
				})
			},
			// 联动处理	
			renderPicker(isT, arr) {
				let num = 1;
				let num1 = 1;
				if (isT) {
					this.oneType = [];
				}
				for (var i = 0; i < this.allClass.length; i++) {
					if (isT) {
						this.oneType.push(this.allClass[i].gc_name);
						this.twoType = [];
					} else {
						if (this.oneType[arr[0]] == this.allClass[i].gc_name) {
							this.idsForm.gc_id_1 = this.allClass[i].gc_id;
							this.oldIndex[0] = this.allClass[i].gc_id;
						}
					}
					if (this.allClass[this.oneTypeIndex].class2.length != 0) {
						for (var j = 0; j < this.allClass[this.oneTypeIndex].class2.length; j++) {
							if (isT) {
								this.twoType.push(this.allClass[this.oneTypeIndex].class2[j].gc_name);
								this.threeType = [];
							} else {
								if (this.twoType[arr[1]] == this.allClass[this.oneTypeIndex].class2[j].gc_name) {
									if (num == 1) {
										this.idsForm.gc_id_2 = this.allClass[this.oneTypeIndex].class2[j].gc_id;
										this.oldIndex[1] = this.allClass[this.oneTypeIndex].class2[j].gc_id;
										num++;
									}
								}
							}
							// if (this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3.length != 0) {
							// 	for (var l = 0; l < this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3.length; l++) {
							// 		if (isT) {
							// 			this.threeType.push(this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3[l].gc_name);
							// 		} else {
							// 			if (this.threeType[arr[2]] == this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3[l].gc_name) {
							// 				if (num1 == 1) {
							// 					this.idsForm.gc_id_3 = this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3[l].gc_id;
							// 					this.oldIndex[2] = this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3[l].gc_id;
							// 					num1++;
							// 				}
							// 			}
							// 		}
							// 	}
							// }
						}
					}
				}
				// console.log(this.oneType)
				if (isT) {
					if (this.oneType.length != 0) {
						this.multiArray.push(this.oneType);
					}
					if (this.twoType.length != 0) {
						this.multiArray.push(this.twoType);
					}
					// if (this.threeType.length != 0) {
					// 	this.multiArray.push(this.threeType);
					// }
				}
			},
			bindMultiPickerColumnChange: function(e) {
				this.multiArray = [];
				if (e.detail.column == 0) {
					this.oneTypeIndex = e.detail.value;
					this.twoTypeIndex = 0;
				} else if (e.detail.column == 1) {
					this.twoTypeIndex = e.detail.value;
				}
				this.multiIndex[e.detail.column] = e.detail.value;
				this.renderPicker(true);
				this.$forceUpdate();
			},
			// 确定时改变
			changePicker(e) {
				// if (e.detail.value.length == 3 && this.threeType[e.detail.value[2]] != undefined) {
				// 	this.form.memberType = this.multiArray[0][this.multiIndex[0]] + ',' + this.multiArray[1][this.multiIndex[1]] + ',' +
				// 		this.multiArray[2][this.multiIndex[2]];
				// } else {
					this.form.memberType = this.multiArray[0][this.multiIndex[0]] + ',' + this.multiArray[1][this.multiIndex[1]];
				// }
				this.renderPicker(false, e.detail.value);
			},
			changePickerF(e) {
				this.listIndex = e.detail.value;
				if (e.detail.value == 0) {
					// this.isFreight = false;
					// this.form.goods_freight = 0;
					this.form.goods_freight_type = 2;
				}else if(e.detail.value == 1){
					// this.isFreight = true;
					this.form.goods_freight_type = 1;
					this.form.goods_freight = '';
				}
				// else {
					// this.isFreight = false;
					// this.form.goods_freight = -1;
				// }
			},
			// isRefundChangePicker(e){
			// 	this.isRefund = e.detail.value;
			// 	this.form.goods_refund_type = e.detail.value;
			// },
			uploadPro(tempFilePaths, text ,url) {
				uni.showLoading({
					title:text+'上传中'
				})
				let that = this;
				let data = that.$utilImg.request(url);
				return new Promise(res => {
					uni.uploadFile({
						// 需要上传的地址
						url: 'http://xbbang.aitecc.com/mobile/' + url,
						// filePath  需要上传的文件
						filePath: tempFilePaths,
						name: 'file',
						formData: {
							key: data.key,
							api_sign: data.api_sign,
							comefrom: data.comefrom,
							api_time: data.api_time,
							api_member_id: data.api_member_id,
							api_member_name: data.api_member_name,
						},
						success(res1) {
							res(res1);
						}
					})
				})
			},
			// 图片视屏上传
			async uploadImg(tempFilePaths, type, text, url) {
				let that = this;
				let imgStr = await that.uploadPro(tempFilePaths,text,url);
				imgStr = JSON.parse(imgStr.data);
				if (imgStr.error_code == 0) {
					if (type == 'img') {
						console.log(imgStr)
						that.showList.push({
							img: imgStr.datas.full_image_url,
							type: 'img'
						})
						that.fileList.push({
							img: imgStr.datas.image_url,
							type: 'img'
						});
					} else {
						that.recordIndex = that.showList.length;
						that.showList.push({
							img: imgStr.datas.full_image_url,
							type: 'video'
						})
						that.video = imgStr.datas.image_url;
					}
					uni.showToast({
						title: imgStr.message,
						icon: "none"
					})
				} else {
					uni.showToast({
						title: imgStr.message,
						icon: "none"
					})
				}
				uni.hideLoading()
				// uni.showToast({
				// 	title: text + "上传中",
				// 	icon: "none",
				// 	duration:1000,
				// 	success: (result) => {
						
				// 	}
				// })
			},
			// 长度计算
			priceInput(e){
				if(this.afterWidth < e.detail.value.length){
					this.priceWidth += 20;
				}else if(this.afterWidth != e.detail.value.length){
					if(this.priceWidth>40){
						this.priceWidth -= 20;
					}
				}
				this.afterWidth = e.detail.value.length;
			},
			
			// 长度计算
			priceInput2(e){
				if(this.afterWidth2 < e.detail.value.length){
					this.priceWidth2 += 20;
				}else if(this.afterWidth2 != e.detail.value.length){
					if(this.priceWidth2>40){
						this.priceWidth2 -= 20;
					}
				}
				this.afterWidth2 = e.detail.value.length;
			},
			
			// 长度计算
			priceInput3(e){
				if(this.afterWidth3 < e.detail.value.length){
					this.priceWidth3 += 20;
				}else if(this.afterWidth3 != e.detail.value.length){
					if(this.priceWidth3>40){
						this.priceWidth3 -= 20;
					}
				}
				this.afterWidth3 = e.detail.value.length;
			},
			getFocus(type){
				if(type == 0){
					this.evaluateState = !this.evaluateState;
				}else if (type == 1){
					this.evaluateState1 = !this.evaluateState1;
				}else{
					this.evaluateState2 = !this.evaluateState2;
				}
			},
			blurFocus(type){
				if(type == 0){
					this.evaluateState = !this.evaluateState;
				}else if (type == 1){
					this.evaluateState1 = !this.evaluateState1;
				}else{
					this.evaluateState2 = !this.evaluateState2;
				}
			},
			clearData(){
				this.showList = [],
				this.fileList = [],
				this.listMode = ['快递','平台配送'],
				this.listIndex = 1,
				this.isRefundList =['否','是'],
				this.isRefund =0,
				this.form = {
					goods_name: '',
					goods_price: '',
					goods_freight: '',
					goods_freight_type:1,
					memberType: '',
					goods_text: '',
					goods_storage:'',
				},
				this.place_of_delivery = '',
				this.idsForm = {
					gc_id_1: '',
					gc_id_2: '',
					gc_id_3: ''
				},
				this.addressText = '',
				this.video = '',
				this.image = '',
				this.show = false,
				this.needFreight = null,
				this.remnant =  0,
				this.oneType =  [],
				this.twoType =  [],
				this.threeType =  [],
				this.oneTypeIndex =  0,
				this.twoTypeIndex =  0,
				this.multiArray =  [],
				this.multiIndex =  [0, 0, 0],
				this.oldIndex =  [],
				this.allClass =  [],
				this.isFreight =  false,
				this.lookPicIndex = '',
				this.lookPicType =  '',
				this.recordIndex =  null,
				this.priceWidth = 60,
				this.afterWidth = 0,
				this.priceWidth2 = 60,
				this.afterWidth2 = 0,
				this.priceWidth3 = 60,
				this.afterWidth3 = 0,
				this.evaluateState = false,
				this.evaluateState1 = false,
				this.evaluateState2 = false,
				this.titleFocus = false,
				this.imgList = []
			}
		}
	}
</script>

<style scoped lang="scss">
	.imagePic {
		 130rpx !important;
		height: 130rpx !important;
	}
	.fontSize {
		font-size: 35rpx !important;
		font-weight: 400 !important;
	}
	.fontSizeSM {
		font-size: 30rpx !important;
		font-weight: 400 !important;
	}
	.release-page {
		.allBox{
			padding: 20upx;
			box-sizing: border-box;
			
			
			.textBox {
				 100%;
				position: relative;
				// background-color: #F7F7F7;
				// height: 520rpx;
				.site {
					 100%;
					height: 430upx;
					background: rgba(247, 247, 247, 1);
					border-radius: 8upx;
					// padding-left: 30upx;
					padding:20upx;
					// padding-top: 30upx;
					box-sizing: border-box;
				}
			
				.xianzhi {
					position: absolute;
					right: 36upx;
					bottom: 108upx;
				}
			
				.site::-webkit-input-placeholder {
					color: #ddd;
				}
			
				.video,
				.photo {
					position: absolute;
					left: 30upx;
					bottom: 120upx;
					 154upx;
					height: 154upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #fff;
					cursor: pointer;
			
					image {
						 40upx;
						height: 34upx;
						color: rgba(251, 133, 57, 1);
					}
			
					.imageStyle {
						 154upx;
						height: 154upx;
					}
				}
			
				.photo {
					left: 225upx;
				}
			}
			
			.upload {
				margin-top: 46upx;
			
				.selectImg {
					 224rpx;
					height: 224rpx;
					border-radius: 20rpx;
				}
			
				.imageBox {
					.imgre {
						position: relative;
						margin-right: 14rpx;
			
						&:nth-child(3n) {
							margin-right: 0;
						}
						.play{
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%,-50%);
						}
						.del {
							position: absolute;
							color: #fff;
							right: 10rpx;
							top: 10rpx;
							 40rpx;
							height: 40rpx;
							border-radius: 50%;
							text-align: center;
							z-index: 99;
						}
					}
				}
			}
			
			.formBox {
				margin-top: 20upx;
			
				.classification {
					height: 70upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #f5f5f5;
					margin-bottom: 20upx;
					text {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(92, 92, 92, 1);
					}
			
					.selectList {
						display: flex;
						align-items: center;
						flex: 1;
						display: flex;
						justify-content: flex-end;
						.cpicker{
							 100%;
							text-align: right;
						}
						.listIpt {
							// border: 1px solid #333;
							box-sizing: border-box;
							padding-left: 20upx;
							padding-right: 20upx;
							 100%;
							font-size: 30upx;
							text-align: right;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(92, 92, 92, 1);
						}
					}
				}
			}
			
			.relesePage {
				height: 78upx;
				background: rgba(251, 133, 57, 1);
				border-radius: 8upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 78upx;
				text-align: center;
				margin-top: 61upx;
			}
			
			.isClick{
				background-color: #ccc;
			}
			.showCreator {
				background: rgba(255, 255, 255, 1);
				border-radius: 30upx;
			
				.ht {
					height: 115upx;
					border-bottom: 1px solid #f5f5f5;
					line-height: 115upx;
					text-align: center;
					color: #333;
				}
			}
		}
		
	}

	.inputCss {
		color: #999999;
		margin-bottom: 20upx;
		display: flex;
		font-size: 30upx;
		flex-wrap: nowrap;
	}
</style>

  

原文地址:https://www.cnblogs.com/daifuchao/p/13509577.html