123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287 |
- <template>
- <view>
- <u-popup v-model="show" mode="bottom" :border-radius="'50'">
- <view class="popup-box">
- <view class="title">
- <text class="title-btn"></text>
- <text class="title-text">请输入密码</text>
- <text class="title-btn cancel-btn iconfont3" @click.stop="show = false"></text>
- </view>
- <view class="content-box">
- <view class="content-notarize">
- 确认将:
- </view>
- <view class="content-nums">
- <template v-if="type === 1 || type === 0">
- <text class="iconfont3 content-nums-icon"></text>
- <text class="content-nums-text">{{ useNums }}积分</text>
- </template>
- <template v-else-if="type === 2">
- <text class="iconfont content-nums-icon">¥</text>
- <text class="content-nums-text">{{ useNums }}元</text>
- </template>
- </view>
- <view class="content-result">
- {{ result[type]}}
- </view>
- <view class="content-result-num" style="margin-top: 10px;">
- <text>{{ resultNum }}</text>
- </view>
- <view class="content-password">
- <u-message-input :focus="true" :breathe="false" dot-fill :maxlength="maxlength"
- :value="pay_password" @change="changePassword"></u-message-input>
- </view>
- <view class="content-btns">
- <view class="content-btn notarize-btn" @click.stop="givePresent()">
- {{ notarizeBtn[type]}}
- </view>
- <view class="content-btn" @click="show = false">
- 取消
- </view>
- </view>
- </view>
- </view>
- </u-popup>
- </view>
- </template>
- <script>
- export default {
- name: "exchange-hint",
- props: {
- params: {
- type: Object,
- default: () => {
- return {
- url: '',
- mode: '',
- data: {}
- }
- }
- },
- type: {
- // 转赠/兑换类型 0:积分兑换余额;1:积分转赠;2:余额转赠
- type: Number,
- default: 0
- },
- useNums: {
- // 转赠 / 兑换 数量
- type: String | Number,
- default: 0
- },
- resultNum: {
- type: String,
- default: ''
- }
- },
- data() {
- return {
- show: false,
- maxlength: 6, // 密码长度
- pay_password: '',
- result: [
- "兑换为余额",
- "转赠给:",
- "转赠给:"
- ],
- notarizeBtn: [
- '确认兑换',
- '确认转赠',
- '确认转赠'
- ],
- givePresentLoading: false
- };
- },
- watch: {
- },
- methods: {
- changePassword(e) {
- this.pay_password = e
- },
- open() {
- this.show = true
- },
- givePresent() {
- if (this.givePresentLoading) {
- return false;
- };
- if (!this.pay_password) {
- this.$mUtil.toast("请输入支付密码")
- return false
- };
- if (this.pay_password.length !== this.maxlength) {
- this.$mUtil.toast("请确认密码是否输入完整")
- return false
- };
- this.givePresentLoading = true;
- const data = {
- ...this.params.data,
- pay_password: this.pay_password
- }
- try {
- this.$http[this.params.mode](this.params.url, data).then((res) => {
- if (res && res.code == 200) {
- console.log('resresres = ', res)
- if (this.type === 0) {
- this.$mUtil.toast("兑换成功")
- } else if (this.type === 1 || this.type === 2) {
- this.$mUtil.toast("转赠成功")
- }
- this.show = false;
- setTimeout(() => {
- uni.navigateBack({
- delta: 1
- })
- }, 1000)
- };
- this.givePresentLoading = false;
- }).catch(err => {
- this.givePresentLoading = false;
- })
- } catch (e) {
- this.givePresentLoading = false;
- }
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .popup-box {
- padding: 60rpx 60rpx 0;
- }
- .title {
- width: 100%;
- height: 68rpx;
- border-radius: 50rpx 50rpx 0 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
- text {
- height: 100%;
- }
- .title-btn {
- width: 80rpx;
- text-align: right;
- }
- .cancel-btn {
- font-size: 50rpx;
- display: flex;
- justify-content: flex-end;
- }
- .title-text {
- position: relative;
- font-size: 36rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- color: #1a1a1a;
- &:before {
- content: '';
- position: absolute;
- left: 50%;
- bottom: 0;
- width: 64rpx;
- height: 8rpx;
- background: #cccccc;
- transform: translateX(-50%);
- border-radius: 4rpx;
- }
- }
- }
- .content-box {
- width: 100%;
- .content-notarize {
- padding: 50rpx 0 3px;
- font-size: 32rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- color: #333333;
- }
- .content-nums {
- .content-nums-icon {
- font-size: 45rpx;
- color: #000000;
- margin-right: 10px;
- }
- .content-nums-text {
- font-size: 60rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- color: #1a1a1a;
- }
- }
- .content-result {
- margin-top: 61rpx;
- font-size: 32rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- color: #333333;
- }
- .content-result-num {
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- }
- .content-password {
- padding: 60rpx 0 76rpx;
- }
- .content-btns {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-bottom: 106rpx;
- .content-btn {
- width: 298rpx;
- height: 85rpx;
- border-radius: 43rpx;
- color: #FA6138;
- background: #e7eefc;
- border: 1rpx solid #3775f6;
- text-align: center;
- line-height: 83rpx;
- }
- .notarize-btn {
- background-color: #FA6138;
- color: #FFFFFF;
- }
- }
- // <view class="content-btns">
- // <view class="content-btn">
- // 确认兑换
- // </view>
- // <view class="content-btn">
- // 取消
- // </view>
- // </view>
- }
- /deep/.u-char-item {
- background-color: #e6e6e6;
- border: none;
- }
- </style>
|