yurong/pageOne/indexs/confirm.vue

<template>
	<view>
		<view class="rows rowsl rowsm w100">
			<view class="w100 rows rowsc mb-20">
				<view class="w-710 p-all-20 br-20 rows rowsm bgff" @click="$tools.goNext(`/pageOne/mes/address?type=1`)" v-if="address!=null&&address.id">
					<image class="w-62 h-62 mr-20" src="/static/images/01_13wz.png" mode=""></image>
					<view class="rows rowsl rowsb">
						<view class="rows rowsm">
							<text class="fs-28 fw-b mr-30">{{address.name}}</text>
							<text class="fs-26 col666">{{address.mobile}}</text>
						</view>
						<text class="fs-24 col666 mt-20">{{address.region}} {{address.address}}</text>
					</view>
				</view>
				<view class="w-710 rows rowsc rowsm h-150 bgff br-20" @click="$tools.goNext(`/pageOne/mes/address?type=1`)" v-else>
					<text class="fs-32 fw-b">请先选择收货地址</text>
				</view>
			</view>
			<scroll-view scroll-y="true" style="max-height: 800rpx;">
				<view class="w100 rows rowsc rowsm rowsl">
					<view class="rows rowsl w-710 p-all-20 bgff br-20">
						<view class="rows rowsm" v-for="(item,index) in 1" :key="index">
							<image class="w-156 h-156 br-20 mr-20" :src="$tools.oss(imgs)" mode="aspectFill"></image>
							<view class="rows rowsl rowsb h-156">
								<text class="fs-28 fw-b">{{names}}</text>
								<view class="rows rowsm fs-24 col666">
									<text class="mr-30">{{skuNames}}</text>
									<text>x{{nums}}</text>
								</view>
								<text class="fs-28 fw-b">￥{{prices}}</text>
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
			<view class="w100 rows rowsc mt-20">
				<view class="w-710 h-100 bgff br-20 rows rowsm pl-20 pr-20 rowsb">
					<text class="fs-28">订单总额</text>
					<text class="fs-32 fw-b col">合计：￥{{prices*nums}}</text>
				</view>
			</view>
			<view class="w100 rows rowsc mt-20">
				<view class="w-710 h-100 bgff br-20 rows rowsm pl-20 pr-20 rowsb">
					<text class="fs-28">订单备注</text>
					<input type="text" placeholder="请输入备注内容" class="fs-28 trt w-500" v-model="remake"/>
				</view>
			</view>
			<view class="w100 rows rowsm rowsl mt-20">
				<view class="w-710 bgff br-20 p-all-24">
					<text class="fs-28 fw-b col333">支付方式</text>
					<view class="rows rowsl">
						<view class="w100 rows rowsm rowsb mt-20" v-for="(item,index) in list" :key="index" @click="selpay(item)">
							<view class="rows rowsm">
								<image class="w-72 h-72 mr-20" :src="item.icon" mode=""></image>
								<text class="fs-28 col333">{{item.name}}</text>
							</view>
							<image class="w-36 h-36 mr-15" :src="item.status?'/static/images/03_qou.png':'/static/images/03_w.png'" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="w100 fixed" style="bottom: 0;">
			<view class="w100 h-152 rows rowsb bgff pl-30 pr-30 pt-30">
				<view class="fs-28 rows">
					<text class="mt-15">应付金额：</text>
					<text class="fs-44 fw-b col">￥{{prices*nums}}</text>
				</view>
				<view class="w-200 h-76 bg rows rowsc rowsm br-100" @click="btnBClick">
					<text class="fs-28 colfff">立即支付</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{id:1,name:'微信支付',status:true,icon:'/static/images/icon_7wx.png'},
					{id:2,name:'余额支付',status:false,icon:'/static/images/044vef.png'},
				],
				ids:'',
				nums:'',
				imgs:'',
				names:'',
				prices:'',
				skuNames:'',
				remake:'',
				skuIds:'',
				address:{},
				payId:1
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.nums = e.num
			this.imgs = e.img
			this.names = e.name
			this.prices = e.price
			this.skuNames = e.skuName
			this.skuIds = e.skuId
		},
		onShow() {
			if(getApp().globalData.addressDetail.id){
				this.address = getApp().globalData.addressDetail
			}else{
				this.addressDefault()
			}
		},
		methods: {
			selpay(item){
				this.payId = item.id
				this.list.forEach(item => { 
					item.status = false
				})
				item.status = true
			},
			btnBClick() {
				uni.$u.debounce(this.createGoods, 500)
			},
			createGoods(){
				if(this.address==null) return this.$tools.showtt('请选择收货地址')
				this.$tools.axiosFromToken("POST","shop/createGoods",{
					num:this.nums,
					goods_id:this.ids,
					address_id:this.address.id,
					remake:this.remake,
					spec_id:this.skuIds
				}).then(res => {
					// this.$tools.showtt(res.msg)
					if(res.code!=1) return
					this.shopPay(res.data.order_number)
				})
			},
			shopPay(sn){
				this.$tools.axiosFromToken("POST","pay/shopPay",{
					order_number:sn,
					pay_type:this.payId
				}).then(res => {
					if(res.code==1){
						if(this.payId==1){
							let that = this
							uni.requestPayment({
								timeStamp: res.data.info.timeStamp,
								nonceStr: res.data.info.nonceStr,
								package: res.data.info.package,
								signType: res.data.info.signType,
								paySign: res.data.info.paySign,
								success(res) {
									that.$tools.showtt('支付成功')
									setTimeout(()=>{
										that.$tools.goRedirectTo(`/pageOne/mes/orderList?id=66`)
									},1000)
								},
								fail(res) {
									that.$tools.showtt('支付失败')
									setTimeout(()=>{
										that.$tools.goRedirectTo(`/pageOne/mes/orderList?id=66`)
									},1000)
								}
							})
						}else {
							this.$tools.showtt(res.msg)
							if (res.code!=1)  return
							setTimeout(()=>{
								this.$tools.goRedirectTo(`/pageOne/mes/orderList?id=66`)
							},1000)
						}
					}else{
						this.$tools.showtt(res.msg)
					}
				})
			},
			addressDefault(){
				this.$tools.axiosFromToken("POST","address/addressDefault").then(res => {
					this.address = res.data
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F6FA;
		padding-top: 20rpx;
	}
</style>