crm-app-vue3/pages/wareHouse/openOrder.vue

<template>
   <view class="open_order" @click="handleClickOutside">
      <u-navbar class="nav-bar" title="销售业务开单" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
      <view class="open_order_content">
         <view class="header">
            <img :src="openOrderForm.url" alt="">
            <view class="header_box">
               <view class="title">
                  {{ openOrderForm.title }} | {{ openOrderForm.desc }}
               </view>
               <view class="header_detail_box">
                  <view class="total_cost">
                     <view class="total_cost_title">系统总成本</view>
                     <view class="total_cost_price">￥{{ openOrderForm.totalCost }}</view>
                  </view>
                  <view class="advice_price">
                     <view class="advice_price_title">建议标价</view>
                     <view class="advice_price_price">￥{{ openOrderForm.advicePrice }}</view>
                  </view>
               </view>
            </view>
         </view>
         <u--form labelPosition="top" :model="openOrderForm" :rules="rules" ref="openOrderForm" label-width="200rpx">
            <view class="card_item">
               <u-form-item label="成交金额" required prop="price">
                  ￥<u--input v-model="openOrderForm.price" border="none" type="number"></u--input>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="开单数量">
                  <u-number-box v-model="openOrderForm.quantity"></u-number-box>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="订单类型">
                  <TabSelect :tabList="tabList" mode="multiple" :colNum="4" :defaultIndex="1"
                     @tabChange="changeOrderType">
                  </tabSelect>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="销售人员与时间" class="sales_person_box_form">
                  <view class="sales_person_box" @click="personShow = true">
                     <u-icon name="man-add" size="36rpx" color="#374151"></u-icon>
                     <view class="text">{{ openOrderForm.salesPerson }}</view>
                  </view>
                  <view class="sales_person_box" @click="dateShow = true">
                     <u-icon name="calendar" size="36rpx" color="#374151"></u-icon>
                     <view class="text">{{ openOrderForm.date }}</view>
                  </view>

               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="收款方式">
                  <TabSelect :tabList="paymentTabList" mode="single" :colNum="4" :defaultIndex="1"
                     @tabChange="changePaymentTab">
                  </tabSelect>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="售后保障配置">
                  <TabSelect :tabList="afterSaleTabList" mode="multiple" :colNum="3" :defaultIndex="1"
                     @tabChange="changeAfterSaleTab">
                  </tabSelect>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="支付凭证上传">
                  <u-upload :fileList="paymentProof" @afterRead="afterReadPaymentProof" @delete="deletePaymentProof"
                     name="1" multiple :maxCount="10"></u-upload>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="订单备注">
                  <u--textarea v-model="openOrderForm.remark" placeholder="请输入订单备注" confirmType="done"></u--textarea>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="收货地址">
                  <u--textarea v-model="openOrderForm.address" placeholder="请输入收货地址" confirmType="done"></u--textarea>
               </u-form-item>
            </view>
         </u--form>
      </view>
      <view class="bottom_box">
         <view class="bottom_box_item">
            <view class="bottom_box_item_title">实收总计</view>
            <view class="bottom_box_item_price">￥{{ openOrderForm.amountReceived }}</view>
         </view>
         <u-button color="#3c9cff" type="primary" @click="submitForm"  icon="checkmark">确认开单</u-button>
      </view>
      <u-popup :show="personShow" @close="close" @open="open">
         人员选择
      </u-popup>
      <u-datetime-picker :show="dateShow" v-model="openOrderForm.date" mode="date" @confirm="confirmDate"
         @close="closeDate" @cancel="closeDate"></u-datetime-picker>
   </view>
</template>
<script>
import TabSelect from '@/components/custom-tab-select/index.vue'
export default {
   components: {
      TabSelect,
   },
   data() {
      return {
         openOrderForm: {
            url: require('./imgs/1.jpg'),
            title: 'ROLEX',
            desc: 'SUBMSRINER DATE 126610LN',
            totalCost: '82500',
            advicePrice: '890000',
            price: null,
            quantity: 1,
            salesPerson: 'IT秦',
            orderType: [],
            date: '2026-1-1',
            paymentTab: 1,
            afterSaleTab: [],
            remark: '',
            address: '',
            amountReceived: 89000,
         },
         paymentProof: [],
         tabList: [
            {
               name: '零售',
               value: 1,
            },
            {
               name: '寄卖',
               value: 2,
            },
            {
               name: '同行',
               value: 3,
            },
            {
               name: '退货',
               value: 4,
            },
            {
               name: '质押',
               value: 5,
            },
         ],
         paymentTabList: [
            {
               name: '微信',
               value: 1,
            },
            {
               name: '支付宝',
               value: 2,
            },
            {
               name: '银行卡',
               value: 3,
            },
            {
               name: '现金',
               value: 4,
            },
            {
               name: '数字货币',
               value: 5,
            },
            {
               name: '挂账',
               value: 6,
            },
         ],
         afterSaleTabList: [
            {
               name: '假一赔三',
               value: 1,
            },
            {
               name: '一年质保',
               value: 2,
            },
            {
               name: '一年内八折回收',
               value: 3,
            },
            {
               name: '送保养一次',
               value: 4,
            },
            {
               name: '原厂配件保证',
               value: 5,
            },
         ],
         rules: {
            price: [
               { required: true, message: '请输入成交金额', trigger: ['blur'] },
            ],
         },
         personShow: false,
         dateShow: false,
      }
   },
   methods: {
      changeOrderType(val) {
         this.openOrderForm.orderType = val
      },
      changePaymentTab(val) {
         this.openOrderForm.paymentTab = val
      },
      changeAfterSaleTab(val) {
         this.openOrderForm.afterSaleTab = val
      },
      handleClickOutside() {
         this.personShow = false
      },
      confirmDate(val) {
         this.openOrderForm.date = this.$dayjs(val.value).format('YYYY-MM-DD');
         console.log(this.openOrderForm.date);

         this.dateShow = false
      },
      closeDate() {
         this.dateShow = false
      },
      afterReadPaymentProof(file) {
         // this.paymentProof.push(file)
      },
      deletePaymentProof(index) {
         // this.paymentProof.splice(index, 1)
      },
      submitForm() {
         this.$refs.openOrderForm.validate().then(res => {
            if (res) {
               console.log('提交成功', this.openOrderForm);
               
            }
         })
      },
   }
}
</script>
<style lang="scss" scoped>
@import './styles/openOrder.scss';
</style>