vue单页项目
2020-01-08 本文已影响0人
糖醋里脊120625
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=320, user-scalable=no, initial-scale=1.0, maximum-scale=1.3, minimum-scale=1.0">
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!--https请求http-->
<!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<title>618年中大促</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/spring.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
<script type="text/javascript" src="js/rem.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
<body>
<div id="app">
<div class="spring">
<!--<div class="search_product_wp">
<div class="search_inp"><input type="text" v-model="searchvalue" placeholder="搜索商品" /></div>
<div class="search_btn" @click="getlist"><img src="img/search_icon.png" />搜索 </div>
</div>-->
<van-search
v-model="searchvalue"
placeholder="请输入搜索关键词"
show-action
shape="round"
@search="getlist"
>
<div slot="action" @click="getlist">搜索</div>
</van-search>
<div class="spring_bg_1">
<img :src="banimg"/>
</div>
<!--推荐-->
<div class="spring_bg_4">
<div class="spring_bg_5" id="scroll_wp">
<div class="spring_list">
<div class="list">
<div class="spr_wp">
<div class="item" :key="index" v-for="(product, index) in list">
<div class="figure" @click="nowBuy(product.productId, product.stock)">
<img :src="product.logo"/>
</div>
<div class="title" @click="nowBuy(product.productId, product.stock)">
<div class="son"> {{product.name}} </div>
</div>
<div class="scart" @click="newAddCart(product.id, product.newUserZonePrice, $event)">
<img src="img/spring_cart_1.png"/>
</div>
<div class="price"> ￥{{product.newUserZonePrice}} </div>
<div class="y_price"> ￥{{product.price}} </div>
<div class="flag" v-if="product.stock < 0"> <img src="img/has_qg.png"/> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--浮动购物车-->
<div class="float_scart" @click="goCart" ref="cart">
<img src="img/spring_cart_2.png"/ style="width: 80%;">
<div class="num" v-if="cartNum > 0">{{cartNum > 99 ? '99+' : cartNum}}</div>
<div class="num ttt" style="opacity: 0;"></div>
</div>
</div>
<!--加载中~-->
<div class='show_loading' v-if="isshowloading">
<div class="load1">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
</body>
<script>
var doc = document,
rootEl = doc.documentElement;
var app = new Vue({
el: "#app",
data() {
return {
banimg:"",
isshowloading: false,
searchvalue: null,
twoProduct:[],
list:[],
//api: "https://ha.tongchengxianggou.com/api/",
api: "http://192.168.26.132:8080/web/",
//api: "http://192.168.124.66:8888/web/api/",
cartNum: 0,
img: "",
flage: false,
top: 0,
left: 0,
cartTop: 500,
cartleft: 400,
page: 1
}
},
methods: {
addToCart(e){
var addBtn = e.target,//添加按钮
cartBox = doc.querySelector('.ttt'),//购物车框
startPoint = addBtn.getBoundingClientRect(),//起点位置
endPoint = cartBox.getBoundingClientRect(),//终点位置
startX = startPoint.left,//起点X坐标
startY = startPoint.top,//起点Y坐标
endX = endPoint.left - startX,//终点X坐标
endY = startY - endPoint.top,//终点Y坐标，Y坐标轴跟常见的平面坐标系相反
x1 = endX > 0 ? 10 : -10,
y1 = endY > 0 ? 0.05 : -0.005,
a = ( x1 * endY - y1 * endX )/( endX * endX * x1 - x1 * x1 * endX ),
b = (y1 - a * x1 * x1) / x1;
addBtn = cartBox = startPoint = endPoint = null;
var ball = this.createBall(),//创建一个要添加到购物车的圆球
/*
* 圆球移动的坐标
*/
x = 0,
y = 0,
delay = 500,//动画持续时间
timeSpace = 20,//圆球移动间隔
step = endX / ( delay / timeSpace );
var timer = setInterval(function(){
if(Math.abs(x) >= Math.abs(endX)){//水平方向移动超过最大距离则取消移动，到达购物车
clearInterval(timer);
ball.parentNode && ball.parentNode.removeChild(ball);//移除圆球
ball = null;
}else{
x += step;//水平移动
y = a * x * x + b * x;//垂直移动
// console.log(y);
ball.style.top = startY - y + 'px';
ball.style.left = x + startX + 'px';
}
},timeSpace);
},
createBall(){
var ball = doc.createElement('div');
ball.className = 'box';
doc.getElementById("app").appendChild(ball);
return ball;
},
nowBuy(id, stock, e) {
if (stock > 0) {
if (window.__wxjs_environment === 'miniprogram'){
wx.miniProgram.navigateTo({url: '../shop/product?id='+id});
} else {
alert("buy?" + id);
}
}
},
getUrlParam(url, name){
var pattern = new RegExp("[?&]" + name +"\=([^&]+)","g");
var matcher = pattern.exec(url);
var items = null;
if(matcher != null){
try{
items = decodeURIComponent(decodeURIComponent(matcher[1]));
}catch(e){
try{
items = decodeURIComponent(matcher[1]);
}catch(e){
items = matcher[1];
}
}
}
return items;
},
newAddCart(id, stock, event) {
console.log(stock)
if (stock > 0) {
var url = window.location.href;
var uuid = this.getUrlParam(url, 'uuid');
//uuid = 'C8068E06-8DA9-4E1A-9630-47BDE247BB13';
//uuid = '984db000-a3f0-4e71-a723-1555a66309e1';
if (uuid) {
this.$http.post(
''+ this.api +'user/cart/newAddDo',
{
id:id,
uuid: uuid,
},
{
emulateJSON:true
}
)
.then(function(res){
if(res.body.state == 'login'){
if (window.__wxjs_environment === 'miniprogram'){
wx.miniProgram.navigateTo({url: '../login/login'});
} else {
alert("login");
}
} else {
this.addToCart(event);
if (res.body.code == 0) {
this.cartNum = res.body.enableCount;
}
if (res.body.code == 1) {
// 库存不足
}
if (res.body.code == 2) {
// 商品下架
}
if (res.body.code == 3) {
// 售罄
}
}
}, function(res){
console.log(err)
});
} else {
if (window.__wxjs_environment === 'miniprogram'){
wx.miniProgram.navigateTo({url: '../login/login'});
} else {
alert("login");
}
}
}
},
goCart() {
if (window.__wxjs_environment === 'miniprogram') {
wx.miniProgram.switchTab({url: '../index/cart'});
} else {
alert("cart");
}
},
getlist() {
this.isshowloading = true;
this.page++;
this.$http.post(
''+ this.api +'api/v3/newUserZone/allNewUserZoneProductInfos',
{
productName:this.searchvalue,
page: 1,
rows: 1000
},
{
emulateJSON: true
})
.then(function(res){
this.isshowloading = false;
if (res.body.code == 200) {
console.log(res.body.data.newUSerZoneProductInfos)
this.list = res.body.data.newUSerZoneProductInfos;
}
}, function(err){
console.log(err);
this.isshowloading = false;
});
}
},
created() {
this.getlist();
var url = window.location.href;
var uuid = this.getUrlParam(url, 'uuid');
if (uuid) {
this.$http.post(
''+ this.api +'api/v3/newUserZone/newUserZoneInfo',
{
uuid: uuid
},
{
emulateJSON: true
})
.then(function(res){
if (res.status === 200) {
this.cartNum = res.data.data.cartNum;
this.banimg = res.data.data.newUSerZoneInfo.banner;
}
}, function(err){
console.log(err);
});
}
// 监听滑动到底部
/*
var that = this;
window.onscroll = function(){
// scrollTop 滚动条滚动时，距离顶部的距离
var scrollTop = document.getElementById('scroll_wp').scrollTop;
// windowHeight 可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
// scrollHeight 滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
// 滚动条到底部的条件
if(scrollTop + windowHeight == scrollHeight){
// 加载数据
that.getlist();
}
}
*/
},
mounted(e){
/* add elements */
function xiqiu(productId, totalNum){
}
}
});
</script>
</html>
