ea
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"custom-nav": "/components/custom-nav/custom-nav"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { client } from "../../../utils/api"
|
||||
import { feedback, uploadavatar } from "../../../utils/request"
|
||||
|
||||
interface FeedbackType {
|
||||
key: number
|
||||
label: string
|
||||
icon: string
|
||||
active: boolean
|
||||
}
|
||||
|
||||
interface submits {
|
||||
categoryes: number[],
|
||||
content: string,
|
||||
images: string[],
|
||||
phone: string
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
description: '',
|
||||
contact: '',
|
||||
types: [
|
||||
{ key: 1, label: '功能问题', icon: '/static/images/my/debug.png', active: true },
|
||||
{ key: 2, label: '体验优化', active: false, icon: '/static/images/my/star.png' },
|
||||
{ key: 3, label: '内容建议', active: false, icon: '/static/images/my/msg.png' },
|
||||
{ key: 4, label: '其他问题', active: false, icon: '/static/images/my/more.png' },
|
||||
] as FeedbackType[],
|
||||
datas: {} as submits
|
||||
},
|
||||
onLoad() {
|
||||
this.setData({ datas: { categoryes: [], content: '', images: [], phone: '' } })
|
||||
},
|
||||
handleBack() {
|
||||
wx.navigateBack({
|
||||
fail: () => wx.switchTab({ url: '/pages/my/my' }),
|
||||
})
|
||||
},
|
||||
handleRecord() {
|
||||
wx.showToast({ title: '反馈记录', icon: 'none' })
|
||||
},
|
||||
handleTypeTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const key = e.currentTarget.dataset.key
|
||||
|
||||
this.setData({
|
||||
types: this.data.types.map((item) => ({
|
||||
...item,
|
||||
active: item.key === key ? !item.active : item.active,
|
||||
})),
|
||||
})
|
||||
},
|
||||
handleDescriptionInput(e: any) {
|
||||
this.setData({ description: e.detail.value })
|
||||
},
|
||||
handleContactInput(e: any) {
|
||||
this.setData({ contact: e.detail.value })
|
||||
},
|
||||
handleUpload() {
|
||||
let that = this;
|
||||
wx.showLoading({ mask: true, title: '请稍后...' })
|
||||
wx.chooseMedia({
|
||||
count: 3 - this.data.datas.images.length,
|
||||
mediaType: ['image', 'video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
maxDuration: 30,
|
||||
camera: 'back',
|
||||
success(res) {
|
||||
client.upload(res.tempFiles[0].tempFilePath, {}).then((res: any) => {
|
||||
wx.hideLoading();
|
||||
if (res.code == 0) {
|
||||
let images = that.data.datas;
|
||||
images.images.push(res.data.url);
|
||||
that.setData({ datas: images })
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
wx.hideLoading();
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
let that = this;
|
||||
if (!this.data.description.trim()) {
|
||||
wx.showToast({ title: '请填写问题描述', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
let datas = this.data.datas;
|
||||
let types: FeedbackType[] = [];
|
||||
for (let q = 0; q < this.data.types.length; q++) {
|
||||
let item = that.data.types[q];
|
||||
if (item.active) {
|
||||
datas.categoryes.push(item.key)
|
||||
}
|
||||
item.active = false;
|
||||
types.push(item);
|
||||
}
|
||||
|
||||
datas.content = this.data.description;
|
||||
datas.phone = this.data.contact;
|
||||
|
||||
feedback(JSON.stringify(datas)).then((res: any) => {
|
||||
if (!res.code) {
|
||||
this.setData({ datas: { categoryes: [], content: '', images: [], phone: '' }, contact: '', description: '', types: types })
|
||||
|
||||
wx.showModal({ title: '温馨提示', content: '提交成功', showCancel: false });
|
||||
} else {
|
||||
wx.showModal({ title: '温馨提示', content: '提交失败, 请稍后重试', showCancel: false });
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,86 @@
|
||||
<view class="feedback-page">
|
||||
<custom-nav padding-x="42">
|
||||
<view class="feedback-nav">
|
||||
<view class="nav-back" bindtap="handleBack">
|
||||
<text></text>
|
||||
</view>
|
||||
<text class="nav-title">意见反馈</text>
|
||||
<view class="record-link" bindtap="handleRecord"></view>
|
||||
</view>
|
||||
</custom-nav>
|
||||
|
||||
<view class="feedback-content">
|
||||
<view class="hero-row">
|
||||
<image class="hero-illustration" src="/static/images/my/yjfk_top.png" mode="widthFix"></image>
|
||||
<!-- <view class="hero-copy">
|
||||
<view class="hero-title">
|
||||
<text>你的意见对我们很</text>
|
||||
<text class="accent">重要</text>
|
||||
</view>
|
||||
<text class="hero-desc">欢迎提出宝贵的建议</text>
|
||||
<text class="hero-desc">帮助我们做得更好</text>
|
||||
<view class="hero-line"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="form-card type-card">
|
||||
<view class="card-title">
|
||||
<image class="title-icon type-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<text>反馈类型</text>
|
||||
<text class="optional">（可多选）</text>
|
||||
</view>
|
||||
<view class="type-grid">
|
||||
<view wx:for="{{types}}" wx:key="key" class="type-chip {{item.active ? 'active' : 'gray'}}"
|
||||
data-key="{{item.key}}" bindtap="handleTypeTap">
|
||||
<image class="type-chip-icon icon-placeholder" src="{{item.icon}}" mode="aspectFit"></image>
|
||||
<text>{{item.label}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-card desc-card">
|
||||
<view class="card-title">
|
||||
<image class="title-icon pen-icon icon-placeholder" src="/static/images/my/edit.png" mode="aspectFit"></image>
|
||||
<text>问题描述</text>
|
||||
</view>
|
||||
<view class="textarea-shell">
|
||||
<textarea class="desc-input" value="{{description}}" maxlength="500" placeholder="请详细描述您遇到的问题或建议…"
|
||||
placeholder-class="placeholder" bindinput="handleDescriptionInput"></textarea>
|
||||
<text class="counter">{{description.length}}/500</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-card image-card">
|
||||
<view class="card-title">
|
||||
<image class="title-icon image-title-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit">
|
||||
</image>
|
||||
<text>添加图片</text>
|
||||
<text class="optional">（选填）</text>
|
||||
</view>
|
||||
<view style="display: flex;flex-direction: row;gap: 20;">
|
||||
<view class="upload-box image-full" wx:for="{{datas.images}}" wx:key="index" bindtap="handleUpload">
|
||||
<image class="plus-icon icon-placeholder" src="{{item}}"></image>
|
||||
</view>
|
||||
<view class="upload-box" wx:if="{{datas.images.length < 3}}" bindtap="handleUpload">
|
||||
<image class="plus-icon icon-placeholder" src="/static/images/my/Addimages.png"
|
||||
style="width: 26rpx;height: 26rpx;"></image>
|
||||
<text>上传图片</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="upload-tip">最多可上传 3 张图片</text>
|
||||
</view>
|
||||
|
||||
<view class="form-card contact-card">
|
||||
<view class="card-title">
|
||||
<image class="title-icon phone-icon icon-placeholder" src="/static/images/my/call.png" mode="aspectFit"></image>
|
||||
<text>联系方式</text>
|
||||
<text class="optional">（选填）</text>
|
||||
</view>
|
||||
<input class="contact-input" value="{{contact}}" placeholder="请输入手机号或微信号，方便我们与您联系" placeholder-class="placeholder"
|
||||
bindinput="handleContactInput" />
|
||||
</view>
|
||||
|
||||
<view class="submit-btn" bindtap="handleSubmit">提交反馈</view>
|
||||
<view class="thanks-text">感谢您的反馈，我们会认真对待每一条建议 💜</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,441 @@
|
||||
page {
|
||||
min-height: 100vh;
|
||||
background: #fbfaff;
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.feedback-page {
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 78% 4%, rgba(137, 95, 255, 0.16), transparent 20%),
|
||||
radial-gradient(circle at 18% 8%, rgba(118, 129, 255, 0.12), transparent 24%),
|
||||
linear-gradient(180deg, #f7f3ff 0%, #fbfaff 48%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.feedback-nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-back text {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #111827;
|
||||
border-bottom: 5rpx solid #111827;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 31rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.record-link {
|
||||
width: 142rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #111827;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.feedback-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
padding: 26rpx 38rpx 38rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero-row {
|
||||
/* min-height: 184rpx; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.hero-illustration {
|
||||
/* width: 250rpx;
|
||||
height: 174rpx; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.paper {
|
||||
width: 116rpx;
|
||||
height: 126rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
padding: 30rpx 20rpx 0 34rpx;
|
||||
background: linear-gradient(145deg, #ffffff, #ece5ff);
|
||||
box-shadow: 0 14rpx 24rpx rgba(120, 92, 219, 0.2);
|
||||
transform: rotate(-7deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.paper text {
|
||||
height: 8rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #cfc2ff;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
width: 114rpx;
|
||||
height: 82rpx;
|
||||
margin-left: -168rpx;
|
||||
margin-top: 44rpx;
|
||||
border-radius: 42rpx 42rpx 42rpx 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
background: linear-gradient(135deg, #9d79ff, #6d4cef);
|
||||
box-shadow: 0 16rpx 24rpx rgba(108, 76, 239, 0.25);
|
||||
}
|
||||
|
||||
.chat-bubble text {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.pencil {
|
||||
width: 76rpx;
|
||||
height: 22rpx;
|
||||
margin-left: 92rpx;
|
||||
margin-top: -18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(90deg, #7654f7 0 20%, #ffd05e 20% 78%, #ff6b91 78% 100%);
|
||||
transform: rotate(-42deg);
|
||||
}
|
||||
|
||||
.heart {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: -40rpx;
|
||||
margin-top: -88rpx;
|
||||
border-radius: 50% 50% 8rpx 50%;
|
||||
background: linear-gradient(135deg, #ff9ec2, #ff679a);
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 8rpx 14rpx rgba(255, 105, 154, 0.22);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.25;
|
||||
font-weight: 900;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: #744dff;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
margin-top: 14rpx;
|
||||
color: #6c7280;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.hero-line {
|
||||
width: 72rpx;
|
||||
height: 30rpx;
|
||||
margin-top: 8rpx;
|
||||
border-bottom: 5rpx solid #7c57ff;
|
||||
border-radius: 50%;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.form-card {
|
||||
border-radius: 18rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: 0 8rpx 24rpx rgba(84, 91, 148, 0.06);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
color: #111827;
|
||||
font-size: 25rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.optional {
|
||||
color: #8b91a1;
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #7454ff;
|
||||
background: #f3efff;
|
||||
}
|
||||
|
||||
.title-icon text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.type-icon text {
|
||||
width: 17rpx;
|
||||
height: 19rpx;
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 5rpx 5rpx 9rpx 9rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pen-icon text {
|
||||
width: 19rpx;
|
||||
height: 19rpx;
|
||||
border-left: 5rpx solid currentColor;
|
||||
border-bottom: 5rpx solid currentColor;
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.image-title-icon text {
|
||||
width: 18rpx;
|
||||
height: 16rpx;
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 3rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.phone-icon text {
|
||||
width: 18rpx;
|
||||
height: 22rpx;
|
||||
border-left: 5rpx solid currentColor;
|
||||
border-bottom: 5rpx solid currentColor;
|
||||
border-radius: 0 0 0 10rpx;
|
||||
transform: rotate(-25deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.type-grid {
|
||||
margin-top: 22rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.type-chip {
|
||||
height: 56rpx;
|
||||
border-radius: 11rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
color: #737887;
|
||||
font-size: 20rpx;
|
||||
font-weight: 800;
|
||||
background: #f8f8fb;
|
||||
border: 2rpx solid #ececf3;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.type-chip.active {
|
||||
color: #6e4cff;
|
||||
background: #ffffff;
|
||||
border-color: #805cff;
|
||||
filter: hue-rotate(180deg); /* 旋转色相 */
|
||||
filter: sepia(1) saturate(5) hue-rotate(200deg); /* 强制转为暖色调 */
|
||||
}
|
||||
|
||||
.type-chip-icon {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bug-icon {
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid currentColor;
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
border-radius: 5rpx;
|
||||
border: 4rpx solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.message-icon,
|
||||
.more-icon {
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.desc-card {
|
||||
padding-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.textarea-shell {
|
||||
min-height: 158rpx;
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx 20rpx 34rpx;
|
||||
border-radius: 14rpx;
|
||||
border: 1rpx solid #e4e4eb;
|
||||
background: #fbfbfd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.desc-input {
|
||||
width: 100%;
|
||||
height: 104rpx;
|
||||
color: #2d3340;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #a2a6b2;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: #8f94a2;
|
||||
font-size: 18rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.image-card {
|
||||
min-height: 218rpx;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
width: 106rpx;
|
||||
height: 106rpx;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 13rpx;
|
||||
border: 2rpx dashed #d8d1f8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
/* color: #7a57ff; */
|
||||
font-size: 19rpx;
|
||||
/* font-weight: 700; */
|
||||
margin-right: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.upload-box.image-full image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plus-icon {
|
||||
font-size: 44rpx;
|
||||
line-height: 0.75;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
margin-top: 12rpx;
|
||||
color: #9ca0ad;
|
||||
font-size: 18rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
min-height: 152rpx;
|
||||
}
|
||||
|
||||
.contact-input {
|
||||
height: 54rpx;
|
||||
margin-top: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #e6e6ee;
|
||||
background: #fbfbfd;
|
||||
color: #2d3340;
|
||||
font-size: 21rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
height: 68rpx;
|
||||
margin: 12rpx 14rpx 0;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(180deg, #a45fff 0%, #6d2df1 100%);
|
||||
box-shadow: 0 12rpx 24rpx rgba(111, 48, 241, 0.24);
|
||||
}
|
||||
|
||||
.thanks-text {
|
||||
margin-top: 8rpx;
|
||||
text-align: center;
|
||||
color: #969aa7;
|
||||
font-size: 19rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
Reference in New Issue
Block a user