27 changed files with 99 additions and 1606 deletions
-
130components/UserTab/UserTab - 副本.vue
-
117components/UserTab/UserTab.vue
-
311components/pickDateTimer/pickDateTimer.vue
-
2config/api.js
-
2config/site.config.js
-
3main.js
-
2manifest.json
-
19pages.json
-
6pages/indexEntry/enroll/enroll.vue
-
7pages/indexEntry/enroll/realName/realName.vue
-
1pages/indexEntry/enroll/realName/webView.vue
-
2pages/indexEntry/examines/comp/examineItem.vue
-
101pages/indexEntry/examines/comp/marquee.vue
-
7pages/mineEntry/myContract/myContract.vue
-
6pages/mineEntry/myOrder/detail/detail.vue
-
35pages/mineEntry/myOrder/voucher/voucher.vue
-
1pages/tabbar/mine/index.vue
-
2pages/userCenter/login/comp/privacyRadion.vue
-
492pages/userCenter/login/face.vue
-
2pages/userCenter/login/login.vue
-
2pages/userCenter/login/loginByPhone.vue
-
BINstatic/logo.png
-
9uni_modules/mumu-previewOffce/changelog.md
-
208uni_modules/mumu-previewOffce/components/mumu-previewOffce/mumu-previewOffce.vue
-
85uni_modules/mumu-previewOffce/package.json
-
85uni_modules/mumu-previewOffce/readme.md
@ -1,130 +0,0 @@ |
|||||
<template> |
|
||||
<view class=""> |
|
||||
<!-- 学生端 --> |
|
||||
<u-tabbar v-if="showWho=='student'" :value="student" @change="studentChange" :fixed="true" :placeholder="true" |
|
||||
:safeAreaInsetBottom="true" activeColor="#31aef1"> |
|
||||
<u-tabbar-item v-for="i in studentList" :key='i.id' :text="i.name" :name="i.name"> |
|
||||
<image class="u-page__item__slot-icon" slot="active-icon" :src="i.active" mode="widthFix"></image> |
|
||||
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="i.inactive" mode="widthFix"></image> |
|
||||
</u-tabbar-item> |
|
||||
|
|
||||
</u-tabbar> |
|
||||
<!-- 教师端 --> |
|
||||
<u-tabbar :value="teacher" @change="teacherChange" :fixed="true" :placeholder="true" |
|
||||
:safeAreaInsetBottom="true" activeColor="#31aef1"> |
|
||||
<u-tabbar-item v-for="i in teacherList" :key='i.id' :text="i.name" :name="i.name"> |
|
||||
<image class="u-page__item__slot-icon" slot="active-icon" :src="i.active" mode="widthFix"></image> |
|
||||
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="i.inactive" mode="widthFix"></image> |
|
||||
</u-tabbar-item> |
|
||||
</u-tabbar> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: ['tabNumber'], |
|
||||
data() { |
|
||||
return { |
|
||||
teacher: '课堂', |
|
||||
student: '', |
|
||||
showWho: 'teacher', |
|
||||
teacherList: [{ |
|
||||
id: 1, |
|
||||
name: '课堂', |
|
||||
active: '../../static/images/tabbar/syActive.png', |
|
||||
inactive: '../../static/images/tabbar/sy.png' |
|
||||
}, |
|
||||
{ |
|
||||
id: 2, |
|
||||
name: '兴趣小组', |
|
||||
active: '../../static/images/tabbar/tkActive.png', |
|
||||
inactive: '../../static/images/tabbar/tk.png' |
|
||||
}, |
|
||||
{ |
|
||||
id: 3, |
|
||||
name: '我的', |
|
||||
active: '../../static/images/tabbar/zxActive.png', |
|
||||
inactive: '../../static/images/tabbar/zx.png' |
|
||||
} |
|
||||
], |
|
||||
studentList: [{ |
|
||||
id: 1, |
|
||||
name: '学员课堂', |
|
||||
active: '../../static/images/tabbar/syActive.png', |
|
||||
inactive: '../../static/images/tabbar/sy.png' |
|
||||
}, |
|
||||
{ |
|
||||
id: 2, |
|
||||
name: '学员兴趣小组', |
|
||||
active: '../../static/images/tabbar/tkActive.png', |
|
||||
inactive: '../../static/images/tabbar/tk.png' |
|
||||
}, |
|
||||
{ |
|
||||
id: 3, |
|
||||
name: '学员我的', |
|
||||
active: '../../static/images/tabbar/zxActive.png', |
|
||||
inactive: '../../static/images/tabbar/zx.png' |
|
||||
} |
|
||||
], |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
// if (uni.getStorageSync('status') == 'teacher') { |
|
||||
// this.showWho = 'student' |
|
||||
// } else { |
|
||||
// this.showWho = 'teacher' |
|
||||
// } |
|
||||
this.student = this.tabNumber |
|
||||
this.teacher = this.tabNumber |
|
||||
}, |
|
||||
methods: { |
|
||||
teacherChange(e) { |
|
||||
this.teacher = e |
|
||||
if (e == '课堂') { |
|
||||
uni.reLaunch({ |
|
||||
url: "/pages/tabbar/index/index" |
|
||||
}) |
|
||||
// uni.hideHomeButton() //为了防止跳转页面后，小程序右上角会出现一个回到主页的小房子 |
|
||||
} else if (e == "兴趣小组") { |
|
||||
uni.reLaunch({ |
|
||||
url: "/pages/tabbar/question/index" |
|
||||
}) |
|
||||
// uni.hideHomeButton() |
|
||||
} else if (e == "我的") { |
|
||||
uni.reLaunch({ |
|
||||
url: "/pages/tabbar/mine/index" |
|
||||
}) |
|
||||
// uni.hideHomeButton() |
|
||||
} |
|
||||
}, |
|
||||
studentChange(e) { |
|
||||
this.student = e |
|
||||
uni.hideHomeButton() |
|
||||
// if (e == '课堂') { |
|
||||
// uni.reLaunch({ |
|
||||
// url: "/pages/index/CourseTeacherIndex" |
|
||||
// }) |
|
||||
// uni.hideHomeButton() //为了防止跳转页面后，小程序右上角会出现一个回到主页的小房子 |
|
||||
// } else if (e == "兴趣小组") { |
|
||||
// uni.reLaunch({ |
|
||||
// url: "/pages/interestGroup/interestGroup" |
|
||||
// }) |
|
||||
// uni.hideHomeButton() |
|
||||
// } else if (e == "我的") { |
|
||||
// uni.reLaunch({ |
|
||||
// url: "/pages/mine/mine" |
|
||||
// }) |
|
||||
// uni.hideHomeButton() |
|
||||
// } |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.u-page__item__slot-icon { |
|
||||
display: block; |
|
||||
width: 56rpx; |
|
||||
height: 56rpx; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,117 +0,0 @@ |
|||||
<template> |
|
||||
<view class="tab-bar"> |
|
||||
<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)"> |
|
||||
<image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image> |
|
||||
<view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{item.text}}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
selectedIndex: { // 当前选中的tab index |
|
||||
default: 0 |
|
||||
}, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
color: "#666666", |
|
||||
selectedColor: "#00BAB2", |
|
||||
list: [], |
|
||||
currentIndex:0, |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.currentIndex = this.selectedIndex; |
|
||||
|
|
||||
var _this = this |
|
||||
|
|
||||
if (uni.getStorageSync('identify') == 'nurse') { |
|
||||
//护士 |
|
||||
_this.list = [ |
|
||||
{ |
|
||||
"pagePath": "/pages/tabbar/index/index", |
|
||||
"text": "首页", |
|
||||
"iconPath": "/static/images/tabbar/sy.png", |
|
||||
"selectedIconPath": "/static/images/tabbar/syActive.png" |
|
||||
}, |
|
||||
{ |
|
||||
"pagePath": "/pages/tabbar/question/index", |
|
||||
"text": "题库", |
|
||||
"iconPath": "/static/images/tabbar/tk.png", |
|
||||
"selectedIconPath": "/static/images/tabbar/tkActive.png" |
|
||||
}, |
|
||||
{ |
|
||||
"pagePath": "/pages/tabbar/mine/index", |
|
||||
"text": "我的", |
|
||||
"iconPath": "/static/images/tabbar/wd.png", |
|
||||
"selectedIconPath": "/static/images/tabbar/wdActive.png" |
|
||||
} |
|
||||
] |
|
||||
} else { |
|
||||
//医管 |
|
||||
_this.list = [{ |
|
||||
"pagePath": "/pages/tabbar/index/index", |
|
||||
"text": "首1页", |
|
||||
"iconPath": "/static/images/tabbar/sy.png", |
|
||||
"selectedIconPath": "/static/images/tabbar/syActive.png" |
|
||||
}, |
|
||||
{ |
|
||||
"pagePath": "/pages/tabbar/question/index", |
|
||||
"text": "题2库", |
|
||||
"iconPath": "/static/images/tabbar/tk.png", |
|
||||
"selectedIconPath": "/static/images/tabbar/tkActive.png" |
|
||||
}, |
|
||||
{ |
|
||||
"pagePath": "/pages/tabbar/mine/index", |
|
||||
"text": "我3的", |
|
||||
"iconPath": "/static/images/tabbar/wd.png", |
|
||||
"selectedIconPath": "/static/images/tabbar/wdActive.png" |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
switchTab(item, index) { |
|
||||
this.currentIndex = index; |
|
||||
|
|
||||
let url = item.pagePath; |
|
||||
console.log(url) |
|
||||
uni.reLaunch({url:url}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.tab-bar { |
|
||||
position: fixed; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
height: 100rpx; |
|
||||
background: white; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部 |
|
||||
|
|
||||
.tab-bar-item { |
|
||||
flex: 1; |
|
||||
text-align: center; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
flex-direction: column; |
|
||||
.tab_img { |
|
||||
width: 48rpx; |
|
||||
height: 48rpx; |
|
||||
} |
|
||||
.tab_text { |
|
||||
font-size: 24rpx; |
|
||||
margin-top: 4rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,311 +0,0 @@ |
|||||
<template> |
|
||||
<view class="step1"> |
|
||||
<view class="card"> |
|
||||
<view class="dateBox"> |
|
||||
<view class="month-row"> |
|
||||
<view class="month" @click="show=true">{{ currentMonth }}</view> |
|
||||
<view class="arrow"> |
|
||||
<u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="date_row"> |
|
||||
<view class="icon left" @click="changeDateIndex(-1)"> |
|
||||
<u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon> |
|
||||
</view> |
|
||||
<view class="dateArr" > |
|
||||
<view class="dateWidth" v-for="(item,index) in dateArr[currentDay]" :key="index" @click="chooseDate(item)" > |
|
||||
<view class="date" :class="{active: chooseDay==item.date}"> |
|
||||
<view class="dian"></view> |
|
||||
<view class="week">{{ item.week }}</view> |
|
||||
<view class="num">{{ item.num }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="icon right" @click="changeDateIndex(1)"> |
|
||||
<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="card"> |
|
||||
<view class="timeCon"> |
|
||||
<view class="h2">上午</view> |
|
||||
<view class="time_box"> |
|
||||
<view class="time_item" v-for="(item,index) in timerArr" :key="index" @click="chooseTimerClick(item)" :class="{active: item.id==chooseTimerId, disable: item.status!==1}"> |
|
||||
<view class="lab" v-if="item.status==3">已过期</view> |
|
||||
<view class="lab" v-if="item.status==2">已约满</view> |
|
||||
<view class="lab" v-if="item.status==1">可预约</view> |
|
||||
<view class="time">{{ item.timer }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="h2">下午</view> |
|
||||
<view class="time_box"> |
|
||||
<view class="time_item" v-for="(item,index) in timerArr2" :key="index" @click="chooseTimerClick(item)" :class="{active: item.id==chooseTimerId,disable: item.status!==1}"> |
|
||||
<view class="lab" v-if="item.status==3">已过期</view> |
|
||||
<view class="lab" v-if="item.status==2">已约满</view> |
|
||||
<view class="lab" v-if="item.status==1">可预约</view> |
|
||||
<view class="time">{{ item.timer }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="card"> |
|
||||
<view class="noDate"> |
|
||||
<image src="http://192.168.1.20:81/zhili/image/20230927/ad178ebdf5394518b27b020c03ee48ab.png" mode=""></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<u-datetime-picker |
|
||||
:show="show" |
|
||||
v-model="chooseMonth" |
|
||||
:minDate="minDate" |
|
||||
:maxDate="maxDate" |
|
||||
mode="year-month" |
|
||||
@confirm="changeMonth" |
|
||||
></u-datetime-picker> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { getDates, getMonthsBetweenDates } from '@/config/utils.js' |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
maxDate: 0, |
|
||||
minDate: 0, |
|
||||
monthArr: [], |
|
||||
show: false, |
|
||||
dateArr: [], |
|
||||
currentDay: 0,//当前显示的日期组索引 |
|
||||
chooseDay: '', |
|
||||
chooseMonth: '', |
|
||||
timerArr: [ |
|
||||
{status: 1, timer: '06:00-07:00', id: 1}, |
|
||||
{status: 2, timer: '06:00-07:00', id: 2}, |
|
||||
{status: 3, timer: '06:00-07:00', id: 3}, |
|
||||
], |
|
||||
timerArr2: [ |
|
||||
{status: 1, timer: '06:00-07:00', id: 4}, |
|
||||
{status: 2, timer: '06:00-07:00', id: 5}, |
|
||||
{status: 3, timer: '06:00-07:00', id: 6}, |
|
||||
], |
|
||||
chooseTimerId: '', |
|
||||
endDate: null, |
|
||||
startDate: null, |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.startDate = new Date('2023-08-06'); |
|
||||
this.endDate = new Date(); |
|
||||
this.minDate = this.startDate*1 |
|
||||
this.maxDate = this.endDate*1 |
|
||||
this.initDate() |
|
||||
|
|
||||
}, |
|
||||
computed: { |
|
||||
currentMonth() { |
|
||||
let tiemr = new Date(this.chooseDay) * 1 |
|
||||
return this.$u.date(tiemr, 'yyyy.mm') |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
// 初始化日期 |
|
||||
initDate() { |
|
||||
this.dateArr = getDates(this.startDate, this.endDate); |
|
||||
this.chooseDay = this.dateArr[0][0].date |
|
||||
console.log(this.chooseDay) |
|
||||
}, |
|
||||
// 点击月份 |
|
||||
changeMonth(val) { |
|
||||
let startDate = this.$u.date(val.value, 'yyyy-mm-dd') |
|
||||
for(let i=0; i<this.dateArr.length; i++) { |
|
||||
for(let j=0; j<this.dateArr[i].length; j++) { |
|
||||
let date = this.dateArr[i][j].date |
|
||||
if(startDate==date) { |
|
||||
this.currentDay = i |
|
||||
this.chooseDay = date |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
this.show = false |
|
||||
}, |
|
||||
// 选择时间 |
|
||||
chooseTimerClick(item) { |
|
||||
if(item.status!=1) return this.$u.toast('请选择可预约时间') |
|
||||
this.chooseTimerId = item.id |
|
||||
}, |
|
||||
// 选择日期 |
|
||||
chooseDate(item) { |
|
||||
this.chooseDay = item.date |
|
||||
console.log(this.chooseDay) |
|
||||
}, |
|
||||
changeDateIndex(num) { |
|
||||
if(this.currentDay==0&&num==-1) return this.$u.toast('已是可选最小日期') |
|
||||
if(this.currentDay==this.dateArr.length-1&&num==1) return this.$u.toast('已是可选最大日期') |
|
||||
this.currentDay = this.currentDay + num |
|
||||
this.chooseDay = this.dateArr[this.currentDay][0].date |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.card { |
|
||||
width: 100%; |
|
||||
margin-bottom: 24rpx; |
|
||||
overflow: hidden; |
|
||||
.dateBox { |
|
||||
padding: 36rpx 0 40rpx 0; |
|
||||
.month-row { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
margin-bottom: 36rpx; |
|
||||
.month { |
|
||||
font-size: 32rpx; |
|
||||
color: $themC; |
|
||||
} |
|
||||
|
|
||||
.arrow { |
|
||||
margin-left: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.date_row { |
|
||||
width: 100%; |
|
||||
height: 100rpx; |
|
||||
position: relative; |
|
||||
.icon { |
|
||||
width: 40rpx; |
|
||||
height: 40rpx; |
|
||||
background: rgba(51,51,51,0.18); |
|
||||
backdrop-filter: blur(4rpx); |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
transform: translateY(-50%); |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
border-radius: 50%; |
|
||||
&.left { |
|
||||
left: 16rpx; |
|
||||
} |
|
||||
&.right { |
|
||||
right: 16rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.dateArr { |
|
||||
display: flex; |
|
||||
padding: 0 70rpx; |
|
||||
// justify-content: space-between; |
|
||||
&.oneDate { |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.dateWidth { |
|
||||
width: 20%; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.date { |
|
||||
width: 74rpx; |
|
||||
height: 100rpx; |
|
||||
border-radius: 16rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
.dian { |
|
||||
width: 12rpx; |
|
||||
height: 12rpx; |
|
||||
background: #D8D8D8; |
|
||||
border-radius: 50%; |
|
||||
&.active { |
|
||||
background: #1989FA; |
|
||||
} |
|
||||
} |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
.week { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.num { |
|
||||
margin-top: 4rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.card { |
|
||||
.timeCon { |
|
||||
padding: 0 24rpx 40rpx 24rpx; |
|
||||
} |
|
||||
.h2 { |
|
||||
line-height: 90rpx; |
|
||||
font-weight: 500; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.time_box { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
justify-content: space-between; |
|
||||
.time_item { |
|
||||
width: 30%; |
|
||||
height: 120rpx; |
|
||||
background: #F8F8F8; |
|
||||
border-radius: 12rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
border-radius: 12rpx; |
|
||||
color: #333; |
|
||||
&.active { |
|
||||
background: rgba(25,137,250,0.1); |
|
||||
border: 2rpx solid #1989FA; |
|
||||
color: $themC; |
|
||||
} |
|
||||
&.disable { |
|
||||
opacity: 0.4; |
|
||||
} |
|
||||
.lab { |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.time { |
|
||||
font-size: 24rpx; |
|
||||
margin-top: 4rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn { |
|
||||
width: 47%; |
|
||||
height: 72rpx; |
|
||||
background: #1989FA; |
|
||||
border-radius: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 72rpx; |
|
||||
margin: 108rpx auto 50rpx auto; |
|
||||
} |
|
||||
.noDate { |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,101 +0,0 @@ |
|||||
<template> |
|
||||
<div class="marquee-box"> |
|
||||
<div class="marquee-content" ref="out"> |
|
||||
<p :class="run?speed:''"> |
|
||||
<span class="text1" ref="in" >{{content}}</span> |
|
||||
<span class="text2" v-if="showtwo||run">{{content}}</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'VueMarquee', |
|
||||
data (){ |
|
||||
return{ |
|
||||
run: false, |
|
||||
pWidth: '', |
|
||||
} |
|
||||
}, |
|
||||
props: { |
|
||||
content: { |
|
||||
default: "暂无公告内容", |
|
||||
type: String |
|
||||
}, |
|
||||
speed: { |
|
||||
default: 'slow', |
|
||||
type: String |
|
||||
}, |
|
||||
showtwo: { |
|
||||
default: true |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
content (){ |
|
||||
var _this = this; |
|
||||
setTimeout(()=>{ |
|
||||
_this.$nextTick(()=>{ |
|
||||
let out = _this.$refs.out.clientWidth; |
|
||||
let _in = _this.$refs.in.clientWidth; |
|
||||
_this.pWidth = 2*_in; |
|
||||
_this.run=_in>out?true:false; |
|
||||
}); |
|
||||
},0); |
|
||||
} |
|
||||
}, |
|
||||
mounted (){ |
|
||||
var _this = this; |
|
||||
this.$nextTick(()=>{ |
|
||||
let out = _this.$refs.out.clientWidth; |
|
||||
let _in = _this.$refs.in.clientWidth; |
|
||||
_this.run=_in>out?true:false; |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.marquee-box { |
|
||||
height: 24px; |
|
||||
line-height: 24px; |
|
||||
color: #DD1D35; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
.marquee-content{ |
|
||||
overflow: hidden; |
|
||||
width:100% |
|
||||
} |
|
||||
.marquee-content p{ |
|
||||
display: inline-block; |
|
||||
white-space: nowrap; |
|
||||
margin: 0; |
|
||||
font-size: 0; |
|
||||
} |
|
||||
.marquee-content span{ |
|
||||
display: inline-block; |
|
||||
white-space: nowrap; |
|
||||
padding-right: 300px; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
|
|
||||
.quick{ |
|
||||
-webkit-animation: marquee 5s linear infinite; |
|
||||
animation: marquee 5s linear infinite; |
|
||||
} |
|
||||
.middle{ |
|
||||
-webkit-animation: marquee 8s linear infinite; |
|
||||
animation: marquee 8s linear infinite; |
|
||||
} |
|
||||
.slow{ |
|
||||
-webkit-animation: marquee 25s linear infinite; |
|
||||
animation: marquee 25s linear infinite; |
|
||||
} |
|
||||
@-webkit-keyframes marquee { |
|
||||
0% { -webkit-transform: translate3d(0,0,0); } |
|
||||
100% { -webkit-transform: translate3d(-50%,0,0); } |
|
||||
} |
|
||||
@keyframes marquee { |
|
||||
0% { transform: translateX(0); } |
|
||||
100% { transform: translateX(-50%);} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,35 @@ |
|||||
|
<template> |
||||
|
<view class="main"> |
||||
|
666 |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getStudentVoucher } from '@/config/api.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
orderId: '' |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
if (options.orderId) { |
||||
|
this.orderId = options.orderId |
||||
|
this.getStudentVoucherFn() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
async getStudentVoucherFn() { |
||||
|
let obj = { |
||||
|
studentId: this.studentId, |
||||
|
type: 1 |
||||
|
} |
||||
|
const res = await getStudentVoucher(obj) |
||||
|
console.log(res) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -1,492 +0,0 @@ |
|||||
<template> |
|
||||
<view class="page-content"> |
|
||||
<!-- #ifdef MP-WEIXIN --> |
|
||||
<!-- <u-navbar title="人脸识别" :is-back="true" :background="{backgroundColor: '#ffffff'}"></u-navbar> --> |
|
||||
<topNavbar title="人脸识别"></topNavbar> |
|
||||
<!-- #endif --> |
|
||||
|
|
||||
<view class="containerV"> |
|
||||
<view class="headerV"> |
|
||||
<view class="top-tips1"> |
|
||||
<view>请将正对手机，头部匹配摄像区域</view> |
|
||||
</view> |
|
||||
<view class="top-tips2"> |
|
||||
为了便于识别认证，请拍摄本人头像 |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- <u-circle-progress active-color="#2979ff" :percent="80"> --> |
|
||||
<view class="contentV"> |
|
||||
<view class="mark"></view> |
|
||||
<image v-if="tempImg" mode="widthFix" :src="tempImg" /> |
|
||||
<camera v-if='isAuthCamera' class="camera" :device-position="devicePosition ?'front': 'back'" |
|
||||
flash="off" resolution='high'> |
|
||||
</camera> |
|
||||
<view v-show="!tempImg && tipsText" class="tipV">{{ tipsText }}</view> |
|
||||
</view> |
|
||||
<!-- </u-circle-progress> --> |
|
||||
<view class="footerV"> |
|
||||
<view style="width: 100%;"> |
|
||||
<view v-if="!tempImg" style="width: 100%;"> |
|
||||
<view class="bottom-tips-2">该照片仅作为你认证的凭证</view> |
|
||||
</view> |
|
||||
|
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
<script> |
|
||||
import { WX_API, H5_API, prefix } from '@/config/site.config.js'; |
|
||||
import { createconsult } from '@/config/api.js' |
|
||||
var _url = H5_API+ WX_API |
|
||||
export default { |
|
||||
name: 'index', |
|
||||
components: {}, |
|
||||
data() { |
|
||||
return { |
|
||||
tipsText: '', // 错误文案提示 |
|
||||
tempImg: '', // 本地图片路径 |
|
||||
BASE_API: '', |
|
||||
cameraEngine: null, // 相机引擎 |
|
||||
devicePosition: true, // 摄像头朝向 |
|
||||
isAuthCamera: true, // 是否拥有相机权限 |
|
||||
uploadUrl: _url + 'app-api/infra/file/upload', |
|
||||
faceGetResult: '', |
|
||||
count: 0, |
|
||||
isload:false,//判断连拍 |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onLoad(options) { |
|
||||
this.initData() |
|
||||
}, |
|
||||
mounted() { |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
// 初始化相机引擎 |
|
||||
initData() { |
|
||||
// #ifdef MP-WEIXIN |
|
||||
// 1、初始化人脸识别 |
|
||||
wx.initFaceDetect() |
|
||||
// 2、创建 camera 上下文 CameraContext 对象 |
|
||||
this.cameraEngine = wx.createCameraContext() |
|
||||
// 3、获取 Camera 实时帧数据 |
|
||||
const listener = this.cameraEngine.onCameraFrame((frame) => { |
|
||||
if (this.tempImg) { |
|
||||
return; |
|
||||
} |
|
||||
// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据 |
|
||||
wx.faceDetect({ |
|
||||
frameBuffer: frame.data, |
|
||||
width: frame.width, |
|
||||
height: frame.height, |
|
||||
enablePoint: true, |
|
||||
enableConf: true, |
|
||||
enableAngle: true, |
|
||||
enableMultiFace: true, |
|
||||
success: (faceData) => { |
|
||||
let face = faceData.faceInfo[0] |
|
||||
if (faceData.x == -1 || faceData.y == -1) { |
|
||||
this.tipsText = '检测不到人' |
|
||||
} |
|
||||
if (faceData.faceInfo.length > 1) { |
|
||||
this.tipsText = '请保证只有一个人' |
|
||||
} else { |
|
||||
const { |
|
||||
pitch, |
|
||||
roll, |
|
||||
yaw |
|
||||
} = face.angleArray; |
|
||||
const standard = 0.5 |
|
||||
if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard || |
|
||||
Math.abs(yaw) >= standard) { |
|
||||
this.tipsText = '请平视摄像头' |
|
||||
} else if (face.confArray.global <= 0.8 || face.confArray.leftEye <= |
|
||||
0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 || |
|
||||
face.confArray.rightEye <= 0.8) { |
|
||||
this.tipsText = '请勿遮挡五官' |
|
||||
} else { |
|
||||
// this.tipsText = '请拍照' |
|
||||
// 这里可以写自己的逻辑了 |
|
||||
this.handleTakePhotoClick() |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
fail: (err) => { |
|
||||
if (err.x == -1 || err.y == -1) { |
|
||||
this.tipsText = '检测不到人' |
|
||||
} else { |
|
||||
this.tipsText = err.errMsg || '网络错误，请退出页面重试' |
|
||||
} |
|
||||
}, |
|
||||
}) |
|
||||
}) |
|
||||
// 5、开始监听帧数据 |
|
||||
listener.start() |
|
||||
// #endif |
|
||||
}, |
|
||||
// 拍照 |
|
||||
handleTakePhotoClick() { |
|
||||
// if (this.tipsText != "" && this.tipsText != "请拍照") { |
|
||||
// return; |
|
||||
// } |
|
||||
if(this.isload) return |
|
||||
this.isload = true |
|
||||
uni.getSetting({ |
|
||||
success: (res) => { |
|
||||
if (!res.authSetting['scope.camera']) { |
|
||||
this.isAuthCamera = false |
|
||||
uni.openSetting({ |
|
||||
success: (res) => { |
|
||||
if (res.authSetting['scope.camera']) { |
|
||||
this.isAuthCamera = true; |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
this.cameraEngine.takePhoto({ |
|
||||
quality: "high", |
|
||||
success: ({ |
|
||||
tempImagePath |
|
||||
}) => { |
|
||||
this.tempImg = tempImagePath |
|
||||
// this.isAuthCamera = false |
|
||||
uni.showLoading({ |
|
||||
title: '人脸核身中，请耐心等待....' |
|
||||
}) |
|
||||
this.upLoad(tempImagePath) |
|
||||
console.log('tempImagePath', tempImagePath) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
async upLoad(imgPath) { |
|
||||
console.log('然后这里imgPath1111', imgPath) |
|
||||
// this.againEvent() |
|
||||
// return |
|
||||
const url = await this.UpImgResolve(imgPath, this.uploadUrl) |
|
||||
this.faceGetResultEvent(url) |
|
||||
console.log('然后这里imgPath', url, '9d1b7998-4949-46c7-a39f-726aad966664') |
|
||||
// 然后这里imgPath 传过来的是 要上传的临时本地图片的路径 |
|
||||
// 具体上传方法根据自己的请求方式 请求自己的接口 |
|
||||
}, |
|
||||
UpImgResolve(file, url) { |
|
||||
let that = this |
|
||||
let token = 'Bearer '+ this.$store.state.user.vuex_loginInfo.accessToken |
|
||||
let _this = this |
|
||||
let timer = new Date() * 1 |
|
||||
|
|
||||
// 处理接口超时异常 |
|
||||
setTimeout((res => { |
|
||||
console.log('3122223') |
|
||||
uni.hideLoading(); |
|
||||
that.againEvent() |
|
||||
}), 10000) |
|
||||
return new Promise(function(resolve, reject) { |
|
||||
uni.uploadFile({ |
|
||||
url: _url + 'app-api/infra/file/upload',//接口 |
|
||||
filePath: file,//要上传的图片的本地路径 |
|
||||
name: 'file', |
|
||||
|
|
||||
formData: { |
|
||||
path: 'complain/'+ uni.$u.date(timer, 'yyyy-mm-dd')+timer, |
|
||||
type: 1, |
|
||||
fileSuffix: "png" |
|
||||
}, |
|
||||
header: { |
|
||||
Authorization: token, |
|
||||
'tenant-id': 1 |
|
||||
}, |
|
||||
success: function(uploadFileRes) { |
|
||||
if (!uploadFileRes.data) return that.againEvent() |
|
||||
|
|
||||
const urlJosn = JSON.parse(uploadFileRes.data) |
|
||||
console.log('拿到照片地址---',urlJosn.data) |
|
||||
resolve(urlJosn.data) |
|
||||
}, |
|
||||
error(res) { |
|
||||
console.log('313', res) |
|
||||
uni.hideLoading(); |
|
||||
that.againEvent() |
|
||||
}, |
|
||||
catach(res) { |
|
||||
console.log('3122223', res) |
|
||||
uni.hideLoading(); |
|
||||
that.againEvent() |
|
||||
} |
|
||||
}); |
|
||||
}) |
|
||||
|
|
||||
}, |
|
||||
faceGetResultEvent(url) { |
|
||||
let that = this |
|
||||
console.log('走进核身---',url) |
|
||||
uni.request({ |
|
||||
url: that.faceGetResult, |
|
||||
method: "post", |
|
||||
data: { |
|
||||
'livenessType': 'SILENT', |
|
||||
'type': 3, |
|
||||
'imageUrl': url, |
|
||||
'identityType':2, |
|
||||
'url':url |
|
||||
}, |
|
||||
header: { |
|
||||
'token': uni.getStorageSync('accessToken') |
|
||||
}, |
|
||||
success: (res) => { |
|
||||
uni.hideLoading() |
|
||||
console.log('走进核身返回数据---',res ) |
|
||||
if (res.data.code != 200) { |
|
||||
uni.showToast({ |
|
||||
title: '核身失败', |
|
||||
icon: "none", |
|
||||
mask: true, |
|
||||
}) |
|
||||
that.againEvent() |
|
||||
return |
|
||||
} else { |
|
||||
that.$u.route({ |
|
||||
type: 'tab', |
|
||||
url: '/pages/tabbar/index/index' |
|
||||
}); |
|
||||
} |
|
||||
console.log('res', 1111, res) |
|
||||
}, |
|
||||
fail:(res)=>{ |
|
||||
console.log('核身失败原因---', res) |
|
||||
} |
|
||||
|
|
||||
}) |
|
||||
|
|
||||
}, |
|
||||
// 失败后重新拉起人脸识别 |
|
||||
againEvent() { |
|
||||
uni.hideLoading() |
|
||||
this.count++ |
|
||||
if (this.count >= 5) { |
|
||||
uni.showToast({ |
|
||||
title: '核身失败', |
|
||||
icon: "none", |
|
||||
mask: true, |
|
||||
}) |
|
||||
return uni.navigateBack() |
|
||||
|
|
||||
} |
|
||||
setTimeout((res => { |
|
||||
this.isload = false |
|
||||
this.tempImg = false |
|
||||
this.isAuthCamera = true |
|
||||
this.devicePosition = true |
|
||||
}), 1500) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
page { |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.page-content { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
|
|
||||
.containerV { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
|
|
||||
.headerV { |
|
||||
.top-tips1 { |
|
||||
margin-top: 60rpx; |
|
||||
color: #1C1C1C; |
|
||||
font-size: 36rpx; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.top-tips2 { |
|
||||
margin-top: 20rpx; |
|
||||
color: #00AAFF; |
|
||||
font-size: 28rpx; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.contentVLine { |
|
||||
// border-radius:50%; |
|
||||
// width: 450rpx; |
|
||||
// height: 450rpx; |
|
||||
// overflow: hidden; |
|
||||
// margin: 0 auto; |
|
||||
// border:100rpx solid #fff; |
|
||||
// position: absolute; |
|
||||
// left: 0; |
|
||||
// top: 0; |
|
||||
// z-index: 99; |
|
||||
} |
|
||||
|
|
||||
.contentV { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
margin-top: 30rpx; |
|
||||
width: 450rpx; |
|
||||
height: 450rpx; |
|
||||
margin: 80rpx auto; |
|
||||
border-radius: 50%; |
|
||||
border: 20px solid #eee; |
|
||||
border-radius: 50%; |
|
||||
|
|
||||
.tipV { |
|
||||
bottom: 30rpx; |
|
||||
position: absolute; |
|
||||
line-height: 90rpx; |
|
||||
padding-left: 24rpx; |
|
||||
padding-right: 24rpx; |
|
||||
max-width: calc(100vw - 50rpx * 2); |
|
||||
text-align: center; |
|
||||
font-size: 30rpx; |
|
||||
background: #000000; |
|
||||
opacity: 0.75; |
|
||||
color: #FFFFFF; |
|
||||
border-radius: 16rpx; |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
z-index: 5; |
|
||||
} |
|
||||
|
|
||||
.camera { |
|
||||
width: 450rpx !important; |
|
||||
height: 450rpx !important; |
|
||||
border-radius: 50% !important; |
|
||||
overflow: hidden; |
|
||||
position: absolute; |
|
||||
left: -38rpx; |
|
||||
top: -38rpx; |
|
||||
z-index: -1; |
|
||||
} |
|
||||
|
|
||||
.mark { |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
z-index: 2; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
// background:deeppink; |
|
||||
background-size: 750rpx 661rpx; |
|
||||
} |
|
||||
|
|
||||
image { |
|
||||
position: absolute; |
|
||||
width: 450rpx; |
|
||||
height: 450rpx; |
|
||||
z-index: 3; |
|
||||
border-radius: 50%; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.footerV { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
|
|
||||
.privacyV { |
|
||||
padding-top: 30rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
|
|
||||
.text { |
|
||||
font-size: 30rpx; |
|
||||
color: #1C1C1C; |
|
||||
text-align: center; |
|
||||
line-height: 42rpx; |
|
||||
margin-left: 15rpx; |
|
||||
|
|
||||
text { |
|
||||
font-size: 30rpx; |
|
||||
color: #00AAFF; |
|
||||
text-align: center; |
|
||||
line-height: 42rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.icon { |
|
||||
width: 40rpx; |
|
||||
height: 47rpx; |
|
||||
background: green; |
|
||||
background-size: 100% auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.bottom-tips-2 { |
|
||||
margin-top: 20rpx; |
|
||||
color: #999999; |
|
||||
text-align: center; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
|
|
||||
.take-photo-bgV { |
|
||||
width: 100%; |
|
||||
margin-top: 30rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
|
|
||||
.btn-take-photo { |
|
||||
margin: 0rpx 80rpx 0rpx 80rpx; |
|
||||
width: 196rpx; |
|
||||
height: 196rpx; |
|
||||
background: yellow; |
|
||||
background-size: 100% auto; |
|
||||
} |
|
||||
|
|
||||
.btn-change-upload { |
|
||||
left: 130rpx; |
|
||||
width: 80rpx; |
|
||||
height: 80rpx; |
|
||||
background: blue; |
|
||||
background-size: 100% auto; |
|
||||
} |
|
||||
|
|
||||
.btn-change-camera { |
|
||||
right: 130rpx; |
|
||||
width: 80rpx; |
|
||||
height: 80rpx; |
|
||||
background: red; |
|
||||
background-size: 100% auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.confirmV { |
|
||||
margin: 200rpx 100rpx 0rpx 100rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.btn-cancel { |
|
||||
font-size: 32rpx; |
|
||||
color: #1C1C1C; |
|
||||
} |
|
||||
|
|
||||
.btn-ok { |
|
||||
font-size: 32rpx; |
|
||||
color: #00AAFF; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
|
Before Width: 72 | Height: 72 | Size: 3.9 KiB |
@ -1,9 +0,0 @@ |
|||||
## 1.0.3（2023-02-22） |
|
||||
本插件将于2023/11/30停止提供服务 |
|
||||
## 1.0.2（2022-07-19） |
|
||||
- 【添加】 兼容大部分小程序 |
|
||||
- 【修复】 微信小程序中直接打开问题 |
|
||||
## 1.0.1（2022-07-02） |
|
||||
修复在 ios 下背景出现大量标题，主题，创作者等等数据 |
|
||||
## 1.0.0（2022-05-25） |
|
||||
版本上线 |
|
||||
@ -1,208 +0,0 @@ |
|||||
<template> |
|
||||
<view class="preview" v-if="value && isMp === false"> |
|
||||
<view class="right" :class="previewType"></view> |
|
||||
<view class="left" :class="previewType"></view> |
|
||||
<iframe :src="previewUrl" width="100%" frameborder="0" id="if"></iframe> |
|
||||
<view class="error" v-if="isError">传入文件格式不正确</view> |
|
||||
<view class="loading">预览模块加载中...</view> |
|
||||
|
|
||||
<view class="close" @click="closePre()">关闭</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
model: { |
|
||||
event: 'change' |
|
||||
}, |
|
||||
props: { |
|
||||
fileUrl: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
value: { |
|
||||
type: Boolean |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
previewUrl: ``, |
|
||||
isError: false, |
|
||||
isMp: false |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
fileUrl: { |
|
||||
handler(newValue) { |
|
||||
if (!newValue) return |
|
||||
//#ifdef MP |
|
||||
this.isMp = true |
|
||||
uni.downloadFile({ |
|
||||
url: newValue, |
|
||||
success: res => { |
|
||||
const filePath = res.tempFilePath |
|
||||
uni.openDocument({ |
|
||||
filePath: filePath, |
|
||||
success: res => { |
|
||||
console.log('打开文档成功') |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
//#endif |
|
||||
|
|
||||
//#ifndef MP |
|
||||
let exit = newValue.split('.') |
|
||||
if (!exit.length) return (this.isError = true) |
|
||||
exit = exit.pop() |
|
||||
const arr = ['pptx', 'ppt', 'docx', 'doc', 'xlsx', 'xls', 'pdf'] |
|
||||
if (arr.indexOf(exit) === -1) return (this.isError = true) |
|
||||
this.isError = false |
|
||||
if (exit === 'pdf') return (this.previewUrl = this.pasePdfUrl(newValue)) |
|
||||
this.previewUrl = this.paseOfficeUrl(newValue) |
|
||||
//#endif |
|
||||
}, |
|
||||
immediate: true |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
closePre() { |
|
||||
this.$emit('change', false) |
|
||||
}, |
|
||||
paseOfficeUrl(url) { |
|
||||
url = encodeURIComponent(url) |
|
||||
return `https://view.officeapps.live.com/op/embed.aspx?src=${url}&wdPrint=0&wdEmbedCode=0&wdStartOn=1` |
|
||||
}, |
|
||||
pasePdfUrl(url) { |
|
||||
//url = encodeURIComponent(url) |
|
||||
return `https://previewpdf.mumudev.top/?file=${url}` |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
previewType() { |
|
||||
let exit = this.fileUrl.split('.') |
|
||||
if (!exit.length) return console.log('传入文件格式不正确') |
|
||||
exit = exit.pop() |
|
||||
|
|
||||
switch (exit) { |
|
||||
case 'pptx': |
|
||||
case 'ppt': |
|
||||
return 'ppt' |
|
||||
case 'docx': |
|
||||
case 'doc': |
|
||||
return 'word' |
|
||||
case 'xlsx': |
|
||||
case 'xls': |
|
||||
return 'excel' |
|
||||
case 'pdf': |
|
||||
return '' |
|
||||
default: |
|
||||
console.log('传入文件格式不正确') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.preview { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
background-color: #fff; |
|
||||
z-index: 100; |
|
||||
|
|
||||
.right, |
|
||||
.left { |
|
||||
position: absolute; |
|
||||
z-index: 99999; |
|
||||
} |
|
||||
|
|
||||
.ppt { |
|
||||
height: 20px; |
|
||||
width: 80px; |
|
||||
background-color: #444444; |
|
||||
|
|
||||
&.right { |
|
||||
bottom: 2px; |
|
||||
right: 4px; |
|
||||
} |
|
||||
|
|
||||
&.left { |
|
||||
left: 4px; |
|
||||
bottom: 2px; |
|
||||
width: 50px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.word { |
|
||||
position: absolute; |
|
||||
width: 80px; |
|
||||
height: 17px; |
|
||||
background-color: #ffffff; |
|
||||
|
|
||||
&.right { |
|
||||
bottom: 2px; |
|
||||
right: 2px; |
|
||||
} |
|
||||
|
|
||||
&.left { |
|
||||
left: 2px; |
|
||||
bottom: 2px; |
|
||||
width: 40px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.excel { |
|
||||
position: absolute; |
|
||||
width: 90px; |
|
||||
height: 23px; |
|
||||
background-image: linear-gradient(#3f4244, #36383a); |
|
||||
|
|
||||
&.right { |
|
||||
bottom: 2px; |
|
||||
right: 2px; |
|
||||
} |
|
||||
|
|
||||
&.left { |
|
||||
left: 2px; |
|
||||
bottom: 2px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.close { |
|
||||
position: absolute; |
|
||||
top: 50px; |
|
||||
right: 10px; |
|
||||
background-color: #ccc; |
|
||||
color: #fff; |
|
||||
padding: 5px 10px; |
|
||||
border-radius: 5px; |
|
||||
font-size: 12px; |
|
||||
z-index: 102; |
|
||||
} |
|
||||
|
|
||||
.error { |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
color: #ccc; |
|
||||
} |
|
||||
|
|
||||
.loading { |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
color: #ccc; |
|
||||
} |
|
||||
|
|
||||
#if { |
|
||||
height: 100%; |
|
||||
position: relative; |
|
||||
z-index: 101; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,85 +0,0 @@ |
|||||
{ |
|
||||
"id": "mumu-previewOffce", |
|
||||
"displayName": "预览offce文件。可以打开 PDF WORD PPT EXCEL 文件", |
|
||||
"version": "1.0.3", |
|
||||
"description": "在程序中直接打开 offce 文件进行预览。可以打开 PDF WORD PPT EXCEL 文件", |
|
||||
"keywords": [ |
|
||||
"PDF", |
|
||||
"WORD", |
|
||||
"PPT", |
|
||||
"EXCEL", |
|
||||
"offce" |
|
||||
], |
|
||||
"repository": "", |
|
||||
"engines": { |
|
||||
"HBuilderX": "^3.1.0" |
|
||||
}, |
|
||||
"dcloudext": { |
|
||||
"sale": { |
|
||||
"regular": { |
|
||||
"price": "0.00" |
|
||||
}, |
|
||||
"sourcecode": { |
|
||||
"price": "0.00" |
|
||||
} |
|
||||
}, |
|
||||
"contact": { |
|
||||
"qq": "" |
|
||||
}, |
|
||||
"declaration": { |
|
||||
"ads": "无", |
|
||||
"data": "无", |
|
||||
"permissions": "无" |
|
||||
}, |
|
||||
"npmurl": "", |
|
||||
"type": "component-vue" |
|
||||
}, |
|
||||
"uni_modules": { |
|
||||
"dependencies": [], |
|
||||
"encrypt": [], |
|
||||
"platforms": { |
|
||||
"cloud": { |
|
||||
"tcb": "y", |
|
||||
"aliyun": "y" |
|
||||
}, |
|
||||
"client": { |
|
||||
"Vue": { |
|
||||
"vue2": "y", |
|
||||
"vue3": "y" |
|
||||
}, |
|
||||
"App": { |
|
||||
"app-vue": "y", |
|
||||
"app-nvue": "n" |
|
||||
}, |
|
||||
"H5-mobile": { |
|
||||
"Safari": "y", |
|
||||
"Android Browser": "y", |
|
||||
"微信浏览器(Android)": "y", |
|
||||
"QQ浏览器(Android)": "y" |
|
||||
}, |
|
||||
"H5-pc": { |
|
||||
"Chrome": "y", |
|
||||
"IE": "n", |
|
||||
"Edge": "y", |
|
||||
"Firefox": "y", |
|
||||
"Safari": "y" |
|
||||
}, |
|
||||
"小程序": { |
|
||||
"微信": "y", |
|
||||
"阿里": "y", |
|
||||
"百度": "y", |
|
||||
"字节跳动": "y", |
|
||||
"QQ": "y", |
|
||||
"钉钉": "y", |
|
||||
"快手": "u", |
|
||||
"飞书": "y", |
|
||||
"京东": "y" |
|
||||
}, |
|
||||
"快应用": { |
|
||||
"华为": "u", |
|
||||
"联盟": "u" |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,85 +0,0 @@ |
|||||
# 插件介绍 |
|
||||
|
|
||||
** 预览的文件地址必须是可以通过互联网访问的！！！ ** |
|
||||
|
|
||||
** 预览的文件地址必须是可以直接复制在浏览器地址中访问的！！！ ** |
|
||||
|
|
||||
## 本插件将于2023/11/30停止提供服务 |
|
||||
|
|
||||
文档预览工具新版本已上线 |
|
||||
|
|
||||
对比当前版本支持了手机端双手缩放操作，office文件不在依赖微软的解析接口，支持服务端完全私有化部署(内网部署)，UI界面有单独的电脑端、ios端、安卓端。 |
|
||||
|
|
||||
新版地址：[h5office。预览office文件，预览文档，打开PDF WORD PPT EXCEL 文件 - DCloud 插件市场](https://ext.dcloud.net.cn/plugin?id=10895) |
|
||||
|
|
||||
## 插件原理 |
|
||||
|
|
||||
> pdf 文件预览是通过 `pdf.js` 开源库，搭建了一个pdf预览的网站。前端只需要使用 iframe 加载这个网站即可。[pdf.js 官网](http://mozilla.github.io/pdf.js/api/draft/index.html) |
|
||||
> |
|
||||
> offce 文件的预览是通过微软offce在线接口进行解析的。offce在线地址：https://view.officeapps.live.com/op/embed.aspx?src=‘你的文件网络地址’ |
|
||||
> |
|
||||
> 在微信小程序中，是通过小程序中的API进行预览的。[小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html) |
|
||||
|
|
||||
## 使用环境 |
|
||||
|
|
||||
** 不支持nvue 。小程序中使用官方提供的api。h5与其他环境是通过上面介绍的插件原理加载。** |
|
||||
|
|
||||
## 插件使用 |
|
||||
|
|
||||
**插件已支持 uni_modules 支持组件easycom，以下代码演示的是普通使用** |
|
||||
|
|
||||
``` html |
|
||||
<!-- HTML --> |
|
||||
<mumu-previewOffce :fileUrl='fileUrl' v-model='showPreview'></mumu-previewOffce> |
|
||||
|
|
||||
<button @click='showPreview = true'></button> |
|
||||
``` |
|
||||
|
|
||||
``` js |
|
||||
import MumuPreviewOffce from '@/uni_modules/mumu-previewOffce/components/mumu-previewOffce/mumu-previewOffce.vue' |
|
||||
export default { |
|
||||
components: { |
|
||||
MumuPreviewOffce |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
showPreview: false, |
|
||||
fileUrl: 'https://h5plugin.mumudev.top/public/previewOffce/333.docx' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
}, |
|
||||
} |
|
||||
``` |
|
||||
|
|
||||
## 相关 API |
|
||||
|
|
||||
### 可传属性（Props） |
|
||||
|
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 | |
|
||||
| ------- | ------------------------ | ------- | ------ | ------------ | |
|
||||
| v-model | 双向绑定，显示或隐藏组件 | Boolean | false | false / true | |
|
||||
| fileUrl | 预览文件的网络地址 | String | - | - | |
|
||||
|
|
||||
|
|
||||
|
|
||||
## 打开本地预览 |
|
||||
|
|
||||
本地预览功能还在开发中... |
|
||||
|
|
||||
开发思路是： |
|
||||
|
|
||||
> 选择打开本地文件，上传到服务器。获取到服务器中的文件地址，传递给当前组件展示。 |
|
||||
|
|
||||
没有办法直接在本地打开，所有采取这种方案。有条件的同学可以自己开发。我也会尽快把这个功能做出来。 |
|
||||
|
|
||||
|
|
||||
|
|
||||
## 案例演示 |
|
||||
|
|
||||
 |
|
||||
|
|
||||
## 支持作者 |
|
||||
|
|
||||
 |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue