unimall/unimall-app/pageA/product/detail_upload.vue

<template>
	<view class="container">
			<view class="detail-desc">
			   <view class="cu-bar bg-white ">
					<view class="action">
						库点照片
					</view>
			   </view>
			   <view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img" v-if="storeImg != ''" @tap="ViewImage" :data-url="storeImg">
						 <image :src="storeImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="0" >
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="storeImg == ''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
			   </view>
			   <view class="cu-bar bg-white ">
					<view class="action">
						粮食照片
					</view>
			   </view>
			   <view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img" v-if="foodsImg != ''" @tap="ViewImage" :data-url="foodsImg">
						 <image :src="foodsImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="1" >
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage2" v-if="foodsImg == ''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
			   </view>
			   <view class="cu-bar bg-white ">
					<view class="action">
						装车现场照片
					</view>
			   </view>
			   <view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img" v-if="carImg != ''" @tap="ViewImage" :data-url="carImg">
						 <image :src="carImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg"  :data-index="2">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage3" v-if="carImg == ''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
		</view>
		<view class="page-bottom">
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="finish">确认上传</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data(){
			return{
				userId:'',
				storeImg:'',
				foodsImg:'',
				carImg:'',
				id:''
			};
		},
		onLoad(tmp){
			this.id = tmp.id
			this.loadData()
		},
		onPullDownRefresh() {
			this.loadData()
		},
		methods: {
			loadData(){
				
			},			
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'storeImg/',
							result => {
								this.storeImg = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			ChooseImage2() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'foodsImg/',
							result => {
								this.foodsImg = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			ChooseImage3() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'carImg/',
							result => {
								this.carImg = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current:0,
					urls: img
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							if(e.currentTarget.dataset.index == 0){
								this.storeImg = "";
							}
							else if(e.currentTarget.dataset.index == 1){
								this.foodsImg = "";
							}
							else if(e.currentTarget.dataset.index == 2){
								this.carImg = "";
							}
						}
					}
				})
			},
			finish(){
				const that = this
				if(!that.storeImg){
					this.$api.msg('请上传库点照片');
					return;
				}
				if(!that.foodsImg){
					this.$api.msg('请上传粮食照片');
					return;
				}
				if(!that.carImg){
					this.$api.msg('请上传装车现场照片');
					return;
				}
				uni.showLoading({
					title: '正在提交',
					mask:true
				})
				that.$api.request('sale', 'addImg', {
					id:that.id,
					storeImg:that.storeImg,
					foodsImg:that.foodsImg,
					carImg:that.carImg,
					
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {		
					that.$api.msg('上传成功')
					setTimeout(()=>{uni.navigateBack({})},1000);	
					uni.hideLoading()
				})
			},
		
		},
	}
</script>

<style>
</style>