| | |
| | | <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> |
| | |
| | | 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, |
| | |
| | | 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: '服务地区', |
| | |
| | | type: 'row', |
| | | items: [ |
| | | { |
| | | label: '注册手机号', |
| | | id: 'loginName', |
| | | type: 'input', |
| | | }, |
| | | |
| | | { |
| | | label: '合伙人名称', |
| | | id: 'name', |
| | | type: 'input', |
| | | }, |
| | | |
| | | { |
| | | label: '手机号', |
| | | id: 'tel', |
| | |
| | | label: '启用/禁用', |
| | | id: 'isEnabled', |
| | | type: 'bus-select-dict', |
| | | default: '1', |
| | | el: { |
| | | code: 'USER_ENABLED_OR_DISABLED', |
| | | clearable: true, |
| | |
| | | }, |
| | | ], |
| | | 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', |
| | |
| | | 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: '身份证正反面:', |
| | |
| | | }, |
| | | 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: '状态:', |
| | |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | text: '注册手机号修改', |
| | | atClick: (row) => { |
| | | this.smsForm={} |
| | | this.smsForm.id=row.id |
| | | this.getSmsCapacha() |
| | | this.dialogVisible = true |
| | | return false |
| | | }, |
| | | }, |
| | | ], |
| | | extraDialogs: [ |
| | | { |
| | |
| | | } |
| | | }, |
| | | }, |
| | | |
| | | ], |
| | | }, |
| | | } |
| | |
| | | } |
| | | }, |
| | | 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 |
| | |
| | | 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> |