weapp/switchcat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加vuex保存用户的收藏信息

Browse Source
This commit is contained in:
zhl 2021-12-16 13:58:37 +08:00
parent db28ffbcf6
commit a33be949e9
9 changed files with 135 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@ -15756,7 +15756,7 @@
"dependencies": {
"vue-class-component": {
"version": "7.2.6",
"resolved": "https://registry.npmmirror.com/vue-class-component/download/vue-class-component-7.2.6.tgz",
"resolved": "https://registry.npm.taobao.org/vue-class-component/download/vue-class-component-7.2.6.tgz",
"integrity": "sha1-hHHgN7jkdi9aRkaG4Z5a/HCFAuQ="
}
}
@ -15789,6 +15789,11 @@
"resolved": "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz",
"integrity": "sha1-I2vAhqhww655lG8QfxbeWdWJXnE="
},
"vuex-module-decorators": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/vuex-module-decorators/download/vuex-module-decorators-2.0.0.tgz",
"integrity": "sha512-awfjlJR9PlX2tDNzRk5fUnksO4TC5Z93Q3ZycvROCiLId7MZ1GdY4sHpEvPqm02UZ8jF+BkuyN5ezghOAk3zeQ=="
},
"w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/w3c-hr-time/download/w3c-hr-time-1.0.2.tgz",

3
package.json
View File

