shangfutong-ui/jeepay-ui-uapp-agent/pageWork/appManage/appDetails.vue

<template>
  <view class="page-wrapper">
    <JHeaderTitle title="应用详情页" :bgColor="vdata.headerBgColor" color="#fff" imgUrl="/static/iconImg/left-white.svg" />
    <image class="header-bg-img" src="/pageWork/static/images/app-bg-img.svg" mode="scaleToFill" />
    <view class="header-card">
      <image src="/pageWork/static/images/icon-app-white.svg" mode="scaleToFill" />
      <view class="app-name">{{ appInfo.appName }}</view>
      <view class="app-no">{{ appInfo.appId }}</view>
      <view class="app-edit" @tap="toEdit(appInfo.appName, appInfo.appId)">
        <image src="/static/iconImg/expand-edit.svg" mode="scaleToFill" />
        编辑信息
      </view>
    </view>
    <view class="app-info">
      <view class="app-item">
        <view class="title">应用名称</view>
        <view class="info app-list-name single-text-beyond">{{ appInfo.appName }}</view>
      </view>
      <view class="app-item">
        <view class="title">AppId</view>
        <view class="info">{{ appInfo.appId }}</view>
      </view>
      <view class="app-item">
        <view class="title">是否默认</view>
        <view class="info">{{ appInfo.defaultFlag == 1 ? '是' : '否' }}</view>
      </view>
      <view class="app-item">
        <view class="title">应用状态</view>
        <view class="info">
          <switch :checked="appInfo.state == 1" style="margin: 0; transform: scale(1.2); padding: 0" color="#BF80FF" @change="stateChange" />
        </view>
      </view>
    </view>
    <view class="app-button" @tap="toPayChannel(appInfo.appId)"> 支付渠道配置 </view>
  </view>
  <JPopupCard ref="refPay" />
  <jeepayConfirm ref="refConfirm" />
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onPageScroll, onUnload } from '@dcloudio/uni-app'
import { $getAppDetails, $savePayConfig, $editApp } from '@/http/apiManager.js'
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle'
import JPopupCard from './components/JPopupCard.vue'
onLoad((options) => {
  getDetails(options.appId)
  uni.$on('upDateAppDetails', () => {
    getDetails(appInfo.appId)
    uni.$emit('upDateList')
  })
})
const vdata = reactive({
  headerBgColor: 'transparent',
})
const refConfirm = ref(null)
const appInfo = reactive({})
const refPay = ref(null)
// 获取详情
const getDetails = (appId) => {
  $getAppDetails(appId).then(({ bizData }) => {
    Object.assign(appInfo, bizData)
  })
}
// 支付渠道配置页面
const toPayChannel = (appId) => uni.navigateTo({ url: '/pageWork/appManage/payChannel?appId=' + appId })

// 编辑应用页面
const toEdit = (name, appId) => {
  uni.navigateTo({
    url: `/pageWork/appManage/editAdd?appName=${name}&appId=${appId}`,
  })
}
// 保存支付渠道配置
const saveConfig = (data) => {
  $savePayConfig(data).then((res) => {
    uni.showToast({
      title: '保存成功',
      icon: 'success|none',
      mask: true,
    })
  })
}
const stateChange = (e) => {
  appInfo.state = Number(e.detail.value)
  refConfirm.value.comfirmOpen(
    () => {
      $editApp({
        appId: appInfo.appId,
        state: appInfo.state,
      }).then((res) => {
        uni.showToast({
          title: '修改成功',
          icon: 'success|none',
          mask: true,
        })
        uni.$emit('upDateList')
      })
    },
    '确认修改状态吗？',
    () => {
      appInfo.state = Number(!e.detail.value)
    }
  )
}
onPageScroll((data) => {
  if (data.scrollTop > 20) {
    vdata.headerBgColor = '$primaryColor'
  } else {
    vdata.headerBgColor = 'transparent'
  }
})
// 页面卸载移除事件侦听
onUnload(() => {
  uni.$off(['upDateAppDetails'])
})
</script>

<style lang="scss" scoped>
.page-wrapper {
  position: relative;
  background-color: $primaryColor;
  min-height: 100vh;
  .header-bg-img {
    position: absolute;
    top: 0;
    right: 0;
    left: 50;

    width: 100%;
    height: 600rpx;
  }
  .header-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 75rpx;
    image {
      width: 93rpx;
      height: 93rpx;
    }
    .app-name {
      margin: 20rpx 0 15rpx 0;
      width: 500rpx;
      text-align: center;
      font-size: 33rpx;
      font-weight: 500;
      color: #fff;
    }
    .app-no {
      color: rgba(255, 255, 255, 0.6);
      font-size: 26rpx;
      font-weight: 500;
    }
    .app-edit {
      position: relative;
      z-index: 40;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30rpx;
      width: 236rpx;
      height: 90rpx;
      border-radius: 10rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: $primaryColor;
      background-color: #fff;
      image {
        margin-right: 10rpx;
        width: 26rpx;
        height: 26rpx;
      }
    }
  }
  .app-info {
    margin: 50rpx 50rpx 35rpx 50rpx;
    padding: 10rpx 0;

    height: 338rpx;
    border-radius: 20rpx;
    background: rgba(0, 0, 0, 0.1);
    .app-item {
      display: flex;
      justify-content: space-between;
      margin: 30rpx 0;
      padding: 0 40rpx;
      font-size: 30rpx;
      font-weight: 500;
      .title {
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.6);
      }
      .info {
        flex: 1;
        text-align: right;
        color: #fff;
      }
    }
  }
  .app-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 50rpx;
    height: 110rpx;
    border-radius: 20rpx;
    font-size: 33rpx;
    font-weight: 500;
    color: $primaryColor;
    background-color: #fff;
  }
}
.app-list-name {
  width: 440rpx;
  margin-left: 15rpx;
}
</style>