Merge remote-tracking branch 'origin/main'
# Conflicts: # packageA/pages/UnitDetails/UnitDetails.vue # pages.json # pages/careerfair/careerfair.vue
This commit is contained in:
497
packageB/priority/helpFilter.vue
Normal file
497
packageB/priority/helpFilter.vue
Normal file
@@ -0,0 +1,497 @@
|
||||
<template>
|
||||
<view class="help-filter-page">
|
||||
<view class="header">
|
||||
<view class="back-btn" @click="goBack">
|
||||
<uni-icons type="arrowleft" size="24" color="#fff" />
|
||||
</view>
|
||||
<view class="title">筛选和帮扶</view>
|
||||
</view>
|
||||
|
||||
<!-- 筛选条件区域 -->
|
||||
<view class="filter-section">
|
||||
<view class="filter-item">
|
||||
<view class="filter-label">人员姓名：</view>
|
||||
<input class="filter-input" v-model="filters.personName" placeholder="请输入人员姓名" />
|
||||
</view>
|
||||
|
||||
<view class="filter-item">
|
||||
<view class="filter-label">身份证号：</view>
|
||||
<input class="filter-input" v-model="filters.idCard" placeholder="请输入身份证号" />
|
||||
</view>
|
||||
|
||||
<view class="filter-item">
|
||||
<view class="filter-label">帮扶类型：</view>
|
||||
<picker class="filter-picker" mode="selector" range="{{helpTypes}}" bindchange="onHelpTypeChange">
|
||||
<view class="picker-text">{{filters.helpType || '请选择帮扶类型'}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="filter-item">
|
||||
<view class="filter-label">帮扶人员：</view>
|
||||
<input class="filter-input" v-model="filters.helperName" placeholder="请输入帮扶人员姓名" />
|
||||
</view>
|
||||
|
||||
<view class="filter-item">
|
||||
<view class="filter-label">所属区域：</view>
|
||||
<picker class="filter-picker" mode="selector" range="{{regions}}" bindchange="onRegionChange">
|
||||
<view class="picker-text">{{filters.region || '请选择所属区域'}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="date-range">
|
||||
<view class="filter-label">帮扶时间：</view>
|
||||
<view class="date-inputs">
|
||||
<input class="date-input" v-model="filters.startDate" type="date" placeholder="开始日期" />
|
||||
<view class="date-separator">至</view>
|
||||
<input class="date-input" v-model="filters.endDate" type="date" placeholder="结束日期" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-buttons">
|
||||
<button class="query-btn" type="primary" @click="queryData">查询</button>
|
||||
<button class="reset-btn" @click="resetFilters">重置</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 帮扶记录列表 -->
|
||||
<view class="list-section">
|
||||
<view class="list-header">
|
||||
<view class="list-title">帮扶记录列表</view>
|
||||
<view class="list-count">共{{helpRecords.length}}条记录</view>
|
||||
</view>
|
||||
|
||||
<view class="records-list">
|
||||
<view class="record-item" v-for="record in helpRecords" :key="record.id">
|
||||
<view class="record-header">
|
||||
<view class="person-name">{{record.personName}}</view>
|
||||
<view class="job-tag" @click="showJobRecommend(record)">{{record.jobTag}}</view>
|
||||
</view>
|
||||
|
||||
<view class="record-info">
|
||||
<view class="info-row">
|
||||
<uni-icons type="call" size="14" color="#999" />
|
||||
<span class="info-label">联系电话：</span>
|
||||
<span class="info-value">{{record.phone}}</span>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<uni-icons type="card" size="14" color="#999" />
|
||||
<span class="info-label">身份证号：</span>
|
||||
<span class="info-value">{{record.idCard}}</span>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<uni-icons type="location" size="14" color="#999" />
|
||||
<span class="info-label">所属区域：</span>
|
||||
<span class="info-value">{{record.region}}</span>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<uni-icons type="person" size="14" color="#999" />
|
||||
<span class="info-label">帮扶人员：</span>
|
||||
<span class="info-value">{{record.helperName}}</span>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<uni-icons type="briefcase" size="14" color="#999" />
|
||||
<span class="info-label">帮扶单位：</span>
|
||||
<span class="info-value">{{record.helperUnit}}</span>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<uni-icons type="calendar" size="14" color="#999" />
|
||||
<span class="info-label">帮扶日期：</span>
|
||||
<span class="info-value">{{record.helpDate}}</span>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<uni-icons type="time" size="14" color="#999" />
|
||||
<span class="info-label">下次联系：</span>
|
||||
<span class="info-value">{{record.nextContactDate}}</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="record-actions">
|
||||
<button class="detail-btn" @click="showDetail(record)">详情</button>
|
||||
<button class="follow-btn" @click="followUp(record)">跟进</button>
|
||||
<button class="recommend-btn" @click="showJobRecommend(record)">智能推荐</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'uni-app'
|
||||
|
||||
export default {
|
||||
name: 'HelpFilter',
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
|
||||
// 筛选条件
|
||||
const filters = reactive({
|
||||
personName: '',
|
||||
idCard: '',
|
||||
helpType: '',
|
||||
helperName: '',
|
||||
region: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
})
|
||||
|
||||
// 帮扶类型选项
|
||||
const helpTypes = ref(['就业帮扶', '技能培训', '创业支持', '政策咨询'])
|
||||
|
||||
// 区域选项
|
||||
const regions = ref(['喀什地区/疏勒县', '喀什地区/疏附县', '喀什地区/伽师县', '喀什地区/岳普湖县'])
|
||||
|
||||
// 帮扶记录数据
|
||||
const helpRecords = ref([
|
||||
{
|
||||
id: 1,
|
||||
personName: '王小明',
|
||||
jobTag: '招聘岗位推荐',
|
||||
phone: '13912345678',
|
||||
idCard: '371302198801112024',
|
||||
region: '喀什地区/疏勒县',
|
||||
helperName: '新兴社区管理员',
|
||||
helperUnit: '新兴社区',
|
||||
helpDate: '2023-11-05',
|
||||
nextContactDate: '2023-11-06'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
personName: '赵小美',
|
||||
jobTag: '招聘岗位推荐',
|
||||
phone: '15912345678',
|
||||
idCard: '371302198801112024',
|
||||
region: '喀什地区/疏勒县',
|
||||
helperName: '新兴社区管理员',
|
||||
helperUnit: '新兴社区',
|
||||
helpDate: '2023-11-05',
|
||||
nextContactDate: '2023-11-06'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
personName: '赵小美',
|
||||
jobTag: '招聘岗位推荐',
|
||||
phone: '15912345678',
|
||||
idCard: '371302198801112024',
|
||||
region: '喀什地区/疏勒县',
|
||||
helperName: '新兴社区管理员',
|
||||
helperUnit: '新兴社区',
|
||||
helpDate: '2023-11-05',
|
||||
nextContactDate: '2023-11-06'
|
||||
}
|
||||
])
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 重置筛选条件
|
||||
const resetFilters = () => {
|
||||
Object.keys(filters).forEach(key => {
|
||||
filters[key] = ''
|
||||
})
|
||||
}
|
||||
|
||||
// 查询数据
|
||||
const queryData = () => {
|
||||
// 这里是模拟查询，实际项目中应该调用API
|
||||
console.log('查询条件:', filters)
|
||||
// 实际开发中这里应该调用接口获取数据
|
||||
// fetchHelpRecords(filters)
|
||||
}
|
||||
|
||||
// 显示详情
|
||||
const showDetail = (record) => {
|
||||
console.log('查看详情:', record)
|
||||
// 跳转到详情页面
|
||||
// router.push({ path: '/detail', query: { id: record.id } })
|
||||
}
|
||||
|
||||
// 跟进
|
||||
const followUp = (record) => {
|
||||
console.log('跟进记录:', record)
|
||||
// 跳转到跟进页面
|
||||
router.push({ path: '/packageB/priority/helpFollow', query: { personId: record.id, personName: record.personName } })
|
||||
}
|
||||
|
||||
// 智能推荐
|
||||
const showJobRecommend = (record) => {
|
||||
console.log('智能推荐:', record)
|
||||
// 跳转到推荐页面
|
||||
// router.push({ path: '/recommend', query: { id: record.id } })
|
||||
}
|
||||
|
||||
// 帮扶类型选择变化
|
||||
const onHelpTypeChange = (e) => {
|
||||
filters.helpType = helpTypes.value[e.detail.value]
|
||||
}
|
||||
|
||||
// 区域选择变化
|
||||
const onRegionChange = (e) => {
|
||||
filters.region = regions.value[e.detail.value]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 组件挂载时的初始化逻辑
|
||||
})
|
||||
|
||||
return {
|
||||
filters,
|
||||
helpTypes,
|
||||
regions,
|
||||
helpRecords,
|
||||
goBack,
|
||||
resetFilters,
|
||||
queryData,
|
||||
showDetail,
|
||||
followUp,
|
||||
showJobRecommend,
|
||||
onHelpTypeChange,
|
||||
onRegionChange
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.help-filter-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #1989fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 60rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
background-color: #fff;
|
||||
margin-top: 100rpx;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.filter-picker {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.date-range {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.date-inputs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
margin: 0 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.query-btn {
|
||||
flex: 1;
|
||||
background-color: #1989fa;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
|
||||
.list-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.list-count {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.record-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.person-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.job-tag {
|
||||
font-size: 24rpx;
|
||||
color: #ff6600;
|
||||
padding: 5rpx 15rpx;
|
||||
border: 1rpx solid #ff6600;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #666;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.record-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
flex: 1;
|
||||
background-color: #e8f3ff;
|
||||
color: #1989fa;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
flex: 1;
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
|
||||
.recommend-btn {
|
||||
flex: 1;
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
</style>
|
||||
442
packageB/priority/helpFollow.vue
Normal file
442
packageB/priority/helpFollow.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<view class="help-follow-page">
|
||||
<view class="header">
|
||||
<view class="back-btn" @click="goBack">
|
||||
<uni-icons type="arrowleft" size="24" color="#fff" />
|
||||
</view>
|
||||
<view class="title">跟进</view>
|
||||
</view>
|
||||
|
||||
<!-- 人员信息卡片 -->
|
||||
<view class="person-info-card">
|
||||
<view class="info-item">
|
||||
<uni-icons type="person" size="20" color="#1989fa" />
|
||||
<span class="info-label">人员姓名</span>
|
||||
<span class="info-value">{{personInfo.personName}}</span>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<uni-icons type="briefcase" size="20" color="#1989fa" />
|
||||
<span class="info-label">帮扶类型</span>
|
||||
<span class="info-value">{{personInfo.helpType}}</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 新增跟进记录 -->
|
||||
<view class="follow-form-section">
|
||||
<view class="section-title">新增跟进记录</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="form-label required">跟进日期：</view>
|
||||
<input class="form-input date-input" v-model="followData.followDate" type="date" placeholder="请选择跟进日期" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="form-label required">跟进方式：</view>
|
||||
<picker class="form-picker" mode="selector" range="{{followMethods}}" @change="onFollowMethodChange">
|
||||
<view class="picker-text">{{followData.followMethod || '请选择跟进方式'}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="form-label required">跟进内容：</view>
|
||||
<textarea class="form-textarea" v-model="followData.followContent" placeholder="请输入跟进内容" rows="4"></textarea>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="form-label required">跟进结果：</view>
|
||||
<textarea class="form-textarea" v-model="followData.followResult" placeholder="请输入跟进结果" rows="3"></textarea>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="form-label">下一步计划：</view>
|
||||
<textarea class="form-textarea" v-model="followData.nextPlan" placeholder="请输入下一步计划" rows="3"></textarea>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="form-label">下次联系：</view>
|
||||
<input class="form-input date-input" v-model="followData.nextContactDate" type="date" placeholder="请选择下次联系日期" />
|
||||
</view>
|
||||
|
||||
<view class="form-buttons">
|
||||
<button class="save-btn" type="primary" @click="saveFollowRecord">保存跟进</button>
|
||||
<button class="reset-btn" @click="resetForm">重置</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 跟进历史记录 -->
|
||||
<view class="history-section">
|
||||
<view class="section-header">
|
||||
<view class="section-title">跟进历史记录</view>
|
||||
<view class="record-count">共{{historyRecords.length}}条记录</view>
|
||||
</view>
|
||||
|
||||
<view class="history-list">
|
||||
<view class="history-item" v-for="record in historyRecords" :key="record.id">
|
||||
<view class="history-header">
|
||||
<uni-icons type="time" size="16" color="#1989fa" />
|
||||
<span class="history-date">{{record.date}}</span>
|
||||
</view>
|
||||
<view class="history-content">
|
||||
<view class="history-row">
|
||||
<span class="history-label">跟进方式：</span>
|
||||
<span class="history-value">{{record.method}}</span>
|
||||
</view>
|
||||
<view class="history-row">
|
||||
<span class="history-label">跟进人：</span>
|
||||
<span class="history-value">{{record.follower}}</span>
|
||||
</view>
|
||||
<view class="history-row">
|
||||
<span class="history-label">跟进内容：</span>
|
||||
<span class="history-value">{{record.content}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'uni-app'
|
||||
|
||||
export default {
|
||||
name: 'HelpFollow',
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// 人员信息
|
||||
const personInfo = reactive({
|
||||
personName: '王小美',
|
||||
helpType: '招聘岗位推荐'
|
||||
})
|
||||
|
||||
// 跟进方式选项
|
||||
const followMethods = ref(['电话', '微信', '邮件', '上门拜访', '视频会议', '其他'])
|
||||
|
||||
// 跟进表单数据
|
||||
const followData = reactive({
|
||||
followDate: '',
|
||||
followMethod: '',
|
||||
followContent: '',
|
||||
followResult: '',
|
||||
nextPlan: '',
|
||||
nextContactDate: ''
|
||||
})
|
||||
|
||||
// 历史记录数据
|
||||
const historyRecords = ref([
|
||||
{
|
||||
id: 1,
|
||||
date: '2025-11-05',
|
||||
method: '电话',
|
||||
follower: '新兴社区管理员',
|
||||
content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: '2025-11-05',
|
||||
method: '电话',
|
||||
follower: '新兴社区管理员',
|
||||
content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。'
|
||||
}
|
||||
])
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.keys(followData).forEach(key => {
|
||||
followData[key] = ''
|
||||
})
|
||||
}
|
||||
|
||||
// 保存跟进记录
|
||||
const saveFollowRecord = () => {
|
||||
// 表单验证
|
||||
if (!followData.followDate) {
|
||||
uni.showToast({ title: '请选择跟进日期', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!followData.followMethod) {
|
||||
uni.showToast({ title: '请选择跟进方式', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!followData.followContent) {
|
||||
uni.showToast({ title: '请输入跟进内容', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!followData.followResult) {
|
||||
uni.showToast({ title: '请输入跟进结果', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// 这里是模拟保存，实际项目中应该调用API
|
||||
console.log('保存跟进记录:', followData)
|
||||
|
||||
// 保存成功后添加到历史记录列表
|
||||
const newRecord = {
|
||||
id: historyRecords.value.length + 1,
|
||||
date: followData.followDate,
|
||||
method: followData.followMethod,
|
||||
follower: '当前登录用户', // 实际应该从登录信息中获取
|
||||
content: followData.followContent
|
||||
}
|
||||
historyRecords.value.unshift(newRecord)
|
||||
|
||||
// 清空表单
|
||||
resetForm()
|
||||
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
}
|
||||
|
||||
// 跟进方式选择变化
|
||||
const onFollowMethodChange = (e) => {
|
||||
followData.followMethod = followMethods.value[e.detail.value]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 组件挂载时的初始化逻辑
|
||||
// 可以从路由参数中获取人员ID等信息
|
||||
console.log('路由参数:', route.query)
|
||||
|
||||
// 实际项目中应该根据ID加载人员信息和历史记录
|
||||
// loadPersonInfo(route.query.personId)
|
||||
// loadHistoryRecords(route.query.personId)
|
||||
})
|
||||
|
||||
return {
|
||||
personInfo,
|
||||
followMethods,
|
||||
followData,
|
||||
historyRecords,
|
||||
goBack,
|
||||
resetForm,
|
||||
saveFollowRecord,
|
||||
onFollowMethodChange
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.help-follow-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #1989fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 60rpx;
|
||||
}
|
||||
|
||||
.person-info-card {
|
||||
background-color: #fff;
|
||||
margin-top: 100rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.follow-form-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.history-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.record-count {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.required::before {
|
||||
content: '*';
|
||||
color: #ff4d4f;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
min-height: 150rpx;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
flex: 1;
|
||||
background-color: #1989fa;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: 28rpx;
|
||||
color: #1989fa;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.history-content {
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.history-row {
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.history-label {
|
||||
color: #666;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.history-value {
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,30 @@
|
||||
<template>
|
||||
<div class="app-box">
|
||||
<div class="con-box">
|
||||
<template #headContent>
|
||||
<view class="collection-search">
|
||||
<view class="search-content">
|
||||
<view class="header-input button-click">
|
||||
<uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
|
||||
<input
|
||||
class="input"
|
||||
v-model="searchKeyword"
|
||||
@confirm="searchVideo"
|
||||
placeholder="输入考试名称"
|
||||
placeholder-class="inputplace"
|
||||
/>
|
||||
<uni-icons
|
||||
v-if="searchKeyword"
|
||||
class="clear-icon"
|
||||
type="clear"
|
||||
size="24"
|
||||
color="#999"
|
||||
@click="clearSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
|
||||
<div class="cards">
|
||||
<div class="cardHead">
|
||||
@@ -17,18 +41,53 @@
|
||||
<div class="conten">及格分数：60分</div>
|
||||
<div class="conten">截止日期：2025-12-31</div>
|
||||
</div>
|
||||
<div class="flooter">
|
||||
<div @click="jumps('/packageB/train/mockExam/viewGrades')">查看成绩</div>
|
||||
<div>详情</div>
|
||||
<div>收藏</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards"></div>
|
||||
<div class="cards"></div>
|
||||
</scroll-view>
|
||||
</div>
|
||||
<div class="cards2" v-if="dialogVisible">
|
||||
<div class="cardCon">
|
||||
<div class="cardHead">
|
||||
<div></div>
|
||||
<div style="font-size: 40rpx;" @click="clones()">×</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { inject, ref, reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
const { $api, navTo, navBack } = inject('globalFunction');
|
||||
import config from "@/config.js"
|
||||
const searchKeyword = ref('');
|
||||
const pageState = reactive({
|
||||
page: 0,
|
||||
list: [],
|
||||
total: 0,
|
||||
maxPage: 1,
|
||||
pageSize: 12,
|
||||
search: {},
|
||||
});
|
||||
const baseUrl = config.imgBaseUrl
|
||||
const dialogVisible = ref(false);
|
||||
const handleScrollToLower = () => {
|
||||
|
||||
};
|
||||
function jumps(url){
|
||||
navTo(url);
|
||||
}
|
||||
function clones(){
|
||||
dialogVisible.value=false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@@ -46,6 +105,48 @@ const handleScrollToLower = () => {
|
||||
padding: 20rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
.collection-search{
|
||||
padding: 10rpx 20rpx;
|
||||
.search-content{
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 14rpx 0
|
||||
.header-input{
|
||||
padding: 0
|
||||
width: calc(100%);
|
||||
position: relative
|
||||
.iconsearch{
|
||||
position: absolute
|
||||
left: 30rpx;
|
||||
top: 50%
|
||||
transform: translate(0, -50%)
|
||||
z-index: 1
|
||||
}
|
||||
.input{
|
||||
padding: 0 80rpx 0 80rpx
|
||||
height: 80rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 75rpx 75rpx 75rpx 75rpx;
|
||||
border: 2rpx solid #ECECEC
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.clear-icon{
|
||||
position: absolute
|
||||
right: 30rpx;
|
||||
top: 50%
|
||||
transform: translate(0, -50%)
|
||||
z-index: 1
|
||||
cursor: pointer
|
||||
}
|
||||
.inputplace{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #B5B5B5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-scroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -57,7 +158,7 @@ const handleScrollToLower = () => {
|
||||
border-radius: 12rpx;
|
||||
border: 2px solid #EDF5FF;
|
||||
margin-bottom: 30rpx;
|
||||
padding: 30rpx 40rpx;
|
||||
padding: 30rpx 40rpx 0;
|
||||
box-sizing: border-box
|
||||
.cardHead{
|
||||
display: flex;
|
||||
@@ -128,8 +229,44 @@ const handleScrollToLower = () => {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
.flooter{
|
||||
border-top: 1px solid #ccc;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
view{
|
||||
font-size: 28rpx;
|
||||
margin-left: 30rpx;
|
||||
color: #2175F3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cards2{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
z-index: 10000;
|
||||
padding: 100rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
.cardCon{
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
.cardHead{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
packageB/train/mockExam/viewGrades.vue
Normal file
65
packageB/train/mockExam/viewGrades.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="app-box">
|
||||
<div class="con-box">
|
||||
<div class="tabCon">
|
||||
<div class="tabLeft">
|
||||
<div><span>考试名称：</span>456546456</div>
|
||||
<div><span>考试时间：</span>456546456</div>
|
||||
<div><span>考试成绩：</span>456546456</div>
|
||||
</div>
|
||||
<div class="tabRight">查看</div>
|
||||
<div class="tabLeft"></div>
|
||||
<div class="tabRight">查看</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.app-box{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.con-box{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top:0;
|
||||
z-index: 10;
|
||||
padding: 20rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
.tabCon{
|
||||
border-top: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.tabLeft{
|
||||
width: 80%;
|
||||
height: 140rpx;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
view{
|
||||
line-height: 45rpx
|
||||
}
|
||||
}
|
||||
.tabRight{
|
||||
width: 20%;
|
||||
height: 140rpx;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 140rpx;
|
||||
color: #2175F3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,9 +3,10 @@
|
||||
<image src="../../../static/images/train/bj.jpg" class="bjImg" mode=""></image>
|
||||
<div class="con-box">
|
||||
<div class="header">
|
||||
<div>正确率：0%</div>
|
||||
<div>用时：00:00</div>
|
||||
<div class="headBtn">暂停</div>
|
||||
<div>正确率：{{accuracyRate}}%</div>
|
||||
<div>用时：{{formattedTime}}</div>
|
||||
<div class="headBtn" v-if="isRunning" @click="pause">暂停</div>
|
||||
<div class="headBtn" v-if="!isRunning" @click="start">继续</div>
|
||||
</div>
|
||||
<div class="problemCard">
|
||||
<div v-for="(item,index) in problemData" :key="index">
|
||||
@@ -37,15 +38,15 @@
|
||||
<span>错误</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="analysis">
|
||||
<div class="analysisHead correct">
|
||||
<div class="analysis" v-if="analysis">
|
||||
<div class="analysisHead correct" v-if="judgWhether=='正确'">
|
||||
<div>回答正确！</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- <div class="analysisHead errors" v-if="judgWhether=='错误'">
|
||||
<div class="analysisHead errors" v-if="judgWhether=='错误'">
|
||||
<div>回答错误！</div>
|
||||
<div></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="analysisCon">
|
||||
<div class="parse1">正确答案：</div>
|
||||
<div class="parse2" v-if="item.type=='single'" style="color: #30A0FF;font-weight: bold;">{{String.fromCharCode(65 + Number(item.answer))}}.</div>
|
||||
@@ -66,38 +67,38 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="problemBtns">
|
||||
<div class="events">提交答案</div>
|
||||
<div>下一题</div>
|
||||
<div v-if="analysis&&judgWhether!=''&&questionIndex!=problemData.length" @click="questionIndex+=1">下一题</div>
|
||||
<div v-else :class="((radio==''&&radio2==''&&checkList.length==0&&isRunning)||analysis)?'events':''" @click="submit()">提交答案</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footerLeft">
|
||||
<div class="zuo events"></div>
|
||||
<div class="you"></div>
|
||||
<div style="text-align: center;font-size: 24rpx;">
|
||||
<image :src="urls+'wsc.png'" mode=""></image>
|
||||
<div class="zuo" :class="questionIndex==1?'events':''" @click="questionIndex-=1"></div>
|
||||
<div class="you" :class="questionIndex==problemData.length?'events':''" @click="questionIndex+=1"></div>
|
||||
<div @click="collect(1)" style="text-align: center;font-size: 24rpx;" v-if="(problemData[questionIndex - 1]?.isCollect || 0)!=1">
|
||||
<image :src="urls+'wsc.png'" mode="" style="width: 34rpx;height: 32rpx;"></image>
|
||||
<div>收藏</div>
|
||||
</div>
|
||||
<!-- <div style="text-align: center;font-size: 24rpx;">
|
||||
<image :src="urls+'video-sc.png'" mode=""></image>
|
||||
<div @click="collect(0)" style="text-align: center;font-size: 24rpx;" v-if="(problemData[questionIndex - 1]?.isCollect || 0)==1">
|
||||
<image :src="urls+'video-sc.png'" mode="" style="width: 34rpx;height: 32rpx;"></image>
|
||||
<div>取消</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="footerBtn">完成练习</div>
|
||||
<div class="footerBtn" @click="exit()">完成练习</div>
|
||||
<div class="footerLeft">
|
||||
<div>
|
||||
<div class="icons" style="background-color: #1CADF5;">√</div>
|
||||
<div class="texts" style="color: #1CADF5;">1</div>
|
||||
<div class="texts" style="color: #1CADF5;">{{correctIndex}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="icons" style="background-color: #FF6668;">×</div>
|
||||
<div class="texts" style="color: #FF6668;">0</div>
|
||||
<div class="texts" style="color: #FF6668;">{{errorsIndex}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div @click="dialogVisible=true">
|
||||
<div><span style="color: #1CADF5;">{{questionIndex}}</span>/{{problemData.length}}</div>
|
||||
<div>题号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,18 +109,22 @@
|
||||
<div>题号</div>
|
||||
<div style="font-size: 40rpx;" @click="clones()">×</div>
|
||||
</div>
|
||||
<div class="questionNums">
|
||||
<div class="questions" :class="item.whether=='正确'?'questionCorrect':item.whether=='错误'?'questionError':questionIndex==(index+1)?'questionsActive':''" @click="switchs(index)" v-for="(item,index) in problemList" :key="index">{{index+1}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { reactive, inject, watch, ref, onMounted,onBeforeUnmount,computed } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
const { $api,urls , navTo, vacanciesTo, formatTotal, config } = inject('globalFunction');
|
||||
const { $api,urls , navTo,navBack , vacanciesTo, formatTotal, config } = inject('globalFunction');
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
import useDictStore from '@/stores/useDictStore';
|
||||
|
||||
const userInfo = ref({});
|
||||
const Authorization = ref('');
|
||||
const radio = ref('');
|
||||
const radio2 = ref('');
|
||||
const checkList = ref([]);
|
||||
@@ -127,30 +132,144 @@ const questionIndex = ref(1);
|
||||
const correctIndex = ref(0);
|
||||
const errorsIndex = ref(0);
|
||||
const accuracyRate = ref(0);
|
||||
const dialogVisible = ref(true);
|
||||
const problemData = reactive([
|
||||
{
|
||||
type:'single',
|
||||
content:"君不见黄河之水天上来，下一句是？",
|
||||
fraction:5,
|
||||
trainChooses:"奔流到海不复回,朝如青丝暮成雪,人生得意须尽欢,莫使金樽空对月",
|
||||
},{
|
||||
type:'multiple',
|
||||
content:"以下哪些是欧姆定律的适用条件？",
|
||||
fraction:8,
|
||||
trainChooses:"线性电阻,恒定温度,金属导体,半导体材料",
|
||||
|
||||
},{
|
||||
type:'judge',
|
||||
content:"功率越大的电器，其电阻值越小",
|
||||
fraction:2,
|
||||
trainChooses:[
|
||||
"正确",
|
||||
"错误",
|
||||
]
|
||||
}
|
||||
]);
|
||||
const elapsedTime = ref(0);
|
||||
const analysis = ref(false);
|
||||
const judgWhether = ref('');
|
||||
const isRunning = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
const problemData = ref([]);
|
||||
const problemList = ref([]);
|
||||
let timer = null;
|
||||
const formattedTime = computed(() => {
|
||||
const minutes = Math.floor(elapsedTime.value / 60)
|
||||
const seconds = elapsedTime.value % 60
|
||||
return `${padTime(minutes)}:${padTime(seconds)}`
|
||||
});
|
||||
watch(questionIndex, (newVal, oldVal) => {
|
||||
radio.value=""
|
||||
radio2.value=""
|
||||
checkList.value=[]
|
||||
analysis.value=false
|
||||
judgWhether.value=""
|
||||
});
|
||||
|
||||
// watch(problemData, (newVal, oldVal) => {
|
||||
// problemList.value=[];
|
||||
// newVal.forEach((item,i)=>{
|
||||
// problemList.value.push({index:i+1,whether:""})
|
||||
// })
|
||||
// });
|
||||
|
||||
onLoad((options) => {
|
||||
Authorization.value=uni.getStorageSync('Padmin-Token')||''
|
||||
getHeart();
|
||||
});
|
||||
onShow(()=>{
|
||||
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer); // 清除定时器
|
||||
timer = null; // 防止内存泄漏，确保下次不会再误用已清除的定时器
|
||||
}
|
||||
});
|
||||
function getHeart() {
|
||||
const raw =Authorization.value;
|
||||
const token = typeof raw === "string" ? raw.trim() : "";
|
||||
const headers = token ? { 'Authorization': raw.startsWith("Bearer ") ? raw : `Bearer ${token}` }: {}
|
||||
$api.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers).then((resData) => {
|
||||
if (resData.code == 200) {
|
||||
getUserInfo();
|
||||
} else {
|
||||
navTo('/packageB/login')
|
||||
}
|
||||
});
|
||||
};
|
||||
function getUserInfo(){
|
||||
let header={
|
||||
'Authorization':Authorization.value
|
||||
}
|
||||
$api.myRequest('/system/user/login/user/info', {},'get',10100,header).then((resData) => {
|
||||
userInfo.value = resData.info || {};
|
||||
// userId.value=resData.info.userId
|
||||
queryData()
|
||||
});
|
||||
};
|
||||
function queryData(){
|
||||
problemData.value=[]
|
||||
let header={
|
||||
'Authorization':Authorization.value,
|
||||
'Content-Type':"application/x-www-form-urlencoded"
|
||||
}
|
||||
$api.myRequest('/train/public/trainPractice/getQuestions', {
|
||||
userId: userInfo.value.userId
|
||||
},'post',9100,header).then((resData) => {
|
||||
resData.forEach((item,i)=>{
|
||||
problemData.value.push(item)
|
||||
problemList.value.push({index:i+1,whether:""})
|
||||
})
|
||||
start()
|
||||
accuracyRates()
|
||||
});
|
||||
}
|
||||
function collect(is){
|
||||
let header={
|
||||
'Authorization':Authorization.value,
|
||||
'Content-Type':"application/x-www-form-urlencoded"
|
||||
}
|
||||
$api.myRequest('/train/public/questionUser/addOrUpdateCollect', {
|
||||
userId: userInfo.value.userId,
|
||||
questionId:problemData.value[questionIndex.value-1].questionId,
|
||||
collect:is
|
||||
},'post',9100,header).then((resData) => {
|
||||
problemData.value[questionIndex.value-1].isCollect=is
|
||||
});
|
||||
};
|
||||
//正确率
|
||||
function accuracyRates(){
|
||||
let header={
|
||||
'Authorization':Authorization.value,
|
||||
'Content-Type':"application/x-www-form-urlencoded"
|
||||
}
|
||||
$api.myRequest('/train/public/trainPractice/getCount', {
|
||||
userId: userInfo.value.userId,
|
||||
},'post',9100,header).then((resData) => {
|
||||
accuracyRate.value=resData.truePresent
|
||||
});
|
||||
};
|
||||
//提交答案
|
||||
function submit(){
|
||||
let indexs=questionIndex.value-1
|
||||
let parm={
|
||||
questionId:problemData.value[indexs].questionId,
|
||||
userId:userInfo.value.userId,
|
||||
answer:problemData.value[indexs].answer
|
||||
}
|
||||
if(problemData.value[indexs].type=='single'){
|
||||
parm.submitAnswer=radio.value
|
||||
}else if(problemData.value[indexs].type=='multiple'){
|
||||
parm.submitAnswer=checkList.value.join(',')
|
||||
}else if(problemData.value[indexs].type=='judge'){
|
||||
parm.submitAnswer=radio2.value
|
||||
}
|
||||
let header={
|
||||
'Authorization':Authorization.value,
|
||||
'Content-Type':"application/json"
|
||||
}
|
||||
$api.myRequest('/train/public/trainPractice/submitAnswer', parm,'post',9100,header).then((resData) => {
|
||||
if(resData&&resData.code==200){
|
||||
analysis.value=true
|
||||
judgWhether.value=resData.msg
|
||||
problemList.value[indexs].whether=resData.msg
|
||||
if(resData.msg=='正确'){
|
||||
correctIndex.value++
|
||||
}else if(resData.msg=='错误'){
|
||||
errorsIndex.value++
|
||||
}
|
||||
accuracyRates()
|
||||
}
|
||||
});
|
||||
};
|
||||
function selected(i){
|
||||
radio.value=i
|
||||
};
|
||||
@@ -194,8 +313,30 @@ function indexToLetter(index) {
|
||||
// 将索引转换为对应的字母
|
||||
return String.fromCharCode(65 + index);
|
||||
};
|
||||
function padTime(time) {
|
||||
return time < 10 ? `0${time}` : time
|
||||
};
|
||||
function start() {
|
||||
if (isRunning.value) return
|
||||
isRunning.value = true
|
||||
timer = setInterval(() => {
|
||||
elapsedTime.value++
|
||||
}, 1000)
|
||||
};
|
||||
function pause() {
|
||||
if (!isRunning.value) return
|
||||
clearInterval(timer)
|
||||
isRunning.value = false
|
||||
};
|
||||
function clones(){
|
||||
dialogVisible.value=false
|
||||
};
|
||||
function switchs(i){
|
||||
questionIndex.value=(i+1)
|
||||
dialogVisible.value=false
|
||||
};
|
||||
function exit(){
|
||||
navBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -358,20 +499,20 @@ function clones(){
|
||||
font-size: 30rpx;
|
||||
text-align: center
|
||||
.zuo{
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-top: 2px solid #666
|
||||
border-left: 2px solid #666
|
||||
transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
|
||||
margin-left: 50rpx;
|
||||
margin-left: 60rpx;
|
||||
}
|
||||
.you{
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-right: 2px solid #666
|
||||
border-bottom: 2px solid #666
|
||||
transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
|
||||
margin-left: 30rpx;
|
||||
// margin-left: 30rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
.icons{
|
||||
@@ -423,6 +564,36 @@ function clones(){
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.questionNums{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.questions{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2px solid #E0E0E0;
|
||||
font-size: 28rpx;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.questionsActive{
|
||||
background-color: #F0F9FF;
|
||||
border: 2px solid #409EFF;
|
||||
}
|
||||
.questionCorrect{
|
||||
background-color: #F0F9FF;
|
||||
border: 2px solid #64BC38;
|
||||
color: #6BC441;
|
||||
}
|
||||
.questionError{
|
||||
background-color: #FFF1F0;
|
||||
border: 2px solid #F56C6C;
|
||||
color: #F36B6B;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,316 +1,492 @@
|
||||
<template>
|
||||
<AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
|
||||
<!-- <template #headerleft>
|
||||
<AppLayout :title="title" :show-bg-image="false">
|
||||
<!-- <template #headerleft>
|
||||
<view class="btnback">
|
||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||
</view>
|
||||
</template> -->
|
||||
<template #headContent>
|
||||
<view class="collection-search">
|
||||
<view class="search-content">
|
||||
<view class="header-input button-click">
|
||||
<uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
|
||||
<input
|
||||
class="input"
|
||||
v-model="searchKeyword"
|
||||
@confirm="searchVideo"
|
||||
placeholder="输入视频名称"
|
||||
placeholder-class="inputplace"
|
||||
/>
|
||||
<uni-icons
|
||||
v-if="searchKeyword"
|
||||
class="clear-icon"
|
||||
type="clear"
|
||||
size="24"
|
||||
color="#999"
|
||||
@click="clearSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="main-list">
|
||||
<view class="list-title">
|
||||
<text>视频列表</text>
|
||||
<view class="title-line"></view>
|
||||
<view class="video-box">
|
||||
<view class="video-detail-container">
|
||||
<!-- 视频播放组件 -->
|
||||
<view class="video-wrapper">
|
||||
<video id="myVideo" :src="videoInfo.currentUrl" :poster="trainVideoImgUrl+ videoInfo.cover" @seeked="onSeeked"
|
||||
enable-danmu controls style="width: 100%;" @pause="onPause" @timeupdate="onTimeupdate" @ended="onEnded"></video>
|
||||
</view>
|
||||
</view>
|
||||
<view class="video-grid" v-if="pageState.list.length">
|
||||
<view
|
||||
v-for="video in pageState.list"
|
||||
:key="video.id || video.videoId"
|
||||
class="video-item"
|
||||
:style="getItemBackgroundStyle('video-bg.png')"
|
||||
@click="playVideo(video)"
|
||||
>
|
||||
<view class="video-cover">
|
||||
<image
|
||||
:src="video.coverImage || video.videoCover || '/static/icon/video.png'"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="video-info">
|
||||
{{ video.title || video.videoName || '未命名视频' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty v-else pdTop="200"></empty>
|
||||
</view>
|
||||
<view class="video-info" :style="getItemBackgroundStyle('video-bj2.png')">
|
||||
<view class="video-title">
|
||||
<text>视频详情</text>
|
||||
<view class="title-line"></view>
|
||||
</view>
|
||||
<view class="info-detail">
|
||||
<view class="info-left">
|
||||
<view class="info-item">
|
||||
<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
|
||||
<view class="info-label">
|
||||
分类：
|
||||
</view>
|
||||
<view class="info-value" :data-content="getCategoryLabelByValue(videoInfo.category)">
|
||||
{{getCategoryLabelByValue(videoInfo.category)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-right">
|
||||
<view class="info-item">
|
||||
<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
|
||||
<view class="info-label">
|
||||
等级：
|
||||
</view>
|
||||
<view class="info-value">
|
||||
{{getLevelLabelByValue(videoInfo.level)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
|
||||
<view class="info-label">
|
||||
讲师：
|
||||
</view>
|
||||
<view class="info-value">
|
||||
{{videoInfo.teacherName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-detail">
|
||||
<view class="info-left">
|
||||
<view class="info-item">
|
||||
<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
|
||||
<view class="info-label">
|
||||
时长：
|
||||
</view>
|
||||
<view class="info-value">
|
||||
{{videoInfo.hour}}分钟
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-right">
|
||||
<view class="info-item">
|
||||
<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
|
||||
<view class="info-label">
|
||||
发布时间：
|
||||
</view>
|
||||
<view class="info-value">
|
||||
{{videoInfo.uploadTime}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="video-intro" :style="videoIntroBackgroundStyle('video-bj.png')">
|
||||
<view class="intro-title">
|
||||
<image class="intro-img1" :src="baseUrl+'/train/video-kc.png'" mode=""></image>
|
||||
<view class="title1">
|
||||
课程
|
||||
</view>
|
||||
<view class="title2">
|
||||
简介
|
||||
</view>
|
||||
<image class="intro-img2" :src="baseUrl+'/train/video-sc.png'" mode=""></image>
|
||||
</view>
|
||||
<view class="intro-content">
|
||||
{{videoInfo.introduce}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="video-title">
|
||||
<text>学习进度</text>
|
||||
<view class="title-line"></view>
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="videoInfo.percentage" activeColor="#30A0FF" backgroundColor="#B0DBFF" stroke-width="6" border-radius="10" />
|
||||
<view class="progress-info">
|
||||
<view class="progress-left">
|
||||
已观看
|
||||
</view>
|
||||
<view class="progress-right">
|
||||
{{videoInfo.percentage}}%
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="video-title" v-if="videoInfo.trainClassList && videoInfo.trainClassList.length>0">
|
||||
<text>课程章节</text>
|
||||
<view class="title-line"></view>
|
||||
</view>
|
||||
<view class="chapter-box" v-if="videoInfo.trainClassList && videoInfo.trainClassList.length>0">
|
||||
<view class="chapter-item" :class="{ active: currentChapter === index}" @click="chapterChange(item,index)" v-for="(item ,index) in videoInfo.trainClassList" :key="index">
|
||||
<view class="chapter-left">
|
||||
<view class="chapter-number">
|
||||
{{ index + 1 }}
|
||||
</view>
|
||||
<view class="chapter-info">
|
||||
{{item.className}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="chapter-icon" v-if="currentChapter === index">
|
||||
<uni-icons type="videocam" size="24"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, ref, reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { inject, reactive,ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { onLoad,onHide,onUnload } from '@dcloudio/uni-app';
|
||||
const { $api, navTo, navBack } = inject('globalFunction');
|
||||
import config from "@/config.js"
|
||||
|
||||
// state
|
||||
const title = ref('');
|
||||
const searchKeyword = ref('');
|
||||
const pageState = reactive({
|
||||
page: 0,
|
||||
list: [],
|
||||
total: 0,
|
||||
maxPage: 1,
|
||||
pageSize: 12,
|
||||
search: {},
|
||||
});
|
||||
const baseUrl = 'http://10.110.145.145/images/train/';
|
||||
const videoId=ref('')
|
||||
const userId=ref('')
|
||||
const videoInfo=ref({})
|
||||
const trainVideoImgUrl=config.trainVideoImgUrl
|
||||
const categories=ref([])
|
||||
const levalLabels=ref([])
|
||||
const latestTime = ref(0)
|
||||
const totalTime=ref(0)
|
||||
const baseUrl = config.imgBaseUrl
|
||||
const pageEnterTime = ref(0)
|
||||
const currentChapter = ref(0)
|
||||
const getItemBackgroundStyle = (imageName) => ({
|
||||
backgroundImage: `url(${baseUrl + imageName})`,
|
||||
backgroundSize: 'cover', // 覆盖整个容器
|
||||
backgroundImage: `url(${baseUrl}/train/${imageName})`,
|
||||
backgroundSize: '100% 100%', // 覆盖整个容器
|
||||
backgroundPosition: 'center', // 居中
|
||||
backgroundRepeat: 'no-repeat'
|
||||
});
|
||||
// 模拟视频数据
|
||||
const mockVideoData = [
|
||||
{
|
||||
id: '1',
|
||||
title: '职业技能培训基础课程',
|
||||
coverImage: '/static/icon/server1.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '面试技巧分享',
|
||||
coverImage: '/static/icon/server2.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '简历制作指南',
|
||||
coverImage: '/static/icon/server3.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '职场沟通技巧',
|
||||
coverImage: '/static/icon/server4.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: '职业规划讲座',
|
||||
coverImage: '/static/icon/flame.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: '行业趋势分析',
|
||||
coverImage: '/static/icon/flame2.png',
|
||||
videoUrl: ''
|
||||
}
|
||||
];
|
||||
const videoIntroBackgroundStyle = (imageName) => ({
|
||||
backgroundImage: `url(${baseUrl}/train/${imageName})`,
|
||||
backgroundSize: '100% 100%', // 覆盖整个容器
|
||||
backgroundPosition: 'center', // 居中
|
||||
backgroundRepeat: 'no-repeat'
|
||||
});
|
||||
const params = reactive({
|
||||
videoId: '',
|
||||
userId: ''
|
||||
})
|
||||
onLoad((options) => {
|
||||
getHeart()
|
||||
pageEnterTime.value = Date.now() // 记录毫秒时间戳
|
||||
videoId.value=options.id
|
||||
getDictionary()
|
||||
});
|
||||
onHide(() => {
|
||||
updateVideoInfo() // 用缓存值，不要调 getCurrentTime
|
||||
reportPageDuration()
|
||||
})
|
||||
onUnload(() => {
|
||||
updateVideoInfo()
|
||||
reportPageDuration()
|
||||
})
|
||||
function getData() {
|
||||
params.videoId=videoId.value
|
||||
params.userId=userId.value
|
||||
$api.myRequest('/train/public/trainVideo/updateWatchCount',{videoId:videoId.value}).then((resData) => {
|
||||
console.log("视频更新次数成功")
|
||||
});
|
||||
let header={
|
||||
'Authorization':uni.getStorageSync('Padmin-Token'),
|
||||
'Content-Type': "application/x-www-form-urlencoded"
|
||||
}
|
||||
$api.myRequest('/train/public/trainVideo/model', params,'post',9100,header).then((resData) => {
|
||||
videoInfo.value=resData
|
||||
videoInfo.value.currentUrl=trainVideoImgUrl+videoInfo.value.trainClassList[0].url
|
||||
videoInfo.value.percentage=((videoInfo.value.process/(videoInfo.value.hour*60))*100).toFixed(2)
|
||||
videoInfo.value.uploadTime=videoInfo.value.uploadTime.split(' ')[0]
|
||||
});
|
||||
}
|
||||
function getHeart() {
|
||||
const raw = uni.getStorageSync("Padmin-Token");
|
||||
const token = typeof raw === "string" ? raw.trim() : "";
|
||||
const headers = token ? { Authorization: raw.startsWith("Bearer ") ? raw : `Bearer ${token}` }: {}
|
||||
$api.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers).then((resData) => {
|
||||
if (resData.code == 200) {
|
||||
getUserInfo();
|
||||
} else {
|
||||
navTo('/packageB/login')
|
||||
}
|
||||
});
|
||||
}
|
||||
function getUserInfo(){
|
||||
let header={
|
||||
'Authorization':uni.getStorageSync('Padmin-Token')
|
||||
}
|
||||
$api.myRequest('/system/user/login/user/info', {},'get',10100,header).then((resData) => {
|
||||
userId.value=resData.info.userId
|
||||
getData()
|
||||
});
|
||||
}
|
||||
function getDictionary(){
|
||||
$api.myRequest('/system/public/dict/data/type/question_classification', {},'get',9100).then((resData) => {
|
||||
categories.value=resData.data
|
||||
});
|
||||
$api.myRequest('/system/public/dict/data/type/train_level', {},'get',9100).then((resData) => {
|
||||
levalLabels.value=resData.data
|
||||
});
|
||||
}
|
||||
function getCategoryLabelByValue(value) {
|
||||
if (!Array.isArray(categories.value)) {
|
||||
console.warn('categories 不是数组:', categories.value)
|
||||
return ''
|
||||
}
|
||||
const item = categories.value.find(item => item.dictValue === String(value))
|
||||
return item ? item.dictLabel : '暂无分类'
|
||||
}
|
||||
function getLevelLabelByValue(value) {
|
||||
if (!Array.isArray(levalLabels.value)) {
|
||||
console.warn('levalLabels 不是数组:', levalLabels.value)
|
||||
return ''
|
||||
}
|
||||
const item = levalLabels.value.find(item => item.dictValue === String(value))
|
||||
return item ? item.dictLabel : '暂无等级'
|
||||
}
|
||||
function onPause(e){
|
||||
updateVideoInfo()
|
||||
}
|
||||
function onEnded(e){
|
||||
updateVideoInfo()
|
||||
}
|
||||
function onTimeupdate(e){
|
||||
latestTime.value = e.detail.currentTime
|
||||
}
|
||||
function onSeeked(){
|
||||
updateVideoInfo()
|
||||
}
|
||||
// 更新播放时长
|
||||
function updateVideoInfo(){
|
||||
totalTime.value=0
|
||||
if(currentChapter.value>0){
|
||||
videoInfo.value.trainClassList.forEach((item,index)=>{
|
||||
if(index<currentChapter.value){
|
||||
totalTime.value+=Number(item.hour)
|
||||
}
|
||||
})
|
||||
}
|
||||
totalTime.value+=Number(latestTime.value)
|
||||
let paramsData={
|
||||
userId:userId.value,
|
||||
videoId:videoId.value,
|
||||
collect:'',
|
||||
process:Math.floor(Number(totalTime.value))
|
||||
}
|
||||
let header={
|
||||
'Authorization':uni.getStorageSync('Padmin-Token'),
|
||||
'Content-Type': "application/x-www-form-urlencoded"
|
||||
}
|
||||
if(videoInfo.value.isCollect===null && videoInfo.value.process ===null){
|
||||
$api.myRequest('/train/public/videoUser/add', paramsData,'post',9100,header).then((resData) => {
|
||||
console.log("视频播放时长更新成功")
|
||||
});
|
||||
}else{
|
||||
$api.myRequest('/train/public/videoUser/update', paramsData,'post',9100,header).then((resData) => {
|
||||
console.log("视频播放时长更新成功")
|
||||
});
|
||||
}
|
||||
}
|
||||
// 计算并上报停留时长
|
||||
function reportPageDuration() {
|
||||
const duration = Date.now() - pageEnterTime.value // 毫秒
|
||||
const durationSeconds = Math.floor(duration / 1000) // 转为秒
|
||||
if (durationSeconds > 0) {
|
||||
let paramsData={
|
||||
type:'video',
|
||||
hour:durationSeconds,
|
||||
videoId:videoId.value,
|
||||
userId:userId.value,
|
||||
title:videoInfo.value.videoTitle
|
||||
}
|
||||
let header={
|
||||
'Authorization':uni.getStorageSync('Padmin-Token'),
|
||||
'Content-Type': "application/x-www-form-urlencoded"
|
||||
}
|
||||
$api.myRequest('/train/public/userHour/add', paramsData,'post',9100,header).then((resData) => {
|
||||
console.log("学习时长更新成功")
|
||||
});
|
||||
}
|
||||
}
|
||||
function chapterChange(video,index){
|
||||
currentChapter.value=index
|
||||
videoInfo.value.currentUrl=trainVideoImgUrl+video.url
|
||||
}
|
||||
onUnmounted(() => {
|
||||
|
||||
onLoad(() => {
|
||||
getDataList('refresh');
|
||||
});
|
||||
|
||||
// 搜索视频
|
||||
function searchVideo() {
|
||||
getDataList('refresh');
|
||||
}
|
||||
|
||||
// 清除搜索内容
|
||||
function clearSearch() {
|
||||
searchKeyword.value = '';
|
||||
getDataList('refresh');
|
||||
}
|
||||
|
||||
// 获取视频列表
|
||||
function getDataList(type = 'add') {
|
||||
if (type === 'refresh') {
|
||||
pageState.page = 1;
|
||||
pageState.maxPage = 1;
|
||||
}
|
||||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
||||
pageState.page += 1;
|
||||
}
|
||||
|
||||
// 模拟API请求延迟
|
||||
setTimeout(() => {
|
||||
// 在实际项目中，这里应该调用真实的API接口
|
||||
// 目前使用模拟数据
|
||||
let filteredList = [...mockVideoData];
|
||||
|
||||
// 如果有搜索关键词，进行过滤
|
||||
if (searchKeyword.value.trim()) {
|
||||
filteredList = filteredList.filter(video =>
|
||||
video.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
const start = 0;
|
||||
const end = pageState.pageSize;
|
||||
const pageData = filteredList.slice(start, end);
|
||||
|
||||
if (type === 'add') {
|
||||
pageState.list = [...pageState.list, ...pageData];
|
||||
} else {
|
||||
pageState.list = pageData;
|
||||
}
|
||||
|
||||
pageState.total = filteredList.length;
|
||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 播放视频
|
||||
function playVideo(video) {
|
||||
// 在实际项目中，这里应该导航到视频播放页面
|
||||
// 或者调用视频播放组件
|
||||
console.log('播放视频:', video.title);
|
||||
// 示例：navTo(`/pages/videoPlayer/videoPlayer?id=${video.id}`);
|
||||
$api.msg(`准备播放: ${video.title}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.btnback{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
.video-box{
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
image {
|
||||
height: 100%;
|
||||
.video-detail-container{
|
||||
width: 100%;
|
||||
}
|
||||
.collection-search{
|
||||
padding: 10rpx 20rpx;
|
||||
.search-content{
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 14rpx 0
|
||||
.header-input{
|
||||
padding: 0
|
||||
width: calc(100%);
|
||||
position: relative
|
||||
.iconsearch{
|
||||
position: absolute
|
||||
left: 30rpx;
|
||||
top: 50%
|
||||
transform: translate(0, -50%)
|
||||
z-index: 1
|
||||
}
|
||||
.input{
|
||||
padding: 0 80rpx 0 80rpx
|
||||
height: 80rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 75rpx 75rpx 75rpx 75rpx;
|
||||
border: 2rpx solid #ECECEC
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.clear-icon{
|
||||
position: absolute
|
||||
right: 30rpx;
|
||||
top: 50%
|
||||
transform: translate(0, -50%)
|
||||
z-index: 1
|
||||
cursor: pointer
|
||||
}
|
||||
.inputplace{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #B5B5B5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-list{
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx 20rpx 28rpx 20rpx;
|
||||
margin:10rpx 30rpx ;
|
||||
box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.list-title{
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
|
||||
.video-wrapper{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #000000;
|
||||
height: auto;
|
||||
}
|
||||
.video-info{
|
||||
width:100%;
|
||||
margin-top:30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.video-title{
|
||||
font-size: 32rpx;
|
||||
color: #404040;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.title-line{
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 36rpx;
|
||||
width: 70rpx;
|
||||
width: 60rpx;
|
||||
height: 8rpx;
|
||||
background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.video-grid{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
.video-item{
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.2s;
|
||||
padding: 20rpx
|
||||
}
|
||||
.video-item:active{
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.video-cover{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 56.25%; /* 16:9 比例 */
|
||||
background: #f0f0f0;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
.video-cover image{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.info-detail{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.video-info{
|
||||
padding: 16rpx 16rpx 0 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
.info-left{
|
||||
width: 35%;
|
||||
}
|
||||
.info-right{
|
||||
width: 65%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.info-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.icon-img{
|
||||
width: 24rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
.info-label{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #0068C8;
|
||||
min-width: 86rpx;
|
||||
}
|
||||
.info-value{
|
||||
font-size: 28rpx;
|
||||
color: #404040;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.video-title{
|
||||
.video-intro{
|
||||
padding: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.intro-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.intro-img1{
|
||||
width: 36rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.intro-img2{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.title1{
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.title2{
|
||||
color: #077DF5;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.intro-content{
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.progress-box{
|
||||
background: linear-gradient(0deg, #DFEDFF 0%, #F8FCFF 100%);
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,48,107,0.1);
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.progress-info{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.chapter-box{
|
||||
background: linear-gradient(0deg, #DFEDFF 0%, #F8FCFF 100%);
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,48,107,0.1);
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
.chapter-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 24rpx;
|
||||
border-radius: 12rpx;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 16rpx;
|
||||
border: 2rpx solid #F0F0F0;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
.chapter-item.active {
|
||||
background-color: #e6f7ff;
|
||||
color: #409EFF;
|
||||
}
|
||||
.chapter-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.chapter-number{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background: #cccccc;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
margin-right: 16rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.chapter-item.active .chapter-number {
|
||||
background: #409EFF;
|
||||
color: #fff;
|
||||
}
|
||||
.chapter-info {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 40rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #303133;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,9 +34,9 @@
|
||||
<text>视频列表</text>
|
||||
<view class="title-line"></view>
|
||||
</view>
|
||||
<view class="video-grid" v-if="pageState.list.length">
|
||||
<view class="video-grid" v-if="dataList.length>0">
|
||||
<view
|
||||
v-for="video in pageState.list"
|
||||
v-for="video in dataList"
|
||||
:key="video.id || video.videoId"
|
||||
class="video-item"
|
||||
:style="getItemBackgroundStyle('video-bg.png')"
|
||||
@@ -44,12 +44,12 @@
|
||||
>
|
||||
<view class="video-cover">
|
||||
<image
|
||||
:src="video.coverImage || video.videoCover || '/static/icon/video.png'"
|
||||
:src="trainVideoImgUrl+ video.cover"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="video-info">
|
||||
{{ video.title || video.videoName || '未命名视频' }}
|
||||
{{ video.videoTitle || '未命名视频' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -67,14 +67,10 @@ import config from "@/config.js"
|
||||
// state
|
||||
const title = ref('');
|
||||
const searchKeyword = ref('');
|
||||
const pageState = reactive({
|
||||
page: 0,
|
||||
list: [],
|
||||
total: 0,
|
||||
maxPage: 1,
|
||||
pageSize: 12,
|
||||
search: {},
|
||||
});
|
||||
const dataList=ref([])
|
||||
const pageSize=ref(10)
|
||||
const pageNum=ref(1)
|
||||
const totalNum=ref(0)
|
||||
const baseUrl = config.imgBaseUrl
|
||||
const getItemBackgroundStyle = (imageName) => ({
|
||||
backgroundImage: `url(${baseUrl}/train/${imageName})`,
|
||||
@@ -82,45 +78,7 @@ const getItemBackgroundStyle = (imageName) => ({
|
||||
backgroundPosition: 'center', // 居中
|
||||
backgroundRepeat: 'no-repeat'
|
||||
});
|
||||
// 模拟视频数据
|
||||
const mockVideoData = [
|
||||
{
|
||||
id: '1',
|
||||
title: '职业技能培训基础课程',
|
||||
coverImage: '/static/icon/server1.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '面试技巧分享',
|
||||
coverImage: '/static/icon/server2.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '简历制作指南',
|
||||
coverImage: '/static/icon/server3.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '职场沟通技巧',
|
||||
coverImage: '/static/icon/server4.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: '职业规划讲座',
|
||||
coverImage: '/static/icon/flame.png',
|
||||
videoUrl: ''
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: '行业趋势分析',
|
||||
coverImage: '/static/icon/flame2.png',
|
||||
videoUrl: ''
|
||||
}
|
||||
];
|
||||
const trainVideoImgUrl=config.trainVideoImgUrl
|
||||
|
||||
onLoad(() => {
|
||||
getDataList('refresh');
|
||||
@@ -139,49 +97,46 @@ function clearSearch() {
|
||||
|
||||
// 获取视频列表
|
||||
function getDataList(type = 'add') {
|
||||
let maxPage=Math.ceil(totalNum.value/pageSize.value)
|
||||
let params={}
|
||||
if (type === 'refresh') {
|
||||
pageState.page = 1;
|
||||
pageState.maxPage = 1;
|
||||
pageNum.value = 1;
|
||||
params={
|
||||
category:'',
|
||||
hour:'',
|
||||
level:'',
|
||||
searchValue:searchKeyword.value,
|
||||
orderStr:'',
|
||||
pageSize:pageSize.value,
|
||||
pageNum:pageNum.value
|
||||
}
|
||||
$api.myRequest('/train/public/trainVideo/trainVideoList', params).then((resData) => {
|
||||
dataList.value=resData.rows
|
||||
totalNum.value=resData.total
|
||||
});
|
||||
}
|
||||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
||||
pageState.page += 1;
|
||||
}
|
||||
|
||||
// 模拟API请求延迟
|
||||
setTimeout(() => {
|
||||
// 在实际项目中，这里应该调用真实的API接口
|
||||
// 目前使用模拟数据
|
||||
let filteredList = [...mockVideoData];
|
||||
|
||||
// 如果有搜索关键词，进行过滤
|
||||
if (searchKeyword.value.trim()) {
|
||||
filteredList = filteredList.filter(video =>
|
||||
video.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
const start = 0;
|
||||
const end = pageState.pageSize;
|
||||
const pageData = filteredList.slice(start, end);
|
||||
|
||||
if (type === 'add') {
|
||||
pageState.list = [...pageState.list, ...pageData];
|
||||
} else {
|
||||
pageState.list = pageData;
|
||||
}
|
||||
|
||||
pageState.total = filteredList.length;
|
||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||
}, 300);
|
||||
if (type === 'add' && pageNum.value < maxPage) {
|
||||
pageNum.value += 1;
|
||||
params={
|
||||
category:'',
|
||||
hour:'',
|
||||
level:'',
|
||||
searchValue:searchKeyword.value,
|
||||
orderStr:'',
|
||||
pageSize:pageSize.value,
|
||||
pageNum:pageNum.value
|
||||
}
|
||||
$api.myRequest('/train/public/trainVideo/trainVideoList', params).then((resData) => {
|
||||
dataList.value=dataList.value.concat(resData.rows)
|
||||
totalNum.value=resData.total
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 播放视频
|
||||
function playVideo(video) {
|
||||
// 在实际项目中，这里应该导航到视频播放页面
|
||||
// 或者调用视频播放组件
|
||||
console.log('播放视频:', video);
|
||||
navTo(`/packageB/train/video/videoDetail?id=${video.id}`);
|
||||
// $api.msg(`准备播放: ${video.title}`);
|
||||
navTo(`/packageB/train/video/videoDetail?id=${video.videoId}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -190,13 +145,6 @@ function playVideo(video) {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -264,7 +212,7 @@ image {
|
||||
width: 70rpx;
|
||||
height: 8rpx;
|
||||
background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%);
|
||||
border-radius: 2px;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
.video-grid{
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user