|
@@ -0,0 +1,450 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="order-pages">
|
|
|
|
+ <view class="order-info">
|
|
|
|
+ <!-- 订单状态 -->
|
|
|
|
+ <view class="order-status">
|
|
|
|
+ <view class="status-title flex align_center justify_center">
|
|
|
|
+ <view class="t-icon icon t-icon-icon_complete"></view>
|
|
|
|
+ {{orderInfo.orderStateDictValue}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="status-care">
|
|
|
|
+ 预约时间:2021-05-10 15:10:05
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 服务信息 -->
|
|
|
|
+ <view class="info-main">
|
|
|
|
+ <view class="flex align_center">
|
|
|
|
+ <view class="new-left">
|
|
|
|
+ 陕西省西安市未央区华
|
|
|
|
+ 帝金座602室
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="time flex align_center justify_between">
|
|
|
|
+ <text>百果园(贞观路店)</text>
|
|
|
|
+ <view class="flex align_center">
|
|
|
|
+ <view class="t-icon phone t-icon-icon_phone"></view>
|
|
|
|
+ <text>18092252287</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 预约信息 -->
|
|
|
|
+ <view class="item-info">
|
|
|
|
+ <view class="item flex justify_between">
|
|
|
|
+ <text>预约品类</text>
|
|
|
|
+ <text>纸品类,金属类</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item flex justify_between">
|
|
|
|
+ <text>预约重量</text>
|
|
|
|
+ <text>50-100kg</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 订单信息 -->
|
|
|
|
+ <view class="item-info">
|
|
|
|
+ <!-- <view class="item flex justify_between">
|
|
|
|
+ <text class="item-title">订单信息</text>
|
|
|
|
+ </view> -->
|
|
|
|
+ <view class="item flex justify_between">
|
|
|
|
+ <text>订单编号</text>
|
|
|
|
+ <text>202102022225</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item flex justify_between">
|
|
|
|
+ <text>下单时间</text>
|
|
|
|
+ <text>2021-04-19 15:33</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item flex justify_between">
|
|
|
|
+ <text>服务时间</text>
|
|
|
|
+ <text>2021-04-19 15:33</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 图片 -->
|
|
|
|
+ <view class="item-info">
|
|
|
|
+ <view class="item-title flex justify_between">
|
|
|
|
+ <text>图片</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item flex">
|
|
|
|
+ <u-image class="img-icon" :src="item.icon?item.icon:'../../static/img/mddef.jpg'" border-radius="16" width="160" height="160"></u-image>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 回收品类明细 -->
|
|
|
|
+ <view class="item-info">
|
|
|
|
+ <view class="item-title flex justify_between">
|
|
|
|
+ <text>回收品类明细</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item flex">
|
|
|
|
+ <view class="item-type active">
|
|
|
|
+ 纸质类
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-type">
|
|
|
|
+ 纸质类
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item flex justify_between">
|
|
|
|
+ <text>黄纸1.24元/kg</text>
|
|
|
|
+ <text>5kg/6.20元</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 金额 -->
|
|
|
|
+ <view class="item-info">
|
|
|
|
+ <view class="item flex justify_between">
|
|
|
|
+ <text>应付金额</text>
|
|
|
|
+ <text>22.20 元</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item flex justify_between">
|
|
|
|
+ <text>支付方式</text>
|
|
|
|
+ <text>线下</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import moment from 'moment'
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ orderInfo: {
|
|
|
|
+ id: '',
|
|
|
|
+ createDate: '2021-05-10 15:22',
|
|
|
|
+ orderStateDictValue: '已完成',
|
|
|
|
+ storeName: '昆仑润滑·车领主 (西咸新区-...',
|
|
|
|
+ location: '2.9km',
|
|
|
|
+ orderState:'WAIT_PAY',
|
|
|
|
+ type: [
|
|
|
|
+ {
|
|
|
|
+ name:'纸质类',
|
|
|
|
+ id: '1'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:'衣物类',
|
|
|
|
+ id: '12'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ orderGoodsList: [
|
|
|
|
+ {
|
|
|
|
+ goodsImages: '',
|
|
|
|
+ goodsName: '水蜡免擦洗车(轿车)',
|
|
|
|
+ payGold: 200,
|
|
|
|
+ buyQty: 2,
|
|
|
|
+ goodsNum: 5,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ goodsImages: '',
|
|
|
|
+ goodsName: '水蜡免擦洗车(轿车)',
|
|
|
|
+ payGold: 200,
|
|
|
|
+ buyQty: 2,
|
|
|
|
+ goodsNum: 5,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ payGold: 450
|
|
|
|
+ },
|
|
|
|
+ totalPrice: 0, // 支付合计
|
|
|
|
+ password: '', // 支付密码
|
|
|
|
+ showSetPswModal: false, // 设置支付密码弹窗
|
|
|
|
+ showInputPsw: false, // 打开输入密码弹窗
|
|
|
|
+ showLeavePsw: false, // 打开确定放弃弹窗
|
|
|
|
+ orderId: '', // 订单id
|
|
|
|
+ leftTime: null,
|
|
|
|
+ payFinish: false , // 是否支付成功
|
|
|
|
+ focus: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad(options) {
|
|
|
|
+ // 监听设置密码是否成功
|
|
|
|
+ uni.$once('setPswSuccess', this.setPsw)
|
|
|
|
+ if (options.id) {
|
|
|
|
+ console.log(options.id)
|
|
|
|
+ this.orderId = options.id
|
|
|
|
+ // this.getOrderDetail()
|
|
|
|
+ }
|
|
|
|
+ // 开启分享
|
|
|
|
+ uni.showShareMenu({
|
|
|
|
+ withShareTicket: true,
|
|
|
|
+ menus: ['shareAppMessage', 'shareTimeline']
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 支付剩余时间
|
|
|
|
+ leftTimeFun() {
|
|
|
|
+ const date1 = moment().toArray() // 当前时间 数组形式
|
|
|
|
+ const date2 = moment(this.orderInfo.orderTime).toDate() // 下单时间 日期格式
|
|
|
|
+ const date3 = moment(date2).toArray() // 下单时间 数组形式
|
|
|
|
+ const date4 = moment(date1).diff(moment(date3), 'seconds')//计算相差的秒数
|
|
|
|
+ const tt = 30 - Math.ceil(date4/60) //向上取整
|
|
|
|
+ if (tt > 0) {
|
|
|
|
+ this.leftTime = tt
|
|
|
|
+ } else {
|
|
|
|
+ // this.getOrderDetail()
|
|
|
|
+ this.leftTime = '00'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 获取订单详情
|
|
|
|
+ getOrderDetail() {
|
|
|
|
+ orderDetail({
|
|
|
|
+ id: this.orderId
|
|
|
|
+ }).then(res => {
|
|
|
|
+ console.log(res,'rrrrrrrr')
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ this.orderInfo = res.data
|
|
|
|
+ if(this.orderInfo.orderState=='WAIT_PAY') {
|
|
|
|
+ this.leftTimeFun()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 跳转到设置支付密码页
|
|
|
|
+ toSetPwd () {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url:"/pages/userCenter/userInfo/smsVerification"
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 设置密码成功, 打开输入密码弹窗
|
|
|
|
+ setPsw (e) {
|
|
|
|
+ if (e.success) {
|
|
|
|
+ this.showInputPsw = true
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ this.focus = true
|
|
|
|
+ },300)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 关闭输入密码弹窗
|
|
|
|
+ closePayModal(){
|
|
|
|
+ if(!this.payFinish) {
|
|
|
|
+ this.showLeavePsw = true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //确认放弃
|
|
|
|
+ canclePay() {
|
|
|
|
+ this.password = ''
|
|
|
|
+ this.showLeavePsw = false
|
|
|
|
+ this.showInputPsw = false
|
|
|
|
+ this.focus = false
|
|
|
|
+ },
|
|
|
|
+ // 继续支付
|
|
|
|
+ payAgain () {
|
|
|
|
+ this.focus = false
|
|
|
|
+ this.showLeavePsw = false
|
|
|
|
+ this.showInputPsw = true
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ this.focus = true
|
|
|
|
+ },300)
|
|
|
|
+ },
|
|
|
|
+ // 支付 判断用户是否设置过支付密码
|
|
|
|
+ toPay() {
|
|
|
|
+ this.totalPrice = this.orderInfo.originalGold
|
|
|
|
+ this.payFinish = false
|
|
|
|
+ // 判断用户是否设置过支付密码
|
|
|
|
+ existPayPwd().then(res=>{
|
|
|
|
+ console.log(res,'rrrrrr')
|
|
|
|
+ if(res.status == 200) {
|
|
|
|
+ // 设置过支付密码,输入密码
|
|
|
|
+ if(res.data) {
|
|
|
|
+ this.showInputPsw = true
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ this.focus = true
|
|
|
|
+ },300)
|
|
|
|
+ } else {
|
|
|
|
+ // 没设置过支付密码,提示设置密码
|
|
|
|
+ this.showSetPswModal = true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 支付
|
|
|
|
+ toPayOrder() {
|
|
|
|
+ if (this.password === '') {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: '请先输入支付密码',
|
|
|
|
+ icon: 'none'
|
|
|
|
+ })
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ let id = this.orderInfo.id
|
|
|
|
+ let params = {
|
|
|
|
+ payPwd: this.password,
|
|
|
|
+ id: id
|
|
|
|
+ }
|
|
|
|
+ signPay(params).then(res=>{
|
|
|
|
+ this.btnLoading = false
|
|
|
|
+ if(res.status == 200) {
|
|
|
|
+ // 关闭弹窗 刷新页面
|
|
|
|
+ this.payFinish = true
|
|
|
|
+ this.showInputPsw = false
|
|
|
|
+ this.getOrderDetail()
|
|
|
|
+ // 刷新订单列表
|
|
|
|
+ uni.$emit('refresh')
|
|
|
|
+ // 跳转到支付完成界面
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url:"/pagesA/toOrder/payFinish?id=" + id
|
|
|
|
+ })
|
|
|
|
+ } else{
|
|
|
|
+ this.password = ''
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+
|
|
|
|
+ .order-pages {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100vh;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ background-color: #F5F5F5;
|
|
|
|
+ .order-info {
|
|
|
|
+ width: 100%;
|
|
|
|
+ flex: 1;
|
|
|
|
+ overflow-y: scroll;
|
|
|
|
+ // 订单内容
|
|
|
|
+ .info-main{
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ padding: 10upx 32upx;
|
|
|
|
+ margin: 20upx 32upx;
|
|
|
|
+ border-radius: 24upx;
|
|
|
|
+ box-shadow: 1px 1px 3px #EEEEEE;
|
|
|
|
+ font-size: 28upx;
|
|
|
|
+ background-image: url(../../static/order_bg_stor.png);
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ .new-left{
|
|
|
|
+ width: 360rpx;
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ color: #191919;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
+ }
|
|
|
|
+ .time{
|
|
|
|
+ padding: 20rpx 0;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #7C7D7E;
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
+ view:last-child{
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #4C4C4C;
|
|
|
|
+ margin-left: 6rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 状态
|
|
|
|
+ .order-status {
|
|
|
|
+ padding: 30upx 0;
|
|
|
|
+ text-align: center;
|
|
|
|
+ .status-title {
|
|
|
|
+ font-size: 42upx;
|
|
|
|
+ color: #191919;
|
|
|
|
+ .icon{
|
|
|
|
+ width: 48rpx;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .status-care {
|
|
|
|
+ font-size: 28upx;
|
|
|
|
+ margin-top: 10upx;
|
|
|
|
+ color: #191919;
|
|
|
|
+
|
|
|
|
+ >text {
|
|
|
|
+ color: red;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 订单信息列
|
|
|
|
+ .item-info{
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
+ margin: 0rpx 32rpx 20rpx;
|
|
|
|
+ padding: 0rpx 32rpx;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ .item-title{
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #181818;
|
|
|
|
+ padding-top: 28rpx;
|
|
|
|
+ }
|
|
|
|
+ .item{
|
|
|
|
+ padding: 28rpx 0;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ border-bottom: 1px solid #EBEBEB;
|
|
|
|
+ :first-child{
|
|
|
|
+ color: #7C7D7E;
|
|
|
|
+ }
|
|
|
|
+ :last-child-child{
|
|
|
|
+ color: #222222;
|
|
|
|
+ }
|
|
|
|
+ &:last-child{
|
|
|
|
+ border-bottom: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .item-type{
|
|
|
|
+ width: 128rpx;
|
|
|
|
+ height: 56rpx;
|
|
|
|
+ border: 1px solid #979797;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ border-radius: 28rpx;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ color: #999999;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 56rpx;
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ .item-type.active{
|
|
|
|
+ background-color: #4F88F7;
|
|
|
|
+ border: none;
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .price-text {
|
|
|
|
+ font-size: 20upx;
|
|
|
|
+ margin-left: 10upx;
|
|
|
|
+ }
|
|
|
|
+ .price-num {
|
|
|
|
+ font-size: 32upx;
|
|
|
|
+ color: red;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ margin-right: 6rpx;
|
|
|
|
+ }
|
|
|
|
+ .u-cell {
|
|
|
|
+ padding: 10rpx 32rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .footer {
|
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ .btn{
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 84rpx;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 84rpx;
|
|
|
|
+ }
|
|
|
|
+ .btnCancleStyle{
|
|
|
|
+ color: #666666;
|
|
|
|
+ background: #E5E5E5;
|
|
|
|
+ border-radius: 60rpx 0px 0px 60rpx;
|
|
|
|
+ }
|
|
|
|
+ .btnPayStyle{
|
|
|
|
+ color: #191919;
|
|
|
|
+ background: #FFD100;
|
|
|
|
+ border-radius: 0rpx 60px 60px 0rpx;
|
|
|
|
+ }
|
|
|
|
+ .useBtn{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 84rpx;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 84rpx;
|
|
|
|
+ color: #191919;
|
|
|
|
+ background: #FFD100;
|
|
|
|
+ border-radius: 60rpx
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|