Vue3电商项目实战-结算&支付 305-结算-收货地址-添加06-结算-收货地址-修改07-结算-提交订单

Posted 天亮^说晚安-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3电商项目实战-结算&支付 305-结算-收货地址-添加06-结算-收货地址-修改07-结算-提交订单相关的知识，希望对你有一定的参考价值。

文章目录

05-结算-收货地址-添加

目的：实现收货地址的添加。

大致步骤：

  • 独立组件，准备一个对话框
  • 完成表单布局
  • 完成确认添加操作

落的代码：

1.独立组件，准备一个对话框
src/views/member/pay/components/address-edit.vue 添加地址组件

<template>
  <XtxDialog title="添加收货地址" v-model:visible="dialogVisible">
    <div class="address-edit">
      表单
    </div>
    <template v-slot:footer>
      <XtxButton type="gray" style="margin-right:20px">取消</XtxButton>
      <XtxButton type="primary">确认</XtxButton>
    </template>
  </XtxDialog>
</template>
<script>
import  ref  from 'vue'
export default 
  name: 'AddressEdit',
  setup () 
    const dialogVisible = ref(false)
    // 打开函数
    const open = () => 
      dialogVisible.value = true
    
    return  dialogVisible, open 
  

</script>
<style scoped lang="less">
.address-edit 


</style>

src/views/member/pay/components/checkout-address.vue 使用添加地址组件

    // 添加收货地址组件
+   const addressEdit = ref(null)
+   const openAddressEdit = () => 
+     addressEdit.value.open()
+   
    return 
      showAddress,
      dialogVisible,
      selectedAddress,
      openDialog,
      confirmAddress,
+      addressEdit,
+      openAddressEdit
    

<XtxButton @click="openAddressEdit()" class="btn">添加地址</XtxButton>

2.完成表单布局
src/views/member/pay/components/address-edit.vue 结构和样式

    <div class="xtx-form">
      <div class="xtx-form-item">
        <div class="label">收货人：</div>
        <div class="field">
          <input class="input" placeholder="请输入收货人" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">手机号：</div>
        <div class="field">
          <input class="input" placeholder="请输入手机号" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">地区：</div>
        <div class="field">
          <XtxCity placeholder="请选择所在地区"/>
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">详细地址：</div>
        <div class="field">
          <input class="input" placeholder="请输入详细地址" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">邮政编码：</div>
        <div class="field">
          <input class="input" placeholder="请输入邮政编码" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">地址标签：</div>
        <div class="field">
          <input class="input" placeholder="请输入地址标签，逗号分隔" />
        </div>
      </div>
    </div>

.xtx-dialog 
  :deep(.wrapper)
    width: 780px;
    .body 
      font-size: 14px;
    
  

.xtx-form 
  padding: 0;
  input 
    outline: none;
    &::placeholder 
      color: #ccc;
    
  

.xtx-city 
  width: 320px;
  :deep(.select) 
    height: 50px;
    line-height: 48px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    .placeholder 
      color: #ccc;
    
    i 
      color: #ccc;
      font-size: 18px;
    
    .value 
      font-size: 14px;
    
  
  :deep(.option) 
    top: 49px;

src/components/library/xtx-city.vue 暴露占位文字

    placeholder: 
      type: String,
      default: '请选择配送地址'
    

<span v-if="!fullName" class="placeholder">placeholder</span>

3.完成确认添加操作
src/views/member/pay/components/address-edit.vue 动态绑定表单

    // 表单数据
    const formData = reactive(
      receiver: '',
      contact: '',
      provinceCode: '',
      cityCode: '',
      countyCode: '',
      address: '',
      postalCode: '',
      addressTags: '',
      isDefault: 0,
      fullLocation: ''
    )
    // 选择地区
    const changeCty = (data) => 
      formData.provinceCode = data.provinceCode
      formData.cityCode = data.cityCode
      formData.countyCode = data.countyCode
      formData.fullLocation = data.fullLocation
    
    return  dialogVisible, open, formData, changeCty 

    <div class="xtx-form">
      <div class="xtx-form-item">
        <div class="label">收货人：</div>
        <div class="field">
