渠道管理

public/config.js

@@ -4,11 +4,11 @@ window.serverConfig = {
   // 必填: api地址, 换成自己的域名即可
   // 例如: https://www.你的域名.com/index.php?s=/admin
   // BASE_API: 'https://www.saas.njrenzhou.com/index.php?s=/admin',
-  BASE_API: 'https://www.royaum.com.cn/index.php?s=/admin',
+  BASE_API: 'https://test-www.royaum.com.cn/index.php?s=/admin',
   // 必填: store模块的入口地址
   // 例如: https://www.你的域名.com/store
   // STORE_URL: 'https://www.saas.njrenzhou.com/store',
-  STORE_URL: 'https://www.royaum.com.cn/store',
+  STORE_URL: 'https://test-www.royaum.com.cn/store',
 
     // 图片文件上传大小 (单位mb)
   uploadImageSize: 2,

src/api/api.config.js

@@ -41,9 +41,13 @@ export default {
       dataList: 'store/platformList',
       getStorePlatform: 'store/getStorePlatform',
       setStorePlatform: 'store/auth',
-      getGoodsList: '/goods/index'
+      getGoodsList: '/goods/index',
-    },
 
+    },
+    channel:{
+      channelList: '/channel/index',
+      channelEdit: '/channel/edit',
+    },
     // 商家后台api权限
     api: {
       list: 'store.api/index',

src/api/store.js

@@ -1,5 +1,28 @@
 import api from './api.config'
 import { axios } from '@/utils/request'
+
+/**
+ * 编辑记录
+ * @param {*} data
+ */
+export function channelEdit (id, params) {
+  return axios({
+    url: api.store.channel.channelEdit,
+    method: 'post',
+    params: { id, ...params }
+  })
+}
+/**
+ * 渠道列表
+ * @param {*} params
+ */
+export function channelList (params) {
+  return axios({
+    url: api.store.channel.channelList,
+    method: 'get',
+    params
+  })
+}
 /**
  * 获取列表
  * @param {*} params

src/config/router.config.js

@@ -17,6 +17,11 @@ export const asyncRouterMap = [
         component: PageView,
         meta: { title: '商城管理', keepAlive: true, icon: Icon['shop'], permission: ['store'] },
         children: [
+          {
+            path: 'channel',
+            component: () => import(/* webpackChunkName: "store" */ '@/views/store/channel'),
+            meta: { title: '渠道管理', keepAlive: true, hiddenHeaderContent: false, permission: ['store'] }
+          },
           {
             path: 'index',
             component: () => import(/* webpackChunkName: "store" */ '@/views/store/index'),

src/views/store/channel.vue

@@ -0,0 +1,105 @@
+<template>
+    <a-card :bordered="false">
+      <div class="card-title">{{ $route.meta.title }}</div>
+      <a-table
+        rowKey="merchant_id"
+        :columns="columns"
+        :dataSource="shopList"
+        :defaultExpandAllRows="true"
+        :expandIconColumnIndex="1"
+        :pagination="pagination"
+        :loading="isLoading"
+      >
+        <span slot="logoImage" slot-scope="text, item">
+          <a v-if="item.logoImage" title="点击查看原图" :href="item.logoImage.external_url" target="_blank">
+            <img width="50" height="50" :src="item.logoImage.external_url" alt="商户logo" />
+          </a>
+        </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>
+      </a-table>
+      <EditForm ref="EditForm" @handleSubmit="handleRefresh" />
+    </a-card>
+  </template>
+  
+  <script>
+import * as Api from '@/api/store'
+  import { STable } from '@/components'
+  import EditForm from './modules/channelEdit.vue'
+  
+  export default {
+    components: {
+      STable,
+      EditForm
+    },
+    data() {
+      return {
+        shopList: [],
+        // 表头
+        columns: [
+          {
+            title: '商户logo',
+            dataIndex: 'logoImage',
+            scopedSlots: { customRender: 'logoImage' }
+          },
+          {
+            title: '商户名称',
+            dataIndex: 'shop_name'
+          },
+          {
+            title: '商户标签',
+            dataIndex: 'shop_label'
+          },
+          {
+            title: '渠道名称',
+            dataIndex: 'name'
+          },
+          {
+            title: '渠道别名',
+            dataIndex: 'alias'
+          },
+          {
+            title: '添加时间',
+            dataIndex: 'create_time'
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            width: '180px',
+            scopedSlots: { customRender: 'action' }
+          }
+        ]
+      }
+    },
+    created() {
+      // 获取分类列表
+      this.getShopList()
+    },
+    methods: {
+       // 编辑商户
+      async handleEdit(record) {
+        // 显示对话框
+        this.$refs.EditForm.add(record)
+      },
+      // 刷新列表
+      handleRefresh () {
+        // 获取分类列表
+        this.getShopList()
+      },
+      // 获取商户列表
+      getShopList() {
+        this.isLoading = true
+        Api.channelList()
+          .then((result) => {
+            this.shopList = result.data.list.data
+            this.isLoading = false
+          })
+          .finally(() => (this.isLoading = false))
+      },
+    }
+  }
+  </script>

src/views/store/modules/channelEdit.vue

@@ -0,0 +1,133 @@
+<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-item label="商户图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
+					<SelectImage :defaultList="info.logoImage ? [info.logoImage] : []" v-decorator="['logo_image_id', { rules: [{ required: true, message: '请上传图片' }] }]" />
+				</a-form-item>
+				<a-form-item label="商户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+					<a-input v-decorator="['shop_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
+				</a-form-item>
+				<a-form-item label="商户标签" :labelCol="labelCol" :wrapperCol="wrapperCol">
+					<a-input v-decorator="['shop_label', { rules: [{ required: true, min: 2, max: 10, message: '请输入2-10个字符' }] }]" />
+				</a-form-item>
+				<a-form-item label="营业执照" :labelCol="labelCol" :wrapperCol="wrapperCol">
+					<SelectImage multiple :defaultList="info.licenseImg ? info.licenseImg : []" v-decorator="['license_img_id', { rules: [{ required: true, message: '请上传营业执照' }]}]" />
+				</a-form-item>
+				<a-form-item label="店铺评分" :labelCol="labelCol" :wrapperCol="wrapperCol">
+					<a-select style="width: 300px" v-decorator="['score', { rules: [{ required: true, message: '请选择评分' }] }]" placeholder="请选择评分">
+						<a-select-option v-for="(item, index) in 5" :key="index" :value="item">{{ item }}</a-select-option>
+					</a-select>
+				</a-form-item>
+			</a-form>
+		</a-spin>
+	</a-modal>
+</template>
+  
+  <script>
+  import * as Api from '@/api/store'
+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) {
+			console.log(info)
+			// 显示窗口
+			this.visible = true
+			// 当前分类记录
+			this.info = info
+			// 设置默认值
+			this.setFieldsValue()
+		},
+
+		// 设置默认值
+		setFieldsValue() {
+			const {
+				form: { setFieldsValue }
+			} = this
+			// 设置表单内容
+			this.$nextTick(() => {
+				setFieldsValue(
+					// eslint-disable-next-line no-undef
+					_.pick(this.info, [
+						'logo',
+						'shop_name',
+						'shop_label',
+						'logo_image_id',
+						'score',
+						'user_name',
+						'commission_ratio',
+						'is_select_mechant'
+					])
+				)
+			})
+		},
+		// 确认按钮
+		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.channelEdit({ id:this.info['id'], form: {alias: this.info['alias'],name: this.info['name'], ...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>
+