fangliaoxiaochengxv/subPages/myOrder/serverOrderItem.vue

<template>
	<view class="order-item" @click.stop="toDetail">
		<view class="display-flex-between">
      <text class="fw400 fs12 lh18 color-666">订单号：{{data.order_no}}</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.goods_cover" mode="aspectFill">
			</image>
			<view style="width: 100%;">
				<view class="display-flex-between mb8 fs14 lh18 color-333">
          <text class="fw600 ">{{data.goods_name}}</text>
          <text ><text class="fs10">￥</text>{{data.goods_price}}</text>
				</view>
				<view class="display-flex-between fs12 lh18  color-333 fw400">
          <text class="color-666">预约时间：{{data.order_date}}&nbsp;{{data.order_time}}</text>
          <text >{{data.order_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>
		<!-- 确认框 -->
		<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 {yvyueOrderCancel} from "@/common/api/yvyeService";
  import {toWechatPayPaymentSave} 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 -2:
              return '已取消'
						case 0:
							return '预订单'
						case 1:
              return '待支付'
						case 2:
							return '支付中'
						case 3:
							return '已支付'
						case 4:
              return '已签到'
            case 9:
              return '已完成'
						default:
							return ''
					}
				} else {
					return this.data.refund_status_name
				}
			},
			isRefund() {
				return this.data.refund_status != 0
			}
		},
		methods: {
			toPay() {
				// 立即付款
				toWechatPayPaymentSave(this.data.order_no)
			},

      confirmHandler() {
        // 确认弹框
        let currentApi = null
        if (this.confirmType == 'cancelOrder') {
          // 取消订单
          yvyueOrderCancel({order_no: this.data.order_no}).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
          })
        }
      },
      cancelAfter() {
				this.confirmShow = true
				this.confirmType = 'cancelAfter'
				this.confirmData = {
					title: '取消申请',
					content: '确认取消申请吗?'
				}
			},
			cancelOrder() {
        this. cancelConfirm()
      },
			cancelConfirm() {
				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/service/serviceSave?code=${this.data.goods_code}&setid=${this.data.id}`
        })
			},
		}
	}
</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>