hlm_pl_mall_h5/pages/home/goodsdetail/DetailFooter.vue

<!-- footer.vue -->
<template>
	<view
			class="div ui-detail-footer"
			v-if="detailInfo"
			v-bind:class="{
			'hidden-cart-footer': ispromotion,
			'show-cart-footer': !ispromotion
		}"
	>
		<view class="div footer-flex">
			<view class="div left">
				<view class="div item" v-on:click="goNavigate('/pages/home/storedetail/Storedetail',{id:storeInfo.store_id})">
					<text class="span iconfont">&#xe69f;</text>
					<text class="span text">店铺</text>
				</view>
				<view class="div item" v-if="config && config.instant_message_open == '1' && config.instant_message_gateway_url" v-on:click="goChat()">
					<text class="span iconfont">&#xe6f1;</text>
					<text class="span text">客服</text>
				</view>
				<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 "
						:class="canBuy?'active-cart':'disabled-cart'"
						v-on:click="addShopping(true)"
						v-if="!detailInfo.bargain_info && ((!detailInfo.pintuan_type && detailInfo.cart) || (detailInfo.pintuan_type && (detailInfo.pintuangroup_list.length || detailInfo.pintuanorder_state)))"
				>
					{{addCartText}}
				</view>
				<view
						class="div button "
						:class="canBuy?'active-buy':'disabled-buy'"
						v-on:click="checkout()"
				>
					{{buyNowText}}
				</view>
				</view>
			</view>
		</view>

		<view  class="p good-stock-none" v-if="detailInfo.goods_state != 1 || detailInfo.goods_verify!=1">
			所选产品已下架，非常抱歉！
		</view>
		<view  class="p good-stock-none" v-else-if="detailInfo.goods_storage <= 0">
			所选产品暂时无货，非常抱歉！
		</view>

		<shopping></shopping>
        <translate></translate>

		<!-- 加入购物车显示动画 -->
		<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 translate from './child/Translate'
import { cartQuantity } from '../../../api/homecart'
import { addBargain } from '../../../api/memberBargain'
export default {
  data () {
    return {
      addCartText: '加入购物车',
      buyNowText: '立即购买',
      cartNumber: 0,
      isAnimation: false // 加入购物车成功之后是否显示动画
    }
  },

  components: {
    shopping,
    translate
  },

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

  computed: {
    ...mapState({
      config: state => state.config.config,
      user: state => state.member.info,
      storeInfo: state => state.goodsdetail.storeInfo,
      detailInfo: state => state.goodsdetail.detailInfo,
      specList: state => state.goodsdetail.specList,
      isOnline: state => state.member.isOnline,
      ispromotion: state => state.goodsdetail.ispromotion,
      // cartNumber: state => state.tabBar.cartNumber,
      chooseinfo: state => state.goodsdetail.chooseinfo,
      number: state => state.goodsdetail.number
    }),
    canBuy () {
      if (this.detailInfo.goods_storage > 0 && this.detailInfo.goods_state == 1 && this.detailInfo.goods_verify == 1) {
        return true
      } else {
        return false
      }
    },
    getCarCount () {
      if (this.cartNumber > 0 && this.cartNumber < 100) {
        return this.cartNumber
      } else if (this.cartNumber >= 100) {
        return '99+'
      }
    }
  },

  created () {
    if (this.detailInfo.bargain_info) {
      if (this.detailInfo.bargainorder_info) {
        if (this.detailInfo.bargainorder_info.bargainorder_state == 2) {
          this.buyNowText = '砍价成功去下单'
        } else {
          this.buyNowText = '正在砍价'
        }
      } else {
        this.buyNowText = '发起砍价'
      }
    } else if (this.detailInfo.pintuan_type) {
      if (this.detailInfo.pintuanorder_state) {
		  if (this.detailInfo.pintuanorder_state == 1) {
			  this.addCartText = '参团中'
		  } else {
			  this.addCartText = '已成团'
		  }
		  this.buyNowText = '原价购买'
	  } else {
		  this.addCartText = '参加拼团'
		  this.buyNowText = '立刻开团'
	  }
    } else if (this.detailInfo.presell_type) {
      this.buyNowText = '预售购买'
    } else if (this.detailInfo.is_goodsfcode == 1) {
      this.buyNowText = 'F码购买'
    }
    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:{
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },

    ...mapMutations({
      saveCartState: 'saveCartState',
      changeType: 'changeType',
      saveSelectedCartGoods: 'saveSelectedCartGoods'
    }),
    goChat () {
      if (!this.user) {
        uni.showToast({icon:'none',title: '请先登录'})
      } else if (this.user.member_id == this.storeInfo.member_id) {
        uni.showToast({icon:'none',title: '不能和自己聊天'})
      } else {
        uni.navigateTo({ url: '/pages/member/chat/ChatInfo'+'?'+urlencode( { t_id: this.storeInfo.member_id, t_name: this.storeInfo.store_name, goods_id: this.detailInfo.goods_id } )})
      }
    },
    getCartCount () {
      if (this.isOnline) {
        cartQuantity().then(res => {
          if (res) {
            this.cartNumber = res.result.cart_count
          }
        })
      }
    },
    // 加入购物车
    addShopping (value) {
      this.saveCartState(value)
      this.changeType('确定')
    },

    // 立即购买
    checkout () {
      if (!this.canBuy) {
        return
      }
      if (this.specList && Object.keys(this.specList).length > 1) {
        this.addShopping(true)
        return
      }
      if (this.user) {
        if (this.user.store_id == this.storeInfo.store_id) {
          uni.showToast({icon:'none',title: '不能购买自己的商品'})
          return
        }
      } else {
        uni.navigateTo({ url: '/pages/home/memberlogin/Login' })
        return
      }

      if (this.detailInfo.is_virtual == '1') {
        let params = { goods_id: this.detailInfo.goods_id, quantity: 1 }
        if (this.detailInfo.pintuan_type && !this.detailInfo.pintuanorder_state) {
          params['pintuan_id'] = this.detailInfo.pintuan_id
          params['pintuangroup_id'] = 0
        }
        uni.navigateTo({ url: '/pages/member/vrbuy/step1'+'?'+urlencode( params )})
      } else {
        let params = { buy_now: 1, cart_id: this.detailInfo.goods_id + '|1' }
        if (this.detailInfo.bargain_info) {
          if (this.detailInfo.bargainorder_info) {
            if (this.detailInfo.bargainorder_info.bargainorder_state == 2) {
              params['bargainorder_id'] = this.detailInfo.bargainorder_info.bargainorder_id
            } else {
              uni.navigateTo({ url: '/pages/home/bargain/Bargainshare'+'?'+urlencode( { bargainorder_id: this.detailInfo.bargainorder_info.bargainorder_id } )})
              return
            }
          } else {
            // 新增砍价
            addBargain(this.detailInfo.bargain_info.bargain_id).then(res => {
              uni.navigateTo({ url: '/pages/home/bargain/Bargainshare'+'?'+urlencode( { bargainorder_id: res.result.bargainorder_id  })})
              }).catch(function (error) {
              uni.showToast({icon:'none',title: error.message})
            })
            return
          }
        } else if (this.detailInfo.pintuan_type && !this.detailInfo.pintuanorder_state) {
          params['pintuan_id'] = this.detailInfo.pintuan_id
          params['pintuangroup_id'] = 0
        }
        uni.navigateTo({ url: '/pages/member/buy/step1'+'?'+urlencode( params )})
      }
    },

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

    /*
                 * fromatArray: 格式化数组
                 */
    fromatArray (delimiter, arrays) {
      let data = ''
      if (delimiter) {
        data = arrays.join(delimiter)
      }
      return delimiter ? data : arrays
    },

    /*
                 * isHasStock: 是否还有库存
                 */
    isHasStock (id) {
      let data = this.detailInfo.stock
      if (data.length > 0) {
        for (let i = 0, len = data.length; i <= len - 1; i++) {
          if (data[i].goods_attr == id) {
            return '' + data[i].stock_number + ''
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.ui-detail-footer {
		background: rgba(255, 255, 255, 1);
		border-top: 0.5px solid #e8eaed;
		width: auto;
		position: fixed;
		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: 7.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>