lucky_shop/pages_tool/member/cancelstatus.vue

<template>
	<view class="container" :style="themeColor">
		<view class="cancelstatus-wrap">
			<view class="cancelstatus-block">
				<view class="cancelstatus-box">
					<view class="cancelstatus-box-sort color-base-bg">1</view>
					<view class="cancelstatus-box-con">
						<view class="cancelstatus-box-name">{{ $lang('member.cancelstatus.step1Name') }}</view>
					<view class="cancelstatus-box-info">{{ $lang('member.cancelstatus.step1Desc') }}</view>
					</view>
					<view class="cancelstatus-box-line color-base-bg"></view>
				</view>
				<view class="cancelstatus-box">
					<view class="cancelstatus-box-sort color-base-bg">2</view>
					<view class="cancelstatus-box-con">
						<view class="cancelstatus-box-name">{{ $lang('member.cancelstatus.step2Name') }}</view>
					<view class="cancelstatus-box-info">{{ $lang('member.cancelstatus.step2Desc') }}</view>
					</view>
					<view class="cancelstatus-box-line color-base-bg" :class="{ 'opacity-4': state == 0 }"></view>
				</view>
				<view class="cancelstatus-box cancelstatus-box-last">
					<view class="cancelstatus-box-sort color-base-bg" :class="[ state == 1 ?  'opacity': 'opacity-4' ]">
						3
					</view>
					<view class="cancelstatus-box-con">
						<view class="cancelstatus-box-name">{{ $lang('member.cancelstatus.step3Name') }}</view>
					<view class="cancelstatus-box-info">{{ $lang('member.cancelstatus.step3Desc') }}</view>
					</view>
				</view>
			</view>
			<view class="cancelstatus-btn" v-if="state == 0">
				<button type="primary" @click="back">{{ $lang('member.cancelstatus.back') }}</button>
				<button class="color-base-bg" @click="revoke">{{ $lang('member.cancelstatus.revokeApplication') }}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import memberPublic from './public/js/member-public.js';

	export default {
		mixins: [memberPublic],
		data() {
			return {
				state: 0
			};
		},
		onLoad(option) {
			// 判断登录
			if (!this.storeToken) {
				// 跳登录入口 (mixin 提供, 内部带 800ms 防抖锁 + 跨平台分流:
				// 微信小程序 / 鸿蒙下跳首页 INDEX_PAGE_URL, 走 ns-login 原生授权弹窗;
				// H5 / APP 下跳原生登录页 LOGIN_PAGE_URL)
				this.redirectToLoginOnce();
			} else {
				this.getStatus();
			}
		},
		onShow() {
			this.getStatus();
		},
		methods: {
			getStatus() {
				this.$api.sendRequest({
					url: '/membercancel/api/membercancel/info',
					success: res => {
						if (res.code >= 0 && res.data) {
							this.state = res.data.status;
							if (this.state == -1) {
								this.$util.redirectTo('/pages_tool/member/cancelrefuse');
							}
						}

						if (res.code == -1) {
							// 跳登录入口 (mixin 提供, 内部带 800ms 防抖锁 + 跨平台分流)
							this.redirectToLoginOnce();
						}
					}
				});
			},
			back() {
				this.$util.redirectTo(this.$util.MEMBER_PAGE_URL);
			},
			revoke() {
				uni.showModal({
					title: this.$lang('member.cancelstatus.riskTip'),
					content: this.$lang('member.cancelstatus.revokeConfirm'),
					confirmColor: '#000000',
					success: res => {
						if (res.confirm) {
							this.$api.sendRequest({
								url: '/membercancel/api/membercancel/cancelApply',
								success: res => {
									if (res.code >= 0) {
										this.$util.redirectTo(this.$util.MEMBER_PAGE_URL);
									}
								}
							});
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.cancelstatus-wrap {
		.cancelstatus-block {
			padding: 50rpx;
		}

		.cancelstatus-box {
			position: relative;
			display: flex;
			height: 200rpx;

			.cancelstatus-box-sort {
				width: 36rpx;
				height: 36rpx;
				text-align: center;
				line-height: 36rpx;
				border-radius: 50%;
				color: #ffffff;
				margin-right: 17rpx;
				font-size: 24rpx;
			}

			.opacity {
				opacity: 1;

				&-4 {
					opacity: 0.4;
				}
			}

			.cancelstatus-box-name {
				font-size: 32rpx;
				line-height: 32rpx;
				margin-top: 3rpx;
			}

			.cancelstatus-box-info {
				margin-top: 15rpx;
				color: #666666;
				font-size: 28rpx;
			}

			.cancelstatus-box-line {
				position: absolute;
				width: 2rpx;
				height: 164rpx;
				top: 36rpx;
				left: 18rpx;
			}

			&.cancelstatus-box-last {
				height: 80rpx;
			}
		}

		.cancelstatus-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 150rpx;

			button {
				width: 300rpx;
				height: 80rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				margin: 0 15rpx;
				border-radius: $border-radius;
			}

			button[type='primary'] {
				background-color: unset !important;
				color: #333333;
				border: 2rpx solid #dddddd;
			}

			button:nth-child(2) {
				color: #ffffff;
			}
		}
	}
</style>