|
|
@@ -0,0 +1,987 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+
|
|
|
+ <view class="top">
|
|
|
+
|
|
|
+ <view class="nav" :style="{top: iStatusBarHeight + 'px'}">
|
|
|
+ <view>
|
|
|
+ <image src="../../static/img/baiback22.png" mode="" class="gobackImg" @click="goback"></image>
|
|
|
+ <!-- <image src="../../static/img/baigoindex22.png" mode="" class="goIndexImg" @click="goIndex()"></image> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view>订单详情</view>
|
|
|
+ <view style="width: 92rpx;"></view>
|
|
|
+ </view>
|
|
|
+ <view style="height: 44px;"></view>
|
|
|
+ <view class="SheetState" v-if="orderData.SheetState==1">等待付款</view>
|
|
|
+ <view class="SheetState" v-if="orderData.SheetState==2">请尽快到店享受服务</view>
|
|
|
+ <view class="SheetState" v-if="orderData.SheetState==3||orderData.SheetState==5">订单已完成</view>
|
|
|
+ <view class="SheetState" v-if="orderData.SheetState==0">订单已取消</view>
|
|
|
+ <view class="SheetState" v-if="orderData.SheetState==4">订单已完成</view>
|
|
|
+ </view>
|
|
|
+ <view v-if="orderData">
|
|
|
+ <!-- 服务确认码 -->
|
|
|
+ <view class="orderTop" v-if="orderData.SheetState==2 || orderData.SheetState==3 || orderData.SheetState==4 || orderData.SheetState==5">
|
|
|
+
|
|
|
+ <view class="maBox">
|
|
|
+
|
|
|
+ <view class="timeLeft">
|
|
|
+ <span>服务确认码</span>
|
|
|
+ </view>
|
|
|
+ <view style="text-decoration:line-through; color: #999999; font-size: 26rpx;"
|
|
|
+ v-if="orderData.SheetState==3 || orderData.SheetState==4 || orderData.SheetState==5 && orderData.ServiceCode!=null">{{orderData.ServiceCode}}</view>
|
|
|
+ <view class="rightShou" v-if="orderData.SheetState==2">
|
|
|
+ <view class="timeRight" style="color: #FF2400;" @click="showMa">收起</view>
|
|
|
+ <image src="../../static/img/icon_arrow_up_orange.png" style="width: 17rpx; height: 11rpx; margin-left:10rpx ;">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view style="color: #999999; font-size: 26rpx;" v-if="orderData.SheetState==3 || orderData.SheetState==4 || orderData.SheetState==5">已使用</view>
|
|
|
+ </view>
|
|
|
+ <!-- 确认码 -->
|
|
|
+ <view class="querenMa" v-if="isShowMa==true && orderData.SheetState==2">
|
|
|
+ <view style="color: #FF2400; font-size: 24rpx; text-align: center;">请到店出示券码即可开始服务</view>
|
|
|
+ <view class="maBoximg">
|
|
|
+ <tki-qrcode cid="qrcode1" ref="qrcode" :val="orderData.ServiceCode" :size="308" :unit="unit"
|
|
|
+ :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
|
|
|
+ :loadMake="loadMake" :usingComponents="true" @result="qrR" />
|
|
|
+ </view>
|
|
|
+ <view style="color: #333333; font-size: 26rpx; font-weight: bold; text-align: center;">
|
|
|
+ {{orderData.ServiceCode}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="orderTop">
|
|
|
+ <view class="timeBox">
|
|
|
+ <view class="timeLeft">
|
|
|
+ <span v-if="orderData.SheetState==1||orderData.SheetState==2||orderData.SheetState==0">预约到店：{{orderData.OrderTime}}</span>
|
|
|
+ <span v-else>服务时间：{{orderData.ServiceTime}}</span>
|
|
|
+ <image v-if="orderData.SheetState==1||orderData.SheetState==2" src="../../static/img/icon_edit.png" mode="" class="timeEditImg" @click="timeShowClick"></image>
|
|
|
+ </view>
|
|
|
+ <view class="timeRight" @click="qrcodeClick">订单码</view>
|
|
|
+ </view>
|
|
|
+ <view class="shopBox">
|
|
|
+ <image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
|
|
|
+ <view class="shopCont">
|
|
|
+ <view class="shopName">{{orderData.ShopName}}</view>
|
|
|
+ <view class="Address">
|
|
|
+ {{orderData.ProvinceName}}{{orderData.CityName}}{{orderData.AreaName}}{{orderData.Address}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="shopRightBox" @click="map">
|
|
|
+ <view> <image src="../../static/img/icon_ditu2.png" mode="" class="shopRightImg"></image> </view>
|
|
|
+ <view class="shopRihgtTxt">地图</view>
|
|
|
+ </view>
|
|
|
+ <view class="shopsx"></view>
|
|
|
+ <view class="shopRightBox" @click="call">
|
|
|
+ <view> <image src="../../static/img/icon_phone2.png" mode="" class="shopRightImg"></image> </view>
|
|
|
+ <view class="shopRihgtTxt">电话</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="people">
|
|
|
+ <image src="../../static/img/icon_ren.png" mode="" class="shopBoximg"></image>
|
|
|
+ <view class="peopleCont">{{orderData.ContactName}}</view>
|
|
|
+ <view class="peopleCont" style="padding-left: 20rpx;">{{orderData.ContactPhone}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="PlateNumberBox">
|
|
|
+ <image src="../../static/img/icon_che.png" mode="" class="shopBoximg"></image>
|
|
|
+ <view class="">
|
|
|
+ <view class="PlateNumberBoxTop">
|
|
|
+ <view class="PlateNumbercx"> <span v-if="orderData.Brand">{{orderData.Brand}}</span>
|
|
|
+ <span style="padding-left: 20rpx;" v-if="orderData.Series">{{orderData.Series}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="PlateNumber">{{orderData.PlateNumber}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="CarModel">{{orderData.CarModel}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: -40rpx;"></view>
|
|
|
+ <!-- 商品明细-->
|
|
|
+ <view class="detailedBox itemBox" v-if="orderData.goods.length!=0">
|
|
|
+ <view class="detailedTitle">商品明细</view>
|
|
|
+ <view class="detailedLineBox">
|
|
|
+ <view class="detailedLine" v-for="(item,index) in orderData.goods">
|
|
|
+ <view>
|
|
|
+ <image :src="item.Url" mode="" class="detailedImg" v-if="item.Url"></image>
|
|
|
+ <image src="../../static/img/noimg.png" mode="" class="detailedImg" v-else></image>
|
|
|
+ </view>
|
|
|
+ <view class="detailedCont">
|
|
|
+ <view class="detailedName">{{item.GoodsName}}</view>
|
|
|
+ <view class="detailedContBottom">
|
|
|
+ <span class="SalePrice">￥{{item.SalePrice}}</span>
|
|
|
+ <span>x{{item.SaleQty}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品明细-->
|
|
|
+ <!-- 项目明细 -->
|
|
|
+ <view class="detailedBox itemBox" v-if=" orderData.items.length!=0">
|
|
|
+ <view class="detailedTitle">项目明细</view>
|
|
|
+ <view class="detailedLineBox">
|
|
|
+ <view class="detailedLine" v-for="(item,index) in orderData.items">
|
|
|
+ <view>
|
|
|
+ <image :src="item.Url" mode="" class="detailedImg" v-if="item.Url"></image>
|
|
|
+ <image src="../../static/img/noitem.png" mode="" class="detailedImg" v-else></image>
|
|
|
+ </view>
|
|
|
+ <view class="detailedCont">
|
|
|
+ <view class="detailedName">{{item.ItemName}}</view>
|
|
|
+ <view class="detailedContBottom">
|
|
|
+ <span class="SalePrice">￥{{item.SalePrice}}</span>
|
|
|
+ <span>x1</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 项目明细 -->
|
|
|
+ <!-- 商品费 -->
|
|
|
+ <view class="goodscost">
|
|
|
+ <view class="goodscostLine">
|
|
|
+ <view class="goodscostTxt">商品费</view>
|
|
|
+ <view class="goodsCostNum">￥{{orderData.GoodsMoney}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="goodscostLine">
|
|
|
+ <view class="goodscostTxt">项目费</view>
|
|
|
+ <view class="goodsCostNum">￥{{orderData.ItemMoney}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="goodscostLine">
|
|
|
+ <view class="goodscostTxt">优惠券优惠</view>
|
|
|
+ <view class="goodsCostNum">-￥{{orderData.CouponMoney}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="goodscostLine">
|
|
|
+ <view class="goodscostTxt">实付款</view>
|
|
|
+ <view class="goodsCostNum" style="color: #FF4F00;">￥{{orderData.PayMoney}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品费 -->
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <view class="information">
|
|
|
+ <view class="detailedTitle">订单信息</view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">订单编号：</view>
|
|
|
+ <view class="informationNum">{{orderData.Code}}</view>
|
|
|
+ <view class="copyBtn" @click="copy(orderData.Code)">复制</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">下单人：</view>
|
|
|
+ <view class="informationNum">{{orderData.MemberName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">下单时间：</view>
|
|
|
+ <view class="informationNum">{{orderData.CreateTime}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">下单备注：</view>
|
|
|
+ <view class="informationNum">{{orderData.Comment}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <!-- 支付信息 -->
|
|
|
+ <view class="information">
|
|
|
+ <view class="detailedTitle">支付信息</view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">支付状态：</view>
|
|
|
+ <view class="informationNum" v-if="orderData.SheetState==2||orderData.SheetState==3||orderData.SheetState==4">已支付</view>
|
|
|
+ <view class="informationNum" v-if="orderData.SheetState==1">未支付</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">支付方式：</view>
|
|
|
+ <view class="informationNum">{{orderData.PayMethod==1?'线上支付':'线下支付'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">支付时间：</view>
|
|
|
+ <view class="informationNum" v-if="orderData.PayTime">{{orderData.PayTime}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 支付信息 -->
|
|
|
+ <view style="height: 150rpx;"></view>
|
|
|
+ <view class="orderBottom" v-if="orderData.SheetState==1||orderData.SheetState==2">
|
|
|
+ <view class="payBtn" v-if="orderData.SheetState!=2" @click="orderPay">立即支付</view>
|
|
|
+ <view class="cancelBtn" style="margin-right: 16rpx;" @click="cancelOrder">取消订单</view>
|
|
|
+ </view>
|
|
|
+ <view class="orderBottom" v-if="orderData.EvaluateState==1">
|
|
|
+ <view class="cancelBtn" style="margin-right: 16rpx;" @click="gopingjia">查看评价</view>
|
|
|
+ </view>
|
|
|
+ <view class="orderBottom" v-if="orderData.EvaluateState==0&&orderData.EState==1"><!-- 4 -->
|
|
|
+ <view class="payBtn" @click="evaluate">立即评价</view>
|
|
|
+ </view>
|
|
|
+ <!-- 二维码 -->
|
|
|
+ <view v-if="qrcodeShow" class="qrcodeBox" @click="qrcodeShow=false">
|
|
|
+ <view @click.stop="qrc">
|
|
|
+ <tki-qrcode cid="qrcode1" ref="qrcode" :val="qrcodeTopVal" :size="size" :unit="unit"
|
|
|
+ :pdground="pdground" :icon="icon" :iconSize="iconsize" pdground="#000000"
|
|
|
+ :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR"/>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 二维码 -->
|
|
|
+ <!-- 地图 -->
|
|
|
+
|
|
|
+ <!-- 地图 -->
|
|
|
+ <!-- 预约时间 -->
|
|
|
+ <view class="timeBox2" v-if="timeShow&&OrderTimes" @click="timeShow=false">
|
|
|
+ <view class="timeMain">
|
|
|
+ <view class="timeTop">
|
|
|
+ <view class="timeTopTitle">选择预约时间</view>
|
|
|
+ <view class="close" @click="timeShow=false">X</view>
|
|
|
+ </view>
|
|
|
+ <view class="timeCont">
|
|
|
+ <view class="timeLeft2">
|
|
|
+ <scroll-view scroll-y="true" class="timeSv">
|
|
|
+ <view class="timeleftLine" v-for="(item,index) in OrderTimes"
|
|
|
+ :class="{timeLeftActive:index==orderTimeIndex1}"
|
|
|
+ @click.stop="orderTimeIndex1=index,orderTimeIndex2=-1"
|
|
|
+ >{{item.date.substring(5,10)}}</view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="timeRight2">
|
|
|
+ <scroll-view scroll-y="true" class="timeSv">
|
|
|
+ <view class="timerightBox">
|
|
|
+ <view class="timesf" v-for="(item,index) in OrderTimes[orderTimeIndex1].timeList"
|
|
|
+ :class="{timesfNo:item.type!=1,timesfActive:index==orderTimeIndex2}"
|
|
|
+ @click.stop="timeSfCk(item,index)"
|
|
|
+ >
|
|
|
+ <view class="timeSfNum">{{item.time}}</view>
|
|
|
+ <view class="timeyy" v-if="item.type==1">可预约</view>
|
|
|
+ <view class="timeyy" v-if="item.type==2">已约满</view>
|
|
|
+ <view class="timeyy" v-if="item.type==3">已过期</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="timeBottom">
|
|
|
+ <view class="timecomplete" @click="timeCk">完成</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ tkiQrcode
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ location:'',
|
|
|
+ isload:false,
|
|
|
+ id:'',
|
|
|
+ iStatusBarHeight:'',
|
|
|
+ orderData:'',
|
|
|
+ type:'',
|
|
|
+ onval: true, // val值变化时自动重新生成二维码
|
|
|
+ loadMake: true, // 组件加载完成后自动生成二维码
|
|
|
+ size:500,
|
|
|
+ qrcodeShow:false,
|
|
|
+ qrcodeTop:'-100vh',
|
|
|
+ qrcodeTopVal:'',
|
|
|
+ ifShow: false,
|
|
|
+ val: '二维码', // 要生成的二维码值
|
|
|
+ unit: 'upx', // 单位
|
|
|
+ background: '#b4e9e2', // 背景色
|
|
|
+ foreground: '#309286', // 前景色
|
|
|
+ pdground: '#333333', // 角标色
|
|
|
+ icon: '', // 二维码图标
|
|
|
+ iconsize: 40, // 二维码图标大小
|
|
|
+ lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
|
|
+ src: '' ,// 二维码生成后的图片地址或base64
|
|
|
+ timeShow:false,
|
|
|
+ orderTime:'',
|
|
|
+ OrderTimes:'',
|
|
|
+ orderTimeIndex1:0,
|
|
|
+ orderTimeIndex2:-1,
|
|
|
+ isShowMa: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
|
+ this.location=uni.getStorageSync("location");
|
|
|
+ this.id=opt.id
|
|
|
+ this.getData()
|
|
|
+ this.type=opt.type;
|
|
|
+ this.getOrderTimes();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if(this.id){
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showMa() {
|
|
|
+ this.isShowMa = !this.isShowMa
|
|
|
+ },
|
|
|
+ gopingjia(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'../me/myAppraiseDetail?id='+this.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ timeShowClick(){
|
|
|
+ if(this.OrderTimes){
|
|
|
+ this.timeShow=true
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: '当前店铺尚未设置可预约时间',
|
|
|
+ icon:'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ map(){
|
|
|
+ console.log("打开地图")
|
|
|
+ var that=this;
|
|
|
+ if(!that.orderData.Lat||!that.orderData.Lng){
|
|
|
+ uni.showToast({
|
|
|
+ title: '该店铺未设置定位',
|
|
|
+ icon:'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.openLocation({
|
|
|
+ latitude:Number(that.orderData.Lat) ,
|
|
|
+ longitude:Number( that.orderData.Lng),
|
|
|
+ name:that.orderData.ShopName,
|
|
|
+ address:that.orderData.Address,
|
|
|
+ success: function () {
|
|
|
+ console.log('success');
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ qrR(){
|
|
|
+
|
|
|
+ },
|
|
|
+ qrc(){
|
|
|
+ console.log(111)
|
|
|
+ },
|
|
|
+ call(){
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.orderData.MobilePhone
|
|
|
+ });
|
|
|
+ },
|
|
|
+ qrcodeClick(){
|
|
|
+ this.ifShow=true;
|
|
|
+ this.qrcodeShow=true;
|
|
|
+ this.qrcodeTopVal=this.orderData.Code;
|
|
|
+ //this.$refs.qrcode._makeCode()
|
|
|
+
|
|
|
+ },
|
|
|
+ copy(txt){
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: txt,
|
|
|
+ success: function () {
|
|
|
+ uni.showToast({
|
|
|
+ title: '复制成功',
|
|
|
+ icon:'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getData(){
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+
|
|
|
+ this.$http('miniAppMyBMemberCar/queryMiniAppSheetDetail', {
|
|
|
+ lat:this.location.lat,
|
|
|
+ lng:this.location.lng,
|
|
|
+ id:this.id,
|
|
|
+ },'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.orderData=res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goback(){
|
|
|
+ if(this.type==2){
|
|
|
+ uni.switchTab({
|
|
|
+ url:'../index/index'
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ uni.navigateBack({})
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ evaluate(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'evaluate?sheetID='+this.id+'&shopID='+this.orderData.ShopID
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goIndex(){
|
|
|
+ uni.switchTab({
|
|
|
+ url:'../index/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancelOrder(){
|
|
|
+ var that=this;
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定要取消订单吗',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+ that.$http('miniAppMyBMemberCar/updateBMSheetState', {
|
|
|
+ id:that.orderData.ID
|
|
|
+ },'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if(that.orderData.SheetState!=1){
|
|
|
+ uni.showModal({
|
|
|
+ title: '订单取消成功，请等待银行处理',
|
|
|
+ content: '金额将原路退还至您的账户。若您使用了优惠券，将退至您的账户',
|
|
|
+ showCancel:false,
|
|
|
+ success: function (res) {
|
|
|
+ that.getData()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '订单取消成功',
|
|
|
+ showCancel:false,
|
|
|
+ success: function (res) {
|
|
|
+ that.getData()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // that.getData()
|
|
|
+ })
|
|
|
+ } else if (res.cancel) {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ orderPay(){
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+ var that=this;
|
|
|
+ this.$http('miniApp/maintainOrder/orderPay', {
|
|
|
+ sheetID:this.orderData.ID
|
|
|
+ },'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ var payInfo=JSON.parse(res.data.payInfo)
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: 'wxpay',
|
|
|
+ // timeStamp: String(Date.now()),
|
|
|
+ timeStamp:payInfo.timeStamp,
|
|
|
+ nonceStr: payInfo.nonceStr,
|
|
|
+ package: payInfo.package,
|
|
|
+ signType: payInfo.signType,
|
|
|
+ paySign: payInfo.paySign,
|
|
|
+ success: function (res) {
|
|
|
+ console.log('success:' + JSON.stringify(res));
|
|
|
+ uni.showToast({
|
|
|
+ title: '支付成功',
|
|
|
+ icon:'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ that.getData()
|
|
|
+ },
|
|
|
+ fail: function (err) {
|
|
|
+ console.log('fail:' + JSON.stringify(err));
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ timeSfCk(item,index){
|
|
|
+ if(item.type==1){
|
|
|
+ this.orderTimeIndex2=index;
|
|
|
+ var orderTime=this.OrderTimes[this.orderTimeIndex1].date +' '+ item.time
|
|
|
+ this.orderTime=orderTime
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ timeCk(){
|
|
|
+ this.timeShow=false;
|
|
|
+ this.$http('miniApp/maintainOrder/changeOrderTime', {
|
|
|
+ id:this.id,
|
|
|
+ orderTime:this.orderTime
|
|
|
+ },'POST').then(res => {
|
|
|
+ if(res.code==0){
|
|
|
+ uni.showToast({
|
|
|
+ title: '修改成功',
|
|
|
+ icon:'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.getData()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOrderTimes(){
|
|
|
+ this.$http('miniApp/maintainOrder/getOrderTimes', {
|
|
|
+
|
|
|
+ },'GET').then(res => {
|
|
|
+
|
|
|
+ this.OrderTimes=res.data;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.getOrderTimes()
|
|
|
+ this.getData()
|
|
|
+ setTimeout(function () {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .box{
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F4F5F7;
|
|
|
+ }
|
|
|
+ .status_bar{
|
|
|
+ background: #FF4F00;
|
|
|
+ width: 100vw;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1111;
|
|
|
+ }
|
|
|
+ .qrcodeBox{
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0,0,0,0.7);
|
|
|
+ }
|
|
|
+ .top{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 242rpx;
|
|
|
+ background: #FF4F00;
|
|
|
+ /* background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%); */
|
|
|
+ }
|
|
|
+ .nav{
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1111;
|
|
|
+ background: #FF4F00;
|
|
|
+ }
|
|
|
+ .gobackImg{
|
|
|
+ width: 92rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ /* padding: 12px; */
|
|
|
+
|
|
|
+ }
|
|
|
+ .SheetState{
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderTop{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 20rpx 24rpx;
|
|
|
+ }
|
|
|
+ .timeEditImg{
|
|
|
+ width: 25rpx;height: 25rpx;padding-left: 20rpx;
|
|
|
+ }
|
|
|
+ .timeLeft{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #3C3C3C;font-weight: 500;
|
|
|
+ }
|
|
|
+ .timeRight{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #3F90F7;
|
|
|
+ }
|
|
|
+ .timeBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24rpx 20rpx;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+ .orderTop{
|
|
|
+ position: relative;
|
|
|
+ top: -44rpx;
|
|
|
+ }
|
|
|
+ .shopBoximg{
|
|
|
+ width: 40rpx;height: 40rpx;
|
|
|
+ }
|
|
|
+ .shopRightImg{
|
|
|
+ width: 52rpx;height: 38rpx;
|
|
|
+ }
|
|
|
+ .shopsx{
|
|
|
+ width: 1px;
|
|
|
+ height: 50rpx;
|
|
|
+ background: #EEEEEE;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-left: 28rpx;
|
|
|
+ }
|
|
|
+ .shopBox{
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 20rpx 20rpx 20rpx;
|
|
|
+ }
|
|
|
+ .shopCont{
|
|
|
+ width: 418rpx;padding-left: 20rpx;
|
|
|
+ }
|
|
|
+ .shopName{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+ .Address{
|
|
|
+ color: #999999;font-size: 26rpx;padding-top: 10rpx;
|
|
|
+ }
|
|
|
+ .shopRihgtTxt{
|
|
|
+ color: #999999;font-size: 22rpx;padding-top: 5rpx;
|
|
|
+ }
|
|
|
+ .shopRightBox{
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-left: 28rpx;
|
|
|
+ }
|
|
|
+ .peopleCont{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+ .people{
|
|
|
+ display: flex;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-bottom: 36rpx;
|
|
|
+ }
|
|
|
+ .PlateNumberBox{
|
|
|
+ display: flex;padding-left: 20rpx;padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+ .PlateNumbercx{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+ .PlateNumber{
|
|
|
+ width: 130rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ border: 1px solid #F19D01;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #F19D01;
|
|
|
+ margin-left: 26rpx;
|
|
|
+ }
|
|
|
+ .PlateNumberBoxTop{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .CarModel{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-top: 6rpx;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ padding-bottom: 15rpx;
|
|
|
+ width: 600rpx;
|
|
|
+ }
|
|
|
+ .detailedBox{
|
|
|
+ width: 702rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ margin-top: -60rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .itemBox{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .detailedTitle{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ padding-left: 20rpx;padding-top: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ }
|
|
|
+ .detailedLine{
|
|
|
+ display: flex;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ }
|
|
|
+ .detailedImg{
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ .detailedCont{
|
|
|
+ padding-left: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .detailedName{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+ .detailedContBottom{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ width: 500rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .SalePrice{
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+ .goodscost{
|
|
|
+ width: 702rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 15rpx 0;
|
|
|
+ }
|
|
|
+ .goodscostLine{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 20rpx 20rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .goodsCostNum{
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+ .information{
|
|
|
+ width: 702rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 0rpx 0 15rpx 0;
|
|
|
+ }
|
|
|
+ .informationLine{
|
|
|
+ display: flex;font-size: 26rpx;
|
|
|
+ padding: 15rpx 20rpx;
|
|
|
+ }
|
|
|
+ .informationTxt{
|
|
|
+ width: 150rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .informationNum{
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .copyBtn{
|
|
|
+ width: 86rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .orderBottom{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .cancelBtn{
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border: 2rpx solid #DDDDDD;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ margin-top: 21rpx;
|
|
|
+ }
|
|
|
+ .payBtn{
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border: 2rpx solid #FF4F00;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FF4F00;
|
|
|
+ margin-top: 21rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ }
|
|
|
+ .timeBox2{
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .timeLeftActive{
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .timeMain{
|
|
|
+ width: 100vw;
|
|
|
+ height: 70vh;
|
|
|
+ margin-top: 30vh;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx 24rpx 0px 0px;
|
|
|
+ }
|
|
|
+ .timesfNo{
|
|
|
+ background: #F5F5F5;
|
|
|
+ }
|
|
|
+ .timesfActive{
|
|
|
+ background: #FF4F00;
|
|
|
+
|
|
|
+ }
|
|
|
+ .timesfActive .timeSfNum{
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .timesfActive .timeyy{
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .topBox{
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ }
|
|
|
+ .timeTop{
|
|
|
+ display: flex;
|
|
|
+ line-height: 90rpx;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .timeTopTitle{
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+ .close{
|
|
|
+ color: #999999;font-size: 30rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ }
|
|
|
+ .timeCont{
|
|
|
+ height: calc(70vh - 210rpx);
|
|
|
+ }
|
|
|
+ .timeSv{
|
|
|
+ height: calc(70vh - 210rpx);
|
|
|
+ }
|
|
|
+ .timeLeft2{
|
|
|
+ width: 162rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-top: 1px soid #F4F5F7;
|
|
|
+ border-right:1px soid #F4F5F7 ;
|
|
|
+ }
|
|
|
+ .timeRight2{
|
|
|
+ width: 588rpx;
|
|
|
+ }
|
|
|
+ .timesf{
|
|
|
+ width: 165rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ border-radius: 7rpx;
|
|
|
+ border: 2rpx solid #EEEEEE;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ .timeBottom{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .timerightBox{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .timeCont{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .timeSfNum{
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-top: 15rpx;
|
|
|
+ }
|
|
|
+ .timeyy{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .timecomplete{
|
|
|
+ width: 690rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
|
|
|
+ border-radius: 37rpx;
|
|
|
+ line-height: 74rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ .timeleftLine{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: center;
|
|
|
+ padding: 28rpx 10rpx;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+ .goIndexImg{
|
|
|
+ width: 92rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maBox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .querenMa {
|
|
|
+
|
|
|
+ margin: 20rpx 0;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maBoximg {
|
|
|
+ width: 308rpx;
|
|
|
+ height: 308rpx;
|
|
|
+ margin: 30rpx 197rpx;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightShou {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+</style>
|
