Skip to content

M
myphone
Commit 71a516ab by ChenXianbin
Options

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

parent 0ce7eb3a
Showing with 779 additions and 148 deletions
build/webpack.base.conf.js
......@@ -49,15 +49,15 @@ module.exports = {
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
// {
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter')
// }
// },
{
test: /\.vue$/,
loader: 'mpvue-loader',
......
index.html
......@@ -4,8 +4,8 @@
<meta charset="utf-8">
<title>mpvue_quickstart</title>
</head>
<body>
<div id="app"></div>
<body style="width:100%;height:100%">
<div id="app" style="width:100%;height:100%"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/pages/counter/index.vue
<template>
<div class="counter-page">
<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="counter-page" v-bind:style="{ paddingTop: isActive[0]+25*isActive[1] + 'rpx'}">
<div class="navigator_back" v-bind:style="{ top: isActive[0]-4*isActive[1]+ 'rpx'}"></div>
<p class="navigator_text" v-bind:style="{ top: isActive[0]-4*isActive[1]+ 'rpx'}">我的手机</p>
<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}">
<img src="../../assets/img/ic_search.png" class="search-icon">
<text>搜索</text>
</div>
<input class="search-input" type="text" @focus="handleInputFoucs" @blur="handleInputBlur" confirm-type="搜索" v-model.lazy="searchValue"/>
</div> -->
<input class="search-input" type="text" @focus="handleInputFoucs" @blur="handleInputBlur" confirm-type="搜索" v-model.lazy="searchValue" />
</div>
<div class="content-main">
<scroll-view
class="scroll-left"
scroll-y>
<div
v-for="(item, index) in brandList"
:key="index"
class="option-item" :class="{'is-active': index === p_index }" @click="handleOptionItem(index, item.name)">
<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'} "/>
<scroll-view class="scroll-left" scroll-y>
<div v-for="(item, index) in brandList" :key="index" class="option-item" :class="{'is-active': index === p_index }" @click="handleOptionItem(index, item.name)">
<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>
</div>
</scroll-view>
<div class="scroll-right-container">
<scroll-view
class="scroll-right"
@scrolltolower="handleScrollBottom"
:lower-threshold="40"
scroll-y>
<scroll-view class="scroll-right" @scrolltolower="handleScrollBottom" :lower-threshold="40" scroll-y>
<div class="content-wrapper">
<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_sel.png" :style="{ display: item.is_active ? 'block' : 'none'} "/>
<img :src="item.img" class="item-img" mode="aspectFit" :lazy-load="true"/>
<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 :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>
</div>
</div>
......@@ -41,7 +36,7 @@
</div>
</div>
<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>
</div>
</div>
......@@ -53,12 +48,26 @@ import store from '@/store'
import fly, { setAuthorization } from '@/request'
export default {
computed: {
brand () {
brand() {
return this.brandList[this.p_index] && this.brandList[this.p_index].name
}
},
components: {
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: {},
data() {
// 性能触发.所有的list只存key
return {
......@@ -68,7 +77,10 @@ export default {
brandList: [],
hasFoucs: false,
searchValue: '',
searchPage: 1
oldSearchValue: '',
searchPage: 1,
searchLoaded: false,
img_host: ''
}
},
created() {
......@@ -76,8 +88,7 @@ export default {
this.getConfig()
this.login()
},
onLoad() {
},
onLoad() {},
methods: {
initData() {
this._cache = {}
......@@ -86,16 +97,22 @@ export default {
this.p_index = 0
this.hasFoucs = false
this.searchValue = ''
this.oldSearchValue = ''
this.searchPage = 1
this.searchLoaded = false
this.itemList = []
this.brandList = []
this.getConfig()
},
login() {
const that = this
// console.log('登录中')
return new Promise((resolve, reject) => {
wx.login({
success(res) {
that._jscode = res.code
wx.setStorageSync('hasLogin', true)
resolve(res.code)
},
fail() {
......@@ -106,30 +123,44 @@ export default {
},
handleInputFoucs() {
this.hasFoucs = true
// this.brandList[0].name != '搜索' &&
// this.brandList.unshift({ name: '搜索', total: 0 })
},
handleInputBlur() {
console.log(this.searchValue)
// console.log(this.searchValue);
this.hasFoucs = false
// 是否进行条件过滤？
this.searchValue && (this.itemList = [])
this.searchValue != this.oldSearchValue &&
((this.searchPage = 1), (this.oldSearchValue = this.searchValue))
this.fetchListByWord(this.searchValue, this.searchPage)
},
// 滑动到底端
handleScrollBottom() {
console.log(this._cache, this.brand)
// console.log(this._cache, this.brand);
const obj = this._cache[this.brand]
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) {
console.log(e)
if (wx.getStorageSync('commited')) {
// setTimeout(() => {
// wx.setStorageSync('commited', false)
// }, 1000)
return false
}
if (e.target.errMsg === 'getUserInfo:ok') {
if (wx.getStorageSync('hasLogin')) {
const code = await this.login()
this.getUserInfo(e.target, code)
} else {
wx.setStorageSync('avatar', e.mp.detail.userInfo.avatarUrl)
wx.setStorageSync('nickName', e.mp.detail.userInfo.nickName)
wx.setStorageSync('commited', true)
const code = await this.login()
this.getUserInfo(e.target, code)
}
} else {
wx.showModal({
title: '提示',
......@@ -139,31 +170,50 @@ export default {
}
},
async getUserInfo(res, code = '') {
console.log(code, 'userinfo code')
if (!code) {
code = this._jscode
}
fly.post('auth_login', {
encrypted_data: res.encryptedData,
iv: res.iv,
js_code: code
})
.then(res => {
console.log(res.data.token, 'token')
setAuthorization(res.data.token)
// 调用提交接口
let login_data = {}
let login_data_str = wx.getStorageSync('user_data')
if (login_data_str) {
try {
login_data = JSON.parse(login_data_str)
} catch (e) {
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()
})
.catch(async res => {
const code = await this.login()
console.log('code is 11111', code)
this.getUserInfo(res, code)
// 调用提交接口
this.handleSubmit()
})
},
getConfig() {
fly.get('config?version=1.0.0')
wx.showLoading()
fly
.get('config?version=1.0.0')
.then(res => {
store.commit('setConfig', res.data)
this.img_host = res.data.img_host
this.brandList = res.data.brands
this.brandList = this.brandList.map(item => {
return {
......@@ -175,38 +225,65 @@ export default {
this._cache[name] = {}
this._cache[name].activeList = []
}
console.log(this._cache)
// console.log(this._cache);
this.fetchDetail(this.brandList[0].name)
wx.hideLoading()
})
.catch(res => {
console.log(res)
// console.log(res);
wx.showToast({
title: '请更新微信'
title: '请更新微信',
icon: 'none'
})
})
},
// 提交
handleSubmit() {
console.log('handleSubmit', this._cache)
// console.log("handleSubmit", this._cache);
let array = []
global['cache_list'] = []
console.log(JSON.parse(JSON.stringify(this._cache)))
Object.values(this._cache).forEach(phoneType => {
if (phoneType.list) {
let phoneArray = phoneType.list.filter(item => item.is_active).map(item => item.id)
array = array.concat(...phoneArray)
}
let phoneArray = phoneType.list
.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')
fly.post('commit', {
mobiles: JSON.stringify(array)
let uniq_obj = {}
let submit_array = array.filter(id => {
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 => {
console.log('提交之后的数据', res)
// console.log("提交之后的数据", res);
global['commit_data'] = res.data
await this.fetchImage(res.data)
// 重置数据
this.resetData()
})
.catch(e => {
console.log('异常')
// console.log("异常");
})
},
fetchImage(data) {
......@@ -215,6 +292,7 @@ export default {
title: '加载中',
mask: true
})
global['img_data'] = data
wx.request({
url: 'https://test-api.wxagame.com/game-mobile/api/v1/image',
method: 'POST',
......@@ -226,39 +304,66 @@ export default {
},
dataType: 'arraybuffer',
responseType: 'arraybuffer',
success: function (res) {
console.log(res.statusCode)
success: res => {
if (res.statusCode === 200) {
var byteArray = new Uint8Array(res.data)
console.log(byteArray.length)
const base64 = wx.arrayBufferToBase64(byteArray)
console.log(base64.length)
const contentType = res.header['content-type']
store.commit('setImage', 'data:' + contentType + ';base64,' + base64)
store.commit('setImage', '')
store.commit(
'setImage',
'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 {
// 重置数据
this.resetData()
wx.hideLoading()
wx.setStorageSync('commited', false)
wx.showToast({
title: '生成失败',
icon: 'fail'
icon: 'none'
})
}
},
fail() {
wx.hideLoading()
wx.setStorageSync('commited', false)
wx.showToast({
title: '生成失败',
icon: 'fail'
icon: 'none'
})
}
})
},
// 获取详情
fetchDetail(brand = '', page = 1) {
fly.get(`mobiles?brand=${brand}&page=${page}`)
fly
.get(`mobiles?brand=${brand}&page=${page}`)
.then(res => {
page++
this._cache[brand].page = page
......@@ -266,12 +371,18 @@ export default {
if (res.data.total_page <= page) {
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._cache[brand].list = this.itemList
})
.catch(res => {
console.log('warning')
// console.log("warning");
})
},
// 是否有，有的话，激活
......@@ -294,14 +405,48 @@ export default {
},
// 根据条件获取手机列表
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 => {
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 = '') {
console.log(this.brand, brand, this._cache)
// console.log(this.brand, brand, this._cache);
// 如果当前的已有list，就直接切换
this.searchValue = ''
this.searchPage = 1
this.searchLoaded = false
if (this._cache[brand].list) {
this._cache[brand].list = this._cache[brand].list.map(item => {
if (this._cache[brand].activeList.includes(item.id)) {
......@@ -326,39 +471,48 @@ export default {
},
handleItemCell(option) {
// 使用一个activeList去维护激活的id
console.warn('click')
console.log(option)
option.is_active = !option.is_active
const num = option.is_active ? 1 : -1
// 如果brands有多个分类，做排除自身意外的激活或移除操作
if (option.brands.length > 1) {
if (option.brands.length > 0) {
if (num > -1) {
// 过滤出不属于当前brand的brands
option.brands.filter(item => item !== this.brand).forEach(brand => {
option.brands
// .filter(item => item !== this.brand)
.forEach(brand => {
if (!this._cache[brand].activeList.includes(option.id)) {
this._cache[brand].activeList.push(option.id)
const brandIndex = this.brandList.findIndex(item => item.name === brand)
const temp = this.brandList[brandIndex]
temp.total += num
this.brandList.splice(brandIndex, 1, temp)
const brandIndex = this.brandList.findIndex(
item => item.name === brand
)
this.brandList[brandIndex].total += num
}
})
} else {
option.brands.filter(item => item !== this.brand).forEach(brand => {
const index = this._cache[brand].activeList.findIndex(id => id === option.id)
option.brands
// .filter(item => item !== this.brand)
.forEach(brand => {
const index = this._cache[brand].activeList.findIndex(
id => id === option.id
)
if (index > -1) {
// 移除
this._cache[brand].activeList.splice(index, 1)
const brandIndex = this.brandList.findIndex(item => item.name === brand)
const temp = this.brandList[brandIndex]
temp.total += num
this.brandList.splice(brandIndex, 1, temp)
const brandIndex = this.brandList.findIndex(
item => item.name === brand
)
this.brandList[brandIndex].total += num
}
})
}
}
// 当前brand的操作
this._cache[this.brand].list = this.itemList
const index = this._cache[this.brand].activeList.findIndex(id => id === option.id)
// this._cache[this.brand].list = this.itemList
const index = this._cache[this.brand].activeList.findIndex(
id => id === option.id
)
if (num > -1) {
if (index === -1) {
this._cache[this.brand].activeList.push(option.id)
......@@ -368,8 +522,7 @@ export default {
this._cache[this.brand].activeList.splice(index, 1)
}
}
this.itemList = this.itemList.slice()
this.brandList[this.p_index].total += num
// this.itemList = this.itemList.slice()
}
}
}
......@@ -382,6 +535,7 @@ export default {
height: 100vh;
display: flex;
flex-flow: column nowrap;
padding-top: 160rpx;
.search-container {
position: relative;
......@@ -416,8 +570,8 @@ export default {
width: 100%;
height: 80rpx;
color: #d9d9d9;
font-size: 30rpx;;
padding: 0 40rpx
font-size: 30rpx;
padding: 0 40rpx;
}
}
.scroll-left {
......@@ -454,7 +608,7 @@ export default {
width: 100%;
height: 100%;
top: 0;
left: 0;;
left: 0;
}
.item-img {
position: absolute;
......@@ -536,6 +690,23 @@ export default {
width: 700rpx;
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 {
width: 489rpx;
height: 123rpx;
......
src/pages/index/index.vue
<template>
<div class="index-page">
<img src="../../assets/img/index-bg.jpg" class="index-bg"/>
<div class="index-page" v-bind:style="{ paddingTop: isActive[0]+25*isActive[1] + 'rpx'}">
<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-start-button.jpg" class="index-start-button" @click="handleStart"/>
<!-- <navigator
v-if="config.more_fun && !config.more_fun.hide"
class="navigator"
path=""
target="miniProgram" open-type="navigate" :app-id="config.more_fun.appid" > -->
<img src="../../assets/img/index-start-button.jpg" class="index-start-button" @click="handleStart" />
<navigator v-if="config.more_fun && !config.more_fun.hide" class="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> -->
</navigator>
</div>
</template>
......@@ -19,45 +16,66 @@ export default {
computed: {
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 () {
console.log(this.$root.$mp.query, this.$root.$mp.appOptions, this.$root.$mp)
onLoad() {
// console.log(
// this.$root.$mp.query,
// this.$root.$mp.appOptions,
// this.$root.$mp
// );
},
onPageScroll () {
console.log('page is scroll')
onShow() {},
onPageScroll() {
// console.log('page is scroll')
},
beforeCreate () {
console.log('page is before create')
beforeCreate() {
// console.log('page is before create')
},
data () {
data() {
return {
userInfo: {}
}
},
components: {
},
components: {},
methods: {
handleStart() {
wx.setStorageSync('commited', false)
wx.navigateTo({
url: '/pages/counter/main'
})
},
handleMore() {
return false
wx.navigateToMiniProgram({
appId: this.config.more_fun.appid,
path: '',
success() {
console.log('打开成功')
// console.log("打开成功");
}
})
}
},
created () {
}
created() {},
mounted() {}
}
</script>
......@@ -69,6 +87,7 @@ export default {
background: #c9baa8;
text-align: center;
padding: 30rpx 0 0;
padding-top: 160rpx;
}
.index-bg {
position: absolute;
......@@ -96,4 +115,18 @@ export default {
height: 123rpx;
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>
src/pages/logs/index.vue
<template>
<div>
<img :src="path" class="log-bg"/>
<div class="log-page">
<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">
<ul class="list-container">
<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>
</li>
<li class="list-item"><img src="../../assets/img/ic_share.png" mode="widthFix"/><text class="text-share">生成分享图</text></li>
<li class="list-item" @tap="handleRepick"><img src="../../assets/img/re_sel.png" mode="widthFix"/></li>
<li class="list-item">
</li>
<li class="list-item">
</li>
</ul>
</div>
</div>
......@@ -20,35 +30,434 @@ export default {
onShareAppMessage() {
return {
title: '我的手机',
path: '/page/index/main'
path: '/page/index/main',
sytle: 'width: 300px; height: 200px;'
}
},
components: {
},
onLoad() {
},
components: {},
onLoad() {},
computed: {
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
}
},
methods: {
preventDefault(e) {
return false
},
handleRepick() {
console.log('return')
wx.navigateBack({
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 {
windowWidth: 0,
windowHeight: 0
}
},
created () {
created() {},
onShareAppMessage(res) {
return {
title: '从80年代到4G时代，你用过几款手机？',
path: '/pages/index/main',
imageUrl: global['log_path']
}
}
}
</script>
<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 {
position: fixed;
bottom: 0;
......@@ -56,15 +465,18 @@ export default {
width: 100%;
height: 180rpx;
background: rgba(#000, 0.7);
z-index: 100;
z-index: 1000;
}
.log-bg {
position: absolute;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
z-index: -1;
}
ul.list-container {
opacity: 0;
}
.list-container {
width: 100%;
......@@ -81,7 +493,7 @@ export default {
align-items: center;
padding: 20rpx 0;
font-size: 28rpx;
opacity: 0;
&:not(:last-child) {
border-right: 2rpx dashed #ddd1be;
}
......@@ -104,4 +516,19 @@ export default {
height: 100%;
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>
src/request.js
......@@ -11,8 +11,8 @@ function setAuthorization (header) {
Authorization = header
}
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/'
// add token
fly.interceptors.request.use((config, promise) => {
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