<template> <view style="display: flex;flex-direction: column;height: 100#;"> <view class="top"> <NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight" :end-change-height="page.endHeight"> </NavBar> <view class="topText"> 冬储文化是中国传统文化的一部分,是古人顺应自然、因时而食的智慧体现,是刻在老一辈骨子里的温暖记忆! </view> </view> <!-- <view style="display: flex;flex-direction: column; height: 30vw; width: 100vw;background: #ff0;z-index: 1000; position: fixed; top:61vw "> --> <z-paging ref="paging" v-model="data" :pagingStyle='styleObject' @query="queryList" :refresher-enabled="true"> <view style="display: flex;flex-direction: row;justify-content: space-between; margin:5px 20px 0px 20px;padding-bottom: 20px; border-bottom: 2px #EFEFEF solid;"> <view style="display: flex;flex-direction: row;align-items: center;"> <view style="background: #FF9900; border-radius: 50%;width: 12px;height: 12px;"></view> <view style="background: #FFCC7F; border-radius: 50%;width: 12px;height: 12px;"></view> <text style="margin-left: 8px;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;">家庭云菜窖</text> </view> <view style="border: 1px #FF9900 solid;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;border-radius: 15px; padding:5px 15px;" @click="optionalClick()"> + 自选菜窖 </view> </view> <view v-for="(item,index) in data" :key="index" style="display: flex;flex-direction: column;margin-top: 14px;width: 100%;" @click="detail(item)"> <view :style="{'border-bottom':(index===data.length-1 ? 'none':'1px #EFEFEF solid')}" style="display: flex;flex-direction: column; margin-left: 20px;margin-right: 20px;padding-bottom: 10px;flex: 1;"> <view style="display: flex;flex-direction: row;width: 100%; "> <text style="flex: 1;margin-right: 10px;color: #000;font-size: 16px;">{{item.name}}</text> <image src="@/static/right_icon.png" style="width: 15px;height: 15px;"></image> </view> <view style="display: flex;flex-direction: row;align-items: center; margin-right: 10px;margin-top: 5px; width: 100%; "> <image :src='item.iconUrl' style="width: 60px;height: 70px;"></image> <view style="display: flex;flex-direction: column;margin-left: 20px;flex: 1; width: 100%;"> <text style="color: #999;font-size: 14px;width: 100%;">{{item.remarks}}</text> <view style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 5px;"> <view style="display: flex;flex-direction: row;"> <text style="border: 1px #EE752F solid; border-radius: 10px; color:#EE752F ; font-size: 14px; margin-right: 10px;padding: 0px 8px;" v-show="item.isRecommend=='1'">推荐</text> <text style="border: 1px #EE752F solid; border-radius: 10px; color: #EE752F;font-size: 14px;;padding: 0px 8px;">{{item.count}}</text> </view> <text style="color: #FF5006;font-size: 14px;">¥{{item.price}}</text> </view> </view> </view> </view> </view> </z-paging> <!-- </view> --> </view> </template> <script> export default { data() { return { styleObject: { // 'position': 'fixed', // 'top':'80vw', 'margin-top': '78vw', // 'border-top-left-radius': '25px', // 'border-top-right-radius': '25px', 'background': '#fff', 'padding-top': '10px', }, page: { startHeight: 0, endHeight: 0 }, data: [], } }, created() { this.$bus.$on('order', msg => { console.log("aaaaaaaaaaa4", msg) this.$refs.paging.reload(true); }); }, onLoad() { let info = uni.getSystemInfoSync(); this.page.startHeight = info.windowWidth * 0.6 this.page.endHeight = info.windowWidth * 0.8 }, onUnload() { uni.$off('order'); }, onPageScroll(res) { // 渐变 this.$refs.nav.defaultColorBgAlpha(res) }, methods: { // 分页的请求 queryList(pageNo, pageSize) { let _this = this _this.$api.appletGiftBagList().then((resp) => { // 添加数据源 // this.$refs.paging.complete(resp.records) this.$refs.paging.complete(resp) }).catch(e => { // 出错了,点击重试 _this.$refs.paging.complete(false); }) }, detail(item) { // 详情 uni.navigateTo({ url: '/pages/cloud/detail_cloudCard?sid=' + item.sid+"&name="+item.name }) }, optionalClick(){ uni.navigateTo({ url: '/pages/cloud/optionalCard' }) } } } </script> <style> ._ellipsis { overflow-wrap: break-word; } .top { width: 100vw; /* height: 126.66vw; */ height: 85vw; /* 加载背景图 */ background-image: url(https://supervise.yxtsoft.com/lpk/image/clound_bj1.png); /* background-image: url(../../static/clound_bj1.png); */ /* 让背景图基于容器大小伸缩 */ background-size: 100% 100%; } .topText { margin-top: 60vw; margin-left: 7vw; margin-right: 7vw; border-radius: 15px; background-color: #FFF0E5; padding: 10px 10px; font-size: 12px; color: #FF9900; font-weight: 600; font-family: sans-serif; } .btn { /* margin-top: 97.86vw; */ margin-top: 60vw; width: 83%; background-color: #FFF; border-radius: 45px; display: flex; height: 13vw; flex-direction: row; justify-content: center; align-items: center; /* 加载背景图 */ background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj1.png); /* 让背景图基于容器大小伸缩 */ background-size: 100% 100%; } .item { /* 加载背景图 */ background-image: url(https://supervise.yxtsoft.com/lpk/image/carPerson.png); /* 让背景图基于容器大小伸缩 */ background-size: 100% 100%; width: calc(100% - 18px); } .item2 { /* 加载背景图 */ background-image: url(https://supervise.yxtsoft.com/lpk/image/caradLose.png); /* 让背景图基于容器大小伸缩 */ background-size: 100% 100%; width: calc(100% - 18px); } .showBtn { visibility: hidden; } .use { display: flex; flex-direction: row; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; color: #FFF; align-items: center; background: linear-gradient(89.8deg, rgba(218, 51, 33, 1) -3.76%, rgba(237, 113, 53, 0) 300.05%); } .gray { filter: grayscale(100%); -webkit-filter: grayscale(100%); transition: filter 0.2s; } .oragin {} uni-page-body, page { background: #FFFFFF; } </style>