• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

微信小程序商品展示页面(仿咸鱼)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

项目中做了一个商品发布展示的页面，记录下来
解决问题：

  • 想在setData中更改数组具体下标中的某个值
let one = "lowMoney[" + 0 + "].money";

this.setData({

[one]: (product.currentPrice * 0.1).toFixed(2), //1折

}）


<block wx:if="{{release}}">
  <view class=\'null_release\'>
    <image class=\'null_img\' src=\'/resources/images/purchase-record.png\'></image>
    <text class=\'null_text_release\'>快去发布商品吧~~~</text>
  </view>
</block>
 
<block wx:else>
  <view class=\'release\' wx:for="{{releases}}" wx:key="index" wx:for-index="index">
    <view data-id=\'{{item.productID}}\' bindtap=\'productDetail\'>
      <image src=\'http://qhds.drefore.cn{{item.image}}\'></image>
      <text class=\'out\' wx:if="{{item.state === 0}}">已下架</text>
      <text class=\'release_text\'>{{item.title}}</text>
      <text class=\'release_money\'>￥{{item.currentPrice}}</text>
      <text class=\'pv \' decode="{{true}}">提问{{item.comment}}&nbsp;&nbsp;&nbsp;浏览{{item.pv}}</text>
    </view>
    <view class=\'button\'>
      <button data-index=\'{{index}}\' data-productid=\'{{item.productID}}\' bindtap=\'onClickShowMoney\'>降价</button>
      <button data-productid=\'{{item.productID}}\' bindtap=\'edit\'>编辑</button>
      <button data-productid=\'{{item.productID}}\' data-state=\'{{item.state}}\' bindtap=\'onClickShowMore\'>更多</button>
    </view>
  </view>
 
  <!--降价-->
  <view class=" {{ showLowMoney ? \'mask\' : \'\' }}" data-id=\'0\' bindtap="onClickHidden" />
  <view class="modalDlg" wx:if="{{showLowMoney}}">
    <view class="lowMoney">
      <image class=\'low_img\' src=\'http://qhds.drefore.cn{{image}}\' />
      <image class=\'close\' src=\'/resources/images/close.png\' data-id=\'0\' bindtap="onClickHidden" />
      <view class=\'now_money\'>
        <view>
          <span>现价</span>
          <span class="now_mon">￥{{now_mon}}</span>
        </view>
        <view class=\'low_money\'>
          <span>降价至</span>
          <view class="low_mon">
            <view class="low_mon_span">￥{{low_mon}}</view>
          </view>
        </view>
      </view>
      <view class=\'dis\'>
        <view data-index=\'{{index}}\' bindtap="clickLowMoney" wx:for="{{lowMoney}}" class=\'discount {{index== lowind? "background-color" : " "}}\'>
          <image class=\'check\' src=\'{{index== lowind ?"/resources/images/check.png" : " "}}\'></image>
          <view class=\'lowMoney_mon discount_view\'>￥{{item.money}}</view>
          <view class=\'lowMoney_tip discount_view\'>{{item.tip}}</view>
        </view>
      </view>
      <button class=\'sure_but\' data-id=\'0\' bindtap="updatePrice">确定</button>
    </view>
  </view>
 
  <!--更多-->
  <view class=" {{ showMore ? \'mask\' : \'\' }}" data-id=\'1\' bindtap="onClickHidden" />
  <view class="modalDlg" wx:if="{{showMore}}">
    <view class="more">
      <view wx:if="{{productState}}" class=\'more_view more_bot\' bindtap=\'putaway\'>上架</view>
      <view wx:else class=\'more_view more_bot\' bindtap=\'soldOut\'>下架</view>
      <view class=\'more_view more_bot\' bindtap=\'productDel\'>删除</view>
      <view data-id=\'1\' bindtap=\'onClickHidden\' class=\'more_view\'>取消</view>
    </view>
  </view>
 
  <button class=\'new\' bindtap=\'newRelease\'>新建</button>
  <view class=\'bottom \'>--没有更多了--</view>
</block>

// pages/myRelease/myRelease.js
var app = getApp();
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    releases: [],
    low_mon: 0, //降价至
    now_mon: 0, //现价
    image: "", //降价图片
    productID: 0,
    limit: 5,
    release: false,
    showMore: false,
    showLowMoney: false,
    lowMoney: [{
        money: 0,
        tip: "打1折，极速卖"
      },
      {
        money: 0,
        tip: "打3折，出手快"
      },
      {
        money: 0,
        tip: "打5折，有竞争力"
      }, {
        money: 0,
        tip: "打8折"
      }
    ],
    lowind: 0,
    productState: false,
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function(options) {
    this.getMyRelease();
  },
 
  /**
   * 降价显示
   */
  onClickShowMoney(e) {
    let index = e.currentTarget.dataset.index;
    let productID = e.currentTarget.dataset.productid;
    let product = this.data.releases[index];
    let one = "lowMoney[" + 0 + "].money";
    let three = "lowMoney[" + 1 + "].money";
    let five = "lowMoney[" + 2 + "].money";
    let eight = "lowMoney[" + 3 + "].money";
    this.setData({
      showLowMoney: !this.data.showLowMoney,
      now_mon: product.currentPrice,
      [one]: (product.currentPrice * 0.1).toFixed(2), //1折
      [three]: (product.currentPrice * 0.3).toFixed(2), //3折
      [five]: (product.currentPrice * 0.5).toFixed(2), //5折
      [eight]: (product.currentPrice * 0.8).toFixed(2), //8折
      low_mon: (product.currentPrice * 0.1).toFixed(2), //默认1折
      productID: productID,
      image: product.image
    })
  },
 
  /**
   * 更多显示
   */
  onClickShowMore(e) {
    this.setData({
      showMore: !this.data.showMore,
      productID: e.currentTarget.dataset.productid
    });
    if (e.currentTarget.dataset.state === 0) {
      this.setData({
        productState: true
      })
    } else {
      this.setData({
        productState: false
      })
    }
  },
  /**
   * 降价&更多隐藏
   */
 
  onClickHidden(e) {
    let that = this;
    switch (e.currentTarget.dataset.id) {
      case \'0\':
        that.setData({
          showLowMoney: !this.data.showLowMoney,
          lowind: 0
        });
        break;
      case \'1\':
        that.setData({
          showMore: !this.data.showMore
        });
        break;
    }
  },
  /**
   * 修改价钱
   * updatePrice
   */
  updatePrice(e) {
    let params = {
      userID: app.globalData.userID,
      id: this.data.productID,
      price: this.data.low_mon,
    }
    app.updatePrice(params).then(res => {
      if (res.state === 1) {
        this.getMyRelease();
        this.setData({
          showLowMoney: !this.data.showLowMoney,
          lowind: 0
        })
      }
    })
 
  },
  /**
   * 下架
   * soldOut
   */
  soldOut() {
    let params = {
      userID: app.globalData.userID,
      id: this.data.productID,
      flag: this.data.productState
    }
    app.soldOut(params).then(res => {
      if (res.state === 1) {
        wx.showToast({
          title: \'已下架\',
          icon: "none",
          duration: 1000,
          mask: true,
        })
        this.getMyRelease();
        this.setData({
          showMore: !this.data.showMore,
          lowind: 0
        })
      }
    })
  },
 
  /**
   * 上架
   *putaway
   */
  putaway() {
    let params = {
      userID: app.globalData.userID,
      id: this.data.productID,
      flag: this.data.productState
    }
    app.soldOut(params).then(res => {
      if (res.state === 1) {
        wx.showToast({
          title: \'已上架\',
          icon: "none",
          duration: 1000,
          mask: true,
        })
        this.getMyRelease();
        this.setData({
          showMore: !this.data.showMore,
          lowind: 0
        })
      }
    })
  },
  /**
   * 删除
   * productDel
   */
  productDel() {
    let params = {
      userID: app.globalData.userID,
      id: this.data.productID
    }
    app.productDel(params).then(res => {
      if (res.state === 1) {
        this.getMyRelease();
        this.setData({
          showMore: !this.data.showMore,
          lowind: 0
        })
      }
 
    })
  },
  /**
   * 选择打折力度
   */
  clickLowMoney(e) {
    let price = this.data.lowMoney[e.currentTarget.dataset.index].money;
    if (this.data.lowind == e.currentTarget.dataset.index) {
      this.setData({
        lowind: -1
      })
    } else {
      this.setData({
        lowind: e.currentTarget.dataset.index,
        low_mon: price
      })
    }
  },
  /**
   * 编辑
   */
  edit(e) {
    let productID = e.currentTarget.dataset.productid
    wx.navigateTo({
      url: \'../productReleased/productReleased?productID=\' + productID,
    })
  },
  /**
   * 新建我的发布
   */
  newRelease() {
    wx.navigateTo({
      url: \'../productReleased/productReleased?productID=\' + 0,
    })
  },
 
  productDetail(e) {
    wx.navigateTo({
      url: \'../product/product?id=\' + e.currentTarget.dataset.id,
    })
  },
  //上拉事件
  onReachBottom: function() {
    this.data.limit = this.data.limit + 5
    this.getMyRelease();
  },
  /**
   * 获取我的发布
   */
  getMyRelease() {
    let params = {
      userID: app.globalData.userID,
      limit: this.data.limit,
      offset: 0,
    }
    app.getMyRelease(params).then(res => {
      let release = res.data.release
      this.setData({
        releases: release
      })
    })
  },
 
})

