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

1.购物车优化

master
sws 2023-09-15 17:10:50 +08:00
parent 218c2a7530
commit 9b97bf7193
8 changed files with 869 additions and 839 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
App.vue
View File

@ -67,11 +67,11 @@ export default {
// tabbar页面
tabbar_pages: ["/pages/index/index", "/pages/goods-category/goods-category", "/pages/cart/cart", "/pages/user/user"],
// 请求地址
// request_url: 'https://d1.shopxo.vip/',
request_url: "http://shopxo.com/",
request_url: "https://d1.shopxo.vip/",
// request_url: "http://shopxo.com/",
// 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
// static_url: 'https://d1.shopxo.vip/',
static_url: "http://shopxo.com/",
static_url: "https://d1.shopxo.vip/",
// static_url: "http://shopxo.com/",
// 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
system_type: "default",
// 基础信息

167
components/cart/cart.vue
View File

@ -59,44 +59,6 @@
</view>
</uni-swipe-action>
</view>
<!-- 操作导航 -->
<!-- 展示型 -->
<view v-if="common_site_type == 1" :class="'cart-buy-nav oh wh-auto ' + (source_type != 'cart' ? 'bottom-line-exclude' : '')">
<view class="cart-exhibition-mode padding-horizontal-main">
<button class="bg-main cr-white round wh-auto text-size-sm" type="default" @tap="exhibition_submit_event" hover-class="none">
<view class="dis-inline-block va-m margin-right-xl">
<uni-icons type="phone" size="14" color="#fff" />
</view>
<text class="va-m">{{ common_is_exhibition_mode_btn_text }}</text>
</button>
</view>
</view>
<!-- 销售,自提,虚拟销售 -->
<view v-else class="flex-row jc-sb align-c cart-buy-nav oh wh-auto br-t bg-white" :class="source_type != 'cart' ? 'bottom-line-exclude' : ''">
<view class="cart-nav-base single-text padding-left flex-row jc-sb align-c">
<view class="cart-selected flex-row align-c">
<view @tap="selected_event" data-type="all">
<image class="icon va-m" :src="common_static_url + 'select' + (is_selected_all ? '-active' : '') + '-icon.png'" mode="widthFix"></image>
</view>
<text v-if="already_selected_status" @tap="cart_all_remove_event" class="margin-left-main cart-nav-remove-submit dis-inline-block va-m bg-white cr-red br-red round cp">删除</text>
<text v-else class="va-m cr-base padding-left-main" @tap="selected_event" data-type="all">全选</text>
</view>
<view class="price flex-row jc-e flex-nowrap align-c">
<view>合计：</view>
<view class="sales-price single-text fw-b">
<text class="text-size-sm">{{ currency_symbol }}</text>
<text class="text-size-lg">{{ total_price }}</text>
</view>
</view>
</view>
<view class="cart-nav-submit">
<button class="bg-main cr-white round" type="default" @tap="buy_submit_event" :disabled="!already_valid_selected_status" hover-class="none">
去结算
<text v-if="total_num > 0">({{ total_num }})</text>
</button>
</view>
</view>
</view>
<!-- 空购物车 -->
@ -134,6 +96,45 @@
<!-- 结尾 -->
<component-bottom-line :propStatus="goods_bottom_line_status"></component-bottom-line>
</scroll-view>
<!-- 操作导航 -->
<!-- 展示型 -->
<block v-if="data_list.length > 0">
<view v-if="common_site_type == 1" :class="'cart-buy-nav oh wh-auto ' + (source_type != 'cart' ? 'bottom-line-exclude' : '')">
<view class="cart-exhibition-mode padding-horizontal-main">
<button class="bg-main cr-white round wh-auto text-size-sm" type="default" @tap="exhibition_submit_event" hover-class="none">
<view class="dis-inline-block va-m margin-right-xl">
<uni-icons type="phone" size="14" color="#fff" />
</view>
<text class="va-m">{{ common_is_exhibition_mode_btn_text }}</text>
</button>
</view>
</view>
<!-- 销售,自提,虚拟销售 -->
<view v-else class="flex-row jc-sb align-c cart-buy-nav oh wh-auto br-t bg-white" :class="source_type != 'cart' ? 'bottom-line-exclude' : ''">
<view class="cart-nav-base single-text padding-left flex-row jc-sb align-c">
<view class="cart-selected flex-row align-c">
<view @tap="selected_event" data-type="all">
<image class="icon va-m" :src="common_static_url + 'select' + (is_selected_all ? '-active' : '') + '-icon.png'" mode="widthFix"></image>
</view>
<text v-if="already_selected_status" @tap="cart_all_remove_event" class="margin-left-main cart-nav-remove-submit dis-inline-block va-m bg-white cr-red br-red round cp">删除</text>
<text v-else class="va-m cr-base padding-left-main" @tap="selected_event" data-type="all">全选</text>
</view>
<view class="price flex-row jc-e flex-nowrap align-c">
<view>合计：</view>
<view class="sales-price single-text fw-b">
<text class="text-size-sm">{{ currency_symbol }}</text>
<text class="text-size-lg">{{ total_price }}</text>
</view>
</view>
</view>
<view class="cart-nav-submit">
<button class="bg-main cr-white round" type="default" @tap="buy_submit_event" :disabled="!already_valid_selected_status" hover-class="none">
去结算
<text v-if="total_num > 0">({{ total_num }})</text>
</button>
</view>
</view>
</block>
</view>
</template>
<script>
@ -289,7 +290,7 @@ export default {
},
// 获取数据
get_data() {
get_data(type) {
uni.request({
url: app.globalData.get_request_url("index", "cart"),
method: "POST",
@ -314,14 +315,18 @@ export default {
let new_goods_list = [];
// 判断猜你喜欢是否含有数据
if (this.goods_list.length > 0) {
new_goods_list = this.goods_change(data_list, 0, true);
if (type !== 1) {
new_goods_list = this.goods_change(data_list);
this.setData({
goods_list: new_goods_list,
});
}
}
// 设置数据
this.setData({
data_list: data_list,
data_list_loding_status: data_list.length == 0 ? 0 : 3,
data_list_loding_msg: "购物车空空如也",
goods_list: new_goods_list,
});
// 选择处理
this.cart_selected_calculate();
@ -373,6 +378,20 @@ export default {
var buy_number = type == 0 ? temp_number - 1 : temp_number + 1;
this.goods_buy_number_func(index, buy_number, type);
},
// 删除弹窗
model_tips(id) {
uni.showModal({
title: "温馨提示",
content: "挑了这么久，真的要删除吗？",
confirmText: "确认",
cancelText: "暂不",
success: (result) => {
if (result.confirm) {
this.cart_delete(id, "delete");
}
},
});
},
// 数量处理方法
goods_buy_number_func(index, buy_number, type) {
@ -384,8 +403,10 @@ export default {
let new_type = type === 0 ? "del" : "add";
if (buy_number < buy_min_number) {
buy_number = buy_min_number;
this.data_list[index].stock = buy_min_number;
if (buy_min_number > 1) {
app.globalData.showToast("起购" + buy_min_number + inventory_unit);
this.model_tips(temp_data_list[index]["id"]);
return false;
}
}
@ -403,6 +424,7 @@ export default {
}
if (temp_data_list[index]["stock"] == 1 && buy_number == 1) {
this.model_tips(temp_data_list[index]["id"]);
return false;
}
@ -431,7 +453,7 @@ export default {
temp_data_list[index]["selected"] = true;
delete not_use[temp_data_list[index]["id"]];
let new_goods_list = this.goods_change(temp_data_list, buy_number);
let new_goods_list = this.goods_change(temp_data_list);
this.setData({
data_list: temp_data_list,
goods_list: new_goods_list,
@ -532,8 +554,8 @@ export default {
// 根据操作类型处理数据
var id = temp_data_list[this.swipe_item_index]["id"];
var goods_id = temp_data_list[this.swipe_item_index]["goods_id"];
if (index == 0) {
var goods_id = temp_data_list[this.swipe_item_index]["goods_id"];
this.goods_favor_delete(id, goods_id, "favor");
} else {
this.cart_delete(id, "delete");
@ -559,7 +581,7 @@ export default {
temp_list.push(temp_data_list[i]);
}
}
let new_goods_list = this.goods_change(temp_data_list);
let new_goods_list = this.goods_change(temp_list);
this.setData({
data_list: temp_list,
data_list_loding_status: temp_list.length == 0 ? 0 : this.data_list_loding_status,
@ -786,33 +808,56 @@ export default {
},
});
},
// 猜你喜欢加入购物车回调
cart_success_event() {
this.get_data();
// 传1表示为购物车回调方法调用的此方法
this.get_data(1);
},
// 猜你喜欢数据更新
// shop_list: 购物车数据； is_init:判断是否是初始化数据，如果是则buy_number参数不生效； buy_number: 购买数量 不传默认为全部删除
goods_change(shop_list, buy_number, is_init) {
// cart_list: 购物车数据；
goods_change(cart_list) {
// 更新猜你喜欢的数据
let new_goods_list = this.goods_list;
let init = is_init || false;
let new_buy_number = buy_number || 0;
for (let i = 0; i < new_goods_list.length; i++) {
let bool = app.globalData.some_arry(shop_list, new_goods_list[i].id, "goods_id");
let bool = app.globalData.some_arry(cart_list, new_goods_list[i].id, "goods_id");
if (bool) {
if (is_init) {
for (let j = 0; j < shop_list.length; j++) {
if (shop_list[j].goods_id === new_goods_list[i].id) {
new_goods_list[i].user_cart_count = shop_list[j].stock;
}
// 将购物车中相同商品不同规格的商品数量累加
let new_goods_item = this.cart_item_num(cart_list);
for (let j = 0; j < new_goods_item.length; j++) {
if (new_goods_list[i].id === new_goods_item[j].id) {
new_goods_list[i].user_cart_count = new_goods_item[j].num;
}
} else {
new_goods_list[i].user_cart_count = new_buy_number;
}
} else {
new_goods_list[i].user_cart_count = 0;
}
}
return new_goods_list;
},
// 商品数量去重累加数量
cart_item_num(cart_list) {
let _res = [];
for (let i = 0; i < cart_list.length; ) {
let num = 0;
let count = 0;
for (let j = i; j < cart_list.length; j++) {
if (cart_list[i].goods_id == cart_list[j].goods_id) {
num += Number(cart_list[j].stock ? cart_list[j].stock : 0);
count++;
}
}
let obj = {
id: cart_list[i].goods_id,
num: num,
};
_res.push(obj);
i += count;
}
return _res;
},
},
};
</script>
@ -821,10 +866,16 @@ export default {
* 商品列表
*/
.scroll-box.active {
height: calc(100vh - 125rpx);
/* 125rpx */
/* #ifdef H5 */
height: calc(100vh - 224rpx);
/* #endif */
}
.scroll-box {
/* #ifdef H5 */
height: calc(100vh - 100rpx);
/* #endif */
}
.cart-goods-title {
@ -912,7 +963,7 @@ export default {
position: fixed;
z-index: 2;
left: 0;
bottom: 0;
bottom: 0rpx;
/* #ifdef H5 || APP */
bottom: var(--window-bottom);
/* #endif */

3
components/icon-nav/icon-nav.vue
View File

@ -1,6 +1,6 @@
<template>
<view>
<view v-if="propData.length > 0" class="icon-nav-list" :class="propData.length > 5 ? 'swiper-height-max' : 'swiper-height-min'">
<view v-if="propData.length > 0" class="icon-nav-list spacing-mb" :class="propData.length > 5 ? 'swiper-height-max' : 'swiper-height-min'">
<uni-swiper-dot class="uni-swiper-dot-box" mode="default" :dots-styles="dotsStyles" @clickItem="click_item" :info="swiperData" :current="current">
<swiper class="swiper-box" :autoplay="autoplay" :duration="duration" @change="swiper_change" :current="swiperDotIndex">
<swiper-item v-for="(swiperItemData, i) in swiperData" :key="i">
@ -66,7 +66,6 @@ export default {
<style scoped>
.icon-nav-list {
overflow: hidden;
margin-bottom: 20rpx;
padding: 20rpx;
}

325
components/popup/popup.vue
View File

@ -1,179 +1,182 @@
<template>
<view>
<view :class="'popup ' + (propClassname || '') + ' ' + (propShow ? 'popup-show' : '') + ' ' + (propAnimation ? 'animation': '' )" :disable-scroll="propDisablescroll">
<view class="popup-mask" :style="'z-index: '+propIndex+';'" v-if="propMask" @tap="on_mask_tap"></view>
<view :class="'popup-content bottom-line-exclude popup-' + (propPosition || 'bottom')+ ' '+(propIsBar ? 'popup-bar' : '')"
:style="[{left: popup_content_left_value + 'px'},{top: propShow ? propTop : ''},{bottom: propShow ? propBottom : ''}]">
<slot></slot>
</view>
</view>
</view>
<view>
<view :class="'popup ' + (propClassname || '') + ' ' + (propShow ? 'popup-show' : '') + ' ' + (propAnimation ? 'animation' : '')" :disable-scroll="propDisablescroll">
<view class="popup-mask" :style="'z-index: ' + propIndex + ';'" v-if="propMask" @tap="on_mask_tap"></view>
<view :class="'popup-content bottom-line-exclude popup-' + (propPosition || 'bottom') + ' ' + (propIsBar ? 'popup-bar' : '')" :style="[{ left: popup_content_left_value + 'px' }, { top: propShow ? propTop : '' }, { bottom: propShow ? propBottom : '' }]">
<slot></slot>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
popup_content_left_value: 'auto'
};
},
components: {},
props: {
propClassname: {
type: String,
default: ''
},
propShow: {
type: Boolean,
default: false
},
propPosition: {
type: String,
default: 'bottom'
},
propMask: {
type: Boolean,
default: true
},
propAnimation: {
type: Boolean,
default: true
},
propDisablescroll: {
type: Boolean,
default: false
},
propIsBar: {
type: Boolean,
default: false
},
propIndex: {
type: Number,
default: 100
},
// 需要携带后缀
propTop: {
type: String,
default: ''
},
propBottom: {
type: String,
default: ''
}
},
// 属性值改变监听
watch: {
// 监听状态
propShow(value, old_value) {
this.left_handle();
}
},
// 组建创建
created: function() {
this.left_handle();
},
methods: {
// 事件处理
on_mask_tap: function on_mask_tap() {
this.$emit('onclose', {
detail: {}
}, {});
},
// 左边距位置处理
left_handle() {
// 处理内容左边距、避免父级设置内边距影响
var width = uni.getSystemInfoSync().windowWidth;
var left = 0;
if (width > 800) {
left = (width - 800) / 2;
}
this.popup_content_left_value = left;
}
}
};
export default {
data() {
return {
popup_content_left_value: "auto",
};
},
components: {},
props: {
propClassname: {
type: String,
default: "",
},
propShow: {
type: Boolean,
default: false,
},
propPosition: {
type: String,
default: "bottom",
},
propMask: {
type: Boolean,
default: true,
},
propAnimation: {
type: Boolean,
default: true,
},
propDisablescroll: {
type: Boolean,
default: false,
},
propIsBar: {
type: Boolean,
default: false,
},
propIndex: {
type: Number,
default: 100,
},
// 需要携带后缀
propTop: {
type: String,
default: "",
},
propBottom: {
type: String,
default: "",
},
},
// 属性值改变监听
watch: {
// 监听状态
propShow(value, old_value) {
this.left_handle();
},
},
// 组建创建
created: function () {
this.left_handle();
},
methods: {
// 事件处理
on_mask_tap: function on_mask_tap() {
this.$emit(
"onclose",
{
detail: {},
},
{}
);
},
// 左边距位置处理
left_handle() {
// 处理内容左边距、避免父级设置内边距影响
var width = uni.getSystemInfoSync().windowWidth;
var left = 0;
if (width > 800) {
left = (width - 800) / 2;
}
this.popup_content_left_value = left;
},
},
};
</script>
<style>
.popup-content {
position: fixed;
background: #fff;
z-index: 101;
overflow: hidden;
}
.popup-content {
position: fixed;
background: #fff;
z-index: 101;
overflow: hidden;
}
.popup-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
z-index: 100;
}
.popup-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
z-index: 100;
}
.popup-left {
transform: translateX(-100%);
left: 0;
top: 0;
bottom: 0;
}
.popup-left {
transform: translateX(-100%);
left: 0;
top: 0;
bottom: 0;
}
.popup-right {
transform: translateX(100%);
right: 0;
top: 0;
bottom: 0;
}
.popup-right {
transform: translateX(100%);
right: 0;
top: 0;
bottom: 0;
}
.popup-top {
top: 0;
width: 100vw;
transform: translateY(-100%);
}
.popup-top {
top: 0;
width: 100vw;
transform: translateY(-100%);
}
.popup-bottom {
bottom: var(--window-bottom);
width: 100vw;
transform: translateY(100%);
}
.popup-bottom {
bottom: var(--window-bottom);
width: 100vw;
transform: translateY(100%);
}
.popup-show .popup-content {
transform: none;
}
.popup-show .popup-content {
transform: none;
}
.popup-show .popup-mask {
opacity: 1;
pointer-events: auto;
}
.popup-show .popup-mask {
opacity: 1;
pointer-events: auto;
}
.popup.animation .popup-mask,
.popup.animation .popup-content {
transition: all 0.35s linear;
}
.popup.animation .popup-mask,
.popup.animation .popup-content {
transition: all 0.35s linear;
}
.popup-top {
border-bottom-right-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.popup-top {
border-bottom-right-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.popup-bottom {
border-top-right-radius: 20rpx;
border-top-left-radius: 20rpx;
}
.popup-bottom {
border-top-right-radius: 20rpx;
border-top-left-radius: 20rpx;
}
.popup-left {
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
.popup-left {
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
.popup-right {
border-top-left-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.popup-right {
border-top-left-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.popup-bar {
/* #ifdef H5 || APP */
bottom: var(--window-bottom) !important;
/* #endif */
}
</style>
.popup-bar {
/* #ifdef H5 || APP */
bottom: var(--window-bottom) !important;
/* #endif */
}
</style>

2
pages.json
View File

@ -31,7 +31,7 @@
"titlePenetrate": "YES",
"navigationBarTitleText": "",
// #endif
"enablePullDownRefresh": true
"enablePullDownRefresh": false
}
},
{

28
pages/goods-category/goods-category.css
View File

@ -2,13 +2,15 @@
* 头部背景
*/
.goods-top-bg {
height: 280rpx;
height: 286rpx;
background-color: #f5f5f5;
}
.goods-top-search-bg {
height: 138rpx;
/* #ifdef H5 || APP */
height: 98rpx;
background-color: red;
height: 144rpx;
/* #ifdef H5 */
height: 104rpx !important;
/* #endif */
}
@ -23,14 +25,24 @@
/* #ifdef H5 || MP-TOUTIAO || APP */
padding-right: 20rpx;
/* #endif */
padding-bottom: 10px;
/* #ifdef H5 */
padding-top: 20rpx !important;
/* #endif */
padding-bottom: 20rpx;
height: 64rpx;
z-index: 101;
}
.category-content {
height: calc(100vh - 68px);
height: calc(100vh - 142rpx);
/* #ifdef H5 || APP */
height: calc(100vh - 99px) !important;
height: calc(100vh - 210rpx) !important;
/* #endif */
}
.nav-more-top {
/* #ifdef H5 || APP */
top: 135rpx !important;
/* #endif */
}
@ -302,7 +314,7 @@
width: calc(100% - 40rpx);
left: auto;
bottom: 20rpx;
z-index: 6;
z-index: 2;
max-width: calc(800px - 40rpx);
margin-left: 20rpx;
background: linear-gradient(132deg, #EBEBEB 0%, #F7F7F7 100%);

14
pages/goods-category/goods-category.vue
View File

@ -6,7 +6,7 @@
</view>
<!-- 搜索框 -->
<block v-if="is_single_page == 0">
<view class="nav-search padding-horizontal-main pr" :style="'padding-top:' + (status_bar_height + 8) + 'px;'">
<view class="nav-search padding-horizontal-main pr" :style="'padding-top:' + (status_bar_height + 5) + 'px;'">
<view class="goods-top-search-bg pa top-0 left-0 right-0 wh-auto">
<image :src="theme_static_url + 'goods-top-bg.png'" mode="top" class="wh-auto ht-auto"></image>
</view>
@ -20,7 +20,7 @@
</block>
<!-- 分类内容 -->
<view v-if="category_list.length > 0" :class="'category-content bs-bb pr ' + (category_show_level == 0 ? 'goods-model' : '')" :style="'height:calc(100vh - ' + (status_bar_height + 48) + 'px);'">
<view v-if="category_list.length > 0" :class="'category-content bs-bb pr bg-green ' + (category_show_level == 0 ? 'goods-model' : '')" :style="'height:calc(100vh - ' + (status_bar_height + 45) + 'px);'">
<block v-if="category_show_level == 1">
<!-- 一级模式 -->
<scroll-view scroll-y class="ht-auto">
@ -54,7 +54,7 @@
</view>
</block>
</scroll-view>
<component-nav-more :prop-top="popup_top" :prop-status="popup_status" @open-popup="open_popup_event">
<component-nav-more class="nav-more-top" :prop-top="status_bar_height + 247 + 'px'" :prop-status="popup_status" @open-popup="open_popup_event">
<view class="nav-list-more">
<view class="flex-row flex-warp align-c">
<block v-for="(item, index) in category_list" :key="index">
@ -338,7 +338,7 @@
</view>
</block>
<!-- 购物车底部导航 -->
<view class="botton-nav round pa oh flex-row jc-sb align-c">
<view class="botton-nav round pa oh flex-row jc-sb align-c z-i">
<view class="flex-row align-c flex-1 flex-width">
<view class="cart pr cp top-sm" @tap="cart_event">
<iconfont name="icon-applet-shop-acquiesce" size="36rpx" color="#fff"></iconfont>
@ -440,7 +440,6 @@ export default {
plugins_label_data: null,
theme_color: app.globalData.get_theme_color(),
popup_status: false,
popup_top: "138rpx",
};
},
@ -478,11 +477,6 @@ export default {
this.$refs.user_base.init("goods-category");
}
},
// 下拉刷新
onPullDownRefresh() {
this.init();
},
created() {
// #ifdef H5 || APP
this.popup_top = "98rpx";

1161
pages/index/index.vue
View File

File diff suppressed because it is too large Load Diff