Merge branch 'dev_ren' into 'master'

Dev ren

See merge request !9

src/api/website/order/index.js

@@ -8,7 +8,35 @@ export function getCustomList(obj) {
     params: obj
   });
 }
+// 订单列表
+export function getOrderList(query) {
+  return fetch({
+    url: 'api/website/orderInfo/getOrderList',
+    method: 'get',
+    params: query
+  });
+}
+/**
+ * 订单发货
+ */
+export function sendGoods(query) {
+  return fetch({
+    url: 'api/website/orderInfo/orderSend',
+    method: 'post',
+    data: query
+  });
+}
 
+/**
+ * 发票发货
+ */
+export function invoiceSend(query) {
+  return fetch({
+    url: 'api/website/orderInfo/invoiceSend',
+    method: 'post',
+    data: query
+  });
+}
 // 定制转订单
 export function createOrder(obj) {
   return fetch({
@@ -17,3 +45,4 @@ export function createOrder(obj) {
     data: obj
   });
 }
+

src/views/orderManagement/demandList/index.vue

@@ -249,7 +249,10 @@ export default {
         });
     },
     toItemOrder(item) {
-      console.log(item);
+      this.$router.push({
+        path: "/orderManagement/orderList",
+        query: { orderNo: item.orderNo },
+      });
     },
     delItemOrder(item) {
       this.$confirm("确认删除", "提示", {

src/views/orderManagement/orderList/index.vue

 <template>
-  <div>orderlist</div>
+  <div class="order-manage">
+    <el-form class="order-filter">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="订单搜索">
+            <el-input
+              filterable
+              v-model="listQuery.keywords"
+              placeholder="请输入订单编号、手机号、姓名"
+              style="width: 60%"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="下单时间" label-width="130px">
+            <el-date-picker
+              v-model="times"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="商品类型">
+            <el-select filterable v-model="listQuery.type" placeholder="请选择">
+              <el-option
+                :key="undefined"
+                label="全部"
+                :value="undefined"
+              ></el-option>
+              <el-option :key="1" label="标准数据" :value="1"></el-option>
+              <el-option :key="2" label="全部" :value="2"></el-option>
+              <el-option :key="3" label="全部" :value="3"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="订单状态">
+            <el-select
+              filterable
+              v-model="listQuery.status"
+              placeholder="请选择"
+            >
+              <el-option
+                :key="undefined"
+                label="全部"
+                :value="undefined"
+              ></el-option>
+              <el-option
+                v-for="item in orderStatusList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="付款状态">
+            <el-select
+              filterable
+              v-model="listQuery.payStatus"
+              placeholder="请选择"
+            >
+              <el-option
+                :key="undefined"
+                label="全部"
+                :value="undefined"
+              ></el-option>
+              <el-option :key="1" label="已支付" :value="1"></el-option>
+              <el-option :key="2" label="未支付" :value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-button type="primary" @click="handleFilter">筛选</el-button>
+          <el-button type="primary" plain @click="clear_search"
+            >清空筛选条件</el-button
+          >
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <div class="order-table">
+      <label class="goods-name">用户昵称</label>
+      <label class="goods-phone">手机号</label>
+      <label class="goods-item">商品</label>
+      <label class="goods-remark">备注</label>
+      <label class="send-way-item">交付方式</label>
+      <label class="pay-way-item">付款方式</label>
+      <label class="amount-item">实收金额（元）</label>
+      <label class="order-status-item">订单状态</label>
+      <label class="option-item">操作</label>
+    </div>
+    <div v-for="item in list" :key="item.orderId">
+      <div class="order-no-top">
+        <span class="order-no"
+          >订单号：{{ item.orderNo
+          }}<span
+            style="
+              background: #f8ddbb;
+              color: #f59a23;
+              font-size: 12px;
+              padding: 2px 10px;
+              border-radius: 10px;
+              margin-left: 10px;
+            "
+            v-if="item.invoiceStatus >= 2"
+            >已开票</span
+          ><span
+            style="
+              border: 1px solid #eee;
+              color: #1890ff;
+              font-size: 12px;
+              padding: 2px 10px;
+              border-radius: 10px;
+              margin-left: 10px;
+            "
+            v-else-if="item.invoiceId"
+            >开发票</span
+          ></span
+        >
+        <span class="order-time"
+          ><span
+            style="
+              background: #1890ff;
+              color: #fff;
+              font-size: 12px;
+              padding: 2px 10px;
+              border-radius: 4px;
+              margin-right: 10px;
+              cursor: pointer;
+            "
+            @click="handleInvoice(item)"
+            v-if="item.invoiceId && item.invoiceStatus == 1"
+            >开发票</span
+          >下单时间：{{ item.crtTime }}</span
+        >
+      </div>
+      <table class="order-table-1">
+        <tr>
+          <td class="goods-name">{{ item.nickname }}</td>
+          <td class="goods-phone">{{ item.phone }}</td>
+          <td class="goods-item" v-if="item.type == 1">
+            <div
+              v-for="iitem in item.orderItemList"
+              :key="iitem.itemId"
+              class="flex-aic goods-ii"
+            >
+              <img
+                style="
+                  width: 84px;
+                  height: 62px;
+                  border-radius: 8px;
+                  object-fit: cover;
+                "
+                :src="iitem.itemPic"
+              />
+              <span v-if="iitem.type != 1">{{ iitem.name }}</span>
+              <div v-else>
+                <p>卫星：{{ iitem.detailJson.imageSatelliteType }}</p>
+                <p>传感器：{{ iitem.detailJson.imageSensorType }}</p>
+                <p>分辨率：{{ iitem.imageResolutionStr }}</p>
+                <p>云量：{{ iitem.detailJson.imageCloudage }}</p>
+              </div>
+            </div>
+          </td>
+          <td class="goods-item" v-if="item.type == 2">
+            <p>
+              区域范围：{{
+                item.customerJson.provinceName +
+                item.customerJson.cityName +
+                item.customerJson.areaName
+              }}
+            </p>
+            <p>
+              采集时间：{{ item.customerJson.startTimeStr }}至{{
+                item.customerJson.endTimeStr
+              }}
+            </p>
+            <p v-if="item.customerJson.type == 1">
+              分辨率：{{ item.customerJson.resolution }}
+            </p>
+            <p v-if="item.customerJson.type != 3">
+              获取类型：{{
+                item.customerJson.gainType == 101
+                  ? "数据API"
+                  : item.customerJson.gainType == 102
+                  ? "实体数据"
+                  : item.customerJson.gainType == 201
+                  ? "报告"
+                  : item.customerJson.gainType == 202
+                  ? "web平台"
+                  : item.customerJson.gainType == 203
+                  ? "其他"
+                  : item.customerJson.gainType
+              }}
+            </p>
+            <p v-if="item.customerJson.type == 3">
+              定制类型：{{ item.customerJson.dataType }}
+            </p>
+            <p v-if="item.customerJson.type == 3">
+              数据格式：{{ item.customerJson.dataFormat }}
+            </p>
+          </td>
+          <td class="goods-remark">
+            {{
+              item.remark
+                ? item.remark
+                : item.customerJson
+                ? item.customerJson.descr
+                : ""
+            }}
+          </td>
+          <td class="send-way-item">
+            {{
+              item.sendType == 1 ? "线上" : item.sendType == 2 ? "线下" : "线上"
+            }}
+          </td>
+          <td class="pay-way-item">{{ item.payType }}</td>
+          <td class="amount-item">￥{{ item.totalAmount }}</td>
+          <td
+            class="order-status-item"
+            :style="
+              item.status == 4
+                ? 'color:#f6b725;'
+                : item.status == 5
+                ? 'color:#0493fe;'
+                : item.status == 6
+                ? 'color:#2fd96f;'
+                : item.status == 2
+                ? 'color:#e83328;'
+                : ''
+            "
+          >
+            {{
+              item.status == 2
+                ? "待付款"
+                : item.status == 4
+                ? "待发货"
+                : item.status == 5
+                ? "待收货"
+                : item.status == 6
+                ? "已完成"
+                : item.status == -2
+                ? "已取消"
+                : item.status == -1
+                ? "已删除"
+                : item.status
+            }}
+          </td>
+          <td style="padding: 20px; border-right: none">
+            <span
+              class="normal-btn"
+              v-if="item.status == 5 || item.status == 6"
+              @click="handleSee(item)"
+              >查看</span
+            >
+            <span
+              class="normal-btn"
+              v-if="item.status == 4 && item.shippingStatus == 0"
+              @click="handleSend(item)"
+              >发货</span
+            >
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div v-if="list.length <= 0">
+      <table class="order-table-1">
+        <tr style="text-align: center">
+          <td style="padding: 20px; border-right: none">暂无数据</td>
+        </tr>
+      </table>
+    </div>
+    <div
+      style="width：100%;dispaly:flex;justify-content: center;margin-top:20px"
+      v-show="!listLoading"
+    >
+      <el-pagination
+        style="margin-top: 20px"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="listQuery.page"
+        :page-sizes="[5, 10, 20, 30]"
+        :page-size="listQuery.limit"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+      <!--查看发货信息-->
+      <order-send-detail
+        :oneRow="oneRow"
+        v-if="orderSendDetailVisible"
+        v-on:detailEvent="detailEvent"
+      ></order-send-detail>
+      <!--发货弹窗-->
+      <send
+        v-if="sendVisible"
+        :one-row="oneRow"
+        v-on:sendEvent="sendEvent"
+        :title="title"
+      ></send>
+    </div>
+  </div>
 </template>
+<script type="javascript">
+import {getOrderList} from "api/website/order/index";
+import orderSendDetail from "./orderSendDetail";
+import send from './send'
+import {timestamp2DateAuto} from "../../../utils/dateUtils";
+export default {
+  components:{orderSendDetail, send},
+  data() {
+    return {
+      title: '订单发货',
+      activeName: '1',
+      orderStatusList: [
+        // {id: 0, name: '定制订单无价格'},
+        // {id: 1, name: '创建订单'},
+        {id: 2, name: '待付款'},
+        // {id: 3, name: '已支付'},
+        {id: 4, name: '待发货'},
+        {id: 5, name: '已收货'},
+        {id: 6, name: '已完成'},
+        // {id: -1, name: '删除'},
+        {id: -2, name: '已取消'},
+        // {id: -3, name: '退款'}
+      ],
+      listQuery: {
+        name: undefined, // 商品名称
+        page: 1,
+        limit: 10,
+        startTime: undefined, // 下单时间
+        endTime: undefined, // 下单时间
+        payStatus: undefined, // 支付状态: 1、已支付，2、未支付
+        keywords: undefined, // 订单搜索
+        status: undefined, // 订单状态：0、定制订单无价格 1--创建订单，2--待付款，3--已支付，4--已发货, 5--已收货, 6、已完成 -1、删除，-2、取消, -3 退款
+      },
+      listLoading: false,
+      times: [], // 时间
+      list: [],
+      total: 0,
+      orderSendDetailVisible: false, // 查看弹窗
+      sendVisible: false, // 发货弹窗
+      oneRow: {} // 当前操作项
+    };
+  },
+  created() {
+     this.listQuery.keywords = this.$route.query.orderNo;
+    this.getList()
+  },
+  methods: {
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList();
+    },
+    handleSizeChange(val) {
+      this.listQuery.limit = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.listQuery.page = val;
+      this.getList();
+    },
+    /**
+     * 查看弹窗关闭
+     */
+    detailEvent(){
+      this.orderSendDetailVisible = false
+    },
+    /**
+     * 查看
+     */
+    handleSee(row){
+      this.oneRow = row
+      this.orderSendDetailVisible = true;
+    },
+    /**
+     * 发货弹窗关闭
+     */
+    sendEvent(e){
+      if(e){
+        this.getList()
+      }
+      this.sendVisible = false
+    },
+    /**
+     * 开票发货
+     */
+    handleInvoice(row){
+      this.oneRow = row
+      this.title = '发票发货'
+      this.sendVisible = true
+    },
+    /**
+     * 发货
+     */
+    handleSend(row){
+      this.oneRow = row
+      this.title = '订单发货'
+      this.sendVisible = true
+    },
+    /**
+     * 商品品牌列表
+     */
+    getList() {
+      let _this = this
+      this.listLoading = true;
+      if(this.times.length>0){
+        this.listQuery.startTime = this.times[0]
+        this.listQuery.endTime = this.times[1]
+      }
+      getOrderList(this.listQuery).then((response) => {
+        let a = response.data.data
+        a.map(function(item) {
+          if(item.orderItemList){
+            item.orderItemList.map(function(iitem){
+              iitem.detailJson = iitem.detailJson ? JSON.parse(iitem.detailJson) : {}
+              if (iitem.type == 1) {
+                // 标准数据
+                iitem.imageResolutionStr = iitem.detailJson.imageResolution?iitem.detailJson.imageResolution.replace(/{/g, ""):''
+                iitem.imageResolutionStr = iitem.imageResolutionStr?iitem.imageResolutionStr.replace(/}/g, ""):''
+              }
+            })
+          }
+          if(item.customerJson){
+            item.customerJson = JSON.parse(item.customerJson)
+            item.customerJson.startTimeStr = timestamp2DateAuto(item.customerJson.startTime, "yyyy-MM-dd");
+            item.customerJson.endTimeStr = timestamp2DateAuto(item.customerJson.endTime, "yyyy-MM-dd");
+          }
+        })
+        _this.list = a;
+        _this.total = response.data.totalCount;
+        _this.listLoading = false;
+      });
+    },
+    /**
+     * 清空筛选条件
+     */
+    clear_search() {
+      this.times = []
+      this.listQuery = {
+        name: undefined, // 商品名称
+        page: 1,
+        limit: 10,
+        startTime: undefined, // 下单时间
+        endTime: undefined, // 下单时间
+        payStatus: undefined, // 支付状态: 1、已支付，2、未支付
+        keywords: undefined, // 订单搜索
+        status: undefined, // 订单状态：0、定制订单无价格 1--创建订单，2--待付款，3--已支付，4--已发货, 5--已收货, 6、已完成 -1、删除，-2、取消, -3 退款
+      };
+      this.getList();
+    },
+  },
+};
+</script>
+<style lang="scss">
+.order-manage {
+  padding: 20px;
+  .order-table-1 {
+    width: 100%;
+    border: 1px solid #eee;
+    border-top: none;
+    td {
+      border-right: 1px solid #e6e6e6;
+    }
+  }
+  .order-filter {
+    padding: 24px;
+  }
+  .el-tabs__item.is-active,
+  .el-tabs__item:hover {
+    color: #f6211d;
+  }
+  .order-table {
+    background: #f5f6fa;
+    border: 1px solid #e6e6e6;
+    display: flex;
+    align-items: center;
+    height: 45px;
+    label {
+      color: #a3a6b4;
+      font-size: 12px;
+      display: flex;
+    }
+  }
+  .normal-btn {
+    border: 1px solid #707070;
+    border-radius: 2px;
+    height: 24px;
+    width: 60px;
+    margin-top: 16px;
+    font-size: 12px;
+    color: #919299;
+    display: block;
+    text-align: center;
+    line-height: 24px;
+    cursor: pointer;
+  }
+  .pay-btn {
+    background: linear-gradient(90deg, #f6211d, #f9531f);
+    color: #fff;
+    border-radius: 2px;
+    height: 24px;
+    width: 60px;
+    font-size: 12px;
+    color: #fff;
+    display: block;
+    text-align: center;
+    line-height: 24px;
+    cursor: pointer;
+  }
+  .goods-name,
+  .goods-phone,
+  .goods-remark {
+    width: 10%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+  .goods-item {
+    width: 20%;
+    height: 100%;
+    padding-left: 10px;
+    align-items: center;
+    .goods-ii {
+      border-bottom: 1px solid #e6e6e6;
+      padding: 16px;
+    }
+    .goods-ii:last-child {
+      border-bottom: none;
+    }
+  }
+  .pay-way-item,
+  .send-way-item {
+    width: 10%;
+    height: 100%;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+  }
+  .amount-item {
+    width: 10%;
+    height: 100%;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+  }
+  .order-status-item {
+    width: 10%;
+    height: 100%;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+  }
+  .option-item {
+    width: 10%;
+    height: 100%;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  .order-no {
+    color: #43425d;
+    font-size: 13px;
+  }
+  .order-time {
+    color: #919299;
+    font-size: 12px;
+  }
+  .order-no-top {
+    background: #f5f6fa;
+    border: 1px solid #e6e6e6;
+    padding: 14px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+  }
+}
+</style>

src/views/orderManagement/orderList/orderSendDetail.vue

+<template>
+  <el-dialog title="订单详情" :visible.sync="isVisible"></el-dialog>
+</template>
+<script type="javascript">
+  export default {
+    props: ['oneRow'],
+    name: 'orderSendDetail',
+    data() {
+      return {
+        isVisible: false,
+      }
+    },
+    created() {
+    },
+    watch: {
+      isVisible(newValue, oldValue) {
+        if (!newValue) {
+          this.$emit('detailEvent', false)
+        }
+      }
+    },
+    mounted() {
+      this.isVisible = true
+    },
+    methods: {
+      /**
+       * 弹框-取消
+       * */
+      cancel() {
+        this.$emit('detailEvent', false)
+      },
+      sure: function() {
+        this.$emit('detailEvent', false)
+      }
+    }
+  }
+</script>

src/views/orderManagement/orderList/send.vue

+<template>
+  <el-dialog :title="title" :visible.sync="isVisible" width="600px" class="send-main">
+    <div class="invoice-item">
+      <div class="flex-aic-jcb">
+        <div class="invoice-item-text"><label>{{ oneRow.orderEInvoice.titleType == 1 ? "公司名称" : "个人名称" }}：{{ oneRow.orderEInvoice.titleName }}</label> </div>
+        <div
+          style="
+          color: #0a84ff;
+          font-size: 12px;
+          background: #d9eafa;
+          border-radius: 2px;
+          padding: 2px 5px;
+        ">
+          {{ oneRow.orderEInvoice.type == 1 ? "普通发票" : "增值税专用发票" }}-{{
+          oneRow.orderEInvoice.titleType == 1 ? "企业" : "个人" }}
+        </div>
+      </div>
+      <div class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1 && oneRow.orderEInvoice.type == 2" ><label>地址：{{ oneRow.orderEInvoice.province }}{{ oneRow.orderEInvoice.city }}{{ oneRow.orderEInvoice.town}}{{ oneRow.orderEInvoice.address }}</label> </div>
+      <div class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1 && oneRow.orderEInvoice.type == 2"> <label>电话：{{ oneRow.orderEInvoice.phone }}</label> </div>
+      <div class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1 && oneRow.orderEInvoice.type == 2"> <label>开户行：{{ oneRow.orderEInvoice.openBank }}</label></div>
+      <div class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1 && oneRow.orderEInvoice.type == 2"><label>账号：{{ oneRow.orderEInvoice.account }}</label></div>
+      <div class="flex-aic-jcb">
+        <span class="invoice-item-text" v-if="oneRow.orderEInvoice.titleType == 1"><label>税号：{{ oneRow.orderEInvoice.taxCode }}</label></span>
+      </div>
+    </div>
+    <div class="send-info">
+      <div class="flex-aic-jcb">
+        <label>联系人：{{oneRow.receiveName}}</label>
+        <label style="border:1px solid #409EFF;color: #409EFF;font-size: 12px;padding: 2px 6px;border-radius:4px;">个人信息</label>
+      </div>
+      <div style="margin: 10px 0;"><label>手机号：{{oneRow.receivePhone}}</label></div>
+      <div><label>地址：{{oneRow.receiveAddress}}</label></div>
+    </div>
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-row>
+        <el-form-item label="快递公司" prop="trackingImg">
+          <el-input style="width:300px" v-model="form.trackingImg" placeholder="请输入快递公司" :maxlength="40"></el-input>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="快递单号" prop="trackingNumber">
+          <el-input style="width:300px" v-model="form.trackingNumber" placeholder="请输入快递单号" :maxlength="40"></el-input>
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" v-if="!isClick" @click="okSend('form')">发 货</el-button>
+      <el-button type="primary" v-else style="opacity: 0.6;" disabled>发 货</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script type="javascript">
+  import {sendGoods, invoiceSend} from 'api/website/order/index'
+  export default {
+    props: ['oneRow', 'title'],
+    name: 'send',
+    data() {
+      return {
+        isClick: false, // 是否点击了发货
+        rules: {
+          trackingImg: { required:  true, message: '请输入快递公司', trigger: 'blur' },
+          trackingNumber: {required:  true, message: '请输入快递单号', trigger: 'blur'}
+        },
+        form: {
+          orderId: this.oneRow.orderId,
+          trackingNumber: undefined, // 快递单号
+          trackingImg: undefined // 快递公司
+        },
+        isVisible: false,
+      }
+    },
+    watch: {
+      isVisible(newValue, oldValue) {
+        if (!newValue) {
+          this.$emit('sendEvent', false)
+        }
+      }
+    },
+    mounted() {
+      this.isVisible = true
+    },
+    methods: {
+      /**
+       * 弹框-取消
+       * */
+      cancel() {
+        this.$emit('sendEvent', false)
+      },
+      /**
+       * 发货
+       */
+      okSend(formName) {
+        let _this = this
+        if(this.isClick){
+          return
+        }
+        this.isClick = true
+        setTimeout(function(){
+          _this.isClick = false
+        }, 2000)
+        const set = this.$refs;
+        set[formName].validate((valid) => {
+          if (valid) {
+            if(this.title == '发票发货'){
+              invoiceSend(this.form).then((response) => {
+                if(response.status == 200){
+                  this.$notify({
+                    title: "成功",
+                    message: "操作成功",
+                    type: "success",
+                    duration: 2000
+                  });
+                  this.$emit('sendEvent', true)
+                } else {
+                  this.$notify({
+                    title: '失败',
+                    message: response.message,
+                    type: 'error',
+                    duration: 2000
+                  })
+                }
+              });
+            } else {
+              // 订单发货
+              sendGoods(this.form).then((response) => {
+                if(response.status == 200){
+                  this.$notify({
+                    title: "成功",
+                    message: "操作成功",
+                    type: "success",
+                    duration: 2000
+                  });
+                  this.$emit('sendEvent', true)
+                } else {
+                  this.$notify({
+                    title: '失败',
+                    message: response.message,
+                    type: 'error',
+                    duration: 2000
+                  })
+                }
+              });
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  .send-main{
+    .send-info{
+      border: 1px solid #eee;
+      padding: 20px;
+      margin-bottom: 20px;
+      margin-top: 20px;
+    }
+    .invoice-item{
+      padding: 20px;
+      border: 1px solid #eee;
+      .invoice-item-text{
+        margin-top: 10px;
+      }
+      .invoice-item-text:first-child{
+        margin-top: 0;
+      }
+    }
+  }
+</style>