hlm_pl_mall_h5/pages/member/vrbuy/child/CheckoutStore.vue

<template>
    <view class="div container">
        <view class="div cart-item">
            <view class="div">
                <view class="div store">
                    <text class="i iconfont">&#xe62d;</text>
                    <text class="span">{{storeCartList.store_name}}</text>
                </view>

                <view class="div buy-item">
                    <view class="div goods-pic"><image mode="aspectFit" class="img" :src="storeCartList.goods_image_url"/></view>
                    <view class="div goods-info">
                        <view class="dl">
                            <view class="dt goods-name">{{storeCartList.goods_name}}</view>
                            <view class="dd goods-subtotal">
                                <text class="span goods-price">￥{{storeCartList.goods_price}}</text><text v-if="storeCartList.goods_price<storeCartList.goods_original_price" class="span ml-5 goods-original-price">{{storeCartList.goods_original_price}}</text>
                                <text class="span goods-count">×{{storeCartList.quantity}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="div cart-subtotal">
                <view class="div message">
                    <view class="div field-line-right"><textarea class="order-message field-input" v-model="message" placeholder="店铺订单留言:" @change="changeMessage()" ></textarea></view>
                </view>
                <view class="div" v-if="storeCartList.store_voucher_list.length" @click="showPopup('voucherVisible')">
                    <flex-line class="menu-item" :is-link="true" :show-border="true">
                        <view class="div">
                            <text class="span left-icon iconfont">&#xe6f2;</text>
                            <text class="span">代金券</text>
                        </view>
                        <text class="span" slot="right">{{myVoucher}}</text>
                    </flex-line>
                </view>
                <checkout-desc class="desc-item mt-5" title="商品金额" v-if="storeCartList.goods_discount_total>0" :subtitle="storeCartList.goods_original_total"></checkout-desc>
                <checkout-desc class="desc-item" title="优惠" v-if="storeCartList.goods_discount_total>0" :subtitle="storeCartList.goods_discount_total" :discount="true"></checkout-desc>
                <checkout-desc class="desc-item" title="本店合计" :subtitle="totalAmount"></checkout-desc>
            </view>
            <uni-popup background-color="#fff" ref="voucherVisible" type="right" >
                <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
                <view class="div common-header-wrap">
                    <view :style="'height:'+navHeight+'px'"></view>
                    <view class="common-header-holder"></view>
                    <view class="common-header-fixed">
                    <title-header />
                    <uni-nav-bar title="代金券" class="common-header" left-icon="back" @clickLeft="hidePopup('voucherVisible')">
                        <view class="div common-btn btn" slot="right" @click="selectVoucher('')">不使用</view>
                    </uni-nav-bar>
                </view>
                </view>
                <view class="div common-popup-content">
					<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
                    <view class="div common-voucher common-voucher02" :class="(item.voucher_state != 1)?'disable':''" v-for="(item,index) in storeCartList.store_voucher_list" :key="item.voucher_id" @click="selectVoucher(item)">
                        <view class="div par"><view class="p">订单满{{item.voucher_limit}}元</view><text class="sub sign">￥</text><text class="span">{{item.voucher_price}}</text></view>
                        <view class="div copy">有效期至<view class="p"><br>{{$moment.unix(item.voucher_enddate).format('YYYY.MM.DD')}}</view></view>
                        <text class="i"></text>
                    </view>
					</scroll-view>
                </view>
            </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
import TitleHeader from '../../../TitleHeader'
import CheckoutDesc from './CheckoutDesc'
import flexLine from '../../../flexLine'
export default {
  name: 'CheckoutStore',
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      totalAmount: '',
      message: '',
      myVoucher: '',
    }
  },
  components:{
    TitleHeader,
    flexLine,
    CheckoutDesc
  },
  props: ['storeCartList'],
  created: function () {
    this.calcOrder()
  },
  mounted(){

    // #ifdef  MP-WEIXIN

    this.navHeight = uni.getMenuButtonBoundingClientRect().top

    // #endif

    this.screenWidth=uni.getSystemInfoSync().screenWidth

  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    changeMessage () {
      this.$emit('changeMessage', this.message)
    },
    selectVoucher (voucherInfo) {
      this.hidePopup('voucherVisible')
      this.$emit('selectVoucher', voucherInfo)
      this.storeCartList.store_voucher_info = voucherInfo
      this.calcOrder()
    },
    calcOrder () {
      let price = parseFloat(this.storeCartList.goods_total)
      if (this.storeCartList.store_voucher_list.length) {
        if (this.storeCartList.store_voucher_info) {
          price -= parseFloat(this.storeCartList.store_voucher_info.voucher_price)

          this.myVoucher = this.storeCartList.store_voucher_info.voucher_price + '元'
        } else {
          this.myVoucher = '不使用'
        }
      }
      if (price < 0) {
        price = 0
      }
      this.totalAmount = price
    }

  }
}
</script>

