dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterMyOrderDetails.vue

<template>
	<div class="userCenterMyOrderDetails">
		<div class="title">
			{{ $i18n.locale == 'zh' ? '订单详情' : 'Order Details' }}
		</div>
		<div class="backButton" @click="voteback">
			{{ $i18n.locale == 'zh' ? '返回' : 'Return' }}
		</div>
		<div class="orderDetails">
			<div class="header">
				<span>
					{{ $i18n.locale === 'zh' ? '订单编号' : 'OrderID' }}：{{
						orderDetail.orderNo
					}}
				</span>
				<span style="margin-left: 20px">
					{{ $i18n.locale === 'zh' ? '下单时间' : 'Order Time' }}：{{
						orderDetail.createDate | time('YYYY-MM-DD HH:mm:ss')
					}}
				</span>
				<span style="margin-left: 290px" v-if="userOrder.orderStatus == '0'"
					><el-button @click="alterAddress">{{
						$i18n.locale === 'zh' ? '修改地址' : 'Modify Address'
					}}</el-button>
					<!-- <el-button @click="cancelOrder">{{
						$i18n.locale === 'zh' ? '取消订单' : 'Cancel Order'
					}}</el-button> -->
				</span>
			</div>
			<div class="content">
				<div class="row">
					<div style="width: 640px">
						{{ $i18n.locale === 'zh' ? '兑换人' : 'Exchanger' }}：{{
							orderDetail.userName
						}}
					</div>
					<div style="width: 150px">
						{{ $i18n.locale === 'zh' ? '礼品类型' : 'Gift Type' }}
					</div>
					<div style="flex: 1">
						{{ determineCommodityType }}
					</div>
				</div>
				<div class="row">
					<div style="width: 640px">
						{{ $i18n.locale === 'zh' ? '联系方式' : 'Contact Details' }}：{{
							orderDetail.phone
						}}
					</div>
					<div style="width: 150px">
						{{ $i18n.locale === 'zh' ? '兑换要求' : 'Exchange requirements' }}
					</div>
					<div style="flex: 1">
						<span>
							{{ orderDetail.point
							}}{{ $i18n.locale === 'zh' ? '积分' : 'Integral' }}
						</span>
						<span v-if="orderDetail.price !== 0"
							>+{{ orderDetail.price
							}}{{ $i18n.locale === 'zh' ? '元' : 'RMB' }}</span
						>
					</div>
				</div>
				<div class="row">
					<div style="width: 640px">
						{{ $i18n.locale === 'zh' ? '收货地址' : 'Receive Address' }}：{{
							$i18n.locale === 'zh'
								? orderDetail.addressConcat
								: orderDetail.address
						}}
						<!-- orderDetail.addressConcat -->
					</div>
					<div style="width: 150px">
						{{ $i18n.locale === 'zh' ? '兑换数量' : 'Exchange Quantity' }}
					</div>
					<div style="flex: 1">
						{{ orderDetail.exchangeQuantity }}
					</div>
				</div>
				<hr style="border-top: 1px dashed #a2a9b6" />
				<div class="row">
					<div style="width: 640px"></div>
					<div style="width: 150px">
						{{ $i18n.locale === 'zh' ? '消耗积分' : 'Consume Points' }}
					</div>
					<div style="flex: 1">
						<span style="font-size: 20px; color: #ff0000">
							{{ orderDetail.point }}
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="orderMessage">
			<div class="header">
				<span>
					{{ $i18n.locale === 'zh' ? '订单状态：' : 'Order Status：' }}
				</span>
				<span style="margin-left: 0px">
					<span v-if="userOrder.orderStatus == '0'">
						{{ $i18n.locale == 'zh' ? '待发货' : 'Wait Deliver' }}
					</span>
					<span v-if="userOrder.orderStatus == '1'">
						{{ $i18n.locale == 'zh' ? '待收货' : 'To Be Received' }}
					</span>
					<span v-if="userOrder.orderStatus == '2'">
						{{ $i18n.locale == 'zh' ? '待评论' : 'To Be Commented' }}
					</span>
					<span v-if="userOrder.orderStatus == '3'">
						{{ $i18n.locale == 'zh' ? '已取消' : 'Cancelled' }}
					</span>
					<span v-if="userOrder.orderStatus == '4'">
						{{ $i18n.locale == 'zh' ? '已完成' : 'Completed' }}
					</span>
					<span v-if="userOrder.orderStatus == '5'">
						{{ $i18n.locale == 'zh' ? '待支付' : 'To be Paid' }}
					</span>
					<span v-if="userOrder.orderStatus == '6'">
						{{ $i18n.locale == 'zh' ? '已关闭' : 'Colsed' }}
					</span>
				</span>
			</div>
			<div class="content">
				<el-table
					:data="[orderDetail]"
					style="width: 100%"
					:header-cell-style="{ backgroundColor: '#f8f8f8' }"
				>
					<el-table-column
						:prop="$i18n.locale === 'zh' ? 'commodityName' : 'commodityNameEn'"
						align="center"
						:label="$i18n.locale === 'zh' ? '礼品名称' : 'Gift Name'"
					>
					</el-table-column>
					<el-table-column
						prop="point"
						align="center"
						:label="$i18n.locale === 'zh' ? '积分' : 'Integral'"
					>
					</el-table-column>
					<el-table-column
						prop="exchangeQuantity"
						align="center"
						:label="$i18n.locale === 'zh' ? '数量' : 'Number'"
					>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$i18n.locale === 'zh' ? '创建时间' : 'Create Time'"
					>
						<template slot-scope="scope">
							<div>
								{{ orderDetail.createDate | time('YYYY-MM-DD HH:mm:ss') }}
							</div>
						</template>
					</el-table-column>
					<!-- <el-table-column
            prop="point"
            align="center"
            :label="$i18n.locale === 'zh' ? '实付积分' : 'Pay Points'"
            width="184"
          >
          </el-table-column> -->
				</el-table>
			</div>
		</div>
		<!-- 修改地址dialog -->
		<el-dialog
			:title="$i18n.locale === 'zh' ? '修改地址' : 'Modify Address'"
			:visible.sync="addressDialogVisible"
			width="30%"
			:before-close="dialogBeforeClose"
		>
			<div>
				<!-- :rules="this.isZh ? rules : rulesEn" -->

				<el-form ref="addressForm" :model="addressForm" label-width="120px">
					<!-- <el-form-item
            :label="$i18n.locale == 'zh' ? '收货人' : 'Consignee'"
            prop="consignee"
          >
            <el-input
              maxlength="30"
              v-model="addressForm.consignee"
              :placeholder="
                $i18n.locale == 'zh'
                  ? '长度不超过30个字符'
                  : '30 characters or less in length'
              "
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$i18n.locale == 'zh' ? '电话号码' : 'Mobile'"
            prop="mobile"
          >
            <el-input
              v-model="addressForm.mobile"
              :placeholder="
                $i18n.locale == 'zh'
                  ? '电话号码、手机号码必须填一项'
                  : 'Phone number, mobile phone number must fill in one item'
              "
            ></el-input>
          </el-form-item> -->
					<el-form-item
						v-if="isZh"
						:label="$i18n.locale == 'zh' ? '地址信息' : 'Division'"
						required
						prop="division"
					>
						<el-cascader
							v-model="addressForm.division"
							:options="sysAreaList"
							:props="{ value: 'name', label: 'name', children: 'child' }"
							placeholder="请选择省/市/区/街道"
						>
						</el-cascader>
					</el-form-item>
					<el-form-item
						:label="$i18n.locale == 'zh' ? '详细地址' : 'Detail'"
						prop="address"
					>
						<el-input
							v-model="addressForm.address"
							:placeholder="
								$i18n.locale == 'zh' ? '请输入详细地址' : 'Please enter address'
							"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="saveAddress('addressForm')">{{
							$i18n.locale == 'zh' ? '保存' : 'Save'
						}}</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- <div slot="footer">
        <el-button @click="addressDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div> -->
		</el-dialog>
	</div>
</template>

<script>
import moment from 'moment'
import {
	orderDetails,
	cancelGoodsOrders,
	getSysAreaList,
	addUmsUserCommodityAddresss,
	modifyAddress,
} from '@/api/user'
import { getToken } from '@/api/token'
export default {
	name: 'userCenterMyOrderDetails',
	data() {
		return {
			addressDialogVisible: null,
			userOrder: JSON.parse(window.localStorage.getItem('orderDetail')),
			// userOrder: this.$route.query.key,
			orderDetail: {},
			isZh: true,
			addressForm: {
				consignee: '',
				mobile: '',
				division: [],
				address: '',
				postal_code: '',
				status: '0',
			},
			sysAreaList: [],
		}
	},
	filters: {
		time(date, type) {
			return moment(date).format(type)
		},
	},
	watch: {
		'$i18n.locale': {
			handler: function () {
				if (this.$i18n.locale == 'zh') {
					this.isZh = true
				} else {
					this.isZh = false
				}
			},
			deep: true,
		},
	},
	mounted() {
		this.language = window.localStorage.getItem('locale')
		if (this.language == 'zh') {
			this.isZh = true
		} else {
			this.isZh = false
		}
		this.init()
		this.getSysAreaList()
		this.toGetOrderDetails()
	},
	methods: {
		voteback() {
			this.$router.go(-1)
		},
		init() {
			this.user = JSON.parse(window.localStorage.getItem('user'))
			if (this.user.umsUser.userPic == undefined) {
				this.user.umsUser.userPic = ''
			}
			this.toGetOrderDetails()
		},
		//	获取订单详情
		toGetOrderDetails() {
			// let orderId = window.localStorage.getItem("orderID");
			let orderId = this.userOrder.id
			orderDetails(orderId)
				.then((res) => {
					console.log(res.data)
					this.orderDetail = res.data.order
				})
				.catch((error) => {})
		},
		// 取消订单
		cancelOrder() {
			getToken().then((res) => {
				cancelGoodsOrders(this.userOrder.id, res.data)
					.then((res) => {
						if (res.status === '200')
							this.$message({
								message:
									this.$i18n.locale == 'zh'
										? '取消订单成功'
										: 'Order cancelled successfully',
								type: 'success',
							})
						this.$router.push({
							path: '/userCenterMyOrder',
						})
					})
					.catch((error) => {
						console.log(error)
						this.$message({
							message:
								this.$i18n.locale == 'zh'
									? '取消订单失败'
									: 'Order cancelled error',
							type: 'error',
						})
					})
			})
		},
		//  获取省市区
		getSysAreaList() {
			function clearLeaf(data) {
				data.forEach((item, index) => {
					if (item.child.length != 0) {
						clearLeaf(item.child)
					} else {
						item.child = undefined
					}
				})
			}

			getSysAreaList().then((res) => {
				if (res) {
					let data = res.data
					clearLeaf(data)
					this.sysAreaList = data
				}
			})
		},
		alterAddress() {
			this.addressForm = {
				division: [
					this.orderDetail.province,
					this.orderDetail.city,
					this.orderDetail.area,
				],
				address: this.orderDetail.address,
			}
			this.addressDialogVisible = true
		},
		saveAddress() {
			let params = {
				// id: this.addressForm.id,
				// orderId:this.orderDetail.orderNo,
				// userId: this.user.userId,
				consignee: this.orderDetail.consignee,
				mobile: this.orderDetail.phone,
				province: this.addressForm.division[0],
				city: this.addressForm.division[1],
				area: this.addressForm.division[2],
				address: this.addressForm.address,
			}
			let orderId = this.userOrder.id
			getToken().then((res) => {
				modifyAddress(JSON.stringify(params), orderId, res.data).then((res) => {
					if (res.status == '200') {
						this.addressDialogVisible = false
						this.$message({
							message:
								this.$i18n.locale == 'zh'
									? '修改地址成功'
									: 'Address Modified Successfully',
							type: 'success',
						})
						this.init()
					} else {
						this.$message({
							message:
								this.$i18n.locale == 'zh'
									? '修改地址失败'
									: 'Address Modified Failed',
							type: 'error',
						})
					}
				})
			})
		},
		dialogBeforeClose() {
			this.addressDialogVisible = false
		},
	},
	computed: {
		determineCommodityType() {
			if (this.isZh) {
				if (this.orderDetail.commodityType == '1') {
					return '实体礼品'
				} else {
					return '虚拟礼品'
				}
			} else {
				if (this.orderDetail.commodityType == '1') {
					return 'Physical Gifts'
				} else {
					return 'Virtual Gifts'
				}
			}
		},
	},
}
</script>

<style scoped lang="less">
::v-deep .el-dialog {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: calc(100% - 30px);
	max-width: calc(100% - 30px);
}
.userCenterMyOrderDetails {
	width: 100%;
	background: #fff;
	min-height: 800px;

	.title {
		height: 60px;
		line-height: 60px;
		padding-top: 30px;
		margin-left: 30px;
		margin-right: 30px;
		border-bottom: 1px solid rgba(228, 228, 228, 1);
	}

	.orderDetails {
		.header {
			width: 100%;
			height: 60px;
			padding-left: 30px;
			box-sizing: border-box;
			background-color: #e4e4e4;

			span {
				font-size: 14px;
				line-height: 60px;
			}
		}

		.content {
			padding: 20px;

			.row {
				display: flex;
				font-size: 14px;
				line-height: 30px;
			}
		}
	}
	.orderMessage {
		.header {
			width: 100%;
			height: 60px;
			padding-left: 30px;
			box-sizing: border-box;
			background-color: #e4e4e4;

			span {
				font-size: 14px;
				line-height: 60px;
			}
		}
	}
	.backButton {
		width: 60px;
		height: 30px;
		background-color: #b4d5ff;
		position: absolute;
		top: 40px;
		right: 1%;
		border-radius: 8px;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
	}
}
</style>