AI 助理
备案控制台
开发者社区 大数据 文章 正文

gitee开源商城diygw-mall

2024-10-18 36
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： gitee开源商城diygw-mall

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

⚡ 可视化截图

首页可视化生成源码

 

<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>














文章标签：
数据可视化
开发工具
小程序
diygwcom
目录
相关文章
a15034260562-24955
|
7月前
|
开发工具 数据安全/隐私保护 git
如何从Gitee中拉取项目到HBuilder中？
如何从Gitee中拉取项目到HBuilder中？
a15034260562-24955
124 1
小猫娃来啦
|
JSON 前端开发 JavaScript
前端（十七）——gitee上开源一个移动端礼盒商城项目（前端+后台）
前端（十七）——gitee上开源一个移动端礼盒商城项目（前端+后台）
小猫娃来啦
171 0
土木林森
|
2月前
|
弹性计算 监控 安全
在Gitee的开源项目部署上阿里云并发布部署脚本到Gitee代码仓库
在Gitee的开源项目部署上阿里云并发布部署脚本到Gitee代码仓库
土木林森
118 0
vohelon
|
5月前
|
弹性计算 Serverless 持续交付
聊聊如何把项目从Gitee部署到阿里云上
【7月更文挑战第11天】聊聊如何把项目从Gitee部署到阿里云上
vohelon
168 1
换个网名有点难
|
5月前
|
前端开发 Java 数据库连接
热门开源项目推荐~商城系统mall项目详细介绍
热门开源项目推荐~商城系统mall项目详细介绍
换个网名有点难
135 0
她说她一如既往的爱我
|
6月前
gitee如何多人开发 ？
gitee如何多人开发 ？
她说她一如既往的爱我
62 2
JavaPub
|
6月前
|
JavaScript 开发工具 git
基于 Gitee 搭建个人网站-入门教程
基于 Gitee 搭建个人网站-入门教程
JavaPub
153 0
宁波阿成.
|
7月前
|
移动开发 前端开发
nbcio-boot如何进行gitee第三方登录
nbcio-boot如何进行gitee第三方登录
宁波阿成.
40 0
小蜗牛耶
|
7月前
|
前端开发 NoSQL Java
Github开源项目详解--Mall（一）
Github开源项目详解--Mall（一）
小蜗牛耶
148 0
宁在春
|
7月前
|
JSON 安全 Java
SpringBoot 整合 JustAuth 实现第三方登录 | gitee登录
SpringBoot 整合 JustAuth 实现第三方登录 | gitee登录
宁在春
358 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 3
    Spring-boot+Dubbo应用启停源码分析
  • 4
    分享一些OpenStack的qcow2格式实例镜像
  • 5
    基于区块链的机器学习模型创建方案
  • 6
    微信web开发者工具无法打开的六种解决方法
  • 7
    RocketMq-Request-Reply消息
  • 8
    [译] 构建世界上最快的会议网站
  • 9
    " "(双引号)与 ' '(单引号)的区别
  • 10
    自定义高效支持点击监听的RecyclerView
  • 1
    AI在电子商务中的个性化推荐系统：驱动用户体验升级
    29
  • 2
    基于AI的网络流量分析：构建智能化运维体系
    26
  • 3
    鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0（Next）】
    25
  • 4
    HarmonyOS 5.0 （Next）应用开发实战：使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0（Next）】
    30
  • 5
    开箱即用的个人主页页面开发实战—基于HarmonyOS 5.0 （Next）和ArkTS的实现【HarmonyOS 5.0（Next）】
    32
  • 6
    《Java 在 3D 视觉与重建领域：开启无限可能之旅》
    22
  • 7
    《Java 情感分析：前沿技术与方法全解析》
    26
  • 8
    《GraalVM：Java AI 应用性能与启动速度的优化利器》
    22
  • 9
    《探索 Apache Spark MLlib 与 Java 结合的卓越之道》
    19
  • 10
    云产品评测
    21

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks售前咨询