jsowell-charger-web/jsowell-ui/src/views/member/memberGroup/detail.vue

<template>
    <div class="app-container">
        <el-row type="flex" justify="space-between">
            <!-- 左侧内容 -->
            <!-- <el-col :span="5">
                <div class="advContent" style="margin-bottom:10px">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>会员信息</span>
                        </div>
                        <div style="margin: 10px 0">
                        </div>
                    </el-card>
                </div>
            </el-col> -->
            <!-- 右侧内容 -->
            <!-- <el-col :span="19" style="margin-left: 18px;"> -->
            <el-col :span="24">
                <el-tabs type="border-card">
                    <!-- 客户 -->
                    <el-tab-pane label="客户">
                        <el-col>
                            <el-button type="primary" size="mini" icon="el-icon-plus"
                                @click="handleAddMember">添加会员</el-button>
                        </el-col>
                        <el-table :data="memberGroupList" stripe style="width: 100%" v-loading="loading">
                            <el-table-column label="会员id" align="center" prop="memberId" />
                            <el-table-column label="昵称" align="center" prop="nickName" />
                            <el-table-column label="状态" align="center" prop="status">
                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.member_status" :value="scope.row.status" />
                                </template>
                            </el-table-column>
                            <el-table-column label="头像" align="center" prop="avatarUrl">
                                <template slot-scope="scope">
                                    <el-image style="height: 50px;width: 50px"
                                        :src="scope.row.avatarUrl === null ? defaultImg[0].img : scope.row.avatarUrl"
                                        :preview-src-list='[scope.row.avatarUrl === null ? defaultImg[0].img : scope.row.avatarUrl]' />
                                </template>
                            </el-table-column>
                            <el-table-column label="手机号" align="center" prop="mobileNumber" />
                        </el-table>
                        <!--分页-->
                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize" @pagination="getMemberList" style="margin-bottom: 20px" />
                    </el-tab-pane>
                    <!-- 交易明细 -->
                    <el-tab-pane label="交易明细">
                        <el-table :data="details" stripe style="width: 100%" v-loading="loading">
                            <el-table-column label="订单编号" align="center" prop="orderCode" width="280px">
                                <template slot-scope="scope">
                                    <router-link :to="'/order/index/orderDetail/' + scope.row.orderCode" class="link-type">
                                        <span>{{ scope.row.orderCode }}</span>
                                    </router-link>
                                </template>
                            </el-table-column>
                            <el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe" />
                            <el-table-column label="会员昵称" align="center" prop="nickName" width="120px" />
                            <el-table-column label="电话号码" align="center" prop="mobileNumber" width="120px" />
                            <el-table-column label="站点" align="center" prop="stationName" />
                            <el-table-column label="充电桩枪口号" align="center" prop="pileConnectorCode" width="200px" />
                            <el-table-column label="微信商户订单号" align="center" prop="outTradeNo" width="165px" />
                            <el-table-column label="启动方式" align="center" prop="startMode" width="100px">
                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.start_mode" :value="scope.row.startMode" />
                                </template>
                            </el-table-column>
                            <el-table-column label="支付方式" align="center" prop="payMode">
                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.pay_mode" :value="scope.row.payMode" />
                                </template>
                            </el-table-column>
                            <el-table-column label="支付状态" align="center" prop="payStatus">
                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.pay_status" :value="scope.row.payStatus" />
                                </template>
                            </el-table-column>
                            <el-table-column label="支付金额" align="center" prop="payAmount" />
                            <el-table-column label="充电度数" align="center" prop="chargingDegree" width="100px" />
                            <el-table-column label="起始soc" align="center" prop="startSoc" />
                            <el-table-column label="终止soc" align="center" prop="endSoc" />
                            <el-table-column label="开始充电时间" align="center" prop="chargeStartTime" width="180" />
                            <el-table-column label="结束充电时间" align="center" prop="chargeEndTime" width="180" />
                            <el-table-column label="订单总金额" align="center" prop="orderAmount" width="100px" />
                        </el-table>
                        <!--分页-->
                        <pagination v-show="getTotal > 0" :total="getTotal" :page.sync="from.pageNum"
                            :limit.sync="from.pageSize" @pagination="getOrderList" style="margin-bottom: 20px" />
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <!--添加会员-->
        <el-dialog title="添加会员" :visible.sync="openAddMember" :before-close="cancel" width="500px" append-to-body>
            <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { queryOrderList, addMember, queryMemberList } from "@/api/member/memberGroup";
import {listOrder} from "@/api/order/order";
export default {
    name: 'JsowellUiDetail',
    dicts: ['member_status', 'start_mode', 'pay_mode', 'pay_status'],
    data() {
        return {
            // 遮罩
            loading: false,
            openAddMember: false,
            from: {
                pageNum: 1,
                pageSize: 10,
                groupCode: this.$route.params.groupCode,
                merchantId: null,
                stationId: null,
                groupLevel: null,
                groupType: null,
                discount: null,
                phoneNumber: null
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                groupCode: this.$route.params.groupCode,
                merchantId: null,
                stationId: null,
                groupLevel: null,
                groupType: null,
                discount: null,
                phoneNumber: null
            },
            total: 0,
            memberGroupList: [],
            getTotal: 0,
            details: []
        };
    },

    mounted() {
        console.log(this.$route.params.groupCode);
        this.getMemberList();
        this.getOrderList();
    },

    methods: {
        handleAddMember() {
            this.openAddMember = true
        },
        /** 添加会员按钮 */
        submitForm() {
            console.log(this.queryParams);
            var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!reg_tel.test(this.queryParams.phoneNumber)) {
                this.$modal.msgError("请正确填写您的手机号码！");
                this.queryParams.phoneNumber = ''
                return false;
            }
            addMember(this.queryParams).then(response => {
                console.log(response);
                this.$modal.msgSuccess("添加成功");
                this.openAddMember = false;
                this.queryParams.phoneNumber = '';
                this.getMemberList();
            });
        },
        cancel() {
            this.openAddMember = false;
            this.queryParams.phoneNumber = '';
        },
        getMemberList() {
            this.loading = true;
            console.log(this.queryParams);
            queryMemberList(this.queryParams).then(response => {
                console.log(response);
                this.memberGroupList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        getOrderList() {
            this.loading = true;
            listOrder(this.from).then((response) => {
                this.details = response.rows;
                console.log("this.from", this.from);
                console.log("response", response);
                this.getTotal = response.total;
                this.loading = false;
            });
        }
    },
};
</script>

<style lang="scss" scoped></style>