wangpeng/yimo-resource-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增定制需求功能和营销素材

Browse Source
This commit is contained in:
王鹏
2026-09-08 08:25:22 +08:00
parent 6d847bdd86
commit c591354ed1
20 changed files with 972 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
pages/mine/custom_request_detail.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<view class="detail-root">
<view v-if="loading" class="detail-loading"><text class="cuIcon-loading2 loading-icon"></text>正在加载...</view>
<view v-else-if="loadError" class="error-state">
<text class="cuIcon-warn error-icon"></text>
<view class="error-title">详情加载失败</view>
<view class="error-desc">请检查网络后重新加载</view>
<button class="retry-button" @tap="loadDetail">重新加载</button>
</view>
<view v-else-if="detail.id" class="detail-page">
<view class="status-card" :class="statusClass">
<view class="status-icon"><text :class="statusIconClass"></text></view>
<view class="status-content">
<view class="status-title">{{ statusText }}</view>
<view class="status-desc">{{ statusDisplayText }}</view>
<view v-if="showStatusTime" class="status-time">更新于 {{ detail.updateTime || detail.createTime }}</view>
</view>
</view>
<view class="content-card contact-card">
<view class="contact-main">
<view class="contact-icon"><text class="cuIcon-weixin"></text></view>
<view class="contact-content">
<view class="contact-title">如有疑问，请联系南音</view>
<view class="contact-wechat">微信号：{{ contactWechat }}</view>
</view>
<button class="copy-button" @tap="copyWechat">复制微信号</button>
</view>
</view>
<view class="content-card">
<view class="card-title"><text class="cuIcon-titles card-title-icon"></text>项目需求</view>
<view class="info-row"><text class="info-label">项目名称</text><text class="info-value project-value">{{ detail.projectName }}</text></view>
<view class="info-row"><text class="info-label">技术栈</text><text class="info-value tech-stack-value">{{ detail.techStackName || '-' }}</text></view>
<view class="info-row requirement-row"><text class="info-label">项目需求</text><text class="info-value requirement-value">{{ detail.requirementContent }}</text></view>
</view>
<view class="content-card record-card">
<view class="card-title"><text class="cuIcon-titles card-title-icon"></text>提交记录</view>
<view class="info-row"><text class="info-label">需求单号</text><text class="info-value">{{ detail.requestNo }}</text></view>
<view class="info-row"><text class="info-label">提交时间</text><text class="info-value">{{ detail.createTime || '-' }}</text></view>
<view class="info-row">
<text class="info-label">积分</text>
<view class="info-value integral-info">
<text class="point-text">{{ detail.pointAmount }}积分</text>
<text class="info-separator">·</text>
<text :class="pointStatusClass">{{ pointStatusText }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { getMyCustomRequest } from '@/api/app/index.js'
import { getCustomRequestStatus } from '@/utils/customRequest.js'
import config from '@/config'
export default {
data() {
return {
id: null,
detail: {},
loading: false,
loadError: false,
contactWechat: config.appInfo.contactWechat
}
},
computed: {
statusValue() { return Number(this.detail.status) },
statusConfig() { return getCustomRequestStatus(this.statusValue) },
isRejected() { return this.statusValue === 5 },
isRefunded() { return Number(this.detail.pointStatus) === 1 },
statusClass() { return this.statusConfig.className },
statusIconClass() { return this.statusConfig.icon },
statusText() { return this.statusConfig.text },
statusDesc() { return this.statusConfig.description },
statusDisplayText() {
if (this.isRejected) return this.detail.rejectReason ? '未通过原因：' + this.detail.rejectReason : this.statusDesc
return this.detail.progressNote || this.statusDesc
},
showStatusTime() { return !!(this.detail.updateTime || this.detail.createTime) },
pointStatusClass() { return this.isRefunded ? 'refund-text' : '' },
pointStatusText() { return this.isRefunded ? '已退回' : '已扣除' }
},
onLoad(options) { this.id = options.id; this.loadDetail() },
onPullDownRefresh() { this.loadDetail() },
methods: {
copyWechat() {
uni.setClipboardData({
data: this.contactWechat,
success: () => uni.showToast({ title: '微信号已复制', icon: 'success' })
})
},
loadDetail() {
if (!this.id || this.loading) return
this.loading = true
this.loadError = false
getMyCustomRequest(this.id).then(response => {
this.detail = response.data || {}
}).catch(() => {
this.loadError = true
}).finally(() => {
this.loading = false
uni.stopPullDownRefresh()
})
}
}
}
</script>
<style>
page { min-height: 100%; background: #f7f7f7; }
.detail-root { min-height: 100vh; }
.detail-page { padding: 28rpx; }
.status-card, .content-card { border-radius: 20rpx; background: #fff; box-shadow: 0 6rpx 18rpx rgba(50, 50, 50, .04); }
.status-card { display: flex; align-items: center; padding: 30rpx; border-left: 7rpx solid #ff9700; }
.status-reviewing, .status-developing { border-left-color: #0081ff; }
.status-accepted { border-left-color: #1cbbb4; }
.status-completed { border-left-color: #20a05a; }
.status-rejected { border-left-color: #e54d42; }
.status-unknown { border-left-color: #999; }
.status-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 76rpx; height: 76rpx; margin-right: 22rpx; border-radius: 50%; font-size: 40rpx; color: #0081ff; background: #edf7ff; }
.status-pending .status-icon { color: #ff9700; background: #fff6e8; }
.status-accepted .status-icon { color: #1cbbb4; background: #eaf9f7; }
.status-completed .status-icon { color: #20a05a; background: #ebf8f1; }
.status-rejected .status-icon { color: #e54d42; background: #fff0ef; }
.status-content { min-width: 0; }
.status-title { font-size: 34rpx; font-weight: 600; color: #222; }
.status-desc { margin-top: 10rpx; font-size: 24rpx; line-height: 1.55; color: #888; }
.status-time { margin-top: 12rpx; font-size: 20rpx; line-height: 1.4; color: #b1b1b1; }
.content-card { margin-top: 24rpx; padding: 28rpx; }
.card-title { display: flex; align-items: center; margin-bottom: 20rpx; font-size: 31rpx; font-weight: 600; color: #222; }
.card-title-icon { margin-right: 4rpx; font-size: 38rpx; color: #0081ff; }
.info-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 17rpx 0; font-size: 25rpx; border-bottom: 1rpx solid #eee; }
.info-row:last-child { border-bottom: 0; }
.info-label { color: #999; }
.info-value { max-width: 470rpx; text-align: right; color: #555; }
.integral-info { display: flex; align-items: center; justify-content: flex-end; }
.info-separator { margin: 0 9rpx; color: #ccc; }
.point-text { color: #ff9700; }
.refund-text { color: #20a05a; }
.project-value { font-weight: 500; color: #333; }
.tech-stack-value { color: #3976a8; }
.requirement-row { min-height: 70rpx; }
.requirement-value { line-height: 1.65; color: #666; white-space: pre-wrap; word-break: break-all; }
.contact-card { border: 1rpx solid #d8f1e1; background: linear-gradient(135deg, #f4fff7, #fff); }
.contact-main { display: flex; align-items: center; }
.contact-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 72rpx; height: 72rpx; margin-right: 18rpx; border-radius: 50%; font-size: 40rpx; color: #fff; background: #20b85a; }
.contact-content { flex: 1; min-width: 0; }
.contact-title { font-size: 28rpx; font-weight: 600; color: #27352c; }
.contact-wechat { margin-top: 7rpx; font-size: 23rpx; color: #7b887f; }
.copy-button { flex-shrink: 0; height: 62rpx; margin: 0 0 0 16rpx; padding: 0 20rpx; border: 0; border-radius: 10rpx; font-size: 23rpx; line-height: 62rpx; color: #fff; background: #20b85a; }
.copy-button::after { border: 0; }
.detail-loading, .error-state { padding: 220rpx 60rpx 0; text-align: center; font-size: 25rpx; color: #999; }
.loading-icon { display: inline-block; margin-right: 10rpx; }
.error-icon { font-size: 90rpx; color: #c8cfdb; }
.error-title { margin-top: 20rpx; font-size: 31rpx; color: #666; }
.error-desc { margin-top: 12rpx; font-size: 25rpx; color: #aaa; }
.retry-button { width: 280rpx; height: 76rpx; margin-top: 30rpx; border-radius: 12rpx; font-size: 27rpx; line-height: 76rpx; color: #fff; background: #0081ff; }
.retry-button::after { border: 0; }
</style>

146
pages/mine/custom_requests.vue Normal file
View File

@@ -0,0 +1,146 @@
<template>
<view class="request-page">
<view v-if="dataList.length" class="request-list">
<view class="section-title"><text class="cuIcon-titles section-icon"></text>定制记录</view>
<view v-for="item in dataList" :key="item.id" class="request-card" @tap="goDetail(item.id)">
<view class="request-head">
<text class="request-no">需求单号：{{ item.requestNo }}</text>
<text class="request-status" :class="item.statusClass">{{ item.statusText }}</text>
</view>
<view class="project-line">
<view class="project-name">{{ item.projectName }}</view>
<view v-if="item.techStackName" class="tech-stack-tag"><text class="cuIcon-settingsfill tech-stack-icon"></text><text class="tech-stack-name">{{ item.techStackName }}</text></view>
</view>
<view class="requirement-text">{{ item.requirementContent }}</view>
<view v-if="item.progressNote && !item.isRejected" class="progress-note">
<text class="cuIcon-timefill note-icon"></text><text class="note-content">{{ item.progressNote }}</text>
</view>
<view v-if="item.isRejected && item.rejectReason" class="reject-note">
<text class="cuIcon-infofill note-icon"></text><text class="note-content">未通过原因：{{ item.rejectReason }}</text>
</view>
<view class="request-footer">
<text>{{ item.updateTime || item.createTime }}</text>
<text class="detail-link">查看详情 <text class="cuIcon-right"></text></text>
</view>
</view>
</view>
<view v-else-if="!loading && !loadError" class="empty-state">
<image class="empty-image" src="https://img.yidaima.cn/feast/nodata.svg" mode="aspectFit"></image>
<view class="empty-title">还没有定制需求</view>
<view class="empty-desc">提交项目想法后，可以在这里查看审核和开发进度。</view>
<button class="empty-button" @tap="goSubmit">去提交需求</button>
</view>
<view v-if="!loading && loadError" class="error-state">
<text class="cuIcon-warn error-icon"></text>
<view class="error-title">加载失败</view>
<view class="error-desc">请检查网络后重新加载</view>
<button class="retry-button" @tap="retryLoad">重新加载</button>
</view>
<view v-if="loading" class="loading-text"><text class="cuIcon-loading2 loading-icon"></text>正在加载...</view>
<view v-if="dataList.length && !hasMore" class="bottom-text">没有更多了</view>
</view>
</template>
<script>
import { listMyCustomRequests } from '@/api/app/index.js'
import { getCustomRequestStatus } from '@/utils/customRequest.js'
export default {
data() {
return {
loading: false,
loadError: false,
dataList: [],
total: 0,
queryParams: { pageNum: 1, pageSize: 10 }
}
},
computed: {
hasMore() { return this.dataList.length < this.total }
},
onLoad() { this.loadList(true) },
onShow() { if (this.dataList.length) this.loadList(true) },
onPullDownRefresh() { this.loadList(true) },
onReachBottom() {
if (!this.loading && this.hasMore) {
this.queryParams.pageNum++
this.loadList(false)
}
},
methods: {
decorateItem(item) {
const status = Number(item.status)
const statusConfig = getCustomRequestStatus(status)
return Object.assign({}, item, {
statusClass: statusConfig.className,
statusText: statusConfig.text,
isRejected: status === 5
})
},
loadList(reset) {
if (this.loading) return
if (reset) this.queryParams.pageNum = 1
this.loading = true
this.loadError = false
listMyCustomRequests(this.queryParams).then(response => {
const rows = (response.rows || []).map(this.decorateItem)
this.dataList = reset ? rows : this.dataList.concat(rows)
this.total = Number(response.total || 0)
}).catch(() => {
this.loadError = true
}).finally(() => {
this.loading = false
uni.stopPullDownRefresh()
})
},
retryLoad() { this.loadList(true) },
goDetail(id) { this.$tab.navigateTo('/pages/mine/custom_request_detail?id=' + id) },
goSubmit() { uni.switchTab({ url: '/pages/tool/index' }) }
}
}
</script>
<style>
page { min-height: 100%; background: #f7f7f7; }
.request-page { min-height: 100vh; }
.request-list { padding: 28rpx; }
.section-title { margin: 4rpx 2rpx 24rpx; font-size: 35rpx; font-weight: 600; color: #222; }
.section-icon { margin-right: 4rpx; font-size: 42rpx; color: #0081ff; }
.request-card { margin-bottom: 24rpx; padding: 28rpx; border-radius: 20rpx; background: #fff; box-shadow: 0 6rpx 18rpx rgba(50, 50, 50, .04); }
.request-head, .request-footer { display: flex; align-items: center; justify-content: space-between; }
.request-head { padding-bottom: 20rpx; border-bottom: 1rpx solid #eee; }
.request-no { max-width: 500rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 23rpx; color: #999; }
.request-status { flex-shrink: 0; margin-left: 14rpx; padding: 6rpx 12rpx; border-radius: 999rpx; font-size: 22rpx; }
.status-pending { color: #e98500; background: #fff6e8; }
.status-reviewing, .status-developing { color: #0081ff; background: #edf7ff; }
.status-accepted { color: #149d96; background: #eaf9f7; }
.status-completed { color: #178c4d; background: #ebf8f1; }
.status-rejected { color: #d8473d; background: #fff0ef; }
.status-unknown { color: #777; background: #f2f2f2; }
.project-line { display: flex; align-items: center; min-width: 0; margin-top: 22rpx; }
.project-name { flex: 1; min-width: 0; overflow: hidden; font-size: 32rpx; font-weight: 600; line-height: 1.5; color: #242424; white-space: nowrap; text-overflow: ellipsis; }
.tech-stack-tag { display: flex; flex-shrink: 0; align-items: center; max-width: 250rpx; margin-left: 14rpx; padding: 6rpx 12rpx; border-radius: 8rpx; font-size: 21rpx; color: #3976a8; background: #edf7ff; }
.tech-stack-icon { flex-shrink: 0; margin-right: 7rpx; }
.tech-stack-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.requirement-text { margin-top: 14rpx; overflow: hidden; font-size: 26rpx; line-height: 1.65; color: #666; white-space: nowrap; text-overflow: ellipsis; }
.progress-note, .reject-note { display: flex; align-items: flex-start; margin-top: 20rpx; padding: 16rpx 18rpx; border-radius: 12rpx; font-size: 24rpx; line-height: 1.55; }
.progress-note { color: #3976a8; background: #edf7ff; }
.reject-note { color: #b54b43; background: #fff1f0; }
.note-icon { flex-shrink: 0; margin: 2rpx 10rpx 0 0; }
.note-content { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.request-footer { margin-top: 22rpx; padding-top: 20rpx; border-top: 1rpx solid #eee; font-size: 22rpx; color: #aaa; }
.detail-link { color: #0081ff; }
.empty-state, .error-state { padding: 170rpx 60rpx 0; text-align: center; }
.empty-image { width: 400rpx; height: 200rpx; }
.empty-title, .error-title { margin-top: 18rpx; font-size: 31rpx; color: #666; }
.empty-desc, .error-desc { margin-top: 12rpx; font-size: 25rpx; line-height: 1.6; color: #aaa; }
.empty-button, .retry-button { width: 280rpx; height: 76rpx; margin-top: 30rpx; border-radius: 12rpx; font-size: 27rpx; line-height: 76rpx; color: #fff; background: #0081ff; }
.empty-button::after { border: 0; }
.retry-button::after { border: 0; }
.error-icon { font-size: 90rpx; color: #c8cfdb; }
.loading-icon { display: inline-block; margin-right: 10rpx; }
.loading-text, .bottom-text { padding: 40rpx 0 60rpx; text-align: center; font-size: 24rpx; color: #aaa; }
</style>

28
pages/mine/index.vue
View File

@@ -79,6 +79,16 @@
<!-- 功能列表 -->
<view class="metergasis">
<view class="metergasis-li" hover-class="fengrui-li-hover" @tap="customRequests()">
<view class="metergasis-li-img custom-request-icon flex justify-center align-center">
<text class="cuIcon-writefill"></text>
</view>
<view class="metergasis-li-h">我的定制</view>
<text class="metergasis-li-h2">查看需求审核及开发进度</text>
<view class="metergasis-li-rgth">
<image class="blogui-img" src="https://img.yidaima.cn/feast/more.svg" mode=""></image>
</view>
</view>
<view class="metergasis-li" hover-class="fengrui-li-hover" @tap="Signin()">
<view class="metergasis-li-img">
<image class="blogui-img" src="https://img.yidaima.cn/feast/qiandao.svg" mode="aspectFill">
@@ -336,6 +346,19 @@
this.$tab.navigateTo('/pages/mine/virtual_orders')
}
},
customRequests(){
var that = this
if (!this.userid) {
that.$refs.uToast.show({
type: 'success',
title: '',
message: '请先授权登录',
icon: false
})
}else{
this.$tab.navigateTo('/pages/mine/custom_requests')
}
},
Signin() {
var that = this
if (!this.userid) {
@@ -478,6 +501,11 @@
width: 49%;
background-color: white;
}
.custom-request-icon {
background-color: #eaf5ff;
color: #0081ff;
font-size: 32rpx;
}
/* 列表没有数据 */
.no-list-data {
text-align: center;