wangxiaowei/wanjiashangchao-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化商家端

Browse Source
This commit is contained in:
wangxiaowei
2025-04-30 14:08:39 +08:00
commit 68b408b1e7
568 changed files with 118884 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
components/benben-specs-popup/benben-specs-popup.vue Normal file
View File

@ -0,0 +1,341 @@
<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>