设置页性别设置完成
This commit is contained in:
李泉德
+2
-10
@@ -79,15 +79,7 @@ export function previewFile(id, responseType = 'arraybuffer') {
|
||||
header,
|
||||
responseType,
|
||||
success(result) {
|
||||
//#ifdef APP-PLUS
|
||||
let _header = result.header['Content-Type'].split(';')[0]
|
||||
// #endif
|
||||
//#ifndef APP-PLUS
|
||||
let _header = result.header['content-type'].split(';')[0]
|
||||
// #endif
|
||||
// let base64 = new Blob([result.data],{type:result.header['content-type'].split(';')[0]})
|
||||
let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data)
|
||||
resolve(base64)
|
||||
resolve(result)
|
||||
},
|
||||
fail(error) {
|
||||
reject(new Error(error));
|
||||
@@ -122,4 +114,4 @@ export function previewCacheThumbImage(id, width = 30, height = 30) {
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
+7
-5
@@ -1,6 +1,8 @@
|
||||
import request from '@/api/request'
|
||||
|
||||
const base_url = '/traapp'
|
||||
const course_base_url = '/trastudy'
|
||||
|
||||
|
||||
// 获取课程分类树接口
|
||||
export const getCourseTypeListApi = (data) => {
|
||||
@@ -29,7 +31,7 @@ export const getTraTagListApi = (data) => {
|
||||
// 全部模块
|
||||
export const queryCrsInfoByCatalogApi = (data) => {
|
||||
return request({
|
||||
url: base_url + '/crsInfo/queryCrsInfoByCatalog',
|
||||
url: course_base_url + '/crsInfo/queryCrsInfoByCatalog',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@@ -37,7 +39,7 @@ export const queryCrsInfoByCatalogApi = (data) => {
|
||||
// 生产线模块-
|
||||
export const queryCrsInfoByPrdLineApi = (data) => {
|
||||
return request({
|
||||
url: base_url + '/crsInfo/queryCrsInfoByPrdLine',
|
||||
url: course_base_url + '/crsInfo/queryCrsInfoByPrdLine',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@@ -45,7 +47,7 @@ export const queryCrsInfoByPrdLineApi = (data) => {
|
||||
// 最新
|
||||
export const queryCrsInfoByLastnewApi = (data) => {
|
||||
return request({
|
||||
url: base_url + '/crsInfo/queryCrsInfoByLastnew',
|
||||
url: course_base_url + '/crsInfo/queryCrsInfoByLastnew',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@@ -53,7 +55,7 @@ export const queryCrsInfoByLastnewApi = (data) => {
|
||||
// 最热
|
||||
export const queryCrsInfoByPopularApi = (data) => {
|
||||
return request({
|
||||
url: base_url + '/crsInfo/queryCrsInfoByPopular',
|
||||
url: course_base_url + '/crsInfo/queryCrsInfoByPopular',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@@ -61,7 +63,7 @@ export const queryCrsInfoByPopularApi = (data) => {
|
||||
// 推荐
|
||||
export const queryCrsInfoByRecmdApi = (data) => {
|
||||
return request({
|
||||
url: base_url + '/crsInfo/queryCrsInfoByRecmd',
|
||||
url: course_base_url + '/crsInfo/queryCrsInfoByRecmd',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import request from '@/api/request'
|
||||
|
||||
const base_url = '/trastudy'
|
||||
|
||||
// 获取课程分类树接口
|
||||
export const getCourseStudyInfoApi = (data) => {
|
||||
return request({
|
||||
url: base_url + '/traStdyInfo/queryTraStdyProgressAndTeacher',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
};
|
||||
@@ -53,7 +53,12 @@
|
||||
});
|
||||
}else{
|
||||
previewFile(id).then((result) => {
|
||||
//#ifdef APP-PLUS
|
||||
let _header = result.header['Content-Type'].split(';')[0]
|
||||
// #endif
|
||||
//#ifndef APP-PLUS
|
||||
let _header = result.header['content-type'].split(';')[0]
|
||||
// #endif
|
||||
let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data)
|
||||
this.imgUrlShow = base64;
|
||||
});
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
.talking-info{
|
||||
padding: 20rpx;
|
||||
border-radius: 15rpx;
|
||||
background-color: #aaa;
|
||||
background-color: #fff;
|
||||
.talking-gif{
|
||||
width: 140rpx;
|
||||
height: 38rpx;
|
||||
|
||||
+134
-28
@@ -9,27 +9,27 @@
|
||||
</view>
|
||||
<!-- <video v-if="videoUrlShow" :src="videoUrlShow" controls></video> -->
|
||||
<view class="voice-list">
|
||||
<uv-radio-group v-model="chooseVoiceId">
|
||||
<view class="voice-item" v-for="item in 5" >
|
||||
<uv-radio-group v-model="choiceTeacher">
|
||||
<view class="voice-item" v-for="item in teacherList" :key="item.teacherNo" @click="choiceTeacher = item.teacherNo">
|
||||
<view class="avatar-box">
|
||||
<ImagePreview class="img-box" :imgId="item+''" :isCache="true"></ImagePreview>
|
||||
<ImagePreview class="img-box" :imgId="item.imgAddr" :isCache="true" :width="120" :height="160"></ImagePreview>
|
||||
</view>
|
||||
<view class="right-cont">
|
||||
<view class="right-name">李想</view>
|
||||
<view class="right-desc">描述：产品</view>
|
||||
<view class="right-name">{{item.teacherName}}</view>
|
||||
<view class="right-desc">描述：{{item.teacheDesc || '--'}}</view>
|
||||
<view class="audio-box">
|
||||
<view class="talking-gif"></view>
|
||||
<view class="play-btn">
|
||||
<image class="icon" v-if="false" src="@/static/images/course/play.png" style="width: 100%;height: 100%;"></image>
|
||||
<image class="icon" src="@/static/images/course/pause-focus.png" style="width: 100%;height: 100%;"></image>
|
||||
</view>
|
||||
<view class="talking-time">00:26</view>
|
||||
<!-- <view class="talking-time">00:26</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<uv-radio :name="item" class="radio-box"/>
|
||||
<uv-radio :name="item.teacherNo" class="radio-box" @click.stop/>
|
||||
</view>
|
||||
</uv-radio-group>
|
||||
<view class="start-btns" @click="step+=1">
|
||||
<view class="start-btns" @click="nextStep">
|
||||
开启学习之旅
|
||||
<!-- <view class="touch-btn">开启学习之旅</view> -->
|
||||
</view>
|
||||
@@ -42,7 +42,6 @@
|
||||
</view>
|
||||
<view class="talking-list">
|
||||
<view class="study-num">1/20</view>
|
||||
{{audioPath}}
|
||||
<TalkingItem class="talking-item" v-for="item in 8" :type="item%2"></TalkingItem>
|
||||
</view>
|
||||
<view class="talk-btns">
|
||||
@@ -80,17 +79,35 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed, unref, onMounted } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive, ref, computed, unref, onMounted, onUnmounted } from 'vue';
|
||||
import { onLoad,onShow,onHide } from '@dcloudio/uni-app';
|
||||
import { previewFile, downloadFile } from "@/api/common.js"
|
||||
import { getToken } from '@/common/common.js'
|
||||
import { get_base_url } from '@/api/request'
|
||||
import { getCourseStudyInfoApi } from "@/api/study.js"
|
||||
import common from '@/common/common';
|
||||
import TalkingItem from '@/pages/course/components/talkingItem.vue'
|
||||
import ImagePreview from '@/components/image-preview/image-preview.vue'
|
||||
const crsNum = ref('');
|
||||
const step = ref(2)
|
||||
const chooseVoiceId = ref('')
|
||||
const crsId = ref('');
|
||||
const step = ref(0)
|
||||
const teacherList = ref([])
|
||||
const choiceTeacher = ref('')
|
||||
const videoUrlShow = ref('')
|
||||
const getData = async () => {
|
||||
try{
|
||||
const { body } = await getCourseStudyInfoApi({crsId: crsId.value})
|
||||
if(body.stdyProgressFlag === 'N'){
|
||||
step.value = 1
|
||||
teacherList.value = body.teacheList
|
||||
}else{
|
||||
step.value = 2
|
||||
choiceTeacher.value = body.choiceTeacher
|
||||
initWS(2)
|
||||
}
|
||||
}catch{
|
||||
|
||||
}
|
||||
// downloadFile('S3F0250181220722025062409312400000331622').then(res=>{
|
||||
// console.log(res)
|
||||
// audioObj.value = uni.createInnerAudioContext()
|
||||
@@ -100,15 +117,70 @@ const getData = async () => {
|
||||
// videoUrlShow.value = res.tempFilePath
|
||||
// })
|
||||
};
|
||||
let WS = {}
|
||||
const nextStep = () => {
|
||||
if(choiceTeacher.value){
|
||||
initWS(1)
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: '请选择一位教师！',
|
||||
icon: "none",
|
||||
duration
|
||||
});
|
||||
}
|
||||
}
|
||||
const initWS = async (step) => {
|
||||
WS = uni.connectSocket({
|
||||
url: get_base_url() + '/trastudy/trasoket/open?summary=' + getToken(),
|
||||
header:{
|
||||
'summary': getToken(),
|
||||
'content-type': 'application/json;charset=UTF-8'
|
||||
},
|
||||
success:function(res){
|
||||
WS.onMessage = (event) => {
|
||||
console.log(event)
|
||||
}
|
||||
let _params = step === 1 ?{
|
||||
"commond" : 'open',
|
||||
"body" : {
|
||||
crsId: crsId.value,
|
||||
teacherNo: choiceTeacher.value
|
||||
}
|
||||
}:{
|
||||
|
||||
}
|
||||
WS.send(_params)
|
||||
},
|
||||
fail:function(err){
|
||||
console.log(err)
|
||||
},
|
||||
complete:function(res){
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
WS.onOpen = () =>{
|
||||
console.log('建立链接')
|
||||
step.value = 2
|
||||
}
|
||||
// WS.onerror = (event) => {
|
||||
// console.log(event)
|
||||
// }
|
||||
// WS.onclose = () => {
|
||||
// // 重连
|
||||
// // initWS()
|
||||
// }
|
||||
}
|
||||
onLoad((params) => {
|
||||
crsNum.value = params.crsNum;
|
||||
getData();
|
||||
crsId.value = params.crsId||'';
|
||||
crsNum.value = params.crsNum||'';
|
||||
});
|
||||
const showTalkingModel = ref(false)
|
||||
// 录音
|
||||
const audioPath = ref('')
|
||||
const audioObj = uni.createInnerAudioContext()
|
||||
const recordObj = uni.getRecorderManager()
|
||||
//#ifdef APP-PLUS
|
||||
// app端
|
||||
const recordObj = uni.getRecorderManager()
|
||||
const initRecord = () => {
|
||||
unref(recordObj)?.onStop((res)=>{
|
||||
audioPath.value = res.tempFilePath
|
||||
@@ -120,6 +192,27 @@ const startRecord = () => {
|
||||
const stopRecord = () => {
|
||||
unref(recordObj).stop()
|
||||
}
|
||||
// onMounted(()=>{
|
||||
// initRecord()
|
||||
// })
|
||||
// #endif
|
||||
//#ifndef APP-PLUS
|
||||
const recordObj = {}
|
||||
const initRecord = () => {}
|
||||
// #endif
|
||||
onMounted(()=>{
|
||||
getData();
|
||||
initRecord?.()
|
||||
})
|
||||
onShow(()=>{
|
||||
getData();
|
||||
})
|
||||
onHide(()=>{
|
||||
WS.close?.()
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
WS.close?.()
|
||||
})
|
||||
const playRecord = () => {
|
||||
audioObj.src = audioPath.value
|
||||
unref(audioObj).play()
|
||||
@@ -134,7 +227,7 @@ const systemInfo = uni.getSystemInfoSync()
|
||||
const widowHeight = systemInfo.windowHeight
|
||||
// 计算是否超出按下盒子位置
|
||||
const isOut = computed(() => {
|
||||
let moveVal = (widowHeight - baseY.value)/165 * 234
|
||||
let moveVal = (widowHeight - baseY.value)/140 * 234
|
||||
return (widowHeight - moveVal) > touchY.value
|
||||
})
|
||||
const showOverlayTalking = (obj) => {
|
||||
@@ -146,21 +239,21 @@ const showOverlayTalking = (obj) => {
|
||||
}
|
||||
const hideOverlayTalking = (obj) => {
|
||||
showTalkingModel.value = false
|
||||
if(isOut.value){
|
||||
console.log('取消发送')
|
||||
}else{
|
||||
//#ifdef APP-PLUS
|
||||
stopRecord()
|
||||
// #endif
|
||||
if(!isOut.value){
|
||||
console.log('发送')
|
||||
stopRecord()
|
||||
}
|
||||
// else{
|
||||
// console.log('取消发送')
|
||||
// }
|
||||
}
|
||||
|
||||
const handleMove = (obj) => {
|
||||
touchX.value = obj.changedTouches[0].pageX
|
||||
touchY.value = obj.changedTouches[0].pageY
|
||||
}
|
||||
onMounted(()=>{
|
||||
initRecord()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -212,7 +305,8 @@ onMounted(()=>{
|
||||
flex:1;
|
||||
overflow-y: auto;
|
||||
padding: 30rpx;
|
||||
background: #fff;
|
||||
background: url(@/static/images/course/study-bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
.study-num{
|
||||
height: 36rpx;
|
||||
@@ -225,7 +319,7 @@ onMounted(()=>{
|
||||
}
|
||||
}
|
||||
.talk-btns{
|
||||
height: 180rpx;
|
||||
height: 150rpx;
|
||||
background-color: #fff;
|
||||
padding: 25rpx 30rpx 0;
|
||||
.touch-btn{
|
||||
@@ -257,6 +351,8 @@ onMounted(()=>{
|
||||
width: 160rpx;
|
||||
height: 207rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background-color: #ccc;
|
||||
.img-box{
|
||||
width: 100%;
|
||||
@@ -266,16 +362,26 @@ onMounted(()=>{
|
||||
.right-cont{
|
||||
flex:1;
|
||||
.right-name{
|
||||
width: 380rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 25rpx;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.right-desc{
|
||||
width: 380rpx;
|
||||
line-height: 38rpx;
|
||||
font-size: 25rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.audio-box{
|
||||
width: 90%;
|
||||
@@ -310,8 +416,8 @@ onMounted(()=>{
|
||||
}
|
||||
.radio-box{
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
top: 40rpx;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
}
|
||||
}
|
||||
.start-btns{
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="comment_div">
|
||||
<scroll-view class="scroll-view" :scroll-y="true" :show-scrollbar="false">
|
||||
<view class="comment_div">
|
||||
|
||||
<view class="message_div" v-for="(item,index) in message_list">
|
||||
<view class="head_div">
|
||||
<image-preview v-if="item.userIconImgId" class="img-box img"
|
||||
@@ -66,25 +67,33 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" background-color="red">
|
||||
|
||||
<view class="bottom_reply_input_div">
|
||||
<uv-input v-model="reply_data.bbsContent" placeholderStyle='color:#999999;font-size:26rpx'
|
||||
:placeholder="reply_data.placeholder" :focus="true">
|
||||
</uv-input>
|
||||
<view class="" style="display: flex;flex-direction: column; margin:10rpx 20rpx;">
|
||||
<view class="fl1"></view>
|
||||
<uv-button class="bottom_reply_button" type="primary" :throttleTime="500"
|
||||
@click="reply_send">回复</uv-button>
|
||||
<view class="fl1"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-popup>
|
||||
<view class="send_evaluate_div_height"></view>
|
||||
</scroll-view>
|
||||
<view class="send_evaluate_div">
|
||||
<uv-button type="primary" class="send_evaluate"
|
||||
@click="common.navigateTo('/pages/courseDetail/submit?crsNum='+crsNum)">发布评价</uv-button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<uni-popup ref="popup" background-color="red">
|
||||
|
||||
<view class="bottom_reply_input_div">
|
||||
<uv-input v-model="reply_data.bbsContent" placeholderStyle='color:#999999;font-size:26rpx'
|
||||
:placeholder="reply_data.placeholder" :focus="true">
|
||||
</uv-input>
|
||||
<view class="" style="display: flex;flex-direction: column; margin:10rpx 20rpx;">
|
||||
<view class="fl1"></view>
|
||||
<uv-button class="bottom_reply_button" type="primary" :throttleTime="500"
|
||||
@click="reply_send">回复</uv-button>
|
||||
<view class="fl1"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -162,11 +171,32 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll-view{
|
||||
height: 50vh;
|
||||
overflow: hidden;
|
||||
border-radius: 24rpx;
|
||||
.send_evaluate_div_height {
|
||||
height: 170rpx;
|
||||
}
|
||||
|
||||
.send_evaluate_div {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 30rpx;
|
||||
background-color: #ffffff;
|
||||
:deep(.uv-button-wrapper) {
|
||||
.uv-button {
|
||||
border-radius: 14rpx;
|
||||
height: 92rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
|
||||
position: relative;
|
||||
height: calc(100vh - 88rpx - 162rpx - 256rpx - 50rpx);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 顶部随着输入法弹出的框
|
||||
.bottom_reply_input_div {
|
||||
width: 100%;
|
||||
@@ -348,9 +378,11 @@
|
||||
}
|
||||
|
||||
.comment_div {
|
||||
padding: 44rpx 40rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
|
||||
position: relative;
|
||||
height: calc(100vh - 88rpx - 162rpx - 256rpx - 70rpx);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -49,11 +49,13 @@
|
||||
<style lang="scss" scoped>
|
||||
.course-info {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 22rpx;
|
||||
padding-top: 38rpx;
|
||||
padding-left: 38rpx;
|
||||
// margin-left: 16rpx;
|
||||
// margin-right: 16rpx;
|
||||
}
|
||||
.info-top {
|
||||
display: flex;
|
||||
|
||||
@@ -37,7 +37,8 @@
|
||||
padding-right: 52rpx;
|
||||
border-radius: 22rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
// margin-left: 16rpx;
|
||||
// margin-right: 16rpx;
|
||||
.blue-ball {
|
||||
padding-top: 16rpx;
|
||||
margin-right: 12rpx;
|
||||
|
||||
@@ -26,30 +26,30 @@
|
||||
:active-style="{ color: '#323E57', 'font-weight': 600, 'font-size': '30rpx' }"
|
||||
:inactive-style="{ color: '#666666', 'font-size': '30rpx' }"></uv-tabs>
|
||||
</view>
|
||||
|
||||
<view class="course-info" v-if="tabAct == 0">
|
||||
<introduceVue v-model="form"></introduceVue>
|
||||
</view>
|
||||
<view class="point" v-if="tabAct == 1">
|
||||
<knowledge v-model="form"></knowledge>
|
||||
</view>
|
||||
<view class="evaluate" v-if="tabAct == 2">
|
||||
<comment :crsNum="crsNum"></comment>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="course-info" v-if="tabAct == 0">
|
||||
<introduceVue v-model="form"></introduceVue>
|
||||
</view>
|
||||
<view class="point" v-if="tabAct == 1">
|
||||
<knowledge v-model="form"></knowledge>
|
||||
</view>
|
||||
<view class="evaluate" v-if="tabAct == 2">
|
||||
<comment :crsNum="crsNum"></comment>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box font_pf">
|
||||
<template v-if="[0,1].includes(tabAct)">
|
||||
<uv-button type="primary"
|
||||
@click="common.navigateTo('/pages/course/study?crsNum='+crsNum+'&crsId='+form.crsId)">去学习</uv-button>
|
||||
<uv-button type="primary">去练习</uv-button>
|
||||
<uv-button type="primary">去考试</uv-button>
|
||||
</template>
|
||||
<template v-if="tabAct == 2">
|
||||
<view class="btn-box btn-box-height font_pf" v-if="[0,1].includes(tabAct)">
|
||||
|
||||
<uv-button type="primary"
|
||||
@click="common.navigateTo('/pages/course/study?crsNum='+crsNum+'&crsId='+form.crsId)">去学习</uv-button>
|
||||
<uv-button type="primary">去练习</uv-button>
|
||||
<uv-button type="primary">去考试</uv-button>
|
||||
|
||||
<!-- <template v-if="tabAct == 2">
|
||||
<uv-button type="primary" class="send_evaluate"
|
||||
@click="common.navigateTo('/pages/courseDetail/submit?crsNum='+crsNum)">发布评价</uv-button>
|
||||
</template>
|
||||
</template> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
@@ -71,7 +71,7 @@
|
||||
import introduceVue from './components/introduce.vue';
|
||||
import knowledge from './components/knowledge.vue';
|
||||
import comment from './components/comment.vue';
|
||||
|
||||
|
||||
// tab栏
|
||||
const tabList = ref([{
|
||||
name: '课程介绍'
|
||||
@@ -82,7 +82,7 @@
|
||||
}]);
|
||||
const form = ref({});
|
||||
const crsNum = ref('');
|
||||
const tabAct = ref(2);
|
||||
const tabAct = ref(0);
|
||||
const tabSwitch = (item) => {
|
||||
tabAct.value = item.index;
|
||||
};
|
||||
@@ -101,12 +101,11 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.detail-main {
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.detail-body {
|
||||
box-sizing: border-box;
|
||||
min-height: calc(100vh - 256rpx);
|
||||
@@ -177,17 +176,20 @@
|
||||
// }
|
||||
}
|
||||
|
||||
.btn-box-height {
|
||||
height: 187rpx;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 187rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-top: 37rpx;
|
||||
justify-content: space-around;
|
||||
background-color: #ffffff;
|
||||
// background-color: red;
|
||||
border: 2rpx solid #E5E5E5;
|
||||
|
||||
:deep(.uv-button-wrapper) {
|
||||
flex: 1;
|
||||
@@ -206,7 +208,6 @@
|
||||
height: 92rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.num-item {
|
||||
|
||||
@@ -348,13 +348,13 @@
|
||||
}
|
||||
onShow(() => {
|
||||
if(!common.isLogin()){
|
||||
console.log('222')
|
||||
common.navigateTo('/pages/login/login')
|
||||
return
|
||||
}
|
||||
}
|
||||
statistics_data['get_statistics_data']() // 获取统计数据
|
||||
})
|
||||
onMounted(async () => {
|
||||
if(!common.isLogin()) return;
|
||||
queryCrsInfoByLastnew().then(res => {
|
||||
new_class_list.value = res.body
|
||||
})
|
||||
|
||||
+39
-62
@@ -9,45 +9,52 @@
|
||||
</view>
|
||||
<view class="detail-body">
|
||||
<uv-cell-group>
|
||||
<uv-cell title="头像"></uv-cell>
|
||||
<uv-cell title="名字"></uv-cell>
|
||||
<uv-cell @click="cellCLick" name="avatar" isLink title="头像">
|
||||
<template #title>
|
||||
<view class="font_pf">头像</view>
|
||||
</template>
|
||||
<template #value>
|
||||
<view style="width: 60rpx; height: 60rpx; border-radius: 100%; overflow: hidden">
|
||||
<image style="width: 100%" src="/src/static/images/test/touxiang.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell name="sex" isLink title="性别">
|
||||
<template #title>
|
||||
<text class="font_pf">性别</text>
|
||||
</template>
|
||||
<template #value>
|
||||
<picker mode="selector" :value="index" range-key="label" style="width: 100%" :range="sexOptions" @change="sexChange">
|
||||
<view style="text-align: right">{{ sexOptions.find((item) => item.value == form.gender).label || '' }}</view>
|
||||
</picker>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
<view class="btn-box font_pf">
|
||||
<uv-button type="primary" @click="submit">提交评价</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { publishCrsEvaluation } from '@/api/courseDetail.js';
|
||||
import common from '@/common/common';
|
||||
const index = ref(0);
|
||||
const form = ref({
|
||||
gender: 'Y'
|
||||
});
|
||||
const sexOptions = [
|
||||
{ value: 'Y', label: '男' },
|
||||
{ value: 'M', label: '女' }
|
||||
];
|
||||
const cellCLick = (value) => {};
|
||||
const sexChange = (e) => {
|
||||
console.log(e);
|
||||
console.log(sexOptions[e.detail.value].value, 'sexOptions[e.detail.value].value');
|
||||
form.value.gender = sexOptions[e.detail.value].value;
|
||||
|
||||
const formData = reactive({
|
||||
crsNum: null,
|
||||
imgIdList: [], // 发表图片ID列表，文件ID集
|
||||
bbsGrade: 10, // 综合评分(最高10分)
|
||||
bbsTag: 'SUG', // 评价标签 （SUG 建议 ASK 提问 ）
|
||||
bbsContent: '' // 评价内容
|
||||
});
|
||||
const submit = () => {
|
||||
if (formData.bbsContent === '') {
|
||||
if (formData.bbsTag == 'SUG') {
|
||||
return common.msg('请输入你的建议');
|
||||
} else {
|
||||
return common.msg('请输入你的问题');
|
||||
}
|
||||
}
|
||||
publishCrsEvaluation(formData).then((res) => {
|
||||
common.msg('发表成功');
|
||||
setTimeout(() => common.navigateBack(), 500);
|
||||
});
|
||||
console.log(form.value.gender, 'iiii');
|
||||
};
|
||||
onLoad((params) => {
|
||||
formData.crsNum = params.crsNum;
|
||||
});
|
||||
onLoad((params) => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -58,11 +65,14 @@ onLoad((params) => {
|
||||
.detail-body {
|
||||
box-sizing: border-box;
|
||||
min-height: calc(100vh - (var(--status-bar-height)+50rpx));
|
||||
padding: 29rpx 37rpx;
|
||||
// padding: 29rpx 37rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 0rpx;
|
||||
:deep(.uv-cell__title) {
|
||||
flex: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -74,39 +84,6 @@ onLoad((params) => {
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.body-content {
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
border-radius: 15rpx;
|
||||
padding: 36rpx;
|
||||
padding-top: 0rpx;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
// height: 187rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-bottom: 30rpx;
|
||||
justify-content: space-evenly;
|
||||
|
||||
:deep(.uv-button) {
|
||||
border-radius: 14rpx;
|
||||
width: 616rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.c-666 {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.c-000 {
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.fixed_search_div {
|
||||
padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
|
||||
display: flex;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 778 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,18 @@
|
||||
## 1.0.7（2023-11-20）
|
||||
修复issues问题：https://gitee.com/climblee/uv-ui/issues/I8HDLO
|
||||
## 1.0.6（2023-10-13）
|
||||
1. 优化vue，内容有背景色，设置圆角被遮挡的情况
|
||||
## 1.0.5（2023-09-10）
|
||||
1. 修复H5默认层级过高的问题
|
||||
2. 修复全局设置prop无效的问题
|
||||
## 1.0.4（2023-08-08）
|
||||
1. 修复修改zIndex不生效的BUG
|
||||
## 1.0.3（2023-07-02）
|
||||
uv-popup 弹出层，代码重构优化，性能翻倍，小程序体验性能更加，避免卡顿。打开和关闭方法更改，详情参考文档：https://www.uvui.cn/components/popup.html
|
||||
## 1.0.2（2023-06-11）
|
||||
1. 修复zIndex层级问题
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
1. 新增uv-popup组件
|
||||
@@ -0,0 +1,45 @@
|
||||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
@@ -0,0 +1,539 @@
|
||||
<template>
|
||||
<view
|
||||
v-if="showPopup"
|
||||
class="uv-popup"
|
||||
:class="[popupClass, isDesktop ? 'fixforpc-z-index' : '']"
|
||||
:style="[{zIndex: zIndex}]"
|
||||
>
|
||||
<view @touchstart="touchstart">
|
||||
<!-- 遮罩层 -->
|
||||
<uv-overlay
|
||||
key="1"
|
||||
v-if="maskShow && overlay"
|
||||
:show="showTrans"
|
||||
:duration="duration"
|
||||
:custom-style="overlayStyle"
|
||||
:opacity="overlayOpacity"
|
||||
:zIndex="zIndex"
|
||||
@click="onTap"
|
||||
></uv-overlay>
|
||||
<uv-transition
|
||||
key="2"
|
||||
:mode="ani"
|
||||
name="content"
|
||||
:custom-style="transitionStyle"
|
||||
:duration="duration"
|
||||
:show="showTrans"
|
||||
@click="onTap"
|
||||
>
|
||||
<view
|
||||
class="uv-popup__content"
|
||||
:style="[contentStyle]"
|
||||
:class="[popupClass]"
|
||||
@click="clear"
|
||||
>
|
||||
<uv-status-bar v-if="safeAreaInsetTop"></uv-status-bar>
|
||||
<slot />
|
||||
<uv-safe-bottom v-if="safeAreaInsetBottom"></uv-safe-bottom>
|
||||
<view
|
||||
v-if="closeable"
|
||||
@tap.stop="close"
|
||||
class="uv-popup__content__close"
|
||||
:class="['uv-popup__content__close--' + closeIconPos]"
|
||||
hover-class="uv-popup__content__close--hover"
|
||||
hover-stay-time="150"
|
||||
>
|
||||
<uv-icon
|
||||
name="close"
|
||||
color="#909399"
|
||||
size="18"
|
||||
bold
|
||||
></uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
</uv-transition>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<keypress v-if="maskShow" @esc="onTap" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import keypress from './keypress.js'
|
||||
// #endif
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件，为了解决遮罩弹层的问题
|
||||
* @tutorial https://www.uvui.cn/components/popup.html
|
||||
* @property {String} mode = [top|center|bottom|left|right] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value left 左侧弹出
|
||||
* @value right 右侧弹出
|
||||
* @property {Number} duration 动画时长，默认300
|
||||
* @property {Boolean} overlay 是否显示遮罩，默认true
|
||||
* @property {Boolean} overlayOpacity 遮罩透明度，默认0.5
|
||||
* @property {Object} overlayStyle 遮罩自定义样式
|
||||
* @property {Boolean} closeOnClickOverlay = [true|false] 蒙版点击是否关闭弹窗，默认true
|
||||
* @property {Number | String} zIndex 弹出层的层级
|
||||
* @property {Boolean} safeAreaInsetTop 是否留出顶部安全区（状态栏高度），默认false
|
||||
* @property {Boolean} safeAreaInsetBottom 是否为留出底部安全区适配，默认true
|
||||
* @property {Boolean} closeable 是否显示关闭图标，默认false
|
||||
* @property {Boolean} closeIconPos 自定义关闭图标位置，`top-left`-左上角，`top-right`-右上角，`bottom-left`-左下角，`bottom-right`-右下角，默认top-right
|
||||
* @property {String} bgColor 主窗口背景色
|
||||
* @property {String} maskBackgroundColor 蒙版颜色
|
||||
* @property {Boolean} customStyle 自定义样式
|
||||
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
||||
* @event {Function} maskClick 点击遮罩触发
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-popup',
|
||||
components: {
|
||||
// #ifdef H5
|
||||
keypress
|
||||
// #endif
|
||||
},
|
||||
mixins: [mpMixin, mixin],
|
||||
emits: ['change', 'maskClick'],
|
||||
props: {
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// 动画时长，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: 300
|
||||
},
|
||||
// 层级
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
// #ifdef H5
|
||||
default: 997
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
default: 10075
|
||||
// #endif
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示遮罩
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 点击遮罩是否关闭弹窗
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 遮罩的透明度，0-1之间
|
||||
overlayOpacity: {
|
||||
type: [Number, String],
|
||||
default: 0.4
|
||||
},
|
||||
// 自定义遮罩的样式
|
||||
overlayStyle: {
|
||||
type: [Object, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否为iPhoneX留出底部安全距离
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否留出顶部安全距离（状态栏高度）
|
||||
safeAreaInsetTop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示关闭图标
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
|
||||
closeIconPos: {
|
||||
type: String,
|
||||
default: 'top-right'
|
||||
},
|
||||
// mode=center，也即中部弹出时，是否使用缩放模式
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
round: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
...uni.$uv?.props?.popup
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type]) return
|
||||
this[this.config[type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal]) return
|
||||
this[this.config[this.mode]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: 'top',
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
right: 'right',
|
||||
message: 'top',
|
||||
dialog: 'center',
|
||||
share: 'bottom'
|
||||
},
|
||||
transitionStyle: {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupClass: this.isDesktop ? 'fixforpc-top' : 'top',
|
||||
direction: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500
|
||||
},
|
||||
bg() {
|
||||
if (this.bgColor === '' || this.bgColor === 'none' || this.$uv.getPx(this.round)>0) {
|
||||
return 'transparent'
|
||||
}
|
||||
return this.bgColor
|
||||
},
|
||||
contentStyle() {
|
||||
const style = {};
|
||||
if (this.bgColor) {
|
||||
style.backgroundColor = this.bg
|
||||
}
|
||||
if(this.round) {
|
||||
const value = this.$uv.addUnit(this.round)
|
||||
const mode = this.direction?this.direction:this.mode
|
||||
style.backgroundColor = this.bgColor
|
||||
if(mode === 'top') {
|
||||
style.borderBottomLeftRadius = value
|
||||
style.borderBottomRightRadius = value
|
||||
} else if(mode === 'bottom') {
|
||||
style.borderTopLeftRadius = value
|
||||
style.borderTopRightRadius = value
|
||||
} else if(mode === 'center') {
|
||||
style.borderRadius = value
|
||||
}
|
||||
}
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
|
||||
}
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
created() {
|
||||
// TODO 处理 message 组件生命周期异常的问题
|
||||
this.messageChild = null
|
||||
// TODO 解决头条冒泡的问题
|
||||
this.clearPropagation = false
|
||||
},
|
||||
methods: {
|
||||
setH5Visible() {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = 'visible'
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 公用方法，不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
// #ifndef APP-NVUE
|
||||
e.stopPropagation()
|
||||
// #endif
|
||||
this.clearPropagation = true
|
||||
},
|
||||
|
||||
open(direction) {
|
||||
// fix by mehaotian 处理快速打开关闭的情况
|
||||
if (this.showPopup) {
|
||||
return
|
||||
}
|
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.mode
|
||||
}else {
|
||||
this.direction = direction;
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
return this.$uv.error(`缺少类型：${direction}`);
|
||||
}
|
||||
this[this.config[direction]]()
|
||||
this.$emit('change', {
|
||||
show: true,
|
||||
type: direction
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.mode
|
||||
})
|
||||
clearTimeout(this.timer)
|
||||
// // 自定义关闭事件
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
},
|
||||
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false
|
||||
},
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
// fix by mehaotian 兼容 nvue
|
||||
this.clearPropagation = false
|
||||
return
|
||||
}
|
||||
this.$emit('maskClick')
|
||||
if (!this.closeOnClickOverlay) return
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupClass = this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
this.ani = ['slide-top']
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
this.$nextTick(() => {
|
||||
if (this.messageChild && this.mode === 'message') {
|
||||
this.messageChild.timerClose()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupClass = 'bottom'
|
||||
this.ani = ['slide-bottom']
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupClass = 'center'
|
||||
this.ani = this.zoom?['zoom-in', 'fade']:['fade'];
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
/* #endif */
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
left(type) {
|
||||
this.popupClass = 'left'
|
||||
this.ani = ['slide-left']
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
right(type) {
|
||||
this.popupClass = 'right'
|
||||
this.ani = ['slide-right']
|
||||
this.transitionStyle = {
|
||||
position: 'fixed',
|
||||
zIndex: this.zIndex,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uv-popup {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
|
||||
/* #endif */
|
||||
&.top,
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uv-popup__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
padding-top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: 0;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
&__close {
|
||||
position: absolute;
|
||||
|
||||
&--hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&__close--top-left {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
&__close--top-right {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
&__close--bottom-left {
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
&__close--bottom-right {
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixforpc-z-index {
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
{
|
||||
"id": "uv-popup",
|
||||
"displayName": "uv-popup 弹出层 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.7",
|
||||
"description": "uv-popup 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。",
|
||||
"keywords": [
|
||||
"uv-popup",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"popup",
|
||||
"弹出层"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-overlay",
|
||||
"uv-transition",
|
||||
"uv-icon",
|
||||
"uv-status-bar",
|
||||
"uv-safe-bottom"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
## Popup 弹出层
|
||||
|
||||
> **组件名：uv-popup**
|
||||
|
||||
弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。
|
||||
|
||||
该组件已经放弃原来`uview2.x`的写法，参照了官方`uni-popup`的写法进行重构。在小程序端的性能大大提升，打开和关闭避免延迟，调用方法与之前相比也有所差异，具体请查看文档。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/popup.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,11 @@
|
||||
## 1.0.4（2023-09-14）
|
||||
1. 飞书小程序支持
|
||||
## 1.0.3（2023-08-14）
|
||||
1. 修复百度报错的BUG
|
||||
## 1.0.2（2023-07-02）
|
||||
uv-safe-bottom 修复，在百度程序，抖音小程序不生效的BUG
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-safe-bottom 底部安全区组件
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view
|
||||
class="uv-safe-bottom"
|
||||
:style="[style]"
|
||||
:class="[!isNvue && 'uv-safe-area-inset-bottom']"
|
||||
>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
/**
|
||||
* SafeBottom 底部安全区
|
||||
* @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
|
||||
* @tutorial https://www.uvui.cn/components/safeAreaInset.html
|
||||
* @property {type} prop_name
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
*
|
||||
* @event {Function()}
|
||||
* @example <uv-status-bar></uv-status-bar>
|
||||
*/
|
||||
export default {
|
||||
name: "uv-safe-bottom",
|
||||
mixins: [mpMixin, mixin],
|
||||
data() {
|
||||
return {
|
||||
safeAreaBottomHeight: 0,
|
||||
isNvue: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const style = {};
|
||||
// #ifdef APP-NVUE || MP-TOUTIAO || MP-LARK
|
||||
// nvue下，高度使用js计算填充
|
||||
style.height = this.$uv.addUnit(this.$uv.sys()?.safeAreaInsets?.bottom, 'px');
|
||||
// #endif
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef APP-NVUE
|
||||
// 标识为是否nvue
|
||||
this.isNvue = true;
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uv-safe-bottom {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
/* #ifndef APP-NVUE */
|
||||
// 历遍生成4个方向的底部安全区
|
||||
@each $d in top, right, bottom, left {
|
||||
.uv-safe-area-inset-#{$d} {
|
||||
padding-#{$d}: 0;
|
||||
padding-#{$d}: constant(safe-area-inset-#{$d});
|
||||
padding-#{$d}: env(safe-area-inset-#{$d});
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uv-safe-bottom",
|
||||
"displayName": "uv-safe-bottom 底部安全区 全面兼容小程序、nvue、vue2、vue3等多端",
|
||||
"version": "1.0.4",
|
||||
"description": "这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。",
|
||||
"keywords": [
|
||||
"uv-safe-bottom",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"bottom",
|
||||
"底部安全区"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
## SafeBottom 底部安全区
|
||||
|
||||
> **组件名：uv-safe-bottom**
|
||||
|
||||
这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
|
||||
|
||||
### <a href="https://www.uvui.cn/guide/safeAreaInset.html" target="_blank">查看文档</a>
|
||||
|
||||
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,7 @@
|
||||
## 1.0.2（2023-06-05）
|
||||
1. 兼容渐变背景色
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
1. 新增uv-status-bar组件
|
||||
@@ -0,0 +1,8 @@
|
||||
export default {
|
||||
props: {
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<view
|
||||
:style="[style]"
|
||||
class="uv-status-bar"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
/**
|
||||
* StatbusBar 状态栏占位
|
||||
* @description 本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。
|
||||
* @tutorial https://www.uvui.cn/components/statusBar.html
|
||||
* @property {String} bgColor 背景色 (默认 'transparent' )
|
||||
* @property {String | Object} customStyle 自定义样式
|
||||
* @example <uv-status-bar></uv-status-bar>
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-status-bar',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const style = {}
|
||||
// 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
|
||||
style.height = this.$uv.addUnit(this.$uv.sys().statusBarHeight, 'px')
|
||||
if(this.bgColor){
|
||||
if (this.bgColor.indexOf("gradient") > -1) {// 渐变色
|
||||
style.backgroundImage = this.bgColor;
|
||||
}else{
|
||||
style.background = this.bgColor;
|
||||
}
|
||||
}
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uv-status-bar {
|
||||
// nvue会默认100%，如果nvue下，显式写100%的话，会导致宽度不为100%而异常
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uv-status-bar",
|
||||
"displayName": "uv-status-bar 状态栏占位",
|
||||
"version": "1.0.2",
|
||||
"description": "状态栏占位组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。",
|
||||
"keywords": [
|
||||
"uv-status-bar",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"status-bar",
|
||||
"状态栏"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
## StatbusBar 状态栏占位
|
||||
|
||||
> **组件名：uv-status-bar**
|
||||
|
||||
本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。
|
||||
|
||||
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
|
||||
Reference in New Issue
Block a user