Головна сторінка Огляд Довідка
Увійти
sifu-gogs
/
mobile-shop
2
0
Відгалуження 0
Файли Проблеми 0 Запити на злиття 0 Wiki
Переглянути джерело

shop

wuheng 2 роки тому
батько
ac282f040d
коміт
232b7062e8
2 змінених файлів з 278 додано та 41 видалено
Об'єднаний вигляд Показати статистику Diff
  1. 224 0
      demo.html
  2. 54 41
      src/views/ProdInfo.vue

+ 224 - 0
demo.html
Переглянути файл 

@@ -0,0 +1,224 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Demo</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        const sku = [
 
+            {
 
+                "skuId": 314,
 
+                "price": 1.01,
 
+                "oriPrice": 0.0,
 
+                "stocks": 81,
 
+                "skuName": "换修无忧版 深空灰色 64GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/2cd9ec641d92458983c00d87ff33ad57.jpg",
 
+                "properties": "版本:换修无忧版;颜色:深空灰色;内存:64GB"
 
+            },
 
+            {
 
+                "skuId": 315,
 
+                "price": 1.02,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "原厂延保版 深空灰色 64GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/bf4c40f7e6e5454e806c244ca49d3964.jpg",
 
+                "properties": "版本:原厂延保版;颜色:深空灰色;内存:64GB"
 
+            },
 
+            {
 
+                "skuId": 316,
 
+                "price": 7102.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 1,
 
+                "skuName": "公开版 银色 64GB ",
 
+                "pic": null,
 
+                "properties": "版本:公开版;颜色:银色;内存:64GB"
 
+            },
 
+            {
 
+                "skuId": 317,
 
+                "price": 7103.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 1,
 
+                "skuName": "换修无忧版 银色 64GB ",
 
+                "pic": null,
 
+                "properties": "版本:换修无忧版;颜色:银色;内存:64GB"
 
+            },
 
+            {
 
+                "skuId": 318,
 
+                "price": 7104.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 1,
 
+                "skuName": "原厂延保版 银色 64GB ",
 
+                "pic": null,
 
+                "properties": "版本:原厂延保版;颜色:银色;内存:64GB"
 
+            },
 
+            {
 
+                "skuId": 319,
 
+                "price": 7600.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 1,
 
+                "skuName": "公开版 金色 256GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/1cfc26bed5084caaa439ed4e49b41885.jpg",
 
+                "properties": "版本:公开版;颜色:金色;内存:256GB"
 
+            },
 
+            {
 
+                "skuId": 320,
 
+                "price": 7601.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "换修无忧版 金色 256GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/a25a877f99684e1882eef5a5bb9081c4.jpg",
 
+                "properties": "版本:换修无忧版;颜色:金色;内存:256GB"
 
+            },
 
+            {
 
+                "skuId": 321,
 
+                "price": 7602.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "原厂延保版 金色 256GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/b119c50832d44622a07c7ed0ff10f647.jpg",
 
+                "properties": "版本:原厂延保版;颜色:金色;内存:256GB"
 
+            },
 
+            {
 
+                "skuId": 322,
 
+                "price": 7603.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "公开版 深空灰色 256GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/98b8c67212994d9bb62ac35aedd1cc08.jpg",
 
+                "properties": "版本:公开版;颜色:深空灰色;内存:256GB"
 
+            },
 
+            {
 
+                "skuId": 323,
 
+                "price": 7604.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "换修无忧版 深空灰色 256GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/e5cdcd2c310d4cf2b702523db1993dbd.jpg",
 
+                "properties": "版本:换修无忧版;颜色:深空灰色;内存:256GB"
 
+            },
 
+            {
 
+                "skuId": 324,
 
+                "price": 7605.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "原厂延保版 深空灰色 256GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/9edd1e5a57d345678dd52308496457bb.jpg",
 
+                "properties": "版本:原厂延保版;颜色:深空灰色;内存:256GB"
 
+            },
 
+            {
 
+                "skuId": 325,
 
+                "price": 7606.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "公开版 银色 256GB ",
 
+                "pic": null,
 
+                "properties": "版本:公开版;颜色:银色;内存:256GB"
 
+            },
 
+            {
 
+                "skuId": 326,
 
+                "price": 7607.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "换修无忧版 银色 256GB ",
 
+                "pic": null,
 
+                "properties": "版本:换修无忧版;颜色:银色;内存:256GB"
 
+            },
 
+            {
 
+                "skuId": 327,
 
+                "price": 7608.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "原厂延保版 银色 256GB ",
 
+                "pic": null,
 
+                "properties": "版本:原厂延保版;颜色:银色;内存:256GB"
 
+            },
 
+            {
 
+                "skuId": 328,
 
+                "price": 8000.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "公开版 金色 512GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/20824781b8f24771b12cf273450aaaae.jpg",
 
+                "properties": "版本:公开版;颜色:金色;内存:512GB"
 
+            },
 
+            {
 
+                "skuId": 329,
 
+                "price": 8001.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "换修无忧版 金色 512GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/2c60b3e379e84d6bacfd7f04edc1a653.jpg",
 
+                "properties": "版本:换修无忧版;颜色:金色;内存:512GB"
 
+            },
 
+            {
 
+                "skuId": 330,
 
+                "price": 8002.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "原厂延保版 金色 512GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/2e5239d4fd6e49e29c9f8e75edad7318.jpg",
 
+                "properties": "版本:原厂延保版;颜色:金色;内存:512GB"
 
+            },
 
+            {
 
+                "skuId": 331,
 
+                "price": 8003.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "公开版 深空灰色 512GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/525b9161f2424645bab7ca1b73e918d2.jpg",
 
+                "properties": "版本:公开版;颜色:深空灰色;内存:512GB"
 
+            },
 
+            {
 
+                "skuId": 332,
 
+                "price": 8004.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "换修无忧版 深空灰色 512GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/a5dd840eadaa41afadfd7d16ed05b139.jpg",
 
+                "properties": "版本:换修无忧版;颜色:深空灰色;内存:512GB"
 
+            },
 
+            {
 
+                "skuId": 333,
 
+                "price": 8006.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "原厂延保版 深空灰色 512GB ",
 
+                "pic": "http://shop-static.edu.koobietech.com/2019/04/ae2c5c3b77e0437c93114cae3bfb20e0.jpg",
 
+                "properties": "版本:原厂延保版;颜色:深空灰色;内存:512GB"
 
+            },
 
+            {
 
+                "skuId": 335,
 
+                "price": 8005.0,
 
+                "oriPrice": 0.0,
 
+                "stocks": 0,
 
+                "skuName": "换修无忧版 银色 512GB ",
 
+                "pic": null,
 
+                "properties": "版本:换修无忧版;颜色:银色;内存:512GB"
 
+            }
 
+        ]
 
+        const properties = []
 
+        const propObject = {}
 
+        for ( let i = 0; i < sku.length; i++ ) {
 
+            properties.push( sku[i].properties )
 
+        }
 
+        for (let i = 0; i < properties.length; i++) {
 
+            const propStr =  properties[i]
 
+            const propArr = propStr.split(";")
 
+            for (let n = 0; n < propArr.length; n++) {
 
+                const valueStr = propArr[n];
 
+                const valueArr = valueStr.split(":")
 
+                if ( !propObject[valueArr[0]] ) {
 
+                    propObject[valueArr[0]] = new Set()
 
+                }
 
+                propObject[valueArr[0]].add(valueArr[1])
 
+            }
 
+        }
 
+
 
+        console.log(
 
+            propObject
 
+        )
 
+    </script>
 
+</body>
 
+</html>

+ 54 - 41
src/views/ProdInfo.vue
Переглянути файл 

@@ -43,7 +43,7 @@
 
         <van-divider :style="{ border: '.5rem solid #ebedf0' }" />
 
         <van-divider :style="{ border: '.5rem solid #ebedf0' }" />
 
 
 
         <!-- 类别 -->
 
         <!-- 类别 -->
 
-        <div class="prod-categray" v-if="skuList.length > 0" @click="skuSelect">
 
+        <div class="prod-categray" v-if="skuList.length > 0" @click="openSkuPlan">
 
             <span class="left">已选 </span> {{ skuList[0].skuName }} <span class="right">...</span>
 
             <span class="left">已选 </span> {{ skuList[0].skuName }} <span class="right">...</span>
 
         </div>
 
         </div>
 
 
 
@@ -82,7 +82,7 @@
 
                         <div style="text-align: left;">
 
                         <div style="text-align: left;">
 
                             {{ idx }}
 
                             {{ idx }}
 
                         </div>
 
                         </div>
 
-                        <van-tag @click="selectTag(t, idx)" :plain="selectedTag[t] ? false : true" v-for="(t, index) in tag"
 
+                        <van-tag @click="selectTag(idx, t)" :class="{ 'prop-selected' : selectedTag[idx] === t ? true : false }"  plain v-for="(t, index) in tag"
 
                             :key="index" type="danger">{{ t }}</van-tag>
 
                             :key="index" type="danger">{{ t }}</van-tag>
 
                     </div>
 
                     </div>
 
 
 
@@ -145,6 +145,9 @@ export default {
 
                 distributionCardNo: ""
 
                 distributionCardNo: ""
 
             }
 
             }
 
         }
 
         }
 
+    },
 
+    computed: {
 
+       
     },
 
     },
 
     async created() {
 
     async created() {
 
         this.prodId = this.$route.query.prodId
 
         this.prodId = this.$route.query.prodId
 
@@ -155,8 +158,38 @@ export default {
 
         this.prodData = prod
 
         this.prodData = prod
 
         this.commData = await prodCommData({ prodId: this.prodId })
 
         this.commData = await prodCommData({ prodId: this.prodId })
 
         this.isCollection = await isCollection({ prodId: this.prodId })
 
         this.isCollection = await isCollection({ prodId: this.prodId })
 
+        this.init(this.skuList)
 
     },
 
     },
 
     methods: {
 
     methods: {
 
+        init(sku){
 
+            const properties = []
 
+            const propObject = {}
 
+            let   defaultArr = []
 
+            for ( let i = 0; i < sku.length; i++ ) {
 
+                properties.push( sku[i].properties )
 
+            }
 
+            for (let i = 0; i < properties.length; i++) {
 
+                const propStr =  properties[i]
 
+                const propArr = propStr.split(";")
 
+                if ( defaultArr.length === 0 ) {
 
+                    defaultArr = propArr
 
+                }
 
+                for (let n = 0; n < propArr.length; n++) {
 
+                    const valueStr = propArr[n];
 
+                    const valueArr = valueStr.split(":")
 
+                    if ( !propObject[valueArr[0]] ) {
 
+                        propObject[valueArr[0]] = new Set()
 
+                    }
 
+                    propObject[valueArr[0]].add(valueArr[1])
 
+                }
 
+            }
 
+            this.tags = propObject
 
+            for ( let i = defaultArr.length - 1; i >= 0; i-- ) {
 
+                const valueStr = defaultArr[i];
 
+                const valueArr = valueStr.split(":")
 
+                this.$set(this.selectedTag, valueArr[0], valueArr[1])
 
+            }
 
+        },
 
         onClickButton() {
 
         onClickButton() {
 
             // this.confirm.orderItem.prodId = this.prodData.prodId
 
             // this.confirm.orderItem.prodId = this.prodData.prodId
 
             // this.confirm.orderItem.prodCount = 1
 
             // this.confirm.orderItem.prodCount = 1
 
@@ -178,49 +211,23 @@ export default {
 
         handclick() {
 
         handclick() {
 
             this.show = !this.show
 
             this.show = !this.show
 
         },
 
         },
 
-        selectTag(value, tagname) {
 
-            for (const key in this.selectedTag) {
 
-                if (this.selectedTag[key] === tagname) {
 
-                    delete this.selectedTag[key]
 
-                }
 
+        selectTag(propTitle, Propvalue) {
 
+            //当用户选择一个属性的时候, 我们存储他的选择
 
+            this.$set( this.selectedTag, propTitle, Propvalue )
 
+            //然后我们判断 用户选择的属性时候能找到对应的prop
 
+            let str =  ""
 
+            for ( let item in this.selectedTag ) {
 
+                str = item + ":" + this.selectedTag[item] + ";" + str
 
             }
 
             }
 
-            this.$set(this.selectedTag, value, tagname)
 
-
 
-            //new RegExp("41(.*?)浅灰").
 
-            let skuId = 0
 
-            for (const items in this.skuList) {
 
-                skuId = 0
 
-                for (const key in this.selectedTag) {
 
-                    if (new RegExp(key).test(this.skuList[items].skuName)) {
 
-                        skuId = this.skuList[items].skuId
 
-                    } else {
 
-                        skuId = 0
 
-                    }
 
+            str = str.substring(0, str.length -1 )
 
+            for ( let i = 0; i < this.skuList.length; i++ ) {
 
+                if (this.skuList[i].properties === str) {
 
+                    console.log(this.skuList[i].skuId  )
 
+                    return;
 
                 }
 
                 }
 
             }
 
             }
 
-            this.confirm.orderItem.skuId = skuId
 
         },
 
         },
 
-        skuSelect() {
 
-            if (this.skuSelected === null) {
 
-                this.skuSelected = this.skuList[0]
 
-                const skuList = this.skuList
 
-                const tags = {}
 
-                for (const items in skuList) {
 
-                    if (Object.hasOwnProperty.call(skuList, items)) {
 
-                        const element = skuList[items].properties.split(";")
 
-                        for (let i = 0; i < element.length; i++) {
 
-                            const temp = element[i].split(":")
 
-                            if (/\//.test(temp[1])) {
 
-                                tags[temp[0]] = temp[1].split("/")
 
-                            } else {
 
-                                if (!tags[temp[0]]) { tags[temp[0]] = [] }
 
-                                tags[temp[0]].push(temp[1])
 
-                            }
 
-                        }
 
-                    }
 
-                }
 
-                this.tags = tags
 
-            }
 
+        openSkuPlan() {
 
             this.show = !this.show
 
             this.show = !this.show
 
         },
 
         },
 
         formatHtml(t) {
 
         formatHtml(t) {
 
@@ -230,6 +237,12 @@ export default {
 
 }
 
 }
 
 </script>
 
 </script>
 
 <style scoped lang="less">
 
 <style scoped lang="less">
 
+
 
+
 
+.prop-selected {
 
+    color: #FFF !important;
 
+    background-color: red !important;
 
+}
 
 .prod-info /deep/ .van-tag {
 
 .prod-info /deep/ .van-tag {
 
     color: #ee0a24;
 
     color: #ee0a24;
 
     margin-left: 1rem;
 
     margin-left: 1rem;