wxapp_shuibei/pages/find_funds/fundsOrder.vue

<template>
  <view class="page-container">
    <!-- <up-tabs
      class="tabs-box"
      :list="tabsList"
      lineColor="#cc9933"
      @click="click"
    ></up-tabs> -->

    <z-paging
      empty-view-error-text="暂无订单"
      :style="{
        marginTop: computedMarginTop,
      }"
      ref="pagingRef"
      class="pagingRef-container"
      :use-refresher-status-bar-placeholder="true"
      @query="handleQuery"
      v-model="dataList"
    >
      <template #top>
        <view class="tabs-container">
          <Tabs
            :tabsList="tabsList"
            :activeName="title"
            @tab-click="onTabClick"
            activeLineWidth="112rpx"
            activeLineColor="#f8c007"
            activeLineHeight="6rpx"
          ></Tabs>
        </view>
        <view
          v-if="title == '确认单' && role == '买家' && dataList.length"
          class="address acea-row row-between-wrapper"
          @tap="onAddress"
        >
          <view class="addressCon" v-if="addressInfo.realName">
            <view class="name"
              >{{ addressInfo.realName }}
              <text class="phone">{{ addressInfo.phone }}</text>
            </view>
            <view class="acea-row">
              <text class="default font-color" v-if="addressInfo.isDefault"
                >[默认]</text
              >
              <text class="line2"
                >{{ addressInfo.province }}{{ addressInfo.city
                }}{{ addressInfo.district }}{{ addressInfo.detail }}</text
              >
            </view>
          </view>
          <view class="addressCon" v-else>
            <view class="setaddress">设置收货地址</view>
          </view>
          <view class="iconfont icon-jiantou"></view>
        </view>
      </template>

      <view class="order-info-box animated">
        <view
          class="order-info-item"
          v-for="item in dataList"
          :key="item.orderNo"
        >
          <view class="title-box">
            <view class="order-num">订单号：{{ item.orderNo }}</view>
            <view class="order-time">{{ item.createTime }}</view>
            <view class="order-status" v-if="item.status == 0">待审核</view>
          </view>
          <!-- 待找款 /完成单-->
          <view class="order-container" style="width: 100%">
            <view class="order-content">
              <view class="image-box" @click="previewImage(item.images)">
                <image :src="item.images[0]"></image>
              </view>
              <view class="ordser-info-desc">
                <block v-if="title !== '完成单' && title !== '待评分'">
                  <view class="info-desc-item">
                    预估克重：{{ item.estimatedWeight }}g
                  </view>
                  <view class="info-desc-item">
                    理想工费：{{ item.idealWage }}元/g
                  </view>
                  <view class="info-desc-item">
                    购买件数：{{ item.numberOfUnits }}件
                  </view>
                  <view
                    class="info-desc-item buyer-message"
                    v-if="title !== '完成单'"
                    >买家留言：{{ item.description }}
                  </view>
                </block>
                <block v-else>
                  <view class="info-desc-item">
                    实际克重：{{ item.practicalWeight }}g
                  </view>
                  <view class="info-desc-item">
                    实际工费：{{ item.quoteWage }}元/g
                  </view>
                  <view class="info-desc-item">
                    购买件数：{{ item.numberOfUnits }}件
                  </view>
                  <view class="info-desc-item" v-if="title !== '完成单'">
                    买家留言：请帮我买一个有设计感的款式
                  </view>
                  <view
                    class="info-desc-item"
                    v-if="title == '完成单' && role == '买家'"
                  >
                    <up-copy :content="item.trackingNumber">
                      快递单号：{{
                        item.trackingNumber
                          ? item.trackingNumber
                          : "暂无物流信息"
                      }}
                    </up-copy>
                  </view>
                </block>
                <!-- 买家评分 -->
                <view class="rate" v-if="title === '完成单' && role === '代购'">
                  <view class="lable">买家评分：</view>
                  <!-- <up-rate
                    :count="count"
                    readonly
                    v-model="item.score"
                    activeColor="#cc9933"
                  ></up-rate> -->
                  <uni-rate
                    readonly
                    :value="item.score"
                    color="#bbb"
                    active-color="#f96400"
                  />
                </view>
              </view>
            </view>
            <!-- 代购 -->
            <view
              class="Purchasing"
              v-if="role === '代购' && title === '待找款'"
            >
              <view class="Purchasing-btn" @click="takeOrderHandle(item)">
                <image
                  class="sb-btn-img"
                  src="/static/images/sb_btn.png"
                ></image>
                <text>点击接单</text>
              </view>
              <view class="Purchasing-tips"
                >温馨提示：48小时内需找到产品，切勿盲目接单。</view
              >
            </view>
            <view
              class="border-line"
              v-if="role === '买家' && title === '完成单'"
            ></view>
            <!-- 买家 -->
            <view
              class="Buyers"
              v-if="
                role === '买家' && (title === '完成单' || title == '待评分')
              "
            >
              <view class="Buyers-tips" v-show="!item.isScore">
                请给我们打个服务分吧！</view
              >
              <view class="Buyers-rate-box">
                <text>订单评分</text>
                <!-- <up-rate
                  :count="count"
                  activeColor="#cc9933"
                  gutter="1"
                  v-model="item.score"
                  :value="buyRate"
                  @change="changeRate"
                  :readonly="item.isScore ? true : false"
                ></up-rate> -->

                <uni-rate
                  activeColor="#f96400"
                  :value="item.isScore ? item.score : buyRate"
                  @change="changeRate"
                  :readonly="item.isScore ? true : false"
                />
              </view>
              <view
                class="Buyers-btn"
                v-show="!item.isScore"
                @click="submitRateHandle(item)"
                :class="{ disabled: item.isScore }"
              >
                <image
                  v-show="!item.isScore"
                  class="sb-btn-img"
                  src="/static/images/sb_btn.png"
                ></image>
                <image
                  v-show="item.isScore"
                  class="sb-btn-img"
                  src="/static/images/sb_refuse_btn.png"
                ></image>
                <text>提交评分</text>
              </view>
            </view>
          </view>

          <!-- 已接单 -->
          <view
            class="order-receive"
            v-if="title === '已接单' && role === '代购'"
          >
            <view class="find-funds-info">
              <view class="title-box">
                <view class="title">请上传1~3张产品图</view>
                <view class="f-title">图片越清晰越容易识别款式哦~</view>
              </view>
              <!-- 上传 -->
              <!-- 上传 -->
              <view class="upload-box">
                <up-upload
                  :fileList="imageList"
                  uploadIcon="plus"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="1"
                  multiple
                  :maxCount="3"
                >
                  <template #trigger>
                    <view class="upload-block">
                      <uni-icons
                        size="38"
                        color="#ccc"
                        type="plusempty"
                      ></uni-icons>
                    </view>
                  </template>
                </up-upload>
              </view>
              <!-- 信息 -->
              <view class="info-box">
                <view class="info-item">
                  <view class="info-label">实际重量（g）</view>
                  <view class="info-input">
                    <input type="number" v-model="practicalWeight" />
                  </view>
                </view>
                <view class="info-item">
                  <view class="info-label">报价工费（/g）</view>
                  <view class="info-input">
                    <input type="number" v-model="quoteWage" />
                  </view>
                </view>

                <view class="info-item">
                  <view class="info-label">卖家留言</view>
                </view>
                <view class="info-input info-item-message">
                  <up-textarea
                    v-model="acceptorText"
                    placeholder="请输入您的留言"
                  ></up-textarea>
                </view>
              </view>
            </view>
          </view>
          <!-- 确认单 -->
          <view class="order-confirm" v-if="title === '确认单'">
            <view class="image-box">
              <image v-for="p in item.productImages" :key="p" :src="p"></image>
            </view>
            <view class="confirm-info">
              <view class="confirm-info-left">
                <view class="label">实际重量：</view>
                <view class="value">{{ item.practicalWeight }}g</view>
              </view>
              <view class="confirm-info-right">
                <view class="label">报价工费：</view>
                <view class="value">{{ item.quoteWage }}元/g</view>
              </view>
            </view>
            <!-- 卖家留言 -->
            <view class="confirm-message">
              <view class="label">卖家留言：</view>
              <view class="value">
                {{ item.acceptorText }}
              </view>
            </view>
            <view
              class="express-box"
              v-if="title === '确认单' && role === '买家'"
            >
              <view class="info-item">
                <view class="info-label" @click="exShowPopup = true"
                  >选择快递方式：
                  {{
                    selectedExpress?.label
                      ? selectedExpress.label
                      : "请选择快递公司"
                  }}</view
                >
              </view>
            </view>

            <!-- 买家是否确认支付 -->
            <view
              class="confirm-pay-box"
              v-if="role === '买家' && title === '确认单'"
            >
              <view class="confirm pay" @tap="opPopup(item)">
                <image
                  class="sb-btn-img"
                  src="/static/images/sb_btn.png"
                ></image>
                <text>确认支付</text>
              </view>
              <view class="refuse pay" @click="refuse(item.id)">
                <image
                  class="sb-btn-img"
                  src="/static/images/sb_refuse_btn.png"
                ></image>
                <text>取消订单</text>
              </view>
            </view>
          </view>
          <!-- 提交信息等待买家确认 -->
          <view
            class="btn"
            v-if="title === '已接单' && role === '代购'"
            @click="submitFindFundsHandle(item)"
          >
            <image class="sb-btn-img" src="/static/images/sb_btn.png"></image>
            <text>提交信息等待买家确认</text>
          </view>
        </view>
      </view>
    </z-paging>
    <!-- 选择支付方式弹窗 -->
    <!-- <up-popup :show="show" closeOnClickOverlay @close="close">
      <view class="pay-list">
        <view class="pay-title">选择支付方式</view>
        <view
          class="pay-item"
          v-for="item in payments"
          :key="item.value"
          :class="{ active: item.value === payChannel }"
          @tap="changePayChannel(item)"
        >
     
          <view class="iconfont" :class="item.icon"> </view>
          <view class="pay-name">{{ item.name }}</view>
        </view>
        <view class="comfirm-btn" @tap="confirmPay"> 确认支付 </view>
      </view>
    </up-popup> -->
    <WPayment
      :payMode="payments"
      :showPopup="showPopup"
      @payComplete="payComplete"
      @close="payClose"
      :orderId="orderbanceId"
      :totalPrice="totalPrice"
      :addresssId="addressId"
      :mallType="0"
      :orderUserInfo="orderUserInfo"
      :goldType="goldType"
      @change="handlePaymentChange"
      :switchStatus="switchStatus"
      ref="paymentRef"
    ></WPayment>
    <!-- 取消订单支付弹出框 -->
    <up-modal
      :show="show"
      :content="content"
      :showCancelButton="true"
      @cancel="close"
      @confirm="confirm"
    ></up-modal>
    <!-- 收货地址组件 -->
    <addressWindow
      ref="addressWindowRef"
      :address="address"
      :pagesUrl="pagesUrl"
      @OnDefaultAddress="OnDefaultAddress"
      @OnChangeAddress="OnChangeAddress"
      @changeClose="changeClose"
    />

    <!-- 快递组件 -->

    <view class="express-popup">
      <up-popup :show="exShowPopup" @close="exShowPopup = false">
        <up-cell-group>
          <up-cell
            class="item-cell"
            v-for="item in expressList"
            :key="item.value"
            :title="`${item.label}￥${
              appStore.userInfo.svip ? item.value / 2 : item.value
            }`"
            @click="chooseExpress(item)"
          />
          <up-cell
            class="item-cell cancel"
            title="取消"
            @click="exShowPopup = false"
          />
        </up-cell-group>
      </up-popup>
    </view>
    <view class="white"></view>
  </view>
</template>

<script setup>
import { reactive, ref, nextTick, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import Tabs from "@/components//tabsView/index.vue";
import { useAppStore } from "@/stores/app";
import { useToast } from "@/hooks/useToast";
// 快递相关
const selectedExpress = ref({});
const exShowPopup = ref(false);
const expressList = ref([
  { label: "顺丰陆运", value: 15, type: 2 },
  { label: "顺丰空运", value: 24, type: 3 },
  { label: "顺丰到付", value: 0, type: 4 },
]);
const chooseExpress = (item) => {
  selectedExpress.value = item;
  exShowPopup.value = false;
};
// 导入地址选择组件
import addressWindow from "@/components/addressWindow";
// 导入用户地址详情API接口
import { getAddressDetail, getAddressDefault } from "@/api/user.js";
const { Toast } = useToast();
// 地址相关
//
const textareaStatus = ref(true);
const pagesUrl = ref("");
const addressWindowRef = ref(null);
const address = ref({
  address: false,
  addressId: 0,
}); // 地址组件
const addressInfo = ref({}); // 地址信息
const addressId = ref(0); // 地址id
// 首次进入页面时展示默认地址
const OnDefaultAddress = (e) => {
  console.log("保存默认地址详情");

  addressInfo.value = e; // 保存默认地址详情
  address.value.addressId = e.id; // 更新选中地址ID
};
// 打开地址选择弹窗
const onAddress = () => {
  textareaStatus.value = false; // 隐藏备注框
  address.value.address = true; // 显示地址弹窗

  // 设置地址页面跳转链接
  pagesUrl.value = "/pages/users/user_address_list/index";
  nextTick(() => {
    addressWindowRef.value.fetchAddressList();
  });
};
// 选择地址后触发的事件
const OnChangeAddress = (e) => {
  console.log("OnChangeAddress", e);

  addressInfo.value = e; // 保存选中的地址详情
  address.value.addressId = e.id; // 更新选中地址ID
  textareaStatus.value = true; // 显示备注框
  address.value.address = false; // 关闭地址弹窗
};
// 获取默认地址或指定地址详情
const getaddressInfo = () => {
  if (addressId.value) {
    // 若有指定地址ID，获取该地址详情
    getAddressDetail(addressId.value).then((res) => {
      if (res.data) {
        // 若地址存在
        res.data.isDefault = parseInt(res.data.isDefault); // 转换默认地址标识为数字
        addressInfo.value = res.data || {}; // 保存地址详情
        addressId.value = res.data.id || 0; // 更新地址ID
        address.value.addressId = res.data.id || 0; // 更新选中地址ID
      }
    });
  } else {
    // 若没有指定地址ID，获取默认地址
    getAddressDefault().then((res) => {
      // 注意：原代码中未导入getAddressDefault，可能是遗漏
      if (res.data) {
        // 若默认地址存在
        res.data.isDefault = parseInt(res.data.isDefault);
        addressInfo.value = res.data || {};
        addressId.value = res.data.id || 0;
        address.value.addressId = res.data.id || 0;
      }
    });
  }
};
// 关闭地址弹窗
const changeClose = () => {
  address.value.address = false; // 隐藏地址弹窗
};
const computedMarginTop = computed(() => {
  return "50rpx";
});
onLoad(() => {
  // 若已登录且非支付页面，则获取地址信息（注释掉的逻辑，预留）
  if (appStore.isLogin) {
    // console.log(1111);

    getaddressInfo();
    // 等待DOM更新后，调用地址组件的方法获取地址列表
    nextTick(() => {
      addressWindowRef.value.fetchAddressList();
    });
  }
});
// 找款接口
import {
  getUserFindFundsAPI,
  submitFindFundsAPI,
  acceptFindFundsAPI,
  cancelFindFundsAPI,
  paylFindFundsBalanceAPI,
  submitFindFundsRateAPI,
} from "@/api/find_fund";
// 导入支付相关工具（封装的支付逻辑，如提交支付、验证支付渠道等）
import WPayment from "@/components/WPayment";
import { usePayment } from "@/hooks/usePayment.js";
import { useImageUpload } from "@/hooks/useImageUpload";
// 初始化支付工具（获取支付相关方法）
const { submitPayment, paymentConfig, getAvailableChannels } = usePayment();
const { imageList, afterRead, deletePic, uploadLoading } = useImageUpload({
  pid: 11,
  model: "resubmit",
});
const appStore = useAppStore();
console.log(appStore);

const title = ref("全部");
const count = ref(5);
const message = ref("");

const role = ref("买家");

// 控制组件显示/隐藏
const showPopup = ref(false);
const totalPrice = ref("99");

// 创建响应式数据
const tabsList = reactive([
  { name: "全部", status: 6 },
  { name: "待找款", status: 1 },
  { name: "已接单", status: 2 },
  { name: "确认单", status: 3 },
  { name: "待评分", status: 5 },
  { name: "完成单", status: 4 },
]);
// z-paing绑定数据
const dataList = ref([]);

const articleType = ref(6); // 订单类型（找款）
const payChannel = ref("alipay");
// 响应式变量：支付方式列表（包含支付宝、微信、余额等支付方式配置）
const payments = reactive([
  // {
  //   name: "支付宝支付", // 支付方式名称
  //   icon: "icon-zhifubao", // 图标类名
  //   value: "alipay", // 支付标识值
  //   title: "支付宝快捷支付", // 支付说明
  //   payType: "alipay", // 支付类型
  //   payStatus: 1, // 支付状态（1-可用，0-不可用）
  // },
  // {
  //   name: "微信支付",
  //   icon: "icon-wechat",
  //   value: "weixin",
  //   title: "微信快捷支付",
  //   payType: "weixin",
  //   payStatus: 1,
  // },
  {
    name: "余额支付",
    icon: "icon-balance",
    value: "yue",
    title: "可用余额:",
    payType: "yue",
    payStatus: 1,
  },
]);

const pagingRef = ref();

// tabs点击事件
const onTabClick = (item) => {
  title.value = item.name;
  articleType.value = item.status;
  pagingRef.value.reload();
};
async function handleQuery(page, pageSize) {
  try {
    uni.showLoading({ title: "加载中" });
    // 请求参数
    const params = {
      page: page,
      limit: pageSize,
      status: articleType.value,
      userId: appStore.uid,
    };
    const { data } = await getUserFindFundsAPI(params);
    const { list: originalList, total } = data.page;

    // 关键：为list中的每个项添加新属性（例如添加isNew: false）
    const processedList = originalList.map((item) => ({
      ...item, // 保留原有属性
      productImages: JSON.parse(item.acceptorImgs),
      images: JSON.parse(item.purchaserImgs),
    }));
    // console.log(processedList);

    // 角色判断逻辑
    data.is_by ? (role.value = "代购") : (role.value = "买家");

    uni.hideLoading();
    // 将处理后的列表传给z-paging，不影响分页功能
    pagingRef.value.complete(processedList, total);
  } catch (e) {
    pagingRef.value.complete(false);
    uni.hideLoading();
    console.error("查询失败：", e);
  }
}

// 点击接单
const takeOrderHandle = async (order) => {
  const res = await acceptFindFundsAPI(order.id);
  // console.log(res);
  if (res.code == 200) {
    Toast({ title: "接单成功" });
    title.value = "已接单";
    articleType.value = 2;
    pagingRef.value.reload();
  }
  // console.log("点击接单", order);
  // title.value = "已接单";
};
// 提供给买家的信息
const practicalWeight = ref("");
const quoteWage = ref("");
const acceptorText = ref("");

// 提交信息等待买家确认
const submitFindFundsHandle = async (order) => {
  console.log(order);

  const params = {
    orderId: order.id,
    practicalWeight: practicalWeight.value,
    quoteWage: quoteWage.value,
    acceptorText: acceptorText.value,
    acceptorImgs: imageList.value.map((v) => v.info.url),
  };

  const res = await submitFindFundsAPI(params);
  if (res.code == 200) {
    Toast({ title: "提交信息成功" });
    title.value = "确认单";
    articleType.value = 3;
    pagingRef.value.reload();
  }
};
// 取消支付
const show = ref(false);
const content = ref("确定取消订单?");
const orderId = ref(null);
const refuse = (id) => {
  orderId.value = id;
  show.value = true;
};
const confirm = async () => {
  const res = await cancelFindFundsAPI(orderId.value);
  if (res.code == 200) {
    Toast({ title: "取消订单成功" });
    pagingRef.value.reload();
    show.value = false;
  }
};

// 关闭弹窗
function close() {
  show.value = false;
}
// 支付相关逻辑
const goldType = ref("au");
const orderbanceId = ref(null);
const orderUserInfo = ref({});
// 确认支付
const opPopup = (item) => {
  if (!addressInfo.value.id) {
    return Toast({ title: "请选择收货地址" });
  }
  if (!selectedExpress.value.label) {
    return Toast({ title: "请选择快递公司" });
  }
  goldType.value = item.metalType;
  // goldType.value = "pt";
  orderbanceId.value = item.id;
  showPopup.value = true;
  getPayBalanceInfo(orderbanceId.value, false, selectedExpress.value.type);
};
const switchStatus = ref(false);
const handlePaymentChange = async (value) => {
  // console.log("从子组件接收的开关状态:", value);

  const res = await paylFindFundsBalanceAPI(
    orderbanceId.value,
    value,
    selectedExpress.value.type
  );
  orderUserInfo.value = res.data;
};
// 获取订单金额/用户信息
const getPayBalanceInfo = async (id, type) => {
  const res = await paylFindFundsBalanceAPI(
    id,
    type,
    selectedExpress.value.type
  );
  orderUserInfo.value = res.data;
};

const confirmPay = async () => {
  showPopup.value = true;
};
// 切换支付方式
const changePayChannel = (item) => {
  payChannel.value = item.value;
};

// 关闭组件弹窗

function payComplete() {
  payClose();
  title.value = "待评分";
  articleType.value = 5;
  pagingRef.value.reload();
}
const paymentRef = ref(null);
function payClose() {
  showPopup.value = false;
  paymentRef.value.triggerChange(false);
}
const buyRate = ref(0);

// 提交买家评分
const submitRateHandle = async (item) => {
  if (item.isScore) {
    return Toast({ title: "您已评分，请勿重复操作" });
  }
  const res = await submitFindFundsRateAPI({
    orderId: item.id,
    rating: buyRate.value,
  });

  Toast({ title: "评分成功" });
  title.value = "完成单";
  articleType.value = 4;
  pagingRef.value.reload();
};
const changeRate = (e) => {
  // console.log(value);
  buyRate.value = e.value;
};

// 预览图片
const previewImage = (item) => {
  console.log(item[0]);

  // 预览图片，支持多张图片传数组
  uni.previewImage({
    urls: item,
    current: item[0],
  });
};
</script>

<style lang="scss" scoped>
.express-popup {
  .item-cell {
    text-align: center;
  }
}
.tabs-container {
  width: 100%;
  // margin-top: 20rpx;
}
::v-deep .top-nav {
  .u-navbar__content {
    background-color: $header-color !important;
  }
}
::v-deep .pagingRef-container {
  margin-top: 50rpx;
  // background-color: #f8f8f8;
  // position: relative;
}
// 快递盒子
.express-box {
  margin: 30rpx 0;
}
::v-deep .u-radio-group--row {
  justify-content: space-between;
}

.page-container {
  width: 100%;
  height: auto;
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;

  background: $uni-bg-primary;
  .upload-box {
    margin-top: 40rpx;
    .upload-block {
      width: 160rpx;
      height: 160rpx;
      border: 1px solid #ccc;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #ccc;
      font-weight: 700;
      font-size: 26rpx;
    }
  }
  .order-info-box {
    width: 100%;
    margin-top: 50rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    .order-info-item {
      height: auto;
      background-color: #ffffff;
      box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(0, 0, 0, 0.13);
      border-radius: 20rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      margin: 20rpx 0;
      align-items: center;
      padding-bottom: 30rpx;

      .title-box {
        width: 100%;
        display: flex;
        height: 78rpx;
        background-color: #f2f2f2;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        font-size: 22rpx;
        color: #000000;
        padding: 0 20rpx;
        .order-status {
          padding: 5rpx;
          background: #cc9933;
          color: #fff;
          border-radius: 5rpx;
          font-size: 20rpx;
        }
      }

      .order-content {
        width: 100%;
        height: 344rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 25rpx;

        .image-box {
          width: 259rpx;
          height: 259rpx;
          border-radius: 10rpx;
          border: solid 1rpx #c2c2c2;

          image {
            width: 100%;
            height: 100%;
          }
        }
        .ordser-info-desc {
          margin-left: 25rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .info-desc-item {
            width: 325rpx;
            font-size: 25rpx;
            color: #000000;
            margin-bottom: 15rpx;
            white-space: normal;
          }
          .buyer-message {
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
            line-height: 1.4;
          }
          .rate {
            font-size: 25rpx;
            color: #000000;
            display: flex;
            align-items: center;
          }
        }
      }

      .Purchasing {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        .Purchasing-btn {
          width: 270rpx;
          height: 66rpx;
          position: relative;
          .sb-btn-img {
            width: 100%;
            height: 100%;
          }
          text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .Purchasing-tips {
          font-size: 20rpx;
          color: #7c7c7c;
          margin: 30rpx 0;
        }
      }
      .Buyers {
        margin-top: 40rpx;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        .Buyers-tips {
          font-size: 25rpx;
          color: #000000;
        }
        .Buyers-rate-box {
          font-size: 25rpx;
          color: #000000;
          display: flex;
          align-items: center;
          margin: 30rpx 0;
          text {
            margin-right: 10rpx;
          }
        }
        .Buyers-btn {
          width: 269rpx;
          height: 66rpx;
          font-size: 28rpx;
          color: #000;
          margin: 30rpx 0 40rpx 0;
          position: relative;
          .sb-btn-img {
            width: 100%;
            height: 100%;
          }
          text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            white-space: nowrap;
          }
          &.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            background-color: #c2c2c2;
          }
        }
      }
      .border-line {
        width: 100%;

        height: 0rpx;
        border: dashed 1rpx #acacac;
      }
      .find-funds-info {
        width: 682rpx;
        height: 1069rpx;
        background-color: #ffffff;

        box-sizing: border-box;
        padding: 40rpx;
        .title-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          //   padding: 30rpx;
          box-sizing: border-box;
          background: #ffffff;
          .title {
            font-size: 28rpx;
            color: #000000;
          }
          .f-title {
            font-size: 21rpx;
            color: #848484;
          }
        }
        .upload-box {
          margin-top: 40rpx;
        }
        .info-box {
          .info-item {
            display: flex;
            align-items: center;
            margin: 40rpx 0rpx;
            position: relative;
            .info-label {
              font-size: 26rpx;
              color: #000000;
              width: 200rpx;
            }
            .info-input {
              width: 437rpx;
              height: 69rpx;
              background-color: #f3f3f3;
              border-radius: 10rpx;
              display: flex;
              align-items: center;
              input {
                width: 100%;
                height: 100%;
                padding-left: 10rpx;
              }
            }
          }
        }
      }
      //   确认单
      .order-confirm {
        width: 100%;
        margin-top: 30rpx;
        padding: 0 25rpx;
        .image-box {
          display: flex;
          justify-content: space-between;
          image {
            width: 195rpx;
            height: 195rpx;
            border-radius: 10rpx;
          }
        }
        .confirm-info {
          display: flex;
          align-items: center;
          margin: 40rpx 0;
          .confirm-info-left {
            flex: 1;
            display: flex;
            justify-content: center;
          }
          .confirm-info-right {
            flex: 1;
            display: flex;
            justify-content: center;
          }
        }
        .confirm-message {
          display: flex;
          // height: auto;

          align-items: center;

          .value {
            width: 468rpx;
            font-size: 26rpx;
            color: #7c7c7c;
            white-space: normal;
            overflow-wrap: break-word;
          }
        }
        .confirm-pay-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          .pay {
            width: 269rpx;
            height: 66rpx;
            position: relative;
            color: #000;
            .sb-btn-img {
              width: 100%;
              height: 100%;
            }
            text {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              white-space: nowrap;
            }
          }
        }
      }

      .btn {
        width: 367rpx;
        height: 73rpx;

        font-size: 28rpx;
        color: #000;
        margin-bottom: 100rpx;
        position: relative;
        .sb-btn-img {
          width: 100%;
          height: 100%;
        }
        text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          white-space: nowrap;
        }
      }
      .white {
        height: 100rpx;
      }
    }
  }
}

// 弹出框样式
.pay-list {
  width: 100%;
  // height: auto;
  height: auto;
  padding: 30rpx;
  .pay-title {
    font-size: 32rpx;
    color: #cc9933;
    margin: 10rpx 0;
  }

  .pay-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10rpx;
    height: 80rpx;
    border-radius: 30rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    &.active {
      border-color: #e8c279;
    }
    .iconfont {
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 44rpx;
      background-color: #fe960f;
      color: #fff;
      font-size: 30rpx;
      margin-right: 15rpx;

      &.icon-wechat {
        background-color: #41b035;
      }
      &.icon-zhifubao {
        background-color: #06b4fd;
      }
    }
  }
  .comfirm-btn {
    width: 200rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #e8c279;
    margin: 0 auto;
    border-radius: 30rpx;
  }
}
// 地址相关样式
.address {
  width: 690rpx;
  max-height: 180rpx;

  padding: 28rpx;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 30rpx;
  margin: 0 auto;
  margin-top: 20rpx;

  .addressCon {
    width: 596rpx;
    font-size: 26rpx;
    color: #666;

    .name {
      font-size: 30rpx;
      color: #282828;
      font-weight: bold;
      margin-bottom: 10rpx;

      .phone {
        margin-left: 50rpx;
      }
    }

    .default {
      margin-right: 12rpx;
    }

    .setaddress {
      color: #333;
      font-size: 28rpx;
    }
  }

  .iconfont {
    font-size: 35rpx;
    color: #707070;
  }
}
</style>