admin/marry-wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: 婚礼请柬微信小程序（代码）

Browse Source
This commit is contained in:
admin
2026-04-23 16:31:17 +08:00
commit 854c9cbca7
16 changed files with 765 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

573
pages/index/index.vue Normal file
View File

@@ -0,0 +1,573 @@
<template>
<view class="container">
<!-- 背景音乐 -->
<audio id="bgmAudio" :src="audioUrl" loop controls style="display:none;"></audio>
<!-- 音乐按钮 -->
<view class="bgm-btn" :class="{ muted: !isPlaying }" @click="toggleBgm">
<text class="icon-play">🎵</text>
</view>
<!-- 轮播图 -->
<swiper class="swiper" :current="currentSlide" @change="onSwiperChange" :vertical="true" :circular="false" :duration="500">
<!-- 第1页：欢迎页 -->
<swiper-item>
<view class="slide page-welcome">
<canvas type="2d" id="fireworks-canvas" class="fireworks-canvas"></canvas>
<image class="caihua caihua-1" src="/static/elements/caihua1.webp" mode="aspectFit"></image>
<image class="caihua caihua-2" src="/static/elements/caihua1.webp" mode="aspectFit"></image>
<view class="page-content">
<view class="main-title">【我们结婚啦】</view>
<image class="ref-image" src="/static/Images/image1-1.webp" mode="aspectFill"></image>
<view class="couple-row">
<view class="person-block">
<view class="brush-bg">
<text class="person-label">新郎</text>
</view>
<text class="person-name">王超凡</text>
</view>
<text class="and-amp">&</text>
<view class="person-block">
<view class="brush-bg">
<text class="person-label">新娘</text>
</view>
<text class="person-name">祖苏雅</text>
</view>
</view>
<view class="invite-wrap">
<text class="invite-line">诚邀您及家人光临</text>
</view>
<view class="msg-lines">
<text class="msg-line">见证我们生命中最重要的时刻</text>
<text class="msg-line">分享这份爱的喜悦</text>
<text class="msg-line">共启幸福新征程</text>
</view>
<view class="info-lines">
<text class="info-line">2026年5月16日 午宴</text>
<text class="info-line">泗洪县滋禧酒店</text>
</view>
</view>
</view>
</swiper-item>
<!-- 第2页：照片1 -->
<swiper-item>
<view class="slide photo-page">
<view class="page-content">
<text class="section-label">壹 · PHOTO</text>
<text class="blessing-title">执子之手，与子偕老</text>
<view class="photo-frame-wrap">
<image class="frame-deco" src="/static/elements/frame2.webp" mode="widthFix"></image>
<view class="photo-inside">
<image src="/static/photo/photo1.jpg" mode="aspectFill"></image>
</view>
</view>
<text class="blessing-text">
从相遇到相守，从相知到相爱
感谢命运让我们相遇
愿你我往后余生
冷暖相知，喜乐同享
同量天地宽，共度日月长
</text>
</view>
</view>
</swiper-item>
<!-- 第3页：照片2 -->
<swiper-item>
<view class="slide photo-page">
<view class="page-content">
<text class="section-label">贰 · PHOTO</text>
<text class="blessing-title">死生契阔，与子成说</text>
<view class="photo-frame-wrap">
<image class="frame-deco" src="/static/elements/frame2.webp" mode="widthFix"></image>
<view class="photo-inside">
<image src="/static/photo/photo2.jpg" mode="aspectFill"></image>
</view>
</view>
<text class="blessing-text">
每一次心跳都是因为你
每一个明天都想要你参与
愿得一人心，白首不相离
从此以后
你是我的唯一
</text>
</view>
</view>
</swiper-item>
<!-- 第4页：照片3 -->
<swiper-item>
<view class="slide photo-page">
<view class="page-content">
<text class="section-label">叁 · PHOTO</text>
<text class="blessing-title">琴瑟在御，莫不静好</text>
<view class="photo-frame-wrap">
<image class="frame-deco" src="/static/elements/frame2.webp" mode="widthFix"></image>
<view class="photo-inside">
<image src="/static/photo/photo3.jpg" mode="aspectFill"></image>
</view>
</view>
<text class="blessing-text">
感谢生命中每一次相遇
让平凡的日子有了意义
愿与你一起
看遍世间所有风景
走过岁月年年岁岁
</text>
</view>
</view>
</swiper-item>
<!-- 第5页：酬谢 -->
<swiper-item>
<view class="slide page-thanks">
<view class="page-content">
<text class="thanks-title">酬谢词</text>
<text class="thanks-sub">THANKS & GRATITUDE</text>
<text class="thanks-text">
感谢您百忙之中
拨冗出席我们的婚礼
见证我们人生中最重要的时刻
您的祝福与到来
是我们最珍贵的礼物
愿您一切顺遂，幸福安康
</text>
<text class="names-sign">王超凡 & 祖苏雅</text>
</view>
</view>
</swiper-item>
<!-- 第6页：婚礼信息 -->
<swiper-item>
<view class="slide page-info">
<view class="page-content">
<text class="info-title">婚礼信息</text>
<view class="info-divider"></view>
<text class="info-date">2026.05.16</text>
<text class="info-lunar">农历三月三十 · 星期六</text>
<text class="info-time">中午 12:00</text>
<view class="info-detail">
<view class="highlight" style="font-size:32rpx;">滋禧酒店</view>
<text>江苏省泗洪县洪泽湖东大街16号</text>
<text style="font-size:24rpx;color:#c9a86c;">滋禧酒店（宿迁泗洪香港花园店）</text>
</view>
<view class="map-wrap" @click="openMap">
<map id="qqmap" style="width:100%;height:400rpx;"
:latitude="latitude" :longitude="longitude"
:markers="markers" :scale="15">
</map>
</view>
</view>
</view>
</swiper-item>
</swiper>
<!-- 页码指示器 -->
<view class="page-indicator">
<view v-for="i in 6" :key="i" class="dot" :class="{ active: currentSlide === i - 1 }" @click="goTo(i - 1)"></view>
</view>
<!-- 滑动提示 -->
<view class="swipe-hint" v-if="currentSlide < 5">
<text>上滑</text>
<view class="swipe-hint-arrow"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentSlide: 0,
isPlaying: false,
audioUrl: '/static/Audio/bgm.mp3',
latitude: 33.470412,
longitude: 118.22323,
markers: [{
latitude: 33.470412,
longitude: 118.22323,
title: '滋禧酒店',
callout: { content: '滋禧酒店', color: '#8B6914', fontSize: 14, borderRadius: 10, padding: 10 }
}]
}
},
methods: {
toggleBgm() {
const audio = uni.createInnerAudioContext();
audio.src = this.audioUrl;
if (this.isPlaying) {
audio.pause();
} else {
audio.play();
}
this.isPlaying = !this.isPlaying;
},
onSwiperChange(e) {
this.currentSlide = e.detail.current;
},
goTo(index) {
this.currentSlide = index;
},
openMap() {
uni.openLocation({
latitude: this.latitude,
longitude: this.longitude,
name: '滋禧酒店',
address: '江苏省泗洪县洪泽湖东大街16号'
});
}
},
onLoad() {
// 首次点击自动播放
uni.showToast({ title: '点击任意位置开始', icon: 'none' });
}
}
</script>
<style>
page {
background-color: #faf6f0;
height: 100%;
}
.container {
height: 100vh;
position: relative;
}
/* 音乐按钮 */
.bgm-btn {
position: fixed;
top: 20rpx;
right: 20rpx;
width: 80rpx;
height: 80rpx;
background: rgba(255,255,255,0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}
.bgm-btn.muted {
opacity: 0.6;
}
/* 轮播 */
.swiper {
height: 100vh;
width: 100%;
}
/* 页面通用 */
.slide {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #faf6f0 0%, #f5efe6 100%);
}
.page-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40rpx;
}
/* 欢迎页 */
.page-welcome {
position: relative;
overflow: hidden;
}
.fireworks-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.caihua {
position: absolute;
pointer-events: none;
opacity: 0.7;
}
.caihua-1 {
width: 320rpx;
top: -20rpx;
right: -40rpx;
transform: rotate(15deg);
}
.caihua-2 {
width: 280rpx;
bottom: 160rpx;
left: -60rpx;
transform: rotate(-20deg);
}
.main-title {
font-size: 72rpx;
color: #8B6914;
letter-spacing: 8rpx;
margin-bottom: 20rpx;
}
.ref-image {
width: 520rpx;
height: 360rpx;
border-radius: 24rpx;
margin: 12rpx 0;
}
.couple-row {
display: flex;
align-items: center;
justify-content: center;
gap: 32rpx;
margin: 20rpx 0;
}
.person-block {
display: flex;
flex-direction: column;
align-items: center;
}
.brush-bg {
background: linear-gradient(135deg, #fece6c 0%, #f5d78e 100%);
padding: 8rpx 24rpx;
border-radius: 8rpx;
}
.person-label {
font-size: 36rpx;
color: #8B4513;
letter-spacing: 4rpx;
}
.person-name {
font-size: 36rpx;
color: #8B4513;
letter-spacing: 6rpx;
margin-top: 8rpx;
}
.and-amp {
font-size: 52rpx;
color: #c9a86c;
}
.invite-wrap {
margin: 16rpx 0;
}
.invite-line {
font-size: 40rpx;
color: #8B4513;
letter-spacing: 6rpx;
}
.msg-lines {
display: flex;
flex-direction: column;
gap: 8rpx;
margin: 8rpx 0;
}
.msg-line {
font-size: 28rpx;
color: #8B4513;
letter-spacing: 4rpx;
line-height: 1.6;
}
.info-lines {
margin-top: 12rpx;
}
.info-line {
font-size: 32rpx;
color: #8B4513;
letter-spacing: 4rpx;
line-height: 1.8;
}
/* 照片页 */
.photo-page {
background: #faf6f0;
}
.section-label {
font-size: 24rpx;
color: #c9a86c;
letter-spacing: 12rpx;
margin-bottom: 8rpx;
}
.blessing-title {
font-size: 52rpx;
color: #8B6914;
letter-spacing: 6rpx;
line-height: 1.4;
margin-bottom: 20rpx;
}
.photo-frame-wrap {
position: relative;
width: 560rpx;
}
.frame-deco {
width: 100%;
position: relative;
z-index: 2;
}
.photo-inside {
position: absolute;
top: 8%;
left: 8%;
right: 8%;
bottom: 8%;
z-index: 1;
border-radius: 8rpx;
overflow: hidden;
}
.photo-inside image {
width: 100%;
height: 100%;
}
.blessing-text {
font-size: 27rpx;
color: #7a5a42;
line-height: 2.0;
letter-spacing: 1px;
max-width: 640rpx;
margin-top: 16rpx;
}
/* 酬谢页 */
.page-thanks {
background: #faf6f0;
}
.thanks-title {
font-size: 84rpx;
color: #8B6914;
letter-spacing: 8rpx;
}
.thanks-sub {
font-size: 26rpx;
color: #c9a86c;
letter-spacing: 8rpx;
margin-top: 16rpx;
}
.thanks-text {
font-size: 28rpx;
color: #7a5a42;
line-height: 2.4;
letter-spacing: 2rpx;
max-width: 640rpx;
margin-top: 40rpx;
}
.names-sign {
font-size: 56rpx;
color: #8B6914;
letter-spacing: 8rpx;
margin-top: 32rpx;
}
/* 信息页 */
.page-info {
background: #faf6f0;
}
.info-title {
font-size: 76rpx;
color: #8B6914;
letter-spacing: 8rpx;
}
.info-divider {
width: 120rpx;
height: 4rpx;
background: #c9a86c;
margin: 16rpx 0;
}
.info-date {
font-size: 88rpx;
color: #8B6914;
letter-spacing: 8rpx;
line-height: 1.3;
}
.info-lunar {
font-size: 26rpx;
color: #c9a86c;
letter-spacing: 6rpx;
margin-top: 8rpx;
}
.info-time {
font-size: 40rpx;
color: #8B6914;
letter-spacing: 4rpx;
margin-top: 12rpx;
}
.info-detail {
display: flex;
flex-direction: column;
font-size: 30rpx;
color: #7a5a42;
line-height: 2.0;
letter-spacing: 2rpx;
margin-top: 24rpx;
}
.info-detail .highlight {
color: #8B6914;
font-weight: 500;
}
.map-wrap {
width: 100%;
max-width: 680rpx;
border-radius: 32rpx;
overflow: hidden;
border: 4rpx solid #e8d4a8;
box-shadow: 0 12rpx 48rpx rgba(139,105,20,0.12);
margin-top: 12rpx;
}
/* 页码指示器 */
.page-indicator {
position: fixed;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 16rpx;
z-index: 100;
}
.dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background: rgba(139,105,20,0.3);
}
.dot.active {
background: #8B6914;
width: 24rpx;
height: 24rpx;
}
/* 滑动提示 */
.swipe-hint {
position: fixed;
bottom: 40rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
color: #c9a86c;
font-size: 24rpx;
letter-spacing: 4rpx;
z-index: 100;
}
.swipe-hint-arrow {
width: 40rpx;
height: 40rpx;
border-left: 4rpx solid #c9a86c;
border-bottom: 4rpx solid #c9a86c;
transform: rotate(-45deg);
margin-top: 8rpx;
}
</style>