轮播兼容iphone圆角失效问题、用户中心菜单支持列表展示模式

master
gongfuxiang 2023-03-16 11:23:48 +08:00
parent f03435f45a
commit cb56c7af2f
6 changed files with 115 additions and 72 deletions

31
App.vue
View File

@ -46,7 +46,9 @@
// 使0 , 1 icon
category_goods_model_icon_type: 0,
// 使logologo->logo->->
is_logo_use_text: 0,
is_logo_use_text: 0,
// 0 , 1
user_center_nav_show_model_type: 0,
// tabbar
tabbar_pages: [
"/pages/index/index",
@ -57,7 +59,7 @@
//
request_url: 'https://d1.shopxo.vip/',
// publicpublichttps://d1.shopxo.vip/public/
static_url: 'http://shopxo.com/',
static_url: 'https://d1.shopxo.vip/',
// default
system_type: 'default',
//
@ -1245,43 +1247,46 @@
px_to_rpx(value) {
return ((value || 0) == 0) ? 0 : parseInt(value) * 750 / parseInt(this.get_system_info('windowWidth', 0));
},
//
application_client() {
var type = '';
// #ifdef APP
type = 'app';
//#endif
// #endif
// #ifdef H5
type = 'h5';
// #endif
// #ifdef MP
type = 'mp';
//#endif
// #endif
return type;
},
//
application_client_type() {
var value = '';
// #ifdef MP-WEIXIN
value = 'weixin';
//#endif
// #endif
// #ifdef MP-ALIPAY
value = 'alipay';
//#endif
// #endif
// #ifdef MP-BAIDU
value = 'baidu';
//#endif
// #endif
// #ifdef MP-QQ
value = 'qq';
//#endif
// #endif
// #ifdef MP-TOUTIAO
value = 'toutiao';
//#endif
// #endif
// #ifdef MP-KUAISHOU
value = 'kuaishou';
//#endif
// #endif
// #ifdef H5
value = 'h5';
//#endif
// #endif
return value;
},

View File

@ -44,12 +44,11 @@
border-radius: 50%;
padding: 20rpx;
text-align: center;
width: 50rpx;
height: 50rpx;
margin: 0 auto;
-webkit-box-shadow: 0 2px 12px rgb(226 226 226 / 95%);
box-shadow: 0 2px 12px rgb(226 226 226 / 95%);
}
}
.icon-nav-list .item .item-content,
.icon-nav-list .item image {
width: 50rpx !important;
height: 50rpx !important;

View File

@ -17,10 +17,10 @@
</view>
<view class="nav-popup-content">
<view v-if="data_list.length > 0" class="nav-data-list">
<view v-for="(item, index) in data_list" :key="index" class="item cp">
<view class="item-content" :data-value="item.event_value" :data-type="item.event_type" @tap="navigation_event" :style="'background-color:' + (item.bg_color || '#fff')">
<image :src="item.images_url" mode="aspectFit"></image>
</view>
<view v-for="(item, index) in data_list" :key="index" class="item cp">
<view :class="'item-content '+((item.bg_color || null) == null ? 'item-exposed' : '')" :data-value="item.event_value" :data-type="item.event_type" @tap="navigation_event" :style="((item.bg_color || null) == null ? '' : 'background-color:'+item.bg_color+';')">
<image :src="item.images_url" mode="aspectFit"></image>
</view>
<view class="title">{{item.name}}</view>
</view>
</view>
@ -202,23 +202,34 @@
.nav-data-list .item {
width: calc(25% - 60rpx);
float: left;
padding: 30rpx;
padding: 30rpx;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.nav-data-list .item-content {
border-radius: 50%;
padding: 20rpx;
text-align: center;
width: 70rpx;
height: 70rpx;
margin: 0 auto;
-webkit-box-shadow: 0 2px 12px rgb(226 226 226 / 95%);
box-shadow: 0 2px 12px rgb(226 226 226 / 95%);
}
}
.nav-data-list .item-content,
.nav-data-list .item image {
width: 60rpx !important;
height: 60rpx !important;
margin-top: 5rpx;
}
width: 70rpx !important;
height: 70rpx !important;
}
.nav-data-list .item .item-exposed {
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.nav-data-list .item .item-exposed,
.nav-data-list .item .item-exposed image {
width: 110rpx !important;
height: 110rpx !important;
}
.nav-data-list .item .title {
margin-top: 10rpx;
font-size: 28rpx !important;

View File

@ -1,6 +1,6 @@
<template>
<view>
<swiper :indicator-dots="propData.length > 0" :indicator-color="indicator_color" :indicator-active-color="indicator_active_color" :autoplay="propData.length > 0" :circular="circular" :class="'banner banner-'+(propSize || 'default')" v-if="propData.length > 0">
<swiper :indicator-dots="propData.length > 0" :indicator-color="indicator_color" :indicator-active-color="indicator_active_color" :autoplay="propData.length > 0" :circular="circular" :class="'banner border-radius-main oh bg-white spacing-mb banner-'+(propSize || 'default')" v-if="propData.length > 0">
<block v-for="(item, index) in propData" :key="index">
<swiper-item>
<image :src="item.images_url" mode="widthFix" :data-value="item.event_value || item.url" :data-type="item.event_type == undefined ? 1 : item.event_type" @tap="banner_event"></image>
@ -11,7 +11,6 @@
</template>
<script>
const app = getApp();
export default {
data() {
return {
@ -42,13 +41,10 @@
}
};
</script>
<style>
.banner {
background: #fff;
margin-bottom: 20rpx;
border-radius: 20rpx;
overflow: hidden;
}
<style>
.banner {
transform: translateY(0);
}
.banner image {
min-width: 100%;
}

View File

@ -57,7 +57,6 @@
*/
.nav-list .nav-item {
box-sizing: border-box;
padding: 20rpx;
}
.nav-list .nav-item .item-icon {
width: 40rpx;

View File

@ -49,11 +49,11 @@
</navigator>
</block>
</view>
<!-- 订单导航 -->
<view v-if="(navigation_order || null) != null" class="nav-list bg-white bg-white padding-main border-radius-main spacing-mb">
<!-- 主导航 -->
<view :data-value="navigation_order.event_value" :data-type="navigation_order.event_type" @tap="navigation_event" class="nav-item br-b cp">
<view :data-value="navigation_order.event_value" :data-type="navigation_order.event_type" @tap="navigation_event" class="nav-item br-b cp padding-main">
<view class="arrow-right">
<image :src="navigation_order.images_url" class="item-icon va-m" mode="widthFix"></image>
<text class="item-name va-m cr-base margin-left-sm">{{navigation_order.name}}</text>
@ -75,33 +75,61 @@
</block>
</view>
</view>
<!-- 聚合导航 -->
<view class="nav-box padding-main border-radius-main bg-white spacing-mb">
<view class="br-b padding-main item-title fw-b text-size">我的服务</view>
<view class="oh margin-top-sm">
<block v-for="(item, index) in navigation" :key="index">
<!-- 这里不展示订单导航 -->
<block v-if="item.event_value != '/pages/user-order/user-order'">
<view :data-value="item.event_value" :data-type="item.event_type" @tap="navigation_event" class="nav-item padding-main fl tc cp">
<image :src="item.images_url" class="item-icon" mode="widthFix"></image>
<view class="item-name single-text cr-base">{{item.name}}</view>
</view>
</block>
</block>
<!-- 清除缓存 -->
<view class="nav-item padding-main fl tc cp" @tap="remove_user_cache_event">
<image :src="common_static_url+'cache-icon.png'" class="item-icon" mode="widthFix"></image>
<view class="item-name single-text cr-base">{{client_value == 'h5' ? '退出账号' : '清除缓存'}}</view>
</view>
<!-- 联系客服 -->
<view v-if="(common_app_customer_service_tel || null) != null" class="nav-item padding-main fl tc cp" @tap="call_event">
<image :src="common_static_url+'customer-service-icon.png'" class="item-icon" mode="widthFix"></image>
<view class="item-name single-text cr-base">联系客服</view>
</view>
</view>
<view class="padding-main border-radius-main bg-white spacing-mb">
<view class="padding-main item-title fw-b text-size">我的服务</view>
<!-- 列表模式 -->
<view v-if="nav_show_model_type == 1" class="nav-list">
<block v-for="(item, index) in navigation" :key="index">
<!-- 这里不展示订单导航 -->
<block v-if="item.event_value != '/pages/user-order/user-order'">
<view :data-value="item.event_value" :data-type="item.event_type" @tap="navigation_event" class="nav-item br-t cp padding-main">
<view class="arrow-right">
<image :src="item.images_url" class="item-icon va-m" mode="widthFix"></image>
<text class="item-name va-m cr-base margin-left-sm">{{item.name}}</text>
<text v-if="(item.desc || null) != null" class="item-desc fr tr single-text cr-grey">{{item.desc}}</text>
</view>
</view>
</block>
</block>
<!-- 清除缓存 -->
<view class="nav-item br-t cp padding-main" @tap="remove_user_cache_event">
<view class="arrow-right">
<image :src="common_static_url+nav_logout_data.icon+'-icon.png'" class="item-icon va-m" mode="widthFix"></image>
<text class="item-name va-m cr-base margin-left-sm">{{nav_logout_data.name}}</text>
</view>
</view>
<!-- 联系客服 -->
<view v-if="(common_app_customer_service_tel || null) != null" class="nav-item br-t cp padding-main" @tap="call_event">
<view class="arrow-right">
<image :src="common_static_url+'customer-service-icon.png'" class="item-icon va-m" mode="widthFix"></image>
<text class="item-name va-m cr-base margin-left-sm">联系客服</text>
</view>
</view>
</view>
<!-- 默认九方格模式 -->
<view v-else class="nav-box oh br-t margin-top-sm">
<block v-for="(item, index) in navigation" :key="index">
<!-- 这里不展示订单导航 -->
<block v-if="item.event_value != '/pages/user-order/user-order'">
<view :data-value="item.event_value" :data-type="item.event_type" @tap="navigation_event" class="nav-item padding-main fl tc cp">
<image :src="item.images_url" class="item-icon" mode="widthFix"></image>
<view class="item-name single-text cr-base">{{item.name}}</view>
</view>
</block>
</block>
<!-- 清除缓存 -->
<view class="nav-item padding-main fl tc cp" @tap="remove_user_cache_event">
<image :src="common_static_url+nav_logout_data.icon+'-icon.png'" class="item-icon" mode="widthFix"></image>
<view class="item-name single-text cr-base">{{nav_logout_data.name}}</view>
</view>
<!-- 联系客服 -->
<view v-if="(common_app_customer_service_tel || null) != null" class="nav-item padding-main fl tc cp" @tap="call_event">
<image :src="common_static_url+'customer-service-icon.png'" class="item-icon" mode="widthFix"></image>
<view class="item-name single-text cr-base">联系客服</view>
</view>
</view>
</view>
</view>
</view>
@ -121,7 +149,6 @@
<component-copyright></component-copyright>
</view>
</template>
<script>
const app = getApp();
import componentQuickNav from "../../components/quick-nav/quick-nav";
@ -130,17 +157,21 @@
import componentOnlineService from "../../components/online-service/online-service";
var common_static_url = app.globalData.get_static_url('common');
var static_url = app.globalData.get_static_url('user');
var static_url = app.globalData.get_static_url('user');
var client_value = app.globalData.application_client();
export default {
data() {
return {
common_static_url: common_static_url,
static_url: static_url,
client_value: app.globalData.application_client_type(),
static_url: static_url,
avatar: app.globalData.data.default_user_head_src,
user_id: '',
nickname: "用户名",
message_total: 0,
message_total: 0,
nav_logout_data: {
name: (client_value == 'mp') ? '清除缓存' : '退出账号',
icon: (client_value == 'mp') ? 'cache' : 'logout',
},
head_nav_list: [
{ name: "订单总数", url: "user-order", count: 0 },
{ name: "商品收藏", url: "user-favor", count: 0 },
@ -165,7 +196,9 @@
//
top_content_style: 'background-image: url("'+static_url+'nav-top.png");'+'padding-top:'+(parseInt(app.globalData.get_system_info('statusBarHeight', 0))+5)+'px;',
//
qrcode_page_url: null
qrcode_page_url: null,
//
nav_show_model_type: app.globalData.data.user_center_nav_show_model_type
};
},