chenghuan
0506cbccc1
- 修改支付商户相关表单项的标签，从“微信支付商户”更改为“支付商户”，以提高表述准确性 - 在订单详情中添加支付商户的显示逻辑，根据不同的支付商户值显示相应的名称 (众妙、灵枢)
1317 lines
40 KiB
Vue
1317 lines
40 KiB
Vue
<template>
|
||
<div class="mod-config">
|
||
<!-- 订单详细更新 -->
|
||
<div class="orderType">
|
||
<span v-if="orderDetails.orderStatus == 0" class="item hightLight0"
|
||
>待付款</span
|
||
>
|
||
<span v-if="orderDetails.orderStatus == 1" class="item hightLight1"
|
||
>待发出</span
|
||
>
|
||
<span v-if="orderDetails.orderStatus == 2" class="item hightLight2"
|
||
>已发出</span
|
||
>
|
||
<span v-if="orderDetails.orderStatus == 3" class="item hightLight3"
|
||
>已完成</span
|
||
>
|
||
</div>
|
||
<div>
|
||
<ul class="list">
|
||
<div v-if="orderDetails.userInfo">
|
||
<div class="liName">用户信息</div>
|
||
<li>
|
||
<span class="infoTitle">用户名：</span
|
||
><span>{{
|
||
orderDetails.userInfo.userName !== null
|
||
? orderDetails.userInfo.userName
|
||
: "暂无"
|
||
}}</span>
|
||
</li>
|
||
<!-- <li><span class="infoTitle">用户ID：</span><span>{{orderDetails.userId}}</span></li> -->
|
||
<li>
|
||
<span class="infoTitle">联系电话：</span
|
||
><span>{{ orderDetails.userInfo.userPhone }}</span>
|
||
</li>
|
||
<li style="clear:both"></li>
|
||
<!-- <li><span class="infoTitle">电 话：</span><span>187898544875</span></li> -->
|
||
<!-- <li><span class="infoTitle">地 址：</span><span>天津市天津市天津市天津市天津市天津市</span></li> -->
|
||
<li class="line"></li>
|
||
</div>
|
||
<div class="liName">订单信息</div>
|
||
<li>
|
||
<span class="infoTitle">订单ID：</span
|
||
><span>{{ orderDetails.orderSn }}</span>
|
||
</li>
|
||
<li>
|
||
<span class="infoTitle">订单状态：</span>
|
||
<span v-if="orderDetails.orderStatus == 0" class="hightLight"
|
||
>待付款</span
|
||
>
|
||
<span v-if="orderDetails.orderStatus == 1" class="hightLight"
|
||
>待发出</span
|
||
>
|
||
<span v-if="orderDetails.orderStatus == 2" class="hightLight"
|
||
>已发出</span
|
||
>
|
||
<span v-if="orderDetails.orderStatus == 3" class="hightLight"
|
||
>已完成</span
|
||
>
|
||
<!-- <el-button v-if="orderDetails.orderStatus == 1" @click="godeliver" class="text_button" size="mini" type="text">去发出</el-button> -->
|
||
</li>
|
||
<!-- <li><span class="infoTitle">商品总数：</span><span>{{orderDetails.}}</span></li> -->
|
||
<!-- <li>
|
||
<span class="infoTitle">订单金额：</span
|
||
><span>￥{{ orderDetails.orderPrice }}</span>
|
||
</li>
|
||
<li>
|
||
<span class="infoTitle">交付邮费：</span
|
||
><span>￥{{ orderDetails.shippingPrice }}</span>
|
||
</li>
|
||
|
||
<li v-if="orderDetails.orderStatus > 0">
|
||
<span class="infoTitle">实际支付金额：</span
|
||
><span>￥{{ orderDetails.realPrice }}</span>
|
||
</li> -->
|
||
<li>
|
||
<span class="infoTitle">创建时间：</span
|
||
><span>{{ orderDetails.createTime }}</span>
|
||
</li>
|
||
<li v-if="orderDetails.orderStatus > 0">
|
||
<span class="infoTitle">支付时间：</span
|
||
><span>{{ orderDetails.paymentDate }}</span>
|
||
</li>
|
||
<li style="width: 100%;" v-if="orderDetails.orderStatus > 0">
|
||
<span class="infoTitle">支付方式：</span>
|
||
<span v-if="orderDetails.paymentMethod == 2"
|
||
><icon-svg name="zhifubao"></icon-svg> <span>支付宝支付</span></span
|
||
>
|
||
<span v-if="orderDetails.paymentMethod == 1"
|
||
><icon-svg name="weixin"></icon-svg> <span>微信支付</span></span
|
||
>
|
||
<span v-if="orderDetails.paymentMethod == 4"
|
||
><img
|
||
src="../../../../static/img/oder_chong.png"
|
||
width="22px"
|
||
height="22px"
|
||
/>
|
||
<span>天医币支付</span></span
|
||
>
|
||
<span v-if="orderDetails.paymentMethod == 3">
|
||
|
||
<span>IOS内购</span>
|
||
</span>
|
||
<span v-if="orderDetails.payMerchant == 0">(众妙)</span>
|
||
<span v-if="orderDetails.payMerchant == 1">(灵枢)</span>
|
||
</li>
|
||
|
||
<li
|
||
style="width: 100%;"
|
||
v-if="orderDetails.paymentMethod == 2 && orderDetails.orderStatus > 0"
|
||
>
|
||
<span class="infoTitle">商家订单号：</span>
|
||
<span>{{ orderDetails.outTradeNo }}</span>
|
||
</li>
|
||
<li
|
||
style="width: 100%;"
|
||
v-if="orderDetails.paymentMethod == 2 && orderDetails.orderStatus > 0"
|
||
>
|
||
<span class="infoTitle">支付宝订单号：</span>
|
||
<span>{{ orderDetails.tradeNo }}</span>
|
||
</li>
|
||
<li class="line"></li>
|
||
<div style="clear:both"></div>
|
||
<div>
|
||
<div class="liName">支付信息</div>
|
||
<li>
|
||
<span class="infoTitle">订单金额：</span
|
||
><span>￥{{ orderDetails.orderPrice }}</span>
|
||
</li>
|
||
<li>
|
||
<span class="infoTitle">交付邮费：</span
|
||
><span
|
||
>￥{{
|
||
orderDetails.shippingPrice ? orderDetails.shippingPrice : 0
|
||
}}</span
|
||
>
|
||
</li>
|
||
|
||
<li>
|
||
<span class="infoTitle"
|
||
><span class="DiscountColor" style="font-weight: bold;">VIP </span
|
||
>立减：</span
|
||
><span
|
||
v-if="orderDetails.vipDiscountAmount > 0"
|
||
|
||
>-</span
|
||
>
|
||
<span
|
||
|
||
>￥{{ orderDetails.vipDiscountAmount }}</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<span class="infoTitle">活动立减：</span
|
||
><span v-if="orderDetails.districtPrice > 0"
|
||
>-</span
|
||
>
|
||
<span
|
||
>￥{{
|
||
orderDetails.districtPrice ? orderDetails.districtPrice : 0
|
||
}}</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<span class="infoTitle">积分抵扣：</span
|
||
><span
|
||
|
||
v-if="orderDetails.jfDeduction > 0"
|
||
>-</span
|
||
>
|
||
<span
|
||
|
||
>{{ orderDetails.jfDeduction }}</span
|
||
>
|
||
<span
|
||
|
||
v-if="orderDetails.jfDeduction > 0"
|
||
>积分</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<span class="infoTitle">天医币抵扣：</span
|
||
><span
|
||
v-if="
|
||
orderDetails.paymentMethod == 4 && orderDetails.realPrice > 0
|
||
"
|
||
|
||
>- {{ orderDetails.realPrice }}
|
||
</span>
|
||
<span
|
||
v-if="
|
||
orderDetails.paymentMethod == 4 && orderDetails.realPrice == 0
|
||
"
|
||
>0
|
||
</span>
|
||
</li>
|
||
|
||
<li v-if="orderDetails.orderStatus > 0" style="width: 100%;">
|
||
<span class="infoTitle">实际支付：</span>
|
||
<span v-if="orderDetails.orderType == 'point'"
|
||
>￥{{ orderDetails.realPrice }}</span
|
||
>
|
||
|
||
<span class="DiscountColor" v-else>
|
||
<span v-if="orderDetails.realPrice > 0">
|
||
￥{{ orderDetails.realPrice }}
|
||
|
||
<span style="" v-if="orderDetails.paymentMethod == 1"
|
||
>微信支付</span
|
||
>
|
||
<span style="" v-if="orderDetails.paymentMethod == 2"
|
||
>支付宝支付</span
|
||
>
|
||
<span style="" v-if="orderDetails.paymentMethod == 3"
|
||
>苹果支付</span
|
||
>
|
||
<span style="" v-if="orderDetails.paymentMethod == 4">
|
||
天医币支付
|
||
</span>
|
||
</span>
|
||
|
||
|
||
<span
|
||
style="margin: 0 4rpx"
|
||
v-if="
|
||
orderDetails.realPrice > 0 && orderDetails.jfDeduction > 0
|
||
"
|
||
>
|
||
+
|
||
</span>
|
||
|
||
<span v-if="orderDetails.jfDeduction > 0"
|
||
>{{ orderDetails.jfDeduction }} 积分</span
|
||
>
|
||
</span>
|
||
</li>
|
||
<li class="line"></li>
|
||
<div style="clear:both"></div>
|
||
</div>
|
||
|
||
<!-- <div v-if="orderDetails.orderStatus > 0">
|
||
<div class="liName">优惠信息</div>
|
||
|
||
<li>
|
||
<span class="infoTitle">优惠抵扣：</span
|
||
><span>{{ orderDetails.districtPrice }}</span>
|
||
</li>
|
||
<li class="line"></li>
|
||
</div> -->
|
||
<!-- <div style="clear:both"></div> -->
|
||
<!-- 订单商品 -->
|
||
<div class="liName">商品信息</div>
|
||
<el-table
|
||
:data="orderDetails.trainingClassData"
|
||
style="width: 100%"
|
||
v-if="orderDetails.orderType == 'trainingClass'"
|
||
>
|
||
<el-table-column label="商品名" min-width="280">
|
||
<template slot-scope="scope">
|
||
<div class="flexbox">
|
||
<!-- <img
|
||
style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;"
|
||
:src="scope.row.productImage"
|
||
width="30px"
|
||
height="30px"
|
||
/> -->
|
||
<div class="proname">
|
||
{{ scope.row.productName }}
|
||
<i
|
||
v-if="scope.row.books && scope.row.books.length > 0"
|
||
@click.stop="seeBooks(scope.row.books)"
|
||
class="el-icon-view"
|
||
style="color:#409eff; cursor: pointer;"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="productPrice" label="价格" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="quantity" label="数量" width="80">
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-table
|
||
:data="orderDetails.relearnData"
|
||
style="width: 100%"
|
||
v-else-if="orderDetails.orderType == 'relearn'"
|
||
>
|
||
<el-table-column label="商品名" min-width="280">
|
||
<template slot-scope="scope">
|
||
<div class="flexbox">
|
||
<!-- <img
|
||
style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;"
|
||
:src="scope.row.productImage"
|
||
width="30px"
|
||
height="30px"
|
||
/> -->
|
||
<div class="proname">
|
||
{{ scope.row.productName }}
|
||
<i
|
||
v-if="scope.row.books && scope.row.books.length > 0"
|
||
@click.stop="seeBooks(scope.row.books)"
|
||
class="el-icon-view"
|
||
style="color:#409eff; cursor: pointer;"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="productPrice" label="价格" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="quantity" label="数量" width="80">
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-table
|
||
:data="orderDetails.vipData"
|
||
style="width: 100%"
|
||
v-else-if="orderDetails.orderType == 'vip'"
|
||
>
|
||
<el-table-column label="商品名" min-width="280">
|
||
<template slot-scope="scope">
|
||
<div class="flexbox">
|
||
<!-- <img
|
||
style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;"
|
||
:src="scope.row.productImage"
|
||
width="30px"
|
||
height="30px"
|
||
/> -->
|
||
<div class="proname">
|
||
{{ scope.row.productName }}
|
||
<i
|
||
v-if="scope.row.books && scope.row.books.length > 0"
|
||
@click.stop="seeBooks(scope.row.books)"
|
||
class="el-icon-view"
|
||
style="color:#409eff; cursor: pointer;"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="productPrice" label="价格" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="quantity" label="数量" width="80">
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-table
|
||
:data="orderDetails.aiVipData"
|
||
style="width: 100%"
|
||
v-else-if="orderDetails.orderType == 'aiVip'||orderDetails.orderType == 'upgradeAiVip'"
|
||
>
|
||
<el-table-column label="商品名" min-width="280">
|
||
<template slot-scope="scope">
|
||
<div class="flexbox">
|
||
<div class="proname">
|
||
{{ scope.row.productName }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="productPrice" label="价格" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="quantity" label="数量" width="80"></el-table-column>
|
||
</el-table>
|
||
|
||
<el-table :data="orderDetails.goodsList" style="width: 100%" v-else>
|
||
<el-table-column label="商品名" width="280">
|
||
<template slot-scope="scope">
|
||
<div class="flexbox">
|
||
<img
|
||
style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;"
|
||
:src="scope.row.productImage"
|
||
width="30px"
|
||
height="30px"
|
||
/>
|
||
<div class="proname">
|
||
{{ scope.row.productName }}
|
||
<i
|
||
v-if="scope.row.books && scope.row.books.length > 0"
|
||
@click.stop="seeBooks(scope.row.books)"
|
||
class="el-icon-view"
|
||
style="color:#409eff; cursor: pointer;"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="productPrice" label="价格" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="quantity" label="数量" width="80">
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="orderDetails.consignee" style="margin-top:20px">
|
||
<div class="liName">
|
||
物流信息
|
||
|
||
<a
|
||
href="#"
|
||
@click="changeAddressShow"
|
||
v-if="orderDetails.orderStatus <= 1 && pageType != 'user'"
|
||
><i class="el-icon-edit"></i>修改收件信息</a
|
||
>
|
||
</div>
|
||
<div style="background:#f9f9f9; padding:5px; overflow:hidden; ">
|
||
<li>
|
||
<span class="infoTitle">收件人：</span
|
||
><span>{{ orderDetails.consignee.consigneeName }}</span
|
||
> <span>{{
|
||
orderDetails.consignee.consigneeMobile
|
||
}}</span>
|
||
</li>
|
||
<li>
|
||
<span class="infoTitle">收件地址：</span
|
||
><span
|
||
>{{ orderDetails.consignee.province }}-{{
|
||
orderDetails.consignee.city
|
||
}}-{{ orderDetails.consignee.county }}-{{
|
||
orderDetails.consignee.address
|
||
}}</span
|
||
>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
<!-- <el-alert title="`该订单下共有 2 条物流信息`" type="info">
|
||
</el-alert> -->
|
||
<li
|
||
class="flexbox deliverBox"
|
||
style="width: 100%;"
|
||
v-if="
|
||
orderDetails.orderStatus > 0 && sheetList && sheetList.length > 0
|
||
"
|
||
>
|
||
<el-row
|
||
:gutter="20"
|
||
style="flex-wrap:wrap; width: 100%;"
|
||
class="flexbox"
|
||
>
|
||
<el-col
|
||
:md="12"
|
||
:lg="12"
|
||
class="item"
|
||
v-for="(item, index) in sheetList"
|
||
:key="index"
|
||
>
|
||
<div class="deliver_heade">
|
||
<!-- <div><span class="infoTitle">物流公司：</span><span>{{item.expressCompanyName}}</span></div> -->
|
||
<div>
|
||
<span class="infoTitle"
|
||
>快递包裹 {{ index + 1 }} 运单号：</span
|
||
><span style="margin-right:10px">{{
|
||
item.expressOrderSn
|
||
}}</span>
|
||
<span
|
||
v-if="item.showProduct"
|
||
style="color:#409eff; cursor: pointer;"
|
||
@click.stop="showProducts(item, index)"
|
||
>
|
||
<i class="el-icon-arrow-up myicon"></i>隐藏包裹内商品</span
|
||
>
|
||
<span
|
||
v-else
|
||
style="color:#409eff; cursor: pointer;"
|
||
@click.stop="showProducts(item, index)"
|
||
>
|
||
<i class="el-icon-arrow-down myicon"></i
|
||
>显示包裹内商品</span
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
plain
|
||
@click="seeSheetDetails(item)"
|
||
style="margin-left:10px"
|
||
>查看物流进度</el-button
|
||
>
|
||
<!-- 包含的订单商品信息 -->
|
||
<div
|
||
class=""
|
||
v-if="showChange && item.showProduct"
|
||
style="margin-top:15px; overflow:hidden; background:#f9f9f9; padding:10px;"
|
||
>
|
||
<ul class="sheetOrdersUl" style="overflow:hidden">
|
||
<li
|
||
style="flex-wrap:wrap; margin-bottom:10px; width: 100%;"
|
||
>
|
||
<!-- <div style="width:100%" v-if="showChange">订单编号：{{item.orderSn}}</div> -->
|
||
<div>
|
||
<div
|
||
class="flexbox"
|
||
v-for="item2 in item.products"
|
||
:key="item2.productId"
|
||
style="align-items:center; margin-bottom:10px"
|
||
>
|
||
<div class="img">
|
||
<img
|
||
style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;"
|
||
:src="item2.productImages"
|
||
width="60px"
|
||
height="60px"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<span
|
||
>{{ item2.productName }} [ ×{{
|
||
item2.quantity
|
||
}}
|
||
]</span
|
||
>
|
||
</div>
|
||
<div style="color:#999">
|
||
所属订单：{{ item2.orderSn }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</li>
|
||
<li class="line" style="margin:10px 0;"></li>
|
||
<div v-if="pageType != 'user'">
|
||
<li
|
||
style="text-align: right;width: 100%;"
|
||
v-if="
|
||
orderDetails.orderStatus == 0 || orderDetails.orderStatus == 1
|
||
"
|
||
>
|
||
<el-button
|
||
type="danger"
|
||
style=""
|
||
size="mini"
|
||
plain
|
||
@click="deleteOrder()"
|
||
>删除订单</el-button
|
||
>
|
||
</li>
|
||
</div>
|
||
</ul>
|
||
</div>
|
||
<!-- 抽屉 -->
|
||
<el-dialog
|
||
title="物流详情"
|
||
:visible.sync="tracesShow"
|
||
@close="drawerHandleClose"
|
||
append-to-body
|
||
>
|
||
<div class="deliver_info">
|
||
<div>
|
||
运单信息：{{ currentSheet.expressCompanyName }} -
|
||
{{ currentSheet.expressOrderSn }}
|
||
</div>
|
||
<div
|
||
class="scroll"
|
||
style="padding: 10px;"
|
||
v-if="traces && traces.length > 0"
|
||
>
|
||
<el-timeline :reverse="reverse">
|
||
<el-timeline-item
|
||
v-for="(activity, index2) in traces"
|
||
:key="index2"
|
||
:icon="activity.icon"
|
||
:timestamp="activity.acceptTime"
|
||
>
|
||
{{ activity.acceptStation }}
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
<div v-else class="noinfo">-暂无物流信息-</div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="修改收件信息"
|
||
:visible.sync="changeAddVisible"
|
||
width="500"
|
||
:close="changeAddHandleClose"
|
||
append-to-body
|
||
>
|
||
<div>
|
||
<el-form
|
||
ref="addressFormRef"
|
||
:model="addressForm"
|
||
label-width="120px"
|
||
:rules="addressFormRule"
|
||
>
|
||
<el-form-item label="收件人:" prop="name">
|
||
<el-input v-model="addressForm.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="收件联系电话:" prop="tel">
|
||
<el-input v-model="addressForm.tel"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="收件地址:">
|
||
<!-- <el-input v-model="addressForm.address"></el-input> -->
|
||
<!-- 省市区-->
|
||
<!-- 省 -->
|
||
<el-select
|
||
v-model="addressForm.provinceCode"
|
||
placeholder="请选择省份"
|
||
style="width:200px"
|
||
@change="provinceChange"
|
||
>
|
||
<el-option
|
||
v-for="item in provinceEntity"
|
||
:key="item.regionCode"
|
||
:label="item.provName"
|
||
:value="item.regionCode"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<el-select
|
||
v-model="addressForm.cityCode"
|
||
placeholder="请选择市"
|
||
@change="cityChange"
|
||
>
|
||
<el-option
|
||
v-for="item in cityEntity.cityList"
|
||
:key="item.regionCode"
|
||
:label="item.cityName"
|
||
:value="item.regionCode"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<el-select
|
||
v-model="addressForm.countyCode"
|
||
placeholder="请选择区"
|
||
@change="countyChange"
|
||
>
|
||
<el-option
|
||
v-for="item in countyEntity.countyList"
|
||
:key="item.regionCode"
|
||
:label="item.countyName"
|
||
:value="item.regionCode"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="详细地址:" prop="addressXX">
|
||
<el-input
|
||
type="textarea"
|
||
v-model="addressForm.addressXX"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="changeAddHandleClose">取 消</el-button>
|
||
<el-button type="primary" @click="changeAddress">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
center
|
||
title="商品包含的书籍信息"
|
||
:visible.sync="booksShow"
|
||
width="500"
|
||
:close="booksHandleClose"
|
||
append-to-body
|
||
>
|
||
<div>
|
||
<span>该商品共包含了 {{ currBookLIst.length }} 个书籍</span>
|
||
<ul class="booksUl ">
|
||
<li class="flexbox" v-for="item in currBookLIst" :key="item.id">
|
||
<div class="img">
|
||
<img
|
||
style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;"
|
||
:src="item.images"
|
||
width="100px"
|
||
height="100px"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<span>{{ item.name }}[{{ item.id }}]</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="booksHandleClose">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
|
||
<setDeliverDialog
|
||
ref="setDeliverDialog"
|
||
:visible="setDeliverVisible"
|
||
:selectData="orderList"
|
||
@closeDeliverDialog="closeDeliverDialog"
|
||
></setDeliverDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import AddOrUpdate from "./buyorderdetail-add-or-update";
|
||
import setDeliverDialog from "./set-deliver-dialog";
|
||
export default {
|
||
props: ["orderSn", "pageType"],
|
||
data() {
|
||
return {
|
||
orderList: [],
|
||
dataForm: {
|
||
key: ""
|
||
},
|
||
traces: [], // 物流轨迹
|
||
tracesShow: false,
|
||
currentSheet: {},
|
||
|
||
reverse: true,
|
||
activities: [],
|
||
deliverData: [], // 物流信息
|
||
|
||
setDeliverVisible: false,
|
||
dataListLoading: false,
|
||
dataListSelections: [],
|
||
// addOrUpdateVisible: false,
|
||
query: {
|
||
orderSn: 0,
|
||
ordertype: null
|
||
},
|
||
changeAddVisible: false,
|
||
orderDetails: {},
|
||
addressForm: {
|
||
provinceCode: null, //省份串码
|
||
provinceName: null,
|
||
cityCode: null, //市区串码
|
||
cityName: null,
|
||
countyCode: null, //省份串码
|
||
countyName: null,
|
||
name: "",
|
||
tel: "",
|
||
addressXX: ""
|
||
},
|
||
provinceEntity: [], // 城市列表
|
||
cityEntity: [], // 市
|
||
countyEntity: [], // 区
|
||
optionProps: {
|
||
checkStrictly: true,
|
||
value: "regionCode",
|
||
label: "provName",
|
||
children: "children"
|
||
},
|
||
addressFormRule: {
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: "请输入收件人信息",
|
||
trigger: "blur"
|
||
}
|
||
],
|
||
tel: [
|
||
{
|
||
required: true,
|
||
message: "请输入收件联系电话信息",
|
||
trigger: "blur"
|
||
}
|
||
],
|
||
county: [
|
||
{
|
||
required: true,
|
||
message: "请选择收件地址",
|
||
trigger: "blur"
|
||
}
|
||
],
|
||
addressXX: [
|
||
{
|
||
required: true,
|
||
message: "请输入详细地址信息",
|
||
trigger: "blur"
|
||
}
|
||
]
|
||
},
|
||
sheetList: [], // 面单列表
|
||
currBookLIst: [],
|
||
booksShow: false,
|
||
showChange: true
|
||
};
|
||
},
|
||
components: {
|
||
AddOrUpdate
|
||
},
|
||
activated() {
|
||
this.query.orderSn = this.$route.query.orderSn;
|
||
this.query.ordertype = this.$route.query.ordertype;
|
||
// console.log(this.$route.query.orderSn)
|
||
this.getData();
|
||
// this.getOrderSheetList()
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.query.orderSn = this.orderSn;
|
||
this.query.ordertype = this.$route.query.ordertype;
|
||
// console.log(this.$route.query.orderSn)
|
||
this.getData();
|
||
},
|
||
showProducts(item, index) {
|
||
this.showChange = false;
|
||
this.sheetList[index].showProduct = !item.showProduct;
|
||
this.showChange = true;
|
||
// console.log(this.sheetList,'this.sheetList[index].showProduct')
|
||
},
|
||
seeBooks(arr) {
|
||
this.currBookLIst = arr;
|
||
this.booksShow = true;
|
||
},
|
||
booksHandleClose() {
|
||
this.currBookLIst = [];
|
||
this.booksShow = false;
|
||
},
|
||
drawerHandleClose() {
|
||
// console.log('关闭')
|
||
this.traces = [];
|
||
this.tracesShow = false;
|
||
this.currentSheet = {};
|
||
},
|
||
// 获取某一快递的物流进度
|
||
seeSheetDetails(item) {
|
||
// console.log('正在查询快递进度',item)
|
||
this.currentSheet = item;
|
||
let loading = this.$loading({
|
||
lock: true,
|
||
text: "正在获取物流信息...",
|
||
spinner: "el-icon-loading",
|
||
background: "rgba(0, 0, 0, 0.7)"
|
||
});
|
||
// var mobileLeng = this.orderDetails.consignee.consigneeMobile.length
|
||
this.$http({
|
||
url: this.$http.adornUrl("/book/buyOrder/searchExpress"),
|
||
method: "get",
|
||
params: this.$http.adornParams({
|
||
expressOrderSn: item.expressOrderSn
|
||
// 'expressCompanyCode': item.expressCompanyCode,
|
||
// 'customerName': this.orderDetails.consignee.consigneeMobile.substring(mobileLeng-4, mobileLeng)
|
||
})
|
||
})
|
||
.then(({ data }) => {
|
||
if (data.code == 0) {
|
||
if (data.express.traces.length > 0) {
|
||
this.traces = data.express.traces;
|
||
this.tracesShow = true;
|
||
// console.log(data,'data')
|
||
loading.close();
|
||
} else {
|
||
this.$message("暂无物流信息哦~");
|
||
loading.close();
|
||
}
|
||
}
|
||
})
|
||
.catch(({ e }) => {
|
||
console.log(e, "e");
|
||
loading.close();
|
||
});
|
||
},
|
||
countyChange(e) {
|
||
// console.log(e,'countyName')
|
||
this.countyEntity.countyList.find((val, index, arr) => {
|
||
this.addressForm.countyName = val.countyName;
|
||
return val.regionCode == e;
|
||
});
|
||
// console.log('this.addressForm.countyName', this.addressForm)
|
||
},
|
||
cityChange(e) {
|
||
// console.log('修改了市',e)
|
||
this.addressForm.countyCode = null;
|
||
this.countyEntity = this.cityEntity.cityList.find((val, index, arr) => {
|
||
this.addressForm.cityName = val.cityName;
|
||
return val.regionCode == e;
|
||
});
|
||
// console.log(' this.addressForm.cityName', this.addressForm.cityName)
|
||
},
|
||
provinceChange(e) {
|
||
// console.log('修改了省份',e)
|
||
this.addressForm.cityCode = null;
|
||
this.addressForm.countyCode = null;
|
||
this.cityEntity = this.provinceEntity.find((val, index, arr) => {
|
||
this.addressForm.provinceName = val.provName;
|
||
return val.regionCode == e;
|
||
});
|
||
// console.log('this.addressForm.provinceName',this.addressForm.provinceName)
|
||
},
|
||
changeAddHandleClose() {
|
||
this.changeAddVisible = false;
|
||
this.addressForm.provinceCode = null;
|
||
this.addressForm.cityCode = null;
|
||
this.addressForm.countyCode = null;
|
||
this.addressForm.provinceName = null;
|
||
this.addressForm.cityName = null;
|
||
this.addressForm.countyName = null;
|
||
this.provinceEntity = [];
|
||
this.cityEntity = [];
|
||
this.countyEntity = [];
|
||
this.$refs["addressFormRef"].clearValidate();
|
||
this.$nextTick(() => {
|
||
this.addressForm.name = "";
|
||
this.addressForm.tel = "";
|
||
this.addressForm.addressXX = "";
|
||
// this.$refs['addressFormRef'].resetFields();
|
||
});
|
||
// $refs[formName].resetFields()
|
||
// console.log('关闭了', this.addressForm)
|
||
},
|
||
changeAddressShow() {
|
||
this.$http({
|
||
url: this.$http.adornUrl("/api/province/getProvince"),
|
||
method: "post"
|
||
// params: this.$http.adornParams({
|
||
// 'orderId': this.query.orderId
|
||
// })
|
||
})
|
||
.then(({ data }) => {
|
||
// console.log('获取地址三级列表', data)
|
||
if (data.code == 0) {
|
||
this.provinceEntity = data.provinceEntity;
|
||
this.addressForm.addressXX = this.orderDetails.consignee.address;
|
||
this.addressForm.provinceCode = this.orderDetails.consignee.provinceCode;
|
||
this.addressForm.cityCode = this.orderDetails.consignee.cityCode;
|
||
this.addressForm.countyCode = this.orderDetails.consignee.countyCode;
|
||
this.addressForm.provinceName = this.orderDetails.consignee.provinceCode;
|
||
this.addressForm.cityName = this.orderDetails.consignee.cityCode;
|
||
this.addressForm.countyName = this.orderDetails.consignee.countyCode;
|
||
this.addressForm.name = this.orderDetails.consignee.consigneeName;
|
||
this.addressForm.tel = this.orderDetails.consignee.consigneeMobile;
|
||
// console.log(this.provinceEntity,'this.provinceEntity')
|
||
this.cityEntity = this.provinceEntity.find((val, index, arr) => {
|
||
return val.regionCode == this.addressForm.provinceCode;
|
||
});
|
||
this.countyEntity = this.cityEntity.cityList.find(
|
||
(val, index, arr) => {
|
||
return val.regionCode == this.addressForm.cityCode;
|
||
}
|
||
);
|
||
}
|
||
})
|
||
.catch(e => {
|
||
console.log(e, "e");
|
||
});
|
||
this.changeAddVisible = true;
|
||
// console.log('显示修改收件地址')
|
||
},
|
||
// 修改收件信息
|
||
changeAddress() {
|
||
this.$refs["addressFormRef"].validate(valid => {
|
||
if (valid) {
|
||
// console.log('修改收件地址')
|
||
this.$http({
|
||
url: this.$http.adornUrl("/book/buyOrder/modifyConsigneeAddress"),
|
||
method: "post",
|
||
data: this.$http.adornData({
|
||
orderSn: this.query.orderSn,
|
||
// 'province': this.addressForm.provinceName,
|
||
// 'city': this.addressForm.cityName,
|
||
// 'county': this.addressForm.countyName,
|
||
address: this.addressForm.addressXX,
|
||
consigneeName: this.addressForm.name,
|
||
consigneeMobile: this.addressForm.tel,
|
||
provinceCode: this.addressForm.provinceCode,
|
||
cityCode: this.addressForm.cityCode,
|
||
countyCode: this.addressForm.countyCode
|
||
//'orderId': this.addressForm.orderId
|
||
})
|
||
})
|
||
.then(({ data }) => {
|
||
// console.log('修改地址返回值', data)
|
||
this.$message.success("修改地址成功！");
|
||
this.changeAddHandleClose();
|
||
this.getData();
|
||
})
|
||
.catch(e => {
|
||
console.log(e, "e");
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
|
||
// 获取数据列表
|
||
getData() {
|
||
this.dataListLoading = true;
|
||
this.$http({
|
||
// url: this.$http.adornUrl(`/book/buyOrder/appGetOrderInfo/${this.query.ordertype}`),
|
||
url: this.$http.adornUrl(`/book/buyOrder/orderDetail`),
|
||
method: "get",
|
||
params: this.$http.adornParams({
|
||
orderSn: this.query.orderSn
|
||
})
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
// console.log(data.result,'data.result')
|
||
this.orderDetails = data.result;
|
||
|
||
if (this.orderDetails.orderType == "trainingClass") {
|
||
this.orderDetails.trainingClassData = [
|
||
{
|
||
productName: this.orderDetails.remark,
|
||
productPrice: this.orderDetails.orderPrice,
|
||
quantity: 1
|
||
}
|
||
];
|
||
}
|
||
if (this.orderDetails.orderType == "relearn") {
|
||
this.orderDetails.relearnData = [
|
||
{
|
||
productName: this.orderDetails.remark,
|
||
productPrice: this.orderDetails.orderPrice,
|
||
quantity: 1
|
||
}
|
||
];
|
||
}
|
||
if (this.orderDetails.orderType == "vip") {
|
||
this.orderDetails.vipData = [
|
||
{
|
||
productName: 'VIP 商品',
|
||
productPrice: this.orderDetails.orderPrice,
|
||
quantity: 1
|
||
}
|
||
];
|
||
}
|
||
if (this.orderDetails.orderType == "aiVip"||this.orderDetails.orderType == "upgradeAiVip") {
|
||
let productPrice = '';
|
||
let productName = '';
|
||
|
||
if(this.orderDetails.realPrice>0){
|
||
productPrice = '￥'+this.orderDetails.realPrice+'天医币'
|
||
}
|
||
if(this.orderDetails.jfDeduction>0){
|
||
if(this.orderDetails.realPrice==0){
|
||
productPrice = this.orderDetails.jfDeduction+'积分'
|
||
}else{
|
||
productPrice += '+'+this.orderDetails.jfDeduction+'积分'
|
||
}
|
||
}
|
||
if(this.orderDetails.orderType == "aiVip"){
|
||
productName = 'AI VIP商品'
|
||
}else{
|
||
productName = 'AI VIP商品（升级）'
|
||
}
|
||
this.orderDetails.aiVipData = [
|
||
{
|
||
productName: productName,
|
||
productPrice: productPrice,
|
||
quantity: 1
|
||
}
|
||
];
|
||
}
|
||
if (data.result.expressOrders) {
|
||
data.result.expressOrders.forEach(element => {
|
||
element.showProduct = false;
|
||
});
|
||
this.sheetList = data.result.expressOrders;
|
||
}
|
||
} else {
|
||
this.orderDetails = {};
|
||
return this.$message.error("商品详情获取失败，请重试");
|
||
}
|
||
this.dataListLoading = false;
|
||
});
|
||
},
|
||
closeDeliverDialog(val) {
|
||
this.setDeliverVisible = false;
|
||
this.getData();
|
||
},
|
||
// 去发出
|
||
godeliver() {
|
||
this.orderList[0] = this.query.orderSn;
|
||
this.setDeliverVisible = true;
|
||
},
|
||
|
||
// 删除订单
|
||
deleteOrder() {
|
||
this.$confirm(`确定对订单进行删除操作?`, "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning"
|
||
}).then(() => {
|
||
this.$http({
|
||
url: this.$http.adornUrl("/book/buyOrder/orderDel"),
|
||
method: "post",
|
||
params: this.$http.adornParams({
|
||
orderSn: this.orderDetails.orderSn
|
||
})
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.$message({
|
||
message: "删除成功",
|
||
type: "success",
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.$router.push({
|
||
path: "/order-buyorder"
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
this.$message.error(data.msg);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
},
|
||
components: {
|
||
setDeliverDialog
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.myicon {
|
||
border: 1px solid #409eff;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.booksUl {
|
||
overflow: hidden;
|
||
margin-top: 15px;
|
||
padding-left: 0;
|
||
|
||
li {
|
||
list-style: none;
|
||
width: 50%;
|
||
float: left;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
.sheetOrdersUl {
|
||
padding-left: 0;
|
||
|
||
li {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.orderType {
|
||
overflow: hidden;
|
||
margin-bottom: 20px;
|
||
|
||
.item {
|
||
color: #fff;
|
||
display: inline-block;
|
||
padding: 10px;
|
||
border-radius: 0 20px 20px 0;
|
||
}
|
||
|
||
.hightLight0 {
|
||
background-color: #e6a23c;
|
||
}
|
||
|
||
.hightLight1 {
|
||
background-color: #409eff;
|
||
}
|
||
|
||
.hightLight2 {
|
||
background-color: #f56c6c;
|
||
}
|
||
|
||
.hightLight3 {
|
||
background-color: #67c23a;
|
||
}
|
||
}
|
||
|
||
.noinfo {
|
||
color: #ddd;
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.scroll {
|
||
margin-top: 15px;
|
||
height: 300px;
|
||
}
|
||
|
||
.deliverBox {
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
padding-right: 15px;
|
||
min-width: 300px;
|
||
|
||
.deliver_heade {
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-timeline {
|
||
li {
|
||
float: none;
|
||
}
|
||
}
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
|
||
.deliver_info {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.infoTitle {
|
||
display: inline;
|
||
}
|
||
|
||
ul.list {
|
||
overflow: hidden;
|
||
color: #515a6e;
|
||
|
||
li {
|
||
list-style: none;
|
||
width: 50%;
|
||
line-height: 26px;
|
||
float: left;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.hightLight {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.line {
|
||
width: 100%;
|
||
border-bottom: 1px solid #eee;
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
|
||
.liName {
|
||
font-size: 12px;
|
||
margin-bottom: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.text_button {
|
||
padding: 0;
|
||
}
|
||
|
||
.el-icon-truck:before {
|
||
content: "\e740";
|
||
}
|
||
|
||
.el-timeline-item:first-child {
|
||
.el-timeline-item__node {
|
||
background-color: rgb(11, 189, 135);
|
||
}
|
||
|
||
color: rgb(11, 189, 135) !important;
|
||
}
|
||
|
||
.el-timeline-item {
|
||
width: 100%;
|
||
position: relative;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.el-timeline-item__node--large {
|
||
left: -2px;
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.el-timeline-item__node {
|
||
position: absolute;
|
||
background-color: #e4e7ed;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.el-timeline-item__node--normal {
|
||
left: -1px;
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.el-timeline-item__wrapper {
|
||
position: relative;
|
||
padding-left: 28px;
|
||
top: -3px;
|
||
}
|
||
|
||
.el-timeline li {
|
||
list-style: none;
|
||
}
|
||
|
||
.el-timeline-item__tail {
|
||
position: absolute;
|
||
left: 4px;
|
||
height: 100%;
|
||
border-left: 2px solid #e4e7ed;
|
||
}
|
||
|
||
.el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
|
||
display: none;
|
||
}
|
||
|
||
.el-timeline-item__timestamp {
|
||
color: #c3c3c3;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/deep/ .el-select-dropdown {
|
||
width: 200px !important;
|
||
}
|
||
|
||
:deep(.el-select-dropdown__list) {
|
||
width: 200px !important;
|
||
}
|
||
|
||
/deep/ .el-select-dropdown__list {
|
||
width: 200px !important;
|
||
}
|
||
.DiscountColor {
|
||
color: #f94f04;
|
||
}
|
||
</style>
|