qimall/backend/modules/mall/views/user/add.php

<?php defined('YII_ENV') or exit('Access Denied'); ?>
<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
?>
<style>
    .form-body {
        background-color: #fff;
        padding: 20px 68% 20px 0;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }

    .tip {
        margin-left: 10px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        color: #ff4544;
        background-color: #FEF0F0;
        padding: 0 20px;
        border-radius: 5px;
    }
	.el-table th>.cell{
	    color: #333;
	    font-weight: bold;
	    font-size: 14px;
	}
    .el-dialog {
        border-radius:5px;
    }
    .el-dialog__header {
        background-color: #333;
        border-radius:5px 5px 0 0;
    }
    .el-dialog__title {
        color: #fff;
    }

    .search-form {
        padding: 30px 20px;
        background-color: #f4f7fb;
        display: flex;
    }
    .search-form .el-form-item {
        width: 60%;
        /* float: left; */
    }
    .claer {
        clear: both;
    }
    .el-dialog--center .el-dialog__body {
        padding: 15px 15px 20px;
    }
    .search-form .el-button {
        /* margin: 0 0 0 120px; */
        width: 100px;
    }
</style>
<section id="app" v-cloak>
    <el-card class="box-card" style="border:0" shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header" class="clearfix">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><span style="color: #409EFF;cursor: pointer"
                                          @click="$navigate({r:'mall/user/index'})">用户管理</span></el-breadcrumb-item>
                <el-breadcrumb-item>用户{{editTitle}}</el-breadcrumb-item>
            </el-breadcrumb>
            <span></span>
        </div>
        <div class="form-body">
            <el-form :model="form" label-width="100px" :rules="FormRules" ref="form" v-loading="listLoading">
                <el-form-item v-if="form.id" label="会员 ID" prop="id">
                    <el-input disabled size="small" v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户">
                    <com-image width="70px" height="70px" mode="aspectFill" :src="form.avatar? form.avatar:'resources/img/mall/default_avatar_url.png'" style="border-radius: 50%;"></com-image>
                </el-form-item>
                <el-form-item label="会员等级" prop="level">
                    <el-select size="small" v-model="form.level" placeholder="请选择会员等级" style="width: 100%;">
                        <el-option key="普通用户" label="普通用户" :value="0"></el-option>
                        <el-option
                                v-for="item in mall_members"
                                :key="item.name"
                                :label="item.name"
                                :value="item.level">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item  label="昵称" prop="nickname">
                    <el-input v-if="form.id" disabled size="small" v-model="form.nickname" autocomplete="off"></el-input>
                    <el-input v-if="!form.id"  size="small" v-model="form.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="真实姓名" prop="username">
                    <el-input v-if="form.id" disabled size="small" v-model="form.username" autocomplete="off"></el-input>
                    <el-input v-if="!form.id"  size="small" v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="上级推荐人" prop="parent_id">
                    <div class="parent_left" style="width: 70%;float: left;">
                        <com-image width="40px" height="40px" mode="aspectFill" :src="form.parent_avatar_url? form.parent_avatar_url:'resources/img/mall/default_avatar_url.png'" style="float: left;border-radius: 50%;"></com-image>
                        <div style="float:left;line-height:22px;margin-left: 15px">{{form.parent_name}}<br />ID：{{form.parent_id}}</div>
                    </div>

                    <div class="parent_right" style="width: 30%;float: right;">
                        <el-button type="primary" size="small" @click="showDialog" style="float: right;">修改上级推荐人</el-button>
                    </div>
                </el-form-item>



                <el-form-item  label="手机号" prop="mobile">
                    <el-input size="small" v-model="form.mobile" placeholder="请输入手机号" ></el-input>
                    <span class="tip" style="margin-left: 0;">请谨慎修改手机号</span>
                </el-form-item>

                </el-form-item>

                <el-form-item v-if="form.id" label="注册时间">
                    <div>{{form.created_at}}</div>
                </el-form-item>
            </el-form>
        </div>
        <el-button class="button-item" :loading="btnLoading" type="primary" @click="onSubmit">提交</el-button>
    </el-card>
	
	<el-dialog
      :close-on-click-modal="false"
      class = "user-dialog"
	  title="选择上级推荐人"
	  :visible.sync="dialogVisible"
	  width="40%"
	  center>

        <el-form class="search-form" v-model="searchForm" label-width="100px">

            <el-input size="small" style="width: 180px;margin-right: 20px;" v-model="searchForm.inviter_id" placeholder="请输入会员ID"></el-input>
            <el-input size="small" style="width: 180px;" v-model="searchForm.keyword" placeholder="请输入手机号"></el-input>

            <div style="flex: 1;text-align: center;">
                <el-tooltip class="item" effect="dark" content="没有推广资格的用户，搜索不出来" placement="top">
                <el-button type="primary" size="small" @click="searchFun">查 询</el-button>
            </div>
            </el-tooltip>
            <div class="claer"></div>
        </el-form>

	  <el-table border v-loading="listLoading2" :data="list" style="margin-top: 24px;"
	            @selection-change="selectionChange">
	      <el-table-column width="100px" label="ID" props="id" align="center">
	          <template slot-scope="props">
	              <el-radio-group v-model="radioSelection" @change="selectionChange(props.row)">
	                  <el-radio :label="props.row.id"></el-radio>
	              </el-radio-group>
	          </template>
	      </el-table-column>
          <el-table-column label="头像">
              <template slot-scope="props">
                  <div><com-image width="40px" height="40px" mode="aspectFill" :src="props.row.avatar_url? props.row.avatar_url:'/resources/img/common/default-avatar.png'" style="border-radius: 50%;"></com-image></div>
              </template>
          </el-table-column>
	      <el-table-column label="昵称">
	          <template slot-scope="props">
				  <div>{{props.row.nickname}}</div>
	          </template>
	      </el-table-column>
          <el-table-column label="手机">
              <template slot-scope="props">
                  <div>{{props.row.mobile}}</div>
              </template>
          </el-table-column>
          <el-table-column label="会员等级">
              <template slot-scope="props">
                  <div>{{props.row.level_name}}</div>
              </template>
          </el-table-column>
          <el-table-column label="已绑定推荐人">
              <template slot-scope="props">
                  <div>{{props.row.parent_name}}</div>
              </template>
          </el-table-column>
	  </el-table>
	  
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="cancelSelect">取 消</el-button>
	    <el-button type="primary" @click="confirmSelectUser">确 认</el-button>
	  </span>
	</el-dialog>
	
