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.
445 lines
14 KiB
445 lines
14 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" >
|
|
<image :src="item.goods_thumb" mode=""></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==4 || 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{
|
|
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'
|
|
})
|
|
}
|
|
});
|
|
}
|
|
})
|
|
}
|
|
},
|
|
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'
|
|
})
|
|
}
|
|
|
|
})
|
|
}
|
|
},
|
|
onLoad(e){
|
|
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>
|