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