354 lines
7.9 KiB
Vue
354 lines
7.9 KiB
Vue
<template>
|
|
<view class="whole">
|
|
<search-input @searchBtn="searchBtn" :searchValue="keyword" :show="false" />
|
|
<view class="banner">
|
|
<view class="box">
|
|
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/02/27/OBhoSI438LwCuN2KOa0zToktkPBfgS2gsDbJwG39.png" mode="widthFix" class="img"></image>
|
|
</view>
|
|
</view>
|
|
<view class="goodbox">
|
|
<view class="item" v-for="item in goodsList" :key="item.id">
|
|
<image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img" @click="toGroups(item.id)"></image>
|
|
<view class="box">
|
|
<view class="tit" @click="toGroups(item.id)">{{item.title}}</view>
|
|
<view class="text">
|
|
<view class="share flex" @click="shareWechat(item)">
|
|
<view class="icon" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
|
|
</view>
|
|
<view class="btn flex" @click="toWant(item)" :class="item.is_collect ? 'hui' : ''">
|
|
<text v-if="item.is_collect">已想要</text>
|
|
<template v-else>
|
|
<up-icon name="heart-fill" color="#fff" size="14" /> 想要
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btnBox">
|
|
<button class="btn flex" @click="handleShare()">
|
|
<up-icon name="share" :color="Color" /> 我要分享
|
|
</button>
|
|
<view class="btn flex on" @click="toPage">
|
|
<up-icon name="heart-fill" color="#fff" /> 发布心愿
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom" v-if="goodsList.length && page >= last_page && !loading">— 没有更多了 —</view>
|
|
<view v-if="!goodsList.length && !loading" class="empty">
|
|
<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/list.png" text="暂无数据"></up-empty>
|
|
</view>
|
|
<view v-if="loading" class="loadbox">
|
|
<up-loading-icon text="加载中..." textSize="18"></up-loading-icon>
|
|
</view>
|
|
|
|
<!-- 返回顶部 -->
|
|
<div @click="handleTop" v-if="showTop" class="top">
|
|
<up-icon name="arrow-upward" color="#000" size="24" />
|
|
</div>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs } from 'vue'
|
|
import { uniShare, toMiniProgram } from '@/components/common.js'
|
|
import { get, post } from '@/api/request.js'
|
|
import { Style } from '@/utils/list.js'
|
|
import searchInput from '@/components/searchInput/index.vue'
|
|
import { sp2 } from '@/components/img.js'
|
|
|
|
export default {
|
|
components: {
|
|
searchInput
|
|
},
|
|
setup() {
|
|
const data = reactive({
|
|
sp2: sp2,
|
|
orign_id: '',
|
|
page: 1,
|
|
last_page: 0,
|
|
goodsList: [],
|
|
loading: true,
|
|
showTop: false,
|
|
shareUrl: '',
|
|
Color: '',
|
|
priceColor: '',
|
|
keyword: '',
|
|
canClick: true
|
|
})
|
|
|
|
function searchBtn(e) {
|
|
data.orign_id = ''
|
|
data.keyword = e
|
|
data.page = 1
|
|
getFetchList(0)
|
|
}
|
|
|
|
function getFetchList(val) {
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: '加载中'
|
|
})
|
|
let params = {
|
|
collect_type: 1,
|
|
page: data.page,
|
|
pageSize: 20,
|
|
title: data.keyword,
|
|
shop_goods_id: data.orign_id
|
|
}
|
|
get('/api/app/wish/goods', params).then((res) => {
|
|
data.last_page = res.meta.last_page
|
|
data.goodsList = val == 0 ? res.data : data.goodsList.concat(res.data)
|
|
uni.hideLoading()
|
|
data.loading = false
|
|
}).catch(() => {
|
|
data.loading = false
|
|
})
|
|
}
|
|
|
|
const handleTop = () => {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 300
|
|
})
|
|
}
|
|
|
|
const toGroups = (id) => {
|
|
uni.navigateTo({
|
|
url: '/pages/groups/index?id=' + id
|
|
})
|
|
}
|
|
|
|
const toPage = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/mine/wise/add'
|
|
})
|
|
}
|
|
|
|
const toWant = (item) => {
|
|
// 取消提醒
|
|
if(item.is_collect) {
|
|
post(`/api/v1/goods/remind/cancel/${item.id}`, {type: 1}).then((res) => {
|
|
item.is_collect = false
|
|
uni.showToast({
|
|
title: '已取消到货提醒',
|
|
icon: 'none'
|
|
})
|
|
})
|
|
} else {
|
|
toMiniProgram('pages/mine/wise/index')
|
|
}
|
|
}
|
|
|
|
function shareWechat(res) {
|
|
let path = 'pages/mine/wise/index?id=' + res.id
|
|
uniShare(res.title, res.face_img, path)
|
|
}
|
|
|
|
function handleShare() {
|
|
let title = '我正在为我想要的商品投票，你也快来看看吧'
|
|
let path = 'pages/mine/wise/index'
|
|
uniShare(title, '', path)
|
|
}
|
|
|
|
return {
|
|
uniShare,
|
|
toMiniProgram,
|
|
...toRefs(data),
|
|
getFetchList,
|
|
handleTop,
|
|
toGroups,
|
|
searchBtn,
|
|
toWant,
|
|
toPage,
|
|
shareWechat,
|
|
handleShare
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if (this.page < this.last_page) {
|
|
this.page ++
|
|
this.getFetchList(1)
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
if (e.scrollTop > 300) {
|
|
this.showTop = true
|
|
} else {
|
|
this.showTop = false
|
|
}
|
|
},
|
|
async onLoad(options) {
|
|
// await this.$onLaunched
|
|
this.orign_id = options.id || ''
|
|
this.Color = uni.getStorageSync('theme_color')
|
|
this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
|
|
await this.getFetchList(0)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.whole{
|
|
position: relative;
|
|
padding-bottom: 120rpx;
|
|
background-color: $uni-bg-color;
|
|
.banner{
|
|
padding: 0 24rpx;
|
|
margin: 10rpx 0;
|
|
.box{
|
|
background-color: v-bind('Color');
|
|
border-radius: 20rpx;
|
|
width: 100%;
|
|
.img{
|
|
width: 100%;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.goodbox{
|
|
padding: 0 24rpx;
|
|
margin-top: 24rpx;
|
|
.item{
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.img{
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.box{
|
|
display: flex;
|
|
width: calc(100% - 220rpx);
|
|
height: 200rpx;
|
|
flex-direction: column;
|
|
justify-content: inherit;
|
|
.tit{
|
|
font-size: 30rpx;
|
|
color: #000;
|
|
line-height: 44rpx;
|
|
height: 140rpx;
|
|
}
|
|
.text{
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
.share{
|
|
background-color: #F5F5F5;
|
|
border-radius: 50%;
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
.icon{
|
|
background-position: -166px -62.25px;
|
|
width: 20.5px;
|
|
height: 20.5px;
|
|
background-repeat: no-repeat;
|
|
background-size: 339px 306px;
|
|
transform: scale(0.65);
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
background: v-bind('Color');
|
|
border-radius: 54rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
height: 54rpx;
|
|
width: 130rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 24rpx;
|
|
line-height: 1;
|
|
&.hui{
|
|
background-color: #E2E2E2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.empty{
|
|
width: 100%;
|
|
}
|
|
.top {
|
|
position: fixed;
|
|
bottom: 15%;
|
|
right: 5%;
|
|
background: #fff;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
line-height: 107rpx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
|
|
z-index: 10;
|
|
}
|
|
.bottom {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin: auto;
|
|
padding: 0 0 30rpx;
|
|
width: 100%;
|
|
}
|
|
.loadbox{
|
|
padding: 30rpx 0;
|
|
text-align: center;
|
|
color: #666;
|
|
}
|
|
.btnBox{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 20rpx 24rpx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
background-color: #fff;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
.btn{
|
|
color: v-bind('Color');
|
|
font-size: 28rpx;
|
|
width: 36%;
|
|
height: 32px;
|
|
border: 1px solid v-bind('Color');
|
|
border-radius: 10rpx;
|
|
box-sizing: border-box;
|
|
line-height: 1;
|
|
border-radius: 32px 0 0 32px;
|
|
position: relative;
|
|
&.on{
|
|
background: v-bind('Color');
|
|
color: #fff;
|
|
border-radius: 0 32px 32px 0;
|
|
border-left: none;
|
|
&::before{
|
|
position: absolute;
|
|
top: 0;
|
|
left: -16px;
|
|
content: '';
|
|
height: 0;
|
|
border: 15px solid #fff;
|
|
border-right-color: v-bind('Color');
|
|
border-bottom-color: v-bind('Color');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|