purchase-let/pages/my/my.vue

518 lines
12 KiB
Vue

<style lang="scss">
.rest {
display: flex;
justify-content: space-around;
margin: 20rpx;
.rest-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.rest-item-num {
font-size: 30rpx;
margin-bottom: 16rpx;
}
.rest-item-txt {
font-size: 28rpx;
}
}
}
</style>
<template>
<view style="flex-grow: 1;overflow-y: auto;">
<view class="user-info"
:style="{backgroundImage: [0,4].includes(userInfo.user_ship)?'url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e3a7b202404261113002322.webp)':'url(https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/aace1202407021022357574.png)' }">
<view class="u-card">
<view style="display: flex;" @click="updataInfp">
<up-image :src="userInfo.avatar" mode="aspectFill" width="112rpx" height="112rpx"
shape="circle"></up-image>
<view class="content">
<view style="font-size: 32rpx;">{{userInfo.nickname}}</view>
<view class="uid">
<text>ID:</text>
<view style="margin:0 20rpx;">
{{userInfo.id}}
</view>
<view v-if="![0,4].includes(userInfo.user_ship)"
style="display: flex;align-items: center;background-color: #F6EECD;padding: 4rpx 10rpx;border-radius: 20rpx;">
<view style="margin-right: 10rpx;">
<up-icon
name="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/e8621202406281618363287.png"></up-icon>
</view>
{{userInfo.vip_name}}会员
</view>
</view>
</view>
</view>
<view class="to-vip-btn" @click="navgo('/pageQuota/vipUser/index')">
会员报备
</view>
</view>
<view class="balance" @click="navgo('/pageQuota/balanceDetail/index?type=2')">
<view class="" style="font-size: 28rpx;transform: translateY(10rpx);">
余额:
</view>
<view style="font-size: 50rpx;">
{{userInfo.now_money||"0.00"}}<text style="font-size: 28rpx;"> (元)</text>
</view>
</view>
</view>
<view class="rest">
<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=1')">
<view class="rest-item-num">{{userInfo.purchase_funds||'0.00'}}</view>
<view class="rest-item-txt">采购款</view>
</view>
<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=4')">
<view class="rest-item-num">{{userInfo.return_money||'0.00'}}</view>
<view class="rest-item-txt">返还金</view>
</view>
<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=3')">
<view class="rest-item-num">{{userInfo.GetNumber ||"0.00"}}</view>
<view class="rest-item-txt">礼品券</view>
</view>
<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=5')">
<view class="rest-item-num">{{userInfo.number ||"0.00"}}</view>
<view class="rest-item-txt">冻结券</view>
</view>
</view>
<view class="order-info-box">
<view class="order-info">
<view class="info-head">我的订单</view>
<view class="info-list">
<view class="list-item" @click="navTo(1)">
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f335a202404261401535608.png">
</image>
<view class="">待付款</view>
<view class="badge" v-if="orderCount.no_pay">{{orderCount.no_pay}}</view>
</view>
<view class="list-item" @click="navTo(2)">
<image src="/static/icon/wait.jpg">
</image>
<view class="">待核销</view>
<view class="badge" v-if="orderCount.waiting">{{orderCount.waiting}}</view>
</view>
<view class="list-item" @click="navTo(3)">
<image src="/static/icon/done.jpg">
</image>
<view class="">已核销</view>
<view class="badge" v-if="orderCount.receiving">{{orderCount.receiving}}</view>
</view>
<view class="list-item" @click="navTo(4)">
<image src="/static/icon/back.jpg">
</image>
<view class="">售后/退款</view>
<view class="badge" v-if="orderCount.applyRefund">{{orderCount.applyRefund}}</view>
</view>
</view>
</view>
</view>
<view class="card">
<up-cell-group>
<!-- <up-cell v-if="userInfo.user_ship==1" title="赠品区" :isLink="true" url="/pageQuota/Gifts/index"></up-cell>
<up-cell title="我的资产" :isLink="true" url="/pageQuota/asset/index"></up-cell> -->
<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
<up-cell title="支付密码" :isLink="true" url="/pagesOrder/setPayPassword/index"></up-cell>
</up-cell-group>
</view>
<view class="card">
<up-cell-group>
<up-cell title="意见反馈" :isLink="true" url="/pageQuota/feedBack/index"></up-cell>
<up-cell title="关于我们" :isLink="true" url="/pageQuota/aboutUs/index"></up-cell>
<up-cell title="退出登录" :isLink="true" @click="logout"></up-cell>
</up-cell-group>
</view>
</view>
<up-popup :show="showPop" @close="showPop=false" @open="showPop=true">
<view class="popContent" :style="{paddingBottom:isFoucs?'500rpx':'50rpx'}">
<view style="text-align: center;font-size: 30rpx;font-weight: bold;">
修改个人信息
</view>
<up-form labelPosition="left">
<up-form-item label="呢称" prop="userInfo.name" borderBottom ref="item1" @tap="isFoucs=true">
<up-input :adjustPosition="false" @blur="isFoucs=false" v-model="formData.nick_name" border="none"
placeholder="请输入个人呢称"></up-input>
</up-form-item>
<up-form-item label="头像" prop="userInfo.sex" borderBottom ref="item1">
<up-image :src="formData.avatar" width="80px" height="80px" @click="uploadAvatar"></up-image>
</up-form-item>
</up-form>
<view style="display: flex;margin-top: 40rpx;justify-content: space-around;">
<view style="width: 200rpx;">
<up-button color="#20b128" @click="updataFn">保存</up-button>
</view>
<view style="width: 200rpx;">
<up-button @click="showPop=false">取消</up-button>
</view>
</view>
<!-- <button></button> -->
</view>
</up-popup>
</template>
<script setup>
import {
reactive,
ref
} from "vue";
import useUserStore from "@/store/user";
import {
orderCountApi
} from "@/api/order.js";
import {
onLoad,
onPullDownRefresh
} from "@dcloudio/uni-app"
import {
userInfoApi,
uploadImg,
loginUpdateUserApi
} from "@/api/user.js"
import {
config
} from "@/config/app.js"
let isFoucs = ref(false);
const userStore = useUserStore();
const userInfo = ref({});
let token = uni.getStorageSync('token') || ''
const orderCount = ref({
no_pay: 0,
receiving: 0,
waiting: 0,
applyRefund: 0
})
const getOrderCount = () => {
orderCountApi().then(res => {
orderCount.value = res.data;
})
}
// 返回下单 或者充值
const handleBack = (e) => {
if (e > 0) {
uni.navigateTo({
url: "/pages/charge/charge"
})
} else {
uni.navigateBack()
}
}
const navTo = (type = 0) => {
uni.navigateTo({
url: `/pagesOrder/order/order?type=${type}`
})
}
const navgo = (url) => {
uni.navigateTo({
url
})
}
const showPop = ref(false)
const updataInfp = () => {
console.log(5454)
showPop.value = true
}
const formData = reactive({
nick_name: "",
avatar: ""
})
const updataFn = () => {
loginUpdateUserApi({
nickname: formData.nick_name,
avatar: formData.avatar
}).then(res => {
uni.$u.toast('修改成功');
showPop.value = false
userInfoApi().then(res => {
userInfo.value = res.data;
})
})
}
const uploadAvatar = () => {
uni.chooseImage({
success: (chooseImageRes) => {
uni.showLoading({
title: '上传中...'
});
const tempFilePaths = chooseImageRes.tempFilePaths;
console.log('ewser', config.HTTP_REQUEST_URL)
uni.uploadFile({
url: config.HTTP_REQUEST_URL + '/api/Upload/image', //仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
header: {
token: token,
},
success: (uploadFileRes) => {
let data = JSON.parse(uploadFileRes.data)
formData.avatar = data.data.uri
uni.hideLoading()
}
});
}
});
}
const logout = () => {
userStore.setToken('');
userStore.setUserInfo({});
uni.removeStorageSync('SHARE_INFO');
uni.setStorageSync("STORE_INFO", '')
uni.reLaunch({
url: '/pages/login/login'
})
}
onLoad(() => {
userInfoApi().then(res => {
userInfo.value = res.data;
formData.avatar = res.data.avatar
formData.nick_name = res.data.nickname
if (![0, 4].includes(res.data.user_ship)) {
uni.setNavigationBarColor({
frontColor: "#000000",
backgroundColor: "#EAFFE1"
})
}
})
getOrderCount();
})
onPullDownRefresh(() => {
userInfoApi().then(res => {
userInfo.value = res.data;
uni.stopPullDownRefresh()
})
})
</script>
<style lang="scss">
.user-info {
// background-color: red;
width: 100vw;
height: 300rpx;
background-size: 100% 100%;
box-sizing: border-box;
padding: 70rpx 50rpx 0 50rpx;
position: relative;
.u-card {
display: flex;
justify-content: space-between;
align-items: center;
.content {
padding-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
.uid {
margin-top: 15rpx;
display: flex;
align-items: center;
font-size: 22rpx;
}
}
.to-vip-btn {
color: white;
padding: 10rpx 20rpx;
height: 34rpx;
background-color: #39BE40;
border-radius: 30rpx;
z-index: 2;
}
}
.logo {
position: absolute;
width: 236rpx;
height: 236rpx;
right: 20rpx;
z-index: 1;
opacity: 0.5
}
.balance {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 35rpx;
}
}
.member {
width: 710rpx;
margin: 0 auto;
background: linear-gradient(135deg, #FFF9E8 0%, #F3E7C0 100%);
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(113, 113, 113, 0.11);
border-radius: 12rpx;
padding: 0 18rpx 22rpx 22rpx;
box-sizing: border-box;
.member-wrap {
display: flex;
align-items: center;
justify-content: space-between;
height: 78rpx;
margin-bottom: 20rpx;
.member-left {
display: flex;
align-items: center;
text {
font-weight: bold;
font-size: 26rpx;
color: #060606;
}
view {
font-size: 24rpx;
color: #060606;
}
}
.member-right {
width: 136rpx;
height: 56rpx;
line-height: 56rpx;
background: #FFFFFF;
border-radius: 28rpx;
font-weight: 600;
font-size: 24rpx;
color: #7D661E;
text-align: center;
}
}
.member-progress {
&>view {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10rpx;
text {
font-size: 22rpx;
color: #A26341;
}
}
}
}
.order-info-box {
.order-info {
width: 710rpx;
background-color: #fff;
border-radius: 14rpx;
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a8863202404261349533191.png');
background-size: 28% 100%;
background-position: right;
background-repeat: no-repeat;
margin: 0 auto;
padding: 28rpx 0 40rpx 0;
.info-head {
font-size: 32rpx;
font-weight: bold;
margin: 0 0 30rpx 30rpx;
}
.info-list {
height: 110rpx;
display: flex;
font-size: 26rpx;
.list-item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
image {
width: 64rpx;
height: 64rpx;
}
.badge {
position: absolute;
top: 0;
right: 20%;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
text-align: center;
line-height: 30rpx;
font-size: 22rpx;
color: #fff;
background-color: #F55726;
}
}
}
}
}
.card {
margin: 20rpx;
background-color: #fff;
border-radius: 14rpx;
overflow: hidden;
}
.popContent {
padding: 30rpx 20rpx 50rpx 20rpx;
}
.gift {
width: 710rpx;
margin: 20rpx;
margin-bottom: 0;
box-sizing: border-box;
padding: 20rpx;
align-items: center;
height: 96rpx;
display: flex;
justify-content: space-between;
box-sizing: border-box;
background-color: #FAF1D7;
font-size: 26rpx;
.gift-buy {
font-size: 24rpx;
width: 136rpx;
height: 56rpx;
background-color: white;
border-radius: 28rpx;
line-height: 56rpx;
text-align: center;
color: #7D661E;
}
}
</style>