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.rhkb.cn/news/48937.html

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

相关文章

LeetCode 1. 两数之和(Java)

LeetCode 1. 两数之和&#xff08;暴力 vs 哈希表&#xff09; 题目描述 给定一个整数数组 nums 和一个整数 target&#xff0c;要求找出数组中和为目标值的两个数&#xff0c;并返回它们的下标。假设每个输入只有一种答案&#xff0c;且同一元素不能重复使用。 示例&#xf…

《软件项目管理》笔记一

软件项目管理概述 项目管理属于软件工程的组成之一&#xff0c;另外两部分为&#xff1a;软件开发&#xff0c;过程改进。 参考书如下&#xff1a; 1.1 项目与软件项目 1、项目&#xff1a; 为了创造一个唯一的产品或提供一个唯一的服务而进行 的临时性的努力。 2、项目的…

深度学习:智能车牌识别系统(python)

这是一个基于opencv的智能车牌识别系统,有GUI界面。程序能自动识别图片中的车牌号码,并支持中文和英文字符识别,支持选择本地图片文件,支持多种图片格式(jpg、jpeg、png、bmp、gif)。 下面,我将按模块功能对代码进行分段说明: 1. 导入模块部分 import tkinter as tk…

Redis 持久化机制全面解析:RDB 与 AOF 的原理与实践

目录 前言1. Redis 持久化的总体思路2. RDB&#xff1a;快照机制详解2.1 RDB 的工作原理2.2 RDB 的优势2.3 RDB 的局限性 3. AOF&#xff1a;追加日志机制详解3.1 AOF 的工作原理3.2 AOF 的优势3.3 AOF 的缺陷 4. RDB 与 AOF 的对比分析4.1 数据丢失风险4.2 文件大小与恢复速度…

混淆矩阵(Confusion Matrix)

混淆矩阵&#xff08;Confusion Matrix&#xff09;是一个用于评估分类模型性能的工具&#xff0c;特别是在机器学习和统计学领域。它展示了模型预测结果与实际结果之间的关系。混淆矩阵通常用于二分类或多分类问题中&#xff0c;但也可以扩展到更多类别的情况。 一、混淆矩阵…

TB6600HG是一款PWM(脉宽调制)斩波型单芯片双极性正弦波微步进电机驱动集成电路。

该驱动器支持电机的正向和反向旋转控制&#xff0c;并具有多种激励模式&#xff0c;包括2相、1-2相、W1-2相、2W1-2相和4W1-2相。 使用这款驱动器&#xff0c;只需时钟信号即可驱动2相双极性步进电机&#xff0c;且振动小、效率高。 主要特点&#xff1a; 单芯片双极性正弦波…

【论文阅读】Towards Stable Backdoor Purification through Feature Shift Tuning

NeurIPS 2023 & 2024 Spotlight https://github.com/AISafety-HKUST/Backdoor_Safety_Tuning 我们的贡献包括&#xff1a; 我们对各种调整策略进行了广泛的评估&#xff0c;发现普通的微调&#xff08;FT&#xff09;和简单的线性探测&#xff08;LP&#xff09;在高投毒率…

创龙全志T536全国产(4核A55 ARM+RISC-V+NPU 17路UART)工业开发板硬件说明书

前 言 本文档主要介绍TLT536-EVM评估板硬件接口资源以及设计注意事项等内容。 T536MX-CXX/T536MX-CEN2处理器的IO电平标准一般为1.8V、3.3V,上拉电源一般不超过3.3V或1.8V,当外接信号电平与IO电平不匹配时,中间需增加电平转换芯片或信号隔离芯片。按键或接口需考虑ESD设计…

Jenkins忘记admin密码后的恢复步骤

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 时间较长没有使用…

React 组件prop添加类型

给函数的props做注解 import { useState } from reacttype Props { className:string,title?:string } // 自定义一个Button组件 function Button(props:Props){// 解构出classname\const {className} propsreturn <button className{className}>点击我</button&g…

如何使用docker配置ros-noetic环境并使用rviz,gazebo