/* pages/order/order.wxss */
 
page {
  background-color: #f1f1f1;
}
 
.null_img {
  position: absolute;
  color: #e5447b;
  width: 200rpx;
  height: 190rpx;
  margin-left: 40%;
  margin-top: 40%;
}
 
.null_text_release {
  position: absolute;
  font-size: 20px;
  color: #e5447b;
  margin-left: 35%;
  margin-top: 70%;
}
 
.null_release {
  background-color: white;
  width: 100vw;
  height: 100vh;
}
 
.bottom {
  padding-top: 10px;
  height: 40px;
  text-align: center;
  color: rgba(32, 27, 27, 0.173);
  font-size: small;
}
 
.release {
  width: 100%;
  height: 300rpx;
  background-color: white;
  margin-top: 20rpx;
}
 
.release image {
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
}
 
.release_text {
  position: absolute;
  width: 550rpx;
  left: 200rpx;
  font-size: 35rpx;
  padding-top: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.release_money {
  color: red;
  position: absolute;
  padding-top: 80rpx;
  font-size: 35rpx;
}
 
.pv {
  font-size: 25rpx;
  position: absolute;
  padding-top: 150rpx;
  color: #8f8f8f;
}
 
.button {
  display: flex;
  width: 480rpx;
  margin-left: 240rpx;
  margin-top: 10rpx;
}
 
.button button {
  width: 130rpx;
  height: 60rpx;
  font-size: 25rpx;
  background: white;
}
 
.out {
  position: absolute;
  padding-top: 220rpx;
  left: 30rpx;
  width: 100rpx;
  font-size: 30rpx;
}
 
.more {
  width: 450rpx;
  height: 380rpx;
  background: white;
  border-radius: 20rpx;
}
 
.more_view {
  font-size: 30rpx;
  color: #0095f2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 120rpx;
}
 
.more_bot {
  border-bottom: 1px solid #cfcfcf;
}
 
.lowMoney {
  width: 600rpx;
  height: 600rpx;
  background: white;
  border-radius: 20rpx;
  display: flex;
  flex-direction: row;
}
 
.low_img {
  width: 120rpx;
  height: 120rpx;
  margin: 50rpx;
}
 
.close {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  right: -70rpx;
  top: 20rpx;
}
 
.now_money {
  font-size: 30rpx;
  position: absolute;
  left: 100rpx;
  top: 50rpx;
}
 
.now_mon {
  color: red;
  padding-left: 60rpx;
  font-weight: 700;
}
 
.low_money {
  padding-top: 23rpx;
  display: flex;
  flex-direction: row;
}
 
.low_mon {
  width: 150rpx;
  height: 60rpx;
  background-color: #f2f2f2;
  border-radius: 10%;
  margin-left: 10rpx;
}
 
.low_mon_span {
  font-weight: 700;
  padding-left: 20rpx;
  padding-top: 10rpx;
}
 
.dis {
  width: 500rpx;
  height: 220rpx;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  margin-top: 180rpx;
  margin-left: 50rpx;
}
 
.discount {
  font-size: 30rpx;
  width: 230rpx;
  height: 100rpx;
  border-radius: 10rpx;
  background-color: #f2f2f2;
  margin-left: 20rpx;
  margin-top: 20rpx;
}
 
.background-color {
  background-color: #fcd9be;
}
 
.check {
  width: 80rpx;
  height: 70rpx;
  position: absolute;
  margin-top: 48rpx;
  margin-left: 174rpx;
  border-bottom-right-radius:10rpx;
}
 
.discount_view {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8rpx;
}
 
.lowMoney_mon {
  color: red;
  font-weight: 700;
}
 
.lowMoney_tip {
  font-size: 25rpx;
  color: #707070;
}
 
.sure_but {
  width: 500rpx;
  height: 13%;
  position: absolute;
  bottom: 30rpx;
  margin-left: 50rpx;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e44178;
  color: white;
  font-weight: 700;
}
 
/* 遮罩层 */
 
.mask {
  /* display: block; */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9000;
  opacity: 0.5;
}
 
/* 弹出层 */
 
.modalDlg {
  width: 400rpx;
  position: fixed;
  top: 25vh;
  left: 0;
  right: 0;
  z-index: 9999;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.new {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #e44179;
  color: white;
  font-size: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 200rpx;
  right: 20rpx;
}

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
原创：WeZRender：微信小程序Canvas增强组件发布时间：2022-07-18
下一篇：
小程序自定义单页面、全局导航栏发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap