|
@@ -0,0 +1,132 @@
|
|
|
+<template>
|
|
|
+ <view class="check-list-pages">
|
|
|
+ <view>
|
|
|
+ <view
|
|
|
+ class="selList"
|
|
|
+ v-for="(item, index) in list" :key="index"
|
|
|
+ >
|
|
|
+ <view class="radios" @click="chooseItem(item)">
|
|
|
+ <radio v-if="types=='radio'" :checked="item.checked" :value="item.id" />
|
|
|
+ <checkbox v-if="types=='checkbox'" :checked="item.checked" :value="item.id" />
|
|
|
+ <text>{{item[titleKeys]}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="details" @click="rightClick(item)">
|
|
|
+ <slot name="right"></slot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 选择按钮 -->
|
|
|
+ <view v-if="types=='checkbox'" @click="kpOk" class="kp-ok">
|
|
|
+ 确认选择
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default{
|
|
|
+ name: 'UniCheckList',
|
|
|
+ props: {
|
|
|
+ listData: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
+ },
|
|
|
+ // 类型 radio 或 checkbox
|
|
|
+ types:{
|
|
|
+ type: String,
|
|
|
+ default: 'radio'
|
|
|
+ },
|
|
|
+ // 标题显示的字段
|
|
|
+ titleKeys:{
|
|
|
+ type: String,
|
|
|
+ default: 'name'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: this.listData,
|
|
|
+ value: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.hasCheck()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ hasCheck(){
|
|
|
+ this.list.map(item => {
|
|
|
+ let a = this.value.indexOf(item.id)
|
|
|
+ item.checked = a >= 0
|
|
|
+ })
|
|
|
+ this.list.splice()
|
|
|
+ },
|
|
|
+ // 选中
|
|
|
+ chooseItem(item) {
|
|
|
+ // 单选
|
|
|
+ if(this.types == 'radio'){
|
|
|
+ this.value[0] = item.id
|
|
|
+ this.$emit('ok',this.value)
|
|
|
+ }else{
|
|
|
+ // 取消选中
|
|
|
+ if(item.checked){
|
|
|
+ let index = this.value.indexOf(item.id)
|
|
|
+ this.value.splice(index,1)
|
|
|
+ }else{
|
|
|
+ this.value.push(item.id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.hasCheck()
|
|
|
+ },
|
|
|
+ rightClick(item){
|
|
|
+ this.$emit('rightClick',item)
|
|
|
+ },
|
|
|
+ kpOk(){
|
|
|
+ this.$emit('ok',this.value)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .check-list-pages{
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > view{
|
|
|
+ &:first-child{
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .selList{
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .radios{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-grow: 1;
|
|
|
+ width: 50%;
|
|
|
+ padding: 26upx 20upx;
|
|
|
+ &:active{
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .details{
|
|
|
+ color: #007AFF;
|
|
|
+ padding-right: 20upx;
|
|
|
+ &:active{
|
|
|
+ color: #D9363E;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .kp-ok{
|
|
|
+ text-align: center;
|
|
|
+ padding: 26upx;
|
|
|
+ background: #55aaff;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+</style>
|