104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
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";
|
||
import {download} from "../../utils/uils.js";
|
||
|
||
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) {
|
||
download(nowActive);
|
||
}
|
||
}
|
||
</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>
|