<style scoped lang="scss">
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .container{background: #fff;padding:0 $pageSpace}
    .store{    position: relative;
        z-index: 1;
        display: block;
        height: 0.9rem;
        padding: 0.4rem 0;
        font-size:$subFontSize;
        line-height: 0.9rem;
        background: #fff;
        font-weight: 700;
    }
    .store .i{
        font-size: $h2;
        margin-right: 0.2rem;
        color:$primaryColor;
    }
    .cart-item{background-color: #FFF;
        border-bottom: solid 0.05rem #EEE;}
    .buy-item{    display: block;
        position: relative;
        z-index: 1;
        margin:.5rem 0;
        box-shadow: 0px 4px 4px #f7f7f7;
    }
    .buy-item .goods-pic{display: block;
        width: 3rem;
        height: 3rem;
        position: absolute;
        z-index: 1;
        top: 0rem;
        left: 0rem;
    }
    .buy-item .goods-pic .img{width:100%;
        height:100%;border-radius: 0.2rem;}
    .buy-item .goods-info{    display: block;
        vertical-align: top;
        height: 3.1rem;
        margin-left:4rem;
        position: relative;
        z-index: 1;}
    .buy-item .goods-info .goods-name  {
        height:1.6rem;
        font-size:$subFontSize;
        line-height: .8rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        box-orient: vertical;
        margin-bottom:.5rem;
        font-weight: normal;
        .tag-icon{vertical-align: top}
    }
    .buy-item .goods-info  .goods-type {
        overflow: hidden;
        white-space: nowrap;
        width: 70%;
        height: 0.9rem;
        font-size:$h6;
        line-height: 0.9rem;
        color: #999;
        text-overflow: ellipsis;
    }
    .buy-item .goods-info .goods-original-price{text-decoration: line-through;font-size:$fontSize;color:$descTextColor;font-weight: normal}
    .buy-item .goods-info  .goods-subtotal {
        display: block;
        height: 1rem;
        margin: 0 0.4rem 0 0rem;
        line-height: 1rem;
        font-size:$subFontSize;
        position: relative;
        z-index: 1;
    }
    .buy-item .goods-info  .goods-subtotal .goods-price {
        color: #DB4453;
        font-size:$subFontSize;
        font-weight: 600;
    }
    .buy-item .goods-info  .goods-subtotal  .goods-count {
        font-size:$subFontSize;
        line-height: 1rem;
        position: absolute;
        z-index: 1;
        top: 0rem;
        right: 0rem;
        font-weight: normal;
        color:$descTextColor
    }
    .cart-subtotal{}
    .cart-subtotal .dl {
        position: relative;
        z-index: 1;
        height: 1rem;
        padding: 0.4rem 0 0;
        font-size: 0;
    }
    .cart-subtotal .dt {
        position: absolute;
        z-index: 1;
        top: 0.4rem;
        left: 0.4rem;
        display: block;
        width: 50%;
        height: 1rem;
        font-size:$fontSize;
        line-height: 1rem;
    }
    .cart-subtotal .dd {
        height: 1rem;
        margin: 0 0.4rem 0 50%;
        text-align: right;
        font-size:$fontSize;
        line-height: 1rem;
    }
    .cart-subtotal .message {
        position: relative;
        z-index: 1;
        display: block;
        border-bottom: 1px dashed #eee;
        .order-message{
			background: #FBFBFB;
			margin:.5rem 0;
			font-size:$fontSize;
			padding:.5rem;
			height: 4rem;
			border: 0;
			box-sizing: border-box;
			width: 100%;
		}
    }
    .desc-item {
        height: 1.5rem;
    }
    .common-voucher{margin:0.5rem auto}
    .left-icon{float:left;font-size:$h1;margin-right:0.2rem;}
    .field-line-right{
      .field-input{
        text-align: left !important;
      }
    }
</style>