【生活美好】h5_vue_paw_mall

首先放上作者的github地址:
https://github.com/yuanfang289/h5_vue_paw_mall
接下来我们一起看代码
main.js

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import wx from 'weixin-js-sdk';
import axios from 'axios';
import Popup from './components/popup';
import { Icon } from 'vant';
import { Lazyload } from 'vant';
import { Loading } from 'vant';
import {localData, sessionData} from "./assets/js/storage.js";
const debug = process.env.NODE_ENV !== 'production'
Vue.prototype.localData = localData;
Vue.prototype.sessionData=sessionData;

// vant 
Vue.use(Icon);
Vue.use(Lazyload);
Vue.use(Loading);
// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true
});


Vue.prototype.$popup = Popup.install;
axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = debug?'/api':''  // api vue.config.js 中配置的地址
Vue.prototype.wx = wx;
Vue.prototype.$axios = axios;
Vue.config.productionTip = false;

router.beforeEach((to,from,next)=>{
	if(to.meta.title){
		document.title = to.meta.title
	}
	next()
})
Vue.use(router);
new Vue({
  router,
  axios,
  render: h => h(App),
}).$mount('#app')

与我们平时不一样的是这里引用了wexin-js-sdk

//app.vue 入口
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
    
  }
}
</script>

<style>
#app {
    display: flex;
    justify-content: center;
}
</style>

接下来是router.js定义了页面渲染的顺序

import Vue from 'vue'
 
import Router from 'vue-router'

import Home from '../pages/Home'

import Detail from '../pages/Detail'

import Exlist from '../pages/Exlist'

import Success from '../pages/Success'

Vue.use(Router)

export default new Router({
  routes: [
   {
        path : '/',  //到时候地址栏会显示的路径
        name : 'Home',
        component :  Home   // Home是组件的名字，这个路由对应跳转到的组件。。注意component没有加“s”.
    },
    {
        path : '/detail',
        name : 'Detail',
        component :  Detail
    },
	{
	    path : '/exlist',
	    name : 'Exlist',
	    component :  Exlist,
		meta:{
		   title:'兑换记录'
		}
	},
	{
	    path : '/success',
	    name : 'Success',
	    component :  Success
	}
],
    mode: "hash"
})

这个是首页的

我们看下代码

//Home.vue
<template>
  <div class="hello">
		<div class="user_info">
			<div class="left">
				<div class="head_img">
					<img :src="userInfo.avatar || 'http://oss.icebear.me/static/image/noAnswers.png'" />
					<!-- <van-icon size="1.04rem" :name="userInfo.avatar || 'http://oss.icebear.me/static/image/noAnswers.png'" /> -->
				</div>
				<div class="paw_info">
					<p>熊掌余额</p>
					<div class="num">
						<img class="paw_icon" src="https://oss.icebear.me/static/image/icon/paw_icon.png" />
						<span>{{userInfo.paw_num}}</span>
					</div>
				</div>
			</div>
			<router-link  :to="'/exlist'" class="right">
				<span style="margin-right: 2px;">兑换记录</span><van-icon name="arrow" />
			</router-link>
		</div>
		<!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->  <!-- :to="'/detail?id='+item.id" -->
		  <van-list
		    v-model="loading"
		    :finished="finished"
		    finished-text=" "
		    @load="getGoodsList"
		  >
		  <div class="list">
			<template v-for="item in list">
				<div class="item" @click="goDetail(item)">  
					<img :src="item.pic_url" />
					<div class="p">
						<p>
							{{item.name}}
						</p>
					</div>
					<div class="price">
						<img class="paw_icon" src="https://oss.icebear.me/static/image/icon/paw_icon.png"/>
						<span>{{item.paw_price}}</span>
					</div>
				</div>
			</template>
			<template v-if="list.length==0">
				<div class="nodata">
				   <img :src="nodataimg"/>
				   <p>今日商品已售馨，请明日再来~</p>
				</div>
			</template>
		  </div>
		  </van-list>
		<!-- </van-pull-refresh> -->
  </div>
</template>

