揭阳网站制作平台,wordpress主题替换谷歌,门户网站制作费用,营销策划与运营方案01. 订单结算台
所谓的 “立即结算”#xff0c;本质就是跳转到订单结算台#xff0c;并且跳转的同时#xff0c;需要携带上对应的订单参数。
而具体需要哪些参数#xff0c;就需要基于 【订单结算台】 的需求来定。
(1) 静态布局 准备静态页面
templatedi…01. 订单结算台
所谓的 “立即结算”本质就是跳转到订单结算台并且跳转的同时需要携带上对应的订单参数。
而具体需要哪些参数就需要基于 【订单结算台】 的需求来定。
(1) 静态布局 准备静态页面
templatediv classpayvan-nav-bar fixed title订单结算台 left-arrow click-left$router.go(-1) /!-- 地址相关 --div classaddressdiv classleft-iconvan-icon namelogistics //divdiv classinfo v-iftruediv classinfo-contentspan classname小红/spanspan classmobile13811112222/span/divdiv classinfo-address江苏省 无锡市 南长街 110号 504/div/divdiv classinfo v-else请选择配送地址/divdiv classright-iconvan-icon namearrow //div/div!-- 订单明细 --div classpay-listdiv classlistdiv classgoods-itemdiv classleftimg srchttp://cba.itlike.com/public/uploads/10001/20230321/8f505c6c437fc3d4b4310b57b1567544.jpg alt //divdiv classrightp classtit text-ellipsis-2三星手机 SAMSUNG Galaxy S23 8GB256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23/pp classinfospan classcountx3/spanspan classprice¥9.99/span/p/div/div/divdiv classflow-num-boxspan共 12 件商品合计/spanspan classmoney1219.00/span/divdiv classpay-detaildiv classpay-cellspan订单总金额/spanspan classred1219.00/span/divdiv classpay-cellspan优惠券/spanspan无优惠券可用/span/divdiv classpay-cellspan配送费用/spanspan v-iffalse请先选择配送地址/spanspan v-else classred0.00/span/div/div!-- 支付方式 --div classpay-wayspan classtit支付方式/spandiv classpay-cellspanvan-icon namebalance-o /余额支付可用 ¥ 999919.00 元/span!-- span请先选择配送地址/span --span classredvan-icon namepassed //span/div/div!-- 买家留言 --div classbuytipstextarea placeholder选填买家留言50字内 name id cols30 rows10/textarea/div/div!-- 底部提交 --div classfooter-fixeddiv classleft实付款span999919/span/divdiv classtipsbtn提交订单/div/div/div
/templatescript
export default {name: PayIndex,data () {return {}},methods: {}
}
/scriptstyle langless scoped
.pay {padding-top: 46px;padding-bottom: 46px;::v-deep {.van-nav-bar__arrow {color: #333;}}
}
.address {display: flex;align-items: center;justify-content: flex-start;padding: 20px;font-size: 14px;color: #666;position: relative;background: url(/assets/border-line.png) bottom repeat-x;background-size: 60px auto;.left-icon {margin-right: 20px;}.right-icon {position: absolute;right: 20px;top: 50%;transform: translateY(-7px);}
}
.goods-item {height: 100px;margin-bottom: 6px;padding: 10px;background-color: #fff;display: flex;.left {width: 100px;img {display: block;width: 80px;margin: 10px auto;}}.right {flex: 1;font-size: 14px;line-height: 1.3;padding: 10px;padding-right: 0px;display: flex;flex-direction: column;justify-content: space-evenly;color: #333;.info {margin-top: 5px;display: flex;justify-content: space-between;.price {color: #fa2209;}}}
}.flow-num-box {display: flex;justify-content: flex-end;padding: 10px 10px;font-size: 14px;border-bottom: 1px solid #efefef;.money {color: #fa2209;}
}.pay-cell {font-size: 14px;padding: 10px 12px;color: #333;display: flex;justify-content: space-between;.red {color: #fa2209;}
}
.pay-detail {border-bottom: 1px solid #efefef;
}.pay-way {font-size: 14px;padding: 10px 12px;border-bottom: 1px solid #efefef;color: #333;.tit {line-height: 30px;}.pay-cell {padding: 10px 0;}.van-icon {font-size: 20px;margin-right: 5px;}
}.buytips {display: block;textarea {display: block;width: 100%;border: none;font-size: 14px;padding: 12px;height: 100px;}
}.footer-fixed {position: fixed;background-color: #fff;left: 0;bottom: 0;width: 100%;height: 46px;line-height: 46px;border-top: 1px solid #efefef;font-size: 14px;display: flex;.left {flex: 1;padding-left: 12px;color: #666;span {color:#fa2209;}}.tipsbtn {width: 121px;background: linear-gradient(90deg,#f9211c,#ff6335);color: #fff;text-align: center;line-height: 46px;display: block;font-size: 14px;}
}
/style(2) 获取收货地址列表
1 封装获取地址的接口
import request from /utils/request// 获取地址列表
export const getAddressList () {return request.get(/address/list)
}2 页面中 - 调用获取地址
data () {return {addressList: []}
},
computed: {selectAddress () {// 这里地址管理不是主线业务直接获取默认第一条地址return this.addressList[0] }
},
async created () {this.getAddressList()
},
methods: {async getAddressList () {const { data: { list } } await getAddressList()this.addressList list}
}3 页面中 - 进行渲染
computed: {longAddress () {const region this.selectAddress.regionreturn region.province region.city region.region this.selectAddress.detail}
},div classinfo v-ifselectAddress?.address_iddiv classinfo-contentspan classname{{ selectAddress.name }}/spanspan classmobile{{ selectAddress.phone }}/span/divdiv classinfo-address{{ longAddress }}/div
/div(3) 订单结算 - 封装通用接口
思路分析 这里的订单结算有两种情况 购物车结算需要两个参数 ① mode“cart” ② cartIds“cartId, cartId” 立即购买结算需要三个参数 ① mode“buyNow” ② goodsId“商品id” ③ goodsSkuId“商品skuId”【商品规格如大小、颜色】
都需要跳转时将参数传递过来 封装通用 API 接口 api/order
import request from /utils/requestexport const checkOrder (mode, obj) {return request.get(/checkout/order, {params: {mode,delivery: 0,couponId: 0,isUsePoints: 0,...obj}})
}(4) 订单结算 - 购物车结算
1 跳转时传递查询参数
layout/cart.vue
div clickgoPay结算({{ selCount }})/divgoPay () {if (this.selCount 0) {this.$router.push({path: /pay,query: {mode: cart,cartIds: this.selCartList.map(item item.id).join(,)}})}
}2 页面中接收参数, 调用接口获取数据
data () {return {order: {},personal: {}}
},computed: {mode () {return this.$route.query.mode},cartIds () {return this.$route.query.cartIds}
}async created () {this.getOrderList()
},async getOrderList () {if (this.mode cart) {const { data: { order, personal } } await checkOrder(this.mode, { cartIds: this.cartIds })this.order orderthis.personal personal}
}3 基于数据进行渲染
!-- 订单明细 --
div classpay-list v-iforder.goodsListdiv classlistdiv classgoods-item v-foritem in order.goodsList :keyitem.goods_iddiv classleftimg :srcitem.goods_image alt //divdiv classrightp classtit text-ellipsis-2{{ item.goods_name }}/pp classinfospan classcountx{{ item.total_num }}/spanspan classprice¥{{ item.total_pay_price }}/span/p/div/div/divdiv classflow-num-boxspan共 {{ order.orderTotalNum }} 件商品合计/spanspan classmoney{{ order.orderTotalPrice }}/span/divdiv classpay-detaildiv classpay-cellspan订单总金额/spanspan classred{{ order.orderTotalPrice }}/span/divdiv classpay-cellspan优惠券/spanspan无优惠券可用/span/divdiv classpay-cellspan配送费用/spanspan v-if!selectAddress请先选择配送地址/spanspan v-else classred0.00/span/div/div!-- 支付方式 --div classpay-wayspan classtit支付方式/spandiv classpay-cellspanvan-icon namebalance-o /余额支付可用 ¥ {{ personal.balance }} 元/span!-- span请先选择配送地址/span --span classredvan-icon namepassed //span/div/div!-- 买家留言 --div classbuytipstextarea placeholder选填买家留言50字内 name id cols30 rows10/textarea/div
/div!-- 底部提交 --
div classfooter-fixeddiv classleft实付款span{{ order.orderTotalPrice }}/span/divdiv classtipsbtn提交订单/div
/div(5) 订单结算 - 立即购买结算
1 点击跳转传参
prodetail/index.vue
div classbtn v-ifmode buyNow clickgoBuyNow立刻购买/divgoBuyNow () {this.$router.push({path: /pay,query: {mode: buyNow,goodsId: this.goodsId,goodsSkuId: this.detail.skuList[0].goods_sku_id,goodsNum: this.addCount}})
}2 计算属性处理参数
computed: {...goodsId () {return this.$route.query.goodsId},goodsSkuId () {return this.$route.query.goodsSkuId},goodsNum () {return this.$route.query.goodsNum}
}3 基于请求时携带参数发请求渲染
async getOrderList () {...if (this.mode buyNow) {const { data: { order, personal } } await checkOrder(this.mode, {goodsId: this.goodsId,goodsSkuId: this.goodsSkuId,goodsNum: this.goodsNum})this.order orderthis.personal personal}
}(6) mixins 复用 - 处理登录确认框的弹出
1 新建一个 mixin 文件 mixins/loginConfirm.js mixin文件中可以编写Vue组件实例的配置项通过一定语法可以直接混入到组件内部data、methods、computed和生命周期函数 注意点如果此处和组件内提供了同名的data或methods则组件内优先级更高 export default{data(){return {title: 标题}},methods(){sayHi(){}}
}当其他组件引入mixin文件时该组件中的data就会包含一个title属性methods中会包含一个sayHi方法。 export default {methods: {// 是否需要弹登录确认框// (1) 需要返回 true并直接弹出登录确认框// (2) 不需要返回 falseloginConfirm () {if (!this.$store.getters.token) {this.$dialog.confirm({title: 温馨提示,message: 此时需要先登录才能继续操作哦,confirmButtonText: 去登陆,cancelButtonText: 再逛逛}).then(() {// 如果希望跳转到登录 登录后能回跳回来需要在跳转去携带参数 (当前的路径地址)// this.$route.fullPath (会包含查询参数)this.$router.replace({path: /login,query: {backUrl: this.$route.fullPath}})}).catch(() {})return true}return false}}
}2 页面中导入混入方法
import loginConfirm from /mixins/loginConfirmexport default {name: ProDetail,mixins: [loginConfirm],...
}3 页面中调用 混入的方法
async addCart () {if (this.loginConfirm()) {return}const { data } await addCart(this.goodsId, this.addCount, this.detail.skuList[0].goods_sku_id)this.cartTotal data.cartTotalthis.$toast(加入购物车成功)this.showPannel falseconsole.log(this.cartTotal)
},goBuyNow () {if (this.loginConfirm()) {return}this.$router.push({path: /pay,query: {mode: buyNow,goodsId: this.goodsId,goodsSkuId: this.detail.skuList[0].goods_sku_id,goodsNum: this.addCount}})
}02. 提交订单并支付
1 封装 API 通用方法统一余额支付
// 提交订单
export const submitOrder (mode, params) {return request.post(/checkout/submit, {mode,delivery: 10, // 物流方式 配送方式 (10快递配送 20门店自提)couponId: 0, // 优惠券 idpayType: 10, // 余额支付isUsePoints: 0, // 是否使用积分...params})
}2 买家留言绑定
data () {return {remark: }
},
div classbuytipstextarea v-modelremark placeholder选填买家留言50字内 name id cols30 rows10/textarea
/div3 注册点击事件提交订单并支付
div classtipsbtn clicksubmitOrder提交订单/div// 提交订单
async submitOrder () {if (this.mode cart) {await submitOrder(this.mode, {remark: this.remark,cartIds: this.cartIds})}if (this.mode buyNow) {await submitOrder(this.mode, {remark: this.remark,goodsId: this.goodsId,goodsSkuId: this.goodsSkuId,goodsNum: this.goodsNum})}this.$toast.success(支付成功)this.$router.replace(/myorder)
}03. 订单管理
(1) 静态布局
1 基础静态结构
templatediv classordervan-nav-bar title我的订单 left-arrow click-left$router.go(-1) /van-tabs v-modelactivevan-tab title全部/van-tabvan-tab title待支付/van-tabvan-tab title待发货/van-tabvan-tab title待收货/van-tabvan-tab title待评价/van-tab/van-tabsOrderListItem/OrderListItem/div
/templatescript
import OrderListItem from /components/OrderListItem.vue
export default {name: OrderPage,components: {OrderListItem},data () {return {active: 0}}
}
/scriptstyle langless scoped
.order {background-color: #fafafa;
}
.van-tabs {position: sticky;top: 0;
}
/style2 components/OrderListItem
templatediv classorder-list-itemdiv classtitdiv classtime2023-07-01 12:02:13/divdiv classstatusspan待支付/span/div/divdiv classlistdiv classlist-itemdiv classgoods-imgimg srchttp://cba.itlike.com/public/uploads/10001/20230321/c4b5c61e46489bb9b9c0630002fbd69e.jpg alt/divdiv classgoods-content text-ellipsis-2Apple iPhone 14 Pro Max 256G 银色 移动联通电信5G双卡双待手机/divdiv classgoods-tradep¥ 1299.00/ppx 3/p/div/divdiv classlist-itemdiv classgoods-imgimg srchttp://cba.itlike.com/public/uploads/10001/20230321/c4b5c61e46489bb9b9c0630002fbd69e.jpg alt/divdiv classgoods-content text-ellipsis-2Apple iPhone 14 Pro Max 256G 银色 移动联通电信5G双卡双待手机/divdiv classgoods-tradep¥ 1299.00/ppx 3/p/div/divdiv classlist-itemdiv classgoods-imgimg srchttp://cba.itlike.com/public/uploads/10001/20230321/c4b5c61e46489bb9b9c0630002fbd69e.jpg alt/divdiv classgoods-content text-ellipsis-2Apple iPhone 14 Pro Max 256G 银色 移动联通电信5G双卡双待手机/divdiv classgoods-tradep¥ 1299.00/ppx 3/p/div/div/divdiv classtotal共12件商品总金额 ¥29888.00/divdiv classactionsspan v-iffalse立刻付款/spanspan v-iftrue申请取消/spanspan v-iffalse确认收货/spanspan v-iffalse评价/span/div/div
/templatescript
export default {}
/scriptstyle langless scoped
.order-list-item {margin: 10px auto;width: 94%;padding: 15px;background-color: #ffffff;box-shadow: 0 0.5px 2px 0 rgba(0,0,0,.05);border-radius: 8px;color: #333;font-size: 13px;.tit {height: 24px;line-height: 24px;display: flex;justify-content: space-between;margin-bottom: 20px;.status {color: #fa2209;}}.list-item {display: flex;.goods-img {width: 90px;height: 90px;margin: 0px 10px 10px 0;img {width: 100%;height: 100%;}}.goods-content {flex: 2;line-height: 18px;max-height: 36px;margin-top: 8px;}.goods-trade {flex: 1;line-height: 18px;text-align: right;color: #b39999;margin-top: 8px;}}.total {text-align: right;}.actions {text-align: right;span {display: inline-block;height: 28px;line-height: 28px;color: #383838;border: 0.5px solid #a8a8a8;font-size: 14px;padding: 0 15px;border-radius: 5px;margin: 10px 0;}}
}
/style3 导入注册
import { Tab, Tabs } from vant
Vue.use(Tab)
Vue.use(Tabs)(2) 点击 tab 切换渲染
1 封装获取订单列表的 API 接口
// 订单列表
export const getMyOrderList (dataType, page) {return request.get(/order/list, {params: {dataType,page}})
}2 给 tab 绑定 name 属性
van-tabs v-modelactive stickyvan-tab nameall title全部/van-tabvan-tab namepayment title待支付/van-tabvan-tab namedelivery title待发货/van-tabvan-tab namereceived title待收货/van-tabvan-tab namecomment title待评价/van-tab
/van-tabsdata () {return {active: this.$route.query.dataType || all,page: 1,list: []}
},3 封装调用接口获取数据
methods: {async getOrderList () {const { data: { list } } await getMyOrderList(this.active, this.page)list.data.forEach((item) {item.total_num 0item.goods.forEach(goods {item.total_num goods.total_num})})this.list list.data}
},
watch: {active: {immediate: true,handler () {this.getOrderList()}}
}4 动态渲染
OrderListItem v-foritem in list :keyitem.order_id :itemitem/OrderListItemtemplatediv classorder-list-item v-ifitem.order_iddiv classtitdiv classtime{{ item.create_time }}/divdiv classstatusspan{{ item.state_text }}/span/div/divdiv classlist div classlist-item v-for(goods, index) in item.goods :keyindexdiv classgoods-imgimg :srcgoods.goods_image alt/divdiv classgoods-content text-ellipsis-2{{ goods.goods_name }}/divdiv classgoods-tradep¥ {{ goods.total_pay_price }}/ppx {{ goods.total_num }}/p/div/div/divdiv classtotal共 {{ item.total_num }} 件商品总金额 ¥{{ item.total_price }}/divdiv classactionsdiv v-ifitem.order_status 10span v-ifitem.pay_status 10立刻付款/spanspan v-else-ifitem.delivery_status 10申请取消/spanspan v-else-ifitem.delivery_status 20 || item.delivery_status 30确认收货/span/divdiv v-ifitem.order_status 30span评价/span/div/div/div
/templatescript
export default {props: {item: {type: Object,default: () {return {}}}}
}
/script
