会员卡

src/components/offlineService/offlineIndex.vue

@@ -178,6 +178,9 @@
           <li class="menu_item" :class="{'Fchecked':isChecked=='/osCardrelease'}"  @click="isChecked='/osCardrelease',CommonJump('osCardrelease')">
             <i class="el-icon-menu"></i><span>套餐卡自动发放</span>
           </li>
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/osVipList'}"  @click="isChecked='/osVipList',CommonJump('osVipList')">
+            <i class="el-icon-menu"></i><span>会员卡</span>
+          </li>
           <li class="menu_item" :class="{'Fchecked':isChecked=='/serviceProductList'}"  @click="isChecked='/serviceProductList',CommonJump('serviceProductList')">
             <i class="el-icon-menu"></i><span>服务产品</span>
           </li>

src/components/offlineService/osAddVip.vue

+<template>
+  <div class="osAddVip">
+    <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: 0px;margin-top: 20px">
+      <el-form :model="msg" style="padding:0 20px;" :rules="rules" ref="msg" label-width="160px" size="small">
+        <div class="form-body">
+          <el-form-item label="会员卡名称" prop="Name" class="is-required">
+            <el-input v-model="msg.Name" />
+          </el-form-item>
+          <el-form-item label="会员卡图标" prop="CardBagIco" class="is-required">
+            <button class="el-button el-button--default el-button--small" @click="openChangeDig()">
+              选择图标
+            </button>
+            <div class="img_yuan inputM_l">
+              <img v-if="msg.CardBagIco=='' || msg.CardBagIco==null" src="../../assets/img/setup/default_img.png" alt="">
+              <img v-else :src="msg.CardBagIco" alt="">
+            </div>
+          </el-form-item>
+          <el-form-item label="加入领券中心">
+            <el-switch :active-value="1" :inactive-value="0" v-model="msg.PickupCenter">
+            </el-switch>
+          </el-form-item>
+          <el-form-item label="门店">
+            <el-select style="width:636px;" v-model="storeCheck" multiple placeholder="请选择">
+              <el-option v-for="item in StoreList" :key="item.Id" :label="item.Name" :value="item.Id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="有效期范围" class="is-required" >
+            <el-date-picker @input="daterangeChange" style="padding: 3px 10px;width: 450px;height: 32px"
+                            v-model.trim="msg.value" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+                            end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" align="right">
+            </el-date-picker>
+          </el-form-item>
+
+          <el-form-item label="会员卡描述">
+            <div style="line-height:normal;">
+              <UE :defaultMsg="msg.Describe" :config="config" ref="ue" :IsMultiple="true"></UE>
+            </div>
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <el-button type="primary" style="margin: 12px 0" size="small" @click="preserve('msg')" :loading="loading">保存
+    </el-button>
+    <!-- 选择文件 -->
+    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
+      <ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import UE from '@/components/global/UE.vue'
+
+  export default {
+    name: "osAddVip",
+    components: {
+      ChooseImg,
+      UE,
+
+    },
+    data() {
+      return {
+        msg: {
+          ID: 0,
+          Name: '',
+          Describe: '',
+          PickupCenter: 0,
+          StartDate: '',
+          EndDate: '',
+          SmallShopId: 0, //微店id
+          IsZanYangUse: 0,
+          StoreIds: '', //	店铺id
+          CardBagIco:'',
+        },
+        config: {
+          initialFrameWidth: null,
+          initialFrameHeight: 350,
+        },
+        checkedkeys: [], //默认选中的
+        huiyuan: false,
+        zhongxin: true,
+        checked: true,
+        loading: false,
+        activeName: 'first',
+        commoditylist: [], //商品的list
+        changeState: false,
+        rules: {
+          Name: [{
+            required: true,
+            message: "会员卡名称不能为空",
+            trigger: "blur"
+          }],
+
+
+
+          CardBagIco: [{
+            required: true,
+            message: "请选择会员卡图标",
+            trigger: "blur"
+          }],
+
+          value: [{
+            type: 'array',
+            required: true,
+            message: '会员卡有效期不能为空',
+            trigger: 'change'
+          }
+
+          ]
+        },
+        cityOptions: [],
+        checkAll: false,
+        isIndeterminate: false,
+        category: false,
+        AppointList: [], //指定商品分类
+        defaultProps: {
+          children: 'ChildList',
+          label: 'Name'
+        },
+        eData: {},
+
+        tableData: [],
+        loading_t: false,
+        count: 0,
+        multipleSelection: [],
+        AppointList2: [],
+        SmallShopMsg: {
+          Name: '',
+        },
+        storeCheck: [], //门店多选
+        StoreList: [], //门店下拉
+      }
+    },
+    created() {
+      this.getStoreList();
+
+      if (this.$route.query.ID) {
+        this.msg.ID = this.$route.query.ID;
+        this.getData()
+      }
+
+    },
+    methods: {
+      //获取门店下拉
+      getStoreList() {
+        this.apipost("/api/MContent/GetStoresList", {}, res => {
+          if (res.data.resultCode == 1) {
+            this.StoreList = res.data.data;
+          } else {
+            this.Error(res.data.message);
+          }
+        })
+      },
+
+      getData(){
+        this.apipost("/api/Reserve/GetCardBagDetail", {
+          ID: this.msg.ID
+        }, res => {
+          if (res.data.resultCode == 1) {
+            this.msg = res.data.data;
+            this.msg.value = [];
+
+              this.msg.value.push(res.data.data.StartDate.replace("T", " "))
+              this.msg.value.push(res.data.data.EndDate.replace("T", " "))
+
+            this.storeCheck=[];
+            if(this.msg.StoreIds!=0){
+              var cked = this.msg.StoreIds.split(',');
+              cked.forEach(x=>{
+                this.storeCheck.push(parseInt(x));
+              })
+            }
+
+          } else {
+            this.Error(res.data.message);
+          }
+        })
+      },
+
+
+      cancel() {
+        this.$router.go(-1)
+      },
+
+      // 数组去重
+      unique(arr) {
+        for (var i = 0, len = arr.length; i < len; i++) {
+          for (var j = i + 1, len = arr.length; j < len; j++) {
+            if (arr[i].Id === arr[j].Id) {
+              arr.splice(j, 1);
+              j--; // 每删除一个数j的值就减1
+              len--; // j值减小时len也要相应减1（减少循环次数，节省性能）
+            }
+          }
+        }
+        return arr;
+      },
+
+      daterangeChange(e) {
+        let _this = this
+        if (e == null) {
+          _this.msg.value = []
+        } else {
+
+          _this.$nextTick(() => {
+            _this.$set(_this.msg, "value", [e[0], e[1]]);
+          });
+        }
+        _this.$forceUpdate();
+
+
+      },
+
+
+
+      preserve(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            if (this.msg.value.length > 0) {
+              this.msg.StartDate = this.msg.value[0];
+              this.msg.EndDate = this.msg.value[1];
+            } else {
+              this.Error('会员卡有效期不能为空')
+              return false
+            }
+            this.msg.Describe = this.$refs.ue.getUEContent();
+
+            this.loading = true
+            if (this.storeCheck.length == 0) {
+              this.msg.StoreIds = 0;
+            } else {
+              this.msg.StoreIds = this.storeCheck.join(',');
+            }
+            this.apipost("/api/Reserve/AddOrUpdateCardBag", this.msg, res => {
+              this.loading = false
+              if (res.data.resultCode == 1) {
+                this.Success(res.data.message);
+                // this.$router.go(-1); //返回上一层
+                this.$router.push('/osVipList');
+              } else {
+                this.Info(res.data.message);
+              }
+            })
+          } else {
+            return false;
+          }
+        });
+      },
+
+      getObjById(list, id) {
+        if (!list instanceof Array) {
+          return null
+        }
+        //遍历数组
+        for (let i in list) {
+          let item = list[i]
+          if (item.Id === id) {
+            return item
+          } else {
+            //查不到继续遍历
+            if (item.ChildList) {
+              let value = this.getObjById(item.ChildList, id)
+              //查询到直接返回
+              if (value) {
+                return value
+              }
+            }
+          }
+        }
+      },
+
+
+      openChangeDig() {
+        this.changeState = true;
+        // setTimeout(() => {
+        //   this.$refs.mychild.InitData();
+        // }, 10)
+      },
+      SelectId(msg) {
+        this.changeState = false;
+        this.msg.CardBagIco = this.getIconLink(msg.url);
+      },
+
+    },
+    mounted() {
+
+    }
+  }
+
+</script>
+
+<style>
+  .osAddVip .form-box {
+    background: #fff;
+    padding: 20px 50% 20px 0;
+    margin-top: 10px;
+  }
+
+  .osAddVip .el-input--small .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  .osAddVip .img_yuan {
+    width: 80px;
+    height: 80px;
+    margin-top: 5px;
+    position: relative;
+  }
+
+  .osAddVip .img_yuan img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .osAddVip .el-date-editor .el-range__icon {
+    line-height: 24px;
+  }
+
+  .osAddVip .el-date-editor .el-range-separator {
+    line-height: 24px;
+
+  }
+
+  .osAddVip .el-date-editor .el-range__close-icon {
+    line-height: 24px;
+
+  }
+
+  .osAddVip .el-form-item__label {
+    padding: 0 20px 0 0;
+  }
+
+  .osAddVip .form-body {
+    background-color: #fff;
+    padding: 10px 50% 10px 20px;
+    min-width: 1000px;
+  }
+
+  .osAddVip .splist {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .osAddVip .app-image {
+    width: 50px;
+    height: 50px;
+    border-radius: 0%;
+    background-position: center center;
+  }
+
+</style>

src/components/offlineService/osVipList.vue

+<template>
+  <div class="osVipList">
+    <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 class="searchInput" style="width:250px">
+            <el-input style="display:inline-block;width:225px;height:30px"
+                      placeholder="请输入会员卡卡号搜索"
+                      v-model="msg.CarNo"
+                      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.CardBagIco + ')',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
+          prop="CardNo"
+          label="卡号"
+        >
+        </el-table-column>
+        <el-table-column
+          label="有效时间"
+          prop="StartDate">
+          <template slot-scope="scope">
+            <div>开始时间：{{scope.row.StartDate}}</div>
+            <div>结束时间：{{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/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: "osVipList",
+    data(){
+      return{
+        msg:{
+          pageIndex:1,
+          pageSize:20,
+          Name:'',
+          CarNo:'',
+        },
+        tableData:[],
+        count:0,
+        loading:false
+      }
+    },
+    created(){
+      this.getDateList();
+
+    },
+    methods:{
+      getDateList(){
+        this.loading=true;
+        this.apipost("/api/Reserve/GetCardBagPageList", 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('/osAddVip');
+
+      },
+
+      Edit(row){
+        this.$router.push({
+          name: 'osAddVip',
+          query: {
+            ID:row.ID,
+            blank: "y"
+          }
+        });
+      },
+      delete_b(row){
+        let that=this;
+        that.Confirm("是否删除?", function () {
+          that.apipost(
+            "/api/Reserve/DelCardBag",
+            {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/UpdateCardBagPickupType", {'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 >
+  .osVipList .el-card__header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background: #fff;
+
+  }
+  .osVipList .el-button--small{
+    padding: 9px 15px;
+  }
+  .osVipList .content .searchInput{
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    margin-left: 20px;
+  }
+  .osVipList .content .searchInput .el-input__inner{
+    border:none;outline:none;
+    height: 30px;
+    line-height: 30px;
+  }
+  .osVipList .content .searchInput{
+    line-height: normal;
+    display: inline-table;
+    border-collapse: separate;
+    border-spacing: 0;
+    width:250px;
+  }
+  .osVipList .content{
+    background: #fff;
+    margin-top:10px;
+    padding: 15px;
+    box-sizing: border-box;
+  }
+  .osVipList .app-image{
+    background-position: center center;
+    width: 50px;
+    height: 50px;
+    border-radius:0%;
+    float: left;
+    margin-right: 8px;
+  }
+</style>

src/router/index.js

@@ -453,6 +453,18 @@ export default new Router({
           path: '/performanceStatics',
           name: 'performanceStatics',
           component: resolve => require(['@/components/offlineService/performanceStatics'], resolve),
+        },
+        //线下 会员卡
+        {
+          path: '/osVipList',
+          name: 'osVipList',
+          component: resolve => require(['@/components/offlineService/osVipList'], resolve),
+        },
+        //线下 会员卡新增修改
+        {
+          path: '/osAddVip',
+          name: 'osAddVip',
+          component: resolve => require(['@/components/offlineService/osAddVip'], resolve),
         }
       ]
     },