Skip to content

肖康 / H5_2.0

Go to a project
Commit c2365811 by 肖康
Options

购物车页面完成

parent ddbafbda
Expand all
Inline Side-by-side
Showing with 796 additions and 5 deletions
assets/css/car/car.scss 0 → 100644
.carpage{
height:100vh;
position: relative;
background: linear-gradient(200deg, #D6E8FF 0%, #F5F5F7 554rpx);
padding-bottom: 220rpx;
overflow-y: auto;
padding-top: 180rpx;
.pagebot{
height: 62rpx;
line-height: 62rpx;
background: #F5F5F7;
font-size: 22rpx;
text-align: center;
color:#C6C7CC;
}
.checkbox{
display: inline-block;
width:32rpx;
height:32rpx;
background: #fff;
border-radius: 32rpx;
border:2rpx solid #c2c4cc;
.icon{display: none;color:$uni-coloract;}
position: relative;
top:4rpx;
&.checked{
border:0rpx;
line-height: 32rpx;
position: relative;
top:0rpx;
.icon{display: inline;}
}
}
.header{
height:180rpx;
width:750rpx;
top:0rpx;
left:0rpx;
position: fixed;
z-index: 6;
background: linear-gradient(200deg, #D6E8FF 0%, #F5F5F7 554rpx);
padding-bottom: 16rpx;
.ht{
height:88rpx;
padding:0 24rpx;
.tabbox{
.tabeitem{
font-size: 28rpx;
color:$uni-color666;
height:88rpx;
line-height: 88rpx;
margin-right: 60rpx;
position: relative;
&:first-child{
margin-left: 12rpx;
}
text{
font-size: 24rpx;
color:$uni-color999;
margin-left: 8rpx;
}
&.act{
color:$uni-color333;
font-weight: 600;
&::after{
content:"";
position: absolute;
width: 53rpx;
height: 7rpx;
background: #1969F9;
border-radius: 4rpx;
bottom:0rpx;
left:50%;
transform: translateX(-36rpx);
}
}
}
}
.glbtn{
font-size: 28rpx;
color:$uni-coloract;
height:88rpx;
line-height: 88rpx;
}
}
.hb{
width: 702rpx;
height: 60rpx;
line-height: 60rpx;
background: #FFF8F2;
border-radius: 30rpx;
margin:0 auto;
margin-top: 16rpx;
font-size: 24rpx;
padding:0 24rpx;
color:$uni-colorwarning;
.icon-ts{
font-size: 32rpx;
margin-right: 16rpx;
position: relative;
top:2rpx;
}
.icon-jt{
font-size: 28rpx;
}
}
}
.dataBox{
padding:0 24rpx;
.goodsitem{
background: #FFFFFF;
border-radius: 10rpx;
padding:24rpx;
.edit{
color:$uni-color999;
font-size: 24rpx;
position: relative;
top:4rpx;
.icon{
font-size: 32rpx;
margin-right: 5rpx;
position: relative;
top:2rpx;
}
&.del{
color:#FF3700;
}
}
.xxtag{
width: 60rpx;
height: 28rpx;
background: #C2C4CC;
border-radius: 4rpx;
font-size: 20rpx;
text-align: center;
line-height: 28rpx;
margin-left: 12rpx;
color:#fff;
position: relative;
top:8rpx;
}
.searchgo{
font-size: 24rpx;
color:$uni-coloract;
margin-right: 24rpx;
position: relative;
top:8rpx;
}
.actag{
height: 28rpx;
padding: 0 10rpx;
line-height: 28rpx;
background: #FF3700;
border-radius: 0px 14rpx 14rpx 0px;
color:#fff;
position: relative;
margin-left: 10rpx;
top:8rpx;
font-size: 24rpx;
}
.goodsname{
max-width:400rpx;
margin-left: 16rpx;
font-weight: 600;
color:$uni-color333;
}
.lbo{
max-width:340rpx;
line-height: 40rpx;
margin-top: 20rpx;
font-size: 24rpx;
color:$uni-color666;
padding-left: 48rpx;
.label{
color:$uni-color999;
}
}
.rbo{
padding-top: 20rpx;
.ipbox{
font-size: 22rpx;
color:$uni-color666;
height: 48rpx;
line-height: 48rpx;
.ch{
color:$uni-color999;
margin-left:12rpx;
margin-right:12rpx;
}
input{
width: 108rpx;
height: 48rpx;
border-radius: 8rpx;
border: 1rpx solid #C6C7CC;
font-size: 24rpx;
font-weight: 600;
color:$uni-color333;
text-align: center;
}
}
.xjbox{
margin-top: 36rpx;
font-size: 24rpx;
color:$uni-color999;
text-align: right;
width:100%;
.xjmoney{
color:$uni-colorwarning;
font-weight: 600;
}
}
}
&.sxbox{
.checkbox{
background:#F5F5F7;
border-color:#F5F5F7;
}
.goodsname,.del,.lbo,.xjmoney,input{
color:$uni-color999!important;
}
}
}
}
.nodata{
image{
display: block;
width:356rpx;
height:356rpx;
margin:0 auto;
padding-top: 124rpx;
margin-bottom: 32rpx;
}
.ndtips{
text-align: center;
font-size: 28rpx;
color:$uni-color333;
}
navigator{
width: 344rpx;
height: 68rpx;
display: block;
margin:0 auto;
line-height: 68rpx;
background: $uni-coloract;
border-radius: 10rpx;
text-align: center;
color:#fff;
font-size: 28rpx;
margin-top: 130rpx;
}
}
.footer{
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 0px 0px;
position: fixed;
z-index: 6;
bottom:100rpx;
border-bottom: 1rpx solid #F0F0F2;
.jsboxcar{
height: 120rpx;
padding:20rpx 24rpx;
.jsl{
line-height: 80rpx;
.trps{
font-size: 24rpx;
color:$uni-color999;
margin-left: 16rpx;
}
.clearsx{
font-size: 24rpx;
color:$uni-color666;
margin-left: 16rpx;
}
}
.jsr{
font-size: 22rpx;
color:$uni-color999;
.titg{
font-size: 24rpx;
color:$uni-color666;
}
.tity{
font-size: 32rpx;
color:$uni-colorwarning;
font-weight: 600;
}
.checkcount{
color:$uni-coloract;
margin-left: 5rpx;
margin-right: 5rpx;
}
.yxbox{
margin-bottom: 9rpx;
}
.goconfirm1{
width: 180rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background: #fff;
border-radius: 10rpx;
color:$uni-coloract;
font-size: 28rpx;
border: 2rpx solid $uni-coloract;
}
.goconfirm{
margin-left: 24rpx;
width: 180rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background: $uni-coloract;
border-radius: 10rpx;
color:#fff;
font-size: 28rpx;
font-weight: 600;
}
.goconfirm2{
font-weight: 400;
}
}
}
}
.frend-pop{
background: rgba(0,0,0,0.5);
position: fixed;
z-index: 7;
left:0rpx;
top:0rpx;
bottom:0rpx;
right:0rpx;
.poppbox{
width:100%;
height:100%;
position: relative;
.cons{
position: absolute;
left:0rpx;
bottom:0rpx;
width: 750rpx;
background: linear-gradient(180deg, #F0F6FF 0%, #FFFFFF 100%);
border-radius: 10rpx 10rpx 0px 0px;
.pophead{
height:84rpx;
line-height: 40rpx;
padding-left:100rpx;
padding:24rpx;
.tits{
font-size: 28rpx;
font-weight: 600;
color: $uni-color333;
margin-left: 280rpx;
}
.iconfont{
font-size: 40rpx;
color:#c2c4cc;
}
}
.popcons{
padding:24rpx;
font-size: 24rpx;
color:$uni-color999;
line-height: 38rpx;
max-height:860rpx;
overflow-y: auto;
view{
font-size: 26rpx;
font-weight: 600;
color:$uni-color666;
margin-bottom: 10rpx;
}
}
}
}
}
}
\ No newline at end of file
assets/css/index/index.scss
.indexPage{
padding-bottom: 100rpx;
}
.header{
height: 466rpx;
background: linear-gradient(200deg, #D6E8FF 0%, #FFFFFF 100%);
......
components/ay-operate/del_slideLeft.vue 0 → 100644
<template>
<view>
<view class="box-slideLeft" >
<view class="touch-item touch-slideLeft " @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :style="item_show.txtStyle">
<slot />
</view>
<view class="touch-item del-box-touch-slideLeft cf-shuCenter" @click="delItem(item_show)">
删除
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
props: {
data_transit: {
type: Object,
default () {
return {}
}
},
//可不传参
item: {
type: Object,
default () {
return {}
}
},
},
computed: {
},
data() {
return {
item_show : {},
delBtnWidth: 60, //删除按钮宽度单位（rpx）
startX: '',
};
},
created:function(){
//专门处理检查对象中，某字段是否存在的，如果存在返回 true 不存在返回 false
let that = this ;
let item = that.item ;
if(!item.hasOwnProperty("txtStyle")){
this.$set(this.item,'txtStyle','');//不需要初始化了
}
this.item_show = this.item ;
},
watch: {
item(e){
this.item_show = e ;
},
},
methods: {
//点击删除按钮事件
delItem: function(e) {
let that = this;
let data ={
item : e ,
data : that.data_transit ,
};
this.$emit('delItem', data);
},
touchS: function(e) {
let that = this;
if (e.touches.length == 1) {
//设置触摸起始点水平方向位置
this.startX = e.touches[0].clientX
}
},
touchM: function(e) {
let that = this;
if (e.touches.length == 1) {
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.startX - moveX;
var delBtnWidth = this.delBtnWidth;
var txtStyle = "";
if (disX == 0 || disX < 0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变
txtStyle = "left:0px";
} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
txtStyle = "left:-" + disX + "px";
if (disX >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "left:-" + delBtnWidth + "px";
}
}
//获取手指触摸的是哪一项
that.item_show.txtStyle = txtStyle;
}
},
touchE: function(e) {
let that = this;
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束，手指移动的距离
var disX = this.startX - endX;
var delBtnWidth = this.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
//获取手指触摸的是哪一项
that.item_show.txtStyle = txtStyle;
}
},
}
}
</script>
<style lang="scss">
.box-slideLeft {
margin-bottom: 16rpx;
&:last-child{margin-bottom: 0rpx;}
border-radius: 10rpx;
view {
box-sizing: border-box;
}
position: relative;
overflow: hidden;
.touch-item {
position: absolute;
top: 0;
background-color: #FFFFFF;
// border-radius: 10px;
overflow: hidden;
}
.touch-slideLeft {
position: relative;
width: 100%;
z-index: 5;
transition: left 0.2s ease-in-out;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.del-box-touch-slideLeft {
right: 0;
float: left;
width: 120rpx;
height: 100%;
line-height: 101px;
background-color: #FF3700;
border-radius: 0 10px 10px 0;
color: #fff;
font-size: 24rpx;
font-weight: lighter;
text-align: center;
}
.cf-shuCenter{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
</style>
components/bottom_nav.vue
<template>
<view class="bottom-nav-fixed row">
<navigator url="#" class="navitem" :class="{'act':actval==1}">
<navigator url="/" class="navitem" :class="{'act':actval==1}">
<text class="icon iconfont icon-home"></text>
<view>首页</view>
</navigator>
......@@ -8,7 +8,7 @@
<text class="icon iconfont icon-class"></text>
<view>分类</view>
</navigator>
<navigator url="#" class="cartbgo navitem" :class="{'act':actval==3}">
<navigator url="/joincart" class="cartbgo navitem" :class="{'act':actval==3}">
<text class="icon iconfont icon-car"></text>
<view >购物车<text class="counts">11</text></view>
</navigator>
......@@ -44,14 +44,13 @@
</script>
<style scoped lang="scss">
uni-page-body{padding-bottom:100rpx;}
.bottom-nav-fixed {
width: 750rpx;
height: 100rpx;
background: #fff;
position: fixed;
bottom:0rpx;
z-index: 666;
z-index: 6;
padding-top: 14rpx;
navigator{
display: block;
......
package.json 0 → 100644
{
"id": "ay-operate",
"name": "操作组件：左滑删除，自定义任意内容",
"version": "1.0.1",
"description": "操作组件：左滑删除，自定义任意内容",
"keywords": [
"左滑删除"
]
}
\ No newline at end of file
pages.json
......@@ -17,6 +17,12 @@
"style": {
"navigationBarTitleText": "搜索列表"
}
},
{
"path": "pages/car/car",
"style": {
"navigationBarTitleText": "购物车"
}
}
],
"globalStyle": {
......
pages/car/car.vue 0 → 100644
<template>
<view class="page carpage">
<view class="header">
<view class="ht row bothSide">
<view class="tabbox row">
<view class="tabeitem act">大陆交货<text>(5)</text></view>
<view class="tabeitem">香港交货<text>(5)</text></view>
</view>
<view class="glbtn" @click="editStatus=!editStatus">{{editStatus?'退出管理':'管理'}}</view>
</view>
<view class="hb">
<view class="row bothSide">
<view>
<text class="icon iconfont icon-ts"></text>
<text>1.型号数据更新延迟问题 2.国际运费补差情况…</text>
</view>
<view @click="frendPopShow=!frendPopShow">查看<text class="icon iconfont icon-jt"></text></view>
</view>
</view>
</view>
<view class="dataBox">
<delSlideLeft @delItem="delItem(666)" v-for="(item,index) in carList" :key="index">
<view class="goodsitem">
<view class="t1 row bothSide">
<view class="row">
<view><text class="checkbox "><text class="icon iconfont icon-xzs"></text></text></view>
<view class="goodsname elep">L6207PD013</view>
<view class="actag">95折</view>
</view>
<view class="edit" v-show="!editStatus"><text class="icon iconfont icon-bjt"></text>编辑</view>
<view class="edit del" v-show="editStatus"><text class="icon iconfont icon-del"></text>删除
</view>
</view>
<view class="t2 row bothSide">
<view class="lbo">
<view class="elep"><text class="label">品牌：</text>Ti</view>
<view class="elep"><text class="label">供应商：</text>mouse</view>
<view class="elep"><text class="label">交期：</text>大陆3-5</view>
</view>
<view class="rbo">
<view class="ipbox row">
<text>￥1.0784</text>
<text class="ch">x</text>
<input type="number" />
</view>
<view class="xjbox ">
<text>小计：</text>
<text class="xjmoney">￥1.0784</text>
</view>
</view>
</view>
</view>
</delSlideLeft>
<delSlideLeft @delItem="delItem(777)">
<view class="goodsitem sxbox">
<view class="t1 row bothSide">
<view class="row">
<view><text class="checkbox "><text class="icon iconfont icon-xzs"></text></text></view>
<view class="goodsname elep">L6207PD013</view>
<view class="xxtag">失效</view>
</view>
<view class="row">
<navigator url="#" class="searchgo">重新搜索</navigator>
<view class="edit del"><text class="icon iconfont icon-del"></text>删除</view>
</view>
</view>
<view class="t2 row bothSide">
<view class="lbo">
<view class="elep"><text class="label">品牌：</text>Ti</view>
<view class="elep"><text class="label">供应商：</text>mouse</view>
<view class="elep"><text class="label">交期：</text>大陆3-5</view>
</view>
<view class="rbo">
<view class="ipbox row">
<text>￥1.0784</text>
<text class="ch">x</text>
<input type="number" />
</view>
<view class="xjbox ">
<text>小计：</text>
<text class="xjmoney">￥1.0784</text>
</view>
</view>
</view>
</view>
</delSlideLeft>
<view class="pagebot">—— 已经到底了 ——</view>
</view>
<view class="nodata" style="display:none;">
<image src="https://img.ichunt.com/images/ichunt/202304/11/124e12f1e680f6eb5f5f46780d679eb3.png">
</image>
<view class="loginyes" style="display:none;">
<view class="ndtips">当前购物车内暂无商品哦</view>
</view>
<view class="loginno">
<view class="ndtips">登录后商品会同步到您的帐户中</view>
<navigator url="/login">去登录</navigator>
</view>
</view>
<view class="footer">
<view v-show="!editStatus" class="jsboxcar row bothSide">
<view class="jsl row">
<view><text class="checkbox "><text class="icon iconfont icon-xzs"></text></text></view>
<text class="trps">全选</text>
</view>
<view class="jsr row">
<view>
<view><text class="titg">总金额：</text><text class="tity">¥0</text></view>
<view class="yxbox">已选 <text class="checkcount">0</text> 件( 不含运费 )</view>
</view>
<view class="goconfirm">去结算</view>
</view>
</view>
<view v-show="editStatus" class="jsboxcar row bothSide">
<view class="jsl row">
<view><text class="checkbox "><text class="icon iconfont icon-xzs"></text></text></view>
<text class="trps">全选</text>
<text class="clearsx">清除失效商品</text>
</view>
<view class="jsr row">
<view class="goconfirm1">更换交货地</view>
<view class="goconfirm goconfirm2">删除</view>
</view>
</view>
</view>
<bottomNavFixed actval="3" />
<view class="frend-pop" v-show="frendPopShow">
<view class="poppbox" @click="frendPopShow=!frendPopShow">
<view class="cons" @click.stop="frendPopShow=frendPopShow">
<view class="pophead row bothSide">
<text class="tits">友情提醒</text>
<text class="icon iconfont icon-xxx" @click.stop="frendPopShow=!frendPopShow"></text>
</view>
<view class="popcons">
<view>1.国际运费补差情况</view>
（1）由于部分型号（如风扇、线缆、模块等）采购数量较多、体积较大或重量较重等原因出现超重情况时，视供应商不同可能需要客户补交超出部分的运费；<br>
（2）出现超重情况时，我们客服人员会第一时间与您取得联系，提醒您补交运费事项。<br><br>
<view>2.关税、商检、3C费用</view>
（1）根据国家海关规定：集成电路（IC）类的进口免关税；<br>
（2）非集成电路类的元器件（如继电器、带通滤波器、衰减器、各类模块、线缆等）可能需要额外增收3%-12%的关税；<br>
（3）开关、保险丝、气体放电管等需要商检和3C认证费用；<br>
（4）如果您所提交的订单中包含需要缴纳关税或其他报关费用的型号，我们客服人员会第一时间与您取得联系，并告知补款相关事宜。<br><br>
<view>3.关于禁运型号</view>
（1）猎芯网严格遵守海外供应商的相关出口限制规定，但凡涉及出口限制/禁运的型号均不予下单采购，具体情况需根据供应商的出货情况而定；<br>
（2）有时可能会发生在发货前临时被告知属于出口限制/禁运范围，需要撤单退款的情况。由此而产生的损失，猎芯网将不承担责任。给您带来不便我们深表歉意，敬请谅解。<br><br>
<view>4.订单审核机制</view>
（1）由于货物可能存在的关税、禁运等情况，猎芯网设置订单审核机制。用户成功提交订单后，需要由猎芯网客服人员确认订单，没有问题后再进行付款。订单审核的具体状态可登陆会员中心查看，或者联系在线客服了解详情。<br><br>
<view>5.型号数据更新延迟问题</view>
（1）猎芯网部分数据来源于供应商，基本保证实时更新。但是由于供应商库存数据对全球开放或者供应商网站本身数据存在少量更新不及时的情况，您在采购时所看到的现货价格和库存数等信息有可能存在些许误差；<br>
（2）成功下单后，若订单状态更新为“已确认订单”，请尽快付款，以免价格和库存数量发生变动。如有特殊情况发生，我们客服人员会第一时间与您取得联系。<br><br>客服热线：0755-82560956<br>企业QQ：800158432
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import delSlideLeft from '@/components/ay-operate/del_slideLeft.vue'
import bottomNavFixed from '@/components/bottom_nav.vue';
export default {
components: {
delSlideLeft,
bottomNavFixed
},
data() {
return {
frendPopShow: false,
editStatus:false,
carList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
},
methods: {
delItem(car_id) {
console.log(car_id)
}
}
}
</script>
<style scoped lang="scss">
@import '../../assets/css/car/car.scss';
</style>
\ No newline at end of file
pages/index/index.vue
<template>
<view class="page">
<view class="page indexPage">
<drag-button-follow follow="left,right" className="drag-button" class="drag-button"></drag-button-follow>
<view class="header " :class="{'fixedtop':scrollTop>45}">
<view class="search-topb row bothSide ">
......
router/index.js
......@@ -35,6 +35,13 @@ const router = new Router({
title: '搜索列表',
},
},
{
path: '/pages/car/car',
aliasPath: '/joincart',
meta: {
title: '购物车',
},
},
]
});
......
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