lucky_shop/components-diy/diy-payment-qrcode.vue

<template>
	<view data-component-name="diy-payment-qrcode" class="payment-qrocde-wrap" :style="warpCss">
		<view class="payment-qrocde-box">
			<view class="qrocde-left">
				<view class="qrocde-desc">
					<text>{{ $lang('components-diy.diy-payment-qrcode.description') }}</text>
					<!-- <text class="iconfont icon-shuaxin"></text> -->
				</view>
				<view class="qrocde-action">
					<button type="primary" @tap.stop="toLink">
						<text class="iconfont icon-fukuanma"></text>
						<text class="action-name">{{ $lang('components-diy.diy-payment-qrcode.paymentCode') }}</text>
					</button>
					<button type="primary" @tap.stop="openPaymentPopup">
						<text class="iconfont icon-saomafu"></text>
						<text class="action-name">{{ $lang('components-diy.diy-payment-qrcode.scanToPay') }}</text>
					</button>
				</view>
			</view>
			<view class="qrocde-right">
				<text class="iconfont icon-zhifu"></text>
				<text class="name">{{ $lang('components-diy.diy-payment-qrcode.storePayment') }}</text>
			</view>
		</view>

		<view @touchmove.prevent.stop>
			<uni-popup ref="paymentPopup" type="center">
				<view class="payment-popup">
					<view class="head-wrap" @tap.stop="closePaymentPopup">
						<text>{{ $lang('components-diy.diy-payment-qrcode.popupTipTitle') }}</text>
						<text class="iconfont icon-close"></text>
					</view>
					<view class="content-wrap">{{ $lang('components-diy.diy-payment-qrcode.scanToPayTip') }}</view>
					<button type="primary" @tap.stop="closePaymentPopup">{{ $lang('components-diy.diy-payment-qrcode.gotIt') }}</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
// 付款码展示
import DiyMinx from './minx.js'
export default {
	name: 'diy-payment-qrcode',
	props: {
		value: {
			type: Object
		}
	},
	mixins: [DiyMinx],
	data() {
		return {};
	},
	created() { },
	computed: {
		warpCss() {
			var obj = '';
			return obj;
		}
	},
	watch: {
		// 组件刷新监听
		componentRefresh: function (nval) { }
	},
	methods: {
		toLink() {
			this.$util.redirectTo('/pages_tool/store/payment_qrcode');
		},
		scanCodeFn() {
			// #ifdef APP-PLUS
			this.toLink();
			// #endif
			// #ifndef H5
			// 允许从相机和相册扫码,h5端不起作用
			uni.scanCode({
				success: function (res) {
				}
			});
			// #endif
		},
		openPaymentPopup() {
			this.$refs.paymentPopup.open();
		},
		closePaymentPopup() {
			this.$refs.paymentPopup.close();
		}
	}
};
</script>

<style lang="scss">
.payment-qrocde-box {
	overflow: hidden;
	display: flex;
	background-color: #fff;
	border-radius: 16rpx;

	.qrocde-left {
		flex: 1;

		.qrocde-desc {
			margin-top: 20rpx;
			margin-bottom: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: $color-tip;
			font-size: $font-size-tag;

			.iconfont {
				margin-left: 10rpx;
				font-size: $font-size-tag;
				font-weight: bold;
			}
		}

		.qrocde-action {
			padding-bottom: 36rpx;
			display: flex;
			justify-content: center;

			button {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0;
				width: 230rpx;
				height: 86rpx;
				border-radius: 50rpx;

				&:first-of-type {
					margin-right: 46rpx;
					background-color: $base-color;
				}

				&:last-of-type {
					background-color: #999;
				}

				.iconfont {
					margin-right: 10rpx;
				}

				.action-name {
					font-size: 30rpx;
				}
			}
		}
	}

	.qrocde-right {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-left: 16rpx;
		width: 90rpx;
		z-index: 2;
		box-sizing: border-box;

		.name {
			font-size: $font-size-sub;
			writing-mode: tb-rl;
			color: #fff;
			letter-spacing: 6rpx;
		}

		.iconfont {
			color: #fff;
		}

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			width: 500rpx;
			height: 500rpx;
			border-radius: 50%;
			background-color: $base-color;
			transform: translateY(-50%);
			z-index: -1;
		}
	}
}

.payment-popup {
	padding: 0 30rpx 40rpx;
	background-color: #fff;

	.head-wrap {
		font-size: $font-size-toolbar;
		line-height: 100rpx;
		height: 100rpx;
		display: block;
		text-align: center;
		position: relative;
		border-bottom: 2rpx solid $color-line;
		margin-bottom: 20rpx;

		.iconfont {
			position: absolute;
			float: right;
			right: 0;
			font-size: $font-size-toolbar;
		}
	}

	.content-wrap {
		max-height: 600rpx;
		overflow-y: auto;
	}

	button {
		margin-top: 40rpx;
	}
}
</style>