Skip to content

U
uni-pdtravel
Commit ffeaaa84 authored by 潘永坪's avatar 潘永坪
Browse files
Options

Merge branch 'album' of http://192.168.0.204/panyongping/uni-pdtravel into album

parents bef558c2 8089ce05
Hide whitespace changes
Inline Side-by-side
Showing with 2442 additions and 1327 deletions
pages.json
View file @ ffeaaa84
...@@ -552,6 +552,33 @@ ...@@ -552,6 +552,33 @@
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
{
"path" : "scanCodePrinting/scanCodePrinting",
"style" :
{
"navigationBarTitleText" : "选择产品",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path" : "photoLogin/photoLogin",
"style" :
{
"navigationBarTitleText" : "获取相片",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path" : "photoAccount/photoAccount",
"style" :
{
"navigationBarTitleText" : "切换账号",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
} }
] ]
} }
......
pages/album/myPhotoAlbum/myPhotoAlbum.vue
View file @ ffeaaa84
...@@ -10,39 +10,24 @@ ...@@ -10,39 +10,24 @@
<u-icon name="arrow-left" color="#333" @click="blowUpMaks=false"></u-icon> <u-icon name="arrow-left" color="#333" @click="blowUpMaks=false"></u-icon>
{{blowUpNumNew}}/{{pictureFrameList.length}} {{blowUpNumNew}}/{{pictureFrameList.length}}
</view> </view>
<!--单张 宫格切换-->
<view class="myPhoto-title">
<view class="title-click" :class="titleclick==1?'title-clickAct':''" @click="clickActFun(1)">
单照片
<view class="click-line"></view>
</view>
<view class="title-click" :class="titleclick==2?'title-clickAct':''" @click="clickActFun(2)">
二宫格
<view class="click-line"></view>
</view>
<view class="title-click" :class="titleclick==3?'title-clickAct':''" @click="clickActFun(3)">
三宫格
<view class="click-line"></view>
</view>
<view class="title-click" :class="titleclick==4?'title-clickAct':''" @click="clickActFun(4)">
六宫格
<view class="click-line"></view>
</view>
</view>
<!--相框/项目切换--> <!--相框/项目切换-->
<view class="myPhoto-search" v-if="pictureFrameList.length!=0"> <view class="myPhoto-search" v-if="pictureFrameList.length!=0">
<view class="search-left"> <view class="search-left">
<view class="left-frame" :class="frameNum==1?'left-frameAct':''" @click="frameFun(1)">金属框</view> <!-- <view class="left-frame" :class="frameNum==1?'left-frameAct':''" @click="frameFun(1)">金属框</view>
<view class="left-frame" :class="frameNum==2?'left-frameAct':''" @click="frameFun(2)">木框</view> <view class="left-frame" :class="frameNum==2?'left-frameAct':''" @click="frameFun(2)">木框</view>
<view class="left-frame" :class="frameNum==3?'left-frameAct':''" @click="frameFun(3)">无框</view> <view class="left-frame" :class="frameNum==3?'left-frameAct':''" @click="frameFun(3)">无框</view> -->
</view>
<view class="search-right">
<view class="right-addressClick" @click="show = true"> <view class="right-addressClick" @click="show = true">
{{showAddress}} {{showAddress}}
<view class="address-triangle"></view> <view class="address-triangle"></view>
<u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker> <u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
</view> </view>
</view> </view>
<view class="search-right">
<view class="right-addressClick" @click="show = true">
153****3456
<view class="address-triangle"></view>
</view>
</view>
</view> </view>
<!--相片列表--> <!--相片列表-->
<view class="myPhoto-list" v-if="checkTypeFun==true" :class="bottomShow==true?'myPhoto-listAct':''"> <view class="myPhoto-list" v-if="checkTypeFun==true" :class="bottomShow==true?'myPhoto-listAct':''">
...@@ -70,7 +55,7 @@ ...@@ -70,7 +55,7 @@
<view class="myPhoto-mask" v-if="blowUpMaks==true" :style="{'top': albumBoxTop + 'px' }"> <view class="myPhoto-mask" v-if="blowUpMaks==true" :style="{'top': albumBoxTop + 'px' }">
<swiper class="swiper" circular @change="projectNumFun" :current="currentNum"> <swiper class="swiper" circular @change="projectNumFun" :current="currentNum">
<swiper-item v-for="(item,index) in pictureFrameList" :key="index"> <swiper-item v-for="(item,index) in pictureFrameList" :key="index">
<image :src="item.image" @click="stopPhoto(index)" :style="{'width': item.width, 'height': item.height}"></image> <image :src="item.image" @click="stopPhoto(index)" :style="{'width': item.width+'rpx', 'height': item.height+'rpx'}"></image>
<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" v-if="checkTypeFun==true"> <checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" v-if="checkTypeFun==true">
<checkbox value="val" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox> <checkbox value="val" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
</checkbox-group> </checkbox-group>
...@@ -78,37 +63,68 @@ ...@@ -78,37 +63,68 @@
</swiper> </swiper>
</view> </view>
<!--获取照片--> <!--获取照片-->
<image v-if="pictureFrameListNum==0" class="myPhoto-getPhotos" src="../static/album/icon08.png"></image> <!-- <image v-if="pictureFrameListNum==0" class="myPhoto-getPhotos" src="../static/album/icon08.png"></image> -->
<!--脚部选择相片、加入购物车、直接购买--> <!--脚部选择相片、加入购物车、直接购买 v-if="pictureFrameListNum>0"-->
<view class="myPhoto-bottom" v-if="pictureFrameListNum>0"> <view class="myPhoto-bottom">
<view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view> <view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
<view class="bottom-feature"> <view class="bottom-feature">
<!--加入相册列表--> <!--加入相册列表-->
<view class="feature-list"> <!-- <view class="feature-list">
<template v-for="(item,index) in pictureFrameList"> <template v-for="(item,index) in pictureFrameList">
<view class="feature-case" v-if="item.pickerChoose==true" :key="index"> <view class="feature-case" v-if="item.pickerChoose==true" :key="index">
<image class="feature-img" :src="item.image"></image> <image class="feature-img" :src="item.image"></image>
<image class="feature-close" src="../static/album/icon05.png" @click="stopPhoto(index)"></image> <image class="feature-close" src="../static/album/icon05.png" @click="stopPhoto(index)"></image>
</view> </view>
</template> </template>
</view> -->
<!--单张 宫格切换-->
<view class="myPhoto-title">
<view class="title-click" :class="titleclick==1?'title-clickAct':''" @click="clickActFun(1)">
单照片
<view class="click-line"></view>
</view>
<view class="title-click" :class="titleclick==2?'title-clickAct':''" @click="clickActFun(2)">
二宫格
<view class="click-line"></view>
</view>
<view class="title-click" :class="titleclick==3?'title-clickAct':''" @click="clickActFun(3)">
三宫格
<view class="click-line"></view>
</view>
<view class="title-click" :class="titleclick==4?'title-clickAct':''" @click="clickActFun(4)">
六宫格
<view class="click-line"></view>
</view>
</view>
<!--宫格照片数量不够-创建失败-->
<view class="feature-warn">
<view class="warn-title">生成失败</view>
<view class="warn-text">至少需要5张照片才能拼图 <text>上传照片</text></view>
</view> </view>
<!--选中的张数、加入购物车、立即购买、开始拼图 titleclick等于1显示购物车和立即购买 等于其他 显示开始拼图 进入拼图界面--> <!--选中的张数、加入购物车、立即购买、开始拼图 titleclick等于1显示购物车和立即购买 等于其他 显示开始拼图 进入拼图界面-->
<view class="feature-message"> <view class="feature-message">
<view class="message-selectNum" v-if="titleclick==1"> <!-- <view class="message-selectNum" v-if="titleclick==1">
已选中 已选中
<text class="selectNum-color">{{pictureFrameListNum}}张</text> <text class="selectNum-color">{{pictureFrameListNum}}张</text>
</view> </view>
<view class="message-selectNum" v-else> <view class="message-selectNum" v-else>
<text class="selectNum-color">最多选择{{maxChooseImg}}张</text> <text class="selectNum-color">最多选择{{maxChooseImg}}张</text>
</view> -->
<view class="message-inPhoto">
<image class="inPhoto-img" src="../static/album/icon13.png"></image>
<view class="inPhoto-text">购物车</view>
<view class="inPhoto-num">2</view>
</view> </view>
<view class="message-trading" v-if="titleclick==1"> <!-- v-if="titleclick==1" -->
<view class="message-trading">
<view class="trading-btn trading-left"> <view class="trading-btn trading-left">
<image src="../static/album/icon06.png"></image> <!-- <image src="../static/album/icon06.png"></image> -->
<view class="trading-num">2</view> <!-- <view class="trading-num">2</view> -->
加入购物车
</view> </view>
<view class="trading-btn trading-right">购买</view> <view class="trading-btn trading-right">立即购买</view>
</view> </view>
<view class="message-jigsaw" v-else>开始拼图</view> <!-- <view class="message-jigsaw" v-else>开始拼图</view> -->
</view> </view>
</view> </view>
</view> </view>
...@@ -167,26 +183,36 @@ export default { ...@@ -167,26 +183,36 @@ export default {
image:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427', image:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
checkType:false, checkType:false,
pickerChoose:false, pickerChoose:false,
width:607,
height:879,
}, },
{ {
image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg', image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
checkType:false, checkType:false,
pickerChoose:false, pickerChoose:false,
width:607,
height:879,
}, },
{ {
image:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493', image:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493',
checkType:false, checkType:false,
pickerChoose:false, pickerChoose:false,
width:607,
height:879,
}, },
{ {
image:'https://img0.baidu.com/it/u=2602636891,3687528369&fm=253&fmt=auto&app=120&f=JPEG?w=1087&h=612', image:'https://img0.baidu.com/it/u=2602636891,3687528369&fm=253&fmt=auto&app=120&f=JPEG?w=1087&h=612',
checkType:false, checkType:false,
pickerChoose:false, pickerChoose:false,
width:607,
height:879,
}, },
{ {
image:'https://img2.baidu.com/it/u=635571518,763366960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1131', image:'https://img2.baidu.com/it/u=635571518,763366960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1131',
checkType:false, checkType:false,
pickerChoose:false, pickerChoose:false,
width:607,
height:879,
}, },
], ],
checkTypeFun:true,//刷新选项 checkTypeFun:true,//刷新选项
...@@ -319,6 +345,7 @@ export default { ...@@ -319,6 +345,7 @@ export default {
flex-direction:column; flex-direction:column;
height: 100vh; height: 100vh;
background-color: #fff; background-color: #fff;
padding-bottom: 464rpx;
} }
.albumBoxAct{ .albumBoxAct{
background-color: #F5F7FA; background-color: #F5F7FA;
...@@ -344,7 +371,7 @@ export default { ...@@ -344,7 +371,7 @@ export default {
.myPhoto-title{ .myPhoto-title{
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
padding: 32rpx 60rpx 0 60rpx; padding: 32rpx 40rpx 0 40rpx;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -383,43 +410,44 @@ export default { ...@@ -383,43 +410,44 @@ export default {
background: #F5F7FA; background: #F5F7FA;
.search-left{ .search-left{
display: flex; display: flex;
.left-frame{ }
font-size: 24rpx; .left-frame{
color: #666666; font-size: 24rpx;
line-height: 64rpx; color: #666666;
padding: 0 20rpx 0 20rpx; line-height: 64rpx;
} padding: 0 20rpx 0 20rpx;
.left-frameAct{ }
width: 160rpx; .left-frameAct{
height: 64rpx; width: 160rpx;
padding:0; height: 64rpx;
font-weight: 600; padding:0;
font-size: 28rpx; font-weight: 600;
color: #333333; font-size: 28rpx;
line-height: 60rpx; color: #333333;
text-align: center; line-height: 60rpx;
background: #E6E9F4; text-align: center;
border-radius: 8rpx; background: #E6E9F4;
border: 2rpx solid #DAE0EB; border-radius: 8rpx;
} border: 2rpx solid #DAE0EB;
} }
.search-right{ .search-right{
display: flex; display: flex;
.right-addressClick{ }
display: flex; .right-addressClick{
font-weight: 600; display: flex;
font-size: 24rpx; font-weight: 600;
color: #333333; font-size: 24rpx;
line-height: 64rpx; color: #333333;
position: relative; line-height: 64rpx;
.address-triangle{ position: relative;
width: 0px; .address-triangle{
height: 0px; width: 0px;
margin: auto; height: 0px;
margin-left: 12rpx; margin: auto;
border: 10rpx solid transparent; margin-left: 12rpx;
border-top: 10rpx solid #D8D8D8; border: 10rpx solid transparent;
} border-top: 10rpx solid #333333;
margin-top: 25rpx;
} }
} }
} }
...@@ -531,8 +559,8 @@ export default { ...@@ -531,8 +559,8 @@ export default {
left: 0; left: 0;
z-index: 10; z-index: 10;
.swiper{ .swiper{
width: 680rpx; width: 607rpx;
height: 956rpx;//510rpx height: 879rpx;//510rpx
margin: 0 auto; margin: 0 auto;
background: #F5F7FA; background: #F5F7FA;
margin-top: 80rpx; margin-top: 80rpx;
...@@ -545,8 +573,8 @@ export default { ...@@ -545,8 +573,8 @@ export default {
height: 32rpx; height: 32rpx;
background: transparent; background: transparent;
position: absolute; position: absolute;
right: 56rpx; right: 22rpx;
bottom: 60rpx; bottom: 22rpx;
z-index: 11; z-index: 11;
/deep/ .wx-checkbox-input{ /deep/ .wx-checkbox-input{
width: 32rpx; width: 32rpx;
...@@ -570,7 +598,7 @@ export default { ...@@ -570,7 +598,7 @@ export default {
} }
.myPhoto-bottom{ .myPhoto-bottom{
width: 100%; width: 100%;
height: 314rpx; height: 464rpx;
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
...@@ -578,22 +606,21 @@ export default { ...@@ -578,22 +606,21 @@ export default {
.bottom-tips{ .bottom-tips{
width: 726rpx; width: 726rpx;
height: 64rpx; height: 64rpx;
background: #FFF6E8; background: #FFEFC9;
border-radius: 8rpx 8rpx 0rpx 0rpx; border-radius: 8rpx 8rpx 0rpx 0rpx;
border: 2rpx solid #FE6600;
box-sizing: border-box; box-sizing: border-box;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
color: #FE6600; color: #9A5500;
text-align: center; padding: 0 26rpx;
line-height: 60rpx; line-height: 64rpx;
margin: 0 auto; margin: 0 auto;
} }
.bottom-feature{ .bottom-feature{
width: 100%; width: 100%;
height: 250rpx; height: 400rpx;
background-color: #fff; background-color: #fff;
padding: 20rpx 24rpx 0 24rpx; padding: 0rpx 0rpx 0 0rpx;
.feature-list{ .feature-list{
display: flex; display: flex;
width: 100%; width: 100%;
...@@ -620,8 +647,9 @@ export default { ...@@ -620,8 +647,9 @@ export default {
.feature-message{ .feature-message{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 64rpx; border-top: 2rpx solid #F5F5F5;
margin-top: 6rpx; padding: 0 40rpx 0 40rpx;
height: 120rpx;
.message-selectNum{ .message-selectNum{
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
...@@ -635,44 +663,51 @@ export default { ...@@ -635,44 +663,51 @@ export default {
.message-trading{ .message-trading{
display: flex; display: flex;
position: relative; position: relative;
margin-top: 20rpx;
.trading-btn{ .trading-btn{
width: 160rpx; width: 220rpx;
height: 64rpx; height: 80rpx;
position: relative; position: relative;
} }
.trading-left{ .trading-left{
background: #FF9F43; background: #FFB143;
border-radius: 200rpx 0rpx 0rpx 200rpx; border-radius: 40rpx 0rpx 0rpx 40rpx;
image{
width: 40rpx;
height: 40rpx;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
.trading-num{
width: 42rpx;
height: 44rpx;
border-radius: 50%;
background: #FFFFFF;
line-height: 44rpx;
text-align: center; text-align: center;
font-weight: bold; line-height: 80rpx;
font-size: 28rpx; font-size: 28rpx;
color: #FE6600; font-weight: 600;
position: absolute; text-align: center;
right: 12rpx; color: #FFFFFF;
top: -22rpx; // image{
// width: 40rpx;
// height: 40rpx;
// margin: auto;
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// }
} }
// .trading-num{
// width: 42rpx;
// height: 44rpx;
// border-radius: 50%;
// background: #FFFFFF;
// line-height: 44rpx;
// text-align: center;
// font-weight: bold;
// font-size: 28rpx;
// color: #FE6600;
// position: absolute;
// right: 12rpx;
// top: -22rpx;
// }
.trading-right{ .trading-right{
background: #FE6600; background: #FE6600;
border-radius: 0rpx 200rpx 200rpx 0rpx; border-radius: 0rpx 200rpx 200rpx 0rpx;
text-align: center; text-align: center;
line-height: 64rpx; line-height: 80rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
...@@ -690,6 +725,60 @@ export default { ...@@ -690,6 +725,60 @@ export default {
line-height: 64rpx; line-height: 64rpx;
text-align: center; text-align: center;
} }
.message-inPhoto{
width: 60rpx;
margin-top: 24rpx;
position: relative;
.inPhoto-img{
display: block;
width: 44rpx;
height: 44rpx;
margin: 0 auto 4rpx auto;
}
.inPhoto-text{
font-weight: 400;
font-size: 20rpx;
color: #666666;
text-align: center;
line-height: 20rpx;
}
.inPhoto-num{
width: 24rpx;
height: 24rpx;
background: #FFFFFF;
border-radius: 12rpx;
border: 2rpx solid #FE6600;
font-size: 18rpx;
color: #FE6600;
line-height: 20rpx;
text-align: center;
position: absolute;
right: -2rpx;
top: -4rpx;
}
}
}
.feature-warn{
width: 750rpx;
height: 180rpx;
padding-top: 42rpx;
.warn-title{
font-weight: 400;
font-size: 32rpx;
color: #333333;
line-height: 48rpx;
text-align: center;
}
.warn-text{
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 48rpx;
text-align: center;
text{
color: #165DFF;
}
}
} }
} }
} }
......
pages/album/photoAccount/photoAccount.vue 0 → 100644
View file @ ffeaaa84
<template>
<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
<!--头部 切换账号-->
<view class="nav-bar" :style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
&nbsp;
</view>
<!--切换账号-->
<view class="account-title">点击切换账号</view>
<!--账号列表-->
<view class="account-list">
<view class="list-num">153****6923</view>
<view class="list-new">当前使用</view>
</view>
<view class="account-list">
<view class="list-num">152****7987</view>
</view>
<!--添加账号-->
<view class="account-add">
<view class="add-icon">
<u-icon name="plus"></u-icon>
</view>
<view class="add-text">添加账号</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度
}
},
onLoad(option) {
this.recordDeviceInfo()
},
methods: {
recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
this.albumBoxTop = this.statusBarHeight+this.navHeight
},
returnClick() {//头部 点击返回
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style scoped lang="scss">
.albumBox{
display: flex;
flex-direction:column;
height: 100vh;
background-color: #fff;
padding-bottom: 464rpx;
}
.nav-bar {
width: 100%;
justify-content:center;
font-size: 36rpx;
font-weight: 700;
padding: 0 24rpx 0 24rpx;
position: fixed;
top: 0;
left: 0;
z-index: 10;
/deep/ .u-icon{
margin: auto;
position: absolute;
left: 24rpx;
top: 0;
bottom: 0;
}
}
.account-title{
font-weight: 400;
font-size: 48rpx;
color: #000000;
line-height: 66rpx;
text-align: center;
margin-top: 178rpx;
margin-bottom: 152rpx;
}
.account-list{
display: flex;
justify-content: space-between;
width: 670rpx;
height: 154rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx #EDEDED;
border-radius: 16rpx;
border: 2rpx solid #F5F5F5;
padding: 0 40rpx 0 40rpx;
margin: 0 auto 40rpx auto;
.list-num{
font-weight: 600;
font-size: 32rpx;
color: #333333;
line-height: 154rpx;
}
.list-new{
font-weight: 400;
font-size: 28rpx;
color: #00B42B;
line-height: 154rpx;
}
}
.account-add{
display: flex;
width: 670rpx;
height: 154rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx #EDEDED;
border-radius: 16rpx;
border: 2rpx solid #F5F5F5;
padding: 30rpx 40rpx 0 40rpx;
margin: 0 auto;
.add-icon{
width: 92rpx;
height: 92rpx;
border-radius: 16rpx;
border: 2rpx solid #BDC3CE;
position: relative;
/deep/ .u-icon__icon{
font-weight: bold !important;
font-size: 42rpx !important;
line-height: 92rpx !important;
margin: 0 auto;
color: #BDC3CE !important;
}
}
.add-text{
font-weight: 600;
font-size: 32rpx;
color: #999999;
line-height: 92rpx;
margin-left: 40rpx;
}
}
</style>
pages/album/photoJigsaw/photoJigsaw - 副本 (2).vue 0 → 100644
View file @ ffeaaa84
<template>
<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
<!--头部 我的相片-->
<view class="nav-bar" :style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
我的相片
</view>
<!--图片拼图-->
<view class="jigsaw-picture" data-type="view" id="jigsawPicture" ref="jigsawPicture">
<template v-for="(item,index) in pictureJigsawPosition">
<view class="picture-position" @scroll="onScroll($event,index)" :key="index" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
<image class="queryInfo"
data-type="image" :data-src="item.url" :data-widthonce="item.width" :data-heightonce="item.height" :src="item.url"
:data-tailorx="item.left" :data-tailory="item.top" :data-id="item.id"
:class="item.id"
@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image>
</view>
</template>
<image class="picture-backgrounImg queryInfo"
data-type="image" data-src="../static/album/backgroundImgTo.png" data-widthonce="750" data-heightonce="1100"
data-tailorx="0" data-tailory="0"
src="../static/album/backgroundImgTo.png"></image>
</view>
<button @click="toCanvas" style="top:150rpx;position: absolute;">按钮</button>
<!--画图板-->
<view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}">
<canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas>
</view>
<!--脚部模板-->
<view class="jigsaw-template">
<view class="template-list template-listAct">
<image class="list-img" src="../static/album/DIY.png"></image>
</view>
<view class="template-list">
<image class="list-img" src="../static/album/DIY.png"></image>
</view>
<view class="template-list">
<image class="list-img" src="../static/album/DIY.png"></image>
</view>
</view>
<!--脚部购物车-->
<view class="jigsaw-btoom">
<view class="bottom-pictureFrame">
<view class="pictureFrame pictureFrameAct">金属框</view>
<view class="pictureFrame">木框</view>
<view class="pictureFrame">无框</view>
</view>
<view class="message-trading">
<view class="trading-btn trading-left">
<image src="../static/album/icon06.png"></image>
<view class="trading-num">2</view>
</view>
<view class="trading-btn trading-right">购买</view>
</view>
</view>
<!--脚部模板开关-->
<view class="jigsaw-switch" :class="switchType!=true?'jigsaw-switchAct':''">
<image v-if="switchType==true" class="jigsaw-switchImg" src="../static/album/icon09.png"></image>
<image v-else class="jigsaw-switchImg" src="../static/album/icon10.png"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
screenWidth:0,//屏幕宽度
statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度
pictureJigsawPosition:[//图片框位置
{
id:'img1',
url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
width:'299',
height:'384',
top:'184',
left:'74',
radius:'0',
},
{
id:'img2',
url:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
width:'299',
height:'384',
top:'184',
left:'387',
radius:'0',
},
{
id:'img3',
url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
width:'299',
height:'384',
top:'640',
left:'74',
radius:'0',
},
],
transpositionStartMes:{},
transpositionStartIndex:0,
textCanvas: null, // 初始化 canvas 值
canvasMaskNum:0, //渲染次数
canvasMaskType:false,
switchType:true,//模板开关按钮
}
},
onLoad(option) {
this.recordDeviceInfo()//记录设备信息
//获取当前view的宽度
const query = uni.createSelectorQuery().in(this)
query.select('.jigsaw-picture').boundingClientRect(res => {
this.screenWidth = res.width
}).exec()
},
methods: {
onScroll(event) {// event.detail 包含了滚动位置信息
console.log('滚动位置：', event.detail)
},
recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
this.albumBoxTop = this.statusBarHeight+this.navHeight
},
returnClick() {//头部 点击返回
uni.navigateBack({
delta: 1
})
},
//基础换位逻辑
//1.获取当前位置。确定开始位置的图片值
//2.获取终点位置
//3.循环终点位置。确实终点位置是否再开始位置，若不在，则将开始位置和终点位置图片互换
handleTouchMove(event,index) {
},
handleTouchStart(event,index) {//changedTouches[0] pageX横向 pageY属相 //rect (top, right, bottom, left)
this.transpositionStartMes = event.changedTouches[0]
this.transpositionStartIndex = index
},
handleTouchEnd(event,index) {//点击图片是否切换
//距离头部高度
var navHeight = this.pxToRpx(this.albumBoxTop)
//获取终点位置
var endEvent = event.changedTouches[0]
//参数重组 将参数从当前参数转换为 750rpx的数值
var newScale = parseInt(endEvent.pageX/this.screenWidth*750)//换算 满宽在哪
var newRemain = parseInt((endEvent.pageY-navHeight)/this.screenWidth*750)//换算 满宽在哪 pageY-navHeight 当前手指位置-导航栏高度 为现在手指再DIV内的高度
endEvent.pageX = newScale
endEvent.pageY = newRemain
//循环是否在某个元素框里面
var newInIndex = null
this.pictureJigsawPosition.forEach((item,index)=>{
var overWidth = parseInt(item.width)+parseInt(item.left)
var overHeight = parseInt(item.height)+parseInt(item.top)
if(endEvent.pageX>=item.left&&endEvent.pageX<=overWidth&&endEvent.pageY>=item.top&&endEvent.pageY<=overHeight){
newInIndex = index
}
})
//确定进入其他元素框内时 图片对换
if(this.transpositionStartIndex!==newInIndex&&newInIndex!==null){
var indexOne = JSON.parse(JSON.stringify(this.pictureJigsawPosition[this.transpositionStartIndex].url))
var indexNew = JSON.parse(JSON.stringify(this.pictureJigsawPosition[newInIndex].url))
this.pictureJigsawPosition[this.transpositionStartIndex].url = JSON.parse(JSON.stringify(indexNew))
this.pictureJigsawPosition[newInIndex].url = JSON.parse(JSON.stringify(indexOne))
}
},
// px转rpx 将头部导航栏PX转换为RPX
pxToRpx(px) {
//计算比例
let scale = uni.upx2px(100)/100
return px/scale
},
toCanvas(){
let that = this
this.canvasMaskType = true
let promiseArray = []
// 1.先查询要绘制的image相关属性数据
// 这里我将需要查询的所有image的类名都设置为queryInfo
uni.createSelectorQuery().selectAll('.queryInfo').boundingClientRect().exec((res)=>{
promiseArray = JSON.parse(JSON.stringify(res[0]))
var imgList = JSON.parse(JSON.stringify(res[0]))//用于图片自裁剪
var promiseArrayNum= promiseArray[promiseArray.length-1].top
for(let i=0;i<promiseArray.length;i++){
let type = 'image'
let src= promiseArray[i].dataset.src
let posX = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth) //如果向左位移则需要用框的
let posY = parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)//parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)
let tailorx = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth)-promiseArray[i].left
if(tailorx<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
tailorx = 0
}
let tailory = parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)-(promiseArray[i].top-promiseArrayNum)
if(tailory<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
tailory = 0
}
let width = promiseArray[i].width
let height = promiseArray[i].height
let swidth = parseInt(promiseArray[i].dataset.widthonce/750*this.screenWidth)///750*this.screenWidth
let sheight = parseInt(promiseArray[i].dataset.heightonce/750*this.screenWidth)///750*this.screenWidth
promiseArray[i]={
type:'image',
src: src,
width:width,
height: height,
swidth,
sheight,
posX:posX,
posY:posY,
tailorx:tailorx,
tailory:tailory,
}
}
console.log('获取到信息：', promiseArray)
this.drowImg(promiseArray)
})
},
drowImg(promiseArray){ //绘制图片
let that = this
// uni-app 中，不管是小程序，app，h5 在获取元素实例时，都是统一的方法,只要获取元素的宽高
uni.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true })
.exec((res) => {
// 微信小程序绘制
let textCanvas = that.textCanvas = res[0].node // 获取元素实例
let textCtx = textCanvas.getContext('2d') // 创建二维绘图
// 获取设备设备像素比
const dpr = uni.getSystemInfoSync().pixelRatio
textCanvas.width = res[0].width * dpr // 设置canvas像素宽
textCanvas.height = res[0].height * dpr // 设置canvas像素高
textCtx.clearRect(0, 0, res[0].width, res[0].height) // 设置画布大小
textCtx.scale(dpr, dpr)
// 这里开始绘制canvas内容，绘制的过程当中，不知道是小程序的问题，还是什么问题在绘制有背景图片的内容时，
// 文字内容必须要延迟绘制，也就是要定时器延迟一定时间才能绘制，要不然就会将文字覆盖在图片下方。
// 图片的绘制
for(let i = 0; i < promiseArray.length; i++){
const tx = textCanvas.createImage()
tx.src = promiseArray[i].src // 线上地址或者本地地址都可以
tx.width = promiseArray[i].width
tx.height = promiseArray[i].height
tx.onload = () => {
// 图片 裁剪 ：X Y 宽度 高度
//promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight-1,
if(i==promiseArray.length-1){
textCtx.drawImage(tx, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
}else{
textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight*1.72, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
}
}
}
})
},
}
}
</script>
<style scoped lang="scss">
.albumBox{
// display: flex;
// flex-direction:column;
height: 100VH;
background: #F5F7FA;
overflow: auto;
}
.nav-bar {
width: 100%;
justify-content:center;
font-size: 36rpx;
font-weight: 700;
padding: 0 24rpx 0 24rpx;
position: fixed;
top: 0;
left: 0;
z-index: 10;
/deep/ .u-icon{
margin: auto;
position: absolute;
left: 24rpx;
top: 0;
bottom: 0;
}
}
.jigsaw-picture{
width: 750rpx;
height: 1100rpx;
margin-top: 86rpx;
position: relative;
.picture-backgrounImg{
width: 750rpx;
height: 1100rpx;
}
.picture-position{
border:solid 1px #333333;
overflow: auto;
position: absolute;
image{
display: block;
height: 100%;
}
}
.picture-positionBox{
width: 750rpx;
height: 1100rpx;
position: absolute;
top: 0;
left: 0;
}
}
.jigsaw-canvas{
display: block;
width: 750rpx;
height: 1100rpx;
}
.jigsaw-canvasMask{
display: block;
width: 750rpx;
padding-top: 86rpx;
position: absolute;
left: 0;
z-index: -10;
}
.jigsaw-canvasMaskAct{
z-index: 100;
}
.jigsaw-template{
display: flex;
width: 100%;
height: 180rpx;
padding: 20rpx;
background-color: #fff;
overflow: auto;
position: fixed;
bottom: 100rpx;
left: 0;
z-index: 110;
.template-list{
width: 108rpx;
height: 160rpx;
border-radius: 9rpx;
border: 3rpx solid #EDEDED;
box-sizing: border-box;
margin-right: 20rpx;
position: relative;
.list-img{
display: block;
width: 92rpx;
height: 138rpx;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
.template-listAct{
border: 3rpx solid #FE6600;
}
}
.jigsaw-btoom{
display: flex;
justify-content: space-between;
width: 100%;
height: 100rpx;
padding: 18rpx 32rpx 0 20rpx;
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
z-index: 110;
.bottom-pictureFrame{
display: flex;
width: 324rpx;
padding-top: 6rpx;
overflow: auto;
.pictureFrame{
width: 108rpx;
height: 48rpx;
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 48rpx;
text-align: center;
}
.pictureFrameAct{
background: #F7F8FA;
border-radius: 24rpx;
color: #333333;
font-weight: 600;
}
}
.message-trading{
display: flex;
position: relative;
.trading-btn{
width: 160rpx;
height: 64rpx;
position: relative;
}
.trading-left{
background: #FF9F43;
border-radius: 200rpx 0rpx 0rpx 200rpx;
image{
width: 40rpx;
height: 40rpx;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
.trading-num{
width: 42rpx;
height: 44rpx;
border-radius: 50%;
background: #FFFFFF;
line-height: 44rpx;
text-align: center;
font-weight: bold;
font-size: 28rpx;
color: #FE6600;
position: absolute;
right: 12rpx;
top: -22rpx;
}
.trading-right{
background: #FE6600;
border-radius: 0rpx 200rpx 200rpx 0rpx;
text-align: center;
line-height: 64rpx;
font-size: 28rpx;
font-weight: 600;
text-align: center;
color: #FFFFFF;
}
}
}
.jigsaw-switch{
width: 52rpx;
height: 52rpx;
position: fixed;
bottom: 220rpx;
right: 32rpx;
z-index: 110;
image{
display: block;
width: 52rpx;
height: 52rpx;
}
}
.jigsaw-switchAct{
bottom: 144rpx;
}
</style>
pages/album/photoJigsaw/photoJigsaw.vue
View file @ ffeaaa84
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
我的相片 我的相片
</view> </view>
<!--图片拼图--> <!--图片拼图-->
<view class="jigsaw-picture" data-type="view" id="jigsawPicture" ref="jigsawPicture"> <view class="jigsaw-picture" data-type="view" id="jigsawPicture" ref="jigsawPicture" v-if="textCanvasType==true">
<template v-for="(item,index) in pictureJigsawPosition"> <template v-for="(item,index) in pictureJigsawPosition">
<view class="picture-position" @scroll="onScroll($event,index)" :key="index" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}"> <view class="picture-position" @scroll="onScroll($event,index)" :key="index" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
...@@ -22,44 +22,84 @@ ...@@ -22,44 +22,84 @@
data-tailorx="0" data-tailory="0" data-tailorx="0" data-tailory="0"
src="../static/album/backgroundImgTo.png"></image> src="../static/album/backgroundImgTo.png"></image>
</view> </view>
<button @click="toCanvas">按钮</button> <button @click="toCanvas" style="top:0rpx;position: absolute;">按钮</button>
<!--画图板--> <!--画图板-->
<view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}"> <view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}">
<canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas> <canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas>
</view> </view>
<!--脚部模板-->
<view class="jigsaw-template"> <!--脚部选择相片、加入购物车、直接购买 v-if="pictureFrameListNum>0"-->
<view class="template-list template-listAct"> <view class="myPhoto-bottom" v-if="bottomCheckType==true">
<image class="list-img" src="../static/album/DIY.png"></image> <view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
</view> <view class="bottom-feature">
<view class="template-list"> <!--单张 宫格切换-->
<image class="list-img" src="../static/album/DIY.png"></image> <view class="myPhoto-title">
</view> <view class="title-click" :class="titleclick==1?'title-clickAct':''" @click="clickActFun(1)">
<view class="template-list"> 单照片
<image class="list-img" src="../static/album/DIY.png"></image> <view class="click-line"></view>
</view>
<view class="title-click" :class="titleclick==2?'title-clickAct':''" @click="clickActFun(2)">
二宫格
<view class="click-line"></view>
</view>
<view class="title-click" :class="titleclick==3?'title-clickAct':''" @click="clickActFun(3)">
三宫格
<view class="click-line"></view>
</view>
<view class="title-click" :class="titleclick==4?'title-clickAct':''" @click="clickActFun(4)">
六宫格
<view class="click-line"></view>
</view>
</view>
<!--宫格照片数量不够-创建失败-->
<view class="feature-warn">
<view class="warn-pattern">
<image class="pattern-img" src="../static/album/DIY.png"></image>
</view>
<view class="warn-pattern warn-patternAct">
<image class="pattern-img" src="../static/album/DIY.png"></image>
</view>
</view>
<!--选中的张数、加入购物车、立即购买、开始拼图 titleclick等于1显示购物车和立即购买 等于其他 显示开始拼图 进入拼图界面-->
<view class="feature-message">
<view class="message-inPhoto">
<image class="inPhoto-img" src="../static/album/icon13.png"></image>
<view class="inPhoto-text">购物车</view>
<view class="inPhoto-num">2</view>
</view>
<!-- v-if="titleclick==1" -->
<view class="message-trading">
<view class="trading-btn trading-left">
加入购物车
</view>
<view class="trading-btn trading-right">立即购买</view>
</view>
</view>
</view> </view>
</view> </view>
<!--脚部购物车--> <view class="myPhoto-bottom myPhoto-bottomAct" v-else>
<view class="jigsaw-btoom"> <view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
<view class="bottom-pictureFrame"> <view class="bottom-checkCase">
<view class="pictureFrame pictureFrameAct">金属框</view> <view class="checkCase-title">
<view class="pictureFrame">木框</view> 编辑图片
<view class="pictureFrame">无框</view> <image src="../static/album/photoCheck01.png"></image>
</view> </view>
<view class="message-trading"> <view class="checkCase-btn">
<view class="trading-btn trading-left"> <view class="btn-list">
<image src="../static/album/icon06.png"></image> <image src="../static/album/photoCheck02.png"></image>
<view class="trading-num">2</view> <view>替换</view>
</view>
<view class="btn-list">
<image src="../static/album/photoCheck03.png"></image>
<view>旋转90°</view>
</view>
<view class="btn-list">
<image src="../static/album/photoCheck04.png"></image>
<view>水平翻转</view>
</view>
</view> </view>
<view class="trading-btn trading-right">购买</view>
</view> </view>
</view> </view>
<!--脚部模板开关-->
<view class="jigsaw-switch" :class="switchType!=true?'jigsaw-switchAct':''">
<image v-if="switchType==true" class="jigsaw-switchImg" src="../static/album/icon09.png"></image>
<image v-else class="jigsaw-switchImg" src="../static/album/icon10.png"></image>
</view>
</view> </view>
</template> </template>
...@@ -73,32 +113,34 @@ export default { ...@@ -73,32 +113,34 @@ export default {
navHeight: 0,// 导航栏高度 navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度 albumBoxTop:0,//顶部高度
titleclick:1,//1单照片 2二宫格 3三宫格 4六宫格
pictureJigsawPosition:[//图片框位置 pictureJigsawPosition:[//图片框位置
{ {
id:'img1', id:'img1',
url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg', url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
width:'299', width:'243',
height:'384', height:'320',
top:'184', top:'151',
left:'74', left:'61',
radius:'0', radius:'0',
}, },
{ {
id:'img2', id:'img2',
url:'http://lx.pangdly.com/img/liangjiang.097258e.jpg', url:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
width:'299', width:'243',
height:'384', height:'320',
top:'184', top:'151',
left:'387', left:'312',
radius:'0', radius:'0',
}, },
{ {
id:'img3', id:'img3',
url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg', url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
width:'299', width:'346',
height:'384', height:'266',
top:'640', top:'530',
left:'74', left:'61',
radius:'0', radius:'0',
}, },
], ],
...@@ -110,7 +152,8 @@ export default { ...@@ -110,7 +152,8 @@ export default {
canvasMaskNum:0, //渲染次数 canvasMaskNum:0, //渲染次数
canvasMaskType:false, canvasMaskType:false,
switchType:true,//模板开关按钮 textCanvasType:true,//临时控制画布显隐
bottomCheckType:false,//控制脚部按钮切换
} }
}, },
onLoad(option) { onLoad(option) {
...@@ -123,6 +166,9 @@ export default { ...@@ -123,6 +166,9 @@ export default {
}, },
methods: { methods: {
clickActFun(num){//宫格选择
this.titleclick = num
},
onScroll(event) {// event.detail 包含了滚动位置信息 onScroll(event) {// event.detail 包含了滚动位置信息
console.log('滚动位置：', event.detail) console.log('滚动位置：', event.detail)
}, },
...@@ -188,38 +234,61 @@ export default { ...@@ -188,38 +234,61 @@ export default {
// 这里我将需要查询的所有image的类名都设置为queryInfo // 这里我将需要查询的所有image的类名都设置为queryInfo
uni.createSelectorQuery().selectAll('.queryInfo').boundingClientRect().exec((res)=>{ uni.createSelectorQuery().selectAll('.queryInfo').boundingClientRect().exec((res)=>{
promiseArray = JSON.parse(JSON.stringify(res[0])) promiseArray = JSON.parse(JSON.stringify(res[0]))
var imgList = JSON.parse(JSON.stringify(res[0]))//用于图片自裁剪
var promiseArrayNum= promiseArray[promiseArray.length-1].top var promiseArrayNum= promiseArray[promiseArray.length-1].top
console.log('获取到信息头部：', res[0])
for(let i=0;i<promiseArray.length;i++){ console.log(this.screenWidth)
let type = 'image' for(let i=0;i<=promiseArray.length-1;i++){
let src= promiseArray[i].dataset.src if(i==promiseArray.length-1){//处理背景图
let posX = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth) //如果向左位移则需要用框的 let type = 'image'
let posY = parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)//parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth) let src= promiseArray[i].dataset.src
let tailorx = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth)-promiseArray[i].left let posX = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth) //图片所在画板的X轴数据
if(tailorx<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0 let posY = parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth) //图片所在画板的Y轴数据
tailorx = 0 let width = promiseArray[i].width//图片原始的宽度
} let height = promiseArray[i].height//图片原始的高度
let tailory = parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)-(promiseArray[i].top-promiseArrayNum) let swidth = promiseArray[i].width//要使用的图像的宽度
if(tailory<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0 let sheight = promiseArray[i].height//要使用的图像的高度
tailory = 0 promiseArray[i]={
} type:'image',
let width = promiseArray[i].width src: src,
let height = promiseArray[i].height width:width,
let swidth = parseInt(promiseArray[i].dataset.widthonce/750*this.screenWidth)///750*this.screenWidth height: height,
let sheight = parseInt(promiseArray[i].dataset.heightonce/750*this.screenWidth)///750*this.screenWidth swidth,
promiseArray[i]={ sheight,
type:'image', posX:posX,
src: src, posY:posY,
width:width, }
height: height, }else{//处理置入的图片
swidth, let type = 'image'
sheight, let src= promiseArray[i].dataset.src
posX:posX, let posX = parseInt(promiseArray[i].dataset.tailorx/606*this.screenWidth) //图片所在画板的X轴数据
posY:posY, let posY = parseInt(promiseArray[i].dataset.tailory/606*this.screenWidth) //图片所在画板的Y轴数据
tailorx:tailorx, //截图的初始X和Y轴
tailory:tailory, let tailorx = parseInt(promiseArray[i].dataset.tailorx/606*this.screenWidth)-promiseArray[i].left
if(tailorx<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
tailorx = 0
}
let tailory = parseInt(promiseArray[i].dataset.tailory/606*this.screenWidth)-(promiseArray[i].top-promiseArrayNum)
if(tailory<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
tailory = 0
}
let width = promiseArray[i].width//图片原始的宽度
let height = promiseArray[i].height//图片原始的高度
let swidth = parseInt(promiseArray[i].dataset.widthonce/606*this.screenWidth)//要使用的图像的宽度
let sheight = parseInt(promiseArray[i].dataset.heightonce/606*this.screenWidth)//要使用的图像的高度
promiseArray[i]={
type:'image',
src: src,
width:width,
height: height,
swidth,
sheight,
posX:posX,
posY:posY,
tailorx:tailorx,
tailory:tailory,
}
} }
} }
console.log('获取到信息：', promiseArray) console.log('获取到信息：', promiseArray)
this.drowImg(promiseArray) this.drowImg(promiseArray)
...@@ -245,22 +314,24 @@ export default { ...@@ -245,22 +314,24 @@ export default {
// 这里开始绘制canvas内容，绘制的过程当中，不知道是小程序的问题，还是什么问题在绘制有背景图片的内容时， // 这里开始绘制canvas内容，绘制的过程当中，不知道是小程序的问题，还是什么问题在绘制有背景图片的内容时，
// 文字内容必须要延迟绘制，也就是要定时器延迟一定时间才能绘制，要不然就会将文字覆盖在图片下方。 // 文字内容必须要延迟绘制，也就是要定时器延迟一定时间才能绘制，要不然就会将文字覆盖在图片下方。
// 图片的绘制 // 图片的绘制
for(let i = 0; i < promiseArray.length; i++){ for(let i = 0; i <= promiseArray.length-1; i++){
const tx = textCanvas.createImage() const tx = textCanvas.createImage()
tx.src = promiseArray[i].src // 线上地址或者本地地址都可以 tx.src = promiseArray[i].src // 线上地址或者本地地址都可以
tx.width = promiseArray[i].width tx.width = promiseArray[i].width
tx.height = promiseArray[i].height tx.height = promiseArray[i].height
tx.onload = () => { tx.onload = () => {
// 图片 裁剪 ：X Y 宽度 高度 // 图片 裁剪 ：X Y 宽度 高度
//promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight-1, if(i==promiseArray.length-1){//背景
if(i==promiseArray.length-1){ console.log('123456')
textCtx.drawImage(tx, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight) textCtx.drawImage(tx, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
}else{ }else{//插入的图片
textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight*1.72, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight) //promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight*1.72,
textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth*1.03, promiseArray[i].sheight*1.4, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
} }
} }
} }
this.textCanvasType=false
}) })
}, },
} }
...@@ -294,13 +365,13 @@ export default { ...@@ -294,13 +365,13 @@ export default {
} }
} }
.jigsaw-picture{ .jigsaw-picture{
width: 750rpx; width: 606rpx;
height: 1100rpx; height: 910rpx;
margin-top: 86rpx; margin: 38rpx auto 0 auto;
position: relative; position: relative;
.picture-backgrounImg{ .picture-backgrounImg{
width: 750rpx; width: 606rpx;
height: 1100rpx; height: 910rpx;
} }
.picture-position{ .picture-position{
border:solid 1px #333333; border:solid 1px #333333;
...@@ -308,7 +379,6 @@ export default { ...@@ -308,7 +379,6 @@ export default {
position: absolute; position: absolute;
image{ image{
display: block; display: block;
height: 100%;
} }
} }
.picture-positionBox{ .picture-positionBox{
...@@ -321,151 +391,224 @@ export default { ...@@ -321,151 +391,224 @@ export default {
} }
.jigsaw-canvas{ .jigsaw-canvas{
display: block; display: block;
width: 750rpx; width: 606rpx;
height: 1100rpx; height: 910rpx;
} }
.jigsaw-canvasMask{ .jigsaw-canvasMask{
display: block; display: block;
width: 750rpx; width: 606rpx;
padding-top: 86rpx; padding-top: 38rpx;
margin: auto;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0;
z-index: -10; z-index: -10;
} }
.jigsaw-canvasMaskAct{ .jigsaw-canvasMaskAct{
z-index: 100; z-index: 100;
} }
.jigsaw-template{ .myPhoto-title{
display: flex;
width: 100%; width: 100%;
height: 180rpx; height: 100rpx;
padding: 20rpx; padding: 32rpx 40rpx 0 40rpx;
background-color: #fff; background-color: #fff;
overflow: auto; display: flex;
position: fixed; justify-content: space-between;
bottom: 100rpx; .title-click{
left: 0; height: 68rpx;
z-index: 110; font-weight: 600;
.template-list{ font-size: 28rpx;
width: 108rpx; color: #999999;
height: 160rpx; line-height: 28rpx;
border-radius: 9rpx;
border: 3rpx solid #EDEDED;
box-sizing: border-box;
margin-right: 20rpx;
position: relative; position: relative;
.list-img{ .click-line{
display: block; display: none;
width: 92rpx; width: 100%;
height: 138rpx; height: 6rpx;
margin: auto; background: #000000;
border-radius: 4rpx;
position: absolute; position: absolute;
top: 0; bottom: 18rpx;
right: 0;
bottom: 0;
left: 0; left: 0;
} }
} }
.template-listAct{ .title-clickAct{
border: 3rpx solid #FE6600; font-size: 30rpx;
color: #333333;
.click-line{
display: block;
}
} }
} }
.jigsaw-btoom{ .myPhoto-bottom{
display: flex;
justify-content: space-between;
width: 100%; width: 100%;
height: 100rpx; height: 464rpx;
padding: 18rpx 32rpx 0 20rpx;
background-color: #fff;
position: fixed; position: fixed;
bottom: 0;
left: 0; left: 0;
z-index: 110; bottom: 0;
.bottom-pictureFrame{ z-index: 30;
display: flex; .bottom-tips{
width: 324rpx; width: 726rpx;
padding-top: 6rpx; height: 64rpx;
overflow: auto; background: #FFEFC9;
.pictureFrame{ border-radius: 8rpx 8rpx 0rpx 0rpx;
width: 108rpx; box-sizing: border-box;
height: 48rpx; font-weight: 400;
font-weight: 400; font-size: 24rpx;
font-size: 24rpx; color: #9A5500;
color: #999999; padding: 0 26rpx;
line-height: 48rpx; line-height: 64rpx;
text-align: center; margin: 0 auto;
}
.bottom-feature{
width: 100%;
height: 400rpx;
background-color: #fff;
padding: 0rpx 0rpx 0 0rpx;
.feature-message{
display: flex;
justify-content: space-between;
border-top: 2rpx solid #F5F5F5;
padding: 0 40rpx 0 40rpx;
height: 120rpx;
.message-trading{
display: flex;
position: relative;
margin-top: 20rpx;
.trading-btn{
width: 220rpx;
height: 80rpx;
position: relative;
}
.trading-left{
background: #FFB143;
border-radius: 40rpx 0rpx 0rpx 40rpx;
text-align: center;
line-height: 80rpx;
font-size: 28rpx;
font-weight: 600;
text-align: center;
color: #FFFFFF;
}
.trading-right{
background: #FE6600;
border-radius: 0rpx 200rpx 200rpx 0rpx;
text-align: center;
line-height: 80rpx;
font-size: 28rpx;
font-weight: 600;
text-align: center;
color: #FFFFFF;
}
}
.message-inPhoto{
width: 60rpx;
margin-top: 24rpx;
position: relative;
.inPhoto-img{
display: block;
width: 44rpx;
height: 44rpx;
margin: 0 auto 4rpx auto;
}
.inPhoto-text{
font-weight: 400;
font-size: 20rpx;
color: #666666;
text-align: center;
line-height: 20rpx;
}
.inPhoto-num{
width: 24rpx;
height: 24rpx;
background: #FFFFFF;
border-radius: 12rpx;
border: 2rpx solid #FE6600;
font-size: 18rpx;
color: #FE6600;
line-height: 20rpx;
text-align: center;
position: absolute;
right: -2rpx;
top: -4rpx;
}
}
} }
.pictureFrameAct{ .feature-warn{
background: #F7F8FA; display: flex;
border-radius: 24rpx; width: 750rpx;
color: #333333; height: 180rpx;
font-weight: 600; padding: 0 40rpx 20rpx 40rpx;
overflow-x: scroll;
white-space: nowrap;
.warn-pattern{
flex: 0 0 auto;
width: 108rpx;
height: 160rpx;
background: #FFFFFF;
border-radius: 9rpx;
border: 3rpx solid #EDEDED;
position: relative;
.pattern-img{
display: block;
width: 91rpx;
height: 133rpx;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
.warn-patternAct{
border: 3rpx solid #FE6600;
}
} }
} }
.message-trading{ }
display: flex; .myPhoto-bottomAct{
position: relative; height: 384rpx;
.trading-btn{ .bottom-checkCase{
width: 160rpx; height: 320rpx;
height: 64rpx; background-color: #fff;
.checkCase-title{
padding-top: 40rpx;
font-weight: 600;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: center;
position: relative; position: relative;
}
.trading-left{
background: #FF9F43;
border-radius: 200rpx 0rpx 0rpx 200rpx;
image{ image{
display: block;
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin: auto;
position: absolute; position: absolute;
top: 0; top: 40rpx;
right: 0; right: 24rpx;
bottom: 0;
left: 0;
} }
} }
.trading-num{ .checkCase-btn{
width: 42rpx; padding: 70rpx 120rpx 0 120rpx;
height: 44rpx; display: flex;
border-radius: 50%; justify-content: space-between;
background: #FFFFFF; .btn-list{
line-height: 44rpx; image{
text-align: center; display: block;
font-weight: bold; width: 60rpx;
font-size: 28rpx; height: 60rpx;
color: #FE6600; margin: 0 auto 16rpx auto;
position: absolute; }
right: 12rpx; view{
top: -22rpx; font-weight: 600;
} font-size: 24rpx;
.trading-right{ color: #333333;
background: #FE6600; line-height: 34rpx;
border-radius: 0rpx 200rpx 200rpx 0rpx; }
text-align: center; }
line-height: 64rpx;
font-size: 28rpx;
font-weight: 600;
text-align: center;
color: #FFFFFF;
} }
} }
} }
.jigsaw-switch{
width: 52rpx;
height: 52rpx;
position: fixed;
bottom: 220rpx;
right: 32rpx;
z-index: 110;
image{
display: block;
width: 52rpx;
height: 52rpx;
}
}
.jigsaw-switchAct{
bottom: 144rpx;
}
</style> </style>
pages/album/photoLogin/photoLogin.vue 0 → 100644
View file @ ffeaaa84
<template>
<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
<!--头部 获取相片-->
<view class="nav-bar" :style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
&nbsp;
</view>
<view class="login-title">
<view class="title-cn">获取相片</view>
<view class="title-en">Get Photos</view>
</view>
<view class="login-list">
<image class="list-img" src="../static/album/longin02.png"></image>
<input class="uni-input list-input" placeholder="请输入摄影时预留手机号" />
</view>
<view class="login-list login-listAct">
<image class="list-img" src="../static/album/longin01.png"></image>
<input class="uni-input list-input" placeholder="请输入验证码" />
<view class="list-verification">获取验证码</view>
</view>
<view class="login-btn">
登陆
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度
}
},
onLoad(option) {
this.recordDeviceInfo()
},
methods: {
recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
this.albumBoxTop = this.statusBarHeight+this.navHeight
},
returnClick() {//头部 点击返回
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style scoped lang="scss">
.albumBox{
display: flex;
flex-direction:column;
height: 100vh;
background-color: #fff;
}
.nav-bar {
width: 100%;
justify-content:center;
font-size: 36rpx;
font-weight: 700;
padding: 0 24rpx 0 24rpx;
position: fixed;
top: 0;
left: 0;
z-index: 10;
/deep/ .u-icon{
color: #333333;
margin: auto;
position: absolute;
left: 24rpx;
top: 0;
bottom: 0;
}
}
.login-title{
margin-top: 80rpx;
padding: 0 56rpx 0 56rpx;
margin-bottom: 104rpx;
.title-cn{
font-weight: 600;
font-size: 40rpx;
color: #333333;
line-height: 56rpx;
margin-bottom: 16rpx;
}
.title-en{
font-size: 28rpx;
color: #999999;
line-height: 32rpx;
}
}
.login-list{
display: flex;
width: 636rpx;
height: 98rpx;
background: #F9F9F9;
border-radius: 50rpx;
margin: 0 auto 40rpx auto;
padding: 0 40rpx 0 52rpx;
.list-img{
display: block;
width: 44rpx;
height: 44rpx;
margin-top: 28rpx;
margin-right: 24rpx;
}
.list-input{
flex: 1;
height: 98rpx;
font-weight: 400;
font-size: 28rpx;
color: #BDC3CE;
}
.list-verification{
font-weight: 400;
font-size: 28rpx;
color: #FE6600;
line-height: 98rpx;
}
}
.login-listAct{
margin-bottom: 0;
}
.login-btn{
width: 638rpx;
height: 98rpx;
background: linear-gradient( 90deg, #FFA000 0%, #FE6600 100%);
margin: 0 auto;
border-radius: 50rpx;
font-weight: 600;
font-size: 32rpx;
color: #FFFFFF;
line-height: 98rpx;
text-align: center;
margin-top: 80rpx;
}
</style>
pages/album/scanCodePrinting/scanCodePrinting.vue 0 → 100644
View file @ ffeaaa84
<template>
<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
<!--头部 选择产品-->
<view class="nav-bar" :style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
选择产品
</view>
<!--当没有相片时显示-->
<view v-if="photoList.length==0" class="scanCode-noPhoto">
<image src="../static/album/icon12.png"></image>
<view>暂无下载相片</view>
</view>
<!--横线-->
<view class="casnCode-Line"></view>
<!--当图片列表-->
<view class="casnCode-photoCase">
<template v-for="(item,index) in photoList">
<!--:class="item.checkType==true?'photoCase-listAct':''" 点击后红线 暂时放弃-->
<view class="photoCase-list" :key="index" @longtap="longTapDel(index)" @click="photoDelHide(index)">
<!-- <view class="list-title">已下载</view> -->
<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" v-if="photoListShow==true">
<checkbox :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''" />
</checkbox-group>
<image class="list-img" :src="item.url"></image>
<view class="list-delCase" @click.stop.native="longTapDelHide(index)" v-if="item.delType==true">
<view class="list-del" @click.stop.native="()=>{}">
<u-icon name="trash-fill"></u-icon>
</view>
</view>
<!-- <view class="list-bttom">点击图片编辑</view> -->
</view>
</template>
<view class="photoCase-add">
<view class="add-label">
<u-icon name="plus-circle-fill"></u-icon>
<view class="label-text">添加照片</view>
</view>
</view>
</view>
<!--脚部按钮显示-->
<view class="scanCode-btn">
<view class="btn-style" v-if="photoListType!=true">
本地上传
</view>
<view class="btn-style" v-else @click="compometsBuyFun()">
下一步
</view>
</view>
<!--脚部提示文字-->
<view class="scanCode-tips">
禁止上传反动、色情、暴力等非法及涉密图片，如有违反, 所有责任由用户自行承担.
</view>
<!--购买-->
<compometsBuy v-if="compometsBuyType==true"></compometsBuy>
</view>
</template>
<script>
import compometsBuy from './../albumComponets/compometsBuy/compometsBuy.vue'
export default {
components: {
compometsBuy
},
data() {
return {
statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度
photoList:[
{
url:'https://i1.hdslb.com/bfs/archive/f2fb0e1e4da68f67efa9fc831200bd31699976f7.jpg',
checkType:false,
delType:false,
},
{
url:'https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20240716/2/2/f808b789231e61009385f81a96ec400e.jpg',
checkType:false,
delType:false,
},
],//相片列表
photoListType:false,//当有相片选择为true
photoListShow:true,//选择后显隐刷新页面
compometsBuyType:false,//点击下一步 限时购买按钮
}
},
onLoad(option) {
this.recordDeviceInfo()
},
methods: {
recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
this.albumBoxTop = this.statusBarHeight+this.navHeight
},
returnClick() {//头部 点击返回
uni.navigateBack({
delta: 1
})
},
stopPhoto(index){//相片选择
this.photoListShow = false
if(this.photoList[index].checkType==true){
this.photoList[index].checkType=false
}else{
this.photoList[index].checkType=true
}
this.photoListType = false
this.photoList.forEach((item,index)=>{//是否被选中的图片 有则底部按钮显示未下一步
if(item.checkType==true){
this.photoListType = true
}
})
this.photoListShow = true
},
longTapDel(index){//长按删除相片按钮出现
this.photoList[index].delType=true
},
longTapDelHide(index){//点击删除按钮隐藏
this.photoList[index].delType=false
},
photoDelHide(index){//点击若无删除 则触发多选
if(this.photoList[index].delType==true){
return
}else{
this.stopPhoto(index)
}
},
compometsBuyFun(){//点击下一步显示购买页面
this.compometsBuyType = true
},
}
}
</script>
<style scoped lang="scss">
.albumBox{
display: flex;
flex-direction:column;
height: 100vh;
background-color: #fff;
padding-bottom: 230rpx;
overflow: auto;
}
.nav-bar {
width: 100%;
justify-content:center;
font-size: 36rpx;
font-weight: 700;
padding: 0 24rpx 0 24rpx;
position: fixed;
top: 0;
left: 0;
z-index: 10;
/deep/ .u-icon{
margin: auto;
position: absolute;
left: 24rpx;
top: 0;
bottom: 0;
}
}
.scanCode-noPhoto{
width: 400rpx;
height: 400rpx;
margin: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
image{
display: block;
width: 400rpx;
height: 400rpx;
}
view{
width: 100%;
font-weight: 400;
font-size: 28rpx;
color: #666666;
line-height: 40rpx;
text-align: center;
position: absolute;
left: 0;
bottom: 16rpx;
}
}
.scanCode-btn{
width: 100%;
height: 120rpx;
box-sizing: border-box;
border-top: solid 2rpx #EDEDED;
padding-top: 18rpx;
position: fixed;
left: 0;
bottom: 0;
z-index: 10;
.btn-style{
width: 670rpx;
height: 80rpx;
margin: 0 auto;
background: linear-gradient( 119deg, #FFA000 0%, #FE6600 100%);
border-radius: 40rpx;
font-weight: 600;
font-size: 32rpx;
color: #FFFFFF;
line-height: 80rpx;
text-align: center;
}
}
.casnCode-Line{
width: 750rpx;
height: 20rpx;
}
.casnCode-photoCase{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 24rpx;
.photoCase-list{
width: 340rpx;
height: 470rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx #ECF0FB;
border-radius: 8rpx;
border: 4rpx solid #E6E6E6;
box-sizing: border-box;
padding: 2rpx;
margin-bottom: 24rpx;
position: relative;
.list-img{
width: 100%;
height: 100%;
}
.list-title{
width: 100rpx;
height: 52rpx;
background: #333333;
border-radius: 8rpx 0rpx 8rpx 0rpx;
opacity: 0.5;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 52rpx;
text-align: center;
position: absolute;
top: 6rpx;
left: 6rpx;
}
.list-bttom{
width: 328rpx;
height: 52rpx;
margin: auto;
background: #333333;
border-radius: 0rpx 0rpx 8rpx 8rpx;
opacity: 0.5;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 52rpx;
text-align: center;
position: absolute;
bottom: 4rpx;
left: 6rpx;
}
.pictureFrame-check{
width: 32rpx;
height: 32rpx;
background: transparent;
position: absolute;
top: -1rpx;
right: 7rpx;
z-index: 11;
/deep/ .wx-checkbox-input{
width: 32rpx;
height: 32rpx;
background: rgba(255,255,255,1);//transparent;
border: 2rpx solid #C7C7C7;
}
/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
background: #FE6600; // 选中的颜色
}
/deep/ .wx-checkbox-input.wx-checkbox-input-checked::before {
color: #fff; // 选中后的图标默认是对号，这里吧对号变成透明颜色，就看不出来了
}
}
.pictureFrame-checkAct{
/deep/ .wx-checkbox-input{
border: solid 1px #FE6600;
}
}
.list-del{
width: 150rpx;
height: 150rpx;
border-radius: 100rpx;
background: #333333;
opacity: 0.5;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/deep/ .u-icon--right{
height: 150rpx;
}
/deep/ .u-icon__icon{
color: #FFFFFF !important;
font-size: 90rpx !important;
margin: 0 auto;
}
}
.list-delCase{
width: 340rpx;
height: 470rpx;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
.photoCase-listAct{
border: 4rpx dashed #F53F3F;
}
.photoCase-add{
width: 340rpx;
height: 470rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx #ECF0FB;
border-radius: 8rpx;
border: 2rpx solid #F5F5F5;
position: relative;
margin-bottom: 24rpx;
.add-label{
width: 100%;
height: 162rpx;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
.label-text{
margin-top: 34rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: center;
}
/deep/ .u-icon--right{
height: 90rpx;
}
/deep/ .u-icon__icon{
color: #165DFF !important;
font-size: 90rpx !important;
margin: 0 auto;
}
}
}
}
.scanCode-tips{
width: 686rpx;
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 34rpx;
margin: auto;
position: fixed;
left: 0;
right: 0;
bottom: 160rpx;
}
</style>
pages/my/order/orderList/orderList.vue
View file @ ffeaaa84
<template> <template>
<view class="productBigBox"> <view class="productBigBox">
<view class="product-SearchBox"> <!--头部点击选择类型-->
<!--头部切换--> <view class="order-search">
<view class="product-orderState"> <view class="search-list" :class="orderStatus===''?'search-listAct':''" @click="screenChange('')">
<view class="orderState-click" :class="orderStatus===''?'orderState-clickAct':''" @click="screenChange('')"> 全部
全部 <view class="list-line"></view>
<view class="click-line"> </view>
<text></text> <view class="search-list" :class="orderStatus==='0'?'search-listAct':''" @click="screenChange('0')">
</view> 待付款
</view> <view class="list-line"></view>
<view class="orderState-click" :class="orderStatus==='0'?'orderState-clickAct':''" @click="screenChange('0')"> </view>
待付款 <view class="search-list" :class="orderStatus==='2'?'search-listAct':''" @click="screenChange('2')">
<view class="click-line"> 待使用
<text></text> <view class="list-line"></view>
</view> </view>
</view> <!--暂无包邮-->
<view class="orderState-click" :class="orderStatus=='2'?'orderState-clickAct':''" @click="screenChange('2')"> <view class="search-list" :class="orderStatus==='3'?'search-listAct':''" @click="screenChange('3')" style="display: none;">
待使用 待收货
<view class="click-line"> <view class="list-line"></view>
<text></text> </view>
</view> <view class="search-list" :class="orderStatus==='5'?'search-listAct':''" @click="screenChange('5')">
</view> 待评价
<view class="orderState-click" :class="orderStatus=='3'?'orderState-clickAct':''" @click="screenChange('3')"> <view class="list-line"></view>
待收货 </view>
<view class="click-line"> </view>
<text></text> <!--头部搜索 手机号-->
</view> <view class="order-phoneSearch">
</view> <view class="phoneSearch-type" @click="show = true">
<view class="orderState-click" :class="orderStatus=='5'?'orderState-clickAct':''" @click="screenChange('5')"> <u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
待评价 <view class="type-boxOn">
<view class="click-line"> {{showAddress}}
<text></text> <view class="address-triangle"></view>
</view> </view>
</view> </view>
</view> <u-search placeholder="搜索手机号" v-model="phoneNum" shape="round" :showAction="false" :clearabled="true"></u-search>
<!--查询--> </view>
<view class="product-searchBt"> <!--身体列表-->
<view class="searchBt-left" @click="orderShow=true"> <template v-if="lists.length>0"><!--判断是否有数-->
<text>{{orderName}}</text> <template v-for="(item,index) in lists">
<u-icon v-if="orderShow==false" name="arrow-down" color="#333333" size="20"></u-icon> <view class="order-list" :key="index" v-if="item.showList" @click="orderJump(item.id,item.orderType)">
<u-icon v-else name="arrow-up" color="#333333" size="20"></u-icon> <view class="list-title">
<u-picker mode="selector" :show="orderShow" :default-selector="[orderType]" :columns="option" keyName="cateName" @confirm="industrysTypeConfirm($event)" @cancel="cancel"></u-picker> <view class="title-left">
</view> <image v-if="item.orderType==1" src="../../static/orderList/iconjingqumenpiao.png"></image>
<image v-else-if="item.orderType==2" src="../../static/orderList/iconjiudian.png"></image>
<text @click="showQueryPhone()">手机查询</text> <image v-else-if="item.orderType==3" src="../../static/orderList/iconcanyin.png"></image>
</view> <image v-else-if="item.orderType==4" src="../../static/orderList/iconliwu1.png"></image>
</view> <image v-else-if="item.orderType==5" src="../../static/orderList/iconchuzuche.png"></image>
<!--手机查询遮罩--> <image v-else-if="item.orderType==10" src="../../static/orderList/iconzuhe.png"></image>
<u-popup mode="bottom" :show="phoneQuery"> <image v-else src="../../static/orderList/iconqita.png"></image>
<view class="content"> <view>门票</view>
<view class="content-title"> </view>
订单查询 <view class="title-right" v-if="item.orderType!=10&&item.orderType!=0">
<u-icon name="close" color="#333333" size="28" @click="phoneQuery=false"></u-icon> <template v-if="item.orderType==1&&item.subOrderType!=4">
</view> {{item.orderStatus|orderStatus1}}
<view class="content-list"> </template>
<text class="list-name">手机号码</text> <template v-else-if="item.orderType==2&&item.subOrderType!=4">
<text class="list-name2">：</text> {{item.orderStatus|orderStatus2}}
<input class="uni-input" v-model.trim="touristPhone" /> </template>
</view> <template v-else-if="item.orderType==3&&item.subOrderType!=4">
<view class="content-list"> {{item.orderStatus|orderStatus3}}
<text class="list-name">姓名</text> </template>
<text class="list-name2">：</text> <template v-else-if="item.orderType==4&&item.subOrderType!=4">
<input class="uni-input" v-model.trim="touristName" /> {{item.orderStatus|orderStatus4}}
</view> </template>
<view class="confrim-btn"> <template v-else>
<u-button @click="queryPhoneOrder()">查询</u-button> {{item.orderStatus|orderStatus5}}
</view> </template>
</view> </view>
</u-popup> </view>
<!--列表--> <view class="list-name">{{item.merchantName}}({{item.productName}})</view>
<view class="product-goods" v-if="lists.length>0"> <view class="list-time">
<template v-for="(item,index) in lists"> {{item.playDate.substr(0,10)}} 有效·
<view class="product-block" :key="index" v-if="item.showList" @click="orderJump(item.id,item.orderType)"> <template v-if="item.orderType==1&&item.subOrderType!=4">{{item.orderNum}}张</template>
<view class="block-title"> <template v-else-if="item.orderType==2&&item.subOrderType!=4">{{item.orderNum}}间</template>
<view class="title-left"> <template v-else-if="item.orderType==3&&item.subOrderType!=4">{{item.orderNum}}桌</template>
<view class="left-imgBox" v-if="item.orderType==1"> <template v-else-if="item.orderType==4&&item.subOrderType!=4">{{item.orderNum}}箱</template>
<image class="left-img" src="../../static/orderList/iconjingqumenpiao.png"></image> <template v-else-if="item.orderType==10&&item.subOrderType!=4">{{item.orderNum}}张</template>
</view> <template v-else>{{item.orderNum}}份</template>
<view class="left-imgBox" v-else-if="item.orderType==2"> </view>
<image class="left-img" src="../../static/orderList/iconjiudian.png"></image> <view class="list-tips">凭「胖丁动态二维码」直接验证使用</view>
</view> <view class="list-money">¥{{item.totalMoney}}</view>
<view class="left-imgBox" v-else-if="item.orderType==3"> <view class="list-btn">
<image class="left-img" src="../../static/orderList/iconcanyin.png"></image> <view class="btn-style">下载照片</view>
</view> <view class="btn-style">导航取片</view>
<view class="left-imgBox" v-else-if="item.orderType==4"> </view>
<image class="left-img" src="../../static/orderList/iconliwu1.png"></image> </view>
</view> </template>
<view class="left-imgBox" v-else-if="item.orderType==5"> <view class="goods-NoMore" v-if="dataLengthType==true">暂无更多数据</view>
<image class="left-img" src="../../static/orderList/iconchuzuche.png"></image> </template>
</view> <view class="order-No" v-else>暂无订单信息</view>
<view class="left-imgBox" v-else-if="item.orderType==10"> </view>
<image class="left-img" src="../../static/orderList/iconzuhe.png"></image> </template>
</view>
<view class="left-imgBox" v-else> <script>
<image class="left-img" src="../../static/orderList/iconqita.png"></image>
</view> export default {
<text class="left-Name">{{item.merchantName}}({{item.productName}})</text> filters:{
</view> orderType(i){//订单类型
<view class="title-right" v-if="item.orderType!=0"> switch(i){
<template v-if="item.orderType==1&&item.subOrderType!=4"> case 0:
{{item.orderStatus|orderStatus1}} return '其他'
</template> break
<template v-else-if="item.orderType==10&&item.subOrderType!=4"> case 1:
{{item.orderStatus|orderStatus1}} return '景区'
</template> break
<template v-else-if="item.orderType==2&&item.subOrderType!=4"> case 2:
{{item.orderStatus|orderStatus2}} return '酒店'
</template> break
<template v-else-if="item.orderType==3&&item.subOrderType!=4"> case 3:
{{item.orderStatus|orderStatus3}} return '餐饮'
</template> break
<template v-else-if="item.orderType==4&&item.subOrderType!=4"> case 4:
{{item.orderStatus|orderStatus4}} return '特产'
</template> case 5:
<template v-else> return '运营车'
{{item.orderStatus|orderStatus5}} case 10:
</template> return '组合订单'
</view> }
</view> },
<view class="block-main"> orderStatus1(i){//景区订单状态
<view class="mian-InfoWrap"> switch(i){
<view class="InfoWrap-mb30">订单时间：{{item.playDate.substr(0,10)}}</view> case 0:
<view> return '待支付'
购买数量： break
<template v-if="item.orderType==1&&item.subOrderType!=4">{{item.orderNum}}张</template> case 1:
<template v-else-if="item.orderType==2&&item.subOrderType!=4">{{item.orderNum}}间</template> return '出票中'
<template v-else-if="item.orderType==3&&item.subOrderType!=4">{{item.orderNum}}桌</template> break
<template v-else-if="item.orderType==4&&item.subOrderType!=4">{{item.orderNum}}箱</template> case 2:
<template v-else-if="item.orderType==10&&item.subOrderType!=4">{{item.orderNum}}张</template> return '出票成功'
<template v-else>{{item.orderNum}}份</template> break
</view> case 3:
<view class="allPice"> return '预定失败'
<text>¥</text>{{item.totalMoney}} break
</view> case 4:
</view> return '核销中'
<view class="main-right"> break
<u-icon name="arrow-right" color="#333333" size="28"></u-icon> case 5:
</view> return '核销完成'
</view> break
<view class="block-Btn"> case 6:
<view class="block-button" @click.stop="operation(item,index)" v-if="item.orderStatus==9||item.orderStatus==10">删除</view> return '退款中'
<view class="block-button" @click.stop="operation(item,index)" v-if="item.orderStatus==0">取消订单</view> break
<template v-if="item.orderType==4"><!--特产--> case 7:
<view class="block-button" v-if="item.orderStatus==1||item.orderStatus==2||item.orderStatus==4||item.orderStatus==5||item.orderStatus==10" @click.stop="orderJump(item.id,item.orderType)">查看详情</view> return '部分退货/退款'
<view class="block-button" v-if="item.orderStatus==2||item.orderStatus==4||item.orderStatus==5||item.orderStatus==10">查看物流</view> break
<!-- <view class="block-button" v-if="item.orderStatus==5">评价</view> --> case 8:
</template> return '全部退款退货 '
<template v-else> break
<template v-if="item.subOrderType!=4"> case 9:
<view class="block-button" v-if="item.orderStatus==1||item.orderStatus==2||item.orderStatus==4||item.orderStatus==5||item.orderStatus==10" @click.stop="orderJump(item.id,item.orderType)">{{item.orderStatus==2?'去使用':'查看详情'}}</view> return '取消 '
</template> break
<view class="block-button" v-if="item.orderStatus==2&&item.isRefund!=0&&item.isRefund!=3||item.orderStatus==7&&item.isRefund!=0&&item.isRefund!=3" @click.stop="refundJump(item.id)">退款/售后</view> case 10:
<!-- <view class="block-button" v-if="item.orderStatus==5">评价</view> --> return '已完成 '
</template> break
<view class="block-button block-buttonOrange" v-if="item.orderStatus==0">去支付</view> case 11:
</view> return '已过期 '
</view> break
</template> case 12:
<view class="goods-NoMore" v-if="dataLengthType==true">暂无更多数据</view> return '退票审核中 '
</view> break
<view class="product-goods" v-else> }
<view class="order-No">暂无订单信息</view> },
</view> orderStatus2(i){//酒店订单状态
<!-- <u-toast ref="uToast" /> --> switch(i){
<u-modal :show="configShow" show-cancel-button="true" :content="configTitle" @confirm="operationEnter()" @cancel="operationClose()"></u-modal> case 0:
</view> return '待支付'
</template> break
case 1:
<script> return '确认中'
// import uPicker from '@/uview-ui/components/u-picker/u-picker.vue' break
// import uPopup from '@/uview-ui/components/u-popup/u-popup.vue' case 2:
// import uToast from '@/uview-ui/components/u-toast/u-toast.vue' return '预定成功'
// import uModal from '@/uview-ui/components/u-modal/u-modal.vue' break
export default { case 3:
filters:{ return '预定失败'
orderType(i){//订单类型 break
switch(i){ case 4:
case 0: return '核销中'
return '其他' break
break case 5:
case 1: return '待评价'
return '景区' break
break case 6:
case 2: return '退款中'
return '酒店' break
break case 7:
case 3: return '部分退货/退款'
return '餐饮' break
break case 8:
case 4: return '全部退款退货 '
return '特产' break
case 5: case 9:
return '运营车' return '取消 '
case 10: break
return '组合订单' case 10:
} return '已完成 '
}, break
orderStatus1(i){//景区订单状态 case 11:
switch(i){ return '已过期 '
case 0: break
return '待支付' }
break },
case 1: orderStatus3(i){//餐饮订单状态
return '出票中' switch(i){
break case 0:
case 2: return '待支付'
return '出票成功' break
break case 1:
case 3: return '确认中'
return '预定失败' break
break case 2:
case 4: return '预定成功'
return '核销中' break
break case 3:
case 5: return '预定失败'
return '核销完成' break
break case 4:
case 6: return '核销中'
return '退款中' break
break case 5:
case 7: return '待评价'
return '部分退货/退款' break
break case 6:
case 8: return '退款中'
return '全部退款退货 ' break
break case 7:
case 9: return '部分退货/退款'
return '取消 ' break
break case 8:
case 10: return '全部退款退货 '
return '已完成 ' break
break case 9:
case 11: return '取消 '
return '已过期 ' break
break case 10:
case 12: return '已完成 '
return '退票审核中 ' break
break case 11:
} return '已过期 '
}, break
orderStatus2(i){//酒店订单状态 }
switch(i){ },
case 0: orderStatus4(i){//特产状态
return '待支付' switch(i){
break case 0:
case 1: return '待支付'
return '确认中' break
break case 1:
case 2: return '待发货'
return '预定成功' break
break case 2:
case 3: return '待收货'
return '预定失败' break
break case 3:
case 4: return '预定失败'
return '核销中' break
break case 4:
case 5: return '核销中'
return '待评价' break
break case 5:
case 6: return '已收货'
return '退款中' break
break case 6:
case 7: return '退款中'
return '部分退货/退款' break
break case 7:
case 8: return '部分退货/退款'
return '全部退款退货 ' break
break case 8:
case 9: return '全部退款退货 '
return '取消 ' break
break case 9:
case 10: return '取消 '
return '已完成 ' break
break case 10:
case 11: return '已完成 '
return '已过期 ' break
break case 11:
} return '已过期 '
}, break
orderStatus3(i){//餐饮订单状态 }
switch(i){ },
case 0: orderStatus5(i){
return '待支付' switch(i){
break case 0:
case 1: return '待支付'
return '确认中' break
break case 1:
case 2: return '确认中'
return '预定成功' break
break case 2:
case 3: return '支付成功'
return '预定失败' break
break case 3:
case 4: return '预定失败'
return '核销中' break
break case 4:
case 5: return '核销中'
return '待评价' break
break case 5:
case 6: return '待评价'
return '退款中' break
break case 6:
case 7: return '退款中'
return '部分退货/退款' break
break case 7:
case 8: return '部分退货/退款'
return '全部退款退货 ' break
break case 8:
case 9: return '全部退款退货 '
return '取消 ' break
break case 9:
case 10: return '取消 '
return '已完成 ' break
break case 10:
case 11: return '已完成 '
return '已过期 ' break
break case 11:
} return '已过期 '
}, break
orderStatus4(i){//特产状态 }
switch(i){ }
case 0: },
return '待支付' components: {
break
case 1: },
return '待发货' data() {
break return {
case 2: //顶部参数
return '待收货' orderStatus:'',//头部类型选择
break //手机搜索
case 3: show: false,//遮罩显隐---项目
return '预定失败' columns: [//遮罩列表---项目
break [
case 4: {label: '类型',id: ''},
return '核销中' {label: '全部',id: 0},
break {label: '景区',id: 1},
case 5: {label: '酒店',id: 2},
return '已收货' {label: '餐饮',id: 3},
break {label: '特产',id: 4},
case 6: // {label: '运营车',id: 5},
return '退款中' // {label: '组合订单',id: 10},
break ]
case 7: ],
return '部分退货/退款' showAddress:'类型',//显示内容---项目
break phoneNum:'',//搜索手机号
case 8: //主数据分区
return '全部退款退货 ' lists:[],//数据
break //分页
case 9: isTrue:true,//截留 防止重复加载
return '取消 ' pageIndex:1,//当前页
break pageTotal:0,//总条数
case 10: //定时请求
return '已完成 ' timerOutClear:null,
break //其他
case 11: ifyukuaiCode:'',//渝快付
return '已过期 ' dataLengthType:false,//上拉加载无更多数据时显示
break }
} },
}, onLoad(option) {
orderStatus5(i){ this.openId = uni.getStorageSync('openid')
switch(i){ this.openId = 'oh2UV1lyYABHMZ1rMlgjhVHyyYDQ'//oh2UV1lyYABHMZ1rMlgjhVHyyYDQ oroHZ5FaUQ_SOOC_uQQP92fJpBRE
case 0: this.orderStatus = option.orderStatus||''
return '待支付' this.ifyukuaiCode = option.ifyukuaiCode||''
break this.getData()
case 1: },
return '确认中' onShow(){
break this.pageIndex = 1
case 2: this.lists = [] //主要数据存储
return '支付成功' this.getData()
break },
case 3: onReachBottom(){//上拉加载
return '预定失败' this.pageIndex++
break this.getData()
case 4: },
return '核销中' onUnload() {
break if(this.timerOutClear) {
case 5: clearTimeout(this.timerOutClear)
return '待评价' this.timerOutClear = null
break }
case 6: //隐藏加载框
return '退款中' uni.hideLoading()
break },
case 7: methods: {
return '部分退货/退款' screenChange(i){//顶部导航切换
break this.orderStatus = i //当前选择的数字
case 8: this.pageIndex = 1 //页码
return '全部退款退货 ' this.pageTotal = 0 //总数
break this.isTrue = true //是否同意请求
case 9: this.lists = [] //主要数据存储
return '取消 ' this.getData()
break },
case 10: addressFun(e){//项目选择
return '已完成 ' this.showAddress = e.value[0].label
break this.show=false
case 11: },
return '已过期 ' getData(){//数据加载
break //显示加载框
} uni.showLoading({
} title: '加载中'
}, })
components: { if(this.isTrue){
// uPicker, this.isTrue = false
// uPopup, var data = {}
// uToast, if(this.orderStatus=='2'){//点击的待使用
// uModal var orderStatusList=[2,4,5]
}, data={
data() { pageIndex:this.pageIndex,
return { pageSize:20,
queryLoad:false,//查询加载图标显示隐藏 orderType:this.orderType==0?'':this.orderType,
phoneQuery:false,//手机查询显示隐藏 orderStatusList :orderStatusList,
touristPhone:'',//旅客电话 userId:this.openId
touristName:'',//旅客姓名 }
orderStatus:'',//订单状态 }else{
nodataShow:false,//没有数据时展示 data={
lists:[],//数据 pageIndex:this.pageIndex,
orderType:0,//筛选 //1景区，2酒店，3餐饮，4特产，5运营车，10组合订单 pageSize:20,
orderName:'全部',//筛选 //1景区，2酒店，3餐饮，4特产，5运营车，10组合订单 orderType:this.orderType==0?'':this.orderType,
orderShow:false, orderStatus:this.orderStatus=='3'?2:parseFloat(this.orderStatus),
option: [[ userId:this.openId
{ cateName: '全部', id: 0 }, }
{ cateName: '景区', id: 1 }, }
{ cateName: '酒店', id: 2 }, this.$request('order/userOrder/findOrderList',data)
{ cateName: '餐饮', id: 3 }, .then((res)=>{
{ cateName: '特产', id: 4 }, if(res.code=='00'){
// { cateName: '运营车', id: 5 }, if(res.data.list.length>0){
// { cateName: '组合订单', id: 10 }, this.dataLengthType = true
]], }else{
isTrue:true,//截留 防止重复加载 this.dataLengthType = false
pageIndex:1,//当前页 }
pageTotal:0,//总条数 res.data.list.forEach((item)=>{
configShow:false,//删除订单确认框 if(this.orderStatus=='0'){////待付款的订单 pid 不能空的不显示
configTitle:'',//弹窗title if(item.pid){
operationItem:null,//操作项的数据 删除和取消订单
operationIndex:null,//操作下标 }else{
callbackurl:'',//回调页面 this.lists.push(item)
ifNotice:'',//是否通知 }
openId:'', }else if(this.orderStatus=='2'){//待评价和待使用不能显示组合订单
ifyukuaiCode:'',//渝快付 if(item.orderType!=10&&item.orderType!=4){
dataLengthType:false,//上拉加载无更多数据时显示 this.lists.push(item)
timerOutClear:null, }
} }else if(this.orderStatus=='3'){//待收货和待使用不能显示组合订单
}, if(item.orderType!=10&&item.orderType==4){
onLoad(option) { this.lists.push(item)
this.openId = uni.getStorageSync('openid') }
//this.openId = 'oroHZ5FaUQ_SOOC_uQQP92fJpBRE'//oh2UV1lyYABHMZ1rMlgjhVHyyYDQ oroHZ5FaUQ_SOOC_uQQP92fJpBRE }else if(this.orderStatus=='5'){//待评价不能显示组合订单
this.orderStatus = option.orderStatus||'' if(item.orderType!=10){
this.ifyukuaiCode = option.ifyukuaiCode||'' this.lists.push(item)
this.getData(1) }
}, }else{
onShow(){ if(item.isDelete!=1){//（ 0 未删除 1 已删除）
this.pageIndex = 1 this.lists.push(item)
this.getData(1) }
}, }
methods: { })
screenChange(i){//顶部导航切换 this.isTrue = true
this.orderStatus = i this.pageTotal = res.data.pageTotal
this.pageIndex = 1
this.pageTotal = 0 // 主订单显示待支付子订单显示除了待支付
this.isTrue = true this.lists.forEach((item)=>{
this.lists = [] if(item.subOrderType!=9){
this.getData(1) if(item.orderType==10&&item.orderStatus==0){
}, item.showList=true
industrysTypeConfirm(e) {//单列----分类 点击确定 }
console.log('confirm', e) if(item.orderType!=10&&item.orderStatus!=0){
this.orderType = e.value[0].id item.showList=true
this.orderName = e.value[0].cateName }
this.pageIndex = 1 }
this.pageTotal = 0 })
this.isTrue = true //隐藏加载框
this.lists = [] uni.hideLoading()
this.getData(1) }else{
this.cancel() //隐藏加载框
}, uni.hideLoading()
cancel() {//单列 点击取消 uni.showToast({
this.orderShow = false title: '暂无订单信息',
}, icon: 'none'
showQueryPhone(){//展示手机查询弹窗 })
this.touristPhone='' }
this.touristName='' })
this.phoneQuery=true .catch((err)=>{
}, this.timerOutClear = setTimeout(()=>{
queryPhoneOrder(){//通过手机号查看订单 this.getData()
},1000)
if(!(/^1[34578]\d{9}$/.test(this.touristPhone))){
uni.showToast({ })
title: '请填写正确的手机号码', }
icon: 'none'
}) },
return orderJump(orderId,orderType){//-------------------订单详情跳转
} if(orderType==11||orderType==12){
if(this.touristName==''){ uni.navigateTo({
uni.showToast({ url: '/pages/album/albumOrderdetail/albumOrderdetail?orderId='+orderId
title: '姓名不可为空', })
icon: 'none' }else{
}) uni.navigateTo({
return url: '/pages/my/order/electronicTicket/electronicTicket?orderId='+orderId
} })
let data={ }
openid:this.openId,//用户Id
touristPhone:this.touristPhone,//旅客电话 },
touristName:this.touristName,//旅客姓名 refundJump(id){//-------------------退款
} uni.navigateTo({
this.queryLoad=true url: '/pages/my/order/afterSale/applyAfterSale/applyAfterSale?orderId='+id+'&ifyukuaiCode='+this.ifyukuaiCode
this.$request('order/pdOrder/findOrderInfoByPhone',data).then((res)=>{ })
this.queryLoad=false },
if(res.code=='00'){ },
this.phoneQuery=false }
// uni.navigateTo({ </script>
// url: '/pages/my/order/productList/productList'
// }) <style scoped lang="scss">
this.pageIndex = 1 .productBigBox{
this.getData(1) background: #F7F8FA;
}else{ padding-top: 206rpx;
uni.showToast({ min-height: 100vh;
title: res.message, }
icon: 'none' .order-search{
}) display: flex;
} justify-content: space-between;
width: 100%;
}) height: 100rpx;
}, background-color: #fff;
getData(flag){//获取订单列表 padding: 0 40rpx 0 40rpx;
this.nodataShow = false position: fixed;
//显示加载框 top: 0;
uni.showLoading({ left: 0;
title: '加载中' .search-list{
}) font-weight: 600;
if(this.isTrue){ font-size: 28rpx;
this.isTrue = false color: #999999;
if(this.orderStatus=='2'){//点击的待使用 line-height: 100rpx;
var orderStatusList=[2,4,5] position: relative;
var data={ .list-line{
pageIndex:this.pageIndex, display: none;
pageSize:20, width: 100%;
orderType:this.orderType==0?'':this.orderType, height: 6rpx;
orderStatusList :orderStatusList, background: #000000;
userId:this.openId border-radius: 4rpx;
} position: absolute;
}else{ left: 0;
var data={ bottom: 16rpx;
pageIndex:this.pageIndex, }
pageSize:20, }
orderType:this.orderType==0?'':this.orderType, .search-listAct{
orderStatus:this.orderStatus=='3'?2:parseFloat(this.orderStatus), font-size: 30rpx;
userId:this.openId color: #333333;
} .list-line{
} display: block;
this.$request('order/userOrder/findOrderList',data) }
.then((res)=>{ }
var ret = res }
if(ret.code=='00'){ .order-phoneSearch{
if(flag==1){//第一次加载 display: flex;
this.lists = [] justify-content: space-between;
} width: 100%;
if(ret.data.list.length>0){ height: 104rpx;
this.dataLengthType = true background: #F7F8FA;
}else{ padding: 20rpx 20rpx 0 20rpx;
this.dataLengthType = false position: fixed;
} top: 100rpx;
ret.data.list.forEach((item)=>{ left: 0;
if(this.orderStatus=='0'){////待付款的订单 pid 不能空的不显示 .phoneSearch-type{
if(item.pid){ width: 200rpx;
height: 64rpx;
}else{ background: #FFFFFF;
this.lists.push(item) border-radius: 32rpx;
} line-height: 64rpx;
}else if(this.orderStatus=='2'){//待评价和待使用不能显示组合订单 position: relative;
//item.orderType!=10&& .type-boxOn{
if(item.orderType!=4&&item.productCode!=''){ display: flex;
this.lists.push(item) justify-content: space-between;
} padding: 0 38rpx 0 38rpx;
}else if(this.orderStatus=='3'){//待收货和待使用不能显示组合订单 width: 200rpx;
//item.orderType!=10&& height: 64rpx;
if(item.orderType==4&&item.productCode!=''){ font-weight: 600;
this.lists.push(item) font-size: 24rpx;
} color: #333333;
}else if(this.orderStatus=='5'){//待评价不能显示组合订单 position: absolute;
// if(item.orderType!=10){ top: 0;
// } left: 0;
if(item.productCode!=''){ }
this.lists.push(item) .address-triangle{
} width: 0px;
}else{ height: 0px;
if(item.isDelete!=1){//（ 0 未删除 1 已删除） margin: auto;
this.lists.push(item) border: 10rpx solid transparent;
} border-top: 10rpx solid #D8D8D8;
} position: absolute;
}) top: 8rpx;
this.isTrue = true right: 38rpx;
this.pageIndex++ bottom: 0;
this.pageTotal = ret.data.pageTotal }
if(this.lists.length==0){ }
this.nodataShow = true /deep/ .u-search__content{
} height: 64rpx !important;
// 主订单显示待支付子订单显示除了待支付 background: #FFFFFF !important;
this.lists.forEach((item)=>{ border-radius: 32rpx !important;
if(item.subOrderType!=9){ padding: 0 32rpx !important;
//item.orderType==10&& }
if(item.orderStatus==0){ /deep/ .u-search{
item.showList=true width: 490rpx !important;
} height: 64rpx !important;
//item.orderType!=10&& flex:none !important;
if(item.orderStatus!=0){ align-items:flex-start;
item.showList=true }
} /deep/ .u-search__content__input{
} background: #FFFFFF !important;
}) font-size: 24rpx !important;
}
//隐藏加载框 /deep/ .u-icon__icon{
uni.hideLoading() font-size: 40rpx !important;
}else{ color: #333333 !important;
uni.showToast({ }
title: '暂无订单信息', }
icon: 'none' .order-list{
}) width: 710rpx;
} background-color: #fff;
}) border-radius: 12rpx;
.catch((err)=>{ margin: 0 auto 20rpx auto;
this.timerOutClear = setTimeout(()=>{ padding: 42rpx 40rpx 40rpx 40rpx;
this.getData(2) overflow: hidden;
},1000) .list-title{
display: flex;
}) justify-content: space-between;
} .title-left{
}, display: flex;
operation(item,index){//操作 删除和取消订单 image{
this.operationItem = item width: 40rpx;
this.operationIndex = index height: 40rpx;
if(item.orderStatus==0){ background: #14C9C8;
this.configTitle = '确认取消订单' border-radius: 50%;
}else{ }
this.configTitle = '确认删除订单' view{
} font-weight: 600;
this.configShow = true font-size: 28rpx;
}, color: #333333;
operationEnter(){//操作 删除和取消订单 确定 line-height: 40rpx;
if(this.operationItem.orderStatus==0){//取消订单 margin-left: 12rpx;
this.$request('order/userOrder/cancelOrder',{ }
id:this.operationItem.id, }
userId:this.openId .title-right{
}) font-weight: 600;
.then((res)=>{ font-size: 28rpx;
var ret = res color: #00B42B;
if(ret.code=='00'){ line-height: 40rpx;
uni.showToast({ }
title: '订单取消成功', }
icon: 'none' .list-name{
}) padding-left: 52rpx;
//this.$store.commit('showLoading') margin-top: 12rpx;
this.pageIndex = 1 font-weight: 600;
this.pageTotal = 0 font-size: 28rpx;
this.isTrue = true color: #333333;
this.lists[this.operationIndex].orderStatus = 9 line-height: 28rpx;
// this.lists = [] }
// this.getData(1) .list-time,
this.configShow = false .list-tips{
}else{ padding-left: 52rpx;
uni.showToast({ margin-top: 20rpx;
title: res.message, font-weight: 400;
icon: 'none' font-size: 28rpx;
}) color: #999999;
} line-height: 28rpx;
}) }
}else{//删除订单 .list-money{
this.$request('order/userOrder/deleteOrder',{ margin-top: 20rpx;
id:this.operationItem.id, font-weight: 600;
userId:this.openId font-size: 28rpx;
}) color: #333333;
.then((res)=>{ line-height: 28rpx;
var ret = res text-align: right;
if(ret.code=='00'){ }
uni.showToast({ .list-btn{
title: '订单删除成功', display: flex;
icon: 'none' justify-content: flex-end;
}) margin-top: 40rpx;
//this.$store.commit('showLoading') overflow: auto;
this.pageIndex = 1 .btn-style{
this.pageTotal = 0 width: 170rpx;
this.isTrue = true height: 64rpx;
this.lists.splice(this.operationIndex,1) border-radius: 32rpx;
// this.lists = [] border: 2rpx solid #EDEDED;
// this.getData(1) margin-left: 20rpx;
this.configShow = false font-weight: 600;
}else{ font-size: 28rpx;
uni.showToast({ color: #666666;
title: res.message, line-height: 60rpx;
icon: 'none' text-align: center;
}) }
} }
}) }
} .order-listCancel{//订单取消的时候
}, .list-title{
operationClose(){//操作 删除和取消订单 取消 .title-left{
this.configShow =false image{
}, background: #999999;
orderJump(orderId,orderType){//-------------------订单详情跳转 }
if(orderType==11||orderType==12){ view{
uni.navigateTo({ color: #999999;
url: '/pages/album/albumOrderdetail/albumOrderdetail?orderId='+orderId }
}) }
}else if(orderType==10){ .title-right{
uni.navigateTo({ color: #999999;
url: '/pages/my/order/jointElectronicTicket/jointElectronicTicket?orderId='+orderId }
}) }
}else{ .list-name{
uni.navigateTo({ color: #999999;
url: '/pages/my/order/electronicTicket/electronicTicket?orderId='+orderId }
}) .list-money{
} color: #999999;
}
}, }
refundJump(id){//-------------------退款 .order-No{
uni.navigateTo({ height: 40rpx;
url: '/pages/my/order/afterSale/applyAfterSale/applyAfterSale?orderId='+id+'&ifyukuaiCode='+this.ifyukuaiCode color: #666666;
}) font-size: 30rpx;
}, line-height: 40rpx;
}, text-align: center;
onReachBottom(){//上拉加载 margin: auto;
this.pageIndex++ position: fixed;
this.getData(2) top: 0;
}, right: 0;
onUnload() { bottom: 0;
if(this.timerOutClear) { left: 0;
clearTimeout(this.timerOutClear) }
this.timerOutClear = null .goods-NoMore{
} height: 40rpx;
//隐藏加载框 uni.hideLoading() color: #666666;
}, font-size: 30rpx;
} line-height: 40rpx;
</script> text-align: center;
}
<style scoped lang="scss">
page{
background-color: #f5f5f5;
}
.productBigBox{
background-color: #f5f5f5;
min-height: 100vh;
}
.product-SearchBox{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 20;
}
.product-title{
display: flex;
justify-content: center;
width: 100%;
height: 80rpx;
background-color: #fff;
font-size: 32rpx;
font-weight: bold;
line-height: 80rpx;
text-align: center;
u-icon{
height: 80rpx;
position: absolute;
left: 24rpx;
top: 0;
bottom: 0;
}
}
.product-orderState{
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 24rpx;
background-color: #fff;
.orderState-click{
display: flex;
justify-content: center;
width: 100rpx;
height: 80rpx;
align-items: center;
color: #999999;
font-size: 28rpx;
position: relative;
.click-line{
display: none;
width: 55%;
height: 4rpx;
background-image: linear-gradient(to right, #9FCFFF , #DAE6F6);
margin: auto;
position: absolute;
bottom: 12rpx;
left: 0;
right: 0;
}
}
.orderState-clickAct{
color: #191919;
font-size: 32rpx;
font-weight: bold;
.click-line{
display: inline-block;
}
}
}
.product-searchBt{
width: 100%;
height: 80rpx;
box-shadow: 0 0 0;
display: flex;
background-color:#fff;
justify-content: space-between;
padding: 0 30rpx;
line-height: 80rpx;
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.08);
.searchBt-left{
display: flex;
width: 100rpx;
justify-content: center;
text:nth-child(1){
margin-right: 5rpx;
}
}
}
.content-title{
display: flex;
justify-content: center;
height: 80rpx;
line-height: 80rpx;
position: relative;
font-size: 32rpx;
font-weight: bold;
/deep/ .u-icon{
color: #c8c9cc;
position: absolute;
right: 16rpx;
top: 0;
bottom: 0;
}
}
.content-list{
display: flex;
padding: 0 24rpx 0 24rpx;
margin-top: 20rpx;
.list-name{
display: inline-block;
text-align: justify;
text-align-last: justify;
width: 110rpx;
font-size: 26rpx;
line-height: 40px;
flex-shrink: 0;
}
.list-name2{
line-height: 40px;
}
.uni-input{
height: 40px;
border-bottom: 1px solid #d1d1d1;
flex: 1;
}
}
.confrim-btn{
margin: 64rpx 24rpx 40rpx 24rpx;
/deep/ .u-reset-button{
height: 80rpx;
line-height: 80rpx;
border-radius: 15rpx;
color: #FFFFFF;
text-align: center;
background: linear-gradient(134deg, #ED400C 0%, #FB862C 100%);
font-size: 28rpx;
border-radius: 8rpx;
border: none;
}
}
.product-goods{
padding: 30rpx;
padding-top: 200rpx;
overflow: auto;
position: relative;
.product-block{
border-radius: 5px;
margin-bottom: 20rpx;
background: #fff;
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.02);
.block-title{
padding: 30rpx 24rpx 25rpx 24rpx;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
font-size: 30rpx;
color: #333;
.title-left{
flex: 1;
display: flex;
align-items: center;
.left-imgBox{
width: 32rpx;
height: 32rpx;
display: flex;
margin-right: 16rpx;
border-radius: 3px;
flex-shrink: 0;
background-color: #FEB221;
}
.left-img{
display: inline-block;
width: 32rpx;
height: 32rpx;
}
.left-Name{
font-size: 0.32rem;
color: #191919;
font-weight: bold;
flex: 1;
font-size: 28rpx;
line-height: 36rpx;
}
}
.title-right{
width: 160rpx;
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 24rpx;
color: #ED400C;
}
}
.block-main{
display: flex;
height: 174rpx;
border-bottom: none;
color: #333333;
position: relative;
padding: 36rpx 24rpx 24rpx 24rpx;
.mian-InfoWrap{
display: flex;
flex: 1;
font-size: 30rpx;
color: #666666;
flex-wrap: wrap;
word-break: break-all;
margin-right: 20rpx;
flex-direction: column;
justify-content: center;
height: 100%;
.InfoWrap-mb30{
margin-bottom: 30rpx;
}
.allPice{
position: absolute;
left: 24rpx;
bottom: -80rpx;
color: #ED400C;
font-size: 40rpx;
font-weight: bold;
display: flex;
text{
font-size: 24rpx;
font-weight: normal;
margin-right: 4rpx;
line-height: 60rpx;
}
}
}
.main-right{
height: 100%;
display: flex;
align-items: center;
color: #6b6b6b;
}
}
.block-Btn{
display: flex;
justify-content: flex-end;
height: 100rpx;
align-items: center;
padding: 0 20rpx;
.block-button{
width: 152rpx;
height: 64rpx;
line-height: 64rpx;
color: #333333;
padding: 0;
text-align: center;
display: inline-block;
box-sizing: content-box;
font-size: 28rpx;
border: 1px solid #cccccc;
border-radius: 8rpx;
align-items: center;
margin-right: 15rpx;
}
.block-button:nth-last-child(1){
margin-right: 0;
}
.block-buttonOrange{
color: #f9690e;
border: 1px solid #f9690e;
}
}
}
.goods-NoMore{
height: 40rpx;
color: #666666;
font-size: 30rpx;
line-height: 40rpx;
text-align: center;
}
.order-No{
height: 40rpx;
color: #666666;
font-size: 30rpx;
line-height: 40rpx;
text-align: center;
margin: auto;
position: absolute;
top: 400;
right: 0;
bottom: 0;
left: 0;
}
}
</style> </style>
\ No newline at end of file
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