liaofei
/
mall-app-t
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(我的)

This commit is contained in:
Ankkaya 2024-05-24 17:24:44 +08:00
parent 1c4bdd8496
commit dbd3b1f839
12 changed files with 531 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
App.vue
View File

@ -4,6 +4,7 @@ import { peachInit } from './peach'
onLaunch(() => {
// 隐藏原生导航栏 使用自定义底部导航
uni.hideTabBar()
peachInit()
})

30
pages.json
View File

@ -8,6 +8,15 @@
},
"pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/my",
"style": {
"navigationBarTitleText": "我的"
},
"meta": {
"auth": false
}
},
{
"path": "pages/index/index",
"style": {
@ -27,9 +36,9 @@
}
},
{
"path": "pages/index/category",
"path": "pages/index/product",
"style": {
"navigationBarTitleText": "uni-app"
"navigationBarTitleText": "产品"
},
"meta": {
"auth": false
@ -45,6 +54,23 @@
}
}
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/index/product"
},
{
"pagePath": "pages/index/icons"
},
{
"pagePath": "pages/index/my"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",

137
pages/index/index.vue
View File

@ -1,27 +1,37 @@
<template>
<pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
<view :style="[{ paddingTop: peach.$platform.navbar + 'px' }]"></view>
<view :style="[{ paddingTop: peach.$platform.navBar + 'px' }]"></view>
<view class="dashboard-module ss-p-x-30">
<view class="merchant-info flex align-center">
<image class="logo" :src="state.merchantInfo.logo" mode="aspectFill"></image>
<view class="detail flex flex-column justify-center gap-10">
<view class="name ss-font-26">{{ state.merchantInfo.name }}</view>
<view class=" description ss-font-26">{{ state.merchantInfo.description }}</view>
<view class="description ss-font-26">{{ state.merchantInfo.description }}</view>
</view>
</view>
<view class="statistic">
<view class="title ss=font-24">
{{ `今日收款金额（成功收款${state.statistic.total}）笔` }}
<view class="statistic ss-m-t-24">
<view class="title ss-font-24 ss-m-b-20">
{{ `今日收款金额（成功收款${state.statistic.total}笔）` }}
</view>
<view class="income">
<view class="left">
<view class="unit">￥</view>
<view class="sincome">{{ state.statistic.income }}</view>
<view class="income flex justify-between align-center">
<view class="left flex align-center">
<view class="unit self-start">￥</view>
<view class="sincome ss-font-60">{{ state.statistic.income }}</view>
</view>
<button class="right-btn ss-reset-button">查看详情</button>
</view>
</view>
<view class="more ss-m-t-70">
<view class="title ss-m-b-30">基础数据</view>
<view class="items">
<view class="item" v-for="item in state.more">
<view class="label">{{ item.name }}</view>
<view class="value">{{ item.value }}</view>
<view class="last">昨日 {{ item.last }}</view>
</view>
<button class="right">查看详情</button>
</view>
</view>
</view>
@ -31,12 +41,11 @@
<script setup>
import { ref } from 'vue'
import peach from '@/peach'
console.log()
import bg from '@/static/bg-page.png'
const bgStyle = {
backgroundImage:
'http://101.43.181.163:9001/mall-backend/24dd085ca57fbfaa27c3e16788237b1d7a95c854c01b5e3e219aad6709bbb748.jpg',
backgroundImage: bg,
imageType: 'local',
backgroundColor: '#fff',
description: '',
}
@ -48,8 +57,36 @@ const state = ref({
description: '测试商家描述',
},
statistic: {
total: 100
}
total: 100,
income: 2222222222,
},
more: [
{
name: '支付金额',
value: 10000000,
last: 100000000,
},
{
name: '访客数',
value: 100000,
last: 100000,
},
{
name: '订单数',
value: 100000,
last: 10000,
},
{
name: '客单价',
value: 10000,
last: 100,
},
{
name: '支付买家数',
value: 100,
last: 100,
},
],
})
</script>
@ -61,13 +98,77 @@ const state = ref({
height: 80rpx;
margin-right: 20rpx;
}
.detail {
.name {
color: #fff;
}
.description {
color: #fff;
opacity: 0.4;
}
}
}
.statistic {
height: 284rpx;
height: 200rpx;
background-color: #fffefe;
opacity: 0.9;
border-radius: 26rpx;
padding: 31rpx 40rpx;
.title {
font-weight: 500;
color: var(--ui-TC);
}
.income {
.left {
font-weight: 600;
flex: 1;
color: var(--ui-BG-Main);
.unit {
position: relative;
top: 4px;
}
}
.right-btn {
width: 161rpx;
height: 63rpx;
background-color: var(--ui-BG-Main);
color: #fff;
}
}
}
.more {
.title {
font-weight: 600;
}
.items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30rpx 30rpx;
.item {
background: linear-gradient(90deg, #ffebeb 0%, #ffffff 100%);
border-radius: 18rpx;
padding: 19rpx 32rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 170rpx;
.name {
font-weight: 600;
color: var(--ui-TC);
}
.value {
font-weight: 600;
font-size: 31rpx;
color: var(--ui-TC);
}
.last {
font-weight: 400;
color: var(--ui-TC-2);
}
}
}
}
}
</style>

