uniapp-shikongwang/pages/center/bestar.vue

<template>
	<view>
		<view class="flex lf-p-30">
			<view>
				<image src="../../static/center/shop-logo.png" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image>
			</view>
			<view class="flex flex-direction lf-p-l-20 justify-center">
				<view class="lf-font-32 lf-m-b-10 text-black1 lf-line-2">时空网的内部网友</view>
				<view class="lf-font-28 lf-color-gray">会员未开通</view>
			</view>
		</view>
		<self-line/>
		<view>
			<view class="lf-p-t-30 lf-p-l-32 lf-flex-wrap">
				<view class="paynum">
					<view class="lf-color-white flex justify-center" style="background-color: #F93A3A;border-radius: 10rpx 0 10rpx 0;width: 168rpx;height: 46rpx;">
						<text class="lf-font-24" style="padding: 6rpx 12rpx;">成为分销达人</text>
					</view>
					<view class="lf-m-t-28 text-black lf-font-24 lf-m-l-20">
						需要支付
					</view>
					<view class="lf-m-l-20 lf-m-t-16">￥<text class="lf-font-60 lf-font-bold">9.9</text></view>
				</view>
			</view>
		</view>
		<view class="lf-p-l-32 lf-m-t-40 lf-font-32 text-black1 solid-bottom lf-p-b-20">
			支付方式
		</view>
		<view class="flex justify-between align-center text-center lf-p-l-32 lf-p-r-32 lf-p-t-30 lf-p-b-30 solid-bottom">
			<view class="flex justify-around align-center text-center">
				<view class="lf-row-center">
					<image src="../../static/center/loginout.png" mode="widthFix" style="width: 44rpx;height: 38rpx;"></image>
				</view>
				<view class="lf-font-38 lf-m-l-20 lf-w-100 text-black1">微信支付</view>
			</view>
			<view>
				<view>
					<image src="../../static/images/system/paysuccess.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
				</view>
			</view>
		</view>
		
		
		
		<view class="btn-bottom" style="bottom: 60rpx;">
			<view class="padding-lr-lg lf-m-b-18">
				<checkbox-group @change="checkboxChange" style="display: inline-block;">
					<checkbox class="lf-text-vertical" style="" :checked="checked"></checkbox>
				</checkbox-group>
				<view class="lf-m-l-10 lf-font-24 lf-color-gray" style="display: inline-block;">
					<text>已阅读并同意</text>
					<text @click="enterAgree" class="text-orange">《会员服务协议》</text>
				</view>
			</view>
			<view class="padding-lr-lg">
				<button class="cu-btn block bg-orange lg" style="border-radius: 42rpx;" @tap="subimitApply()">
					<text class="lf-font-32 text-white">购买并支付¥9.9</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false, // 是否勾选协议
			}
		},
		methods: {
			// 勾选协议发生变化
			checkboxChange(event){
				this.checked = event.detail.value.length > 0;
			},
			// 进入查看协议
			enterAgree(){
				this.$url('/pages/agreement/agreement?id='+ this.agreement.article_id);
			},
		}
	}
</script>

<style>
	.paynum {
		width: 280rpx;
		height: 280rpx;
		border: 1px solid #FE9903;
		background-color: #FFF4E4;
		border-radius: 10rpx;
	}
</style>