小程序外卖订单界面的 代码

最新推荐文章于 2024-05-27 09:06:46 发布
最新推荐文章于 2024-05-27 09:06:46 发布
阅读量3.3k 收藏 62
点赞数 6
分类专栏： 小程序 文章标签： 小程序 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CPan_/article/details/122272696
版权

html页面

.

<view class="container">
  <view class="store-box">
    <view class="st-bg"></view>
    <view class=" flex justify-between store-info">
      <view class=" flex flex-direction justify-start" style="width:530rpx">
        <view class="name">
          热门热门热门
        </view>
        <view class="start-box flex">
          <image wx:for="{{4}}" class="st-img" src="../../../images/store/start.png"></image>
          <image class="st-img" src="../../../images/store/unstart.png"></image>
          <view class="text">4.2分数</view>
        </view>
        <view class="tiem">
          营业时间:9:00~22:00营业
        </view>
        <view class="msg">
          公告：可随时联系我们，我们提供外卖服务
        </view>
      </view>
      <image class="store-logo" src="../../../images/store/logo.png" alt="" />
    </view>
    <view class="flex justify-start align-center tabs-box">
      <view bindtap="changeCenten" data-id="1" class="tabs-item {{tabs==1?'active':''}}">商品</view>
      <view bindtap="changeCenten" data-id="2" class="tabs-item {{tabs==2?'active':''}}">评价<text
          class="num">(241)</text></view>
      <view bindtap="changeCenten" data-id="3" class="tabs-item {{tabs==3?'active':''}}">商家</view>
    </view>
  </view>
  <!-- 商品下单页面 -->
  <view class="index-cont" wx:if="{{tabs==1}}">
    <!-- 左边类型 -->
    <view class="index-left">
      <view wx:for="{{foodsList}}" wx:key="index" class="item {{curId === 'item'+index?'on':''}}"
        data-id="item{{index}}" bindtap="scrollToViewFn">{{item.name}}</view>
    </view>
    <!-- 右边产品 -->
    <scroll-view class="index-right" scroll-y="{{true}}" scroll-into-view="{{initView}}" scroll-with-animation="true"
      bindscroll="onPageScroll">
      <view class="boxs">
        <block wx:for="{{foodsList}}" wx:key="index">
          <view class="index-title" id="item{{index}}">{{item.name}}</view>
          <view class="item" wx:for="{{item.list}}" wx:key="ind" wx:for-item="itm" wx:for-index="ind"
            bindtap="showGoodDetail(itm)">
            <view class="pic">
              <image src="{{itm.pic}}" mode="aspectFill"></image>
            </view>
            <view class="main">
              <view class="tit">{{itm.title}}</view>
              <view class="desc">{{itm.info}}</view>
              <view class="money">¥{{itm.price}}</view>
            </view>
            <view class="box">
              <view wx:if="{{itm.num !== 0}}" class="icon" data-index="{{index}}" data-ind="{{ind}}" data-item="{{itm}}"
                catchtap="reduceNum">
                <image src="../../../images/store/reduce-icon.png" alt=""></image>
              </view>
              <input wx:if="{{itm.num !== 0}}" type="text" disabled value="{{itm.num}}" />
              <view class="icon" data-index="{{index}}" data-ind="{{ind}}" data-item="{{itm}}" catchtap="addNum">
                <image src="../../../images/store/add-icon.png" alt=""></image>
              </view>
            </view>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
  <view class="index-cart" wx:if="{{tabs==1}}">
    <view class="left">
      <view class="cart-num" wx:if="{{cartList.length === 0}}">
        <image src="../../../images/store/cart.png"></image>
      </view>
      <view class="cart-num on" wx:else bindtap="showCartMask">
        <image src="../../../images/store/cart.png"></image>
        <view class="total-box">
          <text class="mon">{{totalNum}}</text>
        </view>
      </view>
      <view class="cart-money flex flex-direction content">
        <view class="mon">¥{{totalMoney}}</view>
        <view class="lable">本单合计</view>
      </view>
    </view>
    <view class="order-btn" bindtap="submitOrder">去结算</view>
  </view>

  <!--购物车弹窗-->
  <!-- wx:if="{{isShowCartMask && cartList.length !== 0}}" -->
  <view class="dialog {{isShowCartMask && cartList.length !== 0?'':'hide'}}" bindtap="hiddenCartMak">
    <view class="boxs" catchtap="stopMaopao()">
      <view class="title-block">
        <text>已选商品</text>
        <view class="clear" bindtap="clearCart">
          X
        </view>
      </view>
      <scroll-view class="content" scroll-y="{{true}}" scroll-with-animation="true">
        <block wx:for="{{cartList}}" wx:key="index">
          <view class="item" id="{{item.view}}">
            <view class="pic">
              <image src="{{item.pic}}" mode="aspectFill"></image>
            </view>
            <view class="main">
              <view class="tit">{{item.name}}</view>
              <view class="desc">{{item.info}}</view>
              <view class="money">¥{{item.price}}</view>
            </view>
            <view class="right">
              <view class="box">
                <view class="icon" data-index="{{index}}" data-item="{{item}}" bindtap="reduceCart">
                  <image src="../../../images/store/reduce-icon.png" alt=""></image>
                </view>
                <input type="text" disabled value="{{item.num}}" />
                <view class="icon" data-index="{{index}}" data-item="{{item}}" bindtap="addCart">
                  <image src="../../../images/store/add-icon.png" alt=""></image>
                </view>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
  <!--商品详情弹窗-->
  <view class="dialog1" wx:if="{{isShowDetail}}">
    <scroll-view class="detbox" scroll-y="{{true}}" scroll-with-animation="true">
      <image class="img" src="{{goodDetail.pic}}" mode="aspectFit"></image>
      <view class="box">
        <view class="tit">{{goodDetail.title}}</view>
        <view class="money">¥{{goodDetail.price}}</view>
        <view class="desc">{{goodDetail.info}}</view>
      </view>
      <view class="close" bindtap="hideDetail">
        <image src="../../../images/store/close_ico.png"></image>
      </view>
    </scroll-view>
  </view>

  <!-- 评价内容 -->
  <view class="comment-box" wx:if="{{tabs==2}}">
    <view class="flex justify-between com-item">
      <image class="avatar" src="../../../images/store/logo.png"></image>
      <view class="con-content">
        <view class="flex justify-between tit-box">
          <view class="l-box">
            <view class="tit">学习使我快乐</view>
            <view class="start-box flex">
              <image wx:for="{{4}}" class="st-img" src="../../../images/store/start.png"></image>
              <image class="st-img" src="../../../images/store/unstart.png"></image>
            </view>
          </view>
          <view class="r-box">2020.11.14</view>
        </view>
        <view class="c-info">不错不错，吃的很快就完成上菜了，而且价格也比我预想的要便宜，味道也不错</view>
        <view class=" store-img-box de-item">
          <view class="img-scroll-box" style="width: {{10*200}}rpx;">
            <image class="store-img" wx:for="{{10}}" src="../../../images/store/logo.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 商家内容 -->
  <view class="store-detail"  wx:if="{{tabs==3}}">
    <view class="flex de-item">
      <image class="a-icon" src="../../../images/store/location.png"></image>
      <view class="text">深圳市宝安区西乡街道预约社区轻铁花园820栋129</view>
      <view class="line">|</view>
      <image class="r-icon" src="../../../images/store/phone.png"></image>
    </view>
    <view class=" store-img-box de-item">
      <view class="img-scroll-box" style="width: {{10*209}}rpx;">
        <image class="store-img" wx:for="{{10}}" src="../../../images/store/logo.png"></image>
      </view>
    </view>
    <view class="flex de-item">
      <image class="l-icon" src="../../../images/store/date.png"></image>
      <view class="text">营业时间：9:00-22:00</view>
    </view>
    <view class="flex de-item">
      <image class="l-icon" src="../../../images/store/msg.png"></image>
      <view class="text">公告：可随时联系我们，我们提供外卖服务</view>
    </view>
  </view>
</view>

JS

 const goods = require("goods.js");

 Page({
   data: {
     foodsList: [], // 商品数据
     cartList: [], // 购物车数据
     isShowCartMask: false,
     totalNum: 0,
     totalMoney: 0,
     initView: 'item0', // 根据此变量的变化，控制左侧选中状态、右侧滑动
     curId: 'item0',
     isShowDetail: false,
     goodDetail: {},
     screenWidth: 0, // 手机屏幕宽度
     heightArray: [0], // 右侧每一个类型的高度区间数组
     tabs:2,
   },
   onLoad() {
     console.log("goods:", goods)
     this.setData({
      foodsList:goods.goods
     })
     this.getGoodsData()
   },
   // 方法
   async getGoodsData() {
     const that = this
    //  const res = await getGoodsInfo({})
    let res=[]
    //  this.foodsList = res
     wx.getSystemInfo({
       success: (ress) => {
         that.screenWidth = ress.windowWidth
       }
     })
     this.getHeightSection()
   },
   // 设置高度区间 所有单位转化为rpx
   getHeightSection() {
     const that = this
     let hg = 0
     for (let index = 0; index < that.data.foodsList.length - 1; index++) {
       hg += 70 + that.data.foodsList[index].list.length * 212
       that.data.heightArray.push(hg)
     }
   },
   // 获取高度区间的下标
   getHeightIndex(arr, hg) {
     const that = this
     arr.forEach((item, index) => {
       if (hg >= item) {
         that.setData({
           curId: 'item' + index
         })
       }
     })
   },
   // 左边菜单控制右边
   scrollToViewFn(e) {
     this.setData({
       initView: e.target.dataset.id,
       curId: e.target.dataset.id
     })
   },
   // 右边滚动控制左边
   onPageScroll(e) {
     const that = this
     let scrollTop = e.detail.scrollTop * 750 / that.screenWidth
     this.getHeightIndex(that.data.heightArray, scrollTop)
   },
   // 商品列表的减号点击
   reduceNum(e) {
     const that = this
     let {ind,index,item} =e.currentTarget.dataset
     var cartList = that.data.cartList
     let val = 'foodsList[' + index + '].list[' + ind + '].num'
     this.setData({
       [val]: item.num - 1
     })
     // 如果商品为0，就把当前商品在购物车清除
     // 如果不为0， 就将当前商品数量减1
     if (that.data.foodsList[index].list[ind].num === 0) {
       that.removeAarry(that.data.cartList, item.id)
     } else {
       cartList.forEach((itm, i) => {
         if (itm.id === item.id) {
          //  let value = 'cartList[' + i + '].num'
          //  that.setData({
          //    [value]: itm.num - 1
          //  })
          cartList[i].num=itm.num - 1
          that.setData({
            cartList: cartList
          })
         }
       })
     }
      
     this.computed()
   },
   // 商品列表的加号点击
   addNum(e) {
      let {ind,index,item} =e.currentTarget.dataset
     const that = this
     let cartList=that.data.cartList
     let val = 'foodsList[' + index + '].list[' + ind + '].num'
     console.log("val",val)
     this.setData({
       [val]: item.num + 1
     })
     // 如果商品为1，就把当前商品加入购物车
     // 否则， 就将当前商品数量加1
     if (that.data.foodsList[index].list[ind].num === 1) {
       let val = {
         id: item.id,
         name: item.title,
         price: item.price,
         num: 1,
         index: index,
         ind: ind,
         pic: item.pic
       }
       cartList.push(val)
      console.log("cartList",cartList)
      that.setData({
        cartList:cartList
      })
     } else { 
       cartList.forEach((itm, i) => {
         if (itm.id === item.id) {
          //  let value = 'cartList[' + i + '].num'
          //  that.setData({
          //    [value]: itm.num + 1
          //  })
           let value = cartList[i].num=itm.num + 1
          
         }
       })
     }
     that.setData({
      'cartList': cartList
     })
    //  that.setData({
    //   cartList: that.data.cartList
    // })
     this.computed()
   },
   // 购物车的减号点击
   reduceCart(e) {
    let {index,item} =e.currentTarget.dataset
     const that = this
     let val = 'foodsList[' + item.index + '].list[' + item.ind + '].num'
     let val1 = 'cartList[' + index + '].num'
     this.setData({
       [val]: item.num - 1,
       [val1]: item.num - 1
     })
     // 如果商品为0，就把当前商品在购物车清除
     // 如果不为0， 就将当前商品数量减1
     if (that.data.cartList[index].num === 0) {
       that.removeAarry(that.data.cartList, item.id)
     }
     this.computed()
   },
   // 购物车的加号点击
   addCart(e) {
    let {index,item} =e.currentTarget.dataset
    console.log("ee",e.currentTarget.dataset)
     const that = this
     let val = 'cartList[' + index + '].num'
     that.setData({
       [val]: item.num + 1
     })
     this.computed()
   },
   // 清空购物车
   clearCart() {
     const that = this
     wx.showModal({
       title: '提示',
       content: '清空购物车？',
       success: function (res) {
         if (res.confirm) {
           that.setData({
             cartList: []
           })
           that.data.foodsList.forEach((item, i) => {
             item.data.list.forEach((itm, j) => {
               let value = 'foodsList[' + i + '].list[' + j + '].num'
               that.setData({
                 [value]: 0
               })
             })
           })
           that.computed()
         }
       }
     })
   },
   // 计算选择商品总价格和总数量
   computed() {
     const that = this
     let num = 0
     let money = 0
     console.log("computed:",that.data.cartList)
     that.data.cartList.forEach(item => {
       num += item.num
       money += parseFloat(item.price) * item.num
     })
     that.setData({
       totalNum: num,
       totalMoney: money.toFixed(2)
     })
   },
   // 将数量为0的时候，对应商品在购物车中删除
   removeAarry(arr, id) {
     arr.forEach((item, index) => {
       if (item.id === id) {
         arr.splice(index, 1)
       }
     })
     this.setData({
       "cartList":arr
     })
    //  return arr
   },
   showCartMask() {
    //  this.isShowCartMask = !this.isShowCartMask
     this.setData({
      "cartList":this.data.cartList,
      'isShowCartMask':!this.data.isShowCartMask
     })
   },
   hiddenCartMak() {
    this.setData({
      'isShowCartMask':false
     })
    //  this.isShowCartMask = false
   },
   stopMaopao() {},
   showGoodDetail(item) {
     this.goodDetail = item
     this.isShowDetail = true
   },
   hideDetail() {
    this.setData({
      'isShowDetail':false
     })
   },
   // 订单提交
   submitOrder() {},
   changeCenten(e){
     console.log(e)
    let tabs=e.currentTarget.dataset.id
    this.setData({
      tabs:tabs
    })
   }
 })

CSS

page {
  height: 100%;
}

.container {
  height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.container .dialog1 {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 4;
}
.container .dialog1 .detbox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  width: 100%;
  max-height: 700rpx;
  overflow-y: auto;
  color: #333;
  border-radius: 40rpx 40rpx 0 0;
}
.container .dialog1 .detbox .img {
  width: 100%;
  height: 375rpx;
  background: rgba(0, 0, 0, 0.6);
}
.container .dialog1 .detbox .box {
  padding: 20rpx 30rpx 40rpx;
  box-sizing: border-box;
}
.container .dialog1 .detbox .box .tit {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
.container .dialog1 .detbox .box .money {
  font-size: 26rpx;
  color: #f00;
  margin: 10rpx 0;
}
.container .dialog1 .detbox .box .desc {
  font-size: 22rpx;
  color: #666;
  line-height: 32rpx;
}
.container .dialog1 .detbox .close {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .dialog1 .detbox .close image {
  width: 40rpx;
  height: 40rpx;
}
.container .dialog {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.container .dialog .boxs {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  right: 0;
  z-index: 6;
  background-color: #fff;
  width: 100%;
  max-height: 600rpx;
  color: #333;
  border-radius: 20px 20px 0px 0px;
}
.container .dialog .boxs .title-block {
  margin: 30rpx 30rpx 10rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45rpx;
  font-size: 32Rpx; 
  font-weight: 400;
  color: #333333;
}
.container .dialog .boxs .title-block text {
  font-size: 26rpx;
  color: #666;
}
.container .dialog .boxs .title-block .clear {
  font-size: 22rpx;
  color: rgba(112, 112, 112, 1);
  display: flex;
  align-items: center;
}
.container .dialog .boxs .title-block .clear image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}
.container .dialog .boxs .content {
  width: 100%;
  max-height: 530rpx;
  overflow-y: auto;
  padding-bottom: 30rpx;
  box-sizing: border-box;
}
/* .container .dialog .boxs .content .item {
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
} */
.container .dialog .boxs .content .item{
  margin: 20rpx 30rpx;
  width: 690rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 120rpx;
}

.container .dialog .boxs .content .item .tit {
  width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 28rpx;
  color: #333;
}
.container .dialog .boxs .content  .item .main {
  width: 565rpx;
  padding-left: 30rpx;
  box-sizing: border-box;
}
.container .dialog .boxs .content .item .right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 80rpx;
}
.container .dialog .boxs .content .item .right text {
  font-size: 26rpx;
  color: #f00;
}
.container .dialog .boxs .content .item .right .box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin-left: 20rpx;
  height: 80rpx;
}
.container .dialog .boxs .content .item .right .box .icon {
  width: 34rpx;
  height: 34rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .dialog .boxs .content .item .right .box .icon image {
  width: 34rpx;
  height: 34rpx;
}
.container .dialog .boxs .content .item .right .box input {
  width: 60rpx;
  height: 34rpx;
  border: none;
  color: #333;
  text-align: center;
  font-size: 26rpx;
}
.store-box{
  position: relative;
  width: 750;
  overflow: hidden;
  height: 342rpx;
}
.st-bg{
  width: 100%;
  height: 116rpx;
  background: rgba(53, 212, 171, 1);
}
.container .index-cont {
  height: calc(100vh - 442rpx);
  display: flex;
  justify-content: space-between;
}
.container .index-cont .index-left {
  width: 150rpx;
  height: 100%;
  background: rgba(246, 248, 251, 1);
}
.container .index-cont .index-left .item {
  font-size: 26rpx;
  color: rgba(153, 153, 153, 1);
  /* border-bottom: 1rpx dashed #666; */
  height: 72rpx;
  line-height: 72rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.container .index-cont .index-left .item.on {
  background: #fff;
  color: rgba(51, 51, 51, 1);
}
.container .index-cont .index-right {
  width: 600rpx;
  height: 100%;
}
.container .index-cont .index-right .boxs {
  margin: 0 30rpx;
  box-sizing: border-box;
  width: 100%;
}
.container .index-cont .index-right .index-title {
  margin: 30rpx 0;
  height: 40rpx;
  line-height: 40rpx;
  /* background: #f7f7f7; */
  font-size: 28rpx;
  font-weight: 800;
  color: #333333;
  box-sizing:content-box;
}
 .item {
  margin: 20rpx 0;
  width: 540rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 120rpx;
}
 .item::after {
  position: absolute;
  top: 0rpx;
  left: 0;
  /* background: #ccc;
  width: 100%;
  height: 1rpx;
  content: ""; */
}
 .item .pic {
  width: 120rpx;
  height: 120rpx;
}
 .item .pic image {
  width: 100%;
  height: 100%;
}
 .item .main {
  width: 380rpx;
  padding-left: 30rpx;
  box-sizing: border-box;
}
 .item .main .tit {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
}
 .item .main .desc {
  color: #999;
  min-height: 28rpx;
  line-height: 28rpx;
  margin: 4rpx 0 3rpx;
  font-size: 20px;
  font-weight: 500;
  color: #999999;
}
 .item .main .money {
  font-size: 28rpx;
  color: #f00;
}
 .item .box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin-left: 10rpx;
  height: 34rpx;
  position: absolute;
  right: 0;
  bottom: 30rpx;
}
 .item .box .icon {
  width: 34rpx;
  height: 34rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
 .item .box .icon image {
  width: 34rpx;
  height: 34rpx;
}
 .item .box input {
  width: 60rpx;
  height: 34rpx;
  border: none;
  color: #333;
  text-align: center;
  font-size: 26rpx;
}
.container .index-cart {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 3;
}
.container .index-cart .left {
  width: 470rpx;
  height: 100%;
  color: rgba(51, 51, 51, 1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  border-top: 1rpx solid rgba(230, 230, 230, 1);
}
.container .index-cart .left .cart-num {
  width: 100rpx;
  height: 100rpx;
  position: relative;
  padding-top: 15rpx;
  box-sizing: border-box;
  border-radius: 100%;
  left: 30rpx;
  text-align: center;
}
.container .index-cart .left .cart-num.on {
  /* background: #ffa800; */
}
.container .index-cart .left .cart-num image {
  width: 69rpx;
  height: 69rpx;
}
.container .index-cart .left .cart-num text {
  font-size: 20rpx;
  color: #fff;
  display: inline-block;
  padding: 0 8rpx;
  box-sizing: border-box;
  position: absolute;
  right: 13rpx;
  top: 11rpx;
  height: 30rpx;
  line-height: 30rpx;
  border-radius: 30rpx;
  background: #f00;
}
.container .index-cart .left .cart-money {
  color: rgba(51, 51, 51, 1);
  font-size: 30rpx;
  margin-left: 30rpx;
}
.cart-money .mon{
  height: 50rpx;
  font-size: 36rpx;
  line-height: 50rpx;
  color: #333333;
}
.cart-money .lable{
  height: 28rpx;
  line-height: 28rpx;
  font-size: 28rpx;
  color: #333333;
}
.container .index-cart .order-btn {
  width: 282rpx;
  height: 100%;
  background: rgba(53, 212, 172, 1);
  font-size: 32rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hide{
  display: none;
}

/* 店铺信息 */
.store-info{
  position: absolute;
  top: 26rpx;
  left: 30rpx;
  padding: 20rpx;
  width: 690rpx;
  height: 227rpx;
  border-radius: 16rpx;
  background: #fff;
  overflow: hidden;
  box-shadow: 0px 2rpx 16rpx rgba(0, 0, 0, 0.08);

}
.store-info .start-box{
  margin: 10rpx 0 20rpx;
}
.store-info .name{ 
  height: 50rpx;
  font-size: 36rpx; 
  font-weight: bold;
  line-height: 50rpx;
  color: #333333;
}
.store-info  .tiem{ 
  height: 30rpx;
  font-size: 22rpx; 
  font-weight: 500;
  line-height: 30rpx;
  color: #333333;
}
.store-info .msg{  
  margin-top: 16rpx;
font-size: 22rpx; 
font-weight: 500;
line-height: 30rpx;
color: #999999; 
}
 
.store-info .name .hot-tag{
  margin-right: 16rpx;
  display: inline-block;
  min-width: 60rpx;
  height: 32rpx;
  background: #FE4B26; 
  border-radius: 6px; 
  font-size: 20rpx;
  text-align: center;
  font-weight: 500;
  line-height: 32rpx;
  color: #FFFFFF;  
}
 
 
.start-box{
  margin: 22rpx 0;
  height: 33rpx;
  line-height: 33rpx;
  font-size: 24rpx; 
  font-weight: 500; 
  color: #999999; 
}
.start-box .st-img{
  margin-right: 5rpx;
  width: 25rpx;
  height: 25rpx;
}
 
.store-logo{
  width: 140rpx;
  height: 140rpx;
}
.tabs-box{
  position: absolute;
  bottom: 0;
  padding: 0 30rpx;
  width: 100%;
  height: 80rpx;
  border-bottom: 1px solid #E6E6E6;
}
.tabs-box .tabs-item{
  padding: 0 40rpx;
  height: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 26px;
  line-height: 40rpx;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
}
.tabs-box .active{
  color: #333;
}
.active::after{
  position: relative;
  bottom: -9rpx;
  margin: 0 auto;
  content: '';
  display: block;
  width: 40rpx;
  height: 8rpx;
  background: #49C0A2;
  border-radius: 200rpx;
}
.tabs-item .num{
  font-size: 20rpx;
}
.tabs-item:nth-child(1){
  padding: 0 40rpx 0 0;
}

/* 评论页面 */
.comment-box{
  margin: 0 auto;
  width: 690rpx;
}
.comment-box .com-item{
  margin-top: 30rpx;
}
.con-content .start-box{
  margin: 10rpx 0 0;
}
.l-box .tit{
  height: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 45rpx;
  color: #333333;
}
.con-content .r-box{
height: 33rpx;
font-size: 24rpx;
font-weight: 400;
line-height: 33rpx;
color: #999999;
}
.com-item .con-content{
  width: 580rpx;
}
.com-item .avatar{
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.com-item  .c-info{
  padding: 20rpx 0; 
  font-size: 24rpx; 
  font-weight: 500;
  line-height: 30rpx;
  color: #333333; 
}
.com-item .store-img-box{
  margin: 0rpx;
  padding: 0;
  width: 580rpx;
  height: 200rpx;
  overflow-y: hidden;
  overflow-x: scroll;
}
.com-item .img-scroll-box{
  height: 180rpx;
}
.com-item .store-img-box .store-img{
  width: 180rpx;
  height: 180rpx;
}
/* 商家详情页 */
.de-item{
  margin: 0 30rpx;
  padding: 30rpx 0;
  border-bottom: 1px solid #E6E6E6;
}
.de-item .l-icon,.de-item .r-icon{
  width: 40rpx;
  height: 40rpx; 
}
.de-item .a-icon{
  width: 48rpx!important;
  height: 48rpx!important; 
}
.de-item .text{ 
  flex: 1;
  padding: 0 30rpx;
  font-size: 28rpx; 
  font-weight: 500;
  line-height: 40rpx;
  color: #333333;
}
.de-item .line{
  margin: 0 40rpx;
  color: rgba(153, 153, 153, 1);
}
.store-img-box{
  width: 690rpx;
  height: 204rpx;
}
.img-scroll-box{
  width: auto;
  overflow-x: scroll;
  height: 144rpx;
}
.de-item .store-img{
  display: inline-block;
  margin-right: 20rpx;
  width: 188rpx;
  height: 144rpx;
}

goods.js 产品假数据

var goods=[
  {
    id: '111',  
    name: '商品类1', // 商品类型
    list: [ // 当前商品类型对应的所有商品
      {
        id: '010',
        title: '商品类型title11',
        pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        price: '1.55',
        detail: 'detail',
        num: 0 // num是为了我方便对商品加减操作，让后端加的
      },
      {
        id: '011',
        title: '商品类型title12',
        pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        price: '1.55',
        detail: 'detail',
        num: 0 // num是为了我方便对商品加减操作，让后端加的
      },
      {
        id: '012',
        title: '商品类型title13',
        pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        price: '1.55',
        detail: 'detail',
        num: 0 // num是为了我方便对商品加减操作，让后端加的
      }
    ]
  },
  {
    id: '221',  
    name: '商类22', // 商品类型
    list: [ // 当前商品类型对应的所有商品
      {
        id: '021',
        title: '商品类型title22',
        pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        price: '1.55',
        detail: 'detail',
        num: 0 // num是为了我方便对商品加减操作，让后端加的
      },
      {
        id: '022',
        title: '商品类型title23',
        pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        price: '1.55',
        detail: 'detail',
        num: 0 // num是为了我方便对商品加减操作，让后端加的
      },
      {
        id: '023',
        title: '商品类型title24',
        pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        price: '1.55',
        detail: 'detail',
        num: 0 // num是为了我方便对商品加减操作，让后端加的
      }
    ]
  },
  {
    id: '331',  
    name: '商品33', // 商品类型
    list: [ // 当前商品类型对应的所有商品
      {
        id: '031',
        title: '商品类型title31',
        pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        price: '1.55',
        detail: 'detail',
        num: 0 // num是为了我方便对商品加减操作，让后端加的
      },
      {
        id: '032',
        title: '商品类型title32',
        pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        price: '1.55',
        detail: 'detail',
        num: 0 // num是为了我方便对商品加减操作，让后端加的
      },
      {
        id: '033',
        title: '商品类型title33',
        pic: 'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        price: '1.55',
        detail: 'detail',
        num: 0 // num是为了我方便对商品加减操作，让后端加的
      }
    ]
  },
]
exports.goods = goods;

CPan_
关注
  • 6
    点赞
  • 踩
  • 62
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序商城项目实战(第七篇:生成订单支付页)
没有途径，只有努力
04-24 8353
订单支付分析代码实现效果图展示 分析 顶部改为"支付" 上方为地址,跳转至地址管理,可修改 下方为订单信息 最下方显示所需支付金额以及支付按钮,点击支付则支付成功跳转订单页 如果不支付则可以在我的订单内容查看该订单并且继续支付 代码实现 改变顶部导航内容"navigationBarTitleText": "支付" 界面: <navigator url="/pages/addressList/addressList" class="user_info_row" wx:if="{{statu!='待发
小程序外卖订单界面的示例代码
10-15
主要介绍了小程序外卖订单界面的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html前端--外卖点餐模板
11-26
把项目搭建到Tomcat中的appwebs文件资源中可以直接运行！
微信小程序实战篇-个人中心
热门推荐
代码君
08-04 4万+
哈喽，大家好，又到周五啦，有木有期待今天的更新呀~今天要教大家的是制作个人中心界面，先上效果图 个人中心制作 1. mine.js // pages/mine/mine.js var app = getApp() Page({ data: { userInfo: {}, motto: 'Hello World', // orderItems
【程序源代码】微信扫码点餐系统、小程序
最新发布
程序源代码
05-27 966
关键字：微信 扫码 点餐 系统、小程序（一）总体概述 1.1 系统介绍 主要是分为两部分内容：uniapp前端代码，java后台管理代码。主要使用的技术就是小程序开发，还有java开发。需要有一定基础的同学看看。采用Java语言开发的微信扫码点餐系统，后台采用ruoyi作为快速开发框架，微信小程序的登录使用到了JWT登录。1.2系统主要功能微信小程序扫码点单微信小程序外卖点单后台...
微信小程序，我的订单（待付款和选项卡）
weixin_63954739的博客
10-03 2069
首先是wxml,由于后台一直没有写接口，用的都是假数据，不过大致功能是实现了的。
微信电商小程序购买/加入购物车组件设计
Javagod_0906的博客
12-03 1882
作为一名常常摆烂，一蹶不振的大学生，最近接到了开发电商小程序的小任务，既然是电商，总得有购买加车功能吧？经过n个坤年的拜读微信小程序开发者文档还有别的大佬的指点，奉上我自己的理解，欢迎各位大佬指点改正，学习交流，共同进步。该文章适合微信小程序初学者小白参考使用:)需求电商类小程序/软件免不了在线下单，在线加入购物车功能，将它做成组件的形式显示在商品详情页中，效果如下，下面我们一步一步的实现 1.新建一个页面用来显示组件，再新建一个组件文件存放组件代码app.json的"pages"[ ]中注册页面（json
22-微信小程序商城 我的订单（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
杭州.黄老师
11-17 7606
我的订单 本节主要讲解会员功能的的我的订单界面的实现。效果如图15-3所示。 1.布局分析 顶部的菜单：全部订单/待支付/待收货，可以参考13.3节，沿用该节的内容，只需要改造每个菜单对应的swiper-item即可。 我们接下来分析其中一个订单的布局，多个订单循环显示即可。 结构布局分析示意如图15-4所示。 根据上面的布局分析，我们会产生基础的框架，代码示例如下： <scroll-view> <view > 单号：201808081102 | 时间：2018/9/1
微信小程序实现购物商城（附源码）
男儿何必尽成功的博客
03-20 2万+
微信小程序实现购物商城的前端代码。 1.首页：包括活动图片的轮播展示、活动商品缩略图和基本信息的展示、横向滑动tabBar、搜索框等。 2.活动详情展示页：活动详情展示页有两种，根据type进行分别跳转。一种是展示活动详情，主要包括活动图片、活动内容、活动链接等。另一种是展示活动商品，包括活动图片、活动内容和活动商品列表。 3.商品详情展示页：商品详情展示了商品轮播图和商品信息。 4.搜索页，支持按销量、价格等进行排序。 5.我的页面：展示用户余额、返利总额等信息。 6.订单页面：展示待返利订单、已返利订单
美团外卖小程序代码
07-02
【美团外卖小程序代码】是一个与微信小程序开发相关的项目，主要涉及的是使用微信小程序框架开发美团外卖功能的应用。在这个项目中，开发者将实现一系列与在线订餐、商家展示、订单处理和支付流程等功能相关的代码。...
微信小程序-外卖小程序Demo源码
05-14
【微信小程序-外卖小程序Demo源码】是一款专为开发微信小程序设计的示例代码，它包含了一个完整的外卖应用的框架，适用于学习和快速构建类似应用。这个Demo源码旨在帮助开发者理解微信小程序的架构和API的使用，以及...
订单管理小程序源码
08-01
订单管理小程序源码 订单管理小程序源码 订单管理小程序源码
html购物订单页模板
01-11
html购物订单页模板
微信小程序商品列表和购物车完整代码实例
12-13
微信小程序开发，代码完整可用，用于电商微信平台开发参考，有二个界面（商品展示页和购物车页面）商品展示页选择商品加入购物车，再进入购物车页面将看到加入购物车的商品，并有商品件数和金额，和淘宝的购物车类似，有很好的参考价值。
微信小程序商品展示界面源码demo
10-26
当初自己根据微信小程序开发文档写的一个demo,商品分类展示功能。
仿美团外卖微信小程序源码.rar
07-13
3. **用户界面设计**：美团外卖小程序的用户界面设计通常包括清晰的导航、美观的布局和直观的操作流程。在源码中，这部分涉及到UI组件的使用和自定义，如轮播图、列表、地图等。 4. **地理位置服务**：为了提供附近...
Java+MySql微信买菜小程序的设计与实现（附源码 调试 文档）
shenchengyv的博客
11-05 562
该小程序主要包括服务器端和前台小程序用户端两部分，其中服务器端主要负责用户管理、分类管理、菜品管理、订单管理、评价管理、售后管理和系统管理等功能的实现，前台小程序用户端主要提供首页、分类页、购物车页、菜品详细页、订单结算页、我的等功能的展示。除了基本的用户管理、分类管理、菜品管理、订单管理等功能外，我们的系统还具有一些特色的功能。用户管理主要是对使用该系统的用户进行管理，包括用户的注册、登录、信息修改等功能。服务器端的功能主要包括用户管理、分类管理、菜品管理、订单管理、评价管理、售后管理和系统管理等。
微信小程序点餐页面实现完整版
csdn_4399的博客
03-05 2万+
微信小程序点餐页面实现完整版HTMLJSCSS总结 HTML <view class="page"> <view class="header-input" style="background:#efefef;height:40rpx;"> <!-- 搜索条 --> <view class="search-input" style="background-color: white;" bindtap="searchNav"> <icon s
编写美团外卖微信小程序代码
06-06
1. 界面设计和用户体验：美团外卖微信小程序需要考虑到用户体验和界面设计，使系统易于使用和操作。 2. 数据安全和隐私保护：美团外卖微信小程序需要保证用户数据的安全性和隐私保护，避免出现数据泄露和安全漏洞。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值