web-africa-h5/components/annuity/index.vue

<template>
	<view class="annuity-out">
		<view class="annuit-box mb20" v-if="userInfo.memberGrade != 0">
			<view class="d-b-c ww100 mb20">
				<view class="domation f28">
					<text class="f58 fb">{{ annuityParams.expireDateNumber }}</text>
					{{ $t("S_L_6") }}
				</view>
				<view class="annuity-btn" @click="toPayTree">{{ $t("w_0085") }}</view>
			</view>
			<view class="f28 gray3">{{ $t("fn_014") }}</view>
		</view>
		<view class="annuit-box">
			<view class="d-b-c ww100 mb20">
				<view class="domation f28">
					<text class="f58 fb">{{
            formatNum(annuityParams.resaleIncomeBonus)
          }}</text>
				</view>
				<u-icon size="64rpx" name="/static/icon/annuity-icon.png"></u-icon>
			</view>
			<view class="f28 gray3">{{ $t("fn_016") }}({{ currencyIcon() }})</view>
		</view>
		<Popup :show="isPopup" :width="560" :padding="0" @hidePopup="hidePopupFunc">
			<view class="d-e-c ww100">
				<view class="p20" @click="hidePopupFunc(true)"><text class="icon iconfont icon-guanbi"></text></view>
			</view>
			<view class="ww100 box-s-b" style="padding: 0 60rpx 48rpx 60rpx">
				<view class="goodsDiag">
					<view class="goodsDiag-title d-c-c">{{ $t("fn_017") }}</view>
					<view class="dis_a">
						<view class="d-b-c mb20">
							<view class="flex-label f28 gray3">{{ $t("MY_TH_2") }}:</view>
							<view class="flex-1"><u-number-box integer v-model="qnnuityNum" :min="1"></u-number-box>
							</view>
						</view>
						<view class="d-b-c">
							<!-- <view class="flex-label f28 gray3">待支付金额:</view> -->
							<view class="flex-1 tc">
								<text class="f36 fb domation">{{ currencyIcon()
                  }}{{ formatNum(qnnuityPrice * qnnuityNum) }}</text>
							</view>
						</view>
					</view>
				</view>
				<button class="s-pop-btn d-c-c" @click="payQnnuityFunc">
					{{ $t("w_0035") }}
				</button>
			</view>
		</Popup>
		<Popup :show="isNmber" :width="560" :padding="0" @hidePopup="hideNmberFunc">
			<view class="d-e-c ww100">
				<view class="p20" @click="hideNmberFunc(true)"><text class="icon iconfont icon-guanbi"></text></view>
			</view>
			<view class="ww100 box-s-b" style="padding: 0 60rpx 48rpx 60rpx">
				<view class="goodsDiag">
					<view :class="
              getlang() == '简体中文'
                ? 'goodsDiag-title1 d-c-c bhh'
                : 'goodsDiag-title1  bhh'
            ">{{ $t("fn_278") }}</view>
					<!-- <view class="d-e-e  mb20">
							<view class=" f22 gray6 ">{{ $t("fn_279") }}: 48{{ $t("fn_280")}}</view>
						</view> -->
					<view class="dis_a">
						<view class="d-b-c mb20">
							<view class="flex-1 tc">
								<text class="f36 gray6"> {{ $t("fn_112") }}</text><text class="f60 fb domation">{{
                  annuityParams.expireDateNumber
                }}</text><text class="f36 gray6">{{ $t("S_L_6") }}</text>
							</view>
						</view>
					</view>
				</view>
				<button class="s-pop-btn1 d-c-c bhh" @click="buyFunc">
					{{ $t("w_0163") }}
				</button>
			</view>
		</Popup>
	</view>
</template>

<script>
	import Popup from "@/components/uni-popup.vue";
	export default {
		components: {
			Popup,
		},
		data() {
			return {
				annuityParams: {
					resaleIncomeBonus: "",
					expireDateNumber: "",
				},
				isPopup: false,
				isNmber: false,
				qnnuityPrice: "",
				qnnuityNum: 1,
			};
		},
		props: ["userInfo"],
		created() {
			this.getData();
			console.log(this.userInfo, this.getlang(), "userInfo");
		},
		methods: {
			payQnnuityFunc() {
				this.isPopup = false;
				this.gotoPage(
					"/pages/index/tree-recharge?type=2&num=" +
					this.qnnuityNum +
					"&unitprice=" +
					this.qnnuityPrice
				);
			},
			buyFunc() {
				this.isNmber = false;
				uni.setStorageSync("isopen", false);
				this.getMemberRenewAmount();
			},
			hidePopupFunc(e) {
				if (e) {}
				this.qnnuityPrice = "";
				this.isPopup = false;
			},
			hideNmberFunc(e) {
				if (e) {}
				this.isNmber = false;
				uni.setStorageSync("isopen", false);
			},
			getData() {
				let self = this;
				self._get("member/api/member/get-member-annuity-time", {}, (res) => {
					self.annuityParams = res.data;
					if (
						self.annuityParams.expireDateNumber <= 60 &&
						uni.getStorageSync("isopen")
					) {
						self.isNmber = true;
					}
				});
			},
			toPayTree() {
				this.gotoPage('/pages/product/list?cid=33')
				// this.getMemberRenewAmount();
			},
			getMemberRenewAmount() {
				let self = this;
				self._get("member/api/member/get-member-renew-amount", {}, (res) => {
					this.qnnuityPrice = res.data;
					this.isPopup = true;
				});
			},
		},
	};
</script>

<style lang="scss">
	.bhh {
		white-space: nowrap;
		overflow: auto;
	}

	.driver {
		position: relative;
		margin: 20rpx;
		width: 100%;
		height: 1rpx;
		background-color: #cccccc;
		text-align: center;
		font-size: 16rpx;
	}

	.annuity-out {
		position: relative;
		z-index: 5;
		margin: 0 22rpx;
		margin-bottom: 20rpx;
	}

	.annuit-box {
		// width: 344rpx;
		// height: 222rpx;
		padding: 32rpx 27rpx 33rpx 27rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: column;
		border-radius: 15rpx;
		box-shadow: 0rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
		background: linear-gradient(0deg, #ffeae8 0%, #ffffff 29%, #ffffff 99%);

		// background: url('../../static/bg/annuity-bg.png');
		// background-size: cover;
		// background-repeat: no-repeat;
		// background-position: center;
		.annuity-btn {
			min-width: 126rpx;
			padding: 0 14rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			font-size: 28rpx;
			height: 56rpx;
			line-height: 1.5;
			color: #fff;
			// font-weight: bold;
			background: #f82c1a;
			border-radius: 28px;
		}
	}

	.f58 {
		font-size: 58rpx;
	}

	.flex-label {
		width: 150rpx;
		word-wrap: break-all;
		margin-right: 30rpx;
	}

	.u-number-box {
		width: 100%;
		justify-content: space-between;
	}

	.goodsDiag {
		margin-bottom: 50rpx;
	}

	.goodsDiag-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 60rpx;
	}

	.goodsDiag-title1 {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 50rpx;
	}

	.u-number-box::v-deep .u-number-box__input {
		flex: 1;
	}

	.s-pop-btn {
		width: 264rpx;
		height: 76rpx;
		background: #fb3024;
		border-radius: 38rpx;
		color: #fff;
		margin: 0 auto;
	}

	.s-pop-btn1 {
		width: 264rpx;
		height: 76rpx;
		background: #fb3024;
		border-radius: 28rpx;
		color: #fff;
		margin: 0 auto;
	}
</style>