shop4.3.57/plugins/community/components/app-order.vue

<template>
	<view>
		<view @click="toDetail(item.id)" class="item">
			<view class="title main-between cross-center">
				<view class="activity-title dir-left-nowrap">
					<image src="./../image/activity-name.png"></image>
					<view>{{item.title}}</view>
				</view>
				<view class="number dir-right-nowrap">
					<view :class="theme + '-m-text ' + theme">{{item.no}}</view>
					<view v-if="is_user && item.cancel_status == 1" class="status">已关闭</view>
					<view v-else-if="is_user && item.is_sale == 1" class="status">已完成</view>
					<view v-else-if="is_user && item.is_confirm == 1" class="status">已提货</view>
					<view v-else-if="is_user && item.is_send == 1" class="status">待提货</view>
					<view v-else-if="is_user && item.is_pay == 1" class="status">待发货</view>
					<view v-else-if="is_user && item.is_pay == 0" class="status">未付款</view>
				</view>
			</view>
			<view v-if="!is_user" class="info main-between cross-center">
				<view class="user-info dir-left-nowrap cross-center">
					<view class="avatar">
						<image :src="item.user_avatar"></image>
					</view>
					<view class="user">
						{{item.name}}
						<text>{{item.mobile}}</text>
					</view>
				</view>
				<view :class="theme + '-m-text ' + theme" v-if="item.cancel_status == 1" class="status">已关闭</view>
				<view :class="theme + '-m-text ' + theme" v-else-if="item.is_sale == 1" class="status">已完成</view>
				<view :class="theme + '-m-text ' + theme" v-else-if="item.is_confirm == 1" class="status">已提货</view>
				<view :class="theme + '-m-text ' + theme" v-else-if="item.is_send == 1" class="status">待提货</view>
				<view :class="theme + '-m-text ' + theme" v-else-if="item.is_pay == 1" class="status">待发货</view>
				<view :class="theme + '-m-text ' + theme" v-else-if="item.is_pay == 0" class="status">未付款</view>
			</view>
			<view v-if="item.remark" class="remark">买家备注：{{item.remark}}</view>
			<view v-for="goods in item.detail" class="goods" :key="goods.id">
				<image class="goods-img" mode='aspectFill' :src='goods.goods_info.pic_url'></image>
				<view class='t-omit-two goods-name'>{{goods.goods_info.name}}</view>
				<view class="goods-attr t-omit">
					<text v-for="attr in goods.goods_info.attr_list"
						:key="item.attr_id">{{attr.attr_group_name}}:{{attr.attr_name}}</text>
				</view>
				<view class="goods-num">x{{goods.goods_info.num}}</view>
				<view class="goods-price">￥{{goods.goods_info.total_original_price}}</view>
				<view class="" style="display: flex; align-items: center;justify-content: space-between;">
					<view class="goods-num" style="position: static;">
						碎屏险 x1
					</view>
					<view class="goods-price" style="position: static;">
						￥{{goods.service_price}}
					</view>
				</view>
			</view>
			<view class="order-total">共<text>{{item.num}}</text>件商品 合计<text>￥{{item.total_price}}</text></view>
			<view class="dir-right-nowrap">
				<view @click.stop="orderPay(item)" v-if="is_user && item.is_pay == 0 && item.cancel_status == 0"
					class="pick-btn" :class="theme + '-m-text ' + theme + ' ' +theme + '-m-border ' + theme">立即支付</view>
				<view @click.stop="toRemind(item)" v-if="item.is_send == 1 && item.is_confirm == 0" class="pick-btn"
					:class="theme + '-m-text ' + theme + ' ' +theme + '-m-border ' + theme">确认提货</view>
			</view>
		</view>
		<view v-if="show" class="bg">
			<view class="dialog">
				<view class="dialog-content">是否确认提货</view>
				<view class="main-center btn-area">
					<view class="submit-btn box-grow-1" style="color: #666" @click='toRemind'>取消</view>
					<view class="line"></view>
					<view class="submit-btn box-grow-1" @click='beConfirm' :class="theme + '-m-text ' + theme">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: 'app-order',
		props: {
			item: {
				type: Object
			},
			is_user: {
				type: Boolean
			},
			is_confirm: {
				type: Boolean
			},
			theme: String
		},
		data() {
			return {
				show: false,
				orderList: [],
				id: 0,
			};
		},
		methods: {
			toRemind(item) {
				if (item.id > 0) {
					this.show = true;
					this.id = item.id
				} else {
					this.show = false;
					this.id = 0;
				}
			},
			// 订单支付
			orderPay(e) {
				let _this = this;
				_this.$showLoading();
				_this.$request({
					url: _this.$api.order.list_pay_data,
					data: {
						id: e.id
					}
				}).then(response => {
					_this.$hideLoading();
					if (response.code === 0) {
						_this.$payment.pay(response.data.id).then(() => {
							// 支付成功
							uni.redirectTo({
								url: '/plugins/community/order/order?is_user=1'
							})
						}).catch(e => {
							// 支付失败
							uni.showModal({
								title: '',
								content: e.errMsg,
								showCancel: false
							})
						})
					}
				}).catch(() => {
					_this.$hideLoading();
				});
			},
			toDetail(id) {
				let is_user = 0;
				if (this.is_user) {
					is_user = 1
				}
				uni.navigateTo({
					url: '/plugins/community/order-detail/order-detail?id=' + id + '&is_user=' + is_user
				});
			},
			beConfirm() {
				let that = this;
				that.show = false;
				uni.showLoading({
					title: '确认提货中...'
				});
				that.$request({
					url: that.is_user ? that.$api.order.confirm : that.$api.community.confirm,
					data: {
						id: that.id
					}
				}).then(response => {
					uni.hideLoading();
					if (response.code == 0) {
						that.item.is_confirm = 1;
						that.id = 0;
						that.$emit('update', that.item);
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		border-radius: 16rpx;
		background-color: #fff;
		width: 702rpx;
		margin: 24rpx;
		margin-top: 0;
		padding: 24rpx;

		&:first-of-type {
			margin-top: 24rpx;
		}

		.status {
			font-size: 24rpx;
		}

		.title {
			height: 32rpx;
			line-height: 32rpx;
			margin-bottom: 24rpx;

			.number {
				font-size: 38rpx;

				.status {
					margin-right: 30rpx;
				}
			}

			.activity-title {
				color: #353535;
				font-size: #{24rpx};
				height: 30rpx;
				line-height: 30rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					display: block;
				}
			}
		}

		.info {
			height: 56rpx;
			font-size: 24rpx;

			.user-info {
				height: 56rpx;

				.avatar {
					margin-right: 20rpx;
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;

					image {
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
					}
				}

				.user {
					color: #353535;

					text {
						margin-left: 30rpx;
					}
				}
			}
		}

		.remark {
			margin-top: 25rpx;
			word-break: break-all;
			font-size: 24rpx;
			color: #3b3939;
			padding: 20rpx 24rpx;
			background-color: #F7F7F7;
		}

		.goods {
			height: #{160rpx};
			margin-top: #{24rpx};
			position: relative;
			font-size: #{24rpx};
			color: #353535;
			margin-bottom: #{24rpx};

			.goods-img {
				height: #{160rpx};
				width: #{160rpx};
				float: left;
				margin-right: #{20rpx};
				border-radius: #{4rpx};
			}

			.goods-attr {
				font-size: #{24rpx};
				color: #999;
				width: 70%;
				position: absolute;
				width: 70%;
				top: #{78rpx};
				left: #{180rpx};

				text {
					margin-right: #{20rpx};
				}
			}

			.goods-num {
				font-size: #{24rpx};
				color: #999;
				position: absolute;
				top: #{126rpx};
				left: #{180rpx};
			}

			.goods-price {
				font-size: #{24rpx};
				color: #353535;
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}

		.order-total {
			text-align: right;
			color: #999999;
			font-size: 24rpx;
			margin-bottom: 24rpx;

			text {
				font-size: 28rpx;
				color: #353535;
			}
		}

		.pick-btn {
			height: 48rpx;
			line-height: 46rpx;
			border-radius: 24rpx;
			border: 2rpx solid;
			font-size: 24rpx;
			display: inline-block;
			padding: 0 20rpx;
			margin-left: 20rpx;
		}
	}

	.bg {
		position: fixed;
		background-color: rgba(0, 0, 0, .3);
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 99;

		.dialog {
			width: 480rpx;
			height: 200rpx;
			position: fixed;
			top: 30%;
			left: 50%;
			margin-left: -240rpx;
			background-color: #fff;
			border-radius: 16rpx;
			z-index: 233;
			font-size: 28rpx;
			color: #353535;

			.dialog-content {
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
			}

			.btn-area {
				height: #{88rpx};
				position: relative;
				border-top: #{2rpx} solid #e2e2e2;

				.line {
					height: #{32rpx};
					width: #{1rpx};
					background-color: #e2e2e2;
					position: absolute;
					top: #{28rpx};
					left: 0;
					right: 0;
					margin: 0 auto;
				}

				.submit-btn {
					height: #{88rpx};
					line-height: #{88rpx};
					font-size: #{28rpx};
					text-align: center;
				}
			}
		}
	}
</style>