new-hjb-pc/hjb_pc/pages/homeIndex/placeOrder.vue

<template>
  <div class="banner" v-loading.fullscreen.lock="isLoading">
    <!-- <div class="nav"></div> -->
    <div class="main">
      <div class="tabs">
        <div :class="active === 0 ? 'standard active' : 'standard'" @click="active = 0">标准下单</div>
        <!-- <div :class="active === 1 ? 'standard active' : 'standard'" @click="active = 1">快速下单</div> -->
        <div :class="active === 2 ? 'standard active' : 'standard'" @click="active = 2">批量下单</div>
      </div>
      <div v-if="active === 0" class="standard-box">
        <div class="order-information">
          <div class="header">订单详情</div>
          <div class="form">
            <div class="right">
              <el-form :model="OrderDetailsRight" label-width=".625rem" :rules="OrderDetailsRightRules"
                ref="OrderDetailsRulesRef">
                <el-form-item label="配送类型" prop="OrderDetails" style="align-items: center">
                  <el-radio-group v-model="OrderDetailsRight.ShippingType" size="large">
                    <!-- <el-radio-button border label="1">配送</el-radio-button>
                    <el-radio-button border label="2">自提</el-radio-button> -->
                    <el-radio :label="1">送货上门</el-radio>
                    <el-radio :label="4">快递配送</el-radio>
                    <el-radio :label="2">到店自取</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="收货区域" class="receipt-region" prop="ReceivingArea">
                  <el-cascader placeholder="请输入收获区域" size="large" :options="ChinaArr"
                    v-model="OrderDetailsRight.ReceivingArea">
                  </el-cascader>
                </el-form-item>
                <el-form-item label="收货人姓名" class="locate-address" prop="consigneeName">
                  <el-input style="width: 399.9936px" v-model="OrderDetailsRight.consigneeName" placeholder="请输入收货人姓名"
                    maxlength="100" show-word-limit />
                </el-form-item>
                <el-form-item label="收货人电话" class="door-number" prop="consigneeNumber">
                  <el-input style="width: 399.9936px" v-model="OrderDetailsRight.consigneeNumber"
                    placeholder="请输入收货人电话号" maxlength="11" show-word-limit />
                </el-form-item>
                <el-form-item label="定花人姓名" class="door-number">
                  <el-input style="width: 399.9936px" v-model="OrderDetailsRight.FlowerFixerName" placeholder="请输入定花人姓名"
                    maxlength="100" show-word-limit />
                </el-form-item>
                <el-form-item label="定花人电话" class="door-number">
                  <el-input style="width: 399.9936px" v-model="OrderDetailsRight.FlowerFixerNumber"
                    placeholder="请输入定花人电话" maxlength="11" show-word-limit />
                </el-form-item>
                <!-- <el-form-item label="贺卡" class="map">
                  <el-input
                    style="width: 399.9936px"
                    v-model="OrderDetailsRight.greetingCard"
                    :rows="2"
                    type="textarea"
                    placeholder="请填写贺卡留言"
                  />
                </el-form-item> -->
                <!-- <el-form-item label="订单备注" class="map">
                  <el-input
                    style="width: 399.9936px"
                    v-model="OrderDetailsRight.OrderNotes"
                    :rows="2"
                    type="textarea"
                    placeholder="订单备注，订单双方均可查看"
                  />
                </el-form-item> -->
              </el-form>
            </div>
            <div class="left">
              <el-form :model="OrderDetails" label-width=".625rem" :rules="OrderDetailsRules" ref="OrderDetailsRef">
                <!-- <el-form-item label="配送类型" prop="OrderDetails">
                  <el-radio-group v-model="OrderDetails.ShippingType" size="large">
                    <el-radio-button border label="1">配送</el-radio-button>
                    <el-radio-button border label="2">自提</el-radio-button>
                  </el-radio-group>
                </el-form-item> -->
                <el-form-item :label="OrderDetailsRight.ShippingType != 3 ? '收货时间' : '自提时间'" class="receipt-time"
                  prop="ReceiptTime">
                  <el-config-provider :locale="locale">
                    <el-date-picker v-model="OrderDetails.ReceiptTime" type="date" placeholder="请选择日期"
                      :disabled-date="disabledDate" :locale="locale" />
                  </el-config-provider>

                  <el-select v-if="timeOutFlog" v-model="OrderDetails.ReceiptTimeRange" class="m-2" placeholder="范围">
                    <el-option v-for="item in ReceiptTimeOptions" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                  <el-time-select v-else v-model="OrderDetails.ReceiptTimeRange" start="08:30" step="00:15" end="18:30"
                    placeholder="请选择时间" />
                  <div class="timing-receipt" @click="timeOutFlog = !timeOutFlog">
                    {{ timeOutFlog ? '定时配送' : '重新选择' }}
                  </div>
                </el-form-item>
                <!-- <el-form-item label="收货区域" class="receipt-region" prop="ReceivingArea">
                  <el-cascader
                    placeholder="请输入收获区域"
                    size="large"
                    :options="ChinaArr"
                    v-model="OrderDetails.ReceivingArea"
                  >
                  </el-cascader>
                </el-form-item> -->
                <el-form-item label="定位地址" prop="locateAddress">
                  <el-select style="width: 399.9936px" v-model="OrderDetails.locateAddress"
                    :value-key="OrderDetails.locateAddress.id" filterable remote reserve-keyword placeholder="请输入定位地址"
                    :remote-method="remoteMethod" :loading="selectLoading" @change="selectChanged"
                    :disabled="selectCityDisabled">
                    <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.name" />
                    <template #loading>
                      <el-icon class="is-loading">
                        <svg class="circular" viewBox="0 0 20 20">
                          <g class="path2 loading-path" stroke-width="0" style="animation: none; stroke: none">
                            <circle r="3.375" class="dot1" rx="0" ry="0" />
                            <circle r="3.375" class="dot2" rx="0" ry="0" />
                            <circle r="3.375" class="dot4" rx="0" ry="0" />
                            <circle r="3.375" class="dot3" rx="0" ry="0" />
                          </g>
                        </svg>
                      </el-icon>
                    </template>
                  </el-select>
                </el-form-item>
                <el-form-item label="门牌号" class="door-number" prop="doorNumber">
                  <el-input style="width: 399.9936px" v-model="OrderDetails.doorNumber" placeholder="详细地址，例如：3号楼2单元106"
                    maxlength="100" show-word-limit />
                </el-form-item>
                <el-form-item label="参考地址" class="map" v-if="OrderDetailsRight.ShippingType != 2">
                  <div :class="mapDialog ? 'dlaceholding fangda' : 'dlaceholding'" v-if="isMapShow">
                    <goods-map ref="goodsMapRef" :searchValue="searchVal" :position="position"
                      @mapChange="mapChangeEvent" @mapChangeCity="mapChangeCityEvent"
                      @writeBockCity="writeBockCityEvent" @draggingMap="draggingMapEvent" />
                    <div class="magnify" @click="mapMagnifyEvent" v-if="magnify">
                      <el-icon>
                        <FullScreen />
                      </el-icon>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="地址自动识别" class="map"
                  :style="OrderDetailsRight.ShippingType != 2 ? { 'margin-top': '159.9936px' } : ''">
                  <el-input style="width: 399.9936px" v-model="AddressIdentification" :rows="2" type="textarea"
                    placeholder="试试粘贴收货人姓名、手机号、收货地址、可快速识别您的收货信息" @change="AddressIdentificationChange" />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="order-information">
          <div class="header">商品信息</div>
          <div class="form" v-for="(item, index) in goodsInfoFormData" :key="index">
            <div class="left">
              <el-form :model="item.goodsInfoForm" label-width=".625rem" :rules="goodsInfoFormRules"
                ref="goodsInfoFormRef">
                <el-form-item label="上传商品图片" class="upload-image" prop="imageFiles">
                  <el-upload :limit="4" action="#" list-type="picture-card" :auto-upload="false"
                    v-model:file-list="item.goodsInfoForm.imageFiles">
                    <el-icon>
                      <Plus />
                    </el-icon>

                    <template #file="{ file }">
                      <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                        <span class="el-upload-list__item-actions">
                          <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <el-icon><zoom-in /></el-icon>
                          </span>
                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                            <el-icon><Download /></el-icon>
                          </span> -->
                          <span class="el-upload-list__item-delete" @click="handleRemove(file, index)">
                            <el-icon>
                              <Delete />
                            </el-icon>
                          </span>
                        </span>
                      </div>
                    </template>
                    <template #tip>
                      <div class="el-upload__tip">
                        <el-icon>
                          <InfoFilled />
                        </el-icon>支持jpg，jpeg，png，gif格式，小于1M的图片 最多上传4张
                      </div>
                    </template>
                  </el-upload>
                  <div @click="selectGoodsEvent(index)" class="select-goods"
                    v-if="userStore.isLogin && item.goodsInfoForm.imageFiles.length <= 2">
                    <el-icon>
                      <Goods />
                    </el-icon>
                  </div>
                </el-form-item>
                <el-form-item label="商品数量" class="locate-address" prop="content" style="margin-top: 49.9968px">
                  <el-input-number v-model="item.goodsInfoForm.content" :min="1" :max="1000" />
                </el-form-item>
              </el-form>
            </div>
            <div class="right" style="position: relative">
              <el-form :model="item.goodsInfoFormRight" label-width=".625rem" :rules="goodsInfoFormRightRules"
                ref="goodsInfoFormRightRef">
                <el-form-item label="商品描述" class="product-description" prop="goodsDescription">
                  <el-input style="width: 399.9936px" v-model="item.goodsInfoFormRight.goodsDescription" :rows="2"
                    type="textarea" placeholder="请输入商品描述" />
                  <div class="tip">
                    <el-icon>
                      <InfoFilled />
                    </el-icon>详细描述商品信息能让花店快速接单~
                  </div>
                <!--  <div class="add-product">加入到商品库</div>-->
                </el-form-item>
              </el-form>
              <div @click="closeOrder(index)" v-show="goodsInfoFormData.length >= 2" class="close-order">
                <el-icon>
                  <CloseBold />
                </el-icon>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="add-order-btn" @click="addGoodsItem">增加商品</div>
          </div>
        </div>
        <div class="order-information">
          <div class="header">贺卡备注信息</div>
          <div class="form">
            <div class="left">
              <el-form>
                <el-form-item label="贺卡需求" class="product-description" prop="goodsDescription">
                  <el-input
                    style="width: 2.0833rem"
                    v-model="OrderDetailsRight.greetingCard"
                    :rows="2"
                    type="textarea"
                    placeholder="请输入贺卡需求"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div class="right">
              <el-form>
                <el-form-item label="订单描述" class="product-description" prop="goodsDescription">
                  <el-input
                    style="width: 2.0833rem"
                    :rows="2"
                    v-model="OrderDetailsRight.OrderNotes"
                    type="textarea"
                    placeholder="请输入订单描述"
                  />
                  <div class="tip" style="color: #ff4e8d">
                    <el-icon>
                      <InfoFilled />
                    </el-icon>订单备注下单风与接单方均可见~
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="order-information goods-info">
          <div class="header">订单设置</div>
          <div class="form">
            <div class="left">
              <el-form :model="OrderSettingsForm" label-width=".625rem" :rules="OrderSettingsFormRules"
                ref="OrderSettingsFormRef">
                <el-form-item label="订单类型" prop="orderModel">
                  <el-radio-group v-model="OrderSettingsFormRight.orderKind">
                    <el-radio-button label="1">鲜花订单</el-radio-button>
                    <el-radio-button label="2">蛋糕订单</el-radio-button>
                    <el-radio-button label="3">鲜花+蛋糕</el-radio-button>
                    <el-radio-button label="4">气球派对</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="其他编号">
                  <el-input style="width: 200.0064px" placeholder="外部商家或自定义渠道编号"
                    v-model="OrderSettingsForm.Third_PartyOrdersNumber"></el-input>
                </el-form-item>
                <el-form-item label="下单模式" class="order-mode" prop="orderModel">
                  <el-radio-group v-model="OrderSettingsForm.orderModel" size="large">
                    <el-radio label="1">发布抢单</el-radio>
                    <el-radio label="2">发布报价单</el-radio>
                    <el-radio label="3">指定店铺</el-radio>
                    <!-- <el-radio-button label="1">发布抢单</el-radio-button>
                    <el-radio-button label="2">发布报价单</el-radio-button>
                    <el-radio-button label="3">指定店铺</el-radio-button> -->
                  </el-radio-group>
                  <div class="tip">
                    <el-icon>
                      <InfoFilled />
                    </el-icon>详细描述商品信息能让花店快速接单~
                  </div>
                </el-form-item>
                <!-- <el-form-item label="销售价" class="sales-price" prop="SalesPrice">
                  <el-input
                    style="width: 150.0096px"
                    v-model.number="OrderSettingsForm.SalesPrice"
                    placeholder="0"
                    @change="priceChange($event, 'SalesPrice')"
                  />
                  <div class="tail">
                    <el-icon><QuestionFilled /></el-icon>
                    <div>非必填</div>
                  </div>
                </el-form-item> -->
                <el-form-item v-if="OrderSettingsForm.orderModel != '2'" label="出价" class="bid" prop="SellingPrice">
                  <el-input style="width: 150.0096px" v-model.number="OrderSettingsForm.SellingPrice" placeholder="0"
                    @change="priceChange($event, 'SellingPrice')" type="number" />
                  <div class="tail">
                    （可用余额：
                    <div class="money">￥0</div>
                    <div class="krypton">立即充值</div>
                    ）
                  </div>
                  <div class="tip">
                    <el-icon>
                      <InfoFilled />
                    </el-icon>价格过低可能导致店铺店铺不接单 <span>查看参考价格</span>
                  </div>
                </el-form-item>
                <el-form-item v-else label="出价" class="bid" prop="SellingPrice">
                  <div>
                    <span style="color: #ff4e8d; font-weight: 600; font-size: 15.9936px">10元</span><span
                      style="font-size: 12px">
                      (根据花机宝交易规则需支付订单最低金额，最终金额以花店实际报价为准)</span>
                  </div>
                </el-form-item>
                <el-form-item v-if="OrderDetailsRight.ShippingType == 1" label="花图审核" prop="Audit">
                  <el-switch v-model="OrderSettingsForm.Audit" />
                </el-form-item>
              </el-form>
            </div>
            <div class="right">
              <el-form :model="OrderSettingsFormRight" label-width=".625rem">
                <el-form-item label="下单门店" v-if="OrderSettingsForm.orderModel === '3'">
                  <el-input
                    style="width: 2.0833rem"
                    v-model="OrderSettingsFormRight.shopId"
                    placeholder="请输入下单门店·"
                    maxlength="100"
                    show-word-limit
                  />
                </el-form-item>
                <el-form-item label="商家备忘">
                  <el-input style="width: 399.9936px" v-model="OrderSettingsFormRight.orderRemark" :rows="2"
                    type="textarea" placeholder="订单备忘，仅下单方乐见" />
                  <el-radio-group v-model="OrderSettingsFormRight.flag">
                    <el-radio label="1">
                      <el-icon style="transform: translateY(.0104rem); color: #ed4524">
                        <Flag />
                      </el-icon>
                    </el-radio>
                    <el-radio label="2">
                      <el-icon style="transform: translateY(.0104rem); color: #fda917">
                        <Flag />
                      </el-icon></el-radio>
                    <el-radio label="3">
                      <el-icon style="transform: translateY(.0104rem); color: #1db728">
                        <Flag />
                      </el-icon></el-radio>
                    <el-radio label="4">
                      <el-icon style="transform: translateY(.0104rem); color: #0f78ff">
                        <Flag />
                      </el-icon></el-radio>
                    <el-radio label="5">
                      <el-icon style="transform: translateY(.0104rem); color: #e000fc">
                        <Flag />
                      </el-icon></el-radio>
                    <el-radio label="6">
                      <el-icon style="transform: translateY(.0104rem); color: #999999">
                        <Flag />
                      </el-icon></el-radio>
                  </el-radio-group>
                  <div style="width: 100%; color: #999999; font-size: .0625rem">
                    <el-icon>
                      <InfoFilled />
                    </el-icon>详细描述商品信息能让花店快速接单~
                  </div>
                </el-form-item>
                <!-- <el-form-item label="第三方订单号">
                  <el-input
                    style="width: 399.9936px"
                    v-model="OrderSettingsFormRight.Third_PartyOrdersNumber"
                    placeholder="请输入第三方订单号"
                    maxlength="100"
                    show-word-limit
                  />
                </el-form-item> -->
              </el-form>
            </div>
          </div>
          <div class="footer" v-if="OrderSettingsForm.orderModel === '3'">
            <div class="vip-name">
              <el-form :model="form" label-width=".625rem">
                <el-form-item label="店铺会员名称">
                  <el-input style="width: 246.0096px" v-model="form.name" />
                </el-form-item>
              </el-form>
            </div>
            <div class="shop-info">
              <div class="title">
                <div class="left">
                  <div class="shop-name">【广东省 佛山市 三水区】傲梅鲜花店</div>
                  <div class="gradd">v2</div>
                  <div class="status">接单中</div>
                  <div class="online-status">1小时前接单</div>
                </div>
                <div class="right">
                  <div class="record">证照信息</div>
                  <div class="guarantee">服务保障</div>
                </div>
              </div>
              <div class="shop-content">
                <div class="left">
                  <div class="image"></div>
                  <div class="vip-info">
                    <ul>
                      <li>
                        <div class="label">会员名称：</div>
                        <div class="name">明兵</div>
                      </li>
                      <li>
                        <div class="phone">联系电话：</div>
                        <div class="telephone-number">12345678901</div>
                      </li>
                      <li>
                        <div class="qq">客服QQ：</div>
                        <div class="qq-number">123456789</div>
                      </li>
                      <li>
                        <div class="contact-address">店铺地址：</div>
                        <div class="address">心尚人鲜花店 三水区西南街道商业北二街1号109铺　</div>
                        <div class="icon">
                          <el-icon>
                            <MapLocation />
                          </el-icon>
                        </div>
                        <div class="map">查看地图</div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="right">
                  <ul class="top">
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                  </ul>
                  <ul class="bottom">
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                    <li>
                      <div class="content">10</div>
                      <div class="txt">信用分</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="order-information">
          <div class="settlement">
            <div class="left">
              <div class="item">订单类型：<span>{{OrderSettingsFormRight.orderKind == 1 ? '鲜花订单' : OrderSettingsFormRight.orderKind == 2 ? '蛋糕订单' : OrderSettingsFormRight.orderKind == 3 ? '鲜花+蛋糕订单'  : OrderSettingsFormRight.orderKind == 4 ?  '气球派对订单' :'' }}</span></div>
              <div class="item">商品数量：<span>1</span></div>
              <div class="item">
                收货时间：<span>{{ formatTime(OrderDetails.ReceiptTime) }} {{ OrderDetails.ReceiptTimeRange }}</span>
              </div>
            </div>
            <div class="content">
              订单价格：
              <!-- <div>￥{{ OrderSettingsForm.SellingPrice ? OrderSettingsForm.SellingPrice.toFixed(2) : 0 }}</div>
               -->
              <div>
                ￥{{ OrderSettingsForm.SellingPrice ? parseInt(OrderSettingsForm.SellingPrice).toFixed(2) : 0 }}
              </div>
            </div>
            <div class="right" @click="submitEvent(goodsInfoFormRef)">确认无误，立即下单</div>
          </div>
        </div>
      </div>
      <div v-else-if="active === 1" class="fast-box">快速下单</div>
      <div v-else class="batch">
        <BatchItemUI :opctions="{
          header: '多电商平台订单接入',
          hint: '订单接入：将多个电商平台订单自动导入花机宝后台，实现一键发布，让商户更加便捷管理订单，清晰掌握订单状态。',
          footer: '立即接入'
        }" @footer-cli-btn="handleBtn" :channelsData="[
          { imgUrl: '/images/xdt1.png', tit1: '美团', tit2: 'abc', click: () => console.log(1) },
          { imgUrl: '/images/xdt2.png', tit1: '饿了么', tit2: 'abc', click: () => console.log(2) },
          { imgUrl: '/images/xdt3.png', tit1: '京东到家', tit2: 'abc', click: () => console.log(3) },
          { imgUrl: '/images/xdt4.jpg', tit1: '抖店电商', tit2: 'abc', click: () => console.log(4) },
          { imgUrl: '/images/xdt5.png', tit1: '抖音来客', tit2: 'abc', click: () => console.log(5) },
          { imgUrl: '/images/xdt6_.png', tit1: '快手电商', tit2: 'abc', click: () => console.log(6) },
          { imgUrl: '/images/xdt7_.png', tit1: '美团电商', tit2: 'abc', click: () => console.log(7) },
          { imgUrl: '/images/xdt8.png', tit1: '小红书', tit2: 'abc', click: () => console.log(8) },
          { imgUrl: '/images/xdt9.jpg', tit1: '快手本地生活', tit2: 'abc', click: () => console.log(8) },
          { imgUrl: '/images/xdt10_.png', tit1: '京东电商', tit2: 'abc', click: () => console.log(8) },
          { imgUrl: '/images/xdt11.png', tit1: '拼多多电商', tit2: 'abc', click: () => console.log(8) },
          { imgUrl: '/images/xdt12.png', tit1: '淘宝电商', tit2: 'abc', click: () => console.log(8) },
          { imgUrl: '/images/xdt14.png', tit1: '天猫电商', tit2: 'abc', click: () => console.log(8) },
          { imgUrl: '/images/xdt13.png', tit1: '大众点评', tit2: 'abc', click: () => console.log(8) },
          { imgUrl: '/images/xdt15.png', tit1: '淘鲜达', tit2: 'abc', click: () => console.log(8) },
          { imgUrl: '/images/xdt16.png', tit1: 'API接入', tit2: 'abc', click: () => console.log(8) },
        ]" />
        <BatchItemUI style="margin-top: .125rem;" :opctions="{
          header: '开放平台',
          hint: '花机宝开放平台，提供API对接接口，商家可以通过端口对接花机宝平台，轻松将自建平台的订单导入到花机宝后台，实现信息互通。',
          footer: '接入到花机宝',
          ifExc: true
        }" :hintA="{ href: '#', text: '点击查看批量导入操作指南' }" @footer-cli-btn="() => { console.log(0); }">
        </BatchItemUI>
      </div>
    </div>
  </div>
  <el-dialog v-if="selectGoodsDialog" v-model="selectGoodsDialog" title="从商品库中选择" width="50%"
    :before-close="handleClose">
    <el-form :inline="true" :model="searchGoods" class="demo-form-inline">
      <el-form-item label="商品收索">
        <el-input v-model="searchGoods.keyWord" placeholder="请输入商品名" clearable />
      </el-form-item>
      <el-form-item label="花材分类">
        <el-select v-model="searchGoods.type" placeholder="请选择分类" clearable> </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="diglog-tips">
      <div class="left">最近使用</div>
      <div class="right">进入商品库</div>
    </div>
    <div class="goods-box">
      <div @click="selectItem(item.url, index)"
        :class="selectItemIndex === index ? 'goods-item goods-item-active' : 'goods-item'"
        v-for="(item, index) in goodsData" :key="index">
        <div class="img">
          <img :src="item.flatPattern" alt="" />
        </div>
        <div class="price">
          <div class="label">出价：</div>
          ￥ {{ item.price }}
        </div>
        <div class="goods-name">
          <div class="label">商品名称：</div>
          {{ item.name }}
        </div>
        <div class="miaoshu">
          <div class="label">商品描述：</div>
          {{ item.intro }}
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelGoodsItemClick">取消</el-button>
        <el-button type="primary" @click="addGoodsItemClick"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useCounterStore } from '@/stores/nav'
