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

<template>
    <view class="div container">
        <view class="div">

            <view class="div cart-item">
                <view class="div buy-item" v-for="(goods,index) in storeCartList" :key="index">
                    <view class="div goods-pic"><image mode="aspectFit" class="img" :src="goods.pgoods_image"/></view>
                    <view class="div goods-info">
                        <view class="dl">
                            <view class="dt goods-name">{{goods.pgoods_name}}</view>
                            <view class="dd goods-subtotal">
                                <text class="span goods-price">{{goods.pgoods_points}}积分</text>
                                <text class="span goods-count">×{{goods.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="订单留言:"></textarea></view>
                </view>

                <checkout-desc class="desc-item" title="本店合计" :subtitle="totalAmount"></checkout-desc>
            </view>

        </view>
    </view>
</template>

<script>
import CheckoutDesc from './CheckoutDesc'
import flexLine from '../../../flexLine'
export default {
  name: 'CheckoutStore',
  data () {
    return {

      message: ''
    }
  },
  components: {
    CheckoutDesc,
    flexLine
  },
  props: ['storeCartList', 'totalAmount'],
  created: function () {

  },
  methods: {
    changeMessage (store_id) {
      this.$emit('changeMessage', this.message)
    }
  }
}
</script>

<style scoped lang="scss">
    .container{background: #fff;padding:0 $pageSpace}
    .store{    position: relative;
        z-index: 1;
        display: block;
        height: 0.9rem;
        padding: 0.5rem;
        font-size:$subFontSize;
        line-height: 0.9rem;
        border-bottom: solid 0.05rem #EEE;
    }
    .store .i{
        display: inline-block;
        width: 0.8rem;
        height: 0.9rem;
        margin-right: 0.2rem;
        vertical-align: middle;
    }
    .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: 0;
        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-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}
    .field-line-right{
      .field-input{
        text-align: left !important;
      }
    }
</style>