首页

<!DOCTYPE html> <html> <head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://new-subscription.chinadaily.com.cn/views/home/index.html","20240817170404","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1723914244"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="UTF-8"/> <link rel="shortcut icon" href="/web/20240817170404im_/https://new-subscription.chinadaily.com.cn/public_resource/wangzhan/web/public_resource/public/images/logo/m_logo_icon.png"/>  <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/assets/theme/index.css"/>  <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/styles/common.css"/> <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/views/home/styles/index.css"/> <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/components/webHead/index.css"/> <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/components/webFoot/index.css"/> <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/components/listItem/index.css"/> <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/components/rightToolBar/index.css"/> <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/components/chatContainer/index.css"/> <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/lib/featureCarousel/feature-carousel.css"/> <link rel="stylesheet" href="/web/20240817170404cs_/https://new-subscription.chinadaily.com.cn/lib/swiper-6.8.4/swiper-bundle.min.css"/> <link href="/web/20240817170404im_/https://new-subscription.chinadaily.com.cn/assets/img/favicon.ico" rel="shortcut icon" type="image/x-icon"> <title>首页</title> </head> <body> <div id="app" class="wrapper" v-cloak> <web-head @search="searchData" @webhead_search_input="webhead_search_input" ref="webhead"></web-head>   <div class="swiper-banner"> <div class="swiper" id="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item, index) in adList" :key="index" :data-swiper-autoplay="item.delay"> <img :src="item.bgImg" alt=""> </div> </div> </div> </div>  <div class="container my-subscribe" style="flex-direction: column">  <div v-if="subList.length" class="my-subscribe-content" style="padding-top: 17.5px;padding-bottom: 60px;"> <div class="box_3 flex-col justify-end"> <div class="section_55 flex-row justify-center "> <div class="image-wrapper_2 flex-col"> <img class="thumbnail_4" referrerpolicy="no-referrer" src="/web/20240817170404im_/https://new-subscription.chinadaily.com.cn/assets/img/home/sub-left.png"/> </div> <div class="image-text_259 flex-row justify-between"> <span class="text-group_1">{{$t("mySubscription.title")}}</span> </div> <div class="image-wrapper_3 flex-col"> <img class="thumbnail_5" referrerpolicy="no-referrer" src="/web/20240817170404im_/https://new-subscription.chinadaily.com.cn/assets/img/home/sub-right.png"/> </div> </div> <div class="box_76 flex-row justify-evenly" style="position: relative;"> <div style="position: absolute;width: 100%;bottom: 0;background: rgba(192,200,209,0.5);"></div> <div class="section_3 flex-col" v-for="item in subList" :key="item.productId" @click="toReadOnline(item)" :class="{'cursor-pointer':item.productCode}"> <div class="image-wrapper_4 flex-col"> <img class="image_7" referrerpolicy="no-referrer" :src="item.url"/> <div class="title-box flex-col" v-if="item.productName"> <div class="title flex-row justify-center"> <span class="text" :title="item.productName">{{item.productName}}</span> </div> <div class="last flex-row justify-center"> <span class="text">{{$t("mySubscriptionData.latestReadable")}}：{{formatDate(item.recentDate)}}</span> </div> </div> </div> </div> </div>   </div> </div> </div> <div class="recommend-container" v-if="soleGoodsList && soleGoodsList.length>0"> <div class="container">  <div class="editor-recommend column-box"> <div class="recommend-left"> <el-image class="recommend-title" src="../../assets/img/recommend-title.png"></el-image> <div class="title">{{ $t("home.recommend") }}</div>  <div class="recommend-left-bottom" v-if="pageTotle>1"> <div class="page">{{spage}}/{{pageTotle}}</div> <div class="page-icon"> <div class="left-page-icon" @click="reducePage"> <el-image src="../../assets/img/page-left-icon.svg"></el-image> </div> <div class="right-page-icon" @click="addPage"> <el-image src="../../assets/img/page-right-icon.svg"></el-image> </div> </div> </div> </div> <div class="recommend-right"> <div class="column-list" v-if="soleGoodsList && soleGoodsList.length>0" v-loading="soleGoodsLoading"> <template> <div class="column-list-item-5" v-for="(item,index) in soleGoodsList" v-if="(index>=(spage-1)*3)&&(index<(spage)*3)" :key="index"> <list-item v-bind="item" @detail="getDetailData(item)" :is-sm="true"></list-item> </div> <div class="column-list-bottom"> <div class="more-box"> <span @click="toCategory">{{ $t("home.seeMore") }}</span> <el-image src="../../assets/img/jiantou-sm.svg"></el-image> </div> </div> </template>       </div> </div> </div> </div> </div> <div class="container" style="flex-direction: column"> <div style="display: flex; padding-top: 60px;">  <div class="container-left"> <template v-if="cateList && cateList.length>0"> <template v-for="(item,index) in cateList"> <div class="sole-supply column-box" :class="{'column-box-first': index === 0}" v-if="item.hotGoodsList && item.hotGoodsList.length>0" :key="index"> <div class="column-head"> <div class="column-head-left"> <el-image :src="`../../assets/img/${item.code}.svg`"> <template slot="error"> <el-image :src="`../../assets/img/defult.svg`"></el-image> </template> </el-image> <product-category-name :product-category="item"></product-category-name> </div> <div class="more-box"> <span @click="toCategory(item)">{{ $t("home.seeMore") }}</span> <el-image src="../../assets/img/jiantou-sm.svg"></el-image> </div> </div> <div class="column-list" v-loading="item.hotGoodsLoading"> <template v-for="(goodsItem,goodsIndex) in item.hotGoodsList"> <div class="column-list-item-4" v-if="goodsIndex < 3" :key="goodsIndex"> <list-item v-bind="goodsItem" :goodsitem="goodsItem" @detail="getDetailData(goodsItem)"></list-item> </div> </template>       </div> </div> </template> </template> </div> <div class="container-right"> <div class="sidebar-sticky"> <div class="right-title"> <el-image src="../../assets/img/laba.svg"></el-image><span>{{ $t("home.promotionalAdvertisement") }}</span> </div>  <div class="right-ad-box"> <el-image src="../../assets/img/wx-ad.png"></el-image> </div> </div> </div>     </div> </div>  <right-tool-bar></right-tool-bar>  <web-foot></web-foot> </div>   <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/vue/vue.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/utils/xss-filters.js"></script>  <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/element-ui/js/index.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/moment.js/2.29.4/moment.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/moment.js/2.29.4/locale/zh-cn.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/uri/URI.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/vue-infinite-scroll/vue-infinite-scroll.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/axios/axios.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/lodash/lodash.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/mathjs/11.3.3/math.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/numeral.js/2.0.6/numeral.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/numeral.js/2.0.6/locales/chs.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/popmotion/popmotion.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/jquery-1.7.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/featureCarousel/jquery.featureCarousel.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/vue-i18n/vue-i18n.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/vue-i18n/languagePack.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/swiper-6.8.4/swiper-bundle.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/@ty/config_center/2.1.3/ConfigCenter.umd.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/@ty/service_util/2.1.1/service_util.umd.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/lib/@ty/talk_about_manager/talk_about.umd.js?v=1.2"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/utils/common.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/utils/crypto-js.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/utils/ase.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/utils/encryption_data.min.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/utils/uri.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/utils/request.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/api/common.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/api/product.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/api/cart.js"></script>  <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/views/home/components/columnHead/index.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/components/listItem/index.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/components/webHead/index.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/components/webFoot/index.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/components/rightToolBar/index.js"></script> <script src="/web/20240817170404js_/https://new-subscription.chinadaily.com.cn/components/chatContainer/index.js"></script> <script> const { startsWith, orderBy } = _; Vue.config.devtools = true; Vue.config.errorHandler = function (err, vm, info) { console.error(err); if (err && err.message) { vm.$message.error(err.message); } }; new Vue({ i18n: i18n(), el: "#app", name: "home", directives: { infiniteScroll }, data: function () { return { subList: [], soleProIds: ["2", "35", "36", "37", "21"], adList: [ { bgImg: "../../assets/img/banner6.jpg", url: "", id: "5", }, { bgImg: "../../assets/img/banner4.jpg", url: "", id: "3", }, { bgImg: "../../assets/img/banner1.jpg", url: "", id: "0", }, // { // bgImg: "../../assets/img/banner2.jpg", // url: "", // id: "1", // }, { bgImg: "../../assets/img/banner3.jpg", url: "", id: "2", }, ], tabsSelect: 0, tabsSelectId: "", tabsList: [ { name: this.$t('home.periodicals') }, // 期刊 { name: this.$t('home.books') }, // 图书 { name: this.$t('home.researchReport') }, // 研究报告 { name: this.$t('home.internalInformationCustomization') }, // 内部信息定制 { name: this.$t('home.culturalAndCreativeProducts') }, // 文创商品 ], selectValue: "all", dateValue: "", textValue01: { title: "《领导决策信息》2022订阅每周寄送电子刊免费发送", imgUrl: "../../assets/img/home/cover02.png", url: "", price: "495.00", sales: "233", showNew: false, }, textValue02: { title: "《2019年中国重点城市大数据发展指数分析报告》PDF电子板", imgUrl: "../../assets/img/home/cover01.png", url: "", price: "48.90", sales: "199", showNew: false, }, page: 0, size: 24, busy: false, goodsList: [], hotGoodsList: [], soleGoodsList: [], salesList: [], imgList: [], DOWN_LOAD: "/tycom_api/static/file/", cateList: [], soleGoodsLoading: true, hotGoodsLoading: true, goodsLoading: true, search: "", resizeFlag: null, pageTotle: 0, spage: 0, i18nOptions: null, bannerOpacity: 0 }; }, async mounted() { this.initFeatureCarousel(); this.handleUrlSearch(); await this._getSalesList(); await this.getSoleProducts(); await this.getProductCategory(); // await this.getHotProducts(); this.isQuery(); // window.onresize = () => { // clearTimeout(this.resizeFlag); // this.resizeFlag = setTimeout(() => { // this.initFeatureCarousel(); // }, 100) // }; }, watch: { async search(newVal) { if (newVal === "") { this.page = 1; this.goodsList = []; await this.getProducts(); } }, '$i18n.locale': { immediate:true, handler(){ this.setI18nOptions() } } }, methods: { toReadOnline(row) { const uri = URI("/reader/Home/Index.html").origin(location.href); const productCode = _.get(row, "productCode"); if (productCode) { uri.addQuery("productCode", productCode); window.open(uri.toString(), "_blank"); } }, formatDate(date) { if (!date) return null; date = moment(date); return date.isValid() ? date.format("YYYY/MM/DD") : null; }, setI18nOptions() { this.tabsList = [ { name: this.$t('home.periodicals') }, // 期刊 { name: this.$t('home.books') }, // 图书 { name: this.$t('home.researchReport') }, // 研究报告 { name: this.$t('home.internalInformationCustomization') }, // 内部信息定制 { name: this.$t('home.culturalAndCreativeProducts') }, // 文创商品 { name: this.$t('home.culturalAndCreativeProducts') }, // 文创商品 ] const titltDom = document.querySelector?.('title'); titltDom && (titltDom.innerText = this.$t('home.title')) }, addPage() { if (this.spage < this.pageTotle) { this.spage++ } }, reducePage() { if (this.spage > 1) { this.spage-- } }, async initFeatureCarousel() { await this.$nextTick() const mySwiper = new Swiper('#swiper', { autoplay: { delay: 3000, // 轮播时长 disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay }, effect: 'fade', slideToClickedSlide: true, // 设置为true则点击slide会过渡到这个slide。 loop: true, // 开启循环 speed: 500, // 切换速度 centeredSlides: true, // 居中 slidesPerView: 3, // 窗口展示数量 effect: "coverflow", // 切换效果 coverflowEffect: { rotate: 0, stretch: '70%', depth: 160, modifier: 1, slideShadows: true }, // 监听 on: { slideChange: function () { // console.log(this.activeIndex); // console.log(this.slides) // 淡入淡出 const length = this.slides.length - 1 const nextIndex = this.activeIndex + 1 > length ? 0 : this.activeIndex + 1 const prevIndex = this.activeIndex - 1 < 0 ? length : this.activeIndex - 1 const arr = [nextIndex, prevIndex, this.activeIndex] for (let i = 0; i < this.slides.length; i++) { const dom = this.slides[i] if (arr.includes(i)) { dom.classList.remove("swiperBannerHidden") } else { dom.classList.add("swiperBannerHidden") } } }, }, }) }, async loadMore() { this.busy = true; this.page++; await this.getProducts(); }, handleTabClick(item, index) { this.tabsSelect = index; this.tabsSelectId = item.id; // this.getHotProducts(); }, async getProducts() { const params = { page: this.page, size: this.size, where: { $and: [], name: { $like: `%${this.search}%` }, pubStatus: { $in: [1,2] } }, includeFile: true, include: [ { model: "product_model", order: [["order", "asc"]], attributes: ["price", "salesVolume"], include: [ { model: "productModelInventory", }, ], }, ], order: [ ["order", "asc"], ["createdAt", "asc"], ], }; if (this.dateValue) { params.where.$and.push({ createdAt: this.dateValue, }); } if (this.selectValue && this.selectValue !== "all") { params.where.$and.push({ productCategoryId: this.selectValue, }); } try { this.goodsLoading = true; const res = await getProductByPage(params); if (res.data && res.data.rows) { const data = res.data.rows; this.setProductInfo(data); this.goodsList = [...this.goodsList, ...data]; if (res.data.rows.length >= 24) { this.busy = false; } } this.goodsLoading = false; } catch (e) { console.error(e); this.goodsLoading = false; } }, async getSoleProducts() { this.soleGoodsLoading = true; try { const productAryResult = await getProductsByCode({ "code": "BoutiqueRecommendation", "where": { "pub_status": 1 }, "include": [ { "model": "product_model", "order": [ [ "order", "asc" ] ], "attributes": [ "price" ], "include": [ { "model": "productModelInventory" } ] } ], "includeFile": true, "limit": 3 }); const data = productAryResult.data || [] this.setProductInfo(data); this.soleGoodsList = data; this.pageTotle = Math.ceil(data.length / 3) this.spage = 1 this.soleGoodsLoading = false; } catch (e) { console.error(e); this.soleGoodsLoading = false; } }, async getHotProducts(item) { this.$set(item, 'hotGoodsLoading', true); const params = { page: 1, size: 24, rootProductCategoryId: Number(item.id) || undefined, where: { $and: [ { // productCategoryId: item.id, }, ], pubStatus: { $in: [1,2] } }, include: [ { model: "product_model", order: [["order", "asc"]], attributes: ["price", "salesVolume"], include: [ { model: "productModelInventory", }, ], }, ], includeFile: true, order: [ ["order", "asc"], ["createdAt", "asc"], ], }; if (this.dateValue) { params.where.$and.push({ createdAt: this.dateValue, }); } try { const res = await getProductByPage(params); if (res.data && res.data.rows) { const data = res.data.rows; this.setProductInfo(data); this.$set(item, 'hotGoodsList', data); } this.$set(item, 'hotGoodsLoading', false); item.hotGoodsLoading = false; } catch (e) { console.error(e); this.$set(item, 'hotGoodsList', []); this.$set(item, 'hotGoodsLoading', false); } }, async getProductCategory() { const res = await productCategory({ where: { $and: [{ "parentId": null, }] }, hasPubProduct: 1 }); if (res && res.data) { let cateList = res.data; cateList = _.sortBy(cateList, ['order']); this.cateList = cateList.filter(item => { const products = _.get(item, "products", []); return products.length > 0; }); if (res.data.length > 0) { this.tabsSelectId = this.cateList[0].id; for (const item of this.cateList) { await this.getHotProducts(item) } } } }, _getSalesList() { return new Promise(async (resolve, reject) => { try { const res = await getSalesList({ where: { pubStatus: { $in: [1,2] } } }); const data = res.data; this.salesList = data; resolve(); } catch (e) { console.error(e); reject(); } }); }, setProductInfo(goods) { goods.forEach((item) => { item.title = item.name; item.url = `/apps/mall/views/detail/index.html?id=${item.id}`; if (item.fileResources && item.fileResources.length > 0) { const titleImg = orderBy( item.fileResources, ["info.name"], ["asc"] ).find((item) => startsWith(item.info.resourceType, "标题图")); if (titleImg) { item.imgUrl = this.getImgUrl(titleImg.info.url); } } }); this.salesList.forEach((s) => { goods.forEach((v) => { if (v.productModels && v.productModels.length > 0) { if (s.id === v.productModels[0].id) { v.sales = (s.productModelInventory && s.productModelInventory.sell) || 0; v.price = (s.productModelInventory && s.productModelInventory.tagPrice) || 0; } } else { v.sales = 0; v.price = 0; } }); }); }, getDetailData(item) { const id = item.id; const productCategoryId = item.productCategoryId; window.open( `/apps/mall/views/detail/index.html?id=${id}&productCategoryId=${productCategoryId}` ); }, handleAllGoodsCateChange(val) { this.selectValue = val; this.page = 1; this.goodsList = []; this.getProducts(); }, handleDateChange(val) { this.dateValue = val; this.page = 1; this.goodsList = []; this.getProducts(); }, getImgUrl(imgUrl) { if (!imgUrl) return ""; const uri = joinPathObj(this.DOWN_LOAD, imgUrl); return uri.toString(); }, // 主搜索框 async searchData(data) { const search = data.search; this.search = search; this.page = 1; this.goodsList = []; await this.getProducts(); await this.$nextTick(); this.handleRoll("allProducrt"); }, // 全部商品搜索框 async handleSearch() { this.page = 1; this.goodsList = []; await this.getProducts(); }, // 获取Query handleUrlSearch() { const data = URI(window.location.href).query(true); const query = data.query; if (query) { this.search = query; this.$refs["webhead"].handleSearchIcon(); this.$refs["webhead"].handleSetSearch({ search: this.search }); } }, // 是否有query isQuery() { if (this.search) { this.handleRoll("allProducrt"); } }, // 滚动 handleRoll(dom) { const scrollY = window.scrollY; const offsetTop = document.getElementById(dom).offsetTop; popmotion.animate({ from: scrollY, // 当前的位置 to: offsetTop, // 目标位置 onUpdate: (latest) => { return window.scrollTo(0, latest); }, }); }, // 搜索框数据同步 webhead_search_input(data) { this.search = data.search; }, // 搜索框数据同步 handleSearchInput() { this.$refs["webhead"].handleSetSearch({ search: this.search }); }, toCategory(row) { let uri = new URI('/apps/mall/views/category/index.html'); let categoryPath = uri.toString(); if (row) { const id = row.id categoryPath = uri.setSearch('id', id).toString(); } window.open(categoryPath, '_blank') }, async refreshSub() { const resp = await queryUserSubscribe().catch(e => console.error(e)) let subList = _.get(resp, 'data') || [] subList.forEach(item => { if (item.pageImageUrl) { item.url = this.getImgUrl(item.pageImageUrl) } }) // subList=_.slice(subList,0,2) const maxSubCount = 4 subList = _.slice(subList, 0, maxSubCount) subList = _.orderBy(subList, ['recentDate'], ['desc']) if (subList.length && subList.length < maxSubCount) { // 不足4个，补充到4个，并且是默认图 const defaultSubList = _.fill(Array(maxSubCount), { url: "../../assets/img/home/sub_default.png" }) subList = _.merge([], defaultSubList, subList) } this.subList = subList // this.subList=_.orderBy(subList,['recentDate'],['desc']) } }, async created() { await this.refreshSub() } }); </script> </body> </html>

CINXE.COM

首页