lucky_shop/pages_tool/cases/index.vue

<template>
  <view>
    <view class="about w100" :style="tabBarPagePaddingStyle">
      <view class="list_cotact padding-top">
        <view class="container">
          <block v-for="(item, index) in dataList" :key="index">
            <view class="view_ul_100" style="margin-bottom:30rpx;">
              <view class="bl clearfix bor bg-white">
                <block v-if="item.$orig.case_type === 0">
                  <view class="video-container">
                    <video class="adaptive-video" style="height:400rpx;" autoPauseIfNavigate="true" autoPauseIfOpenNative="true" autoplay="false" enableAutoRotation="true" id="myVideo" :poster="item.g0" :src="item.g1" controls="true"></video>
                  </view>
                </block>
                <block v-if="item.$orig.case_type === 1">
                  <view>
                    <image style="width:100%;height:300rpx;" :src="item.g2" mode="widthFix" show-menu-by-longpress></image>
                  </view>
                </block>
                <view style="padding:20rpx;">
                  <view style="font-size:36rpx;font-weight:600;">{{item.$orig.title}}</view>
                  <view>{{item.$orig.desc}}</view>
                  <view style="font-size:24rpx;color:#888;padding-top:20rpx;">{{$lang("tool.cases.index.l22.t0") + item.g3}}</view>
                  <block v-if="item.$orig.files_url">
                    <view @tap="toDetail(item.$orig)" class="item">
                      <view class="article-img">
                        <image class="cover-img" :src="item.g4" mode="widthFix" @error="imgError(index)" show-menu-by-longpress></image>
                      </view>
                      <view class="info-wrap">
                        <view class="title">{{item.$orig.files_title}}</view>
                        <view class="read-wrap">
                          <text>{{ $lang("tool.cases.index.l31.t0") }}</text>
                        </view>
                      </view>
                    </view>
                  </block>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view class="goods-sku">
      <uni-popup ref="informationPopup" class="vue-ref" type="bottom" @change="change">
        <view class="liuyan-popup-layer popup-layer">
          <view @tap="closeinformationPopup" class="head-wrap">
            <text>{{ $lang("tool.cases.index.l47.t0") }}</text>
            <text class="iconfont icon-close"></text>
          </view>
          <scroll-view class="liuyan-body" scroll-y="true">
            <view style="padding:0 30rpx;">
              <view class="fui-cell-group">
                <view class="fui-cell">
                  <view class="fui-cell-label">{{ $lang("order._components.common-payment.l138.t0") }}</view>
                  <view class="fui-cell-info">
                    <input class="fui-input" placeholder=$lang("tool.cases.index.l56.t0") v-model="Form.realname" />
                  </view>
                </view>
                <view class="fui-cell">
                  <view class="fui-cell-label">{{ $lang("tool.cases.index.l60.t0") }}</view>
                  <view class="fui-cell-info">
                    <input class="fui-input" maxlength="11" placeholder=$lang("tool.cases.index.l62.t0") type="number" v-model="Form.mobile" />
                  </view>
                </view>
                <view class="fui-cell">
                  <view class="fui-cell-label" style="position:absolute;top:10px;">{{ $lang("tool.cases.index.l66.t0") }}</view>
                  <view class="fui-cell-info" style="margin-left:160rpx;border:solid 2rpx #eee;">
                    <textarea class="textarea" style="font-size:28rpx;padding:10rpx;" placeholder=$lang("tool.cases.index.l68.t0") v-model="Form.remark"></textarea>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="button-box">
            <button type="primary" @tap="save">{{ $lang("diy.diy-form.l142.t0") }}</button>
          </view>
        </view>
      </uni-popup>
    </view>
    <uni-popup ref="videoPopup" class="vue-ref" style="background:transparent;width:100%;height:100%;" type="center" @change="videochange">
      <view class="video-container" style="position:fixed;top:30%;width:100%;left:0;">
        <video class="adaptive-video" autoPauseIfNavigate="true" autoPauseIfOpenNative="true" autoplay="false" enableAutoRotation="true" id="myVideo" :src="video_url" controls="true"></video>
      </view>
    </uni-popup>

    <!-- 底部tabBar -->
    <view id="tab-bar">
      <diy-bottom-nav></diy-bottom-nav>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      shop: {},
      cases_bg: "public/static/img/diy_view/member_info_bg.png",
      file_list: [],
      video_list: [],
      cases_tip: "123",
      markers: [],
      Form: {
        realname: "",
        mobile: ""
      },
      ismessage: 0,
      video_url: ""
    };
  },
  onLoad() {
    this.init();
  },
  onShareAppMessage() {
    // 分享功能
  },
  methods: {
    init() {
      this.$api.sendRequest({
        url: "/api/index/cases",
        success: (res) => {
          if (res.code === 0) {
            this.dataList = res.data;
            this.shop = res.shop;
            this.cases_bg = res.set.cases_bg ? res.set.cases_bg : "public/static/img/diy_view/member_info_bg.png";
            this.file_list = res.file_list;
            this.video_list = res.video_list;
            this.cases_tip = res.set.cases_tip || "123";
            this.markers = [{
              id: 1,
              latitude: this.shop.latitude,
              longitude: this.shop.longitude
            }];
          }
        },
        fail: (err) => {
        }
      });
    },
    toDetail(item) {
      const url = item.files_url;
      uni.showLoading({ title: $lang("tool.cases.index.l143.t0") });
      try {
        uni.downloadFile({
          url: url,
          success: (res) => {
            if (res.statusCode === 200) {
              const filePath = res.tempFilePath;
              uni.openDocument({
                filePath: filePath,
                success: () => {
                },
                fail: () => {
                },
                complete: () => {
                  uni.hideLoading();
                }
              });
            }
          },
          fail: (err) => {
            uni.hideLoading();
          },
          complete: (res) => {
            if (res.statusCode === 404) {
              uni.showToast({ title: $lang("tool.cases.index.l167.t0"), icon: "none" });
            }
          }
        });
      } catch (e) {
        uni.hideLoading();
      }
    },
    imgError(index) {
      if (this.list[index]) {
        this.list[index].cover_img = this.$util.getDefaultImage().article;
      }
    },
    showVideo(item) {
      this.video_url = item.video_url;
      this.$refs.videoPopup.open();
    },
    videochange() {
      // 视频弹窗变化事件
    },
    onTapDoc(item) {
      const url = this.$util.img(item.files_url);
      uni.showLoading({ title: $lang("tool.cases.index.l143.t0") });
      try {
        uni.downloadFile({
          url: url,
          success: (res) => {
            if (res.statusCode === 200) {
              const filePath = res.tempFilePath;
              uni.openDocument({
                filePath: filePath,
                success: () => {
                },
                fail: () => {
                },
                complete: () => {
                  uni.hideLoading();
                }
              });
            }
          },
          fail: () => {
            uni.hideLoading();
          },
          complete: (res) => {
            if (res.statusCode === 404) {
              uni.showToast({ title: $lang("tool.cases.index.l167.t0"), icon: "none" });
            }
          }
        });
      } catch (e) {
        uni.hideLoading();
      }
    },
    share(item) {
      const url = this.$util.img(item.files_url);
      uni.showLoading({ title: $lang("tool.cases.index.l143.t0") });
      try {
        uni.downloadFile({
          url: url,
          success: (res) => {
            if (res.statusCode === 200) {
              uni.hideLoading();
              const filePath = res.tempFilePath;
              uni.shareFileMessage({
                filePath: filePath,
                success: () => {
                },
                fail: console.error
              });
            }
          },
          fail: () => {
            uni.hideLoading();
          },
          complete: (res) => {
            if (res.statusCode === 404) {
              uni.showToast({ title: $lang("tool.cases.index.l167.t0"), icon: "none" });
            }
          }
        });
      } catch (e) {
        uni.hideLoading();
      }
    },
    test() {
      // 测试方法
    },
    save() {
      this.$api.sendRequest({
        url: "/api/member/message",
        data: this.Form,
        success: (res) => {
          this.$refs.informationPopup.close();
          this.$util.showToast({ title: res.message });
        },
        fail: (err) => {
        }
      });
    },
    change(e) {
      this.ismessage = e.show ? 1 : 0;
    },
    tapMessage() {
      this.ismessage = 1;
      this.$refs.informationPopup.open();
    },
    closeinformationPopup() {
      this.ismessage = 0;
      this.$refs.informationPopup.close();
    },
    Tel(phone) {
      uni.makePhoneCall({
        phoneNumber: phone + "",
        success: (res) => {
        }
      });
    },
    copy(text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({ title: $lang("goods.detail.l591"), icon: "success", duration: 2000 });
        },
        fail: () => {
        }
      });
    },
    tomap() {
      this.copy(this.shop.full_address);
    }
  }
};
</script>

<style scoped>
.item {
  display: flex;
  padding: 30rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
}

.item .article-img {
  margin-right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item .article-img image {
  width: 100%;
}

.item .info-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item .info-wrap .title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 24rpx;
}

.item .info-wrap .abstract {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 24rpx;
}

.item .info-wrap .read-wrap {
  display: flex;
  color: #999ca7;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10rpx;
  line-height: 1;
}

.item .info-wrap .read-wrap text {
  font-size: 24rpx;
}

.item .info-wrap .read-wrap .iconfont {
  font-size: 36rpx;
  vertical-align: bottom;
  margin-right: 10rpx;
}

.item .info-wrap .read-wrap .category-icon {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: var(--base-color);
  margin-right: 10rpx;
}

.item .info-wrap .read-wrap .date {
  margin-left: 20rpx;
}

.liuyan-popup-layer {
  height: 660rpx;
}

.liuyan-popup-layer .free-tip {
  min-width: 72rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  border: none;
  padding: 8rpx 8rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
  font-size: 20rpx;
  display: inline-block;
  font-weight: 700;
  color: var(--main-color);
  background-color: var(--main-color-shallow);
}

.liuyan-popup-layer .liuyan-body {
  position: absolute;
  left: 0;
  right: 0;
  height: 60%;
}

.liuyan-popup-layer .liuyan-body .item {
  padding: 20rpx 0;
  margin: 0 30rpx;
  border-bottom: 1px solid #eee;
}

.liuyan-popup-layer .liuyan-body .item .value {
  margin-left: 20rpx;
}

.liuyan-popup-layer .liuyan-body .item:last-child {
  border-bottom: 0;
}

.popup-layer {
  background: #fff;
}

.popup-layer .head-wrap {
  font-size: 32rpx;
  line-height: 100rpx;
  height: 100rpx;
  display: block;
  text-align: center;
}

.popup-layer .head-wrap .iconfont {
  position: absolute;
  float: right;
  right: 44rpx;
  font-size: 32rpx;
}

.popup-layer .button-box {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 1;
  margin-bottom: 30rpx;
}

.popup-layer .button-box button {
  height: 80rpx;
  background-color: var(--goods-btn-color);
}

.w100 {
  width: 100%;
  padding-bottom: 60rpx;
}

.border-top {
  border-top: 1px solid rgba(78, 78, 78, 0.1);
}

.padding-top {
  padding-top: 30rpx;
}

.container {
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  padding: 0 30rpx;
  width: 100% !important;
}

.clearfix {
  zoom: 1;
  overflow: hidden;
}

.text-center {
  text-align: center;
}

.w50_li {
  float: left;
  margin-bottom: 20rpx;
  width: 50%;
}

.w50_li:nth-child(odd) {
  padding-right: 20rpx;
}

.bl {
  display: block;
}

.bor {
  border-radius: 10rpx;
}

image {
  display: inline-block;
  max-width: 100%;
  position: relative;
  z-index: 0;
}

.line1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list_cotact .view_ul_one .bor {
  padding: 40rpx;
}

.list_cotact .bor image {
  height: 60rpx;
}

.list_cotact .bor .name, .view_ul_100 .name {
  font-size: 32rpx;
  line-height: 44rpx;
  margin-top: 20rpx;
  color: #fff;
}

.list_cotact .view_ul_one .view_li:nth-child(1) > button {
  background: #0054a5;
  height: 200rpx;
  line-height: 20rpx;
}

.list_cotact .view_ul_one .view_li:nth-child(2) {
  background: #1daa39;
  height: 200rpx;
  line-height: 20rpx;
  border-radius: 10rpx;
}

.view_ul_100 .fl {
  width: 10%;
}

.view_ul_100 .fr {
  width: 100%;
}

.view_ul_100 > view {
  background: #fff;
}

.view_ul_100 .text {
  color: rgba(71, 71, 71, 0.79);
  font-size: 24rpx;
  margin-top: 10rpx;
}

.list_cotact .view_ul_100 .name {
  margin-top: 0;
}

.list_cotact .view_ul_two .view_li > view {
  background-color: #fff;
  padding: 20rpx 30rpx 0rpx 30rpx;
}

.list_cotact .view_ul_two .view_li > view .address {
  background-color: #5dc2d0;
  color: #fff;
  display: inline-block;
  font-size: 28rpx;
  line-height: 48rpx;
  margin-bottom: 30rpx;
  padding: 0 30rpx;
  width: auto;
}

.view_ul_two {
  margin-top: 20rpx;
}

.contact_name {
  color: rgba(71, 71, 71, 0.79);
  font-size: 24rpx;
  line-height: 36rpx;
  padding-left: 0rpx;
}

.contact_name image {
  opacity: 0.79;
  width: 30rpx;
}

.message {
  border-radius: 50%;
  bottom: 50%;
  height: 90rpx;
  line-height: 74rpx;
  position: fixed;
  right: 30rpx;
  text-align: center;
  width: 90rpx;
  z-index: 9999;
}
</style>