Skip to content

梁建民 / h5

Go to a project
Commit 93b8acc2 by 施宇
Options

h5zyly

parent 58ae9c5f
Expand all
Inline Side-by-side
Showing with 570 additions and 57 deletions
src/api/index.js
......@@ -293,7 +293,9 @@ export const apis = {
/****获取弹出商品信息 */
goodDetail: productionUrlApi + '/goods/detail',
/****获取zy默认class查询 */
defaultClass:productionUrl+'api/defaultClass'
defaultClass:productionUrl+'api/defaultClass',
/******添加到购物车或者下单 */
addGood:productionUrlApi+'/cart/add'
};
......@@ -462,6 +464,9 @@ export const services = {
},
defaultClass(params){
return axios.post(apis.defaultClass,params)
},
addGood(params){
return axios.post(apis.addGood,params)
}
};
\ No newline at end of file
src/assets/css/zyly/zyly.scss 0 → 100644
@function remFun($rem) {
@return $rem * 50/37.5;
}
.zl_Detail {
* {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
.details-head {
.head_top {
border-bottom: 1px solid #d6d7dc;
padding: 10px;
.head_top_left {
width: 56px;
img {
display: block;
width: 56px;
height: 56px;
border: 1px solid #e5e5e5;
}
}
.head_top_right {
padding-left: 66px;
h4 {
padding-bottom: 10px;
font-size: 18px;
color: #333333;
}
}
}
.head_bottom {
border-bottom: 1px solid #d6d7dc;
padding: 5px 10px;
li {
width: 50%;
line-height: 20px;
height: 20px;
font-size: 12px;
color: #999;
b {
display: block;
float: left;
line-height: 20px;
height: 20px;
font-weight: 400;
}
span {
color: #333;
line-height: 20px;
height: 20px;
display: block;
padding: 0 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.f-orange {
color: #ffa200;
margin-left: 5px;
}
}
}
}
.details-cont {
position: absolute;
top: 149px;
bottom: 44px;
width: 100%;
padding: 10px;
overflow-y: auto;
.gradient {
width: 100%;
table {
width: 100%;
line-height: 32px;
font-size: 12px;
text-align: center;
color: #666666;
border: 1px solid #d9d9d9;
.xs-6 {
width: 50%;
}
.xs-4 {
width: 33.33%;
}
.xs-3 {
width:25%;
}
th {
border: 1px solid #d9d9d9;
font-weight: 400;
color: #666;
}
td {
border: 1px solid #d9d9d9;
color: #333;
}
}
.zkxk {
font-size: 12px;
height: 24px;
line-height: 24px;
border: 1px solid #e5e5e5;
border-top: none;
text-align: center;
color: #666;
.icon-top {
bottom: 9px;
position: relative;
content: "";
height: 0;
width: 0;
pointer-events: none;
border: solid transparent;
border-bottom-color: #4d4d4d;
border-width: 4px;
margin-left: 5px;
}
.icon-bot {
top: 9px;
position: relative;
content: "";
height: 0;
width: 0;
pointer-events: none;
border: solid transparent;
border-top-color: #4d4d4d;
border-width: 4px;
margin-left: 5px;
}
}
}
.price {
padding-top: 10px;
.zyqhc {
position: absolute;
width: remFun(3.4rem);
height: remFun(0.7rem);
color: #999;
font-size: remFun(0.2rem);
border: 1px solid #ffa200;
left: 130px;
line-height: remFun(0.28rem);
padding: remFun(0.05rem);
box-shadow: 0px 0px 3px #ffd07f;
border-radius: 3px;
.lfldiv {
width: remFun(0.3rem);
font {
position: relative;
font-size: remFun(0.22rem);
margin-right: remFun(0.05rem);
}
}
.lfrdiv {
width: remFun(2.9rem);
}
}
.bbiu {
display: inline-block;
position: absolute;
border-width: 6px;
border-style: solid;
border-color: transparent #ffa200 transparent transparent;
left: 118px;
top: remFun(0.15rem);
}
.bbiu1 {
display: inline-block;
position: absolute;
border-width: 6px;
border-style: solid;
border-color: transparent #fff transparent transparent;
left: 120px;
top: remFun(0.15rem);
}
.em1 {
padding: 0 0.5em;
}
dl {
font-size: 12px;
dt {
width: 5em;
color: #999;
float: left;
line-height: 30px;
}
dd {
padding-left: 5em;
color: #333;
line-height: 30px;
&.onePrice {
font-size: 14px;
}
&.totalPrice {
font-weight: bold;
color: red;
font-size: 14px;
}
&.tab {
span {
display: block;
float: left;
margin: 2px 10px 0 0;
color: #333;
height: 23px;
line-height: 22px;
padding: 0 10px;
border: 1px solid #d9d9d9;
border-radius: 3px;
background: #fff;
&.act {
color: #e10601;
border-color: #e10601;
}
&.act-blue {
color: #1080d0;
border-color: #1080d0;
}
}
}
.number {
float: left;
width: 118px;
height: 30px;
border: 1px solid #d9d9d9;
border-radius: 3px;
background: #fff;
position: relative;
i {
cursor: pointer;
height: 28px;
width: 28px;
text-align: center;
line-height: 28px;
display: block;
float: left;
background: none;
color: #999999;
font-size: 18px;
}
input {
text-align: center;
float: left;
padding: 4px 5px;
line-height: 20px;
height: 28px;
width: 60px;
background: none;
color: #333333;
font-size: 12px;
border: none;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
}
}
}
}
}
}
.details-foot {
height: 43px;
border-top: 1px solid #d6d7dc;
width: 100%;
position: absolute;
bottom: 0;
span {
width: 50%;
display: block;
float: left;
height: 43px;
line-height: 43px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
border: none;
&.but-blue {
background: #1080d0;
}
&.but-red {
background: #e10601;
}
}
}
}
\ No newline at end of file
src/store/modules/gooddetail/gooddetail.js
......@@ -5,21 +5,30 @@ import {
import {
services as Services
} from '../../../api/index'
import util
from '../../../util/index';
var qs = require('qs');
Vue.use(Toast);
const state = {
goodDetail: {},
zygoodDetail: {},
lygoodDetail: {},
isShowAlert: false,
tipText: ""
}
const mutations = {
changGoodDetail(state, payload) {
changeZyGoodDetail(state, payload) {
let data = payload.data
state.goodDetail = data;
}
state.zygoodDetail = data;
},
changeLyGoodDetail(state, payload) {
let data = payload.data
state.lygoodDetail = data;
},
closeAlert(state) {
state.isShowAlert = false,
state.tipText = ""
},
}
const actions = {
getDetailData({
......@@ -27,23 +36,64 @@ const actions = {
}, payload) {
const toast = Toast.loading({
message: '加载中...',
duration: 0
duration: 0,
forbidClick: true
});
state.goodDetail = {};
state.zygoodDetail = {};
state.lygoodDetail = {};
Services.goodDetail(qs.stringify(payload.data)).then((res) => {
toast.clear()
let data = res.data;
if (data.err_code == 0) {
commit("changGoodDetail", { //过滤数据
if(data.data.goods_type == 3 || data.data.goods_type == 4){//自营
commit('changeZyGoodDetail',{
data:data.data
})
}else if(data.data.goods_type == 1 || data.data.goods_type==2){//联营
commit("changeLyGoodDetail", { //过滤数据
data: data.data
})
}
} else {
}
}).catch(function (err) {
toast.clear()
});
}
},
addGoods({
commit
}, payload) {
const toast = Toast.loading({
message: '加载中...',
duration: 0,
forbidClick: true
});
state.isShowAlert = false;
state.tipText = ""
Services.addGood(qs.stringify(payload.data.datax)).then((res) => {
toast.clear()
let data = res.data;
if (data.err_code == 0) {
if (payload.data.datax.buy == 1) {
window.sessionStorage.setItem("car_xk", data.data);
if (payload.data.type == 1) {
window.location.href = "/v3/order/confirm?type=zy&k=" + payload.data.k
} else {
window.location.href = "/v3/order/confirm?type=other&k=" + payload.data.k
}
} else {
state.isShowAlert = true;
state.tipText = data.err_msg
}
} else {
Toast(data.err_msg);
}
}).catch(function (err) {
toast.clear();
});
},
}
export default {
......
src/views/common/addCarAlert.vue 0 → 100644
<template>
<div class="addCarAlert">
<div class="backdrop" v-if="isShowAlert" @click="closeAlert">
<div class="pop-tip">
<div class="window-img">
<div class="title">
<i class="iconfont icon-guanbi close"></i>
</div>
<dl class="box-img">
<dt>
<i class="icon iconfont icon-xuanzhong"></i>
</dt>
<dd>{{tipText}}</dd>
<dd>
<a href="/v3/joincart" class="qu-car">去购物车结算 &gt;&gt;</a>
</dd>
</dl>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState({
isShowAlert: state => state.gooddetail.isShowAlert,
tipText: state => state.gooddetail.tipText
})
},
methods: {
closeAlert() {
this.$store.commit("closeAlert");
}
}
};
</script>
<style lang="scss">
.addCarAlert {
.backdrop {
position: fixed;
z-index: 4;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
&.zIndex {
z-index: 1;
}
.pop-tip {
.window-img {
background: #fff;
position: fixed;
top: 25%;
left: 50%;
z-index: 101;
border-radius: 3px;
width: 80%;
transform: translateX(-50%);
}
.title {
position: relative;
width: 100%;
i {
right: 0;
top: -22px;
position: absolute;
color: #fff;
}
}
.box-img {
text-align: center;
padding: 20px 10px 30px 10px;
dt {
width: 35px;
height: 35px;
line-height: 42px;
margin: 0 auto;
border-radius: 50%;
margin-bottom: 5px;
.iconfont {
font-size: 27px;
font-weight: bold;
color: #1080d0;
}
}
dd {
font-size: 14px;
color: #333;
padding-top: 10px;
line-height: 20px;
a {
color: #1080d0;
}
}
}
}
}
}
</style>
src/views/common/goodsDetail.vue
<template>
<div class="details-pop" v-if="detailsData.isShow">
<div class="mui-backdrop" style="opacity:1" @click="detailsData.isShow = false"></div>
<div class="mui-poppicker mui-active">
<div class="close" @click="detailsData.isShow = false">
<i class="icon iconfont icon-guanbi"></i>
<div class="good_detail_alert">
<div v-if="detailsData.isShow" class="details-pop">
<div class="mui-backdrop" style="opacity:1" @click="detailsData.isShow = false"></div>
<div class="mui-poppicker mui-active">
<div class="close" @click="detailsData.isShow = false">
<i class="icon iconfont icon-guanbi"></i>
</div>
<zy v-show="zygoodDetail.goods_type==3||zygoodDetail.goods_type==4" :goodDetail="zygoodDetail"></zy>
<ly v-show="lygoodDetail.goods_type==1||lygoodDetail.goods_type==2" :goodDetail="lygoodDetail"></ly>
</div>
<zy v-show="goodDetail.goods_type==3||goodDetail.goods_type==4" :goodDetail="goodDetail"></zy>
<ly v-show="goodDetail.goods_type==1||goodDetail.goods_type==2"></ly>
</div>
</div>
</template>
<script>
import zy from "@/views/common/zyDetail";
import ly from "@/views/common/lyDetail";
import { mapState } from "vuex";
export default {
props: {
......@@ -24,22 +24,30 @@ export default {
}
},
components: {
zy,
ly
zy: resolve => {
require(["@/views/common/zyDetail"], resolve);
}, //懒加载
ly: resolve => {
require(["@/views/common/lyDetail"], resolve);
} //懒加载
},
computed: {
...mapState({
goodDetail: state => state.gooddetail.goodDetail
zygoodDetail: state => state.gooddetail.zygoodDetail,
lygoodDetail:state => state.gooddetail.lygoodDetail
})
},
watch: {
detailsData: {
handler(newV, oldV) {
if (newV.isShow) {
document.body.style.overflow = "hidden";
this.$store.dispatch({
type: "getDetailData",
data: { id: newV.id }
});
} else {
document.body.style.overflow = "auto";
}
},
deep: true
......@@ -48,42 +56,44 @@ export default {
};
</script>
<style lang="scss">
.details-pop {
position: fixed;
left: 0px;
top: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: 999;
overflow: hidden;
.mui-backdrop {
.good_detail_alert {
.details-pop {
position: fixed;
z-index: 87;
left: 0px;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.mui-poppicker {
width: 100%;
z-index: 90;
position: absolute;
top: 20%;
bottom: 0px;
background-color: #fff;
border-top: solid 1px #ccc;
-webkit-transition: 0.3s;
-webkit-transform: translateY(300px);
&.mui-active {
-webkit-transform: translateY(0px);
z-index: 999;
overflow: hidden;
.mui-backdrop {
position: fixed;
z-index: 87;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.close {
.mui-poppicker {
width: 100%;
z-index: 90;
position: absolute;
top: -25px;
right: 10px;
color: #fff;
top: 20%;
bottom: 0px;
background-color: #fff;
border-top: solid 1px #ccc;
-webkit-transition: 0.3s;
-webkit-transform: translateY(300px);
&.mui-active {
-webkit-transform: translateY(0px);
}
.close {
position: absolute;
top: -25px;
right: 10px;
color: #fff;
}
}
}
}
......
src/views/xianhuo/xianhuo.vue
......@@ -176,6 +176,10 @@
v-if="isShowRight || zyFilterInit!=-1"
></div>
<goodsDetail :detailsData="detailsData"></goodsDetail>
<!-- 购物车添加成功 -->
<addCarAlert></addCarAlert>
<!-- 购物车添加成功 -->
</div>
</template>
<script>
......@@ -187,6 +191,7 @@ import GoodsOne from "@/views/common/GoodsOne.vue";
import goodsDetail from "@/views/common/goodsDetail.vue";
import SideBar from "@/views/common/SideBar.vue";
import { services as Services } from "../../api/index";
import addCarAlert from "@/views/common/addCarAlert";
export default {
name: "xianhuo",
components: {
......@@ -196,7 +201,8 @@ export default {
"van-list": List,
GoodsOne,
goodsDetail,
SideBar
SideBar,
addCarAlert
},
data() {
return {
......@@ -249,10 +255,16 @@ export default {
zyData: state => state.xianhuo.zyData,
total: state => state.xianhuo.total,
loading: state => state.xianhuo.loading,
finished: state => state.xianhuo.finished
finished: state => state.xianhuo.finished,
isShowAlert: state => state.gooddetail.isShowAlert
})
},
watch: {
isShowAlert(now) {
if (now) {
this.detailsData = { isShow: false, id: "" };
}
},
loading(now) {
this.loadingXh = now;
},
......@@ -569,14 +581,14 @@ export default {
}
.backdrop {
position: fixed;
z-index:4;
z-index: 4;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
&.zIndex {
z-index:1;
z-index: 1;
}
}
.xianhuo {
......@@ -594,7 +606,7 @@ export default {
.search-sift {
width: 100%;
position: relative;
z-index:2;
z-index: 2;
.title-cut {
padding: 0 10px;
font-size: 14px;
......
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 sign in to comment