719 lines
17 KiB
Vue
719 lines
17 KiB
Vue
<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> |