xl-mobile/src/pages/InviteFriends/index.vue

<script setup>
import {onMounted, reactive, ref} from 'vue';
import YQBX from '../../static/images/YQBX.png';
import SHOU from '../../static/icons/SHOU.png';
import LMK from '../../static/images/LMK.png';
import HB1 from '../../static/images/HB1.png';
import HB2 from '../../static/images/HB2.png';
import WS from '../../static/images/WS.png';
import TITLEBG from '../../static/images/TITLEBG.png';
import yqhyBg from '../../static/icons/yqhy-bg.png';
import XNav from "../../components/XNav.vue";
import Api from "../../api/index.js";
import Poster from "./Poster.vue";

const swiperCur = ref(0);
const showActionSheet = ref(false);

const itemList = [
    {text: '保存到相册', type: 1},
    {text: '取消', type: 0},
];
const list = reactive({
    invite: null,
    member_url: null,
    poster: [],
});

onMounted(() => {
    Api.system.getPoster().then(({data}) => {
        list.length = 0;
        Object.assign(list, data);
    })
})
let nowActive = null;
const handleLongPress = (base64) => {
    nowActive = base64;
    showActionSheet.value = true;
}

const success = ({type}) => {
    if (type === 1) {
        const link = document.createElement('a');
        link.href = nowActive;
        link.download = '邀请海报.png';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}
</script>

<template>
    <!--邀请好友-->
    <XNav></XNav>

    <view class="h-[calc(100vh-100rpx)] w-full fixed top-0 left-0">
        <image class="!size-full" mode="widthFix" :src="yqhyBg"></image>
    </view>

    <view class="!w-full !flex justify-center !mt-[48rpx]">
        <image class="!h-[100rpx]" :src="YQBX" mode="heightFix"></image>
    </view>

    <view class="!w-full !flex justify-center !mt-[28rpx] relative">
        <image class="!h-[70rpx]" :src="TITLEBG" mode="heightFix"></image>
        <image class="!h-[54rpx] !absolute top-1/2 left-1/2 -translate-1/2" :src="LMK" mode="heightFix"></image>

        <image class="!h-[104rpx] !absolute left-[10%]" :src="HB1" mode="heightFix"></image>
        <image class="!h-[102rpx] !absolute right-[10%] bottom-[10%]" :src="HB2" mode="heightFix"></image>
    </view>

    <image class="!w-[942rpx] !absolute left-1/2 -translate-x-1/2 top-[40rpx]" :src="WS" mode="widthFix"></image>

    <swiper
        class="!h-[908rpx] !mt-[90rpx]"
        previous-margin="95rpx"
        next-margin="95rpx"
        @change="({detail: {current}}) => swiperCur=current"
        :current="swiperCur"
        circular>
        <swiper-item class="!w-[564rpx]" v-for="(v, index) in list.poster">
            <Poster
                :bg="v"
                :invite="list.invite"
                :member_url="list.member_url"
                @handleLongPress="handleLongPress"
                :class="['duration-500', index!==swiperCur?'scale-[0.8]':'']"></Poster>
        </swiper-item>
    </swiper>

    <tui-actionsheet
        :show="showActionSheet"
        :itemList="itemList"
        @click="success"
        @cancel="showActionSheet=false">
    </tui-actionsheet>

    <view
        class="!w-full !h-[88rpx] bg-[rgba(0,0,0,.21)] text-white relative z-10 !flex justify-center items-center !mt-[48rpx]">
        提示：
        <image class="!w-[56rpx] !ml-[14rpx] !mr-[10rpx]" :src="SHOU" mode="widthFix"></image>
        长摁图片保存到本地
    </view>
</template>

<style lang="scss" scoped>
</style>