web-app-v1/pages/order-detail1/order-detail1.vue

<template>
	<view class="order-box">
		<view
			:style="{ backgroundImage: `url(${apply_status == 1 ? bgimgurl[5]: is_deleted == true? bgimgurl[0] : pay_status ==  false? bgimgurl[1] : pay_status == true && status == 3 ? bgimgurl[2] : status == 4? bgimgurl[3] :bgimgurl[4]})` }"
			class="imgfix">
			<view class="topFix">
				<view class="topFix_one">
					{{ apply? titleList[5].title :is_deleted == true? titleList[0].title : pay_status ==  false? titleList[1].title : pay_status == true && status == 3 ? titleList[2].title : status == 4? titleList[3].title :titleList[4].title }}
				</view>
				<view class="topFix_two">
					{{ apply? titleList[5].tip : is_deleted == true? titleList[0].tip : pay_status ==  false? titleList[1].tip : pay_status == true && status == 3 ? titleList[2].tip : status == 4? titleList[3].tip :titleList[4].tip }}
				</view>
			</view>
		</view>
		<view class="dizhi">
			<view class="dizhi_flex">
				<image src="../../static/new_order/ding.png" mode="widthFix" style="width: 54rpx;"></image>
				<view class="dizhi_right">
					<view class="top">
						<text class="name">{{ address.con_name }}</text>
						<text class="phone">{{ address.con_mobile }}</text>
					</view>
					<view class="ellipsid">{{ address | getAddressString }}</view>
				</view>
			</view>
			<view class="zuofei dizhi_flex" v-if="apply || is_deleted == true">
				<image src="../../static/new_order/x.png" mode="widthFix" style="width: 54rpx;"></image>
				<view class="title">
					作废原因：
					<text>
						{{ destroy_caused }}
					</text>
				</view>
			</view>
		</view>
		<view style="margin-top: 30rpx; background-color: #fff;">
			<view class="collapse" v-for="(item,index) in goodList" :key="item.attr_id">
				<view @click="changeContent(item,index)">
					<view class="coll-header">
						<view style="display: flex;align-items: center;">
							<image :src="item.main_img" mode="a" style="width: 136rpx;height: 136rpx;"></image>
							<view class="content">
								<view class="head-txt">{{item.name}}</view>
								<view class="bottom">
									<text class="num" style="margin-right: 20rpx;">尺码：{{ item.size.length }}</text>
									<text class="num">数量：{{ item.num.reduce((t, e) => t + e, 0) }}</text>
								</view>
							</view>
						</view>
						<view class="coll-right">
							<view class="space">
								￥{{ item.money * item.num.reduce((t, e) => t + e, 0) }}
							</view>
							<image :src="item.open?imageList[0]:imageList[1]" mode="widthFix" style="width: 24rpx;">
							</image>
						</view>
					</view>
					<!-- 展开 -->
					<view class="box">
						<view class="box-cont" v-show="item.open === true">
							<view class="item" v-for="(sizeItem, sizeIndex) in item.size" :key="sizeIndex">
								<view class="flex" style="margin-bottom: 10rpx;">
									<view class="size"><text>款式：</text>{{ item.sec_attr }}</view>
									<view>{{ item.money }}元</view>
								</view>
								<view class="flex">
									<view class="size"><text>尺码：</text>{{ sizeItem }}</view>
									<view>x {{ item.num[sizeIndex] }}{{ item.unit }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="giftList.length > 0" style="padding: 30rpx;">
				<view style="font-size: 32rpx; font-weight: bold;margin-bottom: 28rpx;">
					赠品信息
				</view>
				<view class="gift_item" v-for="item in giftList" :key="item.id" v-show="item.num > 0">
					<image :src="item.img" class="gift_img"></image>
					<view class="right">
						<view class="name">{{ item.name }}</view>
						<view class="num">数量：{{ item.num }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="botFlex">
			<view class="botFlex_flex">
				<view class="title">
					订单编号：
					<text style="font-weight: 400;">{{ order_num }}</text>
				</view>
				<view class="anniu" @click="copy(order_num)">
					复制
				</view>
			</view>
			<view class="botFlex_flex">
				<view class="title">
					下单时间：
					<text style="font-weight: 400;">{{ created_at }}</text>
				</view>
				<view class="right">

				</view>
			</view>
			<view class="botFlex_flex">
				<view class="title">
					商品总额：
				</view>
				<view class="right">
					￥{{ money }}
				</view>
			</view>
			<view class="botFlex_flex">
				<view class="title">
					商品数量：
				</view>
				<view class="right">
					{{ total }}件
				</view>
			</view>
		</view>
		<view class="botFlex">
			<view class="botFlex_flex">
				<view class="title">
					所属者：
				</view>
				<text style="color: #333;" class="right"
					v-if="belong_user.nickname">{{ belong_user.nickname.length > 10 ? belong_user.nickname.slice(0, 10) + '...' : belong_user.nickname }}</text>
			</view>
			<view class="botFlex_flex" @click="toLogistics">
				<view class="title">
					物流信息
				</view>
				<text class="cuIcon-right"></text>
			</view>
			<view class="botFlex_flex" @click="showRemark">
				<view class="title">
					订单备注
				</view>
				<text class="cuIcon-right"></text>
			</view>
			<view class="botFlex_flex" @click="goDetail" v-if="is_merge == 1">
				<view class="title">
					合并明细
				</view>
				<text class="cuIcon-right"></text>
			</view>
			<view class="botFlex_flex" @click="caozuo">
				<view class="title">
					操作日志
				</view>
				<text class="cuIcon-right"></text>
			</view>
			<!-- <view class="botFlex_flex botzuofei" v-if="apply_status == 1">
				<view class="title">
					作废原因：
				</view>
				<view class="red">
				</view>
			</view> -->
		</view>
		<view class="submitPay">
			<view class="submitPay_left">
				<text class="total">共{{ total }}件,</text>
				合计：<text class="money">￥{{ money }}</text>
			</view>
			<view class="submitPay_right">
				<!-- 订单状态为 待订单审核，未申请作废订单, 订单未作废 -->
				<view class="anniu gray"
					v-if="status == 0 && apply_status == 0 && is_deleted == false &&  destroy_status != 2"
					@click="showCancel = true; destroy_cause = '' ">
					作废订单
				</view>
				<!-- 订单状态为 待收货 或者 已完成 -->
				<view class="anniu red" v-if="status == 3 || status == 4" @click.stop="toGoodsInfo()">
					发货详情
				</view>
				<!-- 订单状态为 已完成 -->
				<view class="anniu red" v-if="status != 3 || is_deleted == true || apply" @click.stop="buyAgain">
					再次购买
				</view>
				<!-- 订单状态为 待收货 -->
				<view class="anniu red" v-if="status == 3 " @click.stop="received(order_num)">
					确认收货
				</view>
			</view>
		</view>
		<u-popup v-model="showCancel" mode="bottom" height="700rpx;">
			<view class="popBox">
				<view class="popBox_title">
					作废订单原因
				</view>
				<view class="">
					<radio-group @change="radioChange">
						<label v-for="(item, index) in cancelCause" :key="item.value">
							<view class="uni-list" :class="index == 3 ?  '':'border'">
								<view>{{item.name}}</view>
								<view>
									<radio :value="item.value" :checked="index === current" color="#FF232C" />
								</view>
							</view>
							<view v-if="index == 3" class="input">
								<textarea v-model="destroy_cause" placeholder="请输入您作废的原因"
									placeholder-style="color: #CCCCCC" style="height: 150rpx;" :focus="firstFocus" />
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="popBox_btn">
				<view class="btn qu" @click="destroy_cause = '';showCancel = false">
					取消作废
				</view>
				<view class="btn submit" @click="$noMultipleClicks(commitWork)">
					确定作废
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		_API_GoodList
	} from '@/apis/good.js';
	import {
		CheckMoney,
		_API_OrderDetail1,
		_API_GetOrderGift,
		_API_OrderReceiveGoods1,
		_API_destory
	} from '@/apis/order.js'
	import toast from "@/components/toast.vue"
	import {
		handleClipboard
	} from '../../common/util/utils.js'
	export default {
		components: {
			toast
		},
		data() {
			return {
				sureGift: false,
				biggift: {},
				bigstatus: false,
				noClick: true,
				firstFocus: false,
				current: 0,
				showBelong: false,
				destroy_cause: '',
				showCancel: false, // 作废弹窗
				imageList: [
					require('../../static/team/bottom.png'),
					require('../../static/team/right-t.png'),
				],
				bgimgurl: [
					require('../../static/new_order/zuofeile.png'), // 已作废
					require('../../static/new_order/weifu.png'), // 待支付
					require('../../static/new_order/fahuo.png'), // 待收货
					require('../../static/new_order/wancheng.png'), // 已完成
					require('../../static/new_order/daishen.png'), // 待审核
					require('../../static/new_order/zuofei.png') // 待作废审核
				],
				test: [
					'已作废',
					'待支付',
					'待收货',
					'已完成',
					'待审核',
					'待作废审核'
				],
				cancelCause: [{
						value: '0',
						name: '收货信息错了'
					},
					{
						value: '1',
						name: '尺码或数量错了'
					},
					{
						value: '2',
						name: '订单下多了'
					},
					{
						value: '3',
						name: '其他原因'
					},
				],
				titleList: [
					// 已作废
					{
						title: '已作废',
						tip: '请重新下单~'
					},
					// 待支付
					{
						title: '等待付款',
						tip: '请耐心等待~'
					},
					// 待收货
					{
						title: '待收货',
						tip: '已发货，记得及时收货呦~'
					},
					//已完成
					{
						title: '已完成',
						tip: '请及时确认订单呦~'
					},
					//待审核
					{
						title: '待审核',
						tip: '请耐心等待~'
					},
					//待作废审核
					{
						title: '作废订单审核中...',
						tip: '请耐心等待~'
					}
				],
				data: {},
				apply: '',
				giftList: [],
				address: {},
				goodList: [],
				nopay: false,
				status: '',
				is_deleted: '',
				apply_status: '',
				pay_status: '',
				destroy_status: '',
				order_id: '',
				order_num: '',
				is_merge: '',
				remark: '',
				money: '',
				destroy_caused: '',
				reject_cause: '',
				created_at: '',
				track_company: '',
				track_number: '',
				track_remark: '',
				track_time: '',
				total: '',
				belong_user: {},
				belogShow: false
			};
		},
		// { created_at, status, order_id, order_num, is_deleted, pay_status, nopay, money, is_merge, total, apply_status, destroy_status  }
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item))
			this.data = item
			this.status = item.status;
			this.money = item.money;
			this.order_id = item.order_id;
			this.order_num = item.order_num;
			this.created_at = item.created_at;
			this.is_merge = item.is_merge;
			this.total = item.total
			this.pay_status = item.pay_status
			this.is_deleted = item.is_deleted
			this.destroy_caused = item.destroy_cause
			this.titleList[0].tip = `作废时间：${item.deleted_time}` //作废时间
			this.apply_status = item.apply_status
			this.destroy_status = item.destroy_status
			if (this.destroy_status == 0 && this.apply_status) {
				this.apply = true
			} else {
				this.apply = false
			}
			uni.loading();
			const order_num = this.order_num
			_API_OrderDetail1({
				order_num
			}).then(({
				code,
				message,
				data: {
					biggift,
					bigstatus,
					remark,
					address,
					list,
					track_company,
					track_number,
					track_remark,
					track_time,
					belong_user
				}
			}) => {
				if (code === 200) {
					this.getGiftList(order_num)
					this.remark = remark;
					this.address = address;
					/*大礼包测试begin*/
					// this.biggift = biggift
					// this.bigstatus = bigstatus
					// this.getGiftApply()
					/*大礼包测试end*/

					list.forEach((item, i) => {
						item.open = false
					})
					this.goodList = list;
					this.track_company = track_company;
					this.track_number = track_number;
					this.track_remark = track_remark;
					this.track_time = track_time;
					this.belong_user = belong_user
				} else {
					uni.showModal({
						title: '提示',
						content: message || '获取失败',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					});
				}
			})
		},
		onShow() {
			if (uni.getStorageSync('activeItem')) {
				uni.removeStorageSync('activeItem')
			}
		},
		methods: {
			/*复制单号*/
			copy(data) {
				handleClipboard(
					data,
					event,
					() => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					},
					() => {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						});
					}
				);
			},
			// 作废订单提交
			commitWork() {
				let that = this
				if (that.current != 3) {
					that.reject_cause = that.cancelCause[that.current].name
				} else {
					if (that.destroy_cause == '') {
						uni.showToast({
							title: '请输入作废原因',
							icon: 'none'
						})
						return false;
					} else {
						that.reject_cause = that.destroy_cause
					}
				}
				const data = {
					order_num: that.order_num,
					destroy_cause: that.reject_cause
				}
				uni.showLoading({
					mask: true
				})
				_API_destory(data).then(res => {
					if (res.code === 200) {
						this.noClick = false
						uni.showToast({
							title: '作废成功',
							icon: 'none'
						})
						setTimeout(function() {
							uni.redirectTo({
								url: '../my-order/my-order'
							})
						}, 1000)
						uni.hideLoading()
					} else {
						uni.showToast({
							title: res.message || '作废失败',
							icon: 'none',
							duration: 2500
						})
						uni.hideLoading()
					}
				})
			},
			// 选择作废原因
			radioChange(e) {
				console.log(e.detail.value)
				this.current = e.detail.value
				if (this.current != 3) {
					this.destroy_cause = ''
				}
			},
			// 获取赠品
			getGiftList(order_no) {
				_API_GetOrderGift({
					order_num: order_no
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.giftList = res.data.list
						console.log(this.giftList)
					} else {
						uni.showToast({
							title: res.message || '获取赠品失败',
							icon: 'none'
						})
					}
				})
			},
			// 展开
			changeContent(item, index) {
				this.goodList.forEach(i => {
					if (i.open !== this.goodList[index].open) {
						i.open = false;
					}
				})
				item.open = !item.open
			},
			// 点击确认收货
			received(order_num) {
				uni.showModal({
					title: '提示',
					content: '确认收到货物？',
					success: (res) => {
						if (res.confirm) {
							uni.loading()
							_API_OrderReceiveGoods1({
								order_num
							}).then(() => {
								uni.startPullDownRefresh()
							})
						}
					}
				})
			},
			// 发货详情
			toGoodsInfo() {
				if (!this.data.track_status) {
					uni.showModal({
						content: "该订单尚未发货,暂不能查看详情",
						showCancel: false
					})
					return false
				}
				uni.navigateTo({
					url: "../lading_detail/index?data=" + encodeURIComponent(JSON.stringify(this.data))
				})
			},
			goDetail() {
				uni.navigateTo({
					url: '../my-order/order-detail?id=' + this.order_id
				})
			},
			toBelongUser() {
				this.belogShow = true
				console.log(this.belogShow)
			},
			toGiftDetail() {
				uni.navigateTo({
					url: '../gift-detail/index?order_no=' + this.order_num
				});
			},
			//跳转到物流信息页面
			toLogistics() {
				console.log(this.order_id, 'orderId')
				uni.navigateTo({
					url: '../logistics-info/logistics-info?order_no=' + this.order_num + '&order_id=' + this
						.order_id
				});
			},
			showRemark() {
				// 点击备注
				if (this.remark) {
					uni.showModal({
						title: '备注',
						content: this.remark,
						showCancel: false
					});
				} else {
					uni.toast('该订单无备注');
				}
			},
			caozuo() {
				uni.navigateTo({
					url: '../order-detail1-log/order-detail1-log?order_num=' + this.order_num
				})
			},
			toList() {
				// 点击查看商品详情
				uni.setStorageSync('lll', JSON.stringify(this.goodList));
				uni.navigateTo({
					url: '../order-detail1-list/order-detail1-list'
				});
			},
			payNow() {
				uni.navigateTo({
					url: `../pay-order/pay-order?order_num=${this.order_num}&money=${this.money}&order_id=${this.order_id}`
				});
			},
			// 再次购买
			buyAgain() {
				uni.showModal({
					title: '提示',
					content: '确定要再次购买？',
					success: res => {
						if (res.confirm) {
							uni.loading();
							_API_GoodList().then(({
								data: {
									list: list1
								}
							}) => {
								uni.loading();
								list1.forEach(e => (e.cart = Array(e.size.length).fill(0)));
								_API_OrderDetail1({
									order_num: this.order_num
								}).then(({
									data: {
										list: list2
									}
								}) => {
									this.$store.commit('cart/CLEAR');
									list1.forEach((item, index) => {
										const findRes = list2.find(e => e.attr_id ==
											item.attr_id);
										if (findRes) {
											findRes.size.forEach((size, sizeIndex) => {
												const goodItemSizeIndex =
													list1[index].size
													.findIndex(e => e ===
														size);
												list1[index].cart[
														goodItemSizeIndex] =
													findRes.num[sizeIndex];
											});
											item.choosed = true;
											item.sizeChoosed = Array(item.size.length)
												.fill(true);
											this.$store.commit('cart/ADD', item);
											uni.navigateTo({
												url: '../shop-car1/shop-car1'
											});
										}
									})
								});
							});
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.giftYelleow {
		background: linear-gradient(90deg, #FFA600 0%, #FFBB00 100%);
	}

	.giftRed {
		background: linear-gradient(273deg, #FF7D2A 0%, #FF5500 100%);
	}

	.gift {
		// width: 702rpx;
		height: 104rpx;
		margin: 0 24rpx;
		border-radius: 16rpx;
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;

			.text {
				margin-left: 22rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}

	.popBox {
		border-radius: 40rpx 40rpx 0px 0px;
		padding: 30rpx 30rpx 0 30rpx;

		&_title {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		&_btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 52rpx;
			height: 100rpx;
			border-top: 2rpx solid #EEEEEE;
			margin-top: 40rpx;

			.btn {
				width: 308rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 44rpx;
			}

			.qu {
				border: 2rpx solid #FB231F;
				color: #FB231F;
				background-color: #FFF4F3;
			}

			.submit {
				color: #fff;
				background: linear-gradient(93deg, #FF232C 0%, #FF571B 100%);
			}
		}

		.uni-list {
			padding: 30rpx 0;
			width: 690rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.input {
			width: 690rpx;
			height: 224rpx;
			background: #F8F8F8;
			border-radius: 24rpx;
			padding: 30rpx;
		}

		.border {
			border-bottom: 2rpx solid #EEEEEE;
		}
	}

	.order-box {
		padding-bottom: 154rpx;
	}

	.imgfix {
		width: 100%;
		height: 258rpx;
		background-size: 100% 100%;
		padding: 36rpx 0 0 44rpx;

		.topFix {
			&_one {
				font-size: 36rpx;
				color: #fff;
			}

			&_two {
				font-size: 28rpx;
				color: #fff;
				margin-top: 10rpx;
			}
		}
	}

	.dizhi {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: -90rpx;
		padding: 30rpx 20rpx 30rpx 20rpx;

		&_flex {
			display: flex;
			align-items: center;
		}

		&_right {
			margin-left: 20rpx;

			.name,
			.phone {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-right: 20rpx;
			}

			.ellipsid {
				margin-top: 20rpx;
				width: 588rpx;
				color: #999999;
				font-size: 28rpx;
				word-wrap: break-word;
			}
		}

		.zuofei {
			margin-top: 30rpx;
			border-top: 2rpx solid #EEEEEE;
			padding-top: 20rpx;

			.title {
				width: 588rpx;
				margin-left: 20rpx;
				word-wrap: break-word;
				font-size: 32rpx;
				font-weight: bold;

				text {
					color: #FB231F;
					line-height: 44rpx;
				}
			}
		}
	}

	.coll-header {
		height: 196rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.content {
			margin-left: 20rpx;
			height: 96rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.head-txt {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.bottom {
				.num {
					color: #999;
					font-size: 28rpx;
				}
			}
		}

		.coll-right {
			display: flex;
			align-items: center;

			.space {
				color: #F76454;
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}
		}
	}

	.box {
		padding: 0 30rpx;
		overflow: hidden;
		transition: all 0.3;
		// border-bottom: 1px solid #EEEEEE;
	}

	.box-circle {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #18BBB4;
		margin-left: 4rpx;
		margin-right: 19rpx;
	}

	.box-cont {
		color: #333;
		font-size: 28rpx;

		.item {
			margin-bottom: 30rpx;
		}

		.flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: 333;

			text {
				color: #999999;
			}
		}
	}

	.gift_item {
		// padding: 28rpx 0;
		margin-bottom: 1px;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.gift_img {
			display: block;
			width: 140rpx;
			height: 140rpx;
		}

		.right {
			width: calc(100% - 140rpx);
			// height: 140rpx;
			padding: 0 50rpx 0 30rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.fixed {
				color: #181818;
				font-size: 32rpx;
			}

			.name {
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.num {
				color: #999;
				font-size: 28rpx;
			}
		}
	}

	.botFlex {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 20rpx 30rpx;

		.botzuofei {
			align-items: flex-start;

			.red {
				padding-top: 10rpx;
				width: 500rpx;
				font-size: 28rpx;
				line-height: 35rpx;
				color: #FB231F;
				// text-align: ri;
				display: flex;
				justify-content: flex-end;
			}
		}

		&_flex {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				line-height: 56rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.anniu {
				width: 72rpx;
				height: 42rpx;
				background: #FFF4F3;
				border-radius: 8rpx;
				text-align: center;
				line-height: 42rpx;
				font-size: 24rpx;
				color: #FB231F;
			}

			.right {
				font-size: 28rpx;
				font-weight: bold;
				color: #FB231F;
			}
		}
	}

	.submitPay {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 98rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		border-top: 2rpx solid #EEEEEE;

		&_left {
			font-size: 28rpx;

			.total {
				font-size: 28rpx;
				color: #999999;
				margin-right: 5rpx;
			}

			.money {
				font-size: 32rpx;
				font-weight: bold;
				color: #FB231F;
			}
		}

		&_right {
			display: flex;
			align-items: center;

			.anniu {
				width: 160rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				border-radius: 34rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
			}

			.gray {
				background: #F8F8F8;
				border: 2rpx solid #CCCCCC;
				color: 333;
			}

			.red {
				background: linear-gradient(141deg, #FF232C 0%, #FF571B 100%);
				color: #fff;
			}
		}
	}

	.belogInfo {
		width: calc(100% - 100rpx);
		margin: 0 auto;
		border-radius: 8rpx;
		padding: 50rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;

		.belong-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-bottom: 50rpx;
			background-position: center;
			background-size: 100%;
			background-repeat: no-repeat;
			background-color: #eeeeee;
		}

		.belong-nickname {
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}

	.order-detail1 {

		// height: 100vh;
		// overflow: auto;
		// background: $app-base-bg;
		// border-bottom: 100rpx solid transparent;
		.address {
			height: 120rpx;
			background: #ffffff;
			padding: 0 30rpx;
			box-sizing: border-box;
			@include flex();
			justify-content: space-between;

			.address-info {
				flex: 1;
				color: #181818;
				font-size: 28rpx;
				@include flex(column);
				align-items: flex-start;

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.phone {
					margin-left: 30rpx;
				}

				.detail {
					width: 654rpx;
					color: #666666;
				}
			}

			.choose {
				@include flex();
				justify-content: flex-start;

				.add {
					@include flex();
					background: $app-base-color;
					font-size: 40rpx;
					color: #ffffff;
					width: 60rpx;
					height: 60rpx;
				}

				.text {
					margin-left: 17rpx;
					color: 32rpx;
				}
			}

			.cuIcon-right {
				font-size: 38rpx;
			}
		}

		.border {
			@include flex();
			height: 6rpx;
			background: #ffffff;

			text {
				flex: 1;
				height: 100%;
				background: #3283fa;
				margin-left: 8rpx;

				&.red {
					background: #f56c6c;
				}
			}
		}

		.order_num {
			height: 90rpx;
			font-size: 28rpx;
			margin-top: 14rpx;
			font-weight: bold;
			background: #ffffff;
		}

		.list {
			.list-item {
				height: 200rpx;
				margin-top: 1rpx;
				background: #ffffff;
				box-sizing: border-box;
				padding: 30rpx;
				@include flex();

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 6rpx;
				}

				.info {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					font-weight: bold;
					margin-left: 30rpx;
					@include flex(column);
					align-items: flex-start;
					justify-content: space-between;
				}
			}
		}

		.app-item {
			font-size: 28rpx;
			font-weight: bold;

			&.top {
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}

			&.t {
				margin-top: 20rpx;
			}

			&.pay {
				justify-content: flex-end;

				.paynow {
					width: 156rpx;
					height: 54rpx;
					@include flex();
					color: #ffffff;
					margin-left: 28rpx;
					font-weight: normal;
					border-radius: 54rpx;
					background: $app-base-color;
				}
			}
		}

		.submit {
			@include flex();
			position: fixed;
			height: 100rpx;
			bottom: 0;
			font-size: 36rpx;
			width: 100vw;
			background: #ffffff;
			color: #ffffff;
			border-top: 1rpx solid #999999;

			.left {
				width: 190rpx;
				height: 100%;
				color: #666666;
				@include flex();
			}

			.center {
				flex: 1;
				@include flex();
				height: 100%;
				background: #f7bc54;
			}

			.right {
				height: 100%;
				flex: 1;
				@include flex();
				background: #f76454;
			}
		}
	}
</style>