Skip to content

T
take_order
Commit f30a6ae3 authored by 李俊赕's avatar 李俊赕
Browse files
Options

update-standard

parent 2ee929a1
Hide whitespace changes
Inline Side-by-side
Showing with 40 additions and 228 deletions
take-order/components/photo/standard.vue
View file @ f30a6ae3
<template> <template>
<view class="standard-box" > <cover-view class="standard-box" >
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"> <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item" key="swiper1"> <swiper-item class="swiper-item" key="swiper1">
<view class="title"> <view class="title">
...@@ -14,40 +14,43 @@ ...@@ -14,40 +14,43 @@
</view> </view>
</view> </view>
</swiper-item> </swiper-item>
<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index"> <swiper-item class="swiper-item" v-for="(src, index) in swiperList" :key="index">
{{item.title}}
<cover-image bindtap="previewImage(item,index)" class="icon" mode="aspectFit" :src="src"></cover-image> <cover-image bindtap="previewImage(item,index)" class="icon" mode="aspectFit" :src="src"></cover-image>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="tab-box"> <view class="tab-box">
<u-tabs-swiper bg-color="transparent" inactive-color="#999" <u-tabs-swiper bg-color="transparent" inactive-color="#999"
ref="uTabs" :list="list" :current="current" ref="uTabs" :list="tabList" :current="current"
@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper> @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view> </view>
</view> </cover-view>
</template> </template>
<script> <script>
export default { export default {
name:"photo-standard",
props:{ props:{
item:{ currentItem:{
type:'Object', type: Object,
detault:()=>{ default () {
return null return {
images: [],
}
} }
} },
}, },
data() { data() {
return { return {
list: [{ tabList: [{
name: '十年' name: '十年'
}, { }, {
name: '青春' name: '青春'
}, { }, {
name: '之约' name: '之约'
}], }],
tabs:[{ swiperList:[{
title:'记录的距离大家零点九零杰拉德杰拉德建立的连接就111111111111', title:'记录的距离大家零点九零杰拉德杰拉德建立的连接就111111111111',
},{ },{
title:'记录的距离大家零点九零杰拉德杰拉德建立的连接就222222', title:'记录的距离大家零点九零杰拉德杰拉德建立的连接就222222',
...@@ -60,7 +63,18 @@ ...@@ -60,7 +63,18 @@
height:0, height:0,
} }
}, },
onLoad(e) { watch:{
"currentItem.images"(val){
if(val.length>0){
this.changeList()
// let swiperList = JSON.parse(JSON.stringify(val))
// let len = tabs.length
// let tabList = [{name:'拍照要求'}].concat(Array.from({name:'示意图'},len))
// console.log(tabList,'tabList')
}
},
},
created() {
// getApp().trackPage('照片预览页') // getApp().trackPage('照片预览页')
// console.log(e, 'e') // console.log(e, 'e')
// if (e.img) { // if (e.img) {
...@@ -69,14 +83,19 @@ ...@@ -69,14 +83,19 @@
// console.log(this.images, 'this.images') // console.log(this.images, 'this.images')
}, },
mounted(){ mounted(){
this.changeList(this.currentItem.images)
this.getSwiperHeight() this.getSwiperHeight()
}, },
methods: { methods: {
changeList(){
let swiperList = JSON.parse(JSON.stringify(val))
let len = tabs.length
let tabList = [{name:'拍照要求'}].concat(Array.from({name:'示意图'},len))
console.log(tabList,'tabList')
},
getSwiperHeight(){ getSwiperHeight(){
const globalData = getApp().globalData const globalData = getApp().globalData
this.height = globalData.screenHeight*2 - globalData.navHeight - 200 this.height = globalData.screenHeight*2 - globalData.navHeight - 200
console.log(this.height,'height')
console.log(globalData.screenHeight,'globalData.screenHeight')
}, },
previewImage(index){ previewImage(index){
uni.previewImage({ uni.previewImage({
...@@ -90,14 +109,14 @@ ...@@ -90,14 +109,14 @@
}, },
// swiper-item左右移动，通知tabs的滑块跟随移动 // swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) { transition(e) {
console.log(e.detail,'e.detail-transition') // console.log(e.detail,'e.detail-transition')
let dx = e.detail.dx; let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx); this.$refs.uTabs.setDx(dx);
}, },
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态 // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态 // swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) { animationfinish(e) {
console.log(e.detail,'e.detail-animationfinish') // console.log(e.detail,'e.detail-animationfinish')
let current = e.detail.current; let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current); this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current; this.swiperCurrent = current;
...@@ -117,7 +136,7 @@ ...@@ -117,7 +136,7 @@
position: absolute; position: absolute;
left:0;right:0; left:0;right:0;
/* height: calc(100vh - 240rpx); */ /* height: calc(100vh - 240rpx); */
z-index: 100;
bottom:240rpx; bottom:240rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
take-order/manifest.json
View file @ f30a6ae3
...@@ -67,7 +67,9 @@ ...@@ -67,7 +67,9 @@
"mp-weixin" : { "mp-weixin" : {
"appid" : "wxd1d6eede324b0465", "appid" : "wxd1d6eede324b0465",
"setting" : { "setting" : {
"urlCheck" : false "urlCheck" : false,
"es6" : true,
"minified" : true
}, },
"usingComponents" : true, "usingComponents" : true,
"permission" : { "permission" : {
......
take-order/pages.json
View file @ f30a6ae3
...@@ -140,16 +140,7 @@ ...@@ -140,16 +140,7 @@
"navigationBarTextStyle": "#FFFFFF", "navigationBarTextStyle": "#FFFFFF",
"disableScroll": true "disableScroll": true
} }
// },{
// "path": "pages/photo/standard",
// "style": {
// "navigationBarTitleText": "拍照规范",
// "navigationBarBackgroundColor": "#333333",
// "navigationBarTextStyle": "#FFFFFF",
// "disableScroll": true
// }
}, },
{ {
"path": "pages/photo/detail", "path": "pages/photo/detail",
"style": { "style": {
......
take-order/pages/photo/standard.vue deleted 100644 → 0
View file @ 2ee929a1
<template>
<cover-view class="standard-box" >
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item" key="swiper1">
<view class="title">
拍照要求
</view>
<view class="txt-box">
<view class="txt">
1.充电桩必须通电，可看到电源指示灯亮
</view>
<view class="txt tips">
注意：人桩合影必须上传至少两张相片，一张
</view>
</view>
</swiper-item>
<swiper-item class="swiper-item" v-for="(src, index) in swiperList" :key="index">
<cover-image bindtap="previewImage(item,index)" class="icon" mode="aspectFit" :src="src"></cover-image>
</swiper-item>
</swiper>
<view class="tab-box">
<u-tabs-swiper bg-color="transparent" inactive-color="#999"
ref="uTabs" :list="tabList" :current="current"
@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view>
</cover-view>
</template>
<script>
export default {
name:"photo-standard",
props:{
currentItem:{
type: Object,
default () {
return {
images: [],
}
}
},
},
data() {
return {
tabList: [{
name: '十年'
}, {
name: '青春'
}, {
name: '之约'
}],
swiperList:[{
title:'记录的距离大家零点九零杰拉德杰拉德建立的连接就111111111111',
},{
title:'记录的距离大家零点九零杰拉德杰拉德建立的连接就222222',
},{
title:'记录的距离大家零点九零杰拉德杰拉德建立的连接就333333',
},],
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
height:0,
}
},
watch:{
"currentItem.images"(val){
if(val.length>0){
this.changeList()
// let swiperList = JSON.parse(JSON.stringify(val))
// let len = tabs.length
// let tabList = [{name:'拍照要求'}].concat(Array.from({name:'示意图'},len))
// console.log(tabList,'tabList')
}
},
},
created() {
// getApp().trackPage('照片预览页')
// console.log(e, 'e')
// if (e.img) {
// this.images = [e.img]
// }
// console.log(this.images, 'this.images')
},
mounted(){
this.changeList(this.currentItem.images)
this.getSwiperHeight()
},
methods: {
changeList(){
let swiperList = JSON.parse(JSON.stringify(val))
let len = tabs.length
let tabList = [{name:'拍照要求'}].concat(Array.from({name:'示意图'},len))
console.log(tabList,'tabList')
},
getSwiperHeight(){
const globalData = getApp().globalData
this.height = globalData.screenHeight*2 - globalData.navHeight - 200
},
previewImage(index){
uni.previewImage({
current:index,
urls:[],
})
},
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
// console.log(e.detail,'e.detail-transition')
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
// console.log(e.detail,'e.detail-animationfinish')
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
// scroll-view到底部加载更多
onreachBottom() {
}
}
}
</script>
<style lang="scss">
.standard-box{
position: absolute;
left:0;right:0;
/* height: calc(100vh - 240rpx); */
z-index: 100;
bottom:240rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.swiper-box{
width: 690rpx;
min-height: 690rpx;
margin-bottom: 150rpx;
border-radius: 12rpx;
background-color: #fff;
}
.tab-box{
position: absolute;
bottom:0;
left:30rpx;
right:30rpx;
}
.swiper-item{
box-sizing: border-box;
// width:690rpx;
padding:30rpx;
.title{
margin-top:20rpx;
font-weight: bold;
line-height: 50rpx;
color:#333;
font-size: 36rpx;
}
.txt-box{
max-height: 560rpx;
overflow: auto;
}
.txt{
padding-top:26rpx;
line-height: 34rpx;
color:#666;
font-size: 28rpx;
&.tips{
padding-bottom:26rpx;
color:#D73400
}
}
}
/* .pic {
display: block;
width: 100%;
height: auto;
}
.scroll-view_H {
white-space: nowrap;
width: 750rpx;
height: 300rpx;
}
.view-content {
display: flex;
} */
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment