倒计时组件

src/components/basicTool/wo-timeout/index.vue

+<template>
+  <!-- 冬奥会倒计时组件 -->
+  <div
+    class="wo-timeout flex"
+    v-if="endDays > 0"
+    :style="{'margin': margin,}"
+    >
+    <div class="logo flex">
+      <div class="img">
+        <img
+          src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/9462ce53-792c-4607-ab7c-1875bed2d3ba.png"
+          alt=""
+        />
+      </div>
+      <div class="img">
+        <img
+          src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/92ba7c1a-2ab9-4ff9-9ed4-aba4e219ca58.png"
+          alt=""
+        />
+      </div>
+    </div>
+    <div class="endTime">距北京2022年冬奥会还有 {{ endDays }} 天</div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: "wo-timeout",
+  props: {
+    render: {
+      type: Boolean,
+      default: false,
+    },
+    datas: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {};
+  },
+  components: {},
+  computed: {
+    horizontalMargin() {
+      return this.datas.componentData.horizontalMargin;
+    },
+    verticalMargin() {
+      return this.datas.componentData.verticalMargin;
+    },
+    endTime() {
+      return this.datas.componentData.endTime;
+    },
+    endDays() {
+      let today = `${new Date().getFullYear()}/${
+        new Date().getMonth() + 1
+      }/${new Date().getDay()} 00:00:00`;
+      let ts = new Date(this.endTime).getTime() - new Date(today).getTime(); //计算剩余的毫秒数
+      ts = parseInt(ts / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
+      return ts;
+    },
+    margin(){
+      return `${this.verticalMargin}px ${this.horizontalMargin}px`
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.wo-timeout {
+  background: linear-gradient(44deg, #ffffff 73%, rgba(77,215,252,0.8902) 100%);
+  height: 40px;
+  border-radius: 40px;
+  overflow: hidden;
+  padding: 0 16px;
+  align-items: center;
+  .logo {
+    align-items: center;
+    .img {
+      flex-shrink: 0;
+      width: 26px;
+      height: 29px;
+      background: #fff;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .img:not(:first-child) {
+      margin-left: 6px;
+    }
+  }
+  .endTime {
+    margin-left: 16px;
+    font-size: 14px;
+    color: #333;
+    font-weight: 500;
+    font-family: PingFangSC-Medium, PingFang SC;
+  }
+}
+</style>

src/components/mpvue-cropper.vue

+<template>
+<div>
+  <canvas
+      v-if="_canvasId"
+      :canvasId="_canvasId"
+      @touchstart="touchstart"
+      @touchmove="touchmove"
+      @touchend="touchend"
+      disable-scroll
+      :style="{ width: _width + 'px', height: _height + 'px', background: 'rgba(0, 0, 0, .8)' }">
+  </canvas>
+  <canvas
+    v-if="_targetId"
+    :canvas-id="_targetId"
+    disable-scroll
+    :style="{
+      position: 'fixed',
+      top: -_width * _pixelRatio + 'px',
+      left: -_height * _pixelRatio + 'px',
+      width: _width * _pixelRatio + 'px',
+      height: _height * _pixelRatio + 'px'
+    }">
+  </canvas>
+  <div @click="selectImg">选择图片</div>
+  <image :src="selectImgUrl" alt="" mode="widthFix" style="width:100px;"></image>
+</div>
+</template>
+
+<script>
+  import WeCropper from 'we-cropper'
+
+  export default {
+    name: 'mpvue-cropper',
+    props: {
+      option: {
+        type: Object
+      }
+    },
+    data () {
+      return {
+        _wecropper: null,
+        selectImgUrl:'',
+      }
+    },
+    computed: {
+      _canvasId () {
+        return this.option.id
+      },
+      _targetId () {
+        return this.option.targetId
+      },
+      _width () {
+        return this.option.width
+      },
+      _height () {
+        return this.option.height
+      },
+      _pixelRatio () {
+        return this.option.pixelRatio
+      }
+    },
+    methods: {
+      touchstart ($event) {
+        this._wecropper.touchStart($event.mp)
+      },
+      touchmove ($event) {
+        this._wecropper.touchMove($event.mp)
+      },
+      touchend ($event) {
+        this._wecropper.touchEnd($event.mp)
+      },
+      pushOrigin (src) {
+        this._wecropper.pushOrign(src)
+      },
+      updateCanvas () {
+        this._wecropper.updateCanvas()
+      },
+      getCropperBase64 (fn) {
+        return this._wecropper.getCropperBase64(fn)
+      },
+      getCropperImage (opt, fn) {
+        return this._wecropper.getCropperImage(opt, fn)
+      },
+      init () {
+        this._wecropper = new WeCropper(Object.assign(this.option, {
+          id: this._canvasId,
+          targetId: this._targetId,
+          pixelRatio: this._pixelRatio
+        }))
+        .on('ready', (...args) => {
+          this.$emit('ready', ...args)
+        })
+        .on('beforeImageLoad', (...args) => {
+          this.$emit('beforeImageLoad', ...args)
+        })
+        .on('imageLoad', (...args) => {
+          this.$emit('imageLoad', ...args)
+        })
+        .on('beforeDraw', (...args) => {
+          this.$emit('beforeDraw', ...args)
+        })
+      },
+      selectImg(){
+        this._wecropper.getCropperImage().then(path=>{
+          this.selectImgUrl = path;
+          console.log(path,'---path')
+        })
+      }
+    },
+    onLoad () {
+      if (!this.option) {
+        return console.warn('[mpvue-cropper] 请传入option参数\n参数配置见文档：https://we-plugin.github.io/we-cropper/#/api')
+      }
+      this.init()
+    }
+  }
+</script>
\ No newline at end of file