jufubao-admin-library 1.0.0-beta1

package/library/viewModules/viewsEnterpriseBuy/viewsEnterpriseBuy/order_detail.vue

@@ -0,0 +1,860 @@
+<template>
+  <div class="app-container">
+    <div class="app-container__title">
+      <div style="display:flex">
+        订单详情
+        <span v-if="baseInfoData">({{baseInfoData['main_order_id']}})</span>
+        <i
+          style="cursor: pointer"
+          class="el-icon-copy-document"
+          @click="copyOrderId(baseInfoData['main_order_id'])"
+        ></i>
+        <div style="margin-left:30px" v-if="baseInfoData">订单来源：{{baseInfoData['source_from_name']}}</div>
+      </div>
+    </div>
+    <div v-if="progressData.length>0" class="app-container__step" style="margin-bottom: 10px">
+      <el-card>
+        <el-steps :active="activiedNum" finish-status="success">
+          <el-step
+            v-for="(item,index) in progressData"
+            :key="index"
+            :title="item.name"
+            :description="item.time"
+          ></el-step>
+        </el-steps>
+      </el-card>
+    </div>
+    <div class="app-container__base" style="margin-bottom: 10px">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <div style="display: flex;justify-content: space-between">
+            <div>订单信息</div>
+            <el-button v-if="isLookUser" type="primary" size="small" @click="handleLookUser">查看用户信息</el-button>
+          </div>
+        </div>
+        <xd-detail
+          label-width="120"
+          :is-border="isBorder"
+          :list="baseList"
+          :key="mainKey"
+          size
+          @onCustom="handleCustom"
+        ></xd-detail>
+      </el-card>
+    </div>
+    <div class="app-container__pack" style="margin-bottom: 10px" v-if="packsData.length>0">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>物流信息</span>
+        </div>
+        <div class="app-container__pack-title">
+          <div class="app-container__pack-title-wrap" style="font-size: 18px">
+            <div class="app-container__pack-title-tab">
+              <div
+              v-for="(item,index) in packsData"
+              :key="index"
+              :style="{color:index===tabIndex?'#409EFF':'#333'}"
+              @click="changeTab(index)"
+            >包裹{{index+1}}</div>
+            </div>
+            <!-- <order-button
+                :events="againButtonData"
+                :main_order_id="main_order_id"
+                :sub_order_id="sub_order_id"
+                @refresh="handeleRefresh"
+              ></order-button> -->
+          </div>
+        </div>
+        <div class="logist_box">
+          <xd-detail
+            label-width="150"
+            :is-border="isBorder"
+            :list="packsRowTest"
+            :key="detailKey"
+            size
+          >
+            <template slot="images" slot-scope="scope">
+              <div class="image_list" v-for="(item,index) in imagesData" :key="index">
+                <img :src="item.url" />
+              </div>
+              <div>共{{getNum}}件商品</div>
+            </template>
+            <template slot="tips" slot-scope="scope">
+              <div style="color:#A6A6A6 ">买家6天23小时29分内未确认收货，系统将自动确认收货</div>
+            </template>
+          </xd-detail>
+          <div>
+              <el-button  v-if="isDel&&(subStatus==='REC'||subStatus==='DEING')" type="text" @click="handleDelete" size="small">删除包裹</el-button>
+          </div>
+        </div>
+        <div class="logist_box_button" v-if="packsData.length>0&&packsRowData.logistics_company_code">
+            <div>
+              <el-button v-if="isAwait&&showStep" type="primary" @click="handleUpdate" size="small">同步物流信息</el-button>
+            </div>
+            <div>
+              <el-button
+                v-if="showStep"
+                type="primary"
+                size="small"
+                @click="handeleSelfPacks"
+              >自定义物流信息</el-button>
+            </div>
+            <div> 
+              <el-button
+                v-if="packsData.length>0&&!showStep&&isLookLogist&&packsRowData.logistics_company_code"
+                type="primary"
+                @click="handleShowStep"
+                size="small"
+              >查看物流</el-button>
+            </div>
+        </div>
+        <div style="display: flex;border-top: 1px solid #e6ebf5;" v-if="packsData.length>0&&showStep&&packsRowData.logistics_company_code">
+            <div
+              style="height: 100%;max-height: 290px;overflow-y: auto;min-width:100%;margin-top: 25px;"
+              v-if="logistLine.length!==0"
+            >
+              <el-steps direction="vertical" finish-status="success">
+                <div
+                  style="display: flex;justify-content: space-between;width: 100%;"
+                  v-for="(item,index) in logistLine"
+                  :key="index">
+                  <el-step
+                  style="flex: 1"
+                  class="step"
+                  :title="item.content"
+                  :description="item.time"
+                >
+                </el-step>
+                <!-- <div style="display: flex;">
+                  <el-button v-if="!item.read_only" @click="handleDeleteSelfPacks(item)" type="text" icon="el-icon-delete"></el-button>
+                  <el-button v-if="!item.read_only" @click="handeleEditSelfPacks(item)" type="text" icon="el-icon-edit-outline"></el-button>
+                </div> -->
+                </div>
+              </el-steps>
+            </div>
+            <div style="margin-top: 25px;" v-if="logistLine.length===0">暂无数据</div>
+          </div>
+      </el-card>
+    </div>
+    <!--    拆单信息-->
+    <div style="margin-bottom: 10px">
+      <div v-for="(item,index) in subOrderData" :key="index" style="margin-bottom: 10px;">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <div style="display: flex;justify-content: space-between">
+              <div>
+                拆单号： {{item['detail']['sub_order_id']}}
+                <i
+                  style="cursor: pointer"
+                  class="el-icon-copy-document"
+                  @click="copyOrderId(item['detail']['sub_order_id'])"
+                ></i>
+              </div>
+              <div>
+                <el-button
+                  v-if="baseInfoData&&(baseInfoData['order_type']==='virtual'||baseInfoData['order_type']==='card')&&isLookCode"
+                  type="primary"
+                  size="small"
+                  @click="handleGetCodes(item['detail']['sub_order_id'])"
+                >查看电子码信息</el-button>
+              </div>
+              <!-- <div v-if="isLookSub">
+                <el-tooltip effect="dark" content="查看拆单信息" placement="top">
+                  <router-link target="_target" :to="toLink(item['detail']['sub_order_id'])">
+                    <el-button type="primary" size="small">查看拆单信息</el-button>
+                  </router-link>
+                </el-tooltip>
+              </div> -->
+            </div>
+          </div>
+          <xd-table
+            :headers="childHeaders"
+            :list="item['products']"
+            is-border
+            :get-link="getLinkSub"
+            :custom-function="handleCustom"
+          >
+            <template slot="base" slot-scope="scope">
+              <xd-store-product
+                :list="getProductInfo(scope.row)"
+                @onClick="handleSaleDetail"
+                width="60"
+                height="60"
+              ></xd-store-product>
+            </template>
+            <template slot="out" slot-scope="scope">
+              <div v-if="scope.row.product_form_data">
+                <div
+                  v-for="(item,index) in scope.row.product_form_data"
+                  :key="index"
+                >{{item.label}} : {{item.value}}</div>
+              </div>
+            </template>
+          </xd-table>
+          <xd-detail
+            label-width="120"
+            :is-border="isBorder"
+            :list="item['detail']['containers']"
+            size
+          ></xd-detail>
+        </el-card>
+      </div>
+    </div>
+    <!--    拆单信息-->
+    <!--    卡消费信息-->
+    <!-- <card-list :data="cardData" :key="cardKey"></card-list> -->
+    <!--    卡消费信息-->
+    <!--    工单记录-->
+    <!-- <work-history :main_order_id="main_order_id" :sub_order_id="sub_order_id"></work-history> -->
+    <!--    工单记录-->
+    <!--    操作记录-->
+    <operate-history :main_order_id="main_order_id" :sub_order_id="sub_order_id"></operate-history>
+    <!--    操作记录-->
+    <xd-dialog
+      title="快递内容添加"
+      :show.sync="selfDialog"
+      width="50%"
+      @onConfirm="handleSelf"
+      @onClose="handleCloseSelf"
+      @onCancel="handleCloseSelf"
+    >
+      <el-form style="margin-top: 10px" :model="selfForm" label-width="100px">
+        <el-form-item label="时间">
+          <el-date-picker
+            v-model="selfForm.time"
+            type="datetime"
+            value-format="timestamp"
+            placeholder="选择日期时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input ref="price" type="textarea" v-model="selfForm.content" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+    </xd-dialog>
+    <xd-dialog
+      title="查看用户信息"
+      :show.sync="userDialog"
+      width="40%"
+      @onConfirm="userDialog=false"
+      @onClose="userDialog=false"
+      @onCancel="userDialog=false"
+    >
+      <el-form style="margin-top: 10px" :model="userForm" label-width="120px">
+        <el-form-item label="用户联系手机号" v-if="userForm.phone">
+          <el-input style="width:80%" type="text" disabled v-model="userForm.phone" />
+        </el-form-item>
+        <el-form-item label="下单填写手机号" v-if="userForm.buy_phone_number">
+          <el-input style="width:80%" type="text" disabled v-model="userForm.buy_phone_number" />
+        </el-form-item>
+        <el-form-item label="收货手机号" v-if="userForm.receipt_phone">
+          <el-input style="width:80%" type="text" disabled v-model="userForm.receipt_phone" />
+        </el-form-item>
+      </el-form>
+    </xd-dialog>
+    <xd-dialog
+      :show.sync="dialogShow"
+      v-if="dialogShow"
+      :title="title"
+      width="600px"
+      @onClose="dialogShow=false"
+      @onCancel="dialogShow=false"
+      @onConfirm="dialogShow=false"
+    >
+      <div v-if="codeData.length===0">暂无信息</div>
+      <div class="code_box" v-for="(item,index) in codeData" :key="index">
+        <div v-if="item.code_type==='str'">
+          <div class="items">
+            <div></div>
+            <div>{{item.can_read_code}}</div>
+            <i
+              style="cursor: pointer;margin-left:10px"
+              class="el-icon-copy-document"
+              @click="copy(item.code)"
+            ></i>
+          </div>
+        </div>
+        <div v-if="item.code_type==='url'">
+          <div class="items">
+            <div>电子码地址：</div>
+            <el-input v-model="item.code"></el-input>
+            <i
+              style="cursor: pointer;margin-left:10px"
+              class="el-icon-copy-document"
+              @click="copy(item.code)"
+            ></i>
+          </div>
+        </div>
+        <div v-if="item.code_type==='card-pass'">
+          <div class="items">
+            <div>兑换账号：</div>
+            <el-input v-model="item.code"></el-input>
+            <i
+              style="cursor: pointer;margin-left:10px"
+              class="el-icon-copy-document"
+              @click="copy(item.code)"
+            ></i>
+          </div>
+          <div class="items">
+            <div>兑换密码：</div>
+            <el-input v-model="item.password"></el-input>
+            <i
+              style="cursor: pointer;margin-left:10px"
+              class="el-icon-copy-document"
+              @click="copy(item.password)"
+            ></i>
+          </div>
+        </div>
+        <div v-if="item.code_end_time">
+          <div class="items">
+              <div></div>
+            <div>{{ item.code_end_time }}</div>
+          </div>
+        </div>
+      </div>
+    </xd-dialog>
+  </div>
+</template>
+
+<script>
+import XdContentInfo from "@/components/XdContentInfo"
+import XdDialog from "@/components/XdDialog"
+import { mapActions,mapState } from 'vuex'
+import XdTableImage from "@/components/XdTableImage"
+import { Loading } from 'element-ui'
+import XdDetail from "@/components/XdDetail"
+import XdTable from "@/components/XdTable"
+import XdPagination from "@/components/XdPagination.vue"
+import XdStoreProduct from "@/components/XdStoreProduct"
+import workHistory from "./compontents/workHistory"
+// import cardList from "./compontents/cardList"
+import operateHistory from "./compontents/operateHistory"
+import { getOptions } from "@/utils/options"
+import checkPermission from "@/utils/permission"
+import permissions from "@/constant/permissions"
+
+export default {
+  name: "enterprise_buy_order_detail",
+  components: {
+    XdContentInfo,
+    XdDialog,
+    XdTableImage,
+    XdDetail,
+    XdTable,
+    XdPagination,
+    XdStoreProduct,
+    workHistory,
+    // cardList,
+    operateHistory
+  },
+
+
+  data () {
+    return {
+      progressData: [],
+      activiedNum: 0,
+      cardData: [],
+      cardKey: 'cardKey',
+      contactData: null,
+      list: [],
+      sub_order_number: null, //订单id
+      tabIndex: 0,
+      multipleSelection: [], //选择列表对象
+      value: null,
+      packsData: [],
+      packsRowData: [],
+      tableRefresh: 'tableRefresh',
+      childHeaders: [
+        { "type": "normal", "prop": "product_id", "align": "center", "label": "商品ID" },
+        { "type": "normal", "prop": "base", "align": "center", "label": "商品信息" },
+        {
+          type: 'priceNumber',
+          prop: "priceNumber",
+          align: 'center',
+          label: '售价&数量',
+          message: ['sale_price', 'product_num']
+        },
+        { "type": "normal", "prop": "brand_name", "align": "center", "label": "品牌名城" },
+        { "type": "normal", "prop": "out", "align": "center", "label": "扩展信息" },
+        // {"type": "status", "prop": "status", "align": "center", "label": "扩展信息"},
+      ],
+      baseList: [{
+        title: '',
+        items: [],
+      },],
+      subContentData: [{
+        title: '',
+        items: [],
+      },],
+      packsRowTest: [{
+        title: '',
+        items: [],
+      },],
+      detailKey: 'detailKey',
+      isBorder: false,
+      imagesData: [],
+      againButtonData: [
+        {
+          action: "send_good",
+          text: "发货",
+        }
+      ],
+      selfForm: {
+        time: '',
+        content: ''
+      },
+      selfDialog: false,
+      pageSize: 1, //当前页面数量
+      hasNextPage: true, //是否有下一页
+      limit: 20, //搜索参数
+      total: 0,
+      showStep: false,
+      main_order_id: null,
+      sub_order_id: null,
+      baseInfoData: null,
+      subOrderData: [],
+      logistLine: [],
+      userForm: {
+        phone: '',
+        buy_phone_number: '',
+        receipt_phone: ''
+      },
+      userDialog: false,
+      mainKey: 'mainKey',
+      codeData: [],
+      dialogShow: false,
+      title: '电子码信息',
+    }
+  },
+  computed: {
+    isAwait () {
+      return checkPermission([permissions.enterprise_buy.syncPackageTrackWh])
+    },
+    isLookUser () {
+      return checkPermission([permissions.enterprise_buy.mainOrderContactWh])
+    },
+    isLookLogist () {
+      return checkPermission([permissions.enterprise_buy.logisticsMainOrderPackageTrackWh])
+    },
+    isLookCode () {
+      return checkPermission([permissions.corders.getSubOrderCodes])
+    },
+    ...mapState(['commonParams']),
+  },
+  created () {
+    console.log(this.commonParams,'aaaa');
+    this.main_order_id = this.$route.params['id']
+    this.business_code = this.$route.params['code']
+    this.getDetail()
+  },
+  methods: {
+    ...mapActions('enterprise_buy', ['mainOrderDetail','mainOrderContactWh','logisticsMainOrderPackageTrackWh', 'recordPackageTrackWh', 'syncPackageTrackWh', 'getSubOrderCodes']),
+
+    getDetail () {
+      let data = {
+        main_order_id: this.main_order_id,
+      }
+      this.mainOrderDetail(data).then(res => {
+        console.log(res,'aaaaaa')
+        // return
+        this.baseInfoData = res.data.detail_plus
+        this.subOrderData = res.data.sub_order_list
+        this.progressData = res.data.progress
+        if (res.data.card_list && res.data.card_list.length > 0) {
+          this.cardData = res.data.card_list
+        }
+        // this.contactData = res.data.contact
+        this.packsData = res['data']['package_list']
+        this.cardKey = Date.now()
+        if (this.packsData.length > 0) {
+          this.packsData.map(item => {
+            item.logistics_send_time = getTimeFormat(item.logistics_send_time)
+          })
+          this.packsRowData = this.packsData[0]
+          this.packsRowTest = [{
+            title: '',
+            items: [
+              { label: '发货状态', value: this.packsData[0]['logistics_status_name'], type: 'normal', field: 'status' },
+              { label: '发货时间', value: this.packsData[0]['logistics_send_time'], type: 'normal', field: 'time' },
+              { label: '快递公司', value: this.packsData[0]['logistics_company'], type: 'normal', field: 'logistics_company' },
+              { label: '渠道拆单号', value: this.packsData[0]['channel_package_id'], type: 'normal', field: 'channel_package_id' },
+              { label: '快递单号', value: this.packsData[0]['logistics_number'], type: 'normal', field: 'logistics_number' },
+              { label: '商品信息', value: '', type: 'normal', field: 'images' },
+            ],
+          },]
+          this.detailKey = Date.now()
+          let imgData = []
+          let num = 0
+          this.packsData[0]['products'].map(item => {
+            imgData.push(
+              {
+                url: this.getImageFullPath(item.product_thumb),
+                num: item.product_num
+              }
+            )
+          })
+          this.imagesData = imgData
+        }
+        this.progressData.map((item, index) => {
+          item.time = getTimeFormat(item.time)
+          if (item.is_finish === true) {
+            this.activiedNum = index + 1
+          }
+        })
+        res.data.sub_order_list.map(item => {
+          item.products.map(i => {
+            if (i.product_form_data) {
+              i.product_form_data = JSON.parse(i.product_form_data)
+            }
+          })
+
+        })
+        this.baseList = res['data']['detail_plus']['containers']
+        this.mainKey = Date.now()
+      })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    /**
+     * @description 拆单详情
+     * @param item 列表对象
+     */
+    toLink (item) {
+      return `/corders/sub_detail/${item}?p=${this.$route.query.p}`
+    },
+    changeTab (index) {
+      this.tabIndex = index
+      this.packsRowData = this.packsData[index]
+      let imgData = []
+      let num = 0
+      this.packsData[index]['products'].map(item => {
+        imgData.push(
+          {
+            url: this.getImageFullPath(item.product_thumb),
+            num: item.product_num
+          }
+        )
+      })
+      this.imagesData = imgData
+      this.packsRowTest = [{
+        title: '',
+        items: [
+          { label: '发货状态', value: this.packsData[index]['logistics_status_name'], type: 'normal', field: 'status' },
+          { label: '发货时间', value: this.packsData[index]['logistics_send_time'], type: 'normal', field: 'time' },
+          { label: '快递公司', value: this.packsData[index]['logistics_company'], type: 'normal', field: 'logistics_company' },
+          { label: '渠道拆单号', value: this.packsData[index]['channel_package_id'], type: 'normal', field: 'channel_package_id' },
+          { label: '快递单号', value: this.packsData[index]['logistics_number'], type: 'normal', field: 'logistics_number' },
+          { label: '商品信息', value: '', type: 'normal', field: 'images' },
+        ],
+      },]
+      this.detailKey = Date.now()
+      if (this.showStep === true) {
+        this.handleShowStep()
+      }
+    },
+    handleChange () {
+      console.log(this.multipleSelection, 'eee')
+    },
+
+    copyOrderId (order_id) {
+      this.copy(order_id)
+    },
+    copy (data) {
+      let url = data
+      let oInput = document.createElement('input')
+      oInput.value = url
+      document.body.appendChild(oInput)
+      oInput.select() // 选择对象
+      document.execCommand("Copy") // 执行浏览器复制命令
+      this.$message({
+        message: '复制成功',
+        type: 'success'
+      })
+      oInput.remove()
+    },
+    handleCustom ({ row, btn }) {
+      // console.log(row, btn)
+    },
+    /**自定义物流信息**/
+    handeleSelfPacks () {
+      this.selfDialog = true
+    },
+    /**自定义物流信息确定**/
+    handleSelf () {
+      this.selfForm.time = this.$xdHelper.divisionFloatNumber(this.selfForm.time, 1000)
+      this.recordPackageTrackWh({ ...this.selfForm, package_id: this.packsRowData['package_id'] })
+        .then(res => {
+          this.$message.success('操作成功')
+          this.selfForm = {}
+          this.selfDialog = false
+        }).catch(err => {
+          console.log(err, 'err')
+        })
+    },
+    /**自定义物流信息取消**/
+    handleCloseSelf () {
+      this.selfDialog = false
+    },
+
+    /**
+     * @description 翻页处理方法
+     * @param page {Number} 访问页面页码数
+     */
+    handlePagination (page) {
+      this.pageSize = page
+      // this.getList();
+    }, //todo
+    /**查看物流**/
+    handleShowStep () {
+      console.log(this.packsRowData, 'this.packsRowData ')
+      this.logisticsMainOrderPackageTrackWh({
+        main_order_id: this.main_order_id,
+        package_id: this.packsRowData['package_id']
+      }).then(res => {
+        res.data.data.map(item => {
+          item.time = getTimeFormat(item.time)
+        })
+        this.logistLine = res.data.data
+        this.showStep = true
+      }).catch(err => {
+        console.log(err, 'err')
+      })
+
+    },
+    getLinkSub () {
+      return '111'
+    },
+    getProductInfo (value) {
+      return {
+        id: value.product_id,
+        thumb: this.getImageFullPath(value.product_thumb),
+        title: value.product_name,
+        icon: value.type === 'good' ? '实' : value.type === 'virtual' ? '虚' : value.type === 'card' ? '卡' : value.type === 'network' ? '生' : value.type === 'settle' ? '核' : '',
+        specific: value.product_sku_name, params: { width: 150, height: 150 },
+        status: value.aftersale_status_name ? value.aftersale_method_name ? value.aftersale_method_name + '-' + value.aftersale_status_name : value.aftersale_status_name : '',
+        aftersale_orderid: value.aftersale_orderid
+      }
+    },
+    /**查看用户信息**/
+    handleLookUser () {
+      this.mainOrderContactWh({ main_order_id: this.main_order_id })
+        .then(res => {
+          if (res.data.contact.buy_phone_number) {
+            this.userForm.buy_phone_number = res.data.contact.buy_phone_number
+          }
+          if (res.data.contact.buyer) {
+            this.userForm.phone = res.data.contact.buyer.phone_number
+          }
+          if (res.data.contact.receipt_info) {
+            this.userForm.receipt_phone = res.data.contact.receipt_info.phone_number
+          }
+          this.userDialog = true
+        }).catch(err => {
+          console.log(err, 'err')
+        })
+    },
+    /**同步物流信息**/
+    handleUpdate () {
+      if (!this.packsRowData['logistics_number'] || !this.packsRowData['logistics_company_code']) {
+        this.$message.error('缺少物流信息,不能同步物流信息')
+        return
+      }
+      let loading = Loading.service({})
+      this.syncPackageTrackWh({
+        order_package_id: this.packsRowData['package_id'],
+        express_number: this.packsRowData['logistics_number'],
+        express_code: this.packsRowData['logistics_company_code'],
+        main_order_id:this.main_order_id
+      }).then(res => {
+        if (this.showStep === true) {
+          setTimeout(item => {
+            this.handleShowStep()
+            this.$message.success('同步成功')
+            loading.close()
+          }, 3000)
+        } else {
+          this.$message.success('同步成功')
+          loading.close()
+        }
+        console.log(res, 'sss')
+      }).catch(err => {
+        console.log(err, 'err')
+        loading.close()
+      })
+    },
+    //电子码可点击查看
+    handleGetCodes (id) {
+      this.getSubOrderCodes({ sub_order_id: id })
+        .then(res => {
+          console.log(res, 'res')
+          this.codeData = res['data']['codes']
+          this.dialogShow = true
+        }).catch(err => {
+          console.log(err, 'err')
+        })
+    },
+    handleSaleDetail (e) {
+      if (e.aftersale_orderid) {
+        window.open(`/corders/service_detail/${e.aftersale_orderid}`,'_blank')
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  font-size: 14px;
+  color: #606266;
+}
+
+.app-container__title {
+  font-size: 16px;
+  line-height: 24px;
+  padding: 0 0 10px;
+  font-weight: bold;
+}
+
+@media screen and (max-width: 768px) {
+  .app-container__title {
+    padding: 0 0 10px;
+  }
+}
+
+.list {
+  div {
+    margin: 10px 0;
+  }
+}
+
+image {
+  width: 100px;
+  height: 80px;
+}
+
+.app-container__base {
+  /*padding: 10px;*/
+
+  &-title {
+    font-size: 20px;
+  }
+
+  &-ul {
+    width: 100%;
+  }
+
+  &-li {
+    margin: 10px;
+    display: inline-block;
+    width: 30%;
+  }
+}
+
+.step ::v-deep .el-step__main {
+}
+
+.step ::v-deep .el-step__icon-inner {
+  display: none;
+}
+.app-container__list-table {
+  padding: 5px 0;
+
+  &-title {
+    margin: 10px 0;
+  }
+
+  &-wish {
+    margin: 5px 0;
+  }
+}
+
+.app-container__pack {
+  &-title {
+    font-size: 20px;
+    margin: 10px 0;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #333333;
+
+    &-tab {
+      display: flex;
+
+      & > div {
+        margin-right: 10px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &-base {
+    display: flex;
+
+    & > div {
+      margin-right: 30px;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.app-container__pay {
+  &-title {
+    font-size: 20px;
+    margin: 10px 0;
+  }
+}
+
+.image_list {
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+  margin-right: 10px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.app-container__pack-title {
+  border-bottom: none !important;
+}
+.code_box {
+  margin-bottom: 20px;
+
+  & > div:first-child {
+  }
+  .items {
+    display: flex;
+    margin: 5px;
+    align-items: center;
+    & > div:first-child {
+      flex-shrink: 0;
+      width: 100px;
+      color: #333333;
+    }
+  }
+}
+.el-steps--vertical {
+  height: auto;
+}
+.logist_box{
+  display: flex;
+  justify-content: space-between;
+  &>div{
+    margin-right: 10px;
+  }
+  &_button{
+    &>div{
+      display: block;
+      margin-bottom: 10px;
+    }
+  }
+}
+@media screen and (max-width: 768px) {
+  .logist_box{
+    display: block;
+  }
+}
+</style>