nk-shop2.0/pages/nongKe/gather/select_warehouse.vue

<template>
  <view class="select_warehouse">
    <view class="wrapper flex_a_c_j_sb">
      <block v-for="item in goodsData" :key="item.name">
        <view class="select_item" @click="navigato(item.type)" :style="{'background-image': `url(${item.src})`}">
          <view class="title">{{ item.name }}</view>
          <view class="iconfont icon-jiantou"></view>
        </view>
      </block>
    </view>

    <view class="goods-wrapper wrapper">
      <block v-for="(item,index) in goods" :key="index">
        <view class="item">
          <view class="l_cont">
            <image :src="item.image" mode="aspectFill"></image>
          </view>
          <view class="r_cont">
            <text>{{item.store_name}}</text>
          </view>
        </view>
      </block>
    </view>

    <u-popup :show="editGoodsShow" @close="editGoodsClose" :round="18" mode="center">
      <view class="edit_goods_box">
        <view class="edit_name flex_a_c edit_name_no">
          <text>商品编号：</text><input type="text" disabled placeholder="请输入商品名称" v-model="editGoodsCode">
        </view>
        <view class="edit_name flex_a_c edit_name_no">
          <text>商品名称：</text> <input type="text" disabled placeholder="请输入商品名称" v-model="editGoodsName">
        </view>
        <view class="edit_name flex_a_c">
          编辑商品价格：<input type="text" placeholder="请输入商品名称" v-model="editGoodsPrice">
        </view>
        <view class="edit_store flex_a_c">
          编辑商品库存：<input type="text" placeholder="请输入库存" v-model="editGoodsStore">
        </view>
        <view class="edit_goods_btn">
          <u-button type="error" text="取消" class="edit_btn" @click="editGoodsShow=false">
          </u-button>
          <u-button type="primary" text="保存" class="edit_btn" @click="editGoodsClose">
          </u-button>
        </view>
      </view>
    </u-popup>

    <u-popup :show="searchGoodsShow" @close="searchGoodsClose" :round="18" mode="center">
      <view class="search_goods_box">
        <input type="text" v-model="searchGoodsName" class="searchGoods" placeholder="请输入商品名称">
        <view class="edit_goods_btn">
          <u-button type="error" text="取消" class="edit_btn" @click="searchGoodsShow=false">
          </u-button>
          <u-button type="primary" text="搜索" class="edit_btn" @click="searchGoodsClose">
          </u-button>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
  import { microSeachBarCode, microEadtProduct } from '@/api/store.js'
  import { seachBarCodeAPI } from '@/api/api.js'
  import { Toast } from '@/libs/uniApi'
  export default {
    data() {
      return {
        goodsData: [{
            name: '商品名称入库',
            type: 1,
            src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/mingcheng.png'
          },
          {
            name: '扫码入库',
            type: 2,
            src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png'
          }
        ],
        product_id: '',
        editGoodsCode: '',
        editGoodsName: '',
        editGoodsPrice: '',
        editGoodsStore: '',
        editGoodsShow: false, // 扫码修改商品信息
        mer_id: '',
        searchGoodsShow: true,
        searchGoodsName: '',
        goods: []
      }
    },
    onLoad(e) {
      this.mer_id = e.mer_id
    },
    onShow() {},
    methods: {
      openSearch() {

      },
      async searchGoodsClose() {
        const rq = {
          mer_id: this.mer_id,
          name: this.searchGoodsName
        }
        const { data } = await seachBarCodeAPI(rq).catch(err => Toast(err))
        console.log('data', data);
        this.goods = data.list
        this.searchGoodsShow = false
      },
      async editGoodsClose() {
        const data = {
          price: this.editGoodsPrice,
          stock: this.editGoodsStore,
          id: this.product_id
        }
        try {
          const res = await microEadtProduct(data)
          Toast("更新成功")
          this.editGoodsShow = false
        } catch (e) {
          Toast("更新失败")
          this.editGoodsShow = false
        }

      },
      navigato(type) {
        type === 1 ? uni.navigateTo({
          url: `/pages/product/addGoods/index?mer_id=${this.mer_id}`
        }) : this.scanCode();
      },
      scanCode() {
        const self = this
        uni.scanCode({
          scanType: ["qrCode", "barCode", "datamatrix", "pdf417"],
          success(res) {
            self.seachBarCode(res.result)
          },
          fail(res) {
            console.log(res);
          },
        })
      },
      async seachBarCode(code) {
        try {
          const { data } = await microSeachBarCode({
            code: code
          })
          console.log('data', data.data);
          this.product_id = data.data.product_id
          this.editGoodsStore = data.data.stock
          this.editGoodsPrice = data.data.price
          this.editGoodsCode = data.data.attr_value.bar_code
          this.editGoodsName = data.data.store_name
          this.editGoodsShow = true
        } catch (err) {
          uni.navigateTo({
            url: `/pages/product/addGoods/index?mer_id=${this.mer_id}&code=${code}`
          })
        }
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .select_warehouse {
    padding-top: 20px;
  }

  .wrapper {
    width: 694.74rpx;
    margin: 0 auto;
  }

  .goods-wrapper {
    .item {
      display: flex;
      height: 175.44rpx;
      width: 100%;
      background-color: #fff;
      margin-top: 21.05rpx;
      border-radius: 8px;
      padding: 12px;

      .l_cont {
        image {
          width: 133.33rpx;
          height: 133.33rpx;
          border-radius: 8px;
        }
      }

      .r_cont {
        margin-left: 17.54rpx;
      }
    }
  }

  .select_item {
    width: 336.84rpx;
    height: 189.47rpx;
    border-radius: 8px;
    background-color: #eee;
    padding: 35.09rpx 28.07rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;

    .title {
      font-size: 35.09rpx;
    }
  }

  .search_goods_box {
    width: 694.74rpx;
    padding: 28.07rpx;
    font-size: 31.58rpx;

    .searchGoods {
      height: 87.72rpx;
      border: 1px solid #f5f5f5;
      border-radius: 8px;
      padding: 12px;
      margin: 21.05rpx 0;
    }

    .edit_goods_btn {
      margin-top: 28.07rpx;
      display: flex;
      justify-content: space-between;

      .edit_btn {
        width: 210.53rpx;
      }
    }
  }

  // 扫码编辑商品
  .edit_goods_box {
    width: 694.74rpx;
    padding: 28.07rpx;
    font-size: 31.58rpx;

    text {
      color: '#f8f9f9';
    }

    .edit_name,
    .edit_store {
      height: 105.26rpx;
    }

    .edit_name_no {
      color: #a4a4a4;
    }

    .edit_store {
      // border-top: 1px solid #a4a4a4;
      margin-top: 21.05rpx;
    }

    /deep/.u-button {
      width: 300rpx;
    }

    .edit_goods_btn {
      margin-top: 28.07rpx;
      display: flex;
      justify-content: space-between;

      .edit_btn {
        width: 210.53rpx;
      }
    }
  }
</style>