DataEasy-MiniProgram/src/pages/subscriptionUserConfig.vue

<template>
  <view>
    <!-- 已订阅列表 -->
    <uni-list>
      <uni-list-item v-for="(item, index) in subscriptionUserConfigList" :key="item.id">
        <template v-slot:body>
          <view class="item-box">
            <view @click="goSubscriptionSourceDetail(item)">
              <view class="title">{{ item.title }}</view>
              <view class="description">{{ item.subTitle }}</view>
            </view>
            <view class="func-box">
              <view class="date">剩余有效期：{{ item.remainingDays }}天</view>
              <view class="switch-text">
                <span>通知状态：{{ item.pushOption == 'ENABLED' ? '开启中' : '关闭' }}</span>
                <switch color="#FFD800" style="transform:scale(0.7)" :checked="item.pushOption == 'ENABLED'"
                  @change="e => pushOptionSwitchChange(e, item)" />
              </view>
            </view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onPullDownRefresh, onShow } from "@dcloudio/uni-app";
import { subscriptionApi } from '@/apis/apis.js';
import router from '@/common/router.js';

// 属性
const subscriptionUserConfigList = ref([]);


// 方法
/**
 * 加载数据
 */
const loadData = async () => {
  subscriptionUserConfigList.value = [];
  try {
    uni.showLoading({
      title: '加载中',
      mask: true
    });
    subscriptionUserConfigList.value = await subscriptionApi.querySubscriptionUserConfig();
  } finally {
    uni.hideLoading();
  }
};

/**
 * 跳转到订阅源详情页面
 */
const goSubscriptionSourceDetail = (dataObj) => {
  uni.navigateTo({
    url: router.SUBSCRIPTION_SOURCE_DETAIL_PAGE + `?id=${dataObj.id}`
  });
};

/**
 * 推送选项切换
 * @param e switch开关事件
 */
const pushOptionSwitchChange = async (e, configObj) => {
  await subscriptionApi.modifyPushOption({
    id: configObj.id,
    pushOption: e.detail.value ? 'ENABLED' : 'DISABLED'
  });
  loadData();
}

// 生命周期
onShow(() => {
  loadData();
});

onPullDownRefresh(() => {
  loadData();
  uni.stopPullDownRefresh();
});
</script>

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

  .title {
    font-size: 29.17rpx;
    font-weight: 400;
    letter-spacing: 0rpx;
    line-height: 40.02rpx;
    color: #191919;
    text-align: left;
    vertical-align: top;
  }

  .description,
  .date,
  .switch-text {
    font-size: 25rpx;
    font-weight: 400;
    letter-spacing: 0rpx;
    line-height: 34.3rpx;
    color: #999999;
    text-align: left;
    vertical-align: top;
  }

  .func-box {
    display: flex;
  }

  .date,
  .switch-text {
    flex: 0 0 50%;
    /* 禁止伸缩，基础宽度50% */
    display: flex;
    align-items: center;
  }

  .switch-text {
    justify-content: space-between; // 修改: 添加此行以使两个元素按一头一尾排列
  }
}
</style>