新增页面

This commit is contained in:
2024-02-05 22:22:37 +08:00
parent 2280c0518b
commit 2610f4e6f1
31 changed files with 1037 additions and 51 deletions

View File

@@ -18,7 +18,6 @@
"@dcloudio/uni-app": "3.0.0-3090920231225001",
"@dcloudio/uni-app-plus": "3.0.0-3090920231225001",
"@dcloudio/uni-components": "3.0.0-3090920231225001",
"@dcloudio/uni-h5": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-weixin": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-xhs": "3.0.0-3090920231225001",
"pinia": "2.0.36",

View File

@@ -0,0 +1,79 @@
<template>
<view class='tab-container'>
<view v-for='(item, index) in titles' :key='index' class='tab-item' :class='{"tab-item-active":currentIndex==index}'
:style='{"flex": fixed?1:0,
"min-width":fixed?"150rpx":"auto",
"color": currentIndex==index?itemActiveColor:itemColor}'
@click.stop='onChange(index)'>
<text>{{ item }}</text>
<view class='indicator' v-if='currentIndex==index' :style='{
background: indicatorColor,
}' />
</view>
</view>
</template>
<script lang='ts' setup>
defineProps({
titles: {
type: Object as PropType<string[]>,
default: ''
},
fixed: {
type: Boolean,
default: true
}
,
itemColor: {
type: String,
default: '#666666'
},
itemActiveColor: {
type: String,
default: '#333333'
},
indicatorColor: {
type: String,
default: '#333333'
}
});
const emits = defineEmits(['change']);
const currentIndex = ref<number>(0);
const onChange = (index: number) => {
currentIndex.value = index;
emits('change', index);
};
</script>
<style lang='scss' scoped>
.tab-container {
display: flex;
flex-direction: row;
background: #FFFFFF;
height: 85rpx;
align-items: center;
.tab-item {
display: flex;
flex-direction: column;
text-align: center;
font-size: 30rpx;
justify-content: center;
align-items: center;
}
.tab-item-active {
@extend .tab-item;
font-size: 34rpx;
.indicator {
width: 68rpx;
height: 6rpx;
margin-top: 13rpx;
}
}
}
</style>

View File

@@ -47,6 +47,64 @@
"navigationBarTitleText": "网页"
}
]
},
{
"root": "pages/home/subs",
"pages": [
{
"path": "group/join",
"style": {
"navigationBarTitleText": "扫码加群"
}
}
]
},
{
"root": "pages/mine/subs",
"pages": [
{
"path": "profile/index",
"style": {
"navigationBarTitleText": "会员信息"
}
},
{
"path": "recharge/index",
"style": {
"navigationBarTitleText": "会员充值"
}
},
{
"path": "coupon/coupon-list",
"style": {
"navigationBarTitleText": "优惠券"
}
},
{
"path": "order/order-list",
"style": {
"navigationBarTitleText": "我的订单"
}
},
{
"path": "order/order-detail",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "address/address-list",
"style": {
"navigationBarTitleText": "收货地址"
}
},
{
"path": "address/add-address",
"style": {
"navigationBarTitleText": "新增收货地址"
}
}
]
}
],
"preloadRule": {
@@ -91,7 +149,7 @@
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarTitleText": "VIP顾客中心",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F7F7F7"
}

View File

@@ -16,33 +16,33 @@
<view class='user-info-card'>
<image class='user-avatar' :src='bannerList[0]' mode='aspectFill' />
<text class='user-name'>设计小仙女</text>
<view class='integral-view'>
<text class='user-name primary-text-color'>设计小仙女</text>
<view class='integral-view primary-text-color'>
<text>1000</text>
<text>积分</text>
</view>
<view class='divider' style='height: 83rpx' />
<view class='balance-view'>
<text>998.00</text>
<text class='accent-text-color'>998.00</text>
<text>余额</text>
</view>
</view>
<view class='menu-view'>
<view>
<image :src='assetsUrl+"ic_member_card.png"' style='width: 108rpx;height: 72rpx;padding: 11rpx 0' />
<view @click.stop='goPath("/pages/mine/subs/recharge/index")'>
<image :src='assetsUrl("ic_member_card.png")' style='width: 108rpx;height: 72rpx;padding: 11rpx 0' />
<text>会员充值</text>
</view>
<view class='divider' style='margin: 0;height: 153rpx' />
<view>
<image :src='assetsUrl + "ic_coupon.png"' style='width: 108rpx;height: 95rpx' />
<view @click.stop='goPath("/pages/mine/subs/coupon/coupon-list")'>
<image :src='assetsUrl("ic_coupon.png")' style='width: 108rpx;height: 95rpx' />
<text>优惠券</text>
</view>
</view>
<view class='second-menu-view'>
<view v-for='(item, index) in submenuList' :key='index'>
<view class='menu-item' @click='toPath(item.path)'>
<view class='menu-item' @click='goPath(item.path)'>
<image :src='item.icon' />
<text>{{ item.title }}</text>
</view>
@@ -65,6 +65,7 @@
<script setup lang='ts'>
import { useUserStore } from '@/store';
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';
const store = useUserStore();
@@ -77,18 +78,18 @@ const currentBannerIndex = ref(0);
const submenuList = [
{
title: '注册有礼',
icon: assetsUrl + 'ic_register_gift.png',
icon: assetsUrl('ic_register_gift.png'),
path: '/pages/order/order'
},
{
title: '团购秒杀',
icon: assetsUrl + 'ic_groupbuy.png',
icon: assetsUrl('ic_groupbuy.png'),
path: '/pages/order/order'
},
{
title: '入群有礼',
icon: assetsUrl + 'ic_group_gift.png',
path: '/pages/order/order'
icon: assetsUrl('ic_group_gift.png'),
path: '/pages/home/subs/group/join'
}
];
@@ -164,7 +165,6 @@ console.log('store.user_name', store.user_name);
flex: 1;
font-size: 30rpx;
font-weight: bold;
color: #333333;
margin-left: 16rpx;
}
@@ -177,13 +177,11 @@ console.log('store.user_name', store.user_name);
text:nth-child(1) {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
text:nth-child(2) {
font-size: 26rpx;
font-weight: 400;
color: #333333;
margin-top: 10rpx;
}
}
@@ -194,7 +192,6 @@ console.log('store.user_name', store.user_name);
text:nth-child(1) {
font-size: 36rpx;
font-weight: bold;
color: #F32B2B;
}
}
}

View File

@@ -0,0 +1,56 @@
<template>
<view class='content card-view'>
<text class='title'>入群步骤</text>
<view class='indicator' />
<text class='step-title'>
1.长按识别下方二维码添加xxxx
</text>
<view class='divider' style='margin-top: 28rpx' />
<image :src=' assetsUrl("test_qrcode.png")' />
<text class='step-title'>
2.识别xxxx发您的二维码即可入群
</text>
</view>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
</script>
<style lang='scss' scoped>
.content {
display: flex;
margin: 20rpx;
padding: 37rpx 20rpx 30rpx 20rpx;
justify-content: center;
align-items: center;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.indicator {
width: 72rpx;
height: 10rpx;
background: #333333;
border-radius: 50rpx;
margin-top: 10rpx;
}
.step-title {
font-size: 30rpx;
font-weight: 400;
color: #333333;
margin-top: 55rpx;
}
image {
width: 432rpx;
height: 432rpx;
margin-top: 67rpx;
}
</style>

View File

@@ -2,7 +2,7 @@
<view class='content'>
<view class='search-view'>
<view class='search-input'>
<image :src='assetsUrl+"ic_search.png"'></image>
<image :src=' assetsUrl("ic_search.png")'></image>
<input placeholder='输入名称、款号搜索' />
</view>
</view>
@@ -22,14 +22,14 @@
<image class='goods-image' :src='item.goodsImage' />
<text class='goods-name'>{{ item.goodsName }}</text>
<text class='goods-price'>¥{{ item.goodsPrice }}</text>
<image class='add-image' :src='assetsUrl+"ic_add_goods.png"' />
<image class='add-image' :src=' assetsUrl("ic_add_goods.png")' />
</view>
</grid-view>
</scroll-view>
</view>
<view class='shopping-cart'>
<image :src='assetsUrl+"ic_shopping_cart.png"' />
<image :src=' assetsUrl("ic_shopping_cart.png")' />
<text>10</text>
</view>
</view>
@@ -95,6 +95,7 @@ const changeCategory = (index: number) => {
align-items: center;
background: #F7F7F7;
padding: 17rpx 23rpx;
font-size: 26rpx;
width: 100%;
image {
@@ -127,6 +128,7 @@ const changeCategory = (index: number) => {
text {
width: 100%;
text-align: center;
font-size: 30rpx;
}
}
@@ -219,6 +221,7 @@ const changeCategory = (index: number) => {
top: -5rpx;
right: -5rpx;
color: white;
font-size: 26rpx;
position: absolute;
border-radius: 50%;
border: 2rpx solid #FFFFFF;

View File

@@ -3,18 +3,18 @@
<view class='user-info-view'>
<image
class='image-bg'
:src="assetsUrl+'test_bg.png'"
:src=" assetsUrl('test_bg.png')"
/>
<view class='top-row'>
<image :src='assetsUrl+"ic_coupon.png"' />
<image :src=' assetsUrl("ic_coupon.png")' />
<view class='u-flex-column'>
<text>设计小仙女</text>
<text>15542535625</text>
</view>
<image :src='assetsUrl+"ic_qrcode_white.png"' />
<image :src=' assetsUrl("ic_qrcode_white.png")' />
</view>
<view class='bottom-row'>
@@ -22,11 +22,11 @@
<text>100</text>
<text>积分</text>
</view>
<view>
<view @click.stop='goPath("/pages/mine/subs/recharge/index")'>
<text>255.00</text>
<text>余额</text>
</view>
<view>
<view @click.stop='goPath("/pages/mine/subs/coupon/coupon-list")'>
<text>3</text>
<text>优惠券</text>
</view>
@@ -36,14 +36,14 @@
<view class='integral-add-view'>
<text>将会员卡放入微信卡包及时了解积分变动</text>
<text>去添加</text>
<image :src='assetsUrl+"ic_arrow_right_yellow.png"' />
<image :src=' assetsUrl("ic_arrow_right_yellow.png")' />
</view>
<text class='title-view'>
我的订单
</text>
<view class='card-order-view'>
<view v-for='(item,index) in orderActionList' :key='index'>
<view v-for='(item,index) in orderActionList' :key='index' @click.stop='goPath(item.path)'>
<image :src='item.icon' />
<text>{{ item.title }}</text>
<text v-if='item.amount>0'>{{ item.amount }}</text>
@@ -55,7 +55,7 @@
</text>
<view class='card-service-view'>
<view v-for='(item,index) in serviceList' :key='index'>
<view v-for='(item,index) in serviceList' :key='index' @click.stop='goPath(item.path)'>
<image :src='item.icon' />
<text>{{ item.title }}</text>
</view>
@@ -66,47 +66,48 @@
<script setup lang='ts'>
import { useUserStore } from '@/store';
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';
const orderActionList = ref([{
title: '进行中',
icon: assetsUrl + 'ic_order_progressing.png',
path: '',
icon: assetsUrl('ic_order_progressing.png'),
path: '/pages/mine/subs/order/order-list',
amount: 10
}, {
title: '已结束',
icon: assetsUrl + 'ic_order_finish.png',
path: '',
icon: assetsUrl('ic_order_finish.png'),
path: '/pages/mine/subs/order/order-list?index=1',
amount: 0
}, {
title: '全部订单',
icon: assetsUrl + 'ic_order_all.png',
path: '',
icon: assetsUrl('ic_order_all.png'),
path: '/pages/mine/subs/order/order-list?index=2',
amount: 0
}]);
const serviceList = [
{
title: '会员信息',
icon: assetsUrl + 'ic_member_service_info.png',
path: ''
icon: assetsUrl('ic_member_service_info.png'),
path: '/pages/mine/subs/profile/index'
},
{
title: '消费记录',
icon: assetsUrl + 'ic_member_service_record.png',
icon: assetsUrl('ic_member_service_record.png'),
path: ''
},
{
title: '关注公众号',
icon: assetsUrl + 'ic_member_service_follow.png',
icon: assetsUrl('ic_member_service_follow.png'),
path: ''
},
{
title: '收货地址',
icon: assetsUrl + 'ic_member_service_address.png',
path: ''
icon: assetsUrl('ic_member_service_address.png'),
path: '/pages/mine/subs/address/address-list'
}, {
title: '联系商家',
icon: assetsUrl + 'ic_member_service_contact.png',
icon: assetsUrl('ic_member_service_contact.png'),
path: ''
}
// ,{
@@ -288,6 +289,7 @@ console.log('store.user_name', store.user_name);
min-width: 40rpx;
min-height: 35rpx;
align-items: center;
font-size: 26rpx;
justify-content: center;
background: #F32B2B;
border-radius: 50%;
@@ -309,6 +311,7 @@ console.log('store.user_name', store.user_name);
align-items: center;
justify-content: center;
padding: 30rpx 0;
font-size: 26rpx;
}
image {

View File

@@ -0,0 +1,11 @@
<template>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
</style>

View File

@@ -0,0 +1,35 @@
<template>
<view class='content'>
<scroll-view :scroll-y='true'>
<address-item v-for='(item,index) in addressList' :key='index' :item='item' />
</scroll-view>
<view class='bottom-button-view'>
<button class='primary-button' @click.stop='goPath("add-address")'>+新增地址</button>
</view>
</view>
</template>
<script lang='ts' setup>
import AddressItem from './components/address-item.vue';
import { goPath } from '@/utils';
const addressList = ref<{
name: string,
mobile: string,
address: string,
status: number
}[]>([{
name: '黄先生',
mobile: '13xxxxxx8900',
status: 1
}, {
name: '李先生',
mobile: '13xxxxxx8900',
status: 0
}]);
</script>
<style lang='scss' scoped>
</style>

View File

@@ -0,0 +1,92 @@
<template>
<view class='card-view'>
<view class='c-flex-row'>
<text>默认</text>
<text>
黄先生
<!-- {{ item.name }}-->
</text>
<text>
13xxxxxx8900
<!-- {{ item.mobile }}-->
</text>
</view>
<text class='address'>
湖南省 长沙市 雨花区 地址地址地址
{{ item.address }}
</text>
<view class='btn-view c-flex-row'>
<text>编辑</text>
<text>删除</text>
</view>
</view>
</template>
<script lang='ts' setup>
defineProps({
item: <any>[]
});
</script>
<style lang='scss' scoped>
.card-view {
margin: 20rpx 30rpx;
padding: 38rpx 30rpx 30rpx 34rpx;
view:nth-of-type(1) {
text:nth-of-type(1) {
border-radius: 5rpx;
border: 1rpx solid #F32B2B;
color: #F32B2B;
font-size: 24prx;
padding: 1rpx 8rpx;
}
text:nth-of-type(2) {
font-size: 32rpx;
font-weight: bold;
margin-left: 10rpx;
color: #333333;
}
text:nth-of-type(3) {
font-size: 32rpx;
font-weight: bold;
margin-left: 20rpx;
color: #333333;
}
}
.address {
font-size: 26rpx;
font-weight: 400;
margin-top: 10rpx;
color: #999999;
}
.btn-view {
display: flex;
align-self: flex-end;
align-items: center;
text:nth-of-type(n+1) {
display: flex;
width: 84rpx;
height: 48rpx;
border-radius: 24rpx;
border: 1rpx solid #F32B2B;
align-items: center;
justify-content: center;
color: #F32B2B;
margin-left: 20rpx;
}
text:nth-of-type(2) {
border: 1rpx solid #DDDDDD;
color: #666666;
}
}
}
</style>

View File

@@ -0,0 +1,122 @@
<template>
<view class='coupon-content'>
<image v-if='item.status==0' :src='assetsUrl("bg_coupon.png")' />
<image v-else-if='item.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
<view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
<text>{{ item.price }}</text>
<text>{{ item.threshold }}元可用</text>
</view>
<view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
<text>{{ item?.title }}</text>
<text>有效期至{{ item.useTime }}</text>
<text class='btn-text' :class='{"btn-text-disabled": item.status==1}'>
立即使用
</text>
</view>
</view>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
defineProps({
item: Object
});
</script>
<style lang='scss' scoped>
.coupon-content {
display: flex;
flex-direction: row;
height: 200rpx;
position: relative;
margin: 30rpx 30rpx 10rpx 30rpx;
image {
width: 100%;
height: 100%;
position: absolute;
}
.left-content {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
padding-left: 50rpx;
text:nth-of-type(1) {
font-size: 55rpx;
font-weight: bold;
}
text:nth-of-type(1):after {
content: '元';
font-size: 24rpx;
}
text:nth-of-type(2) {
font-size: 26rpx;
font-weight: 400;
}
}
.left-content-disabled {
@extend .left-content;
color: #C2C2C2;
}
.right-content {
display: flex;
flex-direction: column;
position: relative;
flex: 1;
justify-content: center;
margin-left: 100rpx;
text:nth-of-type(1) {
font-size: 30rpx;
}
text:nth-of-type(2) {
font-size: 26rpx;
margin-top: 20rpx;
color: #333333;
}
.btn-text {
display: flex;
width: 146rpx;
height: 55rpx;
align-items: center;
justify-content: center;
border-radius: 28rpx;
border: #F32B2B solid 2rpx;
font-size: 28rpx;
font-weight: bold;
color: #F32B2B;
position: absolute;
right: 20rpx;
}
.btn-text-disabled {
@extend .btn-text;
color: #C2C2C2;
border: none;
}
}
.right-content-disabled {
@extend .right-content;
color: #C2C2C2;
text:nth-of-type(2) {
color: #C2C2C2;
}
}
}
</style>

View File

@@ -0,0 +1,68 @@
<template>
<tabbar :titles='["全部","未使用","已使用"]' :indicator-color='"#D95554"' @change='args => {}' />
<scroll-view :scroll-y='true' class='content'>
<coupon-item v-for='item in coupons' :item='item' />
</scroll-view>
</template>
<script lang='ts' setup>
import CouponItem from './components/coupon-item.vue';
const coupons = [{
id: 1,
title: '优惠券',
desc: '满100减10',
price: 100,
threshold: 10,
priceDesc: '满100减10',
useTime: '2021-12-31',
status: 1,
useStatus: '未使用'
}, {
id: 1,
title: '优惠券',
desc: '满100减10',
price: 200,
threshold: 80,
priceDesc: '满100减10',
useTime: '2021-01-01',
status: 1,
useStatus: '未使用'
}, {
id: 1,
title: '优惠券',
desc: '满100减10',
price: 300,
threshold: 60,
priceDesc: '满100减10',
useTime: '2023-12-31',
status: '0',
useStatus: '未使用'
}, {
id: 1,
title: '优惠券',
desc: '满100减10',
price: 50,
threshold: 50,
priceDesc: '满100减10',
useTime: '2021-10-31',
status: 0,
useStatus: '未使用'
}, {
id: 1,
title: '优惠券',
desc: '满1000减30',
price: 200,
threshold: 30,
priceDesc: '满100减10',
useTime: '2024-12-31',
status: 0,
useStatus: '未使用'
}];
</script>
<style lang='scss' scoped>
</style>

View File

@@ -0,0 +1,11 @@
<template>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
</style>

View File

@@ -0,0 +1,11 @@
<template>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
</style>

View File

@@ -0,0 +1,11 @@
<template>
<tabbar :titles="['全部', '进行中', '已结束']" @change='args => {}' />
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view class='content'>
<view class='top-card-view'>
<image class='bg-image' :src='assetsUrl("test_bg.png")' />
<image class='avatar-image' :src='assetsUrl("test_bg.png")' />
<text>设计小仙女</text>
<text>会员卡</text>
</view>
<view class='basic-info-view c-flex-column'>
<view class='c-flex-row'>
<text>头像</text>
<view class='avatar-view'>
<image class='avatar-image' :src='assetsUrl("test_bg.png")' />
<button class='avatar-btn' open-type='chooseAvatar' />
</view>
</view>
<view class='c-flex-row'>
<text class='nickname'>姓名</text>
<input placeholder='请输入姓名' type='nickname' />
</view>
<view class='divider' />
<view class='c-flex-row'>
<text>手机号</text>
<input placeholder='15523653265' />
</view>
<view class='divider' />
<view class='c-flex-row'>
<text>性别</text>
<view class='c-flex-row' @click.stop='changeGender(0)'>
<image class='gender-image'
:src='assetsUrl(currentGender==0?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
<text class='gender-text'></text>
</view>
<view class='c-flex-row' @click.stop='changeGender(1)'>
<image class='gender-image'
:src='assetsUrl(currentGender==1?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
<text class='gender-text'></text>
</view>
</view>
<view class='divider' />
<view class='c-flex-row'>
<text>生日</text>
<picker mode='date' @change='changeDate'>
<text>请选择生日</text>
</picker>
</view>
</view>
<button class='primary-button'>保存</button>
</view>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
const currentGender = ref<number>(0);
const changeGender = (index: number) => {
currentGender.value = index;
};
const changeDate = (e: any) => {
console.log(e);
};
</script>
<style lang='scss' scoped>
.top-card-view {
display: flex;
height: 338rpx;
position: relative;
margin: 30rpx;
.bg-image {
width: 100%;
height: 100%;
border-radius: 30rpx;
position: absolute;
}
.avatar-image {
width: 95rpx;
height: 95rpx;
margin-left: 36rpx;
margin-top: 60rpx;
background: #FFFFFF;
border: 1rpx solid #707070;
position: relative;
border-radius: 50%;
}
text:nth-of-type(1) {
font-size: 30rpx;
font-weight: 800;
color: #FFFFFF;
position: absolute;
top: 64rpx;
left: 158rpx;
}
text:nth-of-type(2) {
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
position: absolute;
top: 116rpx;
left: 158rpx;
}
}
.basic-info-view {
margin: 0 30rpx 30rpx 30rpx;
.avatar-view {
display: flex;
position: relative;
.avatar-image {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
}
.avatar-btn {
@extend .avatar-image;
position: absolute;
border: none;
background: #00000000;
}
}
input {
font-size: 30rpx;
font-weight: 400;
color: #333333;
}
view:not(.divider):nth-of-type(n+1) {
padding: 0 20rpx;
height: 120rpx;
.gender-image {
width: 37rpx;
height: 37rpx;
}
.gender-text {
width: 80rpx;
color: #333333;
font-size: 30rpx;
margin-left: 10rpx;
}
text:not(.gender-text):nth-of-type(1) {
font-size: 30rpx;
width: 120rpx;
font-weight: 400;
color: #7E7E7E;
}
.nickname:before {
content: '*';
color: #F32B2B;
}
}
}
</style>

View File

@@ -0,0 +1,146 @@
<template>
<view class='content'>
<view class='balance-view'>
<image :src='assetsUrl("bg_member_recharge.png")' />
<view class='balance-content'>
<text>累计余额</text>
<text>1</text>
</view>
<view class='balance-content'>
<text>当前余额</text>
<text class='accent-text-color'>1</text>
</view>
</view>
<view class='recharge-option-card'>
<text>充值金额</text>
<tabbar :titles='rechargeItems?.map(res=>res.title)' @change='change' />
<view class='divider' />
<view class='option-item'>
<image :src='assetsUrl("bg_member_recharge_item.png")' />
<text>充值{{ rechargeItems[currentIndex].title }}{{ rechargeItems[currentIndex].price / 10 }}</text>
<text class='accent-text-color'>
实得{{ rechargeItems[currentIndex].price + (rechargeItems[currentIndex].price / 10) }}
</text>
</view>
</view>
<view class='bottom-button-view'>
<button class='primary-button'>充值</button>
</view>
</view>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
const rechargeItems = ref([
{
title: '100元',
price: 100
},
{
title: '200元',
price: 200
},
{
title: '500元',
price: 500
}, {
title: '1000元',
price: 1000
}]);
const currentIndex = ref<number>(0);
const change = (index: number) => {
currentIndex.value = index;
};
</script>
<style lang='scss' scoped>
.balance-view {
display: flex;
flex-direction: row;
height: 280rpx;
position: relative;
image {
width: 100%;
height: 100%;
position: absolute;
}
.balance-content {
display: flex;
flex-direction: column;
position: relative;
flex: 1;
align-items: center;
justify-content: center;
color: white;
text:nth-of-type(1) {
font-size: 30rpx;
}
text:nth-of-type(2) {
font-size: 40rpx;
margin-top: 10rpx;
}
}
}
.recharge-option-card {
display: flex;
flex-direction: column;
background: #FFFFFF;
border-radius: 30rpx 30rpx 0 0;
position: relative;
margin-top: -25rpx;
text:nth-of-type(1) {
font-size: 30rpx;
font-weight: bold;
color: #333333;
margin-top: 20rpx;
margin-left: 30rpx;
margin-bottom: 20rpx;
}
.option-item {
display: flex;
flex-direction: column;
position: relative;
margin: 36rpx 20rpx;
image {
width: 100%;
height: 167rpx;
border-radius: 20rpx;
}
text:nth-of-type(1) {
font-size: 36rpx;
color: #FFFFFF;
margin-top: 27rpx;
margin-left: 30rpx;
position: absolute;
}
text:nth-of-type(2) {
display: flex;
font-size: 30rpx;
margin-top: 85rpx;
margin-left: 30rpx;
align-items: center;
justify-content: center;
width: 185rpx;
height: 50rpx;
background: #FFFFFF;
border-radius: 25rpx;
position: absolute;
}
}
}
</style>

View File

@@ -1,7 +1,7 @@
<template>
<view class='content'>
<view class='member-info-view'>
<image :src='assetsUrl+"ic_crown.png"' />
<image :src='assetsUrl("ic_crown.png")' />
<view class='flex flex-col'>
<text>武汉白银会员</text>
<view />
@@ -13,7 +13,7 @@
<text class='balance-text'>账户余额256.32</text>
<view class='btn-recharge'>
<text>去充值</text>
<image :src='assetsUrl+"ic_arrow_right.png"' />
<image :src='assetsUrl("ic_arrow_right.png")' />
</view>
</view>
<view class='divider' />
@@ -29,7 +29,7 @@
<view class='card-info-view'>
<view>
<image :src='assetsUrl+"ic_card.png"' />
<image :src='assetsUrl("ic_card.png")' />
<text>卡信息</text>
</view>

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@@ -1,4 +1,79 @@
page {
font-size: 28rpx;
background-color: #f9f9f8;
font-size: 25rpx;
background-color: #F5F5F5;
}
.primary-text-color {
color: #333333;
}
.secondary-text-color {
color: #666666;
}
.accent-text-color {
color: #F32B2B;
}
.primary-bg-color {
background: #FFFFFF;
}
.accent-bg-color {
background: #333333;
}
.c-flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.c-flex-column {
display: flex;
flex-direction: column;
}
.content {
@extend .c-flex-column;
}
.card-view {
@extend .c-flex-column;
background: #FFFFFF;
border-radius: 20rpx;
justify-content: center;
}
.divider {
width: 100%;
height: 0.3rpx;
background: #E4E4E4;
}
.bottom-button-view {
display: flex;
position: fixed;
background: #FFFFFF;
bottom: 0;
left: 0;
right: 0;
padding: 10rpx 30rpx 78rpx 30rpx;
button {
width: 100%;
}
}
.primary-button {
@extend .accent-bg-color;
display: flex;
height: 80rpx;
border-radius: 43rpx;
font-size: 30rpx;
font-weight: bold;
align-items: center;
justify-content: center;
min-width: 80%;
color: #FFFFFF;
}

View File

@@ -0,0 +1,20 @@
import { defineStore } from 'pinia';
const useShoppingCartStore = defineStore('shoppingCart', {
state: () => ({
list: [],
total: 0,
count: 0
}),
getters: {
getList() {
return this.list;
},
getTotal() {
return this.total;
},
getCount() {
return this.count;
}
}
});

View File

@@ -1 +1 @@
export const assetsUrl ='/static/images/'
export const assetsUrl = (name) => `/static/images/${name}`;

View File

@@ -10,11 +10,11 @@ export function mpUpdate() {
title: '更新提示',
content: '检测到新版本,是否下载新版本并重启小程序?',
success(res) {
if (res.confirm) {
if(res.confirm) {
// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
}
},
}
});
});
updateManager.onUpdateFailed(() => {
@@ -22,7 +22,22 @@ export function mpUpdate() {
uni.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~',
showCancel: false,
showCancel: false
});
});
}
export function showToast(title: string, icon: string = 'none', duration: number = 2000) {
uni.showToast({
title,
icon,
duration
});
}
export function goPath(path: string) {
uni.navigateTo({
url: path
}).then(r => {
});
}

View File

@@ -10,5 +10,6 @@ declare module 'vue' {
PageNav: typeof import('./../src/components/page-nav/page-nav.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Tabbar: typeof import('./../src/components/tabbar/tabbar.vue')['default']
}
}