<template>
<view class="container container335134">
<u-form-item labelWidth="auto" class="diygw-col-24" label="复选按钮" labelPosition="top" prop="ucheckbox">
<diy-checkbox class="diygw-col-24" mode="checkbox" v-model="ucheckbox" :list="ucheckboxDatas" @change="changeUcheckbox"> </diy-checkbox>
</u-form-item>
<u-form-item labelWidth="auto" class="diygw-col-24" label="反馈类型" labelPosition="top" prop="ucheckbox1">
<diy-checkbox class="diygw-col-24" radius="8px" col="6" mode="radio" v-model="ucheckbox1" :list="questionTypes1" @change="changeUcheckbox1">
<template v-slot:item="{ item, index }" >
<view class="flex text-left flex-content diygw-col-24">
<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex1-clz">
<text class="flex icon1 diygw-col-0" :class="[item.icon]"></text>
<text class="diygw-col-0 text-clz">
{{ item.title }}
</text>
</view>
</view>
</template>
</diy-checkbox>
</u-form-item>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: { isshow: false },
swipersNum: 1,
swipers: {
rows: [
{
id: 0,
title: '',
remark: '',
img: '',
path: null,
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null
}
],
total: 0,
code: 0,
msg: ''
},
noticesNum: 1,
notices: {
rows: [
{
id: 0,
title: '',
remark: '',
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null
}
],
total: 0,
code: 0,
msg: ''
},
huodongsNum: 1,
huodongs: {
rows: [
{
id: 0,
title: '',
remark: '',
starttime: null,
endtime: '',
address: null,
num: 0,
views: 0,
baomingnum: 0,
imgs: null,
img: '',
content: '',
fields: '',
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null,
baomingEndtime: null
}
],
total: 0,
code: 0,
msg: ''
},
ucheckboxDatas: [
{ value: '1', label: '选项一', disabled: false },
{ value: '2', label: '选项二', disabled: false },
{ value: '3', label: '选项三', disabled: false }
],
ucheckbox: ['1'],
questionTypes1: [
{ value: '1', icon: 'diy-icon-safe', title: '上传' },
{ value: '2', icon: 'diy-icon-pic', title: '识别'},
{ value: '3', icon: 'diy-icon-mail', title: '其他' },
{ value: '4', icon: 'diy-icon-home', title: '首页' }
],
ucheckbox1: '1'
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
methods: {
async init() {
this.swipersApi();
this.noticesApi();
await this.huodongsApi();
},
// 轮播数据 API请求方法
async swipersApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/cms/api.swiper/list';
let http_data = {
pageNum: this.swipersNum,
pageSize: 10,
pageSize: param.pageSize || '5'
};
let http_header = {};
let swipers = await this.$http.post(http_url, http_data, http_header, 'json');
this.swipers = swipers;
this.globalData.isshow = true;
},
// 公告数据 API请求方法
async noticesApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/cms/api.notice/list';
let http_data = {
pageNum: this.noticesNum,
pageSize: 10,
pageSize: param.pageSize || '5'
};
let http_header = {};
let notices = await this.$http.post(http_url, http_data, http_header, 'json');
this.notices = notices;
},
// 活动数据 API请求方法
async huodongsApi(param) {
let thiz = this;
param = param || {};
//如果请求要重置页面，请配置点击附加参数refresh=1 增加判断如输入框回调param不是对象
if (param.refresh || typeof param != 'object') {
this.huodongsNum = 1;
}
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/cms/api.huodong/list';
let http_data = {
pageNum: this.huodongsNum,
pageSize: 10
};
let http_header = {};
http_data.baomingEndtime_gt = this.$tools.formatDateTime(new Date());
let huodongs = await this.$http.post(http_url, http_data, http_header, 'json');
let datarows = huodongs.rows;
if (http_data.pageNum == 1) {
this.huodongs = huodongs;
} else if (datarows) {
let rows = this.huodongs.rows.concat(datarows);
huodongs.rows = rows;
this.huodongs = Object.assign(this.huodongs, huodongs);
}
if (datarows && datarows.length > 0) {
this.huodongsNum = this.huodongsNum + 1;
}
this.globalData.isshow = true;
},
// 打开链接 自定义方法
async openFunction(param) {
let thiz = this;
let path = param && (param.path || param.path == 0) ? param.path : thiz.item.path || '';
if (path) {
this.navigateTo({
type: 'page',
url: path
});
}
},
changeUcheckbox(evt) {},
changeUcheckbox1(evt) {}
},
onPullDownRefresh() {
// 活动数据 API请求方法
this.huodongsNum = 1;
this.huodongsApi();
uni.stopPullDownRefresh();
},
onReachBottom() {
// 活动数据 API请求方法
this.huodongsApi();
}
};
</script>
<style lang="scss" scoped>
.flex1-clz {
padding-top: 16rpx;
padding-left: 16rpx;
padding-bottom: 16rpx;
padding-right: 16rpx;
}
.icon1 {
font-size: 64rpx;
}
.text-clz {
margin-left: 0rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 0rpx;
}
.container335134 {
}
</style>
<template>
<view class="diy-checkbox diygw-col-24" :class="{'scroll-view':horizontal}" :style="{'--active-color':activeColor,'--active-bg-color':activeBgColor,'--item-color':itemColor,'--item-bg-color':itemBgColor,'--item-border-color':itemBorderColor,'--item-disabled-bg-color':itemDisableBgColor,'--item-disabled-color':itemDisableColor,'--item-radius':radius}">
<view v-for="(item,i) in renderList" class="diy-checkbox-item" :class="'diygw-'+col" :key="i">
<view class="item" :class="{
'noslot':!$slots.default && !$slots.$default,
'nogouxuan':!isGouxuan,
'disabled':item[disabledField]||isDisabled,
'active':item.checked,
}" :data-i="i" @tap="selectItem" :data-id="item[valueField]">
<slot style="width: 100%;" name="item" :item="item" :index="i">{{item[labelField]}}</slot>
</view>
</view>
</view>
</template>
<script>
export default {
emits: ["update:modelValue", "change"],
props: {
// 通过双向绑定控制组件的弹出与收起
// 绑定的值
value: {
type: [String, Number,Array],
default: []
},
// 通过双向绑定控制组件的弹出与收起
// 绑定的值
modelValue: {
type: [String, Number,Array],
default: []
},
isSlot:{
},
//选择类型
mode:{
type:String,
default:'checkbox' //type:checkbox 或者radio
},
valueField:{
type:String,
default: "value"
},
labelField:{
type:String,
default: "label"
},
disabledField:{
type:String,
default: "disabled"
},
//布局占位
col:{
type:String,
default: "8"
},
// 选中颜色
activeColor: {
type: String,
default: "#19be6b"
},
// 选中背景颜色
activeBgColor: {
type: String,
default: "#f5fff9"
},
// 默认颜色
itemColor:{
type: String,
default: "#333333"
},
// 默认边框颜色
itemBorderColor:{
type: String,
default: "#e5e5e5"
},
// 默认背景颜色
itemBgColor:{
type: String,
default: "#fefefe"
},
// 禁止背景颜色
itemDisableBgColor:{
type:String,
default:'#f1f1f1'
},
// 禁止字体颜色
itemDisableColor:{
type:String,
default:'#d8d8d8'
},
// 列数据
list: {
type: Array,
default () {
return [];
}
},
//最大可选
maxSize:{
type:Number,
default:0
},
// //是否所有禁止
allDisabled:{
type:Boolean,
default:false
},
//圆角大小
radius:{
type:String,
default:'0px'
},
//强制水平,如开启后，会水平滚动
horizontal:{
type:Boolean,
default:false
},
//是否钩选
isGouxuan:{
type:Boolean,
default:true
}
},
data() {
return {
renderList: [],
isDisabled: false,
uForm: {
inputAlign: "",
clearable: ""
}
};
},
watch: {
// 在select弹起的时候，重新初始化所有数据
value: {
immediate: true,
handler(val) {
setTimeout(() => this.init(), 10);
}
},
modelValue: {
immediate: true,
handler(val) {
setTimeout(() => this.init(), 10);
}
},
list: {
immediate: true,
deep:true,
handler(val) {
setTimeout(() => this.init(), 10);
}
},
},
mounted() {
this.init()
},
methods: {
init() {
this.renderList = JSON.parse(JSON.stringify(this.list))
let value = []
// #ifndef VUE3
if(this.mode=='radio'){
value = [this.value];
}else{
value = this.value;
}
// #endif
// #ifdef VUE3
if(this.mode=='radio'){
value = [this.modelValue];
}else{
value = this.modelValue;
}
// #endif
this.isDisabled = this.allDisabled
this.renderList.forEach(item => {
item.checked = value.includes(item[this.valueField])
})
},
emitSelect(){
const values = []
this.renderList.forEach(item => {
if (item.checked) {
values.push(item[this.valueField])
}
})
if(this.mode=='radio'){
if(values.length>0){
this.$emit("update:modelValue", values[0]);
this.$emit("change", values[0]);
}else{
this.$emit("update:modelValue", undefined);
this.$emit("change", undefined);
}
}else{
this.$emit("update:modelValue", values);
this.$emit("change", values);
}
},
/* 切换 */
selectItem(e) {
let i = Number(e.currentTarget.dataset.i);
if (this.isDisabled||this.renderList[i][this.disabledField]) {
return;
}
/* 单选框 */
if (this.mode == 'radio') {
this.index = i;
let checked = this.renderList[i].checked
this.renderList.forEach(item => {
item.checked = false
})
this.renderList[i].checked = !checked
this.emitSelect()
return;
}
/* 复选框 */
if(this.renderList[i].checked){
this.renderList[i].checked = !this.renderList[i].checked
this.emitSelect()
}else{
if(this.maxSize){
let pickerSize = 0;
this.renderList.forEach((item,index)=>{
if(item.checked){
pickerSize++;
}
});
// 当已选值数量 >= 允许的最大选择值时触发
if(pickerSize >= this.maxSize){
uni.$u.toast('超出最大选择')
return;
}
}
this.renderList[i].checked = !this.renderList[i].checked
this.emitSelect()
}
},
/* 全部选中 */
checkAll() {
if (this.isDisabled) {
return;
}
if (this.mode == 'radio') {
return null;
}
},
/* 取消全部选中 */
cancelAll() {
if (this.isDisabled) {
return;
}
if (this.mode == 'radio') {
this.index = -1;
return null;
}
this.renderList.forEach(item => {
item.checked = false
})
this.emitSelect()
},
/* 反选全部 */
invertAll() {
if (this.isDisabled) {
return;
}
if (this.mode == 'radio') {
this.index = -1;
return null;
}
this.renderList.forEach(item => {
item.checked = !item.checked
})
this.emitSelect()
},
/* 禁用 */
disabled(flag = undefined) {
this.isDisabled = flag;
}
}
};
</script>
<style lang="scss">
/* #ifdef MP-WEIXIN */
.diy-checkbox .item > view {
width:100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-radius: var(--item-radius);
border: var(--item-border-color) solid 1px;
background-color: var(--item-bg-color);
position: relative;
overflow: hidden;
.flex-content{
width:100%;
height:100%;
}
}
.diy-checkbox .item.active> view {
background-color: var(--active-bg-color);
color: var(--active-color);
border: var(--active-color) solid 1px;
&::before {
content: '';
display: block;
width: 20px;
height: 20px;
background-color: var(--active-color);
position: absolute;
right: -1px;
bottom: -1px;
z-index: 1;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
&::after {
content: '';
display: block;
width: 3px;
height: 6px;
border-right: #fff solid 2px;
border-bottom: #fff solid 2px;
transform: rotate(25deg);
position: absolute;
right: 3px;
bottom: 3px;
z-index: 2;
}
// 选中状态下的禁用样式
&.disabled {
background-color: #f1f1f1;
color: #d8d8d8;
border: #e5e5e5 solid 1px;
&::before {
background-color: #d9d9d9;
}
}
&.nogouxuan{
&::before,&:after {
display: none;
}
}
}
/* #endif */
</style>
<style scoped lang="scss">
.diy-checkbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: center;
padding:0px;
text-align: center;
&.scroll-view {
overflow-x: auto;
flex-wrap: nowrap;
}
.diy-checkbox-item {
padding: 10rpx;
box-sizing: border-box;
}
.noslot>view,.item>view{
width:100%;
}
.noslot {
width:100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-radius: var(--item-radius);
border: var(--item-border-color) solid 1px;
background-color: var(--item-bg-color);
color: var(--item-color);
position: relative;
overflow: hidden;
padding: 20rpx;
// 未选中状态下的禁用样式
&.disabled {
background-color:var(--item-disabled-bg-color);
color:var(--item-disabled-color);
}
&.active {
background-color: var(--active-bg-color);
color: var(--active-color);
border: var(--active-color) solid 1px;
&::before {
content: '';
display: block;
width: 20px;
height: 20px;
background-color: var(--active-color);
position: absolute;
right: -1px;
bottom: -1px;
z-index: 1;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
&::after {
content: '';
display: block;
width: 3px;
height: 6px;
border-right: #fff solid 2px;
border-bottom: #fff solid 2px;
transform: rotate(25deg);
position: absolute;
right: 3px;
bottom: 3px;
z-index: 2;
}
// 选中状态下的禁用样式
&.disabled {
background-color: #f1f1f1;
color: #d8d8d8;
border: #e5e5e5 solid 1px;
&::before {
background-color: #d9d9d9;
}
}
&.nogouxuan{
&::before,&:after {
display: none;
}
}
}
}
/* #ifndef MP-WEIXIN */
.item {
width:100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-radius: var(--item-radius);
border: var(--item-border-color) solid 1px;
background-color: var(--item-bg-color);
color: var(--item-color);
position: relative;
overflow: hidden;
&.noslot{
padding: 20rpx;
}
// 未选中状态下的禁用样式
&.disabled {
background-color:var(--item-disabled-bg-color);
color:var(--item-disabled-color);
}
&.active {
background-color: var(--active-bg-color);
color: var(--active-color);
border: var(--active-color) solid 1px;
&::before {
content: '';
display: block;
width: 20px;
height: 20px;
background-color: var(--active-color);
position: absolute;
right: -1px;
bottom: -1px;
z-index: 1;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
&::after {
content: '';
display: block;
width: 3px;
height: 6px;
border-right: #fff solid 2px;
border-bottom: #fff solid 2px;
transform: rotate(25deg);
position: absolute;
right: 3px;
bottom: 3px;
z-index: 2;
}
// 选中状态下的禁用样式
&.disabled {
background-color: #f1f1f1;
color: #d8d8d8;
border: #e5e5e5 solid 1px;
&::before {
background-color: #d9d9d9;
}
}
&.nogouxuan{
&::before,&:after {
display: none;
}
}
}
}
/* #endif */
}
</style>
