QianNiaoShop/pagesS/order/orderinfo.vue

<template>
	<view class="content">
		<view class="" style="background-color: #4076d6;height: 100rpx;">
			
		</view>
		<view class="good-info-wrap">
			<view class="good-list">
				<!-- 商品详情 -->
				<view class="good-wrap">
					<view class="good" v-for="goodsitem in order_detail.project">
						<image :src="goodsitem.image" mode="" class="good-img"></image>
						<view class="good-info">
							<view class="good-name clamp2">
								{{goodsitem.name}}
							</view>
							<view class="good-price">
								{{goodsitem.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mjly">
				<view class="ly-left">
					买家留言
				</view>
				<view class="ly-right">
					{{order_detail.remarks || '无'}}
				</view>
			</view>
			<view class="mjly" v-if="order_detail.staff">
				<view class="ly-left">
					预约员工
				</view>
				<view class="ly-right">
					{{order_detail.staff.staffName || ''}}
				</view>
			</view>
			<view class="mjly">
				<view class="ly-left">
					预约时间
				</view>
				<view class="ly-right">
					{{$utils.formatDate(order_detail.time)}}
				</view>
			</view>
			<view class="mjly">
				<view class="ly-left">
					商品总价
				</view>
				<view class="ly-right">
					￥{{order_detail.to_price}}
				</view>
			</view>
			<view class="mjly">
				<view class="ly-left">
					优惠金额
				</view>
				<view class="ly-right">
					￥{{order_detail.discount_price}}
				</view>
			</view>
			<view class="mjly">
				<view class="ly-left">
					实际支付
				</view>
				<view class="ly-right">
					￥{{order_detail.pay_price}}
				</view>
			</view>
		</view>
		<view class="btm" v-if="order_detail.id">
			<view class="btn" @click="goCall()">
				联系客户
			</view>
			<view class="btn" @click="goPage('/pagesS/order/addorder?id=' + order_detail.id)" v-if="order_detail.status == 0">
				添加项目
			</view>
			<view class="btn" @click="wcdd()" v-if="order_detail.status == 0">
				完成订单
			</view>
		</view>
		<u-modal :show-cancel-button="true" confirm-color="#3b73de" v-model="modal_show" :content="content"
			@confirm="confirmEdit" @cancel="cancelEdit"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_detail: {},
				modal_show: false,
				content: '确认订单已完成？',
				
			}
		},
		onLoad(opt) {
			this.id = opt.id
			
		},
		onShow() {
this.getYyOrderDetai()
		},
		onReachBottom() {

		},
		onReady() {
			
		},
		methods: {
			goCall() {
				uni.makePhoneCall({
					phoneNumber: this.order_detail.customer.mobile
				})
			},
			getYyOrderDetai() {
				this.$u.api.getYyOrderDetail({
					id: this.id
				}).then(({data})=> {
					this.order_detail = data
				})
			},
			wcdd() {
				console.log('点击完成');
				this.modal_show = true
			},
			confirmEdit(e) {
				// console.log(e,'确认')
				this.$u.api.completeYy({
					id: this.order_detail.id
				}).then(({data})=> {
					this.$u.toast('订单完成');
					this.getYyOrderDetai()
				})
			},
			cancelEdit(e) {
				// console.log(e,'失败')
				// this.wcid = ''
			},
		}
	}
</script>

<style lang="scss">
.good-info-wrap {
		margin:-50rpx auto 20rpx;
		width: 712rpx;
		min-height: 285rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding:10rpx 20rpx;
		.good-list {
			min-height: 177rpx;
			width: 100%;
			
			.good-wrap {
				min-height: 177rpx;
				.good {
					height: 177rpx;
					border-bottom: 1px solid #f7f8fa;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.good-info {
						height: 177rpx;
						width: 365rpx;
						padding:25rpx 0 25rpx 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
						.good-name {
							font-size: 26rpx;
							font-weight: 500;
							color: #333333;
						}
						.good-price {
							margin-top: 20rpx;
							font-size: 34rpx;
							font-weight: bold;
							color: #CE372E;
							&::before {
								content: '￥';
								font-size: 24rpx;
								color: #CE372E;
							}
						}
					}
					.good-img {
						width: 133rpx;
						height: 133rpx;
						border-radius: 10rpx;
						background-color: #eee;
					}
				}
			}
			.empty {
				// display: ;
				font-size: 28rpx;
				height: 177rpx;
				background-color: #ecf1f7;
				text-align: center;
				line-height: 177rpx;
				color: #4472bd;
				border-radius: 10rpx;
			}
		}
		
	}
	.mjly {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		.ly-left {
			font-weight: 500;
			color: #000;
			
		}
		.ly-right {
			width: 400rpx;
			text-align: right;
		}
		image {
			width: 15rpx;
			height: 28rpx;
		}
	}
	.sc-md {
		margin: 20rpx auto;
		width: 712rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	
		.sc-tip {
			padding-left: 20rpx;
			line-height: 70rpx;
			width: 712rpx;
			height: 70rpx;
			background: #e9e8ef;
			border-radius: 10rpx 10rpx 0px 0px;
			font-size: 26rpx;
			font-weight: 500;
			color: #262261;
		}
	
	
	}
	.btm {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		padding: 0 34rpx;
		align-items: center;
		background-color: #fff;
		.btn {
			width: 157rpx;
			height: 60rpx;
			background: #4076D6;
			border-radius: 30rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 60rpx;
			margin-left: 10rpx;
		}
	}
</style>