123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938 |
- <template>
- <view class="box">
-
- <!-- 自定义导航 -->
- <view class="zdyNavBox">
- <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
- <view class="zdyNav">
- <view class="zdyNavLeft">
- <image src="../../../static/img/nav_icon_back.png" mode="" class="backImg" @click="goback"></image>
- <image src="../../../static/img/nav_icon_home.png" mode="" class="homeImg" @click="gohome"></image>
- </view>
- <view class="zdyNavTitle">订单详情</view>
- <view style="width: 100px;"></view>
- </view>
- </view>
- <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
- <view style="height: 44px;"></view>
-
-
- <view class="top">
- <view class="orderState">
- <image src="../../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
- <view class="SheetState" v-if="orderData.data.sheetState == 1">待付款</view>
- <view class="SheetState" v-if="orderData.data.sheetState == 2">待服务</view>
- <view class="SheetState" v-if="orderData.data.sheetState == 3">已完成</view>
- <view class="SheetState" v-if="orderData.data.sheetState == 4">已取消</view>
- </view>
- </view>
- <!-- 店铺信息 -->
- <view class="shopBox">
- <image src="../../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
- <view class="shopCont">
- <view class="shopName">{{orderData.shopInfo.shopName}}</view>
- <view class="Address">
- {{orderData.shopInfo.provinceName}}{{orderData.shopInfo.cityName}}{{orderData.shopInfo.areaName}}{{orderData.shopInfo.address}}
- </view>
- </view>
- <view class="shopRightBox" @click="map">
- <image src="../../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
- <view class="shopRihgtTxt">地图</view>
- </view>
- <view class="shopsx"></view>
- <view class="shopRightBox" @click="call">
- <image src="../../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
- <view class="shopRihgtTxt">电话</view>
- </view>
- </view>
- <!-- 订单内容 -->
- <view class="information" v-if="orderData.OpenSheetQRCodeList">
- <view class="detailedTitle">订单内容</view>
- <view class="goodsName">{{orderData.OpenSheetQRCodeList.itemName}}</view>
- <view class="informationLine2">
- <view class="salePrice"><span
- class="informationNum">¥</span>{{orderData.OpenSheetQRCodeList.salePrice}}</view>
- <view class="informationNum" style="color: #999999;">
- x{{orderData.OpenSheetQRCodeList.itemQty}}</view>
- </view>
- <view v-if="orderData.data.sheetState != 1" class="line"></view>
- <view v-if="orderData.data.sheetState != 1">
- <view class="goodsName">
- 券码信息({{orderData.OpenSheetQRCodeList.noWriteoffQty?orderData.OpenSheetQRCodeList.noWriteoffQty:0}}张可用)
- </view>
- <view class="detailedLine" v-for="(v,index) in orderData.OpenSheetQRCodeList.OpenSheetQRCode">
- <view v-if="v.writeoffState==1" class="detailedName">
- <view class="redPoint"></view>
- <view class="code">{{v.qrCode}}</view>
- <view class="quanState">待使用</view>
- </view>
- <view v-if="v.writeoffState==3" class="detailedName">
- <view class="redPoint"></view>
- <view class="code old" >{{v.qrCode}}</view>
- <view class="quanState2">已使用</view>
-
- </view>
-
- <image src="../../../static/img/icon_erweima.png" mode="" style="width: 36rpx;height: 36rpx;"
- v-if="v.writeoffState==1" @click="isShowMa=true"></image>
- </view>
- </view>
- </view>
- <!-- 套餐内容 -->
- <view class="information" v-if="SheetType==3">
- <view class="detailedTitle">套餐内容</view>
- <!-- 项目 -->
- <view class="itemBox" v-if="orderData.projectList.length>0">
- <!-- 头 -->
- <view class="itemTop">
- <view class="topTitle leftItem">项目名称</view>
- <view class="topTitle">数量</view>
- <view class="topTitle">有效期</view>
- </view>
- <view v-for="(item,index) in orderData.projectList" :key="index">
- <view class="itemContent">
- <view class="topTitle leftItem">{{item.flowName}}</view>
- <view class="topTitle2">{{item.flowQty}}</view>
- <view class="topTitle">{{item.date}}</view>
- </view>
- </view>
- </view>
- <!-- 商品 -->
- <view class="itemBox" v-if="orderData.shopList.length>0">
- <!-- 头 -->
- <view class="itemTop">
- <view class="topTitle leftItem">商品名称</view>
- <view class="topTitle">数量</view>
- <view class="topTitle">有效期</view>
- </view>
- <view v-for="(item,index) in orderData.shopList" :key="index">
- <view class="itemContent">
- <view class="topTitle leftItem">{{item.flowName}}</view>
- <view class="topTitle2">{{item.flowQty}}</view>
- <view class="topTitle">{{item.date}}</view>
- </view>
- </view>
- </view>
- </view>
- <!-- 实付款 -->
- <view class="money">
- <view class="informationNum">实付款:</view>
- <view class="informationNum" style="color: #FF0000;font-weight: bold;">¥{{orderData.data.realMoney}}</view>
- </view>
- <!-- 订单信息 -->
- <view class="information">
- <view class="detailedTitle">订单信息</view>
- <view class="informationLine">
- <view class="informationTxt">订单单号:</view>
- <view class="informationNum">{{orderData.data.code}}<span class="codeCopy"
- @click="copy(orderData.data.code)">复制</span></view>
- </view>
- <view class="informationLine">
- <view class="informationTxt">下单人:</view>
- <view class="informationNum">{{orderData.data.userMobilePhone}}</view>
- </view>
- <view class="informationLine">
- <view class="informationTxt">下单时间:</view>
- <view class="informationNum">{{orderData.data.createTime}}</view>
- </view>
- <view class="informationLine">
- <view class="informationTxt">订单备注:</view>
- <view class="informationNum" style="width: 510rpx;">{{orderData.data.comment?orderData.data.comment:''}}</view>
- </view>
- </view>
- <!-- 支付信息 -->
- <view class="information">
- <view class="detailedTitle">支付信息</view>
- <view class="informationLine">
- <view class="informationTxt">支付状态:</view>
- <view class="informationNum" v-if="orderData.data.payState==1">未支付</view>
- <view class="informationNum" v-if="orderData.data.payState==2">已支付</view>
- </view>
- <view class="informationLine">
- <view class="informationTxt">支付方式:</view>
- <view class="informationNum" v-if="orderData.data.payType==1">在线支付</view>
- <view class="informationNum" v-if="orderData.data.payType==2">线下支付</view>
- </view>
- <view class="informationLine">
- <view class="informationTxt">支付时间:</view>
- <view class="informationNum">{{orderData.data.payTime?orderData.data.payTime:'-'}}</view>
- </view>
- </view>
- <view style="height: 50rpx;background-color: #F4F5F7;"></view>
- <view class="bottom" v-if="orderData.data.sheetState == 1">
- <view class="cancel" @click="cancelBespeak">取消订单</view>
- <view class="defer" @click="pay">立即支付</view>
- </view>
- <!-- 券码 -->
- <view class="maBox" v-if="isShowMa==true" @click="isShowMa=false">
- <view class="querenMa">
- <view class="maTop">
- <view class="maTitle">请到店出示券码即可开始服务</view>
- <image @click="isShowMa=false" src="../../../static/img/icon_delete.png" mode=""
- style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
- </view>
- <swiper class="swiper" circular :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
- <swiper-item v-for="(item,index) in orderData.OpenSheetQRCodeList.OpenSheetQRCode">
- <view class="swiper-item">
- <view class="maCode">{{item.qrCode}}</view>
- <view class="maBoximg">
- <tki-qrcode cid="qrcode1" ref="qrcode" :val="item.qrCode" :size="400" :unit="unit"
- :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
- :loadMake="loadMake" :usingComponents="true" @result="qrR" />
- </view>
- </view>
- </swiper-item>
-
-
- </swiper>
-
-
- </view>
- </view>
- </view>
- </template>
- <script>
- import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
- export default {
- components: {
- tkiQrcode
- },
- data() {
- return {
- id: '',
- iStatusBarHeight:'',
- SheetType: '', //SheetType 1 商品2项目3套餐4救援5钣喷6集客
- orderData: '',
- onval: true, // val值变化时自动重新生成二维码
- loadMake: true, // 组件加载完成后自动生成二维码
- size: 500,
- qrcodeShow: false,
- qrcodeTop: '-100vh',
- qrcodeTopVal: '',
- ifShow: false,
- val: '二维码', // 要生成的二维码值
- unit: 'upx', // 单位
- background: '#b4e9e2', // 背景色
- foreground: '#309286', // 前景色
- pdground: '#262637', // 角标色
- icon: '', // 二维码图标
- iconsize: 40, // 二维码图标大小
- lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
- src: '', // 二维码生成后的图片地址或base64
- isShowMa: false,
-
- }
- },
- onLoad(opt) {
- this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
- this.id = opt.id
- this.SheetType = opt.SheetType
- if (this.id) {
- this.getData()
- }
-
- },
-
- methods: {
-
- pay(){
- this.$http('openMallOrder/unifiedPay', {
- sheetId:this.id
- },'POST').then(res => {
-
- if(res.code==0){
-
- this.requestPayment(res.data)
- }else{
- uni.showToast({
- title: res.msg,
- icon: 'none',
- duration: 3000
- });
- }
- })
- },
- requestPayment(res){
- var payInfo=res;
- //console.log(payInfo)
- //console.log(String(Date.now()))
- var that=this;
- uni.requestPayment({
- provider: 'wxpay',
- //timeStamp: String(Date.now()),
- timeStamp: payInfo.timeStamp,
- nonceStr: payInfo.nonceStr,
- package:payInfo.package,
- signType: payInfo.signType,
- paySign: payInfo.paySign,
- appid:payInfo.appId,
-
- success: function (res) {
- console.log('success:' + JSON.stringify(res));
- uni.showToast({
- title: '支付成功',
- icon:'none',
- duration: 2000
- });
- that.getData()
- },
- fail: function (err) {
- console.log(err)
- uni.showToast({
- title: '支付失败',
- icon:'none',
- duration: 2000
- });
-
- }
- });
- },
- copy(txt) {
- uni.setClipboardData({
- data: txt,
- success: function() {
- uni.showToast({
- title: '复制成功',
- icon: 'none',
- duration: 2000
- });
- }
- });
- },
- upTime() {
- uni.showLoading({
- title: '加载中'
- })
- var that = this
- this.$http('openreservation/carOwner/updateTimeOfAppointment', {
- id: this.id,
- shopId: this.orderData.shopInfo.id,
- billDate: this.billDate
- }, 'POST').then(res => {
- uni.hideLoading();
- // var list = res.data.Items
- var list = res.data
- console.log("result+=", res.data);
- uni.showToast({
- title: '延期成功',
- icon: 'none',
- duration: 2000
- });
- setTimeout(function() {
- that.getData();
- }, 1000);
- })
- },
- cancelBespeak(){
- var that = this
- uni.showModal({
- title: '提示',
- content: '是否取消该订单',
- cancelText:'否',
- confirmText:'是',
- success: function (res) {
- if (res.confirm) {
-
- uni.showLoading({
- title: '加载中'
- })
-
- that.$http('openOrderManagement/updateSheetState', {
-
- id: that.id,
-
- }, 'POST').then(res => {
- uni.hideLoading();
- // var list = res.data.Items
-
- uni.showToast({
- title: '取消成功',
- icon: 'none',
- duration: 2000
- });
- setTimeout(function() {
- that.getData();
- }, 1000);
- })
-
-
- } else if (res.cancel) {
-
- }
- }
- });
- },
-
- map() {
- console.log("打开地图")
- var that = this;
- if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
- uni.showToast({
- title: '该店铺未设置定位',
- icon: 'none',
- duration: 3000
- });
- } else {
- uni.openLocation({
- latitude: Number(that.orderData.shopInfo.lat),
- longitude: Number(that.orderData.shopInfo.lng),
- name: that.orderData.shopInfo.shopName,
- address: that.orderData.shopInfo.provinceName + that.orderData.shopInfo.cityName + that
- .orderData.shopInfo.areaName + that.orderData.shopInfo.address,
- success: function() {
- console.log('success');
- },
- fail(err) {
- console.log(err)
- }
- });
- }
- },
- call() {
- uni.makePhoneCall({
- phoneNumber: this.orderData.shopInfo.mobilePhone
- });
- },
- getData() {
- uni.showLoading({
- title: '加载中'
- });
- this.$http('openOrderManagement/queryOpenSheet', {
- id: this.id,
- }, 'GET').then(res => {
- uni.hideLoading();
- this.orderData = res.data;
- })
- },
-
- goback() {
- uni.navigateBack({
- delta: 1
- })
- },
- gohome(){
- uni.switchTab({
- url:'../../index/index'
- })
- },
- },
- onPullDownRefresh() {
- this.getData()
- setTimeout(function() {
- uni.stopPullDownRefresh();
- }, 1000);
- },
- }
- </script>
- <style scoped>
- .box {
- min-height: 100vh;
- background: #F4F5F7;
- padding-bottom: 135rpx;
- }
- .zdyNavBox{
- width: 100vw;
- background: #FFFFFF;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 9999999;
- }
- .zdyNav{
- height: 44px;
- display: flex;
- justify-content: space-between;
-
- align-items: center;
- }
-
- .backImg{
- width: 44rpx;
- height: 44rpx;
-
- margin: 0 20rpx;
- }
- .homeImg{
- width: 44rpx;
- height: 44rpx;
-
- }
- .zdyNavLeft{
- display: flex;
- align-items: center;
- }
- .zdyNavTitle{
- width: 100vw;
- height: 44px;
- background: #FFFFFF;
- text-align: center;
- font-size: 34rpx;
- line-height: 44px;
- }
-
- .top {
- height: 190rpx;
- background-color: #FF0000;
- }
- .orderState {
- display: flex;
- justify-content: center;
- align-items: center;
- padding-top: 40rpx;
- }
- .SheetState {
- display: flex;
- justify-content: center;
- font-size: 36rpx;
- font-weight: 500;
- color: #FFFFFF;
- margin-left: 15rpx;
- }
- .timeEditImg {
- width: 25rpx;
- height: 25rpx;
- padding-left: 20rpx;
- }
- .shopBoximg {
- width: 40rpx;
- height: 40rpx;
- }
- .shopRightImg {
- width: 44rpx;
- height: 45rpx;
- }
- .shopsx {
- width: 1px;
- height: 50rpx;
- background: #EEEEEE;
- margin-top: 30rpx;
- margin-left: 28rpx;
- }
- .shopBox {
- display: flex;
- padding: 30rpx 20rpx;
- margin: 0rpx 24rpx;
- margin-top: -60rpx;
- background-color: #FFFFFF;
- border-radius: 10rpx;
- }
- .shopCont {
- width: 405rpx;
- padding-left: 20rpx;
- }
- .shopName {
- font-size: 30rpx;
- font-weight: bold;
- color: #3C3C3C;
- line-height: 42rpx;
- }
- .Address {
- color: #999999;
- font-size: 24rpx;
- margin-top: 10rpx;
- }
- .shopRihgtTxt {
- color: #999999;
- font-size: 24rpx;
- }
- .shopRightBox {
- padding-left: 28rpx;
- }
- .detailedTitle {
- padding: 23rpx 20rpx;
- display: flex;
- text-align: center;
- align-content: flex-start;
- border-bottom: 1rpx solid #EEEEEE;
- font-size: 30rpx;
- font-weight: bold;
- color: #3C3C3C;
- }
- .detailedLine {
- display: flex;
- padding: 16rpx 20rpx;
- justify-content: space-between;
- align-items: center;
- }
- .detailedImg {
- width: 120rpx;
- height: 120rpx;
- border-radius: 10rpx;
- }
- .detailedName {
- display: flex;
- align-items: center;
- }
- .code {
- font-size: 26rpx;
- color: #333333;
- font-weight: bold;
- width: 180rpx
- }
- .old {
- color: #999999;
- font-weight: 400;
- text-decoration: line-through;
- }
- .redPoint {
- width: 10rpx;
- height: 10rpx;
- background: #FF0000;
- border-radius: 10rpx;
- margin-right: 10rpx;
- }
- .quanState {
- font-size: 22rpx;
- color: #F19D01;
- padding: 0 10rpx;
- border: 1rpx solid #F19D01;
- border-radius: 4rpx;
- margin-left: 20rpx;
- }
- .quanState2{
- font-size: 22rpx;
- color: #999999;
- padding: 0 10rpx;
-
- border: 1rpx solid #DDDDDD;
-
- border-radius: 4rpx;
- margin-left: 20rpx;
- }
- .information {
- background: #FFFFFF;
- border-radius: 10rpx;
- margin: 20rpx 24rpx;
- padding-bottom: 15rpx;
- }
- .informationLine {
- display: flex;
- padding: 15rpx 20rpx;
- }
- .informationLine2 {
- display: flex;
- justify-content: space-between;
- font-size: 26rpx;
- padding: 0 20rpx;
- }
- .salePrice {
- font-size: 26rpx;
- font-weight: 500;
- color: #333333;
- line-height: 45rpx;
- }
- .money {
- background: #FFFFFF;
- border-radius: 10rpx;
- margin: 20rpx 24rpx;
- display: flex;
- justify-content: space-between;
- font-size: 26rpx;
- padding: 30rpx 20rpx;
- }
- .informationTxt {
- width: 190rpx;
- font-size: 26rpx;
- color: #999999;
- }
- .line {
- height: 20rpx;
- background-color: #FFFFFF;
- border-bottom: 1rpx solid #EEEEEE;
- }
- .goodsName {
- padding: 20rpx 20rpx 15rpx;
- color: #333333;
- font-size: 26rpx;
- }
- .informationNum {
- color: #333333;
- font-size: 26rpx;
- }
- .codeCopy {
- width: 77rpx;
- height: 36rpx;
- background: #F4F5F7;
- border-radius: 22rpx;
- font-size: 24rpx;
- color: #333333;
- text-align: center;
- line-height: 33rpx;
- padding: 0 15rpx;
- margin-left: 20rpx;
- }
- .orderBottom {
- width: 750rpx;
- height: 98rpx;
- background: #FFFFFF;
- position: fixed;
- left: 0;
- bottom: 0;
- display: flex;
- justify-content: flex-end;
- }
- .bottom {
- display: flex;
- justify-content: flex-end;
- padding: 20rpx;
- background-color: #FFFFFF;
- align-items: center;
- height: 98rpx;
- width: 100vw;
- position: fixed;
- bottom: 0rpx;
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
- }
- .cancel {
- color: #3C3C3C;
- font-size: 28rpx;
- width: 150rpx;
- height: 56rpx;
- border-radius: 36rpx;
- border: 1rpx solid #DDDDDD;
- text-align: center;
- line-height: 56rpx;
- margin-right: 40rpx;
- }
- .defer {
- color: #D53533;
- font-size: 28rpx;
- width: 150rpx;
- height: 56rpx;
- border-radius: 36rpx;
- border: 1rpx solid #D53533;
- text-align: center;
- line-height: 56rpx;
- margin-right: 40rpx;
- }
- .itemBox {
- margin: 20rpx;
- border-radius: 10rpx;
- border: 2rpx solid #EEEEEE;
- }
- .itemTop {
- padding: 18rpx 20rpx;
- background-color: #FFEFD5;
- display: flex;
- justify-content: space-between;
- align-content: center;
- }
- .topTitle {
- font-size: 26rpx;
- color: #333333;
- margin-right: 10rpx;
- }
- .topTitle2{
- font-size: 26rpx;
- color: #333333;
- margin-right: 40rpx;
- }
- .leftItem {
- flex-grow: 1;
- }
- .itemContent {
- padding: 20rpx;
- background-color: #FFFFFF;
- display: flex;
- justify-content: space-between;
- align-content: center;
- }
- .maBox {
- width: 100%;
- height: 100vh;
- background: rgba(0, 0, 0, 0.4);
- position: fixed;
- left: 0;
- top: 0;
- z-index: 9999;
- }
- .querenMa {
- width: 578;
- height: 640rpx;
- background: #ffffff;
- margin: 0 86rpx;
- margin-top: 50%;
- border-radius: 24rpx;
- }
- .maTop {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 30rpx 20rpx 15rpx;
- }
- .maTitle {
- color: #666666;
- font-size: 26rpx;
- text-align: center;
- padding-left: 100rpx;
- }
- .swiper{
- width: 100%;
- height: 85%;
- background: #FFFFFF;
-
- }
- .swiper-item{
- width: 100%;
- height: 100%;
- }
-
-
- .maCode {
- font-size: 30rpx;
- font-weight: 500;
- color: #333333;
- line-height: 42rpx;
- margin-bottom: 40rpx;
- text-align: center;
- }
- .maBoximg {
- width: 400rpx;
- height: 400rpx;
- margin-left: 86rpx;
- }
- </style>
|