springboot3+vue3支付宝在线支付案例,渲染购物车内容

springboot3+vue3支付宝在线支付案例,渲染购物车内容！期间遇到了很多问题。

第一个就是时间戳的格式化问题。我使用了vue-moment插件。

---

现在是正常的，但是我为此付出了很多时间去修改错误。

---

 

踩坑了啊。虽然我们安装的是npm install vue-moment

但是，实际上，main.js全局引用的时候是这样子写的。我之前写成了import moment from 'vue-moment'。一直报错。大家务必要注意了。

---

<script setup>
import {ref,onMounted} from 'vue'
import {userCartStore} from '@/stores/cart'

//获取实例对象
const orderStore  = userCartStore()
//定义当前页面的绑定数据
const orderListData = ref([])
//html +css 
onMounted(()=>{
  orderStore.getCartList()
})
//定义时间戳格式化方法
const gridDateFormatter = (row,column,cellValue,index)=>{
      const daterc = row[column.property]
      return moment(Number(daterc)).format('YYYY-MM-DD HH:mm:ss')
    }
</script>
<template>
  <h3>我是购物车信息列表页面</h3>
  <div style="padding: 12px;width:100%">
    <el-table stripe :data="orderStore.cartList">
      <el-table-column label="id" prop="id" />
      <el-table-column label="订单名字" prop="goodsName" />
      <el-table-column label="订单编号" prop="orderNo"/>
      <el-table-column lable="支付宝订单号" prop="alipayNo" />
      <el-table-column label="总价格" prop="total"/>
      <el-table-column :formatter="gridDateFormatter" label="创建时间" prop="createTime" />
      <el-table-column label="结算时间" prop="payTime"/>
      <el-table-column label="订单状态"  prop="status==0?'待支付':'已支付'" />
      <el-table-column>
        <template v-slot="scope">
          <el-button @click="pay(scope.row)" type="primary" size="small">支付</el-button>
          <el-button @click="cancel(scope.row.id)" type="danger" size="small">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

 这个就是购物车的页面内容了。里面我们定义了一个函数。用来格式化时间戳。

//定义时间戳格式化方法
const gridDateFormatter = (row,column,cellValue,index)=>{
      const daterc = row[column.property]
      return moment(Number(daterc)).format('YYYY-MM-DD HH:mm:ss')
    }