轮播兼容iphone圆角失效问题、用户中心菜单支持列表展示模式
parent
f03435f45a
commit
cb56c7af2f
31
App.vue
31
App.vue
|
|
@ -46,7 +46,9 @@
|
|||
// 分类页面商品列表模式一级分类使用图标类型(0 大图片, 1 icon图标)
|
||||
category_goods_model_icon_type: 0,
|
||||
// 强制使用文字作为logo(默认后台站点设置手机端图片logo->当前指定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/',
|
||||
// 静态资源地址(如系统根目录不在public目录下面请在静态地址后面加public目录、如:https://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;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,6 @@
|
|||
*/
|
||||
.nav-list .nav-item {
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.nav-list .nav-item .item-icon {
|
||||
width: 40rpx;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue