X

components/listitem/listItem.vue

@@ -1,9 +1,13 @@
 <template>
-	<view class="item">
+	<view class="item-box">
-		<view class="content">{{label}}</view>
+		<slot name="left">
-		<view class="opear">
+			<view class="content">{{label}}</view>
-			<slot><u-input v-model="valueModel" type="text" class="input-c"/></slot>
+		</slot>
-		</view>
+		<slot name="right">
+			<view class="opear">
+				<u-input v-model="valueModel" :clearable="false" type="text" class="input-c"/>
+			</view>
+		</slot>
 	</view>
 </template>
 
@@ -12,7 +16,7 @@
 		name: 'listitem',
 		props: {
 			value: {
-				
+				type: [String, Number]
 			},
 			label: {
 				type: String
@@ -27,7 +31,7 @@
 					return this.value
 				},
 				set (val) {
-					this.$emit('update:value', val)
+					this.$emit('input', val)
 				}
 			}
 		},
@@ -38,7 +42,7 @@
 </script>
 
 <style scoped lang="scss">
-	.item {
+	.item-box {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;

main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App'
 import uView from "uview-ui";
 import './uni.scss'
+import './static/css/index.scss'
 Vue.config.productionTip = false
 
 App.mpType = 'app'

pages/csubstation/edit.vue

@@ -1,13 +1,49 @@
 <template>
 	<view class="box">
-		<view class="tip">
+		<u-form :model="formData" ref="uForm" :label-width="200" :error-type="['toast']"
-			可用字母，数字建议为2-5字，不能有标点符号（尽量简短，便于推广宣传）
+		:label-style ="{
-		</view>
+			'color': '#FFFFFF',
-		<list-item class="item" label="管理员账号" v-model="adminacount"></list-item>
+			'font-size': '28rpx',
-		<list-item class="item" label="管理员密码" v-model="adminacount"></list-item>
+			'font-weight': '400'
-		<list-item class="item" label="绑定QQ" v-model="adminacount"></list-item>
+		}"
-		<list-item class="item" label="网站名称" v-model="adminacount"></list-item>
+		>
-		<button class="confim">页面主操作 Loading</button>
+			<u-form-item label="二级域名" prop="adminacount">
+				<view class="right-box">
+					<list-item>
+						<template v-slot:left>
+							<u-input v-model="formData.random" :clearable="false" type="text" class="input-c" placeholder="输入你想要的二级前缀可用字母数字"/>
+						</template>
+						<template v-slot:right v-if="!queryData.Id">
+							<text class="domain-box-l-item">随机</text>
+						</template>
+					</list-item>
+					<list-item>
+						<template v-slot:left>
+							<u-input v-model="formData.domain" :clearable="false" @click.native="domainSelectClick" type="text" class="input-c" placeholder="域名" :disabled="true"/>
+						</template>
+						<template v-slot:right v-if="!queryData.Id">
+							<text @click="domainSelectClick">></text>
+						</template>
+					</list-item>
+				</view>
+			</u-form-item>
+			<view class="tip">
+				可用字母，数字建议为2-5字，不能有标点符号（尽量简短，便于推广宣传）
+			</view>
+			<u-form-item label="管理员账号" prop="adminacount">
+				<u-input v-model="formData.adminacount" :clearable="false" type="text" class="input-c" placeholder="输入要注册的用户名"/>
+			</u-form-item>
+			<u-form-item label="管理员密码" prop="adminpass">
+				<u-input v-model="formData.adminpass" :clearable="false" type="text" class="input-c" placeholder="输入管理员密码"/>
+			</u-form-item>
+			<u-form-item label="绑定QQ" prop="bingQQ">
+				<u-input v-model="formData.bingQQ" :clearable="false" type="text" class="input-c" placeholder="输入你的QQ号"/>
+			</u-form-item>
+			<u-form-item label="网站名称" prop="netName">
+				<u-input v-model="formData.netName" :clearable="false" type="text" class="input-c" placeholder="输入网站名称（如：xx业务网、xx代刷完）"/>
+			</u-form-item>
+			<button class="confim" @click="confim" v-if="!queryData.Id">确认</button>
+		</u-form>
 	</view>
 </template>
 
@@ -20,40 +56,93 @@
 		},
 		data () {
 			return {
-				adminacount: ''
+				formData: {
+				},
+				rules: {
+					adminacount: {required: true,
+					message: '请输入管理员密码',
+					trigger: ['blur', 'change']}
+				},
+				queryData: {}
 			}
+		},
+		methods: {
+			domainSelectClick () {
+				console.log('点击跳转')
+				// 跳转到域名选择页
+				// uni.navigateTo({})
+			},
+			// 确认按钮
+			confim () {
+				console.log(this.formData)
+				this.$refs.uForm.validate(valid => {
+					if (valid) {
+						console.log('验证通过');
+					} else {
+						console.log('验证失败');
+					}
+				})
+			},
+			// 查看时加载
+			initData (queryData) {
+				
+			}
+		},
+		onReady() {
+			this.$refs.uForm.setRules(this.rules)
+			this.initData()
+			console.log('onReady', this.queryData)
+		},
+		onLoad(option) {
+			console.log(option)
+			if (Object.getOwnPropertyNames(option).length !== 0) {
+				let o = JSON.parse(encodeURIComponent(option))	
+			}
+			// this.queryData.Id = 'id'
+			console.log('load')
 		}
 	}
 </script>
 
 <style scoped lang="scss">
 	.box {
-		padding: 20px 20px 0 20px;
+		& /deep/ .u-form-item {
-		height: 100%;
+			border-bottom: 1rpx solid #3A4361;
-		font-size: 28px;
+			&:first-child {
+				border-top: 1rpx solid #3A4361;
+			}
+		}
+		padding: 20rpx;
+		font-size: 28rpx;
 		font-family: PingFangSC-Regular, PingFang SC;
 		font-weight: 400;
 		color: #FFFFFF;
-		line-height: 40px;
+		line-height: 40rpx;
-		& .tip {
+		& /deep/ .uni-input-input {
-			margin: 16px 0 30px;
+			font-size: 24rpx;
-			font-size: 22px;
+			font-weight: 400;
-			font-family: PingFangSC-Regular, PingFang SC;
+			color: #87A6ED;
-			color: #C1C4E3;
-			line-height: 30px;
 		}
-		& .item{
+		& .right-box {
-			border-top: 1rpx solid #3A4361;
+			flex: 1;
-			&:last-child {
+			& .item-box + .item-box {
-				border-bottom: 1rpx solid #3A4361;
+				border-top: 1rpx solid #3A4361;
 			}
+			color: #FFFFFF;
+		}
+		& .tip {
+			margin: 16rpx 0 30rpx;
+			font-size: 22rpx;
+			color: #C1C4E3;
+			line-height: 30rpx;
 		}
 		& .confim {
 			margin-top: 150rpx;
-			height: 90px;
+			height: 90rpx;
-			background: linear-gradient(102deg, #F4D8AB 0%, #EF6F5F 0%, #CD9C78 100%, #FB2636 100%);
+			background: linear-gradient(270deg, #F4D8AB 0%, #EF6F5F 0%, #CD9C78 100%, #FB2636 100%);
-			border-radius: 45px;
+			border-radius: 45rpx;
-			font-size: 32px;
+			font-size: 32rpx;
+			color: #FFFFFF;
 		}
 	}
 </style>

pages/csubstation/index.vue

@@ -1,8 +1,160 @@
 <template>
+	<view class="box">
+		<u-button class="onCreateBox" shape="circle" :ripple="true" @click="onCreateBtnClick" :plain="true">还未创建分站</u-button>
+		<u-swiper :list="list" :effect3d="true" :border-radius="10" :effect3d-previous-margin="120" bgColor="transparent"></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 in listJurisdiction">
+					<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>
+	</view>
 </template>
 
 <script>
+	import listItem from '../../components/listitem/listItem.vue'
+	export default {
+		name: 'createBefore',
+		components: {
+			listItem
+		},
+		data () {
+			return {
+				list: [
+					{
+						image: '../../static/img/fz_ptb/fz_ptb.png',
+						title: ''
+					}
+				],
+				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 () {
+				
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.box {
+		padding-top: 20rpx
+	}
+	.onCreateBox {
+		margin: 0 100rpx 40rpx 100rpx;
+		height: 60rpx;
+		background: #6C6269;
+		font-size: 24rpx;
+		color: #FEE4C5;
+	}
+	.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;
+	}
 </style>

static/css/index.scss

@@ -0,0 +1,6 @@
+.uni-input-input {
+	color: #FFFFFF;
+}
+.uni-input-placeholder.input-placeholder {
+	color: #757896 !important;
+}