ytj

package.json

@@ -23,7 +23,8 @@
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "vant": "^1.4.8",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.5.17",
+    "weixin-js-sdk": "^1.4.0-test"
   },
   "eslintConfig": {
     "root": true,
@@ -51,4 +52,4 @@
     "last 2 versions",
     "not ie <= 8"
   ]
-}
+}

src/store/index.js

@@ -10,7 +10,7 @@ const store = new Vuex.Store({
   }
 })
 export const modules = {
-  login: () => require('./main').default,
+  main: () => require('./main').default,
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/main.js

@@ -4,26 +4,112 @@ import api from '../util/api'
 export default {
   namespaced: true,
   state: {
-    userInfo: {}
+    gameid: '1',
+    game: {},
+    userInfo: {
+      Address: "江苏省,南京市,玄武区",
+      CreateDate: "2018-12-08T19:06:15+08:00",
+      CustomerId: "1",
+      CustomerName: "kini",
+      HeadImg: "",
+      Name: "袁天骄",
+      Openid: "123",
+      Phone: "13776975175",
+      Sex: 0
+    },
+    recordInfo: {},
+    supports: []
   },
   mutations: {
-    updateMenu (state, data) {
-      state.menuData = data || []
+    updateGame (state, data) {
+      state.game = data || {}
+    },
+    updateUserInfo (state, data) {
+      state.userInfo = data || {}
+    },
+    updateRecordInfo (state, data) {
+      state.recordInfo = data.record || {}
+      state.supports = data.supports || []
     }
   },
   actions: {
-    login (context, data) {
-      context
+    getGame (context) {
       return new Promise((resolve, reject) => {
         ajax({
-          ...api.common.login,
-          data: {
-            ...data,
+          ...api.game,
+          urlData: {
+            gameid: context.state.gameid,
+            customerid: context.state.userInfo.CustomerId
           }
-        }).then(() => {
-          resolve()
+        }).then((res) => {
+          context.commit('updateGame', res)
+          resolve(res)
         }).catch(reject)
       })
-    }
+    },
+    customer (context, data) {
+      return new Promise((resolve, reject) => {
+        ajax({
+          ...api.customer,
+          urlData: {
+            code: data
+          }
+        }).then((res) => {
+          context.commit('updateUserInfo', res)
+          resolve(res)
+        }).catch(reject)
+      })
+    },
+    signUp (context, data) {
+      return new Promise((resolve, reject) => {
+        ajax({
+          ...api.signup,
+          urlData: {
+            customerid: context.state.userInfo.customerid
+          },
+          data: data
+        }).then((res) => {
+          resolve(res)
+        }).catch(reject)
+      })
+    },
+    setRecord (context) {
+      return new Promise((resolve, reject) => {
+        ajax({
+          ...api.setRecord,
+          urlData: {
+            customerid: context.state.userInfo.CustomerId,
+            gameid: context.state.gameid
+          }
+        }).then((res) => {
+          resolve(res)
+        }).catch(reject)
+      })
+    },
+    getRecord (context, data) {
+      return new Promise((resolve, reject) => {
+        ajax({
+          ...api.getRecord,
+          urlData: {
+            recordid: data
+          }
+        }).then((res) => {
+          context.commit('updateRecordInfo', res)
+          resolve(res)
+        }).catch(reject)
+      })
+    },
+    setSupport (context, data) {
+      return new Promise((resolve, reject) => {
+        ajax({
+          ...api.setSupport,
+          urlData: {
+            ...data
+          }
+        }).then((res) => {
+          resolve(res)
+        }).catch(reject)
+      })
+    },
   }
 }

src/util/api.js

@@ -1,15 +1,30 @@
-// const baseUrl = '/api-v2'
 const baseUrl = '/api'
-const wechat = '/wechat/:org'
-const guest = '/guest/:org'
-const common = '/common/:org'
+const common = ''
 
 const $api = {
-  file: {
-    image: { // 图片上传
-      method: 'post',
-      url: `${baseUrl}${common}/file`
-    }
+  game: { // 助力详情
+    method: 'get',
+    url: `${baseUrl}${common}/game/:gameid/:customerid`
+  },
+  customer: { // 用户信息
+    method: 'get',
+    url: `${baseUrl}${common}/customer/:code`
+  },
+  signup: { // 注册
+    method: 'post',
+    url: `${baseUrl}${common}/signup/:customerid`
+  },
+  setRecord: { // 报名
+    method: 'post',
+    url: `${baseUrl}${common}/record/:customerid/:gameid`
+  },
+  getRecord: { // 获取活动详情
+    method: 'get',
+    url: `${baseUrl}${common}/record/:recordid`
+  },
+  setSupport: { // 助力
+    method: 'post',
+    url: `${baseUrl}${common}/support/:customerid/:recordid`
   }
 }
 export default $api

src/views/supportDetail/supportDetail.vue

@@ -1,20 +1,20 @@
 <template>
-  <div class="pageContent">
+  <div class="pageContent" v-if="showPage">
     <div class="mainPage">
       <div class="top">
         <img :src="topImg">
         <div class="top-div" v-if="status<4">
-          <div class="countdown" :class="{'on':status ===1,'off':status===2}" v-html="countdown()"></div>
+          <div class="countdown" :class="{'on':status < 3,'off':status == 3}" v-html="countdown"></div>
           <div class="userInfo">
             <div class="avatars">
-              <img class="cover" src>
+              <img class="cover" :src="userInfo.HeadImg">
             </div>
             <div class="info">
-              <p>&nbsp;匿名</p>
+              <p>&nbsp;{{userInfo.Name}}</p>
               <p>
                 已有
-                <span class="marked">0</span> 位好友帮TA砍价了，共砍掉
-                <span class="marked">￥0</span> 元
+                <span class="marked">{{list.length}}</span> 位好友帮TA砍价了，共砍掉
+                <span class="marked">￥{{list.length*29.6}}</span> 元
               </p>
             </div>
           </div>
@@ -33,12 +33,12 @@
       <div class="active" v-if="status<4">
         <h2>悦见山全家福拍摄助力砍价活动</h2>
         <div class="price">
-          <span class="price">砍后价：￥260</span>
+          <span :class="{'off':status == 3}">砍后价：￥{{888-list.length*29.6}}</span>
           <span>最多砍至0元</span>
         </div>
         <div class="desc">
           <span>原价2888元, 悦见山亲情价￥888</span>
-          <span>仅剩0个名额</span>
+          <span>仅剩{{game.note.LeftNum}}个名额</span>
         </div>
       </div>
       <div class="list">
@@ -61,7 +61,8 @@
         </div>
       </div>
     </div>
-    <div class="dailog" v-if="showDailog" @click="showDailog = false">
+    <!-- <div class="dailog" v-if="showDailog" @click="showDailog = false"> -->
+    <div class="dailog" v-if="showDailog">
       <div class="dailog-box" @click.stop="1+1">
         <img :src="popBg">
         <div class="log1">
@@ -70,31 +71,31 @@
             29.6
             <span>元</span>
           </div>
-          <div>
+          <div @click="toLuckDraw()">
             您有一份福利待领取！去领取
             <i class="iconfont icon-you"></i>
           </div>
           <img class="present" :src="presentClose">
-          <img class="btn" :src="btn">
+          <img class="btn" :src="btn" @click="$router.push({name:'supportMain'})">
         </div>
       </div>
     </div>
-    <div class="other-end" v-if="status === 5">
+    <div class="other-end" v-if="status == 5">
       <div class="box">
         <p>您的好友已砍价至0元，</p>
         <p>获得免费拍照机会！</p>
-        <div>我也要报名</div>
+        <div @click="$router.push({name:'supportMain'})">我也要报名</div>
       </div>
     </div>
-    <div class="today-end" v-if="status === 6">
+    <div class="today-end" v-if="status == 6">
       <div class="box">
         <img :src="kulian">
         <p>今日的主力活动已结束，</p>
         <p>明天再来吧！</p>
       </div>
     </div>
-    <div class="bottom">
-      <div :class="{'on':status === 1,'off':status !== 1}">{{btnText}}</div>
+    <div class="bottom" v-if="status < 4">
+      <div :class="{'on':status < 3,'off':status == 3}" @click="support()">{{btnText}}</div>
     </div>
   </div>
 </template>
@@ -106,8 +107,10 @@ import popBg from '@/assets/pop-bg.png'
 import presentClose from '@/assets/presentClose.png'
 import btn from '@/assets/btn.png'
 import kulian from '@/assets/kulian.png'
+import wxsdk from '@/util/share'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('main')
+// const wx = require('weixin-js-sdk')
 export default {
   data () {
     return {
@@ -117,29 +120,110 @@ export default {
       presentClose,
       btn,
       kulian,
-      status: 4,
+      status: 1,
       btnText: '邀请好友助力',
       showDailog: false,
-      list: [1, 1, 1, 1, 1, 2]
+      showPage: false,
+      seconds: 0,
+      time: 0
     }
   },
   computed: {
     ...mapIndexState({
-      userInfo: item => item.userInfo
+      userInfo: item => item.userInfo,
+      game: item => item.game,
+      recordInfo: item => item.recordInfo,
+      list: item => item.supports
+    }),
+    countdown () {
+      if (this.status != 3 && this.time >= 0) {
+        let hour = 23 - new Date().getHours()
+        let minutes = 59 - new Date().getMinutes()
+        let seconds = 59 - new Date().getSeconds()
+        return `<span style='color:#fff;'>砍价倒计时</span>
+        <span style='padding: 0 0.03rem;background: #5e5e5e;color: #fff;border-radius:4px;'>${hour > 9 ? hour : '0' + hour}</span>
+        <span style='color:#fff;'>:</span>
+        <span style='padding: 0 0.03rem;background: #5e5e5e;color: #fff;border-radius:4px;'>${minutes > 9 ? minutes : '0' + minutes}</span>
+        <span style='color:#fff;'>:</span>
+        <span style='padding: 0 0.03rem;background: rgba(255, 66, 28, 1);color: #fff;border-radius:4px;'>${seconds > 9 ? seconds : '0' + seconds}</span>`
+      } else {
+        let hour = '00'
+        let minutes = '00'
+        let seconds = '00'
+        return `<span style='color:#fff;'>活动已结束</span>
+        <span style='padding: 0 0.03rem;background: #5e5e5e;color: #fff;border-radius:4px;'>${hour}</span>
+        <span style='color:#fff;'>:</span>
+        <span style='padding: 0 0.03rem;background: #5e5e5e;color: #fff;border-radius:4px;'>${minutes}</span>
+        <span style='color:#fff;'>:</span>
+        <span style='padding: 0 0.03rem;background: rgba(255, 66, 28, 1);color: #fff;border-radius:4px;'>${seconds}</span>`
+      }
+    }
+  },
+  created () {
+    this.getGame().then(() => {
+      if (!this.$route.query.recordid) {
+        this.getRecord(this.game.record.RecordId).then(() => {
+          this.checkStatus()
+          // this.share(this.game.record.RecordId)
+        })
+      } else {
+        this.getRecord(this.game.record.RecordId).then(() => {
+          // this.share(this.$route.query.recordid)
+          this.checkStatus()
+        })
+      }
     })
+    setInterval(() => {
+      this.time = new Date().getSeconds()
+    }, 1000)
   },
   methods: {
-    ...mapIndexActions(['setUserInfo']),
-    countdown () {
-      let hour = 20
-      let minutes = 40
-      let seconds = 30
-      return `<span style='color:#fff;'>砍价倒计时</span>
-      <span style='padding: 0 0.03rem;background: #5e5e5e;color: #fff;border-radius:4px;'>${hour}</span>
-      <span style='color:#fff;'>:</span>
-      <span style='padding: 0 0.03rem;background: #5e5e5e;color: #fff;border-radius:4px;'>${minutes}</span>
-      <span style='color:#fff;'>:</span>
-      <span style='padding: 0 0.03rem;background: rgba(255, 66, 28, 1);color: #fff;border-radius:4px;'>${seconds}</span>`
+    ...mapIndexActions(['getGame', 'getRecord', 'setSupport']),
+    checkStatus () {
+      if (this.$route.query.other === 'other') {
+        this.status = 2
+        this.btnText = '立即助力TA'
+        if (this.list.length >= this.game.game.UserNum) {
+          this.status = 5
+        }
+      } else {
+        if (this.list.length >= this.game.game.UserNum) {
+          this.status = 4
+        }
+      }
+      let end = new Date(this.game.game.EndDate).valueOf()
+      let now = new Date().valueOf()
+      if (now > end) {
+        this.status = 3
+        this.btnText = '立即助力TA'
+      } else if (this.game.note.LeftNum <= 0 && !this.$route.query.other) {
+        this.status = 6
+      }
+      this.showPage = true
+    },
+    share (recordid) {
+      wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
+        title: '城的空间',
+        desc: '城的空间',
+        link: `${window.location.origin}${window.location.pathname}#/supportDetail?other=other&recordid=${recordid}`,
+        thu_image: `https://spaceofcheng.oss-cn-beijing.aliyuncs.com/indexlogo.jpg?x-oss-process=style/wxicon`
+      })
+    },
+    support () {
+      if (this.status === 1) {
+        this.$toast('微信右上角分享，让好友帮你助力哦！')
+      } else if (this.status === 2) {
+        this.setSupport({ customerid: this.userInfo.CustomerId, recordid: this.$route.query.recordid }).then(() => {
+          this.showDailog = true
+        }).catch(() => {
+          this.showDailog = true
+        })
+      } else if (this.status === 3) {
+        this.$toast('活动已结束')
+      }
+    },
+    toLuckDraw () {
+
     }
   }
 }
@@ -359,6 +443,9 @@ export default {
       margin-right: 0.2rem;
       font-size: 0.13rem;
     }
+    .off {
+      background: #b8b8b8;
+    }
   }
   .desc {
     display: flex;

src/views/supportMain/supportMain.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="pageContent">
+  <div class="pageContent" v-if="showPage">
     <div class="mainPage">
       <div class="top">
         <img :src="topImg">
         <div class="top-div">
-          <b>悦见山全家福拍摄助力砍价活动</b>
-          <p>时间: 2018年12月17日-12月25日</p>
+          <b>{{game.game.GameName}}</b>
+          <p>时间: {{`${this.toolClass.dateFormat(game.game.BeginDate,'yyyy年MM月dd日')} ~ ${this.toolClass.dateFormat(game.game.EndDate,'yyyy年MM月dd日')}`}}</p>
           <p>地点: 南京悦见山G99</p>
         </div>
       </div>
@@ -26,10 +26,13 @@
       </div>
     </div>
     <div class="bottom">
-      <div :class="{'on':btn.status === 1,'off':btn.status !== 1}">{{btn.text}}</div>
+      <div
+        :class="{'on':btn.status === 1 || btn.status === 3,'off':btn.status === 0 || btn.status === 2}"
+        @click="submit()"
+      >{{btn.text}}</div>
     </div>
-    <div class="login" v-if="login">
-      <div class="box">
+    <div class="login" v-if="login" @click="login=false">
+      <div class="box" @click.stop="1+1">
         <div class="item">
           <label for="name">姓名</label>
           <input type="text" v-model="name">
@@ -40,13 +43,20 @@
         </div>
         <div class="item">
           <label for="address">住址</label>
-          <input type="text" v-model="address">
+          <div @click="showArea = true">{{address}}</div>
         </div>
         <textarea name="addressDetail" rows="5" placeholder="详细地址" v-model="adderssDetail"></textarea>
-        <div class="submit">提交</div>
+        <div class="submit" @click="sign()">提交</div>
       </div>
     </div>
-    <van-area :area-list="area" @confirm="confirm" @cancel="cancel"/>
+    <van-area
+      class="area"
+      :value="'320100'"
+      :area-list="area"
+      @confirm="confirm"
+      @cancel="cancel"
+      v-if="showArea"
+    />
   </div>
 </template>
 
@@ -65,33 +75,103 @@ export default {
         status: 1
       },
       login: false,
+      showArea: false,
       name: '',
       phone: '',
       address: '',
-      adderssDetail: ''
+      adderssDetail: '',
+      showPage: false
     }
   },
   created () {
-    console.log(area)
+    this.getGame().then(() => {
+      if (this.game.record.CustomerId) {
+        this.btn.text = '我的助力'
+        this.btn.status = 3
+      } else {
+        let start = new Date(this.game.game.BeginDate).valueOf()
+        let end = new Date(this.game.game.EndDate).valueOf()
+        let now = new Date().valueOf()
+        if (now < start) {
+          this.btn.text = '活动未开始'
+          this.btn.status = 0
+        } else if (start <= now && now <= end) {
+          this.btn.text = '立即报名'
+          this.btn.status = 1
+        } else if (now > end) {
+          this.btn.text = '活动已结束'
+          this.btn.status = 2
+        }
+      }
+      this.showPage = true
+    })
   },
   computed: {
     ...mapIndexState({
-      userInfo: item => item.userInfo
+      userInfo: item => item.userInfo,
+      game: item => item.game,
     })
   },
   methods: {
-    ...mapIndexActions(['setUserInfo']),
-    confirm () {
-
+    ...mapIndexActions(['getGame', 'signUp', 'setRecord']),
+    confirm (val) {
+      this.address = `${val[0].name},${val[1].name},${val[2].name}`
+      this.showArea = false
     },
     cancel () {
-
+      this.showArea = false
+    },
+    submit () {
+      if (this.userInfo.Phone) {
+        this.record()
+      } else {
+        this.login = true
+      }
+    },
+    sign () {
+      if (!this.name) {
+        this.$toast('姓名为必填项')
+        return
+      } else if (!this.phone) {
+        this.$toast('手机号为必填项')
+        return
+      } else if (!this.address) {
+        this.$toast('地址为必填项')
+        return
+      } else if (!this.adderssDetail) {
+        this.$toast('详细地址为必填项')
+        return
+      }
+      let data = {
+        name: this.name,
+        phone: this.phone,
+        address: this.address + this.adderssDetail
+      }
+      this.signUp(data).then(() => {
+        this.record()
+      })
+    },
+    record () {
+      if (this.btn.status === 1) {
+        this.setRecord().then(() => {
+          this.$router.push({ name: 'supportDetail' })
+        })
+      } else if (this.btn.status === 3) {
+        this.$router.push({ name: 'supportDetail' })
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.area {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  width: 100%;
+}
 .top {
   img {
     width: 100%;
@@ -165,11 +245,14 @@ export default {
         width: 0.5rem;
         color: rgba(168, 182, 200, 1);
       }
-      input {
+      input,
+      div {
         height: 100%;
         flex: 1;
         border-radius: 4px;
         border: 1px solid rgba(168, 182, 200, 0.2);
+        line-height: 0.28rem;
+        padding-left: 0.05rem;
       }
     }
     textarea {

vue.config.js

@@ -6,8 +6,8 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target: 'http://wechatconfigdev.ycjcjy.com',
-        // target: 'http://192.168.0.62:8080', // wf
+        // target: 'http://wechatconfigdev.ycjcjy.com',
+        target: 'http://192.168.0.62:8080', // wf
         // target: 'http://192.168.0.102:8080', // hyq
         // target: 'http://192.168.0.11', // zys
         // target: 'http://dev.ycjcjy.com', // frp