hjb_pc/pages/homeIndex/placeOrder.vue

<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 goods-info">
          <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: 0.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: 0.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 class="footer">
            <div class="vip-name">
              <el-form :model="form" label-width="120px">
                <el-form-item label="店铺会员名称">
                  <el-input style="width: 1.2813rem" 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>鲜花</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,MapLocation } 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: 0.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 0.026rem;
              }
            }
          }
          .bid {
            .tail {
              color: #999999;
              display: flex;
              .money {
                color: #e1a130;
                // margin-left: .026rem;
              }
              .krypton {
                color: #43a7e5;
                text-decoration: underline;
                cursor: pointer;
                margin-left: 0.026rem;
              }
            }
            .tip {
              width: 100%;
              color: #999999;
              font-size: 12px;
              .el-icon {
                top: 2px;
              }
              span {
                color: #43a7e5;
                text-decoration: underline;
                cursor: pointer;
                margin-left: 0.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: 0.6563rem;
        padding: 0.0833rem 0.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: 0.0833rem;
          span {
            color: #252b3a;
          }
        }
        .content {
          display: flex;
          align-items: center;
          color: #252b3a;
          font-size: 0.0938rem;
          div {
            color: #ff4e8d;
            font-size: 0.1354rem;
            font-weight: 700;
          }
        }
        .right {
          width: 1.25rem;
          height: 0.2083rem;
          text-align: center;
          line-height: 0.2083rem;
          color: #fff;
          background: linear-gradient(90deg, #ff99bd 0%, #ffddbe 100%);
          border-radius: 0.0521rem;
          font-size: 0.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;
        }
      }
    }
    .goods-info {
      .footer {
        display: block !important;
        height: auto;
        .vip-name{
          margin-top: .125rem;
        }
        .shop-info{
            padding: .125rem .1146rem;
          
          
            .title{
              display: flex;
              justify-content: space-between;
              .left{
                display: flex;
                align-items: center;
                .shop-name{
                  color: #252B3A;
                  font-size: .0833rem;
                  font-weight: 600;
                }
                .gradd{
                  margin-left: .0521rem;
                }
                .status{
                  width: .2604rem;
                  height: .099rem;
                  background-color: #FCECED;
                  text-align: center;
                  line-height: .099rem;
                  font-size: .0625rem;
                  color: #FF4E8D;
                  margin-left: .0833rem;
                }
                .online-status{
                  color: #ff4e8d;
                  font-size: .0729rem;
                  margin-left: .1563rem;
                  font-weight: 600;
                }
              }
              .right{
                display: flex;
                .record,.guarantee{
                  width: .4271rem;
                  height: .099rem;
                  text-align: center;
                  line-height: .099rem;
                }
                .record{
                  border: 1px solid #FF4E8D;
                  color: #FF4E8D;
                }
                .guarantee{
                  border: 1px solid #1AA48D;
                  color: #1AA48D;
                  margin-left: .0521rem;
                }
              }
            }
            .shop-content{
              padding: .0781rem .1146rem 0 .0781rem;
              display: flex;
              justify-content: space-between;
              .left{
                display: flex;
                .image{
                      height: .5625rem;
                width: .5625rem;
                background-color: #C4C4C4;
                }
                .vip-info{
                  padding: .0521rem;
                  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: .0625rem;
                        color: #8A8E99;
                      }
                      .name,.telephone-number,.qq-number,.address{
                        font-size: .0625rem;
                        color: #333333;
                      }
                      .icon{
                        font-size: 14px;
                        color: #dd323c;
                      }
                      .map{
                        font-size: .0625rem;
                        color: #8A8E99;
                      }
                    }
                  }
                }
            
              }
              .right{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                ul{
                  display: flex;
                  border: 1px solid #E1E1E3;
                  border-radius: .026rem;
                  li{
                    position: relative;
                    list-style: none;
                    width:.3958rem;
                    height: .2604rem;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .content{
                      color: #FF4E8D;
                      font-size: .0833rem;
                    }
                    .txt{
                      font-size: .0625rem;
                      color: #575D6C;
                    }
                  }
                  li:nth-child(n+2)::after{
                    content:  ' ';
                    display: block;
                    width: 1PX;
                    height: .1563rem;
                    background-color: #E1E1E3;
                    position: absolute;
                    left: 0;
                    // position: absolute;
                    // background-color: pink;
                  }
                }
                .bottom{
                  // margin-top: .0521rem;
                }
              }
            }
        }
         
        

      }
    }
  }
  ::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: 0.6667rem;
    // height:.1771rem;
  }
  ::v-deep .el-radio-button:first-child .el-radio-button__inner {
    width: 0.6667rem;
    margin-right: 0.026rem;
  }
}
</style>