+          <input v-model="formData.receiver" class="input" placeholder="请输入收货人" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">手机号：</div>
        <div class="field">
+          <input v-model="formData.contact" class="input" placeholder="请输入手机号" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">地区：</div>
        <div class="field">
          <XtxCity
            placeholder="请选择所在地区"
+            :fullLocation="form.fullLocation"
+            @change="changeCty"
          />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">详细地址：</div>
        <div class="field">
+          <input  v-model="formData.address" class="input" placeholder="请输入详细地址" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">邮政编码：</div>
        <div class="field">
+          <input  v-model="formData.postalCode" class="input" placeholder="请输入邮政编码" />
        </div>
      </div>
      <div class="xtx-form-item">
        <div class="label">地址标签：</div>
        <div class="field">
+          <input v-model="formData.addressTags" class="input" placeholder="请输入地址标签，逗号分隔" />
        </div>
      </div>
    </div>

src/api/order.js 接口函数

/**
 * 添加收货地址信息
 * @param Object address - 地址对象
 */
export const addAddress = (address) => 
  return request('/member/address', 'post', address)

src/components/library/xtx-city.vue 提供占位文字属性


    placeholder: 
      type: String,
      default: '请选择配送地区'
    

<span class="placeholder" v-if="!fullLocation">placeholder</span>

src/views/member/pay/components/address-edit.vue 进行提交操作

    // 选择地区
    const changeCty = (data) => 
      formData.provinceCode = data.provinceCode
      formData.cityCode = data.cityCode
      formData.countyCode = data.countyCode
+      formData.fullLocation = data.fullLaction
    
+    // 提交操作
+    const submit = () => 
+      addAddress(formData).then(data => 
+        // 添加成功
+        Message( text: '添加收货地址成功', type: 'success' )
+        formData.id = data.result.id
+        dialogVisible.value = false
+        emit('on-success', formData)
+      )
+    
+    return  dialogVisible, open, formData, changeCty, submit

src/views/member/pay/components/checkout-address.vue 接受添加成功的地址对象

+    // 成功
+    const successHandler = (formData) => 
+      const json = JSON.stringify(formData)  // 需要克隆下，不然使用的是对象的引用
+      // eslint-disable-next-line vue/no-mutating-props
+      props.list.unshift(JSON.parse(json))
+    
    return 
      showAddress,
      dialogVisible,
      selectedAddress,
      openDialog,
      confirmAddress,
      addressEdit,
      openAddressEdit,
+      successHandler
    

    <!-- 添加地址 -->
    <AddressEdit ref="addressEdit" @on-success="successHandler" />

src/views/member/pay/components/address-edit.vue 每次打开对话框清空表单

    // 打开函数
    const open = (form) => 
      dialogVisible.value = true
+      // 传人的时候就是清空，否则就是赋值
+      for (const key in formData) 
+        formData[key] = form[key]
+

06-结算-收货地址-修改

目的：在添加收货地址组件基础之上完成修改逻辑。

大致步骤：

  • 打开对话框的时候传人当前需要修改的地址对象
  • 再添加组件open函数处，接收数据赋值给表单，修改标题。
  • 封装一个API接口函数实现修改，在提交事件中合并修改操作
  • 父组件修改数据

落的代码：

1.打开对话框的时候传人当前需需改的地址对象
src/views/member/pay/checkout-address.vue

<a @click="openAddressEdit(showAddress)" v-if="showAddress" href="javascript:;">修改地址</a>

