修改验证码

src/api/modules/mer_admin.js

@@ -178,4 +178,16 @@ export const mer_admin = {
   changePassword: (data) => {
     return $http.put(`/merchant-api/brand/admin_password`, data);
   },
+  //修改管理员
+  editAdmin: (data) => {
+    return $http.put(`/merchant-api/brand/change/administrator`, data);
+  },
+  //获取验证码
+  getCaptcha: (data) => {
+    return $http.request({
+      method: "get",
+      url: `/merchant-api/brand/sms_code`,
+      params: data,
+    });
+  },
 };

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

@@ -35,7 +35,7 @@
         </div>
       </div>
       <div class="info-item">
-        品牌首页: {{ list.homepageStatus == 0 ? "禁用" : "启用" }}
+        品牌首页: {{ list.homepageStatus == 1 ? "启用" : "禁用" }}
       </div>
       <div class="info-item">宣传语: {{ list.tagline }}</div>
       <div class="info-item" style="display: flex">
@@ -43,8 +43,8 @@
         <div v-if="list.video" style="margin-left: 20px">
           <video
             id="videoPlayer"
-            width="300px"
-            height="200px"
+            width="200px"
+            height="100px"
             object-fit="fill"
             muted="muted"
             loop
@@ -61,8 +61,8 @@
     </div>
     <div class="info-content">
       <div class="info-item">
-        管理员账号：{{ list.administrator.substr(0, 3) }}****{{
-          list.administrator.substr(7)
+        管理员账号：{{ list.administrator?.substr(0, 3) }}****{{
+          list.administrator?.substr(7)
         }}
         <span @click="passwordUpdate(true)" class="brandInfo-update">修改</span>
       </div>
@@ -88,20 +88,23 @@
     <div class="info-content">
       <div class="info-item">
         品牌分销推广:
-        <span @click="infoUpdate" class="brandInfo-update">配置</span>
+        <span @click="getConfig" class="brandInfo-update">配置</span>
       </div>
     </div>
     <!-- 编辑品牌信息 -->
     <addOrUpdate @getList="getList" ref="addOrUpdate"></addOrUpdate>
     <!-- 修改密码 -->
     <changePassword ref="changePassword"></changePassword>
+    <!-- 配置 -->
+    <toConfigure @getList="getList" ref="toConfigure"></toConfigure>
   </div>
 </template>
 <script>
+import toConfigure from "./popup/to-configure.vue";
 import changePassword from "./popup/change-password.vue";
 import addOrUpdate from "./popup/add-or-update.vue";
 export default {
-  components: { addOrUpdate, changePassword },
+  components: { addOrUpdate, changePassword, toConfigure },
   data() {
     return {
       list: [],
@@ -124,22 +127,12 @@ 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();
-        });
-      }
+      this.$refs.changePassword.init(state);
     },
-    pause() {
-      console.log("暂停播放");
-    },
-    ended() {
-      console.log("播放结束");
+    getConfig() {
+      this.$nextTick(() => {
+        this.$refs.toConfigure.init(this.list);
+      });
     },
   },
 };

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

