123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- <template>
- <div class="form-wrap">
- <el-form label-position="left" ref="form" :model="form" label-width="100px">
- <div class="moudle">
- <div class="title">
- 发件地址
- </div>
- <el-form-item label="发件门店">
- <el-input class="input" v-model="form.name"></el-input>
- <el-button class="but1" type="info">选择门店</el-button>
- </el-form-item>
- <el-form-item label="发件人电话">
- <el-input v-model="form.name"></el-input>
- <div>~</div>
- <el-input v-model="form.name"></el-input>
- </el-form-item>
- <el-form-item label="发件人地址">
- <el-input v-model="form.name">
- <el-image @click="showMap" slot="append" class="map" src="../../static/image/icon_map.png"></el-image>
- </el-input>
- </el-form-item>
- <el-form-item label="楼号/门牌号">
- <el-input v-model="form.name">
- </el-input>
- </el-form-item>
- </div>
- <div class="moudle">
- <div class="title">
- 收件地址
- </div>
- <el-form-item label="收件人姓名">
- <el-input v-model="form.name">
- </el-input>
- <el-button class="but1" type="info">常用地址</el-button>
- </el-form-item>
- <el-form-item label="收件人电话">
- <el-input v-model="form.name"></el-input>
- <div>~</div>
- <el-input v-model="form.name"></el-input>
- </el-form-item>
- <el-form-item label="收件人地址">
- <el-input v-model="form.name">
- <el-image @click="showMap" slot="append" class="map" src="../../static/image/icon_map.png"></el-image>
- </el-input>
- </el-form-item>
- <el-form-item label="楼号/门牌号">
- <el-input v-model="form.name">
- </el-input>
- </el-form-item>
- </div>
- <div class="moudle">
- <div class="title">
- 物品信息
- </div>
- <el-form-item label="物品类型" label-width="103px">
- <div class="category_box">
- <div class="item" :class="form.categoryId == item.id ? 'active':''" v-for="(item,i) in products" :key="i" @click="$set(form,'categoryId',item.id)">
- {{item.name}}
- </div>
- </div>
- </el-form-item>
- <el-form-item label="物品重量">
- <div class="printer-num">
- <img @click="reduce(1)" src="../../static/image/icon_reduce.png" class="reduce" alt="" srcset="" />
- <div class="num">{{ form.printCustomerCount }} KG</div>
- <img @click="add(1)" src="../../static/image/icon_add.png" class="add" alt="" srcset="" />
- </div>
- </el-form-item>
- <el-form-item label="物品价值">
- <el-input v-model="form.name">
- </el-input>
- </el-form-item>
- <el-form-item label="发单时间">
- <el-button class="but" type="info">立即发单</el-button>
- <el-button class="but" type="info">预约发单</el-button>
- <el-input v-model="form.name">
- </el-input>
- </el-form-item>
- <el-form-item label="发单备注">
- <el-input v-model="form.name">
- </el-input>
- </el-form-item>
- </div>
- <div class="moudle">
- <div class="title">
- 发票信息
- </div>
- <el-form-item label="发票抬头">
- <el-input v-model="form.name">
- </el-input>
- </el-form-item>
- <el-form-item label="发票税号">
- <el-input v-model="form.name">
- </el-input>
- </el-form-item>
- </div>
- <!-- <el-form-item>
- <el-button type="primary" @click="onSubmit">去结算</el-button>
- </el-form-item> -->
- </el-form>
- </div>
- </template>
- <script>
- import { getProductList } from '../'
- export default {
- name: "manualCreate",
- data() {
- return {
- products:[],
- form: {
- name: "",
- region: "",
- date1: "",
- date2: "",
- delivery: false,
- type: [],
- resource: "",
- desc: "",
- },
- };
- },
- // 监听属性 类似于data概念
- computed: {},
- // 监控data中的数据变化
- watch: {},
- // 方法集合
- methods: {
- onSubmit() {
- console.log("submit!");
- },
- showMap(){
- },
- },
- // 生命周期 - 创建完成(可以访问当前this实例)
- created() {},
- // 生命周期 - 挂载完成(可以访问DOM元素)
- mounted() {},
- // 生命周期 - 创建之前
- beforeCreate() {},
- // 生命周期 - 挂载之前
- beforeMount() {},
- // 生命周期 - 更新之前
- beforeUpdate() {},
- // 生命周期 - 更新之后
- updated() {},
- // 生命周期 - 销毁之前
- beforeDestroy() {},
- // 生命周期 - 销毁完成
- destroyed() {},
- // 如果页面有keep-alive缓存功能,这个函数会触发
- activated() {},
- };
- </script>
- <style lang="scss" scoped type="text/css">
- .form-wrap {
- width: calc(100% - 40px);
- // height: calc(100% - 40px);
- padding: 20px;
- background: #fff;
- .moudle {
- width: 600px;
- margin: 0 100px 100px 0;
- }
- /deep/ .el-form {
- display: flex;
- flex-wrap: wrap;
- // width: 600px;
- }
- /deep/ .el-form-item__label {
- color: #b1b1b1;
- }
- .title {
- font-weight: bold;
- color: #777777;
- margin-bottom: 20px;
- }
- .but {
- margin-right: 100px;
- }
- .but1 {
- margin-left: 100px;
- }
- /deep/ .el-form-item__content {
- display: flex;
- }
- .printer-num {
- display: flex;
- align-items: center;
- .reduce {
- width: 30px;
- height: 30px;
- cursor: pointer;
- }
- .num {
- margin: 0 10px;
- }
- .add {
- width: 30px;
- height: 30px;
- cursor: pointer;
- }
- .name {
- margin-left: 20px;
- }
- }
- }
- </style>
|