sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品对比

master
gongfuxiang 2025-05-09 23:54:56 +08:00
parent f32db940d8
commit d6522c3a0b
3 changed files with 273 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/plugins/goodscompare/components/goods-compare/goods-compare.vue
View File

@ -17,16 +17,14 @@
<view class="data-list">
<block v-for="(item, index) in data_list" :key="index">
<view class="goods-item flex-row align-c bs-bb padding-main pr wh-auto cp">
<view @tap="selected_event" :data-index="index" class="cart-selected pr z-i">
<view @tap="selected_event" :data-index="index" class="selected pr z-i">
<iconfont :name="'icon-zhifu-' + (item.selected || false ? 'yixuan' : 'weixuan')" size="40rpx" :color="item.selected || false ? theme_color : '#999'"></iconfont>
</view>
<view class="item oh padding-left-main flex-1 flex-row">
<image class="goods-image fl radius br" :src="item.images" :data-value="item.goods_url" @tap="url_event" mode="aspectFill"></image>
<view class="goods-base padding-left-sm flex-1 pr">
<view :data-value="item.goods_url" @tap="url_event" class="cp">
<view class="cart-goods-title multi-text margin-bottom-sm fw-b">{{ item.title }}</view>
</view>
<view class="sales-price">{{item.symbol}}{{item.price}}</view>
<view class="goods-title multi-text cp" :data-value="item.goods_url" @tap="url_event">{{ item.title }}</view>
<view class="sales-price margin-top-sm">{{item.symbol}}{{item.price}}</view>
<view class="cr-red text-size-xs pa right-0 bottom-0" :data-index="index" @tap="remove_event">{{$t('common.remove')}}</view>
</view>
</view>

40
pages/plugins/goodscompare/index/index.css Normal file
View File

@ -0,0 +1,40 @@
.table-container .head {
width: 240rpx;
padding-left: 20rpx;
}
.table-container .content,
.table-container .goods-info .goods-title,
.table-container .goods-info .goods-image {
width: 300rpx;
}
.table-container .goods-info .goods-image {
height: 300rpx;
}
.table-container .sticky {
position: sticky;
left: 0;
z-index: 1;
-webkit-box-shadow: 10rpx 0 20rpx rgb(145 145 145 / 20%);
-moz-box-shadow: 10rpx 0 20rpx rgb(145 145 145 / 20%);
box-shadow: 10rpx 16rpx 20rpx rgb(145 145 145 / 20%);
}
.table-container .sticky,
.table-container .group,
.table-container .group .content {
background: #f2f2f2;
}
.table-container .group:not(:first-child) {
border-left: 2rpx solid #f2f2f2 !important;
}
.table-container .head,
.table-container .content {
height: 44rpx;
}
.table-container .head.goods_score,
.table-container .content.goods_score{
height: 90rpx;
}
.table-container .table-header .head,
.table-container .table-header .goods-info {
height: 428rpx;
}

234
pages/plugins/goodscompare/index/index.vue
View File

