fangliaoxiaochengxv/subPages/myOrder/activityOrderItem.vue

<template>
	<view class="order-item" @click.stop="toDetail">
		<view class="display-flex-between">
			<text class="fw400 fs12 lh18 color-666">{{startTime }}&nbsp;到&nbsp;{{ endTime}}</text>
			<view class="color-556 fs12 lh18">{{statusDisplay}}</view>
		</view>
		<view class="display-flex-common goods-list" >
			<image style="width: 144rpx; height: 144rpx; border-radius: 10rpx;margin-right: 30rpx;flex-shrink: 0;"
				:src="data.activity.cover" mode="aspectFill">
			</image>
			<view style="width: 100%;">
				<view class="display-flex-between mb8 fs14 lh18 color-333">
					<text class="fw600 ">{{data.activity.name}}</text>
				</view>
				<view class="display-flex-between fs12 lh18  color-333 fw400">
          <text>{{data.num}}人</text>
				</view>
			</view>
		</view>
		<view class="goods-total display-flex-between">
			<view >
				<text class="fs12 lh18 color-3E3D44 fw400">实付：</text><text class="fs18 lh15 fw600 color-556"><text class="fs10">￥</text>{{data.amount_total}}</text>
			</view>
			<view class="display-flex-center">
				<text class="btn-gray-border" @click.stop="cancelOrder"
					v-if="[1, 2, 3].includes(data.status) && !isRefund">取消报名</text>
				<text class="common-btn ml10" @click.stop="toPay" v-if="[1, 2].includes(data.status)">立即付款</text>
			</view>
		</view>
		<!-- 取消订单原因 -->
		<AfterReson v-model="showReson" @confirm="cancelConfirm"></AfterReson>
		<!-- 确认框 -->
		<u-modal :show="confirmShow" :showCancelButton="true" @cancel="confirmShow = false"
			:content='confirmData.content' @confirm="confirmHandler"></u-modal>
	</view>
</template>

<script>
	import AfterReson from '@/components/AfterReson.vue'
  import {cancel} from "@/common/api/activity";
  import {toWechatPayActivitySave} from "../../common/utils/tools";
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: { AfterReson },
		data() {
			return {
				showReson: false,
				cancelRemark: '',
				confirmShow: false,

				confirmData: {
					title: '',
					content: ''
				},
				confirmType: ''
			}
		},
		watch: {

		},
		computed: {

      startTime() {
        if (this.data.activity && this.data.activity.start_time){
          return this.data.activity.start_time.split(' ')[0]

        }
        return ''
      },
      endTime() {
        if (this.data.activity &&this. data.activity.end_time){
          return this.data.activity.end_time.split(' ')[0]

        }
        return ''
      },
			statusDisplay() {
				if (this.data.refund_status == 0) {
					switch (this.data.status) {
            case -1:
              return '已退款'
						case 0:
							return '已取消'
						case 1:
              return '待支付'
						case 2:
							return '支付中'
						case 3:
							return '已支付'
						case 4:
              return '已成功'
						default:
							return ''
					}
				} else {
					return this.data.refund_status_name
				}
			},
			isRefund() {
				return this.data.refund_status != 0
			}
		},
		methods: {
			confirmHandler() {
				// 确认弹框
				let currentApi = null
				if (this.confirmType == 'cancelOrder') {
          cancel({id:this.data.id}).then(({data})=>{
            uni.showToast({
              title:"取消成功",
              icon: 'none'
            })
            this.confirmShow = false
            this.$emit('refresh')
          })
				} else if (this.confirmType == 'confirm') {
					this.$api.confirmOrder({ order_no: this.data.order_no }).then(res => {
						this.confirmShow = false
						this.$emit('refresh')
					}).catch(() => {
						this.confirmShow = false
					})
				} else if (this.confirmType == 'cancelAfter') {
					this.$api.cancelAfterSales({ order_no: this.data.order_no }).then(res => {
						this.confirmShow = false
						this.$emit('refresh')
					}).catch(() => {
						this.confirmShow = false
					})
				}
			},

			toPay() {
				// 立即付款
				toWechatPayActivitySave(this.data.order_no)
			},
			cancelAfter() {
				this.confirmShow = true
				this.confirmType = 'cancelAfter'
				this.confirmData = {
					title: '取消申请',
					content: '确认取消申请吗?'
				}
			},
			cancelOrder() {
        this.cancelConfirm({})
			},
			cancelConfirm(data) {
				this.confirmShow = true
				this.confirmType = 'cancelOrder'
				this.confirmData = {
					title: '取消订单',
					content: '确认取消订单吗?'
				}
			},
			confirm() {
				this.confirmShow = true
				this.confirmType = 'confirm'
				this.confirmData = {
					title: '确认收货',
					content: '确认收货码?'
				}
			},
			toDetail() {
				uni.navigateTo({
					url: `/subPages/activityDetail/activitySave?orderId=${this.data.id}&orderFlag=true`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx 30rpx  24rpx;
		margin-bottom: 20rpx;
	}

	.goods-list {
		// margin: 0 30rpx;
		margin-bottom: 20rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.common-btn,
	.btn-gray-border {
		height: 64rpx;
		line-height: 64rpx;
	}
</style>