164 lines
3.0 KiB
Vue
164 lines
3.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="codePopup tui-modal__container" :class="[isShowCode ? 'tui-modal-show' : '']" @touchmove.stop.prevent="moveHandle">
|
|||
|
|
<view class="tui-modal-box" :class="[isShowCode ? 'tui-modal-normal' : 'tui-modal-scale', isShowCode ? 'tui-modal-show' : '']">
|
|||
|
|
<view class="header acea-row row-between-wrapper">
|
|||
|
|
<view class="title on">员工推广码</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="acea-row row-center-wrapper mb-20 mt-28">
|
|||
|
|
<!-- #ifndef MP -->
|
|||
|
|
<w-qrcode :options="config.qrc"></w-qrcode>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef MP -->
|
|||
|
|
<image class="code-img" :src="codeImg" show-menu-by-longpress></image>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
<view class="tip">如遇到扫码失败</view>
|
|||
|
|
<view class="tip">请将屏幕调至最亮重新扫码</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="close">
|
|||
|
|
<view class="iconfont icon-ic_close1" @click="close"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="mark" v-if="isShowCode" @touchmove.stop.prevent="moveHandle"></view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'codeModal',
|
|||
|
|
props: {
|
|||
|
|
isShowCode: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
code: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
codeImg: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
config: {
|
|||
|
|
bar: {
|
|||
|
|
code: '',
|
|||
|
|
color: ['#000'],
|
|||
|
|
bgColor: '#FFFFFF', // 背景色
|
|||
|
|
width: 480, // 宽度
|
|||
|
|
height: 110 // 高度
|
|||
|
|
},
|
|||
|
|
qrc: {
|
|||
|
|
code: '123123',
|
|||
|
|
size: 380, // 二维码大小
|
|||
|
|
level: 3, //等级 0～4
|
|||
|
|
bgColor: '#FFFFFF', //二维码背景色 默认白色
|
|||
|
|
color: ['#333', '#333'] //边框颜色支持渐变色
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
code(newVal) {
|
|||
|
|
// #ifdef MP
|
|||
|
|
this.config.qrc.code = newVal;
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
console.log(this.code);
|
|||
|
|
// #ifndef MP
|
|||
|
|
this.config.qrc.code = this.code;
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
moveHandle() {},
|
|||
|
|
close() {
|
|||
|
|
this.$emit('update:isShowCode', false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.mark {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
z-index: 50;
|
|||
|
|
}
|
|||
|
|
.tui-modal__container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
visibility: hidden;
|
|||
|
|
z-index: 51;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-modal-box {
|
|||
|
|
position: relative;
|
|||
|
|
opacity: 0;
|
|||
|
|
visibility: hidden;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
transition: all 0.3s ease-in-out;
|
|||
|
|
width: 600rpx;
|
|||
|
|
padding: 40rpx;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
z-index: 9999;
|
|||
|
|
.tip {
|
|||
|
|
color: #999999;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.close {
|
|||
|
|
width: 520rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: -80rpx;
|
|||
|
|
.icon-ic_close1 {
|
|||
|
|
font-size: 52rpx;
|
|||
|
|
color: #cccccc;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-modal-scale {
|
|||
|
|
transform: scale(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-modal-normal {
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-modal-show {
|
|||
|
|
opacity: 1;
|
|||
|
|
visibility: visible;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.codePopup .header .title {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.code-img{
|
|||
|
|
width: 380rpx;
|
|||
|
|
height: 380rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|