front-end/ghsApp/src/admin/home/components/OrderItem.vue

<template>
  <view>
    <view @click="pageTo({ url: '/pagesOrder/detail?id=' + item.id })">
      <view class="order-top_box">
        <image class="code-pay-img" v-if="currentStatus == 1 && item.book == 0" @click.stop="pageTo({ url:'/admin/billing/toPay',query:{orderId:item.id,orderSn:item.orderSn,actPrice:item.actPrice}})" mode="widthFix" :src="`${constant.imgUrl}/icon/codePay8.png`"></image>

        <image class="avatar" mode="aspectFit" :src="item.customAvatarUrl"></image>
        <view class="tit"> {{ item.customName || '' }}</view>
        <view class="other-refund" v-if="item.refund == 2">有售后</view>
        <view class="other-status" v-if="item.debt == 1">挂账</view>
        <text class="other-book" v-if="item.book == 1">预订单</text>
        <text class="other-presell" v-if="item.presell == 1">预售单</text>
        <view :class="['status', currentStatus == 4 ? 'buleColor' : currentStatus == 3 ? 'buleColor' : currentStatus == 1 ? 'defColor' : '']">
          {{currentStatus == 1 ? '待付款' : currentStatus == 2 ? '待发货' : currentStatus == 3 ? '配送中' : currentStatus == 4 ? '已完成' : currentStatus == 5?'已取消':''}}
        </view>
      </view>
      <view class="order-list_info">
        <view class="order-info_box">
          <view>货号：</view>
          <view>{{ item.sendNum }}</view>
        </view>
        <view class="order-info_box">
          <view>创建：</view>
          <view>
            {{ item.addTime ? item.addTime.substr(5, 11) : '' }}
          </view>
          <view
            v-if="item.addTime && item.payTime && item.payTime != '0000-00-00 00:00:00' && item.addTime.substr(5, 5) != item.payTime.substr(5, 5)"
            class="bill-date"
          >
            账单日期 {{ item.payTime ? item.payTime.substr(5, 11) : '' }}
          </view>
        </view>
        <view class="order-info_box">
          <view>单号：</view>
          <view>{{ item.orderSn }}</view>
        </view>
        <view class="order-info_box">
          <view>方式：</view>
          <view>
            <text v-if="item.localOrder == 0">{{
              item.sendType == 0
                ? '送货上门'
                : item.sendType == 1
                ? '到店自取'
                : item.sendType == 2
                ? '跑腿送货'
                : item.sendType == 3
                ? item.wlName
                : item.sendType == 4
                ? '发快递'
                : ''
            }}</text>
            <text v-else>{{
              item.transType == 0
                ? '德邦物流'
                : item.transType == 1
                ? '顺丰物流'
                : item.transType == 2
                ? '冷链物流'
                : item.transType == 3
                ? '航空物流'
                : item.transType == 4
                ? '同城配送'
                : item.transType == 5
                ? '到店自取'
                : ''
            }}</text>
          </view>
        </view>
        <view class="order-info_box">
          <view>开单：</view>
          <view v-if="item.shopAdminId > 0">{{ item.shopAdminName }}</view>
          <view v-else>{{ item.customShopAdminName }}</view>
        </view>
        <view class="order-info_box">
          <view>数量：</view>
          <view v-if="item.smallNum > 0">{{ `${item.bigNum}/${item.smallNum}` }}</view>
          <view v-else>{{ item.bigNum }}</view>
          <view class="price">
            <text v-if="item.customDistName" class="price-dist-name">{{ item.customDistName }}</text>
            <view v-if="item.orderPrice == item.actPrice">￥{{ item.orderPrice ? parseFloat(item.orderPrice) : 0 }}</view>
            <view v-else>
              <text class="price-original">￥{{ item.orderPrice ? parseFloat(item.orderPrice) : 0 }}</text>
              <text class="price-discount">￥{{ item.actPrice ? parseFloat(item.actPrice) : 0 }}</text>
            </view>
            <i class="iconfont iconxiangyou"></i>
          </view>
        </view>
        <!-- 点击备注区域编辑，阻止冒泡避免进入订单详情 -->
        <view
          class="order-info_box remark-box remark-box--editable"
          v-if="!$util.isEmpty(item.remark)"
          @click.stop="openRemarkEdit(item)"
        >
          <view class="remark-text">{{ item.remark }}</view>
        </view>
        <view v-if="item.sameTimeIdsNum && item.sameTimeIdsNum > 1 && moreOrderRemind == true" class="merge-tips" @click.stop="pageTo({ url: '/admin/order/mergeOrder?ids=' + item.sameTimeIds+'&mergeId='+item.mergeId })" >
          客户共有{{ item.sameTimeIdsNum }}个订单，点击查看
        </view>
      </view>
      <view class="list-bottom">
        <view class="list-button">
          <!-- #ifdef MP-WEIXIN -->
          <view class="list-button-item">
            <button
              open-type="share"
              :data-order-id="item.id"
              :data-share-type="shareBtnType"
              @click.stop="shareOrder(item)"
              class="admin-button-com bule list-btn--compact"
            >分享</button>
          </view>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <view class="list-button-item">
            <button @click.stop="shareOrder(item)" class="admin-button-com bule list-btn--compact">分享</button>
          </view>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <!-- #ifndef APP-PLUS -->
          <view class="list-button-item">
            <button @click.stop="shareOrder(item)" class="admin-button-com bule list-btn--compact">分享</button>
          </view>
          <!-- #endif -->
          <!-- #endif -->
          <block v-if="currentStatus == 2">
            <block v-if="item.book == 0">
              <view class="list-button-item"><button @click.stop="directFh(item)" class="admin-button-com bule list-btn--compact">发货</button> </view>
            </block>
            <block v-else>
              <view class="list-button-item"><button @click.stop="confirmFh(item)" class="admin-button-com bule list-btn--compact">发货</button> </view>
            </block>
          </block>
          <block v-else>
            <view class="list-button-item"><button disabled="true" class="admin-button-com bule active list-btn--compact">发货</button> </view>
          </block>
          <view class="list-button-item">
            <button @click.stop="printWlFlag(item)" class="admin-button-com bule list-btn--wide">
              物流标<text>({{ item.printWlNum || 0 }})</text>
            </button>
          </view>
          <view class="list-button-item" v-if="currentStatus == 1">
            <button
              disabled="true"
              class="admin-button-com bule active list-btn--wide"
              :class="{ 'print-btn--unprinted': !isPrinted(item) }"
            >打印({{ item.printNum || 0 }})</button>
          </view>
          <view class="list-button-item" v-else>
            <button
              @click.stop="printOrder(item)"
              class="admin-button-com bule list-btn--wide"
              :class="{ 'print-btn--unprinted': !isPrinted(item) }"
            >
              打印<text>({{ item.printNum || 0 }})</text>
            </button>
          </view>
          <view class="list-button-item">
            <button @click.stop="openMore(item)" class="admin-button-com bule list-btn--compact">更多</button>
          </view>
        </view>
      </view>
    </view>

    <uni-popup ref="morePopup" background-color="#fff" type="center" :animation="true" class="class-popup-style">
      <view class="more-popup-body">
        <view class="text-center"><button class="admin-button-com" @click="openPrintLog(item)">打印时间</button></view>
        <view class="text-center"><button class="admin-button-com" @click="openRemarkEdit(item)">备注</button></view>
        <block v-if="item.sendStatus == -4 && item.status == 2">
          <view class="text-center"><button class="admin-button-com" @click="callIntraCity(item)">呼叫跑腿</button></view>
        </block>
        <block v-else-if="[0, 1, 2, 3, 4, 10, 20, 30].includes(Number(item.sendStatus))">
          <view class="text-center"><button class="admin-button-com" @click="cancelExpressOrder(item)">取消跑腿</button></view>
        </block>
        <block v-else-if="[-1, -2].includes(Number(item.sendStatus)) && [2, 3].includes(Number(item.status))">
          <view class="text-center"><button class="admin-button-com" @click="callIntraCity(item)">重叫跑腿</button></view>
        </block>
        <!--
        <view class="text-center"><button class="admin-button-com" @click="addExpress(item)">顺丰下单</button></view>
        <view class="text-center"><button class="admin-button-com" @click="cancelExpress(item)">取消顺丰订单</button></view>
        <view class="text-center"><button class="admin-button-com" @click="fillNoFh(item)">填单发货</button></view>
        -->
        <view class="text-center"><button class="admin-button-com default" @click="closeMore">取消</button></view>
      </view>
    </uni-popup>

    <uni-popup ref="printLogPopup" background-color="#fff" type="center" :animation="true" class="class-popup-style">
      <view class="print-log-popup-body">
        <view class="print-log-sn-box">
          <text class="print-log-sn-label">打印机编号</text>
          <text class="print-log-sn-value">{{ printLogData.printSn || '-' }}</text>
        </view>
        <view class="print-log-head">打印时间 / 打印订单ID</view>
        <view class="print-log-list" v-if="printLogData.list && printLogData.list.length">
          <view class="print-log-item" v-for="(log, idx) in printLogData.list" :key="log.feieOrderId + '_' + idx">
            <view class="print-log-time">{{ log.printTimeText || '等待回调' }}</view>
            <view class="print-log-order-id">{{ log.feieOrderId }}</view>
          </view>
        </view>
        <view class="print-log-empty" v-else>暂无打印记录</view>
        <view class="text-center print-log-close">
          <button class="admin-button-com default" @click="closePrintLog">关闭</button>
        </view>
      </view>
    </uni-popup>

    <!-- 修改订单备注 -->
    <uni-popup ref="remarkPopup" background-color="#fff" type="center" :animation="true" class="class-popup-style">
      <view class="remark-popup-body">
        <view class="remark-popup-title">备注</view>
        <textarea
          class="remark-popup-input"
          v-model="modifyRemarkText"
          maxlength="200"
          placeholder="请填写备注"
          :show-confirm-bar="false"
        />
        <view class="remark-popup-actions">
          <button class="admin-button-com default remark-popup-btn" @click="closeRemarkPopup">取消</button>
          <button class="admin-button-com blue remark-popup-btn" @click="confirmRemarkModify">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 新增物流下单弹窗 -->
    <uni-popup ref="expressAddressRef" background-color="#fff" type="center" :animation="true" class="class-popup-style" :mask-click="false">
      <view class="express-popup-body">
        <view class="popup-title">发货信息</view>
        <view class="form-vertical">
          <view class="form-row">
            <view class="form-label">包裹数量：</view>
            <input class="input-control" type="number" v-model="wlPackageNum" placeholder="请输入包裹数量" />
          </view>
          <view class="form-row">
            <view class="form-label">重量(kg)：</view>
            <input class="input-control" type="digit" v-model="wlWeight" placeholder="请输入重量" />
          </view>
          <view class="form-row">
            <view class="form-label">长度(cm)：</view>
            <input class="input-control" type="number" v-model="wlLength" placeholder="请输入长度" />
          </view>
          <view class="form-row">
            <view class="form-label">宽度(cm)：</view>
            <input class="input-control" type="number" v-model="wlWidth" placeholder="请输入宽度" />
          </view>
          <view class="form-row">
            <view class="form-label">高度(cm)：</view>
            <input class="input-control" type="number" v-model="wlHeight" placeholder="请输入高度" />
          </view>
          <view class="form-row">
            <view class="form-label">城市：</view>
            <view class="form-value">{{ receiverCity }}</view>
          </view>
          <view class="form-row">
            <view class="form-label">地址：</view>
            <view class="form-value">{{ receiverAddress }}{{ receiverFloor }}</view>
          </view>
          <view class="form-row">
            <view class="form-label">姓名：</view>
            <view class="form-value">{{ receiverName }}</view>
          </view>
          <view class="form-row">
            <view class="form-label">电话：</view>
            <view class="form-value">{{ receiverMobile }}</view>
          </view>
        </view>
        <view class="popup-actions">
          <button class="admin-button-com default" @click="closeExpressPop">取消</button>
          <button class="admin-button-com bule" @click="modifyAddress(item)">修改地址</button>
          <button class="admin-button-com bule" @click="confirmAddExpress(item)">提交</button>
        </view>
      </view>
    </uni-popup>

    <!-- 跑腿弹窗 TODO: 要删除掉 -->
    <!--
      <uni-popup ref="callExpressRef" background-color="#fff" type="center" :animation="true" class="class-popup-style" :mask-click="false">
      <view class="call-express-popup-body">
        <view class="popup-title">呼叫跑腿</view>
        <view class="form-vertical">
          <view class="form-row">
            <view class="form-label">姓名：</view>
            <view class="form-value">{{ callExpressData.user_name }}</view>
          </view>
          <view class="form-row">
            <view class="form-label">电话：</view>
            <view class="form-value">{{ callExpressData.user_phone }}</view>
          </view>
          <view class="form-row">
            <view class="form-label">订单号：</view>
            <view class="form-value">{{ callExpressData.orderSn }}</view>
          </view>
          <view class="form-row">
            <view class="form-label">地址：</view>
            <view class="form-value">{{ callExpressData.address }}</view>
          </view>
          <view class="form-row">
            <view class="form-label">包裹数：</view>
            <input class="input-control" type="number" v-model="callExpressData.packageNum" @focus="callExpressData.packageNum=''" placeholder="包裹数量" />
          </view>
          <view class="form-row">
            <view class="form-label">重量：</view>
            <input class="input-control" type="digit" v-model="callExpressData.weight" @focus="callExpressData.weight=''" placeholder="公斤" />
          </view>
          <view class="form-row">
            <view class="form-label">运费：</view>
            <view class="form-value" style="color:#3385FF;font-weight:bold;">{{ callExpressData.sendCost?parseFloat(callExpressData.sendCost):0 }}</view>
          </view>
        </view>
        <view class="popup-actions">
          <button class="admin-button-com default" @click="closeCallExpressPop">取消</button>
          <button class="admin-button-com bule" @click="selectFee(item)">查运费</button>
          <button class="admin-button-com bule" @click="confirmMyExpress(item)">提交</button>
        </view>
      </view>
    </uni-popup>
    -->
  </view>
