web-base-h5/components/selSpaceGoods.vue

<template>
  <div>
    <u-popup class="notice"
             :show="showSpace"
             width="70%"
             @close="handleClose"
             round="10"
             mode="center">
      <view class="disFlex">
        <div class="flex">
          <picker @change="bindPickerChange1"
                  :value="shengIndex"
                  :range="shengList"
                  range-key="name">
            <view v-if="shengList.length>0&&shengList[shengIndex]!=undefined&&shengList[shengIndex].name"
                  class="kuang">
              <view> {{shengList[shengIndex].name | suo}}</view>
              <u-icon name="arrow-down"
                      color="#ccc"
                      size="14"></u-icon>
            </view>
            <view v-else
                  class="kuang">
              <view>省</view>
              <u-icon name="arrow-down"
                      color="#ccc"
                      size="14"></u-icon>
            </view>
          </picker>
        </div>
        <div class="flex">
          <picker @change="bindPickerChange2"
                  :value="shiIndex"
                  :range="shiList"
                  range-key="name">
            <view v-if="shiList.length>0&&shiList[shiIndex]!=undefined&&shiList[shiIndex].name"
                  class="kuang">
              <view> {{shiList[shiIndex].name | suo}}</view>
              <u-icon name="arrow-down"
                      color="#ccc"
                      size="14"></u-icon>
            </view>
            <view v-else
                  class="kuang">
              <view>市</view>
              <u-icon name="arrow-down"
                      color="#ccc"
                      size="14"></u-icon>
            </view>
          </picker>
        </div>
        <div class="flex">
          <picker @change="bindPickerChange3"
                  :value="quIndex"
                  :range="quList"
                  range-key="name">
            <view v-if="quList.length>0&&quList[quIndex]!=undefined&&quList[quIndex].name"
                  class="kuang">
              <view> {{quList[quIndex].name | suo}}</view>
              <u-icon name="arrow-down"
                      color="#ccc"
                      size="14"></u-icon>
            </view>
            <view v-else
                  class="kuang">
              <view>区</view>
              <u-icon name="arrow-down"
                      color="#ccc"
                      size="14"></u-icon>
            </view>
          </picker>
        </div>
      </view>
      <u-list @scrolltolower="setDizhi">
        <view class="disFlex1">
          <view></view>
          <view class="tit1">店铺名称</view>
          <view class="tit1">店铺编号</view>
          <view class="tit1">店铺地址</view>
        </view>
        <u-radio-group v-model="pkMakerSpace"
                       placement="column">
          <u-list-item v-show="tableData.length>0"
                       v-for="item in tableData">
            <view class="disFlex hang">
              <u-radio :name="item.pkId"
                       class="width1"
                       activeColor="red"></u-radio>
              <view class="disFlex flex width2">
                <view>{{ item.storeName }}</view>
                <view>{{ item.storeCode }}</view>
                <view>{{ item.storeAddress }}</view>
              </view>
            </view>
          </u-list-item>
          <view class="kong"
                v-show="tableData.length==0">暂无数据</view>
        </u-radio-group>
      </u-list>
      <!-- <span slot="footer"
            class="dialog-footer">
        <el-button @click="showSpace = false">取 消</el-button>
        <el-button type="primary"
                   @click="addCar"
                   class="delBtn">确 定</el-button>
      </span> -->
      <view class="shareImg">
        <view class="btn1"
              @click="handleClose">取消</view>
        <view class="btn2"
              @click="addCar">确定</view>
      </view>
    </u-popup>
    <!-- <v-address ref="address"
               :defaultCode="defaultCode"
               @addressData="addressData"></v-address> -->
  </div>
</template>

<script>
import * as api from '@/config/regiest.js'
import * as goods from '@/config/goods.js'
import address from '@/components/address.vue'

export default {
  components: {
    'v-address': address,
  },
  filters:{
        //处理函数
        suo(value){
          let str
          if(value.length > 4){
            str=value.substring(0,4)
            return str + '...'
          }else{
            return value
          }
            
        }
    },
  data() {
    return {
      defaultCode: [],
      address: '',
      addressForm: {},
      showSpace: false,
      dizhi: [],
      regionParams: {
        label: 'name',
        value: 'id',
        children: 'children',
        expandTrigger: 'hover',
      },
      tableData: [],
      total: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      selSpace: [],
      carList: '',
      pkMakerSpace: '',
      shengList: [],
      shiList: [],
      quList: [],
      shengIndex: '',
      shiIndex: '',
      quIndex: '',
    }
  },
  methods: {
    bindPickerChange1: function (e) {
      this.shengIndex = e.detail.value
      this.addressForm.licenseProvince = this.shengList[e.detail.value].pkId
      this.getShi(this.shengList[e.detail.value].pkId)
      this.tableData = []
      this.queryParams.pageNum = 1
      this.setDizhi()
    },
    bindPickerChange2: function (e) {
      this.shiIndex = e.detail.value
      this.addressForm.licenseCity = this.shiList[e.detail.value].pkId
      this.getQu(this.shiList[e.detail.value].pkId)
      this.tableData = []
      this.queryParams.pageNum = 1
      this.setDizhi()
    },
    bindPickerChange3: function (e) {
      this.quIndex = e.detail.value
      this.addressForm.licenseCounty =this.quList[this.quIndex].pkId
      this.tableData = []
      this.queryParams.pageNum = 1
      this.setDizhi()
      // this.getArea(this.shengList[this.shengIndex].pkId)
    },
    addressData(diqu, obj) {
      this.address = diqu
      this.addressForm.licenseProvince = obj.province
      this.addressForm.licenseCity = obj.city
      this.addressForm.licenseCounty = obj.county
      this.$forceUpdate()
      this.setDizhi()
    },
    getData(carList) {
      this.carList = carList
      this.showSpace = true
      this.tableData = []
      this.queryParams.pageNum = 1
      this.address = ''
      this.getSheng()
      this.setDizhi()
    },
    getSheng() {
      api
        .areaList({
          parent: 0,
        })
        .then((res) => {
          this.shengList = res.data
        })
    },
    getShi(id) {
      api
        .areaList({
          parent:id,
        })
        .then((res) => {
          this.shiList = res.data
        })
    },
    getQu(id) {
      api
        .areaList({
          parent: id,
        })
        .then((res) => {
          this.quList = res.data
        })
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    setDizhi() {
      if (this.tableData.length < this.total) {
        api
          .list_maker(
            Object.assign(
              {
                licenseProvince: this.addressForm.licenseProvince,
                licenseCity: this.addressForm.licenseCity||'',
                licenseCounty: this.addressForm.licenseCounty || '',
              },
              this.queryParams
            )
          )
          .then((res) => {
            this.total = res.total
            this.tableData = this.tableData.concat(res.rows)
            this.queryParams.pageNum++
          })
      } else {
        return false
      }

      // this.queryParams.pageNum++
    },
    handleSelectionChange(val) {
      this.selSpace = val
    },
    handleSelect(selection, val) {
      //只能选择一行，选择其他，清除上一行
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.table.toggleRowSelection(del_row, false) //设置这一行取消选中
      }
    },

    handleClose() {
      this.showSpace = false
    },
    addCar() {
      if (!this.pkMakerSpace) {
        uni.showToast({
          title: '请选择店铺',
          icon: 'none',
          mask: true,
        })
        return
      } else {
        this.carList.pkMakerSpace = this.pkMakerSpace
        goods.addShopping(this.carList).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '购物车添加成功',
              icon: 'success',
              mask: true,
            })
            this.showSpace = false
            this.$emit('getCar')
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-cascader {
  width: 100%;
}

::v-deep .pagination-container {
  padding: 10px;
}

::v-deep .order .el-table__header-wrapper .el-checkbox {
  display: none;
}

// 删除按钮
.delBtn {
  background: #005BAC;
  color: #fff;
  border-color: #005BAC;
}

.delBtn:hover {
  background: #005BAC;
  color: #fff;
  border-color: #005BAC;
}

.view-class {
  border: 1rpx solid #eee;
  // margin: 0 30rpx;
  position: relative;
}

.drop {
  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 10rpx;
    top: 20rpx;
  }
}

.notice ::v-deep .u-popup__content {
  height: 900rpx;
  width: 610rpx;
  padding: 80rpx 40rpx 200rpx 40rpx;
  overflow-y: auto;
}
.disFlex {
  display: flex;
  font-size: 26rpx;
}
.disFlex1 {
  display: flex;
  font-size: 26rpx;
  background: #eeeeee;
  padding: 20rpx 0;
  margin-top: 10rpx;
  view {
    width: 6%;
  }
  .tit1 {
    width: 31%;
    text-align: center;
  }
}
// .flex {
//   flex: 1;
// }
.width1 {
  width: 6%;
}
.width2 {
  flex: 1;
  view {
    width: 50%;
    text-align: center;
  }
}
.hang {
  padding: 10rpx 0;
}
.shareImg {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 17%;
  cursor: pointer;
  text-align: center;
  display: flex;
  // justify-content: space-between;
  justify-content: center;
  font-size: 28rpx;
  .btn1 {
    padding: 10rpx 20rpx;
    border-radius: 10px;
    background: #eee;
    margin-right: 80rpx;
  }
  .btn2 {
    padding: 10rpx 20rpx;
    border-radius: 10px;
    background: #ed1d25;
    color: #fff;
  }
}
.kong {
  margin-top: 200rpx;
  text-align: center;
  color: #aaa;
}
.disFlex {
  display: flex;
  align-items: center;
  .flex {
    flex: 1;
    margin-right: 20rpx;
  }
}
.kuang {
  border: 2rpx solid #ccc;
  padding: 10rpx 20rpx;
  font-size: 12px;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10rpx;
}
</style>