123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286 |
- <template>
- <view>
- <uni-popup ref="popup" type="center" @change="maskClick">
- <view class="get-phone-pop">
- <view class="content-block">
- <view class="content flex flex-y-center flex-x-center">完善资料享有更多优惠,是否完善</view>
- </view>
- <form @submit="getbang">
- <view class="flex-y-center content-tel">
- <text style="min-width: 130rpx;">手机号码</text>
- <view class="flex-y-center content-tel-bor">
- <input type="number" maxlength="11" @input="getphone" name='tel'
- placeholder-class="content-tel-bor-input" placeholder="请输入手机号码" />
- </view>
- </view>
- <view class="flex-y-center content-tel">
- <view class="flex-y-center content-tel-bor" style="border: none;">
- <input type="number" placeholder-class="content-tel-bor-input" name='code'
- placeholder="请输入验证码" />
- <view class="code-btn" @click="getCode" :style="{'background-color':setColor}">
- {{codeConfig.type == 1?'获取验证码':'重试('+codeConfig.time+'s)'}}
- </view>
- </view>
- </view>
- <view class="btm-block flex flex-nowarp flex-x-between">
- <button class="btn" @click="showGetPhone">取消</button>
- <button form-type="submit" class="btn sub-btn" :style="{color:setColor}">马上完善</button>
- </view>
- </form>
- </view>
- </uni-popup>
- </view>
- </template>
- <script>
- // #ifdef MP-ALIPAY
- // const {
- // requestSubscribeMessage
- // } = requirePlugin('subscribeMsg');
- // #endif
- export default {
- props: {
- getPhonePop: {
- type: Boolean,
- default: false
- },
- },
- watch: {
- getPhonePop: {
- handler(newVal) {
- console.log(newVal,"newVal")
- if (newVal) {
- this.$refs.popup.open();
- }
- },
- }
- },
- data() {
- return {
- phone: null,
- codeConfig: {
- type: 1,
- time: 60
- }
- }
- },
- methods: {
- maskClick(e) {
- if (!e.show) {
- this.$emit('close', false);
- }
- },
- getphone(e) {
- this.phone = e.detail.value;
- },
-
- showGetPhone() {
- this.$refs.popup.close();
- },
- // 获取验证码
- getCode() {
- if (this.codeConfig.type != 1) {
- return
- }
- if (!/^1[0-9]{10}/.test(this.phone)) {
- uni.showToast({
- title: "请正确输入手机号",
- icon: 'none'
- })
- return false
- }
- this.$http.request('xcx/sendcode', {
- tel: this.phone,
- store_id:this.$store.state.store_id,
- }, "", "", true).then(res => {
- if (res.code == "200") {
- this.codeConfig.type = 2
- this._timer = setInterval(() => {
- if (this.codeConfig.time == 1) {
- this.codeConfig = {
- type: 1,
- time: 30
- }
- clearInterval(this._timer)
- }
- this.codeConfig.time--
- }, 1000)
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
- // 支付宝成为会员
- getbang(e) {
- let subscribe = uni.getStorageSync('balance_subscribe');
- let data = {},
- url;
- if (!/^1[0-9]{10}/.test(e.detail.value.tel)) {
- uni.showToast({
- title: "请正确输入手机号",
- icon: 'none'
- })
- return false
- }
- if (!e.detail.value.code) {
- uni.showToast({
- title: "请输入验证码",
- icon: 'none'
- })
- return false
- }
- data.tel = e.detail.value.tel;
- data.store_id = this.$store.state.store_id,
- data.id = this.$store.state.userInfo.id,
- data.code = e.detail.value.code;
- // console.log(this.$store.state.store_id, this.$store.state.userInfo.id, this.$store.state.systemInfo
- // .alipay_appid)
- this.$http.request('xcx/alipaytel', data, "", "", true).then(res => {
- if (res.code == "200") {
- this.phoneNumber = res.data.phoneNumber;
- uni.setStorageSync('phone', res.data.phoneNumber);
- uni.showModal({
- title: '恭喜完成!',
- content: '享受更多优惠!',
- showCancel: false,
- cancelText: '',
- confirmText: '确定',
- success: res => {
- this.$refs.popup.close();
- let that = this;
- // 调用方法,唤起订阅组件
- my.requestSubscribeMessage({
- thirdTypeAppId: this.$store.state.systemInfo
- .alipay_appid, // 可选,isv接入场景下必填
- entityIds: [subscribe.alipay_user], // 模板id列表,最多3个
- // 接收结果的回调方法
- complete:(r)=> {
- console.log('订阅回调', r);
- },
- });
- that.menber_info();
- },
- fail: () => {},
- complete: () => {}
- });
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
- menber_info() {
- let userInfo = this.$store.state.userInfo;
- let pages = getCurrentPages();
- let { route, options } = pages[pages.length-1];
- this.$http.request('xcx/userinfo', {
- id: userInfo.id,
- }, "", "", true).then(res => {
- if (res.code == "200") {
- this.$store.commit('SET_USER_INFO', res.data)
- if (route =="pages/creatOrder/creatOrder") {
- uni.redirectTo({
- url: `/pages/creatOrder/creatOrder?teen_index=${options.teen_index}&eat_people=${options.eat_people}`
- })
- }
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
-
- }
- }
- </script>
- <style>
- /* 成为会员 */
- .get-phone-pop {
- width: 660rpx;
- background-color: #fff;
- border-radius: 14rpx;
- overflow: hidden;
- }
- .code-btn {
- flex: none;
- width: 170rpx;
- height: 60rpx;
- border-radius: 30rpx;
- background-color: #3387FF;
- text-align: center;
- line-height: 60rpx;
- color: #fff;
- font-size: 24rpx;
- }
- .get-phone-pop .content {
- // height: 180rpx;
- text-align: center;
- font-size: 35rpx;
- color: #000;
- // line-height: 60rpx;
- padding: 30rpx 0;
- }
- .get-phone-pop .btm-block {
- width: 100%;
- height: 115rpx;
- border-top: 1rpx solid #eef0ef;
- }
- .get-phone-pop .btm-block .btn {
- flex: none;
- width: 50%;
- height: 115rpx;
- box-sizing: border-box;
- text-align: center;
- line-height: 115rpx;
- color: #010101;
- font-weight: bold;
- padding: 0;
- margin: 0;
- border: none;
- border-radius: 0;
- background-color: #fff;
- font-size: 35rpx;
- }
- .get-phone-pop .btm-block .btn::after {
- padding: 0;
- border: none;
- border-radius: 0;
- }
- .get-phone-pop .btm-block .sub-btn {
- color: #626c90;
- border-left: 1px solid #eef0fe;
- }
- .content-tel {
- padding: 20rpx 40rpx;
- }
- .content-tel-bor {
- border-bottom: 1rpx solid #F1F1F1;
- margin-left: 10rpx;
- }
- .content-tel-bor-input {
- font-size: 26rpx;
- }
- </style>
|