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

统一适配商品列表并新增图标配置和自定义价格字段

master
gongfuxiang 2023-03-21 22:37:19 +08:00
parent c0434bbba8
commit 18cf7a7a72
14 changed files with 110 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/goods-list/goods-list.vue
View File

@ -25,7 +25,10 @@
<view class="multi-text">{{item.title}}</view>
<view v-if="(item.simple_desc || null) != null" class="cr-grey single-text margin-top-sm">{{item.simple_desc}}</view>
<view class="base-bottom pa">
<view class="sales-price fl">{{propCurrencySymbol}}{{item.min_price}}</view>
<view class="fl">
<text v-if="propIsShowPriceIcon && (item.price_icon || null) != null" class="bg-red br-red cr-white text-size-xs padding-left-sm padding-right-sm round va-m margin-right-xs">{{item.price_icon}}</text>
<text class="sales-price va-m">{{propCurrencySymbol}}{{item[propPriceField]}}</text>
</view>
<view v-if="(item.is_error || 0) == 0" class="fr pr" :data-index="index" @tap.stop="goods_cart_event">
<uni-icons type="plus" size="22" color="#1AAD19"></uni-icons>
<view class="cart-badge-icon pa">
@ -57,7 +60,10 @@
<view class="base padding-horizontal-main margin-top-sm">
<view class="goods-title multi-text">{{item.title}}</view>
<view class="margin-top-sm">
<view class="sales-price fl">{{propCurrencySymbol}}{{item.min_price}}</view>
<view class="fl">
<text v-if="propIsShowPriceIcon && (item.price_icon || null) != null" class="bg-red br-red cr-white text-size-xs padding-left-sm padding-right-sm round va-m margin-right-xs">{{item.price_icon}}</text>
<text class="sales-price va-m">{{propCurrencySymbol}}{{item[propPriceField]}}</text>
</view>
<view v-if="(item.is_error || 0) == 0" class="fr pa bg-white right-cart-icon" :data-index="index" @tap.stop="goods_cart_event">
<uni-icons type="plus" size="22" color="#1AAD19"></uni-icons>
<view class="cart-badge-icon pa">
@ -92,7 +98,10 @@
<view class="padding-left-sm padding-right-sm margin-top-sm">
<view class="multi-text">{{item.title}}</view>
<view class="margin-top-sm">
<view class="sales-price fl">{{propCurrencySymbol}}{{item.min_price}}</view>
<view class="fl">
<text v-if="propIsShowPriceIcon && (item.price_icon || null) != null" class="bg-red br-red cr-white text-size-xs padding-left-sm padding-right-sm round va-m margin-right-xs">{{item.price_icon}}</text>
<text class="sales-price va-m">{{propCurrencySymbol}}{{item[propPriceField]}}</text>
</view>
<view v-if="(item.is_error || 0) == 0" class="fr pa bg-white right-cart-icon" :data-index="index" @tap.stop="goods_cart_event">
<uni-icons type="plus" size="22" color="#1AAD19"></uni-icons>
<view class="cart-badge-icon pa">
@ -144,33 +153,50 @@
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'
}
},
// 属性值改变监听

2
pages/goods-detail/goods-detail.css
View File

