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>
<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" v-for="(txt,index) in currentItem.main_point" :key="index">
{{index+1}}. {{txt}}
<view>
<view class="wrap">
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
@animationfinish="animationfinish">
<swiper-item class="swiper-item">
<view class="inner">
<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" v-if="currentItem.note">
注意：{{currentItem.note}}
</view>
</view>
</view>
<view class="txt tips">
注意：{{currentItem.note}}
</swiper-item>
<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>
</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>
</swiper-item>
</swiper>
<view class="u-tabs-box">
<u-tabs-swiper bg-color="transparent" inactive-color="#999" activeColor="#2272FF" ref="tabs"
:list="tabList" :current="current" @change="change" :is-scroll="false" swiperWidth="750">
</u-tabs-swiper>
</view>
</view>
</view>
</template>
<script>
export default {
name:"photo-standard",
props:{
currentItem:{
props: {
currentItem: {
type: Object,
default () {
return {
return {
images: [],
}
}
......@@ -43,167 +47,131 @@
},
data() {
return {
tabList: [{
name: '十年'
}, {
name: '青春'
}, {
name: '之约'
}],
swiperList:[],
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
height:0,
}
current: 0,
swiperCurrent: 0,
dx: 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')
}
onLoad() {},
computed: {
swiperList() {
let list = this.currentItem.images || []
return list
},
},
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){
tabList() {
let list = this.currentItem.images || []
let swiperList = JSON.parse(JSON.stringify(list))
let len = list.length
let tabList = []
for(let i=0;i<len;i++){
for (let i = 0; i < len; i++) {
let item = {
name:'示意图' + (i + 1)
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
tabList = [{
name: '拍照要求'
}].concat(tabList)
return tabList
},
},
methods: {
previewImage(index){
uni.previewImage({
current:index,
urls:this.swiperList,
})
},
// tabs通知swiper切换
tabsChange(index) {
// tab栏切换
change(index) {
this.swiperCurrent = index;
// this.getOrderList(index);
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
// console.log(e.detail,'e.detail-transition')
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
transition({
detail: {
dx
}
}) {
this.$refs.tabs.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);
animationfinish({
detail: {
current
}
}) {
this.$refs.tabs.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;
<style>
/* #ifndef H5 */
page {
height: 100%;
background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss" scoped>
.wrap {
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;
height: calc(100vh - var(--window-top) - 200rpx);
width: 100%;
}
.tab-box{
position: absolute;
bottom:0;
left:30rpx;
right:30rpx;
.swiper-box {
flex: 1;
}
.swiper-item{
.swiper-item {
display: flex;
align-items: center;
height: 100%;
padding: 0 30rpx;
box-sizing: border-box;
// width:690rpx;
padding:30rpx;
.title{
margin-top:20rpx;
}
.swiper-item .inner {
padding: 30rpx;
background-color: #fff;
height: 690rpx;
overflow: hidden;
.title {
margin-top: 20rpx;
font-weight: bold;
line-height: 50rpx;
color:#333;
color: #333;
font-size: 36rpx;
}
&>image{
width:630rpx;
&>image {
width: 630rpx;
min-height: 630rpx;
}
.txt-box{
.txt-box {
max-height: 560rpx;
overflow: auto;
}
.txt{
.txt {
white-space: normal;
padding-top:26rpx;
padding-top: 26rpx;
line-height: 34rpx;
color:#666;
color: #666;
font-size: 28rpx;
&.tips{
padding-bottom:26rpx;
color:#D73400
&.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/pages/photo/take.vue
View file @ edac86b7
......@@ -580,7 +580,7 @@
z-index: 1000;
width: 750rpx;
height: 100vh;
padding: 0 30rpx;
// padding: 0 30rpx;
box-sizing: border-box;
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