123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328 |
- <template>
- <div id="form-1">
- <el-row>
- <el-col :span="24" class="main animate__animated animate__backInRight">
- <el-col class="top-btn">
- <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
- </el-col>
- <el-col :span="9" class="one">
- <el-col :span="24" class="add">
- <el-col :span="2">
- <i class="el-icon-location"></i>
- </el-col>
- <el-col :span="22">
- <p>{{ address.name }},{{ address.phone }}</p>
- <p>{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
- </el-col>
- </el-col>
- <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
- <el-col :span="24" v-for="(item, index) in list" :key="index">
- <el-col :span="24" class="goods">
- <el-col :span="6"><el-image :src="item.goods.file[0].url"></el-image></el-col>
- <el-col :span="18">
- <el-col :span="12">
- <p>{{ item.goods.name }}</p>
- <p>规格:{{ item.name }}</p>
- </el-col>
- <el-col :span="12" class="money">
- <p v-if="form.type == '0'">¥{{ item.sell_money }}</p>
- <p v-else-if="form.type == '1'">¥{{ item.group_config.money }}</p>
- <p>X{{ item.buy_num }}</p>
- </el-col>
- </el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">运费</el-col>
- <el-col :span="18" class="other" v-if="!item.goods.freight == '0'">{{ item.goods.freight }}</el-col>
- <el-col :span="18" class="other" v-else>包邮</el-col>
- </el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">订单备注</el-col>
- <el-col :span="18" class="other" v-if="form.remarks">{{ form.remarks }}</el-col>
- <el-col :span="18" class="other" v-else>暂无备注</el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">配送方式</el-col>
- <el-col :span="18" class="other">快递配送</el-col>
- </el-col>
- <el-col :span="24" class="goods_total">
- <el-col :span="6">商品金额</el-col>
- <el-col :span="18" class="other">
- <p>¥{{ total_detail.goods_total }}</p>
- </el-col>
- </el-col>
- <el-col :span="24" class="goods_total">
- <el-col :span="6">快递费</el-col>
- <el-col :span="18" class="other">
- <p>¥{{ total_detail.freight_total }}</p>
- </el-col>
- </el-col>
- <el-col :span="24" class="goods_total">
- <el-col :span="8">优惠后实付金额</el-col>
- <el-col :span="16" class="other">
- <p>¥{{ pay.pay_money }}</p>
- </el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">下单时间</el-col>
- <el-col :span="18" class="other">{{ form.buy_time }}</el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">支付时间</el-col>
- <el-col :span="18" class="other">{{ form.pay_time }}</el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">寄出运单号</el-col>
- <el-col :span="18" class="other">{{ transport.shop_transport_no || '暂无单号' }}</el-col>
- </el-col>
- <el-col :span="24">
- <el-col :span="6">寄出快递类型</el-col>
- <el-col :span="18" class="other">{{ transport.shop_transport_name || '暂无快递信息' }}</el-col>
- </el-col>
- <el-col :span="24">
- <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
- <el-form-item
- label="寄出运单号"
- prop="shop_transport_no"
- v-if="(form.status == '1' || form.status == '2') && (!transport.shop_transport_no || !transport.shop_transport_name)"
- >
- <el-input v-model="form.shop_transport_no" placeholder="请输入运单号,快递类型,同时填入" size="small"></el-input>
- </el-form-item>
- <el-form-item
- label="快递类型"
- prop="shop_transport_type"
- v-if="(form.status == '1' || form.status == '2') && (!transport.shop_transport_no || !transport.shop_transport_name)"
- >
- <el-select
- v-model="form.shop_transport_type"
- filterable
- remote
- reserve-keyword
- placeholder="请选择快递类型,运单号,同时填入"
- :remote-method="querySearch"
- :loading="loading"
- @change="handleSelect"
- size="small"
- style="width: 100%"
- >
- <el-option v-for="item in shop_transport_typeList" :key="item.id" :label="item.label" :value="item.value"> </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="订单状态" prop="status">
- <el-select v-model="form.status" clearable filterable placeholder="请选择订单状态" size="small" style="width: 100%">
- <el-option v-for="i in order_processList" :key="i.label" :label="i.label" :value="i.value"> </el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="onSubmit()">保存</el-button>
- </el-form-item>
- </el-form>
- </el-col>
- </el-col>
- <el-col :span="9" class="one" v-if="transport.shop_transport_no">
- <el-col :span="24">{{ activit.is_check || '暂无快递信息' }}</el-col>
- <el-col :span="24">{{ transport.shop_transport_name || '暂无快递信息' }}: {{ activit.no || '暂无快递信息' }}</el-col>
- <el-col :span="24">
- <p>订单编号: {{ form.id }}</p>
- </el-col>
- <el-col :span="24">
- <p>收货地址:{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
- </el-col>
- <el-col :span="24">
- <el-timeline :reverse="reverse">
- <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" :color="activity.color">
- {{ activity.context }}
- </el-timeline-item>
- </el-timeline>
- </el-col>
- </el-col>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- const _ = require('lodash');
- const moment = require('moment');
- import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
- const { mapActions } = createNamespacedHelpers('orderDetail');
- const { mapActions: dictData } = createNamespacedHelpers('dictData');
- const { mapActions: sot } = createNamespacedHelpers('sot');
- export default {
- name: 'form-1',
- props: {},
- components: {},
- data: function () {
- return {
- form: {},
- // 地址
- address: {},
- // 实付金额
- total_detail: {},
- // 商铺
- shop: {},
- // 运单号
- transport: {},
- pay: {},
- // 商品列表
- list: [],
- // 物流
- reverse: false,
- activities: [],
- activit: {},
- // 订单状态
- order_processList: [],
- // 快递类型
- shop_transport_typeList: [],
- loading: false,
- };
- },
- async created() {
- await this.searchOther();
- await this.search();
- },
- methods: {
- ...dictData({ dictQuery: 'query' }),
- ...sot({ sotFetch: 'fetch' }),
- ...mapActions(['query', 'fetch', 'create', 'update']),
- // 查询
- async search() {
- let res;
- res = await this.fetch(this.id);
- if (this.$checkRes(res)) {
- this.$set(this, `form`, res.data);
- // 地址
- this.$set(this, `address`, res.data.address);
- this.$set(this, `shop`, res.data.shop);
- // 商品
- this.$set(this, `list`, res.data.goods);
- // 应付金额
- this.$set(this, `total_detail`, res.data.total_detail);
- this.$set(this, `pay`, res.data.order.pay);
- if (res.data.transport) {
- let arr = await this.dictQuery({ code: 'transport_type', value: res.data.transport.shop_transport_type });
- if (this.$checkRes(arr)) {
- let type = arr.data.find((i) => i.value == res.data.transport.shop_transport_type);
- if (type) res.data.transport.shop_transport_name = type.label;
- this.$set(this, `transport`, res.data.transport);
- }
- res = await this.sotFetch(this.id);
- if (this.$checkRes(res)) {
- if (res.errcode == '0') {
- let activities = res.data.list;
- activities[0].color = '#0bbd87';
- this.$set(this, `activities`, activities);
- this.$set(this, `activit`, res.data);
- }
- }
- }
- }
- },
- async querySearch(value) {
- this.loading = true;
- let res = await this.dictQuery({ code: 'transport_type', label: value });
- if (this.$checkRes(res)) {
- this.$set(this, 'shop_transport_typeList', res.data);
- }
- this.loading = false;
- },
- handleSelect(value) {
- // this.$set(this.form, `shop_transport_type`, value);
- },
- // 提交
- async onSubmit() {
- let form = this.form;
- let transport = {};
- let res;
- if (form.shop_transport_no && form.shop_transport_type) {
- transport.shop_transport_no = form.shop_transport_no;
- transport.shop_transport_type = form.shop_transport_type;
- form.transport = transport;
- }
- if (form.id) res = await this.update(form);
- if (this.$checkRes(res)) {
- this.$message({ type: `success`, message: `维护信息成功` });
- this.toBack();
- }
- },
- // 返回
- toBack() {
- window.history.go('-1');
- },
- // 查询其他信息
- async searchOther() {
- let res;
- // 减免方式
- res = await this.dictQuery({ code: 'order_process' });
- if (this.$checkRes(res)) {
- this.$set(this, `order_processList`, res.data);
- }
- // 快递类型
- // res = await this.dictQuery({ code: 'transport_type' });
- // if (this.$checkRes(res)) {
- // this.$set(this, `shop_transport_typeList`, res.data);
- // }
- },
- },
- computed: {
- id() {
- return this.$route.query.id;
- },
- },
- metaform() {
- return { title: this.$route.meta.title };
- },
- watch: {
- test: {
- deep: true,
- immediate: true,
- handler(val) {},
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .main {
- .one {
- margin: 10px 0 0 5%;
- padding: 5px;
- .add {
- border-bottom: 2px dashed #ccc;
- margin: 0 0 5px 0;
- padding: 5px 0;
- }
- .shop {
- padding: 4px 0;
- font-size: 18px;
- border-bottom: 1px solid #ccc;
- }
- .goods {
- padding: 10px 0;
- .money {
- text-align: right;
- }
- }
- .other {
- text-align: right;
- p {
- color: red;
- }
- }
- .el-col {
- margin: 4px 0;
- }
- }
- }
- /deep/.el-timeline {
- margin: 20px 0 0 0;
- font-size: 16px;
- }
- /deep/.el-timeline-item__node:nth-child(1) {
- background-color: green;
- }
- </style>
|