1
This commit is contained in:
237
src/components/CompareModal.vue
Normal file
237
src/components/CompareModal.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<select-modal
|
||||
class="good-info-modal"
|
||||
title="洗护对比图"
|
||||
@close="$emit('close', false)"
|
||||
>
|
||||
<view class="compare-content">
|
||||
<view class="compare-wrapper">
|
||||
<text class="fs-36 app-fc-normal">洗护前</text>
|
||||
<view class="flex-row-start imgs-list">
|
||||
<view
|
||||
class="imgs-item"
|
||||
:class="{ 'no-margin': index % 3 === 2 }"
|
||||
v-for="(item, index) in beforeImgs"
|
||||
:key="index"
|
||||
@click="selectItem(item, index)"
|
||||
>
|
||||
<image class="item-img" :src="item.fullUrl" mode="aspectFit" />
|
||||
<image
|
||||
v-if="selectList.some(v => v.url === item.url)"
|
||||
class="select-icon"
|
||||
src="@/static/images/cart_checked.png"
|
||||
/>
|
||||
<view v-else class="select-icon un-select"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="fs-36 app-fc-normal">洗护后</text>
|
||||
<view class="flex-row-start imgs-list">
|
||||
<view
|
||||
class="imgs-item"
|
||||
:class="{ 'no-margin': index % 3 === 2 }"
|
||||
v-for="(item, index) in afterImgs"
|
||||
:key="index"
|
||||
@click="selectItem(item, index)"
|
||||
>
|
||||
<image class="item-img" :src="item.fullUrl" mode="aspectFit" />
|
||||
<image
|
||||
v-if="selectList.some(v => v.url === item.url)"
|
||||
class="select-icon"
|
||||
src="@/static/images/cart_checked.png"
|
||||
/>
|
||||
<view v-else class="select-icon un-select"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="flex-row-between compare-footer"
|
||||
v-if="isCanRemark || isCanShare"
|
||||
>
|
||||
<!-- <view
|
||||
v-if="isCanRemark"
|
||||
class="flex-center fs-30 app-fc-white confirm-btn left"
|
||||
@click="submit"
|
||||
>
|
||||
添加到评论
|
||||
</view> -->
|
||||
|
||||
<view
|
||||
v-if="isCanShare"
|
||||
class="flex-center fs-30 app-fc-white confirm-btn"
|
||||
@click="shareToCommunity"
|
||||
>
|
||||
一键转发到宠圈
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</select-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectModal from "@/components/select-modal.vue";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
isCanShare: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCanRemark: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
beforeImgs: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
afterImgs: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectImgs: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectList: [], // 选中的图片
|
||||
};
|
||||
},
|
||||
components: {
|
||||
SelectModal,
|
||||
},
|
||||
watch: {
|
||||
selectImgs: {
|
||||
handler(val) {
|
||||
this.selectList = val;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (!this.selectList?.length) {
|
||||
uni.showToast({
|
||||
title: "请选择图片",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$emit("add", this.selectList);
|
||||
},
|
||||
shareToCommunity() {
|
||||
const front = this.selectList
|
||||
.filter((v) => this.beforeImgs.some((item) => v.url === item.url))
|
||||
.map((v) => v.url)
|
||||
const end = this.selectList
|
||||
.filter((v) => this.afterImgs.some((item) => v.url === item.url))
|
||||
.map((v) => v.url)
|
||||
if (!front.length) {
|
||||
uni.showToast({
|
||||
title: "请至少选择一张洗护前图片",
|
||||
icon: "none",
|
||||
});
|
||||
return
|
||||
}
|
||||
if (!end.length) {
|
||||
uni.showToast({
|
||||
title: "请至少选择一张洗护后图片",
|
||||
icon: "none",
|
||||
});
|
||||
return
|
||||
}
|
||||
this.$emit("share", {
|
||||
front: front,
|
||||
end: end,
|
||||
});
|
||||
},
|
||||
selectItem(item) {
|
||||
const index = this.selectList.findIndex((v) => v.url === item.url);
|
||||
if (index < 0) {
|
||||
this.selectList.push(item);
|
||||
} else {
|
||||
this.selectList.splice(index, 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
.selected-modal .model-container {
|
||||
background-color: #fff0f5;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-content {
|
||||
padding: 48rpx 32rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
.compare-wrapper {
|
||||
max-height: 60vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.imgs-list {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.imgs-item {
|
||||
width: 204rpx;
|
||||
height: 204rpx;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
margin-right: 14rpx;
|
||||
margin-bottom: 14rpx;
|
||||
background: #fff;
|
||||
|
||||
&.no-margin {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
|
||||
.un-select {
|
||||
border: 3rpx solid #beb5ba;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compare-footer {
|
||||
background: #fff;
|
||||
padding: 20rpx 0 0;
|
||||
|
||||
.confirm-btn {
|
||||
flex: 1;
|
||||
height: 90rpx;
|
||||
border-radius: 90rpx;
|
||||
background: $app_color_main;
|
||||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||||
color: #fff;
|
||||
|
||||
&.left {
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user