前端代码
<template>
<view>
<u-navbar :is-back="true" title="选择课程" title-color="#000000" :background="background"></u-navbar>
<view class="content">
<u-gap height="20" bg-color="#F2F2F2"></u-gap>
<view class="address-window">
<!-- 无地址 -->
<view class="picture" v-if="courselist.length==0">
<image :src="url+'images/emptybox.png'"></image>
</view>
<view class="list" v-else>
<u-row gutter="10" v-for="(item,index) in courselist" :key="index" @click="tapCourse(index,item)" class="item acea-row row-between-wrapper">
<u-col span="10">
<view class="address u-padding-left-30">
<view class="name" :class='active==index?"font-color":""'>{
{item.name}}</view>
</view>
</u-col>
<u-col span="2" text-align="center">
<u-icon name="checkbox-mark" color="#fc4141" size="28" v-if="item.checked"></u-icon>
</u-col>
</u-row>
</view>
<view class="btn-wrapper">
<u-button hover-class="other-button-hover" @click="updateUser" data-name="updateinfo" size="default" type="warning">选择课程</u-button>
</view>
</view>
</view>
</view>
</template>
css代码:
<style>
.content{padding-top:20rpx;}
.btn-wrapper{margin:0 auto;width:50%;}
.address-window.on {transform: translate3d(0, 0, 0);}
.address-window .title {
font-size: 32rpx;
font-weight: bold;
text-align: center;
height: 123rpx;
line-height: 123rpx;
position: relative;
}
.address-window .title .iconfont {
position: absolute;right: 30rpx;color: #8a8a8a;font-size: 35rpx;
}
.address-window .list .item {
margin-left: 30rpx;padding-right: 30rpx;border-bottom: 1px solid #eee;height: 129rpx;font-size: 25rpx;color: #333;
}
.address-window .list .item .iconfont {
font-size: 37rpx;color: #2c2c2c;
}
.address-window .list .item .iconfont.icon-complete {
font-size: 30rpx;color: #fff;
}
.address-window .list .item .address {
width: 99%;
}
.address-window .list .item .address .name {
font-size: 28rpx;
font-weight: bold;
color: #282828;
margin-bottom: 4rpx;
}
.address-window .pictrue {
width: 414rpx;height: 336rpx;margin: 0 auto;
}
.address-window .pictrue image {
width: 100%;height: 100%;
}
</style>
js代码:
tapCourse:function(index,item){
let that = this;
that.courselist[index]['checked'] = !item.checked;
if(item.checked){
that.courseid.push(item.itemid);
}else{
that.courseid.pop(item.itemid);
}
},