Commit ffeaaa84 authored by 潘永坪's avatar 潘永坪

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

parents bef558c2 8089ce05
......@@ -552,6 +552,33 @@
"navigationBarTitleText": "",
"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"
}
}
]
}
......
This diff is collapsed.
<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>
This diff is collapsed.
This diff is collapsed.
<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>
<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>
This diff is collapsed.
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