924 lines
20 KiB
Vue
924 lines
20 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 顶部通知栏 -->
|
||
<view class='tui-notice-board' v-if="showNotice">
|
||
<view class="tui-icon-bg">
|
||
<tui-icon name="news-fill" :size='24' color='#f54f46'></tui-icon>
|
||
</view>
|
||
<view class="tui-scorll-view" @tap='detail'>
|
||
<view class="tui-notice" :class="[animation ? 'tui-animation' : '']">B站10分日本动漫已消失，9.9分仅剩12部，这一部动漫包揽三席！</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主要内容 -->
|
||
<view class="main-content">
|
||
|
||
<!-- 填写信息部分 -->
|
||
<view class="info-section">
|
||
<view class="page-header">
|
||
<text class="page-title">填写信息</text>
|
||
</view>
|
||
|
||
<view class="form-container">
|
||
<!-- 手机号输入 -->
|
||
<view class="form-item">
|
||
<view class="input-container">
|
||
<input
|
||
class="form-input"
|
||
type="number"
|
||
v-model="phoneNumber"
|
||
placeholder="请输入对方手机号"
|
||
placeholder-class="placeholder-style"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 日期时间选择 -->
|
||
<view class="form-item">
|
||
<view class="input-container date-container" @tap="showDatePicker">
|
||
<view class="date-icon">
|
||
<image src="../../assets/time-32.svg" mode="aspectFit" class="icon-calendar"></image>
|
||
</view>
|
||
<text class="date-text">{{ selectedDate || '选择日期时间' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日期提示信息 -->
|
||
<view class="tip-container">
|
||
<view class="tip-icon">
|
||
<image src="../../assets/waring-32.svg" mode="aspectFit" class="icon-info"></image>
|
||
</view>
|
||
<view class="tip-text-wrapper">
|
||
<text class="tip-text">如果选择时间，我们将在指定时间为您送达(节假日高峰可能存在延迟)，不选择时间将立即发送！</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 编辑短信部分 -->
|
||
<view class="edit-section">
|
||
<view class="page-header">
|
||
<view class="title-price-section">
|
||
<view class="title-section">
|
||
<text class="page-title">编辑短信</text>
|
||
<text class="price-info">(短信发送价格: 3.99元/条)</text>
|
||
</view>
|
||
<!-- 模板按钮 -->
|
||
<view class="template-button-container">
|
||
<button class="template-button" hover-class="button-hover" @tap="useTemplate">使用内置文案</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-container">
|
||
<!-- 文本输入区 -->
|
||
<view class="textarea-container">
|
||
|
||
<!-- 添加图标 -->
|
||
<view class="textarea-icon">
|
||
<image src="../../assets/staples.svg" mode="aspectFit" class="icon-message"></image>
|
||
</view>
|
||
|
||
<!-- 文本区域 -->
|
||
<textarea
|
||
class="message-textarea"
|
||
v-model="messageContent"
|
||
placeholder="点击输入要传达的内容（表白、早晚安、祝福等~）"
|
||
placeholder-class="textarea-placeholder"
|
||
maxlength="500"
|
||
auto-height
|
||
></textarea>
|
||
|
||
|
||
<!-- 字数统计和预览按钮 - 更改为非绝对定位 -->
|
||
<view class="actions-row">
|
||
<view class="character-count">
|
||
<text class="count-text">{{ messageContent.length }}/</text>
|
||
<text class="count-limit">按照20个字一条计算，共{{ calculateMessageCost() }}元</text>
|
||
</view>
|
||
|
||
<view class="preview-button-container">
|
||
<button class="preview-button" @tap="previewMessage">预览短信</button>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 发送按钮 -->
|
||
<view class="send-button-container">
|
||
<button class="send-button" @tap="sendMessage">
|
||
<text class="send-icon">✉</text>
|
||
<text class="send-text">发送</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日期选择器弹窗 -->
|
||
<view class="date-picker-popup" v-if="showDatePickerPopup">
|
||
<view class="date-picker-mask" @tap="hideDatePicker"></view>
|
||
<view class="date-picker-content">
|
||
<view class="date-picker-header">
|
||
<text class="picker-title">选择发送时间</text>
|
||
<text class="picker-close" @tap="hideDatePicker">×</text>
|
||
</view>
|
||
<picker-view
|
||
class="date-picker"
|
||
:value="dateTimeValue"
|
||
@change="onDateTimeChange"
|
||
>
|
||
<picker-view-column>
|
||
<view class="picker-item" v-for="(date, index) in dateOptions" :key="'date-'+index">{{ date }}</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view class="picker-item" v-for="(hour, index) in hourOptions" :key="'hour-'+index">{{ hour }}</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view class="picker-item" v-for="(minute, index) in minuteOptions" :key="'minute-'+index">{{ minute }}</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
<view class="date-picker-footer">
|
||
<button class="picker-confirm" @tap="confirmDatePicker">确认</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 预览短信弹窗 -->
|
||
<view class="preview-popup" v-if="showPreviewPopup">
|
||
<view class="preview-mask" @tap="hidePreview"></view>
|
||
<view class="preview-content">
|
||
<view class="preview-header">
|
||
<text class="preview-title">短信预览</text>
|
||
<text class="preview-close" @tap="hidePreview">×</text>
|
||
</view>
|
||
<view class="preview-message">
|
||
<view class="message-bubble">
|
||
<text class="message-text">{{ messageContent || '暂无内容' }}</text>
|
||
</view>
|
||
<text class="receiver-info">发送至: {{ formatPhone(phoneNumber) }}</text>
|
||
<text class="time-info" v-if="selectedDate">发送时间: {{ selectedDate }}</text>
|
||
</view>
|
||
<view class="preview-footer">
|
||
<button class="preview-confirm" @tap="hidePreview">确认</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 模板选择弹窗 -->
|
||
<view class="template-popup" v-if="showTemplatePopup">
|
||
<view class="template-mask" @tap="hideTemplate"></view>
|
||
<view class="template-content">
|
||
<view class="template-header">
|
||
<text class="template-title">选择模板</text>
|
||
<text class="template-close" @tap="hideTemplate">×</text>
|
||
</view>
|
||
<scroll-view class="template-list" scroll-y>
|
||
<view
|
||
class="template-item"
|
||
v-for="(template, index) in messageTemplates"
|
||
:key="index"
|
||
@tap="selectTemplate(template)"
|
||
>
|
||
<text class="template-preview">{{ template.content }}</text>
|
||
<text class="template-type">{{ template.type }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
|
||
// 动画控制
|
||
const animation = ref<boolean>(false);
|
||
const showNotice = ref<boolean>(true);
|
||
|
||
// 表单数据
|
||
const phoneNumber = ref<string>('');
|
||
const messageContent = ref<string>('');
|
||
const selectedDate = ref<string>('');
|
||
|
||
// 日期选择器
|
||
const showDatePickerPopup = ref<boolean>(false);
|
||
const dateTimeValue = ref<number[]>([0, 0, 0]); // 默认选中第一项
|
||
const dateOptions = ref<string[]>([]);
|
||
const hourOptions = ref<string[]>([]);
|
||
const minuteOptions = ref<string[]>([]);
|
||
|
||
// 预览弹窗
|
||
const showPreviewPopup = ref<boolean>(false);
|
||
|
||
// 模板选择弹窗
|
||
const showTemplatePopup = ref<boolean>(false);
|
||
const messageTemplates = ref([
|
||
{ type: '表白', content: '我很喜欢你，可以和你交往吗？' },
|
||
{ type: '道歉', content: '对不起，是我考虑不周，希望你能原谅我。' },
|
||
{ type: '祝福', content: '祝你生日快乐，愿所有的幸福都围绕在你身边！' },
|
||
{ type: '问候', content: '早安，愿你今天心情愉快，万事顺利！' },
|
||
{ type: '思念', content: '不知不觉已经很久没见了，很想念你。' }
|
||
]);
|
||
|
||
// 初始化日期数据
|
||
const initDateOptions = () => {
|
||
// 生成未来7天的日期选项
|
||
const today = new Date();
|
||
dateOptions.value = Array.from({ length: 7 }, (_, i) => {
|
||
const date = new Date(today);
|
||
date.setDate(today.getDate() + i);
|
||
return `${date.getMonth() + 1}月${date.getDate()}日`;
|
||
});
|
||
|
||
// 生成小时选项
|
||
hourOptions.value = Array.from({ length: 24 }, (_, i) => {
|
||
return `${String(i).padStart(2, '0')}时`;
|
||
});
|
||
|
||
// 生成分钟选项
|
||
minuteOptions.value = Array.from({ length: 60 }, (_, i) => {
|
||
return `${String(i).padStart(2, '0')}分`;
|
||
});
|
||
};
|
||
|
||
// 显示日期选择器
|
||
const showDatePicker = () => {
|
||
showDatePickerPopup.value = true;
|
||
};
|
||
|
||
// 隐藏日期选择器
|
||
const hideDatePicker = () => {
|
||
showDatePickerPopup.value = false;
|
||
};
|
||
|
||
// 日期时间选择变化
|
||
const onDateTimeChange = (e:any) => {
|
||
dateTimeValue.value = e.detail.value;
|
||
};
|
||
|
||
// 确认日期选择
|
||
const confirmDatePicker = () => {
|
||
const [dateIndex, hourIndex, minuteIndex] = dateTimeValue.value;
|
||
selectedDate.value = `${dateOptions.value[dateIndex]} ${hourOptions.value[hourIndex]}${minuteOptions.value[minuteIndex]}`;
|
||
hideDatePicker();
|
||
};
|
||
|
||
// 计算短信费用
|
||
const calculateMessageCost = () => {
|
||
const messageLength = messageContent.value.length;
|
||
if (messageLength === 0) return 0;
|
||
|
||
const messageCount = Math.ceil(messageLength / 20);
|
||
return (messageCount * 3.99).toFixed(2);
|
||
};
|
||
|
||
// 格式化手机号显示
|
||
const formatPhone = (phone:string) => {
|
||
if (!phone || phone.length !== 11) return phone;
|
||
return `${phone.substring(0, 3)}****${phone.substring(7)}`;
|
||
};
|
||
|
||
// 预览短信
|
||
const previewMessage = () => {
|
||
if (!messageContent.value.trim()) {
|
||
// 提示用户输入内容
|
||
uni.showToast({
|
||
title: '请先输入短信内容',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
showPreviewPopup.value = true;
|
||
};
|
||
|
||
// 隐藏预览
|
||
const hidePreview = () => {
|
||
showPreviewPopup.value = false;
|
||
};
|
||
|
||
// 显示模板选择
|
||
const useTemplate = () => {
|
||
showTemplatePopup.value = true;
|
||
};
|
||
|
||
// 隐藏模板选择
|
||
const hideTemplate = () => {
|
||
showTemplatePopup.value = false;
|
||
};
|
||
|
||
// 选择模板
|
||
const selectTemplate = (template:any) => {
|
||
messageContent.value = template.content;
|
||
hideTemplate();
|
||
};
|
||
|
||
// 发送短信
|
||
const sendMessage = () => {
|
||
if (!phoneNumber.value) {
|
||
uni.showToast({
|
||
title: '请输入对方手机号',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!messageContent.value.trim()) {
|
||
uni.showToast({
|
||
title: '请输入短信内容',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 这里是发送操作，实际项目中应调用API
|
||
uni.showLoading({
|
||
title: '发送中...'
|
||
});
|
||
|
||
// 模拟发送过程
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '发送成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 重置表单
|
||
phoneNumber.value = '';
|
||
messageContent.value = '';
|
||
selectedDate.value = '';
|
||
}, 1500);
|
||
};
|
||
|
||
// 详情页跳转
|
||
const detail = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/news/detail'
|
||
});
|
||
};
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
initDateOptions();
|
||
|
||
// 启动滚动动画
|
||
setTimeout(() => {
|
||
animation.value = true;
|
||
}, 600);
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
background-color: #f7f7f7;
|
||
position: relative;
|
||
}
|
||
|
||
/* 通知栏样式 */
|
||
.tui-notice-board {
|
||
width: 100%;
|
||
padding-right: 30rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
height: 60rpx;
|
||
background: #fff8d5;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.tui-icon-bg {
|
||
background: #fff8d5;
|
||
padding-left: 30rpx;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.tui-scorll-view {
|
||
flex: 1;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
color: #f54f46;
|
||
}
|
||
|
||
.tui-notice {
|
||
-webkit-backface-visibility: hidden;
|
||
-webkit-perspective: 1000;
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
|
||
.tui-animation {
|
||
-webkit-animation: tui-rolling 12s linear infinite;
|
||
animation: tui-rolling 12s linear infinite;
|
||
}
|
||
|
||
@keyframes tui-rolling {
|
||
0% {
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
100% {
|
||
transform: translate3d(-170%, 0, 0);
|
||
}
|
||
}
|
||
|
||
/* 主内容区域 */
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
/* 信息和编辑部分 */
|
||
.info-section, .edit-section {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
/* 页面标题 */
|
||
.page-header {
|
||
padding: 20rpx 0 30rpx;
|
||
}
|
||
|
||
/* 模板按钮 */
|
||
.title-price-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-section {
|
||
flex: 1;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 8rpx; /* 添加底部间距 */
|
||
}
|
||
|
||
.price-info {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
display: block; /* 使其成为块级元素 */
|
||
}
|
||
|
||
/* 表单样式 */
|
||
.form-container {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.input-container {
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 35rpx;
|
||
padding: 18rpx 30rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.form-input {
|
||
height: 46rpx;
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.placeholder-style {
|
||
color: #bdbdbd;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
/* 日期选择器 */
|
||
.date-container {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 46rpx; /* 与输入框高度一致 */
|
||
height: 100%;
|
||
}
|
||
|
||
.date-icon {
|
||
margin-right: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.icon-calendar {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.date-text {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
color: #bdbdbd;
|
||
}
|
||
|
||
/* 提示信息 */
|
||
.tip-container {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin: 36rpx 15rpx 10rpx;
|
||
}
|
||
|
||
.tip-icon {
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.icon-info {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.tip-text {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.tip-text-wrapper {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 16rpx; /* 与图标高度一致 */
|
||
}
|
||
|
||
|
||
|
||
/* 短信编辑区 */
|
||
.message-edit-section {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
/* 模板按钮 */
|
||
.template-button-container {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.template-button {
|
||
background-color: rgba(7, 193, 96, 0.1); /* 微信绿色的浅色背景 */
|
||
color: #07c160; /* 微信绿色文字 */
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 450;
|
||
padding: 0;
|
||
height: 38px;
|
||
width: 120px; /* 减小按钮宽度 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: none; /* 移除阴影 */
|
||
}
|
||
|
||
.template-button::after {
|
||
border: none; /* 移除按钮默认边框 */
|
||
}
|
||
|
||
/* 按钮悬停效果 */
|
||
.button-hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 文本输入区 */
|
||
.textarea-container {
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 10rpx;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.textarea-icon {
|
||
position: absolute;
|
||
left: 20rpx;
|
||
top: 20rpx;
|
||
z-index: 10
|
||
}
|
||
|
||
.icon-message {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.message-textarea {
|
||
width: 100%;
|
||
min-height: 200rpx;
|
||
font-size: 30rpx;
|
||
line-height: 44rpx; /* 设置行高与背景线条匹配 */
|
||
}
|
||
|
||
.textarea-placeholder {
|
||
color: #bdbdbd;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.actions-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
/* 字数统计 */
|
||
.character-count {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.count-text {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.count-limit {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* 预览按钮 */
|
||
.preview-button-container {
|
||
padding-right: 10rpx;
|
||
}
|
||
|
||
.preview-button {
|
||
background-color: #f2f2f2;
|
||
color: #666;
|
||
font-size: 26rpx;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 30rpx;
|
||
border: none;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 发送按钮 */
|
||
.send-button-container {
|
||
margin-top: 50rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.send-button {
|
||
background-color: #7ed321;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
border-radius: 40rpx;
|
||
border: none;
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.send-icon {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
/* 日期选择器弹窗 */
|
||
.date-picker-popup {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.date-picker-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.date-picker-content {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.date-picker-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.picker-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.picker-close {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.date-picker {
|
||
height: 400rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.picker-item {
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.date-picker-footer {
|
||
padding: 20rpx 30rpx;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.picker-confirm {
|
||
background-color: #7ed321;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
border-radius: 40rpx;
|
||
border: none;
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
/* 预览短信弹窗 */
|
||
.preview-popup {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.preview-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.preview-content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 80%;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.preview-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.preview-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.preview-close {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.preview-message {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.message-bubble {
|
||
background-color: #95ec69;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.message-text {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.receiver-info, .time-info {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.preview-footer {
|
||
padding: 20rpx 30rpx;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.preview-confirm {
|
||
background-color: #7ed321;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
border-radius: 40rpx;
|
||
border: none;
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
/* 模板选择弹窗 */
|
||
.template-popup {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.template-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.template-content {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
overflow: hidden;
|
||
height: 60%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.template-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.template-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.template-close {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.template-list {
|
||
flex: 1;
|
||
padding: 10rpx 20rpx;
|
||
}
|
||
|
||
.template-item {
|
||
padding: 20rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.template-preview {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
margin-bottom: 10rpx;
|
||
display: block;
|
||
}
|
||
|
||
.template-type {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
display: block;
|
||
}
|
||
</style> |