front-end/hdApp/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.name||'' }}
                        <text v-if="item.variety && item.variety ==1" class="show-color"></text>
                      </text>
                      <text class="item-price">
                        <text class="unit">¥</text>
                        <text class="price">{{ parseFloat(item.userPrice)||0 }}</text>
                      </text>
                    </view>

                    <view style="text-align:right;position: relative;">

                      <text style="position: absolute;right:300upx;top:2upx;font-size:28upx;color:green;font-weight:bold;" v-if="item.bigCount > 0">¥{{ parseFloat((Number(item.bigCount)*Number(item.userPrice)).toFixed(2)) }}</text>
                      <text style="position: absolute;right:300upx;top:2upx;font-size:28upx;color:green;font-weight:bold;" v-else>¥{{ parseFloat((Number(item.smallCount)*Number(item.userPrice)).toFixed(2)) }}</text>

                      <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" style="font-size:32upx;font-weight:bold;"><text class="iconfont icongouwuche" style="margin-right:5upx;"></text>返回修改</view>
              <view class="describe-view">
                <text>合计 ¥{{ allPrice }}</text>
              </view>
            </view>
            <view class="summary-bar">
              <view class="operate-view" v-if="isScanEnv"><text class="iconfont iconzeng"></text>手动添加花材</view>
              <view class="operate-view" v-if="isScanEnv == false"><text> </text></view>
              <view class="describe-view">
                <text>{{ selectList.length }}种</text>
                <text v-if="Number(allCount.bigLength)>0">，{{allCount.bigLength?parseFloat(allCount.bigLength):0}}扎</text>
                <text v-if="Number(allCount.smallLength)>0">，{{allCount.smallLength?parseFloat(allCount.smallLength):0}}支</text>
                <text v-if="Number(allCount.weight)>0">，{{allCount.weight?parseFloat(allCount.weight):0}}公斤</text>
              </view>
            </view>
          </view>
        </view>

        <modal-module :show="isAddModel" @cancel="addItemModelHidden" @click="confirmAddItemModel" :title="customData.name" 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" v-if="customData.property==1 || (customData.property==0 && customData.priceType==1)"> ¥{{ parseFloat(customData.price) }}</text>
                <text class="unit_price" v-else>--</text>
              </view>

              <view class="num_bx">
                <input style="width: 430upx" v-model="customData.userPrice" @focus="customData.userPrice = null" type="number" placeholder="单价" :disabled="false" />
                <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 -->

                <!-- 只有花材 property == 1 才给显示切换功能 -->
                <image @click="switchGlobalUnitType" :src="`${constant.imgUrl}/icon/switch/switch128.png`" v-if="customData.property == 1"
                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>

          <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" v-if="Number(customInfo.balance)>0">
            <view class="tui-title">余额</view>
            <view class="tui-input" style="color:#3385FF;font-weight:bold;">
              ¥{{ parseFloat(customInfo.balance) }}
            </view>
          </tui-list-cell>

					<tui-list-cell class="line-cell" :hover="false" :arrow="false">
						<view class="tui-title">收款方式</view>
            <button style="margin-right:16upx;height:70upx;line-height:46upx;" @click="form.hasPay = 0" class="admin-button-com mini-btn" :class="form.hasPay == 0 ? 'blue' : 'default'">扫码</button>
            <button style="margin-right:16upx;height:70upx;line-height:46upx;" @click="form.hasPay = 4" class="admin-button-com mini-btn" :class="form.hasPay == 4 ? 'blue' : 'default'">余额</button>
            <button style="margin-right:16upx;height:70upx;line-height:46upx;" @tap="form.hasPay = 1" class="admin-button-com mini-btn" :class="form.hasPay == 1 ? 'blue' : 'default'">线下</button>
            <button style="margin-right:0upx;height:70upx;line-height:46upx;" @click="form.hasPay = 2" class="admin-button-com mini-btn" :class="form.hasPay == 2 ? 'blue' : 'default'">赊账</button>
					</tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="true" v-if="form.hasPay == 1">
            <view class="tui-title">线下渠道</view>
            <picker mode="selector" :value="payWayindex" :range="payWayList" range-key="name" @change="payWayChange" class="tui-input">
              <view class="uni-input" v-if="form.payWay == 0">线下微信（收款码）</view>
              <view class="uni-input" v-else-if="form.payWay == 1">线下支付宝（收款码）</view>
              <view class="uni-input" v-else-if="form.payWay == 4">现金</view>
              <view class="uni-input" v-else-if="form.payWay == 5">银行卡</view>
              <view class="uni-input" v-else style="color:#CCCCCC;">请选择</view>
            </picker>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false">
            <view class="tui-title">配送方式</view>
            <button style="margin-right:16upx;height:70upx;line-height:46upx;" @tap="setSendType(1)" class="admin-button-com mini-btn" :class="form.sendType == 1 ? 'blue' : 'default'">自取</button>
            <button style="margin-right:16upx;height:70upx;line-height:46upx;" @tap="setSendType(0)" class="admin-button-com mini-btn" :class="form.sendType == 0 ? 'blue' : 'default'">配送</button>
            <button style="margin-right:16upx;height:70upx;line-height:46upx;" @click="setSendType(2)" class="admin-button-com mini-btn" :class="form.sendType == 2 ? 'blue' : 'default'">跑腿</button>
            <button style="margin-right:0upx;height:70upx;line-height:46upx;" @click="setSendType(3)" class="admin-button-com mini-btn" :class="form.sendType == 3 ? 'blue' : 'default'">物流</button>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="form.sendType == 1">
            <view class="tui-title">取货状态</view>
            <button @tap="form.getGoods = 1" class="admin-button-com middle" style="width:140upx;" :class="form.getGoods == 1? 'blue' : 'default'">已取货</button>
            <button @click="form.getGoods = 0" class="admin-button-com middle" style="width:140upx;" :class="form.getGoods == 0 ? 'blue' : 'default'">未取货</button>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="form.sendType == 2">
            <view class="tui-title">运费</view>
            <input type="digit" 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 @tap="form.needPrint = 2" class="admin-button-com middle" style="width:140upx;" :class="form.needPrint == 2? 'blue' : 'default'">不打印</button>
            <button @click="form.needPrint = 1" class="admin-button-com middle" style="width:140upx;" :class="form.needPrint == 1 ? 'blue' : 'default'">打印</button>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false" :arrow="false" >
            <view class="tui-title">
              <text>合计金额</text>  
            </view>
            <text style="color: #3385FF;width:170upx;">¥{{parseFloat(finalPrice)}}</text>
            <button @tap="showDiscount()" class="admin-button-com middle default" style="width:140upx;">打折</button>
            <text v-if="discountValue>0 && discountValue<1">{{ Number(discountValue)*10 }}折</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-if="form.hasPay == 3" class="tui-title">余额扣减</view>
            <view v-else class="tui-title">{{form.forward==0?'实收':'实付'}}金额</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" :hover="false" :arrow="true">
            <view class="tui-title" v-if="form.sendType == 1">取花日期</view>
					<view class="tui-title" v-else>配送日期</view>
					<view class="uni-input" v-if="form.reachDate==''" @click="bindReachDateChange">
            <view style="width:410upx;font-size:32upx;color:#CCCCCC;">今天</view>
          </view>
					<view class="uni-input" @click="bindReachDateChange">
            <view style="width:410upx;font-size:32upx;">{{form.reachDate}}</view>
          </view>
				</tui-list-cell>

				<tui-list-cell class="line-cell" :hover="false" :arrow="true">
            <view class="tui-title" v-if="form.sendType == 1">取花时间</view>
					<view class="tui-title" v-else>配送时间</view>
					<view class="uni-input" style="width:450upx;font-size:32upx;" @click="openTimePopup">{{form.reachPeriod}}</view>
				</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;" v-if="form.getStaffName!=''">{{form.getStaffName}}</div>
              <div v-else style="padding:6upx 0 6upx 0;color:#CCCCCC;">自己</div>
            </picker>
          </tui-list-cell>

					<tui-list-cell class="line-cell" :hover="false" :arrow="true">
						<view class="tui-title">账单日期</view>
            <view class="uni-input" v-if="form.historyDate==''" @click="bindHistoryDateChange">
              <view  style="width:410upx;font-size:32upx;color:#CCCCCC;">今天</view>
            </view>
            <view class="uni-input" @click="bindHistoryDateChange">
              <view style="width:410upx;font-size:32upx;">{{form.historyDate}}</view>
            </view>
					</tui-list-cell>

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

          <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="reduceStock == 0">
            <view class="tui-title">通知制作</view>
            <button @tap="form.needWork = 0;" class="admin-button-com middle" style="width:170upx;" :class="form.needWork == 0? 'blue' : 'default'">不要</button>
            <button @click="form.needWork = 1;" class="admin-button-com middle" style="width:170upx;" :class="form.needWork == 1 ? 'blue' : 'default'">需要</button>
          </tui-list-cell>

          <!-- 如果是扣除库存方式开单，不显示售后付款选项 -->
          <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="reduceStock == 0">
            <view class="tui-title">订单类型</view>
            <button @tap="form.forward = 0;" class="admin-button-com middle" style="width:170upx;" :class="form.forward == 0? 'blue' : 'default'">收入订单</button>
            <button @click="form.forward = 1;" class="admin-button-com middle" style="width:170upx;" :class="form.forward == 1 ? 'blue' : 'default'">支出订单</button>
          </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">{{form.forward==0?'':'-'}}¥{{ modifyPrice }}</text></text>
      </view>
      <!-- <text style="font-size:30upx;right:100upx;">当前在<text style="font-weight:bold;color:red;margin-left:5upx;font-size:32upx;">{{currentShop.shopName}}</text></text> -->
      <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>

		<uni-popup ref="diffPriceRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
			<view style="display:flex;padding:40upx 20upx 20upx 20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">

        <block v-if="!$util.isEmpty(diffPriceList)">
          <view  v-for="(item, index) in diffPriceList" :key="index" 
          style="font-size:32upx;color:red;font-weight:bold;margin-top:10upx;">
            <text>{{item.name}}</text>
            <text style="margin-left:25upx;">系统售价 ¥{{item.price?parseFloat(item.price):0}}</text>
            <text style="margin-left:25upx;">您开价 ¥{{item.kdPrice?parseFloat(item.kdPrice):0}}</text>
          </view>
        </block>
        <view style="margin-top:20upx;font-size:28upx;font-weight:bold;">
          <view>以上花材，开单价和系统售价不一样，确认提交吗？</view>
        </view>
        <view style="text-align:center;margin-top:30upx;width:100%;">
          <button class="admin-button-com big default" @click="returnCheck()">返回修改</button>
          <button style="margin-left:20upx;" @click="forceCommit()" class="admin-button-com big blue">确认提交</button>
        </view>
			</view>
		</uni-popup>

    <!-- 配送时间选择弹框 -->
    <uni-popup ref="timePopup" type="bottom" background-color="#fff">
      <view class="time-picker-popup">
        <view class="popup-header">
          <text class="popup-title">选择配送时间</text>
          <text class="popup-close" @click="closeTimePopup">×</text>
        </view>
        
        <view class="time-sections">
          <!-- 小时选择 -->
          <view class="time-section">
            <view class="section-title">小时</view>
            <view class="hours-wrapper">
              <scroll-view 
                scroll-y="true" 
                class="hours-scroll"
                enhanced="true"
                show-scrollbar="true"
              >
                <view class="hours-buttons">
                  <button 
                    v-for="(hour, index) in timeOptions[0]" 
                    :key="index"
                    class="time-button" 
                    :class="{ active: selectedHour == hour }"
                    @click="selectedHour = hour"
                  >{{ hour }}</button>
                </view>
              </scroll-view>
            </view>
          </view>
          
          <!-- 分钟选择 -->
          <view class="time-section">
            <view class="section-title">分钟</view>
            <view class="minutes-wrapper">
              <scroll-view 
                scroll-y="true" 
                class="minutes-scroll"
                enhanced="true"
                show-scrollbar="true"
              >
                <view class="minutes-buttons">
                  <button 
                    v-for="(minute, index) in timeOptions[1]" 
                    :key="index"
                    class="time-button" 
                    :class="{ active: selectedMinute == minute }"
                    @click="selectedMinute = minute"
                  >{{ minute }}</button>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="popup-footer">
          <button class="footer-button default" @click="closeTimePopup">取消</button>
          <button class="footer-button blue" @click="confirmTime">确认</button>
        </view>
      </view>
    </uni-popup>

		<uni-popup ref="discountRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
      <view style="display:flex;padding:20upx;min-height:25vh;justify-content: space-between;align-items:center;flex-wrap:wrap;">
        <text v-for="(item, index) in discountList" :key="index" @click="setDiscount(item.value)" 
        style="margin-left:25upx;border:1upx solid #999999;width:100upx;height:100upx;border-radius:20upx;justify-content:center;align-items:center;display:flex;">
          {{item.name}}
        </text>
       </view>
		</uni-popup>

		<uni-popup ref="remindForwardRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
      <view class="forward-popup-content">
        <view class="popup-title">
          确认售后付款单
        </view>
        
        <view class="option-group">
          <view class="option-label">退货方式</view>
          <view class="button-group">
            <button @click="form.forwardStock = 1" class="admin-button-com big" :class="form.forwardStock == 1 ? 'blue' : 'default'">货不退回</button>
            <button @tap="form.forwardStock = 0" class="admin-button-com big" :class="form.forwardStock == 0? 'blue' : 'default'">货退回来</button>
          </view>
        </view>
        
        <view class="option-group">
           <view class="option-label">线下付款方式</view>
                       <view class="button-group">
              <button @tap="forwardPayWay = 0" class="admin-button-com middle" :class="forwardPayWay == 0? 'blue' : 'default'">微信</button>
              <button @click="forwardPayWay = 1" class="admin-button-com middle" :class="forwardPayWay == 1 ? 'blue' : 'default'">支付宝</button>
              <button @tap="forwardPayWay = 4" class="admin-button-com middle" :class="forwardPayWay == 4? 'blue' : 'default'">现金</button>
              <button @click="forwardPayWay = 5" class="admin-button-com middle" :class="forwardPayWay == 5 ? 'blue' : 'default'">银行卡</button>
            </view>
            <view class="payment-notice">
              请线下转账给客户
            </view>
         </view>
        
        <view class="popup-footer">
          <button class="admin-button-com big default" @click="cancelForward()">取消</button>
          <button class="admin-button-com big blue" @click="confirmForward()">确认</button>
        </view>
      </view>
		</uni-popup>

    <!-- 账单日期选择器蒙板 -->
    <view v-if="showPicker" class="date-picker-mask" @click="showPicker = false"></view>
    
    <mx-date-picker :show="showPicker" format="yyyy-mm-dd" type="date" :value="defaultPickerDate" :show-tips="true" @confirm="confirmPicker" @cancel="showPicker = false" />

    <!-- 配送日期选择器蒙板 -->
    <view v-if="reachDatePickerShow" class="date-picker-mask" @click="reachDatePickerShow = false"></view>

    <mx-date-picker :show="reachDatePickerShow" format="yyyy-mm-dd" type="date" :value="reachDatePickerValue" :show-tips="true" @confirm="confirmReachDatePicker" @cancel="reachDatePickerShow = false" />

    </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 } from "@/api/order/index";
