thridLargeScreen/src/views/myShop/components/DialogSettingStoreStatus.vue

<template>
  <div>
    <el-dialog title="设置" v-model="dialogVisible">
      <div>
        <el-form label-width="auto">
          <el-form-item label="可用状态">
            <el-radio-group
              v-model="state.form.status"
              class="ml-4"
              name="status"
            >
              <el-radio :label="0" size="large">可用</el-radio>
              <el-radio :label="1" size="large">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="交易方式">
            <el-radio-group v-model="state.form.tradeType" class="ml-4">
              <el-radio :label="0" size="large">线下交易</el-radio>
              <el-radio :label="1" size="large">线上交易</el-radio>
              <el-radio :label="2" size="large">根据商品情况自行设定</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商品审核">
            <el-radio-group v-model="state.form.needVerify" class="ml-4">
              <el-radio :label="0" size="large">无需审核</el-radio>
              <el-radio :label="1" size="large">需要审核后才能上架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  id: {
    type: Number
  }
});
const emits = defineEmits(["update:show", "success"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      getDetail();
    } else {
    }
  }
);
const status = ref(0);
const radio1 = ref(3);
const state = reactive({
  detail: {},
  form: {
    status: 0,
    tradeType: 0,
    needVerify: 0
  }
});
const getDetail = () => {
  if (!props.id) {
    return;
  }
  request
    .get(`/articleService/serviceProvider/shop?id=${props.id}`)
    .then(resp => {
      state.detail = resp.data;
      state.form.status = resp.data.status;
      state.form.tradeType = resp.data.tradeType;
      state.form.needVerify = resp.data.needVerify;
    });
};
const handleSubmit = () => {
  request
    .post("/articleService/serviceProvider/shop/setting", {
      id: props.id,
      ...state.form
    })
    .then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
      emits("success");
    });
};
</script>