qimall/addons/Pk/backend/views/components/achievement-details.php

<?php

// Yii::$app->loadComponentView('com-dialog-select');
// Yii::$app->loadPluginComponentView('free-goods-choice');
?>

<template id="achievement-details">
    <el-dialog :visible.sync="edit.show" width="30%" center :title="edit_row.title"><!--:title="edit_row.title"   -->
        <div style="display: flex;justify-content: center;">
        		  <div style="display: flex;align-items: center;margin-bottom: 20px;">
        			  <div style="flex-shrink: 0;">客户名称：</div><el-input clearable @keyup.enter.native="toSearch" type="text" size="small" v-model = 'search.nickname' placeholder="请输入客户名称"></el-input>
        		  </div>
        		  <el-button size="small" type="primary" icon="el-icon-search" style="height: 32px;margin-left: 20px;" @click='toSearch'>搜索</el-button>
        </div>
        
        
        <el-table
        			v-if="edit_row.currentPerformanceType == 1"
        			v-loading="dialogLoading"
        			stripe
              :data="detailList"
              style="width: 100%"
        			size="small">
              <el-table-column
                type="index"
                label="序号"
                min-width="100"
        			  align="center">
              </el-table-column>
              <el-table-column
                prop="name"
                label="客户"
                min-width="120"
        			  >
        			  <template slot-scope="scope">
        			  	<div style="display: flex;align-items: center;">
        			  		<el-image fit="cover" :src="scope.row.avatar_url" style="width: 40px;height: 40px;display: block;margin-right: 5px;flex-shrink: 0;"></el-image>
        			  		<div>
        			  			<div>{{scope.row.nickname}}</div>
        			  			<div>ID {{scope.row.user_id}}</div>
        			  		</div>
        			  	</div>
        			  </template>
              </el-table-column>
        			<el-table-column
        			  prop="created_at"
        			  label="邀请时间"
        			  min-width="80"
        			  align="center"
        			  >
        			</el-table-column>
        </el-table>
        
        <el-table
        			v-if="edit_row.currentPerformanceType == 2"
        		v-loading="dialogLoading"
        		stripe
              :data="detailList"
              style="width: 100%"
        		size="small">
              <el-table-column
                type="index"
                label="序号"
                min-width="100"
        		  align="center">
              </el-table-column>
              <el-table-column
                prop="name"
                label="客户"
                min-width="120">
        			  <template slot-scope="scope">
        			  	<div style="display: flex;align-items: center;">
        			  		<el-image fit="cover" :src="scope.row.avatar_url" style="width: 40px;height: 40px;display: block;margin-right: 5px;flex-shrink: 0;"></el-image>
        			  		<div>
        			  			<div>{{scope.row.nickname}}</div>
        			  			<div>ID {{scope.row.user_id}}</div>
        			  		</div>
        			  	</div>
        			  </template>
              </el-table-column>
              <el-table-column
                prop="money"
                label="消费金额(元)"
        			  min-width="80"
        			  align="center"
        			  >
              </el-table-column>
        			<el-table-column
        			  prop="created_at"
        			  label="邀请时间"
        			  min-width="80"
        			  align="center"
        			  >
        			</el-table-column>
        </el-table>
        
        <div flex="box:last cross:center" style="margin-top: 15px;"><!--  v-if="list.length > 0" -->
            <div></div>
            <div>
                <el-pagination
                       
                        style="display: inline-block;float: right;"
                        background 
                        @current-change="pageChange"
                        layout="prev, pager, next" 
        				:page-count="pageCount"
                        >
                </el-pagination>
            </div>
        </div>
    </el-dialog>
