cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改轮播图卡顿的问题

Browse Source 
修改app上菜单栏尺寸过小的问题
This commit is contained in:
xuwenbo
2020-09-15 13:17:19 +08:00
parent 8a85f44ff6
commit cd4be74b4e
13 changed files with 5747 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
components/colorui/animation.css Normal file
View File

@ -0,0 +1,184 @@
/*
Animation 微动画
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
*/
/* css 滤镜 控制黑白底色gif的 */
.gif-black{
mix-blend-mode: screen;
}
.gif-white{
mix-blend-mode: multiply;
}
/* Animation css */
[class*=animation-] {
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: both
}
.animation-fade {
animation-name: fade;
animation-duration: .8s;
animation-timing-function: linear
}
.animation-scale-up {
animation-name: scale-up
}
.animation-scale-down {
animation-name: scale-down
}
.animation-slide-top {
animation-name: slide-top
}
.animation-slide-bottom {
animation-name: slide-bottom
}
.animation-slide-left {
animation-name: slide-left
}
.animation-slide-right {
animation-name: slide-right
}
.animation-shake {
animation-name: shake
}
.animation-reverse {
animation-direction: reverse
}
@keyframes fade {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes scale-up {
0% {
opacity: 0;
transform: scale(.2)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes scale-down {
0% {
opacity: 0;
transform: scale(1.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes slide-top {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0)
}
10% {
transform: translateX(-9px)
}
20% {
transform: translateX(8px)
}
30% {
transform: translateX(-7px)
}
40% {
transform: translateX(6px)
}
50% {
transform: translateX(-5px)
}
60% {
transform: translateX(4px)
}
70% {
transform: translateX(-3px)
}
80% {
transform: translateX(2px)
}
90% {
transform: translateX(-1px)
}
}
@keyframes slide-left {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slide-right {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}

65
components/colorui/components/cu-custom.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<view>
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
<view class="action" @tap="BackPage" v-if="isBack">
<text class="cuIcon-back"></text>
<slot name="backText"></slot>
</view>
<view class="content" :style="[{top:StatusBar + 'px'}]">
<slot name="content"></slot>
</view>
<slot name="right"></slot>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
StatusBar: this.StatusBar,
CustomBar: this.CustomBar
};
},
name: 'cu-custom',
computed: {
style() {
var StatusBar= this.StatusBar;
var CustomBar= this.CustomBar;
var bgImage = this.bgImage;
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
if (this.bgImage) {
style = `${style}background-image:url(${bgImage});`;
}
return style
}
},
props: {
bgColor: {
type: String,
default: ''
},
isBack: {
type: [Boolean, String],
default: false
},
bgImage: {
type: String,
default: ''
},
},
methods: {
BackPage() {
uni.navigateBack({
delta: 1
});
}
}
}
</script>
<style>
</style>

1226
components/colorui/icon.css Normal file
View File

File diff suppressed because one or more lines are too long

4040
components/colorui/main.css Normal file
View File

File diff suppressed because it is too large Load Diff

3
config/index.js
View File

@ -1,5 +1,4 @@
// export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
export const VUE_APP_API_URL = 'http://127.0.0.1:8008/api';
export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
export const VUE_APP_RESOURCES_URL = 'https://wx.yixiang.co/static';

14
libs/wechat.js
View File

@ -148,7 +148,8 @@ export function auth(code) {
console.log('获取微信授权')
return new Promise((resolve, reject) => {
let loginType = cookie.get(LOGINTYPE);
wechatAuth(code, cookie.get("spread"), loginType)
let spread = cookie.get(spread);
wechatAuth(code, spread, loginType)
.then(({ data }) => {
console.log(data)
const expires_time = dayjs(data.expires_time);
@ -172,8 +173,15 @@ export function toAuth() {
}
function getAuthUrl(appId) {
const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`);
// const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`encodeURIComponent(encodeURIComponent(cookie.has(BACK_URL)? cookie.get(BACK_URL): location.pathname + location.search)));
// const redirect_uri = encodeURIComponent(window.location.href);
// const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`);
// #ifdef H5
// #endif
const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index?path=${encodeURIComponent(window.location.href)}`);
// const redirect_uri = encodeURIComponent(`${window.location.origin}${window.location.pathname}`)
// const redirect_uri = encodeURIComponent(`${location.origin}`)
cookie.remove(BACK_URL);

30
main.js
View File

@ -6,7 +6,7 @@ import store from "./store";
import schema from "async-validator";
import dialog from "./utils/dialog";
import cookie from "@/utils/store/cookie";
import cuCustom from '@/components/colorui/components/cu-custom.vue'
// // import "@/assets/iconfont/iconfont";
// import "@/assets/iconfont/iconfont.css";
// // import "@/assets/js/media_750";
@ -23,13 +23,14 @@ import cookie from "@/utils/store/cookie";
import {
parseRoute,
_router
_router,
parseQuery
} from "@/utils";
import {
VUE_APP_RESOURCES_URL,
VUE_APP_API_URL
} from "@/config";
Vue.component('cu-custom', cuCustom);
Vue.config.productionTip = false;
Vue.config.devtools = process.env.NODE_ENV !== "production";
@ -80,7 +81,7 @@ Object.defineProperty(Vue.prototype, '$yroute', {
Vue.prototype.$VUE_APP_RESOURCES_URL = VUE_APP_RESOURCES_URL
Vue.prototype.$VUE_APP_API_URL = VUE_APP_API_URL
Vue.component('cu-custom', cuCustom);
// #ifdef H5
// H5编译的代码
@ -102,6 +103,27 @@ import {
import { isWeixin } from '@/utils'
const CACHE_KEY = "clear_0.0.1";
if (!cookie.has(CACHE_KEY)) {
cookie.clearAll();
cookie.set(CACHE_KEY, 1);
}
var urlSpread = parseQuery()["spread"];
if (urlSpread !== undefined) {
var spread = cookie.get("spread");
urlSpread = parseInt(urlSpread);
if (!Number.isNaN(urlSpread) && spread !== urlSpread) {
cookie.set("spread", urlSpread || 0);
} else if (spread === 0 || typeof spread !== "number") {
cookie.set("spread", urlSpread || 0);
}
}
// 判断是否是微信浏览器
if (isWeixin()) {
Vue.prototype.$deviceType = 'weixin'

27
pages/Loading/index.vue
View File

@ -1,12 +1,7 @@
<template>
<view class="lottie-bg">
<view id="lottie">
<image
src="../../static/images/live-logo.gif"
rel="preload"
mode="widthFix"
style="width: 100%;"
/>
<image src="../../static/images/live-logo.gif" rel="preload" mode="widthFix" style="width: 100%;" />
</view>
</view>
</template>
@ -40,15 +35,30 @@ export default {
} else if (spread === 0 || typeof spread !== "number") {
cookie.set("spread", urlSpread || 0);
}
}
if (this.$store.getters.token) {
this.toLaunch();
return;
}
cookie.get("spread");
// cookie.get("spread");
// if (this.$deviceType == "weixin") {
// let path = parseQuery().path
// console.log(this)
// if (path) {
// this.$yrouter.push({
// path
// });
// } else {
// this.$yrouter.switchTab({
// path: "/pages/home/index"
// });
// }
// return
// }
// this.toLaunch();
if (this.$deviceType == "app" || this.$deviceType == "h5") {
// this.toLaunch();
this.$yrouter.switchTab({
path: "/pages/home/index"
});
@ -59,6 +69,7 @@ export default {
path: "/pages/home/index"
});
});
}
},
methods: {
...mapActions(["changeAuthorization", "setUserInfo"]),

47
pages/home/components/Banner.vue
View File

@ -2,14 +2,14 @@
<view class="banner-swiper-box">
<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
<swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true">
<swiper-item v-for="(item, index) in list" :key="index" class="carousel-item" @tap="routerTo(item.path)">
<swiper-item v-for="(item, index) in detail" :key="index" class="carousel-item" >
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load>
</image>
</swiper-item>
</swiper>
<view class="banner-swiper-dots">
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'"
v-for="(dot, index) in list.length" :key="index"></text>
v-for="(dot, index) in detail.length" :key="index"></text>
</view>
</view>
</template>
@ -22,43 +22,28 @@
return {
swiperCurrent: 0, //轮播下标
webviewId: 0,
bgcolorAry: [],
list: []
};
},
props: {
banner: {
detail: {
type: Array,
default: []
}
},
created: async function () {
await this.doColorThief();
},
async mounted() {
},
computed: {},
watch: {
banner(next) {
this.list = next;
this.doColorThief()
}
},
methods: {
async doColorThief() {
let that = this;
// 获取轮播图
let item = this.list[this.swiperCurrent];
if(!item){
return
}
let item = this.detail[this.swiperCurrent];
// 获取轮播图颜色
let bgcolor = this.bgcolorAry[this.swiperCurrent];
let bgcolor = item.bgcolor;
// 颜色不存在
if (!bgcolor) {
let ctx = uni.createCanvasContext('colorThief', that.$scope);
if (bgcolor === '') {
let ctx = uni.createCanvasContext('colorThief', that);
if (0 === that.webviewId || ctx.webviewId === that.webviewId) {
that.webviewId = ctx.webviewId;
uni.getImageInfo({
@ -73,20 +58,16 @@
width: parseInt(image.width),
height: parseInt(image.height),
success(res) {
let newBgcolor = colorThief(res.data)
let bgcolor = colorThief(res.data)
.color()
.getHex();
that.$set(that.bgcolorAry, that
.swiperCurrent,
newBgcolor);
that.$emit('getbgcolor', newBgcolor);
},
fail: function (error) {
that.$set(item, 'bgcolor', bgcolor);
that.$emit('getbgcolor', bgcolor);
}
}, that.$scope);
});
},
fail: function (error) {
that
);
});
}
});
}
@ -98,6 +79,8 @@
swiperChange(e) {
this.swiperCurrent = e.detail.current;
this.doColorThief();
let bgcolor = this.detail[this.swiperCurrent].bgcolor;
this.$emit('getbgcolor', bgcolor);
},
// 路由跳转

1
pages/home/components/Live.vue
View File

@ -128,7 +128,6 @@
// }
},
goRoom(live) {
console.log(live.roomId,9999)
wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.roomId}`
});

35
pages/home/index.vue
View File

@ -1,17 +1,25 @@
<template>
<view class="index">
<!-- 导航栏 -->
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
<view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">
<view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">
<view class="action">
<text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>
</view>
<view class="content" :style="[{top:StatusBar + 'px'}]">
<!-- <view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">-->
<!-- <view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">-->
<!-- <view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">-->
<!-- <view class="action">-->
<!-- <text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>-->
<!-- </view>-->
<!-- <view class="content" :style="[{top:StatusBar + 'px'}]">-->
</view>
</view>
</view>
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
<cu-custom :isBack="true" >
<block slot="backText">
<text class="nav-title shopro-selector-rect">{{ 'YSHOP商城' }}</text>
</block>
</cu-custom>
</view>
<view class="header header-search acea-row row-center-wrapper" :style="{ background: bgcolor }">
<view @click="goGoodSearch()" class="search acea-row row-middle">
@ -22,7 +30,7 @@
<image src="@/static/images/qr.png" />
</view>
</view>
<Banner :banner="banner" @getbgcolor="getbgcolor"></Banner>
<Banner :detail="banner" v-if="banner.length>0" @getbgcolor="getbgcolor"></Banner>
<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true"
:text="singNew.info"></uni-notice-bar>
<view class="content_box home_content_box">
@ -215,6 +223,7 @@
});
getHomeData().then(res => {
that.logoUrl = res.data.logoUrl;
res.data.banner.map(item => item.bgcolor = '')
that.$set(that, 'banner', res.data.banner);
that.$set(that, 'menus', res.data.menus);
that.$set(that, 'roll', res.data.roll);
@ -381,9 +390,7 @@
}
.head_box {
position: relative;
z-index: 10;
width: 100%;
width: 750rpx;
// background: #fff;
transition: all linear 0.3s;

57
utils/index.js
View File

@ -82,18 +82,49 @@ export function isType(arg, type) {
}
export function isWeixin() {
if(navigator&&navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1){
if (navigator && navigator.userAgent && navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) {
return true
}
return false
}
export function parseQuery() {
// #ifdef H5
let res = {};
const query = (location.href.split("?")[1] || "")
.trim()
.replace(/^(\?|#|&)/, "");
if (!query) {
return res;
}
query.split("&").forEach(param => {
const parts = param.replace(/\+/g, " ").split("=");
const key = decodeURIComponent(parts.shift());
const val = parts.length > 0 ? decodeURIComponent(parts.join("=")) : null;
if (res[key] === undefined) {
res[key] = val;
} else if (Array.isArray(res[key])) {
res[key].push(val);
} else {
res[key] = [res[key], val];
}
});
// #endif
// #ifdef MP-WEIXIN
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options
return options
res = currentPage.options //如果要获取url中所带的参数可以查看options
// #endif
return res
}
/*获取当前页url*/
@ -110,7 +141,6 @@ export function getCurrentPageUrlWithArgs() {
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options
//拼接url的参数
var urlWithArgs = url + '?'
for (var key in options) {
@ -118,7 +148,6 @@ export function getCurrentPageUrlWithArgs() {
urlWithArgs += key + '=' + value + '&'
}
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
return urlWithArgs
}
@ -505,6 +534,7 @@ export function routerPermissions(url, type) {
if (!path) {
path = '/' + getCurrentPageUrlWithArgs()
}
console.log(Vue.prototype.$deviceType)
if (Vue.prototype.$deviceType == 'routine') {
console.log('————————')
console.log('当前是微信小程序，开始处理小程序登录方法')
@ -577,6 +607,13 @@ export function routerPermissions(url, type) {
})
cookie.set('redirect', path)
})
// } else if (Vue.prototype.$deviceType == 'weixin') {
// wechat().then(() => oAuth());
// if (!type) {
// push({
// path: url,
// })
// }
} else {
// 如果不是小程序跳转到登录页
console.log('当前无法自动登录，开始处理登录方法')
@ -680,11 +717,10 @@ export function handleQrCode() {
}
export function handleUrlParam(path) {
console.log(path)
var url = path.split("?")[1]; //获取url中"?"符后的字串
var theRequest = new Object();
if(path.includes("?")){
var url = path.split("?")[1]; //获取url中"?"符后的字串
console.log(url)
let strs = url.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
@ -820,10 +856,8 @@ export const handleLoginFailure = () => {
console.log('————————')
store.commit("updateAuthorizationPage", true);
let path = '/' + getCurrentPageUrlWithArgs()
console.log("getCurrentPageUrl",getCurrentPageUrl());
//判断小程序转发分享商品详情进来的
if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleUrlParam(path) ) {
debugger;
if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleUrlParam(path) && !handleQrCode()) {
console.log('————————')
console.log('判断小程序转发分享商品详情进来的')
console.log(' handleUrlParam()', handleUrlParam(path))
@ -895,7 +929,7 @@ export const handleLoginFailure = () => {
}
// 判断是不是转发分享的砍价海报进来的
if (getCurrentPageUrl() == 'pages/activity/DargainDetails/index' && handleUrlParam(path)) {
if (getCurrentPageUrl() == 'pages/activity/DargainDetails/index' && handleUrlParam(path) && !handleQrCode()) {
console.log('————————')
console.log('判断是不是转发分享的砍价海报进来的')
console.log('————————')
@ -928,7 +962,6 @@ export const handleLoginFailure = () => {
if(!url){
url = handleUrlParam(path);
}
console.log(url)
if (url) {
path = parseUrl({
path: `/${getCurrentPageUrl()}`,

1
utils/store/cookie.js
View File

@ -37,6 +37,7 @@ function _has(key) {
return
}
let value = uni.getStorageSync(key)
console.log(key)
if (value) {
return true
}