123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <template>
- <u-popup :show="isShow" class="brand-picker" @close="isShow=false" mode="bottom">
- <view class="brand-header flex justify_between align_center">
- <text class="brand-picker-btn" @click="onClean">清空</text>
- <text>产品品牌</text>
- <text class="brand-picker-btn color-blue" @click="isShow=false">
- <u-icon name="close"></u-icon>
- </text>
- </view>
- <view class="search-box">
- <u-search
- placeholder="请输入品牌名称搜索"
- v-model="queryWord"
- :show-action="isGobleSearch||queryWord!=''"
- @focus="isGobleSearch=true"
- @blur="isGobleSearch=false"
- @custom="searchBrand"
- @search="searchBrand"
- @clear="clearSearch"
- :action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': '#00aaff', 'border-radius': '6upx', 'padding': '12upx 0'}">
- </u-search>
- </view>
- <scroll-view class="picker-content" scroll-y>
- <view class="picker-main">
- <view class="picker-main-item" v-for="(item, index) in listData" :key="item.brandSn" @click="chooseItem(index)">
- <view class="item-name">{{item.brandName}}</view>
- <u-icon v-show="item.brandSn==brandSn" class="item-icon" name="checkbox-mark" color="#00aaff" size="28"></u-icon>
- </view>
- <view v-if="listData && listData.length == 0 && status!='loading'">
- <u-empty text="没有找到品牌" mode="list" :img-width="150" :margin-top="-60"></u-empty>
- </view>
- <view style="padding-bottom: 20upx;">
- <u-loadmore v-if="totalNum>listData.length || status=='loading'" :status="status" />
- </view>
- </view>
- </scroll-view>
- </u-popup>
- </template>
- <script>
- import { dealerProductBrandQuery } from '@/config/api.js'
- export default {
- props: {
- openModal: { // 弹框显示状态
- type: Boolean,
- default: false
- },
- itemSn: {
- type: String,
- default: ''
- }
- },
- data() {
- return {
- isShow: this.openModal, // 是否打开弹框
- listData: [],
- queryWord: '',
- isGobleSearch: false,
- brandSn: this.itemSn || null,
- status: 'loadmore',
- totalNum: 0
- }
- },
- mounted() {
- this.clearSearch()
- },
- methods: {
- // 搜索品牌
- searchBrand(){
- this.brandSn = null
- this.getBrandList()
- },
- clearSearch(){
- this.queryWord = ''
- this.listData = []
- this.getBrandList()
- },
- getBrandList(){
- this.status = "loading"
- dealerProductBrandQuery({ brandName: this.queryWord }).then(res => {
- if(res.status == 200 && res.data){
- this.listData = res.data
- this.totalNum = res.data.count || 0
- }else{
- this.listData = []
- this.totalNum = 0
- }
- this.status = "loadmore"
- })
- },
- // 选择
- chooseItem(ind){
- this.brandSn = this.listData[ind].brandSn
- this.$emit('choose', this.listData[ind])
- this.isShow = false
- },
- // 清空
- onClean(){
- this.queryWord = ''
- this.brandSn = null
- this.$emit('clean')
- this.isShow = false
- this.getBrandList()
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- console.log(newValue)
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (newValue, oldValue) {
- if (!newValue) {
- this.$emit('close')
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .brand-picker{
- .brand-header{
- padding: 10upx 30upx;
- position: relative;
- .brand-picker-btn{
- color: rgb(96, 98, 102);
- margin: 10upx;
- }
- .color-blue{
- display: inline-block;
- padding: 10upx 20upx;
- margin: 10upx 0;
- }
- }
- .brand-header:after{
- content: "";
- position: absolute;
- border-bottom: 1px solid #eaeef1;
- -webkit-transform: scaleY(.5);
- transform: scaleY(.5);
- bottom: 0;
- right: 0;
- left: 0;
- }
- .search-box{
- padding: 10upx 20upx;
- }
- .picker-content{
- height: 50vh;
- padding: 6upx 0 20upx;
- position: relative;
- .picker-main{
- width: 100%;
- .picker-main-item{
- position: relative;
- padding: 0 30upx;
- .item-name{
- padding: 14upx 0;
- text-align: center;
- }
- .item-icon{
- position: absolute;
- right: 100upx;
- top: 19upx;
- }
- &:active{
- background: #f8f8f8;
- }
- }
- }
- }
- }
- </style>
|