order.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867
  1. <template>
  2. <div>
  3. <!-- <div class="btn">
  4. <el-button type="primary">同步订单</el-button>
  5. </div> -->
  6. <div class="search">
  7. <el-form ref="advancedForm" :model="advancedForm" label-width="160px">
  8. <el-row>
  9. <el-col :span="8">
  10. <el-form-item label="订单日期">
  11. <el-date-picker v-model="advancedForm.goodsExchange_time_range" type="daterange" align="center"
  12. :editable="false" unlink-panels :clearable="false" :default-time="['00:00:00', '23:59:59']"
  13. range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp"
  14. :picker-options="{
  15. disabledDate(time) {
  16. return (
  17. time.getTime() - 1 >=
  18. new Date(
  19. new Date().getFullYear(),
  20. new Date().getMonth(),
  21. new Date().getDate()
  22. ).getTime() +
  23. 86400000 -
  24. 1
  25. );
  26. },
  27. shortcuts: MixinPickerShortcuts,
  28. }">
  29. </el-date-picker>
  30. </el-form-item>
  31. </el-col>
  32. <el-col :span="8">
  33. <el-form-item label="仓库">
  34. <el-select v-model="advancedForm.warehouse_id" clearable>
  35. <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
  36. </el-select>
  37. </el-form-item>
  38. </el-col>
  39. <el-col :span="8">
  40. <el-form-item label="订单编号">
  41. <el-input v-model="advancedForm.sn" placeholder="请输入订单编号"></el-input>
  42. </el-form-item>
  43. </el-col>
  44. </el-row>
  45. </el-form>
  46. <el-button @click="advancedSearchEvent"> 搜索 </el-button>
  47. </div>
  48. <en-table-layout toolbar pagination :loading="loading" :tableData="tableData"
  49. @selection-change="handleSelectionChange">
  50. <div slot="toolbar" class="inner-toolbar">
  51. <div class="toolbar-btns">
  52. <el-button size="mini" type="primary" v-if="checkPermission(['order:add'])" @click="handleAdd">新增</el-button>
  53. <!-- <el-button size="mini" type="primary" v-if="checkPermission(['order:outbound'])"
  54. @click="batchOutbound">批量出库</el-button> -->
  55. </div>
  56. <!-- <div class="toolbar-search">
  57. <en-table-search
  58. @search="searchEvent"
  59. @advancedSearch="advancedSearchEvent"
  60. advanced
  61. advancedWidth="465"
  62. placeholder="请输入订单编号或会员名称"
  63. >
  64. <template slot="advanced-content">
  65. <el-form
  66. ref="advancedForm"
  67. :model="advancedForm"
  68. label-width="80px"
  69. >
  70. <el-form-item label="订单时间">
  71. <el-date-picker
  72. v-model="advancedForm.order_time"
  73. type="daterange"
  74. align="center"
  75. :default-time="['00:00:00', '23:59:59']"
  76. :editable="false"
  77. unlink-panels
  78. range-separator="-"
  79. start-placeholder="开始日期"
  80. end-placeholder="结束日期"
  81. >
  82. </el-date-picker>
  83. </el-form-item>
  84. <el-form-item label="仓库">
  85. <el-select v-model="advancedForm.status" clearable>
  86. <el-option label="待提交" value="WAIT_SUBMIT" />
  87. <el-option label="待审核" value="WAIT_AUDIT" />
  88. <el-option label="审核驳回" value="AUDIT_REJECT" />
  89. <el-option label="待出库" value="WAIT_WAREHOUSE_OUT" />
  90. <el-option label="待发货" value="WAIT_SHIP" />
  91. <el-option label="已发货" value="SHIPPED" />
  92. </el-select>
  93. </el-form-item>
  94. <el-form-item label="订单编号">
  95. <el-select v-model="advancedForm.payment_status" clearable>
  96. <el-option label="未支付" value="NOT_PAY" />
  97. <el-option label="已支付" value="PAY" />
  98. </el-select>
  99. </el-form-item>
  100. </el-form>:selectable="canWarehouseOut"
  101. </template>
  102. </en-table-search>
  103. </div> -->
  104. </div>
  105. <template slot="table-columns">
  106. <el-table-column type="selection" width="55" />
  107. <el-table-column prop="sn" label="订单编号">
  108. <template slot-scope="scope">
  109. {{ scope.row.sn }}
  110. </template>
  111. </el-table-column>
  112. <el-table-column label="客户">
  113. <template slot-scope="scope">{{
  114. memberType(scope.row.member_id)
  115. }}</template>
  116. </el-table-column>
  117. <el-table-column label="下单时间">
  118. <template slot-scope="scope">{{
  119. scope.row.create_time | unixToDate
  120. }}</template>
  121. </el-table-column>
  122. <el-table-column prop="warehouse_id" label="仓库名称">
  123. <template slot-scope="scope">
  124. {{ warehouseName(scope.row.warehouse_id) }}
  125. </template>
  126. </el-table-column>
  127. <el-table-column prop="send_type" label="配送方式">
  128. <template slot-scope="scope">{{
  129. deliveryType(scope.row.send_type)
  130. }}</template>
  131. </el-table-column>
  132. <el-table-column prop="pay_type" label="付款方式">
  133. <template slot-scope="scope">{{
  134. payType(scope.row.pay_type)
  135. }}</template>
  136. </el-table-column>
  137. <el-table-column prop="status" label="实付金额">
  138. <template slot-scope="scope">{{
  139. "¥" + scope.row.pay_price
  140. }}</template>
  141. </el-table-column>
  142. <el-table-column prop="status" label="订单状态">
  143. <template slot-scope="scope">
  144. {{ typeName(scope.row.status) }}
  145. </template>
  146. </el-table-column>
  147. <el-table-column label="延期次数">
  148. <template slot-scope="scope">
  149. {{ scope.row.extension }}
  150. </template>
  151. </el-table-column>
  152. <el-table-column prop="status" label="订单类型">
  153. <template slot-scope="scope">{{ scope.row.type == 'TO_B' ? '销售订单' : '租赁订单' }}</template>
  154. </el-table-column>
  155. <el-table-column prop="status" label="支付状态">
  156. <template slot-scope="scope">{{ scope.row.has_pay_return ? '已支付' : '未支付' }}</template>
  157. </el-table-column>
  158. <el-table-column label="操作" width="300">
  159. <template slot-scope="scope">
  160. <el-button size="mini" @click="handleAudit(scope.row)">查看</el-button>
  161. <!-- <el-button size="mini" type="success" v-if="scope.row.status === 'TO_BE_COMMIT'"
  162. @click="handleSubmit(scope.row.id)">确认</el-button> -->
  163. <el-button size="mini" @click="handleEdit(scope.row)"
  164. v-if="(scope.row.status === 'TO_BE_COMMIT' || scope.row.status === 'TO_BE_SEND') && checkPermission(['orderEdit'])">编辑</el-button>
  165. <el-button size="mini" v-if="scope.row.type === 'TO_C' && checkPermission(['extensionUpdate'])"
  166. @click="handleWithdraw(scope.row.id)">延期</el-button>
  167. <el-button size="mini" v-if="!scope.row.has_pay_return" @click="payTypes(scope.row)">支付</el-button>
  168. <el-button size="mini" v-if="!scope.row.has_pay_return && scope.row.type === 'TO_C'"
  169. @click="reimbursement(scope.row)">交通费</el-button>
  170. <el-button size="mini" style="margin-top: 5px;"
  171. v-if="scope.row.status !== 'TO_BE_SEND' && checkPermission(['orderReturn2:add'])"
  172. @click="afterSales(scope.row.id)">售后</el-button>
  173. <el-button size="mini" @click="handleRevoke(scope.row)" style="margin-top: 5px;"
  174. v-if="(scope.row.status === 'TO_BE_COMMIT' || scope.row.status === 'TO_BE_SEND') && checkPermission(['order:withdraw'])"
  175. type="danger">撤销</el-button>
  176. </template>
  177. </el-table-column>
  178. </template>
  179. <el-pagination slot="pagination" v-if="pageData" @size-change="handlePageSizeChange"
  180. @current-change="handlePageCurrentChange" :current-page="pageData.page_no" :page-sizes="[10, 20, 50, 100]"
  181. :page-size="pageData.page_size" layout="total, sizes, prev, pager, next, jumper" :total="pageData.data_total">
  182. </el-pagination>
  183. </en-table-layout>
  184. <el-dialog title="扫码支付(支付宝)" :visible.sync="payVisible" width="30%" :close-on-click-modal="false"
  185. @close="closeDialog">
  186. <div id="qrCode" style="display: flex;justify-content: center;" ref="qrCodeDiv">
  187. <!-- 二维码容器 -->
  188. <div class="qr-code"></div>
  189. <!-- Logo 图片 -->
  190. <div ref="qrCodeDiv1"></div>
  191. </div>
  192. </el-dialog>
  193. <el-dialog title="交通费信息" :visible.sync="reimburVisible" :modal-append-to-body="false" :close-on-click-modal="false"
  194. :close-on-press-escape="false">
  195. <el-form :model="reimburForm" ref="reimburForm" label-width="120px" inline>
  196. <el-row>
  197. <el-col :span="12">
  198. <el-form-item label="金额:" prop="money ">
  199. <el-input v-model="reimburForm.money" :minlength="2" :maxlength="20" clearable
  200. placeholder="请输入报销金额"></el-input>
  201. </el-form-item>
  202. </el-col>
  203. <el-col>
  204. <el-form-item label="报销凭证:" prop="gender">
  205. <el-upload class="avatar-uploader" :action="MixinUploadApi" :show-file-list="false"
  206. :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
  207. <img v-if="reimburForm.file_url" :src="reimburForm.file_url" class="avatar">
  208. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  209. </el-upload>
  210. </el-form-item>
  211. </el-col>
  212. </el-row>
  213. </el-form>
  214. <span slot="footer" class="dialog-footer">
  215. <el-button @click="reimburVisible = false">取 消</el-button>
  216. <el-button type="primary" @click="addReimburForm">确 定</el-button>
  217. </span>
  218. </el-dialog>
  219. </div>
  220. </template>
  221. <script>
  222. import * as API_order from "@/api/order";
  223. import Storage from "@/utils/storage";
  224. import * as API_BasicSetting from "@/api/basicSetting";
  225. import * as API_Setting from "@/api/setting";
  226. import * as API_CollectingAccount from "@/api/collectingAccount";
  227. import QRCode from 'qrcodejs2'
  228. export default {
  229. name: "orderList",
  230. data() {
  231. return {
  232. warehouseList: [],
  233. /** 列表loading状态 */
  234. loading: false,
  235. /** 列表参数 */
  236. params: {
  237. page_no: 1,
  238. page_size: 10,
  239. ...this.$route.query,
  240. },
  241. cancelpopup: false,
  242. cancelLister: "",
  243. /** 列表数据 */
  244. tableData: [],
  245. /** 列表分页数据 */
  246. pageData: [],
  247. /** 高级搜索数据 */
  248. advancedForm: {},
  249. /** 表格最大高度 */
  250. tableMaxHeight: document.body.clientHeight - 54 - 34 - 50 - 15,
  251. accessToken: Storage.getItem("seller_access_token"),
  252. multipleSelection: [],
  253. orderType: [],
  254. collectingAccountList: [], // 支付方式列表
  255. deliveryTypeList: [
  256. ],
  257. customerList: [],
  258. payVisible: false,
  259. payCode: '',
  260. //当前地址
  261. payurl: "",
  262. paySn: '',
  263. pay_price: 0,
  264. reimburVisible: false,
  265. reimburForm: {
  266. order_id: '',
  267. money: "",
  268. file_url: ''
  269. },
  270. };
  271. },
  272. mounted() {
  273. this.GET_OrderList();
  274. this.GET_WarehouseList();
  275. this.GET_CollectingAccountList();
  276. this.GET_CustomerList();
  277. },
  278. activated() {
  279. delete this.params.market_enable;
  280. this.params = {
  281. ...this.params,
  282. ...this.$route.query,
  283. };
  284. this.GET_OrderList();
  285. window.onresize = this.countTableHeight;
  286. },
  287. beforeRouteUpdate(to, from, next) {
  288. delete this.params.market_enable;
  289. this.params = {
  290. ...this.params,
  291. ...this.$route.query,
  292. };
  293. this.GET_OrderList();
  294. next();
  295. },
  296. methods: {
  297. //提交报销单
  298. addReimburForm() {
  299. API_order.addOrderCustomerFee(this.reimburForm).then(res => {
  300. this.$message.success('添加成功')
  301. this.reimburVisible = false
  302. this.reimburForm = {}
  303. })
  304. },
  305. handleAvatarSuccess(res, file) {
  306. this.reimburForm.file_url = file.response.url
  307. // this.reimburForm.file_url = URL.createObjectURL(file.raw);
  308. },
  309. beforeAvatarUpload(file) {
  310. const isLt2M = file.size / 1024 / 1024 < 10;
  311. /* if (!isJPG) {isJPG && const isJPG = file.type === 'image/jpeg';
  312. this.$message.error('上传头像图片只能是 JPG 格式!');
  313. } */
  314. if (!isLt2M) {
  315. this.$message.error('上传头像图片大小不能超过 10MB!');
  316. }
  317. return isLt2M;
  318. },
  319. /* 报销 */
  320. reimbursement(row) {
  321. this.reimburForm.order_id = row.id
  322. this.reimburVisible = true
  323. },
  324. //撤销
  325. handleRevoke(row) {
  326. API_order.orderRevoke(row.id).then(res => {
  327. this.$message.success('撤销成功!')
  328. this.GET_OrderList();
  329. })
  330. },
  331. //新增售后
  332. afterSales(row) {
  333. this.$router.push({
  334. name: "orderReturnAdd",
  335. params: { id: row },
  336. });
  337. },
  338. closeDialog() {
  339. this.payVisible = false
  340. this.payCode = ''
  341. this.paySn = ""
  342. this.pay_price = ''
  343. },
  344. /* 支付 */
  345. payTypes(val) {
  346. this.payurl = window.location.href.split('#')[0]
  347. this.payVisible = true
  348. this.payCode = val.id
  349. this.paySn = val.sn
  350. this.pay_price = val.pay_price
  351. this.creatQrCode()
  352. },
  353. // 二维码生成
  354. creatQrCode() {
  355. this.$nextTick(() => {
  356. this.$refs.qrCodeDiv.innerHTML = "";
  357. new QRCode(this.$refs.qrCodeDiv, {
  358. text: this.payurl + '#/payType?id=' + this.payCode + '&sn=' + this.paySn + '&price=' + this.pay_price,
  359. width: 200,
  360. height: 200,
  361. colorDark: "#333333", //二维码颜色
  362. colorLight: "#ffffff", //二维码背景色
  363. correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
  364. })
  365. /* this.positionLogo() */
  366. }, 500);
  367. },
  368. positionLogo() {
  369. let qrcode = new QRCode(this.$refs.qrCodeDiv, {
  370. text: this.payurl + '#/payType?id=' + this.payCode + '&sn=' + this.paySn + '&price=' + this.pay_price,
  371. width: 200,
  372. height: 200,
  373. colorDark: "#333333", //二维码颜色
  374. colorLight: "#ffffff", //二维码背景色
  375. correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
  376. })
  377. let logo = new Image();
  378. logo.crossOrigin = 'Anonymous';
  379. logo.src = "https://img2.baidu.com/it/u=3765512519,3278388264&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
  380. let that = this;
  381. let con = this.$refs.qrCodeDiv1;
  382. logo.onload = function () {
  383. let container = con;
  384. let qrImg = qrcode._el.getElementsByTagName('img')[0];
  385. let canvas = qrcode._el.getElementsByTagName('canvas')[0];
  386. var ctx = canvas.getContext("2d");
  387. ctx.drawImage(logo, 162 * 0.5 - 22, 162 * 0.5 - 22, 44, 44);
  388. qrImg.src = canvas.toDataURL();
  389. container.appendChild(qrcode._el);
  390. }
  391. },
  392. memberType(val) {
  393. let name = "";
  394. this.customerList.map((el) => {
  395. if (el.id == val) {
  396. return (name = el.name);
  397. }
  398. });
  399. return name;
  400. },
  401. //获取客户列表
  402. GET_CustomerList() {
  403. API_BasicSetting.customer(this.params)
  404. .then((response) => {
  405. this.customerList = response.data;
  406. })
  407. .catch(() => { });
  408. },
  409. //配送方式查看
  410. deliveryType(val) {
  411. let name = "";
  412. this.deliveryTypeList.map((el) => {
  413. if (el.value == val) {
  414. return (name = el.label);
  415. }
  416. });
  417. return name;
  418. },
  419. //获取付款方式
  420. payType(val) {
  421. let name = "";
  422. this.collectingAccountList.map((el) => {
  423. if (el.id == val) {
  424. return (name = el.name);
  425. }
  426. });
  427. return name;
  428. },
  429. /** 获取支付方式列表 */
  430. GET_CollectingAccountList() {
  431. API_CollectingAccount.getList({
  432. page_no: 1,
  433. page_size: -1,
  434. enable_flag: true,
  435. }).then((response) => {
  436. this.collectingAccountList = response.data;
  437. });
  438. },
  439. //获取订单状态大小写转换.toUpperCase()
  440. typeName(val) {
  441. let name = "";
  442. this.orderType.map((el) => {
  443. if (el.value == val) {
  444. return (name = el.label);
  445. }
  446. });
  447. return name;
  448. },
  449. //获取仓库名称
  450. warehouseName(val) {
  451. let name = [];
  452. this.warehouseList.map((el) => {
  453. val.map((e) => {
  454. if (el.id == e) {
  455. return name.push(el.name)
  456. }
  457. });
  458. });
  459. return name.join('/');
  460. },
  461. batchOutbound() {
  462. if (this.multipleSelection.length === 0) {
  463. this.$message.error("请选择订单!");
  464. return;
  465. }
  466. const orderIds = this.multipleSelection.map((order) => order.id);
  467. this.$router.push({
  468. name: "orderOutbound",
  469. params: { orderIds: orderIds },
  470. });
  471. },
  472. /** 获取仓库 */
  473. GET_WarehouseList() {
  474. API_BasicSetting.getWarehouseListAll().then((response) => {
  475. this.warehouseList = response;
  476. });
  477. API_Setting.getPage({ dictType: "order_status" }).then((res) => {
  478. this.orderType = res.data;
  479. });
  480. API_Setting.getPage({ dictType: "order_send_type" }).then((res) => {
  481. this.deliveryTypeList = res.data;
  482. });
  483. },
  484. /** 计算高度 */
  485. countTableHeight() {
  486. this.tableHeight = document.body.clientHeight - 54 - 35 - 50;
  487. },
  488. /** 多选改变 */
  489. handleSelectionChange(val) {
  490. this.multipleSelection = val;
  491. },
  492. /** 新增 */
  493. handleAdd() {
  494. this.$router.push({
  495. name: "orderAdd",
  496. params: { callback: this.GET_OrderList },
  497. });
  498. },
  499. /** 是否可以出库 */
  500. /* canWarehouseOut(row) {
  501. return row.allowable.warehouse_out;
  502. }, */
  503. /** 分页大小发生改变 */
  504. handlePageSizeChange(size) {
  505. this.params.page_size = size;
  506. this.GET_OrderList();
  507. },
  508. /** 分页页数发生改变 */
  509. handlePageCurrentChange(page) {
  510. this.params.page_no = page;
  511. this.GET_OrderList();
  512. },
  513. /** 搜索事件触发 */
  514. searchEvent(data) {
  515. this.params = {
  516. ...this.params,
  517. keywords: data,
  518. };
  519. this.params.page_no = 1;
  520. delete this.params.order_status;
  521. Object.keys(this.advancedForm).forEach((key) => delete this.params[key]);
  522. this.GET_OrderList();
  523. },
  524. /** 高级搜索事件触发 */
  525. advancedSearchEvent() {
  526. this.params = {
  527. ...this.params,
  528. ...this.advancedForm,
  529. };
  530. this.params.page_no = 1;
  531. delete this.params.start_time;
  532. delete this.params.end_time;
  533. if (this.advancedForm.order_time) {
  534. this.advancedForm.order_time[0] =
  535. this.advancedForm.order_time[0].getTime() / 1000;
  536. this.advancedForm.order_time[1] =
  537. this.advancedForm.order_time[1].getTime() / 1000;
  538. }
  539. delete this.params.keywords;
  540. this.GET_OrderList();
  541. },
  542. /** 编辑订单 */
  543. handleEdit(order) {
  544. this.$router.push({
  545. name: "orderEdit",
  546. params: { id: order.id, callback: this.GET_OrderList },
  547. });
  548. },
  549. /** 查看订单 */
  550. handleAudit(order) {
  551. this.$router.push({
  552. name: "orderCheck",
  553. params: { id: order.id, callback: this.GET_OrderList, type: 'check' },
  554. });
  555. },
  556. /** 订单设为已支付 */
  557. async handlePayment(id) {
  558. // 二次确认
  559. await this.$confirm(`确认要设为已支付吗?`, "提示");
  560. // 发起修改
  561. await API_order.payment(id);
  562. this.$message.success("操作成功!");
  563. // 刷新列表
  564. this.GET_OrderList();
  565. },
  566. /** 提交订单 */
  567. async handleSubmit(id) {
  568. // 发起修改
  569. await API_order.submit(id);
  570. this.$message.success("操作成功!");
  571. // 刷新列表
  572. this.GET_OrderList();
  573. },
  574. /** 延期 */
  575. async handleWithdraw(id) {
  576. this.$router.push({
  577. name: "extensionUpdate",
  578. params: { id: id, type: 'pone' },
  579. });
  580. },
  581. GET_OrderList() {
  582. this.loading = true;
  583. API_order.getOrderList(this.params).then((response) => {
  584. this.loading = false;
  585. this.tableData = response.data;
  586. this.pageData = {
  587. page_no: response.page_no,
  588. page_size: response.page_size,
  589. data_total: response.data_total,
  590. };
  591. }).catch(() => {
  592. this.loading = false;
  593. })
  594. },
  595. },
  596. };
  597. </script>
  598. <style type="text/scss" lang="scss" scoped>
  599. .btn {
  600. display: flex;
  601. justify-content: flex-end;
  602. padding: 30px 20px 5px;
  603. border-radius: 5px;
  604. background-color: #fff;
  605. .el-button {
  606. width: 100px;
  607. }
  608. }
  609. .search {
  610. display: flex;
  611. align-items: center;
  612. background: #fff;
  613. overflow: hidden;
  614. padding: 30px 10px 10px 10px;
  615. /deep/ .el-form-item {
  616. .el-form-item__content {
  617. .el-input {
  618. width: 200px;
  619. }
  620. }
  621. }
  622. .el-button {
  623. margin-top: -19px;
  624. margin-left: 20px;
  625. }
  626. }
  627. /* .container {
  628. padding: 10px 10px 0 10px;
  629. } */
  630. /deep/ .el-table {
  631. min-height: auto !important;
  632. }
  633. /deep/ div.toolbar {
  634. height: 70px;
  635. padding: 20px 0;
  636. }
  637. /* 工具条*/
  638. .inner-toolbar {
  639. display: flex;
  640. width: 100%;
  641. justify-content: space-between;
  642. padding: 0 20px;
  643. }
  644. .empty-block {
  645. position: relative;
  646. min-height: 60px;
  647. line-height: 60px;
  648. text-align: center;
  649. width: 262%;
  650. font-size: 14px;
  651. color: #606266;
  652. }
  653. /*表格信息*/
  654. .my-table-out {
  655. white-space: nowrap;
  656. overflow-y: scroll;
  657. overflow-x: hidden;
  658. text-overflow: ellipsis;
  659. width: 100%;
  660. max-height: 800px;
  661. margin: 0 10px;
  662. min-height: 480px !important;
  663. background: #fff;
  664. }
  665. .my-table {
  666. width: 100%;
  667. margin-bottom: 40px;
  668. background: #fff;
  669. border-collapse: collapse;
  670. font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
  671. Microsoft YaHei, Arial, sans-serif;
  672. font-size: 14px;
  673. font-bold: 700;
  674. .bg-order {
  675. background: #fafafa;
  676. }
  677. thead {
  678. th {
  679. padding: 10px 0;
  680. border: 1px solid #ebeef5;
  681. border-collapse: collapse;
  682. color: #909399;
  683. }
  684. th.shoplist-header {
  685. padding: 10px 20px;
  686. display: flex;
  687. flex-direction: row;
  688. flex-wrap: nowrap;
  689. justify-content: space-between;
  690. align-items: center;
  691. }
  692. }
  693. tbody {
  694. margin-top: 10px;
  695. td {
  696. border: 1px solid #ebeef5;
  697. border-collapse: collapse;
  698. text-align: center;
  699. padding: 0;
  700. }
  701. td:first-child {
  702. text-align: left;
  703. }
  704. td:not(:first-child) {
  705. padding: 3px;
  706. }
  707. td.shoplist-content-out {
  708. padding-left: 20px;
  709. }
  710. /*商品信息*/
  711. p.shoplist-content:not(:last-child) {
  712. border-bottom: 1px solid #ebeef5;
  713. border-collapse: collapse;
  714. }
  715. p.shoplist-content {
  716. margin: 0;
  717. padding: 0 20px;
  718. box-sizing: padding-box;
  719. display: flex;
  720. flex-direction: row;
  721. flex-wrap: nowrap;
  722. justify-content: space-between;
  723. align-items: center;
  724. .goods-info {
  725. display: flex;
  726. flex-direction: row;
  727. flex-wrap: nowrap;
  728. justify-content: flex-start;
  729. align-items: center;
  730. padding: 10px 0;
  731. img {
  732. display: block;
  733. margin-right: 10px;
  734. }
  735. a {
  736. display: block;
  737. color: #409eff;
  738. }
  739. }
  740. }
  741. div.order-money {
  742. display: flex;
  743. flex-direction: column;
  744. flex-wrap: nowrap;
  745. justify-content: center;
  746. align-items: center;
  747. span {
  748. display: inline-block;
  749. padding: 5px;
  750. }
  751. span.order-amount {
  752. color: red;
  753. }
  754. }
  755. }
  756. /* 商品图片 */
  757. .goods-image {
  758. width: 50px;
  759. height: 50px;
  760. }
  761. /** 交易快照 */
  762. .trade-record {
  763. display: inline-block;
  764. margin-right: 50px;
  765. }
  766. }
  767. /*分页信息*/
  768. section>div {
  769. position: relative;
  770. }
  771. .el-pagination {
  772. text-align: right;
  773. width: 100%;
  774. background: #ffffff;
  775. height: 100px;
  776. padding: 5px 20px;
  777. margin: 0 10px;
  778. }
  779. .exprot-tip {
  780. margin-left: 5px;
  781. color: red;
  782. font-size: 12px;
  783. }
  784. .el-dialog__body {
  785. display: flex;
  786. justify-content: center;
  787. }
  788. /deep/.avatar-uploader .el-upload {
  789. border: 1px dashed #d9d9d9;
  790. border-radius: 6px;
  791. cursor: pointer;
  792. position: relative;
  793. overflow: hidden;
  794. }
  795. .avatar-uploader .el-upload:hover {
  796. border-color: #409EFF;
  797. }
  798. .avatar-uploader-icon {
  799. font-size: 28px;
  800. color: #8c939d;
  801. width: 178px;
  802. height: 178px;
  803. line-height: 178px;
  804. text-align: center;
  805. }
  806. .avatar {
  807. width: 178px;
  808. height: 178px;
  809. display: block;
  810. }
  811. </style>