mrr.sj.front/pages/my/my.vue

719 lines
17 KiB
Vue
Raw Normal View History

2026-03-24 11:45:13 +08:00
<template>
<view class="my-page">
<view class="settings">
<image class="settings-img"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/8d58357d-0bc8-46a1-a964-6acb3e2a7999.png"
mode="widthFix" @click="navto()"></image>
</view>
<view class="topBg">
<!-- 用户信息区域 -->
<view class="user-section" v-if="isLogin">
<view class="user-info">
<view class="user-info-left" @click="goToProfile">
<view class="avatar">
<image :src="!userInfo.head_photo ? baseAvartar : userInfo.head_photo" mode="aspectFill">
</image>
</view>
<view class="user-detail">
<text class="nickname">{{ userInfo.username }}</text>
<view class="user-identity">
<text class="identity-text">普通用户</text>
</view>
</view>
</view>
</view>
</view>
<!-- 用户相关信息 -->
<view class="user-section" v-else>
<view class="user-info">
<view class="user-info-left" @click="goLogin">
<view class="avatar">
<image
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5a978961-4871-4ca5-bef8-14b7f6649ead"
mode="aspectFill"></image>
</view>
<view class="user-detail">
<text class="nickname">请点击登录</text>
</view>
</view>
</view>
</view>
<!-- 订单状态区域 -->
<view class="order-section">
<view class="section-header">
<text class="title">我的订单</text>
<view class="more" @click="goToOrderList">
<text class="more-text">更多</text>
<image
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bcea1de7-56c9-46c4-a3c9-8efe468bd881"
class="arrow-right" mode="aspectFit"></image>
</view>
</view>
<view class="order-status">
<view class="status-item" v-for="(item, index) in orderStatus" :key="index"
@click="goToOrderList(item.type)">
<image :src="item.icon" class="status-icon" mode="aspectFit"></image>
<text class="status-text">{{ item.text }}</text>
</view>
</view>
</view>
</view>
<view class="content_box">
<!-- 功能列表 -->
<view class="function-list mb-30">
<view class="function-title">我的功能</view>
<view class="function-grid">
<view class="grid-item" v-for="(item, index) in functionList" :key="index"
@click="handleFunction(item)">
<view class="icon-wrapper">
<image :src="item.icon" class="grid-icon" mode="aspectFit"></image>
<!-- <view class="badge" v-if="item.badge">{{ item.badge }}</view> -->
</view>
<text class="grid-text">{{ item.text }}</text>
</view>
</view>
</view>
<!-- 功能列表 -->
<view class="function-list">
<view class="function-title">我的礼品</view>
<view class="function-card">
<view class="flex-row-center-between" @click="goList">
<view class="function-card-left flex-row-center">
<image src="/static/images/icons/lottery.png" class="function-card-left-img"></image>
<text class="function-card-left-text">中奖列表 </text>
</view>
<image class="function-card-right" src="/static/images/icons/right_gray6.png"></image>
</view>
</view>
</view>
<view class="banner">
<image class="banner_image" mode="aspectFit"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2ce342ac-fdb3-4939-8b22-44ae64cd0a7b" />
</view>
<view class="tip_info">
<image class="tip_info_image" mode="aspectFit"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/62d50864-ad08-44d8-902c-a43564ffba11" />
</view>
</view>
<TabBar :selected="3"></TabBar>
</view>
</template>
<script>
import TabBar from "@/components/tabbar/tabbar.vue"
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
import request from "../../utils/request";
export default {
components: {
CustomNavbar,
TabBar,
},
data() {
return {
userInfo: {},
baseAvartar: "https://app.mrrweb.com.cn" + "/public/images/headanimal.png",
orderStatus: [{
text: "待支付",
icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/7180744f-d721-4ff0-af54-49172de0af26",
type: "unpaid",
},
{
text: "待接单",
icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/af37216d-ad6a-4f08-91df-b04ebb331802",
type: "unaccepted",
},
{
text: "待服务",
icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6e0fd278-b478-4ca3-b446-1455a3339d30",
type: "unserved",
},
// { text: '待评价', icon: '/static/images/my/unevaluated.png', type: 'unevaluated' },
{
text: "已完成",
icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/7a75cbb9-605c-44c7-be82-c387490aff27",
type: "finnish",
},
],
functionList: [
// { text: '浏览历史', icon: '/static/images/my/history.png', path: '/pages/my/history' },
// {
// text: "手艺人后台",
// icon: "/static/images/my/master.png",
// path: "/pages/ruzhu/ruzhu",
// },
{
text: "优惠券",
icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/a6b4cc79-2908-4658-a5da-05cd070e8ee8.png",
path: "/pages/coupon/myCoupon",
},
{
text: "地址管理",
icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/1fad21ad-71f5-4c20-bd65-a5e0139f21ad",
path: "/pages/address/list",
},
// { text: '我的消息', icon: '/static/images/my/message.png', path: '/pages/my/message', badge: '2' },
// { text: '分享', icon: '/static/images/my/share.png', path: '/pages/share/usershare' },
{
text: "联系平台",
icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/01ead3d9-674d-4467-947f-e6140dcac95a",
path: "/pages/contact/contact",
},
{
text: "申诉退款",
icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/09d762a3-51f4-4ad6-a7b0-57ddf4209a78",
path: "/pages/complaint/list",
},
// {
// text: "邀请",
// icon: "/static/images/my/invite_icon.png",
// path: "/pages/share/usershare",
// },
// {
// text: "设置",
// icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9d2b886b-5a68-46ce-8fee-b6edc13a8833",
// path: "/pages/settings/index",
// },
],
isLogin: false,
};
},
onLoad() {
//隐藏原生Tabar
uni.hideTabBar()
},
onShow() {
//清空全局身份
getApp().globalData.artisanType = "";
this.isLogin = uni.getStorageSync("accessToken") ? true : false;
if (!this.isLogin) {} else {
// 获取用户信息
this.getUserInfo();
}
},
methods: {
//跳转到设置页面
navto(){
uni.navigateTo({
url:'/pages/settings/index'
})
},
goList() {
uni.navigateTo({
url: `/pages/lottery/list`
});
},
// 点击“跳转小程序”按钮时触发
jumpToWeixinMiniProgram() {
// #ifdef APP-PLUS
plus.share.getServices((services) => {
let weixin = null;
// 遍历所有分享服务,找到微信
services.forEach((item) => {
if (item.id === "weixin") {
weixin = item;
}
});
if (weixin) {
// 调用微信小程序跳转接口
weixin.launchMiniProgram({
id: "gh_e44537920294", // 必须填微信小程序的原始AppID
path: "/pages/home/home", // 要打开的页面路径(可带参数)
type: 0, // 版本类型0-正式版1-测试版2-体验版默认0
success: () => {
uni.showToast({
title: "跳转成功",
icon: "success",
});
},
fail: (err) => {
uni.showToast({
title: "跳转失败:" + err.message,
icon: "none",
});
},
});
} else {
uni.showToast({
title: "未安装微信,请先安装",
icon: "none",
});
}
});
// #endif
},
getUserInfo() {
request.post("/user/getuser", {
type: 1
}).then((result) => {
this.userInfo = result.data;
});
},
goLogin() {
// uni.navigateTo({
// url: "/pages/login/login",
// });
// uni.oprPresentLogin()
uni.navigateTo({
url: '/pages/blogPopup/blogPopup'
});
},
goToOrderList(type) {
if (!this.isLogin) {
uni.showToast({
title: "您暂未登录,无法使用此功能!",
icon: "none",
});
return;
}
// 使用全局变量存储订单类型
getApp().globalData.selectedOrderType = type;
uni.switchTab({
url: `/pages/order/userorder-list?type=${type}`,
});
},
handleFunction(it) {
let item = it;
if (item == 1) {
item = {
text: "商家后台",
icon: "/static/images/my/business.png",
path: "/pages/ruzhu/ruzhu",
};
}
if (item == 2) {
item = {
text: "手艺人后台",
icon: "/static/images/my/master.png",
path: "/pages/ruzhu/ruzhu",
};
}
if (item == 3) {
this.jumpToWeixinMiniProgram();
return;
}
if (!this.isLogin) {
uni.showToast({
title: "您暂未登录,无法使用此功能!",
icon: "none",
});
return;
}
if (it == 2) {
console.log(1111111, it)
getApp().globalData.artisanType = 1;
uni.navigateTo({
url: "/pages/my/mycoupon"
});
return;
}
let text = item.text;
let type = text == "手艺人后台" ? 1 : text == "商家后台" ? 2 : "";
getApp().globalData.artisanType = type;
if (text == "手艺人后台" || text == "商家后台") {
request.post("/user/getsyrorsjstate", {
type
}).then((result) => {
if (result.data.apply_state == 0) {
uni.navigateTo({
url: item.path,
});
} else if (result.data.apply_state == 1) {
uni.navigateTo({
url: "/pages/ruzhu/submitres?applyState=1",
});
} else if (result.data.apply_state == 2) {
uni.navigateTo({
url: type == 1 ?
"/pages/syr/home" : type == 2 ?
// /pages/syr/home /pages/syr/migration
"/pages/shop/home" : "",
});
} else if (result.data.apply_state == 3) {
uni.navigateTo({
url: "/pages/ruzhu/submitres?applyState=3",
});
} else if (result.data.apply_state == 4) {
uni.navigateTo({
url: "/pages/ruzhu/stopuse",
});
}
});
return;
} else if (text == "分享") {
uni.navigateTo({
url: item.path + "?inviteCode=" + this.userInfo.invite_code,
});
return;
} else {
uni.navigateTo({
url: item.path,
});
}
},
goToProfile() {
uni.navigateTo({
url: "/pages/my/profile",
});
},
},
};
</script>
<style lang="less" scoped>
.settings{
position: absolute;
}
.settings-img {
height: 43rpx;
width: 43rpx;
position: relative;
left: 662rpx;
top: 97rpx;
}
.topBg {
padding: 140rpx 20rpx 26rpx;
background-position: 0 0;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d763c59d-5dca-41cb-9c7c-b17137038145");
/* 用户信息区域 */
.user-section {
box-sizing: border-box;
padding: 0 10rpx;
margin-bottom: 45rpx;
.user-info {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
.user-info-left {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
.avatar {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
margin-right: 18rpx;
border: 2rpx solid #ffffff;
overflow: hidden;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.user-detail {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
.nickname {
font-weight: 500;
font-size: 32rpx;
color: #ffffff;
line-height: 45rpx;
margin-bottom: 6rpx;
}
.user-identity {
width: 121rpx;
height: 38rpx;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(266deg,
rgba(255, 255, 255, 0.29) 0%,
rgba(255, 255, 255, 0.22) 100%);
border-radius: 19rpx;
border: 1rpx solid rgba(255, 255, 255, 1);
.identity-text {
font-size: 22rpx;
line-height: 38rpx;
height: 38rpx;
color: #ffffff;
}
}
}
}
}
}
/* 订单状态区域 */
.order-section {
padding: 28rpx 24rpx;
border-radius: 20rpx;
background-position: 0 0;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6c1d92b5-cf09-4435-ac1b-c7c2a9ddcd90");
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 22rpx;
border-bottom: 2rpx solid #f9f9f9;
.title {
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.more {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
.more-text {
font-size: 24rpx;
color: #71757b;
margin-right: 12rpx;
}
.arrow-right {
width: 9rpx;
height: 18rpx;
}
}
}
.order-status {
margin-top: 30rpx;
display: flex;
justify-content: center;
gap: 104rpx;
box-sizing: border-box;
.status-item {
display: flex;
flex-direction: column;
align-items: center;
.status-icon {
width: 58rpx;
height: 52rpx;
margin-bottom: 10rpx;
}
.status-text {
font-size: 26rpx;
color: #333333;
}
}
}
}
}
.content_box {
padding: 0 20rpx;
.management {
margin-bottom: 26rpx;
display: flex;
justify-content: space-between;
.managementItem {
width: 345rpx;
height: 162rpx;
image {
width: 100%;
height: 100%;
}
}
}
/* 功能列表 */
.function-list {
background: #ffffff;
border-radius: 20rpx;
padding: 30rpx 0rpx 28rpx;
.function-title {
padding-left: 25rpx;
font-weight: 500;
font-size: 32rpx;
color: #333333;
margin-bottom: 40rpx;
}
}
.function-grid {
display: flex;
padding: 0 56rpx;
justify-content: space-between;
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.icon-wrapper {
width: 58rpx;
height: 52rpx;
position: relative;
margin-bottom: 10rpx;
.grid-icon {
width: 58rpx;
height: 52rpx;
}
}
.grid-text {
font-size: 26rpx;
color: #333333;
text-align: center;
}
}
}
.function-card {
padding: 0 30rpx 0 20rpx;
.function-card-left {
.function-card-left-img {
width: 58rpx;
height: 52rpx;
margin-right: 12rpx;
}
.function-card-left-text {
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
}
.function-card-right {
width: 14rpx;
height: 26rpx;
}
}
.banner {
width: 100%;
height: 158rpx;
margin-top: 30rpx;
.banner_image {
width: 100%;
height: 100%;
}
}
.tip_info {
width: 100%;
height: 131rpx;
margin-top: 80rpx;
display: flex;
padding-bottom: 80rpx;
justify-content: center;
.tip_info_image {
width: 664rpx;
height: 100%;
}
}
.badge {
position: absolute;
top: -8rpx;
right: -8rpx;
background-color: #ff4d6a;
color: #fff;
font-size: 16rpx;
min-width: 28rpx;
height: 28rpx;
border-radius: 14rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6rpx;
}
}
page {
background-color: #f5f5f5;
}
.my-page {
/* min-height: 100vh; */
position: relative;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-icon {
width: 64rpx;
height: 64rpx;
margin-bottom: 8rpx;
}
.stat-label {
font-size: 26rpx;
color: #252525;
font-weight: 400;
}
/* H5适配 */
/* #ifdef H5 */
.my-page::before {
height: 420rpx;
}
/* #endif */
/* APP适配 */
/* #ifdef APP-PLUS */
.my-page::before {
height: 420rpx;
}
/* #endif */
/* 小程序适配 */
/* #ifdef MP-WEIXIN */
.my-page::before {
height: 420rpx;
}
/* #endif */
</style>