1 line
20 KiB
JSON
1 line
20 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//\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//\n//\nimport API from \"@/utils/request\";\nimport { toLoad } from \"../../../utils/initialize\";\nexport default {\n name: \"GoodView\",\n data: function data() {\n return {\n baseApi: this.$store.state.baseApi,\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 }).catch(function (error) {\n _this2.$message.error(error.response.data);\n\n console.log(error);\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 toLoad();\n }).catch(function (error) {\n _this2.$message.error(error.response.data);\n\n console.log(error);\n toLoad();\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0HA;AACA;AAEA;AACAA,kBADA;AAEAC,MAFA,kBAEA;AACA;AACAC,wCADA;AAEAC,cAFA;AAGAC,oBAHA;AAIAC,eAJA;AAKAC,uBALA;AAMAC,kBANA;AAOAC,mBAPA;AAQAC,yBARA;AASAC,cATA;AAUAC,sBAVA;AAWAC;AAXA;AAaA,GAhBA;AAiBAC;AACAC,iBADA,yBACAN,SADA,EACA;AACA;AACA;AACA,OAFA,EADA,CAIA;;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,KAtBA;AAuBAC,UAvBA,kBAuBAC,QAvBA,EAuBA;AACA;AACA;AACA;AACA,KA3BA;AA4BAC,aA5BA,uBA4BA;AACA;AACA;AACA;AACA;AACA;AACA;;AACAC;AACAA;AACA;AACApB,wBADA;AAEAqB;AACAlB,yCADA;AAEAmB,mCAFA;AAGAC,yBAHA;AAIAL;AAJA;AAFA;AASA,KA9CA;AA+CAM,aA/CA,uBA+CA;AAAA;;AACA;AACAJ;;AACA;AACA;AACA;;AACA;AACA;AACA;AACA,OATA,CAUA;;;AACA;AACA;AACA;AACAK,wBADA;AAEArB,8BAFA;AAGAc,yCAHA;AAIAN;AAJA;;AAMA;AACA;AACA;AACA;AACA,SAJA;AAKA,OAbA;AAcA;AAxEA,GAjBA;AA4FAc,SA5FA,qBA4FA;AAAA;;AACA;AACA;AACA;AACA,iBACAC,GADA,CACA,0BADA,EAEAC,IAFA,CAEA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;AACA,OAPA,MAOA;AACA;AACA;AACA,KAbA,EAcAC,KAdA,CAcA;AACA;;AACAT;AACA,KAjBA,EAJA,CAsBA;;AACA,iBACAO,GADA,CACA,mCADA,EAEAC,IAFA,CAEA;AACA;AACA;AACA,qCAFA,CAGA;;AACA;AACA,OALA,MAKA;AACA;AACA;AACA;AACA;AACA;;AACAE;AACA,KAfA,EAgBAD,KAhBA,CAgBA;AACA;;AACAT;AACAU;AACA,KApBA;AAqBA,GAxIA;AAyIAC,SAzIA,qBAyIA,EAzIA;AA0IAC;AACA;AACAV;AACA;AACA;AACA;AACA,qBACA,mDACA,kBAFA;AAGA,mBACA,oDACA,kBAFA;AAGA;AACA,SARA,MAQA;AACA;AACA;AACA;;AACA;AACA;AAlBA;AA1IA","names":["name","data","baseApi","good","goodId","price","isDiscount","discount","standards","checkedStandard","store","showStore","count","methods","getPriceRange","min","arr","change","standard","goToOrder","console","query","realPrice","num","addToCart","userId","created","get","then","catch","toLoad","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=\"baseApi + good.imgs\" class=\"image\" />\r\n </div> -->\r\n\r\n <div class=\"image-container\">\r\n <img :src=\"baseApi + good.imgs\" alt=\"Your Image\" />\r\n </div>\r\n <!-- 右侧盒子-->\r\n <div class=\"detail-box\">\r\n <!-- 商品名与描述-->\r\n <div>\r\n <span style=\"font-size: 22px\"\r\n ><strong>{{ good.name }}</strong></span\r\n ><br />\r\n </div>\r\n <div style=\"margin-top: 20px\">\r\n <span style=\"font-size: 17px\">{{ 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>\r\n <dt>原价</dt>\r\n <dd style=\"text-decoration: line-through\">\r\n <b>{{ price }}</b\r\n >元\r\n </dd>\r\n </div>\r\n <div>\r\n <dt>折扣</dt>\r\n <dd>{{ discount }}</dd>\r\n </div>\r\n <div>\r\n <dt>现价</dt>\r\n <dd style=\"color: red; font-size: 25px\">\r\n <b>{{ realPrice }}</b\r\n >元\r\n </dd>\r\n </div>\r\n </dl>\r\n </div>\r\n <div class=\"price-box\" v-if=\"good.discount === 1\">\r\n <dl>\r\n <div>\r\n <dt>价格</dt>\r\n <dd style=\"color: red; font-size: 25px\">\r\n ￥ <b>{{ price }}</b>\r\n </dd>\r\n </div>\r\n </dl>\r\n </div>\r\n <!-- 月销量-->\r\n <div style=\"margin-top: 20px\">\r\n <span>月销量：</span>\r\n <span>{{ good.sales }}</span\r\n ><br />\r\n <span style=\"height: 40px\" v-if=\"showStore\"\r\n >库存：{{ store }}</span\r\n >\r\n </div>\r\n <!-- 选择规格-->\r\n <div\r\n style=\"margin-top: 15px; height: 50px\"\r\n v-if=\"standards.length !== 0\"\r\n >\r\n <el-radio-group\r\n v-for=\"(standard, index) in standards\"\r\n v-model=\"checkedStandard\"\r\n @change=\"change(standard)\"\r\n :key=\"index\"\r\n >\r\n <el-radio-button\r\n class=\"standard\"\r\n :label=\"standard.value\"\r\n ></el-radio-button>\r\n </el-radio-group>\r\n </div>\r\n <!-- 选择数量-->\r\n <div style=\"margin-top: 20px\">\r\n <el-input-number\r\n v-model=\"count\"\r\n controls-position=\"right\"\r\n :min=\"1\"\r\n :max=\"store\"\r\n ></el-input-number>\r\n </div>\r\n <!-- 购买按钮组-->\r\n <div style=\"margin-top: 30px\">\r\n <el-button\r\n type=\"success\"\r\n @click=\"goToOrder\"\r\n style=\"font-size: 22px\"\r\n >\r\n <i\r\n class=\"iconfont icon-r-yes\"\r\n style=\"font-size: 26px\"\r\n ></i\r\n > 购买</el-button\r\n >\r\n <el-button\r\n type=\"primary\"\r\n @click=\"addToCart\"\r\n style=\"font-size: 22px\"\r\n >\r\n <i\r\n class=\"iconfont icon-r-add\"\r\n style=\"font-size: 26px\"\r\n ></i\r\n > 加入购物车</el-button\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport API from \"@/utils/request\";\r\nimport { toLoad } from \"../../../utils/initialize\";\r\n\r\nexport default {\r\n name: \"GoodView\",\r\n data() {\r\n return {\r\n baseApi: this.$store.state.baseApi,\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) => {\r\n return item.price;\r\n });\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({\r\n name: \"preOrder\",\r\n query: {\r\n good: JSON.stringify(this.good),\r\n realPrice: this.realPrice,\r\n num: this.count,\r\n standard: this.checkedStandard,\r\n },\r\n });\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 = {\r\n userId: userId,\r\n goodId: this.goodId,\r\n standard: this.checkedStandard,\r\n count: this.count,\r\n };\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\r\n .get(\"/api/good/\" + this.goodId)\r\n .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 .catch((error) => {\r\n this.$message.error(error.response.data);\r\n console.log(error);\r\n });\r\n //从服务器获取商品规格信息\r\n this.request\r\n .get(\"/api/good/standard/\" + this.goodId)\r\n .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 toLoad()\r\n })\r\n .catch((error) => {\r\n this.$message.error(error.response.data);\r\n console.log(error);\r\n toLoad()\r\n });\r\n },\r\n mounted() {},\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 =\r\n this.price.substring(0, this.price.indexOf(\"元\")) *\r\n this.good.discount;\r\n let up =\r\n this.price.substring(this.price.lastIndexOf(\" \")) *\r\n 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 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\r\n.image {\r\n height: 100%;\r\n width: 350px;\r\n}\r\n.image-container {\r\n width: 420px; /* 设置容器的固定宽度 */\r\n height: 420px; /* 设置容器的固定高度 */\r\n overflow: hidden; /* 隐藏超出容器尺寸的部分 */\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\r\n.image-container img {\r\n display: block; /* 将图片显示为块级元素 */\r\n width: 100%; /* 图片宽度设置为100%，使其填满容器的宽度 */\r\n height: auto; /* 根据图片的宽高比，自动调整高度 */\r\n object-fit: cover; /* 将图片按比例缩放，以覆盖整个容器尺寸 */\r\n}\r\n\r\n.detail-box {\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 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"} |