|
@@ -1,314 +0,0 @@
|
|
|
-<style lang="less">
|
|
|
-.component-step-panel-mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 2;
|
|
|
- background-color: rgba(0, 0, 0, 0.4);
|
|
|
-}
|
|
|
-.component-step-panel-content {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- z-index: 3;
|
|
|
- box-shadow: 0px 0px 4px rgba(1, 1, 51, 0.02),
|
|
|
- 0px 0px 40px rgba(1, 1, 51, 0.08);
|
|
|
- border-radius: 32rpx 32rpx 0 0;
|
|
|
- background: #fff;
|
|
|
- &.hasAnimation {
|
|
|
- transition: transform 0.3s ease-out;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.component-step-panel {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.component-step-panel .pre-step-wrapper {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- height: 112rpx;
|
|
|
- width: 112rpx;
|
|
|
- z-index: 3;
|
|
|
-}
|
|
|
-.component-step-panel .step-content {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: flex-start;
|
|
|
- overflow-x: hidden;
|
|
|
- transition: transform 0.3s ease-out;
|
|
|
-}
|
|
|
-
|
|
|
-.component-step-panel .step-item {
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-.component-step-panel .pre-step {
|
|
|
- position: absolute;
|
|
|
- top: 24rpx;
|
|
|
- left: 24rpx;
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- background: rgba(2, 2, 82, 0.03);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.component-step-panel .pre-step .icon-arrow {
|
|
|
- width: 16rpx;
|
|
|
- height: 24rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.component-step-panel .closed-wrapper {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 112rpx;
|
|
|
- height: 112rpx;
|
|
|
- z-index: 3;
|
|
|
-}
|
|
|
-
|
|
|
-.component-step-panel .closed {
|
|
|
- position: absolute;
|
|
|
- top: 24rpx;
|
|
|
- right: 24rpx;
|
|
|
- background: rgba(2, 2, 82, 0.03);
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-
|
|
|
-.component-step-panel .icon-close-image {
|
|
|
- width: 20rpx;
|
|
|
- height: 20rpx;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-<template>
|
|
|
- <div
|
|
|
- class="component-step-panel-mask"
|
|
|
- v-if="show"
|
|
|
- v-on:touchmove="stopPropagation"
|
|
|
- v-on:touchstart="stopPropagation"
|
|
|
- v-on:touchend="stopPropagation"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="component-step-panel-content"
|
|
|
- :class="{'hasAnimation': hasAnimation}"
|
|
|
- style="{{('transform:translateY('+translateY+')'+';')}}"
|
|
|
- v-on:touchmove="pageTouchMove"
|
|
|
- v-on:touchstart="pageTouchStart"
|
|
|
- v-on:touchend="pageTouchEnd"
|
|
|
- >
|
|
|
- <div class="component-step-panel">
|
|
|
- <div class="pre-step-wrapper" v-on:click.stop="goPreStep" v-if="step!=1">
|
|
|
- <div class="pre-step">
|
|
|
- <image class="icon-arrow" :src="h5StaticPath+'/icon_back_gray_weight.png'" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="closed-wrapper" @click="closePanel">
|
|
|
- <div class="closed">
|
|
|
- <image class="icon-close-image" :src="h5StaticPath+'/icon_close_gray.png'" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="step-content"
|
|
|
- :style="{width:(screenWidth*steps+'px'),transform:('translate('+(-(step-1)*screenWidth)+'px,'+(0)+'px)')}"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="(item, index) in stepsArr"
|
|
|
- :key="index"
|
|
|
- class="{{'step-item '+(item)}}"
|
|
|
- style="{{'width:'+screenWidth+'px'}}"
|
|
|
- >
|
|
|
- <slot :name="item"></slot>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import wepy from '@wepy/core';
|
|
|
-import config from '@/config';
|
|
|
-let pageTouchStartY = 0;
|
|
|
-let moveY = 0;
|
|
|
-wepy.component({
|
|
|
- options: {
|
|
|
- multipleSlots: true // 在组件定义时的选项中启用多slot支持
|
|
|
- },
|
|
|
- data: {
|
|
|
- h5StaticPath: config.h5StaticPath,
|
|
|
- stepsArr: [],
|
|
|
- stepHeights: [],
|
|
|
- contanierHeight: 0,
|
|
|
- translateY: '100%',
|
|
|
- translateX: 0,
|
|
|
- screenWidth: 375,
|
|
|
- oldStep: 0,
|
|
|
- hiddenOldStep: false,
|
|
|
- hasAnimation: false
|
|
|
- },
|
|
|
- props: {
|
|
|
- steps: Number,
|
|
|
- step: Number,
|
|
|
- panelHeightHasChange: Boolean,
|
|
|
- show: Boolean,
|
|
|
- containerId: String
|
|
|
- },
|
|
|
- ready() {
|
|
|
- this.generateStepArrar();
|
|
|
- // 防止内部元素未加载完毕
|
|
|
- setTimeout(() => {
|
|
|
- this.getStepHieght();
|
|
|
- }, 20);
|
|
|
- this.setStepContanierWidth();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- step: function(newStep, oldStep) {
|
|
|
- if (oldStep !== newStep) {
|
|
|
- //更新时候重新设置值
|
|
|
- // 当首次更改的时候,第一次设置值,此时元素还未加载完,故加上延迟
|
|
|
- if (!oldStep) {
|
|
|
- setTimeout(() => {
|
|
|
- this.getStepHieght();
|
|
|
- }, 200);
|
|
|
- } else {
|
|
|
- this.getStepHieght();
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- panelHeightHasChange: function(newPanelHeightChange, oldPanelHeightChange) {
|
|
|
- if (oldPanelHeightChange == false && newPanelHeightChange == true) {
|
|
|
- this.getStepHieght(); //更新时候重新设置值
|
|
|
- }
|
|
|
- },
|
|
|
- show: function(newShow, oldShow) {
|
|
|
- if (oldShow !== newShow) {
|
|
|
- this.show = newShow;
|
|
|
- // 当首次更改的时候,第一次设置值,此时元素还未加载完,故加上延迟
|
|
|
- if (oldShow == null) {
|
|
|
- setTimeout(() => {
|
|
|
- this.getStepHieght();
|
|
|
- }, 200);
|
|
|
- } else {
|
|
|
- this.getStepHieght();
|
|
|
- }
|
|
|
-
|
|
|
- if (!oldShow && newShow) {
|
|
|
- this.hasAnimation = true;
|
|
|
- setTimeout(() => {
|
|
|
- this.hasAnimation = false;
|
|
|
- }, 300);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- generateStepArrar() {
|
|
|
- const { steps } = this;
|
|
|
- let stepsArr = [];
|
|
|
- for (let i = 1; i <= steps; i++) {
|
|
|
- let stepClassName = 'step' + i;
|
|
|
- stepsArr.push(stepClassName);
|
|
|
- }
|
|
|
- this.stepsArr = stepsArr;
|
|
|
- },
|
|
|
- getStepHieght() {
|
|
|
- const { show, step } = this;
|
|
|
- if (!show) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.setStepTranslste();
|
|
|
- },
|
|
|
- setStepTranslste() {
|
|
|
- const { step, containerId } = this;
|
|
|
- if (!this.stepsArr.length) {
|
|
|
- this.generateStepArrar();
|
|
|
- }
|
|
|
- let { stepsArr } = this;
|
|
|
- let selector = this.$wx
|
|
|
- .createSelectorQuery()
|
|
|
- .select('.step-content')
|
|
|
- .boundingClientRect();
|
|
|
- let stepClassName = stepsArr[step - 1];
|
|
|
- selector = selector.select(`.${stepClassName}`).boundingClientRect();
|
|
|
-
|
|
|
- selector.exec(ret => {
|
|
|
- this.translateY = ret[0].height - ret[1].height + 'px';
|
|
|
- });
|
|
|
- },
|
|
|
- setStepContanierWidth() {
|
|
|
- wx.getSystemInfo({
|
|
|
- success: res => {
|
|
|
- let screenWidth = res.screenWidth;
|
|
|
- this.screenWidth = screenWidth;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- goPreStep() {
|
|
|
- this.$emit('component-panel-step-back');
|
|
|
- },
|
|
|
- closePanel() {
|
|
|
- this.show = false;
|
|
|
- this.$emit('component-panel-step-close');
|
|
|
- },
|
|
|
- pageTouchStart(e) {
|
|
|
- try {
|
|
|
- let touch = e.touches[0]; //获取第一个触点
|
|
|
- //记录触点初始位置
|
|
|
- pageTouchStartY = Number(touch.pageY); //页面触点Y坐标
|
|
|
- } catch (err) {
|
|
|
- console.log(err.message);
|
|
|
- }
|
|
|
- },
|
|
|
- pageTouchMove(e) {
|
|
|
- try {
|
|
|
- let touch = e.touches[0], //获取第一个触点
|
|
|
- y = Number(touch.pageY); //页面触点Y坐标
|
|
|
-
|
|
|
- let touchLength = parseInt(y - pageTouchStartY);
|
|
|
- pageTouchStartY = y;
|
|
|
- moveY = moveY + touchLength;
|
|
|
- // 下滑
|
|
|
- let oldTranslateY = parseInt(
|
|
|
- this.translateY.substring(0, this.translateY.length - 2)
|
|
|
- );
|
|
|
- if (touchLength > 0) {
|
|
|
- this.translateY = oldTranslateY + touchLength + 'px';
|
|
|
- } else {
|
|
|
- // 重新计算,防止下滑后再上滑,更改了值
|
|
|
- // this.getStepHieght();
|
|
|
- }
|
|
|
- } catch (err) {}
|
|
|
- },
|
|
|
- pageTouchEnd(e) {
|
|
|
- if (!moveY) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (moveY >= 200) {
|
|
|
- this.closePanel();
|
|
|
- } else {
|
|
|
- this.getStepHieght();
|
|
|
- }
|
|
|
- moveY = 0;
|
|
|
- },
|
|
|
- stopPropagation() {
|
|
|
- // 空方法,阻止冒泡用
|
|
|
- }
|
|
|
- }
|
|
|
-});
|
|
|
-</script>
|