积分商城相关页面添加
This commit is contained in:
155
scoreShop/index/components/goods-list.vue
Normal file
155
scoreShop/index/components/goods-list.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view class="goodslist" :class="[layout]">
|
||||
<view v-for="(item, index) in 10" :key="index" @click="toDetail(item)">
|
||||
<template v-if="layout === 'list'">
|
||||
<view class="item">
|
||||
<image class="img" lazy-load></image>
|
||||
<view class="info">
|
||||
<view>
|
||||
<view class="name u-line-1">这里是商品名称</view>
|
||||
<view class="price">8000积分</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-center u-col-center u-flex-col">
|
||||
<view class="btn">兑换</view>
|
||||
<view class="limit">限购2份</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="layout === 'block'">
|
||||
<view class="item">
|
||||
<image class="img" lazy-load></image>
|
||||
<view class="info">
|
||||
<view class="name u-line-1">这里是商品名称</view>
|
||||
<view class="price">8000积分</view>
|
||||
<view class="u-flex u-col-center u-m-t-16 u-row-between">
|
||||
<view class="limit">限购2份</view>
|
||||
<view class="btn">兑换</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Object,
|
||||
default: () => [],
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: "block",
|
||||
},
|
||||
});
|
||||
|
||||
function toDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: '/scoreShop/detail/index?id=' + item.id,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.goodslist {
|
||||
padding: 28rpx;
|
||||
&.list {
|
||||
.item {
|
||||
background-color: #fff;
|
||||
padding: 32rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
margin-bottom: 18rpx;
|
||||
.img {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #d9d9d9;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
margin-top: 14rpx;
|
||||
color: #666;
|
||||
}
|
||||
.btn {
|
||||
padding: 14rpx 48rpx;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
|
||||
color: #9c571f;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
&.end {
|
||||
color: #999999;
|
||||
background-color: rgba(153, 153, 153, 0.3);
|
||||
}
|
||||
}
|
||||
.limit {
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.block {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
row-gap: 30rpx;
|
||||
column-gap: 52rpx;
|
||||
.item {
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
.img {
|
||||
width: 266rpx;
|
||||
height: 266rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #d9d9d9;
|
||||
}
|
||||
.info {
|
||||
margin-top: 28rpx;
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
margin-top: 16rpx;
|
||||
font-weight: 700;
|
||||
color: #9C571F;
|
||||
}
|
||||
.btn {
|
||||
padding: 14rpx 48rpx;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
|
||||
color: #9c571f;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
&.end {
|
||||
color: #999999;
|
||||
background-color: rgba(153, 153, 153, 0.3);
|
||||
}
|
||||
}
|
||||
.limit {
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
scoreShop/index/index.vue
Normal file
157
scoreShop/index/index.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7">
|
||||
<up-navbar
|
||||
title="积分商城"
|
||||
bgColor="transparent"
|
||||
leftIconColor="#333"
|
||||
titleStyle="color:#333"
|
||||
></up-navbar>
|
||||
<view :style="{ backgroundImage: 'url(' + imgs.bg + ')' }" class="bg">
|
||||
<view class="top">
|
||||
<view>
|
||||
<view class="u-flex">
|
||||
<image :src="imgs.wujiaoxing" class="wujiaoxing"></image>
|
||||
<view class="number u-m-l-20 u-m-r-12">73954</view>
|
||||
<view class="u-flex">
|
||||
<up-icon
|
||||
name="arrow-right"
|
||||
size="18"
|
||||
bold
|
||||
color="#9C571F"
|
||||
></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex color1" style="margin-left: 66rpx">
|
||||
<text>积分订单</text>
|
||||
<text class="u-m-l-44">积分明细</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<image :src="imgs.huizhang" class="huizhang"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="tab-box u-flex">
|
||||
<view class="tabs u-flex-1 u-flex">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="tabActive === 0 ? 'active' : ''"
|
||||
@click="tabActive = 0"
|
||||
>优惠券</view
|
||||
>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="tabActive === 1 ? 'active' : ''"
|
||||
@click="tabActive = 1"
|
||||
>其他商品</view
|
||||
>
|
||||
</view>
|
||||
<view class="u-flex" @click="toggleLayout">
|
||||
<image :src="imgs.layout" class="layout" />
|
||||
</view>
|
||||
</view>
|
||||
<goodsList :layout="layout"></goodsList>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import goodsList from "./components/goods-list.vue";
|
||||
const imgs = {
|
||||
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3716211a58d84fda9ee596a1882c0704.png", //背景图
|
||||
huizhang:
|
||||
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/5d07600cc494490aa3adacfe51d8845d.png", //徽章
|
||||
wujiaoxing:
|
||||
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/d53e8d88462d4d838b12150062644d03.png", //五角星
|
||||
layout:
|
||||
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/cba40ceb38a64bbfbe144f2ab0d6197f.png", //布局
|
||||
};
|
||||
const layout = ref("block");
|
||||
|
||||
function toggleLayout() {
|
||||
layout.value = layout.value === "block" ? "list" : "block";
|
||||
}
|
||||
|
||||
const tabActive = ref(0);
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.bg {
|
||||
background-size: cover;
|
||||
min-height: 454rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.top {
|
||||
padding: 138rpx 26rpx 48rpx 42rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
$color: #9c571f;
|
||||
.huizhang {
|
||||
width: 218rpx;
|
||||
height: 212rpx;
|
||||
}
|
||||
.wujiaoxing {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
.color1 {
|
||||
color: $color;
|
||||
}
|
||||
.number {
|
||||
color: $color;
|
||||
font-size: 64rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
.layout {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.min-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.bottom {
|
||||
width: 750rpx;
|
||||
flex: 1;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
position: relative;
|
||||
transform: translateY(-32rpx);
|
||||
z-index: 1;
|
||||
background: #f7f7f7;
|
||||
|
||||
.tab-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 36rpx 32rpx 14rpx 0;
|
||||
|
||||
.tabs {
|
||||
justify-content: center;
|
||||
gap: 200rpx;
|
||||
.tab-item {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
padding: 16rpx 0;
|
||||
position: relative;
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 58rpx;
|
||||
height: 6rpx;
|
||||
background-color: transparent;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&.active::after {
|
||||
background-color: #ffaa62;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user