dvcp_v2_wxcp_app/src/apps/AppSuperMarket/AppSuperMarket.vue

<template>
  <div class="AppSupermarket">
    <AiTopFixed>
      <!-- <div class="area-content">
        <AiAreaPicker :areaId="user.areaId" :value="areaId" @select="areaSelect" :name.sync="areaName">
          <img src="./components/img/local-icon.png" alt="">
          <span class="label" v-if="areaName">{{ areaName }}</span>
          <span v-else>请选择</span>
          <u-icon name="arrow-down" color="#666" size="24"/>
        </AiAreaPicker>
      </div> -->
      <div class="header-top">
        <div>区域选择</div>
        <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" selectRoot>
          <span class="label" v-if="areaName">{{ areaName }}</span>
          <span v-else>请选择</span>
          <u-icon name="arrow-right" color="#666" size="24" style="margin-left:4px;" />
        </AiAreaPicker>
      </div>
    </AiTopFixed>
    <div class="goods-list" v-if="numList.length">
      <div class="left">
        <div :class="numIndex == index ? 'item active' : 'item'"  v-for="(item, index) in numList" :key="index" @click="numClick(index)">
          <span v-show="item.total > 0">{{ item.total }}</span>
          {{ item.type }}分区
        </div>
      </div>
      <div class="right">
        <div class="item" v-for="(item, index) in goodsList[numIndex]" :key="index">
          <img :src="item.photo[0].url" alt="" />
          <div class="item-info">
            <p class="item-name">{{ item.merchandiseName }}</p>
            <div class="item-point">
              <span class="num">{{ item.costIntegral }}</span
              >积分
            </div>
            <div class="item-bottom">
              <div></div>
              <div class="item-bottom__right">
                <image v-show="item.num > 0" @click="cut(numIndex, index)" src="./components/img/cut.png"/>
                <input v-show="item.num > 0" v-model="item.num" />
                <image src="./components/img/add.png"  @click="add(numIndex, index)" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <AiEmpty description="暂无数据，请选择到村/社区" v-if="!isAreaId && !numList.length"/>
    <AiEmpty description="暂无数据" v-if="isAreaId && !numList.length" />
    <div class="goods-footer" v-if="numList.length">
      <div class="goods-footer__bottom">
        <div class="goods-footer__bottom__left">
          <h3>共{{ total }}件商品</h3>
          <div class="goods-footer__bottom--middle">
            <span>合计 ：</span>
            <i>{{ money }}</i>
            <em>积分</em>
          </div>
        </div>
        <div
          class="goods-footer__bottom--btn"
          @click="toOrder"
          hover-class="text-hover"
        >
          去结算
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  name: "AppSuperMarket",
  appName: '积分兑换',
  data() {
    return {
      numList: [],
      numIndex: 0,
      goodsList: [],
      areaId: "",
      areaName: "",
      userInfo: {},
      propAreaId: "",
      isAreaId: false
    };
  },

  computed: {
    ...mapState(["user"]),

    total() {
      let total = 0;
      if (!this.numList.length) {
        return total;
      }

      this.numList.forEach((item) => {
        total = item.total + total;
      });

      return total;
    },

    money() {
      let money = 0;
      if (!this.goodsList.length) {
        return money;
      }

      this.goodsList.forEach((arr) => {
        arr.forEach((item) => {
          money = money + Number(item.num) * item.costIntegral;
        });
      });

      return money;
    },
  },

  onLoad() {
    this.areaId = this.user.areaId
    if(/[^0]0{0,2}$/.test(this.areaId)) {
        this.isAreaId = true
        this.getList()
      }else {
        this.isAreaId = false
      }
    this.areaName = this.user.areaName || ''
  },
  onShow() {
    document.title = '积分超市'
  },
  methods: {
    toOrder() {
      if (!this.total) {
        return this.$u.toast("请选择商品");
      }
      let goods = [];

      this.goodsList.forEach((arr) => {
        arr.forEach((item) => {
          if (item.num) {
            goods.push(item);
          }
        });
      });

      uni.navigateTo({ url: `./SubmitOrder?goods=${JSON.stringify(goods)}&total=${this.total}&money=${this.money}&areaId=${this.areaId}` })
    },
    areaSelect(e) {
      if(/[^0]0{0,2}$/.test(e)) {
        this.areaId = e
        this.isAreaId = true
        this.getList()
      }else {
        this.numList = []
        this.isAreaId = false
      }
    },
    getList() {
      this.$http.post(`/app/appvillagerintegralmerchandise/listByIntegral?areaId=${this.areaId}`).then((res) => {
        if (res.code === 0) {
          if (res.data) {
            this.numList = Object.keys(res.data).map((item) => {
              return {
                type: item,
                total: 0,
              };
            });
            this.goodsList = Object.values(res.data).map((item) => {
              item.map((items) => {
                items.num = 0;
                if(items.photo) {
                  items.photo = JSON.parse(items.photo)
                }
                

                return items;
              });

              return item;
            });
          }
        }
      });
    },

    add(index, i) {
      this.$set(
        this.goodsList[index][i],
        "num",
        Number(this.goodsList[index][i].num) + 1
      );

      let total = 0;
      this.goodsList[index].forEach((item) => {
        total = total + item.num;
      });

      this.$set(this.numList[index], "total", total);
    },

    cut(index, i) {
      this.$set(
        this.goodsList[index][i],
        "num",
        Number(this.goodsList[index][i].num) - 1
      );

      let total = 0;
      this.goodsList[index].forEach((item) => {
        total = total + item.num;
      });

      this.$set(this.numList[index], "total", total);
    },

    numClick(index) {
      this.numIndex = index;
    },
  },
};
</script>
<style scoped lang="scss">
  uni-page-body{
    height: 100%;
    background-color: #fff;
  }
  .header-top {
    display: flex;
    background: #fff;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
  }
  .area-content {
    width: 100%;
    line-height: 64px;

    img {
      width: 42px;
      vertical-align: middle;
      margin-right: 16px;
    }

    .u-icon {
      margin-left: 6px;
    }
  }
  .item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28rpx;

    .item-bottom__right {
      display: flex;
      align-items: center;
      height: 60rpx;
    }

    image {
      width: 27rpx;
      height: 27rpx;
    }

    input {
      width: 90rpx;
      height: 60rpx;
      padding: 0 20rpx;
      margin: 0 10rpx;
      background: #f6f6f6;
      border-radius: 10rpx;
      font-size: 26rpx;
      color: #666;
      text-align: center;
    }
  }

  .goods-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    background: #fff;

    .goods-footer__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80rpx;
      padding: 0 30rpx;
      background: #eff4ff;
      color: #333333;
      font-size: 32px;
    }

    .goods-footer__bottom--btn {
      width: 212rpx;
      height: 104rpx;
      line-height: 104rpx;
      font-size: 36rpx;
      color: #fff;
      text-align: center;
      background: #197df0;
    }

    .goods-footer__bottom__left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      padding: 0 32rpx;

      h3 {
        color: #f94246;
        font-size: 32rpx;
      }

      .goods-footer__bottom--middle {
        display: flex;
        align-items: baseline;

        span {
          color: #f94246;
          font-size: 32rpx;
        }

        i {
          position: relative;
          top: 2rpx;
          margin-right: 12px;
          color: #fa444b;
          font-size: 40rpx;
        }

        em {
          color: #f94246;
          font-size: 24rpx;
        }
      }
    }

    .goods-footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 104rpx;
    }
  }

  .AppSupermarket {
    height: 100%;
    overflow-y: hidden;
    .title {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background: #eff4ff;
      padding-left: 30rpx;
      color: #3a7ee2;
      font-size: 28rpx;
    }
    .goods-list {
      // padding-top: 80rpx;
      padding-bottom: 184px;
      height: 100%;
      box-sizing: border-box;
      overflow-y: hidden;
      .left {
        width: 168rpx;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        float: left;
        background: #faf9fb;
        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 100%;
          height: 104rpx;
          line-height: 1.1;
          border-bottom: 2rpx solid #d8e5ff;
          text-align: center;
          color: #333;
          font-size: 28rpx;
          border-left: 6rpx solid #faf9fb;

          span {
            position: absolute;
            right: 8rpx;
            top: 8rpx;
            // width: 28px;;
            height: 28px;
            line-height: 28px;
            padding: 0 9px;
            text-align: center;
            color: #fff;
            font-size: 10px;
            border-radius: 14px;
            background: #fb4e44;
          }
        }

        .active {
          border-left: 6rpx solid #1d58fe;
          background: linear-gradient(
            270deg,
            #ffffff 0%,
            #ffffff 77%,
            #e7eafa 100%
          );
        }
      }
      .right {
        float: left;
        width: calc(100% - 168rpx);
        height: 100%;
        overflow-y: scroll;
        .item {
          width: 100%;
          padding: 28rpx 30rpx 44rpx;
          box-sizing: border-box;
          img {
            width: 192rpx;
            height: 192rpx;
            border: 2rpx solid #d7d5d5;
          }
          .item-info {
            display: inline-block;
            width: 276rpx;
            padding-left: 30rpx;
            vertical-align: top;
            .item-name {
              width: 100%;
              word-break: break-all;
              line-height: 42rpx;
              margin-bottom: 30rpx;
              font-size: 30rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
            }
            .item-point {
              color: #fa4a51;
              font-size: 24rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              line-height: 34rpx;
              .num {
                font-size: 40rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                margin-right: 8rpx;
              }
            }
          }
        }
      }
    }
  }

  i{
    font-style: normal;
  }
</style>