yicangzongtai_app_240321/pages/research/setup/eventDetails.vue

<template>
  <view class="event-details">
    <navbar ref="navbar" backColor="#666" :config="config"></navbar>
    <view class="middle">
      <!-- 活动消息 -->
      <view v-if="type==0">
        <view v-if="msgList.length>=0">
          <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
            <view class="box">
              <view class="time">
                {{item.create_time}}
              </view>
            </view>
            <view class="content">
              <view class="title">
                {{item.remark}}
              </view>
              <view class="image">
                <image :src="item.message_body.img" mode="widthFix"></image>
              </view>
            </view>
          </view>
          <loadMore v-if="msgList.length>0" :status="status"></loadMore>
        </view>
        <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
      </view>
      <view v-if="type==1">
        <!-- 支付消息 -->
        <!-- 			<view v-if="msgList.length>0">
			<view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
				<view class="box">
					<view class="time">
						{{item.create_time}}
					</view>
				</view>
				<view class="content">
					<view class="title">
						{{item.remark}}
					</view>
					<view class="image">
						<image :src="item.message_body.goods[0].goods_img" mode=""></image>
					</view>
				</view>
			</view>
			<loadMore v-if="msgList.length>0" :status="status"></loadMore>
			</view>
			<nodata v-if="noData" :config="{top:20,content:'暂无消息~'}"></nodata> -->
        <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
          <view v-if="item.message_body.goods.length>1">
            <view class="box">
              <view class="time">
                {{item.create_time}}
              </view>
            </view>
            <view class="content" style="padding: 44rpx 0;">
              <view class="title" style="padding: 0 30rpx;">
                订单已支付
              </view>
              <view class="single-data">
                <view class="img-box u-border-one" style="display: flex;">
                  <view v-for="(i,v) in item.message_body.goods" class="single-img">
                    <image class="goods-img" :src="i.goods_img" v-if="v<3"></image>
                  </view>
                </view>
                <view class="single-bottom">

                  <text>共{{item.message_body.goods_num}}件商品，实付金额 </text>
                  <!-- item.message_body.goods_num -->
                  <view class="money">
                    <rich-text :nodes="$mUtil.priceBigSmall(item.message_body.money)">
                    </rich-text>
                  </view>

                  <!-- 	{{item.message_body.money}} -->

                </view>
              </view>
            </view>
          </view>
          <view v-else>
            <view class="box">
              <view class="time u-text2">
                {{item.create_time}}
              </view>
            </view>
            <view class="content">
              <view class="title">
                订单已支付
              </view>
              <view class="small-box">
                <view v-if="item.message_body.goods_type==4">
                  <view class="small-left">
                    <image :src="imgUrl+'/delImg/recharge.png'" mode=""></image>
                  </view>
                </view>
                <view v-else>
                  <view class="small-left">
                    <image :src="item.message_body.goods[0].goods_img" mode=""></image>
                  </view>
                </view>


                <view v-if="item.message_body.goods_type==3">
                  <view class="small-right">
                    <view class="small-top u-text2 ">
                      {{item.message_body.goods[0].goods_name}}
                    </view>
                    <view class="specifications u-mt50">
                      规格：<text>{{item.message_body.goods[0].goods_spec}}</text>
                    </view>
                    <view class="price">
                      积分
                      {{item.message_body.total_point}}
                    </view>
                  </view>
                </view>
                <view v-else>
                  <view class="small-right">
                    <view class="small-top u-text2 ">
                      {{item.message_body.goods[0].goods_name}}
                    </view>
                    <view class="specifications u-mt50" v-if="item.message_body.goods[0].goods_spec">
                      规格：<text>{{item.message_body.goods[0].goods_spec}}</text>
                    </view>
                    <view class="price">
                      <text
                        style="font-size: 26rpx; color: #1A1A1A; ">￥{{item.message_body.money%1==0?item.message_body.money+'.00':item.message_body.money}}</text>

                      <text style="margin-left: 13rpx; color: #999999;">x {{item.message_body.goods_num}}</text>
                    </view>
                  </view>
                </view>
              </view>
              <view v-if="item.message_body.goods_type==3">
                <view class="bottom-box">
                  共{{item.message_body.goods_num}}件商品，实付积分<text>{{item.message_body.total_point}}</text>
                  <view v-if="item.message_body.total_amount" style="margin-left: 4rpx;">含运费<text
                      style="margin-left: 4rpx;">{{item.message_body.total_amount}}元</text></view>
                </view>
              </view>
              <view v-else>
                <view class="bottom-box">
                  <text>共{{item.message_body.goods_num}}件商品，实付金额 </text>
                  <view class="money">
                    <rich-text :nodes="$mUtil.priceBigSmall(item.message_body.total_amount)">
                    </rich-text>
                  </view>


                </view>
              </view>

            </view>
          </view>

        </view>
        <loadMore v-if="msgList.length>0" :status="status"></loadMore>
      </view>
      <view v-if="type==2">
        <view v-if="msgList.length>0">
          <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
            <view class="box">
              <view class="time">
                {{item.create_time}}
              </view>
            </view>
            <view class="content">
              <view v-if="item.message_body.logistics_status==0">
                <view class="logistics-top">
                  订单已发货
                </view>
              </view>
              <view v-if="item.message_body.logistics_status==1">
                <view class="logistics-top">
                  订单已收货
                </view>
              </view>

              <view class="logistics-box">
                <view class="logistics-left">
                  <image :src="item.message_body.goods[0].goods_img" mode=""></image>
                </view>
                <view class="logistics-right">
                  <view class="logistics-right-top u-text2">
                    {{item.message_body.goods[0].goods_name}}
                  </view>
                  <!-- 修改积分字段 -->
                  <view v-if="item.message_body.exchange==true">
                    <view class="logistics-right-content">
                      ￥{{item.message_body.money}}元 + {{item.message_body.total_point}}积分
                      <text>x{{item.message_body.goods_num}}</text>
                    </view>
                  </view>
                  <view v-if="item.message_body.exchange==false">
                    <view class="logistics-right-content">
                      ￥{{item.message_body.money}} <text>x{{item.message_body.goods_num}}</text>
                    </view>
                  </view>

                  <view class="logistics-right-bottom">
                    物流单号：{{item.message_body.logistic_code}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <loadMore v-if="msgList.length>0" :status="status"></loadMore>
        </view>
        <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
      </view>
      <view v-if="type==3">

        <!-- 				<view v-if="msgList.length>=0">
					<view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
						<view class="box">
							<view class="time">
								{{item.create_time}}
							</view>
						</view>
						<view class="content">
							<view class="title">
								{{item.remark}}
							</view>
							<view class="image">
								<image :src="item.message_body.goods[0].goods_img" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<loadMore v-if="msgList.length>0" :status="status"></loadMore>
				</view>
				<nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata> -->
        <view v-if="msgList.length>=0">
          <view class="after-sales" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
            <view v-if="item.message_body.goods.length>1">
              <view class="box">
                <view class="time">
                  {{item.create_time}}
                </view>
              </view>
              <view class="after-sales-msg">
                <view class="title" v-if="item.message_body.rights_status==0">
                  商家已同意
                </view>
                <view class="title" v-if="item.message_body.rights_status==1">
                  商家拒绝维权
                </view>
                <view class="title" v-if="item.message_body.rights_status==2">
                  商家已收货
                </view>
                <view class="title" v-if="item.message_body.rights_status==3">
                  商家已退款
                </view>
                <view class="title" v-if="item.message_body.rights_status==4">
                  商家发起自动退款
                </view>

                <view class="multigraph">
                  <view v-for="(x,y) in item.message_body.goods" :key="y">
                    <image :src="x.goods_img" v-if="y<3" mode=""></image>
                  </view>
                </view>

                <view class="refund-amount">
                  退款金额￥{{item.message_body.money}}<text v-if="item.message_body.refund_point>0">,
                    退款积分{{item.message_body.refund_point}}</text>
                </view>
              </view>
            </view>
            <view class="" v-else>
              <view class="box">
                <view class="time">
                  {{item.create_time}}
                </view>
              </view>
              <view class="after-sales-msg">
                <view class="title" v-if="item.message_body.rights_status==0">
                  商家已同意
                </view>
                <view class="title" v-if="item.message_body.rights_status==1">
                  商家拒绝维权
                </view>
                <view class="title" v-if="item.message_body.rights_status==2">
                  商家已收货
                </view>
                <view class="title" v-if="item.message_body.rights_status==3">
                  商家已退款
                </view>
                <view class="title" v-if="item.message_body.rights_status==4">
                  商家发起自动退款
                </view>
                <view class="article">
                  <view class="article-left">
                    <image :src="item.message_body.goods[0].goods_img" mode=""></image>
                  </view>
                  <view class="article-right">
                    <view class="msg-title u-text2">
                      {{item.message_body.goods[0].goods_name}}
                    </view>
                    <view class="specifications">
                      {{item.message_body.goods[0].goods_spec}}
                    </view>
                    <view class="refund u-flex" style="justify-content: space-between;">
                      <!-- 退款金额：¥ {{item.message_body.money}} -->
                      <view class="refund">
                        退款金额：¥ {{item.message_body.money}}
                      </view>
                      <view class="refund" v-if="item.message_body.refund_point>0">退款积分：
                        {{item.message_body.refund_point}}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <loadMore v-if="msgList.length>0" :status="status"></loadMore>
        </view>
        <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
      </view>
      <view v-if="type==4">
        <view v-if="msgList.length>=0">
          <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
            <view class="box">
              <view class="time">
                {{item.create_time}}
              </view>
            </view>
            <view class="content">
              <view class="title">
                {{item.remark}}
              </view>
              <view class="bottom-time">
                {{item.create_time}}
              </view>
            </view>
          </view>
          <loadMore v-if="msgList.length>0" :status="status"></loadMore>
        </view>
        <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
      </view>

      <view v-if="type==5">
        <view v-if="msgList.length>=0">
          <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
            <view class="box">
              <view class="time">
                {{item.create_time}}
              </view>
            </view>
            <view class="content">
              <view class="title label" v-if="JSON.parse(item.msg).type == 0">
                区县运营中心审核消息提醒
              </view>
              <view class="title">
                {{item.remark}}
              </view>
              <view class="bottom-time">
                {{item.create_time}}
              </view>
            </view>
          </view>
          <loadMore v-if="msgList.length>0" :status="status"></loadMore>
        </view>
        <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
      </view>

    </view>
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
        },
        status: "more",
        params: { //分页
          page: 1,
          limit: 10,
        },
        type: null,
        msgList: [],
        loading: true,
        noData: false,
        totalPage: null,
        currPage: 1,
        listArr: [],
        imgUrl: this.$mConfig.staticUrl
      }

    },
    onLoad(options) {
      this.getType(options.type)
      this.type = options.type
      this.delMsg(options.type)
      this.config.title = options.name
    },
    //上拉加载
    onReachBottom(e) {
      // this.status='loading'
      if (this.totalPage <= this.currPage) {
        this.status = "noMore";
      } else {
        this.status = "more"
        this.params.page++
        this.getType(this.type)
      }
    },

    //下拉刷新
    onPullDownRefresh() {
      this.rest()
      this.getType(this.type)
    },
    methods: {
      goToGbOrderDetails(item) {
        //活动消息
        if (this.type == 0) {
          let activityType = item.message_body.activity_type
          if (activityType == 1) {
            uni.navigateTo({
              url: "../../research/nearby/timeLimit"
            })
          }
          if (activityType == 2) {
            uni.navigateTo({
              url: "../../research/homepage/groupList"
            })
          }
        }
        //支付消息
        if (this.type == 1) {
          console.log(item)
          let goodsType = item.message_body.goods_type
          if (goodsType == 0) {
            let id = item.message_body.order_id
            uni.navigateTo({
              url: `../../order/orderList/orderDetails?id=${id}&status=pay`
            })
            //普通商品完成
          }
          if (goodsType == 1) {
            let id = item.message_body.order_id
            console.log(id)
            uni.navigateTo({
              url: `../../order/orderList/serviceOrderDetail?id=${id}&status=pay`
            })
            //服务详情完成
          }
          if (goodsType == 2) {
            let id = item.message_body.order_id
            console.log(item.message_body.activity_type, "message_body")
            if (item.message_body.activity_type == 2) {
              uni.navigateTo({
                url: "../../order/gbOrder/gbOrderDetails?id=" + id + '&status=pay' + "&groupId=" + item.message_body
                  .goods[0].team_member_id
              })
            }
            //跳转秒杀详情地址还没写上去
            else if (item.message_body.activity_type == 1) {
              uni.navigateTo({
                url: "../../product/goods/seckillGoods?id=" + item.message_body.goods[0].goods_id
              })
            }
            // uni.navigateTo({
            // 	url: `../../order/orderList/orderDetails?id=${id}&status=pay`
            // })

            //秒杀详情
            // let activityType= item.message_body.activity_type 
            // if(activityType == 0){
            // 	this.$mUtil.toast("暂无活动")
            // }
            // if(activityType==1){
            // 	uni.navigateTo({
            // 		url:"../../research/nearby/timeLimit"
            // 	})
            // }
            // if(activityType==2){
            // 	uni.navigateTo({
            // 		url:"../../research/homepage/groupList"
            // 	})
            // }
            //活动商品完成
          }
          //积分商品
          if (goodsType == 3) {
            let id = item.message_body.order_id
            console.log(item)
            console.log(id)
            uni.navigateTo({
              url: `../../order/orderList/orderDetails?id=${id}&status=pay`
            })
            //完成
          }
          if (goodsType == 4) {
            uni.navigateTo({
              url: "../../user/wallet/transactionDetail"
            })
          }
        }
        //物流消息
        if (this.type == 2) {
          let logisticsStatus = item.message_body.logistics_status
          if (logisticsStatus == 0) {
            let id = item.message_body.order_id
            console.log(id)
            console.log(item)
            uni.navigateTo({
              url: `../../order/orderList/orderDetails?id=${id}&status=pay`

            })
          }
          if (logisticsStatus == 1) {
            let id = item.message_body.order_id
            uni.navigateTo({
              url: `../../order/orderList/orderDetails?id=${id}&status=pay`
            })
          }
        }
        //售后消息
        if (this.type == 3) {
          let id = item.message_body.rights_order_id
          console.log(id)
          this.$http.get(`/rights/info/${id}`).then(res => {
            if (res && res.code == 200) {
              let shopid = res.data.shop_id
              let rightsType = res.data.rights_type
              let rightsRefundStatus = res.data.rights_operate_status
              // console.log("shopid",shopid,"rightsType" ,rightsType,"rightsRefundStatus" ,rights_operate_status,"id",id)
              // console.log(res)
              uni.navigateTo({
                url: "../../order/orderList/orderblackDetails?id=" + id + "&shopid=" +
                  shopid + "&type=" + rightsType + "&status=" + rightsRefundStatus
              })
              console.log(666)
            }
          })
          //先全部跳售后详情
        }
        //互动消息
        if (this.type == 4) {
          let id = item.user_id
          let personalType = item.message_body.type
          // if (personalType == 0 || personalType == 2) {
          //   let id = item.message_body.model_id
          //   uni.navigateTo({
          //     url: "../recommend/details?id=" + id
          //   })
          // } else if (personalType == 1) {
          //   let id = item.user_id
          //   uni.navigateTo({
          //     url: "../community/homepage?user_id=" + id
          //   })
          // } else if (personalType == 3) {
          //   let id = item.message_body.model_id
          //   uni.navigateTo({
          //     url: "./toExamine?id=" + id
          //   })
          // } else if (personalType == 4) {
          //   let id = item.message_body.model_id
          //   uni.navigateTo({
          //     url: "./toBusiness?id=" + id
          //   })
          // }
          if (personalType == 4) {
            // let id = item.message_body.model_id
            uni.navigateTo({
              url: "/pages/user/merchant/audit"
            })
          } else if (personalType == 5) {
            uni.navigateTo({
              url: "/pages/workbench/shop/audit"
            })
          }
          console.log(personalType)
          // uni.navigateTo({
          // 	url:"../community/homepage?user_id="+id
          // })
        }

        // 系统消息
        if (this.type == 5) {
          console.log(item, 1111111111)
          if (item.message_body.type == 0) {
            uni.navigateTo({
              url: `/pages/user/regional-agency/index`
            })
          }
        }

      },
      //获取数据
      getType(type) {
        this.$http.get("/private/message/list/" + type, this.params).then(res => {
          if (res && res.code == 200) {
            this.loading = false
            uni.stopPullDownRefresh()

            this.msgList = this.msgList.concat(res.page.list)
            let newList = this.msgList.map(item => item.message_body)
            this.listArr = newList.map(item => item.goods)


            if (this.msgList.length == 0) {
              this.noData = true
            } else {
              this.noData = false
            }
            this.totalPage = res.page.totalPage
            this.currPage = res.page.currPage
            // console.log(11,this.totalPage)
            if (res.page.totalPage <= res.page.currPage) {
              this.status = "noMore";
            } else {
              this.status = "more"
            }
          }
        })
      },
      rest() {
        this.params.page = 1
        this.msgList = []
      },

      //删除页面的未读消息	
      delMsg(type) {
        this.$http.post(`/private/message/read-type/${type}`).then(res => {})
      },
    }
  }
</script>
<style>
  page {
    background-color: #F5F5F5;
  }
</style>

<style scoped lang="scss">
  // .height76{
  // 	height: 76rpx;
  // }
  .after-sales {
    .after-sales-msg {
      background-color: #FFFFFF;
      border-radius: 18rpx;

      .article {
        display: flex;

        .article-left {
          padding-left: 30rpx;
          padding-bottom: 62rpx;

          image {
            width: 165rpx;
            height: 156rpx;
            border-radius: 18rpx;
            overflow: hidden;
          }
        }

        .article-right {
          margin-left: 30rpx;
          padding-right: 30rpx;
          display: flex;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-bottom: 70rpx;

          .msg-title {
            color: #1A1A1A;
            font-weight: 400;
            font-size: 24rpx;
          }

          .specifications {
            font-size: 22rpx;
            color: #999999;
            font-weight: 400;
            line-height: 24rpx;
            margin-top: 4rpx;
          }

          .refund {
            color: #1A1A1A;
            font-size: 26rpx;
            font-weight: 400;
            margin-top: 16rpx;
          }
        }
      }

      .multigraph {
        display: flex;

        image {
          margin-left: 20rpx;
          width: 200rpx;
          height: 200rpx;
          border-radius: 18rpx;
        }
      }

      .refund-amount {
        text-align: right;
        margin-top: 60rpx;
        padding-bottom: 34rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #1A1A1A;
        margin-right: 30rpx;
      }

      .title {
        padding: 44rpx 30rpx 22rpx 30rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #1A1A1A;
      }
    }

    .box {
      display: flex;
      justify-content: center;

      .time {
        font-size: 22rpx;
        font-weight: 400;
        color: #666666;
        line-height: 30rpx;
        padding: 10rpx 20rpx;
        margin: 40rpx 0;
        border-radius: 24rpx;
        background-color: #e3e3e3;
      }
    }


  }

  .middle {
    padding: 0 30rpx;

    .item {
      .box {
        display: flex;
        justify-content: center;

        .time {
          font-size: 22rpx;
          color: #666666;
          font-weight: 400;
          background-color: #e3e3e3;
          padding: 10rpx 20rpx;
          border-radius: 24rpx;
          margin: 40rpx 0;

        }
      }

      .content {
        overflow: hidden;
        padding: 44rpx 30rpx;
        // padding: 44rpx 0;
        background-color: #FFFFFF;
        border-radius: 18rpx;

        .bottom-time {
          font-size: 24rpx;
          color: #999999;
          font-weight: 400;
        }

        .logistics-top {
          font-size: 28rpx;
          color: #1A1A1A;
          font-weight: 400;
        }

        .logistics-box {
          margin-top: 22rpx;
          display: flex;

          .logistics-left {
            image {
              border-radius: 8rpx;
              width: 156rpx;
              height: 156rpx;
            }
          }

          .logistics-right {
            margin-left: 32rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;



            .logistics-right-content {
              color: #1A1A1A;
              font-size: 26rpx;
              font-weight: 400;
              margin-bottom: 8rpx;

              text {
                color: #999999;
                margin-left: 16rpx;
              }
            }

            .logistics-right-bottom {
              font-size: 22rpx;
              color: #999999;
              font-weight: 400;

            }
          }
        }

        .bottom-box {
          text-align: right;
          display: flex;
          align-items: flex-end;
          float: right;

          .money {
            color: #FF0000;
            font-size: 32rpx;
            font-weight: Bold;
          }

        }

        .title {
          font-size: 28rpx;
          color: #1A1A1A;
          font-weight: 400;
          margin-bottom: 26rpx;
        }

        .label {
          font-weight: 700;
        }

        .small-box {
          margin-bottom: 60rpx;
          display: flex;

          .small-left {

            overflow: hidden;

            image {
              border-radius: 10rpx;
              width: 200rpx;
              height: 200rpx;
            }
          }

          .small-right {
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: space-between;
            margin-left: 30rpx;

            .small-top {
              // flex: 1;
              font-size: 28rpx;
              line-height: 40rpx;
              color: #1A1A1A;
              font-weight: 400;

            }

            .specifications {
              font-size: 22rpx;
              color: #999999;
              font-weight: 400;
              margin-bottom: 14rpx;
            }

            .price {
              display: flex;
              color: #1A1A1A;
              font-size: 26rpx;
              font-weight: 400;


            }
          }

        }

        .single-data {
          overflow: hidden;

          .img-box {
            height: 230rpx;
            padding: 0 30rpx;
          }

          .single-img {

            display: flex;
            flex-wrap: nowrap;
            overflow: hidden;
            margin-left: 15rpx;

            .goods-img {
              width: 200rpx;
              height: 200rpx;
              // padding: 0 5rpx;
              border-radius: 10rpx;
              // margin-left: 10rpx;
            }

          }

          .single-img:first-child {
            margin-left: 0;
          }

          .single-bottom {
            float: right;
            text-align: right;
            margin-right: 40rpx;
            margin-top: 60rpx;
            display: flex;
            align-items: baseline;

            .money {
              color: #FF0000;
              font-size: 32rpx;
              font-weight: bold;
            }
          }

        }

        .image {
          image {
            width: 630rpx;
            height: 250rpx;
            border-radius: 15rpx;
          }
        }
      }

    }

  }

  .event-details {
    background-color: #F5F5F5;
  }
</style>