OrderDetail.tsx

OrderDetail.tsx

import Taro, { Component, Config } from '@tarojs/taro';
import { View, Text, Image, ScrollView, Button } from '@tarojs/components';
import './OrderDetail.scss'
import { AtButton, AtFloatLayout, AtToast, AtModal, AtModalContent } from 'taro-ui';
import { getOrderDetail, cancelOrder, deleteOrder, updateOrderAddress, payOrder, confirmOrder } from '../../../servers/servers'
import { ORDER_STATUS, REFUND_STATUS, REFUND_TYPE } from '../../../global/global_data'
import Network from '../../../components/Network'
import Loading from '../../../components/Loading'
import classNames from 'classnames'

export default class OrderDetail extends Component {

  state = {
    reasons: [
      {
        text: '我不想买了',
        isSelected: true
      },
      {
        text: '其他平台价格更低',
        isSelected: false
      },
      {
        text: '想加入其他快成行的团',
        isSelected: false
      },
      {
        text: '收货信息填写错误，重新拍',
        isSelected: false
      },
      {
        text: '无法正常支付',
        isSelected: false
      },
      {
        text: '忘记支付密码/余额不足',
        isSelected: false
      },
      {
        text: '其他原因',
        isSelected: false
      },
    ],
    isShowCancelPanel: false,
    order: {},
    intv: null,
    cnt: 0,
    selectedCancelReason: '我不想买了',
    networkType: false,
    isShowAutoRefund: false,
    isShowDelete: false,
    isShowReceive: false,
    isShowReceiveAlert: false,
    isShowToService: false,
    isShowRerefund: false,
    isShowOvertime: false,
    loadingShow: true,
    isShowReapply: false,
    showRefund: false,
    isOvertimeRefund: false
  }

  updateCnt() {
    let { cnt } = this.state
    this.setState({
      cnt: cnt + 1
    })
  }

  getTimeRemaining(t) {
    let { intv, order } = this.state
    if (t == 0 && intv != null) {
      clearInterval(intv)
      this.setState({
        intv: null
      })
      this.getData(order.sn)
    }

    var seconds = Math.floor((t) % 60);
    var minutes = Math.floor((t / 60) % 60);
    var hours = Math.floor((t / (60 * 60)) % 24);
    var days = Math.floor(t / (60 * 60 * 24));
    return {
      days,
      hours,
      minutes,
      seconds
    };
  }

  componentDidShow() {
    var that = this

    let intv = setInterval(_ => {
      that.updateCnt()
    }, 1000)
    this.setState({
      intv
    })

    let pages = Taro.getCurrentPages();
    let currPage = pages[pages.length - 1];
    if (currPage.__data__.defaultAddress) {
      updateOrderAddress(this.state.order.sn, { address_id: currPage.__data__.defaultAddress.id }).then((res) => {
        if (res.code == 200) {
          that.setState({ order: res.data })
        }
      }).catch((err) => {

      })
    }
  }

  componentDidHide() {
    let { intv } = this.state
    clearInterval(intv)
  }

  config: Config = {
    navigationBarTitleText: '我的订单',
    navigationBarBackgroundColor: '#fff',
    navigationBarTextStyle: 'black',
  }

  _showCancelPanel() {
    const { order } = this.state
    const isConfirmed = (order.status == ORDER_STATUS.STATUS_CONFIRM)
    if (isConfirmed) {
      this.setState({ isShowAutoRefund: true })
    } else {
      this.setState({ isShowCancelPanel: true })
    }

  }

  _hideCancelPanel() {
    this.setState({ isShowCancelPanel: false, selectedCancelReason: '我不想买了' })
  }

  _confirmCancel() {
    const { order } = this.state
    cancelOrder(order.sn, { reason: this.state.selectedCancelReason }).then((res) => {
      if (res.success) {
        Taro.showToast({
          title: '已取消'
        })
        this.getData(order.sn)
      }
    }).catch((err) => {
      console.log(err)
    })

    this._hideCancelPanel()
  }

  _deleteOrder() {
    deleteOrder(this.state.order.sn).then((res) => {
      if (res.code == 200) {
        Taro.showToast({
          title: '删除成功'
        })
        Taro.navigateBack()
      }
    }).catch((err) => {
      console.log(err)
    })
  }

  _pay() {
    let { order, cnt } = this.state
    var that = this
    Taro.login({
      success: function (res) {
        if (res.code) {
          payOrder(order.sn, true, res.code).then(res => {
            if (res.success) {
              Taro.requestPayment({
                timeStamp: res.data.timeStamp,
                nonceStr: res.data.nonceStr,
                package: res.data.package,
                signType: res.data.signType,
                paySign: res.data.paySign,
                success: function (res) {
                  that.getData(order.sn)
                  Taro.navigateTo({
                    url: `/pages/order/pages/TeamOrder?order_sn=${order.sn}`,
                  })
                },
                fail: function (res) { }
              })
            } else {
              Taro.showToast({
                icon: 'none',
                title: res.msg
              })
            }
          }).catch(err => {
            if (err.errorno == 'rebuy') {
              that.setState({
                isShowOvertime: true
              })
            } else {
              Taro.showToast({
                icon: 'none',
                title: err.msg
              })
            }
          })
        }
      }
    })
  }

  overtimeCancelButton() {
    this.setState({
      isShowOvertime: false,
    })
  }

  overtimeConfirmButton() {
    Taro.navigateTo({
      url: `/pages/index/project/index?id=${this.state.order.group.groupon.id}`,
    })
    this.setState({
      isShowOvertime: false,
    })
  }

  componentWillMount() {
    const order = JSON.parse(this.$router.params.params)
    if (order.sn) {
      this.getData(order.sn)
    } else {
      this.getData(order.order_sn)
    }
  }

  getData(sn) {
    getOrderDetail(sn).then((res) => {
      if (res.code == 200) {
        console.log(res.data)
        this.setState({
          order: res.data,
          networkType: false,
          loadingShow: false
        })
      }
    }).catch((err) => {
      console.log(err)
      var that = this
      wx.getNetworkType({
        success: function (res) {
          if (res.networkType == 'none') {
            that.setState({
              networkType: true
            })
          }
        }
      })
    })
  }

  _selectCancelReason(index) {
    var reasons = this.state.reasons
    reasons.forEach((item, _index) => {
      if (_index == index) {
        item.isSelected = true
      } else {
        item.isSelected = false
      }
    })
    this.setState({ reasons: reasons, selectedCancelReason: reasons[index].text })
  }

  _copy() {
    Taro.setClipboardData({
      data: this.state.order.sn,
      success: function (res) {
        Taro.getClipboardData({
          success: function (res) {
            console.log(res.data)
          }
        })
      }
    })
  }

  _editAddress() {
    const needBack = true
    Taro.navigateTo({
      url: `/pages/address/index?needBack=${needBack}`,
    })
  }

  toGroupsOrder = () => {
    Taro.navigateTo({
      url: `/pages/order/pages/TeamOrder?order_sn=${this.state.order.sn}`
    })
  }

  onRefresh = () => {
    this.getData()
  }

  _trackingLogistics() {
    const { order } = this.state
    if (order.freight_number) {
      Taro.navigateTo({
        url: `/pages/order/pages/TrackingLogistics?sn=${order.sn}`
      })
    } else {
      Taro.showToast({
        icon: 'none',
        title: '平台未发货'
      })
    }
  }

  _confirmReceived() {
    const { order } = this.state
    confirmOrder(order.sn).then((res) => {
      if (res.success) {
        this.getData(order.sn)
      }
    }).catch((err) => {
      console.log(err)
    })
    this.setState({ isShowReceive: false })
  }

