vue3 之商城项目—结算模块

jiojio冲冲冲

已于 2024-02-15 19:01:12 修改

阅读量654

点赞数 10

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript 前端 css3 element

于 2024-02-15 19:00:58 首次发布

本文链接：https://blog.csdn.net/weixin_42268006/article/details/136122228

路由配置

在这里插入图片描述
chekout/index.vue

<script setup>
const checkInfo = {
   
   }  // 订单对象
const curAddress = {
   
   }  // 地址对象
</script>
<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <div class="wrapper">
        <!-- 收货地址 -->
        <h3 class="box-title">收货地址</h3>
        <div class="box-body">
          <div class="address">
            <div class="text">
              <div class="none" v-if="!curAddress">您需要先添加收货地址才可提交订单。</div>
              <ul v-else>
                <li><span>收<i />货<i />人：</span>{
   
   {
   
    curAddress.receiver }}</li>
                <li><span>联系方式：</span>{
   
   {
   
    curAddress.contact }}</li>
                <li><span>收货地址：</span>{
   
   {
   
    curAddress.fullLocation }} {
   
   {
   
    curAddress.address }}</li>
              </ul>
            </div>
            <div class="action">
              <el-button size="large" @click="toggleFlag = true">切换地址</el-button>
              <el-button size="large" @click="addFlag = true">添加地址</el-button>
            </div>
          </div>
        </div>
        <!-- 商品信息 -->
        <h3 class="box-title">商品信息</h3>
        <div class="box-body">
          <table class="goods">
            <thead>
              <tr>
                <th width="520">商品信息</th>
                <th width="170">单价</th>
                <th width="170">数量</th>
                <th width="170">小计</th>
                <th width="170">实付</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in checkInfo.goods" :key="i.id">
                <td>
                  <a href="javascript:;" class="info">
                    <img :src="i.picture" alt="">
                    <div class="right">
                      <p>{
   
   {
   
    i.name }}</p>
                      <p>{
   
   {
   
    i.attrsText }}</p>
                    </div>
                  </a>
                </td>
                <td>&yen;{
   
   {
   
    i.price }}</td>
                <td>{
   
   {
   
    i.price }}</td>
                <td>&yen;{
   
   {
   
    i.totalPrice }}</td>
                <td>&yen;{
   
   {
   
    i.totalPayPrice }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 配送时间 -->
        <h3 class="box-title">配送时间</h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:;">不限送货时间：周一至周日</a>
          <a class="my-btn" href="javascript:;">工作日送货：周一至周五</a>
          <a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日</a>