不懂开发如何建设网站,重庆网上房地产查询备案价,绿化信息网站建设,如何完成seo优化基于微信小程序的在线商城点单系统 前言#xff1a;闲来无事#xff0c;想以后自己开一个小超市或者小吃店#xff0c;能够支持线上下单#xff0c;既方便客户也方便自己。系统采用Java语言作为后端实现与小程序的交互#xff0c;给用来学习或者想自己开个小店的朋友当个参…基于微信小程序的在线商城点单系统 前言闲来无事想以后自己开一个小超市或者小吃店能够支持线上下单既方便客户也方便自己。系统采用Java语言作为后端实现与小程序的交互给用来学习或者想自己开个小店的朋友当个参考。 目录 一、项目介绍二、相关技术三、小程序效果图四、后台管理效果图五、代码块 一、项目介绍
小程序主要有首页、商品详情、商品分类、商品评价、购物车、个人中心等模块。
管理端主要有人员管理、权限管理、商品管理、订单管理等模块。二、相关技术
htmlcssjs微信小程序界面。
SpringBoot框架Java程序语言小程序及后台管理系统API的实现。
Layui前端框架web后台管理界面样式及数据渲染框架。
MySQL数据库数据支持。三、小程序效果图 四、后台管理效果图 五、代码块
!-- 自定义顶部 start --
view classyx-custom stylepadding-top:{{statusBarHeight}}px;background-image: linear-gradient(43deg, #12C206,#00C90F);view classheaderBoxview classleftAddressimage classleftAddressIcon src{{imgUrl}}/upload/20220608/addressIcon.png lazy-loadtrue/imageview classleftAddressText little橘猫餐厅/viewimage classrightJtIcon src{{imgUrl}}/upload/20220608/jtBottom.png lazy-loadtrue/image/viewview classappletsTitle/view/view
/view
!-- 自定义顶部 占位标签 --
view classyx-empty_custom stylepadding-top:{{statusBarHeight}}px;/view
!-- banner图 --
view stylebackground: url({{imgUrl}}/upload/20220608/topBackImg.png);background-size: 100% 100%;width:750rpx;height:324rpx;view classbannerBottom/view
/view
!-- 分类及商品 --
view classcontainerBox styleheight:{{nowEquipmentHeight-((statusBarHeight*2)162)}}px;scroll-view classmenu-left scroll-ytrue styleheight:{{nowEquipmentHeight-((statusBarHeight*2)162)}}px;view wx:for{{menuList}} classlittle {{menuIndexindex?menu-item-check:menu-item}} {{item.prevClass}} {{item.nextClass}} bindtapclickMenu data-index{{index}}{{item.title}}/viewview classbottomHeightBox/view/scroll-viewscroll-view classmenu-right scroll-ytrue styleheight:{{nowEquipmentHeight-((statusBarHeight*2)162)}}px;view classmenuTitleBoxtext热门推荐/text/viewview classproductContainerview classproductItem wx:for{{20}} bindtapgoDetailview classproductImage stylebackground: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;/viewview classproductName little超级无敌好吃美味烤鸭/viewview classproductPriceBoxview classsalePricetext stylefont-size:22rpx;/texttext58.88/texttext stylefont-weight:400;/g/text/viewview classoldPrice middleLine98/view/view/view/viewview classbottomHeightBox/view/scroll-view
/view
!-- image classscanIcon src{{imgUrl}}/Areas/dfapi/Content/images/cp.png lazy-loadtrue/image --
image classscanIcon src{{imgUrl}}{{scanUrl}} lazy-loadtrue bindtapscanTableCode/image!--pages/productDetail/index.wxml--
!-- 商品轮播图 --
view classproduct-bannerswiper classproduct-banner bindchangeonSlideChange indicator-dots{{indicatorDots}} autoplay{{autoplay}}interval{{interval}} duration{{duration}} circular{{circular}}block wx:for{{productBanner}} wx:keyidswiper-itemviewimage src{{item}} classproduct-banner alt lazy-loadtrue //view/swiper-item/block/swiper
/view
!-- 秒杀商品展示 --
view wx:if{{productActiviType0}} classactiveBoxstylebackground: url({{imgUrl}}/upload/20220608/kill-pro-back.png);background-size: 100% 100%;view classkill-leftBoxview classproduct-priceBoxview styleheight:35rpx;line-height: 35rpx;text classsymbol-kill/texttext classprice-kill58.8/texttext classthrouth-kill98/text/viewview classnum-kill displayBox限量200份/view/viewview classjustNum-killtext已售198份/texttextclassjust-rightText每人限购1份/text/view/viewview classkill-rightBoxview classjust-text距秒杀结束仅剩/viewview classkill-timeBoxview classclockBox margin-one displayBox{{hour}}/viewview classlittleClock:/viewview classclockBox displayBox{{min}}/viewview classlittleClock:/viewview classclockBox displayBox{{second}}/view/view/view
/view
!-- 商品名称 --
view classproductName-box littleTwo超级无敌好吃美味烤鸭
/view
!-- 商品描述 --
view classproductDesc-box littleTwo色泽红艳肉质细嫩味道醇厚肥而不腻
/view
!-- 分享奖励 --
view classproductShare-money bindtapshareProductview classleft-Sharetext该商品分享可得奖励10/text/viewview classright-Shareimage src{{imgUrl}}/upload/20220608/share.png lazy-loadtrue/imagetext立即分享/text/view
/view
!-- 商品配置规格 --
!-- view classproductInfoBoxview classheightInfo/viewview classDistribution bindtapchouseAddressview classtitle-info配送/viewview classchouseSpe请选择收货地址/viewimage src{{imgUrl}}/upload/20220608/rightJt.png lazy-loadtrue/image/view
/view --!-- 服务 --
view classservices-boxview classservices-left服务/viewview classservices-right新鲜品质 配送到家 售后无忧/view
/view!-- 商品评价 --
view classproduct-reply view classreply-titleview classleftReolyCount评价(2824)/viewview classmiddleSeeMoreview查看全部评价/view/viewimage classgrayRight src{{imgUrl}}/upload/20220608/rightJt.png lazy-loadtrue/image/viewview classreplyUserInfoimage classreplyUserHead src{{imgUrl}}/upload/20220608/jocker.jpg lazy-loadtrue/imageview classrightUserNameview classuserName little橘猫大侠/viewview classstarBoximage src{{imgUrl}}/upload/20220608/star5.png classstarImg/image/view/view/viewview classreplyContet littleTwo味道好配送快值得信赖/view
/view !-- 商品详情 --
image classproImgDetail src{{imgUrl}}/upload/20220608/prodetailImg.png lazy-loadtrue/imageview styleheight:56rpx;/viewview classproductDetailTable wx:if{{spuList.length0}}view wx:if{{!isShowDetail}}view classproductTableTrview classleftTrview classlittle leftTrText{{spuList[0].name}}/view/viewview classrightTr little{{spuList[0].content}}/view/view/viewview wx:if{{isShowDetail}} classproductTableTr wx:for{{spuList}}view classleftTrview classlittle leftTrText{{item.name}}/view/viewview classrightTr little{{item.content}}/view/view/viewview classDetailArrow displayBox wx:if{{spuList.length0}}image wx:if{{!isShowDetail}} bindtapclickArrow classarrowImgsrc{{imgUrl}}/upload/20220608/nextJt.png lazy-loadtrue/imagetext wx:if{{!isShowDetail}} bindtapclickArrow stylemargin-left:10rpx;展开/textimage wx:if{{isShowDetail}} bindtapclickArrow classarrowImgsrc{{imgUrl}}/upload/20220608/topJt.png lazy-loadtrue/imagetext wx:if{{isShowDetail}} bindtapclickArrow stylemargin-left:10rpx;收起/text
/view
view styleheight:56rpx;/view
image src{{imgUrl}}/upload/20220608/explain.png classexplain/image
!-- 你可能还喜欢 --
view classmaybeLikeimage src{{imgUrl}}/upload/20220608/2323-2.png classmaybeLikePng/image!-- 配置商品 --view classindexProductListview classproductItemBottom wx:for{{4}}view stylebackground: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%; classproductImgBottom/viewview classbottom-productName little北京烤鸭/viewview classiconBox little干净又卫生/viewview classbuyBox-bottomview classleftPrice-bottomtext classpriceFh/texttext classbottom-price58/texttext classbottom-oldPrice98/text/viewview classrightAdd-bottom data-index{{index}} image classrightAdd-bottom src{{imgUrl}}/upload/20220608/addcart.png lazy-loadtrue/image/view/view/view/view
/view
view styleheight:162rpx;/view
view classfooterview classleftFooterview bindtapGoHomeview stylebackground: url({{imgUrl}}/upload/20220608/6-1.png);background-size: 100% 100%;classfootImg/viewview classfootText首页/view/viewview bindtapGoShoppingview stylebackground: url({{imgUrl}}/upload/20220608/6-5.png);background-size: 100% 100%;classfootImg2/viewview classfootText2购物车/view/view/viewview classrightFooterview classdisplayShow view classaddCart-btn displayBox catchtapbtnAddCart_footer加入购物车/viewview classpurchase-btn displayBox bindtaprightNowBuy立即购买/view/view/view
/view
!--pages/shoppingCart/index.wxml--
!--pages/login/index.wxml--
view classyx-custom stylepadding-top:{{statusBarHeight}}px;background-image: linear-gradient(43deg, #12C206,#00C90F);view classheaderBoxview classleftAddress/viewview classappletsTitle购物车/view/view
/view
!-- 自定义顶部 占位标签 --
view classyx-empty_custom stylepadding-top:{{statusBarHeight}}px;/view
!-- 可下单的购物车商品 --
view classgo-productview classproduct-numview classleft-productNum共有5件商品/viewview classright-delProduct bindtapdeleteProducttext删除/text/view/viewview wx:for{{2}} wx:for-indexidx wx:for-itemitemview classdiscountview classleft-discount little热门推荐/viewview classdiscount-jtimage src{{imgUrl}}/upload/20220608/cartJt.png lazy-loadtrue/image/view/viewview wx:for2 wx:for-indexindexProduct wx:for-itemProItemview classlistview classproduct-item height{{indexProduct}}movable-areamovable-view out-of-boundstrue directionhorizontal x{{item.xmove}} inertiatrue data-productIndex{{indexProduct}} bindtouchstarthandleTouchStart bindtouchendhandleTouchEnd bindchangehandleMovableChangeview classproductItem_new view classcheckedIconBoxview classcart-con-item-iconicon wx:if{{ProItem.selected}} typesuccess color#FFBD20 bindtapselectList_yx data-other{{idx}} data-index{{indexProduct}} data-cartid{{ProItem.cartId}} /icon wx:else typecircle bindtapselectList_yx data-other{{idx}} data-index{{indexProduct}} data-cartid{{ProItem.cartId}} //view/viewview classrightProductInfoimage src{{imgUrl}}/upload/20220608/ky.jpg classcart-productImg/imageview classproductInfoBoxview classcart-productName littleTwo超级无敌好吃美味烤鸭/viewview classcart-productSku little500g/viewview classcart-productPricetext classpriceSymbol/texttext classcart-price58.8/texttext classcart-oldPrice98/text/view/viewview classcart-rightNumBoxview classcart-con-item-numtext classcart-con-item-num-left catchtapbindMinus data-other{{idx}} data-index{{indexProduct}} data-cartid{{ProItem.cartId}}-/textinput typecart-con-item-num-mid bindinputbindIptCartNum data-index{{indexProduct}} value1 disabled{{true}} /text classcart-con-item-num-right data-other{{idx}} data-index{{indexProduct}} data-cartid{{ProItem.cartId}} catchtapbindPlus/text/view/view/view/view/movable-view/movable-areaview classdelete-btn data-id{{item.id}} bindtaphandleDeleteProduct data-other{{idx}} data-index{{indexProduct}} data-cartid{{ProItem.cartId}}删除/view/view/view/view/view
/view
view classcant-productview classcantTitle displayBox因配送范围库存原因等导致失效的商品/viewview classproductItem_new height{{index}} wx:for{{2}}view classcantProductLeft displayBox失效/viewview classrightProductInfoview classcart-productImg stylebackground: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;image src{{imgUrl}}/upload/20220608/yyyy.png classcart-productImg lazy-loadtrue/image/viewview classproductInfoBoxview classcart-productNameYY littleTwo曾经好吃的烤鸭/viewview classcart-productYyy little抱歉该商品已售罄或下架/viewview classcart-productPricetext classpriceSymbolYY/texttext classcart-priceYY0/text/view/viewview classcart-rightNumBox/view/view/viewview classclearBoxview classclear displayBox bindtapclearProduct清空失效宝贝/viewview classswitchAddress displayBox bindtapswitchAdd切换地址/view/view
/view
view classmaybeLike wx:if{{recommendProduct.length0}}image src{{imgUrl}}/upload/20220608/2323-2.png classmaybeLikePng/imageview classindexProductListview classproductItemBottom wx:for{{recommendProduct}}view stylebackground: url({{item.productPic}});background-size: 100% 100%; classproductImgBottom/viewview classbottom-productName little{{item.productName}}/viewview classiconBox little{{item.remark}}/viewview classbuyBox-bottomview classleftPrice-bottomtext classpriceFh/texttext classbottom-price{{item.price}}/texttext classbottom-oldPrice{{item.proSalePrice}}/text/viewview classrightAdd-bottom catchtapbtnAddCart data-index{{index}} data-goodsid{{item.productId}}image classrightAdd-bottom src{{imgUrl}}/Areas/dfapi/Content/images/addcart.png lazy-loadtrue/image/view/view/view/view
/view
view classseeDetailPriceBox wx:if{{isShowDetailPrice}} catchtapbtnHideDetailview classshareb2view classshareb2-conviwe classdetailTitle displayBox优惠明细/viweview classorderAllPriceview classleftTitletext商品总额/text/viewview classrightTitletext{{totalPrice}}/text/view/viewview classorderAllPriceview classleftTitletext运费/text/viewview classrightTitletext{{freight}}/text/view/viewview classorderAllPriceview classleftTitletext优惠券/text/viewview classrightTitletext stylecolor:#FF4C0E;-{{couponAmount}}/text/view/viewview classorderAllPriceview classleftTitletext折扣/text/viewview classrightTitletext stylecolor:#FF4C0E;-{{discountMoney}}/text/view/viewview classorderAllPriceFinalview classleftTitletext合计/text/viewview classrightTitletext{{amountPayable}}/text/view/view/view/view
/viewview classcart-foterview classallCheckedimage wx:if{{!isCheckAll}} src{{imgUrl}}/upload/20220608/uncheck.png bindtapselectAll lazy-loadtrue classcheckImg/imageimage wx:else src{{imgUrl}}/upload/20220608/checked.png lazy-loadtrue bindtapselectAll classcheckImg/imageview classallCheckText全选/view/viewview classmiddlePriceview classpriceBoxtext classhjTitle合计:/texttext classsymbol/texttext classpriceAll198/text/viewview classcoupontext优惠:/texttext/texttext{{finalCou}}/texttext classseeDetail查看明细/textimage wx:if{{isShowDetailPrice}} src{{imgUrl}}/upload/20220608/orangeOn.png lazy-loadtrue classorangeJt bindtapseeDetailPrice/imageimage wx:else src{{imgUrl}}/upload/20220608/orangeBo.png lazy-loadtrue classorangeJt bindtapseeDetailPrice/image/view/viewview classright-btnJsview classaddOrder displayBox bindtapgoBuy结算/view/view/viewview classbottomHeightBox/view!--pages/myCenter/index.wxml--
!-- 头部背景 收益容器 --
view classcenter-Topview classcenter-TopBackview classuserInfo-boxview classleftInfoview classcnter-userimage src{{imgUrl}}/upload/20220608/noUser.png classcnter-user lazy-loadtrue/image/viewview classuserNameBoxview classuNameText!-- open-data typeuserNickName/open-data --!-- view wx:else bindtaplogin注册/登录/view --view text摔跤猫子/text!-- button classkefu-btn typeprimary open-typegetUserInfo bindgetuserinfogetUserInfostylewidth:100%/button --button classkefu-btn stylewidth:100%/button/view/viewview classshoptext用户/text/view/view/view/view
!-- 我的订单入口 --
view classmyOrder-menuview classorder-titleview classleftTitle我的订单/viewview classrightSeeMore bindtapgoToOrder data-id0image src{{imgUrl}}/upload/20220608/black-jt.png lazy-loadtrue/imagetext stylefloat:right;padding-right:10rpx;查看更多/text/view/viewview classorderMenu-imgview classordermenu-detail bindtapgoToOrder data-id1image src{{imgUrl}}/upload/20220608/dfk.png lazy-loadtrue/imageview classnum-mark wx:if{{toBePaid0}}{{toBePaid}}/viewview classorder-text-staus待付款/view/viewview classordermenu-detail bindtapgoToOrder data-id2image src{{imgUrl}}/upload/20220608/dfh.png lazy-loadtrue/imageview classnum-mark wx:if{{toBeDelivered0}}{{toBeDelivered}}/viewview classorder-text-staus待发货/view/viewview classordermenu-detail bindtapgoToOrder data-id3image src{{imgUrl}}/upload/20220608/dsh.png lazy-loadtrue/imageview classnum-mark wx:if{{toBeReceived0}}{{toBeReceived}}/viewview classorder-text-staus待收货/view/viewview classordermenu-detail bindtapgoReplyListimage src{{imgUrl}}/upload/20220608/dpj.png lazy-loadtrue/imageview classnum-mark wx:if{{toBeReply0}}{{toBeReply}}/viewview classorder-text-staus评价/view/viewview classordermenu-detail bindtapafterSaleimage src{{imgUrl}}/upload/20220608/dtk.png lazy-loadtrue/imageview classnum-mark wx:if{{cancel0}}{{cancel}}/viewview classorder-text-staus售后/退款/view/view/view
/view/view
/view
!-- 常用工具入口 --
view classtool-boxview classoften-tool-title常用工具/viewview classtool-menu-one view classtool-menu-detail bindtapGotomyEarningsview stylebackground: url({{imgUrl}}/upload/20220608/profit.png);background-size: 100% 100%;classtoolImgBack/viewview classtool-title我的收益/view/viewview classtool-menu-detail bindtapGotoMyTeamview stylebackground: url({{imgUrl}}/upload/20220608/myteam.png);background-size: 100% 100%;classtoolImgBack/viewview classtool-title我的团队/view/viewview classtool-menu-detail bindtapgoCouponListview stylebackground: url({{imgUrl}}/upload/20220608/myCou.png);background-size: 100% 100%;classtoolImgBack/viewview classtool-title我的优惠券/view/viewview classtool-menu-detail bindtapgoAddressListview stylebackground: url({{imgUrl}}/upload/20220608/myAdd.png);background-size: 100% 100%;classtoolImgBack/viewview classtool-title收货地址/view/view/viewview classtool-menu-twoview classtool-menu-detail styleposition: relative;view stylebackground: url({{imgUrl}}/upload/20220608/customService.png);background-size: 100% 100%;classtoolImgBack/viewview classtool-title联系客服/viewbutton classkefu-btn open-typecontact stylewidth:100%/button/viewview classtool-menu-detail bindtapsetUpview stylebackground: url({{imgUrl}}/upload/20220608/set.png);background-size: 100% 100%;classtoolImgBack/viewview classtool-title设置/view/view/view
/view
