89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
<template>
|
|
<view class="feedback-page">
|
|
<view class="hero-card">
|
|
<TnIcon name="service" :size="54" color="#F97316" />
|
|
<view>
|
|
<text class="hero-title">帮助与反馈</text>
|
|
<text class="hero-desc">告诉我们你遇到的问题或想要的功能。</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-card">
|
|
<TnInput v-model="content" type="textarea" placeholder="请输入反馈内容..."
|
|
:border="false" :max-length="500" />
|
|
</view>
|
|
|
|
<TnButton text-color="#FFFFFF" shape="round" :bold="true" :custom-style="primaryButtonStyle"
|
|
width="100%" height="88" :font-size="28" @click="submitFeedback">
|
|
提交反馈
|
|
</TnButton>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
|
|
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
|
|
import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'
|
|
|
|
const content = ref('')
|
|
const primaryButtonStyle = {
|
|
background: 'linear-gradient(135deg, #F97316, #FB923C)',
|
|
}
|
|
|
|
function submitFeedback() {
|
|
if (!content.value.trim()) {
|
|
uni.showToast({ title: '请先填写反馈内容', icon: 'none' })
|
|
return
|
|
}
|
|
const list = uni.getStorageSync('feedbackList') || []
|
|
list.unshift({ content: content.value.trim(), createdAt: Date.now() })
|
|
uni.setStorageSync('feedbackList', list)
|
|
content.value = ''
|
|
uni.showToast({ title: '感谢反馈', icon: 'success' })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.feedback-page {
|
|
min-height: 100vh;
|
|
background: #F8FAFC;
|
|
padding: 28rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hero-card,
|
|
.form-card {
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.hero-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
padding: 28rpx;
|
|
}
|
|
|
|
.hero-title {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: 900;
|
|
color: #0F172A;
|
|
}
|
|
|
|
.hero-desc {
|
|
display: block;
|
|
margin-top: 8rpx;
|
|
font-size: 25rpx;
|
|
color: #64748B;
|
|
}
|
|
|
|
.form-card {
|
|
margin: 24rpx 0;
|
|
padding: 24rpx;
|
|
min-height: 260rpx;
|
|
}
|
|
</style>
|