Merge branch 'dev'

package-lock.json

@@ -2219,6 +2219,12 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg=",
+      "dev": true
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "http://registry.npm.taobao.org/base64-js/download/base64-js-1.3.0.tgz",
@@ -2458,7 +2464,7 @@
       "integrity": "sha1-KGlFnZqjviRf6P4sofRuLn9U1z8=",
       "dev": true,
       "requires": {
-        "pako": "1.0.6"
+        "pako": "1.0.7"
       }
     },
     "browserslist": {
@@ -2665,6 +2671,18 @@
       "integrity": "sha1-xkTDlYjdQtNJjpUiNMNy5aQKQSM=",
       "dev": true
     },
+    "canvas-exif-orientation": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/canvas-exif-orientation/-/canvas-exif-orientation-0.4.0.tgz",
+      "integrity": "sha1-tIfzcBmYqeh56xBAELKlgRU2i2s=",
+      "dev": true
+    },
+    "canvas2image": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/canvas2image/-/canvas2image-1.0.5.tgz",
+      "integrity": "sha1-Z2oJS0NjiIordmLli5zl07+8nRQ=",
+      "dev": true
+    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.1.2",
       "resolved": "http://registry.npm.taobao.org/case-sensitive-paths-webpack-plugin/download/case-sensitive-paths-webpack-plugin-2.1.2.tgz",
@@ -3424,6 +3442,15 @@
         }
       }
     },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "dev": true,
+      "requires": {
+        "base64-arraybuffer": "0.1.5"
+      }
+    },
     "css-loader": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/css-loader/download/css-loader-1.0.0.tgz",
@@ -4513,6 +4540,12 @@
         "strip-eof": "1.0.0"
       }
     },
+    "exif-js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz",
+      "integrity": "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ=",
+      "dev": true
+    },
     "expand-brackets": {
       "version": "0.1.5",
       "resolved": "http://registry.npm.taobao.org/expand-brackets/download/expand-brackets-0.1.5.tgz",
@@ -6310,6 +6343,15 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
+      "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
+      "dev": true,
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.3.0",
       "resolved": "http://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.3.0.tgz",
@@ -7267,6 +7309,12 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "jQuery": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/jQuery/-/jQuery-1.7.4.tgz",
+      "integrity": "sha1-8y3FyFpwRO6GS0RDue5F+UeLoTc=",
+      "dev": true
+    },
     "javascript-stringify": {
       "version": "1.6.0",
       "resolved": "http://registry.npm.taobao.org/javascript-stringify/download/javascript-stringify-1.6.0.tgz",
@@ -7327,6 +7375,12 @@
         "esprima": "4.0.1"
       }
     },
+    "jsbarcode": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.11.0.tgz",
+      "integrity": "sha512-/ozCd7wsa+VIHo9sUc03HneVEQrH7cVWfJolUT/WOW1m8mJ2e3iYZje6C9X3LFHdczlesqFHRpxLtbVsNtjyow==",
+      "dev": true
+    },
     "jsbn": {
       "version": "0.1.1",
       "resolved": "http://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz",
@@ -8880,9 +8934,9 @@
       "dev": true
     },
     "pako": {
-      "version": "1.0.6",
-      "resolved": "http://registry.npm.taobao.org/pako/download/pako-1.0.6.tgz",
-      "integrity": "sha1-AQEhG6pwxLykoPY/Igbpe3368lg=",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.7.tgz",
+      "integrity": "sha512-3HNK5tW4x8o5mO8RuHZp3Ydw9icZXx0RANAOMzlMzx7LVXhMJ4mo3MOBpzyd7r/+RUu8BmndP47LXT+vzjtWcQ==",
       "dev": true
     },
     "parallel-transform": {
@@ -12734,6 +12788,16 @@
         "swiper": "4.3.5"
       }
     },
+    "vue-croppa": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/vue-croppa/-/vue-croppa-1.3.8.tgz",
+      "integrity": "sha512-WwYgEKscTCD7BzhnbfRJfzWIU6RcMq2JRimB3aI5gGzpADmpKuqmDh9+oVfiZaEnpmRthgXZxcAvbxU6CeIU9w==",
+      "dev": true,
+      "requires": {
+        "canvas-exif-orientation": "0.4.0",
+        "object-assign": "4.1.1"
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "http://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
@@ -13389,8 +13453,7 @@
     "weixin-js-sdk": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/weixin-js-sdk/-/weixin-js-sdk-1.3.3.tgz",
-      "integrity": "sha512-1ofMi7Q1ioXV8/V8tGv3DrU7pugmyvhN86Pxbj1WaGeIEs/+yz0Jdv/5L+ocuDh/JAbKmtvMvBXh0OyuP6kQ8A==",
-      "dev": true
+      "integrity": "sha512-1ofMi7Q1ioXV8/V8tGv3DrU7pugmyvhN86Pxbj1WaGeIEs/+yz0Jdv/5L+ocuDh/JAbKmtvMvBXh0OyuP6kQ8A=="
     },
     "which": {
       "version": "1.3.1",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "element-ui": "^2.4.6",
+    "jsbarcode": "^3.11.0",
     "vue": "^2.5.17",
     "weixin-js-sdk": "^1.3.3"
   },
@@ -19,16 +20,23 @@
     "@vue/eslint-config-prettier": "^3.0.1",
     "axios": "^0.18.0",
     "better-scroll": "^1.12.6",
+    "canvas2image": "^1.0.5",
+    "exif-js": "^2.3.0",
+    "html2canvas": "^1.0.0-alpha.12",
+    "jQuery": "^1.7.4",
+    "jsbarcode": "^3.11.0",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
     "node-sass": "^4.9.3",
+    "pako": "^1.0.7",
     "qrcodejs2": "^0.0.2",
     "sass-loader": "^7.1.0",
     "vant": "^1.3.0",
     "vue-awesome-swiper": "^3.1.3",
+    "vue-croppa": "^1.3.8",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.17",
     "vuex": "^3.0.1",
-    "weixin-js-sdk": "^1.3.3"
+    "weixin-jsapi": "^1.1.0"
   }
 }

public/index.html

@@ -6,8 +6,13 @@
   <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_s109s6ry4gl.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_clu263vfyod.css">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <!-- <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
+  <script> new VConsole(); </script> -->
+  <!-- <script src="https://jsconsole.com/js/remote.js?34f890f2-39c4-46f7-9d9e-7a8cb29a6007"></script> -->
+  <!-- <script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
+  <script>eruda.init();</script> -->
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>
@@ -15,7 +20,8 @@
 
 <body>
   <noscript>
-    <strong>We're sorry but multiple-pages doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    <strong>We're sorry but multiple-pages doesn't work properly without JavaScript enabled. Please enable it to
+      continue.</strong>
   </noscript>
   <div id="app"></div>
   <!-- built files will be auto injected -->

src/common/css/reset.css

