Skip to content

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

影集开发

parent a01995e1
Show whitespace changes
Inline Side-by-side
Showing with 768 additions and 244 deletions
pages.json
View file @ fcc5fab3
......@@ -512,8 +512,7 @@
"path" : "albumOrder/albumOrder",
"style": {
"navigationBarTitleText": "填写订单",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
"enablePullDownRefresh": false
}
}
]
......
pages/album/albumOrder/albumOrder.vue
View file @ fcc5fab3
<template>
<view>
<view class="wrap">
<view class="top">
<view class='top-one'>
<view class="top-one-first">
<u-icon name="map-fill" color="#FC6703" size='40'></u-icon>
</view>
<view class="top-one-two">
取件地址
</view>
<view class="top-one-last">
现场取件
<u-icon name="arrow-right" color="#666666"></u-icon>
</view>
</view>
<view class="top-two">
<view class="top-two-first">
</view>
<view class="top-two-last">
<view>重庆市渝中区长江索道南站观景台旁</view>
<view>15808046328</view>
</view>
</view>
<view class="top-three">
<view class="top-three-first">
<u-icon name="plus-circle-fill" color="#FC6703" size='40'></u-icon>
</view>
<view class="top-three-two">
支持多个收货地址
</view>
<view class="top-three-last">
去修改
<u-icon name="arrow-right" color="#666666"></u-icon>
</view>
</view>
</view>
<view class="middle">
<view class="middle-list" v-for="(item,index) in 3" :key='index'>
<view class="list-title">
云相册
</view>
<view class="product-list" v-for="(item,a) in 2" :key='a'>
<view class="product-left">
<image src="../static/album/custom.png"></image>
</view>
<view class="product-right">
<view class="product-number">
<text>
单张照片
</text>
<text>
x1
</text>
</view>
<view class="bottom">
<view class="product-price">
<text style="font-size: 32rpx;">¥</text>
20
</view>
<view class="product-download">
<text>下载/打印</text>
<u-icon name="arrow-right" color="#666666"></u-icon>
</view>
</view>
</view>
</view>
</view>
<view class="bottom">
<view>
商品合计
<text class="bottom-price">
<text style="font-size: 28rpx;">¥</text>100
</text>
</view>
<text class="big-btn">
提交订单
</text>
</view>
</view>
</template>
......@@ -24,3 +101,130 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.wrap{
padding: 24rpx;
}
.top{
background: #ffffff;
border-radius: 16rpx;
padding: 24rpx;
}
.top-one{
display: flex;
justify-content: space-between;
font-weight: bold;
align-items: center;
}
.top-one-first{
width: 70rpx;
}
.top-one-two{
flex: 1;
}
.top-one-last{
display: flex;
}
.top-two{
display: flex;
color: #666666;
}
.top-two-first{
width: 70rpx;
}
.top-two-last view{
margin-top: 10rpx;
}
.top-three{
display: flex;
align-items: center;
margin-top: 20rpx;
}
.top-three-first{
width: 70rpx;
}
.top-three-two{
flex: 1;
}
.top-three-last{
display: flex;
}
.middle{
padding-bottom:24rpx 24rpx 120rpx 24rpx;
}
.middle-list{
background: #ffffff;
border-radius: 16rpx;
margin-top: 20rpx;
padding: 24rpx;
}
.list-title{
font-weight: bold;
}
.product-list{
margin: 20rpx 0;
display: flex;
}
.product-left{
margin-right: 20rpx;
display: flex;
align-items: center;
}
.product-left image{
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
}
.product-right{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-number{
display: flex;
justify-content: space-between;
font-weight: bold;
}
.product-price{
color: $red;
font-size: 36rpx;
font-weight: bold;
}
.product-download{
background:#F7F7F7;
border-radius: 8rpx;
display: flex;
justify-content: space-between;
height: 56rpx;
align-items: center;
padding: 0 20rpx;
}
.bottom{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 120rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
padding: 0 24rpx;
}
.bottom-price{
color: $red;
font-size: 36rpx;
font-weight: bold;
margin-left: 10rpx;
}
.big-btn{
border-radius: 40rpx;
width: 200rpx;
height: 80rpx;
font-size: 32rpx;
line-height: 80rpx;
}
</style>
\ No newline at end of file
pages/album/albumOrderdetail/albumOrderdetail - 副本.vue 0 → 100644
View file @ fcc5fab3
<template>
<view class="order-wrap">
<view class="top">
订单信息
</view>
<view class="middle">
<view>
<text class="grey">
订单编号
</text>
<text style="flex: 1;width: 0;overflow-wrap: break-word;">
{{orderInfo.id}}
</text>
<image @click="copyText(orderInfo.id)" src="@/static/img/my/icon01.png" class="copy-image">
</image>
</view>
<view>
<text class="grey">
产品名称
</text>
{{orderInfo.productName}}
</view>
<view>
<text class="grey">
订单金额
</text>
￥{{orderInfo.pdOrderMoney}}
</view>
<view>
<text class="grey">
订单数量
</text>
{{orderInfo.orderNum}}
</view>
<view>
<text class="grey">
订单时间
</text>
{{orderInfo.orderTime}}
</view>
<view>
<text class="grey">
支付单号
</text>
{{orderInfo.paymentId}}
</view>
<view>
<text class="grey">
支付时间
</text>
{{orderInfo.paymentTime?orderInfo.paymentTime:orderInfo.orderTime}}
</view>
<view>
<text class="grey">
咨询电话
</text>
023-68567748
</view>
</view>
<view class="bottom">
<view class="bottom-rule">
<text class="grey">退改规则</text>
<text>不可退</text>
</view>
<view class="bottom-btn">
<!-- 11图片，12视频 -->
<text class="button-empty" @click="goMyPhoto()" v-if="orderInfo.orderType==11">我的影集</text>
<!-- 全部退货退款时不显示 -->
<template v-if="orderInfo.orderStatus!=8">
<text class="button" @click="download()">下载</text>
<text class="button" @click="showPop=true" v-if="orderInfo.orderType==11">打印</text>
</template>
</view>
</view>
<!-- 打印弹窗 -->
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="70%">
<view class="pop-head">
<text style="font-size: 36rpx;font-weight: bold;">
打印
</text>
<text>
（现场自取）
</text>
</view>
<view class="pop-middle">
<view>
<text class="middle-tip">
取片电话：
</text>
<input type="number" placeholder="请输入取片人手机号码" v-model.trim="printPhone"/>
</view>
<view>
<text class="middle-tip">
取片地址：
</text>
<text>
{{extendContent.projectAddress||''}}
</text>
</view>
<view>
<text class="middle-tip">
运营时间：
</text>
<text>
09:00-22:00
</text>
</view>
<view>
<text class="middle-tip">
咨询电话：
</text>
<text>
{{extendContent.projectPhone||''}}
</text>
</view>
<view>
<text class="middle-tip">
温馨提示：
</text>
<text style="color: #999999;">
每个订单仅限免费打印一次取片时请向现场工作人员出示订单号或支付单号
</text>
</view>
</view>
<view class="pop-bottom">
<text class="pop-btn" @click="commit()">
提交
</text>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
timer:null,//setTimeout函数
showPop:false,//弹窗显示隐藏
orderId:'',//订单编号
orderInfo:'',//订单信息
imgList:[],//下载图片列表
downImgNumber:0,//下载图片的数量
extendContent:'',//额外信息
printPhone:'',//打印电话号码
}
},
onLoad(option) {
// this.downloadFun('https://picture.pangdly.com/img/home1.69efcf8.jpg')
this.orderId=option.orderId||''
this.getDetail()
},
onUnload() {
if(this.timer) {
clearTimeout(this.timer)
this.timer = null
}
},
methods: {
//---打印提交
commit(){
if(!this.$commonjs.phoneReg().test(this.printPhone)){
uni.showToast({
title:'请输入正确的电话号码',
icon: 'none'
})
return
}
let data = {
orderId:this.orderId,//订单ID
userId:uni.getStorageSync('openid')||'',//用户Id
phone:this.printPhone,//电话号码
}
this.$request('order/userOrder/updateOrder', data).then(res => {
if (res.code == '00') {
uni.showToast({
title:'申请成功',
icon: 'none'
})
this.showPop=false
this.phone=''
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---复制内容
copyText(value){
uni.setClipboardData({
data:value,
success:function(){
uni.showToast({
title: '复制成功',
icon: 'none'
})
}
})
},
//---获取订单详情
getDetail(){
let data = {
orderId:this.orderId,//订单ID
userId:uni.getStorageSync('openid')||'',//用户Id
}
this.$request('order/userOrder/findOrderDetail', data).then(res => {
if (res.code == '00') {
this.orderInfo = res.data
this.extendContent=JSON.parse(this.orderInfo.extendContent)
let imgList=this.orderInfo.orderImgList||[]
imgList.forEach(item=>{
this.imgList.push(item.imgUrl)
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
this.timer = setTimeout(() => {
this.getDetail()
}, 2000)
})
},
//---跳转我的影集
goMyPhoto(){
uni.navigateTo({
url:'/pages/album/purchasedPhotoAlbum/purchasedPhotoAlbum'
})
},
//---点击下载
download(){
this.downImgNumber=0
this.imgList.forEach(item=>{
this.downloadFun(item)
})
},
//---下载方法
downloadFun(imgUrl) {
uni.showLoading({
title: '下载中',
mask: true
})
let fileName = new Date().getTime()
uni.downloadFile({ //下载文件资源到本地
url:imgUrl,
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.jpg', //filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH,时间戳为文件名
success: res => { //下载到本地成功
if(res.statusCode==200){
let filePath = res.filePath
uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
filePath,
success: file => { //保存成功
this.downImgNumber+=1
if(this.downImgNumber==this.imgList.length){
uni.showToast({
title: '下载成功',
icon: 'success',
mask: true
})
}
},
fail: err => {
uni.hideLoading()
this.getPermissions(err)
}
})
}
},
fail: err => { //下载失败
uni.hideLoading()
uni.showToast({
title: '下载失败',
icon: 'none',
mask: true
})
}
})
},
//---获取授权
getPermissions(err){
//拒绝授权时显示
if (err.errMsg.includes('fail auth deny')) {
uni.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: data => {
//打开权限设置
uni.openSetting({
success: setting => {
if (!setting.authSetting['scope.writePhotosAlbum']) {
uni.showModal({
title: '提示',
content: '获取权限失败无法保存到相册',
showCancel: false,
})
}
},
})
}
})
}
}
}
}
</script>
<style scoped lang="scss">
.order-wrap{
background: #FFFFFF;
box-shadow: 0px 0px 12rpx 2rpx rgba(0,0,0,0.08);
border-radius: 16rpx;
margin: 24rpx;
}
.top{
height: 92rpx;
line-height: 92rpx;
border-bottom: 1px solid #ececec;
padding: 0 24rpx;
font-size: 32rpx;
color: #191919;
font-weight: bold;
}
.middle{
padding: 0 24rpx 48rpx 24rpx;
border-bottom: 1px solid #ececec;
>view{
display: flex;
margin-top: 32rpx;
}
}
.copy-image{
width: 32rpx;
height: 32rpx;
flex-shrink: 0;
}
.grey{
color: #999999;
flex-shrink: 0;
margin-right: 20rpx;
}
.bottom{
padding: 48rpx 24rpx;
}
.bottom-rule{
display: flex;
justify-content: space-between;
}
.bottom-btn{
display: flex;
justify-content: space-between;
margin-top: 48rpx;
}
.button{
width: 144rpx;
height: 64rpx;
background: $theme;
border-radius:8rpx;
display: inline-block;
color:#ffffff;
text-align: center;
line-height: 64rpx;
}
.button-empty{
width: 144rpx;
height: 64rpx;
border-radius:8rpx;
display: inline-block;
border: 1px solid #999999;
text-align: center;
line-height: 64rpx;
}
// 打印弹窗
.pop-head{
text-align: center;
margin-top: 40rpx;
}
.pop-middle{
padding:20rpx 48rpx 32rpx 48rpx;
font-size: 32rpx;
view{
display: flex;
margin-top: 40rpx;
input{
flex: 1;
border-bottom: 1px solid #ececec;
padding-bottom: 10rpx;
}
}
}
.middle-tip{
font-weight: bold;
flex-shrink: 0;
}
.pop-bottom{
margin-top: 60rpx;
text-align: center;
}
.pop-btn{
display: inline-block;
width: 212rpx;
height: 80rpx;
background:$theme;
border-radius: 44rpx;
text-align: center;
line-height: 80rpx;
color: #ffffff;
font-size: 32rpx;
}
</style>
pages/album/albumOrderdetail/albumOrderdetail.vue
View file @ fcc5fab3
<template>
<view class="order-wrap">
<view class="wrap">
<view class="top">
订单信息
<view>
已完成
</view>
<view class="middle">
<view>
<text class="grey">
订单编号
</text>
<text style="flex: 1;width: 0;overflow-wrap: break-word;">
{{orderInfo.id}}
</text>
<image @click="copyText(orderInfo.id)" src="@/static/img/my/icon01.png" class="copy-image">
相片保留10天请尽快下载, 下载保存手机
</view>
</view>
</image>
<view class="middle">
<view class="middle-product">
<view class="product-top">
<view class="product-title">
长江索道-三宫格照片下载/打印
</view>
<view>
<text class="grey">
产品名称
</text>
{{orderInfo.productName}}
<text>在线支付：</text>
<text>¥45</text>
</view>
<view>
<text class="grey">
订单金额
</text>
￥{{orderInfo.pdOrderMoney}}
<text>照片数量：</text>
<text>10</text>
</view>
<view>
<text class="grey">
订单数量
</text>
{{orderInfo.orderNum}}
<text>取件方式：</text>
<text>现场取件</text>
</view>
<view>
<text class="grey">
订单时间
</text>
{{orderInfo.orderTime}}
<text>取件电话：</text>
<text>15808046328</text>
</view>
<view>
<text class="grey">
支付单号
</text>
{{orderInfo.paymentId}}
<text>取件地址：</text>
<text>长江索道南站</text>
</view>
<view>
<text class="grey">
支付时间
</text>
{{orderInfo.paymentTime?orderInfo.paymentTime:orderInfo.orderTime}}
</view>
<view>
<text class="grey">
咨询电话
</text>
023-68567748
<view class="product-bottom">
<u-icon name='kefu-ermai'></u-icon>
联系客服
</view>
</view>
<view class="bottom">
<view class="bottom-rule">
<text class="grey">退改规则</text>
<text>不可退</text>
<view class="middle-order">
<view class="order-title">
订单信息
</view>
<view class="bottom-btn">
<!-- 11图片，12视频 -->
<text class="button-empty" @click="goMyPhoto()" v-if="orderInfo.orderType==11">我的影集</text>
<!-- 全部退货退款时不显示 -->
<template v-if="orderInfo.orderStatus!=8">
<text class="button" @click="download()">下载</text>
<text class="button" @click="showPop=true" v-if="orderInfo.orderType==11">打印</text>
</template>
<view>
<text>订单编号</text>
<text>z20230707220011816514</text>
<text class="order-btn">复制</text>
</view>
<view>
<text>交易号</text>
<text>20230707220011816514</text>
</view>
<!-- 打印弹窗 -->
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="70%">
<view class="pop-head">
<text style="font-size: 36rpx;font-weight: bold;">
打印
</text>
<text>
（现场自取）
</text>
<view>
<text>付款时间</text>
<text>2023-07-07 10:50:11</text>
</view>
<view class="pop-middle">
<view>
<text class="middle-tip">
取片电话：
</text>
<input type="number" placeholder="请输入取片人手机号码" v-model.trim="printPhone"/>
<text>实际支付</text>
<text>2024-06-06</text>
</view>
<view>
<text class="middle-tip">
取片地址：
</text>
<text>
{{extendContent.projectAddress||''}}
</text>
<text>退改规则</text>
<text>不可退</text>
</view>
</view>
</view>
<view>
<text class="middle-tip">
运营时间：
</text>
<view class="bottom">
<text>
09:00-22:00
删除订单
</text>
</view>
<view>
<text class="middle-tip">
咨询电话：
</text>
<text>
{{extendContent.projectPhone||''}}
下载照片
</text>
</view>
<view>
<text class="middle-tip">
温馨提示：
</text>
<text style="color: #999999;">
每个订单仅限免费打印一次取片时请向现场工作人员出示订单号或支付单号
</text>
</view>
</view>
<view class="pop-bottom">
<text class="pop-btn" @click="commit()">
提交
<text>
再次打印
</text>
</view>
</u-popup>
</view>
</template>
......@@ -147,19 +91,15 @@ export default {
data() {
return {
timer:null,//setTimeout函数
showPop:false,//弹窗显示隐藏
orderId:'',//订单编号
orderInfo:'',//订单信息
imgList:[],//下载图片列表
downImgNumber:0,//下载图片的数量
extendContent:'',//额外信息
printPhone:'',//打印电话号码
}
},
onLoad(option) {
// this.downloadFun('https://picture.pangdly.com/img/home1.69efcf8.jpg')
this.orderId=option.orderId||''
this.getDetail()
},
onUnload() {
if(this.timer) {
......@@ -168,36 +108,6 @@ export default {
}
},
methods: {
//---打印提交
commit(){
if(!this.$commonjs.phoneReg().test(this.printPhone)){
uni.showToast({
title:'请输入正确的电话号码',
icon: 'none'
})
return
}
let data = {
orderId:this.orderId,//订单ID
userId:uni.getStorageSync('openid')||'',//用户Id
phone:this.printPhone,//电话号码
}
this.$request('order/userOrder/updateOrder', data).then(res => {
if (res.code == '00') {
uni.showToast({
title:'申请成功',
icon: 'none'
})
this.showPop=false
this.phone=''
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---复制内容
copyText(value){
uni.setClipboardData({
......@@ -321,105 +231,90 @@ export default {
</script>
<style scoped lang="scss">
.order-wrap{
background: #FFFFFF;
box-shadow: 0px 0px 12rpx 2rpx rgba(0,0,0,0.08);
border-radius: 16rpx;
margin: 24rpx;
.wrap{
padding: 24rpx;
}
.top{
height: 92rpx;
line-height: 92rpx;
border-bottom: 1px solid #ececec;
padding: 0 24rpx;
font-size: 32rpx;
color: #191919;
.top view:first-child{
color: #00B42B;
font-weight: bold;
font-size: 36rpx;
}
.middle{
padding: 0 24rpx 48rpx 24rpx;
border-bottom: 1px solid #ececec;
>view{
display: flex;
margin-top: 32rpx;
}
.top view:last-child{
color: $grey;
margin-top: 12rpx;
}
.copy-image{
width: 32rpx;
height: 32rpx;
flex-shrink: 0;
.middle-product{
background: #ffffff;
border-radius: 16rpx;
padding-top: 20rpx;
margin-top: 30rpx;
}
.grey{
color: #999999;
flex-shrink: 0;
margin-right: 20rpx;
.product-top view{
margin-top: 20rpx;
padding: 0 40rpx;
}
.bottom{
padding: 48rpx 24rpx;
.product-top view text:first-child{
color: $grey;
}
.product-title{
font-weight: bold;
}
.bottom-rule{
.product-bottom{
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
border-top: 1px solid #f7f7f7;
margin-top: 20rpx;
}
.bottom-btn{
.middle-order{
background: #ffffff;
border-radius: 16rpx;
margin-top: 30rpx;
}
.middle-order view{
padding: 32rpx 40rpx;
border-bottom: 1px solid #F7F8FA;
color: #666666;
display: flex;
justify-content: space-between;
margin-top: 48rpx;
align-items: center;
}
.button{
width: 144rpx;
height: 64rpx;
background: $theme;
border-radius:8rpx;
display: inline-block;
color:#ffffff;
text-align: center;
line-height: 64rpx;
.middle-order view.order-title{
font-weight: bold;
color: #333333;
}
.button-empty{
width: 144rpx;
height: 64rpx;
border-radius:8rpx;
.order-btn{
display: inline-block;
border: 1px solid #999999;
width: 100rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
line-height: 64rpx;
font-size: 24rpx;
background: #F7F8FA;
border-radius: 20rpx;
}
// 打印弹窗
.pop-head{
text-align: center;
margin-top: 40rpx;
}
.pop-middle{
padding:20rpx 48rpx 32rpx 48rpx;
font-size: 32rpx;
view{
.bottom{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 1;
display: flex;
margin-top: 40rpx;
input{
flex: 1;
border-bottom: 1px solid #ececec;
padding-bottom: 10rpx;
}
}
}
.middle-tip{
justify-content:space-between;
align-items: center;
background: #ffffff;
height: 120rpx;
padding: 0 40rpx;
text{
font-weight: bold;
flex-shrink: 0;
}
.pop-bottom{
margin-top: 60rpx;
text-align: center;
}
.pop-btn{
display: inline-block;
width: 212rpx;
height: 80rpx;
background:$theme;
border-radius: 44rpx;
width: 170rpx;
height: 64rpx;
text-align: center;
line-height: 80rpx;
color: #ffffff;
font-size: 32rpx;
line-height: 64rpx;
border: 1px solid #ededed;
border-radius: 32rpx;
}
}
</style>
pages/indexs/index/index.vue
View file @ fcc5fab3
......@@ -151,7 +151,8 @@ export default {
onLoad(option){
// 首次进入时执行
let companyId=this.$commonjs.getCompanyId(option)
if(!companyId){
let openid=uni.getStorageSync('openid')||''
if(!companyId&&openid){
this.getCompanyId()
}
},
......
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