qimall/addons/Rebate/backend/views/virtual-order/add.php

<!-- 引一个当前组件 -->
<?php
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-image');
?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;">
        <el-form ref="formData" :model="formData" label-width="120px">
            <template>
                <el-form-item label="选择用户" prop="title">
                    <el-button type="primary" plain size="small" @click="selectUserClick" v-if="selectUserTableData.length === 0">选择</el-button>
                    <el-table :data="selectUserTableData" border v-else style="width: 50%">
                        <el-table-column prop="id" label="ID"></el-table-column>
                        <el-table-column prop="name" label="姓名">
                            <template slot-scope="scope">
                                <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="scope.row.avatar_url ? scope.row.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                                <div>{{scope.row.nickname}}<br/>{{scope.row.mobile}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" size="small" @click="delSelectUser">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </template>
            <el-form-item label="选择活动" prop="title">
                  <el-button type="primary" plain size="small" @click="selectRebateClick" v-if="selectRebateTableData.length === 0">选择</el-button>
                <el-table :data="selectRebateTableData" border v-else style="width: 50%">
                    <el-table-column prop="id" label="ID"></el-table-column>
                    <el-table-column prop="title" label="活动名称" min-width="60" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="delSelectRebate">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">保存</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-dialog title="选择用户" :visible.sync="selectUserVisible">
        <el-form ref="form" style="margin-bottom: 10px;" :model="userSearchInfo" label-width="96px" size="mini">
            <el-row :gutter="24">
                <el-col :span="9" style="padding-left: 0;" class="top_form">
                    <el-form-item label="会员ID">
                        <el-input v-model="userSearchInfo.user_id" placeholder="请输入会员ID" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="关键字">
                        <el-input v-model="userSearchInfo.nickname_or_mobile" placeholder="会员昵称/手机号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button @click="searchUserList" class="search_button all_button" size="small" type="primary">搜索</el-button>
                    <el-button type="danger" size="small" @click="resetUserSearch" v-if="show_clear_search_btn">清除条件</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="userList.list" border style="width: 100%" >
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="姓名">
                <template slot-scope="scope">
                    <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="scope.row.avatar_url ? scope.row.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                    <div>{{scope.row.nickname}}<br/>{{scope.row.mobile}}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="selectUser(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="check_pagination flex">
            <el-pagination @current-change="userPagination" background layout="prev, pager, next"
                           :page-count="userList.page_count" :current-page="userList.page"></el-pagination>
        </div>
    </el-dialog>

    <el-dialog title="选择活动" :visible.sync="selectRebateVisible">
        <el-form :inline="true" :model="rebateSearchForm" size="small" class="demo-form-inline">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="活动名称">
                        <el-input placeholder="请输入活动名称" v-model="rebateSearchForm.title" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="类型">
                        <el-select v-model="rebateSearchForm.reward_type" placeholder="类型" clearable>
                            <el-option v-for="(name,index) in reward_type_arr" :label="name" :value="index" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="状态">
                        <el-select v-model="rebateSearchForm.status" placeholder="请选择状态" clearable>
                            <el-option v-for="(item,index) in status_arr" :label="item" :value="index" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col>
                    <el-form-item>
                        <el-button type="primary" @click="rebateSearch">搜索</el-button>
                        <el-button type="danger" @click="resetRebateSearch" v-if="show_rebate_clear_search_btn">清除条件</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="rebateList.list" stripe size="small">
            <el-table-column prop="id" min-width="30" label="序号" align="center"></el-table-column>
            <el-table-column prop="title" label="活动名称" min-width="60" align="center"></el-table-column>
            <el-table-column label="活动时间" min-width="150" align="center">
                <template slot-scope="scope">
                    {{ scope.row.start_date}} 至 {{ scope.row.end_date }}
                </template>
            </el-table-column>
            <el-table-column prop="reward_type" label="类型" align="center">
                <template slot-scope="scope">
                    {{ reward_type_arr[scope.row.reward_type] }}
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.status == 0">停用中</el-tag>
                    <el-tag type="success" v-else-if="scope.row.start_at < now_time && scope.row.end_at > now_time">进行中</el-tag>
                    <el-tag v-else-if="scope.row.start_at > now_time">未开始</el-tag>
                    <el-tag type="info" v-else>已过期</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="参与人数" min-width="50" align="center">
                <template slot-scope="scope">
                    {{ scope.row.statistics ? scope.row.statistics.join_num : 0 }}
                </template>
            </el-table-column>

            <el-table-column label="成交金额" min-width="50" align="center">
                <template slot-scope="scope">
                    {{ scope.row.statistics ? scope.row.statistics.pay_money : 0 }}
                </template>
            </el-table-column>

            <el-table-column label="订单数" min-width="50" align="center">
                <template slot-scope="scope">
                    {{ scope.row.statistics ? scope.row.statistics.pay_num : 0 }}
                </template>
            </el-table-column>

            <el-table-column prop="created_at" label="创建时间" min-width="70" align="center">
                <template slot-scope="scope">
                    {{ scope.row.created_at | dateTimeFormat('Y-m-d H:i') }}
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="selectRebate(scope.row)">选择</el-button>
                </template>

            </el-table-column>
        </el-table>
        <div class="check_pagination flex">
            <el-pagination @current-change="rebatePagination" background layout="prev, pager, next"
                           :page-count="rebateList.page_count" :current-page="rebateList.page"></el-pagination>
        </div>
    </el-dialog>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: null,
                formData: {
                    user_id: 0,
                    rebate_id: 0
                },
                selectUserVisible: false,
                selectRebateVisible: false,
                userList: {},
                selectUserTableData: [],
                userListPage: 1,
                rebateListPage: 1,
                userSearchInfo: {
                    user_id: '',
                    nickname_or_mobile: ''
                },
                rebateList: {},
                selectRebateTableData: [],
                reward_type_arr: {
                    1: '条件奖励',
                    2: '阶梯奖励',
                },
                status_arr: {
                    0: '全部',
                    1: '进行中',
                    2: '已过期',
                    3: '停用',
                    4: '未开始',
                },
                rebateSearchForm: {
                    title: '',
                    reward_type: undefined,
                    status: undefined
                },
                now_time: 0,
            }
        },
        created(){
        },
        methods: {
            getUserList() {
                request({
                    params: {
                        // page: this.page,
                        search: JSON.stringify(this.userSearchInfo),
                        r: 'mall/user/index',
                        page: this.userListPage
                    },
                    method: 'get',
                }).then(res => {
                    console.info(res);
                    if(res.data.code == 0){
                        this.userList = res.data.data.user_list
                        console.log(this.userList)
                    }
                })
            },
            selectUserClick() {
                this.selectUserVisible = true
                this.getUserList()
            },
            selectUser(row) {
                this.selectUserTableData.push(row)
                this.formData.user_id = row.id
                this.selectUserVisible = false
            },
            userPagination(currentPage) {
                this.userListPage = currentPage;
                this.getUserList()
            },
            resetUserSearch() {
                this.userListPage = 1;
                this.userSearchInfo.user_id = ''
                this.userSearchInfo.nickname_or_mobile = ''
                this.getUserList()
            },
            searchUserList() {
                this.userListPage = 1;
                this.getUserList()
            },
            delSelectUser() {
                this.selectUserTableData.splice(0, 1)
                this.formData.user_id = 0
            },
            getRebateList() {
                const basic_params = {
                    page: this.rebateListPage,
                    limit: 10
                }
                request({
                    params: {
                        r: 'rebate/index/index',
                    },
                    method: 'post',
                    data: Object.assign(basic_params, this.rebateSearchForm)
                }).then(res => {
                    console.info(res);
                    if(res.data.code == 0){
                        this.rebateList = res.data.data
                        this.now_time = res.data.data.now_time
                    }
                })
            },
            rebatePagination(currentPage) {
                this.rebateListPage = currentPage;
                this.getRebateList()
            },
            selectRebateClick() {
                this.selectRebateVisible = true
                this.getRebateList()
            },
            selectRebate(row) {
                this.selectRebateTableData.push(row)
                this.formData.rebate_id = row.id
                this.selectRebateVisible = false
            },
            delSelectRebate() {
                this.selectRebateTableData.splice(0, 1)
                this.formData.rebate_id = 0
            },
            resetRebateSearch() {
                this.rebateListPage = 1
                this.rebateSearchForm.title = ''
                this.rebateSearchForm.reward_type = undefined
                this.rebateSearchForm.status = undefined
                this.getRebateList()
            },
            rebateSearch() {
                this.userListPage = 1
                this.getRebateList()
            },
            submitForm() {
                if (isEmpty(this.formData.user_id)) {
                    this.$message.error('请选择用户！')
                    return
                }

                if (isEmpty(this.formData.rebate_id)) {
                    this.$message.error('请选择活动！')
                    return
                }

                request({
                    params: {
                        r: 'rebate/virtual-order/add',
                    },
                    data: this.formData,
                    method: 'post'
                }).then(res => {
                    if(res.data.code == 0){
                        this.$message.success("保存成功");
                        navigateTo({
                            r: "rebate/virtual-order/index"
                        })
                    }else {
                        this.$message.error(res.data.msg)
                    }
                })
            }
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.userSearchInfo.user_id) || !isEmpty(this.userSearchInfo.nickname_or_mobile)
            },
            show_rebate_clear_search_btn: function() {
                return !isEmpty(this.rebateSearchForm.title) || !isEmpty(this.rebateSearchForm.reward_type) || !isEmpty(this.rebateSearchForm.status)
            }
        },
    })


</script>


<style>
    .el-table_1_column_1  .cell{
        display: flex;
        align-items: center;
    }
</style>