Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/JinShan_uniapp
This commit is contained in:
Leo_Ding
commit
98dda253ce
@ -59,6 +59,12 @@
|
|||||||
},
|
},
|
||||||
"usingComponents" : true,
|
"usingComponents" : true,
|
||||||
"requiredPrivateInfos": ["getLocation"],
|
"requiredPrivateInfos": ["getLocation"],
|
||||||
|
"optimization" : {
|
||||||
|
"minify": {
|
||||||
|
"js": true,
|
||||||
|
"css": true
|
||||||
|
}
|
||||||
|
},
|
||||||
"permission" : {
|
"permission" : {
|
||||||
"scope.userLocation" : {
|
"scope.userLocation" : {
|
||||||
"desc" : "你的位置信息将用于获取周边服务"
|
"desc" : "你的位置信息将用于获取周边服务"
|
||||||
|
|||||||
@ -203,13 +203,6 @@
|
|||||||
"usingComponents": {}
|
"usingComponents": {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// "path" : "pages/meetingDetail/ceshi/ceshi",
|
|
||||||
// "style" :
|
|
||||||
// {
|
|
||||||
// "navigationBarTitleText" : ""
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
"path": "pages/sign/sign",
|
"path": "pages/sign/sign",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="activity-detail-container">
|
<view class="activity-detail-container">
|
||||||
<!-- 顶部图片轮播 -->
|
<!-- 顶部图片轮播 -->
|
||||||
<swiper class="activity-banner" :autoplay="false" indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#5b9cf8">
|
<view class="banner-container">
|
||||||
|
<swiper class="activity-banner" :autoplay="false" indicator-dots indicator-color="rgba(255,255,255,0.5)"
|
||||||
|
indicator-active-color="#5b9cf8">
|
||||||
<swiper-item v-for="(img, index) in bannerImages" :key="index">
|
<swiper-item v-for="(img, index) in bannerImages" :key="index">
|
||||||
<image
|
<image :src="img" class="w-full h-full" @click="previewImage(index)" />
|
||||||
:src="img"
|
|
||||||
mode="aspectFill"
|
|
||||||
class="w-full h-full"
|
|
||||||
@click="previewImage(index)"
|
|
||||||
/>
|
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
<view class="banner-mask"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 活动基本信息 -->
|
<!-- 活动基本信息 -->
|
||||||
<view class="activity-base-info">
|
<view class="activity-base-info">
|
||||||
@ -29,121 +28,72 @@
|
|||||||
|
|
||||||
<view class="info-grid">
|
<view class="info-grid">
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<u-icon name="star" size="24" color="#5b9cf8"></u-icon>
|
<u-icon name="star" size="26" color="#5b9cf8"></u-icon>
|
||||||
<view class="info-text"><text>活动类型：</text>{{activityInfo.categoryName || '待确认'}} </view>
|
<view class="info-text"><text class="info-label">活动类型：</text>{{activityInfo.categoryName || '待确认'}} </view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<u-icon name="map" size="24" color="#5b9cf8"></u-icon>
|
<u-icon name="clock" size="26" color="#5b9cf8"></u-icon>
|
||||||
<view class="info-text"><text>活动地址：</text>{{activityInfo.address || '待定'}}</view>
|
<view class="info-text"><text class="info-label">活动时间：</text>{{ activityInfo.openAt }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
|
||||||
<u-icon name="clock" size="24" color="#5b9cf8"></u-icon>
|
|
||||||
<view class="info-text">{{ activityInfo.openAt }}</view>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="info-item">
|
|
||||||
<u-icon name="account" size="18" color="#36CFC9"></u-icon>
|
|
||||||
<text class="info-text">已报名 {{activityInfo.participants}}人</text>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<u-icon name="clock-fill" size="26" color="#ff5a5f"></u-icon>
|
||||||
|
<view class="info-text"><text class="info-label">结束时间：</text>{{ formatTime(activityInfo.endAt,"YYYY-MM-DD HH:mm:ss") }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item highlight">
|
||||||
|
<u-icon name="warning" size="26" color="#ff9500"></u-icon>
|
||||||
|
<view class="info-text"><text class="info-label">报名截止：</text>{{ formatTime(activityInfo.endSignupAt,"YYYY-MM-DD HH:mm:ss") }}</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 活动详情卡片 -->
|
<!-- 活动详情卡片 -->
|
||||||
<view class="detail-card">
|
<view class="detail-card">
|
||||||
<!-- <view class="card-header">
|
|
||||||
<view class="header-line"></view>
|
|
||||||
<text class="header-title">活动详情</text>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<view class="detail-section">
|
<view class="detail-section">
|
||||||
<view class="section-title">
|
<view class="section-title">
|
||||||
<view class="title-icon"></view>
|
<view class="title-icon"></view>
|
||||||
<text>活动详情</text>
|
<text>活动详情</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="section-content">
|
<view class="section-content rich-text">
|
||||||
<view v-html="activityInfo.content"></view>
|
<rich-text :nodes="activityInfo.content"></rich-text>
|
||||||
<image
|
<!-- <image src="/static/route-map.jpg" mode="widthFix" class="route-map"
|
||||||
src="/static/route-map.jpg"
|
@click="previewImage(bannerImages.length)"></image> -->
|
||||||
mode="widthFix"
|
|
||||||
class="route-map"
|
|
||||||
@click="previewImage(bannerImages.length)"
|
|
||||||
></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- <view class="detail-section">
|
|
||||||
<view class="section-title">
|
|
||||||
<view class="title-icon"></view>
|
|
||||||
<text>活动流程</text>
|
|
||||||
</view>
|
|
||||||
<view class="timeline">
|
|
||||||
<view class="timeline-item" v-for="(step, index) in timeline" :key="index">
|
|
||||||
<view class="timeline-dot" :style="{backgroundColor: dotColors[index]}"></view>
|
|
||||||
<view class="timeline-content">
|
|
||||||
<text class="timeline-time">{{step.time}}</text>
|
|
||||||
<text class="timeline-desc">{{step.desc}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<!-- <view class="detail-section">
|
|
||||||
<view class="section-title">
|
|
||||||
<view class="title-icon"></view>
|
|
||||||
<text>积分规则</text>
|
|
||||||
</view>
|
|
||||||
<view class="point-rules">
|
|
||||||
<view class="rule-item" v-for="(rule, index) in pointRules" :key="index">
|
|
||||||
<view class="rule-icon">
|
|
||||||
<text>{{index + 1}}</text>
|
|
||||||
</view>
|
|
||||||
<text class="rule-text">{{rule}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 温馨提示 -->
|
|
||||||
<!-- <view class="tips-card">
|
|
||||||
<view class="card-header">
|
|
||||||
<view class="header-line"></view>
|
|
||||||
<text class="header-title">温馨提示</text>
|
|
||||||
</view>
|
|
||||||
<view class="tips-content">
|
|
||||||
<text class="tip-item" v-for="(tip, index) in tips" :key="index">
|
|
||||||
{{tip}}
|
|
||||||
</text>
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<!-- 底部操作栏 -->
|
<!-- 底部操作栏 -->
|
||||||
<view class="action-bar">
|
<view class="action-bar safe-area-inset-bottom">
|
||||||
<!-- <view class="action-btn favorite" @click="toggleFavorite">
|
<button class="share-btn" open-type="share">
|
||||||
<u-icon :name="isFavorite ? 'heart-fill' : 'heart'" size="24" :color="isFavorite ? '#FF5A5F' : '#666'"></u-icon>
|
<u-icon name="share" size="32" color="#fff"></u-icon>
|
||||||
<text>收藏</text>
|
<text class="share-text">分享</text>
|
||||||
</view> -->
|
|
||||||
<view class="action-btn share" @click="shareActivity">
|
|
||||||
<u-icon name="share" size="30" color="#666"></u-icon>
|
|
||||||
<text>分享</text>
|
|
||||||
</view>
|
|
||||||
<button class="signup-btn" @click="handleSignUp" >
|
|
||||||
立即报名
|
|
||||||
</button>
|
</button>
|
||||||
|
<button class="signup-btn" @click="handleSignUp">立即报名</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { get, post } from '@/utils/request';
|
import {
|
||||||
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
get,
|
||||||
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
post
|
||||||
export default {
|
} from '@/utils/request';
|
||||||
|
import {
|
||||||
|
IMAGE_BASE_URL,
|
||||||
|
BASE_URL
|
||||||
|
} from '@/utils/config';
|
||||||
|
import {
|
||||||
|
formatTime,
|
||||||
|
formatRelativeTime
|
||||||
|
} from '@/utils/timeFormat';
|
||||||
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
formatTime,
|
formatTime,
|
||||||
IMAGE_BASE_URL,
|
IMAGE_BASE_URL,
|
||||||
Id:null,
|
Id: null,
|
||||||
isFavorite: false,
|
isFavorite: false,
|
||||||
isSignedUp: false,
|
isSignedUp: false,
|
||||||
bannerImages: [],
|
bannerImages: [],
|
||||||
@ -175,7 +125,7 @@ export default {
|
|||||||
this.Id = options.Id;
|
this.Id = options.Id;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted() {
|
||||||
this.getActivitiesDetail();
|
this.getActivitiesDetail();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -187,15 +137,15 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
async handleSignUp(){
|
async handleSignUp() {
|
||||||
try {
|
try {
|
||||||
const res = await get(`/api/v1/app_auth/activities/${this.Id}`);
|
const res = await get(`/api/v1/app_auth/activities/${this.Id}`);
|
||||||
if ( !res.success) {
|
if (!res.success) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: res.msg || '报名失败',
|
title: res.msg || '报名失败',
|
||||||
icon: 'error'
|
icon: 'error'
|
||||||
})
|
})
|
||||||
}else{
|
} else {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '报名成功！',
|
title: '报名成功！',
|
||||||
icon: 'success'
|
icon: 'success'
|
||||||
@ -206,13 +156,12 @@ export default {
|
|||||||
console.error('获取详情失败:', err);
|
console.error('获取详情失败:', err);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
shareActivity() {
|
onShareAppMessage() {
|
||||||
uni.share({
|
return {
|
||||||
title: this.activityInfo.title,
|
title: this.activityInfo.title,
|
||||||
content: '一起来参加社区夜跑活动吧！',
|
path: `/pages/activity/detail?id=${this.Id}`,
|
||||||
href: '/pages/activity/detail',
|
imageUrl: this.bannerImages[0] || '/static/logo.png'
|
||||||
imageUrl: this.bannerImages[0]
|
}
|
||||||
})
|
|
||||||
},
|
},
|
||||||
previewImage(index) {
|
previewImage(index) {
|
||||||
uni.previewImage({
|
uni.previewImage({
|
||||||
@ -220,7 +169,7 @@ export default {
|
|||||||
urls: [...this.bannerImages, '/static/route-map.jpg']
|
urls: [...this.bannerImages, '/static/route-map.jpg']
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
async getActivitiesDetail(){
|
async getActivitiesDetail() {
|
||||||
try {
|
try {
|
||||||
const res = await get(`/api/v1/apps/home/activities/${this.Id}`);
|
const res = await get(`/api/v1/apps/home/activities/${this.Id}`);
|
||||||
if (!res || !res.success) {
|
if (!res || !res.success) {
|
||||||
@ -233,61 +182,89 @@ export default {
|
|||||||
this.bannerImages.push(item);
|
this.bannerImages.push(item);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.activityInfo = {...res.data};
|
this.activityInfo = {
|
||||||
|
...res.data
|
||||||
|
};
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('获取详情失败:', err);
|
console.error('获取详情失败:', err);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$primary-color: #5b9cf8;
|
$primary-color: #5b9cf8;
|
||||||
$secondary-color: #F7F8FA;
|
$secondary-color: #f7f8fa;
|
||||||
$text-color: #333;
|
$text-color: #333;
|
||||||
$light-text: #666;
|
$light-text: #666;
|
||||||
$border-color: #eee;
|
$lighter-text: #999;
|
||||||
$border-radius: 16rpx;
|
$border-color: #eee;
|
||||||
$shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
$border-radius: 16rpx;
|
||||||
|
$shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||||
|
$highlight-color: #fff8e6;
|
||||||
|
|
||||||
.activity-detail-container {
|
.activity-detail-container {
|
||||||
padding-bottom: 120rpx;
|
padding-bottom: 160rpx;
|
||||||
background-color: $secondary-color;
|
background-color: $secondary-color;
|
||||||
|
color: $text-color;
|
||||||
|
|
||||||
|
.banner-container {
|
||||||
|
position: relative;
|
||||||
|
height: 500rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.activity-banner {
|
.activity-banner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 420rpx;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
image {
|
.activity-banner image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-mask {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 120rpx;
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.activity-base-info {
|
.activity-base-info {
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
|
margin: -40rpx 20rpx 20rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
margin-bottom: 20rpx;
|
border-radius: $border-radius;
|
||||||
box-shadow: $shadow;
|
box-shadow: $shadow;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
.title-box {
|
.title-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid rgba($border-color, 0.8);
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 36rpx;
|
flex: 1;
|
||||||
|
font-size: 38rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $text-color;
|
line-height: 1.4;
|
||||||
margin-right: 20rpx;
|
margin-right: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag {
|
.status-tag {
|
||||||
padding: 6rpx 16rpx;
|
padding: 8rpx 20rpx;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: rgba($primary-color, 0.1);
|
background-color: rgba($primary-color, 0.1);
|
||||||
@ -299,199 +276,93 @@ $shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
|||||||
.info-grid {
|
.info-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(1, 1fr);
|
grid-template-columns: repeat(1, 1fr);
|
||||||
gap: 20rpx;
|
gap: 24rpx;
|
||||||
|
|
||||||
.info-item {
|
.info-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center; /* 垂直居中 */
|
||||||
|
|
||||||
|
&.highlight {
|
||||||
|
background-color: #fff8e6;
|
||||||
|
padding: 16rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin:0rpx -16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-icon {
|
||||||
|
flex-shrink: 0; /* 防止图标被压缩 */
|
||||||
|
}
|
||||||
|
|
||||||
.info-text {
|
.info-text {
|
||||||
font-size: 26rpx;
|
font-size: 28rpx;
|
||||||
color: $light-text;
|
line-height: 1.5;
|
||||||
margin-left: 10rpx;
|
margin-left: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center; /* 确保内部文本垂直居中 */
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
color: #999;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-card, .tips-card {
|
.detail-card {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
margin: 0 20rpx 20rpx;
|
margin: 0 20rpx 20rpx;
|
||||||
box-shadow: $shadow;
|
box-shadow: $shadow;
|
||||||
|
|
||||||
.card-header {
|
.detail-section {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 24rpx;
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
border-bottom: 1rpx solid rgba($border-color, 0.5);
|
||||||
|
|
||||||
.header-line {
|
.title-icon {
|
||||||
width: 6rpx;
|
width: 8rpx;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
background-color: $primary-color;
|
background-color: $primary-color;
|
||||||
border-radius: 4rpx;
|
border-radius: 4rpx;
|
||||||
margin-right: 16rpx;
|
margin-right: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-title {
|
text {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-section {
|
|
||||||
margin-bottom: 40rpx;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
|
|
||||||
.title-icon {
|
|
||||||
width: 8rpx;
|
|
||||||
height: 28rpx;
|
|
||||||
background-color: $primary-color;
|
|
||||||
border-radius: 4rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: $text-color;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-content {
|
.section-content {
|
||||||
font-size: 28rpx;
|
font-size: 30rpx;
|
||||||
|
line-height: 1.8;
|
||||||
color: $light-text;
|
color: $light-text;
|
||||||
line-height: 1.6;
|
|
||||||
|
&.rich-text {
|
||||||
|
p {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.route-map {
|
.route-map {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 20rpx;
|
margin-top: 30rpx;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
}
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
}
|
|
||||||
|
|
||||||
.timeline {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 40rpx;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 15rpx;
|
|
||||||
top: 10rpx;
|
|
||||||
bottom: 10rpx;
|
|
||||||
width: 2rpx;
|
|
||||||
background-color: $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item {
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 30rpx;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-dot {
|
|
||||||
position: absolute;
|
|
||||||
left: -40rpx;
|
|
||||||
top: 4rpx;
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
width: 10rpx;
|
|
||||||
height: 10rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-content {
|
|
||||||
.timeline-time {
|
|
||||||
display: block;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: $primary-color;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 6rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-desc {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: $light-text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.point-rules {
|
|
||||||
.rule-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rule-icon {
|
|
||||||
width: 36rpx;
|
|
||||||
height: 36rpx;
|
|
||||||
background-color: $primary-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
text {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 22rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rule-text {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: $light-text;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-content {
|
|
||||||
.tip-item {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 30rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: $light-text;
|
|
||||||
line-height: 1.6;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '•';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -502,53 +373,79 @@ $shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 100rpx;
|
height: 120rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 20rpx;
|
justify-content: space-between;
|
||||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
padding: 0 30rpx;
|
||||||
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
.action-btn {
|
// &.safe-area-inset-bottom {
|
||||||
|
// padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
// }
|
||||||
|
|
||||||
|
.share-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 120rpx;
|
width: 160rpx;
|
||||||
height: 100%;
|
height: 80rpx;
|
||||||
|
background: linear-gradient(135deg, #6e8cfa, #5b9cf8);
|
||||||
|
border-radius: 40rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(91, 156, 248, 0.2);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
text {
|
.share-text {
|
||||||
font-size: 22rpx;
|
margin-left: 10rpx;
|
||||||
color: $light-text;
|
|
||||||
margin-top: 6rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-btn::after {
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.signup-btn {
|
.signup-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
background-color: #5b9cf8;
|
background: linear-gradient(135deg, #ff7e5f, #ff5a5f);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: bold;
|
font-weight: 500;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-left: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(255, 90, 95, 0.2);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.activity-detail-container {
|
.activity-detail-container {
|
||||||
max-width: 750px;
|
max-width: 750px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,18 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<view class="aiHelper">
|
<view class="aiHelper">
|
||||||
|
|
||||||
<view class="aiHelperContainer">
|
<view class="aiHelperContainer">
|
||||||
|
<!-- 标题区域 -->
|
||||||
|
<view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">
|
||||||
|
{{ aiHelperTitle }}
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">{{aiHelperTitle}}</view>
|
<!-- AI类型卡片容器 -->
|
||||||
<view class="aiBox">
|
<view class="aiBox">
|
||||||
<view class="aiType" v-for="(item,index) in aiType" :key="item.id" @click="goAiType(item)">
|
<view class="aiType" v-for="(item, index) in aiType" :key="item.id" @click="goAiType(item)">
|
||||||
<view class="aiTypeContainer" :style="{'background-image': `url(${item.background})`}">
|
<view class="aiTypeContainer" :style="{'background-image': `url(${item.background})`}">
|
||||||
<view class="aiLeft" :style="{'background-image': `url(${item.imagePath})`}">
|
<view class="aiLeft" :style="{'background-image': `url(${item.imagePath})`}">
|
||||||
<view class="aiLeftTitle">{{item.name}}</view>
|
<view class="aiLeftTitle">{{ item.name }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="aiRight">
|
<view class="aiRight">
|
||||||
<view class="aiRightTitle"><text>{{item.description}}</text></view>
|
<view class="aiRightTitle"><text>{{ item.description }}</text></view>
|
||||||
<view class="aiDescription"><text>开始对话></text></view>
|
<view class="aiDescription"><text>开始对话></text></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -20,37 +22,34 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<view><Footer></Footer></view>
|
<view><Footer></Footer></view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Footer from '@/components/footer_common.vue';
|
import Footer from '@/components/footer_common.vue';
|
||||||
import {get,post} from '@/utils/request';
|
import { get, post } from '@/utils/request';
|
||||||
import {IMAGE_BASE_URL,BASE_URL} from '@/utils/config';
|
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
||||||
export default{
|
export default {
|
||||||
name:'aiHelper',
|
name: 'aiHelper',
|
||||||
components:{Footer},
|
components: { Footer },
|
||||||
data(){
|
data() {
|
||||||
return{
|
return {
|
||||||
aiHelperTitle:'AI智能助手',
|
aiHelperTitle: 'AI智能助手',
|
||||||
aiHelperTitleBackground:'../../static/imgs/ai/title.png',
|
aiHelperTitleBackground: '../../static/imgs/ai/title.png',
|
||||||
aiType:[],
|
aiType: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getData();
|
this.getData();
|
||||||
},
|
},
|
||||||
methods:{
|
methods: {
|
||||||
goAiType(item){
|
goAiType(item) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/chat/chatPage?serviceUrl=${item.serviceUrl}&apiKey=${item.apiKey}&id=${item.id}&name=${item.name}&icon=${item.icon}`
|
url: `/pages/chat/chatPage?serviceUrl=${item.serviceUrl}&apiKey=${item.apiKey}&id=${item.id}&name=${item.name}&icon=${item.icon}`
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
async getData(){
|
async getData() {
|
||||||
let params = {
|
let params = {
|
||||||
current: 1,
|
current: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
@ -60,86 +59,91 @@
|
|||||||
if (!res || !res.success) {
|
if (!res || !res.success) {
|
||||||
throw new Error('获取AI助手失败');
|
throw new Error('获取AI助手失败');
|
||||||
}
|
}
|
||||||
if(res.data.length>0){
|
if (res.data.length > 0) {
|
||||||
res.data.forEach((item)=>{
|
res.data.forEach((item) => {
|
||||||
item.background=IMAGE_BASE_URL+item.background
|
item.background = IMAGE_BASE_URL + item.background
|
||||||
item.imagePath=IMAGE_BASE_URL+item.imagePath
|
item.imagePath = IMAGE_BASE_URL + item.imagePath
|
||||||
item.icon=IMAGE_BASE_URL+item.icon
|
item.icon = IMAGE_BASE_URL + item.icon
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
this.aiType=res.data
|
this.aiType = res.data
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('获取AI助手失败:', err);
|
console.error('获取AI助手失败:', err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.aiHelper{
|
// 引入变量和混入
|
||||||
// margin-top: 90rpx;
|
// @import "@/styles/variables.scss"; // 假设你有这个文件，没有可以忽略
|
||||||
|
|
||||||
|
.aiHelper {
|
||||||
|
// 使用安全区域适配，避免底部被遮挡
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
|
||||||
.aiHelperContainer {
|
.aiHelperContainer {
|
||||||
padding: 2%;
|
padding: 30rpx; // 使用rpx单位适配不同屏幕
|
||||||
padding-bottom: 50%;
|
box-sizing: border-box; // 确保padding不会增加总宽度
|
||||||
|
|
||||||
.aiHelperTitle {
|
.aiHelperTitle {
|
||||||
font-size: 1rem;
|
font-size: 36rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0;
|
color: #000;
|
||||||
line-height: 1.5;
|
|
||||||
color: rgba(0, 0, 0, 1);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: top;
|
// padding: 20rpx 0 30rpx; // 增加底部内边距
|
||||||
margin-bottom: 3%;
|
|
||||||
// background-image: url('../../static/imgs/ai/title.png');
|
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 50% 80%;
|
background-position: 50% 80%;
|
||||||
background-size: 30%;
|
background-size: 30%;
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aiBox {
|
.aiBox {
|
||||||
|
// 增加容器内边距，避免卡片贴边
|
||||||
|
padding: 10rpx 0;
|
||||||
|
|
||||||
.aiType {
|
.aiType {
|
||||||
margin-bottom: 3%;
|
// 关键优化：使用固定间距代替百分比，确保不同设备一致
|
||||||
|
margin-bottom: 30rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 310rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.aiTypeContainer {
|
.aiTypeContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 1%;
|
border-radius: 20rpx; // 更大的圆角更美观
|
||||||
border-radius: 0.5rem;
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
|
|
||||||
background-position: 30% 50%;
|
background-position: 30% 50%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
width: 96%;
|
width: 100%;
|
||||||
aspect-ratio: 2.1/1;
|
// 关键优化：使用固定高度代替aspect-ratio，避免变形
|
||||||
|
height: 320rpx;
|
||||||
|
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15); // 更柔和的阴影
|
||||||
|
overflow: hidden; // 防止内容溢出
|
||||||
|
|
||||||
.aiLeft {
|
.aiLeft {
|
||||||
border-radius: 0.5rem;
|
border-radius: 16rpx;
|
||||||
padding: 5% 0;
|
padding: 5% 0;
|
||||||
margin-right: 12%;
|
margin-right: 12%;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
width: 35%;
|
width: 35%;
|
||||||
// height: 100%;
|
|
||||||
/* margin-left: -5%;*/
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
// 增加内边距，避免内容贴边
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
.aiLeftTitle {
|
.aiLeftTitle {
|
||||||
font-size: 0.8rem;
|
font-size: 30rpx;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
letter-spacing: 0;
|
color: #fff;
|
||||||
line-height: 1.4;
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10%;
|
bottom: 20rpx;
|
||||||
left: 10%;
|
left: 20rpx;
|
||||||
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3); // 增加文字阴影提高可读性
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -147,34 +151,66 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: normal;
|
justify-content: center;
|
||||||
|
padding-right: 30rpx; // 增加右侧内边距
|
||||||
|
|
||||||
.aiRightTitle {
|
.aiRightTitle {
|
||||||
font-size: 0.8rem;
|
font-size: 30rpx;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0;
|
color: #000;
|
||||||
line-height: 1.4;
|
|
||||||
color: rgba(0, 0, 0, 1);
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: 5%;
|
margin-bottom: 20rpx;
|
||||||
margin-top: 22%;
|
line-height: 1.5; // 增加行高，避免文字拥挤
|
||||||
|
// 限制最大宽度，防止文字溢出
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aiDescription {
|
.aiDescription {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0;
|
|
||||||
line-height: 2.5;
|
|
||||||
color: #999;
|
color: #999;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
width: 90%;
|
width: 100%;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
// 增加交互提示
|
||||||
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 增加hover效果，提升交互体验
|
||||||
|
&:active .aiTypeContainer {
|
||||||
|
transform: scale(0.98);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active .aiDescription {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 响应式适配：针对不同屏幕尺寸调整
|
||||||
|
@media screen and (min-width: 750rpx) {
|
||||||
|
.aiTypeContainer {
|
||||||
|
height: 340rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 375rpx) {
|
||||||
|
.aiTypeContainer {
|
||||||
|
height: 280rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aiRightTitle {
|
||||||
|
font-size: 28rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -85,8 +85,14 @@
|
|||||||
</view>
|
</view>
|
||||||
</u-modal>
|
</u-modal>
|
||||||
|
|
||||||
<u-modal :show="showPhoneDialog" title="联系社区" confirm-text="拨打" cancel-text="取消" @confirm="callCommunityPhone"
|
<u-modal
|
||||||
@cancel="showPhoneDialog = false">
|
:show="showPhoneDialog"
|
||||||
|
title="联系社区"
|
||||||
|
confirm-text="拨打"
|
||||||
|
cancel-text="取消"
|
||||||
|
@confirm="callCommunityPhone"
|
||||||
|
@cancel="showPhoneDialog = false"
|
||||||
|
:closeOnClickOverlay="true">
|
||||||
<view class="phone-dialog-content">
|
<view class="phone-dialog-content">
|
||||||
<text>社区电话：</text>
|
<text>社区电话：</text>
|
||||||
<text class="phone-number">{{communityPhone}}</text>
|
<text class="phone-number">{{communityPhone}}</text>
|
||||||
@ -157,8 +163,7 @@
|
|||||||
{
|
{
|
||||||
key: 5,
|
key: 5,
|
||||||
url: "/static/imgs/service/service_notice.png",
|
url: "/static/imgs/service/service_notice.png",
|
||||||
name: '设置',
|
name: '设置'
|
||||||
pageUrl: 'serviceNoticeList'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 6,
|
key: 6,
|
||||||
@ -174,6 +179,9 @@
|
|||||||
this.initData();
|
this.initData();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
handleCloseModal() {
|
||||||
|
this.showPhoneDialog = false;
|
||||||
|
},
|
||||||
// 初始化数据
|
// 初始化数据
|
||||||
async initData() {
|
async initData() {
|
||||||
const token = uni.getStorageSync('token');
|
const token = uni.getStorageSync('token');
|
||||||
@ -198,15 +206,18 @@
|
|||||||
|
|
||||||
// 更新用户信息
|
// 更新用户信息
|
||||||
updateUserInfo(data) {
|
updateUserInfo(data) {
|
||||||
|
// 显示时拼接IMAGE_BASE_URL
|
||||||
|
const avatarUrl = data.avatar ? `${IMAGE_BASE_URL}${data.avatar}` : '/static/imgs/index/nav.png';
|
||||||
|
|
||||||
this.userInfo = {
|
this.userInfo = {
|
||||||
nickName: data.name || data.nickName || '未命名用户',
|
nickName: data.name || data.nickName || '未命名用户',
|
||||||
avatarUrl: data.avatar || data.avatarUrl || '/static/imgs/index/nav.png',
|
avatarUrl: avatarUrl,
|
||||||
bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
|
bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
|
||||||
phone: data.phone || ''
|
phone: data.phone || ''
|
||||||
};
|
};
|
||||||
|
|
||||||
// 更新显示头像
|
// 更新显示头像
|
||||||
this.displayAvatar = this.userInfo.avatarUrl || '/static/imgs/index/nav.png';
|
this.displayAvatar = this.userInfo.avatarUrl;
|
||||||
|
|
||||||
this.formData = {
|
this.formData = {
|
||||||
name: this.userInfo.nickName,
|
name: this.userInfo.nickName,
|
||||||
@ -368,12 +379,13 @@
|
|||||||
async loginComplete(data) {
|
async loginComplete(data) {
|
||||||
try {
|
try {
|
||||||
// 获取最新用户信息
|
// 获取最新用户信息
|
||||||
|
this.showEditModal = false;
|
||||||
const res = await get('/api/v1/app_auth/mine');
|
const res = await get('/api/v1/app_auth/mine');
|
||||||
if (res && res.success) {
|
if (res && res.success) {
|
||||||
uni.setStorageSync('userInfo', res.data);
|
uni.setStorageSync('userInfo', res.data);
|
||||||
this.updateUserInfo(res.data);
|
this.updateUserInfo(res.data);
|
||||||
this.isLogin = true;
|
this.isLogin = true;
|
||||||
this.showEditModal = false;
|
// this.showEditModal = false;
|
||||||
this.showPhoneButton = false;
|
this.showPhoneButton = false;
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '登录成功'
|
title: '登录成功'
|
||||||
@ -414,7 +426,7 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (fileInfo.size > 2 * 1024 * 1024) {
|
if (fileInfo.size > 3 * 1024 * 1024) {
|
||||||
throw new Error('图片大小不能超过2MB');
|
throw new Error('图片大小不能超过2MB');
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -452,7 +464,7 @@
|
|||||||
try {
|
try {
|
||||||
const res = JSON.parse(uploadRes.data);
|
const res = JSON.parse(uploadRes.data);
|
||||||
if (res && res.success) {
|
if (res && res.success) {
|
||||||
resolve(`${IMAGE_BASE_URL}${res.data}`);
|
resolve(res.data);
|
||||||
} else {
|
} else {
|
||||||
reject(new Error(res.message || '上传失败'));
|
reject(new Error(res.message || '上传失败'));
|
||||||
}
|
}
|
||||||
@ -507,7 +519,12 @@
|
|||||||
name,
|
name,
|
||||||
bio
|
bio
|
||||||
} = this.formData;
|
} = this.formData;
|
||||||
const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
|
console.log("====", this.avatarList)
|
||||||
|
let avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
|
||||||
|
|
||||||
|
if (avatarUrl && avatarUrl.includes(IMAGE_BASE_URL)) {
|
||||||
|
avatarUrl = avatarUrl.replace(IMAGE_BASE_URL, '');
|
||||||
|
}
|
||||||
|
|
||||||
if (!name) {
|
if (!name) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
@ -535,12 +552,13 @@
|
|||||||
// 3. 更新本地存储和页面数据
|
// 3. 更新本地存储和页面数据
|
||||||
uni.setStorageSync('userInfo', res.data);
|
uni.setStorageSync('userInfo', res.data);
|
||||||
this.updateUserInfo(res.data);
|
this.updateUserInfo(res.data);
|
||||||
|
this.showEditModal = false;
|
||||||
|
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '修改成功'
|
title: '修改成功'
|
||||||
});
|
});
|
||||||
this.showEditModal = false;
|
|
||||||
} else {
|
} else {
|
||||||
throw new Error(res.message || '获取用户信息失败');
|
throw new Error(res.message || '获取用户信息失败');
|
||||||
}
|
}
|
||||||
@ -559,10 +577,17 @@
|
|||||||
this.showEditModal = false;
|
this.showEditModal = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 跳转页面
|
||||||
// 跳转页面
|
// 跳转页面
|
||||||
goPage(item) {
|
goPage(item) {
|
||||||
if (item.key === 6) { // 联系社区的特殊处理
|
if (item.key === 6) { // 联系社区的特殊处理
|
||||||
this.handleContactCommunity();
|
this.handleContactCommunity();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.key === 5) { // 设置的特殊处理
|
||||||
|
this.handleEditClick(); // 调用编辑用户信息的方法
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -585,7 +610,17 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.showPhoneDialog = true;
|
uni.showModal({
|
||||||
|
title: '联系社区',
|
||||||
|
content: '是否要拨打社区电话：' + this.communityPhone,
|
||||||
|
confirmText: '拨打',
|
||||||
|
cancelText: '取消',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.callCommunityPhone();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// 拨打社区电话
|
// 拨打社区电话
|
||||||
|
|||||||
@ -13,65 +13,63 @@
|
|||||||
<text class="title">{{ postData.title }}</text>
|
<text class="title">{{ postData.title }}</text>
|
||||||
<text class="content-text">{{ postData.content }}</text>
|
<text class="content-text">{{ postData.content }}</text>
|
||||||
<view class="images" v-if="postData.images && postData.images.length">
|
<view class="images" v-if="postData.images && postData.images.length">
|
||||||
<image v-for="(img, index) in postData.images" :key="index" :src="img" class="post-image" :class="{
|
<image v-for="(img, index) in postData.images" :key="index" :src="`${IMAGE_BASE_URL}`+img"
|
||||||
|
class="post-image" :class="{
|
||||||
'single-img': postData.images.length === 1,
|
'single-img': postData.images.length === 1,
|
||||||
'double-img': postData.images.length === 2,
|
'double-img': postData.images.length === 2,
|
||||||
'multi-img': postData.images.length >= 3
|
'multi-img': postData.images.length >= 3
|
||||||
}" mode="aspectFill" @click="previewImage(index)"></image>
|
}" mode="aspectFill" @click="previewImage(index)"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="post-footer">
|
|
||||||
<view class="post-actions">
|
|
||||||
<view class="action-item">
|
|
||||||
|
|
||||||
<text class="action-text">{{ getTotalComments() }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 评论列表 -->
|
<!-- 评论列表 -->
|
||||||
<view class="comments-container">
|
<view class="comments-container">
|
||||||
<view class="comments-title">评论 ({{ getTotalComments() }})</view>
|
<view class="section-header">
|
||||||
|
<text class="section-title">评论 ({{ getTotalComments() }})</text>
|
||||||
|
</view>
|
||||||
<view class="comments-list">
|
<view class="comments-list">
|
||||||
<view v-for="(comment, index) in flatComments" :key="comment.id" class="comment-item" :style="{
|
<view v-for="comment in flatComments" :key="comment.id" class="comment-item"
|
||||||
'--level': comment.level,
|
:class="{'is-reply': comment.toUserName}">
|
||||||
'--indent': comment.level > 0 ? (comment.level * 60) + 'rpx' : '0'
|
<view class="comment-header">
|
||||||
}">
|
<image class="avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
|
||||||
<!-- 层级视觉指示线条 -->
|
<view class="comment-user-info">
|
||||||
<view class="comment-level-indicator" v-if="comment.level > 0"></view>
|
<text class="username">{{ comment.pusherName }}</text>
|
||||||
|
<view class="meta-info">
|
||||||
<!-- 评论内容区 -->
|
<text v-if="comment.toUserName" class="reply-to">
|
||||||
<view class="comment-content-wrapper">
|
回复 {{ comment.toUserName }}
|
||||||
<image class="comment-avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
|
|
||||||
<view class="comment-main">
|
|
||||||
<view class="comment-meta">
|
|
||||||
<text class="comment-username">{{ comment.pusherName }}</text>
|
|
||||||
<text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="comment-text">{{ comment.content }}</view>
|
|
||||||
<view class="comment-actions">
|
|
||||||
<text class="reply-btn" @click="handleReply(comment.id)">回复</text>
|
|
||||||
<!-- 只在一级评论显示折叠按钮 -->
|
|
||||||
<text class="fold-btn" v-if="comment.level === 0 && hasChildren(comment)"
|
|
||||||
@click="toggleFold(comment.id)">
|
|
||||||
{{ getChildCount(comment) }}条回复{{ foldedComments.includes(comment.id) ? '展开' : '折叠' }}
|
|
||||||
</text>
|
</text>
|
||||||
|
<text class="time">{{ formatTime(comment.createdAt) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="comment-content">{{ comment.content }}</view>
|
||||||
|
|
||||||
|
<view class="comment-actions">
|
||||||
|
<!-- <view class="action-item" @click="toggleLike(comment.id)">
|
||||||
|
<text class="action-icon">{{ comment.isLiked ? '👍' : '👎' }}</text>
|
||||||
|
<text class="action-count">{{ comment.likeCount || 0 }}</text>
|
||||||
|
</view> -->
|
||||||
|
<view class="action-item" @click="handleReply(comment.id)">
|
||||||
|
<text class="action-text">回复</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载更多 -->
|
||||||
|
<view class="load-more" v-if="showLoadMore && !loading" @click="loadMoreComments">
|
||||||
|
<text>加载更多</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 新评论输入框 -->
|
<!-- 新评论输入框 -->
|
||||||
<view class="comment-input-container">
|
<view class="comment-input-container">
|
||||||
<!-- 回复提示条 -->
|
|
||||||
<view class="replying-bar" v-if="replyingTo">
|
<view class="replying-bar" v-if="replyingTo">
|
||||||
<text class="replying-text">回复 @{{ getReplyUsername(replyingTo) }}</text>
|
<text class="replying-text">回复 @{{ getReplyUsername(replyingTo) }}</text>
|
||||||
<text class="cancel-reply" @click="cancelReply">取消</text>
|
<text class="cancel-reply" @click="cancelReply">取消</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="input-wrapper">
|
<view class="input-wrapper">
|
||||||
<input class="comment-input" v-model="newComment" :placeholder="replyingTo ? '输入回复内容...' : '写下你的评论...'"
|
<input class="comment-input" v-model="newComment" :placeholder="replyingTo ? '输入回复内容...' : '写下你的评论...'"
|
||||||
@confirm="submitComment" />
|
@confirm="submitComment" />
|
||||||
@ -84,21 +82,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { get, post } from '@/utils/request';
|
||||||
get,
|
import { formatTime } from '@/utils/timeFormat';
|
||||||
post
|
import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
|
||||||
} from '@/utils/request';
|
|
||||||
import {
|
|
||||||
formatTime
|
|
||||||
} from '@/utils/timeFormat';
|
|
||||||
// import uniIcons from '@/components/uni-icons/uni-icons.vue';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
// uniIcons
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
IMAGE_BASE_URL,
|
||||||
Id: '',
|
Id: '',
|
||||||
flatComments: [],
|
flatComments: [],
|
||||||
newComment: "",
|
newComment: "",
|
||||||
@ -109,8 +99,8 @@
|
|||||||
loading: false,
|
loading: false,
|
||||||
error: '',
|
error: '',
|
||||||
submitting: false,
|
submitting: false,
|
||||||
foldedComments: [], // 存储被折叠的评论ID
|
foldedComments: [],
|
||||||
showLoadMore: false, // 是否显示加载更多
|
showLoadMore: false,
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
};
|
};
|
||||||
@ -125,9 +115,33 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 扁平化评论结构（核心修改）
|
||||||
|
updateFlatComments() {
|
||||||
|
const flattenComments = (comments, parentUser = '') => {
|
||||||
|
return comments.reduce((arr, comment) => {
|
||||||
|
// 添加回复关系和点赞状态
|
||||||
|
const newComment = {
|
||||||
|
...comment,
|
||||||
|
toUserName: parentUser,
|
||||||
|
isLiked: false,
|
||||||
|
likeCount: comment.likeCount || 0
|
||||||
|
};
|
||||||
|
|
||||||
|
arr.push(newComment);
|
||||||
|
|
||||||
|
if (comment.children && comment.children.length) {
|
||||||
|
arr.push(...flattenComments(comment.children, comment.pusherName));
|
||||||
|
}
|
||||||
|
|
||||||
|
return arr;
|
||||||
|
}, []);
|
||||||
|
};
|
||||||
|
this.flatComments = flattenComments(this.postData.histories || []);
|
||||||
|
},
|
||||||
|
|
||||||
// 检查用户是否已登录
|
// 检查用户是否已登录
|
||||||
checkLogin() {
|
checkLogin() {
|
||||||
const token = uni.getStorageSync('token'); // 假设token存储在本地
|
const token = uni.getStorageSync('token');
|
||||||
return !!token;
|
return !!token;
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -140,7 +154,7 @@
|
|||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/mine/index' // 替换为实际的个人中心页面路径
|
url: '/pages/mine/index'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -151,65 +165,28 @@
|
|||||||
previewImage(index) {
|
previewImage(index) {
|
||||||
if (!this.postData.images || !this.postData.images.length) return;
|
if (!this.postData.images || !this.postData.images.length) return;
|
||||||
|
|
||||||
|
const fullImageUrls = this.postData.images.map(imagePath => {
|
||||||
|
return IMAGE_BASE_URL + imagePath;
|
||||||
|
});
|
||||||
|
|
||||||
uni.previewImage({
|
uni.previewImage({
|
||||||
current: index,
|
current: index,
|
||||||
urls: this.postData.images
|
urls: fullImageUrls // 传递完整的 URL 数组
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// 检查评论是否有子评论
|
// 切换点赞状态
|
||||||
hasChildren(comment) {
|
toggleLike(commentId) {
|
||||||
return comment.children && comment.children.length > 0;
|
const comment = this.flatComments.find(item => item.id === commentId);
|
||||||
},
|
if (comment) {
|
||||||
|
comment.isLiked = !comment.isLiked;
|
||||||
// 获取子评论数量
|
comment.likeCount += comment.isLiked ? 1 : -1;
|
||||||
getChildCount(comment) {
|
|
||||||
if (!this.hasChildren(comment)) return 0;
|
|
||||||
return comment.children.length;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 切换折叠状态
|
|
||||||
toggleFold(commentId) {
|
|
||||||
const index = this.foldedComments.indexOf(commentId);
|
|
||||||
if (index === -1) {
|
|
||||||
this.foldedComments.push(commentId);
|
|
||||||
} else {
|
|
||||||
this.foldedComments.splice(index, 1);
|
|
||||||
}
|
}
|
||||||
this.updateFlatComments();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 更新平铺评论列表（处理折叠逻辑）
|
|
||||||
updateFlatComments() {
|
|
||||||
const flattenWithFold = (comments, level = 0, parentFolded = false) => {
|
|
||||||
return comments.reduce((arr, comment) => {
|
|
||||||
// 只有一级评论才检查折叠状态
|
|
||||||
const isFolded = level === 0 && this.foldedComments.includes(comment.id);
|
|
||||||
const currentFolded = parentFolded || isFolded;
|
|
||||||
|
|
||||||
if (!parentFolded) {
|
|
||||||
arr.push({
|
|
||||||
...comment,
|
|
||||||
level,
|
|
||||||
isFolded
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果是一级评论且被折叠，则不显示子评论
|
|
||||||
if (comment.children && comment.children.length && !(level === 0 && isFolded)) {
|
|
||||||
arr.push(...flattenWithFold(comment.children, level + 1, currentFolded));
|
|
||||||
}
|
|
||||||
|
|
||||||
return arr;
|
|
||||||
}, []);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.flatComments = flattenWithFold(this.postData.histories || []);
|
|
||||||
},
|
|
||||||
// 加载更多评论
|
// 加载更多评论
|
||||||
loadMoreComments() {
|
loadMoreComments() {
|
||||||
this.currentPage++;
|
this.currentPage++;
|
||||||
// 这里应该调用API获取更多评论，示例中简化处理
|
|
||||||
this.getDetail();
|
this.getDetail();
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -222,14 +199,12 @@
|
|||||||
pageSize: this.pageSize
|
pageSize: this.pageSize
|
||||||
});
|
});
|
||||||
if (!res?.success) throw new Error(res?.message || '获取详情失败');
|
if (!res?.success) throw new Error(res?.message || '获取详情失败');
|
||||||
|
|
||||||
if (this.currentPage === 1) {
|
if (this.currentPage === 1) {
|
||||||
this.postData = res.data;
|
this.postData = res.data;
|
||||||
} else {
|
} else {
|
||||||
// 合并评论数据
|
// 合并评论数据
|
||||||
this.postData.histories = [...this.postData.histories, ...res.data.histories];
|
this.postData.histories = [...this.postData.histories, ...res.data.histories];
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updateFlatComments();
|
this.updateFlatComments();
|
||||||
this.showLoadMore = (res.data.histories.length >= this.pageSize);
|
this.showLoadMore = (res.data.histories.length >= this.pageSize);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@ -242,22 +217,16 @@
|
|||||||
|
|
||||||
formatTime(isoTime) {
|
formatTime(isoTime) {
|
||||||
if (!isoTime) return '';
|
if (!isoTime) return '';
|
||||||
return formatTime(isoTime); // 使用统一的格式化方法
|
return formatTime(isoTime);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 计算总评论数
|
// 计算总评论数
|
||||||
getTotalComments() {
|
getTotalComments() {
|
||||||
const count = (comments) => {
|
return this.flatComments.length;
|
||||||
return comments.reduce((total, comment) => {
|
|
||||||
return total + 1 + (comment.children ? count(comment.children) : 0);
|
|
||||||
}, 0);
|
|
||||||
};
|
|
||||||
return count(this.postData.histories || []);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 提交评论/回复
|
// 提交评论/回复
|
||||||
async submitComment() {
|
async submitComment() {
|
||||||
// 检查用户是否已登录
|
|
||||||
if (!this.checkLogin()) {
|
if (!this.checkLogin()) {
|
||||||
this.goToLogin();
|
this.goToLogin();
|
||||||
this.newComment = "";
|
this.newComment = "";
|
||||||
@ -266,7 +235,6 @@
|
|||||||
|
|
||||||
const content = this.newComment.trim();
|
const content = this.newComment.trim();
|
||||||
if (!content || this.submitting) return;
|
if (!content || this.submitting) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
this.submitting = true;
|
this.submitting = true;
|
||||||
const requestData = {
|
const requestData = {
|
||||||
@ -274,12 +242,10 @@
|
|||||||
reciprocityId: this.postData.id,
|
reciprocityId: this.postData.id,
|
||||||
rootHistoryId: this.replyingTo || ""
|
rootHistoryId: this.replyingTo || ""
|
||||||
};
|
};
|
||||||
|
|
||||||
const response = await post(
|
const response = await post(
|
||||||
'/api/v1/app_auth/reciprocities/send',
|
'/api/v1/app_auth/reciprocities/send',
|
||||||
requestData
|
requestData
|
||||||
);
|
);
|
||||||
|
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
this.newComment = '';
|
this.newComment = '';
|
||||||
this.replyingTo = null;
|
this.replyingTo = null;
|
||||||
@ -309,7 +275,6 @@
|
|||||||
|
|
||||||
// 处理回复按钮点击
|
// 处理回复按钮点击
|
||||||
handleReply(commentId) {
|
handleReply(commentId) {
|
||||||
// 检查用户是否已登录
|
|
||||||
if (!this.checkLogin()) {
|
if (!this.checkLogin()) {
|
||||||
this.goToLogin();
|
this.goToLogin();
|
||||||
return;
|
return;
|
||||||
@ -332,150 +297,96 @@
|
|||||||
|
|
||||||
// 获取被回复人的用户名
|
// 获取被回复人的用户名
|
||||||
getReplyUsername(commentId) {
|
getReplyUsername(commentId) {
|
||||||
const findUser = (comments) => {
|
const comment = this.flatComments.find(item => item.id === commentId);
|
||||||
for (const c of comments) {
|
return comment ? comment.pusherName : '';
|
||||||
if (c.id === commentId) return c.pusherName;
|
|
||||||
if (c.children && c.children.length) {
|
|
||||||
const user = findUser(c.children);
|
|
||||||
if (user) return user;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return "";
|
|
||||||
};
|
|
||||||
return findUser(this.postData.histories);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
/* 使用SCSS增强样式能力 */
|
/* 基础变量定义 */
|
||||||
$primary-color: #4361ee; // 更现代的蓝色
|
$primary-color: #3881FF;
|
||||||
$primary-light: #e9f0ff; // 浅蓝色背景
|
$text-color: #333;
|
||||||
$text-color: #2d3748; // 深灰色文字
|
$light-text: #999;
|
||||||
$light-text: #718096; // 浅灰色文字
|
$border-color: #eee;
|
||||||
$border-color: #e2e8f0; // 更柔和的边框色
|
$bg-color: #f8f8f8;
|
||||||
$bg-color: #f7fafc; // 浅灰色背景
|
$radius-md: 16rpx;
|
||||||
$comment-bg: #ffffff; // 白色评论背景
|
$radius-sm: 8rpx;
|
||||||
$shadow-sm: 0 1rpx 3rpx rgba(0, 0, 0, 0.05); // 小阴影
|
$spacing-lg: 32rpx;
|
||||||
$shadow-md: 0 4rpx 6rpx rgba(0, 0, 0, 0.08); // 中等阴影
|
$spacing-md: 24rpx;
|
||||||
$radius-lg: 24rpx; // 大圆角
|
$spacing-sm: 16rpx;
|
||||||
$radius-md: 16rpx; // 中圆角
|
|
||||||
$radius-sm: 8rpx; // 小圆角
|
|
||||||
$transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); // 平滑过渡
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 32rpx;
|
padding: $spacing-lg;
|
||||||
background-color: $bg-color;
|
background-color: white;
|
||||||
/* 增加底部内边距，确保内容不被输入框遮挡 */
|
|
||||||
padding-bottom: 240rpx;
|
padding-bottom: 240rpx;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 主帖样式优化 */
|
/* 主帖样式 */
|
||||||
.post-container {
|
.post-container {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: $radius-lg;
|
padding: 0 0 $spacing-lg 0;
|
||||||
padding: 48rpx;
|
margin-bottom: $spacing-lg;
|
||||||
margin-bottom: 40rpx;
|
border-bottom: 1rpx solid $border-color;
|
||||||
box-shadow: $shadow-sm;
|
|
||||||
transition: $transition;
|
|
||||||
border: 1rpx solid $border-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: $shadow-md;
|
|
||||||
transform: translateY(-1rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-header {
|
.post-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: $spacing-md;
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 96rpx;
|
width: 96rpx;
|
||||||
height: 96rpx;
|
height: 96rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 32rpx;
|
margin-right: $spacing-md;
|
||||||
border: 2rpx solid white;
|
|
||||||
box-shadow: $shadow-sm;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
transition: $transition;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-info {
|
.post-info {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
line-height: 1.5;
|
display: block;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
font-size: 26rpx;
|
font-size: 24rpx;
|
||||||
color: $light-text;
|
color: $light-text;
|
||||||
line-height: 1.5;
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-content {
|
.post-content {
|
||||||
.title {
|
.title {
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1a1a1a;
|
color: $text-color;
|
||||||
margin-bottom: 32rpx;
|
margin-bottom: $spacing-md;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.6;
|
line-height: 1.4;
|
||||||
letter-spacing: -0.01em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-text {
|
.content-text {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
line-height: 1.7;
|
line-height: 1.6;
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: $spacing-lg;
|
||||||
display: block;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.images {
|
.images {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 24rpx;
|
gap: $spacing-sm;
|
||||||
margin-top: 32rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-image {
|
.post-image {
|
||||||
border-radius: $radius-md;
|
border-radius: $radius-md;
|
||||||
background-color: #f5f5f5;
|
background-color: $bg-color;
|
||||||
object-fit: cover;
|
|
||||||
transition: $transition;
|
|
||||||
box-shadow: $shadow-sm;
|
|
||||||
cursor: zoom-in;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
box-shadow: $shadow-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.single-img {
|
&.single-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -483,186 +394,161 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.double-img {
|
&.double-img {
|
||||||
width: calc(50% - 12rpx);
|
width: calc(50% - 8rpx);
|
||||||
height: 360rpx;
|
height: 360rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.multi-img {
|
&.multi-img {
|
||||||
width: calc(33.33% - 16rpx);
|
width: calc(33.33% - 10.67rpx);
|
||||||
height: 240rpx;
|
height: 240rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
/* 评论区样式优化 */
|
}
|
||||||
.comments-container {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: $radius-lg;
|
|
||||||
padding: 0 40rpx;
|
|
||||||
margin-bottom: 32rpx;
|
|
||||||
box-shadow: $shadow-sm;
|
|
||||||
border: 1rpx solid $border-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-title {
|
/* 评论区样式（核心修改） */
|
||||||
|
.comments-container {
|
||||||
|
background-color: white;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
padding: $spacing-md 0;
|
||||||
|
border-bottom: 1rpx solid $border-color;
|
||||||
|
margin-bottom: $spacing-md;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
padding: 40rpx 0;
|
|
||||||
border-bottom: 1rpx solid $border-color;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: -1rpx;
|
|
||||||
width: 80rpx;
|
|
||||||
height: 4rpx;
|
|
||||||
background-color: $primary-color;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-list {
|
.comments-list {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-item {
|
.comment-item {
|
||||||
position: relative;
|
padding: $spacing-md 0;
|
||||||
padding: 20rpx 0;
|
border-bottom: 1rpx solid $border-color;
|
||||||
transition: $transition;
|
|
||||||
margin-bottom: 8rpx;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
&.is-reply {
|
||||||
border-bottom: 1rpx solid rgba($border-color, 0.5);
|
margin-left: 80rpx;
|
||||||
}
|
/* 回复评论缩进 */
|
||||||
|
padding-left: $spacing-md;
|
||||||
&:hover {
|
background-color: rgba(248, 248, 248, 0.5);
|
||||||
background-color: rgba($primary-light, 0.2);
|
|
||||||
border-radius: $radius-md;
|
border-radius: $radius-md;
|
||||||
}
|
margin-bottom: $spacing-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-level-indicator {
|
.comment-header {
|
||||||
position: absolute;
|
|
||||||
top: 70rpx;
|
|
||||||
width: 4rpx;
|
|
||||||
background-color: rgba($border-color, 0.5);
|
|
||||||
left: calc(60rpx + var(--indent) - 40rpx);
|
|
||||||
height: calc(100% - 70rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-content-wrapper {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
|
||||||
padding-left: var(--indent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-avatar {
|
|
||||||
width: 64rpx;
|
|
||||||
height: 64rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 24rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border: 1rpx solid $border-color;
|
|
||||||
transition: $transition;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-main {
|
|
||||||
flex: 1;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-meta {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: $spacing-sm;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 72rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: $spacing-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-username {
|
.comment-user-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.username {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
font-weight: 500;
|
display: block;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-time {
|
.meta-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.reply-to {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $primary-color;
|
||||||
|
margin-right: $spacing-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: $light-text;
|
color: $light-text;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.comment-text {
|
.comment-content {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
line-height: 1.6;
|
line-height: 1.5;
|
||||||
margin-bottom: 12rpx;
|
margin-bottom: $spacing-sm;
|
||||||
padding: 8rpx 0;
|
padding-left: 88rpx;
|
||||||
word-break: break-word;
|
/* 与头像对齐 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-actions {
|
.comment-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: $spacing-lg;
|
||||||
|
padding-left: 88rpx;
|
||||||
|
/* 与头像对齐 */
|
||||||
|
|
||||||
|
.action-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 32rpx;
|
color: $light-text;
|
||||||
padding: 4rpx 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-btn,
|
|
||||||
.fold-btn {
|
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: $primary-color;
|
|
||||||
padding: 6rpx 12rpx;
|
|
||||||
border-radius: $radius-sm;
|
|
||||||
transition: $transition;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgba($primary-color, 0.05);
|
|
||||||
|
|
||||||
&:hover {
|
.action-icon {
|
||||||
background-color: rgba($primary-color, 0.1);
|
margin-right: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.95);
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fold-btn {
|
/* 加载更多 */
|
||||||
|
.load-more {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: $spacing-lg 0;
|
||||||
color: $light-text;
|
color: $light-text;
|
||||||
background-color: rgba($light-text, 0.05);
|
font-size: 28rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:active {
|
||||||
background-color: rgba($light-text, 0.1);
|
color: $primary-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 评论输入框样式优化 */
|
/* 底部输入区 */
|
||||||
.comment-input-container {
|
.comment-input-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 24rpx 32rpx;
|
padding: $spacing-md;
|
||||||
border-top: 1rpx solid $border-color;
|
border-top: 1rpx solid $border-color;
|
||||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
|
||||||
|
|
||||||
.replying-bar {
|
.replying-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16rpx 24rpx;
|
padding: $spacing-sm $spacing-md;
|
||||||
background-color: $primary-light;
|
background-color: $bg-color;
|
||||||
border-radius: $radius-md;
|
border-radius: $radius-md;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: $spacing-sm;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.replying-text {
|
.replying-text {
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
@ -674,133 +560,44 @@
|
|||||||
padding: 8rpx 16rpx;
|
padding: 8rpx 16rpx;
|
||||||
border-radius: $radius-sm;
|
border-radius: $radius-sm;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: $transition;
|
|
||||||
background-color: rgba($primary-color, 0.1);
|
|
||||||
|
|
||||||
&:hover {
|
&:active {
|
||||||
background-color: rgba($primary-color, 0.2);
|
opacity: 0.7;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16rpx;
|
gap: $spacing-md;
|
||||||
}
|
|
||||||
|
|
||||||
.comment-input {
|
.comment-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 88rpx;
|
height: 80rpx;
|
||||||
padding: 0 32rpx;
|
background-color: $bg-color;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
padding: 0 $spacing-md;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
border: 1rpx solid $border-color;
|
|
||||||
border-radius: 48rpx;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
transition: $transition;
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: $primary-color;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 0 0 4rpx rgba($primary-color, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: #a0aec0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-btn {
|
.send-btn {
|
||||||
min-width: 140rpx;
|
|
||||||
height: 88rpx;
|
|
||||||
background-color: $primary-color;
|
background-color: $primary-color;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
|
||||||
border-radius: 48rpx;
|
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
font-weight: 500;
|
padding: 16rpx 32rpx;
|
||||||
transition: $transition;
|
border-radius: 40rpx;
|
||||||
cursor: pointer;
|
min-width: 120rpx;
|
||||||
display: flex;
|
text-align: center;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 32rpx;
|
|
||||||
|
|
||||||
&:hover {
|
&:disabled {
|
||||||
background-color: darken($primary-color, 5%);
|
opacity: 0.5;
|
||||||
box-shadow: $shadow-sm;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken($primary-color, 10%);
|
opacity: 0.8;
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
background-color: #edf2f7;
|
|
||||||
color: #a0aec0;
|
|
||||||
cursor: not-allowed;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 加载更多按钮 */
|
|
||||||
.load-more {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 32rpx 0;
|
|
||||||
color: $light-text;
|
|
||||||
font-size: 28rpx;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: $transition;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
margin-right: 16rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 添加一些动画效果 */
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; transform: translateY(20rpx); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-item {
|
|
||||||
animation: fadeIn 0.3s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式调整 */
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.content {
|
|
||||||
padding: 24rpx;
|
|
||||||
padding-bottom: 220rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-container {
|
|
||||||
padding: 32rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-input-container {
|
|
||||||
padding: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-item {
|
|
||||||
padding: 16rpx 0;
|
|
||||||
margin-bottom: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-avatar {
|
|
||||||
width: 56rpx;
|
|
||||||
height: 56rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-text {
|
|
||||||
font-size: 26rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,6 +1,41 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
<!-- 选择区域 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label" @click="showTypeSelect = true" style="margin-bottom: 0;">
|
||||||
|
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
|
||||||
|
选择区域
|
||||||
|
<view class="select-box">
|
||||||
|
{{ workOrderArea || '请选择' }}
|
||||||
|
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-picker
|
||||||
|
:show="showTypeSelect"
|
||||||
|
:columns="areaList"
|
||||||
|
keyName="title"
|
||||||
|
@confirm="handleTypeConfirm"
|
||||||
|
@cancel="showTypeSelect = false">
|
||||||
|
</u-picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 工单分类 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label" @click="showSelect = true" style="margin-bottom: 0;">
|
||||||
|
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
|
||||||
|
工单类型
|
||||||
|
<view class="select-box">
|
||||||
|
{{ workOrderCategory || '请选择' }}
|
||||||
|
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
|
||||||
|
@cancel="handleCancel">
|
||||||
|
</u-picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<view class="label">
|
<view class="label">
|
||||||
<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
|
<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
|
||||||
@ -44,20 +79,6 @@
|
|||||||
<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
|
<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 工单分类 -->
|
|
||||||
<view class="form-item">
|
|
||||||
<view class="label" @click="showSelect = true">
|
|
||||||
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
|
|
||||||
工单类型
|
|
||||||
<view class="select-box">
|
|
||||||
{{ workOrderCategory || '请选择' }}
|
|
||||||
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
|
|
||||||
@cancel="handleCancel">
|
|
||||||
</u-picker>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 工单地点 -->
|
<!-- 工单地点 -->
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
@ -99,17 +120,22 @@
|
|||||||
fileList: [],
|
fileList: [],
|
||||||
workOrderCategory: '',
|
workOrderCategory: '',
|
||||||
workOrderCategoryID: '',
|
workOrderCategoryID: '',
|
||||||
|
workOrderArea:'',
|
||||||
|
workOrderAreaID:'',
|
||||||
showSelect: false,
|
showSelect: false,
|
||||||
|
showTypeSelect:false,
|
||||||
categoryList: [],
|
categoryList: [],
|
||||||
workOrderLocation: '',
|
workOrderLocation: '',
|
||||||
expectedTime: '',
|
expectedTime: '',
|
||||||
uploadedImages: [],
|
uploadedImages: [],
|
||||||
uploadedVideos: [],
|
uploadedVideos: [],
|
||||||
videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv']
|
videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv'],
|
||||||
|
areaList:[],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getOrderList();
|
this.getOrderList();
|
||||||
|
this.getOrderTypeList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleBack() {
|
handleBack() {
|
||||||
@ -281,6 +307,7 @@
|
|||||||
concatName: this.concatName, // 新增联系人姓名
|
concatName: this.concatName, // 新增联系人姓名
|
||||||
customerPhone: this.customerPhone, // 新增联系人电话
|
customerPhone: this.customerPhone, // 新增联系人电话
|
||||||
orderTypeId: this.workOrderCategoryID,
|
orderTypeId: this.workOrderCategoryID,
|
||||||
|
orderAreaId:this.workOrderAreaID,
|
||||||
address: this.workOrderLocation,
|
address: this.workOrderLocation,
|
||||||
images: this.uploadedImages,
|
images: this.uploadedImages,
|
||||||
videos: this.uploadedVideos,
|
videos: this.uploadedVideos,
|
||||||
@ -323,6 +350,8 @@
|
|||||||
this.fileList = [];
|
this.fileList = [];
|
||||||
this.uploadedImages = [];
|
this.uploadedImages = [];
|
||||||
this.uploadedVideos = [];
|
this.uploadedVideos = [];
|
||||||
|
this.workOrderArea = '';
|
||||||
|
this.workOrderAreaID = '';
|
||||||
},
|
},
|
||||||
|
|
||||||
handleConfirm(e) {
|
handleConfirm(e) {
|
||||||
@ -331,6 +360,12 @@
|
|||||||
this.showSelect = false;
|
this.showSelect = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleTypeConfirm(e) {
|
||||||
|
this.workOrderArea = e.value[0].title;
|
||||||
|
this.workOrderAreaID = e.value[0].id;
|
||||||
|
this.showTypeSelect = false;
|
||||||
|
},
|
||||||
|
|
||||||
handleCancel() {
|
handleCancel() {
|
||||||
this.showSelect = false;
|
this.showSelect = false;
|
||||||
},
|
},
|
||||||
@ -351,6 +386,24 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 获取工作区域
|
||||||
|
async getOrderTypeList(){
|
||||||
|
try {
|
||||||
|
const res = await get('/api/v1/apps/work-order-area');
|
||||||
|
if (res?.success) {
|
||||||
|
this.areaList = [
|
||||||
|
[...res.data]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('获取工作区域失败:', err);
|
||||||
|
uni.showToast({
|
||||||
|
title: '获取工作区域失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
BIN
static/imgs/.DS_Store
vendored
BIN
static/imgs/.DS_Store
vendored
Binary file not shown.
BIN
static/imgs/ai/.DS_Store
vendored
BIN
static/imgs/ai/.DS_Store
vendored
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 498 B |
Binary file not shown.
|
Before Width: | Height: | Size: 822 B |
Binary file not shown.
|
Before Width: | Height: | Size: 559 B |
Binary file not shown.
|
Before Width: | Height: | Size: 703 B |
Binary file not shown.
|
Before Width: | Height: | Size: 528 B |
Binary file not shown.
|
Before Width: | Height: | Size: 736 B |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 551 B |
Binary file not shown.
|
Before Width: | Height: | Size: 647 B |
Binary file not shown.
|
Before Width: | Height: | Size: 746 B |
Loading…
x
Reference in New Issue
Block a user