品牌管理修改

src/views/modules/brand/config/index.vue

@@ -23,10 +23,15 @@
       账号信息
     </div>
     <div class="info-content">
-      <div class="info-item">管理员账号：</div>
+      <div class="info-item">
+        管理员账号：
+        <span @click="passwordUpdate(true)" class="brandInfo-update">修改</span>
+      </div>
       <div class="info-item">
         管理员密码:
-        <span @click="infoUpdate" class="brandInfo-update">修改</span>
+        <span @click="passwordUpdate(false)" class="brandInfo-update"
+          >修改</span
+        >
       </div>
     </div>
     <div class="brandInfo">
@@ -49,13 +54,16 @@
     </div>
     <!-- 编辑品牌信息 -->
     <addOrUpdate ref="addOrUpdate"></addOrUpdate>
+    <!-- 修改密码 -->
+    <changePassword ref="changePassword"></changePassword>
   </div>
 </template>
 
 <script>
+import changePassword from "./popup/change-password.vue";
 import addOrUpdate from "./popup/add-or-update.vue";
 export default {
-  components: { addOrUpdate },
+  components: { addOrUpdate, changePassword },
   data() {
     return {};
   },
@@ -66,6 +74,18 @@ export default {
       });
       console.log("123");
     },
+    passwordUpdate(state) {
+      console.log("123");
+      if (state) {
+        this.$nextTick(() => {
+          this.$refs.changePassword.toggle().add();
+        });
+      } else {
+        this.$nextTick(() => {
+          this.$refs.changePassword.toggle().update();
+        });
+      }
+    },
   },
 };
 </script>

src/views/modules/brand/config/popup/add-or-update.vue

@@ -26,8 +26,9 @@ export default {
         width: "60%",
       },
       modalData: {},
-      value1: [],
+      value1: "",
       ProductData: {},
