This commit is contained in:
parent
491264f878
commit
017cc9d76d
|
|
@ -1,9 +1,13 @@
|
|||
<template>
|
||||
<view class="item">
|
||||
<view class="content">{{label}}</view>
|
||||
<view class="opear">
|
||||
<slot><u-input v-model="valueModel" type="text" class="input-c"/></slot>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<slot name="left">
|
||||
<view class="content">{{label}}</view>
|
||||
</slot>
|
||||
<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;
|
||||
|
|
|
|||
1
main.js
1
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'
|
||||
|
|
|
|||
|
|
@ -1,13 +1,49 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<view class="tip">
|
||||
可用字母，数字建议为2-5字，不能有标点符号（尽量简短，便于推广宣传）
|
||||
</view>
|
||||
<list-item class="item" label="管理员账号" v-model="adminacount"></list-item>
|
||||
<list-item class="item" label="管理员密码" v-model="adminacount"></list-item>
|
||||
<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 :model="formData" ref="uForm" :label-width="200" :error-type="['toast']"
|
||||
:label-style ="{
|
||||
'color': '#FFFFFF',
|
||||
'font-size': '28rpx',
|
||||
'font-weight': '400'
|
||||
}"
|
||||
>
|
||||
<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;
|
||||
height: 100%;
|
||||
font-size: 28px;
|
||||
& /deep/ .u-form-item {
|
||||
border-bottom: 1rpx solid #3A4361;
|
||||
&: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;
|
||||
& .tip {
|
||||
margin: 16px 0 30px;
|
||||
font-size: 22px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #C1C4E3;
|
||||
line-height: 30px;
|
||||
line-height: 40rpx;
|
||||
& /deep/ .uni-input-input {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #87A6ED;
|
||||
}
|
||||
& .item{
|
||||
border-top: 1rpx solid #3A4361;
|
||||
&:last-child {
|
||||
border-bottom: 1rpx solid #3A4361;
|
||||
& .right-box {
|
||||
flex: 1;
|
||||
& .item-box + .item-box {
|
||||
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;
|
||||
background: linear-gradient(102deg, #F4D8AB 0%, #EF6F5F 0%, #CD9C78 100%, #FB2636 100%);
|
||||
border-radius: 45px;
|
||||
font-size: 32px;
|
||||
height: 90rpx;
|
||||
background: linear-gradient(270deg, #F4D8AB 0%, #EF6F5F 0%, #CD9C78 100%, #FB2636 100%);
|
||||
border-radius: 45rpx;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
.uni-input-input {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.uni-input-placeholder.input-placeholder {
|
||||
color: #757896 !important;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Loading…
Reference in New Issue