gubersail-app/pages/home/store/details.vue

<template>
	<view class="">
		<uni-section title="基本信息" style="padding: 0 62rpx;" titleColor="5F5F5F" titleFontSize="28rpx">
			<uni-forms ref="form1" :modelValue="form" :border="true">
				<uni-forms-item name="cname" label="店铺名称">
					<uni-easyinput v-model="form.cname" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入内容" :inputBorder="false">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="corpsFilesList" label="店面照片">
					<view style="display: flex;align-items: center;">
						<uni-file-picker v-model="form.corpsFilesList" return-type="array" limit="9"
							:imageStyles="imageStyles" :auto-upload="false" @select="corpsfileSelect" @delete="fileDelete"></uni-file-picker>
						<image class="photo" src="@/static/images/home/store/photo.png" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="businessLicense" label="营业执照">
					<view style="display: flex;align-items: center;">
						<uni-file-picker v-model="form.businessLicense" return-type="object" limit="1" :del-icon="false"
							disable-preview :imageStyles="imageStyles" file-mediatype="image"
							@select="businessLicenseSelect">
						</uni-file-picker>
						<image class="photo" src="@/static/images/home/store/photo.png" />
					</view>

				</uni-forms-item>
				<uni-forms-item name="contacts" label="联系人">
					<uni-easyinput v-model="form.contacts" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入内容" :inputBorder="false"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="contactsPhone" label="电话">
					<uni-easyinput v-model="form.contactsPhone" class="right-align"
						placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="address" label="所属区域">
					<uni-data-picker v-model="form.address" :localdata="addressData" popup-title="请选择所属区域"
						:map="mapObject" :inputBorder="false"></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item name="detailedAddress" label="详细地址">
					<uni-easyinput v-model="form.detailedAddress" class="right-align"
						placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</uni-section>
		<uni-section title="店面分类" style="padding: 0 62rpx;margin-top: 30rpx;" titleColor="5F5F5F" titleFontSize="28rpx">
			<uni-forms ref="form2" :modelValue="form" :border="true">
				<uni-forms-item name="corpsTypeName" label="店面分类">
					<view style="display: flex;align-items: center;height: 36px;">
						<view @click="corpsTypeShow=true" style="width: 100%;text-align: right;"
							:style="form.corpsTypeName?'color:#000;':'color:#B5B4B4;'">
							{{form.corpsTypeName||'请选择'}}
						</view>
						<uni-icons v-if="!form.corpsTypeName" type="down" size="14" color='#999999'
							@click="corpsTypeShow=true"></uni-icons>
						<uni-icons v-if="form.corpsTypeName" type="clear" size="24" color='#c0c4cc'
							@click="clear('corpsTypeName')"></uni-icons>
					</view>

					<u-picker :show="corpsTypeShow" :columns="corpsTypeList" keyName="cname" @confirm="corpsTypeConfirm"
						@cancel="corpsTypeShow=false" @close="corpsTypeShow=false" closeOnClickOverlay></u-picker>
				</uni-forms-item>
				<uni-forms-item name="storeAttributes" label="店面属性">
					<view>
						<view style="display: flex;align-items: center;height: 36px;">
							<view @click="storeAttributesShow=true" style="width: 100%;text-align: right;"
								:style="form.storeAttributes?'color:#000;':'color:#B5B4B4;'">
								{{form.storeAttributes||'请选择'}}
							</view>
							<uni-icons v-if="!form.storeAttributes" type="down" size="14" color='#999999'
								@click="storeAttributesShow=true"></uni-icons>
							<uni-icons v-if="form.storeAttributes" type="clear" size="24" color='#c0c4cc'
								@click="form.storeAttributes=null"></uni-icons>
						</view>
						<u-picker :show="storeAttributesShow" :columns="storeAttributesList" keyName="dictValue"
							@confirm="storeAttributesConfirm" @cancel="storeAttributesShow=false"
							@close="storeAttributesShow=false" closeOnClickOverlay></u-picker>
					</view>
				</uni-forms-item>
				<uni-forms-item name="chainAttribute" label="连锁属性">
					<view>
						<view style="display: flex;align-items: center;height: 36px;">
							<view @click="chainAttributeShow=true" style="width: 100%;text-align: right;"
								:style="form.chainAttribute?'color:#000;':'color:#B5B4B4;'">
								{{form.chainAttribute||'请选择'}}
							</view>
							<uni-icons v-if="!form.chainAttribute" type="down" size="14" color='#999999'
								@click="chainAttributeShow=true"></uni-icons>
							<uni-icons v-if="form.chainAttribute" type="clear" size="24" color='#c0c4cc'
								@click="form.chainAttribute=null"></uni-icons>
						</view>
						<u-picker :show="chainAttributeShow" :columns="chainAttributeList" keyName="dictValue"
							@confirm="chainAttributeConfirm" @cancel="chainAttributeShow=false"
							@close="chainAttributeShow=false" closeOnClickOverlay></u-picker>
					</view>
				</uni-forms-item>
				<uni-forms-item name="label" label="店面标签">
					<view>
						<view style="display: flex;align-items: center;height: 36px;">
							<view class="slot-box" @click="openPopup">
								<view v-for="(item,index) in sliceArray(form.label)" :key="index"
									class="slot-content-item">
									{{item}}
								</view>
								<view v-if="form.label.length > 2" class="slot-content-item">
									+{{form.label.length - 2}}</view>
								<view v-if="form.label.length == 0" style="color:#B5B4B4;">
									请选择
								</view>
							</view>
							<uni-icons v-if="!form.label.length" type="down" size="14" color='#999999'
								@click="openPopup"></uni-icons>
							<uni-icons v-if="form.label.length" type="clear" size="24" color='#c0c4cc'
								@click="form.label=[]"></uni-icons>
						</view>

						<uni-popup ref="popup" type="bottom">
							<view class="popup-content">
								<view class="popup-content-checkbox">
									<scroll-view scroll-y="true" style="height: 600rpx;" :show-scrollbar="false">
										<uni-data-checkbox mode="tag" multiple v-model="form.label"
											:localdata="labelList" @change="onChange" selectedColor='#03803B'
											:map="labelObject" />
									</scroll-view>

								</view>

								<button class="confirm-btn" @click="labelConfirm">确认</button>
							</view>
						</uni-popup>
					</view>
				</uni-forms-item>
			</uni-forms>
		</uni-section>
		<uni-section title="商务政策" style="padding: 0 62rpx;margin-top: 30rpx;" titleColor="5F5F5F" titleFontSize="28rpx">
			<uni-forms ref="form3" :modelValue="form" :border="true">
				<uni-forms-item name="signingLevel" label="签约级别">
					<!-- <uni-data-select v-model="form.signingLevel" :localdata="signingLevelList">
					</uni-data-select> -->
					<view>
						<view style="display: flex;align-items: center;height: 36px;">
							<view @click="signingLevelShow=true" style="width: 100%;text-align: right;"
								:style="form.signingLevel?'color:#000;':'color:#B5B4B4;'">
								{{form.signingLevel||'请选择'}}
							</view>
							<uni-icons v-if="!form.signingLevel" type="down" size="14" color='#999999'
								@click="signingLevelShow=true"></uni-icons>
							<uni-icons v-if="form.signingLevel" type="clear" size="24" color='#c0c4cc'
								@click="form.signingLevel=null"></uni-icons>
						</view>
						<u-picker :show="signingLevelShow" :columns="signingLevelList" keyName="dictValue"
							@confirm="signingLevelConfirm" @cancel="signingLevelShow=false"
							@close="signingLevelShow=false" closeOnClickOverlay></u-picker>
					</view>
				</uni-forms-item>
				<uni-forms-item name="signingNumber" label="签约条数">
					<uni-easyinput v-model="form.signingNumber" class="right-align"
						placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="signingPeriodEnd" label="签约期限">
					<uni-datetime-picker v-model="form.signingPeriodEnd" type="date" :clear-icon="false" :border="false"
						placeholder="请选择签约期限"></uni-datetime-picker>
				</uni-forms-item>
				<uni-forms-item name="checkStatus" label="门店状态">
					<view style="display: flex;justify-content: flex-end;align-items: center;height: 70rpx;">
						<text v-if="form.checkStatus=='录入'" style="color:#e6a23c">
							录入
						</text>
						<text v-if="form.checkStatus=='提交'" style="color:#409EFF">
							提交
						</text>
						<text v-if="form.checkStatus=='审核通过'" style="color:#67c23a">
							审核通过
						</text>
						<text v-if="form.checkStatus=='审核驳回'" style="color:#f56c6c">
							审核驳回
						</text>
					</view>
				</uni-forms-item>
			</uni-forms>
		</uni-section>
		<view style="height: 200rpx;display: flex;align-items: center;justify-content: center;">
			<button v-if="!form.id||form.checkStatus=='审核通过'"
				style="color:#ffffff;backgroundColor:#03803B;width: 400rpx;" @click="submit">保存</button>
			<view v-if="form.checkStatus=='录入'||form.checkStatus=='审核驳回'" style="display: flex;">
				<button
					style="color:#ffffff;backgroundColor:#03803B;width: 200rpx;border-top-right-radius:0rpx;border-bottom-right-radius:0rpx"
					@click="submit">保存</button>
				<button type="warn"
					style="color:#ffffff;width: 200rpx;border-top-left-radius:0rpx;border-bottom-left-radius:0rpx"
					@click="approval">审批</button>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/http/api.js'
	import {
		clientId,
		clientSecret
	} from '@/common/setting'
	import {
		submit,
		getDetail,
		review,
		selectType,
		selectLabel,
		fileRemove
	} from '@/api/home/store.js'
	export default {
		data() {
			return {
				corpsTypeShow: false,
				storeAttributesShow: false,
				chainAttributeShow: false,
				signingLevelShow: false,
				form: {
					corpsTypeId: null,
					corpsTypeName: null,
					storeAttributes: null,
					chainAttribute: null,
					signingLevel: null,
					label: [],
					corpsFilesList: [],
					businessLicense: {}
				},
				imageStyles: {
					width: 46,
					height: 46
				},
				mapObject: {
					text: 'name',
					value: 'code',
					children: 'children'
				},
				labelObject: {
					text: 'label',
					value: 'label',
				},
				addressData: [],
				labelList: [],
				corpsTypeList: [],
				storeAttributesList: [],
				chainAttributeList: [],
				signingLevelList: []
			}
		},
		onLoad(option) {
			this.addressData = JSON.parse(uni.getStorageSync("addressData"))
			this.getSelectType()
			this.getLabel()
			this.getDictionary()
			if (option && option.id) {
				this.getDetail(option.id)
			}
		},
		methods: {
			openPopup() {
				this.$refs.popup.open()
			},
			onChange(e) {
				console.log('当前选中:', e.detail.value)
			},
			labelConfirm() {
				this.$refs.popup.close()
				// 提交选中值逻辑...
			},
			clear(name) {
				if (name == 'corpsTypeName') {
					this.form.corpsTypeId = null
					this.form.corpsTypeName = null
				}
			},
			corpsTypeConfirm(row) {
				this.form.corpsTypeId = row.value[0].id
				this.form.corpsTypeName = row.value[0].cname
				this.corpsTypeShow = false
			},
			storeAttributesConfirm(row) {
				this.form.storeAttributes = row.value[0].dictValue
				this.storeAttributesShow = false
			},
			chainAttributeConfirm(row) {
				this.form.chainAttribute = row.value[0].dictValue
				this.chainAttributeShow = false
			},
			signingLevelConfirm(row) {
				this.form.signingLevel = row.value[0].dictValue
				this.signingLevelShow = false
			},
			getDictionary() {
				this.$u.api.dictionary('storeAttributes').then(res => {
					this.storeAttributesList = [res.data]
				})
				this.$u.api.dictionary('chainAttribute').then(res => {
					this.chainAttributeList = [res.data]
				})
				this.$u.api.dictionary('signingLevel').then(res => {
					this.signingLevelList = [res.data]
				})
			},
			sliceArray(ls) {
				if (Array.isArray(ls)) {
					return ls.slice(0, 2)
				}
				return ls
			},
			getSelectType() {
				selectType().then(res => {
					this.corpsTypeList = [res.data]
				})
			},
			getLabel() {
				selectLabel().then(res => {
					this.labelList = res.data
				})
			},
			getFileExtension(filename) {
				return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
			},
			businessLicenseSelect(files) {
				files.tempFiles.forEach(file => {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					uni.uploadFile({
						url: http.config.baseURL +
							'/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
						filePath: file.path,
						header: {
							// 客户端认证参数
							'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
							'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
						},
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data).data
							this.form.businessLicense = {
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName)
							}
							this.form.businessLicenseUrl = data.link
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				})
			},
			fileDelete(row) {
				if (row.tempFile.id) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					fileRemove(row.tempFile.id).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						this.form.corpsFilesList = this.removeByIdFilter(this.form.corpsFilesList, row
							.tempFile.id);
					}).finally(() => {
						uni.hideLoading()
					});
				}
			},
			removeByIdFilter(arr, id) {
				return arr.filter(item => item.id !== id);
			},
			corpsfileSelect(files) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				files.tempFiles.forEach(file => {
					uni.uploadFile({
						url: http.config.baseURL +
							'/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
						filePath: file.path,
						header: {
							// 客户端认证参数
							'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
							'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
						},
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data).data
							this.form.corpsFilesList.push({
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName)
							})
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				})
			},
			async submit() {
				if (!this.form.cname) {
					uni.showToast({
						title: '请输入店铺名称',
						icon: 'none'
					});
					return
				}
				if (this.form.corpsFilesList.length == 0) {
					uni.showToast({
						title: '请上传店面照片',
						icon: 'none'
					});
					return
				}
				if (!this.form.corpsTypeId) {
					uni.showToast({
						title: '请选择店面分类',
						icon: 'none'
					});
					return
				}
				if (!this.form.contacts) {
					uni.showToast({
						title: '联系人',
						icon: 'none'
					});
					return
				}
				if (!this.form.contactsPhone) {
					uni.showToast({
						title: '电话',
						icon: 'none'
					});
					return
				}
				if (!this.form.address) {
					uni.showToast({
						title: '所属区域',
						icon: 'none'
					});
					return
				}
				if (!this.form.detailedAddress) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
					return
				}
				let obj = await this.convertData(this.$deepClone(this.form))
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				submit(obj).then(res => {
						setTimeout(() => {
							uni.showToast({
								title: '保存成功',
								icon: 'none',
							});
						}, 10);
						this.getDetail(res.data.id)
					})
					.finally(() => {
						uni.hideLoading()
					});
			},
			getDetail(id) {
				let obj = {
					id: id
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getDetail(obj).then(res => {
						if (res.data.corpsFilesList.length) {
							res.data.corpsFilesList.forEach(item => {
								item.name = item.fileName
							})
						}
						if (res.data.businessLicense) {
							res.data.businessLicense = JSON.parse(res.data.businessLicense)
						}
						if (res.data.label) {
							res.data.label = res.data.label?res.data.label.split(","):[]
						}
						this.form = res.data
					})
					.finally(() => {
						uni.hideLoading()
					});
			},
			async approval() {
				let obj = await this.convertData(this.$deepClone(this.form))
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否通过审批？',
					confirmText: '通过',
					cancelText: '驳回',
					success: function(res) {
						if (res.confirm) {
							obj.type = 1
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							review(obj).then(res => {
									uni.showToast({
										title: '操作成功',
										icon: 'none',
										duration: 2000
									});
									_this.getDetail(res.data.id)
								})
								.finally(() => {
									uni.hideLoading()
								});
						} else if (res.cancel) {
							obj.type = 2
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							review(obj).then(res => {
									uni.showToast({
										title: '操作成功',
										icon: 'none',
										duration: 2000
									});
									_this.getDetail(res.data.id)
								})
								.finally(() => {
									uni.hideLoading()
								});
						}
					}
				});
			},
			async convertData(obj) {
				if (obj.corpsFilesList.length) {
					obj.corpsFilesList.forEach((item, index) => {
						if (index == 0) {
							item.mainImage = 1
						}
						item.fileName = item.name
					})
				}
				if (obj.businessLicense) {
					obj.businessLicense = JSON.stringify(obj.businessLicense)
				}
				
				obj.label = obj.label?obj.label.join(","):null
				if (obj.signingPeriodEnd) {
					obj.signingPeriodEnd = obj.signingPeriodEnd.slice(0, 10) + ' 00:00:00'
				}
				return obj
			}

		}
	}
</script>

<style lang="scss" scoped>
	.right-align {
		text-align: right;
	}

	.photo {
		margin-left: 20rpx;
		width: 38rpx;
		height: 32rpx;
	}

	::v-deep .uni-section .uni-section-header {
		font-weight: bold !important;
		padding: 12px 0px !important;
		border-bottom: 2px solid #F6F6F6;
	}

	::v-deep .uni-file-picker__container {
		justify-content: flex-end !important;
	}

	.slot-content-item {
		border-radius: 13rpx;
		border: 2rpx solid #03803B;
		padding: 1rpx 5rpx;
		color: #03803B;
	}

	.slot-content-item-placeholder {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		height: 38rpx !important;
		color: #B5B4B4 !important;
	}

	.slot-box {
		gap: 5px;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		width: 100%;
	}

	.popup-content {
		background: #fff;
		padding: 40rpx 20rpx;
		border-radius: 24rpx 24rpx 0 0;
	}

	.popup-content-checkbox {
		height: 600rpx;
	}

	.confirm-btn {
		margin-top: 30rpx;
		color: #ffffff;
		background: #03803B;
		width: 400rpx;

	}
</style>