  _onClose() {
    this.setState({ isShowAutoRefund: false, isShowDelete: false, isShowReceive: false, isShowRerefund: false, isShowReceiveAlert: false, isShowToService: false, isShowReapply: false, showRefund: false, isOvertimeRefund: false })
  }

  _confirm() {
    this._deleteOrder()
  }

  _showDelete() {
    this.setState({ isShowDelete: true })
  }

  _showRefundDetail() {
    let { order } = this.state
    let refund = order.refund
    Taro.navigateTo({
      url: `/pages/service/pages/afterServiceDetail?order_sn=${refund.order_sn}&refund_sn=${refund.refund_sn}`
    })
  }

  _showReceive() {
    const { order } = this.state
    if (order.refund && order.refund.status !== 40 && order.refund.status !== 100) {
      this.setState({ isShowReceiveAlert: true })
    } else if (order.refund && order.refund.status == 40) {
      this.setState({ isShowToService: true })
    } else {
      this.setState({ isShowReceive: true })
    }
  }

  onShareAppMessage(res) {

    if (res.from === 'button') {
    }
    let { order } = this.state
    let { group, product_info, user_id } = order
    let { groupon } = group

    return {
      title: product_info.name.substr(0, 32) + (product_info.name.length > 32 ? '...' : ''),
      // imageUrl: 'https://wx.iwanmeng.com/api/imgshare?g=' + groupon.id,
      // path: '/pages/index/project/index?id=' + groupon.id
      imageUrl: `https://wx.iwanmeng.com/api/imgshare?g=${groupon.id}&group_id=${group.id}&user_id=${user_id}`,
      path: `/pages/order/pages/TeamOrderShare?order_sn=${order.sn}`,
    }
  }

  _applyAfterSaleService() {
    const { order } = this.state
    const isRefunded = (order.refund_status != null) && (order.refund_status == REFUND_STATUS.STATUS_REFUNDED)
    if (order.group.groupon.can_refund) {
      if (order.can_refund) {
        if (order.refund) {
          if (isRefunded) {
            this.setState({ isShowReapply: true })
          } else {
            this.setState({ isShowRerefund: true })
          }
        } else {
          if (order.status == ORDER_STATUS.STATUS_BOUGHT) {
            Taro.navigateTo({
              url: `/pages/order/pages/ApplyingAfterSaleService?sn=${order.sn}&type=${REFUND_TYPE.TYPE_REFUND_ONLY}`
            })
          } else {
            Taro.navigateTo({
              url: `/pages/service/pages/afterServiceType?sn=${order.sn}`
            })
          }
        }
      } else {
        this.setState({
          isOvertimeRefund: true
        })
      }
    } else {
      this.setState({
        showRefund: true
      })
    }
  }

  _goToDetail() {
    const { order } = this.state

    Taro.navigateTo({
      url: `/pages/service/pages/afterServiceDetail?order_sn=${order.sn}&refund_sn=${order.refund.refund_sn}`
    })
    this._onClose()
  }

  toProductDetail() {
    const { order } = this.state
    var id = order.group.groupon.id

    Taro.navigateTo({
      url: `/pages/index/project/index?id=${id}`,
    })
  }

  _goToRefundDetail() {
    const { order } = this.state

    Taro.navigateTo({
      url: `/pages/service/pages/afterServiceDetail?order_sn=${order.sn}&refund_sn=${order.refund.refund_sn}&auto_refund={true}`
    })
  }

