{"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//\nimport API from \"@/utils/request\";\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    }); //从服务器获取商品规格信息\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA;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;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;AAaA,GA1HA;AA2HAC,SA3HA,qBA2HA,EA3HA;AA4HAC;AACA;AACAN;AACA;AACA;AACA;AACA,qBACA,mDACA,kBAFA;AAGA,mBACA,oDACA,kBAFA;AAGA;AACA,SARA,MAQA;AACA;AACA;AACA;;AACA;AACA;AAlBA;AA5HA","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","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 type=\"success\" @click=\"goToOrder\"\r\n                        \r\n                        style=\"font-size: 20px;\"\r\n                        >\r\n                        <i class=\"iconfont icon-r-yes\" style=\"font-size: 22px;\"></i>购买</el-button\r\n                    >\r\n                    <el-button\r\n                        type=\"primary\"\r\n                        @click=\"addToCart\"\r\n                        style=\"font-size: 20px;\"\r\n                        >\r\n                        <i class=\"iconfont icon-r-add\" style=\"font-size: 22px;\"></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\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.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    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"}