import { myProductListApi } from '~/server/goodsApi'
import { createFlowerWoodApi, loadTurnFlowerOrderApi } from '~/server/orderApi'
import { uploadImageApi } from '~/server/userApi'
import { getCouponTime, linkNavigateTo } from '~/utils/util'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import { urlSplit } from '@/utils/validate'
const config = useRuntimeConfig()
// @ts-ignore
// 这是要被忽略类型检查的代码
import { regionData, CodeToText } from 'element-china-area-data'
import {
  ReceiptTimeOptions,
  OrderDetailsRules,
  OrderDetailsRightRules,
  goodsInfoFormRules,
  goodsInfoFormRightRules,
  OrderSettingsFormRules,
} from './dataAndRules'
import smart from 'address-smart-parse'
import { useUserStore } from '@/stores/user'
import { useRoute } from 'vue-router'
import BatchItemUI from '~/components/BatchItemUI.vue'
const route = useRoute()
const userStore = useUserStore()
const ChinaArr: any = regionData
const goodsMapRef = <any>ref(null)
const isLoading = <any>ref(false) //全局loading
// ===============================
import { ElMessage } from 'element-plus'
function handleBtn() {
  if (userStore.$state.token) location.assign(`${config.public.adminUrl}/shopAuthorize/storeIntegration`)
  else ElMessage({
    showClose: true,
    message: '您还未登录，请先登录',
    type: 'warning',
  })
}
// ===============================
// 订单详情
const OrderDetailsRef = <any>ref(null)
const OrderDetailsRulesRef = <any>ref(null)
const OrderDetails = <any>ref({
  ReceiptTime: new Date(), //收货时间
  ReceiptTimeRange: ReceiptTimeOptions[0].value, //收货时间范围

  locateAddress: '', //定位地址
  doorNumber: '', //门牌号
})
const OrderDetailsRight = <any>ref({
  ReceivingArea: [], //收货区域
  ShippingType: 1, //配送类型
  consigneeName: '', //收货人姓名
  consigneeNumber: '', //收货人电话
  FlowerFixerName: '', // 订花人姓名
  FlowerFixerNumber: '', //订花人电话
  greetingCard: '', //贺卡
  OrderNotes: '', //订单备注
})
const disabledDate = (time: any) => {
  return time.getTime() < Date.now() - 8.64e7
}

//初次加载判断是否转单
let imageList: any = []
let position: any = {}
const isMapShow = <any>ref(false)
const loadTurnFlowerOrder = () => {
  return new Promise((resolve, reject) => {
    // 判断url是否携带参数
    if (Object.keys(route.query).length) {
      isLoading.value = true
      loadTurnFlowerOrderApi(route.query.zdOrderNo)
        .then((res: any) => {
          //  console.log(res, '1111111111')
          cityList.value = [
            {
              address: res.street,
              location: res.longitude + ',' + res.latitude,
            },
          ]
          OrderDetailsRight.value.ShippingType = res.deliveryType
          OrderDetails.value.ReceiptTime = res.deliveryDate
          OrderDetails.value.ReceiptTimeRange = res.deliveryTime
          OrderDetailsRight.value.consigneeName = res.receiveName
          OrderDetailsRight.value.consigneeNumber = res.receivePhone
          OrderDetailsRight.value.FlowerFixerName = res.orderName
          OrderDetailsRight.value.FlowerFixerNumber = res.orderPhone
          OrderDetailsRight.value.greetingCard = res.cardInfo
          OrderDetailsRight.value.OrderNotes = res.orderRemark || ''
          // 处理图片
          imageList = res.orderDetailsRequestList
          // 订单设置回写
          OrderSettingsForm.value.orderModel = res.orderMode || '1'
          OrderSettingsForm.value.orderModel = OrderSettingsForm.value.orderModel.toString()
          OrderSettingsForm.value.SalesPrice = res.salesPrice
          OrderSettingsForm.value.SellingPrice = res.otPrice
          OrderSettingsForm.value.Audit = res.audit
          OrderSettingsFormRight.value.orderRemark = res.orderRemark || ''
          OrderSettingsForm.value.Third_PartyOrdersNumber = res.thirdNum
          OrderSettingsFormRight.value.InvoiceInformation = res.invoiceInfo
          // 定位地址
          position = { lat: res.latitude, lon: res.longitude }
          console.log(position, 'position')
          isMapShow.value = true

          resolve(res) // 返回获取的数据
        })
        .catch((err: any) => {
          isLoading.value = false
          reject(err) // 返回错误信息
        })
    } else {
      isMapShow.value = true
      resolve(null) // 没有参数时返回 null
    }
  })
}

