lucky_shop/pages_tool/member/cancellation.vue

<template>
	<view class="container" :style="themeColor">
		<view class="agreement-box">
			<view class="agreement-intro">
				<view class="align-center agreement-title">{{ agreement.title }}</view>
				<rich-text class="agreement-content" :nodes="agreement.content"></rich-text>
			</view>

			<view class="agreement-btn">
				<view class="align-center agreement-btn-select">
					<text v-if="isSelect" class="iconfont icon-dui color-base-text" @click="changeSelect"></text>
					<text v-else class="iconfont icon-yuan_checkbox" @click="changeSelect"></text>
					<text class="agreement-text" @click="changeSelect">{{ $lang('member.cancellation.agreeTermsText') }}</text>
				</view>
				<button class="btn color-base-bg" @click="next">{{ $lang('member.cancellation.nextStep') }}</button>
			</view>
		</view>
	</view>
</template>

<script>
import htmlParser from '@/common/js/html-parser';
import memberPublic from './public/js/member-public.js';

export default {
	mixins: [memberPublic],
	data() {
		return {
			agreement: {},
			isSelect: false
		};
	},
	onLoad(option) {
		if (option.back) this.back = option.back;
		// 判断登录
		if (!this.storeToken) {
			// 跳登录入口 (mixin 提供, 内部带 800ms 防抖锁 + 跨平台分流:
			// 微信小程序 / 鸿蒙下跳首页 INDEX_PAGE_URL, 走 ns-login 原生授权弹窗;
			// H5 / APP 下跳原生登录页 LOGIN_PAGE_URL)
			this.redirectToLoginOnce();
		} else {
			this.getCancelAgreement();
		}
	},
	methods: {
		getCancelAgreement() {
			this.$api.sendRequest({
				url: '/membercancel/api/membercancel/agreement',
				success: res => {
					if (res.code >= 0) {
						this.agreement = res.data;
						if (this.agreement.content) this.agreement.content = htmlParser(this.agreement.content);
					} else if (res.code == -1) {
						// 跳登录入口 (mixin 提供, 内部带 800ms 防抖锁 + 跨平台分流)
						this.redirectToLoginOnce();
					}
				}
			});
		},
		changeSelect() {
			this.isSelect = this.isSelect == true ? false : true;
		},
		next() {
			if (this.isSelect) {
				this.$util.redirectTo('/pages_tool/member/assets');
			} else {
				this.$util.showToast({
					title: this.$lang('member.cancellation.pleaseAgreeFirst')
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.agreement-box {
	.align-center {
		text-align: center;
	}

	.agreement-intro {
		height: calc(100vh - 210rpx);
		padding-top: 40rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		box-sizing: border-box;
		overflow-y: auto;

		.agreement-title {
			font-size: 32rpx;
			line-height: 60rpx;
			margin-bottom: 10rpx;
		}

		.agreement-content {
			font-size: 24rpx;
			line-height: 44rpx;
		}
	}

	.agreement-btn {
		position: fixed;
		width: 100%;
		height: 210rpx;
		bottom: 0;
		padding-top: 16rpx;
		box-sizing: border-box;
		text-align: center;

		.agreement-btn-select {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.agreement-btn-select .iconfont {
			color: #838383;
		}

		.agreement-text {
			font-size: 28rpx;
			color: #838383;
			margin-left: 10rpx;
		}

		button {
			display: inline-block;
			margin-top: 20rpx;
			color: var(--btn-text-color);
			font-size: 28rpx;
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
}
</style>