java-mall-app/member/order/detail.vue
2025-10-10 14:32:19 +08:00

2844 lines
82 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page page-order-detail-container">
<uni-nav-bar
:fixed="true"
:border="false"
:left-width="'400rpx'"
:statusBar="true"
:height="'34px'"
>
<block slot="left">
<view class="left-block" @click="handerSkip">
<image
style="
width: 11px;
height: 18px;
vertical-align: middle;
margin-left: 6px;
"
lazy-load
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAA2CAYAAABJN/BMAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIaADAAQAAAABAAAANgAAAADEgMuSAAAF8ElEQVRYCc2Ya2hcVRDHk91sHo3mTR5rbJrnapsYTKIfWmMSapWKICJCoeCHfgqCKGh9VFRE1FiFopQYEbRYW1SsobVfpFahjRoxEYvGmDQJeZAHTbJ5rtnNY9ffhNzl3JtNzN3cBA8Md86ce2b+Z2bOnHNvRMT/oNm3GUNkXl7ezvj4+Pnp6elFzbZNY7bjWVBQsBs756Kjo4+q9rbLEzY8UBwIBC5iXIDUJCcnBwDT4vF4FrYDhC0/P78qMjLyE4wXKB4oi42NbXe73e1bHo7CwsI78EA9dJsCIAJQP8fExDQhC0SqAxbzNnKgVEIAORXdC/CXvF7vY0NDQ/+IfKs8YcMD+/1+/xchAHyJ7IgGQEBsiSdIwrvQfRbKV20Qgkb6td3d3Td4BltUkLOGseOBiqWlpQuoS1dUzsNfIBEPt7W1Ca9rVobDjgceIATiASOAz9iOtaEACBrLwsE23Eusz6Azx6D3bFxc3JMAcIvBUM0KT9iLioruAcA3GNgFaQvzkQOny8vLH18PgIDSJggfTrOzDR8iBO8zeaeiwAf/8eLi4kv9/f0Tijwku6mKCYAqPPARmm+FggvCA6cA9kJfX99kSKsGYXCiQb5ut7q6OmpgYKCSlxoBkai87AXAp11dXbU8A4p8XdZ0TgiAwcHBh9F62gjAZrN9gPGjZgAIOtPhiIqKug/jH0K3qMvDcD30Kl6YVuUb4TccDrLcMTk5uR/jX6E4XlE+B99AFXzGrAc0HRsKxwqARwEgx7EKQA6g96gDr4QLQIBsKBwYeZB366FMmaS0dxl7kzowq8hMs+uGQzwwNTV1UE5DNMcq2j2s/AQheFmRhc2uGY4VAIcAIHVAB4D+O7Ozs3VhWzVMXDMcuPkRckAqoXoYRbAN6+bm5o6PjIxIPljSVoXD6XTuAMATeOA4LlfH5+ieJATPWWJZUaK7TwgAzvyn8MAxAwAvHmiw2+2vK3MtY3UgAHAQzc9DNxksnMMzr1GIZgxyS7q6xGT1slL1LFg2gtxJpTQCswSAKNGBoH8V8suA2ghPJVe2Ezk5OVmq3CpetzsSExNbiL3cC+QrSU1KAetibA/fkY3qd6QVQHQgOBtmU1JSrqD4dqgAUj0lfCFhKUlNTb3Ml5NlW1QHAiMRExMTHlb7LTshmW4JpEte+nlQVkZGxtWxsTE5vDbdVoEQjbh7jtA04X5JxnJIfU/43eyW3NLS0vO9vb2rcohxU01VrptIaLxc4a/4fL4MBooh1SMyr5hzJQ+wP8i7uskmO2uCED3Dw8MLGPmOLSrdOyH1DBGZizG+8pN/JIxyuQ2rqYkXUgHu9s7Pz7/N4FuQMRljkB0BSB3bWN1NIXWtJTQz0c4HzosYC1VR5VP/JDvnWEdHh+mqum44DMgDuLwpLS3NDRBJ1psN4yXIYzl/mkdHR1d9bxre1XXNgJCJgdzc3Gskq3xV10Bqjjjol7FrHNSQy/AbbmZBSLL68cg1knGAEFRhaYdizYE3Kil4dq4Dv8zMzMgPkf9spkFoGgHyB8Y66UtoUjX5yrPC4XD4AdKyESBhgxBjALlOCf+b1R+gq56y0cju5neAh3d+WgG25mNTINAaIP7deKSZ0AiQBGh5x9GPhr8fkFMJCQm/U9CCP0+R69pmQSwrY7UDGGtm9aUInFBw6yPbB6AZit6aQCwBIUjwyBBAfsWo7Jo0ka00KWh7oRG88ZsmVJ9BxKpwM7zL5crlv8R5wOxBj1qR/XhEquvnXBN1Jd4yT2jAx8fHJ9PT07+nXriQ7VKAyILlz+6NrKysPyloS/SXm+UgRCtA3ABpAkgFXfmHpbU4mH1cFa8Tvr80oeXh0BTLk6uAXJrPQfdCUlG1No9HDiUlJV1sbW3d2h/s7BpfZmbmJVYu/zLkyqh5Xp41nM49eKRDTRwNpaXP9vb2YU7Xp1n51wbFEhrZOf4tByGGOzs7x8rKyg7DnoLkFuaB3mCXnOEZ/kWEyaab5AgeeZbtO9zT09OAgk3fT02DkAnZ2dlx8vNNnfwvwX82xj5+deEAAAAASUVORK5CYII="
/>
<view class="nav-title" v-show="scrollTop >= 44"
>订单{{ formatOrderName(OrderInfo.order_state_name) }}</view
>
</view>
</block>
</uni-nav-bar>
<view class="move-area" v-if="isdata">
<movable-view
v-if="OrderInfo.IsRedPacketIcon"
inertia
class="move-img"
direction="all"
@click="IsShowRPK"
>
<image
lazy-load
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rpk_min.png"
>
</image>
</movable-view>
<view
class="m-cell"
v-if="
remain_pay_time > 0 &&
OrderInfo.order_is_paid != StateCode.ORDER_PAID_STATE_YES &&
OrderInfo.order_state_id == StateCode.ORDER_STATE_WAIT_PAY &&
OrderInfo.order_payment_amount == OrderInfo.trade.trade_payment_amount
"
>
<view class="m-cell-bd" style="text-align: center">
<text
>{{ __("订单取消倒计时") }}
<text style="color: red; padding: 0 10rpx">
{{ remain_pay_time_str }}
</text>
</text>
</view>
</view>
<view class="m-cells order-block" v-if="OrderInfo.delivery_type_id != 5">
<view class="order-name"
>订单{{ formatOrderName(OrderInfo.order_state_name) }}</view
>
<view
v-if="![5, 10].includes(OrderInfo.delivery_type_id)"
class="order-tips"
>{{ orderTips() }}</view
>
<view
class="schedule-block"
v-if="
![2010, 2060, 2070].includes(OrderInfo.order_state_id) &&
![5, 10].includes(OrderInfo.delivery_type_id)
"
>
<view
:class="[
'schedule-block-list',
{ 'schedule-block-list-70': OrderInfo.order_state_id == 2040 },
]"
>
<view
:class="[
'iconfontAili icon-dianpu2 icon-1',
orderProcessCalss(OrderInfo.order_state_id),
]"
></view>
<view
:class="[
'iconfontAili icon-money-cny-circle-fill icon-2',
orderProcessCalss(OrderInfo.order_state_id),
]"
></view>
<view
:class="[
'iconfontAili icon-yundianxiaochengxu2_tongchengpeisong icon-3',
orderProcessFaHuoCalss(OrderInfo.order_state_id),
]"
></view>
<view :class="['iconfontAili icon-wancheng icon-4']"></view>
</view>
</view>
<view
class="map-block"
ref="mapBlock"
v-if="
![2010, 2060, 2070].includes(OrderInfo.order_state_id) &&
![5, 10].includes(OrderInfo.delivery_type_id)
"
>
<map
:latitude="mapLat"
:longitude="mapLng"
style="width: 100%; height: 110%"
ref="map"
id="map"
class="map"
:markers="markers"
:enable-zoom="true"
:enable-scroll="true"
>
</map>
</view>
<view class="order-btn-block">
<navigator
class="order-btn"
:url="'/member/product/comment?od=' + OrderInfo.order_id"
v-if="
OrderInfo.order_buyer_evaluation_status == 0 &&
OrderInfo.order_state_id == 2060
"
>评价
</navigator>
<navigator
class="order-btn"
:url="'/member/product/comment?od=' + OrderInfo.order_id"
v-if="
OrderInfo.order_buyer_evaluation_status == 1 &&
OrderInfo.order_state_id == 2060
"
>{{ __("查看评价") }}
</navigator>
<view class="order-btn order-btn-kefu" @click="goKefu">联系客服</view>
<!--
<view
:class="[
'order-btn order-btn-cuiyixia',
{ 'order-btn-disabled': isReminderOrder },
]"
:data-on="OrderInfo.order_id"
@click="reminderOrder"
>催一下</view
>
-->
<view
dis
class="order-btn order-btn-zailai"
:data-on="OrderInfo.order_id"
v-if="[2050, 2060, 2070].includes(OrderInfo.order_state_id)"
@click="placeAnOrder"
>再来一单</view
>
<view
class="order-btn order-btn-zailai"
:data-on="OrderInfo.order_id"
v-if="
OrderInfo.kind_id == 1201 &&
[2040,2050,2060].includes(OrderInfo.order_state_id) &&
OrderInfo.order_is_received==0
"
@click="confirmReceipt(OrderInfo, $event)"
>{{ __("确认收货") }}</view
>
<view
:data-on="OrderInfo.order_id"
class="order-btn order-btn-zailai"
v-if="OrderInfo.if_buyer_cancel"
@click="cancelOrder"
>
{{ __("取消订单") }}</view
>
<view
class="order-btn order-bint-play"
:data-on="OrderInfo.order_id"
@click="gotopay"
v-if="
OrderInfo.order_is_paid != StateCode.ORDER_PAID_STATE_YES &&
OrderInfo.order_state_id != StateCode.ORDER_STATE_CANCEL
"
>立即支付</view
>
</view>
<view v-if="false">
<block
v-show="!OrderInfo.is_virtual"
v-for="(logistics_item, i) in OrderInfo.logistics"
:key="i"
>
<view class="m-cell">
<view class="m-cell-bd"
><text>{{
sprintf(
__("物流单号: %s"),
logistics_item.order_tracking_number || ""
)
}}</text></view
>
</view>
<view class="m-cell">
<view class="m-cell-bd"
><text>{{
sprintf(
__("物流公司: %s"),
logistics_item.logistics_name || ""
)
}}</text></view
>
</view>
<navigator
:url="
'/member/order/logistics?on=' +
OrderInfo.order_id +
'&logistics_id=' +
logistics_item.logistics_id +
'&logistics_name=' +
logistics_item.logistics_name +
'&logistics_number=' +
logistics_item.logistics_number +
'&tracking_number=' +
logistics_item.order_tracking_number +
'&stock_bill_id=' +
logistics_item.stock_bill_id
"
class="m-cell m-cell-access"
>
<view class="m-cell-bd">{{ __("查看物流") }}</view>
<view class="m-cell-ft"></view>
</navigator>
</block>
<!--厂家自送 其他配送-->
<view
v-if="
OrderInfo.LogisticsKey == 'VENDOR' ||
OrderInfo.LogisticsKey == 'OTHER'
"
>
<view class="m-cell">
<view class="m-cell-bd">
<text>{{
sprintf(
__("送货人:%s %s"),
OrderInfo.LogisticCode,
OrderInfo.Shipper
)
}}</text>
</view>
</view>
</view>
<view v-if="OrderInfo.LogisticsKey == 'CLIENT'">
<view class="m-cell">
<view class="m-cell-bd">
<text>{{
sprintf(
__("提货人:%s %s"),
OrderInfo.LogisticCode,
OrderInfo.Shipper
)
}}</text>
</view>
</view>
</view>
</view>
</view>
<view
class="m-cells order-info-block"
v-if="OrderInfo.delivery_type_id != 5"
>
<view class="title">订单信息</view>
<view class="order-info-item">
<view class="order-info-item-left">配送地址</view>
<view class="order-info-item-right order-info-address">
<view>{{ OrderInfo.delivery.da_address }}</view>
<view
>{{ OrderInfo.delivery.da_name
}}{{ desensitizationMobile(OrderInfo.delivery.da_mobile) }}</view
>
</view>
</view>
<view class="order-info-item">
<view class="order-info-item-left">订单号码</view>
<view class="order-inof-item-right">{{ OrderInfo.order_id }}</view>
</view>
<view class="order-info-item">
<view class="order-info-item-left">配送方式</view>
<view class="order-inof-item-right">{{
deliveryTypeName(OrderInfo.delivery_type_id)
}}</view>
</view>
<view
class="order-info-item"
v-if="
![5, 10].includes(OrderInfo.delivery_type_id) &&
![2010, 2070].includes(OrderInfo.order_state_id)
"
>
<view class="order-info-item-left">顺丰订单号</view>
<view class="order-inof-item-right">{{ OrderInfo.sf_order_id }}</view>
</view>
<view
v-show="!OrderInfo.is_virtual"
v-for="(logistics_item, index) in OrderInfo.logistics"
:key="index"
>
<view class="order-info-item">
<view class="order-info-item-left">物流单号</view>
<view class="order-inof-item-right">{{
logistics_item.order_tracking_number || ""
}}</view>
</view>
<view class="order-info-item">
<view class="order-info-item-left">物流公司</view>
<view class="order-inof-item-right">{{
logistics_item.logistics_name || ""
}}</view>
</view>
<navigator
:url="
'/member/order/logistics?on=' +
OrderInfo.order_id +
'&logistics_id=' +
logistics_item.logistics_id +
'&logistics_name=' +
logistics_item.logistics_name +
'&logistics_number=' +
logistics_item.logistics_number +
'&tracking_number=' +
logistics_item.order_tracking_number +
'&stock_bill_id=' +
logistics_item.stock_bill_id
"
class="m-cell m-cell-access"
style="padding: 0; margin: 20px 0"
>
<view class="m-cell-bd">{{ __("查看物流") }}</view>
<view class="m-cell-ft"></view>
</navigator>
</view>
<view
class="order-info-item"
v-if="
OrderInfo.LogisticsKey == 'VENDOR' ||
OrderInfo.LogisticsKey == 'OTHER'
"
>
<view class="order-info-item-left">送货人</view>
<view class="order-inof-item-right">{{
OrderInfo.LogisticCode + OrderInfo.Shipper
}}</view>
</view>
<view class="order-info-item" v-if="OrderInfo.LogisticsKey == 'CLIENT'">
<view class="order-info-item-left">提货人</view>
<view class="order-inof-item-right">{{
OrderInfo.LogisticCode + OrderInfo.Shipper
}}</view>
</view>
<view class="order-info-item">
<view class="order-info-item-left">下单时间</view>
<view class="order-inof-item-right">{{ OrderInfo.order_time }}</view>
</view>
<view class="order-info-item">
<view class="order-info-item-left">支付方式</view>
<view class="order-inof-item-right">{{
OrderInfo.payment_type_id == StateCode.PAYMENT_TYPE_DELIVER ||
OrderInfo.payment_type_id == StateCode.PAYMENT_TYPE_OFFLINE
? __("货到付款")
: __("在线支付")
}}</view>
</view>
<view class="order-info-item" v-if="OrderInfo.order_message">
<view class="order-info-item-left">{{ __("备注") }}</view>
<view class="order-inof-item-right" style="overflow-wrap: anywhere">{{
OrderInfo.order_message
}}</view>
</view>
</view>
<!-- 是否需要发货 -->
<!-- <view class="m-cells m-addres-info" v-if="OrderInfo.if_delivery">
<view class="m-ad-name">
<text>{{ OrderInfo.delivery.da_name }}</text>
<text>{{ OrderInfo.delivery.da_mobile }}</text>
</view>
<view class="m-ad-address">
<text
>{{ OrderInfo.delivery.da_province }}/{{
OrderInfo.delivery.da_city
}}/{{ OrderInfo.delivery.da_county }}
{{ OrderInfo.delivery.da_address }}
</text>
</view>
</view>
<view
v-else
class="massage"
style="align-items: center; justify-content: space-between"
>
<view class="massage-name">
{{ sprintf(__("预约人:%s"), OrderInfo.delivery.da_name) }}
</view>
<view class="massage-tel" style="margin-right: 40rpx">
{{ sprintf(__("电话:%s"), OrderInfo.delivery.da_mobile) }}
</view>
</view> -->
<view
class="code1"
v-if="
(OrderInfo.is_virtual ||
OrderInfo.chain_id ||
OrderInfo.chain_code) &&
OrderInfo.order_is_paid == 3013
"
style="background: #fff; padding-bottom: 20rpx"
>
<image
lazy-load
:src="OrderInfo.virtual_qrcode"
:data-src="OrderInfo.virtual_qrcode"
style="width: 375rpx; height: 375rpx"
@click="previewProductImg"
></image>
<text v-if="OrderInfo.chain_code" @click="copyVirtualCode">{{
sprintf(__("服务码:%s"), OrderInfo.chain_code)
}}</text>
</view>
<view class="m-cells total-info" v-if="OrderInfo.delivery_type_id == 5">
<view class="m-cell" v-if="OrderInfo.delivery_type_id == 5">
<view class="m-cell-bd">
<text>{{ __("商家电话") }}</text>
</view>
<view @click="call" style="display: flex">
<image
lazy-load
src="/static/images/call.png"
style="
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
margin: auto;
"
></image>
<view
class="m-cell-ft m-order-typetxt"
style="color: #17abe3"
v-if="OrderInfo.store_tel"
>
{{ OrderInfo.store_tel }}</view
>
</view>
</view>
<view
class="m-cell"
v-if="OrderInfo.delivery_type_id == 5"
style="
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: stretch;
padding-top: 0;
"
>
<view class="m-cell-bd">
<text>{{ __("商家地址") }}</text>
</view>
<view style="display: flex; float: right">
<view class="m-cell-ft m-order-typetxt" style="color: #17abe3">
{{ OrderInfo.store_address }}</view
>
</view>
</view>
<view class="m-cell" style="padding-top: 0">
<view class="m-cell-bd">
<text>{{ __("到店日期") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt">{{
OrderInfo.virtual_service_date
}}</view>
</view>
</view>
<view
class="m-cells total-info"
v-if="
OrderInfo.store_o2o_flag == 1 &&
OrderInfo.store_latitude &&
OrderInfo.store_longitude
"
>
<view class="m-cell">
<view class="m-cell-bd">
<text>{{ __("营业时间") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt"
>{{ OrderInfo.store_opening_hours }} -
{{ OrderInfo.store_close_hours }}</view
>
</view>
<view
class="m-cell"
style="
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: stretch;
padding-top: 0;
"
@click.stop="gotomap"
:data-address="OrderInfo.store_address"
:data-name="OrderInfo.store_name"
:data-lat="OrderInfo.store_latitude"
:data-lng="OrderInfo.store_longitude"
>
<view style="display: flex; float: right; width: 400rpx">
<view
class="m-cell-ft m-order-typetxt"
style="
color: #17abe3;
float: right;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
"
>{{ OrderInfo.store_address }}{{ OrderInfo.store_address }}</view
>
</view>
<view style="display: flex; float: right">
<image
style="
width: 20rpx;
height: 26rpx;
margin-top: 6rpx;
margin: auto;
"
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/location.png"
>
</image>
<view
class="m-cell-ft m-order-typetxt"
style="color: #17abe3; margin-left: 4rpx"
>离您 {{ OrderInfo.distance }}</view
>
</view>
</view>
</view>
<view class="m-product-all">
<view class="m-product-list m-panel m-panel-access">
<view class="m-panel-access-title">商品费用</view>
<view class="m-panel-hd shop-name">
<navigator
:url="'/pagesub/index/store?store_id=' + OrderInfo.store_id"
class="m-cell m-cell-access"
style=""
hover-class="none"
>
<view class="m-cell-bd m-cell-primary">
<p class="m-store-info">
{{ OrderInfo.store_name }}
</p>
</view>
<text class="m-cell-ft"></text>
</navigator>
</view>
<navigator
v-for="(item, i) in OrderInfo.items"
:key="i"
:url="'/pages/product/detail?is_store_flag=0&pid=' + item.item_id"
class="m-product-item"
>
<view class="m-product-img">
<image lazy-load :src="item.order_item_image" mode="aspectFill" />
</view>
<view class="m-product-info">
<view class="m-product-name">
<label
><text v-if="item.show_typename" class="tag tag-orange">{{
item.show_typename
}}</text
>{{ item.product_name }}
<text>x{{ item.order_item_quantity }} </text>
</label>
<label
class="m-min-name"
style="
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
"
>
{{ item.spec_info ? item.spec_info : "" }}
</label>
</view>
<view class="m-product-price">
<block v-if="item.item_unit_price">
<view class="m-product-price-amount-block">
¥<text class="m-product-price-amount">{{
item.item_unit_price
}}</text>
</view>
</block>
<!-- <label
class="pre-info-price"
v-if="item.order_item_discount_amount"
style="padding: 0 30rpx"
>
-{{ __("¥")
}}{{ number_format(item.order_item_discount_amount, 2) }}
</label> -->
<block v-if="item.item_unit_points">
<label style="margin: auto 10rpx">+</label
>{{ item.item_unit_points }}{{ __("积分") }}
</block>
<block v-if="item.item_unit_sp">
<label style="margin: auto 10rpx">+</label
>{{ item.item_unit_sp }}{{ __("众宝") }}
</block>
<block
v-if="
item.is_denyreturn == false &&
OrderInfo.card_kind_id != 1002
"
>
<navigator
@click.stop
:url="
'/member/product/return?order_id=' +
item.order_id +
'&order_item_id=' +
item.order_item_id
"
v-if="
!dist_flag &&
item.if_return &&
OrderInfo.order_state_id != 2070 &&
!item.return_id
"
class="u-link-btn hide"
style="line-height: 30rpx"
>{{ __("退货") }}</navigator
>
</block>
<navigator
@click.stop
:url="
'/member/member/returndetail?return_id=' + item.return_id
"
v-if="item.return_id"
class="u-link-btn hide"
style="line-height: 30rpx"
>{{ __("售后详情") }}
</navigator>
</view>
</view>
</navigator>
<view class="m-cell" v-if="1 || OrderInfo.if_delivery">
<view class="m-cell-bd">
<text>{{ __("运费") }}</text>
</view>
<view class="m-product-price-amount-block">
¥<text class="m-product-price-amount">{{
OrderInfo.order_shipping_fee
}}</text>
</view>
</view>
<view class="m-cell" v-if="OrderInfo.order_discount_amount > 0">
<view class="m-cell-bd">
<text>{{ __("活动优惠") }}</text>
</view>
<view class="m-product-price-amount-block">
- ¥<text class="m-product-price-amount">{{
OrderInfo.order_discount_amount
}}</text>
</view>
</view>
<view class="m-cell" v-if="OrderInfo.voucher_price > 0">
<view class="m-cell-bd">
<text>{{ __("优惠券") }}</text>
</view>
<view class="m-product-price-amount-block">
¥<text class="m-product-price-amount">{{
OrderInfo.voucher_price
}}</text>
</view>
</view>
<view class="m-cell" v-if="0 && !(OrderInfo.LevelDiscount == 0)">
<view class="m-cell-bd">
<text
>{{ __("会员折扣")
}}<text style="font-size: 24rpx; color: #717171">{{
sprintf(__("%s折"), OrderInfo.MomentMemberDiscount)
}}</text></text
>
</view>
<view class="m-product-price-amount-block">
¥<text class="m-product-price-amount">{{
OrderInfo.LevelDiscount
}}</text>
</view>
</view>
<view class="m-cell" v-if="OrderInfo.order_resource_ext1">
<view class="m-cell-bd">
<text>{{ __("积分") }}</text>
</view>
<view class="m-product-price-amount-block">
<view class="m-cell-ft m-order-typetxt"
>-{{ OrderInfo.order_resource_ext1 }} {{ __("积分") }}</view
>
</view>
</view>
<view class="m-cell" v-if="OrderInfo.order_resource_ext2">
<view class="m-cell-bd">
<text>{{ __("众宝") }}</text>
</view>
<view class="m-product-price-amount-block">
<view class="m-cell-ft m-order-typetxt"
>-{{ OrderInfo.order_resource_ext2 }} {{ __("众宝") }}</view
>
</view>
</view>
<view class="m-cell" v-if="0 && !(OrderInfo.PointAsCash == 0)">
<view class="m-cell-bd">
<text>{{ __("积分抵现") }}</text>
</view>
<view class="m-product-price-amount-block">
-¥<text class="m-product-price-amount">{{
OrderInfo.PointAsCash
}}</text>
</view>
</view>
<view class="m-cell" v-if="0 && deduction > 0">
<view class="m-cell-bd">
<text>{{ __("余额抵扣") }}</text>
</view>
<view class="m-product-price-amount-block">
-¥<text class="m-product-price-amount">{{ deduction }}</text>
</view>
</view>
<view class="m-cell">
<view class="m-cell-bd">
<text>{{ __("总金额") }}</text>
</view>
<view class="m-product-price-amount-block" style="color: red">
¥<text class="m-product-price-amount">{{
OrderInfo.order_payment_amount
}}</text>
</view>
</view>
<view class="m-cell" v-if="OrderInfo.trade.trade_payment_amount > 0">
<view class="m-cell-bd">
<text>{{ __("待付款") }}</text>
</view>
<view class="m-product-price-amount-block">
¥<text class="m-product-price-amount">{{
OrderInfo.trade.trade_payment_amount
}}</text>
</view>
</view>
<view
class="m-cell"
style="padding-right: 10px"
v-if="
OrderInfo.order_state_id == 2040 && OrderInfo.card_kind_id == 1002
"
>
<view class="m-cell-bd">
<text>优惠券</text>
</view>
<view
class="coupon-btn"
:data-on="OrderInfo.order_id"
@click="writeOrder"
>
{{ __("确认领券") }}
</view>
</view>
</view>
</view>
<!-- <view v-if="OrderInfo.order_message">
<view class="m-cells-title">{{ __("备注") }}</view>
<view class="m-cells m-cells-form">
<view class="m-cell">
<view class="m-cell-bd">
{{ OrderInfo.order_message }}
</view>
</view>
</view>
</view> -->
<!-- 门店提货 todo -->
<view class="m-cells total-info">
<view class="m-cell" v-if="OrderInfo.is_virtual && OrderInfo.chain_id">
<view class="m-cell-bd">
<text>{{ __("门店名称") }}</text>
</view>
<view style="display: flex">
<image
lazy-load
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/images/merchant.png"
style="width: 30rpx; height: 30rpx; margin-right: 10rpx"
></image>
<view class="m-cell-ft m-order-typetxt" style="color: #17abe3">
{{ OrderInfo.chain_name }}</view
>
</view>
</view>
<view class="m-cell" v-if="OrderInfo.is_virtual">
<view class="m-cell-bd">
<text style="">{{ __("预约时间") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt" style="color: #000">{{
OrderInfo.virtual_service_time
}}</view>
</view>
<view class="m-cell" v-if="OrderInfo.is_virtual && OrderInfo.chain_id">
<view class="m-cell-bd">
<text>{{ __("商家电话") }}</text>
</view>
<view @click="call" style="display: flex">
<image
lazy-load
src="/static/images/call.png"
style="width: 30rpx; height: 26rpx; margin-right: 10rpx"
>
</image>
<view class="m-cell-ft m-order-typetxt" style="color: #17abe3">
{{ OrderInfo.chain_mobile }}</view
>
</view>
</view>
<view
class="m-cell"
v-if="OrderInfo.is_virtual && OrderInfo.chain_id"
style="
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: stretch;
padding-top: 0;
"
>
<view class="m-cell-bd">
<text>{{ __("商家地址") }}</text>
</view>
<view
class="m-cell-ft m-order-typetxt"
style="color: #717171; text-align: left; margin-top: 20rpx"
>{{ OrderInfo.chain_address }}</view
>
</view>
<!-- <view class="m-cell">
<view class="m-cell-bd">
<text>{{ __("商品总额") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt"
><text>{{ __("¥") }}</text
>{{ OrderInfo.order_item_amount }}</view
>
</view> -->
<!-- <view class="m-cell" v-if="OrderInfo.order_discount_amount > 0">
<view class="m-cell-bd">
<text>{{ __("活动优惠") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt"
>-<text>{{ __("¥") }}</text
>{{ OrderInfo.order_discount_amount }}</view
>
</view> -->
<block
v-if="OrderInfo.activity_json && OrderInfo.activity_json.length > 0"
>
<view
class="m-cell m-cell-sub"
v-for="(item, i) in OrderInfo.activity_json"
:key="i"
>
<view class="m-cell-bd">
<text
v-if="item.type_id == StateCode.ACTIVITY_TYPE_LIMITED_DISCOUNT"
>{{ __("限时折扣") }}</text
>
<text v-if="item.type_id == StateCode.ACTIVITY_TYPE_REDUCTION">{{
__("满减")
}}</text>
<text
v-if="item.type_id == StateCode.ACTIVITY_TYPE_REDUCTION_AGAIN"
>{{ __("折上折") }}</text
>
<text
v-if="
item.type_id == StateCode.ACTIVITY_TYPE_ONE_PIECE_DISCOUNT
"
>{{ __("单件折") }}</text
>
<text
v-if="item.type_id == StateCode.ACTIVITY_TYPE_MULTIPLE_FOLD"
>{{ __("多件折") }}</text
>
<text v-if="item.type_id == StateCode.ACTIVITY_TYPE_GIFTBAG">{{
__("组合套餐")
}}</text>
</view>
<view class="m-cell-ft m-order-typetxt">
-{{ __("¥") }}{{ number_format(item.discount, 2) }}
</view>
<view class="arrow"></view>
</view>
</block>
<!-- <view class="m-cell" v-if="OrderInfo.voucher_price > 0">
<view class="m-cell-bd">
<text>{{ __("优惠券") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt"
>-<text>{{ __("¥") }}</text
>{{ OrderInfo.voucher_price }}</view
>
</view> -->
<!-- todo 会员折扣等级 -->
<!-- <view class="m-cell" v-if="0 && !(OrderInfo.LevelDiscount == 0)">
<view class="m-cell-bd">
<text>{{ __("会员折扣") }}</text>
<text style="font-size: 24rpx; color: #717171">{{
sprintf(__("%s折"), OrderInfo.MomentMemberDiscount)
}}</text>
</view>
<view class="m-cell-ft m-order-typetxt"
>-<text>{{ __("¥") }}</text
>{{ OrderInfo.LevelDiscount }}</view
>
</view> -->
<!-- todo 积分抵现 -->
<!-- <view class="m-cell" v-if="OrderInfo.order_resource_ext1">
<view class="m-cell-bd">
<text>{{ __("积分") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt"
>-{{ OrderInfo.order_resource_ext1 }} {{ __("积分") }}</view
>
</view> -->
<!-- <view class="m-cell" v-if="OrderInfo.order_resource_ext2">
<view class="m-cell-bd">
<text>{{ __("众宝") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt"
>-{{ OrderInfo.order_resource_ext2 }} {{ __("众宝") }}</view
>
</view> -->
<!-- <view class="m-cell" v-if="0 && !(OrderInfo.PointAsCash == 0)">
<view class="m-cell-bd">
<text>{{ __("积分抵现") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt"
>-<text>{{ __("¥") }}</text
>{{ OrderInfo.PointAsCash }}</view
>
</view> -->
<!-- <view class="m-cell" v-if="0 && deduction > 0">
<view class="m-cell-bd">
<text>{{ __("余额抵扣") }}</text>
</view>
<view class="m-cell-ft m-order-typetxt"
>-<text>{{ __("¥") }}</text
>{{ deduction }}</view
>
</view> -->
<!-- <view class="m-cell tbt">
<view class="m-cell-bd"> </view>
<view class="m-cell-ft m-total-info">
<view>
{{ __("总金额") }}
<label class="m-total-price"
><text>{{ __("¥") }}</text
>{{ OrderInfo.order_payment_amount }}</label
>
</view>
<view>
{{ __("待付款") }}
<label class="m-total-price"
><text>{{ __("¥") }}</text
>{{ OrderInfo.trade.trade_payment_amount }}</label
>
</view>
</view>
</view> -->
<!-- <view
class="my_coupon"
v-if="
OrderInfo.order_state_id == 2040 && OrderInfo.card_kind_id == 1002
"
:data-on="OrderInfo.order_id"
@click="writeOrder"
>
<view class="my_coubut">{{ __("确认领券") }}</view>
</view>
<view style="height: 108rpx"> </view> -->
</view>
<view class="u-cleanbox"></view>
</view>
<view
class="m-footer-btn"
v-show="false"
v-if="
!dist_flag &&
isdata &&
(OrderInfo.if_buyer_cancel ||
OrderInfo.order_state_id == 2060 ||
OrderInfo.order_state_id == 2030 ||
OrderInfo.order_state_id == 2020 ||
OrderInfo.order_state_id == StateCode.ORDER_STATE_SHIPPED ||
(OrderInfo.order_is_paid != StateCode.ORDER_PAID_STATE_YES &&
OrderInfo.order_state_id != StateCode.ORDER_STATE_CANCEL))
"
>
<!-- <navigator
:url="'/member/product/comment?od=' + OrderInfo.order_id"
v-if="
OrderInfo.order_buyer_evaluation_status == 0 &&
OrderInfo.order_state_id == 2060
"
class="u-link-btn"
>{{ __("去评价") }}
</navigator> -->
<!-- <navigator
:url="'/member/product/comment?od=' + OrderInfo.order_id"
v-if="
OrderInfo.order_buyer_evaluation_status == 1 &&
OrderInfo.order_state_id == 2060
"
class="u-link-btn"
>{{ __("查看评价") }}
</navigator> -->
<!-- <form report-submit="true" @submit="gotopay">
<button
:data-on="OrderInfo.order_id"
v-if="
OrderInfo.order_is_paid != StateCode.ORDER_PAID_STATE_YES &&
OrderInfo.order_state_id != StateCode.ORDER_STATE_CANCEL
"
class="u-link-btn"
formType="submit"
>
{{ __("去支付") }}
</button>
</form> -->
<!-- <view
:data-on="OrderInfo.order_id"
v-if="OrderInfo.if_buyer_cancel"
class="u-link-btn"
@click="cancelOrder"
>
{{ __("取消订单") }}
</view> -->
<!-- <view
:data-on="OrderInfo.order_id"
v-if="
OrderInfo.kind_id == 1201 &&
OrderInfo.order_state_id == StateCode.ORDER_STATE_SHIPPED
"
class="u-link-btn"
@click="confirmReceipt"
>{{ __("确认收货") }}</view
> -->
</view>
<view
v-if="
false &&
OrderInfo.order_state_id > 2010 &&
OrderInfo.order_state_id != 2040 &&
OrderInfo.order_state_id != 2070 &&
OrderInfo.order_refund_amount == 0 &&
OrderInfo.order_is_paid == StateCode.ORDER_PAID_STATE_YES
"
class="m-footer-btn"
>
<view
class="u-link-btn"
v-if="OrderInfo.kind_id == 1201"
@click="applyCancelOrder(OrderInfo)"
>
{{ __("申请取消订单") }}
</view>
</view>
<!--<template is="shareMskTpl" data="(PageQRCodeInfo)"/>-->
<view
class="shareRPK"
v-if="showRPK && OrderInfo.IsRedPacketIcon"
@click="IsShowRPK"
>
<view
class="shareRPKBox (showRPK?'animated bounceIn':'animated bounceOut')"
catchtap
style="
background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rpk_box.png)
no-repeat;
background-size: cover;
"
>
<view class="sendRPK" catchtap="shareBox"></view>
<view class="closeRPK" catchtap="IsShowRPK"></view>
</view>
</view>
<view class="m-loading-box">
<block v-if="!OrderInfo">
<view class="u-loadmore">
<label class="u-loading"></label>
<text class="u-loadmore-tips">{{ __("正在加载") }}</text>
</view>
<view>
<text></text>
</view>
</block>
</view>
<payment-box
:paymentDataDefault="paymentData"
:order_id="order_id"
ref="paymentBox"
@onCancel="onCancel"
@onPaid="onPaid"
@onFail="onFail"
></payment-box>
</view>
</template>
<script>
import $ from "../../helpers/util";
import paymentBox from "../../components/payment-box.vue";
import { mapState, mapMutations } from "vuex";
export default {
data() {
return {
top: 0, //标题图标距离顶部距离
opacity: 0,
scrollTop: 0,
options: {},
OrderInfo: {
delivery: {},
distance: 0,
},
formId: "",
pointAsCashMoney: "",
discount: "",
MemberDiscount: "",
showRPK: true,
ActivityGroupId: 0,
maxRPK: 0,
deduction: 0,
isdata: false,
order_id: "",
paymentData: {},
dist_flag: false,
init_pay_flag: false,
remain_pay_time: 0,
remain_pay_time_str: "--:--:--",
RemainTime: false,
latitude: "",
longitude: "",
mapLat: 0,
mapLng: 0,
markers: [],
points: [
{ latitude: 0, longitude: 0 },
{ latitude: 0, longitude: 0 },
// ... 其他点位
],
scale: 0,
_mapContext: null,
time: null,
isReminderOrder: false,
subscribe: 0,
// tmplIds: [
// "kiDj_hSF_ASwD-Dlgxnypi6IJBQZ12a-hEpd3zZ-Uxc",
// "Lq6_OHOemtmBoWGrd9zvyJ3ultzXB5metmqPtYeV0pc",
// ],
};
},
components: {
paymentBox,
},
computed: mapState([
"Config",
"StateCode",
"notice",
"plantformInfo",
"shopInfo",
"userInfo",
"hasLogin",
]),
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onLoad: function (options) {
uni.setNavigationBarTitle({
title: this.__("订单详情"),
});
let that = this;
this.subscribe =
options.subscribe && options.subscribe == 1
? options.subscribe
: this.subscribe;
that._mapContext = uni.createMapContext("map", this);
this.setData({
options: options,
discount: options.discount,
pointAsCashMoney: options.pointAsCashMoney,
MemberDiscount: options.MemberDiscount,
dist_flag: options.dist_flag ? true : false,
init_pay_flag: Boolean(options.init_pay_flag),
});
/* if (that.$.isNull(this.userInfo))
{
that.forceUserInfo(function(user) {
that.InitPage(options)
});
}
else
{
that.InitPage(options)
} */
this.notice.addNotification("RefreshMessage", this.RefreshMessage, this);
},
onShow: function () {
const _this = this;
this.InitPage(this.options);
setTimeout(() => {
try {
if (this.subscribe == 1) {
$.showModal({
title: "订阅提示",
content: "是否订阅活动消息通知?",
cancelText: "暂不订阅",
confirmText: "立即订阅",
success: function (n) {
if (n.confirm) {
wx.requestSubscribeMessage({
tmplIds: _this.tmplIds,
success(res) {
console.log("success res====", res);
// uni.showToast({
// title: "消息已订阅",
// });
},
fail(res) {
console.log("fail res====", res);
// uni.showToast({
// title: "稍后再试",
// });
},
});
}
},
});
}
} catch (error) {}
}, 500);
},
onUnload: function () {
//移除通知
var that = this;
if (this.$refs.paymentBox.showBoxView) {
this.$refs.paymentBox.cancel();
}
clearInterval(that.time);
that.time = null;
},
onBackPress() {
if (this.$refs.paymentBox.showBoxView) {
this.$refs.paymentBox.cancel();
return true;
}
var that = this;
that.notice.removeNotification("RefreshMessage", that);
},
methods: {
...mapMutations([
"login",
"logout",
"getPlantformInfo",
"forceUserInfo",
"getUserInfo",
]),
reminderOrder() {
let that = this;
that.isReminderOrder = true;
},
cluster() {
this._mapContext.initMarkerCluster({
enableDefaultStyle: false, // 是否使用默认样式
zoomOnClick: true, // 点击聚合的点,是否改变地图的缩放级别
gridSize: 60, // 聚合计算时网格的像素大小默认60
complete(res) {
console.log("initMarkerCluster", res);
},
});
this._mapContext.includePoints({
points: this.points,
padding: [40, 40, 40, 40],
complete(res) {
console.log("includePoints", res);
},
});
// this._mapContext.on();
this.addMarkers();
// 缩放或拖动导致新的聚合簇产生时触发,仅返回新创建的聚合簇信息。
},
addMarkers() {
const markers = [];
this.points.forEach((item, index) => {
markers.push(
Object.assign(
{},
{
id: index,
iconPath: "/static/images/person.png",
width: 40,
height: 40,
joinCluster: true, // 指定了该参数才会参与聚合
},
item
)
);
});
this._mapContext.addMarkers({
markers,
clear: false, //是否先清空地图上所有 marker
complete(res) {
console.log("addMarkers", res);
},
});
},
placeAnOrder: function (obj) {
var params = {
order_id: obj.currentTarget.dataset.on,
};
var that = this;
that.$.confirm(
that.__("是否再次下单?"),
function (e) {
if (e.confirm) {
that.$.request({
url: that.Config.URL.user.next_order,
data: params,
method: "POST",
success: function (data, status, msg, code) {
if (200 == status) {
that.$.switchTab({
url: "/pages/cart/cart",
});
} else {
that.$.alert(msg);
}
},
});
}
},
true
);
},
formatOrderName(name) {
switch (name) {
case "已取消/已作废":
return "已取消";
break;
case "已完成/已签收":
return "已完成";
break;
default:
return name;
}
},
desensitizationMobile(mobile) {
let regex = /(\d{3})\d{4}(\d{4})/;
return mobile.replace(regex, "$1****$2");
},
orderProcessCalss(id) {
if ([2020, 2030, 2040, 2100, 2200].includes(id)) {
return "satisfy";
}
},
orderProcessFaHuoCalss(id) {
if ([2040].includes(id)) {
return "satisfy";
}
},
orderTips() {
switch (this.OrderInfo.order_state_id) {
case 2010:
return "现在支付,可以更快送到您的手上哦!";
case 2020:
return "商家已接单";
break;
case 2030:
return "您的订单正在配货中,请再等待下哦!";
break;
case 2040:
return "骑手正在配送中,亲耐心等待";
break;
case 2060:
return "感谢您对小发同城的信任,期待再次光临。";
break;
case 2070:
return "您的订单已取消,期待再次光临";
break;
case 2100:
return "骑手正在往商家路上";
case 2200:
return "骑士已到店,取货中";
default:
return "订单获取失败!";
break;
}
},
handerSkip() {
uni.navigateBack();
},
initNavigation(e) {
this.opacity = e.opacity;
this.top = e.top;
},
opacityChange(e) {
this.opacity = e.opacity;
},
back() {
uni.navigateBack();
},
goKfu: function (e) {
let that = this;
//先判断是否登录
let ProductInfo = that.OrderInfo.items[0];
this.forceUserInfo(function (user) {
var t = e.currentTarget.dataset;
var url = that.Config.kefu + "/im_client/?web_plugin_id=24775";
url =
url +
"&product_send=true&product_title=" +
ProductInfo.product_name +
"&product_订单号=" +
ProductInfo.order_id +
"&product_价格=" +
ProductInfo.order_item_amount +
"&product_image=" +
ProductInfo.order_item_image;
that.$.gotopage(
"/pagesub/webpage/webpage?u=" + encodeURIComponent(url)
);
});
},
writeOrder: function (e) {
var that = this,
params = {
order_id: e.currentTarget.dataset.on,
};
that.$.confirm(
"确定领取券?",
function (e) {
if (e.confirm) {
that.$.request({
url: that.Config.URL.user.order_receive,
data: params,
success: function (data, status, msg, code) {
if (status == 200) {
that.$.alert(that.__("领券成功!"), function () {
that.$.gopage("/member/member/coupon");
});
} else {
that.$.alert(msg);
}
},
});
}
},
true
);
},
goKefu: function (e) {
let that = this;
let ProductInfo = that.OrderInfo.items[0];
//先判断是否登录
this.forceUserInfo(function (user) {
var t = e.currentTarget.dataset;
//that.$.gopage(t.appurl);
that.$.request({
url: that.Config.URL.user.kefu_config,
data: {
user_id: that.OrderInfo.buyer_user_id,
store_id: that.OrderInfo.store_id,
},
loading: false,
success: function (rd, r_status, r_msg, code) {
if (r_status == 200) {
let chat_url = that.$.sprintf(
"/im/chat/chat?uid=%s&order_id=%s",
rd.friend_id,
ProductInfo.order_id
);
that.$.gopage(chat_url);
} else {
that.$.alert(r_msg);
}
},
});
});
return;
},
call: function () {
let that = this;
that.$.makePhoneCall({
phoneNumber: this.OrderInfo.chain_mobile + "",
});
},
RefreshMessage: function (e) {
this.InitPage(this.options);
},
touchstart() {
let that = this;
that.RemainTime = setInterval(() => {
//console.log(this.money);
if (that.remain_pay_time <= 0) {
clearInterval(this.RemainTime);
}
that.remain_pay_time--;
let hours = that.$.doubleNum(
Math.floor(that.remain_pay_time / 60 / 60)
);
let minutes = that.$.doubleNum(
Math.floor((that.remain_pay_time / 60) % 60)
);
let seconds = that.$.doubleNum(Math.floor(that.remain_pay_time % 60));
that.remain_pay_time_str = hours + ":" + minutes + ":" + seconds;
}, 1000);
},
touchend() {
clearInterval(this.RemainTime);
},
calculateDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // 地球半径,单位为公里
const dLat = this.deg2rad(lat2 - lat1);
const dLon = this.deg2rad(lon2 - lon1);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(this.deg2rad(lat1)) *
Math.cos(this.deg2rad(lat2)) *
Math.sin(dLon / 2) *
Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c;
return distance;
},
deg2rad(deg) {
return deg * (Math.PI / 180);
},
calculateMidpoint(lat1, lon1, lat2, lon2) {
// 使用中点公式计算中心点坐标
const midpointLat = (lat1 + lat2) / 2;
const midpointLon = (lon1 + lon2) / 2;
// 返回中心点坐标仍然是GCJ02坐标
return {
latitude: midpointLat,
longitude: midpointLon,
};
},
rad2deg(rad) {
return rad * (180 / Math.PI);
},
getRiderLatestPosition(status) {
let that = this;
that._mapContext.removeMarkers({
markerIds: [0, 1],
});
uni.request({
url:
that.Config.URL.SF.riderLatestPosition +
`?order_id=${that.OrderInfo.sf_order_id}`,
method: "POST",
success: (res) => {
// let midpoint = that.calculateMidpoint(
// Number(res.data.result.rider_lat),
// Number(res.data.result.rider_lng),
// Number(that.OrderInfo.OrderInfo.store_latitude),
// Number(that.OrderInfo.delivery.da_longitude)
// );
// that.mapLat = midpoint.latitude;
// that.mapLng = midpoint.longitude;
let points = [
{
latitude: Number(res.data.result.rider_lat),
longitude: Number(res.data.result.rider_lng),
},
{
latitude: that.OrderInfo.store_latitude,
longitude: that.OrderInfo.store_longitude,
},
];
if (status == 15) {
points[1].latitude = that.OrderInfo.delivery.da_latitude;
points[1].longitude = that.OrderInfo.delivery.da_longitude;
}
that._mapContext.includePoints({
points: points,
padding: [60, 60, 60, 60],
complete(res) {
console.log("includePoints", res);
},
});
that.qiShouMarkers(points);
},
fail: (res) => {},
});
},
qiShouMarkers(points) {
const markers = [];
points.forEach((item, index) => {
markers.push(
Object.assign(
{},
{
id: 2 + index,
iconPath: "/static/images/person.png",
width: 40,
height: 40,
joinCluster: true, // 指定了该参数才会参与聚合
},
item
)
);
});
markers[0].iconPath = "/static/images/qishou.png";
markers[0].width = 60;
markers[0].height = 60;
this._mapContext.addMarkers({
markers,
clear: true, //是否先清空地图上所有 marker
complete(res) {
console.log("addMarkers", res);
},
});
},
deliveryTypeName(id) {
if (id == 10) {
return "物流配送";
}
if (id == 16) {
return "同城配送";
}
},
InitPage: function (options) {
var params = {
user_id: this.userInfo.user_id,
order_id: options.on,
};
let that = this;
that.touchend();
that.$.request({
url: this.Config.URL.user.order_detail,
data: params,
success: function (data, status, msg, code) {
if (200 == status) {
data.order_time = that.$.datetimeFormatter(
data.order_time,
"yyyy-MM-dd hh:mm:ss"
);
that.setData({
isdata: true,
OrderInfo: data,
deduction: 0,
remain_pay_time: data.remain_pay_time ? data.remain_pay_time : 0,
//(e.Info[0].ECardCash + e.Info[0].ExtraCash).toFixed(2)
// 余额折扣?
});
if (
![2060, 2070].includes(data.order_state_id) &&
data.delivery_type_id == 16
) {
let midpoint = that.calculateMidpoint(
Number(data.store_latitude),
Number(data.store_longitude),
Number(data.delivery.da_latitude),
Number(data.delivery.da_longitude)
);
that.mapLat = midpoint.latitude;
that.mapLng = midpoint.longitude;
that.points[0].latitude = Number(data.store_latitude);
that.points[0].longitude = Number(data.store_longitude);
that.points[1].latitude = Number(data.delivery.da_latitude);
that.points[1].longitude = Number(data.delivery.da_longitude);
that.cluster();
that.getSFcreateOrder();
}
if (that.$.isJson(data.activity_json)) {
that.OrderInfo.activity_json = JSON.parse(data.activity_json);
}
if (that.RemainTime === false) {
that.touchstart();
}
//支付跳转订单
if (that.options.init_pay_flag) {
//如果未支付
if (
data.order_is_paid != that.StateCode.ORDER_PAID_STATE_YES &&
data.order_state_id == that.StateCode.ORDER_STATE_WAIT_PAY
) {
that.$.showModal({
title: that.__("提示"),
content: that.__("在线支付状态更新中"),
showCancel: false,
confirmText: "Ok",
success: (res) => {
if (res.confirm) {
let redirect_url =
"/member/order/detail?on=" +
options.on +
"&init_pay_flag=1";
that.$.gotopage(redirect_url);
//window.location.href = redirect_url;
} else if (res.cancel) {
}
},
});
} else {
//如果拼团订单
if (that.$.inArray(data.activity_type_id, 1123)) {
let redirect_url =
"/activity/fightgroup/detail?gb_id=" +
data.gb_id +
"&on=" +
data.order_id;
that.$.gotopage(redirect_url);
}
}
}
//计算店铺距离
/**
* 计算两个经纬度的距离(米)
*/
let getDistance = function (lat1, lng1, lat2, lng2) {
var radLat1 = (lat1 * Math.PI) / 180.0;
var radLat2 = (lat2 * Math.PI) / 180.0;
var a = radLat1 - radLat2;
var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
var s =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(b / 2), 2)
)
);
s = s * 6378.137; // EARTH_RADIUS;
s = Math.round(s * 10000) / 10;
return s;
};
if (that.OrderInfo.store_o2o_flag) {
that.$.getLocation({
type: "wgs84",
success: function (response) {
that.setData({
latitude: response.latitude,
longitude: response.longitude,
});
that.OrderInfo.distance = 0;
let d = getDistance(
that.latitude,
that.longitude,
that.OrderInfo.store_latitude,
that.OrderInfo.store_longitude
);
console.info(
that.latitude,
that.longitude,
that.OrderInfo.store_latitude,
that.OrderInfo.store_longitude
);
console.info(d);
that.OrderInfo.distance = that.$.distanceFormat(d || 0);
},
fail: function () {},
});
}
}
},
});
/* 红包活动分享 var t = {store_id: this.shopInfo.Id, sponsorId: this.userInfo.Id, order_id: options.on};
that.$.xsr(that.$.makeUrl(orderapi.PrepareShareLuckyRedPacket, t), function (e) {
that.setData({maxRPK: e.Info.LuckyOrder, ActivityGroupId: e.Info.LuckyRedPacketActivityGroupId})
})*/
},
applyCancelOrder: function (OrderInfo) {
let that = this;
uni.navigateTo({
url:
"/pagesub/product/return?order_id=" +
OrderInfo.order_id +
"&order_state=" +
OrderInfo.order_state_id,
});
},
getSFcreateOrder() {
let that = this;
that.getSFListOrderFeed();
that.time = setInterval(() => {
that.getSFListOrderFeed();
}, 30000);
},
//顺丰状态列表
getSFListOrderFeed() {
let that = this;
uni.request({
url:
that.Config.URL.SF.listOrderFeed +
`?order_id=${that.OrderInfo.sf_order_id}`,
method: "POST",
success: (res) => {
if (res.data && res.data.result) {
if (res.data.result.feed.length > 0) {
let feedArr = res.data.result.feed;
let statusArr = [];
feedArr.forEach((item) => {
statusArr.push(item.order_status);
});
if (statusArr.includes(10)) {
let status = 10;
that.$set(that.OrderInfo, "order_state_id", 2100);
if (statusArr.includes(12)) {
that.$set(that.OrderInfo, "order_state_id", 2200);
}
if (statusArr.includes(15)) {
status = 15;
that.$set(that.OrderInfo, "order_state_id", 2040);
that.$set(that.OrderInfo, "order_state_name", "已发货");
}
that.orderTips();
console.log(that.OrderInfo.order_state_id);
that.getRiderLatestPosition(status);
}
if (statusArr.includes(17)) {
that.$set(that.OrderInfo, "order_state_id", 2060);
that.$set(that.OrderInfo, "order_state_name", "已完成");
clearInterval(that.time);
that.time = null;
}
}
}
},
fail: (res) => {},
});
},
cancelOrder: function (e) {
let that = this;
var params = {
order_id: e.currentTarget.dataset.on,
};
that.$.confirm(
that.__("是否取消订单"),
function (e) {
if (e.confirm) {
that.$.request({
url: that.Config.URL.user.order_cancel,
data: params,
success: function (data, status, msg, code) {
if (200 == status) {
that.$.alert("取消成功!", function () {
setTimeout(function () {
that.notice.postNotificationName("RefreshMessage", e);
}, 1500);
/*
that.$.navigateBack(1, function() {
var e = {};
that.notice.postNotificationName("RefreshMessage", e)
})
*/
});
}
},
});
}
},
true
);
},
confirmReceipt: function (data, obj) {
var params = {
order_id: obj.currentTarget.dataset.on,
};
//拉起确认收货组件
if (wx.openBusinessView) {
wx.openBusinessView({
businessType: "weappOrderConfirm",
extraData: {
// merchant_id: data.lkl_merchant_no,//用户交易商户号
// merchant_trade_no: data.order_id,//商户订单号
transaction_id: data.lkl_trade_no, //用户交易单号
// transaction_id: "4200002884202509154936380358", //用户交易单号
},
success: (e) => {
console.log("e1", e);
if (e.extraData.status === "success") {
// 用户确认收货成功,再执行自己的代码
that.$.request({
url: that.Config.URL.user.order_receive,
data: params,
success: function (data, status, msg, code) {
if (status == 200) {
that.$.alert(that.__("收货成功!"), function () {
that.notice.postNotificationName("RefreshMessage", e);
});
}
},
});
} else if (e.extraData.status === "fail") {
// 用户确认收货失败
uni.showToast({
title: "确认收货失败",
icon: "none",
});
} else if (e.extraData.status === "cancel") {
// 用户取消
uni.showToast({
title: "取消确认收货",
icon: "none",
});
}
},
fail: (e) => {
console.log("e2", e);
uni.showToast({
title: "确认收货失败",
icon: "none",
});
},
complete: (e) => {
console.log("e3", e);
console.log("无论是否成功都会执行");
},
});
} else {
//引导用户升级微信版本
uni.showToast({
title: "请升级微信版本",
icon: "none",
});
that.$.confirm(
that.__("是否确认收货?"),
function (e) {
if (e.confirm) {
that.$.request({
url: that.Config.URL.user.order_receive,
data: params,
success: function (data, status, msg, code) {
if (status == 200) {
that.$.alert(that.__("收货成功!"), function () {
that.notice.postNotificationName("RefreshMessage", e);
});
}
},
});
}
},
true
);
}
var that = this;
// that.$.confirm(
// that.__("是否确认收货?"),
// function (e) {
// if (e.confirm) {
// that.$.request({
// url: that.Config.URL.user.order_receive,
// data: params,
// success: function (data, status, msg, code) {
// if (status == 200) {
// that.$.alert(that.__("收货成功!"), function () {
// that.notice.postNotificationName("RefreshMessage", e);
// });
// }
// },
// });
// }
// },
// true
// );
},
gotopay: async function (e) {
var that = this;
await that.$store.dispatch(`getUserInfo`, function (userIfo) {});
that.setData({
order_id: that.OrderInfo.order_id,
paymentData: {
order_id: that.OrderInfo.order_id,
orderSelMoneyAmount: that.OrderInfo.trade.trade_payment_amount,
user_money: this.userInfo.user_money,
user_points: this.userInfo.user_points,
user_recharge_card: this.userInfo.user_recharge_card,
user_sp: this.userInfo.user_sp,
},
});
this.$refs.paymentBox.show();
return true;
},
onCancel: function (e) {
return;
},
onPaid: function (e) {
let that = this;
that.$.alert(that.__("支付成功!"), function () {
that.$refs.paymentBox.cancel();
that.options.init_pay_flag = true;
that.InitPage(that.options);
that.notice.postNotificationName("RefreshMessage", e);
/*
that.$.navigateBack(1, function() {
var e = {};
that.notice.postNotificationName("RefreshMessage", e)
})
*/
});
},
onFail: function (e) {
let that = this;
that.$.alert(that.__("支付失败!"));
//console.log("支付失败:", e)
},
sendMessage: function (e) {
let that = this;
var t = {
api: orderapi.OrderPaySuccessWXMessage,
pages: "/member/order/detail?on=" + e,
formId: this.formId,
WeiXinOpenId: this.userInfo.openId,
value: {
store_id: this.shopInfo.store_id,
order_id: e,
},
};
that.$.sendTpl(t);
},
copyVirtualCode: function () {
uni.setClipboardData({
data: this.OrderInfo.chain_code,
complete() {
uni.showToast({
title: "已复制到剪贴板",
});
},
});
},
onShareAppMessage: function () {
var that = this;
return {
title: "拼手气红包,第" + this.maxRPK + "个领取的红包最大!",
imageUrl:
"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/shareImg.png",
path:
"pages/redpacket/redpacket?g=" +
this.ActivityGroupId +
"&n=" +
this.maxRPK +
"&uid=" +
this.userInfo.Id,
success: function () {
that.$.xsr1(
that.$.makeUrl(orderapi.ShareCount, {
sponsorId: this.userInfo.Id,
audienceType: 1,
audienceId: 0,
ContentType: 22,
contentId: that.ActivityGroupId,
}),
function (e) {}
);
},
};
},
shareQRCode: function (e) {
var that = this,
params = {
store_id: this.shopInfo.Id,
sponsorId: this.userInfo.Id,
imageUrl:
"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/shareImg.png",
path:
"pages/redpacket/redpacket?g=" +
this.ActivityGroupId +
"&n=" +
this.maxRPK +
"&uid=" +
this.userInfo.Id,
luckyOrder: this.maxRPK,
};
//生成二维码并返回地址。 - 需要修改调整为小程序地址
that.$.request({
url: this.Config.URL.wx.getMiniAppQRCodeUnlimit,
data: params,
success: function (data, status, msg, code) {
that.setData({
PageQRCodeInfo: {
Path: data.url,
IsShare: true,
IsShareBox: false,
IsJT: true,
},
});
},
});
},
shareBox: function () {
this.setData({
PageQRCodeInfo: {
Path: "",
IsShare: true,
IsShareBox: true,
IsJT: false,
},
});
},
cancelShare: function () {
this.setData({
PageQRCodeInfo: {
Path: "",
IsShare: false,
IsShareBox: false,
IsJT: false,
},
});
},
saveImg: function () {
var that = this;
that.$.loading(),
that.$.downloadFile({
url: this.PageQRCodeInfo.Path,
success: function (t) {
that.$.hideloading(),
that.$.saveImageToPhotosAlbum({
filePath: t.tempFilePath,
success: function () {
that.setData({
PageQRCodeInfo: {
Path: "",
IsShare: false,
IsShareBox: false,
IsJT: false,
},
}),
that.$.alert("保存图片成功!"),
that.$.xsr1(
that.$.makeUrl(orderapi.ShareCount, {
sponsorId: this.userInfo.Id,
audienceType: 3,
audienceId: 0,
ContentType: 22,
contentId: that.ActivityGroupId,
})
);
},
fail: function (e) {
that.$.hideloading();
that.$.alert("保存图片失败!");
},
});
},
fail: function (e) {
that.$.hideloading();
},
});
},
showCodeImg: function () {
let that = this;
that.$.previewImage({
current: this.PageQRCodeInfo.Path,
urls: [this.PageQRCodeInfo.Path],
});
},
IsShowRPK: function () {
var e = this;
e.showRPK
? setTimeout(function () {
e.setData({
showRPK: false,
});
}, 250)
: e.setData({
showRPK: true,
});
},
previewProductImg: function (e) {
var that = this;
var i = e.target.dataset.src;
let n = [];
n.push(i);
//console.info(i);
//console.info(n);
that.$.previewImage({
current: i,
urls: n,
});
},
gotomap: function (e) {
var that = this;
that.$.openLocation({
latitude: parseFloat(e.currentTarget.dataset.lat),
longitude: parseFloat(e.currentTarget.dataset.lng),
name: e.currentTarget.dataset.name,
address: e.currentTarget.dataset.address,
scale: 28,
});
},
},
};
</script>
<style lang="scss">
@import "../../styles/_variables";
.page-order-detail-container {
.uni-navbar {
height: 44px;
}
.map-block {
height: 330px;
overflow: hidden;
border-radius: 30px;
border-radius: 12px;
}
.m-panel-access {
margin: 0 8px;
.m-panel-access-title {
margin: 16px 14px 0;
font-size: 18px;
font-weight: bold;
}
}
.shop-name {
display: flex;
margin: 8px 6px;
padding: 0px 10px;
font-size: 14px;
border-radius: 10px;
background: #fafafa;
}
.schedule-block {
height: 30px;
margin: 20px 0;
.schedule-block-list {
position: relative;
margin: 10px 8px;
width: 94%;
height: 20px;
background: #ededed;
&::before {
position: absolute;
content: "";
width: 50%;
height: 100%;
background: #ff4f28;
}
.iconfontAili {
background: #ededed;
border-radius: 50%;
top: -8px;
width: 38px;
height: 38px;
position: absolute;
text-align: center;
line-height: 38px;
font-size: 22px;
color: #a3a3a3;
}
.icon-1 {
left: -4px;
font-size: 18px;
}
.icon-2 {
left: 30%;
}
.icon-3 {
left: 63%;
}
.icon-4 {
left: 94%;
}
.satisfy {
font-weight: bold;
color: #000;
background: #ff4f28;
}
}
.schedule-block-list-70 {
&::before {
position: absolute;
content: "";
width: 80%;
height: 100%;
background: #ff4f28;
}
}
}
.order-block {
padding: 6px 12px;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
.order-name {
font-size: 30px;
font-weight: bold;
}
.order-tips {
font-size: 14px;
color: #848587;
line-height: 20px;
height: 20px;
padding: 4px;
}
.order-btn-block {
display: flex;
justify-content: flex-end;
padding: 14px 6px;
.order-btn {
padding: 8px 17px;
border: 1px solid #efefef;
border-radius: 23px;
font-size: 14px;
text-align: right;
margin-right: 8px;
}
.order-btn-zailai {
margin-right: 0;
}
.order-btn-disabled {
background: #ccc;
}
.order-bint-play {
background: #3a79f8;
color: #fff;
}
}
}
.left-block {
display: flex;
align-items: center;
}
.m-product-info {
flex: 1;
padding: 5px 10px 10px 5px;
flex-flow: row;
}
/* #ifdef MP-WEIXIN */
.move-area {
margin-top: 44px;
}
/* #endif */
.nav-title {
padding-left: 10px;
font-size: 18px;
font-weight: bold;
}
.coupon-btn {
padding: 0px 15px;
border: 1px solid #efefef;
border-radius: 23px;
font-size: 14px;
text-align: right;
}
.order-info-block {
margin: 10px 8px;
padding: 10px 14px;
.title {
font-size: 18px;
font-weight: bold;
padding: 10px 0;
margin-bottom: 10px;
}
.order-info-item {
display: flex;
margin-bottom: 20px;
color: #424242;
.order-info-item-left {
margin-right: 10px;
min-width: 64px;
}
.order-info-address {
display: flex;
flex-flow: column;
}
}
}
}
.m-cells {
font-size: 28rpx;
border-radius: 9px;
}
.link_kfu {
position: relative;
text-align: center;
background-color: #fff;
margin-top: 20rpx;
height: 80rpx;
line-height: 80rpx;
.kfu_txt {
margin-left: 20rpx;
}
}
.m-order-typetxt {
color: $default-skin-bg;
font-size: 28rpx;
text {
font-size: 24rpx;
}
}
.m-total-price {
text {
font-size: 24rpx;
}
}
.m-addres-info {
padding: 20rpx 0;
background-color: white;
overflow: hidden;
position: relative;
margin-top: 20rpx;
}
.m-ad-name {
display: -webkit-box;
position: relative;
margin-left: 28rpx;
-webkit-box-flex: 1;
height: 20px;
line-height: 20px;
font-weight: 400;
font-size: 14px;
}
.m-ad-name text {
margin: 0 20rpx;
}
.m-ad-name::after {
content: "\e7e0";
position: absolute;
left: -25rpx;
width: 30rpx;
height: 30rpx;
font-family: "iconfont" !important;
text-align: center;
line-height: 35rpx;
font-size: 60rpx;
background-size: cover;
top: 50%;
margin-top: -14rpx;
}
.m-ad-address {
width: 650rpx;
margin-left: 8rpx;
display: -webkit-box;
-webkit-box-flex: 1;
line-height: 40rpx;
font-weight: 400;
font-size: 12px;
position: relative;
padding-left: 40rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: #888;
}
.m-product-all {
margin-top: 20rpx;
}
.total-info {
margin: 10px 8px;
}
.m-panel-hd::after {
border: none;
}
.m-total-info {
padding: 10rpx;
font-size: 24rpx;
color: #000;
}
.m-total-info label {
font-size: 32rpx;
color: $default-skin-bg;
}
.m-total-time {
color: #888;
}
.m-footer-btn {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: #fff;
text-align: right;
box-sizing: border-box;
padding: 20rpx;
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
.u-link-btn {
vertical-align: middle;
display: inline-block;
line-height: 40rpx;
font-size: 24rpx;
padding: 4px 12px;
border-radius: 16px;
}
.m-product-price {
display: flex;
flex-flow: column;
justify-content: space-between;
color: #000;
text-align: center;
min-width: 80px;
.m-product-price-text {
}
}
.m-product-price-amount-block {
font-size: 12px;
text-align: right;
.m-product-price-amount {
font-size: 18px;
}
}
.m-product-price text {
font-size: 18px;
color: #000;
background-color: #fff;
&.mcs {
font-size: 12px;
}
}
.m-product-price label {
&.mcs {
font-size: 12px;
}
}
.massage {
width: 100%;
height: 100rpx;
display: flex;
//border-bottom: 2rpx solid #d9d9d9;
background: #fff;
font-size: 28rpx;
color: #000;
}
.massage-name {
margin-left: 30rpx;
}
.massage-tel {
margin-left: 40rpx;
}
.code1 {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
align-content: space-between;
}
.code image {
width: 50%;
}
.code text {
font-size: 24rpx;
color: #717171;
}
.move-area {
/*
position: absolute;
min-height: 100%;
width: 100%;
*/
}
.move-img {
height: 126rpx;
width: 100rpx;
z-index: 5;
margin-top: 70%;
margin-left: 650rpx;
}
.move-img image {
height: 126rpx;
width: 100rpx;
}
.share-rpk {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
z-index: 5;
}
.share-rpkbox {
width: 640rpx;
height: 698rpx;
background-color: red;
position: absolute;
top: 40%;
left: 50%;
margin-left: -320rpx;
margin-top: -349rpx;
}
.send-rpk {
width: 222rpx;
height: 70rpx;
position: absolute;
left: 50%;
margin-left: -100rpx;
top: 50%;
margin-top: 140rpx;
}
.close-rpk {
width: 50rpx;
height: 50rpx;
position: absolute;
left: 50%;
margin-left: -22rpx;
bottom: 25rpx;
}
.shareCodeImg {
height: 800rpx;
}
.m-product-name {
font-size: 24rpx;
}
.m-product-img {
width: 80px;
height: 80px;
image {
width: 80px;
height: 80px;
padding: 10rpx;
}
}
.m-cell-access .m-cell-ft:after {
margin-top: -8rpx;
}
.link_kfu contact-button {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
}
.m-panel-hd {
padding: 20rpx 30rpx 0rpx;
display: flex;
line-height: 60rpx;
.m-cell {
padding: 0px;
}
.m-cell-access .m-cell-ft:after {
margin-top: -3px;
margin-left: 6rpx;
}
}
</style>