@@ -143,7 +143,7 @@ export default {
               <el-switch
                 active-value="1"
                 inactive-value="0"
-                v-model={this.modalData.status}
+                v-model={this.modalData.homepageStatus}
                 active-text="开启"
                 inactive-text="禁用"
               ></el-switch>

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

@@ -1,175 +1,158 @@
 <template>
-  <div>
-    <obj-modal
-      ref="modal"
-      labelWidth="150px"
-      :modalCols="modalCols"
-      :modalConfig="modalConfig"
-      :modalData="modalData"
-      :modalHandles="modalHandles"
+  <el-dialog
+    :title="isAdd ? '修改管理员账号' : '修改密码'"
+    :visible.sync="dialogFormVisible"
   >
-    </obj-modal>
+    <el-form ref="ruleForm" :model="form" :rules="rules">
+      <el-form-item
+        label="密码："
+        prop="password"
+        :label-width="formLabelWidth"
+      >
+        <el-input
+          style="width: 240px"
+          type="password"
+          placeholder="请输入密码"
+          v-model="form.password"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="管理员账号"
+        :label-width="formLabelWidth"
+        prop="mobile"
+      >
+        <el-input
+          placeholder="请输入账号"
+          style="width: 240px; margin-right: 20px"
+          v-model="form.mobile"
+        ></el-input
+        ><el-button @click="getCode" v-if="this.isCode" type="primary"
+          >获取验证码</el-button
+        >
+        <el-button v-else :disabled="totalTime < 60" type="primary">{{
+          this.content
+        }}</el-button>
+      </el-form-item>
+      <el-form-item prop="code" label="验证码:" :label-width="formLabelWidth">
+        <el-input
+          style="width: 240px"
+          placeholder="请输入验证码"
+          v-model="form.code"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click="determine">确 定</el-button>
     </div>
+  </el-dialog>
 </template>
+
 <script>
-import { debounce, cloneDeep } from "lodash";
-import { Divider } from "element-ui";
 export default {
-  components: {},
   data() {
     return {
+      dialogFormVisible: false,
       isAdd: true,
-      //表格属性
-      modalConfig: {
-        title: "修改密码",
-        show: false,
-        width: "60%",
-      },
-      modalData: {},
-      value1: "",
-      ProductData: {},
-      fileList: [],
-      isAdd: "",
+      formLabelWidth: "120px",
+      form: {},
       totalTime: 60,
       content: "获取验证码",
+      isCode: true,
+      rules: {
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+        mobile: [
+          {
+            required: true,
+            message: "请输入手机号",
+            trigger: "blur",
+          },
+          {
+            validator: function (rule, value, callback) {
+              if (/^1[3456789]\d{9}$/.test(value) == false) {
+                callback(new Error("请输入正确的手机号"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        code: [
+          {
+            required: true,
+            min: 6,
+            max: 6,
+            message: "请输入正确的验证码",
+            trigger: "blur",
+          },
+        ],
+      },
     };
   },
+  watch: {
+    addDialogVisible(newVal, oldVal) {
+      if (!newVal) {
+        this.$refs.ruleForm.resetFields();
+      }
+    },
+  },
   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 = {};
-          });
+    init(row) {
+      if (row) {
         this.isAdd = true;
-        },
-        update: () => {
-          this.isAdd = false;
-        },
+        this.form = {
+          mobile: "",
+          code: "",
+          password: "",
         };
+      }
+      this.dialogFormVisible = true;
     },
-    init(row) {},
+    getCode() {
+      console.log("发送验证码");
+      if (this.form.mobile && this.form.mobile.length == 11) {
+        this.$api.mer_admin
+          .getCaptcha({
+            mobile: this.form.mobile,
+            password: this.form.password,
+          })
+          .then((res) => {
+            console.log(res);
+          });
+        this.isCode = false;
+        this.countDown();
+      } else {
+        this.$message.error("请输入正确的手机号");
+      }
     },
-  computed: {
-    modalCols() {
-      if (this.isAdd) {
-        return [
-          {
-            label: "密码",
-            prop: "password",
-            type: "Input",
-            width: "300px",
-            rules: { required: true, message: "请输入密码" },
-          },
-          {
-            label: "管理员账号",
-            prop: "discoun",
-            type: "Input",
-            width: "300px",
-            rules: { required: true, message: "请输入管理员账号" },
-            type: "jsx",
-            render: () => {
-              let getCode = () => {
+    countDown() {
       console.log("123");
       if (this.totalTime == 0) {
         this.content = "获取验证码";
         this.totalTime = 60;
+        this.isCode = true;
         return;
       }
       this.content = this.totalTime + "秒后重新获取";
       this.totalTime--;
-                setTimeout(getCode, 1000);
-              };
-              return (
-                <div>
-                  <div>
-                    <el-input
-                      style="width:200px;margin-right:20px;margin-bottom:20px"
-                      placeholder="请输入管理员账号"
-                    ></el-input>
-                    <el-button
-                      disabled={this.totalTime < 60}
-                      onclick={getCode}
-                      type="primary"
-                    >
-                      {this.content}
-                    </el-button>
-                  </div>
-                  <div>
-                    <el-input
-                      v-model={this.modalData.mobile}
-                      style="width:300px"
-                      placeholder="请输入验证码"
-                    ></el-input>
-                  </div>
-                </div>
-              );
+      setTimeout(this.countDown, 1000);
     },
-          },
-        ];
-      } 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: () => {
-            if (this.isAdd) {
-              console.log(this.modalData);
-            } else {
-              this.$api.mer_admin.changePassword(this.modalData).then((res) => {
+    determine() {
+      this.$refs.ruleForm.validate((valid) => {
+        console.log(valid);
+
+        if (valid) {
+          this.$api.mer_admin.editAdmin(this.form).then((res) => {
             console.log(res);
           });
         }
+      });
     },
   },
-      ];
-    },
-  },
-  asyncComputed: {},
 };
 </script>
+
 <style lang="scss" scoped>
 </style>

src/views/modules/brand/config/popup/to-configure.vue

@@ -1,13 +1,158 @@
 <template>
-  <div>配置</div>
+  <el-dialog title="品牌分销推广" :visible.sync="dialogFormVisible">
+    <el-form ref="ruleForm" :model="form" :rules="rules">
+      <div class="brandInfo">
+        <span class="pattern"></span>
+        推广营销工具
+      </div>
+      <div style="font-size: 14px; margin-bottom: 20px">
+        <i
+          class="el-icon-warning-outline"
+          style="width: 1em; height: 1em; margin-right: 4px"
+        ></i>
+        分销推广功能开启后，平台的分销商有机会优先选择本品牌进行推广，推广成功分销商可获得佣金；品牌方可根据实际情况，对推广本品牌的分销商佣金比例进行调整；品牌分销和商铺分销不叠加同享，且优先按品牌分销佣金比例进行分销商分佣。
+      </div>
+      <el-form-item label="状态：" :label-width="formLabelWidth">
+        <el-switch
+          :active-value="1"
+          :inactive-value="0"
+          v-model="form.status"
+          active-text="开启"
+          inactive-text="禁用"
+        ></el-switch>
+        <div style="font-size: 14px">
+          请勿频繁切换；已产生的关系&订单不受影响
+        </div>
+      </el-form-item>
+      <div class="brandInfo">
+        <span class="pattern"></span>
+        推广佣金配置
+      </div>
+      <div style="font-size: 14px; margin-bottom: 20px">
+        <i
+          class="el-icon-warning-outline"
+          style="width: 1em; height: 1em; margin-right: 4px"
+        ></i>
+        配置推广成功分销商可获得的订单佣金奖励比例（订单实付金额）；品牌分销订单无上级分佣。
+      </div>
+      <el-form-item
+        label="订单佣金比例 (单位：%)"
+        :label-width="formLabelWidth"
+        prop="sharingRatio"
+      >
+        <el-select
+          :disabled="form.status != 1"
+          v-model="form.sharingRatio"
+          filterable
+          placeholder="请选择"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="item in proportion"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <div class="brandInfo">
+        <span class="pattern"></span>
+        品牌分销商招募令配置
+      </div>
+      <div style="font-size: 14px; margin-bottom: 20px">
+        <i
+          class="el-icon-warning-outline"
+          style="width: 1em; height: 1em; margin-right: 4px"
+        ></i>
+        此配置将展示在店铺页，吸引用户申请分销商并为店铺进行宣传推广。长度限制在100字内。
+      </div>
+      <el-form-item
+        prop="promotionWords"
+        label="推广文案:"
+        :label-width="formLabelWidth"
+      >
+        <el-input
+          :disabled="form.status != 1"
+          style="width: 80%"
+          type="textarea"
+          :rows="5"
+          placeholder="请输入内容"
+          maxlength="100"
+          show-word-limit
+          v-model="form.promotionWords"
+        >
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click="determine">确 定</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      dialogFormVisible: false,
+      formLabelWidth: "200px",
+      form: {},
+      proportion: [],
+      rules: {
+        sharingRatio: [
+          { required: true, message: "请选择佣金比例", trigger: "change" },
+        ],
+        promotionWords: [
+          { required: true, message: "请输入推广文案", trigger: "blur" },
+          { max: 100, message: "长度100个字符内", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    init(row) {
+      this.form = JSON.parse(JSON.stringify(row));
+      console.log(this.form);
+      this.proportion = [];
+      for (let i = row.minSharingRate; i <= row.maxSharingRate; i++) {
+        this.proportion.push(i);
+      }
+      console.log(this.proportion);
 
-}
+      this.dialogFormVisible = true;
+    },
+    determine() {
+      if (this.form.status == 0) {
+        this.$api.mer_admin.editBrandInfo(this.form).then((res) => {
+          this.dialogFormVisible = false;
+          this.$emit("getList");
+        });
+      } else {
+        this.$refs.ruleForm.validate((valid) => {
+          if (valid) {
+            this.$api.mer_admin.editBrandInfo(this.form).then((res) => {
+              this.dialogFormVisible = false;
+              this.$emit("getList");
+            });
+          }
+        });
+      }
+    },
+  },
+};
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.brandInfo {
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: 700;
+}
+.pattern {
+  display: inline-block;
+  width: 8px;
+  height: 16px;
+  background: rgba(28, 146, 152, 1);
+}
 </style>