import { getAllStaff } from "@/api/shop-admin"
import { mapActions, mapGetters } from "vuex";
import { getCustomInfo} from "@/api/custom"
import ModalModule from "@/components/plugin/modal"
import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
export default {
  name: "affirm",
  components: {
    TuiListCell,
    AppAvatarModule,
    SimpleAddress,
    AppAreaSel,
    appFormRadioBtn,
    appAddressGroup,
    appSendTime,
    appFormSend,
    ModalModule,
    MxDatePicker
  },
  mixins: [productMins],
  data () {
    return {
			defaultPickerDate:'',
			showPicker: false,
			reachDatePickerShow: false,
			reachDatePickerValue: '',
      discountList:[{name:'1折',value:0.1},{name:'2折',value:0.2},{name:'3折',value:0.3},{name:'4折',value:0.4},{name:'5折',value:0.5},{name:'6折',value:0.6},{name:'7折',value:0.7},{name:'8折',value:0.8},{name:'9折',value:0.9},{name:'不打折',value:1}],
      discountValue:0,
      autoLoad: false,
      staffList:[],
			payWayList:[{name:"线下微信",id:0},{name:"线下支付宝",id:1},{name:"现金",id:4},{name:"银行卡",id:5}],
			payWayindex:0,
      form: {
        shopId: "",
        shopName: "",
        receiveProvince: "",
        receiveCity: "",
        receiveFloor: "",
        receiveAddress: "",
        receiveLong: "",
        receiveLat: "",
        sendType: 1,
        sendSide: "2",
        sendDate: "",
        reachDate: "",
		    reachPeriod: "12:00",
        historyDate:"",
        sendCost: "",
        customId: "",
        packCost:"",
        product: "",
        remark:"",
        payWay:0,
        needPrint:2,
        getGoods:1,
        hasPay:0,
        getStaffName:'',
        dealPrice:0,
        forward:0,
        needWork:0,
        forwardStock:1,
        fromType:1//门店来的订单
      },
      showCustomer: false,
      customInfo:{discount:1,balance:0},
      customData: { bigCount: 0, smallCount: 0, userPrice: 0 },
      isAddModel:false,
      checkStock:true,
			xjData:{},
			xjDataInfo:{},
      modifyPrice:'',
      isScanEnv:false,
      calc:'add',
      diffPriceList:[],
      currentShop:{default:0},
      forwardPayWay:0,//不影响原有的form.payWay方式，重新定义一个
      reduceStock:0,
      timeOptions: [['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],['00', '05', '10','15','20','25','30','35','40','45','50','55']],
      selectedHour: '12', // 选中的小时
      selectedMinute: '00', // 选中的分钟
    };
  },
  onLoad (option) {


    this.kdType = option.kdType

    let that = this
    this.initMerchantInfo().then((data) => {
        uni.setNavigationBarTitle({ title: data.name })
        that.currentShop = data.shopInfo
    })

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

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

    }

    //默认欠款是首选项
    this.form.hasPay = 0
    // 初始化支付方式索引
    this.payWayindex = 0
    // #ifdef APP-PLUS
    if(this.$util.isScanEnv()){
      this.isScanEnv = true
    }
	  //#endif

    //如果是扣除库存方式开单，不显示售后付款选项
    this.reduceStock = this.option.reduceStock?this.option.reduceStock:0
    //如果扣除库存方法，付款方式默认选择赊账，这样方便提交
    if(this.reduceStock == 1){
      this.form.hasPay = 2
    }

  },
	onShow(){

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

    //获取所有在职员工
    getAllStaff().then(res=>{
      if(res.code == 1){
        this.staffList = res.data.list
      }
    })

	},
	onUnload(){
			uni.removeStorageSync('newClient')
      uni.$off('listenGetScanCode')
	},
  computed: {
    ...mapGetters(["getMerchantInfo","getMyShopInfo", "getLoginInfo"]),
    finalPrice(){
      let totalPrice = this.allPrice.toFixed(2)
      let finalPrice = Number(totalPrice)
      if(this.form.sendType == 2){
        finalPrice = Number(finalPrice) + Number(this.form.sendCost)
      }
      finalPrice = Number(finalPrice).toFixed(2)
      let currentPrice = parseFloat(finalPrice)
      this.modifyPrice = currentPrice 
      return currentPrice
    },
    labourCost(){
      let cost = 0
      if(Number(this.modifyPrice)>Number(this.finalPrice)){
        cost = Number(this.modifyPrice) - Number(this.finalPrice)
        cost = Number(cost).toFixed(2)
      }
      return cost
    }
  },
  methods: {
    ...mapActions(["initMerchantInfo"]),
    setSendType (type) {
      this.form.sendType = type
      if (type !== 2) {
        this.form.sendCost = ""
      }
    },
    bindHistoryDateChange(){
			this.showPicker = true
    },
		confirmPicker(e) {
			this.form.historyDate = e.value
      this.showPicker = false
		},
		bindReachDateChange(){
			this.reachDatePickerShow = true
			this.reachDatePickerValue = this.form.reachDate
		},
		confirmReachDatePicker(e) {
			this.form.reachDate = e.value
			this.reachDatePickerShow = false
		},
		bindDateChange(e){
			let date = e.detail.value
			this.form.reachDate = date
		},
		bindTimeChange(event){
			let val = event.detail.value
			let before = Number(val[0])
			let after = Number(val[1])
			let timeOptions = this.timeOptions
			this.form.reachPeriod = timeOptions[0][before]+':'+timeOptions[1][after]
		},
		openTimePopup() {
			// 初始化为当前选中的时间
			const [hour, minute] = this.form.reachPeriod.split(':')
			this.selectedHour = hour
			this.selectedMinute = minute
			this.$refs.timePopup.open()
		},
		// 关闭时间选择弹框
		closeTimePopup() {
			this.$refs.timePopup.close()
		},
		// 确认时间选择
		confirmTime() {
			this.form.reachPeriod = `${this.selectedHour}:${this.selectedMinute}`
			this.closeTimePopup()
		},
    showDiscount(){
      this.$refs.discountRef.open('center')
    },
    setDiscount(num){
      this.discountValue = Number(num)
      let price = Number(this.finalPrice)*Number(num)
      price = parseFloat(price.toFixed(2))
      this.modifyPrice = price
      this.$refs.discountRef.close()
    },
    beginScan(){
      console.log('beginScan')
      let that = this
      uni.scanCode({
        scanType: ['barCode'],
        success: function (res) {
          that.takeItem(res.result)
        }
      })
    },
    changeGet(){
      this.calc = this.calc == 'add' ? 'sub' : 'add'
    },
		reduceItemFn(item) {
			if(item && item.variety == 1 && this.selectJobType == 'bill'){
				this.$msg('多颜色花材，请返回修改')
				return false
			}
      this.kdType = 'HIT';
			this.replaceItemFn(item,0,'sub')
		},
		addItemFn (item) {
			if(item && item.variety == 1 && this.selectJobType == 'bill'){
				this.$msg('多颜色花材，请返回修改')
				return false
			}
      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
		},
		// 根据支付方式ID更新索引
		updatePayWayIndex(){
			const index = this.payWayList.findIndex(item => item.id === this.form.payWay)
			this.payWayindex = index >= 0 ? index : 0
		},
    setPayWay(payWay){
      this.form.payWay = payWay
      this.updatePayWayIndex()
    },
    forceCommit(){
      this.form.dealPrice = 1
      this.formSubmit()
    },
    showForward(){
      this.$refs.remindForwardRef.open('center')
    },
    cancelForward(){
      this.$refs.remindForwardRef.close()
    },
    confirmForward(){
      //售后付款单，只能走线下模式
      this.form.hasPay = 1
      this.form.payWay = this.forwardPayWay
      this.submitOrder()
    },
    confirmSubmit(){
      if(this.form.forward == 1){
        this.showForward()  
      }else{
        if(Number(this.customInfo.balance)>Number(this.modifyPrice) && this.form.hasPay!=4){
          //客户余额充值，只能使用余额支付
          this.$util.confirmModal({content:'客户余额充足，请使用余额支付'},() => {
            this.form.hasPay = 4
            this.submitOrder()
          })
        }else{
          this.submitOrder()
        }
      }
    },
    submitOrder() {
      let self = this;
      let name = '确认提交'
      if(this.form.hasPay == 0){
        name = '确认扫码付？'
      }else if(this.form.hasPay == 1){
        name = '确认线下付款？'
        if(this.form.forward == 1){
          name = '确认开售后付款单？'
        }
      }else if(this.form.hasPay == 2){
        name = '确认赊账？'
      }else if(this.form.hasPay == 4){
        name = '确认余额支付？'
      }else{
        name = '确认提交'
      }
      self.$util.confirmModal({content:name},() => {
        self.formSubmit()
      })
    },
    async formSubmit () {
      let that = this
      let formData = this.form;
      const product = this.selectList.map((ele) => {
        let unitType = Number(ele.bigCount)>0 ? 0 : 1
        let num = Number(ele.bigCount)>0 ? Number(ele.bigCount) : Number(ele.smallCount)
        let unitPrice = ele.userPrice ? ele.userPrice : 0
        return {productId: ele.id, bigNum: ele.bigCount, smallNum: ele.smallCount, classId: ele.classId,
          itemId: ele.itemId, unitPrice:unitPrice,remark:ele.remark,property:ele.property,unitType:unitType,num:num}
      });
      formData.product = JSON.stringify(product);
      if (!this.getMerchantInfo) {
        await this.initMerchantInfo();
      }
      formData.shopId = this.getMerchantInfo.id;
      if(Number(this.modifyPrice) <= 0){
        this.$msg('收款金额必须大于0');
        return false
      }

      let params = {...formData,modifyPrice: this.modifyPrice,labourCost:this.labourCost};

      //多颜色
      let xj = uni.getStorageSync("xj"+this.option.customId)
      //orderType 开单类型，1商品开单 2花材开单
      params = {...params,xj:JSON.stringify(xj),orderType:2}

      //扣减库存
      let orderId = this.option.orderId  ? this.option.orderId : 0
			let book = this.option.book ? this.option.book : 0
			let reduceStock = this.option.reduceStock?this.option.reduceStock:0
      params = {...params,orderId:orderId,book:book,reduceStock:reduceStock,version:3}
console.log(params)
      uni.showLoading({mask:true})
      createOrder(params).then((res) => {
        uni.hideLoading()
        if(res.code == 1){
          if(res.data.respondType && res.data.respondType == 'priceError'){
            that.diffPriceList = res.data.diff
            that.$refs.diffPriceRef.open('bottom')
            return
          }

          this.removeFromSaveDirect()

          if(res.data && res.data.id){
            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{
              if(this.form.forward == 1){
                this.$util.pageTo({ url: '/admin/refund/shPayRemind?orderId='+id,type:2})
              }else{
                this.$util.pageTo({ url: '/admin/billing/result?orderId='+id,type:2})
              }
            }
          }else{
            this.$msg('提交失败')
          }

        }
      })
    },
    returnCheck(){
      this.$refs.diffPriceRef.close()
    },
    gobackEvent () {
      let customId = this.option.customId ? this.option.customId : 0
      let customName = this.option.customName ? this.option.customName : ''
      let reduceStock = this.option.reduceStock?this.option.reduceStock:0
      let orderId = this.option.orderId  ? this.option.orderId : 0
      let book = this.option.book ? this.option.book : 0
      let fromType = this.option.fromType ? this.option.fromType : 'item'
      if(fromType == 'item'){
        this.$util.pageTo({url: '/admin/billing/index2?customId='+customId+'&customName='+customName+'&orderId='+orderId+'&book='+book+'&reduceStock='+reduceStock,type:2})
      }else{
        this.$util.pageTo({url: '/admin/billing/hs?customId='+customId+'&customName='+customName+'&orderId='+orderId+'&book='+book+'&reduceStock='+reduceStock,type:2})
      }
      
    }
  }
};
</script>

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



.payment-buttons {
  display: flex;
  flex-direction: column;
  gap: 20upx;
  width: 100%;
  
  .button-row {
    display: flex;
    justify-content: flex-start;
    gap: 30upx;
    
    .admin-button-com {
      flex: 0 0 180upx;
      margin-right: 0;
    }
  }
}
.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: #333333;
                font-size: 28upx;
                font-weight:bold;
                .show-color{
                  display:inline-block;
                  width:25upx;
                  height:25upx;
                  background-color:rgb(9, 199, 9);
                  border-radius:15upx;
                  border:none;
                  margin-left:16upx;
                }
              }
              .item-price {
                color: #333;
                font-size: 22upx;
                .price {
                  font-size: 32upx;
                  font-weight: bold;
                }
              }

            }

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


				& > .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;
				}

			}

          }
        }
      }
      .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: 28upx;
          font-weight:bold;
          .price {
            margin-left:8upx;
            color:red;
          }
        }
      }
    }

    .module-com {
      background-color: #fff;
      margin-bottom: 20upx;
      border-radius: 10upx;
      overflow: hidden;


    }
  }
  .under-bar {
    z-index:99999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10upx;
    position: fixed;
    bottom:0;
    @media screen and (max-width: 1100px) {
      width: 100%;
    }
    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 8upx;
        color: #ff2842;
        .large {
          font-size:34upx;
          font-weight:bold;
        }
      }
    }
    .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;
			}
		}
	}
}
.class-popup-style{
	z-index:99999;
}

