index.vue 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
  4. <el-form-item prop="orderNo">
  5. <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
  6. </el-form-item>
  7. <el-form-item prop="orderStatus">
  8. <el-select v-model="queryParams.orderStatus" placeholder="请选择支付状态" clearable>
  9. <el-option v-for="dict in dict.type.order_goods_status" :key="dict.code" :label="dict.label" :value="dict.value" />
  10. </el-select>
  11. </el-form-item>
  12. <el-form-item prop="realName">
  13. <el-input v-model="queryParams.realName" placeholder="请输入客户姓名" clearable @keyup.enter.native="handleQuery" />
  14. </el-form-item>
  15. <el-form-item prop="phoneNumber">
  16. <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
  17. </el-form-item>
  18. <br />
  19. <el-form-item>
  20. <el-date-picker clearable v-model="queryCreateTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="下单时间" end-placeholder="结束日期" @change="getCreateTime"></el-date-picker>
  21. </el-form-item>
  22. <el-form-item>
  23. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  24. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  25. </el-form-item>
  26. </el-form>
  27. <el-row :gutter="10" class="mb8">
  28. <!-- <el-col :span="1.5">-->
  29. <!-- <el-button type="warning" plain icon="el-icon-download" @click="handleExport" v-hasPermi="['order:goods:export']" v-if="userInfoVO.userType == '00'">导出 </el-button>-->
  30. <!-- </el-col>-->
  31. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  32. </el-row>
  33. <Page uri="/mapi/order/goods/list" :request-params="queryParams" ref="pagination">
  34. <el-table-column label="订单编号" align="center" prop="orderNo" width="150px" />
  35. <el-table-column label="客户信息" align="center" width="150">
  36. <template slot-scope="scope">
  37. <span>{{ scope.row.realName ? scope.row.realName : '--' }}</span>
  38. <br />
  39. <span>{{ scope.row.phoneNumber ? scope.row.phoneNumber : '' }}</span>
  40. </template>
  41. </el-table-column>
  42. <el-table-column label="订单总价" align="center" prop="totalPrice" width="100px" />
  43. <el-table-column label="抵扣金额" align="center" prop="deductAmount" width="100px">
  44. <template slot-scope="scope">
  45. {{ scope.row.deductAmount ? scope.row.deductAmount : '--' }}
  46. </template>
  47. </el-table-column>
  48. <el-table-column label="支付金额" align="center" prop="payAmount" width="100px" />
  49. <el-table-column label="支付方式" align="center" prop="payType" width="100px">
  50. <template slot-scope="scope">
  51. <dict-tag :options="dict.type.recharge_pay_type" :value="scope.row.payType" />
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="订单状态" align="center" prop="orderStatus">
  55. <template slot-scope="scope">
  56. <dict-tag :options="dict.type.order_goods_status" :value="scope.row.orderStatus" />
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="下单时间" align="center" prop="createTime" width="150px" />
  60. <el-table-column label="支付时间" align="center" prop="payTime" width="150px">
  61. <template slot-scope="scope">
  62. {{ scope.row.payTime ? scope.row.payTime : '--' }}
  63. </template>
  64. </el-table-column>
  65. <!-- <el-table-column label="发货时间" align="center" prop="sendTime" width="200px"/>-->
  66. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
  67. <template slot-scope="scope">
  68. <el-button type="text" icon="el-icon-chat-dot-square" @click="orderDetail(scope.row)">订单详情</el-button>
  69. <el-button type="text" icon="el-icon-check" @click="rePay(scope.row)" v-if="scope.row.orderStatus == '0' && userInfoVO.userType == '02'">重新支付 </el-button>
  70. <el-button type="text" icon="el-icon-close" @click="cancelOrder(scope.row)" v-if="scope.row.orderStatus == '0'">取消订单 </el-button>
  71. <el-button type="text" icon="el-icon-check" @click="outOrderGoods(scope.row)" v-if="scope.row.orderStatus == '2' && userInfoVO.userType == '00'">出货 </el-button>
  72. <el-button type="text" icon="el-icon-truck" @click="deliveryInfo(scope.row)" v-if="scope.row.deliveryNo"> 物流信息 </el-button>
  73. <el-button type="text" icon="el-icon-chat-dot-square" @click="refundOrder(scope.row)" v-if="userInfoVO.userType == '00' && scope.row.refundStatus != '1' && scope.row.refundStatus != '2' && scope.row.orderStatus != '0' && scope.row.orderStatus != '100'"> 撤单 </el-button>
  74. <el-button type="text" icon="el-icon-printer" v-if="userInfoVO.userType != '00'" @click="btn_lodop(scope.row)">打印 </el-button>
  75. </template>
  76. </el-table-column>
  77. </Page>
  78. <!-- 详情-->
  79. <el-dialog :title="detailTitle" :visible.sync="openDetail" size="80%">
  80. <el-card>
  81. <el-descriptions title="客户信息" v-show="detailView" :column="3" border :label-style="{ 'text-align': 'center' }" :contentStyle="{ 'text-align': 'center' }">
  82. <el-descriptions-item label="客户姓名">{{ detailView.realName }}</el-descriptions-item>
  83. <el-descriptions-item label="客户手机号">{{ detailView.phoneNumber }}</el-descriptions-item>
  84. <el-descriptions-item label="订单状态">
  85. <dict-tag :options="dict.type.order_goods_status" :value="detailView.orderStatus" />
  86. </el-descriptions-item>
  87. <el-descriptions-item label="收货联系人">{{ detailView.contactName ? detailView.contactName : '暂无信息' }} </el-descriptions-item>
  88. <el-descriptions-item label="收货人手机号">{{ detailView.contactPhone ? detailView.contactPhone : '暂无信息' }} </el-descriptions-item>
  89. <el-descriptions-item label="下单时间">{{ detailView.createTime ? detailView.createTime : '暂无信息' }} </el-descriptions-item>
  90. <el-descriptions-item label="支付时间">{{ detailView.payTime ? detailView.payTime : '暂无信息' }} </el-descriptions-item>
  91. <el-descriptions-item label="发货时间">{{ detailView.sendTime ? detailView.sendTime : '暂无信息' }} </el-descriptions-item>
  92. <el-descriptions-item label="确认收货时间">{{ detailView.finishTime ? detailView.finishTime : '暂无信息' }} </el-descriptions-item>
  93. <el-descriptions-item label="订单总价">{{ detailView.totalPrice ? detailView.totalPrice : '暂无信息' }} </el-descriptions-item>
  94. <el-descriptions-item label="物流公司">{{ detailView.deliveryCompany ? detailView.deliveryCompany : '暂无信息' }} </el-descriptions-item>
  95. <el-descriptions-item label="物流单号">{{ detailView.deliveryNo ? detailView.deliveryNo : '暂无信息' }} </el-descriptions-item>
  96. <el-descriptions-item label="收货地址" span="3">{{ detailView.province }}{{ detailView.city }}{{ detailView.area }}{{ detailView.address }}{{ detailView.addressDetail }} </el-descriptions-item>
  97. <el-descriptions-item label="备注信息" span="3">{{ detailView.deliveryNo ? detailView.deliveryNo : '暂无信息' }} </el-descriptions-item>
  98. </el-descriptions>
  99. </el-card>
  100. <div class="head-column2">
  101. <el-table v-loading="detailLoading" :data="detailView.orderGoodsSkuList" fit highlight-current-row border stripe>
  102. <el-table-column label="分类" align="center" prop="goodsCategoryName" />
  103. <el-table-column :label="goodsType == 0 ? '商品名称' : '材料名称'" align="center" prop="goodsName" width="250px" />
  104. <el-table-column :label="goodsType == 0 ? '商品规格' : '材料规格'" align="center" width="250px">
  105. <template slot-scope="scope">
  106. <div style="text-align: center">
  107. {{ scope.row.skuName.replace(' ', '/') }}
  108. </div>
  109. </template>
  110. </el-table-column>
  111. <el-table-column label="数量" align="center" prop="buyNum" />
  112. <el-table-column label="价格(元)" align="center" prop="marketPrice" />
  113. <el-table-column label="总和(元)" align="center">
  114. <template slot-scope="scope">
  115. <span>{{ scope.row.buyNum * scope.row.marketPrice }}</span>
  116. </template>
  117. </el-table-column>
  118. </el-table>
  119. </div>
  120. <el-row :gutter="10" class="box-shadow" style="margin-top: 10px">
  121. <el-col :span="21">
  122. <el-form label-width="130px" style="height: 80px; padding-top: 20px; text-align: right" :inline="true" size="small">
  123. <el-form-item label="总金额(元):">
  124. {{ costTotalPrice }}
  125. </el-form-item>
  126. </el-form>
  127. </el-col>
  128. </el-row>
  129. </el-dialog>
  130. <!-- 重新支付页面 -->
  131. <el-dialog title="订单支付" :visible.sync="openRePayPage" size="60%" append-to-body>
  132. <el-descriptions title="核对信息" v-if="appUserInfo" :column="3" border :contentStyle="{ 'text-align': 'center' }" style="margin-left: 15px; margin-right: 15px">
  133. <el-descriptions-item label="总件数(件)" :labelStyle="{ width: '16%' }" :label-style="{ 'text-align': 'center' }">{{ calculateTotalCount }} </el-descriptions-item>
  134. <el-descriptions-item label="抵扣金额(元)" :labelStyle="{ width: '16%' }" :label-style="{ 'text-align': 'center' }">
  135. {{ payFrom.deductAmount ? '¥' + payFrom.deductAmount : '¥' + '0' }}
  136. </el-descriptions-item>
  137. <el-descriptions-item label="卡余额(元)" :labelStyle="{ width: '16%' }" :label-style="{ 'text-align': 'center' }"> ¥{{ appUserInfo ? appUserInfo.rechargeBalance + appUserInfo.giveBalance : '0.00' }} </el-descriptions-item>
  138. <el-descriptions-item label="原价(元)">{{ costTotalPrice }}</el-descriptions-item>
  139. <el-descriptions-item label="折后金额(元)">{{ calculatePayMoney }}</el-descriptions-item>
  140. <!-- <el-descriptions-item label="现有积分">{{appUserInfo.pointBalance}}</el-descriptions-item>-->
  141. </el-descriptions>
  142. <template>
  143. <el-form ref="payFrom" :model="payFrom" label-width="80px" style="margin-top: 20px">
  144. <el-row :gutter="10">
  145. <el-card style="margin-left: 15px; margin-right: 15px">
  146. <el-col :span="24">
  147. <el-descriptions title="优惠信息"></el-descriptions>
  148. </el-col>
  149. <el-col :span="24">
  150. <el-form-item label="抵扣现金券(元)" label-width="130px" prop="deductAmount">
  151. <el-input-number :min="1" :max="9999999" :controls="false" style="width: 200px" v-model.number="payFrom.deductAmount"></el-input-number>
  152. </el-form-item>
  153. </el-col>
  154. </el-card>
  155. </el-row>
  156. <el-row :gutter="10">
  157. <el-card style="margin-top: 15px; margin-left: 15px; margin-right: 15px">
  158. <el-col :span="24">
  159. <el-form-item label="支付方式" prop="payType">
  160. <el-radio-group v-model="payFrom.payType" style="width: 400px" @input="changePayType">
  161. <el-radio-button label="3">余额</el-radio-button>
  162. <el-radio-button label="2">现金</el-radio-button>
  163. <el-radio-button label="0">微信</el-radio-button>
  164. <el-radio-button label="1">支付宝</el-radio-button>
  165. </el-radio-group>
  166. </el-form-item>
  167. </el-col>
  168. <div v-if="payFrom.payType">
  169. <el-col :span="8">
  170. <el-descriptions :column="2" style="width: 400px" v-if="payFrom.payType == '3' && appUserInfo">
  171. <el-descriptions-item label="客户姓名">{{ appUserInfo ? appUserInfo.realName : '- -' }} </el-descriptions-item>
  172. <el-descriptions-item label="余额(元)"> ¥{{ appUserInfo ? appUserInfo.rechargeBalance + appUserInfo.giveBalance : '0.00' }} </el-descriptions-item>
  173. </el-descriptions>
  174. </el-col>
  175. <el-col :span="12" v-if="payFrom.payType == '2'">
  176. <el-form-item label="实收现金(元)" label-width="120px" prop="thisPayMoney">
  177. <el-input-number :min="1" :max="9999999" :controls="false" v-model="payFrom.thisPayMoney"></el-input-number>
  178. </el-form-item>
  179. </el-col>
  180. <el-col :span="12" v-if="payFrom.payType == '2'">
  181. <el-form-item label="找零:" label-width="120px">
  182. <span>{{ payFrom.thisPayMoney && payFrom.thisPayMoney - payMoney >= 0 ? payFrom.thisPayMoney - payMoney : '0' }}</span>
  183. </el-form-item>
  184. </el-col>
  185. <el-col :span="8" v-if="payFrom.payType == '0'">
  186. <el-form-item label="微信付款条形码" label-width="120px" prop="wxBarcode">
  187. <el-input style="width: 200px" v-model="payFrom.wxBarcode"></el-input>
  188. </el-form-item>
  189. </el-col>
  190. <el-col :span="8" v-if="payFrom.payType == '1'">
  191. <el-form-item label="支付宝付款条形码" label-width="130px" prop="aliPayBarcode">
  192. <el-input style="width: 200px" v-model="payFrom.aliPayBarcode"></el-input>
  193. </el-form-item>
  194. </el-col>
  195. </div>
  196. </el-card>
  197. </el-row>
  198. <el-row :gutter="10">
  199. <div>
  200. <el-button type="primary" @click="submitSettlement" style="margin-left: 3%; margin-top: 20px">结算 </el-button>
  201. </div>
  202. </el-row>
  203. </el-form>
  204. </template>
  205. </el-dialog>
  206. <!-- 撤单页面-->
  207. <el-dialog :visible.sync="openRefundPage" width="400px" append-to-body>
  208. <el-form ref="refundVO" :model="refundVO">
  209. <el-form-item label="撤单原因" label-width="80px" prop="refundReason">
  210. <el-input v-model="refundVO.refundReason" type="textarea" placeholder="请输入撤单原因" maxlength="500" :rows="5" show-word-limit></el-input>
  211. </el-form-item>
  212. </el-form>
  213. <el-row :gutter="10">
  214. <div>
  215. <el-button type="primary" @click="submitRefund" style="margin-left: 3%; margin-top: 20px">提交</el-button>
  216. </div>
  217. </el-row>
  218. </el-dialog>
  219. <!-- 订单出货对话框 -->
  220. <el-dialog title="订单出货信息" :visible.sync="openDeliveryPage" size="40%" append-to-body :before-close="deliveryClose">
  221. <el-row :gutter="15">
  222. <el-form ref="deliveryVo" :model="deliveryVo" :rules="deliveryRules" label-width="120px">
  223. <el-col :span="24">
  224. <el-form-item label="快递公司" prop="deliveryCompany">
  225. <el-radio-group v-model="deliveryVo.deliveryCompany" @input="changeDeliveryId">
  226. <el-radio-button v-for="dict in deliveryData" :label="dict.deliveryName" :key="dict.deliveryName"></el-radio-button>
  227. </el-radio-group>
  228. </el-form-item>
  229. <el-form-item label="服务类型" prop="serviceType">
  230. <div class="servicecard" v-for="del in serviceData" :key="del.serviceType" @click="checkserviceId(del)" :class="{ active: deliveryVo.serviceType == del.serviceType }">
  231. <div class="check"><i class="el-icon-check"></i></div>
  232. {{ del.serviceName }}
  233. </div>
  234. </el-form-item>
  235. <el-form-item label="预期揽件时间" prop="expectTime">
  236. <el-date-picker
  237. type="datetime"
  238. placeholder="选择预期揽件时间"
  239. v-model="deliveryVo.expectTime"
  240. style="width: 100%"
  241. value-format="yyyy-MM-dd HH:mm"
  242. format="yyyy-MM-dd HH:mm"
  243. :picker-options="{
  244. disabledDate: (time) => {
  245. return time.getTime() < Date.now() - 3600 * 1000 * 24
  246. },
  247. selectableRange: startTimeRange
  248. }"
  249. :default-time="deliTime"
  250. class="date_picker"
  251. :editable="false"
  252. ></el-date-picker>
  253. </el-form-item>
  254. <!-- <el-form-item label="包裹数量" prop="count">
  255. <el-input v-model="deliveryVo.count" type="number" placeholder="请输入包裹数量" clearable></el-input>
  256. </el-form-item> -->
  257. <el-form-item label="货物高度" prop="spaceHeight">
  258. <el-input v-model="deliveryVo.spaceHeight" placeholder="请输入货物高度" clearable>
  259. <template slot="append">厘米(cm)</template>
  260. </el-input>
  261. </el-form-item>
  262. <el-form-item label="货物长度" prop="spaceLength">
  263. <el-input v-model="deliveryVo.spaceLength" placeholder="请输入货物长度" clearable>
  264. <template slot="append">厘米(cm)</template>
  265. </el-input>
  266. </el-form-item>
  267. <el-form-item label="货物宽度" prop="spaceWidth">
  268. <el-input v-model="deliveryVo.spaceWidth" placeholder="请输入货物宽度" clearable>
  269. <template slot="append">厘米(cm)</template>
  270. </el-input>
  271. </el-form-item>
  272. <el-form-item label="货物总重量" prop="weight">
  273. <el-input v-model="deliveryVo.weight" placeholder="请输入货物总重量" clearable>
  274. <template slot="append">千克 (kg)</template>
  275. </el-input>
  276. </el-form-item>
  277. <el-form-item label="备注信息" prop="customRemark">
  278. <el-input v-model="deliveryVo.customRemark" rows="5" type="textarea" placeholder="请输入备注信息,比如易碎物品……" maxlength="500" show-word-limit clearable></el-input>
  279. </el-form-item>
  280. </el-col>
  281. </el-form>
  282. </el-row>
  283. <div slot="footer" class="dialog-footer">
  284. <el-button type="primary" @click="submitDelivery('deliveryVo')" style="margin-left: 5%">提交</el-button>
  285. <el-button @click="cancelDelivery">取 消</el-button>
  286. </div>
  287. </el-dialog>
  288. <!-- 快递信息对话框 -->
  289. <el-dialog title="快递信息" :visible.sync="openDeliveryinfo" size="40%" append-to-body :before-close="deliveryinfoClose">
  290. <div class="deliveryView">
  291. <div class="info">
  292. <span>快递公司:</span>
  293. <span>{{ deliveryView.name }}</span>
  294. </div>
  295. <div class="info">
  296. <span>收货地址:</span>
  297. <span>{{ deliveryView.address }}</span>
  298. </div>
  299. </div>
  300. <el-timeline v-if="deliveryView.pathItemList.length">
  301. <el-timeline-item v-for="(item, index) in deliveryView.pathItemList" :key="index" :timestamp="item.actionTime">
  302. {{ item.actionMsg }}
  303. </el-timeline-item>
  304. </el-timeline>
  305. <el-empty description="暂无快递信息" v-else></el-empty>
  306. <div slot="footer" class="dialog-footer">
  307. <el-button type="primary" style="margin-left: 5%" @click="openDeliveryinfo = false">关闭</el-button>
  308. </div>
  309. </el-dialog>
  310. </div>
  311. </template>
  312. <script>
  313. import { cancelOrder, getGoods, listGoods, outOrderGoods, refundOrderGoods, rePayOrder, getdeliveryAll, getDeliveryPath } from '@/api/order/goods'
  314. import { findUserByPhoneNumber, getUser } from '@/api/app/user'
  315. import { getLodop } from '@/utils/lodopUtils'
  316. export default {
  317. name: 'goodsRetailOrder',
  318. dicts: ['order_goods_status', 'delivery_company', 'recharge_pay_type'],
  319. data() {
  320. var validateNumberInput = (rule, value, callback) => {
  321. if (!value || isNaN(value)) {
  322. callback(new Error('只能输入数字,不能为空'))
  323. } else {
  324. callback()
  325. }
  326. }
  327. return {
  328. userInfoVO: null,
  329. //
  330. orderLoading: true,
  331. // 遮罩层
  332. loading: false,
  333. detailLoading: true,
  334. // 选中数组
  335. ids: [],
  336. // 非单个禁用
  337. single: true,
  338. // 非多个禁用
  339. multiple: true,
  340. // 显示搜索条件
  341. showSearch: true,
  342. // 总条数
  343. total: 0,
  344. // 弹出层标题
  345. title: '',
  346. detailTitle: '',
  347. // 是否显示弹出层
  348. open: false,
  349. openDetail: false,
  350. openRePayPage: false,
  351. openDeliveryPage: false,
  352. openRefundPage: false,
  353. // 查询参数
  354. queryParams: {
  355. realName: null,
  356. phoneNumber: null,
  357. orderNo: null,
  358. orderStatus: null
  359. },
  360. // 表单参数
  361. payFrom: {},
  362. // 表单校验
  363. rules: {},
  364. goodsType: null,
  365. // 商品订单表格数据
  366. GoodsList: [],
  367. // 可选商品集合
  368. goodsList: null,
  369. // 已选商品集合
  370. addGoodsList: [],
  371. // 自定义一个计算数量的临时对象集合
  372. purchaseCountVOList: [],
  373. // 总金额
  374. totalPrice: 0,
  375. // 总件数
  376. totalCount: 0,
  377. // 详情数据
  378. detailView: {},
  379. // detailList:[],
  380. // 详情总金额
  381. costTotalPrice: null,
  382. appUserInfo: null,
  383. goodsOrderInfo: null,
  384. payMoney: null,
  385. deliveryVo: {
  386. bizId: '',
  387. // count: 1,
  388. customRemark: '',
  389. deliveryCompany: '',
  390. deliveryId: '',
  391. expectTime: '',
  392. orderId: null,
  393. serviceName: '',
  394. serviceType: null,
  395. spaceHeight: null,
  396. spaceLength: null,
  397. spaceWidth: null,
  398. weight: null
  399. },
  400. deliveryRules: {
  401. deliveryName: [{ required: true, message: '请选择物流公司', trigger: 'change' }],
  402. serviceType: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
  403. expectTime: [{ required: true, message: '选择预期揽件时间', trigger: 'blur' }],
  404. // count: [
  405. // { required: true, message: '请输入包裹数量', trigger: 'blur' },
  406. // ],
  407. spaceHeight: [
  408. { required: true, message: '请输入货物高度', trigger: 'blur' },
  409. { validator: validateNumberInput, trigger: 'blur' }
  410. ],
  411. spaceLength: [
  412. { required: true, message: '请输入货物长度', trigger: 'blur' },
  413. { validator: validateNumberInput, trigger: 'blur' }
  414. ],
  415. spaceWidth: [
  416. { required: true, message: '请输入货物宽度', trigger: 'blur' },
  417. { validator: validateNumberInput, trigger: 'blur' }
  418. ],
  419. weight: [
  420. { required: true, message: '请输入货物总重量', trigger: 'blur' },
  421. { validator: validateNumberInput, trigger: 'blur' }
  422. ],
  423. customRemark: [{ required: true, message: '请输入备注信息,比如易碎物品……', trigger: 'blur' }]
  424. },
  425. refundVO: {
  426. orderId: null,
  427. refundReason: null
  428. },
  429. deliveryData: [], //快递公司数据
  430. serviceData: [], //快递公司服务类型数据
  431. startTimeRange: null,
  432. deliTime: null,
  433. openDeliveryinfo: false,
  434. deliveryView: {
  435. name: '',
  436. pathItemList: []
  437. },
  438. LODOP: null,
  439. number: 1,
  440. pointerList: [],
  441. queryCreateTime: null,
  442. queryPayTime: null
  443. }
  444. },
  445. created() {
  446. this.handleUser()
  447. this.goodsType = this.getUrlParam('goodsType')
  448. this.getList()
  449. // this.getdeliveryAll()
  450. },
  451. mounted() {
  452. this.number = 1
  453. const printerTime = setInterval(() => {
  454. this.LODOP = getLodop()
  455. this.number++
  456. if (this.number == 25) {
  457. clearInterval(printerTime)
  458. }
  459. if (this.LODOP) {
  460. clearInterval(printerTime)
  461. }
  462. }, 200)
  463. this.pointerList = JSON.parse(this.$cache.local.get('printerSeting'))
  464. },
  465. watch: {
  466. 'deliveryVo.expectTime': {
  467. deep: true,
  468. handler(newValue, oldValue) {
  469. if (newValue) {
  470. let nowDate = this.sendTimeDate(new Date().getTime() + 3600000) // 一小时之后的时间(我是因业务要求,这里可以随意调整时间)
  471. let dt = nowDate.split(' ')
  472. let st = ''
  473. if (newValue.split(' ')[0] == dt[0]) {
  474. // 是今天,选择 的时间开始为此刻的时分秒
  475. st = dt[1]
  476. } else {
  477. // 明天及以后从0时开始
  478. st = '00:00:00'
  479. }
  480. this.startTimeRange = st + ' - 23:59:59'
  481. //例如:如果今天此刻时间为10:41:40 则选择时间范围为: 11:41:40 - 23:59:59
  482. //否则为:00:00:00- 23:59:59
  483. }
  484. }
  485. }
  486. },
  487. computed: {
  488. calculateTotalCount() {
  489. this.totalCount = 0
  490. // this.detailList.forEach(vo =>{
  491. this.detailView.forEach((vo) => {
  492. this.totalCount = this.totalCount + vo.buyNum
  493. })
  494. return this.totalCount
  495. },
  496. calculatePayMoney() {
  497. this.payMoney = this.payFrom.deductAmount ? this.costTotalPrice - this.payFrom.deductAmount : this.costTotalPrice
  498. return this.payMoney
  499. }
  500. },
  501. methods: {
  502. handleUser() {
  503. this.userInfoVO = this.getUserInfo()
  504. },
  505. getCreateTime() {
  506. if (this.queryCreateTime != null) {
  507. this.queryParams.createTimeFrom = this.queryCreateTime[0]
  508. this.queryParams.createTimeTo = this.queryCreateTime[1]
  509. }
  510. },
  511. getPayTime() {
  512. if (this.queryPayTime != null) {
  513. this.queryParams.beginPayTime = this.queryPayTime[0]
  514. this.queryParams.endPayTime = this.queryPayTime[1]
  515. }
  516. },
  517. getList() {
  518. this.queryParams.goodsType = this.goodsType
  519. this.$nextTick(() => {
  520. this.$refs.pagination.handleSearch(true)
  521. })
  522. },
  523. /** 搜索按钮操作 */
  524. handleQuery() {
  525. this.queryParams.pageNum = 1
  526. this.getList()
  527. },
  528. /** 重置按钮操作 */
  529. resetQuery() {
  530. this.queryCreateTime = null
  531. this.queryParams.createTimeFrom = null
  532. this.queryParams.createTimeTo = null
  533. this.queryPayTime = null
  534. this.queryParams.beginPayTime = null
  535. this.queryParams.endPayTime = null
  536. this.resetForm('queryForm')
  537. this.handleQuery()
  538. },
  539. rePay(row) {
  540. this.payFrom = {}
  541. this.payFrom.id = row.id
  542. this.openRePayPage = true
  543. getUser(row.appUserId).then((res1) => {
  544. if (res1.data.phoneNumber == null || res1.data.phoneNumber == '') {
  545. return
  546. }
  547. findUserByPhoneNumber({ phoneNumber: res1.data.phoneNumber }).then((res) => {
  548. this.appUserInfo = res.data
  549. })
  550. })
  551. getGoods(row.id).then((response) => {
  552. this.detailView = response.data
  553. this.costTotalPrice = this.detailView.totalPrice
  554. // this.detailList = response.data;
  555. // this.costTotalPrice = this.detailList[0].totalPrice;
  556. })
  557. if (row.deductAmount != null && row.deductAmount != '') {
  558. this.payFrom.deductAmount = row.deductAmount
  559. }
  560. if (row.payType != null && row.payType != '') {
  561. this.payFrom.payType = row.payType
  562. }
  563. if (row.payType != null && row.payType != '') {
  564. this.payFrom.payType = row.payType
  565. }
  566. },
  567. submitSettlement() {
  568. this.$confirm('是否确认结算?').then(() => {
  569. if (this.totalCount == 0) {
  570. this.$message.error('请选择商品')
  571. return
  572. }
  573. if (this.payFrom.payType == null || this.payFrom.payType == '') {
  574. this.$message.error('请选择支付方式')
  575. return
  576. }
  577. if (this.payFrom.deductAmount != null || this.payFrom.deductAmount != '') {
  578. if (this.payFrom.deductAmount > this.payMoney) {
  579. this.$message.error('抵扣金额不能大于支付金额')
  580. return
  581. }
  582. }
  583. if (this.payFrom.payType == '1') {
  584. if (this.appUserInfo.rechargeBalance + this.appUserInfo.giveBalance < this.payMoney) {
  585. this.$message.error('用户余额不足')
  586. return
  587. }
  588. }
  589. if (this.payFrom.payType == '2') {
  590. if (this.payFrom.thisPayMoney < this.payMoney) {
  591. this.$message.error('现金金额不够支付')
  592. return
  593. }
  594. }
  595. this.submitGoodsOrderDTO = {}
  596. // 设置订单基础信息
  597. this.submitGoodsOrderDTO.id = this.payFrom.id
  598. this.submitGoodsOrderDTO.goodsType = this.goodsType
  599. this.submitGoodsOrderDTO.deductAmount = this.payFrom.deductAmount
  600. this.submitGoodsOrderDTO.payAmount = this.payMoney
  601. this.submitGoodsOrderDTO.payType = this.payFrom.payType
  602. rePayOrder(this.submitGoodsOrderDTO).then((response) => {
  603. this.$modal.msgSuccess('结算完成')
  604. this.addGoodsList = []
  605. this.purchaseCountVOList = []
  606. this.submitGoodsOrderDTO = {}
  607. this.openRePayPage = false
  608. this.getList()
  609. })
  610. })
  611. },
  612. // 切换支付方式
  613. changePayType() {
  614. delete this.payFrom.thisPayMoney
  615. this.$forceUpdate()
  616. },
  617. // 取消订单
  618. cancelOrder(row) {
  619. this.$confirm('是否确认取消该订单?')
  620. .then(() => {
  621. const vo = {
  622. orderId: row.id,
  623. remark: '不想要了'
  624. }
  625. cancelOrder(vo).then((response2) => {
  626. this.$modal.msgSuccess('订单取消成功')
  627. this.getList()
  628. })
  629. })
  630. .catch(() => {})
  631. },
  632. // 订单详情
  633. orderDetail(row) {
  634. this.openDetail = true
  635. this.detailTitle = '订单商品详情'
  636. this.detailLoading = true
  637. // this.detailList = [];
  638. this.detailView = {}
  639. const id = row.id
  640. getGoods(id).then((response) => {
  641. this.detailView = response.data
  642. this.costTotalPrice = this.detailView.totalPrice
  643. // this.detailList = response.data;
  644. // this.costTotalPrice = this.detailList[0].totalPrice;
  645. this.detailLoading = false
  646. })
  647. },
  648. // 出货
  649. outOrderGoods(row) {
  650. this.deliveryreset()
  651. this.openDeliveryPage = true
  652. this.deliveryVo.deliveryCompany = this.deliveryData[0].deliveryName
  653. this.serviceData = this.deliveryData[0].serviceType
  654. // 获取当前时间
  655. const now = new Date()
  656. // 增加一个小时
  657. now.setHours(now.getHours() + 1)
  658. // 提取时分秒并格式化
  659. const hours = ('0' + now.getHours()).slice(-2)
  660. const minutes = ('0' + now.getMinutes()).slice(-2)
  661. const seconds = ('0' + now.getSeconds()).slice(-2)
  662. // 结果字符串
  663. this.deliTime = `${hours}:${minutes}:${seconds}`
  664. this.deliveryVo.orderId = row.id
  665. },
  666. //获取快递公司
  667. getdeliveryAll() {
  668. getdeliveryAll().then((res) => {
  669. this.deliveryData = res.data
  670. })
  671. },
  672. //切换快递获取其他数据
  673. changeDeliveryId(value) {
  674. this.deliveryData.forEach((item, index) => {
  675. if (value == item.deliveryName) {
  676. this.deliveryVo.deliveryId = item.deliveryId
  677. this.deliveryVo.bizId = item.bizId
  678. this.serviceData = item.serviceType
  679. }
  680. })
  681. },
  682. checkserviceId(del) {
  683. this.deliveryVo.serviceType = del.serviceType
  684. this.deliveryVo.serviceName = del.serviceName
  685. },
  686. // 撤单
  687. refundOrder(row) {
  688. this.refundVO = {}
  689. this.openRefundPage = true
  690. this.refundVO.orderId = row.id
  691. },
  692. submitDelivery(formName) {
  693. this.$confirm('是否确认出货配送?')
  694. .then(() => {
  695. this.$refs[formName].validate((valid) => {
  696. if (valid) {
  697. outOrderGoods(this.deliveryVo).then((response2) => {
  698. this.$message.success('操作成功')
  699. this.getList()
  700. this.openDeliveryPage = false
  701. this.deliveryreset()
  702. })
  703. }
  704. })
  705. })
  706. .catch(() => {})
  707. },
  708. sendTimeDate(date) {
  709. if (!!date) {
  710. var nowDate = new Date(date).getFullYear() + '-' + (new Date(date).getMonth() + 1 < 10 ? '0' + (new Date(date).getMonth() + 1) : new Date(date).getMonth() + 1) + '-' + (new Date(date).getDate(date) < 10 ? '0' + new Date(date).getDate(date) : new Date(date).getDate(date))
  711. var nowTime =
  712. (new Date(date).getHours() < 10 ? '0' + new Date(date).getHours() : new Date(date).getHours()) +
  713. ':' +
  714. (new Date(date).getMinutes() < 10 ? '0' + new Date(date).getMinutes() : new Date(date).getMinutes()) +
  715. ':' +
  716. (new Date(date).getSeconds() < 10 ? '0' + new Date(date).getSeconds() : new Date(date).getSeconds())
  717. return nowDate + ' ' + nowTime
  718. } else {
  719. return ''
  720. }
  721. },
  722. cancelDelivery() {
  723. this.openDeliveryPage = false
  724. this.deliveryreset()
  725. },
  726. // 表单重置
  727. deliveryreset() {
  728. this.deliveryVo = {
  729. bizId: '',
  730. // count: 1,
  731. customRemark: '',
  732. deliveryCompany: '',
  733. deliveryId: '',
  734. expectTime: '',
  735. orderId: 0,
  736. serviceName: '',
  737. serviceType: null,
  738. spaceHeight: null,
  739. spaceLength: null,
  740. spaceWidth: null,
  741. weight: null
  742. }
  743. },
  744. submitRefund() {
  745. this.$confirm('是否确认撤回该订单?')
  746. .then(() => {
  747. refundOrderGoods(this.refundVO).then((response2) => {
  748. this.$message.success('操作成功')
  749. this.getList()
  750. this.openRefundPage = false
  751. this.refundVO.orderId = null
  752. this.refundVO.refundReason = null
  753. })
  754. })
  755. .catch(() => {})
  756. },
  757. checkClose(done) {
  758. this.$confirm('是否关闭支付页面,放弃支付?')
  759. .then(function () {
  760. done()
  761. })
  762. .then(() => {})
  763. .catch(() => {})
  764. },
  765. deliveryClose(done) {
  766. this.$confirm('是否关闭出货信息窗口,确认关闭?')
  767. .then(function () {
  768. done()
  769. })
  770. .then(() => {})
  771. .catch(() => {})
  772. },
  773. deliveryinfoClose(done) {
  774. this.$confirm('是否关闭快递信息窗口,确认关闭?')
  775. .then(function () {
  776. done()
  777. })
  778. .then(() => {})
  779. .catch(() => {})
  780. },
  781. deliveryInfo(row) {
  782. getDeliveryPath({
  783. orderId: row.id
  784. }).then((res) => {
  785. this.deliveryView.name = row.deliveryCompany
  786. this.deliveryView.pathItemList = res.data.pathItemList
  787. this.deliveryView.address = row.province + row.city + row.area + row.address + row.addressDetail
  788. console.log(this.deliveryView)
  789. this.openDeliveryinfo = true
  790. })
  791. },
  792. btn_lodop(row) {
  793. if (!this.LODOP) {
  794. this.$modal.msgError('请安装打印机软件')
  795. return
  796. }
  797. let p_name = ''
  798. this.pointerList.forEach((pointer) => {
  799. if (pointer.printType == 0) {
  800. p_name = pointer.printName
  801. }
  802. })
  803. getGoods(row.id).then((res) => {
  804. if (this.userInfoVO.userType == '02') {
  805. const obj = {
  806. name: this.userInfoVO.storeName,
  807. contactPhone: this.userInfoVO.phonenumber,
  808. user: this.userInfoVO.nickName
  809. }
  810. res.data.sysOrg = obj
  811. }
  812. res.data.newTime = this.formatDates(new Date(), 1)
  813. this.goodsPrinter(this.LODOP, res.data, p_name)
  814. })
  815. },
  816. /** 导出按钮操作 */
  817. handleExport() {
  818. this.download(
  819. 'mapi/order/goods/export',
  820. {
  821. ...this.queryParams,
  822. ...{ goodsType: this.goodsType }
  823. },
  824. `goods_order_${new Date().getTime()}.xlsx`
  825. )
  826. }
  827. }
  828. }
  829. </script>
  830. <style>
  831. .list_title {
  832. text-align: center;
  833. line-height: 40px;
  834. }
  835. .head-container-two {
  836. height: 500px;
  837. display: block;
  838. overflow-y: scroll;
  839. }
  840. .head-column1 {
  841. height: 300px;
  842. display: block;
  843. overflow-y: scroll;
  844. }
  845. .head-column2 {
  846. height: 600px;
  847. display: block;
  848. overflow-y: scroll;
  849. }
  850. .box-shadow .el-button--medium {
  851. font-size: 18px;
  852. }
  853. </style>
  854. <style lang="scss" scoped>
  855. .servicecard {
  856. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  857. background-color: #fff;
  858. border-radius: 5px;
  859. margin: 0 10px 10px 0;
  860. padding: 10px 20px;
  861. display: inline-block;
  862. cursor: pointer;
  863. position: relative;
  864. &::after {
  865. content: '';
  866. position: absolute;
  867. top: 0;
  868. right: 0px; /* 调整三角形的大小和位置 */
  869. width: 0;
  870. height: 0;
  871. border-left: 35px solid transparent;
  872. border-top: 35px solid #007bff;
  873. z-index: 50;
  874. opacity: 0;
  875. }
  876. .check {
  877. position: absolute;
  878. top: -5px;
  879. right: 3px;
  880. color: #fff;
  881. z-index: 100;
  882. opacity: 0;
  883. }
  884. &.active {
  885. &::after {
  886. opacity: 1;
  887. }
  888. .check {
  889. opacity: 1;
  890. }
  891. }
  892. }
  893. .deliveryView {
  894. margin: 0 20px 20px 20px;
  895. padding: 15px;
  896. border-radius: 5px;
  897. background-color: #f4f4f4;
  898. color: #555;
  899. .info:first-child {
  900. margin-bottom: 10px;
  901. }
  902. }
  903. </style>