{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\user\\grade\\right\\index.vue?vue&type=style&index=0&id=5b5cdda7&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\user\\grade\\right\\index.vue","mtime":1761614939080},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouaW1hZ2Utd3JhcCB7DQogIHdpZHRoOiAzNnB4Ow0KICBoZWlnaHQ6IDM2cHg7DQogIGJvcmRlci1yYWRpdXM6IDRweDsNCg0KICBpbWcgew0KICAgIHdpZHRoOiAxMDAlOw0KICAgIGhlaWdodDogMTAwJTsNCiAgfQ0KfQ0KDQouaW1hZ2UtZ3JvdXAgew0KICBkaXNwbGF5OiBpbmxpbmUtZmxleDsNCiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogIHdpZHRoOiA2MHB4Ow0KICBoZWlnaHQ6IDYwcHg7DQogIGJvcmRlcjogMXB4IHNvbGlkICNkY2RlZTI7DQogIGJvcmRlci1yYWRpdXM6IDRweDsNCg0KICAmOmhvdmVyIHsNCiAgICBib3JkZXItY29sb3I6ICM1N2EzZjM7DQogIH0NCg0KICBpbWcgew0KICAgIHdpZHRoOiAxMDAlOw0KICAgIGhlaWdodDogMTAwJTsNCiAgfQ0KfQ0KLnc0MTQgew0KICB3aWR0aDogNDE0cHg7DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAkPA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/user/grade/right","sourcesContent":["<template>\r\n  <div>\r\n    <!--    <div class=\"i-layout-page-header header-title\">-->\r\n    <!--      <span class=\"ivu-page-header-title\">{{ $route.meta.title }}</span>-->\r\n    <!--    </div>-->\r\n    <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt\">\r\n      <el-table\r\n        :data=\"tbody\"\r\n        v-loading=\"loading\"\r\n        highlight-current-row\r\n        no-userFrom-text=\"暂无数据\"\r\n        no-filtered-userFrom-text=\"暂无筛选结果\"\r\n      >\r\n        <el-table-column label=\"权益名称\" min-width=\"120\">\r\n          <template slot-scope=\"scope\">\r\n            <span>{{ scope.row.title }}</span>\r\n          </template>\r\n        </el-table-column>\r\n        <el-table-column label=\"展示名称\" min-width=\"120\">\r\n          <template slot-scope=\"scope\">\r\n            <span>{{ scope.row.show_title }}</span>\r\n          </template>\r\n        </el-table-column>\r\n        <el-table-column label=\"权益图标\" min-width=\"120\">\r\n          <template slot-scope=\"scope\">\r\n            <div class=\"image-wrap\" v-viewer>\r\n              <img v-lazy=\"scope.row.image\" />\r\n            </div>\r\n          </template>\r\n        </el-table-column>\r\n        <el-table-column label=\"权益简介\" min-width=\"120\">\r\n          <template slot-scope=\"scope\">\r\n            <span>{{ scope.row.explain }}</span>\r\n          </template>\r\n        </el-table-column>\r\n        <el-table-column label=\"权益状态\" min-width=\"120\">\r\n          <template slot-scope=\"scope\">\r\n            <el-switch\r\n              class=\"defineSwitch\"\r\n              :active-value=\"1\"\r\n              :inactive-value=\"0\"\r\n              v-model=\"scope.row.status\"\r\n              size=\"large\"\r\n              @change=\"statusChange(scope.row)\"\r\n              active-text=\"启用\"\r\n              inactive-text=\"禁用\"\r\n            >\r\n            </el-switch>\r\n          </template>\r\n        </el-table-column>\r\n        <el-table-column label=\"操作\" fixed=\"right\" width=\"170\">\r\n          <template slot-scope=\"scope\">\r\n            <a v-db-click @click=\"edit(scope.row)\">编辑</a>\r\n          </template>\r\n        </el-table-column>\r\n      </el-table>\r\n      <div class=\"acea-row row-right page\">\r\n        <pagination v-if=\"total\" :total=\"total\" :page.sync=\"page\" :limit.sync=\"limit\" @pagination=\"getRightList\" />\r\n      </div>\r\n    </el-card>\r\n    <el-dialog :visible.sync=\"modal1\" title=\"编辑会员权益\" width=\"540px\">\r\n      <el-form ref=\"form\" :model=\"form\" :rules=\"rules\" label-width=\"90px\">\r\n        <el-input v-model=\"form.id\" style=\"display: none\"></el-input>\r\n        <el-input v-model=\"form.status\" style=\"display: none\"></el-input>\r\n        <el-input v-model=\"form.right_type\" style=\"display: none\"></el-input>\r\n        <el-form-item label=\"权益名称：\" prop=\"title\">\r\n          <el-input v-model.trim=\"form.title\" placeholder=\"请输入权益名称\" disabled class=\"w100\"></el-input>\r\n        </el-form-item>\r\n        <el-form-item label=\"展示名称：\" prop=\"show_title\">\r\n          <el-input v-model.trim=\"form.show_title\" placeholder=\"请输入展示名称\" class=\"w100\"></el-input>\r\n        </el-form-item>\r\n        <el-form-item label=\"权益图标：\" prop=\"image\">\r\n          <div class=\"image-group\" v-db-click @click=\"callImage\">\r\n            <img v-if=\"form.image\" v-lazy=\"form.image\" />\r\n            <i v-else class=\"el-icon-picture-outline\" style=\"font-size: 24px\"></i>\r\n          </div>\r\n          <el-input v-model=\"form.image\" style=\"display: none\"></el-input>\r\n        </el-form-item>\r\n        <el-form-item label=\"权益简介：\" prop=\"show_title\">\r\n          <el-input\r\n            v-model.trim=\"form.explain\"\r\n            type=\"textarea\"\r\n            :autosize=\"{ minRows: 2, maxRows: 10 }\"\r\n            placeholder=\"请输入权益简介\"\r\n            class=\"w100\"\r\n          ></el-input>\r\n        </el-form-item>\r\n        <el-form-item\r\n          v-show=\"form.right_type !== 'coupon' && form.right_type !== 'vip_price'\"\r\n          :label=\"\r\n            form.right_type === 'offline' || form.right_type === 'express' || form.right_type === 'vip_price'\r\n              ? '折扣数(%)：'\r\n              : '积分倍数：'\r\n          \"\r\n          prop=\"number\"\r\n        >\r\n          <el-input-number :controls=\"false\" v-model=\"form.number\" :min=\"1\"></el-input-number>\r\n        </el-form-item>\r\n        <el-form-item>\r\n          <div class=\"acea-row row-right\">\r\n            <el-button type=\"primary\" v-db-click @click=\"formSubmit('form')\">提交</el-button>\r\n          </div>\r\n        </el-form-item>\r\n      </el-form>\r\n    </el-dialog>\r\n    <el-dialog :visible.sync=\"modal2\" width=\"1024px\" title=\"选择权益图标\">\r\n      <uploadPictures\r\n        v-if=\"modal2\"\r\n        isChoice=\"单选\"\r\n        :gridBtn=\"gridBtn\"\r\n        :gridPic=\"gridPic\"\r\n        @getPic=\"getPic\"\r\n      ></uploadPictures>\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState, mapMutations } from 'vuex';\r\nimport { memberRight, memberRightSave } from '@/api/user';\r\nimport uploadPictures from '@/components/uploadPictures';\r\n\r\nexport default {\r\n  components: { uploadPictures },\r\n  data() {\r\n    return {\r\n      tbody: [],\r\n      loading: false,\r\n      total: 0,\r\n      page: 1,\r\n      limit: 30,\r\n      modal1: false,\r\n      form: {\r\n        id: '',\r\n        right_type: '',\r\n        title: '',\r\n        show_title: '',\r\n        image: '',\r\n        explain: '',\r\n        number: 1,\r\n        status: 1,\r\n      },\r\n      rules: {\r\n        title: [{ required: true, message: '请输入权益名称', trigger: 'blur' }],\r\n        show_title: [{ required: true, message: '请输入展示名称', trigger: 'blur' }],\r\n        image: [{ required: true, message: '请上传权益图标' }],\r\n        explain: [{ required: true, message: '请输入权益简介', trigger: 'blur' }],\r\n        number: [{ required: true, type: 'integer', message: '请输入正整数' }],\r\n      },\r\n      modal2: false,\r\n      gridPic: {\r\n        xl: 6,\r\n        lg: 8,\r\n        md: 12,\r\n        sm: 12,\r\n        xs: 12,\r\n      },\r\n      gridBtn: {\r\n        xl: 4,\r\n        lg: 8,\r\n        md: 8,\r\n        sm: 8,\r\n        xs: 8,\r\n      },\r\n    };\r\n  },\r\n  computed: {\r\n    ...mapState('media', ['isMobile']),\r\n  },\r\n  created() {\r\n    this.getRightList();\r\n  },\r\n  methods: {\r\n    getRightList() {\r\n      this.loading = true;\r\n      memberRight()\r\n        .then((res) => {\r\n          const { count, list } = res.data;\r\n          this.loading = false;\r\n          this.total = count;\r\n          this.tbody = list;\r\n        })\r\n        .catch((err) => {\r\n          this.loading = false;\r\n          this.$message.error(err);\r\n        });\r\n    },\r\n    // 改变状态\r\n    statusChange(row) {\r\n      this.form.id = row.id;\r\n      this.form.right_type = row.right_type;\r\n      this.form.title = row.title;\r\n      this.form.show_title = row.show_title;\r\n      this.form.image = row.image;\r\n      this.form.explain = row.explain;\r\n      this.form.number = row.number;\r\n      this.form.status = row.status;\r\n      this.rightSave();\r\n    },\r\n    // 编辑\r\n    edit(row) {\r\n      this.modal1 = true;\r\n      this.form.id = row.id;\r\n      this.form.status = row.status;\r\n      this.form.right_type = row.right_type;\r\n      this.form.title = row.title;\r\n      this.form.show_title = row.show_title;\r\n      this.form.image = row.image;\r\n      this.form.explain = row.explain;\r\n      this.form.number = row.number;\r\n    },\r\n    // 修改\r\n    rightSave() {\r\n      memberRightSave(this.form)\r\n        .then((res) => {\r\n          this.modal1 = false;\r\n          this.getRightList();\r\n          this.$message.success(res.msg);\r\n        })\r\n        .catch((err) => {\r\n          this.$message.error(err.msg);\r\n        });\r\n    },\r\n    formSubmit(name) {\r\n      this.$refs[name].validate((valid) => {\r\n        if (valid) {\r\n          this.rightSave();\r\n        }\r\n      });\r\n    },\r\n    callImage() {\r\n      this.modal2 = true;\r\n    },\r\n    getPic(image) {\r\n      this.form.image = image.att_dir;\r\n      this.modal2 = false;\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.image-wrap {\r\n  width: 36px;\r\n  height: 36px;\r\n  border-radius: 4px;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n}\r\n\r\n.image-group {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 60px;\r\n  height: 60px;\r\n  border: 1px solid #dcdee2;\r\n  border-radius: 4px;\r\n\r\n  &:hover {\r\n    border-color: #57a3f3;\r\n  }\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n}\r\n.w414 {\r\n  width: 414px;\r\n}\r\n</style>\r\n"]}]}