hlm_pl_mall_h5/pages/member/cart/child/CartFooter.vue

<!-- CartFooter.vue -->
<template>
	<view class="div ui-cart-footer" v-bind:class="{ 'has-bottom': issShowTabbar }">
		<checkbox-group @change="selectedAll" class="div list-checkbox">
			<checkbox
				class="checkbox"
				id="checkbox-all"
        value="1"
				:checked="isSelected"
				:disabled="!isCheckedAll && isDisabled"
			/>
			<label class="label" :class="{'checked':isSelected}" for="checkbox-all"><text class="span iconfont">&#xe69b;</text></label>
			<text class="i" v-if="isCheckedAll">全选</text>
			<text v-if="!isCheckedAll" class="i total-price"
			>合计<text class="span">￥ {{ totalPrice }} </text></text
			>
		</checkbox-group>
		<text
			class="span cart-footer-btn remove"
			v-if="isCheckedAll"
			@click="deleteSelected()"
			>删除</text
		>
		<text
			class="span cart-footer-btn checkout"
			v-if="!isCheckedAll"
			@click="checkout"
			>结算({{ totalAmount }})</text
		>
	</view>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      isSelected: true,
      deleteGoods: []
    }
  },
  computed: mapState({
  }),

  props: {
    totalPrice: {},
    totalAmount: {},
    cartId: {},
    isDisabled: {
      type: Boolean,
      default: false
    },
    isCheckedAll: {
      type: Boolean,
      default: false
    },
    issShowTabbar: {
      type: Number,
      default: 0
    },
    isStatus: {
      type: Boolean,
      default: true
    }
  },

  watch: {
    isCheckedAll: function (value) {
      this.isSelected = !value && !this.isDisabled
    },

    isStatus: function (value) {
      this.isSelected = value
    }
  },

  methods: {
    /*
		 *  selectedAll: 底部全选按钮的状态
		 *  @param: value 底部全选按钮的值
		 */
    selectedAll (e) {
      var value=e.detail.value
      this.isSelected=value.length>0
      uni.$emit('cart-bottom-status', { isCheckAll: this.isSelected })
    },

    /*
		 *  deleteSelected: 删除购物车商品
		 */
    deleteSelected () {
      uni.$emit('update-cart-list', { isdelete: true })
    },
    /*
		 *  checkout: 结算
		 */
    checkout () {
      if (!this.isCheckedAll && this.totalAmount != 0) {
        uni.navigateTo({ url: '/pages/member/buy/step1'+'?'+urlencode( { 'cart_id': this.cartId } )})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ui-cart-footer {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	height: $footerHeight;
  padding-bottom: constant(safe-area-inset-bottom);/*兼容 IOS<11.2*/padding-bottom: env(safe-area-inset-bottom);/*兼容 IOS>11.2*/box-sizing: content-box;
	background: rgba(255, 255, 255, 1);
	padding-left: 0.6rem;
	bottom: 0;
	position: fixed;
	width: -webkit-fill-available;
	box-shadow: 0px 4px 4px #f7f7f7;
	margin-bottom:1px;
	.list-checkbox {
    display: flex;
    align-items: center;
		flex-shrink: 0;
		position: relative;
		margin-right:0.25rem;
		height: $footerHeight;
		line-height: $footerHeight;
		.label {
      padding:0;
			position: absolute;
			top: 50%;
      margin-top:-.5rem;
			left: 0;
			width: 1rem;
			height: 1rem;
			display: inline-block;
			border-radius:50%;
			border:1px solid #333;
			box-sizing:border-box;
			.iconfont{display: none;line-height: 1rem;text-align: center;}
      &.checked {
      	border-color:$primaryColor;
      	background-color:$primaryColor;
      	.iconfont{display: block;color:#fff}
      }  
		}
		.checkbox {
			position: relative;
      width: 1rem;
      height: 1rem;
			margin: 0;
			z-index: -999;
			background-color: #fff;
			opacity: 0;
		}
		.i {
			padding-left: 0.6rem;
			font-style: normal;
			font-size: $subFontSize;
			&.total-price .span {
				color: $primaryColor;
				font-size:$mainFontSize;
			}
		}
	}
	.span.cart-footer-btn {
		width: 7.5rem;
		height: $footerHeight;
		display: inline-block;
		font-size: $subFontSize;
		color: rgba(255, 255, 255, 1);
		line-height: 2.25rem;
		text-align: center;
		cursor: pointer;
		font-weight: normal;
	}
	.checkout {
		background: $primaryColor;
	}
	.disable {
		background: #c3c3c3;
	}
	.remove {
		background: #f23030;
	}
}
.has-bottom {
	bottom: $footerHeight;
}
</style>