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 = { ...@@ -293,7 +293,9 @@ export const apis = {
/****获取弹出商品信息 */ /****获取弹出商品信息 */
goodDetail: productionUrlApi + '/goods/detail', goodDetail: productionUrlApi + '/goods/detail',
/****获取zy默认class查询 */ /****获取zy默认class查询 */
defaultClass:productionUrl+'api/defaultClass' defaultClass:productionUrl+'api/defaultClass',
/******添加到购物车或者下单 */
addGood:productionUrlApi+'/cart/add'
}; };
...@@ -462,6 +464,9 @@ export const services = { ...@@ -462,6 +464,9 @@ export const services = {
}, },
defaultClass(params){ defaultClass(params){
return axios.post(apis.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 { ...@@ -5,21 +5,30 @@ import {
import { import {
services as Services services as Services
} from '../../../api/index' } from '../../../api/index'
import util
from '../../../util/index';
var qs = require('qs'); var qs = require('qs');
Vue.use(Toast); Vue.use(Toast);
const state = { const state = {
goodDetail: {}, zygoodDetail: {},
lygoodDetail: {},
isShowAlert: false,
tipText: ""
} }
const mutations = { const mutations = {
changGoodDetail(state, payload) { changeZyGoodDetail(state, payload) {
let data = payload.data 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 = { const actions = {
getDetailData({ getDetailData({
...@@ -27,23 +36,64 @@ const actions = { ...@@ -27,23 +36,64 @@ const actions = {
}, payload) { }, payload) {
const toast = Toast.loading({ const toast = Toast.loading({
message: '加载中...', message: '加载中...',
duration: 0 duration: 0,
forbidClick: true
}); });
state.goodDetail = {}; state.zygoodDetail = {};
state.lygoodDetail = {};
Services.goodDetail(qs.stringify(payload.data)).then((res) => { Services.goodDetail(qs.stringify(payload.data)).then((res) => {
toast.clear() toast.clear()
let data = res.data; let data = res.data;
if (data.err_code == 0) { 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 data: data.data
}) })
}
} else { } else {
} }
}).catch(function (err) { }).catch(function (err) {
toast.clear() 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 { 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> <template>
<div class="details-pop" v-if="detailsData.isShow"> <div class="good_detail_alert">
<div class="mui-backdrop" style="opacity:1" @click="detailsData.isShow = false"></div> <div v-if="detailsData.isShow" class="details-pop">
<div class="mui-poppicker mui-active"> <div class="mui-backdrop" style="opacity:1" @click="detailsData.isShow = false"></div>
<div class="close" @click="detailsData.isShow = false"> <div class="mui-poppicker mui-active">
<i class="icon iconfont icon-guanbi"></i> <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> </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>
</div> </div>
</template> </template>
<script> <script>
import zy from "@/views/common/zyDetail";
import ly from "@/views/common/lyDetail";
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { export default {
props: { props: {
...@@ -24,22 +24,30 @@ export default { ...@@ -24,22 +24,30 @@ export default {
} }
}, },
components: { components: {
zy, zy: resolve => {
ly require(["@/views/common/zyDetail"], resolve);
}, //懒加载
ly: resolve => {
require(["@/views/common/lyDetail"], resolve);
} //懒加载
}, },
computed: { computed: {
...mapState({ ...mapState({
goodDetail: state => state.gooddetail.goodDetail zygoodDetail: state => state.gooddetail.zygoodDetail,
lygoodDetail:state => state.gooddetail.lygoodDetail
}) })
}, },
watch: { watch: {
detailsData: { detailsData: {
handler(newV, oldV) { handler(newV, oldV) {
if (newV.isShow) { if (newV.isShow) {
document.body.style.overflow = "hidden";
this.$store.dispatch({ this.$store.dispatch({
type: "getDetailData", type: "getDetailData",
data: { id: newV.id } data: { id: newV.id }
}); });
} else {
document.body.style.overflow = "auto";
} }
}, },
deep: true deep: true
...@@ -48,42 +56,44 @@ export default { ...@@ -48,42 +56,44 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.details-pop { .good_detail_alert {
position: fixed; .details-pop {
left: 0px;
top: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: 999;
overflow: hidden;
.mui-backdrop {
position: fixed; position: fixed;
z-index: 87; left: 0px;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.mui-poppicker {
width: 100%; width: 100%;
z-index: 90; z-index: 999;
position: absolute; overflow: hidden;
top: 20%; .mui-backdrop {
bottom: 0px; position: fixed;
background-color: #fff; z-index: 87;
border-top: solid 1px #ccc; top: 0;
-webkit-transition: 0.3s; right: 0;
-webkit-transform: translateY(300px); bottom: 0;
&.mui-active { left: 0;
-webkit-transform: translateY(0px); background-color: rgba(0, 0, 0, 0.3);
} }
.close { .mui-poppicker {
width: 100%;
z-index: 90;
position: absolute; position: absolute;
top: -25px; top: 20%;
right: 10px; bottom: 0px;
color: #fff; 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 @@ ...@@ -176,6 +176,10 @@
v-if="isShowRight || zyFilterInit!=-1" v-if="isShowRight || zyFilterInit!=-1"
></div> ></div>
<goodsDetail :detailsData="detailsData"></goodsDetail> <goodsDetail :detailsData="detailsData"></goodsDetail>
<!-- 购物车添加成功 -->
<addCarAlert></addCarAlert>
<!-- 购物车添加成功 -->
</div> </div>
</template> </template>
<script> <script>
...@@ -187,6 +191,7 @@ import GoodsOne from "@/views/common/GoodsOne.vue"; ...@@ -187,6 +191,7 @@ import GoodsOne from "@/views/common/GoodsOne.vue";
import goodsDetail from "@/views/common/goodsDetail.vue"; import goodsDetail from "@/views/common/goodsDetail.vue";
import SideBar from "@/views/common/SideBar.vue"; import SideBar from "@/views/common/SideBar.vue";
import { services as Services } from "../../api/index"; import { services as Services } from "../../api/index";
import addCarAlert from "@/views/common/addCarAlert";
export default { export default {
name: "xianhuo", name: "xianhuo",
components: { components: {
...@@ -196,7 +201,8 @@ export default { ...@@ -196,7 +201,8 @@ export default {
"van-list": List, "van-list": List,
GoodsOne, GoodsOne,
goodsDetail, goodsDetail,
SideBar SideBar,
addCarAlert
}, },
data() { data() {
return { return {
...@@ -249,10 +255,16 @@ export default { ...@@ -249,10 +255,16 @@ export default {
zyData: state => state.xianhuo.zyData, zyData: state => state.xianhuo.zyData,
total: state => state.xianhuo.total, total: state => state.xianhuo.total,
loading: state => state.xianhuo.loading, loading: state => state.xianhuo.loading,
finished: state => state.xianhuo.finished finished: state => state.xianhuo.finished,
isShowAlert: state => state.gooddetail.isShowAlert
}) })
}, },
watch: { watch: {
isShowAlert(now) {
if (now) {
this.detailsData = { isShow: false, id: "" };
}
},
loading(now) { loading(now) {
this.loadingXh = now; this.loadingXh = now;
}, },
...@@ -569,14 +581,14 @@ export default { ...@@ -569,14 +581,14 @@ export default {
} }
.backdrop { .backdrop {
position: fixed; position: fixed;
z-index:4; z-index: 4;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
&.zIndex { &.zIndex {
z-index:1; z-index: 1;
} }
} }
.xianhuo { .xianhuo {
...@@ -594,7 +606,7 @@ export default { ...@@ -594,7 +606,7 @@ export default {
.search-sift { .search-sift {
width: 100%; width: 100%;
position: relative; position: relative;
z-index:2; z-index: 2;
.title-cut { .title-cut {
padding: 0 10px; padding: 0 10px;
font-size: 14px; 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