mobile-admin/store/setup/index.vue

<template>
	<view>
		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>

		<view class="w-full mb-12">
			<wd-navbar fixed safeAreaInsetTop :leftText="user_info?.info?.name || '商城设置'">
				<template #right>
					<view @click="utils.loginOut()">
						退出登录
					</view>
				</template>
			</wd-navbar>
		</view>

		<wd-form ref="form" :model="storeData" :rules="formRules">
			<!-- 基础信息 -->
			<wd-cell-group title="基础信息" border>
				<wd-input label="商城名称" label-width="100px" v-model="storeData.name" />

				<!-- 商城LOGO -->
				<wd-cell-group class="flex py-2 w-full" title="商城LOGO">

					<view class="ml-3">
						<yUpload v-model="storeData.logo_url" :size="1"></yUpload>
					</view>

				</wd-cell-group>

				<!-- <wd-input label="联系人" label-width="100px" v-model="storeData.contact" /> -->
				<wd-input label="联系方式" label-width="100px" v-model="storeData.mobile" />
				<!-- 其他基础信息字段可以根据需要添加 -->
			</wd-cell-group>

			<!-- 地址信息 -->
			<wd-cell-group class="flex py-2 w-full" title="所在地区">
				<view class="ml-3">
					<!-- 省市区选择器 -->
					<uni-data-picker placeholder="请选择省市区" popup-title="请选择" :localdata="addrList" :map="{
											text: 'name',
											value: 'id',
										}" v-model="storeData.district" @change="select">
					</uni-data-picker>
				</view>
			</wd-cell-group>

			<!-- <wd-cell-group class="flex py-2 w-full" title="经纬度">
				<view class="ml-3">
					<wd-input label-width="100px" v-model="storeData.latlngCurrent" />
				</view>
			</wd-cell-group> -->

			<!-- 其他信息 -->
			<wd-cell-group title="订单设置" border>
				<wd-input label="支付时间" label-width="100px" v-model="storeData.pay_time" use-suffix-slot>
					<template #suffix>
						<view>分钟</view>
					</template>
				</wd-input>

				<wd-input label="自动收货时间" label-width="100px" v-model="storeData.confirm_time" use-suffix-slot>
					<template #suffix>
						<view>天</view>
					</template>
				</wd-input>

				<wd-input label="售后时间" label-width="100px" v-model="storeData.sale_time" use-suffix-slot>
					<template #suffix>
						<view>天</view>
					</template>
				</wd-input>


				<wd-cell-group class=" py-2 w-full" title="支付方式">
					<view class="ml-3">
						<wd-checkbox-group v-model="storeData.pay_type">
							<div class="px-4 pb-4 flex flex-wrap ">
								<wd-checkbox class="w-full" v-for="option in paymentOptions" :key="option.value"
									:model-value="option.value" shape="button">{{ option.label }}</wd-checkbox>
							</div>
						</wd-checkbox-group>
					</view>
				</wd-cell-group>


				<wd-cell-group class=" py-2 w-full" title="发货方式">
					<view class="ml-3">
						<wd-checkbox-group v-model="storeData.delivery_type">
							<div class="px-4 pb-4">
								<wd-checkbox class="w-full" v-for="option in shippingOptions" :key="option.value"
									:model-value="option.value" shape="button">{{ option.label }}</wd-checkbox>
							</div>
						</wd-checkbox-group>
					</view>
				</wd-cell-group>

				<wd-cell-group title="其他信息" border>

					<!-- 收件人表单项 -->
					<wd-form-item label="收件人 (售后)：" prop="recipient">
						<wd-input v-model="storeData.after_sale_name" placeholder="请输入收件人姓名" clearable />
					</wd-form-item>

					<!-- 电话表单项 -->
					<wd-form-item label="电话 (售后)：" prop="phone">
						<wd-input v-model="storeData.after_sale_phone" placeholder="请输入联系电话" clearable />
					</wd-form-item>

					<!-- 地址表单项 -->
					<wd-form-item label="地址 (售后)：" prop="address">
						<wd-input v-model="storeData.after_sale_address" placeholder="请输入详细地址" clearable />
					</wd-form-item>

					<!-- 阿里云物流查询 App Code 表单项 -->
					<wd-form-item label="阿里云物流查询 App Code：" prop="ali_express_app_code">
						<wd-input v-model="storeData.ali_express_app_code" placeholder="请输入阿里云物流查询 App Code" clearable />
					</wd-form-item>

					<!-- 云喇叭通知表单项 -->
					<wd-form-item label="云喇叭通知：" prop="zhangyou_device_name">
						<wd-input v-model="storeData.zhangyou_device_name" placeholder="请输入设备编号" clearable />

						<div style="color: #666;font-size: 12px;">
							掌优4G云喇叭编号
						</div>
					</wd-form-item>
				</wd-cell-group>

			</wd-cell-group>

			<div class="h-[80px] bg-slate-50"></div>

			<!-- 提交按钮 -->
			<view class="mt-2 fixed left-0 right-0 bottom-0 px-12 py-3 bg-slate-50">
				<wd-button type="primary" size="large" @click="handleSubmit" block>
					保存
				</wd-button>
			</view>
		</wd-form>
	</view>
</template>

<script>
import { ref } from 'vue';
import yUpload from "@/components/yUpload/index.vue";
import uniDataPicker from "@/components/uni-data-picker/components/uni-data-picker/uni-data-picker.vue";
import system from '@/api/modules/system.js';
import index from '@/api/store/index.js';
import kevyloading from "@/components/kevy-loading/kevy-loading";
import utils from '@/utils/utils.js'
/**
 * 从本地存储中获取用户信息
 */
const user_info = uni.getStorageSync("user_info");

export default {
	components: {
		yUpload, uniDataPicker, kevyloading
	},
	data() {
		return {
			utils,
			user_info,
			// 表单数据
			storeData: {
				name: '',
				logo_url: '',
				mobile: '',
				district: null,
				latlngCurrent: '',
				pay_time: '',
				confirm_time: '',
				sale_time: '',
				pay_type: [],
				delivery_type: [],
				after_sale_name: '',
				after_sale_phone: '',
				after_sale_address: '',
				ali_express_app_code: '',
				zhangyou_device_name: '',
			},
			paymentOptions: [
				{ label: "支付宝", value: 1 },
				{ label: "微信", value: 2 },
				{ label: "余额", value: 3 },
				{ label: "货到付款", value: 4 },
			],
			shippingOptions: [
				{ label: "邮寄", value: 1 },
				{ label: "自提", value: 2 },
				{ label: "同城", value: 3 },
			],
			// 表单验证规则
			formRules: {
				name: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
				// 在这里添加其他字段的验证规则
			},
			// 地区选择器的数据
			addrList: [
				// 在这里添加省市区的数据
			],
			loading: false
		};
	},
	created() {
		this.getDistrict();
		this.getStoreSetting();
	},

	methods: {
		/**
		 * 获取省市区数据
		 */
		async getDistrict() {
			const res = await system.getDistrict();
			this.addrList = res.data;
		},

		/**
		 * 获取门店设置
		 */
		async getStoreSetting() {
			this.loading = true;
			const res = await index.getStoreSetting();

			if (res.data.id) {
				this.storeData = res.data;
			}
			this.loading = false;
		},

		/**
		 * 处理省市区选择变化
		 * @param {Object} value - 选择的值
		 */
		areaChange(value) {
			// 处理省市区选择变化的逻辑
		},

		/**
		 * 处理省市区选择
		 * @param {Object} detail - 选择器详细信息
		 */
		select({ detail }) {
			if (detail.value.length) {
				const [province_id, city_id, district_id] = detail.value.map(
					(el) => el.value
				);

				this.storeData.province_id = province_id;
				this.storeData.city_id = city_id;
				this.storeData.district_id = district_id;
				this.storeData.district = [province_id, city_id, district_id];
			}
		},

		/**
		 * 处理表单提交
		 */
		async handleSubmit() {
			// 处理表单提交的逻辑
			const res = await index.setStoreSetting({
				...this.storeData
			});

			await this.getStoreSetting();

			if (res.code == 0) {
				setTimeout(() => {
					uni.showToast({
						title: '保存成功!',
						icon: 'success'
					});
				}, 100);
				// uni.navigateBack()
			}
		},
	},
};

</script>

<style>
/* 在这里添加样式，根据需要自定义表单样式 */
</style>