VAVABUY/pagesBuyer/profile/enter.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="商家入驻" fixed border> </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.name"
              :maxlength="50"
            />
          </view>
        </view>

        <view class="form_item">
          <view class="item_label _required">
            <trans _t="店铺logo" />
          </view>
          <view class="item_value">
            <imageUpload v-model="imageList" :maxCount="1" multiple />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="店铺地址" />
          </view>
          <view class="item_value">
            <up-textarea
              v-model="form.address"
              :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">
            <Input
              :placeholder="t('请输入联系方式')"
              border="surround"
              type="Number"
              v-model="form.tel"
            />
          </view>
        </view>

        <!-- <view class="form_item">
          <view class="item_label">
            <trans _t="经度" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('请输入经度')"
              border="surround"
              v-model="form.longitude"
            />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="纬度" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('请输入纬度')"
              border="surround"
              type="Number"
              v-model="form.latitude"
            />
          </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 { SELLER_APPLY_SELLER } from "@/api";
import { Toast, Modal } from "@/utils";
import { onLoad } from "@dcloudio/uni-app";

const imageList = ref([]);

const form = reactive({
  name: "",
  logo: "",
  address: "",
  tel: "",
  longitude: "",
  latitude: "",
});

const submit = () => {
  if (!form.name) return Toast(t("店铺名称"));
  // if (!imageList.value.length) return Toast(t("请上传商品图片"));
  if (imageList.value.length) {
    form.logo = imageList.value.map((item) => item.url).join(",");
  }
  verificationAdd();
};

const verificationAdd = async () => {
  try {
    const res = await SELLER_APPLY_SELLER({ ...form });
    Toast(res.msg, 1000).then(() => {
      setTimeout(() => {
        // uni.navigateTo({
        //   url: `/pages/assistant/system?id=${res.data.id}`,
        // });
      }, 1000);
    });
  } catch (error) {
    Toast(error.msg);
    close();
  }
};

onLoad((options) => {
  form.cateid = options.cateid;
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background: var(--bg);
  min-height: 100vh;
  padding: 24rpx;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  .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>