119 lines
3.5 KiB
Vue
119 lines
3.5 KiB
Vue
<!-- 收藏 -->
|
||
<template>
|
||
<view class="jy-collection" v-if="listProperty.list.length > 0">
|
||
<checkbox-group @change="checkboxChange">
|
||
<view v-for="(item, index) in listProperty.list" :key="index">
|
||
<view class="select-card">
|
||
<JyShopInformation :showStatus="false"></JyShopInformation>
|
||
<view class="checkbox-list" v-for="(item2, index2) in item" :key="index2">
|
||
<checkbox :value="item2 + ''" backgroundColor="#ffffff" iconColor="#ffffff"
|
||
activeBackgroundColor="#F8BA4D" activeBorderColor="#F8BA4D" color="#FFCC33"
|
||
style="transform:scale(0.7)" />
|
||
<JyCommodityInformation :showType="3"></JyCommodityInformation>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</checkbox-group>
|
||
<view class="content-bottom" :style="{ bottom: bottomSafeAreaHeight() }">
|
||
<view class="c999 f24">以选{{ checkNum.length }}款</view>
|
||
<view class="df aic">
|
||
<text class="c333 f28">应付：</text>
|
||
<text class="price f20">￥</text>
|
||
<text class="price">5.00</text>
|
||
</view>
|
||
<button class="content-bottom-price" @click="goto('/pages/shop/continue-pay/index')">
|
||
<text class="cfff f24">去结算</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import JyCommodityInformation from '@/components/public/jy-commodity-information'
|
||
// 店铺信息
|
||
import JyShopInformation from '@/components/public/jy-shop-information'
|
||
import { bottomSafeAreaHeight } from '@/components/public/Mixins.js'
|
||
import apiMixins from '@/components/public/apiMixins.js'
|
||
export default {
|
||
components: {
|
||
JyCommodityInformation,
|
||
JyShopInformation
|
||
},
|
||
mixins: [apiMixins],
|
||
data() {
|
||
return {
|
||
bottomSafeAreaHeight,
|
||
checkNum: []
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.getData({
|
||
api: 'shoppingCart',
|
||
fn: 'list'
|
||
}, {});
|
||
},
|
||
onReachBottomHandler() {
|
||
this.listProperty.params.pageNum++;
|
||
this.init();
|
||
},
|
||
onPullDownRefreshHandler() {
|
||
this.listProperty.params.pageNum = 1
|
||
this.getData({
|
||
api: 'shoppingCart',
|
||
fn: 'list'
|
||
}, {}, true);
|
||
},
|
||
checkboxChange(e) {
|
||
console.log('checkboxChange', e)
|
||
checkNum = e.detail.value
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.select-card {
|
||
background-color: #fff;
|
||
margin-bottom: 40rpx;
|
||
padding: 20rpx 40rpx;
|
||
|
||
}
|
||
|
||
.checkbox-list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
::v-deep .uni-checkbox-input {
|
||
border-radius: 50%
|
||
}
|
||
|
||
.content-bottom {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
position: fixed;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
padding: 40rpx 0;
|
||
|
||
.content-bottom-price {
|
||
margin: 0px;
|
||
width: 350rpx;
|
||
line-height: normal;
|
||
border-radius: 10rpx;
|
||
/* 自动布局 */
|
||
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 28rpx 86rpx;
|
||
}
|
||
}
|
||
</style> |