xcx

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

@@ -1,13 +1,12 @@
 <template>
   <div class="subPage">
     <form class="mainForm">
-      <h1 style="font-size:22px;">{{isEdit === 0 ? '新建' : '编辑'}}{{type === 'course' ? '课程体验卡' : '健身卡'}}</h1>
       <ul>
         <li class="flex-h">
           <span>选择案场：</span>
           <div class="flex-item">
             <div style="width:50%">
-              <el-select v-model="cardInfo.CaseId" placeholder="请选择">
+              <el-select v-model="cardInfo.CaseId" placeholder="请选择" @change="caseChange">
                 <el-option
                   v-for="item in cases"
                   :key="item.CaseId"
@@ -79,16 +78,32 @@
             </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>
+          <span>目标课程：</span>
           <div class="flex-item">
             <div>
               <el-select v-model="cardInfo.Targets[0].TargetId" placeholder="请选择">
                 <el-option
-                  v-for="item in GoodsList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id">
+                  v-for="item in courseList"
+                  :key="item.CourseId"
+                  :label="item.CourseName"
+                  :value="item.CourseId"
+                  :disabled="item.Status !== 1">
                 </el-option>
               </el-select>
             </div>
@@ -99,7 +114,7 @@
           <div class="flex-item">
             <div>
               <div class="addLine flex-h" style="align-item:center;margin-bottom:20px;">
-                <el-date-picker
+                <!-- <el-date-picker
                   v-model="cardInfo.StartDate"
                   type="date"
                   placeholder="选择起始日期">
@@ -109,6 +124,14 @@
                   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>
@@ -117,7 +140,17 @@
         <li class="flex-h">
           <span>视频：</span>
           <div class="flex-item">
-            <div></div>
+            <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">
@@ -169,12 +202,18 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+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,
@@ -199,9 +238,6 @@ export default {
         Status: '',
         CaseId: '',
         OrgId: '',
-        CreateDate: '',
-        CreateUser: '',
-        IsOver: '',
         Share: {
           CardShareInfo: '',
           CardUseRule: '',
@@ -223,13 +259,42 @@ export default {
     }
   },
   mounted () {
-    this.$nextTick(function () { })
+    this.$nextTick(function () {
+      this.GetChannelListList({
+        caseid: this.defaultCaseId,
+        page: 1,
+        pagesize: 10000
+      })
+      this.GetCourseList({
+        caseid: this.defaultCaseId,
+        page: 1,
+        pagesize: 10000
+      }).then((res) => {
+        // console.log(JSON.stringify(res))
+        this.courseList = res.list
+      })
+    })
   },
   computed: {
+    ...mapChannelState({
+      channelList: x => x.channelList,
+    }),
     ...mapState({
       cases: x => x.app.cases.list,
-      defaultCaseId: x => x.app.cases.default
+      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
@@ -240,20 +305,65 @@ export default {
     }
   },
   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 () { // 保存
-      // 1
+      if (this.$route.query.id) {
+        // 1
+      } else {
+        this.cardInfo.OrgId = this.OrgId
+        console.log(JSON.stringify(this.cardInfo))
+        this.addCard({
+          info: this.cardInfo
+        }).then((res) => {
+        })
+      }
     },
     cancel () { // 取消
       this.$router.push({ name: 'couponList' })
     },
-    deleteGoodsItem () { // 删除指定商品item
-      // 1
-    },
     handleAvatarSuccess (res, file) {
-      this.postData.Img = res.result.url
+      this.cardInfo.Images[0].CardImageUrl = res.result.url
     },
   }
 }
@@ -266,4 +376,7 @@ export default {
     margin-right: 10px;
   }
 }
+.mainForm > ul > li > div > div > button {
+  margin-top: 0;
+}
 </style>

src/store/index.js

@@ -26,6 +26,7 @@ export const modules = {
   cmscase: () => require('./cms/case').default,
   caserecord: () => require('./case/record').default,
   vip: () => require('./card/vip').default,
+  card: () => require('./card/card').default,
   coupon: () => require('./coupon/coupon').default,
   channel: () => require('./channel/channel').default,
   customer: () => require('./customer/customer').default,