xiangyuan-app/src/pages/home/village/introd/skin/details.vue

<template>
  <CommonTopBanner title="皮肤详情">
    <SimplePageContentLoader :loader="skinLoader">
      <FlexCol v-if="skin" padding="padding.md">
        
        <scroll-view scroll-x>
          <FlexRow :width="IMAGE_WIDTH * skin.images.length" :gap="30" align="stretch">
            <Image 
              v-for="item in skin.images" 
              :key="item" 
              :src="item" 
              :width="IMAGE_WIDTH"
              radius="radius.lg"
              mode="widthFix"
              :innerStyle="{
                border: '1px solid #944329',
              }"
            />
          </FlexRow>
        </scroll-view>

        <FlexCol padding="padding.md">
          <FlexRow justify="space-between" align="center">
            <Text fontConfig="contentSpeicalText" fontFamily="SongtiSCBlack" :lines="1" :wrap="false">{{ skin.title }}</Text>
            <FlexCol backgroundColor="text.gold" radius="10" padding="10">
              <Text v-if="skin.price > 0" fontSize="fontSize.sm" fontWeight="bold" color="white" :text="`${moneyToFruit(skin.price)}乡源果`" />
              <Text v-else fontSize="fontSize.sm" color="white" text="免费" />
            </FlexCol>
          </FlexRow>
          <Text fontSize="fontSize.sm" :text="skin.desc" :lines="1" :maxWidth="400" />
        </FlexCol>

        <FlexCol padding="padding.md">
          <PrimaryButton v-if="!skin.isBought" radius="radius.xl" text="购买" @click="handleBuy" />
          <PrimaryButton v-else radius="radius.xl" text="去使用" @click="handleUse" />
        </FlexCol>
      </FlexCol>

    </SimplePageContentLoader>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useFruitConversion } from '@/pages/home/composeabe/FruitConverit';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { toast, alert } from '@/components/dialog/CommonRoot';
import { navTo, callTopOnPageBack } from '@/components/utils/PageAction';
import { assertNotNull } from '@imengyu/imengyu-utils';
import { showError } from '@/common/composeabe/ErrorDisplay';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import PrimaryButton from '@/common/components/PrimaryButton.vue';
import SkinApi from '@/api/light/SkinApi';
import LightVillageApi from '@/api/light/LightVillageApi';

const IMAGE_WIDTH = 330;

const { querys } = useLoadQuerys({
  villageId: 0,
  id: 0
}, () => skinLoader.load());

const { moneyToFruit } = useFruitConversion();

const skinLoader = useSimpleDataLoader(async () => {
  const list = await SkinApi.getPurchasedSkinList({ villageId: querys.value.villageId, page: 1, pageSize: 50 });
  const details = await SkinApi.getSkinInfo(querys.value.id);
  details.isBought = Boolean(list.list.find(p => p.id === details.id));
  return details;
}, false)
const skin = computed(() => skinLoader.content.value);

async function handleBuy() {
  try {
    assertNotNull(skin.value);
    if (skin.value.price <= 0) {
      await SkinApi.placeOrder(
        querys.value.id,
        3,
        querys.value.villageId,
      );
      toast('购买成功');
      skinLoader.load();
      return;
    }
  } catch (e) {
    showError(e);
    return;
  }

  navTo('/pages/home/village/introd/skin/buy-skin', { skinId: querys.value.id, villageId: querys.value.villageId, price: skin.value.price, })
}
async function handleUse() {
  try {
    await LightVillageApi.updateVillageSkin(
      querys.value.villageId, 
      querys.value.id
    );
    alert({
      title: '使用成功',
      content: '您的村社皮肤已更新，请返回村社首页查看效果！',
    });
    callTopOnPageBack('backRefreshSkin', {});
  } catch (e) {
    showError(e);
    return;
  }
}

defineExpose({
  onPageBack(name: string, data: any) {
    if (name === 'paySuccessAndRefresh') {
      skinLoader.load();
      toast('购买成功');
    }
  },
});

</script>