no message

App.vue

@@ -12,7 +12,11 @@
 			console.log('App Hide')
 		},
 		globalData: {
-			hasLogin: false
+			hasLogin: false,
+			inviteId: null,
+			orderConfirmIds: [],
+			selectAddrss: false,
+			
 		}
 	}
 </script>

api/address.js

@@ -32,4 +32,12 @@ export function addressDeleteApi(data) {
     method: 'post',
     data: data
   })
-}
+}
+// 获取默认地址详情
+export function addressDefaultDetailApi(data) {
+  return request({
+    url: '/wx/address/default/detail',
+    method: 'get',
+    data: data
+  })
+}

api/config.js

@@ -6,7 +6,7 @@ export function request(params) {
 	params.url = basUrl + params.url
 	
 	let token = wx.getStorageSync('token')
-	console.log('token请求拦截', token)
+	// console.log('token请求拦截', token)
 
 	return new Promise(function(resolve, reject) {
 		wx.request({
@@ -15,7 +15,7 @@ export function request(params) {
 				'X-Bkmmall-Token': token
 			},
 			success: function(res) {
-				console.log(res, 'res')
+				// console.log(res, 'res')
 				if (res.statusCode == 200) {
 					if (res.data.errno == 401) {
 						// 未登录

api/drawCard.js

@@ -0,0 +1,63 @@
+import { request } from "@/api/config.js"
+
+// 抽卡相关接口
+
+// 抽卡列表
+export function raffleListApi(data) {
+  return request({
+    url: '/wx/raffle/list',
+    method: 'get',
+    data: data
+  })
+}
+export function raffleDetailApi(data) {
+  return request({
+    url: '/wx/raffle/detail',
+    method: 'get',
+    data: data
+  })
+}
+
+// 卡牌分页
+export function prizePoolStatusApi(data) {
+  return request({
+    url: '/wx/raffle/prizePoolStatus',
+    method: 'get',
+    data: data
+  })
+}
+// 奖池预览
+export function prizeListApi(data) {
+  return request({
+    url: '/wx/raffle/prize/list',
+    method: 'get',
+    data: data
+  })
+}
+// 中奖记录
+// ​/wx/raffle/prize/user/list
+export function userPrizeListApi(data) {
+  return request({
+    url: '/wx/raffle/prize/user/list',
+    method: 'get',
+    data: data
+  })
+}
+
+// 提交抽卡
+export function drawCardSubmitApi(data) {
+  return request({
+    url: '/wx/raffle/user/submit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 抽卡结果
+export function submittResultApi(data) {
+  return request({
+    url: '/wx/raffle/user/submit/result',
+    method: 'get',
+    data: data
+  })
+}

api/knapsack.js

@@ -0,0 +1,27 @@
+import { request } from "@/api/config.js"
+
+
+// 背包-现货列表
+export function packagePrizeListApi(data) {
+  return request({
+    url: '/wx/bkm/package/prize/list',
+    method: 'get',
+    data: data
+  })
+}
+// 根据id查询背包商品
+export function packagePrizeIdsListApi(data) {
+  return request({
+    url: '/wx/bkm/package/prize/ids/list',
+    method: 'post',
+    data: data
+  })
+}
+// 发货下单
+export function prizeOrderApi(data) {
+  return request({
+    url: '/wx/bkm/package/prize/order',
+    method: 'post',
+    data: data
+  })
+}

component/Mloading.vue

@@ -0,0 +1,63 @@
+<template>
+	<view class="loading">
+		<view class="loadingIcon">
+			<uni-icons type="spinner-cycle" size="30"></uni-icons>
+		</view>
+		<view class="text">
+			{{ text }}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			text: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+	
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.loading {
+		// width: 100%;
+		// height: 100%;
+		padding: 20px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	}
+	.text {
+		display: inline-block;
+		font-size: 12px;
+		color: #9999;
+	}
+	.loadingIcon {
+		display: inline-block;
+		transform: rotate(45deg);
+		animation: rotation 4s linear infinite;
+	}
+	
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+	
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

component/numImg.vue

@@ -0,0 +1,73 @@
+<template>
+	<view class="number">
+		<image class="numImg" :src="'../static/img/ka/num' + cardType(value) + '/' + num1() + '.png'" mode="heightFix"></image>
+		<image class="numImg" :src="'../static/img/ka/num' + cardType(value) + '/' + num2() + '.png'" mode="heightFix"></image>
+		<image class="numImg" :src="'../static/img/ka/num' + cardType(value) + '/' + num3() + '.png'" mode="heightFix"></image>
+	</view>
+</template>
+
+<script>
+	import {
+		cardType
+	} from "@/utils/utils.js"
+	export default {
+		props: {
+			value: {
+				type: Object,
+				default: {}
+			}
+		},
+		data() {
+			return {
+				cardType: cardType
+			}
+		},
+		onShow() {
+			
+		},
+		mounted() {
+			console.log(this.value, 'value')
+		},
+		methods: {
+			num1() {
+				let num = 0
+				let number = this.value.number
+				if (number / 100 > 0) {
+					num = Math.trunc(number / 100)
+				}
+				return num
+			},
+			num2() {
+				let num = 0
+				let number = this.value.number % 100
+				if (number / 10 > 0) {
+					num = Math.trunc(number / 10)
+				}
+				console.log(num, 'num')
+				return num
+			},
+			num3() {
+				let num = 0
+				let number = this.value.number % 100 % 10
+				if (number > 0) {
+					num = Math.trunc(number)
+				}
+				return num
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.number {
+		width: 100%;
+		height: 100%;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+
+		.numImg {
+			height: 15px;
+		}
+	}
+</style>

component/paymentPopup.vue

@@ -0,0 +1,289 @@
+<template>
+	<view class="content">
+		<uni-popup class="popup" ref="popup" type="bottom" background-color="#F8F8F8">
+			<view class="popupContent">
+				<view class="title">
+					购买卡牌
+					<uni-icons class="close" @click="close()" type="closeempty" size="20"></uni-icons>
+				</view>
+				<view class="row">
+					<view class="label">单价</view>
+					<view class="value price">
+						￥9.9
+					</view>
+				</view>
+
+				<view class="row">
+					<view class="label">选中卡牌号码</view>
+					<view class="value number">
+						<view class="item" v-for="(item, index) in params.raffleNumList">
+							{{item}}
+						</view>
+					</view>
+				</view>
+
+				<view class="row">
+					<view class="label">可用优惠卷</view>
+					<view class="value">
+
+					</view>
+				</view>
+
+				<view class="row">
+					<view class="label">抵扣（余额 <span class="price">0</span> ）</view>
+					<view class="value price">
+						￥0
+					</view>
+				</view>
+
+				<view class="row">
+					<view class="label"></view>
+					<view class="value">
+						小计： <span class="price">￥9.9</span>
+					</view>
+				</view>
+
+				<view class="tip">
+					<radio class="radio" :checked="checkbox1" @click="checkbox1 = !checkbox1" />
+					<span>我已阅读并同意 <span style="color: #FF8E21;">《用户协议》</span></span>
+				</view>
+
+				<view class="tip">
+					<radio class="radio" :checked="checkbox2" @click="checkbox2 = !checkbox2" />
+					<span>本人已满18岁且具备完全行为能力</span>
+				</view>
+
+				<image @click="submit" class="button" src="@/static/img/first/button5.png" mode="widthFix"></image>
+			</view>
+		</uni-popup>
+		<!-- 抽赏结果 -->
+		<uni-popup class="popup" ref="popup2" type="center">
+			<view class="lotteryResults">
+				<view class="title">
+					恭喜你抽中奖品
+					<uni-icons class="close" @click="close2()" type="closeempty" size="20"></uni-icons>
+				</view>
+				<view class="prizes" v-if="prizes.length > 0">
+					<view class="item" v-for="(item, index) in prizes">
+						<view class="type">
+							{{ $selectDictLabel(rewardType, item.prizeType) }}
+						</view>
+						<image class="img" :src="item.prizeIcon" mode="widthFix"></image>
+						<view class="name">
+							{{ item.prizeName }} × {{item.prizeNum}}
+						</view>
+					</view>
+				</view>
+				<Mloading text="抽奖中..." v-else />
+			</view>
+		</uni-popup>
+	</view>
+
+</template>
+
+<script>
+	import {
+		rewardType
+	} from "@/utils/commonConfig.js"
+	import {
+		drawCardSubmitApi,
+		submittResultApi
+	} from "@/api/drawCard.js"
+	
+	import Mloading from "@/component/Mloading.vue"
+	export default {
+		components: {
+			Mloading
+		},
+		emits:['callBack'],
+		props: {
+			value: {
+				type: Object,
+				default: {}
+			},
+		},
+		data() {
+			return {
+				rewardType: rewardType,
+				checkbox1: false,
+				checkbox2: false,
+				params: {
+					raffleNumList: [],
+					raffleId: null
+				},
+				orderId: null,
+				prizes: [],
+				getApiNum: 0,
+			}
+		},
+		mounted() {
+			// this.$refs.popup2.open('center')
+			// this.getLotteryResults()
+			
+		},
+		methods: {
+			show(id, list) {
+				console.log(list, 'list')
+				this.params.raffleId = id
+				this.params.raffleNumList = list
+				this.$refs.popup.open('bottom')
+				
+			},
+			close() {
+				this.$refs.popup.close()
+			},
+			close2() {
+				this.$refs.popup2.close()
+			},
+			submit() {
+				drawCardSubmitApi(this.params).then(res => {
+					console.log(res, '提交购买卡牌')
+					this.orderId = res.data.orderId
+					// 唤起支付
+					this.wxPayment(res.data)
+				})
+			},
+			getLotteryResults() {
+				let params = {
+					orderId: this.orderId,
+					raffleId: this.params.raffleId,
+				}
+				submittResultApi(params).then(res => {
+					console.log(res, 'res抽奖结果')
+					this.prizes = res.data
+				})
+			},
+			wxPayment(data) {
+				let _this = this
+				wx.requestPayment({
+					'timeStamp': data.timeStamp,
+					'nonceStr': data.nonceStr,
+					'package': data.packageValue,
+					'signType': data.signType,
+					'paySign': data.paySign,
+					'success': function(res) {
+						console.log(res, "支付过程成功");
+						_this.close()
+						_this.$refs.popup2.open('center')
+						_this.getLotteryResults(res)
+						_this.$emit('callBack')
+					},
+					'fail': function(res) {
+						console.log("支付过程失败");
+						util.showErrorToast('支付失败');
+					},
+					'complete': function(res) {
+						console.log("支付过程结束")
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.popupContent {
+		background-color: #F8F8F8;
+		border-radius: 10px 10px 0 0;
+	}
+
+	.title {
+		text-align: center;
+		padding: 15px;
+		font-weight: 600;
+
+		.close {
+			position: absolute;
+			right: 15px;
+			top: 15px;
+		}
+	}
+
+	.row {
+		margin: 10px 20px 0 20px;
+		display: flex;
+		justify-content: space-between;
+		padding: 12px;
+		background: #fff;
+		border-radius: 6px;
+		font-size: 14px;
+		color: #666666;
+
+		.price {
+			color: #FF2C43;
+			font-weight: 600;
+		}
+
+		.label {
+			margin-right: 10px;
+		}
+
+		.number {
+			display: flex;
+			flex: 1;
+			overflow: auto;
+			max-width: 60%;
+
+			// justify-content: flex-end;
+			.item {
+				width: 48px;
+				height: 24px;
+				background: #DDDDDD;
+				border-radius: 51px;
+				color: #000000;
+				line-height: 24px;
+				text-align: center;
+				font-size: 12px;
+				margin-right: 5px;
+
+				flex-grow: 0;
+				flex-shrink: 0;
+			}
+		}
+	}
+
+	.tip {
+		margin: 10px 20px 0 20px;
+		color: #000000;
+		font-size: 12px;
+		display: flex;
+		align-items: center;
+
+		.radio {
+			transform: scale(0.7);
+		}
+	}
+
+	.button {
+		margin: 10px auto;
+		width: 210px;
+	}
+
+	.lotteryResults {
+		width: 90vw;
+		background: #fff;
+		border-radius: 10px;
+
+		.prizes {
+			padding: 10px;
+
+			.item {
+				display: inline-flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				margin-right: 5px;
+
+				.img {
+					width: 70px;
+					border-radius: 5px;
+				}
+			}
+		}
+	}
+	
+</style>
+<style scoped>
+	
+</style>

main.js

@@ -3,6 +3,14 @@
 import Vue from 'vue'
 import App from './App'
 
+import {
+	navigateTo
+} from '@/utils/utils.js'
+import {
+	selectDictLabel
+} from "@/utils/utils.js"
+Vue.prototype.$navigateTo = navigateTo;
+Vue.prototype.$selectDictLabel = selectDictLabel;
 Vue.config.productionTip = false
 
 App.mpType = 'app'

pages.json

@@ -67,6 +67,42 @@
             }
             
         }
+        ,{
+            "path" : "pages/excellentValue/excellentValue",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "超值挑战",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/drawCard_first/drawCard_first",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "first赏",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/winningRecord/winningRecord",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "中奖记录",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/orderConfirm/orderConfirm",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "订单确认",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/addressManage/addressManage.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="container">
 		<view class="list">
-			<view class="card" v-for="(item, index) in list" :key="index">
+			<view class="card" v-for="(item, index) in list" :key="index" @click="selectAddress(item)">
 				<view class="row">
 					<view>
 						{{item.name}}
@@ -34,12 +34,28 @@
 		data() {
 			return {
 				list: [],
+				select: false,
+				url: "",
+				ids: ""
+			}
+		},
+		onLoad(query) {
+			if(getApp().globalData.selectAddrss) {
+				this.select = true
 			}
 		},
 		onShow() {
 			this.getList()
 		},
 		methods: {
+			selectAddress(item) {
+				if (this.select) {
+					let params = {
+						addressId: item.id,
+					}
+					this.$navigateTo("/pages/orderConfirm/orderConfirm", params)
+				}
+			},
 			getList() {
 				addressListApi().then(res => {
 					console.log(res, 'addressListApi-res')

pages/drawCard_first/drawCard_first.vue

@@ -0,0 +1,428 @@
+<template>
+	<view class="container">
+		<view class="head">
+			<image class="img" src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+			<view class="info">
+				<view class="title row">
+					{{ detail.name }}
+				</view>
+				<view class="row">
+					<view class="price">
+						￥{{ detail.price }}
+						<span class="text">/张明信片</span>
+					</view>
+					<image class="button" src="@/static/img/invite/button1.png" mode="widthFix"></image>
+				</view>
+				<view class="row">
+					<view class="users">
+						<image class="photo" :style="'left:' + index * 11 + 'px'" src="@/static/img/Frame1.png"
+							v-for="(item, index) in userList" mode="widthFix"></image>
+					</view>
+					<view class="hot">
+						<image src="@/static/img/first/hot.png" mode="widthFix"></image>
+						{{ detail.hotNum }}
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="cardList">
+			<image class="bk" src="@/static/img/first/bk1.png" mode="widthFix"></image>
+			<view class="leftButton" @click="left"></view>
+			<view class="rightButton" @click="right"></view>
+			<view class="list">
+				<view :class="['item', item.check ? 'active' : '']" v-for="(item,index) in cardList"
+					@click="clickCard(item)">
+					<image class="kaBk" :src="'../../static/img/ka/kabk' + cardType(item) + '.png' " mode="widthFix">
+					</image>
+					<numImg class="num" :value="item" />
+				</view>
+			</view>
+		</view>
+		<view class="buttons">
+			<image class="button1" src="@/static/img/first/button6.png" mode="widthFix"></image>
+			<view class="">
+				<image class="button2" @click="submit" src="@/static/img/first/button4.png" mode="widthFix"></image>
+				<!-- <image class="button2" src="@/static/img/first/button1.png" mode="widthFix"></image> -->
+			</view>
+			<image @click="toWinningRecord" class="button1" src="@/static/img/first/button3.png" mode="widthFix"></image>
+		</view>
+
+		<view class="prizes">
+			<image class="title" src="@/static/img/first/title.png" mode="widthFix"></image>
+			<view class="prizesList">
+				<image class="bk" src="@/static/img/first/bk2.png" mode="widthFix"></image>
+				<view class="prizes">
+					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+				</view>
+			</view>
+
+			<view class="prizesList">
+				<image class="bk" src="@/static/img/first/bk2.png" mode="widthFix"></image>
+				<view class="prizes">
+					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+				</view>
+			</view>
+		</view>
+		<image class="refresh" @click="refresh" src="@/static/img/first/refresh.png" mode="widthFix"></image>
+		<paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
+	</view>
+</template>
+
+<script>
+	import {
+		prizePoolStatusApi,
+		drawCardSubmitApi,
+		raffleDetailApi,
+		prizeListApi
+	} from "@/api/drawCard.js"
+	import {
+		cardType
+	} from "@/utils/utils.js"
+
+	import numImg from "@/component/numImg.vue"
+	import paymentPopup from "@/component/paymentPopup.vue"
+
+	export default {
+		components: {
+			numImg,
+			paymentPopup
+		},
+		data() {
+			return {
+				cardType: cardType,
+				params: {
+					raffleId: '',
+					limit: 12,
+					page: 1
+				},
+				detail: {},
+				total: 0,
+				userList: 8,
+				cardList: [],
+				selectIndex: [],
+			}
+		},
+		onLoad(query) {
+			console.log(query, 'query')
+			if (query.id) {
+				this.params.raffleId = query.id
+				this.init()
+			}
+			this.paymentSuccess()
+		},
+		methods: {
+			init() {
+				// 获取卡牌商品列表
+				this.getCardList()
+				// 获取卡包详情
+				this.getDetail()
+				//获取奖池
+				this.getPrizeList()
+			},
+			refresh() {
+				wx.showLoading()
+				setTimeout(function () {
+				  wx.hideLoading()
+				}, 1000)
+				this.init()
+				this.selectIndex = []
+				for (var i = 0; i < this.cardList.length; i++) {
+					this.cardList[i].check = false
+				}
+			},
+			getPrizeList() {
+				let params = {
+					raffleId: this.params.raffleId
+				}
+				prizeListApi(params).then(res => {
+					console.log(res, '奖池预览')
+				})
+			},
+			toWinningRecord() {
+				let params = {
+					raffleId: this.params.raffleId
+				}
+				this.$navigateTo('/pages/winningRecord/winningRecord', params)
+			},
+			getDetail() {
+				let params = {
+					raffleId: this.params.raffleId
+				}
+				raffleDetailApi(params).then(res => {
+					console.log(res, '详情')
+					this.detail = res.data
+				})
+			},
+			submit() {
+				if (this.selectIndex.length == 0) {
+					wx.showToast({
+						title: '请选则要购买的卡牌。',
+						icon: 'none',
+					})
+					return
+				}
+				this.$refs.paymentPopup.show(this.params.raffleId, this.selectIndex)
+			},
+			// 支付成功后回调
+			paymentSuccess() {
+				let _this = this
+				console.log('刷新抽卡界面')
+				// 刷新界面
+				_this.refresh()
+			},
+			// 选中取消选中卡牌
+			clickCard(item) {
+				if (item.status == 0) {
+					item.check = !item.check
+				}
+				// 如果是选中
+				let index = this.selectIndex.indexOf(item.number)
+				if (item.check && index == -1) {
+					this.selectIndex.push(item.number)
+				} else if (!item.check && index != -1) {
+					this.selectIndex.splice(index, 1)
+				}
+			},
+			// 标记已经选中卡牌
+			selectFormat() {
+				for (var i = 0; i < this.cardList.length; i++) {
+					if (this.selectIndex.includes(this.cardList[i].number)) {
+						this.cardList[i].check = true
+					}
+				}
+			},
+			getCardList() {
+				prizePoolStatusApi(this.params).then(res => {
+					console.log(res, '卡牌分页')
+					for (var i = 0; i < res.data.list.length; i++) {
+						res.data.list[i].check = false
+					}
+					this.cardList = res.data.list
+					this.selectFormat()
+					this.total = res.data.total
+				})
+			},
+			left() {
+				console.log('上一页')
+				if (this.params.page > 1) {
+					this.params.page = this.params.page - 1
+				}
+				this.getCardList()
+			},
+			right() {
+				console.log('下一页')
+				let pages = Math.ceil(this.total / this.params.limit)
+				if (this.params.page < pages) {
+					this.params.page = this.params.page + 1
+				}
+				this.getCardList()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.container {
+		background: #9EC8F9;
+		padding-top: 15px;
+		overflow: auto;
+		
+		.refresh {
+			position: fixed;
+			right: 8px;
+			top: 50%;
+			width: 45px;
+		}
+		
+		.head {
+			background: #fff;
+			border: 10px;
+			padding: 15px;
+			border-radius: 10px 10px 0 0;
+			display: flex;
+			justify-content: space-between;
+
+			.img {
+				width: 106px;
+				height: 106px;
+				border-radius: 5px;
+				overflow: hidden;
+				margin-right: 10px;
+			}
+
+			.info {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				flex: 1;
+				.row {
+					display: flex;
+					justify-content: space-between;
+					color: #999999;
+
+					.button {
+						width: 67px;
+					}
+
+					.hot {
+						display: flex;
+						font-size: 12px;
+						color: #999999;
+
+						image {
+							width: 16px;
+						}
+					}
+
+					.users {
+						position: relative;
+
+						.photo {
+							position: absolute;
+							width: 20px;
+							height: 20px;
+							border-radius: 50%;
+						}
+					}
+				}
+
+				.title {
+					font-weight: 600;
+					color: #000;
+				}
+
+				.price {
+					font-size: 14px;
+					font-weight: 600;
+					color: #FF2C43;
+
+					.text {
+						color: #999999;
+						font-weight: 500;
+					}
+				}
+			}
+
+		}
+
+		.cardList {
+			margin: 10px 0;
+			position: relative;
+
+			.bk {
+				width: 100%;
+			}
+
+			.leftButton {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				left: 20px;
+				height: 40px;
+				width: 20px;
+				z-index: 5;
+			}
+
+			.rightButton {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				right: 20px;
+				height: 40px;
+				width: 20px;
+				z-index: 5;
+			}
+
+			.list {
+				padding: 35px 40px;
+				width: calc(100% - 80px);
+				height: calc(100% - 70px);
+				position: absolute;
+				top: 0;
+				display: grid;
+				grid-template-columns: 1fr 1fr 1fr 1fr;
+
+				.item {
+					display: inline-flex;
+					justify-content: center;
+					align-items: center;
+					position: relative;
+
+					.kaBk {
+						width: 70%;
+						border-radius: 4px;
+					}
+
+					.num {
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						top: 0;
+					}
+				}
+
+				.active {
+					.kaBk {
+						box-shadow: 0px 1px 4px 2px #0417ff;
+					}
+
+				}
+			}
+		}
+
+		.buttons {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+
+			.button1 {
+				width: 25vw;
+			}
+
+			.button2 {
+				width: 35vw;
+				margin-bottom: 5px;
+			}
+		}
+
+		.prizes {
+			.title {
+				width: 103px;
+				margin: 0 auto;
+			}
+
+			.prizesList {
+				margin: 20px;
+				position: relative;
+
+				.bk {
+					width: 100%;
+				}
+
+				.prizes {
+					top: 0;
+					position: absolute;
+					width: calc(100% - 40px);
+					height: calc(100% - 50px);
+					display: inline-block;
+					margin: 50px 20px 0 20px;
+					white-space: nowrap;
+					overflow: auto;
+
+					image {
+						display: inline-block;
+						width: 38vw;
+						height: 38vw;
+						border-radius: 10px;
+						margin: 0 5px;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/excellentValue/excellentValue.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="container">
+		<view class="list">
+			<view class="ka" v-for="(item, index) in kaList" @click="toDrawCard(item)">
+				<view class="top">
+					<image mode="aspectFit" :src="item.prizeIcon"></image>
+				</view>
+				<view class="ka-info">
+					<view class="ka-name">
+						{{ item.name }}
+					</view>
+					<view class="row">
+						<view class="money">
+							¥<span style="font-size: 16px;">{{ item.price }}</span> 
+						</view>
+						<view class="number">
+							<view class="residue">
+								剩余{{item.balaceNum}}
+							</view>
+							<view class="total">
+								/{{item.totalNum}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		raffleListApi
+	} from "@/api/drawCard.js"
+	export default {
+		data() {
+			return {
+				kaList: [],
+			}
+		},
+		onLoad() {
+			this.getList()
+		},
+		methods: {
+			getList() {
+				let params = {
+					limit: 99,
+					page: 1,
+					type: 5
+				}
+				raffleListApi(params).then(res => {
+					console.log(res, '卡包列表')
+					this.kaList = res.data.list
+				})
+			},
+			toDrawCard(item) {
+				wx.navigateTo({
+					url: '/pages/drawCard_first/drawCard_first?id=' + item.id
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.container {
+		background: #9EC8F9;
+		
+		.list {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			grid-gap: 10px;
+			padding: 10px;
+			.ka {
+				background: #fff;
+				width: calc(50vw - 15px);
+				box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.1);
+				border-radius: 10px;
+				overflow: hidden;
+				// height: 60vw;
+				
+				.top {
+					// height: 60vw;
+					background: linear-gradient(180deg, #FAF1A7 0%, #FFE456 100%);
+					text-align: center;
+					display: flex;
+					justify-content: center;
+					
+					image {
+						width: 35vw;
+						height: 50vw;
+					}
+				}
+				.ka-info {
+					padding: 10px;
+					.ka-name {
+						font-size: 15px;
+						font-weight: 600;
+					}
+					.row {
+						margin-top: 5px;
+						display: flex;
+						justify-content: space-between;
+						
+						.money {
+							font-size: 12px;
+							font-weight: 600;
+							color: #FF2C43;
+						}
+						.number {
+							display: flex;
+							align-items: center;
+							.residue {
+								color: #FF2C43;
+								font-size: 13px;
+							}
+							.total {
+								font-size: 11px;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -6,7 +6,7 @@
 				<image src="/static/img/Frame3.png" alt="">
 				<span>全部</span>
 			</view>
-			<view class="tab">
+			<view class="tab" @click="$navigateTo('/pages/excellentValue/excellentValue')">
 				<image src="/static/img/Frame4.png" alt="">
 				<span>超值挑战</span>
 			</view>
@@ -21,7 +21,7 @@
 		</view>
 		<view class="buttons">
 			<view class="left">
-				<image src="/static/img/button3.png"></image>
+				<image src="/static/img/button3.png" @click="toInvite"></image>
 			</view>
 			<view class="right">
 				<image src="/static/img/button1.png"></image>
@@ -59,8 +59,21 @@
 				kaList: 6,
 			}
 		},
+		onLoad(query) {
+			console.log(query, 'query')
+			if (query.inviteId) {
+				getApp().globalData.inviteId = inviteId;
+			} else {
+				const scene = decodeURIComponent(query.scene)
+				let inviteId = scene.split("=")[1]
+				console.log(inviteId, 'inviteId')
+				getApp().globalData.inviteId = inviteId;
+			}
+		},
 		methods: {
-		
+			toInvite() {
+				wx.navigateTo({url: '/pages/invite/invite'})
+			}
 		}
 	}
 </script>

pages/invite/invite.vue

@@ -1,45 +1,40 @@
 <template>
 	<view class="container">
-		<view class="m_button illustrate">
-			规则说明
-		</view>
-		<view class="">
-			邀请好友
-		</view>
-		<view class="">
-			领现金
-		</view>
-		<view class="">
-			笔笔有提成
-		</view>
-		<view class="box">
-			<view class="item">
-				<view class="label">
-					已邀请
-				</view>
-				<view class="value">
-					0人
+		<image class="bk" src="@/static/img/invite/bk.png" mode=""></image>
+		<view class="page">
+			<image class="illustrate" src="@/static/img/invite/button1.png" mode=""></image>
+			<view class="box">
+				<view class="item">
+					<image mode="aspectFit" class="label1" src="@/static/img/invite/text2.png"></image>
+					<view class="value">
+						{{person}}
+						<image mode="aspectFit" src="@/static/img/invite/text3.png"></image>
+					</view>
 				</view>
-			</view>
-			<view class="item">
-				<view class="label">
-					奖励总览
-				</view>
-				<view class="value">
-					0元
+				<view class="item">
+					<image mode="aspectFit" class="label2" src="@/static/img/invite/text1.png"></image>
+					<view class="value">
+						{{reward}}
+						<image mode="aspectFit" src="@/static/img/invite/text4.png"></image>
+					</view>
 				</view>
 			</view>
-		</view>
-		<view class="buttons">
-			<view class="m_button">
-				邀请好友
-			</view>
-			<view class="m_button" @click="promotionCode">
-				我的推广码
+			<view class="buttons">
+				<button open-type="share" class="button">
+					<image class="button1" mode="aspectFit" src="@/static/img/invite/button2.png"></image>
+				</button>
+				<image class="button2" mode="aspectFit" src="@/static/img/invite/button3.png" @click="promotionCode">
+				</image>
+				<!-- 		<view class="m_button">
+					邀请好友
+				</view> -->
+				<!-- <view class="m_button" @click="promotionCode">
+					我的推广码
+				</view> -->
 			</view>
 		</view>
 		<uni-popup ref="popup" background-color="#fff">
-			<view class="popup-content" >
+			<view class="popup-content">
 				<image class="qrcode" :src="imgUrl" mode=""></image>
 			</view>
 		</uni-popup>
@@ -48,16 +43,37 @@
 
 <script>
 	import {
-		inviteQrcodeApi, 
+		inviteQrcodeApi,
 		inviteInfoApi
 	} from "@/api/invite.js"
 	export default {
 		data() {
 			return {
-				imgUrl: ''
+				imgUrl: '',
+				inviteList: [],
+				person: '',
+				reward: '',
+			}
+		},
+		onLoad() {
+			this.getInviteList()
+		},
+		onShareAppMessage() {
+			let userId = wx.getStorageSync('userId')
+			return {
+				title: '自定义转发标题222',
+				path: '/pages/index/index?inviteId=' + userId
 			}
 		},
 		methods: {
+			getInviteList() {
+				inviteInfoApi().then(res => {
+					console.log(res, '我已经邀请的列表')
+					this.inviteList = res.data.list
+					this.person = res.data.person
+					this.reward = res.data.reward
+				})
+			},
 			promotionCode() {
 				let _this = this
 				inviteQrcodeApi().then(res => {
@@ -72,16 +88,33 @@
 
 <style scoped lang="scss">
 	.container {
-		background: #e7ffec;
+		// background: #e7ffec;
 		text-align: center;
-		illustrate {
+
+		.bk {
+			position: absolute;
+			height: 100vh;
+			width: 100%;
+			z-index: -1;
+		}
+
+		.page {
+			max-height: 100vh;
+			overflow: auto;
+			padding-top: 300px;
+		}
+
+		.illustrate {
 			position: absolute;
 			right: 20px;
 			top: 40px;
 			font-size: 12px;
-			padding: 5px 10px;
-			border-radius: 4px;
+			width: 67px;
+			height: 24px;
+			// padding: 5px 10px;
+			// border-radius: 4px;
 		}
+
 		.box {
 			background: #fff;
 			margin: 20px 20px;
@@ -89,36 +122,77 @@
 			border-radius: 15px;
 			display: flex;
 			justify-content: space-around;
-			
+
 			.item {
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				align-items: center;
-				.label {
-					font-size: 24px;
-					font-weight: 600;
+				width: 50%;
+
+				.label1 {
+					width: 100%;
+					height: 22px;
 				}
+
+				.label2 {
+					width: 100%;
+					height: 22px;
+				}
+
 				.value {
-					font-size: 24px;
+					font-size: 28px;
 					font-weight: 600;
 					margin-top: 20px;
+					width: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					image {
+						width: 40px;
+						height: 22px;
+					}
 				}
 			}
 		}
+
 		.buttons {
 			display: flex;
-			justify-content: space-around;
-			
-			.m_button {
-				width: 40vw;
-				height: 30px;
-				line-height: 30px;
+			justify-content: center;
+			margin: 20px;
+			width: calc(100% - 40px);
+			image {
+				height: 64px;
+				position: relative;
+			}
+
+			.button {
+				background: none;
+				border: none !important;
+				overflow: initial;
+				text-align: start;
+				padding: 0;
+				width: 100%;
+				box-shadow: none;
+				-webkit-tap-highlight-color: transparent;
+			}
+			.button::after {
+				border: none;
+			}
+			.button1 {
+				right: -8px;
+				width: 100%;
+			}
+
+			.button2 {
+				left: -8px;
 			}
 		}
+
 		.qrcode {
 			width: 70vw;
 			height: 70vw;
 		}
 	}
-</style>
+</style>

pages/knapsack/knapsack.vue

@@ -1,22 +1,357 @@
 <template>
-	<view>
+	<view class="container">
+		<view class="tabs">
+			<uni-transition ref="ani" class="tabsTransition" :styles="styles" :show="true">
+				<image class="tabsBk" src="@/static/img/knapsack/tabBk.png" mode="widthFix"></image>
+			</uni-transition>
+
+			<view :class="['tab', activeIndex == 1 ? 'active' : '']" @click="tabClick(1)">
+				现货奖品
+			</view>
+			<view :class="['tab', activeIndex == 2 ? 'active' : '']" @click="tabClick(2)">
+				商城订单
+			</view>
+		</view>
+		<view class="list">
+			<uni-swipe-action  :autoClose="false">
+				<uni-swipe-action-item v-for="(item, index) in list" :key="index" :show="showCheck ? 'left':'none'" :disabled="true">
+					<template v-slot:left>
+						<view class="swipeLeft">
+							<radio class="radio" :checked="item.check == true" @click="checkClick($event, item)" />
+						</view>
+					</template>
+					<view class="card" >
+						<view class="row" style="margin-top: 10px;">
+							<view class="left">
+								<image class="img" src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+							</view>
+							<view class="right" style="font-size: 14px;">
+								<view class="row title">
+									{{item.prizeName}}
+								</view>
+								<view class="row text">
+									获得时间：{{ item.creatTime }}
+								</view>
+								<view class="row" style="color: #FF2C43;">
+									回收积分：{{ item.integral }}
+									<span class="status">{{ item.prizeStatus }}</span>
+								</view>
+								<view class="row button">
+									<span></span>
+									<span>
+										<image style="width: 44px;" src="@/static/img/knapsack/button5.png" mode="widthFix"></image>
+									</span>
+								</view>
+							</view>
+						</view>
+					</view>
+				</uni-swipe-action-item>
+			</uni-swipe-action>
+		</view>
 		
+		<view class="buttons" v-if="!showCheck">
+			<image class="button" src="@/static/img/knapsack/button3.png" mode="heightFix"></image>
+			<image class="button" @click="showCheck = true" src="@/static/img/knapsack/button4.png" mode="heightFix"></image>
+		</view>
+		<view class="bottom" v-if="showCheck">
+			<view class="left">
+				<image class="radio1" @click="clickCheckAll(true)" v-if="!allCheck" src="@/static/img/knapsack/check.png" mode="widthFix"></image>
+				<image class="radio2" @click="clickCheckAll(false)" v-else src="@/static/img/knapsack/checkActive.png" mode="widthFix"></image>
+				<view class="text" style="color: #000;">
+					全选
+				</view>
+				<view class="text">
+					已选 (<span style="color: #000;">{{selectIndex.length}}</span>)
+				</view>
+			</view>
+			<view class="right">
+				<image class="button" @click="cancelOrder" style="margin-right: 5px;" src="@/static/img/knapsack/button2.png" mode="heightFix"></image>
+				<image class="button" @click="toConfirmConfirm" src="@/static/img/knapsack/button1.png" mode="heightFix"></image>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import {
+		packagePrizeListApi
+	} from "@/api/knapsack.js"
 	export default {
 		data() {
 			return {
-				
+				showCheck: false,
+				activeIndex: 1,
+				list: [],
+				allCheck: false,
+				params: {
+					limit: 999,
+					page: 1,
+					status: 0,
+				},
+				selectIndex: [],
 			}
 		},
-		methods: {
+		onShow() {
+			this.activeIndex = 1
+			this.$refs.ani.init({
+				duration: 100,
+				timingFunction: 'linear',
+				transformOrigin: '50% 50%',
+				show: true,
+			})
+			this.$refs.ani.step({
+				translateX: '0'
+			})
+			this.$refs.ani.run(() => {
+				console.log('动画支持完毕')
+			})
+			this.getList()
+		},
+		onReady() {
 			
+		},
+		onLoad() {
+			
+		},
+		watch: {
+			list: {
+				deep: true,
+				handler(newValue, oldValue) {
+					// console.log(newValue, 'newValue')
+					let bool = true
+					for (var i = 0; i < newValue.length; i++) {
+						if(!newValue[i].check) {
+							bool = false
+						}
+						
+					}
+					this.allCheck = bool
+				}
+			}
+		},
+		methods: {
+			toConfirmConfirm() {
+				if (this.selectIndex.length == 0) {
+					wx.showToast({
+						title: '请选则要发货卡牌。',
+						icon: 'none',
+					})
+					return
+				}
+				getApp().globalData.orderConfirmIds = this.selectIndex
+				getApp().globalData.selectAddrss = null
+				this.$navigateTo('/pages/orderConfirm/orderConfirm')
+			},
+			// 取消下单
+			cancelOrder() {
+				this.showCheck = false
+				this.selectIndex = []
+				for (var i = 0; i < this.list.length; i++) {
+					this.list[i].check = false
+				}
+			},
+			clickCheckAll(bool) {
+				this.selectIndex = []
+				for (var i = 0; i < this.list.length; i++) {
+					this.list[i].check = bool
+					if (bool) {
+						this.selectIndex.push(this.list[i].id)
+					}
+				}
+			},
+			checkClick(e, item) {
+				console.log(item, 'item')
+				item.check = !item.check
+				
+				let index = this.selectIndex.indexOf(item.id)
+				if (item.check && index == -1) {
+					this.selectIndex.push(item.id)
+				} else if (!item.check && index != -1) {
+					this.selectIndex.splice(index, 1)
+				}
+				console.log(this.selectIndex, 'this.selectIndex')
+			},
+			getList() {
+				packagePrizeListApi(this.params).then(res => {
+					console.log(res, '奖品背包')
+					let list = res.data.list
+					for (var i = 0; i < list.length; i++) {
+						list[i].check = false
+					}
+					this.list = list
+				})
+			},
+			tabClick(index) {
+				this.activeIndex = index
+				if (index == 1) {
+					this.$refs.ani.step({
+						translateX: '0'
+					})
+					this.$refs.ani.run(() => {
+						console.log('动画支持完毕')
+					})
+				}
+				if (index == 2) {
+					this.$refs.ani.step({
+						translateX: '120px'
+					})
+					this.$refs.ani.run(() => {
+						console.log('动画支持完毕')
+					})
+				}
+			}
 		}
 	}
 </script>
 
-<style>
+<style scoped lang="scss">
+	.container {
+		background: #9EC8F9;
+		overflow: auto;
+
+		.tabs {
+			width: 240px;
+			height: 44px;
+			border-radius: 22px;
+			background: rgba(255, 255, 255, 0.8);
+			margin: 20px auto;
+			color: #005ECC;
+			font-size: 14px;
+			display: flex;
+			position: relative;
 
-</style>
+			.tabsTransition {
+				width: 50%;
+				height: 44px;
+				position: absolute;
+
+				.tabsBk {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.tab {
+				width: 50%;
+				height: 44px;
+				text-align: center;
+				line-height: 44px;
+				z-index: 2;
+			}
+
+			.active {
+				color: #fff;
+			}
+		}
+		.list {
+			padding: 10px;
+			padding-bottom: 70px;
+			.swipeLeft {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 40px;
+				.radio {
+					transform: scale(0.8);
+				}
+			}
+			.card {
+				margin-bottom: 10px;
+				border-radius: 8px;
+				background: #fff;
+				padding: 10px;
+				
+				.row {
+					display: flex;
+					justify-content: space-between;
+					
+					.left {
+						display: flex;
+						align-items: center;
+						
+						.photo {
+							margin-right: 5px;
+							width: 30px;
+							height: 30px;
+							border-radius: 50%;
+						}
+						
+						.name {
+							font-size: 14px;
+							font-weight: 600;
+							
+						}
+						
+						.img {
+							width: 100px;
+							height: 100px;
+							border-radius: 2px;
+							margin-right: 10px;
+						}
+					}
+					.right {
+						flex: 1;
+						.row {
+							margin-bottom: 5px;
+						}
+						.title {
+							font-size: 16px;
+							font-weight: 600;
+						}
+					}
+					.text1 {
+						color: #666666;
+						font-size: 12px;
+					}
+				}
+			}
+		}
+		.buttons {
+			position: fixed;
+			bottom: 0;
+			display: flex;
+			justify-content: space-around;
+			width: 100%;
+			padding: 10px 0;
+			image {
+				height: 42px;
+			}
+		}
+		.bottom {
+			background: #fff;
+			position: fixed;
+			bottom: 0;
+			display: flex;
+			justify-content: space-between;
+			width: calc(100% - 20px);
+			padding: 10px;
+			.left {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				
+				.text {
+					color: #999;
+					font-size: 14px;
+					margin-left: 10px;
+				}
+				.radio1 {
+					width: 20px;
+					height: 20px;
+				}
+				.radio2 {
+					width: 18px;
+					height: 18px;
+				}
+			}
+			
+			.right {
+				display: flex;
+				
+				.button {
+					height: 30px;
+				}
+			}
+		}
+	}
+</style>

pages/login/login.vue

@@ -65,6 +65,11 @@
 			executeLoginApi(params) {
 				let _this = this
 				console.log(222)
+				let inviteId = getApp().globalData.inviteId
+				if (inviteId) {
+					console.log('有邀请id', inviteId)
+					params.inviteId = inviteId
+				}
 				loginByWeixinApi(params).then(res => {
 					console.log('调用登录api', res)
 					//存储用户信息

pages/mine/mine.vue

@@ -14,6 +14,9 @@
 						ID: {{userId}}
 					</view>
 				</view>
+				<view class="" @click="loginOut">
+					退出登录
+				</view>
 			</view>
 			<view class="row">
 				<view class="box">
@@ -93,6 +96,13 @@
 			pageTo(url) {
 				wx.navigateTo({url: url})
 			},
+			loginOut() {
+				wx.removeStorageSync('userInfo')
+				wx.removeStorageSync('userId')
+				wx.removeStorageSync('token')
+				getApp().globalData.hasLogin = false;
+				this.hasLogin = false
+			}
 			
 		}
 	}

pages/orderConfirm/orderConfirm.vue

@@ -0,0 +1,362 @@
+<template>
+	<view class="container">
+		<view class="list">
+			<view class="card" style="height: 60px; align-items: center;" @click="toAddress" v-if="!addressId">
+				<view class="row">
+					<view class="left">
+						<image class="icon" src="@/static/img/orderConfirm/icon1.png" mode="widthFix"></image>
+						<span class="text1" style="margin-left: 5px;">添加地址</span>
+					</view>
+					<view class="">
+						<image class="icon" src="@/static/img/orderConfirm/icon2.png" mode="widthFix"></image>
+					</view>
+				</view>
+			</view>
+			<view class="card" style="height: 60px; align-items: center;" v-else @click="toAddress">
+				<view class="row">
+					<view>
+						{{address.name}}
+					</view>
+					<view>
+						{{address.tel}}
+					</view>
+				</view>
+				<view class="row" style="margin-top: 5px;">
+					<view style="font-size: 12px;">
+						{{address.province}}{{address.city}}{{address.county}}{{address.addressDetail}}
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<view class="list">
+			<view class="card" v-for="(item, index) in list">
+				<view class="row" style="margin-top: 10px;">
+					<view class="left">
+						<image class="img" src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+					</view>
+					<view class="right" style="font-size: 14px;">
+						<view class="row title">
+							{{item.prizeName}}
+						</view>
+						<view class="row text">
+							获得时间：{{ item.creatTime }}
+						</view>
+						<!-- 						<view class="row" style="color: #FF2C43;">
+							回收积分：{{ item.integral }}
+							<span class="status">{{ item.prizeStatus }}</span>
+						</view> -->
+						<!-- 						<view class="row button">
+							<span></span>
+							<span>
+								<image style="width: 44px;" src="@/static/img/knapsack/button5.png" mode="widthFix"></image>
+							</span>
+						</view> -->
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="left">
+				<view class="text">
+					共计： <span style="color: #000;">{{list.length}}</span>
+				</view>
+			</view>
+			<view class="right">
+				<image class="button" @click="clickSubmit" src="@/static/img/orderConfirm/button.png" mode="heightFix"></image>
+			</view>
+		</view>
+		<uni-popup ref="popup" type="bottom" background-color="#fff" safe-area>
+			<view class="popupContent">
+				<view class="title">
+					发货须知
+				</view>
+				<view class="text">
+					1.平台默认使用圆通物流，满5件国内包邮新疆、内蒙、港澳台除外)，小于5件需支付15元邮费。申请发货后7-10个工作日发出
+				</view>
+				<view class="text">
+					2.需要发其他快递请联系客服，高价卡建议联系客服进行顺丰保价。
+				</view>
+				<view class="text2">
+					运费：
+					<view class="price" v-if="this.list.length >= 5">
+						￥0
+					</view>
+					<view class="price" v-else>
+						￥15
+					</view>
+				</view>
+				
+				<image class="button" @click="payment" src="@/static/img/orderConfirm/button2.png" mode="heightFix"></image>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		packagePrizeIdsListApi,
+		prizeOrderApi,
+	} from "@/api/knapsack.js"
+	import {
+		addressDetailApi,
+		addressDefaultDetailApi
+	} from "@/api/address.js"
+	export default {
+		data() {
+			return {
+				ids: [],
+				list: [],
+				address: {},
+				addressId: "",
+			}
+		},
+		onLoad(query) {
+			this.getDefaultAddress()
+			let orderConfirmIds = getApp().globalData.orderConfirmIds
+			if (orderConfirmIds.length > 0) {
+				this.ids = orderConfirmIds
+				this.getList()
+			}
+			if (query.addressId) {
+				this.addressId = query.addressId
+				this.geAddress()
+			}
+			// this.$refs.popup.open('bottom')
+		},
+		methods: {
+			getList() {
+				packagePrizeIdsListApi(this.ids).then(res => {
+					console.log(res, '商品')
+					this.list = res.data
+				})
+			},
+			// 获取默认地址
+			getDefaultAddress() {
+				addressDefaultDetailApi().then(res => {
+					console.log(res, '默认地址')
+					if(res.data) {
+						this.address = res.data
+						this.addressId = res.data.id
+					}
+				})
+			},
+			// 获取地址
+			geAddress() {
+				let params = {
+					id: this.addressId
+				}
+				addressDetailApi(params).then(res => {
+					console.log(res, '选中的地址')
+					if(res.data) {
+						this.address = res.data
+					}
+				})
+			},
+			// 去选择地址
+			toAddress() {
+				getApp().globalData.selectAddrss = true
+				this.$navigateTo("/pages/addressManage/addressManage")
+			},
+			clickSubmit() {
+				if (!this.addressId) {
+					wx.showToast({
+						title: '请选则收货地址。',
+						icon: 'none',
+					})
+					return
+				}
+				this.$refs.popup.open('bottom')
+			},
+			payment() {
+				let param = {
+					addressId: this.addressId,
+					prizeIdList: this.ids
+				}
+				let _this = this
+				prizeOrderApi(param).then(res => {
+					console.log(res, 'res')
+					if (res.data.orderStatus == 201) {
+						wx.showToast({
+							title: '下单成功。',
+							icon: 'success',
+						})
+						wx.switchTab({
+							url: '/pages/knapsack/knapsack'
+						})
+					}
+					_this.wxPayment(res.data)
+				})
+			},
+			close() {
+				this.$refs.popup.close()
+			},
+			wxPayment(data) {
+				let _this = this
+				wx.requestPayment({
+					'timeStamp': data.timeStamp,
+					'nonceStr': data.nonceStr,
+					'package': data.packageValue,
+					'signType': data.signType,
+					'paySign': data.paySign,
+					'success': function(res) {
+						console.log(res, "支付过程成功");
+						wx.showToast({
+							title: '支付成功。',
+							icon: 'success',
+						})
+						_this.close()
+						wx.switchTab({
+							url: '/pages/knapsack/knapsack'
+						})
+					},
+					'fail': function(res) {
+						console.log("支付过程失败");
+						// util.showErrorToast('支付失败');
+					},
+					'complete': function(res) {
+						console.log("支付过程结束")
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.list {
+		padding: 10px;
+
+		.swipeLeft {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 40px;
+
+			.radio {
+				transform: scale(0.8);
+			}
+		}
+
+		.card {
+			margin-bottom: 10px;
+			border-radius: 8px;
+			background: #fff;
+			padding: 10px;
+			display: flex;
+			flex-wrap: wrap;
+			.row {
+				display: flex;
+				justify-content: space-between;
+				width: 100%;
+				
+				.left {
+					display: flex;
+					align-items: center;
+
+					.photo {
+						margin-right: 5px;
+						width: 30px;
+						height: 30px;
+						border-radius: 50%;
+					}
+
+					.name {
+						font-size: 14px;
+						font-weight: 600;
+
+					}
+
+					.img {
+						width: 100px;
+						height: 100px;
+						border-radius: 2px;
+						margin-right: 10px;
+					}
+				}
+
+				.right {
+					flex: 1;
+
+					.row {
+						margin-bottom: 5px;
+					}
+
+					.title {
+						font-size: 16px;
+						font-weight: 600;
+					}
+				}
+				.icon {
+					width: 16px;
+				}
+				.text1 {
+					color: #666666;
+					font-size: 12px;
+				}
+			}
+		}
+	}
+	.bottom {
+		background: #fff;
+		position: fixed;
+		bottom: 0;
+		display: flex;
+		justify-content: space-between;
+		width: calc(100% - 20px);
+		padding: 10px 10px 30px 10px;
+		.left {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			
+			.text {
+				color: #999;
+				font-size: 14px;
+				margin-left: 10px;
+			}
+			.radio1 {
+				width: 20px;
+				height: 20px;
+			}
+			.radio2 {
+				width: 18px;
+				height: 18px;
+			}
+		}
+		
+		.right {
+			display: flex;
+			
+			.button {
+				height: 30px;
+			}
+		}
+	}
+	.popupContent {
+		.title {
+			text-align: center;
+			padding: 15px;
+			font-weight: 600;
+		}
+		.text {
+			padding: 10px 30px;
+			font-size: 14px;
+		}
+		.text2 {
+			padding: 10px;
+			display: flex;
+			justify-content: flex-end;
+			.price {
+				font-size: 14px;
+				font-weight: 600;
+				color: #FF2C43;
+			}
+		}
+		
+		.button {
+			margin: 20px auto;
+			height: 40px;
+		}
+	}
+</style>

pages/winningRecord/winningRecord.vue

@@ -0,0 +1,114 @@
+<template>
+	<view class="container">
+		<view class="card" v-for="(item, index) in list" :key="index">
+			<view class="row">
+				<view class="left">
+					<image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
+					<span class="name">{{item.userName}}</span>
+				</view>
+				<view class="right text1">
+					<span style="margin-right: 5px;">{{item.creatTime}}</span>
+					<span>No.{{item.id}}</span>
+				</view>
+			</view>
+			<view class="row" style="margin-top: 10px;">
+				<view class="left">
+					<image class="img" :src="item.prizeIcon" mode="aspectFill"></image>
+					<span class="name">{{item.prizeName}}</span>
+				</view>
+				<view class="right" style="font-size: 14px;">
+					{{ $selectDictLabel(rewardType, item.prizeType) }} × 1
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		userPrizeListApi
+	} from "@/api/drawCard.js"
+	import {
+		rewardType
+	} from "@/utils/commonConfig.js"
+	export default {
+		data() {
+			return {
+				rewardType: rewardType,
+				list: []
+			}
+		},
+		onLoad(query) {
+			console.log(query, 'query')
+			if (query.raffleId) {
+				this.raffleId = query.raffleId
+				// 根据卡包id获取中奖记录
+				this.getList()
+			}
+		},
+		mounted() {
+			
+		},
+		methods: {
+			getList() {
+				let params = {
+					limit: 999,
+					page: 1,
+					raffleId: this.raffleId
+				}
+				userPrizeListApi(params).then(res => {
+					console.log(res, 'res中奖记录')
+					this.list = res.data
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.container {
+		background: #9EC8F9;
+		overflow: auto;
+		.card {
+			margin: 10px 10px 0 10px;
+			border-radius: 8px;
+			background: #fff;
+			padding: 10px;
+			
+			.row {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				
+				.left {
+					display: flex;
+					align-items: center;
+					
+					.photo {
+						margin-right: 5px;
+						width: 30px;
+						height: 30px;
+						border-radius: 50%;
+					}
+					
+					.name {
+						font-size: 14px;
+						font-weight: 600;
+						
+					}
+					
+					.img {
+						width: 40px;
+						height: 40px;
+						border-radius: 2px;
+						margin-right: 5px;
+					}
+				}
+				.text1 {
+					color: #666666;
+					font-size: 12px;
+				}
+			}
+		}
+	}
+</style>