?
<template>
<view>
<!-- 消息 -->
<view class="">
<u-top-tips ref="uTips"></u-top-tips>
</view>
<!-- -->
<!-- 标签列表 -->
<u-gap bgColor="#f5f5f5" height="30"></u-gap>
<view class="pageView">
<!-- 标题 -->
<view class="ansHearview">
<view class="QleftName">
<u-section title="问题" :right="false"></u-section>
</view>
<view class="ansT">
<view class="ansInputs">
<u-input v-model="title" placeholder="请输入您的问题?" type="textarea" :auto-height="true" border="border" />
</view>
</view>
</view>
<!-- end -->
<u-gap bgColor="#f5f5f5" height="30"></u-gap>
<!-- 选项 -->
<view class="ansHearview">
<view class="QleftName">
<u-section title="回答" :right="false"></u-section>
</view>
<!-- 文本题 -->
<view class="ansT" v-if="typeName=='文本题'">
<view class="ansInput">
<!-- <dragSort :list="obj" :props="props" @change="onDragSortChange"></dragSort> -->
<view class="vInputs">
<u-input v-model="textTitle" disabled="disabled" placeholder="-" :value="textTitle" type="textarea"
:auto-height="true" border="border" />
</view>
</view>
</view>
<!-- 文本题end -->
<!-- 单选题 -->
<view class="ansT" v-if="typeName=='单选题'">
<view class="ansInput">
<!-- <dragSort :list="obj" :props="props" @change="onDragSortChange"></dragSort> -->
<view v-for="(item,index) in List" class="AnsIcon">
<view class="AnsIcons" @click="removeItem(item,index)">
<u-icon name="minus-circle" color="#C51A15" size="45"></u-icon>
</view>
<view class="vInput">
<u-input v-model="item.name" :value="item.name" type="text" border="border" />
</view>
</view>
</view>
<view class="optionView" @click='addItem'>
+ 添加选项
</view>
</view>
<!-- 单选题end -->
<!-- 单选题 -->
<view class="ansT" v-if="typeName=='多选题'">
<view class="ansInput">
<!-- <dragSort :list="obj" :props="props" @change="onDragSortChange"></dragSort> -->
<view v-for="(item,index) in List" class="AnsIcon">
<view class="AnsIcons" @click="removeItem(item,index)">
<u-icon name="minus-circle" color="#C51A15" size="45"></u-icon>
</view>
<view class="vInput">
<u-input v-model="item.name" :value="item.name" type="text" border="border" />
</view>
</view>
</view>
<view class="optionView" @click='addItem'>
+ 添加选项
</view>
</view>
<!-- 单选题end -->
</view>
<!-- end -->
<u-gap bgColor="#f5f5f5" height="30"></u-gap>
<!-- 设置 -->
<view class="ansHearview">
<view class="QleftName">
<u-section title="设置" :right="false"></u-section>
</view>
<view class="ansT">
<view class="ansInput">
<u-picker mode="selector" v-model="doctorshow" :default-selector="[0]" :range="selectorObj"
range-key="cateName" @confirm="getQues"></u-picker>
<view class="ulist" @click="doctorshow=true">
<view class="ulistName">
题目切换
</view>
<view class="ulistAView">
<view class="">
<u-icon :label="typeName" label-pos="left" color="#999" size="30" name="arrow-right"></u-icon>
</view>
</view>
</view>
<u-cell-item title="题目必答" :arrow="false">
<u-switch size="30" v-model="checked" @change="change"></u-switch>
</u-cell-item>
</view>
</view>
</view>
</view>
<!-- end -->
<!-- 保存 -->
<view class="subview">
<view class="subviewBtn" @click="getSubmit">
保存
</view>
</view>
<!-- end -->
</view>
</template>
<script>
</script>
<script>
import {
config
} from "../../static/js/config.js";
import dragSort from '../../components/drag-sort/index.vue'
export default {
components: {
dragSort
},
data() {
return {
doctorshow: false,
typeName: "文本题",
title: "",
textTitle: "",
selectorObj: [{
cateName: '文本题',
id: 1
},
{
cateName: '单选题',
id: 2
},
{
cateName: '多选题',
id: 3
}
],
List: [{
name: "选项"
}, {
name: "选项"
}],
id: "",
//
checked: false,
}
},
onLoad: function(options) {
var that = this;
this.typeName = options.typeName;
that.id = options.id;
},
methods: {
showToast(msg, type) {
this.$refs.uTips.show({
title: msg,
type: type
})
},
addItem: function(e) {
var temp = this.List;
var input = {
name: ""
};
temp.push(input);
this.List = temp;
},
/***** 删除最后一个组件，也可以修改删除指定组件*/
removeItem: function(item, index) {
var temp = this.List;
console.log(item, index);
temp.splice(index, 1);
this.List = temp;
// this.obj.splice(1,index)
},
// switch打开或者关闭时触发，值为true或者false
change(status) {
console.log(status);
},
/*
*题目类型
*/
getQues(e) {
console.log(e);
var that = this;
that.typeName = that.selectorObj[e].cateName;
},
// 保存
getSubmit() {
var that = this;
if (this.title == "") {
this.showToast("请输入问题!", "error");
return;
}
var datas = {
};
if (this.typeName == "文本题") {
if (this.title == "") {
this.showToast("请输入标题!", "info");
return;
}
datas = {
openid: "omgue4vK8mpc8Nw0MHaUsn3TjQfQ",
questionnaireid: that.id,
title: this.title,
type: 3,
typeName: this.typeName,
status: this.checked ? 1 : 0
};
}
if (this.typeName == "单选题") {
datas = {
openid: "omgue4vK8mpc8Nw0MHaUsn3TjQfQ",
questionnaireid: that.id,
title: this.title,
typeName: this.typeName,
optionArr: this.List,
type: 1,
status: this.checked ? 1 : 0
};
}
if (this.typeName == "多选题") {
datas = {
openid: "omgue4vK8mpc8Nw0MHaUsn3TjQfQ",
questionnaireid: that.id,
title: this.title,
typeName: this.typeName,
optionArr: this.List,
type: 2,
status: this.checked ? 1 : 0
};
}
console.log("data==>", datas);
uni.getStorage({
key: 'userList',
success: function(res) {
var userList = res.data.data;
console.log("存储数据==>", userList);
uni.request({
url: config.creatquestionnairequestion,
method: 'post',
data: datas,
success: (res) => {
if (res.data.code == 0) {
console.log("添加问卷题目==>", res);
uni.navigateTo({
url: "../QApage/QApage?id=" + that.id
})
} else {
uni.showToast({
mask: true,
icon: "none",
title: "网络异常,请联系管理员~",
duration: 2000
})
console.log("异常获取数据token==>", res)
}
},
fail: (err) => {
console.log("接口异常获取数据token==>", err)
}
})
}
})
console.log("提交给后端的数据==>", datas)
},
}
}
</script>
<style>
page {
background-color: #f5f5f5;
}
.ansHearview {
position: relative;
width: 100%;
}
.ansHead {
position: relative;
width: 95%;
color: #999;
margin: 0 auto;
padding: 15rpx 0rpx;
text-align: left;
}
.ansT {
position: relative;
width: 95%;
text-align: center;
margin: 0 auto;
padding-bottom: 30rpx;
background-color: #fff;
}
.ansInputs {
position: relative;
width: 90%;
margin: 0 auto;
}
.ansInput {
position: relative;
width: 90%;
margin: 0 auto;
}
/* 动态文本框 */
.AnsIcon {
position: relative;
width: 100%;
display: flex;
flex: 1;
margin-bottom: 20rpx;
}
.AnsIcons {
margin-right: 10rpx;
position: relative;
top: 18rpx;
}
/* 添加选项 */
.optionView {
position: relative;
color: #0062CC;
width: 100%;
border-top: 1rpx solid #f5f5f5;
padding-top: 20rpx;
}
.subview {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
z-index: 3;
padding: 30rpx 0rpx;
background-color: #fff;
}
.subviewBtn {
position: relative;
width: 90%;
height: 80rpx;
display: inline-block;
line-height: 80rpx;
color: #fff;
background-color: #0062CC;
border-radius: 15rpx;
}
/* 拖拽 */
.pageView {
position: relative;
margin-bottom: 230rpx;
}
.vInput {
position: relative;
width: 90%;
}
.vInputs {
position: relative;
width: 100%;
}
.ulist {
position: relative;
display: flex;
flex: 1;
width: 100%;
background-color: #fff;
height: 100rpx;
line-height: 100rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.ulistName {
position: absolute;
left: 30rpx;
}
.ulistAView {
position: absolute;
right: 20rpx;
display: flex;
flex: 1;
}
/* */
.mtagList {
background-color: #fff;
position: relative;
width: 95%;
margin: 0 auto;
}
.rowlike {
background-color: #fff;
display: table;
width: 100%;
padding-bottom: 35rpx;
}
.rowlike .label {
float: left;
/* width: 79px;
height: 25px;
line-height: 25px; */
text-align: center;
font-size: 13px;
margin-left: 11px;
margin-top: 12px;
overflow: hidden;
}
.spanBlock {
display: inline-block;
text-align: center;
/* width: 79px; */
border: 1rpx solid #ccc;
border-radius: 12rpx;
padding: 0rpx 12rpx;
height: 50rpx;
line-height: 50rpx;
}
.spanBlock.activew {
border: 0.5px solid #dd1a21;
color: #dd1a21;
background: #fff;
padding: 0rpx 12rpx;
height: 50rpx;
border-radius: 12rpx;
/* width: 79px; */
line-height: 50rpx;
}
.QleftName {
width: 95%;
margin: 0 auto;
background-color: #fff;
padding: 30rpx 0rpx;
}
</style>