.forward-popup-content {
  padding: 40upx;
  min-width: 700upx;
  
  .popup-title {
    font-size: 34upx;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 40upx;
    line-height: 1.4;
  }
  
  .option-group {
    margin-bottom: 40upx;
    
    .option-label {
      font-size: 28upx;
      color: #666;
      margin-bottom: 20upx;
      font-weight: 500;
    }
    
      .button-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15upx;
        
        .admin-button-com {
          margin-right: 0;
          flex: 1;
          min-width: 140upx;
          
          &:first-child {
            margin-left: 0;
          }
          
          &:last-child {
            margin-right: 0;
                   }
       }

     }
     
     .payment-notice {
       text-align: center;
       font-size: 34upx;
       margin-top: 30upx;
       padding: 15upx 20upx;
       background-color: #f5f5f5;
       border-radius: 8upx;
     }
   }
   
      .popup-footer {
     display: flex;
     justify-content: center;
     gap: 60upx;
     margin-top: 40upx;
     padding-top: 30upx;
     border-top: 1upx solid #eee;
     
     .admin-button-com {
       margin-right: 0;
       min-width: 160upx;
     }
   }
}
.remark-class{
  z-index:0;
  color:#CCCCCC;
}
.warning-price{
	color:red;
}

/* 日期选择器蒙板 */
.date-picker-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 时间选择弹窗样式 */
.time-picker-popup {
	width: 100%;
	background: #fff;
	border-radius: 20upx 20upx 0 0;
	display: flex;
	flex-direction: column;
	max-height: 99vh;
	padding:0 0 110upx 0;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
	padding: 30upx 20upx 20upx 20upx;
	border-bottom: 2upx solid #f0f2f6;
	flex-shrink: 0;
}

