diff --git a/dist.zip b/dist.zip new file mode 100644 index 0000000..953b724 Binary files /dev/null and b/dist.zip differ diff --git a/public/assets/img/tc-zwsj.png b/public/assets/img/tc-zwsj.png new file mode 100644 index 0000000..06a2819 Binary files /dev/null and b/public/assets/img/tc-zwsj.png differ diff --git a/public/assets/img/tm-bj.png b/public/assets/img/tm-bj.png new file mode 100644 index 0000000..e83c38c Binary files /dev/null and b/public/assets/img/tm-bj.png differ diff --git a/public/assets/img/tm-bottom-box1-icon1.png b/public/assets/img/tm-bottom-box1-icon1.png new file mode 100644 index 0000000..ae0b8ce Binary files /dev/null and b/public/assets/img/tm-bottom-box1-icon1.png differ diff --git a/public/assets/img/tm-bottom-box1-icon2.png b/public/assets/img/tm-bottom-box1-icon2.png new file mode 100644 index 0000000..ccf3584 Binary files /dev/null and b/public/assets/img/tm-bottom-box1-icon2.png differ diff --git a/public/assets/img/tm-bottom-box1-icon3.png b/public/assets/img/tm-bottom-box1-icon3.png new file mode 100644 index 0000000..94cdef7 Binary files /dev/null and b/public/assets/img/tm-bottom-box1-icon3.png differ diff --git a/public/assets/img/tm-bottom-box2-icon1.png b/public/assets/img/tm-bottom-box2-icon1.png new file mode 100644 index 0000000..6ef070c Binary files /dev/null and b/public/assets/img/tm-bottom-box2-icon1.png differ diff --git a/public/assets/img/tm-bottom-box2-icon2.png b/public/assets/img/tm-bottom-box2-icon2.png new file mode 100644 index 0000000..68f23f1 Binary files /dev/null and b/public/assets/img/tm-bottom-box2-icon2.png differ diff --git a/public/assets/img/tm-bottom-box2-icon3.png b/public/assets/img/tm-bottom-box2-icon3.png new file mode 100644 index 0000000..3f85bf0 Binary files /dev/null and b/public/assets/img/tm-bottom-box2-icon3.png differ diff --git a/public/assets/img/tm-bottom-box2-icon4.png b/public/assets/img/tm-bottom-box2-icon4.png new file mode 100644 index 0000000..5cf2b3d Binary files /dev/null and b/public/assets/img/tm-bottom-box2-icon4.png differ diff --git a/public/assets/img/tm-bottom-box2-icon5.png b/public/assets/img/tm-bottom-box2-icon5.png new file mode 100644 index 0000000..5849d1a Binary files /dev/null and b/public/assets/img/tm-bottom-box2-icon5.png differ diff --git a/public/assets/img/tm-bottom-box2-icon6.png b/public/assets/img/tm-bottom-box2-icon6.png new file mode 100644 index 0000000..b0f87d7 Binary files /dev/null and b/public/assets/img/tm-bottom-box2-icon6.png differ diff --git a/public/assets/img/tm-hh.png b/public/assets/img/tm-hh.png new file mode 100644 index 0000000..cabeb17 Binary files /dev/null and b/public/assets/img/tm-hh.png differ diff --git a/public/assets/img/tm-title-left.png b/public/assets/img/tm-title-left.png new file mode 100644 index 0000000..d4ab2f0 Binary files /dev/null and b/public/assets/img/tm-title-left.png differ diff --git a/public/assets/img/tm-title-right.png b/public/assets/img/tm-title-right.png new file mode 100644 index 0000000..e152c88 Binary files /dev/null and b/public/assets/img/tm-title-right.png differ diff --git a/public/assets/img/tm-top-icon1.png b/public/assets/img/tm-top-icon1.png new file mode 100644 index 0000000..0fc0cfd Binary files /dev/null and b/public/assets/img/tm-top-icon1.png differ diff --git a/src/components/AppDZSoftware.vue b/src/components/AppDZSoftware.vue index 241e3fc..8d2c293 100644 --- a/src/components/AppDZSoftware.vue +++ b/src/components/AppDZSoftware.vue @@ -30,8 +30,8 @@
  • 在华为、应用宝、小米、OPPO、VIVO、阿里、360、百度、荣耀、穿山甲等 App应用市场,App软著认证电子版权都可作为 App上架时的有效版权证明。
    • - 立即申请→ - 联系客服→ + 立即申请→ + 联系客服→ diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue index abf7709..bde2f7c 100644 --- a/src/components/HeaderNav.vue +++ b/src/components/HeaderNav.vue @@ -12,12 +12,12 @@
  • 首页
  • 收费介绍
    • - +
  • App电子软著
    • +
  • 商标注册
  • 客服中心
  • 证书展示
    • - +
  • 交易中心
  • 帮助中心
    • @@ -266,6 +266,7 @@ export default { height: 1rem; line-height: 1rem; width: 8.4rem; + /* width: 9.4rem; */ } .header-nav .nav ul { display: flex; diff --git a/src/components/TM.vue b/src/components/TM.vue index e9dc25e..104deae 100644 --- a/src/components/TM.vue +++ b/src/components/TM.vue @@ -2,15 +2,224 @@
    -

    商标注册

    -

    1天送报商标局 一个月拿到受理通知书

    +
    +

    商标注册

    + 快速办理 +
    +
    +

    1天送报商标局 一个月拿到受理通知书

    +
    +
    + 国家商标局备案机关 + 价格透明无隐形收费 +
    -
    -
    -
    +
    +
    +
    +
    商标注册
    +
    +
    +
      +
    • + +
      {{ item.title }}
      +
      +

      {{ item.p1 }}

      +

      {{ item.p2 }}

      +
      + ￥{{ item.price }} + {{ item.aTitle }} +
      • + + +
    +
    +

    先查询后注册，有效提高注册通过率

    +
    +
    +
    +
    +
    +
    服务优势
    +
    +
    +
      +
    • + +
      + {{ item2.title }} +
      +

      {{ item2.p }}

      +
      • + + +
    +
    +
    +
    +
    +
    商标注册流程
    +
    +
    +
      +
    • + {{ item3Top.time }} +
      +

      {{ item3Top.p1 }}

      +

      {{ item3Top.p2 }}

      +
      +
      • + +
    +
      +
    • +
      + + {{ item3Bottom.number }} + +
      +
      +
      {{ item3Bottom.title }}
      +
      +
      • + +
    +
    @@ -18,7 +227,143 @@ @@ -37,68 +382,408 @@ export default { justify-content: center; flex-direction: column; width: 100%; - height: 7.5625rem; - background: url(/assets/img/zhengshu-bj.png) no-repeat; + height: 5rem; + background: url(/assets/img/tm-bj.png) no-repeat; background-size: cover; } .tm .box-top .title { display: flex; flex-direction: column; - justify-content: center; - width: 12.5rem; - height: 1.875rem; + justify-content: flex-end; + width: 15rem; + height: 2.6rem; margin: 0 auto; /* border: 2px solid red; */ + padding-left: .2rem; } -.tm .box-top h4 { - width: 6.25rem; - font-size: .375rem; +.tm .box-top .title .row1 { + display: flex; + flex-wrap: wrap; + justify-content: start; + align-content: center; + width: 7rem; + height: .8rem; + /* background-color: skyblue; */ + margin-bottom: .05rem; +} +.tm .box-top .title .row1 h4 { + /* height: .8rem; + line-height: .8rem; */ + font-size: .5rem; color: #74491a; - margin-bottom: .125rem; + font-weight: 700; } -.tm .box-top p { - width: 6.25rem; +.tm .box-top .title .row1 em { + display: block; + width: 1.5rem; + height: .5rem; + line-height: .4rem; + text-align: center; + color: #FFF; + background: url(/assets/img/tm-top-icon1.png) no-repeat; + background-size: contain; + margin: auto 0; +} +.tm .box-top .title .row2 { + width: 7rem; + height: .4rem; +} +.tm .box-top .title .row2 p { + width: 7rem; font-size: .2rem; - letter-spacing: .0625rem; - color: #9a7148; + letter-spacing: .025rem; + color: #603813; +} +.tm .box-top .title .row3 { + display: flex; + justify-content: start; + width: 7rem; + height: .7rem; +} +.tm .box-top .title .row3 span { + display: block; + width: 3rem; + height: .7rem; + line-height: .7rem; + text-align: center; + background: #603813; + margin-right: .1rem; + font-size: .22rem; + color: #FFF; } .tm .box-bottom { position: relative; display: flex; justify-content: center; width: 100%; - height: 13rem; - background-color: #f5f5f5; + height: 24rem; + background-color: #f6f6f5; } .tm .box-bottom .box { /* position: absolute; */ position: relative; - top: -2.5rem; + top: -0.4rem; bottom: .625rem; display: flex; flex-direction: column; - justify-content: space-between; - width: 12.5rem; - height: 13rem; - background-color: #FFF; - padding: .5rem; + justify-content: start; + width: 15rem; + height: 23.5rem; + background-color: #f6f6f5; + /* border: 1px solid #333; */ + /* padding: .5rem; -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1); -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1); - box-shadow: 0 0 .125rem rgba(0,0,0,.1); + box-shadow: 0 0 .125rem rgba(0,0,0,.1); */ } .tm .box-bottom .box .box1 { + position: relative; + display: flex; + flex-direction: column; width: 100%; + height: 8.3rem; + /* background-color: pink; */ +} +.tm .box-bottom .box .box1 .toptitle { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + width: 100%; + height: .8rem; + background-color: #f6f6f5; +} +.tm .box-bottom .box .box1 .toptitle .left { + width: .6375rem; + height: .1625rem; + background: url(/assets/img/tm-title-left.png) no-repeat; + background-size: contain; + margin: 0.3187rem 0; +} +.tm .box-bottom .box .box1 .toptitle h5 { + height: .8rem; + line-height: .8rem; + font-size: .26rem; + font-weight: 700; + color: #333; + margin: auto .1rem; +} +.tm .box-bottom .box .box1 .toptitle .right { + width: .6375rem; + height: .1625rem; + background: url(/assets/img/tm-title-right.png) no-repeat; + background-size: contain; + margin: 0.3187rem 0; +} +.tm .box-bottom .box .box1 .box1ul { + display: flex; + justify-content: space-between; + width: 100%; + height: 7.5rem; + background-color: #FFF; +} +.tm .box-bottom .box .box1 .box1ul li { + width: 4.5rem; + padding: .5rem; +} +.tm .box-bottom .box .box1 .box1ul img { + width: 3rem; height: 3rem; - background-color: pink; + margin: 0 .25rem; +} +.tm .box-bottom .box .box1 .box1ul h5 { + width: 3.5rem; + text-align: center; + font-size: .25rem; + font-weight: 700; + color: #333; + margin-top: .2rem; +} +.tm .box-bottom .box .box1 .box1ul .text { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + margin-top: .2rem; + width: 3.5rem; + height: .7rem; + font-size: .1875rem; + color: #979797; +} +.tm .box-bottom .box .box1 .box1ul span { + display: block; + height: .5rem; + text-align: center; + color: #ed1c24; + font-size: 0.1875rem; + font-weight: 700; +} +.tm .box-bottom .box .box1 .box1ul span em { + font-size: 0.250rem; +} +.tm .box-bottom .box .box1 .box1ul a { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + background-color: #42210b; + color: #FFF; + width: 1.5rem; + height: .5rem; + /* text-align: center; */ + border-radius: .25rem; + margin: 0 auto; +} +.tm .box-bottom .box .box1 .bottomtext { + display: block; + position: absolute; + bottom: .3rem; + width: 100%; + text-align: center; + font-size: .2rem; + font-weight: 700; } .tm .box-bottom .box .box2 { width: 100%; + height: 9rem; + background-color: #FFF; +} +.tm .box-bottom .box .box2 .toptitle { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + width: 100%; + height: .8rem; + background-color: #f6f6f5; +} +.tm .box-bottom .box .box2 .toptitle .left { + width: .6375rem; + height: .1625rem; + background: url(/assets/img/tm-title-left.png) no-repeat; + background-size: contain; + margin: 0.3187rem 0; +} +.tm .box-bottom .box .box2 .toptitle h5 { + height: .8rem; + line-height: .8rem; + font-size: .26rem; + font-weight: 700; + color: #333; + margin: auto .1rem; +} +.tm .box-bottom .box .box2 .toptitle .right { + width: .6375rem; + height: .1625rem; + background: url(/assets/img/tm-title-right.png) no-repeat; + background-size: contain; + margin: 0.3187rem 0; +} +.tm .box-bottom .box .box2 .box2ul { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-content: space-between; + width: 100%; + height: 8rem; + padding: .5rem; + /* background-color: gray; */ +} +.tm .box-bottom .box .box2 .box2ul li { + display: flex; + flex-direction: column; + justify-content: space-between; + align-content: center; + width: 4.2rem; height: 3rem; - background-color: pink; + /* border: 1px solid pink; */ +} +.tm .box-bottom .box .box2 .box2ul li img { + width: 1.5rem; + height: 1.5rem; + margin: 0 1.35rem; +} +.tm .box-bottom .box .box2 .box2ul li .icontitle { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + height: .5rem; +} +.tm .box-bottom .box .box2 .box2ul li .icontitle em { + font-size: .225rem; + margin-right: 0.05rem; + color: #000000; +} +.tm .box-bottom .box .box2 .box2ul li .icontitle i { + width: .2rem; + height: .2rem; + background: url(/assets/img/tm-hh.png) no-repeat; + background-size: contain; +} +.tm .box-bottom .box .box2 .box2ul li p { + display: flex; + flex-wrap: wrap; + font-size: .2rem; + color: #3e3e3e; } .tm .box-bottom .box .box3 { + width: 100%; + height: 6rem; + background-color: #FFF; +} +.tm .box-bottom .box .box3 .toptitle { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + width: 100%; + height: .8rem; + background-color: #f6f6f5; +} +.tm .box-bottom .box .box3 .toptitle .left { + width: .6375rem; + height: .1625rem; + background: url(/assets/img/tm-title-left.png) no-repeat; + background-size: contain; + margin: 0.3187rem 0; +} +.tm .box-bottom .box .box3 .toptitle h5 { + height: .8rem; + line-height: .8rem; + font-size: .26rem; + font-weight: 700; + color: #333; + margin: auto .1rem; +} +.tm .box-bottom .box .box3 .toptitle .right { + width: .6375rem; + height: .1625rem; + background: url(/assets/img/tm-title-right.png) no-repeat; + background-size: contain; + margin: 0.3187rem 0; +} +.tm .box-bottom .box .box3 .box3ul { + display: flex; + justify-content: space-around; width: 100%; height: 3rem; - background-color: pink; + padding: .5rem 1.4375rem; +} +.tm .box-bottom .box .box3 .box3ul li { + /* width: 1.125rem; */ + width: 1.25rem; +} +.tm .box-bottom .box .box3 .box3ul li em { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + width: 1.125rem; + height: 1.125rem; + margin: 0 0.0625rem; + border-radius: 0.625rem; + background-color: #ed1c24; + color: #FFF; + font-size: .25rem; + margin-bottom: .15rem; +} +.tm .box-bottom .box .box3 .box3ul li .text { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; +} +.tm .box-bottom .box .box3 .box3ul li p { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + font-size: .175rem; + color: #4d4d4d; +} +.tm .box-bottom .box .box3 .box3ul2 { + display: flex; + /* flex-wrap: wrap; */ + justify-content: start; + align-content: center; + width: 100%; + height: 2rem; + padding: 0 .15rem; +} +.tm .box-bottom .box .box3 .box3ul2 li { + width: 2.1rem; + box-sizing: inherit !important; +} +.tm .box-bottom .box .box3 .box3ul2 li .mod1 { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; +} +.tm .box-bottom .box .box3 .box3ul2 li .mod1 span { + display: block; + width: .7875rem; + height: .025rem; + margin: auto; + background: #ed1c24; +} +.tm .box-bottom .box .box3 .box3ul2 li .mod1 em { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + width: .5rem; + height: .5rem; + border-radius: .25rem; + border: 0.0125rem solid #ed1c24; +} +.tm .box-bottom .box .box3 .box3ul2 li .mod2 { + width: 2.1rem; + height: .8rem; + line-height: .8rem; + font-size: .25rem; + font-weight: 700; + text-align: center; } \ No newline at end of file diff --git a/src/components/TransactionCenter copy.vue b/src/components/TransactionCenter copy.vue new file mode 100644 index 0000000..dfc0897 --- /dev/null +++ b/src/components/TransactionCenter copy.vue @@ -0,0 +1,853 @@ + + + + + \ No newline at end of file diff --git a/src/components/TransactionCenter.vue b/src/components/TransactionCenter.vue index 0ac1e93..296cbb4 100644 --- a/src/components/TransactionCenter.vue +++ b/src/components/TransactionCenter.vue @@ -16,13 +16,13 @@ 著作权分类：
    -
    +
    软著名称： - + - 下证时间： - - - -   - - - + 价格区间： + +  -  +
    -
    +
    -

    AI著作权名称

    - 医药类 + {{ specialOfferItem.goodsTypeName || '暂无分类' }} +

    {{ specialOfferItem.goodsName || '暂无软著名称' }}

    -

    著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述

    +

    {{ specialOfferItem.goodsDescription || '暂无著作权描述' }}

    -

    ￥298.00/件

    +

    ￥{{ (specialOfferItem.goodsOpenPrice || 0).toFixed(2) }}/件

    立即抢购
    + +
    +
    +
    +
    + 暂无分类 +

    暂无特价软著

    +
    +
    +

    暂无软著说明

    +
    +
    +
    +

    ￥暂无价格/件

    + 立即抢购 +
    +
    +
    -

    共有2023445个搜索结果

    -

    今日共有10个特价软著

    +

    共有{{ total }}个搜索结果

    +

    今日共有{{ total }}个特价软著

    -
    +
    + +
      +
    • +
      + + 软著图片 + 特价 + 截止日期：{{ row.goodsLastTime }} +
      +

      {{ row.goodsName }}

      + ￥{{ row.goodsOpenPrice }} +
      • +
      + +
      +
    + 去购买 + +
    + + -
    - - - - - - - - - -
    +
    -->
    + + +
    +
    +
    + + 放大图片 +
    +
    + @@ -202,27 +274,27 @@ export default { return { currentModule: 'mod1', // 初始模块为 mod1 - sorts: ['全部', '医药类', '教育类', '工业类', '政务类', '财税类', '金融类', '通信类', '能源类', '交通类', '信息类', '语音类'], + sorts: [], // 动态加载的分类数据 + selectedSortId: '', // 选中分类的ID + selectedSortName: '全部', // 选中分类的名称，用于显示 maxVisible1: 9, showMore1: false, selectedSort: '全部', - - languages: [ - 'Java', 'C语言', 'C++', 'JavaScript', 'Python', '安卓', '鸿蒙HarmonyOS4.0', 'HTML', 'CSS', - ], + keywords: '', // 软著名称（对应后端参数keywords） + // goodsName: '', // 软著名称（对应后端参数goodsName） + goodsType: '', // 著作权分类（对应后端参数goodsType） + priceRangeStart: '', // 最低价格 + priceRangeEnd: '', // 最高价格 + // languages: [ + // 'Java', 'C语言', 'C++', 'JavaScript', 'Python', '安卓', '鸿蒙HarmonyOS4.0', 'HTML', 'CSS', + // ], maxVisible: 8, // 最大可见按钮数量 showMore: false, // 控制弹出层的显示 selectedLanguage: 'Java', // 选中的省份 - searchName: '', // 软著名称 - startDate: '', // 下证开始时间 - endDate: '', // 下证结束时间 - // startDateString: '', - // endDateString: '', - startDateString: new Date().toISOString().split('T')[0], - // endDateString: new Date().toISOString().split('T')[0], - endDateString: new Date(new Date().setMonth(new Date().getMonth() + 1)).toISOString().split('T')[0], // 设置一个月之后的日期作为默认值 - // endDateString: format(new Date(new Date().getTime() + 10 * 24 * 60 * 60 * 1000), 'yyyy-MM-dd'), // 设置10天之后的日期作为默认值 + loading: false, // 添加加载状态变量 + // imageBaseUrl: 'http://121.36.71.250:58038/aishop/route/file/download/true/', + imageBaseUrl: 'https://www.aimzhu.com/aishop/route/file/download/true/', // 图片基础URL startPickerOptions: { disabledDate: (time) => { @@ -240,16 +312,22 @@ export default { return false; }, }, - + goodsFlagIsNull: null, tableData: [], // 表格数据 currentPage: 1, // 当前页码 - pageSize: 10, // 每页显示条数 + pageSize: 8, // 每页显示条数 total: 0, // 总数据条数 + specialOfferItem: null, // 存储今日特价第一条数据 + isFetching: false, // 防止重复请求 + // 图片放大相关 + isImageModalVisible: false, + currentLargeImage: '', pickerOptions: { style: { border: '1px solid red' } + } }; @@ -265,160 +343,311 @@ export default { return this.sorts.length > this.maxVisible1; }, - visibleLanguages() { - return this.languages.slice(0, this.maxVisible); - }, - hiddenLanguages() { - return this.languages.slice(this.maxVisible); - }, - hasMoreLanguages() { - return this.languages.length > this.maxVisible; + // visibleLanguages() { + // return this.languages.slice(0, this.maxVisible); + // }, + // hiddenLanguages() { + // return this.languages.slice(this.maxVisible); + // }, + // hasMoreLanguages() { + // return this.languages.length > this.maxVisible; + // }, + + // 构建请求URL + requestUrl() { + if (this.currentModule === 'mod1') { + // 软著交易中心 + return 'https://www.aimzhu.com/aishop/app/goodsonline/listpagerelease?goodsFlagIsNull=Null'; + } else { + // 今日特价软著 + return 'https://www.aimzhu.com/aishop/app/goodsonline/listpagerelease'; + // return 'http://121.36.71.250:58038/aishop/app/goodsonline/listpagerelease'; + } }, + + // 构建请求参数 + requestParams() { + const params = { + priceOrder: 'DESC' + }; + + if (this.currentModule === 'mod2') { + params.goodsFlag = '特价'; + } + + // 软著交易中心参数 + if (this.currentModule === 'mod1') { + if (this.keywords) params.keywords = this.keywords; + if (this.goodsType) params.goodsType = this.goodsType; + if (this.priceRangeStart) params.priceRangeStart = this.priceRangeStart; + if (this.priceRangeEnd) params.priceRangeEnd = this.priceRangeEnd; + } + // 分页参数 + params.page = this.currentPage; + params.rows = this.pageSize; + + return params; + } + }, methods: { + // 加载著作权分类数据 + async loadSortData() { + try { + const response = await axios.get('https://www.aimzhu.com/aishop/app/data/listbyparentidrelease/0b00884a-f7a2-425f-93e5-599fbaad4bde'); + // 处理分类数据，添加"全部"选项 + this.sorts = [ + { dataId: '', dataName: '全部' }, + ...response.data + ]; + this.selectedSortId = ''; + this.selectedSortName = '全部'; + + // // 分类数据加载完成后再加载软著数据 + await this.loadSoftwares(); + } catch (error) { + console.error('加载分类数据失败:', error); + this.$message.error('加载著作权分类失败！'); + this.sorts = [ + { dataId: '', dataName: '全部' }, + { dataId: '9984ff58-ab4a-4f6d-9116-955ebd6c5836', dataName: '医药类' }, + { dataId: '7c9dd59b-537f-4498-b717-39b2de643506', dataName: '计算机信息' }, + { dataId: 'e75bfdf9-fbb9-40a2-9500-9c73db9703dc', dataName: '工业类' }, + { dataId: '1eaa5ff4-4fff-4f43-84dd-495819e125b8', dataName: '教育类' }, + { dataId: '446c1e0f-e3ca-4f64-9279-b55c574b82c5', dataName: '金融财经类' }, + { dataId: 'bac183ad-c3f4-49fb-863e-d2eaf8bf9b27', dataName: '应用软件' }, + { dataId: 'ce012cdc-f9fa-4e08-94fb-eba495d454ce', dataName: '农业类' }, + ]; + this.selectedSortId = ''; + this.selectedSortName = '全部'; + // await this.loadSoftwares(); + } + }, + + // 新增方法：加载置顶特价软著 + async loadTopSpecialOffer() { + try { + const params = { + goodsFlags: '特价,置顶', + page: 1, + rows: 1 + }; + const response = await axios.get( + 'https://www.aimzhu.com/aishop/app/goodsonline/listpagerelease', + { params } + ); + + if (response.data && response.data.rows && response.data.rows.length > 0) { + this.specialOfferItem = { + ...response.data.rows[0], + goodsTypeName: this.getTypeName(response.data.rows[0].goodsType) + }; + console.log(this.specialOfferItem) + } else { + this.specialOfferItem = null; + } + } catch (error) { + console.error('加载置顶特价软著失败:', error); + this.specialOfferItem = null; + } + }, + + // // 加载软著数据 + // async loadSoftwares() { + // this.loading = true; + // try { + // // 拼接请求URL和参数 + // const searchParams = new URLSearchParams(this.requestParams); + // const url = `${this.requestUrl}?${searchParams.toString()}`; + // const response = await axios.get(url); + // console.log('接口返回数据:', response.data); + + // if (response.data && response.data.rows) { + // this.tableData = response.data.rows; + // this.total = response.data.total || 0; + + // // 处理今日特价模块的第一条数据 + // if (this.currentModule === 'mod2' && this.tableData.length > 0) { + // this.specialOfferItem = { + // ...this.tableData[0], + // // 将分类ID转换为名称 + // goodsTypeName: this.getTypeName(this.tableData[0].goodsTypeName) + // }; + // } else { + // this.specialOfferItem = null; + // } + + // } else { + // this.tableData = []; + // this.total = 0; + // this.specialOfferItem = null; + // } + // } catch (error) { + // console.error('加载软著数据失败:', error); + // this.$message.error('加载软著数据失败！'); + // this.tableData = []; + // this.total = 0; + // } finally { + // this.loading = false; + // } + // }, + + // 修改后的加载软著数据方法 + async loadSoftwares() { + this.loading = true; + try { + // 构建基础参数 + const baseParams = { + page: this.currentPage, + rows: this.pageSize, + priceOrder: 'DESC' + }; + + // 根据不同模块添加不同参数 + if (this.currentModule === 'mod1') { + // 软著交易中心参数 + Object.assign(baseParams, { + goodsFlagIsNull: 'Null', + keywords: this.keywords, + goodsType: this.goodsType, + priceRangeStart: this.priceRangeStart, + priceRangeEnd: this.priceRangeEnd + }); + } else if (this.currentModule === 'mod2') { + // 今日特价软著参数 + baseParams.goodsFlag = '特价'; + } + this.tableData = [] + // 发送请求 + const response = await axios.get( + 'https://www.aimzhu.com/aishop/app/goodsonline/listpagerelease', + { params: baseParams } + ); + + if (response.data && response.data.rows) { + this.tableData = response.data.rows; + this.total = response.data.total || 0; + + // 如果是今日特价模块，单独加载置顶数据 + if (this.currentModule === 'mod2') { + this.loadTopSpecialOffer(); + } + } else { + this.tableData = []; + this.total = 0; + } + } catch (error) { + console.error('加载软著数据失败:', error); + this.tableData = []; + this.total = 0; + } finally { + this.loading = false; + } + }, + + // 根据ID获取分类名称 + getTypeName(typeIds) { + if (!typeIds || typeIds === '') return ''; + + const typeIdArray = typeIds.split(','); + const typeNames = typeIdArray.map(id => { + const type = this.sorts.find(sort => sort.dataId === id); + return type ? type.dataName : id; + }); + + return typeNames.join('、'); + }, + + // 模块切换 selectModule(module) { + if (this.currentModule === module) return; + this.currentModule = module; + this.currentPage = 1; // 重置页码 const mod1 = document.querySelector('.mod1') const mod2 = document.querySelector('.mod2') - // 根据当前模块切换内容 - const content1 = '.content1'; - const content2 = '.content2'; - const content11 = '.content11'; - const content22 = '.content22'; - const content111 = '.content111'; - const content222 = '.content222'; + if (this.currentModule === 'mod1') { - // 软著交易中心激活 $(mod1).addClass('active').siblings().removeClass('active') - $(content1).show(); - $(content11).show(); - $(content111).show(); - $(content2).hide(); - $(content22).hide(); - $(content222).hide(); + $('.content1').show(); + $('.content2').hide(); } else if (this.currentModule === 'mod2') { - // 今日特价软著激活 $(mod2).addClass('active').siblings().removeClass('active') - $(content1).hide(); - $(content11).hide(); - $(content111).hide(); - $(content2).show(); - $(content22).show(); - $(content222).show(); - } - - }, - - selectSort(sort) { - this.selectedSort = sort; - this.showMore1 = false; // 选择省份后关闭弹出层 - // 这里可以执行其他逻辑，例如通知父组件 - }, - - selectLanguage(language) { - this.selectedLanguage = language; - this.showMore = false; // 选择省份后关闭弹出层 - // 这里可以执行其他逻辑，例如通知父组件 - }, - handleStartDateChange(value) { - // if (!value) { - // value = new Date(); // 设置当前日期作为默认值 - // // this.startDateString = format(value, 'yyyy-MM-dd'); - // } - if (value) { - this.startDateString = format(value, 'yyyy-MM-dd'); - - // // 如果开始日期大于截止日期，重置截止日期为开始日期之前的一天 - // if (this.startDateString && value.getTime() > this.endDateString.getTime()) { - // this.endDateString = new Date(value.getTime() - 24 * 60 * 60 * 1000); // 减一天 - // this.endDateString = format(this.endDateString, 'yyyy-MM-dd'); - // } - } - }, - handleEndDateChange(value) { - // if (!value) { - // value = new Date(); // 设置当前日期作为默认值 - // // this.endDateString = format(value, 'yyyy-MM-dd'); - // } - if (value) { - this.endDateString = format(value, 'yyyy-MM-dd'); - } - }, - formatDate(date) { - if (date) { - return format(date, 'yyyy-MM-dd'); - } - return ''; - }, - - search() { - if (this.startDateString && this.endDateString) { - const startTime = new Date(this.startDateString).getTime(); - const endTime = new Date(this.endDateString).getTime(); - - console.log('开始日期:', this.startDateString); - console.log('结束日期:', this.endDateString); - - if (startTime >= endTime) { - this.$message.error('开始日期必须早于截止日期，请重新选择日期！'); - layer.tips('开始日期必须早于截止日期，请重新选择日期！', '#startDate',{ - shadeClose: false, - tips: [3, 'red'], - time: 2000, - area: ['auto', '40px'], - show: true - }) - // layer.msg('开始日期必须早于截止日期，请重新选择日期！',{ - // icon: 2, - // time: 2000, - // }) - return; - } - - const params = { - softwareName: this.searchName, - // startDate: this.startDate, - startDate: this.startDateString, - endDate: this.endDateString, - sort: this.selectedSort, - Language: this.selectedLanguage - }; - // 使用 axios 发送请求 - axios.post('/api/search', params) - .then(response => { - // 处理响应数据 - console.log(response.data); - }) - .catch(error => { - // 处理错误 - console.error('Error:', error); - }) - .finally(() => { - // 无论成功或失败，都会执行 - console.log('Search request completed.'); - }); - // 在这里打印请求的 data，以便在控制台查看 - console.log('Search request data:', params); - + $('.content1').hide(); + $('.content2').show(); } + // 重置特殊项 + // this.specialOfferItem = null; + // 加载对应模块的数据 + this.loadSoftwares(); }, + // 选择分类 + selectSort(sort) { + this.selectedSortId = sort.dataId; + this.selectedSortName = sort.dataName; + this.goodsType = sort.dataId; // 将选中的分类ID赋值给goodsType参数 + this.showMore1 = false; + this.currentPage = 1; // 重置页码 + this.loadSoftwares(); // 重新加载数据 + }, + + // 搜索 + search() { + this.currentPage = 1; // 重置页码 + this.loadSoftwares(); // 加载数据 + }, + + // 重置搜索条件 resetAll() { - this.selectedSort = '全部'; - this.selectedLanguage = 'Java'; - this.searchName = ''; - this.startDate = ''; - this.endDate = ''; - this.startDateString = new Date().toISOString().split('T')[0]; // 重置开始日期为当前日期 - this.endDateString = new Date(new Date().setMonth(new Date().getMonth() + 1)).toISOString().split('T')[0]; // 重置结束日期为一个月之后的日期 + this.selectedSortId = ''; + this.goodsType = ''; + this.keywords = ''; + this.priceRangeStart = ''; + this.priceRangeEnd = ''; + this.currentPage = 1; + this.loadSoftwares(); + }, + // 分页相关方法 + handleSizeChange(newSize) { + this.pageSize = newSize; + this.loadSoftwares(); + }, + + handleCurrentChange(newPage) { + this.currentPage = newPage; + this.loadSoftwares(); + }, + // 去购买 + goBuy() { + window.location.href = `https://www.aimzhu.com/operator/`; + }, + // 处理图片URL的方法 + getImageUrl(photoId) { + if (!photoId) { + return '/assets/img/zhengshu.png'; // 图片不存在时显示默认图片 + } + return `${this.imageBaseUrl}/${photoId}`; // 拼接完整的图片URL + }, + // 图片放大相关方法 + openImageModal(photoId) { + if (!photoId) return; + this.currentLargeImage = this.getImageUrl(photoId); + this.isImageModalVisible = true; + }, + closeImageModal() { + this.isImageModalVisible = false; }, - - }, + + mounted() { + this.loadSortData(); // 加载分类数据 + // this.loadNormalSoftwares(); // 加载软著数据 + } } @@ -459,7 +688,7 @@ export default { } .center .box1 { width: 100%; - height: 3.45rem; + max-height: 3.45rem; background-color: #fff; box-shadow: 0 0 .1875rem rgba(0,0,0,.1); } @@ -493,7 +722,7 @@ export default { } .center .box1 .content1 { width: 15rem; - height: 2.825rem; + max-height: 2.825rem; padding: .125rem; } /* .center .box1 .content1 .row2 .cssys { @@ -522,6 +751,8 @@ export default { margin-right: .1875rem; } .center .box1 .content1 .row3 span input { + text-indent: .1rem; + font-size: .175rem; border: .0125rem solid #CCC; border-radius: .05rem; color: #606266; @@ -547,7 +778,7 @@ input::-webkit-input-placeholder { outline: 0; } */ -.center .box1 .content1 .row3 span input[type=text] { +/* .center .box1 .content1 .row3 span input[type=text] { font-size: .1875rem; padding-left: .125rem; } @@ -558,7 +789,7 @@ input::-webkit-input-placeholder { .center .box1 .content1 .row3 span input[type=date]:hover, .center .box1 .content1 .row3 span input[type=date]:focus { border: .0125rem solid #CCC; -} +} */ /* .center .box1 .content1 .row3 span .startDate { height: 40px; @@ -701,32 +932,54 @@ input::-webkit-input-placeholder { } .center .box1 .content2 .bj .left .headline { display: flex; - flex-direction: row; - width: 100%; - height: 1rem; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-around; + /* width: 100%; */ + height: 1.2rem; /* background-color: pink; */ } .center .box1 .content2 .bj .left .headline h3 { height: .625rem; + max-width: 4.5rem; line-height: .625rem; - margin: .1875rem 0; + /* margin: .1875rem 0; */ color: #e79855; font-size: .35rem; font-weight: 700; - margin-right: .25rem; + margin-right: .1rem; /* background-color: skyblue; */ + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + line-clamp: 1; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; } .center .box1 .content2 .bj .left .headline em { - height: .45rem; - line-height: .45rem; + display: inline-block; + max-width: 4.5rem; + height: auto; + min-height: .4rem; + line-height: .4rem; padding: 0 .25rem; - margin: .275rem 0; + /* margin: .275rem 0; */ font-size: .1875rem; color: #FFF; background-color: #fa9641; - border-top-left-radius: .225rem; + border-radius: .2rem; + /* border-top-left-radius: .225rem; border-bottom-left-radius: .225rem; - border-top-right-radius: .2rem; + border-top-right-radius: .2rem; */ + white-space: normal; /* 允许文本换行 */ + word-break: break-all; /* 允许单词断开换行 */ + text-align: center; + overflow: hidden; /* 溢出隐藏 */ + text-overflow: ellipsis; /* 文本溢出显示省略号 */ + line-clamp: 1; + display: -webkit-box; + -webkit-line-clamp: 1; /* 最多显示1行 */ + -webkit-box-orient: vertical; } .center .box1 .content2 .bj .left .text p { font-size: .1875rem; @@ -786,8 +1039,152 @@ input::-webkit-input-placeholder { position: relative; margin-bottom: .375rem; } -.center .box3 .content111 .table { +/* .center .box3 .content111 .table { margin-bottom: .625rem; +} */ +.center .box3 .content111 .dataList { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-content: flex-start; + width: 100%; + min-height: 4.5rem; + max-height: 9rem; + background: #FFF; + margin-bottom: .2rem; + padding: 0 1rem; + -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1); + -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1); + box-shadow: 0 0 .125rem rgba(0,0,0,.1); +} +.center .box3 .content111 .dataList .zwsj { + width: 2.5rem; + height: 2.5rem; + margin: 1rem auto; +} +/* 图片放大模态框样式 */ +.image-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; +} +.modal-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); +} +.modal-content { + position: relative; + z-index: 1; + max-width: 80%; + max-height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +.modal-close { + position: absolute; + top: 10px; + right: 10px; + width: 30px; + height: 30px; + line-height: 30px; + text-align: center; + background-color: rgba(0, 0, 0, 0.5); + color: white; + border-radius: 50%; + cursor: pointer; + z-index: 2; +} +.modal-image { + width: 100%; + height: 100%; + border-radius: 4px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} +.center .box3 .content111 .dataList li { + width: 2.6rem; + height: 3.8rem; + /* margin-right: 0.8rem; */ + margin: 0.3rem 0.8rem 0.4rem 0; + -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1); + -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1); + box-shadow: 0 0 .125rem rgba(0,0,0,.1); +} +.center .box3 .content111 .dataList li:nth-child(4n) { + margin-right: 0; +} +.center .box3 .content111 .dataList li { + display: flex; + flex-direction: column; +} +.center .box3 .content111 .dataList li .content { + position: relative; + width: 2.6rem; + height: 3.1rem; +} +.center .box3 .content111 .dataList li .content img { + width: 100%; + height: 100%; +} +.center .box3 .content111 .dataList li .content i { + position: absolute; + top: 0; + right: 0; + width: .7rem; + height: .4rem; + line-height: .4rem; + font-size: .2rem; + text-align: center; + background: #ff9f08; + color: #FFF; + border-bottom-left-radius: .15rem; +} +.center .box3 .content111 .dataList li .content span { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: .4rem; + line-height: .4rem; + text-align: center; + background: rgba(0, 0, 0, 0.2); + font-size: .175rem; + color: #FFF; +} +.center .box3 .content111 .dataList li h3 { + width: 100%; + height: 0.35rem; + line-height: .35rem; + font-size: .2rem; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + line-clamp: 1; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + +} +.center .box3 .content111 .dataList li .price { + display: block; + width: 100%; + height: .35rem; + /* background: gray; */ + font-size: 0.175rem; + font-weight: 700; + color: #e30b0b; +} +.center .box3 .content111 .dataList li .price em { + font-size: 0.25rem; } .center .box3 .content111 .goBuy { position: absolute;