用户领取优惠券详情页

src/views/coupon/couponInfo/index.vue

@@ -21,9 +21,11 @@
     </el-form>   
 
     <el-table v-loading="loading" :data="couponInfoList">     
-      <el-table-column label="用户名" align="center" prop="custName">       
+      <el-table-column label="用户名" align="center">       
         <template slot-scope="scope">
-          <a @click="handleUpdate(scope.row)" style="color: blue">{{ scope.row.custName }}</a>
+          <a  myattr="mcv" v-hasPermi="['system:customer:view']">
+            <span @click="getDetial(scope.row)" style="color: blue"> {{ scope.row.custName }}</span>
+          </a>
         </template>     
       </el-table-column>
       <el-table-column label="订单号" align="center" prop="orderNo" />
@@ -41,14 +43,54 @@
     </el-table>
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" />
+
+    <!-- 用户详情页 -->
+    <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
+      <div style="display: flex;align-items: center;">
+        <div>
+          <img v-bind:src="img" class="img-circle img-lg" />
+        </div>
+        <div style="margin-left: 20px;">
+          <div style="margin-bottom: 20px;">
+            <span>{{userName}}</span>
+          </div>
+          <div>
+            <span>{{phoneNumber}}</span>
+          </div>
+        </div>
+        <div style="margin-left: 50px;">
+          <div style="margin-bottom: 20px;">共{{orderCount}}单,消费{{amount}}元</div>
+          <div>地址</div>
+        </div> 
+      </div>
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="正常订单" name="first">
+          <order-table :orderList="orderList" :orderTotal="orderTotal" :orderLoading="orderLoading" @getOrderList="getOrderList"></order-table>      
+        </el-tab-pane>
+        <el-tab-pane label="取消订单" name="second">
+          <order-table :orderList="orderList" :orderTotal="orderTotal" :orderLoading="orderLoading" @getOrderList="getOrderList"></order-table> 
+        </el-tab-pane>
+        <el-tab-pane label="退款订单" name="third">
+         <order-table :orderList="orderList" :orderTotal="orderTotal" :orderLoading="orderLoading" @getOrderList="getOrderList"></order-table>
+        </el-tab-pane>
+      </el-tabs>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="cancel">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import {getCouponInfoList} from "@/api/coupon/coupon";
+import {getCustomer} from "@/api/system/customer";
+import OrderTable from "../../customer/orderTable.vue";
 export default {
+  components: { OrderTable },  
   data() { 
     return {
+      img:"/static/img/profile.473f5971.jpg",
       // 遮罩层
       loading: true,
       // 总条数
@@ -74,6 +116,17 @@ export default {
         value: '2',
         label: '未生效'
       }],
+      activeName:"first" ,
+      title: "",
+      userName:"",
+      phoneNumber:"",
+      orderCount:"",
+      amount:"",
+      orderLoading: true,
+      orderList:[],
+      orderTotal:0,
+      orderPageNum:1,
+      orderPageSize: 10,
     };
   },
   created() {
@@ -106,8 +159,46 @@ export default {
       this.queryParams.state=null;
       this.handleQuery();
     },
-
-
+    getDetial(row){
+      this.orderLoading=true;
+      this.customerId=row.id;
+      this.userName=row.custName;
+      this.phoneNumber=row.custPhone;
+      this.amount=row.amount;
+      this.orderCount=row.orderCount;
+      this.open=true;
+      this.title="用户信息";
+      this.orderPageNum=1;
+      this.pageSize=10;
+      this.activeName="first";
+      this.getOrderList(this.orderPageNum,this.pageSize,this.customerId,'1');
+    },
+    handleClick(){
+      if(this.activeName=="first"){
+        this.tag="1";
+      }else if(this.activeName=="second"){
+        this.tag="2";
+      }else if(this.activeName=="third"){
+        this.tag="3";
+      }
+      this.orderPageNum=1;
+      this.pageSize=10;
+      this.orderLoading=true;
+      this.getOrderList(this.orderPageNum,this.pageSize,this.customerId,this.tag);
+    },
+    getOrderList(pageNum,pageSize,id,tag) {
+      getCustomer({'id':id,'status':tag,'pageNum':pageNum,'pageSize':pageSize}).then((response) => {
+        if(response.code=="200"){
+          this.orderList = response.rows;
+          this.orderTotal = response.total;
+          this.orderLoading=false;
+        }        
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+    },
 
 
 

src/views/customer/index.vue

@@ -58,7 +58,7 @@
         />
       </el-col>
     </el-row>
-    <!-- 添加或修改人员配置对话框 -->
+    <!-- 用户详情页 -->
     <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
       <div style="display: flex;align-items: center;">
         <div>

src/views/customer/orderTable.vue

@@ -45,7 +45,7 @@ export default {
     }
   },
   methods: {
-    getProvince(city){
+    getProvince(province){
       let list=this.piovince;
       for(let i=0;i<list.length;i++){
         if(list[i].children.length>0){