LocalLivingServicesUniapp/pages/store/businessQua.vue

<template>
	<view class="page">
		<view class="top" style="90rpx">
			<cu-custom bgColor="bg-fff" :isBack="true">
				<block slot="content"> 经营资质</block>
			</cu-custom>
		</view>
		<view class="" style="height:140rpx;margin-bottom: 20rpx;">
			<status v-if="form && form.specialStatus !== null" :status="form.specialStatus"
				:updateTime="form.specialUpdateTime" :remark="form.specialRemark"></status>
		</view>


		<view class="tab-top">
			<view class="content " style="margin-bottom: 16rpx;">
				<text class="text-bold">分类选择</text>
				<i class="text-bg "></i>
			</view>
			<view class="picker" @click="showPicker">
				<span style="width: 104rpx;color: #232832;">分类</span>
				<view class="right">
					<span style="color: #333333;" v-if="showText">{{ showText}}</span>
					<span v-else>请选择</span>
					<u-icon name="arrow-right"></u-icon>
				</view>

			</view>

			<!-- <form>
				<view class="borderRadiu">
					<view class=" cu-form-group margin-top1 justify-between">
						<view class="content ">
							<text class="text-bold">特殊行业经营许可证</text>
							<i class="text-bg "></i>
						</view>
					</view>
					<view class="customize">
						<view class="business-img flex align-center">
							<image :src="specialImg ? specialImg : '/static/store/xukezheng.png'" mode="" @click="businessChange()">
							</image>
						</view>
					</view>
				</view>
			</form> -->
		</view>
		<view class="center">
			<view class="fath" v-for="item in qualificationNameMap" :key="item.categoryId" style="margin-top: 10px">
				<!-- <span style="font-weight: 600"> {{ item.categoryName }} <br /></span> -->
				<view class="sun_box">
					<view class="sun" v-for="(row, index) in item.qualificationNameCategoryDTOS" :key="index">
						<!-- <a-upload v-model:file-list="row.imgList" list-type="picture-card" class="avatar-uploader"
							:headers="headers" :action="url" :before-upload="beforeUpload" @change="uploadCertificate"
							@remove="removeImage(4)">
							<view v-if="row.imgList.length < 1">
								<upload-outlined />
								<view style="margin-top: 8px">上传附件</view>
							</view>
						</a-upload> -->
						<view class="borderRadiu">
							<view class=" cu-form-group margin-top1 justify-between">
								<view class="content ">
									<text class="text-bold">{{ row.qualificationName }}</text>
									<i class="text-bg "></i>
								</view>
							</view>
							<view class="customize">
								<view class="business-img flex align-center">
									<image :src="row.special ? row.special : '/static/store/xukezheng.png'" mode=""
										@click="businessChange(row)">
									</image>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>


		<view class="padding flex " v-if="this.form.specialStatus !== 0">
			<button class="cu-btn round line-gray  shadow" @click="$Router.push({ name: 'settings' })">取消</button>
			<button style="margin-left: 12upx;width:77%" class="cu-btn bg-blue round " @click="sumbit">提交审核</button>
		</view>
		<ba-tree-picker ref="treePicker" :multiple='true' @select-change="selectChange" title="选择分类" :localdata="treeData"
			valueKey="key" textKey="title" childrenKey="children" />
	</view>
