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…
阅读更多...
Linux !ko/5.17-BBRplus AMD64（X86_64）内核致命的 futex_wait 函数死锁问题。

Linux !ko/5.17-BBRplus AMD64（X86_64）内核致命的 futex_wait 函数死锁问题。

!ko 表示系统内核&#xff08;system-kernel&#xff09; 致命&#xff1a; 在 CentOS&#xff08;RedHat&#xff09;、Ubuntu、Debian 等多个发行版本 Linux 操作系统上&#xff0c;若人们升级 5.17-BBRplus 版本内核&#xff0c;那么在应用程式频繁的 futex_wait&#xff0…
阅读更多...
C++面试速通宝典——14

C++面试速通宝典——14

220. static关键字的作用 ‌‌‌‌　　static关键字在编程中有多种作用&#xff1a; 在类的成员变量前使用&#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 服务器上…
阅读更多...
【openwrt-21.02】T750 openwrt 出现nat46_ipv4_iput crash

【openwrt-21.02】T750 openwrt 出现nat46_ipv4_iput crash

Openwrt版本 NAME="OpenWrt" VERSION="21.02-SNAPSHOT" ID="openwrt" ID_LIKE="lede openwrt" PRETTY_NAME="OpenWrt 21.02-SNAPSHOT" VERSION_ID="21.02-snapshot" HOME_URL="https://openwrt.org/" …
阅读更多...
简单的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…
阅读更多...
深入浅出理解七层网络协议

深入浅出理解七层网络协议

目录 深入浅出理解七层网络协议OSI 七层模型概述七层协议详解1. 物理层&#xff08;Physical Layer&#xff09;2. 数据链路层&#xff08;Data Link Layer&#xff09;3. 网络层&#xff08;Network Layer&#xff09;4. 传输层&#xff08;Transport Layer&#xff09;5. 会话…
阅读更多...
蓝桥杯【物联网】零基础到国奖之路:十七. 扩展模块之单路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…
阅读更多...
使用AudioRelay+ VB-CABLE 实现手机无线麦克风及音响功能

使用AudioRelay+ VB-CABLE 实现手机无线麦克风及音响功能

我们有时会有这样的需求: 1、会议中,现场没有麦克风,有手机,有电脑,想直接用手机当用电脑的远程麦克风来使用 2、没有音响,但空间比较大、吵,电脑的声音不够大,要电脑的声音直接发到手机上播放. 这时 AudioRelay VB-CABLE 就可以满足&#xff0c;支持windows 以及macos 具体的…
阅读更多...
容器化技术：Docker的基本概念和使用

容器化技术：Docker的基本概念和使用

在现代软件开发和运维中&#xff0c;容器化技术已经成为一种不可或缺的工具。Docker作为容器化技术的代表&#xff0c;以其轻量级、可移植性和隔离性等特点&#xff0c;赢得了广泛的关注和应用。本文将详细介绍Docker的基本概念和使用方法&#xff0c;帮助读者快速上手Docker容…
阅读更多...
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…
阅读更多...
最新文章

Copyright @ 2022~2023