interest-purchase/src/pageSubs/orders/components/iphOrderGoodCard.vue

<!--
 * @Descripttion: 订单货品卡片
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-03-31 09:42:58
 * @LastEditors: dream
 * @LastEditTime: 2021-04-01 17:12:03
-->
<template>
  <view class="order-good-card iph-bg-fff">
    <view class="u-flex u-p-t-32 u-p-l-32 u-p-r-32">
      <view class="icon-shop iph-icon-shop"></view>
      <view class="u-m-l-8 u-flex-1 u-font-28 u-line-40 text-weight-500">云东仓</view>
    </view>
    <view class="good-card u-border-bottom u-flex">
      <image class="good-image" :src="detail.img" mode="aspectFill" />
      <view class="good-info u-m-l-16 u-flex-1">
        <view class="u-line-2">{{detail.name}}</view>
        <view class="good-info-spce u-m-t-8 u-font-24 u-line-34">{{detail.spce}}</view>
        <view class="u-flex-1 u-flex u-col-bottom">
          <text class="u-m-b-2 u-font-22 u-line-32 bold price-color">¥</text>
          <text class="u-m-l-2 u-font-30 u-line-42 bold price-color">{{detail.salesPrice}}</text>
          <text class="u-flex-1 u-text-right">x{{detail.num}}</text>
        </view>
      </view>
    </view>
    <view class="warehouse-delivery">
      <view class="u-flex" @click="changeDelivery">
        <view class="u-flex-1">配送</view>
        <view class="u-m-r-8">配送方式</view>
        <view class="enter-icon iph-icon-enter"></view>
      </view>
      <view class="u-m-t-4 u-text-right">云东仓运费金额¥200</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'orderGoodCard',
  data () {
    return {
      detail: {
        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
        name: '华硕天选',
        spce: '一件',
        salesPrice: 468,
        num: 1
      }
    }
  },
  methods: {
    changeDelivery () {
      uni.showModal({
        title: '配送方式说明',
        content: '100元-200元区间收费（当前运费200元）',
        showCancel: false,
        confirmText: '我知道了',
        confirmColor: '#1677FF',
        success: (res) => {
          if (res.confirm) {
            console.log('我知道了')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-good-card {
  .icon-shop {
    width: 28px;
    height: 28px;
  }
  .good-card {
    margin: 0 32px;
    padding: 32px 0;
    .good-image {
      width: 172px;
      height: 172px;
      border-radius: 8px;
    }
    .good-info {
      display: flex;
      flex-direction: column;
      height: 172px;
      .good-info-spce {
        color: $iph-desc-text;
      }
    }
  }
  .warehouse-delivery {
    padding: 32px;
    .enter-icon {
      width: 20px;
      height: 20px;
    }
  }
}
</style>