liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(我的礼品卡):接口对接

Browse Source
This commit is contained in:
lifizer
2025-02-20 13:40:17 +08:00
parent 1fbbbed4f0
commit 40207f11a1
3 changed files with 268 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_user/views/gift/components/giftTips.vue
+1 -1
View File
@@ -10,7 +10,7 @@
>
<view class="popup-content">
<!-- 标题 -->
<view class="title">购买须知</view>
<view class="title">赠礼须知</view>
<!-- 富文本内容 -->
<u-parse :content="richText" />
</view>
pkg_user/views/giftList.vue
+245 -113
View File
@@ -14,82 +14,186 @@
</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 }}
<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">数量&nbsp;X&nbsp;{{ cart.cartNum }}</view>
</view>
</view>
</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 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 class="num">数量&nbsp;X&nbsp;{{ 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"
>
灰色按钮
</block>
<view v-if="sendList.length === 0" class="noCart">
<view class="pictrue">
<image :src="webUrl + '/20240102232734472795.png'"/>
</view>
</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: [
{
@@ -101,74 +205,71 @@ export default {
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
}
]
isLoad: false,
sendList: [],
receiveList: []
}
},
created() {
setTimeout(() => {
this.isLoad = true
}, 2000)
giftNotice().then(res => {
this.giftNotice = res.data
})
this.getGiftCardSendList()
},
methods: {
cateItemClickHanlde(item, index) {
if (this.cateIndex === index || !this.isLoad) return
this.cateIndex = index
// todo:列表数据请求加载
if (this.cateIndex === 0) {
this.getGiftCardSendList()
}
if (this.cateIndex === 1) {
this.getGiftCardReceiveList()
}
},
getGiftCardReceiveList() {
this.isLoad = false
setTimeout(() => {
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
}, 2000)
})
},
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) {
console.log(item)
// todo:跳转到订单详情
if (this.cateIndex === 0) return
this.$yrouter.push({
path: '/pages/order/OrderDetails/index',
query: {
id: item.orderId
}
})
}
}
}
@@ -178,7 +279,7 @@ export default {
.gift-page {
position: relative;
min-height: 100vh;
padding: 20rpx;
padding: 20rpx 20rpx 0 20rpx;
box-sizing: border-box;
background-color: #F6F6F6;
.cate-wrap {
@@ -215,7 +316,7 @@ export default {
.list-wrap {
position: relative;
z-index: 2;
padding: 84rpx 0 0 0;
padding: 84rpx 0 80rpx 0;
.gift-item {
padding: 16rpx;
margin: 0 0 24rpx;
@@ -313,5 +414,36 @@ export default {
}
}
}
.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>