# Conflicts:
#	config.js
This commit is contained in:
xiao-fajia 2024-09-24 16:26:44 +08:00
commit b4059c6792
4 changed files with 183 additions and 10 deletions

View File

@ -2,7 +2,8 @@
module.exports = { module.exports = {
//baseUrl: 'https://www.nuoyunr.com/admin-api', //baseUrl: 'https://www.nuoyunr.com/admin-api',
// baseUrl: 'http://192.168.1.4:48080', // baseUrl: 'http://192.168.1.4:48080',
baseUrl: 'http://localhost:48080', // baseUrl: 'http://localhost:48080',
baseUrl: 'http://192.168.1.4:48080',
imagesUrl: 'http://shequ.0315e.com/static/images/pages/', imagesUrl: 'http://shequ.0315e.com/static/images/pages/',
baseImageUrl: 'https://www.nuoyunr.com/minio', baseImageUrl: 'https://www.nuoyunr.com/minio',
//wsUrl: 'wss://www.nuoyunr.com/admin-api', //wsUrl: 'wss://www.nuoyunr.com/admin-api',

View File

@ -1,6 +1,36 @@
<template> <template>
<view> <view class="container">
<v-navigation-bar title-color="#333" background-color="#fff" title="卡卷包">
</v-navigation-bar>
<view class="tabbar">
<view v-for="item in tabList" :key="item.value" class="tabItem" :class="{active: activeKey === item.value}">
{{item.title}}
<view v-if="activeKey === item.value" class="activeLine">
</view>
</view>
</view>
<view class="body">
<view class="cardItem">
<view class="cardItemTop">
<image class="cardImg" src="" mode="aspectFill"></image>
<view class="cardInfo">
<view class="cardName">车辆保养卡</view>
<view class="cardEndDate">2024-09-20</view>
</view>
<view class="cardInfoRight">
<view class="cardNum">
<text class="cardNumValue">4</text>
</view>
<view class="cardLabel">可用次数</view>
</view>
</view>
<view class="cardItemBottom">
<view class="useSm">使用说明</view>
<view class="useBtn">去使用</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
@ -13,12 +43,152 @@
}, },
data() { data() {
return { return {
tabList: [{
value: 0,
title: '优惠卷'
},
{
value: 1,
title: '卡包'
}
],
activeKey: 0
}; };
} }
} }
</script> </script>
<style lang="less"> <style lang="less" scoped>
.container {
height: 100%;
background-color: #F0F1F5;
</style> display: flex;
flex-direction: column;
.body {
flex: 1;
height: 0;
box-sizing: border-box;
padding: 30rpx 0;
margin: 0 32rpx;
display: flex;
flex-direction: column;
row-gap: 20rpx;
overflow: auto;
.cardItem {
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 30rpx;
}
.cardItemTop {
display: flex;
align-items: center;
column-gap: 16rpx;
padding-bottom: 32rpx;
border-bottom: 1px solid #ddd;
}
.cardImg {
width: 136rpx;
height: 100rpx;
background-color: #efefef;
}
.cardInfo {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6rpx 0;
.cardName {
font-size: 32rpx;
color: #333333;
}
.cardEndDate {
font-size: 24rpx;
color: #999999;
}
}
.cardInfoRight {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #FC4D4A;
.cardNumValue {
font-size: 64rpx;
}
.cardLabel {
color: #999999;
}
}
}
.cardItemBottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 0 0;
.useSm {
font-size: 24rpx;
color: #999999;
}
.useBtn {
width: 144rpx;
height: 60rpx;
border-radius: 30rpx 30rpx 30rpx 30rpx;
border: 1rpx solid #FC4D4A;
font-size: 28rpx;
color: #FC4D4A;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.tabbar {
background-color: #fff;
display: flex;
align-items: center;
.tabItem {
flex: 1;
width: 0;
display: flex;
justify-content: center;
padding: 30rpx 0;
position: relative;
}
.activeLine {
width: 52rpx;
height: 8rpx;
background: #009EDA;
border-radius: 4rpx 4rpx 4rpx 4rpx;
position: absolute;
left: 50%;
bottom: 2rpx;
transform: translate(-50%, 0);
}
}
</style>

View File

@ -48,7 +48,7 @@
<image class="menu-item-more" src="../../static/icons/homeInfoMore.png" mode="widthFix"></image> <image class="menu-item-more" src="../../static/icons/homeInfoMore.png" mode="widthFix"></image>
</view> </view>
</view> </view>
<view class="menuCard"> <view class="menuCard">
<view @click="goToPage(item.path)" v-for="(item, index) in menuCard2" :key="item.title" class="menu-item"> <view @click="goToPage(item.path)" v-for="(item, index) in menuCard2" :key="item.title" class="menu-item">
<image class="menu-item-icon" :src="item.icon" mode="aspectFit"></image> <image class="menu-item-icon" :src="item.icon" mode="aspectFit"></image>
@ -80,6 +80,7 @@
menuCard2: [ menuCard2: [
{ title: '客服中心', icon: require('@/static/icons/my-menu-icon4.png') }, { title: '客服中心', icon: require('@/static/icons/my-menu-icon4.png') },
{ title: '操作指南', icon: require('@/static/icons/my-menu-icon5.png'), path: "/pages/guideList/guideList" }, { title: '操作指南', icon: require('@/static/icons/my-menu-icon5.png'), path: "/pages/guideList/guideList" },
{ title: '我的卡卷', icon: require('@/static/icons/my-menu-icon5.png'), path: "/pages/my/cardRoll" },
] ]
} }
}, },
@ -240,7 +241,7 @@
height: 32rpx; height: 32rpx;
} }
} }
.menuCard { .menuCard {
width: 686rpx; width: 686rpx;
margin: 30rpx auto 0; margin: 30rpx auto 0;
@ -275,11 +276,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: bold; font-weight: bold;
font-size: 20rpx; font-size: 20rpx;
color: #FFFFFF; color: #FFFFFF;
} }
} }
} }
</style> </style>

View File

@ -220,6 +220,7 @@
flex: 1; flex: 1;
height: 0; height: 0;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
overflow: auto;
} }
.tabList { .tabList {