关于vue3 + Vant4 组件库 日期选择器中参数的格式化

伙伴匹配系统用到了vue3 + Vant4 组件库,在做创建队伍表单的编辑页,引入了Vant4组件库中的

DatePick日期选择,如下:

过期时间 右侧的时间 定义变量为  addTeamData.expireTime(参数)

['xxxx', 'xx', 'xx']默认的格式!(字符串数组表示时间)

 

点击事件--->赋值-->格式化字符串数组

['2023','08','13'] ----> [2023-08-13]

const onConfirm = ({selectedValues}) => {
addTeamData.value.expireTime = selectedValues.join('-');
showPicker.value=false;
}

传参的时候格式化 [2023-08-13]参数

//提交
const onSubmit = async () => {

  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status),
    expireTime : moment(addTeamData.value.expireTime).format("YYYY-MM-DD HH:mm:ss")
  }
  //todo 前端数据校验
  const res = await myAxious.post("/team/add",postData);
  if (res?.code === 0 && res.data){
    Toast.success("添加成功");
    router.push({
      path:'/team',
      replace:true,
    });
  }else {
    Toast.fail("添加失败")
  }
}

后端 yml文件

spring:
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: Asia/Shanghai

-----------------------------------------------------结果----------------------------------------------------------------------

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,你需要在后端创建一个定时任务,用于监测订单是否超时,并将超时的订单状态设置为“取消”。 在前端,可以使用Vue3和Vant4来实现订单超时取消功能。具体步骤如下: 1. 创建一个定时器,用于监测订单是否超时。可以使用Vue3的watch()函数监测订单状态是否为“待支付”,如果是,则设置一个定时器,定时器时间为订单超时时间减去当前时间,当定时器时间到达后,触发取消订单的操作。 2. 在取消订单的操作,向后端发送取消订单的请求,并更新订单状态为“取消”。 3. 在前端界面,可以使用Vant4的弹窗组件来提示用户订单已经超时取消。可以在取消订单的操作,弹出一个提示框,提示用户订单已经超时取消。 下面是一个简单的示例代码: ``` <template> <div> <van-button @click="payOrder">支付订单</van-button> </div> </template> <script> import { ref, watch } from 'vue'; import { Dialog, Toast } from 'vant'; export default { setup() { const orderStatus = ref('待支付'); const orderTimeout = ref(60); // 订单超时时间为60秒 // 监测订单状态是否为“待支付”,如果是,则设置定时器 watch(orderStatus, (newVal) => { if (newVal === '待支付') { const timer = setInterval(() => { orderTimeout.value -= 1; if (orderTimeout.value <= 0) { clearInterval(timer); cancelOrder(); } }, 1000); } }); // 取消订单操作 const cancelOrder = () => { // 向后端发送取消订单的请求,并更新订单状态为“取消” // ... // 弹出提示框,提示用户订单已经超时取消 Dialog.alert({ title: '订单已取消', message: '订单已超时取消,请重新下单', }); }; // 支付订单操作 const payOrder = () => { // 向后端发送支付订单的请求 // ... // 更新订单状态为“已支付” orderStatus.value = '已支付'; // 弹出提示框,提示用户支付成功 Toast.success('支付成功'); }; return { orderStatus, orderTimeout, cancelOrder, payOrder, }; }, }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值