|
@@ -1,21 +1,36 @@
|
|
|
<template>
|
|
|
<view class="container details clearfix">
|
|
|
<!-- 地址选择 -->
|
|
|
- <order-address ref="orderAddress" v-if="isRequest" :addressData="addressData" ></order-address>
|
|
|
+ <order-address ref="orderAddress" v-if="isRequest" :addressData="addressData"></order-address>
|
|
|
<!-- 商品 -->
|
|
|
- <goods-list ref='goods' v-if="isRequest" :shopOrderData="shopOrderData" @popupClick="hanldePopupFn"></goods-list>
|
|
|
+ <goods-list
|
|
|
+ ref="goods"
|
|
|
+ v-if="isRequest"
|
|
|
+ :shopOrderData="shopOrderData"
|
|
|
+ @popupClick="hanldePopupFn"
|
|
|
+ ></goods-list>
|
|
|
<!-- 订单信息 -->
|
|
|
<order-information ref="information" v-if="isRequest" :information="information"></order-information>
|
|
|
<!-- 发票信息 -->
|
|
|
<invoice-tent ref="invoice" v-if="isRequest" :orderInvoice="orderInvoice"></invoice-tent>
|
|
|
<!-- 支付记录 -->
|
|
|
- <payment-record ref="payment" v-if="isRequest" :discernReceiptList="discernReceiptList" :receiptAmount="receiptAmount"></payment-record>
|
|
|
+ <payment-record
|
|
|
+ ref="payment"
|
|
|
+ v-if="isRequest"
|
|
|
+ :discernReceiptList="discernReceiptList"
|
|
|
+ :receiptAmount="receiptAmount"
|
|
|
+ ></payment-record>
|
|
|
<!-- 退款记录 -->
|
|
|
- <refund-record ref="refund" v-if="isRequest" :returnedPurchaseList="returnedPurchaseList" :returnedPurchaseFee="returnedPurchaseFee"></refund-record>
|
|
|
+ <refund-record
|
|
|
+ ref="refund"
|
|
|
+ v-if="isRequest"
|
|
|
+ :returnedPurchaseList="returnedPurchaseList"
|
|
|
+ :returnedPurchaseFee="returnedPurchaseFee"
|
|
|
+ ></refund-record>
|
|
|
<!-- 底部button -->
|
|
|
- <view class="button-content" :style="{paddingBottom :isIphoneX ? '68rpx' : '34rpx'}">
|
|
|
+ <view class="button-content" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
|
|
|
<view class="btn btn-query" v-if="btnState.isQuery" @click.stop="queryLogistics">查看物流</view>
|
|
|
- <view class="btn btn-cancel" v-if="btnState.isPay" @click.stop="btnConfirmPay">立即支付</view>
|
|
|
+ <view class="btn btn-cancel" v-if="btnState.isPay" @click.stop="btnConfirmPay">立即支付</view>
|
|
|
</view>
|
|
|
<!-- 促销活动弹窗 -->
|
|
|
<activi-popup :Promotion="handlerPros" :popupShow="popupShow"></activi-popup>
|
|
@@ -23,60 +38,62 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import orderAddress from '@/components/cm-module/orderDetails/orderAddress' //地址信息
|
|
|
- import goodsList from '@/components/cm-module/orderDetails/goodsList' //商品列表
|
|
|
- import invoiceTent from '@/components/cm-module/orderDetails/invoiceTent' //发票信息
|
|
|
- import orderInformation from '@/components/cm-module/orderDetails/orderInformation' //订单信息
|
|
|
- import paymentRecord from '@/components/cm-module/orderDetails/paymentRecord' //支付记录
|
|
|
- import refundRecord from '@/components/cm-module/orderDetails/refundRecord' //退款记录
|
|
|
- import activiPopup from '@/components/cm-module/orderDetails/activipopu' //促销活动弹窗
|
|
|
-
|
|
|
- export default {
|
|
|
- components:{
|
|
|
- orderInformation,
|
|
|
- orderAddress,
|
|
|
- invoiceTent,
|
|
|
- goodsList,
|
|
|
- paymentRecord,
|
|
|
- refundRecord,
|
|
|
- activiPopup
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- status:'',
|
|
|
- userId:'',
|
|
|
- orderId:'',
|
|
|
- cellPhone:'', //客服电话
|
|
|
- btnStatus:0, //按钮组件状态
|
|
|
- isRequest:false, //是否加载完成渲染子组件
|
|
|
- addressData:{}, //地址信息初始化
|
|
|
- information:{}, //订单信息初始化
|
|
|
- shopOrderData:{}, //商品信息初始化
|
|
|
- orderInvoice:{}, //发票信息初始化
|
|
|
- returnedPurchaseList:{}, //退款信息初始化
|
|
|
- discernReceiptList:{}, //支付信息初始化
|
|
|
- receiptAmount:0, //支付金额
|
|
|
- returnedPurchaseFee:0, //退款金额
|
|
|
- isIphoneX:this.$store.state.isIphoneX,
|
|
|
- popupShow:false,
|
|
|
- handlerPros:{},
|
|
|
- btnState:{
|
|
|
- isQuery:false
|
|
|
- },
|
|
|
- mapStateArr:[
|
|
|
- {label:'isQuery',val:[4,5,12,13,33,22,23,32,77],status: true},
|
|
|
- {label:'isPay',val:[11,12,13,21,22,23,111],status: true},
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(option){
|
|
|
- this.orderId = option.orderId
|
|
|
- this.userId = option.userId
|
|
|
- this.initOrderDetaileData()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initOrderDetaileData(){//初始化页面数据@参数:订单ID
|
|
|
- this.OrderService.QueryOrderDetails({ orderId : this.orderId,userId : this.userId }).then(response =>{
|
|
|
+import orderAddress from '@/components/cm-module/orderDetails/orderAddress' //地址信息
|
|
|
+import goodsList from '@/components/cm-module/orderDetails/goodsList' //商品列表
|
|
|
+import invoiceTent from '@/components/cm-module/orderDetails/invoiceTent' //发票信息
|
|
|
+import orderInformation from '@/components/cm-module/orderDetails/orderInformation' //订单信息
|
|
|
+import paymentRecord from '@/components/cm-module/orderDetails/paymentRecord' //支付记录
|
|
|
+import refundRecord from '@/components/cm-module/orderDetails/refundRecord' //退款记录
|
|
|
+import activiPopup from '@/components/cm-module/orderDetails/activipopu' //促销活动弹窗
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ orderInformation,
|
|
|
+ orderAddress,
|
|
|
+ invoiceTent,
|
|
|
+ goodsList,
|
|
|
+ paymentRecord,
|
|
|
+ refundRecord,
|
|
|
+ activiPopup
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ status: '',
|
|
|
+ userId: '',
|
|
|
+ orderId: '',
|
|
|
+ cellPhone: '', //客服电话
|
|
|
+ btnStatus: 0, //按钮组件状态
|
|
|
+ isRequest: false, //是否加载完成渲染子组件
|
|
|
+ addressData: {}, //地址信息初始化
|
|
|
+ information: {}, //订单信息初始化
|
|
|
+ shopOrderData: {}, //商品信息初始化
|
|
|
+ orderInvoice: {}, //发票信息初始化
|
|
|
+ returnedPurchaseList: {}, //退款信息初始化
|
|
|
+ discernReceiptList: {}, //支付信息初始化
|
|
|
+ receiptAmount: 0, //支付金额
|
|
|
+ returnedPurchaseFee: 0, //退款金额
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ popupShow: false,
|
|
|
+ handlerPros: {},
|
|
|
+ btnState: {
|
|
|
+ isQuery: false
|
|
|
+ },
|
|
|
+ mapStateArr: [
|
|
|
+ { label: 'isQuery', val: [4, 5, 12, 13, 33, 22, 23, 32, 77], status: true },
|
|
|
+ { label: 'isPay', val: [11, 12, 13, 21, 22, 23, 111], status: true }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.orderId = option.orderId
|
|
|
+ this.userId = option.userId
|
|
|
+ this.initOrderDetaileData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initOrderDetaileData() {
|
|
|
+ //初始化页面数据@参数:订单ID
|
|
|
+ this.OrderService.QueryOrderDetails({ orderId: this.orderId, userId: this.userId })
|
|
|
+ .then(response => {
|
|
|
let data = response.data
|
|
|
this.status = data.order.status
|
|
|
this.addressData = data.userInfo
|
|
@@ -90,144 +107,168 @@
|
|
|
this.isRequest = true
|
|
|
this.mapStateArr.forEach(el => {
|
|
|
el.val.forEach(value => {
|
|
|
- if(this.status === value){
|
|
|
+ if (this.status === value) {
|
|
|
this.btnState[el.label] = el.status
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000)
|
|
|
})
|
|
|
- },
|
|
|
- hanldePopupFn(data){//监听活动内容
|
|
|
- this.popupShow = true
|
|
|
- this.handlerPros = data
|
|
|
- },
|
|
|
- queryLogistics(){//跳转查询物流页面
|
|
|
- this.$api.navigateTo('/pages/user/order/order-logistics?orderId='+this.orderId)
|
|
|
- },
|
|
|
- btnConfirmPay(){// 待支付订单
|
|
|
-
|
|
|
- },
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
},
|
|
|
- onShow() {
|
|
|
-
|
|
|
+ hanldePopupFn(data) {
|
|
|
+ //监听活动内容
|
|
|
+ this.popupShow = true
|
|
|
+ this.handlerPros = data
|
|
|
+ },
|
|
|
+ queryLogistics() {
|
|
|
+ //跳转查询物流页面
|
|
|
+ this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + this.orderId)
|
|
|
+ },
|
|
|
+ btnConfirmPay() {
|
|
|
+ // 立即支付点击事件
|
|
|
+ this.getOrderPaymentValidation(this.orderId)
|
|
|
+ },
|
|
|
+ getOrderPaymentValidation(orderId) {
|
|
|
+ //监听根据付款状态做操作
|
|
|
+ this.OrderService.OrderPaymentValidation({ orderId: orderId })
|
|
|
+ .then(response => {
|
|
|
+ this.payModelData = response.data
|
|
|
+ if (response.data.code == -1) {
|
|
|
+ this.$util.modal('', '订单已申请全部退款,无需再付款!', '确定', '', false, () => {})
|
|
|
+ } else {
|
|
|
+ if (response.data.onlinePayFlag === 1) {
|
|
|
+ this.$api.navigateTo(
|
|
|
+ `/pages/user/order/order-payment?type=onlinePay&Amount=${
|
|
|
+ response.data.pendingPayments
|
|
|
+ }&orderId=${orderId}`
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ this.$api.navigateTo(`/pages/user/order/order-payment?type=payfirm&orderId=${orderId}`)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- page {
|
|
|
- height: auto;
|
|
|
- background:#F7F7F7;
|
|
|
- }
|
|
|
- .details{
|
|
|
- padding-bottom: 180rpx;
|
|
|
- }
|
|
|
- .btn-hover{
|
|
|
- background: #FFFFFF;
|
|
|
- }
|
|
|
- .animation{
|
|
|
- /* transition: transform 0.3s ease;*/
|
|
|
- transition-property: transform;
|
|
|
- transition-duration: 0.3s;
|
|
|
- transition-timing-function: ease;
|
|
|
- }
|
|
|
- .invoice-balance{
|
|
|
- width: 702rpx;
|
|
|
- height: auto;
|
|
|
- padding:0 24rpx;
|
|
|
- background: #FFFFFF;
|
|
|
+page {
|
|
|
+ height: auto;
|
|
|
+ background: #f7f7f7;
|
|
|
+}
|
|
|
+.details {
|
|
|
+ padding-bottom: 180rpx;
|
|
|
+}
|
|
|
+.btn-hover {
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.animation {
|
|
|
+ /* transition: transform 0.3s ease;*/
|
|
|
+ transition-property: transform;
|
|
|
+ transition-duration: 0.3s;
|
|
|
+ transition-timing-function: ease;
|
|
|
+}
|
|
|
+.invoice-balance {
|
|
|
+ width: 702rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ float: left;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .balabce-t {
|
|
|
+ width: 100%;
|
|
|
+ height: 86rpx;
|
|
|
+ line-height: 86rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
float: left;
|
|
|
- margin-top: 24rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- .balabce-t{
|
|
|
- width: 100%;
|
|
|
- height: 86rpx;
|
|
|
- line-height: 86rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
+ .balabce-t-le {
|
|
|
float: left;
|
|
|
- .balabce-t-le{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .balabce-t-ri {
|
|
|
+ float: right;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .money {
|
|
|
+ display: flex;
|
|
|
float: left;
|
|
|
- font-weight: bold;
|
|
|
}
|
|
|
- .balabce-t-ri{
|
|
|
- float: right;
|
|
|
+ .checkbox-box {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- .money{
|
|
|
- display: flex;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .checkbox-box{
|
|
|
- display: flex;
|
|
|
- width: 60rpx;
|
|
|
- float: left;
|
|
|
- height: 100%;
|
|
|
- font-size: $font-size-24;
|
|
|
- .checkbox{
|
|
|
- width: 40rpx;
|
|
|
- text-align: right;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- text-decoration: none;
|
|
|
- border-radius: 0;
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .balabce-b{
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- .balabce-b-text{
|
|
|
- width: 100%;
|
|
|
- line-height: 58rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ float: left;
|
|
|
+ height: 100%;
|
|
|
font-size: $font-size-24;
|
|
|
- color: #FF2A2A;
|
|
|
- text-align: right;
|
|
|
- float: right;
|
|
|
+ .checkbox {
|
|
|
+ width: 40rpx;
|
|
|
+ text-align: right;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ border-radius: 0;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
- &.balabce-b--hide {
|
|
|
- padding: 0 0;
|
|
|
- height: 0px;
|
|
|
- line-height: 0px;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- .button-content{
|
|
|
- width: 702rpx;
|
|
|
- padding:0 24rpx;
|
|
|
- height: auto;
|
|
|
- background: #ffffff;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left:0 ;
|
|
|
- .btn{
|
|
|
- width: 160rpx;
|
|
|
- height: 64rpx;
|
|
|
- margin:22rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- font-size:$font-size-26;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
+ .balabce-b {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ .balabce-b-text {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 58rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ff2a2a;
|
|
|
+ text-align: right;
|
|
|
float: right;
|
|
|
- border-radius: 32rpx;
|
|
|
- }
|
|
|
- .btn-query{
|
|
|
- background:linear-gradient(135deg,rgba(255,212,129,1) 0%,rgba(198,129,0,1) 100%);
|
|
|
}
|
|
|
- .btn-cancel{
|
|
|
- background:#FFFFFF;
|
|
|
- color: #666666;
|
|
|
- float: left;
|
|
|
- // margin: 22rpx 0;
|
|
|
- margin-right: 15rpx;
|
|
|
- border: 2rpx solid #999999;
|
|
|
+ &.balabce-b--hide {
|
|
|
+ padding: 0 0;
|
|
|
+ height: 0px;
|
|
|
+ line-height: 0px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+}
|
|
|
+.button-content {
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ height: auto;
|
|
|
+ background: #ffffff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ .btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ margin: 22rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ float: right;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ }
|
|
|
+ .btn-query {
|
|
|
+ background: linear-gradient(135deg, rgba(255, 212, 129, 1) 0%, rgba(198, 129, 0, 1) 100%);
|
|
|
+ }
|
|
|
+ .btn-cancel {
|
|
|
+ background: #ffffff;
|
|
|
+ color: #666666;
|
|
|
+ float: left;
|
|
|
+ // margin: 22rpx 0;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ border: 2rpx solid #999999;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|