vue3微信公众号商城项目实战系列（10）生成订单页面
本篇实现订单确认页面的功能，订单及订单明细表结构如下：
| 表名 |
字段 |
功能 |
表名 | 字段 | 功能 | |
|
order 订单表 |
order_id (int) 订单编号 user_id (int) 用户编号 nickname (varchar) 昵称 mobile (varchar) 联系电话 address (varchar) 收货地址 total_amount (decimal) 订单总金额 order_time (datetime) 下单时间 pay_time (datetime) 付款时间 status (int) 订单状态代号 status_text (varchar) 状态说明 |
订单表 status取值 0:初始 1:支付 2:支付完成 3:取消 |
order_detail 订单明细表 |
detail_id (int) 明细编号 order_id (int) 订单编号 goods_id (int) 商品编号 goods_name (varchar) 商品名称 photo (varchar) 商品图片 price (decimal) 价格 qty (int) 数量 amount (decimal) 金额 |
页面效果如下：
先到 app.js 中新增抓订单信息、付款的接口方法，如下：
1 export function orderInfo(data) { 2 return request({ 3 url: '/order/info', 4 method: 'post', 5 data: data 6 }) 7 } 8 9 10 export function orderPay(data) { 11 return request({ 12 url: '/order/pay', 13 method: 'post', 14 data: data 15 }) 16 }
Order.vue 代码如下：
布局块代码：
1 <template> 2 <div class="order"> 3 <div class="order-address"> 4 <div>收货人 : {{ order.nickname }}</div> 5 <div>电话 : {{ order.mobile }}</div> 6 <div>地址 : {{ order.address }}</div> 7 </div> 8 <div class="order-list"> 9 <div class="order-item" v-for="(item,index) in detailList"> 10 <div><img class="order-img" :src="item.photo" /></div> 11 <div class="order-info"> 12 <div><span class="order-name">{{ item.goodsName }}</span></div> 13 <span class="order-price">￥{{ item.price }}元</span> 14 <div class="order-qty"> 15 <span>x {{ item.qty }}</span> 16 <span class="order-price">{{ item.amount }} 元</span> 17 </div> 18 </div> 19 </div> 20 </div> 21 <div class="order-total"> 22 <span class="order-price">总价 : {{ totalAmt }}元</span> 23 <input class="btn_order" type="button" value="去付款" @click="onPay" /> 24 </div> 25 26 </div> 27 </template>
脚本块代码：
1 <script setup> 2 import { onMounted, reactive, toRefs, computed } from 'vue'; 3 import { orderInfo, orderPay} from '@/http/api'; 4 import { useRoute, useRouter } from "vue-router"; 5 const route = useRoute(); 6 const router = useRouter(); 7 8 const data = reactive({detailList:[],order:{}}) 9 let { detailList, order } = toRefs(data); 10 11 const totalAmt = computed(() => { 12 let ttl=0; 13 data.detailList.forEach(function(item, index) {ttl+=item.price * item.qty;}); 14 return ttl; 15 }) 16 17 onMounted(() => { 18 let orderId = route.query.oid; 19 let formData={orderId:orderId}; 20 orderInfo(formData).then(res=>{ 21 data.detailList=res.orderDetail; 22 data.order=res.orderinfo; 23 }); 24 }) 25 26 function onPay(){ 27 let orderId = route.query.oid; 28 let formData={orderId:orderId}; 29 orderPay(formData).then(res=>{ 30 router.push({name:'finish'}); 31 }) 32 } 33 </script>
只拣和之前页面编码不同的部分说明一下：
第 4~5 行 ： 路由对象 的 useRoute () 用于创建一个路由参数实例，在 18行、27行使用，获取查询字符串参数用 router.query.xxx 的方式 。
第 30 行：当用户点 "去支付" 按钮的时候 调用微信支付接口完成支付操作，微信支付接口需要先申请接口权限，然后按微信支付文档要求编码就可以了。
样式代码块：
1 <style> 2 .order-address{ 3 width: 100%; 4 padding-left: 8px; 5 padding-right: 8px; 6 } 7 .order-list{ 8 display: flex; 9 flex-direction: column; 10 } 11 .order-item{ 12 display: flex; 13 flex-direction: row; 14 border:solid 1px #E0E0E0; 15 margin-bottom: 6px; 16 padding: 4px 0; 17 } 18 .order-img{ 19 width: 100px; 20 height: 100px; 21 vertical-align: middle; 22 border: solid 1px #F0F0F0; 23 border-radius: 4px; 24 } 25 .order-info{ 26 width: 100%; 27 padding-left: 8px; 28 padding-right: 8px; 29 } 30 .order-name{ 31 font-weight: bold; 32 } 33 .order-price{ 34 font-size: 16px; 35 font-weight: bold; 36 color:orangered; 37 } 38 .order-qty{ 39 width: 100%; 40 display: flex; 41 flex-direction: row; 42 justify-content: space-between; 43 } 44 45 .order-total{ 46 width: 368px; 47 height: 30px; 48 line-height: 30px; 49 position: fixed; 50 left: 3px; 51 bottom: 4px; 52 background-color: #e0fffe; 53 54 display: flex; 55 flex-direction: row; 56 justify-content: space-between; 57 } 58 .btn_order{ 59 width: 70px; 60 height: 30px; 61 } 62 </style>
和之前页面类似，不重复介绍了。
