电子商务网站开发的基本原则,汕头网站制作流程,邵阳红网站,个人注册公司费用一、效果图
1、主页面
根据物品信息进行菜单分类#xff0c;点击单项购物车图标添加至购物车#xff0c;记录总购物车数量 2、购物车详情页
根据主页面选择的项#xff0c;根据后台查询展示到页面#xff0c;可进行多选#xff0c;数量加减等 二、代码
1、主页面
页…一、效果图
1、主页面
根据物品信息进行菜单分类点击单项购物车图标添加至购物车记录总购物车数量 2、购物车详情页
根据主页面选择的项根据后台查询展示到页面可进行多选数量加减等 二、代码
1、主页面
页面展示顶部导航栏侧边导航栏以及导航栏执行下的内容购物车的点击事件内容单项的点击数量汇总到顶部总购物车总数量
wxml代码
view classmainview classtopinfoview classtopinfo_view flex centerview classtopinfo_model1 flex centerview classtopinfo_model1_searchimage src{{search}}/imageinput typetext placeholder请输入 placeholder-stylecolor:#CCCCCC bindconfirmsearch_info //view/viewview classtopinfo_model2 flex center view classtopinfo_model2_circle flex center bind:tapshoppingClickimage src{{ShoppingCarGreen}} /view classred_single1 flex center wx:if{{shoppingAllCount 0}}{{shoppingAllCount}}/view/view/view/view/viewview classmenuview classtop-menu flex betweenblock wx:for{{Menus}} wx:keyindexview classtopmenu-item flex center {{currentTopMenu item.topname ? topactive :}} data-menu{{item.topname}} bind:taponTopMenuClick{{item.topname}}/view/block/viewview classtop-content flex center wx:if{{!linenone}}view classleft-menublock wx:for{{LeftMenus}} wx:keyindexview classleft-menu-item flex center {{currentLeftMenu item.name ? leftactive : }} bindtaponLeftMenuClick data-menu{{item.name}}view classleft {{currentLeftMenu item.name ? leftactivegreen : }}/viewtext{{item.name}}/text/view/block/viewview classright-contentblock wx:for{{RightInfo}} wx:keyindexview classright-content-view flexview classcontent-img flex centerimage src{{item.img}} modeaspectFill//viewview classcontent-infoview classcinfo-line flex betweentext标题1{{item.info1}}/texttext标题2{{item.info2}}/text/viewview classcinfo-line flex betweentext标题3{{item.info3}}/texttext标题4{{item.info4}}/text/viewview classcinfo-line flex between标题5{{item.info5}}/viewview classcinfo-line flex flex-endview classgreen-btn flex center data-id{{item.id}} bind:tapsingleSelimage src{{ShoppingCarWhite}} mode/view classred_single flex center wx:if{{item.isshopping}}{{item.shoppingCount}}/view/view/view/view/view/block/view/viewview wx:else classnone暂无数据/view/view
/view
wxss代码
主要采用flex布局进行布局
page {background-color: #f5f5f5;font-size:95%;
}.flex {display: flex;
}.center {justify-content: center;align-items: center;
}
.left{position: absolute;left:0;
}
.flex-end{justify-content: flex-end;
}
.between {justify-content: space-between;
}.none {text-align: center;margin-top: 50rpx;color: #969292;
}
/* 顶行搜索栏购物车 */
/* 搜索框 */
.topinfo_view {padding: 4% 0 4% 0;
}.topinfo_model1 {height: 60rpx;width: 85%;
}.topinfo_model1_search {display: flex;align-items: center;height: 100%;width: 90%;border-radius: 10px;padding: 0 20rpx;background-color: #fff;
}.topinfo_model1 image {height: 40rpx;width: 45rpx;margin-right: 10px;
}.topinfo_view input {width: 100%;
}/* 购物车 */
.topinfo_model2 {width: 12%;height: 60rpx;
}.topinfo_model2_circle {width: 60rpx;height: 60rpx;background-color: #fff;border-radius: 50%;position:relative;
}.topinfo_model2_circle image {width: 40rpx;height: 40rpx;
}/* 顶部菜单栏 */
.menu {width: 100%;
}.topmenu-item {width: 100%;padding-bottom: 5px;border-bottom: 3px solid #f5f5f5;
}.topactive {border-bottom: 3px solid #4cc46b;
}/* 主体内容 */
.top-content {height:83vh;padding:10px 0;
}/* 左侧菜单栏 */
.left-menu {width: 25%;height:100%;
}
.leftactivegreen{width:5px;height:80%;background-color: #4cc46b;
}
.leftactive {background-color:#fff;color:#4cc46b;
}
.left-menu-item{height:50px;position:relative
}
.right-content {height:100%;width: 75%;font-size: 90%;background-color: #fff; overflow-y: auto;
}
.right-content-view{border-bottom:3px solid #f6f6f6;width:100%;padding:2% 0;
}
.content-img {width: 30%;margin-right: 2px;/* border:1px solid black; */
}
.content-img image {width: 95%;height: 95%;
}
.content-info{width:65%;
}
.cinfo-line{width:100%;padding:2% 0;
}
.green-btn{background-color:#4cc46b ;width:50rpx;height:50rpx;border-radius: 5px;margin-top:-4%;position:relative;
}
.green-btn image{width:35rpx;height:35rpx;
}
.red_single{border:1px solid #fff;color:#fff;position:absolute;width:25rpx;height:25rpx;top:-15rpx; right:-15rpx;border-radius: 50%;background-color: red;font-size: 10px;
}
.red_single1{border:1px solid #fff;color:#fff;position:absolute;width:25rpx;height:25rpx;top:-12rpx; right:-12rpx;border-radius: 50%;background-color: red;font-size: 10px;
}
js代码
这里主要展示核心数据部分详细可参考资源
Menus: [{topname: 顶部菜单1,leftMenus: [{name: 侧边菜单1,items: [{id: 1,info1: 11,info2: 22,info3: 33,info4: 44,info5: 55,img: ../img/process_2.png},{id: 2,info1: 22,info2: 22,info3: 22,info4: 22,info5: 22,img: ../img/process_1.png},],},{name: 侧边菜单2,items: [{id: 3,info1: 33,info2: 33,info3: 33,info4: 33,info5: 33,img: ../img/process_3.png}],},]},{topname: 顶部菜单2,leftMenus: []},{topname: 顶部菜单3,leftMenus: [{name: 侧边菜单3,items: [{id: 4,info1: 44,info2: 44,info3: 44,info4: 44,info5: 44,img: ../img/process_2.png}],}],},{topname: 顶部菜单4,leftMenus: [{name: 侧边菜单4,items: [{id: 5,info1: 55,info2: 55,info3: 55,info4: 55,info5: 55,img: ../img/process_1.png}],}],},
],
2、购物车界面
主要完成页面的选中项的展示根据主页页面传递的id参数可进行数据库的查询这里没连接后端所以直接展示的实例数据循环出数据项后可对数据项进行多选数据加减等功能
wxml代码
实现页面
view classmainview classitemallinfoview classitem_info flex center wx:for{{allinfo}} wx:keyindex data-id{{item.id}}view classitem flex centerview classsel_checkbox flex centercheckbox value{{item.id}} checked{{item.checked}} bindtaphandleSelectItem data-id{{item.id}} //viewview classinfo_image flex centerimage src{{item.img}} modeaspectFill //viewview classinfo_contentview classinfo_line1配件名称{{item.name}}/viewview classinfo_line1库存数量{{item.stockQty}}{{item.uom}}/viewview classinfo_line1 flex flex-end numbtnview classbtn_minus flex center bindtaphandleMinus data-id{{item.id}}-/viewinput classinput_count typenumber value{{item.count}} bindinputhandleInputChange data-id{{item.id}} /view classbtn_plus flex center bindtaphandlePlus data-id{{item.id}}/view/view/view/view/view/viewview classfooter flex betweenview classselect_all flex centercheckbox bindtaphandleSelectAll checked{{isAllSelected}} / 全选/viewview classbottom2 flex centerview classdelete_btn surebtn flex center bindtaphandleDelete删除/view/viewview classbottom3 flex centerview classsubmit_btn surebtn flex center bindtaphandleSubmit提交/view/view/view
/view
wxss代码
page {background-color: #f6f6f6;font-size: 90%;
}.flex {display: flex;
}checkbox {transform: scale(0.8);
}.center {justify-content: center;align-items: center;
}.flex-end {justify-content: flex-end;align-items: center;
}
.between{justify-content: space-between;
}/* 列表内容 */
.item_info {width: 100%;padding: 5px 0;
}
.itemallinfo{padding:15px 0 100px 0;
}
.item {width: 95%;background-color: #fff;padding: 2% 0;border-radius: 5px;box-shadow: 3px 3px 3px rgb(0, 0, 0, 0.1);
}.sel_radio {width: 12%;
}radio {transform: scale(0.8);
}.info_image {width: 20%;
}.info_image image {width: 60px;height: 60px;
}.info_content {width: 68%;
}.info_line1 {margin: 2% 0;
}.numbtn {height: 25px;align-items: stretch;padding-right:2%;
}.btn_minus,
.btn_plus {border: 1px solid #c0c0c0;width: 30px;/* 设置按钮宽度 */height: 100%;cursor: pointer;/* 可选设置鼠标指针样式 */
}.input_count {border: 1px solid #c0c0c0;width: 50px;/* 设置输入框宽度 */text-align: center;margin: 0 -1px;height: 100%;border-right:0;border-left:0;
}.footer {align-items: center;background-color: #fff;border-top: 1px solid #eee;position:fixed;width:100%;bottom:0;height:70px;
}
.select_all{height:100%;width:30%;
}
.bottom3,.bottom2{height:100%;width:35%;
}
.delete_btn {background-color: #bebebe;color: #fff;
}
.submit_btn {background-color: #f3454e;color: #fff;
}
.surebtn{border-radius: 5px;width:80%;height:30px;
}
js代码
这里主要展示核心数据部分详细可参考资源
var allinfo [{id: 1,info1: 11,info2: 22,info3: 33,info4: 44,info5: 55,img: ../img/process_2.png,count: 1,checked: false, // 默认未选中},{id: 3,info1: 33,info2: 33,info3: 33,info4: 33,info5: 33,img: ../img/process_3.png,count: 2,checked: false, // 默认未选中},{id: 5,info1: 55,info2: 55,info3: 55,info4: 55,info5: 55,img: ../img/process_1.png,count: 1,checked: false, // 默认未选中},
];