@ -1,8 +1,234 @@
<template>
</template>
<template>
<view :class="theme_view">
<view v-if="data_list_loding_status == 3" class="table-container wh-auto oh">
<scroll-view :scroll-x="true" class="scroll-view-horizontal">
<view class="table-header">
<view class="dis-inline-block">
<view class="padding-sm padding-bottom dis-inline-block sticky">
<view class="head single-text">
<view class="margin-top-xxxxl padding-top-xxxxl">
<checkbox-group @change="highlight_event">
<label>
<checkbox value="1" style="transform:scale(0.7)" />
<text class="va-m">高亮不同项</text>
</label>
</checkbox-group>
</view>
<view class="margin-top">
<checkbox-group @change="identical_event">
<label>
<checkbox value="1" style="transform:scale(0.7)" />
<text class="va-m">隐藏相同项</text>
</label>
</checkbox-group>
</view>
</view>
</view>
<block v-for="(item, index) in data.goods" :key="index">
<view class="goods-info padding-sm br-l dis-inline-block">
<image class="goods-image radius" :src="item.images" mode="aspectFit" :data-value="item.goods_url" @tap="url_event"></image>
<view class="goods-title multi-text cp" :data-value="item.goods_url" @tap="url_event">{{item.title}}</view>
<view class="sales-price margin-top-sm">{{item.show_price_symbol}}{{item.price}}{{item.show_price_unit}}</view>
</view>
</block>
</view>
</view>
<block v-for="(item, index) in data.head" :key="index">
<view class="table-body">
<view class="dis-inline-block">
<view class="group padding-sm br-t dis-inline-block sticky">
<view class="head single-text fw-b">{{item.name}}</view>
</view>
<block v-for="(gv, gk) in data.goods" :key="gk">
<view class="group padding-sm br-t br-l dis-inline-block">
<view class="content single-text"></view>
</view>
</block>
</view>
</view>
<block v-for="(items, indexs) in item.data" :key="indexs">
<view class="table-body">
<view class="dis-inline-block">
<view class="padding-sm br-t dis-inline-block sticky">
<view class="head single-text" :class="indexs">{{items}}</view>
</view>
<block v-for="(gv, gk) in data.goods" :key="gk">
<view class="padding-sm br-t br-l dis-inline-block">
<view v-if="item.key == 'specifications'" class="content single-text" :class="indexs">
<text v-if="(gv['specifications'] || null) != null && (gv['specifications'][indexs] || null)">{{gv['specifications'][indexs]}}</text>
<text v-else class="cr-grey-d">-</text>
</view>
<view v-else-if="item.key == 'parameters'" class="content single-text" :class="indexs">
<text v-if="(gv['parameters'] || null) != null && (gv['parameters'][indexs] || null)">{{gv['parameters'][indexs]}}</text>
<text v-else class="cr-grey-d">-</text>
</view>
<block v-else>
<view v-if="indexs == 'goods_score'" class="content single-text" :class="indexs">
<block v-if="(gv[indexs] || null) != null && gv[indexs]['score'] != undefined">
<view>
<text class="cr-grey text-size-xs">好评度</text>
<text class="cr-red">
<text class="text-size-lg fw-b">{{gv[indexs]['score']}}</text>
<text>%</text>
<text v-if="gv[indexs]['avg'] != undefined" class="text-size-xs margin-left-lg">
<text class="cr-grey">评分</text>
<text>{{gv[indexs]['avg']}}</text>
</text>
</text>
</view>
<view v-if="gv[indexs]['count'] != undefined" class="text-size-xs">
<text class="cr-grey">累计评价</text>
<text class="fw-b">{{gv[indexs]['count']}}</text>
<text class="cr-grey">条</text>
</view>
</block>
</view>
<view v-else-if="indexs == 'give_integral'" class="content single-text" :class="indexs">
<text class="cr-grey text-size-xs">售价</text>
<text>{{gv[indexs]}}%比例</text>
</view>
<view v-else-if="indexs == 'inventory'" class="content single-text" :class="indexs">{{gv[indexs]}}{{gv['inventory_unit']}}</view>
<view v-else class="content single-text" :class="indexs">{{gv[indexs]}}</view>
</block>
</view>
</block>
</view>
</view>
</block>
</block>
</scroll-view>
</view>
<block v-else>
<component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
</block>
<!-- 公共 -->
<component-common ref="common"></component-common>
</view>
</template>
<script>
const app = getApp();
import componentCommon from '@/components/common/common';
import componentNoData from '@/components/no-data/no-data';
import componentBottomLine from '@/components/bottom-line/bottom-line';
export default {
data() {
return {
theme_view: app.globalData.get_theme_value_view(),
data_list_loding_status: 1,
data_list_loding_msg: '',
data_bottom_line_status: false,
params: null,
data: {}
};
},
components: {
componentCommon,
componentNoData,
componentBottomLine
},
onLoad(params) {
// 调用公共事件方法
app.globalData.page_event_onload_handle(params);
// 设置参数
this.setData({
params: app.globalData.launch_params_handle(params),
});
// 数据加载
this.init();
},
onShow() {
// 调用公共事件方法
app.globalData.page_event_onshow_handle();
// 公共onshow事件
if ((this.$refs.common || null) != null) {
this.$refs.common.on_show();
}
},
// 下拉刷新
onPullDownRefresh() {
this.get_data();
},
methods: {
// 初始化
init() {
var user = app.globalData.get_user_info(this, 'init');
if (user != false) {
this.get_data();
} else {
this.setData({
data_list_loding_status: 0,
data_bottom_line_status: false,
});
}
},
// 获取数据
get_data() {
uni.request({
url: app.globalData.get_request_url('index', 'index', 'goodscompare'),
method: 'POST',
data: this.params,
dataType: 'json',
success: (res) => {
uni.stopPullDownRefresh();
if (res.data.code == 0) {
this.setData({
data_bottom_line_status: true,
data_list_loding_msg: '',
data_list_loding_status: 3,
data: res.data.data || {},
});
} else {
this.setData({
data_list_loding_status: 0,
data_list_loding_msg: res.data.msg,
});
}
},
fail: () => {
uni.stopPullDownRefresh();
this.setData({
data_list_loding_msg: this.$t('common.internet_error_tips'),
data_list_loding_status: 2,
});
},
});
},
<script>
</script>
// 高亮不同项
highlight_event(e) {
if(e.detail.value.length > 0) {
console.log('选择');
} else {
console.log('取消');
}
},
// 隐藏相同项
identical_event(e) {
if(e.detail.value.length > 0) {
console.log('选择');
} else {
console.log('取消');
}
},
// url事件
url_event(e) {
app.globalData.url_event(e);
}
},
};
</script>
<style>
@import './index.css';
</style>