</template>
<script>
import { getUserDet } from '@/api/member';
import { createExpressOrder, cancelExpressOrder as cancelSFExpressOrder } from '@/api/express';
import { cancelDeliveryOrder } from '@/api/express/delivery';
import { createCallExpressOrder, cancelCallExpressOrder,getOrderFee } from '@/api/shop/shop-express';
import { printWlLabel, cloudPrintOrder, getOrderPrintLog, modifyRemarkFn } from '@/api/order';
export default {
  name: 'OrderItem',
  options: {
    virtualHost: true
  },
  components: {},
  props: {
    item: {
      required: true
    },
    moreOrderRemind:{
      type: Boolean,
      default: true
    },
    /** 小程序分享按钮标记：merge 合并页单条分享传 single */
    shareBtnType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentStatus: 0,
      wlPackageNum: 1,
      wlWeight: '',
      wlLength: 100,
      wlWidth: 70,
      wlHeight: 50,
      receiverCity: '',
      receiverAddress: '',
      receiverFloor: '',
      receiverName: '',
      receiverMobile: '',
      callExpressData: {sendCost:0,packageNum:1,weight:0},
      printLogData: { printSn: '', list: [] },
      /** 当前正在编辑备注的订单 */
      remarkEditItem: null,
      modifyRemarkText: ''
    };
  },
  mounted() {
    if (this.item.status) {
      this.currentStatus = this.item.status;
    }
  },
  methods: {
    modifyAddress(item) {
      this.closeExpressPop()
      this.$util.pageTo({url: '/pagesClient/member/modify?id=' + item.customId + '&name=' + item.customName,type:2})
    },
    shareOrder(info) {
      this.$emit('shareOrder', info);
    },
    updateFiled(info) {
      this.$emit('listendUpdateFiled', info);
    },
    bumpItemCount(item, key) {
      const value = (Number(item[key]) || 0) + 1
      this.$set(item, key, value)
      this.updateFiled({ id: item.id, key, value })
    },
    isPrinted(item) {
      return Number(item && item.printNum) > 0
    },
    directFh(info) {
      this.$emit('directFh', info);
    },
    confirmFh(info) {
      this.$util.pageTo({ url: '/pagesOrder/arrival?id=' + info.id });
    },
    fillNoFh(info) {
      this.closeMore();
      this.$emit('fillNoFh', info);
    },
    printOrder(item) {
      const that = this
      const doPrint = () => {
        uni.showLoading({ title: '打印中...' })
        cloudPrintOrder({ id: item.id }).then(res => {
          uni.hideLoading()
          if (res.code == 1) {
            if (res.data.hasNoPrint == 1) {
              that.$util.confirmModal({ content: '请先设置打印机' }, () => {
                that.$util.pageTo({ url: '/admin/shop/print' })
              })
            } else {
              that.bumpItemCount(item, 'printNum')
            }
          }
        })
      }
      if (item.printNum && Number(item.printNum) > 0) {
        this.$util.confirmModal({ content: '确认补打小票？' }, doPrint)
      } else {
        doPrint()
      }
    },
    printWlFlag(item) {
      const that = this
      const doPrint = () => {
        printWlLabel({ id: item.id }).then(res => {
          if (res.code == 1) {
            that.$msg(res.msg)
            that.bumpItemCount(item, 'printWlNum')
          }
        })
      }
      if (item.printWlNum && Number(item.printWlNum) > 0) {
        this.$util.confirmModal({ content: '确认补打物流标？' }, doPrint)
      } else {
        doPrint()
      }
    },
    openMore(item) {
      this.$refs.morePopup.open('center');
    },
    closeMore() {
      this.$refs.morePopup.close();
    },
    openPrintLog(item) {
      this.closeMore();
      uni.showLoading({ title: '加载中...' });
      getOrderPrintLog({ id: item.id }).then(res => {
        uni.hideLoading();
        if (res.code == 1) {
          this.printLogData = {
            printSn: res.data.printSn || '',
            list: res.data.list || []
          };
          this.$refs.printLogPopup.open('center');
        }
      }).catch(() => {
        uni.hideLoading();
      });
    },
    closePrintLog() {
      this.$refs.printLogPopup.close();
    },
    /** 打开备注编辑弹窗 */
    openRemarkEdit(item) {
      this.closeMore();
      this.remarkEditItem = item;
      this.modifyRemarkText = item.remark || '';
      this.$refs.remarkPopup.open('center');
    },
    closeRemarkPopup() {
      this.$refs.remarkPopup.close();
      this.remarkEditItem = null;
      this.modifyRemarkText = '';
    },
    /** 保存订单备注并同步列表展示 */
    confirmRemarkModify() {
      const item = this.remarkEditItem;
      if (!item || !item.id) {
        return;
      }
      const remark = (this.modifyRemarkText || '').trim();
      uni.showLoading({ title: '保存中...', mask: true });
      modifyRemarkFn({ id: item.id, remark }).then((res) => {
        uni.hideLoading();
        if (res.code == 1) {
          this.$set(item, 'remark', remark);
          this.updateFiled({ id: item.id, key: 'remark', value: remark });
          this.closeRemarkPopup();
          this.$msg('操作成功');
        }
      }).catch(() => {
        uni.hideLoading();
      });
    },
    callIntraCity(item) {
      this.closeMore();
      // this.callExpressData = {
      //   orderId: item.id,
      //   orderSn: item.orderSn,
      //   weight: Number(item.weight),
      //   packageNum: 1,
      //   user_name: item.customName,
      //   user_phone: item.customMobile,
      //   user_lng: item.long,
      //   user_lat: item.lat,
      //   note: item.remark,
      //   address: item.address
      // };
      // this.$refs.callExpressRef.open('center');

      this.$util.pageTo({ url: '/admin/delivery/allDelivery?orderId=' + item.id });
    },
    addExpress(item) {
      this.closeMore();
      getUserDet({ id: item.customId }).then((res) => {
        if (res.code == 1) {
          this.receiverCity = res.data.city;
          this.receiverAddress = res.data.address;
          this.receiverFloor = res.data.floor;
          this.receiverName = res.data.name;
          this.receiverMobile = res.data.mobile;
        }
      });
      this.$refs.expressAddressRef.open('center');
    },
    cancelExpress(item) {
      this.$util.confirmModal({ content: '确认取消？' }, () => {
        cancelSFExpressOrder({ id: item.id }).then((res) => {
          if (res.code == 1) {
            this.$msg(res.msg);
            this.closeMore();
          }
        });
      });
    },
    // 跑腿取消
    cancelExpressOrder(item) {
      this.$util.confirmModal({ content: '确认取消跑腿？' }, () => {
        cancelDeliveryOrder({ orderId: item.id }).then((res) => {
          if (res.code == 1) {
            // item.sendStatus = 3;
            // this.$emit('listendUpdateField', { id: item.id, key: 'sendStatus', value: 3 });
            this.updateFiled({ id: item.id, key: 'sendStatus', value: 3 });
            this.$msg(res.msg);
            this.closeMore();
          }
        });
      });
    },
    closeCallExpressPop() {
      this.$refs.callExpressRef.close();
    },
    selectFee(item){
      getOrderFee({id:item.id,packageNum:this.callExpressData.packageNum,weight:this.callExpressData.weight}).then(res=>{
        if(res.code == 1){
          if(res.data.est_fee){
            let fee = res.data.est_fee
            fee = Number(res.data.est_fee)/100
            fee = Number(fee).toFixed(2)
            fee = parseFloat(fee)
            this.callExpressData.sendCost = fee
            this.$forceUpdate()
          }
          this.$msg('查询成功')
        }
      })
    },
    confirmMyExpress(item) {
      this.$util.confirmModal({ content: '确认提交？' }, () => {
        const data = {
          orderId: item.id,
          weight: this.callExpressData.weight,
          packageNum: this.callExpressData.packageNum
        }
        createCallExpressOrder(data).then((res) => {
          if (res.code == 1) {
            this.updateFiled({ id: item.id, key: 'sendStatus', value: 0 })
            this.$msg(res.msg)
            this.closeCallExpressPop()
          }
        });
      });
    },
    closeExpressPop() {
      this.$refs.expressAddressRef.close();
    },
    confirmAddExpress(item) {
      if (Number(this.wlWeight) <= 0) {
        this.$msg('请填写重量');
        return false;
      }
      this.$util.confirmModal({ content: '确认提交？' }, () => {
        createExpressOrder({
          id: item.id,
          weight: Number(this.wlWeight),
          length: this.wlLength,
          width: this.wlWidth,
          height: this.wlHeight,
          packageNum: this.wlPackageNum
        }).then((res) => {
          if (res.code == 1) {
            this.$msg(res.msg);
            this.closeExpressPop();
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.class-popup-style {
  z-index: 999999;
}
.print-btn--unprinted {
  color: #fff;
  background-color: $mainColor;
  border-color: $mainColor;
}
.list-top,
.list-bottom {
  padding: 15upx 30upx;
  border-bottom: 1upx solid $borderColor;
  color: $fontColor3;
  .freight-text {
    margin-right: 60upx;
  }
}
.list-bottom {
  & > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .list-button {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .list-button-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 6upx 12upx 6upx;
      flex: none;
      min-height: 48upx;
    }
    /* 底部操作栏按钮基础样式 */
    .admin-button-com {
      height: 60upx;
      padding: 0 12upx;
      line-height: 60upx;
      text-align: center;
      font-size: 26upx;
      margin: 0;
      min-width: 100upx;
      max-width: 140upx;
      width: auto;
      flex: none;
      box-sizing: border-box;
      &.active {
        border: 1upx solid #ccc;
      }
      /* 两字按钮：分享、更多、发货 */
      &.list-btn--compact {
        width: 105upx;
        padding: 0;
      }
      /* 带计数文案：物流标、打印 */
      &.list-btn--wide {
        min-width: 140upx;
        max-width: 200upx;
        width: auto;
        padding: 0 16upx;
      }
    }
  }
}
.order-top_box {
  display: flex;
  align-items: center;
  padding: 20upx 30upx 20upx;
  position: relative;
  & > .tit {
    flex: 8;
    color: #333333;
    font-size: 30upx;
    font-weight: 650;
    margin-left: 15upx;
  }
  & > .other-presell {
    text-align: center;
    color: white;
    border: 2upx solid #059240;
    border-radius: 30upx;
    padding: 5upx 10upx;
    font-size: 20upx;
    background: #059240;
    margin-right: 20upx;
    width: auto;
  }
  & > .other-book {
    text-align: center;
    color: white;
    border: 2upx solid #657cac;
    border-radius: 30upx;
    padding: 5upx 10upx;
    font-size: 20upx;
    background: #657cac;
    margin-right: 20upx;
    width: auto;
  }
  & > .other-refund {
    text-align: center;
    color: white;
    background-color: rgb(202, 164, 94);
    border: 2upx solid rgb(202, 164, 94);
    border-radius: 30upx;
    padding: 5upx 12upx;
    font-size: 20upx;
    margin-right: 20upx;
    width: auto;
  }
  & > .other-status {
    text-align: center;
    color: white;
    background-color: #ff2842;
    border: 2upx solid red;
    border-radius: 30upx;
    padding: 5upx 12upx;
    font-size: 20upx;
    margin-right: 20upx;
    width: auto;
  }
  & > .status {
    flex: 2;
    text-align: right;
    color: #ff2842;
    &.buleColor {
      color: #3385ff;
    }
    &.defColor {
      color: #333333;
    }
  }
}

.code-pay-img {
  width: 105upx;
  position: absolute;
  top: 80upx;
  right: 12upx;
}

.avatar {
  width: 50upx;
  height: 50upx;
  border-radius: 50upx;
}

.bill-date {
  flex: 1;
  color: #a29696;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 28upx;
}

.price-original {
  text-decoration: line-through;
  color: #847676;
}

.price-discount {
  margin-left: 10upx;
}

.remark-box {
  background-color: #ffebee;
  border-left: 4upx solid #d32f2f;
  padding: 15upx 20upx;
  margin: 10upx 0;
  border-radius: 8upx;
  display: block !important; /* 覆盖父级的 flex 布局 */
}

.remark-box--editable:active {
  opacity: 0.85;
}

.remark-box .remark-text {
  color: #d32f2f !important; /* 强制覆盖父级颜色 */
  font-weight: bold !important;
  font-size: 28upx !important;
  line-height: 1.5;
  word-break: break-all;
}

/* 更强的选择器确保样式生效 */
.order-list_info .order-info_box.remark-box .remark-text {
  color: #d32f2f !important;
  font-weight: bold !important;
  font-size: 28upx !important;
}

.merge-tips {
  text-align: center;
  color: white;
  margin-top: 20upx;
  font-size: 38upx;
  background-color: #3780a5ad;
  padding-top:16upx;
  padding-bottom:16upx;
}

.text-center {
  text-align: center;
}

.more-popup-body {
  padding: 50upx 1upx;
  width: 75vw;
  .admin-button-com {
    margin: 0 auto 30upx 4upx;
    width: 210upx;
    height: 80upx;
    line-height: 80upx;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 29upx;
  }
  .text-center:last-child .admin-button-com {
    margin: 10upx auto 0 auto;
  }
}

.print-log-popup-body {
  padding: 40upx 30upx 30upx;
  width: 88vw;
  max-height: 70vh;
  box-sizing: border-box;
}

.print-log-sn-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 2upx solid #333;
  border-radius: 12upx;
  padding: 24upx 20upx;
  margin-bottom: 30upx;
}

.print-log-sn-label {
  font-size: 30upx;
  color: #333;
  flex-shrink: 0;
}

.print-log-sn-value {
  font-size: 34upx;
  color: #333;
  font-weight: bold;
  margin-left: 16upx;
}

.print-log-head {
  color: #3385ff;
  font-size: 33upx;
  margin-bottom: 20upx;
}

.print-log-list {
  max-height: 45vh;
  overflow-y: auto;
}

.print-log-item {
  padding: 18upx 0;
  border-bottom: 1upx solid #eee;
}

.print-log-time {
  color: #b8860b;
  font-size: 34upx;
  margin-bottom: 8upx;
}

.print-log-order-id {
  color: #2e7d32;
  font-size: 28upx;
  word-break: break-all;
}

.print-log-empty {
  text-align: center;
  color: #999;
  font-size: 28upx;
  padding: 40upx 0;
}

.print-log-close {
  margin-top: 24upx;
  .admin-button-com {
    width: 210upx;
    height: 80upx;
    line-height: 80upx;
    font-size: 29upx;
  }
}

.remark-popup-body {
  width: 88vw;
  padding: 40upx 30upx 30upx;
  box-sizing: border-box;
}

.remark-popup-title {
  text-align: center;
  font-size: 34upx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 30upx;
}

.remark-popup-input {
  width: 100%;
  height: 280upx;
  padding: 20upx;
  font-size: 28upx;
  color: #333333;
  border: 2upx solid #e0e0e0;
  border-radius: 8upx;
  box-sizing: border-box;
}

.remark-popup-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 30upx;
}

/* 覆盖 admin-button-com 的 padding/line-height:1，保证文字垂直居中 */
.remark-popup-btn {
  width: 45%;
  height: 80upx;
  line-height: 80upx;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

.express-popup-body,
.call-express-popup-body {
  padding: 40upx 50upx;
  width: 96vw;
}

.popup-title {
  font-size: 32upx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30upx;
}

.form-vertical {
  display: flex;
  flex-direction: column;
  gap: 18upx;
}

.form-row {
  display: flex;
  align-items: center;
}

.form-label {
  width: 135upx;
  color: #888;
  font-size: 28upx;
  white-space: nowrap;
}

.input-control {
  flex: 1;
  font-size: 28upx;
  border: 1px solid #eee;
  padding: 0 12upx;
  border-radius: 8upx;
  height: 60upx;
  line-height: 60upx;
}

.form-value {
  flex: 1;
  font-size: 28upx;
}

.popup-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 40upx;
  .admin-button-com {
    width: 160upx;
  }
}

.order-list_info {
  padding: 10upx 30upx 30upx;
  border-bottom: 1upx solid #eeeeee;
  & > .order-info_box {
    display: flex;
    align-items: center;
    font-size: 26upx;
    font-weight: 400;
    margin-bottom: 5upx;
    & > view:nth-child(1) {
      color: #999999;
    }
    & > view:nth-child(2) {
      color: #333333;
    }
    & > .price {
      flex: 1;
      font-size: 30upx;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .price-dist-name {
        margin-right: 60upx;
        font-size: 28upx;
        color: #999999;
        flex-shrink: 0;
      }
      & .iconxiangyou {
        color: #999999;
        font-size: 25upx;
        margin-left: 12upx;
      }
    }
  }
}

input {
  height: 60upx;
  line-height: 60upx;
  padding: 0 12upx;
  font-size: 28upx;
  box-sizing: border-box;
}
input::placeholder {
  line-height: 60upx;
  /* 可选：color、font-size 等 */
}
input::-webkit-input-placeholder {
  line-height: 60upx;
}
input:-ms-input-placeholder {
  line-height: 60upx;
}
input::-ms-input-placeholder {
  line-height: 60upx;
}
</style>