342 lines
9.5 KiB
Vue
342 lines
9.5 KiB
Vue
<template>
|
|
<uni-popup ref="spec" type="bottom" :maskClick="true" class="popup">
|
|
<view class="wrap" @tap.stop.prevent @touchmove.stop.prevent>
|
|
<view class="flex justify-between">
|
|
<view class="margin-right">
|
|
<image class="block-150 radius bg-gray" mode="aspectFill" :src="thumb" @click="preview(thumb)"></image>
|
|
</view>
|
|
<view class="flex-sub flex flex-direction justify-end">
|
|
<view class="text-theme text-bold">
|
|
<text class="text-price">{{ price }}</text>
|
|
</view>
|
|
<view class="text-sm text-999 margin-top-xs">库存 {{ stock }}</view>
|
|
<view style="height: 80rpx" class="text-df text-666 margin-top-xs text-cut-2">
|
|
<text v-if="skuName">已选择: {{ skuName }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="close-box">
|
|
<text class="cuIcon-close" @tap="close"></text>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="speclist-max-height" scroll-y="true" @touchmove.stop>
|
|
<view class="margin-top" v-if="speclist.length > 0">
|
|
<block v-for="(item, index) in speclist" :key="index">
|
|
<view>
|
|
<view class="text-sm text-333 text-bold padding-bottom-sm">{{ item.name }}</view>
|
|
<view class="item">
|
|
<template v-for="(item2, index2) in item.spec_value">
|
|
<template v-if="isDisable(index, item2.id)">
|
|
<view :key="index2" class="item-tag" :class="{ active: selectSkuId[index] == item2.id }" @tap="selectSpec(index, item2)">
|
|
{{ item2.item }}
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view :key="index2" class="item-tag disable">
|
|
{{ item2.item }}
|
|
</view>
|
|
</template>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="margin-top">
|
|
<view class="flex justify-between align-center padding-tb-sm">
|
|
<view class="text-333 text-sm text-bold">数量</view>
|
|
<uni-number-box v-if="limit" :value="number" :min="1" :max="Number(limit)" @change="setnumber" :step="1"></uni-number-box>
|
|
<uni-number-box v-else :value="number" :min="1" :max="Number(stock)" @change="setnumber" :step="1"></uni-number-box>
|
|
</view>
|
|
<view class="text-right text-theme text-sm" v-if="limit > 0">此商品限购{{ limit }}件</view>
|
|
</view>
|
|
<view class="margin-top flex round overHidden">
|
|
<view v-if="type == 'all' || type == 'cart'" class="flex-sub btn color1" @tap.stop="handleSubmit('addCart')">加入购物车</view>
|
|
<view v-if="type == 'all' || type == 'buy'" class="flex-sub btn color2" @tap.stop="handleSubmit('buyNow')"><text>立即抢购</text></view>
|
|
<view v-if="type == 'confirm'" class="flex-sub btn color2" @tap.stop="handleSubmit('confirm')">
|
|
<text>确认</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'benben-specs-popup',
|
|
props: {
|
|
// spu规格列表
|
|
speclist: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
// sku列表
|
|
skulist: {
|
|
type: [Array, Object],
|
|
default: () => [],
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
//选中的规格
|
|
skuId: {
|
|
type: [String, Number],
|
|
default: 0,
|
|
},
|
|
skuName: {
|
|
type: [String, Number],
|
|
default: 0,
|
|
},
|
|
price: {
|
|
type: [String, Number],
|
|
default: 0,
|
|
},
|
|
marketPrice: {
|
|
type: [String, Number],
|
|
default: 0,
|
|
},
|
|
memberPrice: {
|
|
type: [String, Number],
|
|
default: 0,
|
|
},
|
|
stock: {
|
|
type: [String, Number],
|
|
default: 0,
|
|
},
|
|
number: {
|
|
type: [String, Number],
|
|
default: 1,
|
|
},
|
|
thumb: {
|
|
type: [String],
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
selectSkuId: [],
|
|
selectSkuName: [],
|
|
type: '',
|
|
flag: false,
|
|
}
|
|
},
|
|
computed: {
|
|
skulistArr() {
|
|
let skulistArr = []
|
|
Object.values(this.skulist).map((item) => {
|
|
skulistArr.push(item.key.split('_'))
|
|
})
|
|
return skulistArr
|
|
},
|
|
},
|
|
watch: {
|
|
skulist: {
|
|
//监听规格改变
|
|
handler(value) {
|
|
this.init()
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
// 初始化
|
|
init() {
|
|
let skuGoods = Object.values(this.skulist).find((item) => item.sku_id == this.skuId)
|
|
if (skuGoods) {
|
|
this.selectSkuId = skuGoods.key.split('_')
|
|
} else {
|
|
this.selectSkuId = new Array(this.speclist.length)
|
|
}
|
|
this.selectSkuId.map((item, index) => {
|
|
if (!item) return
|
|
let is_upload_image = this.speclist[index].is_upload_image || '0'
|
|
if (is_upload_image == '0') return
|
|
let selectItem = this.speclist[index].spec_value.find((val) => val.id == item)
|
|
this.$emit('update:thumb', selectItem.thumb)
|
|
})
|
|
this.getSelectSkuName()
|
|
this.selectGoods()
|
|
},
|
|
getSelectSkuName() {
|
|
let selectSkuName = new Array(this.speclist.length)
|
|
this.selectSkuId.map((item, i) => {
|
|
if (!item) return
|
|
let specitem = this.speclist[i].spec_value.find((val) => val.id == item)
|
|
selectSkuName[i] = (specitem && specitem.item) || ''
|
|
})
|
|
selectSkuName = selectSkuName.filter((item) => item)
|
|
this.$emit('update:sku-name', selectSkuName.join(','))
|
|
},
|
|
// 判断是否禁用
|
|
isDisable(index, id) {
|
|
let isSelecArr = []
|
|
this.selectSkuId.map((item, i) => {
|
|
if (i !== index && item) {
|
|
isSelecArr.push({
|
|
index: i,
|
|
id: item,
|
|
})
|
|
}
|
|
})
|
|
if (!isSelecArr.length) return true
|
|
let skulistArr = this.skulistArr.filter((item) => {
|
|
let isSelec = isSelecArr.every((selecitem) => {
|
|
return item[selecitem.index] == selecitem.id
|
|
})
|
|
return isSelec && item[index] == id
|
|
})
|
|
return skulistArr.length
|
|
},
|
|
// 点击添加购物车
|
|
handleSubmit(type) {
|
|
let emptyIndex = this.selectSkuId.findIndex((item) => !item)
|
|
//判断多规格商品是否选择了规格
|
|
if (this.selectSkuId.length && emptyIndex != -1) return this.$message.info(`请选择${this.speclist[emptyIndex].name}`)
|
|
if (this.stock <= 0) return this.$message.info(`暂无库存`)
|
|
this.$emit(type)
|
|
},
|
|
// 数量改变
|
|
setnumber(e) {
|
|
this.$emit('update:number', e)
|
|
},
|
|
// 点击规格
|
|
selectSpec(index, item) {
|
|
let is_upload_image = this.speclist[index].is_upload_image || '0'
|
|
if (this.selectSkuId[index] == item.id) {
|
|
this.$set(this.selectSkuId, index, '')
|
|
} else {
|
|
this.$set(this.selectSkuId, index, item.id)
|
|
}
|
|
if (is_upload_image == '1') {
|
|
this.$emit('update:thumb', item.thumb)
|
|
}
|
|
this.getSelectSkuName()
|
|
this.selectGoods()
|
|
},
|
|
// 获取选中商品的信息
|
|
selectGoods() {
|
|
let selectSkuId = this.selectSkuId.filter((item) => item)
|
|
if (selectSkuId.length !== Object.keys(this.speclist).length) return
|
|
selectSkuId = selectSkuId.join('_')
|
|
let skuGoods = Object.values(this.skulist).find((item) => item.key == selectSkuId)
|
|
if (skuGoods) {
|
|
this.$emit('update:market-price', skuGoods.market_price)
|
|
this.$emit('update:member-price', skuGoods.member_price)
|
|
this.$emit('update:price', skuGoods.shop_price)
|
|
this.$emit('update:stock', skuGoods.stock)
|
|
if (+skuGoods.stock < +this.number) {
|
|
this.$emit('update:number', skuGoods.stock)
|
|
}
|
|
this.$emit('update:sku-id', skuGoods.sku_id)
|
|
if (skuGoods.thumb) {
|
|
this.$emit('update:thumb', skuGoods.thumb)
|
|
}
|
|
}
|
|
},
|
|
// 打开弹窗
|
|
open(type) {
|
|
this.type = type || 'all'
|
|
this.init()
|
|
this.$refs.spec.open()
|
|
},
|
|
// 关闭弹窗
|
|
close() {
|
|
this.$refs.spec.close()
|
|
},
|
|
// 规格预览图片
|
|
preview(urls) {
|
|
uni.previewImage({
|
|
current: urls,
|
|
urls: [urls],
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrap {
|
|
padding-bottom: 0;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
.close-box {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.item-tag {
|
|
display: inline-block;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
background-color: #f5f5f5;
|
|
padding: 12rpx 24rpx;
|
|
border-radius: 100rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
border: 2rpx solid #f5f5f5;
|
|
}
|
|
|
|
.item-tag.active {
|
|
background-color: #fff2ef;
|
|
color: $theme;
|
|
border-color: $theme;
|
|
}
|
|
|
|
.item-tag.disable {
|
|
color: #cccccc !important;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.block-150 {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
min-width: 150rpx;
|
|
min-height: 150rpx;
|
|
}
|
|
.color1 {
|
|
background-color: #feb14d;
|
|
}
|
|
.color2 {
|
|
background: $bgtheme;
|
|
}
|
|
|
|
.overHidden {
|
|
overflow: hidden;
|
|
}
|
|
|
|
::v-deep .popup .uni-popup__wrapper-box {
|
|
max-height: 100% !important;
|
|
}
|
|
|
|
.speclist-max-height {
|
|
// #ifndef MP-WEIXIN
|
|
max-height: 800rpx;
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
max-height: 650rpx;
|
|
// #endif
|
|
}
|
|
</style>
|