| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\components\\systemStore\\index.vue?vue&type=style&index=0&id=3b2dca15&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\systemStore\\index.vue","mtime":1761614938986},{"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:DQoucGljQm94IHsNCiAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICBjdXJzb3I6IHBvaW50ZXI7DQogIC51cExvYWQgew0KICAgIHdpZHRoOiA1OHB4Ow0KICAgIGhlaWdodDogNThweDsNCiAgICBsaW5lLWhlaWdodDogNThweDsNCiAgICBib3JkZXI6IDFweCBkb3R0ZWQgcmdiYSgwLCAwLCAwLCAwLjEpOw0KICAgIGJvcmRlci1yYWRpdXM6IDRweDsNCiAgICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMDIpOw0KICB9DQogIC5waWN0cnVlIHsNCiAgICB3aWR0aDogNjBweDsNCiAgICBoZWlnaHQ6IDYwcHg7DQogICAgYm9yZGVyOiAxcHggZG90dGVkIHJnYmEoMCwgMCwgMCwgMC4xKTsNCiAgICBtYXJnaW4tcmlnaHQ6IDEwcHg7DQoNCiAgICBpbWcgew0KICAgICAgd2lkdGg6IDEwMCU7DQogICAgICBoZWlnaHQ6IDEwMCU7DQogICAgfQ0KICB9DQogIC5pY29uZm9udCB7DQogICAgY29sb3I6ICM4OTg5ODk7DQogIH0NCn0NCi5tYXBCb3ggOjp2LWRlZXAgLml2dS1tb2RhbC1ib2R5IHsNCiAgaGVpZ2h0OiA2NDBweCAhaW1wb3J0YW50Ow0KfQ0KLmJ0biB7DQogIG1hcmdpbjogMCBhdXRvOw0KICB3aWR0aDogNDAlOw0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAgbA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/systemStore","sourcesContent":["<template>\r\n <div>\r\n <el-dialog\r\n :visible.sync=\"isTemplate\"\r\n :title=\"formItem.id ? '编辑提货点' : '添加提货点'\"\r\n width=\"720px\"\r\n @closed=\"cancel\"\r\n append-to-body\r\n >\r\n <div class=\"article-manager\" v-loading=\"spinShow\">\r\n <el-form\r\n ref=\"formItem\"\r\n :model=\"formItem\"\r\n label-width=\"110px\"\r\n label-position=\"right\"\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\" 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 v-model=\"formItem.address\"\r\n @change=\"handleChange\"\r\n style=\"width: 100%\"\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 <!--<DatePicker @change=\"onchangeDate\" :value=\"formItem.valid_time\" v-model=\"formItem.valid_time\" format=\"yyyy/MM/dd\" type=\"daterange\" split-panels placeholder=\"请选择核销时效\" ></DatePicker>-->\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\" prop=\"day_time\">\r\n <el-time-picker\r\n is-range\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 style=\"width: 100%\"\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('单选', 'logo')\">\r\n <div class=\"pictrue\" v-if=\"formItem.image\">\r\n <img v-lazy=\"formItem.image\" />\r\n </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=\"提货点大图：\" prop=\"oblong_image\">\r\n <div class=\"picBox\" v-db-click @click=\"modalPicTap('单选', 'oblong')\">\r\n <div class=\"pictrue\" v-if=\"formItem.oblong_image\">\r\n <img v-lazy=\"formItem.oblong_image\" />\r\n </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 <div class=\"btn\">\r\n <el-button type=\"primary\" long v-db-click @click=\"handleSubmit('formItem')\">{{\r\n formItem.id ? '修改' : '提交'\r\n }}</el-button>\r\n </div>\r\n </el-row> -->\r\n </el-form>\r\n\r\n <el-dialog\r\n :visible.sync=\"modalPic\"\r\n width=\"1024px\"\r\n :title=\"modalTitle\"\r\n :close-on-click-modal=\"false\"\r\n append-to-body\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 </div>\r\n <span slot=\"footer\" class=\"dialog-footer\">\r\n <el-button type=\"primary\" long v-db-click @click=\"handleSubmit('formItem')\">{{\r\n formItem.id ? '修改' : '提交'\r\n }}</el-button>\r\n </span>\r\n </el-dialog>\r\n <el-dialog\r\n :visible.sync=\"modalMap\"\r\n title=\"请选择地址\"\r\n append-to-body\r\n :close-on-click-modal=\"false\"\r\n width=\"720px\"\r\n class=\"mapBox\"\r\n >\r\n <iframe id=\"mapPage\" width=\"100%\" height=\"600px\" 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, storeGetInfoApi } from '@/api/setting';\r\nimport { mapState } from 'vuex';\r\nimport uploadPictures from '@/components/uploadPictures';\r\nimport { cityList } from '@/api/app';\r\nexport default {\r\n name: 'systemStore',\r\n components: { uploadPictures },\r\n props: {},\r\n data() {\r\n const validatePhone = (rule, value, callback) => {\r\n if (!value) {\r\n return 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 const oblongImageUpload = (rule, value, callback) => {\r\n if (!this.formItem.oblong_image) {\r\n callback(new Error('请上传提货点大图'));\r\n } else {\r\n callback();\r\n }\r\n };\r\n return {\r\n isTemplate: false,\r\n spinShow: false,\r\n modalMap: false,\r\n addresData: [],\r\n modalTitle: '',\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 {\r\n required: true,\r\n message: 'Mailbox cannot be empty',\r\n trigger: 'blur',\r\n },\r\n { type: 'email', message: 'Incorrect email format', trigger: 'blur' },\r\n ],\r\n address: [\r\n {\r\n required: true,\r\n message: '请选择提货点地址',\r\n type: 'array',\r\n trigger: 'change',\r\n },\r\n ],\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: [\r\n {\r\n required: true,\r\n type: 'array',\r\n message: '请选择提货点营业时间',\r\n trigger: 'change',\r\n },\r\n ],\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 oblong_image: [{ required: true, validator: oblongImageUpload, trigger: 'change' }],\r\n latlng: [{ required: true, message: '请选择经纬度', trigger: 'blur' }],\r\n },\r\n keyUrl: '',\r\n grid: {\r\n xl: 20,\r\n lg: 24,\r\n md: 20,\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 },\r\n computed: {},\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 cancel() {\r\n this.$refs['formItem'].resetFields();\r\n this.clearFrom();\r\n },\r\n clearFrom() {\r\n this.formItem.introduction = '';\r\n this.formItem.day_time = ['', ''];\r\n this.formItem.oblong_image = '';\r\n this.formItem.id = 0;\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 // 详情\r\n getInfo(id) {\r\n let that = this;\r\n that.formItem.id = id;\r\n that.spinShow = true;\r\n storeGetInfoApi(id)\r\n .then((res) => {\r\n let info = res.data.info || null;\r\n that.formItem = info || that.formItem;\r\n that.formItem.address = info.address2;\r\n that.formItem.day_time = info.day_time.split('-');\r\n that.spinShow = false;\r\n })\r\n .catch(function (res) {\r\n that.spinShow = false;\r\n that.$message.error(res.msg);\r\n });\r\n },\r\n // 选择图片\r\n modalPicTap(tit, picTit) {\r\n this.modalTitle = picTit == 'oblong' ? '提货点大图' : '提货点LOGO';\r\n this.modalPic = true;\r\n this.picTit = picTit;\r\n },\r\n // 选中图片\r\n getPic(pc) {\r\n switch (this.picTit) {\r\n case 'logo':\r\n this.formItem.image = pc.att_dir;\r\n break;\r\n case 'oblong':\r\n this.formItem.oblong_image = pc.att_dir;\r\n break;\r\n }\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 if (!this.keyUrl) {\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 this.modalMap = true;\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n } else {\r\n this.modalMap = true;\r\n }\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 this.isTemplate = false;\r\n this.$parent.getList();\r\n this.$refs[name].resetFields();\r\n this.clearFrom();\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\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.btn {\r\n margin: 0 auto;\r\n width: 40%;\r\n}\r\n</style>\r\n"]}]}
|