</template>
<script>
    Vue.component('achievement-details', {
        template: '#achievement-details',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            edit_row: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                edit: {
                    show: false,
                    id: '',
                    btnLoading: false,
                },
                ruleForm: {
					level: '',
					goods_id: 0,
					give_goods_num:0,
					give_goods_id:0,
                    name: '',
                    is_enable: 1,
                },
                level_list: [],
                goods: null,
				goods2: null,
				loading:false,
				pageCount:0,
				detailList:[],
				currentPerformanceType:1,
				dialogLoading:false,
				search:{
					page:1,
					nickname:'',
				}
            }
        },
        watch: {
            value() {
                if (this.value) {
					//this.getLevelList();
                    this.edit.show = true;
					//console.log('组件显示得到的参数=',this.edit_row)
					
					if(this.edit_row.currentPerformanceType == 1){
						this.getDetailList1()
					}else if(this.edit_row.currentPerformanceType == 2){
						this.getDetailList2()
					}
					
                   /* if (this.edit_row.id > 0) {
                        this.edit.id = this.edit_row.id;
                        this.loadData();
                    } else {
                        this.edit.id = 0;
                    } */
                } else {
                    this.edit.show = false;
                }
            },
            'edit.show'() {
                if (!this.edit.show) {
					/* this.edit_row.id = 0;
					this.ruleForm = {
						level: '',
						goods_id: 0,
						give_goods_num:'',
						give_goods_id:0,
					    name: '',
					    is_enable: 1,
					}
					this.goods = null,
					this.goods2 = null,
                    this.editCancel(); */
					this.editCancel();
                }
                if (this.edit.id) {
                }
            }
        },
        mounted() {
            //this.getLevelList();
            //   console.log(this.edit_row)
            //this.edit.id = this.edit_row.id;
        },
        methods: {
			pageChange(page){
				this.search.page = page;
				if(this.edit_row.currentPerformanceType == 1){
					this.getDetailList1()
				}else if(this.edit_row.currentPerformanceType == 2){
					this.getDetailList2()
				}
			},
			toSearch(){
				this.search.page = 1;
				if(this.edit_row.currentPerformanceType == 1){
					this.getDetailList1()
				}else if(this.edit_row.currentPerformanceType == 2){
					this.getDetailList2()
				}
			},
            onInput(e) {
                this.$forceUpdate();
            },
            agentClick(row) {
                this.edit.id = row.id
            },
            editCancel() {
                this.$emit('input', false);
            },
            keyUp() {
                //console.log('key up')
            },
			getDetailList1(){
				//console.log('请求拉新明细前的参数1='+this.edit_row.activity_id)
				//console.log('请求拉新明细前的参数2='+this.edit_row.user_id)
				let params = {
				    r: 'plugin/pk/mall/invite-log/get-list',//拉新明细
					activity_id:this.edit_row.activity_id,
					user_id:this.edit_row.user_id,
					limit:6
				};
				params = Object.assign(params, this.search);
				//console.log('请求详情列表前的params11='+JSON.stringify(params))
				this.dialogLoading=true;
				request({
				    params:params,
				    method: 'get',
				}).then(e => {
					//console.log('拉新明细11='+JSON.stringify(e))
				   this.dialogLoading=false;
				    if (e.data.code == 0) {
						this.detailList = e.data.data.list;
						this.pageCount = e.data.data.page_count;
				        /* this.list = e.data.data.list;
						this.pageCount = e.data.data.page_count; */
				    } else {
				        this.$message.error(e.data.msg);
				    }
				}).catch(e => {
				    this.dialogLoading=false;
				});
			},
			getDetailList2(){
				//console.log('请求业绩明细前的参数1='+this.edit_row.activity_id)
				//console.log('请求业绩明细前的参数2='+this.edit_row.user_id)
				let params = {
				    r: 'pk/personal/log-list',//战队队员业绩明细|个人活动队员业绩明细
					activity_id:this.edit_row.activity_id,
					user_id:this.edit_row.user_id,
					limit:6
				};
				params = Object.assign(params, this.search);
				//console.log('请求详情列表前的params22='+JSON.stringify(params))
				this.dialogLoading=true;
				request({
				    params:params,
				    method: 'get',
				}).then(e => {
					//console.log('业绩明细22='+JSON.stringify(e))
				   this.dialogLoading=false;
				    if (e.data.code == 0) {
						this.detailList = e.data.data.list;
						this.pageCount = e.data.data.page_count;
				        /* this.list = e.data.data.list;
						this.pageCount = e.data.data.page_count; */
				    } else {
				        this.$message.error(e.data.msg);
				    }
				}).catch(e => {
				    this.dialogLoading=false;
				});
			}
        }
    });
</script>