wxapp_shuibei/pages/users/vault/storeMetal/nonLogisticsGold.vue

<template>
  <view class="withdraw">
    <view class="content">
      <view class="withdraw-body">
        <view class="gold-box">
          <view class="gold-item">
            <view class="header">
              <h3 class="title">存金克重</h3>
              <view class="live-gold">
                实时金价
                <text class="price">{{ viprealGoldprice.toFixed(2) }}</text>
              </view>
            </view>

            <view class="input-box">
              <input
                type="text"
                class="inpu-box-ds"
                placeholder="请输入克重"
                v-model="extract"
                @input="onKeyInput"
                placeholder-style="color: #999999; font-size: 28rpx;"
              />
            </view>
            <view class="header">
              <span class="title">淘宝订单号</span>
            </view>
            <view class="input-box">
              <input
                type="text"
                class="inpu-box-ds"
                placeholder="请输入淘宝定单号"
                v-model="expressNo"
                @input="onKeyInput"
                placeholder-style="color: #999999; font-size: 28rpx;"
              />
            </view>
          </view>
        </view>
        <view class="info-money" style="font-size: 16px">
          <text class="info-money-num" v-if="extract"
            >预存金额= {{ extract }} * {{ viprealGoldprice.toFixed(2) }} =
            {{ totalPrice }}元</text
          >
          <text class="info-money-num" v-else>预存金额0元</text>
        </view>
        <view class="img-container">
          <view class="img-title">
            <span class="title">实物图片</span>
          </view>
          <view class="img-box" style="margin-top: 10px">
            <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>
        </view>
        <view class="submit-box">
          <view
            style="margin-top: 10px"
            class="submit"
            @click="handleShowModel"
          >
            <image class="btn" src="/static/images/sb_btn.png"></image>
            <text class="btn-text">点击提交</text>
          </view>
          <view class="aggregate" @click="aggregate = !aggregate">
            <image
              class="choose"
              :src="
                aggregate
                  ? '/static/recycle/choose.png'
                  : '/static/recycle/nochoose.png'
              "
              mode="scaleToFill"
            ></image>
            <view class="aggre">
              阅读并同意
              <span class="aggre-text" @click="showAggre">《存金协议》</span>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-popup
      ref="singPopup"
      type="bottom"
      borderRadius="10px 10px 0 0"
      maskBackgroundColor="rgba(0,0,0,0)"
    >
      <view class="signContent">
        <scroll-view scrollY class="scroll">
          <up-parse :content="agreement"></up-parse>
        </scroll-view>
        <view
          class="comfireBtn footer"
          @click="
            aggregate = true;
            $refs.singPopup.close();
          "
        >
          我已详细知悉
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";

import { noLogisticsCreateAPI } from "@/api/functions";
import { useImageUpload } from "@/hooks/useImageUpload";
import { agreementGetoneApi } from "@/api/user";
const { imageList, afterRead, deletePic, uploadLoading } = useImageUpload({
  pid: 9,
  model: "gold",
});
const maoding = ref(0);
const props = defineProps(["viprealGoldprice"]);
const singPopup = ref(null);
const agreement = ref("");
const type = ref("store"); // 初始值与原data一致
const is_lock = ref(false);
const needPrice = ref(0);
const extract = ref(null);
const is_post = ref(false);
const totalPrice = ref(0);
const aggregate = ref(false);
const expressNo = ref("");

// 获取协议
function agreementGetoneFn() {
  // 资产说明
  agreementGetoneApi({ name: "saveGold" }).then((res) => {
    agreement.value = res.data?.content;
  });
}
// 页面生命周期（对应原onLoad）
onShow(() => {});
const showAggre = () => {
  agreementGetoneFn();
  singPopup.value?.open();
};

