|
|
|
@ -1,318 +1,276 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="order-details"> |
|
|
|
<view class="order-details"> |
|
|
|
<!-- 给header上与data上加on为退款订单--> |
|
|
|
<!-- 给header上与data上加on为退款订单--> |
|
|
|
<div class="header bg-color-red acea-row row-middle" :class="refundOrder ? 'on' : ''"> |
|
|
|
<view class="header bg-color-red acea-row row-middle" :class="refundOrder ? 'on' : ''"> |
|
|
|
<div class="data" :class="refundOrder ? 'on' : ''"> |
|
|
|
<view class="data" :class="refundOrder ? 'on' : ''"> |
|
|
|
<div class="state">{{ orderInfo._status._msg }}</div> |
|
|
|
<view class="state">{{ orderInfo._status._msg }}</view> |
|
|
|
<div> |
|
|
|
<view> |
|
|
|
<data-format :data="orderInfo.addTime"></data-format> |
|
|
|
<data-format :data="orderInfo.addTime"></data-format> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<template v-if="!refundOrder"> |
|
|
|
<template v-if="!refundOrder"> |
|
|
|
<div class="nav"> |
|
|
|
<view class="nav"> |
|
|
|
<div class="navCon acea-row row-between-wrapper"> |
|
|
|
<view class="navCon acea-row row-between-wrapper"> |
|
|
|
<div :class="{ on: status.type === 0 || status.type === 9 }">待付款</div> |
|
|
|
<view :class="{ on: status.type === 0 || status.type === 9 }">待付款</view> |
|
|
|
<div :class="{ on: status.type === 1 }" v-if="orderInfo.shippingType === 2">待核销</div> |
|
|
|
<view :class="{ on: status.type === 1 }" v-if="orderInfo.shippingType === 2">待核销</view> |
|
|
|
<div :class="{ on: status.type === 1 }" v-else>待发货</div> |
|
|
|
<view :class="{ on: status.type === 1 }" v-else>待发货</view> |
|
|
|
<div :class="{ on: status.type === 2 }" v-if="orderInfo.shippingType === 1">待收货</div> |
|
|
|
<view :class="{ on: status.type === 2 }" v-if="orderInfo.shippingType === 1">待收货</view> |
|
|
|
<div :class="{ on: status.type === 3 }">待评价</div> |
|
|
|
<view :class="{ on: status.type === 3 }">待评价</view> |
|
|
|
<div :class="{ on: status.type === 4 }">已完成</div> |
|
|
|
<view :class="{ on: status.type === 4 }">已完成</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="progress acea-row row-between-wrapper"> |
|
|
|
<view class="progress acea-row row-between-wrapper"> |
|
|
|
<div |
|
|
|
<view class="iconfont" :class="[ |
|
|
|
class="iconfont" |
|
|
|
|
|
|
|
:class="[ |
|
|
|
|
|
|
|
status.type === 0 || status.type === 9 |
|
|
|
status.type === 0 || status.type === 9 |
|
|
|
? 'icon-webicon318' |
|
|
|
? 'icon-webicon318' |
|
|
|
: 'icon-yuandianxiao', |
|
|
|
: 'icon-yuandianxiao', |
|
|
|
status.type >= 0 ? 'font-color-red' : '' |
|
|
|
status.type >= 0 ? 'font-color-red' : '' |
|
|
|
]" |
|
|
|
]"></view> |
|
|
|
></div> |
|
|
|
<view class="line" :class="{ 'bg-color-red': status.type > 0 && status.type != 9 }"></view> |
|
|
|
<div class="line" :class="{ 'bg-color-red': status.type > 0 && status.type != 9 }"></div> |
|
|
|
<view class="iconfont" :class="[ |
|
|
|
<div |
|
|
|
|
|
|
|
class="iconfont" |
|
|
|
|
|
|
|
:class="[ |
|
|
|
|
|
|
|
status.type === 1 ? 'icon-webicon318' : 'icon-yuandianxiao', |
|
|
|
status.type === 1 ? 'icon-webicon318' : 'icon-yuandianxiao', |
|
|
|
status.type >= 1 && status.type != 6 && status.type != 9 |
|
|
|
status.type >= 1 && status.type != 6 && status.type != 9 |
|
|
|
? 'font-color-red' |
|
|
|
? 'font-color-red' |
|
|
|
: '' |
|
|
|
: '' |
|
|
|
]" |
|
|
|
]"></view> |
|
|
|
></div> |
|
|
|
<view class="line" :class="{ |
|
|
|
<div |
|
|
|
|
|
|
|
class="line" |
|
|
|
|
|
|
|
:class="{ |
|
|
|
|
|
|
|
'bg-color-red': |
|
|
|
'bg-color-red': |
|
|
|
status.type > 1 && status.type != 6 && status.type != 9 |
|
|
|
status.type > 1 && status.type != 6 && status.type != 9 |
|
|
|
}" |
|
|
|
}" |
|
|
|
v-if="orderInfo.shipping_type === 1" |
|
|
|
v-if="orderInfo.shipping_type === 1"></view> |
|
|
|
></div> |
|
|
|
<view class="iconfont" :class="[ |
|
|
|
<div |
|
|
|
|
|
|
|
class="iconfont" |
|
|
|
|
|
|
|
:class="[ |
|
|
|
|
|
|
|
status.type === 2 ? 'icon-webicon318' : 'icon-yuandianxiao', |
|
|
|
status.type === 2 ? 'icon-webicon318' : 'icon-yuandianxiao', |
|
|
|
status.type >= 2 && status.type != 6 && status.type != 9 |
|
|
|
status.type >= 2 && status.type != 6 && status.type != 9 |
|
|
|
? 'font-color-red' |
|
|
|
? 'font-color-red' |
|
|
|
: '' |
|
|
|
: '' |
|
|
|
]" |
|
|
|
]" |
|
|
|
v-if="orderInfo.shippingType === 1" |
|
|
|
v-if="orderInfo.shippingType === 1"></view> |
|
|
|
></div> |
|
|
|
<view class="line" :class="{ |
|
|
|
<div |
|
|
|
|
|
|
|
class="line" |
|
|
|
|
|
|
|
:class="{ |
|
|
|
|
|
|
|
'bg-color-red': |
|
|
|
'bg-color-red': |
|
|
|
status.type > 2 && status.type != 6 && status.type != 9 |
|
|
|
status.type > 2 && status.type != 6 && status.type != 9 |
|
|
|
}" |
|
|
|
}"></view> |
|
|
|
></div> |
|
|
|
<view class="iconfont" :class="[ |
|
|
|
<div |
|
|
|
|
|
|
|
class="iconfont" |
|
|
|
|
|
|
|
:class="[ |
|
|
|
|
|
|
|
status.type === 3 ? 'icon-webicon318' : 'icon-yuandianxiao', |
|
|
|
status.type === 3 ? 'icon-webicon318' : 'icon-yuandianxiao', |
|
|
|
status.type >= 3 && status.type != 6 && status.type != 9 |
|
|
|
status.type >= 3 && status.type != 6 && status.type != 9 |
|
|
|
? 'font-color-red' |
|
|
|
? 'font-color-red' |
|
|
|
: '' |
|
|
|
: '' |
|
|
|
]" |
|
|
|
]"></view> |
|
|
|
></div> |
|
|
|
<view class="line" :class="{ |
|
|
|
<div |
|
|
|
|
|
|
|
class="line" |
|
|
|
|
|
|
|
:class="{ |
|
|
|
|
|
|
|
'bg-color-red': |
|
|
|
'bg-color-red': |
|
|
|
status.type > 3 && status.type != 6 && status.type != 9 |
|
|
|
status.type > 3 && status.type != 6 && status.type != 9 |
|
|
|
}" |
|
|
|
}"></view> |
|
|
|
></div> |
|
|
|
<view class="iconfont" :class="[ |
|
|
|
<div |
|
|
|
|
|
|
|
class="iconfont" |
|
|
|
|
|
|
|
:class="[ |
|
|
|
|
|
|
|
status.type == 4 ? 'icon-webicon318' : 'icon-yuandianxiao', |
|
|
|
status.type == 4 ? 'icon-webicon318' : 'icon-yuandianxiao', |
|
|
|
status.type >= 4 && status.type != 6 && status.type != 9 |
|
|
|
status.type >= 4 && status.type != 6 && status.type != 9 |
|
|
|
? 'font-color-red' |
|
|
|
? 'font-color-red' |
|
|
|
: '' |
|
|
|
: '' |
|
|
|
]" |
|
|
|
]"></view> |
|
|
|
></div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
<!--<view--> |
|
|
|
<!--<div--> |
|
|
|
|
|
|
|
<!--class="writeOff"--> |
|
|
|
<!--class="writeOff"--> |
|
|
|
<!--v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"--> |
|
|
|
<!--v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"--> |
|
|
|
<!-->--> |
|
|
|
<!-->--> |
|
|
|
<!--<div class="title">核销信息</div>--> |
|
|
|
<!--<view class="title">核销信息</view>--> |
|
|
|
<!--<div class="grayBg">--> |
|
|
|
<!--<view class="grayBg">--> |
|
|
|
<!--<div class="pictrue"><img :src="orderInfo.code" /></div>--> |
|
|
|
<!--<view class="pictrue"><image :src="orderInfo.code" /></view>--> |
|
|
|
<!--</div>--> |
|
|
|
<!--</view>--> |
|
|
|
<!--<div class="gear"><img :src="$VUE_APP_RESOURCES_URL+'/images/writeOff.jpg'" /></div>--> |
|
|
|
<!--<view class="gear"><image :src="$VUE_APP_RESOURCES_URL+'/images/writeOff.jpg'" /></view>--> |
|
|
|
<!--<div class="num">{{ orderInfo._verify_code }}</div>--> |
|
|
|
<!--<view class="num">{{ orderInfo._verify_code }}</view>--> |
|
|
|
<!--<!--<!--<!--<span class="rules">--> |
|
|
|
<!--<!--<!--<!--<text class="rules">--> |
|
|
|
<!--<!--<!--<span class="item">--> |
|
|
|
<!--<!--<!--<text class="item">--> |
|
|
|
<!--<!--<span class="rulesTitle acea-row row-middle">--> |
|
|
|
<!--<!--<text class="rulesTitle acea-row row-middle">--> |
|
|
|
<!--<span class="iconfont icon-shijian"></span>核销时间--> |
|
|
|
<!--<text class="iconfont icon-shijian"></text>核销时间--> |
|
|
|
<!--</!--<span>--> |
|
|
|
<!--</!--<text>--> |
|
|
|
<!--<div class="info">--> |
|
|
|
<!--<view class="info">--> |
|
|
|
<!--{{ system_store._valid_time--> |
|
|
|
<!--{{ system_store._valid_time--> |
|
|
|
<!--}}<span class="time">{{ system_store.day_time }}</span>--> |
|
|
|
<!--}}<text class="time">{{ system_store.day_time }}</text>--> |
|
|
|
<!--</div>--> |
|
|
|
<!--</view>--> |
|
|
|
<!--</!--<!--<span>--> |
|
|
|
<!--</!--<!--<text>--> |
|
|
|
<!--<div class="item">--> |
|
|
|
<!--<view class="item">--> |
|
|
|
<!--<div class="rulesTitle acea-row row-middle">--> |
|
|
|
<!--<view class="rulesTitle acea-row row-middle">--> |
|
|
|
<!--<span class="iconfont icon-shuoming1"></span>使用说明--> |
|
|
|
<!--<text class="iconfont icon-shuoming1"></text>使用说明--> |
|
|
|
<!--</div>--> |
|
|
|
<!--</view>--> |
|
|
|
<!--<div class="info">可将二维码出示给店员扫描或提供数字核销码</div>--> |
|
|
|
<!--<view class="info">可将二维码出示给店员扫描或提供数字核销码</view>--> |
|
|
|
<!--</div>--> |
|
|
|
<!--</view>--> |
|
|
|
<!--</!--<!--<!--<span>--> |
|
|
|
<!--</!--<!--<!--<text>--> |
|
|
|
<!--</!--<!--<!--<!--<span>--> |
|
|
|
<!--</!--<!--<!--<!--<text>--> |
|
|
|
<!--<div--> |
|
|
|
<!--<view--> |
|
|
|
<!--class="map acea-row row-between-wrapper"--> |
|
|
|
<!--class="map acea-row row-between-wrapper"--> |
|
|
|
<!--v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"--> |
|
|
|
<!--v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"--> |
|
|
|
<!-->--> |
|
|
|
<!-->--> |
|
|
|
<!--<div>自提地址信息</div>--> |
|
|
|
<!--<view>自提地址信息</view>--> |
|
|
|
<!--<div--> |
|
|
|
<!--<view--> |
|
|
|
<!--class="place cart-color acea-row row-center-wrapper"--> |
|
|
|
<!--class="place cart-color acea-row row-center-wrapper"--> |
|
|
|
<!--@click="showChang"--> |
|
|
|
<!--@click="showChang"--> |
|
|
|
<!-->--> |
|
|
|
<!-->--> |
|
|
|
<!--<span class="iconfont icon-weizhi"></span>查看位置--> |
|
|
|
<!--<text class="iconfont icon-weizhi"></text>查看位置--> |
|
|
|
<!--</div>--> |
|
|
|
<!--</view>--> |
|
|
|
<!--</div>--> |
|
|
|
<!--</view>--> |
|
|
|
<div class="address" v-if="orderInfo.shippingType === 1"> |
|
|
|
<view class="address" v-if="orderInfo.shippingType === 1"> |
|
|
|
<div class="name"> |
|
|
|
<view class="name"> |
|
|
|
{{ orderInfo.realName |
|
|
|
{{ orderInfo.realName |
|
|
|
}} |
|
|
|
}} |
|
|
|
<span class="phone">{{ orderInfo.userPhone }}</span> |
|
|
|
<text class="phone">{{ orderInfo.userPhone }}</text> |
|
|
|
<span class="iconfont icon-tonghua font-color-red"></span> |
|
|
|
<text class="iconfont icon-tonghua font-color-red"></text> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div>{{ orderInfo.userAddress }}</div> |
|
|
|
<view>{{ orderInfo.userAddress }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<!--<div class="address" v-else>--> |
|
|
|
<!--<view class="address" v-else>--> |
|
|
|
<!--<div class="name">--> |
|
|
|
<!--<view class="name">--> |
|
|
|
<!--{{ system_store.name--> |
|
|
|
<!--{{ system_store.name--> |
|
|
|
<!--}}<span class="phone">{{ system_store.phone }}</span>--> |
|
|
|
<!--}}<text class="phone">{{ system_store.phone }}</text>--> |
|
|
|
<!--<a--> |
|
|
|
<!--<a--> |
|
|
|
<!--class="iconfont icon-tonghua font-color-red"--> |
|
|
|
<!--class="iconfont icon-tonghua font-color-red"--> |
|
|
|
<!--:href="'tel:' + system_store.phone"--> |
|
|
|
<!--:href="'tel:' + system_store.phone"--> |
|
|
|
<!--></a>--> |
|
|
|
<!--></a>--> |
|
|
|
<!--</div>--> |
|
|
|
<!--</view>--> |
|
|
|
<!--<div>{{ system_store._detailed_address }}</div>--> |
|
|
|
<!--<view>{{ system_store._detailed_address }}</view>--> |
|
|
|
<!--</div>--> |
|
|
|
<!--</view>--> |
|
|
|
<div class="line" v-if="orderInfo.shippingType === 1"> |
|
|
|
<view class="line" v-if="orderInfo.shippingType === 1"> |
|
|
|
<img :src="$VUE_APP_RESOURCES_URL+'/images/line.jpg'" /> |
|
|
|
<image :src="$VUE_APP_RESOURCES_URL+'/images/line.jpg'" /> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []"></OrderGoods> |
|
|
|
<OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []"></OrderGoods> |
|
|
|
<div class="wrapper"> |
|
|
|
<view class="wrapper"> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>订单编号：</div> |
|
|
|
<view>订单编号：</view> |
|
|
|
<div class="conter acea-row row-middle row-right"> |
|
|
|
<view class="conter acea-row row-middle row-right"> |
|
|
|
{{ orderInfo.orderId |
|
|
|
{{ orderInfo.orderId |
|
|
|
}} |
|
|
|
}} |
|
|
|
<span |
|
|
|
<text class="copy copy-data" @click="copyClipboard(orderInfo.orderId)">复制</text> |
|
|
|
class="copy copy-data" |
|
|
|
</view> |
|
|
|
@click="copyClipboard(orderInfo.orderId)" |
|
|
|
</view> |
|
|
|
>复制</span> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
</div> |
|
|
|
<view>下单时间：</view> |
|
|
|
</div> |
|
|
|
<view class="conter"> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
|
|
|
|
<div>下单时间：</div> |
|
|
|
|
|
|
|
<div class="conter"> |
|
|
|
|
|
|
|
<data-format :data="orderInfo.addTime"></data-format> |
|
|
|
<data-format :data="orderInfo.addTime"></data-format> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>订单类型：</div> |
|
|
|
<view>订单类型：</view> |
|
|
|
<div class="conter">{{ orderTypeName }}</div> |
|
|
|
<view class="conter">{{ orderTypeName }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>支付状态：</div> |
|
|
|
<view>支付状态：</view> |
|
|
|
<div class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</div> |
|
|
|
<view class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>支付方式：</div> |
|
|
|
<view>支付方式：</view> |
|
|
|
<div class="conter">{{ orderInfo._status._payType }}</div> |
|
|
|
<view class="conter">{{ orderInfo._status._payType }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between" v-if="orderInfo.mark"> |
|
|
|
<view class="item acea-row row-between" v-if="orderInfo.mark"> |
|
|
|
<div>买家留言：</div> |
|
|
|
<view>买家留言：</view> |
|
|
|
<div class="conter">{{ orderInfo.mark }}</div> |
|
|
|
<view class="conter">{{ orderInfo.mark }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<div v-if="orderInfo.status != 0"> |
|
|
|
<view v-if="orderInfo.status != 0"> |
|
|
|
<div class="wrapper" v-if="orderInfo.deliveryType === 'express'"> |
|
|
|
<view class="wrapper" v-if="orderInfo.deliveryType === 'express'"> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>配送方式：</div> |
|
|
|
<view>配送方式：</view> |
|
|
|
<div class="conter">发货</div> |
|
|
|
<view class="conter">发货</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>快递公司：</div> |
|
|
|
<view>快递公司：</view> |
|
|
|
<div class="conter">{{ orderInfo.deliveryName || "" }}</div> |
|
|
|
<view class="conter">{{ orderInfo.deliveryName || "" }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>快递号：</div> |
|
|
|
<view>快递号：</view> |
|
|
|
<div class="conter">{{ orderInfo.deliveryId || "" }}</div> |
|
|
|
<view class="conter">{{ orderInfo.deliveryId || "" }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<div class="wrapper" v-else> |
|
|
|
<view class="wrapper" v-else> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>配送方式：</div> |
|
|
|
<view>配送方式：</view> |
|
|
|
<div class="conter">送货</div> |
|
|
|
<view class="conter">送货</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>配送人：</div> |
|
|
|
<view>配送人：</view> |
|
|
|
<div class="conter">{{ orderInfo.deliveryName || "" }}</div> |
|
|
|
<view class="conter">{{ orderInfo.deliveryName || "" }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>配送电话：</div> |
|
|
|
<view>配送电话：</view> |
|
|
|
<div class="conter acea-row row-middle row-right"> |
|
|
|
<view class="conter acea-row row-middle row-right"> |
|
|
|
{{ orderInfo.deliveryId || "" }} |
|
|
|
{{ orderInfo.deliveryId || "" }} |
|
|
|
<span class="copy">拨打</span> |
|
|
|
<text class="copy">拨打</text> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<!-- 退款订单详情 --> |
|
|
|
<!-- 退款订单详情 --> |
|
|
|
<div class="wrapper" v-if="refundOrder"> |
|
|
|
<view class="wrapper" v-if="refundOrder"> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>收货人：</div> |
|
|
|
<view>收货人：</view> |
|
|
|
<div class="conter">{{ orderInfo.realName }}</div> |
|
|
|
<view class="conter">{{ orderInfo.realName }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>联系电话：</div> |
|
|
|
<view>联系电话：</view> |
|
|
|
<div class="conter">{{ orderInfo.userPhone }}</div> |
|
|
|
<view class="conter">{{ orderInfo.userPhone }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>收货地址：</div> |
|
|
|
<view>收货地址：</view> |
|
|
|
<div class="conter">{{ orderInfo.userAddress }}</div> |
|
|
|
<view class="conter">{{ orderInfo.userAddress }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="wrapper"> |
|
|
|
<view class="wrapper"> |
|
|
|
<div class="item acea-row row-between"> |
|
|
|
<view class="item acea-row row-between"> |
|
|
|
<div>支付金额：</div> |
|
|
|
<view>支付金额：</view> |
|
|
|
<div class="conter">￥{{ orderInfo.totalPrice }}</div> |
|
|
|
<view class="conter">￥{{ orderInfo.totalPrice }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between" v-if="orderInfo.couponPrice > 0"> |
|
|
|
<view class="item acea-row row-between" v-if="orderInfo.couponPrice > 0"> |
|
|
|
<div>优惠券抵扣：</div> |
|
|
|
<view>优惠券抵扣：</view> |
|
|
|
<div class="conter">-￥{{ orderInfo.couponPrice }}</div> |
|
|
|
<view class="conter">-￥{{ orderInfo.couponPrice }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between" v-if="orderInfo.useIntegral > 0"> |
|
|
|
<view class="item acea-row row-between" v-if="orderInfo.useIntegral > 0"> |
|
|
|
<div>积分抵扣：</div> |
|
|
|
<view>积分抵扣：</view> |
|
|
|
<div class="conter">-￥{{ orderInfo.deductionPrice }}</div> |
|
|
|
<view class="conter">-￥{{ orderInfo.deductionPrice }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="item acea-row row-between" v-if="orderInfo.payPostage > 0"> |
|
|
|
<view class="item acea-row row-between" v-if="orderInfo.payPostage > 0"> |
|
|
|
<div>运费：</div> |
|
|
|
<view>运费：</view> |
|
|
|
<div class="conter">￥{{ orderInfo.payPostage }}</div> |
|
|
|
<view class="conter">￥{{ orderInfo.payPostage }}</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div class="actualPay acea-row row-right"> |
|
|
|
<view class="actualPay acea-row row-right"> |
|
|
|
实付款： |
|
|
|
实付款： |
|
|
|
<span class="money font-color-red">￥{{ orderInfo.payPrice }}</span> |
|
|
|
<text class="money font-color-red">￥{{ orderInfo.payPrice }}</text> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<div style="height:100rpx;" v-if="!refundOrder && offlineStatus"></div> |
|
|
|
<view style="height:100rpx;" v-if="!refundOrder && offlineStatus"></view> |
|
|
|
<div class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus"> |
|
|
|
<view class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus"> |
|
|
|
<template v-if="status.type == 0"> |
|
|
|
<template v-if="status.type == 0"> |
|
|
|
<div class="bnt cancel" @click="cancelOrder">取消订单</div> |
|
|
|
<view class="bnt cancel" @click="cancelOrder">取消订单</view> |
|
|
|
<div class="bnt bg-color-red" @click="pay = true">立即付款</div> |
|
|
|
<view class="bnt bg-color-red" @click="pay = true">立即付款</view> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-if="status.type == 1"> |
|
|
|
<template v-if="status.type == 1"> |
|
|
|
<div class="bnt cancel" @click="goGoodsReturn(orderInfo)">申请退款</div> |
|
|
|
<view class="bnt cancel" @click="goGoodsReturn(orderInfo)">申请退款</view> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-if="status.type == 2"> |
|
|
|
<template v-if="status.type == 2"> |
|
|
|
<div |
|
|
|
<view class="bnt default" @click=" |
|
|
|
class="bnt default" |
|
|
|
|
|
|
|
@click=" |
|
|
|
|
|
|
|
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }}) |
|
|
|
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }}) |
|
|
|
" |
|
|
|
">查看物流</view> |
|
|
|
>查看物流</div> |
|
|
|
<view class="bnt bg-color-red" @click="takeOrder">确认收货</view> |
|
|
|
<div class="bnt bg-color-red" @click="takeOrder">确认收货</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-if="status.type == 3 && orderInfo.deliveryType == 'express'"> |
|
|
|
<template v-if="status.type == 3 && orderInfo.deliveryType == 'express'"> |
|
|
|
<div |
|
|
|
<view class="bnt default" @click=" |
|
|
|
class="bnt default" |
|
|
|
|
|
|
|
@click=" |
|
|
|
|
|
|
|
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }}) |
|
|
|
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }}) |
|
|
|
" |
|
|
|
">查看物流</view> |
|
|
|
>查看物流</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-if="status.type == 4"> |
|
|
|
<template v-if="status.type == 4"> |
|
|
|
<div class="bnt cancel" @click="delOrder">删除订单</div> |
|
|
|
<view class="bnt cancel" @click="delOrder">删除订单</view> |
|
|
|
<div |
|
|
|
<view class="bnt default" @click=" |
|
|
|
class="bnt default" |
|
|
|
|
|
|
|
@click=" |
|
|
|
|
|
|
|
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }}) |
|
|
|
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }}) |
|
|
|
" |
|
|
|
">查看物流</view> |
|
|
|
>查看物流</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-if="status.type == 6"> |
|
|
|
<template v-if="status.type == 6"> |
|
|
|
<div class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</div> |
|
|
|
<view class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</view> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment> |
|
|
|
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment> |
|
|
|
<div class="geoPage" v-if="mapShow"> |
|
|
|
<view class="geoPage" v-if="mapShow"> |
|
|
|
<iframe |
|
|
|
<iframe width="100%" height="100%" frameborder="0" scrolling="no" :src="'https://apis.map.qq.com/uri/v1/geocoder?coord=' + system_store.latitude + ',' +system_store.longitude +'&referer=' +mapKey"></iframe> |
|
|
|
width="100%" |
|
|
|
</view> |
|
|
|
height="100%" |
|
|
|
</view> |
|
|
|
frameborder="0" |
|
|
|
|
|
|
|
scrolling="no" |
|
|
|
|
|
|
|
:src="'https://apis.map.qq.com/uri/v1/geocoder?coord=' + system_store.latitude + ',' +system_store.longitude +'&referer=' +mapKey" |
|
|
|
|
|
|
|
></iframe> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
@ -320,13 +278,17 @@ export default { |
|
|
|
goGoodsReturn(orderInfo) { |
|
|
|
goGoodsReturn(orderInfo) { |
|
|
|
this.$yrouter.push({ |
|
|
|
this.$yrouter.push({ |
|
|
|
path: "/pages/order/GoodsReturn/index", |
|
|
|
path: "/pages/order/GoodsReturn/index", |
|
|
|
query: { id: orderInfo.orderId } |
|
|
|
query: { |
|
|
|
|
|
|
|
id: orderInfo.orderId |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
goGroupRule(orderInfo) { |
|
|
|
goGroupRule(orderInfo) { |
|
|
|
this.$yrouter.push({ |
|
|
|
this.$yrouter.push({ |
|
|
|
path: "/pages/activity/GroupRule/index", |
|
|
|
path: "/pages/activity/GroupRule/index", |
|
|
|
query: { id: orderInfo.pinkId } |
|
|
|
query: { |
|
|
|
|
|
|
|
id: orderInfo.pinkId |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -340,11 +302,13 @@ export default { |
|
|
|
top: 0; |
|
|
|
top: 0; |
|
|
|
z-index: 10000; |
|
|
|
z-index: 10000; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff { |
|
|
|
.order-details .writeOff { |
|
|
|
background-color: #fff; |
|
|
|
background-color: #fff; |
|
|
|
margin-top: 0.13rem; |
|
|
|
margin-top: 0.13rem; |
|
|
|
padding-bottom: 0.3rem; |
|
|
|
padding-bottom: 0.3rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .title { |
|
|
|
.order-details .writeOff .title { |
|
|
|
font-size: 0.3rem; |
|
|
|
font-size: 0.3rem; |
|
|
|
color: #282828; |
|
|
|
color: #282828; |
|
|
|
@ -353,6 +317,7 @@ export default { |
|
|
|
padding: 0 0.3rem; |
|
|
|
padding: 0 0.3rem; |
|
|
|
line-height: 0.87rem; |
|
|
|
line-height: 0.87rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .grayBg { |
|
|
|
.order-details .writeOff .grayBg { |
|
|
|
background-color: #f2f5f7; |
|
|
|
background-color: #f2f5f7; |
|
|
|
width: 5.9rem; |
|
|
|
width: 5.9rem; |
|
|
|
@ -361,26 +326,31 @@ export default { |
|
|
|
margin: 0.5rem auto 0 auto; |
|
|
|
margin: 0.5rem auto 0 auto; |
|
|
|
padding-top: 0.55rem; |
|
|
|
padding-top: 0.55rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .grayBg .pictrue { |
|
|
|
.order-details .writeOff .grayBg .pictrue { |
|
|
|
width: 2.9rem; |
|
|
|
width: 2.9rem; |
|
|
|
height: 2.9rem; |
|
|
|
height: 2.9rem; |
|
|
|
margin: 0 auto; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.order-details .writeOff .grayBg .pictrue img { |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .grayBg .pictrue image { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
display: block; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .gear { |
|
|
|
.order-details .writeOff .gear { |
|
|
|
width: 5.9rem; |
|
|
|
width: 5.9rem; |
|
|
|
height: 0.3rem; |
|
|
|
height: 0.3rem; |
|
|
|
margin: 0 auto; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.order-details .writeOff .gear img { |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .gear image { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
display: block; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .num { |
|
|
|
.order-details .writeOff .num { |
|
|
|
background-color: #f0c34c; |
|
|
|
background-color: #f0c34c; |
|
|
|
width: 5.9rem; |
|
|
|
width: 5.9rem; |
|
|
|
@ -392,32 +362,39 @@ export default { |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
padding-top: 0.04rem; |
|
|
|
padding-top: 0.04rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .rules { |
|
|
|
.order-details .writeOff .rules { |
|
|
|
margin: 0.46rem 0.3rem 0 0.3rem; |
|
|
|
margin: 0.46rem 0.3rem 0 0.3rem; |
|
|
|
border-top: 0.01rem solid #f0f0f0; |
|
|
|
border-top: 0.01rem solid #f0f0f0; |
|
|
|
padding-top: 0.1rem; |
|
|
|
padding-top: 0.1rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .rules .item { |
|
|
|
.order-details .writeOff .rules .item { |
|
|
|
margin-top: 0.15rem; |
|
|
|
margin-top: 0.15rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .rules .item .rulesTitle { |
|
|
|
.order-details .writeOff .rules .item .rulesTitle { |
|
|
|
font-size: 0.28rem; |
|
|
|
font-size: 0.28rem; |
|
|
|
color: #282828; |
|
|
|
color: #282828; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .rules .item .rulesTitle .iconfont { |
|
|
|
.order-details .writeOff .rules .item .rulesTitle .iconfont { |
|
|
|
font-size: 0.3rem; |
|
|
|
font-size: 0.3rem; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
margin-right: 0.08rem; |
|
|
|
margin-right: 0.08rem; |
|
|
|
margin-top: 0.05rem; |
|
|
|
margin-top: 0.05rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .rules .item .info { |
|
|
|
.order-details .writeOff .rules .item .info { |
|
|
|
font-size: 0.28rem; |
|
|
|
font-size: 0.28rem; |
|
|
|
color: #999; |
|
|
|
color: #999; |
|
|
|
margin-top: 0.05rem; |
|
|
|
margin-top: 0.05rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .writeOff .rules .item .info .time { |
|
|
|
.order-details .writeOff .rules .item .info .time { |
|
|
|
margin-left: 0.2rem; |
|
|
|
margin-left: 0.2rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .map { |
|
|
|
.order-details .map { |
|
|
|
height: 0.86rem; |
|
|
|
height: 0.86rem; |
|
|
|
font-size: 0.3rem; |
|
|
|
font-size: 0.3rem; |
|
|
|
@ -428,6 +405,7 @@ export default { |
|
|
|
background-color: #fff; |
|
|
|
background-color: #fff; |
|
|
|
padding: 0 0.3rem; |
|
|
|
padding: 0 0.3rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .map .place { |
|
|
|
.order-details .map .place { |
|
|
|
font-size: 0.26rem; |
|
|
|
font-size: 0.26rem; |
|
|
|
width: 1.76rem; |
|
|
|
width: 1.76rem; |
|
|
|
@ -436,12 +414,14 @@ export default { |
|
|
|
line-height: 0.5rem; |
|
|
|
line-height: 0.5rem; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .map .place .iconfont { |
|
|
|
.order-details .map .place .iconfont { |
|
|
|
font-size: 0.27rem; |
|
|
|
font-size: 0.27rem; |
|
|
|
height: 0.27rem; |
|
|
|
height: 0.27rem; |
|
|
|
line-height: 0.27rem; |
|
|
|
line-height: 0.27rem; |
|
|
|
margin: 0.02rem 0.03rem 0 0; |
|
|
|
margin: 0.02rem 0.03rem 0 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.order-details .address .name .iconfont { |
|
|
|
.order-details .address .name .iconfont { |
|
|
|
font-size: 0.34rem; |
|
|
|
font-size: 0.34rem; |
|
|
|
margin-left: 0.1rem; |
|
|
|
margin-left: 0.1rem; |
|
|
|
@ -449,11 +429,18 @@ export default { |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import OrderGoods from "@/components/OrderGoods"; |
|
|
|
import OrderGoods from "@/components/OrderGoods"; |
|
|
|
import { orderDetail } from "@/api/order"; |
|
|
|
import { |
|
|
|
|
|
|
|
orderDetail |
|
|
|
|
|
|
|
} from "@/api/order"; |
|
|
|
import Payment from "@/components/Payment"; |
|
|
|
import Payment from "@/components/Payment"; |
|
|
|
import DataFormat from "@/components/DataFormat"; |
|
|
|
import DataFormat from "@/components/DataFormat"; |
|
|
|
import { isWeixin, copyClipboard } from "@/utils"; |
|
|
|
import { |
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
isWeixin, |
|
|
|
|
|
|
|
copyClipboard |
|
|
|
|
|
|
|
} from "@/utils"; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
mapGetters |
|
|
|
|
|
|
|
} from "vuex"; |
|
|
|
import { |
|
|
|
import { |
|
|
|
cancelOrderHandle, |
|
|
|
cancelOrderHandle, |
|
|
|
takeOrderHandle, |
|
|
|
takeOrderHandle, |
|
|
|
@ -526,9 +513,12 @@ export default { |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (!this.mapKey) |
|
|
|
if (!this.mapKey) |
|
|
|
return this.$dialog.error( |
|
|
|
uni.showToast({ |
|
|
|
"暂无法使用查看地图，请配置您的腾讯地图key" |
|
|
|
title: "暂无法使用查看地图，请配置您的腾讯地图key", |
|
|
|
); |
|
|
|
icon: 'none', |
|
|
|
|
|
|
|
duration: 2000 |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return |
|
|
|
this.mapShow = true; |
|
|
|
this.mapShow = true; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -536,7 +526,9 @@ export default { |
|
|
|
const history = this.app.history, |
|
|
|
const history = this.app.history, |
|
|
|
last = history[history.length - 1] || {}; |
|
|
|
last = history[history.length - 1] || {}; |
|
|
|
if (last.name === "MyOrder") return this.$yrouter.back(); |
|
|
|
if (last.name === "MyOrder") return this.$yrouter.back(); |
|
|
|
else return this.$yrouter.replace({ path: "/order/list/" }); |
|
|
|
else return this.$yrouter.replace({ |
|
|
|
|
|
|
|
path: "/order/list/" |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
cancelOrder() { |
|
|
|
cancelOrder() { |
|
|
|
cancelOrderHandle(this.orderInfo.orderId) |
|
|
|
cancelOrderHandle(this.orderInfo.orderId) |
|
|
|
@ -566,15 +558,17 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
getOrderStatus: function() { |
|
|
|
getOrderStatus: function() { |
|
|
|
let orderInfo = this.orderInfo || {}, |
|
|
|
let orderInfo = this.orderInfo || {}, |
|
|
|
_status = orderInfo._status || { _type: 0 }, |
|
|
|
_status = orderInfo._status || { |
|
|
|
|
|
|
|
_type: 0 |
|
|
|
|
|
|
|
}, |
|
|
|
status = {}; |
|
|
|
status = {}; |
|
|
|
let type = parseInt(_status._type), |
|
|
|
let type = parseInt(_status._type), |
|
|
|
delivery_type = orderInfo.deliveryType, |
|
|
|
delivery_type = orderInfo.deliveryType, |
|
|
|
seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0, |
|
|
|
seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0, |
|
|
|
bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0, |
|
|
|
bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0, |
|
|
|
combination_id = orderInfo.combinationId |
|
|
|
combination_id = orderInfo.combinationId ? |
|
|
|
? parseInt(orderInfo.combinationId) |
|
|
|
parseInt(orderInfo.combinationId) : |
|
|
|
: 0; |
|
|
|
0; |
|
|
|
status = { |
|
|
|
status = { |
|
|
|
type: type, |
|
|
|
type: type, |
|
|
|
class_status: 0 |
|
|
|
class_status: 0 |
|
|
|
@ -602,7 +596,14 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
getDetail() { |
|
|
|
getDetail() { |
|
|
|
const id = this.id; |
|
|
|
const id = this.id; |
|
|
|
if (!id) return this.$dialog.error("订单不存在"); |
|
|
|
if (!id) { |
|
|
|
|
|
|
|
uni.showToast({ |
|
|
|
|
|
|
|
title: "订单不存在", |
|
|
|
|
|
|
|
icon: 'none', |
|
|
|
|
|
|
|
duration: 2000 |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
} |
|
|
|
orderDetail(id) |
|
|
|
orderDetail(id) |
|
|
|
.then(res => { |
|
|
|
.then(res => { |
|
|
|
this.orderInfo = res.data; |
|
|
|
this.orderInfo = res.data; |
|
|
|
|
gaoxs
5 years ago