front-end/hdApp/src/admin/order/workOrder.vue

<template>
<view class="app-content">
  <view class="affirm-page">
    <view class="affirm-view overscroll">
      <form>

       <view class="module-com input-line-wrap" style="position:relative;">

        <tui-list-cell class="line-cell" :arrow="true">
          <view class="tui-title required">品种</view>
          <picker mode="selector" :value="form.kindId" :range="kindListData" range-key="name" @change="changeKindFn" class="tui-input" >
            <input v-model="form.kindId" name="kindId" type="text" hidden />
            <view v-if="form.kindId" style="height:45upx;" >{{ kindSelectedData.name }}</view>
            <view class="tui-placeholder" style="height:45upx;" v-else>请选择</view>
          </picker>
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title required">数量</view>
          <input v-model="form.num" placeholder-class="phcolor" class="tui-input" name="num" @focus="form.num=''" placeholder="填写数量" maxlength="50" type="number" />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false" :arrow="false" >
          <view class="tui-title required">单价</view>
          <input type="digit" @focus="goodsPrice=''" :focus="true" style="width:260upx;" v-model="goodsPrice" placeholder-class="tui-placeholder" placeholder="填写金额" />
          <text style="color:#3385FF;font-weight:bold;">合计 ¥<text>{{orderTotalPrice}}</text></text>
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="form.fromType == 3 && form.hasPay == 1">
          <view class="tui-title">订金</view>
          <input type="digit" @focus="dj=''" style="width:260upx;" v-model="dj" placeholder-class="tui-placeholder" placeholder="选填"/>
          <text style="color:red;font-weight:bold;" v-if="Number(debtFinalPrice)>0">尾款 ¥<text>{{debtFinalPrice}}</text></text>
        </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="form.fromType == 3">
            <view class="tui-title">收款方式</view>
            <button @tap="form.hasPay = 1" class="admin-button-com middle" :class="form.hasPay == 1 ? 'blue' : 'default'">线下</button>
            <button @tap="form.hasPay = 2" class="admin-button-com middle" :class="form.hasPay == 2 ? 'blue' : 'default'">记欠款</button>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :arrow="true" v-if="form.hasPay == 1 && form.fromType == 3">
            <view class="tui-title">线下渠道</view>
            <picker mode="selector" :value="form.payWay" :range="payWayList" range-key="name" @change="payWayChange" class="tui-input" >
              <input v-model="form.payWay" name="payWay" type="text" hidden />
              <view style="padding:6upx 0 6upx 0;">{{payWayList[payWayindex].name}}</view>
            </picker>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :arrow="false" :hover="false">
            <view class="tui-title required" style="margin-bottom:46upx;">每份支数</view>
            <input type="number" v-model="form.flowerNum" @focus="form.flowerNum=''" style="width:350upx;margin-bottom:46upx;" name="flowerNum" placeholder-class="tui-placeholder" placeholder="每份使用花材的支数"/>
          </tui-list-cell>

          <view style="position:absolute;bottom:1upx;left:50upx;">
            <block v-for="(numItem, numIndex) in flowerNumList" :key="numIndex">
              <button class="admin-button-com mini-btn default" style="padding-top:13upx;padding-bottom:13upx;" @click="setNum(numItem.num)">{{numItem.name}}</button>
            </block>
          </view>

        </view>

        <view class="module-com input-line-wrap goods-wrap">
          <view class="module-tit">
            <span>图片</span>
            <span class="app-color-3"></span>
          </view>
          <view class="module-det">
            <htz-image-upload :max="1" :compress="true" v-model="currentImgData" :headers="headers"
            @uploadSuccess="imgUploadSuccess" @imgDelete="imgDeleteFn" :action="getLoginInfo.imgUploadApi">
            </htz-image-upload>
          </view>
        </view>

        <app-delivery-module ref="appDelivery" @changeAddress="changeAddress" />

      </form>
    </view>
    <view class="under-bar">
      <view class="price-view"></view>
      <button class="admin-button-com blue big" @click="confirmToSubmit">提交</button>
    </view>
  </view>
