mobile-admin/store/user/editMember.vue

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

		<wd-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="100px">
			<wd-form-item label="等级" prop="level">
				<wd-picker :columns="columns" v-model="dataForm.level" @confirm="handleConfirm" />

				<div style="color: #666;font-size: 12px;">
					数字越大等级越高
				</div>

				<div style="color: red;font-size: 12px;">
					会员满足条件等级从低到高自动升级，高等级不会自动降级
				</div>

				<div style="color: red;font-size: 12px;">
					如需个别调整，请前往会员列表调整
				</div>

			</wd-form-item>
			<wd-form-item label="等级名称" prop="name">
				<wd-input v-model="dataForm.name" placeholder="请输入等级名称"></wd-input>
			</wd-form-item>
			<wd-form-item label="升级条件" prop="money">
				<wd-input placeholder="请输入内容" v-model.number="dataForm.money" use-prefix-slot use-suffix-slot>
					<template #prefix>累计完成订单金额满：</template>
					<template #suffix>元</template>
				</wd-input>
				<wd-input style="margin-top: 10px;" placeholder="请输入内容" v-model.number="dataForm.growth" use-prefix-slot
					use-suffix-slot>
					<template #prefix>成长值：</template>
				</wd-input>

				<div style="color: #666;font-size: 12px;">
					会员升级条件
				</div>
			</wd-form-item>
			<!-- <wd-form-item label="折扣" prop="discount">
      <wd-input placeholder="请输入折扣" v-model.number="dataForm.discount">
        <template #append>折</template>
      </wd-input>
      <p>如商品单价100，折扣比例40(4折)，仅需付40元</p>
    </wd-form-item> -->
			<wd-form-item label="会员等级状态" prop="status">
				<wd-switch v-model="dataForm.status" :active-value="1" :inactive-value="0"></wd-switch>
			</wd-form-item>
			<wd-form-item label="购买价格" prop="price">
				<wd-input placeholder="请输入购买价格" v-model.number="dataForm.price">
					<template #append>元</template>
				</wd-input>

				<div style="color: #666;font-size: 12px;">
					输入0 会员将不可购买
				</div>
			</wd-form-item>
			<wd-form-item label="会员图片" prop="image">
				<!-- 请替换为你使用的资源选择组件 -->
				<yUpload v-model="dataForm.image" :size="1"></yUpload>
			</wd-form-item>
			<!-- 其他注释的表单项 -->
			<!-- <wd-form-item label="会员权益(购买会员开启)" prop="detail">
      <sc-editor v-model="dataForm.detail" placeholder="请输入会员权益(购买会员开启)" :height="300" style="max-width: 100%;"></sc-editor>
    </wd-form-item>
    <wd-form-item label="会员购买提示" prop="buy_prompt">
      <sc-editor v-model="dataForm.buy_prompt" placeholder="请输入会员购买提示" :height="300" style="max-width: 100%;"></sc-editor>
      <p>购买此会员介绍</p>
    </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 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'
import userMembers from '@/api/store/userMembers.js';

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

export default {
	components: {
		yUpload, uniDataPicker, kevyloading
	},
	data() {
		return {
			utils,
			user_info,
			// 表单数据
			dataForm: {
				level: '',
				name: '',
				money: '',
				growth: '',
				status: false,
				price: '',
				image: '',
				detail: "废弃",
				buy_prompt: "废弃",
				discount: 0
			},
			columns: [],
			loading: false
		};
	},
	onLoad(e) {
		if (e.edit) {
			this.dataForm = JSON.parse(e.edit)
		}

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

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

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

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

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

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

</script>

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