├── README.md
├── static
    ├── cart.png
    ├── gift.png
    ├── home.png
    ├── logo.png
    ├── menu.png
    ├── mine.png
    ├── shop.png
    ├── uni.ttf
    ├── coffee.png
    ├── noData.png
    ├── order.png
    ├── start.png
    ├── wallet.png
    ├── business.png
    ├── cart-active.png
    ├── cart-nodata.png
    ├── home-active.png
    ├── menu-active.png
    ├── mine-active.png
    └── order-active.png
├── main.js
├── pages
    ├── mine
    │   ├── invoice
    │   │   ├── record.vue
    │   │   ├── explain.vue
    │   │   ├── index.vue
    │   │   ├── title.vue
    │   │   ├── open.vue
    │   │   ├── title-add.vue
    │   │   └── open-info.vue
    │   ├── wallet
    │   │   └── index.vue
    │   ├── coupon
    │   │   └── index.vue
    │   ├── feedback
    │   │   ├── details.vue
    │   │   ├── about.vue
    │   │   ├── list.vue
    │   │   └── feedback.vue
    │   ├── message.vue
    │   ├── cash
    │   │   └── index.vue
    │   ├── personal
    │   │   ├── change-name.vue
    │   │   └── list.vue
    │   ├── address
    │   │   ├── list.vue
    │   │   ├── add.vue
    │   │   └── edit.vue
    │   └── index.vue
    ├── home
    │   ├── presented.vue
    │   └── index.vue
    ├── login
    │   └── login.vue
    ├── order
    │   └── index.vue
    ├── cart
    │   └── index.vue
    └── menu
    │   ├── index-backup.vue
    │   ├── data.json
    │   └── index.vue
├── App.vue
├── components
    ├── uni-icon.vue
    ├── uni-popup.vue
    └── popup.vue
├── store
    └── index.js
├── common
    ├── common.css
    └── uni.css
├── manifest.json
└── pages.json


/README.md:
--------------------------------------------------------------------------------
1 | # shop
2 | 一个基于uni-app的商城app
3 | 


--------------------------------------------------------------------------------
/static/cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/cart.png


--------------------------------------------------------------------------------
/static/gift.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/gift.png


--------------------------------------------------------------------------------
/static/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/home.png


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/logo.png


--------------------------------------------------------------------------------
/static/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/menu.png


--------------------------------------------------------------------------------
/static/mine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/mine.png


--------------------------------------------------------------------------------
/static/shop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/shop.png


--------------------------------------------------------------------------------
/static/uni.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/uni.ttf


--------------------------------------------------------------------------------
/static/coffee.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/coffee.png


--------------------------------------------------------------------------------
/static/noData.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/noData.png


--------------------------------------------------------------------------------
/static/order.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/order.png


--------------------------------------------------------------------------------
/static/start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/start.png


--------------------------------------------------------------------------------
/static/wallet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/wallet.png


--------------------------------------------------------------------------------
/static/business.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/business.png


--------------------------------------------------------------------------------
/static/cart-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/cart-active.png


--------------------------------------------------------------------------------
/static/cart-nodata.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/cart-nodata.png


--------------------------------------------------------------------------------
/static/home-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/home-active.png


--------------------------------------------------------------------------------
/static/menu-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/menu-active.png


--------------------------------------------------------------------------------
/static/mine-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/mine-active.png


--------------------------------------------------------------------------------
/static/order-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18510247960/shop/HEAD/static/order-active.png


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import store from './store'
 4 | 
 5 | Vue.config.productionTip = false
 6 | Vue.prototype.$store = store
 7 | 
 8 | App.mpType = 'app'
 9 | 
10 | const app = new Vue({
11 |     ...App
12 | })
13 | app.$mount()
14 | 


--------------------------------------------------------------------------------
/pages/mine/invoice/record.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="state">目前无开票记录</view>
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		data() {
10 | 			return {
11 | 				
12 | 			}
13 | 			
14 | 		},
15 | 		onLoad() {
16 | 			
17 | 		},
18 | 		methods: {
19 | 			
20 | 		}
21 | 	}
22 | </script>
23 | 
24 | <style>
25 | </style>
26 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export default {
 3 | 		onLaunch: function () {
 4 | 			console.log('App Launch')
 5 | 		},
 6 | 		onShow: function () {
 7 | 			console.log('App Show')
 8 | 		},
 9 | 		onHide: function () {
10 | 			console.log('App Hide')
11 | 		}
12 | 	}
13 | </script>
14 | 
15 | <style>
16 | 	/*每个页面公共css */
17 | 	@import "./common/uni.css";
18 | 	@import "./common/common.css";
19 | </style>
20 | 


--------------------------------------------------------------------------------
/pages/mine/wallet/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="state">您的咖啡钱包有点寂寞</view>
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		data() {
10 | 			return {
11 | 				
12 | 			}
13 | 			
14 | 		},
15 | 		onLoad() {
16 | 			
17 | 		},
18 | 		methods: {
19 | 			
20 | 		}
21 | 	}
22 | </script>
23 | 
24 | <style>
25 | 	.state{padding-top: 30%;color: #999;text-align: center;}
26 | </style>
27 | 


--------------------------------------------------------------------------------
/pages/mine/coupon/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="state">暂无可用优惠券</view>
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		data() {
10 | 			return {
11 | 				
12 | 			}
13 | 			
14 | 		},
15 | 		onLoad() {
16 | 			
17 | 		},
18 | 		methods: {
19 | 			
20 | 		}
21 | 	}
22 | </script>
23 | 
24 | <style scoped>
25 | 	.state{padding-top: 30%;color: #999;text-align: center;}
26 | </style>
27 | 


--------------------------------------------------------------------------------
/pages/mine/invoice/explain.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="text">
 3 | 		<view class="text-p">
 4 | 			1、通过银行卡（包括信用卡和借记卡）和网上支付平台（包括转支付宝和微信支付）支付的费用，用于开具发票。以代金券、优惠券或营销活动支付或冲抵的费用，恕不能开发票。
 5 | 		</view>
 6 | 		<view class="text-p">
 7 | 			2、通过银行卡（包括信用卡和借记卡）和网上支付平台（包括转支付宝和微信支付）支付的费用，用于开具发票。以代金券、优惠券或营销活动支付或冲抵的费用，恕不能开发票。
 8 | 		</view>
 9 | 	</view>
10 | </template>
11 | 
12 | <script>
13 | 	export default {
14 | 		data() {
15 | 			return {
16 | 				
17 | 			};
18 | 		}
19 | 	}
20 | </script>
21 | 
22 | <style>
23 | 	.text{padding: 40upx;}
24 | 	.text-p{font-size: 32upx;margin-bottom: 30upx;}
25 | </style>
26 | 


--------------------------------------------------------------------------------
/components/uni-icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view class="uni-icon" :class="['uni-icon-'+type]" :style="{color:color,'font-size':fontSize}" @click="onClick()"></view>
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |         props: {
 8 |             /**
 9 |              * 图标类型
10 |              */
11 |             type: String,
12 |             /**
13 |              * 图标颜色
14 |              */
15 |             color: String,
16 |             /**
17 |              * 图标大小
18 |              */
19 |             size: [Number, String]
20 |         },
21 |         computed: {
22 |             fontSize() {
23 |                 return `${this.size}px`
24 |             }
25 |         },
26 |         methods: {
27 |             onClick() {
28 |                 this.$emit('click')
29 |             }
30 |         }
31 |     }
32 | </script>
33 | 
34 | 


--------------------------------------------------------------------------------
/pages/mine/feedback/details.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="problem" v-for="(item,index) in problem" :key="index">
 4 | 			<view class="problem-title">Q{{index+1}}、{{item.title}}</view>
 5 | 			<view class="problem-text">{{item.text}}</view>
 6 | 		</view>
 7 | 	</view>
 8 | </template>
 9 | 
10 | <script>
11 | 	export default {
12 | 		data(){
13 | 			return {
14 | 				problem:[
15 | 					{
16 | 						title: "什么是咖啡库",
17 | 						text: "咖啡库是提前预存在app内的咖啡福利，在您下单结算时自动抵扣相应饮品，可通过赠送或买赠优惠活动获得。"
18 | 					}
19 | 				]
20 | 			}
21 | 		},
22 | 		onLoad() {
23 | 			
24 | 		},
25 | 		methods:{
26 | 			
27 | 		}
28 | 	}
29 | </script>
30 | 
31 | <style>
32 | 	.content{padding: 30upx;}
33 | 	.problem{margin-bottom: 30upx;}
34 | 	.problem-title{font-size: 34upx;color: #333;}
35 | 	.problem-text{font-size: 28upx;color: #666;}
36 | </style>
37 | 


--------------------------------------------------------------------------------
/pages/mine/message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="message-list">
 3 | 		<view class="message-item" v-for="(item,index) in message" :key="index">
 4 | 			<view class="message-header">
 5 | 				<view class="message-title">{{item.title}}</view>
 6 | 				<view class="message-time">{{item.time}}</view>
 7 | 			</view>
 8 | 			<view class="message-text">{{item.text}}</view>
 9 | 		</view>
10 | 	</view>
11 | </template>
12 | 
13 | <script>
14 | 	export default {
15 | 		data() {
16 | 			return {
17 | 				message: [
18 | 					{
19 | 						title: "送你一杯咖啡",
20 | 						time: "2018-12-26 11:10",
21 | 						text: "您送出的免费咖啡，好友已成功领取品尝！"
22 | 					},
23 | 					{
24 | 						title: "您的咖啡已在赴约途中",
25 | 						time: "2018-12-20 11:10",
26 | 						text: "您的咖啡已在赴约途中，预计16：50与您见面。"
27 | 					}
28 | 				]
29 | 			};
30 | 		}
31 | 	}
32 | </script>
33 | 
34 | <style>
35 | 	.message-list{background-color: #fff;margin-top: 10upx;}
36 | 	.message-item{padding: 30upx;border-bottom: 1px solid #f0f0f0;}
37 | 	.message-header{display: flex;justify-content: space-between;margin-bottom: 20upx;}
38 | 	.message-title{line-height: 28upx;font-size: 28upx;}
39 | 	.message-time,.message-text{color: #999;font-size: 24upx;line-height: 28upx;}
40 | 	.message-text{color: #999;}
41 | 
42 | </style>
43 | 


--------------------------------------------------------------------------------
/pages/mine/invoice/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="uni-list">
 4 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index" @tap="go(item.url)">
 5 | 				<view class="uni-list-cell-navigate uni-navigate-right">
 6 | 					{{item.name}}
 7 | 				</view>
 8 | 			</view>
 9 | 		</view>
10 | 	</view>
11 | </template>
12 | 
13 | <script>
14 | 	export default {
15 | 		data() {
16 | 			return {
17 | 				list: [
18 | 					{
19 | 						name: "开具发票",
20 | 						url: "open",
21 | 						iconName: "icon-mn_yonghuziliao_fill"
22 | 					},
23 | 					{
24 | 						name: "开具记录",
25 | 						url: "record",
26 | 						iconName: "icon-kafei"
27 | 					},
28 | 					{
29 | 						name: "发票抬头",
30 | 						url: "title",
31 | 						iconName: "icon-youhuiquan"
32 | 					}
33 | 				]
34 | 			}
35 | 		},
36 | 		onLoad() {
37 | 			
38 | 		},
39 | 		methods: {
40 | 			go(url) {
41 | 				uni.navigateTo({
42 | 					url: url
43 | 				})
44 | 			}
45 | 		}
46 | 	}
47 | </script>
48 | 
49 | <style>
50 | 	.uni-list{margin-bottom: 20upx;color: #5b5b5b;border-top: 1px solid #f0f0f0;}
51 | 	.uni-list:before,.uni-list:after{display: none;}
52 | 	.uni-list-cell:after{background-color: #f0f0f0;}
53 | </style>
54 | 


--------------------------------------------------------------------------------
/pages/mine/feedback/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="about">
 3 | 		<view class="content">
 4 | 			<view class="qrcode">
 5 | 				<image src="../../../static/logo.png"></image>
 6 | 				<text style="margin-top:20px;">正量网</text>
 7 | 			</view>
 8 | 		</view>
 9 | 		<view class="version">
10 | 			当前版本：{{version}}
11 | 		</view>
12 | 	</view>
13 | </template>
14 | 
15 | <script>
16 | 	export default {
17 | 		data(){
18 | 			return {
19 | 				providerList:[],
20 | 				version:'v1.0'
21 | 			}
22 | 		},
23 | 		onLoad() {
24 | 			
25 | 		},
26 | 		methods:{
27 | 			
28 | 		}
29 | 	}
30 | </script>
31 | 
32 | <style>
33 | 	page,
34 | 	view {
35 | 		display: flex;
36 | 	}
37 | 
38 | 	page {
39 | 		min-height: 100%;
40 | 		background-color: #FFFFFF;
41 | 	}
42 | 	image{
43 | 		width: 200upx;
44 | 		height: 200upx;
45 | 		margin-top: 100upx;
46 | 	}
47 | 	.about{
48 | 		flex-direction: column;
49 | 		flex: 1;
50 | 	}
51 | 	.content{
52 | 		flex: 1;
53 | 		flex-direction: column;
54 | 		justify-content: top;
55 | 	}
56 | 	.qrcode{
57 | 		display: flex;
58 | 		align-items: center;
59 | 		flex-direction: column;
60 | 	}
61 | 	.version{
62 | 		height: 80upx;
63 | 		line-height: 80upx;
64 | 		justify-content: center;
65 | 		color: #ccc;
66 | 	}
67 | </style>
68 | 


--------------------------------------------------------------------------------
/pages/mine/cash/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="uni-form-item uni-column">
 4 | 			<view class="with-fun">
 5 | 				<view class="form-label">兑换码</view>
 6 | 				<input class="uni-input" placeholder="请输入兑换码"  @input="input" />
 7 | 			</view>
 8 | 		</view>
 9 | 		<button class="confirm" hover-class="btn-hover" :disabled="idDisabled" @tap="confirm">确定</button>
10 | 	</view>
11 | </template>
12 | 
13 | <script>
14 | 	export default {
15 | 		data() {
16 | 			return {
17 | 				idDisabled: true
18 | 			}
19 | 		},
20 | 		onLoad() {
21 | 			
22 | 		},
23 | 		methods: {
24 | 			confirm(){
25 | 				uni.showToast({
26 | 					title: "活动码不存在",
27 | 					icon: "none"
28 | 				})
29 | 			},
30 | 			input(e) {
31 | 				if(e.detail.value !== ""){
32 | 					this.idDisabled = false;
33 | 				}else{
34 | 					this.idDisabled = true;
35 | 				}
36 | 			}
37 | 		}
38 | 	}
39 | </script>
40 | 
41 | <style>
42 | 	.content{padding-top: 10upx;}
43 | 	.form-label{line-height: 80upx;margin-left: 30upx;}
44 | 	.confirm{width: 690upx;height: 80upx;line-height: 80upx;margin-top: 28upx;font-size: 28upx;background-color: #5c8abf;color: #fff;}
45 | 	button[disabled]:not([type]){background-color: #89afd6;color: #fff;}
46 | 	.confirm:after{border: none;}
47 | 	.btn-hover{opacity: 0.9;}
48 | </style>
49 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const store = new Vuex.Store({
 7 | 	state: {
 8 | 		hasLogin: false,
 9 | 		userHeadimg: "/static/logo.png",
10 | 		userName: "",
11 | 		gender: "男",
12 | 		addressList: [],
13 | 		cartList: [],
14 | 		total: 0
15 | 	},
16 | 	mutations: {
17 | 		login(state) {
18 | 			state.hasLogin = true;
19 | 		},
20 | 		logout(state) {
21 | 			state.hasLogin = false;
22 | 		},
23 | 		changeHeadimg(state,newUrl){
24 | 			state.userHeadimg = newUrl;
25 | 		},
26 | 		changeUserName(state,newName){
27 | 			state.userName = newName;
28 | 		},
29 | 		changeGender(state,gender){
30 | 			state.gender = gender;
31 | 		},
32 | 		changeAddress(state,newAddress){
33 | 			state.addressList.push(newAddress)
34 | 		},
35 | 		editAddress(state,obj){
36 | 			state.addressList[obj.num] = obj.d;
37 | 		},
38 | 		removeAddress(state,i){
39 | 			state.addressList.splice(i,1)
40 | 		},
41 | 		addCart(state,newCart){
42 | 			for(var i = 0; i<state.cartList.length; i++){
43 | 				console.log(state.cartList[i].id,newCart.id)
44 | 				if(state.cartList[i].id == newCart.id){
45 | 					state.cartList[i].num = state.cartList[i].num + newCart.num;
46 | 				}else{
47 | 					state.cartList.push(newCart)
48 | 				}
49 | 			}
50 | 		},
51 | 		removeCart(state,i){
52 | 			state.cartList.splice(i,1)
53 | 		},
54 | 		calcTotal(state,cartList){
55 | 			state.total = cartList[0].price;
56 | 			var t = 0;
57 | 			for(var i = 0; i< cartList.length; i++){
58 | 				t += cartList[i].num * cartList[i].price;
59 | 			}
60 | 			state.total = t;
61 | 		}
62 | 	}
63 | })
64 | 
65 | export default store
66 | 


--------------------------------------------------------------------------------
/pages/mine/feedback/list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="uni-list">
 4 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index" @tap="go(item.url)">
 5 | 				<view class="uni-list-cell-navigate uni-navigate-right">
 6 | 					{{item.name}}
 7 | 				</view>
 8 | 			</view>
 9 | 		</view>
10 | 		<view class="uni-list">
11 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="go('about')">
12 | 				<view class="uni-list-cell-navigate uni-navigate-right">
13 | 					关于我们
14 | 				</view>
15 | 			</view>
16 | 			<!-- <view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="go('')">
17 | 				<view class="uni-list-cell-navigate uni-navigate-right">
18 | 					用户隐私政策
19 | 				</view>
20 | 			</view> -->
21 | 		</view>
22 | 	</view>
23 | </template>
24 | 
25 | <script>
26 | 	export default {
27 | 		data() {
28 | 			return {
29 | 				list: [
30 | 					{
31 | 						name: "购买类",
32 | 						url: "details"
33 | 					},
34 | 					{
35 | 						name: "配送类",
36 | 						url: "details"
37 | 					},
38 | 					{
39 | 						name: "商品类",
40 | 						url: "details"
41 | 					},
42 | 					{
43 | 						name: "发票类",
44 | 						url: "details"
45 | 					},
46 | 					{
47 | 						name: "合作类",
48 | 						url: "details"
49 | 					},
50 | 					// #ifdef APP-PLUS 
51 | 					{
52 | 						name: "意见反馈",
53 | 						url: "feedback"
54 | 					},
55 | 					// #endif
56 | 				]
57 | 			}
58 | 		},
59 | 		onLoad() {
60 | 			
61 | 		},
62 | 		methods: {
63 | 			
64 | 			go(url) {
65 | 				uni.navigateTo({
66 | 					url: url
67 | 				})
68 | 			}	
69 | 		}
70 | 	}
71 | </script>
72 | 
73 | <style>
74 | 	.uni-list{margin-bottom: 20upx;color: #5b5b5b;border-top: 1px solid #f0f0f0;}
75 | 	.uni-list:before,.uni-list:after{display: none;}
76 | 	.uni-list-cell:after{background-color: #f0f0f0;}
77 | </style>
78 | 


--------------------------------------------------------------------------------
/pages/home/presented.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="presented-item" v-for="(item,index) in presented" :key= index>
 4 | 			<view class="presented-icon">
 5 | 				<view class="iconfont" :class="item.iconName"></view>
 6 | 			</view>
 7 | 			<view class="presented-text">
 8 | 				<view class="presented-title">{{item.title}}</view>
 9 | 				<view class="presented-introduce">{{item.introduce}}</view>
10 | 			</view>
11 | 			<button class="button presented-btn">{{item.btnName}}</button>
12 | 		</view>
13 | 	</view>
14 | </template>
15 | 
16 | <script>
17 | 	export default {
18 | 		data() {
19 | 			return {
20 | 				presented: [
21 | 					{
22 | 						iconName: "icon-hongbao1",
23 | 						title: "咖啡红包",
24 | 						introduce: "可单发可群发 全新社交利器",
25 | 						btnName: "发红包"
26 | 					},
27 | 					{
28 | 						iconName: "icon-liwu1",
29 | 						title: "咖啡请客",
30 | 						introduce: "一对一送Ta咖啡 为友谊干杯",
31 | 						btnName: "请Ta喝"
32 | 					},
33 | 					{
34 | 						iconName: "icon-yaoqing",
35 | 						title: "邀请得杯",
36 | 						introduce: "邀请新朋友 你和Ta各得一杯",
37 | 						btnName: "马上分享"
38 | 					}
39 | 				]
40 | 			};
41 | 		}
42 | 	}
43 | </script>
44 | 
45 | <style>
46 | 	.content{padding: 0 24upx;border-top: 1px solid #e7e7e7;}
47 | 	.presented-item{background-color: #fff;padding: 32upx 38upx;margin-top: 40upx;display: flex;border-radius: 8upx;justify-content: space-between;}
48 | 	.presented-icon{width: 68upx;height: 68upx;border: 4upx solid #f1e6e1;border-radius: 50%;text-align: center;margin-right: 20upx;}
49 | 	.presented-icon .iconfont{color: #a08066;font-size: 36upx;line-height: 68upx;}
50 | 	.presented-text{flex-grow: 2;}
51 | 	.presented-title{font-size: 32upx;line-height: 44upx;}
52 | 	.presented-introduce{color: #999;font-size: 24upx;line-height: 24upx;}
53 | 	.presented-btn{width: 140upx;height: 54upx;font-size: 22upx;line-height: 54upx;margin-top: 11upx;padding: 0;}
54 | </style>
55 | 


--------------------------------------------------------------------------------
/pages/mine/personal/change-name.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="uni-form-item uni-column">
 4 | 			<view class="with-fun">
 5 | 				<view class="user-name">用户名</view>
 6 | 				<input class="uni-input" placeholder="输入用户名" :value="inputClearValue" @input="bindClearInput" />
 7 | 				<view class="uni-icon uni-icon-clear" v-if="showClearIcon" @click="clearIcon"></view>
 8 | 			</view>
 9 | 		</view>
10 | 		<button class="confirm" hover-class="btn-hover" :disabled="!showClearIcon" @tap="confirm">确定</button>
11 | 	</view>
12 | </template>
13 | 
14 | <script>
15 | 	import {
16 | 		mapState,
17 | 		mapMutations
18 | 	} from 'vuex'
19 | 	export default {
20 | 		computed: {
21 | 			...mapState(['userName'])
22 | 		},
23 | 		data() {
24 | 			return {
25 | 				showClearIcon: false,
26 | 				inputClearValue: "",
27 | 				isDisabled: false
28 | 			}
29 | 		},
30 | 		onLoad() {
31 | 			this.inputClearValue = this.userName;
32 | 			if (this.inputClearValue.length > 0) {
33 | 				this.showClearIcon = true;
34 | 			} else {
35 | 				this.showClearIcon = false;
36 | 			}
37 | 		},
38 | 		methods: {
39 | 			...mapMutations(['changeUserName']),
40 | 			bindClearInput: function (e) {
41 | 				this.inputClearValue = e.target.value;
42 | 				// e.target.value == '' ? isDisabled = true: isDisabled;
43 | 				if (e.target.value.length > 0) {
44 | 					this.showClearIcon = true;
45 | 				} else {
46 | 					this.showClearIcon = false;
47 | 				}
48 | 			},
49 | 			clearIcon: function () {
50 | 				this.inputClearValue = "";
51 | 				console.log(this.inputClearValue);
52 | 				this.showClearIcon = false;
53 | 			},
54 | 			confirm(){
55 | 				this.changeUserName(this.inputClearValue);
56 | 				uni.navigateBack()
57 | 			}
58 | 		}
59 | 	}
60 | </script>
61 | 
62 | <style>
63 | 	.content{padding-top: 10upx;}
64 | 	.user-name{line-height: 80upx;margin-left: 30upx;}
65 | 	.uni-icon-clear{color: #ccc;}
66 | 	.confirm{width: 690upx;height: 80upx;line-height: 80upx;margin-top: 28upx;font-size: 28upx;}
67 | 	.confirm,button[disabled]:not([type]){background-color: #89afd6;color: #fff;}
68 | 	.btn-hover{background-color: #5c8abf;}
69 | 	.confirm:after{border: none;}
70 | </style>
71 | 


--------------------------------------------------------------------------------
/common/common.css:
--------------------------------------------------------------------------------
 1 | body{background-color: #f4f5f6;}
 2 | /*清除浮动*/
 3 | .clearfix:after,.clearfix:before{content:""; display:block; clear:both;} /*兼容ie9+*/
 4 | .clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
 5 | 
 6 | .pr{position: relative;}
 7 | .pa{position: absolute;}
 8 | .bor-none{border: none;}
 9 | 
10 | /* 按钮 */
11 | .button{width: 690upx;height: 80upx;line-height: 80upx;margin-top: 28upx;font-size: 28upx;background-color: #89afd6;color: #fff;}
12 | .button-hover{background-color: #5c8abf;}
13 | .button:after{border: none;}
14 | .button[disabled]:not([type]){background-color: #b8cfe6;color: #fff;}
15 | 
16 | .state{color: #999;text-align: center;margin-top: 20upx;}
17 | /* 引入阿里巴巴矢量图icon */
18 | @font-face {
19 | 	font-family: iconfont;
20 | 	font-weight: normal;
21 | 	font-style: normal;
22 | 	src: url('https://at.alicdn.com/t/font_970138_1lwoiloo2y6.ttf') format('truetype');
23 | }
24 | 		
25 | .iconfont {
26 |   font-family: "iconfont";
27 |   font-size: 36upx;
28 |   font-style: normal;
29 |   -webkit-font-smoothing: antialiased;
30 |   -moz-osx-font-smoothing: grayscale;
31 | }
32 | 
33 | 
34 | .icon-liwu:before { content: "\e657"; }
35 | 
36 | .icon-kafei:before { content: "\e6aa"; }
37 | 
38 | .icon-qunfengyijianfankui:before { content: "\e7c4"; }
39 | 
40 | .icon-yijianfankui:before { content: "\e637"; }
41 | 
42 | .icon-qiye:before { content: "\e724"; }
43 | 
44 | .icon-hongbao1:before { content: "\e610"; }
45 | 
46 | .icon-liwu1:before { content: "\e65b"; }
47 | 
48 | .icon-youhuiquan:before { content: "\e69b"; }
49 | 
50 | .icon-yaoqing:before { content: "\e683"; }
51 | 
52 | .icon-xiaoxi:before { content: "\e682"; }
53 | 
54 | .icon-fapiaosel:before { content: "\e623"; }
55 | 
56 | .icon-zhanghuziliao:before { content: "\e6a8"; }
57 | 
58 | .icon-daohanglan-05:before { content: "\e639"; }
59 | 
60 | .icon-zanwuchiyouzhongdingdan:before { content: "\e766"; }
61 | 
62 | .icon-icon-test:before { content: "\e638"; }
63 | 
64 | .icon-dingdan:before { content: "\e608"; }
65 | 
66 | .icon-shouye:before { content: "\e6d9"; }
67 | 
68 | .icon-mn_yonghuziliao_fill:before { content: "\e600"; }
69 | 
70 | .icon-coffee:before { content: "\e622"; }
71 | 
72 | .icon-youhuiquan1:before { content: "\e61f"; }
73 | 
74 | .icon-qianbao:before { content: "\e60f"; }


--------------------------------------------------------------------------------
/pages/mine/address/list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="state" v-show="addressList.length == 0">您还没有地址信息</view>
 4 | 		<view class="address-item" v-show="addressList.length !== 0" v-for="(item,index) in addressList" :key="index">
 5 | 			<view class="address-title">{{item.address}}</view>
 6 | 			<view class="address-footer">
 7 | 				<view v-if="item.addressType !== ''" class="addressType">{{item.addressType}}</view>
 8 | 				<text class="phone">{{item.phone}}</text>
 9 | 				<text>{{item.linkman}}{{item.sex}}</text>
10 | 			</view>
11 | 			<view class="uni-icon uni-icon-compose" @tap="go('edit?data='+index)"></view>
12 | 		</view>
13 | 		<button class="add-address" hover-class="btn-hover" @tap="go('add')">
14 | 			<view class="uni-icon uni-icon-plusempty"></view>
15 | 			添加地址
16 | 		</button>
17 | 	</view>
18 | </template>
19 | 
20 | <script>
21 | 	import {
22 | 		mapState,
23 | 		mapMutations
24 | 	} from 'vuex'
25 | 	export default {
26 | 		computed: {
27 | 			...mapState(['addressList'])
28 | 		},
29 | 		data() {
30 | 			return {
31 | 				
32 | 			}
33 | 		},
34 | 		onLoad() {
35 | 			// console.log(this.addressList)
36 | 		},
37 | 		methods: {
38 | 			go(url) {
39 | 				uni.navigateTo({
40 | 					url: url
41 | 				})
42 | 			},
43 | 		}
44 | 	}
45 | </script>
46 | 
47 | <style>
48 | 	.state{padding-top: 30%;color: #999;text-align: center;}
49 | 	.uni-icon-plusempty{line-height: 80upx;vertical-align: top;font-size: 44upx;}
50 | 	.add-address{width: 690upx;height: 80upx;line-height: 80upx;margin-top: 28upx;font-size: 28upx;background-color: #89afd6;color: #fff;position: fixed;bottom: 20upx;left: 30upx;}
51 | 	.btn-hover{background-color: #5c8abf;}
52 | 	.add-address:after{border: none;}
53 | 	.address-item{background-color: #fff;padding: 20upx 84upx 20upx 30upx;border-top: 1px solid #ececec;position: relative;}
54 | 	.address-title{line-height: 40upx;margin-bottom: 14upx;}
55 | 	.address-footer{display: flex;color: #999;font-size: 24upx;line-height: 32upx;}
56 | 	.addressType{font-size: 24upx;border: 1px solid #74a1ce;color: #74a1ce;border-radius: 8upx;line-height: 32upx;height: 32upx;padding: 0 8upx;margin-right: 14upx;}
57 | 	.phone{margin-right: 20upx;}
58 | 	.uni-icon-compose{color: #d7d7d7;font-size: 64upx;position: absolute;top: 50%;right: 34upx;transform: translateY(-50%);}
59 | </style>
60 | 


--------------------------------------------------------------------------------
/pages/mine/invoice/title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="state" v-show="addressList.length == 0">您还没有发票抬头</view>
 4 | 		<view class="address-item" v-show="addressList.length !== 0" v-for="(item,index) in addressList" :key="index">
 5 | 			<view class="address-title">{{item.address}}</view>
 6 | 			<view class="address-footer">
 7 | 				<view v-if="item.addressType !== ''" class="addressType">{{item.addressType}}</view>
 8 | 				<text class="phone">{{item.phone}}</text>
 9 | 				<text>{{item.linkman}}{{item.sex}}</text>
10 | 			</view>
11 | 			<view class="uni-icon uni-icon-compose" @tap="go('edit?data='+index)"></view>
12 | 		</view>
13 | 		<button class="add-address" hover-class="btn-hover" @tap="go('title-add')">
14 | 			<view class="uni-icon uni-icon-plusempty"></view>
15 | 			添加发票抬头
16 | 		</button>
17 | 	</view>
18 | </template>
19 | 
20 | <script>
21 | 	import {
22 | 		mapState,
23 | 		mapMutations
24 | 	} from 'vuex'
25 | 	export default {
26 | 		computed: {
27 | 			...mapState(['addressList'])
28 | 		},
29 | 		data() {
30 | 			return {
31 | 				
32 | 			}
33 | 		},
34 | 		onLoad() {
35 | 			// console.log(this.addressList)
36 | 		},
37 | 		methods: {
38 | 			go(url) {
39 | 				uni.navigateTo({
40 | 					url: url
41 | 				})
42 | 			},
43 | 		}
44 | 	}
45 | </script>
46 | 
47 | <style>
48 | 	.state{padding-top: 30%;color: #999;text-align: center;}
49 | 	.uni-icon-plusempty{line-height: 80upx;vertical-align: top;font-size: 44upx;}
50 | 	.add-address{width: 690upx;height: 80upx;line-height: 80upx;margin-top: 28upx;font-size: 28upx;background-color: #89afd6;color: #fff;position: fixed;bottom: 20upx;left: 30upx;}
51 | 	.btn-hover{background-color: #5c8abf;}
52 | 	.add-address:after{border: none;}
53 | 	.address-item{background-color: #fff;padding: 20upx 84upx 20upx 30upx;border-top: 1px solid #ececec;position: relative;}
54 | 	.address-title{line-height: 40upx;margin-bottom: 14upx;}
55 | 	.address-footer{display: flex;color: #999;font-size: 24upx;line-height: 32upx;}
56 | 	.addressType{font-size: 24upx;border: 1px solid #74a1ce;color: #74a1ce;border-radius: 8upx;line-height: 32upx;height: 32upx;padding: 0 8upx;margin-right: 14upx;}
57 | 	.phone{margin-right: 20upx;}
58 | 	.uni-icon-compose{color: #d7d7d7;font-size: 64upx;position: absolute;top: 50%;right: 34upx;transform: translateY(-50%);}
59 | </style>
60 | 


--------------------------------------------------------------------------------
/components/uni-popup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		<view class="uni-mask" v-show="show" :style="{top:offsetTop + 'px'}" @tap="hide"></view>
 4 | 		<view :class="['uni-popup','uni-popup-'+type]" v-show="show">
 5 | 			<view class="popup-item" :class="index == 0? 'popup-item-first' : ''" v-for="(item,index) in msg" :key="index" @tap="go(item.url)">{{item.name}}</view>
 6 | 			<view class="popup-cancel" @tap="hide">取消</view>
 7 | 		</view>
 8 | 	</view>
 9 | </template>
10 | 
11 | <script>
12 | 	export default {
13 | 		props: {
14 | 			show: {
15 | 				type: Boolean,
16 | 				default: false
17 | 			},
18 | 			type: {
19 | 				type: String,
20 | 				//top - 顶部， middle - 居中, bottom - 底部
21 | 				default: 'middle'
22 | 			},
23 | 			msg: {
24 | 				default: ""
25 | 			}
26 | 		},
27 | 		data() {
28 | 			let offsetTop = 0;
29 | 			//#ifdef H5
30 | 			offsetTop = 44;
31 | 			//#endif
32 | 			return {
33 | 				offsetTop: offsetTop
34 | 			}
35 | 		},
36 | 		methods: {
37 | 			hide: function() {
38 | 				this.$emit('hidePopup');
39 | 			},
40 | 			go(url) {
41 | 				uni.navigateTo({
42 | 					url: url
43 | 				})
44 | 			}
45 | 		}
46 | 	}
47 | </script>
48 | <style>
49 | 	.uni-mask {
50 | 		position: fixed;
51 | 		z-index: 998;
52 | 		top: 0;
53 | 		right: 0;
54 | 		bottom: 0;
55 | 		left: 0;
56 | 		background-color: rgba(0, 0, 0, .3);
57 | 	}
58 | 
59 | 	.uni-popup {
60 | 		position: fixed;
61 | 		z-index: 999;
62 | 		background-color: #f4f5f6;
63 | 		box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
64 | 	}
65 | 
66 | 	.uni-popup-middle {
67 | 		display: flex;
68 | 		flex-direction: column;
69 | 		align-items: center;
70 | 		width: 380upx;
71 | 		height: 380upx;
72 | 		border-radius: 10upx;
73 | 		top: 50%;
74 | 		left: 50%;
75 | 		transform: translate(-50%, -50%);
76 | 		justify-content: center;
77 | 		padding: 30upx;
78 | 	}
79 | 
80 | 	.uni-popup-top {
81 | 		top: 0;
82 | 		left: 0;
83 | 		width: 100%;
84 | 		height: 100upx;
85 | 		line-height: 100upx;
86 | 		text-align: center;
87 | 	}
88 | 
89 | 	.uni-popup-bottom {
90 | 		left: 0;
91 | 		bottom: 0;
92 | 		width: 100%;
93 | 		text-align: center;
94 | 	}
95 | 	.popup-item{line-height: 100upx;background-color: #fff;border-top: 1px solid #e6e6e6;font-size: 32upx;}
96 | 	.popup-item-first{border: none;}
97 | 	.popup-cancel{margin-top: 20upx;line-height: 100upx;background-color: #fff;font-size: 32upx;}
98 | </style>
99 | 


--------------------------------------------------------------------------------
/pages/mine/invoice/open.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="tab">
 4 | 			<view class="tab-li" :class="[activeIndex == index ? 'active' : '']" v-for="(t,index) in tab" :key="t" @tap="changeTab(index)">{{t}}</view>
 5 | 		</view>
 6 | 		<view class="state" v-if="list == ''">目前无可开票信息</view>
 7 | 		<view class="list">
 8 | 			<view class="list-cell" hover-class="list-hover" v-for="(item,index) in list" :key="index" @tap="go('open-info')">
 9 | 				<view class="navigate-right">
10 | 					<view><text class="list-label">开票金额：</text>￥{{item.money}}</view>
11 | 					<view><text class="list-label">订单号：</text>{{item.orderID}}</view>
12 | 					<view><text class="list-label">下单时间：</text>{{item.orderTime}}</view>
13 | 				</view>
14 | 			</view>
15 | 		</view>
16 | 	</view>
17 | </template>
18 | 
19 | <script>
20 | 	export default {
21 | 		data() {
22 | 			return {
23 | 				tab: ['按订单开票','咖啡钱包购买开票'],
24 | 				activeIndex: 0,
25 | 				isActive: true,
26 | 				list: [],
27 | 				orderList: [
28 | 					{
29 | 						money: 6,
30 | 						orderID: 32275744044503,
31 | 						orderTime: '2018-12-20 16:17'
32 | 					}
33 | 				],
34 | 				walletList: [],
35 | 			}
36 | 			
37 | 		},
38 | 		onLoad() {
39 | 			this.list = this.orderList;
40 | 		},
41 | 		onNavigationBarButtonTap(e) {
42 | 			uni.navigateTo({
43 | 				url: 'explain'
44 | 			})
45 | 		},
46 | 		methods: {
47 | 			changeTab(index) {
48 | 				this.activeIndex = index;
49 | 				if(index == 0){
50 | 					this.list = this.orderList;
51 | 				}else if(index == 1){
52 | 					this.list = this.walletList;
53 | 				}
54 | 			},
55 | 			go(url) {
56 | 				uni.navigateTo({
57 | 					url: url
58 | 				})
59 | 			},
60 | 		}
61 | 	}
62 | </script>
63 | 
64 | <style>
65 | 	.tab{display: flex;text-align: center;background: #fff;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;color: #666;}
66 | 	.tab-li{flex-grow: 1;height: 100upx;line-height: 100upx;border-left: 1px solid #f0f0f0;width: 50%;}
67 | 	.tab-li:first-child{border: none;}
68 | 	.tab-li.active{color: #5c8abf;}
69 | 	.list{background-color: #fff;}
70 | 	.list-cell{padding: 20upx 30upx;position: relative;border-bottom: 1px solid #f0f0f0;}
71 | 	.list-label{display: inline-block;width: 140upx;}
72 | 	.navigate-right:after{font-family: uniicons;content: '\E583';position: absolute;right: 12px;top: 50%;color: #bbb;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);font-size: 42upx;}
73 | 	
74 | </style>
75 | 


--------------------------------------------------------------------------------
/pages/login/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content" :style="{height: height}">
 3 | 		<image src="../../static/logo.png" class="logo"></image>
 4 | 		<form @submit="formSubmit" @reset="formReset">
 5 | 			<view class="input-box">
 6 | 				<input id="phone" placeholder="手机号" class="input" maxlength="11" @input="verify"/>
 7 | 			</view>
 8 | 			<view class="input-box">
 9 | 				<input id="password" password placeholder="请输入密码" class="input code-input" @input="verify"/>
10 | 			</view>
11 | 			<button class="button enter" hover-class="button-hover" :disabled="isDisabled" formType="submit"> 确定 </button>
12 | 		</form>
13 | 	</view>
14 | </template>
15 | 
16 | <script>
17 | 	import { mapState,mapMutations } from 'vuex'
18 | 	export default {
19 | 		data() {
20 | 			return {
21 | 				height: "100%",
22 | 				isDisabled: true,
23 | 				mynote: {
24 | 					phone: "",
25 | 					password: ""
26 | 				}
27 | 			}
28 | 		},
29 | 		onLoad() {
30 | 			this.height = uni.getSystemInfoSync().screenHeight-67 +"px";
31 | 		},
32 | 		methods: {
33 | 			...mapMutations(['login','changeUserName']),
34 | 			go(url) {
35 | 				uni.navigateTo({
36 | 					url: url
37 | 				})
38 | 			},
39 | 			login1() {
40 | 				this.login()
41 | 				uni.switchTab({
42 | 					url: '../mine/index'
43 | 				});
44 | 			},
45 | 			formSubmit(e) {
46 | 				if(this.mynote.phone == "admin" && this.mynote.password == 123456){
47 | 					this.login();
48 | 					this.changeUserName(this.mynote.phone);
49 | 					uni.setStorageSync('info',{userName: this.mynote.phone,password: this.mynote.password});
50 | 					uni.switchTab({
51 | 						url: '../mine/index'
52 | 					});
53 | 				}else{
54 | 					uni.showToast({
55 | 						title: "您输入的账号或者密码不正确",
56 | 						icon: 'none'
57 | 					})
58 | 				}
59 | 			},
60 | 			verify(e) {
61 | 				var id = e.currentTarget.id;
62 | 				var ad = this.mynote;
63 | 				var _this = this;
64 | 				for(var key in ad){
65 | 					key == id ? ad[key] = e.detail.value : ad[key];
66 | 					if(ad[key] !== ""){
67 | 						_this.isDisabled = false;
68 | 					}
69 | 					for(var k in ad){
70 | 						if(ad[k] == ""){
71 | 							_this.isDisabled = true
72 | 						}
73 | 					}
74 | 				}
75 | 			}
76 | 		}
77 | 	}
78 | </script>
79 | 
80 | <style>
81 | 	.content{padding: 80upx 80upx 0 80upx;text-align: center;background-color: #fff;box-sizing: border-box;}
82 | 	.logo{width: 180upx;height: 180upx;margin-bottom: 60upx;}
83 | 	.input-box{height: 94upx;background: #fff;border-bottom: 1px solid #f0f0f0;margin-bottom: 50upx;text-align: left;}
84 | 	.input{width: 100%;height: 94upx;font-size: 30upx;float: left;line-height: 94upx;}
85 | 	.code{float: left;border-left: 1px solid #bebebe;line-height: 34upx;padding-left: 30upx;margin-top: 30upx;}
86 | 	.code-hover{color: #999;}
87 | 	.code-input{width: 600upx;}
88 | 	.enter{width: 100%;margin-top: 80upx;}
89 | 	.member{padding-top: 120upx;color: #28518c;}
90 | 	.line{color: #d9d9d9;margin: 0 30upx;}
91 | 	.button-hover{opacity: 0.6;}
92 | 	.navigator{display: inline-block;}
93 | </style>
94 | 


--------------------------------------------------------------------------------
/pages/mine/invoice/title-add.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<form @submit="formSubmit" @reset="formReset">
  4 | 			<view class="uni-form-item uni-column" v-for="(item,index) in list" :key="index">
  5 | 				<view class="with-fun">
  6 | 					<view class="label-title">{{item.label}}</view>
  7 | 					<input :id="item.id" class="uni-input" :placeholder="item.plac" @input="input"/>
  8 | 				</view>
  9 | 			</view>
 10 | 			<checkbox-group  name="default" class="default">
 11 | 				<label>
 12 | 					<checkbox value="default" class="checkbox" color="#7ba6d1"/>设为默认抬头发票
 13 | 				</label>
 14 | 			</checkbox-group>
 15 | 			<button class="button save" hover-class="button-hover"  :disabled="isDisabled" formType="submit">保存</button>
 16 | 		</form>
 17 | 	</view>
 18 | </template>
 19 | 
 20 | <script>
 21 | 	export default {
 22 | 		data() {
 23 | 			return {
 24 | 				isDisabled: true,
 25 | 				list: [
 26 | 					{
 27 | 						id: "companyName",
 28 | 						label: "发票抬头",
 29 | 						plac: "请输入公司名称"
 30 | 					},
 31 | 					{
 32 | 						id: "tfn",
 33 | 						label: "纳税人识别号",
 34 | 						plac: "(选填)"
 35 | 					},
 36 | 					{
 37 | 						id: "email",
 38 | 						label: "电子邮箱",
 39 | 						plac: "(必填)"
 40 | 					},
 41 | 					{
 42 | 						id: "regurl",
 43 | 						label: "注册地址",
 44 | 						plac: "(选填)"
 45 | 					},
 46 | 					{
 47 | 						id: "regphone",
 48 | 						label: "注册电话",
 49 | 						plac: "(选填)"
 50 | 					},
 51 | 					{
 52 | 						id: "bankName",
 53 | 						label: "开户银行",
 54 | 						plac: "(选填)"
 55 | 					},
 56 | 					{
 57 | 						id: "bankAccount",
 58 | 						label: "银行账号",
 59 | 						plac: "(选填)"
 60 | 					},
 61 | 				],
 62 | 				required: {
 63 | 					companyName: "",
 64 | 					email: ""
 65 | 				}
 66 | 			}
 67 | 		},
 68 | 		onLoad() {
 69 | 			
 70 | 		},
 71 | 		methods: {
 72 | 			formSubmit(e) {
 73 | 				console.log(e.detail.value)
 74 | 			},
 75 | 			input(e) {
 76 | 				var id = e.currentTarget.id;
 77 | 				var ad = this.required;
 78 | 				var _this = this;
 79 | 				for(var key in ad){
 80 | 					key == id ? ad[key] = e.detail.value : ad[key];
 81 | 					if(ad[key] !== ""){
 82 | 						_this.isDisabled = false;
 83 | 					}
 84 | 					for(var k in ad){
 85 | 						if(ad[k] == ""){
 86 | 							_this.isDisabled = true
 87 | 						}
 88 | 					}
 89 | 				}
 90 | 			}
 91 | 		}
 92 | 	}
 93 | </script>
 94 | 
 95 | <style>
 96 | 	.content{border-top: 1px solid #efefef;padding-bottom: 100upx;overflow: hidden;}
 97 | 	.uni-form-item{padding: 0;padding-left: 28upx;background-color: #fff;}
 98 | 	.uni-form-item:nth-child(2) .label-title{font-size: 24upx;}
 99 | 	.uni-input{line-height: 90upx;padding: 20upx 28upx;}
100 | 	.with-fun{line-height: 90upx;border-bottom: 1px solid #efefef;}
101 | 	.label-title{width: 150upx;line-height: 90upx;}
102 | 	.radio-group{width: auto;padding-left: 28upx;}
103 | 	.radio{margin-right: 10upx;}
104 | 	.save{position: absolute;bottom: 20upx;left: 30upx;z-index: 111;}
105 | 	.default{line-height: 32upx;color: #4d4d4d;margin: 23upx 0 0 28upx;}
106 | 	.radio-label{margin-right: 100upx;line-height: 90upx;}
107 | </style>
108 | 


--------------------------------------------------------------------------------
/pages/mine/invoice/open-info.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<form @submit="formSubmit" @reset="formReset">
 4 | 			<view class="uni-form-item uni-column">
 5 | 				<view class="with-fun">
 6 | 					<view class="label-title">发票类型</view>
 7 | 					<view class="form-right">电子发票</view>
 8 | 				</view>
 9 | 			</view>
10 | 			<view class="uni-form-item uni-column">
11 | 				<view class="with-fun">
12 | 					<view class="label-title">发票金额</view>
13 | 					<view class="form-right">￥6</view>
14 | 				</view>
15 | 			</view>
16 | 			<view class="uni-form-item uni-column">
17 | 				<view class="with-fun">
18 | 					<view class="label-title">开票方式</view>
19 | 					<radio-group name="openType" class="radio-group">
20 | 						<label class="radio-label"><radio value="type" class="radio" checked color="#94b7da"/>商品类别</label>
21 | 						<label class="radio-label"><radio value="detail" class="radio" color="#94b7da"/>商品明细</label>
22 | 					</radio-group>
23 | 				</view>
24 | 			</view>
25 | 			<view class="uni-form-item uni-column">
26 | 				<view class="with-fun">
27 | 					<view class="label-title">发票抬头</view>
28 | 					<radio-group name="titleType" class="radio-group">
29 | 						<label class="radio-label"><radio value="1" class="radio" checked color="#94b7da"/>个人</label>
30 | 						<label class="radio-label"><radio value="2" class="radio" color="#94b7da"/>单位</label>
31 | 					</radio-group>
32 | 				</view>
33 | 			</view>
34 | 			<view class="uni-form-item uni-column">
35 | 				<view class="with-fun">
36 | 					<view class="label-title">邮箱地址</view>
37 | 					<input class="uni-input" name="email" placeholder="请输入邮箱地址" @input="input"/>
38 | 				</view>
39 | 			</view>
40 | 			<view class="tips">
41 | 				<view>温馨提示：</view>
42 | 				<view>
43 | 					应国家税务总局要求，您若开具增值税普通发票，须同时提供企业抬头及纳税人识别号，否则发票将无法用于企业报销
44 | 				</view>
45 | 			</view>
46 | 			<button class="button save" hover-class="button-hover"  :disabled="isDisabled" formType="submit">提交申请</button>
47 | 		</form>
48 | 	</view>
49 | </template>
50 | 
51 | <script>
52 | 	export default {
53 | 		data() {
54 | 			return {
55 | 				isDisabled: true
56 | 			}
57 | 		},
58 | 		onLoad() {
59 | 			
60 | 		},
61 | 		methods: {
62 | 			formSubmit(e) {
63 | 				console.log(e.detail.value)
64 | 			},
65 | 			input(e) {
66 | 				if(e.detail.value == ''){
67 | 					this.isDisabled = true;
68 | 				}else{
69 | 					this.isDisabled = false;
70 | 				}
71 | 			}
72 | 		}
73 | 	}
74 | </script>
75 | 
76 | <style>
77 | 	.content{border-top: 1px solid #efefef;padding-bottom: 100upx;overflow: hidden;}
78 | 	.uni-form-item{padding: 0;padding-left: 28upx;background-color: #fff;}
79 | 	.uni-input{line-height: 90upx;padding: 20upx 28upx;}
80 | 	.with-fun{line-height: 90upx;border-bottom: 1px solid #efefef;}
81 | 	.label-title{width: 150upx;line-height: 90upx;}
82 | 	.radio-group{width: auto;padding-left: 28upx;}
83 | 	.radio{margin-right: 10upx;}
84 | 	.save{position: absolute;bottom: 20upx;left: 30upx;z-index: 111;}
85 | 	.tag-group{display: flex;color: #4a4a4a;padding: 20upx 28upx;}
86 | 	.tab{width: 120upx;height: 50upx;line-height: 50upx;text-align: center;border: 1px solid #e9e9e9;border-radius: 30upx;margin-right: 20upx;}
87 | 	.active{border: 1px solid #7ba6d1;background-color: #94b7da;color: #fff;}
88 | 	.default-address{line-height: 32upx;color: #4d4d4d;margin: 23upx 0 0 28upx;}
89 | 	.radio-label{margin-right: 100upx;line-height: 90upx;}
90 | 	.tips{color: #999;font-size: 18upx;padding: 30upx;}
91 | 	.form-right{line-height: 90upx;padding-left: 28upx;}
92 | </style>
93 | 


--------------------------------------------------------------------------------
/pages/order/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<view class="tab-ul">
  4 | 			<view class="pr tab">
  5 | 				<view class="tab-li" :class="[activeIndex == index ? 'active' : '']" v-for="(item,index) in tabUl" :key="index" @tap="tabChange(index)">
  6 | 					<text :id="item.id">{{item.name}}</text>
  7 | 				</view>
  8 | 				<view class="line" :style="{width: lineWidth,left: lineLeft}"></view>
  9 | 			</view>
 10 |         </view>
 11 | 		<view class="tab-content">
 12 | 			<view class="nodata" v-show="order == ''">
 13 | 				<image src="../../static/nodata.png" class="nodata-img" mode="aspectFit"></image>
 14 | 				<view class="state">您还没有订单哦</view>
 15 | 				<button class="nodata-btn" hover-class="btn-hover" @tap="goMenu">去喝一杯</button>
 16 | 			</view>
 17 | 			<!-- <view class="order-list" v-show="order !== ''">
 18 | 				<view class="order-item">
 19 | 					<view class="order-status">
 20 | 						<text>外卖订单：54654646</text>
 21 | 						<text>已完成</text>
 22 | 					</view>
 23 | 					
 24 | 				</view>
 25 | 			</view> -->
 26 | 		</view>
 27 | 	</view>
 28 | </template>
 29 | 
 30 | <script>
 31 | 	export default {
 32 | 		data() {
 33 | 			return {
 34 | 				tabUl: [{
 35 | 					name: "全部",
 36 | 					id: "all"
 37 | 				},{
 38 | 					name: "未完成",
 39 | 					id: "backlog"
 40 | 				},{
 41 | 					name: "已完成",
 42 | 					id: "completed"
 43 | 				}],
 44 | 				order: "",
 45 | 				allOrder: "",
 46 | 				backlog: "",
 47 | 				completed: "",
 48 | 				activeIndex: 0,
 49 | 				lineWidth: "56upx",
 50 | 				lineLeft: "89upx"
 51 | 			}
 52 | 		},
 53 | 		onLoad() {
 54 | 			this.allOrder = this.order;
 55 | 		},
 56 | 		methods: {
 57 | 			async tabChange(index) {
 58 | 				this.activeIndex = index;
 59 | 				if(index == 0){
 60 | 					this.order = this.allOrder;
 61 | 				}else if(index == 1){
 62 | 					this.order = this.backlog;
 63 | 				}else if(index == 2){
 64 | 					this.order = this.completed;
 65 | 				}
 66 | 				var w = await this.getElSize(this.tabUl[index].id);
 67 | 				this.lineLeft = w.left + "px";
 68 | 				this.lineWidth = w.width + "px";
 69 | 			},
 70 | 			getElSize(id) { //得到元素的size
 71 | 				return new Promise((res, rej) => {
 72 | 					uni.createSelectorQuery().select("#" + id).fields({
 73 | 						size: true,
 74 | 						scrollOffset: true,
 75 | 						rect: true
 76 | 					}, (data) => {
 77 | 						res(data);
 78 | 					}).exec();
 79 | 				})
 80 | 			},
 81 | 			goMenu(){
 82 | 				uni.switchTab({
 83 | 					url: '/pages/menu/index'
 84 | 				})
 85 | 			},
 86 | 		}
 87 | 	}
 88 | </script>
 89 | 
 90 | <style>
 91 | 	.content{height: 100%;text-align: center;}
 92 | 	.tab{display: flex;}
 93 | 	.tab-ul{width: 100%;height: 86upx;border-top: 2upx solid #e7e7e7;background-color: #fff;color: #444;position: fixed;top: 0;left: 0;}
 94 | 	// #ifdef H5
 95 | 	.tab-ul{top: 44px;}
 96 | 	// #endif
 97 | 	.line{width: 56upx;height: 6upx;background-color: #7da7d2;position: absolute;bottom: 0;left: 89upx;transition: .2s;}
 98 | 	.tab-li{flex-grow: 1;line-height: 86upx;}
 99 | 	.tab-li.active{color: #74a1cf;}
100 | 	.tab-content{height: 100%;padding-top: 86upx;box-sizing: border-box;}
101 | 	.state{margin: 108upx 0 88upx 0;color: #999;}
102 | 	.nodata{padding-top: 230upx;}
103 | 	.nodata-img{width: 160upx;height: 144upx;}
104 | 	.nodata-btn{border: 1px solid #6999cb;width: 250upx;height: 66upx;color: #6999cb;line-height: 66upx;font-size: 28upx;background: #fff;}
105 | 	.btn-hover{background: #fff;}
106 | 	.nodata-btn:after{border: none;}
107 | </style>
108 | 


--------------------------------------------------------------------------------
/pages/mine/personal/list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<view class="uni-list">
  4 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
  5 | 				<view class="uni-list-cell-navigate uni-navigate-right" @tap="chooseImage">
  6 | 					头像
  7 | 					<image :src="userHeadimg" mode="aspectFill" class="buddha"></image>
  8 | 				</view>
  9 | 			</view>
 10 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="go('change-name')">
 11 | 				<view class="uni-list-cell-navigate uni-navigate-right">
 12 | 					用户名
 13 | 					<view class="edit-text">{{userName}}</view>
 14 | 				</view>
 15 | 			</view>
 16 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="show">
 17 | 				<view class="uni-list-cell-navigate uni-navigate-right">
 18 | 					性别
 19 | 					<view class="edit-text">{{gender}}</view>
 20 | 				</view>
 21 | 			</view>
 22 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
 23 | 				<view class="uni-list-cell-navigate">
 24 | 					绑定手机
 25 | 					<view class="edit-text">18510247960</view>
 26 | 				</view>
 27 | 			</view>
 28 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="go('../address/list')">
 29 | 				<view class="uni-list-cell-navigate uni-navigate-right">
 30 | 					收货地址
 31 | 				</view>
 32 | 			</view>
 33 | 		</view>
 34 | 		<button class="login-out" hover-class="btn-hover" @tap="logout1">退出登录</button>
 35 | 		<view class="mask" v-show="popupShow" :style="{top:offsetTop + 'px'}" @click="hide"></view>
 36 | 		<view class="popup" v-show="popupShow">
 37 | 			<view class="popup-item" @tap="chooseGender('男')">男</view>
 38 | 			<view class="popup-item bor-none" @tap="chooseGender('女')">女</view>
 39 | 			<view class="popup-item popup-cancel" @tap="hide">取消</view>
 40 | 		</view>
 41 | 		
 42 | 	</view>
 43 | </template>
 44 | 
 45 | <script>
 46 | 	import {
 47 | 		mapState,
 48 | 		mapMutations
 49 | 	} from 'vuex'
 50 | 	export default {
 51 | 		computed: {
 52 | 			...mapState(['userHeadimg','userName','gender'])
 53 | 		},
 54 | 		
 55 | 		data() {
 56 | 			let offsetTop = 0;
 57 | 			//#ifdef H5
 58 | 			offsetTop = 44;
 59 | 			//#endif
 60 | 			return {
 61 | 				offsetTop: offsetTop,
 62 | 				popupShow: false
 63 | 			}
 64 | 		},
 65 | 		onLoad() {
 66 | 			// console.log(this.userHeadimg)
 67 | 		},
 68 | 		methods: {
 69 | 			...mapMutations(['changeHeadimg','changeGender','logout']),
 70 | 			chooseImage() {
 71 | 				uni.chooseImage({
 72 | 					sourceType: ['camera','album'],
 73 | 					sizeType: ['compressed'],
 74 | 					count: 1,
 75 | 					success: (res) => {
 76 | 						this.changeHeadimg(res.tempFilePaths);
 77 | 					}
 78 | 				})
 79 | 			},
 80 | 			go(url) {
 81 | 				uni.navigateTo({
 82 | 					url: url
 83 | 				})
 84 | 			},
 85 | 			show(){
 86 | 				this.popupShow = true;
 87 | 			},
 88 | 			hide() {
 89 | 				this.popupShow = false;
 90 | 			},
 91 | 			chooseGender(g) {
 92 | 				this.changeGender(g);
 93 | 				this.popupShow = false;
 94 | 			},
 95 | 			logout1() {
 96 | 				this.logout();
 97 | 				uni.navigateBack();
 98 | 			}
 99 | 		}
100 | 	}
101 | </script>
102 | 
103 | <style>
104 | 	.content{padding-top: 10upx;}
105 | 	.uni-list:before,.uni-list:after{display: none;}
106 | 	.uni-list-cell:after{background-color: #f0f0f0;}
107 | 	.edit-text{float: right;margin-right: 30upx;color: #8d8d8d;}
108 | 	.blue{color: #0A98D5;}
109 | 	.buddha{width: 60upx;height: 60upx;border-radius: 50%;margin-right: 30upx;background-size: cover;}
110 | 	.login-out{width: 690upx;height: 80upx;line-height: 80upx;margin-top: 28upx;color: #fff;background-color: #89afd6;font-size: 28upx;}
111 | 	.btn-hover{background-color: #5c8abf;}
112 | 	.login-out:after{border: none;}
113 | 	
114 | 	.mask{position: fixed;z-index: 998;top: 0;right: 0;left: 0;bottom: 0;background-color: rgba(0, 0, 0, .3);}
115 | 	.popup{position: fixed;z-index: 998;right: 0;left: 0;bottom: 0;box-shadow: 0 0 30upx rgba(0, 0, 0, .1);text-align: center;background-color: #f4f5f6;}
116 | 	.popup-item{line-height: 90upx;background-color: #fff;border-bottom: 1px solid #ececec;font-size: 32upx;}
117 | 	.popup-cancel{margin-top: 20upx;}
118 | </style>
119 | 


--------------------------------------------------------------------------------
/pages/mine/feedback/feedback.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="page">
  3 | 		<view class='feedback-title'>
  4 | 			<text>问题描述</text>
  5 | 		</view>
  6 | 		<view class="feedback-body">
  7 | 			<textarea placeholder="请填写问题描述以便我们提供更好的帮助" v-model="sendDate.content" class="feedback-textare"/>
  8 | 		</view>
  9 |         <view class='feedback-title'>
 10 |             <text>上传图片</text>
 11 |         </view>
 12 |         <view class="feedback-body feedback-uploader">
 13 |             <view class="uni-uploader">
 14 |                 <view class="uni-uploader-head">
 15 |                     <view class="uni-uploader-title">点击预览图片</view>
 16 |                     <view class="uni-uploader-info">{{imageList.length}}/2张</view>
 17 |                 </view>
 18 |                 <view class="uni-uploader-body">
 19 |                     <view class="uni-uploader__files">
 20 |                         <block v-for="(image,index) in imageList" :key="index">
 21 |                             <view class="uni-uploader__file" style="position: relative;">
 22 |                                 <image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
 23 |                                 <view class="close-view" @click="close(index)">x</view>
 24 |                             </view>
 25 |                         </block>
 26 |                         <view class="uni-uploader__input-box" v-show="imageList.length < 2">
 27 |                         	<view class="uni-uploader__input" @tap="chooseImg"></view>
 28 |                         </view>
 29 |                     </view>
 30 |                 </view>
 31 |             </view>
 32 |         </view>
 33 |         <button class="button" @tap="send">提交</button>
 34 |     </view>
 35 | </template>
 36 | 
 37 | <script>
 38 |     export default {
 39 |         data() {
 40 |             return {
 41 |                 imageList: [],
 42 |                 sendDate: {
 43 |                     score: 0,
 44 |                     content: "",
 45 |                     contact: ""
 46 |                 }
 47 |             }
 48 |         },
 49 |         onLoad() {
 50 |             let deviceInfo = {
 51 |                 appid: plus.runtime.appid,
 52 |                 imei: plus.device.imei, //设备标识
 53 |                 p: plus.os.name === "Android" ? "a" : "i", //平台类型，i表示iOS平台，a表示Android平台。
 54 |                 md: plus.device.model, //设备型号
 55 |                 app_version: plus.runtime.version,
 56 |                 plus_version: plus.runtime.innerVersion, //基座版本号
 57 |                 os: plus.os.version,
 58 |                 net: "" + plus.networkinfo.getCurrentType()
 59 |             }
 60 |             this.sendDate = Object.assign(deviceInfo, this.sendDate);
 61 |         },
 62 |         methods: {
 63 |             close(e){
 64 |                 this.imageList.splice(e,1);
 65 |             },
 66 |             chooseImg() { //选择图片
 67 |                 uni.chooseImage({
 68 |                     sourceType: ["camera", "album"],
 69 |                     sizeType: "compressed",
 70 |                     count: 2 - this.imageList.length,
 71 |                     success: (res) => {
 72 |                         this.imageList = this.imageList.concat(res.tempFilePaths);
 73 |                     }
 74 |                 })
 75 |             },
 76 |             chooseStar(e) { //点击评星
 77 |                 this.sendDate.score = e;
 78 |             },
 79 |             previewImage() { //预览图片
 80 |                 uni.previewImage({
 81 |                     urls: this.imageList
 82 |                 });
 83 |             },
 84 |             send() { //发送反馈
 85 |                 console.log(JSON.stringify(this.sendDate));
 86 |             }
 87 |         }
 88 |     }
 89 | </script>
 90 | 
 91 | <style>
 92 |     page {
 93 |         background-color: #EFEFF4;
 94 |     }
 95 | 
 96 |     .input-view {
 97 |         font-size: 28upx;
 98 |     }
 99 |     .close-view{
100 |         text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
101 |     }
102 | 	.button{position: absolute;bottom: 20upx;left: 30upx;z-index: 111;}
103 | 	.feedback-textare{font-size: 28upx;}
104 | </style>
105 | 


--------------------------------------------------------------------------------
/pages/mine/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<view class="info">
  4 | 			<view class="per" v-show="!hasLogin" @tap="go('/pages/login/login')">
  5 | 				<view class="buddha" :style="{backgroundImage: 'url(../../static/noData.png)'}"></view>
  6 | 				<view class="nickname">立即登录</view>
  7 | 			</view>
  8 | 			<view class="per" v-show="hasLogin" @tap="go('personal/list')">
  9 | 				<view class="buddha" :style="{backgroundImage: 'url('+userHeadimg+')'}"></view>
 10 | 				<view class="nickname">{{userName}}</view>
 11 | 			</view>
 12 | 			<view class="message iconfont icon-xiaoxi" v-show="!hasLogin" @tap="go('/pages/login/login')"></view>
 13 | 			<view class="message iconfont icon-xiaoxi" v-show="hasLogin" @tap="go('message')"></view>
 14 | 		</view>
 15 | 		<view class="uni-list" v-show="!hasLogin" @tap="go('/pages/login/login')">
 16 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
 17 | 				<view class="list-icon iconfont" :class="item.iconName"></view>
 18 | 				<view class="uni-list-cell-navigate uni-navigate-right">
 19 | 					{{item.name}}
 20 | 				</view>
 21 | 			</view>
 22 | 		</view>
 23 | 		<view class="uni-list" v-show="hasLogin">
 24 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index" @tap="go(item.url)">
 25 | 				<view class="list-icon iconfont" :class="item.iconName"></view>
 26 | 				<view class="uni-list-cell-navigate uni-navigate-right">
 27 | 					{{item.name}}
 28 | 				</view>
 29 | 			</view>
 30 | 		</view>
 31 | 		<view class="uni-list">
 32 | 			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="go('feedback/list')">
 33 | 				<view class="list-icon iconfont icon-yijianfankui"></view>
 34 | 				<view class="uni-list-cell-navigate uni-navigate-right">
 35 | 					帮助反馈
 36 | 				</view>
 37 | 			</view>
 38 | 		</view>
 39 | 	</view>
 40 | </template>
 41 | 
 42 | <script>
 43 | 	import {
 44 | 		mapState,
 45 | 		mapMutations
 46 | 	} from 'vuex'
 47 | 	import uniIcon from "@/components/uni-icon.vue"
 48 | 	export default {
 49 | 		components: {
 50 | 			uniIcon
 51 | 		},
 52 | 		computed: mapState(['hasLogin','userHeadimg','userName']),
 53 | 		data() {
 54 | 			return {
 55 | 				list: [
 56 | 					{
 57 | 						name: "个人资料",
 58 | 						url: "personal/list",
 59 | 						iconName: "icon-mn_yonghuziliao_fill"
 60 | 					},
 61 | 					{
 62 | 						name: "咖啡钱包",
 63 | 						url: "wallet/index",
 64 | 						iconName: "icon-kafei"
 65 | 					},
 66 | 					{
 67 | 						name: "优惠券",
 68 | 						url: "coupon/index",
 69 | 						iconName: "icon-youhuiquan"
 70 | 					},
 71 | 					{
 72 | 						name: "兑换优惠",
 73 | 						url: "cash/index",
 74 | 						iconName: "icon-youhuiquan1"
 75 | 					},
 76 | 					{
 77 | 						name: "发票管理",
 78 | 						url: "invoice/index",
 79 | 						iconName: "icon-fapiaosel"
 80 | 					}
 81 | 				]
 82 | 			}
 83 | 		},
 84 | 		onLoad() {
 85 | 			var info = uni.getStorageSync('info');
 86 | 			if(info){
 87 | 				 this.login();
 88 | 				 this.changeUserName(info.userName);
 89 | 			}
 90 | 		},
 91 | 		methods: {
 92 | 			...mapMutations(['login','changeUserName']),
 93 | 			go(url) {
 94 | 				uni.navigateTo({
 95 | 					url: url
 96 | 				})
 97 | 			},
 98 | 			t() {
 99 | 				this.login()
100 | 			}
101 | 		}
102 | 	}
103 | </script>
104 | 
105 | <style>
106 | 	.uni-list{margin-bottom: 20upx;color: #5b5b5b;}
107 | 	.uni-list:before,.uni-list:after{display: none;}
108 | 	.uni-list-cell:after{background-color: #f0f0f0;left: 96upx;}
109 | 	.uni-list-cell-navigate{padding: 22upx 30upx 22upx 0;}
110 | 	.info{background: #663333;height: 260upx;overflow: hidden;;color: #fff;}
111 | 	.per{padding: 0 38upx;position: relative;display: flex;margin-top: 100upx;}
112 | 	.buddha{width: 106upx;height: 106upx;border-radius: 50%;background-size: cover;background-position: center;}
113 | 	.num{font-size: 34upx;font-weight: 700;line-height: 30upx;}
114 | 	.nickname{margin-left: 20upx;font-size: 36upx;line-height: 106upx;}
115 | 	.nickname:after{font-family: uniicons;content: '\e470';position: absolute;right: 29upx;top: 50%;color: #bbb;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);font-size: 54upx;}
116 | 	.message{position: absolute;top: 36upx;right: 36upx;font-size: 44upx;}
117 | 	.list-icon{color: #cbcbcb;margin-right: 10upx;width: 87upx;text-align: center;}
118 | </style>
119 | 


--------------------------------------------------------------------------------
/pages/cart/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<view class="nodata" v-if="order.length < 1">
  4 | 			<image src="../../static/cart-nodata.png" class="nodata-img" mode="aspectFit"></image>
  5 | 			<view class="state">您的购物车有点寂寞</view>
  6 | 			<button class="nodata-btn" hover-class="btn-hover" @tap="goMenu">去喝一杯</button>
  7 | 		</view>
  8 | 		<scroll-view scroll-y class="scroll">
  9 | 			<view class="cart-list" v-show="order.length > 0">
 10 | 				<view class="cart-item" v-for="(item,index) in order" :key="index">
 11 | 					<checkbox-group name="checkbox" class="cart-checkbox">
 12 | 						<checkbox value="checkbox1" :checked="item.isChecked" />
 13 | 					</checkbox-group>
 14 | 					<view class="cart-info">
 15 | 						<view class="cart-title">{{item.title}}</view>
 16 | 						<view class="cart-type">{{item.type}}</view>
 17 | 						<view class="cart-hint">仅限打包带走</view>
 18 | 					</view>
 19 | 					<view class="numbox">
 20 | 						<view class="cart-price">￥{{item.price}}</view>
 21 | 						<view class="numbox-minus uni-icon uni-icon-minus" @tap="minus(index)"></view>
 22 | 						<view class="numbox-value">{{item.num}}</view>
 23 | 						<view class="numbox-plus uni-icon uni-icon-plus-filled" @tap="plus(index)"></view>
 24 | 					</view>
 25 | 				</view>
 26 | 			</view>
 27 | 		</scroll-view>
 28 | 		<view class="cart-footer" v-show="order.length > 0">
 29 | 			<view class="total-price-box">
 30 | 				应付合计<text class="total-price">￥{{total}}</text>
 31 | 			</view>
 32 | 			<button class="clear button">去结算</button>
 33 | 		</view>
 34 | 	</view>
 35 | </template>
 36 | 
 37 | <script>
 38 | 	import {
 39 | 		mapState,
 40 | 		mapMutations
 41 | 	} from 'vuex'
 42 | 	export default {
 43 | 		data() {
 44 | 			return {
 45 | 				order: [],
 46 | 				num: 1,
 47 | 				height: '100%'
 48 | 			}
 49 | 		},
 50 | 		computed: {
 51 | 			...mapState(['cartList','total'])
 52 | 		},
 53 | 		onLoad() {
 54 | 			this.order = this.cartList;
 55 | 			var h = uni.getSystemInfoSync().windowHeight - 100;
 56 | 		},
 57 | 		methods: {
 58 | 			...mapMutations(['removeCart','calcTotal']),
 59 | 			goMenu(){
 60 | 				uni.switchTab({
 61 | 					url: '/pages/menu/index'
 62 | 				})
 63 | 			},
 64 | 			minus(i) {
 65 | 				if(this.order[i].num >1){
 66 | 					this.order[i].num -- ;
 67 | 				}else{
 68 | 					this.order[i].num = 1;
 69 | 					var _this = this;
 70 | 					uni.showModal({
 71 | 						content: '确认不要了吗？',
 72 | 						success: function (res) {
 73 | 							if (res.confirm) {
 74 | 								_this.removeCart(i)
 75 | 							}
 76 | 						}
 77 | 					});
 78 | 				}
 79 | 				this.calcTotal(this.order)
 80 | 			},
 81 | 			plus(i) {
 82 | 				this.order[i].num ++;
 83 | 				this.calcTotal(this.order);
 84 | 			}
 85 | 		}
 86 | 	}
 87 | </script>
 88 | 
 89 | <style>
 90 | 	.content{text-align: center;border-top: 1px solid #f0f0f0;}
 91 | 	.state{margin: 40upx 0 60upx 0;color: #999;}
 92 | 	.nodata{padding-top: 200upx;}
 93 | 	.nodata-img{width: 160upx;height: 144upx;}
 94 | 	.nodata-btn{border: 1px solid #6999cb;width: 200upx;height: 66upx;color: #6999cb;line-height: 66upx;font-size: 28upx;background: #fff;box-shadow: 0px 2px 6px #999;}
 95 | 	.btn-hover{background: #fff;}
 96 | 	.scroll{padding-bottom: 100upx;}
 97 | 	.cart-list{background-color: #fff;}
 98 | 	.cart-item{display: flex;padding: 26upx 24upx 24upx 0;border-bottom: 1px solid #f0f0f0;}
 99 | 	.cart-checkbox{width: 44upx;text-align: center;margin: 0 22upx 0 30upx;}
100 | 	.cart-checkbox .uni-checkbox-input{margin: 0;}
101 | 	.cart-info{flex-grow: 2;text-align: left;padding-left: 15upx;}
102 | 	.cart-title{font-weight: 700;font-size: 32upx;line-height: 32upx;margin-bottom: 14upx;}
103 | 	.cart-type,.cart-hint{font-size: 20upx;line-height: 20upx;}
104 | 	.cart-type{color: #666;margin-bottom: 8upx;}
105 | 	.cart-hint{color: #88afd6;}
106 | 	.cart-price{margin-right: 10upx;font-weight: 700;}
107 | 	.numbox{display: flex;}
108 | 	.numbox-minus,.numbox-plus{font-size: 56upx;}
109 | 	.numbox-minus{color: #91b5d9;background-color: #fff;}
110 | 	.numbox-value{margin: 0 16upx;color: #91b5d9;font-weight: 700;min-width: 20upx;}
111 | 	.numbox-plus{color: #fff;color: #91b5d9;}
112 | 	.cart-checkbox,.numbox-minus,.numbox-plus,.numbox-value,.cart-price{line-height: 100upx;}
113 | 	.cart-footer{display: flex;width: 100%;justify-content: space-between;height: 100upx;background-color: #fff;position: fixed;bottom: 0;left: 0;border-top: 1px solid #f0f0f0;}
114 | 	.total-price-box{flex-grow: 2;text-align: left;line-height: 100upx;padding-left: 20upx;}
115 | 	.total-price{font-size: 48upx;font-weight: 700;}
116 | 	.clear{width: 200upx;height: 100upx;line-height: 100upx;border-radius: 0;margin: 0;}
117 | 	/* #ifdef H5 */
118 | 	.cart-footer{bottom: 50px;}
119 | 	/* #endif */
120 | </style>
121 | 


--------------------------------------------------------------------------------
/pages/mine/address/add.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<form @submit="formSubmit" @reset="formReset">
  4 | 			<view class="uni-form-item uni-column">
  5 | 				<view class="with-fun">
  6 | 					<view class="label-title">联系人</view>
  7 | 					<input id="linkman" class="uni-input" name="linkman" placeholder="用于取餐时对您的称呼" @input="input"/>
  8 | 				</view>
  9 | 			</view>
 10 | 			<view class="uni-form-item uni-column">
 11 | 				<view class="with-fun">
 12 | 					<view class="label-title">性别</view>
 13 | 					<radio-group name="sex" class="radio-group">
 14 | 						<label class="radio-label"><radio value="先生" class="radio" :checked="sexChecked" color="#94b7da"/>先生</label>
 15 | 						<label class="radio-label"><radio value="女士" class="radio" :checked="!sexChecked" color="#94b7da"/>女士</label>
 16 | 					</radio-group>
 17 | 				</view>
 18 | 			</view>
 19 | 			<view class="uni-form-item uni-column">
 20 | 				<view class="with-fun">
 21 | 					<view class="label-title">手机号码</view>
 22 | 					<input id="phone" class="uni-input" name="phone" maxlength="11" placeholder="联系人电话" @input="input"/>
 23 | 				</view>
 24 | 			</view>
 25 | 			<view class="uni-form-item uni-column">
 26 | 				<view class="with-fun">
 27 | 					<view class="label-title">收货地址</view>
 28 | 					<input id="address" class="uni-input" name="address" placeholder="请选择您的地址" @input="input"/>
 29 | 				</view>
 30 | 			</view>
 31 | 			<view class="uni-form-item uni-column">
 32 | 				<view class="with-fun">
 33 | 					<view class="label-title">门牌号</view>
 34 | 					<input id="tower" class="uni-input" name="tower" placeholder="例: 5号楼203室" @input="input"/>
 35 | 				</view>
 36 | 			</view>
 37 | 			<view class="uni-form-item uni-column">
 38 | 				<view class="with-fun">
 39 | 					<view class="label-title">标签</view>
 40 | 					<view class="tag-group">
 41 | 						<view class="tab" :class="[activeIndex == index ? 'active' : '']" v-for="(item,index) in tag" :key="index"  @tap="tagChange(index)">{{item}}</view>
 42 | 					</view>
 43 | 				</view>
 44 | 			</view>
 45 | 			<checkbox-group  name="default" class="default-address">
 46 | 				<label>
 47 | 					<checkbox value="default" class="checkbox" color="#7ba6d1"/>设为默认地址
 48 | 				</label>
 49 | 			</checkbox-group>
 50 | 			<button class="button save" hover-class="button-hover"  :disabled="isDisabled" formType="submit">保存</button>
 51 | 		</form>
 52 | 	</view>
 53 | </template>
 54 | 
 55 | <script>
 56 | 	import {
 57 | 		mapState,
 58 | 		mapMutations
 59 | 	} from 'vuex'
 60 | 	export default {
 61 | 		computed: {
 62 | 			...mapState(['gender'])
 63 | 		},
 64 | 		data() {
 65 | 			return {
 66 | 				sexChecked: true,
 67 | 				tag: ['公司','家','学校'],
 68 | 				activeIndex: -1,
 69 | 				addressData: {
 70 | 					linkman: "",
 71 | 					phone: "",
 72 | 					address:"",
 73 | 					tower: ""
 74 | 				},
 75 | 				isDisabled: true
 76 | 			}
 77 | 		},
 78 | 		onLoad() {
 79 | 			this.gender == "男" ? this.sexChecked = true : this.sexChecked = false;
 80 | 		},
 81 | 		methods: {
 82 | 			...mapMutations(['changeAddress']),
 83 | 			tagChange(index) {
 84 | 				this.activeIndex = index;
 85 | 			},
 86 | 			formSubmit(e) {
 87 | 				var _this = this;
 88 | 				var i = this.activeIndex;
 89 | 				var d = e.detail.value;
 90 | 				var thisTag;
 91 | 				i == -1 ? thisTag = "" : thisTag = _this.tag[i];
 92 | 				this.addressData = {
 93 | 					linkman: d.linkman,
 94 | 					sex: d.sex,
 95 | 					phone: d.phone,
 96 | 					address: d.address,
 97 | 					addressType: thisTag,
 98 | 					isDefault: d.default,
 99 | 					tower: d.tower
100 | 				}
101 | 				this.changeAddress(this.addressData);
102 | 				uni.navigateBack();
103 | 			},
104 | 			input(e) {
105 | 				var id = e.currentTarget.id;
106 | 				var ad = this.addressData;
107 | 				var _this = this;
108 | 				for(var key in ad){
109 | 					key == id ? ad[key] = e.detail.value : ad[key];
110 | 					if(ad[key] !== ""){
111 | 						_this.isDisabled = false;
112 | 					}
113 | 					for(var k in ad){
114 | 						if(ad[k] == ""){
115 | 							_this.isDisabled = true
116 | 						}
117 | 					}
118 | 				}
119 | 			}
120 | 		}
121 | 	}
122 | </script>
123 | 
124 | <style>
125 | 	.content{border-top: 1px solid #efefef;padding-bottom: 100upx;overflow: hidden;}
126 | 	.uni-form-item{padding: 0;padding-left: 28upx;background-color: #fff;}
127 | 	.uni-input{line-height: 90upx;padding: 20upx 28upx;}
128 | 	.with-fun{line-height: 90upx;border-bottom: 1px solid #efefef;}
129 | 	.label-title{width: 150upx;line-height: 90upx;}
130 | 	.radio-group{width: auto;padding-left: 28upx;}
131 | 	.radio{margin-right: 10upx;}
132 | 	.save{position: absolute;bottom: 20upx;left: 30upx;z-index: 111;}
133 | 	.tag-group{display: flex;color: #4a4a4a;padding: 20upx 28upx;}
134 | 	.tab{width: 120upx;height: 50upx;line-height: 50upx;text-align: center;border: 1px solid #e9e9e9;border-radius: 30upx;margin-right: 20upx;}
135 | 	.active{border: 1px solid #7ba6d1;background-color: #94b7da;color: #fff;}
136 | 	.default-address{line-height: 32upx;color: #4d4d4d;margin: 23upx 0 0 28upx;}
137 | 	.radio-label{margin-right: 100upx;line-height: 90upx;}
138 | </style>
139 | 


--------------------------------------------------------------------------------
/pages/home/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<view class="banner">
  4 | 			<swiper :autoplay="autoplay" :indicator-dots="indicatorDots" :interval="interval" :circular="circular" class="swiper-box">
  5 | 				<swiper-item v-for="(item,index) in banner" :key="index">
  6 | 					<image :src="item" class="banner-image"></image>
  7 | 				</swiper-item>
  8 | 			</swiper>
  9 | 			<view class="scan" @tap="scanCode">
 10 | 				<uni-icon type="scan"></uni-icon>
 11 | 			</view>
 12 | 		</view>
 13 | 		<!-- <view class="store">
 14 | 			<view class="store-text">金泰开阳大厦店</view>
 15 | 			<view class="store-distance">距您761m</view>
 16 | 			<view class="store-off">
 17 | 				<view class="store-btn" :class="[storeOff ? 'active' : '']" @tap="store()">自提</view>
 18 | 				<view class="store-btn" :class="[!storeOff ? 'active' : '']" @tap="store()">外卖</view>
 19 | 			</view>
 20 | 		</view> -->
 21 | 		<view class="list">
 22 | 			<view class="list-cell" v-for="(item,index) in listObj" :key="index" @tap="go(item.url)">
 23 | 				<view class="list-text">{{item.liText}} <view class="list-hint" v-show="item.hint">{{item.hint}}</view></view>
 24 | 				<view class="list-en">{{item.liEn}}</view>
 25 | 				<view class="list-right">
 26 | 					<image :src="item.imgurl" class="list-img" mode="aspectFit"></image>
 27 | 				</view>
 28 | 			</view>
 29 | 		</view>
 30 | 	</view>
 31 | </template>
 32 | 
 33 | <script>
 34 | 	import uniIcon from "@/components/uni-icon.vue"
 35 | 	export default {
 36 | 		components: {
 37 | 			uniIcon
 38 | 		},
 39 | 		data() {
 40 | 			return {
 41 | 				banner: [
 42 | 					"https://s2.luckincoffeecdn.com/luckywebrm/images/pimg/about/contact.png",
 43 | 					"https://s2.luckincoffeecdn.com/luckywebrm/images/pimg/about/model.png",
 44 | 					"https://s2.luckincoffeecdn.com/luckywebrm/images/index/cooperation/part5_picture2.png",
 45 | 				],
 46 | 				indicatorDots: true,
 47 | 				autoplay: true,
 48 | 				circular: true,
 49 | 				interval: 2000,
 50 | 				duration: 500.,
 51 | 				storeOff: true,
 52 | 				listObj: [
 53 | 					{
 54 | 						"liText": "现在下单",
 55 | 						"liEn": "ORDER NOW",
 56 | 						"imgurl": "../../static/coffee.png",
 57 | 						"url": "/pages/menu/index"
 58 | 					},
 59 | 					{
 60 | 						"liText": "咖啡钱包",
 61 | 						"liEn": "COFFEE WALLET",
 62 | 						"imgurl": "../../static/wallet.png",
 63 | 						"hint": "充二赠一,充五赠五",
 64 | 						"url": "/pages/mine/wallet/index"
 65 | 					},
 66 | 					{
 67 | 						"liText": "送Ta咖啡",
 68 | 						"liEn": "SEND COFFEE",
 69 | 						"imgurl": "../../static/gift.png",
 70 | 						"url": "/pages/home/presented"
 71 | 					},
 72 | 					{
 73 | 						"liText": "企业账户",
 74 | 						"liEn": "ENTERPRISE ACCOUNT",
 75 | 						"imgurl": "../../static/business.png",
 76 | 						"url": ""
 77 | 					}
 78 | 				]
 79 | 			}
 80 | 		},
 81 | 		onLoad() {
 82 | 
 83 | 		},
 84 | 		methods: {
 85 | 			store() {
 86 | 				this.storeOff = !this.storeOff;
 87 | 			},
 88 | 			scanCode: function () {
 89 | 				var that = this
 90 | 				uni.scanCode({
 91 | 					success: function (res) {
 92 | 						that.result = res.result
 93 | 					},
 94 | 					fail: function (res) {}
 95 | 				})
 96 | 			},
 97 | 			go(url){
 98 | 				if(url == '/pages/menu/index'){
 99 | 					uni.switchTab({
100 | 						url: url
101 | 					})
102 | 				}else{
103 | 					uni.navigateTo({
104 | 						url: url
105 | 					})
106 | 				}
107 | 			}
108 | 		}
109 | 	}
110 | </script>
111 | 
112 | <style>
113 | 	.swiper-box{height: 421upx;}
114 | 	.banner{position: relative;}
115 | 	.banner-image{width: 100%;}
116 | 	.scan{position: absolute;top: 48upx;right: 30upx;width: 80upx;height: 80upx;color: #fff;background: rgba(0,0,0,0.6);line-height: 74upx;text-align: center;border-radius: 50%;padding-top: 10upx;box-sizing: border-box;}
117 | 	.store,.list{background: #fff;}
118 | 	.store{height: 136upx;padding: 36upx 40upx 0 40upx;box-sizing: border-box;position: relative;}
119 | 	.store-off{position: absolute;top: 50%;right: 40upx;width: 182upx;height: 66upx;line-height: 66upx;text-align: center;border: 1px solid #5d92c7;border-radius: 40upx;color: #5d92c7;margin-top: -33upx;padding: 1px;font-size: 24upx;}
120 | 	.store-btn{display: inline-block;width: 50%;line-height: 66upx;}
121 | 	.store-btn.active{color: #fff;background-color: #7ca7d2;border-radius: 40upx;}
122 | 	.store-text,.list-text{line-height: 28upx;font-size: 32upx;}
123 | 	.store-distance,.list-en{font-size: 18upx;color: #5e5e5e;line-height: 18upx;margin-top: 23upx;}
124 | 	.list{padding: 0 40upx;}
125 | 	.list-cell{height: 118upx;border-top: 1px solid #efefef;position: relative;}
126 | 	.list-text{margin-top: 27upx;display: inline-block;}
127 | 	.list-right{position: absolute;top: 50%;right: 50upx;width: 76upx;height: 76upx;line-height: 76upx;text-align: center;border-radius: 50%;border: 1px solid #c6baad;margin-top: -38upx;color: #784f2d;}
128 | 	.list-en{font-size: 16upx;}
129 | 	.list-img{width: 48upx;height: 48upx;margin-top: 12upx;}
130 | 	.list-hint{font-size: 16upx;color: #fff;background-color: #e06e11;padding: 0 4upx;border-radius: 3px;line-height: 24upx;display: inline-block;vertical-align: top;}
131 | </style>
132 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name" : "shop",
 3 |     "appid" : "__UNI__D3EE1B5",
 4 |     "description" : "",
 5 |     "versionName" : "1.0.0",
 6 |     "versionCode" : "100",
 7 |     "transformPx" : false,
 8 |     "app-plus" : {
 9 |         /* 5+App特有相关 */
10 |         "modules" : {},
11 |         /* 模块配置 */
12 |         "distribute" : {
13 |             /* 应用发布信息 */
14 |             "android" : {
15 |                 /* android打包配置 */
16 |                 "permissions" : [
17 |                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
18 |                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
19 |                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
20 |                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
21 |                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
22 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
23 |                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
24 |                     "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
25 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
26 |                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
27 |                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
28 |                     "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
29 |                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
30 |                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
31 |                     "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
32 |                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
33 |                     "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
34 |                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
35 |                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
36 |                     "<uses-feature android:name=\"android.hardware.camera\"/>",
37 |                     "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
38 |                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
39 |                 ]
40 |             },
41 |             "ios" : {},
42 |             /* ios打包配置 */
43 |             "sdkConfigs" : {},
44 |             "icons" : {
45 |                 "ios" : {
46 |                     "appstore" : "static/logo.png",
47 |                     "ipad" : {
48 |                         "app" : "unpackage/res/icons/76x76.png",
49 |                         "app@2x" : "unpackage/res/icons/152x152.png",
50 |                         "notification" : "unpackage/res/icons/20x20.png",
51 |                         "notification@2x" : "unpackage/res/icons/40x40.png",
52 |                         "proapp@2x" : "unpackage/res/icons/167x167.png",
53 |                         "settings" : "unpackage/res/icons/29x29.png",
54 |                         "settings@2x" : "unpackage/res/icons/58x58.png",
55 |                         "spotlight" : "unpackage/res/icons/40x40.png",
56 |                         "spotlight@2x" : "unpackage/res/icons/80x80.png"
57 |                     },
58 |                     "iphone" : {
59 |                         "app@2x" : "unpackage/res/icons/120x120.png",
60 |                         "app@3x" : "unpackage/res/icons/180x180.png",
61 |                         "notification@2x" : "unpackage/res/icons/40x40.png",
62 |                         "notification@3x" : "unpackage/res/icons/60x60.png",
63 |                         "settings@2x" : "unpackage/res/icons/58x58.png",
64 |                         "settings@3x" : "unpackage/res/icons/87x87.png",
65 |                         "spotlight@2x" : "unpackage/res/icons/80x80.png",
66 |                         "spotlight@3x" : "unpackage/res/icons/120x120.png"
67 |                     }
68 |                 },
69 |                 "android" : {
70 |                     "hdpi" : "unpackage/res/icons/72x72.png",
71 |                     "ldpi" : "unpackage/res/icons/48x48.png",
72 |                     "mdpi" : "unpackage/res/icons/48x48.png",
73 |                     "xhdpi" : "unpackage/res/icons/96x96.png",
74 |                     "xxhdpi" : "unpackage/res/icons/144x144.png",
75 |                     "xxxhdpi" : "unpackage/res/icons/192x192.png"
76 |                 }
77 |             },
78 |             "splashscreen" : {
79 |                 "android" : {
80 |                     "hdpi" : "static/start.png",
81 |                     "xhdpi" : "static/start.png",
82 |                     "xxhdpi" : "static/start.png"
83 |                 }
84 |             }
85 |         }
86 |     },
87 |     /* SDK配置 */
88 |     "quickapp" : {},
89 |     /* 快应用特有相关 */
90 |     "mp-weixin" : {
91 |         /* 小程序特有相关 */
92 |         "appid" : "",
93 |         "setting" : {
94 |             "urlCheck" : true
95 |         }
96 |     }
97 | }
98 | 


--------------------------------------------------------------------------------
/components/popup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view>
  3 | 		<view class="mask" v-show="show" @tap="hide"></view>
  4 | 		<view class="popup" v-show="show">
  5 | 			<view class="popup-header">
  6 | 				<view class="uni-icon uni-icon-close popup-close" @click="hide"></view>
  7 | 				<view class="popup-title">{{t.title}}</view>
  8 | 				<view class="popup-en">{{t.en}}</view>
  9 | 			</view>
 10 | 			<view class="popup-middle">
 11 | 				<view class="sort" v-for="(item,index) in t.kind" :key="index">
 12 | 					<view class="sort-label">{{item.name}}</view>
 13 | 					<view class="sort-select" :class="[item.selected == i ? 'active' : '']" v-for="(t,i) in item.type" :key="i" @tap="changeTab(index,i,item)">{{t}}</view>
 14 | 				</view>
 15 | 				<view class="describe">
 16 | 					<view class="describe-title">商品描述</view>
 17 | 					<view class="describe-text">
 18 | 						圣诞特别限定新品，香醇拿铁融合姜饼、香蕉风味，顶部轻盈奶油和牛奶巧克力碎奇妙相遇，甜蜜暖心。
 19 | 					</view>
 20 | 				</view>
 21 | 			</view>
 22 | 			<view class="popup-footer">
 23 | 				<view class="popup-price">
 24 | 					<view>
 25 | 						<view class="text-main">￥{{t.price}}</view>
 26 | 						<view class="text-small">{{t.title}}￥{{t.price}}+单糖￥0</view>
 27 | 					</view>
 28 | 					<view class="numbox">
 29 | 						<view class="numbox-minus uni-icon uni-icon-minus" @tap="minus"></view>
 30 | 						<view class="numbox-value">{{num}}</view>
 31 | 						<view class="numbox-plus uni-icon uni-icon-plus-filled" @tap="plus1"></view>
 32 | 					</view>
 33 | 				</view>
 34 | 				<view class="btn-group">
 35 | 					<button class="btn first-btn">充2赠一，充五赠五</button>
 36 | 					<button class="btn two-btn">收藏口味</button>
 37 | 					<button class="btn three-btn" @tap="addTocart">加入购物车</button>
 38 | 				</view>
 39 | 			</view>
 40 | 		</view>
 41 | 	</view>
 42 | </template>
 43 | 
 44 | <script>
 45 | 	export default {
 46 | 		props: {
 47 | 			show: {
 48 | 				type: Boolean,
 49 | 				default: false
 50 | 			},
 51 | 			popupData: {
 52 | 				default: ""
 53 | 			}
 54 | 		},
 55 | 		
 56 | 		data() {
 57 | 			return {
 58 | 				num: 1,
 59 | 				isActive: 0,
 60 | 				specification: ['大'],
 61 | 				temperature: ['冰','热'],
 62 | 				cream: ['默认奶油','无奶油'],
 63 | 				t: []
 64 | 			}
 65 | 		},
 66 | 		created() {
 67 | 			this.t = this.popupData;
 68 | 		},
 69 | 		methods: {
 70 | 			hide() {
 71 | 				this.$emit('hidePopup');
 72 | 			},
 73 | 			addTocart() {
 74 | 				this.$emit('addTocart',this.t);
 75 | 			},
 76 | 			minus() {
 77 | 				if(this.num > 1){
 78 | 					this.num --;
 79 | 				}else{
 80 | 					this.num = 1;
 81 | 				}
 82 | 			},
 83 | 			plus1() {
 84 | 				this.num ++;
 85 | 				console.log(this.num)
 86 | 			},
 87 | 			changeTab(index,i,item) {
 88 | 				this.t.kind[index].selected = i;
 89 | 			}
 90 | 		}
 91 | 	}
 92 | </script>
 93 | <style>
 94 | 	.mask {position: fixed;z-index: 99;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, .3);}
 95 | 	.popup {position: fixed;z-index: 999;background-color: #fff;box-shadow: 0 0 30upx rgba(0, 0, 0, .1);display: flex;flex-direction: column;
 96 | align-items: center;width: 690upx;height: 920upx;border-radius: 10upx;top: 50%;left: 50%;transform: translate(-50%, -50%);box-sizing: border-box;overflow: hidden;}
 97 | 	.popup-header,.popup-middle,.popup-footer{width: 100%;}
 98 | 	.popup-header{height: 288upx;position: relative;background: url(https://s2.luckincoffeecdn.com/luckywebrm/images/index/cooperation/part5_picture2.png) center;}
 99 | 	.popup-title,.popup-en{color: #fff;margin-left: 20upx;vertical-align: bottom;}
100 | 	.popup-title{font-size: 34upx;line-height: 54upx;margin-top: 190upx;}
101 | 	.popup-en{font-size: 20upx;line-height: 20upx;}
102 | 	.popup-close{color: #fff;font-size: 56upx;position: absolute;top: 20upx;right: 20upx;}
103 | 	.popup-middle{height: 400upx;box-sizing: border-box;padding: 10upx 30upx 0;overflow: auto;}
104 | 	.popup-footer{height: 232upx;border-top: 1px solid #f1f1f1;}
105 | 	.popup-price{display: flex;justify-content: space-between;padding: 32upx 28upx 24upx 38upx;height: 120upx;box-sizing: border-box;border-bottom: 1px solid #f1f1f1;}
106 | 	.text-main{font-size: 32upx;line-height: 32upx;color: #222;margin-bottom: 15upx;}
107 | 	.text-small{font-size: 20upx;color: #333;line-height: 20upx;}
108 | 	.numbox{display: flex;}
109 | 	.numbox-minus,.numbox-plus{font-size: 56upx;line-height: 68upx;}
110 | 	.numbox-minus{color: #91b5d9;background-color: #fff;}
111 | 	.numbox-value{line-height: 68upx;margin: 0 16upx;color: #91b5d9;font-weight: 700;min-width: 20upx;}
112 | 	.numbox-plus{color: #fff;color: #91b5d9;}
113 | 	.btn-group{display: flex;justify-content: flex-end;margin-top: 26upx;}
114 | 	.btn{height: 60upx;line-height: 58upx;padding: 0;margin: 0;font-size: 24upx;text-align: center;color: #fff;border-radius: 0;margin-right: 14upx;}
115 | 	.first-btn{width: 206upx;border: 1px solid #dc5a00;background-color: #e06e11;}
116 | 	.two-btn{width: 170upx;border: 1px solid #6c9ccd;background-color: #f3f3f3;color: #73a1cf;}
117 | 	.three-btn{width: 180upx;border: 1px solid #6c9ccd;background-color: #7ca7d2;}
118 | 	.btn:after{border: none;}
119 | 	.sort{display: flex;margin-top: 30upx;}
120 | 	.sort-label{width: 120upx;line-height: 52upx;}
121 | 	.sort-select{width: 120upx;height: 50upx;text-align: center;border-radius: 30upx;border: 1px solid #e3dbd3;color: #e3dbd3;font-size: 24upx;line-height: 50upx;margin-right: 15upx;}
122 | 	.sort-select.active{background-color: #e3dbd3;color: #fff;font-weight: 400;}
123 | 	.describe{border-top: 1px solid #f1f1f1;margin-top: 30upx;padding: 30upx 0 10upx;}
124 | 	.describe-title{margin-bottom: 10upx;}
125 | 	.describe-text{color: #666;font-size: 24upx;}
126 | </style>
127 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  3 | 		{
  4 | 			"path": "pages/home/index",
  5 | 			"style": {
  6 | 				"app-plus" : {
  7 | 					"titleNView" : false
  8 | 				}
  9 | 			}
 10 | 		},
 11 | 		{
 12 | 			"path": "pages/cart/index",
 13 | 			"style": {
 14 | 				"navigationBarTitleText" : "购物车"
 15 | 			}
 16 | 		},
 17 | 		{
 18 | 			"path": "pages/menu/index",
 19 | 			"style": {
 20 | 				"navigationBarTitleText" : "选择咖啡与小食"
 21 | 			}
 22 | 		},
 23 | 		{
 24 | 			"path": "pages/mine/index",
 25 | 			"style": {
 26 | 				"app-plus" : {
 27 | 					"titleNView" : false
 28 | 				}
 29 | 			}
 30 | 		},
 31 | 		{
 32 | 			"path": "pages/order/index",
 33 | 			"style": {
 34 | 				"navigationBarTitleText" : "订单列表"
 35 | 			}
 36 | 		},
 37 | 		{
 38 | 			"path": "pages/mine/personal/list",
 39 | 			"style": {
 40 | 				"navigationBarTitleText" : "个人资料"
 41 | 			}
 42 | 		},
 43 | 		{
 44 | 			"path": "pages/mine/personal/change-name",
 45 | 			"style": {
 46 | 				"navigationBarTitleText" : "用户名"
 47 | 			}
 48 | 		},
 49 | 		{
 50 | 			"path": "pages/mine/address/list",
 51 | 			"style": {
 52 | 				"navigationBarTitleText" : "我的地址"
 53 | 			}
 54 | 		},
 55 | 		{
 56 | 			"path": "pages/mine/address/add",
 57 | 			"style": {
 58 | 				"navigationBarTitleText" : "添加地址"
 59 | 			}
 60 | 		},
 61 | 		{
 62 | 			"path": "pages/mine/address/edit",
 63 | 			"style": {
 64 | 				"navigationBarTitleText" : "修改地址",
 65 | 				"app-plus": {
 66 | 					"titleNView": {
 67 | 						"buttons": [{
 68 | 							"text": "\ue401",
 69 | 							"fontSrc": "/static/uni.ttf"
 70 | 						}]
 71 | 					}
 72 | 				}
 73 | 			}
 74 | 		},
 75 | 		{
 76 | 			"path": "pages/mine/wallet/index",
 77 | 			"style": {
 78 | 				"navigationBarTitleText" : "咖啡钱包"
 79 | 			}
 80 | 		},
 81 | 		{
 82 | 			"path": "pages/mine/coupon/index",
 83 | 			"style": {
 84 | 				"navigationBarTitleText" : "可用咖啡券"
 85 | 			}
 86 | 		},
 87 | 		{
 88 | 			"path": "pages/mine/cash/index",
 89 | 			"style": {
 90 | 				"navigationBarTitleText" : "兑换优惠"
 91 | 			}
 92 | 		},
 93 | 		{
 94 | 			"path": "pages/mine/invoice/index",
 95 | 			"style": {
 96 | 				"navigationBarTitleText" : "发票管理"
 97 | 			}
 98 | 		},
 99 | 		{
100 | 			"path": "pages/mine/invoice/open",
101 | 			"style" : {
102 | 				"navigationBarTitleText" : "开具发票",
103 | 				"app-plus":{
104 | 					"titleNView": {
105 | 						"buttons": [{
106 | 							"text": "说明",
107 | 							"fontSize": "28upx"
108 | 						}]
109 | 					}
110 | 				}
111 | 			}
112 | 		},
113 | 		{
114 | 			"path": "pages/mine/invoice/explain",
115 | 			"style": {
116 | 				"navigationBarTitleText" : "发票说明"
117 | 			}
118 | 		},
119 | 		{
120 | 			"path": "pages/mine/invoice/open-info",
121 | 			"style": {
122 | 				"navigationBarTitleText" : "开票信息"
123 | 			}
124 | 		},
125 | 		{
126 | 			"path": "pages/mine/invoice/record",
127 | 			"style": {
128 | 				"navigationBarTitleText" : "发票记录"
129 | 			}
130 | 		},
131 | 		{
132 | 			"path": "pages/mine/invoice/title",
133 | 			"style": {
134 | 				"navigationBarTitleText" : "发票抬头"
135 | 			}
136 | 		},
137 | 		{
138 | 			"path": "pages/mine/invoice/title-add",
139 | 			"style": {
140 | 				"navigationBarTitleText" : "添加发票抬头"
141 | 			}
142 | 		},
143 | 		{
144 | 			"path": "pages/mine/feedback/list",
145 | 			"style": {
146 | 				"navigationBarTitleText" : "帮助反馈"
147 | 			}
148 | 		},
149 | 		{
150 | 			"path": "pages/mine/feedback/feedback",
151 | 			"style": {
152 | 				"navigationBarTitleText" : "问题反馈"
153 | 			}
154 | 		},
155 | 		{
156 | 			"path": "pages/mine/feedback/about",
157 | 			"style": {
158 | 				"navigationBarTitleText" : "关于我们"
159 | 			}
160 | 		},
161 | 		{
162 | 			"path": "pages/mine/feedback/details",
163 | 			"style": {
164 | 				"navigationBarTitleText" : "帮助反馈"
165 | 			}
166 | 		},
167 | 		{
168 | 			"path": "pages/mine/message",
169 | 			"style": {
170 | 				"navigationBarTitleText" : "消息中心"
171 | 			}
172 | 		},
173 | 		{
174 | 			"path": "pages/home/presented",
175 | 			"style": {
176 | 				"navigationBarTitleText" : "送Ta咖啡"
177 | 			}
178 | 		},
179 | 		{
180 | 			"path": "pages/login/login",
181 | 			"style": {
182 | 				"navigationBarTitleText" : ""
183 | 			}
184 | 		}
185 | 	],
186 | 	"globalStyle": {
187 | 		"navigationBarTextStyle": "black",
188 | 		"navigationBarTitleText": "",
189 | 		"navigationBarBackgroundColor": "#fff",
190 | 		"backgroundColor": "#fff"
191 | 	},
192 | 	"tabBar" : {
193 | 		"color" : "#8a8396",
194 | 		"selectedColor" : "#2a4c7e",
195 | 		"borderStyle" : "black",
196 | 		"backgroundColor" : "#fff",
197 | 		"list" : [
198 | 			{
199 | 				"pagePath" : "pages/home/index",
200 | 				"iconPath" : "static/home.png",
201 | 				"selectedIconPath" : "static/home-active.png",
202 | 				"text" : "首页"
203 | 			},
204 | 			{
205 | 				"pagePath" : "pages/menu/index",
206 | 				"iconPath" : "static/menu.png",
207 | 				"selectedIconPath" : "static/menu-active.png",
208 | 				"text" : "菜单"
209 | 			},
210 | 			{
211 | 				"pagePath" : "pages/order/index",
212 | 				"iconPath" : "static/order.png",
213 | 				"selectedIconPath" : "static/order-active.png",
214 | 				"text" : "订单"
215 | 			},
216 | 			{
217 | 				"pagePath" : "pages/cart/index",
218 | 				"iconPath" : "static/cart.png",
219 | 				"selectedIconPath" : "static/cart-active.png",
220 | 				"text" : "购物车"
221 | 			},
222 | 			{
223 | 				"pagePath" : "pages/mine/index",
224 | 				"iconPath" : "static/mine.png",
225 | 				"selectedIconPath" : "static/mine-active.png",
226 | 				"text" : "我的"
227 | 			}
228 | 		]
229 | 	}
230 | }
231 | 


--------------------------------------------------------------------------------
/pages/mine/address/edit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<form @submit="formSubmit" @reset="formReset">
  4 | 			<view class="uni-form-item uni-column">
  5 | 				<view class="with-fun">
  6 | 					<view class="label-title">联系人</view>
  7 | 					<input id="linkman" class="uni-input" :value="editData.linkman" name="linkman" placeholder="用于取餐时对您的称呼" @input="input"/>
  8 | 				</view>
  9 | 			</view>
 10 | 			<view class="uni-form-item uni-column">
 11 | 				<view class="with-fun">
 12 | 					<view class="label-title">性别</view>
 13 | 					<radio-group name="sex" class="radio-group">
 14 | 						<label class="radio-label"><radio value="先生" class="radio" :checked="sexChecked" color="#94b7da"/>先生</label>
 15 | 						<label class="radio-label"><radio value="女士" class="radio" :checked="!sexChecked" color="#94b7da"/>女士</label>
 16 | 					</radio-group>
 17 | 				</view>
 18 | 			</view>
 19 | 			<view class="uni-form-item uni-column">
 20 | 				<view class="with-fun">
 21 | 					<view class="label-title">手机号码</view>
 22 | 					<input id="phone" class="uni-input" :value="editData.phone" name="phone" maxlength="11" placeholder="联系人电话" @input="input"/>
 23 | 				</view>
 24 | 			</view>
 25 | 			<view class="uni-form-item uni-column">
 26 | 				<view class="with-fun">
 27 | 					<view class="label-title">收货地址</view>
 28 | 					<input id="address" class="uni-input" :value="editData.address" name="address" placeholder="请选择您的地址" @input="input"/>
 29 | 				</view>
 30 | 			</view>
 31 | 			<view class="uni-form-item uni-column">
 32 | 				<view class="with-fun">
 33 | 					<view class="label-title">门牌号</view>
 34 | 					<input id="tower" class="uni-input" :value="editData.tower" name="tower" placeholder="例: 5号楼203室" @input="input"/>
 35 | 				</view>
 36 | 			</view>
 37 | 			<view class="uni-form-item uni-column">
 38 | 				<view class="with-fun">
 39 | 					<view class="label-title">标签</view>
 40 | 					<view class="tag-group">
 41 | 						<view class="tab" :class="[activeIndex == index ? 'active' : '']" v-for="(item,index) in tag" :key="index"  @tap="tagChange(index)">{{item}}</view>
 42 | 					</view>
 43 | 				</view>
 44 | 			</view>
 45 | 			<checkbox-group name="default" class="default-address">
 46 | 				<label>
 47 | 					<checkbox value="default" class="checkbox" color="#7ba6d1"/>设为默认地址
 48 | 				</label>
 49 | 			</checkbox-group>
 50 | 			<button class="button save" hover-class="button-hover"  :disabled="isDisabled" formType="submit">保存</button>
 51 | 		</form>
 52 | 	</view>
 53 | </template>
 54 | 
 55 | <script>
 56 | 	import {
 57 | 		mapState,
 58 | 		mapMutations
 59 | 	} from 'vuex'
 60 | 	export default {
 61 | 		computed: {
 62 | 			...mapState(['gender','addressList'])
 63 | 		},
 64 | 		data() {
 65 | 			return {
 66 | 				sexChecked: true,
 67 | 				tag: ['公司','家','学校'],
 68 | 				activeIndex: -1,
 69 | 				addressData: {
 70 | 					linkman: "",
 71 | 					phone: "",
 72 | 					address:"",
 73 | 					tower: ""
 74 | 				},
 75 | 				editData: {},
 76 | 				isDisabled: false,
 77 | 				j: 0
 78 | 			}
 79 | 		},
 80 | 		onLoad(e) {
 81 | 			this.j = e.data;
 82 | 			var d = this.addressList[e.data];
 83 | 			this.editData = d;
 84 | 			this.editData.sex == "先生" ? this.sexChecked = true : this.sexChecked = false;
 85 | 			var at = this.editData.addressType;
 86 | 			if(at == "公司"){
 87 | 				this.activeIndex = 0;
 88 | 			}else if(at == "家"){
 89 | 				this.activeIndex = 1;
 90 | 			}else if(at == "学校"){
 91 | 				this.activeIndex = 2;
 92 | 			}
 93 | 			this.addressData = {
 94 | 				linkman: d.linkman,
 95 | 				phone: d.phone,
 96 | 				address: d.address,
 97 | 				tower: d.tower
 98 | 			}
 99 | 		},
100 | 		methods: {
101 | 			...mapMutations(['editAddress','removeAddress']),
102 | 			tagChange(index) {
103 | 				this.activeIndex = index;
104 | 			},
105 | 			formSubmit(e) {
106 | 				var _this = this;
107 | 				var i = this.activeIndex;
108 | 				var d = e.detail.value;
109 | 				var thisTag;
110 | 				i == -1 ? thisTag = "" : thisTag = _this.tag[i];
111 | 				this.editData = {
112 | 					linkman: d.linkman,
113 | 					sex: d.sex,
114 | 					phone: d.phone,
115 | 					address: d.address,
116 | 					addressType: thisTag,
117 | 					isDefault: d.default,
118 | 					tower: d.tower
119 | 				}
120 | 				var obj = {
121 | 					num: _this.j,
122 | 					d: _this.editData
123 | 				}
124 | 				this.editAddress(obj);
125 | 				uni.navigateBack();
126 | 			},
127 | 			input(e) {
128 | 				var id = e.currentTarget.id;
129 | 				var ad = this.addressData;
130 | 				var _this = this;
131 | 				for(var key in ad){
132 | 					key == id ? ad[key] = e.detail.value : ad[key];
133 | 					if(ad[key] !== ""){
134 | 						_this.isDisabled = false
135 | 					}
136 | 					for(var k in ad){
137 | 						if(ad[k] == ""){
138 | 							_this.isDisabled = true
139 | 						}
140 | 					}
141 | 				}
142 | 			}
143 | 		},
144 | 		onNavigationBarButtonTap(e) {
145 | 			var _this = this;
146 | 			uni.showModal({
147 | 				title: '提示',
148 | 				content: '确认删除？',
149 | 				success: function (res) {
150 | 					if (res.confirm) {
151 | 						_this.removeAddress(_this.j);
152 | 						uni.navigateBack();
153 | 					} else if (res.cancel) {
154 | 						
155 | 					}
156 | 				}
157 | 			});
158 | 			
159 | 		}
160 | 	}
161 | </script>
162 | 
163 | <style>
164 | 	.content{border-top: 1px solid #efefef;padding-bottom: 100upx;overflow: hidden;}
165 | 	.uni-form-item{padding: 0;padding-left: 28upx;background-color: #fff;}
166 | 	.uni-input{line-height: 90upx;padding: 20upx 28upx;}
167 | 	.with-fun{line-height: 90upx;border-bottom: 1px solid #efefef;}
168 | 	.label-title{width: 150upx;line-height: 90upx;}
169 | 	.radio-group{width: auto;padding-left: 28upx;}
170 | 	.radio{margin-right: 10upx;}
171 | 	.save{position: absolute;bottom: 20upx;left: 30upx;z-index: 111;}
172 | 	.tag-group{display: flex;color: #4a4a4a;padding: 20upx 28upx;}
173 | 	.tab{width: 120upx;height: 50upx;line-height: 50upx;text-align: center;border: 1px solid #e9e9e9;border-radius: 30upx;margin-right: 20upx;}
174 | 	.active{border: 1px solid #7ba6d1;background-color: #94b7da;color: #fff;}
175 | 	.default-address{line-height: 32upx;color: #4d4d4d;margin: 23upx 0 0 28upx;}
176 | 	.radio-label{margin-right: 100upx;line-height: 90upx;}
177 | </style>
178 | 


--------------------------------------------------------------------------------
/pages/menu/index-backup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<view class="banner" id="banner">
  4 | 			<swiper :autoplay="autoplay" :interval="interval" :circular="circular" class="swiper-box">
  5 | 				<swiper-item v-for="(item,index) in banner" :key="index">
  6 | 					<image :src="item" class="banner-image"></image>
  7 | 				</swiper-item>
  8 | 			</swiper>
  9 | 		</view>
 10 | 		<view class="page-body">
 11 | 			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
 12 | 				<view class="nav-left-item" :key="index" :class="index==categoryActive?'active':''" v-for="(item,index) in shopList" @tap="categoryClick(index)">
 13 | 					{{item.classify}}
 14 | 				</view>
 15 | 			</scroll-view>
 16 | 			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation id="rightItem">
 17 | 				<view :id="index===0?'first':''" class="nav-right-item" v-for="(item,index) in shopList" :key="index">
 18 | 					<view class="item-header">{{item.classify}}</view>
 19 | 					<view class="item-state" v-show="item.state !== ''">{{item.state}}</view>
 20 | 					<view class="item-li" v-for="(shop,i) in item.data" :key="i">
 21 | 						<image src="http://placehold.it/50x50" class="item-img"/>
 22 | 						<view class="item-text">
 23 | 							<view class="item-title">{{shop.title}}</view>
 24 | 							<view class="item-en">{{shop.en}}</view>
 25 | 							<view class="item-kind">默认：{{shop.kind}}</view>
 26 | 							<view class="item-price">￥{{shop.price}}</view>
 27 | 							<view class="plus-filled"><uni-icon type="plus-filled"></uni-icon></view>
 28 | 						</view>
 29 | 					</view>
 30 | 				</view>
 31 | 			</scroll-view>
 32 | 		</view>
 33 | 	</view>
 34 | </template>
 35 | 
 36 | <script>
 37 | 	import uniIcon from "@/components/uni-icon.vue"
 38 | 	export default {
 39 | 		components: {
 40 | 			uniIcon
 41 | 		},
 42 | 		data() {
 43 | 			return {
 44 | 				banner: [
 45 | 					"https://s2.luckincoffeecdn.com/luckywebrm/images/pimg/about/contact.png",
 46 | 					"https://s2.luckincoffeecdn.com/luckywebrm/images/pimg/about/model.png",
 47 | 					"https://s2.luckincoffeecdn.com/luckywebrm/images/index/cooperation/part5_picture2.png",
 48 | 				],
 49 | 				indicatorDots: true,
 50 | 				autoplay: false,
 51 | 				circular: true,
 52 | 				interval: 4000,
 53 | 				duration: 500,
 54 | 				storeOff: true,
 55 | 				categoryList: [],
 56 | 				subCategoryList: [],
 57 | 				height: 0,
 58 | 				categoryActive: 0,
 59 | 				scrollTop: 0,
 60 | 				scrollHeight: 0,
 61 | 				itemHeight: 0,
 62 | 				itemObj: [],
 63 | 				itemTop: 0,
 64 | 				shopList: [{
 65 | 					classify : "人气Top",
 66 | 					state: "",
 67 | 					data: [{
 68 | 						title: "圣诞姜饼人拿铁",
 69 | 						en: "Christmas Gingerbread Latte",
 70 | 						kind: "大/默认奶油/热",
 71 | 						price: "27"
 72 | 					},{
 73 | 						title: "棒果拿铁",
 74 | 						en: "Hazelnut Latte",
 75 | 						kind: "大/单糖/热",
 76 | 						price: "27"
 77 | 					}]
 78 | 				},{
 79 | 					classify : "大师咖啡",
 80 | 					state: "WBC（世界咖啡师大赛）冠军团队拼配",
 81 | 					data: [{
 82 | 						title: "拿铁",
 83 | 						en: "Latte",
 84 | 						kind: "大/无糖/热",
 85 | 						price: "24"
 86 | 					},{
 87 | 						title: "香草拿铁",
 88 | 						en: "Vanilla Latte",
 89 | 						kind: "大/单糖/热",
 90 | 						price: "27"
 91 | 					},{
 92 | 						title: "香草拿铁",
 93 | 						en: "Vanilla Latte",
 94 | 						kind: "大/单糖/热",
 95 | 						price: "27"
 96 | 					},{
 97 | 						title: "香草拿铁",
 98 | 						en: "Vanilla Latte",
 99 | 						kind: "大/单糖/热",
100 | 						price: "27"
101 | 					},{
102 | 						title: "香草拿铁",
103 | 						en: "Vanilla Latte",
104 | 						kind: "大/单糖/热",
105 | 						price: "27"
106 | 					},{
107 | 						title: "香草拿铁",
108 | 						en: "Vanilla Latte",
109 | 						kind: "大/单糖/热",
110 | 						price: "27"
111 | 					}]
112 | 				},{
113 | 					classify : "零度拿铁",
114 | 					
115 | 					state: "不含咖啡的拿铁",
116 | 					data: [{
117 | 						title: "抹茶拿铁",
118 | 						en: "Latte",
119 | 						kind: "大/热",
120 | 						price: "27"
121 | 					},{
122 | 						title: "抹茶拿铁",
123 | 						en: "Latte",
124 | 						kind: "大/热",
125 | 						price: "27"
126 | 					},{
127 | 						title: "抹茶拿铁",
128 | 						en: "Latte",
129 | 						kind: "大/热",
130 | 						price: "27"
131 | 					},{
132 | 						title: "抹茶拿铁",
133 | 						en: "Latte",
134 | 						kind: "大/热",
135 | 						price: "27"
136 | 					},{
137 | 						title: "抹茶拿铁",
138 | 						en: "Latte",
139 | 						kind: "大/热",
140 | 						price: "27"
141 | 					},{
142 | 						title: "抹茶拿铁",
143 | 						en: "Latte",
144 | 						kind: "大/热",
145 | 						price: "27"
146 | 					},{
147 | 						title: "抹茶拿铁",
148 | 						en: "Latte",
149 | 						kind: "大/热",
150 | 						price: "27"
151 | 					}]
152 | 				}]
153 | 			}
154 | 		},
155 | 		methods: {
156 | 			scroll(e) {
157 | 				this.scrollHeight = e.detail.scrollHeight;
158 | 				var navrightItem = uni.createSelectorQuery().selectAll(".nav-right-item");
159 | 				this.itemTop = e.detail.scrollTop;
160 | // 				uni.pageScrollTo({
161 | // 					scrollTop: rects.top + res[1].scrollTop,
162 | // 					duration: 300
163 | // 			　	})
164 | 				navrightItem.fields({
165 | 					size: true,
166 | 					scrollOffset: true,
167 | 					dataset: true
168 | 				}, data => {
169 | 					this.itemObj = data;
170 | 				}).exec();
171 | 				if(this.itemObj !== []){
172 | 					// console.log(this.itemTop,this.itemObj[0].height)
173 | // 					for(var i = 0; i<this.itemObj.length; i++){
174 | // 						if(this.itemTop < this.itemObj[i].height){
175 | // 							console.log(i)
176 | // 						}
177 | // 					}
178 | 				}
179 | 			},
180 | 			categoryClick(index) {
181 | 				this.categoryActive = index;
182 | 				// this.scrollTop = -this.scrollHeight * index;
183 | 				// console.log(this.scrollHeight,index)
184 | 			},
185 | 			getElSize(id) { //得到元素的size
186 | 				return new Promise((res, rej) => {
187 | 					uni.createSelectorQuery().select("#" + id).fields({
188 | 						size: true,
189 | 						scrollOffset: true
190 | 					}, (data) => {
191 | 						res(data);
192 | 					}).exec();
193 | 				})
194 | 			}
195 | 		},
196 | 		onLoad: function () {
197 | 			this.height = Math.floor(uni.getSystemInfoSync().windowHeight - 124);
198 | 			// #ifdef APP-PLUS
199 | 			this.height = Math.floor(uni.getSystemInfoSync().windowHeight - 180);
200 | 			// #endif
201 | 		}
202 | 	}
203 | </script>
204 | 
205 | <style>
206 | 	.swiper-box{height: 124px;}
207 | 	.banner{position: relative;}
208 | 	.banner-image{width: 100%;}
209 | 	
210 | 	.page-body {display: flex;}
211 | 	.nav {display: flex;width: 100%;}
212 | 	.nav-left {width: 180upx;background-color: #f7f7f7;}
213 | 	.nav-left-item {height: 86upx;border-bottom: solid 1px #ececec;font-size: 28upx;display: flex;align-items: center;justify-content: center;color: #666;}
214 | 	.nav-left-item:last-child{border-bottom: none;}
215 | 	.active {color: #333;background-color: #fff;font-weight: 700;}
216 | 	.nav-right {width: 570upx;background-color: #fff;}
217 | 	.nav-right-item {width: 100%;font-size: 28upx;padding: 0 26upx;box-sizing: border-box;}
218 | 	.item-header{padding-top: 36upx;font-size: 24upx;font-weight: 700;line-height: 24upx;}
219 | 	.item-state,.item-en,.item-kind{font-size: 20upx;line-height: 20upx;color: #999;}
220 | 	.item-state{margin-top: 10upx;}
221 | 	.item-li{padding: 22upx 0;position: relative;border-bottom: 1px solid #f1f1f1;height: 134upx;}
222 | 	.nav-right-item .item-li:last-child{border-bottom: none;}
223 | 	.item-img{width: 134upx;height: 134upx;border-radius: 8upx;}
224 | 	.item-text{display: inline-block;vertical-align: top;margin-left: 16upx;}
225 | 	.item-title{font-size: 28upx;line-height: 28upx;font-weight: 700;}
226 | 	.item-en{margin: 10upx 0 8upx 0;}
227 | 	.item-price{font-size: 28upx;line-height: 28upx;font-weight: 700;margin-top: 28upx;}
228 | 	.plus-filled{position: absolute;bottom: 16upx;right: 0;color: #81aad2;}
229 | 	.fixed{position: fixed;top: 0;left: 206upx;background: #fff;}
230 | </style>
231 | 


--------------------------------------------------------------------------------
/pages/menu/data.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"data":[
  3 | 			{
  4 | 				"classify" : "人气Top",
  5 | 				"state": "",
  6 | 				"shopData": [
  7 | 					{
  8 | 						"id": "shop01",
  9 | 						"title": "榛果拿铁",
 10 | 						"en": "Hazelnut Latte",
 11 | 						"kind": [
 12 | 							{
 13 | 								"name": "规格",
 14 | 								"type": ["大"],
 15 | 								"selected": 0
 16 | 							},
 17 | 							{
 18 | 								"name": "温度",
 19 | 								"type": ["冰","热"],
 20 | 								"selected": 1
 21 | 							},
 22 | 							{
 23 | 								"name": "糖度",
 24 | 								"type": ["单糖","半糖"],
 25 | 								"selected": 0
 26 | 							}
 27 | 						],
 28 | 						"default": ["大","单糖","热"],
 29 | 						"price": "27"
 30 | 					},
 31 | 					{
 32 | 						"id": "shop02",
 33 | 						"title": "圣诞姜饼人拿铁",
 34 | 						"en": "Christmas Gingerbread Latte",
 35 | 						"kind": [
 36 | 							{
 37 | 								"name": "规格",
 38 | 								"type": "大",
 39 | 								"selected": 0
 40 | 							},
 41 | 							{
 42 | 								"name": "温度",
 43 | 								"type": ["冰","热"],
 44 | 								"selected": 1
 45 | 							},
 46 | 							{
 47 | 								"name": "奶油",
 48 | 								"type": ["默认奶油","无奶油"],
 49 | 								"selected": 0
 50 | 							}
 51 | 						],
 52 | 						"default": ["大","默认奶油","热"],
 53 | 						"price": "24"
 54 | 					}
 55 | 				]
 56 | 			},
 57 | 			{
 58 | 				"classify" : "大师咖啡",
 59 | 				"state": "WBC（世界咖啡师大赛）冠军团队拼配",
 60 | 				"shopData": [
 61 | 					{
 62 | 						"id": "shop03",
 63 | 						"title": "拿铁",
 64 | 						"en": "Latte",
 65 | 						"kind": [
 66 | 							{
 67 | 								"name": "规格",
 68 | 								"type": "大",
 69 | 								"selected": 0
 70 | 							},
 71 | 							{
 72 | 								"name": "温度",
 73 | 								"type": ["冰","热"],
 74 | 								"selected": 0
 75 | 							},
 76 | 							{
 77 | 								"name": "糖度",
 78 | 								"type": ["无糖","半糖","单糖"],
 79 | 								"selected": 0
 80 | 							}
 81 | 						],
 82 | 						"default": ["大","无糖","热"],
 83 | 						"price": "24"
 84 | 					},
 85 | 					{
 86 | 						"id": "shop04",
 87 | 						"title": "香草拿铁",
 88 | 						"en": "Vanilla Latte",
 89 | 						"kind": [
 90 | 							{
 91 | 								"name": "规格",
 92 | 								"type": "大",
 93 | 								"selected": 0
 94 | 							},
 95 | 							{
 96 | 								"name": "温度",
 97 | 								"type": ["冰","热"],
 98 | 								"selected": 0
 99 | 							},
100 | 							{
101 | 								"name": "糖度",
102 | 								"type": ["单糖","半糖"],
103 | 								"selected": 0
104 | 							}
105 | 						],
106 | 						"default": ["大","无糖","热"],
107 | 						"price": "27"
108 | 					}
109 | 				]
110 | 			},
111 | 			{
112 | 				"classify" : "零度拿铁",
113 | 				"state": "不含咖啡的拿铁",
114 | 				"shopData": [
115 | 					{
116 | 						"id": "shop05",
117 | 						"title": "拿铁",
118 | 						"en": "Latte",
119 | 						"kind": [
120 | 							{
121 | 								"name": "规格",
122 | 								"type": "大",
123 | 								"selected": 0
124 | 							},
125 | 							{
126 | 								"name": "温度",
127 | 								"type": ["冰","热"],
128 | 								"selected": 0
129 | 							},
130 | 							{
131 | 								"name": "糖度",
132 | 								"type": ["无糖","半糖","单糖"],
133 | 								"selected": 0
134 | 							}
135 | 						],
136 | 						"default": ["大","无糖","热"],
137 | 						"price": "24"
138 | 					},
139 | 					{
140 | 						"id": "shop06",
141 | 						"title": "香草拿铁",
142 | 						"en": "Vanilla Latte",
143 | 						"kind": [
144 | 							{
145 | 								"name": "规格",
146 | 								"type": "大",
147 | 								"selected": 0
148 | 							},
149 | 							{
150 | 								"name": "温度",
151 | 								"type": ["冰","热"],
152 | 								"selected": 0
153 | 							},
154 | 							{
155 | 								"name": "糖度",
156 | 								"type": ["单糖","半糖"],
157 | 								"selected": 0
158 | 							}
159 | 						],
160 | 						"default": ["大","无糖","热"],
161 | 						"price": "27"
162 | 					}
163 | 				]
164 | 			},
165 | 			{
166 | 				"classify" : "瑞纳冰",
167 | 				"state": "",
168 | 				"shopData": [
169 | 					{
170 | 						"id": "shop07",
171 | 						"title": "拿铁",
172 | 						"en": "Latte",
173 | 						"kind": [
174 | 							{
175 | 								"name": "规格",
176 | 								"type": "大",
177 | 								"selected": 0
178 | 							},
179 | 							{
180 | 								"name": "温度",
181 | 								"type": ["冰","热"],
182 | 								"selected": 0
183 | 							},
184 | 							{
185 | 								"name": "糖度",
186 | 								"type": ["无糖","半糖","单糖"],
187 | 								"selected": 0
188 | 							}
189 | 						],
190 | 						"default": ["大","无糖","热"],
191 | 						"price": "24"
192 | 					},
193 | 					{
194 | 						"id": "shop08",
195 | 						"title": "香草拿铁",
196 | 						"en": "Vanilla Latte",
197 | 						"kind": [
198 | 							{
199 | 								"name": "规格",
200 | 								"type": "大",
201 | 								"selected": 0
202 | 							},
203 | 							{
204 | 								"name": "温度",
205 | 								"type": ["冰","热"],
206 | 								"selected": 0
207 | 							},
208 | 							{
209 | 								"name": "糖度",
210 | 								"type": ["单糖","半糖"],
211 | 								"selected": 0
212 | 							}
213 | 						],
214 | 						"default": ["大","无糖","热"],
215 | 						"price": "27"
216 | 					}
217 | 				]
218 | 			},
219 | 			{
220 | 				"classify" : "经典饮品",
221 | 				"state": "",
222 | 				"shopData": [
223 | 					{
224 | 						"id": "shop09",
225 | 						"title": "拿铁",
226 | 						"en": "Latte",
227 | 						"kind": [
228 | 							{
229 | 								"name": "规格",
230 | 								"type": "大",
231 | 								"selected": 0
232 | 							},
233 | 							{
234 | 								"name": "温度",
235 | 								"type": ["冰","热"],
236 | 								"selected": 0
237 | 							},
238 | 							{
239 | 								"name": "糖度",
240 | 								"type": ["无糖","半糖","单糖"],
241 | 								"selected": 0
242 | 							}
243 | 						],
244 | 						"default": ["大","无糖","热"],
245 | 						"price": "24"
246 | 					},
247 | 					{
248 | 						"id": "shop10",
249 | 						"title": "香草拿铁",
250 | 						"en": "Vanilla Latte",
251 | 						"kind": [
252 | 							{
253 | 								"name": "规格",
254 | 								"type": "大",
255 | 								"selected": 0
256 | 							},
257 | 							{
258 | 								"name": "温度",
259 | 								"type": ["冰","热"],
260 | 								"selected": 0
261 | 							},
262 | 							{
263 | 								"name": "糖度",
264 | 								"type": ["单糖","半糖"],
265 | 								"selected": 0
266 | 							}
267 | 						],
268 | 						"default": ["大","无糖","热"],
269 | 						"price": "27"
270 | 					}
271 | 				]
272 | 			},
273 | 			{
274 | 				"classify" : "健康轻食",
275 | 				"state": "",
276 | 				"shopData": [
277 | 					{
278 | 						"id": "shop11",
279 | 						"title": "拿铁",
280 | 						"en": "Latte",
281 | 						"kind": [
282 | 							{
283 | 								"name": "规格",
284 | 								"type": "大",
285 | 								"selected": 0
286 | 							},
287 | 							{
288 | 								"name": "温度",
289 | 								"type": ["冰","热"],
290 | 								"selected": 0
291 | 							},
292 | 							{
293 | 								"name": "糖度",
294 | 								"type": ["无糖","半糖","单糖"],
295 | 								"selected": 0
296 | 							}
297 | 						],
298 | 						"default": ["大","无糖","热"],
299 | 						"price": "24"
300 | 					},
301 | 					{
302 | 						"id": "shop12",
303 | 						"title": "香草拿铁",
304 | 						"en": "Vanilla Latte",
305 | 						"kind": [
306 | 							{
307 | 								"name": "规格",
308 | 								"type": "大",
309 | 								"selected": 0
310 | 							},
311 | 							{
312 | 								"name": "温度",
313 | 								"type": ["冰","热"],
314 | 								"selected": 0
315 | 							},
316 | 							{
317 | 								"name": "糖度",
318 | 								"type": ["单糖","半糖"],
319 | 								"selected": 0
320 | 							}
321 | 						],
322 | 						"default": ["大","无糖","热"],
323 | 						"price": "27"
324 | 					}
325 | 				]
326 | 			},
327 | 			{
328 | 				"classify" : "鲜榨果蔬汁",
329 | 				"state": "",
330 | 				"shopData": [
331 | 					{
332 | 						"id": "shop13",
333 | 						"title": "NFC鲜榨橙汁",
334 | 						"en": "NFC Fresh Orange Juice",
335 | 						"kind": [],
336 | 						"default": [],
337 | 						"price": "24"
338 | 					},
339 | 					{
340 | 						"id": "shop14",
341 | 						"title": "香草拿铁",
342 | 						"en": "Vanilla Latte",
343 | 						"kind": [
344 | 							{
345 | 								"name": "规格",
346 | 								"type": "大",
347 | 								"selected": 0
348 | 							},
349 | 							{
350 | 								"name": "温度",
351 | 								"type": ["冰","热"],
352 | 								"selected": 1
353 | 							},
354 | 							{
355 | 								"name": "糖度",
356 | 								"type": ["单糖","半糖"],
357 | 								"selected": 0
358 | 							}
359 | 						],
360 | 						"default": ["大","无糖","热"],
361 | 						"price": "27"
362 | 					}
363 | 				]
364 | 			}
365 | 	]
366 | }


--------------------------------------------------------------------------------
/pages/menu/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<!-- <view class="banner" id="banner">
  4 | 			<swiper :autoplay="autoplay" :interval="interval" :circular="circular" class="swiper-box">
  5 | 				<swiper-item v-for="(item,index) in banner" :key="index">
  6 | 					<image :src="item" class="banner-image"></image>
  7 | 				</swiper-item>
  8 | 			</swiper>
  9 | 		</view> -->
 10 | 		<view class="page-body">
 11 | 			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
 12 | 				<view class="nav-left-item" :class="index==categoryActive?'active':''" v-for="(item,index) in shopList" :key="index" @tap="categoryClick(index)">{{item.classify}}</view>
 13 | 			</scroll-view>
 14 | 			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation id="rightItem">
 15 | 				<view class="nav-right-item">
 16 | 					<view class="item-header">{{itemObj.classify}}</view>
 17 | 					<view class="item-state" v-show="itemObj.state !== ''">{{itemObj.state}}</view>
 18 | 					<view class="item-li" v-for="(shop,i) in itemObj.shopData" :key="i"  @tap="showMiddlePopup(shop,i)">
 19 | 						<image src="../../static/shop.png" class="item-img"/>
 20 | 						<view class="item-text">
 21 | 							<view class="item-title">{{shop.title}}</view>
 22 | 							<view class="item-en">{{shop.en}}</view>
 23 | 							<view class="item-default">默认：
 24 | 								<text v-for="d in shop.default" :key="d">{{d}} </text>
 25 | 							</view>
 26 | 							<view class="item-price">￥{{shop.price}}</view>
 27 | 							<view class="plus-filled" stop><uni-icon type="plus-filled"></uni-icon></view>
 28 | 						</view>
 29 | 					</view>
 30 | 				</view>
 31 | 			</scroll-view>
 32 | 		</view>
 33 | 		<!-- <popup :show="showPopup" @hidePopup="hidePopup" @addTocart="addTocart" :popupData="popupData"></popup> -->
 34 | 		<view v-show="showPopup">
 35 | 			<view class="mask" v-show="showPopup" @tap="hidePopup"></view>
 36 | 			<view class="popup" v-show="showPopup">
 37 | 				<view class="popup-header">
 38 | 					<view class="uni-icon uni-icon-close popup-close" @click="hidePopup"></view>
 39 | 					<view class="popup-title">{{popupData.title}}</view>
 40 | 					<view class="popup-en">{{popupData.en}}</view>
 41 | 				</view>
 42 | 				<view class="popup-middle">
 43 | 					<view class="sort" v-for="(item,index) in popupData.kind" :key="index">
 44 | 						<view class="sort-label">{{item.name}}</view>
 45 | 						<view class="sort-select" :class="[item.selected == i ? 'active' : '']" v-for="(t,i) in item.type" :key="i" @tap="changeTab(index,i,item)">{{t}}</view>
 46 | 					</view>
 47 | 					<view class="describe">
 48 | 						<view class="describe-title">商品描述</view>
 49 | 						<view class="describe-text">
 50 | 							圣诞特别限定新品，香醇拿铁融合姜饼、香蕉风味，顶部轻盈奶油和牛奶巧克力碎奇妙相遇，甜蜜暖心。
 51 | 						</view>
 52 | 					</view>
 53 | 				</view>
 54 | 				<view class="popup-footer">
 55 | 					<view class="popup-price">
 56 | 						<view>
 57 | 							<view class="text-main">￥{{popupData.price}}</view>
 58 | 							<view class="text-small">{{popupData.title}}￥{{popupData.price}}+单糖￥0</view>
 59 | 						</view>
 60 | 						<view class="numbox">
 61 | 							<view class="numbox-minus uni-icon uni-icon-minus" @tap="minus"></view>
 62 | 							<view class="numbox-value">{{num}}</view>
 63 | 							<view class="numbox-plus uni-icon uni-icon-plus-filled" @tap="plus"></view>
 64 | 						</view>
 65 | 					</view>
 66 | 					<view class="btn-group">
 67 | 						<button class="btn first-btn">充2赠一，充五赠五</button>
 68 | 						<button class="btn two-btn">收藏口味</button>
 69 | 						<button class="btn three-btn" @tap="addTocart(popupData.id)">加入购物车</button>
 70 | 					</view>
 71 | 				</view>
 72 | 			</view>
 73 | 		</view>
 74 | 	</view>
 75 | </template>
 76 | 
 77 | <script>
 78 | 	import {
 79 | 		mapState,
 80 | 		mapMutations
 81 | 	} from 'vuex'
 82 | 	import uniIcon from "@/components/uni-icon.vue"
 83 | 	// import popup from "@/components/popup.vue"
 84 | 	import shopData from "./data.json"
 85 | 	
 86 | 	export default {
 87 | 		components: {
 88 | 			uniIcon
 89 | 		},
 90 | 		data() {
 91 | 			return {
 92 | 				banner: [
 93 | 					"https://s2.luckincoffeecdn.com/luckywebrm/images/pimg/about/contact.png",
 94 | 					"https://s2.luckincoffeecdn.com/luckywebrm/images/pimg/about/model.png",
 95 | 					"https://s2.luckincoffeecdn.com/luckywebrm/images/index/cooperation/part5_picture2.png",
 96 | 				],
 97 | 				indicatorDots: true,
 98 | 				autoplay: false,
 99 | 				circular: true,
100 | 				interval: 4000,
101 | 				duration: 500,
102 | 				storeOff: true,
103 | 				categoryList: [],
104 | 				subCategoryList: [],
105 | 				height: 0,
106 | 				categoryActive: 0,
107 | 				scrollTop: 0,
108 | 				scrollHeight: 0,
109 | 				itemHeight: 0,
110 | 				itemObj: [],
111 | 				itemTop: 0,
112 | 				popType: 'middle',
113 | 				showPopup: false,
114 | 				popupData: {},
115 | 				shopList: [],
116 | 				num: 1
117 | 			}
118 | 		},
119 | 		computed: {
120 | 			...mapState(['cartList'])
121 | 		},
122 | 		onLoad: function () {
123 | 			this.shopList = shopData.data;
124 | // 			this.height = Math.floor(uni.getSystemInfoSync().windowHeight - 124);
125 | // 			// #ifdef APP-PLUS
126 | // 			this.height = Math.floor(uni.getSystemInfoSync().windowHeight - 180);
127 | // 			// #endif
128 | 			this.height = Math.floor(uni.getSystemInfoSync().windowHeight);
129 | 			// #ifdef APP-PLUS
130 | 			this.height = Math.floor(uni.getSystemInfoSync().windowHeight - 56);
131 | 			// #endif
132 | 			this.itemObj = this.shopList[0];
133 | 		},
134 | 		methods: {
135 | 			...mapMutations(['calcTotal']),
136 | 			categoryClick(index) {
137 | 				this.categoryActive = index;
138 | 				this.itemObj = this.shopList[index];
139 | 			},
140 | 			hidePopup() {
141 | 				this.showPopup = false;
142 | 			},
143 | 			showMiddlePopup(item,i) {
144 | 				this.num = 1;
145 | 				this.popupData = this.itemObj.shopData[i];
146 | 				this.showPopup = true;
147 | 			},
148 | 			addTocart (id){
149 | 				var kind = this.popupData.kind;
150 | 				var type = "";
151 | 				var d = {
152 | 					id: id,
153 | 					title: this.popupData.title,
154 | 					price: this.popupData.price,
155 | 					num: this.num,
156 | 					type: "",
157 | 					isChecked: true
158 | 				}
159 | 				for(var i = 0;i<kind.length; i++){
160 | 					var s = kind[i].selected;
161 | 					if(i>0){
162 | 						d.type += '/' + kind[i].type[s]
163 | 					}else{
164 | 						d.type += kind[i].type[s]
165 | 					}
166 | 				}
167 | 				var cartList = this.cartList;
168 | 				var flag = true;
169 | 				if(cartList.length >= 1){
170 | 					for(var i = 0; i < cartList.length; i++){
171 | 						if(d.id == cartList[i].id && d.type == cartList[i].type){
172 | 							cartList[i].num = cartList[i].num + d.num;
173 | 							flag = false;
174 | 						}
175 | 					}
176 | 				}
177 | 				flag ? cartList.push(d) : "";
178 | 				this.calcTotal(cartList);
179 | 				this.showPopup = false;
180 | 			},
181 | 			changeTab(index,i,item) {
182 | 				this.popupData.kind[index].selected = i;
183 | 			},
184 | 			minus() {
185 | 				if(this.num > 1){
186 | 					this.num --;
187 | 				}else{
188 | 					this.num = 1;
189 | 				}
190 | 			},
191 | 			plus() {
192 | 				this.num ++;
193 | 			}
194 | 		}
195 | 	}
196 | </script>
197 | 
198 | <style>
199 | 	.container{border-top: 1px solid #f0f0f0;}
200 | 	.swiper-box{height: 124px;}
201 | 	.banner{position: relative;}
202 | 	.banner-image{width: 100%;}
203 | 	
204 | 	.page-body {display: flex;}
205 | 	.nav {display: flex;width: 100%;}
206 | 	.nav-left {width: 180upx;background-color: #f7f7f7;}
207 | 	.nav-left-item {height: 86upx;border-bottom: solid 1px #ececec;font-size: 28upx;display: flex;align-items: center;justify-content: center;color: #666;}
208 | 	.nav-left-item:last-child{border-bottom: none;}
209 | 	.active {color: #333;background-color: #fff;font-weight: 700;}
210 | 	.nav-right {width: 570upx;background-color: #fff;}
211 | 	.nav-right-item {width: 100%;font-size: 28upx;padding: 0 26upx;box-sizing: border-box;}
212 | 	.item-header{padding-top: 36upx;font-size: 24upx;font-weight: 700;line-height: 24upx;}
213 | 	.item-state,.item-en,.item-default{font-size: 20upx;line-height: 20upx;color: #999;}
214 | 	.item-state{margin-top: 10upx;}
215 | 	.item-li{padding: 22upx 0;position: relative;border-bottom: 1px solid #f1f1f1;height: 134upx;}
216 | 	.nav-right-item .item-li:last-child{border-bottom: none;}
217 | 	.item-img{width: 134upx;height: 134upx;border-radius: 8upx;}
218 | 	.item-text{display: inline-block;vertical-align: top;margin-left: 16upx;}
219 | 	.item-title{font-size: 28upx;line-height: 28upx;font-weight: 700;}
220 | 	.item-en{margin: 10upx 0 8upx 0;}
221 | 	.item-price{font-size: 28upx;line-height: 28upx;font-weight: 700;margin-top: 28upx;}
222 | 	.plus-filled{position: absolute;bottom: 16upx;right: 0;color: #81aad2;}
223 | 	.fixed{position: fixed;top: 0;left: 206upx;background: #fff;}
224 | 	
225 | 	
226 | 	.mask {position: fixed;z-index: 99;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, .3);}
227 | 	.popup {position: fixed;z-index: 999;background-color: #fff;box-shadow: 0 0 30upx rgba(0, 0, 0, .1);display: flex;flex-direction: column;
228 | align-items: center;width: 690upx;height: 920upx;border-radius: 10upx;top: 50%;left: 50%;transform: translate(-50%, -50%);box-sizing: border-box;overflow: hidden;}
229 | 	.popup-header,.popup-middle,.popup-footer{width: 100%;}
230 | 	.popup-header{height: 288upx;position: relative;background: url(https://s2.luckincoffeecdn.com/luckywebrm/images/index/cooperation/part5_picture2.png) center;}
231 | 	.popup-title,.popup-en{color: #fff;margin-left: 20upx;vertical-align: bottom;}
232 | 	.popup-title{font-size: 34upx;line-height: 54upx;margin-top: 190upx;}
233 | 	.popup-en{font-size: 20upx;line-height: 20upx;}
234 | 	.popup-close{color: #fff;font-size: 56upx;position: absolute;top: 20upx;right: 20upx;}
235 | 	.popup-middle{height: 400upx;box-sizing: border-box;padding: 10upx 30upx 0;overflow: auto;}
236 | 	.popup-footer{height: 232upx;border-top: 1px solid #f1f1f1;}
237 | 	.popup-price{display: flex;justify-content: space-between;padding: 32upx 28upx 24upx 38upx;height: 120upx;box-sizing: border-box;border-bottom: 1px solid #f1f1f1;}
238 | 	.text-main{font-size: 32upx;line-height: 32upx;color: #222;margin-bottom: 15upx;}
239 | 	.text-small{font-size: 20upx;color: #333;line-height: 20upx;}
240 | 	.numbox{display: flex;}
241 | 	.numbox-minus,.numbox-plus{font-size: 56upx;line-height: 68upx;}
242 | 	.numbox-minus{color: #91b5d9;background-color: #fff;}
243 | 	.numbox-value{line-height: 68upx;margin: 0 16upx;color: #91b5d9;font-weight: 700;min-width: 20upx;}
244 | 	.numbox-plus{color: #fff;color: #91b5d9;}
245 | 	.btn-group{display: flex;justify-content: flex-end;margin-top: 26upx;}
246 | 	.btn{height: 60upx;line-height: 58upx;padding: 0;margin: 0;font-size: 24upx;text-align: center;color: #fff;border-radius: 0;margin-right: 14upx;}
247 | 	.first-btn{width: 206upx;border: 1px solid #dc5a00;background-color: #e06e11;}
248 | 	.two-btn{width: 170upx;border: 1px solid #6c9ccd;background-color: #f3f3f3;color: #73a1cf;}
249 | 	.three-btn{width: 180upx;border: 1px solid #6c9ccd;background-color: #7ca7d2;}
250 | 	.btn:after{border: none;}
251 | 	.sort{display: flex;margin-top: 30upx;}
252 | 	.sort-label{width: 120upx;line-height: 52upx;}
253 | 	.sort-select{width: 120upx;height: 50upx;text-align: center;border-radius: 30upx;border: 1px solid #e3dbd3;color: #e3dbd3;font-size: 24upx;line-height: 50upx;margin-right: 15upx;}
254 | 	.sort-select.active{background-color: #e3dbd3;color: #fff;font-weight: 400;}
255 | 	.describe{border-top: 1px solid #f1f1f1;margin-top: 30upx;padding: 30upx 0 10upx;}
256 | 	.describe-title{margin-bottom: 10upx;}
257 | 	.describe-text{color: #666;font-size: 24upx;}
258 | </style>
259 | 


--------------------------------------------------------------------------------
/common/uni.css:
--------------------------------------------------------------------------------
   1 | @font-face {
   2 | 	font-family: uniicons;
   3 | 	font-weight: normal;
   4 | 	font-style: normal;
   5 | 	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
   6 | }
   7 | 
   8 | /*通用 */
   9 | view{
  10 | 	font-size:28upx; 
  11 | 	line-height:1.8;
  12 | }
  13 | progress, checkbox-group{
  14 | 	width: 100%;
  15 | }
  16 | form {
  17 | 	width: 100%;
  18 | }
  19 | .uni-flex {
  20 | 	display: flex;
  21 | 	flex-direction: row;
  22 | }
  23 | .uni-flex-item {
  24 | 	flex: 1;
  25 | }
  26 | .uni-row {
  27 | 	flex-direction: row;
  28 | }
  29 | .uni-column {
  30 | 	flex-direction: column;
  31 | }
  32 | .uni-link{
  33 | 	color:#576B95;
  34 | 	font-size:26upx;
  35 | }
  36 | .uni-center{
  37 | 	text-align:center;
  38 | }
  39 | .uni-inline-item{
  40 | 	display: flex;
  41 | 	flex-direction: row;
  42 | 	align-items:center;
  43 | }
  44 | .uni-inline-item text{
  45 | 	margin-right: 20upx;
  46 | }
  47 | .uni-inline-item text:last-child{
  48 | 	margin-right: 0upx;
  49 | 	margin-left: 20upx;
  50 | }
  51 | 
  52 | /* page */
  53 | .uni-page-head{
  54 | 	padding:35upx; 
  55 | 	text-align: center;
  56 | }
  57 | .uni-page-head-title {
  58 | 	display: inline-block;
  59 | 	padding: 0 40upx;
  60 | 	font-size: 30upx;
  61 | 	height: 88upx;
  62 | 	line-height: 88upx;
  63 | 	color: #BEBEBE;
  64 | 	box-sizing: border-box;
  65 | 	border-bottom: 2upx solid #D8D8D8;
  66 | }
  67 | .uni-page-body {
  68 | 	width: 100%;
  69 | 	flex-grow: 1;
  70 | 	overflow-x: hidden;
  71 | }
  72 | .uni-padding-wrap{
  73 | 	width:690upx;
  74 | 	padding:0 30upx;
  75 | }
  76 | .uni-word {
  77 | 	text-align: center;
  78 | 	padding:200upx 100upx;
  79 | }
  80 | .uni-title {
  81 | 	font-size:30upx;
  82 | 	font-weight:500;
  83 | 	padding:20upx 0;
  84 | 	line-height:1.5;
  85 | }
  86 | .uni-text{
  87 | 	font-size:28upx;
  88 | }
  89 | .uni-title text{
  90 | 	font-size:24upx; 
  91 | 	color:#888;
  92 | }
  93 | 
  94 | .uni-text-gray{
  95 | 	color: #ccc;
  96 | }
  97 | .uni-text-small {
  98 | 	font-size:24upx;
  99 | }
 100 | .uni-common-mb{
 101 | 	margin-bottom:30upx;
 102 | }
 103 | .uni-common-pb{
 104 | 	padding-bottom:30upx;
 105 | }
 106 | .uni-common-pl{
 107 | 	padding-left:30upx;
 108 | }
 109 | .uni-common-mt{
 110 | 	margin-top:30upx;
 111 | }
 112 | /* 背景色 */
 113 | .uni-bg-red{
 114 | 	background:#F76260; color:#FFF;
 115 | }
 116 | .uni-bg-green{
 117 | 	background:#09BB07; color:#FFF;
 118 | }
 119 | .uni-bg-blue{
 120 | 	background:#007AFF; color:#FFF;
 121 | }
 122 | /* 标题 */
 123 | .uni-h1 {font-size: 80upx; font-weight:700;}
 124 | .uni-h2 {font-size: 60upx; font-weight:700;}
 125 | .uni-h3 {font-size: 48upx; font-weight:700;}
 126 | .uni-h4 {font-size: 36upx; font-weight:700;}
 127 | .uni-h5 {font-size: 28upx; color: #8f8f94;}
 128 | .uni-h6 {font-size: 24upx; color: #8f8f94;}
 129 | .uni-bold{font-weight:bold;}
 130 | 
 131 | /* 文本溢出隐藏 */
 132 | .uni-ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
 133 | 
 134 | /* 竖向百分百按钮 */
 135 | .uni-btn-v{
 136 | 	padding:10upx 0;
 137 | }
 138 | .uni-btn-v button{margin:20upx 0;}
 139 | 
 140 | /* 表单 */
 141 | .uni-form-item{
 142 | 	display:flex;
 143 | 	width:100%;
 144 | 	padding:10upx 0;
 145 | }
 146 | .uni-form-item .title{
 147 | 	padding:10upx 25upx;
 148 | }
 149 | .uni-label {
 150 | 	width: 210upx;
 151 | 	word-wrap: break-word;
 152 | 	word-break: break-all;
 153 | 	text-indent:20upx;
 154 | }
 155 | .uni-input {
 156 | 	height: 50upx;
 157 | 	padding: 15upx 25upx;
 158 | 	line-height:50upx;
 159 | 	font-size:28upx;
 160 | 	background:#FFF;
 161 | 	flex: 1;
 162 | }
 163 | radio-group, checkbox-group{
 164 | 	width:100%;
 165 | }
 166 | radio-group label, checkbox-group label{
 167 | 	padding-right:20upx;
 168 | }
 169 | .uni-form-item .with-fun{
 170 | 	display:flex; 
 171 | 	flex-wrap:nowrap; 
 172 | 	background:#FFFFFF;
 173 | }
 174 | .uni-form-item .with-fun .uni-icon{
 175 | 	width:40px; 
 176 | 	height:80upx; 
 177 | 	line-height:80upx; 
 178 | 	flex-shrink:0;
 179 | }
 180 | 
 181 | /* loadmore */
 182 | .uni-loadmore{
 183 | 	height:80upx;
 184 | 	line-height:80upx;
 185 | 	text-align:center;
 186 | 	padding-bottom:30upx;
 187 | }
 188 | /*数字角标*/
 189 | .uni-badge,
 190 | .uni-badge-default {
 191 | 	font-family: 'Helvetica Neue', Helvetica, sans-serif;
 192 | 	font-size: 12px;
 193 | 	line-height: 1;
 194 | 	display: inline-block;
 195 | 	padding: 3px 6px;
 196 | 	color: #333;
 197 | 	border-radius: 100px;
 198 | 	background-color: rgba(0, 0, 0, .15);
 199 | }
 200 | .uni-badge.uni-badge-inverted {
 201 | 	padding: 0 5px 0 0;
 202 | 	color: #929292;
 203 | 	background-color: transparent
 204 | }
 205 | .uni-badge-primary {
 206 | 	color: #fff;
 207 | 	background-color: #007aff
 208 | }
 209 | .uni-badge-blue.uni-badge-inverted,
 210 | .uni-badge-primary.uni-badge-inverted {
 211 | 	color: #007aff;
 212 | 	background-color: transparent
 213 | }
 214 | .uni-badge-green,
 215 | .uni-badge-success {
 216 | 	color: #fff;
 217 | 	background-color: #4cd964;
 218 | }
 219 | .uni-badge-green.uni-badge-inverted,
 220 | .uni-badge-success.uni-badge-inverted {
 221 | 	color: #4cd964;
 222 | 	background-color: transparent
 223 | }
 224 | .uni-badge-warning,
 225 | .uni-badge-yellow {
 226 | 	color: #fff;
 227 | 	background-color: #f0ad4e
 228 | }
 229 | .uni-badge-warning.uni-badge-inverted,
 230 | .uni-badge-yellow.uni-badge-inverted {
 231 | 	color: #f0ad4e;
 232 | 	background-color: transparent
 233 | }
 234 | .uni-badge-danger,
 235 | .uni-badge-red {
 236 | 	color: #fff;
 237 | 	background-color: #dd524d
 238 | }
 239 | .uni-badge-danger.uni-badge-inverted,
 240 | .uni-badge-red.uni-badge-inverted {
 241 | 	color: #dd524d;
 242 | 	background-color: transparent
 243 | }
 244 | .uni-badge-purple,
 245 | .uni-badge-royal {
 246 | 	color: #fff;
 247 | 	background-color: #8a6de9
 248 | }
 249 | .uni-badge-purple.uni-badge-inverted,
 250 | .uni-badge-royal.uni-badge-inverted {
 251 | 	color: #8a6de9;
 252 | 	background-color: transparent
 253 | }
 254 | 
 255 | /*折叠面板 */
 256 | .uni-collapse-content {
 257 | 	height: 0;
 258 | 	width: 100%;
 259 | 	overflow: hidden;
 260 | }
 261 | .uni-collapse-content.uni-active {
 262 | 	height: auto;
 263 | }
 264 | 
 265 | /*卡片视图 */
 266 | .uni-card {
 267 | 	background: #fff;
 268 | 	border-radius: 8upx;
 269 | 	margin:20upx 0;
 270 | 	position: relative;
 271 | 	box-shadow: 0 2upx 4upx rgba(0, 0, 0, .3);
 272 | }
 273 | .uni-card-content {
 274 | 	font-size: 30upx;
 275 | }
 276 | .uni-card-content.image-view{
 277 |     width: 100%;
 278 |     margin: 0;
 279 | }
 280 | .uni-card-content-inner {
 281 | 	position: relative;
 282 | 	padding: 30upx;
 283 | }
 284 | .uni-card-footer,
 285 | .uni-card-header {
 286 | 	position: relative;
 287 | 	display: flex;
 288 | 	min-height: 50upx;
 289 | 	padding: 20upx 30upx;
 290 | 	justify-content: space-between;
 291 | 	align-items: center;
 292 | }
 293 | .uni-card-header {
 294 | 	font-size: 36upx;
 295 | }
 296 | .uni-card-footer {
 297 | 	color: #6d6d72;
 298 | }
 299 | .uni-card-footer:before,
 300 | .uni-card-header:after {
 301 | 	position: absolute;
 302 | 	top: 0;
 303 | 	right: 0;
 304 | 	left: 0;
 305 | 	height: 2upx;
 306 | 	content: '';
 307 | 	-webkit-transform: scaleY(.5);
 308 | 	transform: scaleY(.5);
 309 | 	background-color: #c8c7cc;
 310 | }
 311 | .uni-card-header:after {
 312 | 	top: auto;
 313 | 	bottom: 0;
 314 | }
 315 | .uni-card-media {
 316 | 	justify-content: flex-start;
 317 | }
 318 | .uni-card-media-logo {
 319 | 	height: 84upx;
 320 | 	width: 84upx;
 321 | 	margin-right: 20upx;
 322 | }
 323 | .uni-card-media-body {
 324 | 	height: 84upx;
 325 | 	display: flex;
 326 | 	flex-direction: column;
 327 | 	justify-content: space-between;
 328 | 	align-items: flex-start;
 329 | }
 330 | .uni-card-media-text-top {
 331 | 	line-height: 36upx;
 332 | 	font-size: 34upx;
 333 | }
 334 | .uni-card-media-text-bottom {
 335 | 	line-height: 30upx;
 336 | 	font-size: 28upx;
 337 | 	color: #8f8f94;
 338 | }
 339 | .uni-card-link {
 340 | 	color: #007AFF;
 341 | }
 342 | 
 343 | /* 列表 */
 344 | .uni-list {
 345 | 	background-color: #FFFFFF;
 346 | 	position: relative;
 347 | 	width: 100%;
 348 | 	display: flex;
 349 | 	flex-direction: column;
 350 | }
 351 | .uni-list:after {
 352 | 	position: absolute;
 353 | 	z-index: 10;
 354 | 	right: 0;
 355 | 	bottom: 0;
 356 | 	left: 0;
 357 | 	height: 1upx;
 358 | 	content: '';
 359 | 	-webkit-transform: scaleY(.5);
 360 | 	transform: scaleY(.5);
 361 | 	background-color: #c8c7cc;
 362 | }
 363 | .uni-list:before {
 364 | 	position: absolute;
 365 | 	z-index: 10;
 366 | 	right: 0;
 367 | 	top: 0;
 368 | 	left: 0;
 369 | 	height: 1upx;
 370 | 	content: '';
 371 | 	-webkit-transform: scaleY(.5);
 372 | 	transform: scaleY(.5);
 373 | 	background-color: #c8c7cc;
 374 | }
 375 | .uni-list-cell {
 376 | 	position: relative;
 377 | 	display: flex;
 378 | 	flex-direction: row;
 379 | 	justify-content: space-between;
 380 | 	align-items: center;
 381 | }
 382 | .uni-list-cell-hover {
 383 | 	background-color: #eee;
 384 | }
 385 | .uni-list-cell-pd {
 386 | 	padding: 22upx 30upx;
 387 | }
 388 | .uni-list-cell-left {
 389 | 	font-size:28upx;
 390 | 	padding: 0 30upx;
 391 | }
 392 | .uni-list-cell-db,
 393 | .uni-list-cell-right {
 394 | 	flex: 1;
 395 | }
 396 | .uni-list-cell:after {
 397 | 	position: absolute;
 398 |   z-index: 3;
 399 | 	right: 0;
 400 | 	bottom: 0;
 401 | 	left: 30upx;
 402 | 	height: 1upx;
 403 | 	content: '';
 404 | 	-webkit-transform: scaleY(.5);
 405 | 	transform: scaleY(.5);
 406 | 	background-color: #c8c7cc;
 407 | }
 408 | .uni-list .uni-list-cell:last-child:after {
 409 | 	height: 0upx;
 410 | }
 411 | .uni-list-cell-last.uni-list-cell:after {
 412 | 	height: 0upx;
 413 | }
 414 | .uni-list-cell-divider {
 415 | 	position: relative;
 416 | 	display: flex;
 417 | 	color: #999;
 418 | 	background-color: #f7f7f7;
 419 | 	padding:15upx 20upx;
 420 | }
 421 | .uni-list-cell-divider:before {
 422 | 	position: absolute;
 423 | 	right: 0;
 424 | 	top: 0;
 425 | 	left: 0upx;
 426 | 	height: 1upx;
 427 | 	content: '';
 428 | 	-webkit-transform: scaleY(.5);
 429 | 	transform: scaleY(.5);
 430 | 	background-color: #c8c7cc;
 431 | }
 432 | .uni-list-cell-divider:after {
 433 | 	position: absolute;
 434 | 	right: 0;
 435 | 	bottom: 0;
 436 | 	left: 0upx;
 437 | 	height: 1upx;
 438 | 	content: '';
 439 | 	-webkit-transform: scaleY(.5);
 440 | 	transform: scaleY(.5);
 441 | 	background-color: #c8c7cc;
 442 | }
 443 | .uni-list-cell-navigate {
 444 | 	font-size:30upx;
 445 | 	padding: 22upx 30upx;
 446 | 	line-height: 48upx;
 447 | 	position: relative;
 448 | 	display: flex;
 449 | 	box-sizing: border-box;
 450 | 	width: 100%;
 451 | 	flex: 1;
 452 | 	justify-content: space-between;
 453 | 	align-items: center;
 454 | }
 455 | .uni-list-cell-navigate {
 456 | 	padding-right: 36upx;
 457 | }
 458 | .uni-navigate-badge {
 459 | 	padding-right: 50upx;
 460 | }
 461 | .uni-list-cell-navigate.uni-navigate-right:after {
 462 | 	font-family: uniicons;
 463 | 	content: '\e583';
 464 | 	position: absolute;
 465 | 	right: 24upx;
 466 | 	top: 50%;
 467 | 	color: #bbb;
 468 | 	-webkit-transform: translateY(-50%);
 469 | 	transform: translateY(-50%);
 470 | }
 471 | .uni-list-cell-navigate.uni-navigate-bottom:after {
 472 | 	font-family: uniicons;
 473 | 	content: '\e581';
 474 | 	position: absolute;
 475 | 	right: 24upx;
 476 | 	top: 50%;
 477 | 	color: #bbb;
 478 | 	-webkit-transform: translateY(-50%);
 479 | 	transform: translateY(-50%);
 480 | }
 481 | .uni-list-cell-navigate.uni-navigate-bottom.uni-active:after {
 482 | 	font-family: uniicons;
 483 | 	content: '\e580';
 484 | 	position: absolute;
 485 | 	right: 24upx;
 486 | 	top: 50%;
 487 | 	color: #bbb;
 488 | 	-webkit-transform: translateY(-50%);
 489 | 	transform: translateY(-50%);
 490 | }
 491 | .uni-collapse.uni-list-cell {
 492 | 	flex-direction: column;
 493 | }
 494 | .uni-list-cell-navigate.uni-active {
 495 | 	background: #eee;
 496 | }
 497 | .uni-list.uni-collapse {
 498 | 	box-sizing: border-box;
 499 | 	height: 0;
 500 | 	overflow: hidden;
 501 | }
 502 | .uni-collapse .uni-list-cell {
 503 | 	padding-left: 20upx;
 504 | }
 505 | .uni-collapse .uni-list-cell:after {
 506 | 	left: 52upx;
 507 | }
 508 | .uni-list.uni-active {
 509 | 	height: auto;
 510 | }
 511 | 
 512 | /* 三行列表 */
 513 | .uni-triplex-row {
 514 | 	display: flex;
 515 | 	flex: 1;
 516 | 	width: 100%;
 517 | 	box-sizing: border-box;
 518 | 	flex-direction: row;
 519 | 	padding: 22upx 30upx;
 520 | }
 521 | .uni-triplex-right,
 522 | .uni-triplex-left {
 523 | 	display: flex;
 524 | 	flex-direction: column;
 525 | }
 526 | .uni-triplex-left {
 527 | 	width: 84%;
 528 | }
 529 | .uni-triplex-left .uni-title{
 530 | 	padding:8upx 0;
 531 | }
 532 | .uni-triplex-left .uni-text, .uni-triplex-left .uni-text-small{color:#999999;}
 533 | .uni-triplex-right {
 534 | 	width: 16%;
 535 | 	text-align: right;
 536 | }
 537 | 
 538 | /* 图文列表 */
 539 | .uni-media-list {
 540 | 	padding: 22upx 30upx;
 541 | 	box-sizing: border-box;
 542 | 	display: flex;
 543 | 	width: 100%;
 544 | 	flex-direction: row;
 545 | }
 546 | .uni-navigate-right.uni-media-list {
 547 | 	padding-right: 74upx;
 548 | }
 549 | .uni-pull-right {
 550 | 	flex-direction: row-reverse;
 551 | }
 552 | .uni-pull-right>.uni-media-list-logo {
 553 | 	margin-right: 0upx;
 554 | 	margin-left: 20upx;
 555 | }
 556 | .uni-media-list-logo {
 557 | 	height: 84upx;
 558 | 	width: 84upx;
 559 | 	margin-right: 20upx;
 560 | }
 561 | .uni-media-list-logo image {
 562 | 	height: 100%;
 563 | 	width: 100%;
 564 | }
 565 | .uni-media-list-body {
 566 | 	height: 84upx;
 567 | 	display: flex;
 568 | 	flex: 1;
 569 | 	flex-direction: column;
 570 | 	justify-content: space-between;
 571 | 	align-items: flex-start;
 572 | 	overflow: hidden;
 573 | }
 574 | .uni-media-list-text-top {
 575 | 	width: 100%;
 576 | 	line-height: 36upx;
 577 | 	font-size: 30upx;
 578 | }
 579 | .uni-media-list-text-bottom {
 580 | 	width: 100%;
 581 | 	line-height: 30upx;
 582 | 	font-size: 26upx;
 583 | 	color: #8f8f94;
 584 | }
 585 | 
 586 | /* 九宫格 */
 587 | .uni-grid-9 {
 588 | 	background: #f2f2f2;
 589 | 	width: 750upx;
 590 | 	display: flex;
 591 | 	flex-direction: row;
 592 | 	flex-wrap: wrap;
 593 | 	border-top: 2upx solid #eee;
 594 | }
 595 | .uni-grid-9-item {
 596 | 	width: 250upx;
 597 | 	height: 200upx;
 598 | 	display: flex;
 599 | 	flex-direction: column;
 600 | 	align-items: center;
 601 | 	justify-content: center;
 602 | 	border-bottom: 2upx solid;
 603 | 	border-right: 2upx solid;
 604 | 	border-color: #eee;
 605 | 	box-sizing: border-box;
 606 | }
 607 | .no-border-right {
 608 | 	border-right: none;
 609 | }
 610 | .uni-grid-9-image {
 611 | 	width: 100upx;
 612 | 	height: 100upx;
 613 | }
 614 | .uni-grid-9-text {
 615 | 	width: 250upx;
 616 | 	line-height: 4upx;
 617 | 	height: 40upx;
 618 | 	text-align: center;
 619 | 	font-size: 30upx;
 620 | }
 621 | .uni-grid-9-item-hover {
 622 | 	background: rgba(0, 0, 0, 0.1);
 623 | }
 624 | 
 625 | /* 上传 */
 626 | .uni-uploader {
 627 | 	flex: 1;
 628 | 	flex-direction: column;
 629 | }
 630 | .uni-uploader-head {
 631 | 	display: flex;
 632 | 	flex-direction: row;
 633 | 	justify-content: space-between;
 634 | }
 635 | .uni-uploader-info {
 636 | 	color: #B2B2B2;
 637 | }
 638 | .uni-uploader-body {
 639 | 	margin-top: 16upx;
 640 | }
 641 | .uni-uploader__files {
 642 | 	display: flex;
 643 | 	flex-direction: row;
 644 | 	flex-wrap: wrap;
 645 | }
 646 | .uni-uploader__file {
 647 | 	margin: 10upx;
 648 | 	width: 210upx;
 649 | 	height: 210upx;
 650 | }
 651 | .uni-uploader__img {
 652 | 	display: block;
 653 | 	width: 210upx;
 654 | 	height: 210upx;
 655 | }
 656 | .uni-uploader__input-box {
 657 | 	position: relative;
 658 | 	margin:10upx;
 659 | 	width: 208upx;
 660 | 	height: 208upx;
 661 | 	border: 2upx solid #D9D9D9;
 662 | }
 663 | .uni-uploader__input-box:before,
 664 | .uni-uploader__input-box:after {
 665 | 	content: " ";
 666 | 	position: absolute;
 667 | 	top: 50%;
 668 | 	left: 50%;
 669 | 	-webkit-transform: translate(-50%, -50%);
 670 | 	transform: translate(-50%, -50%);
 671 | 	background-color: #D9D9D9;
 672 | }
 673 | .uni-uploader__input-box:before {
 674 | 	width: 4upx;
 675 | 	height: 79upx;
 676 | }
 677 | .uni-uploader__input-box:after {
 678 | 	width: 79upx;
 679 | 	height: 4upx;
 680 | }
 681 | .uni-uploader__input-box:active {
 682 | 	border-color: #999999;
 683 | }
 684 | .uni-uploader__input-box:active:before,
 685 | .uni-uploader__input-box:active:after {
 686 | 	background-color: #999999;
 687 | }
 688 | .uni-uploader__input {
 689 | 	position: absolute;
 690 | 	z-index: 1;
 691 | 	top: 0;
 692 | 	left: 0;
 693 | 	width: 100%;
 694 | 	height: 100%;
 695 | 	opacity: 0;
 696 | }
 697 | 
 698 | /*问题反馈*/
 699 | .feedback-title {
 700 | 	display: flex;
 701 | 	flex-direction: row;
 702 | 	justify-content: space-between;
 703 | 	align-items: center;
 704 | 	padding: 20upx;
 705 | 	color: #8f8f94;
 706 | 	font-size: 28upx;
 707 | }
 708 | .feedback-star-view.feedback-title {
 709 | 	justify-content: flex-start;
 710 | 	margin: 0;
 711 | }
 712 | .feedback-quick {
 713 | 	position: relative;
 714 | 	padding-right: 40upx;
 715 | }
 716 | .feedback-quick:after {
 717 | 	font-family: uniicons;
 718 | 	font-size: 40upx;
 719 | 	content: '\e581';
 720 | 	position: absolute;
 721 | 	right: 0;
 722 | 	top: 50%;
 723 | 	color: #bbb;
 724 | 	-webkit-transform: translateY(-50%);
 725 | 	transform: translateY(-50%);
 726 | }
 727 | .feedback-body {
 728 | 	background: #fff;
 729 | }
 730 | .feedback-textare {
 731 | 	height: 200upx;
 732 | 	font-size: 34upx;
 733 | 	line-height: 50upx;
 734 | 	width: 100%;
 735 | 	box-sizing: border-box;
 736 | 	padding: 20upx 30upx 0;
 737 | }
 738 | .feedback-input {
 739 | 	font-size: 34upx;
 740 | 	height: 50upx;
 741 | 	min-height: 50upx;
 742 | 	padding: 15upx 20upx;
 743 | 	line-height: 50upx;
 744 | }
 745 | .feedback-uploader {
 746 | 	padding: 22upx 20upx;
 747 | }
 748 | .feedback-star {
 749 | 	font-family: uniicons;
 750 | 	font-size: 40upx;
 751 | 	margin-left: 6upx;
 752 | }
 753 | .feedback-star-view {
 754 | 	margin-left: 20upx;
 755 | }
 756 | .feedback-star:after {
 757 | 	content: '\e408';
 758 | }
 759 | .feedback-star.active {
 760 | 	color: #FFB400;
 761 | }
 762 | .feedback-star.active:after {
 763 | 	content: '\e438';
 764 | }
 765 | .feedback-submit {
 766 | 	background: #007AFF;
 767 | 	color: #FFFFFF;
 768 | 	margin: 20upx;
 769 | }
 770 | 
 771 | /* input group */
 772 | .uni-input-group {
 773 | 	position: relative;
 774 | 	padding: 0;
 775 | 	border: 0;
 776 | 	background-color: #fff;
 777 | }
 778 | 
 779 | .uni-input-group:before {
 780 | 	position: absolute;
 781 | 	top: 0;
 782 | 	right: 0;
 783 | 	left: 0;
 784 | 	height: 2upx;
 785 | 	content: '';
 786 | 	transform: scaleY(.5);
 787 | 	background-color: #c8c7cc;
 788 | }
 789 | 
 790 | .uni-input-group:after {
 791 | 	position: absolute;
 792 | 	right: 0;
 793 | 	bottom: 0;
 794 | 	left: 0;
 795 | 	height: 2upx;
 796 | 	content: '';
 797 | 	transform: scaleY(.5);
 798 | 	background-color: #c8c7cc;
 799 | }
 800 | 
 801 | .uni-input-row {
 802 | 	position: relative;
 803 | 	display: flex;
 804 | 	flex-direction: row;
 805 | 	font-size:28upx;
 806 | 	padding: 22upx 30upx;
 807 | 	justify-content: space-between;
 808 | }
 809 | 
 810 | .uni-input-group .uni-input-row:after {
 811 | 	position: absolute;
 812 | 	right: 0;
 813 | 	bottom: 0;
 814 | 	left: 30upx;
 815 | 	height: 2upx;
 816 | 	content: '';
 817 | 	transform: scaleY(.5);
 818 | 	background-color: #c8c7cc;
 819 | }
 820 | 
 821 | .uni-input-row label {
 822 | 	line-height: 70upx;
 823 | }
 824 | 
 825 | /* textarea */
 826 | .uni-textarea{
 827 | 	width:100%;
 828 | 	background:#FFF;
 829 | }
 830 | .uni-textarea textarea{
 831 | 	width:96%;
 832 | 	padding:18upx 2%;
 833 | 	line-height:1.6;
 834 | 	font-size:28upx;
 835 | 	height:150upx;
 836 | }
 837 | 
 838 | /* tab bar */
 839 | .uni-tab-bar {
 840 | 	display: flex;
 841 | 	flex: 1;
 842 | 	flex-direction: column;
 843 | 	overflow: hidden;
 844 | 	height: 100%;
 845 | }
 846 | 
 847 | .uni-tab-bar .list {
 848 | 	width: 750upx;
 849 | 	height: 100%;
 850 | }
 851 | 
 852 | .uni-swiper-tab {
 853 | 	width: 100%;
 854 | 	white-space: nowrap;
 855 | 	line-height: 100upx;
 856 | 	height: 100upx;
 857 | 	border-bottom: 1px solid #c8c7cc;
 858 | }
 859 | 
 860 | .swiper-tab-list {
 861 | 	font-size: 30upx;
 862 | 	width: 150upx;
 863 | 	display: inline-block;
 864 | 	text-align: center;
 865 | 	color: #555;
 866 | }
 867 | 
 868 | .uni-tab-bar .active {
 869 | 	color: #007AFF;
 870 | }
 871 | 
 872 | .uni-tab-bar .swiper-box {
 873 | 	flex: 1;
 874 | 	width: 100%;
 875 | 	height: calc(100% - 100upx);
 876 | }
 877 | 
 878 | .uni-tab-bar-loading{
 879 | 	padding:20upx 0;
 880 | }
 881 | 
 882 | /* steps */
 883 | .uni-steps{padding:20upx 30upx; flex-grow: 1; display:flex; flex-wrap:wrap;}
 884 | .uni-steps view{display:flex; flex-wrap:wrap; float:none;}
 885 | .uni-steps .step{width:31.3%; margin:0 1%; flex-wrap:nowrap;}
 886 | .uni-steps .step-circle{width:50upx; height:50upx; border-radius:50upx; background:#F1F1F3; justify-content:center; line-height:50upx; flex-shrink:0; margin-right:15upx; color:#666; font-size:28upx;}
 887 | .uni-steps .step-content{width:100%; height:22upx; border-bottom:1px solid #F1F2F3;}
 888 | .uni-steps .step-title{line-height:50upx; height:50upx; background:#FFFFFF; width:auto; overflow:hidden; padding-right:8upx;}
 889 | .uni-steps .current .step-circle{background:#00B26A; color:#FFFFFF;}
 890 | .uni-steps .current .step-content{border-color:#00B26A;}
 891 | .uni-steps .current .step-title{color:#00B26A;}
 892 | 
 893 | /* comment */
 894 | .uni-comment{padding:5rpx 0; display: flex; flex-grow:1; flex-direction: column;}
 895 | .uni-comment-list{flex-wrap:nowrap; padding:10rpx 0; margin:10rpx 0; width:100%; display: flex;}
 896 | .uni-comment-face{width:70upx; height:70upx; border-radius:100%; margin-right:20upx; flex-shrink:0; overflow:hidden;}
 897 | .uni-comment-face image{width:100%; border-radius:100%;}
 898 | .uni-comment-body{width:100%;}
 899 | .uni-comment-top{line-height:1.5em; justify-content:space-between;}
 900 | .uni-comment-top text{color:#0A98D5; font-size:24upx;}
 901 | .uni-comment-date{line-height:38upx; flex-direction:row; justify-content:space-between; display:flex !important; flex-grow:1;}
 902 | .uni-comment-date view{color:#666666; font-size:24upx; line-height:38upx;}
 903 | .uni-comment-content{line-height:1.6em; font-size:28upx; padding:8rpx 0;}
 904 | .uni-comment-replay-btn{background:#FFF; font-size:24upx; line-height:28upx; padding:5rpx 20upx; border-radius:30upx; color:#333 !important; margin:0 10upx;}
 905 | 
 906 | /* swiper msg */
 907 | .uni-swiper-msg{width:100%; padding:12rpx 0; flex-wrap:nowrap; display:flex;}
 908 | .uni-swiper-msg-icon{width:50upx; margin-right:20upx;}
 909 | .uni-swiper-msg-icon image{width:100%; flex-shrink:0;}
 910 | .uni-swiper-msg swiper{width:100%; height:50upx;}
 911 | .uni-swiper-msg swiper-item{line-height:50upx;}
 912 | 
 913 | /* product */
 914 | .uni-product-list {
 915 |     display: flex;
 916 |     width: 100%;
 917 |     flex-wrap: wrap;
 918 |     flex-direction: row;
 919 | }
 920 | 
 921 | .uni-product {
 922 |     padding: 20upx;
 923 |     display: flex;
 924 |     flex-direction: column;
 925 | }
 926 | 
 927 | .image-view {
 928 |     height: 330upx;
 929 |     width: 330upx;
 930 | 	margin:12upx 0;
 931 | }
 932 | 
 933 | .uni-product-image {
 934 |     height: 330upx;
 935 |     width: 330upx;
 936 | }
 937 | 
 938 | .uni-product-title {
 939 |     width: 300upx;
 940 |     word-break: break-all;
 941 |     display: -webkit-box;
 942 |     overflow: hidden;
 943 | 	line-height:1.5;
 944 |     text-overflow: ellipsis;
 945 |     -webkit-box-orient: vertical;
 946 |     -webkit-line-clamp: 2;
 947 | }
 948 | 
 949 | .uni-product-price {
 950 | 	margin-top:10upx;
 951 |     font-size: 28upx;
 952 | 	line-height:1.5;
 953 |     position: relative;
 954 | }
 955 | 
 956 | .uni-product-price-original {
 957 |     color: #e80080;
 958 | }
 959 | 
 960 | .uni-product-price-favour {
 961 |     color: #888888;
 962 |     text-decoration: line-through;
 963 |     margin-left: 10upx;
 964 | }
 965 | 
 966 | .uni-product-tip {
 967 |     position: absolute;
 968 |     right: 10upx;
 969 |     background-color: #ff3333;
 970 |     color: #ffffff;
 971 |     padding: 0 10upx;
 972 |     border-radius: 5upx;
 973 | }
 974 | 
 975 | /* timeline */
 976 | .uni-timeline {
 977 | 		margin: 35upx 0;
 978 | 		display: flex;
 979 | 		flex-direction: column;
 980 | 		position: relative;
 981 | 	}
 982 | 
 983 | 
 984 | 	.uni-timeline-item {
 985 | 		display: flex;
 986 | 		flex-direction: row;
 987 | 		position: relative;
 988 | 		padding-bottom: 20upx;
 989 | 		box-sizing: border-box;
 990 | 		overflow: hidden;
 991 | 
 992 | 	}
 993 | 
 994 | 	.uni-timeline-item .uni-timeline-item-keynode {
 995 | 		width: 160upx;
 996 | 		flex-shrink: 0;
 997 | 		box-sizing: border-box;
 998 | 		padding-right: 20upx;
 999 | 		text-align: right;
1000 | 		line-height: 65upx;
1001 | 	}
1002 | 
1003 | 	.uni-timeline-item .uni-timeline-item-divider {
1004 | 		flex-shrink: 0;
1005 | 		position: relative;
1006 | 		width: 30upx;
1007 | 		height: 30upx;
1008 | 		top: 15upx;
1009 | 		border-radius: 50%;
1010 | 		background-color: #bbb;
1011 | 	}
1012 | 
1013 | 
1014 | 
1015 | 	.uni-timeline-item-divider::before,
1016 | 	.uni-timeline-item-divider::after {
1017 | 		position: absolute;
1018 | 		left: 15upx;
1019 | 		width: 1upx;
1020 | 		height: 100vh;
1021 | 		content: '';
1022 | 		background: inherit;
1023 | 	}
1024 | 
1025 | 	.uni-timeline-item-divider::before {
1026 | 		bottom: 100%;
1027 | 	}
1028 | 
1029 | 	.uni-timeline-item-divider::after {
1030 | 		top: 100%;
1031 | 	}
1032 | 
1033 | 
1034 | 	.uni-timeline-last-item .uni-timeline-item-divider:after {
1035 | 		display: none;
1036 | 	}
1037 | 
1038 | 	.uni-timeline-first-item .uni-timeline-item-divider:before {
1039 | 		display: none;
1040 | 	}
1041 | 
1042 | 	.uni-timeline-item .uni-timeline-item-content {
1043 | 		padding-left: 20upx;
1044 | 	}
1045 | 	
1046 | 	.uni-timeline-last-item .bottom-border::after{
1047 | 		display: none;
1048 | 	}
1049 | 	
1050 | 	.uni-timeline-item-content .datetime{
1051 | 		color: #CCCCCC;
1052 | 	}
1053 | 	
1054 | 	/* 自定义节点颜色 */
1055 | 	.uni-timeline-last-item .uni-timeline-item-divider{
1056 | 		background-color: #1AAD19;
1057 | 	}
1058 |   
1059 |   
1060 | /* uni-icon */
1061 | 
1062 | .uni-icon {
1063 | 	font-family: uniicons;
1064 | 	font-size: 48upx;
1065 | 	font-weight: normal;
1066 | 	font-style: normal;
1067 | 	line-height: 1;
1068 | 	display: inline-block;
1069 | 	text-decoration: none;
1070 | 	-webkit-font-smoothing: antialiased;
1071 | }
1072 | 
1073 | .uni-icon.uni-active {
1074 | 	color: #007aff;
1075 | }
1076 | 
1077 | .uni-icon-contact:before {
1078 | 	content: '\e100';
1079 | }
1080 | 
1081 | .uni-icon-person:before {
1082 | 	content: '\e101';
1083 | }
1084 | 
1085 | .uni-icon-personadd:before {
1086 | 	content: '\e102';
1087 | }
1088 | 
1089 | .uni-icon-contact-filled:before {
1090 | 	content: '\e130';
1091 | }
1092 | 
1093 | .uni-icon-person-filled:before {
1094 | 	content: '\e131';
1095 | }
1096 | 
1097 | .uni-icon-personadd-filled:before {
1098 | 	content: '\e132';
1099 | }
1100 | 
1101 | .uni-icon-phone:before {
1102 | 	content: '\e200';
1103 | }
1104 | 
1105 | .uni-icon-email:before {
1106 | 	content: '\e201';
1107 | }
1108 | 
1109 | .uni-icon-chatbubble:before {
1110 | 	content: '\e202';
1111 | }
1112 | 
1113 | .uni-icon-chatboxes:before {
1114 | 	content: '\e203';
1115 | }
1116 | 
1117 | .uni-icon-phone-filled:before {
1118 | 	content: '\e230';
1119 | }
1120 | 
1121 | .uni-icon-email-filled:before {
1122 | 	content: '\e231';
1123 | }
1124 | 
1125 | .uni-icon-chatbubble-filled:before {
1126 | 	content: '\e232';
1127 | }
1128 | 
1129 | .uni-icon-chatboxes-filled:before {
1130 | 	content: '\e233';
1131 | }
1132 | 
1133 | .uni-icon-weibo:before {
1134 | 	content: '\e260';
1135 | }
1136 | 
1137 | .uni-icon-weixin:before {
1138 | 	content: '\e261';
1139 | }
1140 | 
1141 | .uni-icon-pengyouquan:before {
1142 | 	content: '\e262';
1143 | }
1144 | 
1145 | .uni-icon-chat:before {
1146 | 	content: '\e263';
1147 | }
1148 | 
1149 | .uni-icon-qq:before {
1150 | 	content: '\e264';
1151 | }
1152 | 
1153 | .uni-icon-videocam:before {
1154 | 	content: '\e300';
1155 | }
1156 | 
1157 | .uni-icon-camera:before {
1158 | 	content: '\e301';
1159 | }
1160 | 
1161 | .uni-icon-mic:before {
1162 | 	content: '\e302';
1163 | }
1164 | 
1165 | .uni-icon-location:before {
1166 | 	content: '\e303';
1167 | }
1168 | 
1169 | .uni-icon-mic-filled:before,
1170 | .uni-icon-speech:before {
1171 | 	content: '\e332';
1172 | }
1173 | 
1174 | .uni-icon-location-filled:before {
1175 | 	content: '\e333';
1176 | }
1177 | 
1178 | .uni-icon-micoff:before {
1179 | 	content: '\e360';
1180 | }
1181 | 
1182 | .uni-icon-image:before {
1183 | 	content: '\e363';
1184 | }
1185 | 
1186 | .uni-icon-map:before {
1187 | 	content: '\e364';
1188 | }
1189 | 
1190 | .uni-icon-compose:before {
1191 | 	content: '\e400';
1192 | }
1193 | 
1194 | .uni-icon-trash:before {
1195 | 	content: '\e401';
1196 | }
1197 | 
1198 | .uni-icon-upload:before {
1199 | 	content: '\e402';
1200 | }
1201 | 
1202 | .uni-icon-download:before {
1203 | 	content: '\e403';
1204 | }
1205 | 
1206 | .uni-icon-close:before {
1207 | 	content: '\e404';
1208 | }
1209 | 
1210 | .uni-icon-redo:before {
1211 | 	content: '\e405';
1212 | }
1213 | 
1214 | .uni-icon-undo:before {
1215 | 	content: '\e406';
1216 | }
1217 | 
1218 | .uni-icon-refresh:before {
1219 | 	content: '\e407';
1220 | }
1221 | 
1222 | .uni-icon-star:before {
1223 | 	content: '\e408';
1224 | }
1225 | 
1226 | .uni-icon-plus:before {
1227 | 	content: '\e409';
1228 | }
1229 | 
1230 | .uni-icon-minus:before {
1231 | 	content: '\e410';
1232 | }
1233 | 
1234 | .uni-icon-circle:before,
1235 | .uni-icon-checkbox:before {
1236 | 	content: '\e411';
1237 | }
1238 | 
1239 | .uni-icon-close-filled:before,
1240 | .uni-icon-clear:before {
1241 | 	content: '\e434';
1242 | }
1243 | 
1244 | .uni-icon-refresh-filled:before {
1245 | 	content: '\e437';
1246 | }
1247 | 
1248 | .uni-icon-star-filled:before {
1249 | 	content: '\e438';
1250 | }
1251 | 
1252 | .uni-icon-plus-filled:before {
1253 | 	content: '\e439';
1254 | }
1255 | 
1256 | .uni-icon-minus-filled:before {
1257 | 	content: '\e440';
1258 | }
1259 | 
1260 | .uni-icon-circle-filled:before {
1261 | 	content: '\e441';
1262 | }
1263 | 
1264 | .uni-icon-checkbox-filled:before {
1265 | 	content: '\e442';
1266 | }
1267 | 
1268 | .uni-icon-closeempty:before {
1269 | 	content: '\e460';
1270 | }
1271 | 
1272 | .uni-icon-refreshempty:before {
1273 | 	content: '\e461';
1274 | }
1275 | 
1276 | .uni-icon-reload:before {
1277 | 	content: '\e462';
1278 | }
1279 | 
1280 | .uni-icon-starhalf:before {
1281 | 	content: '\e463';
1282 | }
1283 | 
1284 | .uni-icon-spinner:before {
1285 | 	content: '\e464';
1286 | }
1287 | 
1288 | .uni-icon-spinner-cycle:before {
1289 | 	content: '\e465';
1290 | }
1291 | 
1292 | .uni-icon-search:before {
1293 | 	content: '\e466';
1294 | }
1295 | 
1296 | .uni-icon-plusempty:before {
1297 | 	content: '\e468';
1298 | }
1299 | 
1300 | .uni-icon-forward:before {
1301 | 	content: '\e470';
1302 | }
1303 | 
1304 | .uni-icon-back:before,
1305 | .uni-icon-left-nav:before {
1306 | 	content: '\e471';
1307 | }
1308 | 
1309 | .uni-icon-checkmarkempty:before {
1310 | 	content: '\e472';
1311 | }
1312 | 
1313 | .uni-icon-home:before {
1314 | 	content: '\e500';
1315 | }
1316 | 
1317 | .uni-icon-navigate:before {
1318 | 	content: '\e501';
1319 | }
1320 | 
1321 | .uni-icon-gear:before {
1322 | 	content: '\e502';
1323 | }
1324 | 
1325 | .uni-icon-paperplane:before {
1326 | 	content: '\e503';
1327 | }
1328 | 
1329 | .uni-icon-info:before {
1330 | 	content: '\e504';
1331 | }
1332 | 
1333 | .uni-icon-help:before {
1334 | 	content: '\e505';
1335 | }
1336 | 
1337 | .uni-icon-locked:before {
1338 | 	content: '\e506';
1339 | }
1340 | 
1341 | .uni-icon-more:before {
1342 | 	content: '\e507';
1343 | }
1344 | 
1345 | .uni-icon-flag:before {
1346 | 	content: '\e508';
1347 | }
1348 | 
1349 | .uni-icon-home-filled:before {
1350 | 	content: '\e530';
1351 | }
1352 | 
1353 | .uni-icon-gear-filled:before {
1354 | 	content: '\e532';
1355 | }
1356 | 
1357 | .uni-icon-info-filled:before {
1358 | 	content: '\e534';
1359 | }
1360 | 
1361 | .uni-icon-help-filled:before {
1362 | 	content: '\e535';
1363 | }
1364 | 
1365 | .uni-icon-more-filled:before {
1366 | 	content: '\e537';
1367 | }
1368 | 
1369 | .uni-icon-settings:before {
1370 | 	content: '\e560';
1371 | }
1372 | 
1373 | .uni-icon-list:before {
1374 | 	content: '\e562';
1375 | }
1376 | 
1377 | .uni-icon-bars:before {
1378 | 	content: '\e563';
1379 | }
1380 | 
1381 | .uni-icon-loop:before {
1382 | 	content: '\e565';
1383 | }
1384 | 
1385 | .uni-icon-paperclip:before {
1386 | 	content: '\e567';
1387 | }
1388 | 
1389 | .uni-icon-eye:before {
1390 | 	content: '\e568';
1391 | }
1392 | 
1393 | .uni-icon-arrowup:before {
1394 | 	content: '\e580';
1395 | }
1396 | 
1397 | .uni-icon-arrowdown:before {
1398 | 	content: '\e581';
1399 | }
1400 | 
1401 | .uni-icon-arrowleft:before {
1402 | 	content: '\e582';
1403 | }
1404 | 
1405 | .uni-icon-arrowright:before {
1406 | 	content: '\e583';
1407 | }
1408 | 
1409 | .uni-icon-arrowthinup:before {
1410 | 	content: '\e584';
1411 | }
1412 | 
1413 | .uni-icon-arrowthindown:before {
1414 | 	content: '\e585';
1415 | }
1416 | 
1417 | .uni-icon-arrowthinleft:before {
1418 | 	content: '\e586';
1419 | }
1420 | 
1421 | .uni-icon-arrowthinright:before {
1422 | 	content: '\e587';
1423 | }
1424 | 
1425 | .uni-icon-pulldown:before {
1426 | 	content: '\e588';
1427 | }
1428 | 
1429 | .uni-icon-scan:before {
1430 |     content: "\e612";
1431 | }


--------------------------------------------------------------------------------