修改
This commit is contained in:
parent
ef0b041232
commit
9efdb48938
@ -1,14 +1,10 @@
|
|||||||
<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">
|
<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" mode="aspectFill" 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>
|
||||||
|
|
||||||
@ -51,7 +47,7 @@
|
|||||||
|
|
||||||
<!-- 活动详情卡片 -->
|
<!-- 活动详情卡片 -->
|
||||||
<view class="detail-card">
|
<view class="detail-card">
|
||||||
<!-- <view class="card-header">
|
<!-- <view class="card-header">
|
||||||
<view class="header-line"></view>
|
<view class="header-line"></view>
|
||||||
<text class="header-title">活动详情</text>
|
<text class="header-title">活动详情</text>
|
||||||
</view> -->
|
</view> -->
|
||||||
@ -63,12 +59,8 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="section-content">
|
<view class="section-content">
|
||||||
<view v-html="activityInfo.content"></view>
|
<view v-html="activityInfo.content"></view>
|
||||||
<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>
|
</view>
|
||||||
|
|
||||||
@ -119,31 +111,34 @@
|
|||||||
|
|
||||||
<!-- 底部操作栏 -->
|
<!-- 底部操作栏 -->
|
||||||
<view class="action-bar">
|
<view class="action-bar">
|
||||||
<!-- <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="36" 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 +170,7 @@ export default {
|
|||||||
this.Id = options.Id;
|
this.Id = options.Id;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted() {
|
||||||
this.getActivitiesDetail();
|
this.getActivitiesDetail();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -187,15 +182,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 +201,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 +214,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,26 +227,28 @@ 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;
|
$border-color: #eee;
|
||||||
$border-radius: 16rpx;
|
$border-radius: 16rpx;
|
||||||
$shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
$shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
.activity-detail-container {
|
.activity-detail-container {
|
||||||
padding-bottom: 120rpx;
|
padding-bottom: 120rpx;
|
||||||
background-color: $secondary-color;
|
background-color: $secondary-color;
|
||||||
|
|
||||||
@ -314,7 +310,8 @@ $shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-card, .tips-card {
|
.detail-card,
|
||||||
|
.tips-card {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
@ -502,32 +499,52 @@ $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 {
|
.share-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 120rpx;
|
height: 80rpx;
|
||||||
height: 100%;
|
padding: 0 30rpx;
|
||||||
|
background: linear-gradient(135deg, #6e8cfa, #5b9cf8);
|
||||||
|
border-radius: 40rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(91, 156, 248, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border: none;
|
||||||
|
|
||||||
text {
|
.share-text {
|
||||||
font-size: 22rpx;
|
color: #fff;
|
||||||
color: $light-text;
|
font-size: 28rpx;
|
||||||
margin-top: 6rpx;
|
margin-left: 10rpx;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.btn-hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
transform: translateY(2rpx);
|
||||||
|
box-shadow: 0 2rpx 6rpx rgba(91, 156, 248, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-btn::after {
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.signup-btn {
|
.signup-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
background-color: #5b9cf8;
|
margin-left: 30rpx;
|
||||||
|
background: linear-gradient(135deg, #ff7e5f, #ff5a5f);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
@ -535,20 +552,27 @@ $shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
|||||||
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.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
|
transform: translateY(2rpx);
|
||||||
|
box-shadow: 0 2rpx 6rpx rgba(255, 90, 95, 0.4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@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>
|
||||||
@ -157,8 +157,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,
|
||||||
@ -559,6 +558,7 @@
|
|||||||
this.showEditModal = false;
|
this.showEditModal = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 跳转页面
|
||||||
// 跳转页面
|
// 跳转页面
|
||||||
goPage(item) {
|
goPage(item) {
|
||||||
if (item.key === 6) { // 联系社区的特殊处理
|
if (item.key === 6) { // 联系社区的特殊处理
|
||||||
@ -566,6 +566,11 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (item.key === 5) { // 设置的特殊处理
|
||||||
|
this.handleEditClick(); // 调用编辑用户信息的方法
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!this.checkLogin()) {
|
if (!this.checkLogin()) {
|
||||||
this.showEditModal = true;
|
this.showEditModal = true;
|
||||||
return;
|
return;
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 选择区域 -->
|
<!-- 选择区域 -->
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<view class="label" @click="showSelect = true" style="margin-bottom: 0;">
|
<view class="label" @click="showTypeSelect = true" style="margin-bottom: 0;">
|
||||||
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
|
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
|
||||||
选择区域
|
选择区域
|
||||||
<view class="select-box">
|
<view class="select-box">
|
||||||
@ -11,8 +11,12 @@
|
|||||||
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-picker :show="showSelect" :columns="areaList" keyName="label" @confirm="handleConfirm"
|
<u-picker
|
||||||
@cancel="handleCancel">
|
:show="showTypeSelect"
|
||||||
|
:columns="areaList"
|
||||||
|
keyName="title"
|
||||||
|
@confirm="handleTypeConfirm"
|
||||||
|
@cancel="showTypeSelect = false">
|
||||||
</u-picker>
|
</u-picker>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -116,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() {
|
||||||
@ -298,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,
|
||||||
@ -340,6 +350,8 @@
|
|||||||
this.fileList = [];
|
this.fileList = [];
|
||||||
this.uploadedImages = [];
|
this.uploadedImages = [];
|
||||||
this.uploadedVideos = [];
|
this.uploadedVideos = [];
|
||||||
|
this.workOrderArea = '';
|
||||||
|
this.workOrderAreaID = '';
|
||||||
},
|
},
|
||||||
|
|
||||||
handleConfirm(e) {
|
handleConfirm(e) {
|
||||||
@ -348,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;
|
||||||
},
|
},
|
||||||
@ -368,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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user