<template>
  <view
    class="content"
    :style="
      'background: url(' +
      z_imgPath +
      'card_bg.png' +
      ') no-repeat 0 0 / 100% auto;'
    "
  >
    <view class="head">
      <view
        class="status_bar"
        :style="'height:' + statusBarHeight + 'px;'"
      ></view>
      <view class="header_title">
        <view @click="back()">
          <!-- <image :src="z_imgPath + 'back.png'"></image> -->返回
        </view>
        <view class="hang1">详情</view>
      </view>
    </view>
    <view class="content_title">
      <view
        class="content_title_price hang1"
        :style="
          'background: url(' +
          z_imgPath +
          'img1.png' +
          ') no-repeat 0 0 / 100% auto;'
        "
        >{{ detailInfo.title }} <text>¥{{ detailInfo.show_price }}</text></view
      >
      <view
        class="content_title_tips hang1"
        :style="
          'background: url(' +
          z_imgPath +
          'img2.png' +
          ') no-repeat 0 0 / 100% auto;'
        "
        >{{ detailInfo.card_notice }}</view
      >
    </view>
    <view class="content_main">
      <view class="content_main_zhu animated fadeInUp" v-if="!isHebing">
        <image
          class="image1 imgStyle"
          :src="z_imgPath + 'zhu1.png'"
          :animation="animationData1"
        ></image>
        <image
          class="image2"
          :src="z_imgPath + 'zhu2.png'"
          :animation="animationData1"
        ></image>
        <image
          class="image3"
          :src="z_imgPath + 'zhu3.png'"
          :animation="animationData2"
        ></image>
        <image
          class="image4"
          :src="z_imgPath + 'zhu4.png'"
          :animation="animationData"
        ></image>
        <image
          class="imageUrl"
          :src="'https://hdyfs.languowangluo.cn' + detailInfo.imgurl_detail"
          :animation="animationData2"
          mode="aspectFill"
        ></image>
      </view>
      <view v-if="isHebing">
        <image
          :src="z_imgPath + 'hebing.png'"
          class="image5"
          :animation="animationData4"
        ></image>
      </view>
      <image class="content_main_zuo" :src="z_imgPath + 'zuo1.png'"></image>
    </view>
    <view class="content_lt">
      <image
        :src="z_imgPath + 'img3.png'"
        @click="gotoPage('tujian?id=' + detailInfo.id)"
      ></image>
      <image
        :src="z_imgPath + 'img4.png'"
        @click="$refs.shuoming.open()"
      ></image>
      <image
        :src="z_imgPath + 'img5.png'"
        @click="gotoPage('/pages/user/myCaDetail?caId=' + detailInfo.id)"
      ></image>
      <image :src="z_imgPath + 'img6.png'" @click="getjilv"></image>
      <image :src="z_imgPath + 'img7.png'" @click="tokefu"></image>
    </view>
    <view class="content_bom">
      <!-- @click="order_money('left_count')" -->
      <image
        :src="z_imgPath + 'bom1.png'"
        class="bom1"
        @click="order_money('left_count')"
      ></image>
      <image
        :src="z_imgPath + 'bom2.png'"
        class="bom2"
        @click="order_money('center_count')"
      ></image>
      <image
        :src="z_imgPath + 'bom3.png'"
        class="bom3"
        @click="order_money('right_count')"
      ></image>
      <view class="shang1 shangStyle"
        >必出{{ detailInfo.card_set.center_shang_name }}</view
      >
      <view class="shang2 shangStyle"
        >必出{{ detailInfo.card_set.right_shang_name }}</view
      >
    </view>
    <!-- 确认订单 -->
    <uni-popup ref="dingdan" type="bottom">
      <view class="ckjl animated fadeInUp">
        <view class="ckjl_title">
          <image :src="z_imgPath + 'order_p.png'"></image>
          <view class="ca" @click="$refs.dingdan.close()">×</view>
        </view>
        <view
          class="ckjl_title_con1"
          :style="
            'background: url(' +
            z_imgPath +
            'title_con1_bg.png' +
            ') no-repeat 0 0 / 100% 100%;height:320rpx'
          "
        >
          <view class="order_pic" v-if="pay_news.goods">
            <view style="width: 100%">
              <view style="font-size: 35rpx">{{ detailInfo.title }}</view>
              <view style="margin-top: 40rpx">类型：1包</view>
              <view style="margin-top: 10rpx; width: 100%">
                <text
                  >单价：<text style="color: #feff00"
                    >{{ detailInfo.price }}元</text
                  ></text
                >
                <text>×{{ pay_news.goods.first_num }}</text>
              </view>
            </view>
          </view>
          <view class="order_num">
            <view style="font-size: 28rpx" v-if="pay_news.goods"
              >数量:{{ pay_news.goods.prize_num }}张</view
            >
            <view>
              小计:{{ goods.box_type == 5 ? "" : "￥"
              }}<text
                >{{ pay_news.order_total
                }}{{ goods.box_type == 5 ? "积分" : "" }}</text
              >
            </view>
          </view>
        </view>
        <view
          class="order_title_con1"
          v-if="goods.box_type != 1"
          :style="
            'background: url(' +
            z_imgPath +
            'title_con2_bg.png' +
            ') no-repeat 0 0 / 100% 100%;height:240rpx'
          "
        >
          <view style="font-size: 28rpx; margin-bottom: 10rpx">支付方式</view>
          <!-- 一番赏 -->
          <template>
            <view
              class="fangshi"
              @click="change_yuan_index(1)"
              style="padding-bottom: 15rpx"
            >
              <view class="flex_center">
                <image
                  :src="z_imgPath + 'bi.png'"
                  style="width: 30rpx; height: 30rpx"
                ></image>
                <view>
                  使用星钻抵扣￥<text>{{ pay_news.use_integral }}</text
                  >（剩余：<text>{{ pay_news.integral }}</text
                  >）
                </view>
              </view>
              <image
                :src="z_imgPath + 'yuan' + (bi ? '_sel' : '') + '.png'"
              ></image>
            </view>
            <view
              class="fangshi"
              @click="change_yuan_index(2)"
              style="
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                padding-top: 15rpx;
              "
            >
              <view class="flex_center">
                <image
                  :src="z_imgPath + 'yue.png'"
                  style="width: 33rpx; height: 28rpx"
                ></image>
                <view>
                  使用星钻抵扣￥<text>{{ pay_news.use_money }}</text
                  >（剩余：<text>{{ pay_news.money }}</text
                  >）
                </view>
              </view>
              <image
                :src="z_imgPath + 'yuan' + (yue ? '_sel' : '') + '.png'"
              ></image>
            </view>
          </template>
        </view>
        <view style="font-size: 24rpx; margin: 20rpx 10rpx">
          下单购买即表示同意
          <text
            style="color: #feff00"
            @click="gotoPage('/pages/guize/guize?type=2')"
            >《用户服务协议条款》</text
          >
        </view>
        <view class="order_title_btn">
          <view>
            总计:￥<text style="font-size: 40rpx; color: #feff00">{{
              pay_news.order_total
            }}</text>
          </view>
          <view
            class="zhifu"
            @click="pay()"
            :style="
              'background: url(' +
              z_imgPath +
              'zhifu.png' +
              ') no-repeat 0 0 / 100% 100%;'
            "
          ></view>
        </view>
      </view>
    </uni-popup>
    <!-- 奖品弹窗 -->
    <uni-popup
      ref="jp_show"
      type="center"
      mask-background-color="rgba(0,0,0,0.8)"
    >
      <view class="pop_jp">
        <image class="pop_gongxi" :src="z_imgPath + 'jp_img.png'"></image>
        <view class="jp_title animated zoomIn">
          <view class="jp_title_1">
            <view class="jp_list" v-for="(v, i) in jp_arr" :key="i">
              <view class="list_img">
                <image
                  :src="'https://hdyfs.languowangluo.cn' + v.goodslist_imgurl"
                ></image>
                <view>{{ v.goodslist_title }}</view>
              </view>
              <!-- <view class="hang1">{{v.goodslist_title}}</view> -->
            </view>
          </view>
        </view>
        <image
          class="dhbtmbox"
          :src="z_imgPath + 'dong_bottom.png'"
          style="margin-top: 35rpx"
        ></image>
        <view class="jp_btn">
          <image
            @click="tosangdai()"
            class="animated fadeInLeft"
            :src="z_imgPath + 'qsd.png'"
          ></image>
          <image
            @click="$refs.jp_show.close()"
            class="animated fadeInRight"
            :src="z_imgPath + 'jixu.png'"
          ></image>
        </view>
      </view>
    </uni-popup>
    <!-- 抽卡记录 -->
    <uni-popup ref="jilv" type="bottom" :isMaskClick="false">
      <view class="ckjl animated fadeInUp">
        <view class="ckjl_title">
          <image :src="z_imgPath + 'ckjl.png'"></image>
          <view
            class="ca"
            @click="$refs.jilv.close(), (page_num = 1), (mixTotal = 0)"
            >×</view
          >
        </view>
        <view class="jilv_title">
          <view
            v-for="(item, index) in shang_cate"
            :key="index"
            @click="change_shang_id(item.id)"
            :class="shang_id == item.id ? 'selActive' : ''"
          >
            {{ item.title }}
          </view>
        </view>
        <!-- -->
        <scroll-view
          scroll-y="true"
          @scrolltolower="getjilv"
          style="height: 900rpx"
        >
          <view v-for="(item, index) in jl_Arr" :key="index" class="jilv_list">
            <view>
              <view class="flex_center">
                <image :src="item.user_info.headimg"></image>
                <view class="hang1" style="max-width: 260rpx"
                  >{{ item.user_info.nickname }}
                </view>
              </view>
              <view style="font-size: 24rpx">{{ item.addtime }}</view>
            </view>
            <view>
              <view class="flex_center">
                <image
                  :src="item.goodslist_imgurl"
                  style="border-radius: 8rpx"
                ></image>
                <view class="hang1" style="max-width: 300rpx">{{
                  item.goodslist_title
                }}</view>
              </view>
              <view style="font-size: 26rpx">X{{ item.prize_num }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- 购买说明 -->
    <uni-popup ref="shuoming" type="center">
      <view
        class="popGm"
        :style="
          'background: url(' +
          z_imgPath +
          'gmsm_p.png' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      >
        <view class="pop_con">
          <scroll-view scroll-y="true" style="max-height: 630rpx">
            <view v-html="news"></view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      z_imgPath: this.$z_img1 + "chouka/",
      shang_cate: [],
      shang_id: 0,
      bi: true, // 1:是否币支付,
      yue: true, // 2:星钻支付
      pay_news: {}, // 订单信息
      goods: {},
      animationData: {},
      animationData1: {},
      animationData2: {},
      animationData4: {},
      isHebing: false,
      detailId: "",
      detailInfo: {},
      page_num: 1,
      mixTotal: 0, // 统计信息总页数
      type: "",
      // 支付失效
      pay_status: false,
      jp_arr: [],
      jl_Arr: [],
      news: "",
    };
  },
  onLoad(e) {
    this.detailId = e.goods_id;
  },
  onShow() {
    this.getDeatil();
  },
  onShareAppMessage(e) {
    let that = this;
    return {
      title:
        that.$config.getAppSetting("app_name") + that.detailInfo.title + "卡册",
      imageUrl:
        "https://hdyfs.languowangluo.cn" + that.detailInfo.imgurl_detail,
      path:
        "/pages/DrawCard/cardDetail?goods_id=" +
        that.detailId +
        "&pid=" +
        uni.getStorageSync("userinfo").ID,
    };
  },
  methods: {
    tosangdai() {
      uni.setStorageSync("page", this.$mp.page.route);
      uni.switchTab({
        url: "../sangdai/sangdai",
      });
    },
    getDeatil() {
      let that = this;
      that.req({
        url: "card_goods_detail",
        data: {
          goods_id: that.detailId,
        },
        success(res) {
          if (res.status == 1) {
            that.detailInfo = res.data;
          }
        },
      });
      that.req({
        url: "card_level",
        success(res) {
          if (res.status == 1) {
            that.shang_cate = res.data;
            if (res.data.length > 0) {
              that.shang_id = res.data[0].id;
            }
          }
        },
      });
      that.req({
        url: "card_rule",
        success(res) {
          if (res.status == 1) {
            that.news = res.data;
          }
        },
      });
    },
    tokefu() {
      // #ifdef  MP-WEIXIN
      wx.openCustomerServiceChat({
        extInfo: {
          url: uni.getStorageSync("wx_link"), //客服地址链接
        },
        corpId: uni.getStorageSync("corpid"), //必须和你小程序上的一致
        success(res) {
          console.log(res, 1);
        },
        fail(res) {
          console.log(res, 2);
        },
      });
      // #endif
    },
    order_money(type) {
      let that = this;
      that.type = type;
      that.req({
        url: "buy_money",
        data: {
          card_id: that.detailId,
          type: that.type,
          use_money_is: that.yue ? 1 : 2,
          use_integral_is: that.bi ? 1 : 2,
        },
        success(res) {
          if (res.status == 1) {
            that.pay_news = res.data;
            that.$refs.dingdan.open();
          }
        },
      });
    },
    pay() {
      let that = this;
      let info = {
        card_id: that.detailId,
        type: that.type,
        use_money_is: that.yue ? 1 : 2,
        use_integral_is: that.bi ? 1 : 2,
      };
      if (that.pay_status) {
        return;
      }
      if (info) {
        that.pay_status = true;
        that.req({
          url: "card_goods_buy",
          data: info,
          success(res) {
            if (res.status == 1) {
              that.jp_arr = [];
              if (res.data.status == 1) {
                that.info = {};
                uni.requestPayment({
                  provider: "wxpay",
                  timeStamp: res.data.res.timeStamp,
                  nonceStr: res.data.res.nonceStr,
                  package: res.data.res.package,
                  signType: "MD5",
                  paySign: res.data.res.paySign,
                  complete(ress) {
                    if (ress.errMsg == "requestPayment:fail cancel") {
                      uni.showToast({
                        title: "取消支付",
                        icon: "loading",
                        duration: 1000,
                      });
                    }
                    if (ress.errMsg == "requestPayment:ok") {
                      uni.showToast({
                        title: "支付成功",
                        icon: "success",
                        duration: 1000,
                      });
                      setTimeout(() => {
                        that.$refs.dingdan.close();
                        that.req({
                          url: "prize_log",
                          data: {
                            order_num: res.data.order_num,
                          },
                          success(aa) {
                            if (aa.status == 1) {
                              // that.jp_news = aa.data.user_info
                              that.jp_arr = aa.data;
                              that.dakai();
                              // that.$refs.jp_show.open()
                              // that.loadData(1)
                            }
                          },
                        });
                      }, 1500);
                    }
                  },
                });
              } else {
                that.info = {};
                uni.showToast({
                  title: "支付成功",
                  icon: "success",
                  duration: 1000,
                });
                that.$refs.dingdan.close();
                that.req({
                  url: "prize_log",
                  data: {
                    order_num: res.data.order_num,
                  },
                  success(aa) {
                    if (aa.status == 1) {
                      // that.jp_news = aa.data.user_info
                      that.jp_arr = aa.data;
                      setTimeout(() => {
                        that.dakai();
                      }, 300);
                      console.log(that.jp_arr);
                      // that.loadData(1)
                    }
                  },
                });
              }
            }
            if (res.status == 0) {
            }
          },
          complete() {
            that.pay_status = false;
          },
        });
      }
    },
    // 中赏记录
    change_shang_id(e) {
      this.shang_id = e;
      this.page_num = 1;
      this.jl_Arr = [];
      this.getjilv();
    },
    getjilv() {
      let that = this;
      console.log(that.page_num, this.mixTotal);
      if (this.page_num !== 1 && this.page_num > this.mixTotal) {
        return;
      }
      that.req({
        url: "card_reward_log",
        Loading: true,
        data: {
          page: that.page_num,
          category_id: that.shang_id,
          card_id: that.detailId,
        },
        success(res) {
          if (res.status == 1) {
            // that.shang_cate = res.data.category;
            that.mixTotal = res.data.last_page;
            if (that.page_num === 1) {
              that.jl_Arr = res.data.data;
            } else {
              that.jl_Arr = that.jl_Arr.concat(res.data.data);
            }
            console.log(that.jl_Arr);
            that.page_num += 1;
            that.$refs.jilv.open();
          }
        },
      });
    },
    back() {
      var pages = getCurrentPages();
      if (pages.length == 1 && pages[0].route == "pages/DrawCard/cardDetail") {
        uni.redirectTo({
          url: "/pages/DrawCard/index",
        });
      } else {
        uni.navigateBack();
      }
    },
    dakai() {
      //下移
      var animation = uni.createAnimation({
        duration: 300,
        timingFunction: "ease",
      });
      animation.translateY(-90).step(),
        (this.animationData = animation.export());

      //上移
      var animation1 = uni.createAnimation({
        duration: 400,
        timingFunction: "ease",
      });
      animation1.translateY(90).step(),
        (this.animationData1 = animation1.export());
      // 遮罩变小
      var animation2 = uni.createAnimation({
        duration: 400,
        timingFunction: "ease",
      });
      animation2.opacity(0).step(), (this.animationData2 = animation2.export());
      // return;
      setTimeout(() => {
        //合并后转圈
        var that = this;
        this.isHebing = true;
        var animation4 = uni.createAnimation({
          duration: 1500,
          timingFunction: "ease-in",
        });
        setTimeout(() => {
          animation4.rotate(2160).step(),
            (this.animationData4 = animation4.export());
        }, 300);
        //动画结束，奖品弹窗
        setTimeout(() => {
          that.$refs.jp_show.open();
          setTimeout(() => {
            this.isHebing = false;
            animation.translateY(0).step();
            this.animationData = animation.export();
            animation1.translateY(0).step();
            this.animationData1 = animation1.export();
            animation2.opacity(1).step(),
              (this.animationData2 = animation2.export());
            animation4.rotate(0).step({ duration: 0 }); //恢复转圈
            this.animationData4 = animation4.export();
          }, 300);
        }, 1600);
        // this.yincang();
      }, 300);
    },
    yincang() {
      var that = this;
      this.isHebing = true;
      var animation4 = uni.createAnimation({
        duration: 1500,
        timingFunction: "ease-in",
      });
      setTimeout(() => {
        animation4.rotate(1800).step(),
          (this.animationData4 = animation4.export());
      }, 300);
      setTimeout(() => {
        that.$refs.jp_show.open();
        this.isHebing = false;
        animation4.rotate(0).step({ duration: 0 });
        this.animationData4 = animation4.export();
      }, 1600);
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding-top: calc(var(--status-bar-height) + 140rpx);
  color: #fff;
  .head {
    position: fixed;
    top: 0;
    z-index: 20;
    .header_title {
      height: 70rpx;
      line-height: 70rpx;
      width: 100%;
      box-sizing: border-box;
      font-weight: bold;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      box-sizing: border-box;
      > view:nth-of-type(1) {
        display: flex;
        align-items: center;
      }
      > view:nth-of-type(2) {
        width: 520rpx;
        text-align: center;
        /* margin: auto; */
      }
      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
  &_title {
    margin: 0 39rpx 37rpx;
    color: #fff;
    &_price {
      width: 672rpx;
      height: 68rpx;
      font-size: 36rpx;
      line-height: 68rpx;
      text-align: center;
      padding: 0 30rpx;
      box-sizing: border-box;
      text {
        font-size: 32rpx;
      }
    }
    &_tips {
      width: 601rpx;
      height: 47rpx;
      margin: 18rpx auto 0;
      font-size: 22rpx;
      line-height: 47rpx;
      text-align: center;
    }
  }
  &_main {
    position: relative;
    margin: 0 auto;

    &_zhu {
      text-align: center;
      width: 750rpx;
      position: relative;
      z-index: 2;
      .imgStyle {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        // z-index: 2;
      }
      .image1 {
        width: 480rpx;
        height: 287rpx;
      }
      .image2 {
        width: 165rpx;
        height: 165rpx;
        position: absolute;
        top: 133rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 5;
      }
      .image3 {
        width: 478rpx;
        height: 721rpx;
        position: absolute;
        top: 88rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 2;
      }
      .image4 {
        width: 480rpx;
        height: 286rpx;
        position: absolute;
        top: 600rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 1;
      }
      .imageUrl {
        width: 219rpx;
        height: 407rpx;
        position: absolute;
        top: 264rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 3;
      }
    }
    .image5 {
      width: 507rpx;
      height: 507rpx;
      position: absolute;
      top: 191rpx;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 1;
    }
    &_zuo {
      width: 750rpx;
      height: 370rpx;
      position: absolute;
      top: 613rpx;
    }
  }
  &_lt {
    position: fixed;
    right: 10rpx;
    bottom: 300rpx;
    z-index: 6;
    image {
      width: 114rpx;
      height: 114rpx;
      display: block;
      margin-bottom: 18rpx;
    }
  }
  &_bom {
    .bom1 {
      width: 286rpx;
      height: 132rpx;
      position: fixed;
      bottom: 30rpx;
      z-index: 5;
    }
    .bom2 {
      width: 329rpx;
      height: 132rpx;
      position: fixed;
      bottom: 73rpx;
      left: 210rpx;
      z-index: 5;
    }
    .bom3 {
      width: 286rpx;
      height: 132rpx;
      position: fixed;
      bottom: 30rpx;
      left: 460rpx;
      z-index: 5;
    }
    .shangStyle {
      background: rgba(17, 17, 17, 0.8);
      // border-style:inset;
      // border: 6rpx solid #19A353;
      font-size: 22rpx;
      // -webkit-text-stroke: 1rpx #19C761;
      // text-stroke: 1rpx #19C761;
      color: #fff;
      padding: 8rpx 15rpx;
      border-radius: 10rpx;
      box-shadow: inset 0 0 20rpx #19a353;
    }
    .shang1 {
      position: fixed;
      bottom: 210rpx;
      left: 310rpx;
      z-index: 5;
    }
    .shang2 {
      position: fixed;
      bottom: 166rpx;
      right: 52rpx;
      z-index: 5;
    }
  }
  .popGm {
    width: 562rpx;
    height: 896rpx;
    padding-top: 150rpx;
    box-sizing: border-box;
  }
  .ckjl {
    width: 750rpx;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 30rpx 30rpx 0px 0px;
    border-top: 5rpx solid #35ed85;
    border-bottom: none;
    position: absolute;
    bottom: 0;
    padding: 10rpx 30rpx 50rpx;
    box-sizing: border-box;
    color: #ffffff;
    &_title {
      font-size: 50rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      position: relative;
      text-align: right;
      > image {
        width: 172rpx;
        height: 37rpx;
        position: absolute;
        left: 30rpx;
        top: 20rpx;
      }
    }
    .jilv_title {
      font-size: 30rpx;
      color: #f7f7f7;
      display: flex;
      align-items: center;
      width: 100%;
      margin: 20rpx auto;
      overflow-x: scroll;
      > view {
        background: #444444;
        border-radius: 10rpx;
        padding: 15rpx 25rpx;
        margin-right: 20rpx;
      }
      .selActive {
        background: linear-gradient(0deg, #1ac762 0%, #35ed85 100%);
        border-radius: 10rpx;
        color: #222;
      }
    }
    .jilv_list {
      width: 690rpx;
      height: 160rpx;
      border: 2rpx solid #c5fadc;
      margin: 20rpx auto;
      padding: 12rpx 20rpx 24rpx 21rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      > view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #f7f7f7;
      }
      image:nth-of-type(1) {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        margin-right: 18rpx;
      }
      image:nth-of-type(2) {
        width: 69rpx;
        height: 69rpx;
        border-radius: 10rpx;
        margin-right: 15rpx;
      }
    }
    .order_pic {
      display: flex;
      > view:nth-of-type(2) {
        margin-left: 20rpx;
        font-size: 24rpx;
        color: #ffffff;
        padding-top: 14rpx;
        box-sizing: border-box;
      }
      > view > view:nth-of-type(3) {
        display: flex;
        justify-content: space-between;
        width: 410rpx;
      }
    }
    .order_num {
      display: flex;
      justify-content: space-between;
      border-top: 1rpx solid #333333;
      margin-top: 20rpx;
      padding: 20rpx 0;
      > view:nth-of-type(2) {
        font-size: 24rpx;
      }
      text {
        font-size: 32rpx;
        color: #feff00;
      }
    }
    .order_title_con1 {
      width: 690rpx;
      margin-top: 28rpx;
      padding: 20rpx 30rpx 10rpx;
      box-sizing: border-box;

      .fangshi {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        line-height: 60rpx;
        align-items: center;
        image {
          width: 40rpx;
          height: 40rpx;
        }
        > view > image {
          margin-right: 20rpx;
        }
        text {
          color: #feff00;
        }
      }
    }
  }
  .order_title_btn {
    width: 690rpx;
    height: 98rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    font-size: 24rpx;
    box-sizing: border-box;
    .zhifu {
      width: 332rpx;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .pop_gongxi {
    width: 750rpx;
    height: 197rpx;
    display: block;
    margin-bottom: 30rpx;
  }
  .jp_title {
    box-sizing: border-box;
    padding: 0rpx 50rpx;
    .jp_title_1 {
      width: 100%;
      max-height: 680rpx;
      overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: auto;
      color: #ffffff;
      padding-bottom: 15rpx;
      > view:nth-child(3n-1) {
        margin: 20rpx 30rpx 0 30rpx;
      }
      .jp_list {
        font-size: 24rpx;
        width: 190rpx;
        margin-top: 20rpx;
        position: relative;
        .list_img {
          width: 190rpx;
          height: 190rpx;
          border-radius: 10rpx;
          position: relative;
          border: 1px solid #c5fadc;
          > image {
            width: 188rpx;
            height: 188rpx;
            border-radius: 10rpx;
          }
          > view {
            font-size: 24rpx;
            position: absolute;
            background: #1ac762;
            bottom: 0;
            left: 0;
            border-radius: 0 10rpx 0 0;
            text-align: left;
            padding: 0 20rpx 0 12rpx;
            box-sizing: border-box;
            color: #222;
          }
        }
      }
    }
  }
  .jp_btn {
    margin-top: 125rpx;
    display: flex;
    justify-content: space-around;
    > image {
      width: 292rpx;
      height: 70rpx;
    }
  }
  .dhbtmbox {
    width: 750rpx;
    height: 32rpx;
  }
  .ckjl_title_con1 {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
  }
  .pop_con {
    height: 630rpx;
    margin: auto;
    padding: 2rpx 36rpx 0;
    font-size: 24rpx;
    line-height: 36rpx;
    color: #ffffff;
    box-sizing: border-box;
    overflow-y: scroll;
  }
}
</style>