.popup-title {
	font-size: 36upx;
	color: #333;
	font-weight: bold;
}

.popup-close {
	font-size: 48upx;
	color: #999;
	line-height: 1;
	cursor: pointer;
}

.time-sections {
	display: flex;
	flex-direction: column;
	gap: 20upx;
	margin-bottom: 0;
	flex: 1;
	padding: 20upx 20upx 0 20upx;
	overflow: hidden;
}

.time-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 200upx;
	
	.section-title {
		font-size: 28upx;
		color: #333;
		font-weight: 600;
		margin-bottom: 12upx;
		text-align: left;
	}
}

.hours-wrapper {
	width: 100%;
	flex: 1;
	background: #f8f9fa;
	border: 2upx solid #e9ecef;
	border-radius: 8upx;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 150upx;
}

.minutes-wrapper {
	width: 100%;
	flex: 1;
	background: #f8f9fa;
	border: 2upx solid #e9ecef;
	border-radius: 8upx;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 150upx;
}

.hours-scroll,
.minutes-scroll {
	width: 100%;
	height: 100%;
	padding: 8upx;
	box-sizing: border-box;
}

.hours-buttons,
.minutes-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8upx;
	justify-content: flex-start;
}

.time-button {
	width: calc(25% - 6upx);
	height: 73upx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 2upx solid #e9ecef;
	border-radius: 6upx;
	font-size: 26upx;
	color: #666;
	box-sizing: border-box;
	transition: all 0.2s;
	flex-shrink: 0;
	
	&.active {
		background: #3385FF;
		border-color: #3385FF;
		color: #fff;
		font-weight: 500;
	}
	
	&:active {
		background: #e8f5ff;
	}
}

.popup-footer {
	display: flex;
	gap: 12upx;
	padding: 15upx 20upx 20upx 20upx;
	border-top: 2upx solid #f0f2f6;
	flex-shrink: 0;
	
	.footer-button {
		flex: 1;
		height: 93upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		border-radius: 8upx;
		font-size: 28upx;
		font-weight: 500;
		transition: all 0.2s;
		
		&.default {
			background: #f5f5f5;
			color: #666;
		}
		
		&.blue {
			background: #3385FF;
			color: #fff;
		}
		
		&:active {
			opacity: 0.8;
		}
	}
}
</style>