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>
|