Commit 1ab55f47 by 肖康

Merge branch 'h5_zyly_vue_0517' of http://119.23.72.7/liangjianmin/h5 into h5_zyly_vue_0517

parents b7e55d83 58ae9c5f
...@@ -14,33 +14,11 @@ Vue.use(Toast); ...@@ -14,33 +14,11 @@ Vue.use(Toast);
const state = { const state = {
goodDetail: {}, goodDetail: {},
startNum: 1, //起订量
multipleNum: 1, //倍数
aggregateNum: 0, //一组的数量
stockNum: 0, //库存,
zyladderArr: [] //阶梯价
} }
const mutations = { const mutations = {
changGoodDetai(state, payload) { changGoodDetail(state, payload) {
let data = payload.data let data = payload.data
state.goodDetail = data; state.goodDetail = data;
if (data.min_buy) {
state.startNum = util.aggxde(data.min_buy)
}
if (data.mpl) {
state.multipleNum = util.aggxde(data.mpl)
}
if (data.min_mpq) {
state.aggregateNum = util.aggxde(data.min_mpq)
}
if (data.goods_number) {
state.stockNum = util.aggxde(data.goods_number)
}
if(data.tiered){
for(let i=0;i<data.tiered.length;i++){
}
}
} }
} }
const actions = { const actions = {
...@@ -56,7 +34,7 @@ const actions = { ...@@ -56,7 +34,7 @@ const actions = {
toast.clear() toast.clear()
let data = res.data; let data = res.data;
if (data.err_code == 0) { if (data.err_code == 0) {
commit("changGoodDetai", { //过滤数据 commit("changGoodDetail", { //过滤数据
data: data.data data: data.data
}) })
} else { } else {
......
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<div class="close" @click="detailsData.isShow = false"> <div class="close" @click="detailsData.isShow = false">
<i class="icon iconfont icon-guanbi"></i> <i class="icon iconfont icon-guanbi"></i>
</div> </div>
<zy v-if="goodDetail.goods_type==3||goodDetail.goods_type==4"></zy> <zy v-show="goodDetail.goods_type==3||goodDetail.goods_type==4" :goodDetail="goodDetail"></zy>
<ly v-if="goodDetail.goods_type==1||goodDetail.goods_type==2"></ly> <ly v-show="goodDetail.goods_type==1||goodDetail.goods_type==2"></ly>
</div> </div>
</div> </div>
</template> </template>
...@@ -21,10 +21,6 @@ export default { ...@@ -21,10 +21,6 @@ export default {
default() { default() {
return {}; return {};
} }
},
test1: {
type: String,
default: "1"
} }
}, },
components: { components: {
...@@ -47,7 +43,7 @@ export default { ...@@ -47,7 +43,7 @@ export default {
} }
}, },
deep: true deep: true
}, }
} }
}; };
</script> </script>
......
...@@ -133,8 +133,16 @@ ...@@ -133,8 +133,16 @@
<dl class="clr"> <dl class="clr">
<dt>购买形式</dt> <dt>购买形式</dt>
<dd class="tab"> <dd class="tab">
<span class="act" v-html="'按'+goodDetail.goods_unit_name+'购买'"></span> <span
<span v-html="'按'+goodDetail.mpq_unit_name+'购买'"></span> v-html="'按'+goodDetail.goods_unit_name+'购买'"
:class="{'act':navInit==0}"
@click="changeNav(0)"
></span>
<span
v-html="'按'+goodDetail.mpq_unit_name+'购买'"
:class="{'act':navInit==1}"
@click="changeNav(1)"
></span>
</dd> </dd>
</dl> </dl>
<dl class="clr"> <dl class="clr">
...@@ -144,15 +152,22 @@ ...@@ -144,15 +152,22 @@
</dt> </dt>
<dd class="details-num"> <dd class="details-num">
<div class="number"> <div class="number">
<i class="jumpB iconfont icon-jian"></i> <template v-if="navInit==0">
<input class="valuepx" type="text" value="1"> <i class="iconfont icon-jian" @click="reduceSingle"></i>
<i class="addB iconfont icon-jia"></i> <input type="text" v-model.trim="goodsNum" @blur="blurSingle">
<i class="iconfont icon-jia" @click="addSingle"></i>
</template>
<template v-else>
<i class="iconfont icon-jian" @click="reduceZu"></i>
<input type="text" v-model.trim="ypNum" @blur="blurZu">
<i class="iconfont icon-jia" @click="addZu"></i>
</template>
<div class="zyqhcbox" style="display: block;"> <div class="zyqhcbox" style="display: block;">
<div class="zyqhc clr"> <div class="zyqhc clr">
<div class="lfldiv fl"> <div class="lfldiv fl">
<font class="icon iconfont icon-tishi fl"></font> <font class="icon iconfont icon-tishi fl"></font>
</div> </div>
<div class="lfrdiv fr">想要购买更多?直接下单,我们帮您订货</div> <div class="lfrdiv fr">{{tipText}}</div>
</div> </div>
<b class="bbiu"></b> <b class="bbiu"></b>
<b class="bbiu1"></b> <b class="bbiu1"></b>
...@@ -165,50 +180,236 @@ ...@@ -165,50 +180,236 @@
<span class="em1"></span> <span class="em1"></span>
</dt> </dt>
<dd class="onePrice">¥0.0018</dd> <dd class="onePrice">¥{{singlePrice}}</dd>
</dl> </dl>
<dl class="clr"> <dl class="clr">
<dt> <dt>
<span class="em1"></span> <span class="em1"></span>
</dt> </dt>
<dd class="totalPrice">¥0.1800</dd> <dd class="totalPrice">¥{{total}}</dd>
</dl> </dl>
</div> </div>
</div> </div>
<div class="details-foot"> <div class="details-foot">
<span class="but-blue">立即购买</span> <span class="but-blue">{{btnText}}</span>
<span class="but-red">加入购物车</span> <span class="but-red">加入购物车</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from "vuex"; import util from "../../util/index";
export default { export default {
props: {
goodDetail: {
type: Object,
default() {
return {};
}
}
},
data() { data() {
return { return {
isShowMore: false, isShowMore: false,
singleNum: 0, ypNum: 0, //组
ypNum: 0, singlePrice: 0, //单价
singlePrice: 0, tipText: "",
total: 0, btnText: "",
tipText: "" navInit: 0,
startNum: 1, //起订量
multipleNum: 1, //倍数
aggregateNum: 0, //一组的数量
stockNum: 0, //库存,
zyladderArr: [], //阶梯价
zySingleInit: 0, //自营数量初始值
goodsNum: 0 //商品数量
}; };
}, },
computed: { computed: {
...mapState({ total() {
goodDetail: state => state.gooddetail.goodDetail return (this.goodsNum * this.singlePrice).toFixed(4);
}) }
}, },
watch: { watch: {
ypNum(now) {
this.goodsNum = now * this.aggregateNum;
},
goodDetail: { goodDetail: {
handler(newV, oldV) { handler(data) {
console.log(1111) if (JSON.stringify(data) != "{}") {
if (data.min_buy) {
this.startNum = util.aggxde(data.min_buy);
}
if (data.mpl) {
this.multipleNum = util.aggxde(data.mpl);
}
if (data.min_mpq) {
this.aggregateNum = util.aggxde(data.min_mpq);
}
if (data.goods_number) {
this.stockNum = util.aggxde(data.goods_number);
}
if (this.startNum == this.multipleNum) {
//倍数和起订量相等
this.zySingleInit = this.startNum;
} else if (this.startNum > this.multipleNum) {
//起订量大于倍数
if (this.startNum % this.multipleNum) {
//起订量跟倍数的比值为小数
this.zySingleInit =
Math.ceil(this.startNum / this.multipleNum) * this.multipleNum;
} else {
//起订量跟倍数的比值为整数时取起订量
this.zySingleInit = this.startNum;
}
} else {
//起订量小于倍数
this.zySingleInit = this.multipleNum;
}
if (data.tiered) {
for (let i = 0; i < data.tiered.length; i++) {
let singleData = data.tiered[i];
this.zyladderArr.push({
price: Number(singleData.price_cn).toFixed(4),
num: util.aggxde(singleData.purchases)
});
}
}
}
}, },
deep: true deep: true
},
goodsNum(now) {
this.ladderComputer(now);
if (Number(now) > this.stockNum) {
this.tipText = "库存不足,下单后我们将帮您订货";
this.btnText = "预售订货";
} else {
this.tipText = "想要购买更多?直接下单,我们帮您订货";
this.btnText = "立即购买";
}
},
zySingleInit(now) {
this.goodsNum = now;
} }
}, },
methods: {} methods: {
changeNav(i) {
this.navInit = i;
if (i == 1) {
if (this.goodsNum % this.aggregateNum) {
//如果商品数量除以组数不为整数
this.ypNum =
Math.ceil(this.goodsNum / this.aggregateNum) * this.aggregateNum;
} else {
//如果商品数量除以组数为整数
this.ypNum = Number(this.goodsNum) / this.aggregateNum;
}
}
},
ladderComputer(v) {
//阶梯价计算价格v
let length = this.zyladderArr.length;
if (!length) {
//阶梯价的数据为空
this.singlePrice = 0;
return;
} else {
//阶梯价的数据不为空
if (length == 1) {
//阶梯价的数据为1
this.singlePrice = this.zyladderArr[0].price;
return;
} else {
//阶梯价的数据不为1
if (v <= this.zyladderArr[0].num) {
//输入数量小于等于最小值
this.singlePrice = this.zyladderArr[0].price;
return;
} else if (v >= this.zyladderArr[length - 1].num) {
//输入数量大于等于最大值
this.singlePrice = this.zyladderArr[length - 1].price;
return;
} else {
for (let i = 0; i < this.zyladderArr.length; i++) {
if (
v >= this.zyladderArr[i].num &&
v < this.zyladderArr[i + 1].num
) {
this.singlePrice = this.zyladderArr[i].price;
break;
}
}
}
}
}
},
blurSingle() {
//购买数量为0
if (!Number(this.goodsNum)) {
this.$toast("购买数量不能少于起订量!");
this.goodsNum = this.zySingleInit;
} else {
//购买数量不为0
if (Number(this.goodsNum) % this.multipleNum) {
//当购买数量不是倍数的整数倍
let num =
Math.ceil(Number(this.goodsNum) / this.multipleNum) *
this.multipleNum;
if (num < this.startNum) {
//取倍数的整数后小于起订量
this.$toast(
`购买数量必须为${this.multipleNum}的整数倍且不能少于起订量!`
);
this.goodsNum = this.zySingleInit;
} else {
//取倍数的整数后不小于起订量
this.$toast(
`购买数量必须为${
this.multipleNum
}的整数倍,我们已为您调整购买数量。`
);
this.goodsNum = num;
}
}
}
},
blurZu() {
if (Number(this.goodsNum)*Number(this.aggregateNum)<this.startNum) {
this.$toast("购买数量不能少于起订量!");
this.ypNum = Math.ceil(this.startNum/this.aggregateNum)
}
},
reduceSingle() {
if (Number(this.goodsNum) <= this.startNum) {
//购买数量小于等于起订量
this.$toast("购买数量不能少于起订量!");
} else {
//购买数量大于起订量
if (Number(this.goodsNum) - this.multipleNum < this.startNum) {
//购买数量减倍数小于起订量
this.$toast(
`购买数量必须为${this.multipleNum}的整数倍且不能少于起订量!`
);
} else {
this.goodsNum = Number(this.goodsNum) - this.multipleNum;
}
}
},
addSingle() {
this.goodsNum = Number(this.goodsNum) + this.multipleNum;
},
reduceZu() {
if(Number(this.goodsNum) <= this.startNum){
return
}else{
this.ypNum = Number(this.ypNum) - 1;
}
},
addZu() {
this.ypNum = Number(this.ypNum) + 1;
}
}
}; };
</script> </script>
......
...@@ -210,12 +210,12 @@ export default { ...@@ -210,12 +210,12 @@ export default {
brand: "", brand: "",
encap: "", encap: "",
packing: "", packing: "",
classStr: 161, classStr: "",
brandStr: "", brandStr: "",
encapStr: "", encapStr: "",
packingStr: "", packingStr: "",
secondClass: [], //二级分类的数组 secondClass: [], //二级分类的数组
addClassStr: 161, //点击确定生成的分类id addClassStr: "", //点击确定生成的分类id
firstCheckId: "", //当二级数据存在时判断一级数据的id firstCheckId: "", //当二级数据存在时判断一级数据的id
firstClassName: "", //第一级数据的name, firstClassName: "", //第一级数据的name,
secondClassName: "", //第二级数据的name secondClassName: "", //第二级数据的name
...@@ -569,14 +569,14 @@ export default { ...@@ -569,14 +569,14 @@ export default {
} }
.backdrop { .backdrop {
position: fixed; position: fixed;
z-index: 999; 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: 87; z-index:1;
} }
} }
.xianhuo { .xianhuo {
...@@ -594,7 +594,7 @@ export default { ...@@ -594,7 +594,7 @@ export default {
.search-sift { .search-sift {
width: 100%; width: 100%;
position: relative; position: relative;
z-index: 88; 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