1.优化
sws
parent
670cfe0e73
commit
7fbea97d56
|
|
@ -1,83 +1,98 @@
|
|||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<view v-if="(data_list || null) != null && data_list.length > 0" class="plugins-binding-data-list oh">
|
||||
<block v-for="(item, index) in data_list" :key="index">
|
||||
<view class="item border-radius-main bg-white padding-main oh pr spacing-mb">
|
||||
<view class="oh" :data-value="item.url" @tap="url_event">
|
||||
<image :src="item.images" mode="aspectFit" class="images fl dis-block border-radius-main"></image>
|
||||
<view class="base-right fr bs-bb">
|
||||
<view class="fw-b text-size cr-base single-text">{{item.title}}</view>
|
||||
<view class="sales-price margin-top-lg single-text">{{propCurrencySymbol}}{{item.estimate_price}}</view>
|
||||
<view v-if="(item.estimate_discount_price || 0) != 0" class="margin-top-sm single-text">
|
||||
<text class="discount-icon cr-white text-size-xs">节省</text>
|
||||
<text class="cr-green">{{propCurrencySymbol}}{{item.estimate_discount_price}}</text>
|
||||
<view class="oh flex-row align-c" :data-value="item.url" @tap="url_event">
|
||||
<image :src="item.images" mode="aspectFit" class="images dis-block border-radius-main"></image>
|
||||
<view class="flex-1 flex-width flex-col jc-sb">
|
||||
<view class="base-right bs-bb padding-left-main">
|
||||
<view class="fw-b text-size-lg cr-base single-text">{{ item.title }}</view>
|
||||
<view class="sales-price margin-top-main single-text">
|
||||
<text class="text-size-xs">
|
||||
{{ propCurrencySymbol }}
|
||||
</text>
|
||||
<text class="text-size-lg fw-b">
|
||||
{{ item.estimate_price }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="(item.estimate_discount_price || 0) != 0" class="margin-top-sm single-text flex-row align-c">
|
||||
<text class="discount-icon cr-white text-size-xs">节省</text>
|
||||
<view class="cr-green single-text">
|
||||
<text class="text-size-xs">
|
||||
{{ propCurrencySymbol }}
|
||||
</text>
|
||||
<text class="text-size">
|
||||
{{ item.estimate_discount_price }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tr margin-top-xl">
|
||||
<button type="default" size="mini" class="br-main bg-main cr-white round buy-submit">{{item.type_name}}购买</button>
|
||||
<view class="self-e">
|
||||
<button type="default" size="mini" class="br-main bg-main cr-white round buy-submit">{{ item.type_name }}购买</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="'binding-goods-list border-radius-main margin-top-lg '+((item.is_home_show_goods || 0) == 1 ? 'expand' : '')" :style="'--height: '+((Math.ceil(item.goods.length/2)*132)+20)+'rpx'">
|
||||
<view class="binding-goods-list border-radius-main margin-top-main oh" :style="'height: ' + ((item.is_home_show_goods || 0) == 1 ? Math.ceil(item.goods.length / 2) * 146 + 36 : '0') + 'rpx'">
|
||||
<view class="padding-horizontal-main padding-top-lg padding-bottom-sm oh">
|
||||
<block v-for="(gv, gi) in item.goods" :key="gi">
|
||||
<view class="goods-item oh margin-top-sm margin-bottom-lg" :data-value="gv.goods_url" @tap="url_event">
|
||||
<image :src="gv.images" mode="aspectFit" class="goods-images fl dis-block radius"></image>
|
||||
<view class="goods-right fr bs-bb">
|
||||
<view class="single-text text-size-sm">{{gv.title}}</view>
|
||||
<view class="single-text sales-price text-size-xs">{{propCurrencySymbol}}{{gv.price}}</view>
|
||||
<view v-if="(gv.discount_price || null) != null" class="single-text cr-green text-size-xs">节省{{propCurrencySymbol}}{{gv.discount_price}}</view>
|
||||
<view class="single-text text-size-sm">{{ gv.title }}</view>
|
||||
<view class="single-text sales-price text-size-xs">{{ propCurrencySymbol }}{{ gv.price }}</view>
|
||||
<view v-if="(gv.discount_price || null) != null" class="single-text cr-green text-size-xs">节省{{ propCurrencySymbol }}{{ gv.discount_price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white padding-horizontal-main padding-bottom-main wh-auto pa bs-bb bottom-elastic" :data-index="index" @tap="item_more_goods_event">
|
||||
<view :class="'padding-top-main arrow-bottom '+((item.is_home_show_goods || 0) != 1 ? 'br-t-dashed' : '')">
|
||||
<view class="cr-grey text-size-xs">{{(item.is_home_show_goods || 0) == 1 ? '收起' : '展开'}}{{item.type_name}}商品</view>
|
||||
<view class="bg-white padding-top-main wh-auto bs-bb bottom-elastic" :class="(item.is_home_show_goods || 0) != 1 ? 'br-t-dashed' : ''" :data-index="index" @tap="item_more_goods_event">
|
||||
<view class="flex-row jc-sb align-c">
|
||||
<view class="cr-grey-9 text-size-xs">{{ (item.is_home_show_goods || 0) == 1 ? '收起' : '展开' }}{{ item.type_name }}商品</view>
|
||||
<iconfont :name="(item.is_home_show_goods || 0) == 1 ? 'icon-fenlei-top' : 'icon-mendian-jiantou2'" size="24rpx" color="#666"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config: {},
|
||||
data_list: []
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
data_list: [],
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
props: {
|
||||
// 价格符号
|
||||
propCurrencySymbol: {
|
||||
type: String,
|
||||
default: app.globalData.data.currency_symbol
|
||||
default: app.globalData.data.currency_symbol,
|
||||
},
|
||||
propConfig: {
|
||||
type: [String,Object],
|
||||
default: null
|
||||
type: [String, Object],
|
||||
default: null,
|
||||
},
|
||||
propDataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
// 属性值改变监听
|
||||
watch: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
// 页面被展示
|
||||
created: function(e) {
|
||||
created: function (e) {
|
||||
var config = ((this.propConfig || null) == null ? app.globalData.get_config('plugins_base.binding.data') : this.propConfig) || {};
|
||||
this.setData({
|
||||
config: config,
|
||||
data_list: this.propDataList
|
||||
data_list: this.propDataList,
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// url事件
|
||||
url_event(e) {
|
||||
|
|
@ -88,27 +103,21 @@
|
|||
item_more_goods_event(e) {
|
||||
var index = e.currentTarget.dataset.index;
|
||||
var temp_data = this.data_list;
|
||||
temp_data[index]['is_home_show_goods'] = (parseInt(temp_data[index]['is_home_show_goods'] || 0) == 1) ? 0 : 1;
|
||||
this.setData({data_list: temp_data});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.plugins-binding-data-list .item {
|
||||
padding-bottom: 76rpx;
|
||||
}
|
||||
temp_data[index]['is_home_show_goods'] = parseInt(temp_data[index]['is_home_show_goods'] || 0) == 1 ? 0 : 1;
|
||||
this.setData({ data_list: temp_data });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.plugins-binding-data-list .item .images {
|
||||
width: 232rpx;
|
||||
height: 232rpx !important;
|
||||
}
|
||||
.plugins-binding-data-list .item .base-right {
|
||||
width: calc(100% - 252rpx);
|
||||
width: 256rpx;
|
||||
height: 256rpx !important;
|
||||
}
|
||||
.plugins-binding-data-list .item .base-right .discount-icon {
|
||||
border-top-right-radius: 30rpx;
|
||||
border-bottom-left-radius: 30rpx;
|
||||
background-image: linear-gradient(45deg,#a3f9a3,#248828,#8bc34a,#d2374c,#9c27b0);
|
||||
background-image: linear-gradient(45deg, #a3f9a3, #248828, #8bc34a, #d2374c, #9c27b0);
|
||||
background-size: 400%;
|
||||
animation: gradient 5s ease infinite;
|
||||
padding: 0 16rpx;
|
||||
|
|
@ -118,12 +127,8 @@
|
|||
line-height: 46rpx;
|
||||
}
|
||||
.plugins-binding-data-list .item .binding-goods-list {
|
||||
background: #F8F8F8;
|
||||
background: #f8f8f8;
|
||||
transition: height 0.25s ease-in-out;
|
||||
height: 0;
|
||||
}
|
||||
.plugins-binding-data-list .item .binding-goods-list.expand {
|
||||
height: var(--height);
|
||||
}
|
||||
.plugins-binding-data-list .item .binding-goods-list .goods-item {
|
||||
width: calc(50% - 15rpx);
|
||||
|
|
@ -156,5 +161,5 @@
|
|||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -185,200 +185,200 @@
|
|||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const app = getApp();
|
||||
import componentBadge from "../../components/badge/badge";
|
||||
import componentGoodsBuy from "../../components/goods-buy/goods-buy";
|
||||
import componentCartParaCurve from "../../components/cart-para-curve/cart-para-curve";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: null,
|
||||
is_show_cart: false,
|
||||
themeColor: app.globalData.get_theme_color(),
|
||||
grid_btn_config: {
|
||||
bg_color: "#D8D8D8",
|
||||
color: "#fff",
|
||||
name: "暂无货源",
|
||||
disabled: false,
|
||||
border_radius: "24rpx",
|
||||
padding: "6rpx 16rpx",
|
||||
font_size: "24rpx",
|
||||
const app = getApp();
|
||||
import componentBadge from '../../components/badge/badge';
|
||||
import componentGoodsBuy from '../../components/goods-buy/goods-buy';
|
||||
import componentCartParaCurve from '../../components/cart-para-curve/cart-para-curve';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: null,
|
||||
is_show_cart: false,
|
||||
themeColor: app.globalData.get_theme_color(),
|
||||
grid_btn_config: {
|
||||
bg_color: '#D8D8D8',
|
||||
color: '#fff',
|
||||
name: '暂无货源',
|
||||
disabled: false,
|
||||
border_radius: '24rpx',
|
||||
padding: '6rpx 16rpx',
|
||||
font_size: '24rpx',
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
componentBadge,
|
||||
componentGoodsBuy,
|
||||
componentCartParaCurve,
|
||||
},
|
||||
props: {
|
||||
// 价格符号
|
||||
propCurrencySymbol: {
|
||||
type: String,
|
||||
default: app.globalData.data.currency_symbol,
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
componentBadge,
|
||||
componentGoodsBuy,
|
||||
componentCartParaCurve,
|
||||
},
|
||||
props: {
|
||||
// 价格符号
|
||||
propCurrencySymbol: {
|
||||
type: String,
|
||||
default: app.globalData.data.currency_symbol,
|
||||
},
|
||||
// 列表数据
|
||||
propData: {
|
||||
type: [Array, Object],
|
||||
default: [],
|
||||
},
|
||||
// 更多url地址
|
||||
propMoreUrlKey: {
|
||||
type: String,
|
||||
default: "url",
|
||||
},
|
||||
// 关键字url地址
|
||||
propKeywordsUrl: {
|
||||
type: String,
|
||||
default: "/pages/goods-search/goods-search?keywords=",
|
||||
},
|
||||
// 滚动自动播放
|
||||
propIsAutoPlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 标签数据
|
||||
propLabel: {
|
||||
type: [Array, Object, String],
|
||||
default: null,
|
||||
},
|
||||
// 展示加购抛物线
|
||||
propIsCartParaCurve: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 展示价格icon图标
|
||||
propIsShowPriceIcon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 展示价格字段
|
||||
propPriceField: {
|
||||
type: String,
|
||||
default: "min_price",
|
||||
},
|
||||
// 来源
|
||||
propSource: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 当开启时以前的按钮将失效
|
||||
propIsOpenGridBtnSet: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 九宫格 按钮样式, ----- 需要和propIsOpenGridBtnSet一起使用
|
||||
propGridBtnConfig: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
// 列表数据
|
||||
propData: {
|
||||
type: [Array, Object],
|
||||
default: [],
|
||||
},
|
||||
// 更多url地址
|
||||
propMoreUrlKey: {
|
||||
type: String,
|
||||
default: 'url',
|
||||
},
|
||||
// 关键字url地址
|
||||
propKeywordsUrl: {
|
||||
type: String,
|
||||
default: '/pages/goods-search/goods-search?keywords=',
|
||||
},
|
||||
// 滚动自动播放
|
||||
propIsAutoPlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 标签数据
|
||||
propLabel: {
|
||||
type: [Array, Object, String],
|
||||
default: null,
|
||||
},
|
||||
// 展示加购抛物线
|
||||
propIsCartParaCurve: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 展示价格icon图标
|
||||
propIsShowPriceIcon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 展示价格字段
|
||||
propPriceField: {
|
||||
type: String,
|
||||
default: 'min_price',
|
||||
},
|
||||
// 来源
|
||||
propSource: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 当开启时以前的按钮将失效
|
||||
propIsOpenGridBtnSet: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 九宫格 按钮样式, ----- 需要和propIsOpenGridBtnSet一起使用
|
||||
propGridBtnConfig: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
// 积分列表时使用参数
|
||||
propIntegral: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
// 积分列表时使用参数
|
||||
propIntegral: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
// 属性值改变监听
|
||||
watch: {
|
||||
// 数据
|
||||
propData(value, old_value) {
|
||||
this.setData({
|
||||
data: value,
|
||||
});
|
||||
},
|
||||
propIsOpenGridBtnSet(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
// 属性值改变监听
|
||||
watch: {
|
||||
// 数据
|
||||
propData(value, old_value) {
|
||||
this.setData({
|
||||
grid_btn_config: Object.assign({}, this.grid_btn_config, this.propGridBtnConfig),
|
||||
data: value,
|
||||
});
|
||||
}
|
||||
},
|
||||
propIsOpenGridBtnSet(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.setData({
|
||||
grid_btn_config: Object.assign({}, this.grid_btn_config, this.propGridBtnConfig),
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
// 页面被展示
|
||||
created: function () {
|
||||
var is_app_mourning = app.globalData.is_app_mourning();
|
||||
var is_show_cart = app.globalData.data.is_goods_list_show_cart_opt == 1 ? (is_app_mourning && this.propSource == "index" ? false : true) : false;
|
||||
this.setData({
|
||||
data: this.propData,
|
||||
is_show_cart: is_show_cart,
|
||||
grid_btn_config: Object.assign({}, this.grid_btn_config, this.propGridBtnConfig),
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 加入购物车
|
||||
goods_cart_event(e) {
|
||||
if ((this.$refs.goods_buy || null) != null) {
|
||||
var index = e.currentTarget.dataset.index || 0;
|
||||
var goods = this.propData.goods_list[index];
|
||||
// 开启购物车抛物线效果则展示提示操作
|
||||
var is_success_tips = this.propIsCartParaCurve ? 0 : 1;
|
||||
this.$refs.goods_buy.init(
|
||||
goods,
|
||||
{
|
||||
buy_event_type: "cart",
|
||||
is_direct_cart: 1,
|
||||
is_success_tips: is_success_tips,
|
||||
},
|
||||
{
|
||||
index: index,
|
||||
pos: e,
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
// 加入购物车成功回调
|
||||
goods_cart_back_event(e) {
|
||||
// 增加数量
|
||||
var back = e.back_data;
|
||||
var temp = this.data;
|
||||
var goods = temp["goods_list"][back.index];
|
||||
goods["user_cart_count"] = parseInt(goods["user_cart_count"] || 0) + parseInt(e.stock);
|
||||
if (goods["user_cart_count"] > 99) {
|
||||
goods["user_cart_count"] = "99+";
|
||||
}
|
||||
temp["goods_list"][back.index] = goods;
|
||||
// 页面被展示
|
||||
created: function () {
|
||||
var is_app_mourning = app.globalData.is_app_mourning();
|
||||
var is_show_cart = app.globalData.data.is_goods_list_show_cart_opt == 1 ? (is_app_mourning && this.propSource == 'index' ? false : true) : false;
|
||||
this.setData({
|
||||
data: temp,
|
||||
data: this.propData,
|
||||
is_show_cart: is_show_cart,
|
||||
grid_btn_config: Object.assign({}, this.grid_btn_config, this.propGridBtnConfig),
|
||||
});
|
||||
// 抛物线
|
||||
if (this.propIsCartParaCurve && (this.$refs.cart_para_curve || null) != null) {
|
||||
this.$refs.cart_para_curve.init(null, back.pos, goods.images);
|
||||
}
|
||||
// 导航购物车处理
|
||||
var cart_total = e.cart_number || 0;
|
||||
if (cart_total <= 0) {
|
||||
app.globalData.set_tab_bar_badge(2, 0);
|
||||
} else {
|
||||
app.globalData.set_tab_bar_badge(2, 1, cart_total);
|
||||
}
|
||||
// 当前页面
|
||||
var page = app.globalData.current_page().split("?");
|
||||
switch (page[0]) {
|
||||
// 商品详情页面
|
||||
case "pages/goods-detail/goods-detail":
|
||||
// 商品搜索
|
||||
case "pages/goods-search/goods-search":
|
||||
var res = app.globalData.get_page_object(page[0]);
|
||||
if (res.length > 0) {
|
||||
for (var i in res) {
|
||||
res[i].$vm.goods_cart_count_handle(cart_total);
|
||||
},
|
||||
methods: {
|
||||
// 加入购物车
|
||||
goods_cart_event(e) {
|
||||
if ((this.$refs.goods_buy || null) != null) {
|
||||
var index = e.currentTarget.dataset.index || 0;
|
||||
var goods = this.propData.goods_list[index];
|
||||
// 开启购物车抛物线效果则展示提示操作
|
||||
var is_success_tips = this.propIsCartParaCurve ? 0 : 1;
|
||||
this.$refs.goods_buy.init(
|
||||
goods,
|
||||
{
|
||||
buy_event_type: 'cart',
|
||||
is_direct_cart: 1,
|
||||
is_success_tips: is_success_tips,
|
||||
},
|
||||
{
|
||||
index: index,
|
||||
pos: e,
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.$emit("CartSuccessEvent");
|
||||
);
|
||||
}
|
||||
},
|
||||
// 加入购物车成功回调
|
||||
goods_cart_back_event(e) {
|
||||
// 增加数量
|
||||
var back = e.back_data;
|
||||
var temp = this.data;
|
||||
var goods = temp['goods_list'][back.index];
|
||||
goods['user_cart_count'] = parseInt(goods['user_cart_count'] || 0) + parseInt(e.stock);
|
||||
if (goods['user_cart_count'] > 99) {
|
||||
goods['user_cart_count'] = '99+';
|
||||
}
|
||||
temp['goods_list'][back.index] = goods;
|
||||
this.setData({
|
||||
data: temp,
|
||||
});
|
||||
// 抛物线
|
||||
if (this.propIsCartParaCurve && (this.$refs.cart_para_curve || null) != null) {
|
||||
this.$refs.cart_para_curve.init(null, back.pos, goods.images);
|
||||
}
|
||||
// 导航购物车处理
|
||||
var cart_total = e.cart_number || 0;
|
||||
if (cart_total <= 0) {
|
||||
app.globalData.set_tab_bar_badge(2, 0);
|
||||
} else {
|
||||
app.globalData.set_tab_bar_badge(2, 1, cart_total);
|
||||
}
|
||||
// 当前页面
|
||||
var page = app.globalData.current_page().split('?');
|
||||
switch (page[0]) {
|
||||
// 商品详情页面
|
||||
case 'pages/goods-detail/goods-detail':
|
||||
// 商品搜索
|
||||
case 'pages/goods-search/goods-search':
|
||||
var res = app.globalData.get_page_object(page[0]);
|
||||
if (res.length > 0) {
|
||||
for (var i in res) {
|
||||
res[i].$vm.goods_cart_count_handle(cart_total);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.$emit('CartSuccessEvent');
|
||||
},
|
||||
// url事件
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
},
|
||||
// 购物车角标变化回调
|
||||
goods_badge_change() {
|
||||
this.$emit('goods_badge_change');
|
||||
},
|
||||
},
|
||||
// url事件
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
},
|
||||
// 购物车角标变化回调
|
||||
goods_badge_change() {
|
||||
this.$emit("goods_badge_change");
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
* 智能识别
|
||||
*/
|
||||
.intelligent-identification {
|
||||
transition-property: height, border-bottom-width;
|
||||
transition-property: height;
|
||||
transition-duration: .3s;
|
||||
will-change: height;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue