@alu008/test_yuanqikaixiang 1.0.0

package/components/cardDetails/cardDetails.vue

@@ -0,0 +1,273 @@
+<template>
+  <view class="cardDetailPopup">
+    <u-popup
+      closeable
+      @close="$emit('close')"
+      :show="show"
+      mode="bottom"
+      :round="16"
+      @touchmove.stop.prevent
+      :safeAreaInsetBottom="false"
+    >
+      <!-- backgroundImage: 'url(' + cardDetail.coverImage + ')', -->
+      <view v-if="cardDetail" class="smallCardDetail">
+        <view class="title">小卡详情</view>
+
+        <scroll-view :style="{paddingBottom:cardDetail.series && cardDetail.series.id?'0rpx':'0rpx',height:cardDetail.series && cardDetail.series.id?'940rpx':'1080rpx'}" class="details" scroll-y>
+          <view style="padding-top: 50rpx;">
+            <view
+              class="images bgcCenter"
+              :style="{
+                backgroundImage: showBack
+                  ? 'url(' + formateUrl(cardDetail.series.backCover) + ')'
+                  : 'url(' + formateUrl(cardDetail.coverImage) + ')',
+              }"
+            >
+              <image
+                :src="'https://img.shinemang.com/static/cardDetail/level' + cardDetail.level + '.png'"
+                mode="aspectFill"
+            /></view>
+            <view
+              style="
+                font-weight: 600;
+                font-size: 32rpx;
+                line-height: 46rpx;
+                margin-top: 24rpx;
+                text-align: center;
+                 padding: 0 32rpx;
+              "
+              >{{ cardDetail.name }}</view
+            >
+
+            <view class="des">
+              <!-- <view class="item">
+                <view>参数</view>
+                <view class="info">
+                  <view>
+                    <view class="fb" style="color: #000">88*63mm</view>
+                    <view>尺寸</view>
+                  </view>
+                  <view class="line"></view>
+                  <view>
+                    <view class="fb" style="color: #000">88*63mm</view>
+                    <view>尺寸</view>
+                  </view>
+                  <view class="line"></view>
+                  <view>
+                    <view class="fb" style="color: #000">88*63mm</view>
+                    <view>尺寸</view>
+                  </view>
+                </view>
+              </view> -->
+              <view class="item" style="align-items: center">
+                <view style="margin-right: 24rpx;">等级</view>
+                <view class="info levelInfo">
+                  <u-icon
+                    :key="index"
+                    v-for="(value, index) in 5"
+                    name="star-fill"
+                    :color="
+                      index < cardDetail.level ? '#000' : 'rgba(0, 0, 0, 0.3)'
+                    "
+                    size="20"
+                  
+                  ></u-icon>
+                </view>
+              </view>
+              <view class="item">
+                <view> {{ cardDetail.detailContent }}</view>
+              </view>
+              <!-- <view class="item">
+                <view>类型</view>
+                <view class="info">
+                  <view class="fb" style="color: #000">常规卡</view>
+                </view>
+              </view> -->
+            </view>
+
+            <view
+              v-if="cardDetail.detailUrl.length > 0"
+              style="margin-top: 40rpx"
+            >
+              <image
+                v-for="(item, index) in cardDetail.detailUrl"
+                :src="item"
+                :key="index"
+                mode="widthFix"
+                style="vertical-align: middle; width: 100%"
+              />
+            </view>
+          </view>
+        </scroll-view>
+        <!-- <view class="details">
+        
+        </view> -->
+        <view v-if="cardDetail.series && cardDetail.series.id" class="actionBtns">
+          <view class="actionBtn">
+            <view @click="toGachaDetail">
+              <view style="color: #fff; font-size: 32rpx">去抽卡</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+import { formateServerUrl, navagatorBack } from "@/utils";
+
+export default {
+  props: {
+    // 登录组件是否需要检查手机号码
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    cardDetail: {
+      type: null | Object,
+      default: null,
+    },
+    back: {
+      type: Boolean,
+      default: false,
+    },
+    showBack: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      btnColor: "",
+    };
+  },
+  components: {},
+  onLoad(options) {},
+  methods: {
+    toGachaDetail() {
+      if (this.back) {
+        navagatorBack();
+      } else {
+        if(this.cardDetail.series && this.cardDetail.series.id){
+    uni.navigateTo({
+          url:
+            "/subpackages/gachaDetail/gachaDetail?series_id=" +
+            this.cardDetail.series.id,
+        });
+        }
+    
+      }
+    },
+    formateUrl(url) {
+      return formateServerUrl(url);
+    },
+  },
+  onShow() {},
+  onShareAppMessage() {},
+  onShareTimeline() {},
+};
+</script>
+
+<style lang="less">
+.cardDetailPopup {
+  .smallCardDetail {
+    height: 1200rpx;
+    width: 100%;
+    padding: 0 32rpx;
+
+    .title {
+      color: #1a1a1a;
+      font-size: 36rpx;
+      font-weight: 600;
+      text-align: center;
+      margin: 40rpx 0;
+      height: 40rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .actionBtns {
+      width: 100%;
+      // height: 180rpx;
+      background: #ffffff;
+
+      position: absolute;
+      bottom: 0;
+      height: 140rpx;
+      left: 0;
+      padding: 0 32rpx;
+      padding-top: 14rpx;
+      .actionBtn {
+        > view {
+          width: 100%;
+          height: 92rpx;
+          background: #0e4d83;
+          border-radius: 864rpx;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          font-size: 22rpx;
+          color: rgba(255, 255, 255, 0.8);
+        }
+      }
+
+
+    }
+    .details {
+      width: 100%;
+      // padding-bottom: 180rpx;
+      border-radius: 24rpx;
+      background: #dcf2ff;
+
+      height: 940rpx;
+
+      view {
+        .images {
+          width: 420rpx;
+          height: 554rpx;
+          border-radius: 20rpx;
+
+          margin: auto;
+
+          image {
+            width: 420rpx;
+            height: 554rpx;
+          }
+        }
+
+        .des {
+          padding-left: 32rpx;
+          margin-top: 44rpx;
+
+          .item {
+            display: flex;
+            color: #666666;
+            margin-bottom: 10rpx;
+            
+            .info {
+              display: flex;
+              color: #666666;
+              align-items: center;
+
+              &.levelInfo{
+                >view{
+                  margin-right: 6rpx !important;
+                }
+              }
+
+              .line {
+                width: 1px;
+                height: 38rpx;
+                background: #bdbdbd;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/components/confirmModal/confirmModal.vue

@@ -0,0 +1,125 @@
+
+  <template>
+   <view @touchmove.stop.prevent  class="surePayment">
+      <view class="contentBox">
+        <!-- <view class="title"> </view> -->
+        <view style="text-align: center; padding: 0 32rpx" class="des">
+            {{ des }}
+
+            <view style="margin-top: 8rpx;">    {{ subdes }}</view>
+        </view>
+       
+        <view class="actionsBtn">
+          <view @click="$emit('cancel')">关闭</view>
+          <view v-if="showUseBtn" @click="$emit('confirm')"> 去使用</view>
+        </view>
+      </view>
+    </view>
+
+</template>
+
+<script>
+export default {
+  props: {
+    // 登录组件是否需要检查手机号码
+    des:{
+      type: String,
+      default: '',
+    },
+    subdes:{
+      type: String,
+      default: '',
+    },
+    showUseBtn: {
+      type: Boolean,
+      default: true,
+    },
+   
+  },
+  data() {
+    return {
+     
+    };
+  },
+
+  created() {
+   
+  },
+
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.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;
+       
+        }
+
+        &:last-child {
+          background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+          color: #fff;
+             margin-left: 30rpx;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/fillInfo/fillInfo.vue

@@ -0,0 +1,255 @@
+<template>
+   <view>
+      <u-popup
+      @close="closePoupon"
+      :show="showExchangePeitunPoupon"
+      mode="center"
+      :round="32"
+      :zIndex="10089"
+      class="fillInfoPopupBox"
+      :safeAreaInsetBottom="false"
+    >
+      <view v-if="showExchangePeitunPoupon" class="exchangeCouponPopup">
+        <view class="title over">领取{{ rewardDetail.item.itemName }}</view>
+        <view class="content">
+          <view class="message">
+            <view>姓名</view>
+          <input type="text" v-model="realName" placeholder="请输入姓名" /></view>
+            <view class="message">
+            <view>性别</view>
+              <u-radio-group 
+                  v-model="sex"
+                  iconPlacement="right">
+                <u-radio  iconSize="12px" labelSize="12px"  :customStyle="{marginRight: '8px',fontSize:'24rpx',gap:'4px'}" v-for="(item, index) in radiolist"
+                  :key="index"
+                  :label="item.name"
+                  :name="item.name" ></u-radio>
+              </u-radio-group>
+          </view>
+          <view class="message">
+            <view>手机号</view>
+          <input type="number" v-model="phone" placeholder="请输入手机号" /></view>
+          <view class="message">
+            <view>证件类型</view>
+             <uni-data-select
+             :clear="false"
+              v-model="cardType"
+              :localdata="cardTypes"
+              name="cardType"
+              @change="cardTypesChange"
+            ></uni-data-select>
+          </view>
+          <view class="message"><view>证件号码</view>
+            <input type="text" v-model="cardNum" placeholder="请输入证件号码" /></view>
+                <view class="message"><view>出发地</view>
+          <input type="text" v-model="fromAddress" placeholder="请输入出发地" /></view>
+          <view v-if="showTips" class="tips">
+            温馨提示：领取将在&nbsp;{{rewardDetail.item.itemParams.expire_at}}&nbsp;结束,过期不提交视为自动放弃,请仔细核对填写信息.
+          </view>
+        </view>
+
+        <view class="buttons">
+          <view @click="closePoupon">取消</view>
+          <view @click="exchangePeitunPoupon">确认领取</view>
+        </view>
+      </view>
+    </u-popup>
+   </view>
+</template>
+
+<script>
+import { isMobilePhone } from '@/utils';
+export default {
+  props: {
+   showExchangePeitunPoupon: {
+     type: Boolean,
+     default: false
+   },
+   rewardDetail:{
+     type: Object
+   },
+   showTips:{
+     type: Boolean,
+     default: true
+   }
+   
+  },
+  data() {
+    return {
+      phone: "",
+      nickName:'',
+      realName:'',
+      cardNum:'',
+      fromAddress:'',
+      cardType:'IDCardType_ID',
+      cardTypes:[
+        {
+          value:'IDCardType_ID', text:'身份证'
+        },
+          {
+          value:'IDCardType_GA', text:'港澳通行证'
+        },
+        {
+          value:'IDCardType_TB', text:'台胞证'
+        },
+        {
+          value:'IDCardType_HX', text:'回乡证'
+        },
+        {
+          value:'IDCardType_TW', text:'台湾通行证'
+        },
+        {
+          value:'IDCardType_HZ', text:'护照'
+        }
+      ],
+      sex:'男',
+      radiolist:[
+        {
+          value:'男', name:'男'
+        },
+        {
+          value:'女', name:'女'
+        }]
+
+    };
+  },
+  created() {
+    const phone = uni.getStorageSync("phone");
+      const realName = uni.getStorageSync("realName");
+      const cardNum = uni.getStorageSync("cardNum");
+      const fromAddress = uni.getStorageSync("fromAddress");
+        console.log(phone,realName,cardNum,fromAddress,'阿圣诞节放辣椒李开复');
+      if (phone) {
+        this.phone = phone;
+      }
+      if(realName){
+        this.realName = realName;
+      }
+      // if(cardNum){
+      //   this.cardNum = cardNum;
+      // }
+      if(fromAddress){
+        this.fromAddress = fromAddress;
+      }
+
+  },
+
+  methods: {
+      cardTypesChange(e){
+     
+    },
+    closePoupon(){
+      this.$emit('closePoupon',{state:false});
+    },
+  exchangePeitunPoupon() {
+       if(!this.realName){
+           return uni.showToast({
+          title: "请输入姓名",
+          icon: "none",
+        });
+      }
+     if (!isMobilePhone(this.phone.trim())) {
+        return uni.showToast({
+          title: "请输入正确的手机号",
+          icon: "none",
+        });
+      }
+       if(!this.cardNum.trim()){
+           return uni.showToast({
+          title: "请输入证件号",
+          icon: "none",
+        });
+      }
+       if(!this.fromAddress){
+           return uni.showToast({
+          title: "请输入出发地",
+          icon: "none",
+        });
+      }
+    this.$emit('exchangePeitunPoupon', {phone: this.phone,realName: this.realName,cardNum: this.cardNum,fromAddress: this.fromAddress,cardType: this.cardType,sex: this.sex});
+ 
+    },
+
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.exchangeCouponPopup {
+  width: 100%;
+  padding: 30rpx 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;
+    text-align: center;
+    // line-height: 100rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+    padding: 0 24rpx;
+  }
+  .content {
+    margin-top: 15rpx;
+     .message{
+      margin-bottom: 10rpx;
+      >view{
+        &:first-child{
+          margin-bottom: 4rpx;
+        }
+      }
+    }
+    .subtitle {
+      font-size: 28rpx;
+      font-weight: bold;
+      margin-bottom: 16rpx;
+      text-align: center;
+    }
+    input {
+      // height: 100rpx;
+      background-color: #f6f6f6;
+      padding: 16rpx;
+      font-size: 28rpx;
+      text-align: left;
+      border-radius: 8rpx;
+    }
+    .tips {
+      font-size: 24rpx;
+      color: #e73e3d;
+      text-align: center;
+
+      margin-top: 56rpx;
+    }
+  }
+  .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;
+      }
+    }
+  }
+}
+</style>