|
@@ -1,66 +1,80 @@
|
|
<template>
|
|
<template>
|
|
<view class="content">
|
|
<view class="content">
|
|
<swiper class="swiper-box" :current="current" autoplay circular>
|
|
<swiper class="swiper-box" :current="current" autoplay circular>
|
|
- <swiper-item v-for="(item, index) in info" :key="index">
|
|
|
|
- <view :class="item.colorClass" class="swiper-item">
|
|
|
|
- <image class="image" :src="item.url" mode="aspectFill" :draggable="false" @click="onBanner(index)" />
|
|
|
|
- </view>
|
|
|
|
|
|
+ <swiper-item v-for="(item,index) in info" :key='index'>
|
|
|
|
+ <image @click="bannerClickType(item)" class="image" :src="item.fileUrl" mode="aspectFill" :draggable="false" />
|
|
</swiper-item>
|
|
</swiper-item>
|
|
|
|
+ <!-- <swiper-item>
|
|
|
|
+ <image class="image" src="http://image.jppt.com.cn/zzjs/2021-04-12/others/1618190251643.jpg" mode="aspectFill"
|
|
|
|
+ :draggable="false" @click="goPage('/pages/dianying/dianying')" />
|
|
|
|
+ </swiper-item> -->
|
|
</swiper>
|
|
</swiper>
|
|
|
|
|
|
<view class="back">
|
|
<view class="back">
|
|
<view class="sticky">
|
|
<view class="sticky">
|
|
- <van-search class='top-search' shape="round" background="#fff" placeholder="请输入搜索关键词" />
|
|
|
|
|
|
+ <van-search class='top-search' shape="round" background="#fff" placeholder="请输入搜索关键词" @search="onSearch" @change='onSearchChange' />
|
|
<view class="grid">
|
|
<view class="grid">
|
|
<view class="grid-item" :class="{border:listType==0}" @click="listType=0">
|
|
<view class="grid-item" :class="{border:listType==0}" @click="listType=0">
|
|
- <van-icon name="/static/imgs/精选.png" size="30px" />
|
|
|
|
|
|
+ <van-icon name="/static/imgs/jx.png" size="30px" />
|
|
<text class="text">精选</text>
|
|
<text class="text">精选</text>
|
|
</view>
|
|
</view>
|
|
<view class="grid-item" :class="{border:listType==item.id}" @click="listType=item.id" v-for="(item,index) in typeList"
|
|
<view class="grid-item" :class="{border:listType==item.id}" @click="listType=item.id" v-for="(item,index) in typeList"
|
|
:key='index'>
|
|
:key='index'>
|
|
- <van-icon :name="item.fileUrl || '/static/imgs/买车.png'" size="30px" />
|
|
|
|
|
|
+ <van-icon :name="item.fileUrl || '/static/imgs/wxtb.png'" size="30px" />
|
|
<text class="text">{{item.productName}}</text>
|
|
<text class="text">{{item.productName}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="grid-item" :class="{border:listType==5}" @click="moreShow=!moreShow,typeMore()">
|
|
<view class="grid-item" :class="{border:listType==5}" @click="moreShow=!moreShow,typeMore()">
|
|
- <van-icon name="/static/imgs/出行.png" size="30px" />
|
|
|
|
|
|
+ <van-icon v-if='moreShow' name="/static/imgs/sq.png" size="30px" />
|
|
|
|
+ <van-icon v-else name="/static/imgs/gd.png" size="30px" />
|
|
<text class="text">{{moreShow?'收起':'更多'}}</text>
|
|
<text class="text">{{moreShow?'收起':'更多'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<loadSke :loading='loading' :list='applist'>
|
|
<loadSke :loading='loading' :list='applist'>
|
|
- <view class='list-item' v-for="(item, index) in applist" :key="index" @click="goMiniApp(item)">
|
|
|
|
- <image class="avatar" mode="aspectFill" :src="item.appletLogoFileUrl || '/static/imgs/酒店.png'">
|
|
|
|
- <view class="item-right">
|
|
|
|
- <view class="top">
|
|
|
|
- <van-icon class="icon" v-if="item.collectionStatus=='0'" @tap.stop='addSc(index)' name="/static/imgs/收藏.png"
|
|
|
|
- size='15' />
|
|
|
|
- <van-icon class="icon" v-else name="/static/imgs/已收藏.png" @tap.stop='delSc(index)' size='15' />
|
|
|
|
- <van-icon class="icon" name="/static/imgs/转发.png" @tap.stop='showShare=true' size='14' />
|
|
|
|
- <!-- <van-icon class="icon" name="/static/imgs/不喜欢.png" size='12' /> -->
|
|
|
|
- </view>
|
|
|
|
- <view class="center">
|
|
|
|
- <text class="details">{{item.appletIntroduce || '该商家暂无描述,敬请期待!'}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="bottom">
|
|
|
|
- <text class="title">{{item.corporateName}}</text>
|
|
|
|
- <view class="right" v-if="false">
|
|
|
|
- <view class="flex">
|
|
|
|
- <van-icon class="icon" name="/static/imgs/评论.png" size='15' />
|
|
|
|
- <text>54</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="flex">
|
|
|
|
- <van-icon class="icon" name="/static/imgs/好评率.png" size='15' />
|
|
|
|
- <text>99%</text>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class='list-item' v-for="(item, index) in applist" :key="index" @click="bannerClickType(item)">
|
|
|
|
+ <image class="avatar" mode="aspectFit" :src="item.appletLogoFileUrl || '/static/imgs/shmr.png'" />
|
|
|
|
+ <view class="top">
|
|
|
|
+ <van-icon class="icon" v-if="item.collectionStatus=='0'" @tap.stop='addSc(index)' name="star-o" color='#999999'/>
|
|
|
|
+ <van-icon class="icon" v-else @tap.stop='delSc(index)' name="star" color='#dfdf00'/>
|
|
|
|
+ <!-- <van-icon class="icon" name="/static/imgs/zf.png" @tap.stop='showShare=true' size='14' /> -->
|
|
|
|
+ <!-- <van-icon class="icon" name="/static/imgs/bxh.png" size='12' /> -->
|
|
|
|
+ <van-icon class="icon" name="ellipsis" size='20' color='#999999' @tap.stop='showShare=true' />
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-right">
|
|
|
|
+ <view class="bottom">
|
|
|
|
+ <text class="title">{{item.corporateName}}</text>
|
|
|
|
+ <text class="type">{{itemType(item)}}</text>
|
|
|
|
+ <view class="right" v-if="false">
|
|
|
|
+ <view class="flex">
|
|
|
|
+ <van-icon class="icon" name="/static/imgs/评论.png" size='15' />
|
|
|
|
+ <text>54</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="flex">
|
|
|
|
+ <van-icon class="icon" name="/static/imgs/好评率.png" size='15' />
|
|
|
|
+ <text>99%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="center" v-if="item.appletIntroduce">
|
|
|
|
+ <text class="details">{{item.appletIntroduce || `Appid: ${item.appletAddress}`}}</text>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="ad-box list-item">
|
|
|
|
+ <ad unit-id="adunit-d8c1548cc9663765"></ad>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="ad-box list-item">
|
|
|
|
+ <ad unit-id="adunit-0941cf7df3a1ca2f" ad-type="grid" grid-opacity="0.8" grid-count="5" ad-theme="white"></ad>
|
|
</view>
|
|
</view>
|
|
</loadSke>
|
|
</loadSke>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
|
|
<van-share-sheet :show="showShare" :options="options" @select="onSelect" @close='shareClose' />
|
|
<van-share-sheet :show="showShare" :options="options" @select="onSelect" @close='shareClose' />
|
|
</view>
|
|
</view>
|
|
@@ -77,7 +91,8 @@
|
|
getTypeAppList,
|
|
getTypeAppList,
|
|
addFavorites,
|
|
addFavorites,
|
|
delFavorites,
|
|
delFavorites,
|
|
- BrowseRecordAdd
|
|
|
|
|
|
+ BrowseRecordAdd,
|
|
|
|
+ getCarouselChartList
|
|
} from '@/api/applist.js'
|
|
} from '@/api/applist.js'
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
@@ -89,21 +104,14 @@
|
|
active: 0,
|
|
active: 0,
|
|
tabActive: 0,
|
|
tabActive: 0,
|
|
info: [{
|
|
info: [{
|
|
- colorClass: 'uni-bg-red',
|
|
|
|
- url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
|
|
|
|
- content: '内容 A'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- colorClass: 'uni-bg-green',
|
|
|
|
- url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
|
|
|
|
- content: '内容 B'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- colorClass: 'uni-bg-blue',
|
|
|
|
- url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
|
|
|
|
- content: '内容 C'
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
|
|
+ "id": 12,
|
|
|
|
+ "pictureName": "山泉心品",
|
|
|
|
+ "fileId": "77",
|
|
|
|
+ "fileUrl": "http://image.jppt.com.cn/zzjs/2021-04-09/others/1617954376809.jpg",
|
|
|
|
+ "jumpUrl": "{\"appId\":\"wxb47185e82704dda8\"}",
|
|
|
|
+ "jumpUrlType": "goMiniApp",
|
|
|
|
+ "status": 0
|
|
|
|
+ }],
|
|
current: 0,
|
|
current: 0,
|
|
mode: 'round',
|
|
mode: 'round',
|
|
applist: [],
|
|
applist: [],
|
|
@@ -118,7 +126,9 @@
|
|
openType: 'share'
|
|
openType: 'share'
|
|
}],
|
|
}],
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
- pageSize: 10
|
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ total: 1,
|
|
|
|
+ customerName: ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -126,6 +136,7 @@
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
listType(val) {
|
|
listType(val) {
|
|
|
|
+ this.customerName = ''
|
|
this.pageNum = 1
|
|
this.pageNum = 1
|
|
this.loading = true
|
|
this.loading = true
|
|
getTypeAppList(val, {
|
|
getTypeAppList(val, {
|
|
@@ -133,6 +144,7 @@
|
|
pageSize: this.pageSize
|
|
pageSize: this.pageSize
|
|
}).then(res => {
|
|
}).then(res => {
|
|
this.applist = res.rows
|
|
this.applist = res.rows
|
|
|
|
+ this.total = res.total
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.loading = false
|
|
this.loading = false
|
|
})
|
|
})
|
|
@@ -140,7 +152,50 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ bannerClickType(item) {
|
|
|
|
+ if (item.jumpUrlType == 'goMiniApp') {
|
|
|
|
+ this.goMiniApp(JSON.parse(item.jumpUrl))
|
|
|
|
+ }
|
|
|
|
+ if (item.jumpUrlType == 'goPage') {
|
|
|
|
+ this.goPage(item.jumpUrl)
|
|
|
|
+ }
|
|
|
|
+ if (item.jumpUrlType == 'goWebView') {
|
|
|
|
+ this.goPage(`/pages/webview/webview?src=${item.jumpUrl}`)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ itemType(item) {
|
|
|
|
+ if (item.jumpUrlType == 'goMiniApp') {
|
|
|
|
+ return '小程序'
|
|
|
|
+ }
|
|
|
|
+ if (item.jumpUrlType == 'goPage') {
|
|
|
|
+ return '子页面'
|
|
|
|
+ }
|
|
|
|
+ if (item.jumpUrlType == 'goWebView') {
|
|
|
|
+ return 'WEB'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onSearchChange(e) {
|
|
|
|
+ this.customerName = e.detail
|
|
|
|
+ },
|
|
|
|
+ onSearch(e) {
|
|
|
|
+ this.pageNum = 1
|
|
|
|
+ this.loading = true
|
|
|
|
+ getTypeAppList(this.listType, {
|
|
|
|
+ pageNum: this.pageNum,
|
|
|
|
+ pageSize: this.pageSize,
|
|
|
|
+ customerName: e.detail
|
|
|
|
+ }).then(res => {
|
|
|
|
+ this.applist = res.rows
|
|
|
|
+ this.total = res.total
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.loading = false
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
initAppList() {
|
|
initAppList() {
|
|
|
|
+ getCarouselChartList().then(res => {
|
|
|
|
+ this.info = res.rows
|
|
|
|
+ })
|
|
typeList({
|
|
typeList({
|
|
pid: 0
|
|
pid: 0
|
|
}).then(res => {
|
|
}).then(res => {
|
|
@@ -151,16 +206,21 @@
|
|
pageSize: 10
|
|
pageSize: 10
|
|
}).then(res => {
|
|
}).then(res => {
|
|
this.applist = res.rows
|
|
this.applist = res.rows
|
|
|
|
+ this.total = res.total
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.loading = false
|
|
this.loading = false
|
|
})
|
|
})
|
|
})
|
|
})
|
|
},
|
|
},
|
|
onBottom() {
|
|
onBottom() {
|
|
|
|
+ if (this.total - this.pageNum * this.pageSize <= 0) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
this.pageNum++
|
|
this.pageNum++
|
|
getTypeAppList(this.listType, {
|
|
getTypeAppList(this.listType, {
|
|
pageNum: this.pageNum,
|
|
pageNum: this.pageNum,
|
|
- pageSize: this.pageSize
|
|
|
|
|
|
+ pageSize: this.pageSize,
|
|
|
|
+ customerName: this.customerName
|
|
}).then(res => {
|
|
}).then(res => {
|
|
this.applist = this.applist.concat(res.rows)
|
|
this.applist = this.applist.concat(res.rows)
|
|
})
|
|
})
|
|
@@ -210,56 +270,36 @@
|
|
this.loading = false
|
|
this.loading = false
|
|
})
|
|
})
|
|
})
|
|
})
|
|
- },
|
|
|
|
- goMiniApp(item) {
|
|
|
|
- wx.navigateToMiniProgram({
|
|
|
|
- appId: item.appletAddress,
|
|
|
|
- success: (res) => {
|
|
|
|
- // 打开成功
|
|
|
|
- console.log('打开成功', item)
|
|
|
|
- BrowseRecordAdd(item.id)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
- .back{}
|
|
|
|
|
|
+ .ad-box {
|
|
|
|
+ margin: 40rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center !important;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
.content {
|
|
.content {
|
|
padding-bottom: 1rpx;
|
|
padding-bottom: 1rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.swiper-box {
|
|
.swiper-box {
|
|
- position: sticky;
|
|
|
|
- top: 0px;
|
|
|
|
- left: 0;
|
|
|
|
- height: 422rpx;
|
|
|
|
- z-index: 9;
|
|
|
|
- }
|
|
|
|
|
|
+ width: 100vw;
|
|
|
|
+ height: 56.25vw;
|
|
|
|
|
|
- .sticky-top {
|
|
|
|
- position: sticky;
|
|
|
|
- top: 56vw;
|
|
|
|
- left: 0;
|
|
|
|
- // margin: 30rpx 30rpx;
|
|
|
|
- // border-radius: 20rpx;
|
|
|
|
- overflow: hidden;
|
|
|
|
- background-color: #4fc08d;
|
|
|
|
- z-index: 10;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
-
|
|
|
|
- .top-search {
|
|
|
|
- flex: 1;
|
|
|
|
|
|
+ .image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.sticky {
|
|
.sticky {
|
|
position: sticky;
|
|
position: sticky;
|
|
- top: 100rpx;
|
|
|
|
|
|
+ top: 0rpx;
|
|
left: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
z-index: 9;
|
|
z-index: 9;
|
|
@@ -295,7 +335,7 @@
|
|
.border::after {
|
|
.border::after {
|
|
content: '';
|
|
content: '';
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: -5rpx;
|
|
|
|
|
|
+ bottom: 5rpx;
|
|
width: 30rpx;
|
|
width: 30rpx;
|
|
height: 5rpx;
|
|
height: 5rpx;
|
|
background-color: red;
|
|
background-color: red;
|
|
@@ -308,45 +348,53 @@
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
background-color: #FFFFFF;
|
|
background-color: #FFFFFF;
|
|
- height: 170rpx;
|
|
|
|
- padding: 34rpx 20rpx;
|
|
|
|
|
|
+ // height: 170rpx;
|
|
|
|
+ padding: 20rpx;
|
|
margin: 24rpx 30rpx;
|
|
margin: 24rpx 30rpx;
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
-
|
|
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
.avatar {
|
|
.avatar {
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
- width: 161rpx;
|
|
|
|
- height: 161rpx;
|
|
|
|
|
|
+ width: 100rpx;
|
|
|
|
+ height: 100rpx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ border: 1px solid #1989FA;
|
|
margin-right: 16rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+ .top {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 10rpx;
|
|
|
|
+ right: 0;
|
|
|
|
+
|
|
|
|
+ .icon {
|
|
|
|
+ margin-top: -20rpx;
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
.item-right {
|
|
.item-right {
|
|
flex: 1;
|
|
flex: 1;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
- height: 200rpx;
|
|
|
|
|
|
+ // height: 200rpx;
|
|
|
|
|
|
- .top {
|
|
|
|
- .icon {
|
|
|
|
- margin-top: -20rpx;
|
|
|
|
- padding: 20rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: flex-end;
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
|
|
.center {
|
|
.center {
|
|
align-self: flex-start;
|
|
align-self: flex-start;
|
|
|
|
|
|
.details {
|
|
.details {
|
|
width: 436rpx;
|
|
width: 436rpx;
|
|
- height: 70rpx;
|
|
|
|
|
|
+ // height: 70rpx;
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
- color: #0F0404;
|
|
|
|
|
|
+ color: #999999;
|
|
display: -webkit-box;
|
|
display: -webkit-box;
|
|
margin-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
@@ -361,19 +409,28 @@
|
|
|
|
|
|
.bottom {
|
|
.bottom {
|
|
display: flex;
|
|
display: flex;
|
|
- justify-content: space-between;
|
|
|
|
|
|
+ justify-content: flex-start;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+ margin: 20rpx 0;
|
|
|
|
|
|
.title {
|
|
.title {
|
|
|
|
+ max-width: 300rpx;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .type {
|
|
|
|
+ margin-left: 10rpx;
|
|
padding: 3rpx 12rpx;
|
|
padding: 3rpx 12rpx;
|
|
height: 30rpx;
|
|
height: 30rpx;
|
|
- background: #FFE6E6;
|
|
|
|
- border: 1rpx solid #E31818;
|
|
|
|
- border-radius: 2rpx;
|
|
|
|
|
|
+ border: 2rpx solid #999999;
|
|
|
|
+ border-radius: 20rpx;
|
|
font-size: 20rpx;
|
|
font-size: 20rpx;
|
|
- font-family: PingFang SC;
|
|
|
|
- font-weight: 400;
|
|
|
|
- color: #E31818;
|
|
|
|
|
|
+ color: #999999;
|
|
line-height: 20rpx;
|
|
line-height: 20rpx;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|