hemall.terabimsoft.com.cn/plugins/shop_server/components/microHome/articleItem.vue

<template>
  <div class="micro-home-article">
    <div class="top-author-info" v-if="articleData.has_one_stick_user">
      <img  @click.stop="toUrl('microhomepage',{},{micuid: articleData.has_one_stick_user.uid})" class="avatar finger-point" :src="articleData.has_one_stick_user.avatar" alt="" />
      <div style="flex: 1">
        <p  @click.stop="toUrl('microhomepage',{},{micuid: articleData.has_one_stick_user.uid})" class="author-name overflow-hide finger-point">{{ articleData.has_one_stick_user.nickname }}</p>
        <p class="create-time">{{articleData.created_at}}</p>
      </div>
      <template>
        <div class="tag is_top" v-if="articleData.is_top == 1">置顶</div>
        <div class="tag is_recommend" v-if="articleData.is_recommend == 1">推荐</div>
        <div v-if="articleData.is_own" class="edit-box">
          <i @click.stop="toEdit" class="iconfont icon-fontclass-bianji"></i>
          <i @click.stop="deleteBtn" class="iconfont icon-fontclass-shanchu"></i>
        </div>
        <div v-else @click.stop="attentionBtn" class="finger-point" :class="[articleData.is_follow ? 'not-follow' : 'follow-btn']" @click="articleData.is_follow = !articleData.is_follow">
          <span v-if="articleData.is_follow">已关注</span>
          <span v-else><i class="el-icon-plus"></i> 关注</span>
        </div>
        <div v-if="is_manager" class="edit-box">
          <el-popover trigger="click" popper-class="share-popover">
            <div class="popover-box">
              <p class="more-box finger-point" @click.stop="adminBtn(1)">{{articleData.is_recommend == 1 ? '取消推荐':'推荐'}}</p>
              <p class="more-box finger-point" @click.stop="adminBtn(2)">{{articleData.is_top == 1 ?'取消置顶':'置顶'}}</p>
              <p class="more-box finger-point" v-if="!articleData.is_own" @click.stop="deleteBtn">删除</p>
            </div>
            <span class="finger-point" ref="popoverBox" slot="reference"><i class="iconfont icon-zb_all_more"></i></span>
          </el-popover>
        </div>
      </template>
    </div>
    <div class="article-title finger-point" @click.stop="getMicroDetails(articleData.id)">{{articleData.title}}
      <span class="watch-num">
        <i class="iconfont icon-fontclass-yulan"></i>
        {{articleData.browse_num}}
      </span>
    </div>
    <!--<div class="article-content text-overflow-3">-->
      <!--{{articleData.contents}} <span class="finger-point" style="color: var(&#45;&#45;color);">阅读全文</span>-->
    <!--</div>-->
    <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'" @click.stop="getMicroDetails(articleData.id)">
      <div class="intro-content cursor-default" ref="desc">
        <div class="merchant-desc" v-if="articleData.contents" :style="{width: is_detail?'825px':''}">
          <template v-if="articleData.contents.indexOf('micro-panel-body') > -1 || articleData.contents.indexOf('</p>') > -1">
            <!--判断是否富文本-->
            <p v-html="articleData.contents"></p>
          </template>
          <template v-else>
            <p v-for="(_item, i) in articleData.contents.split('\n')" :key="i" v-html="checkoutURL(_item)"></p>
          </template>

          <!--{{checkoutURL(articleData.contents)}}-->
        </div>
        <div class="unfold finger-point" @click.stop="showTotalIntro" v-if="showExchangeButton">
          <p>{{exchangeButton ? '展开' : '收起'}}</p>
        </div>
      </div>
    </div>

    <div class="album" v-if="articleData.has_many_image">
      <template v-for="(item, index) in articleData.has_many_image">
        <div class="img-wrap-box" v-if="index <= 8" :key="item.id">
          <el-image
            :src="item.url" alt="" class="img" fit="contain"
            @click.stop="toShowImgViewer(index)"
          ></el-image>
          <div
            v-if="(articleData.has_many_image.length > 9) && (index === 8)"
            class="more-img-mask finger-point" @click.stop="toShowImgViewer(8)"
          >+{{articleData.has_many_image.length - 9}}</div>
        </div>
      </template>
    </div>
    <el-image-viewer
      v-if="showViewer"
      :initialIndex="initialIndex"
      @onClose="showViewer = false"
      :url-list="handleImage(articleData.has_many_image)"/>

    <div class="address" v-if="articleData.address">
      <i class="iconfont icon-fontclass-dizhi"></i>
      <span>{{articleData.address}}</span>
    </div>

    <div class="bottom-opts">
      <!-- 评论 -->
      <span class="finger-point" @click="getStickComment"><i class="iconfont icon-fontclass-pinglun2"></i>{{articleData.comments_num}}</span>
      <!-- 点赞 -->
      <span  @click="isPraiseBtn" :style="{color: articleData.is_praise?'#ec544a':''}" class="finger-point"><i class="iconfont icon-fontclass-tuijian"></i>{{ articleData.praise_num }}</span>
      <!-- 分享 -->
      <client-only>
        <el-popover trigger="click" popper-class="share-popover">
          <div class="popover">
            <p class="share-title">
              微信【扫一扫】分享或者复制链接到第三方平台分享
            </p>
            <div class="flex" style="margin-top: 8px;">
              <canvas class="qrccode-canvas-code" :id="`qrccode-canvas-code${articleData.id}`"></canvas>
              <div class="share-code-link">
                <p style="color: #ec544a;font-size: 12px;">链接：</p>
                <div class="link-box"><input title="" readonly="true" type="text" class="link" v-model="current_url" /><span class="copy-btn" @click.stop="copyContent(current_url)">复制</span></div>
              </div>
            </div>
          </div>
          <span class="flex flex-a-c flex-j-c finger-point" @click="createQrc(fun.toRealURl(`microcommentdetails/${articleData.id}`))" slot="reference"><i class="iconfont icon-bc_share_card"></i>分享</span>
        </el-popover>
      </client-only>
      <!-- 赞赏 -->
      <span class="flex flex-a-c flex-j-c finger-point" v-if="reward_button == 0" @click="moneyShow(0)"><i class="iconfont icon-fontclass-shang"></i>赞赏</span>
    </div>

    <!-- 心愿商品 -->
    <div class="store-goods-box">
      <el-row v-if="articleData.wish_state == 1 && articleData.order_id != 0" style="border-bottom: 1px solid #DCDFE6;">
        <el-col :span="6">心愿商品</el-col>
        <el-col :span="18" class="fulfill-wish" >
          <span @click.stop="getOrderDetail(articleData.order_id)" class="finger-point">
            帮Ta完成心愿
            <i class="iconfont icon-advertise-next"></i>
          </span>
        </el-col>
      </el-row>
      <el-row class="store-goods" v-if="articleData.has_one_store || articleData.has_one_goods">
        <el-col v-if="articleData.has_one_store" @click.native="gotoStore" :span="11" class="left-store flex finger-point">
          <img class="store-img" :src="articleData.has_one_store.arr.thumb" alt="" />
          <div>
            <p class="store-name overflow-hide">{{ articleData.has_one_store.arr.store_name }}</p>
            <p class="store-abbreviation overflow-hide">{{ articleData.has_one_store.arr.address }}</p>
          </div>
        </el-col>
        <el-col v-if="articleData.has_one_goods" @click.native="gotoGoods" :span="13" class="right-goods flex finger-point">
          <el-divider v-if="articleData.has_one_store" direction="vertical"></el-divider>
          <img class="goods-img" :src="articleData.has_one_goods.thumb" alt="" />
          <div>
            <p class="goods-name overflow-hide">{{ articleData.has_one_goods.title }}</p>
            <p>
              <span class="current-price">￥{{ articleData.has_one_goods.price }}</span>
              <span class="price">￥{{ articleData.has_one_goods.market_price }}</span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 评论 -->
    <transition name="el-fade-in">
      <div v-if="showComment">
        <comment ref="commentBox" :is_detail="is_detail" :comments="showCommentData" :comment_open="comment_open" :showMore="showMore"
                 @delReply="delReply" @praiseBtn="praiseBtn" @moneyShow=childMoneyShow @confirm="subMainBtn"
                 @loadMore="loadMore"
                 ></comment>
      </div>
    </transition>

    <!-- 赞赏弹框 -->
    <el-dialog title="赞赏" :visible.sync="rewardDialogVisible" center class="reward-dialog">
      <el-divider class="el-divider"></el-divider>
      <el-form>
        <el-form-item label="赞赏金额：" label-width="90px">
          <el-input v-model="rewardAmount" label="" placeholder="请输入赞赏金额">
            <template slot="append"><span>元</span></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="rewardAmount" @change="changeRadio">
            <el-radio :label="item" border v-for="(item) in radioMap" :key="item">￥{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rewardDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="confirmRewardBtn">确 定 赞 赏</el-button>
      </div>
    </el-dialog>

    <!-- 订单详情 -->
    <el-dialog title="订单详情"
      :visible.sync="orderDialogVisible" center
      class="order-detail-dialog" width="70%"
    >
      <el-divider class="el-divider"></el-divider>
      <div class="order-apply">
        <div class="top-member-info flex flex-a-c" v-if="articleData.has_one_stick_user">
          <img class="member-avatar" :src="articleData.has_one_stick_user.avatar" alt="">
          <span class="member-ncikname overflow-hide">{{ articleData.has_one_stick_user.nickname }}</span>
          <span> 请您帮忙代付一笔订单</span>
        </div>
        <p class="order-tip overflow-hide">好友代付说明：代付前请和好友确认核实订单详情，以免下错订单</p>
      </div>

      <el-table :data="orderData.has_many_order_goods" class="order-table ">
        <el-table-column prop="goods" label="商品" width="500">
          <template slot-scope="scope">
            <div class="flex flex-a-c">
              <img class="goods-img" :src="scope.row.thumb" alt="">
              <div class="goods-name text-overflow-2">{{scope.row.title}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="goods_option_title" label="规格"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="total" label="数量"></el-table-column>
      </el-table>
      <div class="pay-amount" v-if="money">
        实付金额：<span class="value">￥{{money}}</span>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="orderDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="toPay">去 支 付</el-button>
      </div>
    </el-dialog>

    <payBox ref="payBox" :orderPayId="parseInt(order_ids)" :pay_way="pay_way" :pay_sn="pay_sn" :order_pay_id="order_pay_id" :money="money" :from="from" :noJump="true" :rewardTypes="rewardTypes" :trick_id="trick_id" @paySuccess="paySuccess"></payBox>
    <!--from=course-->
  </div>
</template>

<script>
import QRCode from "qrcode";
import Comment from "~/components/microHome/comment";
import payBox from "~/components/default/payBox";
import ElImageViewer from '~/components/default/image-viewer'
var canvas = "";
export default {
  props: {
    articleData: {
      type: Object,
      default: ()=>{},
    },
    is_manager: {}, // 是否显示修改图标
    reward_button: {},
    comment_open: {},
    is_detail: {}
  },
  data() {
    return {
      current_url: "",
      rewardDialogVisible: false, // 打赏
      rewardTypes: 0, //打赏类型。0：帖子打赏||1：评论打赏
      trick_id: 0,
      radioMap: ["1", "5", "10", "20", "30", "50", "100", "200"],
      rewardAmount: '',
      reward_commend_id: 0, //打赏评论id
      showViewer: false,
      initialIndex: 0,

      // 是否展示所有文本内容
      showTotal: true,
      // 显示展开还是收起
      exchangeButton: true,
      // 是否显示展开收起按钮
      showExchangeButton: false,
      rem: '',

      showComment: false,
      page: 1,
      comment_total: 0,
      showMore: false,
      commentData: [],
      showCommentData: [],

      orderDialogVisible: false, // 订单
      order_ids: "",
      orderData: {},
      pay_way: [],
      pay_sn: "",
      order_pay_id: 0,
      money: "",
      from: 'pay',
    };

  },
  mounted(){
    this.$nextTick( ()=> {
      if(this.is_detail == 1) {
        this.getStickComment();
        return
      }
      // 判断介绍是否超过四行
      let rem = parseFloat(this.getRem());
      // console.log('watch 中的rem', rem);
      if (!this.$refs.desc) {
        console.log('desc null');
        return;
      }
      let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
      if (descHeight > 1.25 * rem) {
        // console.log('descHeight:' + descHeight);
        // console.log('如果 descHeight 超过' + (1.25 * rem) + '就要显示展开按钮');
        // 显示展开收起按钮
        this.showExchangeButton = true;
        this.exchangeButton = true;
        // 不是显示所有
        this.showTotal = false;
      } else {
        // 不显示展开收起按钮
        this.showExchangeButton = false;
        // 没有超过四行就显示所有
        this.showTotal = true;
      }
    })
  },
  methods: {
    checkoutURL(str){
      // 要以http 开头  防止图片src开头
      let reg = /^(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-|#|;|%)+)/g;

      str = str.replace(reg, (website)=>{
        return "<span onclick='event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); // 阻止事件冒泡'><a class='article-link-color' href='" + website +"' target='_blank'>" + website + "</a></span>";
      });
      return str;
    },
    toShowImgViewer(index) {
      this.initialIndex = index;
      this.showViewer = true;
    },
    showTotalIntro () {
      this.showTotal = !this.showTotal;
      this.exchangeButton = !this.exchangeButton;
    },
    getRem () {
      const defaultRem = 16;
      let winWidth = window.innerWidth;
      // console.log('winWidth:' + winWidth);
      let rem = winWidth / 375 * defaultRem;
      return rem;
    },
    handleImage(imgList) {
      let arr = [];
      imgList.map(item=> {
        arr.push(item.url);
      });
      return arr;
    },
    gotoStore() {
      window.open(this.fun.toRealURl(`o2o/home/homeseller/${this.articleData.has_one_store.arr.id}`));
    },
    gotoGoods() {
      // this.$router.push(this.fun.getUrl("goods-id", { id: _id }));
      window.open(this.fun.getSiteRoot() + "/plugins/shop_server/goods/"+ this.articleData.has_one_goods.id +"?i=" +this.fun.getKeyByI(), "_blank");
    },
    toEdit() {
      this.$router.push(this.fun.getUrl("microRelease",{},{tid: this.articleData.id}));
    },
    //获取订单详情
    getOrderDetail(oid) {
      this.order_ids = oid;
      this.money = "";
      this.fun.$get("order.another-pay-detail", {
        order_id: oid,
        pid: this.articleData.has_one_stick_user.uid
      },'load').then(response => {
        if (response.result == 1) {
          this.getPayerInfo(oid);
          this.orderData = response.data[0] || {};
          this.order_sn = response.data[0].order_sn;
          this.orderDialogVisible = true;
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    //获取代付会员信息和支付信息
    getPayerInfo(oid) {
      this.fun.$get("order.merge-pay.anotherPayOrder", {
        order_ids: oid,
        mid: this.$route.query.mid,
        pid: this.articleData.has_one_stick_user.uid
      },'load').then(response => {
        if (response.result == 1) {
          let arr = response.data.buttons;
          if (response.data.buttons && !(response.data.buttons instanceof Array)) {
            arr = Object.values(response.data.buttons);
          }
          this.pay_way = arr;
          this.pay_sn = response.data.order_pay.pay_sn;
          this.order_pay_id = response.data.order_pay.id;
          this.money = String(response.data.order_pay.amount);
        } else if (response.result == 0) {
          this.$message.error(response.msg);
        }
      });
    },
    toPay() {
      this.orderDialogVisible = false;
      this.from = 'pay';
      this.$refs.payBox.showPay();
    },
    deleteBtn() {
      this.$confirm('确认删除该帖子吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fun.$post("plugin.micro-communities.api.trick.delTrick", {
          tid: this.articleData.id
        }).then(response => {
          if (response.result == 1) {
            this.$message.success(response.msg);
            this.$emit('updateArticles')
            // this.$router.push(this.fun.getUrl("microIndex"));
          } else {
            this.$message.error(response.msg);
          }
        });
      }).catch(() => {});
    },
    adminBtn(typenum) {
      let dataJson = {
        tid: this.articleData.id
      };
      if (typenum == 1) {
        dataJson.state = this.articleData.is_recommend == 1 ? 0 : 1;
        dataJson.operation = 1;
      } else if (typenum == 2) {
        dataJson.state = this.articleData.is_top == 1 ? 0 : 1;
        dataJson.operation = 2;
      }
      this.fun.$post("plugin.micro-communities.api.trick.changeOperation", dataJson,'load').then(response => {
        if (response.result == 1) {
          if (typenum == 1) {
            this.articleData.is_recommend = this.articleData.is_recommend == 1 ? 0 : 1;
          } else if (typenum == 2) {
            this.articleData.is_top = this.articleData.is_top == 1 ? 0 : 1;
          }
          this.$refs.popoverBox.click();
          // this.$emit('updateArticles');
          this.$message.success(response.msg);
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    // 关注
    attentionBtn() {
      if (this.articleData.is_follow) {
        this.cancelAttention();
      } else {
        this.addAttention();
      }
    },
    cancelAttention() {
      let dataJson = {
        uid: this.articleData.user_id
      };
      this.fun.$post("plugin.micro-communities.api.user.delFollow", dataJson).then(response => {
        if (response.result == 1) {
          this.$set(this.articleData, "is_follow", false); //动态添加
          this.$message.success(response.msg);
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    addAttention() {
      let dataJson = {
        user_id: this.articleData.user_id
      };
      this.fun.$post("plugin.micro-communities.api.user.addFollow", dataJson).then(response => {
        if (response.result == 1) {
          this.$set(this.articleData, "is_follow", true); //动态添加
          this.$message.success(response.msg);
        } else {
          this.$message.error(response.msg);
        }
      });
    },

    praiseBtn(data) {
      let {host_comment_id, second_comment_id, index, chilindex, is_praise} = data;
      // console.log("5555", data);
      if (is_praise == 1) {
        this.$message.error("你已赞过该贴");
        return;
      }
      this.getPraiseData(host_comment_id, second_comment_id, index, chilindex, "");
    },
    isPraiseBtn() {
      if (this.articleData.is_praise == 1) {
        this.$message.error("你已赞过该贴");
        return;
      }
      this.getPraiseData("", "", "", "", "main");
    },
    getPraiseData(host_comment_id, second_comment_id, index, chilindex, type) {
      let dataJson = {};
      if (!host_comment_id) {
        dataJson.tid = this.articleData.id;
      }
      if (host_comment_id && second_comment_id) {
        dataJson.comment_id = second_comment_id;
      } else {
        dataJson.comment_id = host_comment_id;
      }
      this.fun.$post("plugin.micro-communities.api.trick.givePraise", dataJson, 'load').then(response => {
        if (response.result == 1) {
          if ("main" == type) {
            this.$set(this.articleData, "praise_num", this.articleData.praise_num ? this.articleData.praise_num + 1 : 1); //动态添加
          } else {
            // 评论点赞
            if (host_comment_id && second_comment_id) {
              let childData = this.commentData[index].child[chilindex];
              this.$set(childData, "is_praise", 1); //动态添加
              this.$set(childData, "praise_num", childData.praise_num ? childData.praise_num + 1 : 1); //动态添加
            } else {
              let commentData = this.commentData[index];
              this.$set(commentData, "is_praise", 1); //动态添加
              this.$set(commentData, "praise_num", commentData.praise_num ? commentData.praise_num + 1 : 1); //动态添加
            }
            this.showCommentData = this.commentData;
          }
          this.$message.success(response.msg);
        } else {
          this.$message.error(response.msg);
        }
      });
    },

    // 评论
    delReply(data) {
      this.fun.$post("plugin.micro-communities.api.trick.delComment", {commend_id: data.id}).then(response => {
        if (response.result == 1) {
          this.getStickComment('noClick');
          this.$message.success(response.msg);
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    subMainBtn(data) {
      if (data) {
        this.postReplyComments(data);
      }
    },
    postReplyComments(e) {
      let dataJson = {
        image: e.image,
        content: e.content
      };
      dataJson.tid = this.articleData.id;
      if (e.options_type === "reply") {
        dataJson.host_comment_id = e.host_comment_id;
      }else if (e.options_type === "childReply") {
        dataJson.host_comment_id = e.host_comment_id;
        dataJson.second_comment_id = e.second_comment_id;
      }
      this.fun.$post("plugin.micro-communities.api.trick.comments", dataJson,'load').then(response => {
        if (response.result == 1) {
          this.articleData.comments_num += 1;
          this.getStickComment('noClick');
          this.$message.success(response.msg);
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    getStickComment(flag) {
      if(flag !== 'noClick') {
        this.showComment = !this.showComment;
      }

      if(this.showComment) {
        if(this.articleData.comments_num <= 0) {
          if(this.is_detail == 1) {
            this.$nextTick(()=> {
              this.$refs.commentBox && this.$refs.commentBox.showCommentInput('','','noFocus');
              setTimeout(()=>{
                window.scrollTo(0,0)
              },200)
            })
          }
          return
        }
        this.page = 1;
        this.showMore = false;
        this.fun.$post("plugin.micro-communities.api.trick.getStickComment", {
          tid: this.articleData.id,
          page: this.page
        }, '...').then(response => {
          if (response.result == 1) {
            if(this.is_detail == 1) {
              this.$nextTick(()=> {
                this.$refs.commentBox && this.$refs.commentBox.showCommentInput('','','noFocus');
                setTimeout(()=>{
                  window.scrollTo(0,0)
                },200)
              })
            }
            this.comment_total = response.data.total || 0;
            this.commentData = response.data.data || [];
            this.showCommentData = this.commentData.slice(0,3);
            if(this.showCommentData.length < this.comment_total) {
              this.showMore = true;
            }
          } else {
            this.$message.error(response.msg);
          }
        });
      }
    },
    loadMore(position) {
      if(this.showCommentData.length < this.commentData.length) {
        this.showCommentData = this.commentData;
        if(position){
            this.$refs.commentBox.move_comment_handle(true)
        }
        if(this.showCommentData.length < this.comment_total) {
          this.showMore = true;

        }else {
          this.showMore = false;
        }
        return;
      }
      this.page = this.page + 1;
      this.showMore = false;
      this.fun.$post("plugin.micro-communities.api.trick.getStickComment", {
        tid: this.articleData.id,
        page: this.page
      }, "加载中...").then(
        (response)=> {
          if (response.result === 1) {
            var myData = response.data.data;
            this.commentData = this.commentData.concat(myData);
            this.showCommentData = this.commentData;
            if(this.showCommentData.length < this.comment_total) {
              this.showMore = true;
            }
          } else {
            this.page = this.page - 1;
          }
        }
      );

    },

    childMoneyShow(data) {
      this.moneyShow(1, data.id, data.uname);
    },
    moneyShow(tag, cid, uname) {
      this.rewardTypes = tag;
      this.rewardAmount = '';
      this.reward_commend_id = cid;
      if (this.rewardTypes == 0) {
        this.trick_id = this.articleData.id;
        this.pay_sn = this.articleData.has_one_stick_user.nickname;
      }else {
        this.trick_id = this.reward_commend_id;
        this.pay_sn = uname || this.articleData.has_one_stick_user.nickname;
      }
      this.rewardDialogVisible = true;
    },
    changeRadio (val) {
      this.rewardAmount = val;
    },
    confirmRewardBtn() {
      if (this.fun.isTextEmpty(this.rewardAmount)) {
        this.$message.error("请输入或选择打赏金额");
        return;
      }
      if (Number(this.rewardAmount) <= 0) {
        this.$message.error("打赏金额必须大于0");
        return;
      }
      this.getPayData();
    },
    //获取支付类型参数
    getPayData() {
      this.fun.$get("plugin.micro-communities.api.reward-log.get-payment-buttons", {}, "")
        .then(response => {
          if (response.result == 1) {
            this.rewardDialogVisible = false;
            this.pay_way = response.data.buttons || [];
            this.from = 'micro';
            this.money = String(this.rewardAmount);
            this.$refs.payBox.showPay();
          }else {
            this.$message.error(response.msg)
          }
        });
    },
    paySuccess() {
      // 支付成功后
      this.$emit('updateArticles');
    },

    copyContent(text) {
      // 不要格式化
      let copy = `标题：${this.articleData.title}
链接：${text}`;
      this.fun.copyContent(copy);
      this.$message.success('复制成功');
    },
    createQrc(url) {
      this.current_url = this.fun.toPCRealURl(`microcommentdetails/${this.articleData.id}`);
      setTimeout(()=>{
        this.$nextTick(function () {
          // DOM操作
          canvas = document.getElementById(`qrccode-canvas-code${this.articleData.id}`);
          QRCode.toCanvas(canvas, url, error => {
            if (error) {
              console.log(error);
            }
          });
        });
      },200);
    },
    getMicroDetails(stickid) {
      if(this.is_detail == 1) {
        return;
      }
      if(this.fun.getSiteRoot() == "http://localhost:82") {
        this.toUrl('microcommentdetails-tid',{tid: stickid})
      }else {
        window.open(this.fun.getSiteRoot() + `/plugins/shop_server/microcommentdetails/${stickid}?i=` +this.fun.getKeyByI(), "_blank");
      }
    },
    toUrl(url, params, query) {
      this.$router.push(this.fun.getUrl(url, params, query));
    },
  },

  components: {
    Comment,
    payBox,
    ElImageViewer
  },
};
</script>
<style>
  .article-link-color {
    color: #4094f5;
  }
  .article-link-color:hover {
    color: #3462b4;
  }
</style>
<style lang='scss' rel='stylesheet/scss' scoped>
  .qrccode-canvas-code {
    width: 65px!important;
    height: 65px!important;
    margin-right: 10px;
  }
  .share-code-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
  }
  .link-box {
    margin-top: 5px;
    width: 230px;
    display: flex;
    border-radius: 4px;
    overflow: hidden;
  }
  .link {
    background-color: #ececec;
    overflow: hidden;
    flex: 1;
    word-break: keep-all;
    white-space: nowrap;
    padding: 3px 0 3px 5px;
    border: none;
  }
  .copy-btn {
    flex: 0 0 36px;
    font-size: 12px;
    text-align: center;
    background-color: #ec544a;
    color: #ffffff;
    border-radius: 4px;
    padding: 3px 5px;
    cursor: pointer;
  }

  .popover-box {
    display: flex;
    flex-direction: column;
    text-align: center;
    .more-box {
      padding: 6px;
      border-bottom: 1px solid #efefef;
    }
    .more-box:hover {
      color: #ec544a;
    }
    .more-box:last-child {
      border: none;
    }
  }

  .micro-home-article {
    $--color-primary: #409EFF;
    margin: 10px 0;
    width: 100%;
    padding: 14px 18px;
    border-radius: 4px;
    background-color: #ffffff;
    .top-author-info {
      display: flex;
      align-items: center;
      .avatar {
        width: 50px;
        height: 50px;
        margin-right: 10px;
        border-radius: 50%;
        background-color: #b3b3b3;
      }
      .author-name {
        width: 100px;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
      }
      .create-time {
        font-size: 12px;
        color: #888888;
        margin-top: 5px;
      }
      .not-follow {
        width: 80px;
        line-height: 26px;
        color: #ffffff;
        border-radius: 16px;
        background-color: #cacaca;
        text-align: center;
      }
      .follow-btn {
        width: 80px;
        line-height: 26px;
        color: #2973fd;
        border-radius: 16px;
        border: solid 1px #2973fd;
        text-align: center;
      }
      .tag {
        background-color: #f0f6ff;
        border: 1px solid #2070f8;
        color: #2070f8;
        padding: 3px 10px;
        border-radius: 5px;
        margin: 0 5px;
      }
      .is_recommend {
        background-color: #fff4f4;
        border: 1px solid #f2534f;
        color: #f2534f;
      }
      .edit-box {
        color: #838382;
        font-size: 16px;
        .iconfont {
          cursor: pointer;
          font-size: 18px;
          margin-left: 20px;
        }
        .icon-zb_all_more {
          font-size: 22px;
        }
      }
    }
    .article-content, .album, .bottom-opts, .address, .store-goods-box {
      padding: 5px 50px;
    }
    .article-title {
      margin: 10px 10px 0 10px;
      font-size: 16px;
      font-weight: bold;
      .watch-num {
        font-size: 14px;
        font-weight: normal;
        margin-left: 8px;
        color: #6b6b6b;
      }
    }
    .article-content {
      font-size: 14px;
      padding: 0 50px;
      color: #4f4f4f;
    }
    .total-introduce {
      height: auto;
      overflow: hidden;
      font-size: 14px;
      color: #4f4f4f;
      .intro-content {
        margin: 10px;
        .merchant-desc {
          width: 100%;
          line-height: 21px;
        }
      }
      .unfold {
        display: block;
        z-index: 11;
        float: right;
        width: 40px;
        height: 21px;
        p {
          margin: 0;
          line-height: 21px;
          color: #7fbe87;
        }
      }
    }
    .detailed-introduce {
      font-size: 14px;
      color: #434343;
      position: relative;
      overflow: hidden;
      margin: 10px;
      .intro-content {
        // 最大高度设为3倍的行间距
        max-height: 63px;
        line-height: 21px;
        word-wrap: break-word;
        /*强制打散字符*/
        word-break: break-all;
        /*background: #ffffff;*/
        /*同背景色*/
        /*color: #ffffff;*/
        overflow: hidden;
        .merchant-desc {
          width: 100%;
          line-height: 21px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 63px;
          /*截取行数*/
          -webkit-line-clamp: 3;
          text-overflow: ellipsis;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
          //text-indent: -12em;
          /*尾部留空字符数*/
          padding-right: 3em;
        }
        /*&:after,*/
          /*// 这是展开前实际显示的内容*/
        /*&:before {*/
          /*content: attr(title);*/
          /*position: absolute;*/
          /*left: 0;*/
          /*top: 0;*/
          /*width: 100%;*/
          /*color: #434343*/
          /*// overflow: hidden;*/
        /*}*/
        // 把最后最后一行自身的上面三行遮住
        /*&:before {*/
          /*display: block;*/
          /*overflow: hidden;*/
          /*z-index: 1;*/
          /*max-height: 42px;*/
          /*background: #ffffff;*/
        /*}*/
        /*&:after {*/
          /*display: -webkit-box;*/
          /*-webkit-box-orient: vertical;*/
          /*overflow: hidden;*/
          /*height: 63px;*/
          /*截取行数*/
          /*-webkit-line-clamp: 3;*/
          /*text-overflow: ellipsis;*/
          /*-webkit-box-sizing: border-box;*/
          /*box-sizing: border-box;*/
          /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
          //text-indent: -12em;
          /*尾部留空字符数*/
          /*padding-right: 4em;*/
        /*}*!*/
        .unfold {
          z-index: 11;
          width: 40px;
          height: 21px;
          outline: 0;
          position: absolute;
          right: 0;
          bottom: 0;
          p {
            margin: 0;
            line-height: 21px;
            color: #7fbe87;
          }
        }
      }
    }
    .album {
      display: grid;
      grid-template-columns: repeat(3, 190px);
      grid-gap: 10px;
      .img-wrap-box {
        width: 190px;
        height: 190px;
        position: relative;
      }
      .img {
        cursor: pointer;
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
      .more-img-mask {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #ffffff;
        background-color: #161616;
        opacity: 0.5;
      }
    }
    .address {
      font-size: 12px;
      color: #ff8200;
    }
    .bottom-opts {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
      .iconfont {
        margin-right: 4px;
      }
    }
    .store-goods-box {
      .el-row {
        padding: 10px;
        background-color: #f3f3f3;
      }
      .fulfill-wish {
        text-align: right;
        color: #ec544a;
      }

      .left-store, .right-goods {
        flex: 1;
        font-size: 14px;
        line-height: 22px;
        .store-name, .goods-name, .store-abbreviation {
          max-width: 150px;
        }
        .store-img, .goods-img {
          width: 40px;
          height: 40px;
          margin-right: 8px;
          border-radius: 4px;
        }
        .el-divider {
          margin-right: 10px;
          height: 40px;
        }
      }
      .store-abbreviation {
        font-size: 12px;
        color: #737373;
      }
      .current-price {
        font-size: 12px;
        color: #ec544a;
      }
      .price {
        margin-left: 15px;
        font-size: 12px;
        color: #737373;
        text-decoration:line-through
      }

    }

    :deep(.el-dialog) {
      .el-divider {
        margin: 0 0 24px 0;
      }
    }
    :deep(.reward-dialog) {
      .el-radio__inner {
        display: none !important;
      }
      .el-radio-group {
        padding: 0 20px;
        display: grid;
        grid-template-columns: repeat(4, 70px);
        grid-gap: 15px 25px;
        justify-content: center;
        .el-radio {
          text-align: center;
        }
        .is-bordered {
          margin-left: 0;
          margin-right: -10px;
        }
        .is-checked {
          border: none;
          background-color: #ec544a;
          .el-radio__label {
            color: #ffffff;
          }
        }
      }
    }

    .order-detail-dialog {
      .order-apply {
        padding: 14px;
        background-color: #f5f5f5;
        border-radius: 2px;
        .member-avatar {
          width: 28px;
          height: 28px;
          border-radius: 50%;
        }
        .member-ncikname {
          margin: 0 10px;
          display: inline-block;
          max-width: 150px;
        }
        .order-tip {
          margin-top: 10px;
          font-size: 12px;
          color: #f11111;
        }
      }
      .order-table {
        .goods-img {
          width: 60px;
          height: 60px;
          border-radius: 4px;
        }
        .goods-name {
          margin-left: 10px;
          max-width: 350px;
        }
      }
      .pay-amount {
        text-align: right;
        padding: 20px 0;
        font-size: 16px;
        .value {
          color: #f11111;
        }
      }
    }

  }
</style>