You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
7.3 KiB
Vue
275 lines
7.3 KiB
Vue
<template>
|
|
<view>
|
|
<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
|
|
|
|
<wd-form v-if="!loading" ref="form" :model="formData" :rules="formRules">
|
|
<!-- 基础信息 -->
|
|
<wd-cell-group title="基本信息" border>
|
|
<wd-input label="券名称" v-model="formData.name" />
|
|
<wd-input label="优惠券金额" v-model="formData.price" />
|
|
<wd-input label="满减金额" v-model="formData.full_price" />
|
|
<!-- 其他基本信息字段可以根据需要添加 -->
|
|
</wd-cell-group>
|
|
|
|
<wd-cell-group title="领取类型">
|
|
<div class="bg-white rounded p-2">
|
|
<wd-radio-group v-model="formData.send_type" shape="button" @change="change">
|
|
<wd-radio :value="0">领取后过期</wd-radio>
|
|
<wd-radio :value="1">定时过期</wd-radio>
|
|
</wd-radio-group>
|
|
</div>
|
|
<wd-input v-if="formData.send_type == 0" label="过期时间" v-model="formData.day" />
|
|
|
|
<div v-if="formData.send_type == 1" label="过期时间" style="display: flex;flex-direction: column;">
|
|
<wd-datetime-picker v-model="formData.start_time" label="开始时间" />
|
|
<wd-datetime-picker v-model="formData.end_time" label="结束时间" />
|
|
</div>
|
|
</wd-cell-group>
|
|
|
|
<!-- 是否启用 -->
|
|
<wd-cell-group title="领取中心显示" border>
|
|
<view class="p-4">
|
|
<wd-switch v-model="formData.is_show" :active-value="1" :inactive-value="0"></wd-switch>
|
|
</view>
|
|
</wd-cell-group>
|
|
|
|
<!-- 是否启用 -->
|
|
<wd-cell-group title="优惠券类型" border>
|
|
<view class="p-4">
|
|
<div class="mb-4">
|
|
<wd-radio-group v-model="formData.coupon_type" shape="button">
|
|
<wd-radio :value="1">商品</wd-radio>
|
|
<wd-radio :value="2">分类</wd-radio>
|
|
<wd-radio :value="3">当面付</wd-radio>
|
|
</wd-radio-group>
|
|
</div>
|
|
|
|
<view v-if="formData.coupon_type == 1">
|
|
<wd-form-item label="选择商品">
|
|
<yGoods v-model="formData.coupon_deatil" :size="1"></yGoods>
|
|
</wd-form-item>
|
|
</view>
|
|
|
|
<view v-if="formData.coupon_type == 2">
|
|
<wd-select-picker type="checkbox" label="选择分类" v-model="formData.cats"
|
|
:columns="classifyList"></wd-select-picker>
|
|
</view>
|
|
|
|
</view>
|
|
</wd-cell-group>
|
|
|
|
<wd-cell-group title="优惠券数量" border>
|
|
<view class="p-4">
|
|
<wd-input-number v-model="formData.stock" min="0" />
|
|
</view>
|
|
</wd-cell-group>
|
|
|
|
<wd-cell-group title="领取限制" border>
|
|
<view class="p-4">
|
|
<div class="mb-4">
|
|
<wd-radio-group v-model="formData.limit_type" shape="button">
|
|
<wd-radio :value="1">不限</wd-radio>
|
|
<wd-radio :value="2">每天一次</wd-radio>
|
|
<wd-radio :value="3">每人一次</wd-radio>
|
|
</wd-radio-group>
|
|
</div>
|
|
</view>
|
|
</wd-cell-group>
|
|
|
|
<!-- 提交按钮 -->
|
|
<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 yUpload from "@/components/yUpload/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 coupon from '@/api/store/coupon.js';
|
|
import yGoods from "@/components/yGoods/index.vue";
|
|
import goods from '@/api/store/goods.js'
|
|
|
|
/**
|
|
* 从本地存储中获取用户信息
|
|
*/
|
|
const user_info = uni.getStorageSync("user_info");
|
|
|
|
export default {
|
|
components: {
|
|
yUpload, uniDataPicker, kevyloading, yGoods
|
|
},
|
|
data() {
|
|
return {
|
|
utils,
|
|
user_info,
|
|
// 表单数据
|
|
formData: {
|
|
"name": "", // 设置为空字符串或默认名称
|
|
"price": "", // 设置为默认价格
|
|
"full_price": "", // 设置为默认满额价格
|
|
"send_type": "", // 设置为默认发货类型
|
|
"day": "", // 设置为默认天数
|
|
"start_time": null,
|
|
"end_time": null,
|
|
"is_show": 1, // 设置为默认显示状态
|
|
"coupon_type": 1, // 设置为默认优惠券类型
|
|
"limit_type": 1, // 设置为默认限制类型
|
|
"stock": 0, // 设置为默认库存值
|
|
"coupon_deatil": [],
|
|
"cats": []
|
|
},
|
|
// 表单验证规则
|
|
formRules: {
|
|
// 在这里添加其他字段的验证规则
|
|
},
|
|
// 地区选择器的数据
|
|
addrList: [
|
|
// 在这里添加省市区的数据
|
|
],
|
|
classifyList: [],
|
|
loading: false
|
|
};
|
|
},
|
|
async onLoad(e) {
|
|
// this.getDistrict();
|
|
|
|
if (e.id) {
|
|
await this.getClassify()
|
|
this.GetItem(e.id);
|
|
}
|
|
|
|
// this.formData = JSON.parse(e.edit)
|
|
},
|
|
methods: {
|
|
async getClassify() {
|
|
goods.classify.list().then(res => {
|
|
this.classifyList = res.data.map(item => {
|
|
return {
|
|
label: item.name,
|
|
value: item.id,
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 获取门店设置
|
|
*/
|
|
async GetItem(id) {
|
|
this.loading = true;
|
|
const res = await coupon.GetItem({ id });
|
|
|
|
if (res.data.id) {
|
|
this.formData = JSON.parse(JSON.stringify(res.data));
|
|
|
|
this.formData.start_time = this.formData.start_time ? new Date(this.formData.start_time * 1000) : new Date()
|
|
this.formData.end_time = new Date(this.formData.end_time * 1000)
|
|
this.formData.cats = this.formData.cats || []
|
|
|
|
this.formData.coupon_deatil = []
|
|
if (this.formData.coupon_type == 1) {
|
|
this.formData.coupon_deatil = res.data.coupon_deatil
|
|
}
|
|
if (this.formData.coupon_type == 2) {
|
|
this.formData.cats = res.data.coupon_deatil?.map(item => item.id) || []
|
|
}
|
|
|
|
}
|
|
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.formData.province_id = province_id;
|
|
this.formData.city_id = city_id;
|
|
this.formData.district_id = district_id;
|
|
this.formData.district = [province_id, city_id, district_id];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 处理表单提交
|
|
*/
|
|
async handleSubmit() {
|
|
console.log(this.formData);
|
|
|
|
try {
|
|
|
|
let mix_id_list = []
|
|
|
|
if (this.formData.coupon_type == 1) {
|
|
mix_id_list = this.formData.coupon_deatil?.map(item => [item.id]) || []
|
|
}
|
|
|
|
if (this.formData.coupon_type == 2) {
|
|
mix_id_list = this.formData.cats?.map(item => [item]) || []
|
|
}
|
|
|
|
|
|
// 处理表单提交的逻辑
|
|
const res = await coupon.Create({
|
|
...this.formData,
|
|
start_time: this.formData.send_type == 1 ? utils.dateFormat(this.formData.start_time) : utils.dateFormat(new Date()),
|
|
end_time: this.formData.send_type == 1 ? utils.dateFormat(this.formData.end_time) : utils.dateFormat(new Date()),
|
|
mix_id_list: mix_id_list
|
|
});
|
|
|
|
if (res.code == 0) {
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: '保存成功!',
|
|
icon: 'success'
|
|
});
|
|
}, 100);
|
|
uni.navigateBack()
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: '请检查表单!',
|
|
icon: 'none'
|
|
});
|
|
}, 100);
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
};
|
|
|
|
</script>
|
|
|
|
<style>
|
|
/* 在这里添加样式，根据需要自定义表单样式 */
|
|
</style>
|