php/www/vue/src/components/order.vue

<template>
	<div>

		<scroller >
			<div style="padding: 15px;">
				<button-tab>
					<button-tab-item selected @on-item-click="consoleIndex(1)">预约中</button-tab-item>
					<button-tab-item :selected="isComplete" @on-item-click="consoleIndex(3)" >已完成</button-tab-item>
					<button-tab-item  @on-item-click="consoleIndex(2)">已取消</button-tab-item>
				</button-tab>
			</div>
			<div style="padding-bottom: 16%;">
				<div class="order-block" v-for="order in orderList">
					<div class="row_first order-line">
						<span >订单时间</span>
						<span >{{order.booking_time_str}}</span>
						<span >{{order.status_str}}</span>
					</div>
					<div class="row_second order-left-img" @click="checkOrderDetail(order.id,isShow)">
						<div>
							<span>编号</span>
							<span>{{order.order_num}}</span>
						</div>
						<div>
							<span>服务</span>
							<span>{{order.products_str}}</span>
						</div>
						<div>
							<span>价格</span>
							<span>{{order.price}}元</span>
						</div>
					</div>
					<div class="order-line-button-top"></div>
					<div class="order-three" v-if="order.status == 0">
						<span></span>
						<span @click="del(order.id)">取消订单</span>
						<span>立即支付</span>
					</div>
					<div class="order-three order-three-else" v-else-if="order.status == 1 || order.status == 2 || order.status == 3 || order.status == 4 || order.status == 5">
						<span></span>
						<span @click="completeOrder(false,order.id)">确认完成</span>
					</div>
					<div class="order-three order-three-else order-three-else-color" v-else-if="order.status == 6">
						<span></span>
						<span>立即评价</span>
					</div>
				</div>
			</div>
		</scroller>

		<div v-transfer-dom>
			<x-dialog v-model="showScrollBox" class="dialog-demo">
				<span class="dialog-title">确认服务已完成？</span>
				<span @click="completeOrder(true)" class="vux-confirm">确认</span>
				<span @click="showScrollBox=false" class="vux-close">取消</span>

			</x-dialog>
		</div>
		<div v-transfer-dom>
			<x-dialog v-model="showScrollBox1" class="dialog-demo">
				<span class="dialog-title">取消订单成功</span>
				<span  class="vux-confirm" @click="flush()">完成</span>
			</x-dialog>
		</div>
		<navigation></navigation>
	</div>

</template>

<script>
  import { ButtonTab, ButtonTabItem, Divider, XDialog, TransferDomDirective as TransferDom } from 'vux'
  import axios from 'axios'
  import qs from 'qs'
  import config from '../config/config'
  export default {
    directives: {
      TransferDom
    },
    components: {
      ButtonTab,
      ButtonTabItem,
      Divider,
      XDialog
    },
    created () {
      if (this.$route.query.type !== undefined) {
        this.consoleIndex(this.$route.query.type)
        this.isComplete = true
      } else {
        this.consoleIndex(1)
      }
    },
    methods: {
      consoleIndex (index) {
        this.isShow = index
        console.log('click demo01', index)
        let orderList = {user_id: config.userId, type: index, page: 1}
        orderList = qs.stringify(orderList)
        axios.post('o2o/order/list', orderList).then(res => {
          this.orderList = res.data.data
          console.log(this.orderList)
        })
      },
      flush () {
        this.showScrollBox1 = false
        this.$router.go(0)
      },
      completeOrder (isConfirm, id) {
        if (!isConfirm) {
          this.orderId = id
        }
        if (isConfirm) {
          console.log('修改订单状态')
          axios.get('o2o/order/confirmComplete&user_id=' + config.userId + '&order_id=' + this.orderId).then(res => {
            if (res.data.success === true) {
              this.$router.push({path: '/completeOrder'})
            }
          })
          //  order_id user_id
          //  this.$router.push({path: '/completeOrder', query: {id: this.orderId, type: 1}})
        }
        this.showScrollBox = true
      },
      checkOrderDetail (id, type) {
        this.$router.push({path: '/orderInfo', query: {id: id, type: type}})
      },
      del (id) {
        axios.get('o2o/order/del&user_id=' + config.userId + '&order_id=' + id).then(res => {
          if (res.data.success) {
            this.showScrollBox1 = true
          }
        })
      }
    },
    data () {
      return {
        isShow: 1,
        showScrollBox: false,
        showScrollBox1: false,
        isComplete: false,
        orderId: '',
        orderList: {}
      }
    }
  }
