You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
264 lines
6.8 KiB
264 lines
6.8 KiB
<template>
|
|
<view class="v-pages bgcolor p-b-24">
|
|
<view class="v-card order small container-fluid m-t-24" style="padding-bottom: 60rpx;">
|
|
<view class="merchant-name">{{orderInfo.merchantName}}</view><!-- 商户名称 -->
|
|
<view class="row">
|
|
<view class="v-shop-item-image">
|
|
<image :src="orderInfo.picUrls" class="img" mode="widthFix"></image>
|
|
</view>
|
|
<view class="v-shop-item-con col">
|
|
<view class="name">{{orderInfo.goodsName}}</view><!-- 商品名称 -->
|
|
<view class="price"><text class="num-pre">¥</text><text
|
|
class="num-price">{{orderInfo.price}}</text></view><!-- 单价 -->
|
|
</view>
|
|
<view><u-number-box :min="1" :max="100" v-model="goods" @change="goodsChange"></u-number-box></view>
|
|
</view>
|
|
</view>
|
|
<view class="v-card order small container-fluid m-t-24">
|
|
<view class="v-order-title m-b-24">
|
|
<view class="text"><text>用户信息</text></view>
|
|
</view>
|
|
<uni-forms class="v-order-form" ref="form" :modelValue="formData">
|
|
<uni-forms-item label="联系人" name="name">
|
|
<uni-easyinput class="v-input" type="text" :inputBorder="false" placeholderStyle="fontSize:24rpx"
|
|
v-model="formData.name" placeholder="请输入联系人姓名" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="联系电话" name="phoneNumber">
|
|
<uni-easyinput class="v-input" type="number" :inputBorder="false" placeholderStyle="fontSize:24rpx"
|
|
v-model="formData.phoneNumber" placeholder="请输入手机号码" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
<view class="v-card order small bg1 container-fluid m-t-24">
|
|
<view class="v-order-title">
|
|
<view class="text"><text>购买须知</text></view>
|
|
</view>
|
|
<view class="m-t-24 v-form-content">为确保订单顺利处理，请您务必填写真实姓名及手机号码，工作人员将尽快与您取得联系，请保持手机通讯畅通。</view>
|
|
</view>
|
|
|
|
<view class="v-order-submit row flex-align-center">
|
|
<view class="col price">
|
|
<text class="text">总价</text>
|
|
<text class="yuan">¥</text>
|
|
<text class="number">{{totalPrice}}</text>
|
|
</view>
|
|
<view class="btn" @click="orderSubmit">提交订单</view>
|
|
</view>
|
|
<u-popup :show="isPayPopup" mode="bottom" @close="closePay" round="10">
|
|
<f-pay :show-title="false" :show="isPayPopup" :order="orderPay" :payMoney="orderPay.orderAmount"
|
|
:tradeNo="orderPay.orderNumber" @payResult="payResult"></f-pay>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import fPay from "../components/f-pay/f-pay";
|
|
import uPopup from "../components/uview-ui/components/u-popup/u-popup.vue";
|
|
|
|
export default {
|
|
components: {
|
|
fPay,
|
|
uPopup
|
|
},
|
|
data() {
|
|
return {
|
|
//是否支付弹窗
|
|
isPayPopup: false,
|
|
|
|
orderInfo: {},
|
|
formData: {
|
|
name: undefined,
|
|
phoneNumber: undefined
|
|
},
|
|
goods: 1,
|
|
orderPay: undefined,
|
|
totalPrice: undefined, //总价格
|
|
totalNum: undefined, //总数量
|
|
rules: {
|
|
name: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '联系人姓名不能为空！',
|
|
}]
|
|
},
|
|
phoneNumber: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '联系手机不能为空！',
|
|
},
|
|
{
|
|
validateFunction: function(rule, value, data, callback) {
|
|
const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
|
|
if (reg.test(value) == false) {
|
|
callback('请输入正确的手机号码！')
|
|
}
|
|
return true
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onReady() {
|
|
// 需要在onReady中设置规则
|
|
this.$refs.form.setRules(this.rules)
|
|
},
|
|
onLoad(options) {
|
|
const shop = JSON.parse(decodeURIComponent(options.shop));
|
|
this.orderInfo = shop
|
|
this.totalPrice = this.orderInfo.price
|
|
this.formData.phoneNumber = this.orderInfo.mobile
|
|
},
|
|
methods: {
|
|
goodsChange(val) {
|
|
console.log(val.value)
|
|
this.orderInfo.goodsNum = val.value
|
|
this.totalPrice = this.orderInfo.price * 10000 * val.value / 10000
|
|
},
|
|
orderSubmit() {
|
|
this.$refs.form.validate().then(res => {
|
|
|
|
const extConfig = uni.getAccountInfoSync().miniProgram;
|
|
let appId = extConfig.appId
|
|
console.log("|this.formData", this.formData, this.orderInfo)
|
|
|
|
var data = {
|
|
"customerName": this.formData.name,
|
|
"customerPhone": this.formData.phoneNumber,
|
|
"openid": this.orderInfo.openid,
|
|
"appid": appId,
|
|
"tenantId": "1",
|
|
"merchantId": this.orderInfo.merchantId,
|
|
"merchantName": this.orderInfo.merchantName,
|
|
"orderAmount": this.totalPrice,
|
|
"goodsId": this.orderInfo.goodsId,
|
|
"goodsNum": this.orderInfo.goodsNum || 1
|
|
};
|
|
|
|
console.log("|data", data)
|
|
this.$Request.post(this.$config.createMerchantOrder, data, 'json', null, false, true).then((
|
|
res) => {
|
|
if (res.code == 0) {
|
|
this.orderPay = res.data
|
|
this.payOrder()
|
|
} else if (res.code == 600) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "网络拥挤，请稍后重试",
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
});
|
|
|
|
}).catch(err => {
|
|
console.log('表单错误信息：', err);
|
|
})
|
|
},
|
|
|
|
payOrder(val) {
|
|
console.log("订单==========", val)
|
|
this.isPayPopup = true
|
|
},
|
|
|
|
//支付结果
|
|
payResult(data) {
|
|
if (data.payStatus == 1) {
|
|
uni.showToast({
|
|
title: '支付成功',
|
|
icon: 'none'
|
|
});
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: "/subPageC/orderShop/orderList"
|
|
});
|
|
this.isPayPopup = false
|
|
}, 1000)
|
|
} else {
|
|
uni.showToast({
|
|
title: '支付失败',
|
|
icon: 'none'
|
|
});
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: "/subPageC/orderShop/orderList"
|
|
});
|
|
this.isPayPopup = false
|
|
}, 1000)
|
|
}
|
|
//uni.showToast({title: data.detail.errMsg,icon:'none'});
|
|
},
|
|
|
|
closePay() {
|
|
let that = this
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定取消支付？',
|
|
cancelText: '再想想',
|
|
showCancel: true,
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
that.isPayPopup = false
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: "/subPageC/orderShop/orderList"
|
|
});
|
|
}, 500)
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.v-shop-item-image {
|
|
flex: 0 0 120rpx;
|
|
margin-right: 24rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
overflow: hidden;
|
|
|
|
.img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
|
|
.v-shop-item-con {
|
|
|
|
.name {
|
|
font-size: 28rpx;
|
|
color: #1B1B1B;
|
|
}
|
|
|
|
.price {
|
|
.num-pre {
|
|
color: #e02222;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.num-price {
|
|
color: #e02222;
|
|
font-size: 32rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.merchant-name {
|
|
font-size: 32rpx;
|
|
color: #1B1B1B;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
</style> |