|
|
<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>
|
|
|
|
