743 lines
17 KiB
Vue
743 lines
17 KiB
Vue
<template>
|
|
<view class="cashier-page">
|
|
<view class="header" :style="{paddingTop:statusBarHeight}">
|
|
<view class="header-title">蜜丫妈妈</view>
|
|
<view class="header-search">
|
|
<image src="@/static/index/ss.png" mode="" class="header-img"></image>
|
|
<input type="text" class="header-input" v-model="search" placeholder="搜索" @input="searchBox">
|
|
</view>
|
|
<view class="header-name">盲盒</view>
|
|
</view>
|
|
<view class="life-blindbox-page" :style="{paddingTop:statusBarHeight}">
|
|
<view class="notice-main" @click="goNotice" >
|
|
<view class="notice">
|
|
<image src="@/static/index/gg.png" class="notice-img" mode=""></image>
|
|
<view class="notice-txt">{{notice.summary ? notice.summary : '暂无公告'}}</view>
|
|
</view>
|
|
</view>
|
|
<swiper class="activity-swiper" autoplay :indicator-dots="true" previous-margin="77rpx" next-margin='77rpx'
|
|
indicator-active-color="#fff" indicator-color="#77797e" circular v-if="bannerTopList.length > 0">
|
|
<swiper-item v-for="(item,index) in bannerTopList" :key="index" class="swiper-item" @click="rollingLink(item)">
|
|
<view class="swiper-img" :style="{'backgroundImage':`url(${item.coverResource.url})`}"></view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- <view style="word-break: break-all;">参数：{{JSON.stringify(loginParams)}}</view> -->
|
|
<scroll-view class="scroll-view" scroll-x="true" scroll-with-animation
|
|
:class="{'scroll-top':scrollTop > 200}">
|
|
<view class="scroll-item" v-for="(item,index) in categoriesList" :key="index"
|
|
@click="categoriesCk(item,index)">
|
|
<view class="scroll-title" :class="{'title-active':categoriesIndex === index}">
|
|
{{item.name}}
|
|
<image src="@/static/index/dj.png" mode="" class="scroll-active" v-if="categoriesIndex === index"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="list-main">
|
|
<view class="list" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
|
|
<image :src="item.coverResource.url" mode="" class="list-img"></image>
|
|
<view class="info-title">{{item.name}}</view>
|
|
|
|
<view class="list-info">
|
|
<view class="price">
|
|
<text class="price-sym">¥</text>
|
|
<text>{{item.price[0].sale}}</text>
|
|
</view>
|
|
<view class="info-price">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="list.length === 0" style="padding-top: 200rpx;">
|
|
<empty></empty>
|
|
</view>
|
|
<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
|
|
</view>
|
|
<!-- 弹框 -->
|
|
<view class="dlg" v-if="adVisible && adStoreVisible == 'frist'" @click="close">
|
|
<view class="dlg-main">
|
|
<swiper class="dlg-swiper" autoplay :indicator-dots="true" circular previous-margin="120rpx" next-margin='120rpx'>
|
|
<swiper-item v-for="(item,index) in popupList" :key="index" class="dlg-swiper-item" @click.stop="rollingLink(item)">
|
|
<view class="dlg-swiper-img" :style="{'backgroundImage':`url(${item.coverResource.url})`}"></view>
|
|
<!-- <image :src="item.coverResource.url" mode="aspectFill" ></image> -->
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
<!-- <image src="../../static/order/close.png" mode="" class="close-img"></image> -->
|
|
<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="close"></image>
|
|
</view>
|
|
</view>
|
|
<FloatWindowCom></FloatWindowCom>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/index/index"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
|
import {
|
|
boxesPinnedApi,
|
|
boxesTagsApi,
|
|
boxesApi
|
|
} from '@/API/index.js'
|
|
import FloatWindowCom from '@/pages/components/floatWindow.vue'
|
|
import { noticeTopApi,popupAdApi } from '@/API/user.js'
|
|
import { loginXc } from '@/API/login.js'
|
|
import md5 from 'crypto-js/md5';
|
|
import Hex from 'crypto-js/enc-hex';
|
|
|
|
export default {
|
|
mixins: [myMixins],
|
|
data() {
|
|
return {
|
|
statusBarHeight,
|
|
scrollTop: 0,
|
|
list: [],
|
|
formData: {
|
|
page: 1,
|
|
size: 10,
|
|
tagId: ""
|
|
},
|
|
bannerTopList: [], //顶部盲盒轮播
|
|
categoriesList: [{
|
|
name: '首页',
|
|
id: '',
|
|
seq: ''
|
|
}], //分类
|
|
categoriesIndex: 0, //分类选中
|
|
total:0,
|
|
search:'',
|
|
timer:null,
|
|
notice:{
|
|
summary:''
|
|
},
|
|
popupList:[],
|
|
adVisible:false,
|
|
adStoreVisible:'frist',//是否第一次进入
|
|
|
|
// 小川登录url带过来的参数
|
|
loginParams:{
|
|
appid:'',
|
|
user_id:'',
|
|
time:'',
|
|
nickname:'',
|
|
headimgurl:'',
|
|
thirdToken:'',
|
|
device:'',
|
|
sign:'',
|
|
gotoPath:''
|
|
},
|
|
appid:"",
|
|
userid:"",
|
|
time:"",
|
|
gotoPath:"",
|
|
|
|
|
|
}
|
|
},
|
|
components:{FloatWindowCom},
|
|
onReachBottom() {
|
|
if(this.total == this.list.length){
|
|
return
|
|
}
|
|
this.formData.page += 1
|
|
if(this.categoriesIndex === 0){
|
|
// this.getBoxesPinned()
|
|
}else{
|
|
this.getBoxes()
|
|
}
|
|
},
|
|
onPageScroll(res) {
|
|
this.scrollTop = res.scrollTop
|
|
},
|
|
onLoad(option) {
|
|
this.loginParams = option
|
|
// url里有appid和userid的时候需要登录
|
|
if(option.sign){
|
|
this.login(option)
|
|
}else if(!option.sign && option.appid && option.userid){
|
|
|
|
this.loginParams.userid = option.userid
|
|
// 获取当前时间的秒级时间戳
|
|
const currentTimeInSeconds = Math.floor(Date.now() / 1000);
|
|
console.log(currentTimeInSeconds);
|
|
this.appid = option.appid
|
|
this.userid = option.userid
|
|
this.gotoPath = option.gotoPath ? option.gotoPath : ""
|
|
this.time = currentTimeInSeconds
|
|
let md5Str = ''
|
|
if(this.gotoPath){
|
|
md5Str = `appid=${this.appid}&gotoPath=${this.gotoPath}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
|
|
}else{
|
|
md5Str = `appid=${this.appid}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
|
|
}
|
|
// md5加密
|
|
let sign = this.generate16BitMD5(md5Str)
|
|
this.loginParams.sign = sign
|
|
this.loginParams.time = this.time
|
|
this.login(this.loginParams)
|
|
}else{
|
|
try{
|
|
this.adStoreVisible = uni.getStorageSync('ad') ? uni.getStorageSync('ad') : 'frist'
|
|
}catch(e){
|
|
//TODO handle the exception
|
|
this.adStoreVisible = 'frist'
|
|
}
|
|
this.getBoxesTags()
|
|
this.getNoticeTop()
|
|
this.getPopupAd('HOMEPAGE_CAROUSEL')
|
|
this.getPopupAd('HOMEPAGE_POPUP')
|
|
if(this.categoriesIndex === 0){
|
|
this.getBoxesPinned()
|
|
}else{
|
|
this.getBoxes()
|
|
}
|
|
}
|
|
// console.log(this.generate16BitMD5('appid=1773995642561630208&time=1711792318&userid=hkjkk&key=1773995642561630208'))
|
|
},
|
|
methods: {
|
|
login(data){
|
|
loginXc(data).then(res => {
|
|
if(res.code === 200){
|
|
try{
|
|
this.adStoreVisible = uni.getStorageSync('ad') ? uni.getStorageSync('ad') : 'frist'
|
|
}catch(e){
|
|
//TODO handle the exception
|
|
this.adStoreVisible = 'frist'
|
|
}
|
|
this.getBoxesTags()
|
|
this.getNoticeTop()
|
|
this.getPopupAd('HOMEPAGE_CAROUSEL')
|
|
this.getPopupAd('HOMEPAGE_POPUP')
|
|
if(this.categoriesIndex === 0){
|
|
this.getBoxesPinned()
|
|
}else{
|
|
this.getBoxes()
|
|
}
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
close(){
|
|
uni.setStorageSync('ad','behind')
|
|
this.adVisible = false
|
|
},
|
|
generate16BitMD5(data) {
|
|
let md5Digest = md5(data).toString(Hex);
|
|
return md5Digest.substring(8, 24); // 截取前16位
|
|
},
|
|
// 获取广告弹窗/轮播
|
|
getPopupAd(type){
|
|
// HOMEPAGE_CAROUSEL 轮播
|
|
// HOMEPAGE_POPUP 弹窗
|
|
popupAdApi({type}).then(res => {
|
|
if(res.code === 200){
|
|
if(type === 'HOMEPAGE_CAROUSEL'){
|
|
this.bannerTopList = res.data
|
|
}
|
|
if(type === 'HOMEPAGE_POPUP'){
|
|
this.popupList = res.data
|
|
if(this.popupList.length > 0){
|
|
this.adVisible = true
|
|
}
|
|
}
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
// 获取置顶公告
|
|
getNoticeTop(){
|
|
noticeTopApi().then(res => {
|
|
if(res.code === 200){
|
|
if(res.data){
|
|
this.notice = res.data
|
|
}
|
|
|
|
}else{
|
|
this.$api.message(res.message)
|
|
}
|
|
})
|
|
},
|
|
goNotice(){
|
|
if(!this.notice.summary){
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url:`/pages/mine/noticeDetail?id=${this.notice.id}`
|
|
})
|
|
},
|
|
// 搜索盲盒
|
|
searchBox(){
|
|
if (this.timer) {
|
|
clearTimeout(this.timer);
|
|
}
|
|
// 设置新的定时器
|
|
this.timer = setTimeout(() => {
|
|
this.handleSearch();
|
|
}, 500); // 延迟500毫秒执行搜索操作
|
|
},
|
|
handleSearch(){
|
|
// if()
|
|
if(this.categoriesIndex === 0){
|
|
this.getBoxesPinned()
|
|
}else{
|
|
this.getBoxes()
|
|
}
|
|
},
|
|
// 获取首页盲盒
|
|
getBoxesPinned() {
|
|
let data = {
|
|
name:this.search
|
|
}
|
|
boxesPinnedApi(data).then(res => {
|
|
if (res.code === 200) {
|
|
this.list = res.data
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
// 获取盲盒标签
|
|
getBoxesTags() {
|
|
boxesTagsApi().then(res => {
|
|
if (res.code === 200) {
|
|
res.data.forEach(item => {
|
|
this.categoriesList.push(item)
|
|
})
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
// 获取盲盒分页
|
|
getBoxes() {
|
|
if(this.search){
|
|
this.formData['name'] = this.search
|
|
}
|
|
|
|
boxesApi(this.formData).then(res => {
|
|
if (res.code === 200) {
|
|
this.total = res.data.total
|
|
if (this.formData.page > 1) {
|
|
this.list = [...this.list, ...res.data.content]
|
|
} else {
|
|
this.list = res.data.content
|
|
}
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
rollingLink(item) {
|
|
|
|
if (item.link) {
|
|
if (item.link.type === 'INSIDE') {
|
|
uni.navigateTo({
|
|
url: `${item.link.url}`
|
|
})
|
|
} else {
|
|
window.open(item.link.url)
|
|
// uni.navigateTo({
|
|
// url: `/pages/webView/index?url=${item.link}`
|
|
// })
|
|
}
|
|
|
|
}
|
|
},
|
|
categoriesCk(item, index) {
|
|
this.categoriesIndex = index;
|
|
this.formData = {
|
|
page: 1,
|
|
size: 10,
|
|
tagId: item.id
|
|
}
|
|
this.search = ""
|
|
this.list = []
|
|
if(this.categoriesIndex === 0){
|
|
this.getBoxesPinned()
|
|
}else{
|
|
this.getBoxes()
|
|
}
|
|
},
|
|
|
|
goDetail(item) {
|
|
// 跳转详情
|
|
uni.navigateTo({
|
|
url: `/pages/index/detail?id=${item.id}`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-image: url('@/static/index/bg.png');
|
|
background-size: 100%;
|
|
}
|
|
|
|
.header {
|
|
position: fixed;
|
|
z-index: 10;
|
|
width: 100%;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #F9F6F7;
|
|
padding-bottom: 10rpx;
|
|
|
|
.header-title {
|
|
font-weight: 400;
|
|
font-size: 50rpx;
|
|
color: #000000;
|
|
font-family: YouSheBiaoTiHei;
|
|
margin-left: 28rpx;
|
|
}
|
|
|
|
.header-search {
|
|
margin-left: 45rpx;
|
|
position: relative;
|
|
width: 334rpx;
|
|
height: 65rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 33rpx;
|
|
|
|
.header-img {
|
|
position: absolute;
|
|
top: 18rpx;
|
|
left: 22rpx;
|
|
width: 29rpx;
|
|
height: 29rpx;
|
|
}
|
|
|
|
.header-input {
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
width: 334rpx;
|
|
height: 65rpx;
|
|
padding-left: 60rpx;
|
|
padding-right: 10rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.header-name {
|
|
margin-left: 45rpx;
|
|
font-weight: bold;
|
|
font-size: 33rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.life-blindbox-page {
|
|
.notice-main {
|
|
padding-top: 90rpx;
|
|
|
|
.notice {
|
|
background-color: #fff;
|
|
margin-left: 22rpx;
|
|
width: 706rpx;
|
|
height: 67rpx;
|
|
border-radius: 34rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 17rpx 26rpx;
|
|
|
|
.notice-img {
|
|
width: 33rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.notice-txt {
|
|
width: 600rpx;
|
|
margin-left: 9rpx;
|
|
font-size: 24rpx;
|
|
color: #888888;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.page-bg {
|
|
position: fixed;
|
|
z-index: -1;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 320rpx;
|
|
}
|
|
|
|
.activity-swiper {
|
|
width: 100%;
|
|
height: 266rpx;
|
|
overflow: hidden;
|
|
margin-top: 14rpx;
|
|
|
|
.swiper-item {
|
|
width: 556rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.swiper-img {
|
|
width: 556rpx;
|
|
height: 266rpx;
|
|
display: block;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-position: 50%;
|
|
transform: scale(1);
|
|
transition: transform 0.3s ease-in-out 0s;
|
|
border-radius: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.empty-img {
|
|
display: block;
|
|
margin: 50rpx auto;
|
|
width: 508rpx;
|
|
height: 482rpx;
|
|
}
|
|
|
|
|
|
.scroll-view {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
padding-top: 43rpx;
|
|
z-index: 10;
|
|
|
|
.scroll-item {
|
|
|
|
display: inline-block;
|
|
text-align: center;
|
|
margin-left: 53rpx;
|
|
|
|
.scroll-bg {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.scroll-title {
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #6D6D6D;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.scroll-active {
|
|
width: 42rpx;
|
|
height: 18rpx;
|
|
margin-top: 13rpx;
|
|
// border: 1px solid red;
|
|
}
|
|
}
|
|
|
|
.title-active {
|
|
font-weight: bold;
|
|
font-size: 38rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-top {
|
|
position: fixed;
|
|
top: 100rpx;
|
|
left: 0;
|
|
background-color: #F9F6F7;
|
|
}
|
|
.no-data{
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
padding: 10rpx 0 30rpx 0;
|
|
}
|
|
.list-main {
|
|
display: grid;
|
|
gap: 12rpx;
|
|
grid-template-rows: 1fr;
|
|
margin: 0px auto;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
padding: 35rpx 22rpx;
|
|
background: linear-gradient(181deg, #FFEAEE 0%, rgba(247, 207, 215, 0) 100%);
|
|
border: 2rpx solid #FFFFFF;
|
|
border-bottom: none;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
margin-top: -5.7rpx;
|
|
|
|
|
|
.list {
|
|
width: 347rpx;
|
|
height: 380rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 10rpx;
|
|
|
|
.list-img {
|
|
width: 327rpx;
|
|
height: 272rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
.info-title {
|
|
padding: 0 10rpx;
|
|
margin-top: 15rpx;
|
|
font-size: 22rpx;
|
|
color: #333333;
|
|
width: 320rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
|
|
.list-info {
|
|
width: 320rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 10rpx;
|
|
// margin-top: 22rpx;
|
|
|
|
.info-sub {
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
// width: 398rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.price {
|
|
font-size: 28rpx;
|
|
font-family: YouSheBiaoTiHei;
|
|
color: #FB2851;
|
|
|
|
.price-sym {}
|
|
}
|
|
|
|
.info-price {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.price {
|
|
color: #FF2F54;
|
|
font-size: 32rpx;
|
|
|
|
.price-sym {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.sold {
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.minimum {
|
|
width: 322rpx;
|
|
height: 46rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/box/bg2.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
// margin-top: 16rpx;
|
|
.minimum-img {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
.minimum-txt {
|
|
margin-left: 16rpx;
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
font-family: YouSheBiaoTiHei;
|
|
}
|
|
|
|
.minimum-price {
|
|
margin-left: 40rpx;
|
|
color: #ED9E37;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.tag {
|
|
// margin-top: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.tag-item {
|
|
margin-right: 12rpx;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border: 1px solid #E9E9E9;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.dlg{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: rgba(0,0,0,0.5);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.dlg-main{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.dlg-swiper{
|
|
// width: 402rpx;
|
|
width: 750rpx;
|
|
height: 580rpx;
|
|
border-radius: 20rpx;
|
|
.dlg-swiper-item{
|
|
width: 468rpx;
|
|
height: 580rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.dlg-swiper-img{
|
|
width: 468rpx;
|
|
height: 580rpx;
|
|
border-radius: 20rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-position: center;
|
|
transform: scale(1);
|
|
transition: transform 0.3s ease-in-out 0s;
|
|
}
|
|
}
|
|
|
|
}
|
|
.dlg-close-img{
|
|
margin-top: 23rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
z-index: 9999;
|
|
}
|
|
}
|
|
}
|
|
</style> |