new-cashier/jeepay-ui-uapp-agent/pages/account/account.vue

<template>
  <view class="me-wrapper global-wrapper bgF2">
    <JHeaderTitle title="我的" bgColor="#fff" :back="false"></JHeaderTitle>
    <view class="me-card">
      <view class="me-card-left">
        <image :src="userInfo.avatarUrl" mode="scaleToFill" />
        <view class="user-info">
          <view class="user-name single-text-beyond">{{ userInfo.realname }}</view>
          <view class="user-phone">{{ phone(userInfo.telphone) }} </view>
        </view>
      </view>
      <view class="me-card-right">
        <view class="user-edit">
          <image src="/static/iconImg/icon-edit.svg" mode="scaleToFill"
            @tap="jumpPage('/pageWork/setUp/accountSetting')" />
        </view>
        <view class="user-scan">
          <image src="/static/iconImg/scan-code.svg" mode="scaleToFill" @tap="scanCode" />
        </view>
      </view>
    </view>
    <view class="list-wrap">
      <template v-for="(v, i) in newList" :key="i">
        <ListCard v-bind="v" v-if="v.title != ''"></ListCard>
      </template>
    </view>
    <view class="setting-block"></view>
    <ListCard title="设置" imgUrl="/static/iconImg/setting.svg" isBorder="isBorder" url="/pageWork/setUp/setUp"></ListCard>

    <blcok v-for="v in vdata.adList" :key="v.adverId">
      <JeepayBanner :list="v.appContent" :interval='v.changeTime' v-if="v.appPlaceType == 2" />
      <JeepayAdCard :list='v.appContent' v-if="v.appPlaceType == 1" />
    </blcok>
    <view class="setting-block"></view>
	<!-- #ifdef APP-PLUS -->
	<view style="height: 120rpx;"></view>
	<!-- #endif -->
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { $getUserInfo, $scanCodeLogin, $adList } from "@/http/apiManager.js"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"
import ListCard from "./components/ListCard.vue"
import navList from "../workbench/navList/navList"
onShow(() => {
  getUserInfo()
})
const newList = [
{
    title: '我的邀请码',
    url: '/pages/publicizeCode/publicizeCode',
    imgUrl: '/static/indexImg/pub-icon.svg',
},
...navList
]
const userInfo = ref({})
const vdata = reactive({})
const getUserInfo = () => {
  $getUserInfo().then(({ bizData }) => {
    userInfo.value = bizData
    console.log(userInfo.value)
  })
}
const phone = (val) => {
  if (!val) return
  return val.slice(0, 3) + "****" + val.slice(-4)
}
const jumpPage = (url) => {
  uni.navigateTo({
    url,
  })
}
const scanCode = () => {
  uni.scanCode({
    success: function (res) {
      console.log("条码类型：" + res.scanType)
      console.log("条码内容：" + res.result)
      $scanCodeLogin({
        qrcodeNo: res.result,
        qrcodeStatus: "scaned",
      }).then((val) => {
        uni.navigateTo({
          url: "./scan?id=" + res.result,
        })
      })
    },
    fail(err) {
      console.log(err)
    },
  })
}
// 请求首页广告
$adList({ appPlace: 3 }).then(({ bizData }) => {
  bizData.forEach(v => {
    v.appContent = JSON.parse(v.appContent)
  })
  vdata.adList = bizData
  console.log(bizData)
})
</script>

<style lang="scss" scoped>
.me-wrapper {
  width: 100%;

  .me-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50rpx;
    background-color: #fff;

    .me-card-left {
      display: flex;

      image {
        width: 130rpx;
        height: 130rpx;
        border-radius: 10rpx;
      }

      .user-info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 30rpx;

        .user-name {
          width: 300rpx;
          font-size: 33rpx;
        }

        .user-phone {
          font-size: 27rpx;
          color: #8c8c8c;
        }
      }
    }

    .me-card-right {
      display: flex;

      view {
        position: relative;
        width: 70rpx;
        height: 70rpx;
        border-radius: 10px;
        background: rgba(119, 55, 254, 0.15);

        &:last-child {
          margin-left: 20rpx;
        }
      }

      image {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30rpx;
        height: 30rpx;
        transform: translate(-50%, -50%);
      }
    }
  }
}

.setting-block {
  height: 20rpx;
  background-color: #f2f2f2;
}
</style>