1

admin

2026-01-06 089bf5d2378b3c4a61d795b2a92bede2c193b771

 src/views/modules/order/ctc-add-or-update.vue

New file
@@ -0,0 +1,439 @@
<template>
  <el-dialog
    :title="!id ? '添加支付方式模板' : '修改支付方式模板'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="120px"
    >
      <el-form-item label="支付方式类型" prop="id">
        <el-select
          v-model="arr.id"
          @change="changeVal(arr.id)"
          placeholder="请选择"
        >
          <el-option
            v-for="item in arr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式名称" prop="methodName">
        <el-input
          v-model="dataForm.methodName"
          placeholder="支付方式名称"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="id" label="登录人资金密码" prop="loginSafeword">
        <el-input
          v-model="dataForm.loginSafeword"
          type="password"
          placeholder="登录人资金密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="支付方式图片" prop="methodImg">
        <el-upload
          class="avatar-uploader"
          :action="$http.adornUrl('/api/uploadFile')"
          :headers="{ Authorization: $cookie.get('Authorization') }"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="" prop="">
        <div style="color: green">
          参数名1：
          配关键数据，如微信账号、支付宝账号、银行卡号、虚拟货币地址等等;
        </div>
      </el-form-item>
      <el-form-item label="参数名1(必填)" prop="paramName1">
        <el-input
          v-model="dataForm.paramName1"
          placeholder="参数名1"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名2(选填)" prop="paramName2">
        <el-input
          v-model="dataForm.paramName2"
          placeholder="参数名2"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名3(选填)" prop="paramName3">
        <el-input
          v-model="dataForm.paramName3"
          placeholder="参数名3"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名4(选填)" prop="paramName4">
        <el-input
          v-model="dataForm.paramName4"
          placeholder="参数名4"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名5(选填)" prop="paramName5">
        <el-input
          v-model="dataForm.paramName5"
          placeholder="参数名5"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名6(选填)" prop="paramName6">
        <el-input
          v-model="dataForm.paramName6"
          placeholder="参数名6"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名7(选填)" prop="paramName7">
        <el-input
          v-model="dataForm.paramName7"
          placeholder="参数名7"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名8(选填)" prop="paramName8">
        <el-input
          v-model="dataForm.paramName8"
          placeholder="参数名8"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名9(选填)" prop="paramName9">
        <el-input
          v-model="dataForm.paramName9"
          placeholder="参数名9"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名10(选填)" prop="paramName10">
        <el-input
          v-model="dataForm.paramName10"
          placeholder="参数名10"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名11(选填)" prop="paramName11">
        <el-input
          v-model="dataForm.paramName11"
          placeholder="参数名11"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名12(选填)" prop="paramName12">
        <el-input
          v-model="dataForm.paramName12"
          placeholder="参数名12"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名13(选填)" prop="paramName13">
        <el-input
          v-model="dataForm.paramName13"
          placeholder="参数名13"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名14(选填)" prop="paramName14">
        <el-input
          v-model="dataForm.paramName14"
          placeholder="参数名14"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数名15(选填)" prop="paramName15">
        <el-input
          v-model="dataForm.paramName15"
          placeholder="参数名15"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="loading" @click="dataFormSubmit()"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { isEmail, isMobile } from "@/utils/validate";