<script>
	import { List } from 'vant';
	import { PullRefresh } from 'vant';
	import { Toast } from 'vant';
	export default {
		components: {
			 [List.name]: List,
			 [PullRefresh.name]: PullRefresh
		},
	  name: 'Home',
	  props: {
		msg: String
	  },
	  data(){
		return{
			nodataimg:'https://oss.icebear.me/static/image/empty.png',
			userInfo:{
				"avatar": "",
				"paw_num": ''
			},
			token:'',//用户唯一标识
			list: [],
			loading: false,
			finished: false,
			refreshing: false,
			page:1,
			page_size:10
		};
	  },
	  created() {
		let _ = this;
		_.token = _.$route.query.token;
		_.localData("set","token",_.token); 
		// _.localData("set","icebearappid",_.$route.query.appid); 
		_.getUserInfo()
	  },
	  methods:{
		getUserInfo(){  
		  let _ = this;
		  _.$axios.post('/h5/paw/shop/init_shop', {token:_.token}).then(
			 function (res) {
			_.userInfo = res.data.data
		  }).catch(
			 function (error) {
		  });
		},
		getGoodsList(){
			let _ = this;
			_.$axios.post('/h5/paw/shop/get_goods_list', {token:_.token,page:_.page,page_size:_.page_size}).then(
			   function (res) {
				    console.log(res)
				    let list = res.data.data.list;
				    if(list.length>0){_.list = _.list.concat(list)};
					_.page++;
				    console.log(_.list)
				   	_.loading = false;// 加载状态结束
				   	_.refreshing = false; //下拉加载状态结束
				    if(list.length<_.page_size){
				   	   _.finished = true;
				    }
			}).catch(
			   function (error) {
			});
		},
		onRefresh() {
		  let _ = this;
		  // 清空列表数据
		  this.finished = false;
		  // 重新加载数据
		  // 将 loading 设置为 true，表示处于加载状态
		  this.loading = true;
		  this.getGoodsList();
		  Toast('刷新成功');
		},
		goDetail(item) {
			console.log(item);
			let _ = this;
			let obj = {
				clickName:'商品的点击',
				data:item
			}
			_.wx.miniProgram.postMessage({ data: obj });
			_.$router.push({
			  name: 'Detail',
			  query:{           
			    id:item.id, 
			  }
			})
		}
	  }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.hello {
		 7.5rem;
		font-size: 0.32rem;
		padding: 0 0.4rem;
		.user_info{
			font-size: 0.32rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0.4rem 0;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			.left{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.head_img{
					   1.06rem;
					  height: 1.06rem;
					  border-radius: 50%;
					  margin-right: 0.2rem;
					  overflow: hidden;
					  img{
						   1.06rem;
						  height: 1.06rem;
					  }
				}
				.paw_info{
					font-size: 0.26rem;
					.num{
						margin-top: 0.08rem;
						display: flex;
						align-items: center;
						.paw_icon{
							   0.6rem;
							  height: 0.6rem;
							  border-radius: 50%;
							  margin-right: 0.04rem;
						}
						span{
							  font-size: 0.56rem;
							  font-weight: bold;
							  color: #ff7211;
						}
					}
				}
			}
			.right{
				  height: 0.4rem;
				  line-height: 0.4rem;
				  font-family: PingFangSC;
				  font-size: 0.28rem;
				  color: #8e8e93;
				  display: flex;
				  align-items: center;
				  justify-content: center;
			}
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			padding-top: 0.41rem;
			.item{
				 3.2rem;
				height: 4.06rem;
				border-radius: 0.08rem;
				box-shadow: 0 0 0.16rem 0 rgba(0, 0, 0, 0.06);
				background-color: #ffffff;
				overflow: hidden;
				margin-bottom: 0.3rem;
				img{
					 100%;
					height: 2rem;
				}
				.p{
					padding: 0.2rem;
					overflow : hidden;
					p{
						2.8rem;
						height: 0.88rem;
						line-height: 0.44rem;
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						 /*! autoprefixer: off */
					    -webkit-box-orient: vertical;
					     /* autoprefixer: on */
					}
				}
				.price{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 0 0.2rem;
					font-size: 0.28rem;
					font-weight: bold;
					color: #ff7211;
					.paw_icon{
						 0.48rem;
						height: 0.48rem;
						border-radius: 50%;
						margin-right: 0.08rem;
					}
				}
			}
			.nodata{
				 100vw;
				height: 50vh;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				img{
					 3.9rem;
					height: 2.24rem;
				}
				p{
					font-size: 0.28rem;
					text-align: center;
					color: #7e7e7e;
					margin-top: 0.42rem;
				}
			}
		}
	}

</style>

接下来我们看detail页面
home页面中定义了不是wx的话，内容显示不出来，我们也只是看一下代码

//detail
<template>
  <div class="detail"> 
		<template v-if="info">
		  <!-- 课程 -->
		  <template v-if="info.type_id == 1">
		    <img class="goods_img" :src="info.lesson_detail.lesson_introduce_miniapp_head_img"/>
		    <div class="info">
		    	<p class="name">{{info.name}}</p>
		    	<div class="date">
		    		<span class="time" v-if="info.lesson_detail.camp_time&&info.lesson_detail.camp_time.from">时间：{{info.lesson_detail.camp_time.from}}-{{info.lesson_detail.camp_time.to}}</span>
					<span class="time" v-else>时间：随报随学，自由安排</span>
		    		<span class="people_num">{{info.lesson_detail.buy_nums||0}} 人学过</span>
		    	</div>
		    </div>
		    <div class="description">
		    	<div class="content">
		    		<img v-if="info.lesson_detail.lesson_introduce_top_img" class="decImg width-100" v-lazy="info.lesson_detail.lesson_introduce_top_img"> 
		    		<template v-if="info.lesson_detail.lesson_introduce_model_list.length>0" v-for="(item,index) in info.lesson_detail.lesson_introduce_model_list">
		    		    <div :data-index="index" class="contentBox">
		    				<div id="course" class="section-item no-margin">
		    					<div class="titleBox">
		    						<img v-lazy="info.lesson_detail.lesson_introduce_title_img" class="titleBg"> 
		    						<span class="content_title" :style="'color: '+info.lesson_detail.lesson_introduce_title_color">{{item.model_title}}</span>
		    					</div>
		    					<div v-if="item.model_title_img.length>0" v-for="src in item.model_title_img" class="decBox">
		    						<img v-lazy="src" class="decImg margin-40">
		    					</div>
		    				</div>
		    			</div>
		    		</template>
		    	</div>
		    </div>
		  </template>
		  <!-- 周边 -->
		  <template v-else>
		  	<img class="goods_img" :src="info.head_pic_url"/>
		  	<div class="info">
		  		<p class="name">{{info.name}}</p>
		  	</div>
		  	<div class="description">
		  		<div class="content">
		  			<!-- <img class="decImg width-100" v-lazy="info.head_pic_url"> -->
		  			<div class="contentBox">
		  				<div id="course" class="section-item no-margin">
		  					<div v-if="info.introduce_pic_url_list.length>0" v-for="src in info.introduce_pic_url_list" class="decBox">
		  						<img v-lazy="src" class="decImg margin-40">
		  					</div>
		  				</div>
		  			</div>
		  		</div>
		  	</div>
		  </template>
		  <div class="kong"></div>
		  <div class="fixed_btn">
			  <div v-if="info.is_online == 0" class="btn already">
			  			  已下架
			  </div>
			  <div v-else-if="info.is_buy == 1" class="btn already">
			  			  已购买
			  </div>
			  <div v-else-if="info.is_exchange==1" class="btn already">
			  	  已经兑换
			  </div>
			  <div v-else class="btn" @click="exchange()">
			  	{{info.paw_price}}熊掌兑换
			  </div>
		  </div>
		</template>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'Detail',
  props: {
    msg: String
  },
  data(){
  	return{
		appid:'',
		token:'',
		goods_id:'',
		paw_num:'',//用户熊掌数
		info:null
	};
  },
  computed:{

  },
  mounted() {
	 console.log('mounted')
  },
  created() {
	let _ = this;
	console.log('token   '+ _.localData("get","token"))
	_.token = _.localData("get","token");
	// _.appid = _.localData("get","icebearappid");
	_.goods_id = _.$route.query.id;
	_.getDetail();
	_.getUserInfo();
  },
  methods:{
	  getUserInfo(){
		  let _ = this;
		  _.$axios.post('/h5/paw/shop/init_shop', {token:_.token}).then(
			 function (res) {
			_.paw_num = res.data.data.paw_num
		  }).catch(
			 function (error) {
		  });
	  },
	getDetail(){
		let _ = this;
		this.$axios.post('/h5/paw/shop/get_goods_detail', {token:_.token,goods_id:_.goods_id}).then(
		    (res)=> {
			   console.log(res)
			   if(res.data.code){
				   _.info = res.data.data;  
			   }else{
				    Toast(res.data.msg)
			   }  
		}).catch((error)=> {
			   Toast('服务器错误')
		});
	},
	exchange(){
		let _ = this;
		let obj = {
			clickName:'底部兑换的点击',
			data:_.info
		}
		_.wx.miniProgram.postMessage({ data: obj });
		let num = _.info.paw_price - _.paw_num
		if(num<=0){
			_.$popup({
				title: '兑换商品',
				content: '支付 '+_.info.paw_price+' 个熊掌兑换商品',
				btnText: '确定兑换',
				click: () => {
					// 调用接口 获取data     
					 _.exchangeApi()
					 let obj = {
					 	clickName:'确定兑换的点击',
					 	data:_.info
					 }
					 _.wx.miniProgram.postMessage({ data: obj });
				}
			})
		}else{
			_.$popup({
				title: '熊掌不足',
				content: '呜呜～还缺'+num+'个熊掌',
				btnText: '获取更多熊掌',
				click: () => {
					//跳转微信小程序页面  pages/ucenter/bear_paw
					let obj = {
						clickName:'获取更多熊掌的点击',
						data:_.info
					}
					_.wx.miniProgram.postMessage({ data: obj });
					_.wx.miniProgram.navigateTo({
						url: '/pages/ucenter/bear_paw'
					})
				}
			})
		}
	},
	exchangeApi(data){
		let _ = this;
		_.$axios.post('/h5/paw/shop/goods_exchange', {token:_.token,goods_id:_.goods_id}).then(
		    (res)=> {
			  if(res.data.code == 1){
			  	_.$router.push({
			  	  name: 'Success',
			  	  query:{           
			  	    orderId:res.data.data.order_id, 
			  	  }
			  	})
			  }else{
			  	 Toast(res.data.msg);
			  }
		}).catch( (error)=> {
			    Toast('服务器错误')
		});
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .detail{
	  //  7.5rem;
	  .loading{
		   100vw;
		  height: 100vh;
		  position: fixed;
		  top: 0;
		  left: 0;
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  font-size: 0;
	  background-color: #faf8f6;
	  .goods_img{
		   100%;
		  background-color: #ffffff;
	  }
	  .info{
		line-height: 1.5;
		padding: 0.4rem 0.36rem;
		background-color: #ffffff;
		.name{
			font-size: 0.4rem;
			font-weight: bold;
			color: #482929;
		}
		.date{
			font-size: 0.28rem;
			color: #482929;
			margin-top: 0.12rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.people_num{
			    font-size: 0.24rem;
				color: #747474;
			}
		}
	  }
	  .description{
		   100%;
		  font-size: 0.28rem;
		  margin-top: 0.2rem;
		  padding: 0.4rem 0.36rem;
		  background-color: #ffffff;
		  img{
			 100%;  
		  }
		  .titleBox{
			  position: relative;
			  margin: 0.48rem 0 0.4rem;
			   100%;
			  .content_title{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				font-size: 0.4rem;
				font-weight: 700;
				color: #482929;
			  }
		   }
		  
	  }
	  .kong{
		height: 0.98rem; 
		box-sizing: border-box;
		background-color: #ffffff;
	    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
	    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	  }
	  .fixed_btn{
		  position: fixed;
		   100%;
		  left: 0;
		  bottom: 0;
		  box-sizing: border-box;
		  background: #ffffff;
		  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
		  .btn{
		  		 100%;
		  		height: 0.98rem;
		  		line-height: 0.98rem;
		  		background-color: #ff982e;
		  		font-size: 0.4rem;
		  		font-weight: 500;
		  		color: #ffffff;
		  		text-align: center;
		  }
		  .already{
		  		background-color: #dedede;
		  		color: #ffffff;
		  }
	  }
  }
</style>

Exlist页面

//exlist.vue
<template>
  <div class="exlist">
	  <div v-if="list.length == 0&&finished" class="nodata">
		  <img :src="nodataimg" />
		  <p>暂无兑换记录</p>
	  </div>
	  <div v-else class="list">
	  		  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
	  		    <van-list
	  		      v-model="loading"
	  		      :finished="finished"
	  		      finished-text=" "
	  		      @load="onLoad"
	  		    >
	  		      <div v-for="item in list" class="item" @click="gosuccess(item)">
	  		      	<div class="content">
	  		      		{{item.name}}
	  		      	</div>
	  		      	<div class="cost">
	  		      		<p class="date">{{item.pay_time}}</p>
	  		      		<div class="price">
	  		      			<p class="num">-{{item.price}}</p>
	  		      			<img class="paw_icon" src="https://oss.icebear.me/static/image/icon/paw_icon.png" />
	  		      		</div>
	  		      	</div>
	  		      </div>
	  		    </van-list>
	  		  </van-pull-refresh>
	  </div>
  </div>
</template>

<script>
import { List } from 'vant';
import { PullRefresh } from 'vant';
import { Toast } from 'vant';
export default {
  components: {  
	 [List.name]: List,
	 [PullRefresh.name]: PullRefresh
  },
  name: 'Exlist',
  props: {
    msg: String
  },
  data(){
	return{
		token:'',
		nodataimg:'https://oss.icebear.me/static/image/empty.png',
		list:[] ,
		loading: false,
		finished: false,
		refreshing: false,
		page:1,
		page_size:10
	};
  },
  created() {
	 let _ = this;
	_.token = _.localData("get","token");
  },
  methods: {
		onLoad() {
			let _ = this;
			_.$axios.post('/h5/paw/shop/get_order_list', {
				token:_.token,	
				page:_.page,	
				page_size:_.page_size
			}).then(
			   function (res) {
				   let list = res.data.data.list;
				   if(list.length>0){
					   _.list = _.list.concat(list)
					   _.page++
					};
				   	_.loading = false;// 加载状态结束
				   	_.refreshing = false; //下拉加载状态结束
				   if(list.length<_.page_size){
					   _.finished = true;
				   }
			}).catch(
			   function (error) {
			});
		},
	    onRefresh() {
		  let _ = this;
		  // 清空列表数据
		  _.finished = false;
		  _.list = [];
		  _.page = 1
		  // 重新加载数据
		  // 将 loading 设置为 true，表示处于加载状态
		  _.loading = true;
		  _.onLoad();
		  Toast('刷新成功');
		},
		gosuccess(item){
			let _ = this;
			_.$router.push({
			  name: 'Success',
			  query:{           
			    orderId:item.id, 
			  }
			})
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	
	.exlist{
		min-height: 100vh;
		background-color: #fafafa;
		.list{
			 100vw;
			padding: 0 0.3rem 0.4rem 0.3rem;
			.item{
				 100%;
				height: 1.94rem;
				margin-top: 0.3rem;
				font-size: 0.48rem;
				border-radius: 0.16rem;
				box-shadow: 0 0 0.12rem 0 rgba(0, 0, 0, 0.04);
				background-color: #ffffff;
				.content{
					height: 1.05rem;
					line-height: 1.05rem;
					font-size: 0.32rem;
					color: #000000;
					padding: 0 0.3rem;
					border-bottom: 0.01rem solid #fafafa;
					 100%;
					white-space:nowrap;/* 规定文本是否折行 */  
					overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
					text-overflow: ellipsis;
				}
				.cost{
					height: 0.88rem;
					line-height: 0.88rem;
					padding: 0 0.3rem;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.date{
						font-size: 0.28rem;
						color: #9b9b9b;
					}
					.price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.num{
							font-size: 0.32rem;
							font-weight: bold;
							color: #ff7211;
							margin-right: 0.08rem;
						}
						.paw_icon{
							 0.48rem;
							height: 0.48rem;
						}
					}
				}
			}
		}
		.nodata{
			// background-color: #ffffff;
			 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			img{
				 3.9rem;
				height: 2.24rem;
			}
			p{
				font-size: 0.28rem;
				text-align: center;
				color: #7e7e7e;
				margin-top: 0.42rem;
			}
		}
	}
</style>

这个里面还有一个popup组件

//popup
<template>
  <transition name='fade'>
    <!-- 蒙版 -->
    <div class="mask" v-if="show" @touchmove.prevent>
      <div class="window">
        <!-- <img class="shadow" :src="imgUrl" alt=""> -->
        <h1>{{title}}</h1>
        <p>{{content}}</p>
        <div class="btn" @click="btnClick">{{btnText}}</div>
      </div>
	  <div class="close" @click="show = false">
		  <van-icon name="cross" size="0.4rem" color="#ffffff"/>
	  </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      show: false,		 // 显示隐藏
      imgUrl: '',        // imgUrl: require('../../../static/images/shadow.png'), // 顶部图片
      title: '',		 //主标题
      content: '',      //内容
      btnText: '',      // button文案
      click: ''         //按钮事件
    }
  },
  created () {
  },
  methods: {
    btnClick () {
      this.click()
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
  // 渐变过渡
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .35s;
  }
  // 全局弹窗
  .mask {
	 100vw;
	height: 100vh;
    position: fixed;
	top: 0;
	left: 0;
    z-index: 10;
    background:rgba(0,0,0,0.65);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    .window{
      // height: 4.84rem;
	  line-height: 1.3;
       100%;
      background: #fff;
      border-radius:0.24rem;
      text-align: center;
	  box-shadow: 0 0 0.06rem 0 rgba(0, 0, 0, 0.24);
	  padding: 0.9rem 0.76rem;
      .shadow{
         270/75rem;
        margin-top: -90/75rem;
      }
      h1{
        font-size: 0.44rem;
        font-weight: bolder;
        text-align: center;
        color: #482929;
      }
      p{
        margin-top: 0.3rem;
		font-size: 0.32rem;
		text-align: center;
		color: #666666;
      }
      .btn{
		 100%;
		height: 1rem;
		line-height: 1rem;
		border-radius: 0.5rem;
		background-color: #ffcc2d;
        margin-top: 0.7rem;
        font-size: 0.36rem;
        font-weight: bold;
        text-align: center;
        color: #482929;
      }
    }
    .close{
      0.6rem;
      height:0.6rem;
      margin-top: 0.2rem;
	  border: none;
	  border-radius: 0.3rem;
	  background-color: rgba(0, 0, 0, 0.4);
	  display: flex;
	  align-items: center;
	  justify-content: center;
    }
  }
</style>

还有success组件

<template>
  <div class="success">
	<div class="bg"></div>
	<div v-if="detail" class="content">
		<div class="title">
			<div class="icon-tit">
				<van-icon size="0.52rem" name="https://oss.icebear.me/static/image/icon/right.png" />
			</div>
			<div class="tit">兑换成功！</div>
		</div>
		<div class="name van-hairline--bottom">
			- {{detail.goods_name}} -<br>{{detail.order_id}}
		</div>
<!-- 		<div class="orderid"> 
			
		</div> -->
		<div class="qrcode">
			<img v-lazy="detail.service_wechat_url"/>
		</div>
		<div class="tips">
			  {{detail.bottom_text}}  <!-- 截图扫码前往白熊学院小程序学习 -->
		</div>
	</div>
  </div>
</template>

<script>
	
export default {
  components: {  
	
  },
  name: 'Success',
  props: {
   
  },
  data(){
  	return{
  		qrcode:'https://oss.icebear.me/static/image/successbg.png',
  		detail:'',
  	};
  },
  created() {
	    let _ = this;
	    _.orderId = _.$route.query.orderId;
		_.token = _.localData("get","token");
		_.getExchangeDetail()
  },
  methods: {
	getExchangeDetail(){
		  let _ = this;
		  _.$axios.post('/h5/paw/shop/get_goods_exchange_detail', {token:_.token,order_id:_.orderId}).then(
			 function (res) {
			_.detail = res.data.data;
			console.log(_.detail);
		  }).catch(
			 function (error) {
		  });
	},
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.success{
		 100vw;
		min-height: 100vh;
		background-color: #ffda65;	
		display: flex;
		flex-direction: column;
		align-items: center;
		.bg{
			 6.9rem;
			height: 2.8rem;
			background-image: url('https://oss.icebear.me/static/image/successbg.png');
			background-size: 100%;background-repeat: no-repeat;
		}
		.content{
			 6.9rem;
			// height: 8.08rem;
			border-radius: 0.16rem;
			box-shadow: 0 0 0.06rem 0 rgba(0, 0, 0, 0.24);
			background-color: #ffffff;
			margin-top: -0.48rem;
			text-align: center;
			padding: 0.6rem 0.4rem 1.1rem 0.4rem;
			.title{
				font-size: 0.48rem;
				font-weight: bold;
				color: #482929;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon-tit{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 0.16rem;
				}
				.tit{
					line-height: 1.3;
				}
			}
			.name{
				font-size: 0.28rem;
				text-align: center;
				color: #482929;
				margin-top: 0.2rem;
				line-height: 1.5;
				padding-bottom: 0.3rem;
			}
			// .orderid{
			// 	font-size: 0.36rem;
			// 	margin-top: 0.2rem;
			// }
			.qrcode{
				margin-top: 0.31rem;
				img{
					 5.7rem;
				}
			}
			.tips{
			    font-size: 0.32rem;
			    font-weight: bold;
			    text-align: center;
			    color: #ff742b;
				line-height: 1.3;
				margin-top: 0.3rem;
			}
		}
	}
</style>

这个项目里面大概就是这些内容了