py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

components2

Browse Source
branch_lyj
Liuyujie 7 months ago
parent 6cacfd11d1
commit e8a2fc3417
1 changed files with 270 additions and 206 deletions
Show Stats Download Patch File Download Diff File

170
src/views/sms/coupon/components/CouponDetail.vue
Unescape View File

@ -1,12 +1,16 @@
<template>  <template>
<!-- el-card组件作为表单的容器，设置了类名和无阴影效果 -->
<el-card class="form-container" shadow="never"> <el-card class="form-container" shadow="never">
<!-- el-form表单组件，绑定了数据模型coupon，设置了验证规则、表单引用、标签宽度和尺寸等属性 -->
<el-form :model="coupon" <el-form :model="coupon"
:rules="rules" :rules="rules"
ref="couponFrom" ref="couponFrom"
label-width="150px" label-width="150px"
size="small"> size="small">
<!-- 优惠券类型的表单项，使用el-select下拉选择框来选择类型 -->
<el-form-item label="优惠券类型："> <el-form-item label="优惠券类型：">
<el-select v-model="coupon.type"> <el-select v-model="coupon.type">
<!-- 通过v-for循环生成下拉选项 -->
<el-option <el-option
v-for="type in typeOptions" v-for="type in typeOptions"
:key="type.value" :key="type.value"
@ -15,11 +19,14 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 优惠券名称的表单项，使用el-input输入框输入名称，设置了数据绑定和类名 -->
<el-form-item label="优惠券名称：" prop="name"> <el-form-item label="优惠券名称：" prop="name">
<el-input v-model="coupon.name" class="input-width"></el-input> <el-input v-model="coupon.name" class="input-width"></el-input>
</el-form-item> </el-form-item>
<!-- 适用平台的表单项，用el-select下拉选择框选择平台 -->
<el-form-item label="适用平台："> <el-form-item label="适用平台：">
<el-select v-model="coupon.platform"> <el-select v-model="coupon.platform">
<!-- 通过v-for循环生成下拉选项 -->
<el-option <el-option
v-for="item in platformOptions" v-for="item in platformOptions"
:key="item.value" :key="item.value"
@ -28,33 +35,40 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 总发行量的表单项，用el-input输入框输入发行量，设置了数据绑定和占位提示等属性 -->
<el-form-item label="总发行量：" prop="publishCount"> <el-form-item label="总发行量：" prop="publishCount">
<el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input> <el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
</el-form-item> </el-form-item>
<!-- 面额的表单项，用el-input输入框输入面额，设置了数据绑定、占位提示和后缀文本等属性 -->
<el-form-item label="面额：" prop="amount"> <el-form-item label="面额：" prop="amount">
<el-input v-model.number="coupon.amount" placeholder="面值只能是数值，限2位小数" class="input-width"> <el-input v-model.number="coupon.amount" placeholder="面值只能是数值，限2位小数" class="input-width">
<template slot="append">元</template> <template slot="append">元</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 每人限领的表单项，用el-input输入框输入限领数量，设置了数据绑定和后缀文本等属性 -->
<el-form-item label="每人限领："> <el-form-item label="每人限领：">
<el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width"> <el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
<template slot="append">张</template> <template slot="append">张</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 使用门槛的表单项，用el-input输入框输入门槛金额，设置了数据绑定、前后缀文本等属性 -->
<el-form-item label="使用门槛：" prop="minPoint"> <el-form-item label="使用门槛：" prop="minPoint">
<el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width"> <el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
<template slot="prepend">满</template> <template slot="prepend">满</template>
<template slot="append">元可用</template> <template slot="append">元可用</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 领取日期的表单项，用el-date-picker日期选择器选择日期，设置了数据绑定和类名等属性 -->
<el-form-item label="领取日期：" prop="enableTime"> <el-form-item label="领取日期：" prop="enableTime">
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.enableTime" class="input-width"></el-date-picker> <el-date-picker type="date" placeholder="选择日期" v-model="coupon.enableTime" class="input-width"></el-date-picker>
</el-form-item> </el-form-item>
<!-- 有效期的表单项，通过两个el-date-picker日期选择器分别选择开始和结束日期 -->
<el-form-item label="有效期："> <el-form-item label="有效期：">
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.startTime" style="width: 150px"></el-date-picker> <el-date-picker type="date" placeholder="选择日期" v-model="coupon.startTime" style="width: 150px"></el-date-picker>
<span style="margin-left: 20px;margin-right: 20px">至</span> <span style="margin-left: 20px;margin-right: 20px">至</span>
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.endTime" style="width: 150px"></el-date-picker> <el-date-picker type="date" placeholder="选择日期" v-model="coupon.endTime" style="width: 150px"></el-date-picker>
</el-form-item> </el-form-item>
<!-- 可使用商品的表单项，用el-radio-group单选按钮组选择使用类型 -->
<el-form-item label="可使用商品："> <el-form-item label="可使用商品：">
<el-radio-group v-model="coupon.useType"> <el-radio-group v-model="coupon.useType">
<el-radio-button :label="0">全场通用</el-radio-button> <el-radio-button :label="0">全场通用</el-radio-button>
@ -62,21 +76,27 @@
<el-radio-button :label="2">指定商品</el-radio-button> <el-radio-button :label="2">指定商品</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 当可使用商品类型为指定分类时显示的内容，包含分类选择器、添加按钮和展示关联分类关系的表格 -->
<el-form-item v-show="coupon.useType===1"> <el-form-item v-show="coupon.useType===1">
<!-- el-cascader分类选择器，用于选择分类，设置了可清除、占位提示等属性 -->
<el-cascader <el-cascader
clearable clearable
placeholder="请选择分类名称" placeholder="请选择分类名称"
v-model="selectProductCate" v-model="selectProductCate"
:options="productCateOptions"> :options="productCateOptions">
</el-cascader> </el-cascader>
<!-- 添加分类关联的按钮，绑定点击事件 -->
<el-button @click="handleAddProductCategoryRelation()">添加</el-button> <el-button @click="handleAddProductCategoryRelation()">添加</el-button>
<!-- 展示已添加的分类关联关系的表格，设置了数据绑定等属性 -->
<el-table ref="productCateRelationTable" <el-table ref="productCateRelationTable"
:data="coupon.productCategoryRelationList" :data="coupon.productCategoryRelationList"
style="width: 100%;margin-top: 20px" style="width: 100%;margin-top: 20px"
border> border>
<!-- 显示分类名称的表格列 -->
<el-table-column label="分类名称" align="center"> <el-table-column label="分类名称" align="center">
<template slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template> <template slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template>
</el-table-column> </el-table-column>
<!-- 显示操作按钮（删除）的表格列 -->
<el-table-column label="操作" align="center" width="100"> <el-table-column label="操作" align="center" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" <el-button size="mini"
@ -87,7 +107,9 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-form-item> </el-form-item>
<!-- 当可使用商品类型为指定商品时显示的内容，包含商品选择框、添加按钮和展示关联商品关系的表格 -->
<el-form-item v-show="coupon.useType===2"> <el-form-item v-show="coupon.useType===2">
<!-- el-select商品选择框，设置了可过滤、远程搜索等属性 -->
<el-select <el-select
v-model="selectProduct" v-model="selectProduct"
filterable filterable
@ -96,6 +118,7 @@
placeholder="商品名称/商品货号" placeholder="商品名称/商品货号"
:remote-method="searchProductMethod" :remote-method="searchProductMethod"
:loading="selectProductLoading"> :loading="selectProductLoading">
<!-- 通过v-for循环生成商品选项 -->
<el-option <el-option
v-for="item in selectProductOptions" v-for="item in selectProductOptions"
:key="item.productId" :key="item.productId"
@ -105,17 +128,22 @@
<span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span> <span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span>
</el-option> </el-option>
</el-select> </el-select>
<!-- 添加商品关联的按钮，绑定点击事件 -->
<el-button @click="handleAddProductRelation()">添加</el-button> <el-button @click="handleAddProductRelation()">添加</el-button>
<!-- 展示已添加的商品关联关系的表格，设置了数据绑定等属性 -->
<el-table ref="productRelationTable" <el-table ref="productRelationTable"
:data="coupon.productRelationList" :data="coupon.productRelationList"
style="width: 100%;margin-top: 20px" style="width: 100%;margin-top: 20px"
border> border>
<!-- 显示商品名称的表格列 -->
<el-table-column label="商品名称" align="center"> <el-table-column label="商品名称" align="center">
<template slot-scope="scope">{{scope.row.productName}}</template> <template slot-scope="scope">{{scope.row.productName}}</template>
</el-table-column> </el-table-column>
<!-- 显示商品货号的表格列 -->
<el-table-column label="货号" align="center" width="120" > <el-table-column label="货号" align="center" width="120" >
<template slot-scope="scope">NO.{{scope.row.productSn}}</template> <template slot-scope="scope">NO.{{scope.row.productSn}}</template>
</el-table-column> </el-table-column>
<!-- 显示操作按钮（删除）的表格列 -->
<el-table-column label="操作" align="center" width="100"> <el-table-column label="操作" align="center" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" <el-button size="mini"
@ -126,6 +154,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-form-item> </el-form-item>
<!-- 备注的表单项，用el-input输入框输入备注内容，设置了类名、类型为文本域等属性 -->
<el-form-item label="备注："> <el-form-item label="备注：">
<el-input <el-input
class="input-width" class="input-width"
@ -135,18 +164,26 @@
v-model="coupon.note"> v-model="coupon.note">
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 提交和重置按钮所在的表单项 -->
<el-form-item> <el-form-item>
<!-- 提交按钮，设置类型为primary，绑定点击事件 -->
<el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button> <el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
<!-- 重置按钮，根据条件判断是否显示，绑定点击事件 -->
<el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button> <el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card>
</template> </template>
<script> <script>
import {createCoupon,getCoupon,updateCoupon} from '@/api/coupon'; // 从'@/api/coupon'模块导入创建、获取、更新优惠券相关的函数
import {fetchSimpleList as fetchProductList} from '@/api/product'; import {createCoupon, getCoupon, updateCoupon} from '@/api/coupon';
import {fetchListWithChildren} from '@/api/productCate' // 从'@/api/product'模块导入获取产品简单列表的函数，并起别名为fetchProductList
const defaultCoupon = { import {fetchSimpleList as fetchProductList} from '@/api/product';
// 从'@/api/productCate'模块导入获取带子项列表的函数
import {fetchListWithChildren} from '@/api/productCate';
// 默认的优惠券对象，包含类型、名称、平台等各属性的初始值
const defaultCoupon = {
type: 0, type: 0,
name: null, name: null,
platform: 0, platform: 0,
@ -160,8 +197,9 @@
publishCount: null, publishCount: null,
productRelationList: [], productRelationList: [],
productCategoryRelationList: [] productCategoryRelationList: []
}; };
const defaultTypeOptions = [ // 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
const defaultTypeOptions = [
{ {
label: '全场赠券', label: '全场赠券',
value: 0 value: 0
@ -178,8 +216,9 @@
label: '注册赠券', label: '注册赠券',
value: 3 value: 3
} }
]; ];
const defaultPlatformOptions = [ // 默认的适用平台选项数组，包含全平台、移动平台、PC平台等及对应值
const defaultPlatformOptions = [
{ {
label: '全平台', label: '全平台',
value: 0 value: 0
@ -192,9 +231,11 @@
label: 'PC平台', label: 'PC平台',
value: 2 value: 2
} }
]; ];
export default {
export default {
name: 'CouponDetail', name: 'CouponDetail',
// 定义组件接收的属性，这里有isEdit属性，类型为布尔值，默认是false
props: { props: {
isEdit: { isEdit: {
type: Boolean, type: Boolean,
@ -203,40 +244,52 @@
}, },
data() { data() {
return { return {
// 当前优惠券数据，初始为默认优惠券对象的副本
coupon: Object.assign({}, defaultCoupon), coupon: Object.assign({}, defaultCoupon),
// 优惠券类型选项，初始为默认类型选项副本
typeOptions: Object.assign({}, defaultTypeOptions), typeOptions: Object.assign({}, defaultTypeOptions),
// 适用平台选项，初始为默认平台选项副本
platformOptions: Object.assign({}, defaultPlatformOptions), platformOptions: Object.assign({}, defaultPlatformOptions),
// 表单验证规则，针对优惠券名称、发行量等属性设置相应规则
rules: { rules: {
name: [ name: [
{required: true, message: '请输入优惠券名称', trigger: 'blur'}, {required: true, message: '请输入优惠券名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'} {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
], ],
publishCount: [ publishCount: [
{type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'} {type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
], ],
amount: [ amount: [
{type: 'number',required: true,message: '面值只能是数值，0.01-10000，限2位小数',trigger: 'blur'} {type: 'number', required: true, message: '面值只能是数值，0.01-10000，限2位小数', trigger: 'blur'}
], ],
minPoint: [ minPoint: [
{type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'} {type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
] ]
}, },
selectProduct:null, // 选中的商品，初始为null
selectProduct: null,
// 商品选择框加载状态，初始为false
selectProductLoading: false, selectProductLoading: false,
selectProductOptions:[], // 商品选项列表，初始为空数组
selectProductOptions: [],
// 选中的商品分类，初始为null
selectProductCate: null, selectProductCate: null,
// 商品分类选项列表，初始为空数组
productCateOptions: [] productCateOptions: []
} }
}, },
created(){ created() {
if(this.isEdit){ // 如果是编辑状态，调用获取优惠券函数获取数据并赋值给coupon
getCoupon(this.$route.query.id).then(response=>{ if (this.isEdit) {
this.coupon=response.data; getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data;
}); });
} }
// 调用获取商品分类列表的函数
this.getProductCateList(); this.getProductCateList();
}, },
methods:{ methods: {
// 提交表单的方法，先进行表单验证，验证通过后弹出确认框，根据是否编辑状态调用相应的创建或更新函数，成功后有相应提示和路由操作
onSubmit(formName) { onSubmit(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
@ -245,23 +298,23 @@
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
if(this.isEdit){ if (this.isEdit) {
updateCoupon(this.$route.query.id,this.coupon).then(response=>{ updateCoupon(this.$route.query.id, this.coupon).then(response => {
this.$refs[formName].resetFields(); this.$refs[formName].resetFields();
this.$message({ this.$message({
message: '修改成功', message: '修改成功',
type: 'success', type: 'success',
duration:1000 duration: 1000
}); });
this.$router.back(); this.$router.back();
}); });
}else{ } else {
createCoupon(this.coupon).then(response=>{ createCoupon(this.coupon).then(response => {
this.$refs[formName].resetFields(); this.$refs[formName].resetFields();
this.$message({ this.$message({
message: '提交成功', message: '提交成功',
type: 'success', type: 'success',
duration:1000 duration: 1000
}); });
this.$router.back(); this.$router.back();
}); });
@ -271,34 +324,37 @@
this.$message({ this.$message({
message: '验证失败', message: '验证失败',
type: 'error', type: 'error',
duration:1000 duration: 1000
}); });
return false; return false;
} }
}); });
}, },
// 重置表单的方法，重置表单字段并恢复coupon为默认值
resetForm(formName) { resetForm(formName) {
this.$refs[formName].resetFields(); this.$refs[formName].resetFields();
this.coupon = Object.assign({},defaultCoupon); this.coupon = Object.assign({}, defaultCoupon);
}, },
searchProductMethod(query){ // 商品搜索方法，根据输入的查询条件去获取商品列表数据并更新商品选项列表
if (query !== '') { searchProductMethod(query) {
if (query!== '') {
this.loading = true; this.loading = true;
fetchProductList({keyword:query}).then(response=>{ fetchProductList({keyword: query}).then(response => {
this.loading=false; this.loading = false;
let productList = response.data; let productList = response.data;
this.selectProductOptions = []; this.selectProductOptions = [];
for(let i=0;i<productList.length;i++){ for (let i = 0; i < productList.length; i++) {
let item = productList[i]; let item = productList[i];
this.selectProductOptions.push({productId:item.id,productName:item.name,productSn:item.productSn}); this.selectProductOptions.push({productId: item.id, productName: item.name, productSn: item.productSn});
} }
}); });
} else { } else {
this.selectProductOptions = []; this.selectProductOptions = [];
} }
}, },
handleAddProductRelation(){ // 添加商品关联的方法，判断是否选择了商品，选择了则添加到商品关联列表，并清空选中商品
if(this.selectProduct===null){ handleAddProductRelation() {
if (this.selectProduct === null) {
this.$message({ this.$message({
message: '请先选择商品', message: '请先选择商品',
type: 'warning' type: 'warning'
@ -306,13 +362,15 @@
return return
} }
this.coupon.productRelationList.push(this.getProductById(this.selectProduct)); this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
this.selectProduct=null; this.selectProduct = null;
}, },
handleDeleteProductRelation(index,row){ // 删除商品关联的方法，根据索引从商品关联列表中删除对应项
this.coupon.productRelationList.splice(index,1); handleDeleteProductRelation(index, row) {
this.coupon.productRelationList.splice(index, 1);
}, },
handleAddProductCategoryRelation(){ // 添加商品分类关联的方法，判断是否选择了商品分类，选择了则添加到分类关联列表，并清空选中分类
if(this.selectProductCate===null||this.selectProductCate.length===0){ handleAddProductCategoryRelation() {
if (this.selectProductCate === null || this.selectProductCate.length === 0) {
this.$message({ this.$message({
message: '请先选择商品分类', message: '请先选择商品分类',
type: 'warning' type: 'warning'
@ -320,26 +378,29 @@
return return
} }
this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate)); this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
this.selectProductCate=[]; this.selectProductCate = [];
}, },
handleDeleteProductCateRelation(index,row){ // 删除商品分类关联的方法，根据索引从分类关联列表中删除对应项
this.coupon.productCategoryRelationList.splice(index,1); handleDeleteProductCateRelation(index, row) {
this.coupon.productCategoryRelationList.splice(index, 1);
}, },
getProductById(id){ // 根据商品id获取商品对象的方法，遍历商品选项列表查找对应id的商品并返回
for(let i=0;i<this.selectProductOptions.length;i++){ getProductById(id) {
if(id===this.selectProductOptions[i].productId){ for (let i = 0; i < this.selectProductOptions.length; i++) {
if (id === this.selectProductOptions[i].productId) {
return this.selectProductOptions[i]; return this.selectProductOptions[i];
} }
} }
return null; return null;
}, },
// 获取商品分类列表的方法，调用接口获取数据，处理后更新商品分类选项列表
getProductCateList() { getProductCateList() {
fetchListWithChildren().then(response => { fetchListWithChildren().then(response => {
let list = response.data; let list = response.data;
this.productCateOptions = []; this.productCateOptions = [];
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
let children = []; let children = [];
if (list[i].children != null && list[i].children.length > 0) { if (list[i].children!= null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) { for (let j = 0; j < list[i].children.length; j++) {
children.push({label: list[i].children[j].name, value: list[i].children[j].id}); children.push({label: list[i].children[j].name, value: list[i].children[j].id});
} }
@ -348,7 +409,8 @@
} }
}); });
}, },
getProductCateByIds(ids){ // 根据商品分类id获取分类对象的方法，通过遍历分类选项列表查找对应id的分类信息并返回
getProductCateByIds(ids) {
let name; let name;
let parentName; let parentName;
for (let i = 0; i < this.productCateOptions.length; i++) { for (let i = 0; i < this.productCateOptions.length; i++) {
@ -364,12 +426,14 @@
return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName}; return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.input-width { <!-- 带有scoped属性的style标签，意味着里面定义的样式仅作用于当前组件内的元素 -->
.input-width {
<!-- 定义了一个类选择器样式，作用是将应用该类的元素宽度设置为其父元素宽度的60% -->
width: 60%; width: 60%;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save