<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.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>