From a59ff44b2eaa7020f0529632d9ec064c4dc38e27 Mon Sep 17 00:00:00 2001
From: rk <94314517@qq.com>
Date: 星期二, 28 四月 2026 22:08:46 +0800
Subject: [PATCH] Merge branch 'master' of http://139.186.142.91:10010/r/productDev/gtzxinglijicun
---
small-program/shop/pages/order-details/order-details.vue | 1019 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,019 insertions(+), 0 deletions(-)
diff --git a/small-program/shop/pages/order-details/order-details.vue b/small-program/shop/pages/order-details/order-details.vue
new file mode 100644
index 0000000..c043d50
--- /dev/null
+++ b/small-program/shop/pages/order-details/order-details.vue
@@ -0,0 +1,1019 @@
+<template>
+ <view class="detail">
+ <view :class="info.type === 1?'head head1':'head head0'" :style="{ height: statusbarHeight + navHeight + 'px' }">
+ <view :style="{width: '100%', height: statusbarHeight + 'px'}"></view>
+ <view class="head-nav" :style="{width: '100%', height: navHeight + 'px'}">
+ <image src="/static/icon/nav_ic_back.png" mode="widthFix" @click="goBack"></image>
+ <text>瀵勫瓨璁㈠崟</text>
+ <image src="/static/icon/nav_ic_back.png" @click="goBack" mode="widthFix" style="opacity: 0;"></image>
+ </view>
+ </view>
+ <view :style="{ width: '100%', height: statusbarHeight + navHeight + 'px' }"></view>
+ <view :class="info.type === 1?'nr head1':'nr head0'">
+ <view class="nr-status">
+ <text>{{info.statusName|| ''}}</text>
+ <view class="nr-status-type1" v-if="info.type === 0">灏卞湴瀵勫瓨</view>
+ <view class="nr-status-type" v-if="info.type === 1">鍚屽煄瀵勯��</view>
+ <view class="nr-status-type1" v-if="info.type === 1 && info.isUrgent === 0">鏍囬�熻揪</view>
+ <view class="nr-status-type1" v-if="info.type === 1 && info.isUrgent === 1">鏋侀�熻揪</view>
+ </view>
+ <view class="item" style="padding: 10rpx;" v-if="info.type ===1 && info.status===4">
+ <map
+ name="mapAddr"
+ :latitude="mapLat"
+ :longitude="mapLng"
+ :scale="mapScale"
+ :markers="markers"
+ :polyline="polyline"
+ show-location
+ style="width: 100%; height: 362rpx;"
+ ></map>
+ </view>
+ <view class="item">
+ <view class="addr">
+ <view class="addr-item">
+ <view class="ji bg">瀵�</view>
+ <view class="xiantiao"></view>
+ <view class="addr-item-top">
+ <text>{{info.depositShopName || ''}}</text>
+ </view>
+ <text>{{info.depositShopAddress || ''}} </text>
+ <view class='addr-link' style="top: 50rpx;">
+ <image style="margin-right: 10rpx;" @click="contactPhoneDo(info.takePhone)" src="/static/icon/ic_call@2x.png" mode="widthFix" ></image>
+ <text class=" txt-d1">鑱旂郴瀹㈡埛</text>
+ </view>
+ </view>
+ <view class="addr-item" v-if="info.type === 1">
+ <view class="ji bg1">鏀�</view>
+ <view class="addr-item-top">
+ <text>{{info.takeShopName || info.takeLocation || ''}}</text>
+ </view>
+ <text>{{info.takeShopAddress || ''}} </text>
+ </view>
+ </view>
+ <view class="item-x"></view>
+ <view class="item-list">
+ <view class="item-list-row">
+ <view class="item-form-label">鏀朵欢浜�</view>
+ <view class="item-form-val">{{info.takeUser || ''}}</view>
+ </view>
+ <view class="item-list-row">
+ <view class="item-form-label">鏀朵欢浜虹數璇�</view>
+ <view class="item-form-val">{{info.takePhone || ''}}</view>
+ </view>
+ <view class="item-list-row">
+ <view class="item-form-label">棰勮鍒板簵鏃堕棿</view>
+ <view class="item-form-val">{{info.expectedDepositTime || ''}}</view>
+ </view>
+ <view class="item-list-row">
+ <view class="item-form-label">棰勮鍙栦欢鏃堕棿</view>
+ <view class="item-form-val">{{info.expectedTakeTime || ''}}</view>
+ </view>
+ <view class="item-list-row">
+ <view class="item-form-label">鐗╁搧鍚嶇О</view>
+ <view class="item-form-val">{{info.goodTypeName || ''}}</view>
+ </view>
+ <view class="item-list-row">
+ <view class="item-form-label">鐗╁搧鐓х墖</view>
+ <view class="item-form-list" v-if="info.orderImages && info.orderImages.length">
+ <view class="item-form-list-row" v-for="(item,index) in info.orderImages" key="item">
+ <image :src="item" mode="widthFix" @click="previewImage(info.orderImages,index)"></image>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="addr" v-if="info.driverPhone">
+ <view class="addr-item">
+ <view class="ji bg">閫�</view>
+ <view class="addr-item-top">
+ <text class=" txt-d">鍙告満锛歿{info.driverName || '鎴樼'}} </text>
+ </view>
+ <view class='addr-link'>
+ <image style="margin-right: 10rpx;" @click="contactPhoneDo(info.driverPhone)" src="/static/icon/ic_call@2x.png" mode="widthFix" ></image>
+ <text class=" txt-d1">鑱旂郴鍙告満</text>
+ </view>
+
+ </view>
+ </view>
+ </view>
+
+ <!-- <view class="item" v-if="info.refundInfo">
+ <view class="tuikuan">
+ <view class="tuikuan-top">
+ <text>閫�娆鹃噾棰�</text>
+ <text>楼{{((info.refundInfo.refundAmount || 0)/100).toFixed(2)}}</text>
+ </view>
+ <view class="tuikuan-bottom">
+ <text v-if="info.refundInfo.status === 0">閫�娆句腑</text>
+ <text v-if="info.refundInfo.status === 1">宸查��鍥炴偍鐨勬敮浠樿处鎴�</text>
+ <text v-if="info.refundInfo.status === 2">閫�娆惧け璐�</text>
+ <text v-if="info.refundInfo.status === 1">{{info.refundInfo.refundTime || ''}}</text>
+ <text v-if="info.refundInfo.status !== 1">{{info.refundInfo.createTime || ''}}</text>
+ </view>
+ </view>
+ </view> -->
+ <view class="item" v-if="info.commentStatus === 1">
+ <view class="comment">
+ <view class="comment-top">
+ <text>瀹㈡埛宸茶瘎浠凤細</text>
+ </view>
+ <view class="comment-score">
+ <view class="score-item" v-if="info.depositScore">瀵勪欢闂ㄥ簵: <text style="color:#ffc533;font-size: 38rpx;margin-right: 10rpx;">鈽�</text>{{info.depositScore || 1}} </view>
+ <view class="score-item" v-if="info.driverScore">閰嶉�佸徃鏈�: <text style="color:#ffc533;font-size: 38rpx;margin-right: 10rpx;">鈽�</text>{{info.driverScore || 1}} </view>
+ <view class="score-item" v-if="info.takeScore">鏀朵欢闂ㄥ簵: <text style="color:#ffc533;font-size: 38rpx;margin-right: 10rpx;">鈽�</text>{{info.takeScore || 1}} </view>
+ </view>
+ <view class="comment-row" v-if="info.commentImages && info.commentImages.length" >
+ <view class="comment-image" v-for="(item,index) in info.commentImages" key="item">
+ <image :src="item" mode="widthFix" @click="previewImage(info.commentImages,index)"></image>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="item" v-if="info.refundInfo">
+ <view class="tuikuan">
+ <view class="tuikuan-top">
+ <text>閫�娆鹃噾棰�</text>
+ <text>楼{{((info.refundInfo.refundAmount || 0)/100).toFixed(2)}}</text>
+ </view>
+ <view class="tuikuan-bottom">
+ <text v-if="info.refundInfo.status === 0">閫�娆句腑</text>
+ <text v-if="info.refundInfo.status === 1">宸查��鍥炴偍鐨勬敮浠樿处鎴�</text>
+ <text v-if="info.refundInfo.status === 2">閫�娆惧け璐�</text>
+ <text v-if="info.refundInfo.status === 1">{{info.refundInfo.refundTime || ''}}</text>
+ <text v-if="info.refundInfo.status !== 1">{{info.refundInfo.createTime || ''}}</text>
+ </view>
+ </view>
+ </view>
+ <view class="item" v-if="info.detailList">
+ <view class="xl">
+ <view v-for="goods in info.detailList " :key="goods.luggageName" class="xl-item">
+ <view class="xl-item-top">
+ <text>{{ goods.luggageName ||'' }}</text>
+ <text>楼{{((goods.subtotal || 0)/100).toFixed(2) }}</text>
+ </view>
+ <view class="xl-item-bottom">
+ <text>{{ goods.luggageDetail || '' }}</text>
+ <text>x{{ goods.num || 1}}</text>
+ </view>
+ </view>
+ </view>
+ <view class="item-x"></view>
+ <view class="item-list">
+ <view class="item-list-row">
+ <view class="item-form-label" style="color: #333333; font-size: 28rpx;">淇濅环閲戦</view>
+ <view class="item-form-val" style="color: #333333; font-size: 24rpx;">楼{{((info.declaredAmount || 0)/100).toFixed(2)}}</view>
+ </view>
+ <view class="item-list-row">
+ <view class="item-form-label" style="color: #333333; font-size: 28rpx;">琛屾潕淇濊垂</view>
+ <view class="item-form-val" style="color: #333333; font-size: 24rpx;">楼{{((info.declaredFee || 0)/100).toFixed(2)}}</view>
+ </view>
+ <view class="item-list-row">
+ <view class="item-form-label" style="color: #222222; font-size: 30rpx; font-weight: 600;">瀹炰粯娆�</view>
+ <view class="item-form-val price" style="color: #FE2C2E; font-size: 36rpx;">{{((info.actualPayAmount || 0)/100).toFixed(2)}}</view>
+ </view>
+ </view>
+ </view>
+ <view class="item">
+ <view class="item-title">璁㈠崟淇℃伅</view>
+ <view class="item-infos">
+ <view class="item-infos-item">
+ <view class="item-infos-item-left">璁㈠崟缂栧彿锛�</view>
+ <view class="item-infos-item-right">
+ <text>{{info.code ||''}}</text>
+ <image src="/static/icon/ic_cppy@2x.png" mode="widthFix" @tap="copyCode(info.code||'')"></image>
+ </view>
+ </view>
+ <view class="item-infos-item">
+ <view class="item-infos-item-left">鍒涘缓鏃堕棿锛�</view>
+ <view class="item-infos-item-right">
+ <text>{{info.createTime ||''}}</text>
+ </view>
+ </view>
+ <view class="item-infos-item" v-if="info.payTime">
+ <view class="item-infos-item-left">鏀粯鏃堕棿锛�</view>
+ <view class="item-infos-item-right">
+ <text>{{info.payTime ||''}}</text>
+ </view>
+ </view>
+ <view class="item-infos-item">
+ <view class="item-infos-item-left">鏀粯鏂瑰紡锛�</view>
+ <view class="item-infos-item-right">
+ <text>寰俊鏀粯</text>
+ </view>
+ </view>
+ <view class="item-infos-item" v-if="info.outTradeNo">
+ <view class="item-infos-item-left">浜ゆ槗鍗曞彿锛�</view>
+ <view class="item-infos-item-right">
+ <text>{{info.outTradeNo || ''}}</text>
+ </view>
+ </view>
+ <view class="item-infos-item">
+ <view class="item-infos-item-left">璁㈠崟澶囨敞锛�</view>
+ <view class="item-infos-item-right">
+ <text>{{info.remark || ''}}</text>
+ </view>
+ </view>
+ <view class="item-infos-item" v-if="info.refundTime">
+ <view class="item-infos-item-left">鐢宠閫�娆撅細</view>
+ <view class="item-infos-item-right">
+ <text>{{info.refundTime || ''}}</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view style="width: 100%; height: calc(210rpx + env(safe-area-inset-bottom));"></view>
+ </view>
+ <view class="tips" v-if="info.overdueStatus !==0 &&info.overdueStatus !==2">
+ <image src="/static/icon/ic_waring@2x.png" mode="widthFix"></image>
+ <text v-if="info.overdueStatus ===1">宸茶秴杩囧彇浠舵椂闂达紝宸蹭骇鐢熻秴鏃惰垂鐢細楼{{((info.overdueFee || 0)/100).toFixed(2)}}鍏�</text>
+ <text v-if="info.overdueStatus ===3">宸茶秴杩囧彇浠舵椂闂达紝绛夊緟瀹㈡埛鏀粯瓒呮椂璐圭敤锛毬{((info.overdueFee || 0)/100).toFixed(2)}}鍏�</text>
+ <text v-if="info.overdueStatus ===4">瓒呰繃鍙栦欢鏃堕棿锛屽凡鏀粯瓒呮椂璐圭敤锛毬{((info.overdueFee || 0)/100).toFixed(2)}}鍏�</text>
+ </view>
+ <view class="footer" >
+ <view class="footer-btns">
+ <view class="btn kong" @click="contactPhoneDo(info.takePhone)" v-if="info.status === 1 || info.status === 5" >鑱旂郴瀹㈡埛</view>
+ <view class="btn kong" @click="contactPhoneDo(info.driverPhone)" v-if="info.type ===1&&(info.status === 4 || info.status === 3)">鑱旂郴楠戞墜</view>
+ <view class="btn you" v-if="info.status ===1 || info.status ===4 " @click="hexiaoOrder(info)" >鏀朵欢鏍搁攢</view>
+ <view class="btn you" v-if="info.status ===5 &&(info.overdueStatus ==0 || info.overdueStatus == 1)" @click="hexiaoOrder(info)" >纭鍒板簵</view>
+ <view class="btn you" v-if="info.status ===5 && (info.overdueStatus == 4 || info.overdueStatus == 2)" @click="hexiaoOrder(info)" >鍙栦欢鏍搁攢</view>
+ </view>
+ </view>
+ <u-popup :show="showCancel" round="15" :safeAreaInsetBottom="false" mode="center">
+ <view class="tc">
+ <view class="tc-contemt">
+ <view class="tc-contemt-title">纭畾鍙栨秷鎻愰啋</view>
+ <view class="tc-contemt-nr">
+ 鎮ㄧ‘璁ゅ彇娑堣璁㈠崟鍚楋紵
+ </view>
+ </view>
+ <view class="tc-btn">
+ <view class="tc-btn-item" @click="showCancel = false;currentOrder=null;">鎴戝啀鎯虫兂</view>
+ <view class="tc-btn-item" style="color: red;" @click="cancelOrderDo">纭鍙栨秷</view>
+ </view>
+ </view>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ import { mapState } from 'vuex'
+ import drawQrcode from 'weapp-qrcode'
+ var amapFile = require('@/utils/amap-wx.130.js')
+
+ export default {
+ computed: {
+ ...mapState(['navHeight', 'statusbarHeight'])
+ },
+ data() {
+ return {
+ id:null,
+ qrcodeImage:null,
+ showCancel:false,
+ info:{},
+ mapLat: 0,
+ mapLng: 0,
+ mapScale: 12,
+ markers: [],
+ polyline: []
+ }
+ },
+ onShow() {
+ this.showCancel=false
+ this.info={}
+ this.getOrderDetail()
+ },
+ onLoad(options) {
+ this.id = options.id
+ },
+ methods:{
+ previewImage(images,index = 0) {
+ uni.previewImage({
+ current: index,
+ urls: images
+ });
+ },
+ hexiaoOrder(item){
+ uni.navigateTo({
+ url:'/shop/pages/write-off/write-off'
+ })
+ },
+ contactPhoneDo(phone){
+ if(phone !=null &&phone!=''){
+ uni.makePhoneCall({
+ phoneNumber:phone
+ })
+ }
+ },
+ cancelOrder(item){
+ this.showCancel = !this.showCancel
+ },
+ async cancelOrderDo(){
+ var that =this
+ let res = await that.$u.api.cancelOrder({ orderId: this.id });
+ if (res.code === 200 ) {
+ this.showCancel = false
+ uni.$emit('updateOrder',{info:this.info,delete:0})
+ that.getOrderDetail()
+ }
+ },
+ async showQrcodeImg(){
+ if((this.info.type ===0 && this.info.status >=1 &&this.info.status <7)
+ || (this.info.type ===1 && (this.info.status ===1 || (this.info.takeShopId && this.info.status ===5)))){
+ if(this.qrcodeImage){
+ return
+ }
+ this.qrcodeImage=null
+ var that =this
+ drawQrcode({
+ canvasId: 'qrcodeCanvas',
+ text: this.info.memberVerifyCode,
+ width: 180,
+ height: 180,
+ correctLevel: 2
+ })
+ setTimeout(() => {
+ uni.canvasToTempFilePath({
+ canvasId: 'qrcodeCanvas',
+ success: (res) => {
+ that.qrcodeImage = res.tempFilePath
+ }
+ }, this)
+ }, 100)
+ }
+
+ },
+ copyCode(txt) {
+ if (!txt) {
+ return
+ }
+ uni.setClipboardData({
+ data: txt,
+ success: () => {
+ uni.showToast({
+ title: '宸插鍒跺埌绮樿创鏉�',
+ icon: 'none'
+ })
+ }
+ })
+ },
+
+ goBack(){
+ uni.navigateBack({delta:-1})
+ },
+ async getOrderDetail(){
+ var that =this
+ let res = await this.$u.api.shopOrderDetail( {orderId:this.id} )
+ if (res.code === 200) {
+ this.info = res.data
+ uni.$emit('updateOrder',{info:this.info,delete:0})
+ if (this.info.type === 1 && this.info.status === 4) {
+ this.getRoutePlanning()
+ }
+ }
+ },
+ getRoutePlanning() {
+ var that = this
+ var driverLat = this.info.driverLat
+ var driverLng = this.info.driverLng
+ var depositShopLat = this.info.depositShopLat
+ var depositShopLng = this.info.depositShopLng
+
+ console.log('getRoutePlanning called', driverLat, driverLng, depositShopLat, depositShopLng)
+
+ if (!driverLat || !driverLng || !depositShopLat || !depositShopLng) {
+ console.log('鍧愭爣缂哄け')
+ return
+ }
+
+ this.mapLat = driverLat
+ this.mapLng = driverLng
+
+ var myAmapFun = new amapFile.AMapWX({ key: this.$gaodeMapKey })
+ myAmapFun.getDrivingRoute({
+ origin: driverLng + ',' + driverLat,
+ destination: depositShopLng + ',' + depositShopLat,
+ success: function(data) {
+ console.log('鑾峰彇璺緞瑙勫垝鎴愬姛 data:', data)
+ console.log('data keys:', Object.keys(data))
+ console.log('data.paths:', data.paths)
+ console.log('driverLng:', driverLng, 'driverLat:', driverLat, 'depositShopLng:', depositShopLng, 'depositShopLat:', depositShopLat)
+ var points = []
+ if (data.paths && data.paths.length > 0) {
+ var path = data.paths[0]
+ console.log('path:', path)
+ console.log('path keys:', Object.keys(path))
+
+ var steps = path.steps || path.routs || path.roads || []
+ if (steps.length === 0 && path.distance) {
+ steps = [path]
+ }
+
+ console.log('steps:', steps)
+
+ if (steps && steps.length > 0) {
+ for (var i = 0; i < steps.length; i++) {
+ var step = steps[i]
+ console.log('step:', step)
+ console.log('step keys:', step ? Object.keys(step) : 'null')
+
+ var polylineStr = step.polyline || step.Polyline || step.path || step.line || step.road || ''
+ console.log('polylineStr:', polylineStr)
+
+ if (!step || !polylineStr) continue
+ var stepPoints = polylineStr.split(';')
+ if (!stepPoints || stepPoints.length === 0) continue
+ for (var j = 0; j < stepPoints.length; j++) {
+ if (!stepPoints[j]) continue
+ var point = stepPoints[j].split(',')
+ if (!point || point.length < 2) continue
+ points.push({
+ latitude: parseFloat(point[1]),
+ longitude: parseFloat(point[0])
+ })
+ }
+ }
+ }
+ }
+ console.log('points:', points)
+
+ that.polyline = [{
+ points: points,
+ color: '#00c47c',
+ width: 10,
+ arrowLine: true
+ }]
+ console.log('polyline set:', that.polyline)
+
+ that.markers = [
+ {
+ id: 1,
+ latitude: parseFloat(driverLat),
+ longitude: parseFloat(driverLng),
+ iconPath: '/static/icon/start.png',
+ width: 30,
+ height: 40,
+ anchor: { x: 0.5, y: 1 }
+ },
+ {
+ id: 2,
+ latitude: parseFloat(depositShopLat),
+ longitude: parseFloat(depositShopLng),
+ iconPath: '/static/icon/end.png',
+ width: 30,
+ height: 40,
+ anchor: { x: 0.5, y: 1 }
+ },
+ {
+ id: 3,
+ latitude: parseFloat(driverLat),
+ longitude: parseFloat(driverLng),
+ iconPath: '/static/icon/dizhi.png',
+ width: 24,
+ height: 30,
+ anchor: { x: 0.5, y: 0.5 },
+ callout: {
+ content: '棰勮鍒板簵鏃堕棿\n' + (that.info.expectedDepositTime || ''),
+ color: '#222222',
+ fontSize: 14,
+ borderRadius: 4,
+ padding: 8,
+ display: 'ALWAYS',
+ bgColor: 'rgba(255, 255, 255, 0.95)'
+ }
+ }
+ ]
+
+ if (points.length > 0) {
+ that.mapLat = points[Math.floor(points.length / 2)].latitude
+ that.mapLng = points[Math.floor(points.length / 2)].longitude
+ }
+ },
+ fail: function(err) {
+ console.error('鑾峰彇璺緞瑙勫垝澶辫触', err)
+ that.markers = [
+ {
+ id: 1,
+ latitude: parseFloat(driverLat),
+ longitude: parseFloat(driverLng),
+ iconPath: '/static/icon/start.png',
+ width: 30,
+ height: 40,
+ anchor: { x: 0.5, y: 1 }
+ },
+ {
+ id: 2,
+ latitude: parseFloat(depositShopLat),
+ longitude: parseFloat(depositShopLng),
+ iconPath: '/static/icon/end.png',
+ width: 30,
+ height: 40,
+ anchor: { x: 0.5, y: 1 }
+ }
+ ]
+ }
+ })
+ }
+
+ }
+ }
+</script>
+<style>
+ page {
+ background-color: #F8F9FB;
+ }
+</style>
+<style lang="scss" scoped>
+ .detail {
+ width: 100%;
+ .tips {
+ width: 100%;
+ height: 80rpx;
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ background: #FFE9E9;
+ position: fixed;
+ bottom: calc(30rpx + env(safe-area-inset-bottom));
+ left: 0;
+ display: flex;
+ align-items: center;
+ image {
+ width: 28rpx;
+ height: 28rpx;
+ margin-right: 16rpx;
+ }
+ text {
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #FF0000;
+ }
+ }
+ .footer {
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ z-index: 9;
+ background-color: #ffffff;
+ .footer-btns {
+ width: 100%;
+ height: 100rpx;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ .kong {
+ border: 1rpx solid #B2B2B2;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #666666;
+ }
+ .you {
+ background: #10B2FA;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #FFFFFF;
+ }
+ .btn {
+ width: 160rpx;
+ height: 64rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 32rpx;
+ margin-left: 20rpx;
+ }
+ }
+ }
+ .head0{
+ background: #1ba8fa;
+ }
+ .head1{
+ background: #E4730B;
+ }
+ .head {
+ width: 100%;
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 9;
+ .head-nav {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ image {
+ width: 48rpx;
+ height: 48rpx;
+ }
+ text {
+ font-weight: 500;
+ font-size: 32rpx;
+ color: #FFFFFF;
+ }
+ }
+ }
+ .nr {
+ width: 100%;
+ height: 264rpx;
+ padding: 22rpx 30rpx;
+ box-sizing: border-box;
+ // background-color: #E4730B;
+ .nr-status {
+ display: flex;
+ align-items: baseline;
+ text {
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #FFFFFF;
+ margin-right: 16rpx;
+ }
+ .nr-status-type {
+ width: 154rpx;
+ height: 38rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #FFFFFF;
+ border-radius: 8rpx;
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #FA8010;
+ }
+ .nr-status-type1 {
+ width: 158rpx;
+ height: 38rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #FFFFFF;
+ border-radius: 8rpx;
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #10B2FA;
+ margin-left: 16rpx;
+ }
+ }
+ .nr-desc {
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #FFFFFF;
+ margin-top: 12rpx;
+ }
+ .item {
+ width: 100%;
+ padding: 30rpx;
+ box-sizing: border-box;
+ background: #FFFFFF;
+ border-radius: 16rpx;
+ margin-top: 30rpx;
+ map {
+ width: 100%;
+ height: 362rpx;
+ border-radius: 16rpx;
+ }
+ .addr {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ .addr-link{
+ position: absolute;
+ top: 10rpx;
+ right:0px;
+ display: inline-block;
+ }
+ .addr-item {
+ padding-left: 58rpx;
+ box-sizing: border-box;
+ position: relative;
+ margin-bottom: 40rpx;
+ &:last-child {
+ margin-bottom: 0 !important;
+ }
+ .txt-d{
+ font-weight: 400 !important;
+ font-size: 30rpx !important;
+ color: #333333;
+ line-height: 42rpx;
+ text-align: left;
+ font-style: normal;
+ }
+ .txt-d1{
+ font-weight: 400 !important;
+ font-size: 26rpx !important;
+ color: #333333;
+ line-height: 36rpx;
+ text-align: left;
+ font-style: normal;
+ }
+ image{
+ width: 22rpx;
+ margin-left: 22rpx;
+ }
+ .bg {
+ background: #10B2FA;
+ }
+ .bg1 {
+ background-color: #FA8010;
+ }
+ .xiantiao {
+ width: 2rpx;
+ height: 100%;
+ position: absolute;
+ top: 24px;
+ left: 20rpx;
+ border-right: 2rpx dashed #E5E5E5;
+ }
+ .ji {
+ position: absolute;
+ top: 10rpx;
+ left: 4rpx;
+ width: 40rpx;
+ height: 40rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #FFFFFF;
+ }
+ text {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #999999;
+ margin-top: 10rpx;
+ }
+ .addr-item-top {
+ display: flex;
+ align-items: center;
+ text {
+ font-weight: 600;
+ font-size: 30rpx;
+ color: #222222;
+ }
+ image {
+ width: 13rpx;
+ margin-left: 12rpx;
+ }
+ }
+ }
+ }
+ .xl {
+ width: 100%;
+ .xl-item {
+ width: 100%;
+ margin-bottom: 26rpx;
+ &:last-child {
+ margin: 0 !important;
+ }
+ .xl-item-top {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ text {
+ font-weight: 600;
+ font-size: 28rpx;
+ color: #333333;
+ }
+ }
+ .xl-item-bottom {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 12rpx;
+ text {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #8C939F;
+ }
+ }
+ }
+ }
+ .comment{
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ .comment-top {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ text {
+ &:nth-child(1) {
+ font-weight: 600;
+ font-size: 30rpx;
+ color: #222222;
+ }
+ &:nth-child(2) {
+ font-weight: 500;
+ font-size: 36rpx;
+ color: #FE2C2E;
+ &:before {
+ content: "锟�";
+ font-weight: 500;
+ font-size: 24rpx;
+ color: #FE2C2E;
+ }
+ }
+ }
+ }
+ .comment-score{
+ // font-weight: 600;
+ font-size: 28rpx;
+ color: #333333;
+ margin: 10rpx 0;
+ display: flex;
+ width: 100%;
+ .score-item{
+ flex:1;
+ margin: 20rpx 0;
+ }
+ }
+ .comment-row{
+ display: flex;
+ flex-wrap: wrap;
+ .comment-image {
+ margin: 10rpx;
+ width: 100rpx;
+ height: 100rpx;
+ border-radius: 8rpx;
+ border:1px solid #f2f2f2;
+ overflow: hidden;
+ image {
+ width: 100%;
+ }
+ }
+ }
+
+ }
+ .tuikuan {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ .tuikuan-top {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ text {
+ &:nth-child(1) {
+ font-weight: 600;
+ font-size: 30rpx;
+ color: #222222;
+ }
+ &:nth-child(2) {
+ font-weight: 500;
+ font-size: 36rpx;
+ color: #FE2C2E;
+ &:before {
+ content: "锟�";
+ font-weight: 500;
+ font-size: 24rpx;
+ color: #FE2C2E;
+ }
+ }
+ }
+ }
+ .tuikuan-bottom {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 8rpx;
+ text {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #666666;
+ }
+ }
+ }
+ .item-qrcode {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ margin-top: 40rpx;
+ image {
+ width: 360rpx;
+ height: 360rpx;
+ }
+ text {
+ &:nth-child(2) {
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #222222;
+ margin-top: 12rpx;
+ }
+ &:nth-child(3) {
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #999999;
+ margin-top: 12rpx;
+ }
+ }
+ }
+ .item-x {
+ width: 100%;
+ height: 1rpx;
+ margin: 30rpx 0;
+ background-color: #E5E5E5;
+ }
+ .item-title {
+ font-weight: 600;
+ font-size: 30rpx;
+ color: #222222;
+ }
+ .item-infos {
+ width: 100%;
+ margin-top: 18rpx;
+ .item-infos-item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20rpx;
+ &:last-child {
+ margin: 0 !important;
+ }
+ .item-infos-item-left {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #999999;
+ }
+ .item-infos-item-right {
+ display: flex;
+ align-items: center;
+ text {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #666666;
+ }
+ image {
+ width: 24rpx;
+ margin-left: 16rpx;
+ }
+ }
+ }
+ }
+ .item-list {
+ width: 100%;
+ .item-list-row {
+ width: 100%;
+ margin-bottom: 24rpx;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ &:last-child {
+ margin-bottom: 0 !important;
+ }
+ .item-form-label {
+ width: 300rpx;
+ flex-shrink: 0;
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #666666;
+ }
+ .item-form-val {
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #333333;
+ }
+ .price {
+ &:before {
+ content: "锟�";
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #FE2C2E;
+ }
+ }
+ .item-form-list {
+ max-width: 360rpx;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20rpx;
+ .item-form-list-row {
+ width: 88rpx;
+ height: 88rpx;
+ border-radius: 8rpx;
+ overflow: hidden;
+ image {
+ width: 100%;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3