onMounted(() => {
  // 页面加载调用回写方法
  Transfers()
})
const Transfers = () => {
  loadTurnFlowerOrder().then((res: any) => {
    // 判断是否有单号传递过来
    if (Object.keys(route.query).length) {
      // 处理商品信息以及图片
      imageList.forEach((item: any, index: any) => {
        // 第一张图片正常执行 多张图片首先初始化数据结构
        if (index != 1) {
          goodsInfoFormData.value.push({
            goodsInfoForm: {
              imageFiles: [], //商品图片
              content: 1, //商品数量
            },
            goodsInfoFormRight: {
              goodsDescription: '', //商品描述
            },
          })
        }
        // 多张图片拆分为数组 进行处理
        const imagUrl = item.sliderImage.split(',')
        imagUrl.forEach((url: any) => {
          getImageFileFromUrl(url, '111').then((files: any) => {
            console.log(files, 'files', imagUrl)
            const obj = {
              raw: files,
              uid: files.lastModifed,
              url: URL.createObjectURL(files),
            }
            goodsInfoFormData.value[index].goodsInfoForm.imageFiles.push(obj)
          })
        })
        goodsInfoFormData.value[index].goodsInfoForm.content = item.productNum
        goodsInfoFormData.value[index].goodsInfoFormRight.goodsDescription = item.remark
      })
      isLoading.value = false
    }
  })
}
// loadTurnFlowerOrder()
// 子组件传递的数据 回写
const writeBockCityEvent = (item: any) => {
  console.log(item, 'item,')
  draggingMapEventFlog.value = true
  OrderDetailsRight.value.ReceivingArea = [
    item.addressComponent.adcode.substring(0, 2) + '0000',
    item.addressComponent.adcode.substring(0, 4) + '00',
    item.addressComponent.adcode,
  ]
  OrderDetails.value.locateAddress = item.formattedAddress
}
// 子组件拖拽返回数据
const draggingMapEventFlog = <any>ref(null)
const draggingMapEvent = (city: any) => {
  console.log(city, 'city')
  draggingMapEventFlog.value = true
  OrderDetailsRight.value.ReceivingArea = [
    city.addressComponent.adcode.substring(0, 2) + '0000',
    city.addressComponent.adcode.substring(0, 4) + '00',
    city.addressComponent.adcode,
  ]
  selectCityDisabled.value = false

  OrderDetails.value.locateAddress = city.formattedAddress
  console.log(OrderDetails.value, ' OrderDetails.value')
}
let timeOutFlog = <boolean>(<unknown>ref(true))

