wanjiashangchao-shop/pages/md/shopQualification/shopQualification.vue

<template>
	<view class="warp">
		<view class="list" v-if="index==1">
			<view class="item" v-for="(item,index) in images" :key="index" @click.stop="picClick(images,index)">
				<image mode="aspectFill" :src="item"></image>
				<view class="" @tap.stop="del(item,index,'images')">
					<image class="delimg" :src='STATIC_URL+"delpic.png"'></image>
				</view>
			</view>
			<view class="item" v-if="images.length < 15">
				<image @tap="handleUploadImage('images')" :src='STATIC_URL+"32.png"'></image>
			</view>
		</view>

		<view class="list" v-if="index==2">
			<view class="item" v-for="(item,index) in store_images" :key="index"
				@click.stop="picClick(store_images,index)">
				<image mode="aspectFill" :src="item"></image>
				<view class="" @tap.stop="del(item,index,'store_images')">
					<image class="delimg" :src='STATIC_URL+"delpic.png"'></image>
				</view>
			</view>
			<view class="item" v-if="store_images.length < 20">
				<image @tap="handleUploadImage('store_images')" :src='STATIC_URL+"32.png"'></image>
			</view>
		</view>

		<view class="shop-pic">
			<view class="background-image sure" @tap="sure"> 保存</view>
		</view>




	</view>
</template>
<script>
	import {
		UploadImage
	} from '@/common/utils/index'
	export default {
		data() {
			return {
				images_ids: '',
				images: [],
				index: '',
				background_image: '',
				store_images: '',
				count: 5
			}
		},
		onLoad(options) {
			this.index = options.index;
			if (options.index == 1) {
				uni.setNavigationBarTitle({
					title: "店铺环境"
				});
			} else {
				uni.setNavigationBarTitle({
					title: "店铺资质"
				});
			}
			this.getStore()
		},
		onShow() {
			
		},
		methods: {
			//获取店铺信息
			getStore() {
				this.$api.post(global.apiUrls.postGetShopInfo)
					.then(res => {
						if (res.data.code == 1) {
							this.images = res.data.data.show_images;
							console.log(this.images)
							this.store_images = res.data.data.license_image.split(',');
						}
						console.log(res.data)
					})
			},
			del(item, index, type) {
				this[type].splice(index, 1)
			},
			picClick(item, index) {
				console.log(item)
				uni.previewImage({
					urls: item,
					current: index
				});
			},
			// 上传图片
			handleUploadImage(imgtype) {
				let that = this;
				uni.chooseImage({
					count: 1, // 默认3
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// 开始上传
						new UploadImage(res.tempFiles, {
							complete: function(res) {
								console.log(res);
								// 上传成功 返回数据格式为数组 [ { id: '', path: '' } ]
								that[imgtype].push(res[0].path);
							}
						});
					}
				});
			},
			sure() {
				let that = this;
				console.log(this.images)
				// let character = (this.images.map((item, index) => (`${item.id}`)).filter(item => item != '')).join(',');
				// let store_images = (this.store_images.map((item, index) => (`${item.id}`)).filter(item => item != ''))
				// 	.join(',');
				let character = this.images.join(',')
				let store_images = this.store_images.join(',')
				console.log(character)
				that.$api.post(global.apiUrls.Get64868bb21965a, {
					show_images: character,
					license_image: store_images
				}).then(res => {
					that.$message.info(res.data.msg)
				})
			},
			handleUpload() {
				let self = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						console.log(res.tempFilePaths)
						const tempFilePaths = res.tempFilePaths;
						new UploadImage(tempFilePaths, {
							complete: function(res) {
								console.log(res);
								self.background_image = res[0].path
							}
						})
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;

		.list {
			width: 670rpx;
			margin: 0 40rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			.item {
				margin-top: 30rpx;
				position: relative;

				view {
					width: 64rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					border-radius: 0 0 0 16rpx;
					background: #000000;
					.iconfont {
						font-size: 20rpx;
						color: #fff;
					}
				}
			}

			image {
				width: 320rpx;
				height: 240rpx;
				border-radius: 8rpx;
			}

			.delimg {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.shop-pic {
			width: 702rpx;
			height: 400rpx;
			margin: 0 auto;

			image {
				width: 702rpx;
				height: 400rpx;
			}

			.background-image {
				width: 686rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: #fff;
				position: fixed;
				bottom: 64rpx;
				left: 32rpx;
				background: #FF9300;
				border-radius: 100rpx;
			}

			.sure {
				bottom: 184rpx;
			}
		}
	}
</style>