jack tang
萌萌的小学生
733Y币
发表于 2022-1-21 13:26:52
- <template>
- <view class="page">
- <!--search and lisr_nav-->
- <list-nav catnav={catnav} select={select} onchange_cart="onchange_cart"></list-nav>
-
- <scroll-view class="scroll_left" scroll-y enable-back-to-top
- onscrolltolower="onscrolltolower">
- <view class="list_con">
- <view class="dan_list" style={'width:'+itemWidth+"px"} v-for="(d,i) in allDataList" data-id={d.id}
- onclick="openwin">
- <view class="tu">
- <image class="tu_img" style={'width:'+itemWidth+"px;height:"+(itemWidth+30)+"px"}
- src={d.thumbs[0]} mode="aspectFill"></image>
- <text class="tu_buy_txt">{d.sales}人已买</text>
- <image class="left_biao" src="../../**.**mon/video_4.png" mode="aspectFill"></image>
- </view>
- <text class="buy_title">{d.title}</text>
- </view>
- </view>
- </scroll-view>
- <loading ajax_data={ajax_data}></loading>
- </view>
- </template>
- <script>
- import $util from '../../utils/util.js'
- import '../../components/list-nav.stml'
- import '../../components/loading.stml'
- export default {
- name: 'main2',
- data() {
- return {
- allDataList: [],
- ajax_data: true,
- page: 1,
- haveMore: false,
- catnav:{parent:[],children:[]},
- select:{first:0,secend:0}
- }
- },
- computed: {
- itemWidth() {
- return Math.floor((api.winWidth - 30) / 2);
- }
- },
- methods: {
- apiready() {
- if ($util.isApp()) {
- api.setStatusBarStyle({
- style: 'light'
- });
- }
- this.get_data();
- this.get_navcart();
- },
- /**
- * 生命周期函数--监听页面显示
- */
- onShow() {
- },
- onHide() {
- },
- get_data(loadMore) {
- let that = this;
- if (!loadMore) {
- that.data.page = 1;
- }
- that.data.ajax_data = true;
- let cate = "";
- if(parseInt(that.data.select.secend) >=1){
- cate = that.data.select.secend;
- }else if(parseInt(that.data.select.first)>=1){
- cate = that.data.select.first;
- }
- var url = "&r=goods.get_list&video1=1&page=" + that.data.page+"&cate="+cate;
- $util.ajax({
- path: url
- }, function (res, err) {
- //console.log(JSON.stringify(res))
- if (res && res.error == 0) {
- let list = res.list;
- if (!list || list =="") {
- list = []
- }
- //that.data.haveMore = list.length > 0;
- if (list != "" && list.length > 0) {
- if (loadMore) {
- console.log(JSON.stringify(list))
- that.data.allDataList = that.data.allDataList.concat(list);
- } else {
- that.data.allDataList = list;
- }
- that.data.page += 1;
- that.data.haveMore = true;
- } else {
- that.data.haveMore = false;
- }
- }
- that.data.ajax_data = false;
- });
- },
- get_navcart(){
- let that = this;
- var url = "&r=goods.get_category";
- $util.ajax({
- path: url
- }, function (res, err) {
- if (res && res.error == 0) {
- let list = res.allcategory;
- that.data.catnav = list;
- //console.log(JSON.stringify(list.children))
- }
- });
- },
- onscrolltolower() {
- if (this.data.haveMore && !this.data.ajax_data) {
- this.get_data(true);
- }
- },
- openwin(e) {
- let id = e.currentTarget.dataset.id;
- $util.openWin({
- name: 'video-' + id,
- url: '../video/video.stml',
- title: '商品详情',
- pageParam: {
- id: id
- }
- });
- },
- onchange_cart(e){
- var type = e.detail.type;
- var id = e.detail.id;
- if(type == 1){
- this.data.select.first = id;
- this.data.select.secend = "";
- }else{
- this.data.select.secend = id;
- }
- this.get_data();
- },
- /**
- * 用户点击右上角分享
- */
- onShareAppMessage: function () { }
- }
- }
- </script>
- <style>
- .page {
- background-color: #eeeeee;
- }
- .list_con {
- flex-direction: row;
- padding: 10px;
- flex-wrap: wrap;
- justify-content: space-between;
- background: #ffffff;
- border-radius: 5px;
- }
- .dan_list {
- font-size: 12px;
- margin-bottom: 10px;
- }
- .tu {
- position: relative;
- }
- .tu_img {
- border-radius: 5px;
- }
- .tu_buy_txt {
- position: absolute;
- left: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.397);
- color: #ffffff;
- font-size: 12px;
- border-radius: 0 5px 0 0;
- padding: 0 3px;
- }
- .buy_title {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- line-height: 30px;
- font-size: 12px;
- }
- .left_biao {
- width: 30px;
- height: 22px;
- position: absolute;
- left: 10px;
- top: 10px;
- border-radius: 5px;
- opacity: 0.7;
- }
- </style>
复制代码
这是一个页面的代码 |
|