//商品信息
const goodsInfoFormRef = <any>ref(null)
const goodsInfoFormRightRef = <any>ref(null)
const goodsInfoForm = <any>ref({
  imageFiles: [], //商品图片
  content: 1, //商品数量
  // goodsDescription:'' //商品描述
})
const goodsInfoFormData = <any>ref([
  {
    goodsInfoForm: {
      imageFiles: [], //商品图片
      content: 1, //商品数量
    },
    goodsInfoFormRight: {
      goodsDescription: '', //商品描述
    },
  },
])
const addGoodsItem = () => {
  goodsInfoFormData.value.push({
    goodsInfoForm: {
      imageFiles: [], //商品图片
      content: 1, //商品数量
    },
    goodsInfoFormRight: {
      goodsDescription: '', //商品描述
    },
  })
}

// 商品设置
const OrderSettingsFormRef = <any>ref(null)
const OrderSettingsForm = <any>ref({
  Third_PartyOrdersNumber: '', // 地三方订单编号
  orderModel: '1', //下单模式
  SalesPrice: null, //销售价
  SellingPrice: null, //出售价格
  Audit: false, // 花图审核
})

const orderList = ref<any>([])
// 地图选择值
const mapChangeEvent = (res: any) => {
  console.log(res, '地图选择值')

  orderList.value = res.pois
  OrderDetails.value.locateAddress = orderList.value[0].name
  console.log(orderList.value, '地图选择值')
}
const cityList = <any>ref([])
const magnifyItem = <any>ref({})
const mapChangeCityEvent = (res: any) => {
  cityList.value = res.pois
  selectLoading.value = false
  magnifyItem.value = res.pois[0]
  console.log(magnifyItem.value)
}
const selectCityDisabled = ref<boolean>(true)
watch(
  () => OrderDetailsRight.value.ReceivingArea,
  (newVal, oldVal) => {
    if (draggingMapEventFlog.value) {
      return
    }
    console.log(newVal, oldVal)
    isLoading.value = false

    if (newVal) {
      selectCityDisabled.value = false
    }
  },
)
// 监听订单类型的变化
watch(
  () => OrderSettingsForm.value.orderModel,
  (newVal, oldVal) => {
    if (newVal == 2) {
      OrderSettingsForm.value.SellingPrice = 10
    } else {
      OrderSettingsForm.value.SellingPrice = null
    }
  },
)
// 输入定位地址
const searchVal = ref<any>('')
const selectLoading = ref<boolean>(false)
const magnify = ref<any>(false) // 控制放大地图显示按钮
const selectChanged = (value: any) => {
  selectLoading.value = true
  searchVal.value = CodeToText[OrderDetailsRight.value.ReceivingArea[2]] + value
  magnify.value = true
}
const AddressIdentification = <any>ref('') //地址识别
// 地址识别
const AddressIdentificationChange = () => {
  const res = smart(AddressIdentification.value)
  if (!Object.keys(res).length) return
  console.log(res, 'red')

  OrderDetailsRight.value.ReceivingArea = [res.provinceCode + '0000', res.cityCode + '00', res.countyCode]
  OrderDetails.value.locateAddress = res.address
  OrderDetailsRight.value.consigneeName = res.name
  OrderDetailsRight.value.consigneeNumber = res.phone

  selectChanged(res.address)
}
// 放大地图
const mapDialog = <any>ref(false)
const mapMagnifyEvent = (e: any) => {
  mapDialog.value = !mapDialog.value
}

