Skip to content

肖康 / H5_2.0

Go to a project
Commit ae34b9ef by 肖康
Options

detail

parent 418d49cc
Inline Side-by-side
Showing with 250 additions and 69 deletions
assets/css/brand/brand.scss
......@@ -189,6 +189,8 @@
position: relative;
margin-left: 10rpx;
top:10rpx;
font-size: 22rpx;
font-weight: normal;
}
}
......
assets/css/classp/list.scss
......@@ -63,6 +63,8 @@
position: relative;
margin-left: 10rpx;
top:10rpx;
font-size: 22rpx;
font-weight: normal;
}
}
......
assets/css/common/addcar.scss
......@@ -32,6 +32,8 @@
position: relative;
margin-left: 10rpx;
top:10rpx;
font-size: 22rpx;
font-weight: normal;
}
}
.iconfont{
......
assets/css/detail/detail.scss
......@@ -46,6 +46,8 @@
color:#fff;
font-size: 20rpx;
margin-left: 16rpx;
font-size: 22rpx;
font-weight: normal;
}
.tdbox{
width: 120rpx;
......@@ -175,7 +177,6 @@
}
.cons{
border: 1rpx solid #C6C7CC;
.groups{
font-size: 24rpx;
color: $uni-color999;
......@@ -318,6 +319,26 @@
}
}
&.act{
.headprice{
background: #FFF8F2!important;
}
.detailfoot .foo1 .checkbox .icon,.detailfoot .foo2 .pr uni-text{
color:#F98119;
}
.detailfoot .foo2 .pr input{
border-left: 1rpx solid #F98119;
border-right: 1rpx solid #F98119;
}
.detailfoot .foo2 .pr{
border: 1px solid #F98119;
}
.detailfoot .btnbox .totalpricebox .addcarbtn{
background: #F98119;
}
}
}
......
assets/css/search/searchlist.scss
......@@ -159,6 +159,7 @@
position: relative;
margin-left: 10rpx;
top:10rpx;
font-size: 22rpx;
}
}
......
components/addcar.vue
......@@ -13,7 +13,7 @@
<text class="icon iconfont icon-xxx" @click="close()"></text>
</view>
<view class="popcons">
<view class="infobox">
<view class="infobox" @click.stop="clickbug">
<view class="itemone row bothSide">
<view class="il elep">
<text class="label">品牌：</text>
......@@ -77,9 +77,9 @@
</view>
</view>
<view class="pr row " >
<text @click="stepgo('small')">-</text>
<text @click.stop="stepgo('small')">-</text>
<input type="number" v-model="num" @input="onInput"/>
<text @click="stepgo('big')">+</text>
<text @click.stop="stepgo('big')">+</text>
</view>
</view>
<view class="priceb">
......@@ -104,7 +104,7 @@
<view class="btnbox">
<view class="totalpricebox row bothSide" v-if="obj.is_buy==1">
<view class="hej">合计：<text class="tje">{{isdl==1?'¥':'$'}}{{totalmoney}}</text></view>
<view class="addcarbtn" @click="addCar">加入购物车</view>
<view class="addcarbtn" @click.stop="addCar">加入购物车</view>
</view>
<a class="kfbtn row verCenter rowCenter" v-else :href="kfqqurl" target="_blank" >
<text class="icon iconfont icon-qq"></text>
......@@ -152,6 +152,9 @@
}, 500);
},
methods: {
clickbug(){
return false;
},
onInput(e){
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
......@@ -308,7 +311,7 @@
this.obj=res.data;
this.num=this.obj.min_buy
this.pticearr=res.data.tiered||[]
if((!this.obj.delivery_cn)&&this.delivery_hk){
if((!this.obj.delivery_cn)&&this.obj.delivery_hk){
this.isdl=2
}
this.open()
......
pages/detail/detail.vue
<template>
<view class="detailpage">
<view class="detailpage " :class="{'act':obj.ac_type==10}">
<drag-button-follow follow="left,right" className="drag-button" class="drag-button" :url="kfurl"></drag-button-follow>
<view class="detailhead row verCenter bothSide">
<text v-back class="icon iconfont icon-arrleft"></text>
......@@ -12,8 +12,8 @@
<view class="cons">
<view class="tits row verCenter bothSide">
<view class="row verCenter">
<text class="goodsName elep">lm358asda</text>
<text class="actag">91折</text>
<text class="goodsName elep">{{obj.sku_name||obj.goods_name}}</text>
<text class="actag" v-if="obj.ac_type==10">{{obj.activity_info.sign}}</text>
</view>
<view class="tdbox row verCenter" @click="open()">
<view class="round row verCenter rowCenter"><text class="icon iconfont icon-tdzty"></text></view>
......@@ -22,17 +22,17 @@
</view>
<view class="attrbox row">
<view class="atl">
<view class="item row">品牌：<text class="">Rice Lake Weighing</text></view>
<view class="item row">供应商：<text class="">Rice Lake Weighing</text></view>
<view class="item row">封装：<text class="">Rice Lake Weighing</text></view>
<view class="item row">包装：<text class="">Rice Lake Weighing</text></view>
<view class="item row">ECCN：<text class="">Rice Lake Weighing</text></view>
<view class="item row">库存：<text class="stock">500</text></view>
<view class="item row">类别：<text class="">Rice Lake Weighing</text></view>
<view class="item row">品牌：<text class="">{{obj.standard_brand_name||obj.brand_name}}</text></view>
<view class="item row">供应商：<text class="">{{obj.supplier_name}}</text></view>
<view class="item row">封装：<text class="">{{obj.encap||'--'}}</text></view>
<view class="item row">包装：<text class="">{{obj.packing||'--'}}</text></view>
<view class="item row">ECCN：<text class="">{{obj.eccn||'--'}}</text></view>
<view class="item row">库存：<text class="stock">{{obj.stock_raw}}</text></view>
<view class="item row">类别：<text class="">{{obj.class_name||'--'}}</text></view>
</view>
<view class="atr">
<image src="https://img.ichunt.com/images/cms/202304/07/9ecd831432bc35dcd9bac28a0136e57d.png"></image>
<a href="" target="_blank" class="row rowCenter verCenter">
<image :src="obj.goods_images||'https://static.ichunt.com/dist/res/home/images/goods_default.png'"></image>
<a :href="obj.pdf" target="_blank" class="row rowCenter verCenter" v-if="obj.pdf">
<text class="icon iconfont icon-down"></text>
<text>下载数据手册</text>
</a>
......@@ -45,59 +45,37 @@
<view class="ptiem">香港交货</view>
</view>
<view class="bodyprice">
<view class="pricegroup row">
<view class="ptiem ptiemone">5000+：</view>
<view class="ptiem">￥140.425</view>
<view class="ptiem">$17.2125</view>
</view>
<view class="pricegroup row">
<view class="ptiem ptiemone">5000+：</view>
<view class="ptiem">￥140.425</view>
<view class="ptiem">$17.2125</view>
</view>
<view class="pricegroup row act">
<view class="ptiem ptiemone">5000+：</view>
<view class="ptiem">￥140.425</view>
<view class="ptiem">$17.2125</view>
</view>
<view class="pricegroup row">
<view class="ptiem ptiemone">5000+：</view>
<view class="ptiem">￥140.425</view>
<view class="ptiem">$17.2125</view>
<view class="pricegroup row" :class="{'act':item.checked}" v-for="(item,index) in pticearr" :key="index" v-show="(jtpricezk)||((!jtpricezk)&&index<3)">
<view class="ptiem ptiemone">{{item.purchases_raw}}+:</view>
<view class="ptiem">￥{{item.price_ac||item.price_cn||'--'}}</view>
<view class="ptiem">${{item.price_ac_us||item.price_us||'--'}}</view>
</view>
</view>
<view class="morebtn row verCenter">
<text>更少阶梯价格</text>
<text class="icon iconfont icon-arrtop"></text>
<view class="morebtn row verCenter" @click.stop="jtpricezk=!jtpricezk" v-if="pticearr.length>3">
<text>{{jtpricezk?'更少阶梯价格':'更多阶梯价格'}}</text>
<text class="icon iconfont " :class="{'icon-arrtop':jtpricezk,'icon-arrbot':!jtpricezk}"></text>
</view>
<view class="noprice" style="display:none;">
<view class="noprice" v-if="pticearr.length==0&&obj.goods_name">
<text class="icon iconfont icon-sanjiaoji"></text>
暂无阶梯价格
</view>
</view>
</view>
</view>
<view class="seoattr">
<view class="seoattr" v-if="obj.attrs&&obj.attrs.length>0" :style="!zkattr?'padding-bottom:0px;':''">
<view class="tio row bothSide verCenter">
<text>参数</text>
<text class="icon iconfont icon-arrtop"></text>
<text class="icon iconfont " :class="{'icon-arrtop':zkattr,'icon-arrbot':!zkattr}" @click.stop="zkattr=!zkattr"></text>
</view>
<view class="cons">
<view class="groups row">
<text class="one1">封装规格：</text>
<text>0603</text>
<view class="cons" v-show="zkattr">
<view class="groups row" v-for="(item,index) in obj.attrs" :key="index">
<text class="one1">{{item.attr_name}}：</text>
<text>{{item.attr_value}}</text>
</view>
<view class="groups row">
<text class="one1">封装规格：</text>
<text>0603</text>
</view>
<view class="groups row">
<text class="one1">封装规格：</text>
<text>0603</text>
</view>
<view class="groups row">
<view class="groups row" v-if="obj.spu_brief">
<text class="one1">介绍：</text>
<text>ad上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方</text>
<text>{{obj.spu_brief}}</text>
</view>
</view>
</view>
......@@ -107,30 +85,30 @@
<view class="foo1 row bothSide verCenter">
<view>交期：</view>
<view class="row">
<view class="row hqitem">
<text class="checkbox checked"><text class="icon iconfont icon-xzs"></text></text>
<view class="row hqitem" @click.stop="tabhuoqi(1)" v-if="obj.cn_delivery_time">
<text class="checkbox " :class="{'checked':isdl==1}"><text class="icon iconfont icon-xzs"></text></text>
<text>大陆3-5日</text>
</view>
<view class="row hqitem">
<text class="checkbox"></text>
<view class="row hqitem" @click.stop="tabhuoqi(2)" v-if="obj.hk_delivery_time">
<text class="checkbox" :class="{'checked':isdl==2}"><text class="icon iconfont icon-xzs"></text></text>
<text>香港3-5日</text>
</view>
</view>
</view>
<view class="foo2 row bothSide verCenter">
<view>数量：<text class="f9">(起订量:</text>400 <text class="f9 ml24">递增量:</text>1<text class="f9">)</text></view>
<view @click="clickbug()">数量：<text class="f9">(起订量:</text>{{obj.moq_mip}}<text class="f9 ml24">递增量:</text>{{obj.multiple_mip||obj.mpq_mip}}<text class="f9">)</text></view>
<view class="pr row " >
<text>-</text>
<input type="number" value="1"/>
<text>+</text>
<text @click.stop="stepgo('small')">-</text>
<input type="number" v-model="num" @input="onInput"/>
<text @click.stop="stepgo('big')">+</text>
</view>
</view>
<view class="btnbox">
<view class="totalpricebox row bothSide verCenter" >
<view class="hej">合计：<text class="tje">¥3235.6856</text></view>
<view class="addcarbtn">加入购物车</view>
<view class="totalpricebox row bothSide verCenter" v-if="obj.is_buy==1">
<view class="hej">合计：<text class="tje">{{isdl==1?'¥':'$'}}{{totalmoney}}</text></view>
<view class="addcarbtn" @click.stop="addCar">加入购物车</view>
</view>
<a class="kfbtn" style="display:none">
<a class="kfbtn" v-else :href="kfurl" target="_blank" >
<text class="icon iconfont icon-qq"></text>
联系客服
</a>
......@@ -161,10 +139,182 @@
export default {
data() {
return {
jtpricezk:true,
zkattr:true,
timeout:"",//请求延迟定时器
kfurl:"",
goods_id:"",
obj:{},
pticearr:[],
num:1,
isdl:1,
totalmoney:0
}
},
mounted() {
setTimeout(() => {
this.kfurl = this.$globalData.kfqq_xk;
}, 500);
},
onShow() {
this.goods_id = this.$Route.query.goods_id;
this.getData();
},
methods: {
clickbug(){
return false;
},
onInput(e){
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
let mpl = Number(this.obj.multiple_mip||this.obj.mpq_mip);//倍数 加减的数量基数
let stock = Number(this.obj.stock_raw);//库存
let moq = Number(this.obj.moq_mip);//起订量
let value_ = Number(e.detail.value);//当前的数量
console.log(value_)
value_ = Math.ceil(value_ / mpl) * mpl;//失去焦点数量
this.num = value_;//最终的数量
if (value_ < moq) {
this.num = moq
}
if (value_ > stock) {
this.num = Math.floor(stock / mpl) * mpl;
}
this.pticeui()
}, 800);
},
stepgo(type){
let mpl = Number(this.obj.multiple_mip||this.obj.mpq_mip);//倍数 加减的数量基数
let stock = Number(this.obj.stock_raw);//库存
let moq = Number(this.obj.moq_mip);//起订量
let value_ = this.num;//当前的数量
if(type=="small"){
//减法
var down_value = value_ - mpl;//减过后的值
if (down_value < moq) {
this.num = moq;
uni.showToast({
title: '数量不能小于起订量',
duration: 2000,
icon:"none"
})
} else {
this.num = down_value
}
}else{
//加法
var up_value = value_ + mpl;//加过后的值
if (up_value > stock) {
uni.showToast({
title: '数量不能大于库存',
duration: 2000,
icon:"none"
})
this.num = Math.floor(stock / mpl) * mpl;
} else {
this.num = up_value
}
}
this.pticeui()
},
tabhuoqi(guid){
this.isdl=guid;
this.pticeui()
},
addCar(){
let datax={
id:this.obj.goods_id,
num:this.num,
buy:1,
delivery_place:this.isdl,
isZy:(this.obj.goods_type==1||this.obj.goods_type==2)?0:1,
}
this.request(Api_Url + "/cart/add", 'POST', datax,true,true).then(res => {
if (res.err_code == 0) {
uni.showToast({
title: res.err_msg,
duration: 2000,
icon:"success"
})
this.close()
}else{
uni.showToast({
title: res.err_msg,
duration: 2000,
icon:"error"
})
}
});
},
//计算阶梯价格 总价
pticeui(){
if(this.pticearr.length==0){return}
//渲染阶梯价格
this.pticearr.forEach((item,index)=>{
item.checked=false
})
this.pticearr.forEach((item,index)=>{
let value_=this.num
let pus=item.purchases_raw
var next_pus=""
var prev_pus=""
if(index!=this.pticearr.length-1){
next_pus=this.pticearr[index+1].purchases_raw
}
if(index!=0){
prev_pus=this.pticearr[index-1].purchases_raw
}
if (value_ == pus) {
item.checked=true
return false;
}
if(index==0){
if(value_>pus){
item.checked=true
return false;
}
}
if(index==this.pticearr.length-1){
if(value_<pus){
item.checked=true
return false;
}
}
if (value_ < pus && value_ > next_pus) {
this.pticearr[index+1].checked=true
return false;
}
if (value_ > pus && value_ < prev_pus) {
item.checked=true
return false;
}
})
//计算价格
let actitem={};
this.pticearr.forEach((item,index)=>{
if(item.checked){
actitem=item
}
})
let price_=Number(this.isdl==1?(actitem.price_ac||actitem.price_cn||0):(actitem.price_ac_us||actitem.price_us||0));
this.totalmoney=(price_*this.num).toFixed(2)
},
getData(){
this.request(Ichunt_Api + '/api/sku/detail', 'GET', {goods_id:this.goods_id},true).then(res => {
if (res.err_code === 0) {
this.obj=res.data.sku
this.pticearr=this.obj.ladder_price||[]
this.num=this.obj.moq_mip
if((!this.obj.cn_delivery_time)&&this.obj.hk_delivery_time){
this.isdl=2
}
this.pticeui()
}
});
},
open() {
this.$refs.popup.open('bottom');
},
......
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