|
|
@@ -0,0 +1,459 @@
|
|
|
+<template>
|
|
|
+ <view class="login-main">
|
|
|
+ <view style="width: 100%; height: 220px">
|
|
|
+ <view class="login-main-content">
|
|
|
+ <image class="img" :src="shopInfo?shopInfo.store_logo_url:''" mode=""></image>
|
|
|
+ <h4 class="shopName">{{shopInfo?shopInfo.store_name:""}}</h4>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="login-contont">
|
|
|
+ <view class="uInput">
|
|
|
+
|
|
|
+ <u-input placeholder="请输入金额" border="bottom" :fontSize="40" type="digit"
|
|
|
+ @change="validateInput($event,1)" v-model="price" :customStyle="inpustyle">
|
|
|
+ <span slot="prefix" style="font-size: 30px">￥</span>
|
|
|
+ </u-input>
|
|
|
+ </view>
|
|
|
+ <view class="login-contont-button">
|
|
|
+ <button class="btn" @click="Pay">立即支付</button>
|
|
|
+ <view style="margin-top: 20rpx; font-size: 26rpx">
|
|
|
+ 支付成功后，次日有奖励红包，农商直采小程序领取
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-popup :zIndex="200" :overlayStyle={zIndex:200} :show="showPhone" @close="close" @open="open"
|
|
|
+ :safeAreaInsetTop="true" round="20">
|
|
|
+ <view class="popup">
|
|
|
+ <view class="header">
|
|
|
+ <h4>绑定手机号</h4>
|
|
|
+ <p class="tip">注意：首次登录，需绑定手机号才可成功领取农商网红包</p>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view style="height: 70rpx">
|
|
|
+ <u--input placeholder="请输入手机号" type="number" border="surround" v-model="phone"
|
|
|
+ style="background: #F4F4F4;height:100%" />
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 20px;height: 70rpx">
|
|
|
+ <u--input placeholder="验证码" border="surround" v-model="yzm"
|
|
|
+ style="background: #F4F4F4;height:100%">
|
|
|
+ <template slot="suffix">
|
|
|
+ <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
|
|
|
+ <text class="yzm" @tap="getCode">{{tips?tips:'发送验证码'}}</text>
|
|
|
+ </template>
|
|
|
+ </u--input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer">
|
|
|
+ <u-button type="primary" class="btn" text="确定" @click="submitOk"></u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import ap from "../../static/zfb.js"
|
|
|
+ import {
|
|
|
+ requestConfig
|
|
|
+ } from "@/app.config.js";
|
|
|
+ import axios from "axios";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ap: ap,
|
|
|
+ showPhone: false,
|
|
|
+ requestConfig: requestConfig,
|
|
|
+ code: "",
|
|
|
+ appid: "",
|
|
|
+ value: "",
|
|
|
+ userInfo: {},
|
|
|
+ inpustyle: {
|
|
|
+ fontWeight: "bold",
|
|
|
+ fontSize: "40px",
|
|
|
+ },
|
|
|
+ phone: "",
|
|
|
+ yzm: "",
|
|
|
+ tips: null,
|
|
|
+ price: null,
|
|
|
+ shopId: "",
|
|
|
+ shopInfo: {},
|
|
|
+ zfbInfo: {},
|
|
|
+ shopId: "",
|
|
|
+ localUserInfo: {}
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.zfbInfo = options
|
|
|
+ this.shopId = options.shopId
|
|
|
+ let info = localStorage.getItem('userInfo');
|
|
|
+ this.localUserInfo = JSON.parse(info)
|
|
|
+ if (this.localUserInfo) {
|
|
|
+ this.vidTokenExist()
|
|
|
+ } else {
|
|
|
+ this.getShopInfo();
|
|
|
+ this.getInfo();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async vidTokenExist() {
|
|
|
+ let res = await axios.get(
|
|
|
+ `${requestConfig.BaseUrl}user/app/v1/user/vidTokenExist`, {
|
|
|
+ headers: {
|
|
|
+ 'token': `${this.localUserInfo.token}`
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.userInfo = this.localUserInfo;
|
|
|
+ this.getShopInfo();
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('登录已过期,请重新登录！');
|
|
|
+ localStorage.removeItem('userInfo');
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/index/index?shopId=' + this.shopId
|
|
|
+ })
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async getInfo() {
|
|
|
+ const res = await axios.post(
|
|
|
+ `${requestConfig.BaseUrl}user/app/v1/user/alipayLogin?code=${this.zfbInfo.auth_code}`
|
|
|
+ );
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.userInfo = res.data.data;
|
|
|
+ localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
|
|
|
+ if (this.userInfo.bindPhoneStatus == 0) {
|
|
|
+ this.showPhone = true
|
|
|
+ } else {
|
|
|
+ this.showPhone = false
|
|
|
+ this.getShopInfo()
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('获取登录信息失败！');
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async Pay() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '支付中'
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!this.price) {
|
|
|
+ uni.$u.toast('请输入支付金额！');
|
|
|
+ }
|
|
|
+ let res = await axios.get(`${requestConfig.BaseUrl}order/app/v1/buyer/order/createOfflineOrder
|
|
|
+ ?shopId=${this.zfbInfo.shopId}&price=${this.price}`, {
|
|
|
+ headers: {
|
|
|
+ 'token': `${this.userInfo.token}`
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ let data = {
|
|
|
+ "orderId": res.data.data, //订单id
|
|
|
+ "orderType": 11, //订单类型 -1--其他 2-司机保证金 3-商品交易 11-线下交易
|
|
|
+ "payKinds": 1, //支付类型 0-微信 1-支付宝
|
|
|
+ "payMeth": 7 //5-微信小程序支付 6-微信H5支付 7-支付宝app支付
|
|
|
+ }
|
|
|
+ const pay = await axios.post(`${requestConfig.BaseUrl}order/app/v1/buyer/order/offlineOrderPay
|
|
|
+ `, data, {
|
|
|
+ headers: {
|
|
|
+ 'Token': `${this.userInfo.token}`
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (pay.data.code == 200) {
|
|
|
+ uni.hideLoading();
|
|
|
+ window.location.href =
|
|
|
+ // pay.data.data.result
|
|
|
+ `alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(pay.data.data.result)}`
|
|
|
+ // window.close(); // 关闭当前页面
|
|
|
+ // ap.popWindow()
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('支付失败！');
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('创建线下支付订单失败！');
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ validateInput(e, num) {
|
|
|
+ const inputTypeNum = /[^\d]/g //数字
|
|
|
+ switch (num) {
|
|
|
+ case 1:
|
|
|
+ //要写nextTick 不然无效
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.listData.integral = e.replace(inputTypeNum, '');
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async getShopInfo() {
|
|
|
+ let res = await axios.get(
|
|
|
+ `${requestConfig.BaseUrl}user/app/v1/store/getStoreInfoByScan?shopId=${this.zfbInfo.shopId}`, {
|
|
|
+ headers: {
|
|
|
+ 'token': `${this.userInfo.token}`
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.shopInfo = res.data.data
|
|
|
+ } else {
|
|
|
+ uni.$u.toast(res.data.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async submitOk() {
|
|
|
+ if (this.phone == "") {
|
|
|
+ uni.$u.toast('请输入手机号');
|
|
|
+ } else if (this.yzm == "") {
|
|
|
+ uni.$u.toast('请输入验证码');
|
|
|
+ }
|
|
|
+ const res = await axios.post(
|
|
|
+ `${requestConfig.BaseUrl}user/app/v1/user/bindPhone?phone=${this.phone}&code=${this.yzm}&alipayUserId=${this.userInfo.alipayUserId}`
|
|
|
+ );
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ uni.$u.toast('绑定手机号成功');
|
|
|
+ this.userInfo = res.data.data
|
|
|
+ this.showPhone = false
|
|
|
+ this.getShopInfo()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ codeChange(text) {
|
|
|
+ this.tips = text;
|
|
|
+ },
|
|
|
+ async getCode() {
|
|
|
+ if (this.$refs.uCode.canGetCode) {
|
|
|
+ const res = await axios.post(
|
|
|
+ `${requestConfig.BaseUrl}third/app/v1/third/getSMSCode?phone=${this.phone}`
|
|
|
+ );
|
|
|
+ uni.showLoading({
|
|
|
+ title: '正在获取验证码'
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.$u.toast('验证码已发送');
|
|
|
+ this.$refs.uCode.start();
|
|
|
+ }, 2000);
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('倒计时结束后再发送');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // async Pay() {
|
|
|
+ // uni.showLoading({
|
|
|
+ // title: '支付中'
|
|
|
+ // });
|
|
|
+ // // uni.hideLoading();
|
|
|
+ // // window.open(`${requestConfig.redirectOpen}pages/index/paySuccess`)
|
|
|
+
|
|
|
+ // if (!this.price) {
|
|
|
+ // uni.$u.toast('请输入支付金额！');
|
|
|
+ // }
|
|
|
+ // let res = await axios.get(`${requestConfig.BaseUrl}order/app/v1/buyer/order/createOfflineOrder
|
|
|
+ // ?shopId=${this.shopId}&price=${this.price}`, {
|
|
|
+ // headers: {
|
|
|
+ // 'token': `${this.userInfo.token}`
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // if (res.data.code == 200) {
|
|
|
+ // //post请求
|
|
|
+ // let data = {
|
|
|
+ // "orderId": res.data.data, //订单id
|
|
|
+ // "orderType": 11, //订单类型 -1--其他 2-司机保证金 3-商品交易 4-线下交易
|
|
|
+ // "payKinds": 0, //支付类型 0-微信 1-支付宝
|
|
|
+ // "payMeth": 6 //5-微信小程序支付 6-微信H5支付 7-支付宝app支付
|
|
|
+ // }
|
|
|
+ // const pay = await axios.post(`${requestConfig.BaseUrl}order/app/v1/buyer/order/offlineOrderPay
|
|
|
+ // `, data, {
|
|
|
+ // headers: {
|
|
|
+ // 'Token': `${this.userInfo.token}`
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // if (pay.data.code == 200) {
|
|
|
+ // let res = JSON.parse(pay.data.data.result)
|
|
|
+ // console.log(res);
|
|
|
+ // WeixinJSBridge.invoke(
|
|
|
+ // "getBrandWCPayRequest", {
|
|
|
+ // // 公众号名称，由商户传入
|
|
|
+ // appId: res.appId,
|
|
|
+ // // 时间戳，自1970年以来的秒数
|
|
|
+ // timeStamp: res.timeStamp,
|
|
|
+ // // 随机串
|
|
|
+ // nonceStr: res.nonceStr,
|
|
|
+ // package: res.package,
|
|
|
+ // // 微信签名方式：
|
|
|
+ // signType: res.signType,
|
|
|
+ // // 微信签名
|
|
|
+ // paySign: res.paySign,
|
|
|
+ // },
|
|
|
+ // function(res) {
|
|
|
+ // if (res.err_msg == "get_brand_wcpay_request:ok") {
|
|
|
+ // // 使用以上方式判断前端返回,
|
|
|
+ // // 微信团队郑重提示：
|
|
|
+ // uni.hideLoading();
|
|
|
+ // window.location.href = requestConfig.redirectOpen
|
|
|
+ // // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
|
|
+ // } else {
|
|
|
+ // uni.hideLoading();
|
|
|
+ // uni.$u.toast('支付失败！');
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // );
|
|
|
+
|
|
|
+ // } else {
|
|
|
+ // uni.hideLoading();
|
|
|
+ // uni.$u.toast('支付失败！');
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .shopName {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 修改加载提示框的遮罩层 z-index */
|
|
|
+ .uni-loading__mask {
|
|
|
+ z-index: 10076;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 修改加载提示框本身的 z-index */
|
|
|
+ .uni-loading {
|
|
|
+ z-index: 10076;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yzm {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #00D36D;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup {
|
|
|
+ height: 300px;
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ margin-top: 150rpx;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(275deg, #01CF6C 0%, #07E278 100%);
|
|
|
+ border-radius: 46rpx;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FF8B2F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-radio-group--row {
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radioText {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 34rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-main {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ align-items: center;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-contont-button {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 95%;
|
|
|
+ height: 90rpx;
|
|
|
+ background: linear-gradient(275deg, #01cf6c 0%, #07e278 100%);
|
|
|
+ border-radius: 44rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-contont {
|
|
|
+ width: 90%;
|
|
|
+ height: 50%;
|
|
|
+
|
|
|
+ .uInput {
|
|
|
+ padding: 10px 0px;
|
|
|
+ border-bottom: 0.5px solid #97979740;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-contont-info {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-main-content {
|
|
|
+ background: url("../../static/images/payBack.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ margin-top: 70px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
