Feat(我的礼品卡):界面初始化
This commit is contained in:
lifizer
@@ -765,6 +765,12 @@
|
|||||||
{
|
{
|
||||||
"root": "pkg_user",
|
"root": "pkg_user",
|
||||||
"pages": [
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "views/giftList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的礼品卡"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "views/myFavorite",
|
"path": "views/myFavorite",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@@ -301,7 +301,7 @@ export default {
|
|||||||
toolList: [
|
toolList: [
|
||||||
{
|
{
|
||||||
text: '我的礼包卡',
|
text: '我的礼包卡',
|
||||||
url: '/pkg_user/views/personalData',
|
url: '/pkg_user/views/giftList',
|
||||||
icon: '/icon/gift.png',
|
icon: '/icon/gift.png',
|
||||||
allowEnter: true
|
allowEnter: true
|
||||||
},
|
},
|
||||||
|
|||||||
+307
-5
@@ -1,15 +1,317 @@
|
|||||||
<template>
|
<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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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>
|
</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>
|
</style>
|
||||||
Reference in New Issue
Block a user