uniapp开发中需要的常用按钮，为了避免重复工作记录下来，方面后期复用。

源码

<template>
	<view>
		<view v-if="show">
			<view v-if="status==0 || status==1" class="cancelOrder" @click="cancelOrder">
				取消订单
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		operatefour
	} from '../../config/api.js'
	export default {
		data() {
			return {
				show: true
			}
		},
		props: {
			orderId: {
				type: Number,
				default () {
					return 0;
				}
			},
			status: {
				type: Number,
				default () {
					return 0;
				}
			},
		},
		methods: {
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			cancelOrder() {
				var that = this;
				uni.showModal({
					title: '确定要取消订单吗?',
					content: ' ',
					success: function(res) {
						if (res.confirm) {
							that.cancelOrder2();
						}
					}
				});
			},
			cancelOrder2() {
				var that = this;
				operatefour({
					orderId: that.orderId
				}, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						that.showToast({
							type: 'success',
							title: '提示',
							message: "取消订单成功",
						})
						// 是否显示取消订单按钮
						that.show = false
					}
				}).catch(err => {

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cancelOrder {
		width: 138rpx;
		height: 47rpx;
		border: 1rpx solid #FFB400;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #E48B00;
	}
</style>