wangxiaowei/jianbing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善商品数据提交

Browse Source
This commit is contained in:
wangxiaowei
2025-05-10 18:09:35 +08:00
parent 9cd1e5eaca
commit 00ab75efbc
177 changed files with 3124 additions and 2928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
components/shop-spec/shop-spec.vue
View File

@ -3,48 +3,35 @@
<u-popup v-model="showPop" mode="center" :border-radius="16" @close="close">
<view class="bg-white spec">
<view class="shop-title bold-600 u-padding-left-40 w-full">商品标题</view>
<view class="u-m-l-40">
<scroll-view scroll-y="true" scroll-with-animation="true" style="height: 500rpx;">
<view>
<view class="attr nr u-m-t-20 u-m-b-20">口味</view>
<scroll-view scroll-y="true" scroll-with-animation="true" style="height: 480rpx;">
<view class="u-m-l-40">
<view v-for="(item, index1) in specBck" :key="index1">
<view class="attr nr u-m-t-20 u-m-b-20">{{ item.name }}</view>
<view class="row wrap">
<view class="attr-list active">要葱</view>
<view class="attr-list">要香菜</view>
<view class="attr-list">葱和香菜多要</view>
<view class="attr-list">葱和香菜不要</view>
<view
v-for="(attr, index2) in item.spec_value" :key="index2"
@click="chooseSpec(item, index1, index2, attr)"
:class="item.spec_value[index2].is_select ? 'attr-list active' : 'attr-list'"
>
{{ attr.value }}
</view>
</view>
</view>
<view>
<view class="attr nr u-m-t-20 u-m-b-20">口味</view>
<view class="row wrap">
<view class="attr-list">要葱</view>
<view class="attr-list">要香菜</view>
<view class="attr-list">葱和香菜多要</view>
<view class="attr-list">葱和香菜不要</view>
</view>
</view>
<view>
<view class="attr nr u-m-t-20 u-m-b-20">口味</view>
<view class="row wrap">
<view class="attr-list">要葱</view>
<view class="attr-list">要香菜</view>
<view class="attr-list">葱和香菜多要</view>
<view class="attr-list">葱和香菜不要</view>
</view>
</view>
</scroll-view>
</view>
</view>
</scroll-view>
<view class="mt20">
<view class="u-m-l-40">已选规格：</view>
<view class="row u-row-center mt20">
<view class="u-m-l-40 u-flex u-flex-wrap">已选规格：
<view v-for="(item, index) in selectedSpec" :key="index" class="current">
{{ item.name }}
</view>
</view>
<view class="row u-row-center mt20 u-p-b-20">
<view class="w-40 mr10">
<u-button @click="mobileLogin" hover-class="none" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">取消</u-button>
<u-button @click="close" hover-class="none" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">取消</u-button>
</view>
<view class="w-40 ml10">
<u-button @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">确定</u-button>
<u-button @click="confirm" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">确定</u-button>
</view>
</view>
</view>
@ -60,17 +47,73 @@
value: {
type: Boolean,
required: true
},
spec: {
type: [Array, Object],
default: () => [{}]
}
},
data() {
return {
mobile: ''
mobile: '',
specBck: [],
selectedSpec: [],
};
},
methods: {
// 关闭弹窗
close() {
this.showPop = false
this.$emit('close')
},
// 选择规格
chooseSpec(item, index1, index2, attr) {
if (item.name == '辣度') {
// 规格-单选
item.spec_value.map((i, k) => {
if(k === index2) {
if (item.spec_value[index2].is_select) {
this.$set(i, 'is_select', false)
this.selectedSpec = this.selectedSpec.filter(it => it.id !== item.spec_value[index2].id)
} else {
this.$set(i, 'is_select', true)
this.selectedSpec.push({
id: item.spec_value[index2].id,
name: item.spec_value[index2].value
})
}
} else {
this.$set(i, 'is_select', false)
this.selectedSpec.map((se, index) => {
if (se.id == i.id) {
this.selectedSpec.splice(index, 1)
}
})
}
})
} else {
// 规格-复选
if (item.spec_value[index2].is_select) {
this.$set(item.spec_value[index2], 'is_select', false)
this.selectedSpec = this.selectedSpec.filter(i => i.id !== item.spec_value[index2].id)
} else {
// 选中
this.$set(item.spec_value[index2], 'is_select', true)
this.selectedSpec.push({
id: item.spec_value[index2].id,
name: item.spec_value[index2].value
})
}
}
},
// 确认选择的规格
confirm() {
this.showPop = false
this.$emit('confirm', {
spec: this.selectedSpec
})
}
},
computed: {
@ -82,6 +125,12 @@
this.$emit('input', val)
}
}
},
watch: {
spec(val) {
// 创建副本
this.specBck = val
}
}
};
</script>
@ -89,7 +138,6 @@
<style lang="scss">
.spec {
width: 600rpx;
height: 800rpx;
.shop-title {
height: 90rpx;
@ -119,5 +167,18 @@
.w-40 {
width: 40%;
}
.current:first-child {
margin-left: 0;
}
.current {
color: #212425;
background-color: #F9F9F9;
margin: 0 10rpx 10rpx 0;
border-radius: 16rpx;
border: 2rpx solid #F6F6F7;
padding: 20rpx;
}
}
</style>