新增商品 编辑商品

  1. <template>
  2.     <div class="home">
  3.         <Holstein></Holstein>
  4.         <div class="merchantRegist">
  5.             <div class="merchantRegistration">
  6.                 <div class="addTitle">{{pageTitle}}</div>
  7.                 <el-steps :active="activeIndex - 0" align-center process-status="process" finish-status="success">
  8.                     <el-step title="基本信息填写" ></el-step>
  9.                     <el-step title="售卖信息填写" ></el-step>
  10.                     <el-step title="常见问题与需求" ></el-step>
  11.                     <el-step title="提交完成" ></el-step>
  12.                 </el-steps>
  13.                 <el-tabs v-model="activeIndex">
  14.                 <el-tab-pane label="" name="0">
  15.                     <div class="stepsContent">
  16.                         <div data-v-a72aa574="" class="" style="">
  17.                             <div class="el-card__body" style="">
  18.                                 <el-form
  19.                                     data-v-a72aa574=""
  20.                                     class="el-form"
  21.                                     style=""
  22.                                     :model="addform"
  23.                                     :rules="rulesadd"
  24.                                     ref="addform"
  25.                                 >
  26.                                     <div
  27.                                         data-v-a72aa574=""
  28.                                         class="el-row"
  29.                                         style="margin-left: -12px; margin-right: -12px"
  30.                                     >
  31.                                         <!-- 商品类目 -->
  32.                                         <el-col :span="12">
  33.                                             <el-form-item
  34.                                                 class="el-form-item is-required el-form-item--small"
  35.                                                 label="商品类目"
  36.                                                 prop="categoryId"
  37.                                             >
  38.                                                 <div
  39.                                                     class="el-form-item__content"
  40.                                                     style="margin-left: 130px"
  41.                                                 >
  42.                                                     <el-cascader
  43.                                                         v-model="addform.categoryId"
  44.                                                         :props="{
  45.                                                             value: 'id',
  46.                                                             label: 'cateName',
  47.                                                             children: 'children'
  48.                                                         }"
  49.                                                         :options="NavTitle"
  50.                                                         @change="handleChange"
  51.                                                     ></el-cascader>
  52.                                                 </div>
  53.                                             </el-form-item>
  54.                                         </el-col>
  55.                                         <!-- 商品名称 -->
  56.                                         <el-col :span="12">
  57.                                             <el-form-item
  58.                                                 data-v-a72aa574=""
  59.                                                 class="el-form-item is-required el-form-item--small"
  60.                                                 label="商品名称"
  61.                                                 prop="serviceName"
  62.                                             >
  63.                                                 <div
  64.                                                     class="el-form-item__content"
  65.                                                     style="margin-left: 130px"
  66.                                                 >
  68.                                                        <el-input
  69.                                                         v-model="addform.serviceName"
  70.                                                         placeholder="请输入商品名称"
  71.                                                     ></el-input> 
  72.                                                 </div>
  73.                                             </el-form-item>
  74.                                         </el-col>
  75.                                         <!-- 商品排序 -->
  76.                                         <el-col :span="12">
  77.                                             <el-form-item
  78.                                                 data-v-a72aa574=""
  79.                                                 class="el-form-item is-required el-form-item--small"
  80.                                                 label="商品排序"
  81.                                                 prop="serviceSort"
  82.                                             >
  83.                                                 <div
  84.                                                     class="el-form-item__content"
  85.                                                     style="margin-left: 130px"
  86.                                                 >
  87.                                                 <el-col :span="10">
  88.                                                 <el-input 
  89.                                                     v-model="addform.serviceSort" 
  90.                                                     placeholder="请输入商品排序"
  91.                                                     oninput="if(value>99)value=99;if(value.length>2)value=value.slice(0,2);if(value<1 && value)value=1"></el-input>
  92.                                                 </el-col>
  93.                                                 </div>
  94.                                             </el-form-item>
  95.                                         </el-col>
  96.                                         <!-- 商品库存 -->
  97.                                         <el-col :span="12">
  98.                                             <el-form-item
  99.                                                 data-v-a72aa574=""
  100.                                                 class="el-form-item is-required el-form-item--small"
  101.                                                 label="可接单量"
  102.                                                 prop="orderQuantity"
  103.                                             >
  104.                                                 <div
  105.                                                     class="el-form-item__content"
  106.                                                     style="margin-left: 130px"
  107.                                                 >
  108.                                                     <el-input
  109.                                                         v-model="addform.orderQuantity"
  110.                                                         type="number"
  111.                                                         oninput="if(value>99999)value=99999;if(value.length>5)value=value.slice(0,5);if(value<1 && value)value=1"
  112.                                                         placeholder="请输入可接单量"
  113.                                                     ></el-input>
  114.                                                 </div>
  115.                                             </el-form-item>
  116.                                         </el-col>
  117.                                     </div>
  118.                                     <!-- 商品展示材料 -->
  119.                                     <el-col :span="24">
  120.                                         <el-form-item
  121.                                             data-v-a72aa574=""
  122.                                             class="el-form-item is-required el-form-item--small"
  123.                                             label="商品展示材料（图片/视频）"
  124.                                             prop="filesTwo"
  125.                                         >
  126.                                             <div class="el-form-item__content" style="">
  127.                                                 <div
  128.                                                     data-v-a72aa574=""
  129.                                                     class="el-textarea el-input--small"
  130.                                                     style="padding-left: 50px"
  131.                                                 >
  132.                                                     <div>注:</div>
  133.                                                     <div>1、商品logo优先级为：视频>第一张图片</div>
  134.                                                     <div>
  135.                                                         2、请务必上传商品图片，默认第一张为封面图；图片最多上传19张，格式为jpg，JPEG，png，
  136.                                                     </div>
  137.                                                     <div>
  138.                                                         3、视频最多上传一个，格式为AM、mov、mvb、rm、FLV、mp4
  139.                                                     </div>
  140.                                                 </div>
  141.                                             </div>
  142.                                         </el-form-item>
  143.                                     </el-col>
  144.                                     <el-col :span="24">
  145.                                         <el-form-item
  146.                                             data-v-a72aa574=""
  147.                                             class="el-form-item el-form-item--small"
  148.                                             label="上传介绍视频"
  149.                                         >
  150.                                                 <el-upload class="avatar-uploader" 
  151.                                                     drag
  152.                                                     action="http://yshopapi.inroyltd.com/api/uploadVideo" 
  153.                                                     :show-file-list="false"
  154.                                                     accept=".mp4,.am,.mov,.mvb,.rm,.flv"
  155.                                                     :on-success="handleVideoSuccess" 
  156.                                                     :on-remove="handleContvideoRemove"
  157.                                                     :before-upload="beforeUploadVideo" 
  158.                                                     :on-progress="uploadVideoProcess">
  159.                                                     <video v-if="addform.Video && videoFlag == false" :src="domain + addform.Video" class="videoBox" controls="controls">您的浏览器不支持视频播放</video>
  160.                                                     <template v-else-if="!addform.Video && videoFlag == false">
  161.                                                         <i class="el-icon-upload"></i>
  162.                                                         <div class="el-upload__text">视频最多上传一个,格式为AM、mov、mvb、rm、FLV、mp4</div>
  163.                                                     </template>
  164.                                                     <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
  165.                                                 </el-upload>
  166.                                                 <div class="el-upload__tip" slot="tip">
  167.                                                     只能上传<span style="color: #cc0000"
  168.                                                         >一个MP4</span
  169.                                                     >文件
  170.                                                 </div>
  172.                                         </el-form-item>
  173.                                     </el-col>
  174.                                     <el-col :span="24">
  175.                                         <el-form-item
  176.                                             class="el-form-item el-form-item--small"
  177.                                             label="上传介绍图片"
  178.                                             label-width="100px"
  179.                                         >
  180.                                             <div class="el-form-item__content" style="">
  181.                                                 <div data-v-1c9bbdc3="" data-v-a72aa574="">
  182.                                                     <el-upload
  183.                                                         action="action"
  184.                                                         list-type="picture-card"
  185.                                                         accept=".jpg,.jpeg,.png"
  186.                                                         :on-preview="handleContImgPreview"
  187.                                                         :on-remove="handleContImgRemove"
  188.                                                         :before-upload="beforeUploadImage" 
  189.                                                         :limit="19"
  190.                                                         :on-exceed="exceedTips"
  191.                                                         :http-request="uploadImage"
  192.                                                         :file-list="addform.imgs2"
  193.                                                     >
  194.                                                         <i class="el-icon-plus"></i>
  195.                                                     </el-upload>
  196.                                                     <el-dialog
  197.                                                         :visible.sync="dialogContImgVisible"
  198.                                                         append-to-body
  199.                                                     >
  200.                                                         <img width="100%" :src="dialogContImgUrl" />
  201.                                                     </el-dialog>
  202.                                                 </div>
  203.                                             </div>
  204.                                         </el-form-item>
  205.                                     </el-col>
  206.                                     <!-- 商品描述 -->
  207.                                     <el-col :span="24">
  208.                                         <el-form-item
  209.                                             class="el-form-item is-required el-form-item--small"
  210.                                             label="商品描述"
  211.                                             prop="serviceDesc"
  212.                                         >
  213.                                             <span style="color: red; font-size: 14px; line-height: 32px"
  214.                                                 >(2000个字)</span
  215.                                             >
  216.                                             <div class="el-form-item__content" style="padding-bottom:50px">
  217.                                                 <!--<el-input
  218.                                                     type="textarea"
  219.                                                     v-model="addform.serviceDesc"
  220.                                                 ></el-input>-->
  221.                                                 <quill-editor v-model="addform.serviceDesc" ref="myQuillEditor" style="height: 300px;" :options="editorOption"> </quill-editor>
  222.                                             </div>
  223.                                         </el-form-item>
  224.                                     </el-col>
  225.                                 </el-form>
  226.                             </div>
  227.                         </div>
  228.                     </div>
  229.                     <div class="nextStepBtn">
  230.                         <el-button
  231.                             style="margin-top: 12px; color: #fff; background: #81d8d0"
  232.                             @click="submitaddbasic('addform')"
  233.                             >下一步</el-button
  234.                         >
  235.                     </div>
  236.                 </el-tab-pane>
  237.                 <el-tab-pane label="" name="1">
  238.                     <div class="multiFlex" style="display:flex;justify-content:space-between;align-items:center;margin-top:30px">
  239.                     <div class="addTitle">商品价格定制</div>
  240.                     <el-select v-model="settingValue" placeholder="请选择">
  241.                         <el-option
  242.                         v-for="item in setting"
  243.                         :key="item.value"
  244.                         :label="item.label"
  245.                         :value="item.value">
  246.                         </el-option>
  247.                     </el-select>
  248.                 </div>
  249.                 <div class="stepsContent1">
  250.                     <div style="margin-top: 20px; background-color: #eeeeee">
  251.                         <div class="tableTitle" style="background-color: #fff; margin: 0; padding:40px 0 18px">配置参数</div>
  252.                         <div class="tableInfro">
  253.                             <!-- <table cellspacing="0" cellpadding="0" border class="el-table__header" style="background-color: #fff;width: 1280px">
  254.                                 <tbody  style="text-align:center;">
  255.                                     <tr class="" style="background:#eeeeee;height:60px;line-height:60px;font-size:16px">
  256.                                         <th rowspan="1" style="background:#eeeeee;width:320px;"></th>
  257.                                         <th>基础</th>
  258.                                         <th>标准</th>
  259.                                         <th>优质</th>
  260.                                     </tr>
  261.                                 </tbody>
  262.                             </table> -->
  263.                             <el-table
  264.                             :data="pricesCustoms">
  265.                                 <el-table-column label="" prop="title">
  266.                                     <template slot-scope="scope">
  267.                                         <el-row v-if="scope.$index < 5 || scope.row.title == '价格'">
  268.                                             <p style="margin-left:40px;display:inline-block">{{scope.row.title}}</p>    
  269.                                         </el-row>
  270.                                         <el-row v-else>
  271.                                             <el-row style="display:flex;align-items: center;">
  272.                                                 <!-- <div style="margin-left:40px;display:inline-block"> -->
  273.                                                     <el-col :span="12">
  274.                                                          <el-input v-model="scope.row.title" placeholder="请填写配置参数名"></el-input>
  275.                                                     </el-col>
  276.                                                 <!-- </div> -->
  277.                                                 <el-col :span="12">
  278.                                                     <el-switch style="margin-left:2px;display:inline-block"
  279.                                                         v-model="scope.row.isText"
  280.                                                         :active-value="1"
  281.                                                         :inactive-value="0"
  282.                                                         active-text="文本"
  283.                                                         @change="changeText(scope.row,scope.$index)">
  284.                                                     </el-switch>
  285.                                                 </el-col>
  286.                                             </el-row>
  287.                                         </el-row>
  288.                                     </template>
  289.                                 </el-table-column>
  290.                                 <el-table-column label="基础">
  291.                                     <template slot-scope="scope" >
  292.                                         <el-row v-if="scope.row.title == '交付时间'">
  293.                                             <el-select v-model="scope.row.oneValue" placeholder="请选择交付时间" style="float:left;width:100%">
  294.                                                 <el-option
  295.                                                     v-for="item in deliverTime"
  296.                                                     :key="item.value"
  297.                                                     :label="item.label"
  298.                                                     :value="item.value"></el-option>
  299.                                             </el-select>
  300.                                         </el-row>
  301.                                         <el-row v-else-if="scope.row.title == '可修改次数'">
  302.                                             <el-input v-model="scope.row.oneValue" placeholder="请输入可修改次数" type="number"></el-input>
  303.                                         </el-row>
  304.                                         <el-row v-else-if="scope.row.title == '商品数量'">
  305.                                             <el-input v-model="scope.row.oneValue" placeholder="请输入商品数量" type="number"></el-input>
  306.                                         </el-row>
  307.                                         <el-row v-else-if="scope.row.title == '价格'">
  308.                                             <el-input v-model="scope.row.oneValue" placeholder="请输入价格" onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"></el-input>
  309.                                         </el-row>
  310.                                         <el-row v-else>
  311.                                             <template v-if="scope.row.isText > 0">
  312.                                                 <el-col :span="16">
  313.                                                     <el-input v-model="scope.row.oneValue" placeholder="请输入服务名"  v-if="scope.row.title == '服务名'"></el-input>
  314.                                                     <el-input v-model="scope.row.oneValue" placeholder="请输入服务描述" v-else-if="scope.row.title == '服务描述'"></el-input>
  315.                                                     <el-input v-model="scope.row.oneValue" placeholder="请输入配置参数" v-else></el-input>
  316.                                                 </el-col>
  317.                                             </template>
  318.                                             <template v-else>
  319.                                                 <el-col :span="16">
  320.                                                 <el-checkbox v-model="scope.row.oneValue" true-label="true"  false-label="false"  style="margin:10px 0 0 15px" ></el-checkbox>
  321.                                                 </el-col>
  322.                                             </template>
  323.                                             <el-col :span="6" class="editBtn" v-if="scope.row.customSort > 5 && scope.row.title !== '价格' && settingValue == 1" style="margin-left:10px">
  324.                                                 <el-button type="text" @click="addCustomeLine(scope.row,scope.$index)">增加</el-button>
  325.                                                 <el-button type="text" @click="delCustomeLine(scope.$index,2)" v-if="scope.$index > 5">删除</el-button>
  326.                                             </el-col>
  327.                                         </el-row>
  328.                                     </template>
  329.                                 </el-table-column>
  330.                                 <el-table-column label="标准">
  331.                                     <template slot-scope="scope">
  332.                                         <el-row v-if="scope.row.title == '交付时间'">
  333.                                             <el-select v-model="scope.row.secondValue" placeholder="请选择交付时间" style="float:left;width:100%">
  334.                                                 <el-option
  335.                                                     v-for="item in deliverTime"
  336.                                                     :key="item.value"
  337.                                                     :label="item.label"
  338.                                                     :value="item.value"></el-option>
  339.                                             </el-select>
  340.                                         </el-row>
  341.                                         <el-row v-else-if="scope.row.title == '可修改次数'">
  342.                                             <el-input v-model="scope.row.secondValue" placeholder="请输入可修改次数" type="number"></el-input>
  343.                                         </el-row>
  344.                                         <el-row v-else-if="scope.row.title == '商品数量'">
  345.                                             <el-input v-model="scope.row.secondValue" placeholder="请输入商品数量" type="number"></el-input>
  346.                                         </el-row>
  347.                                         <el-row v-else-if="scope.row.title == '价格'">
  348.                                             <el-input v-model="scope.row.secondValue" placeholder="请输入价格" onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"></el-input>
  349.                                         </el-row>
  350.                                         <el-row v-else>
  351.                                             <template v-if="scope.row.isText > 0">
  352.                                                 <el-col :span="16">
  353.                                                     <el-input v-model="scope.row.secondValue" placeholder="请输入服务名"  v-if="scope.row.title == '服务名'"></el-input>
  354.                                                     <el-input v-model="scope.row.secondValue" placeholder="请输入服务描述" v-else-if="scope.row.title == '服务描述'"></el-input>
  355.                                                     <el-input v-model="scope.row.secondValue" placeholder="请输入配置参数" v-else></el-input>
  356.                                                 </el-col>
  357.                                             </template>
  358.                                             <template v-else>
  359.                                                 <el-col :span="16">
  360.                                                 <el-checkbox v-model="scope.row.secondValue" true-label="true"  false-label="false"  style="margin:10px 0 0 15px" ></el-checkbox>
  361.                                                 </el-col>
  362.                                             </template>
  363.                                             <el-col :span="6" class="editBtn" v-if="scope.row.customSort > 5 && scope.row.title !== '价格'  && settingValue == 2" style="margin-left:10px">
  364.                                                 <el-button type="text" @click="addCustomeLine(scope.row,scope.$index)">增加</el-button>
  365.                                                 <el-button type="text" @click="delCustomeLine(scope.$index,2)" v-if="scope.$index > 5">删除</el-button>
  366.                                             </el-col>
  367.                                         </el-row>
  368.                                     </template>
  369.                                 </el-table-column>
  370.                                 <el-table-column label="优质" prop="thirdValue">
  371.                                     <template slot-scope="scope" >
  372.                                         <el-row v-if="scope.row.title == '交付时间'">
  373.                                             <el-select v-model="scope.row.thirdValue" placeholder="请选择交付时间" style="float:left;width:100%">
  374.                                                 <el-option
  375.                                                     v-for="item in deliverTime"
  376.                                                     :key="item.value"
  377.                                                     :label="item.label"
  378.                                                     :value="item.value"></el-option>
  379.                                             </el-select>
  380.                                         </el-row>
  381.                                         <el-row v-else-if="scope.row.title == '可修改次数'">
  382.                                             <el-input v-model="scope.row.thirdValue" placeholder="请输入可修改次数" type="number"></el-input>
  383.                                         </el-row>
  384.                                         <el-row v-else-if="scope.row.title == '商品数量'">
  385.                                             <el-input v-model="scope.row.thirdValue" placeholder="请输入商品数量" type="number"></el-input>
  386.                                         </el-row>
  387.                                         <el-row v-else-if="scope.row.title == '价格'">
  388.                                             <el-input v-model="scope.row.thirdValue" placeholder="请输入价格" onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"></el-input>
  389.                                         </el-row>
  390.                                         <el-row v-else>
  391.                                             <template v-if="scope.row.isText > 0">
  392.                                                 <el-col :span="16">
  393.                                                     <el-input v-model="scope.row.thirdValue" placeholder="请输入服务名"  v-if="scope.row.title == '服务名'"></el-input>
  394.                                                     <el-input v-model="scope.row.thirdValue" placeholder="请输入服务描述" v-else-if="scope.row.title == '服务描述'"></el-input>
  395.                                                     <el-input v-model="scope.row.thirdValue" placeholder="请输入配置参数" v-else></el-input>
  396.                                                 </el-col>
  397.                                             </template>
  398.                                             <template v-else>
  399.                                                 <el-col :span="16">
  400.                                                 <el-checkbox v-model="scope.row.thirdValue" true-label="true"  false-label="false"  style="margin:10px 0 0 15px" ></el-checkbox>
  401.                                                 </el-col>
  402.                                             </template>
  403.                                             <el-col :span="6" class="editBtn" v-if="scope.row.customSort > 5 && scope.row.title !== '价格'  && settingValue == 3" style="margin-left:10px">
  404.                                                 <el-button type="text" @click="addCustomeLine(scope.row,scope.$index)">增加</el-button>
  405.                                                 <el-button type="text" @click="delCustomeLine(scope.$index,2)" v-if="scope.$index > 5">删除</el-button>
  406.                                             </el-col>
  407.                                         </el-row>
  408.                                     </template>
  409.                                 </el-table-column>
  410.                             </el-table>
  411.                             <div class="layer" :style="'width:' + layerWidth + 'px' " v-if="settingValue < 3">
  412.                                 <div>
  413.                                     <p class="p1">此处不可编辑</p>
  414.                                     <p class="p2">请在右上角选择配置方可编辑</p>
  415.                                 </div>
  416.                             </div>
  417.                         </div>
  418.                     </div>
  419.                     <div style="margin-top: 70px;">
  420.                         <div class="tableTitle">追加服务</div>
  421.                         <div class="expDelivery" style="width: 1280px;border:1px solid #d5d5d5">
  422.                             <div class="fasterDeliveryTitle" style="height:80px;padding:0 40px;display:flex;justify-content:space-between;align-items:center">
  423.                                 <div class="fasterL"><el-checkbox v-model="showExp">特快交付</el-checkbox></div>
  424.                                 <div class="fasterR" style=""><img src="../../assets/images/goodsAdd/灯泡.png" alt=""></div>
  425.                             </div>
  426.                             <div class="expDeliveryShow" v-if="showExp" style="padding:0 40px;background:#eeeeee">
  427.                                 <el-row style="height:80px;line-height:80px">
  428.                                     <el-col :span="12"><div class="grid-content bg-purple">基础</div></el-col>
  429.                                     <el-col :span="6" style="text-align:right">
  430.                                         <div class="grid-content bg-purple">
  431.                                             时间
  432.                                             <el-select v-model="expressDeliveries[0].deliveryTime" placeholder="请选择时间">
  433.                                                 <el-option
  434.                                                 v-for="item in deliverTime"
  435.                                                 :key="item.value"
  436.                                                 :label="item.label"
  437.                                                 :value="item.value"></el-option>
  438.                                             </el-select>
  439.                                         </div>
  440.                                     </el-col>
  441.                                     <el-col :span="6" style="text-align:right">
  442.                                         <div class="grid-content bg-purple zjje">
  443.                                             <el-row  style="display:flex; margin-top:20px">
  444.                                                 <span>额外</span>
  445.                                                 <el-row class="moneyInput">
  446.                                                     ￥<el-input style="width:160px;" placeholder="" v-model="expressDeliveries[0].price"
  447.                                                     onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"></el-input>
  448.                                                 </el-row>
  449.                                             </el-row>
  450.                                         </div>
  451.                                     </el-col>
  452.                                 </el-row>
  453.                                 <el-row style="height:80px;line-height:80px" v-if="settingValue > 1">
  454.                                     <el-col :span="12"><div class="grid-content bg-purple">标准</div></el-col>
  455.                                     <el-col :span="6" style="text-align:right">
  456.                                         <div class="grid-content bg-purple">
  457.                                             时间
  458.                                             <el-select v-model="expressDeliveries[1].deliveryTime" placeholder="请选择时间">
  459.                                                 <el-option
  460.                                                 v-for="item in deliverTime"
  461.                                                 :key="item.value"
  462.                                                 :label="item.label"
  463.                                                 :value="item.value"></el-option>
  464.                                             </el-select>
  465.                                         </div>
  466.                                     </el-col>
  467.                                     <el-col :span="6" style="text-align:right">
  468.                                         <div class="grid-content bg-purple zjje">
  469.                                             <el-row  style="display:flex;margin-top:20px">
  470.                                                 <span>额外</span>
  471.                                                 <el-row class="moneyInput">
  472.                                                     ￥<el-input style="width:160px;" type="number" placeholder="" v-model="expressDeliveries[1].price"
  473.                                                     onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"></el-input>
  474.                                                 </el-row>
  475.                                             </el-row>
  476.                                         </div>
  477.                                     </el-col>
  478.                                 </el-row>
  479.                                 <el-row style="height:80px;line-height:80px" v-if="settingValue == 3">
  480.                                     <el-col :span="12"><div class="grid-content bg-purple">优质</div></el-col>
  481.                                     <el-col :span="6" style="text-align:right">
  482.                                         <div class="grid-content bg-purple">
  483.                                             时间
  484.                                             <el-select v-model="expressDeliveries[2].deliveryTime" placeholder="请选择时间">
  485.                                                 <el-option
  486.                                                 v-for="item in deliverTime"
  487.                                                 :key="item.value"
  488.                                                 :label="item.label"
  489.                                                 :value="item.value"></el-option>
  490.                                             </el-select>
  491.                                         </div>
  492.                                     </el-col>
  493.                                     <el-col :span="6" style="text-align:right">
  494.                                         <div class="grid-content bg-purple zjje">
  495.                                             <el-row  style="display:flex;margin-top:20px">
  496.                                                 <span>额外</span>
  497.                                                 <el-row class="moneyInput">
  498.                                                     ￥<el-input style="width:160px;" type="number" placeholder="" v-model="expressDeliveries[2].price"
  499.                                                     onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"></el-input>
  500.                                                 </el-row>
  501.                                             </el-row>
  502.                                         </div>
  503.                                     </el-col>
  504.                                 </el-row>
  505.                             </div>
  506.                             <div class="expDeliveryContent">
  507.                                 <div class="expDeliveryContain">
  508.                                     <div v-for="(item, idx) in addtoServices" :key="idx"  style="border-bottom:1px solid #d5d5d5">
  509.                                         <el-form ref="form" :model="item" label-width="80px" style="padding-bottom: 30px">
  510.                                             <el-form-item label="标题" style="margin-top:40px">
  511.                                                 <el-input v-model="item.title" style="width:320px;margin-left:32px" maxlength="20"></el-input>
  512.                                                 <span style="margin-left:10px;">0/20最大</span>
  513.                                                 <el-button type="text" style="float:right;padding-right:20px" @click="delzjfw(idx)" v-if="idx > 0">删除</el-button>
  514.                                             </el-form-item>
  515.                                             <div data-v-4be286b1="" class="el-form-item expdeliDesc">
  516.                                                 <label class="el-form-item__label" style="width: 80px;">描述</label>
  517.                                                 <el-input type="textarea" style="width:620px;margin-left:32px" v-model="item.addtoDesc" maxlength="50"></el-input>
  518.                                                 <span style="margin-left:10px;">0/50最大</span>
  519.                                             </div>
  520.                                             <div style="display:flex;width:790px;margin-left:112px">
  521.                                                 <el-col :span="11"  style="display:flex; align-items: center;">
  522.                                                     额外费用
  523.                                                     <el-row class="moneyInput">
  524.                                                         ￥<el-input style="width:160px;" placeholder="" v-model="item.price" 
  525.                                                         onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"></el-input>
  526.                                                     </el-row>
  528.                                                 </el-col>
  529.                                                 <el-col :span="11">
  530.                                                     额外时间
  531.                                                     <!-- <el-input style="width:190px;"
  532.                                                         placeholder=""
  533.                                                         v-model="item.deliveryTime"
  534.                                                         oninput="if(value>99999)value=99999;if(value.length>5)value=value.slice(0,5);if(value<1 && value)value=1"
  535.                                                         >
  536.                                                     </el-input> -->
  537.                                                     <el-select v-model="item.deliveryTime" placeholder="请选择额外时间">
  538.                                                         <el-option
  539.                                                          v-for="item in deliverTime"
  540.                                                         :key="item.value"
  541.                                                         :label="item.label"
  542.                                                         :value="item.value"></el-option>
  543.                                                     </el-select>
  544.                                                 </el-col>
  545.                                             </div>
  546.                                         </el-form>
  547.                                     </div>
  548.                                 </div>
  549.                             </div>
  550.                             <div class="additionalServive" style="padding:0 40px;height:80px;line-height: 80px;font-size:18px;">
  551.                                 <i class="el-icon-circle-plus" style="font-size:1em;font-weight:bold"><span style="margin-left:20px" @click="addserviceBtn">添加追加服务</span> </i>
  552.                             </div>
  554.                         </div>
  555.                     </div>
  556.                 </div>
  558.                 <div class="nextStepBtn" style="display:flex">
  559.                     <el-button style="margin-top: 20px;" @click="activeIndex = '0'">上一步</el-button>
  560.                     <el-button style="margin-top: 20px;color:#fff;background:#81d8d0" @click="nextStepSecong">下一步</el-button>
  561.                 </div>
  562.                 </el-tab-pane>
  563.                 <el-tab-pane label="" name="2">
  564.                     <div class="multiFlex dispalyFlex" style="margin-top: 30px;" >
  565.                         <div class="addTitle">常见问题解答</div>   
  566.                     </div>
  567.                     <div class="stepsContent1">
  568.                         <div style="margin-top: 20px;" >
  569.                             <div class="alreadyAdded" v-if="faq.length >0">
  570.                                 <div class="tableTitle">添加的问题和答案</div>
  571.                                 <div class="list"  v-for="(item,idx) in faq" :key="item.question+ '-only'">
  572.                                     <div class="item">
  573.                                         <div class="left">{{item.question}}</div>
  574.                                         <div class="right">
  575.                                             <span @click="delFaq(idx)">删除</span>
  576.                                             <span @click="item.show = !item.show">查看详情 ></span>
  577.                                         </div>
  578.                                     </div>
  579.                                     <div class="item-con" v-show="item.show">{{item.answer}}</div>
  580.                                 </div>
  581.                             </div>
  582.                             <div class="tableTitle">
  583.                                 <span>为您的卖家添加问题和答案</span>
  584.                                 <i class="el-icon-circle-plus" style="font-size:1em;font-weight:bold; float:right" v-if="faq.length > 0 && !showAnsForm"><span style="margin-left:5px"  @click="showAnswer">添加常见问题</span> </i>
  585.                             </div>
  586.                             <div v-if="showAnsForm">
  587.                                 <el-input v-model="questionText" maxlength="30" placeholder="添加一个问题。例如：你能翻译成英文吗" style=""></el-input>
  588.                                 <el-input type="textarea" v-model="answerText" maxlength="300" placeholder="添加一个答案。例如：我能将英文翻译成中文。" style="margin-top:20px"></el-input>
  589.                                 <div class="" style="margin:20px auto;width:300px">
  590.                                     <button @click="cancelQ" type="button" class="el-button el-button--default" style="">
  591.                                         <span>取消</span>
  592.                                     </button>
  593.                                     <button @click="addFaq" type="button" class="el-button el-button--default" style="margin-left: 20px; background: rgb(129, 216, 208);color:#fff">
  594.                                         <span>添加</span>
  595.                                     </button>
  596.                                 </div>
  597.                             </div>
  598.                         </div>
  599.                         <div style="margin-top: 70px;">
  600.                             <div class="addTitle">向买家提出要求</div>
  601.                             <div class="" style="color: #666666;margin:28px 0">添加问题以帮助买家为您提供开始处理他们的订单所需的确切信息</div>
  602.                             <el-tag
  603.                                 v-for="tag in askfors"
  604.                                 :key="tag.id+ '-only11'"
  605.                                 closable
  606.                                 @close="closeTag(tag)">
  607.                                 {{tag.content}}
  608.                             </el-tag>
  609.                             <el-button style="background: rgb(129, 216, 208);color:#fff" @click="dialogVisible = true">添加要求</el-button>
  610.                             <el-dialog
  611.                                 title="添加要求"
  612.                                 :visible.sync="dialogVisible"
  613.                                 width="30%"
  614.                                 :before-close="handleClose">
  615.                                 <div style="">
  616.                                     <el-input type="textarea" v-model="askfors_text" placeholder="索取必要的详细信息，例如尺寸、品牌准则等。" :rows="6"></el-input>
  617.                                 </div>
  618.                                 <span slot="footer" class="dialog-footer">
  619.                                     <el-button @click="dialogVisible = false">取消</el-button>
  620.                                     <el-button type="primary" @click="addAsk" style="background: rgb(129, 216, 208);color:#fff">添加</el-button>
  621.                                 </span>
  622.                             </el-dialog>
  623.                         </div>
  624.                     </div>
  626.                     <div class="nextStepBtn" style="width:300px;margin:30px auto">
  627.                         <el-button style="" @click="activeIndex = '1'">上一步</el-button>
  628.                         <el-button style="margin-left:20px;background: rgb(129, 216, 208);color:#fff"  @click="submitAdd">提交</el-button>
  629.                     </div>
  630.                 </el-tab-pane>
  631.                 <el-tab-pane label="" name="3">
  632.                     <div class="merchantRegist" style="text-align:center">
  633.                         <div class="merchantRegistration">
  634.                             <div class="img">
  635.                                 <img src="../../assets/images/goodsAdd/组 13@2x.png" alt="">
  636.                             </div>
  637.                             <div class="submitTitle">提交成功</div>
  638.                             <div class="showDetail">商品提交成功，请前往管理商品列表进行商品的上架吧</div>
  639.                             <div class="autoJump">若10秒后没有自动跳转，请点击<a href="">www.baidu.com</a></div>
  640.                         </div>
  641.                     </div>
  642.                 </el-tab-pane>
  643.                 </el-tabs>
  644.             </div>
  645.         </div>
  647.         <!-- footer部分开始 -->
  648.         <Footer></Footer>
  649.     </div>
  650. </template>
  651. <script>
  652. // import UserHttp from '@/model/UserHttp'
  653. import GoodsHttp from '@/model/GoodsHttp';
  654. // import Editor from "@/components/Editor";
  655. // import EditorBar  from "../../components/Editor";
  656. // import Holstein from '@/components/Nav/Holstein.vue'
  657. import Uploadpics from '@/components/productAddImgs/Uploadimgs.vue';
  658. import UploadAudio from '@/components/productAddAudio/uploadAudio.vue';
  659. import Holstein from '../../components/Nav/Holstein.vue';
  660. import Footer from '@/components/Footer/footer.vue';
  661. import UserHttp from '../../model/UserHttp';
  663. import {
  664.     Quill,
  665.     quillEditor
  666.   } from 'vue-quill-editor'
  667.   import 'quill/dist/quill.core.css'
  668.   import 'quill/dist/quill.snow.css'
  669.   import 'quill/dist/quill.bubble.css'
  670.   //引入font.css 
  671.   import '@/assets/css/font.css'
  672.   // 自定义字体大小
  673.   let Size = Quill.import('attributors/style/size')
  674.   Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
  675.   Quill.register(Size, true)
  677.   // 自定义字体类型
  678.   var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
  679.     '宋体', '黑体'
  680.   ]
  681.   var Font = Quill.import('formats/font')
  682.   Font.whitelist = fonts
  683.   Quill.register(Font, true)
  686. export default {
  687.     components: {
  688.         // EditorBar,
  689.         Holstein,
  690.         Footer,
  691.         Uploadpics,
  692.         UploadAudio,
  693.         quillEditor
  694.     },
  695.     data() {
  696.         var validatesfz = (rule, value, callback) => {
  697.             if (value === '') {
  698.                 callback(new Error('请完成必填项'));
  699.             } else {
  700.                 callback();
  701.             }
  702.         };
  703.         var validateimg = (rule, value, callback) => {
  704.             if (value === '') {
  705.                 callback(new Error('请上传商品图片，默认第一张为封面图'));
  706.             } else {
  707.                 callback();
  708.             }
  709.         };
  710.         return {
  711.             userId:'',
  712.             domain: 'http://yshopapi.inroyltd.com',
  713.             NavTitle: [],
  714.             dialogContImgVisible: false,
  715.             dialogContImgUrl: '',
  716.             addform: {
  717.                 categoryId: '', //商品类目
  718.                 serviceName: '', //商品名称
  719.                 serviceSort: '', //商品排序
  720.                 orderQuantity: '', //可接单量
  721.                 filesTwo: [],
  722.                 Video:"",
  723.                 imgs: [],
  724.                 imgs2: [],
  725.                 serviceDesc: '',
  726.                 videoUrl: []
  727.             },
  728.             videoFlag: false,
  729.             videoUploadPercent: 0,
  730.             //文本编辑器
  731.             editorOption: {
  732.                 placeholder: "请输入"
  733.                 // theme: "snow", // or 'bubble' 
  734.                 // modules: {
  735.                 //     toolbar: {
  736.                 //     container: '#toolbar'
  737.                 //     }
  738.                 // }
  739.             },
  740.             //新增商品 上传视频
  741.             /* 表单验证规则 */
  742.             rulesadd: {
  743.                 categoryId: [
  744.                     {
  745.                         required: true,
  746.                         message: '请选择商品类目',
  747.                         validator: validatesfz,
  748.                         trigger: 'blur'
  749.                     }
  750.                 ],
  751.                 serviceName: [
  752.                     {
  753.                         required: true,
  754.                         message: '请选择商品名称',
  755.                         validator: validatesfz,
  756.                         trigger: 'blur'
  757.                     }
  758.                 ],
  759.                 serviceSort: [{ required: true, message: '请选择商品排序', trigger: 'blur' }],
  760.                 serviceStock: [{ required: true, message: '请选择可接单量', trigger: 'blur' }],
  761.                 filesTwo: [{ required: false, message: '请完成上传', trigger: 'blur' }],
  762.                 video: [{ required: false, message: '请完成上传', trigger: 'blur' }],
  763.                 img: [
  764.                     {
  765.                         required: true,
  766.                         message: '请上传商品图片，默认第一张为封面图',
  767.                         validator: validateimg,
  768.                         trigger: 'blur'
  769.                     }
  770.                 ]
  771.             },
  772.             // editor:null,
  773.             activeIndex: '0',
  774.             // 售卖信息填写
  775.             deliveryTimeOptions:[
  776.                 {
  777.                     value: '24小时内交付',
  778.                     label: '24小时内交付'
  779.                 },
  780.                 {
  781.                     value: '3天内交付',
  782.                     label: '3天内交付'
  783.                 }, 
  784.                 {
  785.                     value: '5天内交付',
  786.                     label: '5天内交付'
  787.                 }, 
  788.                 {
  789.                     value: '随意。',
  790.                     label: '随意。'
  791.                 }
  792.             ],
  793.             showExp:true,
  794.             pricesCustoms: [],
  795.             pricesCustoms1: [],
  796.             pricesCustoms2: [],
  797.             pricesCustoms3: [],
  798.             addtoServices: [
  799.                 {
  800.                     deliveryTime: '',
  801.                     title: '',
  802.                     desc: '',
  803.                     price: ''
  804.                 }
  805.             ],
  806.             expressDeliveries: [
  807.                 {
  808.                     deliveryTime: '',
  809.                     level: 1,
  810.                     price: ''
  811.                 },
  812.                 {
  813.                     deliveryTime: '',
  814.                     level: 2,
  815.                     price: ''
  816.                 },
  817.                 {
  818.                     deliveryTime: '',
  819.                     level: 3,
  820.                     price: ''
  821.                 }
  822.             ],
  823.             faq: [],
  824.             questionText: '',
  825.             answerText: '',
  826.             dialogVisible: false,
  827.             askfors: [],
  828.             askfors_text: '',
  829.             setting:[
  830.                 {
  831.                     value: 1,
  832.                     label: "基础"
  833.                 },
  834.                 {
  835.                     value: 2,
  836.                     label: "基础,标准"
  837.                 },
  838.                 {
  839.                     value: 3,
  840.                     label: "基础,标准,优质"
  841.                 }
  842.             ],
  843.             settingValue: 0,
  844.             deliverTime: [
  845.                 {
  846.                     value: '1',
  847.                     label: '1天'
  848.                 },
  849.                 {
  850.                     value: '2',
  851.                     label: '2天'
  852.                 },
  853.                 {
  854.                     value: '3',
  855.                     label: '3天'
  856.                 },
  857.                 {
  858.                     value: '4',
  859.                     label: '4天'
  860.                 },
  861.                 {
  862.                     value: '5',
  863.                     label: '5天'
  864.                 },
  865.                 {
  866.                     value: '6',
  867.                     label: '6天'
  868.                 },
  869.                 {
  870.                     value: '7',
  871.                     label: '7天'
  872.                 },
  873.                 {
  874.                     value: '10',
  875.                     label: '10天'
  876.                 },
  877.                 {
  878.                     value: '14',
  879.                     label: '14天'
  880.                 },{
  881.                     value: '21',
  882.                     label: '21天'
  883.                 },{
  884.                     value: '30',
  885.                     label: '30天'
  886.                 },{
  887.                     value: '60',
  888.                     label: '60天'
  889.                 },{
  890.                     value: '90',
  891.                     label: '90天'
  892.                 }
  893.             ],
  894.             tableWidth: 640,
  895.             showAnsForm: true,
  896.             id:'',                                        // 商品ID
  897.             layerWidth: 0,
  898.             pageTitle: '新增商品'
  899.         };
  900.     },
  902.     watch: {
  903.         content() {
  904.             this.editor.txt.html(this.content);
  905.         },
  906.         settingValue: {
  907.             handler(newVal, oldVal) {
  908.                 if (newVal == 1) {
  909.                     this.layerWidth = 640
  910.                     if (this.expressDeliveries[0].deliveryTime) {
  911.                         this.expressDeliveries = [
  912.                             {
  913.                                 deliveryTime:  this.expressDeliveries[0].deliveryTime,
  914.                                 level: 1,
  915.                                 price: this.expressDeliveries[0].price
  916.                             }
  917.                         ]
  918.                     } else {
  919.                         this.expressDeliveries = [
  920.                             {
  921.                                 deliveryTime: '',
  922.                                 level: 1,
  923.                                 price: ''
  924.                             }
  925.                         ]
  926.                     }
  927.                 } else if (newVal == 2){
  928.                     this.layerWidth = 320
  929.                     if (this.expressDeliveries[0].deliveryTime && this.expressDeliveries[1] && this.expressDeliveries[1].deliveryTime) {
  930.                         this.expressDeliveries = [
  931.                                 {
  932.                                 deliveryTime: this.expressDeliveries[0].deliveryTime,
  933.                                 level: 1,
  934.                                 price: this.expressDeliveries[0].price
  935.                             },
  936.                                 {
  937.                                 deliveryTime: this.expressDeliveries[1].deliveryTime,
  938.                                 level: 2,
  939.                                 price: this.expressDeliveries[1].price
  940.                             }
  941.                         ]
  942.                     } else {
  943.                         this.expressDeliveries = [
  944.                                 {
  945.                                 deliveryTime: '',
  946.                                 level: 1,
  947.                                 price: ''
  948.                             },
  949.                                 {
  950.                                 deliveryTime: '',
  951.                                 level: 2,
  952.                                 price: ''
  953.                             }
  954.                         ]
  955.                     }
  956.                 } else {
  957.                     this.layerWidth = 0
  958.                     this.expressDeliveries = [
  959.                             {
  960.                             deliveryTime: '',
  961.                             level: 1,
  962.                             price: ''
  963.                         },
  964.                             {
  965.                             deliveryTime: '',
  966.                             level: 2,
  967.                             price: ''
  968.                         },
  969.                         {
  970.                             deliveryTime: '',
  971.                             level: 3,
  972.                             price: ''
  973.                         }
  974.                     ]
  975.                 }
  976.             },
  977.             deep: true
  978.         },
  979.     },
  980.     async mounted() {
  981.         // this.mountServiceCate()
  982.         var res = await GoodsHttp.serviceProCategory();
  983.         this.NavTitle = res.data.biz.content;
  984.         this.init()
  985.         if(this.$cookie){
  986.             this.userId = JSON.parse(this.$cookie.get('loginInfo')).id
  987.         }
  988.         // 编辑商品时带参数id，新增不带
  989.         if (this.$route.query.id) { 
  990.             this.id = this.$route.query.id;
  991.             this.getDetail();
  992.             this.pageTitle = '编辑商品'
  993.         }
  994.     },
  995.     methods: {
  996.         init() {
  997.             this.settingValue = 3;
  998.             let titleArr = ['服务名','服务描述','交付时间','可修改次数','商品数量','价格']
  999.                 let newArr = [];
  1000.                 for (const i in titleArr) {
  1001.                     let obj = {
  1002.                         title: titleArr[i],
  1003.                         isText: 1,
  1004.                         oneValue: '',
  1005.                         secondValue: '',
  1006.                         thirdValue: '',
  1007.                         customSort: parseInt(i) + 1
  1008.                     }
  1009.                     newArr.push(obj)
  1010.                 }
  1011.                 let obj2 = {
  1012.                     title: '',
  1013.                     isText: 1,
  1014.                     oneValue: '',
  1015.                     secondValue: '',
  1016.                     thirdValue: '',
  1017.                     customSort: 6
  1018.                 }
  1019.                 newArr.splice(5, 0,obj2)
  1020.                 newArr.forEach((item,index) => {
  1021.                     if (item.title == '价格') {
  1022.                         item.customSort = parseInt(index) + 1
  1023.                     }
  1024.                 })
  1025.                 this.pricesCustoms = newArr
  1026.         },
  1027.         getDetail() {
  1028.             this.$http.get('/api/serviceProduct/' + this.id).then(res => {
  1029.                 // this.addform = res.data.biz;
  1030.                     this.addform.serviceName = res.data.biz.serviceName
  1031.                     this.addform.serviceSort = res.data.biz.serviceSort
  1032.                     this.addform.orderQuantity = res.data.biz.orderQuantity
  1033.                     this.addform.categoryId = res.data.biz.categoryId
  1034.                     this.addform.serviceDesc = res.data.biz.serviceDesc
  1035.                 if (res.data.biz.files.length > 0) {
  1036.                     this.addform.imgs = [];
  1037.                     // 视频图片处理
  1038.                     let imgArr = []
  1039.                     let imgArr2 = []
  1040.                     res.data.biz.files.forEach(item => {
  1041.                         if (item.fileType == 3) {
  1042.                             this.addform.Video = item.fileUrl
  1043.                             this.addform.videoUrl.push(item)
  1044.                         } else {
  1045.                             // let obj = {
  1046.                             //     name: '',
  1047.                             //     url:item.fileUrl,
  1048.                             //     fileType: item.fileType,
  1049.                             // }
  1050.                             let obj2 = {
  1051.                                 name: '',
  1052.                                 url:  'http://yshopapi.inroyltd.com' + item.fileUrl,
  1053.                             }
  1054.                             imgArr.push(item)
  1055.                             imgArr2.push(obj2)
  1056.                         }
  1057.                     })
  1058.                     this.addform.imgs2 = imgArr2
  1059.                     this.addform.imgs = imgArr
  1060.                 } else {
  1061.                     this.addform.Video = ""
  1062.                     this.addform.videoUrl = []
  1063.                     this.addform.imgs = []
  1064.                 }
  1065.                     this.settingValue = res.data.biz.pricesCustomsCount;
  1066.                     if (res.data.biz.expressDeliveries.length > 0) {
  1067.                         this.expressDeliveries = res.data.biz.expressDeliveries;
  1068.                     } else {
  1069.                         this.showExp = false
  1070.                     }
  1071.                     if (res.data.biz.addtoServices.length > 0) {
  1072.                         this.addtoServices = res.data.biz.addtoServices;
  1073.                     }
  1074.                     this.faq = res.data.biz.faq;
  1075.                     if (res.data.biz.wnAskfors) {
  1076.                         this.askfors = res.data.biz.wnAskfors
  1077.                     }
  1078.                     //配置参数
  1079.                     this.pricesCustoms = res.data.biz.pricesCustoms;
  1080.                     if (res.data.biz.pricesCustoms.length == 6) { //当编辑时没有选择其他配置参数时，像数组里追加一个空数据
  1081.                         let obj = {
  1082.                             title: '',
  1083.                             isText: 1,
  1084.                             oneValue: '',
  1085.                             secondValue: '',
  1086.                             thirdValue: '',
  1087.                             customSort: 6
  1088.                         }
  1089.                         this.pricesCustoms.splice(5, 0,obj)
  1090.                     }
  1091.                     // 常见问题
  1092.                     let faqArr = res.data.biz.faq
  1093.                     faqArr.forEach(item => {
  1094.                         item.show = false
  1095.                     })
  1096.                     this.faq = JSON.parse(JSON.stringify(faqArr))
  1098.             })
  1099.         },
  1100.         async submitaddbasic(formName) {
  1101.             this.$refs[formName].validate((valid) => {
  1102.                 if (valid) {
  1103.                     console.log(this.addform)
  1104.                     if (this.addform.imgs.length == 0) {
  1105.                         this.$message.error('请上传商品图片')
  1106.                         return
  1107.                     }
  1108.                     if (!this.addform.serviceDesc) {
  1109.                         this.$message.error('请填写商品描述')
  1110.                         return
  1111.                     }
  1112.                     this.activeIndex = '1';
  1113.                 } else {
  1114.                     this.$message.error('请完成新增商品基本信息填写');
  1115.                     return false;
  1116.                 }
  1117.             });
  1118.         },
  1119.         handleChange(cateId) {
  1120.             this.addform.categoryId = cateId[cateId.length - 1];
  1121.         },
  1122.         //上传图片
  1123.         //【内容图删除事件】
  1124.         handleContImgRemove: function (file, fileList) {
  1125.             console.log(file.url)
  1126.             let link = file.url.replace('http://yshopapi.inroyltd.com', '')
  1127.             this.addform.imgs.forEach((item,idx) => {
  1128.                 if (item.fileUrl == link) {
  1129.                     this.addform.imgs.splice(idx, 1)
  1130.                 }
  1131.             })
  1132.             console.log(this.addform.imgs)
  1133.             // this.addform.imgs.splice(0, this.addform.imgs.length, ...fileList);
  1134.         },
  1135.         handleAvatarSuccess(res) {
  1136.             this.addform.imgs.push({
  1137.                 fileType:1,
  1138.                 fileUrl: res[0].fileUrl,
  1139.                 createTime: '',
  1140.                 fileId: ''
  1141.                 });
  1142.         },
  1143.         beforeUploadVideo(file) {
  1144.             console.log(file)
  1145.             const isLt10M = file.size / 1024 / 1024  < 10;
  1146.             if (['video/am', 'video/mov','video/mvb','video/rm','video/flv','video/mp4'].indexOf(file.type) == -1) {
  1147.                 this.$message.error('请上传正确的视频格式');
  1148.                 return false;
  1149.             }
  1150.             if (!isLt10M) {
  1151.                 this.$message.error('上传视频大小不能超过200MB哦!');
  1152.                 return false;
  1153.             }
  1154.         },
  1155.         handleContvideoRemove: function (file, fileList) {
  1156.             console.log(file.url)
  1157.             let link = file.url.replace('http://yshopapi.inroyltd.com/api/uploadVideo', '')
  1158.             this.addform.videoUrl.forEach((item,idx) => {
  1159.                 if (item.fileUrl == link) {
  1160.                     this.addform.videoUrl.splice(idx, 1)
  1161.                 }
  1162.             })
  1163.             console.log(this.addform.videoUrl)
  1164.             // this.addform.imgs.splice(0, this.addform.imgs.length, ...fileList);
  1165.         },
  1166.         beforeUploadImage(file) {
  1167.             if (['image/png', 'image/jpg','image/jpeg'].indexOf(file.type) == -1) {
  1168.                 this.$message.error('请上传正确的图片格式');
  1169.                 return false;
  1170.             }
  1171.         },
  1172.         uploadImage(params) {
  1173.             let form = new FormData();
  1174.             form.append('image', params.file);
  1175.             this.$http.post('http://yshopapi.inroyltd.com/api/uploadImage',form).then(res => {
  1176.                 this.addform.imgs.push({
  1177.                     fileId: '',
  1178.                     fileType:1, 
  1179.                     fileUrl: res.data[0].fileUrl,
  1180.                     createTime: ''
  1181.                 });
  1182.             });
  1183.         },
  1184.         //内容图数量限制3张
  1185.         exceedTips: function () {
  1186.             this.$message.error('最多只能上传19张图片');
  1187.         },
  1188.         //【内容图片预览事件】
  1189.         handleContImgPreview: function (file) {
  1190.             this.dialogContImgUrl = file.url;
  1191.             this.dialogContImgVisible = true;
  1192.         },
  1193.         // 点击添加追加服务
  1194.         addserviceBtn() {
  1195.             let obj = {
  1196.                 title: '',
  1197.                 addtoDesc: '',
  1198.                 price: '',
  1199.                 deliveryTime: ''
  1200.             };
  1201.             this.addtoServices.push(obj)
  1202.         },
  1203.         handleClose(done) {
  1204.             this.$confirm('确认关闭？')
  1205.             .then(function()  {
  1206.                 done();
  1207.             })
  1208.             .catch(function()  {});
  1209.         },
  1210.         // 提交信息
  1211.         submitAdd() {
  1212.             let dt = {
  1213.                 addtoServices: this.addtoServices,
  1214.                 askfors: this.askfors,
  1215.                 categoryId: this.addform.categoryId,
  1216.                 createUser: this.userId,
  1217.                 faq: this.faq,
  1218.                 files: this.addform.videoUrl.concat(this.addform.imgs),
  1219.                 serviceName: this.addform.serviceName,
  1220.                 serviceSort: this.addform.serviceSort,
  1221.                 serviceDesc: this.addform.serviceDesc,
  1222.                 orderQuantity: this.addform.orderQuantity
  1223.                 // pricesCustoms: this.pricesCustoms
  1224.             }
  1225.             if (!this.addtoServices[0].price) {
  1226.                 dt.addtoServices = [];
  1227.             }
  1228.             // 特快交付
  1229.             if (this.showExp) {
  1230.                 dt.expressDeliveries = this.expressDeliveries
  1231.             }
  1232.             // 配置参数
  1233.             let arr = this.pricesCustoms;
  1234.             console.log(this.settingValue)
  1235.             if (this.settingValue == 1) {
  1236.                 arr.forEach(item => {
  1237.                     item.secondValue = ''
  1238.                     item.thirdValue = ''
  1239.                 })
  1240.             }
  1241.             if (this.settingValue == 2) {
  1242.                 arr.forEach(item => {
  1243.                     item.thirdValue = ''
  1244.                 })
  1245.             }
  1246.             arr.forEach((item,index) => {
  1247.                 if (item.title == '') {
  1248.                     arr.splice(index, 1)
  1249.                 }
  1250.             })
  1251.             dt.pricesCustoms = arr
  1252.             let url = '/api/serviceProduct/add'
  1253.             if (this.id) { // 编辑商品
  1254.                 url = '/api/serviceProduct/update';
  1255.                 dt.uid = this.id
  1256.             }   
  1257.             this.$http.post(url, dt).then(() => {
  1258.                 if (this.id) { // 编辑商品
  1259.                     this.$message.success('商品修改成功');
  1260.                 } else {
  1261.                     this.$message.success('商品添加成功');
  1262.                 }
  1263.                 this.activeIndex = "3"
  1264.             })
  1265.         },
  1266.         addAsk() {
  1267.             if (!this.askfors_text) {
  1268.                 this.$message.error('请输入要求')
  1269.                 return
  1270.             }
  1271.             let obj = {
  1272.                 id: '',
  1273.                 content: this.askfors_text
  1274.             }
  1275.             this.askfors.push(obj);
  1276.             console.log(this.askfors)
  1277.             this.dialogVisible = false;
  1278.             this.askfors_text = ''
  1279.         },
  1280.         addCustomeLine(val,index) {
  1281.             if (this.settingValue == 1) {
  1282.                 if (val.isText && !val.oneValue || !val.title) {
  1283.                     this.$message.error('请填写信息')
  1284.                     return
  1285.                 }
  1286.             } else if (this.settingValue == 2){
  1287.                 if (val.isText && (!val.oneValue || !val.secondValue) || !val.title) {
  1288.                     this.$message.error('请填写信息')
  1289.                     return
  1290.                 }
  1291.             } else {
  1292.                 if (val.isText && (!val.oneValue || !val.secondValue || !val.thirdValue) || !val.title) {
  1293.                     this.$message.error('请填写信息')
  1294.                     return
  1295.                 }
  1296.             }
  1297.             let obj = {
  1298.                 title: '',
  1299.                 isText: 1,
  1300.                 oneValue: '',
  1301.                 secondValue: '',
  1302.                 thirdValue: '',
  1303.                 customSort: index + 1
  1304.             }
  1305.             this.pricesCustoms.splice(index + 1, 0, obj)
  1306.         },
  1307.         delCustomeLine(index, type) {
  1308.             this.pricesCustoms.splice(index, 1)
  1309.         },
  1310.         delzjfw(idx) {
  1311.             this.addtoServices.splice(idx, 1)
  1312.         },
  1313.         addFaq() {
  1314.             if (this.questionText && this.answerText) {
  1315.                 let obj = {
  1316.                     question: this.questionText,
  1317.                     answer: this.answerText,
  1318.                     show: false
  1319.                 }
  1320.                 this.faq.push(obj)
  1321.                 this.questionText = "";
  1322.                 this.answerText = "";
  1323.                 this.showAnsForm = false
  1324.             } else {
  1325.                 this.$message.error('请输入问题和答案')
  1326.             }
  1327.         },
  1328.         delFaq(idx) {
  1329.             this.faq.splice(idx, 1);
  1330.             if (this.faq.length == 0) {
  1331.                 this.showAnsForm = true
  1332.             }
  1333.         },
  1334.         cancelQ() {
  1335.             this.questionText = '';
  1336.             this.answerText = ''
  1337.         },
  1338.         closeTag(tag) {
  1339.             this.askfors.splice(this.askfors.indexOf(tag), 1);
  1340.         },
  1341.         changeText(e,idx) {
  1342.             console.log(e)
  1343.             console.log(idx)
  1344.             let arr = this.pricesCustoms[idx];
  1345.             arr.isText = e.isText
  1346.         },
  1347.         nextStepSecong() {
  1348.             if (this.settingValue == 1) {
  1349.                 let arr = this.pricesCustoms;
  1350.                 for (const i in arr) {
  1351.                     if (arr[i].isText && arr[i].title && !arr[i].oneValue) {
  1352.                         this.$message.error('请填写' +arr[i].title)
  1353.                         return false
  1354.                     }
  1355.                 }
  1356.                 if (this.showExp) {
  1357.                     if (!this.expressDeliveries[0].deliveryTime || !this.expressDeliveries[0].price) {
  1358.                         this.$message.error('请填写特快交付信息')
  1359.                         return false
  1360.                     }
  1361.                 }
  1362.             } else if (this.settingValue == 2) {
  1363.                 let arr = this.pricesCustoms;
  1364.                 for (const i in arr) {
  1365.                     if (arr[i].isText && arr[i].title && !arr[i].oneValue) {
  1366.                         this.$message.error('请填写' +arr[i].title)
  1367.                         return false
  1368.                     }
  1369.                 }
  1370.                 for (const i in arr) {
  1371.                     if (arr[i].isText && arr[i].title && !arr[i].secondValue) {
  1372.                         this.$message.error('请填写' +arr[i].title)
  1373.                         return false
  1374.                     }
  1375.                 }
  1376.                 if (this.showExp) {
  1377.                     for (const i in this.expressDeliveries) {
  1378.                         let arr = this.expressDeliveries
  1379.                         if (!arr[i].deliveryTime  || !arr[i].price) {
  1380.                             this.$message.error('请填写特快交付信息')
  1381.                             return false
  1382.                         }
  1383.                     }
  1384.                 }
  1385.             } else {
  1386.                 let arr = this.pricesCustoms;
  1387.                 for (const i in arr) {
  1388.                     if (arr[i].isText && arr[i].title && !arr[i].oneValue) {
  1389.                         this.$message.error('请填写' +arr[i].title)
  1390.                         return false
  1391.                     }
  1392.                     if (arr[i].isText && arr[i].title && !arr[i].secondValue) {
  1393.                         this.$message.error('请填写' +arr[i].title)
  1394.                         return false
  1395.                     }
  1396.                     if (arr[i].isText && arr[i].title && !arr[i].thirdValue) {
  1397.                         this.$message.error('请填写' +arr[i].title)
  1398.                         return false
  1399.                     }
  1400.                 }
  1401.                  if (this.showExp) {
  1402.                      for (const i in this.expressDeliveries) {
  1403.                         let arr = this.expressDeliveries
  1404.                         if (!arr[i].deliveryTime  || !arr[i].price) {
  1405.                             this.$message.error('请填写特快交付信息')
  1406.                             return false
  1407.                         }
  1408.                     }
  1409.                 }
  1410.             }
  1411.             this.activeIndex = '2'
  1412.         },
  1413.         checkNum(e) {
  1414.             if (e < 1) {
  1415.                 this.addform.serviceStock = 1;
  1416.             } else if (e > 99999) {
  1417.                 this.addform.serviceStock = 99999;
  1418.             }
  1419.         },
  1420.         uploadVideoProcess(event, file, fileList){
  1421.             this.videoFlag = true;
  1422.             this.videoUploadPercent = file.percentage;
  1423.         },
  1424.         handleVideoSuccess(res, file) {                               //获取上传图片地址
  1425.             this.videoFlag = false;
  1426.             this.videoUploadPercent = 0;
  1427.             if(res){
  1428.                 this.addform.videoUrl = [];
  1429.                 this.addform.Video = res[0].fileUrl;
  1430.                 this.addform.videoUrl.push({ 
  1431.                     fileType: 3, 
  1432.                     fileUrl:res[0].fileUrl,
  1433.                     fileId:'',
  1434.                     createTime:'' });
  1435.             }else{
  1436.                 this.$message.error('视频上传失败，请重新上传！');
  1437.             }
  1438.         },
  1439.         showAnswer () {
  1440.             if (this.faq.length == 10) {
  1441.                 this.$message.warning('最多添加十个问题哦~');
  1442.                 return false
  1443.             }
  1444.             this.showAnsForm = true; 
  1445.         }
  1446.     }
  1448. };
  1449. </script>
  1450. <style >
  1451. /* 隐藏el-tals标签头部 */
  1452. .merchantRegistration .el-tabs__header {
  1453.     display: none !important;
  1454. }
  1455. .merchantRegistration  .el-steps {
  1456.     margin-top: 20px;
  1457. }
  1458. .moneyInput {
  1459.         width: 200px;
  1460.         border: 1px solid #DCDFE6;
  1461.         border-radius: 4px;
  1462.         display: flex;
  1463.         align-items: center;
  1464.         padding-left: 5px;
  1465.         margin-left: 5px;
  1466.     }
  1467. .moneyInput .el-input__inner {
  1468.         border: none;
  1469.     }
  1470.     .zjje {
  1471.         height: 40px;
  1472.         line-height: 40px;
  1473.         float: right;
  1474.     }
  1475.     .zjje .moneyInput {
  1476.         width: 220px;
  1477.         background-color: #fff;
  1478.     }
  1479.     .zjje  .moneyInput .el-input__inner {
  1480.         width: 200px;
  1481.     }
  1482.     .upload-demo {
  1483.         width: 360px;
  1484.     }
  1485.     input::-webkit-outer-spin-button,
  1486.     input::-webkit-inner-spin-button {
  1487.     -webkit-appearance: none;
  1488.     }
  1489.     input[type="number"]{
  1490.     -moz-appearance: textfield;
  1491.     }
  1492.     .stepsContent1 .el-select .el-input__inner {
  1493.         text-align: left;
  1494.     }
  1495.     /* .el-select-dropdown__item {
  1496.         text-align: center;
  1497.     } */
  1498. </style>
  1499. <style scoped>
  1500. .home {
  1501.     width: 100%;
  1502. }
  1503. .center {
  1504.     margin: 0 320px;
  1505. }
  1507. /*  */
  1508. .addTitle {
  1509.     height: 29px;
  1510.     font-size: 30px;
  1511.     font-family: Source Han Sans CN;
  1512.     font-weight: bold;
  1513.     color: #000000;
  1514.     line-height: 24px;
  1515. }
  1516. .merchantRegist {
  1517.     width: 100%;
  1518. }
  1519. .merchantRegistration {
  1520.     width: 1280px;
  1521.     margin: 50px auto;
  1522. }
  1523. .stepsContent {
  1524.     margin: 20px 0;
  1525. }
  1526. .el-step__head.is-process {
  1527.     color: #303133 !important;
  1528.     border-color: #303133 !important;
  1529. }
  1530. .el-step__head.is-success,
  1531. .el-step__title.is-success {
  1532.     color: #81d8d0 !important;
  1533.     border-color: #81d8d0 !important;
  1534. }
  1535. .el-card__body > div {
  1536.     margin: 10px 0;
  1537. }
  1538. /*  */
  1539. .boldLabel {
  1540.     color: #000000;
  1541.     font-size: 18px;
  1542.     font-weight: bold;
  1543. }
  1544. /*  */
  1545. .upload-demo /deep/ ul,
  1546. .upload-demo /deep/ .el-upload-list {
  1547.     display: flex !important;
  1548.     justify-content: space-between !important;
  1549.     align-items: center !important;
  1550. }
  1551. .upload-demo /deep/ .el-upload-list__item {
  1552.     width: 120px !important;
  1553. }
  1554. .el-upload-list--picture /deep/ .el-upload-list__item {
  1555.     width: 120px !important;
  1556. }
  1557. /*  */
  1558.     .tableTitle{
  1559.         font-size: 18px;
  1560.         color: #000000;
  1561.         font-weight: bold;
  1562.         margin: 41px 0 18px 0;
  1563.     }
  1564.     table{
  1565.         border-collapse:collapse;
  1566.         border: 1px solid #d8d8d8;
  1567.         }
  1568.     .el-table__header td,th{
  1569.         border: 1px solid #d8d8d8;
  1570.     }
  1571.     tbody tr {
  1572.         height:70px;
  1573.         line-height: 70px;
  1574.         /* text-align: center; */
  1575.     }
  1576.     tbody tr >>>.el-textarea__inner{
  1577.         height: 160px;
  1578.     }
  1579.     tbody tr >>>.el-textarea__inner,
  1580.     tbody tr >>>.el-input__inner{
  1581.         border: none;
  1582.     }
  1583.     .slide-fade-enter-active {
  1584.     transition: all .8s ease;
  1585.     }
  1586.     .slide-fade-leave-active {
  1587.     transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  1588.     }
  1589.     .slide-fade-enter, .slide-fade-leave-to
  1590.     /* .slide-fade-leave-active for below version 2.1.8 */ {
  1591.     transform: translateX(10px);
  1592.     opacity: 0;
  1593.     }
  1594.     /*  */
  1595.     .expdeliDesc .expDesctextarea .el-textarea__inner{
  1596.         height:140px !important;
  1597.     }
  1598.     .el-tag {
  1599.         margin-right: 10px;
  1600.     }
  1601.     .alreadyAdded .list {
  1602.          border-bottom: 1px solid #dddddd;
  1603.     }
  1604.     .alreadyAdded .list .item{
  1605.         line-height: 30px;
  1606.         padding: 10px 0;
  1607.         display: flex;
  1608.         justify-content: space-between;
  1609.     }
  1610.     .alreadyAdded .list .item-con {
  1611.         padding: 10px 0;
  1612.     }
  1613.     .alreadyAdded .list .item span {
  1614.         margin-left: 20px;
  1615.     }
  1616.     .alreadyAdded .list .item span:hover {
  1617.         color: rgb(129, 216, 208);
  1618.     }
  1620. </style>
  1621. <style lang="scss">
  1622.     .tableCon {
  1623.         display: flex;
  1624.         .leftTitle {
  1625.             width: 320px;
  1626.             .item {
  1627.                 width: 100%;
  1628.                 height: 60px;
  1629.                 line-height: 60px;
  1630.                 border-bottom: 1px solid #d8d8d8;
  1631.                 input {
  1632.                     border: none;
  1633.                     background-color: rgb(238, 238, 238);
  1634.                     width: 140px;
  1635.                     padding-left: 0;
  1636.                 }
  1637.             }
  1638.         }
  1639.         .valueBox {
  1640.             width: 320px;
  1641.             .item {
  1642.                 position: relative;
  1643.                 width: 100%;
  1644.                 height: 60px;
  1645.                 line-height: 60px;
  1646.                 border-bottom: 1px solid #d8d8d8;
  1647.                 border-right: 1px solid #d8d8d8;
  1648.                 background-color: #fff;
  1649.                 input {
  1650.                     border: none;
  1651.                 }
  1652.             }
  1653.             .editBtn {
  1654.                 position: absolute;
  1655.                 right: 10px;
  1656.                 top: 0;
  1657.             }
  1658.         }
  1659.     }
  1660.     .tableInfro {
  1661.         position: relative;
  1662.         .layer {
  1663.             position: absolute;
  1664.             right: 0;
  1665.             top: 0;
  1668.             width: 0;
  1669.             height: 100%;
  1670.             background-color: rgba(238, 238, 238,0.8);
  1671.             z-index: 10;
  1672.             display: flex;
  1673.             align-items: center;
  1674.             justify-content: center;
  1675.             text-align: center;
  1677.             .p1 {
  1678.                 font-size: 34px;
  1679.             }
  1680.             .p2 {
  1681.                 font-size: 14px;
  1682.                 color: red;
  1683.             }
  1684.         }
  1685.         .el-input__inner {
  1686.             border: none;
  1687.         }
  1688.     }
  1689.     .videoBox {
  1690.         width: 360px;
  1691.         height: 180px;
  1692.     }
  1693. </style>