套餐卡

src/components/offlineService/offlineIndex.vue

@@ -169,6 +169,12 @@
           <li class="menu_item" :class="{'Fchecked':isChecked=='/offlineSetup'}"  @click="isChecked='/offlineSetup',CommonJump('offlineSetup')">
             <i class="el-icon-menu"></i><span>基本设置</span>
           </li>
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/osMealCardmanage'}"  @click="isChecked='/osMealCardmanage',CommonJump('osMealCardmanage')">
+            <i class="el-icon-menu"></i><span>套餐卡</span>
+          </li>
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/osCardrelease'}"  @click="isChecked='/osCardrelease',CommonJump('osCardrelease')">
+            <i class="el-icon-menu"></i><span>套餐卡自动发放</span>
+          </li>
 
         </ul>
       </div>

src/components/offlineService/osCardrelease.vue

+<template>
+  <div class="osCardrelease">
+    <div class="el-card__header">
+      <span>自动发放</span>
+      <div style="display: flex;flex-direction: row;align-items: center">
+        <el-button type="primary" class="el-button--small" @click="addRecharge">添加自动发放方案</el-button>
+      </div>
+    </div>
+    <div style="padding: 20px;background: #fff;">
+      <el-table
+        :data="tableData"
+        header-cell-class-name="headClass"
+        style="100%"
+        border
+        v-loading="loading"
+      >
+
+        <el-table-column
+          prop="ID"
+          label="ID">
+        </el-table-column>
+
+        <el-table-column
+          prop="TriggerTypeStr"
+          label="触发事件">
+        </el-table-column>
+        <el-table-column
+          prop="DiscountCouponName"
+          label="套餐卡">
+        </el-table-column>
+        <el-table-column
+          prop="GrantNum"
+          label="发放次数限制">
+          <template slot-scope="scope">
+            <div v-if="scope.row.GrantNum==0">
+              无限制
+            </div>
+            <div v-if="scope.row.GrantNum>0">
+              {{scope.row.GrantNum}}次
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          fixed="right"
+          label="操作"
+        >
+          <template slot-scope="scope">
+
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
+              <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="删除" placement="top" >
+              <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination style="text-align:right"
+                     background
+                     @current-change="handleCurrentChange"
+                     :page-size="msg.pageSize"
+                     layout="prev, pager, next"
+                     :total="count">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "osCardrelease",
+    data(){
+      return{
+        msg:{
+          pageIndex:1,
+          pageSize:20,
+        },
+        tableData:[],
+        count:0,
+        loading:false
+      }
+    },
+    created(){
+      this.getDateList();
+
+    },
+    methods:{
+      getDateList(){
+        this.loading=true;
+        this.apipost("/api/Reserve/GetSelfMotionPageList", this.msg, res => {
+          this.loading=false;
+          if(res.data.resultCode==1){
+            this.tableData = res.data.data.pageData;
+            this.count = res.data.data.count;
+          }else {
+            this.Info(res.data.message);
+          }
+
+        })
+      },
+      addRecharge(){
+        this.$router.push('/osAddcardrelease');
+
+      },
+      Edit(row){
+        this.$router.push({
+          name: 'osAddcardrelease',
+          query: {
+            ID:row.ID,
+            blank: "y"
+          }
+        });
+      },
+      delete_b(row){
+        let that=this;
+        that.Confirm("是否删除?", function () {
+          that.apipost(
+            "/api/Reserve/DelDiscountSelfMotion",
+            {Id:row.ID},
+            res => {
+              if (res.data.resultCode == 1) {
+                that.Success(res.data.message);
+                that.getDateList();
+              } else {
+                that.Error(res.data.message);
+              }
+            },
+          );
+        });
+      },
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getDateList();
+      },
+    }
+  }
+</script>
+
+<style >
+  .osCardrelease .el-card__header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background: #fff;
+
+  }
+  .osCardrelease .el-button--small{
+    padding: 9px 15px;
+  }
+  .osCardrelease .content .searchInput{
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    margin-left: 20px;
+  }
+  .osCardrelease .content .searchInput .el-input__inner{
+    border:none;outline:none;
+    height: 30px;
+    line-height: 30px;
+  }
+  .osCardrelease .content .searchInput{
+    line-height: normal;
+    display: inline-table;
+    border-collapse: separate;
+    border-spacing: 0;
+    width:250px;
+  }
+  .osCardrelease .content{
+    background: #fff;
+    margin-top:10px;
+    padding: 15px;
+    box-sizing: border-box;
+  }
+</style>

