crm-app-vue3/pages/wareHouse/components/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">
            <image class="header_img" :src="openOrderForm.url" alt=""></image>
            <view class="header_box">
               <view class="title">
                  {{ openOrderForm.dictLabel }} | {{ openOrderForm.model }}
               </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.suggestedPrice }}</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="single" :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="recyclePersonClick">
                     <u-icon name="man-add" size="36rpx" color="#374151"></u-icon>
                     <view class="text">{{ openOrderForm.recyclePerson }}</view>
                     <PersonPicker ref="recyclePersonPickerRef" title="请选择回收人员"
                            @selectPerson="handleSelectRecyclePerson"></PersonPicker>
                  </view>
                  <view class="sales_person_box" @click="dateShow = true">
                     <u-icon name="calendar" size="36rpx" color="#374151"></u-icon>
                     <view class="text">{{ openOrderForm.warehouseDate }}</view>
                     <u-datetime-picker :show="dateShow" v-model="openOrderForm.warehouseDate" mode="date" @confirm="confirmDate"
                        @close="closeDate" @cancel="closeDate"></u-datetime-picker>
                  </view>

               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="收款方式">
                  <TabSelect :tabList="payTypeTabList" mode="single" :colNum="4" :defaultIndex="1"
                     @tabChange="changepayTypeTab">
                  </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="支付凭证上传">
                  <ImgsRowScroll v-if="payTypeProofPicFileList.length > 0" :isShowDeleteIcon="true"
                     @deleteImgInfo="getDeleteGoodPicInfo" imgMode="aspectFill" :totalWidth="400"
                     :images="payTypeProofPicFileList" :previewEnabled="true" :imageWidth="150" :imageHeight="150">
                  </ImgsRowScroll>
                  <u-upload @afterRead="afterReadpayTypeProofPic" 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.price * openOrderForm.quantity || 0 }}</view>
         </view>
         <u-button color="#3c9cff" type="primary" @click="submitForm" icon="checkmark">确认开单</u-button>
      </view>
   </view>
</template>
<script>
import TabSelect from '@/components/custom-tab-select/index.vue'
import ImgsRowScroll from '@/components/imgs-row-scroll/index.vue'
import PersonPicker from '@/components/person-picker/index.vue'
export default {
   components: {
      TabSelect,
      ImgsRowScroll,
      PersonPicker,
   },
   data() {
      return {
         payTypeProofPicFileList: [],
         openOrderForm: {
            // url: '',
            // dictLabel: '',
            // dictValue: '',
            // model: '',
            // totalCost: '',
            // suggestedPrice: '',
            // price: null,
            // quantity: 1,
            // recyclePerson: '',
            // recyclePersonId: '',
            // orderType: [],
            // warehouseDate: '',
            // payTypeTab: 1,
            // afterSaleTab: [],
            // remark: '',
            // address: '',
         },
         tabList: [
            {
               name: '零售',
               value: 1,
            },
            {
               name: '寄卖',
               value: 2,
            },
            {
               name: '同行',
               value: 3,
            },
            {
               name: '退货',
               value: 4,
            },
            {
               name: '质押',
               value: 5,
            },
         ],
         payTypeTabList: [
            {
               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'] },
            ],
         },
         dateShow: false,
      }
   },
   onLoad() {
      const params = this.$route.query.params
      if (params) {
         this.openOrderForm = JSON.parse(params)
         this.openOrderForm.quantity = 1
         // Object.keys(params).forEach(key => {
         //    this.openOrderForm[key] = params[key]
         // })
      }
   },
   methods: {
      changeOrderType(val) {
         this.openOrderForm.orderType = val
      },
      changepayTypeTab(val) {
         this.openOrderForm.payTypeTab = val
      },
      changeAfterSaleTab(val) {
         this.openOrderForm.afterSaleTab = val
      },
      // 打开回收人选择器
      recyclePersonClick() {
         this.$refs.recyclePersonPickerRef.open();
      },
      handleSelectRecyclePerson(person) {
         this.openOrderForm.recyclePerson = person.label
         this.openOrderForm.recyclePersonId = person.id
      },
      handleClickOutside() {
         this.personShow = false
      },
      confirmDate(val) {
         this.$nextTick(() => {
            this.openOrderForm.warehouseDate = this.$dayjs(val.value).format('YYYY-MM-DD');
         })
         this.dateShow = false
      },
      closeDate() {
         this.dateShow = false
      },
      getDeleteGoodPicInfo(info) {
         this.payTypeProofPicFileList = info.newImages
      },
       async afterReadpayTypeProofPic(event) {
            event.file.forEach(item => {
                uni.$u.api.uploadFile(item.url).then((res) => {
                    this.payTypeProofPicFileList.push(res.data.url);
                    uni.$u.toast("文件上传成功");
                }).catch(() => {
                    uni.$u.toast("上传文件失败");
                })
            })
        },
      submitForm() {
         this.$refs.openOrderForm.validate().then(res => {
            if (res) {
               const data = {
                  ...this.openOrderForm,
                  payTypeProofPicFileList: this.payTypeProofPicFileList,
                  amountReceived: Number(this.openOrderForm.price) * Number(this.openOrderForm.quantity),
               }
               uni.$u.api.wareHouseOpenOrder(data).then(res => {
                  if (res.code === 200) {
                     uni.$u.toast("开单成功");
                     setTimeout(() => {
                        uni.navigateBack({
                              delta: 2
                        });
                     }, 1000);
                  } else {
                     uni.$u.toast(res.msg);
                  }
               }).catch(() => {
                  uni.$u.toast("开单失败");
               })
               console.log('提交成功', this.openOrderForm);

            }
         })
      },
   }
}
</script>
<style lang="scss" scoped>
@import '../styles/openOrder.scss';
</style>