mp_zp

src/api/mp_zp.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+export function getText(params) {
+  return request({
+    url: '/mp_zp/text',
+    method: 'get',
+    params
+  })
+}
+
+export function saveText(data) {
+  return request({
+    url: '/mp_zp/text',
+    method: 'post',
+    data
+  })
+}
+
+export function updateText(data) {
+  return request({
+    url: '/mp_zp/text',
+    method: 'put',
+    data
+  })
+}
+
+export function delText(data) {
+  return request({
+    url: '/mp_zp/text',
+    method: 'delete',
+    data
+  })
+}

src/router/modules/games.js

@@ -191,6 +191,12 @@ const gamesRouter = {
           name: 'GameDetailsMp',
           meta: {title: '分享小程序模板列表'},
         },
+        {
+          path: 'mp-zp',
+          component: () => import('@/views/games/details/others/mpZp'), 
+          name: 'GameDetailsMpZp',
+          meta: {title: '转盘小程序'},
+        },
       ],
     },
   ],

src/views/games/details/others/mpZp.vue

@@ -0,0 +1,237 @@
+<template>
+    <div class="main-content">
+        <div style="width: 60%">
+            <el-collapse
+                v-model="activeNames"
+                v-if="TextList.length > 0"
+            >
+                <el-collapse-item
+                    :name="index"
+                    v-for="(item, index) in TextList"
+                    :key="index"
+                >
+                    <template slot="title">
+                        <svg-icon
+                            style="margin-right: 20px;"
+                            icon-class="del"
+                            @click.stop="del(index)"
+                        />
+                        <span
+                            class="ell"
+                            style="display: inline-block;width: 100px"
+                        >{{`【${index + 1}】`}}{{ item.title || '未命名'}}</span>
+
+                    </template>
+                    <el-form
+                        :ref="`TextForm${index}`"
+                        :model="item"
+                        :rules="TextFormRules"
+                        style="width: 100%"
+                        label-width="100px"
+                        class="mgt-20 mgb-20"
+                    >
+
+                        <el-form-item
+                            label="标题"
+                            prop="title"
+                        >
+                            <el-input
+                                v-model="item.title"
+                                style="width: 70%"
+                            />
+                        </el-form-item>
+                        <el-form-item
+                            label="文本"
+                            prop="text"
+                        >
+                            <el-input
+                                v-model="item.text"
+                                style="width: 70%"
+                                type="textarea"
+                            />
+                            <span class="ipt-tip">格式: $层级 标题::文本,使用回车换行(例:$0 标题A::剧情A),层级从0开始</span>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button
+                                type="primary"
+                                @click="save(index)"
+                            >保存</el-button>
+                            <el-button
+                                type="danger"
+                                @click="del(index)"
+                            >删除</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-collapse-item>
+
+            </el-collapse>
+
+            <div
+                class="tip"
+                v-if="TextList.length === 0"
+            >
+                <placeholder />
+            </div>
+            <el-button
+                class="mgt-20 w100"
+                @click="add"
+            >新增</el-button>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import {mapGetters} from 'vuex'
+import {getText, saveText, updateText, delText} from '@/api/mp_zp'
+import getPageTitle from '@/utils/get-page-title'
+import Placeholder from '@/components/Placeholder'
+import {getToken} from '@/utils/auth'
+import {reject, Promise} from 'q'
+
+export default {
+  name: 'GameDetailsShare',
+  data() {
+    return {
+      // form
+      TextForm: {},
+      TextFormRules: {
+        title: [{required: true, message: '请填写文本标题', trigger: 'blur'}],
+        text: [{required: true, message: '清填写文本内容', trigger: 'blur'}],
+      },
+      activeNames: [],
+      defaultSetting: {
+        title: '',
+        text: '',
+      },
+      TextList: [],
+    }
+  },
+  components: {
+    Placeholder,
+  },
+  computed: {
+    ...mapGetters(['userInfo']),
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getText(params) {
+      return new Promise((resolve, reject) => {
+        getText(params)
+          .then(res => {
+            const data = res.data
+            data.errcode === 0 ? resolve(data) : reject()
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    saveText(data) {
+      return new Promise((resolve, reject) => {
+        saveText(data)
+          .then(res => {
+            const data = res.data
+            data.errcode === 0 ? resolve(data) : reject()
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    updateText(data) {
+      return new Promise((resolve, reject) => {
+        updateText(data)
+          .then(res => {
+            const data = res.data
+            data.errcode === 0 ? resolve(data) : reject()
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    delText(data) {
+      return new Promise((resolve, reject) => {
+        delText(data)
+          .then(res => {
+            const data = res.data
+            data.errcode === 0 ? resolve(data) : reject()
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    async getData() {
+      const result = await this.getText()
+      this.TextList = result.result
+    },
+    add() {
+      const defaultSetting = JSON.parse(JSON.stringify(this.defaultSetting))
+      this.activeNames.push(this.TextList.length)
+      this.TextList.push(defaultSetting)
+    },
+    async save(index) {
+      try {
+        const isValid = await this.validForm(`TextForm${index}`)
+        if (isValid) {
+          const data = this.TextList[index]
+          if (data._id) {
+            // 更新
+            const result = await updateText(data)
+            this.$message.success('更新成功!')
+          } else {
+            // 保存
+            const reuslt = await saveText(data)
+            this.$message.success('保存成功!')
+          }
+          this.clearValidate(`TextForm${index}`)
+          this.getData()
+        } else {
+          this.$message.error('请按要求填写表单!')
+        }
+      } catch (err) {
+        this.$message.error(err)
+        console.log(err)
+      }
+    },
+    del(index) {
+      this.$confirm('是否要删除该文本?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(async () => {
+          const reuslt = await this.delText(this.TextList[index])
+          this.$message.success('删除成功！')
+          this.getData()
+        })
+        .catch(() => {
+          this.$message.info('已取消删除！')
+        })
+    },
+    validForm(formName) {
+      return new Promise((resolve, reject) => {
+        this.$refs[formName][0].validate(valid => {
+          resolve(valid)
+        })
+      })
+    },
+    clearValidate(formName) {
+      this.$refs[formName][0].clearValidate()
+    },
+  },
+}
+</script>
+
+
+<style scoped>
+.btn-group >>> .el-button + .el-button {
+  margin-left: 0;
+}
+</style>
+
+