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

no message

Browse Source
This commit is contained in:
money
2025-09-03 21:06:28 +08:00
parent c2ba5048b0
commit 40e5e0ff8d
12 changed files with 1108 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/common/my-btn.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<view class="my-btn" @click.stop="onClick"
:style="{
'border-radius':br,'min-height':mh,'background-color':bg,width:wd
'border-radius':br,'min-height':mh,'background':bg,width:wd
}">
<text :style="{
color:color,'font-size':fz,'font-weight':fw
components/shop/fen-item.vue
+95
View File
@@ -0,0 +1,95 @@
<template>
<view class="shop-view" @click.stop="onClick">
<view class="shop-left-view">
<image :src="obj.url"></image>
</view>
<view class="shop-right-view">
<view class="right-top-view text-overflow1">
<text class="text-32 text-bold text-zu text-overflow1">{{obj.title}}</text>
</view>
<view class="right-bottom-view">
<text class="text-28 text-zi text-bold">￥{{obj.price}}积分</text>
<MyBtn mh="64rpx" text="立即兑换" br="8rpx" bg="linear-gradient( 270deg, #B164FB 0%, #7934F6 100%)" wd="200rpx"></MyBtn>
</view>
</view>
</view>
</template>
<script>
import MyBtn from '@/components/common/my-btn.vue'
export default {
components:{MyBtn},
props:{
obj:{
type:Object,
default:()=>{}
},
},
mounted(){
},
methods: {
onClick(){
this.$emit('ok',this.obj.id);
}
}
}
</script>
<style lang="scss" scoped>
.shop-view{
width:100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12rpx;
box-sizing: border-box;
background-color: #fff;
border-radius: 12rpx;
.shop-left-view{
min-width:216rpx;
min-height:216rpx;
display: flex;
align-items: center;
justify-content: center;
image{
width:216rpx;
height:216rpx;
}
}
.shop-right-view{
width:100%;
display: flex;
min-height:216rpx;
margin-left:24rpx;
flex-direction: column;
justify-content: space-between;
.right-top-view{
width:100%;
display: flex;
}
.right-bottom-view{
width:100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
.right-bottom-panel{
width:284rpx;
height:104rpx;
min-height:104rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 12rpx;
box-sizing: border-box;
background-color: #F0E7FE;
border-radius: 8rpx;
}
}
}
}
</style>
components/shop/ping-item.vue
+63
View File
@@ -0,0 +1,63 @@
<template>
<view class="shop-view" @click.stop="onClick">
<image :src="obj.url" class="top-img"></image>
<view class="shop-bottom-panel">
<text class="text-30 text-zu text-overflow1">{{obj.title}}</text>
<view class="flex-r-lr" style="width:100%;margin-top:10rpx">
<text class="text-28 text-zi text-bold">￥{{obj.price}}</text>
<text class="text-24 " style="color:#999">已售{{obj.sales}}件</text>
</view>
</view>
</view>
</template>
<script>
import MyBtn from '@/components/common/my-btn.vue'
export default {
components:{MyBtn},
props:{
obj:{
type:Object,
default:()=>{}
},
},
mounted(){
},
methods: {
onClick(){
this.$emit('ok',this.obj.id);
}
}
}
</script>
<style lang="scss" scoped>
.shop-view{
width:332rpx;
height:416rpx;
min-height:416rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
background-color: #fff;
.top-img{
width:332rpx;
height:268rpx;
display: flex;
}
.shop-bottom-panel{
width:100%;
height:calc(100% - 268rpx);
padding: 0 12rpx;
box-sizing: border-box;
flex-direction: column;
justify-content: space-between;
display: flex;
}
}
</style>
components/shop/you-item.vue
+103
View File
@@ -0,0 +1,103 @@
<template>
<view class="shop-view" @click.stop="onClick">
<view class="shop-left-view">
<image :src="obj.url"></image>
</view>
<view class="shop-right-view">
<view class="right-top-view text-overflow1">
<text class="text-32 text-bold text-zu text-overflow1">{{obj.title}}</text>
</view>
<view class="right-bottom-view">
<view class="flex-c-lr" style="height:70rpx">
<text class="text-24 text-fu">原价</text>
<text class="text-24 text-fu text-d text-bold">￥{{obj.adPrice}}</text>
</view>
<view class="right-bottom-panel" style="height:70rpx">
<MyBtn mh="36rpx" :text="`专区立省${Number(obj.adPrice) - Number(obj.price)}元`" br="8rpx" fz="16rpx" bg="linear-gradient( 270deg, #AF39C4 0%, #7732FF 100%)" wd="260rpx"></MyBtn>
<text class="text-28 text-zi text-bold">到手
<text class="text-36">￥{{obj.price}}</text>
</text>
</view>
</view>
</view>
</view>
</template>
<script>
import MyBtn from '@/components/common/my-btn.vue'
export default {
components:{MyBtn},
props:{
obj:{
type:Object,
default:()=>{}
},
},
mounted(){
},
methods: {
onClick(){
this.$emit('ok',this.obj.id);
}
}
}
</script>
<style lang="scss" scoped>
.shop-view{
width:100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12rpx;
box-sizing: border-box;
background-color: #fff;
border-radius: 12rpx;
.shop-left-view{
min-width:216rpx;
min-height:216rpx;
display: flex;
align-items: center;
justify-content: center;
image{
width:216rpx;
height:216rpx;
}
}
.shop-right-view{
width:100%;
display: flex;
min-height:216rpx;
margin-left:24rpx;
flex-direction: column;
justify-content: space-between;
.right-top-view{
width:100%;
display: flex;
}
.right-bottom-view{
width:100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
.right-bottom-panel{
width:284rpx;
height:104rpx;
min-height:104rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 12rpx;
box-sizing: border-box;
background-color: #F0E7FE;
border-radius: 8rpx;
}
}
}
}
</style>