Created
May 8, 2020 03:57
-
-
Save caingougou/f97c8252fec9abf80b85f9b2f0f25961 to your computer and use it in GitHub Desktop.
OrderDetail.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 > | |
) | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment