1262 lines
33 KiB
Vue
1262 lines
33 KiB
Vue
<template>
|
||
<view class="order" v-if="loading">
|
||
<view class="order-tip" v-if="order.status === 1">商家正在备货</view>
|
||
<view class="order-tip" v-if="order.status === 0">请在<up-count-down :time="time" @finish="timeFinish" />内支付，逾期将自动取消</view>
|
||
<view class="order-refund box" v-if="order.status === 8 || order.status === 9">
|
||
<up-icon name="checkmark-circle-fill" size="18" :color="Color" />
|
||
<text>交易关闭</text>
|
||
</view>
|
||
<view class="order-refund box" v-if="order.status === 6">
|
||
<up-icon name="checkmark-circle-fill" size="18" :color="Color" />
|
||
<text>退款成功</text>
|
||
</view>
|
||
<view class="order-refund box" v-if="order.status === 5">
|
||
<up-icon name="clock-fill" size="18" :color="Color" />
|
||
<text>退款中</text>
|
||
</view>
|
||
<view class="order-refund box box-jc" style="justify-content: space-between;" v-if="order.status === 4">
|
||
<view class="">
|
||
<up-icon name="checkmark-circle-fill" size="18" :color="Color" />
|
||
<text>已完成</text>
|
||
</view>
|
||
<view class="cart">
|
||
<up-icon name="shopping-cart" :color="Color" size="25" />
|
||
<view class="tag"><up-icon name="checkmark-circle-fill" :color="Color" size="14" /></view>
|
||
</view>
|
||
</view>
|
||
<!-- 海关清关信息 -->
|
||
<view class="customsBox" v-if="order.ships.length == 0 && order.customs_order">
|
||
<view class="tit">海关清关</view>
|
||
<view class="row">{{order.customs_order.created_at}} {{order.customs_order.status_msg}}</view>
|
||
<view class="row" v-if="order.customs_order.customs_status_msg">{{order.customs_order.updated_at}} {{order.customs_order.customs_status_msg}}</view>
|
||
</view>
|
||
<view class="box_order" v-for="ship in order.ships" :key="ship.id">
|
||
<div>
|
||
<view class="left">
|
||
<text @click="toShip(ship.id)">{{ship.company && ship.company.name}} {{ship.ship_sn}}</text>
|
||
<view class="btn" @click="copyBtn(ship.ship_sn)">复制</view>
|
||
</view>
|
||
<div class="logs" @click="toShip(ship.id)" v-if="ship.logs && ship.logs.length !== 0">
|
||
{{ship.logs[0].context}}
|
||
</div>
|
||
</div>
|
||
<up-icon name="arrow-right" :size="20" @click="toShip(ship.id)" />
|
||
</view>
|
||
<view class="order-address box" style="align-items: center;">
|
||
<up-icon name="map-fill" size="55rpx" :color="Color" />
|
||
<view class="order-address-info">
|
||
<view>
|
||
<text class="name">{{order.consignee}}</text>
|
||
<text class="tel">{{order.mobile}}</text>
|
||
</view>
|
||
<view class="address">{{order.address}}</view>
|
||
</view>
|
||
<text class="btn1" @click="showChoose = true" v-if="order.changeAddressType">修改</text>
|
||
</view>
|
||
|
||
<view class="box" style="flex-direction: column;">
|
||
<view class="order-goods" v-for="(item, index) in order.items" :key="index">
|
||
<view class="orderbox">
|
||
<image :src="item.pic_url + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" @click="toGroups(item)"></image>
|
||
<view class="order-goods-info box-jc">
|
||
<view class="order-goods-info-top box-jc">
|
||
<text class="title">{{item.goods_name}}</text>
|
||
<view class="price">
|
||
<text class="icon">￥</text>
|
||
<text>{{item.price}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="order-goods-info-num box-jc" style="justify-content: space-between;">
|
||
<text>{{item.sku_name}}</text>
|
||
<text>x{{item.number}}</text>
|
||
</view>
|
||
<view class="rowBox">
|
||
<view class="cirbox">
|
||
<view class="cir" v-for="itm in item.small_refunds" :key="itm.id" @click.stop="openDetail(itm)">补偿金额{{itm.amount}}元</view>
|
||
</view>
|
||
<view class="">
|
||
<view class="order-goods-info-btn box-jc" style="justify-content: flex-end;flex-wrap: wrap;">
|
||
<!-- 仅有小额退款，没有常规退款的时候，可以再次申请常规退款 -->
|
||
<text class="btn2" @click.stop="toRefund(item)"
|
||
v-if="((order.status !== 0 && order.status !== 4 && order.status !== 7 && order.status !== 8 && order.status !== 9) ||
|
||
(order.status == 4 && order.settle_status == 0)) &&
|
||
(item.refund_status !== 3 && item.refund_status !== 4 && item.refund_status !== 1 && item.refund_status !== 6 && item.refund_status !== 7 || (item.refund_status == 2 && item.could_refund_amount * 100 > 0 && item.refund_amount == 0)) &&
|
||
order.pay_time">
|
||
申请退款
|
||
</text>
|
||
<text class="btn2" @click.stop="toAfterDetail(item.refund.order_refund_apply_id)" v-if="item.status !== 0 && item.refund && item.refund.order_refund_apply_id">售后详情</text>
|
||
</view>
|
||
<view class="order-goods-info-btn box-jc" style="justify-content: flex-end;" v-if="item.refund_status">
|
||
<text class="text" style="color: #F14939;" v-if="item.refund_status === 1">申请退款</text>
|
||
<text class="text" style="color: #F14939;" v-if="item.refund_status === 2">退款成功</text>
|
||
<text class="text" style="color: #F14939;" v-if="item.refund_status === 3">退款中</text>
|
||
<text class="text" style="color: #F14939;" v-if="item.refund_status === 4">拒绝退款</text>
|
||
<text class="text" style="color: #F14939;" v-if="item.refund_status === 6">退款关闭</text>
|
||
<text class="text" style="color: #F14939;" v-if="item.refund_status === 7">待退款</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btnBox" v-if="item.hasrefund">
|
||
<view class="btn2" @click="refundDetail(item.id)">退款详情</view>
|
||
</view>
|
||
<view v-if="(order.status === 0 || order.status == 1 || order.status == 2) && (item.delivery_mode === 1 || item.delivery_mode === 2)" class="mode">
|
||
最晚{{parseTime(item.delivery_expect_time)}}发货
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="order.refund_apply">
|
||
<template v-for="it in order.refund_apply" :key="it.id">
|
||
<view v-if="it.status === 0" class="chuli" @click="toAfterDetail(it.id)">
|
||
<text>待团长处理</text><van-icon name="arrow" color="#999"/>
|
||
</view>
|
||
<view v-if="it.status === 11" class="chuli" @click="toAfterDetail(it.id)">
|
||
<text>团员已取消</text><van-icon name="arrow" color="#999"/>
|
||
</view>
|
||
<view v-if="it.status === 20" class="chuli" @click="toAfterDetail(it.id)">
|
||
<text>团长已同意，待团员退货</text><van-icon name="arrow" color="#999"/>
|
||
</view>
|
||
<view v-if="it.status === 21" class="chuli" @click="toAfterDetail(it.id)">
|
||
<text>团长已拒绝</text><van-icon name="arrow" color="#999"/>
|
||
</view>
|
||
<view v-if="it.status === 22" class="chuli" @click="toAfterDetail(it.id)">
|
||
<text>已填写物流单号，待退款</text><van-icon name="arrow" color="#999"/>
|
||
</view>
|
||
<view v-if="it.status === 30" class="chuli" @click="toAfterDetail(it.id)">
|
||
<text>团员已退货，待退款</text><van-icon name="arrow" color="#999"/>
|
||
</view>
|
||
<view v-if="it.status === 31" class="chuli" @click="toAfterDetail(it.id)">
|
||
<text>退款中</text><van-icon name="arrow" color="#999"/>
|
||
</view>
|
||
<view v-if="it.status === 32" class="chuli" @click="toAfterDetail(it.id)">
|
||
<text>已退款</text><van-icon name="arrow" color="#999"/>
|
||
</view>
|
||
<view v-if="it.status === 33" class="chuli" @click="toAfterDetail(it.id)">
|
||
<text>退款失败</text><van-icon name="arrow" color="#999"/>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
<view class="order-price box-jc">
|
||
<view class="left">
|
||
<text>总价￥{{order.goods_price}}</text>
|
||
<text style="margin-left: 10rpx;">运费￥{{order.freight_price}}</text>
|
||
<text v-if="order.coupon_price != 0">优惠券 ￥{{order.coupon_price}}</text>
|
||
<text v-if="order.active_discount_amount != 0" style="margin-left: 10rpx;">优惠金额
|
||
￥{{order.active_discount_amount}}
|
||
</text>
|
||
<text v-if="order.score_profit != 0">积分抵扣 ￥{{order.score_profit}}</text>
|
||
</view>
|
||
<view class="right">
|
||
<text>实付款:</text>
|
||
<text class="icon">￥</text>
|
||
<text class="price">{{order.total_price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-info box">
|
||
<view class="order-info-item box-jc">
|
||
<text>订单编号</text>
|
||
<text class="text">{{order.order_sn}}</text>
|
||
</view>
|
||
<view class="order-info-item box-jc">
|
||
<text>下单时间</text>
|
||
<text class="text">{{order.created_at}}</text>
|
||
</view>
|
||
<view class="order-info-item box-jc" v-if="order.pay_time">
|
||
<text>付款时间</text>
|
||
<text class="text">{{order.pay_time}}</text>
|
||
</view>
|
||
<!-- <view class="order-info-item box-jc">
|
||
<text>支付方式</text>
|
||
<text class="text">微信支付</text>
|
||
</view> -->
|
||
<view class="order-info-item box-jc" v-if="order.status !== 0">
|
||
<text>支付状态</text>
|
||
<text class="text" v-if="order.pay_time">成功</text>
|
||
<text class="text" v-else>失败</text>
|
||
</view>
|
||
<view class="order-info-item box-jc">
|
||
<text>运费</text>
|
||
<text class="text">￥{{order.freight_price}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-btn box">
|
||
<text class="btn1" v-if="(order.status === 4 || order.status === 7) && !order.has_cross_border && order.invoice" @click="toApply(order)">查看发票</text>
|
||
<text class="btn1" v-if="(order.status === 4 || order.status === 7) && !order.has_cross_border && !order.invoice && getIntervalDay(getOldDay(), order.created_at)" @click="toApply(order)">申请发票</text>
|
||
<view class="btn1" v-if="(order.status == 1 || order.status == 2) && deduct_overtime_ship_on && order.couldShipUrge == 1" @click.stop="toUrgeDelivery()">催发货</view>
|
||
<text class="btn1" v-if="order.status === 0" @click="showCancel = true">取消订单</text>
|
||
<text class="btn3" v-if="order.status === 0" @click="selectMethod(order.id, order.items[0] && order.items[0].level_link_id || 0)">付款</text>
|
||
<!-- <text class="btn1" v-if="order.status === 3">查看物流</text> -->
|
||
<button class="btn1" @click="handleShare()" v-if="order.status !== 0" style="margin-left: 18rpx;">我要晒单</button>
|
||
|
||
<!-- <text class="btn1" v-if="order.status !== 0" @click="adddCartBatch(order.items)">再来一单</text> -->
|
||
<text class="btn1" v-if="order.status === 4" @click="toWrite(order.id)">评论</text>
|
||
<text class="btn3" v-if="order.status === 3" @click="confirmBtn(order.id)">确认收货</text>
|
||
</view>
|
||
|
||
<cancel-order :showCancel="showCancel" @close="showCancel = false" @cancelOrder="handleCancel" />
|
||
|
||
<!-- 客服 -->
|
||
<call-center :show="showService" @close="showService = false" :type="2" :orderId="orderId" />
|
||
|
||
<!-- 催发货 -->
|
||
<urge-delivery :show="showUrge" @close="showUrge = false" :info="orderInfo" @contactTeamer="getImg(1)" />
|
||
|
||
<!-- 隐私协议弹窗 -->
|
||
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
|
||
|
||
<!-- 修改地址 -->
|
||
<choose-addr :show="showChoose" :addrId="addrId" @close="showChoose = false" @choose="chooseFn" />
|
||
|
||
<up-modal :show="showSuccess" :showCancelButton="false" :showConfirmButton="false">
|
||
<view>
|
||
<view slot="title" class="refTitle">
|
||
<van-icon name="checked" size="36" :color="Color" />
|
||
<view>地址修改成功</view>
|
||
</view>
|
||
<view class="mesg">
|
||
<view class="tit">{{addrInfo.province.name}}{{addrInfo.city.name}}{{addrInfo.area.name}}{{addrInfo.address}}</view>
|
||
<text>{{addrInfo.name}} {{addrInfo.mobile}}</text>
|
||
</view>
|
||
<view style="padding: 50rpx 30rpx 30rpx;">
|
||
<view class="remind" @click="showSuccess = false">我知道了</view>
|
||
</view>
|
||
</view>
|
||
</up-modal>
|
||
|
||
<up-popup :show="showMethod" :round="10" mode="bottom" @close="showMethod = false, payData = {}" catchtouchmove="preventDefault" :safe-area-inset-bottom="true">
|
||
<view class="reTitle">
|
||
<text>选择支付方式</text>
|
||
<up-icon name="close" color="#777" size="20" @click="showMethod = false, payData = {}"/>
|
||
</view>
|
||
<view class="payBox">
|
||
<view class="row flex" v-for="it in payList" :key="it.id" @click="pay_method = it.id">
|
||
<view class="flex1">
|
||
<text class="iconfont logo" :class="'icon-' + it.icon" :style="{color: it.color}"></text>
|
||
<text>{{it.name}}</text>
|
||
</view>
|
||
<text class="iconfont icon-checked" v-if="it.id == pay_method"></text>
|
||
<text class="iconfont icon-circle" v-else></text>
|
||
</view>
|
||
</view>
|
||
<view style="padding: 30rpx;box-sizing: border-box;">
|
||
<view @click="toPay()" class="box_btn">支 付</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup :show="showDetail" :round="10" mode="bottom" @close="showDetail = false" catchtouchmove="preventDefault" :safe-area-inset-bottom="true">
|
||
<view class="reTitle">
|
||
<text>退款详情</text>
|
||
<up-icon name="close" color="#777" size="20" @click="showDetail = false"/>
|
||
</view>
|
||
<view class="mesg1">
|
||
<view v-for="(item, index) in refundInfo" :key="item.id" class="rowbox">
|
||
<view class="tat">已退款：{{item.amount}}</view>
|
||
<view class="row is-done">
|
||
<view class="tt">退款完成</view>
|
||
<view class="time">{{item.refund_end_time}}</view>
|
||
<text>钱款退回：{{receiverType[item.receiver_type] ? receiverType[item.receiver_type] : item.receiver_type}}</text>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tt">退款申请</view>
|
||
<view class="time">{{item.created_at}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="padding: 30rpx;">
|
||
<view class="remind" @click="showDetail = false">我知道了</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
</view>
|
||
<div class="top" v-if="top">已确认收货，正在前往晒单...</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, toRefs } from 'vue'
|
||
import { get, post } from '@/api/request.js'
|
||
import callCenter from '@/components/callCenter/index.vue'
|
||
import cancelOrder from '@/components/order/CancelOrder.vue'
|
||
import urgeDelivery from '@/components/order/urgeDelivery.vue'
|
||
import { showToast, adddCartBatch, toWrite, getOldDay, getIntervalDay, uniShare } from '@/components/common.js'
|
||
import { Style, receiverType } from '@/utils/list.js'
|
||
import { sp2 } from '@/components/img.js'
|
||
import { judgePrivacy } from '@/components/common.js'
|
||
import privacyPopup from '@/components/privacyPopup/index.vue'
|
||
import chooseAddr from '@/components/order/chooseAddr.vue'
|
||
|
||
export default {
|
||
components: {
|
||
callCenter,
|
||
cancelOrder,
|
||
urgeDelivery,
|
||
privacyPopup,
|
||
chooseAddr
|
||
},
|
||
setup() {
|
||
const order = ref({})
|
||
const time = ref('')
|
||
const data = reactive({
|
||
complaintImg: '',
|
||
imageUrl: '',
|
||
shareUrl: '',
|
||
top: false,
|
||
id: '',
|
||
refund_mode: uni.getStorageSync('refund_mode') == 1,
|
||
showService: false,
|
||
orderId: '',
|
||
showUrge: false,
|
||
orderInfo: {},
|
||
deduct_overtime_ship_on: Number(uni.getStorageSync('deduct_overtime_ship_on')),
|
||
Color: uni.getStorageSync('theme_color'),
|
||
priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
|
||
sp2: sp2,
|
||
showPrivacy: false,
|
||
loading: false,
|
||
showChoose: false,
|
||
addrId: 0,
|
||
showSuccess: false,
|
||
addrInfo: {
|
||
province: {},
|
||
city: {},
|
||
area: {}
|
||
},
|
||
payData: {},
|
||
pay_method: 'alipay',
|
||
payList: [
|
||
// { id: 'wxpay', icon: 'wxpay', color: '#15BA11', name: '微信支付' },
|
||
{ id: 'alipay', icon: 'alipay', color: '#00A0EA', name: '支付宝' }
|
||
],
|
||
showMethod: false,
|
||
showDetail: false,
|
||
refundInfo: [],
|
||
})
|
||
|
||
async function getInfo(id) {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
})
|
||
await get(`/api/v1/order/${id}`).then((res) => {
|
||
order.value = res.data
|
||
// 支付倒计时
|
||
if (res.data.status === 0) {
|
||
let end_time = res.data.created_at
|
||
let createdAt = new Date(end_time.replace(/-/g, '/')).getTime()
|
||
let endAt = createdAt + 15 * 60 * 1000
|
||
let nowAt = new Date().getTime()
|
||
let timestamp = endAt - nowAt
|
||
time.value = timestamp
|
||
}
|
||
order.value.items.forEach((itm) => {
|
||
itm.hasrefund = false
|
||
if(itm.refund && itm.refund.status == 4) {
|
||
itm.hasrefund = true
|
||
}
|
||
itm.small_refunds && itm.small_refunds.forEach((it) => {
|
||
if(it.status == 4) {
|
||
itm.hasrefund = true
|
||
}
|
||
})
|
||
})
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
// 退款按钮
|
||
function toRefund(item) {
|
||
// refund_mode为true申请退款,false销售二维码退款
|
||
// 待发货
|
||
console.log(data.refund_mode)
|
||
if (item.ship_status === 0) {
|
||
uni.redirectTo({
|
||
url: '/pages/mine/refund/choice/index?id=' + data.id + '&order_id=' + item.id
|
||
})
|
||
} else {
|
||
if (data.refund_mode) {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/refund/service/index?order_id=' + order.value.id
|
||
})
|
||
} else {
|
||
getImg(1)
|
||
}
|
||
}
|
||
}
|
||
|
||
const toAfterDetail = (id) => {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/refund/aftersale/index?refund_id=' + id
|
||
})
|
||
}
|
||
|
||
// 退款进度
|
||
function toRefundDetails() {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/refund/details/index'
|
||
})
|
||
}
|
||
|
||
// 取消订单
|
||
const showCancel = ref(false)
|
||
async function handleCancel(reason) {
|
||
await get(`/api/v1/order/cancel/${order.value.id}`, { reason }).then((res) => {
|
||
showCancel.value = false
|
||
uni.navigateTo({
|
||
url: '/pages/order/cancel/index'
|
||
})
|
||
getInfo(order.value.id)
|
||
})
|
||
}
|
||
|
||
function toShip(id) {
|
||
uni.navigateTo({
|
||
url: '/pages/order/express/index?id=' + id
|
||
})
|
||
}
|
||
|
||
function timeFinish() {
|
||
getInfo(order.value.id)
|
||
}
|
||
|
||
const toGroups = (row) => {
|
||
if (row.shop_group_goods_id) {
|
||
uni.navigateTo({
|
||
url: '/pages/groups/index?id=' + row.shop_group_goods_id
|
||
})
|
||
} else if(row.level_link_id) {
|
||
uni.navigateTo({
|
||
url: '/pages/smallshop/classTwo?id=' + row.shop_goods_id + '&link_id=' + row.level_link_id
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/productDetails/index?id=' + row.shop_goods_id
|
||
})
|
||
}
|
||
}
|
||
|
||
// 联系客服、投诉
|
||
const getImg = (type) => {
|
||
let imgsArray = []
|
||
if (type === 1) {
|
||
data.orderId = order.value.id
|
||
data.showService = true
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/msg/select?order_id=' + data.id
|
||
})
|
||
}
|
||
}
|
||
|
||
const shareBtn = async () => {
|
||
let price = 0
|
||
let goods = {}
|
||
if (order.value.items.length > 1) {
|
||
order.value.items.forEach((j) => {
|
||
if (j.price > price) {
|
||
price = j.price
|
||
goods = j
|
||
}
|
||
})
|
||
} else {
|
||
goods = order.value.items[0]
|
||
}
|
||
await getShareTemplate(goods)
|
||
await getShareUrl(goods)
|
||
}
|
||
|
||
// 获取分享图
|
||
const getShareTemplate = async (id) => {
|
||
await post('/api/v1/sales/share', {
|
||
shop_goods_id: id.shop_group_goods_id != 0 ? id.shop_group_goods_id : id.shop_goods_id
|
||
}).then((res) => {
|
||
res.data.forEach((item) => {
|
||
if (item.type === 4) {
|
||
data.imageUrl = item.image
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
// 分享路径
|
||
const getShareUrl = async (item) => {
|
||
await post('/api/v1/user/share', {
|
||
page: item.shop_group_goods_id != 0 ? 'pages/groups/index' : 'pages/productDetails/index',
|
||
query: item.shop_group_goods_id != 0 ? `id=${item.shop_group_goods_id}` : `id=${item.shop_goods_id}`
|
||
}).then((res) => {
|
||
data.shareUrl = res.data.path
|
||
})
|
||
}
|
||
|
||
// 确认收货
|
||
const confirmBtn = (id) => {
|
||
uni.showModal({
|
||
title: '确认收到货了吗',
|
||
content: '为了保证你的售后权益，请收到商品确认无误后再确认收货',
|
||
confirmColor: '#42b983',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
get(`/api/v1/order/confirm/${id}`).then((res) => {
|
||
getInfo(order.value.id)
|
||
data.top = true
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/order/comment/write?id=' + id
|
||
})
|
||
data.top = false
|
||
}, 1500)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function parseTime(time) {
|
||
let month = Number(time.substr(0, 10).split('-')[1])
|
||
let day = Number(time.substr(0, 10).split('-')[2])
|
||
return month + '月' + day + '日'
|
||
}
|
||
|
||
// 催发货
|
||
function toUrgeDelivery() {
|
||
get('/api/v1/order/urgeShip/' + order.value.id).then((res) => {
|
||
data.orderInfo = {
|
||
...order.value,
|
||
urge_status: res.data.urge_status,
|
||
delivery_time: order.value.delivery_expect_time ? parseTime(order.value.delivery_expect_time) : '',
|
||
deduct_amount: res.data.deduct_amount || 0
|
||
}
|
||
data.showUrge = true
|
||
})
|
||
}
|
||
|
||
async function copyBtn(val) {
|
||
if(await judgePrivacy()) {
|
||
data.showPrivacy = true
|
||
return false
|
||
}
|
||
uni.setClipboardData({
|
||
data: val
|
||
})
|
||
}
|
||
|
||
function toApply(order) {
|
||
if(order.invoice) {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/invoice/detail?id=' + order.invoice.id
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/invoice/apply?id=' + order.id
|
||
})
|
||
}
|
||
}
|
||
|
||
function selectMethod(id, link_id) {
|
||
data.payData = {
|
||
id: id,
|
||
link_id: link_id
|
||
}
|
||
data.pay_method == 'wxpay'
|
||
data.showMethod = true
|
||
}
|
||
|
||
function toPay() {
|
||
if(data.payData.link_id) {
|
||
get(`/api/v1/goods/levelLink/${data.payData.link_id}`).then((res) => {
|
||
if(res.data.add_customer) {
|
||
payAgain(data.payData.id, data.payData.link_id)
|
||
} else {
|
||
payAgain(data.payData.id, 0)
|
||
}
|
||
})
|
||
} else {
|
||
payAgain(data.payData.id, 0)
|
||
}
|
||
}
|
||
|
||
function payAgain(id, link_id) {
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '加载中'
|
||
})
|
||
get(`/api/v1/pay/${id}`, { pay_style: 'app_pay', pay_type: data.pay_method == 'wxpay' ? 1 : 2 }).then((res) => {
|
||
if(data.pay_method == 'wxpay') {
|
||
// 跳转微信小程序
|
||
plus.share.getServices((ress) => {
|
||
let sweixin = null
|
||
for(let i = 0; i < ress.length; i++) {
|
||
if(ress[i].id == 'weixin') {
|
||
sweixin = ress[i]
|
||
}
|
||
}
|
||
if(sweixin) {
|
||
const path = res.data.jump_mini_path
|
||
sweixin.launchMiniProgram({
|
||
id: res.data.jump_mini_org_id, // 原始id：gh_开头 要跳转的微信小程序原始ID
|
||
path,
|
||
type: 0 // 默认为0, 0: 正式版 1：测试版 2：体验版
|
||
}, (success) => {
|
||
|
||
}, (err) => {
|
||
console.log(err)
|
||
return uni.showToast({
|
||
title: '请检查手机是否有微信应用~',
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
} else if(data.pay_method == 'alipay') {
|
||
let alipayUrl = res.data.jump_mini_path
|
||
if (uni.getSystemInfoSync().platform == "ios") {
|
||
alipayUrl = res.data.jump_mini_path.replace('alipays', 'alipay')
|
||
}
|
||
plus.runtime.openURL(alipayUrl)
|
||
}
|
||
uni.hideLoading()
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
|
||
function chooseFn(e) {
|
||
uni.showLoading({
|
||
title: '正在修改...'
|
||
})
|
||
data.addrInfo = e
|
||
let params = {
|
||
order_id: data.id,
|
||
address: {
|
||
consignee: e.name,
|
||
mobile: e.mobile,
|
||
province_id: e.province_id,
|
||
city_id: e.city_id,
|
||
area_id: e.area_id,
|
||
address_detail: e.address,
|
||
address: e.province.name + e.city.name + e.area.name + e.address
|
||
}
|
||
}
|
||
post('/api/v1/order/changeAddress', params).then(async(res) => {
|
||
uni.hideLoading()
|
||
await getInfo(data.id)
|
||
data.showSuccess = true
|
||
})
|
||
}
|
||
|
||
function handleShare() {
|
||
let title = '老板，跟团成功了，期待早日收到货~'
|
||
let imageUrl = data.imageUrl
|
||
let path = data.shareUrl
|
||
uniShare(title, imageUrl, path)
|
||
}
|
||
|
||
function openDetail(row) {
|
||
uni.showModal({
|
||
title: '详情',
|
||
content: '补偿金额' + row.amount + '元，到账时间：' + row.created_at,
|
||
showCancel: false
|
||
})
|
||
}
|
||
|
||
function refundDetail(id) {
|
||
get('/api/v1/order/itemDetail/' + id, {need_refund_detail: 1}).then((res) => {
|
||
let list = []
|
||
list = list.concat(res.refunds || [])
|
||
list = list.concat(res.small_refunds || [])
|
||
data.refundInfo = list
|
||
data.showDetail = true
|
||
})
|
||
}
|
||
|
||
return {
|
||
uniShare,
|
||
getInfo,
|
||
order,
|
||
time,
|
||
toRefund,
|
||
toRefundDetails,
|
||
showCancel,
|
||
handleCancel,
|
||
payAgain,
|
||
toShip,
|
||
toGroups,
|
||
...toRefs(data),
|
||
getImg,
|
||
toWrite,
|
||
shareBtn,
|
||
adddCartBatch,
|
||
confirmBtn,
|
||
toAfterDetail,
|
||
parseTime,
|
||
toUrgeDelivery,
|
||
copyBtn,
|
||
toApply,
|
||
getOldDay,
|
||
getIntervalDay,
|
||
selectMethod,
|
||
toPay,
|
||
chooseFn,
|
||
handleShare,
|
||
openDetail,
|
||
timeFinish,
|
||
receiverType,
|
||
refundDetail
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
this.id = options.id
|
||
// await this.$onLaunched
|
||
},
|
||
async onShow() {
|
||
await this.getInfo(this.id)
|
||
await this.shareBtn()
|
||
this.loading = true
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.order-info-item {
|
||
justify-content: space-between;
|
||
}
|
||
.customsBox{
|
||
background: #fff;
|
||
padding: 24rpx 30rpx;
|
||
margin: 24rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 26rpx;
|
||
line-height: 46rpx;
|
||
color: #666;
|
||
.tit{
|
||
font-size: 28rpx;
|
||
color: #2c2c2c;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.box_order{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
padding: 24rpx;
|
||
margin: 24rpx;
|
||
border-radius: 10rpx;
|
||
.left{
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.btn{
|
||
font-size: 22rpx;
|
||
border: 1rpx solid #2c2c2c;
|
||
border-radius: 20rpx;
|
||
padding: 4rpx 20rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
.logs{
|
||
margin-top: 20rpx;
|
||
font-size: 24rpx;
|
||
color:#666;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
position: fixed;
|
||
top: 40%;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: #fff;
|
||
font-size: 25rpx;
|
||
padding: 25rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.order {
|
||
padding: 1px 0 140rpx;
|
||
&-tip {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
padding-top: 24rpx;
|
||
}
|
||
|
||
.box {
|
||
display: flex;
|
||
padding: 24rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
margin: 24rpx 24rpx 0;
|
||
}
|
||
|
||
.box-jc {
|
||
display: flex;
|
||
}
|
||
|
||
.btn1,
|
||
.btn2,
|
||
.btn3 {
|
||
border-radius: 30rpx;
|
||
padding: 5rpx 20rpx !important;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.btn1 {
|
||
color: #555;
|
||
border: 2rpx solid #bbbbbb;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.btn2 {
|
||
color: v-bind('Color');
|
||
border: 2rpx solid v-bind('Color');
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.btn3 {
|
||
color: #fff;
|
||
background: v-bind('Color');
|
||
}
|
||
|
||
&-refund {
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
|
||
text {
|
||
margin-left: 15rpx;
|
||
}
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.order-express {
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
font-size: 28rpx;
|
||
|
||
.name {
|
||
// margin-right: 30rpx;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
font-size: 26rpx;
|
||
color: v-bind('Color');
|
||
border: 2rpx solid v-bind('Color');
|
||
border-radius: 34rpx;
|
||
padding: 0 10rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.order-address {
|
||
&-info {
|
||
flex: 1;
|
||
margin-left: 14rpx;
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
|
||
.name {
|
||
font-weight: bold;
|
||
color: #2c2c2c;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.address {
|
||
font-size: 24rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
|
||
.btn1 {
|
||
display: inline-table;
|
||
margin: auto;
|
||
margin-left: 30rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.order-goods {
|
||
margin-bottom: 22rpx;
|
||
.orderbox{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
background: #cbcacb;
|
||
border-radius: 10rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
&-info {
|
||
flex-direction: column;
|
||
width: calc(100% - 180rpx);
|
||
|
||
&-top {
|
||
.title {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.price {
|
||
font-size: 34rpx;
|
||
color: v-bind('priceColor');
|
||
margin-left: 10rpx;
|
||
|
||
.icon {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-num,
|
||
.text {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 22rpx;
|
||
}
|
||
|
||
&-btn {
|
||
.btn2 {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
button {
|
||
line-height: 35rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-price {
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 60%;
|
||
color: #7b7b7b;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
text:first-child {
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 40%;
|
||
height: 64rpx;
|
||
line-height: 58rpx;
|
||
text-align: right;
|
||
|
||
.icon,
|
||
.price {
|
||
color: v-bind('priceColor');
|
||
}
|
||
|
||
.icon {
|
||
margin-left: 5rpx;
|
||
}
|
||
|
||
.price {
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-goods-btn {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
font-size: 24rpx;
|
||
margin-top: 22rpx;
|
||
|
||
text:not(:first-child) {
|
||
margin-left: 18rpx;
|
||
}
|
||
}
|
||
|
||
.order-info {
|
||
padding: 0 30rpx;
|
||
flex-direction: column;
|
||
|
||
&-item {
|
||
font-size: 30rpx;
|
||
height: 90rpx;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
border-bottom: 2rpx solid #e5e5e5;
|
||
|
||
.text {
|
||
font-size: 26rpx;
|
||
color: #555555;
|
||
}
|
||
}
|
||
|
||
&-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.order-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
margin: 0;
|
||
width: calc(100% - 60rpx);
|
||
justify-content: flex-end;
|
||
font-size: 30rpx;
|
||
|
||
text:not(:first-child) {
|
||
margin-left: 18rpx;
|
||
}
|
||
|
||
.btn3 {
|
||
min-width: 170rpx;
|
||
}
|
||
|
||
button {
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chuli{
|
||
padding: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #F7F7F7;
|
||
margin-bottom: 16rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
.mode{
|
||
font-size: 24rpx;
|
||
color: #000;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
.cart{
|
||
position: relative;
|
||
.tag{
|
||
width: 14px;
|
||
height: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
top: -6rpx;
|
||
right: -10rpx;
|
||
}
|
||
}
|
||
.refTitle{
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
padding: 30rpx 0;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
}
|
||
.refTitle1{
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
padding: 0 30rpx 0;
|
||
box-sizing: border-box;
|
||
font-weight: 600;
|
||
}
|
||
.mesg1{
|
||
font-size: 28rpx;
|
||
color: #303030;
|
||
padding: 30rpx 30rpx 0;
|
||
box-sizing: border-box;
|
||
height: 65vh;
|
||
overflow: auto;
|
||
.rowbox{
|
||
border-top: 1rpx solid #eee;
|
||
padding-top: 20rpx;
|
||
}
|
||
.tat{
|
||
font-size: 30rpx;
|
||
color: v-bind('Color');
|
||
font-weight: 600;
|
||
}
|
||
.row{
|
||
padding-left: 54rpx;
|
||
position: relative;
|
||
padding-bottom: 16rpx;
|
||
.tt{
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
.time{
|
||
font-size: 24rpx;
|
||
color: #98989F;
|
||
}
|
||
text{
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 40rpx;
|
||
}
|
||
&:before {
|
||
position: absolute;
|
||
margin-top: 16rpx;
|
||
left: 9rpx;
|
||
content: ' ';
|
||
height: 20rpx;
|
||
width: 20rpx;
|
||
border-radius: 50%;
|
||
background-color: #e8e8e8;
|
||
}
|
||
|
||
&:after {
|
||
position: absolute;
|
||
top: 32rpx;
|
||
left: 16rpx;
|
||
bottom: -38rpx;
|
||
content: ' ';
|
||
width: 2rpx;
|
||
border-right: 2rpx solid #e8e8e8;
|
||
}
|
||
&:not(:first-child) {
|
||
padding-top: 16rpx;
|
||
}
|
||
&:last-child {
|
||
&:after {
|
||
display: none;
|
||
}
|
||
}
|
||
&.is-done {
|
||
.tt{
|
||
color: #333;
|
||
}
|
||
&:after {
|
||
border-color: v-bind('Color');
|
||
}
|
||
&:before {
|
||
background-color: v-bind('Color');
|
||
box-shadow: v-bind('Color') 0 0 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.mesg{
|
||
font-size: 26rpx;
|
||
color: #303030;
|
||
padding: 30rpx;
|
||
background-color: #F8F8F8;
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
.tit{
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
.remind{
|
||
width: 100%;
|
||
height: 72rpx;
|
||
background: v-bind('Color');
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 72rpx;
|
||
}
|
||
.icon-checked{
|
||
color: v-bind('Color');
|
||
}
|
||
.icon-circle{
|
||
color: #aaa;
|
||
}
|
||
.reTitle{
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
background-color: #F6F6F6;
|
||
border-radius: 10px 10px 0 0;
|
||
}
|
||
.payBox{
|
||
background: #ffffff;
|
||
border-radius: 10rpx;
|
||
padding: 30rpx;
|
||
font-size: 28rpx;
|
||
height: 40vh;
|
||
.row{
|
||
padding: 20rpx 0;
|
||
.logo{
|
||
font-size: 16px;
|
||
margin-right: 10rpx;
|
||
display: inline-block;
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.flex1{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.box_btn{
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: v-bind('Color');
|
||
font-size: 30rpx;
|
||
border-radius: 80rpx;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
}
|
||
.rowBox{
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.cirbox{
|
||
width: calc(100% - 150rpx);
|
||
.cir{
|
||
height: 20px;
|
||
line-height: 20px;
|
||
padding: 0 5px;
|
||
margin-bottom: 5px;
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #F56C6C;
|
||
border: 1rpx solid #F56C6C;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
</style>
|