1048 lines
29 KiB
Vue
1048 lines
29 KiB
Vue
<template>
|
||
<view class="">
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<z-nav-bar title="订单详情"></z-nav-bar>
|
||
<view class="adDefault" v-if="consigneeShow && orderContet.orderType == 'order'">
|
||
<view class="defalTop">
|
||
<text class="userName">
|
||
{{orderContet.consignee.consigneeName}}
|
||
</text>
|
||
<text class="userTel">
|
||
{{orderContet.consignee.consigneeMobile}}
|
||
</text>
|
||
</view>
|
||
<view class="defalBottom">
|
||
<text class="userAddress">
|
||
{{orderContet.consignee.province}} {{orderContet.consignee.city}} {{orderContet.consignee.county}} {{orderContet.consignee.address}}
|
||
</text>
|
||
</view>
|
||
<u-icon name="map" color="#aaa" size="25" class="defalLeft"></u-icon>
|
||
</view>
|
||
|
||
<view class="orderList" v-if="consigneeShow">
|
||
<view class="" v-if="sheetList.length > 1 && orderContet.orderStatus==2" style="background-color: rgb(113, 213, 161); margin-bottom: 20rpx; border-radius: 20rpx; color: #fff; font-size: 28rpx; padding: 10rpx;">
|
||
订单已被拆分成 {{sheetList.length}} 个包裹
|
||
</view>
|
||
<view class="orderItem">
|
||
<view class="" style="position: relative; height: 120rpx;">
|
||
<text class="orderState orderState0" v-if="orderContet.orderStatus==0">待支付</text>
|
||
<text class="orderState orderState1" v-if="orderContet.orderStatus==1">待发货</text>
|
||
<text class="orderState orderState2" v-if="orderContet.orderStatus==2">待收货</text>
|
||
<text class="orderState orderState3" v-if="orderContet.orderStatus==3">已完成</text>
|
||
<text class="orderState orderState5" v-if="orderContet.orderStatus==5">已超时</text>
|
||
</view>
|
||
<view class="orderContent" v-for="(item,index) in orderContet.goodsList" :key="index"
|
||
@click="goDetail(item.productId)" v-if="orderContet.goodsList.length > 0">
|
||
<image :src="item.productImage" mode=""></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle">
|
||
<text>{{item.productName}}</text>
|
||
</view>
|
||
<view class="orderPrice">
|
||
￥<text style="font-weight: bold;">{{item.productPrice}}</text><br>
|
||
<text style="color: #bbbbbb;font-size: 20rpx;margin-right: 10rpx;">X</text>
|
||
<text style="color: #bbbbbb;">{{item.quantity}}</text>
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
|
||
<!-- <view class="orderOper" v-if="orderContet.orderStatus=='3'"> -->
|
||
<view class="orderOper" v-if="item.orderStatus == 3">
|
||
<view style="width: 100%; text-align: right;">
|
||
<view v-if="userRecordid == null" @click.stop="pingji(item.productId)" class="opCan" >评价</view>
|
||
<view v-else @click.stop="showZhuiping(item.productId)" class="opCan" >追评</view>
|
||
</view>
|
||
</view>
|
||
|
||
<br clear="both">
|
||
</view>
|
||
<view class="orderContent" v-if="orderContet.products==''">
|
||
<image src="../../static/icon/oder_chong.png" mode="" style="height: 150rpx;"></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle">
|
||
<text>充值</text>
|
||
</view>
|
||
<view class="orderPrice">
|
||
￥<text style="font-weight: bold;">{{orderContet.realMoney}}</text>
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
<view class="orderallpri">
|
||
<span style="color: #666;margin-right: 10rpx;float: left;">商品总价 : </span>
|
||
<span>￥</span>{{orderContet.orderPrice}}
|
||
</view>
|
||
<view class="orderReal" v-if="orderContet.orderType == 'order'">
|
||
<span style="color: #666;margin-right: 10rpx;float: left;">运费 : </span>
|
||
<span>￥</span>{{orderContet.shippingPrice}}
|
||
</view>
|
||
<view class="orderReal">
|
||
<span style="color: #666;margin-right: 10rpx;float: left;">优惠券 : </span>
|
||
<b v-if="orderContet.coupon.couponAmount" style="color: #dd3c0c;"><span>-￥</span>{{orderContet.coupon.couponAmount}}</b>
|
||
<b v-else style="color: #dd3c0c;"><span>-￥</span>0</b>
|
||
</view>
|
||
<view class="orderReal">
|
||
<span style="color: #666;margin-right: 10rpx;float: left;">实付款 : </span>
|
||
<b style="color: #dd3c0c;"><span>￥</span>{{orderContet.realPrice}}</b>
|
||
</view>
|
||
<view class="orderYunf">
|
||
<span style="color: #666;margin-right: 10rpx;float: left;">订单编号 : </span>
|
||
<text style="font-size: 24rpx;color: #666;">{{orderContet.orderSn}}</text>
|
||
</view>
|
||
<view class="orderReal">
|
||
<span style="color: #666;margin-right: 10rpx;float: left;">创建时间 : </span>
|
||
<text style="font-size: 24rpx;color: #666;">{{orderContet.createTime}}</text>
|
||
</view>
|
||
<view class="orderReal" v-if="orderContet.orderStatus >= 1 && orderContet.orderStatus != 5">
|
||
<span style="color: #666;margin-right: 10rpx;float: left;">付款时间 : </span>
|
||
<text style="font-size: 24rpx;color: #666;">{{orderContet.paymentDate}}</text>
|
||
</view>
|
||
<!-- <view class="orderReal" v-if="orderContet.orderStatus >= 2 && orderContet.orderStatus != 5">
|
||
<span style="color: #666;margin-right: 10rpx;float: left;">发货时间 : </span>
|
||
<text style="font-size: 24rpx;color: #666;">{{orderContet.shippingTime}}</text>
|
||
</view> -->
|
||
<view class="orderOper">
|
||
<view style="width: 100%; text-align: right;">
|
||
<!-- <u-button text="" type="success" plain ></u-button>
|
||
<u-button text="" type="primary" plain >
|
||
|
||
</u-button> -->
|
||
<view v-if="orderContet.orderStatus==2 && sheetList.length > 0 && orderContet.orderStatus != 5" class="opFix" @click="seeExpressDetail(orderContet)">查看物流</view>
|
||
<view v-if="orderContet.orderStatus==2" class="opCan" @click="OverOrder" >确认收货</view>
|
||
|
||
<view v-if="orderContet.orderStatus==0" class="opFix" @click="canceOrder">取消订单</view>
|
||
<view v-if="orderContet.orderStatus==0" class="opCan" @click="goPay(orderContet)">去支付</view>
|
||
|
||
<view class="opCan" @click="kefu">联系客服</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 对话框 -->
|
||
<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
|
||
<view class="tanchu" >
|
||
<view class="dp_title" v-if="pjType != 'zhuiping'">添加评价</view>
|
||
<view class="dp_title" v-else>添加追评</view>
|
||
|
||
<view style="max-height: 1000rpx;overflow-y: scroll;">
|
||
<uni-forms :modelValue="Pform">
|
||
<!-- 评价图片 -->
|
||
<!-- end -->
|
||
<!-- <uni-forms-item name="comment" label-width="0">
|
||
<uni-easyinput type="textarea" v-model="Pform.comment" placeholder="请输入您的商品评价" />
|
||
</uni-forms-item> -->
|
||
</uni-forms>
|
||
<!-- <u-button type="success" @click="submitPJ">提交评价</u-button> -->
|
||
<!-- 提交 -->
|
||
<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
|
||
|
||
<view class="mb30" v-if="pjType != 'zhuiping'">
|
||
<span :class="['star',Pform.star>=1 ? 'starLight': 'starGray']" @click="getStar(1)"></span>
|
||
<span :class="['star',Pform.star>=2 ? 'starLight': 'starGray']" @click="getStar(2)"></span>
|
||
<span :class="['star',Pform.star>=3 ? 'starLight': 'starGray']" @click="getStar(3)"></span>
|
||
<span :class="['star',Pform.star>=4 ? 'starLight': 'starGray']" @click="getStar(4)"></span>
|
||
<span :class="['star',Pform.star>=5 ? 'starLight': 'starGray']" @click="getStar(5)"></span>
|
||
</view>
|
||
<view class="mb30" v-if="pjType != 'zhuiping'">
|
||
<!-- <uni-file-picker :auto-upload="false" ref="files" @delete="deleteImg" limit="5" @success="upSuccess" @select="select" v-model="Pform.img" fileMediatype="image" :image-styles="imageStyles"/> -->
|
||
<u-upload :fileList="Pform.img" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="4"
|
||
width="80" height="80" :previewFullImage="true">
|
||
</u-upload>
|
||
</view>
|
||
<view class="flex-sub flexbox">
|
||
<i @click="showEmj()" :class="emojiIcon" ></i>
|
||
<!-- <input type="text" @focus="InputFocus" @blur="InputBlur" v-model="message" @input="textareaBInput" placeholder-style="font-size:24rpx;color:#aaaaaa;" placeholder="请输入您要发送的内容"></input> -->
|
||
<textarea class="textarea" v-model="Pform.comment" @focus="InputFocus" @blur="InputBlur" @input="textareaBInput" placeholder-style="font-size:24rpx;color:#aaaaaa;" placeholder="请输入您要发送的内容"></textarea>
|
||
</view>
|
||
<view class="">
|
||
<!-- <button class="cu-btn bg-gradual-blue shadow-blur">发送</button> -->
|
||
<u-button type="success" @click="submitPJ" v-if="pjType != 'zhuiping'">提交评价</u-button>
|
||
<u-button type="success" @click="zhuiping" v-else>提交追评</u-button>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="position: relative;">
|
||
<emotion @emotion="handleEmj" :height="220" v-if="isShowEmj" :windowWidth="windowWidth"></emotion>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup mode="bottom" :show="sheetListShow" :round="10" @close="sheetListShow=false">
|
||
<view class="tanchu expresslist" style="height: 500rpx; overflow-y: scroll;">
|
||
<view class="title">
|
||
请选择要查看包裹
|
||
</view>
|
||
<view class="list">
|
||
<view class="item" v-for="(item,index) in sheetList" @click="seeExpressDetails(item)">
|
||
<h4 style="margin-bottom: 10rpx;">包裹 {{index+1}}</h4>
|
||
<view class="">运单号：{{item.expressOrderSn}}
|
||
<u-tag @click="copyData(item.expressOrderSn)" size="mini" class="copyCode" text="复制单号" plain type="success" /></view>
|
||
<view class="">发货时间：{{item.createTime}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
<music-play :playData="playData"></music-play>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import musicPlay from '@/components/music.vue'
|
||
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
|
||
import $http from '@/config/requestConfig.js';
|
||
import {
|
||
setPay,
|
||
setPayAssign,setWXPay
|
||
} from '@/config/utils';
|
||
import {
|
||
mapState
|
||
} from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
userRecordid:null, // 用户的评价状态
|
||
playData:{},
|
||
title: 'Hello',
|
||
isShowEmj: false,
|
||
emojiIcon:'cuIcon-emoji',
|
||
message: '',
|
||
|
||
windowWidth:0,
|
||
windowHeight:500,
|
||
Pform:{ // 评价表单
|
||
star:0,
|
||
comment:'',
|
||
img:[],
|
||
html:''
|
||
},
|
||
pingID:null,
|
||
productID:null, // 订单商品id
|
||
imageStyles:{
|
||
width:64,
|
||
height:64,
|
||
border:{
|
||
color:"#89aa7d",
|
||
width:2,
|
||
style:'dashed',
|
||
radius:'2px'
|
||
}
|
||
},
|
||
pingjiaShow:false,
|
||
logisticsData: [], // 快递信息列表
|
||
titleStat: '',
|
||
orderID: 0,
|
||
orderSn:'',
|
||
orderType: '',
|
||
orderContet: {},
|
||
deliverDetails: [{
|
||
Traces: []
|
||
}], // 物流详情信息全部
|
||
deliverDetailsLength: null,
|
||
emoji:[],
|
||
Files:[],
|
||
pjType:'',
|
||
sheetList: [], // 面单数据
|
||
consigneeShow: false,
|
||
sheetListShow:false,
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||
this.orderID = e.orderId
|
||
this.orderType = e.orderType
|
||
this.orderSn = e.orderSn
|
||
console.log(this.orderID,'this.orderID')
|
||
},
|
||
onHide() {
|
||
this.sheetList= []
|
||
},
|
||
onShow() {
|
||
this.getOrderList()
|
||
},
|
||
components:{
|
||
emotion,
|
||
musicPlay
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo']),
|
||
},
|
||
|
||
methods: {
|
||
// 复制到剪切板
|
||
copyData(data){
|
||
uni.setClipboardData({
|
||
data,
|
||
success: function () {
|
||
console.log('success');
|
||
}
|
||
});
|
||
},
|
||
seeExpressDetails(item){
|
||
console.log(item,'item')
|
||
uni.navigateTo({
|
||
url: "./deliverDetail?orderSn=" + this.orderContet.orderSn + "&expressOrderSn=" + item.expressOrderSn + "&expressCompanyCode="+item.expressCompanyCode + "&expressCompanyName="+item.expressCompanyName
|
||
})
|
||
},
|
||
// 倒计时回调
|
||
countDown(){
|
||
console.log('重新刷新订单')
|
||
this.getOrderList()
|
||
},
|
||
// 获得输入的表情数组
|
||
handleEmj(i) {
|
||
console.log(i,'i---------');
|
||
this.inputValue = i
|
||
// console.log(this.inputValue);
|
||
if(i.emotioni == '[em_98]') {
|
||
//匹配最后一个表情符号并删除11。
|
||
this.Pform.comment = this.Pform.comment.replace(/(\[[^\]]+\]|[\s\S])$/, '');
|
||
if(this.emoji.length > 0){
|
||
this.emoji = this.emoji.slice(0,-1)
|
||
}
|
||
} else {
|
||
this.emoji.push({'tag' : i.emotion, 'name':i.emotioni})
|
||
// console.log(this.emoji,'this.emoji')
|
||
this.Pform.comment += i.emotioni;
|
||
/// this.Pform.html += i.emotion
|
||
}
|
||
},
|
||
showZhuiping(val){
|
||
this.pjType = 'zhuiping'
|
||
this.pingjiaShow = true
|
||
this.productID = val
|
||
this.pingID = pingid
|
||
},
|
||
// 追加评论
|
||
zhuiping(){
|
||
let data = {
|
||
'oid': this.userRecordid,
|
||
'userId': this.userInfo.id,
|
||
'bookid': this.productID,
|
||
'conTent': this.Pform.comment
|
||
}
|
||
console.log(data,'data')
|
||
$http.request({
|
||
url: "user/followUp/userFollowUp",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title:'追评成功！',
|
||
icon:'success'
|
||
})
|
||
this.pingjiaShow = false
|
||
this.pjType = ''
|
||
this.productID = null,
|
||
this.userRecordid = null
|
||
this.Pform.comment = ''
|
||
this.Pform.html = ''
|
||
this.emoji = []
|
||
setTimeout(()=>{
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
},2000)
|
||
}
|
||
})
|
||
},
|
||
textareaBInput(e) {
|
||
console.log(e,'e')
|
||
this.Pform.comment = e.detail.value
|
||
/// this.Pform.html = e.detail.value
|
||
},
|
||
showEmj() {
|
||
let bool = !this.isShowEmj;
|
||
if(bool) {
|
||
this.emojiIcon = 'cuIcon-keyboard';
|
||
} else {
|
||
this.emojiIcon = 'cuIcon-emoji';
|
||
}
|
||
|
||
this.isShowEmj = bool;
|
||
this.$emit('show')
|
||
},
|
||
InputBlur(e){
|
||
|
||
},
|
||
InputFocus(e){
|
||
this.isShowEmj = false;
|
||
this.emojiIcon = 'cuIcon-emoji';
|
||
this.$emit('foc')
|
||
},
|
||
|
||
// end
|
||
deleteImg(e){
|
||
// var arr = this.Pform.img.slice(0,-1)
|
||
this.Pform.img.pop()
|
||
// console.log('删除文件',arr)
|
||
console.log(this.Pform)
|
||
},
|
||
getStar(i){
|
||
this.Pform.star = i
|
||
},
|
||
select(e){
|
||
console.log('选择文件：',e)
|
||
let arr = e.tempFiles.map(item => {
|
||
return {'url':item.url,'name':item.name}
|
||
})
|
||
this.Pform.img = this.Pform.img.concat(...arr)
|
||
//this.Pform.img = arr
|
||
console.log(this.Pform,'img')
|
||
},
|
||
upSuccess(e){
|
||
console.log(e)
|
||
},
|
||
// 获取html格式的评论1
|
||
getHtmlComment(){
|
||
// 格式化html
|
||
var ss = this.Pform.comment
|
||
if(this.emoji.length> 0){
|
||
for (var i = 0; i<this.emoji.length; i++){
|
||
if(this.Pform.comment.indexOf(this.emoji[i].name) !== -1 ){
|
||
//var re = new RegExp(this.emoji[0].name,"g"); //定义正则表达式
|
||
//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。
|
||
// ss = ss.replace(re, ); //第一个参数是正则表达式。
|
||
ss = ss.replace(this.emoji[i].name, this.emoji[i].tag)
|
||
// console.log(ss)
|
||
}
|
||
}
|
||
this.Pform.html = ss
|
||
}else{
|
||
this.Pform.html = this.Pform.comment
|
||
}
|
||
//console.log(this.Pform.html,'this.Pform.html')
|
||
},
|
||
deletePic() {
|
||
let that = this
|
||
that.Pform.img.splice(0, 1)
|
||
//console.log(that.Pform.img)
|
||
},
|
||
afterRead(e) {
|
||
//console.log(e)
|
||
let that = this
|
||
for (var i=0; i< e.file.length; i++) {
|
||
//console.log(i,e.file[i].url)
|
||
uni.uploadFile({
|
||
url: this.$baseUrl + 'oss/fileoss',
|
||
filePath: e.file[i].url,
|
||
//files:e.file,
|
||
name: 'file',
|
||
formData: {},
|
||
success: (res) => {
|
||
that.Pform.img.push({
|
||
url: JSON.parse(res.data).url
|
||
})
|
||
}
|
||
});
|
||
}
|
||
},
|
||
closePingjia(){
|
||
this.pingjiaShow = false
|
||
this.Pform.comment = ''
|
||
this.Pform.html = ''
|
||
this.emoji = []
|
||
},
|
||
// 提交评价
|
||
submitPJ(){
|
||
if(this.Pform.comment != ''){
|
||
|
||
let data={
|
||
'userid':this.userInfo.id,
|
||
'orderSn': this.orderSn,
|
||
'bookid': this.productID,
|
||
// 'content': this.Pform.html,
|
||
'content': this.Pform.comment,
|
||
'starLevel':this.Pform.star,
|
||
'images':this.Pform.img,
|
||
// 'emoji':this.emoji // 表情数组
|
||
}
|
||
// console.log(data,'data')
|
||
$http.request({
|
||
url: "buy/record/UserRecordcomment",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title:'评价成功！',
|
||
icon:'success'
|
||
})
|
||
|
||
this.pingjiaShow = false
|
||
this.Pform.comment = ''
|
||
this.Pform.html = ''
|
||
this.emoji = []
|
||
setTimeout(()=>{
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
},2000)
|
||
}
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title:'请先输入您的评价内容 ！',
|
||
icon:'none'
|
||
})
|
||
}
|
||
},
|
||
// 添加评价
|
||
pingji(id){
|
||
console.log(id)
|
||
this.pjType = ''
|
||
this.productID = id
|
||
this.pingjiaShow = true
|
||
},
|
||
// 联系客服
|
||
kefu(){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '微信号：yilujiankangkefu',
|
||
// success: function (res) {
|
||
// if (res.confirm) {
|
||
// uni.makePhoneCall({
|
||
// phoneNumber: '022-24142321' //仅为示例
|
||
// });
|
||
// } else if (res.cancel) {
|
||
|
||
// }
|
||
// }
|
||
})
|
||
},
|
||
// 查看物流
|
||
seeExpressDetail(item){
|
||
console.log(item, this.sheetList.length)
|
||
if(this.sheetList.length > 1){
|
||
this.sheetListShow = true
|
||
}else if(this.sheetList.length == 1){
|
||
// 直接展示详情
|
||
uni.navigateTo({
|
||
url: "./deliverDetail?orderSn=" + item.orderSn + "&expressOrderSn=" + this.sheetList[0].expressOrderSn
|
||
})
|
||
}
|
||
},
|
||
onPageJump(item) {
|
||
uni.navigateTo({
|
||
url: "./deliverDetail?objId=" + item
|
||
})
|
||
},
|
||
OverOrder() { // 确认收货
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认收货？',
|
||
success: res => {
|
||
let data = {
|
||
orderId: this.orderID,
|
||
orderStatus: '3'
|
||
}
|
||
if (res.confirm) {
|
||
uni.showLoading()
|
||
$http.request({
|
||
url: "book/buyOrder/update",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '收货成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
this.getOrderList()
|
||
}
|
||
})
|
||
} else if (res.cancel) {}
|
||
}
|
||
});
|
||
},
|
||
// 切换订单状态
|
||
orderTabCLi(e) {
|
||
this.orderListTab = e
|
||
},
|
||
// 获取订单详情
|
||
getOrderList() {
|
||
console.log('this.orderType',this.orderType)
|
||
this.$http
|
||
// .get(`book/buyOrder/getOrderInfo?orderId=${this.orderID}`)
|
||
.get(`/book/buyOrder/orderDetail?orderSn=${this.orderSn}`)
|
||
.then(res => {
|
||
console.log('订单详情',res)
|
||
// var seconds = res.result.timestamp + 30 * 60 + 2 // 过期时间
|
||
// var nowSeconds = Math.floor(new Date().getTime() / 1000);
|
||
// res.result.overTime = seconds - nowSeconds
|
||
|
||
this.orderContet = res.result
|
||
this.consigneeShow = true
|
||
//this.userRecordid = res.userRecordid
|
||
this.productIDs = res.result.goodsList.map(item => {
|
||
return item.buyOrderProductId
|
||
})
|
||
// console.log(this.orderContet,'this.orderContet')
|
||
if (this.orderContet.orderStatus == 0) {
|
||
this.titleStat = '待支付'
|
||
} else if (this.orderContet.orderStatus == 1) {
|
||
this.titleStat = '待发货'
|
||
} else if (this.orderContet.orderStatus == 2) {
|
||
this.titleStat = '待收货'
|
||
} else if (this.orderContet.orderStatus == 3) {
|
||
this.titleStat = '已完成'
|
||
}
|
||
if(this.orderContet.orderStatus >= 2 && this.orderContet.orderType == 'order'){
|
||
this.sheetList = this.orderContet.expressOrders
|
||
}else{
|
||
this.sheetList = []
|
||
}
|
||
console.log(this.orderContet,'订单详情')
|
||
})
|
||
},
|
||
|
||
// 取消订单
|
||
canceOrder() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要取消订单吗？',
|
||
confirmText: "取消订单",
|
||
cancelText: "考虑一下",
|
||
confirmColor: '#c96713',
|
||
cancelColor: '#555',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
this.$http
|
||
.post('book/buyOrder/appDelete?orderId=' + this.orderContet.orderId)
|
||
.then(res => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '取消订单成功'
|
||
})
|
||
uni.switchTab({
|
||
url: './orderList'
|
||
});
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
// 支付
|
||
goPay(payItem) {
|
||
console.log(payItem,'订单数据')
|
||
if(payItem.paymentMethod == 2){
|
||
console.log('阿里支付')
|
||
setPay({
|
||
typePay: 'alipay',
|
||
subject: 'order',
|
||
totalAmount: payItem.realMoney,
|
||
type: 2,
|
||
relevanceoid: payItem.orderSn,
|
||
customerId: this.userInfo.id,
|
||
}, res => {
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: "支付成功"
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "支付失败",
|
||
icon: "none",
|
||
image: '../../static/icon/ic_close.png'
|
||
});
|
||
}
|
||
this.getOrderList()
|
||
})
|
||
} else if(payItem.paymentMethod == 1){
|
||
console.log('微信支付')
|
||
// console.log(this.isAndorid)
|
||
if(this.isAndorid == false){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '很抱歉，苹果系统暂不支持微信支付',
|
||
showCancel:false
|
||
})
|
||
return false
|
||
}else{
|
||
let data1={
|
||
orderSn:payItem.orderSn,
|
||
buyOrderId: null,
|
||
totalAmount: payItem.realMoney
|
||
}
|
||
console.log(data1,'data1')
|
||
setWXPay(data1,res => {
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: "支付成功"
|
||
});
|
||
} else {
|
||
console.log(res)
|
||
if(res.data.errMsg.indexOf('User canceled') != -1){
|
||
uni.showToast({
|
||
title: "用户取消支付",
|
||
icon: "none",
|
||
image: '../../static/icon/ic_close.png'
|
||
});
|
||
}else{
|
||
uni.showToast({
|
||
title: "支付失败",
|
||
icon: "none",
|
||
image: '../../static/icon/ic_close.png'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}else if(payItem.paymentMethod == 3){
|
||
// 苹果充值
|
||
console.log('苹果二次支付')
|
||
if(this.isAndorid){
|
||
uni.showModal({
|
||
title:'提示',
|
||
showCancel:false,
|
||
content:'很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单'
|
||
})
|
||
}else{
|
||
this.iphonepay(payItem)
|
||
}
|
||
}
|
||
},
|
||
|
||
// 商品内容跳转
|
||
goDetail(id) {
|
||
uni.navigateTo({
|
||
url: './commodityDetail?id=' + id
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.expresslist{font-size: 28rpx; color: #666;
|
||
.title{text-align: center;}
|
||
.item{padding: 30rpx; border-bottom: 1px solid #eee;}
|
||
}
|
||
.orderState { color: #fff;
|
||
|
||
position: absolute; left: 0; top: 20rpx;
|
||
padding:10rpx; border-radius: 0 24rpx 24rpx 0;
|
||
font-size: 26rpx;
|
||
// font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
.orderState0{background-color: #e6a23c;}
|
||
.orderState1{background-color: #409eff;}
|
||
.orderState2{background-color: #f56c6c;}
|
||
.orderState3{background-color: #67c23a;}
|
||
.orderState5{background-color: #787878;}
|
||
.guoqi{ font-size: 28rpx; align-items: center; color: red; float: right; line-height: 40rpx;}
|
||
.star{display: inline-block; width: 20px; height: 20px; margin-right: 10rpx;}
|
||
.starGray{ background : url(../../static/icon/star_greey.png) no-repeat; background-size: contain; }
|
||
.starLight{ background : url(../../static/icon/star_light.png) no-repeat; background-size: contain;}
|
||
.cuIcon-emoji {
|
||
background : url(../../static/biaoqing.png) no-repeat; background-size: contain; display: block; margin-right: 20rpx;
|
||
width: 30px; }
|
||
.cuIcon-keyboard{background : url(../../static/biaoqing.png) no-repeat; background-size: contain; display: block;
|
||
width: 30px; }
|
||
.mb30{margin-bottom: 30rpx; overflow: hidden;}
|
||
.tanchu {
|
||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||
position: relative;
|
||
|
||
|
||
.dp_title {
|
||
font-size: 32rpx;
|
||
margin-bottom: 50rpx;
|
||
color: #555;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dp_add {
|
||
position: absolute;
|
||
top: 40rpx;
|
||
right: 30rpx;
|
||
font-size: 22rpx;
|
||
background-color: #fd6004;
|
||
color: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 5rpx 10rpx;
|
||
|
||
.u-icon {
|
||
display: inline-block;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
|
||
.addressItem {
|
||
border: 2px dashed #d9d9d9;
|
||
border-radius: 10rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 20rpx 10rpx;
|
||
margin: 25rpx 0 0 0;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
|
||
.addrContent {
|
||
margin-left: 40rpx;
|
||
flex: 1;
|
||
|
||
.addrContentTop {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin: 0 0 15rpx 0;
|
||
position: relative;
|
||
|
||
.userName {
|
||
font-size: 35rpx;
|
||
font-weight: bold;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.userTel {
|
||
font-size: 25rpx;
|
||
color: #888;
|
||
}
|
||
|
||
.userMoren {
|
||
border: 1px solid #fd6004;
|
||
color: #fd6004;
|
||
padding: 3rpx 10rpx;
|
||
font-size: 22rpx;
|
||
border-radius: 10rpx;
|
||
margin: 0 0 0 20rpx;
|
||
}
|
||
|
||
|
||
.chooseCheck {
|
||
position: absolute;
|
||
top: 3rpx;
|
||
right: 6rpx;
|
||
}
|
||
}
|
||
|
||
.addrContentBottom {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.addressItem.addItem_style {
|
||
border-color: #fd6004;
|
||
}
|
||
|
||
.youhuiItem {
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 10rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 20rpx 10rpx;
|
||
margin: 25rpx 0 0 0;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.youhuiItem>view {
|
||
float: left;
|
||
}
|
||
|
||
.youhuiItem.youItem_style {
|
||
border-color: #fd6004;
|
||
}
|
||
}
|
||
.opShou {
|
||
border-color: $uni-color-success !important;
|
||
}
|
||
|
||
.adDefault {
|
||
padding: 30rpx 50rpx 30rpx 100rpx;
|
||
background-color: #fff;
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 2px dashed #b2e9d7;
|
||
margin: 0 0 5rpx 0;
|
||
position: relative;
|
||
|
||
.defalTop {
|
||
.userName {
|
||
font-size: 35rpx;
|
||
font-weight: bold;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.userTel {
|
||
font-size: 25rpx;
|
||
color: #888;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.defalBottom {
|
||
.userAddress {
|
||
font-size: 32rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.defalLeft {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 55rpx;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.orderList {
|
||
padding: 20rpx;
|
||
|
||
.orderItem {
|
||
padding: 30rpx 10rpx 30rpx 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.orderContent {
|
||
margin-bottom: 20rpx;
|
||
|
||
image {
|
||
width: 150rpx;
|
||
height: 180rpx;
|
||
margin-right: 20rpx;
|
||
float: left;
|
||
}
|
||
|
||
.itemJian {
|
||
float: left;
|
||
width: 470rpx;
|
||
|
||
.orderTitle {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
margin: 0 0 20rpx 0;
|
||
float: left;
|
||
width: 410rpx;
|
||
}
|
||
|
||
.orderPrice {
|
||
font-size: 28rpx;
|
||
float: right;
|
||
width: 60rpx;
|
||
text-align: right;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.orderallpri {
|
||
text-align: right;
|
||
border-top: 1px solid #eee;
|
||
margin: 40rpx 20rpx 0 0;
|
||
padding: 30rpx 0 0 0;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.orderReal {
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
margin: 5rpx 20rpx 0 0;
|
||
padding: 28rpx 0 0 0;
|
||
}
|
||
|
||
.orderYunf {
|
||
text-align: right;
|
||
border-top: 1px solid #eee;
|
||
margin: 35rpx 20rpx 0 0;
|
||
padding: 30rpx 0 0 0;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.orderOper {
|
||
text-align: right;
|
||
margin: 40rpx 20rpx 0 0;
|
||
|
||
view {
|
||
margin-left: 20rpx;
|
||
padding: 10rpx 0;
|
||
display: inline-block;
|
||
width: 160rpx;
|
||
font-size: 25rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.opFix {
|
||
color: #555;
|
||
border: 1px solid #ddd;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.opCan {
|
||
color: #c96713;
|
||
border: 1px solid #eba00b;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.copyCode{display: inline-block; margin-left: 20rpx; }
|
||
.deliverCntent {
|
||
padding: 32rpx;
|
||
position: relative;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
border-top: 1px solid #eee;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
|
||
.img_icon {
|
||
padding-right: 5px;
|
||
}
|
||
|
||
.moreBtnF {
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
height: 100%;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
background-color: rgba(255, 255, 255, .9);
|
||
// background: -webkit-linear-gradient(left, rgba(255,255,255,1)0%,rgba(255,255,255,0.5)66%, rgba(255,255,255,255)99%);/* Safari、Chrome */
|
||
|
||
// background:linear-gradient(rgba(255,255,255,255),rgba(255,255,255,1));/* 默认渐变位置从上往下 */
|
||
}
|
||
|
||
.wuliu {
|
||
.time {
|
||
color: #888;
|
||
}
|
||
|
||
.moreBtn {
|
||
display: inline-block;
|
||
width: 50px;
|
||
}
|
||
}
|
||
</style>
|