Skip to content

M
myphone
Commit 66e68b40 by 尹烁恒
Options

完成开发

parent 1d92be17
Showing with 594 additions and 33 deletions
src/pages/counter/index.vue
......@@ -41,6 +41,7 @@
</div>
</div>
<div class="submit-field">
<img src="../../assets/img/line.png" class="line"/>
<button class="button-submit" open-type="getUserInfo" @getuserinfo="handleGetUserInfo"></button>
</div>
</div>
......@@ -62,7 +63,7 @@ export default {
// 性能触发.所有的list只存key
return {
_cache: {},
p_index: 1,
p_index: 0,
itemList: [],
brandList: [],
hasFoucs: false,
......@@ -75,20 +76,32 @@ export default {
this.getConfig()
this.login()
},
onLoad() {
},
methods: {
initData() {
this._cache = {}
},
resetData() {
this.p_index = 0
this.hasFoucs = false
this.searchValue = ''
this.searchPage = 1
this.getConfig()
},
login() {
const that = this
wx.login({
success(res) {
that._jscode = res.code
wx.setStorageSync('hasLogin', true)
},
fail() {
that.login()
}
return new Promise((resolve, reject) => {
wx.login({
success(res) {
that._jscode = res.code
wx.setStorageSync('hasLogin', true)
resolve()
},
fail() {
resolve(that.login())
}
})
})
},
handleInputFoucs() {
......@@ -107,14 +120,15 @@ export default {
if (obj.loaded) return
this.fetchDetail(this.brand, obj.page)
},
handleGetUserInfo(e) {
async handleGetUserInfo(e) {
console.log(e)
if (e.target.errMsg === 'getUserInfo:ok') {
if (wx.getStorageSync('hasLogin')) {
this.handleSubmit()
return
this.getUserInfo(e.target)
} else {
await this.login()
this.getUserInfo(e.target)
}
this.getUserInfo(e.target)
} else {
wx.showModal({
title: '提示',
......@@ -130,7 +144,7 @@ export default {
js_code: this._jscode
})
.then(res => {
console.log(res)
console.log(res.data.token, 'token')
setAuthorization(res.data.token)
// 调用提交接口
this.handleSubmit()
......@@ -156,7 +170,7 @@ export default {
this._cache[name].activeList = []
}
console.log(this._cache)
this.fetchDetail(this.brandList[1].name)
this.fetchDetail(this.brandList[0].name)
})
.catch(res => {
console.log(res)
......@@ -175,13 +189,60 @@ export default {
array = array.concat(...phoneArray)
}
})
console.log(array, 'submit array')
console.log(JSON.stringify(array), 'json stringify array')
this.initData()
wx.redirectTo({
url: '/pages/logs/main'
fly.post('commit', {
mobiles: JSON.stringify(array)
})
.then(async res => {
console.log('提交之后的数据', res)
await this.fetchImage(res.data)
// 重置数据
this.resetData()
})
.catch(e => {
console.log('异常')
})
},
fetchImage(data) {
// 精简数据
wx.showLoading({
title: '加载中',
mask: true
})
wx.request({
url: 'https://test-api.wxagame.com/game-mobile/api/v1/image',
method: 'POST',
header: {
'content-type': 'application/octet-stream'
},
data: {
data: JSON.stringify(data)
},
success: function (res) {
var data = res.data
console.log(res.statusCode)
if (res.statusCode === 200) {
store.commit('setImage', 'data:image/png;base64,' + data)
wx.hideLoading()
wx.redirectTo({
url: `/pages/logs/main`
})
} else {
wx.hideLoading()
wx.showToast({
title: '生成失败',
icon: 'fail'
})
}
},
fail() {
wx.hideLoading()
wx.showToast({
title: '生成失败',
icon: 'fail'
})
}
})
this.initData()
},
// 获取详情
fetchDetail(brand = '', page = 1) {
......@@ -251,17 +312,13 @@ export default {
this.fetchDetail(brand)
this.p_index = index
},
// 点击右侧
handleItemCell(option) {
// 使用一个activeList去维护激活的id
console.log(option)
// 此时显然没有触发mutated，itemList的引用没变。not mutated，就不会update更不会re-render
option.is_active = !option.is_active
const status = option.is_active
const num = status ? 1 : -1
const num = option.is_active ? 1 : -1
// 如果brands有多个分类，做排除自身意外的激活或移除操作
if (option.brands.length > 1) {
// 如果包括·经典·,经典的total需要去响应
// num移入外层判断，避免在forEach过程判断
if (num > -1) {
// 过滤出不属于当前brand的brands
option.brands.filter(item => item !== this.brand).forEach(brand => {
......@@ -459,6 +516,13 @@ export default {
}
.submit-field {
flex: 0 0 200rpx;
text-align: center;
}
.line {
position: relative;
margin: 0 auto;
width: 700rpx;
height: 6rpx;
}
.button-submit {
width: 489rpx;
......
src/pages/counter/main.js
......@@ -7,7 +7,6 @@ app.$mount()
// 这里才会导出page.json
export default {
config: {
navigationBarTitleText: '布里吉',
disableScroll: true
}
}
src/pages/index/main.js
......@@ -7,7 +7,6 @@ app.$mount()
// 这里才会导出page.json
export default {
config: {
navigationBarTitleText: '布里吉',
disableScroll: true
}
}
src/pages/logs/index.vue
<template>
<div>
<img src="../../assets/img/log-bg.jpg" class="log-bg"/>
<img :src="path" class="log-bg"/>
<div class="fixed">
<ul class="list-container">
<li class="list-item">
......@@ -15,7 +15,7 @@
</template>
<script>
import store from '@/store'
export default {
onShareAppMessage() {
return {
......@@ -25,6 +25,13 @@ export default {
},
components: {
},
onLoad() {
},
computed: {
path() {
return store.state.indexPage.path
}
},
data () {
return {
}
......
src/pages/logs/main.js
......@@ -3,3 +3,9 @@ import App from './index'
const app = new Vue(App)
app.$mount()
export default {
config: {
disableScroll: true
}
}
src/request.js
......@@ -16,6 +16,7 @@ fly.config.baseURL = 'https://test-api.wxagame.com/game-mobile/api/v1/'
// add token
fly.interceptors.request.use((config, promise) => {
log(config, 'request config')
console.log(getAuthorization())
if (getAuthorization()) {
config.headers['Authorization'] = getAuthorization()
}
......
src/store.js
......@@ -23,11 +23,11 @@ const counterModule = {
const logsModule = {
state: {
log: 10
path: ''
},
mutations: {
increment (state) {
state.log += 1
setImage (state, payload) {
state.path = payload
}
}
}
......
static.zip 0 → 100644
File added
static/index-bg.jpg 100644 → 100755
static/index-bg.jpg

571 KB | W: | H:

static/index-bg.jpg

242 KB | W: | H:

static/index-bg.jpg
static/index-bg.jpg
static/index-bg.jpg
static/index-bg.jpg
  • 2-up
  • Swipe
  • Onion skin
static/test.html 0 → 100755
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>分享图</title>
<style>
html {
/* overflow: hidden; */
height: 100%;
}
body {
padding: 0;
margin: 0;
width: 750px;
box-sizing: border-box;
min-height: 1218px;
height: 100%;
}
div {
box-sizing: border-box;
}
ul,
li {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0;
}
#app {
position: relative;
width: 750px;
height: 100%;
margin: 0 auto;
background: url('./index-bg.jpg') no-repeat left top;
background-size: cover;
background-color: #CBBDAB;
text-align: center;
padding: 11px 0 0 0;
box-sizing: border-box;
}
.index-bg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.bg-container {
position: relative;
width: 680px;
height: 376px;
box-sizing: border-box;
background: url('./bg.jpg') no-repeat center center;
background-size: contain;
margin: 0 auto;
}
.avatar {
position: absolute;
width: 64px;
height: 64px;
border-radius: 50%;
top: 44px;
left: 196px;
}
.bg-text {
position: absolute;
color: #FFA100;
font-size: 60px;
display: block;
}
.text1 {
width: 80px;
top: 115px;
left: 125px;
}
.text2 {
width: 80px;
top: 115px;
left: 390px;
}
.text3 {
width: 200px;
top: 190px;
left: 260px;
}
.text4 {
width: 180px;
top: 263px;
left: 267px;
font-size: 58px;
}
/* 主要内容 */
.main {
width: 80%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: 20px auto;
}
.box-container {
width: 270px;
height: 270px;
}
.box-container:nth-child(1) {
padding: 0 20px 20px 0;
border-bottom: 2px solid #A39688;
border-right: 2px solid #A39688;
}
.box-container:nth-child(2) {
padding: 0 0 20px 20px;
border-bottom: 2px solid #A39688;
}
.box-container:nth-child(3) {
padding: 20px 20px 0 0;
border-right: 2px solid #A39688;
}
.box-container:nth-child(4) {
padding: 20px 0 0 20px;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 250px;
line-height: 250px;
text-align: center;
border: 2px dashed #847154;
border-radius: 8px;
overflow: hidden;
}
.block3 {
width: 100%;
height: 100%;
display: flex;
/* display: none; */
flex-flow: row wrap;
}
.block3 li {
width: 50%;
height: 50%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
.block3 li img{
width: 100%;
}
.block3 li:nth-child(1) {
border-right: 2px solid #BCAD9A;
border-bottom: 2px solid #BCAD9A;
}
.block3 li:nth-child(2) {
border-bottom: 2px solid #BCAD9A;
}
.block3 li:nth-child(3) {
border-right: 2px solid #BCAD9A;
}
.block2 {
display: block;
width: 100%;
height: 100%;
display: flex;
flex-flow: row nowrap;
}
.block2 li {
width: 50%;
height: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
.block2 li img{
width: 100%;
}
.block2 li:nth-child(1) {
border-right: 2px solid #BCAD9A;
}
.cover {
position: absolute;
display: flex;
flex-flow: row wrap;
width: 250px;
height: 120px;
background: #312320;
color: #D8CCB7;
font-size: 28px;
border-radius: 10px;
justify-content: center;
align-items: center;
opacity: 0.7;
}
.cover li {
width: 50%;
height: 50%;
line-height: 60px;
}
.none {
width: 91px;
height: 90px;
}
#footer {
margin: 60px 0 0 30px;
}
.select {
width: 444px;
display: flex;
flex-flow: row wrap;
font-size: 24px;
color: #312320;
}
.item {
margin: 0 10px 0;
height: 33px;
line-height: 33px;
}
</style>
<!-- <script type="text/javascript" src="qrcode.min.js"></script> -->
</head>
<body>
<div id="app">
<div class="bg-container">
<img src="./avatar.png" alt="" class="avatar" />
<span class="bg-text text1">80</span>
<span class="bg-text text2">4G</span>
<span class="bg-text text3">99999</span>
<span class="bg-text text4">90%</span>
</div>
<main class="main">
<div class="box-container">
<div class="box">
<!-- <ul class="block3">
<li>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> -->
<!-- <ul class="block2">
<li>1</li>
<li>2</li>
</ul> -->
<img src="./none.jpg" class="none" />
</div>
</div>
<div class="box-container">
<div class="box"></div>
</div>
<div class="box-container">
<div class="box"></div>
</div>
<div class="box-container">
<div class="box"></div>
</div>
<ul class="cover">
<li>80年代</li>
<li>90年代</li>
<li>3G年代</li>
<li>4G年代</li>
</ul>
</main>
<!-- footer -->
<footer id="footer">
<ul class="select">
<!-- <li class="item">摩托罗拉3200</li>
<li class="item">摩托罗拉3200</li>
<li class="item">摩托罗拉3200</li>
<li class="item">摩托罗拉3200</li> -->
</ul>
</footer>
</div>
</body>
<script>
var hasLoadFinish = false;
var viewHeight = 0;
var pageData = '';
let loadNum = 0
let imgLoaded = false
//使用测试数据
function useTestData() {
const _cache = {
avatar: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83erUD5iaefQ4F9frGKTEy8iamavHwd5gQle2Mp8aiaxqWgDfGwYB0w6ADZ3GWNayH2a13ibv92VYXJk2XQ/132',
end: '4G',
money: 998,
percent: "99.9%",
start: '80',
// 80, 90, 3g, 4g, image path
brands: [["http://img.game.wxagame.com/mobile_pngs/5756.png", "http://img.game.wxagame.com/mobile_pngs/5756.png", "http://img.game.wxagame.com/mobile_pngs/5756.png"], ["http://img.game.wxagame.com/mobile_pngs/5758.png"], ["http://img.game.wxagame.com/mobile_pngs/3079.png", "http://img.game.wxagame.com/mobile_pngs/3079.png"], []],
names: ['小米M1', '诺基亚5200', '123', '诺基亚5200诺基亚5200', '诺基亚5200']
}
// 提交这个stringfy给后台，然后等待，生成数据。然后显示图片即可
console.log(JSON.stringify(_cache))
// _cacheString = '{"avatar":"https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83erUD5iaefQ4F9frGKTEy8iamavHwd5gQle2Mp8aiaxqWgDfGwYB0w6ADZ3GWNayH2a13ibv92VYXJk2XQ/132","end":"4G","money":998,"percent":"99%","start":"80","brands":[["http://img.game.wxagame.com/mobile_pngs/5756.png"],["http://img.game.wxagame.com/mobile_pngs/5758.png"],["http://img.game.wxagame.com/mobile_pngs/3079.png","http://img.game.wxagame.com/mobile_pngs/3079.png"],[]],"names":["小米M1","诺基亚5200"]}'
document.querySelector('.text1').innerHTML = `${_cache.start}`
document.querySelector('.text2').innerHTML = `${_cache.end}`
document.querySelector('.text3').innerHTML = `${_cache.money}`
document.querySelector('.text4').innerHTML = `${_cache.percent}`
document.querySelector('.avatar').src = `${_cache.avatar}`
const boxList = document.querySelectorAll('.box')
// 做转换
_cache.brands.forEach((array, index) => {
boxList[index].innerHTML = transform(array)
})
const itemList = document.querySelector('.select')
itemList.innerHTML = `${_cache.names.map(name => `<li class="item">${name}1</li>`).join('')}`
}
// 做转换
function transform(array = []) {
const length = array.length
if (length === 0) {
return `<img src="./none.jpg" class="none" />`
}
if (length === 1) {
return `<img src="${array[0]}" />`
}
if (length === 2) {
return `<ul class="block2">
${array.map(path => `<li><img src="${path}"/></li>`).join('')}
</ul>`
}
if (length === 3 || length === 4) {
return `<ul class="block3">
${array.map(path => `<li><img src="${path}"/></li>`).join('')}
</ul>`
}
if (length > 4) {
return `<ul class="block3">
${array.slice(0, 4).map(path => `<li><img src="${path}"/></li>`).join('')}
</ul>`
}
}
//获取url中的参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
//console.log(query)
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
// 富文本安全转换
function jsStr2html(str) {
return str.replace(/[<>&"]/g, function (c) { return { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }[c]; }).replace(/\r?\n/g, "<br/>").replace(/\s/g, "&nbsp");
}
window.ready = function () {
console.log('ready', new Date().getTime())
}
window.onload = function () {
console.log('onload', new Date().getTime())
//多加载一张图片
//var Img = new Image();
//Img.onload = function ()
//{
// setTimeout(function (){
// hasLoadFinish = true;
// },5)
// console.log(Img.complete)
//}
//Img.src = document.getElementById('bg_img').src;
//console.log(Img.src)
//console.log(document.readyState)
// new QRCode(document.getElementById("qrcode"), {
// text: "https://www.baidu.com",
// width: 140,
// height: 140,
// colorDark: "#000000",
// colorLight: "#ffffff",
// correctLevel: QRCode.CorrectLevel.H
// });
viewHeight = document.body.scrollHeight; //真实可见的高度
console.log('document.body.scrollHeight', viewHeight) //真实可见的高度
//console.log('document.documentElement.scrollHeight',document.documentElement.scrollHeight)
//console.log('document.body.offsetHeight',document.body.offsetHeight)
//console.log('document.documentElement.offsetHeight',document.documentElement.offsetHeight)
//console.log('document.body.clientHeight',document.body.clientHeight)
//console.log('document.documentElement.clientHeight',document.documentElement.clientHeight)
//useTestData(); //使用测试数据来调试
//pageData = '{"vopWords":"</div>语 \\n🙄音\',\\\"{\\\"}口令内容\\n1","testVal":"测试内容1","avatar":"https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eotKwbb3Y592sta7umR8RbXiaq47CnvswOCeXqTUO5ribxicictmxmT3CkAiaMs0ayuMcVDoFtic1YRFhPA/0"}'; //使用测试数据来调试
// let pageJsonData = JSON.parse(pageData)
// console.log(pageJsonData)
// if (pageJsonData) {
// document.getElementById('vopWords').innerHTML = jsStr2html(pageJsonData.vopWords);
// document.getElementById('testVal').innerHTML = pageJsonData.testVal || '';
// document.getElementById('avatar').src = pageJsonData.avatar
// }
// hasLoadFinish = true;
useTestData()
const length = document.querySelectorAll('img').length
Array.from(document.querySelectorAll('img'))
.forEach(img => {
img.addEventListener('load', function() {
loadNum++
if (loadNum >= length) {
imgLoaded = true
}
console.log(loadNum, imgLoaded)
}, false)
})
checkLoadFinish()
}
//检查是否完成，返回真实可见的高度，为0时则表示未完成加载
function checkLoadFinish() {
// console.log(imgLoaded)
if (!imgLoaded) {
checkLoadFinish()
}
if (!hasLoadFinish) {
return 0;
}
if (!document.readyState == "complete") {
return 0;
}
if (!imgLoaded) {
return 0;
}
return viewHeight;
}
</script>
</html>
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