181
pages/index/my.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<pb-layout navbar="inner" tabbar="/pages/index/my" :bgStyle="bgStyle">
<view :style="[{ paddingTop: peach.$platform.navBar + 'px' }]"></view>
<view class="my-module ss-p-x-30">
<view class="user-info flex align-center">
<image class="avatar" :src="state.userInfo.avatar" mode="aspectFill"></image>
<view class="detail flex flex-column justify-center gap-10">
<view class="name ss-font-26">{{ state.userInfo.name }}</view>
<view class="description ss-font-26">{{ state.userInfo.description }}</view>
</view>
</view>
<view class="statistic ss-m-t-24">
<view class="title ss-font-24 ss-m-b-20"> 账户余额 </view>
<view class="remain flex justify-between align-center">
<view class="left flex align-center">
<view class="unit self-start">￥</view>
<view class="sremain ss-font-60">{{ state.statistic.remain }}</view>
</view>
<button class="right-btn ss-reset-button">查看详情</button>
</view>
<view class="cent ss-m-t-20"> 总获取积分{{ state.statistic.cent }} </view>
</view>
<view class="menu ss-m-t-70">
<view class="title ss-m-b-30">我的服务</view>
<view class="items">
<view class="item" v-for="item in state.menus">
<image class="icon" :src="item.icon" mode="aspectFill"></image>
<view class="label">{{ item.name }}</view>
</view>
</view>
</view>
</view>
<view class="ss-p-x-30 bottom">
<button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit">退出登录</button>
</view>
</pb-layout>
</template>
<script setup>
import { ref } from 'vue'
import peach from '@/peach'
const bgStyle = {
backgroundImage: '/static/bg-page.png',
imageType: 'local',
backgroundColor: '#fff',
description: '',
}
const state = ref({
userInfo: {
name: 'Ankkaya',
avatar: '/static/logo.png',
description: '测试商家描述',
},
statistic: {
remain: 2222222222,
cent: 10000,
},
menus: [
{
name: '余额提现',
icon: '/static/withdraw.png',
path: '',
},
{
name: '购买积分',
icon: '/static/buycent.png',
path: '',
},
{
name: '分发积分',
icon: '/static/dispensecent.png',
path: '',
},
{
name: '提现规则',
icon: '/static/rule.png',
path: '',
},
],
})
</script>
<style lang="scss" scoped>
.my-module {
.user-info {
.avatar {
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
}
.detail {
.name {
color: #fff;
}
.description {
color: #fff;
opacity: 0.4;
}
}
}
.statistic {
height: 200rpx;
background-color: #fffefe;
opacity: 0.9;
border-radius: 26rpx;
padding: 31rpx 40rpx;
.title {
font-weight: 500;
color: var(--ui-TC);
font-size: 24rpx;
}
.remain {
.left {
font-weight: 600;
flex: 1;
color: var(--ui-BG-Main);
.unit {
position: relative;
top: 4px;
}
}
.right-btn {
width: 161rpx;
height: 63rpx;
background-color: var(--ui-BG-Main);
color: #fff;
}
}
.cent {
color: var(--ui-TC-2);
font-size: 24rpx;
}
}
.menu {
.title {
font-weight: 600;
}
.items {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30rpx 30rpx;
.item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 23rpx;
.icon {
width: 94rpx;
height: 94rpx;
}
.label {
font-size: 22rpx;
color: #0c0c0cff;
}
}
}
}
}
.bottom {
position: absolute;
bottom: 70px;
width: calc(100% - 60rpx);
.login-btn-start {
height: 82rpx;
line-height: normal;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
border-radius: 28rpx;
font-size: 26rpx;
font-weight: 500;
color: #fff;
}
}
</style>

