用户框添加showMoney的key控制用户信息框中是否显示艾米豆信息

src/App.vue

@@ -73,7 +73,7 @@ export default {
       title: '',
       selectedRoute: [],
       routerDone: false,
-      isInnerPage: true,
+      isInnerPage: false,
       showFastLink: true,
       showSelected: false,
     };

src/api/base/customer.js

@@ -12,3 +12,8 @@ export const fetchUserBaseInfoByPhone = entity =>
     url: path + '/dcxy/customerInfo/baseCustomer',
     params: entity,
   });
+export const fetchUserAccount = entity =>
+  fetch({
+    url: path + '/dcxy/customerInfo/queryAccount',
+    params: entity,
+  });

src/components/UserCard/UserInfo.vue

@@ -61,6 +61,19 @@
       </div>
       <div class="UserInfo-Content-Col">注册时间：{{$formatDate(customerBaseInfo.createAt,'yyyy-MM-dd')}}</div>
       <div class="UserInfo-Content-Col UserInfo-CampusName">{{customerBaseInfo.areaName}}</div>
+      <div
+        class="UserInfo-Content-serviceBox"
+        v-if="showMoney"
+      >
+        <div
+          v-for="(item, index) in serviceList"
+          :key="index"
+          class="UserInfo-Content-serviceBox-item"
+        >
+          <div>{{getServiceName(item.serviceId)}}</div>
+          <div>{{item.money}}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -71,10 +84,6 @@ import UserBaseInfoMixin from '../../mixins/user/userBaseInfo.js';
 import getUserInfoLabelMixin from '@/mixins/user/getUserInfoLabel.js';
 
 export default {
-  props: {
-    customerId: Number,
-    customerPhone: String,
-  },
   mixins: [UserBaseInfoMixin, getUserInfoLabelMixin],
 };
 </script>
@@ -132,7 +141,7 @@ export default {
     }
   }
   .UserInfo-Content {
-    height: 90px;
+    // height: 90px;
     background-color: #fff;
     padding: 10px;
     .UserInfo-Content-Col {
@@ -156,6 +165,13 @@ export default {
       line-height: 1;
       margin-top: 0px;
     }
+    .UserInfo-Content-serviceBox {
+      line-height: 24px;
+      .UserInfo-Content-serviceBox-item {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
   }
 }
 @media screen and (min-width: $bigScreenWidth) {
@@ -187,7 +203,7 @@ export default {
       }
     }
     .UserInfo-Content {
-      height: 180px;
+      // height: 180px;
       padding: 20px;
       .UserInfo-Content-Col {
         line-height: 38px;

src/components/UserCard/UserWithContent.vue

@@ -5,6 +5,7 @@
         class="left-part"
         :customerId="customerId"
         :customerPhone="customerPhone"
+        :showMoney="showMoney"
         :visible="visible"
       />
       <div class="right-part">
@@ -39,6 +40,10 @@ export default {
       default: true,
     },
     customerPhone: String,
+    showMoney: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

src/config/index.js

@@ -72,6 +72,15 @@ export const operClassifyName4User = [
   { label: '新增', value: '05' },
 ];
 
+export const serviceMap = [
+  { label: '艾米', value: '0' },
+  { label: '通用', value: '1' },
+  { label: '洗衣', value: '2' },
+  { label: '饮水', value: '3' },
+  { label: '吹风', value: '4' },
+  { label: '洗浴', value: '5' },
+];
+
 export default {
   selectTypeMapping,
   customerStateOptions,

src/mixins/user/userBaseInfo.js

 import { mapActions, mapGetters } from 'vuex';
+import { fetchUserAccount } from '../../api/base/customer';
+import { serviceMap } from '@/config';
 
 export default {
   props: {
     visible: { type: Boolean, default: false },
     customerId: Number,
     customerPhone: String,
+    showMoney: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      serviceList: [],
+    };
   },
   watch: {
     visible(newVal) {
@@ -12,6 +23,7 @@ export default {
         this.fetchUserBaseInfo({
           customerId: this.customerId,
         });
+        this.getAllData();
       }
     },
     customerId(newId) {
@@ -19,6 +31,7 @@ export default {
         this.fetchUserBaseInfo({
           customerId: this.customerId,
         });
+        this.getAllData();
       }
     },
     customerPhone(newPhone) {
@@ -26,6 +39,7 @@ export default {
         this.fetchUserBaseInfoByPhone({
           customerPhone: this.customerPhone,
         });
+        this.getAllData();
       }
     },
   },
@@ -34,11 +48,13 @@ export default {
       this.fetchUserBaseInfo({
         customerId: this.customerId,
       });
+      this.getAllData();
     }
     if (this.visible && !this.customerId && this.customerPhone) {
       this.fetchUserBaseInfoByPhone({
         customerPhone: this.customerPhone,
       });
+      this.getAllData();
     }
   },
   computed: {
@@ -46,5 +62,24 @@ export default {
   },
   methods: {
     ...mapActions(['fetchUserBaseInfo', 'fetchUserBaseInfoByPhone']),
+    getAllData() {
+      console.log('in getAllData', this.showMoney);
+
+      if (this.showMoney) {
+        fetchUserAccount({
+          customerId: this.customerId,
+        })
+          .then(res => {
+            this.serviceList = res.data;
+          })
+          .catch(err => {
+            console.error(err);
+          });
+      }
+    },
+    getServiceName(id) {
+      let item = serviceMap.find(item => item.value === id);
+      return item ? item.label : id;
+    },
   },
 };