| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\setting\\systemStore\\index.vue?vue&type=style&index=0&id=4a7475a2&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\setting\\systemStore\\index.vue","mtime":1761185180191},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoucGljQm94IHsNCiAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICBjdXJzb3I6IHBvaW50ZXI7DQogIC51cExvYWQgew0KICAgIHdpZHRoOiA1OHB4Ow0KICAgIGhlaWdodDogNThweDsNCiAgICBsaW5lLWhlaWdodDogNThweDsNCiAgICBib3JkZXI6IDFweCBkb3R0ZWQgcmdiYSgwLCAwLCAwLCAwLjEpOw0KICAgIGJvcmRlci1yYWRpdXM6IDRweDsNCiAgICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMDIpOw0KICB9DQogIC5waWN0cnVlIHsNCiAgICB3aWR0aDogNjBweDsNCiAgICBoZWlnaHQ6IDYwcHg7DQogICAgYm9yZGVyOiAxcHggZG90dGVkIHJnYmEoMCwgMCwgMCwgMC4xKTsNCiAgICBtYXJnaW4tcmlnaHQ6IDEwcHg7DQogICAgaW1nIHsNCiAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAgaGVpZ2h0OiAxMDAlOw0KICAgIH0NCiAgfQ0KICAuaWNvbmZvbnQgew0KICAgIGNvbG9yOiAjODk4OTg5Ow0KICB9DQp9DQoubWFwQm94IDo6di1kZWVwIC5pdnUtbW9kYWwtYm9keSB7DQogIGhlaWdodDogNjQwcHggIWltcG9ydGFudDsNCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AA8WA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/setting/systemStore","sourcesContent":["<template>\r\n <div class=\"article-manager\" v-loading=\"spinShow\">\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt\">\r\n <el-form\r\n ref=\"formItem\"\r\n :model=\"formItem\"\r\n :label-width=\"labelWidth\"\r\n :label-position=\"labelPosition\"\r\n :rules=\"ruleValidate\"\r\n @submit.native.prevent\r\n >\r\n <el-row :gutter=\"24\">\r\n <el-col :span=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"门店名称：\" prop=\"name\" label-for=\"name\">\r\n <el-input v-model=\"formItem.name\" placeholder=\"请输入门店名称\" />\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"门店简介：\" label-for=\"introduction\">\r\n <el-input v-model=\"formItem.introduction\" placeholder=\"请输入门店简介\" />\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"门店手机号：\" label-for=\"phone\" prop=\"phone\">\r\n <el-input v-model=\"formItem.phone\" type=\"number\" placeholder=\"请输入门店手机号\" />\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"门店地址：\" label-for=\"address\" prop=\"address\">\r\n <el-cascader\r\n :options=\"addresData\"\r\n :value=\"formItem.address\"\r\n v-model=\"formItem.address\"\r\n @change=\"handleChange\"\r\n ></el-cascader>\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"详细地址：\" label-for=\"detailed_address\" prop=\"detailed_address\">\r\n <el-input v-model=\"formItem.detailed_address\" placeholder=\"请输入详细地址\" />\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"核销时效：\" label-for=\"valid_time\">\r\n <el-date-picker\r\n clearable\r\n :editable=\"false\"\r\n @change=\"onchangeDate\"\r\n v-model=\"formItem.valid_time\"\r\n format=\"yyyy/MM/dd\"\r\n type=\"daterange\"\r\n value-format=\"yyyy/MM/dd\"\r\n range-separator=\"-\"\r\n start-placeholder=\"开始日期\"\r\n end-placeholder=\"结束日期\"\r\n ></el-date-picker>\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"门店营业：\" label-for=\"day_time\">\r\n <el-time-picker\r\n @change=\"onchangeTime\"\r\n v-model=\"formItem.day_time\"\r\n format=\"HH:mm:ss\"\r\n value-format=\"HH:mm:ss\"\r\n range-separator=\"-\"\r\n start-placeholder=\"开始时间\"\r\n end-placeholder=\"结束时间\"\r\n placeholder=\"选择时间范围\"\r\n ></el-time-picker>\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"门店logo：\" prop=\"image\">\r\n <div class=\"picBox\" v-db-click @click=\"modalPicTap('单选')\">\r\n <div class=\"pictrue\" v-if=\"formItem.image\"><img v-lazy=\"formItem.image\" /></div>\r\n <div class=\"upLoad acea-row row-center-wrapper\" v-else>\r\n <i class=\"el-icon-picture-outline\" style=\"font-size: 24px\"></i>\r\n </div>\r\n </div>\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"经纬度：\" label-for=\"status2\" prop=\"latlng\">\r\n <el-tooltip>\r\n <el-input v-model=\"formItem.latlng\" style=\"width: 100%\" placeholder=\"请查找位置\">\r\n <el-button type=\"primary\" slot=\"append\" v-db-click @click=\"onSearch\">查找位置</el-button>\r\n </el-input>\r\n <div slot=\"content\">请点击查找位置选择位置</div>\r\n </el-tooltip>\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n </el-row>\r\n <el-row>\r\n <el-col v-bind=\"grid\">\r\n <el-button type=\"primary\" class=\"ml20\" v-db-click @click=\"handleSubmit('formItem')\">提交</el-button>\r\n </el-col>\r\n </el-row>\r\n </el-form>\r\n </el-card>\r\n\r\n <el-dialog\r\n :visible.sync=\"modalPic\"\r\n width=\"1024px\"\r\n title=\"上传商品图\"\r\n :close-on-click-modal=\"false\"\r\n :show-close=\"true\"\r\n >\r\n <uploadPictures\r\n :isChoice=\"isChoice\"\r\n @getPic=\"getPic\"\r\n :gridBtn=\"gridBtn\"\r\n :gridPic=\"gridPic\"\r\n v-if=\"modalPic\"\r\n ></uploadPictures>\r\n </el-dialog>\r\n\r\n <el-dialog\r\n :visible.sync=\"modalMap\"\r\n title=\"上传商品图\"\r\n :show-close=\"true\"\r\n :close-on-click-modal=\"false\"\r\n class=\"mapBox\"\r\n >\r\n <iframe id=\"mapPage\" width=\"100%\" height=\"100%\" frameborder=\"0\" v-bind:src=\"keyUrl\"></iframe>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { storeApi, keyApi, storeAddApi } from '@/api/setting';\r\nimport { mapState } from 'vuex';\r\n// import city from '@/utils/city';\r\nimport uploadPictures from '@/components/uploadPictures';\r\nimport { cityList } from '@/api/app';\r\n\r\nexport default {\r\n name: 'systemStore',\r\n components: { uploadPictures },\r\n data() {\r\n const validatePhone = (rule, value, callback) => {\r\n if (!value) {\r\n return callback(new Error('请填写手机号'));\r\n } else if (!/^1[3456789]\\d{9}$/.test(value)) {\r\n callback(new Error('手机号格式不正确!'));\r\n } else {\r\n callback();\r\n }\r\n };\r\n const validateUpload = (rule, value, callback) => {\r\n if (!this.formItem.image) {\r\n callback(new Error('请上传门店logo'));\r\n } else {\r\n callback();\r\n }\r\n };\r\n return {\r\n spinShow: false,\r\n modalMap: false,\r\n addresData: [],\r\n formItem: {\r\n name: '',\r\n introduction: '',\r\n phone: '',\r\n address: [],\r\n address2: [],\r\n detailed_address: '',\r\n valid_time: [],\r\n day_time: ['', ''],\r\n latlng: '',\r\n id: 0,\r\n },\r\n ruleValidate: {\r\n name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],\r\n mail: [\r\n { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },\r\n { type: 'email', message: 'Incorrect email format', trigger: 'blur' },\r\n ],\r\n address: [{ required: true, message: '请选择门店地址', type: 'array', trigger: 'change' }],\r\n valid_time: [\r\n {\r\n required: true,\r\n type: 'array',\r\n message: '请选择核销时效',\r\n trigger: 'change',\r\n fields: {\r\n 0: { type: 'date', required: true, message: '请选择年度范围' },\r\n 1: { type: 'date', required: true, message: '请选择年度范围' },\r\n },\r\n },\r\n ],\r\n day_time: [{ required: true, type: 'array', message: '请选择门店营业时间', trigger: 'change' }],\r\n phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],\r\n detailed_address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],\r\n image: [{ required: true, validator: validateUpload, trigger: 'change' }],\r\n latlng: [{ required: true, message: '请选择经纬度', trigger: 'blur' }],\r\n },\r\n keyUrl: '',\r\n grid: {\r\n xl: 10,\r\n lg: 16,\r\n md: 18,\r\n sm: 24,\r\n xs: 24,\r\n },\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 modalPic: false,\r\n isChoice: '单选',\r\n };\r\n },\r\n created() {\r\n this.getCityList();\r\n this.getKey();\r\n this.getFrom();\r\n },\r\n computed: {\r\n ...mapState('media', ['isMobile']),\r\n labelWidth() {\r\n return this.isMobile ? undefined : '80px';\r\n },\r\n labelPosition() {\r\n return this.isMobile ? 'top' : 'right';\r\n },\r\n },\r\n mounted: function () {\r\n window.addEventListener(\r\n 'message',\r\n function (event) {\r\n // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息\r\n var loc = event.data;\r\n if (loc && loc.module === 'locationPicker') {\r\n // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'\r\n window.parent.selectAdderss(loc);\r\n }\r\n },\r\n false,\r\n );\r\n window.selectAdderss = this.selectAdderss;\r\n },\r\n methods: {\r\n getCityList() {\r\n cityList().then((res) => {\r\n res.data.map((item) => {\r\n item.value = item.label;\r\n if (item.children && item.children.length) {\r\n item.children.map((j) => {\r\n j.value = j.label;\r\n if (j.children && j.children.length) {\r\n j.children.map((o) => {\r\n o.value = o.label;\r\n });\r\n }\r\n });\r\n }\r\n });\r\n this.addresData = res.data;\r\n });\r\n },\r\n // 选择经纬度\r\n selectAdderss(data) {\r\n this.formItem.latlng = data.latlng.lat + ',' + data.latlng.lng;\r\n this.modalMap = false;\r\n },\r\n // key值\r\n getKey() {\r\n keyApi()\r\n .then(async (res) => {\r\n let keys = res.data.key;\r\n this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`;\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 详情\r\n getFrom() {\r\n this.spinShow = true;\r\n storeApi()\r\n .then(async (res) => {\r\n let info = res.data.info || null;\r\n this.formItem = info || this.formItem;\r\n this.formItem.address = info.address2;\r\n this.spinShow = false;\r\n })\r\n .catch((res) => {\r\n this.spinShow = false;\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 选择图片\r\n modalPicTap() {\r\n this.modalPic = true;\r\n },\r\n // 选中图片\r\n getPic(pc) {\r\n this.formItem.image = pc.att_dir;\r\n this.modalPic = false;\r\n },\r\n // 选择地址\r\n handleChange(value, selectedData) {\r\n this.formItem.address = selectedData.map((o) => o.label);\r\n // this.formItem.address2 = selectedData.map(o => o.value);\r\n },\r\n // 核销时效\r\n onchangeDate(e) {\r\n this.formItem.valid_time = e;\r\n },\r\n // 营业时间\r\n onchangeTime(e) {\r\n this.formItem.day_time = e;\r\n },\r\n onSearch() {\r\n this.modalMap = true;\r\n },\r\n // 提交\r\n handleSubmit(name) {\r\n this.$refs[name].validate((valid) => {\r\n if (valid) {\r\n storeAddApi(this.formItem)\r\n .then(async (res) => {\r\n this.$message.success(res.msg);\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n } else {\r\n return false;\r\n }\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.picBox {\r\n display: inline-block;\r\n cursor: pointer;\r\n .upLoad {\r\n width: 58px;\r\n height: 58px;\r\n line-height: 58px;\r\n border: 1px dotted rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n background: rgba(0, 0, 0, 0.02);\r\n }\r\n .pictrue {\r\n width: 60px;\r\n height: 60px;\r\n border: 1px dotted rgba(0, 0, 0, 0.1);\r\n margin-right: 10px;\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n }\r\n .iconfont {\r\n color: #898989;\r\n }\r\n}\r\n.mapBox ::v-deep .ivu-modal-body {\r\n height: 640px !important;\r\n}\r\n</style>\r\n"]}]}
|
