陶杰
2025-01-09 cc1ee1fb090b8344faab02537dec80995cec93fe
pages/partner/list.vue
@@ -1,5 +1,39 @@
<template>
  <el-bus-crud ref="crud" v-bind="tableConfig"></el-bus-crud>
  <div>
    <el-bus-crud ref="crud" v-bind="tableConfig"></el-bus-crud>
    <el-dialog title="注册手机号修改" :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false"
      class="form-content">
      <el-form key="sms" ref="smsForm" size="medium" :model="smsForm" :rules="smsRules">
        <el-form-item prop="username">
          <div class="input-wrapper">
            <el-input v-model="smsForm.username" placeholder="请输入手机号"></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="smsCode">
          <div class="input-wrapper">
            <el-input v-model="smsForm.smsCode" placeholder="请输入短信验证码">
            </el-input>
            <el-bus-countdown-button send-type="login" :extra-body="{ userType: 'admin' }" :number="smsForm.username"
              type="text" class="sms-button"></el-bus-countdown-button>
          </div>
        </el-form-item>
        <el-form-item prop="code">
          <div class="input-wrapper">
            <el-input v-model="smsForm.code" placeholder="请输入图形验证码">
            </el-input>
            <img v-if="smsCaptchaCodeImageSrc" :src="smsCaptchaCodeImageSrc" alt="图形验证码"
              class="cursor-pointer w-auto h-45 object-contain" @click="getSmsCapacha" />
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="flex items-center justify-between">
        <div>
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
@@ -7,6 +41,18 @@
export default {
  data() {
    return {
      dialogVisible: false,
      smsForm: {},
      smsCaptchaCodeImageSrc: "",
      smsRules: {
        username: { required: true, message: '请输入手机号', trigger: 'blur' },
        smsCode: {
          required: true,
          message: '请输入短信验证码',
          trigger: 'blur',
        },
        code: { required: true, message: '请输入图形验证码', trigger: 'blur' },
      },
      tableConfig: {
        url: 'flower/api/partner/page',
        hasNew: false,
@@ -24,6 +70,18 @@
          fixed: 'right',
        },
        columns: [
          {
            label: 'ID',
            prop: 'id',
            minWidth: 60,
            fixed: 'left',
          },
          {
            label: '注册手机号',
            prop: 'loginName',
            minWidth: 150,
            fixed: 'left',
          },
          { label: '合伙人名称', prop: 'name', minWidth: 120, fixed: 'left' },
          {
            label: '服务地区',
@@ -63,10 +121,17 @@
            type: 'row',
            items: [
              {
                label: '注册手机号',
                id: 'loginName',
                type: 'input',
              },
              {
                label: '合伙人名称',
                id: 'name',
                type: 'input',
              },
              {
                label: '手机号',
                id: 'tel',
@@ -102,9 +167,10 @@
                },
              },
              {
                label: '启动/禁用',
                label: '启用/禁用',
                id: 'isEnabled',
                type: 'bus-select-dict',
                default: '1',
                el: {
                  code: 'USER_ENABLED_OR_DISABLED',
                  clearable: true,
@@ -115,13 +181,23 @@
          },
        ],
        form: [
          { label: '合伙人名称:', id: 'name', type: 'input', readonly: true },
          { label: '合伙人名称:', id: 'name', type: 'input',
            rules: { required: true, message: '请输入合伙人名称:' },
           },
           {
            label: '联系方式:',id: 'contactTel',type: 'input',
            rules: [{ required: true, message: '请输入有效的联系方式' ,pattern: /^1[3-9]\d{9}$/},
            ],
          },
          { label: '城市仓名称', id: 'cityWarehouse', type: 'input' ,
            rules: { required: true, message: '请输入城市仓名称' },
          },
          {
            label: '服务地区:',
            id: 'district',
            type: 'bus-cascader',
            el: {
              otherInterfaceUri: 'flower/api/pub/china/area/json',
              otherInterfaceUri: 'flower/api/pub/china/web/area/json',
              props: {
                label: 'name',
                value: 'code',
@@ -139,32 +215,29 @@
              if ('province' in row) {
                return row.province
                  ? row.province
                      .split(',')
                      .map((item, index) => [
                        item,
                        row.city.split(',')[index],
                        row.region.split(',')[index],
                      ])
                    .split(',')
                    .map((item, index) => [
                      item,
                      row.city.split(',')[index],
                      row.region.split(',')[index],
                    ])
                  : []
              }
            },
            outputFormat: (val) => {
              return Array.isArray(val) && val.length > 0
                ? {
                    province: val.map((item) => item[0]).join(','),
                    city: val.map((item) => item[1]).join(','),
                    region: val.map((item) => item[2]).join(','),
                  }
                  province: val.map((item) => item[0]).join(','),
                  city: val.map((item) => item[1]).join(','),
                  region: val.map((item) => item[2]).join(','),
                }
                : { province: '', city: '', region: '' }
            },
            str: true,
            rules: { required: true, message: '请选择服务地区' },
          },
          {
            label: '联系方式:',
            id: 'contactTel',
            type: 'input',
            readonly: true,
          { label: '地址', id: 'address', type: 'input' ,
            rules: { required: true, message: '请输入地址' },
          },
          {
            label: '身份证正反面:',
@@ -175,7 +248,20 @@
            },
            commonFormat: true,
            forceDisabled: true,
            readonly: true,
            readonly: false,
            rules:[
            { required: true, message: '请上传身份证正反面' },
            {
              validator: (rule, value, callback) => {
                if (!value || value.length < 2) {
                  callback(new Error('请至少上传两张图片'));
                } else {
                  callback();
                }
              },
              trigger: 'change',
            },
            ],
          },
          {
            label: '状态:',
@@ -230,6 +316,16 @@
              }
            },
          },
          {
            text: '注册手机号修改',
            atClick: (row) => {
              this.smsForm={}
              this.smsForm.id=row.id
              this.getSmsCapacha()
              this.dialogVisible = true
              return false
            },
          },
        ],
        extraDialogs: [
          {
@@ -252,6 +348,7 @@
              }
            },
          },
        ],
      },
    }
@@ -262,6 +359,31 @@
    }
  },
  methods: {
    onCancel() {
      this.$refs.smsForm.resetFields(); // 重置表单
      this.dialogVisible = false
    },
    async onConfirm() {
      const param=this.smsForm
      const { code, data } = await this.$elBusHttp.request(
        'flower/api/partner/phone/update',
        {
          method: 'post',
          data:param,
        }
      )
      if (code === 0) {
        this.$message.success(`更新成功`)
        this.$refs.crud.getList()
        this.onCancel()
      }
    },
    async getSmsCapacha() {
      const { captchaCodeId, imageSrc } =
        await this.$services.base.createCaptcha()
      this.smsForm.codeId = captchaCodeId
      this.smsCaptchaCodeImageSrc = imageSrc
    },
    getDistrict(row) {
      if (row.province) {
        return row.province
@@ -293,10 +415,20 @@
            this.$refs.crud.getList()
          }
        })
        .catch(() => {})
        .catch(() => { })
    },
  },
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.input-wrapper {
  display: flex;
  align-items: center;
  // border-bottom: 1px solid #cecece;
  &:hover {
    border-color: $primary-color;
  }
}
</style>