@ -286,7 +286,7 @@
}
.goods-base-price-countdown .price-icon {
margin-right: 0;
padding: 0px 3px;
padding: 0px 10rpx;
border: 1px solid #fff;
background: transparent;
position: absolute;

4
pages/goods-detail/goods-detail.vue
View File

@ -83,13 +83,13 @@
<!-- 价格 -->
<view class="price-content padding-lg" :style="(plugins_seckill_is_valid == 1) ? 'background-image: url('+plugins_seckill_data.bg_img+')' : ''">
<view class="single-text">
<text v-if="(show_field_price_text || null) != null" class="price-icon radius va-m">{{show_field_price_text}}</text>
<text v-if="(show_field_price_text || null) != null" class="price-icon round va-m">{{show_field_price_text}}</text>
<text class="sales-price va-m">{{currency_symbol}}{{goods_spec_base_price}}</text>
</view>
<view v-if="(goods_spec_base_original_price || null) != null && goods_spec_base_original_price != 0" class="original-price margin-top-sm single-text">{{currency_symbol}}{{goods_spec_base_original_price}}</view>
</view>
<!-- 秒杀 -->
<view v-if="plugins_seckill_is_valid == 1" class="countdown-content padding-lg fr tc">
<view v-if="plugins_seckill_is_valid == 1" class="countdown-content padding-top-lg padding-bottom-lg padding-left-xs padding-right-xs fr tc">
<view class="time-title cr-white single-text">{{plugins_seckill_data.title || '限时秒杀'}}</view>
<component-countdown :propHour="plugins_seckill_data.time.hours" :propMinute="plugins_seckill_data.time.minutes" :propSecond="plugins_seckill_data.time.seconds" :propMsecShow="true" propTimeSize="32" propTimePadding="0" propTimeWeight="bold" propTimeBackgroundColor="transparent" propTimeColor="#ffe500" propDsColor="#fff"></component-countdown>
</view>

36
pages/index/index.vue
View File

@ -88,40 +88,8 @@
<component-countdown :propHour="plugins_seckill_data.time.hours" :propMinute="plugins_seckill_data.time.minutes" :propSecond="plugins_seckill_data.time.seconds"></component-countdown>
</view>
<navigator url="/pages/plugins/seckill/index/index" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view class="rolling-horizontal border-radius-main oh">
<view class="goods-list scroll-view-horizontal">
<swiper :vertical="false" :autoplay="(plugins_seckill_data.base || null) != null && (plugins_seckill_data.base.is_home_auto_play || 0) == 1" :circular="false" :display-multiple-items="plugins_seckill_data.goods.length < 3 ? plugins_seckill_data.goods.length : 3" interval="3000">
<block v-for="(item, index) in plugins_seckill_data.goods" :key="index">
<swiper-item>
<view class="item bg-white border-radius-main margin-right-main oh pr ht-auto">
<!-- 商品主体内容 -->
<navigator :url="item.goods_url" hover-class="none">
<image class="goods-img dis-block" :src="item.images" mode="aspectFit"></image>
<view class="goods-base padding-left padding-right margin-top-sm">
<view class="goods-title multi-text margin-bottom-sm">{{item.title}}</view>
<view class="sales-price single-text">{{currency_symbol}}{{item.min_price}}</view>
<view v-if="(item.min_original_price || null) != null && item.min_original_price > 0" class="original-price single-text">{{currency_symbol}}{{item.min_original_price}}</view>
<view class="icon pa">
<uni-icons type="cart" size="16" color="#E02020"></uni-icons>
</view>
</view>
</navigator>
<!-- 标签插件 -->
<view v-if="(plugins_label_data || null) != null && plugins_label_data.data.length > 0" :class="'plugins-label oh pa plugins-label-'+((plugins_label_data.base.is_user_goods_label_icon || 0) == 0 ? 'text' : 'img')+' plugins-label-'+(plugins_label_data.base.user_goods_show_style || 'top-left')">
<block v-for="(lv,li) in plugins_label_data.data" :key="li">
<view v-if="lv.goods_ids.indexOf(item.goods_id) != -1" class="lv dis-inline-block va-m" :data-value="((plugins_label_data.base.is_user_goods_label_url || 0) == 1) ? (lv.url || '') : ''" @tap="url_event">
<view v-if="(plugins_label_data.base.is_user_goods_label_icon || 0) == 0" class="round cr-white bg-main text-size-xs fl" :style="((lv.bg_color || null) != null ? 'background-color:'+ lv.bg_color+' !important;' : '')+((lv.text_color || null) != null ? 'color:'+ lv.text_color+' !important;' : '')">{{lv.name}}</view>
<image v-else class="dis-block" :src="lv.icon" mode="scaleToFill"></image>
</view>
</block>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
<component-goods-list :propData="{style_type: 2, goods_list: plugins_seckill_data.goods}" :propLabel="plugins_label_data" :propCurrencySymbol="currency_symbol" :propIsCartParaCurve="true"></component-goods-list>
</view>
<!-- 活动配置-楼层顶部 - 插件 -->

17
pages/plugins/activity/detail/detail.css
View File

@ -13,21 +13,4 @@
}
.word-content .word-icon:not(:last-child) {
margin-right: 20rpx;
}
/**
* 商品列表
*/
.data-list .item {
width: calc(50% - 10rpx);
}
.data-list .item:nth-child(2n) {
float: right;
}
.data-list .item:nth-child(2n+1) {
float: left;
}
.data-list .item .goods-img {
width: 100%;
height: 380rpx !important;
}

