ytj

package.json

@@ -27,6 +27,7 @@
     "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.17",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "weixin-js-sdk": "^1.3.3"
   }
 }

public/index.html

@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     charset="utf-8" />
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_5i50qqneuws.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_fqsik3e9to7.css">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title>
     <%= htmlWebpackPlugin.options.title %>

src/pages/sales/cardAndCouponNum/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="mainPage flex-v">
+  <div class="mainPage flex-v" v-if="data">
     <div class="top flex-h">
-      <span>￥<em>199</em>元</span>
+      <span>￥<em>{{parseInt(data.Price)}}</em>元</span>
       <div class="flex-item">
         <div>
-          <span>健身团课一次体验卡</span>
+          <span>{{data.CardName}}</span>
           <span>卡券描述卡券描述卡券描述卡券描述卡券描述</span>
-          <span>2018年02月02日 - 2018年02月03日</span>
+          <span>{{toolClass.dateFormat(data.StartDate)}} - {{toolClass.dateFormat(data.EndDate)}}</span>
         </div>
       </div>
     </div>
@@ -14,25 +14,25 @@
       <li class="flex-item">
         <div>
           <span>总数量</span>
-          <span>10</span>
+          <span>{{data.TotalCount}}</span>
         </div>
       </li>
       <li class="flex-item">
         <div>
           <span>剩余</span>
-          <span>5</span>
+          <span>{{data.TotalCount - data.SentCount}}</span>
         </div>
       </li>
       <li class="flex-item">
         <div>
           <span>用户领取</span>
-          <span>5</span>
+          <span>{{data.SentCount}}</span>
         </div>
       </li>
       <li class="flex-item">
         <div>
           <span>实际使用</span>
-          <span>2</span>
+          <span>{{data.UsedCount}}</span>
         </div>
       </li>
     </ul>
@@ -49,14 +49,14 @@
               </div>
               <span>用户领取</span>
             </li>
-            <li class="flex-h" v-for="(item,index) in 10" :key="index">
-              <span>xxx</span>
+            <li class="flex-h" v-for="(item,index) in data.CustomerCard" :key="index">
+              <span>{{item.SalesName}}</span>
               <div class="flex-item">
                 <div>
-                  <span>2</span>
+                  <span>{{salesData(item).receive}}</span>
                 </div>
               </div>
-              <span>5</span>
+              <span>{{salesData(item).used}}</span>
             </li>
           </ul>
         </div>
@@ -66,16 +66,56 @@
 </template>
 
 <script>
-
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapForbidState, mapActions: mapForbidActions } = createNamespacedHelpers('forbid')
 export default {
   name: '',
   data () {
     return {
+      data: {}
     }
   },
   created () {
+    if (this.$route.query.type === 'card') {
+      this.getCardNum({ id: this.$route.query.id }).then(() => {
+        this.getSales({ type: 'sales' }).then(() => {
+          this.data = this.cardAndCoupon
+          this.data.CustomerCard = this.data.CustomerCard || []
+        })
+      })
+    } else {
+      this.getCouponNum({ id: this.$route.query.id }).then(() => {
+        this.getSales({ type: 'sales' }).then(() => {
+          this.data = this.cardAndCoupon
+          this.data.CustomerCard = this.data.CustomerCard || []
+        })
+      })
+    }
+  },
+  computed: {
+    ...mapForbidState({
+      salesList: x => x.salesList,
+      cardAndCoupon: x => x.cardAndCoupon
+    })
   },
   methods: {
+    ...mapForbidActions(['getCardNum', 'getCouponNum', 'getSales']),
+    salesData (item) {
+      let receive
+      let used
+      if (this.$route.query.type === 'card') {
+        receive = this.salesList.filter(x => x.UserId === item.UserId).length > 0 ? this.salesList.filter(x => x.UserId === item.UserId) : 0
+        used = this.salesList.filter(x => x.UserId === item.UserId && item.VerifyStatus === '已核销').length > 0 ? this.salesList.filter(x => x.UserId === item.UserId && item.VerifyStatus === '已核销').length : 0
+      } else {
+        receive = this.salesList.filter(x => x.UserId === item.UserId).length > 0 ? this.salesList.filter(x => x.UserId === item.UserId) : 0
+        used = this.salesList.filter(x => x.UserId === item.UserId && item.VerifyStatus === '已核销').length > 0 ? this.salesList.filter(x => x.UserId === item.UserId && item.VerifyStatus === '已核销').length : 0
+      }
+
+      return {
+        'receive': receive,
+        'used': used
+      }
+    },
   }
 }
 </script>

src/pages/sales/salesGiveOutDetail/index.vue

@@ -3,16 +3,16 @@
     <div class="top">
       <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
     </div>
-    <div class="flex-item flex-v body">
-      <span>销售姓名：<em>柳依依</em></span>
+    <div class="flex-item flex-v body" v-if="data.allCard">
+      <span>销售姓名：<em>{{data.RealName}}</em></span>
       <ul class="flex-h">
         <li class="flex-item" :class="{'active': activeIndex === 0}" @click="cutNav(0)">
           <span>饮品</span>
-          <span>（已赠送12杯）</span>  
+          <span>（已赠送{{data.CustomerCard.length + data.CustomerCoupon.length}}杯）</span>  
         </li> 
         <li class="flex-item" :class="{'active': activeIndex === 1}" @click="cutNav(1)">
           <span>卡券</span>
-          <span>（已发出12张）</span>  
+          <span>（已发出{{data.OrdersDetail.length}}张）</span>  
         </li> 
       </ul>
       <div class="flex-item">
@@ -20,35 +20,35 @@
           <ul>
             <li :hidden="activeIndex === 1">
               <ul class="list">
-                <li class="flex-h" v-for="(item,index) in 40" :key="index">
+                <li class="flex-h" v-for="(item,index) in data.OrdersDetail" :key="index">
                   <div class="flex-item">
                     <div>
-                      <span>水吧特级调试咖啡水吧特级调试咖啡水吧特级调试咖啡水吧特级调试咖啡</span>
+                      <span>{{item.GoodsName}}</span>
                     </div>
                   </div>
                   <div class="flex-item">
                     <div>
-                      <span>￥50 * 1</span>
+                      <span>￥{{item.Price}} * 1</span>
                     </div>
                   </div>
-                  <span>2018/03/03 15:02:02</span>
+                  <span>{{toolClass.dateFormat(item.ReceiveDate)}}</span>
                 </li>
               </ul>
             </li>
             <li :hidden="activeIndex === 0">
               <ul class="list">
-                <router-link tag="li" class="flex-h" v-for="(item,index) in 40" :key="index" :to="{name: 'cardAndCouponNum', query: {}}">
+                <router-link tag="li" class="flex-h" v-for="(item,index) in data.allCard" :key="index" :to="{name: 'cardAndCouponNum', query: { id: item.CardId || item.CaseId, type:item.CardId ? 'card' : 'coupon' }}">
                   <div class="flex-item">
                     <div>
-                      <span>健身团课体验卡</span>
+                      <span>{{item.CustomerCardName || item.CustomerCouponName}}</span>
                     </div>
                   </div>
                   <div class="flex-item">
                     <div>
-                      <span>￥50 * 1</span>
+                      <span>￥{{item.Price}} * 1</span>
                     </div>
                   </div>
-                  <span>2018/03/03 15:02:02</span>
+                  <span>{{toolClass.dateFormat(item.ReceiveDate)}}</span>
                 </router-link>
               </ul>
             </li>
@@ -75,14 +75,7 @@ export default {
         showSelect: false,
         userName: 'xxx'
       },
-      data: [
-        [
-          {}
-        ],
-        [
-
-        ]
-      ]
+      data: {}
     }
   },
   computed: {
@@ -94,13 +87,22 @@ export default {
     topCaseInfo,
   },
   created () {
-    this.getSalesCardList({ id: this.$route.query.id })
+    this.getSalesCardList({ id: this.$route.query.id }).then(() => {
+      this.data = this.salesCardList
+      this.data.CustomerCard = this.data.CustomerCard ? this.data.CustomerCard : []
+      this.data.CustomerCoupon = this.data.CustomerCoupon ? this.data.CustomerCoupon : []
+      this.data.OrdersDetail = this.data.OrdersDetail ? this.data.OrdersDetail : []
+      this.data.allCard = this.data.CustomerCard.concat(this.data.CustomerCoupon)
+    })
   },
   methods: {
     ...mapForbidActions(['getSalesCardList']),
     cutNav (index) {
       this.activeIndex = index
     },
+    dateFomart (date) {
+      return this.toolClass.dateFormat(date)
+    }
   }
 }
 </script>

src/pages/user/App.vue

@@ -12,7 +12,7 @@ export default {
   name: 'app',
   data () {
     return {
-      showPage: false
+      showPage: true
     }
   },
   components: {},

src/pages/user/receive/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="mainPage">
+    <div v-if='video' class="logo">
+      <img :src="logo" alt="">
+    </div>
+    <div class="banner"  v-if="!video">
+      <img src="" alt="" width="100%" height="100%">
+    </div>
+    <div class="content">
+      <div class="title">彻天彻地童玩探险乐园家庭套餐</div>
+      <div class="video" v-if='video'>
+        <video src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/c395af03fd02acc07edcea5b21e5a3231536905593.mp4" width="100%" height="100%"></video>
+      </div>
+      <div class="text">
+        <div>
+          <i class="icon-shuoming iconfont"></i>
+          <span>卡券使用说明</span>
+        </div>
+        <pre>1. 本券不兑现金，不找零； 2. 票券仅作为门票费用，不能抵扣其他消费； 3. 营业时间：周一、二闭馆，周三、四（9:30-17:00），周五、六、日（9:30-20:00） 4. 咨询电话：0571-89008367</pre>
+      </div>
+      <div class="text">
+        <div>
+          <i class="icon-kaquan iconfont"></i>
+          <span>卡券有效期</span>
+        </div>
+        <pre>有效期至2018年10月1号，请在有效期结束前使用， 过期作废；</pre>
+      </div>
+      <div class="text" v-if="video">
+        <div>
+          <i class="icon-dingwei iconfont"></i>
+          <span>服务网点</span>
+        </div>
+        <pre>银城G99门店 地址：金马路230号</pre>
+      </div>
+      <div class="submit">确认领取</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import wxsdk from '../../../util/share'
+import logo from '../../../common/icon/logoTop.png'
+export default {
+  data () {
+    return {
+      logo,
+      video: true
+    }
+  },
+  created () {
+    wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
+      title: '悦见山，金秋送好礼',
+      desc: '扫码分享，免费抽取赢森林音乐节门票，机会有限，速来参加',
+      link: `${window.location.origin}${window.location.pathname}`,
+      thu_image: `${window.location.origin}${window.location.pathname}${logo}`
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/user/share/page.scss → src/pages/user/receive/page.scss

@@ -1,4 +1,9 @@
 .mainPage{
+  .logo{
+    img{
+      width: 1.05rem;
+    }
+  }
   .banner{
     width: 100%;
     height: 1.8rem;
@@ -6,6 +11,13 @@
   .content{
     padding: .2rem;
     box-sizing: border-box;
+    .video{
+      width: 100%;
+      height: 1.8rem;
+      box-sizing: border-box;
+      padding: .15rem;
+      margin-bottom: .15rem;
+    }
     .title{
       font-size: .18rem;
       padding-bottom: .2rem;
@@ -22,6 +34,8 @@
       }
       pre{
         color: #323232;
+        white-space: pre-wrap;
+        word-wrap: break-word;
       }
     }
     .submit{

src/pages/user/receiveResults/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="mainPage">
+    <div class="contenr">
+      <i class="iconfont icon-ziyuan" v-if="status === 'success'"></i>
+      <i class="iconfont icon-shibai fail" v-else></i>
+      <span>领取成功！</span>
+      <span>快去个人中心查看我的体验券</span>
+      <div class="back" v-if="status === 'success'">查看我的体验券</div>
+      <div v-else></div>
+      <img :src="logo">
+    </div>
+  </div>
+</template>
+
+<script>
+import logo from '../../../common/icon/logoTop.png'
+export default {
+  data () {
+    return {
+      logo,
+      status: 'fail'
+    }
+  },
+  created () {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/user/receiveResults/page.scss

@@ -0,0 +1,36 @@
+.contenr{
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-top: 1.35rem;
+  i{
+    font-size: .6rem;
+    color: rgb(253, 89, 58);
+    &.fail{
+      color: #323B45;
+    }
+  }
+  span{
+    color: #323B45;
+    font-size: .16rem;
+    margin-top: .1rem;
+  }
+  div{
+    width: 3rem;
+    height: .5rem;
+    margin-top: .67rem;
+  }
+  .back{
+    border-radius: .25rem;
+    border:1px solid rgba(114,114,114,1);
+    line-height: .5rem;
+    text-align: center;
+    color: #323B45;
+    font-size: .16rem;
+  }
+  img{
+    width: 1rem;
+    margin-top: 1rem;
+  }
+}

src/pages/user/router.js

@@ -20,7 +20,8 @@ import coupons from './coupons/index' // 优惠券
 import lessonDetail from './lessonDetail/index' // 课程详情
 import cardDetail from './cardDetail/index' // 体验卡详情
 import couponsDetail from './couponsDetail/index' // 体验券详情
-import share from './share/index' // 卡券分享页面
+import receive from './receive/index' // 领取页面
+import receiveResults from './receiveResults/index' // 领取结果页面
 
 Vue.use(Router)
 
@@ -120,10 +121,15 @@ const router = new Router({
     name: 'couponsDetail',
     component: couponsDetail,
     children: []
-  }, { // 卡券分享
-    path: '/share',
-    name: 'share',
-    component: share,
+  }, { // 卡券领取
+    path: '/receive',
+    name: 'receive',
+    component: receive,
+    children: []
+  }, { // 卡券领取结果
+    path: '/receiveResults',
+    name: 'receiveResults',
+    component: receiveResults,
     children: []
   }],
   linkActiveClass: 'active',

src/pages/user/share/index.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="mainPage">
-    <div class="banner">
-      <img src="" alt="" width="100%" height="100%">
-    </div>
-    <div class="content">
-      <div class="title">彻天彻地童玩探险乐园家庭套餐</div>
-      <div class="text">
-        <div>
-          <i class="icon-shuoming iconfont"></i>
-          <span>卡券使用说明</span>
-        </div>
-        <pre>工作工作工作工作工作工作工作工作工作给</pre>
-      </div>
-      <div class="text">
-        <div>
-          <i class="icon-shuoming iconfont"></i>
-          <span>卡券使用说明</span>
-        </div>
-        <pre>工作工作工作工作工作工作工作工作工作给</pre>
-      </div>
-      <div class="submit">确认领取</div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'page.scss';
-</style>

src/store/forbid/index.js

@@ -7,7 +7,8 @@ export default {
   state: {
     salesList: [],
     forbidList: [],
-    salesCardList: []
+    salesCardList: [],
+    cardAndCoupon: {}
   },
   mutations: {
     setSalesList (state, data) {
@@ -18,6 +19,9 @@ export default {
     },
     setSalesCardList (state, data) {
       state.salesCardList = data || []
+    },
+    setCardAndCoupon (state, data) {
+      state.cardAndCoupon = data || {}
     }
   },
   actions: {
@@ -90,6 +94,36 @@ export default {
           reject(err)
         })
       })
+    },
+    getCardNum (context, data) {
+      return new Promise((resolve, reject) => {
+        Ajax(api.director.getCardNum.url, {
+          method: api.director.getCardNum.method,
+          urlData: {
+            ...data
+          }
+        }).then(res => {
+          context.commit('setCardAndCoupon', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getCouponNum (context, data) {
+      return new Promise((resolve, reject) => {
+        Ajax(api.director.getCouponNum.url, {
+          method: api.director.getCouponNum.method,
+          urlData: {
+            ...data
+          }
+        }).then(res => {
+          context.commit('setCardAndCoupon', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
     }
   }
 }

src/util/ajax.js

@@ -10,7 +10,6 @@ const token = function (headers) {
     localStorage.setItem('JWT', headers.authorization)
     JWT = headers.authorization
   }
-  console.log(JWT)
   return JWT ? JWT : localStorage.getItem('JWT')
 }
 

src/util/api.js

@@ -124,13 +124,21 @@ const $api = {
       method: 'post',
       url: `${baseUrl}${wechat}/user/forbid/:userid/:type`
     },
-    putForbid:{ // 关闭禁用状态
+    putForbid: { // 关闭禁用状态
       method: 'put',
       url: `${baseUrl}${wechat}/user/forbid/:userid/:type`
     },
-    getSalesCardList: {
+    getSalesCardList: { // 获取销售发卡详情
       method: 'get',
       url: `${baseUrl}${wechat}/user/detail/:id`
+    },
+    getCardNum: { // 获取卡数量
+      method: 'get',
+      url: `${baseUrl}${wechat}/card/detail/:id`
+    },
+    getCouponNum: { // 获取券数量
+      method: 'get',
+      url: `${baseUrl}${wechat}/coupon/detail/:id`
     }
   },
   login: { // 主管、销售端登陆
@@ -151,5 +159,11 @@ const $api = {
       url: `${baseUrl}${wechat}/goods/user`
     }
   },
+  share: {
+    share: {
+      method: 'get',
+      url: `${baseUrl}${guest}/wechat/jssdk/signature/:url`
+    }
+  }
 }
 export default $api

src/util/share.js

@@ -1,4 +1,4 @@
-import axios from 'axios'
+import Ajax from './ajax'
 import api from './api'
 
 function wxsdk (params, config) {
@@ -12,33 +12,64 @@ function wxsdk (params, config) {
   }
   // 初始化
   return new Promise(function (resolve) {
-    axios.post(api.common.shareWx.url + '?url=' + params.url)
-      .then(function (res) {
-        let result = JSON.parse(res.data)
-        wx.config({
-          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-          appId: result.appId, // 必填，公众号的唯一标识
-          timestamp: result.timestamp, // 必填，生成签名的时间戳
-          nonceStr: result.noncestr, // 必填，生成签名的随机串
-          signature: result.signature, // 必填，签名，见附录1
-          jsApiList: [
-            'onMenuShareTimeline',
-            'onMenuShareAppMessage',
-            'onMenuShareQQ',
-            'onMenuShareWeibo',
-            'onMenuShareQZone',
-            'openLocation'
-          ]
-        })
-        wx.ready(function () {
-          wx.onMenuShareTimeline(shareData)
-          wx.onMenuShareAppMessage(shareData)
-          // resolve()
-        })
+    Ajax(api.share.share.url, {
+      method: api.share.share.method,
+      urlData: {
+        ...params
+      }
+    }).then(result => {
+      wx.config({
+        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+        appId: result.appId, // 必填，公众号的唯一标识
+        timestamp: result.timestamp, // 必填，生成签名的时间戳
+        nonceStr: result.noncestr, // 必填，生成签名的随机串
+        signature: result.signature, // 必填，签名，见附录1
+        jsApiList: [
+          'onMenuShareTimeline',
+          'onMenuShareAppMessage',
+          'onMenuShareQQ',
+          'onMenuShareWeibo',
+          'onMenuShareQZone',
+          'openLocation'
+        ]
       })
-      .catch(function (error) {
-        console.log(error)
+      wx.ready(function () {
+        wx.onMenuShareTimeline(shareData)
+        wx.onMenuShareAppMessage(shareData)
+        resolve()
       })
+      // resolve(res)
+    }).catch((err) => {
+      reject(err)
+    })
+
+    // axios.post(api.share.share.url + '?url=' + params.url)
+    //   .then(function (res) {
+    //     let result = JSON.parse(res.data)
+    //     wx.config({
+    //       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+    //       appId: result.appId, // 必填，公众号的唯一标识
+    //       timestamp: result.timestamp, // 必填，生成签名的时间戳
+    //       nonceStr: result.noncestr, // 必填，生成签名的随机串
+    //       signature: result.signature, // 必填，签名，见附录1
+    //       jsApiList: [
+    //         'onMenuShareTimeline',
+    //         'onMenuShareAppMessage',
+    //         'onMenuShareQQ',
+    //         'onMenuShareWeibo',
+    //         'onMenuShareQZone',
+    //         'openLocation'
+    //       ]
+    //     })
+    //     wx.ready(function () {
+    //       wx.onMenuShareTimeline(shareData)
+    //       wx.onMenuShareAppMessage(shareData)
+    //       // resolve()
+    //     })
+    //   })
+    //   .catch(function (error) {
+    //     console.log(error)
+    //   })
   })
 }