修正项目
This commit is contained in:
187
xlcs-user/pagesOrder/getOrderInfo/getOrderInfo.vue
Normal file
187
xlcs-user/pagesOrder/getOrderInfo/getOrderInfo.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view class="gg">
|
||||
<u-navbar :border-bottom="false" :is-back="true">
|
||||
<view class="u-flex u-m-l-20 u-m-r-20">
|
||||
<view class="u-font-xl u-m-r-20">订单详情</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="gg-content">
|
||||
<scroll-view class="gg-cart-sv-container" scroll-y="true">
|
||||
<!-- 提货点 -->
|
||||
<u-card :padding="10" :show-head="true">
|
||||
<view slot="head" class="u-m-10">提货人联系方式</view>
|
||||
<view slot="body" class="u-m-10">
|
||||
<view class="u-p-20">收货人员：{{ order.receiverName }}</view>
|
||||
<view class="u-p-20">联系方式：{{ order.receiverPhone }}</view>
|
||||
<view class="u-p-20">提货地点：{{ order.receiverAddress }}</view>
|
||||
</view>
|
||||
</u-card>
|
||||
|
||||
<!-- 商品 -->
|
||||
<u-card :padding="10" :show-head="true">
|
||||
<view slot="head" class="u-m-10">选购商品</view>
|
||||
<view slot="body" class="u-m-10">
|
||||
<view v-for="(orderItem, index) in order.orderItemList" :key="orderItem.id">
|
||||
<view class="u-body-item u-flex u-col-between u-p-10">
|
||||
<u-image :height="200" :lazy-load="true" :src="orderItem.imgUrl" :width="200"></u-image>
|
||||
<view class="orderItemPrices u-p-20">
|
||||
<view class="u-font-xl">{{ orderItem.skuName }}</view>
|
||||
<view>单价：￥{{ orderItem.skuPrice }}</view>
|
||||
<view>数量：{{ orderItem.skuNum }}</view>
|
||||
<view v-if="orderItem.splitActivityAmount > 0">活动金额:￥{{ orderItem.splitActivityAmount }}</view>
|
||||
<view v-if="orderItem.splitCouponAmount > 0">优惠券额:￥{{ orderItem.splitCouponAmount }}</view>
|
||||
<view>
|
||||
小计：
|
||||
<text class="u-type-error">￥{{ orderItem.splitTotalAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-flex u-row-between u-p-20">
|
||||
<view>商品总额：</view>
|
||||
<view>￥{{ order.originalTotalAmount }}</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-p-20">
|
||||
<view>实际付款：</view>
|
||||
<view>￥{{ order.totalAmount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-card>
|
||||
|
||||
<u-card :padding="10" :show-head="false">
|
||||
<view slot="body" class="u-m-10">
|
||||
<view class="u-flex u-row-between u-p-20">
|
||||
<view class="u-flex-1">订单编号：</view>
|
||||
<view class="u-flex">
|
||||
<view>{{ order.orderNo }}</view>
|
||||
<view class="u-type-primary u-p-l-10" @click="copyOrderNo">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-p-20">
|
||||
<view class="u-flex-1">下单时间：</view>
|
||||
<view>{{ order.createTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-card>
|
||||
</scroll-view>
|
||||
|
||||
<view class="gg-navigation">
|
||||
<view class="navigation">
|
||||
<view class="buy btn u-line-1" @click="payOrder">支付订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
resul: {},
|
||||
orderId: 0,
|
||||
order: {}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.orderId = +options.orderId;
|
||||
},
|
||||
methods: {
|
||||
async getOrderInfoById(orderId) {
|
||||
const result = await this.$u.api.getOrderInfo({orderId});
|
||||
this.order = result;
|
||||
},
|
||||
copyOrderNo() {
|
||||
uni.setClipboardData({
|
||||
data: this.order.orderNo, //要被复制的内容
|
||||
success: () => {
|
||||
//复制成功的回调函数
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async payOrder() {
|
||||
const result = await this.$u.api.getWxPayment({orderNo: this.order.orderNo});
|
||||
wx.requestPayment({
|
||||
timeStamp: result.timeStamp,
|
||||
nonceStr: result.nonceStr,
|
||||
package: result.package,
|
||||
signType: 'MD5',
|
||||
paySign: result.paySign,
|
||||
success: res => {
|
||||
this.$u.api.getOrderStatus({orderNo: this.order.orderNo});
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
fail: err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getOrderInfoById(this.orderId);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.gg {
|
||||
height: 100%;
|
||||
background-color: $u-bg-color;
|
||||
|
||||
// scrollView的固定高度设置
|
||||
// 底部导航与顶部自定义导航高度需要减去
|
||||
&-cart-sv-container {
|
||||
height: calc(100vh - 90rpx - 136rpx);
|
||||
}
|
||||
|
||||
.orderItemPrices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// 底部导航
|
||||
&-navigation {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
.navigation {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border: solid 2rpx #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
padding: 12rpx 0;
|
||||
|
||||
.btn {
|
||||
line-height: 66rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 36rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.buy {
|
||||
background-color: #ff7900;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user