@ -68,7 +68,8 @@
"vue": "^2.6.11",
"vue-class-component": "^6.3.2",
"vue-property-decorator": "^8.5.1",
"vuex": "^3.2.0"
"vuex": "^3.2.0",
"vuex-module-decorators": "^2.0.0"
},
"devDependencies": {
"@babel/plugin-syntax-typescript": "^7.2.0",

10
src/api/game.ts
View File

@ -43,7 +43,7 @@ export const getZanList = (games: string[]) => {
reject && reject(data.errmsg)
return
}
resolve && resolve(data.record);
resolve && resolve(data.data);
},
fail: (err) => {
reject && reject(err)
@ -64,7 +64,7 @@ export const updateZanInfo = (game: string, act: number) => {
reject && reject(data.errmsg)
return
}
resolve && resolve(data.record);
resolve && resolve(data.data);
},
fail: (err) => {
reject && reject(err)
@ -74,7 +74,7 @@ export const updateZanInfo = (game: string, act: number) => {
}
/**获取收藏列表*/
export const getCollectList = (games: string[]) => {
export const getCollectList = () => {
return new Promise((resolve, reject) => {
uni.request({
url: `${GHOST_BASE}/svr/collect/list`,
@ -86,7 +86,7 @@ export const getCollectList = (games: string[]) => {
reject && reject(data.errmsg)
return
}
resolve && resolve(data.record);
resolve && resolve(data.data);
},
fail: (err) => {
reject && reject(err)
@ -107,7 +107,7 @@ export const updateCollectInfo = (game: string, act: number) => {
reject && reject(data.errmsg)
return
}
resolve && resolve(data.record);
resolve && resolve(data.data);
},
fail: (err) => {
reject && reject(err)

4
src/api/request.ts
View File

@ -22,9 +22,9 @@ uni.addInterceptor('request', {
success(args) {
},
fail(err) {
console.log('interceptor-fail',err)
// console.log('interceptor-fail',err)
},
complete(res) {
console.log('interceptor-complete',res)
// console.log('interceptor-complete',res)
}
})

22
src/components/BigImgCell/index.vue
View File

@ -15,7 +15,7 @@
</template>
<view v-if="gData.tags.length > 0" class="tag-row" @click="onClick(gData.gameId)">
<view class="demo-uni-col dark tag-list">
<uni-tag v-for="tag in gData.tags" :text="tag.name" class="game-tag" :inverted="!tag.fill" :type="tag.type"></uni-tag>
<uni-tag v-for="tag in gData.tags" :text="tag.name" :key="tag.name" class="game-tag" :inverted="!tag.fill" :type="tag.type"></uni-tag>
</view>
</view>
<view class="demo-uni-row price-row" @click="onClick(gData.gameId)">
@ -34,18 +34,20 @@
<text class="card-actions-item-text">分享</text>
</button>
<view class="card-actions-item" @click="zanClick">
<uni-icons type="hand-up" size="18" color="#999"></uni-icons>
<uni-icons v-if="!zan" type="hand-up" size="18" color="#999"></uni-icons>
<uni-icons v-if="zan" type="hand-up-filled" size="18" color="#18bc37"></uni-icons>
<text class="card-actions-item-text">点赞</text>
</view>
<view class="card-actions-item" @click="collectClick">
<uni-icons type="heart" size="18" color="#999"></uni-icons>
<uni-icons v-if="!collect" type="heart" size="18" color="#999"></uni-icons>
<uni-icons v-if="collect" type="heart-filled" size="18" color="#18bc37"></uni-icons>
<text class="card-actions-item-text">收藏</text>
</view>
</view>
</uni-card>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Component, Vue, Watch } from 'vue-property-decorator'
import { IGameInfo } from '@/modules/gameinfo'
declare module 'vue/types/vue' {
@ -59,6 +61,8 @@ declare module 'vue/types/vue' {
props: ['gData'],
})
export default class extends Vue{
private collect = false
private zan = false
zanClick() {
this.$emit('zanClicked', this.gData)
}
@ -69,6 +73,16 @@ export default class extends Vue{
console.log('on click: ', s)
this.$emit("cellClicked", s)
}
@Watch('gData.collect')
private collectStatChange() {
this.collect = !!this.gData?.collect
console.log('collect stat change: ', this.collect)
}
@Watch('gData.zan')
private zanStatChange() {
this.zan = !!this.gData?.zan
}
}
</script>
<style>

49
src/pages/index/index.vue
View File

@ -4,7 +4,7 @@
<!-- 这里是状态栏 -->
</view>
<uni-list>
<uni-list-item v-for="item in games" >
<uni-list-item v-for="item in games" :key="item.gameId">
<big-img-cell
:g-data="item"
@cellClicked = 'onClick'
@ -21,8 +21,9 @@
import { Component, Vue } from 'vue-property-decorator'
import BigImgCell from '@/components/BigImgCell/index.vue'
import { IGameInfo } from '@/modules/gameinfo'
import { getZanList, updateCollectInfo, updateZanInfo } from '@/api/game'
import { getCollectList, getZanList, updateCollectInfo, updateZanInfo } from '@/api/game'
import { searchGames } from '@/api/game_data'
import { UserModule } from '@/store/modules/user'
@Component({
name: 'Index',
@ -36,11 +37,13 @@ export default class extends Vue{
private games: IGameInfo[] = []
private more = 'more'
private moreCfg = {contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
private zanData: any = {}
$onLaunched: any
async onLoad() {
await this.$onLaunched;
await this.fetchGames()
await this.fetchCollectInfo()
}
onShareAppMessage(res: any) {
if (res.from === 'button') {// 来自页面内分享按钮
@ -75,7 +78,10 @@ export default class extends Vue{
const act = data.zan ? 0 : 1
try {
const res = await updateZanInfo(data.gameId, act)
console.log(res)
let index = this.games.findIndex(o => o.gameId === data.gameId)
this.games[index].zan = !this.games[index].zan
Vue.set(this.games, index, this.games[index]);
console.log('update zan stat success: ', this.games[index].zan)
} catch (err) {
console.log(err)
}
@ -85,14 +91,35 @@ export default class extends Vue{
const act = data.collect ? 0 : 1
try {
const res = await updateCollectInfo(data.gameId, act)
console.log(res)
let index = this.games.findIndex(o => o.gameId === data.gameId)
this.games[index].collect = !this.games[index].collect
Vue.set(this.games, index, this.games[index]);
// this.$forceUpdate()
if (this.games[index].collect) {
UserModule.add_collect(data.gameId)
} else {
UserModule.remove_collect(data.gameId)
}
console.log('update collect stat success: ', this.games[index].collect)
} catch (err) {
console.log(err)
}
}
private async fetchZanInfo() {
await getZanList(['6500'])
private async fetchCollectInfo() {
const datas: any = await getCollectList()
UserModule.update_collect(datas)
for (let game of this.games) {
game.collect = UserModule.collectSet.has(game.gameId)
}
// console.log(datas)
}
private async fetchZanInfo(games: string[]) {
let data = await getZanList(games)
Object.assign(this.zanData, data)
for (let game of this.games) {
game.zan = !!this.zanData[game.gameId]?.did
}
this.$forceUpdate()
}
private async loadMore(e: any) {
if (this.more === 'more') {
@ -107,15 +134,21 @@ export default class extends Vue{
this.more = 'noMore'
return
}
let ids = []
for (let data of res) {
data.gameId = data.oldGameId + ''
data.tags = []
data.collect = UserModule.collectSet.has(data.gameId)
if (data.chinese) {
let arr = data.chinese.split(';')
arr.forEach((o: string) => data.tags.push({name: o, type: 'error'}))
}
if (data.isLowest) data.tags.push({name: '史低', type: 'success', fill: true})
this.games.push(data)
ids.push(data.gameId)
}
if (ids.length) {
await this.fetchZanInfo(ids)
}
this.more = 'more'
}

6
src/pages/info/index.vue
View File

@ -10,7 +10,7 @@
<uni-title type ="h1" :title="name"></uni-title>
<uni-title type="h2" :title="subName"></uni-title>
<view class="tag-list">
<uni-tag v-for="tag in tagList" class="game-tag" :text="tag" inverted="true" type="error"></uni-tag>
<uni-tag v-for="tag in tagList" class="game-tag" :key="tag" :text="tag" inverted="true" type="error"></uni-tag>
</view>
<view class="info-content">
<text>
@ -21,7 +21,7 @@
<view class="price-list" v-if="priceList.length > 0">
<view class="price-title">低价排名</view>
<uni-list>
<uni-list-item v-for="item in priceList" >
<uni-list-item v-for="item in priceList" :key="item.gameId" >
<price-cell :data="item"></price-cell>
</uni-list-item>
<uni-list-item>
@ -199,7 +199,7 @@ dlc-cell {
position: absolute;
left: 0;
top: 0;
width: 150%;
width: 100%;
height: 100%;
filter: blur(50px);
opacity: 0.2;

11
src/store/index.ts Normal file
View File

@ -0,0 +1,11 @@
import Vue from 'vue'
import Vuex from 'vuex'
import { IUserState } from '@/store/modules/user'
Vue.use(Vuex)
export interface IRootState {
user: IUserState
}
export default new Vuex.Store<IRootState>({})

47
src/store/modules/user.ts Normal file
View File

@ -0,0 +1,47 @@
import {
Action,
getModule,
Module,
Mutation,
VuexModule
} from 'vuex-module-decorators'
import store from '@/store'
export interface IUserState {
token: string
name: string
avatar: string
sex?: string
collectSet: Set<string>
}
@Module({ dynamic: true, store, name: 'user' })
class User extends VuexModule implements IUserState {
public avatar: string = ''
public name: string =''
public sex: string = ''
public token: string = ''
public collectSet = new Set<string>()
@Mutation
public SET_TOKEN(token: string) {
this.token = token
}
@Action
public add_collect(gameId: string) {
this.collectSet.add(gameId)
}
@Action
public remove_collect(gameId: string) {
this.collectSet.delete(gameId)
}
@Action
public update_collect(games: string[]) {
games.forEach(this.collectSet.add, this.collectSet)
}
}
export const UserModule = getModule(User)