Feat(我的礼品卡):界面初始化
This commit is contained in:
lifizer
@@ -765,6 +765,12 @@
|
||||
{
|
||||
"root": "pkg_user",
|
||||
"pages": [
|
||||
{
|
||||
"path": "views/giftList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的礼品卡"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/myFavorite",
|
||||
"style": {
|
||||
|
||||
@@ -301,7 +301,7 @@ export default {
|
||||
toolList: [
|
||||
{
|
||||
text: '我的礼包卡',
|
||||
url: '/pkg_user/views/personalData',
|
||||
url: '/pkg_user/views/giftList',
|
||||
icon: '/icon/gift.png',
|
||||
allowEnter: true
|
||||
},
|
||||
|
||||
+307
-5
@@ -1,15 +1,317 @@
|
||||
<template>
|
||||
<view class="">
|
||||
礼品卡
|
||||
<view class="gift-page">
|
||||
<view class="cate-wrap">
|
||||
<view class="cate-list">
|
||||
<view
|
||||
v-for="(item, index) in cateList"
|
||||
:key="index"
|
||||
:class="cateIndex === index ? 'curr' : ''"
|
||||
class="cate-item"
|
||||
@click="cateItemClickHanlde(item, index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<view v-if="isLoad" class="list-body">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="gift-item"
|
||||
>
|
||||
<view
|
||||
class="gift-body"
|
||||
@click="giftItemClickHanlde(item)"
|
||||
>
|
||||
<view class="gift-img">
|
||||
<image
|
||||
:src="item.imgage"
|
||||
class="img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="gift-good-info">
|
||||
<view class="name more-t">
|
||||
{{ item.goodName }}
|
||||
</view>
|
||||
<view class="attr-txt">
|
||||
<view class="txt">{{ item.attrName }}</view>
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="price">
|
||||
<text class="prefix">￥</text>{{ item.price }}
|
||||
</view>
|
||||
<view class="num">数量 X {{ item.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="gift-bottom">
|
||||
<view class="gift-txt">
|
||||
赠言：{{ item.txt }}
|
||||
</view>
|
||||
<view
|
||||
v-if="item.status === 1"
|
||||
class="btn"
|
||||
>
|
||||
送给朋友
|
||||
<image
|
||||
:src="webUrl + '/icon/icon-gift-share.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
v-if="item.status === 2"
|
||||
class="btn"
|
||||
>
|
||||
已全部领取
|
||||
</view>
|
||||
<view
|
||||
v-if="item.status > 2"
|
||||
class="btn btn-grey"
|
||||
>
|
||||
灰色按钮
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
:show-avatar="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
name: 'GiftLisPage',
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
cateIndex: 0,
|
||||
cateList: [
|
||||
{
|
||||
name: '送出的',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
name: '收到的',
|
||||
status: 2
|
||||
}
|
||||
],
|
||||
isLoad: true,
|
||||
list: [
|
||||
{
|
||||
imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
|
||||
goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
|
||||
attrName: '卤味干拌米线 360g/盒*4',
|
||||
price: 19.00,
|
||||
num: 1,
|
||||
txt: '礼笺轻启，礼藏心意',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
|
||||
goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
|
||||
attrName: '卤味干拌米线 360g/盒*4',
|
||||
price: 19.00,
|
||||
num: 1,
|
||||
txt: '礼笺轻启，礼藏心意礼笺轻启，礼藏心意礼笺轻启，礼藏心意',
|
||||
status: 2
|
||||
},
|
||||
{
|
||||
imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
|
||||
goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
|
||||
attrName: '卤味干拌米线 360g/盒*4',
|
||||
price: 19.00,
|
||||
num: 1,
|
||||
txt: '礼笺轻启，礼藏心意',
|
||||
status: 3
|
||||
},
|
||||
{
|
||||
imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
|
||||
goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
|
||||
attrName: '卤味干拌米线 360g/盒*4',
|
||||
price: 19.00,
|
||||
num: 1,
|
||||
txt: '礼笺轻启，礼藏心意',
|
||||
status: 4
|
||||
},
|
||||
{
|
||||
imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
|
||||
goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
|
||||
attrName: '卤味干拌米线 360g/盒*4',
|
||||
price: 19.00,
|
||||
num: 1,
|
||||
txt: '礼笺轻启，礼藏心意',
|
||||
status: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.isLoad = true
|
||||
}, 2000)
|
||||
},
|
||||
methods: {
|
||||
cateItemClickHanlde(item, index) {
|
||||
if (this.cateIndex === index || !this.isLoad) return
|
||||
this.cateIndex = index
|
||||
// todo:列表数据请求加载
|
||||
this.isLoad = false
|
||||
setTimeout(() => {
|
||||
this.isLoad = true
|
||||
}, 2000)
|
||||
},
|
||||
giftItemClickHanlde(item) {
|
||||
console.log(item)
|
||||
// todo:跳转到订单详情
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.gift-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #F6F6F6;
|
||||
.cate-wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
padding: 20rpx 32rpx;
|
||||
background-color: #F6F6F6;
|
||||
.cate-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background-color: #fff;
|
||||
.cate-item {
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
line-height: 64rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
&.curr {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: #C41617;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-wrap {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 84rpx 0 0 0;
|
||||
.gift-item {
|
||||
padding: 16rpx;
|
||||
margin: 0 0 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #ffff;
|
||||
.gift-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.gift-img {
|
||||
.img {
|
||||
display: block;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
.gift-good-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 212rpx);
|
||||
height: 200rpx;
|
||||
.name {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.attr-txt {
|
||||
display: flex;
|
||||
.txt {
|
||||
height: 42rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 1px solid #999;
|
||||
line-height: 42rpx;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.price-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.price {
|
||||
color: #C52733;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
.prefix {
|
||||
font-weight: normal;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
.num {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.gift-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0 0 0;
|
||||
margin: 24rpx 0 0 0;
|
||||
border-top: 1rpx solid #D2D2D2;
|
||||
.gift-txt {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 46rpx;
|
||||
padding: 0 12rpx;
|
||||
margin: 0 0 0 24rpx;
|
||||
border-radius: 8rpx;
|
||||
color: #fff;
|
||||
line-height: 46rpx;
|
||||
font-size: 26rpx;
|
||||
background-color: #C52733;
|
||||
.icon {
|
||||
display: block;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
&.btn-grey {
|
||||
color: #fff;
|
||||
background-color: #C7C7C7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user