const remoteMethod = (val: any) => {
  if (val === '') {
    return
  }
  console.log(1111111111, val)

  searchVal.value = CodeToText[OrderDetailsRight.value.ReceivingArea[2]] + val
}
const OrderSettingsFormRight = <any>ref({
  orderRemark: '', //商家备注
  InvoiceInformation: '', // 发票信息
  flag: '1', //标记
  orderKind:'1'
})
// 删除商品
const closeOrder = (index: any) => {
  goodsInfoFormData.value.splice(index, 1)
}
// 限定商品价格
const priceChange = (val: any, eventName: any) => {
  console.log(val, eventName)
  if (val.length > 6) {
    OrderSettingsForm.value[eventName] = Number(String(val).slice(0, 6))
  }
}
// 下单前的处理
const FileData = <any>ref([])
const formatData = () => {
  return new Promise((resolve, reject) => {
    goodsInfoFormData.value.forEach(async (item: any, index: any) => {
      const arr: any = []

      // 收集 Promise 对象到一个数组中
      const promises = item.goodsInfoForm.imageFiles.map((file: any) => {
        const formData = new FormData()
        formData.append('multipart', file.raw)

        return uploadImageApi('merchant', '1', formData).then((res: any) => {
          console.log(res.url, 'url', arr)
          arr.push(urlSplit(res.url))
        })
      })

      // 等待所有 Promise 执行完毕
      await Promise.all(promises)

      FileData.value.push({
        sliderImage: arr.join(', '), // 轮播图
        productNum: item.goodsInfoForm.content, // 商品数量
        remark: item.goodsInfoFormRight.goodsDescription, // 备注
      })

      // 最后一次循环执行resolve
      if (FileData.value.length === goodsInfoFormData.value.length) {
        console.log('FileData:', FileData.value)
        resolve(FileData.value)
      }
    })
  })
}
//立即下单
const submitEvent = async (formEl: any) => {
  if (!formEl) return
  submitRulesAll()
    .then(async () => {
      // console.log(goodsInfoFormRefValidate())
     // console.log(cityList, 'cityList')

      const res = await formatData()
      let data: any = {
        // merId:userStore.$state.userInfos.merchantId, //商户id
        deliveryType: OrderDetailsRight.value.ShippingType, //配送类型
        orderTimer: timeOutFlog ? 1 : 2, //时间类型
        deliveryDate: formatTime(OrderDetails.value.ReceiptTime), //时间类型
        deliveryTime: OrderDetails.value.ReceiptTimeRange, //时间段
        province: CodeToText[OrderDetailsRight.value.ReceivingArea[0]], //省份ID
        provinceId: OrderDetailsRight.value.ReceivingArea[0], //省份ID
        city: CodeToText[OrderDetailsRight.value.ReceivingArea[1]], //收货人所在市
        cityId: OrderDetailsRight.value.ReceivingArea[1], //城市id
        district: CodeToText[OrderDetailsRight.value.ReceivingArea[2]], //收货人所在区/县
        districtId: OrderDetailsRight.value.ReceivingArea[2], //区/县id
        street: cityList.value[0].address, //收货人所在街道
        detail: OrderDetails.value.locateAddress, //收货人详细地址
        longitude: cityList.value[0].location.split(',')[0], //经度
        latitude: cityList.value[0].location.split(',')[1], //纬度
        doorNumber: OrderDetails.value.doorNumber, //门牌号，
        receiveName: OrderDetailsRight.value.consigneeName, //收货人姓名
        receivePhone: OrderDetailsRight.value.consigneeNumber, //收货人电话
        orderName: OrderDetailsRight.value.FlowerFixerName, //订货人姓名
        orderPhone: OrderDetailsRight.value.FlowerFixerNumber, //订货人电话
        cardInfo: OrderDetailsRight.value.greetingCard, //贺卡
        orderRemark: OrderDetailsRight.value.OrderNotes, //订单备注
        orderDetailsRequestList: res, //下单详情列表
        orderMode: OrderSettingsForm.value.orderModel, //下单模式
        price: OrderSettingsForm.value.SellingPrice, //销售价
        otPrice: OrderSettingsForm.value.SellingPrice, //出　价
        intro: OrderSettingsFormRight.value.orderRemark, //商家备忘
        thirdNum: OrderSettingsForm.value.Third_PartyOrdersNumber, //第三方订单号
        invoiceInfo: OrderSettingsFormRight.value.InvoiceInformation, //发票信息
        audit: OrderSettingsForm.value.Audit ? 1 : 0, //花图审核
        orderKind: OrderSettingsFormRight.value.orderKind, //订单种类
        flag: OrderSettingsFormRight.value.flag, //标识
        shopId: OrderSettingsFormRight.value.shopId, //指定店铺
      }
      //console.log(data)
      isLoading.value = true
      createFlowerWoodApi(data)
        .then((res: any) => {
          console.log(res, 'res')
          // linkNavigateTo(`/order/order_payment`, { orderNo: res.orderNo })
          location.assign(
            `${config.public.adminUrl}/placeOrder/order_management?code=` + userStore.$state.userInfos.adminToken,
          )
          isLoading.value = false
        })
        .catch((err: any) => {
          console.log(1111)
          isLoading.value = false
        })
      FileData.value = []
      console.log('submit')
    })
    .catch((error: any) => {
      console.log(23e23, error)
      for (const key in error) {
        console.log(
          error[key].forEach((item: any) => {
            console.log(item.message)
          }),
        )
        error[key].forEach((item: any) => {
          feedback.msgError(item.message)
        })
      }
    })
}
// 下单前的校验
const submitRulesAll = () => {
  const promise = goodsInfoFormRefValidate()
  return Promise.all([
    OrderDetailsRef.value.validate(),
    OrderDetailsRulesRef.value.validate(),
    ...promise,
    OrderSettingsFormRef.value.validate(),
  ])
}
// 校验商品信息
const goodsInfoFormRefValidate = () => {
  const arr1 = goodsInfoFormRef.value.map((item: any) => {
    return item.validate()
  })
  const arr2 = goodsInfoFormRightRef.value.map((item: any) => {
    return item.validate()
  })
  const promise = [...arr1, ...arr2]
  return promise
}
const userIndex = useCounterStore()
onMounted(() => {
  userIndex.increment(3)
})
const active = ref<number>(0)
watch(
  () => active.value,
  (newVal, oldVal) => {
    console.log(newVal)
    switch (newVal) {
      case 0:
        goodsInfoFormData.value = [
          {
            goodsInfoForm: {
              imageFiles: [], //商品图片
              content: 1, //商品数量
            },
            goodsInfoFormRight: {
              goodsDescription: '', //商品描述
            },
          },
        ]
        Transfers()
        break
    }
  },
)
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}

import {
  Delete,
  Download,
  Plus,
  ZoomIn,
  InfoFilled,
  QuestionFilled,
  MapLocation,
  Goods,
  CloseBold,
  FullScreen,
  Flag,
} from '@element-plus/icons-vue'

import type { UploadFile } from 'element-plus'

const handleRemove = (file: UploadFile, index: any) => {
  console.log(file)
  goodsInfoFormData.value[index].goodsInfoForm.imageFiles.splice(
    goodsInfoFormData.value[index].goodsInfoForm.imageFiles.findIndex((item: any) => item.uid === file.uid),
    1,
  )
  // console.log(file,index)
}

//上传文件
const flesIndex = <any>ref(0)
const searchGoods = <any>ref({
  keyWord: '',
  type: '',
})
// 选择商品
const selectGoodsDialog = <any>ref(false)
const selectGoodsEvent = (index: number) => {
  flesIndex.value = index
  //console.log(index)
  selectGoodsDialog.value = true
}
const { data: goodsData } = await useAsyncData(async () => myProductListApi())

//模拟商品图片数据
/*const goodsData = <any>ref([
  {
    url: 'http://localhost:3000/_nuxt/assets/images/image64.png',
    name: '测试1',
    miaoshu: '没有描述',
  },
  {
    url: 'http://localhost:3000/_nuxt/assets/images/image64.png',
    name: '测试2',
    miaoshu: '没有描述',
  },
])*/
const selectItemIndex = <any>ref(null)
const itemData = <any>ref({})
const selectItem = (url: any, index: number) => {
  getImageFileFromUrl(url, '111').then((res: any) => {
    const obj = {
      raw: res,
      uid: res.lastModifed,
      url: URL.createObjectURL(res),
    }
    itemData.value = obj
    selectItemIndex.value = index
    console.log(res, URL.createObjectURL(res))
    // goodsInfoFormData.value[flesIndex.value].goodsInfoForm.imageFiles.push(obj)
  })
}
const handleClose = () => {
  selectGoodsDialog.value = false
  selectItemIndex.value = null
}
const addGoodsItemClick = () => {
  if (Object.keys(itemData.value).length === 0) {
    selectGoodsDialog.value = false
    return
  }
  goodsInfoFormData.value[flesIndex.value].goodsInfoForm.imageFiles.push(itemData.value)
  selectGoodsDialog.value = false
  itemData.value = {}
  selectItemIndex.value = null
}
const cancelGoodsItemClick = () => {
  selectGoodsDialog.value = false
  selectItemIndex.value = null
}
const getImageFileFromUrl = (url: any, imageName: any) => {
  return new Promise((resolve, reject) => {
    var blob = null
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.setRequestHeader('Accept', 'image/jpeg')
    xhr.responseType = 'blob'
    xhr.onload = () => {
      blob = xhr.response
      let imgFile = new File([blob], imageName, { type: 'image/jpeg' })
      resolve(imgFile)
    }
    xhr.onerror = (e) => {
      reject(e)
    }
    xhr.send()
  })
}
//格式化时间
const formatTime = (time: any) => {
  const date = new Date(time)
  const year = date.getFullYear()
  const minutes = date.getMonth()
  const day = date.getDate()
  return `${year}-${minutes + 1}-${day}`
}
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  background-color: #fff;
  padding-bottom: 188.0064px;

  .nav {
    height: 351.9936px;
    width: 100%;
    background-color: skyblue;
  }

  .main {
    width: 1200px;
    margin: 0 auto;

    .tabs {
      width: 100%;
      height: 39.9936px;
      background-color: #f3f4f8;
      display: flex;
      margin-top: 45.0048px;
      margin-bottom: 24.9984px;

      .standard {
        width: 140.0064px;
        height: 100%;
        color: #252b3a;
        font-size: 13.9968px;
        text-align: center;
        line-height: 39.9936px;
        border-radius: 6.0096px;
        cursor: pointer;
      }

      .active {
        color: #fff;
        background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
      }
    }

    .order-information {
      width: 100%;
      // height: 670.0032px;
      border: .0052rem dashed #aaa;
      margin-top: 30.0096px;

      .header {
        background-color: #f3f4f8;
        height: 39.9936px;
        color: #252b3a;
        font-size: 15.9936px;
        line-height: 39.9936px;
        padding: 0 49.9968px;
        display: flex;
        align-items: center;
      }

      .header::before {
        content: ' ';
        display: block;
        background-color: #ff4e8d;
        width: 2.9952px;
        height: 15.9936px;
        margin-right: 4.992px;
      }

      .form {
        display: flex;
        height: 100%;

        .left,
        .right {
          flex: 1;
          padding: 20.0064px;
        }

        .left {
          .timing-receipt {
            width: 72px;
            height: 34.0032px;
            background-color: #f3f4f8;
            font-size: 13.9968px;
            text-align: center;
            line-height: 34.0032px;
            border-radius: 14.9952px;
            color: #8a8e99;
            margin-left: 4.992px;
            cursor: pointer;
          }

          .map {
            .dlaceholding {
              position: absolute;
              z-index: 1;
              width: 399.9936px;
              height: 140.0064px;
              background-color: #d9d9d9;
              transition: all 0.3s; /* 添加过渡效果 */
              .magnify {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30.0096px;
                height: 30.0096px;
                cursor: pointer;
              }
            }

            .fangda {
              position: fixed;
              top: 50%;
              left: 50%;
              width: 70vw;
              transform: translate(-50%, -50%);
              height: 2.7292rem;
              box-shadow: 3.4px 3.4px 2.7px rgba(0, 0, 0, 0.022), 8.7px 8.7px 6.9px rgba(0, 0, 0, 0.031),
                17.7px 17.7px 14.2px rgba(0, 0, 0, 0.039), 36.5px 36.5px 29.2px rgba(0, 0, 0, 0.048),
                100px 100px 80px rgba(0, 0, 0, 0.07);
              transition: all 0.3s;
              z-index: 999;
            }
          }

          .upload-image {
            ::v-deep .el-upload-list__item {
              width: 92.0064px;
              height: 92.0064px;
            }

            ::v-deep .el-upload {
              width: 92.0064px;
              height: 92.0064px;
            }

            ::v-deep .el-upload__tip {
              position: absolute;

              .el-icon {
                top: .0104rem;
              }
            }
          }

          .select-goods {
            width: 92.0064px;
            height: 92.0064px;
            border-radius: 4.992px;
            border: .0052rem dashed #cdd0d6;
            margin-left: 10.0032px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 25.9968px;
            cursor: pointer;

            i {
              color: #909399;
            }
          }

          .select-goods:hover {
            border-color: #ff4e8d;
          }

          .order-mode {
            .tip {
              width: 100%;
              color: #999999;
              font-size: .0625rem;

              .el-icon {
                top: .0104rem;
              }
            }
          }

          .sales-price {
            .tail {
              display: flex;
              align-items: center;
              color: #999999;

              i {
                margin: 0 4.992px;
              }
            }
          }

          .bid {
            .tail {
              color: #999999;
              display: flex;

              .money {
                color: #e1a130;
                // margin-left: 4.992px;
              }

              .krypton {
                color: #43a7e5;
                text-decoration: underline;
                cursor: pointer;
                margin-left: 4.992px;
              }
            }

            .tip {
              width: 100%;
              color: #999999;
              font-size: .0625rem;

              .el-icon {
                top: .0104rem;
              }

              span {
                color: #43a7e5;
                text-decoration: underline;
                cursor: pointer;
                margin-left: 4.992px;
              }
            }
          }
        }

        .right {
          .product-description {
            .tip {
              width: 100%;
              color: #424447;
              font-size: .0625rem;

              .el-icon {
                top: .0104rem;
              }
            }

            .add-product {
              width: 180px;
              height: 30.0096px;
              background-color: #f3f4f8;
              color: #101010;
              font-size: 12px;
              text-align: center;
              line-height: 30.0096px;
              margin-top: 45.0048px;
            }
          }
        }
      }

      .settlement {
        height: 126.0096px;
        padding: 15.9936px 40.992px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          flex-direction: column;
          // align-items: center;
          justify-content: space-around;
          height: 100%;
          color: #575d6c;
          font-size: 15.9936px;

          span {
            color: #252b3a;
          }
        }

        .content {
          display: flex;
          align-items: center;
          color: #252b3a;
          font-size: 18.0096px;

          div {
            color: #ff4e8d;
            font-size: 25.9968px;
            font-weight: 700;
          }
        }

        .right {
          width: 240px;
          height: 39.9936px;
          text-align: center;
          line-height: 39.9936px;
          color: #fff;
          background: linear-gradient(90deg, #ff99bd 0%, #ffddbe 100%);
          border-radius: 10.0032px;
          font-size: 15.9936px;
          cursor: pointer;
        }
      }

      .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 66.0096px;
        border: .0052rem solid transparent;
        background: linear-gradient(white, white) padding-box,
          repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.5em, white 0, white 0.75em);

        .add-order-btn {
          width: 138.0096px;
          height: 39.9936px;
          border: .0052rem solid #ff4e8d;
          color: #ff4e8d;
          text-align: center;
          line-height: 39.9936px;
          font-size: 13.9968px;
          cursor: pointer;
        }
      }

      .close-order {
        position: absolute;
        top: 50%;
        right: 20.0064px;
        font-size: 22.0032px;
        color: red;
        cursor: pointer;
      }
    }

    .goods-info {
      .footer {
        display: block !important;
        height: auto;

        .vip-name {
          margin-top: 24px;
        }

        .shop-info {
          padding: 24px 22.0032px;

          .title {
            display: flex;
            justify-content: space-between;

            .left {
              display: flex;
              align-items: center;

              .shop-name {
                color: #252b3a;
                font-size: 15.9936px;
                font-weight: 600;
              }

              .gradd {
                margin-left: 10.0032px;
              }

              .status {
                width: 49.9968px;
                height: 19.008px;
                background-color: #fceced;
                text-align: center;
                line-height: 19.008px;
                font-size: 12px;
                color: #ff4e8d;
                margin-left: 15.9936px;
              }

              .online-status {
                color: #ff4e8d;
                font-size: 13.9968px;
                margin-left: 30.0096px;
                font-weight: 600;
              }
            }

            .right {
              display: flex;

              .record,
              .guarantee {
                width: 82.0032px;
                height: 19.008px;
                text-align: center;
                line-height: 19.008px;
              }

              .record {
                border: .0052rem solid #ff4e8d;
                color: #ff4e8d;
              }

              .guarantee {
                border: .0052rem solid #1aa48d;
                color: #1aa48d;
                margin-left: 10.0032px;
              }
            }
          }

          .shop-content {
            padding: 14.9952px 22.0032px 0 14.9952px;
            display: flex;
            justify-content: space-between;

            .left {
              display: flex;

              .image {
                height: 108px;
                width: 108px;
                background-color: #c4c4c4;
              }

              .vip-info {
                padding: 10.0032px;

                ul {
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;

                  li {
                    list-style: none;
                    display: flex;

                    .label,
                    .phone,
                    .qq,
                    .contact-address {
                      font-size: 12px;
                      color: #8a8e99;
                    }

                    .name,
                    .telephone-number,
                    .qq-number,
                    .address {
                      font-size: 12px;
                      color: #333333;
                    }

                    .icon {
                      font-size: .0729rem;
                      color: #dd323c;
                    }

                    .map {
                      font-size: 12px;
                      color: #8a8e99;
                    }
                  }
                }
              }
            }

            .right {
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              ul {
                display: flex;
                border: .0052rem solid #e1e1e3;
                border-radius: 4.992px;

                li {
                  position: relative;
                  list-style: none;
                  width: 75.9936px;
                  height: 49.9968px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;

                  .content {
                    color: #ff4e8d;
                    font-size: 15.9936px;
                  }

                  .txt {
                    font-size: 12px;
                    color: #575d6c;
                  }
                }

                li:nth-child(n + 2)::after {
                  content: ' ';
                  display: block;
                  width: .0052rem;
                  height: 30.0096px;
                  background-color: #e1e1e3;
                  position: absolute;
                  left: 0;
                  // position: absolute;
                  // background-color: pink;
                }
              }

              .bottom {
                // margin-top: 10.0032px;
              }
            }
          }
        }
      }
    }
  }

  ::v-deep .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 120px;
  }

  ::v-deep .el-input__prefix {
    display: none;
  }

  .receipt-time {
    ::v-deep .el-input {
      width: 128.0064px;
      margin-left: 4.992px;
    }
  }

  ::v-deep .el-radio-button__original-radio:checked+.el-radio-button__inner {
    color: #ff518f;
    background: none;
  }

  // ::v-deep .el-radio-button:last-child .el-radio-button__inner {
  //   width: 128.0064px;
  //   // height:34.0032px;
  // }
  // ::v-deep .el-radio-button:first-child .el-radio-button__inner {
  //   width: 128.0064px;
  //   margin-right: 4.992px;
  // }
}

.diglog-tips {
  display: flex;
  justify-content: space-between;

  .left {
    font-size: 18.0096px;
  }

  .right {
    color: #1890ff;
  }
}

.goods-box {
  box-sizing: border-box;
  margin-top: 20.0064px;
  display: flex;

  .goods-item {
    width: 150.0096px;
    height: 200.0064px;
    padding: 10.0032px;
    border: .0052rem solid #ebebeb;
    cursor: pointer;

    .img {
      width: 100%;
      height: 80.0064px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .price {
      color: red;
      font-size: 15.9936px;
      display: flex;
    }

    .label {
      color: #101010;
      font-size: 13.9968px;
    }

    .goods-name {
      display: flex;
      color: #101010;
      font-size: 13.9968px;
    }

    .miaoshu {
      display: flex;
      color: #101010;
      font-size: 13.9968px;
    }
  }

  .goods-item-active {
    border-color: red;
  }
}

::v-deep .el-form-item__content {
  align-items: normal;
}
</style>