uniapp-商城-43-shop 后台管理 页面

后台管理较为简单，主要用于后台数据的管理，包含商品类别和商品信息，其实还可以扩展到管理用户等等

1、后台首页

包含 分类管理  商品管理  关于商家等几个栏目

主要代码：

<template><view class="manage"><!-- 商品管理后台 --><!-- uni-section标题栏 组件来完成   https://zh.uniapp.dcloud.io/component/uniui/uni-section.html--><uni-section title="分类管理" type="line"></uni-section><!-- 使用列表组件  uni-list  uni-list-item 完成    https://zh.uniapp.dcloud.io/component/uniui/uni-list.html --><uni-list><uni-list-item title="管理分类" show-arrow to="/pages_manage/category/category"></uni-list-item></uni-list><uni-section title="商品管理" type="line"></uni-section><uni-list><uni-list-item title="商品列表" show-arrow to="/pages_manage/goods/list"></uni-list-item><uni-list-item title="新增商品" show-arrow to="/pages_manage/goods/add"></uni-list-item></uni-list><uni-section title="关于商家" type="line"></uni-section><uni-list><uni-list-item title="商家信息" show-arrow to="/pages_manage/brand/brand"></uni-list-item></uni-list></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss" scoped>
.manage{padding:30rpx;
}
</style>

2、分类管理

由于对商品的类别进行划分，可以添加、修改和删除

新增分类；对已有分类进行修改和删除

代码：

页面展示以及操作方法

<template><view class="category"><!-- 分类管理 --><!-- 第二步 --><!-- 这里的row add 中间有一个空格，下面样式就可以写成 .row.add --><view class="row add" @click="clickAdd"><view class="left"><!-- https://uviewui.com/components/icon.html 使用的是uview的icon --><u-icon name="plus" color="#576b95" size="22"></u-icon><text class="text">新增分类</text></view></view><!-- 第一步 --><view class="row" v-for="(item,index) in categoryList" :key="item._id"><view class="left"><!-- 分类名称 --><view class="name">{{item.name}}</view></view><view class="right"><!-- 编辑和删除图标 --><!-- 使用的u-icon组件，自动生成一个class名字为 u-icon --><u-icon name="edit-pen" size="26" color="#576b95" @click="updateData(item._id,item.name)"></u-icon><u-icon name="trash" size="26" color="#EC544F" @click="deleteData(item._id)"></u-icon></view></view><!-- 第三步 --><!-- https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html 使用这里弹出层 官方  使用的是输入框示例 --><!-- 下载安装相应的组件  ref来获取方法进行相应的动作，uview 是通过show 来完成相应的动作 --><!-- @confirm 这是一个回调函数，我们通过这就知道输入的到底是什么 --><uni-popup ref="inputDialog"><uni-popup-dialog mode="input" :value="iptValue"placeholder="请输入分类名称"title="分类名称" @confirm="dialogConfirm"></uni-popup-dialog></uni-popup></view>
</template><script>const db = uniCloud.database()export default {data() {return {// categoryList:[{_id:1,name:"水果"},{_id:2,name:"肉类"}],// 上面是模拟数据  实际写的是空 下面这样的  真实数据来之云存储，并给该变量赋值categoryList:[],iptValue:"",updateID:null};},onLoad() {this.getCateGory()},methods:{//获取数据库中的分类getCateGory(){db.collection("kt-mall-category").get().then(res=>{console.log(res);this.categoryList = res.result.data})},//添加分类clickAdd(){this.iptValue=""this.updateID=null;//https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html  使用的是Popup Methods中open  // 这里的inputDialog 的属性是ref在uni-popup中// 所以这里使用的是 this.$refs.inputDialog.open();this.$refs.inputDialog.open();},//点击确认按钮async dialogConfirm(e){this.iptValue = e;if(this.updateID){await db.collection("kt-mall-category").doc(this.updateID).update({name:this.iptValue})		}else{await db.collection("kt-mall-category").add({name:this.iptValue})}		this.iptValue = "";//把输入或修改的值改为空，以免下一次在调用就还有上一次的值this.getCateGory();	},//修改一条分类updateData(id,name){this.iptValue=name;this.updateID=id;this.$refs.inputDialog.open();},//删除一条分类deleteData(id){uni.showModal({content:"是否删除该分类?",success:res=>{if(res.confirm){db.collection("kt-mall-category").doc(id).remove().then(res=>{this.getCateGory();})							}},fail:err=>{console.log(err);}})}}}
</script><style lang="scss">
.category{padding:30rpx;.row{@include flex-box();border-bottom: 1px solid $border-color-light;padding:26rpx 0;.left{font-size: 34rpx;}.right{@include flex-box();//使用的u-icon组件，自动生成一个class名字为 u-icon .u-icon{margin-left:30rpx;}}}// 对应的class 就是 row add.row.add{.left{color:$brand-theme-color-aux;@include flex-box();.text{font-size: 36rpx;padding-left:10rpx;}}}
}
</style>

3、商品管理

包含商品列表和新增商品

添加商品代码：

<template><view class="goodsView"><!-- 添加商品 --><uni-forms ref="goodsForm" :model="goodsFormData" :rules="goodsRules" :label-width="100" label-align="right"><uni-forms-item label="商品图片"><uni-file-pickerv-model="goodsFormData.thumb"fileMediatype="image"mode="grid"></uni-file-picker></uni-forms-item><uni-forms-item label="商品名称" required name="name"><uni-easyinput v-model="goodsFormData.name" placeholder="请输入商品名称" trim="both"></uni-easyinput></uni-forms-item><uni-forms-item label="产品分类" required name="category_id"><uni-data-selectcollection="kt-mall-category"field="_id as value, name as text"v-model="goodsFormData.category_id"></uni-data-select></uni-forms-item><uni-forms-item label="商品价格" required name="price"><uni-easyinput type="number" v-model="goodsFormData.price" placeholder="请输入商品价格" trim="both"></uni-easyinput></uni-forms-item><uni-forms-item label="商品原价"><uni-easyinput type="number" v-model="goodsFormData.before_price" placeholder="请输入原价" trim="both"></uni-easyinput></uni-forms-item><uni-forms-item label="商品属性"><u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell><view class="skuList"><view class="item" v-for="item in goodsFormData.sku_select" @click="clickSelect"><view class="left">{{item.skuName}}:</view><view class="right">{{skuChildName(item.children)}}</view></view></view></uni-forms-item><uni-forms-item label="商品描述"><uni-easyinput type="textarea" placeholder="请输入详细的描述信息" v-model="goodsFormData.description"></uni-easyinput></uni-forms-item><view class="btnView"><button type="primary" @click="onSubmit">确认提交</button></view></uni-forms><uni-popup ref="attrWrapPop" type="bottom"><view class="attrWrapper"><view class="head"><view class="title">商品属性</view><view class="addAttr" @click="clickAddAttr()">+ 添加属性</view></view>				<view class="body"><view class="item" v-for="(item,index) in skuArr"><view class="top">							<checkbox :checked="item.checked" @click="changeCheckbox(index)"></checkbox><view class="font">{{item.skuName}}</view></view><view class="btnGroup" v-if="item.checked"><view class="btn" :class="child.checked?'active':''"v-for="(child,cIdx) in item.children" @click="clickChlidBtn(index,cIdx)">{{child.name}}</view><view class="btn" @click="clickAddAttr(index)"><u-icon name="plus"></u-icon></view></view></view></view><view class="foot"><button type="primary" @click="clickConfirmSelect">确认选择</button></view></view><view class="safe-area-bottom"></view></uni-popup><uni-popup ref="addAttrPop"><uni-popup-dialog  mode="input" title="新增" placeholder="请输入新增的内容"@confirm="dialogConfirm"></uni-popup-dialog></uni-popup></view>
</template><script>const skuCloudObj = uniCloud.importObject("kt-mall-sku",{"customUI":true});const goodsCloudObj = uniCloud.importObject("kt-mall-goods",{"customUI":true})export default {data() {return {goodsFormData:{thumb:[],name:"",category_id:null,price:null,before_price:null,description:"",sku_select:[]},addAttrType:"parent",  //parent代表父，child代表子goodsRules:{name:{rules:[{required:true,errorMessage:"请输入产品名称"}]},price:{rules:[{required:true,errorMessage:"请输入产品价格"}]},category_id:{rules:[{required:true,errorMessage:"请输入产品分类"}]}},skuArr:[]};},onLoad(){},computed:{skuTitle(){if(this.goodsFormData.sku_select.length){let arr = this.goodsFormData.sku_select.map(item=>{return item.skuName})return arr.join("/")}else{return "点击添加属性"}}},methods:{//属性返回子元素的名称skuChildName(arr){let nsArr =  arr.map(item=>{return item.name})return nsArr.join("/")},		//点击确认选择clickConfirmSelect(){let arr = this.skuArr.filter(item=>{let state =  item.children.some(child=>child.checked)return item.checked && state}).map(item=>{let children =  item.children.filter(child=>{return child.checked})return {...item,children}})this.goodsFormData.sku_select = arrthis.$refs.attrWrapPop.close();			},//获取sku列表async getSkuData(){let res = await skuCloudObj.get();this.skuArr = res.dataconsole.log(res);},//点击添加属性clickAddAttr(index=null){if(index==null){this.addAttrType="parent"this.attrIndex=null}else{this.addAttrType="child"this.attrIndex=index}this.$refs.addAttrPop.open();},			//添加属性弹窗的确认按钮async dialogConfirm(e){if(!e) return;	if(this.addAttrType=="parent"){let obj={skuName:e,checked:true,children:[]}let res = await skuCloudObj.add(obj)obj._id = res.id;					this.skuArr.push(obj)					}else if(this.addAttrType=="child"){					let obj={name:e,checked:true}let id = this.skuArr[this.attrIndex]._id;let res = await  skuCloudObj.updateChild(id,obj)					this.skuArr[this.attrIndex].children.push(obj)}},//点击属性的复选框changeCheckbox(index){this.skuArr[index].checked  = !this.skuArr[index].checked },//点击属性值的子元素clickChlidBtn(index,cIdx){this.skuArr[index].children[cIdx].checked =  !this.skuArr[index].children[cIdx].checked},//点击选择属性clickSelect(){this.$refs.attrWrapPop.open();if(this.skuArr.length) return;this.getSkuData();},//点击提交表单onSubmit(){this.$refs.goodsForm.validate().then(res=>{this.toDataBase();}).catch(err=>{console.log(err);})},//上传到云数据库async toDataBase(){this.goodsFormData.thumb = this.goodsFormData.thumb.map(item=>{return {url:item.url,name:item.name,extname:item.extname}})let res = await goodsCloudObj.add(this.goodsFormData)uni.showToast({title:"新增商品成功"})setTimeout(()=>{uni.navigateBack()},1500)				}}}
</script><style lang="scss" scoped>
.goodsView{padding:30rpx;.skuList{.item{padding:30rpx;background: $page-bg-color;margin:15rpx 0;@include flex-box-set(start);}}
}.attrWrapper{padding:30rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;.head{@include flex-box();font-size: 34rpx;margin-bottom:30rpx;.title{font-weight: bold;}.addAttr{color:$brand-theme-color-aux;}}.body{.item{border-top:1px solid $border-color-light;&:last-child{border-bottom:1px solid $border-color-light;}.top{padding:30rpx 0;@include flex-box-set(start);.font{padding-left: 10rpx;font-weight: bold;}}.btnGroup{padding:10rpx 0 30rpx;@include flex-box-set(start);flex-wrap: wrap;.btn{padding:0rpx 25rpx;height: 60rpx;border:1rpx solid $border-color-light;margin-right: 20rpx;border-radius: 10rpx;					color:$text-font-color-2;margin-bottom:20rpx;@include flex-box-set();&.active{border-color: $brand-theme-color;color:$brand-theme-color;background: rgba(236,87,79,0.1);}}}}}.foot{padding:50rpx 200rpx;}
}
</style>

4、关于商家

商家信息展示和修改

代码：

<template><view class="brand"><!-- 商户信息 --><uni-forms ref="brandRef" :model="brandFormData" :rules="brandRules" :label-width="100" label-align="right"><uni-forms-item label="品牌招牌"><uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid":limit="1"/></uni-forms-item><uni-forms-item label="品牌名称" name="name" required><uni-easyinput type="text" v-model="brandFormData.name" placeholder="请输入品牌名称" /></uni-forms-item><uni-forms-item label="商户电话" name="mobile" required><uni-easyinput type="text" v-model="brandFormData.mobile" placeholder="请输入商户电话" /></uni-forms-item><uni-forms-item label="商户地址" name="address"><uni-easyinput v-model="brandFormData.address" placeholder="请输入商户地址" /></uni-forms-item><uni-forms-item label="商家介绍" name="about"><uni-easyinput v-model="brandFormData.about" placeholder="请输入商家介绍" type="textarea" /></uni-forms-item><button type="primary" @click="onSubmit">提交信息</button></uni-forms></view>
</template><script>const brandCloudObj = uniCloud.importObject("kt-mall-brand")export default {data() {return {brandFormData: {thumb:[],name: "", //品牌名称mobile: "",address:"",about:""},brandRules: {name: {rules: [{required: true,errorMessage: "请输入正确的品牌名称"}, {minLength: 3,maxLength: 20,errorMessage: '长度在{minLength}到{maxLength}的字符'}]},mobile: {rules: [{required: true,errorMessage: "请输入正确的品牌电话"}, {validateFunction: function(rule, value, data, callback) {let res = /^1[3-9]\d{9}$/.test(value);if (!res) {callback("手机格式不正确")}return;}}]}}};},onLoad(){this.getBrand();},methods: {//获取数据库中的品牌信息getBrand(){brandCloudObj.get().then(res=>{console.log(res);this.brandFormData = res.data[0]})},//点击提交按钮onSubmit() {								this.$refs.brandRef.validate().then(res => {let arr =  this.brandFormData.thumb.map(item=>{return {extname:item.extname,url:item.url,name:item.name,size:item.size}})this.brandFormData.thumb = arr;this.addAndUpdate();}).catch(err => {console.log(err);})},//新增或者修改品牌啊信息addAndUpdate(){if(this.brandFormData._id){brandCloudObj.update(this.brandFormData).then(res=>{uni.showToast({title:"修改成功",mask:true})setTimeout(()=>{uni.navigateBack();},1500)})}else{//新增brandCloudObj.add(this.brandFormData).then(res=>{uni.showToast({title:"新增成功"})setTimeout(()=>{uni.navigateBack();},1500)})}}}}
</script><style lang="scss" scoped>.brand {padding: 30rpx;}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/82157.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

食物数据分析系统vue+flask

食物数据分析系统vue+flask

食物数据分析系统 项目概述 食物数据分析系统是一个集食物营养成分查询、对比分析和数据可视化于一体的Web应用。系统采用前后端分离架构&#xff0c;为用户提供食物营养信息检索、食物对比和营养分析等功能&#xff0c;帮助用户了解食物的营养成分&#xff0c;做出更健康的饮…
阅读更多...
学习基本乐理知识

学习基本乐理知识

本文主要内容 如何练习吉他 乐理知识补充 ps&#xff1a;本文知识均来自up主 ‘吉他大学霸’ 感谢开源 -^- 练习吉他步骤 打怪升级 右手--> 左手--> 音阶--> 拓展 第一阶段&#xff1a; 追求手脚配合不出错、手姿势不出错、手不会按错弹错。连续不错的遍数达标就可以进…
阅读更多...
吊球技术（劈吊、滑板等）

吊球技术（劈吊、滑板等）

羽毛球吊球技术&#xff08;劈吊、滑板等&#xff09;是单打和双打中重要的得分手段&#xff0c;需要通过系统性练习掌握。以下是分步骤的详细训练方法&#xff1a; 一、核心技术原理对比 技术类型击球点拍面控制发力特点适用场景正手劈吊高点偏前斜切&#xff08;拍面45&…
阅读更多...
Java实现桶排序算法

Java实现桶排序算法

1. 桶排序原理图解 桶排序是一种基于分桶思想的非比较排序算法&#xff0c;适用于数据分布较为均匀的场景。其核心思想是将数据分散到有限数量的“桶”中&#xff0c;每个桶再分别进行排序&#xff08;通常使用插入排序或其他简单的排序算法&#xff09;。以下是桶排序的步骤&a…
阅读更多...
OpenCv实战笔记（3）基于opencv实现调用摄像头并实时显示画面

OpenCv实战笔记（3）基于opencv实现调用摄像头并实时显示画面

一、实现效果 二、实现原理 使用 OpenCV 打开摄像头&#xff0c;持续捕获视频帧&#xff0c;并在一个窗口中实时显示这些帧&#xff0c;直到用户按下 ESC 键退出。整体流程&#xff1a;打开摄像头&#xff08;cv::VideoCapture&#xff09;>创建图像显示窗口&#xff08;cv…
阅读更多...
编译原理头歌实验：词法分析程序设计与实现（C语言版）

编译原理头歌实验：词法分析程序设计与实现（C语言版）

编译原理头歌实验&#xff1a;词法分析程序设计与实现&#xff08;C语言版&#xff09; 1.实验描述 任务描述 本关任务&#xff1a;加深对词法分析器的工作过程的理解&#xff1b;加强对词法分析方法的掌握&#xff1b;能够采用一种编程语言实现简单的词法分析程序&#xff…
阅读更多...
SQL常用操作大全：复制表、跨库查询、删除重复数据

SQL常用操作大全：复制表、跨库查询、删除重复数据

大家好&#xff0c;欢迎来到程序视点&#xff01;我是你们的老朋友.小二&#xff01; SQL常用操作精华总结 表结构与数据操作 复制表结构&#xff1a; SELECT * INTO b FROM a WHERE 1<>1 (SQL Server专用) SELECT TOP 0 * INTO b FROM a (更通用) 拷贝表数据&#…
阅读更多...
课外活动：简单了解原生测试框架Unittest前置后置的逻辑

课外活动：简单了解原生测试框架Unittest前置后置的逻辑

简单了解原生测试框架Unittest前置后置的逻辑 一、测试框架执行顺序解析 1.1 基础执行流程 import unittestclass A(unittest.TestCase):classmethoddef setUpClass(cls):print(f"【CLASS START】{cls.__name__}")def setUp(self):print(f"【TEST START】{se…
阅读更多...
学习设计模式《八》——原型模式

学习设计模式《八》——原型模式

一、基础概念 原型模式的本质是【克隆生成对象】&#xff1b; 原型模式的定义&#xff1a;用原型实例指定创建对象的种类&#xff0c;并通过拷贝这些原型创建新的对象 。 原型模式的功能&#xff1a; 1、通过克隆来创建新的对象实例&#xff1b; 2、为克隆出来的新对象实例复制…
阅读更多...
olmOCR - PDF文档处理工具包

olmOCR - PDF文档处理工具包

文章目录 一、关于 olmOCR相关资源包含内容团队 二、安装三、本地使用示例查看结果多节点/集群使用管道完整文档 一、关于 olmOCR olmOCR 是用于训练语言模型处理PDF文档的工具包&#xff0c;支持大规模PDF文本解析和转换。 相关资源 源码&#xff1a;https://github.com/all…
阅读更多...
Android开发补充内容

Android开发补充内容

Android开发补充内容 fragment通信生命周期 Okhttp基本使用websocket Retrofit基本使用 RxJava基本使用定时任务 Hilt基本使用进阶使用例子 组件库Material ComponentsJetpack Compose fragment 通信 fragment于activity通信的一种原生方法是使用Bundle&#xff1a; Bundle …
阅读更多...
隐私计算框架FATE二次开发心得整理（工业场景实践）

隐私计算框架FATE二次开发心得整理（工业场景实践）

文章目录 版本介绍隐私计算介绍前言FATE架构总体架构FateBoard架构前端架构后端架构 FateClient架构创建DAG方式DAG生成任务管理python SDK方式 FateFlow架构Eggroll架构FATE算法架构Cpn层FATE ML层 组件新增流程新增组件流程新增算法流程 版本介绍 WeBank的FATE开源版本 2.2.…
阅读更多...
AI驱动的制造工艺：系统化探索与创新

AI驱动的制造工艺：系统化探索与创新

DeepSeek 技术全景 在当今 AI 技术蓬勃发展的时代，DeepSeek 已成为该领域中一颗耀眼的明星。自 2023 年 7 月 17 日成立以来，这家由知名私募巨头幻方量化孕育而生的公司，迅速在 AI 领域崭露头角 。DeepSeek 的目标是开发顶尖的大语言模型（LLM），并利用数据蒸馏技术打造更精…
阅读更多...
【嵌入式开发-LCD】

【嵌入式开发-LCD】

嵌入式开发-LCD ■ LCD简介 ■ LCD简介
阅读更多...
java反射（2）

java反射（2）

package 反射;import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.lang.reflect.Method; import java.util.Arrays;public class demo {public static void main(String[] args) throws Exception {// 通过类的全限定名获取对应的 Class 对象…
阅读更多...
使用 Cesium 构建 3D 地图应用的实践

使用 Cesium 构建 3D 地图应用的实践

CesiumJS 是一个功能强大的开源 JavaScript 库&#xff0c;能够帮助开发者快速构建高性能、高精度的 3D 地球和地图应用 。本文将介绍如何使用 Cesium 构建一个基本的 3D 地图应用&#xff0c;并加载自定义的 3D Tiles 模型。 初始化 Cesium Viewer 首先&#xff0c;在 Vue 的…
阅读更多...
结合Splash与Scrapy：高效爬取动态JavaScript网站

结合Splash与Scrapy：高效爬取动态JavaScript网站

在当今的Web开发中&#xff0c;JavaScript的广泛应用使得许多网站的内容无法通过传统的请求-响应模式直接获取。为了解决这个问题&#xff0c;Scrapy开发者经常需要集成像Splash这样的JavaScript渲染引擎。本文将详细介绍Splash JS引擎的工作原理&#xff0c;并探讨如何将其与S…
阅读更多...
企业级可观测性实现：OpenObserve云原生平台的本地化部署与远程访问解析

企业级可观测性实现：OpenObserve云原生平台的本地化部署与远程访问解析

文章目录 前言1. 安装Docker2. 创建并启动OpenObserve容器3. 本地访问测试4. 公网访问本地部署的OpenObserve4.1 内网穿透工具安装4.2 创建公网地址 5. 配置固定公网地址 前言 嘿&#xff0c;各位小伙伴们&#xff0c;今天要给大家揭秘一个在云原生领域里横扫千军的秘密法宝—…
阅读更多...
将本地项目提交到新建的git仓库

将本地项目提交到新建的git仓库

方式一: # 登录git&#xff0c;新建git仓库和指定的分支&#xff0c;如master、dev# 下载代码&#xff0c;默认下载master分支 git clone http://10.*.*.67/performance_library/pfme-*.git # 切换到想要提交代码的dev分支 git checkout dev# 添加想要提交的文件 git add .#…
阅读更多...
.NET平台用C#在PDF中创建可交互的表单域（Form Field）

.NET平台用C#在PDF中创建可交互的表单域（Form Field）

在日常办公系统开发中&#xff0c;涉及 PDF 处理相关的开发时&#xff0c;生成可填写的 PDF 表单是一种常见需求&#xff0c;例如员工信息登记表、用户注册表、问卷调查或协议确认页等。与静态 PDF 不同&#xff0c;带有**表单域&#xff08;Form Field&#xff09;**的文档支持…
阅读更多...
最新文章

Copyright @ 2022~2023