prodinfo

src/api/prodinfo.js

@@ -5,4 +5,9 @@ export const prodInfo = (data) => get("/prod/prodInfo", data)
 
 export const prodCommData = (data) => get("/prodComm/prodCommData", data)
 
+
+export const changeItem = (data) => post("/p/shopCart/changeItem", data)
+
+export const confirm = (data) => post("/p/order/confirm", data)
+
 export const isCollection = (data) => get("/p/user/collection/isCollection", data)

src/main.js

@@ -5,12 +5,16 @@ import store from './store'
 Vue.config.productionTip = false
 
 import {
-  Image as VanImage, Form, Field, Search, CheckboxGroup,
-  Swipe, Grid, GridItem, NoticeBar, Checkbox, Col, Cell,
-  Button, Tabbar, TabbarItem, SwipeItem, Tag, Row, CellGroup,
-  TreeSelect, Card, Empty, SubmitBar, Stepper, Divider, Icon
+  Image as VanImage, Form, Field, Search, CheckboxGroup, GoodsActionIcon,
+  Swipe, Grid, GridItem, NoticeBar, Checkbox, Col, Cell, GoodsActionButton,
+  Button, Tabbar, TabbarItem, SwipeItem, Tag, Row, CellGroup, GoodsAction,
+  TreeSelect, Card, Empty, SubmitBar, Stepper, Divider, Icon, ActionSheet
 } from 'vant';
 
+Vue.use(GoodsAction);
+Vue.use(GoodsActionButton);
+Vue.use(GoodsActionIcon);
+Vue.use(ActionSheet);
 Vue.use(Icon)
 Vue.use(Cell);
 Vue.use(CellGroup);

src/utils/util.js

@@ -1,3 +1,5 @@
+
+
 export const formatHtml = content => {
     content = content.replace(/\<img/gi, '<img style="width:100% !important;height:auto !important;margin:0;display:flex;" ');
     content = content.replace(/\<td/gi, '<td  cellspacing="0" cellpadding="0" border="0" style="display:block;vertical-align:top;margin: 0px; padding: 0px; border: 0px;outline-width:0px;" ');
@@ -5,4 +7,6 @@ export const formatHtml = content => {
     content = content.replace(/height=/gi, 'sss=');
     content = content.replace(/ \/\>/gi, ' style="max-width:100% !important;height:auto !important;margin:0;display:block;" \/\>');
     return content;
-}
+}
+
+

src/views/ProdInfo.vue

@@ -17,8 +17,8 @@
                 </van-col>
                 <van-col span="6" class="prod-title-icon">
                     <div>
-                        <van-icon v-if="!isCollection" name="like-o" size="20" /> 
-                        <van-icon v-if="isCollection" style="color:red" name="like" size="20" /> 
+                        <van-icon v-if="!isCollection" name="like-o" size="20" />
+                        <van-icon v-if="isCollection" style="color:red" name="like" size="20" />
                         <span> 收藏</span>
                     </div>
                 </van-col>
@@ -43,7 +43,7 @@
         <van-divider :style="{ border: '.5rem solid #ebedf0' }" />
 
         <!-- 类别 -->
-        <div class="prod-categray">
+        <div class="prod-categray" v-if="skuList.length > 0" @click="skuSelect">
             <span class="left">已选 </span> {{ skuList[0].skuName }} <span class="right">...</span>
         </div>
 
@@ -59,25 +59,58 @@
             </template>
         </van-cell>
         <van-grid :column-num="5" :border="false">
-            <van-grid-item ><van-tag type="warning">全部({{ commData.number }})</van-tag></van-grid-item>
-            <van-grid-item ><van-tag type="warning">好评({{ commData.praiseNumber }})</van-tag></van-grid-item>
-            <van-grid-item ><van-tag type="warning">中评({{ commData.secondaryNumber }})</van-tag></van-grid-item>
-            <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-item><van-tag type="warning">全部({{ commData.number }})</van-tag></van-grid-item>
+            <van-grid-item><van-tag type="warning">好评({{ commData.praiseNumber }})</van-tag></van-grid-item>
+            <van-grid-item><van-tag type="warning">中评({{ commData.secondaryNumber }})</van-tag></van-grid-item>
+            <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-html="formatHtml(prodData.content)"></div>
+        <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>
+                <div>
+                    <div v-for="(tag, idx) in tags" :key="idx">
+                        <div style="text-align: left;">
+                            {{ idx }}
+                        </div>
+                        <van-tag @click="selectTag(t, idx)" :plain="selectedTag[t] ? false : true" 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>
+            </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>
         <div style="height: 5rem;"> </div>
     </div>
 </template>
 <script>
-import { prodInfo, prodCommData, isCollection } from '../api/prodinfo'
+import { prodInfo, prodCommData, isCollection, changeItem, confirm } from '../api/prodinfo'
 import { formatHtml } from '../utils/util'
 export default {
     data() {
         return {
+            selectedTag: {},
             prodId: 0,
             prodData: {},
             skuList: [],
+            skuSelected: null,
             transport: {},
             commData: {
                 positiveRating: 0,
@@ -86,6 +119,30 @@ export default {
                 secondaryNumber: 0,
                 negativeNumber: 0,
                 picNumber: 0
+            },
+            isCollection: false,
+            show: false,
+            tags: {},
+            confirm: {
+                basketIds: [],
+                orderItem: {
+                    prodId: 0,
+                    skuId: 0,
+                    prodCount: 1,
+                    shopId: 0,
+                    distributionCardNo: ""
+                },
+                addrId: 0,
+                userChangeCoupon: 0,
+                couponIds: []
+            },
+            shopcart: {
+                basketId: 0,
+                prodId: 0,
+                skuId: 0,
+                shopId: 0,
+                count: 0,
+                distributionCardNo: ""
             }
         }
     },
@@ -99,28 +156,112 @@ export default {
         this.commData = await prodCommData({ prodId: this.prodId })
         this.isCollection = await isCollection({ prodId: this.prodId })
     },
-    methods:{
-        formatHtml(t){
+    methods: {
+        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(value, tagname) {
+            for (const key in this.selectedTag) {
+                if (this.selectedTag[key] === tagname) {
+                    delete this.selectedTag[key]
+                }
+            }
+            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
+                    }
+                }
+            }
+            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
+            }
+            this.show = !this.show
+        },
+        formatHtml(t) {
             return formatHtml(t)
         }
     }
 }
 </script>
-<style lang="less">
+<style scoped lang="less">
+.prod-info /deep/ .van-tag {
+    color: #ee0a24;
+    margin-left: 1rem;
+    padding: 0.3rem;
+}
+
+.prod-info /deep/ .action-sheet-content {
+    padding: 1rem;
+}
+
+.prod-info /deep/ .van-card {
+    background-color: #FFF;
+}
+
 .van-tag--warning {
     background-color: #ff976a;
     padding: 0.3rem;
 }
+
 .prod-info {
     padding: auto;
+
     .van-cell {
         .van-cell__title {
             text-align: left;
         }
     }
-    .content{
+
+    .content {
         padding: 0%;
     }
+
     .prod-categray {
         height: 1rem;
         line-height: 1rem;
@@ -172,4 +313,5 @@ export default {
             padding-right: 1rem;
         }
     }
-}</style>
+}
+</style>