mobile-admin/mall/setup/index.vue

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


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

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

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

				</wd-cell-group>

				<!-- 门头照图片 -->
				<wd-cell-group class="flex py-2 w-full" title="门头照图片">

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

				</wd-cell-group>

				<!-- <wd-input label="联系人" label-width="100px" v-model="shopData.contact" /> -->
				<wd-input label="联系方式" label-width="100px" v-model="shopData.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="shopData.district" @change="select">
					</uni-data-picker>
				</view>
			</wd-cell-group>

			<wd-input label="详细地址" label-width="100px" v-model="shopData.detail" use-suffix-slot>
			</wd-input>

			<!-- 其他信息 -->
			<wd-cell-group title="其他信息" border>
				<!-- 云喇叭通知表单项 -->
				<wd-form-item label="云喇叭通知：" prop="zhangyou_device_name">
					<wd-input v-model="shopData.zhangyou_device_name" placeholder="请输入设备编号" clearable />

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

				<wd-form-item label="抖音门店ID：" prop="zhangyou_device_name">
					<wd-input v-model="shopData.douyin_shop_id" placeholder="请输入抖音门店ID" clearable />
				</wd-form-item>

				<wd-form-item label="支付宝门店ID：" prop="zhangyou_device_name">
					<wd-input v-model="shopData.ali_shop_id" placeholder="请输入支付宝门店ID" clearable />
				</wd-form-item>

			</wd-cell-group>

			<view class="p-3 bg-white rounded mb-2">
				<div class="name mb-2 text-xs">非营业时间下单</div>
				<view class="bg-white px-3 py-2 rounded flex items-center">
					<wd-switch v-model="shopData.is_opening" :active-value="1" :inactive-value="0" />
				</view>
			</view>

			<view class="p-3 bg-white rounded mb-2">
				<div class="name mb-2 text-xs">状态</div>
				<view class="bg-white px-3 py-2 rounded flex items-center">
					<wd-switch v-model="shopData.status" :active-value="1" :inactive-value="0" />
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="mt-2 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/mall/index.js';
import kevyloading from "@/components/kevy-loading/kevy-loading";
import utils from '@/utils/utils.js'
import shop from '@/api/store/shop.js';


/**
 * 从本地存储中获取用户信息
 */
const user_info = uni.getStorageSync("user_info");

export default {
	components: {
		yUpload, uniDataPicker, kevyloading
	},
	data() {
		return {
			utils,
			user_info,
			// 表单数据
			shopData: {
				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: '',
			},
			shippingOptions: [
				{ label: "邮寄", value: 1 },
				{ label: "自提", value: 2 },
			],
			// 表单验证规则
			formRules: {
				name: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
				// 在这里添加其他字段的验证规则
			},
			// 地区选择器的数据
			addrList: [
				// 在这里添加省市区的数据
			],
			loading: false
		};
	},
	onLoad(e) {
		this.getDistrict();
		this.getShopSetting();
	},
	methods: {
		/**
		 * 获取省市区数据
		 */
		async getDistrict() {
			const res = await system.getDistrict();
			this.addrList = res.data;
		},

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

			if (res.data.id) {
				this.shopData = 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.shopData.province_id = province_id;
				this.shopData.city_id = city_id;
				this.shopData.district_id = district_id;
				this.shopData.district = [province_id, city_id, district_id];
			}
		},

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

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

</script>

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