264 lines
8.8 KiB
Vue
264 lines
8.8 KiB
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">
|
||
<view class="head_user_message_photo">
|
||
<image class="head_user_message_photo_img" src="" mode="widthFix"></image>
|
||
</view>
|
||
<view class="head_user_message_text">
|
||
<view class="head_user_message_name">餐饮爱好者</view>
|
||
<view class="head_user_message_desc"><image class="head_user_message_desc_img" src="../../static/user/tel.png"></image>152****9869</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">
|
||
<view class="user_account_message">
|
||
<view class="user_account_amount">5</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">0.01</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 == 5?'user_cont_li_left_boder':''">
|
||
<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">
|
||
<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_title">
|
||
<text class="user_name">为您推荐</text>
|
||
</view>
|
||
|
||
<!-- 商品区域 -->
|
||
<view class="shop_view">
|
||
<view class="shop_view_ul">
|
||
<view class="shop_view_li" @click="goDetail()">
|
||
<view class="shop_view_img">
|
||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||
<view class="shop_view_img_u">
|
||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title">糖醋排骨</view>
|
||
<view class="shop_view_cont_desc">乡下土猪</view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="shop_view_cont_cart">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_li" @click="goDetail()">
|
||
<view class="shop_view_img">
|
||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||
<view class="shop_view_img_u">
|
||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title">糖醋排骨</view>
|
||
<view class="shop_view_cont_desc">乡下土猪</view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="shop_view_cont_cart">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_li" @click="goDetail()">
|
||
<view class="shop_view_img">
|
||
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
||
<view class="shop_view_img_u">
|
||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="shop_view_cont_cart">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_ul">
|
||
<view class="shop_view_li" @click="goDetail()">
|
||
<view class="shop_view_img">
|
||
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
||
<view class="shop_view_img_u">
|
||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="shop_view_cont_cart">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_li" @click="goDetail()">
|
||
<view class="shop_view_img">
|
||
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
||
<view class="shop_view_img_u">
|
||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="shop_view_cont_cart">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref } 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
|
||
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
|
||
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
||
const order = ref([
|
||
{
|
||
id:1,
|
||
imgUrl:'../../static/user/staypay.png',
|
||
name:'待支付'
|
||
},
|
||
{
|
||
id:2,
|
||
imgUrl:'../../static/user/staytake.png',
|
||
name:'待收货'
|
||
},
|
||
{
|
||
id:3,
|
||
imgUrl:'../../static/user/evaluate.png',
|
||
name:'待评价'
|
||
},
|
||
{
|
||
id:4,
|
||
imgUrl:'../../static/user/refund.png',
|
||
name:'退款/售后'
|
||
},
|
||
{
|
||
id:5,
|
||
imgUrl:'../../static/user/order.png',
|
||
name:'全部订单'
|
||
}
|
||
])
|
||
const contList = ref([
|
||
{
|
||
id:1,
|
||
imgUrl:'../../static/user/service.png',
|
||
name:'客服服务'
|
||
},
|
||
{
|
||
id:2,
|
||
imgUrl:'../../static/user/collect.png',
|
||
name:'商品收藏'
|
||
},
|
||
{
|
||
id:3,
|
||
imgUrl:'../../static/user/certification.png',
|
||
name:'证照资质'
|
||
},
|
||
{
|
||
id:4,
|
||
imgUrl:'../../static/user/feedback.png',
|
||
name:'意见反馈'
|
||
},
|
||
{
|
||
id:5,
|
||
imgUrl:'../../static/user/address.png',
|
||
name:'地址管理'
|
||
}
|
||
])
|
||
const goDetail= ()=>{
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/detail/detail`
|
||
})
|
||
}
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||
|
||
onLoad((options) => {
|
||
|
||
});
|
||
onShow(() => {
|
||
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
|
||
})
|
||
onReachBottom(()=>{
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |