1 line
14 KiB
JSON
1 line
14 KiB
JSON
{"ast":null,"code":"import \"core-js/modules/es.number.constructor.js\";\nimport \"core-js/modules/es.array.map.js\";\nimport \"core-js/modules/es.json.stringify.js\";\nimport \"core-js/modules/es.number.to-fixed.js\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport API from \"@/utils/request\";\nexport default {\n name: \"GoodView\",\n data: function data() {\n return {\n good: {},\n goodId: Number,\n price: -1,\n isDiscount: false,\n discount: '',\n standards: [],\n checkedStandard: '',\n store: 0,\n showStore: false,\n count: 1\n };\n },\n methods: {\n getPriceRange: function getPriceRange(standards) {\n var arr = standards.map(function (item) {\n return item.price;\n }); //选择排序\n\n for (var i = 0; i < arr.length; i++) {\n // 第一次循环，假设第一个值为最小值，后面i++依此类推\n var min = i;\n\n for (var j = i + 1; j < arr.length; j++) {\n // 将第一个值循环与后面的值比较，如果后面的值比第一个值小，则将索引赋值给min，直到找到最小值\n if (arr[j] < arr[min]) {\n min = j;\n }\n }\n\n var _ref = [arr[min], arr[i]];\n arr[i] = _ref[0];\n arr[min] = _ref[1];\n }\n\n if (arr[0] === arr[arr.length - 1]) {\n return arr[0];\n } else {\n return arr[0] + '元 ~ ' + arr[arr.length - 1];\n }\n },\n change: function change(standard) {\n this.showStore = true;\n this.price = standard.price;\n this.store = standard.store;\n },\n goToOrder: function goToOrder() {\n if (this.standards.length !== 0) {\n if (this.checkedStandard === '') {\n this.$message.warning(\"请选择规格\");\n return false;\n }\n }\n\n console.log(this.good);\n console.log(this.checkedStandard);\n this.$router.push({\n name: 'preOrder',\n query: {\n good: JSON.stringify(this.good),\n realPrice: this.realPrice,\n num: this.count,\n standard: this.checkedStandard\n }\n });\n },\n addToCart: function addToCart() {\n var _this = this;\n\n //未登录，拦截\n console.log(localStorage.getItem(\"user\"));\n\n if (!localStorage.getItem(\"user\")) {\n this.$router.push(\"/login\");\n }\n\n if (!this.checkedStandard) {\n this.$message.error(\"请选择规格\");\n return false;\n } // 从服务器获取当前用户的id，保证安全\n\n\n this.request.get(\"/userid\").then(function (res) {\n var userId = res;\n var cart = {\n userId: userId,\n goodId: _this.goodId,\n standard: _this.checkedStandard,\n count: _this.count\n };\n\n _this.request.post(\"/api/cart\", cart).then(function (res) {\n if (res.code === '200') {\n _this.$message.success(\"成功添加购物车\");\n }\n });\n });\n }\n },\n created: function created() {\n var _this2 = this;\n\n //初始化商品信息\n // this.good = JSON.parse(this.$route.query.good)\n this.goodId = this.$route.params.goodId;\n this.request.get(\"/api/good/\" + this.goodId).then(function (res) {\n if (res.code === '200') {\n _this2.good = res.data;\n var discount = _this2.good.discount;\n\n if (discount < 1) {\n _this2.isDiscount = true;\n _this2.discount = discount * 10 + '折';\n }\n } else {\n _this2.$router.go(0);\n }\n }); //从服务器获取商品规格信息\n\n this.request.get(\"/api/good/standard/\" + this.goodId).then(function (res) {\n if (res.code === '200') {\n var standards = JSON.parse(res.data);\n _this2.standards = standards; //默认选择第一个标准\n\n _this2.price = _this2.getPriceRange(standards);\n } else {\n //没有规格\n _this2.price = _this2.good.price;\n _this2.store = _this2.good.store;\n _this2.showStore = true;\n }\n });\n },\n mounted: function mounted() {},\n computed: {\n //折后价，小数点后2位\n realPrice: function realPrice() {\n if (this.good.discount < 1) {\n //价格为范围，即不是数字，则返回一个范围\n if (isNaN(this.price)) {\n var down = this.price.substring(0, this.price.indexOf('元')) * this.good.discount;\n var up = this.price.substring(this.price.lastIndexOf(' ')) * this.good.discount;\n return down.toFixed(2) + \"元 ~ \" + up.toFixed(2);\n } else {\n return (this.price * this.good.discount).toFixed(2);\n }\n }\n\n return this.price;\n }\n }\n};","map":{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA;AAEA;AACAA,kBADA;AAEAC,MAFA,kBAEA;AACA;AACAC,cADA;AAEAC,oBAFA;AAGAC,eAHA;AAIAC,uBAJA;AAKAC,kBALA;AAMAC,mBANA;AAOAC,yBAPA;AAQAC,cARA;AASAC,sBATA;AAUAC;AAVA;AAYA,GAfA;AAgBAC;AACAC,iBADA,yBACAN,SADA,EACA;AACA;AAAA;AAAA,SADA,CAEA;;AACA;AACA;AACA;;AACA;AACA;AACA;AACAO;AACA;AACA;;AARA,mBASA,kBATA;AASAC,cATA;AASAA,gBATA;AAUA;;AACA;AACA;AACA,OAFA,MAEA;AACA;AACA;AACA,KApBA;AAqBAC,UArBA,kBAqBAC,QArBA,EAqBA;AACA;AACA;AACA;AACA,KAzBA;AA0BAC,aA1BA,uBA0BA;AACA;AACA;AACA;AACA;AACA;AACA;;AACAC;AACAA;AACA;AAAAnB;AAAAoB;AAAAlB;AAAAmB;AAAAC;AAAAL;AAAA;AAAA;AACA,KApCA;AAqCAM,aArCA,uBAqCA;AAAA;;AACA;AACAJ;;AACA;AACA;AACA;;AACA;AACA;AACA;AACA,OATA,CAUA;;;AACA;AACA;AACA;AAAAK;AAAArB;AAAAc;AAAAN;AAAA;;AACA;AACA;AACA;AACA;AACA,SAJA;AAKA,OARA;AASA;AAzDA,GAhBA;AA4EAc,SA5EA,qBA4EA;AAAA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;AACA,OAPA,MAOA;AACA;AACA;AACA,KAXA,EAJA,CAgBA;;AACA;AACA;AACA;AACA,qCAFA,CAGA;;AACA;AACA,OALA,MAKA;AACA;AACA;AACA;AACA;AACA;AACA,KAZA;AAgBA,GA7GA;AA8GAC,SA9GA,qBA8GA,CAEA,CAhHA;AAiHAC;AACA;AACAN;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAJA,MAIA;AACA;AAEA;AACA;;AACA;AACA;AAfA;AAjHA","names":["name","data","good","goodId","price","isDiscount","discount","standards","checkedStandard","store","showStore","count","methods","getPriceRange","min","arr","change","standard","goToOrder","console","query","realPrice","num","addToCart","userId","created","mounted","computed"],"sourceRoot":"src/views/front/good","sources":["GoodView.vue"],"sourcesContent":["<template>\r\n<div class=\"main-box\">\r\n <div >\r\n<!-- 左侧的图片-->\r\n <div class=\"image-box\">\r\n <img :src=\"good.imgs\" class=\"image\">\r\n </div>\r\n<!-- 右侧盒子-->\r\n <div class=\"detail-box\">\r\n<!-- 商品名与描述-->\r\n <div>\r\n <span style=\"font-size: 22px\" ><strong>{{good.name}}</strong></span><br/>\r\n </div>\r\n <div style=\"margin-top: 20px\">\r\n <span style=\"font-size: 17px;color: red\">{{good.description}}</span>\r\n </div>\r\n<!-- 价格盒子-->\r\n\r\n <div class=\"price-box\" v-if=\"good.discount<1\">\r\n <dl>\r\n <div> <dt>原价</dt> <dd style=\"text-decoration: line-through\"> {{price}}元 </dd> </div>\r\n <div> <dt>折扣</dt> <dd> {{ discount }} </dd> </div>\r\n <div> <dt>现价</dt> <dd style=\"color: red;font-size: 25px\"> {{realPrice}}元 </dd></div>\r\n </dl>\r\n </div>\r\n <div class=\"price-box\" v-if=\"good.discount===1\">\r\n <dl>\r\n <div> <dt>价格</dt> <dd style=\"color: red;font-size: 25px\"> {{price}}元 </dd></div>\r\n </dl>\r\n </div>\r\n<!-- 月销量-->\r\n <div style=\"margin-top: 20px\">\r\n <span>月销量：</span>\r\n <span style=\"color: red\">{{good.sales}}</span><br/>\r\n <span style=\"height: 40px\" v-if=\"showStore\">库存：{{store}}</span>\r\n </div>\r\n<!-- 选择规格-->\r\n <div style=\"margin-top: 15px;height: 50px\" v-if=\"standards.length!==0\">\r\n <el-radio-group v-for=\"(standard,index) in standards\" v-model=\"checkedStandard\" @change=\"change(standard)\" :key=\"index\">\r\n <el-radio-button class=\"standard\" :label=\"standard.value\" ></el-radio-button>\r\n </el-radio-group>\r\n\r\n </div>\r\n<!-- 选择数量-->\r\n <div style=\"margin-top: 20px\">\r\n <el-input-number v-model=\"count\" controls-position=\"right\" :min=\"1\" :max=\"store\" ></el-input-number>\r\n </div>\r\n<!-- 购买按钮组-->\r\n <div style=\"margin-top: 30px\">\r\n <el-button class=\"button\" @click=\"goToOrder\">购买</el-button>\r\n <el-button class=\"button\" @click=\"addToCart\" icon=\"el-icon-edit\">加入购物车</el-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n</div>\r\n</template>\r\n\r\n<script>\r\nimport API from \"@/utils/request\";\r\n\r\nexport default {\r\n name: \"GoodView\",\r\n data(){\r\n return{\r\n good: {},\r\n goodId: Number,\r\n price: -1,\r\n isDiscount : false,\r\n discount: '',\r\n standards:[],\r\n checkedStandard: '',\r\n store: 0,\r\n showStore: false,\r\n count: 1,\r\n }\r\n },\r\n methods:{\r\n getPriceRange(standards){\r\n let arr = standards.map(item => {return item.price;})\r\n //选择排序\r\n for(let i = 0;i<arr.length;i++){\r\n // 第一次循环，假设第一个值为最小值，后面i++依此类推\r\n let min =i\r\n for(let j=i+1;j<arr.length;j++){\r\n // 将第一个值循环与后面的值比较，如果后面的值比第一个值小，则将索引赋值给min，直到找到最小值\r\n if(arr[j] < arr[min]){\r\n min = j\r\n }\r\n }\r\n [arr[i],arr[min]] = [arr[min],arr[i]]\r\n }\r\n if(arr[0]===arr[arr.length-1]){\r\n return arr[0];\r\n }else{\r\n return arr[0]+'元 ~ '+arr[arr.length-1]\r\n }\r\n },\r\n change(standard){\r\n this.showStore = true;\r\n this.price = standard.price;\r\n this.store = standard.store;\r\n },\r\n goToOrder(){\r\n if(this.standards.length!==0){\r\n if(this.checkedStandard===''){\r\n this.$message.warning(\"请选择规格\")\r\n return false;\r\n }\r\n }\r\n console.log(this.good)\r\n console.log(this.checkedStandard)\r\n this.$router.push({name: 'preOrder',query: {good: JSON.stringify(this.good), realPrice: this.realPrice, num: this.count, standard: this.checkedStandard }})\r\n },\r\n addToCart(){\r\n //未登录，拦截\r\n console.log(localStorage.getItem(\"user\"))\r\n if(!localStorage.getItem(\"user\")){\r\n this.$router.push(\"/login\")\r\n }\r\n if(!this.checkedStandard){\r\n this.$message.error(\"请选择规格\")\r\n return false;\r\n }\r\n // 从服务器获取当前用户的id，保证安全\r\n this.request.get(\"/userid\").then(res=> {\r\n let userId = res\r\n let cart = {userId: userId,goodId: this.goodId,standard: this.checkedStandard,count: this.count}\r\n this.request.post(\"/api/cart\",cart).then(res=>{\r\n if(res.code==='200'){\r\n this.$message.success(\"成功添加购物车\")\r\n }\r\n })\r\n })\r\n },\r\n },\r\n\r\n created() {\r\n //初始化商品信息\r\n // this.good = JSON.parse(this.$route.query.good)\r\n this.goodId = this.$route.params.goodId;\r\n this.request.get(\"/api/good/\"+this.goodId).then(res=>{\r\n if(res.code==='200'){\r\n this.good = res.data;\r\n let discount = this.good.discount;\r\n if(discount<1){\r\n this.isDiscount = true;\r\n this.discount = discount * 10 + '折';\r\n }\r\n }else{\r\n this.$router.go(0);\r\n }\r\n })\r\n //从服务器获取商品规格信息\r\n this.request.get(\"/api/good/standard/\"+this.goodId).then(res=>{\r\n if(res.code==='200'){\r\n let standards= JSON.parse(res.data)\r\n this.standards = standards;\r\n //默认选择第一个标准\r\n this.price = this.getPriceRange(standards);\r\n }else {\r\n //没有规格\r\n this.price = this.good.price;\r\n this.store = this.good.store;\r\n this.showStore = true;\r\n }\r\n })\r\n\r\n\r\n\r\n },\r\n mounted() {\r\n\r\n },\r\n computed:{\r\n //折后价，小数点后2位\r\n realPrice: function (){\r\n if(this.good.discount < 1){\r\n //价格为范围，即不是数字，则返回一个范围\r\n if(isNaN(this.price)){\r\n let down = this.price.substring(0,this.price.indexOf('元')) * this.good.discount;\r\n let up = this.price.substring(this.price.lastIndexOf(' ')) * this.good.discount;\r\n return down.toFixed(2)+\"元 ~ \"+ up.toFixed(2);\r\n }else{\r\n return (this.price * this.good.discount).toFixed(2);\r\n\r\n }\r\n }\r\n return this.price;\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.main-box {\r\n width: 1060px;\r\n margin: 20px auto;\r\n padding: 30px;\r\n background-color: #ffffff;\r\n overflow: hidden;\r\n}\r\n.image-box{\r\n height: 420px;\r\n width: 420px;\r\n border: #f2f2f2 1px solid;\r\n text-align: center;\r\n margin-left: 80px;\r\n margin-top: 30px;\r\n display: inline-block;\r\n overflow: hidden;\r\n}\r\n.image{\r\n height: 100%;\r\n width: 350px;\r\n}\r\n.detail-box{\r\n\r\n width: 420px;\r\n display: inline-block;\r\n margin-left: 50px;\r\n overflow: hidden;\r\n}\r\n.price-box{\r\n background-color: #e9e9e9;\r\n background-image: linear-gradient(to top right, #e3fafa, rgba(159, 250, 246, 0.56));\r\n border-radius: 5px;\r\n font: 12px/1.5 \"Microsoft Yahei\",tahoma,arial;\r\n padding-bottom: 1px;\r\n padding-top: 1px;\r\n margin-right: 20px;\r\n margin-top: 30px;\r\n}\r\n.price-box div{\r\n line-height: 20px;\r\n margin-left: 8px;\r\n margin-bottom: 5px;\r\n}\r\n.price-box dl dt{\r\n float: left;\r\n font-size: 14px;\r\n line-height: 20px;\r\n}\r\n.price-box dl dd{\r\n font-size: 18px;\r\n line-height: 20px;\r\n}\r\n.button{\r\n width: 130px;\r\n height: 45px;\r\n background-color: #96e2e0;\r\n color: #710a0a;\r\n}\r\n.standard{\r\n height: 30px;\r\n margin-right: 10px;\r\n}\r\n</style>"]},"metadata":{},"sourceType":"module"} |