在好例子网，分享、交流、成长！
您当前所在位置：首页 → CSS 开发实例 → HTML基础 → 购物商城

购物商城

HTML基础

下载此实例
  • 开发语言：CSS
  • 实例大小：0.12M
  • 下载次数：36
  • 浏览次数：333
  • 发布时间：2022-03-22
  • 实例类别：HTML基础
  • 发 布 人：yzy294672
  • 文件格式：.zip
  • 所需积分：2
 相关标签： 购物 商城
网友评论 举报投诉 收藏该页

实例介绍

【实例简介】购物商城

一个购物仿写商城

【实例截图】

from clipboard

【核心代码】


<!-- 收货地址 -->
<view class="revice_address_row">
<!-- 当收货地址不存在 按钮显示 对象 空对象 bool类型也是true -->
    <view class="address_btn" wx:if="{{!address.userName}}">
        <button bindtap="handleChooseAddress" type="primary" plain="default" plain >
            获取收货地址
        </button>       
    </view>
    <!-- 当收货地址 存在 详细信息就显示 -->
    <view wx:else class="user_info_row">
        <view class="user_info">
            <view>{{address.userName}}</view>
            <view>{{address.all}}</view>
        </view>
        <view class="user_phone">{{address.telNumber}}</view>
    </view>
      
</view>
<!-- 购物车内容 -->
<view class="cart_content">
    <view class="cart_title">购物车</view>
    <view class="cart_main">
    <!-- 当cart数组 长度不为0 显示 商品信息 -->
        <block wx:if="{{cart.length!==0}}">
            <view class="cart_item"
            wx:for="{{cart}}"
            wx:key="goods_id"
            >
            <!-- 复选框 -->
            <view class="cart_chk_wrap">
                <checkbox-group data-id="{{item.goods_id}}" bindchange="handleItemChange">
                    <checkbox checked="{{item.checked}}"></checkbox>     
                </checkbox-group>   
            </view>
            <!-- 商品图片 -->
            <navigator class="cart_img_wrap">
                <image src="{{item.goods_small_logo}}" mode="widthFix"/>   
            </navigator>
            <!-- 商品信息 -->
                <view class="cart_info_wrap">
                    <view class="goods_name">{{item.goods_name}}</view>
                    <view class="goods_price_wrap">
                        <view class="goods_price">￥{{item.goods_price}}</view>
                        <view class="cart_num_tool">
                            <view class="num_edit" bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{-1}}">-</view>
                            <view class="goods_num">{{item.num}}</view>
                            <view class="num_edit" bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{1}}"> </view>
                        </view>
                    </view>
                </view>
            </view>
        </block>  
        <block wx:else>
            <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fe1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618148924&t=e350ea6075c113dc2ea98b83f49986e8" mode="widthFix"/>
        </block>
    </view>
</view>
<!-- 底部工具栏 -->
<view class="footer_tool">
    <!-- 全选 -->
    <view class="all_chk_wrap">
        <checkbox-group  bindchange="handleItemAllcheck">
            <checkbox checked="{{allChecked}}">全选</checkbox>
        </checkbox-group>       
    </view>
    <!-- 总价格 -->
    <view class="total_price_wrap">
        <view class="total_price">
        合计：<text class="total_price_text">￥{{totalPrice}}</text>        
        </view>
        <view>包含运费</view>  
    </view>
    <!-- 结算 -->
    <view class="order_pay_wrap" bindtap="handlePay">
    结算({{totalNum}})
    </view>
</view>

.
├── app.js
├── app.json
├── app.wxss
├── components
│   ├── SearchInput
│   │   ├── SearchInput.js
│   │   ├── SearchInput.json
│   │   ├── SearchInput.less
│   │   ├── SearchInput.wxml
│   │   └── SearchInput.wxss
│   ├── Tabs
│   │   ├── Tabs.js
│   │   ├── Tabs.json
│   │   ├── Tabs.wxml
│   │   └── Tabs.wxss
│   └── UpImg
│       ├── UPImg.wxss
│       ├── UpImg.js
│       ├── UpImg.json
│       └── UpImg.wxml
├── data.json
├── icons
│   ├── cart-o.png
│   ├── cart.png
│   ├── category-o.png
│   ├── category.png
│   ├── home-o.png
│   ├── home.png
│   ├── icon-shoucang.png
│   ├── user-o.png
│   ├── user.png
│   └── 收藏.png
├── lib
├── pages
│   ├── auth
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── cart
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── category
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── collect
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── feedback
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── goods_detail
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── goods_list
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── login
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── order
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── pay
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── search
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.less
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── user
│       ├── index.js
│       ├── index.json
│       ├── index.less
│       ├── index.wxml
│       └── index.wxss
├── project.config.json
├── project.private.config.json
├── request
│   └── index.js
├── sitemap.json
├── styles
│   └── iconfont.wxss
├── utils
│   └── asyncWx.js
└── 购物商城.zip

23 directories, 97 files



标签： 购物 商城

实例下载地址

购物商城

不能下载？内容有错？ 点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

相关软件

相关文章

网友评论

我要评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警