yindongqi
b09939848c
- 新增发票申请页面，支持企业和个人发票类型 - 优化订单页面，增加取消订单功能 - 修改分享标题为"爱愈膳汤铺" - 调整首页布局和样式，新增弹窗功能 - 修复购物车数据存储问题 - 优化优惠券领取逻辑，过滤已领取优惠券 - 调整支付页面打包费选项和配送费显示 - 新增小程序更新检查功能 - 优化店铺选择逻辑，切换店铺时清空购物车 - 调整图片资源和样式细节
601 lines
14 KiB
Vue
601 lines
14 KiB
Vue
<template>
|
|
<view class="page flex-col">
|
|
<view class="box_1 flex-row">
|
|
<view class="image-wrapper_1 flex-col">
|
|
<image class="image_1" :src="isLogin
|
|
? member.avatar
|
|
? member.avatar
|
|
: '/static/images/mine/default.png'
|
|
: '/static/images/mine/default.png'
|
|
" />
|
|
</view>
|
|
<view class="text-group_1 flex-col justify-between">
|
|
<text class="text_1" v-if="isLogin" @tap="
|
|
serv({
|
|
type: 'pages',
|
|
pages: '/pages/components/pages/mine/userinfo',
|
|
})
|
|
">
|
|
Hi, {{ member.nickname }}
|
|
</text>
|
|
<text class="text_1" v-else @tap="login"> Hi, 游客 </text>
|
|
<text class="text_2">点击头像可以修改个人信息</text>
|
|
</view>
|
|
</view>
|
|
<view class="box_5 flex-col">
|
|
<view class="box_6 flex-row justify-between">
|
|
<!-- 积分卡片 -->
|
|
<view class="group_2 flex-col">
|
|
<text class="text_4">积分</text>
|
|
<view class="group_3 flex-row justify-between">
|
|
<text class="text_5">{{ isLogin ? member.integral : 0 }}</text>
|
|
<view class="box_7 flex-row justify-end" @tap="
|
|
serv({
|
|
type: 'pages',
|
|
pages: '/pages/components/pages/balance/bill?cate=1',
|
|
})
|
|
">
|
|
<text class="text_6">去兑换</text>
|
|
<image class="label_2" src="/static/images/mine/arrow_right_small.png" />
|
|
</view>
|
|
</view>
|
|
<text class="text_7">积分可用于兑换产品</text>
|
|
</view>
|
|
<!-- 优惠券卡片 -->
|
|
<view class="group_4 flex-col">
|
|
<text class="text_8">优惠券</text>
|
|
<view class="section_1 flex-row justify-between">
|
|
<text class="text_9">{{ isLogin ? member.couponCount : 0 }}</text>
|
|
<view class="block_1 flex-row justify-end" @tap="
|
|
serv({
|
|
type: 'pages',
|
|
pages: '/pages/components/pages/coupons/coupons',
|
|
})
|
|
">
|
|
<text class="text_10">去使用</text>
|
|
<image class="label_3" src="/static/images/mine/arrow_right_small.png" />
|
|
</view>
|
|
</view>
|
|
<text class="text_11">使用优惠券享受更多优惠</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 服务项目列表 -->
|
|
<view v-for="(item, index) in services" :key="index">
|
|
<!-- 招兵买马 -->
|
|
<!-- <view v-if="index === 0" class="box_8 flex-row" @tap="serv(item)">
|
|
<view class="image-wrapper_3 flex-col">
|
|
<image class="label_4" :src="item.image || '/static/images/mine/recruit_icon.png'" />
|
|
</view>
|
|
<text class="text_12">{{ item.name }}</text>
|
|
<image class="label_5" src="/static/images/mine/arrow_right.png" />
|
|
</view> -->
|
|
<!-- 订单 -->
|
|
<!-- <view v-if="index === 1" class="box_8 flex-row" @tap="serv(item)">
|
|
<view class="image-wrapper_3 flex-col">
|
|
<image class="label_4" :src="item.image || '/static/images/mine/order_icon.png'" />
|
|
</view>
|
|
<text class="text_12">{{ item.name }}</text>
|
|
<image class="label_5" src="/static/images/mine/arrow_right.png" />
|
|
</view> -->
|
|
|
|
<!-- 历史消费 -->
|
|
<!-- <view
|
|
v-else-if="index === 1"
|
|
class="box_9 flex-row"
|
|
@tap="
|
|
serv({
|
|
type: 'pages',
|
|
pages: '/pages/components/pages/balance/bill?cate=0',
|
|
})
|
|
"
|
|
>
|
|
<view class="section_2 flex-col">
|
|
<image
|
|
class="label_4"
|
|
:src="item.image || '/static/images/mine/history_icon.png'"
|
|
/>
|
|
</view>
|
|
<text class="text_13">历史消费</text>
|
|
<image class="label_6" src="/static/images/mine/arrow_right.png" />
|
|
</view> -->
|
|
|
|
<!-- 客服 -->
|
|
<!-- <view v-else-if="index === 2" class="box_11 flex-row" @tap="serv(item)">
|
|
<view class="image-wrapper_5 flex-col">
|
|
<image
|
|
class="label_7"
|
|
:src="
|
|
item.image || '/static/images/mine/customer_service_icon.png'
|
|
"
|
|
/>
|
|
</view>
|
|
<text class="text_14">{{ item.name }}</text>
|
|
<image class="label_8" src="/static/images/mine/arrow_right.png" />
|
|
</view> -->
|
|
|
|
<!-- 地址 -->
|
|
<!-- <view v-else-if="index === 3" class="box_12 flex-row" @tap="serv(item)">
|
|
<view class="section_3 flex-col">
|
|
<image
|
|
class="label_4"
|
|
:src="item.image || '/static/images/mine/address_icon.png'"
|
|
/>
|
|
</view>
|
|
<text class="text_15">{{ item.name }}</text>
|
|
<image class="label_9" src="/static/images/mine/arrow_right.png" />
|
|
</view> -->
|
|
|
|
<!-- 其他服务项 -->
|
|
<view class="box_14 flex-row" @tap="serv(item)">
|
|
<view class="image-wrapper_6 flex-col">
|
|
<image class="label_10" :src="item.image || '/static/images/mine/help_center_icon.png'" />
|
|
</view>
|
|
<text class="text_16">{{ item.name }}</text>
|
|
<image class="label_11" src="/static/images/mine/arrow_right.png" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退出登录 -->
|
|
<!-- <view v-if="isLogin" class="box_16 flex-row" @tap="login">
|
|
<image class="label_14" src="/static/images/mine/logout_icon.png" />
|
|
<text class="text_18">退出登录</text>
|
|
<image class="label_15" src="/static/images/mine/arrow_right.png" />
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import { useMainStore } from "@/store/store";
|
|
import { storeToRefs } from "pinia";
|
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
|
import { formatDateTime, kmUnit } from "@/utils/util";
|
|
import { userGetUserInfo, mineService } from "@/api/user";
|
|
const main = useMainStore();
|
|
const { member, isLogin } = storeToRefs(main);
|
|
|
|
const title = ref("个人中心");
|
|
const services = ref([]);
|
|
|
|
const growthValue = computed(() => {
|
|
if (!isLogin.value) return 0;
|
|
const { currentValue, needValue } = member.value;
|
|
return (currentValue / (currentValue + needValue)) * 100;
|
|
});
|
|
|
|
onLoad(() => {
|
|
getServices();
|
|
});
|
|
onShow(() => {
|
|
getUserInfo();
|
|
});
|
|
|
|
const getUserInfo = async () => {
|
|
if (isLogin.value) {
|
|
let data = await userGetUserInfo();
|
|
if (data) {
|
|
main.SET_MEMBER(data);
|
|
}
|
|
}
|
|
};
|
|
const getServices = async () => {
|
|
let data = await mineService();
|
|
if (data) {
|
|
services.value = data;
|
|
}
|
|
};
|
|
const makePhoneCall = (phoneNumber) => {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phoneNumber,
|
|
});
|
|
};
|
|
const login = () => {
|
|
uni.navigateTo({
|
|
url: "/pages/components/pages/login/login",
|
|
});
|
|
};
|
|
const packages = () => {
|
|
if (!isLogin.value) {
|
|
login();
|
|
return;
|
|
}
|
|
uni.navigateTo({
|
|
url: "/pages/components/pages/packages/index",
|
|
});
|
|
};
|
|
const serv = (item) => {
|
|
switch (item.type) {
|
|
case "pages":
|
|
if (!isLogin.value) {
|
|
login();
|
|
return;
|
|
}
|
|
if (item.pages === "/pages/components/pages/fenxiao/fenxiao") {
|
|
if (member.value.spreadUid === 0 || member.value.spreadUid === null || member.value.spreadUid === '0' || member.value.spreadUid === "") {
|
|
uni.navigateTo({
|
|
url: `/pages/components/pages/fenxiao/fenxiaorequestform?id=${member.value.id}`,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `${item.pages}?spreadUid=${member.value.spreadUid}`,
|
|
});
|
|
}
|
|
} else if (item.pages === "/pages/components/pages/invoice/invoice") {
|
|
uni.navigateTo({
|
|
url: `/pages/components/pages/invoice/invoice?userId=${member.value.id}`,
|
|
});
|
|
} else if (item.pages === "/pages/order/order") {
|
|
uni.switchTab({
|
|
url: '/pages/order/order'
|
|
});
|
|
} else if (item.pages === "/pages/components/pages/mine/helpcenter") {
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/components/pages/mine/helpcenter?id=" +
|
|
item.id +
|
|
"&name=" +
|
|
item.name +
|
|
"&phone=" +
|
|
item.phone,
|
|
});
|
|
break;
|
|
} else {
|
|
uni.navigateTo({
|
|
url: item.pages,
|
|
});
|
|
}
|
|
break;
|
|
case "miniprogram":
|
|
uni.navigateToMiniProgram({
|
|
appId: item.app_id,
|
|
});
|
|
break;
|
|
case "menu":
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/components/pages/mine/service?id=" +
|
|
item.id +
|
|
"&name=" +
|
|
item.name,
|
|
});
|
|
break;
|
|
case "content":
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/components/pages/mine/content?id=" +
|
|
item.id +
|
|
"&name=" +
|
|
item.name,
|
|
});
|
|
break;
|
|
case "call": // 新增电话拨打类型
|
|
if (item.phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: item.phone
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import "./common.css";
|
|
|
|
.page {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.box_1 {
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 336rpx;
|
|
background: url("/static/images/mine/background.png") 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.image-wrapper_1 {
|
|
box-shadow: 0px 18px 18px 0px rgba(0, 0, 0, 0.1);
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 50%;
|
|
height: 100rpx;
|
|
border: 1px solid rgba(217, 217, 217, 1);
|
|
width: 100rpx;
|
|
margin: 170rpx 0 0 55rpx;
|
|
}
|
|
|
|
.image_1 {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
/* margin: 3rpx 0 0 5rpx; */
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.text-group_1 {
|
|
width: 277rpx;
|
|
height: 87rpx;
|
|
margin: 176rpx 291rpx 0 27rpx;
|
|
}
|
|
|
|
.text_1 {
|
|
width: 277rpx;
|
|
height: 53rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(82, 172, 65, 1);
|
|
font-size: 38rpx;
|
|
font-family: PingFang SC-Medium;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 38rpx;
|
|
}
|
|
|
|
.text_2 {
|
|
width: 277rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(158, 158, 158, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.box_5 {
|
|
width: 750rpx;
|
|
height: auto;
|
|
min-height: 500rpx;
|
|
}
|
|
|
|
.box_6 {
|
|
width: 694rpx;
|
|
height: 191rpx;
|
|
margin-left: 32rpx;
|
|
}
|
|
|
|
.group_2 {
|
|
width: 331rpx;
|
|
height: 191rpx;
|
|
background: url("/static/images/mine/integral_card.png") 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
justify-content: flex-center;
|
|
}
|
|
|
|
.text_4 {
|
|
width: 78rpx;
|
|
height: 36rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(131, 126, 126, 1);
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 26rpx;
|
|
margin: 32rpx 0 0 32rpx;
|
|
}
|
|
|
|
.group_3 {
|
|
width: 174rpx;
|
|
height: 62rpx;
|
|
margin: 8rpx 0 0 32rpx;
|
|
}
|
|
|
|
.text_5 {
|
|
width: 78rpx;
|
|
height: 62rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(0, 0, 0, 1);
|
|
font-size: 44rpx;
|
|
font-family: PingFang SC-Semibold;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.box_7 {
|
|
background-color: rgba(82, 172, 65, 1);
|
|
border-radius: 12px 24px 2px 24px;
|
|
width: 88rpx;
|
|
height: 30rpx;
|
|
margin-top: 13rpx;
|
|
}
|
|
|
|
.text_6 {
|
|
width: 60rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: 1rpx 0 0 8rpx;
|
|
}
|
|
|
|
.label_2 {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin: 3rpx 0 0 -4rpx;
|
|
}
|
|
|
|
.text_7 {
|
|
width: 180rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(234, 183, 41, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: -7rpx 0 32rpx 32rpx;
|
|
}
|
|
|
|
.group_4 {
|
|
width: 331rpx;
|
|
height: 191rpx;
|
|
background: url("/static/images/mine/coupon_card.png") 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
justify-content: flex-center;
|
|
}
|
|
|
|
.text_8 {
|
|
width: 78rpx;
|
|
height: 36rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(131, 126, 126, 1);
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 26rpx;
|
|
margin: 32rpx 0 0 32rpx;
|
|
}
|
|
|
|
.section_1 {
|
|
width: 145rpx;
|
|
height: 62rpx;
|
|
margin: 8rpx 0 0 32rpx;
|
|
}
|
|
|
|
.text_9 {
|
|
width: 45rpx;
|
|
height: 62rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(0, 0, 0, 1);
|
|
font-size: 44rpx;
|
|
font-family: PingFang SC-Semibold;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.block_1 {
|
|
background-color: rgba(82, 172, 65, 1);
|
|
border-radius: 12px 24px 2px 24px;
|
|
width: 88rpx;
|
|
height: 30rpx;
|
|
margin-top: 13rpx;
|
|
}
|
|
|
|
.text_10 {
|
|
width: 60rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: 1rpx 0 0 8rpx;
|
|
}
|
|
|
|
.label_3 {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin: 3rpx 0 0 -4rpx;
|
|
}
|
|
|
|
.text_11 {
|
|
width: 180rpx;
|
|
height: 28rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(82, 172, 65, 1);
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC-Regular;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 20rpx;
|
|
margin: -7rpx 0 32rpx 32rpx;
|
|
}
|
|
|
|
.box_8,
|
|
.box_9,
|
|
.box_11,
|
|
.box_12,
|
|
.box_14,
|
|
.box_16 {
|
|
width: 686rpx;
|
|
height: 48rpx;
|
|
margin: 64rpx 0 0 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.box_8 {
|
|
margin-top: 60rpx;
|
|
}
|
|
|
|
.image-wrapper_3,
|
|
.section_2,
|
|
.image-wrapper_5,
|
|
.section_3,
|
|
.image-wrapper_6 {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
height: 48rpx;
|
|
width: 48rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.label_4,
|
|
.label_7,
|
|
.label_10,
|
|
.label_14 {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
|
|
.text_12,
|
|
.text_13,
|
|
.text_14,
|
|
.text_15,
|
|
.text_16,
|
|
.text_18 {
|
|
width: auto;
|
|
height: 39rpx;
|
|
overflow-wrap: break-word;
|
|
color: rgba(0, 0, 0, 1);
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Semibold;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 28rpx;
|
|
margin: 5rpx 0 0 24rpx;
|
|
}
|
|
|
|
.label_5,
|
|
.label_6,
|
|
.label_8,
|
|
.label_9,
|
|
.label_11,
|
|
.label_15 {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: auto;
|
|
margin-right: 20rpx;
|
|
}
|
|
</style>
|