anmo-master/package/pages/zysc/member/orderdetail.vue

<template>
	<view>
		<view v-if="list.sendWay != 2"
			style="height: 140upx;background: #FFFFFF;margin-top: 30upx; padding: 10upx;border-radius: 15upx;width: 95%;margin-left: 20upx;">
			<view style="display: flex;margin: 15upx 0 0 20upx;">
				<image src="/static/image/address.png"
					style="width: 70upx; height: 70upx;margin-top: 10upx;"></image>
				<view style="margin-left: 20upx;width: 80%;">
					<view style="display: flex;align-items: center;">
						<view style="font-size: 32upx;color: #333333;">{{list.consignee}}</view>
						<view style="font-size: 28upx;color: #999999;margin-left: 10upx;">{{list.mobile}}</view>
					</view>
					<view
						style="margin-top: 10upx;font-size: 26upx;color: #333333;width: 90%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
						{{list.provinces}}{{list.detail}}
					</view>
				</view>
			</view>
		</view>

		<view
			style="height: 320upx;background: #FFFFFF;margin-top: 30upx; padding: 10upx;border-radius: 15upx;width: 95%;margin-left: 20upx;">
			<view style="display: flex;">
				<view style="padding: 20upx 0 0upx 30upx;width: 75%;text-align: left;color: #000;font-size: 28upx;">
					{{list.createAt}}
				</view>
				<view style="padding: 20upx 0 0upx 0upx;width: 20%;text-align: right;color: #05C25C;font-size: 28upx;">
					{{list.status}}
				</view>
			</view>
			<view style="display: flex;padding: 20upx 10upx;" @tap='goOrderDetail(list.goodsId)'>
				<image :src="list.img" style="width: 30%;height: 190upx;margin-left: 20upx;"></image>
				<view style="margin-left: 20upx;width: 68%;">
					<view
						style="font-size: 30upx;color: #333333;width: 90%;height: 80upx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
						{{list.title}}
					</view>
					<view style="display: flex;height: 50upx;margin-top: 70upx;">
						<view style="display: flex;width: 50%;">
							<view style="font-size: 30upx;color: #333333;">¥ {{list.price}}</view>
							<view style="font-size: 24upx;color: #666666;padding-top: 7upx;padding-left: 10upx;">
								×{{list.number}}</view>
						</view>
						<view
							style="font-size: 26upx;color: #333333;padding: 0 0 10upx 20upx;width: 40%;text-align: right;">
							总金额: ¥{{list.payMoney}}</view>
					</view>
				</view>
			</view>
		</view>
		<view
			style="height: max-content;background: #FFFFFF;margin-top: 30upx; padding: 10upx;border-radius: 15upx;width: 95%;margin-left: 20upx;margin-bottom: 150upx;">
			<view style="display: flex;padding: 20upx;align-items: center;"
				v-if="list.postagePrice != null && list.sendWay != 2">
				<view style="font-size: 26upx;color: #333333;width: 25%;">运费</view>
				<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">
					{{list.postagePrice == 0 ? '包邮' : list.postagePrice + '元'}}
				</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;" @tap="copy(list.orderNum)">
				<view style="font-size: 26upx;color: #333333;width: 25%;">订单编号</view>
				<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">{{list.orderNum}}
					<u-icon name="file-text"></u-icon>
				</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;">
				<view style="font-size: 26upx;color: #333333;width: 25%;">配送方式</view>
				<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">
					{{list.sendWay == 2 ? '自取' : '快递'}}
				</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;">
				<view style="font-size: 26upx;color: #333333;width: 25%;">下单时间</view>
				<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">{{list.createAt}}</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;" v-if="state != 5 && list.descrition">
				<view style="font-size: 26upx;color: #333333;width: 25%;">订单备注</view>
				<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;">{{list.descrition}}</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;" v-if="list.sendWay == 2 && adminShopName">
				<view style="font-size: 26upx;color: #333333;width: 25%;">商家名称</view>
				<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;">{{adminShopName}}</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;" @tap="bindGps"
				v-if="list.sendWay == 2 && adminShopAddress">
				<view style="font-size: 26upx;color: #333333;width: 25%;">商家地址</view>
				<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;align-items: center;">
					{{adminShopAddress}}
					<u-icon name="map"></u-icon>
				</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;" @click="bindphone(adminShopPhone)"
				v-if="list.sendWay == 2 && adminShopPhone">
				<view style="font-size: 26upx;color: #333333;width: 25%;">商家电话</view>
				<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;">{{adminShopPhone}}
					<u-icon name="phone"></u-icon>
				</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;" v-if="state != 5">
				<view v-if="state < 2" style="font-size: 26upx;color: #333333;width: 25%;">支付状态</view>
				<view v-if="state >= 2" style="font-size: 26upx;color: #333333;width: 25%;">支付方式</view>
				<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;">{{payWay}}</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;" @click="getDuihuanma(list.virtualId)"
				v-if="list.virtualId && state < 5">
				<view style="font-size: 26upx;color: #333333;width: 25%;">兑换码</view>
				<view style="font-size: 26upx;color: #FC0B17;margin-left: 10upx;width: 70%;">点击查看详情</view>
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;" v-if="refundCheck">
				<view style="font-size: 26upx;color: #333333;width: 25%;">退款原因</view>
				<input type="text" style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;"
					v-model="refund" placeholder="请输入退款原因" :disabled="state === 6 || state === 7 ? true : false" />
			</view>
			<view style="display: flex;padding: 20upx;align-items: center;" v-if="refusedRefund">
				<view style="font-size: 26upx;color: #333333;width: 25%;">拒绝退款原因</view>
				<input type="text" style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;"
					v-model="refusedRefund" disabled="true" />
			</view>
			<view style="padding: 20upx;" v-if="expList.length > 0">
				<view>
					<view style="display: flex;">
						<view style="font-size: 26upx;color: #333333;width: 25%;">{{expName}}</view>
						<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">
							{{list.expressNumber}}
						</view>
					</view>
					<view style="width: 100%;margin-top: 20upx;">
						<view style="margin-top: 20upx;" v-for="(item,index) in expList" :key='index'>
							<view style="width: 100%;margin-top: 10upx;">
								<text>{{item.time}}:</text>
								<text style="margin-left: 20upx;">{{item.status}}</text>
								<!-- <view style="width: 40%;">{{item.time}}:</view>
								<view style="font-size: 26upx;color: #333333;margin-left: 10upx;">{{item.status}}</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 淘口令分享 -->
		<simpleModal ref="simpleModalTkl" @maskClose="TklmaskClose">
			<view class="buy-box-title">兑换码</view>
			<view class="buy-box-center" style="width: 700upx;">
				<view class="code-cent">
					<div class="cente-text">
						<div>
							<view class="textarea">
								【商品】{{ duihuanList.title }}
								<br />
								【链接】{{ duihuanList.linkUrl }}
								<br />
								【兑换码】{{ duihuanList.content }}
							</view>
						</div>
					</div>
				</view>
				<view style="display: flex;width: 100%;">
					<view class="buy-btn-copy" style="width: 40%;" @tap="goWeb">一键打开</view>
					<view class="buy-btn-copy" style="width: 40%;" v-bind:class="[copyTklStatus ? 'active' : '', '']"
						@tap="copyTklWenAns">{{ copyTklStatus ? '已复制到剪切板' : '一键复制' }}</view>
				</view>
			</view>
		</simpleModal>

		<view
			style="text-align: center;position: fixed;bottom: 0upx;background-color: #FFFFFF;width: 100%;height: 100upx;justify-content: center;overflow: hidden;"
			v-if="state < 5">
			<view style="display: flex;text-align: center;width: max-content;float: right;">
				<view class='view_button' @tap='goMaijia(list)'>联系卖家</view>
				<view v-if="state === 3" style="color: #05C25C;border: 1px solid #05C25C;" class='view_button'
					@tap='goconfirm(list)'>确认收货</view>
				<view v-if="state === 3 && isExpress != 2" class='view_button' @tap='getWuLiu(list)'>查看物流</view>
				<view v-if="state === 2" class='view_button' @tap='goRemind(list)'>提醒发货</view>
				<view v-if="state === 2 && isRefund != 2 && isExpress != 2" class='view_button' @tap='gorefund(list)'>退款
				</view>
				<view v-if="state === 4" class='view_button' @tap='gopinglun(list)'>去评价</view>
				<view v-if="state === 1" class='view_button' @tap='gocancle(list)'>取消订单</view>
				<view v-if="state === 1" style="color: #05C25C;border: 1px solid #05C25C;" class='view_button'
					@tap='goPay(list)'>去支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import simpleModal from '@/components/simple-pro/customModal.vue';
	export default {
		components: {
			simpleModal
		},
		data() {
			return {
				adminShopName: '',
				adminShopAddress: '',
				adminShopPhone: '',
				latitude: 0,
				longitude: 0,
				state: '-1',
				isRefund: 0,
				payWay: '',
				id: 0,
				refusedRefund: '',
				expName: '',
				refund: '',
				isExpress: 0,
				copyTklStatus: false,
				refundCheck: false,
				duihuanList: {},
				list: {},
				expList: []
			}
		},
		onLoad(d) {
			this.adminShopName = this.$queue.getData('adminShopName');
			this.adminShopAddress = this.$queue.getData('adminShopAddress');
			this.adminShopPhone = this.$queue.getData('adminShopPhone');
			let adminShopJW = this.$queue.getData('adminShopJW');
			if (adminShopJW) {
				adminShopJW = adminShopJW.split(',');
				if (adminShopJW.length > 0) {
					this.longitude = adminShopJW[0];
					this.latitude = adminShopJW[1];
				}
			}
			if (d.id) {
				this.id = d.id;
				this.getListById(d.id);
			}
		},
		methods: {
			copy(num) {
				uni.setClipboardData({
					data: num,
					success: r => {
						this.$queue.showToast('复制成功');
					}
				});
			},
			// 一键导航
			bindGps() {
				uni.openLocation({
					latitude: Number(this.latitude) - 0, //要去的纬度-地址       
					longitude: Number(this.longitude) - 0, //要去的经度-地址
					name: this.adminShopName, //地址名称
					address: this.adminShopAddress, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			// 拨打电话
			bindphone(phone) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否拨打电话',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', phone);
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gopinglun(item) {
				uni.redirectTo({
					url: '../my/pinglun?ordersId=' + item.id
				});
			},
			goWeb() {
				//#ifdef APP-PLUS
				uni.navigateTo({
					url: '/pages/member/webview?url=' + this.duihuanList.linkUrl
				});
				//#endif
				//#ifdef H5
				window.location.href = this.duihuanList.linkUrl
				//#endif
			},
			getDuihuanma(id) {
				this.$Request.getT('/app/selfGoodsVirtual/find?id=' + id).then(res => {
					if (res.status === 0) {
						this.duihuanList = res.data;
						this.$refs.simpleModalTkl.show({
							showConfirmButton: false
						});
					}
				});
			},
			copyTklWenAns: function() {
				uni.setClipboardData({
					data: this.duihuanList.content,
					success: r => {
						this.$queue.showToast('复制成功')
						this.copyTklStatus = true;
					}
				});
			},
			TklmaskClose: function(e) {
				this.$refs.simpleModalTkl.hide();
				this.copyTklStatus = false;
			},
			TklmaskShow: function(e) {

			},
			goRemind(item) {
				this.$Request.getT('/app/orders/remind?ordersId=' + item.id).then(res => {
					if (res.status === 0) {
						this.$queue.showToast('已提醒商家及时发货，请注意查收');
					} else {
						this.$queue.showToast(res.msg);
					}
				});
			},
			goOrderDetail(id) {
				uni.navigateTo({
					url: '../index/commoditydetail?ordersId=' + id
				});
			},
			gorefund(list) {
				if (this.refundCheck) {
					if (this.refund != undefined && this.refund != '') {} else {
						uni.showToast({
							icon: 'none',
							title: '退款原因不能为空'
						});
						return;
					}
					uni.showModal({
						title: '温馨提示',
						content: '确定要取消订单并退款吗？',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确认',
						success: res => {
							if (res.confirm) {
								this.$Request.getT('/app/orders/refund?ordersId=' + list.id + '&refund=' + this
									.refund).then(res => {
									if (res.status === 0) {
										this.getListById(this.id);
									} else {
										this.$queue.showToast(res.msg);
									}
								});
							}
						}
					});
				} else {
					this.refundCheck = true;
				}
			},
			goMaijia(list) {
				let kefu = this.$queue.getData('kefu'); // 用户端联系方式 1 手机号 2企业微信
				let kefuPhone = this.$queue.getData('kefuPhone');
				let userId = this.$queue.getData('userId');
				if (userId) {
					if (kefu == 1) {
						uni.makePhoneCall({
							phoneNumber: kefuPhone //仅为示例
						});
					} else {
						// #ifdef MP-WEIXIN
						let that = this
						try {
							wx.openCustomerServiceChat({
								extInfo: {
									url: that.$queue.getData('kefuUrl')
								},
								corpId: that.$queue.getData('kefuAppId'),
								success(res) {},
								fail(res) {
									console.error(res)
								}
							})
						} catch (error) {
							console.error("catchcatch" + error)
							uni.showToast({
								title: '请更新至微信最新版本'
							});
						}
						// #endif
						// #ifndef MP-WEIXIN
						let url = this.$queue.getData('kefuUrl');
						if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
							uni.navigateTo({
								url
							});
						} else {
							//#ifndef H5
							uni.navigateTo({
								url: '/pages/index/webView?url=' + url
							});
							//#endif
							//#ifdef H5
							window.location.href = url;
							//#endif
						}
						// #endif
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/public/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			getWuLiu(list) {
				this.$queue.showLoading('查询中...');
				this.$Request.getT('/app/orders/findExpress?expressNumber=' + list.expressNumber).then(res => {
					if (res.status === 0) {
						uni.hideLoading();
						this.expList = [];
						//快递公司名称
						this.expName = res.data.result.expName;
						if (res.data.result.list.length > 0) {
							res.data.result.list.forEach(d => {
								this.expList.push(d);
							});
						} else {
							this.$queue.showToast("暂无货运信息");
						}

					} else {
						uni.hideLoading();
						this.$queue.showToast(res.msg);
					}
				});
				// this.$Request.getT('/orders/findExpress?expressNumber=557031772301836').then(res => {
				// 	if (res.status === 0) {
				// 		let data = JSON.parse(res.data);
				// 		this.expName = data.result.expName;
				// 		this.expList = [];
				// 		//快递公司名称
				// 		if (data) {
				// 			this.expList = data.result.list;
				// 			console.log(JSON.stringify(this.expList))
				// 		} else {
				// 			this.$queue.showToast("暂无货运信息");
				// 		}
				// 	} else {
				// 		this.$queue.showToast(res.msg);
				// 	}
				// });
			},
			gocancle(list) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要取消此订单吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.getT('/app/orders/cancel?id=' + list.id).then(res => {
								if (res.status === 0) {
									this.getListById(this.id);
								} else {
									this.$queue.showToast(res.msg);
								}
							});
						}
					}
				});
			},
			goconfirm(list) {
				uni.showModal({
					title: '温馨提示',
					content: '确定收到货物了吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.getT('/app/orders/confirm?id=' + list.id).then(res => {
								if (res.status === 0) {
									this.getListById(this.id);
								} else {
									this.$queue.showToast(res.msg);
								}
							});
						}
					}
				});
			},
			goPay(list) {
				this.$queue.setData('href', '/pages/my/orderdetail')
				uni.redirectTo({
					url: '../my/payment?money=' + list.payMoney + '&title=' + list.title + '&img=' + list.img +
						'&id=' + list.id
				});
			},
			deleteOder(id) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除此订单吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.getT('/app/orders/delete?id=' + id).then(res => {
								if (res.status === 0) {
									uni.navigateBack();
								} else {
									this.$queue.showToast(res.msg);
								}
							});
						}
					}
				});
			},
			getListById(id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$Request.getT('/app/orders/find?id=' + id).then(res => {
					if (res.status === 0) {
						this.state = res.data.status;
						if (res.data.status === 1) {
							res.data.status = '待付款'
						} else if (res.data.status === 2) {
							res.data.status = '待发货'
						} else if (res.data.status === 3) {
							res.data.status = '已发货'
						} else if (res.data.status === 4) {
							res.data.status = '已收货'
						} else if (res.data.status === 5) {
							res.data.status = '已取消'
						} else if (res.data.status === 6) {
							res.data.status = '退款中'
						} else if (res.data.status === 7) {
							res.data.status = '已退款'
						} else if (res.data.status === 8) {
							res.data.status = '拒绝退款'
						} else if (res.data.status === 10) {
							res.data.status = '已评价'
						}
						if (res.data.mobile === '') {
							res.data.consignee = '未填写地址信息';
							res.data.mobile = '';
						}
						this.list = res.data;
						this.isRefund = res.data.isRefund;
						this.refusedRefund = res.data.refusedRefund;
						this.isExpress = res.data.isExpress;
						if (this.state === 6 || this.state === 7) {
							this.refundCheck = true;
							this.refund = res.data.refund;
						}

						if (res.data.payWay === 1 || res.data.payWay === 2 || res.data.payWay === 3) {
							this.payWay = '微信';
						} else if (res.data.payWay === 4 || res.data.payWay === 5) {
							this.payWay = '支付宝';
						} else if (res.data.payWay === 6) {
							this.payWay = '零钱';
						} else if (res.data.payWay === 7) {
							this.payWay = '积分';
						} else {
							this.payWay = '待支付';
						}

					}
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style>
	@import '../../../../static/css/index.css';

	page {
		background: #F2F2F2;
	}

	.view_button {
		margin: 25upx 20upx 10upx 30upx;
		line-height: 60upx;
		font-size: 24upx;
		color: #333333;
		width: 150upx;
		height: 60upx;
		border-radius: 100upx;
		border: 1upx solid #bababa;
	}

	.buy-box-center .buy-btn-copy {
		background: linear-gradient(to left, #FF2638 0, #FF2638 100%);
		display: block;
		border-radius: 50px;
		line-height: 40px;
		height: 40px;
		text-align: center;
		color: #fff;
		font-size: 16px;
		margin-left: 20upx;
		width: 580upx;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 10px;
	}
</style>