fangliaoxiaochengxv/subPages/myOrder/courseOrderItem.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" v-for="(item, index) in data.items" :key="index">
			<image style="width: 144rpx; height: 144rpx; border-radius: 10rpx;margin-right: 30rpx;flex-shrink: 0;"
				:src="item.goods_cover" mode="aspectFill">
			</image>
			<view style="width: 100%;">
				<view class="display-flex mb8 fs14 lh18 color-333">
					<text class="fw600 ">{{item.goods_name}}</text>
				</view>
				<view class="display-flex fs12 lh18  color-333 fw400">
					<text class="gray-tag">{{item.created_at}}</text>
				</view>
        <view class="mt9 display-flex    color-333 fw400">
          <view class="mr12 lh18"><text class="fs12 mr5"> 总价</text> <text class="fs10 lh15">￥</text><text class="fs14 lh18">{{item.price_selling}}</text></view>
          <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>
			</view>
		</view>
    <!-- 确认框 -->
    <u-modal :show="confirmShow" :showCancelButton="true" @cancel="confirmShow = false"
             @confirm="confirmHandler"></u-modal>
	</view>
</template>

<script>
	import AfterReson from '@/components/AfterReson.vue'
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: { AfterReson },
		data() {
			return {
        confirmShow : false
			}
		},
		watch: {

		},
		computed: {
			statusDisplay() {
				if (this.data.refund_status == 0) {
					switch (this.data.status) {
						case 0:
							return '已取消'
						case 1:
						case 2:
							return '待付款'
						case 3:
							return '待发货'
						case 4:
							return '待收货'
						case 6:
						case 9:
							return '已完成'
						default:
							return ''
					}
				} else {
					return this.data.refund_status_name
				}
			},

		},
		methods: {
      cancelOrder() {
        this. cancelConfirm()
      },
      cancelConfirm() {
        this.confirmShow = true
        this.confirmType = 'cancelOrder'
        this.confirmData = {
          title: '取消订单',
          content: '确认取消订单吗?'
        }
      },
      confirmHandler() {
        // 确认弹框
        let currentApi = null
        if (this.confirmType == 'cancelOrder') {
          // 取消订单
          this.$api.cancelOrder({ order_no: this.data.order_no }).then(res => {
            this.confirmShow = false
            this.$emit('refresh')
          }).catch(() => {
            this.confirmShow = false
          })
        } 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
          })
        }
      },
      toDetail() {
        uni.navigateTo({
          url: `../orderDetail/courseOrderDetail?orderNo=${this.data.order_no}`
        })
      },
		}
	}
</script>

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

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


</style>