Skip to content

M
myphone
Commit 71a516ab by ChenXianbin
Options

提交代码，地址为服务器地址

parent 0ce7eb3a
Showing with 796 additions and 165 deletions
build/webpack.base.conf.js
...@@ -49,15 +49,15 @@ module.exports = { ...@@ -49,15 +49,15 @@ module.exports = {
}, },
module: { module: {
rules: [ rules: [
{ // {
test: /\.(js|vue)$/, // test: /\.(js|vue)$/,
loader: 'eslint-loader', // loader: 'eslint-loader',
enforce: 'pre', // enforce: 'pre',
include: [resolve('src'), resolve('test')], // include: [resolve('src'), resolve('test')],
options: { // options: {
formatter: require('eslint-friendly-formatter') // formatter: require('eslint-friendly-formatter')
} // }
}, // },
{ {
test: /\.vue$/, test: /\.vue$/,
loader: 'mpvue-loader', loader: 'mpvue-loader',
......
index.html
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>mpvue_quickstart</title> <title>mpvue_quickstart</title>
</head> </head>
<body> <body style="width:100%;height:100%">
<div id="app"></div> <div id="app" style="width:100%;height:100%"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>
src/pages/counter/index.vue
<template> <template>
<div class="counter-page"> <div class="counter-page" v-bind:style="{ paddingTop: isActive[0]+25*isActive[1] + 'rpx'}">
<img src="../../assets/img/index-bg.jpg" class="counter-bg"/> <div class="navigator_back" v-bind:style="{ top: isActive[0]-4*isActive[1]+ 'rpx'}"></div>
<!-- <div class="search-container"> <p class="navigator_text" v-bind:style="{ top: isActive[0]-4*isActive[1]+ 'rpx'}">我的手机</p>
<img src="../../assets/img/search_bg.png" class="search-bg" mode="aspectFit"/> <img src="../../assets/img/index-bg.jpg" class="counter-bg" />
<div class="search-container">
<img src="../../assets/img/search_bg.png" class="search-bg" mode="aspectFit" />
<div class="search-placeholder" :style="{opacity: hasFoucs || searchValue ? 0 : 1}"> <div class="search-placeholder" :style="{opacity: hasFoucs || searchValue ? 0 : 1}">
<img src="../../assets/img/ic_search.png" class="search-icon"> <img src="../../assets/img/ic_search.png" class="search-icon">
<text>搜索</text> <text>搜索</text>
</div> </div>
<input class="search-input" type="text" @focus="handleInputFoucs" @blur="handleInputBlur" confirm-type="搜索" v-model.lazy="searchValue"/> <input class="search-input" type="text" @focus="handleInputFoucs" @blur="handleInputBlur" confirm-type="搜索" v-model.lazy="searchValue" />
</div> --> </div>
<div class="content-main"> <div class="content-main">
<scroll-view <scroll-view class="scroll-left" scroll-y>
class="scroll-left" <div v-for="(item, index) in brandList" :key="index" class="option-item" :class="{'is-active': index === p_index }" @click="handleOptionItem(index, item.name)">
scroll-y> <p class="option-badge" :style="{display: item.total ? 'block' : 'none' }">
<div <span>{{item.total}}</span>
v-for="(item, index) in brandList" </p>
:key="index" <img class="option-item-image" src="../../assets/img/index-option-bg-active.png" :style="{ display: index === p_index ? 'block' : 'none'} " />
class="option-item" :class="{'is-active': index === p_index }" @click="handleOptionItem(index, item.name)"> <img class="option-item-image" src="../../assets/img/index-option-bg.png" :style="{ display: index === p_index ? 'none' : 'block'} " />
<p class="option-badge" :style="{display: item.total ? 'block' : 'none' }"><span>{{item.total}}</span></p>
<img class="option-item-image" src="../../assets/img/index-option-bg-active.png" :style="{ display: index === p_index ? 'block' : 'none'} "/>
<img class="option-item-image" src="../../assets/img/index-option-bg.png" :style="{ display: index === p_index ? 'none' : 'block'} "/>
<p class="option-text">{{item.name}}</p> <p class="option-text">{{item.name}}</p>
</div> </div>
</scroll-view> </scroll-view>
<div class="scroll-right-container"> <div class="scroll-right-container">
<scroll-view <scroll-view class="scroll-right" @scrolltolower="handleScrollBottom" :lower-threshold="40" scroll-y>
class="scroll-right"
@scrolltolower="handleScrollBottom"
:lower-threshold="40"
scroll-y>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="item-cell" v-for="item in itemList" :key="item.id" @click="handleItemCell(item)"> <div class="item-cell" v-for="item in itemList" :key="item.id" @click="handleItemCell(item)">
<img class="item-cell-image" src="../../assets/img/sel_box.png" :style="{ display: item.is_active ? 'none' : 'block'} "/> <img class="item-cell-image" src="../../assets/img/sel_box.png" :style="{ display: item.is_active ? 'none' : 'block'} " />
<img class="item-cell-image" src="../../assets/img/sel_box_sel.png" :style="{ display: item.is_active ? 'block' : 'none'} "/> <img class="item-cell-image" src="../../assets/img/sel_box_sel.png" :style="{ display: item.is_active ? 'block' : 'none'} " />
<img :src="item.img" class="item-img" mode="aspectFit" :lazy-load="true"/> <img :src="item.img" class="item-img" mode="aspectFit" :lazy-load="true" />
<text class="item-text" :style="{color: item.is_active ? '#fff' : '#282828'}">{{item.name}}</text> <text class="item-text" :style="{color: item.is_active ? '#fff' : '#282828'}">{{item.name}}</text>
</div> </div>
</div> </div>
...@@ -41,7 +36,7 @@ ...@@ -41,7 +36,7 @@
</div> </div>
</div> </div>
<div class="submit-field"> <div class="submit-field">
<img src="../../assets/img/line.png" class="line"/> <img src="../../assets/img/line.png" class="line" />
<button class="button-submit" open-type="getUserInfo" @getuserinfo="handleGetUserInfo"></button> <button class="button-submit" open-type="getUserInfo" @getuserinfo="handleGetUserInfo"></button>
</div> </div>
</div> </div>
...@@ -53,12 +48,26 @@ import store from '@/store' ...@@ -53,12 +48,26 @@ import store from '@/store'
import fly, { setAuthorization } from '@/request' import fly, { setAuthorization } from '@/request'
export default { export default {
computed: { computed: {
brand () { brand() {
return this.brandList[this.p_index] && this.brandList[this.p_index].name return this.brandList[this.p_index] && this.brandList[this.p_index].name
},
isActive() {
console.warn('show')
let height = 0,
pixelRatio = 1
wx.getSystemInfo({
success: res => {
this.pageStyle = 'padding-top:' + res.statusBarHeight + 'rpx'
console.warn(res.statusBarHeight)
// res.pixelRatio
height = res.statusBarHeight * res.pixelRatio
pixelRatio = res.pixelRatio
}
})
return [height, pixelRatio]
} }
}, },
components: { components: {},
},
data() { data() {
// 性能触发.所有的list只存key // 性能触发.所有的list只存key
return { return {
...@@ -68,7 +77,10 @@ export default { ...@@ -68,7 +77,10 @@ export default {
brandList: [], brandList: [],
hasFoucs: false, hasFoucs: false,
searchValue: '', searchValue: '',
searchPage: 1 oldSearchValue: '',
searchPage: 1,
searchLoaded: false,
img_host: ''
} }
}, },
created() { created() {
...@@ -76,8 +88,7 @@ export default { ...@@ -76,8 +88,7 @@ export default {
this.getConfig() this.getConfig()
this.login() this.login()
}, },
onLoad() { onLoad() {},
},
methods: { methods: {
initData() { initData() {
this._cache = {} this._cache = {}
...@@ -86,16 +97,22 @@ export default { ...@@ -86,16 +97,22 @@ export default {
this.p_index = 0 this.p_index = 0
this.hasFoucs = false this.hasFoucs = false
this.searchValue = '' this.searchValue = ''
this.oldSearchValue = ''
this.searchPage = 1 this.searchPage = 1
this.searchLoaded = false
this.itemList = []
this.brandList = []
this.getConfig() this.getConfig()
}, },
login() { login() {
const that = this const that = this
// console.log('登录中')
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
wx.login({ wx.login({
success(res) { success(res) {
that._jscode = res.code that._jscode = res.code
wx.setStorageSync('hasLogin', true) wx.setStorageSync('hasLogin', true)
resolve(res.code) resolve(res.code)
}, },
fail() { fail() {
...@@ -106,30 +123,44 @@ export default { ...@@ -106,30 +123,44 @@ export default {
}, },
handleInputFoucs() { handleInputFoucs() {
this.hasFoucs = true this.hasFoucs = true
// this.brandList[0].name != '搜索' &&
// this.brandList.unshift({ name: '搜索', total: 0 })
}, },
handleInputBlur() { handleInputBlur() {
console.log(this.searchValue) // console.log(this.searchValue);
this.hasFoucs = false this.hasFoucs = false
// 是否进行条件过滤？ // 是否进行条件过滤？
this.searchValue && (this.itemList = [])
this.searchValue != this.oldSearchValue &&
((this.searchPage = 1), (this.oldSearchValue = this.searchValue))
this.fetchListByWord(this.searchValue, this.searchPage) this.fetchListByWord(this.searchValue, this.searchPage)
}, },
// 滑动到底端 // 滑动到底端
handleScrollBottom() { handleScrollBottom() {
console.log(this._cache, this.brand) // console.log(this._cache, this.brand);
const obj = this._cache[this.brand] const obj = this._cache[this.brand]
if (obj.loaded) return
this.fetchDetail(this.brand, obj.page) if (this.searchValue) {
if (this.searchLoaded) return
this.fetchListByWord(this.searchValue, this.searchPage)
} else {
if (obj.loaded) return
this.fetchDetail(this.brand, obj.page)
}
}, },
async handleGetUserInfo(e) { async handleGetUserInfo(e) {
console.log(e) if (wx.getStorageSync('commited')) {
// setTimeout(() => {
// wx.setStorageSync('commited', false)
// }, 1000)
return false
}
if (e.target.errMsg === 'getUserInfo:ok') { if (e.target.errMsg === 'getUserInfo:ok') {
if (wx.getStorageSync('hasLogin')) { wx.setStorageSync('avatar', e.mp.detail.userInfo.avatarUrl)
const code = await this.login() wx.setStorageSync('nickName', e.mp.detail.userInfo.nickName)
this.getUserInfo(e.target, code) wx.setStorageSync('commited', true)
} else { const code = await this.login()
const code = await this.login() this.getUserInfo(e.target, code)
this.getUserInfo(e.target, code)
}
} else { } else {
wx.showModal({ wx.showModal({
title: '提示', title: '提示',
...@@ -139,31 +170,50 @@ export default { ...@@ -139,31 +170,50 @@ export default {
} }
}, },
async getUserInfo(res, code = '') { async getUserInfo(res, code = '') {
console.log(code, 'userinfo code')
if (!code) { if (!code) {
code = this._jscode code = this._jscode
} }
fly.post('auth_login', {
encrypted_data: res.encryptedData, let login_data = {}
iv: res.iv, let login_data_str = wx.getStorageSync('user_data')
js_code: code if (login_data_str) {
}) try {
.then(res => { login_data = JSON.parse(login_data_str)
console.log(res.data.token, 'token') } catch (e) {
setAuthorization(res.data.token) console.warn(e)
// 调用提交接口 }
}
if (login_data.id) {
global['user_id'] = login_data.id
this.handleSubmit()
return
}
fly.config.headers['js_code'] = code
fly.config.headers['encrypted_data'] = res.encryptedData
fly.config.headers['iv'] = res.iv
fly
.post('auth_login', {})
.then(login_res => {
wx.setStorageSync('user_data', JSON.stringify(login_res.data))
setAuthorization(login_res.data.token)
global['user_id'] = login_res.data.id
调用提交接口
this.handleSubmit() this.handleSubmit()
}) })
.catch(async res => { .catch(async res => {
const code = await this.login() // 调用提交接口
console.log('code is 11111', code) this.handleSubmit()
this.getUserInfo(res, code)
}) })
}, },
getConfig() { getConfig() {
fly.get('config?version=1.0.0') wx.showLoading()
fly
.get('config?version=1.0.0')
.then(res => { .then(res => {
store.commit('setConfig', res.data) store.commit('setConfig', res.data)
this.img_host = res.data.img_host
this.brandList = res.data.brands this.brandList = res.data.brands
this.brandList = this.brandList.map(item => { this.brandList = this.brandList.map(item => {
return { return {
...@@ -175,38 +225,65 @@ export default { ...@@ -175,38 +225,65 @@ export default {
this._cache[name] = {} this._cache[name] = {}
this._cache[name].activeList = [] this._cache[name].activeList = []
} }
console.log(this._cache) // console.log(this._cache);
this.fetchDetail(this.brandList[0].name) this.fetchDetail(this.brandList[0].name)
wx.hideLoading()
}) })
.catch(res => { .catch(res => {
console.log(res) // console.log(res);
wx.showToast({ wx.showToast({
title: '请更新微信' title: '请更新微信',
icon: 'none'
}) })
}) })
}, },
// 提交 // 提交
handleSubmit() { handleSubmit() {
console.log('handleSubmit', this._cache) // console.log("handleSubmit", this._cache);
let array = [] let array = []
global['cache_list'] = []
console.log(JSON.parse(JSON.stringify(this._cache)))
Object.values(this._cache).forEach(phoneType => { Object.values(this._cache).forEach(phoneType => {
if (phoneType.list) { if (phoneType.list) {
let phoneArray = phoneType.list.filter(item => item.is_active).map(item => item.id) let phoneArray = phoneType.list
array = array.concat(...phoneArray) .filter(item => item.is_active)
.map(item => item.id)
// array = array.concat(...phoneArray)
global['cache_list'] = global['cache_list'].concat(
...phoneType.list.filter(item => item.is_active)
)
} }
array = array.concat(...phoneType.activeList)
}) })
console.log(JSON.stringify(array), 'json stringify array') let uniq_obj = {}
fly.post('commit', { let submit_array = array.filter(id => {
mobiles: JSON.stringify(array) return uniq_obj[id] ? false : (uniq_obj[id] = true)
}) })
array = submit_array
if (array.length == 0) {
wx.showToast({
title: '请至少选择一款手机',
icon: 'none'
})
return
}
// console.log(JSON.stringify(array), "json stringify array");
fly
.post('commit', {
mobiles: JSON.stringify(array),
avatar: wx.getStorageSync('avatar'),
nick_name: wx.getStorageSync('nickName'),
// user_id:''
user_id: global['user_id'] || ''
})
.then(async res => { .then(async res => {
console.log('提交之后的数据', res) // console.log("提交之后的数据", res);
global['commit_data'] = res.data
await this.fetchImage(res.data) await this.fetchImage(res.data)
// 重置数据
this.resetData()
}) })
.catch(e => { .catch(e => {
console.log('异常') // console.log("异常");
}) })
}, },
fetchImage(data) { fetchImage(data) {
...@@ -215,6 +292,7 @@ export default { ...@@ -215,6 +292,7 @@ export default {
title: '加载中', title: '加载中',
mask: true mask: true
}) })
global['img_data'] = data
wx.request({ wx.request({
url: 'https://test-api.wxagame.com/game-mobile/api/v1/image', url: 'https://test-api.wxagame.com/game-mobile/api/v1/image',
method: 'POST', method: 'POST',
...@@ -226,39 +304,66 @@ export default { ...@@ -226,39 +304,66 @@ export default {
}, },
dataType: 'arraybuffer', dataType: 'arraybuffer',
responseType: 'arraybuffer', responseType: 'arraybuffer',
success: function (res) { success: res => {
console.log(res.statusCode)
if (res.statusCode === 200) { if (res.statusCode === 200) {
var byteArray = new Uint8Array(res.data) var byteArray = new Uint8Array(res.data)
console.log(byteArray.length)
const base64 = wx.arrayBufferToBase64(byteArray) const base64 = wx.arrayBufferToBase64(byteArray)
console.log(base64.length)
const contentType = res.header['content-type'] const contentType = res.header['content-type']
store.commit('setImage', 'data:' + contentType + ';base64,' + base64) store.commit('setImage', '')
wx.hideLoading() store.commit(
wx.navigateTo({ 'setImage',
url: `/pages/logs/main` 'data:' + contentType + ';base64,' + base64
}) )
global['base_64'] = 'data:' + contentType + ';base64,' + base64
if (global['commit_data'].url) {
wx.downloadFile({
url: global['commit_data'].url,
success: res => {
wx.hideLoading()
global['tempUrl'] = res.tempFilePath
// 重置数据
this.resetData()
wx.navigateTo({
url: `/pages/logs/main`
})
},
error: res => {
wx.hideLoading()
wx.setStorageSync('commited', false)
wx.showToast({ title: '网络状况不佳，请重试' })
}
})
} else {
wx.hideLoading()
wx.navigateTo({
url: `/pages/logs/main`
})
}
} else { } else {
// 重置数据
this.resetData()
wx.hideLoading() wx.hideLoading()
wx.setStorageSync('commited', false)
wx.showToast({ wx.showToast({
title: '生成失败', title: '生成失败',
icon: 'fail' icon: 'none'
}) })
} }
}, },
fail() { fail() {
wx.hideLoading() wx.hideLoading()
wx.setStorageSync('commited', false)
wx.showToast({ wx.showToast({
title: '生成失败', title: '生成失败',
icon: 'fail' icon: 'none'
}) })
} }
}) })
}, },
// 获取详情 // 获取详情
fetchDetail(brand = '', page = 1) { fetchDetail(brand = '', page = 1) {
fly.get(`mobiles?brand=${brand}&page=${page}`) fly
.get(`mobiles?brand=${brand}&page=${page}`)
.then(res => { .then(res => {
page++ page++
this._cache[brand].page = page this._cache[brand].page = page
...@@ -266,12 +371,18 @@ export default { ...@@ -266,12 +371,18 @@ export default {
if (res.data.total_page <= page) { if (res.data.total_page <= page) {
this._cache[brand].loaded = true this._cache[brand].loaded = true
} }
this.itemList = this.itemList.concat(...res.data.mobiles) this.itemList = this.itemList
.concat(...res.data.mobiles)
.map(item => {
item.img.indexOf(this.img_host) == -1 &&
(item.img = this.img_host + item.img)
return item
})
this.hasActiveId(brand) this.hasActiveId(brand)
this._cache[brand].list = this.itemList this._cache[brand].list = this.itemList
}) })
.catch(res => { .catch(res => {
console.log('warning') // console.log("warning");
}) })
}, },
// 是否有，有的话，激活 // 是否有，有的话，激活
...@@ -294,14 +405,48 @@ export default { ...@@ -294,14 +405,48 @@ export default {
}, },
// 根据条件获取手机列表 // 根据条件获取手机列表
fetchListByWord(word = '', page = 1, count = 20) { fetchListByWord(word = '', page = 1, count = 20) {
fly.get(`search?word=${word}&page=${page}&per_page=${count}`) if (!word) return
fly
.get(`search?word=${word}&page=${page}&per_page=${count}`)
.then(res => { .then(res => {
this.itemList = res.data if (this.searchPage == 1) {
this.itemList = []
}
this.searchPage++
// 是否加载结束
if (res.data.total_page <= this.searchPage) {
this.searchLoaded = true
} else {
this.searchLoaded = false
}
this.itemList = this.itemList.concat(
res.data.mobiles.map(item => {
item.img = this.img_host + item.img
Object.values(this._cache).forEach(phoneType => {
phoneType.list &&
phoneType.list
.filter(cache_item => cache_item.is_active)
.map(
cache_item =>
cache_item.id == item.id && (item.is_active = true)
)
phoneType.activeList.map(cache_item_id => {
cache_item_id == item.id && (item.is_active = true)
})
})
return item
})
)
}) })
}, },
handleOptionItem(index, brand = '') { handleOptionItem(index, brand = '') {
console.log(this.brand, brand, this._cache) // console.log(this.brand, brand, this._cache);
// 如果当前的已有list，就直接切换 // 如果当前的已有list，就直接切换
this.searchValue = ''
this.searchPage = 1
this.searchLoaded = false
if (this._cache[brand].list) { if (this._cache[brand].list) {
this._cache[brand].list = this._cache[brand].list.map(item => { this._cache[brand].list = this._cache[brand].list.map(item => {
if (this._cache[brand].activeList.includes(item.id)) { if (this._cache[brand].activeList.includes(item.id)) {
...@@ -326,39 +471,48 @@ export default { ...@@ -326,39 +471,48 @@ export default {
}, },
handleItemCell(option) { handleItemCell(option) {
// 使用一个activeList去维护激活的id // 使用一个activeList去维护激活的id
console.warn('click')
console.log(option) console.log(option)
option.is_active = !option.is_active option.is_active = !option.is_active
const num = option.is_active ? 1 : -1 const num = option.is_active ? 1 : -1
// 如果brands有多个分类，做排除自身意外的激活或移除操作 // 如果brands有多个分类，做排除自身意外的激活或移除操作
if (option.brands.length > 1) { if (option.brands.length > 0) {
if (num > -1) { if (num > -1) {
// 过滤出不属于当前brand的brands // 过滤出不属于当前brand的brands
option.brands.filter(item => item !== this.brand).forEach(brand => { option.brands
if (!this._cache[brand].activeList.includes(option.id)) { // .filter(item => item !== this.brand)
this._cache[brand].activeList.push(option.id) .forEach(brand => {
const brandIndex = this.brandList.findIndex(item => item.name === brand) if (!this._cache[brand].activeList.includes(option.id)) {
const temp = this.brandList[brandIndex] this._cache[brand].activeList.push(option.id)
temp.total += num const brandIndex = this.brandList.findIndex(
this.brandList.splice(brandIndex, 1, temp) item => item.name === brand
} )
}) this.brandList[brandIndex].total += num
}
})
} else { } else {
option.brands.filter(item => item !== this.brand).forEach(brand => { option.brands
const index = this._cache[brand].activeList.findIndex(id => id === option.id) // .filter(item => item !== this.brand)
if (index > -1) { .forEach(brand => {
// 移除 const index = this._cache[brand].activeList.findIndex(
this._cache[brand].activeList.splice(index, 1) id => id === option.id
const brandIndex = this.brandList.findIndex(item => item.name === brand) )
const temp = this.brandList[brandIndex] if (index > -1) {
temp.total += num // 移除
this.brandList.splice(brandIndex, 1, temp) this._cache[brand].activeList.splice(index, 1)
} const brandIndex = this.brandList.findIndex(
}) item => item.name === brand
)
this.brandList[brandIndex].total += num
}
})
} }
} }
// 当前brand的操作 // 当前brand的操作
this._cache[this.brand].list = this.itemList // this._cache[this.brand].list = this.itemList
const index = this._cache[this.brand].activeList.findIndex(id => id === option.id) const index = this._cache[this.brand].activeList.findIndex(
id => id === option.id
)
if (num > -1) { if (num > -1) {
if (index === -1) { if (index === -1) {
this._cache[this.brand].activeList.push(option.id) this._cache[this.brand].activeList.push(option.id)
...@@ -368,8 +522,7 @@ export default { ...@@ -368,8 +522,7 @@ export default {
this._cache[this.brand].activeList.splice(index, 1) this._cache[this.brand].activeList.splice(index, 1)
} }
} }
this.itemList = this.itemList.slice() // this.itemList = this.itemList.slice()
this.brandList[this.p_index].total += num
} }
} }
} }
...@@ -382,6 +535,7 @@ export default { ...@@ -382,6 +535,7 @@ export default {
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
padding-top: 160rpx;
.search-container { .search-container {
position: relative; position: relative;
...@@ -416,8 +570,8 @@ export default { ...@@ -416,8 +570,8 @@ export default {
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
color: #d9d9d9; color: #d9d9d9;
font-size: 30rpx;; font-size: 30rpx;
padding: 0 40rpx padding: 0 40rpx;
} }
} }
.scroll-left { .scroll-left {
...@@ -454,7 +608,7 @@ export default { ...@@ -454,7 +608,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0;; left: 0;
} }
.item-img { .item-img {
position: absolute; position: absolute;
...@@ -536,6 +690,23 @@ export default { ...@@ -536,6 +690,23 @@ export default {
width: 700rpx; width: 700rpx;
height: 6rpx; height: 6rpx;
} }
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.navigator_text {
text-align: center;
font-size: 40rpx;
color: #555555;
position: fixed;
top: 60rpx;
font-family: 'Microsoft Yahei';
width: 100%;
z-index: 100;
}
.button-submit { .button-submit {
width: 489rpx; width: 489rpx;
height: 123rpx; height: 123rpx;
......
src/pages/index/index.vue
<template> <template>
<div class="index-page"> <div class="index-page" v-bind:style="{ paddingTop: isActive[0]+25*isActive[1] + 'rpx'}">
<img src="../../assets/img/index-bg.jpg" class="index-bg"/> <p class="navigator_text" v-bind:style="{ top: isActive[0]-4*isActive[1]+ 'rpx'}">我的手机</p>
<img src="../../assets/img/index-bg.jpg" class="index-bg" />
<img src="../../assets/img/index-bg-cover.png" class="index-bg-cover" /> <img src="../../assets/img/index-bg-cover.png" class="index-bg-cover" />
<img src="../../assets/img/index-start-button.jpg" class="index-start-button" @click="handleStart"/> <img src="../../assets/img/index-start-button.jpg" class="index-start-button" @click="handleStart" />
<!-- <navigator <navigator v-if="config.more_fun && !config.more_fun.hide" class="navigator" path="" target="miniProgram" open-type="navigate" :app-id="config.more_fun.appid">
v-if="config.more_fun && !config.more_fun.hide" <img src="../../assets/img/btn-more.png" class="btn-more" @tap="handleMore" v-if="config.more_fun && !config.more_fun.hide" />
class="navigator" </navigator>
path=""
target="miniProgram" open-type="navigate" :app-id="config.more_fun.appid" > -->
<img src="../../assets/img/btn-more.png" class="btn-more" @tap="handleMore" v-if="config.more_fun && !config.more_fun.hide" />
<!-- </navigator> -->
</div> </div>
</template> </template>
...@@ -19,45 +16,66 @@ export default { ...@@ -19,45 +16,66 @@ export default {
computed: { computed: {
config() { config() {
return store.state.indexPage.config return store.state.indexPage.config
},
isActive() {
console.warn('show')
let height = 0,pixelRatio=1;
wx.getSystemInfo({
success: res => {
this.pageStyle = 'padding-top:' + res.statusBarHeight + 'rpx'
console.warn(res.statusBarHeight)
console.warn(res.pixelRatio)
// res.pixelRatio
height = res.statusBarHeight*res.pixelRatio;
pixelRatio = res.pixelRatio
}
})
return [height,pixelRatio];
} }
}, },
onLoad () { onLoad() {
console.log(this.$root.$mp.query, this.$root.$mp.appOptions, this.$root.$mp) // console.log(
// this.$root.$mp.query,
// this.$root.$mp.appOptions,
// this.$root.$mp
// );
}, },
onPageScroll () { onShow() {},
console.log('page is scroll') onPageScroll() {
// console.log('page is scroll')
}, },
beforeCreate () { beforeCreate() {
console.log('page is before create') // console.log('page is before create')
}, },
data () { data() {
return { return {
userInfo: {} userInfo: {}
} }
}, },
components: { components: {},
},
methods: { methods: {
handleStart() { handleStart() {
wx.setStorageSync('commited', false)
wx.navigateTo({ wx.navigateTo({
url: '/pages/counter/main' url: '/pages/counter/main'
}) })
}, },
handleMore() { handleMore() {
return false
wx.navigateToMiniProgram({ wx.navigateToMiniProgram({
appId: this.config.more_fun.appid, appId: this.config.more_fun.appid,
path: '', path: '',
success() { success() {
console.log('打开成功') // console.log("打开成功");
} }
}) })
} }
}, },
created () { created() {},
} mounted() {}
} }
</script> </script>
...@@ -69,6 +87,7 @@ export default { ...@@ -69,6 +87,7 @@ export default {
background: #c9baa8; background: #c9baa8;
text-align: center; text-align: center;
padding: 30rpx 0 0; padding: 30rpx 0 0;
padding-top: 160rpx;
} }
.index-bg { .index-bg {
position: absolute; position: absolute;
...@@ -96,4 +115,18 @@ export default { ...@@ -96,4 +115,18 @@ export default {
height: 123rpx; height: 123rpx;
z-index: 4; z-index: 4;
} }
.navigator {
opacity: 1;
background: rgba(0, 0, 0, 0);
}
.navigator_text {
text-align: center;
font-size: 40rpx;
color: #555555;
position: fixed;
top: 60rpx;
font-family: 'Microsoft Yahei';
width: 100%;
z-index: 100;
}
</style> </style>
src/pages/logs/index.vue
<template> <template>
<div> <div class="log-page">
<img :src="path" class="log-bg"/> <canvas class="log-bg" canvas-id="log-bg" @touchmove.stop="preventDefault"></canvas>
<div class="fixed">
<div class="list-container">
<canvas canvas-id="share_friend"></canvas>
<canvas canvas-id="share_pengyouquan" v-if="true" @touchend="handleSavePic"></canvas>
<canvas canvas-id="reselect" v-if="true" @touchend="handleRepick"></canvas>
</div>
</div>
<div class="fixed"> <div class="fixed">
<ul class="list-container"> <ul class="list-container">
<li class="list-item"> <li class="list-item">
<img src="../../assets/img/ic_zhuanfa.png" mode="widthFix"/><text class="text-zhuanfan">发送给朋友</text> <img src="../../assets/img/ic_zhuanfa.png" mode="widthFix" />
<text class="text-zhuanfan">发送给朋友</text>
<button open-type="share" class="btn-share"></button> <button open-type="share" class="btn-share"></button>
</li> </li>
<li class="list-item"><img src="../../assets/img/ic_share.png" mode="widthFix"/><text class="text-share">生成分享图</text></li> <li class="list-item">
<li class="list-item" @tap="handleRepick"><img src="../../assets/img/re_sel.png" mode="widthFix"/></li> </li>
<li class="list-item">
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -20,35 +30,434 @@ export default { ...@@ -20,35 +30,434 @@ export default {
onShareAppMessage() { onShareAppMessage() {
return { return {
title: '我的手机', title: '我的手机',
path: '/page/index/main' path: '/page/index/main',
sytle: 'width: 300px; height: 200px;'
} }
}, },
components: { components: {},
}, onLoad() {},
onLoad() {
},
computed: { computed: {
path() { path() {
global['canvas_drawed'] = false
wx.setStorageSync('commited', false)
if (global['commit_data'].url == '') {
// if (true) {
this.printFrontEndPic()
} else {
this.printBackEndPic()
}
let windowWidth = 0
let windowHeight = 0
wx.getSystemInfo({
success: function(res) {
windowWidth = res.windowWidth
windowHeight = res.windowHeight
}
})
let share_friend = wx.createCanvasContext('share_friend')
share_friend.setFillStyle('rgba(0, 0, 0, 1)')
share_friend.fillRect(0, 0, windowWidth, 100)
share_friend.drawImage(
'../../copy-asset/assets/img/ic_zhuanfa.png',
windowWidth * 0.12,
18,
windowWidth * 0.09,
windowWidth * 0.09 / 64 * 59
)
share_friend.setFillStyle('#ffde5e')
share_friend.setFontSize(15)
share_friend.setTextAlign('center')
share_friend.fillText(
'转发到群',
windowWidth * 0.166667,
windowWidth * 0.09 / 64 * 59 + 42
)
share_friend.drawImage(
'../../copy-asset/assets/img/assit_line.png',
windowWidth * 0.33,
0,
2,
100
)
share_friend.draw()
let share_pengyouquan = wx.createCanvasContext('share_pengyouquan')
share_pengyouquan.setFillStyle('rgba(0, 0, 0, 1)')
share_pengyouquan.fillRect(0, 0, windowWidth, 100)
share_pengyouquan.drawImage(
'../../copy-asset/assets/img/ic_share.png',
windowWidth * 0.12,
18,
windowWidth * 0.09,
windowWidth * 0.09
)
share_pengyouquan.setFillStyle('#38eb95')
share_pengyouquan.setFontSize(15)
share_pengyouquan.setTextAlign('center')
share_pengyouquan.fillText(
'生成图片分享好友',
windowWidth * 0.166667,
windowWidth * 0.09 / 64 * 59 + 42
)
share_pengyouquan.draw()
let reselect = wx.createCanvasContext('reselect')
reselect.setFillStyle('rgba(0, 0, 0, 1)')
reselect.fillRect(0, 0, windowWidth, 100)
reselect.drawImage(
'../../copy-asset/assets/img/re_sel.png',
windowWidth * 0.12,
16,
windowWidth * 0.09,
windowWidth * 0.09 / 63 * 109
)
reselect.drawImage(
'../../copy-asset/assets/img/assit_line.png',
0,
0,
2,
100
)
reselect.draw()
return store.state.logPage.path return store.state.logPage.path
} }
}, },
methods: { methods: {
preventDefault(e) {
return false
},
handleRepick() { handleRepick() {
console.log('return')
wx.navigateBack({ wx.navigateBack({
delta: 1 delta: 1
}) })
},
handleSavePic() {
let windowWidth = 0
let windowHeight = 0
wx.getSystemInfo({
success: function(res) {
windowWidth = res.windowWidth
windowHeight = res.windowHeight
}
})
if (global['canvas_drawed']) {
wx.saveImageToPhotosAlbum({
filePath: global['log_path'],
success(res) {
wx.showToast({
title: '保存成功',
icon: 'none'
})
}
})
}
},
printFrontEndPic() {
let windowWidth = 0
let windowHeight = 0
let scale_base = 375
let scale = 0
let margin_top = 50
wx.getSystemInfo({
success: function(res) {
windowWidth = res.windowWidth
windowHeight = res.windowHeight
scale = windowWidth / scale_base
}
})
var context = wx.createCanvasContext('log-bg')
context.drawImage(
'../../copy-asset/assets/img/bg_block.png',
0,
0,
windowWidth,
windowHeight
)
context.drawImage(
'../../copy-asset/assets/img/index-bg.jpg',
0,
0,
windowWidth,
windowHeight
)
context.drawImage(
'../../copy-asset/assets/img/bg.jpg',
windowWidth * 0.06,
(20 + margin_top) * scale,
windowWidth * 0.88,
windowWidth * 0.88 / 680 * 376
)
//缓存的选取手机列表
console.log(global['cache_list'])
console.log(global['commit_data'])
wx.downloadFile({
url: global['commit_data'].avatar, // 下载资源的 url
success: res => {
console.log(res)
context.save()
context.beginPath()
context.arc(
126 * scale,
(60 + margin_top) * scale,
20 * scale,
0,
2 * Math.PI
)
context.clip()
context.drawImage(
res.tempFilePath,
106 * scale,
(40 + margin_top) * scale,
40 * scale,
40 * scale
)
context.restore()
context.draw(true, () => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: windowWidth,
height: windowHeight,
// destWidth: windowWidth,
// destHeight: windowHeight,
canvasId: 'log-bg',
success: function(canvas_res) {
wx.hideLoading();
global['log_path'] = canvas_res.tempFilePath
}
})
})
},
fail: () => {},
complete: () => {}
})
context.setFillStyle('#FEA002')
context.setFontSize(30 * scale)
context.setTextAlign('center')
context.fillText(
global['commit_data'].start,
100 * scale,
(105 + margin_top) * scale
)
context.fillText(
global['commit_data'].end,
230 * scale,
(105 + margin_top) * scale
)
context.fillText(
global['commit_data'].money,
196 * scale,
(140 + margin_top) * scale
)
context.fillText(
global['commit_data'].percent,
194 * scale,
(175 + margin_top) * scale
)
let target_name = global['commit_data'].names[0]
global['cache_list'].map(phone => {
phone.name == target_name &&
wx.downloadFile({
url: phone.img, // 下载资源的 url
success: res => {
wx.getImageInfo({
src: res.tempFilePath,
success: function(img_res) {
context.drawImage(
res.tempFilePath,
windowWidth * 0.15,
(220 + margin_top) * scale,
windowWidth * 0.7,
windowWidth * 0.7 / img_res.width * img_res.height
)
context.draw(true, () => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: windowWidth,
height: windowHeight,
// destWidth: windowWidth,
// destHeight: windowHeight,
canvasId: 'log-bg',
success: function(canvas_res) {
wx.hideLoading();
global['log_path'] = canvas_res.tempFilePath
}
})
})
}
})
},
fail: () => {},
complete: () => {}
})
})
context.setFillStyle('#333333')
context.setFontSize(12 * scale)
context.setTextAlign('left')
global['commit_data'].names.map((phone, index) => {
if (index >= 3 * 4) {
return
}
context.fillText(
phone,
(index % 3) * 80 * scale + 20 * scale,
Math.floor(index / 3) * 20 * scale + windowHeight - 90 * scale,
70 * scale
)
})
context.drawImage(
'../../copy-asset/assets/img/er_code.png',
windowWidth - 95 * scale,
windowHeight - 95 * scale,
80 * scale,
80 * scale
)
context.draw(true, () => {
global['canvas_drawed'] = true
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: windowWidth,
height: windowHeight,
// destWidth: windowWidth,
// destHeight: windowHeight,
canvasId: 'log-bg',
success: function(canvas_res) {
wx.hideLoading();
global['log_path'] = canvas_res.tempFilePath
}
})
})
},
printBackEndPic() {
console.warn('print_backend_pic')
// let param = JSON.stringify(global['img_data']);
let url =
global['commit_data'].url ||
'https://open.bleege.com/cgi/api/myPhone/getShareImage?pageData=eyJhdmF0YXIiOiJhdmF0YXIucG5nIiwiZW5kIjoiNEciLCJtb25leSI6OTk4LCJwZXJjZW50IjoiOTkuOSUiLCJzdGFydCI6IjgwIiwiYnJhbmRzIjpbWyJodHRwOi8vaW1nLmdhbWUud3hhZ2FtZS5jb20vbW9iaWxlX3BuZ3MvNTc1Ni5wbmciLCJodHRwOi8vaW1nLmdhbWUud3hhZ2FtZS5jb20vbW9iaWxlX3BuZ3MvNTc1Ni5wbmciLCJodHRwOi8vaW1nLmdhbWUud3hhZ2FtZS5jb20vbW9iaWxlX3BuZ3MvNTc1Ni5wbmciXSxbImh0dHA6Ly9pbWcuZ2FtZS53eGFnYW1lLmNvbS9tb2JpbGVfcG5ncy81NzU4LnBuZyJdLFsiaHR0cDovL2ltZy5nYW1lLnd4YWdhbWUuY29tL21vYmlsZV9wbmdzLzMwNzkucG5nIiwiaHR0cDovL2ltZy5nYW1lLnd4YWdhbWUuY29tL21vYmlsZV9wbmdzLzMwNzkucG5nIl0sW11dLCJuYW1lcyI6WyLlsI%2fnsbMmIzM5O1xcXCJNMSIsIuivuuWfuuS6mjUyMDAiLCIxMjMiLCLor7rln7rkupo1MjAw6K%2b65Z%2b65LqaNTIwMCIsIuivuuWfuuS6mjUyMDAiXX0%3d'
let windowWidth = 0
let windowHeight = 0
let scale_base = 375
let scale = 0
wx.getSystemInfo({
success: function(res) {
windowWidth = res.windowWidth
windowHeight = res.windowHeight
scale = windowWidth / scale_base
}
})
var context = wx.createCanvasContext('log-bg')
wx.showLoading({
title: '加载中。。。', //提示的内容,
mask: true, //显示透明蒙层，防止触摸穿透,
success: res => {}
})
context.drawImage(
'../../copy-asset/assets/img/bg_block.png',
0,
0,
windowWidth,
windowHeight
)
context.drawImage(
'../../copy-asset/assets/img/index-bg.jpg',
0,
0,
windowWidth,
windowHeight
)
// wx.downloadFile({
// url: url,
// success: res => {
wx.getImageInfo({
src: global['tempUrl'],
success: function(img_res) {
let posY =
windowHeight -
windowWidth / img_res.width * img_res.height -
95 * scale
context.drawImage(
global['tempUrl'],
0,
posY < 0 ? 0 : posY,
windowWidth,
windowWidth / img_res.width * img_res.height
)
context.draw(true, () => {
wx.hideLoading()
wx.canvasToTempFilePath({
x: 0,
y: posY < 0 ? 0 : posY,
width: windowWidth,
height: windowWidth / img_res.width * img_res.height,
// height:200,
// destWidth: windowWidth*3,
// destHeight: windowWidth / img_res.width * img_res.height*3,
// destHeight:200,
canvasId: 'log-bg',
success: canvas_res => {
// console.log(canvas_res.tempFilePath)
wx.hideLoading();
global['canvas_drawed'] = true
global['log_path'] = canvas_res.tempFilePath
}
})
})
}
})
// },
// fail: () => {},
// complete: () => {}
// })
} }
}, },
data () { data() {
return { return {
windowWidth: 0,
windowHeight: 0
} }
}, },
created () { created() {},
onShareAppMessage(res) {
return {
title: '从80年代到4G时代，你用过几款手机？',
path: '/pages/index/main',
imageUrl: global['log_path']
}
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
page {
height: calc(100% - 160rpx);
padding-top: 160rpx;
}
// .log-page {
// width: 100%;
// background: #c9baa8;
// height: calc(100vh-160rpx);
// display: flex;
// flex-flow: column nowrap;
// padding-top: 160rpx;
// }
.fixed { .fixed {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -56,15 +465,18 @@ export default { ...@@ -56,15 +465,18 @@ export default {
width: 100%; width: 100%;
height: 180rpx; height: 180rpx;
background: rgba(#000, 0.7); background: rgba(#000, 0.7);
z-index: 100; z-index: 1000;
} }
.log-bg { .log-bg {
position: absolute; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: -1;
}
ul.list-container {
opacity: 0;
} }
.list-container { .list-container {
width: 100%; width: 100%;
...@@ -81,7 +493,7 @@ export default { ...@@ -81,7 +493,7 @@ export default {
align-items: center; align-items: center;
padding: 20rpx 0; padding: 20rpx 0;
font-size: 28rpx; font-size: 28rpx;
opacity: 0;
&:not(:last-child) { &:not(:last-child) {
border-right: 2rpx dashed #ddd1be; border-right: 2rpx dashed #ddd1be;
} }
...@@ -104,4 +516,19 @@ export default { ...@@ -104,4 +516,19 @@ export default {
height: 100%; height: 100%;
z-index: 1; z-index: 1;
} }
[canvas-id='share_friend'] {
height: 100px;
display: 'flex';
padding: 0 !important;
}
[canvas-id='share_pengyouquan'] {
height: 100px;
display: 'flex';
padding: 0 !important;
}
[canvas-id='reselect'] {
height: 100px;
display: 'flex';
padding: 0 !important;
}
</style> </style>
src/request.js
...@@ -11,8 +11,8 @@ function setAuthorization (header) { ...@@ -11,8 +11,8 @@ function setAuthorization (header) {
Authorization = header Authorization = header
} }
const log = console.log const log = console.log
// fly.config.baseURL = 'https://minigame.api.wxagame.com/game-mobile/api/v1/'
fly.config.baseURL = 'https://test-api.wxagame.com/game-mobile/api/v1/' fly.config.baseURL = 'https://test-api.wxagame.com/game-mobile/api/v1/'
// add token // add token
fly.interceptors.request.use((config, promise) => { fly.interceptors.request.use((config, promise) => {
log(config, 'request config') log(config, 'request config')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment