lufaneng
/
lift-drawing-wechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
main
Lufaneng 11 months ago
parent 158713e3b8
commit 1f735c5c53
2 changed files with 421 additions and 447 deletions
Show Stats Download Patch File Download Diff File

2
pages/consumption/consumption.vue
Unescape View File

@ -49,7 +49,7 @@
negative: item.amount < 0, negative: item.amount < 0,
}" }"
> >
{{ item.amount > 0 ? "+" : "" }}¥{{ {{ item.amount > 0 ? "+" : "-" }}¥{{
Math.abs(item.amount).toFixed(2) Math.abs(item.amount).toFixed(2)
}} }}
</view> </view>

240
pages/mine/mine.vue
Unescape View File

@ -8,19 +8,16 @@
<!-- 用户信息卡片 --> <!-- 用户信息卡片 -->
<view class="user-card"> <view class="user-card">
<view class="user-info"> <view class="user-info">
<image <div class="avatar"></div>
<!-- <image
class="avatar" class="avatar"
src="/static/imgs/avatar.png" src="/static/imgs/avatar.png"
mode="aspectFill" mode="aspectFill"
></image> ></image> -->
<view class="user-details"> <view class="user-details">
<view class="username"> <view class="username">
张三 张三
<u-icon <u-icon name="checkmark-circle-fill" color="#ffa500" size="16"></u-icon>
name="checkmark-circle-fill"
color="#ffa500"
size="16"
></u-icon>
</view> </view>
<view class="user-id">用户ID: U12345678</view> <view class="user-id">用户ID: U12345678</view>
<view class="membership"> <view class="membership">
@ -35,43 +32,37 @@
<!-- 账户余额 --> <!-- 账户余额 -->
<view class="balance-card"> <view class="balance-card">
<div>
<view class="balance-header"> <view class="balance-header">
<view class="balance-label">账户余额</view> <view class="balance-label">账户余额</view>
<u-button type="default" size="small" shape="round" @click="recharge">
充值
</u-button>
</view> </view>
<view class="balance-amount">¥50.00</view> <view class="balance-amount">¥50.00</view>
</div>
<uv-button type="primary" color="#fff" customStyle="color:#000;width:90px" shape="circle" @click="recharge">
充值
</uv-button>
</view> </view>
<!-- 会员套餐 --> <!-- 会员套餐 -->
<view class="membership-section"> <view class="membership-section">
<view class="membership-grid"> <view class="membership-grid">
<view <view class="membership-item" :class="{ active: selectedPlan === 'monthly' }"
class="membership-item" @click="selectPlan('monthly')">
:class="{ active: selectedPlan === 'monthly' }" <view class="tag">新人特惠</view>
@click="selectPlan('monthly')"
>
<view class="tag new">新人特惠</view>
<view class="plan-name">包月会员</view> <view class="plan-name">包月会员</view>
<view class="plan-price">¥120</view> <view class="plan-price">¥120</view>
</view> </view>
<view <view class="membership-item" :class="{ active: selectedPlan === 'season' }"
class="membership-item" @click="selectPlan('season')">
:class="{ active: selectedPlan === 'season' }" <view class="tag">最受欢迎</view>
@click="selectPlan('season')"
>
<view class="tag popular">最受欢迎</view>
<view class="plan-name">包季会员</view> <view class="plan-name">包季会员</view>
<view class="plan-price">¥300</view> <view class="plan-price">¥300</view>
<view class="plan-discount">立减¥60</view> <view class="plan-discount">立减¥60</view>
</view> </view>
<view <view class="membership-item" :class="{ active: selectedPlan === 'yearly' }"
class="membership-item" @click="selectPlan('yearly')">
:class="{ active: selectedPlan === 'yearly' }" <view class="tag">年度首享</view>
@click="selectPlan('yearly')"
>
<view class="tag yearly">年度首享</view>
<view class="plan-name">包年会员</view> <view class="plan-name">包年会员</view>
<view class="plan-price">¥1000</view> <view class="plan-price">¥1000</view>
<view class="plan-discount">立减¥440</view> <view class="plan-discount">立减¥440</view>
@ -81,56 +72,31 @@
<!-- 支付方式 --> <!-- 支付方式 -->
<view class="payment-section"> <view class="payment-section">
<view <view class="payment-item" :class="{ active: selectedPayment === 'alipay' }"
class="payment-item" @click="selectPayment('alipay')">
:class="{ active: selectedPayment === 'alipay' }"
@click="selectPayment('alipay')"
>
<view class="payment-info"> <view class="payment-info">
<u-icon name="alipay-circle-fill" color="#1677ff" size="24"></u-icon> <uv-icon name="shopping-cart-fill" color="#1677ff" size="24"></uv-icon>
<text class="payment-name">支付宝</text> <text class="payment-name">支付宝</text>
</view> </view>
<u-icon <uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
:name=" size="20"></uv-icon>
selectedPayment === 'alipay'
? 'checkmark-circle-fill'
: 'radio-button-off'
"
:color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
size="20"
></u-icon>
</view> </view>
<view <view class="payment-item" :class="{ active: selectedPayment === 'wechat' }"
class="payment-item" @click="selectPayment('wechat')">
:class="{ active: selectedPayment === 'wechat' }"
@click="selectPayment('wechat')"
>
<view class="payment-info"> <view class="payment-info">
<u-icon name="weixin-fill" color="#07c160" size="24"></u-icon> <uv-icon name="weixin-fill" color="#07c160" size="24"></uv-icon>
<text class="payment-name">支付宝</text> <text class="payment-name">微信</text>
</view> </view>
<u-icon <uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wechat' ? '#ff3333' : '#ccc'"
:name=" size="20"></uv-icon>
selectedPayment === 'wechat'
? 'checkmark-circle-fill'
: 'radio-button-off'
"
:color="selectedPayment === 'wechat' ? '#ff3333' : '#ccc'"
size="20"
></u-icon>
</view> </view>
</view> </view>
<!-- 底部按钮 --> <!-- 底部按钮 -->
<view class="bottom-section"> <view class="bottom-section">
<u-button <uv-button type="primary" size="large" @click="confirmPayment" :loading="paying">
type="primary"
size="large"
@click="confirmPayment"
:loading="paying"
>
确认支付 确认支付
</u-button> </uv-button>
<view class="agreement"> <view class="agreement">
购买前请仔细阅读 购买前请仔细阅读
<text class="link" @click="showAgreement">《会员服务协议》</text> <text class="link" @click="showAgreement">《会员服务协议》</text>
@ -140,46 +106,51 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import {
import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue"; ref
import { useAuthStore, useUserStore } from "@/store"; } from "vue";
import RPC from "@/utils/request"; import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue";
import {
const modal = ref(null); useAuthStore,
const authStore = useAuthStore(); useUserStore
const userStore = useUserStore(); } from "@/store";
import RPC from "@/utils/request";
// 响应式数据
const selectedPlan = ref("season"); // 默认选中包季会员 const modal = ref(null);
const selectedPayment = ref("alipay"); // 默认选中支付宝 const authStore = useAuthStore();
const paying = ref(false); const userStore = useUserStore();
// 选择会员套餐 // 响应式数据
const selectPlan = (plan) => { const selectedPlan = ref("season"); // 默认选中包季会员
const selectedPayment = ref("alipay"); // 默认选中支付宝
const paying = ref(false);
// 选择会员套餐
const selectPlan = (plan) => {
selectedPlan.value = plan; selectedPlan.value = plan;
}; };
// 选择支付方式 // 选择支付方式
const selectPayment = (payment) => { const selectPayment = (payment) => {
selectedPayment.value = payment; selectedPayment.value = payment;
}; };
// 编辑资料 // 编辑资料
const editProfile = () => { const editProfile = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pagesA/edit-profile/edit-profile", url: "/pagesA/edit-profile/edit-profile",
}); });
}; };
// 充值 // 充值
const recharge = () => { const recharge = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pages/recharge/recharge", url: "/pages/recharge/recharge",
}); });
}; };
// 确认支付 // 确认支付
const confirmPayment = async () => { const confirmPayment = async () => {
if (!selectedPlan.value) { if (!selectedPlan.value) {
uni.showToast({ uni.showToast({
title: "请选择会员套餐", title: "请选择会员套餐",
@ -228,25 +199,24 @@ const confirmPayment = async () => {
}); });
paying.value = false; paying.value = false;
} }
}; };
// 显示协议 // 显示协议
const showAgreement = () => { const showAgreement = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pages/agreement/agreement", url: "/pages/agreement/agreement",
}); });
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
font-size: 14px; font-size: 14px;
min-height: 100vh;
background: linear-gradient(180deg, #7b9cdb 0%, #f8f8f8 40%); background: linear-gradient(180deg, #7b9cdb 0%, #f8f8f8 40%);
padding-bottom: 120px; padding-bottom: 120px;
} }
.header { .header {
padding: 20px 16px 16px; padding: 20px 16px 16px;
.header-title { .header-title {
@ -254,24 +224,33 @@ const showAgreement = () => {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
} }
} }
.user-card { .user-card {
margin: 0 16px 16px; margin: 0 16px 16px;
background: white; background: white;
border-radius: 12px; border-radius: 12px;
padding: 16px; padding: 16px;
position: relative;
.user-info { .user-info {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 12px; // margin-bottom: 12px;
.avatar { .avatar {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
margin-right: 12px; margin-right: 12px;
background-color: skyblue;
overflow: hidden;
.img {
width: 100%;
height: 100%;
}
} }
.user-details { .user-details {
@ -304,21 +283,27 @@ const showAgreement = () => {
text-align: right; text-align: right;
color: #4285f4; color: #4285f4;
font-size: 14px; font-size: 14px;
position: absolute;
top: 10px;
right: 20px;
}
} }
}
.balance-card { .balance-card {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 16px 16px; margin: 0 16px 16px;
background: linear-gradient(135deg, #4285f4 0%, #6fa8f5 100%); background: linear-gradient(135deg, #4285f4 0%, #6fa8f5 100%);
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 16px;
color: white; color: white;
.balance-header { .balance-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 6px;
.balance-label { .balance-label {
font-size: 14px; font-size: 14px;
@ -327,13 +312,13 @@ const showAgreement = () => {
} }
.balance-amount { .balance-amount {
font-size: 32px; font-size: 28px;
font-weight: bold; font-weight: bold;
} }
} }
.membership-section { .membership-section {
margin: 0 16px 24px; margin: 0 16px 16px;
.membership-grid { .membership-grid {
display: flex; display: flex;
@ -348,6 +333,7 @@ const showAgreement = () => {
position: relative; position: relative;
border: 2px solid transparent; border: 2px solid transparent;
transition: all 0.3s; transition: all 0.3s;
overflow: hidden;
&.active { &.active {
border-color: #4285f4; border-color: #4285f4;
@ -356,27 +342,15 @@ const showAgreement = () => {
.tag { .tag {
position: absolute; position: absolute;
top: -6px; top: 0px;
left: 50%; left: 0;
transform: translateX(-50%);
padding: 2px 8px; padding: 2px 8px;
border-radius: 8px; border-radius: 0 0 10px 0;
font-size: 10px; font-size: 10px;
color: white; color: white;
&.new {
background: #ff6b6b;
}
&.popular {
background: #ff3333; background: #ff3333;
} }
&.yearly {
background: #ff3333;
}
}
.plan-name { .plan-name {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
@ -396,9 +370,9 @@ const showAgreement = () => {
} }
} }
} }
} }
.payment-section { .payment-section {
margin: 0 16px 24px; margin: 0 16px 24px;
.payment-item { .payment-item {
@ -432,9 +406,9 @@ const showAgreement = () => {
} }
} }
} }
} }
.bottom-section { .bottom-section {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -453,5 +427,5 @@ const showAgreement = () => {
color: #4285f4; color: #4285f4;
} }
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save