wangzimeng 745ecaa8c7 1、发布信息:发布成功后清空上传的图片;选择的省市清空,底部适应苹果手机
2、招租详情和课程详情的底部按钮适应苹果手机和安卓机
3、个人中心的滑动、未认证已认证更换为图片
4、选择省市的组件跟随发布页面调整
5、上传照片的组件跟随发布页面调整
2025-08-08 17:19:53 +08:00

775 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<s-layout title="我的" tabbar="/pages/index/user" navbar="custom" :bgStyle="template.style?.background"
:navbarStyle="template.style?.navbar" onShareAppMessage :showFloatButton="true">
<!-- 登录信息 -->
<view class="myBox">
<scroll-view :refresher-enabled="false" scroll-y="true" class="flex align-items"
style="box-sizing: border-box;height: 94vh;">
<!-- :style="{height: isIphone ? `calc(90vh - ${systemInfo.safeAreaInsets.bottom}px)` : '94vh',}" -->
<view class="con-center flex flex-start flex-column">
<view class="header">
<!-- 用户信息 -->
<view class="hea-left flex">
<view class="head-avatar" v-if="isLogin == true"
@click="sheep.$router.go('/pages/user/info')">
<image style="width: 130rpx;height: 130rpx;border-radius: 152rpx;"
:src="baseUrl + userInfo.avatar"></image>
</view>
<view class="head-avatar" v-else @click="toLogin">
<image style="width: 130rpx;height: 130rpx;border-radius: 152rpx;"
src="/static/wechat.png">
</image>
</view>
<view class="headAvatar-info justify-start">
<view class="info-name fs-36 weight8 flexD" v-if="isLogin == true">
<view style="font-weight: 800;" @click="sheep.$router.go('/pages/user/info')">
{{ userInfo.nickname}}
</view>
<!-- <view class="UnAuthenBox weight8 fs-20" v-if="authenInfo.status == -1 "
@click="toPage('/pages/user/authentication')">未认证</view>
<view class="authenticationBox weight8 fs-20" >已认证
</view> -->
<image class="UnAuthenBox weight8 fs-20" v-if="authenInfo.status == -1"
src="https://jiangxiaoxian.0rui.cn/unAuthen.png"></image>
<image class="authenticationBox weight8 fs-20" v-if="authenInfo.status == 1 "
src="https://jiangxiaoxian.0rui.cn/authened.png"></image>
</view>
<view class="info-name fs-36 weight8 flexD" v-else>
<view style="font-weight: 800;" @click="toLogin">登录/注册</view>
<!-- <view class="UnAuthenBox weight8 fs-20" v-if="authenInfo.status == -1 && isLogin == true">未认证</view>
<view class="authenticationBox weight8 fs-20" v-if="authenInfo.status == 1 && isLogin == true">已认证</view> -->
</view>
<view class="fs-28 weight4" style="margin-top: 30rpx;">剩余拨打次数:
{{ userInfo.all_mobile_num ? userInfo.all_mobile_num : 0 }}次
</view>
</view>
<view class="head-signInBox" @click="toPage('/pages/app/sign')">
<image style="width: 46rpx;height: 44rpx;"
src="https://jiangxiaoxian.0rui.cn/signIn.png" mode=""></image>
<view class="signInText" style="margin-left: 10rpx;">签到</view>
</view>
</view>
<!-- 四个主内容 -->
<view class="head-secondBox">
<view class="collect" @click="toPage('/pages/user/goods-collect')">
<view class="collect-num">{{ userInfo.collect_number ? userInfo.collect_number : 0 }}
</view>
<view class="collect-text">收藏</view>
</view>
<view class="feetPrint" @click="toPage('/pages/user/goods-log')">
<view class="feetPrint-num">
{{ userInfo.footprint_number ? userInfo.footprint_number : 0 }}
</view>
<view class="feetPrint-text">足迹</view>
</view>
<view class="feetPrint" @click="toPage('/pages/user/wallet/score')">
<view class="feetPrint-num">{{ userInfo.score ? userInfo.score : 0 }}</view>
<view class="feetPrint-text">积分</view>
</view>
<view class="collect" @click="toPage('/pages/coupon/list')">
<view class="collect-num">{{ userInfo.coupon_number ? userInfo.coupon_number : 0 }}
</view>
<view class="collect-text">优惠券</view>
</view>
</view>
</view>
<!-- 我的订单 -->
<view class="myOrder">
<view class="myOrder-first" @click="toPage('/pages/order/list')">
<view style="font-weight: 800;font-size: 34rpx;line-height: 28rpx;color: #3d3d3d;">我的订单
</view>
<view style="display: flex;align-items: center;justify-content: center;">
<view style="font-size: 26rpx;line-height: 26rpx;font-weight: 400;color: #999999;">全部订单
</view>
<image style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
<!-- <uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons> -->
</view>
</view>
<view class="myOrder-second">
<view class="pendingBox" @click="toPage('/pages/order/list?type=1')">
<image class="pendImg" src="https://jiangxiaoxian.0rui.cn/pendPay.png"></image>
<view class="fs-28 weight4" style="margin-top: 20rpx;color: #3d3d3d;">待支付</view>
</view>
<view class="pendingBox" @click="toPage('/pages/order/list?type=2')">
<image class="pendImg" src="https://jiangxiaoxian.0rui.cn/shipment.png"></image>
<view class="fs-28 weight4" style="margin-top: 20rpx;color: #3d3d3d;">待发货</view>
</view>
<view class="pendingBox" @click="toPage('/pages/order/list?type=3')">
<image class="pendImg" src="https://jiangxiaoxian.0rui.cn/pendingDoods.png"></image>
<view class="fs-28 weight4" style="margin-top: 20rpx;color: #3d3d3d;">待收货</view>
</view>
<view class="pendingBox" @click="toPage('/pages/order/list?type=4')">
<image class="pendImg" src="https://jiangxiaoxian.0rui.cn/completed.png"></image>
<view class="fs-28 weight4" style="margin-top: 20rpx;color: #3d3d3d;">已完成</view>
</view>
</view>
</view>
<!-- 发布分享等 -->
<view class="sixBox">
<!-- 我的发布 -->
<view class="fabuBox" @click="toPage('/pages/user/myRelease/list')">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/myRelease.png"></image>
<view style="font-size: 30rpx;font-weight: 800;line-height: 28rpx;color: #333333;">我的发布
</view>
</view>
<image style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 40rpx 0;"></view>
<!-- 积分商城 -->
<view class="fabuBox" @click="toPage('/pages/app/score-shop')">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/points.png"></image>
<view style="font-size: 30rpx;font-weight: 800;line-height: 28rpx;color: #333333;">积分商城
</view>
</view>
<image style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 40rpx 0;"></view>
<!-- 分享好友 -->
<view class="fabuBox" @click="showShareModal">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/share.png"></image>
<view style="font-size: 30rpx;font-weight: 800;line-height: 28rpx;color: #333333;">分享好友
</view>
</view>
<image style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 40rpx 0;"></view>
<!-- 官方客服 @click="toPage('/pages/chat/index')" -->
<view class="fabuBox" @click="handleService()">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/service.png"></image>
<view style="font-size: 30rpx;font-weight: 800;line-height: 28rpx;color: #333333;">官方客服
</view>
</view>
<image style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 40rpx 0;"></view>
<!-- 意见反馈 -->
<view class="fabuBox" @click="toPage('/pages/public/feedback')">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/feedBack.png"></image>
<view style="font-size: 30rpx;font-weight: 800;line-height: 28rpx;color: #333333;">意见反馈
</view>
</view>
<image style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 40rpx 0;"></view>
<!-- 设置 -->
<view class="fabuBox" @click="toSetting">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/setUp.png"></image>
<view style="font-size: 30rpx;font-weight: 800;line-height: 28rpx;color: #333333;">设置
</view>
</view>
<image style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
</view>
<view style="height: 180rpx;width: 100%;"></view>
</view>
<view class="width:100%;height:200rpx"></view>
</scroll-view>
<su-popup :show="showLogin == true" type="center" round="10" :isMaskClick="false">
<view class="popup">
<button class="texbut" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
<!-- <image style="width: 100%;height: 136rpx;" src="https://jiangxiaoxian.0rui.cn/loginBtn.png"></image> -->
<!-- 授权登录 -->
</button>
</view>
</su-popup>
<!-- <u-toast ref="uToast"></u-toast> -->
</view>
<!-- <s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
</s-block> -->
</s-layout>
</template>
<script setup>
import {
computed,
ref,
reactive
} from 'vue';
import {
onShow,
onPageScroll,
onPullDownRefresh
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import userApi from '@/sheep/api/user';
import third from '@/sheep/api/third';
import {
baseUrl,
} from '@/sheep/config';
import {
showShareModal
} from '@/sheep/hooks/useModal';
const showLogin = ref(false);
const iv = ref('');
const wxCode = ref('');
const encryptedData = ref('');
// 隐藏原生tabBar
uni.hideTabBar({
fail: () => {},
});
const template = computed(() => sheep.$store('app').template.user);
const isLogin = computed(() => sheep.$store('user').isLogin);
const userInfo = computed(() => sheep.$store('user').userInfo);
const authenInfo = computed(() => sheep.$store('user').authenInfo);
const systemInfo = ref()
const isIphone = ref(false)
const scrollHeight = ref()
onShow(() => {
isIos();
sheep.$store('user').updateUserData();
});
onPullDownRefresh(() => {
sheep.$store('user').updateUserData();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 800);
});
onPageScroll(() => {});
function isIos() {
systemInfo.value = uni.getSystemInfoSync();
console.log('systemInfo.value', systemInfo.value.windowHeight);
isIphone.value = systemInfo.platform === 'ios' || /iphone|ipad/i.test(systemInfo.model);
console.log('isIphone', isIphone.value);
// 计算屏幕可用高度的百分比px 单位)
// const totalHeight = systemInfo.value.windowHeight; // 可使用窗口高度(不含导航栏等)
// const iphoneHeight = Math.floor(totalHeight * 1); // 70% 屏幕高度
// const androidHeight = Math.floor(totalHeight * 0.78); // 78% 屏幕高度
// scrollHeight.value = isIphone.value ? `${iphoneHeight}px` : `${androidHeight}px`;
// if (isIphone.value) {
// this.footerStyle = 'padding-bottom: 68rpx;';
// }
}
// 打开登录的弹框
function toLogin() {
console.log('toLogin', showLogin.value);
showLogin.value = true;
console.log('showLogin', showLogin.value);
}
// 关闭登录弹框
function closeLogin() {
console.log('closeLogin');
showLogin.value = false;
}
// 打开登录的弹框
function openLogin() {
console.log('openLogin');
showLogin.value = true;
}
// 使用微信手机号
async function getPhoneNumber(e) {
console.log('获取手机号', e, e.detail.errMsg);
if (e.detail.errMsg !== 'getPhoneNumber:ok') {} else {
encryptedData.value = e.detail.encryptedData // 用于解密
iv.value = e.detail.iv // 用于解密
getCode()
// let result = await sheep.$platform.useProvider().bindUserPhoneNumber(e.detail);
// console.log('result', result);
// if (result) {
// sheep.$store('user').getInfo();
// // closeAuthModal();
// closeLogin();
// }
}
}
// 获取code和sessionId
function getCode() {
uni.login({
provider: 'weixin',
success: (res) => {
wxCode.value = res.code
// loginResult.value = res
// getSessionId();
Login();
}
})
}
// 登录接口
function Login() {
const session_id = uni.getStorageSync('sessionId')
console.log('session_id', session_id);
return new Promise(async (resolve, reject) => {
const {
code
} = await third.wechat.wxLogin({
platform: 'miniProgram',
payload: encodeURIComponent(
JSON.stringify({
sessionId: session_id,
iv: iv.value,
encryptedData: encryptedData.value,
code: wxCode.code,
}),
),
});
if (code === 1) {
resolve(true);
showLogin.value = false;
}
resolve(false);
});
}
//设置跳转页面
function toSetting() {
console.log('isLogin', isLogin.value);
if (isLogin.value == true) {
uni.navigateTo({
url: '/pages/user/info'
})
} else {
uni.showToast({
title: '请先登录',
icon: 'none'
})
}
}
//页面跳转
const toPage = (e) => {
if (isLogin.value == true) {
uni.navigateTo({
url: e
})
} else {
uni.showToast({
title: '请先登录',
icon: 'none',
duration: 2000
})
// setTimeout(function() {
// uni.switchTab({
// url: '/pages/index/user'
// })
// }, 2000);
}
}
//联系平台客服
function handleService() {
console.log('联系平台客服', userInfo.value.platform_contact_number);
wx.makePhoneCall({
phoneNumber: userInfo.value.platform_contact_number,
success: function() {
console.log("拨打电话成功")
},
fail: function(err) {
console.log("拨打电话失败", err)
}
})
}
</script>
<style lang="scss" scoped>
.pendImg {
width: 70rpx;
height: 70rpx;
}
.weight4 {
font-weight: 400;
}
.weight8 {
font-weight: 400;
}
.fs-28 {
font-size: 28rpx;
line-height: 28rpx;
}
.fs-36 {
font-size: 36rpx;
line-height: 36rpx;
}
.fs-20 {
font-size: 20rpx;
line-height: 20rpx;
}
.flexD {
display: flex;
}
.gird {
display: grid;
}
.w-100 {
width: 100%;
}
.flex {
display: flex;
}
.flex-start {
align-items: flex-start;
}
.justify-center {
justify-content: center;
}
.align-items {
align-items: center;
}
.flex-column {
flex-flow: column;
}
.justify-start {
justify-content: start;
}
.myBox {
position: fixed;
width: 750rpx;
min-height: 100vh;
background-color: #F5F5F5;
background-size: 100%;
background-repeat: no-repeat;
}
.con-center {
min-height: 80vh;
padding: 30 30rpx;
.header {
width: 93%;
height: 580rpx;
padding: 0 30rpx;
position: relative;
// top: 100rpx;
justify-content: space-between;
align-items: center;
// margin: 0 auto;
// padding: 30rpx;
background-image: url('https://jiangxiaoxian.0rui.cn/topback.png');
background-size: 100%;
.hea-left {
width: 100%;
height: 140rpx;
align-items: center;
position: relative;
top: 180rpx;
.avatar {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
}
.head-avatar {
width: 130rpx;
height: 130rpx;
margin-right: 30rpx;
}
.headAvatar-info {
display: gird;
// align-items: center;
// justify-content: center;
.info-name {
display: flex;
justify-content: flex-start;
font-weight: 900rpx;
align-items: center;
.UnAuthenBox {
margin-left: 10rpx;
// background-color: #EBECEE;
border-radius: 8rpx;
width: 80rpx;
height: 30rpx;
// color: #8D93B3;
display: flex;
// padding: 5rpx 10rpx;
align-items: center;
justify-content: center;
}
.authenticationBox {
margin-left: 10rpx;
// background-color: #333333;
border-radius: 8rpx;
width: 80rpx;
height: 30rpx;
// color: #fecc4e;
display: flex;
// padding: 5rpx 10rpx;
align-items: center;
justify-content: center;
}
}
}
.head-signInBox {
width: 156rpx;
height: 70rpx;
position: absolute;
right: -30rpx;
display: flex;
justify-content: center;
background-color: #fff;
align-items: center;
border-radius: 116rpx 0 0 116rpx;
.signInText {
font-size: 30rpx;
font-weight: 800;
line-height: 28rpx;
color: #333333;
}
}
.line {
width: 320rpx;
height: 1rpx;
background: #BABDC7;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 19rpx 0 7rpx 0;
}
.red {
font-family: PingFang SC, PingFang SC;
font-weight: 800;
font-size: 26rpx;
color: #FF4949;
line-height: 32rpx;
}
}
.head-secondBox {
margin-top: 50rpx;
display: flex;
justify-content: space-around;
align-items: center;
height: 76rpx;
width: 100%;
position: relative;
top: 190rpx;
.collect {
display: grid;
align-items: center;
text-align: center;
justify-content: center;
width: 158rpx;
height: 100%;
.collect-num {
font-size: 34rpx;
font-weight: 800;
color: #333333;
line-height: 28rpx;
}
.collect-text {
margin-top: 20rpx;
font-size: 28rpx;
font-weight: 400;
color: #333333;
line-height: 28rpx;
}
}
.feetPrint {
display: grid;
align-items: center;
text-align: center;
justify-content: center;
width: 188rpx;
height: 100%;
.feetPrint-num {
font-size: 34rpx;
font-weight: 800;
color: #333333;
line-height: 28rpx;
}
.feetPrint-text {
margin-top: 20rpx;
font-size: 28rpx;
font-weight: 400;
color: #333333;
line-height: 28rpx;
}
}
}
.line {}
}
.myOrder {
width: 630rpx;
height: 206rpx;
margin: 0 auto;
position: relative;
bottom: 90rpx;
background-color: #ffffff;
border-radius: 18rpx;
display: block;
padding: 40rpx 30rpx;
.myOrder-first {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.myOrder-second {
width: 100%;
display: flex;
margin-top: 40rpx;
justify-content: space-between;
.pendingBox {
display: block;
justify-content: center;
align-items: center;
}
}
}
.sixBox {
width: 630rpx;
// height: 637rpx;
display: block;
background-color: #ffffff;
border-radius: 18rpx;
padding: 40rpx 30rpx;
margin: 0 auto;
position: relative;
bottom: 50rpx;
.fabuBox {
display: flex;
align-items: center;
justify-content: space-between;
}
.line-row {
width: 630rpx;
height: 1rpx;
background: #EEEEEE;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 40rpx 0;
}
}
}
.popup {
background-image: url('https://jiangxiaoxian.0rui.cn/showLogin.png');
background-size: 100%;
width: 540rpx;
height: 640rpx;
display: flex;
padding-bottom: 44rpx;
flex-direction: column;
align-items: baseline;
justify-content: flex-end;
padding-left: 73rpx;
padding-right: 73rpx;
.img_shouquan {
position: absolute;
width: 680rpx;
height: 857rpx;
left: -25rpx;
top: -390rpx;
}
#txt2 {
text-align: center;
margin-top: 200rpx;
font-size: 28rpx;
color: #525252;
margin-bottom: 60rpx;
position: relative;
font-weight: 500;
}
.texbut {
width: 507rpx;
height: 93rpx;
border-radius: 16rpx;
// background: #ffbd25;
background-image: url('https://jiangxiaoxian.0rui.cn/loginBtn.png');
background-size: 100%;
font-size: 34rpx;
color: #3d3d3d;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30rpx;
// margin: 0 auto;
}
}
</style>