小程序风格样式设置

9 months ago · c9e5a55c53
parent 719d1e7ad0
commit c9e5a55c53
6 changed files with 145 additions and 22 deletions
--- a/src/api/client/wxapp/setting.js
+++ b/src/api/client/wxapp/setting.js
@ -3,7 +3,9 @@ import { axios } from '@/utils/request'
 // api接口列表
 const api = {
  detail: '/client.wxapp.setting/detail',
-  update: '/client.wxapp.setting/update'
+  update: '/client.wxapp.setting/update',
+  getPageStyle: '/merchant/getPageStyle',
+  setPageStyle: '/merchant/setPageStyle'
 }

 // 获取设置
@ -26,3 +28,27 @@ export function update (key, data) {
    data: { key, ...data }
  })
 }
+
+/**
+ * 获取页面风格
+ * @param {*} data
+ */
+export function getPageStyle(data) {
+  return axios({
+    url: api.getPageStyle,
+    method: 'get',
+    data: { ...data }
+  })
+}
+
+/**
+ * 设置页面风格
+ * @param {*} data
+ */
+export function setPageStyle(data) {
+  return axios({
+    url: api.setPageStyle,
+    method: 'post',
+    data: { ...data }
+  })
+}
--- a/src/api/shop/index.js
+++ b/src/api/shop/index.js
@ -6,7 +6,8 @@ const api = {
  addShop: '/merchant/add',
  editShop: '/merchant/edit',
  deleteShop: '/merchant/delete',
-  shopDetail: '/merchant/detail'
+  shopDetail: '/merchant/detail',
+  getUser: '/merchant/userinfo'
 }

 /**
@ -66,3 +67,15 @@ export function shopDetail(data) {
    data
  })
 }
+
+/**
+ * 账号
+ * @param {*} data
+ */
+export function getUser(data) {
+  return axios({
+    url: api.getUser,
+    method: 'get',
+    data
+  })
+}
--- a/src/views/client/wxapp/Style.vue
+++ b/src/views/client/wxapp/Style.vue
@ -35,9 +35,9 @@
        <!-- 表单内容 -->
        <div class="form-box fl-r">
          <a-form :form="form" @submit="handleSubmit">
-            <a-form-item label="分类页样式" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-form-item label="页面风格" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group
-                v-decorator="['style']"
+                v-decorator="['style', { rules: [{ required: true, message: '请选择页面风格' }]}]"
              >
                <a-radio
                  v-for="(item, index) in pageStyle"
@ -58,7 +58,7 @@

 <script>
 import pick from 'lodash.pick'
-import * as Api from '@/api/setting/wxApp'
+import * as Api from '@/api/client/wxapp/setting'
 import { SettingEnum } from '@/common/enum/store'
 import constants from '@/common/enum/store/page/wxAppStyle/constants'

@ -67,8 +67,6 @@ export default {
  },
  data () {
    return {
-      // 当前设置项的key
-      key: SettingEnum.PAGE_CATEGORY_TEMPLATE.value,
      // 标签布局属性
      labelCol: { span: 5 },
      // 输入框布局属性
@ -85,18 +83,17 @@ export default {
  // 初始化数据
  created () {
    // 获取当前详情记录
-    this.getDetail()
-    console.log(this.pageStyle)
+    this.getPageStyle()
+    console.log(this.pageStyle, this.form)
  },
  methods: {
-
    // 获取当前详情记录
-    getDetail () {
+    getPageStyle () {
      this.isLoading = true
-      Api.detail(this.key)
+      Api.getPageStyle()
        .then(result => {
          // 当前记录
-          this.record = result.data.values
+          this.record = result.data.detail || ''
          // 设置默认值
          this.setFieldsValue()
        })
@ -110,7 +107,7 @@ export default {
      const { record, form: { setFieldsValue } } = this
      // 表单内容
      this.$nextTick(() => {
-        setFieldsValue(pick(record, ['style', 'shareTitle', 'showAddCart', 'cartStyle']))
+        setFieldsValue(pick(record, ['style']))
      })
    },

@ -120,6 +117,7 @@ export default {
      // 表单验证
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
+        console.log(errors, values)
        // 提交到后端api
        !errors && this.onFormSubmit(values)
      })
@ -129,9 +127,11 @@ export default {
    onFormSubmit (values) {
      this.isLoading = true
      console.log(values)
-      // Api.update(this.key, { form: values })
-      //   .then(result => this.$message.success(result.message, 1.5))
-      //   .finally(() => this.isLoading = false)
+      Api.setPageStyle({ form: values })
+        .then(result => this.$message.success(result.message, 1.5))
+        .finally(() => {
+          this.isLoading = false
+      })
    }

  }
--- a/src/views/shop/Index.vue
+++ b/src/views/shop/Index.vue
@ -60,6 +60,10 @@ export default {
          title: '商户标签',
          dataIndex: 'shop_label'
        },
+        {
+          title: '账号名称',
+          dataIndex: 'user_name'
+        },
        // {
        //   title: '状态',
        //   dataIndex: 'status',
@ -107,7 +111,8 @@ export default {
      this.isLoading = true
      Api.shopList()
        .then((result) => {
-          this.shopList = result.data.list.data
+          console.log(result)
+          this.shopList = result.data.data
          this.isLoading = false
        })
        .finally(() => (this.isLoading = false))
--- a/src/views/shop/modules/Add.vue
+++ b/src/views/shop/modules/Add.vue
@ -24,6 +24,34 @@
            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
+            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="['user_name', { rules: [{ required: true, message: '请绑定账号' }] }]"
+            placeholder="请绑定账号"
+          >
+            <a-select-option
+              v-for="(item, index) in accountList"
+              :key="index"
+              :value="item"
+            >{{ item }}</a-select-option
+            >
+          </a-select>
+        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
@ -41,7 +69,7 @@ export default {
  },
  data () {
    return {
-      categoryList: [],
+      accountList: [],
      // 对话框标题
      title: '',
      // 标签布局属性
@ -65,6 +93,14 @@ export default {
    add () {
      // 显示窗口
      this.visible = true
+      this.getUser()
+    },
+    getUser() {
+      Api.getUser()
+        .then((result) => {
+          this.accountList = result.data.list
+        })
+        .finally(() => (this.isLoading = false))
    },
    // 确认按钮
    handleSubmit (e) {
@ -91,7 +127,7 @@ export default {
    // 提交到后端api
    onFormSubmit (values) {
      this.confirmLoading = true
-      Api.addShop({ form: values })
+      Api.addShop({ 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)
--- a/src/views/shop/modules/Edit.vue
+++ b/src/views/shop/modules/Edit.vue
@ -26,6 +26,35 @@
            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']"
+          />
+        </a-form-item>
+        <a-form-item
+          label="绑定账号"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-select
+            style="width: 300px"
+            v-decorator="['user_name', { rules: [{ required: true, message: '请绑定账号' }] }]"
+            placeholder="请绑定账号"
+          >
+            <a-select-option
+              v-for="(item, index) in accountList"
+              :key="index"
+              :value="item"
+            >{{ item }}</a-select-option
+            >
+          </a-select>
+        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
@ -43,6 +72,7 @@ export default {
  },
  data () {
    return {
+      accountList: [],
      // 对话框标题
      title: '',
      // 标签布局属性
@ -69,9 +99,20 @@ export default {
      this.visible = true
      // 当前分类记录
      this.info = info
+      this.getUser()
      // 设置默认值
      this.setFieldsValue()
    },
+    getUser() {
+      Api.getUser()
+        .then((result) => {
+          console.log(result)
+          this.accountList = Object.values(result.data.list)
+          this.accountList.unshift(this.info.user_name)
+          console.log(this.accountList)
+        })
+        .finally(() => (this.isLoading = false))
+    },
    // 设置默认值
    setFieldsValue () {
      const {
@ -84,7 +125,9 @@ export default {
          _.pick(this.info, [
            'logo',
            'shop_name',
-            'shop_label'
+            'shop_label',
+            'logo_image_id',
+            'user_name'
          ])
        )
      })
@ -113,7 +156,7 @@ export default {
    // 提交到后端api
    onFormSubmit (values) {
      this.confirmLoading = true
-      Api.editShop({ form: { merchant_id: this.info['merchant_id'], ...values } })
+      Api.editShop({ form: { merchant_id: this.info['merchant_id'], ...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)