import { Debounce } from "@/utils/debounce";
import { encrypt } from "@/utils/crypto";
export default {
  data() {
    var validatePassword = (rule, value, callback) => {
      if (!this.dataForm.id && !/\S/.test(value)) {
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };
    var validateEmail = (rule, value, callback) => {
      if (!isEmail(value)) {
        callback(new Error("邮箱格式错误"));
      } else {
        callback();
      }
    };
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      roleList: {},
      id: "",
      loading: false,
      imageUrl: "",
      dataForm: {
        methodImg: "",
        methodName: "",
        paramName1: "",
        paramName2: "",
        paramName3: "",
        paramName4: "",
        paramName5: "",
        paramName6: "",
        paramName7: "",
        paramName8: "",
        paramName9: "",
        paramName10: "",
        paramName11: "",
        paramName12: "",
        paramName13: "",
        paramName14: "",
        paramName15: "",
        loginSafeword: "",
      },
      arr: [],
      dataRule: {
        paramName1: [
          { required: true, message: "参数1不能为空", trigger: "blur" },
          // { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        value1: [
          { required: true, message: "请选择支付方式", trigger: "blur" },
        ],
        loginSafeword: [
          { required: true, message: "资金密码不能为空", trigger: "blur" },
        ],
        // mobile: [
        //   { required: true, message: '手机号不能为空', trigger: 'blur' },
        //   { validator: validateMobile, trigger: 'blur' }
        // ]
      },
    };
  },
  created() {},
  methods: {
    init(row, id, arr) {
      this.resClear();
      this.arr = { ...arr };
      this.id = id;
      this.arr.id = row.methodType;
      this.dataForm = { ...row } || {};
      if (id == "") {
        console.log(id);
        this.arr.id = this.arr[0].id;
      }
      if (row) {
        this.dataForm.username = row.userName;
        this.imageUrl = row.methodImgUrl;
        // this.options.value1 = row.loginAuthority
        // this.optionsTwo.value2 = row.enabled
        // this.optionsThree.value3 = row.withdrawAuthority
        this.dataForm.remarks = row.remarks;
      } else {
        this.dataForm.username = "";
        this.imageUrl = "";
        this.dataForm.remarks = "";
      }
      this.visible = true;
      this.$nextTick(() => {
        //this.$refs.dataForm.resetFields()
      });
    },
    resClear() {
      this.dataForm = {
        methodImg: "",
        methodName: "",
        paramName1: "",
        paramName2: "",
        paramName3: "",
        paramName4: "",
        paramName5: "",
        paramName6: "",
        paramName7: "",
        paramName8: "",
        paramName9: "",
        paramName10: "",
        paramName11: "",
        paramName12: "",
        paramName13: "",
        paramName14: "",
        paramName15: "",
        loginSafeword: "",
      };
    },
    handleAvatarSuccess(res, file) {
      this.dataForm.methodImg = res.data.path;
      console.log(file);
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl);
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 10;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      // return isJPG && isLt2M;
      return isLt2M;
    },
    changeVal(val) {
      this.$forceUpdate();
    },
    // 表单提交
    dataFormSubmit: Debounce(function () {
      this.loading = true;
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.id) {
            this.$http({
              url: this.$http.adornUrl(`/paymentMethodConfig/update`), //修改
              method: "post",
              data: this.$http.adornData({
                id: this.id,
                methodImg: this.dataForm.methodImg,
                methodName: this.dataForm.methodName,
                methodType: this.arr.id,
                paramName1: this.dataForm.paramName1,
                paramName2: this.dataForm.paramName2,
                paramName3: this.dataForm.paramName3,
                paramName4: this.dataForm.paramName4,
                paramName5: this.dataForm.paramName5,
                paramName6: this.dataForm.paramName6,
                paramName7: this.dataForm.paramName7,
                paramName8: this.dataForm.paramName8,
                paramName9: this.dataForm.paramName9,
                paramName10: this.dataForm.paramName10,
                paramName11: this.dataForm.paramName11,
                paramName12: this.dataForm.paramName12,
                paramName13: this.dataForm.paramName13,
                paramName14: this.dataForm.paramName14,
                paramName15: this.dataForm.paramName15,
                loginSafeword: encrypt(this.dataForm.loginSafeword),
              }),
            }).then(({ data }) => {
              if (data.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.resClear();
                    this.visible = false;
                    this.$emit("refreshDataList");
                    this.loading = false;
                  },
                });
              } else {
                this.$message({
                  message: data.msg,
                  type: "error",
                });
                this.loading = false;
              }
            });
          } else {
            console.log(this.id);
            this.$http({
              url: this.$http.adornUrl(`/paymentMethodConfig/add`), //新增
              method: "post",
              data: this.$http.adornData({
                type: 2, // 1.银行卡  2.c2c
                methodImg: this.dataForm.methodImg,
                methodName: this.dataForm.methodName,
                methodType: this.arr.id,
                paramName1: this.dataForm.paramName1,
                paramName2: this.dataForm.paramName2,
                paramName3: this.dataForm.paramName3,
                paramName4: this.dataForm.paramName4,
                paramName5: this.dataForm.paramName5,
                paramName6: this.dataForm.paramName6,
                paramName7: this.dataForm.paramName7,
                paramName8: this.dataForm.paramName8,
                paramName9: this.dataForm.paramName9,
                paramName10: this.dataForm.paramName10,
                paramName11: this.dataForm.paramName11,
                paramName12: this.dataForm.paramName12,
                paramName13: this.dataForm.paramName13,
                paramName14: this.dataForm.paramName14,
                paramName15: this.dataForm.paramName15,
              }),
            }).then(({ data }) => {
              if (data.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.resClear();
                    this.visible = false;
                    this.$emit("refreshDataList");
                    this.loading = false;
                  },
                });
              } else {
                this.$message({
                  message: data.msg,
                  type: "error",
                });
                this.loading = false;
              }
            });
          }
        }
      });
    }),
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>