Skip to content

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

change-take

parent 9e8f03cf
Hide whitespace changes
Inline Side-by-side
Showing with 326 additions and 146 deletions
take-order/components/photo/standard - 副本.vue 0 → 100644
View file @ edac86b7
<!-- 拍照规范弹窗 -->
<template>
<view class="standard-box">
<swiper class="swiper-box" :current="swiperCurrent" @change="changeTab" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item" key="swiper1">
<view class="title">
拍照要求
</view>
<view class="txt-box" >
<view class="txt" v-for="(txt,index) in currentItem.main_point" :key="index">
{{index+1}}. {{txt}}
</view>
<view class="txt tips">
注意：{{currentItem.note}}
</view>
</view>
</swiper-item>
<swiper-item class="swiper-item" v-for="(src, index) in swiperList" :key="index">
<image @click="previewImage(index)" class="icon" mode="aspectFit" :src="src"></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>
</view>
</template>
<script>
export default {
name:"photo-standard",
props:{
currentItem:{
type: Object,
default () {
return {
images: [],
}
}
},
},
data() {
return {
tabList: [{
name: '十年'
}, {
name: '青春'
}, {
name: '之约'
}],
swiperList:[],
// 因为内部的滑动机制限制，请将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(val)
// 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(list){
let swiperList = JSON.parse(JSON.stringify(list))
let len = list.length
let tabList = []
for(let i=0;i<len;i++){
let item = {
name:'示意图' + (i + 1)
}
tabList.push(item)
}
tabList = [{name:'拍照要求'}].concat(tabList)
this.swiperList = swiperList
this.tabList = tabList
},
getSwiperHeight(){
const globalData = getApp().globalData
this.height = globalData.screenHeight*2 - globalData.navHeight - 200
},
previewImage(index){
uni.previewImage({
current:index,
urls:this.swiperList,
})
},
// 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);
},
changeTab(){
this.current = this.swiperCurrent
},
// 由于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;
color:#fff;
}
.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;
}
&>image{
width:630rpx;
min-height: 630rpx;
}
.txt-box{
max-height: 560rpx;
overflow: auto;
}
.txt{
white-space: normal;
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>
take-order/components/photo/standard.vue
View file @ edac86b7
<!-- 拍照规范弹窗 -->
<template> <template>
<view class="standard-box"> <view>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"> <view class="wrap">
<swiper-item class="swiper-item" key="swiper1"> <swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
<view class="title"> @animationfinish="animationfinish">
拍照要求 <swiper-item class="swiper-item">
</view> <view class="inner">
<view class="txt-box" > <view class="title">
<view class="txt" v-for="(txt,index) in currentItem.main_point" :key="index"> 拍照要求
{{index+1}}. {{txt}} </view>
<view class="txt-box">
<view class="txt" v-for="(txt,index) in currentItem.main_point" :key="index">
{{index+1}}. {{txt}}
</view>
<view class="txt tips" v-if="currentItem.note">
注意：{{currentItem.note}}
</view>
</view>
</view> </view>
<view class="txt tips"> </swiper-item>
注意：{{currentItem.note}} <swiper-item class="swiper-item" v-for="(src, index) in swiperList" :key="index">
<view class="inner">
<image @click="previewImage(index)" class="icon" mode="aspectFit" :src="src"></image>
</view> </view>
</view> </swiper-item>
</swiper-item> </swiper>
<swiper-item class="swiper-item" v-for="(src, index) in swiperList" :key="index"> <view class="u-tabs-box">
<image @click="previewImage(index)" class="icon" mode="aspectFit" :src="src"></image> <u-tabs-swiper bg-color="transparent" inactive-color="#999" activeColor="#2272FF" ref="tabs"
:list="tabList" :current="current" @change="change" :is-scroll="false" swiperWidth="750">
</swiper-item> </u-tabs-swiper>
</swiper> </view>
<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> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name:"photo-standard", props: {
props:{ currentItem: {
currentItem:{
type: Object, type: Object,
default () { default () {
return { return {
images: [], images: [],
} }
} }
...@@ -43,167 +47,131 @@ ...@@ -43,167 +47,131 @@
}, },
data() { data() {
return { return {
tabList: [{ current: 0,
name: '十年' swiperCurrent: 0,
}, { dx: 0,
name: '青春' };
}, {
name: '之约'
}],
swiperList:[],
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
height:0,
}
}, },
watch:{ onLoad() {},
"currentItem.images"(val){ computed: {
if(val.length>0){ swiperList() {
this.changeList(val) let list = this.currentItem.images || []
// let swiperList = JSON.parse(JSON.stringify(val)) return list
// let len = tabs.length
// let tabList = [{name:'拍照要求'}].concat(Array.from({name:'示意图'},len))
// console.log(tabList,'tabList')
}
}, },
}, tabList() {
created() { let list = this.currentItem.images || []
// 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(list){
let swiperList = JSON.parse(JSON.stringify(list)) let swiperList = JSON.parse(JSON.stringify(list))
let len = list.length let len = list.length
let tabList = [] let tabList = []
for(let i=0;i<len;i++){ for (let i = 0; i < len; i++) {
let item = { let item = {
name:'示意图' + (i + 1) name: '示意图' + (i + 1)
} }
tabList.push(item) tabList.push(item)
} }
tabList = [{name:'拍照要求'}].concat(tabList) tabList = [{
this.swiperList = swiperList name: '拍照要求'
this.tabList = tabList }].concat(tabList)
return tabList
},
getSwiperHeight(){
const globalData = getApp().globalData
this.height = globalData.screenHeight*2 - globalData.navHeight - 200
}, },
},
methods: {
previewImage(index){ previewImage(index){
uni.previewImage({ uni.previewImage({
current:index, current:index,
urls:this.swiperList, urls:this.swiperList,
}) })
}, },
// tabs通知swiper切换 // tab栏切换
tabsChange(index) { change(index) {
this.swiperCurrent = index; this.swiperCurrent = index;
// this.getOrderList(index);
}, },
// swiper-item左右移动，通知tabs的滑块跟随移动 transition({
transition(e) { detail: {
// console.log(e.detail,'e.detail-transition') dx
let dx = e.detail.dx; }
this.$refs.uTabs.setDx(dx); }) {
this.$refs.tabs.setDx(dx);
}, },
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态 animationfinish({
// swiper滑动结束，分别设置tabs和swiper的状态 detail: {
animationfinish(e) { current
// console.log(e.detail,'e.detail-animationfinish') }
let current = e.detail.current; }) {
this.$refs.uTabs.setFinishCurrent(current); this.$refs.tabs.setFinishCurrent(current);
this.swiperCurrent = current; this.swiperCurrent = current;
this.current = current; this.current = current;
},
// scroll-view到底部加载更多
onreachBottom() {
} }
} }
} };
</script> </script>
<style lang="scss"> <style>
.standard-box{ /* #ifndef H5 */
position: absolute; page {
left:0;right:0; height: 100%;
/* height: calc(100vh - 240rpx); */ background-color: #f2f2f2;
z-index: 100; }
bottom:240rpx;
/* #endif */
</style>
<style lang="scss" scoped>
.wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; height: calc(100vh - var(--window-top) - 200rpx);
align-items: center; width: 100%;
color:#fff;
}
.swiper-box{
width: 690rpx;
min-height: 690rpx;
margin-bottom: 150rpx;
border-radius: 12rpx;
background-color: #fff;
} }
.tab-box{
position: absolute; .swiper-box {
bottom:0; flex: 1;
left:30rpx;
right:30rpx;
} }
.swiper-item{
.swiper-item {
display: flex;
align-items: center;
height: 100%;
padding: 0 30rpx;
box-sizing: border-box; box-sizing: border-box;
// width:690rpx; }
padding:30rpx;
.title{ .swiper-item .inner {
margin-top:20rpx; padding: 30rpx;
background-color: #fff;
height: 690rpx;
overflow: hidden;
.title {
margin-top: 20rpx;
font-weight: bold; font-weight: bold;
line-height: 50rpx; line-height: 50rpx;
color:#333; color: #333;
font-size: 36rpx; font-size: 36rpx;
} }
&>image{
width:630rpx; &>image {
width: 630rpx;
min-height: 630rpx; min-height: 630rpx;
} }
.txt-box{
.txt-box {
max-height: 560rpx; max-height: 560rpx;
overflow: auto; overflow: auto;
} }
.txt{
.txt {
white-space: normal; white-space: normal;
padding-top:26rpx; padding-top: 26rpx;
line-height: 34rpx; line-height: 34rpx;
color:#666; color: #666;
font-size: 28rpx; font-size: 28rpx;
&.tips{
padding-bottom:26rpx; &.tips {
color:#D73400 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> </style>
take-order/pages/photo/take.vue
View file @ edac86b7
...@@ -580,7 +580,7 @@ ...@@ -580,7 +580,7 @@
z-index: 1000; z-index: 1000;
width: 750rpx; width: 750rpx;
height: 100vh; height: 100vh;
padding: 0 30rpx; // padding: 0 30rpx;
box-sizing: border-box; box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
......
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