目录
工作日志与问卷
我负责工作日志和问卷相关的样式设计，与后端数据库的交互交由队长负责。
一、工作日志
1.1工作日志
左边包括时间、编辑与删除按钮，右部分包括标题和详细内容。
部分样式如下，及效果图。
<view class="main">
<view class="log" v-for="(item,index) in userList" :key="index">
<view>
<view class="time">{{item.time}}</view>
<view class="btn">
<view class="edit-btn" @tap="editlog(item.id,item.title,item.details)">编辑</view>
<view class="delete-btn" @tap="deletelog(item.id)">删除</view>
</view>
</view>
<view class="log-content">
<view class="title">{{item.title}}</view>
<view class="details">{{item.details}}</view>
</view>
</view>
</view>
.log-content{
margin-top: 20rpx;
.title{
padding-left: 10rpx;
border-left: 3px solid $uni-color-success;
font-size: 40rpx;
font-weight: 600;
}
.details{
margin-top:10rpx;
padding-left: 10rpx;
border-left: 3px dotted $uni-color-success;
display: flex;
align-items: center;
padding-bottom: 20rpx;
font-size: 34rpx;
margin-right: 20rpx;
text-indent:2em;
border-bottom: 1px solid $uni-border-color;
}
}
1.2创建/修改工作日志
通过右上角添加日志的按钮和每个日志左边的的编辑按钮，会向创建/修改日志传递不同参数，加载时据此展示不同界面：
onLoad:function(e){
console.log(e);
this.logid=e.logid;
this.userid = e.userid;
if(this.logid > 0){
this.logTitle=e.logTitle;
this.logContent=e.logContent;
}
},
主界面用uni组件简单布置了标题和内容：
<view class="main" >
<uni-forms labelPosition="top">
<uni-forms-item label="标题">
<uni-easyinput v-model="logTitle" placeholder="请输入标题" />
</uni-forms-item>
<uni-forms-item label="内容" >
<uni-easyinput type="textarea" v-model="logContent" placeholder="请输入内容" />
</uni-forms-item>
</uni-forms>
<view class="logconfirm">
<view class="confirm-btn" @tap="logconfirm">确 定</view>
</view>
</view>
.main{
padding-top: 88rpx;
padding-left: 20rpx;
padding-right: 20rpx;
.logconfirm{
display: flex;
justify-content: center;
width: 100%;
font-size: 40rpx;
color:white;
.confirm-btn{
padding: 10rpx 20rpx 10rpx 20rpx;
background-color: $uni-color-success;
border-radius: 30rpx;
}
}
}
1.3删除日志
点击删除按钮弹出提示框，点击确认后调用相应函数进行删除。
<view>
<uni-popup ref="deleteConfirmAsk" type="dialog">
<uni-popup-dialog type="error" cancelText="取消" confirmText="确认" content="确认删除？" @confirm="deleteConfirm"></uni-popup-dialog>
</uni-popup>
</view>
deletelog:function(id){
this.$refs.deleteConfirmAsk.open();
this.logidToDel=id;
},
二、问卷
2.1设计问卷
根据项目内对问卷数据的设计，在首行放置了三个按钮点击添加相应题型，并可以增加、删除题目和选项，其中选择题选项至少要有两个，故当选项数量不大于2时，选项的“删除”按钮不出现。
<view class="choose" v-if="item.type!='Input'">
<view class="title">
<view class="questionid" v-if="item.type=='Radio'">{{index+1}}(单选)</view>
<view class="questionid" v-if="item.type=='Checkbox'">{{index+1}}(多选)</view>
<input placeholder="请输入题目" class="quextiontext" v-model="item.text"></input>
<view class="deletequestion" @tap="deletequestion(index)">删除</view>
</view>
<view class="options" v-for="(optionitem,optionindex) in item.optionList" :key="optionindex">
<input :placeholder="'请输入选项'+(optionindex+1)+'描述'" class="optiontext" v-model="optionitem.text"></input>
<view class="addoption" v-if="optionindex==item.optionList.length-1" @tap="addoption(index)">新增</view>
<view class="deleteoption" v-if="item.optionList.length>2" @tap="deleteoption(index,optionindex)">删除</view>
</view>
</view>
2.2填写问卷
考虑到问卷填写者的便利性，新建一个网页项目用以填写问卷。调用了uniapp的radio、checkbox和textarea组件。
<view class="content">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" title="问卷填写" />
</view>
<view class="questionnaireName">
{{name}}
</view>
<view v-for="(item,index) in questions" :key="index">
<view class="choose" v-if="item.type=='Radio'">
<view class="title">
<view class="questionid" >{{index+1}}(单选)</view>
<view class="quextiontext">
<view>{{item.text}}</view>
</view>
</view>
<radio-group @change="radioChange($event,index)">
<label class="uni-list-cell" v-for="(optionitem,optionindex) in item.options" :key="optionindex" >
<view>
<radio :value="optionitem.text"/>
</view>
<view>{{optionitem.text}}</view>
</label>
</radio-group>
</view>
<view class="choose" v-if="item.type=='Checkbox'">
<view class="title">
<view class="questionid">{{index+1}}(多选)</view>
<view class="quextiontext">
<view>{{item.text}}</view>
</view>
</view>
<view class="uni-list">
<checkbox-group @change="checkboxChange($event,index)">
<label class="uni-list-cell" v-for="(optionitem,optionindex) in item.options" :key="optionindex">
<view>
<checkbox :value="optionitem.text"/>
</view>
<view>{{optionitem.text}}</view>
</label>
</checkbox-group>
</view>
</view>
<view class="input" v-if="item.type=='Input'">
<view class="title">
<view class="questionid">{{index+1}}(主观)</view>
<view class="quextiontext">{{item.text}}</view>
</view>
<view class="textarea">
<textarea placeholder="请输入答案" @input="inputChange($event,index)"/>
</view>
</view>
</view>
<view class="submit-btn" @tap="confirmQ">
<view class="text">提交</view>
</view>
</view>radioChange: function(e,index) {
this.questions[index].answer=[];
let ans = {
content:e.detail.value,
}
this.questions[index].answer.push(ans);
},
checkboxChange: function(e,index) {
this.questions[index].answer=[];
for(let i=0;i<e.detail.value.length;i++){
let ans = {
content:e.detail.value[i],
}
this.questions[index].answer.push(ans);
}
},
inputChange:function(e,index){
this.questions[index].answer=[];
let ans = {
content:e.detail.value,
}
this.questions[index].answer.push(ans);
},
.questionnaireName{
font-size: 50rpx;
padding:10rpx 40rpx 10rpx 40rpx;
text-align: center;
}
.choose{
padding: 10rpx 10rpx 20rpx 10rpx;
border: 2px solid $uni-border-color;
margin:20rpx 20rpx 10rpx 20rpx;
.title{
.questionid{
text-align: center;
width:120rpx;
}
.quextiontext{
text-indent:2em;
margin-left: 20rpx;
}
}
.options{
padding-left: 30rpx;
margin-top: 10rpx;
display: flex;
.optionid{
padding-right: 20rpx;
}
}
}
.checkbox-btn{
justify-content: flex-start;
}
.input{
padding: 10rpx 10rpx 20rpx 10rpx;
border: 2px solid $uni-border-color;
margin:20rpx 20rpx 10rpx 20rpx;
.title{
.questionid{
text-align: center;
width:120rpx;
}
.quextiontext{
text-indent:2em;
margin-left: 20rpx;
}
}
.textarea{
margin:10rpx 20rpx 0rpx 20rpx;
padding: 10rpx 10rpx 10rpx 10rpx;
border: 1px solid $uni-border-color;
}
input{
width:100%;
border-bottom: 1px solid grey;
}
}
3459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