@@ -85,4 +85,60 @@ select option {
 
 .van-dialog__message .van-dialog__message--has-title{
 	text-align: center;
+}
+
+.dialogContent{
+	padding: 0 .15rem;
+}
+
+.dialogContent>.title{
+	width: 100%;
+	text-align: center;
+	display: block;
+	line-height: .26rem;
+	font-size: .16rem;
+	margin: .15rem auto 0;
+}
+
+.dialogContent>div{
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	margin: .15rem auto 0;
+}
+
+.dialogContent .btn{
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	margin-bottom: .2rem;
+	white-space: nowrap;
+	font-size: 0;
+	text-align: center;
+}
+
+.dialogContent>.btn>a{
+	width: 1rem;
+	display: inline-block;
+	line-height: .36rem;
+	border-radius: .05rem;
+	text-align: center;
+	border: 1px solid #787878;
+	margin-left: .2rem;
+}
+
+.dialogContent>.btn>a:first-child{
+	margin-left: 0;
+	background: #fc6243;
+	color: #fff;
+	border: 1px solid #fc6243;
+}
+
+.dialogContent>.btn>a:only-child{
+	width: 1.6rem;
+	display: block;
+	margin:  0 auto;
+	background: #fc6243;
+	color: #fff;
+	border: 1px solid #fc6243;
 }

src/components/courseItem/index.vue

@@ -5,7 +5,7 @@
         <img :src="data.img" class="centerLabel cover" alt="">
       </a>
     </div>
-    <div class="flex-item flex-v">
+    <div class="flex-item flex-v" :style="{marginRight: marginRight + 'rem'}">
       <div class="flex-item">
         <div class="content">
           <div class="title flex-h">
@@ -41,7 +41,7 @@
 
 export default {
   name: '',
-  props: ['data'],
+  props: ['data', 'marginRight'],
   data () {
     return {
       

src/components/libraryListItem/index.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="libraryListItem flex-h" @click="itemClick(data)">
+    <div class="img">
+      <a>
+        <img :src="(data.BookImg || defaultimg) + '?x-oss-process=style/compress-rotate'" class="centerLabel cover" alt>
+      </a>
+      <span v-if="type === 1" :class="data.BorrowStatus=='0'?'active':''">{{myBookStatus}}</span>
+    </div>
+    <div class="flex-item">
+      <div>
+        <span>{{data.BookName}}</span>
+        <h5 v-if="!type">{{data.BookDescription}}</h5>
+        <div v-if="!type" class="flex-h" style="margin-top: .06rem;">
+          <span class="flex-item">{{data.Author == '' ? '': data.Author + '著'}} </span>
+          <span class="status" :class="{'active' : status != 1 && status != 0 && status != 4}" @click="appointmentBook(data.BookId)">{{bookStatus}}</span>
+        </div>
+        <div v-if="!type" class="flex-h">
+          <span class="flex-item">{{data.Publisher}}</span>
+          <span>
+            剩余可借
+            <em>{{data.LeftNum}}</em>本
+          </span>
+        </div>
+        <div v-if="type === 1" class="flex-h" style="margin-top: .06rem;">
+          <span class="flex-item">应还时间：{{toolClass.dateFormat(data.EndDate, 'yyyy-MM-dd')}}</span>
+        </div>
+        <div v-if="type === 1" class="flex-h">
+          <span class="flex-item">{{data.CaseName}}</span>
+          <span v-if="data.BorrowStatus=='3' || data.BorrowStatus=='2'">已归还</span>
+          <span v-if="data.BorrowStatus == '1'">
+            已借阅
+            <em>{{borrowDay}}</em>天
+          </span>
+          <span v-if="data.BorrowStatus == '0'">
+            已逾期
+            <em>{{lateDay}}</em>天
+          </span>
+        </div>
+        <div v-if="type === 2" class="flex-h" style="margin-top: .06rem;">
+          <span class="flex-item">预约时间：{{toolClass.dateFormat(data.ReserveDate)}}</span>
+        </div>
+        <div v-if="type === 2" class="flex-h" style="margin-top: 0;">
+          <span
+            class="flex-item"
+          >预约资格将保留至：{{toolClass.dateFormat(data.ReserveEndDate, 'yyyy-MM-dd')}}</span>
+        </div>
+        <div v-if="type === 2" class="flex-h" style="margin-top: 0;">
+          <span class="flex-item">{{data.CaseName}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import toolClass from '../../util/util'
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  props: ['data', 'type', 'status'],
+  data () {
+    return {
+      defaultimg: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/book_default.png',
+    }
+  },
+  computed: {
+    ...mapState({
+      user: item => item.userCenter.userInfo.customer
+    }),
+    bookStatus () {
+      let status = '在线预约'
+      switch (this.status) {
+        case '4':
+          status = '已预约'
+          break
+        case '1':
+          status = '借阅中'
+          break
+        case '0':
+          status = '借阅中'
+          break
+      }
+      return status
+    },
+    myBookStatus () {
+      let status = ''
+      switch (this.data.BorrowStatus) {
+        case '4':
+          status = '已预约'
+          break
+        case '1':
+          status = '借阅中'
+          break
+        case '0':
+          status = '逾期未还'
+          break
+        case '3':
+          status = '逾期归还'
+          break
+        case '2':
+          status = '已归还'
+          break
+      }
+      return status
+    },
+    lateDay () {
+      const nowdata = toolClass.dateFormat(new Date(),'yyyy/MM/dd 00:00:00')
+      const EndDate = new Date(toolClass.dateFormat(new Date(this.data.EndDate),'yyyy/MM/dd 00:00:00'))
+      return toolClass.diffDate(EndDate, nowdata)
+    },
+    borrowDay () {
+      const nowdata = toolClass.dateFormat(new Date(),'yyyy/MM/dd 00:00:00')
+      const BorrowDate = new Date(toolClass.dateFormat(new Date(this.data.BorrowDate),'yyyy/MM/dd 00:00:00'))
+      return toolClass.diffDate(BorrowDate, nowdata)
+    }
+  },
+  components: {
+  },
+  created () {
+  },
+  methods: {
+    appointmentBook (id) {
+      if (this.status == '4' || this.status == '1' || this.status == '0') {
+        return
+      }
+      if (!this.user.Phone) {
+        this.$router.push({ name: 'bindMobile' })
+        return
+      }
+      this.$emit('appointmentBook', id)
+    },
+    itemClick (target) {
+      this.$emit('itemClick', target)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.libraryListItem {
+  width: 100%;
+  position: relative;
+  overflow: visible;
+  align-items: center;
+  .img {
+    width: 0.78rem;
+    position: relative;
+    overflow: visible;
+    a {
+      width: 100%;
+      display: block;
+      height: 0;
+      position: relative;
+      overflow: hidden;
+      padding-bottom: 143.5%;
+      background: #eee;
+      border-radius: 0.03rem;
+      z-index: 1;
+    }
+    > span {
+      width: .7rem;
+      text-align: center;
+      display: inline-block;
+      position: absolute;
+      left: -0.1rem;
+      bottom: 0.2rem;
+      z-index: 2;
+      font-size: 0.12rem;
+      color: #fff;
+      background: #333;
+      line-height: 0.25rem;
+      border-radius: 0.25rem;
+      box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .15);
+      &.active {
+        background: #fc5534;
+      }
+    }
+  }
+  > div.flex-item {
+    margin-left: 0.1rem;
+    > div {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      > span {
+        width: 100%;
+        display: block;
+        line-height: 0.22rem;
+        font-size: 0.16rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        max-height: 0.43rem;
+      }
+      > h5 {
+        font-size: 0.11rem;
+        color: #ccc;
+        line-height: 0.16rem;
+        font-weight: normal;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        max-height: 0.31rem;
+      }
+      > div {
+        margin-top: 0.03rem;
+        align-items: center;
+        span {
+          line-height: 0.25rem;
+          font-size: 0.12rem;
+          color: #999;
+          white-space: nowrap;
+          em {
+            color: #fc5534;
+            font-size: 0.13rem;
+          }
+          &.status {
+            width: .7rem;
+            text-align: center;
+            font-size: 0.12rem;
+            color: #999;
+            background: #fff;
+            border: 1px solid #ccc;
+            border-radius: 0.25rem;
+            box-sizing: border-box;
+          }
+          &.status.active {
+            color: #fc674a;
+            background: #fcf3f3;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/orderItem/page.scss

@@ -1,4 +1,5 @@
 .orderItem{
+  padding: .15rem 0;
   .img{
     width: .72rem;
     position: relative;

src/components/preview/preview.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="topBanner">
+      <swiper :options="swiperOption" ref="mySwiper">
+        <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
+          <div class="item">
+            <img :src="item.CalendarImg">
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div class="swiper-button-next">
+        <i class="iconfont icon-you"></i>
+      </div>
+      <div class="swiper-button-prev">
+        <i class="iconfont icon-left"></i>
+      </div>
+      <div class="swiper-pagination"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+export default {
+  props: ['banner'],
+  data () {
+    const self = this
+    return {
+      mainIndex: 1,
+      swiperOption: {
+        observer: true,
+        speed: 1500,
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          type: 'fraction',
+        },
+        on: {
+          transitionStart: function () {
+            self.mainIndex = this.activeIndex + 1
+          }
+        }
+      },
+    }
+  },
+  components: {
+    swiper,
+    swiperSlide
+  },
+  computed: {
+    MySwiper () {
+      return this.$refs.mySwiper.swiper
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.topBanner {
+  width: 100%;
+  height: 100%;
+  background: #e9e9e9;
+  position: relative;
+  overflow: hidden;
+  .swiper-container {
+    width: 100%;
+    height: 100%;
+  }
+  .swiper-button-next,
+  .swiper-button-prev {
+    background-image: url();
+    outline: 0px;
+    text-align: center;
+    line-height: 0.44rem;
+  }
+  .swiper-cover {
+    z-index: 2;
+    position: absolute;
+    bottom: 0.1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 0.12rem;
+    color: #fc6243;
+  }
+  .item {
+    position: relative;
+    height: 100%;
+    img {
+      width: 2.8rem;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>

src/components/radio/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="radio">
+    <a v-for="(item,index) in data" :key="index" :class="{'active': item.id === value}" @click="cut(item)">{{item.value}}</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: ['data', 'value', 'disabled'],
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  methods: {
+    cut (item) {
+      if (!this.disabled) {
+        this.$emit('input', item.id)
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.radio {
+  font-size: 0;
+  white-space: nowrap;
+  > * {
+    display: block;
+    font-size: 0.15rem;
+    position: relative;
+    padding-left: 0.25rem;
+    color: #a1a1a1;
+    margin-left: 0.5rem;
+    line-height: .3rem;
+    &::after {
+      content: "";
+      width: 0.14rem;
+      height: 0.14rem;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      -webkit-transform: translateY(-50%);
+      border-radius: 100%;
+      border: 0.01rem solid #fc6243;
+      z-index: 1;
+    }
+    &.active::before {
+      content: "";
+      width: 0.08rem;
+      height: 0.08rem;
+      position: absolute;
+      left: 0.04rem;
+      top: 50%;
+      transform: translateY(-50%);
+      -webkit-transform: translateY(-50%);
+      border-radius: 100%;
+      background: #fc6243;
+      z-index: 2;
+    }
+  }
+}
+</style>

src/components/slideTabH/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="components flex-v">
+    <div class="tabNav flex-h" :style="{backgroundColor: backgroundColor || '#fff'}">
+      <a
+        class="flex-item"
+        v-for="(item, index) in data"
+        :key="index"
+        @click="cutNav(index)"
+        :style="{fontSize: fontSize + 'px', fontWeight: index === activeIndex ? 'bolder' : 'normal'}"
+      >{{item.value}}</a>
+      <div class="activeLine" id="activeLine"></div>
+    </div>
+    <div class="flex-item">
+      <div>
+        <swiper :options="swiperOption" ref="mySwiper">
+          <swiper-slide class="swiper-slide" v-for="(item, index) in data" :key="index">
+            <slot :name="'slideTabH-' + item.id"></slot>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+export default {
+  name: 'slideTabH',
+  props: ['data', 'fontSize', 'activeColor', 'normalColor', 'backgroundColor', 'initIndex'],
+  data () {
+    var _self = this
+    return {
+      leftArr: [],
+      widthArr: [],
+      activeWidth: 0,
+      activeIndex: 0,
+      stepNum: 120,
+      swiperOption: {
+        watchSlidesProgress: true,
+        initialSlide: _self.activeIndex,
+        on: {
+          init () {
+            document.getElementById('activeLine').style.width = _self.widthArr[_self.activeIndex * _self.stepNum] + 'px'
+            document.getElementById('activeLine').style.left = _self.leftArr[_self.activeIndex * _self.stepNum] + 'px'
+          },
+          setTranslate (translate) { // 滑动偏移量监听
+            var num = (-translate / document.body.clientWidth * _self.stepNum).toFixed(0)
+            if (num >= 0 && num <= (_self.data.length - 1) * _self.stepNum) {
+              document.getElementById('activeLine').style.width = _self.widthArr[num] + 'px'
+              document.getElementById('activeLine').style.left = _self.leftArr[num] + 'px'
+            }
+          },
+          touchStart () {
+            document.getElementById('activeLine').style.transition = ''
+            document.getElementById('activeLine').style.WebkitTransition = ''
+          },
+          touchEnd () {
+            document.getElementById('activeLine').style.transition = '300ms'
+            document.getElementById('activeLine').style.WebkitTransition = '300ms'
+            if (this.realIndex !== _self.activeIndex) {
+              document.getElementById('activeLine').style.width = (_self.widthArr[this.realIndex * _self.stepNum]) + 'px'
+              document.getElementById('activeLine').style.left = (_self.leftArr[this.realIndex * _self.stepNum]) + 'px'
+            }
+          },
+          setTransition (speed) {
+            if (this.realIndex !== _self.activeIndex) {
+              document.getElementById('activeLine').style.width = (_self.widthArr[this.realIndex * _self.stepNum]) + 'px'
+              document.getElementById('activeLine').style.left = (_self.leftArr[this.realIndex * _self.stepNum]) + 'px'
+            }
+          },
+          transitionEnd () {
+            _self.activeIndex = this.activeIndex
+            _self.$emit('slideChange', this.activeIndex)
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    MySwiper () {
+      return this.$refs.mySwiper.swiper
+    }
+  },
+  components: {
+    swiper,
+    swiperSlide
+  },
+  created () {
+    this.activeIndex = this.initIndex || 0
+    var aLeft = (document.body.clientWidth / this.data.length).toFixed(0)
+    this.data.map((item, index) => {
+      this.widthArr.push((item.value.length / 2).toFixed(2) * (this.fontSize || 15))
+      this.leftArr.push((aLeft * index - 0) + ((aLeft / 2).toFixed(0) - 0) - this.widthArr[index] / 2)
+    })
+    this.activeWidth = this.widthArr[this.activeIndex]
+    this.widthArr = this.calcArr(this.widthArr, this.stepNum)
+    this.leftArr = this.calcArr(this.leftArr, this.stepNum)
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    cutNav (index) { // 切换nav
+      document.getElementById('activeLine').style.transition = '300ms'
+      document.getElementById('activeLine').style.WebkitTransition = '300ms'
+      this.MySwiper.slideTo(index, 0, false)
+    },
+    calcArr (arr, num) { // 构造间隔数组：arr-原数组；num-间隔数
+      arr = arr || []
+      num = num || 20
+      var aArr = []
+      arr.map((item, index) => {
+        if (index < arr.length - 1) {
+          aArr.push([])
+          for (var n = 0; n < num; n++) {
+            aArr[index].push(item + (arr[index + 1] - item) * (n + 1) / num)
+          }
+        }
+      })
+      return [arr[0]].concat(...aArr)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.components {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .tabNav {
+    background: #fff;
+    position: relative;
+    overflow: visible;
+    box-shadow: 0 0 0.1rem 0.02rem rgba(0, 0, 0, 0.05);
+    z-index: 100;
+    > a {
+      line-height: 0.45rem;
+      text-align: center;
+      color: #333;
+      position: relative;
+      z-index: 1001;
+      background: #fff;
+    }
+    .activeLine {
+      height: 0.02rem;
+      background: #fc6243;
+      position: absolute;
+      left: 0;
+      bottom: -.02rem;
+      z-index: 1000;
+      box-shadow: 0 0 .1rem .01rem rgba(252, 98, 67, 0.9);
+    }
+  }
+  > .flex-item {
+    position: relative;
+    > div {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      top: 0;
+      overflow: hidden;
+      > div {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .swiper-slide {
+    background: #f8f8f8;
+    position: relative;
+    z-index: 1;
+  }
+}
+</style>

src/components/vue-load-more/index.vue

@@ -0,0 +1,272 @@
+<template>
+  <div
+    class="yo-scroll"
+    :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
+    @touchstart="touchStart($event)"
+    @touchmove="touchMove($event)"
+    @touchend="touchEnd($event)"
+  >
+    <section class="inner" :style="{ transform: 'translate3d(0, 0px, 0)' }">
+      <header class="pull-refresh">
+        <!-- <slot name="pull-refresh">
+          <span class="down-tip">下拉更新</span>
+          <span class="up-tip">松开刷新数据</span>
+          <span class="refresh-tip">加载中……</span>
+        </slot>-->
+      </header>
+      <slot></slot>
+      <footer class="load-more" v-show="!dataList.noFlag">
+        <slot name="load-more">
+          <span v-show="downFlag === false">上拉加载更多</span>
+          <span v-show="downFlag === true">加载中……</span>
+        </slot>
+      </footer>
+      <!-- <div class="nullData" v-show="dataList.noFlag">暂无更多数据</div> -->
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    offset: { // 默认高度
+      type: Number,
+      default: 100
+    },
+    enableInfinite: { // 上拉加载
+      type: Boolean,
+      default: true
+    },
+    enableRefresh: { // 下拉刷新
+      type: Boolean,
+      default: false
+    },
+    dataList: { // 数据列表
+      default: undefined,
+      required: false
+    },
+    onRefresh: { // 加载方法
+      type: Function,
+      default: undefined,
+      required: false
+    },
+    onInfinite: { // 刷新方法
+      type: Function,
+      default: undefined,
+      require: false
+    }
+  },
+  data () {
+    return {
+      top: 0,
+      state: 0,
+      startX: 0,
+      startY: 0,
+      touching: false,
+      infiniteLoading: false,
+      downFlag: false // 用来显示是否加载中
+    }
+  },
+  created () { },
+  methods: {
+    touchStart (e) {
+      this.startY = e.targetTouches[0].pageY
+      this.startX = e.targetTouches[0].pageX
+      this.startScroll = this.$el.scrollTop || 0
+      this.touching = true // 留着有用，不能删除
+
+      // this.dataList.noFlag = false
+      // this.$el.querySelector('.load-more').style.display = 'block'
+    },
+    touchMove (e) {
+      if (this.dataList.noFlag || !this.touching) {
+        return
+      }
+      let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
+      if (diff > 0) e.preventDefault()
+      this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
+      if (this.state === 2) { // in refreshing
+        return
+      }
+      if (this.top >= this.offset) {
+        this.state = 1
+      } else {
+        this.state = 0
+      }
+
+      let more = this.$el.querySelector('.load-more')
+      if (!this.top && this.state === 0) {
+        more.style.display = 'block'
+      } else {
+        more.style.display = 'none'
+      }
+    },
+    touchEnd (e) {
+      // if (!this.enableRefresh) {
+      //   return
+      // }
+      this.touching = false
+      if (this.state === 2) { // in refreshing
+        this.state = 2
+        this.top = this.offset
+        return
+      }
+      if (this.top >= this.offset) { // do refresh
+        this.refresh()
+      } else { // cancel refresh
+        this.state = 0
+        this.top = 0
+      }
+
+      // 用于判断滑动是否在原地 ----begin
+      let endX = e.changedTouches[0].pageX
+      let endY = e.changedTouches[0].pageY
+      let dy = this.startY - endY
+      let dx = endX - this.startX
+      // 如果滑动距离太短
+      if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
+        // console.log("滑动距离太短")
+        this.downFlag = false
+        return
+      }
+      // --------end--------
+
+      // if (!this.enableInfinite || this.infiniteLoading) {
+      //   return
+      // }
+
+      if (this.dataList.noFlag) {
+        return
+      }
+
+      let outerHeight = this.$el.clientHeight
+      let innerHeight = this.$el.querySelector('.inner').clientHeight
+      let scrollTop = this.$el.scrollTop
+      let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
+      let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
+
+      // console.log(bottom + " __ " + this.offset)
+
+      if (bottom <= this.offset && this.state === 0) {
+        this.downFlag = true
+        this.infinite()
+      } else {
+        this.$el.querySelector('.load-more').style.display = 'none'
+        this.downFlag = false
+      }
+    },
+    refresh () {
+      this.state = 2
+      this.top = this.offset
+      setTimeout(() => {
+        this.onRefresh(this.refreshDone)
+      }, 1000)
+    },
+    refreshDone () {
+      this.state = 0
+      this.top = 0
+    },
+
+    infinite () {
+      this.infiniteLoading = true
+
+      setTimeout(() => {
+        this.onInfinite(this.infiniteDone)
+      }, 2000)
+    },
+
+    infiniteDone () {
+      this.infiniteLoading = false
+      this.downFlag = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.yo-scroll {
+  font-size: 0.24rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 100;
+  height: auto;
+  -webkit-overflow-scrolling: touch;
+  .inner {
+    position: absolute;
+    top: -0.5rem;
+    width: 100%;
+    height: auto;
+    transition-duration: 300ms;
+    .pull-refresh {
+      position: relative;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 0.5rem;
+      display: flex;
+      display: -webkit-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .load-more {
+      height: 0.5rem;
+      line-height: 0.5rem;
+      display: flex;
+      text-align: center;
+      align-items: center;
+      justify-content: center;
+      display: none;
+    }
+    .nullData {
+      // 暂无更多数据样式
+      font-size: 0.13rem;
+      color: #999999;
+      height: 0.5rem;
+      line-height: 0.5rem;
+      text-align: center;
+    }
+    .down-tip,
+    .refresh-tip,
+    .up-tip {
+      display: none;
+    }
+    .up-tip:before,
+    .refresh-tip:before {
+      content: '';
+      display: inline-block;
+      width: 1.6rem;
+      height: 0.7rem;
+      background-size: 70% !important;
+      position: absolute;
+      top: 0;
+      left: 20%;
+    }
+    // .up-tip:before {
+    //   background: url(./loading.gif) no-repeat center;
+    // }
+    // .refresh-tip:before {
+    //   background: url(./loading.gif) no-repeat center;
+    // }
+  }
+}
+
+.yo-scroll.touch .inner {
+  transition-duration: 0;
+}
+
+.yo-scroll.down .down-tip {
+  display: block;
+}
+
+.yo-scroll.up .up-tip {
+  display: block;
+}
+
+.yo-scroll.refresh .refresh-tip {
+  display: block;
+}
+</style>

src/pages/bodyCheck/app.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import Vant from 'vant'
-import 'vant/lib/vant-css/index.css'
+import 'vant/lib/index.css'
 import router from './router'
 import store from '../../store/index'
 import Vuex from 'vuex'

src/pages/sales/app.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import Vant from 'vant'
-import 'vant/lib/vant-css/index.css'
+import 'vant/lib/index.css'
 import router from './router'
 import store from '../../store/index'
 import Vuex from 'vuex'

src/pages/user/App.vue

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

src/pages/user/activeList/activeList.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="content mainPage">
+    <div class="list" @click="toCustomizationList">
+      <img :src="dz">
+      <span>定制记录</span>
+      <i class="iconfont icon-you"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import dz from '@/common/icon/dz.jpg'
+export default {
+  data () {
+    return {
+      dz
+    }
+  },
+  methods: {
+    toCustomizationList () {
+      this.$router.push({ name: 'customizationList' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 0 0 0 0.1rem;
+  background: #fff;
+  height: 100%;
+  box-sizing: border-box;
+  .list {
+    width: 100%;
+    height: 0.8rem;
+    display: flex;
+    align-items: center;
+    padding: 0.05rem;
+    box-sizing: border-box;
+    border-bottom: 1px solid #f1f1f1;
+    img {
+      width: 0.88rem;
+      height: 0.54rem;
+      border-radius: 0.07rem;
+      object-fit: cover;
+    }
+    span {
+      flex: 1;
+      padding-left: 0.1rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 0.14rem;
+      color: #000;
+    }
+    i {
+      color: #ddd;
+      padding-right: 0.1rem;
+    }
+  }
+}
+</style>

src/pages/user/app.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import Vant from 'vant'
-import 'vant/lib/vant-css/index.css'
+import 'vant/lib/index.css'
 import router from './router'
 import store from '../../store/index'
 import Vuex from 'vuex'

src/pages/user/bindMobile/bindMobile.vue

@@ -20,10 +20,14 @@
             <span>{{salesName}}</span>
             <i class="iconfont icon-triangle-bottom"></i>
           </div>
-        </div> -->
-
+        </div>-->
         <div class="mobile">
           <i class="iconfont icon-zhanghu"></i>
+          <input placeholder="真实姓名" v-model="postData.name">
+        </div>
+
+        <div class="mobile">
+          <i class="iconfont icon-mima"></i>
           <input type="tel" placeholder="推荐码 (非必填)" v-model="postData.recommendCode">
         </div>
 
@@ -61,7 +65,7 @@
             @confirm="onConfirmS"
           />
         </div>
-      </transition> -->
+      </transition>-->
     </div>
   </div>
 </template>
@@ -83,6 +87,7 @@ export default {
       seconds: 61,
       postData: {
         phone: '',
+        name: '',
         // case: '',
         // sales: '',
         recommendCode: '',
@@ -93,7 +98,8 @@ export default {
   },
   computed: {
     ...mapState({
-      caseInfo: x => x.userCenter.caseInfo
+      caseInfo: x => x.userCenter.caseInfo,
+      org: x => x.app.orgId,
     })
   },
   created () {
@@ -103,10 +109,7 @@ export default {
     console.log(1123)
   },
   methods: {
-    ...actions(['getCaseInfo']),
-    ...actions(['getCaptcha']),
-    ...actions(['submitData']),
-    ...actions(['recommendCode']),
+    ...actions(['getCaseInfo', 'getCaptcha', 'submitData', 'recommendCode', 'getUserInfo']),
     // onConfirmC (value, index) {
     //   this.caseName = value.CaseName
     //   this.postData.case = value.CaseId
@@ -196,6 +199,11 @@ export default {
         this.canSubmit = true
         return
       }
+      if (!this.postData.name) {
+        this.$toast('请填真实姓名')
+        this.canSubmit = true
+        return
+      }
       if (this.postData.recommendCode) {
         this.recommendCode({ recommendCode: this.postData.recommendCode }).then((res) => {
           if (res) {
@@ -206,13 +214,13 @@ export default {
                   window.location.href = `${window.location.origin}/game/luckdraw/${from}`
                 }, 2000)
               } else {
-                setTimeout(() => {
-                  // this.$router.push({name: 'userCenter'})
-                  window.history.go(-1)
-                }, 2000)
+                this.getUserInfo({ org: this.org }).then(() => {
+                  setTimeout(() => {
+                    window.history.go(-1)
+                  }, 2000)
+                })
               }
             }).catch(() => {
-              console.log(111)
               this.canSubmit = true
             })
           } else {
@@ -229,10 +237,11 @@ export default {
               window.location.href = `${window.location.origin}/game/luckdraw/${from}`
             }, 2000)
           } else {
-            setTimeout(() => {
-              // this.$router.push({name: 'userCenter'})
-              window.history.go(-1)
-            }, 2000)
+            this.getUserInfo({ org: this.org }).then(() => {
+              setTimeout(() => {
+                window.history.go(-1)
+              }, 2000)
+            })
           }
         }).catch(() => {
           console.log(111)

src/pages/user/bindMobile/page.scss

@@ -10,7 +10,6 @@
     height: 100%;
     display: flex;
     justify-content: center;
-    align-items: center;
     // background: rgba(0,0,0,0.3);
     position: relative;
     .logo{
@@ -27,11 +26,12 @@
     }
     .box{
       width: 3.25rem;
-      height: 3.5rem;
+      height: 4.2rem;
       background:rgba(255,255,255,1);
       border-radius:8px;
       padding: .2rem;
       box-sizing: border-box;
+      margin-top: 130px;
       .title{
         font-size: .16rem;
         font-weight: bold;

src/pages/user/calendar/calendar.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="mainPage">
+    <div class="top">
+      <img :src="topImg" alt>
+    </div>
+    <div class="middle">
+      <p>云台天境 定制您的2019专属台历</p>
+      <span>时间: 2018年12月11日-2018年12月18日</span>
+      <span>地点: 江宁区云台山河路1号云台天境售楼处</span>
+    </div>
+    <div class="bottom">
+      <p class="title">活动详情</p>
+      <div>用户在线上传照片（最少3张）生成2019年台历，可通过填写邮箱，获得电子版台历（1个工作日内）。</div>
+      <div>前200名上传成功用户，可在关注【城的空间】公众号接到推送或接到短信通知后来云台天境售楼处领取精美实物台历一份。</div>
+      <div>活动电话：025-86426666</div>
+      <div>服务案场：银城旭辉云台天境</div>
+      <div>地址：江宁区云台山河路1号云台天境售楼处</div>
+      <div>*活动最终解释权归南京佳运城房地产开发有限公司所有</div>
+    </div>
+    <div class="btn">
+      <div v-if="state === 1" class="disable">活动未开始</div>
+      <div v-if="state === 2" @click="toCheckModel">立即参与</div>
+      <div v-if="state === 3" class="disable">已参与</div>
+      <div v-if="state === 4" class="disable">活动已结束</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import wxsdk from '../../../util/share'
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapMakingActions } = createNamespacedHelpers('making')
+const { mapActions: actions } = createNamespacedHelpers('userCenter')
+import topImg from '@/common/icon/topImgBlack.png'
+export default {
+  data () {
+    return {
+      topImg,
+      state: 1,
+      startTime: "2018/12/11 00:00:00",
+      endTime: "2018/12/18 23:59:59"
+    }
+  },
+  created () {
+    wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
+      title: '幸福升舱 云帆起航',
+      desc: '有一份2019年的台历待您查收！',
+      link: `${window.location.origin}${window.location.pathname}#/calendar`,
+      thu_image: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/DE4F9402-9449-48fc-8C0D-61C198E82E481543982444.png'
+    })
+    this.getUserInfo({ org: this.org }).then(() => {
+      this.getCalendarCustomer().then((res) => {
+        if (res) {
+          this.state = 3
+        } else {
+          let start = new Date(this.startTime).getTime()
+          let end = new Date(this.endTime).getTime()
+          let now = new Date().getTime()
+          if (start <= now && end >= now) {
+            this.state = 2
+          } else if (start > now) {
+            this.state = 1
+          } else {
+            this.state = 4
+          }
+        }
+      })
+    })
+  },
+  computed: {
+    ...mapState({
+      org: x => x.app.orgId,
+      userInfo: x => x.userCenter.userInfo
+    })
+  },
+  methods: {
+    ...actions(['getUserInfo']),
+    ...mapMakingActions(['getCalendarCustomer']),
+    toCheckModel () {
+      if (!this.userInfo.customer.Phone) {
+        this.$dialog.confirm({
+          title: '提示',
+          message: '您还不是注册会员，注册成功后即可参与此活动'
+        }).then(() => {
+          // on confirm
+          this.$router.push({ name: 'bindMobile' })
+        }).catch(() => {
+          // on cancel
+        });
+      } else {
+        this.$router.push({ name: 'checkModel' })
+      }
+    }
+  }
+}
+</script>
+ 
+<style lang="scss" scoped>
+.top {
+  width: 100%;
+  img {
+    width: 100%;
+  }
+}
+.middle {
+  padding: 0.14rem 0.25rem;
+  border-bottom: 0.1rem solid rgba(235, 241, 242, 1);
+  p {
+    font-size: 0.16rem;
+    padding-bottom: 0.05rem;
+    font-weight: bold;
+  }
+  span {
+    padding-bottom: 0.05rem;
+    display: block;
+  }
+}
+.bottom {
+  padding: 0.14rem 0.25rem 0.6rem;
+  p {
+    font-size: 0.16rem;
+    padding-bottom: 0.05rem;
+    font-weight: bold;
+  }
+  div {
+    padding-bottom: 0.08rem;
+  }
+}
+.btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 0.1rem 0.25rem;
+  box-sizing: border-box;
+  background: #fff;
+  div {
+    width: 100%;
+    height: 0.4rem;
+    border-radius: 0.2rem;
+    background-color: rgba(252, 98, 67, 1);
+    color: #fff;
+    text-align: center;
+    line-height: 0.4rem;
+  }
+  .disable {
+    background: #ccc;
+  }
+}
+</style>
+ 

src/pages/user/calendar/checkModel.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="content">
+    <div @click="checkModel(1)">
+      <img :src="coverBlack">
+      <p>主题一 (黑色)</p>
+      <div>
+        <img v-if="check === 1" :src="checked" alt>
+        <img v-if="check === 2" :src="unchecked" alt>
+      </div>
+    </div>
+    <div @click="checkModel(2)">
+      <img :src="coverRed">
+      <p>主题二 (红色)</p>
+      <div>
+        <img v-if="check === 2" :src="checked" alt>
+        <img v-if="check === 1" :src="unchecked" alt>
+      </div>
+    </div>
+    <span class="btn" @click="submit">确定</span>
+  </div>
+</template>
+
+<script>
+import coverBlack from '@/common/icon/coverBlack.jpg'
+import coverRed from '@/common/icon/coverRed.jpg'
+import checked from '@/common/icon/checked.png'
+import unchecked from '@/common/icon/unchecked.png'
+export default {
+  data () {
+    return {
+      coverBlack,
+      coverRed,
+      unchecked,
+      checked,
+      check: 1
+    }
+  },
+  methods: {
+    checkModel (type) {
+      this.check = type
+    },
+    submit () {
+      this.$router.push({ name: 'making', query: { type: this.check } })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  > div {
+    flex: 1;
+    padding: 0.12rem;
+    box-sizing: border-box;
+    position: relative;
+    > img {
+      width: 100%;
+    }
+    p{
+      font-size: .14rem;
+      font-weight: bold;
+      text-align: center;
+      margin-top: .05rem;
+    }
+    div {
+      position: absolute;
+      right: 0.2rem;
+      top: 0.2rem;
+      width: 0.3rem;
+      height: 0.3rem;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .btn {
+    display: block;
+    position: fixed;
+    width: 3rem;
+    height: 0.4rem;
+    bottom: 0.2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    line-height: 0.4rem;
+    font-size: 0.16rem;
+    color: #fff;
+    background-color: #fc6243;
+    border-radius: 0.2rem;
+  }
+}
+</style>

src/pages/user/calendar/making.vue

@@ -0,0 +1,697 @@
+<template>
+  <div style="background:#fff;" class="mainPage" id="main">
+    <div>
+      <div v-if="isLoading || windowLoad" class="loading">
+        <img :src="loading" alt>
+        <span>{{msg}}</span>
+      </div>
+      <div class="cutBox" v-for="(item,index) in banner" :key="index">
+        <div class="cutDom" v-if="index === mainIndex-1">
+          <img :src="item.bgImg" class="cover">
+          <div :style="item.styleCut" v-show="!item.CustomerImg && item.defaultBg" class="cla">
+            <img :src="item.defaultBg">
+          </div>
+          <div :style="item.styleCut" v-if="item.CustomerImg" class="cla">
+            <img :src="item.CustomerImg">
+          </div>
+          <img class="text-h" v-if="item.ImgName === '10月'" :src="textH">
+          <img class="text-l" v-if="item.ImgName === '4月' || item.ImgName === '7月'" :src="textL">
+        </div>
+      </div>
+      <div class="topBanner">
+        <swiper :options="swiperOption" ref="mySwiper">
+          <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
+            <div
+              class="item"
+              v-if="index === mainIndex-1 || index === mainIndex ||  index === mainIndex-2"
+            >
+              <div>
+                <img :src="item.bgImg" class="cover">
+                <img
+                  :style="item.style"
+                  v-if="!item.CustomerImg && item.defaultBg"
+                  :src="item.defaultBg"
+                >
+                <img :src="item.CustomerImg" :style="item.style" v-if="item.CustomerImg">
+                <img class="text-h" v-if="item.ImgName === '10月'" :src="textH">
+                <img
+                  class="text-l"
+                  v-if="item.ImgName === '4月' || item.ImgName === '7月'"
+                  :src="textL"
+                >
+                <div class="reload-img">
+                  <van-uploader :after-read="onRead" v-show="mainIndex !== 1">
+                    <img :src="reloadImg">
+                  </van-uploader>
+                </div>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+        <div class="swiper-button-next">
+          <i class="iconfont icon-you"></i>
+        </div>
+        <div class="swiper-button-prev">
+          <i class="iconfont icon-left"></i>
+        </div>
+        <div class="swiper-pagination"></div>
+      </div>
+      <div class="meassage" v-if="mainIndex !== 1">备注：为了美观效果请上传{{size}}尺寸照片，未按尺寸会默认裁剪</div>
+      <div class="meassage" v-else>左右滑动可上传自定义图片</div>
+      <div class="operation">
+        <div>
+          <van-uploader :after-read="onRead" v-show="mainIndex !== 1">
+            <img :src="uploadImg">
+            <p>自定义图片</p>
+          </van-uploader>
+        </div>
+        <div>
+          <img :src="reSet" v-show="mainIndex !== 1" @click="changeOld">
+          <p v-show="mainIndex !== 1">恢复默认</p>
+        </div>
+      </div>
+      <div class="email">
+        <span>邮箱</span>
+        <input
+          class="input"
+          type="text"
+          @blur="emailBlur"
+          placeholder="接收电子版"
+          v-model="email"
+          style="border-radius:5px;background:rgba(245, 246, 250, 1);"
+        >
+      </div>
+      <div class="btn">
+        <div @click="pre">预览</div>
+        <div @click="showPop=true">确定</div>
+      </div>
+      <div v-show="showPop" class="pop-box">
+        <div class="pop-content">
+          <div>确认定制此台历？</div>
+          <div>
+            <div @click="submit">确定</div>
+            <div @click="showPop=false">取消</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import html2canvas from 'html2canvas'
+import canvas2image from '@/util/canvas2image.js'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapMakingState, mapActions: mapMakingActions } = createNamespacedHelpers('making')
+import textH from '@/common/icon/text-h.png'
+import textL from '@/common/icon/text-l.png'
+import uploadImg from '@/common/icon/uploadImg.png'
+import reloadImg from '@/common/icon/reloadImg.png'
+import reSet from '@/common/icon/reSet.png'
+import loading from '@/common/icon/loading-red.gif'
+
+export default {
+  data () {
+    const self = this
+    return {
+      textH,
+      textL,
+      uploadImg,
+      reSet,
+      reloadImg,
+      loading,
+      banner: [],
+      mainIndex: 1,
+      isLoading: false,
+      showPop: false,
+      imglength: 0,
+      msg: '请稍候...',
+      swiperOption: {
+        observer: false,
+        speed: 1500,
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          type: 'fraction',
+        },
+        on: {
+          transitionStart: function () {
+            self.mainIndex = this.activeIndex + 1
+            self.$nextTick(() => {
+              self.calSize()
+            })
+          }
+        }
+      }
+    }
+  },
+  components: {
+    swiper,
+    swiperSlide
+  },
+  computed: {
+    MySwiper () {
+      return this.$refs.mySwiper.swiper
+    },
+    ...mapMakingState({
+      bannerBlack: item => item.bannerBlack,
+      bannerRed: item => item.bannerRed,
+      Email: item => item.email
+    }),
+    size () {
+      if (this.mainIndex === 2 || this.mainIndex === 5 || this.mainIndex === 8 || this.mainIndex === 11) {
+        return '横'
+      } else {
+        return '竖'
+      }
+    },
+    email: {
+      get () {
+        console.log(this.Email)
+        return this.Email
+      },
+      set (val) {
+        this.setEmail(val)
+      }
+    }
+  },
+  created () {
+    if (this.$route.query.type == 1) {
+      this.banner = this.bannerBlack
+    } else {
+      this.banner = this.bannerRed
+    }
+  },
+  methods: {
+    ...mapMakingActions(['setBanner', 'calendar', 'setEmail']),
+    upload (url) {
+      this.banner[this.mainIndex - 1].CustomerImg = url + '?x-oss-process=style/calendar-thumb'
+      this.setBanner({ type: this.$route.query.type, data: JSON.parse(JSON.stringify(this.banner)) }).then(() => {
+        this.calSize().then(() => {
+          let cutDoms = document.getElementsByClassName('cutDom')[0]
+          this.convert2canvas(cutDoms, this.mainIndex - 1).then(() => {
+            this.isLoading = false
+          }).catch(() => {
+            this.isLoading = false
+          })
+        })
+      })
+    },
+    emailBlur () {
+      var currentPosition, timer;
+      var speed = 1;//页面滚动距离
+      timer = setInterval(function () {
+        currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
+        currentPosition -= speed;
+        window.scrollTo(0, currentPosition);//页面向上滚动
+        currentPosition += speed; //speed变量
+        window.scrollTo(0, currentPosition);//页面向下滚动
+        clearInterval(timer);
+      }, 1);
+    },
+    onRead (file) {
+      let that = this
+      this.isLoading = true
+      let reg = new RegExp("[`/?%#&=:\s\+]")
+      if (reg.test(file.file.name)) {
+        this.$toast('图片名称中包含非法字符')
+        this.isLoading = false
+        return
+      }
+      let reader = new FileReader();
+      reader.readAsDataURL(file.file);
+      reader.onload = function (e) {
+        let data = e.target.result;
+        //加载图片获取图片真实宽度和高度
+        let image = new Image();
+        image.src = data;
+        image.onload = function () {
+          let width = image.width;
+          let height = image.height;
+          // if (!/.(jpg|jpeg)$/.test(image.src)) {
+          //   that.isLoading = false
+          //   that.$toast('只允许JPG/JPEG格式的图片')
+          //   return
+          // }
+          if (width / height > 2.5) {
+            that.isLoading = false
+            that.$toast('该图片长度过长，请重新选择')
+            return
+          }
+          // this.banner[this.mainIndex - 1].CustomerImgShow = file.content
+          // this.setBanner({ type: this.$route.query.type, data: JSON.parse(JSON.stringify(this.banner)) })
+          that.toolClass.upload(file).then((res) => {
+            that.upload(res.result.url)
+          }).catch(() => {
+            that.isLoading = false
+          })
+        };
+      };
+    },
+    changeOld () {
+      if (!this.banner[this.mainIndex - 1].CustomerImg) {
+        return
+      }
+      this.isLoading = true
+      this.banner[this.mainIndex - 1].CustomerImg = ''
+      // this.banner[this.mainIndex - 1].CustomerImgShow = ''
+      this.setBanner({ type: this.$route.query.type, data: JSON.parse(JSON.stringify(this.banner)) }).then(() => {
+        this.$nextTick(() => {
+          this.calSize().then(() => {
+            let cutDoms = document.getElementsByClassName('cutDom')[0]
+            this.convert2canvas(cutDoms, this.mainIndex - 1).then(() => {
+              this.isLoading = false
+            }).catch(() => {
+              this.isLoading = false
+            })
+          })
+        })
+      })
+    },
+    submit () {
+      this.showPop = false
+      if (!this.email) {
+        this.$toast('邮箱为必填项')
+        return
+      } else if (this.email.indexOf('@') <= -1) {
+        this.$toast('请输入正确的邮箱')
+        return
+      }
+      let data = JSON.parse(JSON.stringify(this.banner))
+      data.forEach((curr, index) => {
+        delete curr['bgImg']
+        delete curr['defaultBg']
+        delete curr['style']
+        delete curr['styleCut']
+        if (!curr.CustomerImg) {
+          curr.CustomerImg = curr.defaultNoUser
+        } else {
+          curr.CustomerImg = curr.CustomerImg.replace('?x-oss-process=style/calendar-thumb', '')
+        }
+        delete curr['defaultNoUser']
+        delete curr['CustomerImgShow']
+      });
+      let submitData = {
+        ModelName: this.$route.query.type == 1 ? '黑色' : '红色',
+        Email: this.email,
+        CaseId: '13',
+        Imgs: data
+      }
+      this.calendar({ Calendar: JSON.stringify(submitData) }).then(() => {
+        this.$toast('活动参与成功')
+        this.$router.replace({ name: 'userCenter' })
+      })
+    },
+    pre () {
+      this.$router.push({ name: 'preview', query: { type: this.$route.query.type } })
+    },
+    convert2canvas (dom, i) {
+      return new Promise((resolve, reject) => {
+        const that = this
+        var shareContent = dom;
+        var width = shareContent.offsetWidth; //获取dom 宽度
+        var height = shareContent.offsetHeight; //获取dom 高度
+        var canvas = document.createElement("canvas"); //创建一个canvas节点
+        var scale = 1; //定义任意放大倍数 支持小数
+        canvas.width = width * scale; //定义canvas 宽度 * 缩放
+        canvas.height = height * scale; //定义canvas高度 *缩放
+        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
+        var opts = {
+          scale: scale, // 添加的scale 参数
+          canvas: canvas, //自定义 canvas
+          // logging: true, //日志开关，便于查看html2canvas的内部执行流程
+          width: width, //dom 原始宽度
+          height: height,
+          useCORS: true // 【重要】开启跨域配置
+        };
+
+        html2canvas(shareContent, opts).then(function (canvas) {
+          var context = canvas.getContext('2d');
+          // 【重要】关闭抗锯齿
+          context.mozImageSmoothingEnabled = false;
+          context.webkitImageSmoothingEnabled = false;
+          context.msImageSmoothingEnabled = false;
+          context.imageSmoothingEnabled = false;
+          // 【重要】默认转化的格式为png,也可设置为其他格式
+          // var img = canvas2image.convertToJPEG(canvas, canvas.width, canvas.height);
+          // var blobs = that.urltoblob(img.src);
+          // var namestr = `${that.banner[i].ImgName}.jpg`;
+          // var file = {
+          //   content: img.src,
+          //   file: that.blobToFile(blobs, namestr)
+          // }
+          // that.toolClass.upload(file).then((res) => {
+          //   that.banner[i].CalendarImg = res.result.url
+          //   that.setBanner({ type: that.$route.query.type, data: JSON.parse(JSON.stringify(that.banner)) })
+          //   resolve()
+          // }).catch(() => {
+          //   reject()
+          // })
+          let file = {
+            namestr: `${that.banner[i].ImgName}.jpg`,
+            base64str: encodeURIComponent(canvas.toDataURL('image/jpeg', 0.8))
+          }
+          that.toolClass.uploadBase64(file).then((res) => {
+            that.banner[i].CalendarImg = res.result.url
+            that.setBanner({ type: that.$route.query.type, data: JSON.parse(JSON.stringify(that.banner)) })
+            resolve()
+          }).catch(() => {
+            reject()
+          })
+        }).catch((err) => {
+          console.log(err)
+          that.isLoading = false
+        })
+      })
+    },
+    urltoblob (dataURL) {
+      var BASE64_MARKER = ';base64,';
+      if (dataURL.indexOf(BASE64_MARKER) == -1) {
+        var parts = dataURL.split(',');
+        var contentType = parts[0].split(':')[1];
+        var raw = decodeURIComponent(parts[1]);
+        return new Blob([raw], { type: contentType });
+      }
+      var parts = dataURL.split(BASE64_MARKER);
+      var contentType = parts[0].split(':')[1];
+      var raw = window.atob(parts[1]);
+      var rawLength = raw.length;
+      var uInt8Array = new Uint8Array(rawLength);
+      for (var i = 0; i < rawLength; ++i) {
+        uInt8Array[i] = raw.charCodeAt(i);
+      }
+      return new Blob([uInt8Array], { type: contentType });
+    },
+    blobToFile (theBlob, fileName) {
+      theBlob.lastModifiedDate = new Date();
+      theBlob.name = fileName;
+      return theBlob;
+    },
+    calSize () {
+      return new Promise((resolve) => {
+        let rotate = this.size
+        let dom = document.getElementsByClassName('cla')
+        if (dom.length < 2) {
+          resolve()
+          return
+        }
+        dom = dom[1]
+        let parentW = dom.offsetWidth
+        let parentH = dom.offsetHeight
+        dom.children[0].onload = function () {
+          let imgW = dom.children[0].naturalWidth
+          let imgH = dom.children[0].naturalHeight
+          if (rotate === '横') {
+            if (imgW <= imgH) {
+              dom.children[0].style = 'width:100%;'
+              let Offset = -((dom.children[0].height - parentH) / 2)
+              dom.children[0].style = `width:100%;position:relative;top:${Offset}px;left:0`
+              resolve()
+            } else {
+              dom.children[0].style = 'height:100%;'
+              let Offset = -((dom.children[0].width - parentW) / 2)
+              dom.children[0].style = `height:100%;position:relative;left:${Offset}px;top:0`
+              resolve()
+            }
+          } else {
+            if (imgW >= imgH) {
+              dom.children[0].style = 'height:100%;'
+              let Offset = -((dom.children[0].width - parentW) / 2)
+              dom.children[0].style = `height:100%;position:relative;left:${Offset}px;top:0`
+              resolve()
+            } else {
+              dom.children[0].style = 'width:100%;'
+              let Offset = -((dom.children[0].height - parentH) / 2)
+              dom.children[0].style = `width:100%;position:relative;top:${Offset}px;left:0`
+              resolve()
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.swiper-pagination-current {
+  color: #fc6243;
+}
+</style>
+
+
+<style lang="scss" scoped>
+.input {
+  border-radius: 5px;
+  background: rgb(245, 246, 250);
+  width: 100%;
+  height: 0.4rem;
+  padding-left: 0.1rem;
+}
+.mainPage {
+  position: fixed;
+  overflow-y: scroll;
+}
+.cla {
+  overflow: hidden;
+  z-index: 10;
+}
+.loading {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.6);
+  img {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+  span {
+    font-size: 0.14rem;
+    color: #fff;
+  }
+}
+.meassage {
+  color: red;
+  padding: 0.1rem;
+  text-align: center;
+  font-size: 0.12rem;
+}
+.pop-box {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.6);
+  .pop-content {
+    width: 2.6rem;
+    height: 1.7rem;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 4px 0px rgba(194, 194, 194, 0.5);
+    border-radius: 4px;
+    > div {
+      padding-top: 0.5rem;
+      font-size: 0.16rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      div {
+        margin: 0 0.12rem;
+        padding: 0.08rem 0.3rem;
+        border-radius: 4px;
+        border: 1px solid;
+      }
+    }
+  }
+}
+.cutBox {
+  z-index: -1;
+  position: absolute;
+  top: -10rem;
+  left: -10rem;
+  > div {
+    position: relative;
+    width: 13cm;
+    height: 21cm;
+    .cover {
+      width: 100%;
+      height: 100%;
+    }
+    .text-h {
+      width: 9cm;
+      position: absolute;
+      top: 8.8cm;
+      left: 1cm;
+      z-index: 3;
+    }
+    .text-l {
+      width: 0.85cm;
+      position: absolute;
+      top: 2.8cm;
+      left: 1cm;
+      z-index: 3;
+    }
+  }
+}
+.topBanner {
+  width: 100%;
+  height: 3.3rem;
+  background: #e9e9e9;
+  position: relative;
+  overflow: hidden;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1.65rem;
+    box-sizing: border-box;
+    border-bottom: 1px dashed #d1d1d1;
+    transform-origin: bottom center;
+    transform: rotateZ(41deg) scale(1.414);
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1.65rem;
+    box-sizing: border-box;
+    border-bottom: 1px dashed #d1d1d1;
+    transform-origin: bottom center;
+    transform: rotateZ(-41deg) scale(1.414);
+  }
+  .swiper-container {
+    width: 100%;
+    height: 100%;
+  }
+  .swiper-button-next,
+  .swiper-button-prev {
+    background-image: url();
+    outline: 0px;
+    text-align: center;
+    line-height: 0.44rem;
+  }
+  .swiper-cover {
+    z-index: 2;
+    position: absolute;
+    bottom: 0.1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 0.12rem;
+    color: #fc6243;
+  }
+  .item {
+    position: relative;
+    height: 100%;
+    > div {
+      position: absolute;
+      width: 1.7rem;
+      height: 2.7rem;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .cover {
+        width: 100%;
+        height: 100%;
+      }
+      .text-h {
+        width: 1.2rem;
+        position: absolute;
+        top: 1.12rem;
+        left: 0.2rem;
+        z-index: 3;
+      }
+      .text-l {
+        width: 0.1rem;
+        position: absolute;
+        top: 0.4rem;
+        left: 0.16rem;
+        z-index: 3;
+      }
+      .reload-img {
+        width: 0.2rem;
+        height: 0.2rem;
+        position: absolute;
+        top: 0.02rem;
+        right: 0.02rem;
+        z-index: 3;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.operation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.15rem 0.2rem 0.3rem;
+  > div {
+    text-align: center;
+    height: 0.68rem;
+    margin: 0 0.4rem;
+    img {
+      width: 0.68rem;
+      height: 0.68rem;
+    }
+    p {
+      color: #8a8a8a;
+      padding-top: 0.05rem;
+    }
+  }
+}
+.email {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 0.25rem;
+  box-sizing: border-box;
+  span {
+    width: 0.5rem;
+  }
+}
+.btn {
+  margin-top: 0.1rem;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 0.2rem;
+  div {
+    flex: 1;
+    margin: 0.1rem;
+    border-radius: 20px;
+    height: 0.4rem;
+    text-align: center;
+    line-height: 0.4rem;
+    background-color: #fc6243;
+    color: #fff;
+  }
+  div:nth-of-type(1) {
+    background: #9db0ce;
+  }
+}
+</style>

src/pages/user/calendar/preview.vue

@@ -0,0 +1,37 @@
+<template>
+  <div style="height:100%">
+    <preview :banner="banner" style="height:100%;z-index:100;"></preview>
+  </div>
+</template>
+
+<script>
+import preview from '@/components/preview/preview.vue'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapMakingState, mapActions: mapMakingActions } = createNamespacedHelpers('making')
+export default {
+  data(){
+    return{
+      banner:[]
+    }
+  },
+  components: {
+    preview
+  },
+  computed: {
+    ...mapMakingState({
+      bannerBlack: item => item.bannerBlack,
+      bannerRed: item => item.bannerRed
+    })
+  },
+  created () {
+    if (this.$route.query.type == 1) {
+      this.banner = this.bannerBlack
+    } else {
+      this.banner = this.bannerRed
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/user/courseList/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="mainPage" @scroll="pageScroll" ref="parentBox">
+    <div class="flex-h">
+      <div class="flex-item">
+        <div ref="box">
+          <ul>
+            <router-link
+              tag="li"
+              v-for="(item,index) in list"
+              :key="index"
+              :to="{name: 'majorProjectsDetail', query: {id: item.id}}"
+              class="flex-h"
+            >
+              <div class="flex-item">
+                <div>
+                  <courseItem :data="item" marginRight=".2"></courseItem>
+                </div>
+              </div>
+            </router-link>
+          </ul>
+          <span class="footerWord" v-if="total === list.length">加载完毕</span>
+          <span class="footerWord" v-else>正在加载更多</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex'
+import courseItem from '../../../components/courseItem/index'
+const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
+
+export default {
+  name: '',
+  data () {
+    return {
+      list: [],
+      ajaxOff: true,
+      postData: {
+        pagesize: 10,
+        page: 1
+      },
+      total: 1
+    }
+  },
+  computed: {
+    ...mapState({
+      orgid: x => x.app.orgId,
+      fiveA: x => x.index.fiveA,
+      banner: x => x.index.banner,
+      message: x => x.index.message,
+      project: x => x.index.project,
+      cms: x => x.index.cms,
+    }),
+    ...mapIndexState({
+      courseList: x => x.courseList
+    })
+  },
+  components: {
+    courseItem
+  },
+  created () {
+    this.getData()
+  },
+  methods: {
+    ...mapIndexActions(['getCourseList']),
+    pageScroll () {
+      var docHeight = this.$refs.box.offsetHeight, parHeight = this.$refs.parentBox.offsetHeight, scrollTop = this.$refs.parentBox.scrollTop
+      if (scrollTop === docHeight - parHeight) {
+        if (this.ajaxOff && this.list.length < this.total) {
+          this.ajaxOff = false
+          this.postData.page += 1
+          this.getData()
+        }
+      }
+    },
+    getData () {
+      this.getCourseList(this.postData).then((res) => {
+        this.ajaxOff = true
+        this.total = res.pagenum;
+        (res.list || []).map((item) => {
+          this.list.push({
+            id: item.CourseId,
+            title: item.CourseName,
+            img: item.CourseImg,
+            remark: this.toolClass.dateFormat(item.BeginDate, 'yyyy.MM.dd') + '~' + this.toolClass.dateFormat(item.EndDate, 'MM.dd'),
+            address: item.CaseAddress,
+            tag: item.CourseTags,
+            courseType: '团体课',
+            defaultPrice: item.Price + '/节',
+            getWay: 'ticket',
+            startDate: new Date(item.BeginDate).getTime(),
+            endDate: new Date(item.EndDate).getTime(),
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/user/courseList/page.scss

@@ -0,0 +1,31 @@
+.mainPage{
+  background: #fff;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  >div{
+    >div{
+      margin-left: .2rem;
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        >ul{
+          >li{
+            padding: .2rem 0;
+            border-bottom: 1px solid #eee;
+          }
+        }
+      }
+    }
+    .footerWord{
+      width: 100%;
+      display: block;
+      text-align: center;
+      text-indent: -.1rem;
+      line-height: .4rem;
+      color: #666;
+    }
+  }
+}

src/pages/user/customization/customizationDetail.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="mainPage" v-if="showPage">
+    <div class="top">
+      <img :src="detail.ModelName === '黑色'?topImgBlack:topImgRed">
+      <div>
+        <div class="list">
+          <img :src="detail.ModelName === '黑色'?cover:cover2">
+          <div>
+            <div>定制您的2019专属台历</div>
+            <div>主办案场: {{detail.CaseName}}</div>
+            <div>参与时间: {{toolClass.dateFormat(detail.CreateDate)}}</div>
+          </div>
+          <span>{{detail.MakeStatus === 'making' ? '制作中' : '制作完成'}}</span>
+        </div>
+      </div>
+    </div>
+    <div class="main">
+      <div class="title">定制模版</div>
+      <img :src="detail.cover.CalendarImg">
+      <div class="text">云台天境日历模版</div>
+    </div>
+    <div class="bottom">
+      <div class="title">定制预览</div>
+      <div class="pic-list">
+        <img
+          v-for="(item,index) in detail.Imgs"
+          :src="item.CalendarImg"
+          :key="index"
+          v-if="showMore || index < 4"
+          @click="large(item.CalendarImg)"
+        >
+      </div>
+      <div v-if="!showMore" @click="more()" class="more">
+        查看更多
+        <i class="iconfont icon-xia"></i>
+      </div>
+      <div v-else @click="noMore()" class="more">
+        收起
+        <i class="iconfont icon-shang"></i>
+      </div>
+    </div>
+    <div class="foot">
+      <div @click="tel()">联系我们: 025-86426666</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import cover from '@/common/icon/heise.png'
+import cover2 from '@/common/icon/honhse.png'
+import topImgRed from '@/common/icon/topImgRed.jpg'
+import topImgBlack from '@/common/icon/topImgBlack.png'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapCustomizationState, mapActions: mapCustomizationActions } = createNamespacedHelpers('customization')
+export default {
+  data () {
+    return {
+      topImgRed,
+      topImgBlack,
+      cover,
+      cover2,
+      showPage: false,
+      showMore: false
+    }
+  },
+  created () {
+    this.getDetail({ calendarId: this.$route.query.id }).then(() => {
+      this.showPage = true
+    })
+  },
+  computed: {
+    ...mapCustomizationState({
+      detail: item => item.detail
+    })
+  },
+  methods: {
+    ...mapCustomizationActions(['getDetail']),
+    more () {
+      this.showMore = true
+    },
+    noMore () {
+      this.showMore = false
+    },
+    large (src) {
+      let list = []
+      this.detail.Imgs.forEach(item => {
+        list.push(item.CalendarImg)
+      });
+      WeixinJSBridge.invoke('imagePreview', {
+        'current': src,
+        'urls': list
+      })
+    },
+    tel () {
+      window.location.href = 'tel:02586426666'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mainPage {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+.title {
+  font-size: 0.16rem;
+  padding: 0.2rem 0 0.1rem 0.25rem;
+  text-align: left;
+}
+.top {
+  > img {
+    width: 100%;
+  }
+  > div {
+    height: 0.85rem;
+    background: #f2f2f2;
+    position: relative;
+    .list {
+      box-sizing: border-box;
+      position: absolute;
+      bottom: 0.1rem;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 3.43rem;
+      height: 1.1rem;
+      background: #fff;
+      padding: 0.16rem 0.1rem;
+      display: flex;
+      box-shadow: 0px 2px 8px 0px rgba(204, 204, 204, 0.5);
+      border-radius: 10px;
+      img {
+        width: 0.8rem;
+        height: 0.8rem;
+        border-radius: 0.05rem;
+      }
+      > div {
+        padding: 0.05rem 0.14rem;
+        flex: 1;
+        div:nth-of-type(1) {
+          color: #000;
+          padding: 0px;
+        }
+        div:nth-of-type(2) {
+          padding-top: 0.12rem;
+        }
+        div {
+          font-size: 0.12rem;
+          padding-top: 0.08rem;
+          color: #999999;
+        }
+      }
+      span {
+        position: absolute;
+        right: 0;
+        top: 0.1rem;
+        display: block;
+        background: linear-gradient(
+          270deg,
+          rgba(227, 191, 172, 1) 0%,
+          rgba(178, 144, 132, 1) 100%
+        );
+        border-radius: 10px 0px 0px 10px;
+        padding: 1px 0.1rem 2px 0.15rem;
+        font-size: 0.12rem;
+      }
+    }
+  }
+}
+.main {
+  border-bottom: 0.1rem solid #f2f2f2;
+  text-align: center;
+  background: #fff;
+  .text {
+    padding-bottom: 0.15rem;
+  }
+  img {
+    width: 1.65rem;
+    margin: 20px;
+  }
+}
+.bottom {
+  background: #fff;
+  .pic-list {
+    justify-content: center;
+    padding: 0.05rem;
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: row wrap;
+    img {
+      width: 1.65rem;
+      height: 2.6rem;
+      margin: 0.08rem;
+    }
+  }
+  .more {
+    color: #77a5f0;
+    text-align: center;
+    margin-bottom: 0.1rem;
+    i {
+      color: #77a5f0;
+    }
+  }
+}
+.foot {
+  height: 0.9rem;
+  text-align: center;
+  line-height: 0.9rem;
+  background: #f2f2f2;
+  div {
+    color: #77a5f0;
+  }
+}
+</style>

src/pages/user/customization/customizationList.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="content mainPage" v-if="showPage">
+    <div
+      class="list"
+      v-for="(item,index) in list"
+      :key="index"
+      @click="toDetail(item.CustomerCalendarId)"
+    >
+      <img :src="item.ModelName === '黑色'?cover:cover2">
+      <div>
+        <div>定制您的2019专属台历</div>
+        <div>主办案场: {{item.CaseName}}</div>
+        <div>参与时间: {{toolClass.dateFormat(item.CreateDate)}}</div>
+      </div>
+      <span>{{item.MakeStatus === 'making' ? '制作中' : '制作完成'}}</span>
+    </div>
+    <noMore v-if="list.length === 0"></noMore>
+  </div>
+</template>
+
+<script>
+import cover from '@/common/icon/heise.png'
+import cover2 from '@/common/icon/honhse.png'
+import noMore from '@/components/noMore/noMore.vue'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapCustomizationState, mapActions: mapCustomizationActions } = createNamespacedHelpers('customization')
+export default {
+  data () {
+    return {
+      showPage: false,
+      cover,
+      cover2
+    }
+  },
+  components:{
+    noMore
+  },
+  created () {
+    this.getList().then(() => {
+      this.showPage = true
+      console.log(this.list)
+    })
+  },
+  computed: {
+    ...mapCustomizationState({
+      list: item => item.list
+    })
+  },
+  methods: {
+    ...mapCustomizationActions(['getList']),
+    toDetail (id) {
+      this.$router.push({ name: 'customizationDetail', query: { id: id } })
+    }
+  },
+  // beforeRouteLeave (to, from, next) {
+  //   console.log(to)
+  //   console.log(from)
+  //   if (to.name === 'making') {
+  //     next({ name: 'activeList' })
+  //   } else {
+  //     next()
+  //   }
+  // }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 0.2rem 0.16rem;
+  box-sizing: border-box;
+  .list {
+    padding: 0.16rem 0.1rem;
+    display: flex;
+    box-shadow: 0px 2px 8px 0px rgba(204, 204, 204, 0.5);
+    border-radius: 10px;
+    position: relative;
+    img {
+      width: 0.8rem;
+      height: 0.8rem;
+      border-radius: 0.05rem;
+    }
+    > div {
+      padding: 0.05rem 0.14rem;
+      flex: 1;
+      div:nth-of-type(1) {
+        color: #000;
+        padding: 0px;
+        font-size: 0.15rem;
+      }
+      div:nth-of-type(2) {
+        padding-top: 0.12rem;
+      }
+      div {
+        font-size: 0.12rem;
+        padding-top: 0.08rem;
+        color: #999999;
+      }
+    }
+    span {
+      position: absolute;
+      right: 0;
+      top: 0.1rem;
+      display: block;
+      background: linear-gradient(
+        24deg,
+        rgba(250, 80, 140, 1) 0%,
+        rgba(255, 200, 110, 1) 100%
+      );
+      border-radius: 100px 0px 0px 100px;
+      padding: 2px 0.1rem 4px 0.15rem;
+      color: white;
+      font-size: 0.12rem;
+    }
+  }
+}
+</style>

src/pages/user/fiveA/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="mainPage flex-v">
     <nav class="flex-h">
-      <a class="flex-item" v-for="(item,index) in locations" :key="index" :class="{'active':index==active.index}" @click="changeLocation(item,index)">{{item.LocationName}}</a>
+      <a
+        class="flex-item"
+        v-for="(item,index) in locations"
+        :key="index"
+        :class="{'active':index==active.index}"
+        @click="changeLocation(item,index)"
+      >{{item.LocationName}}</a>
     </nav>
     <div class="flex-item">
       <div>
@@ -9,8 +15,18 @@
           <div class="banner flex-h">
             <div class="flex-item">
               <swiper :options="swiperOption" ref="mySwiper">
-                <swiper-slide class="swiper-slide" v-for="(banner,bindex) in item.Banners" :key="bindex">
-                  <img :src='banner.ImageUrl' class="cover" style="border-radius: .12rem;" alt=""  @click="jump(banner)">
+                <swiper-slide
+                  class="swiper-slide"
+                  v-for="(banner,bindex) in item.Banners"
+                  :key="bindex"
+                >
+                  <img
+                    :src="banner.ImageUrl"
+                    class="cover"
+                    style="border-radius: .12rem;"
+                    alt
+                    @click="jump(banner)"
+                  >
                 </swiper-slide>
               </swiper>
             </div>
@@ -18,7 +34,12 @@
           <h5>{{item.Title}}</h5>
           <div class="courseList flex-h">
             <ul class="flex-item" v-if="!fiveANoData">
-              <router-link tag="li" v-for="(course,cindex) in item.Courses" :key="cindex" :to="{name:'majorProjectsDetail',query:{id: course.CourseId}}">
+              <router-link
+                tag="li"
+                v-for="(course,cindex) in item.Courses"
+                :key="cindex"
+                :to="{name:'majorProjectsDetail',query:{id: course.CourseId}}"
+              >
                 <courseItem :data="courseInfo(course)"></courseItem>
               </router-link>
             </ul>
@@ -28,7 +49,13 @@
           <h5>{{item.Consult || '资讯'}}</h5>
           <div class="newsList flex-h">
             <ul class="flex-item">
-              <li tag="li" @click="jump(newinfo)" v-for="(newinfo,nindex) in item.News" v-if="nindex < 5" :key="nindex">
+              <li
+                tag="li"
+                @click="jump(newinfo)"
+                v-for="(newinfo,nindex) in item.News"
+                v-if="nindex < 5"
+                :key="nindex"
+              >
                 <newsItem :data="newinfo"></newsItem>
               </li>
             </ul>
@@ -107,7 +134,7 @@ export default {
         id: course.CourseId,
         title: course.CourseName,
         img: course.CourseImg,
-        remark: course.Remark,
+        remark: `${this.toolClass.dateFormat(course.BeginDate, 'yyyy-MM-dd')} ~ ${this.toolClass.dateFormat(course.EndDate, 'yyyy-MM-dd')}`,
         address: course.CaseAddress,
         tag: course.CourseTags || [],
         courseType: '',
@@ -126,7 +153,7 @@ export default {
       if (item.ForwardType === 'url') {
         window.location.href = item.ForwardUrl
       } else if (item.ForwardType === 'course') {
-        if (item.ForwardResourceId){
+        if (item.ForwardResourceId) {
           this.$router.push({ name: 'majorProjectsDetail', query: { id: item.ForwardResourceId } }) // 此处去课程详情
         } else {
           this.$router.push({ name: 'majorProjectsDetail', query: { id: item.ForwardCourseId } }) // 此处去课程详情

src/pages/user/library/booksList/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="mainPage">
+    <loadMore :on-infinite="onInfinite" :dataList="scrollData">
+      <div class="box">
+        <div class="noData" v-if="show && (books.list || []).length < 1">
+          <img src="../../../../common/icon/kong.png" alt>
+          <span>暂无内容</span>
+        </div>
+        <ul>
+          <li v-for="(item, index) in (books.list || [])" :key="index" v-if="show">
+            <libraryListItem
+              :data="item"
+              :status="mineBookStatus(item)"
+              @appointmentBook="appointmentBook"
+            ></libraryListItem>
+          </li>
+        </ul>
+      </div>
+    </loadMore>
+    <van-dialog v-model="showAppointmentDialog" :show-confirm-button="false">
+      <div class="dialogContent">
+        <span class="title">确认在线预约当前图书?</span>
+        <div>
+          <span style="color: #666;">在线预约需在{{reserveEndDate}}前前往案场借阅图书, 否则 将取消预约资格</span>
+        </div>
+        <div class="btn">
+          <a @click="sureAppointmentBook">确定</a>
+          <a @click="showAppointmentDialog = false">取消</a>
+        </div>
+      </div>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import libraryListItem from '../../../../components/libraryListItem/index'
+import loadMore from '@/components/vue-load-more/index'
+import { createNamespacedHelpers } from 'vuex'
+import toolClass from '../../../../util/util'
+const { mapState: mapBookState, mapActions: mapBookAction } = createNamespacedHelpers('book')
+export default {
+  data () {
+    return {
+      showAppointmentDialog: false,
+      query: {
+        caseid: '',
+        booktype: '',
+        page: 1,
+        pagesize: 10,
+      },
+      reserveBookId: '',
+      show: false,
+      scrollData: {
+        noFlag: false // 暂无更多数据显示
+      },
+    }
+  },
+  created () {
+    this.query.booktype = this.$route.query.type
+    this.query.caseid = this.$route.query.caseid
+    this.$nextTick(() => {
+      this.onInfinite()
+    })
+    // this.getBookList(this.query).then(() => {
+    //   this.show = true
+    // })
+    this.getMineBook({
+      page: 1,
+      pagesize: 1000,
+    })
+  },
+  computed: {
+    ...mapBookState({
+      books: x => x.books,
+      mineBooks: x => x.minebooks,
+    }),
+    reserveEndDate () {
+      return toolClass.calDate(7)
+    }
+  },
+  components: {
+    libraryListItem,
+    loadMore
+  },
+  methods: {
+    ...mapBookAction([
+      'getBookList',
+      "getMineBook",
+      "reserveBook",
+      "updateBookLeftNum",
+    ]),
+    appointmentBook (id) { // 预约图书
+      this.reserveBookId = id
+      this.showAppointmentDialog = true
+    },
+    sureAppointmentBook () { // 确定预约图书
+      this.reserveBook({
+        bookid: this.reserveBookId,
+      }).then(() => {
+        this.updateBookLeftNum(this.reserveBookId)
+        this.getMineBook({
+          page: 1,
+          pagesize: 1000,
+        })
+      })
+      this.showAppointmentDialog = false
+    },
+    mineBookStatus (item) {
+      return ((this.mineBooks.list || []).filter(x => x.BookId === item.BookId && (x.BorrowStatus == '4' || x.BorrowStatus == '1' || x.BorrowStatus == '0'))[0] || {}).BorrowStatus
+    },
+    onInfinite () {
+      let more = this.$el.querySelector('.load-more')
+      this.getBookList(this.query).then((res) => {
+        this.show = true
+        this.query.page++
+        res.list = res.list || []
+        if (res.list.length < res.pageSize) {
+          more.style.display = 'none'// 隐藏加载条
+          this.scrollData.noFlag = true
+        } else {
+          more.style.display = 'none'// 隐藏加载条
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mainPage {
+  .box {
+    width: 100%;
+    // position: absolute;
+    // left: 0;
+    // top: 0;
+    // bottom: 0;
+    // overflow-y: scroll;
+    // -webkit-overflow-scrolling: touch;
+    // transform: translateZ(0);
+    // -webkit-transform: translateZ(0);
+    .noData {
+      width: 100%;
+      margin: 0.5rem auto 0;
+      position: relative;
+      overflow: hidden;
+      img {
+        width: 0.7rem;
+        display: block;
+        margin: 0 auto;
+      }
+      span {
+        width: 100%;
+        display: block;
+        text-align: center;
+        line-height: 0.3rem;
+        color: #b4b4b4;
+        font-size: 0.14rem;
+        margin: 0.05rem auto 0;
+      }
+    }
+    > ul {
+      padding: 0 0.16rem;
+      margin-bottom: 0.1rem;
+      position: relative;
+      overflow: hidden;
+      li {
+        margin: 0.1rem auto 0;
+      }
+    }
+  }
+}
+</style>

src/pages/user/library/booksSearch/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="mainPage flex-v">
+    <loadMore :on-infinite="onInfinite" :dataList="scrollData">
+      <div class="header flex-h">
+        <div class="flex-item flex-h">
+          <i class="iconfont icon-sousuo"></i>
+          <div class="flex-item">
+            <div>
+              <input type="text" v-model="searchKey" autofocus="autofocus" placeholder="请输入图书名">
+            </div>
+          </div>
+        </div>
+        <a @click="search">搜索</a>
+      </div>
+      <div class="searchRemark" v-if="showSearch">
+        <span>
+          关于“
+          <em>{{doSearchKey}}</em>”的搜索结果：
+        </span>
+      </div>
+      <div class="flex-item list" :hidden="!showSearch">
+        <div>
+          <div class="noData" v-if="(books.list || []).length < 1">
+            <img src="../../../../common/icon/kong.png" alt>
+            <span>暂无内容</span>
+          </div>
+          <ul v-else>
+            <li v-for="(item, index) in books.list" :key="index">
+              <libraryListItem
+                :data="item"
+                :status="mineBookStatus(item)"
+                @appointmentBook="appointmentBook"
+              ></libraryListItem>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </loadMore>
+    <van-dialog v-model="showAppointmentDialog" :show-confirm-button="false">
+      <div class="dialogContent">
+        <span class="title">确认在线预约当前图书?</span>
+        <div>
+          <span style="color: #666;">在线预约需在{{reserveEndDate}}前前往案场借阅图书, 否则 将取消预约资格</span>
+        </div>
+        <div class="btn">
+          <a @click="sureAppointmentBook">确定</a>
+          <a @click="showAppointmentDialog = false">取消</a>
+        </div>
+      </div>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import libraryListItem from '../../../../components/libraryListItem/index'
+import toolClass from '../../../../util/util'
+import loadMore from '@/components/vue-load-more/index'
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapState: mapBookState, mapActions: mapBookAction } = createNamespacedHelpers('book')
+export default {
+  data () {
+    return {
+      searchKey: '',
+      showSearch: false,
+      noData: false,
+      showAppointmentDialog: false,
+      caseid: '',
+      page: 1,
+      pagesize: 10,
+      doSearchKey: '',
+      reserveBookId: '',
+      scrollData: {
+        noFlag: false // 暂无更多数据显示
+      },
+    }
+  },
+  created () {
+    this.caseid = this.$route.query.caseid
+    this.getMineBook({
+      page: 1,
+      pagesize: 1000,
+    })
+  },
+  computed: {
+    ...mapBookState({
+      books: x => x.books,
+      mineBooks: x => x.minebooks,
+    }),
+    reserveEndDate () {
+      return toolClass.calDate(7)
+    }
+  },
+  mounted () {
+    // this.$nextTick(() => {
+    //   document.getElementById("seltxt").focus()
+    // })
+  },
+  components: {
+    loadMore,
+    libraryListItem
+  },
+  methods: {
+    ...mapBookAction([
+      'getBookList',
+      'getMineBook',
+      'reserveBook',
+      "updateBookLeftNum",
+      "updateRecommendBookLeftNum",
+    ]),
+    search () { // 搜索
+      if (this.searchKey !== '') {
+        this.doSearchKey = this.searchKey
+        this.page = 1
+        this.onInfinite()
+      } else {
+        this.$toast('搜索关键词不能为空')
+      }
+    },
+    appointmentBook (id) { // 预约图书
+      this.reserveBookId = id
+      this.showAppointmentDialog = true
+    },
+    sureAppointmentBook () { // 确定预约图书
+      this.reserveBook({
+        bookid: this.reserveBookId,
+      }).then(() => {
+        this.updateBookLeftNum(this.reserveBookId)
+        this.updateRecommendBookLeftNum(this.reserveBookId)
+        this.getMineBook({
+          page: 1,
+          pagesize: 1000,
+        })
+      })
+      this.showAppointmentDialog = false
+    },
+    getSearchList () {
+      this.getBookList({
+        caseid: this.caseid,
+        name: this.doSearchKey,
+        page: this.page,
+        pagesize: this.pagesize,
+      }).then(() => {
+        this.showSearch = true
+      })
+    },
+    mineBookStatus (item) {
+      return ((this.mineBooks.list || []).filter(x => x.BookId === item.BookId && (x.BorrowStatus == '4' || x.BorrowStatus == '1' || x.BorrowStatus == '0'))[0] || {}).BorrowStatus
+    },
+    onInfinite () {
+      let more = this.$el.querySelector('.load-more')
+      this.getBookList({
+        caseid: this.caseid,
+        name: this.doSearchKey,
+        page: this.page,
+        pagesize: this.pagesize,
+      }).then((res) => {
+        this.showSearch = true
+        this.page++
+        res.list = res.list || []
+        if (res.list.length < res.pageSize) {
+          more.style.display = 'none'// 隐藏加载条
+          this.scrollData.noFlag = true
+        } else {
+          more.style.display = 'none'// 隐藏加载条
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mainPage {
+  .header {
+    padding: 0.1rem 0.2rem;
+    > div {
+      background: #f2f2f2;
+      position: relative;
+      overflow: hidden;
+      i {
+        font-size: 0.15rem;
+        color: #ccc;
+        margin-left: 0.08rem;
+        line-height: 0.3rem;
+      }
+      > div {
+        margin-left: 0.1rem;
+        > div {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          input {
+            width: 100%;
+            display: block;
+            line-height: 0.2rem;
+            padding: 0.05rem 0;
+            background: none;
+            font-size: 0.13rem;
+          }
+        }
+      }
+    }
+    > a {
+      line-height: 0.3rem;
+      margin-left: 0.1rem;
+      font-size: 0.14rem;
+    }
+  }
+  .searchRemark {
+    padding: 0 0.2rem;
+    span {
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      display: block;
+      line-height: 0.22rem;
+      font-size: 0.14rem;
+      color: #616161;
+      em {
+        line-height: 0.22rem;
+        font-size: 0.14rem;
+        color: #fc5634;
+      }
+    }
+  }
+  .list {
+    position: relative;
+    overflow: hidden;
+    > div {
+      width: 100%;
+      // position: absolute;
+      // left: 0;
+      // top: 0;
+      // bottom: 0;
+      // overflow-y: scroll;
+      // -webkit-overflow-scrolling: touch;
+      // transform: translateZ(0);
+      // -webkit-transform: translateZ(0);
+      .noData {
+        width: 100%;
+        margin: 0.5rem auto 0;
+        position: relative;
+        overflow: hidden;
+        img {
+          width: 0.7rem;
+          display: block;
+          margin: 0 auto;
+        }
+        span {
+          width: 100%;
+          display: block;
+          text-align: center;
+          line-height: 0.3rem;
+          color: #b4b4b4;
+          font-size: 0.14rem;
+          margin: 0.05rem auto 0;
+        }
+      }
+      > ul {
+        padding: 0 0.2rem;
+        margin: 0 auto 0.1rem;
+        position: relative;
+        overflow: hidden;
+        > li {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          margin: 0.1rem auto 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/user/library/borrowedRecord/index.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="mainPage">
+    <slideTabH
+      :data="tabList"
+      fontSize="16"
+      activeColor="red"
+      normalColor="#666"
+      @slideChange="slideChange"
+    >
+      <div class="subMain" slot="slideTabH-1">
+        <div>
+          <div class="noData" v-if="borrowshow && (borrowBooks.list || []).length < 1">
+            <img src="../../../../common/icon/kong.png" alt>
+            <span>暂无内容</span>
+          </div>
+          <ul v-if="borrowshow">
+            <li v-for="(item, index) in borrowBooks.list" :key="index">
+              <libraryListItem :data="item" :type="1" @itemClick="borrowedRecordClick"></libraryListItem>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="subMain" slot="slideTabH-2">
+        <div>
+          <span>请在资格保留时间内至案场借阅图书，超出预约时间将取消预约资格</span>
+          <div class="noData" v-if="reserveshow && (reserveBooks.list || []).length < 1">
+            <img src="../../../../common/icon/kong.png" alt>
+            <span>暂无内容</span>
+          </div>
+          <ul v-if="reserveshow">
+            <li v-for="(item, index) in reserveBooks.list" :key="index">
+              <libraryListItem :data="item" :type="2"></libraryListItem>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </slideTabH>
+    <van-dialog v-model="showDialog" :show-confirm-button="false" :closeOnClickOverlay="true">
+      <div class="borrowedRecordContent flex-h" @click="showDialog = false">
+        <div class="img">
+          <a>
+            <img
+              :src="(currentItem.BookImg || defaultimg) + '?x-oss-process=style/compress-rotate'"
+              class="centerLabel"
+              style="width: 100%;
+                height: 100%;
+                object-fit: cover"
+            >
+          </a>
+        </div>
+        <div class="flex-item">
+          <div>
+            <div>
+              <span :class="currentItem.BorrowStatus=='0'?'active':''">{{myBookStatus}}</span>
+            </div>
+            <span class="title">{{currentItem.BookName}}</span>
+            <span>借阅时间：{{toolClass.dateFormat(currentItem.BorrowDate)}}</span>
+            <span>应还时间：{{toolClass.dateFormat(currentItem.EndDate, 'yyyy-MM-dd')}}</span>
+            <span>归还时间：{{currentItem.BorrowStatus == '1' || currentItem.BorrowStatus == '0' ? '暂未归还' : toolClass.dateFormat(currentItem.ReturnDate)}}</span>
+          </div>
+        </div>
+      </div>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import slideTabH from '../../../../components/slideTabH/index'
+import libraryListItem from '../../../../components/libraryListItem/index'
+import toolClass from '../../../../util/util'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapBookState, mapActions: mapBookAction } = createNamespacedHelpers('book')
+export default {
+  data () {
+    return {
+      tabList: [{ value: '借阅记录', id: '1' }, { value: '线上预约记录', id: '2' }],
+      showDialog: false,
+      status: '1',
+      page: 1,
+      pagesize: 10000,
+      reserveBooks: {},
+      borrowBooks: {},
+      currentItem: {},
+      borrowshow: false,
+      reserveshow: false,
+      defaultimg: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/book_default.png',
+    }
+  },
+  created () {
+    this.getList('1')
+    this.getList('2')
+  },
+  computed: {
+    myBookStatus () {
+      let status = ''
+      switch (this.currentItem.BorrowStatus) {
+        case '4':
+          status = '已预约'
+          break
+        case '1':
+          status = '借阅中'
+          break
+        case '0':
+          status = '逾期未还'
+          break
+        case '3':
+          status = '逾期归还'
+          break
+        case '2':
+          status = '已归还'
+          break
+      }
+      return status
+    },
+  },
+  components: {
+    libraryListItem,
+    slideTabH
+  },
+  methods: {
+    ...mapBookAction([
+      'getMineBook',
+    ]),
+    slideChange (e) {
+      if (this.status !== this.tabList[e].id) {
+        this.status = this.tabList[e].id
+        // this.page = 1
+        // this.getList()
+      }
+    },
+    borrowedRecordClick (e) { // 借阅记录点击事件
+      this.currentItem = e
+      this.showDialog = true
+    },
+    getList (status) {
+      const _that = this
+      this.getMineBook({
+        page: this.page,
+        pagesize: this.pagesize,
+        status: status == '1' ? '1,3,2,0' : '4',
+      }).then((res) => {
+        if (status == '1') {
+          _that.borrowBooks = res
+          _that.borrowshow = true
+        } else {
+          _that.reserveBooks = res
+          _that.reserveshow = true
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mainPage {
+  .subMain {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    .noData {
+      width: 100%;
+      margin: 0.5rem auto 0;
+      position: relative;
+      overflow: hidden;
+      img {
+        width: 0.7rem;
+        display: block;
+        margin: 0 auto;
+      }
+      span {
+        width: 100%;
+        display: block;
+        text-align: center;
+        line-height: 0.3rem;
+        color: #b4b4b4;
+        font-size: 0.14rem;
+        margin: 0.05rem auto 0;
+      }
+    }
+    > div {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      > span {
+        width: 100%;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 0.1rem;
+        background: #fdecec;
+        color: #fc6243;
+        line-height: 0.24rem;
+        text-indent: 0.15rem;
+        padding-top: 0.02rem;
+      }
+      > ul {
+        padding: 0 0.16rem;
+        margin-bottom: 0.1rem;
+        position: relative;
+        overflow: hidden;
+        li {
+          margin: 0.1rem auto 0;
+        }
+      }
+    }
+  }
+  .borrowedRecordContent {
+    padding: 0.12rem;
+    position: relative;
+    overflow: hidden;
+    align-items: center;
+    .img {
+      width: 0.8rem;
+      position: relative;
+      overflow: hidden;
+      a {
+        width: 100%;
+        display: block;
+        height: 0;
+        position: relative;
+        overflow: hidden;
+        padding-bottom: 137.5%;
+        border-radius: 0.03rem;
+        background: #eee;
+      }
+    }
+    > div.flex-item {
+      position: relative;
+      overflow: visible;
+      margin-left: 0.12rem;
+      > div {
+        width: 100%;
+        position: relative;
+        overflow: visible;
+        > div {
+          text-align: right;
+          span {
+            display: inline-block;
+            line-height: 0.24rem;
+            font-size: 0.12rem;
+            color: #869ec3;
+            background: #f2f4f7;
+            padding: 0 0.1rem 0 0.15rem;
+            border-radius: 0.15rem 0 0 0.15rem;
+            margin-right: -0.12rem;
+          }
+          .active {
+            background-color: #fc5534;
+            color: #fff;
+          }
+        }
+        > span {
+          width: 100%;
+          display: block;
+          line-height: 0.18rem;
+          font-size: 0.11rem;
+          color: #666;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          &.title {
+            font-size: 0.16rem;
+            color: #333;
+            line-height: 0.22rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/user/library/navList/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="mainPage">
+    <div>
+      <nav class="nav">
+        <a v-for="(item, index) in navList" :key="index" @click="navClick(item)">
+          <img :src="item.BookTypeImg" alt>
+          <span>{{item.BookTypeName}}</span>
+        </a>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapState: mapBookState, mapActions: mapBookAction } = createNamespacedHelpers('book')
+export default {
+  data () {
+    return {
+      caseid: '',
+    }
+  },
+  created () {
+    this.caseid = this.$route.query.caseid
+    this.getBookType({
+      caseid: this.caseid,
+      page: 1,
+      pagesize: 10000,
+    })
+  },
+  computed: {
+    ...mapBookState({
+      navList: x => x.types.list
+    })
+  },
+  components: {
+  },
+  methods: {
+    ...mapBookAction(['getBookType']),
+    navClick (item) {
+      this.$router.push({ name: 'booksList', query: { type: item.BookTypeId, caseid: this.caseid } })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mainPage {
+  > div {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    .nav {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      font-size: 0;
+      > a {
+        display: inline-block;
+        width: 25%;
+        text-align: center;
+        margin-top: 0.15rem;
+        img {
+          height: 0.48rem;
+        }
+        span {
+          width: 100%;
+          display: inline-block;
+          text-align: center;
+          font-size: 0.12rem;
+          line-height: 0.22rem;
+          margin: 0.08rem auto 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/user/mainPage/coffeeIndex/index.vue

@@ -135,13 +135,14 @@ import logo from '../../../../common/icon/indexlogo.jpg'
 import wxsdk from '../../../../util/share'
 import noMore from '../../../../components/noMore/noMore'
 import { mapState, createNamespacedHelpers } from 'vuex'
+import wx from 'weixin-jsapi'
 const { mapActions: actions } = createNamespacedHelpers('app')
 const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
 const { mapState: mapCaseState, mapActions: mapCaseActions } = createNamespacedHelpers('case')
 const { mapState: mpRemarkState, mapActions: mapRemarkActions } = createNamespacedHelpers('remark')
 const { mapState: mapCardState, mapActions: mapCardActions } = createNamespacedHelpers('myCard')
 const { mapActions: mapUserCenterActions } = createNamespacedHelpers('userCenter')
-const wx = require('weixin-js-sdk')
+// const wx = require('weixin-js-sdk')
 
 export default {
   name: '',

src/pages/user/mainPage/index.vue

@@ -10,7 +10,8 @@
         <div>
           <img v-if="index==0" class="centerLabel" src="../../../common/icon/tabBar-icon-1.png" alt="">
           <img v-if="index==1" class="centerLabel" src="../../../common/icon/tabBar-icon-2.png" alt="">
-          <img v-if="index==2" class="centerLabel" src="../../../common/icon/tabBar-icon-3.png" alt="">
+          <img v-if="index==2" class="centerLabel" src="../../../common/icon/tabBar-icon-4.png" alt="">
+          <img v-if="index==3" class="centerLabel" src="../../../common/icon/tabBar-icon-3.png" alt="">
         </div>
         <span>{{item.name}}</span>
       </router-link>
@@ -31,6 +32,9 @@ export default {
       }, {
         pathName: 'coffeeIndex',
         name: '城咖啡'
+      }, {
+        pathName: 'libraryIndex',
+        name: '在线书吧'
       }, {
         pathName: 'userCenter',
         name: '会员'

src/pages/user/mainPage/indexPage/index.vue

@@ -1,113 +1,158 @@
 <template>
-  <div class="mainPage">
-    <div class="topBanner">
-      <swiper :options="swiperOption" ref="mySwiper">
-        <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
-          <img :src='item.ImageUrl' class="cover" alt="" @click="jump(item)">
-        </swiper-slide>
-      </swiper>
-    </div>
-    <div class="pageTitle flex-h">
-      <h5 class="flex-item">
-        <span>银城5A全龄生活体验平台</span>
-      </h5>
-    </div>
-    <div class="flex-h">
-      <nav class="pageNav flex-item">
-        <router-link :to="{name:'fiveA',query:{id:item.LocationId}}" v-for="(item,index) in data.fiveA" :key="index">
-          <a>
-            <img :src="item.TypeImg" class="centerLabel cover" alt="">
-            <em>{{item.LocationName}}</em>
-          </a>
-          <span>{{item.Title}}</span>
-        </router-link>
-      </nav>
-    </div>
-    <div class="MsgBanner">
-      <div class="flex-h">
-        <i class="iconfont icon-xiaoxi"></i>
-        <span>最新消息：</span>
-        <div class="flex-item">
+  <div class="mainPage" v-if="showPage">
+    <div class="banner flex-h">
+      <div class="flex-item">
+        <div>
           <div>
-            <swiper :options="swiperOptionMsg" ref="mySwiperMsg">
-              <swiper-slide class="swiper-slide" v-for="(item,index) in message" :key="index">
-                <router-link :to="{name:'',query:{}}"><span @click="jump(item)">{{item.InfoName}}</span></router-link>
+            <swiper :options="swiperOption" ref="mySwiper">
+              <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
+                <img :src="item.ImageUrl" class="cover" alt @click="jump(item)">
               </swiper-slide>
-              <div class="swiper-pagination"  slot="pagination"></div>
             </swiper>
           </div>
         </div>
       </div>
     </div>
-    <div class="pageTitle flex-h">
-      <h5 class="flex-item">
-        <span>售楼处项目专题</span>
-      </h5>
-    </div>
-    <div class="flex-h">
-      <ul class="projectList flex-item">
-        <router-link tag="li" :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }" v-for="(item,index) in project" :key="index">
-          <img :src='item.CaseImageUrl' class="centerLabel cover" alt="">
+    <div class="subNav">
+      <ul class="flex-h">
+        <router-link
+          tag="li"
+          class="flex-item"
+          v-for="(item, index) in fiveA"
+          :to="{name:'fiveA',query:{id:item.LocationId}}"
+          :key="index"
+        >
+          <img :src="item.TypeImg" alt>
+          <span>{{item.LocationName}}</span>
         </router-link>
       </ul>
     </div>
-    <div style="width:100%;height:.1rem;background:#f8f8f8;margin:.25rem auto 0;"></div>
-    <div class="pageTitle flex-h">
-      <h5 class="flex-item">
-        <span>活动资讯</span>
-      </h5>
+    <div class="areaHeader flex-h">
+      <h1 class="flex-item">探索·发现</h1>
+      <router-link v-if="project.length>5" :to="{name: 'majorProjectsList'}">查看所有</router-link>
     </div>
-    <div class="flex-h">
-      <ul class="newsList flex-item">
-        <li @click="jump(item)" v-for="(item,index) in newsList" v-if="index < 5" :key="index">
-          <newsItem :data="item"></newsItem>
-        </li>
-      </ul>
+    <div class="areaContent">
+      <div class="scroll-h find">
+        <div>
+          <swiper :options="swiperHOption" ref="mySwiperH">
+            <swiper-slide
+              class="swiper-slide"
+              v-for="(item,index) in ProjectWithLocationList"
+              v-if="index<5"
+              :key="index"
+            >
+              <router-link
+                tag="div"
+                :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }"
+                style="width:100%;height:100%;position:relative;"
+              >
+                <img :src="getImg(item.CmsCaseImgs)" class="cover" alt>
+                <span v-if="item.CaseId!='all'">
+                  <i class="iconfont icon-dingwei"></i>
+                  {{item.jl}}
+                </span>
+              </router-link>
+            </swiper-slide>
+          </swiper>
+        </div>
+      </div>
+    </div>
+    <div class="areaHeader flex-h" v-if="courseList.length>0">
+      <h1 class="flex-item">近期课程</h1>
+      <router-link v-show="courseList.length>5" :to="{name: 'courseList'}">查看所有</router-link>
+    </div>
+    <div class="areaContent" v-if="courseList.length>0">
+      <div class="scroll-h course">
+        <div>
+          <swiper :options="swiperHOption" ref="mySwiperH">
+            <swiper-slide
+              class="swiper-slide"
+              v-for="(item,index) in courseList"
+              :key="index"
+              v-if="index<5"
+            >
+              <router-link
+                tag="div"
+                :to="{ name:'majorProjectsDetail', query:{ id: item.CourseId } }"
+                style="width:100%;position:relative;overflow:visible"
+              >
+                <div class="img">
+                  <img :src="item.CourseImg" class="cover centerLabel" alt>
+                  <span>{{item.CourseName}}</span>
+                </div>
+                <div class="price">
+                  <span>￥{{item.Price}}</span>
+                </div>
+                <span>{{`${toolClass.dateFormat(item.BeginDate,'yyyy.MM.dd')}~${toolClass.dateFormat(item.EndDate,'MM.dd')}`}}</span>
+                <span>{{item.CaseName}}</span>
+              </router-link>
+            </swiper-slide>
+          </swiper>
+        </div>
+      </div>
+    </div>
+    <div class="areaHeader flex-h">
+      <h1 class="flex-item">活动资讯</h1>
+    </div>
+    <div class="areaContent newsList flex-h">
+      <div class="flex-item">
+        <div>
+          <ul>
+            <li
+              class="flex-h"
+              v-for="(item,index) in newsList"
+              :key="index"
+              @click="jump(item)"
+              v-if="index<5"
+            >
+              <a class="img">
+                <img :src="item.ImageUrl" class="centerLabel cover" alt>
+              </a>
+              <div class="flex-item">
+                <div>
+                  <span>{{item.Title}}</span>
+                  <span>{{toolClass.dateFormat(item.CreateDate)}}</span>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import newsItem from '../../../../components/newsItem/index'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
+import toolClass from '../../../../util/util'
 import { mapState, createNamespacedHelpers } from 'vuex'
-const { mapActions: mapIndexActions } = createNamespacedHelpers('index')
-const { mapState: mapUserState } = createNamespacedHelpers('userCenter')
+import wx from 'weixin-jsapi'
+const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
+// const wx = require('weixin-js-sdk')
+import wxsdk from '@/util/share'
 export default {
   name: '',
   data () {
     return {
-      data: {
-        fiveA: []
-      },
-      locationId: '',
       swiperOption: {
         observer: true,
         loop: true,
-        speed: 1000,
+        speed: 400,
         autoplay: {
           disableOnInteraction: false,
         }
       },
-      swiperOptionMsg: {
+      swiperHOption: {
         observer: true,
-        observeParents:true,
-        // slidesPerView: 3,
-        direction: 'vertical',
-        speed: 1000,
-        // loop: true,
-        autoplay: {
-          disableOnInteraction: false,
-        }
+        freeMode: true,
+        slidesPerView: 'auto',
       },
-      newsList: []
+      newsList: [],
+      showPage: false
     }
   },
   computed: {
-    ...mapUserState({
-      userInfo: x => x.userInfo
-    }),
     ...mapState({
       orgid: x => x.app.orgId,
       fiveA: x => x.index.fiveA,
@@ -115,49 +160,81 @@ export default {
       message: x => x.index.message,
       project: x => x.index.project,
       cms: x => x.index.cms,
+      longitude1: x => x.index.longitude1,
+      latitude1: x => x.index.latitude1
+    }),
+    ...mapIndexState({
+      courseList: x => x.courseList
     }),
     MySwiper () {
       return this.$refs.mySwiper.swiper
     },
-    MySwiperMsg () {
-      return this.$refs.MySwiperMsg.swiper
+    MySwiperH () {
+      return this.$refs.mySwiperH.swiper
+    },
+    ProjectWithLocationList () {
+      var data = this.project || []
+      if (this.latitude1 === 0 && this.longitude1 === 0) {
+        data.forEach((item) => {
+          item.jl = '未获取到当前定位'
+        })
+        return data
+      } else {
+        let arr = []
+        let dataNew = []
+        data.forEach((item) => {
+          if (item.Coordinate) {
+            item.jl = parseInt(toolClass.getGreatCircleDistance(this.latitude1, this.longitude1, item.Coordinate.split(',')[0], item.Coordinate.split(',')[1]))
+            arr.push({ jl: item.jl, CmsCaseId: item.CmsCaseId })
+          } else {
+            item.jl = 400000000
+            arr.push({ jl: item.jl, CmsCaseId: item.CmsCaseId })
+          }
+        })
+        arr.sort((a, b) => { return a.jl - b.jl })
+        arr.forEach((curr) => {
+          data.forEach((item) => {
+            if (curr.CmsCaseId === item.CmsCaseId && item.jl === curr.jl) {
+              item.jl = `距离${item.jl}米`
+              dataNew.push(item)
+            }
+          })
+        })
+        return dataNew
+      }
     }
   },
   components: {
-    newsItem,
     swiper,
-    swiperSlide,
+    swiperSlide
   },
   created () {
-    this.getIndexLocation({ orgid: this.orgid, issys: '0' }).then((res) => {
-      this.data.fiveA = this.fiveA
-      this.locationId = 'index'
-      this.getIndexInfo({ orgid: this.orgid, locationid: this.locationId }).then(() => {
-        this.newsList = this.cms
-        if (this.project !== undefined && this.project !== null) {
-          for (let i = 0; i < this.project.length; i++) {
-            if (this.project[i].CmsCaseImgs != null) {
-              for (let j = 0; j < this.project[i].CmsCaseImgs.length; j++) {
-                if (this.project[i].CmsCaseImgs[j].ImageType === 'cover') {
-                  this.project[i].CaseImageUrl = this.project[i].CmsCaseImgs[j].CaseImageUrl
-                }
-              }
-            }
-          }
-        }
+    let that = this
+    wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
+      title: '城的空间',
+      desc: '城的空间',
+      link: `${window.location.origin}${window.location.pathname}#/mainPage/indexPage`,
+      thu_image: `https://spaceofcheng.oss-cn-beijing.aliyuncs.com/indexlogo.jpg?x-oss-process=style/wxicon`
+    }).then(() => {
+      wx.getLocation({
+        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
+        success: function (res) {
+          that.setLocation({ latitude1: res.latitude, longitude1: res.longitude })
+        },
       })
     })
+    that.showPage = true
+    that.init()
   },
   methods: {
-    ...mapIndexActions(['getIndexInfo']),
-    ...mapIndexActions(['getIndexLocation']),
+    ...mapIndexActions(['getIndexLocation', 'getIndexInfo', 'getCourseList', 'setLocation']),
     jump (item) {
       item.ForwardType = item.ForwardType || ''
       if (item.ForwardType === 'url') {
         window.location.href = item.ForwardUrl
         return
       } else if (item.ForwardType === 'course') {
-        if (item.ForwardResourceId){
+        if (item.ForwardResourceId) {
           this.$router.push({ name: 'majorProjectsDetail', query: { id: item.ForwardResourceId } }) // 此处去课程详情
           return
         } else {
@@ -168,6 +245,35 @@ export default {
         window.location.href = item.InfoUrl
         return
       }
+    },
+    getImg (list) {
+      return list.filter(item => item.ImageType === 'cover')[0].CaseImageUrl
+    },
+    init () {
+      this.getIndexLocation({ orgid: this.orgid, issys: '0' }).then((res) => {
+        // this.data.fiveA = this.fiveA
+        this.locationId = 'index'
+        this.getIndexInfo({ orgid: this.orgid, locationid: this.locationId }).then((res) => {
+          this.newsList = this.cms
+          if (this.project !== undefined && this.project !== null) {
+            for (let i = 0; i < this.project.length; i++) {
+              if (this.project[i].CmsCaseImgs != null) {
+                for (let j = 0; j < this.project[i].CmsCaseImgs.length; j++) {
+                  if (this.project[i].CmsCaseImgs[j].ImageType === 'cover') {
+                    this.project[i].CaseImageUrl = this.project[i].CmsCaseImgs[j].CaseImageUrl
+                  }
+                }
+              }
+            }
+          }
+        })
+        this.getCourseList({
+          pagesize: 10000,
+          page: 1
+        }).then(() => {
+          this.showPage = true
+        })
+      })
     }
   }
 }

src/pages/user/mainPage/indexPage/page.scss

@@ -4,180 +4,241 @@
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
   background: #fff;
-  &>*:last-child{
-    margin-bottom: .2rem;
-  }
-  .topBanner{
+  .banner{
     width: 100%;
-    height: 0;
-    position: relative;
-    overflow: hidden;
-    padding-bottom: 54%;
-    background: #eee;
-    &>div{
-      width: 100%;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      top: 0;
-    }
-  }
-  .pageTitle{
-    margin: .18rem auto 0;
     position: relative;
     overflow: hidden;
-    h5{
-      &::after{
-        content: '';
-        width: 100%;
-        height: .01rem;
-        background: #eee;
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        -webkit-transform: translateY(-50%);
-        z-index: 1;
-      }
-      width: 100%;
-      display: block; 
-      text-align: center;
+    margin: .15rem auto 0;
+    >div{
+      margin: 0 .15rem;
       position: relative;
       overflow: hidden;
-      margin: 0 .2rem;
-      span{
-        display: inline-block; 
-        line-height: .26rem;
-        font-size: .14rem;
-        font-weight: normal;
-        background: #fff;
-        position: relative;
-        z-index: 2;
-        padding: 0 .15rem;
-      }
-    }
-  }
-  .pageNav{
-    margin: 0 .1rem;
-    font-size: 0;
-    &>a{
-      width: 20%;
-      display: inline-block;
-      position: relative;
-      overflow: hidden;
-      margin-top: .15rem;
-      vertical-align: top;
-      a{
-        width: 70%;
-        display: block;
-        padding-bottom: 70%;
+      >div{
+        width: 100%;
         position: relative;
         overflow: hidden;
+        border-radius: .1rem;
+        height: 0;
+        padding-bottom: 55%;
         background: #eee;
-        margin: 0 auto;
-        border-radius: 100%;
-        img{
-          z-index: 1;
-        }
-        em{
+        >div{
           width: 100%;
-          display: block;
           position: absolute;
           left: 0;
+          top: 0;
           bottom: 0;
-          line-height: .3rem;
-          font-size: .11rem;
-          text-align: center;
-          color: #fff;
-          z-index: 2;
+          overflow: hidden;
+          border-radius: .1rem;
+        >div{
+            width: 100%;
+            height: 100%;
+            border-radius: .1rem;
+          }
         }
       }
-      span{
-        width: 70%;
-        display: block;
-        margin: .1rem auto 0;
-        line-height: .16rem;
-        font-size: .1rem;
-        text-align: center;
-        color: #666;
-      }
     }
   }
-  .MsgBanner{
-    width: 100%;
-    height: .44rem;
-    position: relative;
-    overflow: hidden;
-    background: #f8f8f8;
-    margin: .25rem auto 0;
-    &>div{
+  .subNav{
+    margin: .3rem auto 0;
+    ul{
       width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      align-items: center;
-      &>i,
-      &>span{
-        color: #f05a3f;
-        font-size: .12rem;
-        margin-left: .08rem;
+      li{
+        text-align: center;
+        font-size: 0;
+        img{
+          display: inline-block;
+          height: .25rem;
+        }
+        span{
+          width: 100%;
+          display: inline-block;
+          text-align: center;
+          font-size: .14rem;
+          line-height: .22rem;
+        }
       }
-      &>i{
-        font-size: .16rem;
-        margin-left: .3rem;
+    }
+  }
+  .areaHeader{
+    margin: .35rem auto 0;
+    align-items: center;
+    >h1{
+      line-height: .28rem;
+      margin-left: .15rem;
+      font-size: .17rem;
+    }
+    >a{
+      font-size: .12rem;
+      color: #f83c00;
+      margin-right: .15rem;
+    }
+  }
+  .areaContent{
+    margin: .2rem auto 0;
+    .find{
+      >div{
+        width: 100%;
+        position: relative;
+        .swiper-container{
+          width: 100%;
+          position: relative;
+          .swiper-slide{
+            width: 1.14rem;
+            height: .9rem;
+            background: #eee;
+            position: relative;
+            overflow: hidden;
+            border-radius: .1rem;
+            margin-right: .15rem;
+            &:first-child{
+              margin-left: .15rem;
+            }
+            img{
+              display: inline-block;
+              position: relative;
+              z-index: 1;
+            }
+            span{
+              display: inline-block;
+              position: absolute;
+              z-index: 2;
+              width: 100%;
+              left: 0;
+              bottom: .1rem;
+              color: #fff;
+              font-size: .11rem;
+              i{
+                font-size: .12rem;
+                color: #fff;
+                margin-left: .1rem;
+              }
+            }
+          }
+        }
       }
-      &>div{
-        margin-left: .1rem;
-        height: 100%;
-        margin-right: .2rem;
-        &>div{
+    }
+    .course{
+      >div{
+        width: 100%;
+        position: relative;
+        .swiper-container{
           width: 100%;
-          height: 100%;
           position: relative;
-          overflow: hidden;
-          &>div{
-            width: 100%;
-            height: 100%;
-            a{
+          .swiper-slide{
+            width: 1.3rem;
+            position: relative;
+            overflow: visible;
+            margin-right: .25rem;
+            &:first-child{
+              margin-left: .15rem;
+            }
+            .img{
               width: 100%;
-              display: inline-block;
+              padding-bottom: 1.66rem;
+              background: #eee;
+              border-radius: .1rem;
+              position: relative;
               overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              line-height: .44rem;
-              color: #f05a3f;
+              img{
+                z-index: 1;
+              }
               span{
-                color: #f05a3f;
+                width: 100%;
+                left: 0;
+                top: 0;
+                font-size: .13rem;
+                top: .1rem;
+                text-indent: .1rem;
+                display: inline-block;
+                z-index: 2;
+                position: absolute;
+                color: #fff;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
               }
             }
+            .price{
+              position: relative;
+              overflow: visible;
+              text-align: right;
+              height: 0;
+              span{
+                display: inline-block;
+                position: relative;
+                z-index: 2;
+                line-height: .24rem;
+                color: #fff;
+                padding: 0 .1rem;
+                background: #ec1d24;
+                border-radius: .24rem;
+                font-size: .11rem;
+                transform: translate(.1rem, -.35rem);
+                -webkit-transform: translate(.1rem, -.35rem);
+                box-shadow: 0 0 .1rem .01rem rgba(236, 29, 36, .15);
+              }
+              +span{
+                line-height: .18rem;
+                font-size: .1rem;
+                margin: .1rem auto 0;
+                +span{
+                  line-height: .2rem;
+                  font-size: .13rem;
+                  display: block;
+                }
+              }
+            }
+            >span{
+              width: 100%;
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
           }
         }
       }
     }
   }
-  .projectList{
-    margin: .1rem .1rem 0;
-    li{
-      width: 100%;
-      position: relative;
-      height: 0;
-      padding-bottom: 30%;
-      background: #eee;
-      overflow: hidden;
-      margin: .08rem auto 0;
-    }
-  }
   .newsList{
-    margin: .15rem .2rem .2rem;
-    &>li{
-      width: 100%;
-      display: block;
-      position: relative;
-      overflow: hidden;
-      border-top: .01rem solid #eee;
-      &:first-child{
-        border-top:none
+    >div{
+      margin: 0 .15rem .2rem;
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        ul{
+          li{
+            margin: .2rem auto 0;
+            align-items: center;
+            &:first-child{
+              margin: 0 auto;
+            }
+            .img{
+              width: 1.25rem;
+              height: .8rem;
+              border-radius: .1rem;
+              background: #eee;
+              position: relative;
+              overflow: hidden;
+            }
+            >div{
+              margin-left: .15rem;
+              span{
+                width: 100%;
+                display: block;
+                line-height: .24rem;
+                &:first-child{
+                  font-size: .14rem;
+                  font-weight: bold;
+                }
+                &:nth-child(2){
+                  font-size: .12rem;
+                  color: #9d9d9d;
+                }
+              }
+            }
+          }
+        }
       }
     }
   }

src/pages/user/mainPage/libraryIndex/index.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="mainPage">
+    <div>
+      <loadMore :on-infinite="onInfinite" :dataList="scrollData">
+        <div class="header flex-h">
+          <div class="flex-item flex-h">
+            <i class="iconfont icon-sousuo"></i>
+            <a
+              class="flex-item"
+              style="line-height: .3rem;color: #ccc;"
+              @click="tosearch"
+            >书本名称</a>
+          </div>
+          <a @click="showDialog = true">
+            <i class="iconfont icon-dingwei"></i>
+            <span>{{currentCaseName}}</span>
+          </a>
+        </div>
+        <nav class="nav">
+          <a
+            v-for="(item, index) in navList"
+            v-if="(navList || []).length < 9 || index<7"
+            :key="index"
+            @click="navClick(item)"
+          >
+            <img :src="item.BookTypeImg" alt>
+            <span>{{item.BookTypeName}}</span>
+          </a>
+          <a v-if="(navList || []).length > 8 " @click="moreNav()">
+            <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/icon_more.png" alt>
+            <span>更多</span>
+          </a>
+        </nav>
+        <div class="list">
+          <h1>精选推荐</h1>
+          <ul>
+            <li v-for="(item, index) in books.list" :key="index">
+              <libraryListItem
+                :data="item"
+                :status="mineBookStatus(item)"
+                @appointmentBook="appointmentBook"
+              ></libraryListItem>
+            </li>
+          </ul>
+        </div>
+      </loadMore>
+      <van-dialog v-model="showDialog" :show-confirm-button="false">
+        <div class="dialogContent">
+          <span class="title">选择案场</span>
+          <div>
+            <radio :data="cases" v-model="caseId"></radio>
+          </div>
+          <div class="btn">
+            <a @click="selectCaseId">确定</a>
+          </div>
+        </div>
+      </van-dialog>
+      <van-dialog v-model="showAppointmentDialog" :show-confirm-button="false">
+        <div class="dialogContent">
+          <span class="title">确认在线预约当前图书?</span>
+          <div>
+            <span style="color: #666;font-size:0.14rem;">在线预约需在{{reserveEndDate}}前前往案场借阅图书, 否则将取消预约资格</span>
+          </div>
+          <div class="btn">
+            <a @click="sureAppointmentBook">确定</a>
+            <a @click="showAppointmentDialog = false">取消</a>
+          </div>
+        </div>
+      </van-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import loadMore from '@/components/vue-load-more/index'
+import libraryListItem from '../../../../components/libraryListItem/index'
+import radio from '../../../../components/radio/index'
+import toolClass from '../../../../util/util'
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapAppActions } = createNamespacedHelpers('app')
+const { mapState: mapBookState, mapActions: mapBookActions } = createNamespacedHelpers('book')
+import { Toast } from '../../../../../node_modules/vant';
+import wxsdk from '../../../../util/share'
+import wx from 'weixin-jsapi'
+// const wx = require('weixin-js-sdk')
+export default {
+  name: '',
+  data () {
+    return {
+      showDialog: false,
+      showAppointmentDialog: false,
+      caseId: '',
+      currentCaseId: '',
+      currentCaseName: '',
+      cases: [],
+      indexSearchKey: '',
+      page: 1,
+      pagesize: 10,
+      scrollData: {
+        noFlag: false // 暂无更多数据显示
+      },
+      reserveBookId: '',
+      latitude: '',
+      longitude: '',
+    }
+  },
+  computed: {
+    ...mapState({
+      userInfo: x => x.userCenter.userInfo,
+      CaseList: x => x.app.CaseList
+    }),
+    ...mapBookState({
+      navList: x => x.types.list,
+      books: x => x.recommends,
+      mineBooks: x => x.minebooks,
+      bookcaseid: x => x.bookcaseid,
+    }),
+    reserveEndDate () {
+      return toolClass.calDate(7)
+    }
+  },
+  components: {
+    libraryListItem,
+    radio,
+    loadMore
+  },
+  created () {
+    if (!this.CaseList.length || this.CaseList === null) {
+      this.getCaseList().then((res) => {
+        (res.cases || []).map((item) => {
+          this.cases.push({
+            value: item.CaseName,
+            id: item.CaseId
+          })
+        })
+        this.detectLoc().then(() => this.init()).catch(() => this.init())
+      })
+    } else {
+      (this.CaseList || []).map((item) => {
+        this.cases.push({
+          value: item.CaseName,
+          id: item.CaseId
+        })
+      })
+      this.detectLoc().then(() => this.init()).catch(() => this.init())
+    }
+  },
+  methods: {
+    ...mapAppActions(['getCaseList']),
+    ...mapBookActions([
+      'getBookType',
+      'getRecommendBook',
+      'getMineBook',
+      'reserveBook',
+      'updateRecommendBookLeftNum',
+      'setBookCase',
+    ]),
+    tosearch () {
+      if (this.currentCaseId === '') {
+        Toast.fail({
+          duration: 2000, // 持续展示 toast
+          forbidClick: true, // 禁用背景点击
+          message: '请先选择案场'
+        })
+        return 
+      }
+      this.$router.push({name: 'booksSearch', query: {caseid: this.currentCaseId}})
+    },
+    detectLoc () {
+      return new Promise((resolve, reject) => {
+        let hasSol = false
+        const startDt = (new Date).getTime()
+
+        // const t = window.setInterval(() => {
+        //   const nw = (new Date).getTime()
+
+        //   if (hasSol) {
+        //     window.clearInterval(t)
+        //     return
+        //   }
+
+        //   // 500 毫秒还未定位则直接取消定位
+        //   if ((nw - startDt) >= 500) {
+        //     hasSol = true
+        //     window.clearInterval(t)
+
+        //     this.setDefaultCase(((this.CaseList || [])[0] || {}).CaseId)
+        //     reject('定位超时 ...')
+        //   }
+        // }, 100)
+
+        wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
+          title: '城的空间',
+          desc: '城的空间',
+          link: `${window.location.origin}${window.location.pathname}#/mainPage/indexPage`,
+          thu_image: `https://spaceofcheng.oss-cn-beijing.aliyuncs.com/indexlogo.jpg?x-oss-process=style/wxicon`
+        }).then(() => {
+          console.log(wx.getLocation)
+          if (hasSol) return
+          hasSol = true
+          const that = this
+
+          // 如果已经存在案场
+          if (!!that.bookcaseid) {
+            that.currentCaseId = that.bookcaseid
+            that.caseId = that.bookcaseid
+            that.currentCaseName = (that.CaseList.filter(x => x.CaseId === that.currentCaseId)[0] || {}).CaseName
+            resolve()
+          } else {
+            // 如果没有案场
+            wx.getLocation({
+              type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
+              success: function (res) {
+                that.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
+                that.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
+                console.log('获取到位置 ->', that.latitude, that.longitude)
+              },
+              complete: function (res) {
+                console.log(res)
+                console.log('获取位置后, 不管成功与否', that.latitude, that.longitude)
+
+                if(that.latitude && that.longitude ) {
+                  for (let i = 0; i < that.CaseList.length; i++) {
+                    let result = that.CaseList[i].Coordinate.split(",")
+                    let latitude2 = parseFloat(result[0])
+                    let longitude2 = parseFloat(result[1])
+                    if (that.toolClass.getGreatCircleDistance(that.latitude, that.longitude, latitude2, longitude2) < 500) {
+                      that.currentCaseId = that.CaseList[i].CaseId
+                    }
+                  }
+                }
+
+                if(!that.currentCaseId) {
+                  that.currentCaseId = ((that.CaseList || [])[0] || {}).CaseId
+                }
+
+                that.setDefaultCase(that.currentCaseId)
+                resolve()
+              },
+            })
+          }
+        }).catch((err) => {
+          console.log('微信初始化失败', err.message)
+          if (hasSol) return
+          hasSol = true
+
+          // 如果已经存在案场
+          if (!!this.bookcaseid) {
+            this.setDefaultCase(this.bookcaseid)
+          } else {
+            this.setDefaultCase(((that.CaseList || [])[0] || {}).CaseId)
+          }
+
+          reject()
+        })
+      })
+    },
+    setDefaultCase(caseID) {
+      this.setBookCase(caseID)
+      this.caseId = caseID
+      this.currentCaseId = caseID
+      this.currentCaseName = (this.CaseList.filter(x => x.CaseId === caseID)[0] || {}).CaseName
+    },
+    selectCaseId () { // 选择案场
+      if (this.currentCaseId !== this.caseId) {
+        this.currentCaseId = this.caseId
+        this.CaseList.map((item) => {
+          if (item.CaseId === this.currentCaseId) this.currentCaseName = item.CaseName
+        })
+        this.setBookCase(this.caseId)
+        this.page = 1
+        this.init()
+      }
+      this.showDialog = false
+    },
+    init () { // 初始化
+      this.getBookType({
+        caseid: this.currentCaseId,
+        page: 1,
+        pagesize: 10,
+      })
+      // this.getRecommendBook({
+      //   caseid: this.currentCaseId,
+      //   page: this.page,
+      //   pagesize: this.pagesize,
+      // })
+      this.$nextTick(() => {
+        this.onInfinite()
+      })
+    },
+    onInfinite () {
+      this.getMineBook({
+        page: 1,
+        pagesize: 1000,
+      })
+      let more = this.$el.querySelector('.load-more')
+      this.getRecommendBook({
+        caseid: this.currentCaseId,
+        page: this.page,
+        pagesize: this.pagesize,
+      }).then((res) => {
+        this.page++
+        res.list = res.list || []
+        if (res.list.length < res.pageSize) {
+          more.style.display = 'none'// 隐藏加载条
+          this.scrollData.noFlag = true
+        } else {
+          more.style.display = 'none'// 隐藏加载条
+        }
+      })
+    },
+    appointmentBook (id) { // 预约图书
+      this.reserveBookId = id
+      this.showAppointmentDialog = true
+    },
+    sureAppointmentBook () { // 确定预约图书
+      this.reserveBook({
+        bookid: this.reserveBookId,
+      }).then(() => {
+        this.updateRecommendBookLeftNum(this.reserveBookId)
+        this.getMineBook({
+          page: 1,
+          pagesize: 1000,
+        })
+      })
+      this.showAppointmentDialog = false
+    },
+    navClick (item) { // 点击nav
+      this.$router.push({ name: 'booksList', query: { type: item.BookTypeId, caseid: this.currentCaseId } })
+    },
+    moreNav () {
+      this.$router.push({ name: 'libraryNavList', query: { caseid: this.currentCaseId } })
+    },
+    mineBookStatus (item) {
+      return ((this.mineBooks.list || []).filter(x => x.BookId === item.BookId && (x.BorrowStatus == '4' || x.BorrowStatus == '1' || x.BorrowStatus == '0'))[0] || {}).BorrowStatus
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/user/mainPage/libraryIndex/page.scss

@@ -0,0 +1,83 @@
+.mainPage{
+  >div{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    .header{
+      border-bottom: 1px solid #f5f5f5;
+      align-items: center;
+      padding: .1rem 0;
+      >div{
+        margin: 0 .1rem 0 .2rem;
+        background: #f2f2f2;
+        i{
+          font-size: .15rem;
+          color: #ccc;
+          margin-left: .08rem;
+          line-height: .3rem;
+        }
+        >a{
+          margin-left: .05rem;
+        }
+      }
+      >a{
+        margin-right: .2rem;
+        font-size: 0;
+        white-space: nowrap;
+        >*{
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+    .nav{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      font-size: 0;
+      >a{
+        display: inline-block;
+        width: 25%;
+        text-align: center;
+        margin-top: .15rem;
+        img{
+          height: .48rem;
+        }
+        span{
+          width: 100%;
+          display: inline-block;
+          text-align: center;
+          font-size: .12rem;
+          line-height: .22rem;
+          margin: .08rem auto 0;
+        }
+      }
+    }
+    .list{
+      padding: 0 .16rem;
+      margin: .32rem auto 0;
+      >h1{
+        line-height: .28rem;
+        font-size: .17rem;
+      }
+      >ul{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        margin: .1rem auto .2rem;
+        >li{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          margin: .1rem auto 0;
+        }
+      }
+    }
+  }
+}

src/pages/user/mainPage/userCenter/index.vue

@@ -1,42 +1,69 @@
 <template>
   <div class="mainPage">
     <div>
-      <div class="userTop_view" >
+      <div class="userTop_view" :class="{'long':user.Phone}">
         <div class="gradient_bg"></div>
         <div class="zIndex_bg"></div>
-        <div class="userAvatar_Border">
+        <div class="user-card">
+          <div>
+            <img :src="headimgurl" alt width="100%" height="100%">
+            <div style="margin-top: 0.06rem;">
+              <div>
+                <div class="user-name" style="display:inline-block;vertical-align: middle;">{{user.Name}}</div>
+                <div class="vip" style="display:inline-block;vertical-align: middle;margin-left:0.05rem">
+                  <span>vip1</span>
+                  <img src="../../../../common/icon/Rectangle.png" alt="">
+                </div>
+              </div>
+              <div v-if="user.Phone">{{user.Phone}}</div>
+              <div v-else>未绑定</div>
+            </div>
+          </div>
+          <div v-if="user.Phone" class="code">
+            <div>卡号：{{user.Barcode}}</div>
+            <svg style="width:100%" id="barcode"></svg>
+          </div>
+          <div v-else class="bind">
+            <span>请绑定手机号后查看会员条形码</span>
+            <span @click="bindMobile">立即绑定</span>
+          </div>
+        </div>
+        <!-- <div class="userAvatar_Border">
           <div class="userAvatar">
-            <img :src='headimgurl' alt="" width="100%" height="100%">
+            <img :src="headimgurl" alt width="100%" height="100%">
           </div>
         </div>
         <div class="uesr-info">
           <div class="user-name">{{user.Name}}</div>
           <div class="mobile" v-if="user.Phone">{{user.Phone}}</div>
           <div class="mobile" v-else @click="bindMobile">绑定手机号</div>
-        </div>
+        </div>-->
       </div>
       <div class="vip-privilege flex-h">
         <div class="flex-item privilege-item" @click="toCoupons">
           <div class="img-box">
-            <img src="../../../../common/icon/userCenter-icon-1.png" width="100%" height="100%" alt="">
+            <img src="../../../../common/icon/userCenter-icon-1.png" width="100%" height="100%" alt>
           </div>
           <span>优惠券</span>
           <span>{{Nums.couponnum || 0}}张未使用</span>
         </div>
         <div class="flex-item privilege-item" @click="toCard">
           <div class="img-box">
-            <img src="../../../../common/icon/userCenter-icon-2.png" width="100%" height="100%" alt="">
+            <img src="../../../../common/icon/userCenter-icon-2.png" width="100%" height="100%" alt>
           </div>
           <span>卡券</span>
           <span>0张未使用</span>
         </div>
-        <div class="flex-item privilege-item" @click="toVipDetail">
-          <i class="iconfont icon-01" @click.stop="toVip"></i>
+        <div class="flex-item privilege-item">
+          <!-- <i class="iconfont icon-01" @click.stop="toVip"></i> -->
           <div class="img-box">
-            <img src="../../../../common/icon/userCenter-icon-3.png" width="100%" height="100%" alt="">
+            <img src="../../../../common/icon/pointer.png" width="100%" height="100%" alt>
           </div>
-          <span>VIP卡</span>
-          <span>￥{{Nums.vipbalance}} <i class="iconfont icon-jiantou-right" style="font-size: 0.1rem;"></i></span>
+          <span>积分</span>
+          <span>0
+            <!-- ￥{{Nums.vipbalance}} -->
+            <!-- <i class="iconfont icon-jiantou-right" style="font-size: 0.1rem;"></i> -->
+          </span>
         </div>
       </div>
 
@@ -57,19 +84,29 @@
           <span>抽奖记录</span>
           <i class="iconfont icon-jiantou-right"></i>
         </div>
+        <div class="menu-item flex-h" @click="toActiveList">
+          <span>活动记录</span>
+          <i class="iconfont icon-jiantou-right"></i>
+        </div>
+        <div class="menu-item flex-h" @click="toMyBook">
+          <span>我的借阅</span>
+          <i class="iconfont icon-jiantou-right"></i>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import JsBarcode from 'jsbarcode'
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapActions: actions } = createNamespacedHelpers('userCenter')
 export default {
   name: '',
   data () {
     return {
-      user: {}
+      user: {},
+      headimgurl: '',
     }
   },
   computed: {
@@ -87,8 +124,16 @@ export default {
       this.user = this.userInfo.customer
       if (this.user.AccountInfo) {
         this.AccountInfo = JSON.parse(this.user.AccountInfo)
-
-        
+        this.$nextTick(() => {
+          if (this.user.Phone) {
+            JsBarcode("#barcode", this.user.Barcode, {
+              lineColor: '#000000',
+              width:2.2,
+              height: 60,
+              displayValue: false
+            })
+          }
+        })
       }
       this.headimgurl = this.user.Headimgurl
     })
@@ -102,7 +147,7 @@ export default {
     toVip () {
       this.$router.push({ name: 'vip' })
     },
-    toVipDetail() {
+    toVipDetail () {
       this.$router.push({ name: 'vipDetail' })
     },
     toCard () {
@@ -121,6 +166,9 @@ export default {
       var url = window.location.pathname
       window.location.href = url.replace('user.html', 'bodyCheck.html') + '#/'
     },
+    toMyBook () {
+      this.$router.push({ name: 'borrowedRecord' })
+    },
     toLuckdraw () {
       // ^参数约定为97
       let userid = this.userInfo.customer.CustomerId
@@ -128,6 +176,9 @@ export default {
       num = num >= 1000 ? 999 : num
       userid = `${userid}${num}`
       window.location.href = `${window.location.origin}/game/luckdraw/#/lotteryList?from=${userid}`
+    },
+    toActiveList () {
+      this.$router.push({ name: 'activeList' })
     }
   }
 }

src/pages/user/mainPage/userCenter/page.scss

@@ -10,11 +10,83 @@
   justify-content: center;
   align-items: center;
 }
+.long{
+  margin-bottom: .65rem;
+
+}
+.user-card{
+  width: 3.35rem;
+  background:rgba(255,255,255,1);
+  box-shadow: 0px 0px .1rem 0px rgba(0,0,0,.1);
+  border-radius: 8px;
+  position: absolute;
+  top: .35rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 3;
+  padding: .2rem .2rem .05rem .2rem;
+  box-sizing: border-box;
+  >div:nth-of-type(1){
+    display: flex;
+    margin-bottom: .1rem;
+    >img{
+      width: .56rem;
+      height: .56rem;
+      margin-right: .1rem;
+      border-radius: 50%;
+    }
+    div{
+      color: #7D7D7D;
+      font-size: .14rem;
+    }
+    .user-name{
+      color: #000;
+      font-size: .18rem;
+    }
+    .vip{
+      width: .24rem;
+      position: relative;
+      span{
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-size: .09rem;
+        text-align: center;
+        width: 100%;
+        line-height: .22rem;
+        color: #fff;
+      }
+      img{
+        width: 100%;
+      }
+    }
+  }
+  .code{
+    text-align: center;
+    div{
+      color: #999999;
+      text-align: left;
+    }
+  }
+  .bind{
+    margin: .1rem;
+    span:nth-of-type(1){
+      color: #7D7D7D;
+      font-size: .14rem;
+    }
+    span:nth-of-type(2){
+      border:1px solid #FC6243;
+      padding: .02rem .1rem .03rem;
+      border-radius: .2rem;
+      color: #FC6243;
+      margin-left: .1rem;
+    }
+  }
+}
 
 .userTop_view {
   position: relative;
   height: 1.7rem;
-  margin-bottom: 1.3rem;
   .gradient_bg {
     position: absolute;
     width: 100%;
@@ -24,10 +96,10 @@
   }
   .zIndex_bg {
     position: absolute;
-    bottom: -.6rem;
+    bottom: -.8rem;
     left: 0;
     width: 120%;
-    height: .6rem;
+    height: .8rem;
     transform: rotate(351.5deg);
     transform-origin: bottom left;
     z-index: 3;
@@ -71,7 +143,7 @@
     .mobile{
       color:rgba(125,125,125,1);
       font-size: .2rem;
-      padding-top: 10px;
+      padding-top: .1rem;
       text-align: center;
     }
   }
@@ -81,9 +153,10 @@
   height: 1.2rem;
   margin: 0 .25rem;
   background:rgba(255,255,255,1);
-  box-shadow:0px 2px 12px 0px rgba(219,219,219,0.5);
   border-radius:8px;
   box-sizing: border-box;
+  z-index: 5;
+  position: relative;
   .privilege-item {
     display: flex;
     flex-flow: column nowrap;
@@ -97,8 +170,11 @@
       font-size: .18rem;
     }
     .img-box {
-      width: 0.24rem;
+      width: 0.2rem;
       height: 0.18rem;
+      img{
+        object-fit: contain;
+      }
     }
     span:nth-of-type(1){
       font-size: .14rem;
@@ -113,7 +189,7 @@
 }
 
 .userCenter-menu{
-  padding: 0.2rem 0.25rem;;
+  padding: 0 0.25rem 0.2rem;
   box-sizing: border-box;
   .menu-item{
     justify-content: space-between;

src/pages/user/majorProjectsDetail/index.vue

@@ -83,7 +83,8 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapActions: mapProjectActions, mapState: mapProjectState } = createNamespacedHelpers('majorProjects')
-const wx = require('weixin-js-sdk')
+import wx from 'weixin-jsapi'
+// const wx = require('weixin-js-sdk')
 
 export default {
   name: '',

src/pages/user/majorProjectsList/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="mainPage" v-if="showPage">
+    <div class="flex-h">
+      <div class="flex-item">
+        <div>
+          <ul>
+            <router-link
+              v-for="(item, index) in project"
+              :key="index"
+              class="flex-h"
+              tag="li"
+              :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }"
+            >
+              <a class="img">
+                <img :src="getImg(item.CmsCaseImgs)" class="cover" alt>
+              </a>
+              <router-link
+                tag="div"
+                class="flex-item"
+                :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }"
+              >
+                <div>
+                  <span>{{item.Name}}</span>
+                  <span>{{item.CaseAddress}}</span>
+                </div>
+              </router-link>
+            </router-link>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapIndexActions } = createNamespacedHelpers('index')
+import wx from 'weixin-jsapi'
+// const wx = require('weixin-js-sdk')
+import wxsdk from '@/util/share'
+export default {
+  name: '',
+  data () {
+    return {
+      showPage: false
+    }
+  },
+  computed: {
+    ...mapState({
+      project: x => x.index.project,
+      orgid: x => x.app.orgId
+    })
+  },
+  created () {
+    let that = this
+    wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
+      title: '城的空间',
+      desc: '城的空间',
+      link: `${window.location.origin}${window.location.pathname}#/mainPage/indexPage`,
+      thu_image: `https://spaceofcheng.oss-cn-beijing.aliyuncs.com/indexlogo.jpg?x-oss-process=style/wxicon`
+    }).then(() => {
+      wx.getLocation({
+        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
+        success: function (res) {
+          that.setLocation({ latitude1: res.latitude, longitude1: res.longitude })
+          that.showPage = true
+          that.init()
+        },
+        cancel: function () {
+          that.showPage = true
+          that.init()
+        },
+        fail: function () {
+          that.showPage = true
+          that.init()
+        }
+      })
+    })
+  },
+  methods: {
+    ...mapIndexActions(['getProjectList', 'setLocation']),
+    getImg (list) {
+      return list.filter(item => item.ImageType === 'cover')[0].CaseImageUrl
+    },
+    init () {
+      this.getProjectList({ orgid: this.orgid, locationid: 'index' }).then(() => {
+        this.showPage = true
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/user/majorProjectsList/page.scss

@@ -0,0 +1,55 @@
+.mainPage{
+  background: #fff;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  >div{
+    >div{
+      margin: 0 .15rem;
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        >ul{
+          margin: .15rem auto;
+          >li{
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            align-items: center;
+            padding: .03rem 0;
+            border-bottom: 1px solid #ededed;
+            img{
+              width: 1.14rem;
+              height: .9rem;
+              position: relative;
+              overflow: hidden;
+              border-radius: .05rem;
+            }
+            >div{
+              margin-left: .15rem;
+              >div{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                >span{
+                  width: 100%;
+                  display: block;
+                  line-height: .2rem;
+                  font-size: .15rem;
+                  font-weight: bolder;
+                  &:nth-child(2){
+                    font-size: .13rem;
+                    color: #999;
+                    font-weight: normal;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}