47 changed files with 807 additions and 616 deletions
-
8config/api.js
-
4pages.json
-
12pages/carEntry/evaluate/comp/evaluateItem.vue
-
19pages/carEntry/evaluate/evaluate.vue
-
2pages/carEntry/examineAppointment/comp/pickDate.vue
-
5pages/carEntry/examineAppointment/comp/step3.vue
-
86pages/carEntry/examineAppointment/comp/选择科目备份.vue
-
10pages/carEntry/examineAppointment/examineAppointment.vue
-
11pages/carEntry/operaAppointment/comp/coachInfo.vue
-
3pages/carEntry/operaAppointment/comp/pickDate.vue
-
32pages/carEntry/operaAppointment/comp/step1.vue
-
1pages/carEntry/operaAppointment/comp/step2.vue
-
182pages/carEntry/operaAppointment/comp/step3.vue
-
256pages/carEntry/operaAppointment/comp/step4.vue
-
5pages/carEntry/operaAppointment/operaAppointment.vue
-
9pages/carEntry/simulateAppointment/comp/pickDate.vue
-
9pages/carEntry/simulateAppointment/comp/step2.vue
-
15pages/carEntry/simulateAppointment/comp/step3.vue
-
11pages/carEntry/simulateAppointment/simulateAppointment.vue
-
1pages/indexEntry/NonPlatformStudentInfo/NonPlatformStudentInfo.vue
-
2pages/indexEntry/consult/pubComplaint/pubComplaint.vue
-
2pages/indexEntry/consult/pubConsult/pubConsult.vue
-
4pages/indexEntry/consult/record/comp/complaintItem.vue
-
2pages/indexEntry/enroll/enroll.vue
-
13pages/indexEntry/enroll/realName/realName.vue
-
2pages/indexEntry/findShcool/coachComment/coachComment.vue
-
1pages/indexEntry/findShcool/comments/comments.vue
-
2pages/indexEntry/findShcool/comp/schoolItem.vue
-
14pages/indexEntry/findShcool/shcoolDetail/comp/tab3.vue
-
4pages/indexEntry/findShcool/shcoolDetail/shcoolDetail.vue
-
2pages/indexEntry/iIndustryInfo/detail/detail.vue
-
2pages/indexEntry/publicVideo/comp/videoItem.vue
-
26pages/indexEntry/publicVideo/videoDetail/videoDetail.vue
-
2pages/mineEntry/myCollect/myCollect.vue
-
49pages/mineEntry/myCollect/videoItem.vue
-
46pages/mineEntry/myContract/myContract.vue
-
13pages/mineEntry/myOrder/comp/comp.scss
-
23pages/mineEntry/myOrder/comp/opera.vue
-
39pages/mineEntry/myOrder/detail/detail.vue
-
78pages/mineEntry/myOrder/myOrder.vue
-
6pages/tabbar/index/index.vue
-
21pages/tabbar/mine/index.vue
-
2store/modules/school.js
-
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,86 +0,0 @@ |
|||
<template> |
|||
<view class="step1"> |
|||
<view class="card"> |
|||
<view class="list"> |
|||
<view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: index==1}"> |
|||
{{ item.text }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="btn_row" style="margin-top: 108rpx;"> |
|||
<view class="border btn" @click="changeStep(1)">返回上一步</view> |
|||
<view class="btn" @click="changeStep(3)">下一步</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [{ |
|||
text: '科目二', |
|||
id: 2 |
|||
}, |
|||
{ |
|||
text: '科目三', |
|||
id: 3 |
|||
}, |
|||
], |
|||
} |
|||
}, |
|||
methods: { |
|||
changeStep(val) { |
|||
this.$emit('changeStep', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
padding: 24rpx; |
|||
.listItem { |
|||
width: 32.4%; |
|||
height: 120rpx; |
|||
background: #F8F8F8; |
|||
border-radius: 12rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
line-height: 120rpx; |
|||
margin-right: 20rpx; |
|||
&.active { |
|||
width: 200rpx; |
|||
height: 120rpx; |
|||
background: rgba(25, 137, 250, 0.1); |
|||
border-radius: 12rpx; |
|||
border: 2rpx solid $themC; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
.btn_row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.btn { |
|||
width: 47%; |
|||
height: 72rpx; |
|||
background: #1989FA; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
|
|||
&.border { |
|||
background: rgba(25, 137, 250, 0.1); |
|||
border: 2rpx solid $themC; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,182 +0,0 @@ |
|||
<template> |
|||
<view class="step3"> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
dateArr: [ |
|||
{week: '一', num: '08'}, |
|||
{week: '二', num: '09'}, |
|||
{week: '三', num: '10'}, |
|||
{week: '四', num: '11'}, |
|||
{week: '五', num: '12'}, |
|||
], |
|||
show: false |
|||
} |
|||
}, |
|||
methods: { |
|||
changeStep(val) { |
|||
this.$emit('changeStep', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.card { |
|||
width: 100%; |
|||
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; |
|||
.date { |
|||
width: 74rpx; |
|||
height: 100rpx; |
|||
border-radius: 16rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
&.active { |
|||
background: rgba(25,137,250,0.1); |
|||
border: 2rpx solid #1989FA; |
|||
color: $themC; |
|||
} |
|||
.week { |
|||
|
|||
} |
|||
|
|||
.num { |
|||
margin-top: 4rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
.timeCon { |
|||
padding: 0 24rpx 70rpx 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.5; |
|||
} |
|||
.lab { |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.time { |
|||
font-size: 24rpx; |
|||
margin-top: 4rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.poz_btn { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 12rpx 32rpx; |
|||
width: 100%; |
|||
background: #F6F6F6; |
|||
} |
|||
.btn_row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding-bottom: 30rpx; |
|||
.btn { |
|||
width: 47%; |
|||
height: 72rpx; |
|||
background: #1989FA; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
|
|||
&.border { |
|||
background: rgba(25, 137, 250, 0.1); |
|||
border: 2rpx solid $themC; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -1,256 +0,0 @@ |
|||
<template> |
|||
<view class="step1"> |
|||
|
|||
<pickDateTimer/> |
|||
|
|||
<view class="poz_btn"> |
|||
<view class="btn_row" > |
|||
<view class="border btn" @click="changeStep(3)">返回上一步</view> |
|||
<view class="btn" @click="show = true">确认预约</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<u-popup :show="show" mode="center" :round="8"> |
|||
<view class="popupCon"> |
|||
<view class="h2">再次确认预约信息</view> |
|||
<view class="content"> |
|||
<view class="row"> |
|||
<view class="lab">预约类型</view> |
|||
<view class="val">实操训练预约</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="lab">预约科目</view> |
|||
<view class="val">科目二</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="lab">预约场地</view> |
|||
<view class="val">xxx场地</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="lab">预约车辆</view> |
|||
<view class="val">02号车</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="lab">预约时间</view> |
|||
<view class="val">2023/08/08 08:00—9:00</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="btn_row"> |
|||
<view class="border btn" @click="show = false">返回修改</view> |
|||
<view class="btn">确认</view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
dateArr: [ |
|||
{week: '一', num: '08'}, |
|||
{week: '二', num: '09'}, |
|||
{week: '三', num: '10'}, |
|||
{week: '四', num: '11'}, |
|||
{week: '五', num: '12'}, |
|||
], |
|||
show: false |
|||
} |
|||
}, |
|||
methods: { |
|||
changeStep(val) { |
|||
this.$emit('changeStep', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.card { |
|||
width: 100%; |
|||
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; |
|||
.date { |
|||
width: 74rpx; |
|||
height: 100rpx; |
|||
border-radius: 16rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
&.active { |
|||
background: rgba(25,137,250,0.1); |
|||
border: 2rpx solid #1989FA; |
|||
color: $themC; |
|||
} |
|||
.week { |
|||
|
|||
} |
|||
|
|||
.num { |
|||
margin-top: 4rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
.timeCon { |
|||
padding: 0 24rpx 70rpx 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.5; |
|||
} |
|||
.lab { |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.time { |
|||
font-size: 24rpx; |
|||
margin-top: 4rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.poz_btn { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 12rpx 32rpx; |
|||
width: 100%; |
|||
background: #F6F6F6; |
|||
} |
|||
.btn_row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding-bottom: 30rpx; |
|||
.btn { |
|||
width: 47%; |
|||
height: 72rpx; |
|||
background: #1989FA; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
|
|||
&.border { |
|||
background: rgba(25, 137, 250, 0.1); |
|||
border: 2rpx solid $themC; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
.popupCon { |
|||
padding: 30rpx 50rpx; |
|||
|
|||
.h2 { |
|||
font-weight: 600; |
|||
color: #333333; |
|||
line-height: 70rpx; |
|||
font-size: 36rpx; |
|||
text-align: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.content { |
|||
padding-bottom: 20rpx; |
|||
|
|||
.row { |
|||
padding: 22rpx 0; |
|||
display: flex; |
|||
font-size: 28rpx; |
|||
align-items: center; |
|||
|
|||
.lab { |
|||
width: 180rpx; |
|||
color: #686B73; |
|||
|
|||
} |
|||
|
|||
.val { |
|||
flex: 1; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,49 @@ |
|||
<template> |
|||
<view class="vdo"> |
|||
<view class="coverBox"> |
|||
<view class="start"> |
|||
<image src="@/static/images/index/btn_bofang.png" mode=""></image> |
|||
</view> |
|||
<view class="cover"> |
|||
<image :src="item.videoCover" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
<view class="text oneRowText">{{ item.title }}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: ['item'] |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.coverBox { |
|||
width: 100%; |
|||
height: 168rpx; |
|||
background: $themC; |
|||
border-radius: 12rpx; |
|||
position: relative; |
|||
.start { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%,-50%); |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.cover { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
font-size: 24rpx; |
|||
padding: 20rpx 0 6rpx 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,9 @@ |
|||
## 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） |
|||
版本上线 |
|||
@ -0,0 +1,208 @@ |
|||
<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> |
|||
@ -0,0 +1,85 @@ |
|||
{ |
|||
"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" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,85 @@ |
|||
# 插件介绍 |
|||
|
|||
** 预览的文件地址必须是可以通过互联网访问的！！！ ** |
|||
|
|||
** 预览的文件地址必须是可以直接复制在浏览器地址中访问的！！！ ** |
|||
|
|||
## 本插件将于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