mobile-admin/mall/discount/full_set_redution/edit.vue

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

		<wd-form v-if="!loading" :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="100px">
			<wd-form-item label="折扣名称" prop="name">
				<wd-input placeholder="请输入折扣名称" v-model="dataForm.name" clearable style="width: 100%"></wd-input>
			</wd-form-item>

			<wd-cell-group class="flex py-2 w-full" title="活动背景">
				<view class="ml-3">
					<yUpload v-model="dataForm.bg_pic" :size="1"></yUpload>
				</view>
			</wd-cell-group>

			<wd-form-item label="活动背景颜色" prop="name">
				<wd-input placeholder="请输入十六进制颜色" v-model="dataForm.bg_color" clearable style="width: 100%"></wd-input>
			</wd-form-item>


			<wd-form-item label="满减金额" prop="name">
				<wd-input placeholder="请输入" v-model="dataForm.full_price" clearable style="width: 100%"></wd-input>
			</wd-form-item>



			<wd-form-item label="折扣比例" prop="discount">
				<wd-input type="number" placeholder="请输入折扣比例" step="1" v-model.number="dataForm.discount" clearable
					style="width: 100%"></wd-input>

				<div style="color: #666;font-size: 12px;">
					如商品单价100，折扣比例40 (4折)，仅需付40元
				</div>
			</wd-form-item>

			<wd-form-item label="选择商品">
				<yGoods v-model="dataForm.deatil" :size="1"></yGoods>
			</wd-form-item>


			<div style="display: flex;flex-direction: column;">
				<wd-datetime-picker v-model="dataForm.start_time" label="开始时间" />
				<wd-datetime-picker v-model="dataForm.end_time" label="结束时间" />
			</div>

			<!-- 是否启用 -->
			<wd-form-item label="是否启用：" prop="status">
				<wd-switch v-model="dataForm.status" :active-value="1" :inactive-value="0"></wd-switch>
			</wd-form-item>

			<!-- 提交按钮 -->
			<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 yGoods from "@/components/yGoods/index.vue";
import uniDataPicker from "@/components/uni-data-picker/components/uni-data-picker/uni-data-picker.vue";
import kevyloading from "@/components/kevy-loading/kevy-loading";
import utils from '@/utils/utils.js'
import userMembers from '@/api/mall/userMembers.js';
import { useApi } from "@/hooks/useApi.js"
import discountApi from '@/api/mall/discount.js';
import yUpload from "@/components/yUpload/index.vue";

console.log(yGoods);

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

export default {
	components: {
		yGoods, uniDataPicker, kevyloading, yUpload
	},
	data() {
		return {
			utils,
			user_info,
			// 表单数据
			dataForm: {
				"id": 0,
			},
			columns: [],
			loading: false
		};
	},
	onLoad(e) {
		if (e.id) {

			this.getData(e.id)

			// this.dataForm = JSON.parse(e.edit)

			// this.dataForm.start_time = new Date(this.dataForm.start_time * 1000)
			// this.dataForm.end_time = new Date(this.dataForm.end_time * 1000)

			// console.log(this.dataForm);
		} else {
			this.dataForm.start_time = new Date()
			this.dataForm.end_time = new Date()

		}

		for (let index = 1; index <= 100; index++) {
			this.columns.push(index)
		}
	},

	methods: {
		async getData(id) {
			const { fetchData } = await useApi(discountApi.SalesFullSetRedution.GetItem)

			fetchData({ id }).then(res => {

				console.log(res);

				this.dataForm = res.data
				this.dataForm.deatil = res.data.deatil.filter(item => item)


				this.dataForm.start_time = new Date(res.data.start_time * 1000)
				this.dataForm.end_time = new Date(res.data.end_time * 1000)


			})
		},

		/**
		 * 处理省市区选择变化
		 * @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.datadataForm.province_id = province_id;
				this.datadataForm.city_id = city_id;
				this.datadataForm.district_id = district_id;
				this.datadataForm.district = [province_id, city_id, district_id];
			}
		},

		/**
		 * 处理表单提交
		 */
		async handleSubmit() {
			console.log(this.dataForm.deatil.map(item => [item.id]));
			// 处理表单提交的逻辑
			const res = await discountApi.SalesFullSetRedution.Create({
				...this.dataForm,
				start_time: utils.dateFormat(this.dataForm.start_time),
				end_time: utils.dateFormat(this.dataForm.end_time),
				mix_id_list: this.dataForm.deatil.map(item => [item.id])
			});

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

				uni.navigateBack()
			}
		},
	},
};

</script>

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