gubersail-shop-app/pages/me/myInfo.vue

<template>
	<view class="">
		<uni-section title="基本信息" style="padding: 0 62rpx;" titleColor="5F5F5F" titleFontSize="28rpx">
			<uni-forms ref="form1" :modelValue="form" :border="true" label-width="80">
				<uni-forms-item name="cname" label="店铺名称" required>
					<uni-easyinput v-model="form.cname" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入内容" :inputBorder="false" :clearable="false" >
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="tel" label="电话" required>
					<uni-easyinput v-model="form.tel" class="right-align" type="number"
						placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"
						:clearable="false" :disabled="true" maxlength="11"
						@change="photoChange"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="salesmanName" label="业务员" required>
					<view style="display: flex;align-items: center;height: 36px;">
						<view @click="getSalerList();salesmanShow=true"
							style="width: 100%;text-align: right;"
							:style="form.salesmanName?'color:#000;':'color:#B5B4B4;font-size: 24rpx;'">
							{{form.salesmanName||'请选择'}}
						</view>
						<uni-icons v-if="!form.salesmanName" type="down" size="14" color='#BCBCBC'
							@click="getSalerList();salesmanShow=true"></uni-icons>
					</view>
					<u-picker :show="salesmanShow" :columns="salesmanList" keyName="name" @confirm="salesmanConfirm"
						@cancel="salesmanShow=false" @close="salesmanShow=false" closeOnClickOverlay></u-picker>
				</uni-forms-item>
<!--				<uni-forms-item name="deliveryWarehouseName" label="发货仓库" required>
					<view style="display: flex;align-items: center;height: 36px;">
						<view @click="getStorageList();deliveryWarehouseShow=true"
							style="width: 100%;text-align: right;"
							:style="form.deliveryWarehouseName?'color:#000;':'color:#B5B4B4;font-size: 24rpx;'">
							{{form.deliveryWarehouseName||'请选择'}}
						</view>
						<uni-icons v-if="!form.deliveryWarehouseName" type="down" size="14" color='#BCBCBC'
							@click="getStorageList();deliveryWarehouseShow=true"></uni-icons>
					</view>
					<u-picker :show="deliveryWarehouseShow" :columns="deliveryWarehouseList" keyName="cname"
						@confirm="deliveryWarehouseConfirm" @cancel="deliveryWarehouseShow=false"
						@close="deliveryWarehouseShow=false" closeOnClickOverlay></u-picker>
				</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" label-width="80">
				<uni-forms-item name="corpsTypeName" label="店面分类" required>
					<view style="display: flex;align-items: center;height: 36px;">
						<view @click="getSelectType();corpsTypeShow=true"
							style="width: 100%;text-align: right;"
							:style="form.corpsTypeName?'color:#000;':'color:#B5B4B4;font-size: 24rpx;'">
							{{form.corpsTypeName||'请选择'}}
						</view>
						<uni-icons v-if="!form.corpsTypeName" type="down" size="14" color='#BCBCBC'
							@click="getSelectType();corpsTypeShow=true"></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="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;font-size: 24rpx;">
									请选择
								</view>
							</view>
							<uni-icons v-if="!form.label.length" type="down" size="14" color='#BCBCBC'
								@click="openPopup"></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>
								<debounce-button class="confirm-btn" @click="labelConfirm">确认</debounce-button>
							</view>
						</uni-popup>
					</view>
				</uni-forms-item>
			</uni-forms>
		</uni-section>-->
		<view style="padding:30rpx 20rpx;">
			<debounce-button bgColor="#03803B" @click="submit">修改</debounce-button>
		</view>
	</view>
</template>

