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

<template>
    <view class="div container" v-if="addressApi">
        <view class="div" v-for="(store,index) in storeCartList" :key="index">

            <view class="div cart-item" :show-border="true">
                <view class="div">
                    <view class="div store">
                        <text class="i iconfont">&#xe62d;</text>
                        <text class="span" @click="goNavigate('/pages/home/storedetail/Storedetail',{ id: store.store_id })">{{store.store_name}}</text>
                    </view>
                    <view class="div buy-item" v-for="(goods,index) in store.goods_list" :key="index">
                        <view class="div goods-pic"><image mode="aspectFit" class="img" :src="goods.goods_image_url" @click="goNavigate('/pages/home/goodsdetail/Goodsdetail',{goods_id:goods.goods_id})"/></view>
                        <view class="div goods-info">
                            <view class="dl">
                                <view class="dt goods-name">
                                        <text class="i tag-icon" v-if="goods.xianshi_info">{{goods.xianshi_info.xianshi_title}}</text>
                                        <text class="i tag-icon" v-if="goods.ifgroupbuy">抢购</text>
                                        <text class="i tag-icon" v-if="goods.ifmgdiscount">会员折扣</text>
                                        <text class="i tag-icon" v-if="goods.ifpintuan">拼团</text>
                                        <text class="i tag-icon" v-if="goods.ifbargain">砍价</text>
                                        <text class="i tag-icon" v-if="goods.bl_id">优惠套装</text>
                                        {{goods.goods_name}}
                                </view>
                                <view class="dd goods-subtotal">
                                    <text class="span goods-price">￥{{goods.goods_price}}</text><text v-if="goods.goods_price<goods.goods_original_price" class="span ml-5 goods-original-price">￥{{goods.goods_original_price}}</text>
                                    <text class="span goods-count">×{{goods.goods_num}}</text>
                                </view>
                                <view class="dd">
                                    <view class="div link" v-if="goodsCount>1 && chainList[goods.goods_id] && chainList[goods.goods_id].length" @click="goBuy(goods.goods_id,goods.goods_num)">当前地区可以使用自提点(选择自提点后只能单个商品结算)</view>
                                    <view class="div" v-else>
                                        <view class="div link" v-if="addressApi.allow_offpay==1 && ifshowOffpay && offlineList[goods.goods_id]">该商品支持货到付款</view>
                                    </view>
                                    <view class="div link" v-if="goods.limit == true">该商品不支持配送到此收货地址</view>
                                </view>
                            </view>
                        </view>

                    </view>
                    <view class="div buy-item"  v-if="store.store_mansong_rule_list && store.store_mansong_rule_list.goods_id !=0 && store.store_mansong_rule_list.mansong_goods_name !=''" @click="goNavigate('/pages/home/goodsdetail/Goodsdetail',{goods_id:store.store_mansong_rule_list.goods_id})">
                        <view class="div goods-pic"><image mode="aspectFit" class="img" :src="store.store_mansong_rule_list.goods_image_url"/></view>
                        <view class="div goods-info">
                            <view class="dl">
                                <view class="dt goods-name">
                                        <text class="i tag-icon">赠品</text>
                                        {{store.store_mansong_rule_list.mansong_goods_name}}
                                </view>
                                <view class="dd goods-subtotal">
                                    <text class="span goods-price">￥0.00</text>
                                    <text class="span goods-count">×1</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="div cart-subtotal">

                <view class="div" v-if="chainCount[store.store_id]>0" @click="showChain(store.store_id)">
                    <flex-line class="menu-item" :is-link="true" :show-border="true">
                        <view class="div">
                            <text class="span left-icon iconfont">&#xe6d3;</text>
                            <text class="span">自提门店</text>
                        </view>
                        <text class="span" slot="right">{{chainInfo[store.store_id]?chainInfo[store.store_id].chain_addressname:'请选择'}}</text>
                    </flex-line>
                </view>

                <view class="div" v-if="store.store_voucher_list.length" @click="showVoucher(store.store_id)">
                    <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[store.store_id]}}</text>
                    </flex-line>
                </view>
                <view class="div message">
                    <view class="div field-line-right" ><textarea class="order-message field-input" @change="changeMessage(store.store_id)" v-model="message[store.store_id]" placeholder="店铺订单留言:" ></textarea></view>
                </view>
                <checkout-desc class="desc-item mt-5" title="商品金额" :subtitle="store.store_goods_original_total"></checkout-desc>
                <checkout-desc class="desc-item" title="优惠" v-if="store.store_mansong_rule_list || store.store_goods_discount_total>0" :subtitle="Math.round(((store.store_mansong_rule_list.discount?parseFloat(store.store_mansong_rule_list.discount):0)+parseFloat(store.store_goods_discount_total))*100)/100" :discount="true"></checkout-desc>
                <checkout-desc class="desc-item" title="运费" :subtitle="chainInfo[store.store_id]?0:(addressApi.state == 'fail'?0:addressApi.content[store.store_id])"></checkout-desc>
                <checkout-desc class="desc-item" title="本店合计" :subtitle="totalAmount[store.store_id]"></checkout-desc>
            </view>

            <uni-popup background-color="#fff" :ref="'voucherVisible_'+store.store_id" 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="hideVoucher(store.store_id)">
                        <view class="div common-btn btn" slot="right" @click="selectVoucher('',store.store_id)">不使用</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 store.store_voucher_list" :key="item.voucher_id" @click="selectVoucher(item,store.store_id)">
                        <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>
            <uni-popup background-color="#fff" :ref="'chainVisible_'+store.store_id" 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="hideChain(store.store_id)">
                        <view class="div common-btn btn" slot="right" @click="selectChain('',store.store_id)">不使用</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 chain-item" v-for="(chain,i) in chainList[store.store_id]" :key="i" @click="selectChain(chain,store.store_id)">
                            <view class="div chain-name">{{chain.chain_addressname}}</view>
                            <view class="div chain-desc">{{chain.chain_area_info}}{{chain.chain_address}}</view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
import TitleHeader from '../../../TitleHeader'
import { urlencode } from '@/util/common'
import { getbuyChainList } from '../../../../api/memberBuy'
import CheckoutDesc from './CheckoutDesc'
import flexLine from '../../../flexLine'
export default {
  name: 'CheckoutStore',
  data(){
    return {

      navHeight: 0,

      screenWidth:0,

      totalAmount: {},
      myVoucher: [],
      message: [],
      chainList: {},
      offlineList: {},
      goodsCount: 0,
      chainCount: [],
      chainInfo: [],
      goodsInfo: false
    }
  },
  components:{
    TitleHeader,
    flexLine,
    CheckoutDesc
  },
  props: ['payGoodsList', 'addressInfo', 'storeCartList', 'addressApi', 'finalTotalList', 'ifshowOffpay'],
  created: function () {
    if (this.payGoodsList.offline) {
      var offlineList = {}
      for (var i in this.payGoodsList.offline) {
        offlineList[this.payGoodsList.offline[i].goods_id] = 1
      }
      this.offlineList = offlineList
    }
    for (var store_id in this.storeCartList) {
      this.calcOrder(store_id)
      if (this.addressInfo) {
        var goods_list = JSON.stringify(this.storeCartList[store_id].goods_list)
        this.getbuyChainList(goods_list, this.addressInfo.area_id,store_id)
      }
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },

  methods:{
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },

    showPopup(id){
	  this.$refs[id][0].open()
    },
    hidePopup(id){
      this.$refs[id][0].close()
    },
    goBuy (goods_id, goods_num) {
      var params = { buy_now: 1, cart_id: goods_id + '|' + goods_num }
      uni.navigateTo({ url: '/pages/member/buy/step1'+'?'+urlencode( params )})
    },
    selectChain (chain,store_id) {
        if(chain === ''){
            this.chainInfo[store_id] = ''
        }else{
            this.chainInfo[store_id] = chain
        }
        this.calcOrder(store_id)
        this.$emit('selectChain', this.chainInfo, store_id)
        this.hideChain(store_id)
        this.$forceUpdate()
    },
    getbuyChainList (goods_list, area_id,store_id) {
      getbuyChainList( goods_list, area_id ).then(res => {
        this.chainList[store_id] = res.result.chain_list
        this.chainCount[store_id] = this.chainList[store_id].length
        this.$forceUpdate()
      })
    },
    changeMessage (store_id) {
      this.$emit('changeMessage', this.message[store_id], store_id)
    },
    selectVoucher (voucherInfo, store_id) {
      this.hideVoucher(store_id)
      this.$emit('selectVoucher', voucherInfo, store_id)
      this.storeCartList[store_id].store_voucher_info = voucherInfo
      this.calcOrder(store_id)
    },
    calcOrder (store_id) {
      let price = parseFloat(this.finalTotalList[store_id])
      if (this.storeCartList[store_id].store_voucher_list.length) {
        if (this.storeCartList[store_id].store_voucher_info) {
          price -= parseFloat(this.storeCartList[store_id].store_voucher_info.voucher_price)
          if (typeof (this.myVoucher[store_id]) === 'undefined') {
            this.myVoucher[store_id] = ''
          }
          this.myVoucher.splice(store_id, 1, this.storeCartList[store_id].store_voucher_info.voucher_price + '元')
        } else {
          this.myVoucher.splice(store_id, 1, '不使用')
        }
      }

      if (this.chainInfo[store_id]) {
        price -= this.addressApi.content[store_id]
      }
      if (price < 0) {
        price = 0
      }
      this.totalAmount[store_id] = Math.round(price * 100) / 100
    },
    showVoucher (store_id) {
      this.$refs['voucherVisible_'+store_id][0].open()
    },
    hideVoucher (store_id) {
      this.$refs['voucherVisible_'+store_id][0].close()
    },
    showChain (store_id) {
      this.$refs['chainVisible_'+store_id][0].open()
    },
    hideChain (store_id) {
      this.$refs['chainVisible_'+store_id][0].close()
    }
  }
}
</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.5rem 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;}
    .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;
        min-height: 3.1rem;
        margin-left:4rem;
        position: relative;
        z-index: 1;}
    .buy-item .goods-info .link{font-size:$subFontSize;color:$primaryColor;margin-top:.3rem}
    .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.5rem 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.5rem 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;}
    .chain-item{padding:.5rem;}
    .chain-item .chain-name{font-size:$h2;margin-bottom:.3rem}
    .chain-item .chain-desc{font-size:$fontSize;color:#666}
    .field-line-right{
      .field-input{
        text-align: left !important;
      }
    }
</style>