新增手机绑定,暂时隐藏不用

pages.json

@@ -93,6 +93,12 @@
 				"navigationBarTitleText": "贵州林产品-企业认证"
 			}
 		},
+		{
+			"path": "pages/usercenter/bindphone/bindphone",
+			"style": {
+				"navigationBarTitleText": "绑定手机号"
+			}
+		},
 		{
 			"path": "pages/usercenter/feedback/feedback",
 			"style": {

pages/product/product.vue

@@ -89,14 +89,24 @@
 				<button type="default" class="bottom-flex-btn primary" @click="callnumber(phoneNumber)">打电话</button>
 			</view>			
 		</view>
+		
+		<uni-popup ref="popup" type="dialog">
+		    <uni-popup-dialog type="info"  content="还未绑定手机号码,是否去绑定?" :duration="2000" :before-close="true" @close="closepopup" @confirm="confirmpopup"></uni-popup-dialog>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
+	import uniPopup from '@/components/uni-popup/uni-popup.vue'
+	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
 	export default {
+		components: {
+			uniPopup,
+			uniPopupDialog
+		},
 		data() {
 			return {
-				
+				userInfo:null,
 				params:{
 					token:'',
 					tokenhead:'',
@@ -147,7 +157,14 @@
 				   // console.log(res.data);
 				}
 			});
-			console.log('option',option);
+			uni.getStorage({
+				key:'userInfo',
+				success: function (res) {
+					self.userInfo = res.data.user;
+				   // console.log('userInfo',self.userInfo);
+				}
+			});
+			// console.log('option',option);
 			this.params.productid = option.id;
 			this.thispage = `/#/pages/product/product?id=${this.params.productid}`;
 			//获取产品
@@ -182,6 +199,11 @@
 			//有意向
 			focuse(productid){
 				console.log('this.thispage',this.thispage);
+				//没有手机号,提醒去绑定
+				// if(!this.userInfo.phone){
+				// 	this.$refs.popup.open();
+				// 	return false;
+				// };
 				let thetoken = this.params.tokenhead + this.params.token;
 				this.$api.http.put(this.config.apiBaseurl+'/pre/add',{productId:productid},{header: {Authorization:thetoken}}).then(res => {
 					if(res.data.code!=200){
@@ -231,7 +253,16 @@
 				uni.navigateTo({
 					url:`/pages/supplier/supplierdetail/supplierdetail?id=${id}`
 				})
-			}
+			},
+			closepopup(done){
+				done()
+			},
+			confirmpopup(done,value){
+				uni.navigateTo({
+					url:'/pages/usercenter/bindphone/bindphone'
+				});
+				done()
+			},
 
 		}
 	}

pages/usercenter/bindphone/bindphone.css

@@ -0,0 +1,59 @@
+page {
+  background: #F5F5F9;
+}
+
+.flex {
+  display: flex;
+}
+
+.login-list {
+  margin-top: 40upx;
+  height: 100upx;
+  align-items: center;
+  padding: 0 30upx;
+  background-color: #fff;
+  border-top: 1px solid #ddd;
+}
+.login-list .login-input {
+  flex: 1;
+}
+.login-list .login-input input {
+  font-size: 28upx;
+  color: #333333;
+  padding-left: 20upx;
+}
+.login-list .codeimg img {
+  width: 150upx;
+}
+
+.login-list-code {
+  height: 100upx;
+  align-items: center;
+  padding: 0 30upx;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.login-list-code .login-input {
+  flex: 1;
+}
+.login-list-code .login-input input {
+  font-size: 28upx;
+  color: #333333;
+  padding-left: 20upx;
+}
+.login-list-code .login-input .codeimg img {
+  width: 150upx;
+}
+.login-list-code .codeimg img {
+  width: 150upx;
+}
+.login-list-code .getCodeMsg {
+  color: #4CA2FF;
+  border: 1px solid #4CA2FF;
+  border-radius: 10upx;
+  padding: 2upx 4upx;
+}
+
+.login-btn {
+  margin-top: 70upx;
+}

pages/usercenter/bindphone/bindphone.vue

@@ -0,0 +1,161 @@
+<template>
+	<view class="pages">
+		<view class="app_container">
+			<form @submit="formSubmit" :model="form" ref="uForm" :rules="rules" @reset="formReset">
+				<view class="login-list flex border-all">
+					<view class="login-input">
+						<view label="手机号" label-width="150" prop="telephone">
+							<input v-model="form.telephone" placeholder="请输入手机号" />
+						</view>
+					</view>
+				</view>
+				<view class="login-list flex border-all">
+					<view class="login-input">
+						<view label="验证码" label-width="150" prop="pictureCode">
+							<input v-model="form.pictureCode" placeholder="请输入验证码" />
+						</view>
+					</view>
+					<view class="codeimg"><img :src="codeUrl" @click="getCode" /></view>
+				</view>
+				<view class="login-list-code flex border-all">
+					<view class="login-input login-code">
+						<view label="短信验证码" label-width="150" prop="SMSCode">
+							<input class="uni-input" v-model="form.SMSCode" maxlength="10" placeholder="请输入短信验证码" />
+						</view>
+					</view>
+
+					<view class="getCodeMsg" @click="getSMSCode" :disabled="countFlag">{{btnMsg == null ? countNum+'s重新发送':btnMsg}}</view>
+				</view>
+			</form>
+			<view class="uni-padding-wrap uni-common-mt">
+				<button type="primary" class="login-btn" @tap="submit">绑定</button>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				params:{
+					token: '',
+				},
+				// 倒计时周期
+				countNum: 60,
+				// 用于倒计时标记，true-正在倒计时
+				countFlag: false,
+				// 定时器
+				intervalBtn: {},
+				//默认按钮的值
+				btnMsg: "发送验证码",
+				form: [],
+				codeUrl: '',
+				rules: {
+					telephone: [{
+							required: true,
+							message: '请输入品牌名称',
+							trigger: 'blur'
+						},
+						{
+							min: 2,
+							max: 140,
+							message: '长度在 2 到 140 个字符',
+							trigger: 'blur'
+						}
+					],
+					pictureCode: [{
+						required: true,
+						message: '请输入品牌logo',
+						trigger: 'blur'
+					}],
+					SMSCode: [{
+						required: true,
+						message: '请选择供应商',
+						trigger: 'blur'
+					}],
+				},
+
+			}
+		},
+		onShow() {
+			let self = this;
+			uni.getStorage({
+				key:'token',
+				success: function (res) {
+					self.params.token = res.data;
+				   // console.log(res.data);
+				}
+			});
+
+		},
+		onLoad() {
+			this.getCode();
+
+		},
+		methods: {
+			// 倒计时
+			countDown() {
+				// 设置btn倒计时时显示的信息
+				this.btnMsg = null;
+				// 更改btn状态
+				this.countFlag = !this.countFlag;
+				// 设置倒计时
+				this.intervalBtn = setInterval(() => {
+					if (this.countNum <= 0) {
+						// 重置btn提示信息
+						this.btnMsg = "发送验证码";
+						// 清除定时器
+						clearInterval(this.intervalBtn)
+						// 更改btn状态
+						this.countFlag = !this.countFlag;
+						// 重置倒计时状态
+						this.countNum = 60;
+					};
+					// 倒计时
+					this.countNum--;
+				}, 1000);
+			},
+			getCode() {
+				this.$api.http.get(this.config.apiBaseurl + '/product/categorySearch').then(res => {
+					if (res.data.code == 200) {
+						this.codeUrl = 'http://placekitten.com/120/50'
+					}
+				})
+			},
+			getSMSCode() {
+				if (this.form.pictureCode === null || this.form.pictureCode === '' || this.form.telephone === null || this.form.telephone ===
+					'') {
+					uni.showToast({
+						title: '请填写完整',
+						icon: 'none'
+					});
+				} else {
+					this.$api.http.get(this.config.apiBaseurl + '/product/categorySearch').then(res => {
+						if (res.data.code == 200) {
+							this.codeUrl = 'http://placekitten.com/120/60';
+							this.countDown();
+						}
+					})
+
+				}
+			},
+			submit(){								
+				this.$api.http.post(this.config.apiBaseurl+'/product/categorySearch',this.form,{
+					header: {
+						Accept:'application/json',
+						Authorization: 'Bearer '+ this.params.token, //注意Bearer后面有一空格
+					}
+				}).then(res=>{
+					console.log('res',res)
+				})
+			}
+
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("./bindphone.css");
+</style>