449 lines
12 KiB
Vue
449 lines
12 KiB
Vue
<template>
|
||
<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">
|
||
<block v-if="isLoad">
|
||
<view v-if="cateIndex === 0" class="list-body">
|
||
<block v-if="sendList.length > 0">
|
||
<view
|
||
v-for="(item, index) in sendList"
|
||
:key="index"
|
||
class="gift-item"
|
||
>
|
||
<view
|
||
v-for="(cart, cartIndex) in item.giftInfo"
|
||
:key="cartIndex"
|
||
class="gift-body"
|
||
@click="giftItemClickHanlde(item)"
|
||
>
|
||
<view class="gift-img">
|
||
<image
|
||
:src="cart.productInfo.image"
|
||
class="img"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<view class="gift-good-info">
|
||
<view class="name more-t">
|
||
{{ cart.productInfo.storeName }}
|
||
</view>
|
||
<view v-if="cart.productInfo.attrInfo" class="attr-txt">
|
||
<view class="txt">{{ cart.productInfo.attrInfo.sku }}</view>
|
||
</view>
|
||
<view class="price-wrap">
|
||
<view class="price">
|
||
<text class="prefix">￥</text>{{ item.payPrice }}
|
||
</view>
|
||
<view class="num">数量 X {{ cart.cartNum }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="gift-bottom">
|
||
<view class="gift-txt">
|
||
赠言：{{ item.message }}
|
||
</view>
|
||
<!-- 状态 0-待领取 1-已全部领取 2-已失效 -->
|
||
<view
|
||
v-if="item.status === 0"
|
||
class="btn"
|
||
>
|
||
送给朋友
|
||
<image
|
||
:src="webUrl + '/icon/icon-gift-share.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<view
|
||
v-if="item.status === 1"
|
||
class="btn"
|
||
>
|
||
已全部领取
|
||
</view>
|
||
<view
|
||
v-if="item.status === 2"
|
||
class="btn btn-grey"
|
||
>
|
||
已过期
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view v-if="sendList.length === 0" class="noCart">
|
||
<view class="pictrue">
|
||
<image :src="webUrl + '/20240102232734472795.png'"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="cateIndex === 1" class="list-body">
|
||
<block v-if="receiveList.length > 0">
|
||
<view
|
||
v-for="(item, index) in receiveList"
|
||
:key="index"
|
||
class="gift-item"
|
||
>
|
||
<view
|
||
v-for="(cart, cartIndex) in item.giftInfo"
|
||
:key="cartIndex"
|
||
class="gift-body"
|
||
@click="giftItemClickHanlde(item)"
|
||
>
|
||
<view class="gift-img">
|
||
<image
|
||
:src="cart.productInfo.image"
|
||
class="img"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<view class="gift-good-info">
|
||
<view class="name more-t">
|
||
{{ cart.productInfo.storeName }}
|
||
</view>
|
||
<view v-if="cart.productInfo.attrInfo" class="attr-txt">
|
||
<view class="txt">{{ cart.productInfo.attrInfo.sku }}</view>
|
||
</view>
|
||
<view class="price-wrap">
|
||
<view class="price">
|
||
<text class="prefix">￥</text>{{ item.payPrice }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="gift-bottom">
|
||
<view class="gift-txt">
|
||
赠言：{{ item.message }}
|
||
</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>
|
||
</block>
|
||
<view v-if="receiveList.length === 0" class="noCart">
|
||
<view class="pictrue">
|
||
<image :src="webUrl + '/20240102232734472795.png'"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<goo-skeleton
|
||
v-else
|
||
:show-avatar="false"
|
||
/>
|
||
</view>
|
||
<view class="page-bottom">
|
||
<image
|
||
:src="webUrl + '/icon/icon-send-gift-notice-btn.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
@click="showTips"
|
||
/>
|
||
</view>
|
||
<gift-tips
|
||
ref="giftTips"
|
||
:richText="giftNotice"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
giftCardReceiveList,
|
||
giftCardSendList,
|
||
giftNotice
|
||
} from '@/api/giftList'
|
||
import giftTips from '@/pkg_user/views/gift/components/giftTips.vue'
|
||
export default {
|
||
name: 'GiftLisPage',
|
||
components: {
|
||
giftTips
|
||
},
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
giftNotice: '',
|
||
cateIndex: 0,
|
||
cateList: [
|
||
{
|
||
name: '送出的',
|
||
status: 1
|
||
},
|
||
{
|
||
name: '收到的',
|
||
status: 2
|
||
}
|
||
],
|
||
isLoad: false,
|
||
sendList: [],
|
||
receiveList: []
|
||
}
|
||
},
|
||
created() {
|
||
giftNotice().then(res => {
|
||
this.giftNotice = res.data
|
||
})
|
||
this.getGiftCardSendList()
|
||
},
|
||
methods: {
|
||
cateItemClickHanlde(item, index) {
|
||
if (this.cateIndex === index || !this.isLoad) return
|
||
this.cateIndex = index
|
||
if (this.cateIndex === 0) {
|
||
this.getGiftCardSendList()
|
||
}
|
||
if (this.cateIndex === 1) {
|
||
this.getGiftCardReceiveList()
|
||
}
|
||
},
|
||
getGiftCardReceiveList() {
|
||
this.isLoad = false
|
||
giftCardReceiveList({
|
||
page: 1,
|
||
limit: 999
|
||
}).then(res => {
|
||
const { success, data } = res
|
||
if (success) {
|
||
this.receiveList = data || []
|
||
}
|
||
}).catch(err => {
|
||
console.log(err)
|
||
}).finally(() => {
|
||
this.isLoad = true
|
||
})
|
||
},
|
||
getGiftCardSendList() {
|
||
this.isLoad = false
|
||
giftCardSendList({
|
||
page: 1,
|
||
limit: 999
|
||
}).then(res => {
|
||
const { success, data } = res
|
||
if (success) {
|
||
this.sendList = data || []
|
||
}
|
||
}).catch(err => {
|
||
console.log(err)
|
||
}).finally(() => {
|
||
this.isLoad = true
|
||
})
|
||
},
|
||
showTips() {
|
||
this.$refs.giftTips.showTips = true
|
||
},
|
||
giftItemClickHanlde(item) {
|
||
if (this.cateIndex === 0) return
|
||
this.$yrouter.push({
|
||
path: '/pages/order/OrderDetails/index',
|
||
query: {
|
||
id: item.orderId
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.gift-page {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
padding: 20rpx 20rpx 0 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 80rpx 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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.page-bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 80rpx;
|
||
background-color: #F6F6F6;
|
||
.icon {
|
||
display: block;
|
||
width: 140rpx;
|
||
}
|
||
}
|
||
}
|
||
.noCart {
|
||
margin-top: 0.17 * 100rpx;
|
||
padding-top: 0.1 * 100rpx;
|
||
.pictrue {
|
||
width: 408rpx;
|
||
height: 414rpx;
|
||
overflow: hidden;
|
||
margin: 0.7 * 100rpx auto 0.5 * 100rpx auto;
|
||
image {
|
||
display: block;
|
||
width: 408rpx;
|
||
height: 414rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |