gitee开源商城diygw-mall

DIYGW可视化开源商城系统。所的界面布局显示都通过低代码可视化开发工具生成源码实现。支持集成微信小程序支付。 DIYGW可视化开源商城系统是一款基于thinkphp8 framework、 element plus admin、uniapp开发而成的前后端分离系统。

开源商城项目源码地址：diygw商城: DIYGW可视化商户开源商城系统。所的界面布局显示都通过diygw.com可视化开发工具生成源码实现。支持集成微信小程序支付。icon-default.png?t=O83Ahttps://gitee.com/diygw/diygw-mall

 💒 server代码仓库来源

  • 基于thinkphp8实现的DIYGW-UI-PHPicon-default.png?t=O83Ahttps://gitee.com/diygw/diygw-ui-php

💒 admin代码仓库来源

  • diygw-ui-admin: 基于vite、vue3.x 、router、pinia、Typescript、Element plus等，适配手机、平板、pc 的后台开源免费模板库icon-default.png?t=O83Ahttps://gitee.com/diygw/diygw-ui-admin

⚡ 可视化截图

DIYGW可视化商城移动端

DIYGW可视化商城PC端

DIYGW可视化商城PC端

DIYGW可视化商城PC端

DIYGW可视化商城PC端

首页可视化生成源码

 

<template><view class="container container329916"><view class="flex flex-wrap diygw-col-24 justify-center items-center flex15-clz" @tap="navigateTo" data-type="page" data-url="/pages/goods"><text class="flex icon diygw-col-0 diy-icon-search"></text><text class="diygw-col-0"> 搜索 </text></view><view class="flex diygw-col-24 swiper-clz"><swiper :current="swiperIndex" class="swiper" @change="changeSwiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="#fff" indicator-dots="true" autoplay interval="3000" circular="true" style="height: 276rpx"><swiper-item v-for="(item, index) in swipers.rows" :key="index" class="diygw-swiper-item"><view class="diygw-swiper-item-wrap"><image :src="item.img" class="diygw-swiper-image"></image><view class="diygw-swiper-item-title swiper-title">{{ item.title }}</view></view></swiper-item></swiper></view><view class="flex diygw-col-24 noticebar-clz"><diy-noticebar class="flex1 diy-notice-bar" :remote="true" :list="notices.rows" color="#fb4833" bgColor="#ffe8e8" leftIcon="diy-icon-notification"><block v-slot:content><text class="diy-notice-item" v-for="(item, index) in notices.rows" :key="index">{{ item.title }}</text></block></diy-noticebar></view><view v-if="goods.total > 0" class="flex diygw-col-24 items-stretch flex-wrap flex-clz"><view v-for="(item, index) in goods.rows" :key="index" class="flex flex-wrap diygw-col-12 flex-direction-column items-stretch flex6-clz" @tap="navigateTo" data-type="page" data-url="/pages/goods/detail" :data-id="item.id"><view class="flex flex-wrap diygw-col-0 flex-direction-column items-center"><image :src="item.img" class="image-size diygw-image diygw-col-24" mode="aspectFit"></image></view><view class="flex flex-wrap diygw-col-0 flex-direction-column justify-between flex20-clz"><text class="diygw-col-0 text11-clz">{{ item.title }}</text><text class="diygw-text-line2 diygw-col-0">{{ item.remark }}</text><view class="flex flex-wrap diygw-col-0 items-center"><text class="diygw-col-0 text7-clz"> ￥{{ item.price }} </text><text class="diygw-text-line2 diygw-col-0 text8-clz"> ￥{{ item.linePrice }} </text></view></view></view></view><view v-if="globalData.isshow && goods.code == 200 && goods.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex1-clz"><image src="/static/zwjl.png" class="image1-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-col-0 text-clz"> 未找到任何数据 </text></view><view class="flex flex-wrap diygw-col-24 items-end diygw-bottom flex2-clz"><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex8-clz"><view class="flex flex-wrap diygw-col-0 flex-direction-column items-center"><image src="/static/sy3on.png" class="image2-size diygw-image diygw-col-0" mode="widthFix"></image></view><text class="diygw-text-line1 diygw-col-0"> 首页 </text></view><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex11-clz" @tap="navigateTo" data-type="page" data-url="/pages/goods" data-redirect="1"><view class="flex flex-wrap diygw-col-0 flex-direction-column items-center"><image src="/static/fl.png" class="image8-size diygw-image diygw-col-0" mode="widthFix"></image></view><text class="diygw-text-line1 diygw-col-0"> 分类 </text></view><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex9-clz" @tap="navigateTo" data-type="page" data-url="/pages/cart" data-redirect="1"><view class="flex flex-wrap diygw-col-0 flex-direction-column items-center"><text v-if="userInfo.carts && userInfo.carts.length > 0" class="diygw-text-line1 diygw-col-0 animate__animated animate__heartBeat animate__infinite text2-clz"> </text><image src="/static/gwc.png" class="image5-size diygw-image diygw-col-0" mode="widthFix"></image></view><text class="diygw-text-line1 diygw-col-0"> 购物车 </text></view><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex4-clz" @tap="navigateTo" data-type="page" data-url="/pages/articles" data-redirect="1"><view class="flex flex-wrap diygw-col-0 flex-direction-column items-center"><image src="/static/cp1.png" class="image3-size diygw-image diygw-col-0" mode="widthFix"></image></view><text class="diygw-text-line1 diygw-col-0"> 文章 </text></view><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex12-clz" @tap="navigateTo" data-type="page" data-url="/pages/user" data-redirect="1"><view class="flex flex-wrap diygw-col-0 flex-direction-column items-center"><image src="/static/wd.png" class="image4-size diygw-image diygw-col-0" mode="widthFix"></image></view><text class="diygw-text-line1 diygw-col-0"> 我的 </text></view></view><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: { isshow: false },swipersNum: 1,swipers: {rows: [{id: 0,title: '',remark: '',img: '',path: null,userId: 0,createTime: '',updateTime: '',deleteTime: null}],total: 0,code: 0,msg: ''},noticesNum: 1,notices: {rows: [{id: 0,title: '',remark: '',userId: 0,createTime: '',updateTime: '',deleteTime: null}],total: 0,code: 0,msg: ''},goodsNum: 1,goods: {rows: [{id: 0,title: '',remark: '',img: '',imgs: '',status: '',content: '',price: '',amount: 0,sellamonut: null,skus: '',sortnum: null,cateId: 0,userId: 0,createTime: '',updateTime: '',deleteTime: null,linePrice: '',skuType: ''}],total: 0,code: 0,msg: ''},swiperIndex: 0};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {await this.swipersApi();await this.noticesApi();await this.goodsApi();},// 轮播数据 API请求方法async swipersApi(param) {let thiz = this;param = param || {};//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/cms/api.swiper/list';let http_data = {pageNum: this.swipersNum,pageSize: 10,pageSize: param.pageSize || '5'};let http_header = {};let swipers = await this.$http.post(http_url, http_data, http_header, 'json');this.swipers = swipers;this.globalData.isshow = true;},// 公告数据 API请求方法async noticesApi(param) {let thiz = this;param = param || {};//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/cms/api.notice/list';let http_data = {pageNum: this.noticesNum,pageSize: 10,pageSize: param.pageSize || '5'};let http_header = {};let notices = await this.$http.post(http_url, http_data, http_header, 'json');this.notices = notices;},// 商品数据 API请求方法async goodsApi(param) {let thiz = this;param = param || {};//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象if (param.refresh || typeof param != 'object') {this.goodsNum = 1;}//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/shop/api.goods/list';let http_data = {pageNum: this.goodsNum,pageSize: 10};let http_header = {};let goods = await this.$http.post(http_url, http_data, http_header, 'json');let datarows = goods.rows;if (http_data.pageNum == 1) {this.goods = goods;} else if (datarows) {let rows = this.goods.rows.concat(datarows);goods.rows = rows;this.goods = goods;}if (datarows && datarows.length > 0) {this.goodsNum = this.goodsNum + 1;}this.globalData.isshow = true;},changeSwiper(evt) {let swiperIndex = evt.detail.current;this.setData({ swiperIndex });}},onPullDownRefresh() {// 商品数据 API请求方法this.goodsNum = 1;this.goodsApi();uni.stopPullDownRefresh();},onReachBottom() {// 商品数据 API请求方法this.goodsApi();}};
</script><style lang="scss" scoped>.flex15-clz {padding-top: 16rpx;border-bottom-left-radius: 120rpx;padding-left: 10rpx;padding-bottom: 16rpx;border-top-right-radius: 120rpx;margin-right: 20rpx;background-color: #ffffff;margin-left: 20rpx;box-shadow: 0rpx 0rpx 12rpx 2px rgba(219, 219, 219, 0.31);overflow: hidden;width: calc(100% - 20rpx - 20rpx) !important;border-top-left-radius: 120rpx;margin-top: 10rpx;border-bottom-right-radius: 120rpx;margin-bottom: 10rpx;padding-right: 10rpx;}.icon {font-size: 36rpx;}.swiper-clz {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;}.swiper-title {background-color: rgba(0, 0, 0, 0.281);color: #e6e6e6;}.noticebar-clz {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;}.flex-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: #ffffff;margin-left: 10rpx;box-shadow: 0rpx 0rpx 12rpx 2px rgba(219, 219, 219, 0.31);overflow: hidden;width: calc(50% - 10rpx - 10rpx) !important;border-top-left-radius: 12rpx;margin-top: 10rpx;border-bottom-right-radius: 12rpx;margin-bottom: 10rpx;padding-right: 20rpx;}.image-size {height: 200rpx !important;width: 100%;}.flex20-clz {padding-top: 10rpx;flex: 1;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.text11-clz {font-weight: bold;font-size: 28rpx !important;}.text7-clz {color: #f20000;font-weight: bold;font-size: 28rpx !important;}.text8-clz {text-decoration: line-through;}.flex1-clz {padding-top: 20rpx;padding-left: 20rpx;padding-bottom: 20rpx;padding-right: 20rpx;}.image1-size {height: 400rpx !important;width: 400rpx !important;}.text-clz {color: #969696;font-size: 28rpx !important;}.flex2-clz {border-top: 2rpx solid #e4e4e4;padding-top: 16rpx;border-bottom-left-radius: 0rpx;bottom: 0rpx;padding-left: 16rpx;padding-bottom: 16rpx;border-top-right-radius: 24rpx;background-color: #ffffff;box-shadow: 0rpx 4rpx 12rpx rgba(31, 31, 31, 0.16);overflow: visible;left: 0rpx;border-top-left-radius: 24rpx;border-bottom-right-radius: 0rpx;padding-right: 16rpx;}.flex8-clz {color: #fa240b;flex: 1;}.image2-size {height: 48rpx !important;width: 48rpx !important;}.flex11-clz {flex: 1;}.image8-size {height: 48rpx !important;width: 48rpx !important;}.flex9-clz {flex: 1;}.text2-clz {border: 2rpx solid #eee;border-bottom-left-radius: 40rpx;-webkit-animation-duration: 5000ms;color: #ffffff;animation-delay: 1000ms;-webkit-animation-delay: 1000ms;border-top-right-radius: 40rpx;right: -8rpx;background-color: rgba(255, 17, 17, 0.91);animation-duration: 5000ms;flex-shrink: 0;overflow: hidden;top: -8rpx;width: 16rpx !important;border-top-left-radius: 40rpx;border-bottom-right-radius: 40rpx;position: absolute;height: 16rpx !important;}.image5-size {height: 48rpx !important;width: 48rpx !important;}.flex4-clz {flex: 1;}.image3-size {height: 48rpx !important;width: 48rpx !important;}.flex12-clz {flex: 1;}.image4-size {height: 48rpx !important;width: 48rpx !important;}.container329916 {padding-bottom: 160rpx;background-color: #f5f5f5;}
</style>

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

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

相关文章

Java中String类的常见操作Api

Java中String类的常见操作Api

目录 String类的常见操作 1).int indexOf (char 字符) 2).int lastIndexOf(char 字符) 3).int indexOf(String 字符串) 4).int lastIndexOf(String 字符串) 5).char charAt(int 索引) 6).Boolean endWith(String 字符串) 7).int length() 8).boolean equals(T 比较对象) 9).b…
阅读更多...
区块链积分系统：重塑支付安全与商业创新的未来

区块链积分系统：重塑支付安全与商业创新的未来

在当今社会&#xff0c;数字化浪潮席卷全球&#xff0c;支付安全与风险管理议题日益凸显。随着交易频次与规模的不断扩大&#xff0c;传统支付体系正面临前所未有的效率、合规性和安全挑战。 区块链技术&#xff0c;凭借其去中心化、高透明度以及数据不可篡改的特性&#xff0c…
阅读更多...
SSH 公钥认证：从gitlab clone项目repo到本地

SSH 公钥认证：从gitlab clone项目repo到本地

这篇文章的分割线以下文字内容由 ChatGPT 生成&#xff08;我稍微做了一些文字上的调整和截图的补充&#xff09;&#xff0c;我review并实践后觉得内容没有什么问题&#xff0c;由此和大家分享。 假如你想通过 git clone git10.12.5.19:your_project.git 命令将 git 服务器上…
阅读更多...
简单的maven nexus私服学习

简单的maven nexus私服学习

简单的maven nexus私服学习 1.需求 我们现在使用的maven私服是之前同事搭建的&#xff0c;是在公司的一台windows电脑上面&#xff0c;如果出问题会比较难搞&#xff0c;所以现在想将私服迁移到我们公司的测试服务器上&#xff0c;此处简单了解一下私服的一些配置记录一下&am…
阅读更多...
多线程（二）：Thread类常见的属性和方法

多线程（二）：Thread类常见的属性和方法

目录 1、run & start 2、Thread类常见的属性和方法 2.1 构造方法 2.2 属性 3、后台进程 & 前台进程 4、setDaemon 5、isAlive 6、终止一个线程 6.1 变量捕获 6.2 currentThread & isInterrupted & interrupt 1、run & start 在多线程&#xff08…
阅读更多...
Java面试宝典-Java集合01

Java面试宝典-Java集合01

Java面试宝典-Java集合01 目录 Java面试宝典-Java集合01 1、Java中常用的集合有哪些&#xff1f; 2、Collection 和 Collections 有什么区别&#xff1f; 3、为什么集合类没有实现 Cloneable 和 Serializable 接口&#xff1f; 4、数组和集合有什么本质区别&#xff1f; 5、数组…
阅读更多...
Java | Leetcode Java题解之第470题用Rand7()实现Rand10()

Java | Leetcode Java题解之第470题用Rand7()实现Rand10()

题目&#xff1a; 题解&#xff1a; class Solution extends SolBase {public int rand10() {int a, b, idx;while (true) {a rand7();b rand7();idx b (a - 1) * 7;if (idx < 40) {return 1 (idx - 1) % 10;}a idx - 40;b rand7();// get uniform dist from 1 - 63…
阅读更多...
蓝桥杯【物联网】零基础到国奖之路:十七. 扩展模块之单路ADC和NE555

蓝桥杯【物联网】零基础到国奖之路:十七. 扩展模块之单路ADC和NE555

蓝桥杯【物联网】零基础到国奖之路:十七. 扩展模块之单路ADC和NE555 第一节 硬件解读第二节 CubeMx配置第三节 代码1&#xff0c;脉冲部分代码2&#xff0c;ADC部分代码![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/57531a4ee76d46daa227ae0a52993191.png) 第一节 …
阅读更多...
React技术在Meta Connect 2024大会

React技术在Meta Connect 2024大会

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
熵权法计算评价指标权重——使用Excel VBA实现

熵权法计算评价指标权重——使用Excel VBA实现

[ 熵权法 ] 信息是系统有序程度的一个度量&#xff0c;熵是系统无序程度的一个度量&#xff1b;根据信息熵的定义&#xff0c;对于某项指标&#xff0c;可以用熵值来判断某个指标的离散程度&#xff0c;其信息熵值越小&#xff0c;指标的离散程度越大&#xff0c; 该指标对综合…
阅读更多...
数据库——表格之间的关系（表格之间的连接和处理）

数据库——表格之间的关系（表格之间的连接和处理）

数据库表格之间经常存在各种关系&#xff1a; 一对一、一对多、多对多 1.一对一 —— 丈夫表&#xff0c;妻子表为例 连接方式一&#xff1a;合并为一张表 这种方式对于一对一来说最优 连接方式二&#xff1a;在其中一张表内加入一个外键&#xff0c;连接另一张表 连…
阅读更多...
ARM base instruction -- sdiv

