tnbapp/src/views/mall/ConfirmOrder.vue

<template>
  <el-row class="movie-list">
    <el-col :md="20">
      <el-row>
        <h3>确认收货地址</h3>
        <el-divider/>
        <div v-for="(item, index) in addresses">
          <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
            <el-radio v-model="item.radio" label="1">{{item.address}}</el-radio>
          </el-row>
        </div>
      </el-row>
      <el-row>
        <h3>确认订单信息</h3>
        <el-divider/>
        <el-table
          :data="dataList"
          :show-header="true"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed="left"
            label="商品信息"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col :md="4">
                  <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
                </el-col>
                <el-col :md="20">
                  <router-link target="_blank" style="text-decoration-line: none" :to="`/mall/item?id=${scope.row.productId}`">
                    <span>{{scope.row.title}}</span>
                  </router-link>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            prop="sku"
            label="sku"
          />
          <el-table-column
            label="单价"
          >
            <template slot-scope="scope">
              <span style="color: red">￥{{scope.row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="num"
            label="数量"
          />
          <el-table-column
            prop="num"
            label="小计"
          />
        </el-table>
        <el-divider/>
        <el-form>
          <el-form-item>
            <span style="position: relative; bottom: 0; right: 0; color:blue">
              已选商品 <span style="color: red">{{dataList.length}}</span> 件
            </span>
            <span style="position: relative; bottom: 0; right: 0; color:blue">
              合计（不含运费）： <span style="color: red">{{totalPrice}}</span> 元
            </span>
            <el-button
              size="mini"
              type="danger"
              @click="submit">
              提交订单
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'ConfirmOrder',
  data() {
    return {
      radio: '1',
      addresses: [
        {
          radio: '1',
          address: '云南省 迪庆藏族自治州 香格里拉县 小中甸镇'
        },
        {
          radio: '2',
          address: '云南省 昆明市 安宁市 连然街道'
        },
        {
          radio: '3',
          address: '四川省 成都市 武侯区 桂溪街道'
        }
      ],
      dataList: [
        {
          productId: 1,
          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
          price: 1.11,
          num: 1,
          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
        },
        {
          productId: 2,
          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
          price: 2.32,
          num: 1,
          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
        },
        {
          productId: 3,
          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
          price: 11.12,
          num: 3,
          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
        },
        {
          productId: 4,
          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
          price: 12.22,
          num: 4,
          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
        },
      ],
      totalPrice: 22.22
    }
  },
  created() {
    document.title = '确认订单'
  },
  methods: {
    submit() {
      const loading = this.$loading({
        lock: true,
        text: '订单已提交, 跳转到支付页面',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.$router.push({
          path: '/mall/pay',
          query: {
            pageNumber: 1
          }
        })
      }, 5000);
    }
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}

.movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}
</style>