成都网站建设 工资,公示区信息查询方法,网赌网站怎么做的,商城网站建设特点文章目录05-结算-收货地址-添加06-结算-收货地址-修改07-结算-提交订单05-结算-收货地址-添加 目的#xff1a;实现收货地址的添加。 大致步骤#xff1a;
独立组件#xff0c;准备一个对话框完成表单布局完成确认添加操作
落的代码#xff1a;
1.独立组件#xff0c;准…
文章目录05-结算-收货地址-添加06-结算-收货地址-修改07-结算-提交订单05-结算-收货地址-添加 目的实现收货地址的添加。 大致步骤
独立组件准备一个对话框完成表单布局完成确认添加操作
落的代码
1.独立组件准备一个对话框 src/views/member/pay/components/address-edit.vue 添加地址组件
templateXtxDialog title添加收货地址 v-model:visibledialogVisiblediv classaddress-edit表单/divtemplate v-slot:footerXtxButton typegray stylemargin-right:20px取消/XtxButtonXtxButton typeprimary确认/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 langless
.address-edit {}
/stylesrc/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 clickopenAddressEdit() classbtn添加地址/XtxButton2.完成表单布局 src/views/member/pay/components/address-edit.vue 结构和样式 div classxtx-formdiv classxtx-form-itemdiv classlabel收货人/divdiv classfieldinput classinput placeholder请输入收货人 //div/divdiv classxtx-form-itemdiv classlabel手机号/divdiv classfieldinput classinput placeholder请输入手机号 //div/divdiv classxtx-form-itemdiv classlabel地区/divdiv classfieldXtxCity placeholder请选择所在地区//div/divdiv classxtx-form-itemdiv classlabel详细地址/divdiv classfieldinput classinput placeholder请输入详细地址 //div/divdiv classxtx-form-itemdiv classlabel邮政编码/divdiv classfieldinput classinput placeholder请输入邮政编码 //div/divdiv classxtx-form-itemdiv classlabel地址标签/divdiv classfieldinput classinput 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 classplaceholder{{placeholder}}/span3.完成确认添加操作 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.provinceCodeformData.cityCode data.cityCodeformData.countyCode data.countyCodeformData.fullLocation data.fullLocation}return { dialogVisible, open, formData, changeCty }div classxtx-formdiv classxtx-form-itemdiv classlabel收货人/divdiv classfieldinput v-modelformData.receiver classinput placeholder请输入收货人 //div/divdiv classxtx-form-itemdiv classlabel手机号/divdiv classfieldinput v-modelformData.contact classinput placeholder请输入手机号 //div/divdiv classxtx-form-itemdiv classlabel地区/divdiv classfieldXtxCityplaceholder请选择所在地区:fullLocationform.fullLocationchangechangeCty//div/divdiv classxtx-form-itemdiv classlabel详细地址/divdiv classfieldinput v-modelformData.address classinput placeholder请输入详细地址 //div/divdiv classxtx-form-itemdiv classlabel邮政编码/divdiv classfieldinput v-modelformData.postalCode classinput placeholder请输入邮政编码 //div/divdiv classxtx-form-itemdiv classlabel地址标签/divdiv classfieldinput v-modelformData.addressTags classinput placeholder请输入地址标签逗号分隔 //div/div/divsrc/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 classplaceholder v-if!fullLocation{{placeholder}}/spansrc/views/member/pay/components/address-edit.vue 进行提交操作 // 选择地区const changeCty (data) {formData.provinceCode data.provinceCodeformData.cityCode data.cityCodeformData.countyCode data.countyCodeformData.fullLocation data.fullLaction}// 提交操作const submit () {addAddress(formData).then(data {// 添加成功Message({ text: 添加收货地址成功, type: success })formData.id data.result.iddialogVisible.value falseemit(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-propsprops.list.unshift(JSON.parse(json))}return {showAddress,dialogVisible,selectedAddress,openDialog,confirmAddress,addressEdit,openAddressEdit,successHandler}!-- 添加地址 --AddressEdit refaddressEdit on-successsuccessHandler /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 clickopenAddressEdit(showAddress) v-ifshowAddress hrefjavascript:;修改地址/a2.再添加组件open函数处接收数据赋值给表单修改标题 src/views/member/pay/address-edit.vue const formData reactive({id: ,receiver: ,contact: ,provinceCode: ,cityCode: ,countyCode: ,fullLocation: ,address: ,postalCode: ,addressTags: ,isDefault: 0})XtxDialog :title(formData.id?编辑:添加)收货地址 v-model:visibledialogVisible3.封装一个API接口函数实现修改在提交事件中合并修改操作 src/api/order.js
/*** 编辑收货地址信息* param {Object} address - 地址对象*/
export const editAddress (address) {return request(/member/address, put, address)
}src/views/member/pay/address-edit.vue // 打开对话框函数const open (address) {// 先填充数据 - 编辑if (address.id) {for (const key in formData) {formData[key] address[key]}} else {// 先清空数据 - 添加for (const key in formData) {if (key ! isDefault) {formData[key] }}}dialogVisible.value true}// 提交操作const app getCurrentInstance()const submit () {if (formData.id) {editAddress(formData).then(data {// 修改成功Message(app, { text: 修改收货地址成功, type: success })dialogVisible.value falseemit(on-success, formData)})} else {addAddress(formData).then(data {// 添加成功Message(app, { text: 添加收货地址成功, type: success })formData.id data.result.iddialogVisible.value falseemit(on-success, formData)})}}4.父组件修改数据 src/views/member/pay/components/checkout-address.vue // 成功const successHandler (formData) {const editAddress props.list.find(item item.id formData.id)if (editAddress) {// 修改for (const key in editAddress) {editAddress[key] formData[key]}} else {// 添加const json JSON.stringify(formData) // 需要克隆下不然使用的是对象的引用// eslint-disable-next-line vue/no-mutating-propsprops.list.unshift(JSON.parse(json))}07-结算-提交订单 目的汇总提交订单需要的数据进行提交。 大致步骤
定义需要提交的数据对象绑定提交订单点击事件进行提交即可
落的代码
1.定义需要提交的数据对象 src/views/member/pay/checkout.vue setup () {const checkoutInfo ref(null)findCheckoutInfo().then(data {checkoutInfo.value data.result// 设置提交时候的商品requestParams.goods checkoutInfo.value.goods.map(item {return {skuId: item.skuId,count: item.count}})})// 需要提交的字段const requestParams reactive({addressId: null,deliveryTimeType: 1,payType: 1,buyerMessage: ,goods: []})2.绑定提交订单点击事件进行提交即可 src/api/order.js 提交订单API函数
/*** 提交订单* param {Object} order - 订单信息对象*/
export const createOrder (order) {return request(/member/order, post, order)
}src/views/member/pay/checkout.vue 提交订单 !-- 提交订单 --div classsubmitXtxButton clicksubmitOrder typeprimary提交订单/XtxButton/div// 提交订单const router useRouter()const submitOrder () {if (!requestParams.addressId) return Message({ text: 请选择收货地址 })createOrder(requestParams).then(data {router.push({ path: /member/pay, query: { id: data.result.id } })})}return { checkoutInfo, changeAddress, submitOrder }
