开通商城

src/api/setting/gmall.js

@@ -0,0 +1,54 @@
+import { axios } from '@/utils/request'
+
+// api接口列表
+const api = {
+  list: '/retail/list',
+  add: '/retail/add',
+  edit: '/retail/edit',
+  delete: '/retail/delete'
+}
+
+// 列表记录
+export function list (params) {
+  return axios({
+    url: api.list,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 新增记录
+ * @param {*} data
+ */
+export function add (data) {
+  return axios({
+    url: api.add,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 编辑记录
+ * @param {*} data
+ */
+export function edit (data) {
+  return axios({
+    url: api.edit,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 删除记录
+ * @param {*} data
+ */
+export function deleted (data) {
+  return axios({
+    url: api.delete,
+    method: 'post',
+    data: data
+  })
+}

src/views/setting/gmall/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <a-card :bordered="false">
+    <div class="card-title">{{ $route.meta.title }}</div>
+    <div class="table-operator">
+      <!-- 搜索板块 -->
+      <a-row class="row-item-search">
+        <a-form class="search-form" layout="inline">
+          <a-form-item label="售卖名称">
+            <a-input v-model="queryParam.retail_name" placeholder="请输入售卖名称" />
+          </a-form-item>
+          <a-form-item label="售卖类型">
+            <a-select v-model="queryParam.retail_type" placeholder="请选择售卖类型">
+              <a-select-option
+                v-for="(item, index) in [
+                  { retail_type: 10, name: '零售商城' },
+                  { retail_type: 20, name: '批发商城' },
+                ]"
+                :key="index"
+                :value="item.retail_type"
+                >{{ item.name }}</a-select-option
+              >
+            </a-select>
+          </a-form-item>
+          <a-form-item class="search-btn">
+            <a-button type="primary" icon="search" @click="handleSearch">搜索</a-button>
+          </a-form-item>
+        </a-form>
+      </a-row>
+    </div>
+    <div class="table-operator">
+      <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
+    </div>
+    <s-table
+      ref="table"
+      rowKey="merchant_id"
+      :columns="columns"
+      :data="loadData"
+      :pagination="pagination"
+      :scroll="{ x: 1450 }"
+    >
+      <span slot="retail_type" slot-scope="text, item">
+        {{ item.retail_type == 10 ? '零售商城' : '批发商城' }}
+      </span>
+      <span slot="retail_status" slot-scope="text, item">
+        <a-tag class="cur-p" :color="text == 10 ? 'green' : 'red'" >{{ text == 10 ? '展示' : '隐藏' }}</a-tag>
+      </span>
+      <span slot="action" slot-scope="text, item">
+        <template>
+          <a v-action:edit style="margin-right: 8px" @click="handleEdit(item)">编辑</a>
+          <a v-action:delete @click="handleDelete(item)">删除</a>
+        </template>
+      </span>
+    </s-table>
+    <AddForm ref="AddForm" @handleSubmit="handleRefresh(true)" />
+    <EditForm ref="EditForm" @handleSubmit="handleRefresh()" />
+  </a-card>
+</template>
+
+<script>
+import * as Api from '@/api/setting/gmall'
+import { STable } from '@/components'
+import AddForm from './modules/Add.vue'
+import EditForm from './modules/Edit.vue'
+
+export default {
+  components: {
+    STable,
+    AddForm,
+    EditForm,
+  },
+  data() {
+    return {
+      queryParam: {
+        retail_type:'',
+        retail_name:'',
+      },
+      loadData: (param) => {
+        return Api.list({ ...param, ...this.queryParam }).then((response) => {
+          return response.data.list
+        })
+      },
+      // 表头
+      columns: [
+        {
+          title: '商城id',
+          dataIndex: 'retail_price_id',
+        },
+        {
+          title: '售卖名称',
+          width: '150px',
+          dataIndex: 'retail_name',
+          scopedSlots: { customRender: 'retail_name' },
+        },
+        {
+          title: '售卖类型',
+          dataIndex: 'retail_type',
+          scopedSlots: { customRender: 'retail_type' },
+        },
+        {
+          title: ' 售卖现价',
+          dataIndex: 'retail_current_price',
+          scopedSlots: { customRender: 'retail_current_price' },
+        },
+        {
+          title: '售卖原价',
+          dataIndex: 'retail_original_price',
+          scopedSlots: { customRender: 'retail_original_price' },
+        },
+        {
+          title: '买两年优惠价',
+          dataIndex: 'retail_discounts',
+        },
+        {
+          title: '售卖状态',
+          dataIndex: 'retail_status',
+          scopedSlots: { customRender: 'retail_status' },
+        },
+        {
+          title: '添加时间',
+          dataIndex: 'create_time',
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
+    }
+  },
+  created() {},
+  methods: {
+    // 新增商户
+    async handleAdd() {
+      // 显示对话框
+      this.$refs.AddForm.add()
+    },
+    // 编辑商户
+    async handleEdit(record) {
+      // 显示对话框
+      this.$refs.EditForm.add(record)
+    },
+    // 刷新列表
+    handleRefresh(bool = false) {
+      // 获取分类列表
+      this.$refs.table.refresh(bool)
+    },
+    // 确认搜索
+    handleSearch(e) {
+      this.handleRefresh(true)
+    },
+    // 删除记录
+    handleDelete(record) {
+      const self = this
+      const modal = this.$confirm({
+        title: '您确定要删除该商户吗?',
+        content: '删除后不可恢复',
+        onOk() {
+          return Api.deleted({ retailPriceId: [record['retail_price_id'] ]})
+            .then((result) => {
+              self.$message.success(result.message, 1.5)
+              self.handleRefresh(true)
+            })
+            .finally(() => modal.destroy())
+        },
+      })
+    },
+  },
+}
+</script>

src/views/setting/gmall/modules/Add.vue

@@ -0,0 +1,148 @@
+<template>
+  <a-modal
+    title="新增商户"
+    :width="920"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-model-item label="售卖类型" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
+          <a-radio-group v-decorator="['retail_type', { initialValue: 10, rules: [{ required: true }] }]"
+          >
+            <a-radio :value="10">零售商城</a-radio>
+            <a-radio :value="20">批发商城</a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-item label="售卖名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['retail_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+
+        <a-form-item label="售卖现价" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="[
+              'retail_current_price',
+              { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] },
+            ]"
+          />
+        </a-form-item>
+        <a-form-item label="售卖原价" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="[
+              'retail_original_price',
+              { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] },
+            ]"
+          />
+        </a-form-item>
+        <a-form-item label="买两年优惠价" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['retail_discounts', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-model-item label="售卖状态" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
+          <a-radio-group   v-decorator="['retail_status', { initialValue: 10, rules: [{ required: true }] }]"
+          >
+            <a-radio :value="10">展示</a-radio>
+            <a-radio :value="20">隐藏</a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
+          <a-input-number :min="0" v-decorator="['sort', { initialValue: 100, rules: [{ required: true }] }]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import * as Api from '@/api/setting/gmall'
+import { SelectImage } from '@/components'
+export default {
+  components: {
+    SelectImage,
+  },
+  props: {
+    // 分类列表
+  },
+  data() {
+    return {
+      accountList: [],
+      // 对话框标题
+      title: '',
+      // 标签布局属性
+      labelCol: {
+        span: 7,
+      },
+      // 输入框布局属性
+      wrapperCol: {
+        span: 13,
+      },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+    }
+  },
+  methods: {
+    // 显示对话框
+    add() {
+      // 显示窗口
+      this.visible = true
+    },
+    // 确认按钮
+    handleSubmit(e) {
+      e.preventDefault()
+      // 表单验证
+      const {
+        form: { validateFields },
+      } = this
+      validateFields((errors, values) => {
+        console.log(values)
+        // 提交到后端api
+        if (!errors) {
+          this.onFormSubmit(values)
+        }
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel() {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit(values) {
+      this.confirmLoading = true
+      Api.add({
+        form: {
+          ...values,
+          license_img_id:
+            (values.license_img_id &&
+              (Array.isArray(values.license_img_id) ? values.license_img_id.join(',') : values.license_img_id)) ||
+            '',
+        },
+      })
+        .then((result) => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally((result) => {
+          this.confirmLoading = false
+        })
+    },
+  },
+}
+</script>

src/views/setting/gmall/modules/Edit.vue

@@ -0,0 +1,173 @@
+<template>
+  <a-modal
+    title="新增商户"
+    :width="920"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-model-item label="售卖类型" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
+          <a-radio-group
+            v-decorator="['retail_type']"
+          >
+            <a-radio :value="10">零售商城</a-radio>
+            <a-radio :value="20">批发商城</a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-item label="售卖名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['retail_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+
+        <a-form-item label="售卖现价" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="[
+              'retail_current_price',
+              { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] },
+            ]"
+          />
+        </a-form-item>
+        <a-form-item label="售卖原价" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="[
+              'retail_original_price',
+              { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] },
+            ]"
+          />
+        </a-form-item>
+        <a-form-item label="买两年优惠价" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['retail_discounts', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-model-item label="售卖状态" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
+          <a-radio-group
+            v-decorator="['retail_status']"
+          >
+            <a-radio :value="10">展示</a-radio>
+            <a-radio :value="20">隐藏</a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
+          <a-input-number :min="0" v-decorator="['sort', { initialValue: 100, rules: [{ required: true }] }]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import * as Api from '@/api/setting/gmall'
+import { SelectImage } from '@/components'
+export default {
+  components: {
+    SelectImage,
+  },
+  props: {
+    // 分类列表
+  },
+  data() {
+    return {
+      accountList: [],
+      // 对话框标题
+      title: '',
+      // 标签布局属性
+      labelCol: {
+        span: 7,
+      },
+      // 输入框布局属性
+      wrapperCol: {
+        span: 13,
+      },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      info: {},
+    }
+  },
+  methods: {
+    // 显示对话框
+    add(info) {
+      // 显示窗口
+      this.visible = true
+      // 当前分类记录
+      this.info = info
+      console.log(this.info)
+      // 设置默认值
+      this.setFieldsValue()
+    },
+    // 设置默认值
+    setFieldsValue() {
+      const {
+        form: { setFieldsValue },
+      } = this
+      // 设置表单内容
+      this.$nextTick(() => {
+        setFieldsValue(
+          // eslint-disable-next-line no-undef
+          _.pick(this.info, [
+            'retail_name',
+            'retail_type',
+            'retail_original_price',
+            'retail_current_price',
+            'sort',
+            'retail_status',
+            'retail_discounts',
+          ])
+        )
+      })
+    },
+    // 确认按钮
+    handleSubmit(e) {
+      e.preventDefault()
+      // 表单验证
+      const {
+        form: { validateFields },
+      } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        if (!errors) {
+          this.onFormSubmit(values)
+        }
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel() {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit(values) {
+      this.confirmLoading = true
+      Api.edit({
+         retailPriceId: this.info['retail_price_id'],
+        form: {
+          ...values
+        },
+      })
+        .then((result) => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally((result) => {
+          this.confirmLoading = false
+        })
+    },
+  },
+}
+</script>