当前位置： 首页 > article >正文

低代码可视化-uniapp进销存销售表单-代码生成器

article 2024/12/25 4:36:40

将低代码理念与Uni-App框架结合，应用到进销存销售表单的开发中，可以显著提升开发效率和代码质量。以下是对低代码可视化-UniApp进销存销售表单-代码生成器的详细分析：

客户信息

选择客户信息，选择客户信息后显示在表单开头信息。

开单人、开单日期输入组件

开单人为文本输入组件、开单日期为日期选择组件。一进来初始化数据。我们在API获取产品数据加载前执行，判断是否是修改，如果不是修改，初始化开单人为登录用户显示名、开单日期为当前日期。

如果为用户编辑信息，在加载完成后进行数据处理，把数据库返回的字符串json转为JSON结构类型的数据，构建客户信息表显示在界面上。

这个API生成的代码如下。

// 订单数据 API请求方法
			async dataApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/sell/orders/get';
				let http_data = {
					pageNum: this.dataNum,
					pageSize: 10,
					id: param.id || this.globalOption.id || '15'
				};
				let http_header = {};

				//这个判断意思是表示新增而不是编辑，不用请求API
				if (!this.globalOption.id) {
					this.$nextTick(() => {
						this.form.kaidan = this.userInfo.nickname;
						this.form.kaidanDate = this.$tools.getCurrentDate();
					});
					return;
				}

				let data = await this.$http.post(http_url, http_data, http_header, 'json');

				this.data = data;
				//把数据库返回来的数据转为JSON
				data.data.costs = JSON.parse(data.data.costs);
				data.data.products = JSON.parse(data.data.products);
				//重新构造客户表单显示数据
				let customer = {
					title: data.data.customerTitle,
					address: data.data.customerAddress,
					phone: data.data.customerPhone,
					username: data.data.customerUsername
				};
				data.data.kaidanDate = this.$tools.formatDateTime(data.data.kaidanDate, 'YYYY-mm-dd');

				let productsItemDatas = [];
				data.data.products.forEach((item) => {
					productsItemDatas.push(JSON.parse(JSON.stringify(this.productsItemData)));
				});
				this.formData.productsItemDatas = productsItemDatas;

				let costsItemDatas = [];
				data.data.costs.forEach((item) => {
					costsItemDatas.push(JSON.parse(JSON.stringify(this.costsItemData)));
				});
				this.formData.costsItemDatas = costsItemDatas;

				this.userInfo.customer = customer;
				this.form = data.data;
			},

商品清单

商品清单信息来源于库存商品，快速选择商品信息。采用点击商品清单弹出选择框。弹窗组件里使用选项卡来显示产品分类、使用flex布局来显示产品信息。

产品数量不为0时增加进选择产品信息里 自定义一个方法来加入数量不为0的产品。

自动计算商品总价

自定义一个方法来显示商品总价，页面模板调用此方法显示总价。

其他费用

其他费用循环子表单输入，可以随意收入费用项、费用金额。同样增加一个自定义方法来显示其他费用总价

这个页面设计器主要使用了表单组件、循环子表单、弹窗组件、选项卡组件、flex组件、文本输入、日期输入等组件来实现。

整个页面代码生成器

结合自定义API及方法的实现，整个页面代码直接生成出来。

