<template> <view> <image class="width100" mode="widthFix" :src="imagewxUrl+imgadres" @click="showModal"></image> <image class="width100" mode="widthFix" :src="imagewxUrl+imgadres1" @click="jumpMp"></image> <view v-if="isShowModal"> <view class="masking" v-if="showMasking" :style="{'background-color': bgColor}"></view> <view class="model-wraper"> <view class="modal-title"> 亲,请务必输入云闪付绑定的手机号 </view> <view class="modal-body"> <input v-model="inputSerialNum" type="number" maxlength="11" style="padding: 10rpx;font-size: 30rpx;" class="uni-input" focus placeholder="请输入" /> </view> <view> <view class="btn cancel" :style="{'color': cancelTextColor}" @click="handleCancel">{{cancelText}} </view> <view class="btn confirm" :style="{'color': confirmTextColor}" @click="handleConfirm"> {{confirmText}} </view> </view> </view> </view> </view> </template> <script> import { setCacheParam, HandleCode } from '../../../Utils/Api.js'; let app = getApp(); export default { props: { // 是否显示蒙层 showMasking: { type: Boolean, default: true }, // 蒙层背景色 bgColor: { type: String, default: 'rgba(0,0,0,.6)' }, // 取消按钮文字 cancelText: { type: String, default: '取消' }, // 确定按钮文字 confirmText: { type: String, default: '确定' }, // 取消按钮文字颜色 cancelTextColor: { type: String, default: '#666' }, // 确定按钮文字颜色 confirmTextColor: { type: String, default: '#5999FF' } }, data() { return { imagewxUrl: app.globalData.imageWxImg, imgadres: 'union1.jpg?id=1', imgadres1: 'union2.jpg?id=2', codes: '', isShowModal: false, inputSerialNum: '', url: 'https://base.95516.com/s/wl/WebAPP/helpAgree/page/help/shareRutineHelp.html?params=eyJlbmNyeXB0QXBwSWQiOiI3MzcxZmM2M2JhNTRjODk1IiwidG9MaW5rIjoiaHR0cHMlM0ElMkYlMkZoc2cuZGN0cGF5LmNvbSUyRnVuaW9uUGF5JTJGIn0=' } }, onLoad() { var arr1 = window.location.href; var arr2 = arr1.split('='); var arr3 = arr2[2].split('#/'); this.codes = arr3[0]; uni.setStorage({ key: "h5code", data: arr3[0] }) }, methods: { showModal() { this.isShowModal = true; }, handleCancel() { this.$emit('onClickCancel', 'cancel') this.isShowModal = false; }, //跳转银联支付 handleConfirm() { this.isShowModal = false; this.$emit('onClickConfirm', this.inputSerialNum) if (!this.inputSerialNum) { uni.showToast({ title: '请输入银联绑定手机号', icon: 'none', duration: 2000 }) return; } let params = { key: this.inputSerialNum, value: this.codes } setCacheParam(params).then(res => { if (res.return_code == '000000') { location.href = this.url; } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }) }, //跳转到小程序 jumpMp() { if (!app.globalData.openId) { location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa075e8509802f826&redirect_uri=https%3A%2F%2Fhsg.dctpay.com%2FH5%2F%23%2Fpages%2Fgoods%2FexternalCoupon%2FexternalCoupon&response_type=code&scope=snsapi_base#wechat_redirect'; } else { uni.reLaunch({ url: '../../goods/externalCoupon/externalCoupon' }) } } } } </script> <style scoped> .masking { height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; z-index: 999; } .model-wraper { width: 600rpx; background-color: #fff; border-radius: 16rpx; position: absolute; z-index: 1000; top: 50%; left: 50%; margin-top: -161rpx; margin-left: -300rpx; box-shadow: #dcdcdc 0px 0px 20rpx; } .modal-title { height: 90rpx; line-height: 90rpx; width: 100%; text-align: center; font-size: 32rpx; color: #666; } .modal-body { padding: 30rpx 30rpx 80rpx 30rpx; } .btn { width: 300rpx; height: 90rpx; text-align: center; line-height: 90rpx; font-size: 32rpx; float: left; border-top: 1rpx solid #ddd; } .btn.cancel { width: 299rpx; border-right: 1rpx solid #dcdcdc; } </style>