徐总多门店
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

257 lines
5.6 KiB

<template>
<!-- 拆单订单 -->
<view class='splitOrder' v-if="splitGoods.length">
<view class="all" v-if="select_all">
<checkbox-group @change="checkboxAllChange">
<checkbox value="all" :checked="isAllSelect" />
<text class='checkAll'>全选</text>
</checkbox-group>
</view>
<checkbox-group @change="checkboxChange">
<block v-for="(item,index) in splitGoods" :key="index">
<view class='items acea-row row-between-wrapper'>
<!-- #ifndef MP -->
<checkbox :value="(item.id).toString()" :checked="item.checked" />
<!-- #endif -->
<!-- #ifdef MP -->
<checkbox :value="item.id" :checked="item.checked" />
<!-- #endif -->
<view class='picTxt acea-row row-between-wrapper'>
<view class='pictrue'>
<image :src='item.cart_info.productInfo.image'></image>
</view>
<view class='text'>
<view class="acea-row row-between-wrapper">
<view class='name line1'>{{item.cart_info.productInfo.store_name}}</view>
<!-- <view>×{{item.cart_num}}</view> -->
</view>
<view class='infor line1'>
属性{{item.cart_info.productInfo.attrInfo.suk || '默认'}}</view>
<view class="acea-row row-middle money-section">
实付款<view class='money'>¥{{item.cart_info.sum_true_price}}</view>
</view>
</view>
<view class='carnum acea-row row-center-wrapper'>
<view class="reduce iconfont icon-ic_Reduce" :class="item.surplus_num == 1 ? 'on' : ''" @click.stop='subCart(item)'></view>
<view class='num'>{{item.surplus_num}}</view>
<view class="plus iconfont icon-ic_increase" :class="item.surplus_num == item.numShow ? 'on' : ''" @click.stop='addCart(item)'></view>
</view>
</view>
</view>
</block>
</checkbox-group>
</view>
</template>
<script>
export default {
props: {
splitGoods: {
type: Array,
default: () => []
},
select_all: {
type: Boolean,
default: true
}
},
data() {
return {
isAllSelect: false
};
},
mounted() {
},
methods: {
subCart(item) {
item.surplus_num = Number(item.surplus_num) - 1;
if (item.surplus_num <= 1) {
item.surplus_num = 1
}
this.$emit('getList', this.splitGoods);
},
addCart(item) {
item.surplus_num = Number(item.surplus_num) + 1;
if (item.surplus_num >= item.numShow) {
item.surplus_num = item.numShow
}
this.$emit('getList', this.splitGoods);
},
inArray: function(search, array) {
for (let i in array) {
if (array[i] == search) {
return true;
}
}
return false;
},
checkboxChange(event) {
let idList = event.detail.value;
this.splitGoods.forEach((item) => {
if (this.inArray(item.id, idList)) {
item.checked = true;
} else {
item.checked = false;
}
})
this.$emit('getList', this.splitGoods);
if (idList.length == this.splitGoods.length) {
this.isAllSelect = true;
} else {
this.isAllSelect = false;
}
},
forGoods(val) {
let that = this;
if (!that.splitGoods.length) return
that.splitGoods.forEach((item) => {
if (val) {
item.checked = true;
} else {
item.checked = false;
}
})
that.$emit('getList', that.splitGoods);
},
checkboxAllChange(event) {
let value = event.detail.value;
if (value.length) {
this.forGoods(1)
} else {
this.forGoods(0)
}
}
}
}
</script>
<style lang="scss">
.splitOrder {
width: 710rpx;
background-color: #fff;
border-radius: 16rpx;
margin: 24rpx auto 0 auto;
padding: 32rpx 26rpx;
}
.splitOrder .all {
padding: 20rpx 30rpx;
}
.splitOrder .all .checkAll {
margin-left: 20rpx;
}
.splitOrder .items~.items {
margin-top: 48rpx;
}
.splitOrder .items .picTxt {
width: 604rpx;
position: relative;
}
.splitOrder .items .picTxt .name {
width: 444rpx;
}
.splitOrder .items .picTxt .pictrue {
width: 136rpx;
height: 136rpx;
}
.splitOrder .items .picTxt .pictrue image {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
.splitOrder .items .picTxt .text {
width: 450rpx;
font-size: 28rpx;
color: #333;
font-weight: 400;
}
.splitOrder .items .picTxt .text .reColor {
color: #999;
}
.splitOrder .items .picTxt .text .reElection {
margin-top: 20rpx;
}
.splitOrder .items .picTxt .text .reElection .title {
font-size: 24rpx;
}
.splitOrder .items .picTxt .text .reElection .reBnt {
width: 120rpx;
height: 46rpx;
border-radius: 23rpx;
font-size: 26rpx;
}
.splitOrder .items .picTxt .text .infor {
font-size: 22rpx;
color: #999;
margin-top: 12rpx;
width: 284rpx;
}
.splitOrder .items .picTxt .text .money-section {
margin-top: 18rpx;
font-size: 22rpx;
color: #999999;
}
.splitOrder .items .picTxt .text .money {
font-size: 36rpx;
color: #333;
font-family: 'Regular';
color: #FF7D00;
}
.splitOrder .items .picTxt .carnum {
height: 36rpx;
position: absolute;
bottom: 0;
right: 0;
}
.splitOrder .items .picTxt .carnum view {
width: 66rpx;
text-align: center;
height: 100%;
line-height: 36rpx;
font-size: 24rpx;
color: #333;
}
.splitOrder .items .picTxt .carnum .reduce {
border-right: 0;
border-radius: 3rpx 0 0 3rpx;
}
.splitOrder .items .picTxt .carnum .reduce.on {
border-color: #e3e3e3;
color: #dedede;
}
.splitOrder .items .picTxt .carnum .plus {
border-left: 0;
border-radius: 0 3rpx 3rpx 0;
font-size: 26rpx;
}
.splitOrder .items .picTxt .carnum .plus.on {
border-color: #e3e3e3;
color: #dedede;
}
.splitOrder .items .picTxt .carnum .num {
color: #282828;
background: #F5F5F5;
width: 72rpx;
}
</style>