123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- <template>
- <u-popup v-model="isShow" class="uni-multiple-picker" @close="cancel" mode="bottom">
- <view class="u-multiple-picker-header flex justify_between align_center">
- <text class="multiple-picker-btn" @click="cancel">取消</text>
- <text class="multiple-picker-btn color-blue" @click="confirm">确定</text>
- </view>
- <u-row class="choose-info">
- <u-col :span="3">当前已选:</u-col>
- <u-col :span="9" class="choose-info-item">{{nowChooseItem}}</u-col>
- </u-row>
- <scroll-view class="picker-content" scroll-y>
- <view class="picker-main">
- <view class="picker-main-item" v-for="(item, index) in listData" :key="item.id" @click="chooseItem(index)">
- <view class="item-name">{{item.name}}</view>
- <u-icon v-show="item.checked==true" class="item-icon" name="checkbox-mark" color="#2979ff" size="28"></u-icon>
- </view>
- <view v-if="listData && listData.length == 0">
- <u-empty text="数据为空" mode="list" :img-width="200" :margin-top="-60"></u-empty>
- </view>
- </view>
- </scroll-view>
- </u-popup>
- </template>
- <script>
- export default{
- props: {
- show: {
- type: Boolean,
- default: false
- },
- dataList: {
- type: Array,
- default: ()=>{
- return []
- }
- }
- },
- watch: {
- show (newValue, oldValue) {
- this.isShow = newValue
- },
- dataList (newValue, oldValue) {
- console.log(newValue)
- this.listData = newValue
- },
- },
- computed: {
- nowChooseItem: function() {
- let str = ''
- this.listData.map(item => {
- if(item.checked){
- str += item.name + ',';
- }
- })
- str = str == '' ? '' : str.substring(0,str.length - 1)
- return str
- },
- nowChooseItemArr: function() {
- let arr = []
- this.listData.map(item => {
- if(item.checked){
- arr.push({id: item.id, name: item.name})
- }
- })
- return arr
- },
- },
- data(){
- return{
- isShow: this.show,
- listData: this.dataList || [],
- }
- },
- methods: {
- // 选择
- chooseItem(ind){
- this.$set(this.listData[ind], 'checked', !this.listData[ind].checked)
- },
- // 确定
- confirm(){
- this.$emit('confirm', this.nowChooseItemArr)
- },
- // 取消
- cancel(){
- this.$emit('cancel')
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .uni-multiple-picker{
- .u-multiple-picker-header{
- padding: 20upx 30upx;
- position: relative;
- display: flex;
- justify-content: space-between;
- .multiple-picker-btn{
- color: rgb(96, 98, 102);
- }
- .color-blue{
- color: #2979ff;
- }
- }
- .u-multiple-picker-header:after{
- content: "";
- position: absolute;
- border-bottom: 1px solid #eaeef1;
- -webkit-transform: scaleY(.5);
- transform: scaleY(.5);
- bottom: 0;
- right: 0;
- left: 0;
- }
- .choose-info{
- padding: 14upx 30upx 14upx;
- color: rgb(96, 98, 102);
- .choose-info-item{
- color: #2979ff;
- }
- }
- .picker-content{
- height: 300upx;
- padding: 6upx 0 20upx;
- position: relative;
- .picker-main{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- width: 100%;
- max-height: 300upx;
- .picker-main-item{
- position: relative;
- padding: 0 30upx;
- .item-name{
- padding: 14upx 0;
- text-align: center;
- // border-bottom: 1upx dashed #efefef;
- }
- .item-icon{
- position: absolute;
- right: 100upx;
- top: 19upx;
- }
- }
- }
- }
- }
- </style>
|