568 lines
14 KiB
Vue
568 lines
14 KiB
Vue
<template>
|
|
<view v-if="ready">
|
|
|
|
<view class="my-tabs flex jc-between">
|
|
<view class="tab-item flex jc-center ai-center"
|
|
:class="{'active':tabsIndex===index,'has-vertical':tabsVertical===index}" v-for="(item,index) in tabs"
|
|
:key="index" @click="changeTabs(index)">
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="manage flex jc-end ai-center" @click="changeManage" v-if="!isManage">
|
|
<image :src="webUrl+'/20240107224533038041.png'" mode="scaleToFill"/>
|
|
管理
|
|
</view>
|
|
<view class="manage flex jc-end ai-center" style="color:#C41617" @click="changeManage" v-else>
|
|
退出管理
|
|
</view>
|
|
<!--商品列表-->
|
|
<scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y
|
|
@scrolltolower="fetchProduct()" v-if="tabsIndex===0">
|
|
<view class="tc" style="margin-top: 200rpx;" v-if="productList.length===0">
|
|
<image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
|
|
</view>
|
|
|
|
<view class="item-commodity flex ai-center" v-for="(item,index) in productList" :key="index">
|
|
<CheckboxIcon style="margin-right: 16rpx;" :default-state="item['state']" :mark="[index]" @change="onChange"
|
|
v-if="isManage"/>
|
|
<image class="cover flex-0" :src="item['image']" mode="scaleToFill" @click="navToGoods(item['productId'])"/>
|
|
|
|
<view style="width: 100%">
|
|
<view class="more-t bold" @click="navToGoods(item['productId'])">{{ item['storeName'] }}</view>
|
|
<view class="sub" @click="navToGoods(item['productId'])">规格:{{ item['sku'] }}</view>
|
|
<view class="flex jc-between ai-end">
|
|
<view class="price flex ai-end" @click="navToGoods(item['productId'])">
|
|
<text style="color:#E92727">￥</text>
|
|
<text style="color:#E92727;font-size: 32rpx;line-height: 48rpx">{{ item['price'] }}</text>
|
|
<text style="margin-left: 10rpx;text-decoration:line-through">￥{{ item['otPrice'] }}</text>
|
|
</view>
|
|
<view class="cart flex jc-center ai-center">
|
|
<image :src="webUrl+'/20240107224527293534.png'" mode="scaleToFill" @click="addCart(item)"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!--店铺列表-->
|
|
<scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y @scrolltolower="fetchStore()"
|
|
v-if="tabsIndex===1">
|
|
<view class="tc" style="margin-top: 200rpx;" v-if="storeList.length===0">
|
|
<image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
|
|
</view>
|
|
|
|
<view class="item-store flex ai-start" v-for="(item,index) in storeList" :key="index">
|
|
<view class="flex flex-0 ai-center">
|
|
<CheckboxIcon style="margin-right: 16rpx;" :default-state="item['state']" :mark="[index]" @change="onChange"
|
|
v-if="isManage"/>
|
|
<image class="cover" :src="item['logo']" mode="scaleToFill"/>
|
|
</view>
|
|
|
|
<view>
|
|
<view class="flex jc-between ai-start" style="width: 594rpx">
|
|
<view>
|
|
<view class="one-t bold">{{ item['name'] }}</view>
|
|
<view class="sub">{{ item['time'] === '刚刚' ? '刚刚' : item['time'] + '收藏' }}</view>
|
|
</view>
|
|
<view class="btn-nav flex jc-center ai-center" :style="{'margin-right':(isManage?48:0)+'rpx'}"
|
|
@click="navToStore(item['hotelId'])">进店逛逛
|
|
<image style="width: 24rpx;height: 24rpx" :src="webUrl+'/20240109234706982937.png'" mode="scaleToFill"/>
|
|
</view>
|
|
</view>
|
|
<view class="flex jc-start ai-center" style="margin-top: 16rpx;">
|
|
<image class="img-product" :src="img" mode="scaleToFill"
|
|
v-for="(img,i) in item['productImages']" :key="i"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!--视频列表-->
|
|
<scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y
|
|
@scrolltolower="fetchVideo()"
|
|
v-if="tabsIndex===2">
|
|
<view class="tc" style="margin-top: 200rpx;" v-if="videoList.length===0">
|
|
<image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
|
|
</view>
|
|
|
|
<view class="flex flex-wrap" style="padding:40rpx 32rpx">
|
|
<view class="item-video" v-for="(item,index) in videoList" :key="index">
|
|
<CheckboxIcon class="video-check" :default-state="item['state']" :mark="[index]" @change="onChange"
|
|
v-if="isManage"/>
|
|
|
|
<image class="img-cover" :src="item['cover']" mode="scaleToFill" @click="navToVideo(item['videoId'])"/>
|
|
<view class="item-mask flex jc-end ai-end">
|
|
<image class="icon-heart" :src="webUrl+'/20240113205505660820.png'" mode="scaleToFill"/>
|
|
<text>{{ item['favoriteCount'] }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="fixed-manage flex jc-between ai-center" v-if="isManage">
|
|
<view style="margin-left: 30rpx;">
|
|
<CheckboxIcon style="margin-right: 16rpx;" :default-state="isAll" :mark="[-1]" @change="onChange"/>
|
|
<text style="color:#666666;font-size: 32rpx">全选({{ selectCount }})</text>
|
|
</view>
|
|
<view class="flex ai-center">
|
|
<view class="btn flex jc-center ai-center" style="background: #D5D7D8" @click="changeManage">返回</view>
|
|
<view class="btn flex jc-center ai-center" style="background: #FD5749" @click="remove">删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getProductList, getStoreList, getVideoList, removeFavorite} from "@/api/favorite";
|
|
import {postCartAdd} from "@/api/store";
|
|
import CheckboxIcon from "@/components/CheckboxIcon.vue";
|
|
|
|
export default {
|
|
components: {CheckboxIcon},
|
|
data() {
|
|
return {
|
|
ready: false,
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
tabs: [
|
|
{key: 0, label: '商品'},
|
|
{key: 1, label: '店铺'},
|
|
{key: 2, label: '视频'},
|
|
],
|
|
tabsIndex: 0,
|
|
isManage: false,
|
|
isAll: false,
|
|
page: 1,
|
|
productList: [],
|
|
storeList: [],
|
|
videoList: [],
|
|
}
|
|
},
|
|
computed: {
|
|
tabsVertical: function () {
|
|
if (this.tabsIndex === 0) return 1
|
|
if (this.tabsIndex === 1) return -1
|
|
if (this.tabsIndex === 2) return 0
|
|
},
|
|
selectCount: function () {
|
|
let count = 0, countList
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
countList = this.productList
|
|
break
|
|
case 1:
|
|
countList = this.storeList
|
|
break
|
|
case 2:
|
|
countList = this.videoList
|
|
break
|
|
}
|
|
|
|
countList.forEach(item => {
|
|
if (item['state']) count++
|
|
})
|
|
return count
|
|
}
|
|
},
|
|
mounted() {
|
|
this.ready = true
|
|
this.fetchProduct()
|
|
},
|
|
methods: {
|
|
navToGoods(id) {
|
|
uni.navigateTo({
|
|
url: "/pages/shop/GoodsCon/index?id=" + id
|
|
})
|
|
},
|
|
|
|
changeTabs(index) {
|
|
if (this.isManage) return
|
|
this.tabsIndex = index
|
|
this.page = 1
|
|
this.fetchData()
|
|
},
|
|
|
|
fetchData() {
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
this.fetchProduct()
|
|
break
|
|
case 1:
|
|
this.fetchStore()
|
|
break
|
|
case 2:
|
|
this.fetchVideo()
|
|
break
|
|
}
|
|
},
|
|
|
|
changeManage() {
|
|
this.isManage = !this.isManage
|
|
},
|
|
|
|
onChange(state, mark) {
|
|
if (mark[0] === -1) {
|
|
this.isAll = state
|
|
this.handleAll(state)
|
|
return
|
|
}
|
|
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
this.productList[mark]['state'] = state
|
|
this.isAll = this.selectCount === this.productList.length
|
|
break
|
|
case 1:
|
|
this.storeList[mark]['state'] = state
|
|
this.isAll = this.selectCount === this.storeList.length
|
|
break
|
|
case 2:
|
|
this.videoList[mark]['state'] = state
|
|
this.isAll = this.selectCount === this.videoList.length
|
|
break
|
|
}
|
|
},
|
|
|
|
handleAll(state) {
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
this.productList.forEach(item => item.state = state)
|
|
break
|
|
case 1:
|
|
this.storeList.forEach(item => item.state = state)
|
|
break
|
|
case 2:
|
|
this.videoList.forEach(item => item.state = state)
|
|
break
|
|
}
|
|
},
|
|
|
|
async remove() {
|
|
let that = this
|
|
uni.showModal({
|
|
title: '确认删除已选项目?',
|
|
content: '',
|
|
showCancel: true,
|
|
cancelText: '取消',
|
|
confirmText: '确认',
|
|
success: async (r) => {
|
|
if (r.confirm) {
|
|
let ids = []
|
|
switch (that.tabsIndex) {
|
|
case 0:
|
|
that.productList.forEach(item => {
|
|
if (item['state']) ids.push(item.id)
|
|
})
|
|
break
|
|
case 1:
|
|
that.storeList.forEach(item => {
|
|
if (item['state']) ids.push(item.id)
|
|
})
|
|
break
|
|
case 2:
|
|
that.videoList.forEach(item => {
|
|
if (item['state']) ids.push(item.id)
|
|
})
|
|
break
|
|
}
|
|
|
|
const res = await removeFavorite(ids)
|
|
if (res.success) {
|
|
that.isAll = false
|
|
that.fetchData()
|
|
that.removeAfter()
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
removeAfter() {
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
this.productList = this.productList.filter(item => !item['state'])
|
|
break
|
|
case 1:
|
|
this.storeList = this.storeList.filter(item => !item['state'])
|
|
break
|
|
case 2:
|
|
this.videoList = this.videoList.filter(item => !item['state'])
|
|
break
|
|
}
|
|
},
|
|
|
|
async fetchProduct() {
|
|
let that = this
|
|
if (that.page === 1) {
|
|
that.productList = []
|
|
}
|
|
const res = await getProductList(that.page)
|
|
if (res.success) {
|
|
res.data['records']?.forEach(item => {
|
|
item.state = false
|
|
that.productList.push(item)
|
|
})
|
|
that.page++
|
|
}
|
|
},
|
|
|
|
async fetchStore() {
|
|
let that = this
|
|
if (that.page === 1) {
|
|
that.storeList = []
|
|
}
|
|
const res = await getStoreList(that.page)
|
|
if (res.success) {
|
|
res.data['records']?.forEach(item => {
|
|
item.time = uni.$u.timeFrom(Date.parse(item.createTime))
|
|
item.state = false
|
|
that.storeList.push(item)
|
|
})
|
|
that.page++
|
|
}
|
|
},
|
|
|
|
async fetchVideo() {
|
|
let that = this
|
|
if (that.page === 1) {
|
|
that.videoList = []
|
|
}
|
|
const res = await getVideoList(that.page)
|
|
if (res.success) {
|
|
res.data['records']?.forEach(item => {
|
|
item.state = false
|
|
that.videoList.push(item)
|
|
})
|
|
that.page++
|
|
}
|
|
},
|
|
|
|
async addCart(item) {
|
|
const param = {
|
|
productId: item.productId,
|
|
uniqueId: item.uniqueId,
|
|
cartNum: 1
|
|
}
|
|
const res = await postCartAdd(param)
|
|
if (res.success) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
}).catch()
|
|
}
|
|
},
|
|
|
|
navToStore(id) {
|
|
uni.navigateTo({
|
|
url: '/pagesInn/inn/innHome?id=' + id
|
|
})
|
|
},
|
|
|
|
navToVideo(videoId) {
|
|
if (this.isManage) return
|
|
uni.navigateTo({
|
|
url: '/pkg-video/views/watch?videoId=' + videoId
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.my-tabs {
|
|
width: 686rpx;
|
|
height: 72rpx;
|
|
margin: 24rpx 32rpx 0;
|
|
border-radius: 40rpx;
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
.tab-item {
|
|
position: relative;
|
|
width: 230rpx;
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.active {
|
|
border-radius: 40rpx;
|
|
background: #C41617;
|
|
color: #FFFFFF;
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.has-vertical:after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
width: 2rpx;
|
|
height: 36rpx;
|
|
background: #999999;
|
|
}
|
|
}
|
|
|
|
.manage {
|
|
margin: 12rpx 32rpx 18rpx;
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.scroll-box {
|
|
height: calc(100vh - 168rpx);
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.manage-state {
|
|
height: calc(100vh - 268rpx);
|
|
}
|
|
|
|
.item-commodity {
|
|
padding: 24rpx 30rpx;
|
|
|
|
.cover {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
margin-right: 8rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.more-t {
|
|
color: #333333;
|
|
font-size: 34rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.sub {
|
|
margin-top: 10rpx;
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.price {
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.cart {
|
|
width: 84rpx;
|
|
height: 56rpx;
|
|
margin-top: 14rpx;
|
|
background: #C41617;
|
|
border-radius: 28rpx;
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-store {
|
|
padding: 34rpx 32rpx 34rpx 30rpx;
|
|
|
|
.cover {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-right: 10rpx;
|
|
border: 4rpx solid #E92727;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.one-t {
|
|
width: 360rpx;
|
|
color: #333333;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.sub {
|
|
margin-top: 8rpx;
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.btn-nav {
|
|
width: 172rpx;
|
|
height: 56rpx;
|
|
border: 2px solid #E92727;
|
|
border-radius: 28rpx;
|
|
color: #E92727;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.img-product {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
margin-right: 10rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.item-video {
|
|
position: relative;
|
|
width: 218rpx;
|
|
height: 320rpx;
|
|
margin-right: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
|
|
.video-check {
|
|
position: absolute;
|
|
left: 20rpx;
|
|
top: 20rpx;
|
|
}
|
|
|
|
.img-cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.item-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 218rpx;
|
|
height: 96rpx;
|
|
box-sizing: border-box;
|
|
padding: 8rpx;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
|
|
.icon-heart {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-video:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.fixed-manage {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
height: 100rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
|
|
|
|
.btn {
|
|
width: 196rpx;
|
|
height: 100rpx;
|
|
color: #FFFFFF;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
</style> |