shuxiaoquan
10 months ago
parent
5ece2d6aad
commit
6e14a9c647
@ -0,0 +1,532 @@ |
||||
<template> |
||||
<view class="order"> |
||||
<view class="order-navbar"> |
||||
<u-navbar title="订单详情" :border-bottom="false" :background="isScroll?background:background1"></u-navbar> |
||||
</view> |
||||
<view class="order-hd"> |
||||
<view class="l"> |
||||
<view class="a"> |
||||
<view class="name"> |
||||
<image class="user" src="@/static/news/icon-recycling-order-01.png"></image>{{info.username}} |
||||
<text>{{info.mobile}}</text> |
||||
</view> |
||||
<image class="copy" @click="openPage(1,info.mobile)" src="@/static/news/icon-recycling-order-02.png"></image> |
||||
</view> |
||||
<view class="b"> |
||||
<image class="pic" :src="info.server_image"></image> |
||||
<view class="info"> |
||||
<view class="name">{{info.server_name}}</view> |
||||
<view class="price">￥<text>{{info.pay_price}}</text></view> |
||||
</view> |
||||
<view class="num">x1</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="order-bd"> |
||||
<view class="b"> |
||||
<view class="item"> |
||||
<view class="l">订单状态：</view> |
||||
<view class="r">{{info.order_status_text}}</view> |
||||
</view> |
||||
<view class="item"> |
||||
<view class="l">服务时间：</view> |
||||
<view class="r">{{info.server_time}}</view> |
||||
</view> |
||||
<view class="item"> |
||||
<view class="l">服务地址：</view> |
||||
<view class="r">{{info.server_address}}</view> |
||||
</view> |
||||
<view class="item" v-if="info.dealer_name"> |
||||
<view class="l">工程师姓名：</view> |
||||
<view class="r">{{info.dealer_name}}</view> |
||||
</view> |
||||
<view class="item" v-if="info.dealer_remake"> |
||||
<view class="l">工程师电话：</view> |
||||
<view class="r">{{info.dealer_remake}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="order-bd"> |
||||
<view class="b"> |
||||
<view class="item"> |
||||
<view class="l">订单编号：</view> |
||||
<view class="r">{{info.order_no}}</view> |
||||
<view class="m red" @click="openPage(1,info.order_no)">复制</view> |
||||
</view> |
||||
<view class="item"> |
||||
<view class="l">订单价格：</view> |
||||
<view class="r">￥{{info.pay_price}}元</view> |
||||
</view> |
||||
<view class="item" v-if="info.is_pay == false"> |
||||
<view class="l">支付方式：</view> |
||||
<view class="r">{{info.pay_method=='balance'?'余额支付':'微信支付'}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="order-bd"> |
||||
<view class="b" style="margin-top: 0;"> |
||||
<view class="item"> |
||||
<view class="l">留言：</view> |
||||
<view class="r">{{info.buyer_remark}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="order-fd"> |
||||
<view class="a" v-if="userInfo.user_type <= 20"> |
||||
联系商家 |
||||
<button open-type="contact"></button> |
||||
</view> |
||||
<view class="a" v-else @click="openPage(2,info.mobile)"> |
||||
联系顾客 |
||||
</view> |
||||
<view class="b b-on" v-if="info.is_cancel && (info.order_status == 10 || info.order_status == 20 )" @click="openPage(3)"> |
||||
取消订单 |
||||
</view> |
||||
<view class="b" v-if="info.is_dispatch && info.order_status == 20" @click="openPage(4)"> |
||||
去派单 |
||||
</view> |
||||
<view class="b" v-if="info.is_pay && info.order_status == 10" @click="openPage(5)"> |
||||
去支付 |
||||
</view> |
||||
<view class="b" v-if="info.is_success && info.order_status == 30" @click="openPage(6)"> |
||||
立即完成 |
||||
</view> |
||||
<view class="b b-on" v-if="info.order_status == 40"> |
||||
已完成 |
||||
</view> |
||||
<view class="b b-on" v-if="info.order_status == 50"> |
||||
已取消 |
||||
</view> |
||||
</view> |
||||
<u-mask :show="isShow" @click="show = false"> |
||||
<view class="order-dialog"> |
||||
<image class="pic" src="@/static/news/icon-recycling-order-04.png"></image> |
||||
<view class="a">回收订单提交成功</view> |
||||
<view class="b">感谢您对低碳环保做出的努力！</view> |
||||
<view class="c">查看订单</view> |
||||
</view> |
||||
</u-mask> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import img from "@/static/news/refund-bg.png" |
||||
import img1 from "@/static/news/login-bg.png" |
||||
import * as newFunApi from '@/api/newFun' |
||||
export default { |
||||
data() { |
||||
return { |
||||
userInfo: {}, |
||||
isScroll: true, |
||||
isShow: false, |
||||
currentIndex: 0, |
||||
background: { |
||||
background: 'url('+ img+') center -10px no-repeat', |
||||
backgroundSize: '100%', |
||||
}, |
||||
background1: { |
||||
background: 'url('+ img1+') center -10px no-repeat', |
||||
backgroundSize: '100%', |
||||
}, |
||||
info: {}, |
||||
order_id: "", |
||||
type: "" |
||||
} |
||||
}, |
||||
onLoad(o) { |
||||
if(o.order_id && o.type == 'fuwuorder'){ |
||||
this.type = o.type |
||||
this.order_id = o.order_id; |
||||
|
||||
} |
||||
}, |
||||
onShow() { |
||||
this.getInfo() |
||||
this.userInfo = uni.getStorageSync("userInfo") |
||||
}, |
||||
onPageScroll(e){ |
||||
if(e.scrollTop <= 44){ |
||||
this.isScroll = true; |
||||
}else{ |
||||
this.isScroll = false; |
||||
} |
||||
}, |
||||
methods: { |
||||
openPage(index,msg){ |
||||
const that = this; |
||||
if(index == 1){ |
||||
uni.setClipboardData({ |
||||
data: msg, |
||||
success: function () { |
||||
uni.getClipboardData({ |
||||
success: function (res) { |
||||
uni.showToast({ |
||||
icon: "none", |
||||
title: "复制成功" |
||||
}) |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
}else if(index == 2){ |
||||
uni.makePhoneCall({ |
||||
phoneNumber: msg |
||||
}); |
||||
}else if(index == 3){ |
||||
uni.showModal({ |
||||
title: "温馨提示", |
||||
content: "是否取消该订单？", |
||||
confirmColor: "#F21A1C" , |
||||
complete(res) { |
||||
if(res.confirm){ |
||||
that.toDel(); |
||||
} |
||||
} |
||||
}) |
||||
}else if(index == 4){ |
||||
uni.navigateTo({ |
||||
url: "/pages/news3/dispatch?type=fuwuorder&order_id="+this.order_id |
||||
}) |
||||
}else if(index == 5){ |
||||
uni.navigateTo({ |
||||
url: "/pages/news/recycling/pay?type=fuwuorder&order_id="+this.order_id |
||||
}) |
||||
}else if(index == 6){ |
||||
uni.showModal({ |
||||
title: "温馨提示", |
||||
content: "是否完成该订单？", |
||||
confirmColor: "#F21A1C" , |
||||
complete(res) { |
||||
if(res.confirm){ |
||||
that.toConfirmSuccess(); |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
//完成订单 |
||||
async toConfirmSuccess() { |
||||
const {status, message, data} = await serverConfirmSuccess({ |
||||
order_id: this.order_id |
||||
}) |
||||
if(status == 200){ |
||||
uni.showToast({ |
||||
title: "提交成功" |
||||
}) |
||||
this.getInfo(); |
||||
} |
||||
}, |
||||
//删除订单 |
||||
async toDel() { |
||||
const {status, message, data} = await newFunApi.serverCancelOrder({ |
||||
order_id: this.order_id |
||||
}); |
||||
if(status == 200){ |
||||
uni.showToast({ |
||||
title: "取消成功" |
||||
}) |
||||
this.getInfo(); |
||||
} |
||||
}, |
||||
/** |
||||
* 获取详情 |
||||
*/ |
||||
async getInfo() { |
||||
const {status, message, data} = await newFunApi.serverOrderDetails({ |
||||
order_id: this.order_id |
||||
}); |
||||
if(status == 200){ |
||||
this.info = data.info |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.order{ |
||||
width: 100%; |
||||
padding: 0 0 150rpx; |
||||
box-sizing: border-box; |
||||
overflow: hidden; |
||||
&-hd{ |
||||
background: linear-gradient(180deg, #FCE2E7 0%, #FFFFFF 100%); |
||||
overflow: hidden; |
||||
.l{ |
||||
width: 694rpx; |
||||
height: 276rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx; |
||||
padding: 30rpx; |
||||
box-sizing: border-box; |
||||
margin: 0 auto; |
||||
margin-top: 30rpx; |
||||
.a{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.name{ |
||||
display: flex; |
||||
align-items: center; |
||||
image{ |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
text{ |
||||
margin-left: 10rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #838383; |
||||
} |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
} |
||||
.copy{ |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
} |
||||
} |
||||
.b{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top: 20rpx; |
||||
.pic{ |
||||
width: 182rpx; |
||||
height: 146rpx; |
||||
border-radius: 10rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
.info{ |
||||
overflow: hidden; |
||||
.name{ |
||||
width: 360rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
white-space: nowrap; |
||||
} |
||||
.price{ |
||||
font-size: 24rpx; |
||||
font-weight: 600; |
||||
color: #F21A1C; |
||||
text{ |
||||
font-size: 36rpx; |
||||
} |
||||
margin-top: 20rpx; |
||||
} |
||||
} |
||||
.num{ |
||||
flex: 1; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #1E1E1E; |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&-bd{ |
||||
width: 694rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx; |
||||
margin: 0 auto; |
||||
margin-top: 20rpx; |
||||
padding: 20rpx 30rpx; |
||||
box-sizing: border-box; |
||||
.a{ |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #7E7E7E; |
||||
text{ |
||||
color: #1E1E1E; |
||||
margin-left: 10rpx; |
||||
} |
||||
image{ |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
.b{ |
||||
margin-top: 20rpx; |
||||
.item{ |
||||
display: flex; |
||||
align-items: flex-start; |
||||
padding: 10rpx 0; |
||||
.l{ |
||||
width: 140rpx; |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #7E7E7E; |
||||
} |
||||
.r{ |
||||
flex: 1; |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #1E1E1E; |
||||
max-width: 380rpx; |
||||
input{ |
||||
font-size: 24rpx; |
||||
color: #1E1E1E; |
||||
} |
||||
} |
||||
.m{ |
||||
width: 120rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-end; |
||||
color: #F63016; |
||||
font-size: 24rpx; |
||||
.btn{ |
||||
width: 118rpx; |
||||
height: 48rpx; |
||||
border-radius: 8rpx; |
||||
border: 1px solid #F83A13; |
||||
text-align: center; |
||||
line-height: 48rpx; |
||||
} |
||||
.li{ |
||||
flex: 1; |
||||
font-size: 20rpx; |
||||
font-weight: 400; |
||||
color: #989898; |
||||
text-align: center; |
||||
image{ |
||||
width: 30rpx; |
||||
height: 30rpx; |
||||
display: block; |
||||
margin: 0 auto; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.items{ |
||||
padding: 10rpx 0; |
||||
.l{ |
||||
width: 140rpx; |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #7E7E7E; |
||||
} |
||||
.r{ |
||||
width: 100%; |
||||
overflow: hidden; |
||||
margin-top: 20rpx; |
||||
.pic{ |
||||
width: 110%; |
||||
image{ |
||||
width: 150rpx; |
||||
height: 150rpx; |
||||
border-radius: 10rpx; |
||||
margin-right: 10rpx; |
||||
margin-top: 20rpx; |
||||
float: left; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&-fd{ |
||||
width: 100%; |
||||
background: #FFFFFF; |
||||
box-shadow: 18rpx -4rpx 23rpx 0px rgba(0,0,0,0.03); |
||||
box-sizing: border-box; |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
z-index: 200; |
||||
padding: 20rpx 40rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.a{ |
||||
text-align: center; |
||||
width: 146rpx; |
||||
line-height: 68rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 76rpx; |
||||
opacity: 1; |
||||
border: 1px solid #D9D9D9; |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #828282; |
||||
margin-right: 24rpx; |
||||
position: relative; |
||||
button{ |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 2; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.b{ |
||||
width: 228rpx; |
||||
line-height: 78rpx; |
||||
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%); |
||||
border-radius: 78px; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
&-on{ |
||||
background: #ccc; |
||||
} |
||||
} |
||||
} |
||||
&-dialog{ |
||||
width: 537rpx; |
||||
height: 414rpx; |
||||
background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%); |
||||
border-radius: 12rpx; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
margin-left: -268rpx; |
||||
margin-top: -207rpx; |
||||
z-index: 2; |
||||
text-align: center; |
||||
padding-top: 100rpx; |
||||
box-sizing: border-box; |
||||
.pic{ |
||||
width: 112rpx; |
||||
height: 128rpx; |
||||
position: absolute; |
||||
left: 50%; |
||||
margin-left: -56rpx; |
||||
top: -60rpx; |
||||
z-index: 2; |
||||
} |
||||
.a{ |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #000000; |
||||
} |
||||
.b{ |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #727272; |
||||
margin-top: 30rpx; |
||||
} |
||||
.c{ |
||||
width: 412rpx; |
||||
line-height: 72rpx; |
||||
background: #F55349; |
||||
border-radius: 8rpx; |
||||
font-size: 28rpx; |
||||
color: #FFFFFF; |
||||
margin: 0 auto; |
||||
margin-top: 60rpx; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,665 @@ |
||||
<template> |
||||
<view> |
||||
<view class="head-info"> |
||||
<!-- 搜索 --> |
||||
<view class="searchContent"> |
||||
<u-input v-model="order_no" placeholder="输入订单编号"/> |
||||
<u-icon name="search" @click="getOrderList(1)" class="search"></u-icon> |
||||
</view> |
||||
</view> |
||||
<!-- 分类列表 --> |
||||
<view class="container"> |
||||
<view class="classify-list"> |
||||
<view class="list" :class="{'action':classifyShow == -1}" @click="onClassify(-1)"> |
||||
<text>全部</text> |
||||
<text class="line" v-show="classifyShow == -1"></text> |
||||
</view> |
||||
<view class="list" v-for="(item,index) in classList" :class="{'action':classifyShow==index}" @click="onClassify(index)" :key="index"> |
||||
<text>{{item.name}}</text> |
||||
<text class="line" v-show="classifyShow==index"></text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="shopContent"> |
||||
<view class="shopItem" v-for="(item,index) in goodsList" :key="index" @click="openPage(6,item.order_id)"> |
||||
<view class="orderInfo"> |
||||
<text>订单号：{{item.order_no}}</text> |
||||
<text class="statusText" style="color: #FF6813;">{{item.order_status_text}}</text> |
||||
</view> |
||||
<view class="shopItemInfo"> |
||||
<image :src="item.server_image"></image> |
||||
<view class="priceCon"> |
||||
<view class="a">{{item.server_name}}</view> |
||||
<view class="b"> |
||||
<text class="num">x1</text> |
||||
<view class="priceText"> |
||||
<text style="font-size: 26upx;">¥</text> |
||||
<text>{{item.pay_price}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="totalNum"> |
||||
<!-- <text>含运费¥{{item.yunfei}}</text> --> |
||||
<text>共计：</text> |
||||
<text>¥{{item.pay_price}}</text> |
||||
</view> |
||||
<view class="remark"> |
||||
<view class="remarkTitle"> |
||||
收件人姓名 {{item.username}} |
||||
</view> |
||||
<view class="remarkContent" v-if="item.buyer_remark"> |
||||
{{item.buyer_remark}} |
||||
</view> |
||||
</view> |
||||
<view class="btnGroup"> |
||||
<view class="btn info" v-if="item.is_cancel && (item.order_status == 10 || item.order_status == 20)" @click.stop="openPage(1,index,item)" >取消订单</view> |
||||
<view class="btn primary" v-if="item.is_pay && item.order_status == 10" @click.stop="openPage(2,index,item)">去支付</view> |
||||
<view class="btn primary" v-if="item.is_dispatch && item.order_status == 20" @click.stop="openPage(3,index,item)">去派单</view> |
||||
<view class="btn primary" v-if="item.is_success && item.order_status == 30" @click.stop="openPage(4,index,item)">立即完成</view> |
||||
<view class="btn info" v-if="item.order_status==40">已完成</view> |
||||
<view class="btn info" v-if="item.order_status==50">已取消</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<u-empty text="暂无信息" v-if="total == 0" mode="list" style="margin-top: 160rpx;"></u-empty> |
||||
<u-popup v-model="show" mode="bottom" border-radius="10" :closeable="true"> |
||||
<view class="filterContent"> |
||||
<view class="filterTitle"> |
||||
订单筛选 |
||||
</view> |
||||
<view class="filterItem"> |
||||
<view class="filterItemContent"> |
||||
<view class="itemTitle"> |
||||
下单时间 |
||||
</view> |
||||
<view class="timeContainer"> |
||||
<u-input v-model="startTime" type="select" @click="getTime('start')" disabled placeholder="起始时间"/> |
||||
<text>-</text> |
||||
<u-input v-model="endTime" type="select" @click="getTime('end')" disabled placeholder="终止时间"/> |
||||
</view> |
||||
</view> |
||||
<view class="filterItemContent"> |
||||
<view class="itemTitle"> |
||||
来源 |
||||
</view> |
||||
<view class="selectContainer"> |
||||
<view @click="setResourceIndex(index)" :class="sourceIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in selectList" :key="item.id"> |
||||
{{item.name}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="filterItemContent"> |
||||
<view class="itemTitle"> |
||||
支付方式 |
||||
</view> |
||||
<view class="selectContainer"> |
||||
<view @click="setpayIndex(index)" :class="payIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in payList" :key="item.id"> |
||||
{{item.name}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="btnGroup"> |
||||
<view class="resetBtn"> |
||||
重置 |
||||
</view> |
||||
<view class="confrim"> |
||||
确定 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<u-picker mode="time" z-index="99999" v-model="timeShow"></u-picker> |
||||
</u-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as newFunApi from '@/api/newFun' |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
searchText:'', |
||||
classifyShow: -1, |
||||
classList: [], |
||||
goodsList:[], |
||||
show:false, |
||||
timeShow:false, |
||||
selectList:[ |
||||
{id:1,name:'预售'}, |
||||
{id:2,name:'秒杀'}, |
||||
{id:3,name:'拼团'}, |
||||
{id:4,name:'砍价'}, |
||||
], |
||||
payList:[ |
||||
{id:1,name:'微信支付'}, |
||||
{id:2,name:'好友代付'}, |
||||
{id:3,name:'线下支付'}, |
||||
], |
||||
sourceIndex:0, |
||||
payIndex:0, |
||||
startTime:null, |
||||
endTime:null, |
||||
total: 1, |
||||
order_no: "", |
||||
pageNum: 1, |
||||
} |
||||
}, |
||||
onLoad(o) { |
||||
if(o.type){ |
||||
console.log(o.type) |
||||
this.classifyShow = o.type-1 |
||||
} |
||||
}, |
||||
onShow() { |
||||
this.getList(1); |
||||
}, |
||||
onPullDownRefresh() { |
||||
this.pageNum = 1; |
||||
this.goodsList = []; |
||||
this.getList(); |
||||
setTimeout(()=>{ |
||||
uni.stopPullDownRefresh(); |
||||
},1000) |
||||
}, |
||||
onReachBottom(){ |
||||
if(this.goodsList.length <= this.total){ |
||||
this.pageNum ++; |
||||
this.getList(); |
||||
} |
||||
}, |
||||
methods:{ |
||||
openPage(i,index,a){ |
||||
const that = this; |
||||
if(i == 1){ |
||||
uni.showModal({ |
||||
title: "温馨提示", |
||||
content: "是否取消该订单？", |
||||
confirmColor: "#F21A1C" , |
||||
complete(res) { |
||||
if(res.confirm){ |
||||
that.toDel(index,a.order_id); |
||||
} |
||||
} |
||||
}) |
||||
}else if(i == 2){ |
||||
uni.navigateTo({ |
||||
url: "/pages/news/recycling/pay?type=fuwuorder&order_id="+a.order_id |
||||
}) |
||||
}else if(i == 3){ |
||||
uni.navigateTo({ |
||||
url: "/pages/news3/dispatch?type=fuwuorder&order_id="+a.order_id |
||||
}) |
||||
}else if(i == 6){ |
||||
uni.navigateTo({ |
||||
url: "/pages/news/recycling/orderDetail?type=fuwuorder&order_id="+index |
||||
}) |
||||
}else if(i == 4){ |
||||
uni.showModal({ |
||||
title: "温馨提示", |
||||
content: "是否提交该订单？", |
||||
confirmColor: "#F21A1C" , |
||||
complete(res) { |
||||
if(res.confirm){ |
||||
that.toConfirmSuccess(a.order_id); |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
//完成订单 |
||||
async toConfirmSuccess(order_id) { |
||||
const {status, message, data} = await serverConfirmSuccess({ |
||||
order_id |
||||
}) |
||||
if(status == 200){ |
||||
uni.showToast({ |
||||
title: "提交成功" |
||||
}) |
||||
this.getInfo(); |
||||
} |
||||
}, |
||||
//删除订单 |
||||
async toDel(index,order_id) { |
||||
const {status, message, data} = await newFunApi.serverCancelOrder({ |
||||
order_id |
||||
}); |
||||
if(status == 200){ |
||||
uni.showToast({ |
||||
title: "取消成功" |
||||
}) |
||||
this.goodsList.splice(index,1); |
||||
} |
||||
}, |
||||
/** |
||||
* 获取列表 |
||||
*/ |
||||
async getList() { |
||||
let {status, message, data} = await newFunApi.serverOrderInfoStatus({}); |
||||
if(status == 200){ |
||||
this.classList = data.list |
||||
this.getOrderList(); |
||||
} |
||||
}, |
||||
/** |
||||
* 获取商品列表 |
||||
*/ |
||||
async getOrderList(type) { |
||||
uni.showLoading({ |
||||
title:"加载中" |
||||
}) |
||||
if(type == 1){ |
||||
this.pageNum = 1; |
||||
this.goodsList = [] |
||||
} |
||||
let {status, message, data} = await newFunApi.serverOrderList({ |
||||
order_no: this.order_no, |
||||
page: this.pageNum, |
||||
order_status: this.classList.length > 0?(this.classifyShow>=0?this.classList[this.classifyShow].value:''):"" |
||||
}); |
||||
if(status == 200){ |
||||
uni.hideLoading(); |
||||
this.goodsList = this.goodsList.concat(data.list) |
||||
this.total = data.total |
||||
} |
||||
}, |
||||
getLable(val){ |
||||
let arr = this.classList.filter(item=>{ |
||||
return val==item.id |
||||
}) |
||||
return arr[0].name |
||||
}, |
||||
onSearch(){ |
||||
uni.navigateTo({url:''}) |
||||
}, |
||||
onClassify(index){ |
||||
this.classifyShow = index; |
||||
this.pageNum = 1; |
||||
this.goodsList = [] |
||||
this.getOrderList(); |
||||
}, |
||||
setResourceIndex(index){ |
||||
this.sourceIndex = index; |
||||
}, |
||||
setpayIndex(index){ |
||||
this.payIndex = index; |
||||
}, |
||||
getTime(val){ |
||||
console.log("ooo") |
||||
this.timeShow = true; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
page{ |
||||
background-color: #F7F8FA; |
||||
min-height:100%; |
||||
} |
||||
.nolist { |
||||
width: 100%; |
||||
display: block; |
||||
margin: 0 auto; |
||||
text-align: center; |
||||
padding: 150rpx 50rpx; |
||||
|
||||
image { |
||||
width: 388rpx; |
||||
height: 378rpx; |
||||
} |
||||
|
||||
.txt { |
||||
font-size: 32rpx; |
||||
margin-top: 20rpx; |
||||
font-weight: 500; |
||||
color: #fff; |
||||
} |
||||
} |
||||
.head-info{ |
||||
|
||||
padding:22upx 20upx; |
||||
.searchContent{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
position: relative; |
||||
padding: 0 30rpx; |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
background-color: #fff; |
||||
border-radius: 80rpx; |
||||
::v-deep .uni-input-placeholder{ |
||||
margin-left:90upx; |
||||
z-index:10; |
||||
} |
||||
input{ |
||||
margin-left: 60rpx; |
||||
flex: 1; |
||||
} |
||||
.search{ |
||||
position: absolute; |
||||
top:20upx; |
||||
left:26upx; |
||||
z-index:9; |
||||
} |
||||
::v-deep .u-input{ |
||||
flex:1; |
||||
width: 500rpx; |
||||
margin-left: 40upx; |
||||
} |
||||
::v-deep .uni-input-input{ |
||||
|
||||
background: #FFFFFF; |
||||
border-radius: 30px 30px 30px 30px; |
||||
opacity: 1; |
||||
padding-left:80upx; |
||||
width:calc(100% - 80upx); |
||||
|
||||
} |
||||
.filter{ |
||||
display: flex; |
||||
width: 100upx; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
image{ |
||||
width:34upx; |
||||
height:auto; |
||||
} |
||||
text{ |
||||
font-size: 24upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #616161; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
.container{ |
||||
background-color: #fff; |
||||
} |
||||
.classify-list{ |
||||
white-space:nowrap; |
||||
width: 100%; |
||||
height: 100rpx; |
||||
overflow-x: auto; |
||||
overflow-y: hidden; |
||||
.list{ |
||||
position: relative; |
||||
display:inline-block; |
||||
width: 18%; |
||||
height: 100%; |
||||
line-height: 100rpx; |
||||
text-align: center; |
||||
text{ |
||||
font-size: 28rpx; |
||||
color: #3B3B3B; |
||||
|
||||
} |
||||
.line{ |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 10rpx; |
||||
// width: 60%; |
||||
// height: 8rpx; |
||||
background: linear-gradient(to right,#f8f893,#fe9d00); |
||||
// border-radius: 10rpx; |
||||
transform: translate(-50%,0); |
||||
|
||||
width: 60upx; |
||||
height: 8upx; |
||||
background: #FF6257; |
||||
border-radius: 29px 29px 29px 29px; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.action{ |
||||
text{ |
||||
font-size: 32rpx; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
.shopContent{ |
||||
|
||||
|
||||
.shopItem{ |
||||
margin-bottom:14upx; |
||||
padding:36upx; |
||||
background-color: #fff; |
||||
.orderInfo{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content:space-between; |
||||
text{ |
||||
font-size: 28upx; |
||||
color: #707070; |
||||
|
||||
} |
||||
} |
||||
.shopItemInfo{ |
||||
display: flex; |
||||
margin-top:40upx; |
||||
image{ |
||||
width:180upx; |
||||
height:180upx; |
||||
flex-shrink: 0; |
||||
} |
||||
.priceCon{ |
||||
flex:1; |
||||
overflow: hidden; |
||||
.a{ |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
height: 50rpx; |
||||
color: #3B3B3B; |
||||
overflow: hidden; |
||||
margin-left:40upx; |
||||
} |
||||
.b{ |
||||
display: flex; |
||||
align-items: flex-end; |
||||
justify-content: space-between; |
||||
margin-left:40upx; |
||||
margin-top: 80rpx; |
||||
} |
||||
.num{ |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #1E1E1E; |
||||
|
||||
} |
||||
.priceText{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #F21A1C; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
.totalNum{ |
||||
text-align: right; |
||||
margin-top:70upx; |
||||
text:first-child{ |
||||
font-size: 24upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #B7B7B7; |
||||
|
||||
} |
||||
text:nth-child(2){ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #3B3B3B; |
||||
margin:0 10upx; |
||||
|
||||
} |
||||
text:nth-child(3){ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #F21A1C; |
||||
|
||||
} |
||||
} |
||||
.remark{ |
||||
background: #F8F8F8; |
||||
border-radius: 0px 0px 0px 0px; |
||||
opacity: 1; |
||||
padding:20upx; |
||||
margin-top:20upx; |
||||
.remarkTitle{ |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #3B3B3B; |
||||
|
||||
} |
||||
.remarkContent{ |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #939393; |
||||
margin-top:8upx; |
||||
} |
||||
} |
||||
.btnGroup{ |
||||
display: flex; |
||||
margin-top:28upx; |
||||
flex-wrap: wrap; |
||||
justify-content: flex-end; |
||||
.btn{ |
||||
width: 180upx; |
||||
height: 56upx; |
||||
background: #FFFFFF; |
||||
border-radius: 50px 50px 50px 50px; |
||||
opacity: 1; |
||||
font-size: 14px; |
||||
line-height: 56upx; |
||||
text-align: center; |
||||
margin-left:12upx; |
||||
} |
||||
.info{ |
||||
border: 1px solid #9F9F9F; |
||||
color: #8B8B8B; |
||||
|
||||
} |
||||
.primary{ |
||||
border: 1px solid #F63116; |
||||
color: #F83F11; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
.filterContent{ |
||||
padding:32upx; |
||||
.filterTitle{ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #303030; |
||||
text-align: center; |
||||
} |
||||
.filterItem{ |
||||
.filterItemContent{ |
||||
margin-top:40upx; |
||||
.itemTitle{ |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #303030; |
||||
margin-bottom:20upx; |
||||
|
||||
} |
||||
.timeContainer{ |
||||
display: flex; |
||||
align-items: center; |
||||
::v-deep .uni-input-wrapper{ |
||||
background: #F3F3F3; |
||||
border-radius: 22px 22px 22px 22px; |
||||
opacity: 1; |
||||
text-align: center; |
||||
} |
||||
::v-deep .u-input__right-icon{ |
||||
display: none; |
||||
} |
||||
text{ |
||||
margin:16upx; |
||||
} |
||||
} |
||||
.selectContainer{ |
||||
display: flex; |
||||
.selectItem{ |
||||
flex:1; |
||||
margin:0 10upx; |
||||
height: 70upx; |
||||
line-height: 66upx; |
||||
text-align: center; |
||||
background: #F3F3F3; |
||||
border-radius: 22px 22px 22px 22px; |
||||
opacity: 1; |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #A1A1A1; |
||||
|
||||
} |
||||
.active{ |
||||
border: 1px solid #F83F11; |
||||
color:#F21A1C; |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.btnGroup{ |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top:100upx; |
||||
padding-bottom:60upx; |
||||
.resetBtn{ |
||||
width: 216upx; |
||||
height: 70upx; |
||||
line-height: 66upx; |
||||
background: #DBDBDB; |
||||
border-radius: 22px 22px 22px 22px; |
||||
opacity: 1; |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #585858; |
||||
text-align: center; |
||||
|
||||
} |
||||
.confrim{ |
||||
width: 216upx; |
||||
height: 70upx; |
||||
text-align: center; |
||||
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%); |
||||
border-radius: 50px 50px 50px 50px; |
||||
opacity: 1; |
||||
line-height: 66upx; |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
margin-left:24upx; |
||||
|
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,187 @@ |
||||
<template> |
||||
<view class="pay"> |
||||
<view class="pay-hd"> |
||||
<view class="a">订单号：<text>{{order_id}}</text></view> |
||||
<view class="a">支付价格：<text>￥{{orderInfo.pay_price}}</text>元</view> |
||||
</view> |
||||
<view class="pay-bd"> |
||||
<view class="title">选择支付方式</view> |
||||
<view class="item" v-for="(a,i) in list2" @click="tabItem(i)"> |
||||
<image v-if="tabIndex == i" src="@/static/invoice/select-on.png"></image> |
||||
<image v-else src="@/static/invoice/select.png"></image> |
||||
{{a.method == 'wechat'?'微信支付':'余额支付'}}<text v-if="a.method == 'balance'">（余额：{{userInfo.balance}}）</text> |
||||
</view> |
||||
</view> |
||||
<view class="pay-btn" @click="clickPay()">确认支付</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as newFunApi from '@/api/newFun' |
||||
export default { |
||||
data() { |
||||
return { |
||||
tabIndex: 0, |
||||
type: "", |
||||
order_id: "", |
||||
userInfo: {}, |
||||
list2: [], |
||||
orderInfo: {}, |
||||
isClick: true, |
||||
}; |
||||
}, |
||||
onLoad(o) { |
||||
console.log(o) |
||||
this.order_id = o.order_id; |
||||
this.type = o.type; |
||||
this.toServerOrder(); |
||||
}, |
||||
methods: { |
||||
clickPay(){ |
||||
if(this.isClick == false){ |
||||
return; |
||||
} |
||||
this.isClick = false; |
||||
if(this.list2[this.tabIndex].method == "balance"){ |
||||
if(Number(this.orderInfo.pay_price) <= Number(this.userInfo.balance)){ |
||||
this.toPay() |
||||
}else{ |
||||
this.isClick = true; |
||||
uni.showToast({ |
||||
icon: "none", |
||||
title: "余额不足，请选择其他支付方式" |
||||
}) |
||||
} |
||||
}else if(this.list2[this.tabIndex].method == "wechat"){ |
||||
uni.showToast({ |
||||
icon: "none", |
||||
title: "暂无开通微信支付" |
||||
}) |
||||
} |
||||
}, |
||||
//创建支付方式信息 |
||||
async toServerOrder(order_id) { |
||||
let {status, data, message } = await newFunApi.serverOrderInfo({ |
||||
client: 'MP-WEIXIN', |
||||
order_id: this.order_id |
||||
}) |
||||
if(status == 200){ |
||||
this.userInfo = data.personal |
||||
this.orderInfo = data.order |
||||
this.list2 = data.paymentMethods; |
||||
console.log(data) |
||||
console.log(this.orderInfo) |
||||
console.log(this.list2) |
||||
console.log(this.userInfo) |
||||
}else{ |
||||
uni.showToast({ |
||||
icon: "none", |
||||
title: message |
||||
}) |
||||
} |
||||
}, |
||||
//去支付 余额支付 |
||||
async toPay() { |
||||
const that = this; |
||||
const {status, message} = await newFunApi.serverOrderPay({ |
||||
order_id: this.order_id, |
||||
method: 'balance', |
||||
client: "MP-WEIXIN", |
||||
}) |
||||
if(status == 200) { |
||||
uni.showToast({ |
||||
title: "支付成功" |
||||
}) |
||||
this.isClick = true; |
||||
setTimeout(()=>{ |
||||
if(that.type == 'fuwu'){ |
||||
uni.redirectTo({ |
||||
url: "/pages/news/recycling/orderList" |
||||
}) |
||||
}else if(that.type == 'fuwuorder'){ |
||||
uni.navigateBack({ |
||||
delta:1 |
||||
}) |
||||
} |
||||
|
||||
},1000) |
||||
}else{ |
||||
this.isClick = true; |
||||
uni.showToast({ |
||||
icon: "none", |
||||
title: message |
||||
}) |
||||
} |
||||
}, |
||||
tabItem(i){ |
||||
this.tabIndex = i |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.pay{ |
||||
overflow: hidden; |
||||
&-hd{ |
||||
width: 710rpx; |
||||
padding: 0 20rpx; |
||||
box-sizing: border-box; |
||||
background-color: #fff; |
||||
margin: 0 auto; |
||||
margin-top: 20rpx; |
||||
.a{ |
||||
padding: 20rpx 0; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
color: #666; |
||||
text{ |
||||
margin-left: 20rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
} |
||||
&-bd{ |
||||
width: 710rpx; |
||||
padding: 0 20rpx; |
||||
box-sizing: border-box; |
||||
background-color: #fff; |
||||
margin: 0 auto; |
||||
margin-top: 20rpx; |
||||
.title{ |
||||
padding: 30rpx 0; |
||||
font-size: 30rpx; |
||||
} |
||||
.item{ |
||||
padding: 20rpx 0; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
image{ |
||||
width: 30rpx; |
||||
height: 30rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
text{ |
||||
margin-left: 20rpx; |
||||
color: #666; |
||||
} |
||||
} |
||||
} |
||||
&-btn{ |
||||
width: 710rpx; |
||||
padding: 0 20rpx; |
||||
line-height: 80rpx; |
||||
box-sizing: border-box; |
||||
background-color: #ff3939; |
||||
margin: 0 auto; |
||||
margin-top: 160rpx; |
||||
text-align: center; |
||||
font-size: 36rpx; |
||||
color: #fff; |
||||
border-radius: 20rpx; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue