kxmall-ui/kxmall-app-ui/pages/order/detail.vue

<template>
  <view>
    <view class="map" v-if="[14,16,20,30].indexOf(orderDetail.status)>-1 && orderDetail.shippingType == 1">
      <map style="height: 600rpx;width:750rpx" show-location id="map" ref="map" :markers="markers" :polyline="polyline">
      </map>
    </view>
    <!-- 核销码显示区域 -->
    <view class="verification-code" v-if="orderDetail.status === 20 && orderDetail.shippingType == 2">
      <image :src="verificationCode" mode="widthFix" style="width: 300rpx; height: 300rpx"></image>
      <view class="code-text">核销码: {{ verificationText }}</view>
      <view class="code-hint">请向店员出示此核销码</view>
    </view>
    <view class="state">
      <view class="state-text" v-if="orderDetail.status !== 10"
            :style="state === 5 || state === 8?'color:#1B1C33;font-size:20px':''">
        {{ orderDetail.orderType === 1 ? '(自提)' : '' }}{{ stateText }}
      </view>
      <view class="state-text" v-if="state === 0">
        {{ '等待支付 剩余' + num(minutes) }}:{{ num(seconds) }}
      </view>
      <view class="state-timeText">
        {{ state == 0 ? '逾期未支付将会自动取消' : '' }}
        {{ (state == 1 || state == 2) && orderDetail.shippingType == 1 ? '预约送达时间' : '' }}
        {{ (state == 1 || state == 2) && orderDetail.shippingType == 2 ? '预约取货时间' : '' }}
        {{ state == 3 || state == 4 ? '订单已完成' : '' }}
        {{ state == 5 ? '订单已取消' : '' }}
        {{ state == 8 ? '订单已取消' : '' }}
        {{ orderDetail.status == 12 ? '已拼单' + orderDetail.groupShopVo.alreadyBuyNumber + '件' : '' }}
        <!-- {{orderDetail.status==80&&orderDetail.status==90?'订单已取消':orderDetail.status==10&&orderDetail.status==12?'逾期未支付将会自动取消':orderDetail.status==40&&orderDetail.status==50?'订单已送达':orderDetail.status==70?'订单已取消':'预约送达时间 '}} -->
      </view>
      <view class="state-time">
        {{ (state == 1 || state == 2) && orderDetail.shippingType == 1 ? orderDetail.predictTime : '' }}
        {{ (state == 1 || state == 2) && orderDetail.shippingType == 2 ? orderDetail.predictTime.replaceAll('送达', '取货') : '' }}
        <!-- {{state == 3 || state == 4?'订单已完成':''}} -->
        {{ state == 3 || state == 4 || state == 5 || state == 8 ? timeFormat(orderDetail.updateTime) : '' }}
        {{ orderDetail.status == 12 ? '拼团结束:' + orderDetail.groupShopVo.endTime : '' }}
      </view>
      <view @click="refundOrder" class="state-btn state-btn-prohibit" v-if="state == 1 && !orderDetail.payIntegral"
            style="margin: 12px auto;">
        申请退款
      </view>
      <view style="display: flex; justify-content: center; align-items: center; margin: 12px auto;" v-if="state == 3">
        <view @click="orderAfterSales" class="state-btn state-btn-prohibit" style="margin: 12px auto;">
          申请售后
        </view>
        <view @click="appraiseOrder" class="state-btn" style="margin: 12px auto;">
          立即评价
        </view>
      </view>
      <view @click="orderAfterSales" class="state-btn state-btn-prohibit" v-if="orderDetail.status == 50"
            style="margin: 12px auto;">
        申请售后
      </view>
      <view v-if="orderDetail.status === 10" style="display: flex;justify-content: center;">
        <view open-type="contact" class="state-btn state-btn-prohibit" style="width: 69px;"
              @click="naviageToPage('pages/service/service')">
          <button open-type="contact" class="contact-btn">客服</button>
        </view>
        <view @click="cancelOrder" class="state-btn state-btn-prohibit">
          取消订单
        </view>
        <view @click="confirm" class="state-btn state-btn-ac">
          立即付款
        </view>
      </view>
    </view>
    
    <view class="goods">
      
      <view class="goods-one" v-for="(item, index) in orderDetail.productList" :key="index">
        <image class="goods-img" :src="JSON.parse(item.img)[0].url"></image>
        <view class="goods-text">
          <view class="goods-tag">
            <view class="goods-name">{{ item.productTitle }}</view>
            <view class="goods-price">￥{{ item.price }}</view>
          
          </view>
          <view class="goods-number">×{{ item.num }}</view>
        </view>
      </view>
      <view v-if="orderDetail.couponPrice" class="yt-list-cell b-b">
        <text class="cell-tit clamp">
          优惠券减
        </text>
        <text class="cell-tip red">
          -￥{{ orderDetail.couponPrice | priceFormat }}
        </text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp" style="color: #333333;">加急费用</text>
        <text class="cell-tip">{{ orderDetail.urgentFee || '0.00' }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp" style="color: #333333;">合计</text>
        <text class="cell-tip" v-if="!orderDetail.payIntegral">￥{{ orderDetail.payPrice }}</text>
        <text class="cell-tip" style="color: red" v-if="orderDetail.payIntegral">积分{{ orderDetail.payIntegral }}
        </text>
      </view>
    </view>
    
    
    <!-- 配送信息 -->
    <view class="yt-list">
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp yt-list-title">地址信息</text>
      
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">联系地址</text>
        <text class="cell-tip">{{ orderDetail.userAddress }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">联系人</text>
        <text class="cell-tip ">{{ orderDetail.realName }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">期望时间</text>
        <text class="cell-tip ">{{ orderDetail.predictTime }}</text>
      </view>
    
    </view>
    <!-- 照片信息 -->
    <view class="yt-list" v-if="screenshotList.length > 0">
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp yt-list-title">照片信息</text>
      </view>
      <view class="screenshot-groups">
        <view class="screenshot-group" v-for="(group, groupKey) in groupedScreenshots" :key="groupKey">
          <view class="group-title">
            {{ groupKey }}
          </view>
          <view class="screenshot-grid">
            <view class="screenshot-item" v-for="(item, index) in group" :key="index" @click="previewImage(item.imageUrl)">
              <image class="screenshot-image" :src="item.imageUrl" mode="aspectFill"></image>
              <view class="screenshot-overlay">
                <view class="delete-btn" @click.stop="deleteScreenshot(item.id)">删除</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 支付信息 -->
    <view class="yt-list">
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp yt-list-title">支付信息</text>
      
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">订单号</text>
        <text class="cell-tip">{{ orderDetail.orderId }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">备注信息</text>
        <text class="cell-tip ">{{ orderDetail.remark }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">支付方式</text>
        <text class="cell-tip ">{{ showPayment(orderDetail.payChannel) }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">下单时间</text>
        <text class="cell-tip ">{{ timeFormat(orderDetail.createTime) }}</text>
      </view>
      <view v-if="orderDetail.payTime" class="yt-list-cell b-b">
        <text class="cell-tit clamp">支付时间</text>
        <text class="cell-tip ">{{ timeFormat(orderDetail.payTime) }}</text>
      </view>
    
    </view>
    
    <!-- 底部 -->
    <!-- <view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{orderDetail.actualPrice | priceFormat}}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view> -->
  
  </view>
</template>

<script>
let riderTimer = null,
    timerInterval = null, // 添加定时器引用
    mapContext = null,
    riderLastLocation = null

export default {
  filters: {
    priceFormat(price) {
      return price
    },
    dateFormat(time) {
      return 'temp'
      //return formatDate(new Date(time),'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      verificationCode: '', // 核销码图片
      verificationText: '', // 核销码文本
      timeing: '2020-03-01 13:45',
      minutes: 0,
      seconds: 0,
      Total: 0,
      distributionFee: 123, //配送费
      // 配送信息
      DisInformation: {
        address: '广东省深证市中山大道1号星汇维港购物',
        contacts: '17671467812',
        expectedTime: '9月21日 13:20'
      },
      // 支付信息
      orderInformation: {
        orderNumber: '4567 8123 4567 890',
        information: '',
        paymentMethod: '微信支付',
        orderTime: '2018-04-28 13:58',
        paymentTime: '2018-04-28 13:58'
      },
      orderId: '',
      stateText: '', //状态文字说明
      orderDetail1: {
        skuList: [{
          img: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3529759643,1765872423&fm=26&gp=0.jpg',
          name: '芥蓝',
          price: 10,
          number: '2'
        },
          {
            img: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3529759643,1765872423&fm=26&gp=0.jpg',
            name: '芥蓝',
            price: 10,
            number: '2'
          }
        ],
        totalotPrice: 0,
        totalPrice: 0, //商品折扣（仅算VIP和限时打折）后总价
        coupon: undefined,
        mono: '',
        orderDetail: [],
      },
      orderDetail: {
        skuList: [],
        totalotPrice: 0,
        totalPrice: 0, //商品折扣（仅算VIP和限时打折）后总价
        coupon: undefined,
        mono: '',
        status: 20
      },
      statusMap: {
        10: '未付款',
        12: '等待团购活动结束',
        14: '待配货',
        16: '配货中',
        20: '待出库',
        30: '待收货',
        32: '配送异常',
        40: '待评价',
        50: '已完成',
        60: '退款中',
        70: '已退款',
        80: '已取消',
        90: '已取消(系统)'
      },
      state: 4,
      markers: [{
        id: 1,
        longitude: null,
        latitude: null,
        iconPath: '../../static/icon/18.png',
        width: 40,
        height: 40
      },
        {
          id: 2,
          longitude: null,
          latitude: null,
          iconPath: '../../static/icon/08.png',
          width: 40,
          height: 40
        }
      ],
      polyline: [],
      screenshotList: [] // 照片列表
    }
  },
  watch: {
    second: {
      handler(newVal) {
        this.num(newVal)
        
      }
    },
    minute: {
      handler(newVal) {
        this.num(newVal)
      }
    },
  },
  computed: {
    includePoints() {
      // return this.markers.map(({
      //   latitude,
      //   longitude
      // }) => {
      //   return {
      //     latitude,
      //     longitude
      //   }
      // })
      const {
        latitude,
        longitude
      } = this.markers[1]
      return [{
        latitude,
        longitude
      }]
    },
    // 按用户类型和上传类型分组照片
    groupedScreenshots() {
      const groups = {}
      this.screenshotList.forEach(item => {
        const userTypeText = this.getUserTypeText(item.userType)
        const screenshotTypeText = this.getScreenshotTypeText(item.screenshotType)
        const timeText = this.timeFormat(item.uploadTime)
        const groupKey = `${userTypeText}-${screenshotTypeText}-${timeText}`
        
        if (!groups[groupKey]) {
          groups[groupKey] = []
        }
        groups[groupKey].push(item)
      })
      return groups
    }
  },
  mounted() {
    const that = this
    uni.getLocation({
      success() {
        mapContext = uni.createMapContext('map', that)
      },
      fail(e) {
        uni.showModal({
          content: e
        })
      },
      complete() {
        that.loadData()
      }
    })
  },
  onLoad(option) {
    this.orderId = option.orderid
  },
  onUnload() {
    if (timerInterval) {
      clearInterval(timerInterval);
      timerInterval = null;
    }
    if (riderTimer) {
      clearTimeout(riderTimer)
      riderTimer = null
    }
    riderLastLocation = null
  },
  methods: {
    naviageToPage(page, title) {
      const that = this
      this.ismask = false
      if (title) {
        console.log(title, 'jinlai')
        title ? title : ''
        uni.navigateTo({
          url: page + '&title=' + title
        })
      } else {
        console.log(title)
        uni.navigateTo({
          url: page
        })
      }
      // console.log(that.categoryButtomList[index].title)
      
    },
    //申请退款
    //申请退款
    refundOrder() {
      const that = this
      uni.showModal({
        title: '申请退款',
        content: '请填写退款原因',
        editable: true, // 允许输入
        placeholderText: '请输入退款原因', // 输入框提示文字
        success: (e) => {
          if (e.confirm) {
            // 检查用户是否输入了退款原因
            if (!e.content || e.content.trim() === '') {
              that.$api.msg('请输入退款原因')
              return
            }
            
            // that.submiting = true
            that.$api.request('get', 'order/app/refund', {
              orderId: this.orderDetail.orderId,
              reason: e.content // 添加退款原因参数
            }, failres => {
              // that.submiting = false
              that.$api.msg(failres.msg)
            }).then(res => {
              that.loadData()
              // that.submiting = false
              // item.status = 80
            })
          }
        }
      })
    },
    //评价订单
    appraiseOrder() {
      uni.navigateTo({
        url: '/pages/order/appraise?orderid=' + this.orderDetail.id
      })
    },
    //申请售后
    orderAfterSales() {
      uni.navigateTo({
        url: "/pages/order/refund?id=" + this.orderDetail.id
      })
    },
    //取消订单
    cancelOrder(item) {
      const that = this
      uni.showModal({
        title: '取消？',
        content: '您确定要取消此订单吗？',
        success: (e) => {
          if (e.confirm) {
            // that.submiting = true
            that.$api.request('get', 'order/app/cancel', {
              orderId: this.orderDetail.orderId
            }, failres => {
              // that.submiting = false
              that.$api.msg(failres.msg)
            }).then(res => {
              that.loadData()
              // that.submiting = false
              // item.status = 80
            })
          }
        }
      })
      
    },
    // 倒计时
    num(n) {
      return n < 10 ? '0' + n : '' + n
    },
    timer() {
      var _this = this;
      this.countDown(); // 初始化倒计时
      
      // 清除之前的定时器
      if (this.timerInterval) {
        clearInterval(this.timerInterval);
      }
      
      this.timerInterval = setInterval(function () {
        if (_this.seconds === 0) {
          if (_this.minutes === 0) {
            clearInterval(_this.timerInterval);
            _this.autoCancelOrder(); // 时间到，自动取消订单
            return;
          }
          _this.minutes--;
          _this.seconds = 59;
        } else {
          _this.seconds--;
        }
        
        // 每分钟检查一次是否需要取消订单
        if (_this.seconds === 0 && _this.minutes % 1 === 0) {
          _this.countDown(); // 重新计算剩余时间，防止客户端时间不准
        }
      }, 1000);
    },
    sum() {
      var x = 0;
      for (var i = 0; i < this.orderDetail1.productList.length; ++i) {
        x += this.orderDetail1.productList[i].price;
      }
      console.log(x)
      this.Total = x
    },
    countDown() {
      const now = new Date().getTime();
      const createTime = new Date(this.orderDetail.createTime).getTime();
      const expireTime = createTime + (60000 * 15); // 15分钟后过期
      
      // 如果已经过期
      if (now >= expireTime) {
        this.minutes = 0;
        this.seconds = 0;
        this.autoCancelOrder(); // 自动取消订单
        return;
      }
      
      // 计算剩余时间
      const remainingTime = expireTime - now;
      this.minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
      this.seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
      
      // 如果剩余时间小于等于0，自动取消订单
      if (remainingTime <= 0) {
        this.minutes = 0;
        this.seconds = 0;
        this.autoCancelOrder();
      }
    },
    // 自动取消订单
    autoCancelOrder() {
      const that = this;
      if (this.orderDetail.status === 10) { // 只有未支付订单才需要取消
        that.$api.request('get', 'order/app/cancel', {
          orderId: this.orderDetail.orderId
        }, failres => {
          that.$api.msg(failres.msg);
        }).then(res => {
          //页面重新加载
          that.loadData(); // 刷新页面数据
          uni.showToast({
            title: '订单已自动取消',
            icon: 'none'
          });
        });
      }
    },
    //获取订单详情
    loadData() {
      const that = this
      that.$api.request('get', 'order/app/getOrderDetail', {
        orderId: that.orderId
      }).then(res => {
        that.orderDetail = res.data
        that.markers[0].longitude = res.data.longitude
        that.markers[0].latitude = res.data.latitude
        mapContext.moveToLocation({
          longitude: res.data.longitude,
          latitude: res.data.latitude
        })
        // 如果是自提订单且状态为待取货，获取核销码
        if (res.data.status === 20 && res.data.shippingType === 2) {
          that.getVerificationCode()
        }
        if (that.orderDetail.status === 10) {
          this.state = 0
          this.stateText = '待支付'
          this.timer()
          this.countDown()
        }
        if (res.data.status === 12) {
          this.state = 10
          this.stateText = '等待团购活动结束'
        }
        if (res.data.status === 14 || res.data.status === 16) {
          this.state = 1
          this.stateText = '备货中'
          this.getRiderLocation(res.data.postId, res.data.id)
        }
        if (res.data.status === 20 && res.data.shippingType === 1) {
          this.state = 1
          this.stateText = '待配送'
          this.getRiderLocation(res.data.postId, res.data.id)
        }
        if (res.data.status === 20 && res.data.shippingType === 2) {
          this.state = 1
          this.stateText = '待取货'
        }
        if (res.data.status === 30) {
          this.state = 2
          this.stateText = '配送中'
          this.getRiderLocation(res.data.postId, res.data.id)
        }
        if (res.data.status === 40) {
          this.state = 3
          this.stateText = '已完成'
        }
        if (res.data.status === 50) {
          this.state = 4
          this.stateText = '已完成'
        }
        if (res.data.status === 80 || res.data.status === 90) {
          this.state = 5
          this.stateText = '已取消'
        }
        if (res.data.status === 32) {
          this.state = 6
          this.stateText = '配送异常'
        }
        if (res.data.status === 60) {
          this.state = 7
          this.stateText = '退款中'
        }
        if (res.data.status === 70) {
          this.state = 8
          this.stateText = '已退款'
        }
        //this.sum()
        // 加载照片列表
        that.loadScreenshotList()
      })
      
    },
    getRiderLocation(riderId, orderId) {
      this.$api.request('get', 'order/app/riderLocation', {
        riderId: riderId,
        orderId: orderId
      }).then(({
                 data
               }) => {
        this.riderLocation = data
        this.markers[1].longitude = data.longitude
        this.markers[1].latitude = data.latitude
        if (riderLastLocation !== (data.latitude + ',' + data.longitude)) {
          mapContext.includePoints({
            padding: [100],
            points: [{
              longitude: data.longitude,
              latitude: data.latitude
            }, {
              longitude: this.orderDetail.longitude,
              latitude: this.orderDetail.latitude
            }],
            fail(e) {
              console.log(e)
            },
            success(res) {
              console.log(res)
            }
          })
          this.getRoute()
        }
        riderLastLocation = data.latitude + ',' + data.longitude
        if (riderTimer) {
          clearTimeout(riderTimer)
          riderTimer = null
        }
        riderTimer = setTimeout(() => {
          this.getRiderLocation(riderId, orderId)
        }, 30 * 1000)
      })
    },
    // 获取核销码
    getVerificationCode() {
      this.$api.request('get', 'order/app/verificationCode', {
        orderId: this.orderId
      }).then(res => {
        this.verificationCode = 'data:image/png;base64,' + res.data.image;
        this.verificationText = res.data.code; // 显示核销码文本
      })
    },
    getRoute() {
      var that = this;
      this.$api.request('get', 'https://restapi.amap.com/v5/direction/bicycling', {
        key: that.$api.defConfig().mapKey,
        origin: this.orderDetail.longitude + ',' + this.orderDetail.latitude,
        destination: this.riderLocation.longitude + ',' + this.riderLocation.latitude,
        show_fields: 'polyline'
      }).then(res => {
        const steps = res.route.paths[0].steps
        this.polyline = [{
          points: [],
          color: '#5298ff',
          width: 5
        }]
        steps.forEach(({
                         polyline
                       }) => {
          const paths = polyline.split(';')
          paths.forEach(el => {
            const _ = el.split(',')
            this.polyline[0].points.push({
              latitude: _[1],
              longitude: _[0]
            })
          })
        })
      })
    },
    timeFormat(time) {
      if (time == undefined) {
        return
      }
      time = time.replace(/\-/g, '/')
      var date = new Date(time);
      var month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + parseInt(date.getMonth() + 1)
      var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
      return date.getFullYear() + '-' + month + '-' + day + ' ' + date.getHours() + ':' + date.getMinutes()
    },
    showPayment(val) {
      if (val === 'BALANCE') {
        return '余额支付'
      }
      if (val === 'INTEGRAL') {
        return '积分支付'
      }
      return '微信支付'
    },
    //确认支付
    confirm() {
      // #ifdef APP-PLUS
      this.$api.msg('演示环境不支持支付')
      return
      // #endif
      uni.showLoading({})
      const that = this
      that.$api.request('get', 'order/app/wxPrepay', {
        orderId: this.orderDetail.orderId
      }, failres => {
        that.submiting = false
        that.$api.msg(failres.msg)
      }).then(prepayRes => {
        uni.hideLoading()
        that.submiting = false
        //#ifdef MP-WEIXIN
        const payParam = {
          appId: prepayRes.data.appId,
          nonceStr: prepayRes.data.nonceStr,
          package: prepayRes.data.packageValue,
          timeStamp: prepayRes.data.timeStamp,
          signType: prepayRes.data.signType,
          paySign: prepayRes.data.paySign,
        }
        //#endif
        //#ifdef APP-PLUS
        const payParam = {
          appid: prepayRes.data.appId,
          noncestr: prepayRes.data.nonceStr,
          package: prepayRes.data.packageValue,
          partnerid: prepayRes.data.partnerId,
          prepayid: prepayRes.data.prepayId,
          timestamp: parseInt(prepayRes.data.timeStamp),
          sign: prepayRes.data.sign,
          signType: 'MD5'
        }
        //#endif
        //#ifdef MP-WEIXIN || APP-PLUS
        uni.requestPayment({
          provider: 'wxpay',
          //#ifdef MP-WEIXIN
          ...payParam,
          //#endif
          //#ifdef APP-PLUS
          orderInfo: payParam,
          //#endif
          success: function (res) {
            uni.redirectTo({
              url: '/pages/pay/success'
            })
          },
          fail: function (res) {
            // console.log("支付过程失败");
            // that.$api.msg(JSON.stringify(res))
          },
          complete: function (res) {
            console.log("支付过程结束")
          }
        });
        //#endif
        //#ifdef H5
        that.$jweixin.chooseWXPay({
          nonceStr: prepayRes.data.nonceStr,
          timestamp: prepayRes.data.timeStamp,
          package: prepayRes.data.packageValue,
          signType: prepayRes.data.signType,
          paySign: prepayRes.data.paySign,
          success: (e) => {
            //支付成功
            uni.redirectTo({
              url: '/pages/pay/success'
            })
          },
          fail: function (res) {
            console.log("支付过程失败");
            that.$api.msg(JSON.stringify(res))
          },
          complete: function (res) {
            console.log("支付过程结束")
          }
        })
        //#endif
      })
    },
    // 加载照片列表
    loadScreenshotList() {
      const that = this
      that.$api.request('get', 'order/screenshot/list/' + that.orderId).then(res => {
        that.screenshotList = res.data || []
      }).catch(err => {
        console.log('获取照片列表失败:', err)
        that.screenshotList = []
      })
    },
    // 获取用户类型文本
    getUserTypeText(userType) {
      const typeMap = {
        1: '用户',
        2: '师傅',
        3: '管理员'
      }
      return typeMap[userType] || '未知'
    },
    // 获取上传类型文本
    getScreenshotTypeText(screenshotType) {
      const typeMap = {
        0: '其他',
        1: '创建订单',
        2: '服务前',
        3: '服务中',
        4: '服务后',
        5: '问题反馈'
      }
      return typeMap[screenshotType] || '未知'
    },
    // 预览图片
    previewImage(imageUrl) {
      uni.previewImage({
        urls: [imageUrl],
        current: imageUrl
      })
    },
    // 删除照片
    deleteScreenshot(id) {
      const that = this
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这张照片吗？',
        success: (e) => {
          if (e.confirm) {
            that.$api.request('delete', 'order/screenshot/' + id).then(res => {
              that.$api.msg('删除成功')
              that.loadScreenshotList() // 重新加载照片列表
            }).catch(err => {
              that.$api.msg('删除失败')
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">

.verification-code {
  margin: 20px auto;
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}

.code-text {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.code-hint {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

page {
  background: $page-color-base;
  padding-bottom: 100upx;
}

.contact-btn {
  border: none;
  background-color: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  height: inherit;
  width: inherit;
}

.contact-btn::after {
  border: none;
}

.state {
  text-align: center;
  padding: 17px 0 12px;
  background-color: #fff;
  width: 100%;
  
  .state-text {
    font-size: 40upx;
    color: #2AAC34;
    
  }
  
  .state-timeText {
    color: #717171;
    font-size: 24upx;
    margin: 6px 0 2px;
  }
  
  .state-time {
    color: #1B1C33;
    font-size: 28upx;
  }
  
  .state-btn {
    width: 204upx;
    height: 68upx;
    line-height: 66upx;
    border-radius: 100px;
    margin: 0 auto;
    border: 1px solid #ddd;
    margin-top: 24upx;
    font-size: 15px;
    margin: 24upx 0 0 24upx;
    
  }
  
  .state-btn-prohibit {
    border-color: #C4C4CC;
    color: #C4C4CC;
  }
  
  .state-btn-ac {
    border-color: #2AAC34;
    color: #2AAC34;
    background-color: #2AAC34;
    color: #fff;
  }
  
  
}

.goods {
  margin-top: 20upx;
  background-color: #FFFFFF;
  overflow: hidden;
  
  .goods-one {
    padding: 40upx 0 30upx 0;
    margin: 0 30upx;
    height: 190upx;
    border-bottom: 1px solid #F1F1F1;
  }
  
  .goods-img {
    margin-top: 2upx;
    width: 118upx;
    height: 110upx;
    float: left;
  }
  
  .goods-text {
    margin-top: 6upx;
    margin-left: 32upx;
    width: 538upx;
    height: 110upx;
    float: left;
  }
  
  .goods-name {
    width: 500upx;
    line-height: 44upx;
    overflow: hidden;
    color: #333333;
    font-size: 32upx;
  }
  
  .goods-tag {
    margin-top: 10upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .goods-price {
    float: left;
    color: #333333;
    font-size: 32upx;
    line-height: 44upx;
  }
  
  .goods-yprice {
    margin-left: 16upx;
    float: left;
    color: #AEAEAE;
    font-size: 24upx;
    line-height: 44upx;
    text-decoration: line-through;
  }
  
  .goods-number {
    float: left;
    color: #333333;
    font-size: 32upx;
  }
}

.address-section {
  padding: 30upx 0;
  background: #fff;
  position: relative;
  
  .order-content {
    display: flex;
    align-items: center;
  }
  
  .icon-shouhuodizhi {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90upx;
    color: #888;
    font-size: 44upx;
  }
  
  .cen {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 28upx;
    color: $font-color-dark;
  }
  
  .name {
    font-size: 34upx;
    margin-right: 24upx;
  }
  
  .address {
    margin-top: 16upx;
    margin-right: 20upx;
    color: $font-color-light;
  }
  
  .icon-you {
    font-size: 32upx;
    color: $font-color-light;
    margin-right: 30upx;
  }
  
  .a-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 5upx;
  }
}

.goods-section {
  margin-top: 16upx;
  background: #fff;
  padding-bottom: 1px;
  
  .g-header {
    display: flex;
    align-items: center;
    height: 84upx;
    padding: 0 30upx;
    position: relative;
  }
  
  .logo {
    display: block;
    width: 50upx;
    height: 50upx;
    border-radius: 100px;
  }
  
  .name {
    font-size: 30upx;
    color: $font-color-base;
    margin-left: 24upx;
  }
  
  .g-item {
    display: flex;
    margin: 20upx 30upx;
    
    image {
      flex-shrink: 0;
      display: block;
      width: 140upx;
      height: 140upx;
      border-radius: 4upx;
    }
    
    .right {
      flex: 1;
      padding-left: 24upx;
      overflow: hidden;
    }
    
    .title {
      font-size: 30upx;
      color: $font-color-dark;
    }
    
    .spec {
      font-size: 26upx;
      color: $font-color-light;
    }
    
    .price-box {
      display: flex;
      align-items: center;
      font-size: 32upx;
      color: $font-color-dark;
      padding-top: 10upx;
      
      .price {
        margin-bottom: 4upx;
      }
      
      .number {
        font-size: 26upx;
        color: $font-color-base;
        margin-left: 20upx;
      }
    }
    
    .step-box {
      position: relative;
    }
  }
}

.yt-list {
  margin-top: 16upx;
  background: #fff;
  
}

.yt-list-cell-bor {
  border-bottom: 1px solid #F1F1F1;
}

.yt-list-cell {
  display: flex;
  align-items: center;
  padding: 10upx 30upx 10upx 40upx;
  line-height: 70upx;
  position: relative;
  
  &.cell-hover {
    background: #fafafa;
  }
  
  &.b-b:after {
    left: 30upx;
  }
  
  .cell-icon {
    height: 32upx;
    width: 32upx;
    font-size: 22upx;
    color: #fff;
    text-align: center;
    line-height: 32upx;
    background: #f85e52;
    border-radius: 4upx;
    margin-right: 12upx;
    
    &.hb {
      background: #ffaa0e;
    }
    
    &.lpk {
      background: #3ab54a;
    }
    
  }
  
  .cell-more {
    align-self: center;
    font-size: 24upx;
    color: $font-color-light;
    margin-left: 8upx;
    margin-right: -10upx;
  }
  
  .cell-tit {
    flex: 1;
    font-size: 26upx;
    color: $font-color-light;
    margin-right: 10upx;
  }
  
  .cell-tip {
    font-size: 26upx;
    color: $font-color-dark;
    
    &.disabled {
      color: $font-color-light;
    }
    
    &.active {
      color: $base-color;
    }
    
    &.red {
      color: $base-color;
    }
  }
  
  &.desc-cell {
    .cell-tit {
      max-width: 90upx;
    }
  }
  
  .desc {
    flex: 1;
    font-size: $font-base;
    color: $font-color-dark;
  }
  
  .yt-list-title {
    
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }
}

/* 支付列表 */
.pay-list {
  padding-left: 40upx;
  margin-top: 16upx;
  background: #fff;
  
  .pay-item {
    display: flex;
    align-items: center;
    padding-right: 20upx;
    line-height: 1;
    height: 110upx;
    position: relative;
  }
  
  .icon-weixinzhifu {
    width: 80upx;
    font-size: 40upx;
    color: #6BCC03;
  }
  
  .icon-alipay {
    width: 80upx;
    font-size: 40upx;
    color: #06B4FD;
  }
  
  .icon-xuanzhong2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60upx;
    height: 60upx;
    font-size: 40upx;
    color: $base-color;
  }
  
  .tit {
    font-size: 32upx;
    color: $font-color-dark;
    flex: 1;
  }
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 995;
  display: flex;
  align-items: center;
  width: 100%;
  height: 90upx;
  justify-content: space-between;
  font-size: 30upx;
  background-color: #fff;
  z-index: 998;
  color: $font-color-base;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);
  
  .price-content {
    padding-left: 30upx;
  }
  
  .price-tip {
    color: $base-color;
    margin-left: 8upx;
  }
  
  .price {
    font-size: 36upx;
    color: $base-color;
  }
  
  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280upx;
    height: 100%;
    color: #fff;
    font-size: 32upx;
    background-color: $base-color;
  }
}

/* 优惠券面板 */
.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9995;
  transition: .3s;
  
  .mask-content {
    width: 100%;
    min-height: 30vh;
    max-height: 70vh;
    background: #f3f3f3;
    transform: translateY(100%);
    transition: .3s;
    overflow-y: scroll;
  }
  
  &.none {
    display: none;
  }
  
  &.show {
    background: rgba(0, 0, 0, .4);
    
    .mask-content {
      transform: translateY(0);
    }
  }
}

/* 优惠券列表 */
.coupon-item {
  display: flex;
  flex-direction: column;
  margin: 20upx 24upx;
  background: #fff;
  
  .con {
    display: flex;
    align-items: center;
    position: relative;
    height: 120upx;
    padding: 0 30upx;
    
    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 100%;
      height: 0;
      border-bottom: 1px dashed #f3f3f3;
      transform: scaleY(50%);
    }
  }
  
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    height: 100upx;
  }
  
  .title {
    font-size: 32upx;
    color: $font-color-dark;
    margin-bottom: 10upx;
  }
  
  .time {
    font-size: 24upx;
    color: $font-color-light;
  }
  
  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 26upx;
    color: $font-color-base;
    height: 100upx;
  }
  
  .price {
    font-size: 44upx;
    color: $base-color;
    
    &:before {
      content: '￥';
      font-size: 34upx;
    }
  }
  
  .tips {
    font-size: 24upx;
    color: $font-color-light;
    line-height: 60upx;
    padding-left: 30upx;
  }
  
  .circle {
    position: absolute;
    left: -6upx;
    bottom: -10upx;
    z-index: 10;
    width: 20upx;
    height: 20upx;
    background: #f3f3f3;
    border-radius: 100px;
    
    &.r {
      left: auto;
      right: -6upx;
    }
  }
}

/* 照片信息样式 */
.screenshot-groups {
  padding: 0 30upx 20upx;
}

.screenshot-group {
  margin-bottom: 30upx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.group-title {
  font-size: 30upx;
  font-weight: 500;
  color: #909399;
  margin-bottom: 20upx;
  padding: 10upx 0;
  border-bottom: 1px solid #e5e5e5;
  padding-left: 10upx;
}

.screenshot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20upx;
}

.screenshot-item {
  position: relative;
  width: calc(33.333% - 14upx);
  aspect-ratio: 1;
  border-radius: 8upx;
  overflow: hidden;
  box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
  
  .screenshot-image {
    width: 100%;
    height: 100%;
  }
  
  .screenshot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    
    .delete-btn {
      background-color: #ff3b30;
      color: #fff;
      padding: 8upx 16upx;
      border-radius: 6upx;
      font-size: 24upx;
    }
  }
  
  &:hover .screenshot-overlay,
  &:active .screenshot-overlay {
    opacity: 1;
  }
}
</style>