@alu008/test_yuanqikaixiang 1.0.0

package/subpackages/confirmSendLogistics/confirmSendLogistics.vue

@@ -0,0 +1,1035 @@
+<template>
+  <view>
+    <u-sticky bgColor="#fff">
+      <Header title="确认发货"></Header>
+    </u-sticky>
+
+    <view class="confirmSendLoginsticsContent">
+      <view @click="selectAddress" class="address">
+        <image
+          src="https://img.shinemang.com/static/img/addressIcon.png"
+          mode="scaleToFill"
+          style="width: 48rpx; height: 48rpx"
+        />
+        <view style="width: 532rpx" v-if="address">
+          <view class="location over"
+            >{{ address.province }}{{ address.city }}{{ address.area
+            }}{{ address.subArea }}{{ address.address }}</view
+          >
+          <view class="contact over"
+            >{{ address.name }} &nbsp;&nbsp;{{ address.phoneNum }}</view
+          >
+        </view>
+        <view style="width: 502rpx" v-else>
+          <view class="location over"> 点击去添加收货地址</view>
+        </view>
+        <image
+          src="https://img.shinemang.com/static/img/next.png"
+          mode="scaleToFill"
+          style="width: 32rpx; height: 32rpx"
+        />
+      </view>
+
+      <view class="selectCards">
+        <scroll-view
+          scroll-x="true"
+          scroll-with-animation
+          style="width: 100%; white-space: nowrap; height: 240rpx"
+        >
+          <view class="cardsList">
+            <view v-for="value in cards" @click="showPreviewDetail(value)" :key="value.id" class="card">
+              <view
+                :style="{
+                  backgroundImage:
+                    'url(' + formateUrl(value.item.itemCoverThumb) + ')',
+                }"
+                class="cardsBgc bgcCenter"
+              >
+                <view class="count">x{{ value.selectCount }}</view>
+              </view>
+              <view class="name over">{{ value.item.itemName }}</view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+      <view class="detail">
+        <view class="fee">
+          <view class="item">
+            <view><text>运费</text></view>
+            <view
+              ><text class="fb"
+                >¥{{ current == 0 ? 0 : sendLogisticsFee }}</text
+              ></view
+            >
+          </view>
+        </view>
+        <view v-if="current == 1" class="fee">
+          <view class="item">
+            <view><text>免邮券</text></view>
+            <view
+              ><text class="fb">x{{ couponList.length }}</text></view
+            >
+          </view>
+        </view>
+      </view>
+      <view
+        v-if="!ios && !honery && current == 1 && couponList.length == 0"
+        class="detailPay"
+      >
+        <view @click="changePayType" class="fee">
+          <view class="item">
+            <view class="type">
+              <image src="https://img.shinemang.com/static/img/home/wechat.png" mode="scaleToFill" />
+              <text>微信支付</text>
+            </view>
+            <view  class="check">
+              <image
+                v-if="payType == 1"
+                src="https://img.shinemang.com/static/rednote/check1.png"
+                mode="scaleToFill"
+              />
+              <image
+                v-else
+                src="https://img.shinemang.com/static/rednote/notCheck1.png"
+                mode="scaleToFill"
+              />
+            </view>
+          </view>
+        </view>
+        <view @click="changePayType()" class="fee">
+          <view class="item">
+            <view class="type">
+              <image src="https://img.shinemang.com/static/img/home/alipay.png" mode="scaleToFill" />
+              <text>支付宝</text>
+            </view>
+            <view  class="check">
+              <image
+                v-if="payType == 2"
+                src="https://img.shinemang.com/static/rednote/check1.png"
+                mode="scaleToFill"
+              />
+              <image
+                v-else
+                src="https://img.shinemang.com/static/rednote/notCheck1.png"
+                mode="scaleToFill"
+              />
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="actionBtn">
+        <view>
+          <view class="price">
+            <text>合计: </text>
+            <view class="count"
+              >¥{{
+                current == 0 || couponList.length > 0 ? 0 : sendLogisticsFee
+              }}</view
+            >
+          </view>
+        </view>
+        <view>
+          <view @click="confirm" :class="['confirm', address ? 'active' : '']"
+            >确认发货</view
+          >
+        </view>
+      </view>
+    </view>
+
+    <view v-if="showSurePayment" class="surePayment">
+      <view class="contentBox">
+        <view class="title"> 支付提示</view>
+        <view style="text-align: center; padding: 0 32rpx" class="des"
+          >您已支付该笔订单吗?
+        </view>
+
+        <view class="actionsBtn">
+          <view @click="confirmSurePayment">未支付</view>
+          <view @click="confirmSurePayment"> 已支付</view>
+        </view>
+      </view>
+    </view>
+
+    <u-popup
+      @close="buyCouponPopup = false"
+      :show="buyCouponPopup"
+      mode="center"
+      :round="32"
+      zIndex="10076"
+      @click.stop.prevent
+      class="sharePopupBox"
+      :safeAreaInsetBottom="false"
+    >
+      <view v-if="buyCouponPopup" class="buyCouponPopup">
+        <view class="title">
+          <view>购买免邮券</view>
+        </view>
+        <view class="content">
+          <view class="subtitle">
+            当前操作为购买免邮券,购买成功后可用于物品发货,每次发货使用1张免邮券,购买后不可退换.
+          </view>
+          <!-- ,<block style="display: inline-block;">¥{{ sendLogisticsFee }}</block>/张 -->
+          <!--           
+          <view>
+             <input type="number" placeholder="请输入购买数量"></input>
+          </view> -->
+
+          <view class="tips"> 需支付¥{{ sendLogisticsFee }} </view>
+        </view>
+
+        <view class="buttons">
+          <view @click="buyCouponPopup = false">取消</view>
+          <view @click="confirmBuyCoupon">确认购买</view>
+        </view>
+      </view>
+    </u-popup>
+
+    
+    <view v-if="showPreview" @click="showPreview = false" class="previewImage">
+      <view>
+        <view id="toImg" style="position: relative;">
+          <img :style="{
+          
+          }" :src="formateUrl(rewardDetail.item.itemCoverThumb)" alt="" />
+
+          <view class="mask"></view>
+        </view>
+        <view class="goodsName">{{ rewardDetail.item.itemName }}</view>
+        <view v-for="item in rewardDetail.item.option">
+           <view v-if="item.selectCount && item.selectCount > 0">{{ item.name }}&nbsp;&nbsp;x{{ item.selectCount }}</view>
+        </view>
+      
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  fetchAddressList,
+  fetchCreateOrder,
+  fetchCouponList,
+} from "@/utils/fetch";
+import {
+  formateServerUrl,
+  sendLogisticsFee,
+  checkHasPhone,
+  getDecievedModel,
+  pay,
+  isIos,
+  reportMessage,
+  isHonery,
+} from "@/utils";
+import Header from "@/components/header/header.vue";
+
+export default {
+  data() {
+    return {
+      address: "",
+      cards: [],
+      showTips: true,
+      sendLogisticsFee: sendLogisticsFee,
+      needPhone: false,
+      current: 0, // 0 免费 1 需要邮费
+      showSurePayment: false,
+      couponList: [],
+      buyCouponPopup: false,
+      getPayMentCallBack: false,
+      payType: 1, // 1 微信 2 支付宝
+      ios: isIos(),
+      honery:isHonery(),
+      showPreview: false,
+      rewardDetail:null,
+    };
+  },
+  components: {
+    Header,
+    // login,
+    // phoneNumber
+  },
+  onLoad(options) {
+    uni.removeStorageSync("address");
+    this.getAddressList();
+
+    this.cards = uni.getStorageSync("confirmSendLogistics");
+    this.current = options.current;
+  },
+  methods: {
+     showPreviewDetail(value) {
+        this.rewardDetail = value;
+  
+        this.showPreview = true;
+      // }
+    },
+    changePayType() {
+      if (this.payType == 1) {
+        this.payType = 2;
+      } else {
+        this.payType = 1;
+      }
+    },
+    payMent(id) {
+      pay(id, this.ios ? 3 : (this.honery? 2: this.payType)).then((res) => {
+        if (res.ret !== 0) {
+        } else {
+          this.buyCouponPopup = false;
+
+          const Ios = isIos();
+          if (Ios) {
+            if (document.visibilityState == "visible") {
+              setTimeout(() => {
+                this.confirmSurePayment();
+              }, 2000);
+            } else {
+              this.showSurePayment = true;
+            }
+          } else {
+            this.showSurePayment = true;
+          }
+          // this.getPayMentCallBack = true;
+          //  if (document.visibilityState == "visible") {
+          //   uni.showLoading({
+          //     icon: "none",
+          //     mask: true,
+          //   });
+          //   setTimeout(() => {
+          //     this.confirmSurePayment();
+          //   }, 2000);
+          // } else {
+          //   this.showSurePayment = true;
+          // }
+          // 此时返回的res中的 msg 是购买完成页地址，可以直接跳转过去即可
+          // MgtvApi.jumpPage({
+          //   url: res.msg,
+          // });
+        }
+      });
+    },
+    getCouponList() {
+      fetchCouponList({
+        page: 1,
+        page_size: 1000000,
+        state: "CouponStockState_Unused",
+        item_type: "ItemType_Coupon_Free",
+        use_source_type: "SourceType_Delivery",
+      }).then((res) => {
+        this.couponList = res.list.length > 0 ? res.list[0].stockId : [];
+      });
+    },
+    confirmBuyCoupon() {
+      reportMessage("集好运-确认发货界面-支付邮费");
+  
+       let stock_ids = [];
+       let  option_id  = []
+      this.cards.forEach((item) => {
+        for (let i = 0; i < item.selectCount; i++) {
+          stock_ids.push(item.stockId[i]);
+        }
+       if(item.item.option.length > 0){
+          item.item.option.forEach((item1) => {
+            for(let index = 0; index < item1.selectCount; index++){
+                option_id.push(item1.id)
+            }
+          })
+       }else{
+         for (let i = 0; i < item.selectCount; i++) {
+          option_id.push(0);
+        }
+          }
+      });
+
+
+      const systemInfo = uni.getSystemInfoSync();
+      const platform_id = getDecievedModel();
+      fetchCreateOrder({
+        type: "OrderType_Normal",
+        delivery_info_id: this.address.id,
+        stock_id: stock_ids,
+        amount: this.sendLogisticsFee,
+        coupon_stock_id: 0,
+        option_id:option_id,
+        payment_create_request: {
+          platform_id: platform_id,
+          device_id: systemInfo.deviceId,
+          amount: this.sendLogisticsFee,
+        },
+      }).then((res) => {
+        this.buyCouponPopup = false;
+        console.log(res);
+        const productId = res.createPaymentReply.productId;
+        this.payMent(productId);
+      });
+    },
+    confirmSurePayment() {
+      //  uni.showLoading({ mask: true,icon:'none' });
+      this.showSurePayment = false;
+      fetchCouponList({
+        page: 1,
+        page_size: 1000000,
+        state: "CouponStockState_Unused",
+        item_type: "ItemType_Coupon_Free",
+        use_source_type: "SourceType_Delivery",
+      }).then((res) => {
+        this.couponList = res.list[0].stockId;
+        if (this.couponList.length == 0) {
+          uni.hideLoading();
+          // 没有优惠券
+          uni.showToast({
+            title: "网络延时,请稍后在试,如已支付,将已免邮券的方式发放",
+            icon: "none",
+            // mask: true
+          });
+        } else {
+          this.confirm();
+        }
+      });
+    },
+
+    confirm() {
+      reportMessage("集好运-确认发货界面-确认发货");
+      if (!this.address) {
+        uni.hideLoading();
+        return uni.showToast({
+          title: "请先选择收货地址",
+          icon: "none",
+        });
+      }
+       let stock_ids = [];
+       let  option_id  = []
+      this.cards.forEach((item) => {
+        for (let i = 0; i < item.selectCount; i++) {
+          stock_ids.push(item.stockId[i]);
+        }
+       if(item.item.option.length > 0){
+          item.item.option.forEach((item1) => {
+            for(let index = 0; index < item1.selectCount; index++){
+                option_id.push(item1.id)
+            }
+          })
+       }else{
+         for (let i = 0; i < item.selectCount; i++) {
+          option_id.push(0);
+        }
+          }
+      });
+
+      // 确认发货
+      if (this.current == 0 || this.couponList.length > 0) {
+        // uni.showLoading({ mask: true });
+        // 直接发货
+        fetchCreateOrder({
+          type: "OrderType_Normal",
+          delivery_info_id: this.address.id,
+          stock_id: stock_ids,
+          amount: 0,
+          coupon_stock_id: this.current == 0 ? 0 : this.couponList[0],
+          option_id:option_id
+        }).then((res) => {
+          uni.hideLoading();
+          uni.showToast({ title: "提交成功", icon: "none" });
+            let pages = getCurrentPages();
+              if (pages.length > 2) {
+                setTimeout(() => {
+                  uni.navigateBack({
+                    delta: 2,
+                    success: () => {
+                      uni.setStorageSync("toOrder", 1);
+                    },
+                    fail:() => {
+                      uni.reLaunch({ url: "/pages/index/index" });
+                    }
+                  });
+                }, 1500);
+              }else{
+                uni.reLaunch({ url: "/pages/index/index" });
+              }
+        });
+        return;
+      } else {
+        this.buyCouponPopup = true;
+      }
+    },
+    formateUrl(url) {
+      return formateServerUrl(url);
+    },
+    selectAddress() {
+      // 选择地址
+      uni.navigateTo({
+        url:
+          "/subpackages/myAddress/myAddress?isSelect=" +
+          1 +
+          "&hasAddressId=" +
+          (this.address ? this.address.id : -1),
+      });
+    },
+    getAddressList() {
+      fetchAddressList({}).then((res) => {
+        if (res.list.length > 0) {
+          const isDefault = res.list.find((item) => item.isDefault == true);
+          if (isDefault) {
+            this.address = isDefault;
+          } else {
+            this.address = res.list[0];
+          }
+        } else {
+          this.address = null;
+        }
+      });
+    },
+  },
+
+  onShow() {
+    const address = uni.getStorageSync("address");
+    if (address) {
+      this.address = JSON.parse(address);
+    } else {
+      this.getAddressList();
+    }
+    this.getCouponList();
+    // if(this.getPayMentCallBack){
+    //   this.getPayMentCallBack = false;
+    //   this.confirmSurePayment();
+    // }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+page {
+  background-color: #f6f6f6 !important;
+  min-height: 100vh;
+}
+.buyCouponPopup {
+  width: 100%;
+  padding: 64rpx 48rpx;
+  // padding-top: 48rpx;
+  background-color: #ffff;
+  border-radius: 32rpx;
+  width: 654rpx;
+  .title {
+    // height: 100rpx;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // line-height: 100rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+  }
+  .content {
+    margin-top: 30rpx;
+    .subtitle {
+      font-size: 28rpx;
+      font-weight: bold;
+      margin-bottom: 16rpx;
+
+      // display: flex;
+      // align-items: center;
+      // justify-content: space-between;
+    }
+    input {
+      // height: 100rpx;
+      background-color: #f6f6f6;
+      padding: 16rpx;
+      font-size: 28rpx;
+      border-radius: 8rpx;
+      margin-top: 26rpx;
+    }
+    .tips {
+      font-size: 24rpx;
+      color: #e73e3d;
+
+      margin-top: 32rpx;
+      text-align: center;
+    }
+  }
+  .buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 36rpx;
+    > view {
+      width: 264rpx;
+      height: 80rpx;
+
+      border-radius: 40rpx 40rpx 40rpx 40rpx;
+      font-size: 32rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:first-child {
+        margin-right: 30rpx;
+        background: #e9e9e9;
+      }
+
+      &:last-child {
+        background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+        color: #fff;
+      }
+    }
+  }
+}
+.surePayment {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .contentBox {
+    width: 654rpx;
+
+    background: #ffffff;
+    border-radius: 32rpx;
+    padding-top: 64rpx;
+    padding-bottom: 64rpx;
+    padding-left: 16rpx;
+    padding-right: 16rpx;
+
+    .title {
+      font-size: 36rpx;
+      margin-bottom: 44rpx;
+      text-align: center;
+    }
+    > .des {
+      font-size: 28rpx;
+      margin-bottom: 62rpx;
+      text-align: center;
+    }
+    .desTips {
+      font-size: 24rpx;
+      color: #e73e3d;
+      text-align: center;
+      margin-top: 48rpx;
+    }
+
+    .actionsBtn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 32rpx;
+      // gap: 30rpx;
+
+      view {
+        width: 264rpx;
+        height: 80rpx;
+        border-radius: 40rpx;
+        font-size: 32rpx;
+        display: flex;
+        align-items: center;
+        line-height: 80rpx;
+        justify-content: center;
+        &:first-child {
+          background: #e9e9e9;
+          margin-right: 30rpx;
+        }
+
+        &:last-child {
+          background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+.confirmSendLoginsticsContent {
+  padding: 0 32rpx;
+  padding-top: 16rpx;
+  padding-bottom: 180rpx;
+
+  .address {
+    width: 686rpx;
+    height: 144rpx;
+    border-radius: 24rpx;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    /* gap: 24rpx; */
+    padding: 0 24rpx;
+    /* grid-template-columns: 56rpx 502rpx 32rpx; */
+
+    .location {
+      // color: #1a1a1a;
+      font-size: 28rpx;
+      font-weight: bold;
+    }
+    .contact {
+      color: #505050;
+      font-size: 24rpx;
+      margin-top: 16rpx;
+    }
+  }
+
+  .selectCards {
+    font-size: 32rpx;
+    padding: 24rpx 24rpx 24rpx 24rpx;
+    background: #ffffff;
+    border-radius: 24rpx;
+    margin-top: 16rpx;
+    .title {
+      font-size: 28rpx;
+    }
+    .cardsList {
+      display: flex;
+      flex-wrap: nowrap;
+      /* gap: 8rpx; */
+
+      .card {
+        margin-right: 8rpx;
+
+        //   margin: auto;
+        //   margin-top: 30rpx;
+        width: 176rpx;
+        // height: 160rpx;
+        border-radius: 24rpx;
+        position: relative;
+        // margin-bottom: 12rpx;
+        // &:nth-child(5n) {
+        //   margin-right: 0;
+        // }
+        .cardsBgc {
+          width: 176rpx;
+          height: 176rpx;
+          border-radius: 16rpx;
+          position: relative;
+        }
+        .name {
+          font-size: 24rpx;
+          text-align: center;
+          padding: 0 4rpx;
+          margin-top: 8rpx;
+        }
+        .count {
+          position: absolute;
+          right: 8rpx;
+          bottom: 8rpx;
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 16rpx;
+          // padding: 0 14rpx;
+          width: 48rpx;
+          height: 32rpx;
+          color: #fff;
+          font-size: 24rpx;
+          line-height: 32rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .icon {
+          width: 40rpx;
+          height: 40rpx;
+          position: absolute;
+          top: 0%;
+          left: 0%;
+
+          z-index: 99;
+        }
+      }
+    }
+  }
+
+  .detail {
+    padding: 0rpx 24rpx 0 24rpx;
+    background: #ffffff;
+    border-radius: 20rpx;
+    margin-top: 16rpx;
+    .goodsDetail {
+      display: flex;
+      align-items: center;
+      /* gap: 20rpx; */
+
+      > image {
+        width: 180rpx;
+        height: 180rpx;
+        border-radius: 20rpx;
+      }
+      .title {
+        font-size: 30rpx;
+      }
+      .type {
+        display: flex;
+        align-items: center;
+        view {
+          padding: 0 8rpx;
+          display: flex;
+          align-items: center;
+          height: 44rpx;
+          background: #f6f6f6;
+          border-radius: 10rpx;
+          font-size: 24rpx;
+          color: #6d6d6d;
+
+          margin-top: 12rpx;
+        }
+      }
+
+      .price {
+        margin-top: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        font-size: 28rpx;
+        font-weight: 700;
+        .count {
+          font-size: 28rpx;
+          color: #999999;
+          font-weight: 100;
+        }
+      }
+    }
+
+    .fee {
+      /* padding-top: 48rpx; */
+
+      display: flex;
+      flex-direction: column;
+      // padding-bottom: 32rpx;
+      justify-content: center;
+      /* gap: 32rpx; */
+      .item {
+        display: flex;
+        align-items: center;
+        height: 104rpx;
+        justify-content: space-between;
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  .detailPay {
+    padding: 0rpx 32rpx 0 32rpx;
+    background: #ffffff;
+    border-radius: 20rpx;
+    margin-top: 16rpx;
+
+    .fee {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .item {
+        display: flex;
+        align-items: center;
+        height: 104rpx;
+        justify-content: space-between;
+        font-size: 28rpx;
+        .type {
+          display: flex;
+          align-items: center;
+
+          image {
+            width: 56rpx;
+            height: 56rpx;
+            margin-right: 24rpx;
+          }
+        }
+        .check {
+          image {
+            width: 40rpx;
+            height: 40rpx;
+          }
+        }
+      }
+    }
+  }
+  .actionBtn {
+    width: 100%;
+    height: 140rpx;
+    position: relative;
+    background: #ffffff;
+    // border-top: 1rpx solid rgba(0, 0, 0, 0.1);
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0 28rpx;
+    padding-top: 16rpx;
+    z-index: 999;
+    display: flex;
+    justify-content: space-between;
+    .addressTips {
+      width: 100%;
+      height: 80rpx;
+      background: #fff7d2;
+
+      position: absolute;
+      top: -80rpx;
+      left: 0;
+      padding: 0 32rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 28rpx;
+      image {
+        width: 24rpx;
+        height: 24rpx;
+      }
+    }
+    .price {
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: bold;
+      display: flex;
+      // align-items: baseline;
+      align-items: center;
+      .count {
+        font-size: 32rpx;
+        color: #e73e3d;
+        margin-left: 20rpx;
+      }
+    }
+    .confirm {
+      width: 280rpx;
+      height: 80rpx;
+      background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+      border-radius: 40rpx 40rpx 40rpx 40rpx;
+      font-size: 28rpx;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.5;
+      &.active {
+        opacity: 1;
+      }
+    }
+  }
+}
+.previewImage {
+  width: 100%;
+  height: 100vh;
+  background-color: #000;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 9999;
+  transition: all 0.3s ease-in-out;
+  color: #fff;
+  font-size: 28rpx;
+  .goodsName {
+    font-size: 28rpx;
+    padding-top: 30rpx;
+    padding-left: 32rpx;
+    padding-right: 32rpx;
+
+    // font-weight: bold;
+    text-align: center;
+  }
+  .info {
+    display: flex;
+    color: #666666;
+    align-items: center;
+
+    &.levelInfo {
+      > view {
+        margin-right: 6rpx !important;
+      }
+    }
+
+    .line {
+      width: 1px;
+      height: 38rpx;
+      background: #bdbdbd;
+    }
+  }
+  > view {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  .userInfo {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    img {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+  } 
+    .avatar {
+      position: absolute;
+      top: 15.5%;
+      left: 20%;
+       font-size: 45rpx;
+       font-family: 'fxlh';
+       width: 350rpx;
+       color: #000;
+       text-align: left;
+
+    }
+
+    #toImg{
+      position: relative;
+      .mask{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color:transparent;
+      }
+    }
+  img {
+    width: 100vw;
+    // height: 100vw;
+    border-radius: 20rpx;
+    @media (min-width: 500px) {
+      width: 375px;
+      // height: 375px;
+    }
+  }
+  .name {
+    padding-left: 32rpx;
+    padding-right: 32rpx;
+    margin-top: 20rpx;
+    margin-bottom: 15rpx;
+  }
+  .count {
+    margin-top: 15rpx;
+  }
+
+  .exchange {
+    display: flex;
+    flex-direction: column;
+    margin-top: 40rpx;
+    align-items: center;
+    justify-content: center;
+    .tips{
+        font-size: 24rpx;
+      color: #e73e3d;
+      text-align: center;
+      margin-bottom: 15rpx;
+      padding: 0 32rpx;
+
+    }
+    .bgcCenter {
+      width: 229rpx;
+      height: 102rpx;
+      display: flex;
+      // align-items: center;
+      justify-content: center;
+      color: #fff;
+      background-image: url("https://img.shinemang.com/static/rednote/tobaPack.png");
+      font-size: 38rpx;
+      font-family: "fxlh";
+      // background: #ff9a96;
+      // border-radius: 41rpx;
+      // border: 4rpx solid #FFFFFF;
+      line-height: 66rpx;
+    }
+  }
+}
+</style>