ARM base instruction -- sdiv

有符号除法运算 Signed Divide divides a signed integer register value by another signed integer register value, and writes the result to the destination register. The condition flags are not affected. 将一个有符号整数寄存器值除以另一个有符号整数寄存器值&am…
阅读更多...
Java中的switch分支结构

Java中的switch分支结构

switch分支结构 switch分支结构1.基本语法2.说明3.流程图4.案例5.注意事项6.练习7.switch和if的比较 switch分支结构 1.基本语法 switch&#xff08;表达式&#xff09;{case 常量1: //当...语句块1;break;case 常量2: 语句块2;break;...case 常量n: 语句块n;break;defaul…
阅读更多...
路径跟踪之导航向量场——二维导航向量场

路径跟踪之导航向量场——二维导航向量场

今天带来一期轨迹跟踪算法的讲解&#xff0c;首先讲解二维平面中的导航向量场[1]。该方法具有轻量化、计算简便、收敛性强等多项优点。该方法根据期望的轨迹函数&#xff0c;计算全局位置的期望飞行向量&#xff0c;将期望飞行向量转为偏光角&#xff0c;输入底层控制器&#x…
阅读更多...
prometheus client_java实现进程的CPU、内存、IO、流量的可观测

prometheus client_java实现进程的CPU、内存、IO、流量的可观测

文章目录 1、获取进程信息的方法1.1、通过读取/proc目录获取进程相关信息1.2、通过Linux命令获取进程信息1.2.1、top&#xff08;CPU/内存&#xff09;命令1.2.2、iotop&#xff08;磁盘IO&#xff09;命令1.2.3、nethogs&#xff08;流量&#xff09;命令 2、使用prometheus c…
阅读更多...
AAA Mysql与redis的主从复制原理

AAA Mysql与redis的主从复制原理

一 &#xff1a;Mysql主从复制 重要的两个日志文件&#xff1a;bin log 和 relay log bin log&#xff1a;二进制日志&#xff08;binnary log&#xff09;以事件形式记录了对MySQL数据库执行更改的所有操作。 relay log&#xff1a;用来保存从节点I/O线程接受的bin log日志…
阅读更多...
用凡尔码系统进行隐患排查二维码的制作

用凡尔码系统进行隐患排查二维码的制作

隐患排查是企业安全管理的重要环节&#xff0c;通过定期或不定期地对生产设备、作业场所、作业人员等进行检查&#xff0c;发现并消除安全隐患&#xff0c;预防事故的发生。隐患排查的效率和质量直接影响到企业的安全生产水平和经济效益。 传统的隐患排查方法主要依靠纸质进行…
阅读更多...
PostgreSQL学习笔记七：常规SQL操作

PostgreSQL学习笔记七：常规SQL操作

PostgreSQL 支持标准的 SQL 语句&#xff0c;同时也扩展了一些特有的功能。以下是一些常规的 SQL 语句示例&#xff0c;这些示例涵盖了数据定义、数据操作和数据查询的基本操作&#xff1a; 数据定义语言 (DDL 创建数据库&#xff1a; CREATE DATABASE mydatabase;创建表&#…
阅读更多...
Vue/组件的生命周期

Vue/组件的生命周期

这篇文章借鉴了coderwhy大佬的Vue生命周期 在Vue实例化或者创建组件的过程中 内部涉及到一系列复杂的阶段 每一个阶段的前后时机都可能对应一个钩子函数 以下是我根据coderwhy大佬文章对于每一个阶段的一些看法 1.过程一 首先实例化Vue或者组件 在实例化之前 会对应一个钩子函…
阅读更多...
安装最新 MySQL 8.0 数据库（教学用）

安装最新 MySQL 8.0 数据库（教学用）

安装 MySQL 8.0 数据库&#xff08;教学用&#xff09; 文章目录 安装 MySQL 8.0 数据库&#xff08;教学用&#xff09;前言MySQL历史一、第一步二、下载三、安装四、使用五、语法总结 前言 根据 DB-Engines 网站的数据库流行度排名&#xff08;2024年&#xff09;&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023