【Snippet】uniapp小程序，share-bbs代码片段

2025-01-05
程序人生
2516

一，uview2.0 的官网 API 之 Upload 上传

https://www.uviewui.com/components/upload.html

1,js日期格式化

js：
billTime:new Date(new Date()).format("yyyy-MM-dd hh:mm"),
	
	this.eOrder.billTime = new Date(this.billTime).format("yyyy-MM-dd hh:mm");

element-ui


      <el-table-column label="销售时间" align="center" prop="billTime" width="140">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.billTime,'{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
	  
	  错误！！！
      <el-table-column label="销售时间" align="center" prop="billTime" width="120">
        <template slot-scope="scope">
          <span>{{ new Date(scope.row.billTime).format("yyyy-MM-dd hh:mm") }}</span>
        </template>
      </el-table-column>

1,u-search 的三方插件，next-search-select-搜索框组件全端可用

https://ext.dcloud.net.cn/plugin?id=12753

2，cc-numbox自定义商品购物车数字输入框 带加减按钮的数字输入框组件

https://ext.dcloud.net.cn/plugin?id=13163

3，省市区地址选择组件，静态数据，支持回显。

https://ext.dcloud.net.cn/plugin?id=9214

二，uniappd 的官网 API 之 uni.showToast(OBJECT)

https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast

6，日期控件，日期的回显：


        <u-form-item label="创建日期" prop="addTime" borderBottom label-width="100px" >
          <u-row justify="space-between" gutter="10">
            <u-col span="6">
              <text u-view-format="date">{{eCustomer.addTime}}</text>
            </u-col>
            <u-col span="6">
              <u-datetime-picker
                  ref="datetimePicker"
                  :show="show_addTime"
                  :maxDate="maxDate"
                  v-model="initDate"
                  mode="date"
                  @confirm="chooseAllTime($event,'addTime')"
                  @cancel="show_addTime = false"
                  @close="show_addTime = false"
              ></u-datetime-picker>
              <u-button @click="show_addTime = true">选择日期</u-button>
            </u-col>
          </u-row>
        </u-form-item>
		
    data() {
		return {
        	maxDate:Number(new Date("2100-01-01")),
        	initDate:Number(new Date()),
			eCustomer:{
addTime:new Date(new Date()).format("yyyy-MM-dd"),
			}
		}
	}
	
	
      chooseAllTime(e,colName){
        //this.show = false
        console.log("--v--",e.value,"--mode--",e.mode,"---colName=",colName)
        console.log("--yyyyy--",new Date(e.value).format("yyyy-MM-dd"))
        if(colName=="addTime"){
          this.eCustomer.addTime=new Date(e.value).format("yyyy-MM-dd");
          this.show_addTime = false;
          console.log("--2222--",this.eCustomer.addTime)
        }else if(colName=="dBusinessSDate"){
          this.eCustomer.dBusinessSDate=new Date(e.value).format("yyyy-MM-dd");
          this.show_dBusinessSDate = false;
          console.log("--2222--",this.eCustomer.dBusinessSDate)
        } 
        console.log("--zzzzz--",this.eCustomer)
        return new Date(e.value).format("yyyy-MM-dd");
      },

4，日期控件，最大日期，初始日期

属性 v-model="dateValue" :maxDate="maxDate" :minDate="todayData" 初始赋值 dateValue: Number(new Date()), maxDate： Number(new Date("2100-01-01")) https://blog.csdn.net/qq_43201350/article/details/135517046

<u-datetime-picker
  :show="dateShow"
  v-model="dateValue"
  mode="date"
  :formatter="formatter"
  :maxDate="maxDate"
  :minDate="todayData"
  @confirm="dateConfirm"
  @cancel="dateCancel"
></u-datetime-picker>
  
data() {
    return {
      dateShow: false,
       dateValue: Number(new Date()),
		maxDate： Number(new Date("2100-01-01"))
    }
  }

5，u-form-item 的 labelwidth

<uni-forms-item label="姓名" label-width="100px" ></uni-forms-item>

https://blog.csdn.net/weixin_60415789/article/details/130239224

6，uniapp 的 loading 组件

uni.showLoading({
	title: '单据数据加载中,请稍等',
});

uni.hideLoading();

7.对象数组下拉框，[{}],,,

//组件位置
        <u-form-item label="许可类型(时空必填)" prop="conType" borderBottom label-width="100px" >
          <view class="flex justify-center items-center text-30 w-100" @click="changeConType">
            {{eCustomer.conTypeStr}}，{{eCustomer.conType}}
            <view class="iconfont iconxiala2"></view>
          </view>
        </u-form-item>

