4.页面绘制-脚本页面和个人中心页面
1.脚本页面
1.Subsection分段器
切换男频女频的分段器jiaoben.vue：
<template> <view> <u-subsection :animation="true" :list="list" :current="curNow" @change="sectionChange" active-color="#fa3534"></u-subsection> </view> </template> <script> export default { data() { return { list: [{name: '男频'}, {name: '女频'}], curNow: 0 } }, methods: { sectionChange(index) { this.curNow = index; console.log(this.curNow) } } } </script> <style> </style>
2.Field输入框和input框
加入输入框按钮和承载生成小说文本的input框，同时加入一些Gap间隔槽，提升结构美观，构成了脚本页面jiaoben.vue：
<template> <view> <u-gap height="80" bg-color="#fff"></u-gap> <u-divider color="#fa3534" half-width="80" border-color="#6d6d6d">自动写小说脚本</u-divider> <u-gap height="80" bg-color="#fff"></u-gap> <u-subsection :animation="true" :list="list" :current="curNow" @change="sectionChange" active-color="#fa3534"></u-subsection> <u-gap height="80" bg-color="#fff"></u-gap> <u-field v-model="name_1" label="角色甲" placeholder="请填角色甲名字"></u-field> <u-field v-model="name_2" label="角色乙" placeholder="请填角色乙名字"></u-field> <u-gap height="80" bg-color="#fff"></u-gap> <view class="btn"> <u-button type="error" size="medium">生成小说</u-button> </view> <u-gap height="80" bg-color="#fff"></u-gap> <u-input v-model="txt_value" type="textarea" :border="true" height="100" :auto-height="true" :maxlength="4000" spellcheck="false" /> </view> </template> <script> export default { data() { return { list: [{name: '男频'}, {name: '女频'}], curNow: 0, name_1:'张三', name_2:'铁锤', txt_value: '生成的文本内容', } }, methods: { sectionChange(index) { this.curNow = index; console.log(this.curNow) } } } </script> <style> .btn{ width: 100%; height: 100upx; display:flex; align-items: center; } </style>
效果图：
2.个人中心页面
1.自定义的头像版块+u-tabs标签功能
geren.vue：
<template> <view> <view class="waikuang"> <view class="neikuang"> <view class="zuo"> <image :src="touxiang_img" mode="scaleToFill"></image> </view> <view class="you" > <view class="user_name" v-if="!isLogin" @click="Login"> 点击登录 </view> <view class="user_name" v-if="isLogin"> {{username}} </view> </view> </view> </view> <u-tabs :list="list" :is-scroll="false" :current="curNow" active-color="#fa3534" count="cate_count" @change="change"></u-tabs> <u-empty v-if="!isLogin" text="尚未登录,无可显示数据" mode="list" margin-top=200></u-empty> </view> </template> <script> export default { data() { return { touxiang_img:"../../static/touxiang.png", isLogin:true, username:'已登录', list: [{name: '小红花',cate_count: 0}, {name: '我的主题',cate_count: 5},{name: '回复消息'},{name: '系统消息'}], curNow: 0, } }, methods: { change(index) { this.curNow = index; console.log(this.curNow) }, Login(){ console.log('登录') } } } </script> <style lang="scss" scoped> .waikuang{ width: 100%; height: 200upx; display: flex; align-items: center; justify-content: space-around; .neikuang{ width: 700upx; height: 160upx; background-image: linear-gradient(to right, #f4f4f5 ,#303133); border-radius: 10px; display: flex; align-items: center; .zuo{ width: 90upx; height: 90upx; margin-left: 50upx; image{ width: 100%; height: 100%; } } .you{ width: 500upx; height: 120upx; .user_name{ width: 200upx; height: 60upx; font-size: 16px; text-align: center; margin-top: 35upx; margin-left: 10upx; color: #fa3534; } } } } </style>
效果图：
开发已登录后的 消息组件 xiaoxi
<template> <view> <view class="waikuang"> <view class="neikuang"> <view class="zuo"> <image :src="touxiang_img" mode="scaleToFill"></image> </view> <view class="you" > <view class="user_name" v-if="!isLogin" @click="Login"> 点击登录 </view> <view class="user_name" v-if="isLogin"> {{username}} </view> </view> </view> </view> <u-tabs :list="list" :is-scroll="false" :current="curNow" active-color="#fa3534" count="cate_count" @change="change"></u-tabs> <u-empty v-if="!isLogin" text="尚未登录,无可显示数据" mode="list" margin-top=200></u-empty> <view class="xiaoxi" v-if="isLogin"> <view class="hezi"> <view class="weidu"> 未读 </view> <view class="zhengwen"> <view class="zhengwen_zuo"> 恭喜你，因回复帖子成功，获得了1朵小红花，目前你共有10朵小红花。 </view> <view class="zhengwen_you"> 2021-6-26 18:00:36 </view> </view> </view> <view class="hezi"> <view class="weidu" v-show="isLogin"> 未读 </view> <view class="zhengwen"> <view class="zhengwen_zuo"> 恭喜你，使用自动写小说脚本成功，扣除2朵小红花，目前还有0朵小红花。 </view> <view class="zhengwen_you"> 2021-6-26 18:00:36 </view> </view> </view> <view class="hezi"> <view class="weidu"> 未读 </view> <view class="zhengwen"> <view class="zhengwen_zuo"> 恭喜你回复帖子，获得1朵小红花。目前你拥有10朵小红花。 </view> <view class="zhengwen_you"> 2021-6-26 18:00:36 </view> </view> </view> </view> </view> </template> <script> export default { data() { return { touxiang_img:"../../static/touxiang.png", isLogin:true, username:'已登录', list: [{name: '小红花',cate_count: 0}, {name: '我的主题',cate_count: 5},{name: '回复消息'},{name: '系统消息'}], curNow: 0, } }, methods: { change(index) { this.curNow = index; console.log(this.curNow) }, Login(){ console.log('登录') } } } </script> <style lang="scss" scoped> .waikuang{ width: 100%; height: 200upx; display: flex; align-items: center; justify-content: space-around; .neikuang{ width: 700upx; height: 160upx; background-image: linear-gradient(to right, #f4f4f5 ,#303133); border-radius: 10px; display: flex; align-items: center; .zuo{ width: 90upx; height: 90upx; margin-left: 50upx; image{ width: 100%; height: 100%; } } .you{ width: 500upx; height: 120upx; .user_name{ width: 200upx; height: 60upx; font-size: 16px; text-align: center; margin-top: 35upx; margin-left: 10upx; color: #fa3534; } } } } .xiaoxi{ width: 100%; display: flex; flex-direction:column; align-items: center; .hezi{ width: 680upx; min-height: 100upx; margin-top: 20upx; border-bottom: 1px solid #000000; display: flex; justify-content: space-around; .weidu{ // 未读 width: 30upx; height: 100upx; line-height: 50upx; text-align: center; background-color: #fa3534; color: #fff; } .zhengwen{ width: 600upx; line-height: 50upx; padding-left: 25upx; .zhengwen_you{ text-align: right; color: #999999; } } } } </style>
效果图：
