首先放上作者的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 {
width: 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{
width: 1.06rem;
height: 1.06rem;
border-radius: 50%;
margin-right: 0.2rem;
overflow: hidden;
img{
width: 1.06rem;
height: 1.06rem;
}
}
.paw_info{
font-size: 0.26rem;
.num{
margin-top: 0.08rem;
display: flex;
align-items: center;
.paw_icon{
width: 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{
width: 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{
width: 100%;
height: 2rem;
}
.p{
padding: 0.2rem;
overflow : hidden;
p{
width: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{
width: 0.48rem;
height: 0.48rem;
border-radius: 50%;
margin-right: 0.08rem;
}
}
}
.nodata{
width: 100vw;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img{
width: 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{
// width: 7.5rem;
.loading{
width: 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{
width: 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{
width: 100%;
font-size: 0.28rem;
margin-top: 0.2rem;
padding: 0.4rem 0.36rem;
background-color: #ffffff;
img{
width: 100%;
}
.titleBox{
position: relative;
margin: 0.48rem 0 0.4rem;
width: 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;
width: 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{
width: 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{
width: 100vw;
padding: 0 0.3rem 0.4rem 0.3rem;
.item{
width: 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;
width: 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{
width: 0.48rem;
height: 0.48rem;
}
}
}
}
}
.nodata{
// background-color: #ffffff;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img{
width: 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 {
width: 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;
width: 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{
width: 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{
width: 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{
width: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{
width: 100vw;
min-height: 100vh;
background-color: #ffda65;
display: flex;
flex-direction: column;
align-items: center;
.bg{
width: 6.9rem;
height: 2.8rem;
background-image: url('https://oss.icebear.me/static/image/successbg.png');
background-size: 100%;background-repeat: no-repeat;
}
.content{
width: 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{
width: 5.7rem;
}
}
.tips{
font-size: 0.32rem;
font-weight: bold;
text-align: center;
color: #ff742b;
line-height: 1.3;
margin-top: 0.3rem;
}
}
}
</style>
这个项目里面大概就是这些内容了
来源：oschina
链接：https://my.oschina.net/u/4364212/blog/4287816