</view>
</template>
<script>
import TuiListCell from "@/components/plugin/list-cell";
import productMins from "@/mixins/cgPlantProduct";
import AppDeliveryModule from "@/components/app-delivery";
import { createOrder } from "@/api/order";
import { mapGetters } from "vuex";
import { getUserDistance } from "@/api/express";
import { getAllKind } from "@/api/kind";
//图片上传插件来源：https://ext.dcloud.net.cn/plugin?id=2922 已改造，不能再升级 shish 20211228
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
export default {
  name: "plantConfirm",
  components: {
    TuiListCell,AppDeliveryModule,htzImageUpload
  },
  mixins: [productMins],
  data () {
    return {
      headers:{token:''},
      selectJobType: "addOrder",
      form: {
        fromType:'3',
        hasPay:1,
        payWay:0,
        sendCost:'',
        kindId:'',
        cover:[],
        num:1,
        flowerNum:''
      },
      goodsPrice:'',
		payWayindex:0,
		payWayList:[{name:"线下微信",id:0},{name:"线下支付宝",id:1},{name:"现金",id:4},{name:"银行卡",id:5}],
      kindListData:[],
      kindSelectedData:{},
      currentImgData:[],
      dj:'',
      numSelectedData:{num:0,name:0},
      flowerNumList:[{num:9,name:9},{num:11,name:11},{num:16,name:16},{num:33,name:33},{num:52,name:52},{num:66,name:66},{num:99,name:99}]
    };
  },
  onLoad (option) {
    const token = uni.getStorageSync('token')
    this.headers.token = token
  },
	onShow(){
	},
	onUnload(){

	},
  computed: {
    ...mapGetters(["getLoginInfo"]),
    orderTotalPrice(){
       let price = 0
        if(Number(this.goodsPrice) > 0 && Number(this.form.num) >0 ){
          price = Number(this.goodsPrice)*Number(this.form.num)
          price = parseFloat(price.toFixed(2))
        }
        return price
    },
    debtFinalPrice(){
      let price = 0
      if(Number(this.dj) > 0 && Number(this.orderTotalPrice)){
          price = Number(this.orderTotalPrice) - Number(this.dj)
          price = parseFloat(price.toFixed(2))
      }
      return price
    }
  },
  methods: {
    setNum(num){
      this.form.flowerNum = num
    },
    imgUploadSuccess(res) {
      var imgReturn = JSON.parse(res.data)
      if(imgReturn.code == 1){
        this.currentImgData.push(imgReturn.data.smallUrl)
        this.form.cover.push(imgReturn.data.shortUrl)
      }
    },
    imgDeleteFn(res){
      const index = res.index
      this.form.cover.splice(index,1)
    },
    init() {
      this.getKindDataFn()
    },
    async getKindDataFn() {
      await getAllKind({flower:1}).then(res => {
        if (this.$util.isEmpty(res.data)){
          return false;
        }
        this.kindListData = res.data.list ? res.data.list : []
        if(this.kindListData && this.kindListData[0] && this.kindListData[0].id){
          this.form.kindId = this.kindListData[0].id||''
          let name = this.kindListData[0].name||''
          this.kindSelectedData = {name}
        }
      });
    },
    changeKindFn(e) {
        this.kindSelectedData = this.kindListData[e.detail.value];
        this.form.kindId = this.kindSelectedData.id;
    },
		payWayChange(e){
			let index = e.detail.value
			this.payWayindex = index
      this.form.payWay = this.payWayList[index].id
		},
    //计算客户距离和运费
    changeAddress() {
      return false
      let lat = this.$refs.appDelivery.region.latitude
      let long = this.$refs.appDelivery.region.longitude
      getUserDistance({ lat: lat, lng: long }).then(res => {
        this.freightPrice = res.data.fee
        this.showDistance = res.data.showDistance
      })
    },
    confirmToSubmit () {
      let that = this

      if(this.$util.isEmpty(this.goodsPrice) || Number(this.goodsPrice)<=0){
        this.$msg("请输入单价")
        return false
      }
      //允许不传图片
      if (!this.$util.isEmpty(this.form.cover)) {
        if(Array.isArray(this.form.cover)){
          this.form.cover = this.form.cover[0]
        }
      }
      if(this.$util.isEmpty(this.form.num) || Number(this.form.num)<0){
        this.$msg('请填写数量')
        return false
      }
      if(Number(this.orderTotalPrice) == 0){
        this.$msg('请填写单价')
        return false
      }
      if(Number(this.dj)>0){
        if(Number(this.dj) >= Number(this.orderTotalPrice)){
          this.$msg('订金要小于总金额')
          return false
        }
      }
      if(this.$util.isEmpty(this.form.flowerNum) || Number(this.form.flowerNum)<=0){
          this.$msg('请选择每份用材数量')
          return false
      }
      if(this.$util.isEmpty(this.$refs.appDelivery.form.bookName)){
          this.$msg('请填写订花人姓名')
          return false
      }
      let modifyPrice = Number(this.goodsPrice)*Number(this.form.num)
      modifyPrice = modifyPrice.toFixed(2)
      //这里前后顺序有影响哦，不要随意调动
      that.form = {...that.form,...that.$refs.appDelivery.form}

      that.$util.confirmModal({content:'确认提交？'},() => {
          uni.showLoading({mask:true})
          let name = that.kindSelectedData.name ? that.kindSelectedData.name : ''
          createOrder({...that.form,unitGoodsPrice:this.goodsPrice,modifyPrice:modifyPrice,dj:this.dj,name:name,kindName:name}).then((res) => {
            uni.hideLoading()
            that.pageTo({url: '/admin/order/workOrderResult',type:2,query:{id:res.data.id}})
          })
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.module-com {
  margin-bottom: 20upx;
  background-color: #fff;
  color: $fontColor2;
  .module-tit {
    padding: 20upx 30upx;
    font-size: 28upx;
  }
  .module-det {
    padding: 0 30upx;
  }
}
.admin-button-com {
  margin-right: 20upx;
}
.affirm-page {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  .affirm-view {
    flex: 1;
    margin-bottom:90upx;
    padding: 20upx;
    background-color: #f0f2f6;
    .commodity-view {
      display: flex;
      flex-direction: column;
      .commodity-list {
        padding: 20upx;
        .commodity-item {
          display: flex;
          margin-bottom: 20upx;
          .item-icon {
            flex-shrink: 0;
            width: 140upx;
            height: 140upx;
          }
          .item-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            margin-left: 20upx;
            .info-line {
              margin-bottom: 20upx;
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              .item-name {
                color: #666;
                font-size: 28upx;
              }
              .item-price {
                color: #333;
                font-size: 22upx;
                .price {
                  font-size: 32upx;
                  font-weight: bold;
                }
              }
              .item-type {
                color: #999;
                font-size: 24upx;
              }
              .item-count {
                color: #666;
                font-size: 24upx;
              }
            }
          }
        }
      }
      .summary-bar {
        padding: 0 20upx;
        height: 90upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1upx solid #eeeeee;
        .operate-view {
          display: flex;
          align-items: center;
          color: #3385ff;
          font-size: 26upx;
          .iconfont {
            margin-right: 20upx;
            font-size: 40upx;
          }
        }
        .describe-view {
          display: flex;
          align-items: center;
          color: #333;
          font-size: 24upx;
          .price {
            font-weight: bold;
            font-size: 36upx;
          }
        }
      }
    }
    .module-com {
      background-color: #fff;
      margin-bottom: 20upx;
      border-radius: 10upx;
      overflow: hidden;
					.tab-box{
						padding: 10upx 30upx 30upx;
						.tab{
							width: 49%;
							height: 70upx;
							color: #a2a2a2;
							border: 1upx solid #dcdcdc;
							border-radius: 10upx;
							font-size: 28upx;
							font-weight: 700;
							&.active{
								color: #ff4d4d;
								border: 1upx solid #ff4d4d;
							}
						}
					}
      .member-wrap {
        .member-det {
          font-size: 24upx;
          margin-left: 20upx;
        }
      }
      .remark-wrap {
        align-items: flex-start;
        .remark {
          height: 240upx;
        }
      }
    }
  }
  .under-bar {
    display: flex;
    z-index:99999;
    justify-content: space-between;
    align-items: center;
    padding: 0 20upx;
    position: fixed;
    bottom:0;
    /* 手机mobile屏幕小于1000px */
    @media screen and (max-width: 1100px) {
      width: 100%;
    }
    /* 收银台cashier屏幕大于1000px */
    @media screen and (min-width:1100px) {
      width: 40%;
    } 
    height: 100upx;
    background-color: #fff;
    box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
    .price-view {
      display: flex;
      align-items: center;
      font-size: 24upx;
      .price-title {
        color: #333;
      }
      .price-number {
        margin: 0 20upx;
        color: #ff2842;
        .large {
          font-size: 40upx;
        }
      }
    }
    .admin-button-com {
      width: 200upx;
    }
  }
}
</style>