diff --git a/src/views/feedback/index.vue b/src/views/feedback/index.vue new file mode 100644 index 0000000..e0948b6 --- /dev/null +++ b/src/views/feedback/index.vue @@ -0,0 +1,63 @@ +<template> + <div> + <el-table :data="tableData" border style="width: 100%"> + <el-table-column type="index" width="50" label="序号" align="center"> + </el-table-column> + <el-table-column + prop="title" + label="标题" + :show-overflow-tooltip="true" + align="center" + width="300px" + > + </el-table-column> + <el-table-column + prop="describe" + label="描述" + :show-overflow-tooltip="true" + width="300" + align="center" + > + </el-table-column> + </el-table> + <pagination + v-show="total > 0" + :total="total" + :page.sync="queryParams.pageNum" + :limit.sync="queryParams.pageSize" + @pagination="getList" + /> + </div> +</template> + +<script> +export default { + data() { + return { + queryParams: { + pageNum: 1, + pageSize: 10, + }, + total: 10, + tableData: [ + { + title: "不断实现人民对美好生活的向往", + describe: + "春日暖阳中,陕西省延安市甘泉县桥镇乡桥镇村村民正忙着大棚升级改造,温室里各种蔬菜青翠欲滴。“人民幸福安康是推动高质量发展的最终目的,总书记的话说到了我们心坎里。”樊九平说,“靠着大力发展特色产业,这些年我们的日子就像种下的山地苹果,越来越红火!春日暖阳中,陕西省延安市甘泉县桥镇乡桥镇村村民正忙着大棚升级改造,温室里各种蔬菜青翠欲滴。“人民幸福安康是推动高质量发展的最终目的,总书记的话说到了我们心坎里。”樊九平说,“靠着大力发展特色产业,这些年我们的日子就像种下的山地苹果,越来越红火”", + }, + ], + }; + }, + methods:{ + getList(){} + } +}; +</script> + +<style lang="scss" scoped></style> +<style lang="css"> +.el-tooltip__popper { + max-width: 30%; + line-height: 20px; +} +</style> diff --git a/src/views/marketing/components/detailFile.vue b/src/views/marketing/components/detailFile.vue new file mode 100644 index 0000000..4c559c3 --- /dev/null +++ b/src/views/marketing/components/detailFile.vue @@ -0,0 +1,190 @@ +<template> + <div class="app-container"> + <el-dialog + :title="title" + :visible.sync="dialogVisible" + width="60%" + :before-close="handleCancle" + > + <el-form + :model="form" + :rules="rules" + ref="form" + label-width="100px" + class="demo-form" + > + <el-form-item label="券类型" prop="region"> + <el-select v-model="form.region" placeholder="请选择"> + <el-option + v-for="item in activeAreaList" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + <el-form-item label="优惠内容" prop="content"> + <div class="d-flex a-center custom-input"> + <div class="margin-right">减免</div> + <el-input + class="flex-1" + type="number" + min="1" + placeholder="减免金额>0且<99999" + v-model="form.content" + > + </el-input> + <div class="margin-left">元</div> + </div> + </el-form-item> + <el-form-item label="优惠门槛" prop="content"> + <div class="d-flex a-center custom-input"> + <div class="margin-right">最低消费,满</div> + <el-input + class="flex-1" + type="number" + min="0" + v-model="form.content" + /> + <div class="margin-left">元,可用</div> + </div> + </el-form-item> + <el-form-item label="生效时间" prop="startTime"> + <el-date-picker + v-model="form.startTime" + type="date" + placeholder="选择日期" + > + </el-date-picker> + </el-form-item> + <el-form-item label="失效时间" prop="endTime"> + <el-date-picker + v-model="form.endTime" + type="date" + placeholder="选择日期" + > + </el-date-picker> + </el-form-item> + </el-form> + <el-button @click="handleCancle">取消</el-button> + <el-button v-if="isEdit" type="primary" @click="onSubmit">{{ + form.id ? "保存修改" : "保存添加" + }}</el-button> + </el-dialog> + </div> +</template> + +<script> +export default { + props: { + dialogVisible: { + type: Boolean, + }, + title: { + type: String, + }, + isEdit:Boolean + }, + data() { + return { + width: "30%", + value1: "", + form: { + region: "", + content: "", + startTime: "", + endTime: "", + }, + rules: { + content: [ + { required: true, message: "请输入优惠内容", trigger: "blur" }, + ], + region: [ + { required: true, message: "请选择活动区域", trigger: "change" }, + ], + startTime: [ + { + type: "date", + required: true, + message: "请选择日期", + trigger: "change", + }, + ], + endTime: [ + { + type: "date", + required: true, + message: "请选择日期", + trigger: "change", + }, + ], + }, + activeAreaList: [ + { + value: "新用户券", + label: "新用户券", + }, + { + value: "满减券", + label: "满减券", + }, + ], + }; + }, + created() {}, + methods: { + handleCancle() { + this.$emit("cancle"); + }, + onSubmit() { + let that = this; + that.$refs.form.validate((valid) => { + console.log(valid); + if (valid) { + that.$emit("onSubmit", that.form); + } else { + return false; + } + }); + }, + }, +}; +</script> +<style lang="scss" scoped> +.description { + font-size: 25px; + margin-top: 10px; +} +.d-flex { + display: flex; +} +.a-center { + align-items: center; +} +.flex-1 { + flex: 1; +} +.margin-left { + margin-left: 10px; +} +.margin-right { + margin-right: 10px; +} +.custom-input { + width: 250px !important; +} +.customer { + display: flex; + flex-wrap: wrap; + margin-top: 20px; + + &-lab { + width: 33%; + + &-icke { + width: 100%; + } + } +} +</style> diff --git a/src/views/marketing/index.vue b/src/views/marketing/index.vue new file mode 100644 index 0000000..830777b --- /dev/null +++ b/src/views/marketing/index.vue @@ -0,0 +1,160 @@ +<template> + <div class="app-container"> + <el-form ref="queryForm" size="small" :inline="true" label-width="94px"> + <el-form-item> + <el-button + type="primary" + icon="el-icon-circle-plus-outline" + size="mini" + @click="handleAdd" + >添加优惠券</el-button + > + </el-form-item> + </el-form> + + <el-table :data="tableData" border style="width: 100%"> + <el-table-column type="index" width="50" label="序号" align="center"> + </el-table-column> + <el-table-column + prop="city" + label="券类型" + :show-overflow-tooltip="true" + align="center" + > + </el-table-column> + <el-table-column + prop="name" + label="优惠内容" + :show-overflow-tooltip="true" + align="center" + > + </el-table-column> + <el-table-column + prop="province" + label="使用门槛" + :show-overflow-tooltip="true" + align="center" + > + </el-table-column> + <el-table-column + prop="date" + label="生效时间" + :show-overflow-tooltip="true" + align="center" + > + </el-table-column> + + <el-table-column + prop="date" + label="失效时间" + :show-overflow-tooltip="true" + align="center" + > + </el-table-column> + <el-table-column label="操作" width="150" align="center"> + <template slot-scope="scope"> + <el-button type="text" size="small" @click="modify(scope.row, '1')" + >修改</el-button + > + <el-button type="text" size="small">删除</el-button> + <el-button type="text" size="small" @click="modify(scope.row, '2')" + >详情</el-button + > + </template> + </el-table-column> + </el-table> + <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" + @pagination="getList" /> + <!-- 弹出框 --> + <dialogFile + :dialogVisible="dialogVisible" + :title="title" + @cancle="handleCancleDialog" + @onSubmit="handleSave" + :isEdit="isEdit" + ></dialogFile> + </div> +</template> + +<script> +import dialogFile from "./components/detailFile.vue"; +export default { + name: "orderform", + components: { dialogFile }, + data() { + return { + dialogVisible: false, + control: "0", + total: 5, + title: "添加优惠券", + queryParams: { + pageNum: 0, + pageSize: 10, + }, + value: "", + tableData: [ + { + date: "2016-05-02", + name: "王小虎", + province: "上海", + city: "普陀区", + address: "上海市普陀区金沙江路 1518 弄", + }, + { + date: "2016-05-04", + name: "王小虎", + province: "上海", + city: "普陀区", + address: "上海市普陀区金沙江路 1517 弄", + }, + { + date: "2016-05-01", + name: "王小虎", + province: "上海", + city: "普陀区", + address: "上海市普陀区金沙江路 1519 弄", + }, + { + date: "2016-05-03", + name: "王小虎", + province: "上海", + city: "普陀区", + address: "上海市普陀区金沙江路 1516 弄", + }, + ], + isEdit:true,//判断添加修改详情的保存按钮是否显示 + }; + }, + created() {}, + methods: { + // 页码切换 + getList() {}, + handleAdd() { + let that = this; + that.title = "添加优惠券"; + that.isEdit = true + that.dialogVisible = true; + }, + // 修改详情 + modify(sta, type) { + let that = this; + if (type == "1") { + that.title = "修改优惠券"; + that.isEdit = true + } else if (type == "2") { + that.title = "查看优惠券"; + that.isEdit = false + } + that.dialogVisible = true; + }, + //保存 + handleSave(e){ + console.log('表单值',e) + }, + // 其他 弹窗关闭 + handleCancleDialog() { + this.dialogVisible = false; + }, + }, +}; +</script>