页面样式修改
This commit is contained in:
lxz
parent
62287bf07a
commit
5937dc9402
167
components/own-share/own-share.vue
Normal file
167
components/own-share/own-share.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<uni-popup ref="showshare" type="bottom" @change="change">
|
||||
<view class="uni-share">
|
||||
<!-- <text class="uni-share-title">分享到</text> -->
|
||||
<view class="uni-share-content">
|
||||
<view v-for="(item, index) in bottomData" :key="index" @tap="shareItems(item.name)"
|
||||
class="uni-share-content-box">
|
||||
<view class="uni-share-content-image">
|
||||
<image :src="item.icon" class="content-image" mode="widthFix" />
|
||||
</view>
|
||||
<text class="uni-share-content-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="uni-share-btn" @click="cancel('share')">取消</text>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
export default {
|
||||
props: {
|
||||
shareurl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
components: {
|
||||
uniPopup
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
bottomData: [{
|
||||
text: '刷新',
|
||||
icon: '/static/img/miniProgram.png',
|
||||
name: 'miniProgram'
|
||||
}
|
||||
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.shareurl)
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs['showshare'].open()
|
||||
})
|
||||
},
|
||||
change(e) {
|
||||
// console.log('是否打开:' + e.show)
|
||||
},
|
||||
shareItems(provider) {
|
||||
|
||||
|
||||
switch (provider) {
|
||||
|
||||
case 'miniProgram':
|
||||
|
||||
uni.reLaunch({
|
||||
url: this.shareurl,
|
||||
success: (res) => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs['showshare'].close
|
||||
})
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
|
||||
break;
|
||||
|
||||
case 'more':
|
||||
plus.share.sendWithSystem({
|
||||
type: "web",
|
||||
title: shareOPtions.shareTitle,
|
||||
thumbs: [shareOPtions.shareImage],
|
||||
href: shareOPtions.shareHref,
|
||||
content: shareOPtions.summary,
|
||||
})
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
cancel() {
|
||||
this.$refs['showshare'].close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 底部分享 */
|
||||
.uni-share {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-share-title {
|
||||
line-height: 60rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 15rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.uni-share-content-image {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.content-image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.uni-share-content-text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.uni-share-btn {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 14px;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
59
components/own-share/readme.md
Normal file
59
components/own-share/readme.md
Normal file
@ -0,0 +1,59 @@
|
||||
### 使用方法
|
||||
本组件依赖于 uni-popup 组件 跟 uni-transtion 组件
|
||||
|
||||
|
||||
``` js
|
||||
|
||||
<own-share ref="share" :shareSummary="shareSummary" :shareImage="image"
|
||||
:shareTitle="title" :shareHref="href"
|
||||
:miniProgram="miniProgram" :webUrl="webUrl"
|
||||
@shareSuccess="shareSuccess" @shareFail="shareFail"></own-share>
|
||||
|
||||
//先引入组件
|
||||
import ownShare from '@/components/own-share/own-share.vue'
|
||||
//然后使用
|
||||
components:{
|
||||
ownShare
|
||||
}
|
||||
|
||||
//打开分享
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.share.open()
|
||||
})
|
||||
//关闭分享
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.share.close()
|
||||
})
|
||||
//当然也可以用 easycom 直接使用
|
||||
```
|
||||
参数 <sub>分享只用于app</sub>
|
||||
|
||||
| 参数 | 类型 | 是否必填 |
|
||||
| ---- | ---- | ---- |
|
||||
| shareSummary | String | 只分享内容时必填 |
|
||||
| shareImage | String | 只分享图片时必填 |
|
||||
| shareTitle | String | 否 |
|
||||
| shareHref | String | 分享图文时必填 |
|
||||
| miniProgram | Object | 分享小程序必填 |
|
||||
|
||||
miniProgram参数 [详情](https://uniapp.dcloud.io/api/plugins/share?id=share)
|
||||
|
||||
| 参数 | 类型 | 是否必填 |
|
||||
| ---- | ---- | ---- |
|
||||
| id | String | 微信小程序原始id |
|
||||
| path | String | 点击链接进入的页面 |
|
||||
| type | Number | 微信小程序版本类型 |
|
||||
| webUrl | String | 兼容低版本的网页链接 |
|
||||
|
||||
| 事件 | 说明 |
|
||||
| ---- | ---- |
|
||||
| shareSuccess | 成功回调 |
|
||||
| shareFail | 失败回调 |
|
||||
|
||||
----
|
||||
**图标链接写在组件里面请自行修改(请看示例项目)**
|
||||
|
||||
|
||||
[了解更多uniapp分享,请参考官网](https://uniapp.dcloud.io/api/plugins/share)
|
||||
|
||||
|
||||
134
components/return/index.vue
Normal file
134
components/return/index.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="contentgb">
|
||||
<view class="iconfont icon-xiangzuo" v-if="isshow" style="margin-top: 10rpx;color: #fff;margin-left: 30rpx;"
|
||||
@click="close">
|
||||
</view>
|
||||
<view class="name" v-if="isshow">
|
||||
{{name}}
|
||||
</view>
|
||||
<view class="return_top">
|
||||
<view class="z-bootm-img1" @click="close()">
|
||||
<image src="@/static/img/fb1.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="z-bootm-l"></view>
|
||||
<view class="z-bootm-img2" @click="returnbom()">
|
||||
<image src="@/static/img/fb2.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<own-share ref="share" :shareurl="url"></own-share><strong></strong>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ownShare from '@/components/own-share/own-share.vue'
|
||||
export default {
|
||||
name: 'retuntop',
|
||||
comments: {
|
||||
ownShare
|
||||
},
|
||||
props: {
|
||||
isshow: {
|
||||
type: Boolean
|
||||
},
|
||||
name: {
|
||||
type: String
|
||||
},
|
||||
url: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.share.open()
|
||||
})
|
||||
},
|
||||
returnbom() {
|
||||
uni.sendHostEvent('closeApp', (ret) => {
|
||||
//发送消息成功回调
|
||||
//console.log('关闭应用' + JSON.stringify(ret));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentgb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 35rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.return_top {
|
||||
width: 166rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 44rpx 44rpx;
|
||||
margin-right: 30rpx;
|
||||
|
||||
position: relative;
|
||||
|
||||
.z-bootm-img1 {
|
||||
width: 41rpx;
|
||||
height: 13rpx;
|
||||
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 25rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.z-bootm-l {
|
||||
width: 1px;
|
||||
height: 32rpx;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
margin: auto 0;
|
||||
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 85rpx;
|
||||
}
|
||||
|
||||
.z-bootm-img2 {
|
||||
width: 38rpx;
|
||||
height: 34rpx;
|
||||
margin-top: -15rpx;
|
||||
margin-left: -15rpx;
|
||||
position: absolute;
|
||||
right: 25rpx;
|
||||
top: 25rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
264
components/uni-popup/uni-popup.vue
Normal file
264
components/uni-popup/uni-popup.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
|
||||
<uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
|
||||
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniTransition from '../uni-transition/uni-transition.vue'
|
||||
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件，为了解决遮罩弹层的问题
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [top|center|bottom] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @property {Boolean} animation = [ture|false] 是否开启动画
|
||||
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
||||
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniPopup',
|
||||
components: {
|
||||
uniTransition
|
||||
},
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
maskClass: {
|
||||
'position': 'fixed',
|
||||
'bottom': 0,
|
||||
'top': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler: function(newVal) {
|
||||
switch (this.type) {
|
||||
case 'top':
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
}
|
||||
break
|
||||
case 'bottom':
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'bottom': 0
|
||||
}
|
||||
break
|
||||
case 'center':
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
'display': 'flex',
|
||||
'flexDirection': 'column',
|
||||
/* #endif */
|
||||
'bottom': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'top': 0,
|
||||
'justifyContent': 'center',
|
||||
'alignItems': 'center'
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.animation) {
|
||||
this.duration = 300
|
||||
} else {
|
||||
this.duration = 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear(e) {
|
||||
// TODO nvue 取消冒泡
|
||||
e.stopPropagation()
|
||||
},
|
||||
open() {
|
||||
this.showPopup = true
|
||||
this.$nextTick(() => {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.showTrans = true
|
||||
}, 50);
|
||||
})
|
||||
this.$emit('change', {
|
||||
show: true
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$nextTick(() => {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.$emit('change', {
|
||||
show: false
|
||||
})
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
onTap() {
|
||||
if (!this.maskClick) return
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mask-ani {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.uni-top-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-bottom-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-center-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-500px);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(500px);
|
||||
}
|
||||
|
||||
.center {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-ani {
|
||||
/* transition: transform 0.3s;
|
||||
*/
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.uni-top-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-bottom-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-center-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
278
components/uni-transition/uni-transition.vue
Normal file
278
components/uni-transition/uni-transition.vue
Normal file
@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject" @click="change">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
/**
|
||||
* Transition 过渡动画
|
||||
* @description 简单过渡动画组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||
* @value fade 渐隐渐出过渡
|
||||
* @value slide-top 由上至下过渡
|
||||
* @value slide-right 由右至左过渡
|
||||
* @value slide-bottom 由下至上过渡
|
||||
* @value slide-left 由左至右过渡
|
||||
* @value zoom-in 由小到大过渡
|
||||
* @value zoom-out 由大到小过渡
|
||||
* @property {Number} duration 过渡动画持续时间
|
||||
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTransition',
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: '',
|
||||
ani: {
|
||||
in: '',
|
||||
active: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
'transition-duration': this.duration / 1000 + 's'
|
||||
}
|
||||
let transfrom = ''
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i)
|
||||
transfrom += line + ':' + styles[i] + ';'
|
||||
}
|
||||
return transfrom
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.timer = null
|
||||
// this.nextTick = (time = 50) => new Promise(resolve => {
|
||||
// clearTimeout(this.timer)
|
||||
// this.timer = setTimeout(resolve, time)
|
||||
// return this.timer
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit('click', {
|
||||
detail: this.isShow
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.isShow = true
|
||||
this.transform = ''
|
||||
this.ani.in = ''
|
||||
for (let i in this.getTranfrom(false)) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = 'fade-in'
|
||||
} else {
|
||||
this.transform += `${this.getTranfrom(false)[i]} `
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._animation(true)
|
||||
}, 50)
|
||||
})
|
||||
|
||||
},
|
||||
close(type) {
|
||||
this._animation(false)
|
||||
},
|
||||
_animation(type) {
|
||||
let styles = this.getTranfrom(type)
|
||||
// #ifdef APP-NVUE
|
||||
if (!this.$refs['ani']) return
|
||||
animation.transition(this.$refs['ani'].ref, {
|
||||
styles,
|
||||
duration: this.duration, //ms
|
||||
timingFunction: 'ease',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
}, () => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.transform = ''
|
||||
for (let i in styles) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = `fade-${type?'out':'in'}`
|
||||
} else {
|
||||
this.transform += `${styles[i]} `
|
||||
}
|
||||
}
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
|
||||
}, this.duration)
|
||||
// #endif
|
||||
|
||||
},
|
||||
getTranfrom(type) {
|
||||
let styles = {
|
||||
transform: ''
|
||||
}
|
||||
this.modeClass.forEach((mode) => {
|
||||
switch (mode) {
|
||||
case 'fade':
|
||||
styles.opacity = type ? 1 : 0
|
||||
break;
|
||||
case 'slide-top':
|
||||
styles.transform += `translateY(${type?'0':'-100%'}) `
|
||||
break;
|
||||
case 'slide-right':
|
||||
styles.transform += `translateX(${type?'0':'100%'}) `
|
||||
break;
|
||||
case 'slide-bottom':
|
||||
styles.transform += `translateY(${type?'0':'100%'}) `
|
||||
break;
|
||||
case 'slide-left':
|
||||
styles.transform += `translateX(${type?'0':'-100%'}) `
|
||||
break;
|
||||
case 'zoom-in':
|
||||
styles.transform += `scale(${type?1:0.8}) `
|
||||
break;
|
||||
case 'zoom-out':
|
||||
styles.transform += `scale(${type?1:1.2}) `
|
||||
break;
|
||||
}
|
||||
})
|
||||
return styles
|
||||
},
|
||||
_modeClassArr(type) {
|
||||
let mode = this.modeClass
|
||||
if (typeof(mode) !== "string") {
|
||||
let modestr = ''
|
||||
mode.forEach((item) => {
|
||||
modestr += (item + '-' + type + ',')
|
||||
})
|
||||
return modestr.substr(0, modestr.length - 1)
|
||||
} else {
|
||||
return mode + '-' + type
|
||||
}
|
||||
},
|
||||
// getEl(el) {
|
||||
// console.log(el || el.ref || null);
|
||||
// return el || el.ref || null
|
||||
// },
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.uni-transition {
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slide-top-in {
|
||||
/* transition-property: transform, opacity; */
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.slide-top-active {
|
||||
transform: translateY(0);
|
||||
/* opacity: 1; */
|
||||
}
|
||||
|
||||
.slide-right-in {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-right-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.slide-bottom-in {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.slide-bottom-active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.slide-left-in {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-left-active {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.zoom-in-in {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.zoom-out-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.zoom-out-in {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
</style>
|
||||
@ -3,8 +3,8 @@
|
||||
// "appid" : "__UNI__3A527D1",
|
||||
"appid": "__UNI__A495155",
|
||||
"description": "",
|
||||
"versionName": "1.3.1",
|
||||
"versionCode": 131,
|
||||
"versionName": "1.0.2",
|
||||
"versionCode": 102,
|
||||
"transformPx": false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus": {
|
||||
|
||||
10
pages.json
10
pages.json
@ -953,22 +953,22 @@
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#282828",
|
||||
"selectedColor": "#0122C7",
|
||||
"selectedColor": "#2B63E3",
|
||||
"borderStyle": "white",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [{
|
||||
"pagePath": "pages/oaHome/oaHome",
|
||||
"text": "首页",
|
||||
"iconPath": "static/tabs-icon/home.png",
|
||||
"selectedIconPath": "static/tabs-icon/home-a.png"
|
||||
"iconPath": "static/newWork/tabbar/index.png",
|
||||
"selectedIconPath": "static/newWork/tabbar/indexAct.png"
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
"pagePath": "pages/oaMy/oaMy",
|
||||
"text": "我的",
|
||||
"iconPath": "static/tabs-icon/my.png",
|
||||
"selectedIconPath": "static/tabs-icon/my-a.png"
|
||||
"iconPath": "static/newWork/tabbar/mine.png",
|
||||
"selectedIconPath": "static/newWork/tabbar/mineAct.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<template>
|
||||
|
||||
|
||||
|
||||
<view class="box">
|
||||
|
||||
<view class="" style="background-color: #2B63E3;height: var(--status-bar-height);" />
|
||||
<view class="head">
|
||||
|
||||
<view class="" style="float: right;margin-top: 20rpx;">
|
||||
<Myindex url='/pages/index/index' />
|
||||
</view>
|
||||
|
||||
<view class="head-content ">
|
||||
<view class="">
|
||||
@ -21,52 +19,37 @@
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view class="deposit">
|
||||
|
||||
|
||||
<view class="deposit-l">
|
||||
|
||||
<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/YJ.png'"
|
||||
shape="circle"></u--image>
|
||||
<view class="">
|
||||
<view class="" style="margin-left:20rpx ;">
|
||||
<view class="">
|
||||
押金
|
||||
</view>
|
||||
<view class="deposit-value">
|
||||
1000
|
||||
{{myOaInfo.deposit}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="deposit-l">
|
||||
|
||||
<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/GLHS.png'"
|
||||
shape="circle"></u--image>
|
||||
<view class="" style="margin-left:20rpx ;">
|
||||
<view class="">
|
||||
<view class="">
|
||||
押金
|
||||
管理户数
|
||||
</view>
|
||||
<view class="deposit-value">
|
||||
1000
|
||||
{{myOaInfo.user_information_count}}户
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<!--追加功能 -->
|
||||
<view class="">
|
||||
<u-empty icon="/static/newWork/index/empty.png" iconSize='200' width='300' height="300" marginTop='150'
|
||||
text="等待任务下发"></u-empty>
|
||||
<u-empty icon="/static/newWork/index/empty.png" iconSize='200' width='300' height="300" marginTop='130'
|
||||
textColor='#BFD7FF' text="等待任务下发"></u-empty>
|
||||
|
||||
</view>
|
||||
|
||||
@ -159,6 +142,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Myindex from '@/components/return/index.vue';
|
||||
import {
|
||||
getList
|
||||
} from "@/api/logistics.js";
|
||||
@ -197,7 +181,9 @@
|
||||
var jpushModule = uni.requireNativePlugin("JG-JPush");
|
||||
// #endif
|
||||
export default {
|
||||
|
||||
components: {
|
||||
Myindex
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -508,7 +494,7 @@
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
height: 137rpx;
|
||||
height: 128rpx;
|
||||
background-image: linear-gradient(to bottom, #D8EAFF 30%, #FFFFFF 100%);
|
||||
border-radius: 64rpx 64rpx 64rpx 64rpx;
|
||||
|
||||
@ -524,26 +510,30 @@
|
||||
}
|
||||
|
||||
.deposit {
|
||||
margin-top: 30rpx;
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
width: 750rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
padding: 0 30rpx;
|
||||
|
||||
|
||||
.deposit-l {
|
||||
width: 300rpx;
|
||||
height: 120rpx;
|
||||
width: 335rpx;
|
||||
height: 128rpx;
|
||||
background-color: white;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
box-shadow: 0.5rpx 0.5rpx 200rpx 0.5rpx rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 29rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.deposit-value {
|
||||
color: #336AE7;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,20 +1,26 @@
|
||||
<template>
|
||||
<view class="my">
|
||||
|
||||
<view class="head_box" style="position: relative;">
|
||||
<!-- <image class="head_img" src="../../static/img/home/head-bg.png"></image> -->
|
||||
<view style="position: absolute;bottom: 0;left: 0;overflow: hidden;border-radius: 0;">
|
||||
<hx-lottie :options="options" ref="lottie"
|
||||
style="width: 100vw;height: 460rpx;transform: scale(1.2);background-color: #0122c7;" />
|
||||
style="width: 100vw;height: 460rpx;transform: scale(1.2);background-color: #2B63E3;" />
|
||||
</view>
|
||||
<!-- <u-navbar v-if="uniMP" @leftClick="leftClick" bgColor="rgba(0,0,0,0)"
|
||||
leftIconColor=" #fff" :autoBack="false">
|
||||
</u-navbar> -->
|
||||
<!-- #ifdef APP-PLUS||H5 -->
|
||||
<view style="height: var(--status-bar-height)"></view>
|
||||
<view class="" style="float: right;">
|
||||
<Myindex url='/pages/index/index' />
|
||||
</view>
|
||||
|
||||
<view v-if="uniMP" style="height: 44px;">
|
||||
<u-icon name="arrow-left" color="#fff" size="20" @click="leftClick"></u-icon>
|
||||
</view>
|
||||
<view v-else style="height: 30rpx"></view>
|
||||
|
||||
<!-- <view style="height: 100rpx"></view> -->
|
||||
<!-- <view v-if="uniMP" style="height: 44px"></view> -->
|
||||
<!-- #endif -->
|
||||
@ -35,6 +41,7 @@
|
||||
<view v-else class="name_work">
|
||||
<view class="name">
|
||||
<text class="nickname">姓名:{{ oaUserInfo.nickname }}</text>
|
||||
<!-- （{{ oaUserInfo.admin_id?'超级管理员':'普通用户'}}） -->
|
||||
<!-- <text class="omit" v-if="oaUserInfo.admin.company">所属公司:{{ oaUserInfo.admin.company.company_name }}</text> -->
|
||||
</view>
|
||||
<view class="work">
|
||||
@ -42,10 +49,16 @@
|
||||
<view class="wr_t_left">电话:</view>
|
||||
<view class="wr_t_right">{{oaUserInfo.account}}</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="wr_item">
|
||||
<view class="wr_t_left">名称:</view>
|
||||
<view class="wr_t_right" v-if="oaUserInfo.company">
|
||||
{{oaUserInfo.company.company_name}}</view>
|
||||
</view> -->
|
||||
<view class="wr_item">
|
||||
<view class="wr_t_left">类型:</view>
|
||||
<view class="wr_t_right">
|
||||
|
||||
|
||||
{{oaUserInfo.user_role_name}}
|
||||
</view>
|
||||
</view>
|
||||
@ -84,6 +97,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Myindex from '@/components/return/index.vue';
|
||||
import {
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
@ -101,9 +115,10 @@
|
||||
} from '@/static/server/server.js'
|
||||
import bj from "@/static/animation/home.json"
|
||||
// import tabbar from '../components/tabbar'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// tabbar
|
||||
Myindex
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -142,8 +157,12 @@
|
||||
},
|
||||
myOaData() {
|
||||
const route = 'pages/oaMy/oaMy';
|
||||
|
||||
let arr = [];
|
||||
this.$store.state.config?.config?.menu?.forEach((item) => {
|
||||
|
||||
|
||||
|
||||
if (item.paths.includes(route)) {
|
||||
arr = item.children;
|
||||
}
|
||||
@ -227,6 +246,7 @@
|
||||
.head_box {
|
||||
position: relative;
|
||||
padding: 28rpx;
|
||||
padding-right: 0;
|
||||
width: 100vw;
|
||||
margin-bottom: 30rpx;
|
||||
// background-image: url('../../static/img/home/my_bg.png');
|
||||
@ -388,7 +408,7 @@
|
||||
margin-top: 84.21rpx;
|
||||
width: 694rpx;
|
||||
height: 84.21rpx;
|
||||
background: $theme-oa-color;
|
||||
background: #2B63E3;
|
||||
box-shadow: 0px 9px 26px 1px #E9EFF5;
|
||||
}
|
||||
</style>
|
||||
@ -22,6 +22,9 @@
|
||||
<u-empty icon="/static/img/empty/data.png" text="没有任务"></u-empty>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</block>
|
||||
<!-- <u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText"
|
||||
|
||||
BIN
static/img/fb1.png
Normal file
BIN
static/img/fb1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 446 B |
BIN
static/img/fb2.png
Normal file
BIN
static/img/fb2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
BIN
static/newWork/tabbar/indexAct.png
Normal file
BIN
static/newWork/tabbar/indexAct.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
BIN
static/newWork/tabbar/mineAct.png
Normal file
BIN
static/newWork/tabbar/mineAct.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Loading…
x
Reference in New Issue
Block a user