Init project
This commit is contained in:
lifizer
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="footer-bg"></view>
|
||||
<view id="footer" :class="[isIpx ? 'iphonex-footer' : '', 'acea-row row-middle'] ">
|
||||
<view
|
||||
class="item"
|
||||
:class="{ on: footerIndex == tabtarIndex }"
|
||||
v-for="(item, footerIndex) in footerList"
|
||||
:key="footerIndex"
|
||||
>
|
||||
<view
|
||||
class="iconfont"
|
||||
:class="item.icon1 + ' ' + (footerIndex == tabtarIndex ? item.icon2 : '')"
|
||||
></view>
|
||||
<view>{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "Footer",
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
footerList: [
|
||||
{
|
||||
name: "首页",
|
||||
icon1: "icon-shouye-xianxing",
|
||||
icon2: "icon-shouye",
|
||||
url: "/pages/home/index"
|
||||
},
|
||||
{
|
||||
name: "分类",
|
||||
icon1: "icon-yingyongchengxu-xianxing",
|
||||
icon2: "icon-yingyongchengxu",
|
||||
url: "/pages/shop/GoodsClass/index"
|
||||
},
|
||||
{
|
||||
name: "购物车",
|
||||
icon1: "icon-caigou-xianxing",
|
||||
icon2: "icon-caigou",
|
||||
url: "/pages/shop/ShoppingCart/index"
|
||||
},
|
||||
{
|
||||
name: "我的",
|
||||
icon1: "icon-yonghu-xianxing",
|
||||
icon2: "icon-yonghu",
|
||||
url: "/pages/user/User/index"
|
||||
}
|
||||
],
|
||||
isIpx: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["tabtarIndex"])
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<view class="home" :style="{ top: top + 'px' }" style="position:fixed;" id="right-nav" @touchmove="touchmove($event)">
|
||||
<view class="homeCon bg-color-red1" :class="homeActive === true ? 'on' : ''">
|
||||
<view @click="homeGo()" class="iconfont icon-shouye-xianxing " style="color: green;"></view>
|
||||
<view @click="shoppingCartGo()" class="iconfont icon-caigou-xianxing" style="color: green;"></view>
|
||||
<!--<view @click="userGo()" class="iconfont icon-yonghu1"></view>-->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
name: 'Home',
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
top: '',
|
||||
homeActive: true
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['homeActive']),
|
||||
methods: {
|
||||
userGo() {
|
||||
this.$yrouter.push('/pages/user/User/index');
|
||||
},
|
||||
homeGo() {
|
||||
this.$yrouter.switchTab('/pages/home/index');
|
||||
},
|
||||
shoppingCartGo() {
|
||||
this.$yrouter.switchTab('/pages/shop/ShoppingCart/index');
|
||||
},
|
||||
touchmove(event) {
|
||||
// event.preventDefault();
|
||||
// let top =
|
||||
// event.touches[0].pageY -
|
||||
// (document.documentElement.scrollTop || document.body.scrollTop) -
|
||||
// this.$el.clientHeight;
|
||||
|
||||
// if (top > 390) top = 390;
|
||||
// else if (top < 55) top = 55;
|
||||
this.top = 55;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.mystyl {
|
||||
display: inline-block;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-top:12rpx;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 50%;
|
||||
background-size: 124rpx auto;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div
|
||||
:class="show?'yd-mask g-fix-ios-overflow-scrolling-bug':'yd-mask' "
|
||||
ref="scrollView"
|
||||
:style="styles"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
name: "yd-mask",
|
||||
data() {
|
||||
return {
|
||||
show: this.value
|
||||
};
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bgcolor: {
|
||||
type: String,
|
||||
default: "#000"
|
||||
},
|
||||
zindex: {
|
||||
default: 1500
|
||||
},
|
||||
opacity: {
|
||||
default: 0.5
|
||||
},
|
||||
animated: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
const style = {
|
||||
"z-index": this.zindex,
|
||||
"background-color": this.bgcolor
|
||||
};
|
||||
if (this.show) {
|
||||
style["opacity"] = this.opacity;
|
||||
style["pointer-events"] = "auto";
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@css-prefix: yd;
|
||||
|
||||
.@{css-prefix} {
|
||||
&-mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="switchWindow" :class="switchActive === true ? 'on' : ''">
|
||||
<view class="pictrue">
|
||||
|
||||
</view>
|
||||
<!-- 是否选择切换到小程序账户？ -->
|
||||
<view class="info">
|
||||
<text>是否选择切换到</text>
|
||||
<text class="font-color" v-if="login_type === 'h5'">微信账号</text>
|
||||
<text class="font-color" v-else>手机用户</text>
|
||||
<text>？</text>
|
||||
</view>
|
||||
<view class="switchBnt" @click="switchH5">
|
||||
<text>切换</text>
|
||||
</view>
|
||||
<view class="switchBnt cancelBnt" @click="switchClose">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mask" @touchmove.prevent v-show="switchActive === true" @click="switchClose"></view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="less">
|
||||
.switchWindow {
|
||||
width: 5.6*100rpx;
|
||||
border-radius: 0.2*100rpx;
|
||||
-webkit-border-radius: 0.2*100rpx;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -2.8*100rpx;
|
||||
margin-top: -3*100rpx;
|
||||
z-index: 99;
|
||||
padding: 0.5*100rpx 0.3*100rpx 0.4*100rpx 0.3*100rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
-webkit-transition: all 0.3s ease-in-out 0s;
|
||||
-moz-transition: all 0.3s ease-in-out 0s;
|
||||
-o-transition: all 0.3s ease-in-out 0s;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.switchWindow.on {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
}
|
||||
|
||||
.switchWindow .pictrue {
|
||||
width: 2.36*100rpx;
|
||||
height: 2.36*100rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.switchWindow .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.switchWindow .info {
|
||||
font-size: 0.32*100rpx;
|
||||
color: #282828;
|
||||
margin-top: 0.44*100rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.switchWindow .switchBnt {
|
||||
font-size: 0.32*100rpx;
|
||||
color: #fff;
|
||||
width: 3.6*100rpx;
|
||||
height: 0.82*100rpx;
|
||||
border-radius: 0.41*100rpx;
|
||||
-webkit-border-radius: 0.41*100rpx;
|
||||
margin: 0.57*100rpx auto 0 auto;
|
||||
line-height: 0.82*100rpx;
|
||||
background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
}
|
||||
|
||||
.switchWindow .switchBnt.cancelBnt {
|
||||
background-color: #fff;
|
||||
color: #999;
|
||||
background-image: none;
|
||||
margin-top: 0.1*100rpx;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { switchH5Login } from "@/api/user";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
import store from "@//store";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export default {
|
||||
name: "SwitchWindow",
|
||||
props: {
|
||||
switchActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
login_type: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {};
|
||||
},
|
||||
mounted: function() {},
|
||||
methods: {
|
||||
switchClose: function() {
|
||||
this.$emit("changeswitch", false); //$emit():注册事件；
|
||||
},
|
||||
switchH5() {
|
||||
let that = this;
|
||||
uni.showLoading({
|
||||
title: "正在切换中"
|
||||
});
|
||||
if (that.login_type === "h5") {
|
||||
cookie.set("loginType", "wechat", 60);
|
||||
uni.hideLoading();
|
||||
this.$store.commit("logout");
|
||||
this.$emit("changeswitch", false);
|
||||
location.reload();
|
||||
} else {
|
||||
switchH5Login()
|
||||
.then(({ data }) => {
|
||||
uni.hideLoading();
|
||||
const expires_time = dayjs(data.expires_time);
|
||||
store.commit("login", data.token, expires_time);
|
||||
this.$emit("changeswitch", false);
|
||||
location.reload();
|
||||
})
|
||||
.catch(err => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user