|  |  |  | 
|---|
|  |  |  | <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> | 
|---|