| 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\\components\\mobilePage\\home_userInfor.vue?vue&type=style&index=0&id=c5d83592&scoped=true&lang=scss","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\mobilePage\\home_userInfor.vue","mtime":1761185180005},{"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:DQoudXNlckluZm9yIHsNCiAgcGFkZGluZzogMTRweCAxMHB4Ow0KICAubGlzdCB7DQogICAgbWFyZ2luLXRvcDogMTZweDsNCiAgICBwYWRkaW5nLXRvcDogMTZweDsNCiAgICBib3JkZXItdG9wOiAxcHggc29saWQgI2VlZTsNCiAgICAuaXRlbSB7DQogICAgICBmb250LXNpemU6IDEzcHg7DQogICAgICBjb2xvcjogIzk5OTsNCiAgICAgIC5udW0gew0KICAgICAgICBmb250LXNpemU6IDE0cHg7DQogICAgICAgIGZvbnQtd2VpZ2h0OiA2MDA7DQogICAgICAgIGNvbG9yOiAjMzMzMzMzOw0KICAgICAgICBtYXJnaW4tbGVmdDogNHB4Ow0KICAgICAgfQ0KICAgIH0NCiAgfQ0KICAucmlnaHQgew0KICAgICYub24gew0KICAgICAgLml0ZW0gew0KICAgICAgICBjb2xvcjogIzY2NjY2NjsNCiAgICAgIH0NCiAgICB9DQogICAgLml0ZW0gew0KICAgICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICAgICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICAgIGNvbG9yOiAjOTk5Ow0KICAgICAgZm9udC1zaXplOiAxMXB4Ow0KICAgICAgbWFyZ2luLWxlZnQ6IDE2cHg7DQogICAgICAubnVtIHsNCiAgICAgICAgZm9udC1zaXplOiAxNnB4Ow0KICAgICAgICBtYXJnaW4tYm90dG9tOiAycHg7DQogICAgICAgIGZvbnQtd2VpZ2h0OiA2MDA7DQogICAgICAgIGNvbG9yOiAjMzMzMzMzOw0KICAgICAgfQ0KICAgIH0NCiAgICAuaWNvbmZvbnQgew0KICAgICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICAgIC8vY29sb3I6ICMzMzMzMzM7DQogICAgICBmb250LXNpemU6IDE1cHg7DQogICAgICBtYXJnaW4tYm90dG9tOiAycHg7DQogICAgfQ0KICB9DQogIC5sZWZ0IHsNCiAgICAucGljdHJ1ZSB7DQogICAgICB3aWR0aDogNDVweDsNCiAgICAgIGhlaWdodDogNDVweDsNCiAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsNCiAgICAgIG1hcmdpbi1yaWdodDogMTBweDsNCiAgICAgIGltZyB7DQogICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsNCiAgICAgICAgd2lkdGg6IDEwMCU7DQogICAgICAgIGhlaWdodDogMTAwJTsNCiAgICAgICAgb2JqZWN0LWZpdDogY292ZXI7DQogICAgICB9DQogICAgICAuZW1wdHktYm94IHsNCiAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlOw0KICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjNmOWZmOw0KICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjZWVlZWVlOw0KICAgICAgICAuaWNvbmZvbnQtZGl5IHsNCiAgICAgICAgICBmb250LXNpemU6IDIwcHg7DQogICAgICAgIH0NCiAgICAgICAgaW1nIHsNCiAgICAgICAgICB3aWR0aDogMjZweDsNCiAgICAgICAgICBoZWlnaHQ6IDIwcHg7DQogICAgICAgIH0NCiAgICAgIH0NCiAgICB9DQogICAgLnRleHQgew0KICAgICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICAgIGNvbG9yOiAjMzMzMzMzOw0KICAgICAgZm9udC1zaXplOiAxNnB4Ow0KICAgICAgLm5hbWUgew0KICAgICAgICBpbWcgew0KICAgICAgICAgIHdpZHRoOiAzOHB4Ow0KICAgICAgICAgIGhlaWdodDogMTZweDsNCiAgICAgICAgICBtYXJnaW4tbGVmdDogNXB4Ow0KICAgICAgICB9DQogICAgICB9DQogICAgICAucHJvZ3Jlc3Mgew0KICAgICAgICBvdmVyZmxvdzogaGlkZGVuOw0KICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWVlZWVlOw0KICAgICAgICB3aWR0aDogNjBweDsNCiAgICAgICAgaGVpZ2h0OiA3cHg7DQogICAgICAgIGJvcmRlci1yYWRpdXM6IDNweDsNCiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgICAgICAuYmdSZWRzIHsNCiAgICAgICAgICB3aWR0aDogODAlOw0KICAgICAgICAgIGhlaWdodDogMTAwJTsNCiAgICAgICAgICB0cmFuc2l0aW9uOiB3aWR0aCAwLjZzIGVhc2U7DQogICAgICAgICAgYm9yZGVyLXJhZGl1czogM3B4Ow0KICAgICAgICB9DQogICAgICB9DQogICAgICAucGVyY2VudCB7DQogICAgICAgIGZvbnQtc2l6ZTogMTBweDsNCiAgICAgICAgbWFyZ2luLWxlZnQ6IDRweDsNCiAgICAgIH0NCiAgICAgIC5waG9uZSB7DQogICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7DQogICAgICAgIC8vY29sb3I6ICMzMzM7DQogICAgICAgIGZvbnQtc2l6ZTogMTBweDsNCiAgICAgICAgbWFyZ2luLXRvcDogM3B4Ow0KICAgICAgICAuaWNvbnNob3VqaSB7DQogICAgICAgICAgbWFyZ2luLXJpZ2h0OiAycHg7DQogICAgICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgICB9DQogICAgICB9DQogICAgfQ0KICB9DQp9DQo="},{"version":3,"sources":["home_userInfor.vue"],"names":[],"mappings":";AA+ZA;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;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;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;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;AACA","file":"home_userInfor.vue","sourceRoot":"src/components/mobilePage","sourcesContent":["<template>\r\n <div\r\n :style=\"{\r\n background: bottomBgColor,\r\n marginTop: mTop + 'px',\r\n paddingTop: topConfig + 'px',\r\n paddingBottom: bottomConfig + 'px',\r\n paddingLeft: prConfig + 'px',\r\n paddingRight: prConfig + 'px',\r\n }\"\r\n >\r\n <div\r\n v-if=\"styleConfig\"\r\n class=\"userInfor acea-row row-between-wrapper\"\r\n :style=\"{\r\n background: `linear-gradient(90deg,${bgColorLeft} 0%,${bgColorRight} 100%)`,\r\n borderRadius: bgRadius,\r\n }\"\r\n >\r\n <div class=\"left acea-row row-middle\">\r\n <div class=\"pictrue acea-row row-center-wrapper\">\r\n <img :src=\"logoConfig\" v-if=\"logoConfig\" />\r\n <div class=\"empty-box\" v-else>\r\n <img src=\"../../assets/images/shan.png\" />\r\n </div>\r\n </div>\r\n <div class=\"text\">\r\n <div class=\"name acea-row row-middle\">用户名称<img src=\"../../assets/images/vip-diy.png\" /></div>\r\n <div class=\"acea-row row-middle\">\r\n <div\r\n class=\"progress\"\r\n :style=\"{\r\n background: toneConfig ? progressBgColor : '#eee',\r\n }\"\r\n >\r\n <div\r\n class=\"bgReds\"\r\n :style=\"{\r\n background: toneConfig\r\n ? `linear-gradient(90deg,${progressLeft} 0%,${progressRight} 100%)`\r\n : themeColor,\r\n }\"\r\n ></div>\r\n </div>\r\n <div class=\"percent\">3000/1000000</div>\r\n </div>\r\n <!--<div class=\"phone\"><span class=\"iconfont iconshouji\"></span>13000000000</div>-->\r\n </div>\r\n </div>\r\n <div class=\"right acea-row row-bottom\">\r\n <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(1) != -1\">\r\n <div class=\"num\">20</div>\r\n <div>积分</div>\r\n </div>\r\n <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(2) != -1\">\r\n <div class=\"num\">200</div>\r\n <div>余额</div>\r\n </div>\r\n <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(0) != -1\">\r\n <div class=\"num\">2</div>\r\n <div>优惠券</div>\r\n </div>\r\n <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(4) != -1\">\r\n <div class=\"num\">80</div>\r\n <div>收藏</div>\r\n </div>\r\n <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(5) != -1\">\r\n <div class=\"num\">80</div>\r\n <div>浏览</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n v-else\r\n class=\"userInfor\"\r\n :style=\"{\r\n background: `linear-gradient(90deg,${bgColorLeft} 0%,${bgColorRight} 100%)`,\r\n borderRadius: bgRadius,\r\n }\"\r\n >\r\n <div class=\"acea-row row-between-wrapper\">\r\n <div class=\"left acea-row row-middle\">\r\n <div class=\"pictrue acea-row row-center-wrapper\">\r\n <img :src=\"logoConfig\" v-if=\"logoConfig\" />\r\n <div class=\"empty-box\" v-else>\r\n <img src=\"../../assets/images/shan.png\" />\r\n </div>\r\n </div>\r\n <div class=\"text\">\r\n <div class=\"name acea-row row-middle\">用户名称<img src=\"../../assets/images/vip-diy.png\" /></div>\r\n <div class=\"acea-row row-middle\">\r\n <div\r\n class=\"progress\"\r\n :style=\"{\r\n background: toneConfig ? progressBgColor : '#eee',\r\n }\"\r\n >\r\n <div\r\n class=\"bgReds\"\r\n :style=\"{\r\n background: toneConfig\r\n ? `linear-gradient(90deg,${progressLeft} 0%,${progressRight} 100%)`\r\n : themeColor,\r\n }\"\r\n ></div>\r\n </div>\r\n <div class=\"percent\">3000/1000000</div>\r\n </div>\r\n <!--<div class=\"phone\"><span class=\"iconfont iconshouji\"></span>13000000000</div>-->\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"list acea-row row-around\">\r\n <div class=\"item\" v-if=\"checkType.indexOf(1) != -1\">\r\n <div>积分<span class=\"num\">20000</span></div>\r\n </div>\r\n <div class=\"item\" v-if=\"checkType.indexOf(2) != -1\">\r\n <div>余额<span class=\"num\">200</span></div>\r\n </div>\r\n <div class=\"item\" v-if=\"checkType.indexOf(0) != -1\">\r\n <div>优惠券<span class=\"num\">2</span></div>\r\n </div>\r\n <div class=\"item\" v-if=\"checkType.indexOf(4) != -1\">\r\n <div>收藏<span class=\"num\">80</span></div>\r\n </div>\r\n <div class=\"item\" v-if=\"checkType.indexOf(5) != -1\">\r\n <div>浏览<span class=\"num\">80</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState, mapMutations } from 'vuex';\r\n// import theme from \"@/mixins/theme\";\r\nexport default {\r\n name: 'home_userInfor',\r\n cname: '用户信息',\r\n configName: 'c_userInfor',\r\n icon: '#iconzujian-yonghuxinxi',\r\n type: 0, // 0 基础组件 1 营销组件 2工具组件\r\n defaultName: 'userInfor', // 外面匹配名称\r\n props: {\r\n index: {\r\n type: null,\r\n },\r\n num: {\r\n type: null,\r\n },\r\n colorStyle: {\r\n type: null,\r\n },\r\n },\r\n computed: {\r\n ...mapState('mobildConfig', ['defaultArray']),\r\n },\r\n watch: {\r\n pageData: {\r\n handler(nVal, oVal) {\r\n this.setConfig(nVal);\r\n },\r\n deep: true,\r\n },\r\n num: {\r\n handler(nVal, oVal) {\r\n let data = this.$store.state.mobildConfig.defaultArray[nVal];\r\n this.setConfig(data);\r\n },\r\n deep: true,\r\n },\r\n defaultArray: {\r\n handler(nVal, oVal) {\r\n let data = this.$store.state.mobildConfig.defaultArray[this.num];\r\n this.setConfig(data);\r\n },\r\n deep: true,\r\n },\r\n },\r\n // mixins: [theme],\r\n data() {\r\n return {\r\n // 默认初始化数据禁止修改\r\n defaultConfig: {\r\n cname: '用户信息',\r\n name: 'userInfor',\r\n timestamp: this.num,\r\n isHide: false,\r\n setUp: {\r\n tabVal: 0,\r\n },\r\n titleLeft: '展示设置',\r\n titleImg: '默认头像',\r\n titleRight: '进度条',\r\n titleCurrency: '通用样式',\r\n styleConfig: {\r\n title: '选择风格',\r\n tabVal: 1,\r\n tabList: [\r\n {\r\n name: '样式一',\r\n },\r\n {\r\n name: '样式二',\r\n },\r\n ],\r\n },\r\n checkboxInfo: {\r\n title: '是否展示',\r\n name: 'checkboxInfo',\r\n userType: 1,\r\n type: [1, 2],\r\n list: [\r\n {\r\n id: 1,\r\n name: '积分',\r\n },\r\n {\r\n id: 2,\r\n name: '余额',\r\n },\r\n {\r\n id: 4,\r\n name: '收藏',\r\n },\r\n {\r\n id: 0,\r\n name: '优惠券',\r\n },\r\n {\r\n id: 5,\r\n name: '浏览',\r\n },\r\n ],\r\n },\r\n logoConfig: {\r\n info: '建议：图片尺寸90px * 90px',\r\n url: '',\r\n type: 'code',\r\n delType: 1,\r\n name: '上传图片',\r\n },\r\n toneConfig: {\r\n title: '色调',\r\n tabVal: 0,\r\n tabList: [\r\n {\r\n name: '跟随主题风格',\r\n },\r\n {\r\n name: '自定义',\r\n },\r\n ],\r\n },\r\n progressColor: {\r\n title: '进度条',\r\n default: [\r\n {\r\n item: '#e93323',\r\n },\r\n {\r\n item: '#ff8933',\r\n },\r\n ],\r\n color: [\r\n {\r\n item: '#e93323',\r\n },\r\n {\r\n item: '#ff8933',\r\n },\r\n ],\r\n },\r\n progressBgColor: {\r\n title: '进度条背景',\r\n default: [\r\n {\r\n item: '#EEEEEE',\r\n },\r\n ],\r\n color: [\r\n {\r\n item: '#EEEEEE',\r\n },\r\n ],\r\n },\r\n moduleColor: {\r\n title: '组件背景',\r\n default: [\r\n {\r\n item: '#fff',\r\n },\r\n {\r\n item: '#fff',\r\n },\r\n ],\r\n color: [\r\n {\r\n item: '#fff',\r\n },\r\n {\r\n item: '#fff',\r\n },\r\n ],\r\n },\r\n bottomBgColor: {\r\n title: '底部背景',\r\n default: [\r\n {\r\n item: '#fff',\r\n },\r\n ],\r\n color: [\r\n {\r\n item: '#fff',\r\n },\r\n ],\r\n },\r\n topConfig: {\r\n title: '上边距',\r\n val: 0,\r\n min: 0,\r\n },\r\n bottomConfig: {\r\n title: '下边距',\r\n val: 0,\r\n min: 0,\r\n },\r\n prConfig: {\r\n title: '左右边距',\r\n val: 0,\r\n min: 0,\r\n },\r\n mbConfig: {\r\n title: '页面间距',\r\n val: 0,\r\n min: 0,\r\n },\r\n fillet: {\r\n title: '背景圆角',\r\n type: 0,\r\n list: [\r\n {\r\n val: '全部',\r\n icon: 'iconcaozuo-zhengti',\r\n },\r\n {\r\n val: '单个',\r\n icon: 'iconcaozuo-bianjiao',\r\n },\r\n ],\r\n valName: '圆角值',\r\n val: 0,\r\n min: 0,\r\n valList: [{ val: 0 }, { val: 0 }, { val: 0 }, { val: 0 }],\r\n },\r\n },\r\n pageData: {},\r\n styleConfig: 0,\r\n checkType: [],\r\n logoConfig: '',\r\n progressLeft: '',\r\n progressRight: '',\r\n progressBgColor: '',\r\n bgColorLeft: '',\r\n bgColorRight: '',\r\n bottomBgColor: '',\r\n topConfig: 0,\r\n bottomConfig: 0,\r\n prConfig: 0,\r\n mTop: '',\r\n bgRadius: 0,\r\n toneConfig: 0,\r\n themeColor: '',\r\n };\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.pageData = this.$store.state.mobildConfig.defaultArray[this.num];\r\n this.setConfig(this.pageData);\r\n });\r\n },\r\n methods: {\r\n setConfig(data) {\r\n if (!data) return;\r\n if (data.mbConfig) {\r\n this.styleConfig = data.styleConfig.tabVal;\r\n this.checkType = data.checkboxInfo.type;\r\n this.logoConfig = data.logoConfig.url;\r\n this.toneConfig = data.toneConfig.tabVal;\r\n this.progressLeft = data.progressColor.color[0].item;\r\n this.progressRight = data.progressColor.color[1].item;\r\n this.progressBgColor = data.progressBgColor.color[0].item;\r\n this.bgColorLeft = data.moduleColor.color[0].item;\r\n this.bgColorRight = data.moduleColor.color[1].item;\r\n this.themeColor = `linear-gradient(90deg,${this.colorStyle.theme} 0%,${this.colorStyle.gradient} 100%)`;\r\n this.bottomBgColor = data.bottomBgColor.color[0].item;\r\n this.topConfig = data.topConfig.val;\r\n this.bottomConfig = data.bottomConfig.val;\r\n this.prConfig = data.prConfig.val;\r\n this.mTop = data.mbConfig.val;\r\n let fillet = data.fillet.type;\r\n let filletVal = data.fillet.val;\r\n let valList = data.fillet.valList;\r\n this.bgRadius = fillet\r\n ? valList[0].val + 'px ' + valList[1].val + 'px ' + valList[3].val + 'px ' + valList[2].val + 'px'\r\n : filletVal + 'px';\r\n }\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.userInfor {\r\n padding: 14px 10px;\r\n .list {\r\n margin-top: 16px;\r\n padding-top: 16px;\r\n border-top: 1px solid #eee;\r\n .item {\r\n font-size: 13px;\r\n color: #999;\r\n .num {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: #333333;\r\n margin-left: 4px;\r\n }\r\n }\r\n }\r\n .right {\r\n &.on {\r\n .item {\r\n color: #666666;\r\n }\r\n }\r\n .item {\r\n text-align: center;\r\n font-weight: 400;\r\n color: #999;\r\n font-size: 11px;\r\n margin-left: 16px;\r\n .num {\r\n font-size: 16px;\r\n margin-bottom: 2px;\r\n font-weight: 600;\r\n color: #333333;\r\n }\r\n }\r\n .iconfont {\r\n font-weight: 400;\r\n //color: #333333;\r\n font-size: 15px;\r\n margin-bottom: 2px;\r\n }\r\n }\r\n .left {\r\n .pictrue {\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 50%;\r\n margin-right: 10px;\r\n img {\r\n border-radius: 50%;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n .empty-box {\r\n border-radius: 50%;\r\n background-color: #f3f9ff;\r\n border: 1px solid #eeeeee;\r\n .iconfont-diy {\r\n font-size: 20px;\r\n }\r\n img {\r\n width: 26px;\r\n height: 20px;\r\n }\r\n }\r\n }\r\n .text {\r\n font-weight: 400;\r\n color: #333333;\r\n font-size: 16px;\r\n .name {\r\n img {\r\n width: 38px;\r\n height: 16px;\r\n margin-left: 5px;\r\n }\r\n }\r\n .progress {\r\n overflow: hidden;\r\n background-color: #eeeeee;\r\n width: 60px;\r\n height: 7px;\r\n border-radius: 3px;\r\n position: relative;\r\n .bgReds {\r\n width: 80%;\r\n height: 100%;\r\n transition: width 0.6s ease;\r\n border-radius: 3px;\r\n }\r\n }\r\n .percent {\r\n font-size: 10px;\r\n margin-left: 4px;\r\n }\r\n .phone {\r\n font-weight: 400;\r\n //color: #333;\r\n font-size: 10px;\r\n margin-top: 3px;\r\n .iconshouji {\r\n margin-right: 2px;\r\n font-size: 12px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]}
|
