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.pswp.cn/diannao/82157.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/82157.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/82157.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

食物數據分析系統vue+flask

食物數據分析系統 項目概述 食物數據分析系統是一個集食物營養成分查詢、對比分析和數據可視化于一體的Web應用。系統采用前后端分離架構&#xff0c;為用戶提供食物營養信息檢索、食物對比和營養分析等功能&#xff0c;幫助用戶了解食物的營養成分&#xff0c;做出更健康的飲…

學習基本樂理知識

本文主要內容 如何練習吉他 樂理知識補充 ps&#xff1a;本文知識均來自up主 ‘吉他大學霸’ 感謝開源 -^- 練習吉他步驟 打怪升級 右手--> 左手--> 音階--> 拓展 第一階段&#xff1a; 追求手腳配合不出錯、手姿勢不出錯、手不會按錯彈錯。連續不錯的遍數達標就可以進…

吊球技術(劈吊、滑板等)

羽毛球吊球技術&#xff08;劈吊、滑板等&#xff09;是單打和雙打中重要的得分手段&#xff0c;需要通過系統性練習掌握。以下是分步驟的詳細訓練方法&#xff1a; 一、核心技術原理對比 技術類型擊球點拍面控制發力特點適用場景正手劈吊高點偏前斜切&#xff08;拍面45&…

Java實現桶排序算法

1. 桶排序原理圖解 桶排序是一種基于分桶思想的非比較排序算法&#xff0c;適用于數據分布較為均勻的場景。其核心思想是將數據分散到有限數量的“桶”中&#xff0c;每個桶再分別進行排序&#xff08;通常使用插入排序或其他簡單的排序算法&#xff09;。以下是桶排序的步驟&a…

OpenCv實戰筆記(3)基于opencv實現調用攝像頭并實時顯示畫面

一、實現效果 二、實現原理 使用 OpenCV 打開攝像頭&#xff0c;持續捕獲視頻幀&#xff0c;并在一個窗口中實時顯示這些幀&#xff0c;直到用戶按下 ESC 鍵退出。整體流程&#xff1a;打開攝像頭&#xff08;cv::VideoCapture&#xff09;>創建圖像顯示窗口&#xff08;cv…

編譯原理頭歌實驗:詞法分析程序設計與實現(C語言版)

編譯原理頭歌實驗&#xff1a;詞法分析程序設計與實現&#xff08;C語言版&#xff09; 1.實驗描述 任務描述 本關任務&#xff1a;加深對詞法分析器的工作過程的理解&#xff1b;加強對詞法分析方法的掌握&#xff1b;能夠采用一種編程語言實現簡單的詞法分析程序&#xff…

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前置后置的邏輯 一、測試框架執行順序解析 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相關資源包含內容團隊 二、安裝三、本地使用示例查看結果多節點/集群使用管道完整文檔 一、關于 olmOCR olmOCR 是用于訓練語言模型處理PDF文檔的工具包&#xff0c;支持大規模PDF文本解析和轉換。 相關資源 源碼&#xff1a;https://github.com/all…

Android開發補充內容

Android開發補充內容 fragment通信生命周期 Okhttp基本使用websocket Retrofit基本使用 RxJava基本使用定時任務 Hilt基本使用進階使用例子 組件庫Material ComponentsJetpack Compose fragment 通信 fragment于activity通信的一種原生方法是使用Bundle&#xff1a; Bundle …

隱私計算框架FATE二次開發心得整理(工業場景實踐)

文章目錄 版本介紹隱私計算介紹前言FATE架構總體架構FateBoard架構前端架構后端架構 FateClient架構創建DAG方式DAG生成任務管理python SDK方式 FateFlow架構Eggroll架構FATE算法架構Cpn層FATE ML層 組件新增流程新增組件流程新增算法流程 版本介紹 WeBank的FATE開源版本 2.2.…

AI驅動的制造工藝:系統化探索與創新

DeepSeek 技術全景 在當今 AI 技術蓬勃發展的時代,DeepSeek 已成為該領域中一顆耀眼的明星。自 2023 年 7 月 17 日成立以來,這家由知名私募巨頭幻方量化孕育而生的公司,迅速在 AI 領域嶄露頭角 。DeepSeek 的目標是開發頂尖的大語言模型(LLM),并利用數據蒸餾技術打造更精…

【嵌入式開發-LCD】

嵌入式開發-LCD ■ LCD簡介 ■ LCD簡介

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 地圖應用的實踐

CesiumJS 是一個功能強大的開源 JavaScript 庫&#xff0c;能夠幫助開發者快速構建高性能、高精度的 3D 地球和地圖應用 。本文將介紹如何使用 Cesium 構建一個基本的 3D 地圖應用&#xff0c;并加載自定義的 3D Tiles 模型。 初始化 Cesium Viewer 首先&#xff0c;在 Vue 的…

結合Splash與Scrapy:高效爬取動態JavaScript網站

在當今的Web開發中&#xff0c;JavaScript的廣泛應用使得許多網站的內容無法通過傳統的請求-響應模式直接獲取。為了解決這個問題&#xff0c;Scrapy開發者經常需要集成像Splash這樣的JavaScript渲染引擎。本文將詳細介紹Splash JS引擎的工作原理&#xff0c;并探討如何將其與S…

企業級可觀測性實現:OpenObserve云原生平臺的本地化部署與遠程訪問解析

文章目錄 前言1. 安裝Docker2. 創建并啟動OpenObserve容器3. 本地訪問測試4. 公網訪問本地部署的OpenObserve4.1 內網穿透工具安裝4.2 創建公網地址 5. 配置固定公網地址 前言 嘿&#xff0c;各位小伙伴們&#xff0c;今天要給大家揭秘一個在云原生領域里橫掃千軍的秘密法寶—…

將本地項目提交到新建的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)

在日常辦公系統開發中&#xff0c;涉及 PDF 處理相關的開發時&#xff0c;生成可填寫的 PDF 表單是一種常見需求&#xff0c;例如員工信息登記表、用戶注冊表、問卷調查或協議確認頁等。與靜態 PDF 不同&#xff0c;帶有**表單域&#xff08;Form Field&#xff09;**的文檔支持…