cqcarbonwxapp/pages/usercenter/orderList/orderdetails/orderdetails.vue

<template>
	<view class="page">
		<view class="order">
			<view class="order-info">订单编号：{{item.orderNo}}</view>
			<view class="order-info">下单时间：{{item.createTime | formatDateTime}}</view>
			<view class="order-info">
				支付方式：
				<text v-if="item.payChannel == '1'">微信支付</text>
				<text v-if="item.payChannel == '2'">支付宝</text>
				<text v-if="item.payChannel == '3'">银联</text>
				<text v-if="item.payChannel == '4'">线下支付</text>
			</view>
			<view class="order-info" v-if="item.payNo">支付流水号：{{item.payNo}}</view>
			<view class="order-status">
				<view class="status" v-if="item.orderStatus == 1 && item.state ==1">
					<image :src="$getInnerImg+'icon-vipcard.png'" class="status-img" mode="scaleToFill"></image>
					<text class="status-text">待付款</text>
				</view>
				<view class="status" v-if="item.state == 0">
					<image :src="$getInnerImg+'icon-vipcard.png'" class="status-img" mode="scaleToFill"></image>
					<text class="status-text">已失效</text>
				</view>
				<view class="status"  v-if="item.orderStatus == 2">
					<image :src="$getInnerImg+'icon-vipcard-green.png'" class="status-img" mode="scaleToFill"></image>
					<text class="status-text">已支付</text>
				</view>
				<view class="order-btn topay" v-if="item.orderStatus == 1&&item.state==1" @click.stop="pay(item)">去支付</view>
				<view class="order-btn done"  v-if="item.orderStatus == 2" @click="goCertDetails(item.guid)">查看证书</view>
			</view>
		</view>
		<!-- bottom-flex-btn-wrap end -->
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog type="info"  :content="popupContent" :duration="2000" :before-close="true" @close="closepopup" @confirm="confirmpopup"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopup,
			uniPopupDialog,
		},
		data() {
			return {
				$getInnerImg:this.$getInnerImg,
				token:'',
				tokenhead:'Bearer',
				params: {
					orderid:'',
				},
				item:[],
			}
		},
		onShow() {
			let serf = this;
			this.token = this.$store.state.token;
		},
		onLoad(option) {
			// console.log('option',option);
			this.params.orderid = option.orderid;
			this.token = this.$store.state.token;



			this.getdetails();

		},
		methods: {
			getdetails(){
				this.$api.http.get(this.config.apiBaseurl + '/carbon-h5/wap/order/info?orderId='+this.params.orderid,{
					header: {
					Accept:'application/json',
					Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
				},
				}).then(res => {
					this.item = res.data.retBody;
					console.log('res',JSON.parse(JSON.stringify(this.item)))
				}).catch(err =>{
					console.log('err',err)
				});
			},
			cancelOrder(){
				this.$refs.popup.open();
				this.popupContent = '确认取消此订单吗?';
				this.popupType = 'cancel';
			},
			received(){
				this.$refs.popup.open();
				this.popupContent = '确认收货?';
				this.popupType = 'received';
			},
			closepopup(done){
				done()
			},
			confirmpopup(done,value){
				if(this.popupType == 'cancel'){
					this.$api.http.post(this.config.apiBaseurl + '/order/cancelUserOrder/?orderId='+this.item.id,{},{
						header: {
						Accept:'application/json',
						Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
					},
					}).then(res => {
						this.getdetails();
						this.goOrderList(res.data.message);
						// console.log('res',res)
					}).catch(err =>{
						console.log('err',err)
					});
				}else if(this.popupType == 'received'){
					this.$api.http.get(this.config.apiBaseurl + '/order/confirmReceiveOrder/?orderId='+this.item.id,{},{
						header: {
						Accept:'application/json',
						Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
					},
					}).then(res => {
						this.getdetails();
						this.goOrderList(res.data.message);
						// console.log('res',res)
					}).catch(err =>{
						console.log('err',err)
					});
				}
				
				done()
			},
			pay(item){
				let self = this;
				console.log('pay item',item);
				let userInfo = uni.getStorageSync("userInfo");
				console.log('userInfo',userInfo);
				// return
				let params = {
					orderId:item.guid,
					// payType:item.payType,
					openid:userInfo.wxId,
					"tradeType":"test"
				};
				this.$api.http.post(this.config.apiBaseurl + "/carbon-h5/wechat/pay",params,{
					header: {
					Accept:'application/json',
					Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
				},
				}).then(res=>{
					uni.requestPayment({
					    provider: 'wxpay',
					    timeStamp:res.data.retBody.timeStamp,
					    nonceStr: res.data.retBody.nonceStr,
					    package: res.data.retBody.packageValue,
					    signType: 'MD5',
					    paySign: res.data.retBody.paySign,
					    success: function (res) {
							self.downCallback();
					        console.log('success:' + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				}).catch( err =>{
					console.log('pay err',err)
				})
			},
			// 跳转到订单列表
			goOrderList(msg){
				uni.showToast({
					icon:"none",
					title:msg,
					duration: 2000
				});	
				setTimeout(()=>{
					uni.navigateTo({
						url: '/pages/usercenter/myorder/myorder',
						fail:function(err){
							console.log(err)
						}
					});
				},1000)
			},
			goCertDetails(id){
				console.log(id)
				uni.navigateTo({
					url: '/pages/usercenter/certificateList/certificate/certificate?orderid=' + id,
				});
			},

		}
	}
</script>

<style>
	@import url("./orderdetails.css");
</style>