购物车/我的页面部分页面代码样式增加
This commit is contained in:
邝军华
parent
7ab37fcf4d
commit
c80d8c4e20
@ -30,14 +30,16 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物车",
|
||||
"navigationBarBackgroundColor": "#f2f5f7",
|
||||
"enablePullDownRefresh": true
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/user",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationBarBackgroundColor": "#f2f5f7"
|
||||
"navigationBarBackgroundColor": "#f2f5f7",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
@ -1,6 +1,215 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 购物车页面 -->
|
||||
<view class="main">
|
||||
<!-- 头部区域 -->
|
||||
<view class="head" :style="{'padding-top':headerHeight+'px'}">
|
||||
<view class="head_location">
|
||||
<image class="location_img" src="../../static/index/location_active.png" mode="widthFix"></image>
|
||||
<view class="location_title">上海体育中心</view>
|
||||
<view class="location_arrow_down"></view>
|
||||
</view>
|
||||
<view class="head_ul">
|
||||
<view class="head_l">
|
||||
<view class="head_q">购物车</view>
|
||||
<view class="head_w">我常买</view>
|
||||
</view>
|
||||
<view class="head_r">
|
||||
<view class="head_li">优惠券(3）</view>
|
||||
<view class="head_li">管理</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart" :style="{'padding-top':85+headerHeight+'px'}">
|
||||
<view class="cart_item">
|
||||
<view class="cart_selected">
|
||||
<view class="cart_selected_false"></view>
|
||||
</view>
|
||||
<view class="cart_shop">
|
||||
<image class="cart_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_shop_cont">
|
||||
<view class="cart_title">火锅配菜青菜</view>
|
||||
<view class="cart_desc">比加入时下降1.1元</view>
|
||||
<view class="cart_bottom">
|
||||
<view class="cart_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||
<view class="cart_counter">
|
||||
<view class="cart_counter_btn border_l">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_counter_center">1</view>
|
||||
<view class="cart_counter_btn border_r">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart_item">
|
||||
<view class="cart_selected">
|
||||
<view class="cart_selected_false"></view>
|
||||
</view>
|
||||
<view class="cart_shop">
|
||||
<image class="cart_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_shop_cont">
|
||||
<view class="cart_title">火锅配菜青菜</view>
|
||||
<view class="cart_desc">比加入时下降1.1元</view>
|
||||
<view class="cart_bottom">
|
||||
<view class="cart_price price">43.9<text class="market_name prices">59.9</text></view>
|
||||
<view class="cart_counter">
|
||||
<view class="cart_counter_btn border_l">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cart_counter_center">1</view>
|
||||
<view class="cart_counter_btn border_r">
|
||||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user_title">
|
||||
<image class="user_img" src="../../static/user/leftimg.png"></image>
|
||||
<view class="user_name">为您推荐</view>
|
||||
<image class="user_img" src="../../static/user/rightimg.png"></image>
|
||||
</view>
|
||||
|
||||
<!-- 商品区域 -->
|
||||
<view class="shop_view">
|
||||
<view class="shop_view_ul">
|
||||
<view class="shop_view_li">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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 class="footer">
|
||||
<view class="footer_l">
|
||||
<view class="footer_selected">
|
||||
<view class="footer_selected_false"></view>
|
||||
<view class="footer_text">全选</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer_r">
|
||||
<view class="footer_v">
|
||||
<view class="footer_text">合计:</view>
|
||||
<view class="footer_price">39.9</view>
|
||||
</view>
|
||||
<view class="footer_btn">去下单</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -10,8 +219,10 @@ 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'])
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
// const { count,doubleCount } = storeToRefs(counterStore);
|
||||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||||
|
||||
// 使用 uni.onLoad 监听页面加载
|
||||
onLoad((options) => {
|
||||
@ -21,7 +232,7 @@ onShow(() => {
|
||||
|
||||
});
|
||||
onPullDownRefresh(()=>{
|
||||
|
||||
uni.stopPullDownRefresh();
|
||||
})
|
||||
onReachBottom(()=>{
|
||||
|
||||
|
||||
@ -0,0 +1,415 @@
|
||||
page{
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
.main{
|
||||
// 头部样式
|
||||
.head{
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background:#FCEEEF;
|
||||
.head_location{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
.location_img{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0px 2px 0px 10px;
|
||||
}
|
||||
.location_title{
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.location_arrow_down{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10rpx solid transparent;
|
||||
border-right: 10rpx solid transparent;
|
||||
border-top: 11rpx solid #333333;
|
||||
margin-left: 2px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
.head_ul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
.head_l{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.head_q{
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
font-size: 34rpx;
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.head_w{
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
.head_r{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.head_li{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 购物车区域
|
||||
.cart{
|
||||
background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%);
|
||||
background-repeat: no-repeat;
|
||||
.cart_item{
|
||||
margin-top: 20rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 25rpx;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 20rpx 0rpx;
|
||||
.cart_selected{
|
||||
width: 50rpx;
|
||||
height: 180rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 20rpx;
|
||||
.cart_selected_false{
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #bfbfbf;
|
||||
}
|
||||
}
|
||||
.cart_shop{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
.cart_shop_img{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.cart_shop_cont{
|
||||
width: 415rpx;
|
||||
.cart_title{
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
min-height: 85rpx;
|
||||
}
|
||||
.cart_desc{
|
||||
font-size: 24rpx;
|
||||
color: #FF2D41;
|
||||
}
|
||||
.cart_bottom{
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.cart_price{
|
||||
font-size: 34rpx;
|
||||
color: #fe4301;
|
||||
font-weight: 500;
|
||||
}
|
||||
.cart_counter{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.cart_counter_btn{
|
||||
width: 70rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #E9E9E9;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
.cart_counter_btn_img{
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.cart_counter_center{
|
||||
width: 70rpx;
|
||||
height: 48rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border:1px solid #E9E9E9;
|
||||
}
|
||||
.border_l{
|
||||
border-left: 1px solid #E9E9E9;
|
||||
border-top-left-radius: 50rpx;
|
||||
border-bottom-left-radius: 50rpx;
|
||||
|
||||
}
|
||||
.border_r{
|
||||
border-right: 1px solid #E9E9E9;
|
||||
border-top-right-radius: 50rpx;
|
||||
border-bottom-right-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user_title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 80rpx;
|
||||
.user_img{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: block;
|
||||
}
|
||||
.user_name{
|
||||
color: #FF0000;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
margin: 0 10rpx 0 10rpx;
|
||||
}
|
||||
}
|
||||
// 商品区域样式
|
||||
.shop_view{
|
||||
margin-top: 48rpx;
|
||||
padding: 13rpx 20rpx 0rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.shop_view_ul{
|
||||
width: 346rpx;
|
||||
.shop_view_li{
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
margin-bottom: 20rpx;
|
||||
.shop_view_li_swiper{
|
||||
width: 100%;
|
||||
height: 504rpx;
|
||||
.shop_view_li_swiper_item{
|
||||
width: 100%;
|
||||
.shop_view_li_swiper_img_url{
|
||||
width: 100%;
|
||||
height: 504rpx;
|
||||
display: block;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_img{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 320rpx;
|
||||
.shop_view_tag{
|
||||
width: 66rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: -15rpx;
|
||||
top: 20rpx;
|
||||
background: url(../../static/tag_img.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.shop_view_tag_text{
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
height: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.shop_view_img_u{
|
||||
width: 300rpx;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 20rpx;
|
||||
top: 20rpx;
|
||||
.shop_view_img_url{
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_cont{
|
||||
padding: 20rpx;
|
||||
.shop_view_cont_title{
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
min-height: 80rpx;
|
||||
}
|
||||
.shop_view_cont_desc{
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.shop_view_cont_tag{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.shop_view_cont_tag_text{
|
||||
border-radius: 6rpx;
|
||||
border: 1rpx solid #FF6868;
|
||||
padding: 0rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
color: #ff6868;
|
||||
font-size: 18rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_cont_bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.shop_view_cont_price{
|
||||
font-size: 34rpx;
|
||||
color: red;
|
||||
font-weight: 500;
|
||||
}
|
||||
.shop_view_cont_cart{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.shop_view_cont_cart_img{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_bcg{
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
position: fixed;
|
||||
z-index: 888;
|
||||
left: 0;
|
||||
transform: translate3d(0,-100%,0);
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
background: #FFFFFF;
|
||||
border-top: 1rpx solid #F6F6F6;
|
||||
border-bottom: 1rpx solid #F6F6F6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-top-left-radius: 40rpx;
|
||||
border-top-right-radius: 40rpx;
|
||||
.footer_l{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20rpx;
|
||||
.footer_selected{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
.footer_selected_false{
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #bfbfbf;
|
||||
}
|
||||
.footer_text{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer_r{
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.footer_v{
|
||||
.footer_text{
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
display: inline-block;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.footer_price{
|
||||
font-size: 46rpx;
|
||||
color: #FF0000;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
}
|
||||
.footer_price::before {
|
||||
content: '¥';
|
||||
font-size: 28rpx;
|
||||
margin-right: 5rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.footer_btn{
|
||||
margin-left: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 205rpx;
|
||||
height: 77rpx;
|
||||
background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%);
|
||||
border-radius: 39rpx 39rpx 39rpx 39rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.price::before {
|
||||
content: '¥';
|
||||
font-size: 24rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
.prices::before {
|
||||
content: '¥';
|
||||
font-size: 20rpx;
|
||||
margin-right: 5rpx;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
.market_name{
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
text-decoration: line-through;
|
||||
margin-left: 5rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@ -48,7 +48,10 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="head_class_btn">
|
||||
<view class="head_class_arrow_box"><text class="head_class_arrow_up"></text></view>
|
||||
<view class="head_class_arrow_box">
|
||||
<image class="head_class_arrow_box_img" src="../../static/down_arrow.png"></image>
|
||||
<!-- <image class="head_class_arrow_box_img" src="../../static/up_arrow.png"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -98,15 +98,12 @@ page{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.head_class_arrow_box_img{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.head_class_arrow_up {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 2rpx solid #7D7B88;
|
||||
border-right: 2rpx solid #7D7B88;
|
||||
transform: translate3d(0, -50%, 0) rotate(134deg);
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -280,8 +280,14 @@
|
||||
<view class="footer">
|
||||
<view class="footer_cont">
|
||||
<view class="footer_cont_l">
|
||||
<view class="footer_cont_num">3</view>
|
||||
<image class="footer_cont_img" src="../../static/index/cart_img.png" mode="widthFix"></image>
|
||||
<view class="footer_cont_cart">
|
||||
<view class="footer_cont_num">3</view>
|
||||
<image class="footer_cont_img" src="../../static/index/cart_img.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="footer_cont_m">
|
||||
<view class="footer_cont_m_price">43.9</view>
|
||||
<!-- <view class="footer_cont_m_desc">已优惠20元</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer_cont_btn">去下单</view>
|
||||
</view>
|
||||
|
||||
@ -2,9 +2,9 @@ page{
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
.main{
|
||||
background:linear-gradient(to right bottom, #F4CECD 32%, #F6F1DC 75%,#F6F6F6 100%);
|
||||
background-size: 100% 13%; /* 调整大小以适应底部 */
|
||||
background: url('https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/bcges.jpg');
|
||||
background-repeat: no-repeat; /* 防止重复 */
|
||||
background-size:100%;
|
||||
// 头部样式
|
||||
.head{
|
||||
position: fixed;
|
||||
@ -12,9 +12,9 @@ page{
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to right, #F4CECD, #F6F1DC);
|
||||
background-size: 100% 100%; /* 调整大小以适应底部 */
|
||||
background: url('https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/bcges.jpg');
|
||||
background-repeat: no-repeat; /* 防止重复 */
|
||||
background-size:100%;
|
||||
padding-bottom: 10px;
|
||||
.head_location{
|
||||
display: flex;
|
||||
@ -397,31 +397,52 @@ page{
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 17rpx 20rpx 40rpx;
|
||||
.footer_cont_l{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
.footer_cont_num{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: -5rpx;
|
||||
top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FF0000;
|
||||
border-radius: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.footer_cont_img{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.footer_cont_cart{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: relative;
|
||||
.footer_cont_num{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: -5rpx;
|
||||
top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FF0000;
|
||||
border-radius: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.footer_cont_img{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.footer_cont_m{
|
||||
margin-left: 25rpx;
|
||||
.footer_cont_m_price{
|
||||
font-size: 46rpx;
|
||||
color: #FF0000;
|
||||
font-weight: 500;
|
||||
}
|
||||
.footer_cont_m_price::before {
|
||||
content: '¥';
|
||||
font-size: 30rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
.footer_cont_m_desc{
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer_cont_btn{
|
||||
|
||||
@ -0,0 +1,303 @@
|
||||
page{
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.mian{
|
||||
background: url('https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/user_bcg.png');
|
||||
background-repeat: no-repeat; /* 防止重复 */
|
||||
background-size:100%;
|
||||
.head{
|
||||
.head_user_message{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 35rpx 0 35rpx;
|
||||
.head_user_message_l{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.head_user_message_photo{
|
||||
width: 119rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 100rpx;
|
||||
background-color: #f6f6f6;
|
||||
overflow: hidden;
|
||||
.head_user_message_photo_img{
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.head_user_message_text{
|
||||
margin-left: 20rpx;
|
||||
.head_user_message_name{
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.head_user_message_desc{
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
.head_user_message_desc_img{
|
||||
width: 33rpx;
|
||||
height: 33rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.head_user_message_set{
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user_account{
|
||||
margin: 50rpx 20rpx 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
position: relative;
|
||||
.user_account_li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user_account_message{
|
||||
width: 180rpx;
|
||||
.user_account_amount{
|
||||
color: #E60703;
|
||||
font-size: 40rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.user_account_name{
|
||||
color: #000000;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.user_account_img{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
.user_account_border{
|
||||
background-color: #D9D9D9;
|
||||
height: 76rpx;
|
||||
width: 1rpx;
|
||||
}
|
||||
.user_account_tag{
|
||||
width: 100rpx;
|
||||
position: absolute;
|
||||
top: 15rpx;
|
||||
left: 120rpx;
|
||||
.user_account_tag_num{
|
||||
width: 100%;
|
||||
height: 29rpx;
|
||||
background: linear-gradient( 90deg, #FF745F 0%, #FF485C 100%);
|
||||
border-radius: 15rpx 15rpx 15rpx 15rpx;
|
||||
font-size: 18rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.user_account_tag_j{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0rpx solid transparent;
|
||||
border-right: 20rpx solid transparent;
|
||||
border-top: 11rpx solid #FF745F;
|
||||
margin-left: 18px;
|
||||
margin-top: -1rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user_cont_list{
|
||||
margin: 20rpx 20rpx 0 20rpx;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
.user_cont_li{
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 0rpx 30rpx 0rpx;
|
||||
.user_cont_li_img{
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
}
|
||||
.user_cont_li_name{
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.user_cont_li_left_boder{
|
||||
box-shadow: -10rpx 0 10rpx -5rpx rgba(244, 244, 244, 0.8); /* 左边框阴影 */
|
||||
}
|
||||
}
|
||||
|
||||
.user_title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 80rpx;
|
||||
.user_img{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: block;
|
||||
}
|
||||
.user_name{
|
||||
color: #FF0000;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
margin: 0 10rpx 0 10rpx;
|
||||
}
|
||||
}
|
||||
// 商品区域样式
|
||||
.shop_view{
|
||||
margin-top: 48rpx;
|
||||
padding: 13rpx 20rpx 0rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.shop_view_ul{
|
||||
width: 346rpx;
|
||||
.shop_view_li{
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
margin-bottom: 20rpx;
|
||||
.shop_view_li_swiper{
|
||||
width: 100%;
|
||||
height: 504rpx;
|
||||
.shop_view_li_swiper_item{
|
||||
width: 100%;
|
||||
.shop_view_li_swiper_img_url{
|
||||
width: 100%;
|
||||
height: 504rpx;
|
||||
display: block;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_img{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 320rpx;
|
||||
.shop_view_tag{
|
||||
width: 66rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: -15rpx;
|
||||
top: 20rpx;
|
||||
background: url(../../static/tag_img.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.shop_view_tag_text{
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
height: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.shop_view_img_u{
|
||||
width: 300rpx;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 20rpx;
|
||||
top: 20rpx;
|
||||
.shop_view_img_url{
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_cont{
|
||||
padding: 20rpx;
|
||||
.shop_view_cont_title{
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
min-height: 80rpx;
|
||||
}
|
||||
.shop_view_cont_desc{
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.shop_view_cont_tag{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.shop_view_cont_tag_text{
|
||||
border-radius: 6rpx;
|
||||
border: 1rpx solid #FF6868;
|
||||
padding: 0rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
color: #ff6868;
|
||||
font-size: 18rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_cont_bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.shop_view_cont_price{
|
||||
font-size: 34rpx;
|
||||
color: red;
|
||||
font-weight: 500;
|
||||
}
|
||||
.shop_view_cont_cart{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.shop_view_cont_cart_img{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_bcg{
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price::before {
|
||||
content: '¥';
|
||||
font-size: 24rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
.prices::before {
|
||||
content: '¥';
|
||||
font-size: 20rpx;
|
||||
margin-right: 5rpx;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
.market_name{
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
text-decoration: line-through;
|
||||
margin-left: 5rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,179 @@
|
||||
<template>
|
||||
<view>
|
||||
个人中心页面
|
||||
<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">
|
||||
<image class="user_img" src="../../static/user/leftimg.png"></image>
|
||||
<view class="user_name">为您推荐</view>
|
||||
<image class="user_img" src="../../static/user/rightimg.png"></image>
|
||||
</view>
|
||||
|
||||
<!-- 商品区域 -->
|
||||
<view class="shop_view">
|
||||
<view class="shop_view_ul">
|
||||
<view class="shop_view_li">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
@ -10,6 +183,62 @@ 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:'地址管理'
|
||||
}
|
||||
])
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||||
|
||||
|
||||
BIN
static/bcges.jpg
Normal file
BIN
static/bcges.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
static/down_arrow.png
Normal file
BIN
static/down_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/up_arrow.png
Normal file
BIN
static/up_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
static/user/Subtract.jpg
Normal file
BIN
static/user/Subtract.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/user/Subtract.png
Normal file
BIN
static/user/Subtract.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 864 B |
BIN
static/user/address.png
Normal file
BIN
static/user/address.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/user/certification.png
Normal file
BIN
static/user/certification.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 937 B |
BIN
static/user/collect.png
Normal file
BIN
static/user/collect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/user/coupon.png
Normal file
BIN
static/user/coupon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
static/user/evaluate.png
Normal file
BIN
static/user/evaluate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/user/feedback.png
Normal file
BIN
static/user/feedback.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
static/user/leftimg.png
Normal file
BIN
static/user/leftimg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 556 B |
BIN
static/user/order.png
Normal file
BIN
static/user/order.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/user/purse.png
Normal file
BIN
static/user/purse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
static/user/refund.png
Normal file
BIN
static/user/refund.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
static/user/rightimg.png
Normal file
BIN
static/user/rightimg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 555 B |
BIN
static/user/service.png
Normal file
BIN
static/user/service.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/user/setting.png
Normal file
BIN
static/user/setting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/user/staypay.png
Normal file
BIN
static/user/staypay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/user/staytake.png
Normal file
BIN
static/user/staytake.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/user/tel.png
Normal file
BIN
static/user/tel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
static/user/user_bcg.png
Normal file
BIN
static/user/user_bcg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
Loading…
Reference in New Issue
Block a user