销售开单管理系统，也称为销售订单管理系统，是一个全面的销售管理工具，旨在提升企业的销售效率和客户满意度。以下是对销售开单管理系统的详细介绍：
订单创建与管理
订单创建
系统能够高效地创建销售订单，包括订单的产品、数量、价格等信息，实现自动化管理，避免了传统纸质订单的繁琐过程。
支持批量操作，确保订单信息的准确性和一致性。
生成源码
<template>
<view class="container container333104">
<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">
<text class="diygw-col-24 text-clz"> 商品清单 </text>
<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 v-if="form.products.length - 1 != productsIndex && form.products.length > 0" @tap="delProductsItem" :data-index="productsIndex" class="flex icon diygw-col-0 diy-icon-roundclose"></text>
<text v-if="form.products.length - 1 == productsIndex" @tap="addProductsItem" :data-index="productsIndex" class="flex icon1 diygw-col-0 diy-icon-roundadd"></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" 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" 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" 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" 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">
<text class="diygw-col-24 text13-clz"> 其他费用 </text>
<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 v-if="form.costs.length - 1 != costsIndex && form.costs.length > 0" @tap="delCostsItem" :data-index="costsIndex" class="flex icon2 diygw-col-0 diy-icon-roundclose"></text>
<text v-if="form.costs.length - 1 == costsIndex" @tap="addCostsItem" :data-index="costsIndex" class="flex icon3 diygw-col-0 diy-icon-roundadd"></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 class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: {},
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
}
},
costsItemRules: {},
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: {
titleFocus: false,
unitFocus: false,
numberFocus: false,
priceFocus: false
},
formData: {
kaidanFocus: false,
showKaidanDate: false,
productsItemDatas: [],
costsItemDatas: [],
youhuiFocus: false
},
productsItemRules: {}
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
onReady() {
this.$refs.formRef?.setRules(this.formRules);
this.initProductsData();
this.initCostsData();
},
methods: {
async init() {
await this.dataApi();
await this.initResetform();
},
// 列表数据 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;
},
// 计算产品总金额 自定义方法
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;
},
changeFormKaidanDate(evt) {
this.form.kaidanDate = evt.result;
},
//初始化显示子表单数据条数
initProductsData() {
for (let i = 0; i < 1; i++) {
this.form.products.push(JSON.parse(JSON.stringify(this.productsItem)));
this.formData.productsItemDatas.push(JSON.parse(JSON.stringify(this.productsItemData)));
}
this.initProductsValid();
},
//子表单验证
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;
},
//初始化显示子表单数据条数
initCostsData() {
for (let i = 0; i < 1; i++) {
this.form.costs.push(JSON.parse(JSON.stringify(this.costsItem)));
this.formData.costsItemDatas.push(JSON.parse(JSON.stringify(this.costsItemData)));
}
this.initCostsValid();
},
//子表单验证
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();
} else {
//关闭窗口
this.navigateTo({
type: 'page',
url: 'sells'
});
}
}
}
} else {
console.log('验证失败');
}
});
}
}
};
</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;
}
.text-clz {
padding-top: 20rpx;
flex: 1;
padding-left: 20rpx;
font-size: 28rpx !important;
padding-bottom: 20rpx;
padding-right: 20rpx;
}
.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;
}
.icon1 {
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;
}
.text13-clz {
padding-top: 20rpx;
flex: 1;
padding-left: 20rpx;
font-size: 28rpx !important;
padding-bottom: 20rpx;
padding-right: 20rpx;
}
.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;
}
.icon3 {
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;
}
.container333104 {
padding-bottom: 160rpx;
background-color: #f7f7f7;
}
</style>
订单管理
订单可以管理所有的开单信息，可以二次编辑、删除等功能。
分别绑定显示的数据源
生成源码
<template>
<view class="container container333104">
<u-form-item :borderBottom="false" v-if="globalData.isshow" class="diygw-col-24 title-clz" labelPosition="top" prop="title">
<u-input @blur="listApi({ refresh: 1 })" :focus="titleFocus" placeholder="请输入客户名或产品名" v-model="title"></u-input>
<text @tap="navigateTo" data-type="listApi" :data-customer-title="title" data-refresh="1" class="diy-icon-search" style="color: #363636; font-size: 32rpx"></text>
</u-form-item>
<view v-if="list.total > 0" class="flex flex-wrap diygw-col-24 flex-direction-column">
<view v-for="(item, index) in list.rows" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
<view v-if="userInfo.customer" class="flex flex-wrap diygw-col-0 flex-direction-column justify-between items-center flex6-clz">
<text class="diygw-col-24 titless-clz">
{{ item.customerTitle }}
</text>
<view class="flex flex-wrap diygw-col-24 items-end">
<text class="diygw-text-line1 diygw-col-0 address-clz">
{{ item.customerAddress }}
</text>
<text class="diygw-col-0">
{{ item.customerPhone }}
</text>
</view>
<text class="diygw-text-line1 diygw-col-24">
{{ item.customerAddress }}
</text>
</view>
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex8-clz">
<text class="diygw-col-24 text4-clz"> 商品清单 </text>
<view class="flex flex-wrap diygw-col-24 flex10-clz">
<text class="diygw-col-0 text11-clz"> # </text>
<text class="diygw-col-0 text5-clz"> 名称 </text>
<text class="diygw-col-0 text12-clz"> 单位 </text>
<text class="diygw-col-0 text14-clz"> 数量 </text>
<text class="diygw-col-0 text15-clz"> 单价 </text>
<text class="diygw-col-0 text16-clz"> 合计 </text>
</view>
<view v-for="(item, index) in item.products" :key="index" class="flex flex-wrap diygw-col-24 items-stretch">
<view class="flex flex-wrap diygw-col-0 justify-center items-center flex30-clz">
<text class="diygw-col-0">
{{ index + 1 }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 justify-center items-center flex18-clz">
<text class="diygw-text-line3 diygw-col-0 text20-clz">
{{ item.title }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 justify-center items-center flex19-clz">
<text class="diygw-col-0">
{{ item.unit }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 justify-center items-center flex29-clz">
<text class="diygw-col-0">
{{ item.number }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 justify-center items-center flex27-clz">
<text class="diygw-col-0">
{{ item.price }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 justify-center items-center flex24-clz">
<text class="diygw-col-0">
{{ item.total }}
</text>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 justify-end items-center flex21-clz">
<text class="diygw-col-0 text29-clz"> 产品合计： </text>
<view class="flex flex-wrap diygw-col-0 flex-direction-column">
<text class="diygw-col-0 text30-clz">
{{ item.productsTotal }}
</text>
</view>
</view>
</view>
<view v-if="item.costs.length > 0" class="flex flex-wrap diygw-col-24 flex-direction-column flex13-clz">
<text class="diygw-col-24 text26-clz"> 费用清单 </text>
<view class="flex flex-wrap diygw-col-24 flex14-clz">
<text class="diygw-col-0 text27-clz"> # </text>
<text class="diygw-col-0 text28-clz"> 名称 </text>
<text class="diygw-col-0 text32-clz"> 金额 </text>
</view>
<view v-for="(item, index) in item.costs" :key="index" class="flex flex-wrap diygw-col-24">
<view class="flex flex-wrap diygw-col-0 justify-center items-center flex33-clz">
<text class="diygw-col-0">
{{ index + 1 }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 justify-center items-center flex32-clz">
<text class="diygw-text-line3 diygw-col-0 text34-clz">
{{ item.title }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 justify-center items-center flex31-clz">
<text class="diygw-col-0">
{{ item.price }}
</text>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 justify-end items-center flex16-clz">
<text class="diygw-col-0 text39-clz"> 费用合计： </text>
<view class="flex flex-wrap diygw-col-0 flex-direction-column">
<text class="diygw-col-0 text40-clz">
{{ item.costsTotal }}
</text>
</view>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 justify-end items-center flex12-clz">
<view class="flex flex-wrap diygw-col-24 justify-between items-end flex1-clz">
<view class="flex flex-wrap diygw-col-0 items-baseline">
<text class="diygw-text-line1 diygw-col-0 text7-clz"> 开单人： </text>
<text class="diygw-col-0">
{{ item.kaidan }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 items-baseline">
<text class="diygw-text-line1 diygw-col-0 text9-clz"> 整单优惠： </text>
<text class="diygw-col-0 text10-clz">
{{ item.youhui || 0 }}
</text>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 justify-between items-end flex25-clz">
<view class="flex flex-wrap diygw-col-0 items-baseline">
<text class="diygw-text-line1 diygw-col-0 text36-clz"> 开单日期： </text>
<text class="diygw-col-0">
{{ $tools.formatDateTime(item.kaidanDate, 'YYYY-mm-dd') }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 items-baseline">
<text class="diygw-text-line1 diygw-col-0 text43-clz"> 销售总价： </text>
<text class="diygw-col-0 text44-clz">
{{ item.total }}
</text>
</view>
</view>
</view>
<text v-if="item.remark" class="diygw-text-line3 diygw-col-24 text2-clz">
{{ item.remark }}
</text>
<view class="flex flex-wrap diygw-col-24 justify-end items-center flex2-clz">
<text @tap="navigateTo" data-type="page" data-url="/pages/sell" :data-id="item.id" class="diygw-col-0 text6-clz"> 修改 </text>
<text @tap="navigateTo" data-type="delApi" :data-id="item.id" :data-index="index" class="diygw-col-0 text13-clz"> 删除 </text>
</view>
</view>
</view>
<view v-if="globalData.isshow && list.code == 200 && list.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex-clz">
<image src="/static/zwjl.png" class="image-size diygw-image diygw-col-0" mode="widthFix"></image>
<text class="diygw-col-0 text-clz"> 未找到任何数据 </text>
</view>
<view @touchmove.stop.prevent="" v-if="modal" class="diygw-modal basic" :class="modal" style="z-index: 1000000">
<view class="diygw-dialog diygw-dialog-modal basis-lg">
<view class="justify-end diygw-bar">
<view class="content">
{{ form.id ? '编辑产品' : '新增产品' }}
</view>
<view class="action" data-type="closemodal" data-id="modal" @tap="navigateTo">
<text class="diy-icon-close"></text>
</view>
</view>
<view>
<view class="flex diygw-dialog-content">
<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
<u-form-item class="diygw-col-24" :required="true" label="标题" prop="title">
<u-input :focus="formData.titleFocus" placeholder="请输入标题" v-model="form.title"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24" label="备注" prop="remark">
<u-input maxlength="200" height="60px" class="" placeholder="请输入提示信息" v-model="form.remark" type="textarea"></u-input>
</u-form-item>
<view class="flex diygw-col-24">
<button @tap="navigateTo" data-type="clearFunction" class="diygw-btn red radius-xs flex-sub margin-xs button-button-clz">取消</button>
<button @click="submitForm" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">保存</button>
</view>
</u-form>
</view>
</view>
</view>
</view>
<view v-if="globalData.isshow" class="flex flex-wrap diygw-col-24 justify-start diygw-bottom flex3-clz">
<view class="flex flex-wrap diygw-col-24 justify-center items-center green flex20-clz" @tap="navigateTo" data-type="page" data-url="/pages/sell">
<text class="flex icon2 diygw-col-0 diy-icon-add"></text>
<text class="diygw-col-0"> 新增销售单 </text>
</view>
</view>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: { isshow: false },
listNum: 1,
list: {
rows: [
{
id: 0,
products: '',
costs: '',
youhui: null,
total: '',
remark: '',
status: null,
kaidanDate: '',
customerTitle: '',
customerUsername: '',
customerPhone: '',
customerAddress: '',
productsTotal: '',
costsTotal: '',
createTime: '',
updateTime: '',
deleteTime: null
}
],
total: 0,
code: 0,
msg: ''
},
del: {
code: 200,
msg: '删除成功'
},
titleFocus: false,
title: '',
modal: '',
formRules: {
title: [
{
trigger: ['change', 'blur'],
required: true,
message: '标题不能为空'
}
]
},
form: {
title: '',
remark: ''
},
formData: {
titleFocus: false
}
};
},
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.initResetform();
},
async initShow() {
//强制重新刷新页面
await this.listApi({ refresh: 1 });
},
// 列表数据 API请求方法
async listApi(param) {
let thiz = this;
param = param || {};
//如果请求要重置页面，请配置点击附加参数refresh=1 增加判断如输入框回调param不是对象
if (param.refresh || typeof param != 'object') {
this.listNum = 1;
}
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/sell/orders/list';
let http_data = {
pageNum: this.listNum,
pageSize: 10,
customerTitle: param.customerTitle || this.title
};
let http_header = {};
let list = await this.$http.post(http_url, http_data, http_header, 'json');
list.rows.forEach((item) => {
item.products = item.products ? JSON.parse(item.products) : [];
item.costs = item.costs ? JSON.parse(item.costs) : [];
item.costs = item.costs.filter((item) => {
return item.title;
});
});
let datarows = list.rows;
if (http_data.pageNum == 1) {
this.list = list;
} else if (datarows) {
let rows = this.list.rows.concat(datarows);
list.rows = rows;
this.list = list;
}
if (datarows && datarows.length > 0) {
this.listNum = this.listNum + 1;
}
this.globalData.isshow = true;
},
// 删除数据 API请求方法
async delApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/sell/orders/del';
let http_data = {
id: param.id || this.item.id,
index: param.index || this.index
};
let http_header = {};
let flag = await this.showModal('是否确定删除该数据');
if (!flag) {
this.showToast('你已取消删');
return;
}
let del = await this.$http.post(http_url, http_data, http_header, 'json');
this.del = del;
if (del.code == 200) {
this.list.rows.splice(param.index, 1);
this.list.total = this.list.rows.length;
this.showToast('删除数据成功');
} else {
this.showToast('删除数据失败', 'error');
}
},
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.$nextTick(async () => {
let valid = await this.$refs.formRef.validate();
if (valid) {
//保存数据
let param = this.form;
let header = {
'Content-Type': 'application/json'
};
let url = '/demo/table/add';
if (this.form.id) {
url = '/demo/table/update';
}
uni.showLoading({
title: '正在保存...'
});
let res = await this.$http.post(url, param, header, 'json');
uni.hideLoading();
if (res.code == 200) {
//更新列表数据
this.listNum = 1;
this.listApi();
if (this.form.id) {
this.showToast('更新成功');
//关闭窗口
this.navigateTo({
type: 'closemodal',
id: 'modal'
});
} else {
//提示是否继续新增
let flag = await this.showModal('是否继续新增');
if (flag) {
//重置表单
this.resetForm();
} else {
//关闭窗口
this.navigateTo({
type: 'closemodal',
id: 'modal'
});
}
}
} else {
this.showModal(res.msg, '提示', false);
}
} else {
console.log('验证失败');
}
});
}
},
onPullDownRefresh() {
// 列表数据 API请求方法
this.listNum = 1;
this.listApi();
uni.stopPullDownRefresh();
},
onReachBottom() {
// 列表数据 API请求方法
this.listApi();
}
};
</script>
<style lang="scss" scoped>
.title-clz {
background-color: #ffffff;
margin-left: 16rpx;
border-bottom-left-radius: 12rpx;
overflow: hidden;
width: calc(100% - 16rpx - 16rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 16rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 16rpx;
margin-right: 16rpx;
}
.flex4-clz {
padding-top: 10rpx;
border-bottom-left-radius: 12rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
border-top-right-radius: 12rpx;
margin-right: 20rpx;
background-color: #ffffff;
margin-left: 20rpx;
overflow: hidden;
width: calc(100% - 20rpx - 20rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
padding-right: 10rpx;
}
.flex6-clz {
border: 2rpx solid #eee;
padding-top: 10rpx;
flex: 1;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.titless-clz {
flex: 1;
}
.address-clz {
flex: 1;
}
.flex8-clz {
margin-left: 0rpx;
border: 2rpx solid #eee;
width: calc(100% - 0rpx - 0rpx) !important;
margin-top: 10rpx;
margin-bottom: 0rpx;
margin-right: 0rpx;
}
.text4-clz {
background-color: #f4f4f4;
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex10-clz {
background-color: #f4f4f4;
border-top: 2rpx solid #eee;
}
.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;
}
.text5-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: 120rpx !important;
padding-bottom: 10rpx;
border-bottom: 2rpx solid #eee;
text-align: center;
padding-right: 10rpx;
}
.text14-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;
}
.text15-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;
}
.text16-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;
}
.flex30-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;
}
.flex18-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;
}
.text20-clz {
flex: 1;
}
.flex19-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;
}
.flex29-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;
}
.flex27-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;
}
.flex24-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;
}
.flex21-clz {
flex: 1;
}
.text29-clz {
margin-left: 10rpx;
font-weight: bold;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.text30-clz {
color: #f30303;
font-weight: bold;
font-size: 28rpx !important;
text-align: center;
min-width: 60px;
}
.flex13-clz {
margin-left: 0rpx;
border: 2rpx solid #eee;
width: calc(100% - 0rpx - 0rpx) !important;
margin-top: 10rpx;
margin-bottom: 0rpx;
margin-right: 0rpx;
}
.text26-clz {
background-color: #f4f4f4;
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex14-clz {
background-color: #f4f4f4;
border-top: 2rpx solid #eee;
}
.text27-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;
}
.text28-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;
}
.text32-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;
}
.flex33-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;
}
.flex32-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;
}
.text34-clz {
flex: 1;
}
.flex31-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;
}
.flex16-clz {
flex: 1;
}
.text39-clz {
margin-left: 10rpx;
font-weight: bold;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.text40-clz {
color: #f30303;
font-weight: bold;
font-size: 28rpx !important;
text-align: center;
min-width: 60px;
}
.flex12-clz {
margin-left: 0rpx;
border: 2rpx solid #eee;
width: calc(100% - 0rpx - 0rpx) !important;
margin-top: 10rpx;
margin-bottom: 0rpx;
margin-right: 0rpx;
}
.flex1-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text7-clz {
flex: 1;
}
.text9-clz {
color: #000000;
flex: 1;
font-weight: bold;
}
.text10-clz {
color: #f30303;
font-weight: bold;
font-size: 28rpx !important;
text-align: center;
min-width: 60px;
}
.flex25-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text36-clz {
flex: 1;
}
.text43-clz {
color: #000000;
flex: 1;
font-weight: bold;
}
.text44-clz {
color: #f30303;
font-weight: bold;
font-size: 28rpx !important;
text-align: center;
min-width: 60px;
}
.text2-clz {
padding-top: 10rpx;
color: #7c7c7c;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex2-clz {
border-top: 2rpx solid #eee;
padding-top: 10rpx;
color: #6b6b6b;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text6-clz {
border: 2rpx solid #038af2;
padding-top: 10rpx;
border-bottom-left-radius: 10rpx;
color: #038af2;
padding-left: 20rpx;
padding-bottom: 10rpx;
border-top-right-radius: 10rpx;
margin-right: 10rpx;
background-color: #f0f1ff;
margin-left: 10rpx;
overflow: hidden;
border-top-left-radius: 10rpx;
margin-top: 10rpx;
border-bottom-right-radius: 10rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.text13-clz {
border: 2rpx solid #ffb08f;
padding-top: 10rpx;
border-bottom-left-radius: 10rpx;
color: #ff592c;
padding-left: 20rpx;
padding-bottom: 10rpx;
border-top-right-radius: 10rpx;
margin-right: 10rpx;
background-color: #fff4f0;
margin-left: 10rpx;
overflow: hidden;
border-top-left-radius: 10rpx;
margin-top: 10rpx;
border-bottom-right-radius: 10rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.flex-clz {
padding-top: 20rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
padding-right: 20rpx;
}
.image-size {
height: 400rpx !important;
width: 400rpx !important;
}
.text-clz {
color: #969696;
font-size: 28rpx !important;
}
.modal-clz {
z-index: 1000000;
}
.diygw-dialog-modal {
}
.button-button-clz {
margin: 6rpx !important;
}
.flex3-clz {
padding-top: 16rpx;
border-bottom-left-radius: 0rpx;
color: #747474;
bottom: 0rpx;
padding-left: 16rpx;
padding-bottom: 16rpx;
border-top-right-radius: 20rpx;
background-color: #ffffff;
overflow: hidden;
left: 0rpx;
border-top-left-radius: 20rpx;
border-bottom-right-radius: 0rpx;
padding-right: 16rpx;
}
.flex20-clz {
padding-top: 16rpx;
border-bottom-left-radius: 200rpx;
overflow: hidden;
font-weight: bold;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 16rpx;
border-top-left-radius: 200rpx;
border-top-right-radius: 200rpx;
border-bottom-right-radius: 200rpx;
padding-right: 10rpx;
}
.icon2 {
font-size: 40rpx;
}
.container333104 {
padding-bottom: 160rpx;
background-color: #f5f5f5;
}
</style>
客户管理
系统能够记录和管理客户的基本信息、联系方式等，方便销售人员进行客户分析和维护。提供客户分类和标签功能，有助于销售人员更好地识别和管理不同类型的客户。
生成源码
<template>
<view class="container container333104">
<u-form-item :borderBottom="false" v-if="globalData.isshow" class="diygw-col-24 title-clz" labelPosition="top" prop="title">
<u-input @blur="listApi({ refresh: 1 })" :focus="titleFocus" placeholder="请输入客户名" v-model="title"></u-input>
<text @blur="listApi({ refresh: 1 })" class="diy-icon-search" style="color: #363636; font-size: 32rpx"></text>
</u-form-item>
<view v-if="list.total > 0" class="flex flex-wrap diygw-col-24 flex-direction-column">
<view v-for="(item, index) in list.rows" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
<text class="diygw-text-line2 diygw-col-24 text1-clz">
{{ item.title }}
</text>
<text v-if="item.remark" class="diygw-text-line3 diygw-col-24 text2-clz">
{{ item.remark }}
</text>
<view class="flex flex-wrap diygw-col-24 justify-end items-center flex2-clz">
<text v-if="globalOption.isselect" @tap="navigateTo" data-type="selectCustomerFunction" :data-index="index" class="diygw-col-0 text6-clz"> 选择客户 </text>
<text @tap="navigateTo" data-type="editFunction" :data-index="index" class="diygw-col-0 text4-clz"> 修改 </text>
<text @tap="navigateTo" data-type="delApi" :data-id="item.id" :data-index="index" class="diygw-col-0 text13-clz"> 删除 </text>
</view>
</view>
</view>
<view v-if="globalData.isshow" class="flex flex-wrap diygw-col-24 justify-start diygw-bottom flex3-clz">
<view class="flex flex-wrap diygw-col-24 justify-center items-center green flex20-clz" @tap="navigateTo" data-type="openmodal" data-id="modal">
<text class="flex icon2 diygw-col-0 diy-icon-add"></text>
<text class="diygw-col-0"> 新增客户 </text>
</view>
</view>
<view v-if="globalData.isshow && list.code == 200 && list.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex-clz">
<image src="/static/zwjl.png" class="image-size diygw-image diygw-col-0" mode="widthFix"></image>
<text class="diygw-col-0 text-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 class="justify-end diygw-bar">
<view class="content">
{{ form.id ? '编辑客户' : '新增客户' }}
</view>
<view class="action" data-type="closemodal" data-id="modal" @tap="navigateTo">
<text class="diy-icon-close"></text>
</view>
</view>
<view>
<view class="flex diygw-dialog-content">
<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
<u-form-item labelAlign="justify" class="diygw-col-24" :required="true" label="客户名称" prop="title">
<u-input :focus="formData.titleFocus" placeholder="请输入客户名称" v-model="form.title"></u-input>
</u-form-item>
<u-form-item labelAlign="justify" class="diygw-col-24" :required="true" label="联系人" prop="username">
<u-input :focus="formData.usernameFocus" placeholder="请输入联系人" v-model="form.username"></u-input>
</u-form-item>
<u-form-item labelAlign="justify" class="diygw-col-24" :required="true" label="联系电话" prop="phone">
<u-input :focus="formData.phoneFocus" placeholder="请输入电话" v-model="form.phone"></u-input>
</u-form-item>
<u-form-item labelAlign="justify" class="diygw-col-24" :required="true" label="联系地址" prop="address">
<u-input :focus="formData.addressFocus" placeholder="请输入联系地址" v-model="form.address"></u-input>
</u-form-item>
<u-form-item labelAlign="justify" class="diygw-col-24" label="备注" prop="remark">
<u-input maxlength="200" height="60px" class="" placeholder="请输入提示信息" v-model="form.remark" type="textarea"></u-input>
</u-form-item>
<view class="flex diygw-col-24">
<button @tap="navigateTo" data-type="closemodal" data-id="modal" class="diygw-btn red radius flex-sub margin-xs button-button-clz">取消</button>
<button @click="submitForm" class="diygw-btn green radius flex-sub margin-xs button-button-clz">保存</button>
</view>
</u-form>
</view>
</view>
</view>
</view>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: { isshow: false },
listNum: 1,
list: {
rows: [],
total: 0,
code: 200,
msg: 'success'
},
del: {
code: 200,
msg: '删除成功'
},
titleFocus: false,
title: '',
modal: '',
formRules: {
title: [
{
trigger: ['change', 'blur'],
required: true,
message: '客户不能为空'
}
],
username: [
{
trigger: ['change', 'blur'],
required: true,
message: '联系人不能为空'
}
],
phone: [
{
trigger: ['change', 'blur'],
required: true,
message: '电话不能为空'
},
{
trigger: ['change', 'blur'],
message: '请输入11位的手机号码',
pattern: /^1[3-9]\d{9}$/
}
],
address: [
{
trigger: ['change', 'blur'],
required: true,
message: '联系地址不能为空'
}
]
},
form: {
title: '',
username: '',
phone: '',
address: '',
remark: ''
},
formData: {
titleFocus: false,
usernameFocus: false,
phoneFocus: false,
addressFocus: false
}
};
},
onShow() {
this.setCurrentPage(this);
},
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.listApi();
await this.initResetform();
},
// 列表数据 API请求方法
async listApi(param) {
let thiz = this;
param = param || {};
//如果请求要重置页面，请配置点击附加参数refresh=1 增加判断如输入框回调param不是对象
if (param.refresh || typeof param != 'object') {
this.listNum = 1;
}
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/sell/customer/list';
let http_data = {
pageNum: this.listNum,
pageSize: 10,
title_like: param.title_like || this.title
};
let http_header = {};
let list = await this.$http.post(http_url, http_data, http_header, 'json');
let datarows = list.rows;
if (http_data.pageNum == 1) {
this.list = list;
} else if (datarows) {
let rows = this.list.rows.concat(datarows);
list.rows = rows;
this.list = list;
}
if (datarows && datarows.length > 0) {
this.listNum = this.listNum + 1;
}
this.globalData.isshow = true;
},
// 删除数据 API请求方法
async delApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/sell/customer/del';
let http_data = {
id: param.id || this.item.id,
index: param.index || this.index
};
let http_header = {};
let flag = await this.showModal('是否确定删除该数据');
if (!flag) {
this.showToast('你已取消删');
return;
}
let del = await this.$http.post(http_url, http_data, http_header, 'json');
this.del = del;
if (del.code == 200) {
this.list.rows.splice(param.index, 1);
this.list.total = this.list.rows.length;
this.showToast('删除数据成功');
} else {
this.showToast('删除数据失败', 'error');
}
},
// 修改数据 自定义方法
async editFunction(param) {
let thiz = this;
let index = param && (param.index || param.index == 0) ? param.index : thiz.index || '';
this.form = JSON.parse(JSON.stringify(this.list.rows[param.index]));
this.navigateTo({
type: 'openmodal',
id: 'modal'
});
},
// 选择客户 自定义方法
async selectCustomerFunction(param) {
let thiz = this;
let index = param && (param.index || param.index == 0) ? param.index : thiz.index || '';
this.$session.setUserValue('customer', this.list.rows[param.index]);
this.navigateTo({
type: 'page',
url: 'sell'
});
},
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.$nextTick(async () => {
let valid = await this.$refs.formRef.validate();
if (valid) {
//保存数据
let param = this.form;
let header = {};
let url = '/sell/customer/add';
if (this.form.id) {
url = '/sell/customer/update';
}
uni.showLoading({
title: '正在保存...'
});
let res = await this.$http.post(url, param, header, 'json');
uni.hideLoading();
if (res.code == 200) {
//更新列表数据
this.listNum = 1;
this.listApi();
if (this.form.id) {
this.showToast('更新成功');
//关闭窗口
this.navigateTo({
type: 'closemodal',
id: 'modal'
});
} else {
//提示是否继续新增
let flag = await this.showModal('是否继续新增');
if (flag) {
//重置表单
this.resetForm();
} else {
//关闭窗口
this.navigateTo({
type: 'closemodal',
id: 'modal'
});
}
}
} else {
this.showModal(res.msg, '提示', false);
}
} else {
console.log('验证失败');
}
});
}
},
onPullDownRefresh() {
// 列表数据 API请求方法
this.listNum = 1;
this.listApi();
uni.stopPullDownRefresh();
},
onReachBottom() {
// 列表数据 API请求方法
this.listApi();
}
};
</script>
<style lang="scss" scoped>
.title-clz {
background-color: #ffffff;
margin-left: 16rpx;
border-bottom-left-radius: 12rpx;
overflow: hidden;
width: calc(100% - 16rpx - 16rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 16rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 16rpx;
margin-right: 16rpx;
}
.flex4-clz {
padding-top: 10rpx;
border-bottom-left-radius: 12rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
border-top-right-radius: 12rpx;
margin-right: 20rpx;
background-color: #ffffff;
margin-left: 20rpx;
overflow: hidden;
width: calc(100% - 20rpx - 20rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
padding-right: 10rpx;
}
.text1-clz {
padding-top: 10rpx;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text2-clz {
padding-top: 10rpx;
color: #7c7c7c;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex2-clz {
border-top: 2rpx solid #eee;
padding-top: 10rpx;
color: #6b6b6b;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text6-clz {
border: 2rpx solid #038af2;
padding-top: 10rpx;
border-bottom-left-radius: 10rpx;
color: #038af2;
padding-left: 20rpx;
padding-bottom: 10rpx;
border-top-right-radius: 10rpx;
margin-right: 10rpx;
background-color: #f0f1ff;
margin-left: 10rpx;
overflow: hidden;
border-top-left-radius: 10rpx;
margin-top: 10rpx;
border-bottom-right-radius: 10rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.text4-clz {
border: 2rpx solid #038af2;
padding-top: 10rpx;
border-bottom-left-radius: 10rpx;
color: #038af2;
padding-left: 20rpx;
padding-bottom: 10rpx;
border-top-right-radius: 10rpx;
margin-right: 10rpx;
background-color: #f0f1ff;
margin-left: 10rpx;
overflow: hidden;
border-top-left-radius: 10rpx;
margin-top: 10rpx;
border-bottom-right-radius: 10rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.text13-clz {
border: 2rpx solid #ffb08f;
padding-top: 10rpx;
border-bottom-left-radius: 10rpx;
color: #ff592c;
padding-left: 20rpx;
padding-bottom: 10rpx;
border-top-right-radius: 10rpx;
margin-right: 10rpx;
background-color: #fff4f0;
margin-left: 10rpx;
overflow: hidden;
border-top-left-radius: 10rpx;
margin-top: 10rpx;
border-bottom-right-radius: 10rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.flex3-clz {
padding-top: 16rpx;
border-bottom-left-radius: 0rpx;
color: #747474;
bottom: 0rpx;
padding-left: 16rpx;
padding-bottom: 16rpx;
border-top-right-radius: 20rpx;
background-color: #ffffff;
overflow: hidden;
left: 0rpx;
border-top-left-radius: 20rpx;
border-bottom-right-radius: 0rpx;
padding-right: 16rpx;
}
.flex20-clz {
padding-top: 16rpx;
border-bottom-left-radius: 200rpx;
overflow: hidden;
font-weight: bold;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 16rpx;
border-top-left-radius: 200rpx;
border-top-right-radius: 200rpx;
border-bottom-right-radius: 200rpx;
padding-right: 10rpx;
}
.icon2 {
font-size: 40rpx;
}
.flex-clz {
padding-top: 20rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
padding-right: 20rpx;
}
.image-size {
height: 400rpx !important;
width: 400rpx !important;
}
.text-clz {
color: #969696;
font-size: 28rpx !important;
}
.modal-clz {
z-index: 1000000;
}
.diygw-dialog-modal {
}
.button-button-clz {
margin: 6rpx !important;
}
.container333104 {
padding-bottom: 160rpx;
background-color: #f5f5f5;
}
</style>
系统首页
系统首页我们提供了快速开单、订单管理、客户管理、用户管理等快速入口界面
生成源码
<template>
<view class="container container333104">
<view class="flex diygw-col-24 flex-direction-column justify-center items-center flex-nowrap">
<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex19-clz" @tap="navigateTo" data-type="page" data-url="/pages/sell">
<image src="/static/icon1_bj.png" class="image-size diygw-image diygw-col-0 image-clz" mode="widthFix"></image>
<text class="diygw-col-0 text14-clz"> 快速开单 </text>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 flex13-clz">
<view class="flex diygw-col-24 flex-direction-column items-start flex-wrap flex6-clz" @tap="navigateTo" data-type="page" data-url="/pages/sells">
<view class="flex diygw-col-24 items-center flex-nowrap">
<view class="flex flex-wrap diygw-col-0 flex-direction-column flex15-clz">
<text class="diygw-col-0 text3-clz"> 订单管理 </text>
<text class="diygw-col-0 text16-clz"> 查看所有订单 </text>
</view>
<image src="/static/icon1_gw.png" class="image2-size diygw-image diygw-col-0 image2-clz" mode="widthFix"></image>
</view>
</view>
<view class="flex diygw-col-24 flex-direction-column items-start flex-wrap flex21-clz" @tap="navigateTo" data-type="page" data-url="/pages/customer">
<view class="flex diygw-col-24 items-center flex-nowrap">
<view class="flex flex-wrap diygw-col-0 flex-direction-column flex23-clz">
<text class="diygw-col-0 text18-clz"> 客户管理 </text>
<text class="diygw-text-line1 diygw-col-0 text19-clz"> 查看所有客户 </text>
</view>
<image src="/static/icon1_fs.png" class="image6-size diygw-image diygw-col-0 image6-clz" mode="widthFix"></image>
</view>
</view>
<view class="flex diygw-col-24 flex-direction-column items-start flex-wrap flex4-clz" @tap="navigateTo" data-type="page" data-url="/pages/user">
<view class="flex diygw-col-24 items-center flex-nowrap">
<view class="flex flex-wrap diygw-col-0 flex-direction-column flex8-clz">
<text class="diygw-col-0 text4-clz"> 用户管理 </text>
<text class="diygw-col-0 text5-clz"> 管理登录用户 </text>
</view>
<image src="/static/icon1_rzyh.png" class="image3-size diygw-image diygw-col-0 image3-clz" mode="widthFix"></image>
</view>
</view>
<view class="flex diygw-col-24 flex-direction-column items-start flex-wrap flex-clz" @tap="navigateTo" data-type="loginOutFunction">
<view class="flex diygw-col-24 items-center flex-nowrap">
<view class="flex flex-wrap diygw-col-0 flex-direction-column flex2-clz">
<text class="diygw-col-0 text-clz"> 退出登录 </text>
</view>
<image src="/static/icon1_s.png" class="image1-size diygw-image diygw-col-0 image1-clz" mode="widthFix"></image>
</view>
</view>
</view>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: {}
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
methods: {
async init() {},
// 新增方法 自定义方法
async initFunction(param) {
let thiz = this;
if (!this.$session.getToken()) {
//比如未登录，转身到其他页面等
this.showToast('请先登录');
this.navigateTo({
type: 'page',
url: 'login'
});
return;
}
},
// 退出登录 自定义方法
async loginOutFunction(param) {
let thiz = this;
this.$session.clearUser();
this.navigateTo({
type: 'page',
url: 'login'
});
}
}
};
</script>
<style lang="scss" scoped>
.flex19-clz {
padding-top: 40rpx;
border-bottom-left-radius: 60%;
padding-left: 40rpx;
padding-bottom: 40rpx;
border-top-right-radius: 60%;
margin-right: 10rpx;
background-color: #f7faff;
margin-left: 10rpx;
flex-shrink: 0;
overflow: hidden;
width: 400rpx !important;
border-top-left-radius: 60%;
margin-top: 40rpx;
border-bottom-right-radius: 60%;
margin-bottom: 40rpx;
height: 400rpx !important;
padding-right: 40rpx;
}
.image-clz {
border: 2rpx solid #fbfbfb;
border-bottom-left-radius: 120rpx;
overflow: hidden;
border-top-left-radius: 120rpx;
border-top-right-radius: 120rpx;
border-bottom-right-radius: 120rpx;
}
.image-size {
height: 160rpx !important;
width: 160rpx !important;
}
.text14-clz {
font-weight: bold;
font-size: 30rpx !important;
}
.flex13-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex6-clz {
padding-top: 20rpx;
border-bottom-left-radius: 12rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
border-top-right-radius: 12rpx;
margin-right: 10rpx;
background-color: #f7faff;
margin-left: 10rpx;
flex-shrink: 0;
overflow: hidden;
width: calc(100% - 10rpx - 10rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.flex15-clz {
flex: 1;
}
.text3-clz {
flex: 1;
font-size: 30rpx !important;
}
.text16-clz {
color: #a9a9a9;
}
.image2-clz {
border: 2rpx solid #fbfbfb;
border-bottom-left-radius: 120rpx;
overflow: hidden;
border-top-left-radius: 120rpx;
border-top-right-radius: 120rpx;
border-bottom-right-radius: 120rpx;
}
.image2-size {
height: 80rpx !important;
width: 80rpx !important;
}
.flex21-clz {
padding-top: 20rpx;
border-bottom-left-radius: 12rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
border-top-right-radius: 12rpx;
margin-right: 10rpx;
background-color: #f7faff;
margin-left: 10rpx;
flex-shrink: 0;
overflow: hidden;
width: calc(100% - 10rpx - 10rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.flex23-clz {
flex: 1;
}
.text18-clz {
flex: 1;
font-size: 30rpx !important;
}
.text19-clz {
color: #a9a9a9;
}
.image6-clz {
border: 2rpx solid #fbfbfb;
border-bottom-left-radius: 120rpx;
overflow: hidden;
border-top-left-radius: 120rpx;
border-top-right-radius: 120rpx;
border-bottom-right-radius: 120rpx;
}
.image6-size {
height: 80rpx !important;
width: 80rpx !important;
}
.flex4-clz {
padding-top: 20rpx;
border-bottom-left-radius: 12rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
border-top-right-radius: 12rpx;
margin-right: 10rpx;
background-color: #f7faff;
margin-left: 10rpx;
flex-shrink: 0;
overflow: hidden;
width: calc(100% - 10rpx - 10rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.flex8-clz {
flex: 1;
}
.text4-clz {
flex: 1;
font-size: 30rpx !important;
}
.text5-clz {
color: #a9a9a9;
}
.image3-clz {
border: 2rpx solid #fbfbfb;
border-bottom-left-radius: 120rpx;
overflow: hidden;
border-top-left-radius: 120rpx;
border-top-right-radius: 120rpx;
border-bottom-right-radius: 120rpx;
}
.image3-size {
height: 80rpx !important;
width: 80rpx !important;
}
.flex-clz {
padding-top: 20rpx;
border-bottom-left-radius: 12rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
border-top-right-radius: 12rpx;
margin-right: 10rpx;
background-color: #f7faff;
margin-left: 10rpx;
flex-shrink: 0;
overflow: hidden;
width: calc(100% - 10rpx - 10rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.flex2-clz {
flex: 1;
}
.text-clz {
flex: 1;
font-size: 30rpx !important;
}
.image1-clz {
border: 2rpx solid #fbfbfb;
border-bottom-left-radius: 120rpx;
overflow: hidden;
border-top-left-radius: 120rpx;
border-top-right-radius: 120rpx;
border-bottom-right-radius: 120rpx;
}
.image1-size {
height: 80rpx !important;
width: 80rpx !important;
}
.container333104 {
}
</style>
开源地址：
扫一扫
4881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
