<template>
<view style="background-color: #f5f5f5;">
<!-- 左侧分类 -->
<scroll-view scroll-y="true" scroll-x="false" class="left_scrol_style">
<view class="left_list_item_style" v-for="item in leftDataSource" @click="changeTags(item)">
<view class = "flag_line_color_size flag_line_select" v-if="leftListSelectItem == item.index"></view>
<view class="flag_line_color_size flag_line_nomal" v-if="leftListSelectItem != item.index"></view>
<text class="left_list_text left_list_text_select" v-if="leftListSelectItem == item.index">{
{item.text}}</text>
<text class="left_list_text left_list_text_nomal" v-if="leftListSelectItem != item.index">{
{item.text}}</text>
<view class="line_color_size"></view>
<view class="flag_line_color_size" style="background-color:#e5e5e5;width:1px;bottom:0px;left:74px;"></view>
</view>
</scroll-view>
<!-- 右侧商品列表 -->
<scroll-view scroll-y="true" scroll-x="false" class="right_list_style" >
<view class="right_list_item" v-for="item in rightDataSource" @click="goToGoodDetail(item)">
<!-- 商品主图 -->
<image :src="item.url" class="right_list_item_image"></image>
<text class="right_list_item_title">{
{item.title}}</text>
<text class="right_list_item_sale_count">已售{
{item.saleCount}}</text>
<view class="price_back_view">
<text class = "right_list_item_price">¥{
{item.price}}</text>
<text class = "right_list_item_market_price">{
{item.marketPrice}}</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
//左侧分类列表
leftDataSource: [
{
'text':'手机',
'index': 0
},{
'text':'电脑办公',
'index': 1
},{
'text':'男装',
'index': 2
},{
'text':'生鲜',
'index': 3
},{
'text':'图书',
'index': 4
},{
'text':'食品',
'index': 5
},{
'text':'二手',
'index': 6
},{
'text':'医药健康',
'index': 7
},{
'text':'女装',
'index': 8
},{
'text':'腕表珠宝',
'index': 9
},{
'text':'男鞋',
'index': 10
},{
'text':'女鞋',
'index': 11
},{
'text':'家电',
'index': 12
},{
'text':'酒水饮料',
'index': 13
},{
'text':'美妆',
'index': 14
},{
'text':'运动',
'index': 15
},
],
leftListSelectItem: 0,
rightItemWidth:0,
rightDataSource:[
{
'url':'https://img13.360buyimg.com/n7/jfs/t1/105783/17/37256/50521/6421a2a9Fdbe153ae/670d18f4b3a6bfc3.jpg',
'title':'小米13 67W快充',
'specification': '折扣',
'saleCount': 569,
'marketPrice': '4599.00',
'price': '4599.00',
'buy': 1
},{
'url':'https://img13.360buyimg.com/n7/jfs/t1/158266/13/22741/76335/64229ff1F56ab160d/a83999137c71328c.jpg',
'title':'OPPO K9x 8GB+128GB',
'specification': '折扣',
'saleCount': 2069,
'marketPrice': '1399.00',
'price': '1199.00',
'buy': 1
},{
'url':'https://img11.360buyimg.com/n1/s450x450_jfs/t1/182637/24/33695/94823/64218731Fdc9080a5/caddeda70d7b2f53.jpg.avif',
'title':'荣耀80 8GB+256GB',
'specification': '折扣',
'saleCount': 1069,
'marketPrice': '2499.00',
'price': '2369.00',
'buy': 1
},{
'url':'https://img10.360buyimg.com/n1/s450x450_jfs/t1/112797/26/26785/137288/623c267fE00e6d548/66b2765dce234849.jpg.avif',
'title':'Redmi K40S 小米红米',
'specification': '折扣',
'saleCount': 2969,
'marketPrice': '1769.00',
'price': '1769.00',
'buy': 1
},{
'url':'https://img11.360buyimg.com/n1/s450x450_jfs/t1/197008/29/28074/30682/63244a99E25c50323/a729014d8c47ac3b.jpg.avif',
'title':'荣耀X40 8GB+128GB',
'specification': '折扣',
'saleCount': 100069,
'marketPrice': '1599.00',
'price': '1599.00',
'buy': 1
},{
'url':'https://img10.360buyimg.com/n1/s450x450_jfs/t1/69884/29/20285/49838/64196740F228e3999/2e9faeebb723746f.jpg.avif',
'title':'Redmi K60 小米红米',
'specification': '折扣',
'saleCount': 298969,
'marketPrice': '2699.00',
'price': '2699.00',
'buy': 1
},{
'url':'https://img14.360buyimg.com/n1/s450x450_jfs/t1/94898/35/30744/10759/63191dcaEb942eb41/cee02e5cca7918dc.jpg.avif',
'title':'Apple iPhone 14 Pro',
'specification': '折扣',
'saleCount': '10万+',
'marketPrice': '8899.00',
'price': '8899.00',
'buy': 1
},{
'url':'https://img13.360buyimg.com/n1/s450x450_jfs/t1/53706/37/23588/62637/6409af54F0d3690ef/50e0a7744cdcd5b0.jpg.avif',
'title':'Apple iPhone 14',
'specification': '折扣',
'saleCount': 28969,
'marketPrice': '5399.00',
'price': '5399.00',
'buy': 1
},{
'url':'https://img10.360buyimg.com/n1/s450x450_jfs/t1/128930/6/25398/106509/62286809Ecde9efc5/16e8ebc319a86f4c.jpg.avif',
'title':'Apple iPhone 13',
'specification': '折扣',
'saleCount': '10万+',
'marketPrice': '4799.00 ',
'price': '4799.00 ',
'buy': 1
},{
'url':'https://img14.360buyimg.com/n1/s450x450_jfs/t1/56580/38/19881/51069/63f5c48fFacaccf28/f972ca704c538ff8.png.avif',
'title':'Apple iPhone 苹果11Pro',
'specification': '折扣',
'saleCount': 98969,
'marketPrice': '2388.00',
'price': '2388.00',
'buy': 1
}
]
}
},
methods: {
//跳转至商品详情页面
goToGoodDetail(item){
uni.navigateTo({
url:'/pages/good/goodDetail'
})
},
//切换分类时 展示不同商品
changeTags(item){
//调用后台接口，加载当前选中类型所有商品信息
let goodType = item.index
this.leftListSelectItem = goodType
this.request('请求地址','GET',goodType).then(res =>{
this.rightDataSource = res.data
})
}
},
onShow() {
this.rightItemWidth = uni.getSystemInfoSync().windowWidth - 75.0
}
}
</script>
<style>
/*左侧分类视图*/
.left_scrol_style{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 75px;
display: block;
background-color: #F5F5F5;
}
/*左侧列表样式*/
.left_list_item_style{
height: 45px;
width: 100%;
position: relative
}
.line_color_size{
width: 100%;
height: 1px;
background-color: #D2D2D2;
position: absolute;
bottom: 0px;
}
.flag_line_color_size{
height: 100%;
width: 2px;
position: absolute;
top: 0;
left: 0;
}
.flag_line_select{
background-color: #FF6261;
}
.flag_line_nomal{
background-color: #E5E5E5;
}
/*左侧侧列表字体*/
.left_list_text{
text-align: center;
font-size: 15px;
line-height:44px;
position: absolute;
top: 0px;
bottom: 1px;
left: 2px;
right: 0px;
display: block
}
.left_list_text_nomal{
color: #787878;
background-color: #E5E5E5;
}
.left_list_text_select{
color: #FF6261;
background-color: white;
}
/*右侧列表样式*/
.right_list_style{
position: absolute;
top: 0;
bottom: 0;
left: 75px;
background-color: #F5F5F5;
}
/*右侧列表item*/
.right_list_item{
height: 90px;
width: 100%;
position: relative;
background-color: white;
}
/*商品主图*/
.right_list_item_image{
position: absolute;
height: 80px;
width: 80px;
top: 5px;
left: 5px;
right: 5px;
}
/*商品名称*/
.right_list_item_title{
text-align: left;
font-size: 16px;
position: absolute;
left: 90px;
top: 5px;
right: 5px;
height: 20px;
line-height: 20px;
color: #323232;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
/*tags*/
.tags_back_view{
position: absolute;
top: 30px;
left: 90px;
right: 5px;
height: 10px;
}
/*tags*/
.tags{
background-color: red;
font-size: 10px;
color: white;
line-height: 10px;
border-radius: 3px;
margin-left: 5px;
height: 10px;
float: left;
}
/*规格*/
.right_list_item_specification{
font-size: 10px;
line-height: 10px;
color: #B2B2B2;
position: absolute;
left: 90px;
bottom: 37px;
}
/*已售*/
.right_list_item_sale_count{
font-size: 10px;
line-height: 10px;
color: #B2B2B2;
position: absolute;
left: 90px;
bottom: 23px;
}
/*价钱的背景试图*/
.price_back_view{
height: 20px;
position: absolute;
bottom: 5px;
left: 90px;
}
/*售价*/
.right_list_item_price{
color: #FF6261;
font-size: 16px;
}
/*市场价*/
.right_list_item_market_price{
font-size: 13px;
color: #333333;
margin-left: 3px;
text-decoration:line-through;
}
/*+号按钮*/
.add_image_style{
width:20px;
height:20px;
position:relative;
top:50px;
right:80px;
float:right;
}
/*——号按钮*/
.reduce_image_style{
width:20px;
height:20px;
position:relative;
top:50px;
right:100px;
float:right;
}
/*购买数量*/
.good_buy_number{
height:20px;
line-height:20px;
position:relative;
top:50px;right:90px;
float:right;
font-size:16px;
margin-right:3px;
margin-left:3px;
}
.right_line{
height: 1px;
width: 100%;
background-color: #F5F5F5;
position: absolute;
bottom: 0px;
}
</style>
二、个人中心页
<template>
<view>
<scroll-view scroll-y="true" >
<!-- 顶部头像部分 -->
<view class="user_info_view">
<image :src="avatar" class="image_user_image"></image>
<text class="user_nick_name" v-if="isLogin">{
{userInfo.nickName}}</text>
<text class="user_nick_name" @click="toLogin()" v-else="isLogin">微信授权登录</text>
</view>
<!-- 中间我的订单部分 -->
<view class = "order_title_back">
<text class="order_title">我的订单</text>
<image src="/static/icon/right.png" class="order_image"></image>
<text class="order_send_title">查看全部订单</text>
</view>
<view style="background-color:#F5F5F5;height:1px;width:100%;"></view>
<view class="order_list_style">
<view class="order_list_item_style" v-for="item in myOrderTags">
<image :src="item.url" class="order_item_image"></image>
<text class="order_item_title">{
{item.title}}</text>
</view>
</view>
<view style = "background-color:#F5F5F5;height:10px;width:100%;"></view>
<view class="order_title_back">
<text class="order_title">我的钱包</text>
<image src="/static/icon/right.png" class="order_image"></image>
<text class="order_send_title">查看钱包</text>
</view>
<view style = "background-color:#F5F5F5;height:1px;width:100%;"></view>
<view class="order_list_style">
<view class="order_list_item_style" v-for="item in myBagTags">
<image :src="item.url" class="order_item_image"></image>
<text class="order_item_title">{
{item.title}}</text>
</view>
</view>
<view style = "background-color:#F5F5F5;height:10px;width:100%;"></view>
<view class="other_list_item" v-for="item in myOtherList">
<text class = "other_item_tile">{
{item}}</text>
<image src="/static/icon/right.png" class="other_image"></image>
<view style = "position:absolute;background-color:#F5F5F5;height:1px;width:100%;bottom:0px;rihgt:0px;"></view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: null,
isLogin: false,
avatar: '/static/other/avatar.png',
myOrderTags:[
{
'url':'/static/other/待支付.png',
'title':'待支付'
},{
'url':'/static/other/配送中.png',
'title':'配送中'
},{
'url':'/static/other/已完成.png',
'title':'已完成'
},{
'url':'/static/other/待评价.png',
'title':'待评价'
}
],
myBagTags:[
{
'url':'/static/other/积分.png',
'title':'积分'
},{
'url':'/static/other/酒库.png',
'title':'酒库'
},{
'url':'/static/other/优惠券.png',
'title':'优惠券'
},{
'url':'/static/other/酒券.png',
'title':'酒券'
}
],
myOtherList:[
'推荐有礼',
'客服中心',
'意见反馈',
'技术支持'
]
}
},
methods: {
//微信授权登录按钮
toLogin(){
uni.showToast({
title:'登录跳转中',
icon:'none',
duration:1000
})
setTimeout(function (){
uni.navigateTo({
url: '/pages/mine/login'
})
},1500)
}
},
onShow() {
this.isLogin = uni.getStorageSync('isLogin');
console.log(JSON.stringify(uni.getStorageSync('busInfo')));
this.userInfo = uni.getStorageSync('busInfo');
this.avatar = this.userInfo.avatar;
this.nickName = this.userInfo.nickName
}
}
</script>
<style>
.user_info_view{
background-image: url('https://cdn.pixabay.com/photo/2023/03/20/22/36/mountains-7865995_1280.jpg');
height: 170px;
width: 100%;
overflow: hidden;
position: relative;
}
.image_user_image{
width: 60px;
height: 60px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.user_nick_name{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
height: 20px;
line-height: 20px;
width: 100%;
text-align: center
}
.order_title_back{
height: 27px;
width: 100%;
position: relative;
}
.order_title{
font-size: 15px;
display: block;
position: absolute;
top: 6px;
left: 10px;
}
.order_send_title{
font-size: 11px;
color: #D3D3D3;
float: right;
position: absolute;
height:11px;
line-height: 11px;
right: 25px;
top: 8px;
}
.order_image{
position: absolute;
right: 5px;
top: 5px;
width: 17px;
height: 17px;
}
.order_list_style{
height: 60px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
.order_list_item_style{
width: 25%;
height: 80px;
float: left;
}
.order_item_image{
height: 40px;
width: 40px;
display: block;
margin-left: auto;
margin-right: auto;
}
.order_item_title{
height: 15px;
line-height: 15px;
font-size: 14px;
width: 100%;
text-align: center;
display: block;
margin-top: 5px;
color: #333333
}
.other_list_item{
height: 50px;
width: 100%;
position: relative;
display: block;
}
.other_item_tile{
font-size: 16px;
line-height: 16px;
position: absolute;
top: 17px;
left: 20px;
color: #333333
}
.other_list_image{
top:16.5px;
}
.other_image{
position: absolute;
right: 5px;
top: 18px;
width: 17px;
height: 17px;
}
</style>