tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pinia引入

Browse Source
This commit is contained in:
yanghang
2025-06-30 14:54:39 +08:00
parent 7833c0f1a5
commit e1da68c59b
10 changed files with 697 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/request.js
-1
View File
@@ -42,7 +42,6 @@ export const goto_login_fun = () => {
})
}
export default function request({
url,
method,
src/api/socket.js
+5 -1
View File
@@ -52,7 +52,7 @@ export default class WebSocketUtil {
console.log('WebSocket连接已打开');
this.reconnectCount = 0; // 重置重连计数
clearInterval(this.reconnectTimer); // 清除重连计时器
this.startHeartbeat(); // 启动心跳机制
// this.startHeartbeat(); // 启动心跳机制
this.triggerEvent('open'); // 触发连接打开事件
});
@@ -113,6 +113,10 @@ export default class WebSocketUtil {
triggerEvent(event, data) {
if (this.callbacks[event]) {
this.callbacks[event].forEach(callback => callback(data));
uni.$emit('socketEvent',{
type: event,
data
})
}
}
src/common/common.js
+3 -1
View File
@@ -8,12 +8,14 @@ function msg(title, duration = 1000) {
});
}
function show(title, msg, showCancel = true) {
function show(title, msg, showCancel = true, cancelText = '取消', confirmText = '确定') {
return new Promise((resolve, reject) => {
uni.showModal({
title: title,
content: msg,
showCancel: showCancel,
cancelText: cancelText,
confirmText: confirmText,
success: function(res) {
resolve(res.confirm)
},
src/main.js
+3 -2
View File
@@ -1,9 +1,10 @@
import App from './App'
import { createSSRApp } from 'vue'
import pinia from './store'
export function createApp() {
const app = createSSRApp(App)
app.use(pinia)
return {
app
}
src/pages/course/study.vue
+74 -48
View File
@@ -49,6 +49,7 @@
:activeVoiceId="activeVoiceTalkingItemId"
@changePlay="changePlayItemId"
@nextQuestion="nextQuestionSuccess"
:id="'item' + item.id"
></TalkingItem>
<!-- <video v-if="videoUrlShow" :src="videoUrlShow" controls></video> -->
</view>
@@ -95,6 +96,13 @@ import { getCourseStudyInfoApi, queryTraStdyBatchWaitParagraphInfoApi,audioTrans
import common from '@/common/common';
import TalkingItem from '@/pages/course/components/talkingItem.vue'
import ImagePreview from '@/components/image-preview/image-preview.vue'
import { useSocketStore } from "@/store/socket.js"
import { storeToRefs } from 'pinia'
const socketStore = useSocketStore()
const { SocketObj } = storeToRefs(socketStore)
const crsNum = ref('');
const crsId = ref('');
const step = ref(0)
@@ -107,6 +115,7 @@ const activeVoiceTalkingItemId = ref('')
const getData = async () => {
try{
const { body } = await getCourseStudyInfoApi({crsId: crsId.value})
initsocketTask(1)
if(body.stdyProgressFlag === 'N'){
step.value = 1
teacherList.value = body.teacheList.map(t=>({
@@ -114,11 +123,34 @@ const getData = async () => {
voicePath: '',
voiceObj: null
}))
initsocketTask(1)
}else{
step.value = 2
choiceTeacher.value = body.choiceTeacher
initsocketTask(2)
common.show('提示信息', '此门课程已有学习历史，请选择是否继续学习？',true, '重新开始','继续学习').then((res) => {
console.log(res)
if(res) {
// 继续学习 ， 获取学习历史接口
// 滚动到最下面
scrollToBottomNow()
choiceTeacher.value = body.choiceTeacher
sendMessage({
"commond" : 'OPEN',
"body" : {
crsId: crsId.value,
teacherNo: choiceTeacher.value
}
})
step.value = 2
getGraphInfoUnStudy()
}else{
// 重新开始
step.value = 1
teacherList.value = body.teacheList.map(t=>({
...t,
voicePath: '',
voiceObj: null
}))
}
}).finally(() => {})
}
}catch{
@@ -168,18 +200,15 @@ var socketTask = null
const nextStep = () => {
if(choiceTeacher.value){
teacherVoiceObj.destroy()
console.log(111)
if( socketTask && socketTask.readyState === 1){
sendMessage({
"commond" : 'OPEN',
"body" : {
crsId: crsId.value,
teacherNo: choiceTeacher.value
}
})
step.value = 2
getGraphInfoUnStudy()
sendMessage({
"commond" : 'OPEN',
"body" : {
crsId: crsId.value,
teacherNo: choiceTeacher.value
}
})
step.value = 2
getGraphInfoUnStudy()
}else{
uni.showToast({
title: '请选择一位教师！',
@@ -198,6 +227,7 @@ const getGraphInfoUnStudy = () => {
userInfo: {...choiceTeacherInfo.value},
id: _id
})
scrollToBottomNow()
})
}
// 继续 执行方法
@@ -210,44 +240,42 @@ const nextQuestionSuccess = (info) => {
type: 2,
id: _id
})
scrollToBottomNow()
getGraphInfoUnStudy()
}
const scrollToBottomNow = () => {
if(talkingList.value.length > 0){
let _last = talkingList.value[talkingList.value.length - 1]
uni.pageScrollTo({
selector: '#item' + _last.id,
duration: 300
})
}
}
const reconnectTimer = null // 重连timer
const isManualClose = ref(false) // 是否手动关闭
const initsocketTask = ($step) => {
socketTask = uni.connectSocket({
url: get_base_url() + '/trastudy/trasoket/open?summary=' + getToken(),
complete: function(){}
})
uni.onSocketMessage((res)=>{
let _data = JSON.parse(res.data)
console.log(_data)
})
uni.onSocketOpen((e)=>{
console.log('链接成功！')
})
uni.onSocketError((e)=>{
console.log(e,111)
})
uni.onSocketClose((e)=>{
// 重连
reconnect()
})
// socketTask.onMessage = (event) => {
// console.log(event,111)
// }
// socketTask.onOpen = () =>{
// console.log('建立链接')
// }
// socketTask.onError = (event) => {
// console.log('error',event)
// }
// socketTask.onclose = () => {
socketStore.creatSocket()
// socketTask = uni.connectSocket({
// url: get_base_url() + '/trastudy/trasoket/open?summary=' + getToken(),
// complete: function(){}
// })
// uni.onSocketMessage((res)=>{
// let _data = JSON.parse(res.data)
// console.log(_data)
// })
// uni.onSocketOpen((e)=>{
// console.log('链接成功！')
// })
// uni.onSocketError((e)=>{
// console.log(e,111)
// })
// uni.onSocketClose((e)=>{
// // 重连
// // initsocketTask()
// }
// reconnect()
// })
}
const reconnect = ()=> {
if(reconnectTimer || isManualClose.value) return
@@ -256,9 +284,7 @@ const reconnect = ()=> {
},3000)
}
const sendMessage = (data) => {
socketTask.send({
data: JSON.stringify(data)
})
unref(SocketObj).send(data)
}
const closeWebSocket = () => {
isManualClose.value = true
src/pages/login/login.vue
+11 -2
View File
@@ -64,11 +64,17 @@
<script lang="ts" setup>
// import { v4 as uuid4 } from 'uuid'
import {onBackPress} from '@dcloudio/uni-app'
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { ref, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import common from '@/common/common'
import { useAccountLoginApp, queryCurrentUser } from '@/api/login.js'
import { encryptByAES } from '@/api/encryptAndDecryptData.js'
import { useSocketStore } from "@/store/socket.js"
import { storeToRefs } from 'pinia'
const socketStore = useSocketStore()
const { taskSocket } = storeToRefs(socketStore)
const show_password = ref<Boolean>(false)
const account = ref<string>('')
const password = ref<string>('')
@@ -98,8 +104,11 @@
// setTimeout(() => {
// this.$common.reLaunch('/pages/homepage/index');
// }, this.GLOBAL_TIMER_SUBMIT_DELAY_TIME);
socketStore.creatSocket()
const pages = getCurrentPages()
console.log(pages.length, 'length');
if (pages.length >= 2) { // 页面栈只有一页，没有返回页，那就返回首页
console.log('返回登录的上一页');
back_state.value = false
src/store/index.js
+3
View File
@@ -0,0 +1,3 @@
import { createPinia } from 'pinia';
const store = createPinia();;
export default store;
src/store/socket.js
+51
View File
@@ -0,0 +1,51 @@
import { defineStore } from 'pinia';
import { ref } from 'vue';
import { getToken } from '@/common/common.js'
import { get_base_url } from '@/api/request.js'
import SocketClass from '@/api/socket.js'
export const useSocketStore = defineStore('socketStore',{
state:()=>({
SocketObj: null
}),
getters:{
taskSocket(state){
return state.SocketObj
}
},
actions:{
creatSocket(){
if(this.SocketObj && this.SocketObj?.close) {
closeSocket()
}
this.SocketObj = new SocketClass(get_base_url() + '/trastudy/trasoket/open?summary=' + getToken());
},
closeSocket: () => {
if(!this.SocketObj || !this.SocketObj?.close) return
this.SocketObj && this.SocketObj?.close?.()
},
setOnmessageCb: (cb) => {
if(!this.SocketObj || !this.SocketObj?.on) return
this.SocketObj.on('message', cb)
}
}
})
// () => {
// const SocketObj = ref()
// const creatSocket = () => {
// console.log(data)
// if(SocketObj.value && SocketObj.value?.close) {
// closeSocket()
// }
// SocketObj.value = new SocketClass(get_base_url() + '/trastudy/trasoket/open?summary=' + getToken());
// }
// const closeSocket = () => {
// if(!SocketObj.value || !SocketObj.value?.close) return
// SocketObj.value && SocketObj.value?.close?.()
// }
// const setOnmessageCb = (cb) => {
// if(!SocketObj.value || !SocketObj.value?.on) return
// SocketObj.value.on('message', cb)
// }
// return { SocketObj, creatSocket, closeSocket, setOnmessageCb }
// }