charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat:改造地址和首页

Browse Source
This commit is contained in:
charles
2025-09-25 22:26:03 +08:00
parent ba8158093a
commit 9e17a4597e
20 changed files with 1959 additions and 1567 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/choiceness/choiceness.vue
+123 -91
View File
@@ -1,114 +1,146 @@
<template>
<view class="choiceness_warp">
<view class="choiceness_title">
<up-image src="/static/common/jingxuan_left.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
<view class="choiceness_title_msg">为您精选</view>
<up-image src="/static/common/jingxuan_right.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
</view>
<view class="choiceness_product">
<view v-for="item in productList" :key="item.id" class="choiceness_product_item" @click="jumpInfo(item)">
<up-image :src="item.url" width="100%" height="140" bgColor="#f1f6ff00"></up-image>
<view class="product_item_name">{{ item.title }}</view>
<view class="product_item_price">
<view class="price_">
<text>￥</text>
<text style="color:36rpx;">{{ item.price }}</text>
</view>
<view class="price_sell">已售{{ item.sales }}件</view>
</view>
</view>
</view>
</view>
<view class="choiceness_warp">
<view class="choiceness_title">
<up-image
src="/static/common/jingxuan_left.png"
width="24"
height="8"
bgColor="#f1f6ff00"
></up-image>
<view class="choiceness_title_msg">为您精选</view>
<up-image
src="/static/common/jingxuan_right.png"
width="24"
height="8"
bgColor="#f1f6ff00"
></up-image>
</view>
<view
class="choiceness_product"
:class="platformType ? '' : 'iosplatformType'"
>
<view
v-for="item in productList"
:key="item.id"
class="choiceness_product_item"
@click="jumpInfo(item)"
>
<up-image
:src="item.url"
width="100%"
height="140"
bgColor="#f1f6ff00"
></up-image>
<view class="product_item_name">{{ item.title }}</view>
<view class="product_item_price">
<view class="price_">
<text>￥</text>
<text style="color: 36rpx">{{ item.price }}</text>
</view>
<view class="price_sell">已售{{ item.sales }}件</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { searchList } from '@/api/product.js';
import { searchList } from "@/api/product.js";
export default {
name: "choiceness",
data() {
return {
productList: []
};
},
mounted() {
this.getSearchList();
},
methods: {
//
jumpInfo(item) {
uni.navigateTo({
url: '/pages/other_package/productInfo/productInfo?id=' + item.id,
})
},
async getSearchList() {
const params = {
isRecomm: true,
page: 1,
pageSize: 66,
}
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.productList = resp.data
}
}
}
}
name: "choiceness",
data() {
return {
productList: [],
platformType: true,
};
},
mounted() {
/*#ifdef APP-PLUS*/
const appUpdate = uni.getStorageSync("platform");
this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
/*#endif*/
this.getSearchList();
},
methods: {
//
jumpInfo(item) {
uni.navigateTo({
url: "/pages/other_package/productInfo/productInfo?id=" + item.id,
});
},
async getSearchList() {
const params = {
isRecomm: true,
page: 1,
pageSize: 66,
};
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.productList = resp.data;
}
},
},
};
</script>
<style lang="scss" scoped>
.choiceness_warp {
margin-top: 50rpx;
margin-top: 50rpx;
}
.choiceness_title {
display: flex;
justify-content: center;
display: flex;
justify-content: center;
.choiceness_title_msg {
margin: 0 18rpx;
}
.choiceness_title_msg {
margin: 0 18rpx;
}
}
.choiceness_product {
margin-top: 40rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 40rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
&.iosplatformType {
padding-bottom: 100rpx;
}
.choiceness_product_item {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 10rpx 0rpx #EEEEEE;
border-radius: 24rpx;
width: 43%;
margin-bottom: 20rpx;
padding: 20rpx;
}
.choiceness_product_item {
background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx #eeeeee;
border-radius: 24rpx;
width: 43%;
margin-bottom: 20rpx;
padding: 20rpx;
}
.product_item_name {
font-weight: bold;
font-size: 26rpx;
color: #333333;
margin-top: 20rpx;
}
.product_item_name {
font-weight: bold;
font-size: 26rpx;
color: #333333;
margin-top: 20rpx;
}
.product_item_price {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10rpx;
.product_item_price {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10rpx;
.price_ {
font-weight: bold;
font-size: 26rpx;
color: $app-bt-bj;
}
.price_ {
font-weight: bold;
font-size: 26rpx;
color: $app-bt-bj;
}
.price_sell {
font-weight: 400;
font-size: 18rpx;
color: #999999;
}
}
.price_sell {
font-weight: 400;
font-size: 18rpx;
color: #999999;
}
}
}
</style>
</style>
components/custom-tab-bar.vue
+102 -77
View File
@@ -1,99 +1,124 @@
<template>
<view class="custom-tab-bar">
<view v-for="(item, index) in tabs" :key="index" class="tab-item" @click="switchTab(index)">
<image :src="tabIndex === index ? item.selectedIconPath : item.iconPath" class="tab-icon"></image>
<text :class="tabIndex === index ? 'tab-text tab-text-sel' : 'tab-text'">{{ item.text }}</text>
</view>
</view>
<view class="custom-tab-bar" :class="platformType ? '' : 'iosplatformType'">
<view
v-for="(item, index) in tabs"
:key="index"
class="tab-item"
@click="switchTab(index)"
>
<image
:src="tabIndex === index ? item.selectedIconPath : item.iconPath"
class="tab-icon"
></image>
<text
:class="tabIndex === index ? 'tab-text tab-text-sel' : 'tab-text'"
>{{ item.text }}</text
>
</view>
</view>
</template>
<script>
export default {
name: "custom-tab-bar",
props: {
tabIndex: { //当前选中的tab项
type: Number,
default: 0
}
},
data() {
return {
tabs: [
{
"pagePath": "/pages/home/home",
"text": "首页",
"iconPath": "/static/column/home.png",
"selectedIconPath": "/static/column/home_sel.png"
},
{
"pagePath": "/pages/sort/sort",
"text": "分类",
"iconPath": "/static/column/sort.png",
"selectedIconPath": "/static/column/sort_sel.png"
},
{
"pagePath": "/pages/supply_chain/supply_chain",
"text": "平价专区",
"iconPath": "/static/column/supply_chain.png",
"selectedIconPath": "/static/column/supply_chain_sel.png"
},
{
"pagePath": "/pages/shopping_cart/shopping_cart",
"text": "购物车",
"iconPath": "/static/column/shopping.png",
"selectedIconPath": "/static/column/shopping_sel.png"
}, {
"pagePath": "/pages/mine/mine",
"text": "我的",
"iconPath": "/static/column/mine.png",
"selectedIconPath": "/static/column/mine_sel.png"
}
]
};
},
methods: {
switchTab(index) {
const pagePath = this.tabs[index].pagePath;
uni.switchTab({ url: pagePath });
}
}
}
name: "custom-tab-bar",
props: {
tabIndex: {
//当前选中的tab项
type: Number,
default: 0,
platformType: 0,
},
},
data() {
return {
tabs: [
{
pagePath: "/pages/home/home",
text: "首页",
iconPath: "/static/column/home.png",
selectedIconPath: "/static/column/home_sel.png",
},
{
pagePath: "/pages/sort/sort",
text: "分类",
iconPath: "/static/column/sort.png",
selectedIconPath: "/static/column/sort_sel.png",
},
{
pagePath: "/pages/supply_chain/supply_chain",
text: "平价",
iconPath: "/static/column/supply_chain.png",
selectedIconPath: "/static/column/supply_chain_sel.png",
},
{
pagePath: "/pages/shopping_cart/shopping_cart",
text: "购物车",
iconPath: "/static/column/shopping.png",
selectedIconPath: "/static/column/shopping_sel.png",
},
{
pagePath: "/pages/mine/mine",
text: "我的",
iconPath: "/static/column/mine.png",
selectedIconPath: "/static/column/mine_sel.png",
},
],
};
},
created() {
/*#ifdef APP-PLUS*/
const appUpdate = uni.getStorageSync("platform");
this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
/*#endif*/
},
methods: {
switchTab(index) {
const pagePath = this.tabs[index].pagePath;
uni.switchTab({ url: pagePath });
},
},
};
</script>
<style lang="scss" scoped>
.custom-tab-bar {
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
//height: 140rpx;
/* 根据需要调整 */
background-color: #fff;
/* 背景颜色 */
bottom: 0;
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
height: calc(100rpx + env(safe-area-inset-bottom));
/* 根据需要调整 */
background-color: #fff;
/* 背景颜色 */
bottom: 0;
width: 100%;
padding-bottom: calc(env(safe-area-inset-bottom));
&.iosplatformType {
height: 100rpx;
padding-bottom: 0;
}
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.tab-icon {
margin-top: 5rpx;
width: 44rpx;
/* 图标大小 */
height: 44rpx;
/* 图标大小 */
margin-top: 5rpx;
width: 44rpx;
/* 图标大小 */
height: 44rpx;
/* 图标大小 */
}
.tab-text {
font-size: 24rpx
/* 文字大小 */
font-size: 24rpx;
/* 文字大小 */
}
.tab-text-sel {
color: $app-bt-bj;
color: $app-bt-bj;
}
</style>
</style>