uni-app结合.NET?7实现微信小程序订阅消息推送(uniapp和flutter区别)居然可以这样

随心笔谈12个月前发布 admin
79 0

<template>
<view>
<view class=”setp”>
<publishStep :list=”setpList” :current=”0″ mode=”number” active-color=”#eb3572″></publishStep>
</view>
<view class=”container”>
<u-form :model=”form” ref=”uForm” :rules=”rules” :error-type=”errorType”>
<u-form-item label=”姓名” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}” prop=”realName”>
<u-input v-model=”form.realName” placeholder=”” input-align=”right” />
</u-form-item>

<u-form-item label=”服务时间” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}”
right-icon=”arrow-right” prop=”serviceTime”>
<u-input v-model=”form.serviceTime” placeholder=”请选择服务时间” :disabled=”true” input-align=”right” @click=”timeShow=true” />
</u-form-item>

<u-form-item label=”服务地址” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}” prop=”serviceAddress”>
<u-input v-model=”form.serviceAddress” placeholder=”” input-align=”right” @click=”selectAddress” />
</u-form-item>
<u-form-item label=”联系电话” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}”
prop=”lxtel”>
<u-input v-model=”form.lxtel” type=”number” placeholder=”请输入联系电话” input-align=”right” :clearable=”false” />
</u-form-item>
<u-form-item label=”需求描述” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}”
prop=”remarks”>
<u-input v-model=”form.remarks” type=”text” placeholder=”请输入您的需求” input-align=”right” :clearable=”false” />
</u-form-item>
</u-form>
</view>
<view style=”height: 160rpx;”></view>
<view class=”bottom_nav”>
<view class=”buttom_box padding-horizontal-20 padding-vertical-10″>
<u-button type=”error” @click=”submitForm” :loading=”submit_loading” style=”height: 100rpx; font-weight: bold; font-size: 36rpx;”>确认提交</u-button>
</view>
</view>
<u-picker mode=”time” v-model=”timeShow” :params=”timeParams” @confirm=”timeConfirm”></u-picker>
</view>
</template>
<script>
export default {
data() {
return {

form:{
realName:””,
serviceTime:”,
serviceAddress:””,
lxtel:””,
remarks:””

},
rules:{
realName: [{
required: true,
message: “请填写您的姓名”,
trigger: ‘change’
}],

serviceTime: [{
required: true,
message: “请选择服务时间”,
trigger: ‘change’
}],

lxtel: [{
required: true,
message: “请输入联系电话”,
trigger: ‘change’
}],
},
errorType: [‘toast’],

timeShow:false,
timeParams:{
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
submit_loading:false,
}
},

onReady() {
this.$refs.uForm.setRules(this.rules);
},

onLoad(params) {
let that=this;
},
methods: {

timeConfirm(e){
let that=this;
that.form.serviceTime=e.year +”-“+e.month+”-“+e.day
},
gotoOrder(){
uni.redirectTo({
url:”/pages/order/order”
})
},
submitForm(){
let that=this;
this.$refs.uForm.validate(valid=>{
if (valid){
that.$u.api.submit_order(that.form).then(res=> {
if (res.success) {
let data=res.data;
uni.showToast({
title: ‘提交成功’,
icon: ‘success’
})
// #ifdef MP-WEIXIN
uni.requestSubscribeMessage({
tmplIds:[‘XXXXXXXXXXX’], //这里填写tempid
success:function(subscribeMessageRes){
if(subscribeMessageRes.errMsg==”requestSubscribeMessage:ok”){
if(subscribeMessageRes.XXXXXXXXXXX==”accept”){
uni.login({
provider: ‘weixin’,
success:function(loginRes){
if(loginRes.errMsg==”login:ok”){
const code=loginRes.code;
that.$u.api.sendSubscribeMessage({
“code”:code,
“orderId”:data.orderId
}).then(res=>{
that.gotoOrder()
})
}else{
that.gotoOrder()
}
},
fail() {
that.gotoOrder()
}
})
}else{
that.gotoOrder()
}
}else{
that.gotoOrder()
}

},
fail:function(){
that.gotoOrder()
}
})
// #endif

} else {
uni.$u.toast(res.message);
}
});
}
})

}
}
}
</script>

<style>
.setp{ padding: 40rpx 0;}
.bottom_nav {
position: fixed;
width: 100%;
height: 100rpx;
left: 0;
bottom: 0;
z-index: 9999;
background: #FFFFFF;
border-top: 1rpx #f3f3f3 solid;
}
</style>

© 版权声明

相关文章