|
|
@@ -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>
|