<template>
	<view class="container container333211">
		<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
				<view class="flex flex-wrap diygw-col-0 justify-between items-center flex28-clz" @tap="navigateTo" data-type="page" data-url="/pages/customer" data-isselect="1">
					<text v-if="!userInfo.customer" class="diygw-col-0 text5-clz"> 请选择客户 </text>
					<view v-if="userInfo.customer" class="flex flex-wrap diygw-col-0 flex-direction-column justify-between items-center flex6-clz">
						<view class="flex flex-wrap diygw-col-24 items-end">
							<text class="diygw-col-0 title-clz">
								{{ userInfo.customer.title }}
							</text>
						</view>
						<view class="flex flex-wrap diygw-col-24 items-end flex22-clz">
							<text class="diygw-text-line1 diygw-col-0 address-clz">
								{{ userInfo.customer.username }}
							</text>
							<text class="diygw-col-0 text22-clz">
								{{ userInfo.customer.phone }}
							</text>
						</view>
						<text class="diygw-text-line1 diygw-col-24 text20-clz">
							{{ userInfo.customer.address }}
						</text>
					</view>
					<text class="flex icon4 diygw-col-0 icon4-clz diy-icon-right"></text>
				</view>
				<u-form-item labelAlign="justify" class="diygw-col-24" :required="true" label="开单人" prop="kaidan">
					<u-input inputAlign="right" :focus="formData.kaidanFocus" placeholder="请输入开单人" v-model="form.kaidan"></u-input>
				</u-form-item>
				<u-form-item labelAlign="justify" class="diygw-col-24" label="开单日期" :required="true" prop="kaidanDate">
					<u-input inputAlign="right" @click="formData.showKaidanDate = true" class="" placeholder="请选择" v-model="form.kaidanDate" type="select"></u-input>
					<u-calendar maxDate="2050-12-31" v-model="formData.showKaidanDate" mode="date" @change="changeFormKaidanDate"></u-calendar>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
				<view class="flex flex-wrap diygw-col-24 justify-between items-center flex24-clz">
					<text class="diygw-col-0 text-clz"> 商品清单 </text>
					<view class="flex flex-wrap diygw-col-0 items-center green flex44-clz" @tap="navigateTo" data-type="initProductNumberFunction" data-show-modal="1">
						<text class="flex icon1 diygw-col-0 diy-icon-add"></text>
						<text class="diygw-col-0"> 商品清单 </text>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex2-clz">
					<text class="diygw-col-0 text11-clz"> # </text>
					<text class="diygw-col-0 text4-clz"> 名称 </text>
					<text class="diygw-col-0 text3-clz"> 单位 </text>
					<text class="diygw-col-0 text2-clz"> 数量 </text>
					<text class="diygw-col-0 text1-clz"> 单价 </text>
					<text class="diygw-col-0 text7-clz"> 合计 </text>
				</view>
				<view class="flex flex-wrap diygw-col-24">
					<view class="diygw-col-24" v-for="(productsItem, productsIndex) in form.products" :key="productsIndex">
						<u-form class="diygw-col-24" :model="form.products[productsIndex]" :errorType="['message', 'toast']" ref="productsRef" :rules="productsItemRules">
							<view class="flex flex-wrap diygw-col-24 items-stretch">
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex4-clz">
									<text @tap="delProductsItem" :data-index="productsIndex" class="flex icon diygw-col-0 diy-icon-roundclose"></text>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex5-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="title">
										<u-input :focus="formData.productsItemDatas[productsIndex].titleFocus" :disabled="productsItemData.titleDisabled" placeholder="" v-model="productsItem.title"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex11-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="unit">
										<u-input :focus="formData.productsItemDatas[productsIndex].unitFocus" :disabled="productsItemData.unitDisabled" placeholder="" v-model="productsItem.unit"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex10-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="number">
										<u-input inputAlign="right" :focus="formData.productsItemDatas[productsIndex].numberFocus" :disabled="productsItemData.numberDisabled" placeholder="" v-model="productsItem.number" type="digit"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex9-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="price">
										<u-input inputAlign="right" :focus="formData.productsItemDatas[productsIndex].priceFocus" :disabled="productsItemData.priceDisabled" placeholder="" v-model="productsItem.price" type="digit"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center flex7-clz">
									<text class="diygw-col-0">
										{{ calcTotal(productsItem) }}
									</text>
								</view>
							</view>
						</u-form>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-end items-center flex12-clz">
					<text class="diygw-col-0 text9-clz"> 产品合计 </text>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column">
						<text class="diygw-col-0 text14-clz">
							{{ productsTotalFunction() }}
						</text>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex14-clz">
				<view class="flex flex-wrap diygw-col-24 justify-between items-center flex45-clz">
					<text class="diygw-col-0 text35-clz"> 其他费用 </text>
					<view class="flex flex-wrap diygw-col-0 items-center green flex46-clz" @tap="addCostsItem">
						<text class="flex icon3 diygw-col-0 diy-icon-add"></text>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex15-clz">
					<text class="diygw-col-0 text8-clz"> # </text>
					<text class="diygw-col-0 text10-clz"> 费用项 </text>
					<text class="diygw-col-0 text12-clz"> 费用金额 </text>
				</view>
				<view class="flex flex-wrap diygw-col-24">
					<view class="diygw-col-24" v-for="(costsItem, costsIndex) in form.costs" :key="costsIndex">
						<u-form class="diygw-col-24" :model="form.costs[costsIndex]" :errorType="['message', 'toast']" ref="costsRef" :rules="costsItemRules">
							<view class="flex flex-wrap diygw-col-24 items-stretch">
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex17-clz">
									<text @tap="delCostsItem" :data-index="costsIndex" class="flex icon2 diygw-col-0 diy-icon-roundclose"></text>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center flex18-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="title">
										<u-input :focus="formData.costsItemDatas[costsIndex].titleFocus" placeholder="" v-model="costsItem.title"></u-input>
									</u-form-item>
								</view>
								<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center flex19-clz">
									<u-form-item :borderBottom="false" class="diygw-col-24 diygw-form-item-small" labelPosition="top" prop="price">
										<u-input inputAlign="right" :focus="formData.costsItemDatas[costsIndex].priceFocus" placeholder="" v-model="costsItem.price"></u-input>
									</u-form-item>
								</view>
							</view>
						</u-form>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-end items-center flex23-clz">
					<text class="diygw-col-0 text15-clz"> 其他费用合计 </text>
					<text class="diygw-col-0 text18-clz">
						{{ costsTotalFunction() }}
					</text>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex20-clz">
				<u-form-item class="diygw-col-24" label="整单优惠" prop="youhui">
					<u-input inputAlign="right" :focus="formData.youhuiFocus" placeholder="填定整单优惠金额" v-model="form.youhui" type="number"></u-input>
				</u-form-item>
				<view class="flex flex-wrap diygw-col-24 justify-end items-center flex21-clz">
					<text class="diygw-col-0 text16-clz"> 费用合计 </text>
					<text class="diygw-col-0 text19-clz">
						{{ totalFunction() }}
					</text>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex26-clz">
				<u-form-item labelWidth="auto" class="diygw-col-24" label="订单备注" labelPosition="top" prop="remark">
					<u-input maxlength="200" height="60px" class="" placeholder="订单备注信息" v-model="form.remark" type="textarea"></u-input>
				</u-form-item>
			</view>
		</u-form>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom flex27-clz">
			<text @click="submitForm" class="diygw-col-24 green text17-clz"> 提交订单 </text>
		</view>
		<view @touchmove.stop.prevent="" v-if="modal" class="diygw-modal bottom-modal" :class="modal" style="z-index: 1000000">
			<view class="diygw-dialog diygw-dialog-modal">
				<view>
					<view class="flex diygw-dialog-content">
						<view class="flex flex-wrap diygw-col-24 justify-between items-center flex29-clz">
							<text class="diygw-col-0 text21-clz"> 选择商品 </text>
							<text @tap="navigateTo" data-type="closemodal" data-id="modal" class="flex icon8 diygw-col-0 diy-icon-close"></text>
						</view>
						<view class="flex flex-wrap diygw-col-24 justify-between items-center flex30-clz">
							<u-form-item :borderBottom="false" class="diygw-col-0 input-clz diygw-form-border diygw-uform-item" labelPosition="top" prop="input">
								<view class="flex flex-sub padding-top-xs padding-bottom-xs align-center solid input_clz">
									<u-input :focus="inputFocus" placeholder="请输入商品名称查询" v-model="input"></u-input>
									<text class="diy-icon-scan" style="color: #676767; font-size: 32rpx"></text>
								</view>
							</u-form-item>
							<view class="flex flex-wrap diygw-col-0 items-center green flex41-clz" @tap="navigateTo" data-type="page" data-url="/pages/basic/product">
								<text class="flex icon10 diygw-col-0 diy-icon-add"></text>
								<text class="diygw-col-0"> 新增商品 </text>
							</view>
						</view>
						<view class="flex tabs diygw-col-24 flex-direction-row tabs-clz">
							<view class="diygw-tabs text-center tabs-title">
								<view class="diygw-tab-item tabs-item-title" :class="index == tabsIndex ? 'cur   bg-green   ' : ''" v-for="(item, index) in cates.rows" :key="index" @click="changeTabs" :data-index="index">
									{{ item.title }}
								</view>
							</view>
							<view class="flex1">
								<view class="tabs-content flex-sub">
									<scroll-view scroll-y class="flex flex-wrap diygw-col-24 flex-direction-column flex40-clz">
										<view class="flex scroll-y flex-nowrap">
											<view v-for="(item, index) in products.rows" :key="index" class="flex flex-wrap diygw-col-24 items-stretch flex32-clz">
												<view v-if="item.showimg" class="flex flex-wrap diygw-col-0 flex-direction-column flex33-clz">
													<image :src="item.showimg" class="image1-size diygw-image diygw-col-0 image1-clz" mode="widthFix"></image>
												</view>
												<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center flex34-clz">
													<view class="flex flex-wrap diygw-col-24 items-center flex35-clz">
														<text class="diygw-col-0">
															{{ item.title }}
														</text>
													</view>
													<view class="flex flex-wrap diygw-col-24 justify-between items-center flex36-clz">
														<view class="flex flex-wrap diygw-col-0">
															<text class="diygw-col-0"> 单位： </text>
															<text class="diygw-col-0">
																{{ item.unit }}
															</text>
														</view>
														<view class="flex diygw-col-0 justify-between items-baseline flex-nowrap flex38-clz">
															<text class="diygw-col-0"> ￥ </text>
															<text class="diygw-col-0 text28-clz">
																{{ item.price }}
															</text>
														</view>
													</view>
													<view class="flex diygw-col-24 justify-between items-center flex-nowrap flex37-clz">
														<view class="flex flex-wrap diygw-col-0 items-baseline flex39-clz">
															<text class="diygw-col-0"> 库存： </text>
															<text class="diygw-col-0 text31-clz">
																{{ item.stockNumber }}
															</text>
														</view>
														<text v-if="item.number == 0" @tap="addItemNumber(item)" class="flex icon6 diygw-col-0 green icon6-clz diy-icon-add"></text>
														<u-form-item :borderBottom="false" :isHideMin="true" v-if="item.number > 0" class="diygw-col-0 diygw-form-item-small" labelPosition="top" prop="number">
															<view class="flex diygw-col-24">
																<u-number-box :isBtnRadius="true" :inputHeight="40" inpubBgColor="#ffffff" inputColor="#000000" @change="changeItemNumber($event, index, item)" name="number" v-model="item.number" bgColor="#07c160" color="#ffffff" :min="0" isHideMin :max="item.stockNumber" :step="1" />
															</view>
														</u-form-item>
													</view>
												</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
						<view class="flex flex-wrap diygw-col-24 justify-between items-center flex42-clz">
							<view class="flex flex-wrap diygw-col-0 items-baseline">
								<text class="diygw-col-0"> 产品： </text>
								<text class="diygw-col-0 text32-clz">
									{{ form.products.length }}
								</text>
								<text class="diygw-col-0"> 金额： </text>
								<text class="diygw-col-0 text37-clz">
									{{ globalData.totalPrice }}
								</text>
							</view>
							<text @tap="navigateTo" data-type="closemodal" data-id="modal" class="diygw-col-0 green text38-clz"> 确定 </text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { totalNumber: 0, totalPrice: 0, selectProducts: [] },
				dataNum: 1,
				data: {
					code: 200,
					msg: 'success',
					data: {
						id: 15,
						products: '[{"title":"123","unit":"123","total":24,"number":"12","price":"2"}]',
						costs: '[{"title":"123","price":"2"}]',
						youhui: '2.000',
						total: '24.000',
						remark: '',
						status: null,
						kaidanDate: '2024-12-17 00:00:00',
						customerTitle: '客户名',
						customerUsername: '邓生',
						customerPhone: '15913132246',
						customerAddress: '联系地址联系地址',
						productsTotal: '24.000',
						costsTotal: '2.000',
						createTime: '2024-12-17 16:05:44',
						updateTime: '2024-12-17 16:05:44',
						deleteTime: null
					}
				},
				cates: {
					rows: [
						{
							id: 0,
							title: '',
							remark: '',
							sortnum: 0,
							createTime: '',
							updateTime: '',
							deleteTime: null
						}
					],
					total: 0,
					code: 0,
					msg: ''
				},
				products: {
					rows: [
						{
							id: 0,
							title: '',
							remark: '',
							img: '',
							unit: '',
							price: null,
							number: '',
							sortnum: null,
							cateId: null,
							userId: null,
							createTime: '',
							updateTime: '',
							deleteTime: null
						}
					],
					total: 0,
					code: 0,
					msg: ''
				},
				modal: '',
				inputFocus: false,
				input: '',
				tabsTop: 0,
				tabsHeight: 0,
				tabsItemHeight: 0,
				tabsIndex: 0,
				costsItemRules: {},
				item: {
					number: 0
				},
				formRules: {
					kaidan: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '开单人不能为空'
						}
					],
					kaidanDate: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '开单日期不能为空哟'
						}
					]
				},
				form: {
					kaidan: '',
					kaidanDate: '',
					products: [],
					costs: [],
					youhui: undefined,
					remark: ''
				},
				costsItemData: {
					titleFocus: false,
					priceFocus: false
				},
				costsItem: {
					title: '',
					price: ''
				},
				productsItem: {
					title: '',
					unit: '',
					number: undefined,
					price: undefined
				},
				productsItemData: {
					titleDisabled: true,
					titleFocus: false,
					unitDisabled: true,
					unitFocus: false,
					numberDisabled: true,
					numberFocus: false,
					priceDisabled: true,
					priceFocus: false
				},
				formData: {
					kaidanFocus: false,
					showKaidanDate: false,
					productsItemDatas: [],
					costsItemDatas: [],
					youhuiFocus: false
				},
				productsItemRules: {}
			};
		},
		onShow() {
			this.setCurrentPage(this);

			this.initShow();
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
		},
		methods: {
			async init() {
				await this.dataApi();
				await this.initResetform();
			},
			async initShow() {
				//强制重新刷新页面
				await this.catesApi({ refresh: 1 });
				//强制重新刷新页面
				await this.productsApi({ refresh: 1 });
			},
			// 订单数据 API请求方法
			async dataApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/sell/orders/get';
				let http_data = {
					pageNum: this.dataNum,
					pageSize: 10,
					id: param.id || this.globalOption.id || '15'
				};
				let http_header = {};

				//这个判断意思是表示新增而不是编辑，不用请求API
				if (!this.globalOption.id) {
					this.$nextTick(() => {
						this.form.kaidan = this.userInfo.nickname;
						this.form.kaidanDate = this.$tools.getCurrentDate();
					});
					return;
				}

				let data = await this.$http.post(http_url, http_data, http_header, 'json');

				this.data = data;
				//把数据库返回来的数据转为JSON
				data.data.costs = JSON.parse(data.data.costs);
				data.data.products = JSON.parse(data.data.products);
				//重新构造客户表单显示数据
				let customer = {
					title: data.data.customerTitle,
					address: data.data.customerAddress,
					phone: data.data.customerPhone,
					username: data.data.customerUsername
				};
				data.data.kaidanDate = this.$tools.formatDateTime(data.data.kaidanDate, 'YYYY-mm-dd');

				let productsItemDatas = [];
				data.data.products.forEach((item) => {
					productsItemDatas.push(JSON.parse(JSON.stringify(this.productsItemData)));
				});
				this.formData.productsItemDatas = productsItemDatas;

				let costsItemDatas = [];
				data.data.costs.forEach((item) => {
					costsItemDatas.push(JSON.parse(JSON.stringify(this.costsItemData)));
				});
				this.formData.costsItemDatas = costsItemDatas;

				this.userInfo.customer = customer;
				this.form = data.data;
			},
			// 所有分类 API请求方法
			async catesApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/sell/cate/all';
				let http_data = {};
				let http_header = {};

				let cates = await this.$http.post(http_url, http_data, http_header, 'json');

				cates.rows.unshift({ id: '', title: '全部' });

				this.cates = cates;
			},
			// 产品数据 API请求方法
			async productsApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/sell/product/list';
				let http_data = {
					pageSize: param.pageSize || '50',
					number_gt: param.number_gt || '0'
				};
				let http_header = {};

				if (this.tabsIndex != 0) {
					http_data.cateId = this.cates.rows[this.tabsIndex].id;
				}
				if (this.tabsIndex == this.globalData.tabsIndex) {
					return;
				}
				this.globalData.tabsIndex = this.tabsIndex;

				let products = await this.$http.post(http_url, http_data, http_header, 'json');

				products.rows.forEach((item) => {
					//初始化库存数量
					item.stockNumber = parseFloat(item.number);
					//设置显示图片
					item.img = item.img ? item.img.split(',') : [];
					item.showimg = item.img.length > 0 ? item.img[0] : '';
					item.number = 0;
				});

				this.products = products;
				await this.initProductNumberFunction({});
			},

			// 计算产品总金额 自定义方法
			productsTotalFunction(param) {
				let thiz = this;
				function calculateTotal(item) {
					let price = parseFloat(item.price) || 0;
					let number = parseFloat(item.number) || 0;
					return price * number;
				}
				this.form.productsTotal = this.form.products.reduce((sum, item) => sum + calculateTotal(item), 0);
				return this.form.productsTotal;
			},

			// 计算其他金额总价 自定义方法
			costsTotalFunction(param) {
				let thiz = this;
				function calculateTotal(item) {
					let price = parseFloat(item.price) || 0;
					return price;
				}
				this.form.costsTotal = this.form.costs.reduce((sum, item) => sum + calculateTotal(item), 0);
				return this.form.costsTotal;
			},

			// 总价 自定义方法
			totalFunction(param) {
				let thiz = this;
				let youhui = parseFloat(this.form.youhui) || 0;
				this.form.total = this.productsTotalFunction() + this.costsTotalFunction() - youhui;
				return this.form.total;
			},

			// 选择产品并计算 自定义方法
			async selectProductAntTotalFunction(param) {
				let thiz = this;
				let number = 0;
				let price = 0;
				let products = this.products.rows;
				products.forEach((childItem) => {
					number = childItem.number + number;
					price = childItem.number * childItem.price + price;
					//判断是否已加入产品库
					let index = this.form.products.findIndex((product) => {
						return product.id == childItem.id;
					});
					//如果选择的产品数据大于0新增或修改
					if (childItem.number > 0) {
						if (index >= 0) {
							this.form.products.splice(index, 1, JSON.parse(JSON.stringify(childItem)));
						} else {
							this.form.products.push(JSON.parse(JSON.stringify(childItem)));
							this.formData.productsItemDatas.push(JSON.parse(JSON.stringify(this.productsItemData)));
						}
					} else {
						//如果数据为0但产品库存在，当删除存在的产品库
						if (index >= 0) {
							this.form.products.splice(index, 1);
							this.formData.productsItemDatas.splice(index, 1);
						}
					}
				});

				this.globalData.totalPrice = price;
			},

			// 初始数据 自定义方法
			async initProductNumberFunction(param) {
				let thiz = this;
				let showModal = param && (param.showModal || param.showModal == 0) ? param.showModal : '0';
				this.products.rows.forEach((childItem) => {
					let find = this.form.products.find((product) => {
						return product.id == childItem.id;
					});
					if (find) {
						childItem.number = find.number;
					}
				});
				if (showModal != '0') {
					this.navigateTo({
						type: 'openmodal',
						id: 'modal'
					});
				}
			},
			changeFormKaidanDate(evt) {
				this.form.kaidanDate = evt.result;
			},
			//子表单验证
			initProductsValid() {
				this.$nextTick(() => {
					this.$refs['productsRef']?.forEach((subform) => {
						subform.setRules(this.productsItemRules);
					});
				});
			},
			//上移子表单
			upProductsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == 0) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是第一个'
					});
					return false;
				}
				this.form.products[index] = this.form.products.splice(index - 1, 1, this.form.products[index])[0];
				this.formData.productsItemDatas[index] = this.formData.productsItemDatas.splice(index - 1, 1, this.formData.productsItemDatas[index])[0];
				this.initProductsValid();
			},
			//下移子表单
			downProductsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == this.form.products.length - 1) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是最后一个'
					});
					return false;
				}
				this.form.products[index] = this.form.products.splice(index + 1, 1, this.form.products[index])[0];
				this.formData.productsItemDatas[index] = this.formData.productsItemDatas.splice(index + 1, 1, this.formData.productsItemDatas[index])[0];
				this.initProductsValid();
			},
			//删除子表单
			delProductsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				this.form.products.splice(index, 1);
				this.formData.productsItemDatas.splice(index, 1);
				this.initProductsValid();
			},
			//增加子表单
			addProductsItem() {
				this.form.products.push(JSON.parse(JSON.stringify(this.productsItem)));
				this.formData.productsItemDatas.push(JSON.parse(JSON.stringify(this.productsItemData)));
				this.initProductsValid();
			},
			//验证所有的子表单
			checkProductsValid() {
				let flag = true;
				this.$refs['productsRef']?.forEach((subform) => {
					subform.validate((valid) => {
						if (!valid) {
							flag = false;
							return false;
						}
					});
				});
				return flag;
			},
			calcTotal(item) {
				let price = parseFloat(item.price) || 0;
				let number = parseFloat(item.number) || 0;
				let total = price * number;
				item.total = total;
				return total;
			},
			//子表单验证
			initCostsValid() {
				this.$nextTick(() => {
					this.$refs['costsRef']?.forEach((subform) => {
						subform.setRules(this.costsItemRules);
					});
				});
			},
			//上移子表单
			upCostsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == 0) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是第一个'
					});
					return false;
				}
				this.form.costs[index] = this.form.costs.splice(index - 1, 1, this.form.costs[index])[0];
				this.formData.costsItemDatas[index] = this.formData.costsItemDatas.splice(index - 1, 1, this.formData.costsItemDatas[index])[0];
				this.initCostsValid();
			},
			//下移子表单
			downCostsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == this.form.costs.length - 1) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是最后一个'
					});
					return false;
				}
				this.form.costs[index] = this.form.costs.splice(index + 1, 1, this.form.costs[index])[0];
				this.formData.costsItemDatas[index] = this.formData.costsItemDatas.splice(index + 1, 1, this.formData.costsItemDatas[index])[0];
				this.initCostsValid();
			},
			//删除子表单
			delCostsItem(evt) {
				let { index } = evt.currentTarget.dataset;
				this.form.costs.splice(index, 1);
				this.formData.costsItemDatas.splice(index, 1);
				this.initCostsValid();
			},
			//增加子表单
			addCostsItem() {
				this.form.costs.push(JSON.parse(JSON.stringify(this.costsItem)));
				this.formData.costsItemDatas.push(JSON.parse(JSON.stringify(this.costsItemData)));
				this.initCostsValid();
			},
			//验证所有的子表单
			checkCostsValid() {
				let flag = true;
				this.$refs['costsRef']?.forEach((subform) => {
					subform.validate((valid) => {
						if (!valid) {
							flag = false;
							return false;
						}
					});
				});
				return flag;
			},
			initResetform() {
				this.initform = JSON.stringify(this.form);
				//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form
				//this.form = this.$tools.changeRowToForm(row,this.form)
			},
			resetForm() {
				this.form = JSON.parse(this.initform);
			},

			async submitForm(e) {
				this.$refs.formRef?.setRules(this.formRules);

				this.initProductsValid();
				this.initCostsValid();
				this.$nextTick(async () => {
					let productsvalid = await this.checkProductsValid();
					let costsvalid = await this.checkCostsValid();
					let valid = await this.$refs.formRef.validate();
					if (valid && productsvalid && costsvalid) {
						//保存数据
						let param = this.form;
						let header = {
							'Content-Type': 'application/json'
						};
						let url = '/sell/orders/add';

						if (this.userInfo.customer) {
							param.customerTitle = this.userInfo.customer.title;
							param.customerPhone = this.userInfo.customer.phone;
							param.customerAddress = this.userInfo.customer.address;
							param.customerUsername = this.userInfo.customer.username;
						}

						if (this.form.products.length == 0) {
							this.showToast('产品不能为空');
							return;
						}

						let findProducts = this.form.products.filter((item) => {
							return !item.title;
						});
						if (findProducts.length > 0) {
							this.showToast('产品不能为空');
							return;
						}

						let res = await this.$http.post(url, param, header, 'json');
						if (res.code == 200) {
							if (this.form.id) {
								this.showToast('更新成功');
								this.navigateTo({
									type: 'page',
									url: 'sells'
								});
							} else {
								//提示是否继续新增
								let flag = await this.showModal('是否继续新增');
								if (flag) {
									//重置表单
									this.resetForm();
									this.form.kaidan = this.userInfo.nickname;
									this.form.kaidanDate = this.$tools.getCurrentDate();
									delete this.globalData.tabsIndex;
									this.productsApi();
								} else {
									//关闭窗口
									this.navigateTo({
										type: 'page',
										url: 'sells'
									});
								}
							}
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			changeTabs(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == this.tabsIndex) return;
				this.setData({
					tabsIndex: index
				});
				this.navigateTo({ type: 'productsApi' });
			},
			addItemNumber(item) {
				item.number = 1;
				this.selectProductAntTotalFunction();
			},
			changeItemNumber(evt, index, item) {
				this.navigateTo({ foritem: item, forindex: index, type: 'selectProductAntTotalFunction' });
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.flex28-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.text5-clz {
		flex: 1;
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.flex6-clz {
		flex: 1;
	}
	.title-clz {
		flex: 1;
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.flex22-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.address-clz {
		flex: 1;
	}
	.text22-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.text20-clz {
		margin-left: 0rpx;
		color: #989898;
		flex: 1;
		width: calc(100% - 0rpx - 0rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 0rpx;
		margin-right: 0rpx;
	}
	.icon4-clz {
		color: #989898;
	}
	.icon4 {
		font-size: 40rpx;
	}
	.flex1-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.flex24-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.text-clz {
		font-size: 28rpx !important;
	}
	.flex44-clz {
		padding-top: 6rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		padding-left: 10rpx;
		padding-bottom: 6rpx;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		padding-right: 10rpx;
	}
	.icon1 {
		font-size: 28rpx;
	}
	.flex2-clz {
		background-color: #f4f4f4;
	}
	.text11-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 60rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text4-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		flex: 1;
		padding-left: 10rpx;
		width: 60rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text3-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 120rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text2-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 120rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text1-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 120rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text7-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 120rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.flex4-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 60rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.icon {
		font-size: 40rpx;
	}
	.flex5-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		flex: 1;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex11-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex10-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex9-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex7-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex12-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 0rpx;
	}
	.text9-clz {
		margin-left: 10rpx;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text14-clz {
		color: #f30303;
		font-weight: bold;
		font-size: 28rpx !important;
		text-align: center;
		min-width: 60px;
	}
	.flex14-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.flex45-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.text35-clz {
		font-size: 28rpx !important;
	}
	.flex46-clz {
		padding-top: 6rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		padding-left: 10rpx;
		padding-bottom: 6rpx;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		padding-right: 10rpx;
	}
	.icon3 {
		font-size: 28rpx;
	}
	.flex15-clz {
		background-color: #f4f4f4;
	}
	.text8-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 60rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text10-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		flex: 1;
		padding-left: 10rpx;
		width: 60rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.text12-clz {
		flex-shrink: 0;
		padding-top: 10rpx;
		border-right: 2rpx solid #eee;
		padding-left: 10rpx;
		width: 160rpx !important;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
		text-align: center;
		padding-right: 10rpx;
	}
	.flex17-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 60rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.icon2 {
		font-size: 40rpx;
	}
	.flex18-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		flex: 1;
		width: 120rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex19-clz {
		flex-shrink: 0;
		border-right: 2rpx solid #eee;
		width: 160rpx !important;
		border-bottom: 2rpx solid #eee;
		text-align: center;
	}
	.flex23-clz {
		padding-top: 10rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 10rpx;
		padding-right: 0rpx;
	}
	.text15-clz {
		margin-left: 10rpx;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text18-clz {
		color: #f30303;
		font-weight: bold;
		font-size: 28rpx !important;
		text-align: center;
		min-width: 60px;
	}
	.flex20-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.flex21-clz {
		padding-top: 20rpx;
		flex: 1;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 0rpx;
	}
	.text16-clz {
		margin-left: 10rpx;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text19-clz {
		color: #f30303;
		font-weight: bold;
		font-size: 28rpx !important;
		text-align: center;
		min-width: 60px;
	}
	.flex26-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.flex27-clz {
		background-color: #ffffff;
		border-bottom-left-radius: 0rpx;
		overflow: hidden;
		left: 0rpx;
		bottom: 0rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 0rpx;
	}
	.text17-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 120rpx;
		color: #ffffff;
		padding-left: 20rpx;
		font-size: 28rpx !important;
		padding-bottom: 16rpx;
		border-top-right-radius: 120rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
		overflow: hidden;
		width: calc(100% - 10rpx - 10rpx) !important;
		border-top-left-radius: 120rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 10rpx;
		text-align: center;
		padding-right: 20rpx;
	}
	.modal-clz {
		border-bottom-left-radius: 0rpx;
		z-index: 1000000;
		overflow: hidden;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 0rpx;
	}
	.diygw-dialog-modal {
		border-top-left-radius: 10px !important;
		border-top-right-radius: 10px !important;
		border-bottom-left-radius: 0px !important;
		border-bottom-right-radius: 0px !important;
	}
	.flex29-clz {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.text21-clz {
		font-size: 28rpx !important;
	}
	.icon8 {
		font-size: 48rpx;
	}
	.flex30-clz {
		padding-top: 0rpx;
		padding-left: 0rpx;
		padding-bottom: 0rpx;
		padding-right: 20rpx;
	}
	.input-clz {
		flex: 1;
	}
	.input_clz {
		border-radius: 40rpx !important;
	}
	.flex41-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		padding-left: 10rpx;
		padding-bottom: 16rpx;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		padding-right: 10rpx;
	}
	.icon10 {
		font-size: 28rpx;
	}
	.tabs-clz {
		border-top: 2rpx solid #eee;
	}
	.tabs .diygw-tab-item {
		height: 80rpx;
		line-height: 80rpx;
	}
	.tabs-content {
		height: 400px;
	}

	.tabs-title {
		width: 200rpx;
		background-color: #f8f8f8 !important;
	}
	.tabs-item-title.cur {
		background-color: #ffffff !important;
		color: #000000 !important;
	}
	.flex40-clz {
		height: 800rpx;
	}
	.flex32-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #f3f3f3;
		margin-right: 10rpx;
		background-color: #ffffff;
		margin-left: 10rpx;
		box-shadow: 0rpx 0rpx 6rpx 1px rgba(219, 219, 219, 0.12);
		overflow: hidden;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex33-clz {
		padding-top: 10rpx;
		padding-left: 0rpx;
		padding-bottom: 0rpx;
		padding-right: 0rpx;
	}
	.image1-clz {
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
	}
	.image1-size {
		height: 96rpx !important;
		width: 96rpx !important;
	}
	.flex34-clz {
		flex: 1;
	}
	.flex35-clz {
		padding-top: 10rpx;
		font-weight: bold;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex36-clz {
		padding-top: 0rpx;
		padding-left: 10rpx;
		padding-bottom: 0rpx;
		padding-right: 10rpx;
	}
	.flex38-clz {
		font-weight: bold;
	}
	.text28-clz {
		font-size: 28rpx !important;
	}
	.flex37-clz {
		padding-top: 0rpx;
		padding-left: 10rpx;
		padding-bottom: 0rpx;
		padding-right: 10rpx;
	}
	.flex39-clz {
		color: #fd0101;
	}
	.text31-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.icon6-clz {
		padding-top: 8rpx;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		padding-left: 8rpx;
		padding-bottom: 8rpx;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		padding-right: 8rpx;
	}
	.icon6 {
		font-size: 28rpx;
	}
	.flex42-clz {
		border-top: 2rpx solid #eee;
		padding-top: 10rpx;
		padding-left: 20rpx;
		padding-bottom: 10rpx;
		padding-right: 20rpx;
	}
	.text32-clz {
		margin-left: 0rpx;
		font-weight: bold;
		font-size: 30rpx !important;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 20rpx;
	}
	.text37-clz {
		margin-left: 0rpx;
		font-weight: bold;
		font-size: 30rpx !important;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 20rpx;
	}
	.text38-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		padding-left: 30rpx;
		padding-bottom: 20rpx;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		padding-right: 30rpx;
	}
	.container333211 {
		padding-bottom: 160rpx;
		background-color: #f7f7f7;
	}
</style>

 


http://www.kler.cn/a/450244.html

相关文章：

  • 华为ensp--BGP路由反射器
  • Scala项目(图书管理系统)
  • 【JetPack】Navigation知识点总结
  • Linux配置ssh登陆
  • 封装（2）
  • Retrofit源码分析：动态代理获取Api接口实例，解析注解生成request，线程切换
  • LeetCode 2605 从两个数字数组里生成最小数字
  • Mybatis能执行一对一、一对多的关联查询吗？都有哪些实现方式，以及它们之间的区别
  • Echarts的高级使用，动画，交互api
  • Vue3：uv-upload图片上传
  • LeetCode：101. 对称二叉树
  • Vue3 组件 view-shadcn-ui 2024.5.3 发布
  • 如何利用Java爬虫按关键字搜索苏宁易购商品
  • 精准提升：从94.5%到99.4%——目标检测调优全纪录
  • 搭建Docker Harbor仓库
  • Qt5 cmake引用private头文件
  • scrapy 融合selenium
  • web的五个Observer API
  • 过滤掉list中两个连续的元素
  • C# 文件系统I/O操作--什么是I/O
  • day14-补充静态网卡配置
  • git 提交代码无法连接：Failed to connect to github.com port 443 after 21060 ms
  • 数据结构：双向循坏链表
  • 一文搞懂MYSQL、SQL、SQLServer、SQLyog的区别和联系
  • 英语四六级备考必备：2015-2024年历年真题+解析全汇总
  • 最新高性能多目标优化算法：多目标麋鹿优化算法（MOEHO）求解LRMOP1-LRMOP6及工程应用---盘式制动器设计，提供完整MATLAB代码