qimall/addons/SecondaryCard/backend/views/default/edit.php

<script src="/resources/js/html2canvas.min.js"></script>
<!-- 装修所需的数据 -->
<script type="text/javascript" src="/resources/js/diy-util.js"></script>
<script type="text/javascript" src="/resources/js/hotzone.js"></script>

<?php
use common\helpers\ComponentHelper;
use common\models\diy\DiyComponents;

ComponentHelper::loadComponentView('components/diy-preview', __DIR__);
ComponentHelper::loadComponentView('components/diy/diy-color', __DIR__);

$currentRoute = Yii::$app->controller->route;
?>
<div id="app">
   <div class="diy-contain flex" v-loading="loading">
      <!-- 左侧内容 -->
      <diy-preview :active-item="formData" ></diy-preview>
       <!-- 右侧内容 -->
      <transition name="fade">
         <el-scrollbar class="dsp-contain">
         <div class="contain-box">
               <div class="title">基础信息</div>
               <el-divider></el-divider>
               <el-form :model="formData" :rules="rules" ref="basisForm" label-width="130px" >
                  <el-form-item label="次卡名称：" prop="name">
                     <el-col :span="14">
                           <el-input v-model="formData.name"  maxlength="15"  show-word-limit ></el-input>
                     </el-col>
                  </el-form-item>
                  <el-form-item label="卡面字体颜色：" >
                     <diy-color  :color-infos="['']" :str-color="strColor"  @chang="updateColor"></diy-color>
                  </el-form-item>
                  <el-form-item label="次卡背景：" prop="background_type" required>
                     <div class="flex-y-center" style="margin-bottom: 10px;">
                           <el-radio style="margin-right: 0" v-model="formData.background_type" :label="0" @change="backgroundTypeChange" ><span></span></el-radio>
                           <div>默认背景： </div>
                           <div style="width:100px;margin:0 8px;">
                              <el-dropdown trigger="click"  @command="backgroundChange">
                                    <div class="dropdown-link flex-y-center" >
                                       <image :src="`${static_img_prefix}${background_default}`" style="width:80px;height:30px;margin: 2px;">
                                       <i class="el-icon-arrow-down el-icon--right"></i>
                                    </div>
                              <el-dropdown-menu slot="dropdown">
                                    <div class="flex">
                                       <el-dropdown-item class="dropdown-item" command="bg1">
                                          <image  :src="`${static_img_prefix}${defaultStyle.bg1.bg_url}`"  style="width：50px;height:30px;">
                                       </el-dropdown-item>
                                       <el-dropdown-item class="dropdown-item" command="bg2">
                                          <image :src="`${static_img_prefix}${defaultStyle.bg2.bg_url}`"  style="width：50px;height:30px;">
                                       </el-dropdown-item>
                                    </div>
                                    <div class="flex">
                                       <el-dropdown-item class="dropdown-item" command="bg3">
                                          <image :src="`${static_img_prefix}${defaultStyle.bg3.bg_url}`" style="width：50px;height:30px;">
                                       </el-dropdown-item>
                                       <el-dropdown-item class="dropdown-item" command="bg4">
                                       <image :src="`${static_img_prefix}${defaultStyle.bg4.bg_url}`" style="width：50px;height:30px;">
                                       </el-dropdown-item>
                                    </div>
                              </el-dropdown-menu>
                              </el-dropdown>
                           </div>
                     </div>
                     <div class="flex-y-center flex-y-top">
                        <el-radio style="margin-right: 0" v-model="formData.background_type" :label="1" @change="backgroundTypeChange"><span></span></el-radio> 
                        <div style="line-height: 16px; margin-right: 20px">自定义：</div>
                        <div v-if="formData.background_type==1">
                           <com-attachment v-if="!background_diy" :multiple="false" :max="1" type="images" @selected="coverPic">
                              <div class="card-upload">
                                    <i class="el-icon-plus"></i>
                              </div>
                           </com-attachment>
                           <div class="card-coverimg" v-else>
                              <el-image style="width: 80px; height: 80px" :src="background_diy"></el-image>
                              <el-button @click="delPic" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
                           </div>
                           <p class="tips-text">尺寸：686*360像素，小于1M，支持jpg、png、jpeg格式</p>
                        </div>
                     </div>
                  </el-form-item>
                  <el-form-item>
                     <label slot="label">售卖时段：
                        <el-tooltip class="item" effect="dark" content="配置后，该卡在指定时段内才可售卖和兑换。" placement="top">
                           <i class="el-icon-info"></i>
                        </el-tooltip>
                     </label>
                      <el-date-picker 
                         v-model="sell_time_start_end" 
                         type="datetimerange" 
                         value-format="yyyy-MM-dd HH:mm:ss" 
                         range-separator="至" 
                         start-placeholder="开始日期" 
                         end-placeholder="结束日期" 
                         :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="次卡有效期：" prop="expire_type" required>
                     <div class="flex-y-center" style="margin-bottom: 10px">
                        <el-radio style="margin-right: 0" v-model="formData.expire_type" :label="1"><span></span></el-radio>
                        <span>购买时起 </span>
                        <div style="width:80px;margin:0 8px;"> <el-input placeholder="请输入" size="mini" v-model="formData.expire_day" oninput="value=value.replace(/^0|[^0-9]/g,'')"/></div>
                        <span> 天内有效</span>
                     </div>
                     <div class="flex-y-center">
                        <el-radio style="margin-right: 0" v-model="formData.expire_type" :label="2"><span></span></el-radio>
                        <el-col :span="11">
                           <el-date-picker
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd"
                              v-model="begin_end_at"
                              type="daterange"
                              range-separator="～ "
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="beginEndAtChange">
                        </el-date-picker>
                       
                        </el-col>
                     </div>
                  </el-form-item>
                  <el-form-item label="次卡价格设置：" >
                     <el-form  :model="formData" :rules="rules" ref="priceForm" label-position="top" label-width="100px">
                        <el-col :span="20" class="flex" style="margin-bottom: 10px;background: #F5F5F5">
                           <div class="setting-item">
                              <el-form-item label="售价" prop="price" class="is-required">
                                    <el-input v-model="formData.price" size="mini" @input="(v) => (formData.price = v.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^(\d+)(\.\d{0,2})?.*$/, '$1$2').replace(/(\.\d{2})\d+$/, '$1'))" ></el-input>
                              </el-form-item>
                           </div>
                           <div class="setting-item">
                              <el-form-item label="原价" prop="original_price" class="is-required">
                                    <el-input v-model="formData.original_price" size="mini" @input="(v) => (formData.original_price = v.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^(\d+)(\.\d{0,2})?.*$/, '$1$2').replace(/(\.\d{2})\d+$/, '$1'))" ></el-input>
                              </el-form-item>

                           </div>
                           <div class="setting-item"> 
                              <el-form-item  prop="verifiable_times" class="is-required">
                                    <label slot="label">可核销数
                                       <el-tooltip class="item" effect="dark" content="表示该卡可核销 享受的服务次数、达到限制时将不再支持核销" placement="top">
                                          <i class="el-icon-info"></i>
                                       </el-tooltip>
                                    </label>
                                    <el-input v-model="formData.verifiable_times" size="mini" @input="(v) => (formData.verifiable_times = v.replace(/^0|[^0-9]/g,''))" maxlength="9" ></el-input>
                              </el-form-item>

                           </div>
                           <div class="setting-item">
                              <el-form-item  prop="max_times" class="is-required">
                                    <label slot="label">库存
                                       <el-tooltip class="item" effect="dark" content="表示该次卡最多可开通多少张，包含售卡和兑换方式开卡。达到限制时将不支持购买和兑换!" placement="top">
                                          <i class="el-icon-info"></i>
                                       </el-tooltip>
                                    </label>
                                    <el-input v-model="formData.max_times" size="mini" @input="(v) => (formData.max_times = v.replace(/^0|[^0-9]/g,''))" maxlength="9"></el-input>
                              </el-form-item>
                           </div>
                           <div class="setting-item">
                              <el-form-item label="虚拟销量" prop="virtual_sales">
                                    <el-input v-model="formData.virtual_sales" size="mini" @input="(v) => (formData.virtual_sales = v.replace(/^0|[^0-9]/g,''))" maxlength="9"></el-input>
                              </el-form-item>
                           </div>
                        </el-col>
                     </el-form>
                  </el-form-item>
               </el-form>
         </div>
         <div class="contain-box">
               <div class="flex">
                  <div class="title">卡服务设置<span class="tips-text" style="font-weight: normal;">（每张次卡可设置多项卡服务，可拖动调整显示排序）</span></div>
                  <el-button type="text"  icon="el-icon-circle-plus" class="add-box" @click="serviceAdd">新增服务项</el-button>
               </div>
               <el-divider></el-divider>
               <div class="service-box">
                  <el-form :model="serviceModel" ref="serviceForm" label-width="130px" >
                  <draggable  :list="serviceModel.list" handle=".dargBtn" :animation="1000">
                     <div class="service-item draggable" v-for="(service,index) in serviceModel.list" :key="index">
                        <div class="flex service-con">
                              <div class="flex-x-y-center dargBtn" style="width:50px;font-size: 30px;color:#888;">
                                    <div><i class="el-icon-s-unfold"></i></div>
                              </div>
                              <div style="padding-top:26px;">
                                 <el-form-item label="服务主标题："
                                    :prop="'list.' + index + '.service_title'"
                                    :rules="{required: true, message: '服务主标题不能为空', trigger: 'blur'}">
                                       <el-col >
                                          <el-input v-model="service.service_title"  maxlength="20" show-word-limit></el-input>
                                       </el-col>
                                 </el-form-item>
                                 <el-form-item label="服务副标题：" prop="service_subtitle">
                                       <el-col >
                                          <el-input v-model="service.service_subtitle"  maxlength="20" show-word-limit></el-input>
                                       </el-col>
                                 </el-form-item>
                                    <el-row>
                                       <el-col :span="12">
                                          <el-form-item label="服务原价：" prop="service_original_price">
                                             <el-input-number  size="small" v-model="service.service_original_price" :precision="2" :min="0.00" controls-position="right" ></el-input-number>
                                          </el-form-item>
                                       </el-col>
                                       <el-col :span="12">
                                          <el-form-item label="服务项数量："
                                          :prop="'list.' + index + '.service_num'"
                                          :rules="{required: true, message: '服务项数量：不能为空', trigger: 'blur'}">
                                             <el-input-number size="small"  v-model="service.service_num"  controls-position="right" :min="1" :precision="0"></el-input-number>
                                          </el-form-item>
                                       </el-col>
                                 </el-row>
                              </div>
                              <div class="flex-x-y-center" style="width:50px;font-size: 30px;color:#888;">
                                 <div><i class="el-icon-delete" @click="serviceDel(index)"></i></div>
                              </div>
                        </div>
                     </div>
                     </draggable>
                  </el-form>
               </div>
         </div>


         <div class="title">其他设置</div>
         <el-divider></el-divider>
         <div>
               <el-form :model="formData" :rules="rules" ref="otherForm" label-width="180px" >
                  <el-form-item label="是否需要预约：" prop="reservation_type" required>
                     <el-radio-group v-model="formData.reservation_type" @change="reservationTypeChange">
                           <el-radio :label="0" :disabled="disabled">不需要预约</el-radio>
                           <el-radio :label="1" :disabled="disabled">需要提前预约</el-radio>
                     </el-radio-group>
                     <span class="tips-text" style="font-weight: normal; color:red">（提示：保存后无法修预约设置）</span>
                  </el-form-item>
                  <template v-if="formData.reservation_type==1">
                     <el-form-item label="预约模式：" prop="reservation_model">
                           <el-radio-group v-model="formData.reservation_model">
                              <el-radio :label="1" :disabled="disabled">预约门店</el-radio>
