purchase/pages/csubstation/index.vue

<template>
	<view class="box">
		<u-button class="onCreateBox" shape="circle" :ripple="true" @click="onCreateBtnClick" :plain="false" mode="w">还未创建分站</u-button>
		<u-swiper :list="list" :effect3d="true" :border-radius="10" :effect3d-previous-margin="100" bgColor="transparent">
			<template v-slot:titleSlot="item">
				<view class="swiperContent">
					<view class="type">{{item.item.title}}</view>
					<view class="pece">{{item.item.pece}}</view>
				</view>
			</template>
		</u-swiper>
		<view class="titletip">
			<view class="line line-l"></view>
			<view>普通版权益</view>
			<view class="line line-r"></view>
		</view>
		<u-card :border="false" class="card">
			<template v-slot:body>
				<view v-for="(item, index) in listJurisdiction" :key="index">
					<list-item>
						<template v-slot:left>
							<view>{{item.title}}</view>
						</template>
						<template v-slot:right>
							<image :src="item.iconCheck ? checkBoxImg[0] : checkBoxImg[1]" style="width: 30rpx; height: 30rpx;"></image>
						</template>
					</list-item>
				</view>
			</template>
		</u-card>
		<u-button class="confim" @click="confim" shape="circle" :ripple="true" :plain="false">立即建站</u-button>
		<!-- <center-tip-dialog :show.sync="tipDialogShow" @gotoPay="gotoPay" label="您的余额不足请充值"></center-tip-dialog> -->
		<center-tip-dialog :show.sync="tipDialogShow" @gotoPay="gotoPay">
			<view>本次兑换将扣除您9元余额<br/>是否确认交易</view>
		</center-tip-dialog>
	</view>
</template>

<script>
	import listItem from '../../components/listitem/listItem.vue'
	import centerTipDialog from '../../components/select/csubstation/centerTipDialog.vue'
	import uSwiper from './swiper/swiper.vue'
	export default {
		name: 'createBefore',
		components: {
			listItem,
			centerTipDialog,
			uSwiper
		},
		data () {
			return {
				tipDialogShow: false,
				list: [
					{
						image: '../../static/img/fz_ptb/fz_ptb.png',
						title: '普通版分站',
						pece: '200元'
					},
					{
						image: '../../static/img/fz_zyb/fz_zyb.png',
						title: '专业版分站',
						pece: '400元'
					},
					{
						image: '../../static/img/fz_qjb/fz_qjb.png',
						title: '旗舰版分站',
						pece: '600元'
					}
				],
				checkBoxImg: ['../../static/img/fz_icon_xz/fz_icon_xz.png', '../../static/img/fz_icon_gb/fz_icon_gb.png'],
				listJurisdiction: [
					{
						title: '专属社区平台',
						iconCheck: true,
					},
					{
						title: '在线支付接口',
						iconCheck: false,
					},
					{
						title: '管理网站用户',
						iconCheck: false,
					},
					{
						title: '赚取用户提成',
						iconCheck: false,
					},
					{
						title: '自定义网站名称',
						iconCheck: false,
					},
					{
						title: '专属网站域名',
						iconCheck: false,
					},
					{
						title: '专属管理后台',
						iconCheck: false,
					},
					{
						title: '专享低价货源',
						iconCheck: false,
					},
					{
						title: '设置商品价格',
						iconCheck: false,
					},
					{
						title: '搭建下级分站',
						iconCheck: false,
					},
					{
						title: '赚取下级分站提成',
						iconCheck: false,
					},
					{
						title: '域名支持WWW访问',
						iconCheck: false,
					},
				]
			}
		},
		methods: {
			onCreateBtnClick () {
				
			},
			confim () {
				this.tipDialogShow = true
			},
			// 去充值
			gotoPay () {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-top: 20rpx
	}
	.swiperContent {
		text-align: center;
		& .type {
			display: inline-block;
			margin-top: 50rpx;
			width: 170rpx;
			height: 40rpx;
			font-weight: 500;
			background: #683724;
			border-radius: 100rpx;
		}
		& .pece {
			margin-top: 27rpx;
			height: 56rpx;
			font-size: 40rpx;
			font-weight: 500;
			color: #683724;
			line-height: 56rpx;
			letter-spacing: 1rpx;
		}
	}
	.onCreateBox {
		margin: 0 100rpx 40rpx 100rpx;
		height: 60rpx;
		background: #6C6269;
		font-size: 24rpx;
		color: #FEE4C5;
		&::after {
			border: none;
		}
	}
	.titletip {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #FEE4C5;
		& .line {
			width: 170rpx;
			height: 12rpx;
			background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, #897D82 100%);
			border-radius: 100rpx;
			&.line-l {
				margin-right: 24rpx;
			}
			&.line-r {
				background: linear-gradient(270deg, rgba(238, 238, 238, 0) 0%, #897D82 100%);
				margin-left: 24rpx;
			}
		}
	}
	.card {
		background-color: #2B3062;
		color: #FFFFFF;
		& /deep/ .item-box {
			padding: 7rpx;
		}
		& /deep/ .u-card__body {
			color: #FFFFFF;
		}
		& /deep/ .u-card__head{
			display: none;
		}
	}
	.confim {
		margin: 30rpx 45rpx 37rpx 45rpx;
		height: 90rpx;
		background: linear-gradient(270deg, #F4D8AB 0%, #EF6F5F 0%, #CD9C78 100%, #FB2636 100%);
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		&::after {
			border: none;
		}
	}
</style>