mall-app-t/pages/user/info/detail.vue

<template>
  <pb-layout title="个人信息" navbar="normal" class="merchant-success" :bgStyle="{ backgroundColor: '#fff' }">
    <view class="info">
      <view class="details">
        <template v-for="item in Object.keys(list)">
          <view class="item" v-if="res?.id">
            <view>
              {{ list[item] }}
            </view>
            <view v-if="!res[item]?.includes('http')">
              {{ res[item] }}
            </view>
            <p-uploader
              v-else
              v-model:url="res[item]"
              fileMediatype="image"
              limit="1"
              readonly
              :imageStyles="{ width: '168rpx', height: '168rpx' }"
            />
          </view>
        </template>
      </view>
      <view class="footer-box">
        <button class="ss-reset-button back-btn shadow" @tap="navBack">返回首页</button>
        <button class="ss-reset-button save-btn shadow" @tap="navToEdit">修改信息</button>
      </view>
    </view>
  </pb-layout>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import UserApi from '@/peach/api/member/user'
import peach from '@/peach'

const list = ref({
  name: '店铺名称',
  logo: '门店LOGO',
  timezone: '营业时间',
  tradeImg: '营业执照',
  address: '详细地址',
  contactName: '联系人',
  contactPhone: '联系电话',
  idCard: '身份证号',
  idCardFront: '身份证正面',
  idCardBack: '身份证反面',
  alipayLogonId: '支付宝账号',
  payee: '收款人姓名',
  bankName: '银行名称',
  bankBranchName: '开户行',
  bankNo: '银行卡号',
  bankOpenContact: '开户人',
  bankCardFront: '银行卡正面',
  bankCardBack: '银行卡反面',
})

const res = ref(null)

// 获取商铺详情
function getMerchantInfo() {
  UserApi.getUserDetail().then((data) => {
    data.data.address = data.data.address.replace(/\//g, '')
    data.data.timezone =
      formatNumber(data.data.openingTime[0]) +
      ':' +
      formatNumber(data.data.openingTime[1]) +
      '~' +
      formatNumber(data.data.closingTime[0]) +
      ':' +
      formatNumber(data.data.closingTime[1])

    res.value = data.data
  })
}

// 如果数字只有一位，前一位补零
function formatNumber(num) {
  return num < 10 ? '0' + num : num
}

function navToEdit() {
  peach.$router.go('/pages/user/info/index')
}

function navBack() {
  peach.$router.back()
}

onLoad(() => {
  getMerchantInfo()
})
</script>

<style lang="scss" scoped>
.merchant-success {
  .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 80rpx 40rpx;
    margin-bottom: 40rpx;
    background-color: #fff;

    .note {
      color: #999;
      font-size: 28rpx;
    }

    .submit-btn {
      height: 80rpx;
      width: 100px;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }
  }

  .info {
    background-color: #fff;
    padding: 40rpx;
    margin-bottom: 40rpx;

    .title {
      font-weight: 700;
      font-size: 17px;
      margin-bottom: 20px;
    }

    .details {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .item {
        display: flex;
        align-items: flex-start;
        font-size: 14px;
        color: #333;

        view:nth-child(2n) {
          font-size: 14px;
          color: #999;
        }

        view:nth-child(2n + 1) {
          width: 100px;
        }
      }
    }
  }

  .footer-box {
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
    gap: 20px;

    .save-btn {
      width: 50%;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }
    .back-btn {
      width: 50%;
      border-radius: 40rpx;
      border: 1px solid #000;
    }
  }
}
</style>