<script>
	import {
		submit,
		selectType,
		selectLabel,
		salerList,
		storageList,
		getAppDetails
	} from '@/api/home/store.js'
	export default {
		data() {
			return {
				corpsTypeShow: false,
				salesmanShow: false,
				deliveryWarehouseShow: false,
				form: {
					corpsTypeId: null,
					corpsTypeName: null,
					storeAttributes: null,
					chainAttribute: null,
					signingLevel: null,
					dimension: null,
					longitude: null,
					address: null,
					detailedAddress: null,
					label: [],
					brandName: [],
				},
				labelObject: {
					text: 'label',
					value: 'label',
				},
				labelList: [],
				corpsTypeList: [],
				salesmanList: [],
				brandList: [],
				deliveryWarehouseList: [],
			}
		},
		onLoad(option) {
			this.getSelectType()
			this.getLabel()
			this.getSalerList()
			// this.getStorageList()
			this.getAppDetails()
		},
		methods: {
			photoChange(val) {
				if (val) {
					if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(val)) {
						uni.showToast({
							title: '请输入正确电话',
							icon: 'none'
						});
						return;
					}
				}
			},
			intBlur(name, value) {
				if (!this.form[name]) return
				// 使用toFixed处理小数位
				try {
					const num = parseFloat(this.form[name])
					if (!isNaN(num)) {
						this.form[name] = Math.floor(num).toFixed(0)
					}
				} catch (e) {
					console.error('格式化错误', e)
				}
			},
			openPopup() {
				this.getLabel()
				this.$refs.popup.open()
			},
			onChange(e) {
				console.log('当前选中:', e.detail.value)
			},
			brandChange(e) {
				console.log('当前选中:', e.detail)
				let ids = []
				e.detail.data.forEach(item => {
					ids.push(item.id)
				})
				this.form.brandId = ids.join(',')
			},
			labelConfirm() {
				this.$refs.popup.close()
				// 提交选中值逻辑...
			},
			brandConfirm() {
				this.$refs.brand.close()
				// 提交选中值逻辑...
			},
			clear(name) {
				if (name == 'corpsTypeName') {
					this.form.corpsTypeId = null
					this.form.corpsTypeName = null
				}
				if (name == 'salesmanName') {
					this.form.salesmanId = null
					this.form.salesmanName = null
				}
				if (name == 'deliveryWarehouseName') {
					this.form.deliveryWarehouseId = null
					this.form.deliveryWarehouseName = null
				}
			},
			salesmanConfirm(row) {
				this.form.salesmanId = row.value[0].id
				this.form.salesmanName = row.value[0].name
				this.salesmanShow = false
			},
			deliveryWarehouseConfirm(row) {
				this.form.deliveryWarehouseId = row.value[0].id
				this.form.deliveryWarehouseName = row.value[0].cname
				this.deliveryWarehouseShow = false
			},
			corpsTypeConfirm(row) {
				this.form.corpsTypeId = row.value[0].id
				this.form.corpsTypeName = row.value[0].cname
				this.corpsTypeShow = false
			},
			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
				})
			},
			getSalerList() {
				salerList().then(res => {
					this.salesmanList = [res.data]
				})
			},
			getStorageList() {
				storageList().then(res => {
					this.deliveryWarehouseList = [res.data]
				})
			},
			getFileExtension(filename) {
				return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
			},
			async submit() {
				if (!this.form.cname) {
					uni.showToast({
						title: '请输入店铺名称',
						icon: 'none'
					});
					return
				}
				if (!this.form.salesmanName) {
					uni.showToast({
						title: '请选择业务员',
						icon: 'none'
					});
					return
				}
				if (!this.form.deliveryWarehouseName) {
					uni.showToast({
						title: '请选择发货仓库',
						icon: 'none'
					});
					return
				}
				if (!this.form.corpsTypeId) {
					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: res.msg,
								icon: 'none',
							});
						}, 10);
						this.getAppDetails()
					})
					.catch(() => {
						uni.hideLoading()
					});
			},
			getAppDetails() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getAppDetails().then(res => {
						res.data.label = res.data.label ? res.data.label.split(",") : []
						this.form = res.data
					})
					.finally(() => {
						uni.hideLoading()
					});
			},
			async convertData(obj) {
				obj.label = obj.label ? obj.label.join(",") : null
				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;
	}

	::v-deep .uni-file-picker .file-picker__box-content {
		overflow: revert;
		z-index: 9;
	}

	::v-deep .icon-del-box {
		height: 26rpx;
		width: 26rpx;
		top: -2rpx;
		right: -8rpx;
		z-index: 999;
	}

	::v-deep .icon-del {
		width: 14rpx;
		height: 2rpx;
	}

	.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;
	}

	::v-deep .icon-add {
		width: 36px !important;
	}

	::v-deep .uni-date-x .uni-icons {
		color: #03803B !important;
	}
</style>