hlm_pl_mall_h5/pages/home/goodsdetail/child/InfoItem.vue

<!-- Detailinfo.vue -->
<template>
	<view class="div" v-if="detailInfo">
		<view v-if="detailInfo.bargain_info" class="div bargain-wrapper">

			<view class="div bargain-content" @click="showPopup('bargainVisible')">
				<view class="div title">砍价购</view>
				<view class="div content">
					<view class="div">距结束仅剩</view>
					<view class="div"><text class="span" v-if="day"><text class="em">{{day}}</text>天</text><text class="span"><text class="em">{{hours}}</text>时</text><text class="span"><text class="em">{{minute}}</text>分</text><text class="span"><text class="em">{{second}}</text>秒</text></view>
				</view>
				<view class="div arrow iconfont">&#xe650;</view>
			</view>
			<uni-popup background-color="#fff" ref="bargainVisible" type="bottom" class="bargain-popup-wrapper">
				<view class="div mt">玩法详情</view>
				<view class="div mc">
					<view class="div line">
						1.活动期间消费者可邀请好友帮忙砍价，好友砍到底价后，即可按底价购买商品；
					</view>
					<view class="div line">
						2.好友帮忙砍到底价后，消费者须在有效期内购买砍价商品，逾期商品将恢复原价；
					</view>
					<view class="div line">
						3.同一商品，同一用户仅可享受一次优惠价格；
					</view>
					<view class="div line">
						4.同一商品，同一用户仅能帮好友砍价一次；
					</view>
					<view class="div line">
						5.砍价商品数量有限，商品售罄后，您将无法购买。
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="div ui-detail-info">

			<view class="div info-header ui-flex">
				<text class="h3">{{ detailInfo.goods_name }}</text>
				<view class="div favorite">
					<text class="i iconfont" v-on:click="productUnlike()" v-if="isFavorate">&#xe6d5;</text>
					<text class="i iconfont" v-on:click="productLike()" v-else>&#xe6d6;</text>
					<text class="span">{{favoriteName}}</text>
				</view>
			</view>
			<view class="div goods_advword" v-if="detailInfo.goods_advword"><text class="span strong">{{ detailInfo.goods_advword }}</text></view>
			<view v-if="detailInfo.wholesale_info" class="div price" style="display: flex">
				<view class="div" v-for="(item,index) in detailInfo.wholesale_info.wholesalegoods_price" :key="index" style="flex:1">
					<text class="span current-price">￥<text class="i price-number">{{item.price}}</text></text>
					<text class="span num">{{item.num_text}}</text>
				</view>
			</view>
			<view v-else class="div price">
			<text class="span current-price">￥<text class="i price-number"><slot v-if="detailInfo.bargain_info">{{ detailInfo.bargain_info.bargain_floorprice }}</slot><slot v-else-if="detailInfo.pintuan_type">{{ detailInfo.pintuan_price }}</slot><slot v-else-if="detailInfo.promotion_type">{{ detailInfo.promotion_price }}</slot><slot v-else>{{ detailInfo.goods_price }}</slot></text>
			</text>
				<text class="span old-price" v-if="detailInfo.goods_marketprice > 0">￥{{ detailInfo.goods_marketprice }}</text>
			</view>
			<view class="div inviter_amount" v-if="detailInfo.inviter_money > 0">
				<text class="span inviter_amount" >分销佣金：￥{{ detailInfo.inviter_money }}</text>
			</view>

			<view class="div" v-if="!detailInfo.bargain_info">
				<view class="div info-promotions" v-if="detailInfo.pintuan_type=='pintuan'">
					<view class="div left">
						<text class="i">拼团</text>
						<text class="span" v-if="detailInfo.pintuan_limit_quantity">最多可购买{{detailInfo.pintuan_limit_quantity}}件</text>
					</view>
					<text class="span right">{{fromNow(detailInfo.pintuan_end_time)}}结束</text>
				</view>
				<view class="div info-promotions" v-if="detailInfo.promotion_type=='groupbuy'">
					<view class="div left">
						<text class="i">抢购</text>
						<text class="span" v-if="detailInfo.upper_limit">最多可购买{{detailInfo.upper_limit}}件</text>
					</view>
					<text class="span right">{{fromNow(detailInfo.promotion_end_time)}}结束</text>
				</view>
				<view class="div info-promotions" v-if="detailInfo.promotion_type=='xianshi'">
					<view class="div left">
						<text class="i">秒杀</text>
						<text class="span" v-if="detailInfo.lower_limit">最低{{detailInfo.lower_limit}}件起</text>
					</view>
					<text class="span right">{{fromNow(detailInfo.promotion_end_time)}}结束</text>
				</view>
				<view class="div info-promotions" v-if="detailInfo.promotion_type=='presell'">
					<view class="div left">
						<text class="i">预售</text>
						<text class="span" v-if="detailInfo.remark">{{detailInfo.remark}}</text>
					</view>
					<text class="span right">{{fromNow(detailInfo.presell_end_time)}}结束</text>
				</view>
			</view>
		</view>
		<view class="div dss-sale main-content" v-if="detailInfo.goods_mgdiscount_arr" @click.native="showPopup('goodsmgdiscountarr')">
			<flex-line  :is-link="true" :show-border="true" >
				<text class="span">会员尊享专属权益</text>
			</flex-line>
		</view>
		<uni-popup background-color="#fff" ref="goodsmgdiscountarr" type="bottom" class="goodsmgdiscountarr-popup-wrapper">
			<view class="div mt"><text class="span">会员专属权益</text><text class="iconfont" @click.native="hidePopup('goodsmgdiscountarr')">&#xe65d;</text></view>
			<view class="div mc">
				<view class="title">会员专属折扣</view>
				<view class="div item" v-for="(item,index) in detailInfo.goods_mgdiscount_arr" :key="index"><text class="em">{{item.level_name}}可享受会员权益，</text> 购物享{{item.level_discount}}折</view>
			</view>
		</uni-popup>
		
	</view>

</template>

<script>
import { mapState, mapMutations } from 'vuex'
import flexLine from '../../../flexLine'
import { productLike, productUnlike } from '../../../../api/homegoodsdetail'
export default {
  data () {
    return {
      flag: false,
      day: 0,
      hours: 0,
      minute: 0,
      second: 0,
      time: false,
      orderTime: '', // 下单时间
      arrivalsTime: '', // 到达时间
      arrivalsTitle: '', // 到达时间的标题
      arrivalsRange: '' // 到达时间区间,
    }
  },
  components: {
  	  flexLine
  },
  computed: {
    ...mapState({
      isFavorate: state => state.goodsdetail.isFavorate,
      detailInfo: state => state.goodsdetail.detailInfo,
      currentProductId: state => state.goodsdetail.currentProductId,
      user: state => state.member.info
    }),
    favoriteName () {
      return this.isFavorate ? '已关注' : '关注'
    }
  },
  created () {
  },
  mounted () {
    this.time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(this.time)
      } else {
        this.timeDown()
      }
    }, 1000)
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    ...mapMutations({
      saveInfo: 'saveDetailInfo',
      changeIndex: 'changeIndex',
      saveIsFavorate: 'saveIsFavorate'
    }),
    fromNow (time) {
      return this.$moment(time * 1000).fromNow()
    },
    /*
     * getCommentStatus： 去到评论页面
     */
    getCommentStatus () {
      this.changeIndex(2)
    },
    /*
     * productLike： 收藏商品
     */
    productLike () {
      if (this.user) {
        let id = this.detailInfo.goods_id
        productLike(id).then(res => {
          if (res) {
            this.saveIsFavorate(true)
          }
        }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
      } else {
        uni.navigateTo({url:'/pages/home/memberlogin/Login'})
      }
    },
    /*
     * productUnlike： 取消收藏
     */
    productUnlike () {
      if (this.user) {
        let id = this.detailInfo.goods_id
        productUnlike(id).then(res => {
          if (res) {
            this.saveIsFavorate(false)
          }
        })
      } else {
        uni.navigateTo({url:'/pages/home/memberlogin/Login'})
      }
    },

    /*
	 * timeDown: 倒计时
	 */
    timeDown () {
      let end_time = false
      if (this.detailInfo.bargain_info) {
        end_time = this.detailInfo.bargain_info.bargain_endtime
      }
      if (end_time) {
        const endTime = new Date(end_time * 1000)
        const nowTime = new Date()
        let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
        this.day = parseInt(leftTime / (24 * 60 * 60))
        this.hours = this.formate(parseInt((leftTime / (60 * 60)) % 24))
        this.minute = this.formate(parseInt((leftTime / 60) % 60))
        this.second = this.formate(parseInt(leftTime % 60))
        if (leftTime <= 0) {
          this.flag = true
          this.detailInfo.bargain_info = ''
          this.saveInfo(this.detailInfo)
        }
      }
    },
    /*
     * 格式化时间
     */
    formate (time) {
      if (time >= 10) {
        return time
      } else {
        return `0${time}`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.bargain-wrapper{
		.bargain-content{
			padding:.5rem;color:#fff;
			background: #EA3F64;background-image: linear-gradient(to right, #ff5e00, #ea3f3f);
			display: flex;
			.title{flex:1;font-size:$h1;line-height: 1.2rem;}
			.content{width:auto;font-size:$fontSize;line-height: .6rem;
				.em{margin:0 .1rem}
			}
			.arrow{width:1rem;text-align: right;line-height: 1.2rem;}

		}
		.bargain-popup-wrapper{padding:.5rem;color:#333;box-sizing: border-box;padding-bottom: 3rem;
			.mt{font-size:$h2;text-align: center}
			.mc{font-size:$fontSize;
				.line{margin-top:.5rem;}
			}
		}
	}
.ui-detail-info {
	padding: 0 $pageSpace;
	background: #ffffff;
	.ui-flex {
		display: flex;
		/*justify-content: space-between;*/
		align-content: center;
		align-items: center;
		flex-basis: 100%;
		width: auto;
	}
	.info-header {
		padding-top: 0.4rem;
		.h3 {
			color: #333;
			font-size:$subFontSize;
			padding: 0;
			margin: 0;
			font-weight: normal;
			line-height:1rem;
			flex:1;
		}
		.favorite {
			height:2.4rem;
			text-align:center;
			.i{width:2.4rem;display:block;font-size:1.2rem;line-height:1.2rem;color:$primaryColor;}
			.span{font-size:$h6;line-height:1rem;height:1rem;display:block;}
		}
	}
	.goods_advword{font-size:$fontSize;padding:.2rem .4rem;margin-bottom:.5rem;background:$subColor;color:$primaryColor}
	.price {
		padding-bottom: 0.4rem;
		display: flex;
		.span {
			display: block;
			font-weight: normal;
			&.current-price {
				font-size:$fontSize;
				color: $primaryColor;
				line-height: 1rem;
        .price-number{font-size:$h1;font-weight: bold}
			}
			&.num{
				font-size:$fontSize;
				color:#666;
			}
			&.old-price {
				font-size:$fontSize;
				color: rgba(164, 170, 179, 1);
				line-height: 1rem;
				text-decoration: line-through;
				margin-left: 0.3rem;
			}
		}
	}
	.inviter_amount {
		padding-bottom: 0.4rem;
		display: flex;
		.span {
			font-size:$subFontSize;
			color: #4e545d;
		}
	}

	.info-sub {
		border-bottom: 0.5px solid #e8eaed;
		padding-bottom: 0.25rem;
		.p {
			padding: 0;
			margin: 0;
			color: $primaryColor;
			font-size:$h6;
		}
	}

	.info-promotions {
		display: flex;
		justify-content: flex-start;
		align-content: center;
		align-items: center;
		padding: 0.75rem 0;
		border-bottom: 1px dashed #eee;
		line-height:1.5rem;
		.span {
			margin-left: 0.75rem;
			font-size:$fontSize;
			color: rgba(143, 142, 148, 1);
		}
		.img {
			width: 30.4rem;
		}
	}
	.info-promotions .i{font-size:$subFontSize;border:1px solid $primaryColor;color:$primaryColor;padding:0.1rem 0.3rem;border-radius:0.1rem;}
	.info-promotions .left{flex:1}
	.info-promotions .right{width:4rem;text-align: right}

}
.main-content{
	background-color: #fff;
	padding: 0 $pageSpace;
	box-sizing: border-box;
}
.goodsmgdiscountarr-popup-wrapper{
	.mt{
		display: flex;
		height: 2.2rem;
		align-items: center;
		font-size: .8rem;
		color: #333;
		padding: 0 $pageSpace;
		border-bottom: 1px solid #f2f2f2;
		.iconfont{
			margin-left: auto;
			font-size: 1.2rem;
		}
	}
	.mc{
		padding: 0 $pageSpace;
		padding-bottom: 2.8rem;
		.title{
			font-size: .7rem;
			color: #333;
			margin: .65rem 0 .5rem;
		}
		.item{
			font-size: .7rem;
			color: #333;
			background-image: linear-gradient(to right, #fefaf4 , #fff3e0);
			margin-bottom: .5rem;
			padding: .5rem 0rem .5rem .6rem;
			border-radius: .25rem;
		}
	}
}
	.dss-sale .mgdiscount-info{margin-top:$modelSpace;background:#fff;font-size:$subFontSize;color:#666;padding: .5rem $pageSpace }
	.dss-sale .mgdiscount-info .span{margin-right:.5rem;white-space: nowrap;}
	.dss-sale .mgdiscount-info .em{background-image:url(../../../../static/image/home/grade.png);background-repeat:no-repeat;background-position:center;background-size:1rem;text-align:center;color:#fff;padding: .1rem;font-size:$fontSize;width:1rem;height: 1rem;line-height:1rem;display: inline-block;}
</style>