VAVABUY/pages/purpose/index.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="意向表单" fixed border>
        <template #right>
          <view class="nav_right" @click.stop="toRecord">
            <trans _t="意向记录" />
          </view>
        </template>
      </Navbar>
      <view class="form">
        <view class="form_item">
          <view class="item_label _required">
            <trans _t="商品名称" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('请输入商品名称')"
              border="surround"
              v-model="form.goods_name"
              :maxlength="50"
            />
          </view>
        </view>

        <view class="form_item">
          <view class="item_label _required">
            <trans _t="商品图片" />
          </view>
          <view class="item_value">
            <imageUpload v-model="imageList" :maxCount="6" multiple />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="商品详细描述" />
          </view>
          <view class="item_value">
            <up-textarea
              v-model="form.goods_desc"
              :placeholder="t('请输入商品详细描述')"
              count
              autoHeight
              border="surround"
              maxlength="500"
            ></up-textarea>
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="价格区间" />
          </view>
          <view class="item_value">
            <view class="value_box">
              <trans _t="最低价" class="title" />
              <Input border="surround" type="Number" v-model="form.min_price">
                <template #suffix>
                  <trans _t="元" class="unit" />
                </template>
              </Input>
            </view>
            <view class="price_separator"></view>
            <view class="value_box">
              <trans _t="最高价" class="title" />
              <Input border="surround" type="Number" v-model="form.max_price">
                <template #suffix>
                  <trans _t="元" class="unit" />
                </template>
              </Input>
            </view>
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="购买数量" />
          </view>
          <view class="item_value">
            <up-number-box v-model="form.goods_num" :min="1"></up-number-box>
          </view>
        </view>
        <view class="form_item">
          <view class="item_label _required">
            <trans _t="联系人姓名" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('请输入联系人姓名')"
              border="surround"
              v-model="form.name"
            />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label _required">
            <trans _t="联系人电话" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('请输入联系人电话')"
              border="surround"
              type="Number"
              v-model="form.mobile"
            />
          </view>
        </view>
      </view>
      <view class="footer">
        <view class="submit_btn" @click="submit">
          <trans _t="提交" />
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import { reactive, ref, watch, nextTick } from "vue";
import { t } from "@/locale";
import Input from "@/components/input";
import imageUpload from "@/components/imageUpload.vue";
import { RONGIMCALL_NEED_FROMS } from "@/api";
import { Toast, Modal } from "@/utils";

const imageList = ref([]);

const form = reactive({
  goods_name: "",
  imageList: [],
  goods_desc: "",
  min_price: "",
  max_price: "",
  goods_num: "1",
  name: "",
  mobile: "",
});

const toRecord = () => {
  uni.navigateTo({
    url: `/pages/purpose/record`,
  });
};

const submit = () => {
  if (!form.goods_name) return Toast(t("请输入商品名称"));
  if (!imageList.value.length) return Toast(t("请上传商品图片"));
  if (!form.name) return Toast(t("请输入联系人姓名"));
  if (!form.mobile) return Toast(t("请输入联系人电话"));
  if (imageList.value.length) {
    form.goods_imgs = imageList.value.map((item) => item.url).join(",");
  }
  verificationAdd();
};

const verificationAdd = async () => {
  try {
    const res = await RONGIMCALL_NEED_FROMS({ ...form });
    Toast(res.msg, 1000).then(() => {
      setTimeout(() => {
        toRecord();
      }, 1000);
    });
  } catch (error) {
    Toast(error.msg);
    close();
  }
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background: var(--bg);
  min-height: 100vh;
  padding: 24rpx;
  .nav_right {
    color: var(--text);
    .size(28rpx);
  }
  .form {
    &_item {
      margin-top: 24rpx;

      &:first-child {
        margin-top: 0;
      }

      .item_label {
        font-weight: 700;
        color: var(--text);
        .size(28rpx);
        line-height: 60rpx;
        white-space: nowrap;
        padding-right: 24rpx;
        height: 64rpx;
        width: fit-content;
        position: relative;

        // &::before {
        //   content: "*";
        //   color: #f56c6c;
        //   margin-right: 8rpx;
        // }
      }

      ._required {
        &::before {
          content: "*";
          color: #f56c6c;
          margin-right: 8rpx;
        }
      }

      .item_value {
        column-gap: 24rpx;
        flex: 1;
        display: flex;
        align-items: center;
        gap: 24rpx;

        .value_box {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 12rpx;

          .title {
            color: var(--text);
            .size(24rpx);
            font-weight: 500;
          }
          .unit {
            .size(22rpx);
            color: var(--text-01);
          }
        }

        .price_separator {
          width: 60rpx;
          height: 2rpx;
          margin: 0 12rpx;
          align-self: flex-end;
          margin-bottom: 28rpx;
          background-color: var(--text-01);
        }

        /deep/ .u-input {
          height: 80rpx;
          border-radius: 20rpx;
          padding: 0 20rpx !important;
          background-color: var(--inputBg);

          .u-input__content {
            display: flex;
          }
        }
        /deep/ .u-textarea {
          border-radius: 20rpx;
          padding: 0 20rpx !important;
          background-color: var(--inputBg);
        }
        /deep/ .u-number-box {
          border: 1px solid #dcdfe6;
          border-radius: 16rpx;

          .u-number-box__minus,
          .u-number-box__plus {
            width: 56rpx !important;
            height: 56rpx !important;
            background-color: transparent !important;

            .u-icon__icon {
              .size(26rpx) !important;
              color: var(--text) !important;
            }

            &--hover {
              .u-icon__icon {
                color: var(--primary) !important;
              }
            }
          }

          .u-number-box__input {
            margin: 0;
            border-left: 1px solid #dcdfe6;
            border-right: 1px solid #dcdfe6;
            height: 56rpx !important;
            width: 100rpx !important;
            background-color: transparent !important;
          }
        }
      }
    }
  }

  .submit_btn {
    height: 100rpx;
    padding: 16rpx 30rpx;
    background-color: var(--black);
    color: var(--light);
    .flex_center();
    border-radius: 20rpx;
    .size(24rpx);
    margin-top: 40rpx;
  }
}
</style>