ytj

package.json

@@ -19,6 +19,9 @@
     "@vue/eslint-config-prettier": "^3.0.1",
     "axios": "^0.18.0",
     "better-scroll": "^1.12.6",
+    "canvas2image": "^1.0.5",
+    "html2canvas": "^1.0.0-alpha.12",
+    "jQuery": "^1.7.4",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
     "node-sass": "^4.9.3",

public/index.html

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

src/components/preview/preview.vue

@@ -0,0 +1,102 @@
+<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" v-show="mainIndex !== 1"></div>
+      <div class="swiper-cover" v-show="mainIndex === 1">封面</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/pages/user/activeList/activeList.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="content">
+    <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;
+  .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;
+    }
+  }
+}
+</style>

src/pages/user/calendar/calendar.vue

@@ -0,0 +1,117 @@
+<template>
+  <div style="padding-bottom:.6rem;">
+    <div class="top">
+      <img :src="topImg" alt>
+    </div>
+    <div class="middle">
+      <p>云台天境定制专属你的台历</p>
+      <span>时间: 2018年12月12-21日</span>
+      <span>地点: 宁区秣陵街道创新东路2号银城蓝溪郡营销中心</span>
+    </div>
+    <div class="bottom">
+      <p class="title">活动详情</p>
+      <div>相关活动介绍参与活动需出示“城的空间”官微报名截图并支付198元现金（现金需在活动现场支付）</div>
+      <div>以上礼品需成交方可享受，成交指签订车位销售合同/商品房现售合同，并支付全部价款或支付首付款且办理完毕贷款手续，开发商承诺客户交纳的198元，我司无条件退还，活动名额仅限10人，先到先得。</div>
+      <div>活动电话：025-86426677</div>
+      <div>服务案场：银城蓝溪郡</div>
+      <div>地址：江宁区秣陵街道创新东路2号</div>
+      <div>*活动最终解释权归银城蓝溪郡开发商所有</div>
+    </div>
+    <div class="btn">
+      <div v-if="state === 1" @click="toCheckModel">立即参与</div>
+      <div v-if="state === 2" class="disable">已参与</div>
+      <div v-if="state === 3" class="disable">活动已结束</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapActions: mapMakingActions } = createNamespacedHelpers('making')
+import topImg from '@/common/icon/topImg.png'
+export default {
+  data () {
+    return {
+      topImg,
+      state: 1
+    }
+  },
+  created () {
+    this.getCalendarCustomer().then((res) => {
+      if (res) {
+        this.state = 2
+      } else {
+        let stringTime = "2018-12-22 00:00:00"
+        let timestamp = Date.parse(new Date(stringTime))
+        let now = new Date().getTime()
+        if (timestamp >= now) {
+          this.state = 1
+        } else {
+          this.state = 3
+        }
+      }
+    })
+  },
+  methods: {
+    ...mapMakingActions(['getCalendarCustomer']),
+    toCheckModel () {
+      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;
+  p {
+    font-size: 0.16rem;
+    padding-bottom: 0.05rem;
+    font-weight: bold;
+  }
+  div{
+    padding-bottom: .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,88 @@
+<template>
+  <div class="content">
+    <div @click="checkModel(1)">
+      <img :src="coverBlack">
+      <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">
+      <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%;
+    }
+    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,537 @@
+<template>
+  <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">
+        <img
+          :style="item.styleCut"
+          v-if="!item.CustomerImg && item.defaultBg"
+          :src="item.defaultBg"
+        >
+        <img :style="item.styleCut" v-if="item.CustomerImg" :src="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>
+    </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 :style="item.style" v-if="item.CustomerImg" :src="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" v-show="mainIndex !== 1"></div>
+      <div class="swiper-cover" v-show="mainIndex === 1">封面</div>
+    </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>
+      <van-field v-model="email" placeholder="接收电子版" style="border-radius:5px;"/>
+    </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>
+</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: 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
+          }
+        }
+      },
+      email: ''
+    }
+  },
+  components: {
+    swiper,
+    swiperSlide
+  },
+  computed: {
+    MySwiper () {
+      return this.$refs.mySwiper.swiper
+    },
+    ...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
+    }
+  },
+  methods: {
+    ...mapMakingActions(['setBanner', 'calendar']),
+    upload (url) {
+      this.banner[this.mainIndex - 1].CustomerImg = url
+      this.setBanner({ type: this.$route.query.type, data: JSON.parse(JSON.stringify(this.banner)) })
+      console.log(this.banner)
+      let cutDoms = document.getElementsByClassName('cutDom')[0]
+      this.convert2canvas(cutDoms, this.mainIndex - 1).then(() => {
+        this.isLoading = false
+      }).catch(() => {
+        this.isLoading = false
+      })
+    },
+    onRead (file) {
+      this.isLoading = true
+      this.toolClass.upload(file).then((res) => {
+        this.upload(res.result.url)
+      }).catch(() => {
+        this.isLoading = false
+      })
+    },
+    changeOld () {
+      this.isLoading = true
+      this.banner[this.mainIndex - 1].CustomerImg = ''
+      this.setBanner({ type: this.$route.query.type, data: JSON.parse(JSON.stringify(this.banner)) })
+      setTimeout(() => {
+        let cutDoms = document.getElementsByClassName('cutDom')[0]
+        this.convert2canvas(cutDoms, this.mainIndex - 1).then(() => {
+          this.isLoading = false
+        }).catch(() => {
+          this.isLoading = false
+        })
+      }, 100)
+    },
+    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']
+      });
+      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.push({ name: 'customizationList' })
+      })
+    },
+    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)
+          }
+          console.log(file)
+          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()
+          })
+        }).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;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.swiper-pagination-current {
+  color: #fc6243;
+}
+</style>
+
+
+<style lang="scss" scoped>
+.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;
+  }
+}
+.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.5rem 0.2rem;
+  > div {
+    flex: 1;
+    text-align: center;
+    height: 0.68rem;
+    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.6rem;
+  }
+}
+.btn {
+  margin-top: 0.3rem;
+  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/customization/customizationDetail.vue

@@ -0,0 +1,186 @@
+<template>
+  <div v-if="showPage">
+    <div class="top">
+      <img :src="topImg">
+      <div>
+        <div class="list">
+          <img :src='cover'>
+          <div>
+            <div>云台天境台历定制</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"
+        >
+      </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>联系我们: 400-2435 3756</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import cover from '@/common/icon/heise.png'
+import topImg from '@/common/icon/topImg.png'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapCustomizationState, mapActions: mapCustomizationActions } = createNamespacedHelpers('customization')
+export default {
+  data () {
+    return {
+      topImg,
+      cover,
+      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
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+  .text {
+    padding-bottom: 0.15rem;
+  }
+  img {
+    width: 1.65rem;
+    margin: 20px;
+  }
+}
+.bottom {
+  .pic-list {
+    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;
+}
+</style>

src/pages/user/customization/customizationList.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="content" v-if="showPage">
+    <div
+      class="list"
+      v-for="(item,index) in list"
+      :key="index"
+      @click="toDetail(item.CustomerCalendarId)"
+    >
+      <img :src="cover">
+      <div>
+        <div>云台天境台历定制</div>
+        <div>主办方: {{item.CaseName}}</div>
+        <div>参与时间: {{toolClass.dateFormat(item.CreateDate)}}</div>
+      </div>
+      <span>{{item.MakeStatus === 'making' ? '制作中' : '制作完成'}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import cover from '@/common/icon/heise.png'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapCustomizationState, mapActions: mapCustomizationActions } = createNamespacedHelpers('customization')
+export default {
+  data () {
+    return {
+      showPage: false,
+      cover
+    }
+  },
+  created () {
+    this.getList().then(() => {
+      this.showPage = true
+    })
+  },
+  computed: {
+    ...mapCustomizationState({
+      list: item => item.list
+    })
+  },
+  methods: {
+    ...mapCustomizationActions(['getList']),
+    toDetail (id) {
+      this.$router.push({ name: 'customizationDetail', query: { id: id } })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 0.2rem 0.16rem;
+  .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;
+      }
+      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/mainPage/userCenter/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="mainPage">
     <div>
-      <div class="userTop_view" >
+      <div class="userTop_view">
         <div class="gradient_bg"></div>
         <div class="zIndex_bg"></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">
@@ -18,14 +18,14 @@
       <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>
@@ -33,10 +33,13 @@
         <div class="flex-item privilege-item" @click="toVipDetail">
           <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/userCenter-icon-3.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>
+            ￥{{Nums.vipbalance}}
+            <i class="iconfont icon-jiantou-right" style="font-size: 0.1rem;"></i>
+          </span>
         </div>
       </div>
 
@@ -57,6 +60,10 @@
           <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>
     </div>
   </div>
@@ -88,7 +95,7 @@ export default {
       if (this.user.AccountInfo) {
         this.AccountInfo = JSON.parse(this.user.AccountInfo)
 
-        
+
       }
       this.headimgurl = this.user.Headimgurl
     })
@@ -102,7 +109,7 @@ export default {
     toVip () {
       this.$router.push({ name: 'vip' })
     },
-    toVipDetail() {
+    toVipDetail () {
       this.$router.push({ name: 'vipDetail' })
     },
     toCard () {
@@ -128,6 +135,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/router.js

@@ -26,6 +26,13 @@ import receive from './receive/index' // 领取页面
 import receiveResults from './receiveResults/index' // 领取结果页面
 import receiveChannel from './receiveChannel/index' // 渠道领取页面
 import rush from './rush/index' // 抢购
+import calendar from './calendar/calendar' // 台历活动页
+import activeList from './activeList/activeList' // 活动列表
+import customizationDetail from './customization/customizationDetail' // 定制详情
+import customizationList from './customization/customizationList' // 定制列表
+import checkModel from './calendar/checkModel' // 台历模板选择
+import making from './calendar/making' // 台历制作
+import preview from './calendar/preview' // 台历预览
 
 Vue.use(Router)
 
@@ -162,6 +169,34 @@ const router = new Router({
     path: '/rush',
     name: 'rush',
     component: rush
+  }, { // 台历活动页
+    path: '/calendar',
+    name: 'calendar',
+    component: calendar
+  }, { // 活动列表
+    path: '/activeList',
+    name: 'activeList',
+    component: activeList
+  }, { // 定制详情
+    path: '/customizationDetail',
+    name: 'customizationDetail',
+    component: customizationDetail
+  }, { // 定制列表
+    path: '/customizationList',
+    name: 'customizationList',
+    component: customizationList
+  }, { // 台历模板选择
+    path: '/checkModel',
+    name: 'checkModel',
+    component: checkModel
+  }, { // 台历制作
+    path: '/making',
+    name: 'making',
+    component: making
+  }, { // 台历预览
+    path: '/preview',
+    name: 'preview',
+    component: preview
   }],
   linkActiveClass: 'active',
 })

src/store/customization/index.js

@@ -0,0 +1,52 @@
+import Ajax from '../../util/ajax'
+import api from '../../util/api'
+
+// 请求数据
+export default {
+  namespaced: true,
+  state: {
+    list: [],
+    detail: {}
+  },
+  mutations: {
+    setList (state, data) {
+      state.list = data.list || []
+    },
+    setDetail (state, data) {
+      let cover = data.Imgs.splice(0, 1)
+      state.detail = data || {}
+      state.detail.cover = cover[0]
+    }
+  },
+  actions: {
+    getList (context) {
+      return new Promise((resolve, reject) => {
+        Ajax({
+          ...api.calendar.getCalendarList,
+          queryData: {
+            page: 1,
+            pagesize: 10000
+          }
+        }).then(res => {
+          context.commit('setList', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getDetail (context, data) {
+      return new Promise((resolve, reject) => {
+        Ajax({
+          ...api.calendar.getCalendarDetail,
+          urlData: { ...data }
+        }).then(res => {
+          context.commit('setDetail', res)
+          resolve()
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+  }
+}

src/store/index.js

@@ -28,6 +28,8 @@ export const modules = {
   vip: () => require('./vip/index').default,
   remark: () => require('./remark/index').default,
   rush: () => require('./rush/index').default,
+  making: () => require('./making/index').default,
+  customization: () => require('./customization/index').default,
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/making/index.js

@@ -0,0 +1,350 @@
+import Ajax from '../../util/ajax'
+import api from '../../util/api'
+import b1bg from '@/common/icon/b1-.jpg'
+import r1bg from '@/common/icon/r1-.jpg'
+import b1 from '@/common/icon/b1.jpg'
+import b2bg from '@/common/icon/b2-.jpg'
+import r2bg from '@/common/icon/r2-.jpg'
+import b2 from '@/common/icon/b2.jpg'
+import b3bg from '@/common/icon/b3-.jpg'
+import r3bg from '@/common/icon/r3-.jpg'
+import b3 from '@/common/icon/b3.jpg'
+import b4bg from '@/common/icon/b4-.jpg'
+import r4bg from '@/common/icon/r4-.jpg'
+import b4 from '@/common/icon/b4.jpg'
+import b5bg from '@/common/icon/b5-.jpg'
+import r5bg from '@/common/icon/r5-.jpg'
+import b5 from '@/common/icon/b5.jpg'
+import b6bg from '@/common/icon/b6-.png'
+import r6bg from '@/common/icon/r6-.jpg'
+import b6 from '@/common/icon/b6.jpg'
+import b7bg from '@/common/icon/b7-.jpg'
+import r7bg from '@/common/icon/r7-.jpg'
+import b7 from '@/common/icon/b7.jpg'
+import b8bg from '@/common/icon/b8-.jpg'
+import r8bg from '@/common/icon/r8-.jpg'
+import b8 from '@/common/icon/b8.jpg'
+import b9bg from '@/common/icon/b9-.jpg'
+import r9bg from '@/common/icon/r9-.jpg'
+import b9 from '@/common/icon/b9.jpg'
+import b10bg from '@/common/icon/b10-.jpg'
+import r10bg from '@/common/icon/r10-.jpg'
+import b10 from '@/common/icon/b10.jpg'
+import b11bg from '@/common/icon/b11-.jpg'
+import r11bg from '@/common/icon/r11-.jpg'
+import b11 from '@/common/icon/b11.jpg'
+import b12bg from '@/common/icon/b12-.jpg'
+import r12bg from '@/common/icon/r12-.jpg'
+import b12 from '@/common/icon/b12.jpg'
+import coverBlack from '@/common/icon/coverBlack.jpg'
+import coverRed from '@/common/icon/coverRed.jpg'
+
+// 请求数据
+export default {
+  namespaced: true,
+  state: {
+    bannerBlack: [
+      {
+        bgImg: coverBlack,
+        defaultBg: '',
+        CalendarImg: coverBlack,
+        CustomerImg: '',
+        ImgName: '封面',
+        Sort: 1,
+        style: ''
+      },
+      {
+        bgImg: b1bg,
+        defaultBg: b1,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546637',
+        CustomerImg: '',
+        ImgName: '1月',
+        Sort: 2,
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.25rem;left:50%;transform:translateX(-50%);object-fit: cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.95cm;left: .9cm;`
+      },
+      {
+        bgImg: b2bg,
+        defaultBg: b2,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543547849',
+        CustomerImg: '',
+        ImgName: '2月',
+        Sort: 3,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;object-fit: cover;`
+      },
+      {
+        bgImg: b3bg,
+        defaultBg: b3,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546638',
+        CustomerImg: '',
+        ImgName: '3月',
+        Sort: 4,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;right:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;right: 1.15cm;object-fit: cover;`
+      },
+      {
+        bgImg: b4bg,
+        defaultBg: b4,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543547851',
+        CustomerImg: '',
+        ImgName: '4月',
+        Sort: 5,
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50.5%);object-fit: cover;',
+        styleCut: `width: 11.1cm;height: 7.3cm;position: absolute;top: 1.9cm;left: .9cm;object-fit: cover;`
+      },
+      {
+        bgImg: b5bg,
+        defaultBg: b5,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546640',
+        CustomerImg: '',
+        ImgName: '5月',
+        Sort: 6,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;object-fit: cover;`
+      },
+      {
+        bgImg: b6bg,
+        defaultBg: b6,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546642',
+        CustomerImg: '',
+        ImgName: '6月',
+        Sort: 7,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.24rem;right:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.87cm;right: 1.15cm;object-fit: cover;`
+      },
+      {
+        bgImg: b7bg,
+        defaultBg: b7,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546643',
+        CustomerImg: '',
+        ImgName: '7月',
+        Sort: 8,
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit: cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;object-fit: cover;`
+      },
+      {
+        bgImg: b8bg,
+        defaultBg: b8,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546644',
+        CustomerImg: '',
+        ImgName: '8月',
+        Sort: 9,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.17rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.23cm;object-fit: cover;`
+      },
+      {
+        bgImg: b9bg,
+        defaultBg: b9,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546645',
+        CustomerImg: '',
+        ImgName: '9月',
+        Sort: 10,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.58cm;right: 1.15cm;object-fit: cover;`
+      },
+      {
+        bgImg: b10bg,
+        defaultBg: b10,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546646',
+        CustomerImg: '',
+        ImgName: '10月',
+        Sort: 11,
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit: cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;object-fit: cover;`
+      },
+      {
+        bgImg: b11bg,
+        defaultBg: b11,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546647',
+        CustomerImg: '',
+        ImgName: '11月',
+        Sort: 12,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.15cm;object-fit: cover;`
+      },
+      {
+        bgImg: b12bg,
+        defaultBg: b12,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543546648',
+        CustomerImg: '',
+        ImgName: '12月',
+        Sort: 13,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.56cm;right: 1.15cm;object-fit: cover;`
+      }
+    ],
+    bannerRed: [
+      {
+        bgImg: coverRed,
+        defaultBg: '',
+        CalendarImg: coverRed,
+        CustomerImg: '',
+        ImgName: '封面',
+        Sort: 1,
+        style: ''
+      },
+      {
+        bgImg: r1bg,
+        defaultBg: b1,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543557398',
+        CustomerImg: '',
+        ImgName: '1月',
+        Sort: 2,
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.25rem;left:50%;transform:translateX(-50%);object-fit: cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.95cm;left: .9cm;object-fit: cover;`
+      },
+      {
+        bgImg: r2bg,
+        defaultBg: b2,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543556811',
+        CustomerImg: '',
+        ImgName: '2月',
+        Sort: 3,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;object-fit: cover;`
+      },
+      {
+        bgImg: r3bg,
+        defaultBg: b3,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543557399',
+        CustomerImg: '',
+        ImgName: '3月',
+        Sort: 4,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;right:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;right: 1.15cm;object-fit: cover;`
+      },
+      {
+        bgImg: r4bg,
+        defaultBg: b4,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543557400',
+        CustomerImg: '',
+        ImgName: '4月',
+        Sort: 5,
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50.5%);object-fit: cover;',
+        styleCut: `width: 11.1cm;height: 7.3cm;position: absolute;top: 1.9cm;left: .9cm;object-fit: cover;`
+      },
+      {
+        bgImg: r5bg,
+        defaultBg: b5,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543556813',
+        CustomerImg: '',
+        ImgName: '5月',
+        Sort: 6,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.23rem;left:0.15rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.8cm;left: 1.07cm;object-fit: cover;`
+      },
+      {
+        bgImg: r6bg,
+        defaultBg: b6,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543556814',
+        CustomerImg: '',
+        ImgName: '6月',
+        Sort: 7,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.24rem;right:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.87cm;right: 1.15cm;object-fit: cover;`
+      },
+      {
+        bgImg: r7bg,
+        defaultBg: b7,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543560521',
+        CustomerImg: '',
+        ImgName: '7月',
+        Sort: 8,
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit: cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;object-fit: cover;`
+      },
+      {
+        bgImg: r8bg,
+        defaultBg: b8,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543556815',
+        CustomerImg: '',
+        ImgName: '8月',
+        Sort: 9,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.17rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.23cm;object-fit: cover;`
+      },
+      {
+        bgImg: r9bg,
+        defaultBg: b9,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543557403',
+        CustomerImg: '',
+        ImgName: '9月',
+        Sort: 10,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.6cm;right: 1.15cm;object-fit: cover;`
+      },
+      {
+        bgImg: r10bg,
+        defaultBg: b10,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543556816',
+        CustomerImg: '',
+        ImgName: '10月',
+        Sort: 11,
+        style: 'width:1.44rem;height:.94rem;position:absolute;top:.24rem;left:50%;transform:translateX(-50%);object-fit: cover;',
+        styleCut: `width: 11.2cm;height: 7.3cm;position: absolute;top: 1.88cm;left: .9cm;object-fit: cover;`
+      },
+      {
+        bgImg: r11bg,
+        defaultBg: b11,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543556817',
+        CustomerImg: '',
+        ImgName: '11月',
+        Sort: 12,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;left:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.57cm;left: 1.15cm;object-fit: cover;`
+      },
+      {
+        bgImg: r12bg,
+        defaultBg: b12,
+        CalendarImg: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/blob1543556818',
+        CustomerImg: '',
+        ImgName: '12月',
+        Sort: 13,
+        style: 'width:1.01rem;height:1.18rem;position:absolute;top:.2rem;right:0.16rem;object-fit: cover;',
+        styleCut: `width: 7.83cm;height: 9.16cm;position: absolute;top: 1.56cm;right: 1.15cm;object-fit: cover;`
+      }
+    ]
+  },
+  mutations: {
+    upDateBanner (state, { type, data }) {
+      console.log(data)
+      if (type == 1) {
+        state.bannerBlack = data || []
+      } else {
+        state.bannerRed = data || []
+      }
+    },
+    upDateWindowLoad (state, data) {
+      state.windowLoad = data
+    }
+  },
+  actions: {
+    setBanner (context, { type, data }) {
+      context.commit('upDateBanner', { type, data })
+    },
+    calendar (context, data) {
+      return new Promise((resolve, reject) => {
+        Ajax({
+          ...api.calendar.calendar,
+          data: data
+        }).then(res => {
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getCalendarCustomer () {
+      return new Promise((resolve, reject) => {
+        Ajax({
+          ...api.calendar.getCalendarCustomer
+        }).then(res => {
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    }
+  }
+}

src/util/api.js

@@ -2,8 +2,15 @@
 const baseUrl = '/api'
 const wechat = '/wechat/:org'
 const guest = '/guest/:org'
+const common = '/common/:org'
 
 const $api = {
+  file: {
+    image: { // 图片上传
+      method: 'post',
+      url: `${baseUrl}${common}/file`
+    }
+  },
   index: { // 首页
     location: { // 获取5A
       method: 'get',
@@ -291,14 +298,32 @@ const $api = {
       method: 'get',
       url: `${baseUrl}${wechat}/flashbuy/newcustomer`
     },
-    AddNewFlashBuyCustomer: { 
+    AddNewFlashBuyCustomer: {
       method: 'post',
       url: `${baseUrl}${wechat}/flashbuy/customer/:flashBuyId`
     },
-    UpdateFlashBuyCustomer: { 
+    UpdateFlashBuyCustomer: {
       method: 'put',
       url: `${baseUrl}${wechat}/flashbuy/customer/:flashBuyId`
     }
+  },
+  calendar: {
+    calendar: {
+      method: 'post',
+      url: `${baseUrl}${wechat}/calendar`
+    },
+    getCalendarList: {
+      method: 'get',
+      url: `${baseUrl}${wechat}/calendar`
+    },
+    getCalendarDetail: {
+      method: 'get',
+      url: `${baseUrl}${wechat}/calendar/:calendarId`
+    },
+    getCalendarCustomer: {
+      method: 'get',
+      url: `${baseUrl}${wechat}/calendar/isattend/customer`
+    }
   }
 }
 export default $api

src/util/canvas2image.js

@@ -0,0 +1,268 @@
+/**
+ * covert canvas to image
+ * and save the image file
+ */
+
+
+var Canvas2Image = function () {
+
+	// check if support sth.
+	var $support = function () {
+		var canvas = document.createElement('canvas'),
+			ctx = canvas.getContext('2d');
+
+		return {
+			canvas: !!ctx,
+			imageData: !!ctx.getImageData,
+			dataURL: !!canvas.toDataURL,
+			btoa: !!window.btoa
+		};
+	}();
+
+	var downloadMime = 'image/octet-stream';
+
+	function scaleCanvas (canvas, width, height) {
+		var w = canvas.width,
+			h = canvas.height;
+		if (width == undefined) {
+			width = w;
+		}
+		if (height == undefined) {
+			height = h;
+		}
+
+		var retCanvas = document.createElement('canvas');
+		var retCtx = retCanvas.getContext('2d');
+		retCanvas.width = width;
+		retCanvas.height = height;
+		retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
+		return retCanvas;
+	}
+
+	function getDataURL (canvas, type, width, height) {
+		canvas = scaleCanvas(canvas, width, height);
+		return canvas.toDataURL(type);
+	}
+
+	function saveFile (strData) {
+		document.location.href = strData;
+	}
+
+	function genImage (strData) {
+		var img = document.createElement('img');
+		img.src = strData;
+		return img;
+	}
+	function fixType (type) {
+		type = type.toLowerCase().replace(/jpg/i, 'jpeg');
+		var r = type.match(/png|jpeg|bmp|gif/)[0];
+		return 'image/' + r;
+	}
+	function encodeData (data) {
+		if (!window.btoa) { throw 'btoa undefined' }
+		var str = '';
+		if (typeof data == 'string') {
+			str = data;
+		} else {
+			for (var i = 0; i < data.length; i++) {
+				str += String.fromCharCode(data[i]);
+			}
+		}
+
+		return btoa(str);
+	}
+	function getImageData (canvas) {
+		var w = canvas.width,
+			h = canvas.height;
+		return canvas.getContext('2d').getImageData(0, 0, w, h);
+	}
+	function makeURI (strData, type) {
+		return 'data:' + type + ';base64,' + strData;
+	}
+
+
+	/**
+	 * create bitmap image
+	 * 按照规则生成图片响应头和响应体
+	 */
+	var genBitmapImage = function (oData) {
+
+		//
+		// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx
+		// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx
+		//
+
+		var biWidth = oData.width;
+		var biHeight = oData.height;
+		var biSizeImage = biWidth * biHeight * 3;
+		var bfSize = biSizeImage + 54; // total header size = 54 bytes
+
+		//
+		//  typedef struct tagBITMAPFILEHEADER {
+		//  	WORD bfType;
+		//  	DWORD bfSize;
+		//  	WORD bfReserved1;
+		//  	WORD bfReserved2;
+		//  	DWORD bfOffBits;
+		//  } BITMAPFILEHEADER;
+		//
+		var BITMAPFILEHEADER = [
+			// WORD bfType -- The file type signature; must be "BM"
+			0x42, 0x4D,
+			// DWORD bfSize -- The size, in bytes, of the bitmap file
+			bfSize & 0xff, bfSize >> 8 & 0xff, bfSize >> 16 & 0xff, bfSize >> 24 & 0xff,
+			// WORD bfReserved1 -- Reserved; must be zero
+			0, 0,
+			// WORD bfReserved2 -- Reserved; must be zero
+			0, 0,
+			// DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.
+			54, 0, 0, 0
+		];
+
+		//
+		//  typedef struct tagBITMAPINFOHEADER {
+		//  	DWORD biSize;
+		//  	LONG  biWidth;
+		//  	LONG  biHeight;
+		//  	WORD  biPlanes;
+		//  	WORD  biBitCount;
+		//  	DWORD biCompression;
+		//  	DWORD biSizeImage;
+		//  	LONG  biXPelsPerMeter;
+		//  	LONG  biYPelsPerMeter;
+		//  	DWORD biClrUsed;
+		//  	DWORD biClrImportant;
+		//  } BITMAPINFOHEADER, *PBITMAPINFOHEADER;
+		//
+		var BITMAPINFOHEADER = [
+			// DWORD biSize -- The number of bytes required by the structure
+			40, 0, 0, 0,
+			// LONG biWidth -- The width of the bitmap, in pixels
+			biWidth & 0xff, biWidth >> 8 & 0xff, biWidth >> 16 & 0xff, biWidth >> 24 & 0xff,
+			// LONG biHeight -- The height of the bitmap, in pixels
+			biHeight & 0xff, biHeight >> 8 & 0xff, biHeight >> 16 & 0xff, biHeight >> 24 & 0xff,
+			// WORD biPlanes -- The number of planes for the target device. This value must be set to 1
+			1, 0,
+			// WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap
+			// has a maximum of 2^24 colors (16777216, Truecolor)
+			24, 0,
+			// DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed
+			0, 0, 0, 0,
+			// DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmaps
+			biSizeImage & 0xff, biSizeImage >> 8 & 0xff, biSizeImage >> 16 & 0xff, biSizeImage >> 24 & 0xff,
+			// LONG biXPelsPerMeter, unused
+			0, 0, 0, 0,
+			// LONG biYPelsPerMeter, unused
+			0, 0, 0, 0,
+			// DWORD biClrUsed, the number of color indexes of palette, unused
+			0, 0, 0, 0,
+			// DWORD biClrImportant, unused
+			0, 0, 0, 0
+		];
+
+		var iPadding = (4 - ((biWidth * 3) % 4)) % 4;
+
+		var aImgData = oData.data;
+
+		var strPixelData = '';
+		var biWidth4 = biWidth << 2;
+		var y = biHeight;
+		var fromCharCode = String.fromCharCode;
+
+		do {
+			var iOffsetY = biWidth4 * (y - 1);
+			var strPixelRow = '';
+			for (var x = 0; x < biWidth; x++) {
+				var iOffsetX = x << 2;
+				strPixelRow += fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) +
+					fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) +
+					fromCharCode(aImgData[iOffsetY + iOffsetX]);
+			}
+
+			for (var c = 0; c < iPadding; c++) {
+				strPixelRow += String.fromCharCode(0);
+			}
+
+			strPixelData += strPixelRow;
+		} while (--y);
+
+		var strEncoded = encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) + encodeData(strPixelData);
+
+		return strEncoded;
+	};
+
+	/**
+	 * saveAsImage
+	 * @param canvasElement
+	 * @param {String} image type
+	 * @param {Number} [optional] png width
+	 * @param {Number} [optional] png height
+	 */
+	var saveAsImage = function (canvas, width, height, type) {
+		if ($support.canvas && $support.dataURL) {
+			if (typeof canvas == "string") { canvas = document.getElementById(canvas); }
+			if (type == undefined) { type = 'png'; }
+			type = fixType(type);
+			if (/bmp/.test(type)) {
+				var data = getImageData(scaleCanvas(canvas, width, height));
+				var strData = genBitmapImage(data);
+				saveFile(makeURI(strData, downloadMime));
+			} else {
+				var strData = getDataURL(canvas, type, width, height);
+				saveFile(strData.replace(type, downloadMime));
+			}
+		}
+	};
+
+	var convertToImage = function (canvas, width, height, type) {
+		if ($support.canvas && $support.dataURL) {
+			if (typeof canvas == "string") { canvas = document.getElementById(canvas); }
+			if (type == undefined) { type = 'png'; }
+			type = fixType(type);
+
+			if (/bmp/.test(type)) {
+				var data = getImageData(scaleCanvas(canvas, width, height));
+				var strData = genBitmapImage(data);
+				return genImage(makeURI(strData, 'image/bmp'));
+			} else {
+				var strData = getDataURL(canvas, type, width, height);
+				return genImage(strData);
+			}
+		}
+	};
+
+
+
+	return {
+		saveAsImage: saveAsImage,
+		saveAsPNG: function (canvas, width, height) {
+			return saveAsImage(canvas, width, height, 'png');
+		},
+		saveAsJPEG: function (canvas, width, height) {
+			return saveAsImage(canvas, width, height, 'jpeg');
+		},
+		saveAsGIF: function (canvas, width, height) {
+			return saveAsImage(canvas, width, height, 'gif');
+		},
+		saveAsBMP: function (canvas, width, height) {
+			return saveAsImage(canvas, width, height, 'bmp');
+		},
+
+		convertToImage: convertToImage,
+		convertToPNG: function (canvas, width, height) {
+			return convertToImage(canvas, width, height, 'png');
+		},
+		convertToJPEG: function (canvas, width, height) {
+			return convertToImage(canvas, width, height, 'jpeg');
+		},
+		convertToGIF: function (canvas, width, height) {
+			return convertToImage(canvas, width, height, 'gif');
+		},
+		convertToBMP: function (canvas, width, height) {
+			return convertToImage(canvas, width, height, 'bmp');
+		}
+	};
+
+};
+
+export default Canvas2Image()

src/util/util.js

@@ -1,3 +1,5 @@
+import Ajax from './ajax'
+import api from './api'
 import wechatConfig from '../config/index'
 const toolClass = {
   dateFormat: (timestamp, fmt) => {
@@ -61,6 +63,23 @@ const toolClass = {
     s = Math.round(s * 10000) / 10000.0
     console.log(s)
     return s
+  },
+  upload (item) {
+    return new Promise((resolve, reject) => {
+      Ajax({
+        ...api.file.image,
+        data: { file: item.file },
+      }).then((res) => {
+        let result = {
+          result: res
+        }
+        if (item.onSuccess) {
+          item.onSuccess(result, item.file)
+        }
+        // console.log(result)
+        resolve(result)
+      }).catch(reject)
+    })
   }
 }
 

vue.config.js

@@ -24,9 +24,9 @@ module.exports = {
       '/api': {
         // target: 'https://dp.huiju360.com.cn/hj_operations',
         // target: 'http://192.168.0.62:8080', // wf
-        target: 'http://192.168.0.102:8080', // hyq
+        // target: 'http://192.168.0.102:8080', // hyq
         // target: 'http://192.168.0.11', // ys
-        // target: 'http://dev.ycjcjy.com', // frp
+        target: 'http://dev.ycjcjy.com', // frp
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
         // pathRewrite: {
         //   '^/api': '/api-v2/api'