12 changed files with 649 additions and 567 deletions
-
10pages.json
-
4pages/home/home.vue
-
22pages/user/user.vue
-
48subpkg/pages/activity-detail/activity-detail.vue
-
135subpkg/pages/activity-list/activity-list.vue
-
10subpkg/pages/book-detail/book-detail.vue
-
3subpkg/pages/book-list/book-list.vue
-
142subpkg/pages/collect-list/collect-list.vue
-
87subpkg/pages/feedback-detail/feedback-detail.vue
-
122subpkg/pages/feedback-list/feedback-list.vue
-
261subpkg/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> |
<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> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { userArticleComment } from 'api/user'; |
|
||||
|
import { getCurrentReaderCard } from '@/utils/storage'; |
||||
|
|
||||
|
const USER_KEY = 'user-info'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'article-comment-commit', |
|
||||
props: { |
|
||||
}, |
|
||||
data() { |
data() { |
||||
return { |
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: { |
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({ |
uni.showLoading({ |
||||
title: '加载中' |
|
||||
|
title: '提交中' |
||||
}); |
}); |
||||
// 异步处理即可 |
|
||||
// const { data: res } = await userArticleComment({ |
|
||||
// articleId: this.articleId, |
|
||||
// content: this.value |
|
||||
// }); |
|
||||
console.log('this.value',this.value) |
|
||||
|
|
||||
|
setTimeout(() => { |
||||
|
uni.hideLoading(); |
||||
uni.showToast({ |
uni.showToast({ |
||||
title: '发表成功', |
|
||||
|
title: '提交成功', |
||||
icon: 'success', |
icon: 'success', |
||||
mask: true |
mask: true |
||||
}); |
}); |
||||
// 发表成功之后的回调 |
|
||||
this.$emit('success', res); |
|
||||
|
|
||||
|
setTimeout(() => { |
||||
|
uni.navigateBack(); |
||||
|
}, 1500); |
||||
|
}, 1000); |
||||
} |
} |
||||
} |
} |
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.comment-container { |
|
||||
position: relative; |
|
||||
padding: 10px; |
|
||||
::v-deep .uni-easyinput{ |
|
||||
width: calc(100% - 20px) !important; |
|
||||
|
.feedback-container { |
||||
|
padding: 15px; |
||||
|
background-color: #f5f5f5; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.form-box { |
||||
background-color: #fff; |
background-color: #fff; |
||||
padding: 12px; |
|
||||
box-shadow: 0px 3px 60px 1px rgba(0,0,0,0.08); |
|
||||
|
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; |
border-radius: 6px; |
||||
|
padding: 0 15px; |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
box-sizing: border-box; |
||||
} |
} |
||||
::v-deep .uni-easyinput__content{ |
|
||||
padding: 5px 10px !important; |
|
||||
background: #F1F1F9 !important; |
|
||||
|
|
||||
|
.input[disabled] { |
||||
|
background-color: #e8e8e8; |
||||
|
color: #999; |
||||
} |
} |
||||
::v-deep .uni-easyinput__content-textarea{ |
|
||||
height: 140px !important; |
|
||||
|
|
||||
|
.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 { |
.commit { |
||||
margin: 40px 20px 0 20px; |
|
||||
|
width: 100%; |
||||
|
height: 44px; |
||||
background-color: #01a4fe; |
background-color: #01a4fe; |
||||
border-radius: 23px; |
|
||||
|
color: #fff; |
||||
|
border-radius: 22px; |
||||
|
font-size: 16px; |
||||
|
border: none; |
||||
|
margin-top: 20px; |
||||
} |
} |
||||
|
|
||||
|
.commit::after { |
||||
|
border: none; |
||||
} |
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue