处理页面UI内容，发短信页面
This commit is contained in:
ituac
parent
a6d7fcaef7
commit
d75071cb23
1
src/assets/sound.svg
Normal file
1
src/assets/sound.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741578086789" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1277" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M494.933333 102.4c-10.24 0-17.066667-6.826667-17.066666-17.066667 0-27.306667-30.72-51.2-68.266667-51.2s-68.266667 23.893333-68.266667 51.2c0 10.24-6.826667 17.066667-17.066666 17.066667S307.2 95.573333 307.2 85.333333C307.2 37.546667 351.573333 0 409.6 0s102.4 37.546667 102.4 85.333333c0 10.24-6.826667 17.066667-17.066667 17.066667z" fill="" p-id="1278"></path><path d="M501.76 887.466667H68.266667c-37.546667 0-68.266667-30.72-68.266667-71.68 0-10.24 3.413333-20.48 6.826667-30.72 20.48-40.96 122.88-262.826667 122.88-440.32 0-153.6 122.88-279.893333 273.066666-279.893334s273.066667 126.293333 273.066667 279.893334c0 20.48 0 44.373333 3.413333 68.266666 0 10.24-6.826667 17.066667-13.653333 20.48-10.24 0-17.066667-6.826667-20.48-13.653333-3.413333-27.306667-3.413333-51.2-3.413333-71.68 0-136.533333-109.226667-245.76-238.933334-245.76s-238.933333 109.226667-238.933333 245.76c0 180.906667-95.573333 392.533333-126.293333 453.973333-3.413333 3.413333-3.413333 10.24-3.413334 13.653334 0 20.48 17.066667 37.546667 34.133334 37.546666h433.493333c10.24 0 17.066667 6.826667 17.066667 17.066667s-6.826667 17.066667-17.066667 17.066667z" fill="" p-id="1279"></path><path d="M95.573333 819.2h-6.826666c-10.24-3.413333-13.653333-13.653333-6.826667-23.893333 34.133333-78.506667 119.466667-276.48 119.466667-447.146667 0-116.053333 92.16-211.626667 204.8-211.626667 10.24 0 17.066667 6.826667 17.066666 17.066667s-10.24 17.066667-20.48 17.066667c-95.573333 0-170.666667 78.506667-170.666666 177.493333 0 177.493333-85.333333 382.293333-122.88 460.8-3.413333 6.826667-10.24 10.24-13.653334 10.24zM378.88 989.866667C303.786667 989.866667 238.933333 935.253333 238.933333 870.4c0-10.24 6.826667-17.066667 17.066667-17.066667h218.453333c10.24 0 17.066667 6.826667 17.066667 17.066667s-6.826667 17.066667-17.066667 17.066667H276.48c10.24 37.546667 54.613333 68.266667 105.813333 68.266666 44.373333 0 81.92-20.48 98.986667-54.613333 3.413333-6.826667 13.653333-10.24 23.893333-6.826667 6.826667 3.413333 10.24 13.653333 6.826667 23.893334-23.893333 44.373333-75.093333 71.68-133.12 71.68zM802.133333 1024c-122.88 0-221.866667-98.986667-221.866666-221.866667s98.986667-221.866667 221.866666-221.866666 221.866667 98.986667 221.866667 221.866666-98.986667 221.866667-221.866667 221.866667z m0-409.6c-102.4 0-187.733333 85.333333-187.733333 187.733333s85.333333 187.733333 187.733333 187.733334 187.733333-85.333333 187.733334-187.733334-85.333333-187.733333-187.733334-187.733333zM1006.933333 614.4c-3.413333 0-10.24 0-13.653333-3.413333l-68.266667-68.266667c-6.826667-6.826667-6.826667-17.066667 0-23.893333s17.066667-6.826667 23.893334 0l68.266666 68.266666c6.826667 6.826667 6.826667 17.066667 0 23.893334 0 3.413333-6.826667 3.413333-10.24 3.413333zM597.333333 614.4c-3.413333 0-10.24 0-13.653333-3.413333-6.826667-6.826667-6.826667-17.066667 0-23.893334l68.266667-68.266666c6.826667-6.826667 17.066667-6.826667 23.893333 0s6.826667 17.066667 0 23.893333l-68.266667 68.266667c0 3.413333-6.826667 3.413333-10.24 3.413333z" fill="" p-id="1280"></path><path d="M870.4 887.466667c-3.413333 0-10.24 0-13.653333-3.413334l-68.266667-68.266666c-3.413333-3.413333-3.413333-6.826667-3.413333-13.653334v-136.533333c0-10.24 6.826667-17.066667 17.066666-17.066667s17.066667 6.826667 17.066667 17.066667v129.706667l64.853333 64.853333c6.826667 6.826667 6.826667 17.066667 0 23.893333-3.413333 3.413333-10.24 3.413333-13.653333 3.413334z" fill="" p-id="1281"></path></svg>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
1
src/assets/staples.svg
Normal file
1
src/assets/staples.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741585018130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17408" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M831.199265 399.238022l-36.435768-36.451117a63.267826 63.267826 0 0 0-44.736811-18.527945 63.322061 63.322061 0 0 0-44.735788 18.527945l-0.590446 0.606819L402.138066 108.153016c0.253779-2.380205 0.396019-4.748131 0.396019-7.142663a63.276012 63.276012 0 0 0-18.543295-44.735788l-30.729823-30.745173a63.197218 63.197218 0 0 0-44.721462-18.526922 63.215637 63.215637 0 0 0-44.750114 18.526922L25.486413 263.833393a63.309781 63.309781 0 0 0-18.515665 44.735788c0 16.753536 6.679106 32.858296 18.527945 44.735788l30.758476 30.730847c12.357421 12.343095 28.53279 18.514642 44.722485 18.514642 2.381229 0 4.77576-0.113587 7.143686-0.394996l255.238662 302.53885-0.605796 0.606819c-11.877491 11.848839-18.527945 27.940297-18.527945 44.721462s6.650454 32.871599 18.527945 44.720438l36.451117 36.436791c12.356398 12.371747 28.53279 18.542271 44.721461 18.542271s32.378367-6.170524 44.721462-18.542271L831.199265 488.695271c24.700516-24.712795 24.700516-64.74343 0-89.457249zM443.929808 786.45836l-36.451118-36.435767 41.706808-41.691458-0.196475-0.240477 137.510589-137.489099c8.242715-8.242715 8.242715-21.585578 0-29.81499-8.242715-8.242715-21.572275-8.242715-29.828292 0L421.708758 675.754247 147.462222 350.684287 257.013071 241.120134c8.242715-8.228389 8.242715-21.571252 0-29.800663-8.229412-8.242715-21.572275-8.242715-29.816013 0L100.0771 338.397474l-29.841596-29.828293L308.538482 70.236527l29.941879 29.955183c-0.324387 0.281409-0.676404 0.507559-0.972139 0.803293l-45.482799 45.468474c-8.228389 8.242715-8.228389 21.586601 0 29.828293a21.073926 21.073926 0 0 0 14.921821 6.171547c5.38258 0 10.792789-2.057865 14.907495-6.171547l28.784522-28.814199 325.09145 274.24756-43.960123 43.961146c-8.242715 8.242715-8.242715 21.585578 0 29.813967 4.128009 4.142335 9.524915 6.171547 14.906472 6.171547 5.396906 0 10.792789-2.029212 14.907495-6.171547l46.496894-46.496894 0.253779 0.197497 41.691458-41.678154 36.451117 36.436791L443.929808 786.45836zM1007.760163 963.033585L740.121102 695.409873c-12.342071-12.343095-32.36404-12.343095-44.721462 0-12.343095 12.371747-12.343095 32.378367 0 44.735788l267.640085 267.610409c6.169501 6.171547 14.25872 9.243506 22.361242 9.243506 8.086149 0 16.175369-3.071959 22.360219-9.243506 12.356398-12.370724 12.356398-32.392693-0.001023-44.722485z" p-id="17409" fill="#07c160"></path></svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
1
src/assets/time-32.svg
Normal file
1
src/assets/time-32.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741578277834" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8942" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M737.792 489.984H534.528V285.696c0-18.432-14.848-33.28-33.28-33.28s-33.28 14.848-33.28 33.28v237.568c0 18.432 14.848 33.28 33.28 33.28h236.544c18.432 0 33.28-14.848 33.28-33.28s-14.848-33.28-33.28-33.28z" fill="#FA7268" p-id="8943"></path><path d="M512 64.512C264.704 64.512 64.512 264.704 64.512 512S264.704 959.488 512 959.488 959.488 759.296 959.488 512 758.784 64.512 512 64.512z m0 828.416c-209.92 0-380.928-171.008-380.928-380.928S302.08 131.072 512 131.072 892.928 302.08 892.928 512 721.92 892.928 512 892.928z" fill="#3E3A39" p-id="8944"></path></svg>
|
||||||
|
After Width: | Height: | Size: 891 B |
1
src/assets/time-48.svg
Normal file
1
src/assets/time-48.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741578277834" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8942" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M737.792 489.984H534.528V285.696c0-18.432-14.848-33.28-33.28-33.28s-33.28 14.848-33.28 33.28v237.568c0 18.432 14.848 33.28 33.28 33.28h236.544c18.432 0 33.28-14.848 33.28-33.28s-14.848-33.28-33.28-33.28z" fill="#FA7268" p-id="8943"></path><path d="M512 64.512C264.704 64.512 64.512 264.704 64.512 512S264.704 959.488 512 959.488 959.488 759.296 959.488 512 758.784 64.512 512 64.512z m0 828.416c-209.92 0-380.928-171.008-380.928-380.928S302.08 131.072 512 131.072 892.928 302.08 892.928 512 721.92 892.928 512 892.928z" fill="#3E3A39" p-id="8944"></path></svg>
|
||||||
|
After Width: | Height: | Size: 891 B |
1
src/assets/waring-16.svg
Normal file
1
src/assets/waring-16.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741579104872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12609" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M513.9 106.5C290 106.5 108.4 288 108.4 512c0 223.9 181.5 405.5 405.5 405.5 223.9 0 405.5-181.5 405.5-405.5-0.1-224-181.6-405.5-405.5-405.5z m0 772.3C311.3 878.8 147 714.5 147 511.9 147 309.3 311.2 145 513.9 145c202.6 0 366.8 164.2 366.8 366.9 0 202.6-164.2 366.9-366.8 366.9z m0 0" fill="#d81e06" p-id="12610"></path><path d="M455.9 743.6c0 32 25.9 57.9 57.9 57.9s57.9-25.9 57.9-57.9c0-20.7-11-39.8-29-50.2-17.9-10.3-40-10.3-57.9 0-17.8 10.4-28.9 29.5-28.9 50.2z m0 0M513.9 222.3c-20.5 0-40.1 8.1-54.6 22.6-14.5 14.5-22.6 34.1-22.6 54.6s57.9 326.9 57.9 328.2c0 5.1 2 10 5.7 13.7 3.6 3.6 8.5 5.7 13.7 5.7 10.4-0.6 18.7-8.9 19.3-19.3l57.9-328.2c0-20.5-8.1-40.1-22.6-54.6-14.6-14.6-34.3-22.7-54.7-22.7z m0 0" fill="#d81e06" p-id="12611"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
1
src/assets/waring-32.svg
Normal file
1
src/assets/waring-32.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741578229594" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5073" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M959.256366 512C959.256366 264.98713 759.01287 64.743634 512 64.743634 264.98713 64.743634 64.743634 264.98713 64.743634 512 64.743634 759.01287 264.98713 959.256366 512 959.256366 759.01287 959.256366 959.256366 759.01287 959.256366 512L959.256366 512 959.256366 512 959.256366 512 959.256366 512 959.256366 512ZM117.36203 512C117.36203 294.047467 294.047467 117.36203 512 117.36203 729.952533 117.36203 906.63797 294.047467 906.63797 512 906.63797 729.952533 729.952533 906.63797 512 906.63797 294.047467 906.63797 117.36203 729.952533 117.36203 512L117.36203 512 117.36203 512 117.36203 512 117.36203 512 117.36203 512Z" fill="#FC5143" p-id="5074"></path><path d="M484.457558 599.560299C484.457558 622.580963 495.008537 634.091122 516.110812 634.091122 537.213087 634.091122 547.764066 622.580963 547.764066 599.560299L547.764066 280.150193C547.764066 257.129529 537.213087 245.61937 516.110812 245.61937 495.008537 245.61937 484.457558 257.129529 484.457558 280.150193L484.457558 599.560299ZM478.702421 740.561158C480.62081 763.581821 493.090149 775.091981 516.110812 775.091981 539.131476 775.091981 551.600815 763.581821 553.519203 740.561158 551.600815 717.540494 539.131476 705.071155 516.110812 703.152767 493.090149 705.071155 480.62081 717.540494 478.702421 740.561158L478.702421 740.561158Z" fill="#FC5143" p-id="5075"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -1,167 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="test-component">
|
|
||||||
<view class="test-header" :style="{ backgroundColor: headerColor }">
|
|
||||||
<view class="test-icon" v-if="showIcon" @click="handleIconClick">
|
|
||||||
<uni-icons type="info" size="24" color="#FFFFFF"></uni-icons>
|
|
||||||
</view>
|
|
||||||
<text class="test-title">{{ title }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="test-content">
|
|
||||||
<text class="test-message">{{ message }}</text>
|
|
||||||
<view class="test-platform-info">
|
|
||||||
<text>当前平台: {{ platformName }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="test-button" @click="handleButtonClick">
|
|
||||||
<text class="button-text">{{ buttonText }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'CustomTestComponent',
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '测试组件'
|
|
||||||
},
|
|
||||||
message: {
|
|
||||||
type: String,
|
|
||||||
default: '这是一个测试组件，用于验证easycom是否正常工作'
|
|
||||||
},
|
|
||||||
headerColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#2979FF'
|
|
||||||
},
|
|
||||||
showIcon: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
buttonText: {
|
|
||||||
type: String,
|
|
||||||
default: '点击测试'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
platformName: '未知平台'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
console.log('CustomTestComponent 已创建');
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('CustomTestComponent 已挂载');
|
|
||||||
this.detectPlatform();
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
console.log('CustomTestComponent onLoad 触发');
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleIconClick() {
|
|
||||||
console.log('图标被点击');
|
|
||||||
this.$emit('icon-click');
|
|
||||||
},
|
|
||||||
handleButtonClick() {
|
|
||||||
console.log('按钮被点击');
|
|
||||||
this.$emit('button-click', { timestamp: Date.now() });
|
|
||||||
|
|
||||||
// 显示一个简单的提示
|
|
||||||
uni.showToast({
|
|
||||||
title: '测试成功',
|
|
||||||
icon: 'success',
|
|
||||||
duration: 2000
|
|
||||||
});
|
|
||||||
},
|
|
||||||
detectPlatform() {
|
|
||||||
// 使用条件编译检测平台
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
this.platformName = '微信小程序';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef MP-ALIPAY
|
|
||||||
this.platformName = '支付宝小程序';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef MP-TOUTIAO
|
|
||||||
this.platformName = '头条小程序';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef MP-BAIDU
|
|
||||||
this.platformName = '百度小程序';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef H5
|
|
||||||
this.platformName = 'H5';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
this.platformName = 'APP';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
console.log(`当前运行平台: ${this.platformName}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.test-component {
|
|
||||||
margin: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-header {
|
|
||||||
padding: 15px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-title {
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: 15px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-content {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-message {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333333;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-platform-info {
|
|
||||||
margin: 15px 0;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-button {
|
|
||||||
margin-top: 20px;
|
|
||||||
background-color: #2979FF;
|
|
||||||
padding: 12px 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-text {
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<!-- 顶部导航栏 -->
|
|
||||||
<uni-nav-bar
|
|
||||||
:title="titles"
|
|
||||||
:status-bar="true"
|
|
||||||
fixed
|
|
||||||
left-icon="back"
|
|
||||||
:border="false"
|
|
||||||
background-color="#FFFFFF"
|
|
||||||
color="#000000"
|
|
||||||
/>
|
|
||||||
<!-- 导航栏占位，确保内容不被覆盖 -->
|
|
||||||
<view class="nav-placeholder"></view>
|
|
||||||
<div class="slot-wrapper">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
<tui-tabbar :current="current" backdropFilter backgroundColor="#f8f8f8" :tabBar="tabbar" color="#777" selectedColor="#AC9157" @click="tabbarSwitch"></tui-tabbar>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
import TuiTabbar from "@/components/thorui/tui-tabbar/tui-tabbar.vue";
|
|
||||||
import {tabbarState} from "@/store/tabbar";
|
|
||||||
import UniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
|
|
||||||
|
|
||||||
interface TabbarItem {
|
|
||||||
pagePath: string;
|
|
||||||
text: string;
|
|
||||||
iconPath: string;
|
|
||||||
selectedIconPath: string;
|
|
||||||
verify?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tabbar = ref<TabbarItem[]>([
|
|
||||||
{
|
|
||||||
pagePath: '/pages/index/index',
|
|
||||||
text: '写信',
|
|
||||||
iconPath: '/static/images/send.png',
|
|
||||||
selectedIconPath: '/static/images/send-active.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pagePath: '/pages/mailbox/index',
|
|
||||||
text: '信箱',
|
|
||||||
iconPath: '/static/images/mailbox.png',
|
|
||||||
selectedIconPath: '/static/images/mailbox-active.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pagePath: '/pages/mine/index',
|
|
||||||
text: '我的',
|
|
||||||
iconPath: '/static/images/mine.png',
|
|
||||||
selectedIconPath: '/static/images/mine-active.png',
|
|
||||||
verify: true,
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
|
|
||||||
// 定义初始化页面的页数
|
|
||||||
const current = computed(() => tabbarState.currentTab.value);
|
|
||||||
|
|
||||||
//定义当前顶部导航的Title文案
|
|
||||||
const titles = ref<string>("");
|
|
||||||
|
|
||||||
const navBarHeight = ref(64); // 默认值 64px
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const getTitle = () => {
|
|
||||||
let title = "";
|
|
||||||
switch (tabbarState.currentTab.value) {
|
|
||||||
case 0:
|
|
||||||
title = "首页";
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
title = "信箱";
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
title = "我的";
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
title = "";
|
|
||||||
}
|
|
||||||
titles.value = title;
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// 获取导航文案
|
|
||||||
getTitle();
|
|
||||||
|
|
||||||
// 计算导航栏高度
|
|
||||||
calcNavBarHeight();
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// 点击切换页面的事件
|
|
||||||
const tabbarSwitch = (e: any) => {
|
|
||||||
const index = typeof e === 'number' ? e : e.index;
|
|
||||||
|
|
||||||
// 如果点击当前已选中的标签，不执行任何操作
|
|
||||||
if (index === current.value) return;
|
|
||||||
|
|
||||||
console.log("触发切换页面:", index);
|
|
||||||
|
|
||||||
//获取登录状态，此处默认未登录
|
|
||||||
//跳转切换逻辑需自行实现
|
|
||||||
let isLogin = false;
|
|
||||||
if (e.verify && !isLogin) {
|
|
||||||
console.log("需要登陆才可以访问")
|
|
||||||
}else{
|
|
||||||
tabbarState.setCurrentTab(index);
|
|
||||||
|
|
||||||
// 预加载页面，然后再切换
|
|
||||||
Promise.resolve().then(() => {
|
|
||||||
uni.switchTab({
|
|
||||||
url: tabbar.value[index].pagePath
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const calcNavBarHeight = () => {
|
|
||||||
try {
|
|
||||||
const sysInfo = uni.getSystemInfoSync();
|
|
||||||
const statusBarHeight = sysInfo.statusBarHeight || 20;
|
|
||||||
const navContentHeight = 44; // 导航栏内容高度通常是44px
|
|
||||||
navBarHeight.value = statusBarHeight + navContentHeight;
|
|
||||||
|
|
||||||
// 设置CSS变量以供样式使用
|
|
||||||
document.documentElement.style.setProperty('--nav-bar-height', `${navBarHeight.value}px`);
|
|
||||||
} catch (e) {
|
|
||||||
// 故障保护
|
|
||||||
navBarHeight.value = 64;
|
|
||||||
document.documentElement.style.setProperty('--nav-bar-height', `64px`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* 根级别CSS变量 */
|
|
||||||
:root {
|
|
||||||
--nav-bar-height: 124px; /* 默认值，会被JS动态更新 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 导航栏占位，确保内容不被导航栏覆盖 */
|
|
||||||
.nav-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: var(--nav-bar-height);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slot-wrapper{
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* 内容区域到底部tabbar的距离 */
|
|
||||||
padding-bottom: 50px;
|
|
||||||
position: relative;
|
|
||||||
/* 消除所有可能的边距 */
|
|
||||||
margin: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
/* 确保页面级别设置正确 */
|
|
||||||
page {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: #ffffff;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
4
src/constants/glable.ts
Normal file
4
src/constants/glable.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// 使用绝对路径
|
||||||
|
export const USE_ABS_PATH = "/";
|
||||||
|
|
||||||
|
|
||||||
@ -28,6 +28,18 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的"
|
"navigationBarTitleText": "我的"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/sending/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "发信息"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/planning/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "计划"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
@ -14,10 +14,7 @@
|
|||||||
<text class="message-type-text">道歉、告白、时空信也</text>
|
<text class="message-type-text">道歉、告白、时空信也</text>
|
||||||
<text class="message-type-text">可以发送哦</text>
|
<text class="message-type-text">可以发送哦</text>
|
||||||
<view class="action-button">
|
<view class="action-button">
|
||||||
<button class="write-button">开始写信</button>
|
<button class="write-button" @tap="navigateToSending">开始写信</button>
|
||||||
</view>
|
|
||||||
<view class="action-button">
|
|
||||||
<button class="write-button">开始写信</button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="illustration">
|
<view class="illustration">
|
||||||
@ -39,7 +36,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="function-right">
|
<view class="function-right">
|
||||||
<!-- "去拨打"按钮 -->
|
<!-- "去拨打"按钮 -->
|
||||||
<button class="function-button color-button" hover-class="button-hover">
|
<button class="function-button color-button" hover-class="button-hover" @tap="navigateToSending">
|
||||||
<view class="button-content">
|
<view class="button-content">
|
||||||
<text>去拨打</text>
|
<text>去拨打</text>
|
||||||
<text class="arrow">›</text>
|
<text class="arrow">›</text>
|
||||||
@ -60,7 +57,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="function-right">
|
<view class="function-right">
|
||||||
<!-- "去传话"按钮 -->
|
<!-- "去传话"按钮 -->
|
||||||
<button class="function-button color-button" hover-class="button-hover">
|
<button class="function-button color-button" hover-class="button-hover" @tap="navigateToSending">
|
||||||
<view class="button-content">
|
<view class="button-content">
|
||||||
<text>去传话</text>
|
<text>去传话</text>
|
||||||
<text class="arrow">›</text>
|
<text class="arrow">›</text>
|
||||||
@ -81,7 +78,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="function-right">
|
<view class="function-right">
|
||||||
<button class="function-button color-button" hover-class="button-hover">
|
<button class="function-button color-button" hover-class="button-hover" @tap="navigateToPlanning">
|
||||||
<view class="button-content">
|
<view class="button-content">
|
||||||
<text>{{ card.buttonText }}</text>
|
<text>{{ card.buttonText }}</text>
|
||||||
<text class="arrow">›</text>
|
<text class="arrow">›</text>
|
||||||
@ -100,9 +97,6 @@
|
|||||||
<text class="error-text">{{ loadError }}</text>
|
<text class="error-text">{{ loadError }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@ -111,6 +105,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
||||||
import { onPullDownRefresh } from '@dcloudio/uni-app';
|
import { onPullDownRefresh } from '@dcloudio/uni-app';
|
||||||
|
import {useSwitchTab} from "@/stores/switchTab";
|
||||||
|
|
||||||
interface Card {
|
interface Card {
|
||||||
id: number;
|
id: number;
|
||||||
@ -128,11 +123,24 @@ interface IndexConfig {
|
|||||||
|
|
||||||
// 动态加载的卡片数据
|
// 动态加载的卡片数据
|
||||||
const additionalCards = ref<Card[]>([]);
|
const additionalCards = ref<Card[]>([]);
|
||||||
|
|
||||||
// 遮罩层状态
|
// 遮罩层状态
|
||||||
const isLoading = ref<boolean>(false);
|
const isLoading = ref<boolean>(false);
|
||||||
const loadError = ref<string>('');
|
const loadError = ref<string>('');
|
||||||
|
|
||||||
|
// 导航到消息页面
|
||||||
|
const navigateToSending = (): void => {
|
||||||
|
console.log("触发跳转其他页面")
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/sending/index',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 导航到计划页面
|
||||||
|
const navigateToPlanning = (): void => {
|
||||||
|
console.log("触发跳转其他页面")
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/planning/index',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 获取额外卡片的数据
|
// 获取额外卡片的数据
|
||||||
const fetchAdditionalCards = (): void => {
|
const fetchAdditionalCards = (): void => {
|
||||||
@ -169,9 +177,24 @@ const fetchAdditionalCards = (): void => {
|
|||||||
}, 1000); // 模拟1秒的加载时间
|
}, 1000); // 模拟1秒的加载时间
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// 初始化tab的值
|
||||||
|
const initLastPage = (): void => {
|
||||||
|
const switchTab = useSwitchTab();
|
||||||
|
const currentPages = getCurrentPages();
|
||||||
|
const lastPage = currentPages[currentPages.length - 1];
|
||||||
|
const page = lastPage ? String(lastPage.route) : '';
|
||||||
|
switchTab.setLastPage(page);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// 生命周期钩子
|
// 生命周期钩子
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log("内容已载入")
|
console.log("内容已载入")
|
||||||
|
// 初始化页面tab的数据
|
||||||
|
initLastPage();
|
||||||
|
|
||||||
|
// 加载首页数据
|
||||||
fetchAdditionalCards();
|
fetchAdditionalCards();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -7,10 +7,16 @@ TEST
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {onTabItemTap} from "@dcloudio/uni-app";
|
import {onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import {useSwitchTab} from "@/stores/switchTab";
|
||||||
|
import {USE_ABS_PATH} from "@/constants/glable";
|
||||||
|
|
||||||
const isLogin = ref<boolean>(false);
|
const isLogin = ref<boolean>(false);
|
||||||
|
|
||||||
let originalPagePath = "";
|
|
||||||
|
|
||||||
|
const switchTab = useSwitchTab();
|
||||||
|
const originalPagePath = switchTab.lastPage;
|
||||||
|
|
||||||
|
|
||||||
onTabItemTap((item)=>{
|
onTabItemTap((item)=>{
|
||||||
console.log("触发切换Tab事件：",item)
|
console.log("触发切换Tab事件：",item)
|
||||||
@ -18,12 +24,9 @@ onTabItemTap((item)=>{
|
|||||||
const currentPages = getCurrentPages();
|
const currentPages = getCurrentPages();
|
||||||
console.log("获取到的页面地址：",currentPages)
|
console.log("获取到的页面地址：",currentPages)
|
||||||
|
|
||||||
|
isLogin.value = true;
|
||||||
|
|
||||||
originalPagePath = item.pagePath;
|
|
||||||
|
|
||||||
if(!isLogin.value){
|
if(!isLogin.value){
|
||||||
console.log("当前还没有登陆",item)
|
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: '请先登录',
|
content: '请先登录',
|
||||||
@ -34,9 +37,10 @@ onTabItemTap((item)=>{
|
|||||||
url: '/pages/login/login',
|
url: '/pages/login/login',
|
||||||
});
|
});
|
||||||
} else if (res.cancel) {
|
} else if (res.cancel) {
|
||||||
|
console.log("当前转发地址：",originalPagePath)
|
||||||
// 用户点击“取消”，返回原始页面
|
// 用户点击“取消”，返回原始页面
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: originalPagePath,
|
url: USE_ABS_PATH + originalPagePath,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
13
src/pages/planning/index.vue
Normal file
13
src/pages/planning/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<h1>已跳计划页面详情页</h1>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
924
src/pages/sending/index.vue
Normal file
924
src/pages/sending/index.vue
Normal file
@ -0,0 +1,924 @@
|
|||||||
|
<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>
|
||||||
@ -1,8 +0,0 @@
|
|||||||
export const tabbarState = {
|
|
||||||
currentTab: ref(0),
|
|
||||||
|
|
||||||
setCurrentTab(index: number) {
|
|
||||||
this.currentTab.value = index;
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
19
src/stores/switchTab.ts
Normal file
19
src/stores/switchTab.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
|
||||||
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建并导出跳转前页面存储的 Vue3 store 对象
|
||||||
|
* @function
|
||||||
|
* @returns {DictionaryStore} - 返回跳转前页面存储对象
|
||||||
|
*/
|
||||||
|
export const useSwitchTab = defineStore("switchTab",{
|
||||||
|
state: () => ({
|
||||||
|
lastPage: "",
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
setLastPage(page: string) {
|
||||||
|
this.lastPage = page;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user