+      fileList: [],
     };
   },
   methods: {
@@ -59,68 +60,185 @@ export default {
     modalCols() {
       return [
         {
-          label: "商品折扣（折）",
+          label: "品牌名称",
           prop: "discount",
           type: "Input",
           width: "300px",
-          rules: { required: true, message: "请输入打折数" },
+          rules: { required: true, message: "请输入品牌名称" },
-          type: "jsx",
-          render: () => {
-            return (
-              <div>
-                <el-input-number
-                  min={0}
-                  max={9.9}
-                  v-model={this.modalData.discount}
-                ></el-input-number>
-                <span> 提示： 请输入≤9.9数字 如:8折=售价*0.8</span>
-              </div>
-            );
-          },
         },
         {
-          label: "限制购买(数量)",
+          label: "品牌ID",
           prop: "limitCount",
           type: "Input",
           width: "300px",
-          rules: { required: true, message: "请输入价格" },
+          rules: { required: true, message: "请输入品牌ID" },
+        },
+        {
+          label: "品牌LOGO",
+          prop: "DiscountTi",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请上传品牌LOGO" },
           type: "jsx",
           render: () => {
+            const handleChange = (file, fileList) => {
+              // console.log(fileList);
+            };
+            const handleAvatarSuccess = (res, file, fileList) => {
+              console.log(res, fileList);
+            };
+            const handleRemove = (file, fileList) => {
+              console.log(file, fileList);
+            };
             return (
-              <div>
+              <el-upload
-                <el-input-number
+                class="upload-demo"
-                  min={1}
+                action={this.$api.mer_admin.uploadFile()}
-                  max={99}
+                {...{
-                  v-model={this.modalData.limitCount}
+                  props: {
-                  step={1}
+                    "on-change": handleChange,
-                  step-strictly
+                    "on-success": handleAvatarSuccess,
-                ></el-input-number>
+                    "on-remove": handleRemove,
-                <span> 提示： 请输入≤99数字 超出数量以原价购买</span>
+                  },
+                }}
+                headers={{
+                  token: "Bearer " + this.$cookie.get("token"),
+                }}
+                multiple={true}
+                file-list={this.fileList}
+                list-type="picture"
+              >
+                <el-button size="small" type="primary">
+                  <i class="el-icon-upload"></i>点击上传
+                </el-button>
+                <div class="el-upload__tip" slot="tip">
+                  只能上传jpg/png文件，且不超过500kb
                 </div>
+              </el-upload>
             );
           },
         },
         {
-          label: "活动时间",
+          label: "品牌首页：",
-          prop: "DiscountTime",
+          prop: "limitCoun",
           type: "Input",
           width: "300px",
-          rules: { required: true, message: "请输入活动时间" },
+          rules: { required: true, message: "请输入品牌ID" },
           type: "jsx",
           render: () => {
             return (
-              <el-date-picker
+              <el-switch
-                // format="yyyy-MM-dd HH:mm:ss"
+                v-model={this.value1}
-                value-format="yyyy-MM-dd HH:mm:ss"
+                active-text="开启"
-                v-model={this.modalData.DiscountTime}
+                inactive-text="禁用"
-                type="daterange"
+              ></el-switch>
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              ></el-date-picker>
             );
           },
         },
+        {
+          label: "宣传语",
+          prop: "limitCot",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请输入宣传语" },
+        },
+        {
+          label: "首页背景",
+          prop: "DiscountTime",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请上传背景图" },
+          type: "jsx",
+          render: () => {
+            const handleChange = (file, fileList) => {
+              // console.log(fileList);
+            };
+            const handleAvatarSuccess = (res, file, fileList) => {
+              console.log(res, fileList);
+            };
+            const handleRemove = (file, fileList) => {
+              console.log(file, fileList);
+            };
+            return (
+              <el-upload
+                class="upload-demo"
+                action={this.$api.mer_admin.uploadFile()}
+                {...{
+                  props: {
+                    "on-change": handleChange,
+                    "on-success": handleAvatarSuccess,
+                    "on-remove": handleRemove,
+                  },
+                }}
+                headers={{
+                  token: "Bearer " + this.$cookie.get("token"),
+                }}
+                multiple={true}
+                file-list={this.fileList}
+                list-type="picture"
+              >
+                <el-button size="small" type="primary">
+                  <i class="el-icon-upload"></i>点击上传
+                </el-button>
+                <div class="el-upload__tip" slot="tip">
+                  只能上传jpg/png文件，且不超过500kb
+                </div>
+              </el-upload>
+            );
+          },
+        },
+        {
+          label: "视频",
+          prop: "DiscountTim",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请上传视频" },
+          type: "jsx",
+          render: () => {
+            const handleChange = (file, fileList) => {
+              // console.log(fileList);
+            };
+            const handleAvatarSuccess = (res, file, fileList) => {
+              console.log(res, fileList);
+            };
+            const handleRemove = (file, fileList) => {
+              console.log(file, fileList);
+            };
+            return (
+              <el-upload
+                class="upload-demo"
+                action={this.$api.mer_admin.uploadFile()}
+                {...{
+                  props: {
+                    "on-change": handleChange,
+                    "on-success": handleAvatarSuccess,
+                    "on-remove": handleRemove,
+                  },
+                }}
+                headers={{
+                  token: "Bearer " + this.$cookie.get("token"),
+                }}
+                multiple={true}
+                file-list={this.fileList}
+                list-type="picture"
+              >
+                <el-button size="small" type="primary">
+                  <i class="el-icon-upload"></i>点击上传
+                </el-button>
+                <div class="el-upload__tip" slot="tip">
+                  只能上传jpg/png文件，且不超过500kb
+                </div>
+              </el-upload>
+            );
+          },
+        },
+        {
+          label: "联系电话（仅用户可见）",
+          prop: "limit",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请输入联系电话" },
+        },
       ];
     },
     modalHandles() {

src/views/modules/brand/config/popup/change-password.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalCols="modalCols"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+import { Divider } from "element-ui";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "修改密码",
+        show: false,
+        width: "60%",
+      },
+      modalData: {},
+      value1: "",
+      ProductData: {},
+      fileList: [],
+      isAdd: "",
+    };
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e));
+      }
+      return {
+        add: () => {
+          this.$nextTick(() => {
+            this.modalData = {};
+          });
+          this.isAdd = true;
+        },
+        update: () => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {},
+  },
+  computed: {
+    modalCols() {
+      if (this.isAdd) {
+        return [
+          {
+            label: "密码",
+            prop: "discount",
+            type: "Input",
+            width: "300px",
+            rules: { required: true, message: "请输入旧密码" },
+          },
+          {
+            label: "管理员账号",
+            prop: "discoun",
+            type: "Input",
+            width: "300px",
+            rules: { required: true, message: "请输入管理员账号" },
+            type: "jsx",
+            render: () => {
+              return (
+              <div>
+                <div>
+                  <el-input style="width:200px;margin-right:20px;margin-bottom:20px" placeholder="请输入管理员账号"></el-input>
+                  <el-button type="primary">获取验证码</el-button>
+                </div>
+                <div>
+                  <el-input style="width:300px" placeholder="请输入验证码"></el-input>
+                </div>
+                </div>
+              );
+            },
+          },
+        ];
+      } else {
+        return [
+          {
+            label: "旧密码",
+            prop: "discount",
+            type: "Input",
+            width: "300px",
+            rules: { required: true, message: "请输入旧密码" },
+          },
+          {
+            label: "新密码",
+            prop: "limitCount",
+            type: "Input",
+            width: "300px",
+            rules: { required: true, message: "请输入新密码" },
+          },
+          {
+            label: "确认新密码",
+            prop: "limitCot",
+            type: "Input",
+            width: "300px",
+            rules: { required: true, message: "请输入新密码" },
+          },
+        ];
+      }
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认",
+          type: "primary",
+          loading: this.isLoading,
+          submit: true,
+          handle: () => {},
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>