2.再添加组件open函数处，接收数据赋值给表单，修改标题
src/views/member/pay/address-edit.vue

    const formData = reactive(
+      id: '',
      receiver: '',
      contact: '',
      provinceCode: '',
      cityCode: '',
      countyCode: '',
+      fullLocation: '',
      address: '',
      postalCode: '',
      addressTags: '',
      isDefault: 0
    
电商项目实战—— SpringTask实现定时任务




一、前言


　　定时任务在生活中处处体现，例如早上起不来的时候，需要定个闹钟来叫一下自己，那么在程序中哪些场景会用到定时任务呢？订单生成之后要有一个支付的过程，在支付的时候，一看到支付金额，突然觉得太多了，就不支付了，我也不取消订单，就吊着，这样所买商品的库存一直处于锁定状态，少量的还好，要是锁它个几千几万的，别人还买不买了，这个时候，定时取消未支付订单，就很好的解决了这个问题。


二、框架


　　1、SpringTask


　　　　SpringTask是Spring自主研发的轻量级的定时任务工具，不需要引入其他依赖


　　2、Cron表达式


　　　　Cron表达式是一个字符串，其语法格式为：Seconds Minutes Hours DayofMonth Month DayofWeek


　　　　Cron格式中特殊字符有：


 





字符


作用
举例




，（逗号）
列出枚举值


在Minutes域使用5,10，表示在5分和10分的时候各触发一次






-（短横线）
表示触发范围


在Minutes域使用5-10，表示在5到10分内，每分钟触发一次






*（星号）
表示匹配任意值


在Minutes域使用*，表示每分钟都会触发一次






/（左斜杠）


表示开始触发时间


和每个固定时间触发




在Minutes域使用5/10，表示从5分开始触发一次后，每隔


10分钟触发一次






？（问号）


只在DayofMonth和


DayofWeek中匹配任意值


在DayofMonth域使用？，表示每天都触发一次




#（井号）


只在DayofMonth中使用


表示第几个星期几




在DayofMonth域中使用1#3，表示每月的第三个星期日


触发一次






L（大写L）
表示最后


在DayofWeek域使用5L，表示在最后一个星期四触发






 


 


 






　　Cron语法中元素说明






时间元素
可出现的字符


有效数值范围






Seconds
, - * /


0-59








Minutes


, - * /
0-59






Hours


, - * /
0-59






DayofMonth


, - * / ? L W
0-31






Month


, - * /
1-12






DayofWeek


, - * / ? L #
1-7 或 SUN-SAT






三、业务场景


　　· 用户对某商品进行下单操作


　　· 系统需要根据用户购买的商品信息生成订单并锁定商品的库存


　　· 系统设定用户60分钟不支付，自动取消订单


　　· 开启一个定时任务，每隔10分钟进行一次扫描，如果有超时未支付订单，就将订单取消并释放库存商品


四、整合SpringTask


　　1、在config包下新建启动SpringTask启动类SpringTaskConfig




package com.zzb.test.admin.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.annotation.EnableScheduling;

/**
 * 定时任务配置类
 * Created by zzb on 2019/11/26 12:17
 */
@Configuration
@EnableScheduling
public class SpringTaskConfig {
}




　　2、在component包下新建SpringTask配置类OrderTimeOutCancelTask




package com.zzb.test.admin.common;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;


/**
 * 定时任务  订单超时自动取消并释放库存商品
 * Created by zzb on 2019/11/26 11:07
 */
@Component
public class OrderTimeOutCancelTask {

    private static final Logger logger = LoggerFactory.getLogger(OrderTimeOutCancelTask.class);

    // TODO: 2019/11/26 Seconds Minutes Hours DayofMonth Month DayofWeek
    @Scheduled(cron = "0 0/10 * ? * ?")
    public void cancelTimeOutOrder(){

        // TODO: 2019/11/26 从零点开始，每隔10分钟扫描一次，查询未支付订单
        logger.info("取消订单，并释放库存商品");
    }
}




五、测试


　　启动项目，等待10分钟查看日志




 


 


　　项目github地址：https://github.com/18372561381/shoptest


以上是关于Vue3电商项目实战-结算&支付 305-结算-收货地址-添加06-结算-收货地址-修改07-结算-提交订单的主要内容，如果未能解决你的问题，请参考以下文章
 

 电商项目实战—— SpringTask实现定时任务


 两套功能完整的SpringCloud实战项目，一套支付一套电商，拿来即用


 Java通用型支付+电商平台双系统实战


 又一批优质.NET6实战项目，面临永久下线...


 跨境电商平台开发


 SSH网上商城项目实战20在线支付平台的介绍