  render() {
    const { order, cnt, isShowAutoRefund, isShowDelete, isShowReceive, isShowRerefund, isShowReceiveAlert, isShowToService, loadingShow, isShowOvertime } = this.state
    let d = this.getTimeRemaining(order.remain_seconds - cnt);
    if (d.days <= 0) {
      d.days = 0
    }
    if (d.hours <= 0) {
      d.hours = 0
    }
    if (d.minutes <= 0) {
      d.minutes = 0
    }
    if (d.seconds <= 0) {
      d.seconds = 0
    }
    const isCreated = (order.status == ORDER_STATUS.STATUS_CREATED)
    const isCompleted = (order.status == ORDER_STATUS.STATUS_COMPLETED)
    const isCanceled = (order.status == ORDER_STATUS.STATUS_CANCELED)
    const isBought = (order.status == ORDER_STATUS.STATUS_BOUGHT)
    const isConfirmed = (order.status == ORDER_STATUS.STATUS_CONFIRM)
    const isDelivered = (order.status == ORDER_STATUS.STATUS_DELIVERED)
    const isShowGroupEntry = order.status == ORDER_STATUS.STATUS_BOUGHT || order.status == ORDER_STATUS.STATUS_CONFIRM || order.status == ORDER_STATUS.STATUS_DELIVERED
    const isShowRefund = order.refund != null && order.status != ORDER_STATUS.STATUS_FAILED
    const isClosed = (order.status == ORDER_STATUS.STATUS_CLOSED)
    const isAutoRefund = order.status == ORDER_STATUS.STATUS_FAILED
    const isRefunded = (order.refund_status != null) && (order.refund_status == REFUND_STATUS.STATUS_REFUNDED)
    var { consignee, consignee_phone, users, product_info } = order
    if (consignee == null) {
      consignee = ''
    }
    if (consignee_phone == null) {
      consignee_phone = ''
    }
    if (users == null) {
      users = []
    }

    if (product_info == null) {
      product_info = {
        price: 0
      }
    }


    let { group } = order
    var groupon
    if (group) {
      var { groupon } = group
    } else {
      let { price } = product_info
      groupon = {
        price
      }

    }

    return (
      <View className='container'>
        <AtFloatLayout className='wm-float-layout' isOpened={this.state.isShowCancelPanel} onClose={this._hideCancelPanel.bind(this)}>
          <View className='wm-container'>
            <View className='title-container'>
              <View className='left'>
                <Text>请选择取消订单理由</Text>
              </View>
              <View className='right' onClick={this._hideCancelPanel.bind(this)}>
                <Image className='close' src={require('../../../assets/images/product/close.png')}></Image>
              </View>
            </View>
            <View>
              {
                this.state.reasons.map((item, index) => {
                  return (
                    <View className='reason-container' onClick={this._selectCancelReason.bind(this, index)}>
                      <View>
                        <Text>{item.text}</Text>
                      </View>
                      <View>
                        {item.isSelected ? <Image className='tick' src={require('../../../assets/images/address/right.png')}></Image> : <View></View>}
                      </View>
                    </View>
                  )
                })
              }
            </View>
            <View className='actions'>
              <AtButton className='cancel' onClick={this._hideCancelPanel.bind(this)}><Text>我再想想</Text></AtButton>
              <AtButton className='confirm' onClick={this._confirmCancel.bind(this)}><Text>确定取消</Text></AtButton>
            </View>
          </View>
        </AtFloatLayout>
        <AtModal isOpened={isShowAutoRefund} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="cancel-order">
                <Text className="cancel-order-text">若拼团未成功，平台将自动于24小时内原路退款至微信钱包。</Text>
                <Button className="cancel-order-button" onClick={this._onClose.bind(this)}>知道了</Button>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        <AtModal isOpened={isShowDelete} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="delete">
                <Text className="delete-text">确认删除该订单？</Text>
                <View className="delete-button">
                  <Button className="cancel-button" onClick={this._onClose.bind(this)}>取消</Button>
                  <Button className="confirm-button" onClick={this._confirm.bind(this)}>删除</Button>
                </View>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        <AtModal isOpened={isShowReceive} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="receive">
                <Text className="receive-text">请确认您已收到商品</Text>
                <View className="receive-button">
                  <Button className="cancel-button" onClick={this._onClose.bind(this)}>取消</Button>
                  <Button className="confirm-button" onClick={this._confirmReceived.bind(this)}>确认收货</Button>
                </View>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        <AtModal isOpened={this.state.isShowOvertime} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="receive">
                <Text className="receive-text">很抱歉，该订单因超过限定支付时间已被关闭，请重新下单购买</Text>
                <View className="receive-button">
                  <Button className="cancel-button" onClick={this.overtimeCancelButton.bind(this)}>取消</Button>
                  <Button className="confirm-button" onClick={this.overtimeConfirmButton.bind(this)}>重新购买</Button>
                </View>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        <AtModal isOpened={isShowReceiveAlert} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="receive">
                <Text className="receive-text">售后申请处理中，暂无法使用确认收货功能</Text>
                <View className="receive-button">
                  <Button className="confirm-block-button" onClick={this._onClose.bind(this)}>知道了</Button>
                </View>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        <AtModal isOpened={isShowToService} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="receive">
                <Text className="receive-text">您已提交换货申请，请在售后详情内确认收货</Text>
                <View className="receive-button">
                  <Button className="cancel-button" onClick={this._onClose.bind(this)}>确认</Button>
                  <Button className="confirm-button" onClick={this._goToDetail.bind(this)}>查看售后详情</Button>
                </View>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        <AtModal isOpened={isShowRerefund} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="receive">
                <Text className="receive-text">您已提交过售后申请，是否查看当前售后进度详情</Text>
                <View className="receive-button">
                  <Button className="cancel-button" onClick={this._onClose.bind(this)}>取消</Button>
                  <Button className="confirm-button" onClick={this._goToDetail.bind(this)}>查看售后详情</Button>
                </View>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        <AtModal isOpened={this.state.isShowReapply} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="confirm">
                <Text className="confirm-text">你的售后处理已完毕，如有疑问请联系客服处理。</Text>
                <View className="confirm-button">
                  {/* <Button className="cancel-button" onClick={this._closeModal.bind(this)}>取消</Button> */}
                  <Button className="acknowledge" onClick={this._onClose.bind(this)}>知道了</Button>
                </View>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        <AtModal isOpened={this.state.showRefund} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="receive">
                <Text className="receive-text">很抱歉，因该商品为特价商品，无法为您提供退款服务，如有疑问请联系客服处理，请您见谅</Text>
                <View className="receive-button">
                  <Button className="confirm-block-button" onClick={this._onClose.bind(this)}>知道了</Button>
                </View>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        <AtModal isOpened={this.state.isOvertimeRefund} onClose={this._onClose.bind(this)}>
          <AtModalContent>
            <View style="width: 100%;">
              <View className="receive">
                <Text className="receive-text">很抱歉，该商品已超过售后退换时效，无法为您提供售后服务，如有疑问请联系客服处理。</Text>
                <View className="receive-button">
                  <Button className="confirm-block-button" onClick={this._onClose.bind(this)}>知道了</Button>
                </View>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
        {
          loadingShow ? <Loading></Loading> :
            <ScrollView className='main'>
              <View className='order-status'>
                <View className='top'>
                  <View className='left'>
                    <Text className='status-text'>{order.status_name}</Text>
                  </View>
                  {
                    isCreated || isConfirmed ?
                      (isCreated ? <View className='right'>
                        <Text className='small'>剩余</Text>
                        <Text className='big'>{d.minutes < 10 ? `0${d.minutes}` : d.minutes}</Text>
                        <Text className='small'>分</Text>
                        <Text className='big'>{d.seconds < 10 ? `0${d.seconds}` : d.seconds}</Text>
                        <Text className='small'>秒</Text>
                      </View> : <View className='right'>
                          <Text className='small'>剩余</Text>
                          <Text className='big'>{d.hours < 10 ? `0${d.hours}` : d.hours}</Text>
                          <Text className='small'>时</Text>
                          <Text className='big'>{d.minutes < 10 ? `0${d.minutes}` : d.minutes}</Text>
                          <Text className='small'>分</Text>
                          <Text className='big'>{d.seconds < 10 ? `0${d.seconds}` : d.seconds}</Text>
                          <Text className='small'>秒</Text>
                        </View>)
                      : null
                  }
                </View>
                <View className='bottom'>
                  <Text className='text-remainder'>{order.status_desc}</Text>
                </View>
              </View>
              <View className='abs'>
                {
                  isShowRefund ?
                    <View className='after-sale-service' onClick={this._goToDetail.bind(this)}>
                      <View className='left-container'>
                        <Text className='reason'>{order.refund ? order.refund.progress[0].content : ''}</Text>
                        <Text className='date'>{order.refund ? order.refund.progress[0].created_at : ''}</Text>
                      </View>
                      <View className='right-container'>
                        <Image src={require('../../../assets/images/product/arrow.png')}></Image>
                      </View>
                    </View>
                    : null
                }
                <View className='order-address'>
                  <View className='left-container'>
                    <View className='top'>
                      <View className='left'>
                        <Text>{consignee.length > 8 ? consignee.substring(0, 8) + '...' : consignee}</Text>
                      </View>
                      <View className='right'>
                        <Text>{consignee_phone ? consignee_phone : ''}</Text>
                      </View>
                    </View>
                    <View className='bottom'>
                      <Text>{order.address}</Text>
                    </View>
                  </View>
                  {
                    isCreated ?
                      <View className='right-container' onClick={this._editAddress.bind(this)}>
                        <Image className='edit' src={require('../../../assets/images/order/edit.png')}></Image>
                      </View>
                      : null
                  }
                  {/* {
                  isDelivered ?
                    <View className='right-container'>
                      <Image className='arrow' src={require('../../../assets/images/product/arrow.png')}></Image>
                    </View>
                    : null
                } */}
                </View>
                <View className='order-product-detail'>
                  <View className='top' onClick={this.toProductDetail.bind(this)}>
                    <View className='left'>
                      <Image className='order-product-picture' src={order.product_info.cover}>
                      </Image>
                    </View>
                    <View className='right'>
                      <View className='title'>
                        <Text>{order.product_info.name}</Text>
                      </View>
                      <View className='quantity'>
                        <Text>x1</Text>
                      </View>
                      <View className='price'>
                        <Text>￥{groupon.price}</Text>
                      </View>
                    </View>
                  </View>
                  <AtButton className='bottom' openType={'contact'}>
                    {/* <View className='customer-service-container'> */}
                    <Image className='customer-service' src={require('../../../assets/images/order/customer-service.png')}></Image>
                    {/* </View> */}
                    {/* <View> */}
                    <Text>联系客服</Text>
                    {/* </View> */}
                  </AtButton>
                  {
                    isShowGroupEntry || isAutoRefund || (isCompleted && !isRefunded) ?
                      <View className='person' onClick={this.toGroupsOrder.bind(this)}>
                        <View className='left'>
                          <Text>{order.status_note}</Text>
                        </View>
                        <View className='right'>
                          {
                            users.length == 1 || isAutoRefund ? <View className="avatars">
                              {
                                users.map((item, index) => {
                                  return (
                                    // <View className='avatar-container' style={`right: ${ index * 30 + 16} rpx`}>
                                    <View className='avatar-container'>
                                      <Image className='avatar' src={item.avatar}></Image>
                                    </View>
                                  )
                                })
                              }
                              <View className="avatar-container">
                                <Image className="avatar" src={require('../../../assets/images/order/empty-avatar.png')}></Image>
                              </View>
                            </View> : <View className='avatars'>
                                {
                                  users.map((item, index) => {
                                    return (
                                      // <View className='avatar-container' style={`right: ${ index * 30 + 16} rpx`}>
                                      <View className='avatar-container'>
                                        <Image className='avatar' src={item.avatar}></Image>
                                      </View>
                                    )
                                  })
                                }
                              </View>
                          }
                          <View className='arrow-container'>
                            <Image className='arrow' src={require('../../../assets/images/product/arrow.png')}></Image>
                          </View>
                        </View>
                      </View>
                      : null
                  }
                </View>
                <View className='order-detail'>
                  <View className='top-container'>
                    <View className='top'>
                      <View className='left'>
                        <View className='sn-container'>
                          <View className='hint'>
                            <Text>订单编号</Text>
                          </View>
                          <View className='content'>
                            <Text>{order.sn}</Text>
                          </View>
                        </View>
                        <View className='created-time-container'>
                          <View className='hint'>
                            <Text>下单时间</Text>
                          </View>
                          <View className='content'>
                            <Text>{order.created_at}</Text>
                          </View>
                        </View>
                      </View>
                      <View className='right'>
                        <AtButton className='copy' onClick={this._copy.bind(this)}>
                          <Text>复制</Text>
                        </AtButton>
                      </View>
                    </View>
                  </View>
                  <View className='bottom-container'>
                    <View className='bottom'>
                      <View className='price'>
                        <View className='hint'>
                          <Text>商品金额</Text>
                        </View>
                        <View className='content'>
                          <Text>￥{groupon.price}</Text>
                        </View>
                      </View>
                      <View className='freight'>
                        <View className='hint'>
                          <Text>运费</Text>
                        </View>
                        <View className='content'>
                          <Text>
                            +￥{order.freight_fee}
                          </Text>
                        </View>
                      </View>
                      <View className='pay-amount'>
                        <View>
                          <Text className='pay-amount-hint'>
                            实付金额：
                      </Text>
                        </View>
                        <View>
                          <Text className='pay-amount-content'>
                            ￥{(Math.round((parseFloat(groupon.price) + parseFloat(order.freight_fee)) * 100) / 100).toFixed(2)}
                          </Text>
                        </View>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
              <View className='footer'>
                <View className='footer-bar'>
                  <View className="actions">
                    {
                      isCreated || isConfirmed ?
                        <AtButton className='action1' onClick={this._showCancelPanel.bind(this)}>
                          <Text>取消订单</Text>
                        </AtButton>
                        : null
                    }
                    {
                      isConfirmed ?
                        <AtButton className='action2' openType={'share'}>
                          <Text>邀请好友拼团</Text>
                        </AtButton>
                        : null
                    }
                    {
                      isCreated ?
                        <AtButton className='action4' onClick={this._pay.bind(this)}>
                          <Text>去支付</Text>
                        </AtButton>
                        : null
                    }
                    {
                      isBought || isDelivered || isCompleted ?
                        <AtButton className='action1' onClick={this._applyAfterSaleService.bind(this)}>
                          <Text>申请售后</Text>
                        </AtButton>
                        : null
                    }
                    {
                      isDelivered || isCompleted ?
                        <AtButton className={classNames('action1', 'left')} onClick={this._trackingLogistics.bind(this)}>
                          <Text>追踪物流</Text>
                        </AtButton>
                        : null
                    }
                    {
                      isDelivered ?
                        <AtButton className='action3' onClick={this._showReceive.bind(this)}>
                          <Text>确认收货</Text>
                        </AtButton>
                        : null
                    }
                    {
                      isCanceled || isClosed ?
                        <AtButton className='action1' onClick={this._showDelete.bind(this)}>
                          <Text>删除订单</Text>
                        </AtButton>
                        : null
                    }
                    {/* {
                      isCompleted && !isRefunded ?
                        <AtButton className={classNames('action1', 'left')} onClick={this._showRefundDetail.bind(this)}>
                          <Text>售后详情</Text>
                        </AtButton>
                        : null
                    } */}
                    {/* {
                      isRefunded ?
                        <AtButton className='action1' openType={'contact'}>
                          <Text>拼团失败订单</Text>
                        </AtButton>
                        : null
                    } */}
                    {
                      isAutoRefund ?
                        <AtButton className='action1' onClick={this._goToRefundDetail.bind(this)}>
                          <Text>退款进度</Text>
                        </AtButton>
                        : null
                    }
                  </View>
                </View>
              </View>
            </ScrollView >
        }
      </View >
    )
  }
};