java-mall-app/member/order/detail.vue

2843 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) {
// 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>