cbz/page_shop/pages/order/orderdetail.vue

<template>
	<view class="content">
		<view class="top">
			<view class="hflex acenter">
				<!-- <view class="state">{{pageData.status}}</view> -->
				<view class="state" v-if="pageData.status == 0">已取消</view>
				<view class="state" v-if="pageData.status == 1">预订单</view>
				<view class="state" v-if="pageData.status == 2">待付款</view>
				<view class="state" v-if="pageData.status == 3">支付中</view>
				<view class="state" v-if="pageData.status == 4">待发货</view>
				<view class="state" v-if="pageData.status == 5">待收货</view>
				<view class="state" v-if="pageData.status == 6">已完成</view>
				<!-- <view class="state" v-if="pageData.status == 7">退款中</view> -->
				<view class="state" v-if="pageData.status == 8">已取消</view>
				<view class="hflex acenter blue_bg2" v-if="pageData.status == 2">
					<view class="blue_bg">剩余付款时间</view>
					<view class="">
						<u-count-down autoStart :time="time" format="mm:ss" @change="onChange">
							<view class="time">
								<!-- <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;小时</text> -->
								<text class="time__item">{{ timeData.minutes>10?timeData.minutes:'0'+timeData.minutes }}&nbsp;分钟</text>
								<text class="time__item">{{ timeData.seconds>10?timeData.seconds:'0'+timeData.seconds }}&nbsp;秒</text>
							</view>
						</u-count-down>
					</view>
				</view>
			</view>
			<view class="subTitle" v-if="pageData.status == 0">{{pageData.cancel_remark}}</view>
			<view class="subTitle" v-if="pageData.status == 2">等待买家付款</view>
			<view class="subTitle" v-if="pageData.status == 4">已付款，等待商家发货</view>
			<view class="subTitle" v-if="pageData.status == 5">商家已发货，请耐心等待收货</view>
			<view class="subTitle" v-if="pageData.status == 6">感谢惠顾，期待您的再次光临</view>
		</view>
		<view>
			<view class="box">
				<view class="hflex acenter">
					<u-icon name="map-fill" color="#506DFF" size="22"></u-icon>
					<view class="vflex" style="padding-left: 16rpx;">
						<view class="hflex acenter">
							<view class="text_style1" style="padding-right: 20rpx;">{{pageData.user_address.address_name}}</view>
							<view class="text_style1">{{pageData.user_address.address_phone}}</view>
						</view>
						<view class="text_style2">{{pageData.user_address.address_province}} {{pageData.user_address.address_city}} {{pageData.user_address.address_area}} {{pageData.user_address.address_content}}</view>
					</view>
				</view>
			</view>
			<view class="box">
				<block v-for="(item,index) in pageData.goods_item" :key="index">
					<view class="cell">
						<view class="cell2 hflex acenter ">
							<image :src="item.goods_cover" mode="aspectFill" class="img"></image>
							<view class="img_right">
								<view class="hflex acenter jbetween">
									<view class="item_name text_hide" style="width: 374rpx;">{{item.goods_name}}</view>
									<view class="item_name">￥{{item.price_selling}}</view>
								</view>
								<view class="hflex jbetween" style="padding: 20rpx 0 0;">
									<view class="norm text_hide">{{item.goods_spec}}</view>
									<view class="left_text">X{{item.stock_sales}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view class="hflex acenter jbetween cell">
					<view class="title">商品金额</view>
					<view class="right">￥{{pageData.amount_goods}}</view>
				</view>
				<!-- <view class="hflex acenter jbetween cell">
					<view class="title">优惠金额</view>
					<view class="right">￥{{pageData.amount_reduct}}</view>
				</view> -->
				<view class="hflex acenter jbetween cell">
					<view class="title">实付款</view>
					<view class="text_red">￥{{pageData.payment_amount}}</view>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="title">备注</view>
					<view class="text_style2">{{pageData.order_remark}}</view>
				</view>
				<view class="line"></view>
				<view class="hflex acenter jbetween cell">
					<view class="title">订单编号</view>
					<view class="hflex acenter">
						<view class="text_style2">{{pageData.order_no}}</view>
						<view class="text_blue">|</view>
						<view class="text_blue" @click="copy">复制</view>
					</view>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="title">下单时间</view>
					<view class="text_style2">{{pageData.create_at}}</view>
				</view>
				
				<view class="hflex acenter jbetween cell" v-if="pageData.payment_datetime">
					<view class="title">付款时间</view>
					<view class="text_style2">{{pageData.payment_datetime}}</view>
				</view>
				<view class="hflex acenter jbetween cell" v-if="pageData.payment_status != 0">
					<view class="title">支付方式</view>
					<view class="text_style2">微信支付</view>
				</view>
				<view class="hflex acenter jbetween cell" v-if="pageData.user_address.send_datetime">
					<view class="title">发货时间</view>
					<view class="text_style2">{{pageData.user_address.send_datetime}}</view>
				</view>
			</view>
		</view>
		<view class="bottom hflex acenter jend" v-if="pageData.status == 2">
			<view class="btn" @click="openCancel">取消订单</view>
			<view class="btn btn2" @click="openPay">立即支付</view>
		</view>
		<view class="bottom hflex acenter jend" v-if="pageData.status == 4">
			<view class="btn" @click="remind">提醒发货</view>
			<view class="btn" v-if="pageData.refund_status == 1" @click="cancel">撤销申请</view>
			<view class="btn btn2" v-else @click="apply">申请退款</view>
		</view>
		<view class="bottom hflex acenter jend" v-if="pageData.status == 5">
			<view class="btn btn2">确认收货</view>
		</view>
		<u-popup :show="cancel_show" :round="20" :closeable="true" mode="bottom" @close="close">
			<view class="popu">
				<view class="popu_title">订单取消原因</view>
				<view class="text_style2">请选择取消订单的原因（必选）</view>
				<u-radio-group v-model="cancelReason" placement="column">
					<block v-for="(item, index) in cancelList" :key="index" >
						<u-radio :name="item.name" @change="radioChange" :customStyle="{padding: '28rpx 0'}" :label="item.name"></u-radio>
					</block>
				</u-radio-group>
				<view class="btn_group hflex acenter jbetween">
					<view class="cancel_btn" @click="close">我再想想</view>
					<view class="sure_btn" @click="cancelOrder">取消订单</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="pay_show" :round="20" :closeable="true" mode="bottom" @close="close">
			<view class="popu">
				<view class="popu_title">立即付款</view>
				<view class="popu_price hflex acenter jcenter">￥{{pageData.amount_real}}</view>
				<view class="type">支付方式</view>
				<view class="way hflex acenter jbetween">
					<view class="hflex acenter">
						<image class="pay_icon" src="/static/images/shop/wx_pay.png"></image>
						<view >微信支付</view>
					</view>
					<u-radio-group v-model="payWay">
						<u-radio name="wx"></u-radio>
					</u-radio-group>
				</view>
				<view class="btn_group hflex acenter jbetween">
					<view class="sure_btn2" @click="payOrder">确认付款</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				time: 0,
				timeData: {},
				pageData: {
				},
				address: {
				},
				cancel_show: false,
				pay_show: false,
				cancelList: [
					{
						name: '商品无货'
					},
					{
						name: '发货时间问题'
					},
					{
						name: '不想要了'
					},
					{
						name: '商品错选/多选'
					},
					{
						name: '地址信息填写错误'
					},
					{
						name: '其他原因'
					}
				],
				cancelReason: '',
				payWay: 'wx',
				id: '',
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.getData()
		},
		methods: {
			getData() {
				$api.req({
					url: '/data/api.Order/order_info',
					method: 'POST',
					data: {
						order_id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageData = res.data
						for(var i=0;i<that.pageData.goods_item.length;i++) {
							that.pageData.goods_item[i].goods_spec = $api.resetspec(that.pageData.goods_item[0].goods_spec)
						}
						that.computTime()
					}
				})
			},
			// 倒计时
			onChange(e) {
				that.timeData = e
			},
			// 计算倒计时
			computTime() {
				var date = new Date(that.pageData.create_at).getTime() + ( that.pageData.time * 1000);
				var nowDate = new Date().getTime()
				that.time = date - nowDate
			},
			// 复制订单号
			copy() {
				uni.setClipboardData({
					data: that.pageData.order_no,
					success: function () {
						$api.info('复制成功')
					}
				});
			},
			// 关闭
			close() {
				that.cancel_show = false
				that.pay_show = false
			},
			// 取消订单
			openCancel() {
				that.cancel_show = true
			},
			// 立即支付
			openPay() {
				that.pay_show = true
			},
			// 选择取消原因
			radioChange(e) {
				that.cancelReason = e
			},
			// 确认取消
			cancelOrder() {
				if(that.cancelReason == '') {
					$api.info('请选择取消订单的原因')
				} else {
					$api.req({
						url: '/data/api.Order/cancel_order',
						method: 'POST',
						data: {
							order_id: that.id,
							cancel_remark: that.cancelReason
						}
					}, function(res) {
						if(res.code == 1) {
							$api.info(res.info) 
							that.close()
							that.getData()
						}
					})
				}
			},
			remind() {
				$api.req({
					url: '/data/api.Order/remind',
					method: 'POST',
					data: {
						order_id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})
			},
			cancel() {
				$api.req({
					url: '/data/api.Order/cancel_refund',
					method: 'POST',
					data: {
						order_id: that.pageData.id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})
			},
			// 确认付款
			payOrder() {
				var openid = uni.getStorageSync('openid1')
				if(!openid) {
					$api.info("登录验证有误，请重新登录")
					return
				}
				$api.req({
					url: '/data/api.auth.Center/channel',
					method: 'POST',
					data: {
						type: 2,
						from: 1
					}
				}, function(res) {
					if(res.code == 1) {
						var pay_code = res.data[0].code
						$api.req({
							url: '/data/api.Order/order_pay',
							method: 'POST',
							data: {
								pay_code: pay_code,
								pay_no: that.pageData.payment_trade,
								type: 'wechat'
							}
						}, function(res) {
							if(res.code == 1) {
								wx.requestPayment({
								  timeStamp: res.data.pay.timeStamp,
								  nonceStr: res.data.pay.nonceStr,
								  package: res.data.pay.package,
								  signType: 'MD5',
								  paySign: res.data.pay.paySign,
								  success (res) { 
									that.close()
									$api.jump('/page_shop/pages/order/paySuccess?id=' + that.id,2)
								  },
								  fail (res) { }
								})
							}
						})
					}
				})
			},
			apply() {
				$api.jump('/page_shop/pages/order/apply?id=' + that.id)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F4F4F4;
		
		.top {
			width: 100%;
			padding: 20rpx 30rpx 24rpx;
			.state {
				font-size: 36rpx;
				font-weight: 500;
				color: #222222;
				line-height: 50rpx;
				padding-right: 24rpx;
			}
			.blue_bg {
				width: 124rpx;
				height: 32rpx;
				background: #506DFF;
				border-radius: 18rpx 0px 18rpx 18rpx;
				font-size: 16rpx;
				text-align: center;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 32rpx;
			}
			.blue_bg2 {
				width: 256rpx;
				height: 32rpx;
				background: #E7EBFF;
				border-radius: 18rpx;
				font-size: 16rpx;
				font-weight: bold;
				color: #222222;
				line-height: 32rpx;
			}
			.time {
				padding-left: 16rpx;
			}
			.subTitle {
				font-size: 24rpx;
				font-weight: 400;
				color: #888888;
				line-height: 34rpx;
			}
		}
		.text_style2 {
			font-size: 26rpx;
			font-weight: 400;
			color: #888888;
			line-height: 36rpx;
		}
		.box {
			background: #FFFFFF;
			border-radius: 10px;
			margin: 20rpx auto 0;
			width: 690rpx;
			box-sizing: border-box;
			padding: 34rpx 20rpx;
			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
			}
			.text_style1 {
				font-size: 28rpx;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
			}
			.text_style2 {
				font-size: 26rpx;
				font-weight: 400;
				color: #888888;
				line-height: 36rpx;
			}
			.text_blue {
				font-size: 26rpx;
				font-weight: 400;
				color: #506DFF;
				line-height: 36rpx;
				padding-left: 8rpx;
			}
			.cell {
				padding: 20rpx 0 32rpx;
			}
			.cell2 {
				border-bottom: 1rpx solid #F4F4F4;
			}
			.cell2:nth-last-child(1) {
				border: none;
			}
			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 24rpx;
			}
			.img_right {
				width:calc(100% - 160rpx);
				padding-left: 20rpx;
				.item_name {
					font-size: 30rpx;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
				}
				.norm {
					width: max-content;
					max-width: 288rpx;
					// height: 42px;
					background: #F5F5F5;
					border-radius: 12rpx;
					box-sizing: border-box;
					padding: 12rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #888888;
					line-height: 28rpx;
				}
				
			}
			.left_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #888888;
				line-height: 28rpx;
			}
			.right_text {
				font-size: 24rpx;
				font-weight: bold;
				color: #222222;
				line-height: 28rpx;
			}
			.item_bottom {
				padding-top: 22rpx;
				border-top: 1rpx solid #F4F4F4;
			}
			.text_red {
				font-weight: bold;
				color: #EE5850;
			}
			.pay_icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
			.check_icon {
				width: 32rpx;
				height: 32rpx;
			}
			.line {
				width: 100%;
				height: 1px;
				background: #F1F8FE;
			}
		}
		.box:nth-last-child(1) {
			margin-bottom: 186rpx;
		}
		.bottom {
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			z-index: 9;
			position: fixed;
			bottom: 0;
			box-sizing: border-box;
			padding: 8rpx 50rpx 74rpx;
			.title {
				font-size: 24rpx;
				font-weight: 400;
				color: #222222;
				line-height: 34rpx;
			}
			.text_blue {
				font-size: 44rpx;
				color: #5270FF;
			}
			.btn{
				margin-left: 16rpx;
				width: 188rpx;
				height: 76rpx;
				border-radius: 38rpx;
				border: 1px solid #D2D2D2;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #222;
				line-height: 76rpx;
			}
			.btn2 {
				border: 1px solid #506DFF;
				color: #506DFF;
			}
		}
		.popu {
			width: 100%;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0px 0px;
			box-sizing: border-box;
			padding: 0 30rpx;
			.popu_title {
				width: 100%;
				text-align: center;
				padding: 48rpx 0 44rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #222222;
				line-height: 50rpx;
			}
			.popu_price {
				font-size: 36rpx;
				font-weight: 400;
				color: #FF2626;
				line-height: 44rpx;
				padding: 0 0 36rpx;
			}
			.type {
				font-size: 30rpx;
				font-weight: 400;
				color: #222222;
				line-height: 42rpx;
			}
			.way {
				width: 100%;
				margin: 28rpx 0 60rpx;
				background: #F4F4F4;
				border-radius: 12px;
				box-sizing: border-box;
				padding: 36rpx 20rpx;
				.pay_icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}
			}
			.btn_group {
				width: 100%;
				margin: 56rpx 0 20rpx;
				.cancel_btn {
					width: 330rpx;
					height: 84rpx;
					background: #F4F6FF;
					border-radius: 42rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #506DFF;
					line-height: 84rpx;
				}
				.sure_btn {
					width: 330rpx;
					height: 84rpx;
					background: #506DFF;
					border-radius: 42rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 84rpx;
				}
				.sure_btn2 {
					width: 100%;
					height: 84rpx;
					background: #506DFF;
					border-radius: 42rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 84rpx;
				}
			}
			.u-radio-group {
				flex: unset;
			}
		}
	}
</style>