222 lines
7.0 KiB
Vue
222 lines
7.0 KiB
Vue
<template>
|
||
<view>
|
||
<view class="order">
|
||
<view class="order-li">
|
||
<view class="bianhao flex fsz28" style="color: #777;">
|
||
<text>订单编号:{{details.order_no||''}}</text>
|
||
<text v-if=" details.status==1">{{details.pay_status_text||''}}
|
||
|
||
<text v-if=" details.refund_status ==1">,{{details.refund_status_text||''}}</text>
|
||
<text v-if=" details.shipping_status>0">,{{details.shipping_status_text||''}}</text></text>
|
||
<text v-if=" details.status>1"><text v-if=" details.refund_status ==2">{{details.refund_status_text||''}},</text>{{details.status_text}}</text>
|
||
|
||
|
||
</view>
|
||
<view class="order-img flex">
|
||
<view class="left">
|
||
<image :src="details.goods_image" class="little-img"></image>
|
||
</view>
|
||
<view class="right fsz32">
|
||
{{details.goods_name||''}}
|
||
</view>
|
||
</view>
|
||
<view class="order-time flex fsz28">
|
||
<view class="fsz28">
|
||
<view class="">{{details.point||''}}积分+{{details.price||''}}元</view>
|
||
</view>
|
||
<view class="">x{{details.number||''}}</view>
|
||
</view>
|
||
<view class="order-time flex fsz28" v-if=" details.status==1 && details.refund_status==3">
|
||
<view class="fsz28">
|
||
<view class="">退款申请结果:{{details.approve_msg||''}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-li order-info" v-if=" details.ship_code">
|
||
<view class="fsz28">
|
||
<text>快递公司：</text>{{details.ship_company||''}}
|
||
</view>
|
||
<view class="fsz28">
|
||
<text>快递单号：</text>{{details.ship_code||''}}
|
||
</view>
|
||
</view>
|
||
<view class="order-li order-info">
|
||
<view class="fsz28">
|
||
<text>订单编号：</text>{{details.order_no||''}}
|
||
</view>
|
||
<view class="fsz28">
|
||
<text>下单时间：</text>{{details.createtime_text||''}}
|
||
</view>
|
||
<view class="fsz28" >
|
||
<text>联系人：</text>{{details.contact_name||''}}
|
||
</view>
|
||
<view class="fsz28" >
|
||
<text>联系人手机号：</text>{{details.contact_mobile||''}}
|
||
</view>
|
||
<view class="fsz28" >
|
||
<text>收货地址：</text>{{details.contact_address||''}}
|
||
</view>
|
||
</view>
|
||
<view class="order-li">
|
||
<view class="bianhao flex fsz28 order-time">
|
||
<text>积分：</text>
|
||
<text class="fsz34"> {{details.order_point||''}}</text>
|
||
</view>
|
||
<view class="bianhao flex fsz28 order-time">
|
||
<text>金额：</text>
|
||
<text class="fsz34">
|
||
￥{{details.order_amount||''}}</text>
|
||
</view>
|
||
</view>
|
||
<view style="height:80px"></view>
|
||
</view>
|
||
<view class="order-btn fsz28" v-if="details.auth_refund == 1 || details.auth_cancel ==1 || details.auth_pay ==1 || details.auth_finish ==1">
|
||
<template v-if="details.auth_cancel ==1">
|
||
<view class="btn btn-default" @click.stop="closeorder(details)">取消订单</view>
|
||
</template>
|
||
<template v-if="details.auth_pay ==1">
|
||
<view class="btn btn-default" @click="gopay()">去支付</view>
|
||
</template>
|
||
<view class="btn btn-default" @click="gofinish()" v-if="details.auth_finish == 1">完成</view>
|
||
<view class="btn btn-default" @click="gorefund()" v-if="details.auth_refund == 1">申请退款</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data(){
|
||
return{
|
||
id:'',
|
||
details:{},
|
||
isshow:true,
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id
|
||
},
|
||
onShow() {
|
||
this.getdata()
|
||
},
|
||
methods:{
|
||
getdata(){
|
||
let data = {
|
||
id:this.id
|
||
}
|
||
this.$api.exchangeOrderinfo(data,res=>{
|
||
if(res.code == '1'){
|
||
this.details = res.data.info
|
||
}
|
||
})
|
||
},
|
||
gopay(item){
|
||
let that = this
|
||
this.$api.exchangePay({order_id:this.id},data=>{
|
||
if(data.code == '1'){
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
appid:data.data.appId,
|
||
nonceStr:data.data.nonceStr,
|
||
package:data.data.package,
|
||
timeStamp: data.data.timeStamp,
|
||
signType: data.data.signType,
|
||
paySign:data.data.paySign,
|
||
success: function(e) {
|
||
this.getdata()
|
||
},
|
||
fail(err) {
|
||
console.log(err,'失败')
|
||
}
|
||
});
|
||
}else{
|
||
uni.showToast({ title: data.msg , icon: 'none' })
|
||
}
|
||
})
|
||
},
|
||
gofinish(){
|
||
uni.showModal({
|
||
title:'提示',
|
||
content: '确认完成订单吗?',
|
||
success:(ret)=>{
|
||
if(ret.confirm){
|
||
this.$api.exchangeFinish({id:this.id},res=>{
|
||
if(res.code == '1'){
|
||
uni.showToast({ title: res.msg , icon: 'success' })
|
||
this.getdata()
|
||
}else{
|
||
uni.showToast({ title: res.msg , icon: 'none' })
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
} ,
|
||
gorefund(){
|
||
uni.showModal({
|
||
title:'提示',
|
||
content: '确认申请退款吗?',
|
||
success:(ret)=>{
|
||
if(ret.confirm){
|
||
this.$api.exchangeRefund({id:this.id},res=>{
|
||
if(res.code == '1'){
|
||
uni.showToast({ title: '申请退款成功' , icon: 'success' })
|
||
this.getdata()
|
||
}else{
|
||
uni.showToast({ title: res.msg , icon: 'none' })
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 取消订单
|
||
closeorder(item){
|
||
uni.showModal({
|
||
title:'提示',
|
||
content: '确认取消订单吗?',
|
||
success:(ret)=>{
|
||
if(ret.confirm){
|
||
this.$api.exchangeCancelorder({id:item.id},res=>{
|
||
if(res.code == '1'){
|
||
uni.showToast({ title: res.msg , icon: 'success' })
|
||
this.getdata()
|
||
}else{
|
||
uni.showToast({ title: res.msg , icon: 'none' })
|
||
}
|
||
})
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.order{width: 96%;margin: 0 auto;}
|
||
.order-li{background: #fff;border-radius: 10rpx;padding: 24rpx;box-sizing: border-box;box-shadow: 2px 2px 5px 2px #eee;margin-bottom: 30rpx;}
|
||
.flex{display: flex;justify-content: space-between;margin-bottom: 30rpx;}
|
||
.bianhao{color:#222222;}
|
||
.order-img .left{flex:0 0 40%;}
|
||
.order-img .right{flex:0 0 58%;font-weight: 700;overflow: hidden;height: 65px;}
|
||
.order-img .left image{width: 100%;height:150rpx;border-radius: 10rpx;}
|
||
.order-time{line-height: 50rpx;align-items: center;}
|
||
.order-time .fsz34{font-weight: 700;color:red;}
|
||
|
||
.order-time .nouse{color:#fa8a1e; float: right;}
|
||
.order-time .yiuse{ float: right;}
|
||
.order-btn{ display: flex;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
padding: 10px 0px;justify-content: flex-end;
|
||
background: #fff;
|
||
width: 100%;}
|
||
/* .order-btn>view{height: 64rpx;padding: 0 34rpx;box-sizing: border-box;border: 1px solid #ddd;line-height: 64rpx;border-radius: 50rpx;margin-right: 30rpx;}
|
||
*/.content{margin-top: 30rpx;}
|
||
.order-time .fsz28{color: #222222;}
|
||
.kaipiao{position: relative;}
|
||
.kaipiao .tishi{position: absolute;width: 400rpx;background: #ddd;text-align: center;border-radius: 10rpx;top: -99rpx;left: -50%;}
|
||
.sanjiao{width: 0;height: 0;border-bottom: 18rpx solid transparent;position: absolute;border-top: 18rpx solid #ddd;border-left: 18rpx solid transparent;border-right: 18rpx solid transparent;left: 50%;transform: translateX(-50%);top: 62rpx;}
|
||
.order-info>view{line-height: 60rpx;color: #222222;}
|
||
</style>
|