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

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

解决问题：

1. 想在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>

WXML

// 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
      })
    })
  },

})

JS

/* 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:;
}

.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:;
  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:;
}

.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:;
}

/* 遮罩层 */

.mask {
  /* display: block; */
  width: 100%;
  height: 100%;
  position: fixed;
  top:;
  left:;
  background: rgba(0, 0, 0, 0.5);
  z-index:;
  opacity: 0.5;
}

/* 弹出层 */

.modalDlg {
  width: 400rpx;
  position: fixed;
  top: 25vh;
  left:;
  right:;
  z-index:;
  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;
}
 

CSS