php/www/vue/src/components/orderInfo.vue

<template>
	<div class="order-info">
		<!--:footer-buttons="buttons1"-->
		<div class="order-detail">
			<form-preview :body-items="list"></form-preview>
		</div>
		<div class="order-detail-show">
			<group>
				<cell title="订单明细" value-align="left" ></cell>
				<cell :title="product.name + ' x' + product.count" value-align="left" >
					<span slot="value">
						{{ userInfo.price }}
					</span>
				</cell>
				<cell title="总价"  value-align="left" >
					<span slot="value" >
						{{ userInfo.price }}
					</span>
				</cell>
				<cell title="订单状态"  value-align="left" >
					<span slot="value" >
						{{ userInfo.status_str }}
					</span>
				</cell>
				<cell v-if="type != 2" title="支付方式"  value-align="left" >
					<span slot="value" >
						 微信
					</span>
				</cell>
			</group>
		</div>
		<div class="order-detail-show">
			<group>
				<cell title="订单备注" value-align="left" >
					<span slot="value" >
						{{ userInfo.memo }}
					</span>
				</cell>
				<cell v-if="!(status == -1 || status == -2)">
					<span slot="value" v-if="status == 6">
						 <span class="order-info-operation_6">立即评价</span>
					</span>
					<span slot="value" v-else-if="status == 1 || status == 2|| status == 3|| status == 4|| status == 5">
						 <span class="order-info-operation_1" @click="completeOrder(false,userInfo.id)">确认完成</span>
					</span>
					<span slot="value" v-else-if="status == 0" class="order-info-operation_0">
						 <span>立即支付</span>
						 <span @click="del(userInfo.id)">取消订单</span>
					</span>
				</cell>
			</group>
		</div>

		<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>

	</div>

</template>

<script>
  import { Cell, CellBox, CellFormPreview, FormPreview, Group, Badge, XDialog, TransferDomDirective as TransferDom } from 'vux'
  import axios from 'axios'
  import config from '../config/config'
  export default {
    directives: {
      TransferDom
    },
    mounted () {
      setTimeout(() => {
        this.money = -1024
      }, 2000)
    },
    components: {
      Group,
      Cell,
      CellFormPreview,
      CellBox,
      Badge,
      FormPreview,
      XDialog
    },
    created () {
      let id = this.$route.query.id
      let type = this.$route.query.type
      this.type = type
      axios.get('o2o/order/detail&order_id=' + id + '&user_id=' + config.userId).then(res => {
        this.userInfo = res.data.data
        this.product = this.userInfo.products[0].product
        this.status = this.userInfo.status
        console.log(this.status)
        this.list[0].label = '订单状态'
        this.list[0].value = this.userInfo.status_str
        this.list[1].label = '订单编号'
        this.list[1].value = this.userInfo.order_num
        this.list[2].label = '服务地点'
        this.list[2].value = this.userInfo.address.city + this.userInfo.address.area + this.userInfo.address.detail + this.userInfo.address.poi.name
        this.list[3].label = '联系电话'
        this.list[3].value = this.userInfo.address.mobile
        this.list[4].label = '预约时间'
        this.list[4].value = this.userInfo.booking_time_str
        this.list[5].label = '下单时间'
        this.list[5].value = this.userInfo.order_time_str
        if (this.userInfo.cancel_time_str !== '') {
          this.list[6].label = '取消时间'
          this.list[6].value = this.userInfo.status_str
        }
        if (this.userInfo.finish_time_str !== '') {
          this.list[7].label = '完成时间'
          this.list[7].value = this.userInfo.finish_time_str
        }
      })
    },
    watch: {
      userInfo: function (val, oldVal) {
        this.userInfo = val
      }
    },
    methods: {
      del (id) {
        axios.get('o2o/order/del&user_id=' + config.userId + '&order_id=' + id).then(res => {
          if (res.data.success) {
            this.showScrollBox1 = true
          }
        })
      },
      onClick () {
        console.log('on click')
      },
      flush () {
        this.showScrollBox1 = false
        this.$router.go(0)
      },
      completeOrder (isConfirm, id) {
        console.log(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
      }
    },
    computed: {

    },
    data () {
      return {
        userInfo: {},
        product: {},
        showScrollBox: false,
        showScrollBox1: false,
        status: 0,
        type: 1,
        list: [{
          label: '',
          value: ''
        }, {
          label: '',
          value: ''
        }, {
          label: '',
          value: ''
        }, {
          label: '',
          value: ''
        }, {
          label: '',
          value: ''
        }, {
          label: '',
          value: ''
        }, {
          label: '',
          value: ''
        }, {
          label: '',
          value: ''
        }, {
          label: '',
          value: ''
        }, {
          label: '',
          value: ''
        }],
        buttons1: [{
          style: 'default',
          text: '辅助操作'
        }, {
          style: 'primary',
          text: '跳转到首页',
          link: '/'
        }]
      }
    }
  }
</script>

<style lang="less" scoped>
	.order-info {
		font-size: .8rem;
		background-color: #fafafa;
	}
	.order-detail {

	}
	.order-detail-show {
		background-color: #ffffff;
		margin-top: 10px;
		span {
			float:right;
		}
	}
	.order-info-operation_6 {
		font-size: .8rem;
		color:#e3ddc4;
		border:1px #8F7625 solid;
		background-color: #8F7625;
		padding: 2px 5px;
		border-radius: 5px;
	}
	.order-info-operation_1 {
		font-size: .8rem;
		color:#E16E00;
		border:1px #E16E00 solid;
		padding: 2px 5px;
		border-radius: 5px;
	}
	.order-info-operation_0 {
		span {
			font-size: .8rem;
			padding: 2px 5px;
			border-radius: 5px;
			&:nth-child(2) {
				margin-right: 10px;
				color:#D3D3D3;
				border:1px #D3D3D3 solid;
			}
			&:nth-child(1) {

				color:#E16E00;
				border:1px #E16E00 solid;
			}
		}
	}
	.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>