修改
This commit is contained in:
qiuyuan
parent
ef0b041232
commit
9efdb48938
File diff suppressed because it is too large
Load Diff
@ -1,180 +1,216 @@
|
||||
<template>
|
||||
<view class="aiHelper">
|
||||
<view class="aiHelperContainer">
|
||||
<!-- 标题区域 -->
|
||||
<view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">
|
||||
{{ aiHelperTitle }}
|
||||
</view>
|
||||
|
||||
<view class="aiHelper">
|
||||
|
||||
<view class="aiHelperContainer">
|
||||
|
||||
<view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">{{aiHelperTitle}}</view>
|
||||
<view class="aiBox">
|
||||
<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="aiLeft" :style="{'background-image': `url(${item.imagePath})`}">
|
||||
<view class="aiLeftTitle">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="aiRight">
|
||||
<view class="aiRightTitle"><text>{{item.description}}</text></view>
|
||||
<view class="aiDescription"><text>开始对话></text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view><Footer></Footer></view>
|
||||
|
||||
</view>
|
||||
<!-- AI类型卡片容器 -->
|
||||
<view class="aiBox">
|
||||
<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="aiLeft" :style="{'background-image': `url(${item.imagePath})`}">
|
||||
<view class="aiLeftTitle">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="aiRight">
|
||||
<view class="aiRightTitle"><text>{{ item.description }}</text></view>
|
||||
<view class="aiDescription"><text>开始对话></text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view><Footer></Footer></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import {get,post} from '@/utils/request';
|
||||
import {IMAGE_BASE_URL,BASE_URL} from '@/utils/config';
|
||||
export default{
|
||||
name:'aiHelper',
|
||||
components:{Footer},
|
||||
data(){
|
||||
return{
|
||||
aiHelperTitle:'AI智能助手',
|
||||
aiHelperTitleBackground:'../../static/imgs/ai/title.png',
|
||||
aiType:[],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods:{
|
||||
goAiType(item){
|
||||
uni.navigateTo({
|
||||
url: `/pages/chat/chatPage?serviceUrl=${item.serviceUrl}&apiKey=${item.apiKey}&id=${item.id}&name=${item.name}&icon=${item.icon}`
|
||||
});
|
||||
},
|
||||
async getData(){
|
||||
let params = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
try {
|
||||
const res = await get('/api/v1/apps/ai_request', params);
|
||||
if (!res || !res.success) {
|
||||
throw new Error('获取AI助手失败');
|
||||
}
|
||||
if(res.data.length>0){
|
||||
res.data.forEach((item)=>{
|
||||
item.background=IMAGE_BASE_URL+item.background
|
||||
item.imagePath=IMAGE_BASE_URL+item.imagePath
|
||||
item.icon=IMAGE_BASE_URL+item.icon
|
||||
})
|
||||
}
|
||||
this.aiType=res.data
|
||||
} catch (err) {
|
||||
console.error('获取AI助手失败:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import { get, post } from '@/utils/request';
|
||||
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
||||
export default {
|
||||
name: 'aiHelper',
|
||||
components: { Footer },
|
||||
data() {
|
||||
return {
|
||||
aiHelperTitle: 'AI智能助手',
|
||||
aiHelperTitleBackground: '../../static/imgs/ai/title.png',
|
||||
aiType: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
goAiType(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/chat/chatPage?serviceUrl=${item.serviceUrl}&apiKey=${item.apiKey}&id=${item.id}&name=${item.name}&icon=${item.icon}`
|
||||
});
|
||||
},
|
||||
async getData() {
|
||||
let params = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
try {
|
||||
const res = await get('/api/v1/apps/ai_request', params);
|
||||
if (!res || !res.success) {
|
||||
throw new Error('获取AI助手失败');
|
||||
}
|
||||
if (res.data.length > 0) {
|
||||
res.data.forEach((item) => {
|
||||
item.background = IMAGE_BASE_URL + item.background
|
||||
item.imagePath = IMAGE_BASE_URL + item.imagePath
|
||||
item.icon = IMAGE_BASE_URL + item.icon
|
||||
})
|
||||
}
|
||||
this.aiType = res.data
|
||||
} catch (err) {
|
||||
console.error('获取AI助手失败:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.aiHelper{
|
||||
// margin-top: 90rpx;
|
||||
.aiHelperContainer {
|
||||
padding: 2%;
|
||||
padding-bottom: 50%;
|
||||
// 引入变量和混入
|
||||
// @import "@/styles/variables.scss"; // 假设你有这个文件，没有可以忽略
|
||||
|
||||
.aiHelperTitle {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.5;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
margin-bottom: 3%;
|
||||
// background-image: url('../../static/imgs/ai/title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 80%;
|
||||
background-size: 30%;
|
||||
}
|
||||
.aiHelper {
|
||||
// 使用安全区域适配，避免底部被遮挡
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.aiBox {
|
||||
.aiType {
|
||||
margin-bottom: 3%;
|
||||
width: 100%;
|
||||
height: 310rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.aiHelperContainer {
|
||||
padding: 30rpx; // 使用rpx单位适配不同屏幕
|
||||
box-sizing: border-box; // 确保padding不会增加总宽度
|
||||
|
||||
.aiTypeContainer {
|
||||
display: flex;
|
||||
margin: 1%;
|
||||
border-radius: 0.5rem;
|
||||
background-size: cover;
|
||||
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
background-position: 30% 50%;
|
||||
background-repeat: no-repeat;
|
||||
width: 96%;
|
||||
aspect-ratio: 2.1/1;
|
||||
.aiHelperTitle {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
// padding: 20rpx 0 30rpx; // 增加底部内边距
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 80%;
|
||||
background-size: 30%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.aiLeft {
|
||||
border-radius: 0.5rem;
|
||||
padding: 5% 0;
|
||||
margin-right: 12%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 35%;
|
||||
// height: 100%;
|
||||
/* margin-left: -5%;*/
|
||||
position: relative;
|
||||
.aiBox {
|
||||
// 增加容器内边距，避免卡片贴边
|
||||
padding: 10rpx 0;
|
||||
|
||||
.aiLeftTitle {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.4;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
.aiType {
|
||||
// 关键优化：使用固定间距代替百分比，确保不同设备一致
|
||||
margin-bottom: 30rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.aiRight {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: normal;
|
||||
.aiTypeContainer {
|
||||
display: flex;
|
||||
border-radius: 20rpx; // 更大的圆角更美观
|
||||
background-size: cover;
|
||||
background-position: 30% 50%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
// 关键优化：使用固定高度代替aspect-ratio，避免变形
|
||||
height: 320rpx;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15); // 更柔和的阴影
|
||||
overflow: hidden; // 防止内容溢出
|
||||
|
||||
.aiRightTitle {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.4;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
text-align: left;
|
||||
margin-bottom: 5%;
|
||||
margin-top: 22%;
|
||||
}
|
||||
.aiLeft {
|
||||
border-radius: 16rpx;
|
||||
padding: 5% 0;
|
||||
margin-right: 12%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 35%;
|
||||
position: relative;
|
||||
// 增加内边距，避免内容贴边
|
||||
padding: 20rpx;
|
||||
|
||||
.aiDescription {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
line-height: 2.5;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.aiLeftTitle {
|
||||
font-size: 30rpx;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 20rpx;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3); // 增加文字阴影提高可读性
|
||||
}
|
||||
}
|
||||
|
||||
.aiRight {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-right: 30rpx; // 增加右侧内边距
|
||||
|
||||
.aiRightTitle {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
margin-bottom: 20rpx;
|
||||
line-height: 1.5; // 增加行高，避免文字拥挤
|
||||
// 限制最大宽度，防止文字溢出
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.aiDescription {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
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>
|
||||
@ -157,8 +157,7 @@
|
||||
{
|
||||
key: 5,
|
||||
url: "/static/imgs/service/service_notice.png",
|
||||
name: '设置',
|
||||
pageUrl: 'serviceNoticeList'
|
||||
name: '设置'
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
@ -559,23 +558,29 @@
|
||||
this.showEditModal = false;
|
||||
},
|
||||
|
||||
// 跳转页面
|
||||
// 跳转页面
|
||||
goPage(item) {
|
||||
if (item.key === 6) { // 联系社区的特殊处理
|
||||
this.handleContactCommunity();
|
||||
return;
|
||||
}
|
||||
if (item.key === 6) { // 联系社区的特殊处理
|
||||
this.handleContactCommunity();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.checkLogin()) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
if (item.key === 5) { // 设置的特殊处理
|
||||
this.handleEditClick(); // 调用编辑用户信息的方法
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.pageUrl) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/${item.pageUrl}/index`
|
||||
});
|
||||
}
|
||||
if (!this.checkLogin()) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.pageUrl) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/${item.pageUrl}/index`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 处理联系社区点击
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<view class="content">
|
||||
<!-- 选择区域 -->
|
||||
<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>
|
||||
选择区域
|
||||
<view class="select-box">
|
||||
@ -11,8 +11,12 @@
|
||||
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-picker :show="showSelect" :columns="areaList" keyName="label" @confirm="handleConfirm"
|
||||
@cancel="handleCancel">
|
||||
<u-picker
|
||||
:show="showTypeSelect"
|
||||
:columns="areaList"
|
||||
keyName="title"
|
||||
@confirm="handleTypeConfirm"
|
||||
@cancel="showTypeSelect = false">
|
||||
</u-picker>
|
||||
</view>
|
||||
|
||||
@ -116,17 +120,22 @@
|
||||
fileList: [],
|
||||
workOrderCategory: '',
|
||||
workOrderCategoryID: '',
|
||||
workOrderArea:'',
|
||||
workOrderAreaID:'',
|
||||
showSelect: false,
|
||||
showTypeSelect:false,
|
||||
categoryList: [],
|
||||
workOrderLocation: '',
|
||||
expectedTime: '',
|
||||
uploadedImages: [],
|
||||
uploadedVideos: [],
|
||||
videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv']
|
||||
videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv'],
|
||||
areaList:[],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getOrderList();
|
||||
this.getOrderTypeList();
|
||||
},
|
||||
methods: {
|
||||
handleBack() {
|
||||
@ -298,6 +307,7 @@
|
||||
concatName: this.concatName, // 新增联系人姓名
|
||||
customerPhone: this.customerPhone, // 新增联系人电话
|
||||
orderTypeId: this.workOrderCategoryID,
|
||||
orderAreaId:this.workOrderAreaID,
|
||||
address: this.workOrderLocation,
|
||||
images: this.uploadedImages,
|
||||
videos: this.uploadedVideos,
|
||||
@ -340,6 +350,8 @@
|
||||
this.fileList = [];
|
||||
this.uploadedImages = [];
|
||||
this.uploadedVideos = [];
|
||||
this.workOrderArea = '';
|
||||
this.workOrderAreaID = '';
|
||||
},
|
||||
|
||||
handleConfirm(e) {
|
||||
@ -348,6 +360,12 @@
|
||||
this.showSelect = false;
|
||||
},
|
||||
|
||||
handleTypeConfirm(e) {
|
||||
this.workOrderArea = e.value[0].title;
|
||||
this.workOrderAreaID = e.value[0].id;
|
||||
this.showTypeSelect = false;
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user