Merge branch 'develop' of http://25.13.9.101:9000/K17_AITS/tra-app into develop
This commit is contained in:
田岩
+5
-1
@@ -9,10 +9,14 @@ ENV = 'development'
|
||||
# VITE_APP_BASE_API_Url = 'http://25.64.16.133:9786'
|
||||
|
||||
|
||||
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
|
||||
# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
|
||||
|
||||
app入口
|
||||
<<<<<<< HEAD
|
||||
VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
|
||||
=======
|
||||
# VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
|
||||
# VITE_APP_BASE_API_Url = 'http://25.16.122.65:7001'
|
||||
# VITE_APP_BASE_API_Url = 'http://25.18.122.66:9786'
|
||||
>>>>>>> f9ef91e5fe7dbec56a29867b9d2d9f7e3792f0f4
|
||||
|
||||
|
||||
+1
-1
@@ -114,4 +114,4 @@ export function previewCacheThumbImage(id, width = 30, height = 30) {
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,6 +27,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/setting/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/study/index",
|
||||
"style": {
|
||||
|
||||
@@ -10,13 +10,13 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="talking-info">
|
||||
<view class="talking-gif"></view>
|
||||
<view class="talking-gif is-play"></view>
|
||||
<view class="talking-cont">
|
||||
<view class="talking-text">
|
||||
阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
|
||||
</view>
|
||||
<ImagePreview class="cont-img-box" :imgId="''"></ImagePreview>
|
||||
<VideoPreview class="cont-img-box" :imgId="''"></VideoPreview>
|
||||
<!-- <ImagePreview class="cont-img-box" :imgId="''"></ImagePreview>
|
||||
<VideoPreview class="cont-img-box" :imgId="''"></VideoPreview> -->
|
||||
</view>
|
||||
<view class="talking-cont">
|
||||
<view class="talking-text">
|
||||
@@ -61,8 +61,8 @@
|
||||
<image class="icon" src="@/static/images/course/replay.png" style="width: 100%;height: 100%;"></image>
|
||||
</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.png" style="width: 100%;height: 100%;"></image>
|
||||
<image class="icon" v-if="false" src="@/static/images/course/play-blue.png" style="width: 100%;height: 100%;"></image>
|
||||
<image class="icon" src="@/static/images/course/stop-blue.png" style="width: 100%;height: 100%;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -119,8 +119,13 @@
|
||||
.talking-gif{
|
||||
width: 140rpx;
|
||||
height: 38rpx;
|
||||
background-color: #999;
|
||||
background: url(@/static/images/course/voice-gray.png) no-repeat;
|
||||
background-size: 100%;
|
||||
margin-bottom: 16rpx;
|
||||
&.is-play{
|
||||
background: url(@/static/images/course/voice-gif.gif) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.talking-cont{
|
||||
.talking-text{
|
||||
@@ -268,8 +273,13 @@
|
||||
.talking-gif{
|
||||
width: 140rpx;
|
||||
height: 38rpx;
|
||||
background-color: #999;
|
||||
background: url(@/static/images/course/voice-gray.png) no-repeat;
|
||||
background-size: 100%;
|
||||
margin-bottom: 16rpx;
|
||||
&.is-play{
|
||||
background: url(@/static/images/course/voice-gif.gif) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.talking-cont{
|
||||
.talking-text{
|
||||
|
||||
+63
-37
@@ -16,7 +16,7 @@
|
||||
</view>
|
||||
<view class="right-cont">
|
||||
<view class="right-name">{{item.teacherName}}</view>
|
||||
<view class="right-desc">描述：{{item.teacheDesc || '--'}}</view>
|
||||
<view class="right-desc">描述：{{item.voiceDesc || '--'}}</view>
|
||||
<view class="audio-box">
|
||||
<view class="talking-gif"></view>
|
||||
<view class="play-btn">
|
||||
@@ -117,7 +117,7 @@ const getData = async () => {
|
||||
// videoUrlShow.value = res.tempFilePath
|
||||
// })
|
||||
};
|
||||
let WS = {}
|
||||
var WS = null
|
||||
const nextStep = () => {
|
||||
if(choiceTeacher.value){
|
||||
initWS(1)
|
||||
@@ -129,47 +129,67 @@ const nextStep = () => {
|
||||
});
|
||||
}
|
||||
}
|
||||
const initWS = async (step) => {
|
||||
const reconnectTimer = null // 重连timer
|
||||
const isManualClose = false // 是否手动关闭
|
||||
|
||||
const initWS = ($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 ?{
|
||||
complete: function(cv){
|
||||
console.log(cv)
|
||||
}
|
||||
})
|
||||
WS.onMessage = (event) => {
|
||||
console.log(event,111)
|
||||
}
|
||||
WS.onSocketMessage = (event) => {
|
||||
console.log(event,222)
|
||||
}
|
||||
WS.onOpen = () =>{
|
||||
console.log('建立链接')
|
||||
}
|
||||
WS.onError = (event) => {
|
||||
console.log('error',event)
|
||||
}
|
||||
// WS.onclose = () => {
|
||||
// // 重连
|
||||
// // initWS()
|
||||
// }
|
||||
setTimeout(()=>{
|
||||
console.log(WS , WS.readyState)
|
||||
if( WS && WS.readyState === 1){
|
||||
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)
|
||||
}:{}
|
||||
sendMessage(_params)
|
||||
step.value = 2
|
||||
}
|
||||
})
|
||||
WS.onOpen = () =>{
|
||||
console.log('建立链接')
|
||||
step.value = 2
|
||||
}
|
||||
// WS.onerror = (event) => {
|
||||
// console.log(event)
|
||||
// }
|
||||
// WS.onclose = () => {
|
||||
// // 重连
|
||||
// // initWS()
|
||||
// }
|
||||
},100)
|
||||
}
|
||||
const reconnect = ()=> {
|
||||
if(reconnectTimer || isManualClose) return
|
||||
reconnectTimer = setTimeout(()=>{
|
||||
initWS(2)
|
||||
},3000)
|
||||
}
|
||||
const sendMessage = (data) => {
|
||||
WS.send({
|
||||
data: JSON.stringify(data)
|
||||
})
|
||||
}
|
||||
const closeWebSocket = () => {
|
||||
isManualClose = true
|
||||
if(WS){
|
||||
WS.close()
|
||||
WS = null
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onLoad((params) => {
|
||||
crsId.value = params.crsId||'';
|
||||
crsNum.value = params.crsNum||'';
|
||||
@@ -208,10 +228,10 @@ onShow(()=>{
|
||||
getData();
|
||||
})
|
||||
onHide(()=>{
|
||||
WS.close?.()
|
||||
closeWebSocket()
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
WS.close?.()
|
||||
closeWebSocket()
|
||||
})
|
||||
const playRecord = () => {
|
||||
audioObj.src = audioPath.value
|
||||
@@ -393,9 +413,15 @@ const handleMove = (obj) => {
|
||||
.talking-gif{
|
||||
width: 140rpx;
|
||||
height: 40rpx;
|
||||
background-color: #ccc;
|
||||
// background-color: #ccc;
|
||||
background: url(@/static/images/course/voice-gray.png) no-repeat;
|
||||
background-size: 100%;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
&.is-play{
|
||||
background: url(@/static/images/course/voice-gif.gif) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.talking-time{
|
||||
float: right;
|
||||
|
||||
+287
-303
@@ -14,19 +14,14 @@
|
||||
<view class="personal_information_data">
|
||||
<view class="name_sex_div">
|
||||
<view class="name">
|
||||
{{user_info.userName}}
|
||||
{{ user_info.userName }}
|
||||
</view>
|
||||
<view class="sex">
|
||||
<image v-if="user_info.gender === 'F'" class="img_100"
|
||||
src="/static/images/me/wuman.png">
|
||||
</image>
|
||||
<image v-if="user_info.gender === 'M'" class="img_100" src="/static/images/me/man.png">
|
||||
</image>
|
||||
<image v-if="user_info.gender === 'F'" class="img_100" src="/static/images/me/wuman.png"></image>
|
||||
<image v-if="user_info.gender === 'M'" class="img_100" src="/static/images/me/man.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="work_number_div">
|
||||
工号：{{user_info.userId}}
|
||||
</view>
|
||||
<view class="work_number_div">工号：{{ user_info.userId }}</view>
|
||||
<view class="fl1"></view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -35,22 +30,31 @@
|
||||
<view class="item">
|
||||
<view class="top">累计学习时长</view>
|
||||
<view class="bottom">
|
||||
<uv-count-to :startVal="statistics_data['startAccmPoint']" :endVal="statistics_data['accmPoint']"
|
||||
:useEasing="true" :decimals="1" ref="accmPointRef"></uv-count-to>h
|
||||
<uv-count-to
|
||||
:startVal="statistics_data['startAccmPoint']"
|
||||
:endVal="statistics_data['accmPoint']"
|
||||
:useEasing="true"
|
||||
:decimals="1"
|
||||
ref="accmPointRef"
|
||||
></uv-count-to>
|
||||
h
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="top">累计完成任务</view>
|
||||
<view class="bottom">
|
||||
<uv-count-to :startVal="statistics_data['startAccmTaskCnt']"
|
||||
:endVal="statistics_data['accmTaskCnt']" :useEasing="true" ref="accmTaskCntRef"></uv-count-to>
|
||||
<uv-count-to
|
||||
:startVal="statistics_data['startAccmTaskCnt']"
|
||||
:endVal="statistics_data['accmTaskCnt']"
|
||||
:useEasing="true"
|
||||
ref="accmTaskCntRef"
|
||||
></uv-count-to>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="top">累计获得积分</view>
|
||||
<view class="bottom">
|
||||
<uv-count-to :startVal="statistics_data['startStdtTmLen']" :endVal="statistics_data['stdtTmLen']"
|
||||
:useEasing="true" ref="stdtTmLenRef"></uv-count-to>
|
||||
<uv-count-to :startVal="statistics_data['startStdtTmLen']" :endVal="statistics_data['stdtTmLen']" :useEasing="true" ref="stdtTmLenRef"></uv-count-to>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -79,18 +83,17 @@
|
||||
</view>
|
||||
<view class="cell_div">
|
||||
<uv-cell-group :border="false">
|
||||
<uv-cell title='消息通知' :isLink="true"></uv-cell>
|
||||
<uv-cell title='排行榜' :isLink="true"></uv-cell>
|
||||
<uv-cell title='问答记录' :isLink="true"></uv-cell>
|
||||
<uv-cell title='竞赛记录' :isLink="true" :clickable="false" :border="false"></uv-cell>
|
||||
<uv-cell title="消息通知" :isLink="true"></uv-cell>
|
||||
<uv-cell title="排行榜" :isLink="true"></uv-cell>
|
||||
<uv-cell title="问答记录" :isLink="true"></uv-cell>
|
||||
<uv-cell title="竞赛记录" :isLink="true" :clickable="false" :border="false"></uv-cell>
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
<view class="cell_div">
|
||||
<uv-cell-group :border="false">
|
||||
<uv-cell title='设置' :isLink="true"></uv-cell>
|
||||
<uv-cell title='客服' :isLink="true"></uv-cell>
|
||||
<uv-cell title='退出登录' :isLink="true" :clickable="false" :border="false"
|
||||
@click="click_loginout()"></uv-cell>
|
||||
<uv-cell title="设置" :isLink="true" @click="common.navigateTo('/pages/setting/index')"></uv-cell>
|
||||
<uv-cell title="客服" :isLink="true"></uv-cell>
|
||||
<uv-cell title="退出登录" :isLink="true" :clickable="false" :border="false" @click="click_loginout()"></uv-cell>
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
<tabbar-shadow></tabbar-shadow>
|
||||
@@ -98,310 +101,291 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
reactive
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import common from '@/common/common'
|
||||
import {
|
||||
getUserInfo
|
||||
} from '@/common/common'
|
||||
import {
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
loginOut
|
||||
} from '@/api/login.js'
|
||||
import {
|
||||
queryTraStdyStatisticsSelf
|
||||
} from '@/api/user.js'
|
||||
const accmTaskCntRef = ref(null)
|
||||
const accmPointRef = ref(null)
|
||||
const stdtTmLenRef = ref(null)
|
||||
const statistics_data = reactive({
|
||||
'stdtTmLen': 0, // 累计学习时长
|
||||
'accmTaskCnt': 0, // 累计完成任务
|
||||
'accmPoint': 0, // 累计获得积分
|
||||
'startStdtTmLen': 0, // 起始累计学习时长
|
||||
'startAccmTaskCnt': 0, // 起始累计完成任务
|
||||
'startAccmPoint': 0, // 起始累计获得积分
|
||||
'request_time': 0, // 上次请求时间
|
||||
"init": function() { // 初始化统计数据
|
||||
const me_statistics_data = common.getValue('me_statistics_data') // 获取缓存
|
||||
if (me_statistics_data) {
|
||||
this.stdtTmLen = me_statistics_data.stdtTmLen;
|
||||
this.accmTaskCnt = me_statistics_data.accmTaskCnt;
|
||||
this.accmPoint = me_statistics_data.accmPoint;
|
||||
}
|
||||
},
|
||||
"get_statistics_data": async function() {
|
||||
try {
|
||||
const time_now = Date.now();
|
||||
if (time_now - this.request_time > 300 ) {
|
||||
this.request_time = time_now;
|
||||
// 获取最新数据
|
||||
const res = await queryTraStdyStatisticsSelf();
|
||||
common.setValue('me_statistics_data', res.body)
|
||||
const accmPoint = res.body.accmPoint
|
||||
const accmTaskCnt = res.body.accmTaskCnt
|
||||
const stdtTmLen = res.body.stdtTmLen
|
||||
if (accmPoint != this.accmPoint) { // 不相等就执行
|
||||
this.startAccmPoint = this.accmPoint
|
||||
this.accmPoint = accmPoint
|
||||
accmPointRef.value.start()
|
||||
}
|
||||
if (accmTaskCnt != this.accmTaskCnt) { // 不相等就执行
|
||||
this.startAccmTaskCnt = this.accmTaskCnt
|
||||
this.accmTaskCnt = accmTaskCnt
|
||||
accmTaskCntRef.value.start()
|
||||
}
|
||||
if (stdtTmLen != this.stdtTmLen) { // 不相等就执行
|
||||
this.startStdtTmLen = this.stdtTmLen
|
||||
this.stdtTmLen = stdtTmLen
|
||||
stdtTmLenRef.value.start()
|
||||
}
|
||||
console.log('统计数据已更新');
|
||||
} else {
|
||||
console.log('时间没到无需更新');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取统计数据失败:', error);
|
||||
}
|
||||
import { ref, computed, reactive } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import common from '@/common/common';
|
||||
import { getUserInfo } from '@/common/common';
|
||||
import { onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import { loginOut } from '@/api/login.js';
|
||||
import { queryTraStdyStatisticsSelf } from '@/api/user.js';
|
||||
const accmTaskCntRef = ref(null);
|
||||
const accmPointRef = ref(null);
|
||||
const stdtTmLenRef = ref(null);
|
||||
const statistics_data = reactive({
|
||||
stdtTmLen: 0, // 累计学习时长
|
||||
accmTaskCnt: 0, // 累计完成任务
|
||||
accmPoint: 0, // 累计获得积分
|
||||
startStdtTmLen: 0, // 起始累计学习时长
|
||||
startAccmTaskCnt: 0, // 起始累计完成任务
|
||||
startAccmPoint: 0, // 起始累计获得积分
|
||||
request_time: 0, // 上次请求时间
|
||||
init: function () {
|
||||
// 初始化统计数据
|
||||
const me_statistics_data = common.getValue('me_statistics_data'); // 获取缓存
|
||||
if (me_statistics_data) {
|
||||
this.stdtTmLen = me_statistics_data.stdtTmLen;
|
||||
this.accmTaskCnt = me_statistics_data.accmTaskCnt;
|
||||
this.accmPoint = me_statistics_data.accmPoint;
|
||||
}
|
||||
});
|
||||
|
||||
const user_info = reactive({
|
||||
userName: '',
|
||||
userId: ''
|
||||
});
|
||||
|
||||
|
||||
|
||||
onShow(() => {
|
||||
const user_info_cache = getUserInfo()
|
||||
Object.assign(user_info, user_info_cache)
|
||||
statistics_data['get_statistics_data']() // 获取统计数据
|
||||
})
|
||||
|
||||
const click_loginout = () => {
|
||||
common.show('确定退出登录？').then(async (res) => {
|
||||
console.log(res);
|
||||
if (!res) return;
|
||||
try {
|
||||
common.loading('正在退出登录')
|
||||
await loginOut()
|
||||
} catch (e) {
|
||||
|
||||
},
|
||||
get_statistics_data: async function () {
|
||||
try {
|
||||
const time_now = Date.now();
|
||||
if (time_now - this.request_time > 300) {
|
||||
this.request_time = time_now;
|
||||
// 获取最新数据
|
||||
const res = await queryTraStdyStatisticsSelf();
|
||||
common.setValue('me_statistics_data', res.body);
|
||||
const accmPoint = res.body.accmPoint;
|
||||
const accmTaskCnt = res.body.accmTaskCnt;
|
||||
const stdtTmLen = res.body.stdtTmLen;
|
||||
if (accmPoint != this.accmPoint) {
|
||||
// 不相等就执行
|
||||
this.startAccmPoint = this.accmPoint;
|
||||
this.accmPoint = accmPoint;
|
||||
accmPointRef.value.start();
|
||||
}
|
||||
if (accmTaskCnt != this.accmTaskCnt) {
|
||||
// 不相等就执行
|
||||
this.startAccmTaskCnt = this.accmTaskCnt;
|
||||
this.accmTaskCnt = accmTaskCnt;
|
||||
accmTaskCntRef.value.start();
|
||||
}
|
||||
if (stdtTmLen != this.stdtTmLen) {
|
||||
// 不相等就执行
|
||||
this.startStdtTmLen = this.stdtTmLen;
|
||||
this.stdtTmLen = stdtTmLen;
|
||||
stdtTmLenRef.value.start();
|
||||
}
|
||||
console.log('统计数据已更新');
|
||||
} else {
|
||||
console.log('时间没到无需更新');
|
||||
}
|
||||
common.hideLoading()
|
||||
// 主动退出登录后，再次登录应该进首页
|
||||
common.reLaunch('/pages/login/login')
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取统计数据失败:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
console.log('下拉刷新');
|
||||
uni.stopPullDownRefresh();
|
||||
})
|
||||
const user_info = reactive({
|
||||
userName: '',
|
||||
userId: ''
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
const user_info_cache = getUserInfo();
|
||||
Object.assign(user_info, user_info_cache);
|
||||
statistics_data['get_statistics_data'](); // 获取统计数据
|
||||
});
|
||||
|
||||
const click_loginout = () => {
|
||||
common.show('确定退出登录？').then(async (res) => {
|
||||
console.log(res);
|
||||
if (!res) return;
|
||||
try {
|
||||
common.loading('正在退出登录');
|
||||
await loginOut();
|
||||
} catch (e) {}
|
||||
common.hideLoading();
|
||||
// 主动退出登录后，再次登录应该进首页
|
||||
common.reLaunch('/pages/login/login');
|
||||
});
|
||||
};
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
console.log('下拉刷新');
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$bg-margin-left: 50rpx;
|
||||
|
||||
// 下方单元格
|
||||
.cell_div {
|
||||
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
|
||||
background: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
z-index: 101;
|
||||
overflow: hidden;
|
||||
|
||||
// 为了让线缩进来24单位
|
||||
:deep(.uv-line) {
|
||||
width: calc(100% - 48rpx) !important;
|
||||
margin: 0 24rpx !important;
|
||||
}
|
||||
|
||||
:deep(.uv-cell__body) {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
$bg-margin-left: 50rpx;
|
||||
|
||||
// 下方单元格
|
||||
.cell_div {
|
||||
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
|
||||
background: #ffffff;
|
||||
border-radius: 15rpx;
|
||||
z-index: 101;
|
||||
overflow: hidden;
|
||||
|
||||
// 为了让线缩进来24单位
|
||||
:deep(.uv-line) {
|
||||
width: calc(100% - 48rpx) !important;
|
||||
margin: 0 24rpx !important;
|
||||
}
|
||||
|
||||
// 快捷导航栏
|
||||
.navigation_div {
|
||||
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
|
||||
padding: 24rpx 0 20rpx 0;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 23rpx;
|
||||
:deep(.uv-cell__body) {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// 快捷导航栏
|
||||
.navigation_div {
|
||||
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
|
||||
padding: 24rpx 0 20rpx 0;
|
||||
background-color: #ffffff;
|
||||
border-radius: 23rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
z-index: 101;
|
||||
|
||||
.group {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
z-index: 101;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.group {
|
||||
// background-color: red;
|
||||
.icon {
|
||||
width: 88rpx;
|
||||
height: 86rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 10rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 25rpx;
|
||||
color: #323e57;
|
||||
line-height: 35rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg_div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 0 $bg-margin-left;
|
||||
z-index: 50;
|
||||
|
||||
.bg_img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
height: 858rpx;
|
||||
}
|
||||
|
||||
// 个人信息
|
||||
.user_data_div {
|
||||
margin-top: 158rpx;
|
||||
background: linear-gradient(180deg, rgba(241, 245, 255, 0.5) 0%, #f6f9fe 50%, #ffffff 100%);
|
||||
border-radius: 14rpx;
|
||||
border: 2rpx solid #ffffff;
|
||||
box-shadow: #f6f8ff 0 0 2rpx;
|
||||
|
||||
.personal_information {
|
||||
padding: 20rpx 18rpx 0 26rpx;
|
||||
display: flex;
|
||||
|
||||
// 个人头像框框
|
||||
.profile {
|
||||
border-radius: 100%;
|
||||
border: 2px solid #ffffff;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 头像右边的信息
|
||||
.personal_information_data {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 26rpx;
|
||||
overflow: hidden;
|
||||
|
||||
// 上边的姓名性别盒子
|
||||
.name_sex_div {
|
||||
display: flex;
|
||||
margin-top: 6rpx;
|
||||
.name {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.sex {
|
||||
margin-left: 10rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.work_number_div {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 25rpx;
|
||||
color: #666666;
|
||||
line-height: 38rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.study_information {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
z-index: 20;
|
||||
margin: 30rpx 50rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
// background-color: red;
|
||||
.icon {
|
||||
width: 88rpx;
|
||||
height: 86rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 10rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 25rpx;
|
||||
color: #323E57;
|
||||
line-height: 35rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg_div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 0 $bg-margin-left;
|
||||
z-index: 50;
|
||||
|
||||
.bg_img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
height: 858rpx;
|
||||
}
|
||||
|
||||
// 个人信息
|
||||
.user_data_div {
|
||||
margin-top: 158rpx;
|
||||
background: linear-gradient(180deg, rgba(241, 245, 255, .5) 0%, #F6F9FE 50%, #FFFFFF 100%);
|
||||
border-radius: 14rpx;
|
||||
border: 2rpx solid #ffffff;
|
||||
box-shadow: #F6F8FF 0 0 2rpx;
|
||||
|
||||
.personal_information {
|
||||
padding: 20rpx 18rpx 0 26rpx;
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
// 个人头像框框
|
||||
.profile {
|
||||
border-radius: 100%;
|
||||
border: 2px solid #ffffff;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.top {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 25rpx;
|
||||
color: #666666;
|
||||
line-height: 35rpx;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// 头像右边的信息
|
||||
.personal_information_data {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 26rpx;
|
||||
overflow: hidden;
|
||||
.bottom {
|
||||
margin-top: 5%;
|
||||
font-weight: bold;
|
||||
font-size: 50rpx;
|
||||
color: #000000;
|
||||
line-height: 58rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
|
||||
// 上边的姓名性别盒子
|
||||
.name_sex_div {
|
||||
display: flex;
|
||||
margin-top: 6rpx;
|
||||
.name {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.sex {
|
||||
margin-left: 10rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.work_number_div {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 25rpx;
|
||||
color: #666666;
|
||||
line-height: 38rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// 数字滚动组件
|
||||
:deep(.uv-count-num) {
|
||||
font-weight: bold !important;
|
||||
font-size: 50rpx !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.study_information {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
z-index: 20;
|
||||
margin: 30rpx 50rpx;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.top {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 25rpx;
|
||||
color: #666666;
|
||||
line-height: 35rpx;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 5%;
|
||||
font-weight: bold;
|
||||
font-size: 50rpx;
|
||||
color: #000000;
|
||||
line-height: 58rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
|
||||
// 数字滚动组件
|
||||
:deep(.uv-count-num) {
|
||||
font-weight: bold !important;
|
||||
font-size: 50rpx !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F6F8FF;
|
||||
}
|
||||
</style>
|
||||
.main_div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f6f8ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<view class="max_page detail-main">
|
||||
<nav-bar :is_seat="false"></nav-bar>
|
||||
<view class="fixed_search_div">
|
||||
<view class="back_div" @click="common.navigateBack()">
|
||||
<view class="back-icon"></view>
|
||||
</view>
|
||||
<view class="title font_pf">设置</view>
|
||||
</view>
|
||||
<view class="detail-body">
|
||||
<uv-cell-group>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
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;
|
||||
|
||||
console.log(form.value.gender, 'iiii');
|
||||
};
|
||||
onLoad((params) => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-main {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
box-sizing: border-box;
|
||||
min-height: calc(100vh - (var(--status-bar-height)+50rpx));
|
||||
// padding: 29rpx 37rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 0rpx;
|
||||
:deep(.uv-cell__title) {
|
||||
flex: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #000000;
|
||||
font-size: 34rpx;
|
||||
height: 34rpx;
|
||||
font-weight: 600;
|
||||
// margin-bottom: 30rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.fixed_search_div {
|
||||
padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f6f7f8;
|
||||
.back_div {
|
||||
margin-right: 10rpx;
|
||||
.back-icon {
|
||||
position: relative;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-icon::before,
|
||||
.back-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon::after {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
border-top: 4rpx solid #2b2c2e;
|
||||
border-left: 4rpx solid #2b2c2e;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -26,6 +26,15 @@
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/setting/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.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