src/components/offlineService/osMealCardmanage.vue

+<template>
+  <div class="osMealCardmanage">
+    <div class="el-card__header">
+      <span>套餐卡管理</span>
+      <div style="display: flex;flex-direction: row;align-items: center">
+        <el-button type="primary" class="el-button--small" @click="addRecharge">新增</el-button>
+      </div>
+    </div>
+    <div class="content">
+      <div style="display: flex;flex-direction: row;align-items: center">
+        <div class="block">
+          <div class="searchInput" style="width:250px">
+            <el-input style="display:inline-block;width:225px;height:30px"
+                      placeholder="请输入套餐卡名称搜索"
+                      v-model="msg.Name"
+                      size="small"
+                      @clear="getList"
+                      @keyup.enter.native="getList"
+                      clearable>
+            </el-input>
+            <span @click="getList" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <div style="padding: 20px;background: #fff;">
+      <el-table
+        :data="tableData"
+        header-cell-class-name="headClass"
+        style="width: 100%"
+        border
+      >
+
+        <el-table-column
+          prop="ID"
+          label="ID"
+          width="100">
+        </el-table-column>
+
+        <el-table-column
+          prop="Name"
+          label="套餐卡信息">
+          <template slot-scope="scope">
+            <div class="app-image" :style="{backgroundImage:'url(' + scope.row.CouponIco + ')',backgroundSize:'cover'}"></div>
+            <div flex="dir:left cross:center">
+              {{scope.row.Name}}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="HeXiao"
+          label="可用次数">
+
+        </el-table-column>
+
+
+        <el-table-column
+          label="有效时间"
+          prop="StartDate">
+          <template slot-scope="scope">
+            <div v-if="scope.row.IndateType==1">领取后{{scope.row.IndateDay}}天内有效</div>
+            <div v-if="scope.row.IndateType==2">开始时间：{{scope.row.StartDate}}</div>
+            <div v-if="scope.row.IndateType==2">结束时间：{{scope.row.EndDate}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="使用范围"
+          prop="UseTypeStr">
+
+        </el-table-column>
+        <el-table-column
+          label="添加日期"
+          prop="CreateDate">
+
+        </el-table-column>
+
+        <el-table-column
+          label="加入领券中心 "
+          width="120">
+          <!--PickupType-->
+          <template slot-scope="scope">
+            <el-switch
+              @change="dianswitch(scope.row)"
+              :active-value="1"
+              :inactive-value="0"
+              v-model="scope.row.PickupCenter"
+            >
+            </el-switch>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="发放优惠券" placement="top" >
+              <img src="../../assets/img/setup/send.png" alt="" class="imgstyle" @click="grant(scope.row)">
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
+              <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="删除" placement="top" >
+              <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination style="text-align:right"
+                     background
+                     @current-change="handleCurrentChange"
+                     :page-size="msg.pageSize"
+                     layout="prev, pager, next"
+                     :current-page.sync="msg.pageIndex"
+                     :total="count">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "osMealCardmanage",
+    data(){
+      return{
+        msg:{
+          pageIndex:1,
+          pageSize:20,
+          Name:'',
+        },
+        tableData:[],
+        count:0,
+        loading:false
+      }
+    },
+    created(){
+      this.getDateList();
+
+    },
+    methods:{
+      getDateList(){
+        this.loading=true;
+        this.apipost("/api/Reserve/GetDiscountCouponPageList", this.msg, res => {
+          this.loading=false;
+          if(res.data.resultCode==1){
+            this.tableData = res.data.data.pageData;
+            this.count = res.data.data.count;
+          }else {
+            this.Info(res.data.message);
+          }
+
+        })
+      },
+      addRecharge(){
+        this.$router.push('/osAddmealcard');
+
+      },
+      grant(row){
+        var arr=JSON.stringify(row)
+        this.$router.push({
+          name: 'osedgrantCouPon',
+          query: {
+            row
+          }
+        });
+      },
+      Edit(row){
+        this.$router.push({
+          name: 'osAddmealcard',
+          query: {
+            ID:row.ID,
+            blank: "y"
+          }
+        });
+      },
+      delete_b(row){
+        let that=this;
+        that.Confirm("是否删除?", function () {
+          that.apipost(
+            "/api/Reserve/DelDiscountCoupon",
+            {Id:row.ID},
+            res => {
+              if (res.data.resultCode == 1) {
+                that.Success(res.data.message);
+                that.getDateList();
+              } else {
+                that.Error(res.data.message);
+              }
+            },
+          );
+        });
+      },
+      SetUp(){
+        this.$router.push('/rechargeSet');
+      },
+      getList(){
+        this.msg.pageIndex = 1
+        this.getDateList()
+      },
+      dianswitch(row){
+        this.apipost("/api/Reserve/UpdatePickupType", {'Id':row.ID}, res => {
+          if(res.data.resultCode==1){
+            this.Success(res.data.message);
+          }else {
+            this.Info(res.data.message);
+          }
+
+        })
+      },
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getDateList();
+      },
+    },
+  }
+</script>
+
+<style >
+  .osMealCardmanage .el-card__header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background: #fff;
+
+  }
+  .osMealCardmanage .el-button--small{
+    padding: 9px 15px;
+  }
+  .osMealCardmanage .content .searchInput{
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    margin-left: 20px;
+  }
+  .osMealCardmanage .content .searchInput .el-input__inner{
+    border:none;outline:none;
+    height: 30px;
+    line-height: 30px;
+  }
+  .osMealCardmanage .content .searchInput{
+    line-height: normal;
+    display: inline-table;
+    border-collapse: separate;
+    border-spacing: 0;
+    width:250px;
+  }
+  .osMealCardmanage .content{
+    background: #fff;
+    margin-top:10px;
+    padding: 15px;
+    box-sizing: border-box;
+  }
+  .osMealCardmanage .app-image{
+    background-position: center center;
+    width: 50px;
+    height: 50px;
+    border-radius:0%;
+    float: left;
+    margin-right: 8px;
+  }
+</style>

src/components/offlineService/osedgrantCouPon.vue

+<template>
+  <div class="osedgrantCouPon">
+    <div class="form-box" style="margin-top: 0">
+      <div>
+        <span style="color: rgb(64, 158, 255);cursor: pointer;margin-left: 20px" @click="cancel">套餐卡管理</span>
+        <span style="margin: 0 5px;color: #C0C4CC;">/</span>
+        <span>套餐卡发放</span>
+      </div>
+    </div>
+    <div class="el-card__body" style="background-color: white; padding: 15px 50% 15px 0 ;margin-top: 20px">
+      <el-form :model="msg" style="padding:0 20px;" :rules="rules" ref="msg" label-width="160px"  size="medium">
+        <el-form-item label="套餐卡名称">
+          <span>{{record.Name}}</span>
+        </el-form-item>
+
+        <el-form-item label="剩余数量">
+          <div v-if="record.TotalNum ==-1">{{record.TotalNum ==-1? '无限制领取':record.TotalNum}}</div>
+          <div v-if="record.TotalNum !=-1">{{record.TotalNum}}</div>
+        </el-form-item>
+        <el-form-item label="套餐卡有效期">
+          <div v-if="record.IndateType==1">领取后{{record.IndateDay}}天内有效</div>
+          <div v-if="record.IndateType==2">开始时间：{{record.StartDate}}</div>
+          <div v-if="record.IndateType==2">结束时间：{{record.EndDate}}</div>
+        </el-form-item>
+
+        <el-form-item label="发送数量" prop="GrantNum">
+          <el-input v-model="msg.GrantNum" size="small" style="width: 40%" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\d{0,2})?/) ? this.value.match(/\d+(\d{0,2})?/)[0] : ''"/>
+        </el-form-item>
+        <el-form-item label="发放对象" >
+          <el-tooltip class="item" effect="dark" content="请输入昵称/ID/手机号查找用户" placement="top"
+                      style="position: absolute;left: -10px;top:10px">
+            <i class="el-tooltip el-icon-info"></i>
+          </el-tooltip>
+          <el-input v-model="AliasName" style="width: 20%;margin-left: 5px"  placeholder="昵称/ID/手机号" size="small"/>
+          <el-button :loading="loading" @click="lookup" size="small">查找用户</el-button>
+          <div style="width: 80%;display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 5px" v-if="ByPhone.length>0">
+            <el-checkbox-group v-model="msg.UserIds" @change = 'SelectBy'>
+              <el-checkbox-button v-for="(item,index) in ByPhone" :label="item.Id" :key="index" >
+                <img :src="item.Photo" alt="" class="avatar">
+                <div class="username">{{item.AliasName}}</div>
+              </el-checkbox-button>
+
+            </el-checkbox-group>
+          </div>
+          <div style="width: 30%;display: flex;flex-direction: row;margin-top: 5px;justify-content: center;color: #666666" v-if="ByPhone.length==0">暂无数据~</div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-button type="primary" style="margin: 12px 0 " @click="preserve('msg')" :loading="loading2">保存</el-button>
+    <el-button @click="cancel">取消</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "osedgrantCouPon",
+    data(){
+      return{
+        record:{},
+        msg:{
+          GrantNum:0,
+          UserIds:[],
+        },
+        AliasName:'',
+        rules:{
+          GrantNum:[
+            { validator: this.DiscountsPrice, trigger: 'blur' }
+          ]
+        },
+        loading:false,
+        loading2:false,
+        ByPhone:[],
+      }
+    },
+    created(){
+      if(this.$route.query.row){
+        this.record = this.$route.query.row
+      }
+    },
+    methods:{
+      cancel(){
+        this.$router.go(-1)
+      },
+      lookup(){
+        this.msg.UserIds = [];//重新选择的时候清楚之前的
+        this.loading = true;
+        this.apipost("/api/User/GetListByPhoneOrAliasName",{'AliasName':this.AliasName,SmallShopId:this.record.SmallShopId}, res => {
+          this.loading = false;
+
+          if (res.data.resultCode == 1) {
+            this.ByPhone = res.data.data
+          } else {
+            this.Info(res.data.message);
+          }
+
+        })
+
+      },
+      SelectBy(val){
+        this.msg.UserIds = val
+      },
+      DiscountsPrice(rule, value, callback) {
+        if(value>0){
+          return callback();
+        }else {
+          return callback(new Error('发送数量需大于零'));
+        }
+
+      },
+      preserve(formName){
+
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let UserIds = ''
+            if(this.msg.UserIds.length>0){
+              UserIds = this.msg.UserIds.join(",")
+            }
+            let data = {
+              ID: this.record.ID,
+              GrantNum :this.msg.GrantNum,
+              UserIds:UserIds,
+            }
+            this.apipost("/api/Reserve/GrantCoupon",data, res => {
+              this.loading2 = false;
+
+              if (res.data.resultCode == 1) {
+                this.Success(res.data.message);
+                this.$router.go(-1);//返回上一层
+              } else {
+                this.Info(res.data.message);
+              }
+
+            })
+          } else {
+            return false;
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style >
+  .osedgrantCouPon .form-box {
+    background: #fff;
+    padding: 18px 50% 18px 0;
+    margin-top: 10px;
+  }
+  .osedgrantCouPon .el-input--small .el-input__inner{
+    height: 32px;
+    line-height: 32px;
+  }
+  .osedgrantCouPon .username{
+    margin-top: 10px;
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .osedgrantCouPon  .el-checkbox-button__inner {
+    border: 1px solid #e2e2e2;
+    height: 125px;
+    width: 120px;
+    padding-top: 15px;
+    text-align: center;
+    margin: 0 20px 20px 0;
+    cursor: pointer;
+    border-radius: 0!important;
+  }
+  .osedgrantCouPon .el-checkbox-button, .el-checkbox-button__inner{
+    display: inline-block;
+    position: relative;
+  }
+  .osedgrantCouPon  .avatar {
+    height: 60px;
+    width: 60px;
+    border-radius: 30px;
+  }
+</style>

src/router/index.js

@@ -343,7 +343,37 @@ export default new Router({
           path: '/offlineSetup',
           name: 'offlineSetup',
           component: resolve => require(['@/components/offlineService/offlineSetup'], resolve),
-        }
+        },
+        //线下 套餐卡列表
+        {
+          path: '/osMealCardmanage',
+          name: 'osMealCardmanage',
+          component: resolve => require(['@/components/offlineService/osMealCardmanage'], resolve),
+        },
+        //线下 套餐卡编辑
+        {
+          path: '/osAddmealcard',
+          name: 'osAddmealcard',
+          component: resolve => require(['@/components/offlineService/osAddmealcard'], resolve),
+        },
+        //线下 套餐卡自动发放
+        {
+          path: '/osCardrelease',
+          name: 'osCardrelease',
+          component: resolve => require(['@/components/offlineService/osCardrelease'], resolve),
+        },
+        //线下 套餐卡自动发放编辑
+        {
+          path: '/osAddcardrelease',
+          name: 'osAddcardrelease',
+          component: resolve => require(['@/components/offlineService/osAddcardrelease'], resolve),
+        },
+        //线下 套餐卡发放
+        {
+          path: '/osedgrantCouPon',
+          name: 'osedgrantCouPon',
+          component: resolve => require(['@/components/offlineService/osedgrantCouPon'], resolve),
+        },
       ]
     },