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

优化模块名称

Browse Source
This commit is contained in:
Gaoxs
2020-09-17 10:22:51 +08:00
parent 4d9486b484
commit 99fcfdbc5b
3 changed files with 148 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
components/colorui/components/cu-custom.vue
View File

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

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

@ -43,34 +43,36 @@
let bgcolor = item.bgcolor; let bgcolor = item.bgcolor;
// 颜色不存在 // 颜色不存在
if (bgcolor === '') { if (bgcolor === '') {
let ctx = uni.createCanvasContext('colorThief', that); // let ctx = uni.createCanvasContext('colorThief', that);
if (0 === that.webviewId || ctx.webviewId === that.webviewId) { // if (0 === that.webviewId || ctx.webviewId === that.webviewId) {
that.webviewId = ctx.webviewId; // that.webviewId = ctx.webviewId;
uni.getImageInfo({ // uni.getImageInfo({
src: item.pic, // src: item.pic,
success: function (image) { // success: function (image) {
ctx.drawImage(image.path, 0, 0, image.width, image.height); // ctx.drawImage(image.path, 0, 0, image.width, image.height);
ctx.draw(true, function (e) { // ctx.draw(true, function (e) {
uni.canvasGetImageData({ // uni.canvasGetImageData({
canvasId: 'colorThief', // canvasId: 'colorThief',
x: 0, // x: 0,
y: 0, // y: 0,
width: parseInt(image.width), // width: parseInt(image.width),
height: parseInt(image.height), // height: parseInt(image.height),
success(res) { // success(res) {
let bgcolor = colorThief(res.data) // let bgcolor = colorThief(res.data)
.color() // .color()
.getHex(); // .getHex();
that.$set(item, 'bgcolor', bgcolor); // that.$set(item, 'bgcolor', bgcolor);
that.$emit('getbgcolor', bgcolor); // that.$emit('getbgcolor', bgcolor);
} // }
}, // },
that // that
); // );
}); // });
} // }
}); // });
} // }
that.$set(item, 'bgcolor', '#c40414');
that.$emit('getbgcolor', '#c40414');
} else { } else {
that.$set(item, 'bgcolor', bgcolor); that.$set(item, 'bgcolor', bgcolor);
that.$emit('getbgcolor', bgcolor); that.$emit('getbgcolor', bgcolor);

91
pages/home/index.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<view class="index"> <view class="index">
<!-- 导航栏 --> <!-- 导航栏 -->
<!-- <view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">--> <!-- <view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">-->
<!-- <view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">--> <!-- <view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">-->
<!-- <view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">--> <!-- <view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">-->
<!-- <view class="action">--> <!-- <view class="action">-->
<!-- <text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>--> <!-- <text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>-->
<!-- </view>--> <!-- </view>-->
<!-- <view class="content" :style="[{top:StatusBar + 'px'}]">--> <!-- <view class="content" :style="[{top:StatusBar + 'px'}]">-->
<!-- </view>--> <!-- </view>-->
<!-- </view>--> <!-- </view>-->
<!-- </view>--> <!-- </view>-->
<!-- </view>--> <!-- </view>-->
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }"> <view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
<cu-custom :isBack="true" > <cu-custom :isBack="true" :bgColor="bgcolor">
<block slot="backText"> <block slot="backText">
<text class="nav-title shopro-selector-rect">{{ 'YSHOP商城' }}</text> <text class="nav-title shopro-selector-rect">{{ 'YSHOP商城' }}</text>
</block> </block>
</cu-custom> </cu-custom>
</view> </view>
<view class="header header-search acea-row row-center-wrapper" :style="{ background: bgcolor }"> <view class="header header-search acea-row row-center-wrapper" :style="{ background: bgcolor }">
<view @click="goGoodSearch()" class="search acea-row row-middle"> <view @click="goGoodSearch()" class="search acea-row row-middle">
<text class="iconfont icon-xiazai5"></text> <text class="iconfont icon-xiazai5"></text>
@ -31,8 +31,7 @@
</view> </view>
</view> </view>
<Banner :detail="banner" v-if="banner.length>0" @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" <uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true" :text="singNew.info"></uni-notice-bar>
:text="singNew.info"></uni-notice-bar>
<view class="content_box home_content_box"> <view class="content_box home_content_box">
<!-- 菜单 --> <!-- 菜单 -->
<Menu :list="menus"></Menu> <Menu :list="menus"></Menu>
@ -112,7 +111,7 @@
Live Live
}, },
props: {}, props: {},
data: function () { data: function() {
return { return {
CustomBar: this.CustomBar, CustomBar: this.CustomBar,
StatusBar: this.StatusBar, StatusBar: this.StatusBar,
@ -215,7 +214,7 @@
}, },
}, },
onShow: function () { onShow: function() {
this.getLocation() this.getLocation()
let that = this; let that = this;
uni.showLoading({ uni.showLoading({
@ -243,14 +242,14 @@
}, },
methods: { methods: {
...mapActions(["getLocation"]), ...mapActions(["getLocation"]),
onShareTimeline: function () { onShareTimeline: function() {
return { return {
title: this.miniHomeRemark, title: this.miniHomeRemark,
imageUrl: this.miniHomeImg, imageUrl: this.miniHomeImg,
path: "pages/home/index?spread=" + uni.getStorageSync("uid") path: "pages/home/index?spread=" + uni.getStorageSync("uid")
} }
}, },
onShareAppMessage: function () { onShareAppMessage: function() {
return { return {
title: this.miniHomeRemark, title: this.miniHomeRemark,
imageUrl: this.miniHomeImg, imageUrl: this.miniHomeImg,
@ -288,7 +287,7 @@
goGoodsPromotion() { goGoodsPromotion() {
this.$yrouter.push('/pages/shop/GoodsPromotion/index'); this.$yrouter.push('/pages/shop/GoodsPromotion/index');
}, },
setOpenShare: function () { setOpenShare: function() {
if (this.$deviceType == 'weixin') { if (this.$deviceType == 'weixin') {
getShare().then(res => { getShare().then(res => {
var data = res.data.data; var data = res.data.data;
@ -302,7 +301,7 @@
}) })
} }
}, },
startQr: function () { startQr: function() {
uni.scanCode({ uni.scanCode({
success: (res) => { success: (res) => {
let option = handleUrlParam(res.result) let option = handleUrlParam(res.result)
@ -351,7 +350,7 @@
this.bgcolor = e; this.bgcolor = e;
}, },
}, },
created: async function () { created: async function() {
// await this.doColorThief(); // await this.doColorThief();
}, },
}; };
@ -389,22 +388,22 @@
} }
} }
.head_box { .head_box {
width: 750rpx; width: 750rpx;
// background: #fff; // background: #fff;
transition: all linear 0.3s; transition: all linear 0.3s;
/deep/.cuIcon-back { /deep/.cuIcon-back {
display: none; display: none;
} }
.nav-title { .nav-title {
font-size: 38rpx; font-size: 38rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
} }
.cu-bar.fixed { .cu-bar.fixed {
position: fixed; position: fixed;
@ -447,4 +446,12 @@
.home_content_box { .home_content_box {
margin-top: -10rpx; margin-top: -10rpx;
} }
</style>
.head_box {
}
.nav-title {
margin-left: 20rpx;
line-height: 40px;
}
</style>