| | |
| | | <view class="head-bar" :style="{ height: navHeight + statusbarHeight + 'px' }"> |
| | | <view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view> |
| | | <view class="head-bar-nav" :style="{ height: navHeight + 'px' }"> |
| | | <image src="/static/icon/nav_ic_back@2x.png" mode="widthFix"></image> |
| | | <image src="/static/icon/nav_ic_back@2x.png" mode="widthFix" @click="jumpBack()"></image> |
| | | <text>订单详情</text> |
| | | <image style="opacity: 0;" src="/static/icon/nav_ic_back@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | </view> |
| | | <view class="info"> |
| | | <view class="info-status">待支付</view> |
| | | <view class="info-desc"> |
| | | 剩余支付时间 08:32,请尽快付款哦,过期将自动取消~ |
| | | <text v-if="info.orderStatus ==0" class="info-status">待支付</text> |
| | | <text v-if="info.orderStatus ==1" class="info-status">{{info.receiveType==1?'待自提':'待发货'}}</text> |
| | | <text v-if="info.orderStatus ==2" class="info-status">待收货</text> |
| | | <text v-if="info.orderStatus ==3" class="info-status grey">交易完成</text> |
| | | <text v-if="info.orderStatus ==4" class="info-status grey">已取消</text> |
| | | <text v-if="info.orderStatus ==6" class="info-status grey">已退款</text> |
| | | <template v-if="userType==1"> |
| | | <view class="info-desc" v-if="info.orderStatus ==0"> |
| | | 剩余支付时间 08:32,过期将自动取消~ |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==1"> |
| | | {{info.receiveType==1?'请等待客户自提购买的商品~':'等待平台发货'}} |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==2"> |
| | | 请等待客户确认收货~ |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==3"> |
| | | {{info.receiveType==1?'订单已自提,交易完成~':'客户已确认收货,交易已完成~'}} |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==4"> |
| | | {{info.cancelInfo||'订单已取消'}} |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==6"> |
| | | 订单已由后台操作退款~ |
| | | </view> |
| | | </template> |
| | | <view class="info-desc" v-if="userType==0"> |
| | | <view class="info-desc" v-if="info.orderStatus ==0"> |
| | | 剩余支付时间 08:32,请尽快付款哦,过期将自动取消~ |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==1"> |
| | | {{info.receiveType==1?'请前往指定门店进行核销~':'商品已打包,等待发货~'}} |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==2"> |
| | | 卖家已发货,请等待收货~ |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==3"> |
| | | {{info.receiveType==1?'订单已自提,交易完成~':'订单已完成,感谢您的支持~'}} |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==4"> |
| | | {{info.cancelInfo||'订单已取消'}} |
| | | </view> |
| | | <view class="info-desc" v-if="info.orderStatus ==6"> |
| | | 订单已由后台操作退款~ |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="user"> |
| | | <view class="user-jxa"> |
| | | <view class="user-jxa-title"> |
| | | <image src="/static/icon/ic_address@2x1.png" mode="widthFix"></image> |
| | | <text>XXXX经销商</text> |
| | | <text>{{info.shopInfo.name||''}}</text> |
| | | </view> |
| | | <view class="user-jxa-lx"> |
| | | <image src="/static/icon/ic_call@2x.png" mode="widthFix"></image> |
| | | <text>联系商家</text> |
| | | <text v-if="userType==1" @click="contact(info.linkphone)">联系客户</text> |
| | | <text v-if="info.orderStatus!=0 && userType==0" @click="contact(info.shopPhone)">联系经销商</text> |
| | | </view> |
| | | </view> |
| | | <view class="user-jxtime"> |
| | | <image class="user-jxtime-icon" src="/static/icon/ic_openinghours@2x.png" mode="widthFix"></image> |
| | | <text>营业时间:周一至周五 09:00-19:00</text> |
| | | <text>营业时间:{{info.shopInfo.startTime || ''}}</text> |
| | | </view> |
| | | <view class="user-jxtime"> |
| | | <image class="user-jxtime-icon" src="/static/icon/ic_shopaddress@2x.png" mode="widthFix"></image> |
| | | <text>安徽省合肥市经开区繁华大道200号</text> |
| | | <text>{{info.shopInfo.addr || ''}}</text> |
| | | <image class="user-jxtime-to" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | <view class="user-qrcode"> |
| | | <view class="user-qrcode" v-if="info.orderStatus ==1 &&info.receiveType==1"> |
| | | <view class="user-qrcode-image"> |
| | | <image src="/static/logo.png" mode="widthFix"></image> |
| | | <image v-if="qrCodeBase64" :src="qrCodeBase64" ></image> |
| | | </view> |
| | | <view class="user-qrcode-code">767889</view> |
| | | <view class="user-qrcode-btn">复制自提码</view> |
| | | <view class="user-qrcode-code">{{info.exchangeCode || ''}}</view> |
| | | <view class="user-qrcode-btn" @click="copyText(info.exchangeCode)">复制自提码</view> |
| | | </view> |
| | | </view> |
| | | <!-- <view class="user"> |
| | |
| | | </view> |
| | | </view> --> |
| | | <view class="shop"> |
| | | <view class="shop-info" style="margin: 0;"> |
| | | <view class="shop-info" style="margin: 0;" v-if="info.status ==6"> |
| | | <view class="shop-info-item" style="margin-bottom: 12rpx;"> |
| | | <view class="shop-info-item-label" style="color: #222222; font-size: 30rpx; font-weight: 600;">退款金额</view> |
| | | <view class="shop-info-item-price xfk"> |
| | | <text>998</text> |
| | | <text>.00</text> |
| | | <text>{{(info.refundMoney||0).toFixed(2)}}</text> |
| | | <text></text> |
| | | </view> |
| | | </view> |
| | | <view class="shop-info-item" style="margin-bottom: 12rpx;"> |
| | | <view class="shop-info-item-label" style="color: #999999; font-size: 24rpx; font-weight: 400;">已退回您的支付账户</view> |
| | | <view class="shop-info-item-price" style="color: #999999; font-size: 24rpx; font-weight: 400;"> |
| | | 2025-06-12 09:20:20 |
| | | {{info.refundTime || ''}} |
| | | </view> |
| | | </view> |
| | | <view class="shop-info-item"> |
| | | <view class="shop-info-item-label" style="color: #999999; font-size: 24rpx; font-weight: 400;">退款备注</view> |
| | | <view class="shop-info-item-price" style="color: #999999; font-size: 24rpx; font-weight: 400;"> |
| | | 协商一致退款 |
| | | {{info.refundInfo || ''}} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="shop"> |
| | | <view class="shop-top"> |
| | | <view class="shop-top-tips">配送</view> |
| | | <text>合肥鼎元旋压科技有限公司</text> |
| | | <view :class="'shop-top-tips '+(info.receiveType==1?'shop-top-tips-a':'shop-top-tips-b' )">{{info.receiveType==1?'自提':'配送'}}</view> |
| | | <text v-if="info.receiveType==1">{{info.shopInfo.name}}</text> |
| | | <text v-if="info.receiveType!=1">{{info.kdName}}</text> |
| | | </view> |
| | | <view class="b"> |
| | | <view class="b-item" v-for="(item, index) in 2" :key="index"> |
| | | <view class="b-item" v-for="(item, index) in (info.goodsorderDetailList||[])" :key="index"> |
| | | <view class="b-item-image"> |
| | | <image src="/static/logo.png" mode="widthFix"></image> |
| | | <!-- <image v-if="item.imgurl!=null" :src="item.imgurl" mode="widthFix"></image> |
| | | --> <image src="/static/icon/default2.png" mode="widthFix"></image> |
| | | </view> |
| | | <view class="b-item-title"> |
| | | <view class="b-item-title-val">中联艾禾宽齿 适用雷沃/中联/久保田</view> |
| | | <view class="b-item-title-val">{{item.name || ''}}</view> |
| | | <view class="b-item-jia"> |
| | | <text>¥499.00</text> |
| | | <text>x1</text> |
| | | <text>¥{{(item.price || 0).toFixed(2)}}</text> |
| | | <text>x{{item.goodsNum || 1}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | <view class="shop-info-item"> |
| | | <view class="shop-info-item-label">商品总价</view> |
| | | <view class="shop-info-item-price"> |
| | | <text>998</text> |
| | | <text>.00</text> |
| | | <text>{{((info.totalPrice || 0)-(info.mailPrice || 0)).toFixed(2)}}</text> |
| | | <text></text> |
| | | </view> |
| | | </view> |
| | | <view class="shop-info-item"> |
| | | <view class="shop-info-item-label">运费</view> |
| | | <view class="shop-info-item-price yf"> |
| | | <text>10</text> |
| | | <text>.00</text> |
| | | <text>{{(info.mailPrice || 0).toFixed(2)}}</text> |
| | | <text></text> |
| | | </view> |
| | | </view> |
| | | <view class="shop-info-item"> |
| | | <view class="shop-info-item-label">优惠券</view> |
| | | <view class="shop-info-item-price yhj"> |
| | | <text>998</text> |
| | | <text>.00</text> |
| | | <text>{{(info.couponPrice || 0).toFixed(2)}}</text> |
| | | <text></text> |
| | | </view> |
| | | </view> |
| | | <view class="shop-info-item"> |
| | | <view class="shop-info-item-label">积分抵扣</view> |
| | | <view class="shop-info-item-price yhj"> |
| | | <text>10</text> |
| | | <text>.00</text> |
| | | <text>{{(info.integral || 0).toFixed(2)}}</text> |
| | | <text></text> |
| | | </view> |
| | | </view> |
| | | <view class="shop-info-item"> |
| | | <view class="shop-info-item-label" style="color: #222222; font-size: 30rpx; font-weight: 600;">需付款</view> |
| | | <view class="shop-info-item-price xfk"> |
| | | <text>998</text> |
| | | <text>.00</text> |
| | | <text>{{(info.price || 0).toFixed(2)}}</text> |
| | | <text></text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | <view class="xinxi-list-item"> |
| | | <view class="xinxi-list-item-label">订单编号:</view> |
| | | <view class="xinxi-list-item-right"> |
| | | <text>202107131742520001</text> |
| | | <image src="/static/icon/ic_cppy@2x.png" mode="widthFix"></image> |
| | | <text>{{info.code || ''}}</text> |
| | | <image src="/static/icon/ic_cppy@2x.png" @click="copyText(info.code )" mode="widthFix"></image> |
| | | </view> |
| | | </view> |
| | | <view class="xinxi-list-item"> |
| | | <view class="xinxi-list-item-label">创建时间:</view> |
| | | <view class="xinxi-list-item-right"> |
| | | <text>2025-08-12 12:00:00</text> |
| | | <text>{{info.createDate || ''}}</text> |
| | | </view> |
| | | </view> |
| | | <view class="xinxi-list-item"> |
| | | <view class="xinxi-list-item-label">订单备注:</view> |
| | | <view class="xinxi-list-item-right"> |
| | | <text>-</text> |
| | | <text>{{info.memberInfo||'-'}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import QRCode from 'qrcode'; |
| | | import { mapState } from 'vuex' |
| | | export default { |
| | | computed: { |
| | | ...mapState(['navHeight', 'statusbarHeight']) |
| | | ...mapState(['navHeight', 'statusbarHeight','shopInfo', 'shopToken']) |
| | | }, |
| | | data() { |
| | | return { |
| | | show: false |
| | | show: false, |
| | | qrCodeBase64:'', |
| | | id:null, |
| | | userType:0, |
| | | shop:{}, |
| | | info:{shopInfo:{}} |
| | | }; |
| | | }, |
| | | onShow() { |
| | | this.info={shopInfo:{}} |
| | | this.qrCodeBase64='' |
| | | if(this.userType === 1){ |
| | | this.shop ={} |
| | | this.checkShopLogin() |
| | | this.shop = this.shopInfo || {} |
| | | this.getShopDetail() |
| | | }else{ |
| | | this.getUserDetail() |
| | | } |
| | | }, |
| | | onLoad(options) { |
| | | this.id = options.id |
| | | this.userType = Number(options.userType) |
| | | this.qrCodeUrl='' |
| | | }, |
| | | methods:{ |
| | | copyText(text) { |
| | | try { |
| | | wx.setClipboardData({ |
| | | data: text||' ', |
| | | success: function () { |
| | | uni.showToast({ title: '复制成功' }); |
| | | }, |
| | | fail: function () { |
| | | uni.showToast({ title: '复制失败', icon: 'none' }); |
| | | } |
| | | }); |
| | | } catch (err) { |
| | | console.error('复制失败', err); |
| | | uni.showToast({ title: '复制失败', icon: 'none' }); |
| | | } |
| | | }, |
| | | async getQrcodeByStr(){ |
| | | try { |
| | | const ocanvas = uni.createOffscreenCanvas({ type: "2d" }); |
| | | const qrCodeBase64 = await QRCode.toDataURL(ocanvas,this.info.exchangeCode, { |
| | | scale: 1, // 二维码的缩放比例,可以根据需要调整 |
| | | width: 300, // 二维码的宽度,可以根据需要调整 |
| | | margin: 1 // 二维码周围的空白边距,可以根据需要调整 |
| | | }); |
| | | this.qrCodeBase64 =qrCodeBase64 |
| | | console.log("==================this.info.exchangeCode1:",qrCodeBase64) |
| | | } catch (err) { |
| | | uni.showToast({ |
| | | title:'创建二维码失败', |
| | | icon:'error' |
| | | }) |
| | | } |
| | | }, |
| | | contact(phone){ |
| | | if(phone !=null && phonee!=''){ |
| | | uni.makePhoneCall({ |
| | | phoneNumber: phone |
| | | }) |
| | | } |
| | | }, |
| | | async getShopDetail(index){ |
| | | var that =this |
| | | let res = await that.$u.api.shopOrderDetail({orderId:this.id,tokenType:1 }) |
| | | if (res.code === 200) { |
| | | this.info = res.data |
| | | this.info.shopInfo = this.info.shopInfo||{} |
| | | |
| | | this.getQrcodeByStr() |
| | | } |
| | | }, |
| | | async getUserDetail(index){ |
| | | var that =this |
| | | let res = await that.$u.api.shopOrderDetail({orderId:this.id,tokenType:1 }) |
| | | if (res.code === 200) { |
| | | this.info = res.data |
| | | } |
| | | }, |
| | | checkShopLogin(){ |
| | | var that =this |
| | | if( this.shopInfo ==null || this.shopInfo.id==null || this.shopToken==null || this.shopToken==''){ |
| | | uni.navigateTo({ |
| | | url: '/pages/login/login' |
| | | }) |
| | | } |
| | | }, |
| | | jumpBack(){ |
| | | uni.navigateBack({ delta: 1 }); |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | |
| | | font-weight: 400; |
| | | font-size: 22rpx; |
| | | color: #FFFFFF; |
| | | background: #004096; |
| | | border-radius: 8rpx; |
| | | border: 1rpx solid #004096; |
| | | margin-right: 16rpx; |
| | | } |
| | | .shop-top-tips-a { |
| | | background: #00B775; |
| | | border: 1rpx solid #00B775; |
| | | } |
| | | .shop-top-tips-b { |
| | | background: #004096; |
| | | border: 1rpx solid #004096; |
| | | } |
| | | text { |
| | | font-weight: 400; |
| | |
| | | font-weight: 400; |
| | | font-size: 30rpx; |
| | | color: #222222; |
| | | display: -webkit-box; |
| | | -webkit-line-clamp: 2; /* 限制文本为2行 */ |
| | | -webkit-box-orient: vertical; |
| | | overflow: hidden; |
| | | } |
| | | .b-item-jia { |
| | | flex-shrink: 0; |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | canvas { |
| | | width: 180px; |
| | | height: 180px; |
| | | } |
| | | } |
| | | .user-qrcode-code { |
| | | font-weight: 600; |