|
|
@@ -0,0 +1,189 @@
|
|
|
+<template>
|
|
|
+ <view class="pop-view" v-if='visible'>
|
|
|
+ <view class="pop-maskView" :style="{
|
|
|
+ 'background-color': maskBgColor,
|
|
|
+ zIndex: zIndex - 1
|
|
|
+ }" @tap.stop="handleMaskTap"
|
|
|
+ @touchmove.stop.prevent="moveHandle">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="pop-content">
|
|
|
+ <image class="backImg" src="https://dm.static.elab-plus.com/yezhu/h5/showGuideImg.png" mode="aspectFit"></image>
|
|
|
+ <view class="closeBtn" @click="hide">
|
|
|
+ <image class="closeImg" src="https://dm.static.elab-plus.com/yezhu/h5/icon_closeBtn.png" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="registBtn" @click="registAction">立即注册</view>
|
|
|
+ <view class="lookBtn" @click="hide">先去逛逛</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default{
|
|
|
+ props: {
|
|
|
+ title: String,
|
|
|
+ maskColor: {
|
|
|
+ type: String,
|
|
|
+ default: 'rgba(0, 0, 0, 0.3)'
|
|
|
+ },
|
|
|
+ zIndex: {
|
|
|
+ type: Number,
|
|
|
+ default: 999
|
|
|
+ },
|
|
|
+ maskTapHide: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isShowTitle: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isShowClose: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isShowConfirm: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isScannerOption:{
|
|
|
+ type:Boolean,
|
|
|
+ default:false
|
|
|
+ },
|
|
|
+ marginSize:{
|
|
|
+ type: String,
|
|
|
+ default: '20rpx'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ containerVisible: false,
|
|
|
+ maskBgColor: '',
|
|
|
+ selectValue: [0],
|
|
|
+ selIdx: 0,
|
|
|
+ color2:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let app = getApp();
|
|
|
+ this.globalData = app.globalData;
|
|
|
+ this.color2 = this.globalData.color2;
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ show() {
|
|
|
+ this.visible = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.maskBgColor = this.maskColor
|
|
|
+ this.containerVisible = true
|
|
|
+ }, 20)
|
|
|
+ },
|
|
|
+ hide() {
|
|
|
+ this.maskBgColor = ''
|
|
|
+ this.containerVisible = false
|
|
|
+ this.visible = false
|
|
|
+ this.$emit('close')
|
|
|
+ },
|
|
|
+ handleMaskTap() {
|
|
|
+ if (this.maskTapHide) {
|
|
|
+ this.hide()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ moveHandle() {},
|
|
|
+
|
|
|
+ registAction() {
|
|
|
+ this.hide()
|
|
|
+ this.$emit('registAction')
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ components:{
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .pop-view {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .pop-maskView {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-content {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1000;
|
|
|
+ width: 628rpx;
|
|
|
+ height: 894rpx;
|
|
|
+ top: calc((100% - 894rpx) / 2 - 50rpx);
|
|
|
+ left: calc((100% - 628rpx) / 2);
|
|
|
+
|
|
|
+ .backImg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .closeBtn {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1000;
|
|
|
+ right: 50rpx;
|
|
|
+ top: 100rpx;
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .closeImg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .registBtn {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0,0,0,0.16);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 36rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ text-align: center;
|
|
|
+ left: calc((100% - 280rpx) / 2 - 10rpx);
|
|
|
+
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #f07423;
|
|
|
+ letter-spacing: 0.72px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lookBtn {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: rgba(255,255,255,0.80);
|
|
|
+ line-height: 46rpx;
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ bottom: 46rpx;
|
|
|
+ right: 56rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
