TakeOutShop/pages/user/user.vue

<template>
  <view class="mian">
	<view class="head">
		<view :style="{'height':headerHeight+45+'px'}"></view>
		<view class="head_user_message">
			<view class="head_user_message_l" @click="useredit()">
				<view class="head_user_message_photo">
					<image class="head_user_message_photo_img" :src="user.avatar" mode="widthFix"></image>
				</view>
				<view class="head_user_message_text">
					<view class="head_user_message_name">{{user.nickname}}</view>
					<view class="head_user_message_desc" v-if="user.phone"><image class="head_user_message_desc_img" src="../../static/user/tel.png"></image>{{user.phone}}</view>
				</view>
			</view>
			<image class="head_user_message_set" src="../../static/user/setting.png" mode="widthFix"></image>
		</view>
	</view>
	<view class="user_account">
		<view class="user_account_li" @click="goCoupon()">
			<view class="user_account_message">
				<view class="user_account_amount">{{user.couponCount}}</view>
				<view class="user_account_name">优惠券</view>
			</view>
			<image class="user_account_img" src="../../static/user/coupon.png"  mode="widthFix"></image>
		</view>
		<view class="user_account_border"></view>
		<view class="user_account_li">
			<view class="user_account_message">
				<view class="user_account_amount">{{user.nowMoney}}</view>
				<view class="user_account_name">余额(元)</view>
			</view>
			<image class="user_account_img" src="../../static/user/purse.png"  mode="widthFix"></image>
		</view>
		<view class="user_account_tag">
			<view class="user_account_tag_num">前往领券</view>
			<view class="user_account_tag_j"></view>
		</view>
	</view>
	<view class="user_cont_list">
		<view class="user_cont_li" v-for="(item,index) in order" :key="index" :class="item.id == 0?'user_cont_li_left_boder':''" @click="orderList(item)">
			<image class="user_cont_li_img" :src="item.imgUrl" mode="widthFix"></image>
			<view class="user_cont_li_name">{{item.name}}</view>
		</view>
	</view>
	<view class="user_cont_list">
		<view class="user_cont_li" v-for="(item,index) in contList" :key="index" @click="goServe(item,index)">
			<image class="user_cont_li_img" :src="item.imgUrl" mode="widthFix"></image>
			<view class="user_cont_li_name">{{item.name}}</view>
		</view>
	</view>
	<recomGoods v-if="token" :apiType="5" @add-message="addCart"></recomGoods>
	<view style="height: 200rpx;"></view>
	<multi
	ref="shopData"
	@add-success="handleAddSuccess"
	@add-error="handleAddError"
	></multi>
  </view>
</template>

<script setup>
import { frontuser } from '@/server/api.js'
import recomGoods from '@/components/recomGoods/recomGoods.vue';
import multi from '@/components/multi/multi.vue'
import { computed,ref,onMounted } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const { statusHeight,headerHeight,token } = storeToRefs(counterStore);
const shopData = ref({});
const user = ref({});
const order = ref([
	{
		id:1,
		imgUrl:'../../static/user/staypay.png',
		name:'待支付',
		url:'/order/orderList/orderList?type=1'
	},
	{
		id:3,
		imgUrl:'../../static/user/staytake.png',
		name:'待收货',
		url:'/order/orderList/orderList?type=3'
	},
	{
		id:4,
		imgUrl:'../../static/user/evaluate.png',
		name:'待评价',
		url:'/order/orderList/orderList?type=4'
		// url:'/order/orderevallist/orderevallist?type=0'
	},
	{
		id:5,
		imgUrl:'../../static/user/refund.png',
		name:'退款/售后',
		url:'/order/assList/assList?type=0'
	},
	{
		id:0,
		imgUrl:'../../static/user/order.png',
		name:'全部订单',
		url:'/order/orderList/orderList?type=0'
	}
])
const contList = ref([
	{
		id:1,
		imgUrl:'../../static/user/service.png',
		name:'客户服务',
		url:'/userserve/clientserve/clientserve'
	},
	{
		id:2,
		imgUrl:'../../static/user/collect.png',
		name:'商品收藏',
		url:'/userserve/favorite/favorite'
	},
	{
		id:3,
		imgUrl:'../../static/user/certification.png',
		name:'证照资质',
		url:'/userserve/certificate/certificate'
	},
	{
		id:4,
		imgUrl:'../../static/user/feedback.png',
		name:'意见反馈',
		url:'/userserve/feedback/feedback'
	},
	{
		id:5,
		imgUrl:'../../static/user/address.png',
		name:'地址管理',
		url:'/userserve/addressList/addressList'
	}
])

const api_frontuser = () => {
	return frontuser().then(({data})=>{
		user.value = data;
	}).catch(({message}) => {
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
//加购物车
const addCart=(i,type)=>{
	shopData.value.addCart(i,type);
}
// 加入购物车成功回调
const handleAddSuccess = (data) => {
  console.log('加入购物车成功回调:', data)
  // 可以在这里更新购物车徽章数量等
}
// 加入购物车失败回调
const handleAddError = (error) => {
  console.error('加入购物车失败回调:', error)
}
const goCoupon=()=>{
	uni.navigateTo({
		url:`/order/coupon/coupon`
	})
};
const useredit=()=>{
	uni.navigateTo({
		url:`/userserve/useredit/useredit`
	})
}
const goServe=(item,index)=>{
	const { url } = item;
	uni.navigateTo({url})
}
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
//const { count,doubleCount } = storeToRefs(counterStore);
const orderList=(item)=>{
	const { url } = item;
	uni.navigateTo({url})
}
onShow(() => {api_frontuser()});
onPullDownRefresh(()=>{
	api_frontuser();
	uni.stopPullDownRefresh();
})
</script>

<style lang="scss">
	@import './style.scss';
</style>