{"version":3,"file":"su-swiper.js","sources":["../../../../../../src/sheep/ui/su-swiper/su-swiper.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS1zd2lwZXIvc3Utc3dpcGVyLnZ1ZQ"],"sourcesContent":["<template>\r\n  <view>\r\n    <view class=\"ui-swiper\" :class=\"[props.mode, props.bg, props.ui]\">\r\n      <swiper\r\n        :circular=\"props.circular\"\r\n        :current=\"state.cur\"\r\n        :autoplay=\"props.autoplay && !state.videoPlaySataus\"\r\n        :interval=\"props.interval\"\r\n        :duration=\"props.duration\"\r\n        @transition=\"transition\"\r\n        @animationfinish=\"animationfinish\"\r\n        :style=\"customStyle\"\r\n        @change=\"swiperChange\"\r\n      >\r\n        <swiper-item\r\n          class=\"swiper-item\"\r\n          v-for=\"(item, index) in props.list\"\r\n          :key=\"index\"\r\n          :class=\"{ cur: state.cur == index }\"\r\n          @tap=\"onSwiperItem(item)\"\r\n        >\r\n          <view class=\"ui-swiper-main\">\r\n            <image\r\n              v-if=\"item.type === 'image'\"\r\n              class=\"swiper-image\"\r\n              :mode=\"props.imageMode\"\r\n              :src=\"item.src\"\r\n              width=\"100%\"\r\n              height=\"100%\"\r\n              @load=\"onImgLoad\"\r\n            ></image>\r\n            <su-video\r\n              v-else\r\n              :ref=\"(el) => (refs.videoRef[`video_${index}`] = el)\"\r\n              :poster=\"sheep.$url.cdn(item.poster)\"\r\n              :src=\"sheep.$url.cdn(item.src)\"\r\n              :index=\"index\"\r\n              :moveX=\"state.moveX\"\r\n              :initialTime=\"item.currentTime || 0\"\r\n              :height=\"seizeHeight\"\r\n              @videoTimeupdate=\"videoTimeupdate\"\r\n            ></su-video>\r\n          </view>\r\n        </swiper-item>\r\n      </swiper>\r\n      <template v-if=\"!state.videoPlaySataus\">\r\n        <view class=\"ui-swiper-dot\" :class=\"props.dotStyle\" v-if=\"props.dotStyle != 'tag'\">\r\n          <view\r\n            class=\"line-box\"\r\n            v-for=\"(item, index) in props.list\"\r\n            :key=\"index\"\r\n            :class=\"[state.cur == index ? 'cur' : '', props.dotCur]\"\r\n          ></view>\r\n        </view>\r\n        <view class=\"ui-swiper-dot\" :class=\"props.dotStyle\" v-if=\"props.dotStyle == 'tag'\">\r\n          <view\r\n            class=\"ui-tag radius-lg\"\r\n            :class=\"[props.dotCur]\"\r\n            style=\"padding: 0 10rpx; pointer-events: none\"\r\n          >\r\n            <view style=\"transform: scale(0.7)\">{{ state.cur + 1 }} / {{ props.list.length }}</view>\r\n          </view>\r\n        </view>\r\n      </template>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * 轮播组件\r\n *\r\n * @property {Boolean} circular = false  \t- 是否采用衔接滑动，即播放到末尾后重新回到开头\r\n * @property {Boolean} autoplay = true  \t- 是否自动切换\r\n * @property {Number} interval = 5000  \t\t- 自动切换时间间隔\r\n * @property {Number} duration = 500  \t\t- 滑动动画时长,app-nvue不支持\r\n * @property {Array} list = [] \t\t\t\t- 轮播数据\r\n * @property {String} ui = ''  \t\t\t\t- 样式class\r\n * @property {String} mode  \t\t\t\t- 模式\r\n * @property {String} dotStyle  \t\t\t- 指示点样式\r\n * @property {String} dotCur= 'ui-BG-Main' \t- 当前指示点样式,默认主题色\r\n * @property {String} bg  \t\t\t\t\t- 背景\r\n * @property {String} height = 300  \t\t- 组件高度\r\n * @property {String} imgHeight = 300   \t- 图片高度\r\n *\r\n * @example list = [{url:'跳转路径',urlType:'跳转方式',type:'轮播类型',src:'轮播内容地址',poster:'视频必传'}]\r\n */\r\n\r\nimport { reactive, computed } from 'vue'\r\nimport sheep from '@/sheep'\r\nimport { clone } from 'lodash-es'\r\n\r\n// 数据\r\nconst state = reactive({\r\n  imgHeight: 0,\r\n  cur: 0,\r\n  moveX: 0,\r\n  videoPlaySataus: false,\r\n  heightList: [],\r\n})\r\n\r\nconst refs = reactive({\r\n  videoRef: {},\r\n})\r\n\r\n// 接收参数\r\n\r\nconst props = defineProps({\r\n  circular: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  autoplay: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  interval: {\r\n    type: Number,\r\n    default: 3000,\r\n  },\r\n  duration: {\r\n    type: Number,\r\n    default: 500,\r\n  },\r\n  mode: {\r\n    type: String,\r\n    default: 'default',\r\n  },\r\n  imageMode: {\r\n    type: String,\r\n    default: 'scaleToFill',\r\n  },\r\n  list: {\r\n    type: Array,\r\n    default() {\r\n      return []\r\n    },\r\n  },\r\n  dotStyle: {\r\n    type: String,\r\n    default: 'long', // default long tag\r\n  },\r\n  dotCur: {\r\n    type: String,\r\n    default: 'ss-bg-opactity-block',\r\n  },\r\n  bg: {\r\n    type: String,\r\n    default: 'bg-none',\r\n  },\r\n  height: {\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n  imgHeight: {\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n  imgTopRadius: {\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n  imgBottomRadius: {\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n  isPreview: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  seizeHeight: {\r\n    type: Number,\r\n    default: 200,\r\n  },\r\n})\r\n\r\n// current 改变时会触发 change 事件\r\nconst swiperChange = (e) => {\r\n  if (e.detail.source !== 'touch' && e.detail.source !== 'autoplay') return\r\n  state.cur = e.detail.current\r\n  state.videoPlaySataus = false\r\n  if (props.list[state.cur].type === 'video') {\r\n    refs.videoRef[`video_${state.cur}`].pausePlay()\r\n  }\r\n}\r\n// 点击轮播组件\r\nconst onSwiperItem = (item) => {\r\n  if (item.type === 'video') {\r\n    state.videoPlaySataus = true\r\n  } else {\r\n    sheep.$router.go(item.url)\r\n    onPreview()\r\n  }\r\n}\r\n\r\nconst onPreview = () => {\r\n  if (!props.isPreview) return\r\n  const previewImage = clone(props.list)\r\n  previewImage.forEach((item, index) => {\r\n    if (item.type === 'video') {\r\n      previewImage.splice(index, 1)\r\n    }\r\n  })\r\n  uni.previewImage({\r\n    urls:\r\n      previewImage.length < 1\r\n        ? [props.src]\r\n        : previewImage.reduce((pre, cur) => {\r\n            pre.push(cur.src)\r\n            return pre\r\n          }, []),\r\n    current: state.cur,\r\n    // longPressActions: {\r\n    //   itemList: ['发送给朋友', '保存图片', '收藏'],\r\n    //   success: function (data) {\r\n    //     console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');\r\n    //   },\r\n    //   fail: function (err) {\r\n    //     console.log(err.errMsg);\r\n    //   },\r\n    // },\r\n  })\r\n}\r\n//\r\n\r\n// swiper-item 的位置发生改变时会触发 transition\r\nconst transition = (e) => {\r\n  // #ifdef APP-PLUS\r\n  state.moveX = e.detail.dx\r\n  // #endif\r\n}\r\n\r\n// 动画结束时会触发 animationfinish\r\nconst animationfinish = (e) => {\r\n  state.moveX = 0\r\n}\r\n\r\nconst videoTimeupdate = (e) => {\r\n  props.list[state.cur].currentTime = e.detail.currentTime\r\n}\r\n\r\n// 自动计算高度\r\nconst customStyle = computed(() => {\r\n  let height\r\n\r\n  // 固定高度情况\r\n  if (props.height !== 0) {\r\n    height = props.height\r\n  }\r\n\r\n  // 自动高度情况\r\n  if (props.height === 0) {\r\n    // 图片预加载占位高度\r\n    if (state.imgHeight !== 0) {\r\n      height = state.imgHeight\r\n    } else if (props.seizeHeight !== 0) {\r\n      height = props.seizeHeight\r\n    }\r\n  }\r\n\r\n  return {\r\n    height: height + 'rpx',\r\n  }\r\n})\r\n\r\n// 计算轮播图片最大高度\r\nfunction onImgLoad(e) {\r\n  if (props.height === 0) {\r\n    const newHeight = (e.detail.height / e.detail.width) * 750\r\n    if (state.imgHeight < newHeight) {\r\n      state.imgHeight = newHeight\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.ui-swiper {\r\n  position: relative;\r\n\r\n  .ui-swiper-main {\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  .ui-swiper-main .swiper-image {\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  .ui-swiper-dot {\r\n    position: absolute;\r\n    bottom: 20rpx;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 30rpx;\r\n\r\n    &.default .line-box {\r\n      position: relative;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 6px;\r\n      height: 6px;\r\n      margin: 0 10rpx;\r\n      border: 2px solid transparent;\r\n      border-radius: 50rpx;\r\n      opacity: 0.3;\r\n\r\n      &.cur {\r\n        width: 8px;\r\n        height: 8px;\r\n        border: 0px solid transparent;\r\n        opacity: 1;\r\n      }\r\n\r\n      &.cur::after {\r\n        width: 4px;\r\n        height: 4px;\r\n        content: '';\r\n        background-color: #fff;\r\n        border-radius: 50rpx;\r\n      }\r\n    }\r\n\r\n    &.long .line-box {\r\n      position: relative;\r\n      display: inline-block;\r\n      width: 6px;\r\n      height: 6px;\r\n      margin: 0 10rpx;\r\n      border-radius: 100rpx;\r\n      opacity: 0.3;\r\n\r\n      &.cur {\r\n        width: 24rpx;\r\n        opacity: 1;\r\n      }\r\n\r\n      &.cur::after {\r\n      }\r\n    }\r\n\r\n    &.line {\r\n      bottom: 20rpx;\r\n\r\n      .line-box {\r\n        position: relative;\r\n        display: inline-block;\r\n        width: 30px;\r\n        height: 3px;\r\n        opacity: 0.3;\r\n\r\n        &.cur {\r\n          opacity: 1;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.tag {\r\n      position: absolute;\r\n      right: 20rpx;\r\n      bottom: 20rpx;\r\n      justify-content: flex-end;\r\n    }\r\n  }\r\n\r\n  &.card {\r\n    .swiper-item {\r\n      left: 70rpx;\r\n      box-sizing: border-box;\r\n      width: 610rpx !important;\r\n      padding: 20rpx 0rpx 60rpx;\r\n      overflow: initial;\r\n    }\r\n\r\n    .swiper-item .ui-swiper-main {\r\n      position: relative;\r\n      display: block;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-size: cover;\r\n      transition: all 0.2s ease-in 0s;\r\n      transform: scale(0.9);\r\n\r\n      .swiper-image {\r\n        height: 100%;\r\n      }\r\n    }\r\n\r\n    .swiper-item .ui-swiper-main::before {\r\n      position: absolute;\r\n      top: 10rpx;\r\n      left: 10rpx;\r\n      z-index: -1;\r\n      display: block;\r\n      width: 100%;\r\n      height: 100%;\r\n      content: '';\r\n      background: inherit;\r\n      filter: blur(5px);\r\n      opacity: 0.3;\r\n      transform: scale(1, 1);\r\n      transform-origin: 0 0;\r\n    }\r\n\r\n    .swiper-item.cur .ui-swiper-main {\r\n      transition: all 0.2s ease-in 0s;\r\n      transform: scale(1);\r\n    }\r\n\r\n    .ui-swiper-dot.tag {\r\n      position: absolute;\r\n      right: 75rpx;\r\n      bottom: 85rpx;\r\n    }\r\n  }\r\n\r\n  &.hotelCard {\r\n    .swiper-item {\r\n      left: 30rpx;\r\n      box-sizing: border-box;\r\n      width: 650rpx !important;\r\n      padding: 0rpx 0rpx 50rpx;\r\n      overflow: initial;\r\n    }\r\n\r\n    .swiper-item .ui-swiper-main {\r\n      position: relative;\r\n      display: block;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-size: cover;\r\n      opacity: 0.8;\r\n      transition: all 0.2s ease-in 0s;\r\n      transform: scale(0.9);\r\n\r\n      .swiper-image {\r\n        width: 100%;\r\n        height: 400rpx;\r\n      }\r\n    }\r\n\r\n    .swiper-item .ui-swiper-main::before {\r\n      position: absolute;\r\n      top: 10rpx;\r\n      left: 10rpx;\r\n      z-index: -1;\r\n      display: block;\r\n      width: 100%;\r\n      height: 100%;\r\n      content: '';\r\n      background: inherit;\r\n      filter: blur(5px);\r\n      opacity: 0.3;\r\n      transform: scale(1, 1);\r\n      transform-origin: 0 0;\r\n    }\r\n\r\n    .swiper-item.cur .ui-swiper-main {\r\n      opacity: 1;\r\n      transition: all 0.2s ease-in 0s;\r\n      transform: scale(1);\r\n    }\r\n\r\n    .ui-swiper-dot {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  &.hotelDetail {\r\n    .swiper-item {\r\n      left: 30rpx;\r\n      box-sizing: border-box;\r\n      width: 690rpx !important;\r\n      padding: 20rpx 0rpx;\r\n      overflow: initial;\r\n    }\r\n\r\n    .swiper-item .ui-swiper-main {\r\n      position: relative;\r\n      display: block;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-size: cover;\r\n      transition: all 0.2s ease-in 0s;\r\n      transform: scale(0.96);\r\n\r\n      .swiper-image {\r\n        height: 100%;\r\n      }\r\n    }\r\n\r\n    .swiper-item.cur .ui-swiper-main {\r\n      transition: all 0.2s ease-in 0s;\r\n      transform: scale(0.96);\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-swiper/su-swiper.vue'\nwx.createComponent(Component)"],"names":["reactive","sheep","clone","uni","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA,UAAM,QAAQA,cAAAA,SAAS;AAAA,MACrB,WAAW;AAAA,MACX,KAAK;AAAA,MACL,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,YAAY,CAAE;AAAA,IAChB,CAAC;AAED,UAAM,OAAOA,cAAAA,SAAS;AAAA,MACpB,UAAU,CAAE;AAAA,IACd,CAAC;AAID,UAAM,QAAQ;AAsEd,UAAM,eAAe,CAAC,MAAM;AAC1B,UAAI,EAAE,OAAO,WAAW,WAAW,EAAE,OAAO,WAAW;AAAY;AACnE,YAAM,MAAM,EAAE,OAAO;AACrB,YAAM,kBAAkB;AACxB,UAAI,MAAM,KAAK,MAAM,GAAG,EAAE,SAAS,SAAS;AAC1C,aAAK,SAAS,SAAS,MAAM,GAAG,EAAE,EAAE,UAAW;AAAA,MAChD;AAAA,IACH;AAEA,UAAM,eAAe,CAAC,SAAS;AAC7B,UAAI,KAAK,SAAS,SAAS;AACzB,cAAM,kBAAkB;AAAA,MAC5B,OAAS;AACLC,oBAAAA,MAAM,QAAQ,GAAG,KAAK,GAAG;AACzB,kBAAW;AAAA,MACZ;AAAA,IACH;AAEA,UAAM,YAAY,MAAM;AACtB,UAAI,CAAC,MAAM;AAAW;AACtB,YAAM,eAAeC,cAAAA,MAAM,MAAM,IAAI;AACrC,mBAAa,QAAQ,CAAC,MAAM,UAAU;AACpC,YAAI,KAAK,SAAS,SAAS;AACzB,uBAAa,OAAO,OAAO,CAAC;AAAA,QAC7B;AAAA,MACL,CAAG;AACDC,oBAAAA,MAAI,aAAa;AAAA,QACf,MACE,aAAa,SAAS,IAClB,CAAC,MAAM,GAAG,IACV,aAAa,OAAO,CAAC,KAAK,QAAQ;AAChC,cAAI,KAAK,IAAI,GAAG;AAChB,iBAAO;AAAA,QACR,GAAE,EAAE;AAAA,QACX,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUnB,CAAG;AAAA,IACH;AAIA,UAAM,aAAa,CAAC,MAAM;AAAA,IAI1B;AAGA,UAAM,kBAAkB,CAAC,MAAM;AAC7B,YAAM,QAAQ;AAAA,IAChB;AAEA,UAAM,kBAAkB,CAAC,MAAM;AAC7B,YAAM,KAAK,MAAM,GAAG,EAAE,cAAc,EAAE,OAAO;AAAA,IAC/C;AAGA,UAAM,cAAcC,cAAQ,SAAC,MAAM;AACjC,UAAI;AAGJ,UAAI,MAAM,WAAW,GAAG;AACtB,iBAAS,MAAM;AAAA,MAChB;AAGD,UAAI,MAAM,WAAW,GAAG;AAEtB,YAAI,MAAM,cAAc,GAAG;AACzB,mBAAS,MAAM;AAAA,QACrB,WAAe,MAAM,gBAAgB,GAAG;AAClC,mBAAS,MAAM;AAAA,QAChB;AAAA,MACF;AAED,aAAO;AAAA,QACL,QAAQ,SAAS;AAAA,MAClB;AAAA,IACH,CAAC;AAGD,aAAS,UAAU,GAAG;AACpB,UAAI,MAAM,WAAW,GAAG;AACtB,cAAM,YAAa,EAAE,OAAO,SAAS,EAAE,OAAO,QAAS;AACvD,YAAI,MAAM,YAAY,WAAW;AAC/B,gBAAM,YAAY;AAAA,QACnB;AAAA,MACF;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChRA,GAAG,gBAAgB,SAAS;"}