pm

src/views/ProdInfo.vue

@@ -43,8 +43,8 @@
         <van-divider :style="{ border: '.5rem solid #ebedf0' }" />
 
         <!-- 类别 -->
-        <div class="prod-categray" v-if="skuList.length > 0" @click="openSkuPlan">
-            <span class="left">已选 </span> {{ skuList[0].skuName }} <span class="right">...</span>
+        <div class="prod-categray" v-if="skuList.length > 0" @click="show = true">
+            <span class="left">已选 </span> {{ defaultSku.skuName }} <span class="right">...</span>
         </div>
 
         <!-- 分割线 -->
@@ -65,37 +65,68 @@
             <van-grid-item><van-tag type="warning">差评({{ commData.negativeNumber }})</van-tag></van-grid-item>
             <van-grid-item><van-tag type="warning">有图({{ commData.picNumber }})</van-tag></van-grid-item>
         </van-grid>
+
+        <!-- 内容页 -->
         <div class="content" v-if="prodData.content" v-html="formatHtml(prodData.content)"></div>
-        <van-action-sheet v-model="show" title="标题">
-            <div class="action-sheet-content">
-                <van-card v-if="skuSelected" :num="skuSelected.prodCount" :price="skuSelected.price"
-                    :desc="skuSelected.skuName" :title="skuSelected.prodName" :thumb="skuSelected.pic">
-                    <template #tags>
 
-                    </template>
-                    <template #footer>
-                        <van-stepper async-change integer />
-                    </template>
-                </van-card>
+        <!-- 购物提示框 -->
+        <van-action-sheet v-model="showDesc">
+            <div style="height: 1rem;"></div>
+            <van-card :num="confirm.orderItem.prodCount" 
+                :price="defaultSku.price ? defaultSku.price : prodData.price" 
+                :desc="prodData.brief" :title="defaultSku.skuName"
+                :thumb="defaultSku.pic ? defaultSku.pic : prodData.pic ">
+                <template #tags>
+                </template>
+                <template #footer>
+                    <van-stepper v-model="confirm.orderItem.prodCount" integer />
+                </template>
+            </van-card>
+            <div class="action-sheet-content">
                 <div>
                     <div v-for="(tag, idx) in tags" :key="idx">
                         <div style="text-align: left;">
                             {{ idx }}
                         </div>
-                        <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>
+                        <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>
                     </div>
+                </div>
+                <div style="margin-top: 2rem;"></div>
 
+                <div class="shopcart-button">
+                    <van-button class="left" :disabled="defaultSku.skuName ? false : true" type="danger"
+                    @click="shopcartAdd">加入购物车</van-button>
+                    <van-button class="right" :disabled="defaultSku.skuName ? false : true" type="danger"
+                    @click="buynow">立即购买</van-button>
+                </div>
+            </div>
+        </van-action-sheet>
+
+        <!-- 选择型号 -->
+        <van-action-sheet v-model="show" title="选择产品类别">
+            <div class="action-sheet-content">
+                <div>
+                    <div v-for="(tag, idx) in tags" :key="idx">
+                        <div style="text-align: left;">
+                            {{ idx }}
+                        </div>
+                        <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>
+                    </div>
                 </div>
                 <div style="margin-top: 2rem;"></div>
-                <van-button :disabled="confirm.orderItem.skuId === 0" type="danger" block @click="handclick">确定</van-button>
+                <van-button :disabled="defaultSku.skuName ? false : true" type="danger" block
+                    @click="show = false">确定</van-button>
             </div>
         </van-action-sheet>
         <van-goods-action>
             <van-goods-action-icon icon="chat-o" text="客服" />
             <van-goods-action-icon icon="cart-o" text="购物车" />
             <van-goods-action-icon icon="shop-o" text="店铺" />
-            <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
+            <van-goods-action-button type="danger" text="立即购买" @click="showDesc = true" />
         </van-goods-action>
         <div style="height: 5rem;"> </div>
     </div>
@@ -106,11 +137,11 @@ import { formatHtml } from '../utils/util'
 export default {
     data() {
         return {
+            defaultSku: {},
             selectedTag: {},
-            prodId: 0,
+            showDesc: false,
             prodData: {},
             skuList: [],
-            skuSelected: null,
             transport: {},
             commData: {
                 positiveRating: 0,
@@ -124,7 +155,7 @@ export default {
             show: false,
             tags: {},
             confirm: {
-                basketIds: [],
+                basketIds: [],  
                 orderItem: {
                     prodId: 0,
                     skuId: 0,
@@ -145,90 +176,75 @@ export default {
                 distributionCardNo: ""
             }
         }
-    },
-    computed: {
-       
     },
     async created() {
-        this.prodId = this.$route.query.prodId
-        const prod = await prodInfo({ prodId: this.prodId })
+        const prod = await prodInfo({ prodId: this.$route.query.prodId })
         this.skuList = prod.skuList
         this.transport = prod.transport
         prod.imgs = prod.imgs.split(",")
         this.prodData = prod
-        this.commData = await prodCommData({ prodId: this.prodId })
-        this.isCollection = await isCollection({ prodId: this.prodId })
+        this.commData = await prodCommData({ prodId: prod.prodId })
+        this.isCollection = await isCollection({ prodId: prod.prodId })
         this.init(this.skuList)
     },
     methods: {
-        init(sku){
+        buynow(){
+            
+        },
+        shopcartAdd(){
+            this.shopcart.basketId = 0
+            this.shopcart.prodId = this.prodData.prodId
+            this.shopcart.skuId = this.defaultSku.skuId
+            this.shopcart.shopId = this.prodData.shopId
+            this.shopcart.count = confirm.orderItem.prodCount
+            changeItem(this.shopcart)
+        },
+        init(sku) {
             const properties = []
             const propObject = {}
-            let   defaultArr = []
-            for ( let i = 0; i < sku.length; i++ ) {
-                properties.push( sku[i].properties )
+            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 propStr = properties[i]
                 const propArr = propStr.split(";")
-                if ( defaultArr.length === 0 ) {
+                if (defaultArr.length === 0) {
                     defaultArr = propArr
+                    this.defaultSku = sku[i]
                 }
                 for (let n = 0; n < propArr.length; n++) {
                     const valueStr = propArr[n];
                     const valueArr = valueStr.split(":")
-                    if ( !propObject[valueArr[0]] ) {
+                    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-- ) {
+            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() {
-            // this.confirm.orderItem.prodId = this.prodData.prodId
-            // this.confirm.orderItem.prodCount = 1
-            // this.confirm.orderItem.shopId = this.prodData.shopId
-
-            this.shopcart.basketId = 0
-            this.shopcart.prodId = this.prodData.prodId
-            this.shopcart.skuId = this.confirm.orderItem.skuId
-            this.shopcart.shopId = this.prodData.shopId
-            this.shopcart.count = 1
-
-            // confirm(this.confirm).then(r=>{
-            //     console.log(r)
-            // }).catch(e=>{
-            //     console.log(e)
-            // })
-            changeItem(this.shopcart)
-        },
-        handclick() {
-            this.show = !this.show
-        },
         selectTag(propTitle, Propvalue) {
             //当用户选择一个属性的时候, 我们存储他的选择
-            this.$set( this.selectedTag, propTitle, Propvalue )
+            this.$set(this.selectedTag, propTitle, Propvalue)
             //然后我们判断 用户选择的属性时候能找到对应的prop
-            let str =  ""
-            for ( let item in this.selectedTag ) {
+            let str = ""
+            for (let item in this.selectedTag) {
                 str = item + ":" + this.selectedTag[item] + ";" + str
             }
-            str = str.substring(0, str.length -1 )
-            for ( let i = 0; i < this.skuList.length; i++ ) {
+            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  )
+                    this.defaultSku = this.skuList[i]
                     return;
                 }
             }
-        },
-        openSkuPlan() {
-            this.show = !this.show
+            this.defaultSku = {}
         },
         formatHtml(t) {
             return formatHtml(t)
@@ -237,12 +253,21 @@ export default {
 }
 </script>
 <style scoped lang="less">
-
-
+.shopcart-button{
+    .left{
+        width: 50%;
+        background-color: #595959;
+        border: 1px solid #595959;
+    }
+    .right {
+        width: 50%;
+    }
+}
 .prop-selected {
     color: #FFF !important;
     background-color: red !important;
 }
+
 .prod-info /deep/ .van-tag {
     color: #ee0a24;
     margin-left: 1rem;
@@ -326,5 +351,4 @@ export default {
             padding-right: 1rem;
         }
     }
-}
-</style>
+}</style>