最終效果如圖，這次是寫一個單獨元件，可以多頁面複用

目錄結構如圖

cart是寫的組建，logs引用cart組建

logs.json

{
  "navigationBarTitleText": "檢視啟動日誌",
  "usingComponents": {
    "cart": "../../component/cart/cart"
  }
}

logs.wxml

<view class="content">
<cart prop-array='{{selectArray}}' bind:myget='getDate'></cart>
</view>
 

logs.js

Page({
  data: {
    logs: [],
    selectArray: [
      {
        id: '1',
        name: '塑料瓶',
        num: 0,
        desc: '價格會隨市場行情變化',
        price: '0.2元/斤'
      },
      {
        id: '2',
        name: '包裝紙',
        num: 0,
        desc: '價格會隨市場行情變化',
        price: '0.3元/斤'
      },
      {
        id: '3',
        name: '舊書本',
        num: 0,
        desc: '價格會隨市場行情變化',
        price: '0.3元/斤'
      },
      {
        id: '4',
        name: '舊雜誌',
        num: 0,
        desc: '價格會隨市場行情變化',
        price: '0.3元/斤'
      },
      {
        id: '5',
        name: '壞電子產品',
        num: 0,
        desc: '需根據實際情況評估',
        price: '0元/斤'
      }],
  },
  getDate: function (e) {
    console.log(e.detail)
  }
})
 

cart.json

{
  "component": true,
  "usingComponents": {}
}

cart.wxss

/*加減樣式-------------*/
.stepper-content{
  display: flex;
  justify-content: flex-end;
}
.stepper {
  width:220rpx;
  height:60rpx;
  /* float: right; */
}
/*加號和減號*/
.stepper text {
  float: left;
  width: 80rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1rpx solid #ccc;
}
/*數值*/
.stepper input {
  width: 50rpx;
  height: 60rpx;
  float: left;
  margin: 0 auto;
  text-align: center;
  font-size: 30rpx;
  /* border-left: 1rpx solid #ccc;
  border-right: 1rpx solid #ccc; */
}
/*普通樣式*/
.stepper .normal {
  color:black;
}
/*禁用樣式*/
.stepper .disable {
  color: #ccc;
}
/*加減樣式-------------*/
.content-rule{
  border-top: 1rpx solid #ccc;
  margin-top:20rpx; 
}
 

cart.wxml

<view class="content-rule" wx:for="{{propArray}}" >
  <view class="express-text4">{{item.name}}</view>
  <view class="express-text2">{{item.desc}}</view>
  <view class="express-text2">單價:¥{{item.price}}</view>
  <view class="stepper-content">
    <view class='stepper' >
      <text bindtap='bindMinus' data-index="{{index}}">-</text>
      <input bindinput='bindManual' disabled='disabled' value='{{item.num}}' data-index="{{index}}"></input>
      <text bindtap='bindPlus' data-index="{{index}}" >+</text>
    </view>
  </view>
</view>

cart.js

Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    propArray: {
      type: Array,
    }
  },

  /**
   * 元件的方法列表
   */
  methods: {
    /*點選減號*/
    bindMinus: function (e) {
      var me = this;
      const index = e.currentTarget.dataset.index;
      let carts = this.properties.propArray;
      let num = carts[index].num;
      if (num <= 1) {
        const index = e.currentTarget.dataset.index;
        let carts = this.properties.propArray;
        carts[index].num = 0;
        console.log(carts[index].num)
        this.triggerEvent('myget', carts)
        this.setData({
          propArray: carts,
        });
      } else {
        num = num - 1;
        carts[index].num = num;
        this.triggerEvent('myget', carts)
        this.setData({
          propArray: carts,
        });
      }
    },
    /*點選加號*/
    bindPlus: function (e) {
      var me = this;
      const index = e.currentTarget.dataset.index;
      console.log(index)
      let carts = this.properties.propArray;
      let num = carts[index].num;
      num++;
      carts[index].num=num;
      this.triggerEvent('myget', carts)
      this.setData({
        propArray: carts,
      })
    }
  }
})