12 changed files with 649 additions and 567 deletions
-
10pages.json
-
4pages/home/home.vue
-
24pages/user/user.vue
-
50subpkg/pages/activity-detail/activity-detail.vue
-
137subpkg/pages/activity-list/activity-list.vue
-
10subpkg/pages/book-detail/book-detail.vue
-
3subpkg/pages/book-list/book-list.vue
-
174subpkg/pages/collect-list/collect-list.vue
-
87subpkg/pages/feedback-detail/feedback-detail.vue
-
122subpkg/pages/feedback-list/feedback-list.vue
-
285subpkg/pages/feedback/feedback.vue
-
2subpkg/pages/reader-card/reader-card.vue
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<view class="feedback-detail-page"> |
|||
<view class="section"> |
|||
<text class="subject">{{ detail.subject }}</text> |
|||
<view class="section-content">{{ detail.content }}</view> |
|||
<text class="time">{{ detail.createTime }}</text> |
|||
</view> |
|||
|
|||
<view class="section reply-section"> |
|||
<view class="section-title">馆方回复</view> |
|||
<view class="section-content" v-if="detail.reply">{{ detail.reply }}</view> |
|||
<view class="section-content no-reply" v-else>未回复</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
detail: {} |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
if (options.item) { |
|||
this.detail = JSON.parse(decodeURIComponent(options.item)); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.feedback-detail-page { |
|||
padding: 15px; |
|||
background-color: #f7f8fa; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.section { |
|||
background-color: #fff; |
|||
border-radius: 10px; |
|||
padding: 15px; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.section-content { |
|||
font-size: 15px; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.section-content:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.subject { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
display: block; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.time { |
|||
font-size: 12px; |
|||
color: #999; |
|||
display: block; |
|||
text-align: right; |
|||
} |
|||
|
|||
.no-reply { |
|||
color: #999; |
|||
font-style: italic; |
|||
} |
|||
|
|||
.reply-section { |
|||
background-color: #f0f9ff; |
|||
} |
|||
</style> |
|||
@ -1,86 +1,245 @@ |
|||
<template> |
|||
<!-- :style="{ bottom: bottom + 'px' }" --> |
|||
<view class="comment-container" > |
|||
<uni-easyinput |
|||
v-model="value" |
|||
type="textarea" |
|||
placeholder="HI，请留下您的留言吧!" |
|||
:inputBorder="false" |
|||
></uni-easyinput> |
|||
<button class="commit" type="primary" :disabled="!value" @click="onBtnClick"> |
|||
提交 |
|||
</button> |
|||
<view class="feedback-container"> |
|||
<view class="form-box"> |
|||
<view class="item"> |
|||
<text class="label">姓名</text> |
|||
<input |
|||
class="input" |
|||
placeholder="请输入姓名" |
|||
v-model="formData.name" |
|||
:disabled="hasNickname" |
|||
/> |
|||
</view> |
|||
<view class="item"> |
|||
<text class="label">读者证</text> |
|||
<input |
|||
class="input" |
|||
placeholder="请输入读者证号" |
|||
v-model="formData.readerCard" |
|||
disabled |
|||
/> |
|||
</view> |
|||
<view class="item"> |
|||
<text class="label">主题</text> |
|||
<input |
|||
class="input" |
|||
placeholder="请输入主题（最少5个字）" |
|||
v-model="formData.subject" |
|||
maxlength="50" |
|||
/> |
|||
</view> |
|||
<view class="item"> |
|||
<text class="label">联系方式/手机号码</text> |
|||
<input |
|||
class="input" |
|||
placeholder="请输入手机号码" |
|||
v-model="formData.phone" |
|||
type="number" |
|||
maxlength="11" |
|||
/> |
|||
</view> |
|||
<view class="item textarea-item"> |
|||
<text class="label">您的建议或意见</text> |
|||
<textarea |
|||
class="textarea" |
|||
placeholder="HI，请留下您的留言吧!（最少10个字）" |
|||
v-model="formData.content" |
|||
:maxlength="500" |
|||
/> |
|||
</view> |
|||
<button class="commit" type="primary" @click="onBtnClick">提交</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { userArticleComment } from 'api/user'; |
|||
import { getCurrentReaderCard } from '@/utils/storage'; |
|||
|
|||
const USER_KEY = 'user-info'; |
|||
|
|||
export default { |
|||
name: 'article-comment-commit', |
|||
props: { |
|||
}, |
|||
data() { |
|||
return { |
|||
value: '', |
|||
bottom: 0 |
|||
hasNickname: false, |
|||
formData: { |
|||
name: '', |
|||
readerCard: '', |
|||
subject: '', |
|||
phone: '', |
|||
content: '' |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
// 检测软键盘的变化 |
|||
uni.onKeyboardHeightChange(({ height }) => { |
|||
this.bottom = height; |
|||
}); |
|||
onLoad() { |
|||
this.loadReaderCardInfo(); |
|||
this.loadUserInfo(); |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 发送按钮点击事件 |
|||
*/ |
|||
async onBtnClick() { |
|||
// 展示加载框 |
|||
async loadReaderCardInfo() { |
|||
try { |
|||
const readerCard = await getCurrentReaderCard(); |
|||
if (readerCard) { |
|||
this.formData.readerCard = readerCard.bindValue || ''; |
|||
} |
|||
} catch (err) { |
|||
console.error('Failed to load reader card info:', err); |
|||
} |
|||
}, |
|||
|
|||
loadUserInfo() { |
|||
const userInfo = uni.getStorageSync(USER_KEY) || {}; |
|||
if (userInfo.nickname) { |
|||
this.formData.name = userInfo.nickname; |
|||
this.hasNickname = true; |
|||
} |
|||
}, |
|||
|
|||
validatePhone(phone) { |
|||
const phoneReg = /^1[3-9]\d{9}$/; |
|||
return phoneReg.test(phone); |
|||
}, |
|||
|
|||
onBtnClick() { |
|||
const { name, readerCard, subject, phone, content } = this.formData; |
|||
|
|||
if (!name || name.trim().length === 0) { |
|||
uni.showToast({ |
|||
title: '请输入姓名', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (!readerCard || readerCard.trim().length === 0) { |
|||
uni.showToast({ |
|||
title: '请先绑定读者证', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (!subject || subject.trim().length < 5) { |
|||
uni.showToast({ |
|||
title: '主题至少需要5个字', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (!phone) { |
|||
uni.showToast({ |
|||
title: '请输入手机号码', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (!this.validatePhone(phone)) { |
|||
uni.showToast({ |
|||
title: '手机号码格式不正确', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (!content || content.trim().length < 10) { |
|||
uni.showToast({ |
|||
title: '建议内容至少需要10个字', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
uni.showLoading({ |
|||
title: '加载中' |
|||
}); |
|||
// 异步处理即可 |
|||
// const { data: res } = await userArticleComment({ |
|||
// articleId: this.articleId, |
|||
// content: this.value |
|||
// }); |
|||
console.log('this.value',this.value) |
|||
uni.showToast({ |
|||
title: '发表成功', |
|||
icon: 'success', |
|||
mask: true |
|||
title: '提交中' |
|||
}); |
|||
// 发表成功之后的回调 |
|||
this.$emit('success', res); |
|||
|
|||
setTimeout(() => { |
|||
uni.hideLoading(); |
|||
uni.showToast({ |
|||
title: '提交成功', |
|||
icon: 'success', |
|||
mask: true |
|||
}); |
|||
|
|||
setTimeout(() => { |
|||
uni.navigateBack(); |
|||
}, 1500); |
|||
}, 1000); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.comment-container { |
|||
position: relative; |
|||
padding: 10px; |
|||
::v-deep .uni-easyinput{ |
|||
width: calc(100% - 20px) !important; |
|||
background-color: #fff; |
|||
padding: 12px; |
|||
box-shadow: 0px 3px 60px 1px rgba(0,0,0,0.08); |
|||
border-radius: 6px; |
|||
} |
|||
::v-deep .uni-easyinput__content{ |
|||
padding: 5px 10px !important; |
|||
background: #F1F1F9 !important; |
|||
} |
|||
::v-deep .uni-easyinput__content-textarea{ |
|||
height: 140px !important; |
|||
} |
|||
.commit{ |
|||
margin: 40px 20px 0 20px; |
|||
background-color: #01a4fe; |
|||
border-radius: 23px; |
|||
} |
|||
.feedback-container { |
|||
padding: 15px; |
|||
background-color: #f5f5f5; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.form-box { |
|||
background-color: #fff; |
|||
border-radius: 10px; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.item { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.label { |
|||
display: block; |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.input { |
|||
width: 100%; |
|||
height: 44px; |
|||
background-color: #f5f5f5; |
|||
border-radius: 6px; |
|||
padding: 0 15px; |
|||
font-size: 14px; |
|||
color: #333; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.input[disabled] { |
|||
background-color: #e8e8e8; |
|||
color: #999; |
|||
} |
|||
|
|||
.textarea-item { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.textarea { |
|||
width: 100%; |
|||
min-height: 120px; |
|||
background-color: #f5f5f5; |
|||
border-radius: 6px; |
|||
padding: 12px 15px; |
|||
font-size: 14px; |
|||
color: #333; |
|||
box-sizing: border-box; |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
.commit { |
|||
width: 100%; |
|||
height: 44px; |
|||
background-color: #01a4fe; |
|||
color: #fff; |
|||
border-radius: 22px; |
|||
font-size: 16px; |
|||
border: none; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.commit::after { |
|||
border: none; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue