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

<template>
	<div class="userCenterMyOrderCom">
		<div class="title">
			{{ $t('common.myOrder') }}
			<span style="margin: 0 10px">{{
				$i18n.locale == 'zh' ? '共计' : 'All'
			}}</span>
			<span>{{ this.page.total }}</span>
			<span
				style="color: red; margin-left: 20px; font-weight: 700; font-size: 14px"
				>{{
					$i18n.locale == 'zh'
						? '下单成功的商品，超过5分钟未支付，系统默认关闭此次交易'
						: 'Please complete the payment within 5 minutes for the goods successfully ordered'
				}}</span
			>
		</div>
		<div class="table">
			<div class="search">
				<span
					:class="{ active: params.search1 === '全部' }"
					@click="activeChange('全部')"
					>{{ $i18n.locale == 'zh' ? '全部' : 'All' }}</span
				>
				<span
					:class="{ active: params.search1 === '待付款' }"
					@click="activeChange('待付款')"
					>{{ $i18n.locale == 'zh' ? '待付款' : 'To be Paid' }}</span
				>
				<span
					:class="{ active: params.search1 === '待发货' }"
					@click="activeChange('待发货')"
					>{{ $i18n.locale == 'zh' ? '待发货' : 'Wait Deliver' }}</span
				>
				<span
					:class="{ active: params.search1 === '待收货' }"
					@click="activeChange('待收货')"
					>{{ $i18n.locale == 'zh' ? '待收货' : 'To Be Received' }}</span
				>
				<span
					:class="{ active: params.search1 === '待评论' }"
					@click="activeChange('待评论')"
					>{{ $i18n.locale == 'zh' ? '待评论' : 'To Be Commented' }}</span
				>
				<span
					:class="{ active: params.search1 === '已完成' }"
					@click="activeChange('已完成')"
					>{{ $i18n.locale == 'zh' ? '已完成' : 'Completed' }}</span
				>
				<span
					:class="{ active: params.search1 === '已取消' }"
					@click="activeChange('已取消')"
					>{{ $i18n.locale == 'zh' ? '已取消' : 'Cancelled' }}</span
				>
				<span
					:class="{ active: params.search1 === '已关闭' }"
					@click="activeChange('已关闭')"
					>{{ $i18n.locale == 'zh' ? '已关闭' : 'Colsed' }}</span
				>
			</div>
			<div v-if="showContent">
				<el-table
					stripe
					:data="
						orderList.filter(
							(data) =>
								!search ||
								data.commodityName.toLowerCase().includes(search.toLowerCase())
						)
					"
					v-loading="loading"
					style="width: 100%"
					height="488"
					:header-cell-style="{ backgroundColor: '#f8f8f8' }"
				>
					<el-table-column
						prop="orderNo"
						align="center"
						:label="$i18n.locale === 'zh' ? '订单编号' : 'OrderID'"
						width="280"
					>
					</el-table-column>
					<el-table-column
						:prop="$i18n.locale === 'zh' ? 'commodityName' : 'commodityNameEn'"
						align="center"
						:label="$i18n.locale === 'zh' ? '商品名称' : 'Trade Name'"
						width="120"
					>
					</el-table-column>
					<el-table-column
						prop="exchangeQuantity"
						align="center"
						:label="$i18n.locale === 'zh' ? '兑换数量' : 'Quantity'"
						width="100"
					>
					</el-table-column>
					<el-table-column
						prop="point"
						align="center"
						:label="
							$i18n.locale === 'zh' ? '兑换要求' : 'Exchange requirements'
						"
						width="100"
					>
						<template slot-scope="scope">
							<span>
								{{ scope.row.point
								}}{{ $i18n.locale === 'zh' ? '积分' : 'Integral' }}
							</span>
							<span v-if="scope.row.price !== 0"
								>+{{ scope.row.price
								}}{{ $i18n.locale === 'zh' ? '元' : 'RMB' }}</span
							>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$i18n.locale === 'zh' ? '创建时间' : 'Creation Time'"
						width="200"
					>
						<template slot-scope="scope">
							<div>
								{{ scope.row.createDate | time('YYYY-MM-DD HH:mm:ss') }}
							</div>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$i18n.locale === 'zh' ? '操作' : 'Operate'"
						width="180"
					>
						<template slot="header" slot-scope="scope">
							<el-input
								v-model="search"
								size="mini"
								:placeholder="
									$i18n.locale === 'zh' ? '请输入商品名称' : 'Enter The Name'
								"
								clearable
							/>
						</template>
						<template slot-scope="scope">
							<el-button
								v-if="scope.row.orderStatus === '0'"
								type="text"
								size="mini"
								style="display: block"
								@click="getDellor(scope.row)"
							>
								{{ $i18n.locale === 'zh' ? '退款' : 'Refund' }}
							</el-button>
							<el-button
								v-if="scope.row.orderStatus === '5'"
								type="text"
								size="mini"
								style="display: block"
								@click="cancelOrderStatus(scope.row)"
							>
								{{ $i18n.locale === 'zh' ? '取消订单' : 'Order Cancel' }}
							</el-button>
							<el-button
								v-if="scope.row.orderStatus === '5'"
								type="text"
								size="mini"
								style="display: block"
							>
								<span
									v-if="scope.row.price == 0"
									@click="payIntetral(scope.row)"
									>{{
										$i18n.locale === 'zh' ? '积分支付' : 'Point payment'
									}}</span
								>
								<span v-else @click="payMoney(scope.row)">{{
									$i18n.locale === 'zh' ? '去付款' : 'Pay'
								}}</span>
							</el-button>
							<el-button
								type="text"
								size="mini"
								style="display: block"
								@click="edit('订单详情', scope.row)"
							>
								{{ $i18n.locale === 'zh' ? '订单详情' : 'Order Detail' }}
							</el-button>
							<el-button
								v-if="scope.row.orderStatus === '2'"
								type="text"
								size="mini"
								style="display: block"
								@click="edit('评价', scope.row)"
							>
								{{ $i18n.locale === 'zh' ? '评价' : 'Evaluate' }}
							</el-button>
							<el-button
								v-if="
									['2', '4'].includes(scope.row.orderStatus) &&
									scope.row.adaptType === '1'
								"
								type="text"
								size="mini"
								style="display: block"
								@click="download(scope.row)"
							>
								{{ $i18n.locale === 'zh' ? '下载' : ' Download' }}
							</el-button>
							<el-button
								v-if="scope.row.orderStatus === '1'"
								type="text"
								size="mini"
								style="display: block"
								@click="edit('确认收货', scope.row)"
							>
								{{ $i18n.locale === 'zh' ? '确认收货' : 'Confirm Receipt' }}
							</el-button>
							<el-button
								v-if="
									scope.row.orderStatus === '3' || scope.row.orderStatus === '4'
								"
								type="text"
								size="mini"
								style="display: block"
								@click="deleteOrders(scope.row)"
							>
								{{ $i18n.locale === 'zh' ? '删除' : ' Delete' }}
							</el-button>
							<el-button
								v-if="scope.row.orderStatus === '6'"
								type="text"
								size="mini"
								style="display: block"
								@click="deleteOrders(scope.row)"
							>
								{{ $i18n.locale === 'zh' ? '删除' : ' Delete' }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					background
					@size-change="
						(val) => {
							page.pageSize = val
						}
					"
					@current-change="
						(val) => {
							page.pageNo = val
						}
					"
					layout="prev, pager, next"
					:total="page.total"
					:current-page="page.pageNo"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="page.pageSize"
					style="text-align: center; margin-top: 20px"
				>
				</el-pagination>
			</div>
			<div v-else style="margin-left: -50px; margin-top: 100px">
				<el-empty
					:description="$i18n.locale === 'zh' ? '暂无数据' : 'No Data'"
				></el-empty>
			</div>
		</div>
		<!-- 消息提示 -->
		<el-dialog
			:title="
				$i18n.locale === 'zh' ? '请确认操作' : 'Please confirm the operation'
			"
			:visible.sync="dialogVisibleStatusUser"
			width="20%"
		>
			<span>{{ UserTitleText }}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleStatusUser = false">{{
					$i18n.locale === 'zh' ? '取消' : 'Cancel'
				}}</el-button>
				<el-button type="primary" @click="getUserText">{{
					$i18n.locale === 'zh' ? '确定' : 'Sure'
				}}</el-button>
			</span>
		</el-dialog>
		<!-- 选择付款方式 -->
		<el-dialog
			:title="
				$i18n.locale === 'zh'
					? '请选择付款方式'
					: 'Please select a payment method'
			"
			:visible.sync="dialogVisibleStatus"
			width="35%"
		>
			<div style="width: 100%; display: flex; justify-content: space-evenly">
				<span
					style="
						display: inline-block;
						width: 181px;
						height: 181px;
						overflow: hidden;
						line-height: 181px;
						cursor: pointer;
					"
					@click="getPayDellor('1')"
					><img src="@/assets/userpay3.png" alt="" style="width: 100%"
				/></span>
				<!-- <span
					style="
						display: inline-block;
						width: 181px;
						height: 181px;
						line-height: 181px;
						cursor: pointer;
					"
					@click="getPayDellor('2')"
					><img src="@/assets/userpay.png" alt="" style="width: 100%"
				/></span> -->
				<!-- <span
					style="
						display: inline-block;
						width: 181px;
						height: 181px;
						line-height: 181px;
						cursor: pointer;
					"
					@click="getPayDellor('3')"
					><img
						src="@/assets/userpay2.png"
						alt=""
						style="width: 100%; line-height: 181px"
				/></span> -->
			</div>
		</el-dialog>
		<!-- 订单确认 -->
		<el-dialog
			:title="$i18n.locale === 'zh' ? '订单确认' : 'Order Confirmation'"
			:visible.sync="dialogVisible"
			width="20%"
			:before-close="dialogBeforeClose"
		>
			<div>
				{{ $i18n.locale === 'zh' ? '是否确认收货' : 'Confirm Receipt' }}
			</div>
			<div slot="footer">
				<el-button @click="dialogVisible = false">{{
					$i18n.locale === 'zh' ? '取 消' : 'Cancel'
				}}</el-button>
				<el-button type="primary" @click="orderconfirm">{{
					$i18n.locale === 'zh' ? '确 定' : 'Determine'
				}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import moment from 'moment'
import {
	cancelGoodsOrders,
	toObtainListOrder,
	orderConfirmation,
	deleteOrders,
	getMoney,
	getMoneyStatus,
} from '@/api/user'
import { gatResearchResultView } from '@/api/research/baseResearchResultView'
import { getToken } from '@/api/token'
export default {
	name: 'userCenterMyOrderCom',
	data() {
		return {
			valueStatus: {},
			booleanFlag: {},
			user: {
				umsUser: {},
			},
			loading: true,
			params: {
				search1: '全部',
				search2: '',
			},
			page: {
				pageNo: 1,
				pageSize: 10,
				total: 0,
			},
			orderList: [],
			search: '',
			dialogVisible: false,
			dialogVisibleStatus: false,
			dialogVisibleStatusUser: false,
			userTimeNum: 0,
			userInfoDtua: '',
			userTypeStua: '',
			UserTitleText: '',
			orderconfirmId: '',
			evaluationId: {},
			showContent: false,
		}
	},
	filters: {
		twoDecimal(value) {
			return parseFloat(String(value)).toFixed(2)
		},
		time(date, type) {
			return moment(date).format(type)
		},
	},
	watch: {
		page: {
			handler: function () {
				this.loading = true
				this.getUserOrderPage()
				this.toObtainListOrder()
			},
			deep: true,
		},
		params: {
			handler: function () {
				this.loading = true
				this.toObtainListOrder()
			},
			deep: true,
		},
	},
	mounted() {
		this.init()
	},
	methods: {
		deleteOrders(val) {
			this.dialogVisibleStatusUser = true
			this.userInfoDtua = val
			this.userTypeStua = '3'
			if (this.$i18n.locale === 'zh') {
				this.UserTitleText = '确定删除次订单吗?'
			} else {
				this.UserTitleText = 'Are you sure to delete this order?'
			}
		},
		//删除订单
		deleteUserOrder() {
			let val = this.userInfoDtua
			getToken().then((res) => {
				deleteOrders(val.id, res.data)
					.then((res) => {
						if (res.status === '200')
							this.$message({
								message:
									this.$i18n.locale == 'zh'
										? '删除订单成功'
										: 'Order deleted successfully',
								type: 'success',
							})
						console.log(res)
						this.init()
					})
					.catch((error) => {
						console.log(error)
						this.$message({
							message:
								this.$i18n.locale == 'zh'
									? '删除订单失败'
									: 'Order deleted error',
							type: 'error',
						})
					})
			})
		},
		download(val) {
			let data = {
				reserveFour: val.commodityId,
				language: this.$i18n.locale.toUpperCase(),
			}
			gatResearchResultView(data).then((res) => {
				let url = ''
				let name = ''
				if (res.data.baseResearchResultView) {
					url = res.data.baseResearchResultView.researchResultFile
					name = res.data.baseResearchResultView.name
				}
				const link = document.createElement('a')
				link.href = 'api/file/pub/' + url
				link.download = name //下载的文件名
				link.click()
			})
		},
		init() {
			this.user = JSON.parse(window.localStorage.getItem('user'))
			if (this.user.umsUser.userPic == undefined) {
				this.user.umsUser.userPic = ''
			}
			this.getUserOrderPage()
			this.toObtainListOrder()
		},
		getUserOrderPage() {
			setTimeout(() => {
				this.loading = false
			}, 500)
		},
		activeChange(value) {
			this.params.search1 = value
			this.page.pageNo = 1
			this.getUserOrderPage()
		},
		topUp() {
			alert('topUp()')
		},
		edit(type, data) {
			console.log(data)
			switch (type) {
				case '付款':
					break
				case '评价':
					console.log('评价')
					this.$router.push({
						path: '/userCenterMyOrderEvaluate',
						query: { key: data },
					})
					// this.dialogVisible = true;
					this.orderconfirmId = data.id
					this.evaluation = data
					break
				case '确认收货':
					this.dialogVisible = true
					this.orderconfirmId = data.id
					this.evaluation = data
					break
				case '取消订单':
					break
				case '删除订单':
					break
				case '订单详情':
					window.localStorage.setItem('orderDetail', JSON.stringify(data))
					this.$router.push({
						path: '/userCenterMyOrderDetails',
						// query: { key: data },
					})
					break
			}
		},

		// 获取订单列表
		toObtainListOrder() {
			let param = {
				pageSize: this.page.pageSize,
				pageNo: this.page.pageNo,
				userId: this.user.userId,
			}
			if (this.params.search1 == '待发货') {
				param.orderStatus = 0
			}
			if (this.params.search1 == '待收货') {
				param.orderStatus = 1
			}
			if (this.params.search1 == '待评论') {
				param.orderStatus = 2
			}
			if (this.params.search1 == '已取消') {
				param.orderStatus = 3
			}
			if (this.params.search1 == '已完成') {
				param.orderStatus = 4
			}
			if (this.params.search1 == '待付款') {
				param.orderStatus = 5
			}
			if (this.params.search1 == '已关闭') {
				param.orderStatus = 6
			}
			toObtainListOrder(param)
				.then((res) => {
					var data = res.data
					if (JSON.stringify(data) !== '{}') {
						this.showContent = true
						this.orderList = res.data.umsPointCommodityOrders
						this.page.total = Number(res.data.page.totalCount)
					} else {
						this.showContent = false
						this.page.total = 0
					}
				})
				.then(() => {
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 订单确认
		orderconfirm() {
			this.dialogVisible = false
			getToken().then((res) => {
				orderConfirmation(this.orderconfirmId, res.data).then((res) => {
					if (res.status == '200') {
						this.$message({
							message:
								this.$i18n.locale == 'zh'
									? '确认收货成功'
									: 'Confirm Receipt Succeeded',
							type: 'success',
						})
						this.init()
					}
				})
			})
		},
		//支付状态调用
		getUserInStau() {
			getMoneyStatus(this.valueStatus.orderNo)
				.then((res) => {
					if (res.data.payStatus == '1') {
						this.$router.go(0)
					} else {
						if (this.userTimeNum < 36) {
							setTimeout(() => {
								this.getUserInStau()
								this.userTimeNum += 1
								// console.log(this.userTimeNum)
							}, 5000)
						} else {
							this.$router.go(0)
						}
					}
				})
				.catch((error) => {
					console.log(error.msg)
				})
		},
		//支付调用
		getPayDellor(num) {
			this.getUserInStau()
			if (this.valueStatus.price == 0) {
			} else {
				if (num == 1) {
					let orderId = this.valueStatus.orderNo
					let payType = 'alipay'

					getToken().then((res) => {
						getMoney(orderId, payType, res.data)
							.then((res) => {
								if (res.status == 200) {
									let paramsUser = res.data.htmlPath
									window.open(paramsUser, '_blank')
								} else {
									this.$message.error(res.msg)
								}
							})
							.catch((error) => {
								this.$message.error(error.msg)
							})
					})
				} else if (num == 2) {
					let orderId = this.valueStatus.orderNo
					let payType = 'wechatpay'
					getToken().then((res) => {
						getMoney(orderId, payType, res.data)
							.then((res) => {
								if (res.status == 200) {
									let paramsUser = res.data.htmlPath
									window.open(paramsUser, '_blank')
								} else {
									this.$message.error(res.msg)
								}
							})
							.catch((error) => {
								this.$message.error(error.msg)
							})
					})
				} else if (num == 3) {
					let orderId = this.valueStatus.orderNo
					let payType = 'unionpay'
					getToken().then((res) => {
						getMoney(orderId, payType, res.data)
							.then((res) => {
								if (res.status == 200) {
									let paramsUser = res.data.htmlPath
									window.open(paramsUser, '_blank')
								} else {
									this.$message.error(res.msg)
								}
							})
							.catch((error) => {
								this.$message.error(error.msg)
							})
					})
				} else {
					let orderId = this.valueStatus.orderNo
					let payType = 'otherpay'
					getToken().then((res) => {
						getMoney(orderId, payType, res.data)
							.then((res) => {
								if (res.status == 200) {
									let paramsUser = res.data.htmlPath
									window.open(paramsUser, '_blank')
								} else {
									this.$message.error(res.msg)
								}
							})
							.catch((error) => {
								this.$message.error(error.msg)
							})
					})
				}
			}
			this.dialogVisibleStatus = false
		},
		//积分支付
		payIntetral(value) {
			this.dialogVisibleStatusUser = true
			this.valueStatus = value
			this.userTypeStua = '4'
			if (this.$i18n.locale === 'zh') {
				this.UserTitleText = '确定支付吗？'
			} else {
				this.UserTitleText = 'Are you sure to pay?'
			}
		},
		getIntetralUser() {
			let orderId = this.valueStatus.orderNo
			let payType = 'pointpay'
			getToken().then((res) => {
				getMoney(orderId, payType, res.data)
					.then((res) => {
						if (res.status == '200') {
							if (this.$i18n.locale === 'zh') {
								this.$message.success('支付成功')
							} else {
								this.$message.success('Payment succeeded')
							}
							this.init()
						}
					})
					.catch((error) => {
						this.$message.error(error.msg)
					})
			})
		},
		//付款
		payMoney(value) {
			this.dialogVisibleStatus = true
			this.valueStatus = value
		},
		//退款
		getDellor(value) {
			this.dialogVisibleStatusUser = true
			if (this.$i18n.locale === 'zh') {
				this.UserTitleText = '确定发起退款吗？'
			} else {
				this.UserTitleText = 'Are you sure to initiate refund?'
			}
			this.userTypeStua = '1'
			this.userInfoDtua = value
		},
		//退款操作
		getMoreMoney() {
			console.log('退不了，爱要不要')
		},
		//提示确定按钮
		getUserText() {
			this.dialogVisibleStatusUser = false
			if (this.userTypeStua == '2') {
				this.cancelOrder()
			}
			if (this.userTypeStua == '1') {
				this.getMoreMoney()
			}
			if (this.userTypeStua == '3') {
				this.deleteUserOrder()
			}
			if (this.userTypeStua == '4') {
				this.getIntetralUser()
			}
		},
		// 取消订单
		cancelOrderStatus(data) {
			this.dialogVisibleStatusUser = true
			if (this.$i18n.locale === 'zh') {
				this.UserTitleText = '确认取消订单?'
			} else {
				this.UserTitleText = 'Confirm Cancel Order？'
			}
			this.userTypeStua = '2'
			this.userInfoDtua = data
		},
		//取消订单操作
		cancelOrder() {
			let data = this.userInfoDtua
			getToken().then((res) => {
				cancelGoodsOrders(data.id, res.data)
					.then((res) => {
						if (res.status === '200')
							this.$message({
								message:
									this.$i18n.locale == 'zh'
										? '取消订单成功'
										: 'Order cancelled successfully',
								type: 'success',
							})
						console.log(res)
						this.init()
					})
					.catch((error) => {
						console.log(error)
						this.$message({
							message:
								this.$i18n.locale == 'zh'
									? '取消订单失败'
									: 'Order cancelled error',
							type: 'error',
						})
					})
			})
		},

		dialogBeforeClose() {
			this.dialogVisible = false
		},
	},
}
</script>

<style scoped lang="less">
/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);
}
.userCenterMyOrderCom {
	.title {
		height: 60px;
		line-height: 60px;
		padding-top: 30px;
		margin-left: 30px;
		margin-right: 30px;
		border-bottom: 1px solid rgba(228, 228, 228, 1);
	}

	.search {
		font-size: 14px;
		font-weight: 600;
		height: 70px;
		line-height: 70px;

		span {
			cursor: pointer;
			margin: 0 20px;

			&.active {
				color: #60aae3;
			}
		}
	}

	.table {
		padding-bottom: 30px;

		/deep/ .el-button {
			margin: 0 auto;
		}

		/deep/ .el-button + .el-button {
			margin: 5px auto 0;
		}
	}
}
</style>