//弹出 modal 窗
    <!-- 许可类型，，，底部弹出操作菜单 -->
    <u-action-sheet :description="conTypeDesc" round="20" :actions="conTypeList" :show="conTypeShow"
      :safeAreaInsetBottom="true" cancelText="取消" @select="selectConType" @close="conTypeShow = false">
    </u-action-sheet>
	
//定义
	data() {
		return {
			
        conTypeDesc: '请选择发票类型',
        conTypeList: [
          { name: '商品' ,value:1 }
          ,{ name: '商品类别' ,value:2 }
        ],
        conTypeShow: false,
		}
	}

//js 函数
//初始化
            if(that.eCustomer.conType==1)
              that.eCustomer.conTypeStr="商品"
            else
              that.eCustomer.conTypeStr="商品类别"
			  
      // 选择许可类型
      changeConType() {
        this.conTypeShow = true
      },
      // 许可类型
      selectConType(e) {
        this.eCustomer.conTypeStr = e.name
        this.eCustomer.conType = e.value
        this.conTypeShow = false
      },

8.值数组下拉框,[int,string],,,

//组件位置<u-picker>
        <u-form-item label="客户类别(时空必填)" prop="clientType" borderBottom label-width="100px" >
          <u-row justify="space-between" gutter="10">
            <u-col span="6">
              {{eCustomer.clientType}}
            </u-col>
            <u-col span="6">
              <view>
                <u-picker :show="clientTypeShow" :columns="clientTypeArr" @confirm="clientTypeConfirm" @cancel="clientTypeCancel"></u-picker>
                <u-button @click="clientTypeShow = true" customStyle="background-color: skyblue;">选择</u-button>
              </view>
            </u-col>
          </u-row>
        </u-form-item>

//js
        clientTypeShow: false,
        clientTypeArr: [
          ['批发','诊所','医疗','零售','生产','连锁','医院', '盈利性医疗机构','非营利医疗机构','医疗机构']
        ],
		
			  
      clientTypeConfirm(e) {
        console.log('confirm', e)
        this.clientTypeShow = false
        this.eCustomer.clientType=e.value[0];
      },
      clientTypeCancel(e) {
        console.log('confirm', e)
        this.clientTypeShow = false
      },

9.省市县级联下拉框

//xml 组件位置
        <u-form-item label="区县" prop="initEArea" borderBottom label-width="100px" >
          <da-baie-x-comp-select-address
              @selectAddress="selectAddress"
              :value="initEArea"
          />
        </u-form-item>
        <u-form-item label="选中省市县编号" prop="initEArea" borderBottom label-width="100px" >
          {{eCustomer.provinceCode}},{{eCustomer.cityCode}},{{eCustomer.districtCode}}
        </u-form-item>
		
	//加载组件
import DaBaieXCompSelectAddress
  from "@/uni_modules/DaBaieX-comp-select-address/components/DaBaieX-comp-select-address/DaBaieXCompSelectAddress";
  
    components: {DaBaieXCompSelectAddress},
	//字段数据
	data() {
			return {
        initEArea:['江苏省', '南京市', '玄武区'],
		}
	}
		
		//初始化回显
	that.initEArea = [that.eCustomer.province,that.eCustomer.city,that.eCustomer.district];

      // 选中地市后的，回调，赋值省市县，赋值 code
      selectAddress(value) {
        const [province, city, district] = value;
        console.log('省份', province);
        console.log('城市', city);
        console.log('区域', district);
        this.eCustomer.province=province;
        this.eCustomer.city=city;
        this.eCustomer.district=district;
        let that = this;
        erpApi.findDistrictCode({province,city,district}).then(response => {
          console.log(response);
          if(response.code==200){
            let json =response.data;
            that.eCustomer.provinceCode=json.provinceCode;
            that.eCustomer.cityCode=json.cityCode;
            that.eCustomer.districtCode=json.districtCode;
          }
        });
      },

9.【uniapp/uview1.x】u-collapse 高度随内容自适应

1，在 u-collapse 里配置 ref="ccc_ref"
2, js代码：that.$refs.ccc_ref.init();
参考：
https://blog.csdn.net/weixin_45682058/article/details/141472436

            console.log("---重新加载面板，open111=====",that.$refs.ccc_ref );
            //https://blog.csdn.net/weixin_45682058/article/details/141472436
            that.$refs.ccc_ref.init();
            console.log("---重新加载面板，open222=====",that.$refs.ccc_ref );
end