</script>
<style lang="less" scoped>
	.order-block {
		border-top:1px solid silver;
		border-bottom:1px solid silver;
		margin-top: 15px;
	}
	.row_first {

		font-size: .5rem;
		display: flex;


		span{

			display: block;
			float: left;
			padding: 20px 0;
			margin-left: 20px;
			&:nth-child(1){
				width:20%;
				padding-left: 5px;
				text-align: left;
			}
			&:nth-child(3){
				width: 20%;
				text-align: right;
				padding-right: 10px;
			}
		}
	}
	.row_second {
		font-size: .5rem;
		text-align: left;
		margin-left: 10px;
		margin-bottom: 5px;
		div {
			margin-top: 5px;
			&:nth-child(3) {
				margin-bottom: 10px;
			}
			span {
				margin-left: 10px;
			}
		}

	}
	.order-line-button-top {
		border-top:1px #dfdfdf solid;
		width: 90%;
		margin-left: 5%;
	}
	.order-three {
		font-size: .5rem;
		display: flex;

		span{

			display: block;
			float: right;
			padding: 3px 0;
			margin-left: 20px;
			margin-bottom: 10px;
			margin-top: 10px;
			&:nth-child(1){
				width:60%;
			}
			&:nth-child(2){
				width:20%;
				padding: 2px;
				border:1px #D3D3D3 solid;
				color:#D3D3D3;
				text-align: center;
			}
			&:nth-child(3){
				width: 20%;
				text-align: center;
				border:1px #E16E00 solid;
				color:#E16E00;
				margin-right: 8px;
				padding: 2px 2px 2px 2px;
			}
		}
	}
	.order-three-else {
		span{

			display: block;
			float: right;
			padding: 3px 0;
			margin-left: 20px;
			margin-bottom: 10px;

			&:nth-child(1){
				width:80%;
			}

			&:nth-child(2){
				width: 20%;
				text-align: right;
				color:#E16E00;
				border:1px #E16E00 solid;
				margin-right: 8px;
				padding: 2px 5px 2px 2px;
			}
		}
	}
	.order-three-else-color {
		span{

			display: block;
			float: right;
			padding: 3px 0;
			margin-left: 20px;
			margin-bottom: 10px;

			&:nth-child(1){
				width:80%;
			}

			&:nth-child(2){
				width: 20%;
				text-align: right;
				color:#e3ddc4;
				border:1px #8F7625 solid;
				background-color: #8F7625;
				margin-right: 8px;
				padding: 2px 5px 2px 2px;
			}
		}
	}

	.order-line {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='90%' height='0.5'/></svg>");
		background-repeat: no-repeat;
		background-position: 20px 50px;
		border-bottom: 0;
	}
	.order-left-img {
		width: 90%;
		/*height: 100px;*/
		margin: 0 auto;
		position: relative;
		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMjAxNy4zLjXW1e4OAAAA7klEQVRYhc2XwQ3CMAxFXxADsAmHegA2gRHKJDACbMIAyYFNukG5VKhCCkmKXeNboqj/yU6/nTCOI56xcVX/B4CtxkdCCMQYewARuZbOz8seNO5ASqkHLtPyCRxEZKgBsCjBHnjEGHc1h1UyMJXgBhxn29lMmGRARE7AfbZVlQnVEiyBUL8DrRAmPtACYWZEtRCmTpiDSCm9IcytuASh5gOlyPnEagAZiLN7N3QvwSoZyIl3XTeYA3wTB+PfsCRuClDbnk0AWmYDdYAWcXWAVnFVgCXiagDTSN4srgbwEdXioDsV+z1Mfgn3bugO8AJZSqO192KiLQAAAABJRU5ErkJggg==') no-repeat 100% 5%;
		background-size: .8rem;
	}

	.dialog-demo {
		font-size: .5rem;
		.vux-confirm {
			background-color: #2c7cf6;
			display: inline-block;
			color: white;
			border:1px solid;
			padding: 10px 0 ;
			margin: 10px 0 ;
			border-radius: 5px;
			width: 40%;
		}
		.vux-close {
			background-color: #f7f7f7;
			display: inline-block;
			color: #939393;
			border:1px solid #c9c9c9;
			padding: 10px 0 ;
			margin: 10px 0 ;
			border-radius: 5px;
			width: 40%;
		}
		.weui-dialog{
			border-radius: 8px;
			padding-bottom: 8px;
		}
		.dialog-title {
			font-size: .8rem;
			line-height: 55px;
			text-align: center;
			height: 50px;
			display: block;
			color: #666;
		}
		.img-box {
			height: 350px;
			overflow: hidden;
		}
		.vux-close {
			margin-top: 8px;
			margin-bottom: 8px;
		}
	}

</style>