xcx

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@antv/g2": "^3.2.7",
     "axios": "^0.18.0",
+    "clipboard": "^2.0.1",
     "element-ui": "^2.4.5",
     "g2-vue": "^1.0.1",
     "js-base64": "^2.4.8",

src/pages/system/cardAndCouponManager/bodyBuildingCardManager/edit.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <span>选择案场：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-select v-model="cardInfo.CaseId" placeholder="请选择" @change="caseChange">
+                <el-option
+                  v-for="item in cases"
+                  :key="item.CaseId"
+                  :label="item.CaseName"
+                  :value="item.CaseId">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>卡图片：</span>
+          <div class="flex-item">
+            <div>
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="cardInfo.Images" :src="cardInfo.Images[0].CardImageUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>卡名称：</span>
+          <div class="flex-item">
+            <div style="width:200px;">
+              <el-input
+                placeholder="请输入"
+                v-model="cardInfo.CardName"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>卡价格：</span>
+          <div class="flex-item">
+            <div style="width:200px;">
+              <el-input
+                placeholder="请输入"
+                v-model="cardInfo.Price"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>总张数：</span>
+          <div class="flex-item">
+            <div style="width:200px;">
+              <el-input
+                placeholder="请输入"
+                v-model="cardInfo.TotalCount"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>发送类型：</span>
+          <div class="flex-item">
+            <div>
+              <el-radio v-model="cardInfo.SendType" label="channel">渠道</el-radio>
+              <el-radio v-model="cardInfo.SendType" label="case">案场</el-radio>
+              <el-radio v-model="cardInfo.SendType" label="system">系统</el-radio>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h" v-if="cardInfo.SendType === 'channel'">
+          <span>选择渠道：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-select v-model="cardInfo.ChannelId" placeholder="请选择">
+                <el-option
+                  v-for="item in channelList"
+                  :key="item.ChannelId"
+                  :label="item.ChannelName"
+                  :value="item.ChannelId">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>目标课程：</span>
+          <div class="flex-item">
+            <div>
+              <el-select v-model="cardInfo.Targets[0].TargetId" placeholder="请选择">
+                <el-option
+                  v-for="item in courseList"
+                  :key="item.CourseId"
+                  :label="item.CourseName"
+                  :value="item.CourseId"
+                  :disabled="item.Status !== 1">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>卡有效时间：</span>
+          <div class="flex-item">
+            <div>
+              <div class="addLine flex-h" style="align-item:center;margin-bottom:20px;">
+                <!-- <el-date-picker
+                  v-model="cardInfo.StartDate"
+                  type="date"
+                  placeholder="选择起始日期">
+                </el-date-picker>
+                <span style="line-height:40px;">至</span>
+                <el-date-picker
+                  v-model="cardInfo.EndDate"
+                  type="date"
+                  placeholder="选择截止日期">
+                </el-date-picker> -->
+                <el-date-picker
+                  v-model="date"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :picker-options="pickerOptions">
+                </el-date-picker>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>视频：</span>
+          <div class="flex-item">
+            <div style="vertical-align: middle;">
+              <a style="line-height: 40px;" v-if="videoOff" :href="cardInfo.VideoUrl" target="blank">{{cardInfo.VideoUrl}}</a>
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="videoSuccess">
+                <a style="line-height: 40px;padding: 0 10px;">{{videoOff ? '更换' : '添加'}}视频</a>
+              </el-upload>
+              <el-button v-if="videoOff" type="danger" @click="deleteVideo">删除视频</el-button>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>分享描述：</span>
+          <div class="flex-item">
+            <div>
+              <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入"
+                v-model="cardInfo.Share.CardShareInfo">
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>规则描述：</span>
+          <div class="flex-item">
+            <div>
+              <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入"
+                v-model="cardInfo.Share.CardUseRule">
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>使用说明：</span>
+          <div class="flex-item">
+            <div>
+              <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入"
+                v-model="cardInfo.Share.CardUseInstruction">
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapCardActions } = createNamespacedHelpers('card')
+const { mapState: mapChannelState, mapActions: mapChannelActions } = createNamespacedHelpers('channel')
+const { mapActions: mapCourseActions } = createNamespacedHelpers('course')
+
+export default {
+  name: '',
+  data () {
+    return {
+      date: '',
+      courseList: [],
+      videoOff: false,
+      total: 0,
+      type: this.$route.query.type,
+      isEdit: this.$route.query.id === undefined ? 0 : 1,
+      ChannelList: [], // 渠道列表
+      TypeList: [], // 类型列表
+      GoodsList: [], // 商品列表
+      currentList: [{
+        Name: 'ccc',
+        Type: 'xxx'
+      }], // 指定商品数据
+      cardInfo: {
+        CardName: '',
+        SendType: '',
+        VideoUrl: '',
+        Price: ' ',
+        StartDate: '',
+        EndDate: '',
+        TotalCount: '',
+        CaseId: '',
+        OrgId: '',
+        Share: {
+          CardShareInfo: '',
+          CardUseRule: '',
+          CardUseInstruction: ''
+        },
+        Images: [{
+          CardImageUrl: ''
+        }],
+        Targets: [{
+          TargetType: '',
+          TargetId: '',
+          TargetName: ''
+        }],
+        ChannelId: ''
+      },
+      postData: {
+        page: 1,
+        pagesize: 10,
+      },
+    }
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.GetChannelListList({
+        caseid: this.defaultCaseId,
+        page: 1,
+        pagesize: 10000
+      }).then(() => {
+        this.GetCourseList({
+          caseid: this.defaultCaseId,
+          page: 1,
+          pagesize: 10000
+        }).then((res) => {
+          this.courseList = res.list
+          if (this.$route.query.id) {
+            this.getCardById({
+              id: this.$route.query.id
+            }).then((res) => {
+              // console.log(JSON.stringify(res.Card))
+              this.cardInfo = res.Card
+              if (res.Card.VideoUrl) {
+                this.videoOff = true
+              }
+              if (res.Card.Images === null) {
+                this.cardInfo.Images = [{
+                  CardImageUrl: ''
+                }]
+              }
+              if (res.Card.StartDate) {
+                this.date = [res.Card.StartDate, res.Card.EndDate]
+              }
+            })
+          }
+        })
+      })
+    })
+  },
+  computed: {
+    ...mapChannelState({
+      channelList: x => x.channelList,
+    }),
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    pickerOptions () {
+      const courseId = this.cardInfo.Targets[0].TargetId
+      const couse = (this.courseList || []).filter(x => x.CourseId === courseId)[0] || {}
+      const beginDate = new Date(couse.BeginDate).getTime()
+      const endDate = new Date(couse.EndDate).getTime()
+      return {
+        disabledDate (time) {
+          return time.getTime() < beginDate || time.getTime() > endDate
+        }
+      }
+    },
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  methods: {
+    ...mapCardActions([
+      'addCard',
+      'getCardById',
+      'editCard',
+    ]),
+    ...mapCourseActions([
+      'GetCourseList',
+    ]),
+    ...mapChannelActions([
+      'GetChannelListList',
+    ]),
+    caseChange () { // 选择案场
+      this.GetChannelListList({
+        caseid: this.cardInfo.CaseId,
+        page: 1,
+        pagesize: 10000
+      })
+      this.GetCourseList({
+        caseid: this.cardInfo.CaseId,
+        page: 1,
+        pagesize: 10000
+      }).then((res) => {
+        this.courseList = res.list
+      })
+      this.cardInfo.Targets = [{
+        TargetType: '',
+        TargetId: '',
+        TargetName: ''
+      }]
+      this.cardInfo.ChannelId = ''
+    },
+    deleteVideo () { // 删除视频
+      this.cardInfo.VideoUrl = ''
+      this.videoOff = false
+    },
+    videoSuccess (res, file) {
+      this.videoOff = true
+      this.cardInfo.VideoUrl = res.result.url
+    },
+    addGoods () { // 添加指定商品
+      this.centerDialogVisible = true
+    },
+    submit () { // 保存
+      if (this.$route.query.id) {
+        if (this.date !== '') {
+          this.cardInfo.StartDate = this.date[0]
+          this.cardInfo.EndDate = this.date[1]
+        }
+        for (var x = 0; x < this.courseList.length; x++) {
+          if (this.courseList[x].CourseId === this.cardInfo.Targets[0].TargetId) {
+            this.cardInfo.Targets[0].TargetType = this.courseList[x].CourseType
+            this.cardInfo.Targets[0].TargetName = this.courseList[x].CourseName
+          }
+        }
+        this.cardInfo.TotalCount = this.cardInfo.TotalCount - 0
+        console.log(JSON.stringify(this.cardInfo))
+        this.editCard(this.cardInfo).then((res) => {
+          this.$alert('操作成功', '提示', {
+            confirmButtonText: '确定',
+            callback: action => {
+              this.$router.push({ name: 'cardList' })
+            }
+          })
+        })
+      } else {
+        this.cardInfo.OrgId = this.OrgId
+        if (this.date !== '') {
+          this.cardInfo.StartDate = this.date[0]
+          this.cardInfo.EndDate = this.date[1]
+        }
+        for (var n = 0; n < this.courseList.length; n++) {
+          if (this.courseList[n].CourseId === this.cardInfo.Targets[0].TargetId) {
+            this.cardInfo.Targets[0].TargetType = this.courseList[n].CourseType
+            this.cardInfo.Targets[0].TargetName = this.courseList[n].CourseName
+          }
+        }
+        this.cardInfo.TotalCount = this.cardInfo.TotalCount - 0
+        console.log(JSON.stringify(this.cardInfo))
+        this.addCard(this.cardInfo).then((res) => {
+          this.$alert('操作成功', '提示', {
+            confirmButtonText: '确定',
+            callback: action => {
+              this.$router.push({ name: 'cardList' })
+            }
+          })
+        })
+      }
+    },
+    cancel () { // 取消
+      this.$router.push({ name: 'couponList' })
+    },
+    handleAvatarSuccess (res, file) {
+      this.cardInfo.Images[0].CardImageUrl = res.result.url
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.addLine {
+  > * {
+    margin-right: 10px;
+  }
+}
+.mainForm > ul > li > div > div > button {
+  margin-top: 0;
+}
+</style>

src/pages/system/cardAndCouponManager/bodyBuildingCardManager/index.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click="addCard">新增健身卡</el-button>
+        </div>
+        <ul>
+          <li>
+            <el-select v-model="CaseId" placeholder="请选择案场">
+              <el-option
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
+          </li>
+        </ul>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="cardList.list"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="CardName"
+          label="卡名称">
+        </el-table-column>
+        <!-- <el-table-column
+          prop="xxx"
+          label="卡类型">
+        </el-table-column> -->
+        <el-table-column
+          prop="Price"
+          label="卡价格">
+        </el-table-column>
+        <el-table-column
+          prop="StartDate"
+          label="有效期"
+          width="150">
+          <template slot-scope="scope">
+            <span style="width:100%;display:block;text-align:center;white-space: nowrap;">{{toolClass.dateFormat(scope.row.StartDate)}}</span>
+            <span style="width:100%;display:block;text-align:center;white-space: nowrap;">至</span>
+            <span style="width:100%;display:block;text-align:center;white-space: nowrap;">{{toolClass.dateFormat(scope.row.EndDate)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="SendType"
+          label="发放类型">
+        </el-table-column>
+        <el-table-column
+          prop="TotalCount"
+          label="总数量">
+        </el-table-column>
+        <el-table-column
+          prop="SentCount"
+          label="已发">
+        </el-table-column>
+        <el-table-column
+          prop="UsedCount"
+          label="实际使用">
+        </el-table-column>
+        <el-table-column
+          prop="Status"
+          label="状态">
+          <template slot-scope="scope">
+            {{scope.row.Status == 1 ? '正常' : '已过期'}}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed='right' width="350">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="warning"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="sendCard(scope.$index, scope.row)">赠送客户</el-button>
+            <a class="copyBtn" :data-clipboard-text="'www.baidu.com'" :ref="'copy' + scope.$index" @click="toCopy(scope.$index, scope.row)">点击复制链接</a>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
+      layout="prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+    <el-dialog
+      title="选择赠送客户"
+      :visible.sync="centerDialogVisible"
+      width="800px"
+      center>
+      <div>
+        <ul class="dialogSearchList flex-h" style="margin-bottom:10px;">
+          <li class="flex-item">
+            <el-input
+              placeholder="请输入用户名"
+              v-model="dialogPostData.username"
+              clearable>
+            </el-input>
+          </li>
+          <li class="flex-item">
+            <el-input
+              placeholder="请输入手机号"
+              v-model="dialogPostData.phone"
+              clearable>
+            </el-input>
+          </li>
+          <li class="flex-item">
+            <el-input
+              placeholder="请输入推荐人"
+              v-model="dialogPostData.recommendname"
+              clearable>
+            </el-input>
+          </li>
+          <li>
+            <el-button type="primary" @click="dialogSearch">搜索</el-button>
+          </li>
+        </ul>
+        <ul class="dialogSearchList flex-h">
+          <li class="flex-item">
+            <el-date-picker
+              v-model="dialogPostData.begindate"
+              type="date"
+              placeholder="选择起始日期">
+            </el-date-picker>
+            <el-date-picker
+              v-model="dialogPostData.enddate"
+              type="date"
+              placeholder="选择截止日期">
+            </el-date-picker>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <el-table
+          ref="multipleTable"
+          :data="customers.list"
+          tooltip-effect="dark"
+          style="width: 100%"
+          @selection-change="handleSelectionChange">
+          <el-table-column
+            type="selection">
+          </el-table-column>
+          <el-table-column
+            prop="Name"
+            label="姓名">
+          </el-table-column>
+          <el-table-column
+            prop="CustomerName"
+            label="微信昵称">
+          </el-table-column>
+          <el-table-column
+            prop="Phone"
+            label="手机号">
+          </el-table-column>
+          <el-table-column
+            prop="CreatDate"
+            label="创建时间">
+            <template slot-scope="scope">
+              <span>{{toolClass.dateFormat(scope.row.CreateDate, 'yyyy-MM-dd')}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="RecommendName"
+            label="推荐人">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div>
+        <el-pagination
+          @current-change="handleCurrentChangeDialog"
+          :current-page.sync="dialogPostData.page"
+          :page-size="dialogPostData.pagesize"
+          layout="prev, pager, next, jumper"
+          :total="dialogTotal">
+        </el-pagination>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="toSendCard">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="手动复制"
+      :visible.sync="copyDialogVisible"
+      width="300px"
+      center>
+      <div>
+        <el-input
+          placeholder="请输入内容"
+          v-model="currentCopyUrl"
+          clearable>
+        </el-input>
+        <!-- <a :data-clipboard-text="currentCopyUrl" ref="copy" @click="toCopy">复制链接</a> -->
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="copyDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Clipboard from 'clipboard'
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapState: mapCardState, mapActions: mapCardActions } = createNamespacedHelpers('card')
+const { mapState: mapCustomerState, mapActions: mapCustomerActions } = createNamespacedHelpers('customer')
+
+export default {
+  name: '',
+  data () {
+    return {
+      currentCopyUrl: '',
+      copyDialogVisible: false,
+      selectCustomer: [],
+      dialogTotal: 0,
+      dialogPostData: {
+        username: '',
+        phone: '',
+        recommendname: '',
+        begindate: '',
+        enddate: '',
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
+      },
+      customerList: [],
+      centerDialogVisible: false,
+      total: 0,
+      postData: { // 表格搜索条件
+        caseid: '', // 案场id
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
+      },
+    }
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.getList()
+    })
+  },
+  computed: {
+    ...mapCardState({
+      cardList: x => x.cardList,
+    }),
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    ...mapCustomerState({
+      customers: x => x.customers,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  methods: {
+    ...mapCardActions([
+      'GetCardList',
+      'giveCard',
+    ]),
+    ...mapCustomerActions([
+      'GetCustomerList',
+      'SetCustomerListNull',
+    ]),
+    toSendHistory () { // 查看赠送记录
+      this.$router.push({ name: 'givingRecords' })
+    },
+    dialogSearch () { // 赠送客户搜索
+      this.GetCustomerList(this.dialogPostData)
+    },
+    handleCurrentChangeDialog (val) {
+      this.dialogPostData.page = val
+      this.GetCustomerList(this.dialogPostData)
+    },
+    handleSelectionChange (val) {
+      // console.log(val)
+      this.selectCustomer = val
+    },
+    toSendCard () { // 赠送卡
+      if (this.selectCustomer.length) {
+        this.selectCustomer = this.selectCustomer.map(x => x.CustomerId).join(',')
+        this.giveCard({
+          id: this.currentCardId,
+          users: this.selectCustomer,
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '赠送成功！'
+          })
+          this.centerDialogVisible = false
+          this.selectCustomer = []
+          if (this.customers.list.length) {
+            this.customers.list = []
+          }
+          this.getList()
+        })
+      } else {
+        this.$message({
+          type: 'error',
+          message: '请先选择需要赠送的客户!'
+        })
+      }
+    },
+    closeDialog () { // 关闭弹窗
+      this.centerDialogVisible = false
+      if (this.customers.list.length) {
+        this.customers.list = []
+      }
+    },
+    sendCard (index, row) { // 赠送卡弹窗
+      this.currentCardId = row.CardId
+      this.centerDialogVisible = true
+    },
+    search () { // 搜索
+      this.postData.page = 1
+      this.currentList = []
+      this.getList()
+    },
+    getList () { // 获取列表
+      this.GetCardList({
+        ...this.postData,
+        caseid: this.CaseId || this.defaultCaseId
+      }).then((res) => {
+        this.total = res.pagenum
+        // console.log(JSON.stringify(res))
+      })
+    },
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
+    },
+    handleEdit (index, row) { // 编辑
+      this.$router.push({ name: 'editCard', query: { id: row.CardId } })
+    },
+    // handleCopy (url) { // 复制弹窗
+    //   this.currentCopyUrl = url
+    //   this.copyDialogVisible = true
+    // },
+    toCopy (index, row) { // 复制
+      console.log(1)
+      var clipboard = new Clipboard(this.$refs['copy' + index])
+      clipboard.on('success', e => {
+        console.log('复制成功')
+        clipboard.destroy()
+      })
+      clipboard.on('error', e => {
+        console.log('该浏览器不支持自动复制')
+        clipboard.destroy()
+      })
+    },
+    addCard () {
+      this.$router.push({ name: 'editCard', query: {} })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+.dialogSearchList {
+  align-items: center;
+  > li {
+    font-size: 0;
+    margin-left: 10px;
+    &:first-child {
+      margin-left: 0;
+    }
+    > *:nth-child(2) {
+      margin-left: 10px;
+    }
+  }
+}
+.copyBtn{
+  line-height: 29px;
+  border-radius: 3px;
+  color: #fff;
+  background: #67c23a;
+  display: inline-block;
+  padding: 0 15px;
+  margin-left: 10px;
+}
+</style>

src/pages/system/cardAndCouponManager/bodyBuildingCardManager/page.scss

@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/cardAndCouponManager/cardManager/index.vue

@@ -84,10 +84,7 @@
               size="mini"
               type="danger"
               @click="sendCard(scope.$index, scope.row)">赠送客户</el-button>
-            <el-button
-              size="mini"
-              type="success"
-              @click="handleDelete(scope.$index, scope.row)">点击复制链接</el-button>
+            <a class="copyBtn" :data-clipboard-text="'www.baidu.com'" :ref="'copy' + scope.$index" @click="toCopy(scope.$index, scope.row)">点击复制链接</a>
           </template>
         </el-table-column>
       </el-table>
@@ -195,10 +192,28 @@
         <el-button type="primary" @click="toSendCard">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog
+      title="手动复制"
+      :visible.sync="copyDialogVisible"
+      width="300px"
+      center>
+      <div>
+        <el-input
+          placeholder="请输入内容"
+          v-model="currentCopyUrl"
+          clearable>
+        </el-input>
+        <!-- <a :data-clipboard-text="currentCopyUrl" ref="copy" @click="toCopy">复制链接</a> -->
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="copyDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import Clipboard from 'clipboard'
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapState: mapCardState, mapActions: mapCardActions } = createNamespacedHelpers('card')
 const { mapState: mapCustomerState, mapActions: mapCustomerActions } = createNamespacedHelpers('customer')
@@ -207,6 +222,8 @@ export default {
   name: '',
   data () {
     return {
+      currentCopyUrl: '',
+      copyDialogVisible: false,
       selectCustomer: [],
       dialogTotal: 0,
       dialogPostData: {
@@ -331,28 +348,20 @@ export default {
     handleEdit (index, row) { // 编辑
       this.$router.push({ name: 'editCard', query: { id: row.CardId } })
     },
-    handleDelete (index, row) { // 删除
-      let name = '确认删除渠道“' + row.ChannelName + '”?'
-      this.$confirm(name, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$ajax(this.$api.channelManager.deleteChannel.url, {
-          method: this.$api.channelManager.deleteChannel.method,
-          urlData: { channelId: row.ChannelId }
-        }).then(res => {
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          })
-          this.search()
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        })
+    // handleCopy (url) { // 复制弹窗
+    //   this.currentCopyUrl = url
+    //   this.copyDialogVisible = true
+    // },
+    toCopy (index, row) { // 复制
+      console.log(1)
+      var clipboard = new Clipboard(this.$refs['copy' + index])
+      clipboard.on('success', e => {
+        console.log('复制成功')
+        clipboard.destroy()
+      })
+      clipboard.on('error', e => {
+        console.log('该浏览器不支持自动复制')
+        clipboard.destroy()
       })
     },
     addCard () {
@@ -378,4 +387,13 @@ export default {
     }
   }
 }
+.copyBtn{
+  line-height: 29px;
+  border-radius: 3px;
+  color: #fff;
+  background: #67c23a;
+  display: inline-block;
+  padding: 0 15px;
+  margin-left: 10px;
+}
 </style>

src/pages/system/page.js

@@ -92,6 +92,8 @@ import cardList from './cardAndCouponManager/cardManager/index' // 卡列表
 import editCard from './cardAndCouponManager/cardManager/edit' // 编辑卡
 import couponList from './cardAndCouponManager/couponManager/index' // 券列表
 import editCoupon from './cardAndCouponManager/couponManager/edit' // 编辑券
+import bodyBuildingCardManager from './cardAndCouponManager/bodyBuildingCardManager/index' // 健身卡列表
+import editBodyBuildingCard from './cardAndCouponManager/bodyBuildingCardManager/edit' // 健身卡编辑
 import givingRecords from './cardAndCouponManager/givingRecords' // 赠送记录
 import vipList from './cardAndCouponManager/vipManager/index' // vip列表
 import editVip from './cardAndCouponManager/vipManager/edit' // 编辑vip
@@ -514,6 +516,16 @@ export default {
             component: editCoupon,
             children: []
           }]
+        }, { // 健身卡列表
+          path: 'bodyBuildingCardManager',
+          name: 'bodyBuildingCardManager',
+          component: bodyBuildingCardManager,
+          children: [{ // 编辑健身卡
+            path: 'editBodyBuildingCard',
+            name: 'editBodyBuildingCard',
+            component: editBodyBuildingCard,
+            children: []
+          }]
         }, { // 赠送记录
           path: 'givingRecords',
           name: 'givingRecords',

src/store/app.js

@@ -56,7 +56,8 @@ export default {
       default: '',
     },
     roles: [],
-    user: {}
+    user: {},
+    clientUrl: '',
   },
   mutations: {
     init (state, data) { // 这里的state对应着上面这个state
@@ -64,7 +65,7 @@ export default {
       state.roles = data.roles
       state.user = data.user
       state.menus = packChildren(data.menus)
-
+      state.clientUrl = data.clienturl
       let defaultCase = ''
       for (let i = 0; i < data.cases.length; i++) {
         if (data.cases[i].IsBelong === 1) {