wxapp_shuibei/pages/find_funds/findFunds.vue

<template>
  <view class="page-container">
    <view class="banner"></view>
    <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="findFunds.estimatedWeight" />
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">理想工费（g）</view>
          <view class="info-input">
            <input type="number" v-model="findFunds.idealWage" />
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">购买件数</view>
          <view class="info-input">
            <input type="number" v-model="findFunds.numberOfUnits" />
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">金属类型</view>

          <!-- <up-radio-group v-model="goldType" @change="selectGoldType">
            <up-radio
              v-for="item in goldList"
              :key="item.title"
              :name="item.name"
              activeColor="#e9c279"
              :label="item.title"
            ></up-radio>
          </up-radio-group> -->
          <radio-group
            @change="selectGoldType"
            class="radio-box"
            :value="goldType"
          >
            <label class="lable-box" v-for="item in goldList" :key="item.title">
              <view>
                <radio
                  :value="item.value"
                  activeBackgroundColor="#e9c279"
                  :checked="goldType == item.value"
                />
              </view>
              <view>{{ item.title }}</view>
            </label>
          </radio-group>
        </view>
        <view class="info-item">
          <view class="info-label">买家留言</view>
        </view>
        <view class="info-input info-item-message">
          <up-textarea
            v-model="findFunds.description"
            placeholder="请输入您的留言,例如:l件3克的戒指"
            :maxlength="30"
            :count="true"
          ></up-textarea>
        </view>
      </view>
    </view>
    <!-- 发布找款 -->
    <view class="btn-box" @click="publish">
      <image class="sb-btn-img" src="/static/images/sb_btn.png"></image>
      <text>发布找款</text>
    </view>
    <!-- 提示 -->
    <view class="find-finish-tips">
      *发布找款后，正常48小时内会有代购接单，如超时代表未找到该订单，
      请关注订单状态。
    </view>
  </view>
</template>

<script setup>
import { useToast } from "@/hooks/useToast";
import { useImageUpload } from "@/hooks/useImageUpload";
import { ref, reactive } from "vue";
import { findFundsAPI } from "@/api/find_fund";
const { imageList, afterRead, deletePic, uploadLoading } = useImageUpload({
  pid: 10,
  model: "Refund",
});
const { Toast } = useToast();
// 选择金料类型
const goldList = reactive([
  {
    title: "黄金",
    value: "au",
  },

  {
    title: "白银",
    value: "ag",
  },
  {
    title: "铂金",
    value: "pt",
  },
  // {
  //   title: "K金",
  //   name: "kau",
  // },
]);
const goldType = ref("au");
const selectGoldType = (e) => {
  goldType.value = e.detail.value;
};
const findFunds = ref({
  estimatedWeight: "",
  idealWage: "",
  metalType: "",
  numberOfUnits: "",
  purchaserImgs: [],
  description: "",
});
// 发布找款
const publish = async () => {
  if (checkData()) {
    const res = await findFundsAPI({
      ...findFunds.value,
      metalType: goldType.value,
      purchaserImgs: imageList.value.map((v) => v.info.url),
    });
    Toast({ title: "发布成功", icon: "success" });
    uni.redirectTo({ url: "/pages/find_funds/fundsOrder" });
  }
};
const checkData = () => {
  if (findFunds.value.estimatedWeight == "") {
    Toast({ title: "请填写预估重量" });
    return false;
  }
  if (findFunds.value.idealWage == "") {
    Toast({ title: "请填写理想工费" });
    return false;
  }
  if (findFunds.value.numberOfUnits == "") {
    Toast({ title: "请填写购买件数" });
    return false;
  }
  if (findFunds.value.description == "") {
    Toast({ title: "请填写买家留言" });
    return false;
  }
  if (imageList.value.length == 0) {
    Toast({ title: "请上传产品图" });
    return false;
  }
  return true;
};
// 请输入您的留言
// const message = ref("");
</script>

<style lang="scss" scoped>
.page-container {
  width: 750rpx;
  height: 100vh;
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 100vh;
  background: $uni-bg-primary;

  //   .banner {
  //     position: absolute;
  //     left: 0;
  //     top: 0;
  //     width: 100%;
  //     height: 50vh;
  //     background-image: linear-gradient(
  //       360deg,
  //       #ffffff 0%,
  //       #e8c279 100%
  //     ) !important;
  //     z-index: -1;
  //   }
  .find-funds-info {
    width: 682rpx;
    min-height: 1069rpx;
    background-color: #ffffff;
    box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(0, 0, 0, 0.13);
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 40rpx;
    .title-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      //   padding: 30rpx;
      box-sizing: border-box;
      .title {
        font-size: 28rpx;
        color: #000000;
      }
      .f-title {
        font-size: 21rpx;
        color: #848484;
      }
    }
    .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;
      }
    }
    .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;
          }
        }
      }
    }
  }
  .btn-box {
    width: 270rpx;
    height: 66rpx;
    font-size: 28rpx;
    color: #000;
    position: relative;
    margin-top: 40rpx;
    .sb-btn-img {
      width: 100%;
      height: 100%;
    }
    text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
    }
  }
  .find-finish-tips {
    margin-top: 50rpx;
    font-family: Source Han Sans CN;
    font-size: 21rpx;
    line-height: 30rpx;
    color: #7c7c7c;
  }
  .radio-box {
    width: 437rpx;
    display: flex;
    justify-content: space-between;
    .lable-box {
      display: flex;
      align-items: center;

      margin-right: 10rpx;
    }
  }
}
</style>