参考链接&#xff1a;【Ubuntu】Docker中配置ROS并可视化Rviz及Gazebo_docker ros-CSDN博客 前言&#xff1a; 其实这个东西是相当必要的&#xff0c;因为我们有时候需要在一台电脑上跑好几个项目&#xff0c;每个项目都有不同的依赖&#xff0c;这些依赖冲突搞得人头皮发麻&…

(已完结)完美解决C盘拓展卷是灰色的无法扩容的问题以及如何正确地在WINDOS上从一个盘扩容到C盘

众所周知&#xff0c;window系统在“计算机”管理中自带了一个磁盘管理系统 但是在使用过程中会出现各种各样无法扩容的毛病。 第一&#xff1a;首先排查&#xff0c;大多数人在扩容之前忽视了一点就是&#xff0c;我们现代的很多新机器都是默认开启BitLocker加密的&#xff…

阿里云服务器-centos部署定时同步数据库数据-dbswitch

前言&#xff1a; 本文章介绍通过dbswitch工具实现2个mysql数据库之间实现自动同步数据。 应用场景&#xff1a;公司要求实现正式环境数据库数据自动冷备 dbswitch依赖环境&#xff1a;git ,maven,jdk 方式一&#xff1a; 不需要在服务器中安装git和maven&#xff0c;直接用…

leetcode 141. Linked List Cycle

题目描述&#xff1a; 代码&#xff1a; 用哈希表也可以解决&#xff0c;但真正考察的是用快慢指针法。 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode(int x) : val(x), next(NULL) {}* };*/ class Soluti…

微软输入法常用快捷键介绍以及调教技巧

微软输入法&#xff08;Microsoft Pinyin Input Method&#xff09;是 Windows 系统内置的中文输入工具&#xff0c;以其高效、智能化的特点广受用户喜爱。掌握其常用快捷键和特殊模式可以显著提升输入效率。本文将介绍微软输入法在 Windows 10/11 环境下的常用快捷键及 U 模式…

Paddle Serving|部署一个自己的OCR识别服务器

前言 之前使用C部署了自己的OCR识别服务器&#xff0c;Socket网络传输部分是自己写的&#xff0c;回过头来一看&#xff0c;自己犯傻了&#xff0c;PaddleOCR本来就有自己的OCR服务器项目&#xff0c;叫PaddleServing&#xff0c;这里记录一下部署过程。 1 下载依赖环境 1.1 …

AI与情感计算:如何让机器更好地理解人类情感与情绪?

引言&#xff1a;当AI遇上人类情感 当我们说起人工智能&#xff0c;脑海里第一时间想到的&#xff0c;可能是聪明的语音助手、精准的推荐系统&#xff0c;或者无所不能的机器人。但如果有一天&#xff0c;这些机器不再只是“执行指令”&#xff0c;而是能看出你今天心情不好&am…

普通IT的股票交易成长史--20250507晚复盘

声明&#xff1a;本文章的内容只是自己学习的总结&#xff0c;不构成投资建议。价格行为理论学习可参考简介中的几位&#xff0c;感谢他们的无私奉献。 送给自己的话&#xff1a; 仓位就是生命&#xff0c;绝对不能满仓&#xff01;&#xff01;&#xff01;&#xff01;&…

加速项目落地(Trae编辑器)

目录 vscode安装python支持 vscode常用插件 Trae编辑器 两个界面合成 补充&#xff08;QT开发的繁琐&#xff09; AI编程哪家强&#xff1f;Cursor、Trae深度对比&#xff0c;超详细&#xff01; - 知乎 Trae兼容vscode的插件&#xff0c;我们可以先在vscode里面装好再一…

这些单词有什么内在联系吗?

下面这些单词&#xff0c;它们之间有什么内在联系吗&#xff1f; hedge n.篱笆&#xff0c;树篱&#xff1b;围栏 //词源&#xff1a;PIE *kagh-意为“抓住、捕捉&#xff1b;编织物、围栏” 对比&#xff1a;edge n.边&#xff1b;边缘&#xff1b;边沿&#xff1b;刀刃 //词…