开通商城

src/api/setting/gmall.js

@@ -0,0 +1,62 @@
+import { axios } from '@/utils/request'
+
+// api接口列表
+const api = {
+  list: '/retail/list',
+  add: '/retail/add',
+  edit: '/retail/edit',
+  delete: '/retail/delete',
+  orderList: '/retail/getRetailOrder'
+}
+// 订单列表
+export function orderList (params) {
+  return axios({
+    url: api.orderList,
+    method: 'get',
+    params
+  })
+}
+// 列表记录
+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/config/router.config.js

@@ -1148,12 +1148,24 @@ export const asyncRouterMap = [
             meta: { title: '客服设置', keepAlive: false, permission: ['/setting/customer'] },
             moduleKey: 'setting-customer'
           },
-          // {
+          {
-          //   path: '/setting/storage',
+            path: '/setting/gmall/index',
-          //   component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/Storage'),
+            component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/gmall/index'),
-          //   meta: { title: '上传设置', keepAlive: false, permission: ['/setting/storage'] },
+            meta: { title: '开通商城', keepAlive: false, permission: ['/setting/gmall/index'] },
-          //   moduleKey: 'setting-storage',
+            moduleKey: 'setting-customer',
-          // },
+          },
+          {
+            path: '/setting/gmall/order',
+            component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/gmall/order'),
+            meta: { title: '商城订单', keepAlive: false, permission: ['/setting/gmall/order'] },
+            moduleKey: 'setting-customer',
+          },
+          {
+            path: '/setting/storage',
+            component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/Storage'),
+            meta: { title: '上传设置', keepAlive: false, permission: ['/setting/storage'] },
+            moduleKey: 'setting-storage',
+          },
           {
             path: '/setting/sms',
             component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/Sms'),

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>

src/views/setting/gmall/order.vue

@@ -0,0 +1,205 @@
+<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" :form="searchForm" layout="inline" @submit="handleSearch">
+          <a-form-item label="订单号">
+            <a-input v-decorator="['search']" placeholder="请输入订单号" />
+          </a-form-item>
+          <a-form-item label="支付状态">
+            <a-select v-decorator="['pay_status', { initialValue: 0 }]">
+              <a-select-option :value="0">全部</a-select-option>
+              <a-select-option :value="10">待支付</a-select-option>
+              <a-select-option :value="20">已支付</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="订单类型">
+            <a-select v-decorator="['order_type', { initialValue: 0 }]">
+              <a-select-option :value="0">全部</a-select-option>
+              <a-select-option :value="10">零售商城</a-select-option>
+              <a-select-option :value="20">批发商城 </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="支付方式">
+            <a-select v-decorator="['pay_method', { initialValue: 0 }]">
+              <a-select-option :value="0">全部</a-select-option>
+              <a-select-option :value="'wechat'">微信支付</a-select-option>
+              <a-select-option :value="'balance'">余额支付 </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="付款时间">
+            <a-range-picker format="YYYY-MM-DD" style="width: 220px" v-decorator="['pay_time']" />
+          </a-form-item>
+          <a-form-item class="search-btn">
+            <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
+          </a-form-item>
+        </a-form>
+      </a-row>
+    </div>
+    <s-table
+      ref="table"
+      rowKey="order_id"
+      :loading="isLoading"
+      :columns="columns"
+      :data="loadData"
+      :pagination="pagination"
+    >
+      <!-- 会员信息 -->
+      <span slot="user" slot-scope="text">
+        <UserItem :user="text" />
+      </span>
+      <!-- 充值方式 -->
+      <span slot="order_type" slot-scope="text">
+        <a-tag v-if="text == 10">零售商城</a-tag>
+        <a-tag v-if="text == 20">批发商城</a-tag>
+      </span>
+      <!-- 时效 -->
+      <span slot="month" slot-scope="text">
+        <p class="twoline-hide">{{ text }}个月</p>
+      </span>
+      <span slot="year" slot-scope="text"> {{ text }}年 </span>
+      <!-- 支付方式  -->
+      <span slot="pay_method" slot-scope="text">
+        <a-tag v-if="text">{{ text == 'wechat' ? '微信支付' : '余额支付' }}</a-tag>
+      </span>
+      <!-- 状态 -->
+      <span slot="pay_status" slot-scope="text">
+        <a-tag :color="text == 20 ? 'green' : ''">{{ text == 20 ? '已支付' : '待支付' }}</a-tag>
+      </span>
+      <span slot="pay_time" slot-scope="text">
+        <span>{{ text | formatDate }}</span>
+      </span>
+    </s-table>
+  </a-card>
+</template>
+  
+  <script>
+import * as Api from '@/api/setting/gmall'
+import { STable, UserItem } from '@/components/Table'
+import PayStatusEnum from '@/common/enum/recharge/order/PayStatus'
+import moment from 'moment'
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    UserItem,
+  },
+  filters: {
+    formatDate(value) {
+      return value ? moment(value * 1000).format('YYYY-MM-DD HH:mm:ss') : '-'
+    },
+  },
+  data() {
+    return {
+      // 枚举类
+      PayStatusEnum,
+      // 当前表单元素
+      searchForm: this.$form.createForm(this),
+      // 查询参数
+      queryParam: {},
+      // 正在加载
+      isLoading: false,
+      // 表头
+      // {
+      // 		title: '会员时效',
+      // 		dataIndex: 'month'
+      // 	},
+      columns: [
+        {
+          title: 'ID',
+          dataIndex: 'order_id',
+        },
+        {
+          title: '会员信息',
+          dataIndex: 'user',
+          scopedSlots: { customRender: 'user' },
+        },
+        {
+          title: '订单号',
+          dataIndex: 'order_no',
+        },
+        {
+          title: '订单类型',
+          dataIndex: 'order_type',
+          scopedSlots: { customRender: 'order_type' },
+        },
+        {
+          title: '时效',
+          dataIndex: 'year',
+          scopedSlots: { customRender: 'year' },
+        },
+        {
+          title: '订单金额',
+          dataIndex: 'order_price',
+        },
+        {
+          title: '支付金额',
+          dataIndex: 'pay_price',
+        },
+        {
+          title: '支付方式',
+          dataIndex: 'pay_method',
+          scopedSlots: { customRender: 'pay_method' },
+        },
+        {
+          title: '支付状态',
+          dataIndex: 'pay_status',
+          scopedSlots: { customRender: 'pay_status' },
+        },
+        {
+          title: '支付时间',
+          dataIndex: 'pay_time',
+          scopedSlots: { customRender: 'pay_time' },
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'create_time',
+          scopedSlots: { customRender: 'create_time' },
+        },
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: (param) => {
+        return Api.orderList({ ...param, ...this.queryParam }).then((response) => {
+          return response.data.list
+        })
+      },
+    }
+  },
+  created() {},
+  methods: {
+    /**
+     * 刷新列表
+     * @param Boolean bool 强制刷新到第一页
+     */
+    handleRefresh(bool = false) {
+      this.$refs.table.refresh(bool)
+    },
+
+    // 确认搜索
+    handleSearch(e) {
+      e.preventDefault()
+      this.searchForm.validateFields((error, values) => {
+        if (!error) {
+          this.queryParam = { ...this.queryParam, ...values }
+          this.handleRefresh(true)
+        }
+      })
+    },
+  },
+}
+</script>
+  
+  <style lang="less" scoped>
+.ant-card-body {
+  padding: 22px 29px 25px;
+}
+/deep/.ant-table-tbody td {
+  text-align: center;
+}
+/deep/.ant-table-thead th {
+  text-align: center;
+}
+</style>
+