front-end/ghsApp/src/admin/billing/affirm.vue

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

    <view class="affirm-view overscroll">
      <!-- 花材列表 -->
      <form>
        <view class="module-com">
          <view class="commodity-view">
            <view class="commodity-list">
              <template v-if="!$util.isEmpty(selectList)">
                <view class="commodity-item" v-for="(item, index) in selectList" :key="index">
                  <!-- #ifdef APP-PLUS -->
                  <image class="item-icon" :src="item.cover" />
                  <!-- #endif -->
                  <!-- #ifdef MP-WEIXIN -->
                  <image class="item-icon" :src="item.cover" />
                  <!-- #endif -->
                  <view class="item-info">
                    <view class="info-line">
                      <text class="item-name">{{ item.itemName }}</text>
                      <text class="item-price">
                        <text class="unit">¥</text>
                        <text class="price">{{ parseFloat(item.userPrice)||0 }}</text>
                      </text>
                    </view>

                    <view style="text-align:right;">
                      <view class="open-bx" >
                        <i class="iconfont iconjian" @click="reduceItemFn(item)" v-if="item.bigCount > 0 || item.smallCount > 0"></i>
                        <text class="num" @click="showAddModelFn(item)">
                          <text v-if="item.bigCount > 0" style="font-size:24upx;font-weight:bold;color:#3385ff;">{{ item.bigCount }}</text>
                          <text v-if="item.smallCount > 0" style="font-size:24upx;">{{ item.smallCount }}</text>
                        </text>
                        <i class="iconfont iconzeng" @click="addItemFn(item)"></i>
                      </view>
                    </view>

                  </view>
                </view>
              </template>
            </view>
            <view class="summary-bar">
              <view class="operate-view" v-if="isScanEnv" @click="removeFromSave(option.customId)"> <text class="iconfont iconshanchu1"></text>清除花材 </view>
              <view class="operate-view" v-else @click="gobackEvent"><text class="iconfont icongouwuche"></text>重选花材</view>
              <view class="describe-view">共{{ selectList.length }}种，合计 ¥<text class="price">{{ allPrice }}</text></view>
            </view>
            <view class="summary-bar">
              <view class="operate-view" v-if="isScanEnv" @click="pageToItemList()"> <text class="iconfont iconzeng"></text>手动添加花材 </view>
            </view>
          </view>
        </view>

        <modal-module :show="isAddModel" @cancel="addItemModelHidden" @click="confirmAddItemModel" :title="customData.itemName" color="#333" :size="32" padding="30rpx 30rpx" >
          <template slot="customContent">
            <view class="select-cmd_bx" v-if="customData">
              <view class="kc"><text class="unit_price">库存 {{ parseFloat(customData.stock) }}</text><text class="unit_price"> 单价 {{ parseFloat(customData.price) }}</text>1扎={{customData.ratio}}支</view>

              <view class="num_bx">
                <input style="width: 430upx" v-model="customData.userPrice" @focus="customData.userPrice = null"
                v-if="getLoginInfo.staff && getLoginInfo.staff.super == 1" type="number" placeholder="单价" :disabled="false" />
                <input style="width: 430upx" v-model="customData.userPrice" v-else @focus="customData.userPrice = null" type="number" :disabled="true" placeholder="单价" />
                <text style="font-size:35upx;font-weight:bold;color:#666666;">元</text>
              </view>

              <view class="num_bx">
                <!-- #ifdef APP-PLUS -->
                <input style="width: 430upx" v-model="customData.bigCount" v-if="globalUnitType == 0" type="number" />
                <text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 0">扎</text>
                <input style="width: 430upx" v-model="customData.smallCount" v-if="globalUnitType == 1" type="number" />
                <text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 1">支</text>
                <!-- #endif -->

                <!-- #ifdef MP-WEIXIN -->
                <input style="width: 430upx" v-model="customData.bigCount" v-if="globalUnitType == 0" :focus="isAddInputFocus" type="number" />
                <text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 0">扎</text>
                <input style="width: 430upx" v-model="customData.smallCount" v-if="globalUnitType == 1" :focus="isAddInputFocus" type="number" />
                <text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 1">支</text>
                <!-- #endif -->

                <image @click="switchGlobalUnitType" :src="`${constant.imgUrl}/icon/switch/switch128.png`" 
                style="width:86upx;height:86upx;position:relative;top:-60upx;right:0upx;" mode="widthFix"></image>

              </view>

            </view>
          </template>
        </modal-module>

        <view class="module-com input-line-wrap">
					<view class="" v-if="isBilling">
          <tui-list-cell class="line-cell" :hover="false" :arrow="false">
            <view class="tui-title">客户</view>
            <view class="tui-input">{{ form.customName }}</view>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false">
            <view class="tui-title">配送方式</view>
            <button @tap="setSendType(2)" class="admin-button-com middle" :class="form.sendType == 2 ? 'blue' : 'default'">自取</button>
            <button @click="setSendType(1)" class="admin-button-com middle" :class="form.sendType == 1 ? 'blue' : 'default'">配送</button>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-show="form.sendType == 1" >
            <view class="tui-title">运费</view>
            <input type="number" placeholder="请填写，留空免运费" v-model="form.sendCost" placeholder-class="tui-placeholder"/>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false">
            <view class="tui-title">结账方式</view>
            <button @click="form.hasPay = 2" class="admin-button-com middle" :class="form.hasPay == 2 ? 'blue' : 'default'">欠款</button>
            <button @tap="form.hasPay = 1" class="admin-button-com middle" :class="form.hasPay == 1 ? 'blue' : 'default'">已付款</button>
            <button @click="form.hasPay = 0" class="admin-button-com middle" :class="form.hasPay == 0 ? 'blue' : 'default'">扫码付</button>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :arrow="true" v-if="form.hasPay == 1">
            <div class="tui-title">收款方式</div>
            <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 />
              <div style="padding:6upx 0 6upx 0;">{{payWayList[payWayindex].name}}</div>
            </picker>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false">
            <view class="tui-title">打印小票</view>
            <button @click="form.needPrint = 1" class="admin-button-com middle" :class="form.needPrint == 1 ? 'blue' : 'default'">打印</button>
            <button @tap="form.needPrint = 2" class="admin-button-com middle" :class="form.needPrint == 2? 'blue' : 'default'">不打</button>
          </tui-list-cell>

          <!--
          <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="customInfo.discount && customInfo.discount < 1" >
            <view class="tui-title">优惠</view>
            <text style="color: red"></text>
          </tui-list-cell>
          -->

          <tui-list-cell class="line-cell" :hover="false" :arrow="false" >
            <view class="tui-title">
              <text>合计金额</text>  
            </view>
            <text style="color: #3385FF">{{parseFloat(finalPrice)}}</text>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false" >
            <view v-if="form.hasPay == 2" class="tui-title">应收金额</view>
            <view v-else class="tui-title">实收金额</view>
            <input style="border:1upx solid #eee;color:#3385FF;width:150upx;height:70upx;" type="digit" @focus="modifyPrice=''" v-model="modifyPrice" placeholder-class="tui-placeholder"/>
            <text v-if="modifyPrice > 0 && modifyPrice > finalPrice" style="font-size:25upx;margin-left:20upx;color:red;">人工资材费 ¥{{parseFloat((modifyPrice-finalPrice).toFixed(2))}}</text>
            <text v-if="modifyPrice > 0 && modifyPrice < finalPrice" style="font-size:25upx;margin-left:20upx;color:green;">优惠 ¥{{parseFloat((finalPrice-modifyPrice).toFixed(2))}}</text>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :arrow="true">
            <div class="tui-title">开单人</div>
            <picker mode="selector" :value="form.getStaffId" :range="staffList" range-key="name" @change="kdChange" class="tui-input" >
              <input v-model="form.getStaffId" name="getStaffId" type="text" hidden />
              <div style="padding:6upx 0 6upx 0;">{{form.getStaffName}}</div>
            </picker>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false">
            <view class="tui-title">备注</view>
						<textarea style="height: 100upx" v-model="form.remark" placeholder="选填" />
					</tui-list-cell>

          </view>
        </view>
      </form>
    </view>

    <view class="under-bar">
      <view class="price-view">
        <text class="price-title">
          <text>实际金额</text>
        </text>
        <text class="price-number">¥<text class="large">{{ modifyPrice }}</text></text>
      </view>
      <button class="admin-button-com blue big" @click="confirmSubmit">提交</button>
    </view>

    <view v-if="isScanEnv" @click="changeGet" style="width:125upx;height:125upx;display:flex;justify-content:center;align-items:center;font-size:60upx;
    background:#3385ff;color:white;z-index:9999;position:fixed;bottom:230upx;right:40upx;border-radius:60upx;">{{calc=='add'?'+':'-'}}</view>

    </view>
  </view>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import AppAvatarModule from "@/components/module/app-avatar";
import SimpleAddress from "@/components/plugin/simple-address";
import AppAreaSel from "@/components/app-area-sel";
import productMins from "@/mixins/product";
import appFormRadioBtn from "@/components/app-formRadio-btn";
import appAddressGroup from "@/components/app-address-group";
import appSendTime from "@/components/app-send-time";
import appFormSend from "@/components/app-form-send";
const formUtil = require("@/utils/formValidation.js");
import { createOrder, updateOrder } from "@/api/order/index";
import { getAllStaff } from "@/api/shop-admin"
import { mapActions, mapGetters } from "vuex";
import { getUserDet} from "@/api/member"
import ModalModule from "@/components/plugin/modal"
export default {
  name: "BillingAffirm",
  components: {
    TuiListCell,
    AppAvatarModule,
    SimpleAddress,
    AppAreaSel,
    appFormRadioBtn,
    appAddressGroup,
    appSendTime,
    appFormSend,
    ModalModule
  },
  mixins: [productMins],
  data () {
    return {
      autoLoad: false,
      isBilling: true,
      staffList:[],
			payWayList:[{name:"客服微信",id:0},{name:"现金",id:4},{name:"支付宝",id:1},{name:"银行卡",id:5}],
			payWayindex:0,
      form: {
        shopId: "",
        shopName: "",
        receiveProvince: "",
        receiveCity: "",
        receiveFloor: "",
        receiveAddress: "",
        receiveLong: "",
        receiveLat: "",
        sendType: 2,
        sendSide: "2",
        sendDate: "",
        sendTimeWant: "",
        sendCost: "",
        customId: "",
        product: "",
        remark:"",
        payWay:0,
        needPrint:1,//订单生成时打印订单1需要2不需要
        hasPay:0,
        getStaffName:''
      },
      showCustomer: false,
      customInfo:{discount:1},
      customData: { bigCount: 0, smallCount: 0, userPrice: 0 },
      isAddModel:false,
      checkStock:true,
			xjData:{},
			xjDataInfo:{},
      modifyPrice:'',
      isScanEnv:false,
      calc:'add'
    };
  },
  onLoad (option) {

    this.kdType = option.kdType

    if (!this.getMerchantInfo) {
      this.initMerchantInfo().then((data) => {
        uni.setNavigationBarTitle({ title: data.name, })
      });
    } else {
      uni.setNavigationBarTitle({ title: this.getMerchantInfo.name, })
    }

    //默认自取
    this.setSendType(2);

    if(Number(option.customId) > 0){
      this.form.customId = option.customId
      let that = this
      getUserDet({ id: option.customId }).then(res => {
        that.form.customName = res.data.name
        that.customInfo = res.data
        that.$forceUpdate()
      })

      //用于混入product的已选中花材！！！！！
      this.selectJobId = option.customId
      this.selectJobType = 'bill'

    }

    //默认欠款是首选项
    this.form.hasPay = 2
    // #ifdef APP-PLUS
    if(this.$util.isScanEnv()){
      this.isScanEnv = true
    }
	  //#endif

    this.listenScanItem()
  },
	onShow(){
		if(!this.$util.isEmpty(uni.getStorageSync("newClient"))){
			this.showCustomer = true;
		}

    //获取所有在职员工
    getAllStaff().then(res=>{
      if(res.code == 1){
        this.staffList = res.data.list
        if(!this.$util.isEmpty(this.staffList)){
          for(const ele of this.staffList){
            if(this.getLoginInfo.shopAdminId == ele.id){
              this.form.getStaffId = ele.id
              this.form.getStaffName = ele.name
            }
          }
        }
      }
    })

	},
	onUnload(){
			uni.removeStorageSync('newClient')
      uni.$off('listenGetScanCode')
	},
  computed: {
    ...mapGetters(["getMerchantInfo", "getLoginInfo"]),
    finalPrice(){
      let totalPrice = this.allPrice.toFixed(2)
      let finalPrice = (Number(totalPrice) + Number(this.form.sendCost)).toFixed(2)
      let currentPrice = parseFloat(finalPrice)
      this.modifyPrice = currentPrice 
      return currentPrice
    }
  },
  methods: {
    ...mapActions(["initMerchantInfo"]),
    changeGet(){
      this.calc = this.calc == 'add' ? 'sub' : 'add'
    },
		reduceItemFn(item) {
      this.kdType = 'HIT';
			this.replaceItemFn(item,0,'sub')
		},
		addItemFn (item) {
      this.kdType = 'HIT';
			this.replaceItemFn(item,0,'add')
		},
    init () {

    },
    kdChange(e){
			let index = e.detail.value
      if(!this.$util.isEmpty(this.staffList)){
        if(this.staffList[index]){
          this.form.getStaffName = this.staffList[index].name
          this.form.getStaffId = this.staffList[index].id
        }
      }
    },
		payWayChange(e){
			let index = e.detail.value
			this.payWayindex = index
      this.form.payWay = this.payWayList[index].id
		},
    setPayWay(payWay){
      this.form.payWay = payWay
    },
    setSendType (type) {
      this.form.sendType = type;
      if (type === 2) {
        this.form.sendCost = "";
      }
    },
    changeCustomerFn (info) {
      const product = this.selectList.map((ele) => {
        return {
          productId: ele.id,
          bigNum: ele.bigCount,
          smallNum: ele.smallCount,
          classId: ele.classId,
          itemId: ele.itemId,
        };
      });
      let params = {
        customId: info.id,
        product: JSON.stringify(product),
        province: info.province,
        city: info.city,
        address: info.address,
        floor: info.floor,
        long: info.long,
        lat: info.lat,
      };
      this.form.sendCost = '';
      this.form.customId = info.id;
      this.form.customName = info.name;
    },
    confirmSubmit () {
      let self = this;
        let rules = [
          {
            name: "customId",
            rule: ["required"],
            msg: ["请选择客户"],
          },
        ];
        let hasError = formUtil.validation(this.form, rules);
        if (hasError) {
          this.$msg(hasError);
          return false;
        }
        let name = '确认提交'
        if(this.form.hasPay == 0){
          name = '确认待付款？'
        }else if(this.form.hasPay == 1){
          name = '确认已付款？？？'
        }else if(this.form.hasPay == 2){
          name = '确认记欠款？？'
        }else{
          name = '确认提交'
        }
        self.$util.confirmModal({content:name},() => {
          self.formSubmit()
        })
    },
    async formSubmit () {
      let formData = this.form;
      const product = this.selectList.map((ele) => {
        return {productId: ele.id, bigNum: ele.bigCount, smallNum: ele.smallCount, classId: ele.classId, itemId: ele.itemId, price: ele.userPrice}
      });
      formData.product = JSON.stringify(product);
      if (!this.getMerchantInfo) {
        await this.initMerchantInfo();
      }
      formData.shopId = this.getMerchantInfo.id;
      if (formData.sendType == 2) {
        formData.sendCost = "";
      }
      if(Number(this.modifyPrice) <= 0){
        this.$msg('收款金额必须大于0');
        return false
      }
      let Fn = createOrder
      let params = {...formData,modifyPrice: this.modifyPrice,newVersion:1};
      if(this.option.orderId && this.option.orderId > 0){
        Fn = updateOrder
        params = {...params,id:this.option.orderId}
      }
      Fn(params).then((res) => {
        if(res.code == 1){
          this.removeFromSaveDirect()
          const {data: { id, orderSn,actPrice }} = res;
          if(this.form.hasPay == 0){
            this.$util.pageTo({ url: '/admin/billing/toPay',type:2,query: {orderId:id,orderSn:orderSn,actPrice:actPrice}})
          }else{
            this.$util.pageTo({ url: '/admin/billing/result',type:2,query: {orderId:id,orderSn:orderSn,title:'开单成功'}})
          }
        }
      })
    },
    gobackEvent () {
      this.$util.pageTo({url: '/admin/billing/index',type:2,query: {customId: this.option.customId}})
    },
    pageToItemList() {
      this.$util.pageTo({url: '/admin/billing/index',type:2,query: {customId: this.option.customId}})
    }
  }
};
</script>

<style lang="scss" scoped>
.admin-button-com {
  margin-right: 30upx;
}
.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;
              }
            }

& .open-bx {
				align-items: center;
				& .iconfont {
					color: #3385ff;
					font-size: 50upx;
				}

				.position{
					display: block;
					width: 70upx;
					text-align: center;
				}
				.iconcachu {
					margin: 0 6upx 0 20upx;
					color: #ccc;
					&.edit {
						color: #3385ff;
					}
				}
				& > .num {
					display: inline-block;
					width: 120upx;
					height:45upx;
					text-align:center;
					margin: 0 8upx;
					color: #868686;
					border-radius: 22upx;
					background-color: #f5f5f5;
					padding: 3upx 0;
					font-size: 25upx;
				}
				.change-input {
					width: 164upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					background: #ffffff;
					border: 1upx solid #dddddd;
					border-radius: 4upx;
					font-size: 25upx;
				}
				.btn-box{
					width: 100upx;
					height: 60upx;
					line-height: 60upx;
					color: #ffffff;
					background: #3385ff;
					text-align: center;
					border-radius: 10upx;
				}
			}

          }
        }
      }
      .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;
        }
      }
      // .tui-placeholder,
      // .tui-input {
      // 	padding-right: 30upx;
      // 	width: 100%;
      // 	text-align: right;
      // }
    }
  }
  .under-bar {
    z-index:99999;
    display: flex;
    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;
    }
  }
	.select-cmd_bx {
		& .kc {
			color: #999999;
			font-size: 28upx;
			font-weight: 400;
			margin-bottom: 40upx;
			text-align: center;
			margin-top: 30upx;
			.unit_price{
				padding-right:25upx;
			}
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom: 40upx;
			& > input {
				width: 212upx;
				height: 80upx;
				border: 1upx solid #dddddd;
				border-radius: 4upx;
				text-align: center;
				margin-right: 24upx;
				font-size: 40upx;
			}
		}
	}
}
</style>