You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
603 lines
20 KiB
603 lines
20 KiB
<template> |
|
<div class="banner"> |
|
<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="left"> |
|
<el-form :model="form" label-width="120px"> |
|
<el-form-item label="配送类型"> |
|
<el-radio-group v-model="radio1" size="large"> |
|
<el-radio-button border label="配送" /> |
|
<el-radio-button border label="自提" /> |
|
</el-radio-group> |
|
</el-form-item> |
|
<el-form-item label="收货时间" class="receipt-time"> |
|
<el-date-picker |
|
v-model="value1" |
|
type="date" |
|
placeholder="Pick a date" |
|
:default-value="new Date(2010, 9, 1)" |
|
/> |
|
<el-select v-model="value" class="m-2" placeholder="Select"> |
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|
</el-select> |
|
<div class="timing-receipt">定时配送</div> |
|
</el-form-item> |
|
<el-form-item label="收货区域" class="receipt-region"> |
|
<el-select v-model="value" class="m-2" placeholder="Select" style="width: 2.0833rem"> |
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="定位地址" class="locate-address"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="input" |
|
placeholder="请选择你的定位信息" |
|
maxlength="100" |
|
show-word-limit |
|
/> |
|
</el-form-item> |
|
<el-form-item label="门牌号" class="door-number"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="input" |
|
placeholder="详细地址，例如：3号楼2单元106" |
|
maxlength="100" |
|
show-word-limit |
|
/> |
|
</el-form-item> |
|
<el-form-item label="" class="map"> |
|
<div class="dlaceholding"></div> |
|
</el-form-item> |
|
<el-form-item label="地址自动识别" class="map"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="textarea" |
|
:rows="2" |
|
type="textarea" |
|
placeholder="试试粘贴收货人姓名、手机号、收货地址、可快速识别您的收货信息" |
|
/> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="right"> |
|
<el-form :model="form" label-width="120px"> |
|
<el-form-item label="收货人姓名" class="locate-address"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="input" |
|
placeholder="请输入收货人姓名" |
|
maxlength="100" |
|
show-word-limit |
|
/> |
|
</el-form-item> |
|
<el-form-item label="收货人电话" class="door-number"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="input" |
|
placeholder="请输入收货人电话号" |
|
maxlength="100" |
|
show-word-limit |
|
/> |
|
</el-form-item> |
|
<el-form-item label="顶花人姓名" class="door-number"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="input" |
|
placeholder="请输入定花人电话" |
|
maxlength="100" |
|
show-word-limit |
|
/> |
|
</el-form-item> |
|
<el-form-item label="贺卡" class="map"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="textarea" |
|
:rows="2" |
|
type="textarea" |
|
placeholder="请填写贺卡留言" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="订单备注" class="map"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="textarea" |
|
:rows="2" |
|
type="textarea" |
|
placeholder="订单备注，订单双方均可查看" |
|
/> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="order-information"> |
|
<div class="header">商品信息</div> |
|
<div class="form"> |
|
<div class="left"> |
|
<el-form :model="form" label-width="120px"> |
|
<el-form-item label="上传商品图片" class="upload-image"> |
|
<el-upload limit="4" action="#" list-type="picture-card" :auto-upload="false"> |
|
<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 v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> |
|
<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> |
|
|
|
<el-dialog v-model="dialogVisible"> |
|
<img w-full :src="dialogImageUrl" alt="Preview Image" /> |
|
</el-dialog> |
|
</el-form-item> |
|
<el-form-item label="商品数量" class="locate-address"> |
|
<el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="right"> |
|
<el-form :model="form" label-width="120px"> |
|
<el-form-item label="商品描述" class="product-description"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="textarea" |
|
: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> |
|
</div> |
|
<div class="footer"><div class="add-order-btn">增加商品</div></div> |
|
</div> |
|
<div class="order-information"> |
|
<div class="header">订单设置</div> |
|
<div class="form"> |
|
<div class="left"> |
|
<el-form :model="form" label-width="120px"> |
|
<el-form-item label="下单模式" class="order-mode"> |
|
<el-radio-group v-model="radio1" size="large"> |
|
<el-radio-button label="发布抢单" /> |
|
<el-radio-button label="发布报价单" /> |
|
<el-radio-button label="指定店铺" /> |
|
</el-radio-group> |
|
<div class="tip"> |
|
<el-icon><InfoFilled /></el-icon>详细描述商品信息能让花店快速接单~ |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="销售价" class="sales-price"> |
|
<el-input |
|
style="width: .7813rem" |
|
v-model="input" |
|
placeholder="Please input" |
|
:formatter="(value :any) => `元 ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" |
|
:parser="(value : any) => value.replace(/\$\s?|(,*)/g, '')" |
|
/> |
|
<div class="tail"><el-icon><QuestionFilled /></el-icon><div>非必填</div></div> |
|
</el-form-item> |
|
<el-form-item label="销售价" class="bid"> |
|
<el-input |
|
style="width: .7813rem" |
|
v-model="input" |
|
placeholder="Please input" |
|
:formatter="(value: any) => `元 ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" |
|
:parser="(value: any) => value.replace(/\$\s?|(,*)/g, '')" |
|
/> |
|
<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 label="画图审核"> |
|
<el-switch v-model="value1" /> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="right"> |
|
<el-form :model="form" label-width="120px"> |
|
<el-form-item label="商家备忘"> |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="textarea" |
|
:rows="2" |
|
type="textarea" |
|
placeholder="订单备忘，仅下单方乐见" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="第三方订单号" > |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="input" |
|
placeholder="请输入第三方订单号" |
|
maxlength="100" |
|
show-word-limit |
|
/> |
|
</el-form-item> |
|
<el-form-item label="发票信息" > |
|
<el-input |
|
style="width: 2.0833rem" |
|
v-model="input" |
|
placeholder="请输入发票信息·" |
|
maxlength="100" |
|
show-word-limit |
|
/> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="order-information" > |
|
<div class="settlement"> |
|
<div class="left"> |
|
<div class="item">订单类型：<span>鲜花</span></div> |
|
<div class="item">商品数量：<span>1</span></div> |
|
<div class="item">收货时间：<span>1024-01-05 不限时间</span></div> |
|
</div> |
|
<div class="content">订单价格：<div>￥0.00</div></div> |
|
<div class="right">确认无误，立即下单</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-else-if="active === 1" class="fast-box">快速下单</div> |
|
<div v-else class="batch">批量下单</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
|
const active = ref<number>(0) |
|
const form = reactive({ |
|
name: '', |
|
region: '', |
|
date1: '', |
|
date2: '', |
|
delivery: false, |
|
type: [], |
|
resource: '', |
|
desc: '', |
|
}) |
|
const radio1 = ref('') |
|
const onSubmit = () => { |
|
console.log('submit!') |
|
} |
|
const value = ref('') |
|
|
|
const options = [ |
|
{ |
|
value: 'Option1', |
|
label: 'Option1', |
|
}, |
|
{ |
|
value: 'Option2', |
|
label: 'Option2', |
|
}, |
|
{ |
|
value: 'Option3', |
|
label: 'Option3', |
|
}, |
|
{ |
|
value: 'Option4', |
|
label: 'Option4', |
|
}, |
|
{ |
|
value: 'Option5', |
|
label: 'Option5', |
|
}, |
|
] |
|
import { Delete, Download, Plus, ZoomIn, InfoFilled,QuestionFilled } from '@element-plus/icons-vue' |
|
|
|
import type { UploadFile } from 'element-plus' |
|
|
|
const dialogImageUrl = ref('') |
|
const dialogVisible = ref(false) |
|
const disabled = ref(false) |
|
|
|
const handleRemove = (file: UploadFile) => { |
|
console.log(file) |
|
} |
|
|
|
const handlePictureCardPreview = (file: UploadFile) => { |
|
dialogImageUrl.value = file.url! |
|
dialogVisible.value = true |
|
} |
|
|
|
const handleDownload = (file: UploadFile) => { |
|
console.log(file) |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.banner { |
|
width: 100%; |
|
background-color: #fff; |
|
padding-bottom: .9792rem; |
|
.nav { |
|
height: 1.8333rem; |
|
width: 100%; |
|
background-color: skyblue; |
|
} |
|
.main { |
|
width: 6.25rem; |
|
margin: 0 auto; |
|
.tabs { |
|
width: 100%; |
|
height: 0.2083rem; |
|
background-color: #f3f4f8; |
|
display: flex; |
|
margin-top: 0.2344rem; |
|
margin-bottom: 0.1302rem; |
|
.standard { |
|
width: 0.7292rem; |
|
height: 100%; |
|
color: #252b3a; |
|
font-size: 0.0729rem; |
|
text-align: center; |
|
line-height: 0.2083rem; |
|
border-radius: 0.0313rem; |
|
cursor: pointer; |
|
} |
|
.active { |
|
color: #fff; |
|
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%); |
|
} |
|
} |
|
.order-information { |
|
width: 100%; |
|
// height: 3.4896rem; |
|
border: 1px dashed #aaa; |
|
margin-top: 0.1563rem; |
|
.header { |
|
background-color: #f3f4f8; |
|
height: 0.2083rem; |
|
color: #252b3a; |
|
font-size: 0.0833rem; |
|
line-height: 0.2083rem; |
|
padding: 0 0.2604rem; |
|
display: flex; |
|
align-items: center; |
|
} |
|
.header::before { |
|
content: ' '; |
|
display: block; |
|
background-color: #ff4e8d; |
|
width: 0.0156rem; |
|
height: 0.0833rem; |
|
margin-right: 0.026rem; |
|
} |
|
.form { |
|
display: flex; |
|
height: 100%; |
|
.left, |
|
.right { |
|
flex: 1; |
|
padding: 0.1042rem; |
|
} |
|
.left { |
|
.timing-receipt { |
|
width: 0.375rem; |
|
height: 0.1771rem; |
|
background-color: #f3f4f8; |
|
font-size: 0.0729rem; |
|
text-align: center; |
|
line-height: 0.1771rem; |
|
border-radius: 0.0781rem; |
|
color: #8a8e99; |
|
margin-left: 0.026rem; |
|
} |
|
.map { |
|
.dlaceholding { |
|
width: 2.0833rem; |
|
height: 0.7292rem; |
|
background-color: #d9d9d9; |
|
} |
|
} |
|
.upload-image { |
|
::v-deep .el-upload-list__item { |
|
width: 0.4792rem; |
|
height: 0.4792rem; |
|
} |
|
::v-deep .el-upload { |
|
width: 0.4792rem; |
|
height: 0.4792rem; |
|
} |
|
::v-deep .el-upload__tip { |
|
.el-icon { |
|
top: 2px; |
|
} |
|
} |
|
} |
|
.order-mode { |
|
.tip { |
|
width: 100%; |
|
color: #999999; |
|
font-size: 12px; |
|
.el-icon { |
|
top: 2px; |
|
} |
|
} |
|
} |
|
.sales-price{ |
|
.tail{ |
|
display: flex; |
|
align-items: center; |
|
color: #999999; |
|
i{ |
|
margin: 0 .026rem; |
|
} |
|
} |
|
} |
|
.bid{ |
|
.tail{ |
|
color: #999999; |
|
display: flex; |
|
.money{ |
|
color: #e1a130; |
|
// margin-left: .026rem; |
|
} |
|
.krypton{ |
|
color: #43A7E5; |
|
text-decoration: underline; |
|
cursor: pointer; |
|
margin-left: .026rem; |
|
} |
|
} |
|
.tip { |
|
width: 100%; |
|
color: #999999; |
|
font-size: 12px; |
|
.el-icon { |
|
top: 2px; |
|
} |
|
span{ |
|
color: #43A7E5; |
|
text-decoration: underline; |
|
cursor: pointer; |
|
margin-left: .026rem; |
|
} |
|
} |
|
} |
|
} |
|
.right { |
|
.product-description { |
|
.tip { |
|
width: 100%; |
|
color: #424447; |
|
font-size: 12px; |
|
.el-icon { |
|
top: 2px; |
|
} |
|
} |
|
.add-product { |
|
width: 0.9375rem; |
|
height: 0.1563rem; |
|
background-color: #f3f4f8; |
|
color: #101010; |
|
font-size: 0.0625rem; |
|
text-align: center; |
|
line-height: 0.1563rem; |
|
margin-top: 0.2344rem; |
|
|
|
} |
|
} |
|
} |
|
} |
|
.settlement{ |
|
height: .6563rem; |
|
padding: .0833rem .2135rem; |
|
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: .0833rem; |
|
span{ |
|
color: #252B3A; |
|
} |
|
} |
|
.content{ |
|
display: flex; |
|
align-items: center; |
|
color: #252B3A; |
|
font-size: .0938rem; |
|
div{ |
|
color: #FF4E8D; |
|
font-size: .1354rem; |
|
font-weight: 700; |
|
} |
|
} |
|
.right{ |
|
width: 1.25rem; |
|
height: .2083rem; |
|
text-align: center; |
|
line-height: .2083rem; |
|
color: #fff; |
|
background: linear-gradient(90deg,#FF99BD 0%,#FFDDBE 100%); |
|
border-radius:.0521rem; |
|
font-size:.0833rem; |
|
cursor:pointer; |
|
} |
|
} |
|
.footer { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 100%; |
|
height: 0.3438rem; |
|
border: 1px 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: 0.7188rem; |
|
height: 0.2083rem; |
|
border: 1px solid #ff4e8d; |
|
color: #ff4e8d; |
|
text-align: center; |
|
line-height: 0.2083rem; |
|
font-size: 0.0729rem; |
|
} |
|
} |
|
} |
|
} |
|
::v-deep .el-date-editor.el-input, |
|
.el-date-editor.el-input__wrapper { |
|
width: 0.625rem; |
|
} |
|
::v-deep .el-input__prefix { |
|
display: none; |
|
} |
|
.receipt-time { |
|
::v-deep .el-input { |
|
width: 0.6667rem; |
|
margin-left: 0.026rem; |
|
} |
|
} |
|
::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:.6667rem; |
|
// height:.1771rem; |
|
} |
|
::v-deep .el-radio-button:first-child .el-radio-button__inner{ |
|
width:.6667rem; |
|
margin-right:.026rem; |
|
} |
|
} |
|
</style>
|
|
|