Files
frontend-app/components/choiceness/choiceness.vue
T
2025-09-25 22:26:03 +08:00

147 lines
3.2 KiB
Vue

<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"
: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";
export default {
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;
}
.choiceness_title {
display: flex;
justify-content: center;
.choiceness_title_msg {
margin: 0 18rpx;
}
}
.choiceness_product {
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;
}
.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;
.price_ {
font-weight: bold;
font-size: 26rpx;
color: $app-bt-bj;
}
.price_sell {
font-weight: 400;
font-size: 18rpx;
color: #999999;
}
}
}
</style>