src/api/couponpackage.js

@@ -103,4 +103,30 @@ export function packageImport(data, config) {
       config: config,
       data
   })
-}
+}
+
+export function importPhone(data, config) {
+  return request({
+    url: '/couponPackageDetail/importPhone',
+    method: 'post',
+    config: config,
+    data
+  })
+}
+
+export function sendSmsInPhone(data, config) {
+  return request({
+    url: '/couponPackageDetail/sendSmsInPhone',
+    method: 'post',
+    config: config,
+    data
+  })
+}
+
+export function getSmsTemplateByType(query) {
+  return request({
+    url: '/couponPackageDetail/getSmsTemplateByType',
+    method: 'get',
+    params: query
+  })
+}

src/views/promotion/coupon.vue

@@ -100,6 +100,25 @@
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width='800px'>
       <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
         style="margin-left:20px;">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="抵用类型" prop="type">
+              <el-select v-model="dataForm.voucherType" style="width:100%">
+                <el-option v-for="type in voucherTypeData" :key="type.value" :label="type.label" :value="type.value" />
+              </el-select>
+              <span v-if="dataForm.voucherType==3" style="color: red;display: inline-block">说明：用户领券后可0元兑换指定商品</span>
+            </el-form-item>
+
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="使用渠道" prop="channelId">
+              <el-select v-model="dataForm.channelId" style="width:100%">
+                <el-option v-for="type in channels" :key="type.id" :label="type.name" :value="type.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
         <el-form-item label="优惠券名称" prop="name">
           <el-input v-model="dataForm.name" />
         </el-form-item>
@@ -117,29 +136,29 @@
         <el-form-item label="标签" prop="tag">
           <el-input v-model="dataForm.tag" />
         </el-form-item>
-        <el-form-item label="最低消费" prop="min">
+        <el-form-item label="最低消费" prop="min" v-if="dataForm.voucherType!=3">
           <el-input v-model="dataForm.min">
             <template slot="append">元</template>
           </el-input>
         </el-form-item>
+
         <el-row>
           <el-col :span="12">
-            <el-form-item label="每人限领" prop="limit">
-              <el-input v-model="dataForm.limit">
-                <template slot="append">张</template>
+            <el-form-item v-if="dataForm.voucherType==3" label="兑换商品数" prop="goodsNum">
+              <el-input disabled v-model="dataForm.goodsNum">
+                <template slot="append">件</template>
               </el-input>
             </el-form-item>
           </el-col>
+        </el-row>
+        <el-row>
           <el-col :span="12">
-            <el-form-item label="使用渠道" prop="channelId">
-              <el-select v-model="dataForm.channelId" style="width:100%">
-                <el-option v-for="type in channels" :key="type.id" :label="type.name" :value="type.id" />
-              </el-select>
+            <el-form-item label="每人限领" prop="limit">
+              <el-input v-model="dataForm.limit">
+                <template slot="append">张</template>
+              </el-input>
             </el-form-item>
           </el-col>
-        </el-row>
-
-        <el-row>
           <el-col :span="12">
             <el-form-item label="分发类型" prop="type">
               <el-select v-model="dataForm.type" style="width:100%">
@@ -147,16 +166,8 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="抵用类型" prop="type">
-              <el-select v-model="dataForm.voucherType" style="width:100%">
-                <el-option v-for="type in voucherTypeData" :key="type.value" :label="type.label" :value="type.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
         </el-row>
-
-        <el-form-item :label="dataForm.voucherType == 1 ? '满减金额' : '折扣率'" prop="discount">
+        <el-form-item v-if="dataForm.voucherType!=3" :label="dataForm.voucherType == 1 ? '满减金额' : '折扣率'" prop="discount">
           <el-input v-model="dataForm.discount">
             <template slot="append">元（或折扣率1-100%）</template>
           </el-input>
@@ -193,8 +204,8 @@
         </el-form-item>
         <el-form-item label="商品限制范围">
           <el-radio-group v-model="dataForm.goodsType">
-            <el-radio-button :label="0">全场通用</el-radio-button>
-            <el-radio-button :label="1">指定分类</el-radio-button>
+            <el-radio-button :label="0" v-if="dataForm.voucherType!=3">全场通用</el-radio-button>
+            <el-radio-button :label="1" v-if="dataForm.voucherType!=3">指定分类</el-radio-button>
             <el-radio-button :label="2">指定商品</el-radio-button>
           </el-radio-group>
         </el-form-item>
@@ -228,7 +239,7 @@ import { createStorage, uploadPath } from "@/api/storage";
 import { defaultCouponTypeOptions, ArrayToObject } from "@/api/enumUtils"
 import { getToken } from "@/utils/auth";
 
- 
+
 const voucherTypeData = [
   {
     label: "立减券",
@@ -238,6 +249,10 @@ const voucherTypeData = [
     label: "折扣券",
     value: 2,
   },
+  {
+    label: "商品兑换券",
+    value: 3,
+  },
 ];
 
 
@@ -267,7 +282,7 @@ export default {
         }
       }
       return ''
-    }, 
+    },
     formatGoodsType(goodsType) {
       if (goodsType === 0) {
         return "全场通用";
@@ -330,7 +345,8 @@ export default {
         goodsId: null, // 指定商品控件 绑定值
         goodsCate: null, // 指定分类
         voucherType: 1, //默认1立减券
-        priceType: 0//结算类型
+        priceType: 0,//结算类型
+        goodsNum:1 //兑换商品数
       },
       dialogFormVisible: false,
       dialogStatus: "",
@@ -342,13 +358,13 @@ export default {
         name: [
           { required: true, message: "优惠券标题不能为空", trigger: "blur" },
         ],
-        min: [{ required: true, message: "最低消费不能为空", trigger: "blur" }],
+        //min: [{ required: true, message: "最低消费不能为空", trigger: "blur" }],
         limit: [
           { required: true, message: "每人限领不能为空", trigger: "blur" },
         ],
-        discount: [
+        /*discount: [
           { required: true, message: "折扣或立减不能为空", trigger: "blur" },
-        ],
+        ],*/
       },
       downloadLoading: false,
     };
@@ -448,6 +464,7 @@ export default {
       this.$nextTick(() => {
         this.$refs["dataForm"].clearValidate();
       });
+      this.dataForm.goodsNum=1
     },
     createData() {
       if (this.dataForm.type == 2 && this.dataForm.total == 0) {
@@ -459,7 +476,24 @@ export default {
         return;
       }
 
+      if (this.dataForm.voucherType == 1) {
+        //最低消费
+        if (this.dataForm.min=='') {
+          this.$notify.error({
+            title: "失败",
+            message: "最低消费不能为空！",
+          });
+          return;
+        }
+      }
       if (this.dataForm.voucherType == 2) {
+        if (this.dataForm.discount=='') {
+          this.$notify.error({
+            title: "失败",
+            message: "折扣券不能为空！",
+          });
+          return;
+        }
         //折扣券
         if (this.dataForm.discount > 100 || this.dataForm.discount < 1) {
           this.$notify.error({
@@ -469,7 +503,15 @@ export default {
           return;
         }
       }
-
+      if (this.dataForm.voucherType == 3) {
+        if (this.dataForm.goodsId==null) {
+          this.$notify.error({
+            title: "失败",
+            message: "请选择指定商品！",
+          });
+          return;
+        }
+      }
       this.$refs["dataForm"].validate((valid) => {
         if (valid) {
           createCoupon(this.dataForm)
@@ -650,4 +692,4 @@ export default {
 
 .el-form--label-left .el-form-item__label {
   text-align: center;
-}</style>
+}</style>

src/views/promotion/couponPackage.vue

@@ -172,57 +172,71 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="每人限领" prop="limit">
+              <el-input disabled v-model="pkForm.limit">
+                <template slot="append">张</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <fieldset style="border-color: #d1c7b7; background: #fffef9">
           <legend style="color: #1890ff">优惠券分类</legend>
           <el-row :gutter="60">
             <el-col :span="12">
+              <el-form-item label="抵用类型" prop="coupondata.voucherType">
+                <el-select v-model="pkForm.coupondata.voucherType" style="width: 100%">
+                  <el-option v-for="type in voucherTypeData" :key="type.value" :label="type.label" :value="type.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
               <el-form-item label="优惠券名称" prop="coupondata.name">
                 <el-input v-model="pkForm.coupondata.name" clearable />
               </el-form-item>
             </el-col>
+          </el-row>
+          <el-row :gutter="60">
+
             <el-col :span="12">
               <el-form-item label="优惠券介绍" prop="coupondata.desc">
                 <el-input v-model="pkForm.coupondata.desc" clearable />
               </el-form-item>
             </el-col>
-          </el-row>
-          <el-row :gutter="60">
+
             <el-col :span="12">
               <el-form-item label="标签" prop="coupondata.tag">
                 <el-input v-model="pkForm.coupondata.tag" readonly />
               </el-form-item>
             </el-col>
+
+          </el-row>
+          <el-row :gutter="60">
+
             <el-col :span="12">
-              <el-form-item label="最低消费" prop="coupondata.min">
+              <el-form-item v-if="pkForm.coupondata.voucherType!=3" label="最低消费" prop="coupondata.min">
                 <el-input v-model.number="pkForm.coupondata.min">
                   <template slot="append">元</template>
                 </el-input>
               </el-form-item>
             </el-col>
-          </el-row>
-          <el-row :gutter="60">
-            <el-col :span="12">
-              <el-form-item label="抵用类型" prop="coupondata.voucherType">
-                <el-select v-model="pkForm.coupondata.voucherType" style="width: 100%">
-                  <el-option v-for="type in voucherTypeData" :key="type.value" :label="type.label" :value="type.value" />
-                </el-select>
-              </el-form-item>
-            </el-col>
+
             <el-col :span="12">
-              <el-form-item label="满减金额或折扣" prop="coupondata.discount">
+              <el-form-item  v-if="pkForm.coupondata.voucherType!=3"  label="满减金额或折扣" prop="coupondata.discount">
                 <el-input v-model.number="pkForm.coupondata.discount">
                   <template slot="append">元（折扣率1-100%）</template>
                 </el-input>
               </el-form-item>
             </el-col>
           </el-row>
-
           <el-row :gutter="60">
             <el-col :span="12">
               <el-form-item label="商品限制范围">
                 <el-radio-group v-model="pkForm.coupondata.goodsType" @change="chooseGOodsType" prop="coupondata.goodsType">
-                  <el-radio-button :label="0">全场通用</el-radio-button>
-                  <el-radio-button :label="1">指定分类</el-radio-button>
+                  <el-radio-button v-if="pkForm.coupondata.voucherType!=3"  :label="0">全场通用</el-radio-button>
+                  <el-radio-button v-if="pkForm.coupondata.voucherType!=3"  :label="1">指定分类</el-radio-button>
                   <el-radio-button :label="2">指定商品</el-radio-button>
                 </el-radio-group>
               </el-form-item>
@@ -231,8 +245,12 @@
               <el-form-item v-show="pkForm.coupondata.goodsType === 1" label="选择商品分类">
                 <el-cascader ref="mycascader" :options="categoryList" expand-trigger="hover" style="width: 300px" clearable @change="handleTypeChange" />
               </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="60">
+            <el-col :span="24">
               <el-form-item v-show="pkForm.coupondata.goodsType === 2" label="选择商品">
-                <el-cascader ref="mycascader2" :options="goodsList" expand-trigger="hover" style="width: 300px" clearable @change="handleTypeChange2" />
+                <el-cascader ref="mycascader2" v-model="pkForm.coupondata.goodsId" :options="goodsList" expand-trigger="hover" style="width: 900px" :props="{ expandTrigger: 'hover', value: 'value', label: 'label', multiple: true }" clearable @change="handleTypeChange3" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -304,6 +322,10 @@ const voucherTypeData = [
     label: "折扣券",
     value: 2,
   },
+  {
+    label: "商品兑换券",
+    value: 3,
+  },
 ];
 
 const defaultStatusOptions = [
@@ -345,7 +367,7 @@ export default {
         channel: undefined,
         startTime: null,
         endTime: null,
-
+        limit:1,
         coupondata: {
           type: 2, //兑换券
           goodsType: "", //商品限制范围
@@ -364,7 +386,7 @@ export default {
           goodsStr: "", //选择的商品或分类中文
           // status: 0,
           // days: 0,
-          // goodsId: null, // 指定商品控件 绑定值
+          goodsId: null, // 指定商品控件 绑定值
           // goodsCate: null, // 指定分类
         },
       },
@@ -376,12 +398,19 @@ export default {
             trigger: "blur",
           },
         ],
-        pkMoney: [
+        limit:[
           {
             required: true,
-            message: "卡券包金额不能为空",
+            message: "每人限领不能为空",
             trigger: "blur",
           },
+        ],
+        pkMoney: [
+        /*  {
+            required: true,
+            message: "卡券包金额不能为空",
+            trigger: "blur",
+          },*/
           { type: "number", message: "必须为数字值" },
         ],
         allPkNumber: [
@@ -523,6 +552,7 @@ export default {
         sort: "create_time",
         order: "desc",
       },
+      goods:[]
     };
   },
   created() {
@@ -622,6 +652,7 @@ export default {
         startTime: this.pkForm.startTime,
         endTime: this.pkForm.endTime,
         couponList: this.couponList, //子优惠券
+        limit: this.pkForm.limit
       };
 
       const loading = this.$loading({
@@ -657,6 +688,7 @@ export default {
       this.isShowAddDialogPk = true;
       //清空数据
       this.clearForm();
+      this.pkForm.limit=1
       //获取所有引荐人
       this.getReferee();
     },
@@ -786,6 +818,41 @@ export default {
         this.pkForm.coupondata.goodsStr = "";
       }
     },
+    handleTypeChange3(value) {
+      //选择商品
+      this.pkForm.coupondata.goodsValue = []; //只允许一个
+      if (value.length > 0) {
+        if (this.pkForm.coupondata.goodsType == "1") {
+          this.pkForm.coupondata.goodsId = [];
+          this.pkForm.coupondata.goodsValue.push(value[value.length - 1]);
+        }
+        else {
+          this.pkForm.coupondata.goodsId.forEach((item) => {
+            this.pkForm.coupondata.goodsValue.push(item[2]);
+          });
+
+        }
+        let goods=this.goods;
+        let goodsText="";
+        let selectEd=this.pkForm.coupondata.goodsValue
+        for (let k = 0; k < selectEd.length; k++) {
+          console.log(selectEd[k] )
+          for (let l = 0; l < goods.length; l++) {
+            console.log(goods[l].value)
+            if (selectEd[k] == goods[l].value) {
+              console.log(goods[l].label)
+              goodsText=goodsText.concat(goods[l].label).concat(" / ");
+
+              break;
+            }
+          }
+        }
+        goodsText = goodsText.substring(0,goodsText.length-3);
+        this.pkForm.coupondata.goodsStr = goodsText;
+      }else {
+        this.pkForm.coupondata.goodsStr = "";
+      }
+    },
     handleFilter() {
       this.listQuery.page = 1;
       this.getList();
@@ -824,6 +891,13 @@ export default {
           console.info(res);
           this.goodsList = res.data.data.goodsList;
           this.categoryList = res.data.data.categoryList;
+          for (let i = 0; i < this.goodsList.length; i++) {
+            for (let j = 0; j < this.goodsList[i].children.length; j++) {
+              for (let k = 0; k < this.goodsList[i].children[j].children.length; k++) {
+                this.goods.push(this.goodsList[i].children[j].children[k])
+              }
+            }
+          }
         })
         .catch(() => {});
     },

src/views/promotion/couponPackageDetail.vue

@@ -1,31 +1,109 @@
 <template>
   <div class="app-container">
+    <div class="table-layout">
+      <div style="margin-top: 20px">
+        <svg-icon icon-class="shopping" style="color: #606266" />
+        <span class="font-small">卡券包</span>
+      </div>
+      <el-row>
+        <el-col :span="4" class="table-cell-title">卡券包名称</el-col>
+        <el-col :span="4" class="table-cell-title">卡券包金额</el-col>
+        <el-col :span="4" class="table-cell-title">卡券包数量</el-col>
+        <el-col :span="4" class="table-cell-title">所属渠道</el-col>
+        <el-col :span="4" class="table-cell-title">所属引荐人</el-col>
+        <el-col :span="4" class="table-cell-title">卡券包开始时间</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4" class="table-cell">{{ couponPackage.pkName }}</el-col>
+        <el-col :span="4" class="table-cell">{{ couponPackage.pkMoney }}</el-col>
+        <el-col :span="4" class="table-cell">{{ total }}</el-col>
+        <el-col :span="4" class="table-cell" style="line-height:20px">{{formateChannel(couponPackage.channel)}}</el-col>
+        <el-col :span="4" class="table-cell">{{ couponPackage.refereeName }}</el-col>
+        <el-col :span="4" class="table-cell">
+          {{ couponPackage.startTime }}
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4" class="table-cell-title">卡券包到期时间</el-col>
+        <el-col :span="4" class="table-cell-title">每人限领</el-col>
+        <el-col :span="4" class="table-cell-title">分享二维码</el-col>
+        <!-- <el-col :span="4" class="table-cell-title">优惠兑换码</el-col> -->
+        <el-col :span="4" class="table-cell-title">分享短链</el-col>
+        <el-col :span="4" class="table-cell-title">发送短信</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4" class="table-cell" style="height: 120px">{{ couponPackage.endTime }}</el-col>
+        <el-col :span="4" class="table-cell" style="height: 120px">{{ couponPackage.limit}}</el-col>
+        <el-col :span="4" class="table-cell" style="text-align:center;padding-top: 5px;height: 120px">
+          <el-image :preview-src-list="[couponPackage.qrUrl]" :lazy="true" :src="couponPackage.qrUrl" style="width:100px"></el-image>
+        </el-col>
+        <el-col :span="4" class="table-cell"  style="word-wrap:break-word; height: 120px">{{couponPackage.shortChain}}</el-col>
+        <!-- <el-col :span="4" class="table-cell">{{ coupon.code }}</el-col> -->
+
+        <el-col :span="4" class="table-cell" style="height: 120px" >
+          <el-button
+                     v-permission="['GET /admin/couponPackageDetail/send']" style="width:100px" icon="el-icon-chat-dot-round"
+                     type="text" size="mini" @click="handleSendNew()">发送短信</el-button>
+        </el-col>
+      </el-row>
+
+
+      <div style="margin-top: 20px">
+        <svg-icon icon-class="order-return" />
+        <span class="font-small">卷包内优惠卷</span>
+      </div>
+      <el-table :data="couponPackage.couponList" height="200px" :header-cell-style="{ background: '#f2f6fc' }"
+                style="width: 100%;margin-top: 20px;overflow-y: auto !important;" border>
+        <el-table-column label="优惠卷名称" align="center" prop="name" :key="Math.random()" >
+        </el-table-column>
+        <el-table-column label="优惠卷介绍" align="center" prop="desc">
+        </el-table-column>
+        <el-table-column label="最低消费" align="center" prop="min" />
+        <el-table-column label="满减金额/折扣率" align="center" prop="discount" >
+          <template slot-scope="scope1">
+            <span v-if="scope1.row.voucherType == 1">减免{{ scope1.row.discount }}元</span>
+            <span v-if="scope1.row.voucherType == 2">折扣率{{ scope1.row.discount }}%</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品范围限制" align="center" prop="goodsType" >
+          <template slot-scope="scope1">
+            {{ scope1.row.goodsType | formatGoodsType }}
+          </template>
+        </el-table-column>
+        <el-table-column label="所限商品、类型" align="center" prop="couponGoodsName" width="320px">
+          <template slot-scope="scope1">
+            <span style="color:red;font-size:12px;" v-html="scope1.row.couponGoodsName"> </span>
+          </template>
+
+        </el-table-column>
+      </el-table>
+    </div>
     <!-- 查询操作 -->
     <div class="filter-container">
-      <el-input v-model="listQuery.pkSn" clearable class="filter-item" style="width: 150px;" placeholder="请输入券包编号" />
+<!--      <el-input v-model="listQuery.pkSn" clearable class="filter-item" style="width: 150px;" placeholder="请输入券包编号" />-->
       <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 160px;" placeholder="请输入用户手机" />
       <el-input v-model="listQuery.pkCode" clearable class="filter-item" style="width: 150px;" placeholder="请输入券包码" />
       <el-select v-model="listQuery.isExchange" clearable style="width: 150px" class="filter-item" placeholder="请选择使用状态">
         <el-option key="0" label="未兑换" value="0" />
         <el-option key="1" label="已兑换" value="1" />
       </el-select>
-      <el-date-picker v-model="exchangeTimeArray" type="datetimerange" value-format="yyyy-MM-dd hh:mm" class="filter-item"
-        range-separator="至" start-placeholder="兑换开始日期" end-placeholder="兑换结束日期" :picker-options="{}" />
+<!--      <el-date-picker v-model="exchangeTimeArray" type="datetimerange" value-format="yyyy-MM-dd hh:mm" class="filter-item"-->
+<!--                      range-separator="至" start-placeholder="兑换开始日期" end-placeholder="兑换结束日期" :picker-options="{}" />-->
 
       <el-select v-model="listQuery.isPre" clearable style="width: 150px" class="filter-item" placeholder="请选择预售状态">
         <el-option key="0" label="未预售" value="0" />
         <el-option key="1" label="已预售" value="1" />
       </el-select>
       <el-input v-model="listQuery.preMobile" clearable class="filter-item" style="width: 150px;" placeholder="请输入预售手机" />
-      <el-date-picker v-model="timeArray" type="datetimerange" value-format="yyyy-MM-dd hh:mm" class="filter-item"
-        range-separator="至" start-placeholder="预售开始日期" end-placeholder="预售结束日期" :picker-options="{}" />
+<!--      <el-date-picker v-model="timeArray" type="datetimerange" value-format="yyyy-MM-dd hh:mm" class="filter-item"-->
+<!--                      range-separator="至" start-placeholder="预售开始日期" end-placeholder="预售结束日期" :picker-options="{}" />-->
 
       <el-button v-permission="['GET /admin/couponPackageDetail/list']" class="filter-item" type="primary"
-        icon="el-icon-search" @click="handleFilter(false)">查找</el-button>
+                 icon="el-icon-search" @click="handleFilter(false)">查找</el-button>
       <el-button v-permission="['GET /admin/couponPackageDetail/list']" class="filter-item" type="primary"
-        icon="el-icon-download" @click="handleFilter(true)">导出</el-button>
+                 icon="el-icon-download" @click="handleFilter(true)">导出</el-button>
       <el-button v-permission="['POST /admin/couponPackageDetail/import']" class="filter-item" type="primary"
-        icon="el-icon-upload2" @click="handleImport()">导入预售手机号</el-button>
+                 icon="el-icon-upload2" @click="handleImport()">导入预售手机号</el-button>
       <div style="display:inline;color:#09afff;font-size:12px">导入格式：券包名、券包编码、团长手机号、客户手机号;excel第一个sheet的第一行的表头</div>
     </div>
 
@@ -41,10 +119,10 @@
             ? 'success'
             : ''
             ">{{
-    scope.row.preMobile != null && scope.row.preMobile.length > 0
-    ? "已预售"
-    : "未预售"
-  }}</el-tag>
+              scope.row.preMobile != null && scope.row.preMobile.length > 0
+                ? "已预售"
+                : "未预售"
+            }}</el-tag>
         </template>
       </el-table-column>
 
@@ -66,8 +144,8 @@
       <el-table-column align="center" label="有效时间" prop="startTime">
         <template slot-scope="scope">
           <span>{{ scope.row.startTime | formatTime }}到{{
-            scope.row.endTime | formatTime
-          }}</span>
+              scope.row.endTime | formatTime
+            }}</span>
         </template>
       </el-table-column>
 
@@ -83,22 +161,22 @@
       <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button v-if="scope.row.deleted == false && scope.row.isExchange == false && scope.row.preMobile == null"
-            v-permission="['GET /admin/couponPackageDetail/send']" style="width:100px" icon="el-icon-chat-dot-round"
-            type="text" size="mini" @click="handleSend(scope.row)">发送预售短信</el-button>
+                     v-permission="['GET /admin/couponPackageDetail/send']" style="width:100px" icon="el-icon-chat-dot-round"
+                     type="text" size="mini" @click="handleSend(scope.row)">发送预售短信</el-button>
           <el-button v-if="scope.row.deleted == false && scope.row.isExchange == false && scope.row.preMobile != null"
-            v-permission="['GET /admin/couponPackageDetail/rsend']" style="width:100px" icon="el-icon-refresh-left"
-            type="text" size="mini" @click="handleRSend(scope.row)">补发预售短信</el-button>
+                     v-permission="['GET /admin/couponPackageDetail/rsend']" style="width:100px" icon="el-icon-refresh-left"
+                     type="text" size="mini" @click="handleRSend(scope.row)">补发预售短信</el-button>
           <el-button v-if="scope.row.deleted == false" v-permission="['GET /admin/couponPackageDetail/delete']"
-            style="width:100px" icon="el-icon-delete" type="text" size="mini"
-            @click="handleDelete(scope.row)">券码作废</el-button>
+                     style="width:100px" icon="el-icon-delete" type="text" size="mini"
+                     @click="handleDelete(scope.row)">券码作废</el-button>
           <el-button v-permission="['GET /admin/couponPackageDetail/read']" type="text" size="mini" icon="el-icon-view"
-            @click="handleDetail(scope.row)">详情</el-button>
+                     @click="handleDetail(scope.row)">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
-      @pagination="getList" />
+                @pagination="getList" />
 
     <el-dialog :visible.sync="detailFormVisible" title="详情" width="1000px" center>
       <el-table :data="detail" border>
@@ -135,10 +213,10 @@
         <el-table-column align="center" label="订单状态" prop="orderStatus">
           <template slot-scope="scope">
             <el-tag>{{
-              orderStatusFilter(
-                scope.row.order == null ? null : scope.row.order.orderStatus
-              )
-            }}</el-tag>
+                orderStatusFilter(
+                  scope.row.order == null ? null : scope.row.order.orderStatus
+                )
+              }}</el-tag>
           </template>
         </el-table-column>
 
@@ -157,8 +235,8 @@
 
         <el-table-column align="center" label="优惠券类型" prop="coupon.type">
           <template>兑换券 </template>
-        </el-table-column> 
-         <el-table-column align="center" label="有效期" prop="coupon.startTime"> 
+        </el-table-column>
+         <el-table-column align="center" label="有效期" prop="coupon.startTime">
           <template slot-scope="scope">{{scope.row.coupon.startTime}}至{{scope.row.coupon.endTime}}</template>
          </el-table-column>
         <el-table-column align="center" label="状态" prop="coupon.status">
@@ -175,7 +253,7 @@
 
     <el-dialog title="发送预售短信" :visible.sync="dialogSendFormVisible" width="600px">
       <el-form ref="sendForm" :rules="rules" :model="sendForm" status-icon label-position="left" label-width="100px"
-        style="margin-left:20px;">
+               style="margin-left:20px;">
         <el-form-item label="客户手机号" prop="mobile">
           <el-input v-model="sendForm.mobile" maxlength="11" type="number" placeholder="请输入接收短信的手机号码" />
         </el-form-item>
@@ -193,7 +271,7 @@
 
         <el-form-item label="短信内容" prop="name">
           <el-input type="textarea" rows="5" disabled="disabled"
-            value="尊敬的客户：感谢您购买鲸致生活%s，请点击》 https://mall.zhaijieshi.cc/groupon/index.html?coupon=%s，登录官方小程序兑换服务。如有疑问，请致电鲸致生活全国统一客服热线400-920-8987（客服时间7：30-21：30）。祝您生活如意！"></el-input>
+                    value="尊敬的客户：感谢您购买鲸致生活%s，请点击》 https://mall.zhaijieshi.cc/groupon/index.html?coupon=%s，登录官方小程序兑换服务。如有疑问，请致电鲸致生活全国统一客服热线400-920-8987（客服时间7：30-21：30）。祝您生活如意！"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -205,11 +283,11 @@
     <!-- 导入预售 -->
     <el-dialog title="预售信息导入" :visible.sync="dialogImportVisible">
       <el-form ref="dataForm" :rules="rules" :model="dataImportForm" status-icon label-position="left" label-width="100px"
-        style="width: 400px; margin-left:50px;">
+               style="width: 400px; margin-left:50px;">
 
         <el-form-item label="团长" prop="rid">
           <el-select v-model="dataImportForm.rid" style="width: 100%" class="filter-item" placeholder="请选择团长"
-            filterable="">
+                     filterable="">
             <el-option v-for="item in referees" :key="item.refereeId" :label="item.refereeName" :value="item.refereeId" />
           </el-select>
         </el-form-item>
@@ -236,6 +314,35 @@
         <el-button icon="el-icon-upload2" type="primary" @click="importConfirm">导入</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="发送预售短信" :visible.sync="dialogImportPhoneVisible">
+      <el-form ref="dataForm" :rules="rules" :model="dataImportPhoneForm" status-icon label-position="left" label-width="100px"
+               style="width: 600px; margin-left:50px;">
+        <el-button v-permission="['POST /admin/couponPackageDetail/import']" @click="importPhoneConfirm" class="filter-item" type="primary"
+                   icon="el-icon-upload2" >导入手机号</el-button>
+        <span style="margin-left: 30px;color: #0eaefc">导入格式(表头)：客户手机号：第一个sheet的第一列</span>
+        <el-form-item label="手机号文件">
+          <input type="file" @change="getImportPhoneFile($event)" ref="fileupload" />
+          <span style="color: black">导入成功手机号<span style="color: red">{{importPhoneCount}}</span>个</span>
+        </el-form-item>
+        <el-form-item label="领取短链">
+          <span style="color: #0b0b0b">{{couponPackage.shortChain}}</span>
+        </el-form-item>
+         <el-form-item label="短信模板" prop="rid">
+          <el-select @change="selectTemplage" v-model="dataImportPhoneForm.smsTemplateId" style="width: 100%" class="filter-item" placeholder="请选择短信模板" filterable="">
+            <el-option v-for="item in smsTemplateList" :key="item.id" :label="item.templateName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="短信内容">
+          <el-input  type="textarea" disabled
+                 :rows="5"  v-model="dataImportPhoneForm.content" />
+        </el-form-item>
+     </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogImportPhoneVisible = false">取消</el-button>
+        <el-button icon="el-icon-upload2" type="primary" @click="sendPhoneMsg" >发送</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -248,7 +355,7 @@ import {
   packageDetailSend,
   listPackageDetailExport,
   packageImport,
-  packageDetailDelete,
+  packageDetailDelete, importPhone, sendSmsInPhone, getSmsTemplateByType,
 } from "@/api/couponpackage";
 import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
 import {
@@ -257,6 +364,7 @@ import {
   statusMap,
   defaultTypeOptions,
 } from "@/api/enumUtils";
+import {allChannel} from "@/api/channel";
 
 export default {
   name: "CouponPackageDetail",
@@ -359,11 +467,27 @@ export default {
       dataImportForm: {
         file: undefined,
       },
-      importResult: [], //导入结果
+      importResult: [], //导入结果，
+      couponPackage:{},
+      channels:[],
+      couponList:[],
+      dialogImportPhoneVisible: false,
+      dataImportPhoneForm: {
+        file: undefined,
+        smsTemplateId:'',
+        content:''
+      },
+      importPhoneCount:0,
+      importMarkers:'',
+      smsTemplateList:[]
+
     };
   },
   created() {
     this.init();
+    allChannel().then((res) => {
+      this.channels = res.data.data;
+    });
   },
   methods: {
     init: function () {
@@ -381,6 +505,7 @@ export default {
       if (this.listQuery.isExport == false) {
         listPackageDetail(this.listQuery).then((response) => {
           this.list = response.data.data.list;
+          this.couponPackage=this.list[0]
           this.total = response.data.data.total;
           this.listLoading = false;
         });
@@ -527,8 +652,8 @@ export default {
                 message: "短信补发成功",
               });
             }
-            else  
-              this.$message.warning(res.data.errmsg); 
+            else
+              this.$message.warning(res.data.errmsg);
           }
         )
           .catch((response) => {
@@ -606,6 +731,138 @@ export default {
         this.downloadLoading = false;
       });
     },
+    formateChannel(channelId) {
+      if (channelId == null || channelId == '') {
+        return;
+      }
+      let nm = '';
+      this.channels.forEach(f => {
+        if (f.id == channelId) {
+          nm = f.name;
+        }
+      })
+      return nm;
+    },
+    formatGoodsType(goodsType) {
+      if (goodsType === 0) {
+        return "全场通用";
+      } else if (goodsType === 1) {
+        return "指定分类";
+      } else {
+        return "指定商品";
+      }
+    },
+    handleSendNew(){
+      this.dialogImportPhoneVisible=true
+      this.importPhoneCount=0;
+      this.importMarkers='';
+      this.getSmsTemplate();
+    },
+    importPhoneConfirm() {
+      if (this.dataImportPhoneForm.file == "" || this.dataImportPhoneForm.file == undefined) {
+        this.$message.warning("请选择文件！");
+        return;
+      }
+      // console.info(this.dataImportForm.file.name)
+      if (this.dataImportPhoneForm.file.name.lastIndexOf("xlsx") < 0) {
+        this.$message.warning("请选择excel文件！");
+        return;
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: "文件导入中，请耐心等待...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      var formData = new window.FormData(); // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
+      formData.append("file", this.dataImportPhoneForm.file);
+      formData.append("pkSn", this.couponPackage.pkSn);
+
+      importPhone(formData)
+        .then((res) => {
+          console.log("导入返回数据", res);
+          loading.close();
+          if (res.data.errno == 0) {
+            if (res.data.data.count >= 1) {
+              this.importPhoneCount = res.data.data.count;
+              this.importMarkers = res.data.data.importMarkers;
+              console.log(2000)
+              console.log(this.importPhoneCount)
+              this.$message.success("导入"+this.importPhoneCount+"个手机号成功！")
+            }else {
+              this.$message.error("导入0个手机号，请联系管理员！")
+            }
+          } else {
+            this.$message.warning(res.data.errmsg);
+          }
+        })
+        .catch((err) => {
+          loading.close();
+          this.$message.warning(err.data.errmsg);
+        });
+    },
+    getImportPhoneFile: function (event) {
+      this.dataImportPhoneForm.file = event.target.files[0];
+      console.log(this.file);
+    },
+    sendPhoneMsg(){
+      if(this.importPhoneCount==0){
+        this.$message.error("请先导入手机号！");
+        return;
+      }
+      if(this.dataImportPhoneForm.smsTemplateId==''){
+        this.$message.error("请先选择短信模板！");
+        return;
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: "发送短信中，请耐心等待...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      var formData = new window.FormData(); // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
+      formData.append("importMarkers", this.importMarkers);
+      formData.append("content", this.dataImportPhoneForm.content);
+      sendSmsInPhone(formData)
+        .then((res) => {
+          console.log("发送短信数据", res);
+          loading.close();
+          if (res.data.errno == 0) {
+              console.log(2000)
+              this.$message.success("发送成功！")
+              this.dialogImportPhoneVisible=false;
+          } else {
+            this.$message.warning(res.data.errmsg);
+          }
+        })
+        .catch((err) => {
+          loading.close();
+          this.$message.warning(err.data.errmsg);
+        });
+
+    },
+    getSmsTemplate(){
+      getSmsTemplateByType({type:1})
+        .then((res) => {
+          if (res.data.errno == 0) {
+            console.log(res.data.data)
+            this.smsTemplateList=res.data.data;
+          } else {
+            this.$message.warning(res.data.errmsg);
+          }
+        })
+        .catch((err) => {
+          this.$message.warning(err.data.errmsg);
+        });
+    },
+    selectTemplage(){
+      let smsTemplateId=this.dataImportPhoneForm.smsTemplateId
+      let smsTemplate=this.smsTemplateList.find(item=>item.id==smsTemplateId);
+
+      this.dataImportPhoneForm.content=smsTemplate.content.replace("#changeable",this.couponPackage.shortChain);
+      console.log(smsTemplate)
+
+    }
   },
 };
 </script>

src/views/promotion/couponPackageDetailOld.vue

@@ -0,0 +1,644 @@
+<template>
+  <div class="app-container">
+    <!-- 查询操作 -->
+    <div class="filter-container">
+      <el-input v-model="listQuery.pkSn" clearable class="filter-item" style="width: 150px;" placeholder="请输入券包编号" />
+      <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 160px;" placeholder="请输入用户手机" />
+      <el-input v-model="listQuery.pkCode" clearable class="filter-item" style="width: 150px;" placeholder="请输入券包码" />
+      <el-select v-model="listQuery.isExchange" clearable style="width: 150px" class="filter-item" placeholder="请选择使用状态">
+        <el-option key="0" label="未兑换" value="0" />
+        <el-option key="1" label="已兑换" value="1" />
+      </el-select>
+      <el-date-picker v-model="exchangeTimeArray" type="datetimerange" value-format="yyyy-MM-dd hh:mm" class="filter-item"
+                      range-separator="至" start-placeholder="兑换开始日期" end-placeholder="兑换结束日期" :picker-options="{}" />
+
+      <el-select v-model="listQuery.isPre" clearable style="width: 150px" class="filter-item" placeholder="请选择预售状态">
+        <el-option key="0" label="未预售" value="0" />
+        <el-option key="1" label="已预售" value="1" />
+      </el-select>
+      <el-input v-model="listQuery.preMobile" clearable class="filter-item" style="width: 150px;" placeholder="请输入预售手机" />
+      <el-date-picker v-model="timeArray" type="datetimerange" value-format="yyyy-MM-dd hh:mm" class="filter-item"
+                      range-separator="至" start-placeholder="预售开始日期" end-placeholder="预售结束日期" :picker-options="{}" />
+
+      <el-button v-permission="['GET /admin/couponPackageDetail/list']" class="filter-item" type="primary"
+                 icon="el-icon-search" @click="handleFilter(false)">查找</el-button>
+      <el-button v-permission="['GET /admin/couponPackageDetail/list']" class="filter-item" type="primary"
+                 icon="el-icon-download" @click="handleFilter(true)">导出</el-button>
+      <el-button v-permission="['POST /admin/couponPackageDetail/import']" class="filter-item" type="primary"
+                 icon="el-icon-upload2" @click="handleImport()">导入预售手机号</el-button>
+      <div style="display:inline;color:#09afff;font-size:12px">导入格式：券包名、券包编码、团长手机号、客户手机号;excel第一个sheet的第一行的表头</div>
+    </div>
+
+    <!-- 查询结果 -->
+    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+      <el-table-column align="center" label="客户手机" prop="customer.tel" />
+      <el-table-column align="center" label="客户名称" prop="customer.customerName" />
+      <el-table-column align="center" label="卡券包" prop="pkName" />
+      <el-table-column align="center" label="卡券包兑换码" prop="pkCode" />
+      <el-table-column align="center" label="是否已预售" prop="preMobile">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.preMobile != null && scope.row.preMobile.length
+            ? 'success'
+            : ''
+            ">{{
+              scope.row.preMobile != null && scope.row.preMobile.length > 0
+                ? "已预售"
+                : "未预售"
+            }}</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="预售手机" prop="preMobile" />
+      <el-table-column align="center" label="预售时间" prop="preTime" />
+      <el-table-column align="center" label="抖音券号" prop="douyinCode" />
+
+      <el-table-column align="center" label="是否已兑换" prop="isExchange">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.isExchange == 0 ? 'success' : 'warning'">
+            <span v-if="scope.row.isExchange == 0">否</span>
+            <span v-if="scope.row.isExchange == 1">是</span>
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="兑换时间" prop="exchangeTime" />
+
+      <el-table-column align="center" label="有效时间" prop="startTime">
+        <template slot-scope="scope">
+          <span>{{ scope.row.startTime | formatTime }}到{{
+              scope.row.endTime | formatTime
+            }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="是否已作废" prop="deleted">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.deleted ? 'success' : 'warning'">
+            <span v-if="scope.row.deleted == false">有效</span>
+            <span v-if="scope.row.deleted">作废</span>
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.deleted == false && scope.row.isExchange == false && scope.row.preMobile == null"
+                     v-permission="['GET /admin/couponPackageDetail/send']" style="width:100px" icon="el-icon-chat-dot-round"
+                     type="text" size="mini" @click="handleSend(scope.row)">发送预售短信</el-button>
+          <el-button v-if="scope.row.deleted == false && scope.row.isExchange == false && scope.row.preMobile != null"
+                     v-permission="['GET /admin/couponPackageDetail/rsend']" style="width:100px" icon="el-icon-refresh-left"
+                     type="text" size="mini" @click="handleRSend(scope.row)">补发预售短信</el-button>
+          <el-button v-if="scope.row.deleted == false" v-permission="['GET /admin/couponPackageDetail/delete']"
+                     style="width:100px" icon="el-icon-delete" type="text" size="mini"
+                     @click="handleDelete(scope.row)">券码作废</el-button>
+          <el-button v-permission="['GET /admin/couponPackageDetail/read']" type="text" size="mini" icon="el-icon-view"
+                     @click="handleDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
+                @pagination="getList" />
+
+    <el-dialog :visible.sync="detailFormVisible" title="详情" width="1000px" center>
+      <el-table :data="detail" border>
+        <el-table-column align="center" label="优惠券码id" prop="id" />
+        <el-table-column align="center" label="优惠券名称" prop="coupon.name" />
+
+        <!-- <el-table-column align="center" label="最低消费" prop="coupon.min">
+          <template slot-scope="scope">满{{ scope.row.coupon.min }}元可用</template>
+        </el-table-column> -->
+
+        <el-table-column align="center" label="满减金额" prop="coupon.discount">
+          <template slot-scope="scope">
+            <span v-if="scope.row.coupon.voucherType == 1">减免{{ scope.row.coupon.discount }}元</span>
+            <span v-if="scope.row.coupon.voucherType == 2">折扣率{{ scope.row.coupon.discount }}%</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="领取时间" prop="exchangeTime" />
+
+        <el-table-column align="center" label="使用状态" prop="status">
+          <template slot-scope="scope">
+            {{ scope.row.status | formatUseStatus }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="是否已作废" prop="deleted">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.deleted ? 'success' : 'warning'">
+              <span v-if="scope.row.deleted == false">有效</span>
+              <span v-if="scope.row.deleted">作废</span>
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" label="订单ID" prop="orderId" />
+        <el-table-column align="center" label="订单状态" prop="orderStatus">
+          <template slot-scope="scope">
+            <el-tag>{{
+                orderStatusFilter(
+                  scope.row.order == null ? null : scope.row.order.orderStatus
+                )
+              }}</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" label="使用时间" prop="usedTime" />
+        <!-- <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.status==0" v-permission="['GET /admin/couponPackageDetail/delete']" style="width:100px" icon="el-icon-delete" type="text" size="mini" @click="handleDelete(scope.row)">券码作废</el-button>
+          </template>
+        </el-table-column> -->
+
+        <!--  <el-table-column align="center" label="商品使用范围" prop="coupon.goodsType">
+          <template slot-scope="scope">{{
+            scope.row.coupon.goodsType | formatGoodsType
+          }}</template>
+        </el-table-column>
+
+        <el-table-column align="center" label="优惠券类型" prop="coupon.type">
+          <template>兑换券 </template>
+        </el-table-column>
+         <el-table-column align="center" label="有效期" prop="coupon.startTime">
+          <template slot-scope="scope">{{scope.row.coupon.startTime}}至{{scope.row.coupon.endTime}}</template>
+         </el-table-column>
+        <el-table-column align="center" label="状态" prop="coupon.status">
+          <template slot-scope="scope">{{
+            scope.row.coupon.status | formatStatus
+          }}</template>
+        </el-table-column>  -->
+      </el-table>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailFormVisible = false">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="发送预售短信" :visible.sync="dialogSendFormVisible" width="600px">
+      <el-form ref="sendForm" :rules="rules" :model="sendForm" status-icon label-position="left" label-width="100px"
+               style="margin-left:20px;">
+        <el-form-item label="客户手机号" prop="mobile">
+          <el-input v-model="sendForm.mobile" maxlength="11" type="number" placeholder="请输入接收短信的手机号码" />
+        </el-form-item>
+
+        <el-form-item label="抖音券号" prop="douyinCode">
+          <el-input v-model="sendForm.douyinCode" type="text" placeholder="请输入抖音原生核销券号" />
+        </el-form-item>
+
+        <!-- <el-form-item label="团长" prop="rid">
+          <el-select v-model="sendForm.rid" style="width: 100%" class="filter-item" placeholder="请选择团长" filterable="">
+            <el-option v-for="item in referees" :key="item.refereeId" :label="item.refereeName" :value="item.refereeId" />
+          </el-select>
+        </el-form-item> -->
+
+
+        <el-form-item label="短信内容" prop="name">
+          <el-input type="textarea" rows="5" disabled="disabled"
+                    value="尊敬的客户：感谢您购买鲸致生活%s，请点击》 https://mall.zhaijieshi.cc/groupon/index.html?coupon=%s，登录官方小程序兑换服务。如有疑问，请致电鲸致生活全国统一客服热线400-920-8987（客服时间7：30-21：30）。祝您生活如意！"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogSendFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="sendSms">立即发送</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 导入预售 -->
+    <el-dialog title="预售信息导入" :visible.sync="dialogImportVisible">
+      <el-form ref="dataForm" :rules="rules" :model="dataImportForm" status-icon label-position="left" label-width="100px"
+               style="width: 400px; margin-left:50px;">
+
+        <el-form-item label="团长" prop="rid">
+          <el-select v-model="dataImportForm.rid" style="width: 100%" class="filter-item" placeholder="请选择团长"
+                     filterable="">
+            <el-option v-for="item in referees" :key="item.refereeId" :label="item.refereeName" :value="item.refereeId" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="excel文件">
+          <input type="file" @change="getFile($event)" ref="fileupload" />
+        </el-form-item>
+      </el-form>
+
+      <el-table :data="importResult" fit highlight-current-row>
+        <el-table-column align="center" label="券包名" prop="pkName" />
+        <el-table-column align="center" label="团长" prop="rName" />
+        <el-table-column align="center" label="团长手机号" prop="rmobile" />
+        <el-table-column align="center" label="客户手机号" prop="mobile" />
+        <el-table-column align="center" label="分配预售码" prop="coupon" />
+        <el-table-column align="center" label="导入结果" prop="remark" />
+      </el-table>
+      <div style="text-align:right">
+        <el-button type="text" icon="el-icon-download" @click="handleDownload()">结果导出</el-button>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogImportVisible = false">取消</el-button>
+        <el-button icon="el-icon-upload2" type="primary" @click="importConfirm">导入</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listRoots } from "@/api/referee";
+import {
+  listPackageDetail,
+  packageDetailRead,
+  packageDetailRSend,
+  packageDetailSend,
+  listPackageDetailExport,
+  packageImport,
+  packageDetailDelete,
+} from "@/api/couponpackage";
+import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
+import {
+  defaultCouponTypeOptions,
+  defaultUseStatusOptions,
+  statusMap,
+  defaultTypeOptions,
+} from "@/api/enumUtils";
+
+export default {
+  name: "CouponPackageDetail",
+  components: { Pagination },
+  filters: {
+    formatType(type) {
+      for (let i = 0; i < defaultCouponTypeOptions.length; i++) {
+        if (type === defaultCouponTypeOptions[i].value) {
+          return defaultCouponTypeOptions[i].label;
+        }
+      }
+      return "";
+    },
+    formatGoodsType(goodsType) {
+      if (goodsType === 0) {
+        return "全场通用";
+      } else if (goodsType === 1) {
+        return "指定分类";
+      } else {
+        return "指定商品";
+      }
+    },
+    formatStatus(status) {
+      if (status === 0) {
+        return "正常";
+      } else if (status === 1) {
+        return "已过期";
+      } else {
+        return "已下架";
+      }
+    },
+    formatUseStatus(status) {
+      if (status === 0) {
+        return "未使用";
+      } else if (status === 1) {
+        return "已使用";
+      } else if (status === 3) {
+        return "已过期";
+      } else if (status === 4) {
+        return "已占用";
+      } else if (status === 5) {
+        return "已注销";
+      } else {
+        return "已下架";
+      }
+    },
+
+    formatTime(value) {
+      if (value == null) return "";
+      return value.substring(0, 10);
+    },
+  },
+  data() {
+    return {
+      typeOptions: Object.assign({}, defaultTypeOptions),
+      useStatusOptions: Object.assign({}, defaultUseStatusOptions),
+      referees: [],
+      timeArray: [],
+      exchangeTimeArray: [],
+      coupon: {},
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        pkCode: null,
+        isExchange: null,
+        pkSn: null,
+        isPre: "",
+        mobile: "",
+        status: "",
+        isExport: false, //是否导出
+        preMobile: "",
+        preStart: "",
+        preEnd: "",
+        exchangeStart: "",
+        exchangeEnd: "",
+        sort: "create_time",
+        order: "desc",
+      },
+      detailFormVisible: false,
+      detail: [],
+      downloadLoading: false,
+      statusMap: statusMap,
+      dialogSendFormVisible: false,
+      sendForm: {
+        mobile: "",
+        packageId: "",
+      },
+      rules: {
+        mobile: [
+          { required: true, message: "请输入发送的手机号", trigger: "blur" },
+        ],
+        douyinCode: [
+          { required: true, message: "请输入抖音核销券号", trigger: "blur" },
+        ],
+      },
+      dialogImportVisible: false,
+      dataImportForm: {
+        file: undefined,
+      },
+      importResult: [], //导入结果
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init: function () {
+      if (this.$route.query.pkSn != null)
+        this.listQuery.pkSn = this.$route.query.pkSn;
+      this.getList();
+    },
+    getReferee() {
+      listRoots().then((res) => {
+        this.referees = res.data.data;
+      });
+    },
+    getList() {
+      this.listLoading = true;
+      if (this.listQuery.isExport == false) {
+        listPackageDetail(this.listQuery).then((response) => {
+          this.list = response.data.data.list;
+          this.total = response.data.data.total;
+          this.listLoading = false;
+        });
+      } else {
+        console.info("listPackageDetailExport");
+        listPackageDetailExport(this.listQuery)
+          .then((response) => {
+            let blob = new Blob([response.data], {
+              type: "application/vnd.ms-excel",
+            });
+            console.log(blob);
+            let fileName = Date.parse(new Date()) + ".xlsx";
+            if (window.navigator.msSaveOrOpenBlob) {
+              console.log(2);
+              navigator.msSaveBlob(blob, fileName);
+            } else {
+              console.log(3);
+              var link = document.createElement("a");
+              link.href = window.URL.createObjectURL(blob);
+              link.download = fileName;
+              link.click();
+              //释放内存
+              window.URL.revokeObjectURL(link.href);
+            }
+            this.listLoading = false;
+          })
+          .catch(() => {
+            this.list = [];
+            this.total = 0;
+            this.listLoading = false;
+          });
+      }
+    },
+    handleImport() {
+      this.dialogImportVisible = true;
+      if (this.referees.length == 0) {
+        this.getReferee();
+      }
+      this.dataImportForm = {
+        couponId: undefined,
+        file: undefined,
+        rid: "",
+      };
+      this.importResult = [];
+    },
+    getFile: function (event) {
+      this.dataImportForm.file = event.target.files[0];
+      console.log(this.file);
+    },
+    importConfirm() {
+      if (this.dataImportForm.file == "") {
+        this.$message.warning("请选择文件！");
+        return;
+      }
+      // console.info(this.dataImportForm.file.name)
+      if (this.dataImportForm.file.name.lastIndexOf("xlsx") < 0) {
+        this.$message.warning("请选择excel文件！");
+        return;
+      }
+      this.$refs["dataForm"].validate((valid) => {
+        if (!valid) {
+          return;
+        }
+      });
+
+      const loading = this.$loading({
+        lock: true,
+        text: "文件导入中，请耐心等待...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      var formData = new window.FormData(); // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
+      formData.append("file", this.dataImportForm.file);
+      formData.append("rid", this.dataImportForm.rid);
+
+      packageImport(formData)
+        .then((res) => {
+          console.log("导入返回数据", res);
+          loading.close();
+          if (res.data.errno == 0) {
+            this.$message.success(res.data.errmsg);
+            if (res.data.data.length >= 1) {
+              this.importResult = res.data.data;
+            }
+          } else {
+            this.$message.warning(res.data.errmsg);
+          }
+        })
+        .catch((err) => {
+          loading.close();
+          this.$message.warning(err.data.errmsg);
+        });
+    },
+    handleDelete(row) {
+      //券码作废
+      this.$confirm("确定将此码作废？已兑换未使用也将作废").then((res) => {
+        packageDetailDelete({ packageId: row.id })
+          .then((response) => {
+            this.$message.success("作废成功");
+            this.getList();
+          })
+          .catch((response) => {
+            this.$message.warning(response.data.errmsg);
+          });
+      });
+    },
+    handleSend(row) {
+      this.dialogSendFormVisible = true;
+      this.sendForm = {
+        mobile: "",
+        packageId: row.id,
+      };
+      if (this.referees.length == 0) this.getReferee();
+    },
+    sendSms() {
+      this.$refs["sendForm"].validate((valid) => {
+        if (valid) {
+          packageDetailSend(this.sendForm).then((res) => {
+            if (res.errno == 0) {
+              this.dialogSendFormVisible = false;
+              this.getList();
+              this.$notify.success({
+                title: "成功",
+                message: "短信发送成功",
+              });
+            } else {
+              this.$message.warning(res.data.errmsg);
+            }
+          })
+            .catch((response) => {
+              this.$message.warning(response.data.errmsg);
+            });
+        }
+      });
+    },
+    handleRSend(row) {
+      this.$confirm("确定补发此短信吗？").then((res) => {
+        packageDetailRSend({ mobile: row.preMobile, packageId: row.id }).then(
+          (res) => {
+            if (res.errno == 0) {
+              this.getList();
+              this.$notify.success({
+                title: "成功",
+                message: "短信补发成功",
+              });
+            }
+            else
+              this.$message.warning(res.data.errmsg);
+          }
+        )
+          .catch((response) => {
+            this.$message.warning(response.data.errmsg);
+          });;
+      });
+    },
+    handleFilter(isExport) {
+      this.listQuery.preStart = "";
+      this.listQuery.preEnd = "";
+      this.listQuery.exchangeStart = "";
+      this.listQuery.exchangeEnd = "";
+      if (this.timeArray && this.timeArray.length === 2) {
+        this.listQuery.preStart = this.timeArray[0];
+        this.listQuery.preEnd = this.timeArray[1];
+      }
+      if (this.exchangeTimeArray && this.exchangeTimeArray.length === 2) {
+        this.listQuery.exchangeStart = this.exchangeTimeArray[0];
+        this.listQuery.exchangeEnd = this.exchangeTimeArray[1];
+      }
+      // console.info(this.timeArray)
+      // console.info(this.exchangeTimeArray)
+      // console.info(this.listQuery)
+      this.listQuery.page = 1;
+      this.listQuery.isExport = isExport;
+      this.getList();
+    },
+    getTimeScope() {
+      if (this.coupon.timeType === 0) {
+        return "领取" + this.coupon.days + "天有效";
+      } else if (this.coupon.timeType === 1) {
+        return (
+          "自" + this.coupon.startTime + "至" + this.coupon.endTime + "有效"
+        );
+      } else {
+        return "未知";
+      }
+    },
+    handleDetail(row) {
+      packageDetailRead({ packageId: row.id }).then((res) => {
+        this.detail = res.data.data;
+        this.detailFormVisible = true;
+      });
+    },
+    orderStatusFilter(status) {
+      if (status == null) return "";
+      return statusMap[status];
+    },
+    handleDownload() {
+      import("@/vendor/Export2Excel").then((excel) => {
+        const tHeader = [
+          "券包名称",
+          "券编号",
+          "团长",
+          "团长手机",
+          "客户手机号",
+          "分配的券码",
+          "导入结果",
+        ];
+        const filterVal = [
+          "pkName",
+          "pkSn",
+          "rName",
+          "rmobile",
+          "mobile",
+          "coupon",
+          "remark",
+        ];
+        excel.export_json_to_excel2(
+          tHeader,
+          this.importResult,
+          filterVal,
+          "券包导入"
+        );
+        this.downloadLoading = false;
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.filter-container {
+  margin-top: 20px;
+}
+
+.table-layout {
+  margin-top: 20px;
+  border-left: 1px solid #dcdfe6;
+  border-top: 1px solid #dcdfe6;
+}
+
+.table-cell {
+  height: 60px;
+  line-height: 40px;
+  border-right: 1px solid #dcdfe6;
+  border-bottom: 1px solid #dcdfe6;
+  padding: 10px;
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+  overflow: hidden;
+}
+
+.table-cell-title {
+  border-right: 1px solid #dcdfe6;
+  border-bottom: 1px solid #dcdfe6;
+  padding: 10px;
+  background: #f2f6fc;
+  text-align: center;
+  font-size: 14px;
+  color: #303133;
+}
+</style>