sadjv3_user/my/order/payJaZ.vue

2482 lines
79 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<!-- <view v-if="order.overTimeOrders == 1" class="dingshi" style="font-size: 32upx;height: 150rpx;padding: 26rpx 29rpx 0 29rpx;">
<view style="color: red;font-size:26rpx">(订单已超时)</view>
</view> -->
<view class="padding-bottom u-skeleton">
<view class="bgImg u-skeleton-fillet" v-if="order.ordersMassageList && order.ordersMassageList.length > 0"
style="padding: 0 29rpx;">
<view class="head-top">
<view class="pay-title" style="">服务项目</view>
<view class="flex justify-around">
<view class="" style="width: 160upx;height: 160upx;">
<image v-if="order.userPackageDetailId==null" :src="order.ordersMassageList[0].massageType.massageImg"
style="width: 100%;height: 100%;border-radius: 19upx;"></image>
<image v-else :src="order.ordersMassageList[0].userPackageDetail.massageImg"
style="width: 100%;height: 100%;border-radius: 19upx;"></image>
</view>
<view class="u-flex-1 margin-left-sm">
<view class="flex head-title-right">
<view class="head-title">
{{order.entryName}}
</view>
<view class="zhuangtai">
<view v-if="order.status ==1">待支付</view>
<view v-if="order.status ==2">待服务</view>
<view v-if="order.status ==5">已完成</view>
<view v-if="order.status ==6">服务中</view>
<view v-if="order.status ==7">技师出发</view>
<view v-if="order.status ==8">技师到达</view>
<view v-if="order.status ==3">待评价</view>
<view v-if="order.status ==4">已取消</view>
<view v-if="order.status ==9">待确认</view>
<view v-if="order.status ==10">待补单</view>
</view>
</view>
<view class="flex align-center">
<view style="width: 100%;">
<view class="flex justify-between margin-tb-sm">
<view style="justify-content: space-between;">
<text class="title-font">服务时长:</text><text class="value-font">{{order.duration}}分钟</text>
</view>
</view>
<view class="money-pay" style="justify-content: space-between;">
<view class="money-pay-zhen">
<text class="title-font">项目价格:</text>
<span>¥</span>
<span>{{order.priceMarkup}} </span>
</view>
<view>
<uni-number-box :disabled="true" :value="order.massageNum" :width='27' :min="1" @change="changeValue" />
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="add-content">
<view class="" v-if="order.artificer">
<view class="flex align-center jusitify-line">
<view class="line-word title-font">客户姓名</view>
<view class="line-word-r value-font">
{{order.userName}}
</view>
</view>
<view class="flex align-center jusitify-line">
<view class="line-word title-font">联系方式</view>
<view class="line-word-r value-font">
{{order.phone ? order.phone.substring(0,3) + '****' + order.phone.substring(7,11) : ''}}
</view>
</view>
<view class="serverAddress jusitify-line">
<view class="line-word title-font">服务地址</view>
<view class="line-word-r value-font" style="width: 75%; text-align: right;">{{order.address}}</view>
</view>
</view>
</view>
<view class="margin-top-xl pay-ding">
<view class="flex align-center pay-ding-top">
<image :src="order.artificer.artificerImg" class="d-touxiang"></image>
<view class="margin-left-sm" style="width: 90%;">
<view class="flex align-center" style="width: 100%;justify-content: space-between;">
<view class="d-title">
<span>{{order.artificer.artificerName}}</span>
</view>
<!-- <image
v-if="order.status !=1 && order.status !=5 && order.status !=3 && order.status !=4 && order.status !=2"
src="../../static/img/phone.png" style="width: 10px;height: 13px;margin-left: 11px;"
@click="bindphone(order.artificer.phone)"></image> -->
<!-- <image src="../../static/img/phone.png" class="phone-pay"
@click="bindphone(order.artificer.phone)"></image> -->
<image style="width: 120rpx; height: 45rpx;" :src="order.technicianType=='3'?'../../static/vip/grade1.gif':order.technicianType=='4'?'../../static/vip/grade2.gif':'../../static/vip/grade3.gif'" mode=""></image>
</view>
<view class="flex align-center flex-wrap" v-if="order.artificer.ordersCount">
<view class="margin-right">
<image src="../../static/images/start.png" style="width: 24rpx;height: 22rpx;">
</image>
<text
style="color: #F93731;margin-left: 5rpx;">{{order.artificer.ordersCount}}</text>
</view>
<text class="margin-bottom-xs box" style="margin-right: 10upx;">健康技师</text>
</view>
</view>
</view>
<!-- 普通项目 加钟信息 -->
<view class="list-pay" v-if="order.userPackageDetailId==null">
<view class="justify-title-nav">
<view class="justify-title">订单信息</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">订单编号</view>
<view class="flex align-center" @tap="copy(order.ordersNo)">
<view class="value-font">{{order.ordersNo}}
<u-icon name="file-text" style="color: #096f4b;margin-left: 10rpx;"></u-icon>
</view>
</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">预约时间</view>
<view class="line-word-r value-font">{{order.serveTime}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">下单时间</view>
<view class="flex line-word-r value-font">{{order.createTime}}</view>
</view>
<view class="jusitify-line-end"></view>
<view class="justify-title-nav">
<view class="justify-title">订单费用</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">项目名称</view>
<view class="line-word-r value-font" v-if="order.oldEntryName==null">{{order.entryName}}</view>
<view class="line-word-r value-font" v-else>{{order.oldEntryName}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">服务时长</view>
<view class="line-word-r value-font" v-if="order.oldMassageDuration==null">{{order.duration}}分钟</view>
<view class="line-word-r value-font" v-else>{{order.oldMassageDuration}}分钟</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">项目原价</view>
<view class="line-word-r value-font" v-if="order.oldMassagePrice==null">¥{{order.massagePrice}}</view>
<view class="line-word-r value-font" v-else>¥{{order.oldMassagePrice}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">{{order.technicianTypeName}}价格</view>
<view class="line-word-r value-font" style="color: #019c88;" v-if="order.oldPriceMarkup==null">¥{{order.priceMarkup}}</view>
<view class="line-word-r value-font" style="color: #019c88;" v-else>¥{{order.oldPriceMarkup}}</view>
</view>
<view class="jusitify-line">
<view class="add-con-title title-font">会员减免</view>
<view class="add-con-cont value-font" style="color: #FF6000;">-¥{{order.vipReductionMoney}}</view>
</view>
<view class="jusitify-line" style="justify-content: flex-end;">
<view class="line-word title-font">小计:</view>
<view class="value-font" style="font-weight: bold;">
<text v-if="order.oldMassageMoney==null" >
¥{{order.massageMoney}}
</text>
<text v-else>
¥{{order.oldMassageMoney}}
</text>
</view>
</view>
<view class="jusitify-line-end"></view>
<view class="justify-title-nav">
<view class="justify-title">出行费用</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line" v-if="order.tripWay" >
<view class="line-word title-font">出行方式</view>
<view class="line-word-r value-font" v-if="order.tripWay == 1">公交</view>
<view class="line-word-r value-font" v-if="order.tripWay == 2">出租</view>
<view class="line-word-r value-font" v-if="order.tripWay == 3">免费</view>
</view>
<view class="jusitify-line" v-if="order.km">
<view class="line-word title-font">全程距离</view>
<view class="line-word-r value-font" >{{order.km}}km</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">出行费用</view>
<view class="line-word-r value-font">¥{{order.usualTravelMoney}}</view>
</view>
<view class="jusitify-line" v-if="order.nightTravelMoney">
<view class="line-word title-font">夜间出行</view>
<view class="line-word-r value-font">¥{{order.nightTravelMoney}}</view>
</view>
<view class="jusitify-line" style="justify-content: flex-end;">
<view class="line-word title-font">小计:</view>
<view class="line-word-r value-font" style="font-weight: bold;">¥<text>{{order.taxiMoney}}</text></view>
</view>
<view class="jusitify-line-end"></view>
<view class="justify-title-nav">
<view class="justify-title">优惠券信息</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line" >
<view class="line-word title-font">优惠券</view>
<view class="line-word value-font" style="color: #FF6000;" v-if="order.couponMoney">-¥{{order.couponMoney}}</view>
<view class="value-font" v-else>-</view>
</view>
<view class="jusitify-line-end"></view>
<view>
<view class="justify-title-nav">
<view class="justify-title">加钟信息</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line" >
<view class="line-word title-font">加钟项目</view>
<view class="line-word-r value-font">{{order.addEntryName}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">加钟价格</view>
<view class="line-word-r value-font" style="color: #019c88;">¥{{order.addPriceMarkup}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">加钟时长</view>
<view class="line-word-r value-font">{{order.addTime}}分钟</view>
</view>
<!-- <view class="jusitify-line">
<view class="line-word">加钟次数</view>
<view class="line-word-r">{{order.addNum}}</view>
</view> -->
<view class="jusitify-line">
<view class="add-con-title title-font">会员减免</view>
<view class="add-con-cont value-font" style="color: #FF6000;">-¥{{order.addVipReductionMoney}}</view>
</view>
<view class="jusitify-line" style="justify-content: flex-end;">
<view class="line-word title-font">小计:</view>
<view class="value-font"><text style="font-weight: bold;">¥{{order.addMoney}}</text></view>
</view>
</view>
<view class="jusitify-line-end"></view>
<view class="justify-title-nav">
<view class="justify-title">费用明细</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">订单费用</view>
<view class="line-word-r value-font" v-if="order.oldMassageMoney==null">
<text style="font-weight: bold;">¥{{order.massageMoney}}</text></view>
<view class="line-word-r value-font" v-else><text style="font-weight: bold;">¥{{order.oldMassageMoney}}</text></view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">出行费用</view>
<view class="line-word-r value-font">
<text style="font-weight: bold;">¥{{order.taxiMoney}}</text>
</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">优惠券</view>
<view class="value-font" style="color: #FF6000;" v-if="order.couponMoney">
-<text style="font-weight: bold;">¥{{order.couponMoney}}</text>
</view>
<view class="value-font" v-else>-</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">加钟费用</view>
<view class="line-word-r value-font">
<text style="font-weight: bold;" v-if="order.addMoney">¥{{order.addMoney}}</text>
<text class="line-word-r value-font" v-else>-</text>
</view>
</view>
<view class="flex align-center margin-top-lg" style="justify-content: flex-end;">
<view class="line-word title-font">合计:</view>
<view class="line-word-r value-font">
<text style="color: #FF1200;font-weight: bold;font-size: 40rpx;">
¥{{order.payMoneyTotal}}
</text>
</view>
</view>
<!-- <view class="be-remarks">温馨提示:费用随会员等级及技师等级不同而上下浮动</view> -->
</view>
<!-- 套餐 次卡 疗程 加钟信息 -->
<view class="list-pay" v-else>
<view class="justify-title-nav">
<view class="justify-title">订单信息</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">订单编号</view>
<view class="flex align-center" @tap="copy(order.ordersNo)">
<view class="value-font">{{order.ordersNo}}
<u-icon name="file-text" style="color: #096f4b;margin-left: 10rpx;"></u-icon>
</view>
</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">预约时间</view>
<view class="line-word-r value-font">{{order.serveTime}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">下单时间</view>
<view class="flex line-word-r value-font">{{order.createTime}}</view>
</view>
<view class="jusitify-line-end"></view>
<view class="justify-title-nav">
<view class="justify-title">订单费用</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="flex justify-between jusitify-line">
<view class="line-word title-font">{{order.packageType=='104'?'套餐':order.packageType=='105'?'次卡':order.packageType=='106'?'疗程':order.packageType=='111'?'团购':order.packageType=='112'?'秒杀':'其他'}}名称</view>
<view class="line-word-r value-font">{{order.ordersMassageList[0].userPackageDetail.mainTitle}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">项目名称</view>
<view class="line-word-r value-font" v-if="order.oldEntryName==null">{{order.entryName}}</view>
<view class="line-word-r value-font" v-else>{{order.oldEntryName}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">服务时长</view>
<view class="line-word-r value-font" v-if="order.oldMassageDuration==null">{{order.duration}}分钟</view>
<view class="line-word-r value-font" v-else>{{order.oldMassageDuration}}分钟</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">项目价格</view>
<view class="line-word-r value-font" v-if="order.oldMassagePrice==null">¥{{order.massagePrice}}</view>
<view class="line-word-r value-font" v-else>¥{{order.oldMassagePrice}}</view>
</view>
<view class="jusitify-line" style="justify-content: flex-end;">
<view class="line-word title-font">小计:</view>
<view class="value-font" style="font-weight: bold;">
<text v-if="order.oldMassageMoney==null">
¥{{order.massageMoney}}
</text>
<text v-else>
¥{{order.oldMassageMoney}}
</text>
</view>
</view>
<view class="jusitify-line-end"></view>
<view class="justify-title-nav">
<view class="justify-title">出行费用</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line" v-if="order.tripWay" >
<view class="line-word title-font">出行方式</view>
<view class="line-word-r value-font" v-if="order.tripWay == 1">公交</view>
<view class="line-word-r value-font" v-if="order.tripWay == 2">出租</view>
<view class="line-word-r value-font" v-if="order.tripWay == 3">免费</view>
</view>
<view class="jusitify-line" v-if="order.km">
<view class="line-word title-font">全程距离</view>
<view class="line-word-r value-font" >{{order.km}}km</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">出行费用</view>
<view class="line-word-r value-font">¥{{order.usualTravelMoney}}</view>
</view>
<view class="jusitify-line" v-if="order.nightTravelMoney">
<view class="line-word title-font">夜间出行</view>
<view class="line-word-r value-font">¥{{order.nightTravelMoney}}</view>
</view>
<view class="jusitify-line" style="justify-content: flex-end;">
<view class="line-word title-font">小计:</view>
<view class="line-word-r value-font" style="font-weight: bold;">¥<text>{{order.taxiMoney}}</text></view>
</view>
<!-- <view class="jusitify-line-end"></view>
<view class="justify-title-nav">
<view class="justify-title">优惠券信息</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line" >
<view class="line-word title-font">优惠券</view>
<view class="line-word value-font" style="color: #FF6000;" v-if="order.couponMoney">-¥{{order.couponMoney}}</view>
<view class="value-font" v-else>-</view>
</view> -->
<view class="jusitify-line-end"></view>
<view>
<view class="justify-title-nav">
<view class="justify-title">加钟信息</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line" >
<view class="line-word title-font">加钟项目</view>
<view class="line-word-r value-font">{{order.addEntryName}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">加钟价格</view>
<view class="line-word-r value-font" style="color: #019c88;">¥{{order.addPriceMarkup}}</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">加钟时长</view>
<view class="line-word-r value-font">{{order.addTime}}分钟</view>
</view>
<!-- <view class="jusitify-line">
<view class="line-word">加钟次数</view>
<view class="line-word-r">{{order.addNum}}</view>
</view> -->
<view class="jusitify-line">
<view class="add-con-title title-font">会员减免</view>
<view class="add-con-cont value-font" style="color: #FF6000;">-¥{{order.addVipReductionMoney}}</view>
</view>
<view class="jusitify-line" style="justify-content: flex-end;">
<view class="line-word title-font">小计:</view>
<view class="value-font"><text style="font-weight: bold;">¥{{order.addMoney}}</text></view>
</view>
</view>
<view class="jusitify-line-end"></view>
<view class="justify-title-nav">
<view class="justify-title">费用明细</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">订单费用</view>
<view class="line-word-r value-font" v-if="order.oldMassageMoney==null">
<text style="font-weight: bold;">¥{{order.massageMoney}}</text></view>
<view class="line-word-r value-font" v-else><text style="font-weight: bold;">¥{{order.oldMassageMoney}}</text></view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">出行费用</view>
<view class="line-word-r value-font">
<text style="font-weight: bold;">¥{{order.taxiMoney}}</text></view>
</view>
<!-- <view class="jusitify-line">
<view class="line-word title-font">优惠券</view>
<view class="value-font" style="color: #FF6000;" v-if="order.couponMoney">
-<text style="font-weight: bold;">¥{{order.couponMoney}}</text>
</view>
<view class="value-font" v-else>-</view>
</view> -->
<view class="jusitify-line">
<view class="line-word title-font">加钟费用</view>
<view class="line-word-r value-font" >
<text style="font-weight: bold;" v-if="order.addMoney">¥{{order.addMoney}}</text>
<text class="line-word-r value-font" v-else>-</text>
</view>
</view>
<view class="flex align-center margin-top-lg" style="justify-content: flex-end;">
<view class="line-word title-font">合计:</view>
<view class="line-word-r value-font">
<text style="color: #FF1200;font-weight: bold;font-size: 40rpx;">
¥{{order.payMoneyTotal}}
</text>
</view>
</view>
<!-- <view class="be-remarks">温馨提示:费用随会员等级及技师等级不同而上下浮动</view>-->
</view>
</view>
</view>
<view class="flex tabber padding-top-sm padding-bottom-sm align-center">
<view class="showBtn-mian" v-if="order.status=='6'">
<view class="showBtn">
<view class="gengduo" @click.stop="gengBtn">
更多
</view>
<view class="showbtn-line">
<u-button
shape="circle" :plain="true"
@click="toggle('center',order)"
class="btns">
提前结束
</u-button>
<u-button
v-if="order.addNum ==null && order.ordersMassageList[0].massageType"
shape="circle" :plain="true"
@tap="saveJZ(order.ordersMassageList[0].massageType.massageTypeId)"
class="btns">
加钟
</u-button>
<u-button
v-if="order.addNum ==null && order.ordersMassageList[0].userPackageDetail"
shape="circle" :plain="true"
@tap="saveJZ(order.ordersMassageList[0].userPackageDetail.massageTypeId)"
class="btns">
加钟
</u-button>
<u-button
shape="circle" :plain="true"
@click="goNav('/my/wallet/index?artificerId='+order.artificerId+'&ordersId='+order.ordersId)"
class="btns">
充值
</u-button>
</view>
</view>
<view v-if="btnShow==true" class="showBtnClass">
<view :custom-style="customStyle2"
shape="circle" :plain="true"
@click="goNav('/my/order/complain?ordersId='+ordersId + '&byUserId=' + order.artificer.userId + '&byuserName=' + order.artificer.artificerName)"
class="eject-btns">
去投诉
</view>
<view :custom-style="customStyle2" shape="circle" :plain="true"
@click="goNav('/my/order/feedback?artificerId='+order.artificerId+ '&ordersId='+order.ordersMassageList[0].ordersId)"
class="eject-btns">
去评价
</view>
<view shape="circle" :plain="true" @click="goChat"
class="eject-btns">联系客服</view>
</view>
</view>
<view class="showBtn-mian" v-else>
<view class="showBtn" style="justify-content: center;">
<view :custom-style="customStyle2"
shape="circle" :plain="true"
@click="goNav('/my/order/complain?ordersId='+ordersId + '&byUserId=' + order.artificer.userId + '&byuserName=' + order.artificer.artificerName)"
class="eject-btns">
去投诉
</view>
<view :custom-style="customStyle2" shape="circle" :plain="true"
@click="goNav('/my/order/feedback?artificerId='+order.artificerId+ '&ordersId='+order.ordersMassageList[0].ordersId)"
class="eject-btns">
去评价
</view>
<view shape="circle" :plain="true" @click="goChat"
class="eject-btns">联系客服</view>
</view>
</view>
</view>
</view>
<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
<!-- 加钟-->
<u-popup v-model="showorder" mode="bottom" :closeable="closeable">
<scroll-view scroll-y="true" style="width: 750rpx;height: 600rpx;">
<view class="xiangmu" v-for="(item,index) in orderList" :key="index">
<image class="xiangmu-img" :src="item.massageImg" mode=""></image>
<view class="xiangmu-cont">
<view class="xiangmu-cont-top">
<view class="xiangmu-cont-top-title">
{{item.title}}
</view>
<view class="xiangmu-cont-top-time">
<view class="xiangmu-cont-top-left">服务时长:{{item.duration}}分钟</view>
<view class="xiangmu-cont-top-left">已售:{{item.sales}}</view>
</view>
</view>
<view class="xiangmu-about">
{{item.jianjie}}
</view>
<view class="xiangmu-foot">
<view class="xiangmu-foot-left">
<view class="xiangmu-foot-left-shiji">
<span>¥</span>
<span>{{item.price}}</span>
<span>元/套</span>
</view>
<view class="xiangmu-foot-left-dazhe">{{item.oldPrice}}</view>
</view>
<view class="xiadan" @click="goOrderJ(item)">
确认加钟
</view>
</view>
</view>
</view>
</scroll-view>
</u-popup>
<!-- 升级 -->
<u-popup v-model="showorderS" mode="bottom" :closeable="closeable">
<scroll-view scroll-y="true" style="width: 750rpx;height: 600rpx;">
<view class="xiangmu" v-for="(item,index) in artificerlist" :key="index">
<image class="xiangmu-img" :src="item.massageImg" mode=""></image>
<view class="xiangmu-cont">
<view class="xiangmu-cont-top">
<view class="xiangmu-cont-top-title">
{{item.title}}
</view>
<view class="xiangmu-cont-top-time">
<view class="xiangmu-cont-top-left">服务时长:{{item.duration}}分钟</view>
<view class="xiangmu-cont-top-left">已售:{{item.sales}}</view>
</view>
</view>
<view class="xiangmu-about">
{{item.jianjie}}
</view>
<view class="xiangmu-foot">
<view class="xiangmu-foot-left">
<view class="xiangmu-foot-left-shiji">
<span>¥</span>
<span>{{item.price}}</span>
<span>/元套</span>
</view>
<view class="xiangmu-foot-left-dazhe">{{item.oldPrice}}</view>
</view>
<view class="xiadan" @click="goOrderS(item)">
确认升级
</view>
</view>
</view>
</view>
</scroll-view>
</u-popup>
<!-- 支付方式 -->
<u-popup v-model="showpay" mode="bottom" :closeable="closeable">
<view class="popup_pay">
<view style="background-color: #fff;">
<view style="padding: 0 20upx;margin-top: 60rpx;margin-bottom: 20rpx;">
<view
style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
v-for="(item,index) in openLists" :key='index'>
<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
</image>
<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
{{item.text}}
</view>
<radio-group name="openWay" style="margin-left: 45upx;" @tap='selectWay(item)'>
<label class="tui-radio">
<radio color="#019c88" :checked="openWay === item.id ? true : false" />
</label>
</radio-group>
</view>
</view>
</view>
<view class="pay_btn" @click="pay()">确认支付</view>
</view>
</u-popup>
<!-- 提前结束 -->
<view>
<!-- 提前结束 -->
<uni-popup ref="popup" background-color="#fff">
<view class="popup-content">
<view class="popup-head">
<span>请输入提前结束的原因</span>
<span @click="closePopup(type)"><image style="width: 30rxp; height: 50rpx;" src="../../static/close.png" mode=""></image></span>
</view>
<view class="popup-mian">
<textarea placeholder="请输入提前结束服务原因" @input="textareaInp" class="popup-mian-textarea" name="" id="" cols="30" rows="10"></textarea>
<view class="popup-mian-btn">
<span @click="closePopup(type)">
取消
</span>
<span @click="tiqian('center')">
确定
</span>
</view>
</view>
</view>
</uni-popup>
</view>
<!-- 确认拒绝 -->
<view>
<!-- 确认拒绝 -->
<uni-popup ref="popupQ" background-color="#fff">
<view class="popup-content">
<view class="popup-head">
<span>确认拒单</span>
<span @click="closePopupQ(type)">x</span>
</view>
<view class="popup-mian">
<view class="popup-mian-textarea">
{{qurenJd.refusalContent}}
</view>
<view class="popup-mian-btn">
<span @click="TuiPopup(type,'1')">
同意
</span>
<!-- <span @click="TuiPopup(type,'3')">
全额退款
</span> -->
</view>
</view>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
// 调用手机系统权限
// #ifdef APP-PLUS
import permision from "@/components/permission.js";
// #endif
export default {
data() {
return {
ordersId: '',
tpayMoney: '',
paySel: 0,
showorder: false,
showorderS: false,
orderList: [],
loading: true,
customStyle: {
// backgroundColor: '#e5e5e5',
// color: '#FFFFFF',
// #ifdef MP-WEIXIN
width: "310upx",
// #endif
// #ifndef MP-WEIXIN
width: '310upx',
// #endif
margin: '0 10upx',
},
customStyle2: {
backgroundColor: '',
color: '#FFFFFF',
// #ifdef MP-WEIXIN
width: "310upx",
// #endif
// #ifndef MP-WEIXIN
width: '310upx',
// #endif
// margin: '0 10upx',
},
id: '',
order: {
user: {},
game: {}
},
isTrue: 0,
phone: '',
isVip: false,
birthDate: '',
age: '',
showpay: false,
openLists: [],
openWay: 1,
closeable: true,
yhqxSel: '否',
btnShow:false,
tiqianData:'',
type:'center',
earlyFinishReason:'',
qurenJd:[],
artificerlist:[],
tordersId:''
}
},
onLoad(e) {
// uni.showLoading({
// title: '加载中......',
// })
// setTimeout(() => {
// // this.loading = false;
// }, 2000)
this.isTrue = e.isTrue
if (this.isTrue) {
uni.setNavigationBarTitle({
title: '订单详情'
})
}
this.ordersId = e.ordersId
this.getOrder()
},
onShow() {
this.yhqxSel = this.$queue.getData("yhqxSel");
this.getOrder()
if (uni.getStorageSync('token')) {
this.getIsVip()
}
// #ifndef MP-WEIXIN
this.openLists = [{
image: '../../static/images/icon_weixin.png',
text: '微信支付',
id: 2
}, {
image: '../../static/images/zhifubao.png',
text: '支付宝支付',
id: 3
}, {
image: '../../static/images/lingqian.png',
text: '零钱支付',
id: 1
}],
this.openWay = 2;
// #endif
// #ifdef MP-WEIXIN
this.openLists = [{
image: '../../static/images/icon_weixin.png',
text: '微信支付',
id: 2
}, {
image: '../../static/images/lingqian.png',
text: '零钱支付',
id: 1
}],
this.openWay = 2;
// #endif
},
methods: {
saveJZS(artificerId) {//升级查询技师项目
let data = {
artificerId: artificerId,
status: 0
}
let that = this;
this.$queue.showLoading('查询中...')
that.$Request.get("/app/artificer/selectArtificerMassageList", data).then(res => {
if (res.code == 0) {
if (res.data && res.data.length > 0) {
that.artificerlist = res.data
// for (let i = 0; i < that.artificerlist.length; i++) {
// if (that.artificerlist[i].labels) {
// that.artificerlist[i].labels = that.artificerlist[i].labels.split(",");
// }
// }
uni.hideLoading();
that.showorderS = true;
} else {
uni.hideLoading();
that.$queue.showToast('暂无可升级项目');
}
} else {
uni.hideLoading();
that.$queue.showToast(res.msg);
}
})
},
saveJZ(classifyId) {//加钟
let data = {
parentId: classifyId,
page: 1,
limit: 50,
status: 1,
artificerId:this.order.artificerId
}
let that = this;
this.$queue.showLoading('查询中...')
that.$Request.get("/app/artificer/selectMassageTypePage", data).then(res => {
if (res.code == 0) {
if (res.data.list && res.data.list.length > 0) {
that.orderList = res.data.list
for (let i = 0; i < that.orderList.length; i++) {
if (that.orderList[i].labels) {
that.orderList[i].labels = that.orderList[i].labels.split(",");
}
}
uni.hideLoading();
that.showorder = true;
} else {
uni.hideLoading();
that.$queue.showToast('暂无可加钟项目');
}
} else {
uni.hideLoading();
that.$queue.showToast(res.msg);
}
})
},
goOrderJ(item) {//加钟 生成订单
let that = this
let data = {
parentId: that.order.ordersId,
artificerId: that.order.artificerId,
ordersMassageList: [{
massageId: item.massageTypeId,
num: 1,
}],
couponId: '',
userId: uni.getStorageSync('userId'),
addMassageTypeId:item.massageTypeId,
addEntryName:item.title
}
that.$Request.postJson("/app/artificer/insertOrders", data).then(res => {
that.showorder = false
if (res.code == 0) {
that.tordersId = res.data.ordersId;
that.tpayMoney = res.data.payMoney;
that.showpay = true;
that.paySel = 1;
} else {
that.$queue.showToast(res.msg)
}
});
},
goOrderS(item) {//升级 生成订单
let that = this
let data = {
classifyId:item.classifyId,
ordersId:that.order.ordersId,
massageTypeId:that.order.massageTypeId,
userPackageDetailId:that.order.userPackageDetailId,
ordersMassageList:[
{massageId: item.massageTypeId,num: 1},
],
}
that.$Request.postJson("/app/artificer/updateOrders", data).then(res => {
that.showorder = false
if (res.code == 0) {
that.tordersId = res.data.ordersId;
that.ordersId = res.data.ordersId;
that.tpayMoney = res.data.payMoney;
that.showpay = true;
that.paySel = 1;
} else {
that.$queue.showToast(res.msg)
}
});
},
// 支付订单
pay() {
let that = this
this.showpay = false
if (this.paySel != 0) {
this.payJZ();
return;
}
uni.showModal({
title: '付款提示',
content: '确认支付' + that.tpayMoney + '元吗?',
success: function(re) {
if (re.confirm) {
that.$queue.showLoading('支付中...')
console.log('用户点击确定');
if (that.openWay == 1) { //零钱支付
that.$Request.post("/app/artificer/payOrders", {
ordersId: that.tordersId,
}).then(res => {
uni.hideLoading();
if (res.code == 0) {
uni.showToast({
title: '支付成功'
})
that.getOrder()
that.showorder=false;
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
} else if (that.openWay == 2) { //微信支付
that.$queue.showLoading('支付中...')
// #ifdef MP-WEIXIN
let data = {
ordersId: that.order.ordersId,
type: 3
}
that.$Request.post('/app/wxPay/payOrder', data).then(ret => {
console.log(ret)
if (ret.code == 0) {
uni.hideLoading();
uni.requestPayment({
provider: 'wxpay',
timeStamp: ret.data.timestamp,
nonceStr: ret.data.noncestr,
package: ret.data.package,
signType: ret.data.signType,
paySign: ret.data.sign,
success: function(ret) {
uni.showToast({
title: '支付成功'
})
that.getOrder()
that.showorder=false;
// this.$queue.showToast('支付成功');
// uni.switchTab({
// url: '/pages/my/index'
// })
},
fail: function(err) {
// this.$queue.showToast('支付失败');
uni.showToast({
title: '支付失败',
icon: 'nones'
});
that.getOrder()
}
});
}
});
// #endif
// #ifdef H5
let ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') != -1) {
let data = {
ordersId: that.order.ordersId,
type: 2
}
that.$Request.post('/app/wxPay/payOrder', data).then(rea => {
that.showpay = false
if (rea.code == 0) {
uni.showToast({
title: '支付成功'
})
that.getOrder()
that.showorder=false;
that.callPay(rea.data);
} else {
uni.showToast({
title: rea.msg,
icon: 'none'
})
}
});
} else {
let data = {
ordersId: that.order.ordersId,
type: 4
}
// debugger;
that.$Request.post('/app/wxPay/payOrder', data).then(rea => {
// const urlArr = window.location.href;
// const hostUrl = urlArr.split("/");
// const callBack = hostUrl[0] + "//" + hostUrl[2] + "/";
// const url = '&redirect_url=' + callBack + 'my/order/pay';
// window.location = rea.mweb_url + url
that.showpay = false
if (rea.code == 0) {
uni.showToast({
title: '支付成功'
})
that.getOrder()
that.showorder=false;
const urlArr = window.location.href;
const hostUrl = urlArr.split("/");
const callBack = hostUrl[0] + "//" + hostUrl[2] + "/";
const url = '&redirect_url=' + callBack + 'my/order/pay';
window.location = rea.data.mweb_url + url
} else {
uni.showToast({
title: rea.msg,
icon: 'none'
})
}
});
}
// #endif
// #ifdef APP
let data = {
ordersId: that.order.ordersId,
type: 1
}
that.$Request.post('/app/wxPay/payOrder', data).then(rea => {
console.log(rea)
that.showpay = false
if (rea.code == 0) {
uni.showToast({
title: '支付成功'
})
that.getOrder()
that.showorder=false;
that.isCheckPay(rea.code, 'wxpay', JSON.stringify(rea.data));
}
});
// #endif
} else if (that.openWay == 3) { //支付宝支付
that.$queue.showLoading('支付中...')
// #ifdef H5
let data = {
ordersId: that.order.ordersId,
type: 2
}
that.$Request.post('/app/aliPay/payOrder', data).then(
rea => {
uni.showToast({
title: '支付成功'
})
that.getOrder()
that.showorder=false;
const div = document.createElement('div')
div.innerHTML = rea.data //此处form就是后台返回接收到的数据
document.body.appendChild(div)
document.forms[0].submit()
});
// #endif
// #ifdef APP-PLUS
let data = {
ordersId: that.order.ordersId,
type: 1
}
that.$Request.post('/app/aliPay/payOrder', data).then(
rea => {
uni.showToast({
title: '支付成功'
})
that.getOrder()
that.showorder=false;
that.setPayment('alipay', rea.data);
});
// #endif
}
} else if (re.cancel) {
uni.hideLoading();
console.log('用户点击取消');
}
}
})
},
getTimeStampWithoutSeconds(date) {
// 将日期转换为标准的UTC时间
var utcDate = new Date(
date.getUTCFullYear(),
date.getUTCMonth(),
date.getUTCDate(),
date.getUTCHours(),
date.getUTCMinutes(),
0);
// 返回不含秒的时间戳
return utcDate.getTime();
},
getOrder() {
let data = {
ordersId: this.ordersId
}
this.$Request.get('/app/artificer/selectOrdersDetails', data).then(res => {
if (res.code == 0) {
this.loading = false
uni.hideLoading()
this.order = res.data;
if(res.data["technicianType"] == 3){
this.order["technicianTypeName"] = "新手"
}
if(res.data["technicianType"] == 4){
this.order["technicianTypeName"] = "专家"
}
if(res.data["technicianType"] == 5){
this.order["technicianTypeName"] = "资深"
}
var date = new Date(); // 当前日期和时间
var timestamp = this.getTimeStampWithoutSeconds(date); // 不含秒的时间戳
const twoHoursInMilliseconds = 2 * 60 * 60 * 1000; // 两个小时的毫秒数
var twoTime=parseInt(new Date(twoHoursInMilliseconds).getTime())
var time=parseInt(new Date(this.order.serveTime).getTime())
if(time-timestamp>twoTime){
this.$set(this.order, 'btnShow', 'true')
}else{
this.$set(this.order, 'btnShow', 'false')
}
console.log("sadasdsa0",this.order)
let aliphone = this.$queue.getData('aliphone');
if (aliphone === '是' && this.order.artificer) {
this.ysPhone(this.order.phone, this.order.artificer.phone);
}
}
})
},
closePopupQ(type){//提前结束 关闭弹出框
this.type = type
this.$refs.popupQ.close(type);
},
toggleQ(type,item) {//确认拒单 弹出框
this.qurenJd=item;
this.type = type
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popupQ.open(type)
},
TuiPopup(typeTxte,type){//确认拒单 全额退款.同意按钮 关闭弹出框
this.type = typeTxte
let data = {
ordersId: this.qurenJd.ordersId,
isAuto: '0',
type: type
}
this.$Request.post('/app/artificer/cancelSupplementOrders', data).then(res => {
if (res.code == 0) {
uni.showToast({
title:'操作完成!'
})
this.getOrder()
this.$refs.popupQ.close(typeTxte);
}else{
this.getOrder()
uni.showToast({
icon:'error',
title:'操作失败!'
})
}
}).catch(() => {
this.getOrder()
//联网失败, 结束加载
});
},
closePopup(type){//提前结束 关闭弹出框
this.type = type
this.$refs.popup.close(type);
},
textareaInp(e){//提前结束 输入框
this.earlyFinishReason=e.detail.value;
console.log("earlyFinishReason",this.earlyFinishReason)
},
tiqian(type){//提前结束 确认按钮
var that=this;
that.type = type;
if(that.earlyFinishReason){
uni.getLocation({
type: 'wgs84',
success: function (resa) {
var longitude=resa.longitude;
var latitude=resa.latitude;
console.log('当前位置的经度:' + resa.longitude);
console.log('当前位置的纬度:' + resa.latitude);
let data = {
ordersId: that.tiqianData.ordersId,
accomplishLongitude:longitude,
accomplishLatitude:latitude,
earlyFinishReason: that.earlyFinishReason,
}
that.$queue.showLoading('提交中...')
that.$Request.post('/app/artificer/accomplishOrders', data).then(res => {
if (res.code == 0) {
uni.showToast({
title:'操作完成!'
})
that.getOrder()
that.$refs.popup.close(type);
uni.switchTab({
url:'/pages/order/index'
})
uni.hideLoading();
}else{
that.getOrder()
uni.showToast({
icon:'error',
title:'操作失败!'
})
uni.hideLoading();
}
}).catch(() => {
//联网失败, 结束加载
that.getOrder()
});
},
fail: function(e) {
that.getOrder()
// #ifdef H5
uni.showToast({
title:'获取地址失败!'
})
// #endif
// #ifdef APP-PLUS
that.checkPermission();
// #endif
}
});
}else{
uni.showToast({
icon:'error',
title:'请输入提前结束原因!'
})
}
},
toggle(type,item) {//提前结束 弹出框
this.tiqianData=item;
this.type = type;
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.open(type);
},
gengBtn(){
this.btnShow=!this.btnShow
},
goChat() {
let kefu = this.$queue.getData('kefu'); // 用户端联系方式 1 手机号 2企业微信
let kefuPhone = this.$queue.getData('kefuPhone');
if (uni.getStorageSync('token')) {
if (kefu == 1) {
uni.makePhoneCall({
phoneNumber: kefuPhone //仅为示例
});
} else if (kefu == 3) {
uni.navigateTo({
url: '/my/setting/customer'
});
} else {
// #ifdef MP-WEIXIN
let that = this
try {
wx.openCustomerServiceChat({
extInfo: {
url: that.$queue.getData('kefuUrl')
},
corpId: that.$queue.getData('kefuAppId'),
success(res) {},
fail(res) {
console.error(res)
}
})
} catch (error) {
console.error("catchcatch" + error)
uni.showToast({
title: '请更新至微信最新版本'
});
}
// #endif
// #ifndef MP-WEIXIN
let url = this.$queue.getData('kefuUrl');
if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
uni.navigateTo({
url
});
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
// #endif
}
} else {
uni.showModal({
title: '提示',
content: '您还未登录,请先登录',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
uni.navigateTo({
url: '/pages/public/login'
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
},
copy(num) {
uni.setClipboardData({
data: num,
success: r => {
this.$queue.showToast('复制成功');
}
});
},
payJZ() {
let that = this;
uni.showModal({
title: '付款提示',
content: '确认支付' + that.tpayMoney + '元吗?',
success: function(re) {
if (re.confirm) {
that.$queue.showLoading('支付中...')
// console.log('用户点击确定');
if (that.openWay == 1) { //零钱支付
that.$Request.post("/app/artificer/payOrders", {
ordersId: that.tordersId,
}).then(ret => {
uni.hideLoading();
if (ret.code == 0) {
uni.showToast({
title: '支付成功',
icon: 'none'
})
that.getOrder()
} else {
uni.showToast({
title: ret.msg,
icon: 'none'
})
}
});
} else if (that.openWay == 2) { //微信支付
// #ifdef MP-WEIXIN
let data = {
ordersId: that.ordersId,
type: 3
}
that.$Request.post('/app/wxPay/payOrder', data).then(ret => {
console.log(ret)
if (ret.code == 0) {
uni.hideLoading();
uni.requestPayment({
provider: 'wxpay',
timeStamp: ret.data.timestamp,
nonceStr: ret.data.noncestr,
package: ret.data.package,
signType: ret.data.signType,
paySign: ret.data.sign,
success: function(ret) {
uni.showToast({
title: '支付成功',
icon: 'none'
})
that.getOrder()
// this.$queue.showToast('支付成功');
// uni.switchTab({
// url: '/pages/my/index'
// })
},
fail: function(err) {
// this.$queue.showToast('支付失败');
uni.showToast({
title: '支付失败',
icon: 'nones'
});
that.getOrder()
}
});
}
});
// #endif
// #ifdef H5
let ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') != -1) {
let data = {
ordersId: that.ordersId,
type: 2
}
that.$Request.post('/app/wxPay/payOrder', data).then(rea => {
that.showpay = false
if (rea.code == 0) {
uni.showToast({
title: '支付成功',
icon: 'none'
})
that.getOrder()
that.callPay(rea.data);
} else {
uni.showToast({
title: rea.msg,
icon: 'none'
})
}
});
} else {
let data = {
ordersId: that.ordersId,
type: 4
}
that.$Request.post('/app/wxPay/payOrder', data).then(rea => {
that.showpay = false
if (rea.code == 0) {
uni.showToast({
title: '支付成功',
icon: 'none'
})
that.getOrder()
const urlArr = window.location.href;
const hostUrl = urlArr.split("/");
const callBack = hostUrl[0] + "//" + hostUrl[2] + "/";
const url = '&redirect_url=' + callBack + 'my/order/pay';
window.location = rea.data.mweb_url + url
} else {
uni.showToast({
title: rea.msg,
icon: 'none'
})
}
});
}
// #endif
// #ifdef APP
let data = {
ordersId: that.order.ordersId,
type: 1
}
that.$Request.post('/app/wxPay/payOrder', data).then(rea => {
console.log(rea)
that.showpay = false
if (rea.code == 0) {
uni.showToast({
title: '支付成功',
icon: 'none'
})
that.getOrder()
that.isCheckPay(rea.code, 'wxpay', JSON.stringify(rea.data));
}
});
// #endif
} else if (that.openWay == 3) { //支付宝支付
// #ifdef H5
let data = {
ordersId: that.ordersId,
type: 2
}
that.$Request.post('/app/aliPay/payOrder', data).then(
rea => {
that.showpay = false
uni.showToast({
title: '支付成功',
icon: 'none'
})
that.getOrder()
const div = document.createElement('div')
div.innerHTML = rea.data //此处form就是后台返回接收到的数据
document.body.appendChild(div)
document.forms[0].submit()
});
// #endif
// #ifdef APP-PLUS
let data = {
ordersId: that.ordersId,
type: 1
}
that.$Request.post('/app/aliPay/payOrder', data).then(
rea => {
that.showpay = false
uni.showToast({
title: '支付成功',
icon: 'none'
})
that.getOrder()
that.setPayment('alipay', rea.data);
});
// #endif
}
} else if (re.cancel) {
that.getOrder()
}
}
})
},
//支付选择
selectWay: function(item) {
this.openWay = item.id;
},
//换算年龄
getAge(e) {
console.log('出生日期:' + e)
this.birthDate = e
//创建系统日期
var today = new Date();
//把出生日期转换成日期
this.birthDate = new Date(this.birthDate);
//分别获取到年份后相减
this.age = today.getFullYear() - this.birthDate.getFullYear();
// console.log(this.age+'当前年龄')
},
// 修改订单地址
undateAdd(order) {
if (order.state == 0) {
uni.navigateTo({
url: '../address/address?order=' + order.ordersId + '&id=' + 3
})
}
},
// 一键导航
bindGps(latitude, longitude, name, detailsadd) {
console.log(latitude, longitude, name, detailsadd)
uni.openLocation({
latitude: latitude - 0, //要去的纬度-地址
longitude: longitude - 0, //要去的经度-地址
name: name, //地址名称
address: detailsadd, //详细地址名称
success: function() {
console.log('导航成功');
},
fail: function(error) {
console.log(error)
}
});
},
ysPhone(phoneA, phoneB) {
this.$Request.getT('/app/user/insertVirtualPhone?phoneA=' + phoneA + '&phoneB=' + phoneB).then(res => {
if (res.code == 0) {
this.order.artificer.phone = res.data;
}
});
},
// 拨打电话
bindphone(phone) {
let that = this
uni.showModal({
title: '提示',
content: '是否拨打电话',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定', phone);
uni.makePhoneCall({
phoneNumber: phone //仅为示例
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
goNav(e,item) {
this.$queue.setData('xiangmu',item);
uni.navigateTo({
url: e
})
},
delOrder(e) {
let that = this
uni.showModal({
title: '提示',
content: '确定删除订单吗?',
success: function(res) {
if (res.confirm) {
let data = {
ordersId: e.ordersId,
}
that.$queue.showLoading('删除中...')
that.$Request.post('/app/artificer/removeOrders', data).then(res => {
uni.hideLoading();
if (res.code == 0) {
uni.showToast({
name: "删除成功"
})
uni.navigateBack()
} else {
that.$queue.showToast(res.msg);
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
getIsVip() {
this.$Request.get("/app/UserVip/isUserVip").then(res => {
if (res.code == 0) {
this.isVip = res.data
uni.setStorageSync('isVIP', res.data)
}
});
},
openpay(item) {
uni.navigateTo({
url:'/my/order/payModifyDzhifu?ordersId='+item.ordersId
})
// this.showpay = true
},
callPay: function(response) {
if (typeof WeixinJSBridge === "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
}
} else {
this.onBridgeReady(response);
}
},
onBridgeReady: function(response) {
let that = this;
if (!response.package) {
return;
}
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": response.appid, //公众号名称,由商户传入
"timeStamp": response.timestamp, //时间戳自1970年以来的秒数
"nonceStr": response.noncestr, //随机串
"package": response.package,
"signType": response.signType, //微信签名方式:
"paySign": response.sign //微信签名
},
function(res) {
if (res.err_msg === "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok但并不保证它绝对可靠。
uni.hideLoading();
uni.showToast({
title: '支付成功',
icon: 'none'
})
that.getOrder()
} else {
uni.hideLoading();
}
WeixinJSBridge.log(response.err_msg);
}
);
},
isCheckPay(code, name, order) {
if (code == 0) {
this.setPayment(name, order);
} else {
uni.hideLoading();
uni.showToast({
title: '支付信息有误'
});
}
},
setPayment(name, order) {
let that = this
uni.requestPayment({
provider: name,
orderInfo: order, //微信、支付宝订单数据
success: function(res) {
uni.hideLoading();
uni.showToast({
title: '支付成功',
icon: 'none'
})
that.getOrder()
},
fail: function(err) {
uni.hideLoading();
},
complete() {
uni.hideLoading();
}
});
},
cancelOrders(data){//取消订单
let that = this
that.$Request.post('/app/artificer/deleteOrders', data).then(res => {
uni.hideLoading();
if (res.code == 0) {
that.page = 1;
uni.showToast({
title:'操作成功!'
})
that.getOrder()
} else {
that.$queue.showToast(res.msg);
}
})
},
// 取消订单待确认
cancelOrder(e) {
let that = this
let data = {
ordersId: e.ordersId
}
//取消订单扣费
that.$Request.post('/app/artificer/cancelOrdersMoney', data).then(resa => {
uni.hideLoading();
if (resa.code == 0) {
that.page = 1;
uni.showModal({
title: '温馨提示',
content: '是否确认取消订单?' + resa.data,
success: function(res) {
if (res.confirm) {
that.cancelOrders(data)
that.$queue.showLoading('取消中...')
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
} else {
that.$queue.showToast(res.msg);
}
})
},
// 完成订单
cancel(e) {
let that = this
uni.showModal({
title: '提示',
content: '确认完成订单吗?',
success: function(res) {
if (res.confirm) {
let data = {
ordersId: e.ordersId,
}
that.$queue.showLoading('提交中...')
that.$Request.post('/app/artificer/accomplishOrders', data).then(res => {
uni.hideLoading();
if (res.code == 0) {
uni.navigateBack()
} else {
that.$queue.showToast(res.msg);
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
goMsg() {
let data = {
userId: uni.getStorageSync('userId'),
focusedUserId: this.order.user.userId
}
this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
if (res.code == 0) {
let id = this.order.user.userId == res.data.userId ? res.data.focusedUserId : this.order
.user.userId
uni.navigateTo({
url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
'&byUserId=' + id
})
}
})
},
}
}
</script>
<style lang="scss" scoped>
.eject-btns{
height:60rpx;
line-height: 60rpx;
border-bottom: 1px solid #f7f7f7;
padding: 0 20rpx;
color: #666666;
}
.be-remarks{
border: 1px dashed #FE912E;
padding: 10rpx 20rpx;
border-radius: 8rpx;
color: #fe912E;
font-size: 24rpx;
margin: 10px 0px;
}
.dingshi,.btns{
width: 0px !important;
padding: 0px 42px !important;
}
/deep/.padding-bottom{
padding-bottom: 0px;
}
/deep/.u-drawer{
z-index:11 !important;
}
.xiangmu-cont-top-left{
font-weight: normal;
font-size: 21rpx;
color: #049E89;
margin-top: 1px;
}
.xiangmu-cont-top-time{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.xiadan{
width: 122rpx;
height: 48rpx;
line-height: 48rpx;
background: linear-gradient(90deg, #019C88, #0FA78B, #35C495);
border-radius: 24rpx;
text-align: center;
font-weight: bold;
font-size: 24rpx;
color: #FFFFFF;
}
.xiangmu-foot-left{
display: flex;
flex-direction: row;
align-items: flex-end;
}
.xiangmu-foot-left-shiji span{
color: #F95900;
}
.xiangmu-foot-left-shiji span:nth-child(1){
font-size: 25rpx;
}
.xiangmu-foot-left-shiji span:nth-child(2){
font-weight: bold;
font-size:36.81rpx;
}
.xiangmu-foot-left-shiji span:nth-child(3){
font-size: 25rpx;
}
.xiangmu-foot-left-dazhe{
font-weight: bold;
font-size: 31rpx;
color: #848484;
text-decoration-line: line-through;
margin-left:5px;
}
.xiangmu-foot{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.xiangmu-about{
width: 100%;
text-align: left;
font-weight: 400;
font-size: 22rpx;
color: #848484;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
margin: 5px 0px;
}
.xiangmu-cont-top-title{
font-weight: bold;
font-size: 33rpx;
color: #333333;
}
.xiangmu-cont-top{
width: 100%;
display: flex;
flex-direction: column;
}
.xiangmu-cont{
width: 55%;
display: flex;
flex-direction: column;
align-items: center;
}
.xiangmu-img{
width: 285rpx;
height: 218rpx;
background: #9F9F9F;
border-radius: 14rpx;
}
.xiangmu{
width: 94%;
height: 263rpx;
background: #FFFFFF;
border-radius:50rpx;
margin: 0px auto 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.popup-mian-btn span:nth-child(1){
background: linear-gradient(90deg, #FE912E, #FF9970);
}
.popup-mian-btn span:nth-child(2){
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
}
.popup-mian-btn span{
width: 247rpx;
height: 77rpx;
line-height: 77rpx;
text-align: center;
font-weight: 400;
font-size: 32rpx;
color: #FFFEFE;
border-radius: 39rpx;
}
.popup-mian-btn{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.popup-mian-textarea{
width: 525.69rpx;
height: 211.81rpx;
}
.popup-mian{
width: 88%;
display: flex;
flex-direction: column;
margin: 5px auto 0px auto;
}
.popup-head span:nth-child(2){
width: 50rpx;
height: 50rpx;
}
.popup-head span:nth-child(1){
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.popup-head{
width: 100%;
height: 99.38rpx;
background-color: rgba(21, 171, 141, 0.09);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 15px;
}
.popup-content{
width: 613rpx;
height: 479rpx;
background: #FFFFFF;
border-radius: 40rpx;
display: flex;
flex-direction: column;
}
/deep/.btns{
color: #019C88 !important;
margin-left: 10rpx !important;
height:64rpx;
font-size: 28rpx;
}
/deep/.u-size-default{
margin: 5px 0px 0px 0px;
}
.showbtn-line{
display: flex;
flex-direction: row;
align-items: center;
}
.showBtn-mian{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.gengduo{
font-weight: 400;
font-size: 28rpx;
color: #7D7D7D;
margin-left: 26rpx;
}
.showBtnClass{
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
background-color: #ffffff;
padding: 10px;
bottom:90rpx;
left:50rpx;
box-shadow: 0px 0px 3px 0px #b5b5b5;
border-radius: 10rpx;
}
.showBtnClass:before {
position: absolute;
left: 20rpx;
bottom:-12rpx;
width: 20rpx;
height: 20rpx;
background: #ffffff;
margin-top: -2px;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
content: '';
}
.showBtn{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.hideBtn{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
.dingshi{
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
}
.zhuangtai{
color: #029D88;
font-weight: bold;
font-size: 32rpx;
}
.head-title-right{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-weight: bold;
}
.fei-view-list span,.fei-view-list-z span{
font-weight: bold;
font-size: 25rpx;
}
.fei-view-list-z{
height: 65rpx;
background-color: rgba(247, 247, 247, 0.8);
border-radius: 33rpx;
padding: 0px 5px;
}
.fei-view-list span:nth-child(1),.fei-view-list-z span:nth-child(1){
color: #666666;
}
.fei-view-list span:nth-child(2){
color: #333333;
}
.fei-view-list,.fei-view-list-z{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 5px;
}
.fei-view{
width: 100%;
display: flex;
flex-direction: column;
}
.fei-title{
width: 100%;
text-align: center;
font-weight: bold;
font-size: 29rpx;
color: #333333;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #E5E5E5;
}
.feiuong{
padding: 29rpx;
}
/deep/.uni-textarea-textarea{
font-weight: 400;
font-size: 25rpx;
}
/deep/.uni-textarea-placeholder{
font-weight: 400;
font-size: 25rpx;
color: #C5C5C5;
}
.textarea-pay-list{
width: 100%;
height: 120px;
margin-top: 10px;
margin-bottom:10px;
}
.textarea-pay{
background-color: #f3f3f3;
width: 100%;
height: 100%;
background: #F3F3F3;
border-radius: 14rpx;
padding: 7px;
}
.list-pay{
width: 100%;
padding: 10rpx 29rpx;
margin-bottom: 40rpx;
}
.pay-ding-top{
width: 100%;
height: 100rpx;
background-image: linear-gradient(to bottom, rgba(219, 242, 238, 0.9), #fff);
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
padding: 0px 29rpx;
}
.pay-ding,.feiuong{
background-color: #ffffff;
border-radius: 24rpx;
margin-top: 24rpx;
// padding: 29rpx;
}
.phone-pay{
width: 49rpx;
height: 44rpx;
}
.d-title{
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.d-touxiang{
width: 55rpx;
height: 55rpx;
border-radius: 50%;
border: 1px solid #f2fffd;
}
.money-pay-jia{
font-weight: 400;
font-size: 25rpx;
color: #666666;
text-decoration-line: line-through;
margin-left: 5px;
}
.money-pay-zhen span{
color: #FF6000;
font-size: 32rpx;
font-weight: bold;
}
.money-pay-zhen{
display: flex;
flex-direction: row;
align-items: center;
}
.money-pay{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.head-top{
background-color: #ffffff;
border-radius: 24rpx;
padding: 29rpx;
}
.content{
padding-bottom: 140rpx;
padding-top: 20px;
width: 100%;
background-color: #f7f7f7;
}
.pay-title{
font-weight: bold;
font-size: 32rpx;
color: #333333;
margin-bottom: 12px;
}
.page {
background: #f7f7f7;
}
.jusitify-line{
height: 78rpx;
padding: 20rpx 0;
font-size: 30rpx;
display: flex;
justify-content: space-between;
}
.jusitify-line-end{
height:1px;
border-bottom: 1px #e5e5e5 solid;
margin: 30rpx 0;
}
.line-word{
color: #999;
}
.line-word-r{
color: #333;
}
.bgImg {
background-image: url('https://admin.sjajk.com/file/uploadPath/2023/01/03/02952e7260e553d0f3bb26a1cd154921.png');
background-size: 100% 1161rpx;
}
.bg {
background: linear-gradient(to right, #223845, #00a85b);
}
.list_item {
// width: 650upx;
// height: 160upx;
width: 92%;
// margin: 30rpx 0;
background: #FFFFFF;
border-radius: 24upx;
padding: 20upx;
display: flex;
margin-top: 26upx;
.listitem_rightview {
margin-left: 20upx;
width: 80%;
padding-top: 10rpx;
.btnview {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12upx;
width: 100%;
}
.titleview {
display: flex;
align-items: flex-end;
justify-content: space-between
}
.moneyview {
display: flex;
align-items: flex-end;
image {
width: 30upx;
height: 30upx;
margin-left: 20upx;
margin-bottom: 2upx;
}
}
.item_time {
font-size: 24upx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
margin-left: 10upx;
}
.item_money {
font-size: 32upx;
font-family: PingFang SC;
font-weight: 800;
color: #FF1200;
}
.item_oldmoney {
font-size: 24upx;
font-family: PingFang SC;
font-weight: 500;
text-decoration: line-through;
color: #999999;
margin-left: 10upx;
}
.item_btn {
width: 140upx;
height: 56upx;
background-color: #019C88;
border-radius: 16upx;
text-align: center;
line-height: 56upx;
font-size: 24upx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.item_yishou {
font-size: 22upx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
.item_title {
font-size: 28upx;
font-family: PingFang SC;
font-weight: bold;
color: #1E1F31;
}
}
image {
width: 220upx;
height: 160upx;
border-radius: 24upx;
}
}
.jz_btn {
width: 170rpx;
height: 56upx;
background: #096f4b;
margin-left: 40rpx;
border-radius: 35rpx;
line-height: 56upx;
text-align: center;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
.tabber {
width: 100%;
background: #ffffff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
height: 110rpx;
padding: 0 30rpx;
border-top: 1px solid #f5f5f5;
}
.box {
/* border: 1px solid #005dff; */
background: #E8FAE1;
border-radius: 4rpx;
color: #096f4b;
padding: 5upx 10upx;
font-size: 22rpx;
margin-top: 10rpx;
}
.popup_pay {
width: 100%;
position: relative;
padding-bottom: 45rpx;
/* height: 160px; */
/* #ifndef MP-WEIXIN */
/* height: 130px; */
/* #endif */
}
.pay_btn {
width: 90%;
margin: 0 auto;
text-align: center;
background: linear-gradient(to right, #223845, #00a85b);
height: 80rpx;
border-radius: 60rpx;
color: #ffffff;
line-height: 80rpx;
}
.serverAddress {
display: flex;
justify-content: space-between;
align-items: center;
}
.level_button{
background: #019C88;
border-radius: 20rpx 8rpx 20rpx 8rpx;
padding: 10rpx 20rpx;
color: #fff;
font-size: 12px;
}
.justify-title-nav{
width: 90%;
display: flex;
flex-direction: column;
position: relative;
margin: 10px 0;
}
.justify-title{
font-weight: bold;
font-size: 32rpx;
color: #333;
}
.justify-title-nav-bor{
width: 64px;
height: 5px;
border-radius: 3px;
position: absolute;
bottom: 0;
background: linear-gradient(90deg, rgba(234, 248, 245, 0.7), rgba(132, 211, 196, 0.7));
}
.head-title{
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.title-font{
font-size: 30rpx;
color: #666666;
}
.value-font{
font-size: 30rpx;
color: #333333;
}
.add-content{
background: #fff;
padding: 30rpx;
border-radius: 24rpx;
margin-top: 24rpx;
}
</style>