Skip to content

M
mayi-mp-shop
Commit 8d919715 by 程智春
Options

悬浮按钮

parent 349bf7bc
Showing with 535 additions and 8 deletions
src/api/order.js 0 → 100644
import {requestPOST,requestGET} from "@/utils/request.js";
export default {
ordercustomerinfo(options){
return requestPOST(`${process.env.OLSHOP_URL}/order/place_order_customer_info`,options)
},
}
\ No newline at end of file
src/components/basicTool/float-button/index.vue 0 → 100644
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/basicTool/interval/index.vue 0 → 100644
<template>
<div :style="{'background-color':getColor,'height':getHeight}" class="interval">
</div>
</template>
<script>
export default {
name:'interval',
props: ["datas"],
computed: {
getColor(){
return this.datas.componentData.color;
},
getHeight() {
return this.datas.componentData.initheight+'px';
}
}
};
</script>
<style lang="scss" scoped>
.interval{
// border: 1px solid rgba(205,75,155,0.5);
}
</style>
src/components/basicTool/link/index.vue 0 → 100644
<!-- 链接 -->
<template>
<div
class="links"
:style="{'background-color':datas.componentData['backgroundColor'],'color':datas.componentData['fontColor'],
'text-align':datas.componentData['arrowsSite'],'line-height':datas.componentData['initcharSize']+'em'}"
@click="onclickHandle()"
>
<span
:style="{'font-size':datas.componentData['initcharSize']+'em'}"
>{{datas.componentData['title']}}</span>
<span class="jt" v-if="datas.componentData['arrowShow']"></span>
</div>
</template>
<script>
const app = getApp()
export default {
name: "links",
props: {
datas: {
type: Object,
default: {}
},
render: {
type: Boolean,
default: false
}
},
data() {
return {};
},
methods: {
onclickHandle() {
app.$themeToLink(this.datas.componentData.link);
}
},
computed: {},
components: {}
};
</script>
<style lang="scss" scoped>
.links {
font-size: 16px;
padding-right: 10px;
// height: 35px;
// line-height: 35px;
.jt {
display: inline-block;
border-top: 1px solid;
border-right: 1px solid;
width: 10px;
height: 10px;
-webkit-transform: rotate(-135deg);
transform: rotate(405deg);
margin-left: 10px;
// vertical-align: middle;
}
}
</style>
\ No newline at end of file
src/components/basicTool/partition/index.vue 0 → 100644
<template>
<div
class="partition"
:style="{
'padding-top':getPaddingList[0]['value']+'px',
'padding-bottom':getPaddingList[1]['value']+'px',
'padding-left':getPaddingList[2]['value']+'px',
'padding-right':getPaddingList[3]['value']+'px',
}"
>
<div
:style="{
'border-width':'1px',
'border-top-style':getLineStyle,
'border-top-color':getLineColor,
}"
></div>
</div>
</template>
<script>
export default {
name: "partition",
props: ["datas"],
data() {
return {};
},
computed: {
getPaddingList() {
return this.datas.componentData.paddingList;
},
getLineColor() {
return this.datas.componentData.lineColor;
},
getLineStyle() {
return this.datas.componentData.initlineStyle;
}
}
};
</script>
<style lang="scss" scoped>
</style>
src/components/basicTool/shop-popup/index.vue 0 → 100644
<!-- 文字上下滚动 -->
<template>
<div
class="marquee"
v-if="targetShow"
:style="[this.render?{'pointer-events':'none'}:'',{'top':datas.componentData.yPosition+'em'}]"
>
<div class="marquee_box">
<div class="evaluate" :class="animate?'animation_in':'animation_out'">
<img :src="selectImg | DFSImg(300,300)" alt />
<span>{{subName}}刚刚购买了一单</span>
</div>
</div>
</div>
</template>
<script>
let api;
const app = getApp()
export default {
name: "shop-popup",
props: {
render: {
type: Boolean,
default: false
},
datas: {
type: Object,
default: function() {
return {};
}
}
},
data() {
return {
targetShow: false,
selectIndex: 0,
animate: true,
selectImg: "",
selectname: "小工蚁",
marqueeList: [],
setTime1: null,
setTime2: null,
subName : ''
};
},
created() {},
mounted() {
this.init()
},
watch : {
// 'datas.componentData._tempData' : function(newVal){
// this.marqueeList = newVal;
// this.targetShow = true;
// this.play()
// }
},
methods: {
init() {
clearTimeout(this.setTime1);
clearTimeout(this.setTime2);
try {
// api = require("~/api/orderinfo").default;
this.ordercustomerinfo();
} catch (error) {}
// if (this.render) {
// clearTimeout(this.setTime1);
// clearTimeout(this.setTime2);
// try {
// // api = require("~/api/orderinfo").default;
// this.ordercustomerinfo();
// } catch (error) {}
// } else {
// this.targetShow = true;
// }
},
subName() {
if (this.selectname.length > 1) {
return `${this.selectname.substr(0, 1)}****${this.selectname.charAt(
this.selectname.length - 1
)}`;
} else if (this.selectname.length == 1) {
return `${this.selectname.substr(0, 1)}****`;
} else {
return `****`;
}
},
ordercustomerinfo() {
app.orderApi.ordercustomerinfo({
page: 1,
rows: 100
})
.then(res => {
if (res.data.code == 200 && res.data.data.length > 0) {
this.targetShow = true;
this.marqueeList = res.data.data;
this.play();
}
});
},
play() {
//赋值
this.selectname = this.marqueeList[this.selectIndex].customerNickname;
this.selectImg = this.marqueeList[this.selectIndex].customerHeadImage;
if (this.selectname.length > 1) {
this.subName = `${this.selectname.substr(0, 1)}****${this.selectname.charAt(
this.selectname.length - 1
)}`;
} else if (this.selectname.length == 1) {
this.subName = `${this.selectname.substr(0, 1)}****`;
} else {
this.subName = `****`;
}
this.animate = true;
clearTimeout(this.setTime1);
clearTimeout(this.setTime2);
this.setTime1 = setTimeout(() => {
this.animate = false;
this.setTime2 = setTimeout(() => {
this.selectImg = "";
//递增
this.selectIndex++;
if (this.selectIndex >= this.marqueeList.length) {
this.selectIndex = 0;
}
this.play();
}, 2000);
}, 5000);
}
},
deactivated() {
clearTimeout(this.setTime1);
clearTimeout(this.setTime2);
}
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.marquee {
font-size: 16px;
width: 100%;
align-items: center;
color: #3a3a3a;
display: flex;
box-sizing: border-box;
overflow: hidden;
position: fixed;
// top: 10%;
left: 0px;
z-index: 1999;
}
.marquee_box {
display: block;
position: relative;
// height: 30px;
.evaluate {
height: 23px;
line-height: 23px;
font-size: 14px;
padding: 0 3px;
text-decoration: none;
list-style: none;
background: rgba(0, 0, 0, 0.3);
margin-left: 12px;
color: #ffffff;
display: flex;
align-items: center;
border-radius: 23px;
img {
width: 17px;
height: 17px;
margin-right: 5px;
border-radius: 50%;
}
opacity: 0;
}
.animation_in {
opacity: 1;
animation: warn 2s ease;
}
.animation_out {
opacity: 0;
animation: warn_out 1s ease;
}
}
@keyframes warn {
0% {
opacity: 0;
margin-top: 30px;
}
100% {
opacity: 1;
margin-top: 0px;
}
}
@keyframes warn_out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
src/main.js
...@@ -3,6 +3,7 @@ import App from './App' ...@@ -3,6 +3,7 @@ import App from './App'
import Store from './store/index' import Store from './store/index'
import "../static/nicon/iconfont.css" import "../static/nicon/iconfont.css"
import goodsApi from "./api/goods" import goodsApi from "./api/goods"
import orderApi from "./api/order"
import { DFSImg } from "@/utils/index"; import { DFSImg } from "@/utils/index";
import { $themeToLink } from "@/utils/mayi" import { $themeToLink } from "@/utils/mayi"
...@@ -43,4 +44,5 @@ mpApp.$themeToLink = $themeToLink ...@@ -43,4 +44,5 @@ mpApp.$themeToLink = $themeToLink
// api // api
mpApp.goodsApi = goodsApi; mpApp.goodsApi = goodsApi;
mpApp.orderApi = orderApi;
mpApp.DFSImg = DFSImg; mpApp.DFSImg = DFSImg;
src/pages/home/index.vue
...@@ -14,6 +14,21 @@ ...@@ -14,6 +14,21 @@
<div v-if="item.componentCode == 'cube-nav'"> <div v-if="item.componentCode == 'cube-nav'">
<cube-nav :datas="item"></cube-nav> <cube-nav :datas="item"></cube-nav>
</div> </div>
<div v-if="item.componentCode == 'links'">
<links :datas="item"></links>
</div>
<div v-if="item.componentCode == 'interval'">
<interval :datas="item"></interval>
</div>
<div v-if="item.componentCode == 'partition'">
<partition :datas="item"></partition>
</div>
<div v-if="item.componentCode == 'shop-popup'">
<shop-popup :datas="item"></shop-popup>
</div>
<div v-if="item.componentCode == 'float-button'">
<float-button :datas="item"></float-button>
</div>
</div> </div>
<!-- <image <!-- <image
src="http://cdn.mayi888.com/public/jpg/33ff0efc-96b5-4044-a65a-07799dfe98e1.jpg?x-oss-process=image/resize,limit_1,w_750" src="http://cdn.mayi888.com/public/jpg/33ff0efc-96b5-4044-a65a-07799dfe98e1.jpg?x-oss-process=image/resize,limit_1,w_750"
...@@ -32,6 +47,10 @@ ...@@ -32,6 +47,10 @@
</template> </template>
<script> <script>
import links from '@/components/basicTool/link/index.vue'
import interval from '@/components/basicTool/interval/index.vue'
import partition from '@/components/basicTool/partition/index.vue'
import shopPopup from '@/components/basicTool/shop-popup/index.vue'
export default { export default {
data() { data() {
return { return {
...@@ -39,6 +58,12 @@ export default { ...@@ -39,6 +58,12 @@ export default {
pageData: {}, pageData: {},
}; };
}, },
components:{
links,
interval,
partition,
shopPopup,
},
onLoad() { onLoad() {
let that = this; let that = this;
if (this.mpApp.globalData.pageList) { if (this.mpApp.globalData.pageList) {
......
src/pages/home/main.json
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index", "waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index", "van-button": "/static/vant/button/index",
"area-navigation":"/static/nativeComponents/AreaNavigation/index", "area-navigation":"/static/nativeComponents/AreaNavigation/index",
"cube-nav":"/static/nativeComponents/CubeNav/index" "cube-nav":"/static/nativeComponents/CubeNav/index",
"float-button":"/static/nativeComponents/FloatButton/index"
}, },
"enablePullDownRefresh":true "enablePullDownRefresh":true
} }
\ No newline at end of file
static/nativeComponents/AreaNavigation/index.wxml
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<van-icon name="arrow-down" style="margin-left:4rpx" /> <van-icon name="arrow-down" style="margin-left:4rpx" />
</view> </view>
<view class="area-r"> <view class="area-r">
<input class="area-search" type="text" style="background-color:{{datas.componentData.searchBgColor}};font-size:{{datas.componentData.searchFontSize / 16 + 'em'}};color:{{datas.componentData.searchFontColor}};font-weight:{{datas.componentData.searchFontWeight}}"> <input class="area-search" type="text" bindtap="toSearchPage" style="background-color:{{datas.componentData.searchBgColor}};font-size:{{datas.componentData.searchFontSize / 16 + 'em'}};color:{{datas.componentData.searchFontColor}};font-weight:{{datas.componentData.searchFontWeight}}">
</input> </input>
</view> </view>
......
static/nativeComponents/CubeNav/index.js
...@@ -45,8 +45,6 @@ Component({ ...@@ -45,8 +45,6 @@ Component({
getImgSize: (100 - this.data.datas.componentData.imgSize) / 2 getImgSize: (100 - this.data.datas.componentData.imgSize) / 2
}) })
let arr = [] let arr = []
let count = this.data.datas.componentData.columnNum * this.data.datas.componentData.rowNum; let count = this.data.datas.componentData.columnNum * this.data.datas.componentData.rowNum;
let num = Math.ceil(this.data.imgList.length / count); let num = Math.ceil(this.data.imgList.length / count);
...@@ -65,9 +63,33 @@ Component({ ...@@ -65,9 +63,33 @@ Component({
this.createSelectorQuery().select('.cube-item').boundingClientRect(function(res) { this.createSelectorQuery().select('.cube-item').boundingClientRect(function(res) {
console.log('swiper-wrap', res) console.log('swiper-wrap', res)
if (res) { if (res) {
_this.setData({ if (_this.data.datas.componentData.rowNum == 1){
cube3H: res.height * 2 * _this.data.datas.componentData.rowNum _this.setData({
}) cube3H: res.height * 2 * _this.data.datas.componentData.rowNum
})
} else if (_this.data.datas.componentData.rowNum == 2){
if(_this.data.imgList.length / _this.data.datas.componentData.columnNum > 1){
_this.setData({
cube3H: res.height * 2 * _this.data.datas.componentData.rowNum
})
}else{
_this.setData({
cube3H: res.height * 2 * 1
})
}
} else if (_this.data.datas.componentData.rowNum == 3){
if (_this.data.datas.componentData.columnNum == 1){
_this.setData({
cube3H: res.height * 2 * (_this.data.imgList / _this.data.datas.componentData.rowNum)
})
}else{
_this.setData({
cube3H: res.height * 2 * (Math.ceil(_this.data.imgList.length / _this.data.datas.componentData.columnNum))
})
}
}
} }
}).exec() }).exec()
...@@ -150,6 +172,7 @@ Component({ ...@@ -150,6 +172,7 @@ Component({
onclickHandle(e){ onclickHandle(e){
let item = e.currentTarget.dataset.item let item = e.currentTarget.dataset.item
console.log(item) console.log(item)
app.$themeToLink(item.link)
} }
} }
}) })
\ No newline at end of file
static/nativeComponents/FloatButton/index.js 0 → 100644
// static/nativeComponents/FloatButton/index.js
const app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
datas: {
type: Object
}
},
/**
* 组件的初始数据
*/
data: {
imgIcon : ''
},
ready(){
this.setData({
imgIcon: app.DFSImg(this.data.datas.componentData.backgroundImage, this.data.datas.componentData['sizeInfo']['width'] * 6, this.data.datas.componentData['sizeInfo']['width'] * 6,1)
})
},
/**
* 组件的方法列表
*/
methods: {
clickHandler(){
console.log('浮窗点击', this.data.datas.componentData.link)
app.$themeToLink(this.data.datas.componentData.link)
}
}
})
static/nativeComponents/FloatButton/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
static/nativeComponents/FloatButton/index.wxml 0 → 100644
<!--static/nativeComponents/FloatButton/index.wxml-->
<movable-area class="float-botton">
<movable-view class="movable-view {{datas.componentData.style==0 ? 'icon-class':'img-class'}}" direction="all" style="width:{{datas.componentData['sizeInfo']['width']/12}}em;height:{{datas.componentData['sizeInfo']['width']/12}}em;top:{{datas.componentData['position']['y']}}em;left:{{datas.componentData['position']['y']}}em;background-color:{{datas.componentData.style==0?datas.componentData['backgroundColor']:'transparent'}};box-shadow:{{(datas.componentData.style==0 && datas.componentData.boxShadow)?'rgba(0, 0, 0, 0.5) 0px 0px 10rpx':'none'}}" bindtap="clickHandler">
<view wx:if="{{datas.componentData.style==0}}" class="content">
<view wx:if="{{datas.componentData.icon.type==1}}">
<i
wx:if="{{datas.componentData.version}}"
class="content-img antt {{datas.componentData.icon.src}}"
style="font-size:1.6em;color:{{datas.componentData['contentColor']}}"
></i>
<i
wx:else
class="content-img antt iconfont {{datas.componentData.icon.src}}"
style="font-size:1.6em;color:{{datas.componentData['contentColor']}}"
>
</i>
</view>
<image wx:elif="{{datas.componentData.icon.type==2}}" class="content-img" src="{{datas.componentData.icon.src}}"></image>
<view class="content-name" style="font-size:{{datas.componentData['fontSize']}}em;color:{{datas.componentData['contentColor']}}">{{datas.componentData['content']}}</view>
</view>
<image wx:else class="imgs" src="{{imgIcon}}">
</image>
</movable-view>
</movable-area>
static/nativeComponents/FloatButton/index.wxss 0 → 100644
/* static/nativeComponents/FloatButton/index.wxss */
@import '../../nicon/iconfont.wxss';
@import "/static/font/common_icon.wxss";
.float-botton{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 100;
pointer-events: none;
}
.movable-view{
user-select: none;
text-align: center;
font-size: 24rpx;
color: white;
z-index: 1500;
pointer-events: all;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icon-class {
border-radius: 50%;
overflow: hidden;
/* padding: 0 10rpx; */
}
.content{
width: 100%;
}
.content-img{
width: 100%;
padding:0 0 8rpx 0;
}
i {
font-size: 32rpx;
}
.imgs {
width: 100%;
height: 100%;
object-fit: contain;
}
\ No newline at end of file
static/nativeComponents/module/WaterfallFlow/index.js
...@@ -51,7 +51,7 @@ Component({ ...@@ -51,7 +51,7 @@ Component({
}, },
async reLoadPro() { async reLoadPro() {
let _this = this; let _this = this;
this.setHeight(0); // this.setHeight(0);
}, },
setHeight(i) { setHeight(i) {
let _this = this; let _this = this;
......
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