qimall/addons/MembersCard/backend/views/components/stock-edit.php

<template id="stock-edit">
    <el-dialog :visible.sync="edit.visible" width="30%" title="添加亲友卡" center>
        <el-form @submit.native.prevent size="small" label-width="100px">
            <el-form-item label="用户昵称"  required>
                <el-autocomplete size="small" v-model="edit.nickname" value-key="nickname" @keyup.enter.native="keyUp"
                                 :fetch-suggestions="querySearchAsync" placeholder="请输入用户昵称/id/手机号"
                                 @select="shareClick"></el-autocomplete>
            </el-form-item>
        </el-form>

        <el-form @submit.native.prevent size="small" label-width="100px">
            <el-form-item label="选择亲友卡"  required>
                <el-autocomplete size="small" v-model="edit.name" value-key="name" @keyup.enter.native="keyUp"
                                 :fetch-suggestions="querySearchAsync1" placeholder="请输入亲友卡名称"
                                 @select="shareClick1"></el-autocomplete>
            </el-form-item>
        </el-form>


        <el-form @submit.native.prevent size="small" label-width="100px">
            <el-form-item label="有效期" required style="width: 50%;">
                <el-input placeholder="请输入有效期" v-model="edit.expired_days" onInput="value=toNumber(value,0)">
                        <template slot="append">天</template>
                    </el-input>
            </el-form-item>
        </el-form>


        <span slot="footer" class="dialog-footer">
            <el-button @click="editCancel" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="edit.btnLoading" style="margin-bottom: 10px;" size="small"
                       @click="editSave">保存</el-button>
        </span>
    </el-dialog>
</template>
<script>
    Vue.component('stock-edit', {
        template: '#stock-edit',
        props: {
            value: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                edit: {
                    visible: false,
                    keyword: '',
                    keyword1: '',
                    nickname: '',
                    id: '',
                    user_id:"",
                    btnLoading: false,
                    name:'',
                    card_give_id:0,
                    expired_days:0,
                },
                level_list: [],
                level: '',
				
				listLoading:false,
				list:[],
				page:1,
				pageCount:0,
				radioSelection:0,
				keyword:'',
                keyword1: '',
				selectUser:null
            }
        },
        watch: {
            value() {
				//console.log(113)
				this.radioSelection=0;
				this.keyword='';
                this.keyword1 = '';
				this.selectUser=null;
				
                if (this.value) {
					//console.log(115)
                    this.edit.visible = true;
					this.getUser();
                    this.getCard();
                } else {
                    this.edit.id = '';
                    this.edit.nickname = '';
                    this.edit.keyword = '';
                    this.edit.keyword1 = '';
                    this.edit.name = '';
                    this.edit.card_give_id = '';
                    this.edit.expired_days = 0;
                    this.edit.visible = false;
                }
            }
            ,
            'edit.visible'() {
                if (!this.edit.visible) {
                    this.editCancel();
                }
            },
			keyword(val){//监听用户昵称的输入框 如果为空（选择后删除了用户）则重新请求用户的数据 改为实时请求
				/* if(val == ''){
					this.page = 1;
					this.pageCount = 0;
					this.getUser();
				} */
				this.page = 1;
				this.pageCount = 0;
				this.getUser();
			},
            keyword1(val){//监听用户昵称的输入框 如果为空（选择后删除了用户）则重新请求用户的数据 改为实时请求
                /* if(val == ''){
                    this.page = 1;
                    this.pageCount = 0;
                    this.getUser();
                } */
                this.page = 1;
                this.pageCount = 0;
                this.getCard();
            },
        },
        created() {

            //this.getLevelList();//获取等级列表
			
        },
        methods: {
			getUser(){//请求用户的列表
				//console.log('请求了getUser!page='+this.page+'----keyword='+this.keyword)
				this.listLoading = true;
				request({
				    params: {
                        r: 'members-card/default/search-user',
						page:this.page,
						limit:20,
						keyword:this.keyword
				    },
				    method: 'get',
				}).then(response => {
					this.listLoading = false;
				    //console.log('请求用户的列表结果='+JSON.stringify(response))
				    if (response.data.code == 0) {
				       this.list = response.data.data.list;
					   this.pageCount = response.data.data.page_count;
				    } else {
				        this.$message.error(response.data.msg);
				    }
				}).catch(response => {
				   this.listLoading = false;
				});
				
			},
            getCard(){//请求用户的列表
                //console.log('请求了getUser!page='+this.page+'----keyword='+this.keyword)
                this.listLoading = true;
                request({
                    params: {
                        r: 'members-card/default/search-card',
                        page:this.page,
                        limit:20,
                        keyword:this.keyword
                    },
                    method: 'get',
                }).then(response => {
                    this.listLoading = false;
                    //console.log('请求用户的列表结果='+JSON.stringify(response))
                    if (response.data.code == 0) {
                       this.list = response.data.data.list;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                   this.listLoading = false;
                });
                
            },
			pagination(currentPage) {
			    this.page = currentPage;
			    this.getUser();
			},
			selectionChange(e){
				//console.log('选中了='+JSON.stringify(e))
				this.selectUser = e;
				// this.keyword = this.selectUser.nickname;
                // 修改为查询ID，昵称存在空的情况
				this.keyword = this.selectUser.id;
			},
            querySearchAsync(queryString, cb) {
                this.edit.keyword = queryString;
                this.get_user(cb);
            },
            querySearchAsync1(queryString, cb) {
                this.edit.keyword1 = queryString;
                this.get_user1(cb);
            },
            get_user(cb) {
                request({
                    params: {
                        r: 'members-card/default/search-user',
                        keyword: this.edit.keyword
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        cb(res.data.data.list)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            get_user1(cb) {
                request({
                    params: {
                        r: 'members-card/default/search-card',
                        keyword: this.edit.keyword1
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        cb(res.data.data.list)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            agentClick(row) {
                this.edit.id = row.id
            },
            shareClick(row) {
                this.edit.user_id = row.id
            },
            shareClick1(row) {
                console.log(row)
                this.edit.card_give_id = row.id
            },

            editCancel() {
				/* 重置表单中原来填入的数据 */
				this.level = '';
				this.selectUser = null;
				this.keyword = '';
				
                this.$emit('input', false);
               /* navigateTo({
                    r: 'plugin/cloud_stock/mall/cloud-stock-two/index',
                }) */
				//this.value = false;
            },
            editSave() {
				if(!this.edit.card_give_id){
					return this.$message.error('请选择亲友卡');
				}
				if(!this.edit.user_id){
					return this.$message.error('请选择下拉列表里的会员！');
				}
                if(!this.edit.expired_days){
                    return this.$message.error('请输入有效期！');
                }
                this.edit.btnLoading = true;
                request({
                    params: {
                        r: 'members-card/default/card-edit'//代理商添加//'plugin/stock/mall/stock/edit',
                    },
                    method: 'post',
                    data: {
						user_id:this.edit.user_id,
						card_give_id:this.edit.card_give_id,
                        expired_days:this.edit.expired_days,
                    }
                }).then(response => {
                    this.edit.btnLoading = false;
                    if (response.data.code == 0) {
                        this.$message.success('添加成功');
						this.$emit('savesuccess')
                        this.editCancel();
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.edit.btnLoading = false;
                });
            },
            keyUp() {
                console.log('key up')
            },
			searchFun(){
				this.page = 1;
				this.getUser();
			}
        }
    });
</script>