hlm_pl_mall_h5/pages/home/pointsgoods/DetailFooter.vue

<!-- footer.vue -->
<template>
	<view
		class="div ui-detail-footer"
		v-if="detailInfo"
	>
		<view class="div footer-flex">
			<view class="div left">
				<view class="div item" v-on:click="goCart()">
					<text class="span iconfont">&#xe6ae;</text>
					<text class="span icon" v-if="cartNumber > 0">{{ getCarCount }}</text>
					<text class="span text">购物车</text>
				</view>
			</view>
			<view class="div right">
				<view class="div right-wrapper">
					<view
							class="div button active-cart"
							v-on:click="addShopping(true)"
							v-if="detailInfo.pgoods_storage > 0"
					>
						加入购物车
					</view>
					<view class="div button disabled-cart" v-if="detailInfo.pgoods_storage <= 0">
						加入购物车
					</view>
					<view
							class="div button active-buy"
							v-on:click="checkout()"
							v-if="detailInfo.pgoods_storage > 0"
					>
						立即购买
					</view>
					<view class="div button disabled-buy" v-if="detailInfo.pgoods_storage <= 0">
						立即购买
					</view>
				</view>
			</view>
		</view>

		<view  class="p good-stock-none" v-if="detailInfo.pgoods_storage <= 0">
			所选产品暂时无货，非常抱歉！
		</view>

		<shopping></shopping>

		<!-- 加入购物车显示动画 -->
		<view class="div ui-cart-animation" v-if="isAnimation">
			<uni-load-more status="loading" color="#e93b3d"></uni-load-more>
		</view>
	</view>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState, mapMutations } from 'vuex'
import shopping from './child/Shopping'
import { cartQuantity } from '../../../api/memberPointscart'
export default {
  data () {
    return {
      cartNumber: 0,
      isAnimation: false // 加入购物车成功之后是否显示动画
    }
  },

  components: {
    shopping
  },

  props: {
    ishidefooter: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    ...mapState({
      // 是否显示购物车浮层
      isShowcartInfo: state => state.pointsgoods.isShowcartInfo,
      detailInfo: state => state.pointsgoods.detailInfo,
      isOnline: state => state.member.isOnline,
      number: state => state.pointsgoods.number
    }),
    getCarCount () {
      if (this.cartNumber > 0 && this.cartNumber < 100) {
        return this.cartNumber
      } else if (this.cartNumber >= 100) {
        return '99+'
      }
    }
  },

  created () {
    uni.$on('start-addcart-animation', () => {
      this.isAnimation = true
    })
    uni.$on('end-addcart-animation', () => {
      this.isAnimation = false
      this.saveCartState(false)
    })
	  this.getCartCount()
	  uni.$on('update-cart-num', () => {
		  this.getCartCount()
	  })
  },

  beforeDestroy: function () {
    uni.$off('start-addcart-animation')
    uni.$off('end-addcart-animation')
    uni.$off('update-cart-num')
  },
  methods: {
    ...mapMutations({
      saveCartState: 'saveCartState',
      changeType: 'changeType'
    }),
	  getCartCount () {
		  cartQuantity().then(res => {
			  if (res) {
				  this.cartNumber = res.result.cart_count
			  }
		  })
	  },
    // 加入购物车
    addShopping (value) {
      this.saveCartState(value)
      this.changeType('确定')
    },

    // 立即购买
    checkout () {
      uni.navigateTo({ url: '/pages/member/pointsbuy/step1'+'?'+urlencode( { buy_now: 1, cart_id: this.detailInfo.pgoods_id + '|1' } )})
    },

    // 购物车
    goCart () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/pointscart/Cart', params: { type: 0 } })
      } else {
        uni.navigateTo({ url: '/pages/home/memberlogin/Login' })
      }
    }

  }
}
</script>

<style lang="scss" scoped>
	.ui-detail-footer {
		background: rgba(255, 255, 255, 1);
		border-top: 0.5px solid #e8eaed;
		width: auto;
		position: absolute;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 0;
		&.hidden-cart-footer {
			display: none;
		}

		&.show-cart-footer {
			display: block;
		}

		.footer-flex {
			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;
		}
		.p.good-stock-none {
			width: 100%;
			height: 1.6rem;
			background: #c3c3c3;
			opacity: 0.5;
			font-size:$subFontSize;
			color: #333;
			position: absolute;
			text-align: center;
			line-height: 1.6rem;
			padding: 0;
			margin: 0;
			bottom: 3rem;
		}
		.div.left {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 5rem;
			.item{flex:1;text-align: center;line-height: 1;position:relative;
				.iconfont {
					flex-shrink: 0;
					font-size:1.3rem;

				}
				.text{font-size:$h6;color:gray;display: block}
			}
			.span.icon {
				position: absolute;
				right: 0;
				top: 0;
				font-size:$h6;
				line-height: 0.7rem;
				width: 0.9rem;
				height: 0.7rem;
				background: #ef3338;
				border-radius: 1rem;
				text-align: center;
				color: #ffffff;
			}
		}
		.div.right {
			flex: 1;
			align-items: center;
			padding-right:$pageSpace;
			.right-wrapper{
				display: flex;
				flex-direction: row;
				border-radius:2rem;
				overflow: hidden;
			}
			.button {
				flex: 1;
				height: 2rem;
				font-size:$subFontSize;
        display:flex;align-items:center;justify-content:center;
				color: #ffffff;
				text-align: center;
				line-height: 2rem;
				cursor: pointer;
			}
			.disabled-cart {
				background: #c3c3c3;
			}
			.active-cart {
				background: $primaryColor;
			}
			.disabled-buy {
				background: #999999;
			}
			.active-buy {
				background: #000;
			}
		}
	}
	.ui-cart-animation {
		position: fixed;
		top: 50%;
		left: 50%;
	}
</style>