新增页面
79
src/components/tabbar/tabbar.vue
Normal 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>
|
@@ -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"
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
56
src/pages/home/subs/group/join.vue
Normal 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>
|
@@ -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;
|
||||
|
@@ -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 {
|
||||
|
11
src/pages/mine/subs/address/add-address.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
35
src/pages/mine/subs/address/address-list.vue
Normal 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>
|
92
src/pages/mine/subs/address/components/address-item.vue
Normal 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>
|
122
src/pages/mine/subs/coupon/components/coupon-item.vue
Normal 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>
|
68
src/pages/mine/subs/coupon/coupon-list.vue
Normal 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>
|
11
src/pages/mine/subs/order/components/order-item.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
11
src/pages/mine/subs/order/order-detail.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
11
src/pages/mine/subs/order/order-list.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<tabbar :titles="['全部', '进行中', '已结束']" @change='args => {}' />
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
173
src/pages/mine/subs/profile/index.vue
Normal 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>
|
146
src/pages/mine/subs/recharge/index.vue
Normal 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>
|
@@ -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>
|
||||
|
||||
|
BIN
src/static/images/bg_coupon.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
src/static/images/bg_coupon_expired.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
src/static/images/bg_coupon_used.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
src/static/images/bg_member_recharge.png
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
src/static/images/bg_member_recharge_item.png
Normal file
After Width: | Height: | Size: 98 KiB |
BIN
src/static/images/ic_checkbox_active.png
Normal file
After Width: | Height: | Size: 4.4 KiB |
BIN
src/static/images/ic_checkbox_normal.png
Normal file
After Width: | Height: | Size: 4.5 KiB |
BIN
src/static/images/test_qrcode.png
Normal file
After Width: | Height: | Size: 46 KiB |
@@ -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;
|
||||
}
|
||||
|
20
src/store/modules/shoppingcart/index.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
});
|
@@ -1 +1 @@
|
||||
export const assetsUrl ='/static/images/'
|
||||
export const assetsUrl = (name) => `/static/images/${name}`;
|
||||
|
@@ -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 => {
|
||||
});
|
||||
}
|
||||
|