quick/pages/my/history/index.vue

<template>
  <view style="height:100vh;">
    <GList class="flex-1">
      <GLoading />
      <view
        v-if="dataList.length !== 0"
        class="px-30 py-28"
      >
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="history-item flex-row mb-28"
          style="justify-content: space-between;"
          :class="{ active: item.sace === 1 }"
        >
          <view
            class="flex-row"
            style="align-items: center;"
            @click="getVideoNav(item)"
          >
            <image
              class="history-item-img"
              height="236rpx"
              width="172rpx"
              :src="item.cover"
              mode="aspectFill"
              radius="16rpx"
            />
            <view
              class="ml-20"
              style="justify-content: center;"
            >
              <text class="history-title">
                {{ item.name || '-' }}
              </text>
              <view class="flex-row my-24">
                <text class="history-oder">
                  观看到
                </text>
                <text class="history-update">
                  第{{ item.latest || 0 }}集
                </text>
              </view>
              <view class="flex-row">
                <text class="history-update">
                  {{ item.latestid }}集全
                </text>
              </view>
            </view>
          </view>
          <view
            class="flex-row"
            style="align-items: center;"
          >
            <view
              class="chase flex-center flex-row"
              @click="chase(item)"
            >
              <u-icon
                v-if="item.sace === 0"
                name="/static/icon/add.png"
                size="22rpx"
              />
              <u-icon
                v-else
                name="/static/icon/success.png"
                color="#999999"
                size="22rpx"
              />
              <text class="chase-text ml-8">
                追剧
              </text>
            </view>
            <view
              class="delete flex-center ml-20"
              @click="delhistory(item)"
            >
              <u-icon
                name="/static/icon/history-delete.png"
                size="40rpx"
              />
            </view>
          </view>
        </view>
      </view>
      <view
        v-else
        class="flex-1 flex-center"
        style="height: 100%;background-color: #ffffff;"
      >
        <GNoData
          image="no-history"
          text="暂无历史观看~"
        />
      </view>
    </GList>
  </view>
</template>

<script>
import { history, delhistory, addkeep, chasingdramadel } from '@/api/index.js';
export default {
	data() {
		return {
			dataList: []
		};
	},
	created() {
		this.$showLoading(true);
		this.getData();
	},
	methods: {
		getData() {
			history().then(res => {
				this.dataList = res || [];
				this.$showLoading(false);
			});
		},
		getVideoNav(item) {
			uni.setStorageSync('videoBackRouter', {
				type:2,
				url: '/pages/my/history/index'
			});
			uni.redirectTo({
				url: `/pages/video/index?sid=${item.sid}`
			});
		},
		delhistory(item) {
			delhistory({ id: item.hid }).then(() => {
				const index = this.dataList.findIndex(r=>item.hid === r.hid);
				uni.showToast({
					title:'删除成功',
					duration:1000
				});
				this.dataList.splice(index,1);
				
				
			});
		},
		chase(item) {
			let fn = null;
			let params = {};
	
			if (item.sace === 0) {
				fn = addkeep;
				params = {
					sid: item.sid
				};
			} else {
				fn = chasingdramadel;
				params = {
					ids: item.sid
				};
			}
			fn(params).then(() => {
				item.sace = item.sace === 0 ? 1 : 0;
				uni.showToast({
					title:item.sace === 1 ?'追剧成功':'取消追剧成功',
					duration:1000
				});
			});
		},
		getkActivity(){
			uni.switchTab({
				url:'/pages/my/index/index'
			});
		}
	}
};
</script>

<style lang="scss">
.history-item {
	.history-item-img {
		width: 192rpx;
		height: 236rpx;
		border-radius: 16rpx;
	}
	.history-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #1a1a1a;
	}
	.history-oder {
		font-size: 30rpx;
		font-weight: 400;
		color: #666666;
	}
	.history-update {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
	}
	.chase {
		width: 114rpx;
		height: 60rpx;
		border-radius: 40rpx;
		border: 1rpx solid #ff779e;
		.chase-text {
			font-size: 26rpx;
			font-weight: 400;
			color: #ff779e;
		}
	}
	.delete {
		width: 72rpx;
		height: 60rpx;
		border-radius: 40rpx;
		border: 2rpx solid #696969;
	}
	&.active {
		.chase {
			width: 114rpx;
			height: 60rpx;
			border-radius: 40rpx;
			border: 1rpx solid #999999;
			.chase-text {
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}
}
</style>