23
pages/plugins/activity/detail/detail.vue
View File

@ -22,21 +22,8 @@
<text class="text-wrapper">活动商品</text>
<text class="cr-grey text-size-xs margin-left-lg">{{data.vice_title}}</text>
<navigator url="/pages/plugins/activity/index/index" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多活动</navigator>
</view>
<view class="data-list oh">
<view v-for="(item, index) in data.goods_list" :key="index" class="item padding-bottom-sm border-radius-main bg-white margin-bottom-main">
<navigator :url="item.goods_url" hover-class="none">
<image class="goods-img dis-block" :src="item.images" mode="aspectFit"></image>
<view class="padding-horizontal-main margin-top-sm">
<view class="multi-text">{{item.title}}</view>
<view class="single-text margin-top-sm">
<text v-if="(data_base.goods_detail_icon || null) != null" class="text-size-xs bg-red cr-white round padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs" :style="'background-color:'+data.color+' !important;'">{{data_base.goods_detail_icon}}</text>
<text class="sales-price va-m">{{currency_symbol}}{{item.min_price}}</text>
</view>
</view>
</navigator>
</view>
</view>
</view>
<component-goods-list :propData="{style_type: 1, goods_list: data.goods_list}" :propCurrencySymbol="currency_symbol"></component-goods-list>
</view>
<view v-else>
<!-- 提示信息 -->
@ -56,7 +43,8 @@
<script>
const app = getApp();
import componentNoData from "../../../../components/no-data/no-data";
import componentBottomLine from "../../../../components/bottom-line/bottom-line";
import componentBottomLine from "../../../../components/bottom-line/bottom-line";
import componentGoodsList from "../../../../components/goods-list/goods-list";
export default {
data() {
@ -76,7 +64,8 @@
components: {
componentNoData,
componentBottomLine
componentBottomLine,
componentGoodsList
},
props: {},

2
pages/plugins/binding/detail/detail.vue
View File

@ -30,7 +30,7 @@
</view>
</view>
<text class="cr-gray text-size-xs">{{item.inventory}}{{item.inventory_unit}}</text>
<view v-if="(item.is_exist_many_spec || 0) == 1" class="br-gray cr-gray radius fr padding-left padding-right single-text text-size-xs spec-choice" :data-index="index" @tap="spec_choice_event">{{item.spec_choice_text || '选择规格'}}</view>
<view v-if="(item.is_exist_many_spec || 0) == 1" class="br-gray cr-gray round fr padding-left padding-right single-text text-size-xs spec-choice" :data-index="index" @tap="spec_choice_event">{{item.spec_choice_text || '选择规格'}}</view>
</view>
<view v-else class="cr-yellow text-size-xs">{{item.error_msg}}</view>
</view>

42
pages/plugins/realstore/detail/detail.vue
View File

@ -195,7 +195,7 @@
</block>
<block v-else>
<component-no-data propStatus="0" propMsg="请先选购商品"></component-no-data>
<view class="padding-bottom-xxxl margin-bottom-xxxl tc text-size-xs">
<view class="padding-bottom-xxxl margin-bottom-xxxl tc text-size-xs margin-top-xxl">
<text class="cr-red">没有已加购的商品？</text>
<text class="br-green cr-green round padding-left padding-right padding-top-xs padding-bottom-xs cp" @tap="buy_use_type_event">切换下单类型</text>
</view>
@ -217,7 +217,10 @@
</view>
<button type="default" size="mini" hover-class="none" @tap="buy_submit_event" :class="'text-size-sm pa radius-0 '+((info.status_info.status == 1) ? 'bg-main cr-white' : 'bg-gray cr-gray')">{{info.status_info.status == 1 ? '去结算' : info.status_info.msg}}</button>
</view>
<!-- 购物车抛物线 -->
<component-cart-para-curve ref="cart_para_curve"></component-cart-para-curve>
<!-- 商品购买 -->
<component-goods-buy ref="goods_buy" v-on:CartSuccessEvent="goods_cart_back_event"></component-goods-buy>
</view>
@ -235,6 +238,7 @@
import componentSearch from "../../../../components/search/search";
import componentBadge from "../../../../components/badge/badge";
import componentPopup from "../../../../components/popup/popup";
import componentCartParaCurve from '../../../../components/cart-para-curve/cart-para-curve';
var common_static_url = app.globalData.get_static_url('common');
export default {
@ -285,6 +289,8 @@
is_single_page: app.globalData.is_current_single_page() || 0,
// 顶部导航返回按钮
is_realstore_top_nav_back: app.globalData.data.is_realstore_top_nav_back || 0,
// 临时操作数据
temp_opt_data: null,
};
},
@ -293,7 +299,8 @@
componentNoData,
componentSearch,
componentBadge,
componentPopup
componentPopup,
componentCartParaCurve
},
props: {},
@ -610,7 +617,7 @@
}
// 数据操作处理
this.buy_number_event_handle(type, temp_goods);
this.buy_number_event_handle(e, type, temp_goods);
}
}
},
@ -622,12 +629,21 @@
},
// 列表数量事件处理
buy_number_event_handle(type, goods, spec = '') {
buy_number_event_handle(e, type, goods, spec = '') {
var res = this.buy_number_handle(type, goods, 'buy_number');
if(res === false) {
return false;
}
// 数据临时记录
this.setData({
temp_opt_data: {
pos: e,
goods: goods,
type: type,
}
});
// 为0或减操作则查询
var cart_item = null;
if(type == 0 || (type == 1 && goods['buy_number'] > 0)) {
@ -660,6 +676,18 @@
return true;
},
// 购物车抛物线动画
cart_para_curve_handle() {
if((this.temp_opt_data || null) != null && (this.temp_opt_data.type || 0) == 1) {
if((this.$refs.cart_para_curve || null) != null) {
var self = this;
uni.createSelectorQuery().select('.botton-nav .cart').boundingClientRect().exec(function(res) {
self.$refs.cart_para_curve.init(res, self.temp_opt_data.pos, self.temp_opt_data.goods.images);
});
}
}
},
// 购物车数量操作
cart_buy_number_event(e) {
if(!app.globalData.is_single_page_check()) {
@ -801,6 +829,7 @@
success: res => {
uni.hideLoading();
if (res.data.code == 0) {
this.cart_para_curve_handle();
this.get_cart_data();
} else {
if (app.globalData.is_login_check(res.data)) {
@ -833,6 +862,7 @@
success: res => {
uni.hideLoading();
if (res.data.code == 0) {
this.cart_para_curve_handle();
this.get_cart_data();
} else {
if (app.globalData.is_login_check(res.data)) {

16
pages/plugins/seckill/index/index.css
View File

@ -1,16 +0,0 @@
/**
* 商品列表
*/
.data-list .item {
width: calc(50% - 10rpx);
}
.data-list .item:nth-child(2n) {
float: right;
}
.data-list .item:nth-child(2n+1) {
float: left;
}
.data-list .item .goods-img {
width: 100%;
height: 380rpx !important;
}

44
pages/plugins/seckill/index/index.vue
View File

@ -23,21 +23,8 @@
</view>
<!-- 商品 -->
<view v-if="goods.length > 0">
<view class="data-list oh">
<view v-for="(item, index) in goods" :key="index" class="item padding-bottom-sm border-radius-main bg-white margin-bottom-main">
<navigator :url="item.goods_url" hover-class="none">
<image class="goods-img dis-block" :src="item.images" mode="aspectFit"></image>
<view class="padding-horizontal-main margin-top-sm">
<view class="multi-text">{{item.title}}</view>
<view class="single-text margin-top-sm">
<text v-if="time.status == 0 || time.status == 1" class="text-size-xs bg-red cr-white round padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs">{{data_base.goods_detail_icon || '秒杀价'}}</text>
<text class="sales-price va-m">{{currency_symbol}}{{item.seckill_min_price}}</text>
</view>
</view>
</navigator>
</view>
</view>
<view v-if="goods.length > 0">
<component-goods-list :propData="{style_type: 1, goods_list: goods}" :propCurrencySymbol="currency_symbol" :propIsShowPriceIcon="true" propPriceField="seckill_min_price"></component-goods-list>
</view>
<view v-else>
<!-- 提示信息 -->
@ -59,7 +46,8 @@
import componentBanner from "../../../../components/slider/slider";
import componentCountdown from "../../../../components/countdown/countdown";
import componentNoData from "../../../../components/no-data/no-data";
import componentBottomLine from "../../../../components/bottom-line/bottom-line";
import componentBottomLine from "../../../../components/bottom-line/bottom-line";
import componentGoodsList from "../../../../components/goods-list/goods-list";
var seckill_static_url = app.globalData.get_static_url('seckill', true);
export default {
@ -84,7 +72,8 @@
componentBanner,
componentCountdown,
componentNoData,
componentBottomLine
componentBottomLine,
componentGoodsList
},
props: {},
@ -124,17 +113,25 @@
dataType: 'json',
success: res => {
uni.stopPullDownRefresh();
if (res.data.code == 0) {
var data = res.data.data;
if (res.data.code == 0) {
var data = res.data.data;
var data_base = data.config || null;
var time = data.time || null;
var goods = data.goods || [];
if(goods.length > 0 && data_base != null) {
for(var i in goods) {
goods[i]['price_icon'] = (time != null && (time.status == 0 || time.status == 1)) ? (data_base.goods_detail_icon || '秒杀价') : '';
}
}
this.setData({
data_base: data.config || null,
time: data.time || null,
goods: data.goods || [],
data_base: data_base,
time: time,
goods: goods,
slider: data.slider || [],
is_valid: data.is_valid || 0,
data_list_loding_msg: '',
data_list_loding_status: 0,
data_bottom_line_status: ((data.goods || null) != null && data.goods.length > 0)
data_bottom_line_status: (goods.length > 0)
});
if ((this.data_base || null) != null) {
@ -181,5 +178,4 @@
};
</script>
<style>
@import './index.css';
</style>

4
pages/user-favor/user-favor.css
View File

@ -5,4 +5,8 @@
.goods-image {
width: 160rpx;
height: 160rpx;
}
.operate-submit {
right: 20rpx;
bottom: 20rpx;
}

4
pages/user-favor/user-favor.vue
View File

@ -2,7 +2,7 @@
<view>
<scroll-view :scroll-y="true" class="scroll-box" @scrolltolower="scroll_lower" lower-threshold="60">
<view v-if="data_list.length > 0" class="padding-horizontal-main padding-top-main">
<view v-for="(item, index) in data_list" :key="index" class="padding-main border-radius-main oh bg-white spacing-mb">
<view v-for="(item, index) in data_list" :key="index" class="padding-main border-radius-main oh bg-white pr spacing-mb">
<navigator :url="item.goods_url" hover-class="none">
<image class="goods-image fl radius" :src="item.images" mode="aspectFill"></image>
<view class="goods-base">
@ -13,7 +13,7 @@
</view>
</view>
</navigator>
<button class="br-yellow cr-yellow bg-white fr round" type="default" size="mini" @tap="cancel_event" :data-value="item.goods_id" :data-index="index" hover-class="none">取消</button>
<button class="br-yellow cr-yellow bg-white fr round pa operate-submit" type="default" size="mini" @tap="cancel_event" :data-value="item.goods_id" :data-index="index" hover-class="none">取消</button>
</view>
</view>
<view v-else>

4
pages/user-goods-browse/user-goods-browse.css
View File

@ -5,4 +5,8 @@
.goods-image {
width: 160rpx;
height: 160rpx;
}
.operate-submit {
right: 20rpx;
bottom: 20rpx;
}

6
pages/user-goods-browse/user-goods-browse.vue
View File

@ -2,7 +2,7 @@
<view>
<scroll-view :scroll-y="true" class="scroll-box" @scrolltolower="scroll_lower" lower-threshold="60">
<view v-if="data_list.length > 0" class="padding-horizontal-main padding-top-main">
<view v-for="(item, index) in data_list" :key="index" class="padding-main border-radius-main oh bg-white spacing-mb">
<view v-for="(item, index) in data_list" :key="index" class="padding-main border-radius-main oh bg-white pr spacing-mb">
<navigator :url="item.goods_url" hover-class="none">
<image class="goods-image fl radius" :src="item.images" mode="aspectFill"></image>
<view class="goods-base">
@ -12,8 +12,8 @@
<text v-if="item.original_price > 0" class="original-price margin-left-sm">{{currency_symbol}}{{item.original_price}}</text>
</view>
</view>
</navigator>
<button class="br-red cr-red bg-white fr round" type="default" size="mini" @tap="delete_event" :data-value="item.id" :data-index="index" hover-class="none">删除</button>
</navigator>
<button class="br-red cr-red bg-white round text-size-xs pa operate-submit" type="default" size="mini" @tap="delete_event" :data-value="item.id" :data-index="index" hover-class="none">删除</button>
</view>
</view>
<view v-else>