dev

src/components/member/memberProfile/FlowingWater.vue

@@ -1,17 +1,34 @@
 <template>
-  <div class="container">
-    <div class="body">
-      <div class="body_info">
-        <span class="name">{{props.info.realName}}</span>
-        <span>{{props.info.sex}}</span>
-        <span class="phone">{{props.info.phone}}</span>
-        <span>积分<span class="num">{{props.info.integralBalance}}</span></span>
-      </div>
-      <div class="body_list">
-        <el-table :data="tableData" style="width: 100%">
+  <Mask :width="798" :height="540" :is-show="isFlowingWater" @close="isFlowingWater = false" title="流水记录"
+        :show-footer="true">
+    <template #default>
+      <div class="content">
+        <div class="head">
+          <img style="width: 60px;height: 60px"
+               :src="'/static/images/member/' + (props.info.sex === 1 ? 'man' : 'women') + '.png'"
+               alt="">
+          <div class="right">
+            <div class="name">
+              {{ props.info.name }}
+            </div>
+            <div class="text">
+              <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)}}
+              {{ formatDate(scope.row.createTime) }}
             </template>
           </el-table-column>
           <el-table-column prop="beforeIntegral" label="变化前"/>
@@ -20,113 +37,141 @@
           <el-table-column prop="remark" label="备注"/>
         </el-table>
       </div>
-    </div>
-    <div class="bottom">
-      <el-pagination
-          background
-          layout="prev, pager, next"
-          :page-size="20"
-          :current-page="currentPage"
-          :total="total"
-          @current-change="changePage"
-      />
-    </div>
-  </div>
+    </template>
+    <template #footer>
+      <div class="bottom">
+        <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="20"
+            :current-page="currentPage"
+            :total="total"
+            @current-change="changePage"
+        />
+      </div>
+    </template>
+  </Mask>
 </template>
-
 <script lang="ts" setup>
-import {ref,defineEmits, defineProps, onMounted} from 'vue'
-import CloseBtn from "@/components/CloseBtn.vue";
+import {ref, defineEmits, defineProps, onMounted} from '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)
-const tableData:any = ref<any>([])
+const tableData: any = ref<any>([])
 const total = ref(0)
 const emit = defineEmits(['close'])
 const close = () => {
   emit('close')
 }
-onMounted(()=>{
+onMounted(() => {
   init()
 })
-const changePage = (page:any) => {
+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)
+  post('vip/integral/list', {query: query}).then((res: any) => {
+    tableData.value.splice(0, tableData.length, ...res.list)
   })
 }
 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)
+  post('vip/integral/list', {query: query}).then((res: any) => {
+    tableData.value.splice(0, tableData.length, ...res.list)
     total.value = res.total_count
   })
 }
 //修改时间格式化
-const formatDate = (isoStr:any) => {
+const formatDate = (isoStr: any) => {
   const date = new Date(isoStr);
-  return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
+  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
 }
 </script>
 <style scoped lang="scss">
-.container {
-  position: relative;
-  width: 100%;
+.content {
+  padding-top: 24px;
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  min-height: 0;
-  .title {
-    height: 60px;
-    font-size: 20px;
 
-  }
-  .body {
-    flex: 1;
-    .body_info{
-      height: 50px;
-      display: flex;
-      font-size: 14px;
-      padding-left: 10px;
-      align-items: center;
-      color: #bac2ca;
-      .name{
-        font-size: 16px;
-        margin-right: 10px;
-        color: #121111;
-      }
-      .phone{
-        height: 15px;
-        margin: 0 17px;
-        line-height: 16px;
-      }
-      .num{
-        color: #df9b86;
-        margin-left: 10px;
-      }
-    }
-  }
-  .bottom {
-    position: absolute;
-    bottom: 0;
+  .head {
     height: 60px;
     display: flex;
     align-items: center;
+    margin-bottom: 16px;
+    padding: 0 24px;
+
+    .name {
+      font-weight: bold;
+      font-size: 24px;
+      color: #333333;
+      line-height: 33px;
+      text-align: left;
+      font-style: normal;
+    }
+
+    .right {
+      display: flex;
+      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 :info="listItem"></FlowingWater>
-  </Mask>
+  <FlowingWater :id="flowingId" v-model="isFlowingWater" :info="listItem"></FlowingWater>
   <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";