init

src/views/cai/user/index.vue

@@ -143,7 +143,7 @@
     />
 
     <user-add-update-dialog v-if="userAddUpdateDialogVisible" ref="userAddUpdateDialog" @refreshDataList="getList" />
-    <user-info-dialog v-if="userInfoDialogVisible" ref="userInfoDialog" @refreshDataList="getList" />
+    <user-info-dialog v-if="userInfoDialogVisible" ref="userInfoDialog" />
   </div>
 </template>
 

src/views/cai/user/user-info-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="技师信息" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
+  <el-dialog title="用户信息" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
     <el-collapse v-model="activeName" >
       <el-collapse-item title="基本信息" name="base">
         <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
@@ -13,7 +13,7 @@
             {{info.user.mobile}}
           </el-descriptions-item>
           <el-descriptions-item label="头像">
-            <image-preview :src="info.user.avatar" />
+            <image-avatar :src="info.user.avatar" />
           </el-descriptions-item>
           <el-descriptions-item label="性别">
             <cai-dict-tag :options="genderList" :value="info.user.gender" />

src/views/cai/vipOrder/index.vue

@@ -97,6 +97,8 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <vip-order-info v-if="vipOrderInfoVisible" ref="vipOrderInfo" />
   </div>
 </template>
 
@@ -111,13 +113,18 @@ import {
   platformTypeList,
   yesOrNoList
 } from '@/constant/statusMap'
+import VipOrderInfo from '@/views/cai/vipOrder/vip-order-info.vue'
 
 export default {
   name: "VipOrder",
+  components:{
+    VipOrderInfo
+  },
   data() {
     return {
       genderList,memberTypeList,yesOrNoList,memberStatusList,booleanList,platformTypeList,
       payStatusList,
+      vipOrderInfoVisible: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -171,7 +178,11 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-    handleInfo() {
+    handleInfo(row) {
+      this.vipOrderInfoVisible = true
+      this.$nextTick(() => {
+        this.$refs.vipOrderInfo.init(row.id)
+      })
     },
   }
 };

src/views/cai/vipOrder/vip-order-info.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-dialog title="VIP订单信息" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
+    <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
+      <el-descriptions-item label="蜜瓜号">
+        {{info.usercode}}
+      </el-descriptions-item>
+      <el-descriptions-item label="手机号">
+        {{info.mobile}}
+      </el-descriptions-item>
+      <el-descriptions-item label="头像">
+        <image-avatar :src="info.avatar" />
+      </el-descriptions-item>
+      <el-descriptions-item label="性别">
+        <cai-dict-tag :options="genderList" :value="info.gender" />
+      </el-descriptions-item>
+      <el-descriptions-item label="昵称">
+        {{info.nickname}}
+      </el-descriptions-item>
+      <el-descriptions-item label="VIP名称">
+        {{info.vipName}}
+      </el-descriptions-item>
+      <el-descriptions-item label="时长">
+        <el-tag v-if="info.vipLongs === 1" type="primary">永久会员</el-tag>
+        <span v-if="info.vipLongs === 0" >{{ info.vipExpire }}天</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="价格">
+        {{info.price}}
+      </el-descriptions-item>
+      <el-descriptions-item label="平台">
+        <cai-dict-tag :options="platformTypeList" :value="info.platformType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="状态">
+        <cai-dict-tag :options="payStatusList" :value="info.payStatus" />
+      </el-descriptions-item>
+      <el-descriptions-item label="操作时间">
+        {{info.createTime}}
+      </el-descriptions-item>
+      <el-descriptions-item label="后台新增">
+        <cai-dict-tag :options="booleanList" :value="info.admin" />
+      </el-descriptions-item>
+      <el-descriptions-item label="后台ID">
+        {{info.adminId}}
+      </el-descriptions-item>
+      <el-descriptions-item label="操作IP">
+        {{info.operateIp}}
+      </el-descriptions-item>
+      <el-descriptions-item label="appid">
+        {{info.appid}}
+      </el-descriptions-item>
+      <el-descriptions-item label="第三方回调数据">
+        {{info.returnContent}}
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<script>
+import {
+  booleanList,
+  genderList,
+  memberStatusList,
+  memberTypeList,
+  payStatusList,
+  platformTypeList,
+  yesOrNoList
+} from '@/constant/statusMap'
+import { getVipOrder } from '@/api/cai/vipOrder'
+
+export default {
+  name: "UserInfo",
+  data() {
+    return {
+      genderList,memberTypeList,yesOrNoList,memberStatusList,booleanList,platformTypeList,
+      payStatusList,
+      activeName:['base','account','userAlbums'],
+      CS: {
+        'text-align': 'center',  //文本居中
+        'min-width': '250px',   //最小宽度
+        'word-break': 'break-all'  //过长时自动换行
+      },
+      LS: {
+        // 'color': '#000',
+        'text-align': 'center',
+        // 'font-weight': '600',
+        'height': '40px',
+        // 'background-color': 'rgba(255, 97, 2, 0.1)',
+        'min-width': '110px',
+        'word-break': 'keep-all'
+      },
+      open:false,
+      info:{},
+    };
+  },
+  created() {
+
+  },
+  methods: {
+    init(id){
+      this.open = true;
+      getVipOrder(id).then(response => {
+        this.info = response.data;
+      });
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.el-row {
+  margin-bottom: -15px;
+  display: flex;
+  flex-wrap: wrap
+}
+
+/* .el-card {
+   min-width: 100%;
+   height: 80%;  // 高度要设置百分比才可以
+   margin-right: 20px;
+   transition: all .5s;
+ }*/
+</style>