You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
501 lines
15 KiB
501 lines
15 KiB
<template>
|
|
<view class="body">
|
|
<view class="details_title">
|
|
<view class="shipped" v-if="details_index==1">
|
|
<view class="shipped_left">
|
|
<image src="../../static/img/order_shipped.png" mode=""></image>
|
|
</view>
|
|
<view>
|
|
<text class="shipped_right_text">Ready for shipment</text>
|
|
<view>The buyer has paid,Waiting for the merchant to deliver</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cancelled" v-if="details_index==4">
|
|
<view class="cancelled_left">
|
|
<image src="../../static/img/close2.png" mode=""></image>
|
|
<view class="cancelled_left_info">
|
|
<text class="shipped_right_text">Deal’s off</text>
|
|
<view>The transaction has been closed, looking forward to your re-selection</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="cancelled completed" v-if="details_index==3" @click="goLogistics">
|
|
<view class="cancelled_left">
|
|
<image src="../../static/img/completed.png" mode=""></image>
|
|
<view class="cancelled_left_info">
|
|
<text class="shipped_right_text">Signed for</text>
|
|
<view>2022-04-27 21:15:55</view>
|
|
</view>
|
|
</view>
|
|
<view class="cancelled_right">
|
|
<image src="../../static/img/right2.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cancelled toPaid" v-if="details_index==0">
|
|
<view class="cancelled_left">
|
|
<view>
|
|
<text class="shipped_right_text">Waiting for payment</text>
|
|
<view>The timeout order will be closed automatically</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="cancelled_right">
|
|
<text class="shipped_right_text">23:59:58</text>
|
|
<view>T-minus payment</view>
|
|
</view> -->
|
|
</view>
|
|
|
|
<view class="cancelled transit" @click="goLogistics" v-if="details_index==2">
|
|
<view class="cancelled_left">
|
|
<image src="../../static/img/transit.png" mode=""></image>
|
|
<view class="cancelled_left_info">
|
|
<view class="shipped_right_text">【New York】Has arrived statesHas arrived states</view>
|
|
<view>2022-04-27 21:15:55</view>
|
|
</view>
|
|
</view>
|
|
<view class="cancelled_right">
|
|
<image src="../../static/img/right2.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<view class="address">
|
|
<view class="address_left">
|
|
<view class="address_title">
|
|
<image src="../../static/img/address.png" mode=""></image>
|
|
<view class="address_title_name">{{goodsDate.consignee}}</view>
|
|
<text>{{goodsDate.mobile}}</text>
|
|
</view>
|
|
<view class="address_content">
|
|
<text>{{goodsDate.sign_building}}</text>
|
|
<view>{{goodsDate.address_detail}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- <image src="../../static/img/right.png" class="address_more"></image> -->
|
|
<image src="../../static/img/address_xian.png" class="address_xian" mode=""></image>
|
|
</view>
|
|
|
|
<view class="order_popup_commodity">
|
|
<view class="good_info" v-for="(item,index) in goods_list " :key="index" @click="goDetails(item.goods_id)">
|
|
<view class="good_info_left ">
|
|
<view class="good_info_image" style="border-radius: 10rpx;">
|
|
<image :src="item.goods_thumb" mode="" style="border-radius: 10rpx;"></image>
|
|
</view>
|
|
<view class="left_info">
|
|
<view class="info_name">{{item.goods_name}}</view>
|
|
<view class="left_info_bottom" v-if="item.goods_attr">
|
|
<view class="info_lable">
|
|
<text>{{item.goods_attr |goodsAttr}}</text>
|
|
<!-- <image src="/static/img/bottom.png" mode=""></image> -->
|
|
</view>
|
|
<text>x{{item.goods_number}}</text>
|
|
</view>
|
|
<view class="info_price">
|
|
<text>US${{item.subtotal}}</text>
|
|
<!-- <button v-if="details_index!=0 && details_index!=4">RREFUND</button> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="summary">
|
|
<view class="summary_title">Order summary</view>
|
|
<view class="summary_item">
|
|
<view>
|
|
Subtotal
|
|
<text :class="details_index==2?'summary_item_text1':'summary_item_text'">（Tax included）</text>
|
|
</view>
|
|
<view class="summary_item_right">US${{goodsDate.goods_amount}}</view>
|
|
</view>
|
|
<view class="summary_item">
|
|
<view>Shipping</view>
|
|
<view class="summary_item_right">US${{goodsDate.shipping_fee}}</view>
|
|
</view>
|
|
<view class="summary_item">
|
|
<view>Coupon</view>
|
|
<view class="summary_item_right1">-US${{goodsDate.bonus}}</view>
|
|
</view>
|
|
<view class="summary_item">
|
|
<view>Points</view>
|
|
<view class="summary_item_right1">-US${{goodsDate.surplus}}</view>
|
|
</view>
|
|
<view class="summary_item">
|
|
<view>Order total</view>
|
|
<view>US${{goodsDate.order_amount}}</view>
|
|
</view>
|
|
<!-- <view class="summary_tips" v-if="details_index==0">
|
|
<image src="../../static/img/gantan1.png" mode=""></image>
|
|
<text>Reward 10 points</text>
|
|
</view> -->
|
|
</view>
|
|
|
|
<view class="summary">
|
|
<view class="summary_title">Order information</view>
|
|
<view class="summary_item">
|
|
<view>Order id</view>
|
|
<view class="summary_item_right">
|
|
<text>{{goodsDate.order_sn}}</text>
|
|
<button @click="Copy(goodsDate.order_sn)">copy</button>
|
|
</view>
|
|
</view>
|
|
<view class="summary_item">
|
|
<view>Shipping</view>
|
|
<view class="summary_item_right">{{goodsDate.shipping_name}}</view>
|
|
</view>
|
|
<view class="summary_item">
|
|
<view>Order Time</view>
|
|
<view class="summary_item_right">{{goodsDate.formated_add_time}}</view>
|
|
</view>
|
|
<view class="summary_item" v-if="details_index!=0 && goodsDate.formated_pay_time">
|
|
<view>Payment time</view>
|
|
<view class="summary_item_right">{{goodsDate.formated_pay_time}}</view>
|
|
</view>
|
|
<view class="summary_item" v-if="details_index==2">
|
|
<view>Delivery time</view>
|
|
<view class="summary_item_right">{{goodsDate.formated_shipping_time}}</view>
|
|
</view>
|
|
<!-- 完成时间 -->
|
|
<view class="summary_item" v-if="details_index==3">
|
|
<view>Completion time</view>
|
|
<view class="summary_item_right"></view>
|
|
</view>
|
|
<!-- 取消时间 -->
|
|
<view class="summary_item" v-if="details_index==4">
|
|
<view>Cancel time</view>
|
|
<view class="summary_item_right"></view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="details_footer" v-if="details_index!=1">
|
|
<button class="white" v-if=" details_index==2||details_index==3" @click="goLogistics">LOGISTICS</button>
|
|
<button class="white" v-if="details_index==4 || details_index==3" @click.stop="openTips(1)">DELETE
|
|
ORDER</button>
|
|
<button class="black" v-if="details_index==3 && goodsDate.comment_status_code==0"
|
|
@click="goComment()">COMMENT</button>
|
|
|
|
<button class="white" v-if="details_index==0 " @click.stop="openTips(0)">CANCEL ORDER</button>
|
|
<button class="black" v-if="details_index==0" @click="isPay=true">PAY NOW</button>
|
|
|
|
<button class="black" v-if="details_index==2" @click.stop="openTips(2)">CONFIRM RECEIPT</button>
|
|
</view>
|
|
|
|
<!-- 支付 -->
|
|
<view class="mask" v-show="isPay" @click="isPay=false"></view>
|
|
<view class="order_popup" v-show="isPay">
|
|
<view class="order_popup_title">
|
|
<text>
|
|
Payment Method
|
|
</text>
|
|
<image src="../../static/img/close1.png" mode="" @click="isPay=false"></image>
|
|
</view>
|
|
<view class="order_popup_pay">
|
|
<view class="pay_item" @click="selectPay(0)">
|
|
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==0">
|
|
</image>
|
|
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
|
|
<view class="pay_item_right">
|
|
<image src="../../static/img/pay_pal.png" mode=""></image>
|
|
<text>Pay Pal</text>
|
|
</view>
|
|
</view>
|
|
<view class="pay_item" @click="selectPay(1)">
|
|
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==1">
|
|
</image>
|
|
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
|
|
<view class="pay_item_right">
|
|
<image src="../../static/img/card.png" mode=""></image>
|
|
<text>Credit/Debit Card</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="pay_item" @click="selectPay(2)">
|
|
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==2"></image>
|
|
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
|
|
<view class="pay_item_right">
|
|
<image src="../../static/img/GPay.png" mode=""></image>
|
|
<text>Google Pay</text>
|
|
</view>
|
|
</view>
|
|
<view class="pay_item" @click="selectPay(3)">
|
|
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==3"></image>
|
|
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
|
|
<view class="pay_item_right">
|
|
<image src="../../static/img/APay.png" mode=""></image>
|
|
<text>Apple pay</text>
|
|
</view>
|
|
</view> -->
|
|
<button @click="getPayDate">PAY NOW</button>
|
|
</view>
|
|
</view>
|
|
<!-- 删除、取消弹框 -->
|
|
<uni-popup ref="alertDialog" type="dialog">
|
|
<uni-popup-dialog type="error" cancelText="Close" :confirmText="tipsBut" title="Tips" :content="tipsInfo"
|
|
@confirm="dialogConfirm"></uni-popup-dialog>
|
|
</uni-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
defaultRequest2
|
|
} from '../../api/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 0、待发货 1、已取消 2、已完成 3、待支付 4、运输中 (已废弃)
|
|
// 0、待支付 1、待发货 2、运输中 3、已完成 4、已取消
|
|
details_index: 4,
|
|
query: {
|
|
_action: 'getorder',
|
|
order_id: '',
|
|
order_sn: ''
|
|
},
|
|
goodsDate: {},
|
|
goods_list: [],
|
|
isPay: false,
|
|
payQuery: {
|
|
_action: 'payorder',
|
|
order_id: '',
|
|
order_type: 'GOODSBUY',
|
|
payment_method: 'alipay.native'
|
|
},
|
|
pay_index: 0,
|
|
logisticsinfo: {},
|
|
// 弹出提示框的状态 0：取消订单 1、删除订单 2、确认收货
|
|
tipsType: 0,
|
|
tipsInfo: '',
|
|
tipsBut: '',
|
|
cancelQuery: {
|
|
_action: 'cancelorder',
|
|
order_id: ''
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
// 跳转商品详情
|
|
goDetails(id) {
|
|
uni.navigateTo({
|
|
url: '/pages/productDetails/index?goodid=' + id
|
|
})
|
|
},
|
|
// 跳转评论页面
|
|
goComment() {
|
|
let data = this.goodsDate
|
|
data.order_goods = this.goods_list
|
|
uni.navigateTo({
|
|
url: '../productDetails/review?data=' + JSON.stringify(data)
|
|
})
|
|
},
|
|
// 淡出提示
|
|
openTips(type) {
|
|
this.tipsType = type
|
|
if (type == 0) {
|
|
this.tipsInfo =
|
|
'Are you sure you want to cancel this order? This order will be regarded as invalid after cancellation'
|
|
this.tipsBut = 'CancelOrder'
|
|
this.cancelQuery._action = 'cancelorder'
|
|
} else if (type == 1) {
|
|
this.tipsInfo = 'Are you sure you want to delete this order?'
|
|
this.tipsBut = 'DeleteOrder'
|
|
this.cancelQuery._action = 'deleteorder'
|
|
} else if (type == 2) {
|
|
this.tipsInfo = 'Are you sure you have received the products?'
|
|
this.tipsBut = 'Confirm'
|
|
this.cancelQuery._action = 'affirmorder'
|
|
}
|
|
this.$refs.alertDialog.open()
|
|
|
|
},
|
|
// 提示框点击确操作 取消订单、删除订单
|
|
dialogConfirm() {
|
|
defaultRequest2(this.cancelQuery).then(res => {
|
|
console.info(res)
|
|
if (res.error == 0) {
|
|
if (this.tipsType == 0) {
|
|
this.details_index = 4
|
|
} else if (this.tipsType == 1) {
|
|
uni.navigateBack()
|
|
} else {
|
|
this.details_index = 3
|
|
}
|
|
this.getList()
|
|
}
|
|
})
|
|
},
|
|
goLogistics() {
|
|
uni.navigateTo({
|
|
url: './logisticsDetails?order_id=' + this.goodsDate.order_id
|
|
})
|
|
},
|
|
// 选择支付方式
|
|
selectPay(index) {
|
|
this.pay_index = index
|
|
},
|
|
// 获取调用支付信息数据
|
|
getPayDate() {
|
|
console.log(this.pay_index)
|
|
if (this.pay_index == 0) {
|
|
let data = {
|
|
_action: 'payorder',
|
|
order_id: this.payQuery.order_id,
|
|
order_type: 'GOODSBUY',
|
|
payment_method: 'paypal'
|
|
}
|
|
defaultRequest2(data).then(res => {
|
|
console.info(data)
|
|
console.log(res)
|
|
if (res.error == 0) {
|
|
if (res.data.need_pay_amount == 0) return
|
|
// plus.runtime.openURL(res.data.prepay_data.checkoutnow_url)
|
|
// this.src = res.data.prepay_data.checkoutnow_url
|
|
uni.navigateTo({
|
|
url: './paypalWebview?src=' + res.data.prepay_data.checkoutnow_url
|
|
})
|
|
}
|
|
})
|
|
} else if(this.pay_index == 1) {
|
|
let data = {
|
|
_action: 'payorder',
|
|
order_id: this.payQuery.order_id,
|
|
order_type: 'GOODSBUY',
|
|
payment_method: 'oceanpay'
|
|
}
|
|
defaultRequest2(data).then(res => {
|
|
console.info(data,'det 支付')
|
|
console.log(res,'det 支付')
|
|
if (res.error == 0) {
|
|
if (res.data.need_pay_amount == 0) return
|
|
// plus.runtime.openURL(res.data.prepay_data.checkoutnow_url)
|
|
// this.src = res.data.prepay_data.checkoutnow_url
|
|
uni.navigateTo({
|
|
url: './paypalWebview?src=' + res.data.prepay_data.checkoutnow_url
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
console.info(this.payQuery, '支付宝')
|
|
defaultRequest2(this.payQuery).then(res => {
|
|
console.info(res, '支付宝')
|
|
if (res.error == 0) {
|
|
//订单对象，从服务器获取
|
|
if (res.data.need_pay_amount == 0) return
|
|
uni.requestPayment({
|
|
provider: 'alipay',
|
|
orderInfo: res.data.prepay_data.order_info, //支付宝订单数据
|
|
success: function(res) {
|
|
console.log('success:' + JSON.stringify(res));
|
|
uni.redirectTo({
|
|
url: 'paySuccess?order_id=' + this.payQuery.order_id
|
|
});
|
|
},
|
|
fail: function(err) {
|
|
console.log('fail:' + JSON.stringify(err));
|
|
uni.showToast({
|
|
title: 'Payment failed',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
});
|
|
}
|
|
})
|
|
}
|
|
},
|
|
payNow(id) {
|
|
this.payQuery.order_id = id
|
|
this.isPay = true
|
|
},
|
|
getDate() {
|
|
defaultRequest2(this.query).then(res => {
|
|
console.info(res)
|
|
if (res.error == 0) {
|
|
this.goodsDate = res.data
|
|
this.goods_list = res.goods_list
|
|
if (this.details_index == 4) {
|
|
this.getLogistics()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getLogistics() {
|
|
let data = {
|
|
_action: 'getlogisticsinfo',
|
|
order_id: this.goodsDate.order_id,
|
|
order_sn: ''
|
|
}
|
|
defaultRequest2(data).then(res => {
|
|
console.info(res)
|
|
if (res.error == 0) {
|
|
this.logisticsinfo = res.data[0]
|
|
}
|
|
})
|
|
},
|
|
// 复制
|
|
Copy(e) {
|
|
console.log(e)
|
|
uni.setClipboardData({
|
|
data: e,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: 'ok!',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
|
|
})
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
let that = this;
|
|
let s = 0;
|
|
let time = setInterval(() => {
|
|
uni.getNetworkType({
|
|
success: (res) => {
|
|
console.log(res.networkType, s);
|
|
if (res.networkType == 'none') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: 'Please connect to the network',
|
|
duration: 3000,
|
|
})
|
|
} else if (res.networkType !== 'none') {
|
|
that.typee = 2;
|
|
clearInterval(time);
|
|
|
|
}
|
|
}
|
|
})
|
|
s++;
|
|
}, 1000);
|
|
console.info(e)
|
|
this.details_index = e.details_index
|
|
this.query.order_id = e.id
|
|
this.cancelQuery.order_id = e.id
|
|
this.payQuery.order_id = e.id
|
|
this.getDate()
|
|
},
|
|
filters: {
|
|
goodsAttr(e) {
|
|
return e.replace(/\s\n/g, ';');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/common/scss/order.scss";
|
|
|
|
page {}
|
|
|
|
.body {
|
|
padding-bottom: 130rpx;
|
|
}
|
|
</style>
|
|
|