daimp-front/sub-operation-service/src/views/ecommerce/components/purchaserPopup.vue

<template>
  <div class="purchaser-popup-warp">
    <el-dialog v-model="isShow" title="" width="80%" :before-close="doCancel" style="border-radius: 16px; padding: 40px 80px">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="auto" class="custom-form">
        <!--        <el-row :gutter="20">-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="商品分类" prop="typeId">-->
        <!--              <el-cascader v-model="ruleForm.typeId" :options="treeList" :props="treeOption" clearable :placeholder="'请选择分类'" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="收购价格" prop="price">-->
        <!--              <el-input-number v-model="ruleForm.price" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="采购商品" prop="goods">-->
        <!--              <el-input v-model="ruleForm.goods" style="width: 200px" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->

        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="收购数量" prop="num">-->
        <!--              <el-input-number v-model="ruleForm.num" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="收货地址" prop="addr">-->
        <!--              <el-input v-model="ruleForm.addr" :rows="2" type="textarea" :placeholder="'收货地址'" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label=" " prop="isPickup">-->
        <!--              <el-radio-group v-model="ruleForm.isPickup">-->
        <!--                <el-radio v-for="(n, index) in pickupOptions" :key="index" :value="n.value">{{ n.label }}</el-radio>-->
        <!--              </el-radio-group>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="采购说明" prop="remark">-->
        <!--              <el-input v-model="ruleForm.remark" :rows="2" type="textarea" :placeholder="'采购说明'" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <div style="display: flex; justify-content: flex-start">
          <el-form-item label="分类名称：" prop="typeId" style="width: 50%">
            <el-cascader
              v-model="ruleForm.typeId"
              :options="treeList"
              :props="treeOption"
              clearable
              :placeholder="'请选择分类'"
              style="width: 100%; border-radius: 10px; height: 30px"
            />
          </el-form-item>
          <div style="width: 5%">&nbsp;</div>
          <div class="inputs">
            <span class="labels">收购价格：</span>
            <input type="text" placeholder="请输入" />
          </div>
        </div>
        <div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
          <div class="inputs">
            <span class="labels">采购商品：</span>
            <input type="text" placeholder="请输入" />
          </div>
          <div style="width: 5%">&nbsp;</div>
          <div class="inputs unit">
            <span class="labels">收购数量：</span>
            <input type="text" placeholder="请输入" />
          </div>
        </div>
        <div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
          <div class="inputs">
            <span class="labels">收货地址：</span>
            <input type="text" placeholder="请输入" />
          </div>
          <div style="width: 5%">&nbsp;</div>
          <div class="inputs">
            <el-radio-group v-model="formData.toHome">
              <el-radio value="1" size="large">可上门收货</el-radio>
              <el-radio value="0" size="large">不上门收货</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
          <div class="inputs" style="width: 100%">
            <span class="labels" style="width: 14%">收货地址：</span>
            <el-input v-model="formData.address" maxlength="30" style="width: 100%" placeholder="请输入" show-word-limit type="textarea" />
          </div>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" style="height: 40px; width: 120px" @click="doSure"> 确认 </el-button>
          <el-button style="height: 40px; width: 120px" @click="doCancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import { fa } from 'element-plus/es/locale/index.mjs';
const route = useRoute();
const router = useRouter();
const formData = ref({
  toHome: '0',
  address: '',
});

const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

let treeList = reactive([]);
let ruleForm = reactive({
  typeId: '',
  price: '',
  goods: '',
  num: '',
  addr: '',
  isPickup: 1,
  remark: '',
});

const pickupOptions = reactive([
  { label: '可上门收货', value: 1 },
  { label: '不上门收货', value: 0 },
]);

let ruleFormRef = ref(null);
const treeOption = ref({
  children: 'children',
  label: 'title',
});

watch(
  () => props.list,
  () => {
    treeList = props.list;
  },
  {
    immediate: true,
  }
);
let isShow = ref(false);
const doShow = () => {
  isShow.value = true;
};

const doHide = () => {
  isShow.value = false;
};

const doCancel = () => {
  doHide();
};

const doSure = () => {
  doHide();
};

const rules = reactive({
  typeId: [{ required: true, message: '请选择商品分类', trigger: ['blur', 'change'] }],
  price: [{ required: true, message: '请输入采购价格', trigger: ['blur', 'change'] }],
  goods: [{ required: true, message: '请输入采购商品', trigger: ['blur', 'change'] }],
  num: [{ required: true, message: '请输入采购数量', trigger: ['blur', 'change'] }],
  addr: [{ required: true, message: '请填入详细地址', trigger: ['blur', 'change'] }],
  isPickup: [{ required: true, message: '请选择是否上门取货', trigger: ['blur', 'change'] }],
  remark: [{ required: false, message: '请输入补充说明', trigger: ['blur', 'change'] }],
});

defineExpose({
  doShow,
  doHide,
});
</script>
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.unit::after {
  content: 'kg';
  position: absolute;
  right: 10px; /* 调整单位与输入框的距离 */
  color: #000; /* 单位颜色 */
  pointer-events: none; /* 防止单位遮挡输入框 */
}
.unit input {
}
.inputs {
  color: #999999;
  font-size: 18px;
  width: 50%;
  position: relative;
  display: flex;
  align-items: center;
  .labels {
    width: 25%;
    margin-right: 10px;
  }
  input {
    width: calc(74% - 20px);
    border: 1px solid #999999;
    border-radius: 10px;
    height: 30px;
    padding-left: 15px;
  }
}
.purchaser-popup-warp {
}
.custom-form {
  ::v-deep() {
    .el-form-item__label {
      font-size: 18px !important;
      font-weight: 400 !important;
      color: $color-999 !important;
    }
    .el-radio__label {
      font-size: 18px;
      color: $color-333;
    }
  }
}
.el-input__inner {
  height: 30px !important;
  border-radius: 10px;
  font-size: 18px;
  color: #999999;
}
</style>