dlsx
/
hjb_pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

下单页完成

Browse Source
develoop
Your Name 1 year ago
parent e26bce63a7
commit 92246839c8
4 changed files with 577 additions and 101 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 128
      assets/scss/checkbox.scss
  2. 48
      assets/scss/element/index.scss
  3. 3
      components/layoutHeader.vue
  4. 485
      pages/homeIndex/placeOrder.vue

128
assets/scss/checkbox.scss
Unescape View File

@ -1,66 +1,66 @@
// /* 单选框和多选框 */
// .checkbox-wrapper {
// position: relative;
// input {
// display: none;
// }
// .icon {
// position: relative;
// left: 0px;
// top: 7px;
// display: inline-block;
// width: 13px;
// height: 13px;
// border: 1px solid #cccccc;
// border-radius: 50%;
// -webkit-transform: translate(0, -50%);
// -moz-transform: translate(0, -50%);
// -o-transform: translate(0, -50%);
// -ms-transform: translate(0, -50%);
// transform: translate(0, -50%);
// }
// input:checked + .icon {
// background-color: #e93323;
// border-color: #e93323;
// background-image: url("../images/enter.png");
// -webkit-background-size: 10px 8px;
// -moz-background-size: 10px 8px;
// background-size: 10px 8px;
// background-repeat: no-repeat;
// background-position: center center;
// }
// }
/* 单选框和多选框 */
.checkbox-wrapper {
position: relative;
input {
display: none;
}
.icon {
position: relative;
left: 0px;
top: 7px;
display: inline-block;
width: 13px;
height: 13px;
border: 1px solid #cccccc;
border-radius: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
input:checked + .icon {
background-color: #e93323;
border-color: #e93323;
background-image: url("../images/enter.png");
-webkit-background-size: 10px 8px;
-moz-background-size: 10px 8px;
background-size: 10px 8px;
background-repeat: no-repeat;
background-position: center center;
}
}
// .Checkbox {
// position: absolute;
// visibility: hidden;
// outline: none;
// background: #fff;
// }
// .Checkbox+label {
// position:absolute;
// width: 16px;
// height: 16px;
// border: 1px solid #9B9B9B;
// border-radius: 50%;
// background-color:#fff;
// left: 11px;
// top: 50%;
// margin-top: -8px;
// }
// .Checkbox:checked+label:after {
// content: "";
// position: absolute;
// left: 3px;
// top:3px;
// width: 6px;
// height: 3px;
// border: 2px solid #9B9B9B;
// border-top-color: transparent;
// border-right-color: transparent;
// transform: rotate(-45deg);
// -ms-transform: rotate(-45deg);
// -moz-transform: rotate(-45deg);
// -webkit-transform: rotate(-45deg);
// }
.Checkbox {
position: absolute;
visibility: hidden;
outline: none;
background: #fff;
}
.Checkbox+label {
position:absolute;
width: 16px;
height: 16px;
border: 1px solid #9B9B9B;
border-radius: 50%;
background-color:#fff;
left: 11px;
top: 50%;
margin-top: -8px;
}
.Checkbox:checked+label:after {
content: "";
position: absolute;
left: 3px;
top:3px;
width: 6px;
height: 3px;
border: 2px solid #9B9B9B;
border-top-color: transparent;
border-right-color: transparent;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

48
assets/scss/element/index.scss
Unescape View File

@ -1,26 +1,26 @@
// $-colors: (
// 'primary': (
// 'base': #E93323,
// ),
// 'success': (
// 'base': #67c23a,
// ),
// 'warning': (
// 'base': #e6a23c,
// ),
// 'danger': (
// 'base': #f56c6c,
// ),
// 'error': (
// 'base': #E93323,
// ),
// 'info': (
// 'base': #909399,
// ),
// );
$-colors: (
'primary': (
'base': #FF94D4,
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #E93323,
),
'info': (
'base': #909399,
),
);
// @forward 'element-plus/theme-chalk/src/common/var.scss' with (
// $colors: $-colors
// );
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: $-colors
);
// @use './dark.scss';
@use './dark.scss';

3
components/layoutHeader.vue
Unescape View File

@ -11,6 +11,9 @@
<li @click="goTo(6)">服务中心</li>
<li @click="goTo(7)">下载中心</li>
<li ref="active" class="active"></li>
<nuxt-link to="homeIndex/placeOrder" exact>
点击跳转到 About 页面
</nuxt-link>
</ul>
</div>
<div class="login-btn">

485
pages/homeIndex/placeOrder.vue
Unescape View File

@ -15,21 +15,256 @@
<el-form :model="form" label-width="120px">
<el-form-item label="配送类型">
<el-radio-group v-model="radio1" size="large">
<el-radio-button label="配送" />
<el-radio-button label="自提" />
<el-radio-button border label="配送" />
<el-radio-button border label="自提" />
</el-radio-group>
</el-form-item>
<el-form-item label="配送类型">
<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 class="right"></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>
@ -52,16 +287,61 @@ const form = reactive({
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%;
@ -94,7 +374,7 @@ const onSubmit = () => {
}
.order-information {
width: 100%;
height: 3.4896rem;
// height: 3.4896rem;
border: 1px dashed #aaa;
margin-top: 0.1563rem;
.header {
@ -123,8 +403,201 @@ const onSubmit = () => {
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>

Write Preview
Loading…
Cancel
Save