// 提交存金
const handleShowModel = async () => {
  if (!extract.value) {
    return uni.showToast({
      title: "请输入克重",
      duration: 2000,
      icon: "none",
    });
  }
  if (!expressNo.value) {
    return uni.showToast({
      title: "请输入快递单号",
      duration: 2000,
      icon: "none",
    });
  }
  const res = await noLogisticsCreateAPI({
    depositWeight: extract.value,
    image: imageList.value.map((v) => v.info.url),
    taobaoOrderNo: expressNo.value,
  });
  uni.showToast({ title: "下单成功!" });

  setTimeout(() => {
    uni.navigateTo({
      url: "/pages/users/vault/index",
    });
  }, 1000);
};
watch(
  () => extract.value,
  (val) => {
    if (val) {
      totalPrice.value = (
        Number(extract.value) * Number(props.viprealGoldprice)
      ).toFixed(2);
      is_post.value = true;
    } else {
      is_post.value = false;
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.upload-box {
  .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-money-num {
  color: #999999;
  font-size: 26rpx;
}

.submit-box {
  margin-top: 300rpx;
}

.submit {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .btn {
    width: 267rpx;
    height: 71rpx;
  }
  .btn-text {
    font-size: 30rpx;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.header {
  padding-left: 5px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  border-radius: 5px;
  // background-color: #fff;
  // font-weight: bold;
  font-size: 18px;

  .live-gold {
    font-weight: 500;
    font-size: 32rpx;
    font-family: "黑体";

    .price {
      // color: #d0a34a;
      color: $txt-color;
      margin-left: 10rpx;
      font-weight: bold;
      font-size: 38rpx;
    }
  }

  .item {
    display: flex;
    align-items: center;
    margin-top: 15px;

    .targe {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: #cc9933;
    }

    .address {
      width: 440rpx;
      margin: 0 10px;
      font-size: 28rpx;

      .receive-address {
        letter-spacing: 9px;
      }
    }

    .end {
      display: flex;
      justify-content: center;
      align-items: center;

      .copy {
        color: #888888;
        border-radius: 3px;
        border: 1px solid #888888;
        font-size: 24rpx;
        padding: 6rpx 23rpx;
      }
    }
  }

  &::before {
    position: absolute;
    /*绝对定位*/
    top: 50%;
    /*Y轴方向偏移自身高度的50%*/
    transform: translatey(-50%);
    /*Y轴方向偏移微调*/
    left: 0;
    /*紧靠容器左边缘*/
    content: "";
    /*伪元素需要有内容才能显示*/
    width: 2px;
    /*伪元素宽度*/
    height: 15px;
    /*伪元素高度*/
    background-color: #f8c007;
    /*伪元素颜色*/
  }

  .title {
    font-weight: 500;
    font-size: 32rpx;
    font-family: "黑体";
  }
}

.gold-box {
  padding-top: 30rpx;
  .gold-item {
    .input-box {
      display: flex;
      background-color: #ededed;
      border-radius: 5px;
      height: 90rpx;
      align-items: center;
      justify-content: space-around;
      font-size: 28rpx;

      margin: 20rpx 0;

      // color:#c7c7c7 ;
      input {
        padding-left: 12rpx;
        width: 92%;
      }
    }
  }
}

.img-container {
  padding: 30rpx 0;

  .img-title {
    padding-left: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 32rpx;
    font-family: "黑体";

    &::before {
      position: absolute;
      top: 50%;
      transform: translatey(-50%);
      left: 0;
      content: "";
      width: 2px;
      height: 15px;
      background-color: #daa520;
    }
  }
}

.withdraw {
  height: 100%;
  background-color: #f7f7f7;
  min-height: 100%;

  border-radius: 10px 10px 0 0;
  position: relative;
  // top: -20rpx;
  padding: 0 25rpx;
  top: -67rpx;

  &-body {
    // background-color: #fff;
    padding: 0 28rpx;
    font-size: 14px;

    .input-money {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      border-bottom: 1px solid #eaeef1;

      .rmb {
        font-size: 16px;
      }

      .t-input {
        height: 1.9em;
        font-size: 2.5em;
        border: none;
        position: relative;
        left: 3.5%;
        outline: none;
      }
    }

    .info-money {
      font-size: 26rpx;
      margin-left: 34rpx;
      &-num {
        color: #c9c9c9;
      }
    }

    .aggregate {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;

      .aggre {
        font-size: 28rpx;
        margin-left: 10px;
        color: #929292;

        .aggre-text {
          color: #cc9933;
        }
      }
    }

    .choose {
      width: 16px;
      height: 16px;
    }
  }
}

.tx-active {
  button {
    color: #fff;
    background: #c4bba6;
  }
}

.signContent {
  background-color: #f8f8f8;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 20px 20px 0 0;

  .scroll {
    // background-color: #fff;
    padding: 4px;
    height: 300px;
    overflow-y: hidden;
    border: 1px solid #dfdfdf;
  }

  .footer {
    margin-top: 10px;
    color: #fff;
    padding: 4px 20px;
    border-radius: 20px;
    background: linear-gradient(to right, #8ed187, #5dd665);
  }
}
</style>