smartswrtch-app/page_fenbao/statulist/myorder/detailxq/index.vue

<template>
	<view class="page">
		<u-navbar title="订单详情" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
			height='50'></u-navbar>
        <view class="box">
        	<view class="listxq">
				<view class="nav">
					<text class="shen">订单号</text><text class="qian">{{detailobj.billNo == undefined ? '--' : detailobj.billNo}}</text>
				</view>
				<view class="nav" v-if="detailobj.isFinished == false && detailobj.isUsing == false && detailobj.status == 2">
					<text class="shen">订单状态</text>
					<text class="qian">
						未开始
					</text>
				</view>
        		<view class="nav" v-else>
        			<text class="shen">订单状态</text>
					<text class="qian" v-if="detailobj.status == 2">
						已支付 
					</text>
					<text class="qian" v-if="detailobj.status == 1">
						未支付 
					</text>
					<text class="qian" v-if="detailobj.status == 3">
						已退款 
					</text> 
					<text class="qian" v-if="detailobj.status == 4">
						已取消(用户) 
					</text>
					<text class="qian" v-if="detailobj.status == 5">
						已取消(系统) 
					</text>
					<text class="qian" v-if="detailobj.status == 6">
						支付中 
					</text>
					<text class="qian" v-if="detailobj.status == 7">
						退款中 
					</text>
        		</view>
				<view class="nav">
					<text class="shen">设备名称</text><text class="qian">{{detailobj.deviceName == undefined ? '--' : detailobj.deviceName}}</text>
				</view>
				<view class="nav">
					<text class="shen">店铺名称</text><text class="qian">{{detailobj.storeName == undefined ? '--' : detailobj.storeName}}</text>
				</view>
				<view class="nav">
					<text class="shen">套餐名称</text><text class="qian">{{detailobj.suitName == undefined ? '--' : detailobj.suitName}}</text>
				</view>
				<view class="nav">
					<text class="shen">支付方式</text><text class="qian">{{detailobj.channelName == undefined ? '--' : detailobj.channelName}}</text>
				</view>
				<view class="nav">
					<text class="shen">收费模式</text><text class="qian">{{detailobj.suitFeeMode == 1 ? '单次收费' : '智能收费'}}</text>
				</view>
				<view class="nav">
					<text class="shen">收费方式</text><text class="qian"> 
					<text v-if="detailobj.suitFeeType == 1">计时收费</text>
					<text v-if="detailobj.suitFeeType == 2">按量收费</text>
					<text v-if="detailobj.suitFeeType == 3">分时段按量收费</text>
					<text v-if="detailobj.suitFeeType == 4">分时段计时收费</text></text>
				</view>
				<view class="nav" v-if="detailobj.suitFeeType == 2 || detailobj.suitFeeType == 3">
					<text class="shen">使用度数</text><text class="qian">{{Number(detailobj.suitEndEle).toFixed(2) - Number(detailobj.suitStartEle).toFixed(2)}}度</text>
				</view>
				<view class="nav" v-else> 
					<text class="shen">套餐时长</text>
					<text class="qian" v-if="detailobj.suitFeeType == 1 || detailobj.suitFeeType == 2">{{detailobj.suitPrice == undefined ? '' : detailobj.suitPrice + '元'}}/{{detailobj.suitTime == undefined ? '--' : detailobj.suitTime}} 
					 <text v-if="detailobj.suitTimeUnit == 1">天</text>  <text v-if="detailobj.suitTimeUnit == 2">时</text> <text v-if="detailobj.suitTimeUnit == 3">分钟</text> <text v-if="detailobj.suitTimeUnit == 4">秒</text>
					</text>
					<text class="qian" v-else>--</text>
				</view>
				<view class="nav">
					<text class="shen">套餐金额</text><text class="qian">￥{{detailobj.money == undefined ? '--' : detailobj.money}}</text>
				</view>
				<view class="nav" v-if="detailobj.suitFeeMode == 2">
					<text class="shen">套餐押金</text><text class="qian">￥{{detailobj.suitDeposit == undefined ? '--' : detailobj.suitDeposit}}</text>
				</view>
				<view class="nav" v-if="detailobj.status == 3"> 
					<text class="shen">退款金额</text><text class="qian" style="color: red;">￥{{detailobj.refundAmount == undefined ? '--' : detailobj.refundAmount}}</text>
				</view>
				<view class="nav">
					<text class="shen">支付时间</text><text class="qian">{{detailobj.payTime == undefined ? '--' : detailobj.payTime}}</text>
				</view>
				<view class="nav">
					<text class="shen">套餐开始时间</text><text class="qian">{{detailobj.suitStartTime == undefined ? '--' : detailobj.suitStartTime}}</text>
				</view>
				<view class="nav">
					<text class="shen">套餐结束时间</text><text class="qian">{{detailobj.suitEndTime == undefined ? '--' : detailobj.suitEndTime}}</text>
				</view>
				<!-- <view class="xian"></view>
				<view class="nav">
					<text class="shen">共计</text><text class="qian">￥{{detailobj.money == undefined ? '--' : detailobj.money}}</text>
				</view> -->
        	</view>
			<view class="pic" @click="btntel">
				联系商家客服
			</view>
        </view>
		<!-- 退款弹窗 -->
		<view class="tanc" v-if="maskflag">
			<view class="top">
				请输入退款金额
			</view>
			<view class="shuzhi">
				 <input type="text" v-model="inptext" placeholder="请输入退款金额"/>
			</view>
			<view class="anniu">
				<view class="qux" @click="btnqx">
					取消
				</view>
				<view class="qd" @click="btnqd">
					确定
				</view>
			</view>
		</view>
		<view class="mask" v-if="maskflag"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
                billId:'',
				detailobj:{},
				imgad:'',
				maskflag:false,
				inptext:'',
				userType:{},
				userflag:false
			}
		},
		onLoad(option) {
			// console.log(uni.getStorageSync('userType'))
			this.userType = uni.getStorageSync('userType')
			if(option.billId){
				this.billId = option.billId
				this.getlist()
				// this.getad()
			}
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		methods: {
			call() {
				let phoneNumber = this.detailobj.mchName
				uni.makePhoneCall({
					phoneNumber: phoneNumber, 
					success: function(res) {
						console.log('拨打电话成功', res);
					},
					fail: function(err) {
						console.error('拨打电话失败', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						})
					}
				})
			},
			btntel(){
				uni.makePhoneCall({
					phoneNumber: this.detailobj.mchMobile,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						})
					}
				})
			},
			btnqd(){
				if(this.inptext > this.detailobj.money){
					uni.showToast({
						title: '退款金额不能大于订单金额',
						icon: 'none',
						duration: 3000
					})
				}else{
					this.maskflag = false
					let data = {
						billId:this.billId,
						refundAmount:this.inptext
					}
					this.$u.put(`/app/bill/refund`,data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								duration: 3000
							})
							setTimeout(()=>{
								this.getlist()
							},1000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							})
						}
					})
				}
				
			},
			btnqx(){
				this.maskflag = false
				this.inptext = ''
			},
			btntz(){
				this.maskflag = true
				// uni.navigateTo({
				// 	url:'/page_user/sbdetail?id=' + this.detailobj.deviceId + '&flag=' + true
				// })
			},
            getlist(){
            	this.$u.get(`/app/bill/${this.billId}`).then((res) => {
            		if (res.code == 200) {
            			this.detailobj = res.data
						if(res.data.mchId == this.userType.userId){
							this.userflag = true
						}else{
							this.userflag = false
						}
						// console.log(res.data.mchId ,this.userType.userId);
            		}
            	})
            },
			btnad(){
				this.$u.get("/app/ad").then((res) => {
					if (res.code == 200) {
						if(res.data.urlType == 1){
							uni.navigateTo({
								url:'/page_fenbao/webview?url=' + res.data.url
							})
						}else{
							uni.navigateTo({
								url: '/' + res.data.url
							})
						}
					}
				})
			},
			getad(){
				this.$u.get("/app/ad").then((res) => {
					if (res.code == 200) {
						this.imgad = res.data.picture
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title{
		padding-bottom: 22rpx;
	}
	/deep/ .u-icon__icon{
		// padding-bottom: 22rpx;
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #000;
		opacity: .6;
	} 
	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
		// position: fixed;
		// top: 0;
		// left: 0;
		
		.tanc {
			width: 594rpx;
			height: 420rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 506rpx;
			z-index: 98;
		
			.anniu {
				display: flex;
				justify-content: space-between;
				padding: 0 44rpx;
				box-sizing: border-box;
				margin-top: 64rpx;
				width: 100%;
		
				.qux {
					width: 234rpx;
					height: 80rpx;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					border: 2rpx solid #8883F0;
					font-size: 36rpx;
					color: #8883F0;
					text-align: center;
					line-height: 80rpx;
				}
		
				.qd {
					width: 234rpx;
					height: 80rpx;
					background: #8883F0;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-size: 36rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
			}
		
			.shuzhi {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				justify-content: center;
				// padding:  0 60rpx;
				margin-top: 50rpx;
				box-sizing: border-box;
		
				input {
					width: 500rpx;
					height: 76rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #808080;
					padding-left: 10rpx;
					box-sizing: border-box;
					margin: 0 10rpx;
					z-index: 99 !important;
				}
			}
		
			.top {
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				width: 100%;
				text-align: center;
				padding-top: 40rpx;
				box-sizing: border-box;
			}
		
			image {
				width: 198rpx;
				height: 172rpx;
				position: absolute;
				top: 12rpx;
				right: 20rpx;
				opacity: .5;
			}
		}
		.box{
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 24rpx;
			overflow: scroll;
			padding-bottom: 100rpx;
			box-sizing: border-box;
			.pic{
				width: 680rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 600;
				color: red;
				height: 238rpx;
				margin: auto;
				margin-top: 56rpx;
				border-radius: 30rpx;
			}
			.listxq{
				width: 680rpx;
				max-height: 1200rpx; 
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: auto;
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				.nav{
					display: flex;
					justify-content: space-between;
					margin-top: 26rpx;
					.shen{
						font-size: 28rpx;
						color: #3D3D3D;
					}
					.qian{
						font-size: 26rpx;
						color: #808080;
					}
				}
				.xian{
					width: 630rpx;
					box-sizing: border-box;
					height: 1px;
					margin: auto;
					background-color: #F3F3F3;
					margin-top: 48rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>