0
pages/index/category.vue → pages/index/product.vue
View File

148
peach/store/app.js
View File

@ -1,12 +1,12 @@
import { ref } from "vue";
import { defineStore } from "pinia";
import $platform from "@/peach/platform";
import $router from "@/peach/router";
import user from "./user";
import useSysStore from "./sys";
import { ref } from 'vue'
import { defineStore } from 'pinia'
import $platform from '@/peach/platform'
import $router from '@/peach/router'
import user from './user'
import useSysStore from './sys'
const useAppStore = defineStore(
"app",
'app',
() => {
/**
* @description 应用信息
@ -19,14 +19,14 @@ const useAppStore = defineStore(
* @param string filesystem 文件系统
*/
const info = ref({
name: "",
logo: "",
version: "",
copyright: "",
copytime: "",
cdnurl: "",
filesystem: "",
});
name: '',
logo: '',
version: '',
copyright: '',
copytime: '',
cdnurl: '',
filesystem: '',
})
/**
* @description 平台信息
@ -41,12 +41,12 @@ const useAppStore = defineStore(
methods: [],
forwardInfo: {},
posterInfo: {},
linkAddress: "",
linkAddress: '',
},
bindMobile: 0,
});
})
const chat = ref({});
const chat = ref({})
/**
* @description 模板信息
@ -58,50 +58,46 @@ const useAppStore = defineStore(
tabbar: {
items: [
{
activeIconUrl:
"http://mall.yudao.iocoder.cn/static/images/1-002.png",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
text: "首页",
url: "/pages/index/index",
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png',
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
text: '首页',
url: '/pages/index/index',
},
{
activeIconUrl:
"http://mall.yudao.iocoder.cn/static/images/2-002.png",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
text: "分类",
url: "/pages/index/category?id=3",
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png',
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
text: '产品',
url: '/pages/index/product',
},
{
activeIconUrl:
"http://mall.yudao.iocoder.cn/static/images/3-002.png",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
text: "购物车",
url: "/pages/index/icons",
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png',
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
text: '购物车',
url: '/pages/index/icons',
},
{
activeIconUrl:
"http://mall.yudao.iocoder.cn/static/images/4-002.png",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
text: "我的",
url: "/pages/index/user",
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png',
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
text: '我的',
url: '/pages/index/my',
},
],
style: {
activeColor: "#fc4141",
bgColor: "#fff",
bgType: "color",
color: "#282828",
activeColor: '#fc4141',
bgColor: '#fff',
bgType: 'color',
color: '#282828',
},
theme: "red",
theme: 'red',
},
},
});
})
// 全局分享信息
const shareInfo = ref({});
const shareInfo = ref({})
// 小程序发货信息管理 0: 没有 1：有
const hasWechatTradeManaged = ref(0);
const hasWechatTradeManaged = ref(0)
/**
* @author Ankkaya
@ -111,52 +107,52 @@ const useAppStore = defineStore(
*/
async function init() {
// 检查网络
const networkStatus = await $platform.checkNetwork();
const networkStatus = await $platform.checkNetwork()
if (!networkStatus) {
$router.error("NetworkError");
$router.error('NetworkError')
}
if (true) {
this.info = {
name: "🍑商城",
logo: "https://static.iocoder.cn/ruoyi-vue-pro-logo.png",
version: "1.0.0",
copyright: "全部开源，个人与企业可 100% 免费使用",
copytime: "Copyright© 2018-2024",
name: '🍑商城',
logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
version: '1.0.0',
copyright: '全部开源，个人与企业可 100% 免费使用',
copytime: 'Copyright© 2018-2024',
cdnurl: "https://file.sheepjs.com", // 云存储域名
filesystem: "qcloud", // 云存储平台
};
cdnurl: 'https://file.sheepjs.com', // 云存储域名
filesystem: 'qcloud', // 云存储平台
}
this.platform = {
share: {
methods: ["poster", "link"],
linkAddress: "https://shopro.sheepjs.com/#/",
methods: ['poster', 'link'],
linkAddress: 'https://shopro.sheepjs.com/#/',
posterInfo: {
user_bg: "/static/img/shop/config/user-poster-bg.png",
goods_bg: "/static/img/shop/config/goods-poster-bg.png",
groupon_bg: "/static/img/shop/config/groupon-poster-bg.png",
user_bg: '/static/img/shop/config/user-poster-bg.png',
goods_bg: '/static/img/shop/config/goods-poster-bg.png',
groupon_bg: '/static/img/shop/config/groupon-poster-bg.png',
},
},
bind_mobile: 0,
};
}
this.chat = {
chat_domain: "https://api.shopro.sheepjs.com/chat",
room_id: "admin",
};
this.has_wechat_trade_managed = 0;
chat_domain: 'https://api.shopro.sheepjs.com/chat',
room_id: 'admin',
}
this.has_wechat_trade_managed = 0
// 加载主题
const sysStore = useSysStore();
sysStore.setTheme();
const sysStore = useSysStore()
sysStore.setTheme()
// 模拟用户登录
const userStore = user();
const userStore = user()
if (userStore.isLogin) {
userStore.loginAfter();
userStore.loginAfter()
}
return Promise.resolve(true);
return Promise.resolve(true)
} else {
$router.error("InitError", res.msg || "加载失败");
$router.error('InitError', res.msg || '加载失败')
}
}
@ -168,18 +164,18 @@ const useAppStore = defineStore(
shareInfo,
hasWechatTradeManaged,
init,
};
}
},
{
persist: {
enabled: true,
strategies: [
{
key: "app-store",
key: 'app-store',
},
],
},
}
);
)
export default useAppStore;
export default useAppStore

10
peach/ui/pb-layout/pb-layout.vue
View File

@ -136,8 +136,9 @@ const navbarMode = computed(() => {
const bgMain = computed(() => {
if (navbarMode.value === 'inner') {
return {
background: `${props.bgStyle.backgroundColor} url(${peach.$url.cdn(
props.bgStyle.backgroundImage
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
props.bgStyle.backgroundImage,
props.bgStyle.imageType
)}) no-repeat top center / 100% auto`,
}
}
@ -148,8 +149,9 @@ const bgMain = computed(() => {
const bgBody = computed(() => {
if (navbarMode.value === 'normal') {
return {
background: `${props.bgStyle.backgroundColor} url(${peach.$url.cdn(
props.bgStyle.backgroundImage
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
props.bgStyle.backgroundImage,
props.bgStyle.imageType
)}) no-repeat top center / 100% auto`,
}
}

BIN
static/bg-page.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/buycent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/dispensecent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/rule.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
static/withdraw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB