cashier_app/pages/memberCenter/member/detail.vue

<template>
  <JeepayBackground :bgColorStyle="{}">

    <JeepayCustomNavbar textColor="#fff"
      bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="会员详情"
      backCtrl="back" />
    <JeepayTableListItem viewClass="list-item-by-detail" :logo="vdata.record.avatarUrl" :title="vdata.record.mbrName"
      :subtitle="vdata.record.mbrTel" :moreBtnList="list" :logoStyle="{ borderRadius: '50%' }" />

    <!-- 账户金额 -->
    <JeepayCard :viewStyle="{ marginTop: '50rpx' }">
      <view class="pay-wrapper">
        <view>
          <JeepayDescviewItem title="账户余额 (元)" />
          <view class="pay-amount">{{ (vdata.record.balance / 100).toFixed(2) }}</view>
        </view>
        <view class="pay-shift" @tap="toManual">调账
          <image src="/static/member/member-arrow.svg"></image>
        </view>
      </view>
    </JeepayCard>
    <JeepayCard viewStyle="margin-top: 50rpx" editText="编辑信息"
      @editTap="go.to('PAGES_MEMBER_EDIT', { mbrId: vdata.record.mbrId })">
      <JeepayDescview>
        <JeepayDescviewItem title="会员编号" :desc="vdata.record.mbrId" />
        <JeepayDescviewItem title="会员备注" :desc="vdata.record.remark ? vdata.record.remark : '-'" />
        <JeepayDescviewItem title="创建时间" :desc="vdata.record.createdAt" />
      </JeepayDescview>
    </JeepayCard>

    <JeepayCard viewStyle="margin-top: 40rpx">
      <JeepayTableListItem v-if="ent.has('ENT_MEMBER_EDIT')" title="会员状态" subtitle="状态禁用后，该会员将无法使用">
        <template #titleRight>
          <JeepayStateSwitch v-model:state="vdata.record.state" :showSwitchType="true"
            :updateStateFunc="updateStateFunc" />
        </template>
      </JeepayTableListItem>

    </JeepayCard>

    <JSinglePopup ref="single" :list="list" activeColor="#FF5B4C" />
    <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
  </JeepayBackground>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { reqLoad, API_URL_MEMBERS } from '@/http/apiManager.js'
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
import ent from '@/commons/utils/ent.js'

const single = ref()
const jeepayPopupConfirmRef = ref()

const list = reactive([
  { label: '调账', value: 'delete', fun: toManual },
])

onLoad((options) => {
  refData(options.mbrId)
})

const vdata = reactive({
  record: {}
})

// 监听 更新事件 
onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_DETAIL))
uni.$on(emit.ENAME_REF_MEMBER_DETAIL, function (data) {
  refData(vdata.record.mbrId)
})

function refData (mbrId) {
  reqLoad.getById(API_URL_MEMBERS, mbrId).then(({ bizData }) => {
    vdata.record = bizData
  })
}

function updateStateFunc (state) {
  return reqLoad.updateById(API_URL_MEMBERS, vdata.record.mbrId, { state: state }).then(() => {
    emit.pageEmit(emit.ENAME_REF_MEMBER_LIST)
    infoBox.showSuccessToast("修改成功");
  })
}

function toManual () {
  go.to('PAGES_MEMBER_RECHARGE_MEMBERMANUAL', { mbrId: vdata.record.mbrId })
}

function deleteFunc () {
  return reqLoad.delById(API_URL_MEMBERS, vdata.record.mbrId).then(() => {
    infoBox.showSuccessToast("删除成功");
    go.back(1, emit.ENAME_REF_MEMBER_LIST) // 返回页面 && 更新 
  })
}

</script>


<style lang="scss" scoped>
.sex-info-text {
  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
}

.sta-info {
  display: flex;
  margin-top: 50rpx;
  padding: 0 50rpx;

  .sta-photo {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .info-main {
    flex: 1;
    margin-left: 30rpx;
    color: #fff;

    .info-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 33rpx;
      font-weight: 400;

      image {
        width: 70rpx;
        height: 70rpx;
      }
    }

    .info-phone {
      margin-top: 16rpx;
      color: rgba(251, 252, 253, 0.7);
      font-size: 25rpx;
      font-weight: 400;
    }
  }
}

.pay-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pay-amount {
    margin: 40rpx;
    color: #000000ff;
    font-size: 50rpx;
    font-weight: 500;
  }

  .pay-shift {
    display: flex;
    align-items: center;
    color: #2980fdff;
    font-size: 33rpx;

    image {
      margin-right: 40rpx;
      width: 44rpx;
      height: 44rpx;
    }
  }
}
</style>