This commit is contained in:
parent
ec64840880
commit
18314a9ce3
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<u-popup v-model="localShow" :mode="mode" :border-radius="10">
|
||||
<view class="content">
|
||||
<view class="label">
|
||||
<slot>{{label}}</slot>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view class="btn cancel-btn" @click="cancelBtnClick">{{cancelText}}</view>
|
||||
<view class="btn confim-btn" @click="confimBtnClick">{{confimText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
label: String,
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
confimText: {
|
||||
type: String,
|
||||
default: '充值'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
localShow: {
|
||||
get () {
|
||||
return this.show
|
||||
},
|
||||
set (val) {
|
||||
this.$emit('update:show', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancelBtnClick () {
|
||||
this.localShow = false
|
||||
this.$emit('cancelBtnClick')
|
||||
},
|
||||
confimBtnClick () {
|
||||
this.localShow = false
|
||||
this.$emit('confimBtnClick')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/ .u-drawer__scroll-view {
|
||||
background-color: #2B3062;
|
||||
}
|
||||
.content {
|
||||
width: 472rpx;
|
||||
// padding: 0 56rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.label {
|
||||
padding: 46rpx 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.btns {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
display: flex;
|
||||
& .btn {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
& .cancel-btn{
|
||||
background-color: #3A4299;
|
||||
}
|
||||
& .confim-btn{
|
||||
background-color: #FE192F;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<u-popup v-model="localShow" :mode="mode" :border-radius="24">
|
||||
<view class="content">
|
||||
<view style="height: 1rpx;">
|
||||
<image src="../../../static/img/fz_icon_gb/fz_icon_gb.png" class="close" @click="closeBtnClick"></image>
|
||||
</view>
|
||||
<view class="slectAddress">
|
||||
<view v-for="(item, index) in listJurisdiction" :key="index">
|
||||
<list-item>
|
||||
<template v-slot:left>
|
||||
<view>{{item.title}}</view>
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<image :src="item.iconCheck ? checkBoxImg[0] : checkBoxImg[1]" style="width: 50rpx; height: 50rpx;"></image>
|
||||
</template>
|
||||
</list-item>
|
||||
</view>
|
||||
</view>
|
||||
<u-button class="confim" @click="confim" shape="circle" :ripple="true" :plain="false">确认</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listItem from '../../listitem/listItem.vue'
|
||||
export default {
|
||||
components: {
|
||||
listItem
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
checkBoxImg: ['../../static/img/fz_icon_xz/fz_icon_xz.png', '../../static/img/fz_icon_gb/fz_icon_gb.png'],
|
||||
listJurisdiction: [
|
||||
{
|
||||
title: 'qqkld.net',
|
||||
iconCheck: true,
|
||||
},
|
||||
{
|
||||
title: '在线支付接口',
|
||||
iconCheck: false,
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
localShow: {
|
||||
get () {
|
||||
return this.show
|
||||
},
|
||||
set (val) {
|
||||
this.$emit('update:show', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confim () {
|
||||
|
||||
},
|
||||
closeBtnClick () {
|
||||
this.localShow = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.close {
|
||||
margin: 24rpx 24rpx 0 0;
|
||||
float: right;
|
||||
height: 50rpx;
|
||||
width: 50rpx;
|
||||
}
|
||||
.slectAddress {
|
||||
margin: 125rpx 50rpx 38rpx 50rpx;
|
||||
}
|
||||
/deep/ .u-drawer__scroll-view {
|
||||
background-color: #2B3062;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.confim {
|
||||
margin: 0 45rpx 29rpx 45rpx;
|
||||
height: 90rpx;
|
||||
|
||||
background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
|
||||
border-radius: 45rpx;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
<template>
|
||||
<view class="u-swiper-wrap" :style="{
|
||||
borderRadius: `${borderRadius}rpx`
|
||||
}">
|
||||
<swiper :current="elCurrent" @change="change" @animationfinish="animationfinish" :interval="interval" :circular="circular" :duration="duration" :autoplay="autoplay"
|
||||
:previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
|
||||
:style="{
|
||||
height: height + 'rpx',
|
||||
backgroundColor: bgColor
|
||||
}">
|
||||
<swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
|
||||
<view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)" :class="[uCurrent != index ? 'u-list-scale' : '']" :style="{
|
||||
borderRadius: `${borderRadius}rpx`,
|
||||
transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)',
|
||||
margin: effect3d && uCurrent != index ? '0 20rpx' : 0,
|
||||
}">
|
||||
<image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image>
|
||||
<view class="u-swiper-title">
|
||||
<slot name="titleSlot" :item="item"></slot>
|
||||
</view>
|
||||
<!-- <view v-if="title && item.title" class="u-swiper-title u-line-1" :style="[{
|
||||
'padding-bottom': titlePaddingBottom
|
||||
}, titleStyle]">
|
||||
{{ item.title }}
|
||||
</view> -->
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view v-if="showIndicator" class="u-swiper-indicator" :style="{
|
||||
top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto',
|
||||
bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto',
|
||||
justifyContent: justifyContent,
|
||||
padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
|
||||
}">
|
||||
<block v-if="mode == 'rect'">
|
||||
<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == uCurrent }" v-for="(item, index) in list"
|
||||
:key="index"></view>
|
||||
</block>
|
||||
<block v-if="mode == 'dot'">
|
||||
<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == uCurrent }" v-for="(item, index) in list"
|
||||
:key="index"></view>
|
||||
</block>
|
||||
<block v-if="mode == 'round'">
|
||||
<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == uCurrent }" v-for="(item, index) in list"
|
||||
:key="index"></view>
|
||||
</block>
|
||||
<block v-if="mode == 'number'">
|
||||
<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* swiper 轮播图
|
||||
* @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用
|
||||
* @tutorial https://www.uviewui.com/components/swiper.html
|
||||
* @property {Array} list 轮播图数据，见官网"基本使用"说明
|
||||
* @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false）
|
||||
* @property {String} mode 指示器模式，见官网说明（默认round）
|
||||
* @property {String Number} height 轮播图组件高度，单位rpx（默认250）
|
||||
* @property {String} indicator-pos 指示器的位置（默认bottomCenter）
|
||||
* @property {Boolean} effect3d 是否开启3D效果（默认false）
|
||||
* @property {Boolean} autoplay 是否自动播放（默认true）
|
||||
* @property {String Number} interval 自动轮播时间间隔，单位ms（默认2500）
|
||||
* @property {Boolean} circular 是否衔接播放，见官网说明（默认true）
|
||||
* @property {String} bg-color 背景颜色（默认#f3f4f6）
|
||||
* @property {String Number} border-radius 轮播图圆角值，单位rpx（默认8）
|
||||
* @property {Object} title-style 自定义标题样式
|
||||
* @property {String Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50）
|
||||
* @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill）
|
||||
* @event {Function} click 点击轮播图时触发
|
||||
* @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>
|
||||
*/
|
||||
export default {
|
||||
name: "swiper",
|
||||
props: {
|
||||
// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 是否显示指示器
|
||||
showIndicator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示title标题
|
||||
title: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 用户自定义的指示器的样式
|
||||
indicator: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 圆角值
|
||||
borderRadius: {
|
||||
type: [Number, String],
|
||||
default: 8
|
||||
},
|
||||
// 隔多久自动切换
|
||||
interval: {
|
||||
type: [String, Number],
|
||||
default: 3000
|
||||
},
|
||||
// 指示器的模式，rect|dot|number|round
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'round'
|
||||
},
|
||||
// list的高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 250
|
||||
},
|
||||
// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
|
||||
indicatorPos: {
|
||||
type: String,
|
||||
default: 'bottomCenter'
|
||||
},
|
||||
// 是否开启缩放效果
|
||||
effect3d: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 3D模式的情况下，激活item与前后item之间的距离，单位rpx
|
||||
effect3dPreviousMargin: {
|
||||
type: [Number, String],
|
||||
default: 50
|
||||
},
|
||||
// 是否自动播放
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 自动轮播时间间隔，单位ms
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 500
|
||||
},
|
||||
// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
|
||||
circular: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 图片的裁剪模式
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: 'aspectFill'
|
||||
},
|
||||
// 从list数组中读取的图片的属性名
|
||||
name: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#f3f4f6'
|
||||
},
|
||||
// 初始化时，默认显示第几项
|
||||
current: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 标题的样式，对象形式
|
||||
titleStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置uCurrent值，避免溢出
|
||||
list(nVal, oVal) {
|
||||
console.log(this.list)
|
||||
if(nVal.length !== oVal.length) this.uCurrent = 0;
|
||||
},
|
||||
// 监听外部current的变化，实时修改内部依赖于此测uCurrent值，如果更新了current，而不是更新uCurrent，
|
||||
// 就会错乱，因为指示器是依赖于uCurrent的
|
||||
current(n) {
|
||||
this.uCurrent = n;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uCurrent: this.current // 当前活跃的swiper-item的index
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
justifyContent() {
|
||||
if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
|
||||
if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
|
||||
if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
|
||||
},
|
||||
titlePaddingBottom() {
|
||||
let tmp = 0;
|
||||
if (this.mode == 'none') return '12rpx';
|
||||
if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') {
|
||||
tmp = '60rpx';
|
||||
} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') {
|
||||
tmp = '40rpx';
|
||||
} else {
|
||||
tmp = '12rpx';
|
||||
}
|
||||
return tmp;
|
||||
},
|
||||
// 因为uni的swiper组件的current参数只接受Number类型，这里做一个转换
|
||||
elCurrent() {
|
||||
return Number(this.current);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
listClick(index) {
|
||||
this.$emit('click', index);
|
||||
},
|
||||
change(e) {
|
||||
let current = e.detail.current;
|
||||
this.uCurrent = current;
|
||||
// 发出change事件，表示当前自动切换的index，从0开始
|
||||
this.$emit('change', current);
|
||||
},
|
||||
// 头条小程序不支持animationfinish事件，改由change事件
|
||||
// 暂不监听此事件，因为不再给swiper绑定uCurrent属性
|
||||
animationfinish(e) {
|
||||
// #ifndef MP-TOUTIAO
|
||||
// this.uCurrent = e.detail.current;
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.list)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'uview-ui/libs/css/style.components.scss';
|
||||
// @import "../../libs/css/style.components.scss";
|
||||
|
||||
.u-swiper-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.u-swiper-image {
|
||||
width: 100%;
|
||||
will-change: transform;
|
||||
height: 100%;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
pointer-events: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.u-swiper-indicator {
|
||||
padding: 0 24rpx;
|
||||
position: absolute;
|
||||
@include vue-flex;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.u-indicator-item-rect {
|
||||
width: 26rpx;
|
||||
height: 8rpx;
|
||||
margin: 0 6rpx;
|
||||
transition: all 0.5s;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.u-indicator-item-rect-active {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.u-indicator-item-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
margin: 0 6rpx;
|
||||
border-radius: 20rpx;
|
||||
transition: all 0.5s;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.u-indicator-item-dot-active {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.u-indicator-item-round {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
margin: 0 6rpx;
|
||||
border-radius: 20rpx;
|
||||
transition: all 0.5s;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.u-indicator-item-round-active {
|
||||
width: 34rpx;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.u-indicator-item-number {
|
||||
padding: 6rpx 16rpx;
|
||||
line-height: 1;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 100rpx;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.u-list-scale {
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.u-list-image-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
transition: all 0.5s;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-swiper-title {
|
||||
position: absolute;
|
||||
// background-color: rgba(0, 0, 0, 0.3);
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
// padding: 12rpx 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.u-swiper-item {
|
||||
@include vue-flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Loading…
Reference in New Issue