<template>
|
<view class="account-detail">
|
<!-- 顶部标题栏 -->
|
<view class="header">
|
<up-icon name="arrow-left" size="20" color="#333" @click="goBack" />
|
<text class="title">台账详情</text>
|
</view>
|
|
<!-- 表单区域 -->
|
<view class="form-section">
|
<van-form ref="formRef" :modelValue="form" :rules="rules" label-width="100px" input-align="right">
|
<van-field label="销售合同号" name="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="请输入销售合同号">
|
</van-field>
|
<van-field label="销售合同号" name="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="请输入销售合同号">
|
</van-field>
|
<van-field label="销售合同号" name="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="请输入销售合同号">
|
</van-field>
|
<van-field label="销售合同号" name="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="请输入销售合同号">
|
</van-field>
|
<van-field label="销售合同号" name="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="请输入销售合同号">
|
</van-field>
|
<van-field label="销售合同号" name="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="请输入销售合同号">
|
</van-field>
|
<van-field label="录入人" name="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="请输入" readonly>
|
</van-field>
|
<van-field label="录入日期" name="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="请输入" readonly>
|
</van-field>
|
</van-form>
|
</view>
|
|
<!-- 产品信息 -->
|
<view class="product-section">
|
<view class="section-header">
|
<text class="section-title">产品信息</text>
|
<button class="add-btn" @click="addProduct">新增</button>
|
</view>
|
<view class="product-card" v-for="(product, idx) in products" :key="idx">
|
<view class="product-row">
|
<text class="product-label">产品类</text>
|
<uni-easyinput v-model="product.type" placeholder="请输入产品类" />
|
</view>
|
<view class="product-row">
|
<text class="product-label">单位</text>
|
<uni-easyinput v-model="product.unit" placeholder="请输入单位" />
|
<text class="product-label">数量</text>
|
<uni-easyinput v-model="product.amount" placeholder="请输入数量" type="number" />
|
</view>
|
<view class="product-row">
|
<text class="product-label">税率</text>
|
<uni-easyinput v-model="product.taxRate" placeholder="请输入税率" />
|
<text class="product-label">含税单价</text>
|
<uni-easyinput v-model="product.taxPrice" placeholder="请输入含税单价" />
|
</view>
|
<view class="product-row">
|
<text class="product-label">含税总价</text>
|
<uni-easyinput v-model="product.taxTotal" placeholder="请输入含税总价" />
|
<text class="product-label">合同金额</text>
|
<uni-easyinput v-model="product.contractAmount" placeholder="请输入合同金额" />
|
</view>
|
<view class="product-row">
|
<text class="product-label">操作</text>
|
<uni-easyinput v-model="product.operateDate" placeholder="请输入操作时间" />
|
</view>
|
<view class="product-row">
|
<text class="product-label">备注</text>
|
<uni-easyinput v-model="product.remark" placeholder="请输入备注" />
|
</view>
|
<view class="product-row del-row">
|
<button class="del-btn" @click="removeProduct(idx)">删除</button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 底部按钮 -->
|
<view class="footer-btns">
|
<van-button class="cancel-btn" @click="goBack">取消</van-button>
|
<van-button class="save-btn" @click="submitForm">保存</van-button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
const formRef = ref();
|
const paymentMethods = ['对公转账', '现金', '其他'];
|
const form = ref({
|
salesContractNo: '',
|
customerContract: '',
|
projectName: '',
|
contractAmount: '',
|
executionDate: '',
|
paymentMethod: '',
|
});
|
const rules = {
|
salesContractNo: {
|
rules: [{ required: true, errorMessage: '销售合同号不能为空' }]
|
},
|
customerContract: {
|
rules: [{ required: true, errorMessage: '客户合同不能为空' }]
|
},
|
projectName: {
|
rules: [{ required: true, errorMessage: '项目名称不能为空' }]
|
},
|
contractAmount: {
|
rules: [{ required: true, errorMessage: '合同金额不能为空' }]
|
},
|
executionDate: {
|
rules: [{ required: true, errorMessage: '签订日期不能为空' }]
|
},
|
paymentMethod: {
|
rules: [{ required: true, errorMessage: '请选择付款方式' }]
|
}
|
};
|
const products = ref([
|
{
|
type: 'LS-29911',
|
unit: '周庄镇',
|
amount: '86590905972612',
|
taxRate: '这里是项目名称',
|
taxPrice: '这里是项目名称',
|
taxTotal: '这里是项目名称',
|
contractAmount: '32011元',
|
operateDate: '2022-02-22 11:30:50',
|
remark: '',
|
},
|
{
|
type: 'LS-29911',
|
unit: '周庄镇',
|
amount: '86590905972612',
|
taxRate: '这里是项目名称',
|
taxPrice: '这里是项目名称',
|
taxTotal: '这里是项目名称',
|
contractAmount: '32011元',
|
operateDate: '2022-02-22 11:30:50',
|
remark: '',
|
},
|
]);
|
const addProduct = () => {
|
products.value.push({
|
type: '',
|
unit: '',
|
amount: '',
|
taxRate: '',
|
taxPrice: '',
|
taxTotal: '',
|
contractAmount: '',
|
operateDate: '',
|
remark: '',
|
});
|
};
|
const removeProduct = (idx) => {
|
products.value.splice(idx, 1);
|
};
|
const submitForm = () => {
|
formRef.value.validate().then(() => {
|
uni.showToast({ title: '保存成功', icon: 'success' });
|
});
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.account-detail {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 80px;
|
}
|
.header {
|
display: flex;
|
align-items: center;
|
background: #fff;
|
padding: 16px 20px;
|
border-bottom: 1px solid #f0f0f0;
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
}
|
.title {
|
flex: 1;
|
text-align: center;
|
font-size: 18px;
|
font-weight: 600;
|
color: #333;
|
}
|
.form-section {
|
margin-top: 16px;
|
}
|
.van-field {
|
height: 56px;
|
line-height: 36px;
|
}
|
.product-section {
|
background: #fff;
|
margin: 16px;
|
border-radius: 16px;
|
padding: 20px 16px 8px 16px;
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
}
|
.section-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 12px;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
}
|
.add-btn {
|
background: #2979ff;
|
color: #fff;
|
border-radius: 8px;
|
padding: 4px 16px;
|
font-size: 14px;
|
}
|
.product-card {
|
background: #f8f9fa;
|
border-radius: 12px;
|
padding: 12px;
|
margin-bottom: 16px;
|
box-shadow: 0 1px 4px rgba(41,121,255,0.06);
|
position: relative;
|
}
|
.product-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 8px;
|
}
|
.product-label {
|
min-width: 60px;
|
color: #888;
|
font-size: 13px;
|
}
|
.del-row {
|
justify-content: flex-end;
|
}
|
.del-btn {
|
background: #ff4d4f;
|
color: #fff;
|
border-radius: 8px;
|
padding: 4px 16px;
|
font-size: 13px;
|
margin-top: 4px;
|
}
|
.footer-btns {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 12px 0;
|
box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
|
z-index: 1000;
|
}
|
.cancel-btn {
|
font-weight: 400;
|
font-size: 16px;
|
color: #FFFFFF;
|
width: 102px;
|
background: #C7C9CC;
|
box-shadow: 0px 4px 10px 0px rgba(3,88,185,0.2);
|
border-radius: 40px 40px 40px 40px;
|
}
|
.save-btn {
|
font-weight: 400;
|
font-size: 16px;
|
color: #FFFFFF;
|
width: 224px;
|
background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
|
box-shadow: 0px 4px 10px 0px rgba(3,88,185,0.2);
|
border-radius: 40px 40px 40px 40px;
|
}
|
</style>
|
