@atomicservice/ascf-base 1.0.16 → 1.0.17

package/dist/templates/ascfRead/Page_Tingshu/component/c_shujia_list.css

@@ -0,0 +1,153 @@
+
+  .shujia-list {
+    display: flex;
+    width: 698rpx;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  .shujia-box-top {
+    display: flex;
+    width: 100%;
+    height: 100rpx;
+    padding: 30rpx 34rpx 36rpx 34rpx;
+    position: fixed;
+    top: 0rpx;
+    background-color: rgba(242, 242, 242, 0.95);
+    align-items: center;
+  }
+
+  .close_img {
+    width: 50rpx;
+    height: 50rpx;
+    margin-right: 30rpx;
+  }
+
+  .top_title {
+    font-size: 37.5rpx;
+    color: #1A1A1A;
+  }
+
+  .list-row {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    margin-bottom: 50rpx;
+  }
+
+  .last-list-row {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .shujia-books {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 24rpx;
+  }
+
+  .image_div {
+    display: flex;
+    width: 188rpx;
+    height: 250rpx;
+    justify-content: flex-end;
+    align-items: flex-end;
+    background-size: cover;
+  }
+
+  .select_box {
+    margin: 7rpx;
+  }
+
+  .select_box_image {
+    width: 40rpx;
+  }
+
+  .checkbox {
+    width: 60rpx;
+  }
+
+  .shujia-line {
+    height: 30rpx;
+    width: 100%;
+    /* background-image: url(../img/shujia.png); */
+    background-repeat: no-repeat;
+  }
+
+  .shujia-line img {
+    width: 100%;
+  }
+
+  .tabs {
+    background-color: #F2F2F2;
+    height: 100rpx;
+    width: 100%;
+    position: fixed;
+    bottom: 0rpx;
+
+  }
+
+  .tab-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 33rpx;
+    margin-right: 33rpx;
+    padding-top: 14rpx;
+    padding-bottom: 11rpx;
+    width: 170.8rpx;
+    height: 104.2rpx;
+  }
+
+  .image-active {
+    width: 33rpx;
+    height: 33rpx;
+    /* resize-mode: contain; */
+  }
+
+  .title {
+    font-size: 20rpx;
+  }
+
+  /* 书架左上角标 */
+
+  .book_type_1 {
+    width: 67rpx;
+    height: 34rpx;
+    top: 16rpx;
+    left: 0rpx;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  stack{
+    position: relative;
+  }
+
+  .book_type_1 text {
+    width: 100%;
+    font-size: 20.8rpx;
+    color: #ffffff;
+    text-align: center;
+  }
+
+  /* 书架左下角 */
+
+  .book_type_2 {
+    width: 34rpx;
+    height: 34rpx;
+    top: 210rpx;
+    left: 8rpx;
+    position: absolute;
+    background-size: cover;
+  }
+
+  .book_name {
+    text-align: center;
+    font-size: 24rpx;
+    margin-top: 10rpx;
+    color: rgba(0,0,0,0.8);
+  }

package/dist/templates/ascfRead/Page_Tingshu/component/c_shujia_list.hxml

@@ -0,0 +1,55 @@
+<view class="shujia-list">
+  <!-- 顶部区域 -->
+  <view class="shujia-box-top" has:if="{{!foo}}">
+    <view class="close_img" bindtap="close">
+      <image src="{{img.closeImage}}"></image>
+    </view>
+    <text class="top_title">{{topTitle}}</text>
+  </view>
+
+  <!-- 书架列表 -->
+  <block has:for="{{shujiarows}}" has:for-item="list" has:key="list">
+    <view class="{{index === shujiarows.length - 1 ? 'last-list-row' : 'list-row'}}">
+      <view class="shujia-books">
+        <block has:for="{{list}}" has:key="book" has:for-item="book">
+          <stack>
+            <!-- 书籍图片 -->
+            <view class="image_div" style="background-image: url({{book.image}});" id="btnclick" bind:tap="clickToRead" data-value="{{book}}">
+              <!-- 选择框 -->
+              <view class="select_box" bind:tap="select" data-value="{{book}}" has:if="{{showCheckBox}}">
+                <image class="select_box_image" src="{{book.selectImage ? img.select : img.noSelect}}"></image>
+              </view>
+            </view>
+
+            <!-- 书籍类型 1 -->
+            <view has:if="{{book.bookType1 !== 'no'}}" class="book_type_1" style="background-image: url({{img.bookType1}});">
+              <text has:if="{{book.bookType1 === 'shidu'}}">试读</text>
+              <text has:if="{{book.bookType1 === 'update'}}">更新</text>
+              <text has:if="{{book.Read>0}}">{{book.Read}}%</text>
+            </view>
+
+            <!-- 书籍类型 2 -->
+            <view has:if="{{book.bookType2 === 'tingshu'}}" class="book_type_2" style="background-image: url({{img.bookType2}});"></view>
+
+            <!-- 书籍名称 -->
+            <view class="book_name">{{book.name}}</view>
+          </stack>
+        </block>
+      </view>
+      <!-- 书架分隔线 -->
+      <view class="shujia-line" style="background-image: url({{img.shujiaLine}});"></view>
+    </view>
+  </block>
+
+  <!-- 底部选项卡 -->
+  <view class="tabs" has:if="{{!foo}}">
+    <view>
+      <block has:for="{{checkedlist}}" has:key="index" has:for-item="tab">
+        <view class="tab-item" bindtap="tabClickEvent" data-item="{{tab}}">
+          <image class="image-active" src="{{tab.image}}"></image>
+          <text style="color: {{tab.color}};" class="title">{{tab.title}}</text>
+        </view>
+      </block>
+    </view>
+  </view>
+</view>

package/dist/templates/ascfRead/Page_Tingshu/component/c_shujia_list.js

@@ -0,0 +1,129 @@
+Component({
+  attached() {
+    this.setData({
+      shujiarows: this.sliceArray(this.data.list)
+    })
+  },
+  methods: {
+    sliceArray(array) {
+      let result = [];
+      for (let i = 0, len = array.length; i < len; i += 3) {
+        result.push(array.slice(i, i + 3));
+      }
+      return result;
+    },
+    clickToRead(event) {
+      console.log("11111111111", event.target.dataset.value)
+      const value = event.target.dataset.value;
+      console.log(this.showCheckBox)
+      if (this.showCheckBox) {
+        this.showCheckBox = false; //隐藏选择框
+        this.foo = true; //切换下方tabBar
+        this.hideSelectImage(); //清空选择的书籍
+      } else {
+        console.log(22)
+        if (value.bookType2 === 'tingshu') {
+          console.log(33)
+          //跳转至听书页面
+          has.navigateTo({
+            url: "/Page_Hearingdetail/index"
+          });
+        } else if (value.bookType2 === 'novel') {
+          console.log(111)
+          //跳转至小说阅读器页面
+          has.navigateTo({
+            url: '/Page_Read/index',
+            params: {
+              testId: 'testId'
+            }
+          });
+        }
+      }
+    },
+    //长按显示选择框
+    longPress(value) {
+      this.foo = false; //切换下方tabBar
+      this.showCheckBox = true; //显示选择框
+      this.chooseBookArr = []; //每次长按都清空chooseBookArr
+    },
+    cloce() {
+      this.showCheckBox = false; //隐藏选择框
+      this.foo = true; //切换下方tabBar
+      this.hideSelectImage(); //清空选择的书籍
+    },
+    select(value) {
+      value.selectImage = !value.selectImage;
+      if (value.selectImage) {
+        //将勾选的书放入chooseBookArr
+        this.chooseBookArr.push(value);
+      } else {
+        //取消勾选时，将当前项从chooseBookArr中删除
+        let index = this.chooseBookArr.indexOf(value);
+        if (index !== -1) {
+          this.chooseBookArr.splice(index, 1);
+        }
+      }
+      if (this.chooseBookArr.length === 0) {
+        this.topTitle = '未选择';
+      } else {
+        this.topTitle = '已选择' + this.chooseBookArr.length + '项';
+      }
+    },
+    //底部tabBar 点击事件
+    tabClickEvent(item, event) {
+      if (item.title === '删除') {
+        if (this.chooseBookArr.length === 0) {
+          prompt.showToast({
+            message: '还未选择书籍',
+            duration: 2000,
+            gravity: 'bottom'
+          });
+        } else {
+          prompt.showDialog({
+            message: "是否删除所选" + this.chooseBookArr.length + "本书籍",
+            buttons: [{
+              text: "删除",
+              color: '#CD2325'
+            }, {
+              text: "取消",
+              color: '#CD2325'
+            }],
+            success: function (res) {
+              if (res.index === 0) {
+                prompt.showToast({
+                  message: '已成功删除所选书籍',
+                  duration: 2000,
+                  gravity: 'bottom'
+                });
+              }
+            }
+          });
+        }
+      }
+    },
+    hideSelectImage() {
+      this.chooseBookArr = [];
+      this.list.forEach(item => {
+        item.selectImage = false;
+      });
+      if (this.chooseBookArr.length === 0) {
+        this.topTitle = "未选择";
+      } else {
+        this.topTitle = "已选择" + this.chooseBookArr.length + "项";
+      }
+    }
+  },
+  data: {
+    showCheckBox: false,
+    shujiarows: [],
+    topTitle: "未选择",
+    selectImage: false,
+    chooseBookArr: []
+  },
+  properties: {
+    list: Array,
+    checkedlist: Array,
+    img: Object,
+    foo: String
+  }
+});

package/dist/templates/ascfRead/Page_Tingshu/component/c_shujia_list.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

package/dist/templates/ascfRead/Page_Tingshu/component/c_swiper.css

@@ -0,0 +1,20 @@
+
+    .item-container {
+        display: flex;
+        margin-bottom: 50rpx;
+        flex-direction: column;
+        width: 650rpx;
+    }
+
+    .swiper {
+        width: 683rpx;
+        height: 400rpx;
+        indicator-color: rgba(0,0,0,0.2);
+        indicator-selected-color: #ffffff;
+    }
+
+    .bg-image {
+        width: 683rpx;
+        height: 400rpx;
+        border-radius: 16.7rpx;
+    }

package/dist/templates/ascfRead/Page_Tingshu/component/c_swiper.hxml

@@ -0,0 +1,12 @@
+
+    <view class="container">
+        <view class="item-container">
+          <swiper class="swiper" autoplay="true">
+            <block has:for="{{swiperdata}}" has:for-item="item">
+              <swiper-item>
+                <image class="bg-image" src="{{item.src}}"></image>
+              </swiper-item>
+            </block>
+          </swiper>
+        </view>
+    </view>

package/dist/templates/ascfRead/Page_Tingshu/component/c_swiper.js

@@ -0,0 +1,7 @@
+Component({
+  methods: {},
+  data: {},
+  properties: {
+    swiperdata: Array
+  }
+});

package/dist/templates/ascfRead/Page_Tingshu/component/c_swiper.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

package/dist/templates/ascfRead/Page_Tingshu/component/c_teacher_list.css

@@ -0,0 +1,124 @@
+
+	.single-container {
+		display: flex;
+		margin: 0rpx 34rpx 0rpx 34rpx;
+		flex-direction: column;
+	}
+
+	.swiper-head {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 30rpx;
+	}
+
+	.swiper-main-title {
+		font-size: 31rpx;
+		color: #1A1A1A;
+		font-weight: bold;
+		align-self: center;
+	}
+
+	.swiper-link {
+		font-size: 27rpx;
+		color: #8D8D8D;
+		align-self: center;
+		margin-right: 14rpx;
+	}
+
+	.swiper-arrow {
+		width: 16rpx;
+		height: 28rpx;
+		align-self: center;
+	}
+
+	.single-list {
+		display: flex;
+		border-color: #0000ff;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+
+	.single-product {
+		height: 250rpx;
+		margin-top: 8rpx;
+    padding-top: 10rpx;
+    display: flex;
+    flex-direction: row;
+	}
+
+	.single-left {
+    position:relative;
+		/* margin: 15px 0px; */
+	}
+
+	.single-description {
+		display: flex;
+		flex-direction: column;
+		width: 434rpx;
+		border-bottom-width: 1rpx;
+		border-bottom-color: #f2f2f2;
+		align-self: center;
+		padding-bottom: 28rpx;
+	}
+
+	.single-image {
+		width: 217rpx;
+		height: 217rpx;
+		margin-right: 33rpx;
+    border-radius: 8rpx;
+	}
+
+	.single-headphone {
+		width: 42rpx;
+		height: 42rpx;
+		left: 17rpx;
+    top: 160rpx;
+    position: absolute;
+	}
+
+	.single-title {
+		color: #000000;
+		font-size: 31.3rpx;
+		line-height: 40.6rpx;
+		margin-bottom: 16rpx;
+	}
+
+	.single-brief {
+		color: #1A1A1A;
+		opacity: 0.5;
+		font-size: 27.1rpx;
+		line-height: 34.9rpx;
+		margin-bottom: 30rpx;
+		lines: 2;
+		text-overflow: ellipsis;
+	}
+
+	.single-bottom {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.single-author {
+		color: #1A1A1A;
+		opacity: 0.5;
+		font-size: 27.1rpx;
+		align-self: center;
+	}
+
+	.single-div-clazz {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.single-clazz {
+		color: #000000;
+		opacity: 0.5;
+		font-size: 16.7rpx;
+		line-height: 24rpx;
+		background-color: rgba(0, 0, 0, 0.1);
+		border-radius: 8.3rpx;
+		align-self: center;
+		margin-left: 10rpx;
+		text-align: center;
+		padding: 10rpx 20rpx;
+	}

package/dist/templates/ascfRead/Page_Tingshu/component/c_teacher_list.hxml

@@ -0,0 +1,34 @@
+
+	<view class="single-container">
+		<view class="swiper-head">
+			<view>
+				<text class="swiper-main-title">{{list.title}}</text>
+			</view>
+			<view>
+				<text class="swiper-link">{{list.subtitle}}</text>
+				<image class="swiper-arrow" src="{{list.arrow}}"></image>
+			</view>
+		</view>
+		<view class="single-list">
+			<view has:for="{{list.list}}" has:for-item="item" has:key="index" class="single-product" bind:tap="routePage">
+				<view class="single-left">
+					<stack>
+						<image class="single-image" src="{{item.uri}}"></image>
+						<image class="single-headphone" src="{{item.headphone}}"></image>
+					</stack>
+				</view>
+				<view class="single-description">
+					<text class="single-title">{{item.title}}</text>
+					<text class="single-brief">{{item.brief}}</text>
+					<view class="single-bottom">
+						<view>
+							<text class="single-author">{{item.author}}</text>
+						</view>
+						<view class="single-div-clazz">
+							<text has:for="{{item.clazz}}" has:for-item="item" has:key="index" class="single-clazz">{{item}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>

package/dist/templates/ascfRead/Page_Tingshu/component/c_teacher_list.js

@@ -0,0 +1,16 @@
+Component({
+  methods: {
+    press(item) {
+      console.error("on press event param : " + item);
+    },
+    routePage() {
+      //跳转到应用内的某个页面
+      has.navigateTo({
+        url: "/Page_Hearingdetail/index"
+      });
+    }
+  },
+  properties: {
+    list: Object
+  }
+});

package/dist/templates/ascfRead/Page_Tingshu/component/c_teacher_list.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

package/dist/templates/ascfRead/Page_Tingshu/index.css

@@ -0,0 +1,43 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  background-color: #ffffff;
+}
+
+.component1 {
+  margin-top: 30rpx;
+}
+
+.component4 {
+  margin-top: 50rpx;
+}
+
+.component5 {
+  margin-top: 50rpx;
+}
+
+.component7 {
+  margin-top: 50rpx;
+}
+
+.shujia-box-top {
+  width: 683rpx;
+  margin: 17rpx 34rpx 36rpx 34rpx;
+}
+
+.shujia-box-bottom {
+  width: 698rpx;
+  margin: 0rpx 26rpx 0 26rpx;
+}
+
+.title {
+  font-size: 30rpx;
+  color: #1A1A1A;
+  font-weight: bold;
+  padding-left: 34rpx;
+  padding-top: 30rpx;
+  padding-bottom: 30rpx;
+}

package/dist/templates/ascfRead/Page_Tingshu/index.hxml

@@ -0,0 +1,42 @@
+
+  <!-- template里只能有一个根节点 -->
+  <view class="container">
+    <view class="shujia-box-top">
+      <reader_shujia_component_searchbar searchbar="{{searchbar}}"></reader_shujia_component_searchbar>
+    </view>
+    <!-- 轮播图 -->
+    <view class="component1">
+      <component_swiper swiperdata="{{swiperdata}}"></component_swiper>
+    </view>
+    <!-- 分类 -->
+    <view class="component2">
+      <swi list="{{subjectlist1}}" banner="{{banner1}}"></swi>
+    </view>
+    <!-- 每日一书 -->
+    <view class="component3">
+      <single list="{{everydayonebook}}"></single>
+    </view>
+    <!-- 推荐音频列表 -->
+    <view class="component4">
+      <audio_component recommendaudio="{{recommendaudio}}"></audio_component>
+    </view>
+    <!-- 分类 -->
+    <view class="component5">
+      <swi list="{{subjectlist2}}" banner="{{banner2}}"></swi>
+    </view>
+    <!-- 大咖开讲 -->
+    <view class="component6">
+      <teacherlist list="{{singleList1}}"></teacherlist>
+    </view>
+    <!-- 玄幻精品 -->
+    <view class="component7">
+      <single list="{{singleList2}}"></single>
+    </view>
+    <!-- 播放历史 -->
+     <view>
+      <view class="title">播放历史</view>
+      <view class="shujia-box-bottom">
+      <shujia_list list="{{list}}" checkedlist="{{checkedList}}" img="{{img}}" foo="{{foo}}" key="{{sortNo}}"></shujia_list>
+      </view>
+     </view>
+  </view>