zhishifufei_uniapp/pages/member/member_manage.vue

<template>
  
  <BaseContainer class="">
    <NavBar title="卡密激活" />
    <view class="exchange-page">
      <view class="page-bg"></view>
      <view class="title-section">
        <view class="text">激活会员卡</view>
      </view>
      <view class="form-section">
        <view class="label">
          <text class="iconfont iconqiahao"></text>
          <input
            v-model="member_code"
            class="input"
            maxlength="18"
            placeholder="请输入卡号"
          />
        </view>
        <view class="label password">
          <text class="iconfont iconkahao"></text>
          <input
            v-model="member_pwd"
            class="input"
            type="password"
            placeholder="请输入密码"
          />
        </view>
        <view class="button flex flex-center" @click="onSubmit">确认激活</view>
      </view>
      <view v-if="interests.length" class="power-section">
        <view class="title">
          <view class="text">会员尊享权益</view>
        </view>
        <view class="list">
          <view v-for="item in interests" :key="item.id" class="item">
            <view class="img-wrap">
              <image class="img" :src="item.pic" />
            </view>
            <view class="name">{{ item.name }}</view>
            <view class="info">{{ item.explain }}</view>
          </view>
        </view>
      </view>
      <view v-if="description.length" class="explain-section">
        <view class="title">会员说明：</view>
        <view class="ol">
          <view v-for="item in description" :key="item.id">{{
            item.text
          }}</view>
        </view>
      </view>
    </view>
  </BaseContainer>
</template>

<script>
import { exchangeMember, getMerberData } from "@/api/member";
export default {
  data() {
    return {
      description: [],
      interests: [],
      member_code: "",
      member_pwd: "",
      loginShow: false,

      type: 1,
      bid: 0,
    };
  },
  onLoad({ type = 1, bid = 0 }) {
    this.type = type;
    this.bid = bid;
    this.init();
  },
  methods: {
    async init() {
      uni.showLoading({ mask: true });

      try {
        const { data } = await getMerberData();
        uni.hideLoading();
        this.description = data.description;
        this.interests = data.interests;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
    onSubmit() {
      this.$util.checkLogin(async () => {
        if (!this.member_code) {
          return this.$util.showMsg("请输入卡号");
        }
        if (this.member_code.length !== 18) {
          return this.$util.showMsg("请输入正确的卡号");
        }
        if (!this.member_pwd) {
          return this.$util.showMsg("请输入密码");
        }
        if (this.member_pwd.length !== 5) {
          return this.$util.showMsg("请输入正确的密码");
        }
        uni.showLoading({ mask: true });

        try {
          const { msg } = await exchangeMember(
            this.member_code,
            this.member_pwd
          );

          uni.hideLoading();
          this.$util.showMsg(msg);
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/special/member_recharge",
            });
          }, 500);
        } catch (err) {
          uni.hideLoading();
          this.$util.showMsg(err);
        }
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>

<style scoped lang="scss">
/* 兑换会员 */
.exchange-page {
  position: relative;
}

.page-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 319rpx;
  background: linear-gradient(210deg, #4f547e 0%, #2c3353 100%);
}

.exchange-page .title-section {
  padding-top: 38rpx;
  padding-bottom: 31rpx;
  text-align: center;
}

.exchange-page .title-section .text {
  position: relative;
  display: inline-block;
  padding: 54rpx 25rpx 0;
  background: url("@/static/icon/king1.png") center top/62rpx 42rpx no-repeat;
  vertical-align: middle;
  font-size: 36rpx;
  line-height: 50rpx;
  color: #f9e1c2;
}

.exchange-page .title-section .text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 72rpx;
  height: 2rpx;
  margin-top: 25rpx;
  background-color: rgba(249, 225, 194, 0.5);
}

.exchange-page .title-section .text::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 72rpx;
  height: 2rpx;
  margin-top: 25rpx;
  background-color: rgba(249, 225, 194, 0.5);
}

.exchange-page .form-section {
  padding: 14rpx 25rpx 37rpx;
  border-radius: 16rpx;
  margin-right: 30rpx;
  margin-left: 30rpx;
  background-color: #ffffff;
  position: relative;
}

.exchange-page .form-section .label {
  display: flex;

  align-items: center;
  border-bottom: 1px solid #eeeeee;
}

.exchange-page .form-section .iconfont {
  font-size: 36rpx;
  color: #282828;
}

.exchange-page .form-section .input {
  flex: 1;
  min-width: 0;
  height: 102rpx;
  margin-left: 20rpx;
  font-size: 30rpx;
}

.exchange-page .form-section .input::placeholder {
  color: #999999;
}

.exchange-page .form-section .button {
  width: 100%;
  height: 86rpx;
  border-radius: 43rpx;
  margin-top: 37rpx;
  background: linear-gradient(270deg, #eeb669 0%, #fbe1b8 100%);
  font-size: 32rpx;
  color: #9f620e;
}

.exchange-page .power-section {
  padding-top: 35rpx;
  padding-bottom: 10rpx;
  border-radius: 16rpx;
  margin: 20rpx 30rpx;
  background-color: #ffffff;
}

.exchange-page .power-section .title {
  text-align: center;
}

.exchange-page .power-section .text {
  display: inline-block;
  padding-right: 45rpx;
  padding-left: 45rpx;
  background: url("@/static/icon/king2.png") center/100% no-repeat;
  vertical-align: middle;
  font-weight: bold;
  font-size: 36rpx;
  line-height: 50rpx;
  color: #9f620e;
}

.exchange-page .power-section .list {
  display: flex;

  align-items: center;

  flex-wrap: wrap;
}

.exchange-page .power-section .item {
  flex: 0 0 33.33%;
  min-width: 0;
  padding-top: 50rpx;
  padding-bottom: 50rpx;
}

.exchange-page .power-section .img-wrap {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  margin: 0 auto;
  background-color: #fff5e8;
  line-height: 96rpx;
  text-align: center;
}

.exchange-page .power-section .img {
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
}

.exchange-page .power-section .name {
  margin-top: 20rpx;
  font-size: 26rpx;
  line-height: 37rpx;
  text-align: center;
  color: #282828;
}

.exchange-page .power-section .info {
  margin-top: 3rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 21rpx;
  line-height: 29rpx;
  text-align: center;
  color: #999999;
}

.exchange-page .explain-section {
  margin-top: 40rpx;
}

.exchange-page .explain-section .title {
  padding-left: 55rpx;
  font-size: 30rpx;
  line-height: 42rpx;
  color: #282828;
}

.exchange-page .explain-section .ol {
  margin: 21rpx 55rpx 66rpx 81rpx;
  font-size: 26rpx;
  line-height: 46rpx;
  text-align: justify;
  color: #666666;

  view {
    display: list-item;
    list-style: decimal;
  }
}
</style>