</template>
<script>
	import configService from '../../common/service/config.service'
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	import {
		USER_INFO
	} from "@/common/util/constants"
	import status from "./components/status.vue"
	export default {

		data() {
			return {
				specialImg: '',
				form: {},
				treeData: [],
				isSelectType: false,
				treeLeft: [], //一级列表
				showText: '',
				classifyList: [],
				qualificationNameMap: []
			}
		},
		components: {
			status,
			baTreePicker
		},
		async onLoad(data) {
			if (data.params) {
				let obj = JSON.parse(decodeURIComponent(data.params));
				this.form = obj
				this.qualificationNameMap = this.form.qualificationNameListDTOS;
				this.qualificationNameMap.forEach((item) => {
					this.showText += item.categoryName + ' / '
					item.qualificationNameCategoryDTOS?.forEach((row) => {
						// row.special = '';
						row.imgList = [];
						row.imgList.push({
							url: row.special,
						});
					});
				});
				// this.specialImg = obj.special
			}
		},
		methods: {
			getTree() {
				this.$http.get('/sys/category/loadTreeRoot?pcode=' + 'c09' + '&async=' + false).then(res => {
					this.treeData = res.data.result
					console.log(this.treeData)
				})
			},
			showPicker() {
				if (this.form.specialStatus == 0) {
					uni.showToast({
						icon: 'none',
						title: '待审核状态不能修改'
					})
				} else {
					this.$refs.treePicker._show();
				}

			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				console.log(ids, names)
				this.classifyList = ids
				this.showText = names
				this.selectClassify()
			},
			selectClassify() {
				let categoryIds = this.classifyList.join(',')
				let merchantId = uni.getStorageSync(USER_INFO).merchantId
				let categoryNames = this.showText
				this.$http.get('/localQualificationClassifica/localQualificationClassifica/getByCategoryId?categoryIds=' +
					categoryIds + '&merchantId=' + merchantId + '&categoryNames=' + categoryNames).then(res => {
					this.qualificationNameMap = res.data.result
					this.qualificationNameMap.forEach((item) => {
						item.qualificationNameCategoryDTOS?.forEach((row) => {
							row.special = row.special ? row.special : '';
							row.imgList = [];
						});
					});
				})
			},


			async businessChange(row) {
				if (this.form.specialStatus == 0) {
					uni.showToast({
						icon: 'none',
						title: '待审核状态不能修改'
					})
				} else {


					let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed']
					});
					let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
					if (!size) {
						this.$refs.uToast.show({
							title: '上传图片大小不能超过 5MB!',
							type: 'error',
						})
						return false
					}

					if (chooseImageRes) {
						// this.specialImg = chooseImageRes.tempFilePaths[0];
						uni.uploadFile({
							url: configService.apiUrl + '/sys/common/upload',
							filePath: chooseImageRes.tempFilePaths[0],
							name: "file",
							formData: {
								'biz': 'temp',
							},
							success: (files) => {
								let data = JSON.parse(files.data);
								if (data.success) {
									// this.specialImg = configService.apiUrl + '/' + data.message
									row.special = configService.apiUrl + '/' + data.message

								}
							}
						});
					}
				}
			},
			sumbit() {
				let hasEmptyImage = false;
				this.qualificationNameMap.forEach((item) => {
					item.qualificationNameCategoryDTOS?.forEach((row) => {
						console.log(row);
						// if (row.imgList[0]?.response) {
						//   row.special = import.meta.env.VITE_GLOB_DOMAIN_URL + '/' + row.imgList[0].response.message;
						// }

						// 检查图片是否为空
						if (!row.special) {
							hasEmptyImage = true;
						}
					});
				});
				let data = {
					merchantId: uni.getStorageSync(USER_INFO).merchantId,
					merchantUserId: this.form.merchantUserId,
					merchantUserName: this.form.merchantUserName,
					// special: this.specialImage[0].url,
					qualificationNameListDTOS: this.qualificationNameMap,
					source: 1,
				};
				console.log(data);

				if (hasEmptyImage) {
					// message.error('请上传全部图片');
					uni.showToast({
						icon: 'none',
						message: '请上传全部图片'
					})
				} else {
					if (this.form.specialStatus == null) {
						this.$http.post('/merchant/localMerchantSpecial/add', data).then(res => {
							if (res.data.success) {
								this.$tip.success(res.data.result || '成功')
								uni.navigateBack({
									delta: 1 // 返回的页面数，默认为1
								})
							} else {
								this.$tip.error(res.data.message);
							}
						})
					} else {
						this.$http.post('/merchant/localMerchantSpecial/edit', {
							...data,
							id: this.form.specialId
						}).then(res => {
							if (res.data.success) {
								this.$tip.success(res.data.result || '成功')
								uni.navigateBack({
									delta: 1 // 返回的页面数，默认为1
								})
							} else {
								this.$tip.error(res.data.message);
							}
						})
					}
					// this.$http.post('/merchant/examine/new/special/check', data).then((res) => {
					// 	// this.getDetail();
					// });
				}

				// let data = {
				// 	merchantId: uni.getStorageSync(USER_INFO).merchantId,
				// 	special: this.specialImg,
				// }



			}
		},
		mounted() {
			// this.getLeftTree()
			this.getTree()
		}
	}
</script>
<style scoped lang="scss">
	page {
		background: #F8F8FA;
	}

	.page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;

	}

	.tab-top {
		width: 95%;
		padding: 20rpx 16rpx;
		background-color: #fff;
		margin: 0rpx auto;
	}


	.borderRadiu {
		background-color: #fff;
		border-radius: 16rpx;

		.customize {
			padding: 0 18upx 18upx;
		}

		.title {
			font-size: 30upx;
			// padding: 10px;
		}


		.business-img {
			height: 218upx;
			width: 360upx;
			padding: 16upx;
			// padding-bottom: 16upx;
			background: url('/static/login/yingye2.png');
			margin: 16upx auto;
			background-size: cover;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.business-prompt {
			padding-top: 16upx;
			font-size: 20upx;
			color: #999999;
		}
	}

	.booder-top {
		border-bottom: 1px solid rgb(238, 238, 238);
		padding-bottom: 7px;
	}

	.sub-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #FFFFFF;
		border-top: 1px solid #EEEEEE;
	}

	.picker {
		height: 74rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #999999;
		border-bottom: 1px solid #EEEEEE;

		.right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.popup {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: flex-end;

		z-index: 99;

		.model {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 0rpx 24rpx;
			padding-bottom: 20rpx;

			.title {
				width: 100%;
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #EEEEEE;
				position: relative;

				image {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 0px;
				}
			}

			.tree {
				display: flex;
				height: 546rpx;

				.left {
					overflow-y: auto;

					.item {
						width: 224rpx;
						height: 78rpx;
						padding: 20rpx;
						font-size: 26rpx;
					}

					.active {
						background: rgba(68, 154, 255, 0.1);
						color: #2983EC;
					}
				}

				.border {
					border-left: 1px solid #eeeeee;
					border-right: 1px solid #eeeeee;
				}
			}

			.sub {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;
				border-top: 1px solid #eeeeee;
				padding-top: 16rpx;

				.submit {
					width: 672rpx;
					height: 76rpx;
					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
					border-radius: 53rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.center {
		flex: 1;
		overflow-y: auto;
		padding: 0 24rpx;

		.fath {
			width: 100%;
			// height: 100px;
		}
	}

	::v-deep .uni-flex-item {
		flex: 1;
		display: flex;
		align-items: center;
	}
</style>