zhywpt-sp/components/form-image/form-image.vue

<template>
	<view>
		<view class="as-gravity-center" style="
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
      " :style="
        'justify-content:' +
        (imageList.length === 0 ? 'flex-start' : 'space-between')
      ">
			<!-- 嵌套这层就over了  -->
			<view :style="
          'margin-left: ' +
          (retract + 10) +
          'rpx;margin-right: ' +
          retract +
          'rpx'
        " style="
          justify-content: flex-start;
          align-items: center;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        ">
				<block v-for="(image, indexs) in imageList" :key="indexs">
					<view :style="
              'width:' + innerWidth + 'px;' + 'height:' + innerWidth + 'px'
            " style="
              display: block;
              margin-left: 5px;
              margin-top: 5px;
              opacity: 0.7;
            ">
						<view class="as-gravity-center" @tap="previewImage(indexs, imageList)" :style="
                'width:' +
                (isDelete ? innerWidth / 2 : innerWidth / 2) +
                'px;' +
                'height:' +
                innerWidth +
                'px'
              " style="position: absolute; z-index: 3; opacity: 1">
							<image v-show="isDelete" :src="`${$imgUrl}common/big.png`"
								style="width: 40rpx; height: 40rpx" mode="aspectFill">
							</image>
						</view>
						<view v-show="isDelete" class="as-gravity-center" @tap="removeImg(indexs, imageList)" :style="
                'width:' +
                innerWidth / 2 +
                'px;' +
                'height:' +
                innerWidth +
                'px;' +
                'margin-left: ' +
                innerWidth / 2 +
                'px;'
              " style="position: absolute; z-index: 3; opacity: 1">
							<image :src="`${$imgUrl}common/remove.png`" style="width: 40rpx; height: 40rpx"
								mode="aspectFill">
							</image>
						</view>

						<view :style="
                'width:' + innerWidth + 'px;' + 'height:' + innerWidth + 'px'
              " style="
                position: absolute;
                z-index: 2;
                background-color: #b2b2b2;
                opacity: 0.5;
              "></view>
						<image :style="
                'width:' + innerWidth + 'px;' + 'height:' + innerWidth + 'px'
              " class="as-radius-8px" style="position: relative; display: block" :src="isUrl ? urls + image : image"
							:data-src="isUrl ? urls + image : image" mode="aspectFill">
						</image>
					</view>
				</block>

				<view v-if="canChoose" class="layout4 as-gravity-center" @tap="chooseImage(item)"
					:style="'width:' + innerWidth + 'px;height:' + innerWidth + 'px'" style="
            display: flex;
            flex-direction: column;
            margin-top: 8px;
            margin-left: 5px;
          ">
					<image mode="aspectFill" :src="`${$imgUrl}common/photo.png`" style="height: 56rpx; width: 56rpx">
					</image>
					<view v-if="showTxt" class="text8" style="margin-top: 8px">上传图片</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64
	} from "@/utils/util/imageTool.js";
	import {
		request
	} from "@/utils/network/request";
	import {
		envs,
		fileUpload
	} from "@/utils/network/api";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	export default {
		name: "form-image",
		props: {
			showImageList: {
				/* 图片数组*/
				type: Array,
				default: function() {
					return [];
				},
			},
			imgWidth: {
				/*获取屏幕宽度*/
				type: Number,
				default: 0,
				required: false,
			},
			retract: {
				/*缩进*/
				type: Number,
				default: 0,
			},
			isChoose: {
				/*是否选择图片*/
				type: Boolean,
				default: true,
			},
			isDelete: {
				/* 是否具备删除*/
				type: Boolean,
				default: true,
			},
			isUrl: {
				/* 是否拼接图片地址*/
				type: Boolean,
				default: false,
			},
			count: {
				/* 图片上传数量*/
				type: Number,
				default: 9,
			},
			showTxt: {
				/* 是否显示上传图片文字*/
				type: Boolean,
				default: true,
			},
		},
		created() {
			let {
				showImageList
			} = this;
			if (showImageList.length > 0) {
				this.imageList = showImageList;
			}
			let _this = this;

			//console.log('输出内容', this.imgWidth)
			if (isNaN(this.imgWidth) || this.imgWidth === 0) {
				//判断是否不是数字
				uni.getSystemInfo({
					success: function(res) {
						_this.innerWidth = res.windowWidth / 4 - 18;
					},
				});
			} else {
				_this.innerWidth = this.imgWidth - 18;
			}
		},
		mounted() {
			//当视图运行完后执行
		},
		data() {
			return {
				sourceTypeIndex: 2,
				innerWidth: 0,
				imageList: [],
				item: {},
				urls: "",
				update: true,
				canChoose: this.isChoose,
			};
		},
		watch: {
			//计算属性
			imageList(val) {
				//console.log('图片数据改变了', this.imageList.length);
			},
		},
		methods: {
			strReplace(str) {
				let imgUrl = str.replace("http://192.168.101.145:9000", envs[process.env.NODE_ENV].baseUrl);
				imgUrl = imgUrl.replace("http://100.64.2.113:9000", envs[process.env.NODE_ENV].baseUrl);
				console.log(imgUrl)
				return imgUrl;
			},
			previewImage(e, item) {
				//放大图片
				// var current = this.isUrl ? this.urls + item[e] : item[e]
				if (this.isUrl) {
					for (var i = 0; i < item.length; i++) {
						if (item[i].indexOf("http") == -1) {
							item[i] = this.urls + item[i];
						}
					}
				}
				var current = item[e];
				console.log("输出内容", current);
				uni.previewImage({
					current: current,
					urls: item,
				});
			},
			removeImg(e, item) {
				//删除图片
				this.$emit("removeImg", item, e);
				item.splice(e, 1);
				this.canChoose = this.imageList.length === this.count ? false : true;
			},
			chooseImage: function(item) {
				//选择相机或相册时
				let _this = this;
				if (_this.imageList === undefined) {
					_this.imageList = [];
				}
				if (_this.imageList.length === this.count) {
					uni.showToast({
						icon: "none",
						title: "最多只能选择" + _this.count + "张图片",
					});
					return;
				}
				/* 图片选择 */
				uni.chooseImage({
					count: _this.count,
					success: (res) => {
						//选择成功
						// _this.imageList = _this.imageList.concat(res.tempFilePaths);
						const tempFilePaths = res.tempFilePaths;
						const imgUrl = "";
						//_this.$emit('backImg', _this.imageList) //测试环境下(正式环境请切换至接口返回地址)
						this.canChoose = _this.imageList.length === this.count ? false : true;
						for (var i = 0; i < tempFilePaths.length; i++) {
							pathToBase64(tempFilePaths[i])
								.then((path) => {
									var data = {
										fileBase64: path
									};
									const options = {
										type: 2,
										data: data,
										method: "POST",
										showLoading: true,
									};
									request(fileUpload, options).then((res) => {
										const data = stringToJson(res.bizContent);
										_this.imageList.push(data.data.url);
										for (var k = 0; k < _this.imageList.length; k++) {
											_this.imageList[k] = this.strReplace(_this
												.imageList[k])
										}
										_this.$emit("backImg", _this
											.imageList); //测试环境下(正式环境请切换至接口返回地址)
										console.log(" _this.imageList", _this.imageList)
									});
								})
								.catch((error) => {
									console.log(error)
								});

							/* 图片上传 */
							// uni.uploadFile({
							// 	url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
							// 	filePath: tempFilePaths[i],
							// 	name: 'file',
							// 	header: {
							// 		'X-Access-Token': uni.getStorageSync('token')
							// 	},
							// 	formData: {
							// 		biz: 'app'
							// 	},
							// 	success: (uploadFileRes) => {
							// 		let imgData = JSON.parse(uploadFileRes.data)
							// 		/* 数据拼接 */
							// 		if (imgUrl === undefined || imgUrl === '') {
							// 			imgUrl = imgData.message
							// 		} else {
							// 			imgUrl += ',' + imgData.message
							// 		}
							// 		_this.$emit('backImg', _this.imageList) //正式环境下
							// 	},
							// 	fail: (res) => {
							// 		console.log(res);
							// 	}
							// });
						}
					},
					fail: (err) => {
						if (err.errMsg.indexOf("cancel") !== "-1") {
							return;
						}
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting["scope.camera"];
										break;
									case 1:
										authStatus = res.authSetting["scope.album"];
										break;
									case 2:
										authStatus =
											res.authSetting["scope.album"] &&
											res.authSetting["scope.camera"];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: "授权失败",
										content: "需要从您的相机或相册获取图片，请在设置界面打开相关权限",
										success: (res) => {
											if (res.confirm) {
												uni.openSetting();
											}
										},
									});
								}
							},
						});
					},
				});
			},
		},
	};
</script>

<style>
	.text8 {
		font-size: 26rpx;
		font-family: PingFang SC;
		color: #333333;
		opacity: 1;
	}

	.layout4 {
		background: #f3f3f3;
		opacity: 1;
		border-radius: 8px;
		border: 1px solid #dcdcdc;
	}
</style>