集团详情

jsowell-ui/src/router/index.js

@@ -198,7 +198,7 @@ export const constantRoutes = [
     hidden: true,
     children: [
       {
-        name: "memberDetail",
+        name: "memberGroup",
         path: "detail/:groupCode",
         component: () => import("@/views/member/memberGroup/detail"),
         meta: { title: "集团详情", activeMenu: "/member/memberGroup" },

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

@@ -2,7 +2,7 @@
     <div class="app-container">
         <el-row type="flex" justify="space-between">
             <!-- 左侧内容 -->
-            <el-col :span="5">
+            <!-- <el-col :span="5">
                 <div class="advContent" style="margin-bottom:10px">
                     <el-card class="box-card" shadow="hover">
                         <div slot="header" class="clearfix">
@@ -12,22 +12,81 @@
                         </div>
                     </el-card>
                 </div>
-            </el-col>
+            </el-col> -->
             <!-- 右侧内容 -->
-            <el-col :span="19" style="margin-left: 18px;">
+            <!-- <el-col :span="19" style="margin-left: 18px;"> -->
+            <el-col :span="24">
                 <el-tabs type="border-card">
+                <!-- 客户 -->
                     <el-tab-pane label="客户">
-                        <el-col :span="1.5">
+                        <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%">
+                            <el-table-column label="会员id" align="center" prop="memberId" />
+                            <el-table-column label="昵称" align="center" prop="nickName" />
+                            <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="getList" style="margin-bottom: 20px" />
+                    </el-tab-pane>
+                    <!-- 交易明细 -->
+                    <el-tab-pane label="交易明细">
+                        <el-table :data="details" stripe style="width: 100%">
+                            <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="getDetails" style="margin-bottom: 20px" />
                     </el-tab-pane>
-                    <el-tab-pane label="交易流水">交易流水</el-tab-pane>
                 </el-tabs>
             </el-col>
         </el-row>
         <!--添加会员-->
-        <el-dialog title="添加会员" :visible.sync="openAddMember" width="500px" append-to-body>
+        <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>
@@ -38,22 +97,46 @@
 </template>
 
 <script>
-import { queryOrderList, addMemberGroup, queryMemberList } from "@/api/member/memberGroup";
+import { queryOrderList, addMember, queryMemberList } from "@/api/member/memberGroup";
 export default {
     name: 'JsowellUiDetail',
 
     data() {
         return {
             openAddMember: false,
-            queryParams: {
+            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.getList();
+        this.getDetails();
     },
 
     methods: {
@@ -69,15 +152,32 @@ export default {
                 this.queryParams.phoneNumber = ''
                 return false;
             }
-            addMemberGroup(this.phoneNumber).then(response => {
+            addMember(this.queryParams).then(response => {
                 console.log(response);
                 this.$modal.msgSuccess("添加成功");
-                this.queryParams.openAddMember = true;
+                this.openAddMember = false;
+                this.getList();
             });
         },
         cancel() {
             this.openAddMember = false;
-            this.queryParams.phoneNumber = ''
+            this.queryParams.phoneNumber = '';
+        },
+        getList() {
+            console.log(this.queryParams);
+            queryMemberList(this.queryParams).then(response => {
+                console.log(response);
+                this.memberGroupList = response.rows;
+                this.total = response.total;
+            });
+        },
+        getDetails() {
+            console.log(this.from);
+            queryOrderList(this.from).then(response => {
+                console.log(response);
+                this.details = response.rows;
+                this.getTotal = response.total;
+            });
         }
     },
 };