<template>
  <!-- @touchstart="touchStart" @touchend="touchEnd" -->
  <view class="content" :style="{
    'padding-top': `calc(${$sys().statusBarHeight}px + 330rpx)`
  }">
    <!-- 发货须知 -->
    <view class="head commng_bg" :style="{
      'background-image': `url(${$img('/static/img/global_page_bg.png')})`
    }">
      <view class="head_top">
        <view class="status_bar" :style="{
          height: `calc(${$sys().statusBarHeight}px + 88rpx)`
        }"></view>
      </view>
      <!-- 功能切换 -->
      <view class="qiehuan_box">
        <view class="qiehuan">
          <view @click="getlist(v.id)" v-for="(v, i) in arr" :key="i">
            <view :class="show == v.id ? 'xzs' : 'wzs'">{{ v.title }}</view>
            <image :src="$img('/static/img/tab_arrow.png')" class="activeImg" v-if="show == v.id"></image>
          </view>
        </view>
        <image :src="$img('/static/img/bag_fhxz.png')" @click="$refs.shuoming.open()"></image>
      </view>
      <!-- 搜索 -->
      <view class="title_ipt common_bg" :style="{
        'background-image': `url(${$img('/static/img/bag_search_box.png')})`
      }">
        <input type="text" placeholder="请输入关键字" placeholder-style="color:rgba(255,255,255,0.6)" confirm-type="search"
          v-model="keyword" @confirm="search()" />
        <image @click="search()" :src="$img('/static/icon/search.png')"></image>
      </view>
      <view class="header" v-if="show != 3">
        <view>
          共
          <text>{{ count }}</text>
          个赠品
        </view>
        <view>
          已选
          <text>{{ num }}</text>
          个赏品
        </view>
      </view>
      <scroll-view scroll-x="true">
        <view class="kaType" v-if="show == 3">
          <view @click="getType(v.id)" v-for="(v, i) in typeData" :key="i">
            <view :class="selIndex == v.id ? 'selSty' : 'sty'">
              {{ v.title }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
      <!-- 赏池预览 -->
      <view class="shop_con" v-if="show != 3">
        <template v-for="(item, index) in goodsdata">
          <view class="shop" v-for="(v, i) in item.orderlist" :key="v.prize_code">
            <view class="shop-inner common_bg" :style="{
              'background-image': `url(${$img('/static/img/yf_ib.png')})`
            }">
              <view class="pic">
                <image :src="v.goodslist_imgurl" mode="scaleToFill" />

                <view class="type-num">
                  <view class="type">
                    {{ v.shang_title }}
                  </view>

                  <view class="num">×{{ v.prize_num }}</view>
                </view>
              </view>

              <view class="title hang1">{{ v.goodslist_title }}</view>

              <view class="price">打包价:{{ v.goodslist_money }}</view>
            </view>

            <view class="num-box">
              <image @click.stop="jian(v)" class="btn" :src="$img('/static/icon/jian.png')" mode="scaleToFill" />

              <input @blur="verifyNum(v)" v-model="v.number" />

              <image @click.stop="jia(v)" class="btn" :src="$img('/static/icon/jia.png')" mode="scaleToFill" />
            </view>

            <!-- <view class="shop_title">
            <image :src="v.goodslist_imgurl" @click="yulan(v)"></image>
            <view class="shop_item">
              <view class="shop_head hang1">
                <text>{{ v.shang_title }}</text>
                {{ v.goodslist_title }}
              </view>
              <view class="">
                参考价：￥
                <text
                  style="
                    color: #1ff7f0;
                    font-size: 28rpx;
                    margin: 0 10rpx 0 6rpx;
                  "
                >
                  {{ v.goodslist_money }}
                </text>
                <text v-if="show == 2">
                  ({{ v.goodslist_sale_time }}可发货)
                </text>
              </view>
              <view class="flex_center" style="justify-content: space-between">
                <text style="color: rgba(255, 255, 255, 0.4)">
                  共{{ v.prize_num }}个赠品
                </text>
                <uni-number-box
                  :min="0"
                  :max="v.prize_num"
                  v-model="v.number"
                  background="none"
                  color="#FFFFFF"
                  @change="getCount(v, i)"
                ></uni-number-box>
              </view>
            </view>
          </view> -->
          </view>
        </template>
      </view>
      <!-- 卡册 -->
      <view v-if="show == 3" style="margin-top: 40rpx">
        <view :style="'background: url(' +
          z_imgPath +
          'ka_bg.png' +
          ') no-repeat 0 0 / 100% 100%;'
          " class="caStyle" @click="gotoPage('caceDetail?caId=' + item.goods_id)" v-for="(item, index) in goodsdata"
          :key="index">
          <image :src="item.goods_imgurl" mode="aspectFill"></image>
          <view style="width: 630rpx; margin: 8rpx auto 0; height: 33rpx">
            <cmd-progress :percent="item.gailv" :show-info="false" stroke-color="#1AC762"
              :strokeWidth="10"></cmd-progress>
          </view>
          <view class="caTitle">
            <view>{{ item.goods_title }}</view>
            <view>
              <text>{{ item.buy_count }}</text>
              /{{ item.all_count }}
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <!-- 底部按钮 -->
    <view class="footer">
      <!-- huisou_click -->
      <!-- <image :src="z_imgPath + 'qujiaoliu.png'" @click="toNewMp()" v-if="show<4" class="dabao"></image> 暂时隐藏 -->
      <!-- 换为打包 -->
      <view @click="huisou_click()" class="common_bg" :style="{
        'background-image': `url(${$img('/static/img/bag_hb.png')})`
      }" v-if="show == 1 || show == 5 || show == 2">
        <!-- 环保 -->
      </view>
      <view @click="fahuo_click()" class="common_bg" :style="{
        'background-image': `url(${$img('/static/img/bag_fh.png')})`
      }" v-if="show == 1 || show == 5 || show == 2">
        <!-- 发货 -->
      </view>
      <view @click="suo_click()" class="common_bg" :style="{
        'background-image': `url(${$img('/static/img/bag_ss.png')})`
      }" v-if="show == 1 || show == 5 || show == 2">
        <!-- 上锁 -->
      </view>
      <!-- <image :src="z_imgPath + 'dabao.png'" @click="huisou_click()" v-if="show==1 ||show==5||show==2"></image>
			<image :src="z_imgPath + 'fahuo.png'" @click="fahuo_click()" v-if="show==1 ||show==5||show==2"></image>
			<image :src="z_imgPath + 'shangsuo.png'" @click="suo_click()" v-if="show==1 ||show==5||show==2"></image> -->
      <view @click="jiesuo_click()" class="common_bg" :style="{
        'background-image': `url(${$img('/static/img/bag_js.png')})`
      }" v-if="show == 4">
        <!-- 解锁 -->
      </view>
      <!-- <image :src="z_imgPath + 'jiesuo.png'" @click="jiesuo_click()" v-if="show==4" class="jiesuo"></image> -->
    </view>

    <!-- 刷新浮框 -->
    <view class="xuanfu">
      <!-- <image :src="z_imgPath + 'jiaoliu.png?12'" @click="toNewMp()"></image> -->
      <image :src="$img('/static/img/yf_rb.png')" @click="getlist(show)"></image>
      <image :src="$img('/static/img/bag_qx.png')" @click="quanxuan_click()" v-if="show != 3"></image>
    </view>

    <!-- 发货说明 -->
    <uni-popup ref="shuoming" type="center">
      <view class="pop common_bg" :style="{
        'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
      }">
        <view class="pop_title">发货须知</view>
        <view class="pop_con">
          <scroll-view scroll-y="true" style="height: 600rpx">
            <view v-html="news"></view>
          </scroll-view>
        </view>

        <image @click="$refs.shuoming.close()" class="close" :src="$img('/static/icon/close.png')"></image>
      </view>
    </uni-popup>

    <!-- 确认环保  -->
    <uni-popup ref="huishou_show" type="bottom">
      <view class="order animated fadeInUp">
        <view class="order_title">
          <view class="title">确认环保</view>

          <view class="ca" @click="$refs.huishou_show.close()">
            <image :src="$img('/static/icon/close1.png')"></image>
          </view>
        </view>
        <view class="xuyuan">
          <view class="xuyuan_head">
            <view>已选赠品</view>
            <view>
              共
              <text style="font-size: 28rpx; color: #85dfff">{{ num }}</text>
              件
            </view>
          </view>
          <view class="xuyuan_con">
            <view class="xuyuan_item common_bg" :style="{
              'background-image': `url(${$img('/static/img/yf_ib.png')})`
            }" v-for="(item, index) in huishou_Arr" :key="index">
              <view class="shop_item_img">
                <image :src="item.goodslist_imgurl"></image>
                <view>
                  <view class="type">{{ item.shang_title }}</view>

                  <view class="num">×{{ item.number }}</view>
                </view>
              </view>
              <view class="xuyuan_item_2 hang1" style="font-size: 20rpx">
                参考价:{{ item.goodslist_money * item.number }}元
              </view>
            </view>
          </view>
          <!-- <view class="xuyuan_foot">
            <view>
              小计:￥
              <text style="font-size: 32rpx; color: #fff">
                {{ zong_price.toFixed(2) }}
              </text>
            </view>
          </view> -->
        </view>

        <view class="pop-ft">
          <view class="price">环保合计:{{ zong_price.toFixed(2) }}元</view>

          <view @click="huisou_btn" class="confirm-btn common_bg" :style="{
            'background-image': `url(${$img('/static/img/bag_qrhs.png')})`
          }"></view>
        </view>
        <!-- <view
          class="pop_huishou"
          @click="huisou_btn"
          :style="
            'background: url(' +
            z_imgPath +
            'allBtn_bg.png' +
            ') no-repeat 0 0 / 100% 100%;'
          "
        >
          确认环保
        </view> -->
      </view>
    </uni-popup>

    <!-- 发货确认单 -->
    <uni-popup ref="fahuo_show" type="bottom">
      <view class="order animated fadeInUp">
        <view class="order_title">
          <view class="title">确认发货</view>

          <view class="ca" @click="$refs.fahuo_show.close()">
            <image :src="$img('/static/icon/close1.png')"></image>
          </view>
        </view>
        <view class="xuyuan">
          <view class="xuyuan_head">
            <view>已选赠品</view>
            <view>
              共
              <text style="font-size: 28rpx; color: #85dfff">{{ num }}</text>
              件
            </view>
          </view>
          <view class="xuyuan_con" style="border: none">
            <view class="xuyuan_item common_bg" v-for="(item, index) in huishou_Arr" :key="index" :style="{
              'background-image': `url(${$img('/static/img/yf_ib.png')})`
            }">
              <view class="shop_item_img">
                <image :src="item.goodslist_imgurl"></image>
                <view>
                  <view class="type">{{ item.shang_title }}</view>

                  <view class="num">×{{ item.number }}</view>
                </view>
              </view>
              <view class="xuyuan_item_2 hang1">
                {{ item.goodslist_title }}
              </view>
            </view>
          </view>
        </view>
        <view class="xuyuan kuaidi">
          <view @click="showMulLinkageThreePicker()" class="flex_center" style="justify-content: space-between">
            <view style="width: 580rpx; font-size: 28rpx">
              {{ selectCity }}
            </view>
            <image :src="z_imgPath + 'point_r.png'"></image>
          </view>
          <view>满{{ post.free_post }}件赠品包邮</view>
          <view class="kuaidi_text">
            如果不满{{ post.free_post }}件，需支付{{ post.post_money }}元运费
          </view>
          <textarea placeholder="请输入留言内容" maxlength="50" v-model="message"></textarea>
        </view>

        <view class="pop-ft">
          <view class="price">
            需支付:{{ num >= post.free_post ? 0 : post.post_money }}元
          </view>

          <view @click="fahuo_btn" class="confirm-btn common_bg" :style="{
            'background-image': `url(${$img('/static/img/bag_qrfh.png')})`
          }"></view>
        </view>

        <!-- <view
          class="pop_huishou"
          @click="fahuo_btn"
          :style="
            'background: url(' +
            z_imgPath +
            'allBtn_bg.png' +
            ') no-repeat 0 0 / 100% 100%;'
          "
        >
          确认发货
        </view> -->
      </view>
    </uni-popup>

    <!-- 地址列表 -->
    <uni-popup ref="address_show" type="bottom">
      <view class="order animated fadeInUp">
        <!-- 头部 -->
        <view class="order_title">
          <view>地址列表</view>
          <view class="ca" @click="$refs.address_show.close()">×</view>
        </view>
        <scroll-view scroll-y="true" class="ul">
          <view class="li" v-for="(v, i) in address_list" :key="i">
            <view class="li_name" @click="select_address(v)">
              <view class="flex_center">
                <text v-if="v.is_default">默认</text>
                {{ v.name }} {{ v.mobile }}
              </view>
              <view style="font-size: 24rpx; margin-top: 16rpx; color: #999999">
                {{ v.province }} {{ v.city }} {{ v.county }} {{ v.address }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- 详情弹窗 -->
    <uni-popup ref="yulanPop" type="center" mask-background-color="rgba(0,0,0,.95)">
      <view>
        <view class="yulanStyle">
          <view style="font-size: 36rpx; flex: 1; text-align: left">
            {{ yulan_news.shang_title }}
          </view>
          <image :src="yulan_news.goodslist_imgurl" mode="" class="shang_img"></image>
          <image class="img_bg" :src="z_imgPath + 'yulan_bg.png'"></image>
        </view>
        <view class="hang1" style="
            color: #fff;
            font-size: 28rpx;
            padding: 10rpx 0;
            text-align: center;
          ">
          {{ yulan_news.goodslist_title }}
        </view>
      </view>
      <!-- <view class="yulanStyle" style="background: url(https://hdyfs.languowangluo.cn/zcq/shouye/detail/yulan_bg.png) no-repeat 0 0 / 100% 100%;">
				<view>
					<view style="font-size: 36rpx;flex: 1;text-align: left;">{{yulan_news.shang_title}}</view>
					<view class="hang1" style="font-size: 26rpx;flex: 1;">{{yulan_news.goodslist_title}}</view>
				</view>
				<view>
					<image :src="yulan_news.goodslist_imgurl"></image>
				</view>
			</view> -->
    </uni-popup>
    <!-- <tab-bar :index="3"></tab-bar> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      z_imgPath: this.$z_img2 + 'hegui/',
      z_imgPath2: this.$z_img2 + 'mine/',
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      keyword: '',
      selectCity: '选择收货地址',
      downOption: {
        auto: false
      },
      // arr: ['赏品', '无限','预售', '保险柜'],
      arr: [
        {
          id: 1,
          title: '赏品'
          // img: 'img01.png?1',
          // sel: 'sel01.png?1'
        },
        {
          id: 5,
          title: '无限'
          // img: 'img02.png?1',
          // sel: 'sel02.png?1'
        },
        // {
        //   id: 2,
        //   title: '预售'
        //   // img: 'img03.png?1',
        //   // sel: 'sel03.png?1'
        // },
        // {
        // 	id:3,
        // 	title:'卡册'
        // 	img: 'img04.png?1',
        // 	sel: 'sel04.png?1'
        // },
        {
          id: 4,
          title: '保险柜'
          // img: 'img05.png?1',
          // sel: 'sel05.png?1'
        }
      ],
      typeData: [], //卡册分类
      selIndex: '',
      show: 1,
      number: [0],
      id: '',
      // 发货须知
      news: '',
      // 赏品总量
      count: '?',
      // 已选赏品数量
      num: 0,
      // 赏品数据
      goodsdata: [],
      post: {},
      // 寄卖的商品
      huishou_Arr: [],
      // 寄卖总价
      zong_price: 0,
      // 发送兑换参数
      recovery_info: [],
      // 收货人姓名
      name: '',
      // 收货人电话
      mobile: '',
      // 收货地址
      address: '',
      // 留言
      message: '',
      // 地址列表
      address_list: [],
      address_id: '',
      // 兑换失效
      dh_status: false,
      // 发货失效
      fh_status: false,
      // 上锁失效
      suo_status: false,
      // 解锁失效
      jiesuo_status: false,
      // 放大详情
      yulan_news: {},
      //
      startX: 1,
      endX: 0
    }
  },
  onLoad(v) {
    this.getDanye(8)
    this.caType()
  },
  // onShow() {
  // 	this.loadData(1)
  // },

  onHide() {
    // this.$refs.pop_show.close()
    // this.$refs.huishou_show.close()
    // this.$refs.fahuo_show.close()
    // this.$refs.address_show.close()
  },
  watch: {
    huishou_Arr() {
      this.num = 0
      this.zong_price = 0
      for (let i = 0; i < this.huishou_Arr.length; i++) {
        this.$nextTick(() => {
          this.num += this.huishou_Arr[i].number
          this.zong_price += parseFloat(
            this.huishou_Arr[i].goodslist_money * this.huishou_Arr[i].number
          )
        })
      }
      this.getrecovery_info()
    }
  },

  methods: {
    verifyNum(item) {
      if (item.number <= 0) {
        item.number = 0
        return
      }

      if (item.number >= item.prize_num) {
        item.number = item.prize_num
        return
      }
    },

    jian(item) {
      if (item.number <= 0) {
        item.number = 0
        return
      }

      item.number -= 1
    },

    jia(item) {
      if (item.number >= item.prize_num) {
        item.number = item.prize_num
        return
      }

      item.number += 1
    },

    //卡片类型选择
    getType(e) {
      this.selIndex = e
      this.goodsdata = []
      this.mescroll.resetUpScroll()
    },
    caType() {
      let that = this
      that.req({
        url: 'card_category_list',
        success(res) {
          if (res.status == 1) {
            that.typeData = res.data
          }
        }
      })
    },
    change_dis(e) {
      if (this.goodsdata[e].dis == 1) {
        this.$set(this.goodsdata[e], 'dis', this.goodsdata[e].orderlist_length)
      } else {
        this.$set(this.goodsdata[e], 'dis', 1)
      }
    },
    touchEnd(e) {
      if (e) {
        this.endX = e.changedTouches[0].pageX
      }
      console.log(this.endX)
      let aaaa = this.endX - this.startX
      if (aaaa > 30) {
        console.log(aaaa)
        uni.switchTab({
          url: '/pages/shouye/index'
        })
      }
    },

    /**
     * @description: 触摸起点
     * @return {*}
     */
    touchStart(e) {
      this.startX = e.changedTouches[0].pageX
      console.log(this.startX)
    },

    toNewMp() {
      uni.navigateToMiniProgram({
        appId: uni.getStorageSync('jump_appid'), // 此为生活缴费appid
        path: 'pages/my/index?token=' + uni.getStorageSync('token'), // 此为生活缴费首页路径
        envVersion: 'release',
        extraData: {
          token: uni.getStorageSync('token')
        },
        success: res => {
          // 打开成功
          console.log('打开成功', res)
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    getDanye(e) {
      let that = this
      that.req({
        url: 'danye',
        data: {
          type: e
        },
        success(res) {
          that.news = res.data
        }
      })
    },
    yulan(e) {
      console.log(e)
      this.yulan_news = e
      this.$refs.yulanPop.open()
    },

    getCount(a, b) {
      this.$nextTick(() => {
        this.change_Arr()
      })
    },
    // 改变数组
    change_Arr() {
      let that = this
      that.huishou_Arr = []
      for (let i = 0; i < that.goodsdata.length; i++) {
        for (let j = 0; j < this.goodsdata[i].orderlist.length; j++) {
          if (that.goodsdata[i].orderlist[j].number > 0) {
            that.huishou_Arr.push(that.goodsdata[i].orderlist[j])
          }
        }
      }
    },

    fahuo_btn() {
      let that = this
      if (that.fh_status) {
        return
      }
      uni.showToast({
        title: '发货未开放',
        icon: 'loading',
        duration: 1000
      })
      return;
      if (that.recovery_info && that.recovery_info.length > 0) {
        that.fh_status = true
        that.req({
          url: 'warehouse_send',
          data: {
            recovery_info: JSON.stringify(that.recovery_info),
            name: that.name,
            mobile: that.mobile,
            address: that.address,
            message: that.message,
            type: 1
          },
          success(res) {
            if (res.status == 1) {
              if (res.data.status == 1) {
                that.recovery_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: res.msg,
                        icon: 'success',
                        duration: 2000,
                        success() {
                          setTimeout(() => {
                            that.$refs.fahuo_show.close()
                            that.mescroll.resetUpScroll()
                          }, 1000)
                        }
                      })
                    }
                  }
                })
              } else {
                that.recovery_info = []
                uni.showToast({
                  title: res.msg,
                  icon: 'success',
                  duration: 2000,
                  success() {
                    setTimeout(() => {
                      that.$refs.fahuo_show.close()
                      that.mescroll.resetUpScroll()
                    }, 1000)
                  }
                })
              }
            }
          },
          complete() {
            that.fh_status = false
          }
        })
      }
    },
    huisou_btn() {
      let that = this
      if (that.dh_status) {
        return
      }
      if (that.recovery_info && that.recovery_info.length > 0) {
        that.dh_status = true
        that.req({
          url: 'warehouse_recovery',
          data: {
            recovery_info: JSON.stringify(that.recovery_info),
            type: that.show
          },
          success(res) {
            if (res.status == 1) {
              that.recovery_info = []
              setTimeout(() => {
                uni.showToast({
                  title: res.msg,
                  icon: 'success',
                  duration: 500,
                  success() {
                    setTimeout(() => {
                      that.$refs.huishou_show.close()
                      that.loadData(1)
                    }, 500)
                  }
                })
              }, 100)
            }
          },
          complete() {
            that.dh_status = false
          }
        })
      }
    },

    quanxuan_click() {
      this.num = this.count
      for (let i = 0; i < this.goodsdata.length; i++) {
        for (let j = 0; j < this.goodsdata[i].orderlist.length; j++) {
          this.$set(
            this.goodsdata[i].orderlist[j],
            'number',
            this.goodsdata[i].orderlist[j].prize_num
          )
        }
      }
    },
    suo_click() {
      this.change_Arr()
      if (this.huishou_Arr.length > 0) {
        this.getrecovery_info()
        let that = this
        if (that.suo_status) {
          return
        }
        if (that.recovery_info && that.recovery_info.length > 0) {
          that.suo_status = true
          that.req({
            url: 'warehouse_movein',
            data: {
              recovery_info: JSON.stringify(that.recovery_info)
            },
            success(res) {
              if (res.status == 1) {
                that.recovery_info = []
                uni.showToast({
                  title: res.msg,
                  icon: 'success',
                  duration: 2000,
                  success() {
                    setTimeout(() => {
                      that.loadData(1)
                    }, 1000)
                  }
                })
              }
            },
            complete() {
              that.suo_status = false
            }
          })
        }
      } else {
        uni.showToast({
          title: '请至少选择一件赠品',
          icon: 'none',
          duration: 2000
        })
      }
    },
    jiesuo_click() {
      this.change_Arr()
      if (this.huishou_Arr.length > 0) {
        this.getrecovery_info()
        let that = this
        if (that.jiesuo_status) {
          return
        }
        if (that.recovery_info && that.recovery_info.length > 0) {
          that.jiesuo_status = true
          that.req({
            url: 'warehouse_remove',
            data: {
              recovery_info: JSON.stringify(that.recovery_info)
            },
            success(res) {
              if (res.status == 1) {
                that.recovery_info = []
                uni.showToast({
                  title: res.msg,
                  icon: 'success',
                  duration: 2000,
                  success() {
                    setTimeout(() => {
                      that.loadData(1)
                    }, 1000)
                  }
                })
              }
            },
            complete() {
              that.jiesuo_status = false
            }
          })
        }
      } else {
        uni.showToast({
          title: '请至少选择一件赠品',
          icon: 'none',
          duration: 2000
        })
      }
    },

    fahuo_click() {
      this.change_Arr()
      if (this.huishou_Arr.length > 0) {
        this.getrecovery_info()
        this.$refs.fahuo_show.open()
      } else {
        uni.showToast({
          title: '请至少选择一件赠品',
          icon: 'none',
          duration: 2000
        })
      }
    },
    huisou_click() {
      // uni.navigateToMiniProgram({
      // 	appId: uni.getStorageSync('jump_appid'), // 此为生活缴费appid
      // 	path: 'pages/my/index?token=' + uni.getStorageSync('token'), // 此为生活缴费首页路径
      // 	envVersion: "develop",
      // 	extraData: {
      // 		'token': uni.getStorageSync('token')
      // 	},
      // 	success: res => {
      // 		// 打开成功
      // 		console.log("打开成功", res);
      // 	},
      // 	fail: err => {
      // 		console.log(err, '取消了');
      // 		uni.switchTab({
      // 			url: '/pages/shouye/index'
      // 		})
      // 	}
      // })
      this.change_Arr()
      if (this.huishou_Arr.length > 0) {
        this.getrecovery_info()
        this.$refs.huishou_show.open()
      } else {
        uni.showToast({
          title: '请至少选择一件赠品',
          icon: 'none',
          duration: 2000
        })
      }
    },
    // 获取参数
    getrecovery_info() {
      let that = this
      that.recovery_info = []
      for (let i = 0; i < that.huishou_Arr.length; i++) {
        that.recovery_info.push({
          prize_code: that.huishou_Arr[i].prize_code,
          number: that.huishou_Arr[i].number
        })
      }
    },
    search() {
      this.mescroll.resetUpScroll()
    },
    getlist(v) {
      if (v == 3 && this.typeData.length > 0) {
        this.selIndex = this.typeData[0].id
      }
      this.keyword = ''
      this.show = v
      this.goodsdata = []
      this.mescroll.resetUpScroll()
      // if (v == 3) {
      // 	//去卡册
      // 	uni.navigateTo({
      // 		url: '/pages/chouka/kace'
      // 	})
      // } else {
      // 	this.keyword = ''
      // 	this.show = v;
      // 	this.goodsdata = []
      // 	this.mescroll.resetUpScroll()
      // }
    },
    downCallback() {
      this.mescroll.resetUpScroll()
    },
    upCallback(page) {
      this.loadData(page.num)
    },
    loadData(pageNo) {
      let that = this
      that.num = 0
      that.huishou_Arr = []
      that.req({
        url: 'warehouse_index',
        data: {
          page: pageNo,
          type: that.show,
          keyword: that.keyword,
          category_id: that.selIndex
        },
        success(res) {
          if (res.status == 1) {
            that.count = res.data.total
            that.post = res.data.yufei
            that.mescroll.endByPage(res.data.data.length, res.data.last_page)
            if (pageNo == 1) {
              that.goodsdata = res.data.data
            } else {
              that.goodsdata = that.goodsdata.concat(res.data.data)
            }
          }
          if (that.show == 3) return
          for (let i = 0; i < that.goodsdata.length; i++) {
            //暂时不要折叠 that.$set(that.goodsdata[i], 'dis', 1)
            for (let j = 0; j < that.goodsdata[i].orderlist.length; j++) {
              that.$set(that.goodsdata[i].orderlist[j], 'number', 0)
            }
          }
        }
      })
    },

    select_address(res) {
      // console.log(res)
      let that = this
      that.selectCity =
        res.name +
        '-' +
        res.province +
        '-' +
        res.city +
        '-' +
        res.county +
        '-' +
        res.address +
        '-' +
        res.mobile
      that.name = res.name
      that.mobile = res.mobile
      that.address =
        res.province + '-' + res.city + '-' + res.county + '-' + res.address
      that.address_id = res.id
      that.$refs.address_show.close()
      setTimeout(() => {
        that.$refs.fahuo_show.open()
      }, 300)
    },
    getAddress() {
      let that = this
      that.req({
        url: 'address',
        Loading: true,
        success(res) {
          if (res.status == 1) {
            that.address_list = res.data
            if (that.address_list.length > 0) {
              that.$refs.address_show.open()
              setTimeout(() => {
                that.$refs.fahuo_show.close()
              }, 300)
            } else {
              uni.showToast({
                title: '请先去添加地址~',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    /*三级联动选择*/
    showMulLinkageThreePicker() {
      console.log('di')
      let that = this
      uni.chooseAddress({
        success(res) {
          console.log(res)
          that.selectCity =
            res.userName +
            '-' +
            res.provinceName +
            '-' +
            res.cityName +
            '-' +
            res.countyName +
            '-' +
            res.detailInfo +
            '-' +
            res.telNumber

          that.name = res.userName
          that.mobile = res.telNumber
          that.address =
            res.provinceName +
            '-' +
            res.cityName +
            '-' +
            res.countyName +
            '-' +
            res.detailInfo
          // that.$refs.fahuo_show.open()
        },
        fail(res) {
          console.log(res)
        }
      })
    },
    back() {
      let route = uni.getStorageSync('page')
      console.log(route)
      if (
        route == 'pages/shouye/index' ||
        route == 'pages/chouka/index' ||
        route == 'pages/user/index'
      ) {
        console.log(1)
        uni.switchTab({
          url: '/' + route
        })
      } else {
        uni.navigateBack()
      }
      // uni.navigateBack()
      // uni.switchTab({
      // 	url: '/pages/shouye/index'
      // })
    }
  }
}
</script>

<style lang="scss">
.kaType {
  display: flex;
  margin: 0 0 0 30rpx;

  >view {
    margin-right: 20rpx;
  }

  .sty {
    background-color: #ebfffa;
    color: #333;
    font-size: 30rpx;
    padding: 15rpx 20rpx;
    border-radius: 10rpx;
  }

  .selSty {
    background-color: #1ac762;
    color: #333;
    padding: 15rpx 20rpx;
    border-radius: 10rpx;
  }
}

.caStyle {
  width: 690rpx;
  height: 880rpx;
  margin: 0 30rpx 20rpx;
  padding-top: 10rpx;
  box-sizing: border-box;

  >image {
    width: 670rpx;
    height: 740rpx;
    display: block;
    margin: 0rpx auto;
  }

  .caTitle {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 20rpx 0;
    color: #fff;
  }

  text {
    color: #feff00;
  }
}

.yulanStyle>.shang_img {
  width: 563rpx;
  height: 754rpx;
  position: absolute;
  top: 21rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.yulanStyle>.img_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

.yulanStyle>view:nth-of-type(1) {
  position: absolute;
  top: 54rpx;
  left: 45rpx;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  background: rgba(1, 14, 14, 0.83);
  opacity: 0.83;
  border-radius: 29rpx;
  padding: 10rpx 30rpx;
}

.yulanStyle {
  font-size: 47rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  position: relative;
  width: 600rpx;
  height: 794rpx;
}

.ul {
  width: 690upx;
  margin: 0 auto;
  max-height: 900rpx;
}

.li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 30rpx 24rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
  background: #000916;
  border: 1px solid rgba(47, 180, 255, 0.7);
  box-shadow: 0px 0px 12rpx 0px rgba(47, 180, 255, 0.7);
  border-radius: 10rpx;
  color: #ffffff;
}

.li_name {
  font-size: 32upx;
  // font-weight: bold;
  width: 100%;
  color: #ffffff;
}

.li_name text {
  padding: 6rpx 10rpx;
  color: #ffffff;
  background: #2fb4ff;
  border-radius: 10rpx;
  margin-right: 20rpx;
  font-size: 24rpx;
}

textarea {
  width: 100%;
  height: 120rpx;
  background: #151515;
  border-radius: 10rpx;
  padding: 4rpx 10rpx;
  margin-top: 20rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}

.kuaidi_text {
  font-size: 24rpx;
  color: #999999;
}

.kuaidi>view:nth-of-type(2) {
  font-size: 28rpx;
}

.kuaidi>view:nth-of-type(1) {
  border-bottom: 1rpx solid #666666;
  padding: 20rpx 0;
}

.kuaidi>view {
  margin-top: 20rpx;
}

.kuaidi image {
  width: 32rpx;
  height: 32rpx;
}

.kuaidi {
  padding: 0 30rpx 30rpx 30rpx !important;
  color: #ffffff;
}

.order_title>image {
  width: 162rpx;
  height: 47rpx;
  position: absolute;
  left: 30rpx;
  top: 20rpx;
}

.order {
  width: 750rpx;
  background: #000;
  border-radius: 30rpx 30rpx 0px 0px;
  border-bottom: none;
  position: absolute;
  bottom: calc(var(--window-bottom));
  padding: 10rpx 30rpx 50rpx;
  box-sizing: border-box;
  color: #ffffff;

  border-radius: 20rpx 20rpx 0rpx 0rpx;
  border-top: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #000, #000),
    linear-gradient(20deg, #ffffff, #a11aff, #85dfff, #ba39ff);

  .order_title {
    position: relative;
    padding: 10rpx 0;

    display: flex;
    justify-content: center;

    .title {
      font-size: 36rpx;
      font-family: zihun152hao-jijiachaojihei;
      font-weight: 400;
      color: #ffffff;
    }

    .ca {
      width: 30rpx;
      height: 30rpx;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.pop_huishou {
  width: 692rpx;
  height: 88rpx;
  margin: 48rpx auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
}

.xuyuan_foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 30rpx;
  font-size: 24rpx;
  color: #ffffff;
  // text-shadow: 0px 0px 14rpx #FF2121;
}

.xuyuan_item_2 {
  padding: 10rpx;

  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.shop_item_img>view:nth-of-type(1) {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 38rpx;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 0 10rpx;

  .type {
    font-size: 22rpx;
    font-family: zihun147hao-xingyuanhei;
    font-weight: 400;
    color: #fff;
  }

  .num {
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

.shop_item_img>image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  position: absolute;
  top: 0;
  left: 0;
}

.shop_item_img {
  width: 100%;
  height: 188rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  overflow: hidden;
}

.xuyuan_item {
  width: 230rpx !important;
  // height: 242rpx;
  // margin-right: 20rpx;
  flex-shrink: 0;
  // text-align: center;
  position: relative;
  // margin-top: 20rpx;
  padding: 8rpx 12rpx 10rpx;
  box-sizing: border-box;
}

.xuyuan_con {
  display: flex;
  margin: 14rpx auto 0;
  width: 630rpx;
  box-sizing: border-box;
  // border-bottom: 1px solid #666666;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 10rpx;
}

.xuyuan_head>view:nth-of-type(2) {
  font-size: 24rpx;
}

.xuyuan_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  color: #ffffff;
}

.xuyuan {
  width: 690rpx;
  /* height: 432rpx; */
  background: rgba(34, 34, 34, 0.5);
  // box-shadow: 0px -2rpx 7rpx 0px #1ff7f0;
  // border: 1rpx solid #ffffff;
  border-radius: 10rpx;
  margin: 24rpx auto 0;
  padding-top: 24rpx;
  box-sizing: border-box;

  textarea {
    background: #222;
  }
}

.pop {
  width: 607rpx;
  // height: 904rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  position: relative;

  .pop_title {
    font-size: 36rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }

  .pop_con {
    padding: 30rpx 40rpx 50rpx;
    box-sizing: border-box;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 42rpx;
  }

  .close {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 50rpx;
    height: 50rpx;
  }
}

.mengban {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer>image {
  width: 212rpx;
  height: 70rpx;
}

.footer>image:nth-of-type(3) {
  /* width: 212rpx;
		height: 106rpx;
		position: absolute;
		top: 20rpx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 11; */
}

.jiesuo {
  margin: auto;
}

.footer>view {
  width: 206rpx;
  height: 84rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
  margin: 0 auto;
}

.footer {
  width: 690rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  position: fixed;
  bottom: calc(30rpx + var(--window-bottom));
  right: 0;
  left: 0;
  margin: auto;
}

button::after {
  border: none;
}

button {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
  border-radius: 0;
}

.xuanfu image {
  width: 104rpx;
  height: 104rpx;
  margin-top: 20rpx;
}

.xuanfu {
  position: fixed;
  bottom: calc(150rpx + var(--window-bottom));
  right: 30rpx;
  width: 104rpx;
  z-index: 21;
}

.shop_head>text {
  background: #ff7514;
  border-radius: 10rpx;
  padding: 2rpx 20rpx;
  font-size: 24rpx;
  margin-right: 10rpx;
  box-sizing: border-box;
}

.shop_head {
  font-size: 28rpx;
  /* height: 80rpx; */
  margin-bottom: 10rpx;
}

.shop_item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 460rpx;
  /* border: 1rpx solid red; */
}

.shop_title>image {
  width: 140rpx;
  height: 140rpx;
  margin-right: 20rpx;
}

.shop_title {
  display: flex;
}

.shop_con {
  padding: 0 20rpx;
  display: flex;
  flex-flow: row wrap;

  .shop {
    width: 236rpx;
    margin: 20rpx 0 0;

    .shop-inner {
      padding: 10rpx 12rpx 12rpx;

      .pic {
        width: 100%;
        height: 216rpx;
        border-radius: 10rpx 10rpx 0 0;
        overflow: hidden;
        position: relative;

        image {
          width: 100%;
          height: 100%;
        }

        .type-num {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 40rpx;
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 0;
          padding: 0 10rpx;
          box-sizing: border-box;
          background: rgba(0, 0, 0, 0.8);

          .type {
            font-size: 22rpx;
            font-family: zihun147hao-xingyuanhei;
            font-weight: 400;
            color: #ffffff;
          }

          .num {
            font-size: 20rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }

      .title {
        padding: 0 10rpx;
        text-align: center;

        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      .price {
        text-align: center;
        padding: 0 10rpx;

        font-size: 20rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #cccccc;
      }
    }

    .num-box {
      display: flex;
      justify-content: center;
      align-items: center;

      .btn {
        width: 36rpx;
        height: 36rpx;
      }

      input {
        width: 90rpx;
        text-align: center;
        margin: 0 10rpx;

        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}

.goods_title image {
  width: 40rpx;
  height: 26rpx;
}

.goods_title>view {
  /* background: #ff7514; */
  width: 40rpx;
  height: 40rpx;
}

.goods_title {
  width: 690rpx;
  margin: 20rpx auto;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title_ipt {
  display: flex;
  align-items: center;
  margin: 4rpx auto;
  padding-left: 30rpx;
  width: 720rpx;
  height: 109rpx;
  // background: rgba(0, 0, 0, 0.3);
  /* border: 1rpx solid #96FFFE; */
  // border-radius: 10rpx;
  box-sizing: border-box;
  padding-right: 10rpx;
}

.title_ipt>image {
  width: 33rpx;
  height: 33rpx;
}

.title_ipt>input {
  width: 570rpx;
  height: 60rpx;
  box-sizing: border-box;
  border-radius: 105rpx;
  font-size: 28rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  padding-left: 20rpx;
  margin-right: 40rpx;
}

.qiehuan_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
  width: 750rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 24rpx;
}

.qiehuan_box>image {
  width: 170rpx;
  height: 59rpx;
}

.activeImg {
  position: absolute;
  width: 30rpx !important;
  height: 16rpx !important;
  bottom: -20rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.qiehuan {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 520rpx;
  font-weight: bold;
  font-family: YouSheBiaoTiHei;
}

.qiehuan image {
  width: 90rpx;
  height: 47rpx;
}

.qiehuan>view {
  // flex: 1;
  // text-align: center;
  margin-right: 20rpx;
  position: relative;
}

.wzs {
  font-size: 32rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #9c9c9c;
}

.xzs {
  font-size: 32rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 0 10rpx #ba39ff;
}

.header text {
  color: #85dfff;
  margin: 0 6rpx;
}

.header {
  width: 690rpx;
  margin: 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #bec0d3;
}

.header_title>view:nth-of-type(2) {
  width: 520rpx;
  text-align: center;
  /* margin: auto; */
}

.header_title>view:nth-of-type(1) {
  display: flex;
  align-items: center;
}

.header_title image {
  width: 68rpx;
  height: 28rpx;
}

.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;
  font-size: 32rpx;
  color: #ffffff;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.head_top {}

.head {
  width: 750rpx;
  height: 330rpx;
  // background: #222222;
  // padding-bottom: 14rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 15;
  background-size: 100vw 100vh;
}

.content {
  // padding-bottom: 120rpx;
  min-height: 100vh;
  width: 100vw;
  padding-top: 386rpx;
  box-sizing: border-box;
}

.pop-ft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0 0;

  .price {
    font-size: 28rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
  }

  .confirm-btn {
    width: 206rpx;
    height: 84rpx;
  }
}
</style>
