Skip to content

U
uni-pdtravel
Commit 176f6ca8 authored by qipeng's avatar qipeng
Browse files
Options

选择相册下单

parent e5b75d17
Show whitespace changes
Inline Side-by-side
Showing with 1348 additions and 211 deletions
pages/album/albumIndex/albumIndex.vue
View file @ 176f6ca8
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
</swiper> </swiper>
<view class="photo-acquire"> <view class="photo-acquire">
<view class="acquire-box acquire-boxBlue" @click="jumpToScanFaceClick"> <!-- @click="jumpToScanFaceClick"-->
<view class="acquire-box acquire-boxBlue" @click="loginWork()">
<view class="box-title">获取相片</view> <view class="box-title">获取相片</view>
<view class="box-text">获取拍摄相片</view> <view class="box-text">获取拍摄相片</view>
<image class="box-img" src="./../static/album/icon02.png"></image> <image class="box-img" src="./../static/album/icon02.png"></image>
...@@ -131,6 +132,44 @@ export default { ...@@ -131,6 +132,44 @@ export default {
} }
}, },
methods: { methods: {
loginWork(){//是否需要登陆 先通过openid检测下该openid是否有绑定手机号
var data = {
openid : this.openid
}
this.$request('scenic/albumUser/albumUserCheck', data).then(res => {
if (res.code === '00') {
if(res.data.length!=0){//判断账户是否为空
if(res.data.length>1){
var companyId = this.options.companyId
uni.navigateTo({
url: '/pages/album/photoAccount/photoAccount?companyId='+companyId
})
}else{
var phone = res.data[0].mobile
var companyId = this.options.companyId
uni.navigateTo({
url: '/pages/album/myPhotoAlbum/myPhotoAlbum?phone='+phone+'&companyId='+companyId
})
}
}else{
var companyId = this.options.companyId
uni.navigateTo({
url: '/pages/album/photoLogin/photoLogin?companyId='+companyId
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
chooseImg(){ chooseImg(){
uni.chooseImage({ uni.chooseImage({
count: 6, //默认9 count: 6, //默认9
...@@ -329,11 +368,12 @@ export default { ...@@ -329,11 +368,12 @@ export default {
} }
}, },
onLoad(options) { onLoad(options) {
this.$commonjs.getCompanyId(options) //this.$commonjs.getCompanyId(options)
this.openid = uni.getStorageSync('openid') this.openid = uni.getStorageSync('openid')
this.userId = uni.getStorageSync('userId') this.userId = uni.getStorageSync('userId')
this.recordDeviceInfo() this.recordDeviceInfo()
this.options = options this.options = options
this.options.companyId = this.$commonjs.getKey(options,'companyId')||''
if (this.options.template === 'true') { // 从模板选择页进入 if (this.options.template === 'true') { // 从模板选择页进入
this.show = true this.show = true
this.couponTip = true this.couponTip = true
...@@ -343,7 +383,6 @@ export default { ...@@ -343,7 +383,6 @@ export default {
this.show = true this.show = true
this.couponIsUse() this.couponIsUse()
} }
if (uni.getStorageSync('location')) return if (uni.getStorageSync('location')) return
uni.getLocation({ //获取定位 uni.getLocation({ //获取定位
......
pages/album/myPhotoAlbum/myPhotoAlbum - 副本 (2).vue 0 → 100644
View file @ 176f6ca8
<template>
<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }" :class="blowUpMaks==true?'albumBoxAct':''">
<!--头部 我的相片-->
<view class="nav-bar" :style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}" v-if="blowUpMaks==false">
<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
我的相片
</view>
<!--头部 当前第几张 遮罩代替我的相片显示-->
<view class="nav-bar" :style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}" v-if="blowUpMaks==true">
<u-icon name="arrow-left" color="#333" @click="blowUpMaks=false"></u-icon>
{{blowUpNumNew}}/{{pictureFrameList.length}}
</view>
<!--相框/项目切换-->
<view class="myPhoto-search" v-if="pictureFrameList.length!=0">
<view class="search-left">
<!-- <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==3?'left-frameAct':''" @click="frameFun(3)">无框</view> -->
<view class="right-addressClick" @click="show = true">
{{showAddress}}
<view class="address-triangle"></view>
<u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
</view>
</view>
<view class="search-right">
<view class="right-addressClick" @click="toAccount()">
153****3456
<view class="address-triangle"></view>
</view>
</view>
</view>
<!--相片列表-->
<view class="myPhoto-list" v-if="checkTypeFun==true" :class="bottomShow==true?'myPhoto-listAct':''">
<template v-if="titleclick==1||titleclick!=1&&pictureFrameList.length!=0">
<view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index">
<image class="pictureFrame-img" :src="item.image"></image>
<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" >
<checkbox :value="item.image" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
</checkbox-group>
<view class="pictureFrame-boxTop" @click.stop="stopPhoto(index)"></view>
<view class="pictureFrame-boxBottom" @click="blowUpFun(index)"></view>
<image class="pictureFrame-blowUp" @click="blowUpFun(index)" src="../static/album/icon04.png"></image>
</view>
</template>
<template v-else>
<view class="list-noFigure">
<image class="noFigure-img" src="../static/album/icon07.png"></image>
<view class="noFigure-text">
三宫格须先下载照片, 才能设置<text @click="clickActFun(1)">去下载</text>
</view>
</view>
</template>
</view>
<!--点击放大后相片遮罩-->
<view class="myPhoto-mask" v-if="blowUpMaks==true" :style="{'top': albumBoxTop + 'px' }">
<swiper class="swiper" circular @change="projectNumFun" :current="currentNum">
<swiper-item v-for="(item,index) in pictureFrameList" :key="index">
<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 value="val" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
</checkbox-group>
</swiper-item>
</swiper>
</view>
<!--获取照片-->
<!-- <image v-if="pictureFrameListNum==0" class="myPhoto-getPhotos" src="../static/album/icon08.png"></image> -->
<!--脚部选择相片、加入购物车、直接购买 v-if="pictureFrameListNum>0"-->
<view class="myPhoto-bottom">
<view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
<view class="bottom-feature">
<!--加入相册列表-->
<!-- <view class="feature-list">
<template v-for="(item,index) in pictureFrameList">
<view class="feature-case" v-if="item.pickerChoose==true" :key="index">
<image class="feature-img" :src="item.image"></image>
<image class="feature-close" src="../static/album/icon05.png" @click="stopPhoto(index)"></image>
</view>
</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>
<!--选中的张数、加入购物车、立即购买、开始拼图 titleclick等于1显示购物车和立即购买 等于其他 显示开始拼图 进入拼图界面-->
<view class="feature-message">
<!-- <view class="message-selectNum" v-if="titleclick==1">
已选中
<text class="selectNum-color">{{pictureFrameListNum}}张</text>
</view>
<view class="message-selectNum" v-else>
<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>
<!-- v-if="titleclick==1" -->
<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 class="message-jigsaw" v-else>开始拼图</view> -->
</view>
</view>
</view>
<!--购买-->
<compometsBuy style="display: none;"></compometsBuy>
<!--购买预览-->
<photoPreview style="display: none;"></photoPreview>
</view>
</template>
<script>
import compometsBuy from './../albumComponets/compometsBuy/compometsBuy.vue'
import photoPreview from './../albumComponets/photoPreview/photoPreview.vue'
export default {
components: {
compometsBuy,
photoPreview
},
data() {
return {
photo:'',//手机号
titleclick:1,//1单照片 2二宫格 3三宫格 4六宫格
frameNum:1,//相框选择参数
show: false,//遮罩显隐---项目
columns: [//遮罩列表---项目
[{
label: '雪月夜1',
// 其他属性值
id: 2021
// ...
}, {
label: '冷夜雨2',
id: 804
}, {
label: '冷夜雨3',
id: 804
}, {
label: '冷夜雨4',
id: 804
}, {
label: '冷夜雨5',
id: 804
}, {
label: '冷夜雨6',
id: 804
}, {
label: '冷夜雨7',
id: 804
}, {
label: '冷夜雨8',
id: 804
}]
],
showAddress:'重庆',//显示内容---项目
pictureFrameList:[
{
image:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
checkType:false,
pickerChoose:false,
width:607,
height:879,
},
{
image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
checkType: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',
checkType: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',
checkType: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',
checkType:false,
pickerChoose:false,
width:607,
height:879,
},
],
checkTypeFun:true,//刷新选项
statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度
blowUpMaks:false,//放大显示的遮罩
blowUpNumNew:0,//当前的位置
currentNum:0,//当前所在滑块的 index
bottomShow:false,//脚部的显隐
pictureFrameListNum:0,//当前选择了多少张
maxChooseImg:0,//最多选择多少张
}
},
onLoad(option) {
// this.pictureFrameList.forEach(item=>{//判断每一张图片的宽高，根据宽高设置图片大小
// //await
// let imageInfoObj = uni.getImageInfo({
// src: item.image,
// success: function (imageInfo) {
// if(imageInfo.height>imageInfo.width){
// item['width'] = '680rpx'
// item['height'] = '956rpx'
// }else{
// item['width'] = '680rpx'
// item['height'] = '510rpx'
// }
// },
// fail: function (error) {
// console.error(error)
// // 获取图片信息失败后的操作
// }
// })
// })
console.log(option)
this.recordDeviceInfo()
},
methods: {
clickActFun(num){//宫格选择
this.checkTypeFun = false
this.titleclick = num
this.pictureFrameList.forEach(item=>{
item.checkType = false
item.pickerChoose = false
})
this.pictureFrameListNum = 0
if(this.titleclick==2){
this.maxChooseImg = 2
}else if(this.titleclick==3){
this.maxChooseImg = 3
}else if(this.titleclick==4){
this.maxChooseImg = 6
}
this.checkTypeFun = true
},
frameFun(num){//相框选择
this.frameNum = num
},
addressFun(e){//项目选择
this.showAddress = e.value[0].label
this.show=false
},
stopPhoto(index){//相片选择
this.checkTypeFun = false
if(this.titleclick==1||this.titleclick!=1&&this.pictureFrameListNum<this.maxChooseImg||this.titleclick!=1&&this.pictureFrameListNum==this.maxChooseImg&&this.pictureFrameList[index].checkType == true){//+this.maxChooseImg+
this.stopPhotoNumFun(index)
}else if(this.titleclick!=1&&this.pictureFrameListNum>=this.maxChooseImg){
this.pictureFrameList[index].checkType = true
this.$nextTick(function() {
this.pictureFrameList[index].checkType = false
})
uni.showToast({
title: '最多选择'+this.maxChooseImg+'张',
icon:'error',
duration: 2000
})
}
if(this.pictureFrameListNum>0){
this.bottomShow = true
}
this.checkTypeFun = true
},
stopPhotoNumFun(index){//相片选择开关
if(this.pictureFrameList[index].checkType==false){
this.pictureFrameList[index].checkType = true
this.pictureFrameList[index].pickerChoose = true
}else{
this.pictureFrameList[index].checkType = false
this.pictureFrameList[index].pickerChoose = false
}
this.pictureFrameListNum = 0
this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
if(item.checkType==true){
this.pictureFrameListNum +=1
}
})
},
blowUpFun(index){//相片放大 遮罩显隐
this.blowUpMaks = true
this.blowUpNumNew = index+1
this.currentNum = index
},
projectNumFun(e){//当前滑动到第几张
this.blowUpNumNew = e.target.current+1
},
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;
}
.albumBoxAct{
background-color: #F5F7FA;
}
.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;
}
}
.myPhoto-title{
width: 100%;
height: 100rpx;
padding: 32rpx 40rpx 0 40rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
.title-click{
height: 68rpx;
font-weight: 600;
font-size: 28rpx;
color: #999999;
line-height: 28rpx;
position: relative;
.click-line{
display: none;
width: 100%;
height: 6rpx;
background: #000000;
border-radius: 4rpx;
position: absolute;
bottom: 18rpx;
left: 0;
}
}
.title-clickAct{
font-size: 30rpx;
color: #333333;
.click-line{
display: block;
}
}
}
.myPhoto-search{
display: flex;
justify-content: space-between;
width: 100%;
height: 102rpx;
padding: 20rpx 24rpx 0 24rpx;
background: #F5F7FA;
.search-left{
display: flex;
}
.left-frame{
font-size: 24rpx;
color: #666666;
line-height: 64rpx;
padding: 0 20rpx 0 20rpx;
}
.left-frameAct{
width: 160rpx;
height: 64rpx;
padding:0;
font-weight: 600;
font-size: 28rpx;
color: #333333;
line-height: 60rpx;
text-align: center;
background: #E6E9F4;
border-radius: 8rpx;
border: 2rpx solid #DAE0EB;
}
.search-right{
display: flex;
}
.right-addressClick{
display: flex;
font-weight: 600;
font-size: 24rpx;
color: #333333;
line-height: 64rpx;
position: relative;
.address-triangle{
width: 0px;
height: 0px;
margin: auto;
margin-left: 12rpx;
border: 10rpx solid transparent;
border-top: 10rpx solid #333333;
margin-top: 25rpx;
}
}
}
.myPhoto-list{
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content:flex-start;
background-color: #F5F7FA;
overflow: auto;
position: relative;
.list-pictureFrame{
height: 248rpx;
margin-bottom: 4rpx;
position: relative;
.pictureFrame-img{
width: 248rpx;
height: 248rpx;
}
.pictureFrame-check{
width: 32rpx;
height: 32rpx;
background: transparent;
position: absolute;
top: 24rpx;
left: 192rpx;
z-index: 9;
/deep/ .wx-checkbox-input{
width: 32rpx;
height: 32rpx;
background: rgba(255,255,255,0.5);//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;
}
}
.pictureFrame-blowUp{
width: 32rpx;
height: 32rpx;
position: absolute;
bottom: 24rpx;
left: 192rpx;
z-index: 9;
}
.pictureFrame-boxTop,
.pictureFrame-boxBottom{
width: 248rpx;
height: 124rpx;
position: absolute;
left: 0;
z-index: 5;
}
.pictureFrame-boxTop{
top: 0;
}
.pictureFrame-boxBottom{
bottom: 0;
}
}
.list-pictureFrame:nth-last-child(1){
flex: 1;
}
.list-noFigure{
width: 100%;
height: 456rpx;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
.noFigure-img{
display: block;
width: 400rpx;
height: 400rpx;
margin: 0 auto;
}
.noFigure-text{
margin-top: 20rpx;
font-weight: 400;
font-size: 26rpx;
color: #666666;
line-height: 36rpx;
text-align: center;
text{
color: #165DFF;
margin-left: 10rpx;
}
}
}
}
.myPhoto-listAct{
padding-bottom: 320rpx;
}
.myPhoto-mask{
width: 100%;
height: 100%;
background: #F5F7FA;
position: fixed;
left: 0;
z-index: 10;
.swiper{
width: 607rpx;
height: 879rpx;//510rpx
margin: 0 auto;
background: #F5F7FA;
margin-top: 80rpx;
/deep/ swiper-item{
display: flex;
align-items:center;
}
.pictureFrame-check{
width: 32rpx;
height: 32rpx;
background: transparent;
position: absolute;
right: 22rpx;
bottom: 22rpx;
z-index: 11;
/deep/ .wx-checkbox-input{
width: 32rpx;
height: 32rpx;
background: rgba(255,255,255,0.5);//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;
}
}
}
}
.myPhoto-bottom{
width: 100%;
height: 464rpx;
position: fixed;
left: 0;
bottom: 0;
z-index: 30;
.bottom-tips{
width: 726rpx;
height: 64rpx;
background: #FFEFC9;
border-radius: 8rpx 8rpx 0rpx 0rpx;
box-sizing: border-box;
font-weight: 400;
font-size: 24rpx;
color: #9A5500;
padding: 0 26rpx;
line-height: 64rpx;
margin: 0 auto;
}
.bottom-feature{
width: 100%;
height: 400rpx;
background-color: #fff;
padding: 0rpx 0rpx 0 0rpx;
.feature-list{
display: flex;
width: 100%;
overflow: auto;
}
.feature-case{
width: 142rpx;
height: 142rpx;
padding: 10rpx 10rpx 0 0;
margin-right: 15rpx;
position: relative;
.feature-img{
width: 132rpx;
height: 132rpx;
}
.feature-close{
width: 32rpx;
height: 32rpx;
position: absolute;
top: 0;
right: 0;
}
}
.feature-message{
display: flex;
justify-content: space-between;
border-top: 2rpx solid #F5F5F5;
padding: 0 40rpx 0 40rpx;
height: 120rpx;
.message-selectNum{
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 64rpx;
.selectNum-color{
color: #333333;
margin-left: 10rpx;
}
}
.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;
// 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: 80rpx;
font-size: 28rpx;
font-weight: 600;
text-align: center;
color: #FFFFFF;
}
}
.message-jigsaw{
width: 160rpx;
height: 64rpx;
background: #FE6600;
border-radius: 32rpx;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
line-height: 64rpx;
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;
}
}
}
}
}
.myPhoto-getPhotos{
width: 174rpx;
height: 174rpx;
position: fixed;
right: 32rpx;
bottom: 58rpx;
}
</style>
\ No newline at end of file
pages/album/myPhotoAlbum/myPhotoAlbum.vue
View file @ 176f6ca8
...@@ -13,9 +13,6 @@ ...@@ -13,9 +13,6 @@
<!--相框/项目切换--> <!--相框/项目切换-->
<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==2?'left-frameAct':''" @click="frameFun(2)">木框</view>
<view class="left-frame" :class="frameNum==3?'left-frameAct':''" @click="frameFun(3)">无框</view> -->
<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>
...@@ -23,8 +20,8 @@ ...@@ -23,8 +20,8 @@
</view> </view>
</view> </view>
<view class="search-right"> <view class="search-right">
<view class="right-addressClick" @click="show = true"> <view class="right-addressClick" @click="toAccount()">
153****3456 {{phone}}
<view class="address-triangle"></view> <view class="address-triangle"></view>
</view> </view>
</view> </view>
...@@ -33,21 +30,20 @@ ...@@ -33,21 +30,20 @@
<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':''">
<template v-if="titleclick==1||titleclick!=1&&pictureFrameList.length!=0"> <template v-if="titleclick==1||titleclick!=1&&pictureFrameList.length!=0">
<view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index"> <view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index">
<image class="pictureFrame-img" :src="item.image"></image> <image class="pictureFrame-img" :src="item.pictureZipUrl"></image>
<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" > <checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" >
<checkbox :value="item.image" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox> <checkbox :value="item.pictureZipUrl" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
</checkbox-group> </checkbox-group>
<view class="pictureFrame-boxTop" @click.stop="stopPhoto(index)"></view> <view class="pictureFrame-boxTop" @click.stop="stopPhoto(index)"></view>
<view class="pictureFrame-boxBottom" @click="blowUpFun(index)"></view> <view class="pictureFrame-boxBottom" @click="blowUpFun(index)"></view>
<image class="pictureFrame-blowUp" @click="blowUpFun(index)" src="../static/album/icon04.png"></image> <image class="pictureFrame-blowUp" @click="blowUpFun(index)" src="../static/album/icon04.png"></image>
<view class="pictureFrame-blowTxt" v-if="item.pictureType==1">普通</view>
<view class="pictureFrame-blowTxt" v-else>旅拍</view>
</view> </view>
</template> </template>
<template v-else> <template v-else>
<view class="list-noFigure"> <view class="list-noFigure">
<image class="noFigure-img" src="../static/album/icon07.png"></image> <image class="noFigure-img" src="../static/album/icon07.png"></image>
<view class="noFigure-text">
三宫格须先下载照片, 才能设置<text @click="clickActFun(1)">去下载</text>
</view>
</view> </view>
</template> </template>
</view> </view>
...@@ -55,83 +51,49 @@ ...@@ -55,83 +51,49 @@
<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+'rpx', 'height': item.height+'rpx'}"></image> <image :src="item.pictureZipUrl" @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>
<view class="pictureFrame-blowTxt" v-if="item.pictureType==1">普通</view>
<view class="pictureFrame-blowTxt" v-else>旅拍</view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<!--获取照片--> <!--获取照片-->
<!-- <image v-if="pictureFrameListNum==0" class="myPhoto-getPhotos" src="../static/album/icon08.png"></image> -->
<!--脚部选择相片、加入购物车、直接购买 v-if="pictureFrameListNum>0"--> <!--脚部选择相片、加入购物车、直接购买 v-if="pictureFrameListNum>0"-->
<view class="myPhoto-bottom"> <view class="myPhoto-bottom">
<view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
<view class="bottom-feature"> <view class="bottom-feature">
<!--加入相册列表--> <view class="feature-message">
<!-- <view class="feature-list"> <view class="message-money" @click="totalAmountFun">
<template v-for="(item,index) in pictureFrameList"> ¥{{totalAmount}}
<view class="feature-case" v-if="item.pickerChoose==true" :key="index"> <u-icon name="arrow-up" color="#2979ff" v-if="totalAmountMask==false"></u-icon>
<image class="feature-img" :src="item.image"></image> <u-icon name="arrow-down" color="#2979ff" v-if="totalAmountMask==true"></u-icon>
<image class="feature-close" src="../static/album/icon05.png" @click="stopPhoto(index)"></image>
</view>
</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>
<view class="title-click" :class="titleclick==4?'title-clickAct':''" @click="clickActFun(4)"> <view class="message-trading">
六宫格 <view class="trading-btnAct" @click="upLoad">立即购买</view>
<view class="click-line"></view>
</view> </view>
</view> </view>
<!--宫格照片数量不够-创建失败-->
<view class="feature-warn">
<view class="warn-title">生成失败</view>
<view class="warn-text">至少需要5张照片才能拼图 <text>上传照片</text></view>
</view> </view>
<!--选中的张数、加入购物车、立即购买、开始拼图 titleclick等于1显示购物车和立即购买 等于其他 显示开始拼图 进入拼图界面-->
<view class="feature-message">
<!-- <view class="message-selectNum" v-if="titleclick==1">
已选中
<text class="selectNum-color">{{pictureFrameListNum}}张</text>
</view> </view>
<view class="message-selectNum" v-else> <!--金额遮罩-->
<text class="selectNum-color">最多选择{{maxChooseImg}}张</text> <view class="totalAmount-mask" v-if="totalAmountMask==true">
</view> --> <view class="totalAmount-case">
<view class="message-inPhoto"> <view class="case-list">
<image class="inPhoto-img" src="../static/album/icon13.png"></image> 旅拍金额：
<view class="inPhoto-text">购物车</view> <text>¥{{travelBeatMoney}}</text>
<view class="inPhoto-num">2</view>
</view>
<!-- v-if="titleclick==1" -->
<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>
<view class="trading-btn trading-right">立即购买</view> <view class="case-list">
普通上传金额：
<text>¥{{leafletMoney}}</text>
</view> </view>
<!-- <view class="message-jigsaw" v-else>开始拼图</view> --> <view class="case-tips">
提示：<br/>
旅拍：{{travelBeatTips}}<br/>
普通上传：{{leafletTips}}
</view> </view>
</view> </view>
</view> </view>
<!--购买-->
<compometsBuy style="display: none;"></compometsBuy>
<!--购买预览-->
<photoPreview style="display: none;"></photoPreview>
</view> </view>
</template> </template>
...@@ -145,75 +107,32 @@ export default { ...@@ -145,75 +107,32 @@ export default {
}, },
data() { data() {
return { return {
phone:'',//手机号
titleclick:1,//1单照片 2二宫格 3三宫格 4六宫格 titleclick:1,//1单照片 2二宫格 3三宫格 4六宫格
frameNum:1,//相框选择参数 frameNum:1,//相框选择参数
show: false,//遮罩显隐---项目 show: false,//遮罩显隐---项目
columns: [//遮罩列表---项目 columns: [//遮罩列表---项目
[{ // [{
label: '雪月夜1', // label: '雪月夜1',
// 其他属性值 // // 其他属性值
id: 2021 // id: 2021
// ... // // ...
}, { // }]
label: '冷夜雨2',
id: 804
}, {
label: '冷夜雨3',
id: 804
}, {
label: '冷夜雨4',
id: 804
}, {
label: '冷夜雨5',
id: 804
}, {
label: '冷夜雨6',
id: 804
}, {
label: '冷夜雨7',
id: 804
}, {
label: '冷夜雨8',
id: 804
}]
], ],
showAddress:'重庆',//显示内容---项目 merchantId:'',//
companyId:'',
merchantMessage:[],//景区基础参数
showAddress:'全部',//显示内容---项目
pictureFrameList:[ pictureFrameList:[
{ // {
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, // width:607,
height:879, // height:879,
}, // },
{
image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
checkType: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',
checkType: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',
checkType: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',
checkType:false,
pickerChoose:false,
width:607,
height:879,
},
], ],
checkTypeFun:true,//刷新选项 checkTypeFun:true,//刷新选项
...@@ -229,33 +148,277 @@ export default { ...@@ -229,33 +148,277 @@ export default {
bottomShow:false,//脚部的显隐 bottomShow:false,//脚部的显隐
pictureFrameListNum:0,//当前选择了多少张 pictureFrameListNum:0,//当前选择了多少张
maxChooseImg:0,//最多选择多少张 maxChooseImg:0,//最多选择多少张
configTypeList:[],//价格参数
travelBeatList:[],//已选择旅拍照片
travelBeatMoney:0,//旅拍金额
travelBeatNum:0,//旅拍数量
travelBeatMoneyList:[],//旅拍价格表
travelBeatTips:'',//提示
leafletList:[],//已选择单张金额
leafletMoney:0,//单张上传金额
leafletNum:0,//单张上传数量
leafletMoneyList:[],//普通价格表
leafletTips:'',//提示
totalAmount:0,//总金额
priceNum:0,//购买数量
totalAmountMask:false,//金额详情
} }
}, },
onLoad(option) { onLoad(option) {
this.pictureFrameList.forEach(item=>{//判断每一张图片的宽高，根据宽高设置图片大小 this.companyId = this.$commonjs.getKey(option,'companyId')||''
//await this.phone = option.phone
let imageInfoObj = uni.getImageInfo({ this.recordDeviceInfo()
src: item.image, this.albumMerchants()
success: function (imageInfo) { },
methods: {
upLoad(){//下单
var data = {
companyId:this.companyId||'',//公司ID
orderMoney:this.totalAmount,//订单总价
userId:uni.getStorageSync('openid'),
orderProductVo:{},//下单信息
orderType:11,//相册TYPE值
orderProductList:[],//景区下单信息
}
var orderProductListData = {//旅拍下单信息
buyNum:this.travelBeatNum,//购买数量
merchantId:this.merchantMessage[0].merchantId,
orderType:11,//11相册
productId:this.merchantMessage[0].merchantExtendProjectId,
productName:this.merchantMessage[0].merchantExtendProjectName,
extendContent:'',
unitPrice:this.leafletMoneyList[0].sellingMoney,//产品单价
orderImgList:[],////订单图片
couponList:[],//券信息
}
var orderProductListData2 = {//普通相片下单信息
buyNum:this.leafletNum,//购买数量
merchantId:this.merchantMessage[0].merchantId,
orderType:11,//11相册
productId:this.merchantMessage[0].merchantExtendProjectId,
productName:this.merchantMessage[0].merchantExtendProjectName,
extendContent:'',
unitPrice:this.leafletMoneyList[0].sellingMoney,//产品单价
orderImgList:[],////订单图片
couponList:[],//券信息 暂无券
}
this.pictureFrameList.forEach(item=>{//循环已经选择的图片分类到旅拍和普通
if(item.checkType == true){
var imgList = {
imgUrl:item.pictureSourceUrl||item.pictureZipUrl,
imgType:0,
}
if(item.pictureType==0){//旅拍
orderProductListData.orderImgList.push(imgList)
}else{//普通
orderProductListData2.orderImgList.push(imgList)
}
}
})
if(orderProductListData.orderImgList.length==0&&orderProductListData2.orderImgList.length==0){
uni.showToast({
title: '请选择相片',
icon: 'none'
})
return false
}
var extendContentData={
openid:uni.getStorageSync('openid'),
projectAddress:this.merchantMessage[0].projectAddress,
projectPhone:this.merchantMessage[0].projectPhone||'',
}
orderProductListData.extendContent = JSON.stringify(extendContentData)
orderProductListData2.extendContent = JSON.stringify(extendContentData)
if(imageInfo.height>imageInfo.width){ //加入下单信息
item['width'] = '680rpx' data.orderProductList.push(orderProductListData)
item['height'] = '956rpx' data.orderProductList.push(orderProductListData2)
this.$request('orderc/photo/photoCreateOrder',data).then((res)=>{
if(res.code=='00'){
uni.navigateTo({
url:'../../payment/orderPayment/orderPayment?orderId='+res.data.id+'&albumOrderdetail=1'
})
}else{ }else{
item['width'] = '680rpx' uni.showToast({
item['height'] = '510rpx' title: res.message,
icon: 'none'
})
} }
})
}, },
fail: function (error) { totalAmountFun(){//总金额显隐
console.error(error) if(this.totalAmountMask == false){
// 获取图片信息失败后的操作 this.totalAmountMask = true
}else{
this.totalAmountMask = false
}
},
stopPhotoMoney(){//计算价格 分为旅拍和单张
var travelBeatNum = 0 //旅拍张数
var leafletNum = 0 //普通照片张数
this.travelBeatMoney = 0
this.leafletMoney = 0
this.totalAmount = 0
this.pictureFrameList.forEach(item=>{
if(item.checkType == true){
if(item.pictureType==0){//旅拍
travelBeatNum+=1
}else{//普通
leafletNum+=1
}
} }
}) })
//当前到达多少档 每一档的价格
this.travelBeatMoneyList.forEach(item=>{
if(item.pictureNumMin<=travelBeatNum&&item.pictureNumMax===0){
this.travelBeatMoney = item.sellingMoney
}else if(item.pictureNumMin===0&&travelBeatNum<=item.pictureNumMax){
this.travelBeatMoney = 0
}else if(item.pictureNumMin<=travelBeatNum&&travelBeatNum<=item.pictureNumMax){
this.travelBeatMoney = parseInt(this.travelBeatMoney) + parseInt(item.sellingMoney) * (travelBeatNum-(item.pictureNumMin-1))
}
})
//普通价格
this.leafletMoney = this.leafletMoneyList[0].sellingMoney * leafletNum
//数量录入
this.travelBeatNum = travelBeatNum
this.leafletNum = leafletNum
this.totalAmount = parseInt(this.travelBeatMoney) + parseInt(this.leafletMoney)
this.priceNum = parseInt(this.travelBeatNum) + parseInt(this.leafletNum)
},
pictureLoad(){//调用查询照片接口
var data = {
phone : this.phone
}
if(this.merchantId!=''){
data.merchantId = this.merchantId
}
this.$request('scenic/albumPicture/albumPictureLoad', data).then(res => {
if (res.code === '00') {
var pictureList = []
res.data.pictureList.forEach(item=>{
if(item.isOrder===0){
pictureList.push(item)
}
})
this.pictureFrameList = pictureList
this.pictureFrameList.forEach(item=>{
item.checkType = false
item.pickerChoose = false
// let imageInfoObj = uni.getImageInfo({
// src: item.pictureZipUrl,
// success: function (imageInfo) {
// if(imageInfo.height>imageInfo.width){
// item['width'] = '680rpx'
// item['height'] = '956rpx'
// }else{
// item['width'] = '680rpx'
// item['height'] = '510rpx'
// }
// },
// fail: function (error) {
// console.error(error)
// // 获取图片信息失败后的操作
// }
// })
})
//价格计算
this.configTypeList = res.data.albumPictureConfigVo.configTypeList//价格表
this.travelBeatMoneyList = [] //旅拍价格表
this.leafletMoneyList = [] //普通价格列表 暂时限制普通价格只设置单张价格
this.configTypeList.forEach(item=>{
if(item.configType===0){//获得旅拍价格表
this.travelBeatMoneyList = item.configVoList
}else{//获得普通价格表
this.leafletMoneyList = item.configVoList
this.leafletTips = '普通上传相片价格为：'+item.configVoList[0].sellingMoney+'元/张'
}
})
//旅拍张数阶梯排序 普通价格表不用
this.travelBeatMoneyList.sort((a, b) => a.pictureNumMin - b.pictureNumMin)
this.travelBeatMoneyList.forEach(item=>{//旅拍价格提示文字 travelBeatTips
if(item.pictureNumMax===0){
this.travelBeatTips += item.pictureNumMin + '张以上时价格为：' + item.sellingMoney + '元，购买所有相片。'
}else{
this.travelBeatTips += item.pictureNumMin + '张至' + item.pictureNumMax + '张，价格为：' + item.sellingMoney + '元/张，'
}
})
this.mearchLoadList()
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
mearchLoadList(){//调用参数
var merchantIds = []
merchantIds.push(this.merchantId)
this.$request('scenic/merchantExtendProject/loadList',{
merchantIds:merchantIds
}).then((res)=>{
if(res.code=='00'){
this.merchantMessage = res.data
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
albumMerchants(){//调用查询照片接口
var data = {
}
this.$request('scenic/albumWeb/loadAlbumMerchants', data).then(res => {
if (res.code === '00') {
res.data.forEach(item=>{
item.label = item.name
})
this.columns = []
this.columns.push(res.data)
this.merchantId = res.data[0].merchantId
this.showAddress = res.data[0].label
this.pictureLoad()
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
toAccount(){//跳转账户切换
uni.navigateTo({
url: '/pages/album/photoAccount/photoAccount'
}) })
this.recordDeviceInfo()
}, },
methods: {
clickActFun(num){//宫格选择 clickActFun(num){//宫格选择
this.checkTypeFun = false this.checkTypeFun = false
this.titleclick = num this.titleclick = num
...@@ -278,24 +441,13 @@ export default { ...@@ -278,24 +441,13 @@ export default {
}, },
addressFun(e){//项目选择 addressFun(e){//项目选择
this.showAddress = e.value[0].label this.showAddress = e.value[0].label
this.merchantId = e.value[0].merchantId
this.show=false this.show=false
this.pictureLoad()
}, },
stopPhoto(index){//相片选择 stopPhoto(index){//相片选择
this.checkTypeFun = false this.checkTypeFun = false
if(this.titleclick==1||this.titleclick!=1&&this.pictureFrameListNum<this.maxChooseImg||this.titleclick!=1&&this.pictureFrameListNum==this.maxChooseImg&&this.pictureFrameList[index].checkType == true){//+this.maxChooseImg+
this.stopPhotoNumFun(index) this.stopPhotoNumFun(index)
}else if(this.titleclick!=1&&this.pictureFrameListNum>=this.maxChooseImg){
this.pictureFrameList[index].checkType = true
this.$nextTick(function() {
this.pictureFrameList[index].checkType = false
})
uni.showToast({
title: '最多选择'+this.maxChooseImg+'张',
icon:'error',
duration: 2000
})
}
if(this.pictureFrameListNum>0){ if(this.pictureFrameListNum>0){
this.bottomShow = true this.bottomShow = true
} }
...@@ -315,7 +467,9 @@ export default { ...@@ -315,7 +467,9 @@ export default {
this.pictureFrameListNum +=1 this.pictureFrameListNum +=1
} }
}) })
this.stopPhotoMoney()
}, },
blowUpFun(index){//相片放大 遮罩显隐 blowUpFun(index){//相片放大 遮罩显隐
this.blowUpMaks = true this.blowUpMaks = true
this.blowUpNumNew = index+1 this.blowUpNumNew = index+1
...@@ -345,7 +499,7 @@ export default { ...@@ -345,7 +499,7 @@ export default {
flex-direction:column; flex-direction:column;
height: 100vh; height: 100vh;
background-color: #fff; background-color: #fff;
padding-bottom: 464rpx; padding-bottom: 120rpx;
} }
.albumBoxAct{ .albumBoxAct{
background-color: #F5F7FA; background-color: #F5F7FA;
...@@ -502,6 +656,19 @@ export default { ...@@ -502,6 +656,19 @@ export default {
left: 192rpx; left: 192rpx;
z-index: 9; z-index: 9;
} }
.pictureFrame-blowTxt{
height: 32rpx;
line-height: 30rpx;
font-size: 24rpx;
color: #409EFF;
border: solid 1rpx #409EFF;
padding: 0 10rpx;
border-radius: 4rpx;
position: absolute;
bottom: 24rpx;
left: 24rpx;
z-index: 9;
}
.pictureFrame-boxTop, .pictureFrame-boxTop,
.pictureFrame-boxBottom{ .pictureFrame-boxBottom{
width: 248rpx; width: 248rpx;
...@@ -589,6 +756,19 @@ export default { ...@@ -589,6 +756,19 @@ export default {
color: #fff; // 选中后的图标默认是对号，这里吧对号变成透明颜色，就看不出来了 color: #fff; // 选中后的图标默认是对号，这里吧对号变成透明颜色，就看不出来了
} }
} }
.pictureFrame-blowTxt{
height: 32rpx;
line-height: 30rpx;
font-size: 24rpx;
color: #409EFF;
border: solid 1rpx #409EFF;
padding: 0 10rpx;
border-radius: 4rpx;
position: absolute;
bottom: 22rpx;
left: 24rpx;
z-index: 9;
}
.pictureFrame-checkAct{ .pictureFrame-checkAct{
/deep/ .wx-checkbox-input{ /deep/ .wx-checkbox-input{
border: solid 1px #FE6600; border: solid 1px #FE6600;
...@@ -598,7 +778,7 @@ export default { ...@@ -598,7 +778,7 @@ export default {
} }
.myPhoto-bottom{ .myPhoto-bottom{
width: 100%; width: 100%;
height: 464rpx; height: 120rpx;
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
...@@ -678,31 +858,7 @@ export default { ...@@ -678,31 +858,7 @@ export default {
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
color: #FFFFFF; color: #FFFFFF;
// 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;
...@@ -713,6 +869,19 @@ export default { ...@@ -713,6 +869,19 @@ export default {
text-align: center; text-align: center;
color: #FFFFFF; color: #FFFFFF;
} }
.trading-btnAct{
width: 260rpx;
height: 80rpx;
position: relative;
background: #FE6600;
border-radius: 40rpx;
text-align: center;
line-height: 80rpx;
font-size: 28rpx;
font-weight: 600;
text-align: center;
color: #FFFFFF;
}
} }
.message-jigsaw{ .message-jigsaw{
width: 160rpx; width: 160rpx;
...@@ -757,6 +926,19 @@ export default { ...@@ -757,6 +926,19 @@ export default {
top: -4rpx; top: -4rpx;
} }
} }
.message-money{
display: flex;
font-size: 28rpx;
font-weight: 600;
color: #FE6600;
line-height: 120rpx;
/deep/ .u-icon{
margin-left: 10px;
}
/deep/ .u-icon__icon{
color: #FE6600 !important;
}
}
} }
.feature-warn{ .feature-warn{
width: 750rpx; width: 750rpx;
...@@ -789,5 +971,39 @@ export default { ...@@ -789,5 +971,39 @@ export default {
right: 32rpx; right: 32rpx;
bottom: 58rpx; bottom: 58rpx;
} }
.totalAmount-mask{
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 120rpx;
z-index: 50;
.totalAmount-case{
background-color: #fff;
padding: 24rpx;
border-radius: 4rpx 4rpx 0 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
.case-list{
display: flex;
font-size: 28rpx;
margin-bottom: 10rpx;
text{
font-weight: 600;
color: #FE6600;
}
}
.case-list:nth-last-child(1){
margin-bottom: 0;
}
.case-tips{
font-size: 24rpx;
color: red;
margin-bottom: 10rpx;
}
}
}
</style> </style>
\ No newline at end of file
pages/album/photoAccount/photoAccount.vue
View file @ 176f6ca8
...@@ -8,15 +8,14 @@ ...@@ -8,15 +8,14 @@
<!--切换账号--> <!--切换账号-->
<view class="account-title">点击切换账号</view> <view class="account-title">点击切换账号</view>
<!--账号列表--> <!--账号列表-->
<view class="account-list"> <template v-for="(item,index) in phoneList">
<view class="list-num">153****6923</view> <view class="account-list" :key="index" @click="toMyphotoAlbum(item.mobile)">
<view class="list-new">当前使用</view> <view class="list-num">{{item.mobile}}</view>
</view> <!-- <view class="list-new">当前使用</view> -->
<view class="account-list">
<view class="list-num">152****7987</view>
</view> </view>
</template>
<!--添加账号--> <!--添加账号-->
<view class="account-add"> <view class="account-add" @click="toLogin">
<view class="add-icon"> <view class="add-icon">
<u-icon name="plus"></u-icon> <u-icon name="plus"></u-icon>
</view> </view>
...@@ -29,16 +28,51 @@ ...@@ -29,16 +28,51 @@
export default { export default {
data() { data() {
return { return {
phoneList:[],
statusBarHeight: 0,//状态栏高度 statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据 capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度 navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度 albumBoxTop:0,//顶部高度
companyId:'',
} }
}, },
onLoad(option) { onLoad(option) {
this.companyId = this.$commonjs.getKey(option,'companyId')||''
this.openid = uni.getStorageSync('openid')
this.recordDeviceInfo() this.recordDeviceInfo()
this.loginWork()
}, },
methods: { methods: {
loginWork(){//是否需要登陆 先通过openid检测下该openid是否有绑定手机号
var data = {
openid : this.openid
}
this.$request('scenic/albumUser/albumUserCheck', data).then(res => {
if (res.code === '00') {
this.phoneList = res.data
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
toLogin(){//跳转登录
uni.navigateTo({
url: '/pages/album/photoLogin/photoLogin?companyId='+this.companyId
})
},
toMyphotoAlbum(phone){//跳转相片
uni.navigateTo({
url: '/pages/album/myPhotoAlbum/myPhotoAlbum?phone='+phone+'&companyId='+this.companyId
})
},
recordDeviceInfo() { //---记录设备信息 recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度 this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据 this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
...@@ -61,6 +95,7 @@ export default { ...@@ -61,6 +95,7 @@ export default {
height: 100vh; height: 100vh;
background-color: #fff; background-color: #fff;
padding-bottom: 464rpx; padding-bottom: 464rpx;
overflow: auto;
} }
.nav-bar { .nav-bar {
width: 100%; width: 100%;
...@@ -121,7 +156,7 @@ export default { ...@@ -121,7 +156,7 @@ export default {
box-shadow: 0rpx 4rpx 20rpx 0rpx #EDEDED; box-shadow: 0rpx 4rpx 20rpx 0rpx #EDEDED;
border-radius: 16rpx; border-radius: 16rpx;
border: 2rpx solid #F5F5F5; border: 2rpx solid #F5F5F5;
padding: 30rpx 40rpx 0 40rpx; padding: 30rpx 40rpx 30rpx 40rpx;
margin: 0 auto; margin: 0 auto;
.add-icon{ .add-icon{
width: 92rpx; width: 92rpx;
......
pages/album/photoLogin/photoLogin.vue
View file @ 176f6ca8
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
</view> </view>
<view class="login-list"> <view class="login-list">
<image class="list-img" src="../static/album/longin02.png"></image> <image class="list-img" src="../static/album/longin02.png"></image>
<input class="uni-input list-input" placeholder="请输入摄影时预留手机号" /> <input class="uni-input list-input" v-model="phone" placeholder="请输入摄影时预留手机号" />
</view> </view>
<view class="login-list login-listAct"> <view class="login-list login-listAct">
<image class="list-img" src="../static/album/longin01.png"></image> <image class="list-img" src="../static/album/longin01.png"></image>
<input class="uni-input list-input" placeholder="请输入验证码" /> <input class="uni-input list-input" v-model="verifyCode" placeholder="请输入验证码" />
<view class="list-verification">获取验证码</view> <view class="list-verification" @click="verifyCodeSend">获取验证码</view>
</view> </view>
<view class="login-btn"> <view class="login-btn" @click="userLogin">
登陆 登陆
</view> </view>
</view> </view>
...@@ -28,16 +28,67 @@ ...@@ -28,16 +28,67 @@
export default { export default {
data() { data() {
return { return {
phone:'',//手机号
verifyCode:'',//验证码
statusBarHeight: 0,//状态栏高度 statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据 capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度 navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度 albumBoxTop:0,//顶部高度
companyId:'',
} }
}, },
onLoad(option) { onLoad(option) {
this.companyId = this.$commonjs.getKey(option,'companyId')||''
this.recordDeviceInfo() this.recordDeviceInfo()
}, },
methods: { methods: {
verifyCodeSend(){//发送验证码
var data = {
phone : this.phone
}
this.$request('scenic/albumUser/albumVerifyCodeSend', data).then(res => {
if (res.code === '00') {
uni.showToast({
title: '发送成功',
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
userLogin(){//登陆
var data = {
phone : this.phone,
verifyCode : this.verifyCode,
openid : uni.getStorageSync('openid')
}
this.$request('scenic/albumUser/albumUserLogin', data).then(res => {
if (res.code === '00') {
var phone = this.phone
uni.navigateTo({
url: '/pages/album/myPhotoAlbum/myPhotoAlbum?phone='+phone+'&companyId='+this.companyId
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
recordDeviceInfo() { //---记录设备信息 recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度 this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据 this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
......
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