dev

src/components/member/memberProfile/FlowingWater.vue

@@ -1,14 +1,31 @@
 <template>
-  <div class="container">
+  <Mask :width="798" :height="540" :is-show="isFlowingWater" @close="isFlowingWater = false" title="流水记录"
-    <div class="body">
+        :show-footer="true">
-      <div class="body_info">
+    <template #default>
-        <span class="name">{{props.info.realName}}</span>
+      <div class="content">
-        <span>{{props.info.sex}}</span>
+        <div class="head">
-        <span class="phone">{{props.info.phone}}</span>
+          <img style="width: 60px;height: 60px"
-        <span>积分<span class="num">{{props.info.integralBalance}}</span></span>
+               :src="'/static/images/member/' + (props.info.sex === 1 ? 'man' : 'women') + '.png'"
+               alt="">
+          <div class="right">
+            <div class="name">
+              {{ props.info.name }}
             </div>
-      <div class="body_list">
+            <div class="text">
-        <el-table :data="tableData" style="width: 100%">
+              <div class="phone">
+                {{ props.info.phone }}
+              </div>
+              <div class="grant-name">
+                积分：
+                <img style="width: 16px;height: 16px" src="/static/images/member/1.png" alt="">
+                <span class="num">{{ props.info.integralBalance }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <el-table class="body_list" :data="tableData"
+                  style="border-radius: 8px;border: 1px solid #EAEAEC;border-bottom: none"
+                  :header-cell-style="{ backgroundColor: '#F1F5FB'}">
           <el-table-column prop="createTime" label="创建时间" width="180">
             <template #default="scope">
               {{ formatDate(scope.row.createTime) }}
@@ -20,7 +37,8 @@
           <el-table-column prop="remark" label="备注"/>
         </el-table>
       </div>
-    </div>
+    </template>
+    <template #footer>
       <div class="bottom">
         <el-pagination
             background
@@ -31,17 +49,23 @@
             @current-change="changePage"
         />
       </div>
-  </div>
     </template>
-
+  </Mask>
+</template>
 <script lang="ts" setup>
 import {ref, defineEmits, defineProps, onMounted} from 'vue'
-import CloseBtn from "@/components/CloseBtn.vue";
 import {post} from "@/utils/request.ts";
+import Mask from "@/components/common/Mask.vue";
+
+const isFlowingWater = defineModel()
 const props = defineProps({
   info: {
     type: Object,
     default: () => ({})
+  },
+  id: {
+    type: String || Number,
+    default: ""
   }
 })
 const currentPage = ref(1)
@@ -58,7 +82,7 @@ const changePage = (page:any) => {
   const query = {
     pageNum: page,
     pageSize: 20,
-    vipId: props.info.id
+    vipId: props.id
   }
   post('vip/integral/list', {query: query}).then((res: any) => {
     tableData.value.splice(0, tableData.length, ...res.list)
@@ -68,7 +92,7 @@ const init = () => {
   const query = {
     pageNum: 1,
     pageSize: 10,
-    vipId: props.info.id
+    vipId: props.id
   }
   post('vip/integral/list', {query: query}).then((res: any) => {
     tableData.value.splice(0, tableData.length, ...res.list)
@@ -82,51 +106,72 @@ const formatDate = (isoStr:any) => {
 }
 </script>
 <style scoped lang="scss">
-.container {
+.content {
-  position: relative;
+  padding-top: 24px;
-  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  min-height: 0;
-  .title {
-    height: 60px;
-    font-size: 20px;
 
-  }
+  .head {
-  .body {
+    height: 60px;
-    flex: 1;
-    .body_info{
-      height: 50px;
     display: flex;
-      font-size: 14px;
-      padding-left: 10px;
     align-items: center;
-      color: #bac2ca;
+    margin-bottom: 16px;
+    padding: 0 24px;
+
     .name {
-        font-size: 16px;
+      font-weight: bold;
-        margin-right: 10px;
+      font-size: 24px;
-        color: #121111;
+      color: #333333;
+      line-height: 33px;
+      text-align: left;
+      font-style: normal;
     }
-      .phone{
+
-        height: 15px;
+    .right {
-        margin: 0 17px;
-        line-height: 16px;
-      }
-      .num{
-        color: #df9b86;
-        margin-left: 10px;
-      }
-    }
-  }
-  .bottom {
-    position: absolute;
-    bottom: 0;
-    height: 60px;
       display: flex;
-    align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      margin-left: 16px;
+
+      .text {
+        margin-top: 4px;
+        display: flex;
+
+        .phone {
+          margin-right: 20px;
+        }
+
+        .grant-name {
+          display: flex;
+
+          .num {
+            font-weight: bold;
+            font-size: 24px;
+            color: #4D6DE4;
+            font-style: normal;
+            line-height: 16px;
+            margin-left: 6px;
           }
         }
 
+      }
+    }
+  }
+
+  .body_list {
+    width: 100%;
+    flex: 1;
+    background: #F9FAFC;
+    padding: 24px 24px 0;
+  }
+}
+
+.bottom {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 24px;
+}
 </style>

src/components/member/memberProfile/VipEdit.vue

@@ -405,6 +405,7 @@ const init = (_id: any) => {
       ruleForm.value = res
       ruleForm.value.area = JSON.parse(ruleForm.value.area)
       ruleForm.value.levelId = ruleForm.value.levelId == 0 ? null : ruleForm.value.levelId
+      ruleForm.value.certType=Number(ruleForm.value.certType)
       if (!res.levelId) return
       post("vip/vipLevel/get", {levelId: res.levelId}).then((res: any) => {
         levelName.value = res.name

src/views/member/index.vue

@@ -55,7 +55,7 @@
               <span class="btn" @click="openEdit(listItem.id)">编辑资料</span>
               <span class="btn" @click="openGrant()">发放积分</span>
               <span class="btn" @click="isExchange=true">兑换积分</span>
-              <span class="btn" @click="isFlowingWater=true">查看流水</span>
+              <span class="btn" @click="openFlowingWater">查看流水</span>
               <!--              <span class="btn" @click="openLevelEdit(listItem)">患者等级编辑</span>-->
             </div>
           </div>
@@ -157,9 +157,7 @@
   <VipLevelEdit ref="levelEditRef" @close="init"></VipLevelEdit>
   <Grant v-model="isGrant" :info="listItem" @close="closeGrant()"></Grant>
   <Exchange v-model="isExchange" :info="listItem" @close="closeExchange()"></Exchange>
-  <Mask :is-show="isFlowingWater" @close="isFlowingWater = false" title="流水记录">
+  <FlowingWater :id="flowingId" v-model="isFlowingWater" :info="listItem"></FlowingWater>
-    <FlowingWater :info="listItem"></FlowingWater>
-  </Mask>
   <OrderDetail ref="orderDetailRef" @updateOrderList="getChargeList(listItem.id)"></OrderDetail>
 </template>
 <script setup lang="ts">
@@ -304,7 +302,6 @@ const btn = (item: any, i: number) => {
 //点击发放
 const openGrant = () => {
   isGrant.value = true
-  console.log(listItem.value)
 }
 //消费时间
 const tableData = ref([])
@@ -380,7 +377,11 @@ const handleCurrentChange = (val: number) => {
 const levelEditRef = ref();
 const antysList = ref<any>(Object.entries(antys).map(([id, name]) => ({id, name})))
 const certTypeList = ref<any>(Object.entries(psnCertTypes).map(([id, name]) => ({id, name})))
-
+const flowingId = ref();
+const openFlowingWater=()=>{
+  isFlowingWater.value=true
+  flowingId.value=listItem.value.id
+}
 </script>
 <style scoped lang="scss">
 @use "@/assets/scss/base.scss";