</section>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            // 联合验证国内和香港手机号
            const validatePhoneNumber = (rule, value, callback) => {
                // 国内手机号正则：11位数字，以1开头，第二位为3-9
                const mainlandReg = /^1[3-9]\d{9}$/;
                // 香港手机号正则：8位数字
                const hongkongReg = /^(?:\+852|00852)?[1-9]\d{7}$/;

                if (!value) {
                    return callback(new Error('请输入联系电话'));
                }

                // 检查是否符合国内或香港手机号格式
                if (!mainlandReg.test(value) && !hongkongReg.test(value)) {
                    return callback(new Error('请输入正确的手机号（国内11位或香港8位数字）'));
                }

                callback();
            };
            return {
                form: {
                    share: {},
                    level: ''
                },
                searchForm: {
                    inviter_id: null,
                    nickname: null,
                    mobile: null,
                    keyword: '',
                },
                mall_members: [],
                keyword: '',
                listLoading: false,
                btnLoading: false,
                FormRules: {
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'change'},
                        {validator: validatePhoneNumber, trigger: ['blur', 'change'] }
                    ],
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: 'change'},
                    ],
                    level: [
                        {required: true, message: '请请选择会员等级', trigger: 'change'},
                    ],
                },
				autocompleteValue:'',
				dialogVisible:false,
				list:[],
				radioSelection:0,
				selectUser:null,
				listLoading2:false,
                editTitle : '添加',
            };
        },
        methods: {
            //搜索
            querySearchAsync(queryString, cb) {
                this.keyword = queryString;
                this.searchUser(cb);
            },
            inviterClick(row) {
				this.autocompleteValue ="修改为：" + row.nickname;
                this.form.parent_id = row.id;
            },
            searchUser(cb) {
                if (!this.searchForm.inviter_id && !this.searchForm.mobile && !this.searchForm.nickname && !this.searchForm.keyword){
                    this.$message.error('查询内容不能为空');
                        this.listLoading2 = false;
                        return false;
                }
				this.listLoading2 = true;

                request({
                    params: {
                        r: 'mall/user/get-can-bind-inviter',
                        inviter_id: this.searchForm.inviter_id,
                        mobile: this.searchForm.mobile,
                        nickname: this.searchForm.nickname,
                        keyword: this.searchForm.keyword,
                        user_id: this.form.id,
                    },
                }).then(e => {
					this.listLoading2 = false;
                    if (e.data.code === 0) {
						this.list = e.data.data.list.list;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
					this.listLoading2 = false;
                });
            },
            onSubmit() {
                if (this.btnLoading === true) return;
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let para = Object.assign({}, this.form);
                        request({
                            params: {
                                r: 'mall/user/add',
                            },
                            data: para,
                            method: 'post'
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code === 0) {
                                navigateTo({r: 'mall/user/index', page: getQuery('page')});
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        });
                    }
                });
            },
            //获取基础信息
            getAdd() {
                this.listLoading = true;
                request({
                    params: {
                        r: 'mall/user/add',
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        this.mall_members = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.listLoading = false;
                }).catch(e => {
                    this.listLoading = false;
                });
            },
			selectionChange(e){
				this.selectUser = e;
			},
			showDialog(){
				this.dialogVisible = true;
				this.radioSelection = 0;
			},
			confirmSelectUser(){
				this.dialogVisible = false;
				if(this.selectUser){
					this.form.parent_id = this.selectUser.id;
					this.form.parent_name = this.selectUser.nickname;
					this.form.parent_avatar_url = this.selectUser.avatar_url;
				}
			},
			cancelSelect(){
				this.selectUser = null;
				this.dialogVisible = false;
			},
			searchFun(){
				this.searchUser();
			}
        },
        computed: {
            cForm() {
                let form = {};
                let ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
                if (this.form) {
                    form = Object.assign(ruleForm, JSON.parse(JSON.stringify(this.form)));
                } else {
                    form = ruleForm;
                }
                if (getQuery('id')) {
                    form.id = getQuery('id')
                }
                return form;
            },
            cRule() {
                return this.rule ? Object.assign({}, this.rules, this.rule) : this.rules;
            },
            isConfineCount() {
                return this.ruleForm.confine_count === -1;
            },
        },
        mounted() {
            this.editTitle = '添加';
            this.getAdd();
        }
    })
</script>