<template>
	<view class="page">
		<!-- #ifdef H5 -->
		<!-- <u-navbar v-if="mixin_type=='H5'" back-text=" " title="付款成功" :border-bottom="false" :background="{backgroundColor: '#d52e4c'}" back-icon-color="#fff" title-color="#fff" :custom-back="indexUrl"></u-navbar> -->
		<!-- #endif -->
		
	  <view class="box1">
	    <view class="box4">
	      <view class="ImageText1">
	        <view class="layer2">
	          <view class="box2">
	            <view class="outer2">
	              <image src="../../static/img/white.png" class="pic2"></image>
	            </view>
	          </view>
	          <view class="TextGroup1">
	            <text lines="1" class="txt1">付款成功</text>
	          </view>
	        </view>
	      </view>
	    </view>
	    <view class="box5">
	      <text lines="1" class="word2">我们将尽快给您发货</text>
	    </view>
	    <view class="box6">
	      <view class="section2">
	        <text lines="1" class="txt2" @tap="payment()">查看订单详情</text>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
			}
		},
		onLoad(option) {
			console.log(option)
			if(option.id){
				this.id=option.id
			}
		},
		methods: {
			indexUrl(){
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			payment(){
				uni.navigateTo({
				  url: '/pages/payment/payment?id='+this.id,
				})
			},
		}
	}
</script>

<style lang="scss">
.page {
  position: relative;
  width: 750rpx;
  height: 1334rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.box1 {
  z-index: 2;
  background-color: #fff;
  width: 750rpx;
  position: relative;
  display: flex;
  flex-direction: column;
}
.box4 {
  width: 362rpx;
  height: 301rpx;
  display: flex;
  flex-direction: row;
  margin: 272rpx 0 0 193rpx;
}
.ImageText1 {
  height: 301rpx;
  display: flex;
  flex-direction: column;
  width: 362rpx;
}
.layer2 {
  width: 362rpx;
  height: 301rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box2 {
  height: 244rpx;
  background: url(@/static/img/ps6qjct6tgrhjzy7855u6eg7kyx5tfnfarad4de15e-75d5-4306-abf5-c9648df8bba2.png) 100% no-repeat;
  display: flex;
  background-size: 100% 100%;
  flex-direction: column;
  width: 362rpx;
}
.outer2 {
  background-color: rgba(213,46,76,1.000000);
  border-radius: 50%;
  height: 160rpx;
  display: flex;
  flex-direction: column;
  width: 160rpx;
  margin: 41rpx 0 0 102rpx;
}
.pic2 {
  width: 82rpx;
  height: 57rpx;
  margin: 52rpx 0 0 39rpx;
}
.TextGroup1 {
  height: 52rpx;
  display: flex;
  flex-direction: column;
  width: 219rpx;
  margin: 5rpx 0 0 72rpx;
}
.txt1 {
  width: 219rpx;
  overflow-wrap: break-word;
  color: rgba(102,102,102,1);
  font-size: 56rpx;
  font-family: SourceHanSansCN-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 56rpx;
  display: block;
}
.box5 {
  width: 321rpx;
  height: 34rpx;
  display: flex;
  flex-direction: row;
  margin: 60rpx 0 0 214rpx;
}
.word2 {
  width: 321rpx;
  height: 34rpx;
  overflow-wrap: break-word;
  color: rgba(179,179,179,1);
  font-size: 36rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
  display: block;
}
.box6 {
  width: 350rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  margin: 156rpx 0 378rpx 200rpx;
}
.section2 {
  height: 100rpx;
  background: url(@/static/img/ps38u79cjfswknya5jx430kzx9t9q4t3wd5d53e2a2-944a-4924-911b-b3032f7ff659.png) 100% no-repeat;
  display: flex;
  background-size: 100% 100%;
  flex-direction: column;
  width: 350rpx;
}
.txt2 {
  width: 214rpx;
  height: 34rpx;
  overflow-wrap: break-word;
  color: rgba(255,255,255,1);
  font-size: 36rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
  display: block;
  margin: 33rpx 0 0 69rpx;
}
</style>