<!--                              <el-radio :label="2" :disabled="disabled">预约服务人</el-radio>-->
                           </el-radio-group>
                     </el-form-item>
                     <el-form-item label="可预约时间：" prop="temp_reservation_time" required  v-if="formData.reservation_model ==1">
                           <el-checkbox :indeterminate="isIndeterminate" v-model="everyDay" @change="handleCheckAllDaysChange" :disabled="disabled">每天</el-checkbox>
                           <el-checkbox-group v-model="dayCheckList" @change="handleCheckedDaysChange">
                                 <el-checkbox v-for="(item, index) in weekList" :label="item.code" :key="index"  :disabled="disabled">{{item.label}}</el-checkbox>
                           </el-checkbox-group>
                     </el-form-item>
                     <template v-if="formData.reservation_model ==1">
                        <div class="flex-y-center" v-for="(reservation,index) in formData.temp_reservation_time" style="margin:0 0 8px 0;">
                              <el-form-item :label="weekListMate[reservation.day]"
                                    :prop="'temp_reservation_time.' + index + '.time_start_end'"
                                    :rules="{required: true, message: '请选择可预约时间范围', trigger: 'blur'}">
                                 <el-time-picker
                                       v-if="index==0"
                                       :disabled="disabled"
                                       is-range
                                       format="HH:mm"
                                       value-format="HH:mm"
                                       v-model="reservation.time_start_end"
                                       range-separator="至"
                                       start-placeholder="开始时间"
                                       end-placeholder="结束时间"
                                       placeholder="选择时间范围"
                                       @change="setAllTime">
                                 </el-time-picker >
                                 <el-time-picker
                                        v-else
                                       :disabled="disabled"
                                       is-range
                                       format="HH:mm"
                                       value-format="HH:mm"
                                       v-model="reservation.time_start_end"
                                       range-separator="至"
                                       start-placeholder="开始时间"
                                       end-placeholder="结束时间"
                                       placeholder="选择时间范围">
                                 </el-time-picker >
                              <el-checkbox v-model="checkAll" v-if="index==0" @change="setAllTime"  :disabled="disabled">设置全部</el-checkbox>
                              </el-form-item>
                        </div>
                     </template>
                     <el-form-item label="项目时长：" prop="appointment_interval_duration" required>
                        <div class="flex-y-center" style="margin-bottom: 10px">
                           <div style="margin:0 8px;"> 
                              <el-input-number  v-model="formData.appointment_interval_duration" size="small" controls-position="right" :disabled="disabled" :min="15" :step="5" :precision="0"></el-input-number>
                           </div>
                           <span> 分钟</span> 
                           <el-tooltip class="item" effect="dark" content="设置可预约的间隔时间，举例设置30分钟，那么服务人员每隔30分钟可接受一次预约" placement="top">
                              <i class="el-icon-info"></i>
                           </el-tooltip>
                        </div>
                     </el-form-item>
                     <el-form-item label="预约取消：" prop="reservation_cancel_type" >
                           <el-radio style="margin-right: 0" v-model="formData.reservation_cancel_type" :disabled="disabled" :label="1">不允许取消</el-radio>
                           <div class="flex-y-center" style="margin-bottom: 10px">
                           <el-radio style="margin-right: 0" v-model="formData.reservation_cancel_type" :disabled="disabled" :label="2"><span></span></el-radio>
                              <span>服务开始前 </span>
                              <div style="margin:0 8px;"> 
                               <el-input-number placeholder="0" v-model="formData.reservation_cancel_hour"  size="small" controls-position="right" :disabled="disabled" :min="0" :precision="0"></el-input-number>
                              </div>
                              <span>小时、取消并扣除</span>
                              <div style="margin:0 8px;"> 
                                 <el-input-number  placeholder="0" v-model="formData.reservation_cancel_deduct"  size="small" controls-position="right" :disabled="disabled" :min="0" :precision="0"></el-input-number>
                               </div>
                              <span> 次可服务（核销）数</span>
                           </div>
                     </el-form-item>
                     <el-form-item label="预约限制：" prop="reservation_limit_people" >
                     <div class="flex">
                           <div class="flex-y-center" style="margin-bottom: 10px">
                                 <span>同时段可预约： </span>
                                 <div style="margin:0 8px;"> <el-input-number placeholder="1"  v-model="formData.reservation_limit_people"  size="small" controls-position="right" :disabled="disabled" :min="1" :precision="0"></el-input-number></div>
                                 <div>人
                                    <el-tooltip class="item" effect="dark" content="限制同时段门店/服务人，同时被约人数" placement="top">
                                       <i class="el-icon-info"></i>
                                    </el-tooltip>
                                 </div>
                              </div>
                              <div class="flex-y-center" style="margin-bottom: 10px">
                              <div style="margin-left:30px;">反复预约限制： </div>
                              <div style="margin:0 8px;"><el-input-number  placeholder="0" v-model="formData.reservation_limit_repeat"  size="small" controls-position="right" :disabled="disabled" :min="0" :precision="0"></el-input-number></div>
                              <div>
                                 次
                                  <el-tooltip class="item" effect="dark" content="限制反复预约，恶意占用资源" placement="top">
                                    <i class="el-icon-info"></i>
                                 </el-tooltip>
                              </div>
                           </div>
                     </div>
                     </el-form-item>
                  </template>

                  <el-form-item label="是否允许用户发起退款：" prop="refund_type" required>
                     <el-radio-group v-model="formData.refund_type">
                        <el-radio :label="0">未使用到期自动退
                           <el-tooltip class="item" effect="dark" content="用户下单后，未使用到期自动退" placement="top">
                              <i class="el-icon-info"></i>
                           </el-tooltip>
                        </el-radio>
                        <el-radio :label="1">不允许退款
                           <el-tooltip class="item" effect="dark" content="用户下单后，无法发起主动退款申请操作" placement="top">
                              <i class="el-icon-info"></i>
                           </el-tooltip>
                        </el-radio>
                        <el-radio :label="2">允许退款
                           <el-tooltip class="item" effect="dark" content="卡过期或者已停卡时，允许申请退款。发起申请退款金额=剩余核销次数*(开卡实付金额÷总核销数)" placement="top">
                              <i class="el-icon-info"></i>
                           </el-tooltip>
                        </el-radio>
                     </el-radio-group>
                  </el-form-item>
                  <el-form-item label="每人限购次数：" prop="limit_type">
                     <el-radio :label="0"  v-model="formData.limit_type">不限开卡次数
                        <el-tooltip class="item" effect="dark" content="用户可重复开卡，不限制领卡次数" placement="top">
                           <i class="el-icon-info"></i>
                        </el-tooltip>
                     </el-radio>
                     <div class="flex-y-center" style="margin-bottom: 10px">
                       <el-radio style="margin-right: 0" :label="1"  v-model="formData.limit_type"><span></span></el-radio>
                       <span>有效期内限开卡次数</span>
                       <div style="width:80px;margin:0 8px;"><el-input-number placeholder="1" v-model="formData.limit_times"  size="small" controls-position="right" :disabled="disabled" :min="1" :precision="0"></el-input-number></div>
                       <span>次</span>
                       <el-tooltip class="item" effect="dark" content="领取次数仅统计用户领卡的次数，不统计商家发卡" placement="top">
                           <i class="el-icon-info"></i>
                        </el-tooltip>
                     </div>

                  </el-form-item>
                  <el-form-item label="适用门店：" prop="use_type" required>
                     <el-select v-model="formData.store_type" size="mini" placeholder="请选择" :disabled="disabled" style="width:100px;">
                     <el-option
                           label="O2O门店"
                           :value="1">
                           </el-option>
                     </el-select>
                     <el-radio-group v-model="formData.use_type">
                           <el-radio :label="0" :disabled="disabled">全部门店</el-radio>
                           <el-radio :label="1" :disabled="disabled">指定店铺</el-radio>
                     </el-radio-group>
                     <span class="tips-text" style="font-weight: normal; color:red">（提示：保存后无法修可核销门店）</span>
                  </el-form-item>
                  <el-form-item label="选择门店" prop="store_ids" required v-if="formData.use_type==1">
                     <el-col :span="20">
                        <el-button type="text" icon="el-icon-circle-plus" @click="onChooseStore" :disabled="disabled">选择门店</el-button>
                     </el-col>
                     <el-table v-if="formData.store_list.length" :data="id?formData.store_list:tableList" stripe  size="small" style="width: 80%" >
                        <el-table-column label="店铺名称" prop="store_name"  align="center"></el-table-column>
                        <el-table-column label="类型" ><template slot-scope="scope">O2O门店 </template></el-table-column>
                        <el-table-column label="店长/联系方式"  prop="shop_mobile"   >
                           <template slot-scope="scope">
                              <span>{{scope.row.shop_owner}}</span>
                              <span>{{scope.row.shop_mobile}}</span>
                           </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                           <template slot-scope="scope">
                              <el-button type="text" size="small" :disabled="disabled"style="color:red" @click.native.prevent="deleteStore(scope.$index)">删除</el-button>
                           </template>
                        </el-table-column>
                     </el-table>
                     <el-row type="flex" class="page" style="margin-top:10px;">
                        <el-pagination @current-change="paginationClerkStore" background layout="prev, pager, next" :page-count="pageCountClerk" v-if="id && formData.store_list.length"></el-pagination>
                           <el-pagination
                              background
                              v-if="!id && formData.store_list.length"
                              :hide-on-single-page="true"
                              @current-change="handleCurrentChange"
                              :current-page="listQuery.page"
                              :page-size="listQuery.pageNum"
                              layout="prev, pager, next"
                              :total="formData.store_list.length">
                           </el-pagination> 
                     </el-row>
                  </el-form-item>
                   <el-form-item label="服务方式" prop="reserve.service_type"
                                 v-if="formData.reservation_model==2">
                       <el-radio v-model="formData.reservation_service_type" :label="2">到店服务</el-radio>
                       <el-radio v-model="formData.reservation_service_type" :label="1">上门服务</el-radio>
                       <el-radio v-model="formData.reservation_service_type" :label="3">到店服务/上门服务</el-radio>
                   </el-form-item>
                  <el-form-item label="使用规则：" prop="rule" required>
                     <el-col :span="20">
                     <el-input type="textarea" v-model="formData.rule" rows="10"  placeholder="请输入使用条件范围及限制内容，避免产生纠纷！" ></el-input>
                     </el-col>

                  </el-form-item>
               </el-form>
         </div>
         <div class="flex-x-center" style="padding-bottom: 20px;">
               <el-button @click="cancel">取消</el-button>
               <el-button type="primary" @click="submitForm">提交</el-button>
         </div>
      </el-scrollbar>
      </transition>
   </div>
     <!-- 选择店铺 -->
     <el-dialog title="选择店铺" width="800px" :visible.sync="isShowStore" :close-on-click-modal="false">
      <div>
         <el-form :inline="true" size="small">
            <el-form-item label="店铺名称">
               <el-input clearable v-model="store_name" placeholder="请输入店铺名称进行搜索"></el-input>
            </el-form-item>
            <el-form-item label="">
               <el-button type="primary" size="small" @click="onSearchStore">搜索</el-button>
            </el-form-item>
         </el-form>
         <el-table :data="storeTableData" stripe size="small" style="width: 100%" row-key='id' ref="storeTable"  @selection-change='handleSelectionChange'>
               <el-table-column type="selection" reserve-selection width="55"> </el-table-column>
               <el-table-column label="序号" prop="id" width="160" align="left">
                  </el-table-column>
                <el-table-column label="店铺名称" prop="store_name"  width="100" align="center"></el-table-column>
                <el-table-column label="店长/联系方式"  prop="shop_mobile"   width="150" >
                <template slot-scope="scope">
                <span>{{scope.row.shop_owner}}</span>
                  <span>{{scope.row.shop_mobile}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="地址"  prop="address"  ></el-table-column>
            </el-table>
            <div style="padding: 15px 0">
               <el-pagination v-if="store_pagination" style="float: right;" background @current-change="onChangeStorePage"
                              layout="prev, pager, next" :page-count="store_count">
               </el-pagination>
               <div style="clear: both"></div>
            </div>
            <div style="text-align: center; padding-bottom: 15px">
                    <el-button type="primary" size="small" @click="onSelectedStore">确定</el-button>
                    <el-button type="info" size="small" @click="onCancelStore">取消</el-button>
                </div>
            </div>
    </el-dialog>

</div>
<script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>
   new Vue({
      el: '#app',
      data() {
         //自定义校验规则
         //背景图片
         let  val_background_type = (rule, value, callback) => {
            console.log('value',value,this.background_diy)
            if (value === 1 && this.background_diy ==null) {
               callback(new Error('请上传自定义背景'));
            } else {
               callback();
            }
         };
         //次卡有效期类型
         let  val_expire_type = (rule, value, callback) => {
            console.log('this.formData.end_at',value)
            if (value === 1 && this.formData.expire_day =='') {
               callback(new Error('请输入有效天数'));
            } else if (value === 2 && this.formData.begin_at =='') {
               callback(new Error('请选择有效期范围'));
            } else if (value === 2 && this.formData.sell_time_end) {
               let sell_time_end_seconds = (new Date(this.formData.sell_time_end)).getTime()
               console.log('this.formData.end_at',this.formData.end_at)
               let end_at_seconds = (new Date(this.formData.end_at +' 23:59:59')).getTime() 
                if(end_at_seconds <= sell_time_end_seconds){
                  callback(new Error('次卡有效期不能小于售卖时段'));
                }
                callback();
            } else {
               callback();
            }
         };
      
         
          // 预约限制
         //  let  val_reservation_limit_people = (rule, value, callback) => {
         //    if (value === 1 && this.formData.expire_day =='') {
         //       callback(new Error('请输入有效天数'));
         //    } else if (value === 2 && this.formData.begin_at =='' ) {
         //       callback(new Error('请选择有效期范围'));
         //    } else {
         //       callback();
         //    }
         // };
         //

         return {
            static_img_prefix: '<?= Yii::getAlias('@attachurl') ?>'+'/static',
            loading:false,
            id:'',
            disabled:false,
            session_key:'',
            formData: {
               name: '',
               background_type:0,// '次卡背景类型，0：默认背景，1：自定义',
               font_color:'#FF9031',
               background:'/addons/SecondaryCard/background2.png',//次卡背景
               sell_time_start:'',//售卖开始时间
               sell_time_end:'',
               expire_type:1,//次卡有效期类型：1=购买时起N天内有效，2=指定有效期
               begin_at:'',
               end_at:'',
               expire_day:'',//有效天数  expire_type =1
               price:'',
               original_price:'',
               verifiable_times:'',
               max_times:'',//最大开卡数
               virtual_sales:'',//虚拟销量
               service:[],//卡服务设置
               reservation_type:0,// '是否需要预约，0：不需要，1：需要',
               reservation_model:1,//预约模式：1：预约门店；2：预约服务人
                reservation_service_type: 2,// 服务方式：1：上门服务；2：到店服务；3：上门/到店
               reservation_time:[],//可预约时间段
               appointment_interval_duration:0,
               reservation_cancel_type:1,
               reservation_cancel_hour:0,
               reservation_cancel_deduct:0,
               reservation_limit_people:0,
               reservation_limit_repeat:0,
               refund_type:0,// '退款类型，0：未使用到期自动退，1：不允许退款，2：允许退款',
               limit_type:0,//限购类型，0：不限开卡次数(用户可重复开卡，不限制领卡次数)，1：有效期内限开卡次数'
               limit_times:'',//次数 领取次数仅统计用户领卡的次数，不统计商家发卡'
               store_type:1,//门店类型 1 o2o
               use_type:0,//使用范围  0：全部店铺 1：指定店铺
               store_ids:[],
               store_list:[],
               rule:'',//使用规则
               temp_reservation_time:[]// 预约时间,
            },
            sell_time_start_end:'',//售卖时段
            begin_end_at:'', //次卡有效期
            background_default:'/addons/SecondaryCard/background2.png',
            background_diy:null,
            everyDay:false,
            checkAll: false,
            isIndeterminate: false,
            dayCheckList:[],
            serviceModel:{ //服务项
               list:[
                  {
                     service_title:'',
                     service_subtitle:'',
                     service_original_price:'',
                     service_num:1
                  }
               ]
            },
            //门店表格相关
            isShowStore:false,
            storeTableData:[],
            store_name:'',
            store_page: 1,
            store_pagination: null,
            store_count: null,
            multipleSelection: [],
            rules: {
               name: [
                     { required: true, message: '请输入次卡名称', trigger: 'blur' },
                     { max: 15, message: '长度不能超过15个字', trigger: 'blur' }
               ],
               background_type: [
                     { required: true, message: '请选择背景图', trigger: 'blur' },
                     { validator: val_background_type, trigger: 'blur' }
               ],
               expire_type:[
                  { required: true, message: '请输入次卡有效期', trigger: 'blur' },
                  { validator: val_expire_type, trigger: 'blur' }
               ],
               price: [
                     { required: true, message: '请输入售价', trigger: 'blur' }
               ],
               original_price: [
                     { required: true, message: '请输入原价', trigger: 'blur' }
               ],
               verifiable_times: [
                     { required: true, message: '请输入可核销数', trigger: 'blur' }
               ],
               max_times: [
                     { required: true, message: '请输入库存', trigger: 'blur' }
               ], 
               temp_reservation_time:[
                  { type: 'array', required: true, message: '请至少选择一个可预约日期', trigger: 'change' }
               ],    
               rule: [
                     { required: true, message: '请输入使用规则', trigger: 'blur' }
               ],
               store_ids: [
                     { required: true, message: '请选择门店', trigger: 'blur' }
               ],
               appointment_interval_duration:[
                  { required: true, message: '请输入项目时长', trigger: 'blur' }
               ]
            },   
            defaultStyle:{
               'bg1':{
                  bg_url:'/addons/SecondaryCard/background2.png',//黄色
                  font_color:'#FF9031'
               },
               'bg2':{
                  bg_url:'/addons/SecondaryCard/background3.png',//黑色
                  font_color:'#FFFFFF'
               },
               'bg3':{
                  bg_url:'/addons/SecondaryCard/background1.png',//蓝色
                  font_color:'#4B83E0'
               },
               'bg4':{
                  bg_url:'/addons/SecondaryCard/background4.png',//粉色
                  font_color:'#F65B66'
               }
            },
            weekListMate:{
               1:'星期一',
               2:'星期二',
               3:'星期三',
               4:'星期四',
               5:'星期五',
               6:'星期六',
               0:'星期日',
            },
            weekList:[{
               code:1,
               label:'星期一'
            },{
               code:2,
               label:'星期二'
            },{
               code:3,
               label:'星期三'
            },{
               code:4,
               label:'星期四'
            },{
               code:5,
               label:'星期五'
            },{
               code:6,
               label:'星期六'
            },{
               code:0,
               label:'星期日'
            }],
            // 分页参数
            listQuery: {
                  page: 1,
                  pageNum: 10,
            },
         }
      },
      
      computed: {
         strColor(){
				if(!this.formData.font_color){
					return ['#FF9031']
				} else{
					return [this.formData.font_color]
				}
			},
         tableList() {
            // 分页的起始下标
            const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;
            // 分页的末尾下标
            const endIndex = startIndex + this.listQuery.pageNum;
            // 返回切割后的数据
            return this.formData.store_list.slice(startIndex, endIndex);
         },
         // 总分页数
         total() {
            return Math.ceil(this.formData.store_list.length / this.listQuery.pageNum);
         },

      },
      created() {
         this.type = getQuery('id') ? "edit" : "add"
         this.id = getQuery('id')
         if(this.id){
            this.disabled = true
            let use_type = getQuery('use_type')
            this.detail()
            if(use_type==1){
               this.showCanClerkStore(this.id)
            }
         } else {
            let header_data = JSON.parse(localStorage.getItem("mall_header_data"));
            let mall_id = header_data.mall.id;
            let user_id = header_data.user.id;
            this.session_key = `${user_id}_${mall_id}_secondary_card`
            this.addView()
         }
      },
      methods: {
         dataURLtoFile(dataurl) { // 生成Blob
            var arr = dataurl.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
               u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
               type: mime
            });
         },
         upload(file) {
            let formData = new FormData();
            const params = {
               upload_type: 'images'
            };
            params['r'] = 'common/file/upload';
            for (let i in this.fields) {
               formData.append(i, this.fields[i]);
            }
            formData.append('file', file, "image.png");
            return new Promise(successCallback => {
               this.$request({
                  headers: {
                     'Content-Type': 'multipart/form-data'
                  },
                  params: params,
                  method: 'post',
                  data: formData,
               }).then(e => {
                  successCallback(e.data)
               }).catch(e => {
                  file._complete = true;
               });
            })
         },
         detail() {
            console.log('参数',this.id)
            // 详情
            this.loading = true
            request({
               params: {
                  r: 'secondary-card/default/edit',
                  id: this.id
               },
               method: 'get',
            }).then(res => {
               if(res.data.code == 0){
                  if(!res.data.data) return
                  this.updateView(res.data.data);
               } else {
                  this.$message({
                     message: res.data.msg,
                     type: 'error'
                  });
               }
               this.loading =  false;
            }).finally(res => {
               this.loading = false
            })
         },
         addView(){
            let formDataStr = sessionStorage.getItem(this.session_key)
            if(formDataStr){
               let formData =  JSON.parse(formDataStr);
               this.updateView(formData)
            }
         },
         updateView(item, index) {
            Object.keys(item).forEach(key=>{
               if(this.formData[key] !== undefined){
                  this.formData.store_ids  = this.formData.store_list.map(item=>item.id)
                  if(key !=='store_list' && key !='store_ids'){
                     this.formData[key]=item[key]
                  }
               }
            })
            this.serviceModel.list = this.formData.service;
            if(Array.isArray(this.formData.reservation_time)){
               this.formData.temp_reservation_time = this.formatTime(this.formData.reservation_time,2)
            }
            if(this.formData.sell_time_start && this.formData.sell_time_end){
               this.sell_time_start_end = [this.formData.sell_time_start,this.formData.sell_time_end]
            }
            if(this.formData.begin_at && this.formData.end_at){
               this.begin_end_at = [this.formData.begin_at,this.formData.end_at]
            }
            if(this.formData.background_type ==1){
              this.background_diy = this.formData.background;
            }else {
               this.background_default = this.formData.background;
            }
            this.formData.name = this.formData.name+''
            this.formData.rule = this.formData.rule+''
            console.log('数据',this.formData.temp_reservation_time)

         },
         reservationTypeChange(){
            if(this.formData.reservation_type ==0) {
               this.checkAll = false;
               this.everyDay = false;
               this.dayCheckList = [];
               this.isIndeterminate = false;
               this.formData.temp_reservation_time = []
            }
         },
         beginEndAtChange(values){
            if(values){
               this.formData.begin_at = values[0]
               this.formData.end_at = values[1]
            } else {
               this.formData.begin_at = ''
               this.formData.end_at = ''
            }
            
            console.log('sss',values,this.formData)
         },
         backgroundTypeChange(value){
            console.log('值',value)
            if(value == 1){
               this.formData.background = this.background_diy?this.background_diy:''
            } else {
               this.formData.background = this.background_default
            }
         },
         backgroundChange(command){
            if(this.formData.background_type ==0){
               this.formData.background = this.defaultStyle[command].bg_url
               console.log('this.formData.background ',this.formData.background )
               this.background_default = this.formData.background;
               this.formData.font_color = this.defaultStyle[command].font_color
            }
         },
         coverPic(e) { // 选择图片
            this.formData.background = e[0].url
            this.background_diy  = this.formData.background
         },
         delPic(){
            this.background_diy  = null
            this.formData.background = this.background_diy;
         },
         updateColor(e){
            console.log('key',e[0].color)
            this.formData.font_color = e[0].color;
            this.colorInfos = e
         },
         serviceAdd(){
            this.serviceModel.list.push({
               service_title:'',
               service_subtitle:'',
               service_original_price:'',
               service_num:1
            })
         },
         serviceDel(index){
            if(this.serviceModel.list.length ==1){
               this.$message.error('最少需要保留一组服务项')
               return
            }
            this.serviceModel.list.splice(index,1)
         },
         handleCheckAllDaysChange(val){
            this.dayCheckList = val ? [1,2,3,4,5,6,0] : [];
            this.handleCheckedDaysChange(this.dayCheckList)
            this.isIndeterminate = false;
         },
         handleCheckedDaysChange(arr){
            let checkedCount = arr.length;
            this.everyDay = checkedCount === 7;
            this.isIndeterminate = checkedCount > 0 && checkedCount < 7;
            
            if(checkedCount ==0){
               this.formData.temp_reservation_time = []
            } else {
               let newList = [],all_start_end = '';
               if(this.formData.temp_reservation_time.length>0 && this.checkAll==true){
                  all_start_end = this.formData.temp_reservation_time[0].time_start_end
               }
               arr.forEach(day=>{
                 let result = this.formData.temp_reservation_time.find(item=>item.day ==day)

                  let time_start_end = result ? result.time_start_end :all_start_end;
                  newList.push({
                     day,
                     time_start_end:time_start_end
                  })
               })
               this.formData.temp_reservation_time = newList;
               this.$refs['otherForm'].validateField('temp_reservation_time')
            }
         },
         setAllTime(){
            if(this.checkAll){
               this.formData.temp_reservation_time.forEach(item=>{
                  item.time_start_end=  this.formData.temp_reservation_time[0].time_start_end
               })
            }
         },
         formatData(){
            //格式化数据
            this.formData.service = this.serviceModel.list
            if(Array.isArray(this.formData.reservation_time)){
               this.formData.reservation_time = this.formatTime(this.formData.temp_reservation_time)
            }
            this.formData.store_ids  = this.formData.store_list.map(item=>item.id)
            if(Array.isArray(this.sell_time_start_end)){
               this.formData.sell_time_start = this.sell_time_start_end[0]
               this.formData.sell_time_end = this.sell_time_start_end[1]
            }
            this.formData.name = this.formData.name+''
            this.formData.rule = this.formData.rule+''
         },
         validateForm(){
            this.formatData()
            let formList = [{
               formName:'basisForm',
               state:false
            },{
               formName:'priceForm',
               state:false
            },{
               formName:'serviceForm',
               state:false
            },{
               formName:'otherForm',
               state:false
            }]
            formList.forEach(item=>{
               this.$refs[item.formName].validate(valid => {
                     if (valid) {
                        item.state = true;
                     }
               })
            })
            let result = formList.find(item=>item.state == false)
            console.log('result',result)
            if(result) this.$message.error('部分参数验证不通过')
            return result? false : true
         },
         submitForm() {
            if(this.validateForm()) {
               this.loading = true
               if(this.type == 'edit') {
                  this.formData['id'] = this.id
               }
               let data = {
                  form:JSON.stringify(this.formData)
               }
               console.log('请求参数',data)
               request({
                     params: {
                        r: 'secondary-card/default/edit',
                     },
                     method: 'post',
                     data
               }).then(e => {
                     if (e.data.code === 0) {
                        if(this.type !== 'edit'){
                           sessionStorage.removeItem(this.session_key)
                        }
                        this.$message.success(e.data.msg)
                        navigateTo({
                           r: 'secondary-card/default/index'
                        })
                     } else {
                        this.$message.error(e.data.msg)
                     }
               }).finally(res => {
                  this.loading = false
               })
            }
         },
         cancel(){
            if(this.type !== 'edit'){
               this.formatData()
               let formDataStr = JSON.stringify(this.formData)
               sessionStorage.setItem(this.session_key, formDataStr);
            }
            navigateTo({
                  r: 'secondary-card/default/index'
            })
         },
         //查看回显门店
         showCanClerkStore(secondary_card_id){
                this.secondary_card_id = secondary_card_id;
                var param = {
                    r: 'secondary-card/default/can-clerk-store-list',
                    page: this.page_clerk,
                    id: secondary_card_id,
                    limit: 10
                }
                request({
                    params: param,
                }).then(e => {
                    if (e.data.code === 0) {
                        this.formData.store_list = e.data.data.list;
                        this.formData.store_ids  = this.formData.store_list.map(item=>item.id)
                        this.pageCountClerk = e.data.data.page_count;
                        this.currentPageClerk = e.data.data.pagination.current_page;

                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });

         },
         paginationClerkStore(currentPage) {
                this.page_clerk = currentPage;
                this.showCanClerkStore(this.id);
         },
         // 当前分页数（第几页）
         handleCurrentChange(val) {
            this.listQuery.page = val;
         },
         //表格相关操作
         onChooseStore() {
               this.isShowStore = true
               this.loading = true
               console.log('this.$refs',this.$refs)
               request({
                  method: 'get',
                  params: {
                     r: 'secondary-card/default/store-list',
                     page: this.store_page,
                     limit: 10,
                     keyword:this.store_name,
                     store_type:'1'
                  },
               }).then(e => {
                  this.loading = false
                  // this.$refs.storeTable.clearSelection()
                  if (e.data.code === 0) {
                     this.storeTableData = e.data.data.list;
                     this.store_pagination = e.data.data.pagination;
                     this.store_count = e.data.data.page_count;
                  } else {
                     this.$message({
                           message: e.data.msg,
                           type: 'error'
                     });
                  }
               }).catch(e => {
                  this.loading = false
               });
         },
         onSearchStore() {
               this.store_page = 1
               this.onChooseStore();
         },
         onChangeStorePage(page) {
               this.store_page = page;
               this.onChooseStore();
         },
         handleSelectionChange(val){
            this.multipleSelection = val
         },
         deleteStore(index){
            this.formData.store_list.splice(index, 1);
         },
         onSelectedStore(){
            this.formData.store_list = this.multipleSelection;
            this.isShowStore = false
         },
         onCancelStore(){
            this.isShowStore = false
         },
         formatTime(list,type){
            let new_list = []
            if(type){
               if(list){
                  list.forEach(item=>{
                     new_list.push({
                        day:item.day,
                        time_start_end:[item.time_start,item.time_end]
                     })
                  })
                  this.dayCheckList= new_list.map(item=>item.day)
               }
            } else {
               list.forEach(item=>{
                  if(Array.isArray(item.time_start_end) && item.time_start_end.length>1){
                     new_list.push({
                        day:item.day,
                        time_start:item.time_start_end[0],
                        time_end:item.time_start_end[1]
                     })
                  }
               })

            }
            return new_list
         },
        
      }
   })

   // 拦截页面卸载
   /* window.onbeforeunload = function(e) {
      var e = window.event || e;
      e.returnValue = ("确定离开当前页面吗？");
   } */
</script>

<style>
   #app {
      display: flex;
      flex-direction: column;
      min-width: 1250px;
   }


   .diy-contain {
      flex: 1;
      overflow: auto;
      background: #F4F6F8;
      justify-content: space-between;
   }

   .diy-func-list {
      box-sizing: border-box;
      width: 354px;
      background: #FFFFFF;
      border-radius: 0px;
   }

   .diy-preview {

      background: #F4F6F8;
      justify-content: space-around;
      width: 467px;
   }
   .dsp-contain {
      flex: 1;
   }

   .flex {
      display: flex;
   }
   .flex-x-center {
        display: flex;
        justify-content: center;
    }
    .flex-y-center {
        display: flex;
        align-items: center;
    }
    .flex-x-y-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .flex-y-top {
        align-items: flex-start;
    }
   :root {
      /* 主题色 */
      --diy-theme: #F10009;
      /* 主要字体颜色 */
      --diy-color: #F10009;
   }
   .dsp-contain {
        position: relative;
        flex: 1 ;
        height: 100%;
        background: #FFFFFF;
    }
    .title {
        font-size:16px;
        font-weight: bold;
        padding:  16px 0 0 16px;
    }
    .add-box {
        padding:  16px 0 0 16px;
        font-size:16px;
        color: #1890FF;
    }
    .service-item+.service-item {
        margin-top:10px;
    }
    .service-con {
      margin:0 80px;
      background: #F5F5F5;
      justify-content: space-evenly;
    }
    .setting-item {
        text-align: center;
        padding: 0 16px 16px;
    }


    .dropdown-link {
        width: 111px;
        height: 40px;
        border:1px solid #DCDFE6;
    }
    .dropdown-item+.dropdown-item {
        padding-left: 0;
    }
    .card-upload {
      width: 103px;
      height: 103px;
      line-height:103px
    }
</style>