123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572 |
- <template>
- <view class="details" v-if="opusInfo">
-
- <!-- 头部图片 -->
- <swiper
- class="swiper"
- indicator-dots="true"
- autoplay="true"
- interval="5000"
- duration="1500"
- circular="true"
- >
- <swiper-item v-if="opusInfo.opus_type == 1">
- <video :src="opusInfo.media_address" style="width: 100%"></video>
- </swiper-item>
- <swiper-item v-for="(item, index) in imglist" :key="index">
- <image :src="item" mode="aspectFill" style="width: 100%"></image>
- </swiper-item>
- </swiper>
- <!-- <view class="top-image">
- <image src="@/static/delImg/banenr.png" mode=""></image>
- </view> -->
- <view class="title">
- {{ opusInfo.title }}
- </view>
- <!-- 标题 -->
- <view class="three-even">
- <view class="item">
- <view class="good">
- <image src="@/static/good.png" mode=""></image>
- <view class="num">
- {{ opusInfo.like_num }}
- </view>
- </view>
- <view class="message" >
- <image src="@/static/message.png" mode=""></image>
- <view class="num">
- {{ opusInfo.comment_sum }}
- </view>
- </view>
- <view class="link">
- <image src="@/static/link.png" mode=""></image>
- <view class="num">
- {{ opusInfo.share_sum }}
- </view>
- </view>
- </view>
- </view>
- <!-- 个人信息 -->
- <view class="personal">
- <view class="item">
- <image :src="opusInfo.head_photo" mode=""></image>
- <view class="name-time">
- <view class="name">
- {{ opusInfo.nickname }}
- </view>
- <view class="time">
- {{ opusInfo.create_time }}
- </view>
- </view>
- <view class="follow-button"> +关注 </view>
- </view>
- </view>
- <!-- 简介 -->
- <view class="introduce">
- <view class="top">
- <view class="simple">
- <view class="line"> </view>
- <view class="item"> 简介 </view>
- </view>
- <view class="simple-content">
- {{ opusInfo.content }}
- </view>
- </view>
- </view>
- <view class="bottom-btn u-bg-fff">
- <view class="pt-pb30 u-plr30 u-flex-center-sb">
- <view class="u-flex-center">
- <button class="buy-btn u-DCCDA4 u-font30" @click="open(0)">
- 查看更多
- </button> <button class="buy-btn u-DCCDA4 u-font30" @click="open(1)">
- 下载App
- </button>
- </view>
- </view>
- </view>
-
-
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- config: {
- back: true, //false是tolbar页面 是则不写
- title: "文章详情",
- color: "#fff",
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, "#00321E"],
- statusBarFontColor: "#ffffff",
- },
- opusInfo: null,
- goodIndex: 2,
- imglist: [],
- content: null,
- };
- },
- props: {
- options: {
- type: Object,
- default: null,
- },
- },
- watch: {
- options(n) {
-
- this.options = n;
- this.getDetail(this.options.id);
- },
- },
- created() {
-
- this.getDetail(this.options.id);
- },
- methods: {
-
- getDetail(id) {
- this.$http.get("/opus/info/" + id).then((res) => {
- if (res && res.code == 200) {
- this.opusInfo = res.data;
- this.imglist = res.data.images.split(",");
- }
- });
- },
- open(){
- if(number==0){
- window.location.href =
- "lida://&pageType=3&type=" + this.type + "&id=" + this.opusInfo.id+"&shareId="+this.options.shareId;
- }else{
- //'lida://;
-
- uni.navigateTo({
- url:"/pages/down"
- })
- }
- },
-
-
- },
- };
- </script>
- <style lang="scss" scoped>
- .bottom-btn .buy-btn{
- width: 340px;
- height: 42px;
- line-height: 42px;
- background: #00321e;
- border-radius: 21px;
- }
- .show-bottom {
- background-color: #ffffff;
- border-radius: 50rpx 50rpx 0 0;
- padding: 37rpx 30rpx 22rpx 30rpx;
- .input {
- .texterea-item {
- background-color: #fafafa;
- padding: 22rpx 20rpx;
- border-radius: 21rpx;
- margin: 22rpx 29rpx 4rpx 30rpx;
- }
- }
- .top {
- display: flex;
- align-items: center;
- .line {
- width: 6rpx;
- height: 26rpx;
- background-color: #00321e;
- border-radius: 3rpx;
- }
- .item {
- font-size: 36rpx;
- color: #1a1a1a;
- font-weight: 700;
- margin-left: 14rpx;
- flex: 1;
- }
- .deter-mine {
- font-size: 30rpx;
- font-weight: 500;
- color: #1a1a1a;
- }
- }
- }
- .stay-msg {
- .title-top {
- font-size: 36rpx;
- font-weight: 700;
- color: #1a1a1a;
- padding: 28rpx 0 31rpx 32rpx;
- }
- .character {
- display: flex;
- margin-bottom: 40rpx;
- .image {
- margin-left: 32rpx;
- margin-right: 18rpx;
- image {
- width: 83rpx;
- height: 83rpx;
- }
- }
- .item {
- .top {
- font-size: 28rpx;
- font-weight: 400;
- color: #1a1a1a;
- }
- .time {
- font-size: 24rpx;
- color: #999999;
- font-weight: 500;
- }
- }
- }
- .character:nth-child(odd) {
- .content {
- font-size: 28rpx;
- font-weight: 500;
- color: #1a1a1a;
- margin-top: 15rpx;
- }
- }
- .character:nth-child(even) {
- .content {
- font-size: 28rpx;
- font-weight: 500;
- color: #999999;
- margin-top: 15rpx;
- }
- }
- }
- .recommend {
- width: 750rpx;
- padding-bottom: 40rpx;
- border-bottom: 10rpx solid #f5f5f5;
- .recommend-item {
- width: 720rpx;
- margin: 0 auto;
- .see-more {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 22rpx;
- color: #999999;
- font-weight: 400;
- .linge {
- margin-left: 9rpx;
- }
- }
- }
- .componen-titem {
- margin: 0 auto;
- display: flex;
- padding: 30rpx 39rpx;
- .img {
- image {
- width: 139rpx;
- height: 139rpx;
- }
- }
- .item {
- margin-left: 19rpx;
- padding-right: 39rpx;
- width: 100%;
- .item-title {
- color: #1a1a1a;
- font-size: 24rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- word-wrap: break-word;
- word-break: break-all;
- white-space: normal !important;
- }
- .num {
- margin-top: 18rpx;
- display: flex;
- justify-content: space-between;
- width: 100%;
- .num-color {
- color: #ff0000;
- .large {
- font-size: 38rpx;
- font-weight: 700;
- }
- .small {
- font-size: 20rpx;
- font-weight: Regular;
- }
- }
- }
- .button {
- padding: 12rpx 35rpx 11rpx 35rpx;
- background-color: #00321e;
- border-radius: 32rpx;
- color: #d5c49b;
- font-size: 28rpx;
- font-weight: 500;
- }
- }
- }
- }
- .introduce {
- padding: 40rpx 19rpx 40rpx 30rpx;
- border-bottom: 8rpx solid #f5f5f5;
- .practice {
- margin-top: 34rpx;
- .practice-item {
- display: flex;
- align-items: center;
- .simple {
- width: 6rpx;
- height: 26rpx;
- background: #00321e;
- border-radius: 3rpx;
- }
- .practice-details {
- font-size: 28rpx;
- font-weight: 700;
- color: #1a1a1a;
- margin-left: 16rpx;
- }
- }
- .introduction-details {
- margin-top: 19rpx;
- font-size: 24rpx;
- color: #666666;
- font-weight: 500;
- text-align: left;
- .item {
- font-size: 24rpx;
- color: #666666;
- }
- }
- }
- .middle {
- margin-top: 34rpx;
- .middle-item {
- display: flex;
- align-items: center;
- .simple {
- width: 6rpx;
- height: 26rpx;
- background-color: #00321e;
- border-radius: 3rpx;
- }
- .material {
- font-size: 28rpx;
- font-weight: 700;
- color: #1a1a1a;
- margin-left: 16rpx;
- }
- }
- .item-block {
- margin-top: 19rpx;
- font-size: 24rpx;
- font-weight: 400;
- color: #666;
- line-height: 38rpx;
- }
- }
- .top {
- .simple-content {
- color: #666666;
- font-weight: 400;
- font-size: 24rpx;
- margin-top: 19rpx;
- }
- .simple {
- display: flex;
- align-items: center;
- .line {
- width: 6rpx;
- height: 26rpx;
- line-height: 26rpx;
- background-color: #00321e;
- border-radius: 3rpx;
- }
- .item {
- margin-left: 16rpx;
- font-size: 28rpx;
- font-weight: 700;
- color: #1a1a1a;
- }
- }
- }
- }
- .personal {
- border-bottom: 8rpx solid #f5f5f5;
- .item {
- display: flex;
- margin: 28rpx 30rpx 40rpx 30rpx;
- .follow-button {
- margin-top: 12rpx;
- color: #00321e;
- font-size: 28rpx;
- font-weight: 400;
- padding: 10rpx 26rpx;
- background-color: rgba(218, 198, 161, 1);
- border-radius: 18rpx;
- height: 40rpx;
- line-height: 40rpx;
- }
- .name-time {
- margin-left: 18rpx;
- flex: 1;
- .name {
- font-size: 28rpx;
- line-height: 40rpx;
- color: #1a1a1a;
- font-weight: 400;
- opacity: 1;
- letter-spacing: -1rpx;
- margin-bottom: 10rpx;
- }
- .time {
- font-size: 24rpx;
- font-weight: 500;
- line-height: 33rpx;
- color: #999999;
- opacity: 1;
- }
- }
- image {
- width: 83rpx;
- height: 83rpx;
- }
- }
- }
- .three-even {
- margin: 0 auto;
- .item {
- display: flex;
- width: 690rpx;
- margin: 0 30rpx;
- padding-bottom: 45rpx;
- border-bottom: 1rpx solid #e6e6e6;
- .link {
- display: flex;
- image {
- width: 39rpx;
- height: 37rpx;
- margin-left: 44rpx;
- }
- .num {
- margin-left: 11rpx;
- color: #999;
- }
- }
- .message {
- display: flex;
- image {
- margin-left: 44rpx;
- width: 38rpx;
- height: 30rpx;
- }
- .num {
- margin-left: 11rpx;
- font-size: 24rpx;
- color: #999999;
- font-weight: 500;
- }
- }
- .good {
- display: flex;
- image {
- width: 37rpx;
- height: 37rpx;
- }
- .num {
- margin-left: 17rpx;
- font-size: 24rpx;
- color: #999999;
- font-weight: 500;
- }
- }
- }
- }
- .title {
- margin: 33rpx 36rpx 18rpx 10rpx;
- padding-left: 16rpx;
- font-size: 32rpx;
- font-weight: 700;
- color: #1a1a1a;
- }
- .top-image {
- width: 750rpx;
- height: 584rpx;
- image {
- width: 750rpx;
- height: 584rpx;
- }
- }
- </style>
|