因为小程序的多选单选外观不怎么样。。。
样式展示
wxml代码
<view class='container'>
<view wx:if="{{!notcollection}}" class='edit'><text bindtap='display_bn'>编辑</text></view>
<view wx:if="{{notcollection}}" class='notcollection'>
<image src='../../images/not.png' class='not_img'></image>
<view class='not_v'>暂无收藏...</view>
<button bindtap='get_collection' class='get_collection'>添加收藏</button>
</view>
<scroll-view scroll-y="true" style='height:88%;'>
<view wx:for="{{listCollection.length}}" class='collection_item'>
<view wx:if="{{display}}" class='checkbox_item'>
<image bindtap='sty_background' class='checkbox_v' src="{{checkbox[index]}}" data-index="{{index}}"></image>
</view>
<image class='product_img' data-goods-id="{{listCollection[index].product_id}}" bindtap="navigateToProduct" src='{{listCollection[index].product_pic}}'></image>
<view class='product_name' data-goods-id="{{listCollection[index].product_id}}" bindtap="navigateToProduct" src='{{listCollection[index].product_pic}}'> {{listCollection[index].product_name}}</view>
<view class='product_money' data-goods-id="{{listCollection[index].product_id}}" bindtap="navigateToProduct" src='{{listCollection[index].product_pic}}'>¥{{listCollection[index].shop_price}}</view>
<view bindtap='delete_v' class='delete_v' data-index="{{index}}">刪除</view>
</view>
</scroll-view>
<view wx:if="{{display}}" class='delete_container'>
<image bindtap='all_choice' class='delete_img' src='{{checkboxall}}'></image>
<view class='all_select'>全选</view>
<view bindtap='deleteCollection' class='delete_but'>删除</view>
</view>
</view>
wxss
.edit{
width: 95%;
padding: 6rpx 6rpx;
color: #999999;
text-align: right;
padding-left: 2.5%;
padding-right: 2.5%;
}
.container{
width: 100%;
height: 100%;
}
.collection_item{
width: 100%;
height: 83px;
margin-top: 16rpx;
float: left;
}
.checkbox_v{
width: 33px;
height: 33px;
display: inline-block;
margin-top: 25px;
}
.product_img{
width: 83px;
height: 83px;
border-radius: 6rpx;
display: inline-block;
margin-left: 15rpx;
float: left;
}
.product_name{
height: 60px;
margin-left: 20rpx;
color: #999999;
float: left;
width: 59%;
}
.product_money{
height: 23px;
margin-left: 20rpx;
color: #d4237a;
float: left;
width: 59%;
}
.payimg{
height: 18px;
width: 18px;
margin-top: 5px;
float: right;
margin-right: 30rpx;
}
.delete_container{
position: fixed;
bottom: 0px;
height: 36px;
width: 97.5%;
padding-right: 2.5%;
background: #e9e9e9;
}
.delete_but{
display: inline-block;
width: 29px;
height: 26px;
line-height: 26px;
background: #d4237a;
color: white;
float: right;
font-size: 14px;
padding-left: 15rpx;
padding-right: 15rpx;
border-radius: 6rpx;
margin-top: 6px;
}
.delete_img{
width: 33px;
height: 33px;
display: inline-block;
float: left;
}
.checkbox_item{
display: inline-block;
float: left;
}
.all_select{
display: inline-block;
width: 29px;
height: 26px;
line-height: 26px;
font-size: 14px;
margin-top: 6px;
float: left;
}
.notcollection{
width: 100%;
height: 89%;
text-align: center;
}
.not_img{
width: 60px;
height: 60px;
margin-top: 35%;
}
.not_v{
color: #999999;
margin-top: 16rpx;
font-size: 15px;
}
.get_collection{
background: #d4237a;
color: white;
margin-top: 6rpx;
width: 28%;
height: 60rpx;
font-size: 15px;
line-height: 60rpx;
}
.delete_v{
width: 6%;
height: 84px;
display: inline-block;
position: absolute;
right: 0px;
color: white;
background: #d4237a;
padding-left: 7px;
line-height: 40px;
font-size: 16px;
}
wxjs
var app = getApp();
Page({
data: {
checkbox:[],
listCollection:[],
display: false,
displayimg: false,
notcollection:false,
data_id:"",
img_index: 0,
collectionId:[],
collectionIds:[],
checkboxall:"../../images/weixuanzhon.png",
},
onLoad: function (options){
var that = this;
that.listCollection(that);
},
// 编辑
display_bn:function(){
var that = this;
for (var i = 0; i < that.data.listCollection.length;i++){
that.data.checkbox.push('../../images/weixuanzhon.png')
}
that.setData({
display: !that.data.display,
checkbox: that.data.checkbox
})
},
// 全选
all_choice:function(){
var that = this;
if (that.data.checkboxall == "../../images/weixuanzhon.png"){
for (var i = 0; i < that.data.listCollection.length; i++) {
that.data.checkbox[i] = ('../../images/xuanzhon.png')
that.data.collectionId[i] = that.data.listCollection[i].product_id
}
that.data.checkboxall = "../../images/xuanzhon.png"
}else{
for (var i = 0; i < that.data.listCollection.length; i++) {
that.data.checkbox[i] = ('../../images/weixuanzhon.png')
}
that.data.collectionId = [];
that.data.checkboxall = "../../images/weixuanzhon.png"
}
console.log(that.data.collectionId)
that.setData({
checkbox: that.data.checkbox,
checkboxall: that.data.checkboxall,
collectionId: that.data.collectionId
})
},
// 单选多选
sty_background:function(e){
var index = e.currentTarget.dataset.index;
var checkbox = this.data.checkbox;
var that = this;
if (checkbox[index] == '../../images/weixuanzhon.png'){
checkbox[index] = '../../images/xuanzhon.png';
that.data.collectionId.push(that.data.listCollection[index].product_id)
}else{
checkbox[index] = '../../images/weixuanzhon.png'
that.data.collectionId.splice(index,1)
}
that.setData({
checkbox: checkbox,
collectionId: that.data.collectionId
})
},
//单独删除
delete_v: function (e) {
var that = this;
var index = e.currentTarget.dataset.index;
that.data.collectionId.push(that.data.listCollection[index].product_id)
that.setData({
collectionId: that.data.collectionId
})
that.deleteCollection();
},
// 获取收藏信息
listCollection:function(that){
wx.request({
url: app.globalData.requestUrl + 'listCollection',
data: {
"userid": app.globalData.userInfo['user_id'],
// "productId": that.data.product.product_id
},
success(res) {
if (res.data.state==1){
that.setData({
listCollection: res.data.info
})
}else{
that.setData({
notcollection:true
})
}
}
});
},
//删除收藏
deleteCollection:function(){
var that = this;
if (that.data.collectionId.length==1){
var collectionId = that.data.collectionId[0]
that.setData({
collectionIds:collectionId
})
}else{
that.data.collectionIds = that.data.collectionId
that.setData({
collectionIds: that.data.collectionIds.join(","),
})
}
wx.request({
url: app.globalData.requestUrl + 'deleteCollection',
data: {
"userid": app.globalData.userInfo['user_id'],
"productId": that.data.collectionIds
},
success(res) {
console.log(res.data.state)
if (res.data.state==1){
wx.navigateTo({
url: 'collection',
})
}
}
});
},
navigateToProduct(event) {
var productId = event.currentTarget.dataset.goodsId;
wx.navigateTo({ url: '../products/products?id=' + productId });
},
get_collection:function(){
wx.navigateTo({
url: '../list/list',
})
}
})