1 line
15 KiB
Plaintext
1 line
15 KiB
Plaintext
{"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;"} |