刘文博 / gulu-vue

Download as
Browse Code »

Commit 600d4968f3ddf579b41a2e35c1c089e29a3dcb23

Authored by BigBoss
2 parents 7a2dda4461 f72f302c7a
Exists in master

修改冲突

Showing 13 changed files   Show diff stats
1 <script lang="ts"> 1 <script>
2 import Vue from 'vue'; 2 import Vue from 'vue';
3 import store from '@/store';
4
3 export default Vue.extend({ 5 export default Vue.extend({
4 mpType: 'app', 6 mpType: 'app',
5 onLaunch() { 7 onLaunch(options) {
6 console.log('App Launch') 8 const option = options || {};
9 // 获取用户来源
10 console.log('软件启动，输出转来的参数:', option);
11 console.log('场景值------------------:', option.scene);
12 let loginQueryInfo = option ? option.query : {};
13 loginQueryInfo = loginQueryInfo || {};
14 console.log('loginQueryInfo onShow===>', loginQueryInfo);
15 const scene = decodeURIComponent(loginQueryInfo.scene);
16 console.log('decodeURIComponent scense====>', scene);
17 let fromInfo = {};
18
19 if(scene.length > 0 ) {
20 const getQueryString = {
21 uid: undefined,
22 sid: undefined,
23 pid: undefined
24 };
25 const strB = scene.split('&');
26
27 for(let i = 0; i < strB.length; i += 1) {
28 getQueryString[strB[i].split('=')[0]] = unescape(strB[i].split('=')[1]);
29 }
30 fromInfo = {
31 loginQueryInfo,
32 fromuid: getQueryString.uid,
33 fromsid: getQueryString.sid,
34 frompid: getQueryString.pid,
35 scene: option.scene,
36 }
37 store.dispatch('user/setFrom', fromInfo);
38 console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString);
39 } else {
40 console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo);
41 if (loginQueryInfo.hasOwnProperty('sid') == false) {
42 loginQueryInfo.sid = 0;
43 }
44 if (loginQueryInfo.hasOwnProperty('pid') == false) {
45 loginQueryInfo.pid = 0;
46 }
47 if (loginQueryInfo.hasOwnProperty('uid') == false) {
48 loginQueryInfo.uid = 0;
49 }
50 fromInfo = {
51 loginQueryInfo,
52 fromuid: loginQueryInfo.uid,
53 fromsid: loginQueryInfo.sid,
54 frompid: loginQueryInfo.pid,
55 scene: option.scene,
56 }
57 store.dispatch('user/setFrom', fromInfo)
58 }
59
60 // 登陆
61 const openId = uni.getStorageSync('openid') || "";
62 if(openId.length <= 10) {
63 uni.clearStorageSync()
64 store.dispatch("user/login", fromInfo);
65 } else {
66 store.dispatch("user/getUserInfo", fromInfo);
67 }
7 }, 68 },
8 onShow() { 69 onShow() {
9 70
10 console.log('App Show') 71 console.log('App Show')
11 }, 72 },
12 onHide() { 73 onHide() {
13 console.log('App Hide') 74 console.log('App Hide')
75 },
76 methods: {
14 } 77 }
15 }); 78 });
16 </script> 79 </script>
17 80
18 <style> 81 <style>
19 /*每个页面公共css */ 82 /*每个页面公共css */
20 </style> 83 </style>
21 84
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @600d496
1 <template> 1 <template>
2 <view class="card" @tap="toGoods(goods.id,goods.goodType)"> 2 <view class="card" @tap="toGoods(goods.id,goods.goodType)">
3 <image mode="widthFix" :src="goods.imgurl" ></image> 3 <image mode="widthFix" :src="goods.imgurl" ></image>
4 <view class="name">{{goods.name}}</view> 4 <view class="name">{{goods.name}}</view>
5 <view class="info"> 5 <view class="info">
6 <view class="priceBox"> 6 <view class="priceBox">
7 <view class="price">{{goods.price}}</view> 7 <view class="price">{{goods.price}}</view>
8 <view class="originCost"> 8 <view class="originCost">
9 {{goods.rsSon.Max_Price}} 9 {{goods.rsSon.Max_Price}}
10 </view> 10 </view>
11 </view> 11 </view>
12 <view class="trade_num">{{goods.trade_num}}人购买</view> 12 <view class="trade_num">{{goods.trade_num}}人购买</view>
13 </view> 13 </view>
14 </view> 14 </view>
15 </template> 15 </template>
16 16
17 <script> 17 <script>
18 export default { 18 export default {
19 props: { 19 props: {
20 /** 20 /**
21 * 商品数据 21 * 商品数据
22 */ 22 */
23 goods: { 23 goods: {
24 id: Number, 24 id: Number,
25 imgurl: String, 25 imgurl: String,
26 name: String, 26 name: String,
27 rsSon:Object, 27 rsSon:Object,
28 originCost:String, 28 originCost:String,
29 price: String, 29 price: String,
30 trade_num:String, 30 trade_num:String,
31 goodType:String, 31 goodType:String,
32 } 32 }
33 33
34 }, 34 },
35 created() { 35 created() {
36 // console.log(this.goods) 36 // console.log(this.goods)
37 }, 37 },
38 data() { 38 data() {
39 return { 39 return {
40 40
41 }; 41 };
42 }, 42 },
43 methods:{ 43 methods:{
44 toGoods(id,type){ 44 toGoods(id,type){
45 uni.navigateTo({ 45 uni.navigateTo({
46 url: `../frameDetail/frameDetail?oderId=`+id, 46 url: `../frameDetail/frameDetail?oderId=`+id,
47 success: res => {}, 47 success: res => {},
48 fail: () => {}, 48 fail: () => {},
49 complete: () => {} 49 complete: () => {}
50 }); 50 });
51 console.log('toGoods =====> id:'+id +"======>type:"+type) 51 console.log('toGoods =====> id:'+id +"======>type:"+type)
52 switch(type){ 52 switch(type){
53 case 1: 53 case 1:
54 uni.navigateTo({ 54 uni.navigateTo({
55 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 55 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
56 success: res => {}, 56 success: res => {},
57 fail: () => {}, 57 fail: () => {},
58 complete: () => {} 58 complete: () => {}
59 }); 59 });
60 break; 60 break;
61 case 2: 61 case 2:
62 uni.navigateTo({ 62 uni.navigateTo({
63 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 63 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
64 success: res => {}, 64 success: res => {},
65 fail: () => {}, 65 fail: () => {},
66 complete: () => {} 66 complete: () => {}
67 }); 67 });
68 break; 68 break;
69 case 3: 69 case 3:
70 uni.navigateTo({ 70 uni.navigateTo({
71 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 71 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
72 success: res => {}, 72 success: res => {},
73 fail: () => {}, 73 fail: () => {},
74 complete: () => {} 74 complete: () => {}
75 }); 75 });
76 break; 76 break;
77 case 4: 77 case 4:
78 uni.navigateTo({ 78 uni.navigateTo({
79 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 79 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
80 success: res => {}, 80 success: res => {},
81 fail: () => {}, 81 fail: () => {},
82 complete: () => {} 82 complete: () => {}
83 }); 83 });
84 break; 84 break;
85 default : 85 default :
86 break 86 break
87 } 87 }
88 } 88 }
89 } 89 }
90 } 90 }
91 </script> 91 </script>
92 92
93 <style lang="scss"> 93 <style lang="scss">
94 image{ 94 image{
95 width: 100%; 95 width: 100%;
96 height: 120rpx; 96 height: 120rpx;
97 } 97 }
98 .name{ 98 .name{
99 width: 92%; 99 width: 92%;
100 height: 54rpx; 100 height: 54rpx;
101 padding: 5px 4%; 101 padding: 5px 4%;
102 display: -webkit-box; 102 display: -webkit-box;
103 -webkit-box-orient: vertical; 103 -webkit-box-orient: vertical;
104 -webkit-line-clamp: 2; 104 -webkit-line-clamp: 2;
105 text-align: justify; 105 text-align: justify;
106 overflow: hidden; 106 overflow: hidden;
107 font-size: 24rpx; 107 font-size: 24rpx;
108 color: #333333; 108 color: #333333;
109 } 109 }
110 .info{ 110 .info{
111 display: flex; 111 display: flex;
112 justify-content: space-between; 112 justify-content: space-between;
113 align-items: center; 113 align-items: center;
114 width: 92%; 114 width: 92%;
115 padding: 5px 4% 5px 4%; 115 padding: 5px 4% 5px 4%;
116 .priceBox{ 116 .priceBox{
117 display: flex; 117 display: flex;
118 justify-content: space-between; 118 justify-content: space-between;
119 align-items: center; 119 align-items: center;
120 .price{ 120 .price{
121 color: #EB5D3B; 121 color: #EB5D3B;
122 font-size: 28rpx; 122 font-size: 28rpx;
123 font-weight: 600; 123 font-weight: 600;
124 margin-right: 10rpx; 124 margin-right: 10rpx;
125 } 125 }
126 .originCost{ 126 .originCost{
127 text-decoration:line-through; 127 text-decoration:line-through;
128 color: #999999; 128 color: #999999;
129 font-size: 20rpx; 129 font-size: 20rpx;
130 } 130 }
131 131
132 } 132 }
133 .trade_num{ 133 .trade_num{
134 color: #999999; 134 color: #999999;
135 font-size: 20rpx; 135 font-size: 20rpx;
136 } 136 }
137 } 137 }
138 </style> 138 </style>
139
1 {
2 "pages": [
3 {
4 "path": "pages/index/index",
5 "style": {
6 "navigationBarTitleText": "商城一览"
7 }
8 },
9 {
10 "path" : "pages/myOrder/myOrder",
11 "style" : {
12 "navigationBarTitleText": "我的订单"}
13 },
14 {
15 "path": "pages/frameDetail/frameDetail",
16 "style": {
17 "navigationBarTitleText": "产品详情"
18 }
19 },
20 {
21 "path": "pages/lensDetails/lensDetails",
22 "style": {
23 "navigationBarTitleText": "产品详情"
24 }
25 },
26 {
27 "path": "pages/cart/cart",
28 "style": {
29 "navigationBarTitleText": "购物车"
30 }
31 },
32 {
33 "path" : "pages/purchaseLenses/purchaseLenses",
34 "style" : {
35 "navigationBarTitleText": "产品选购"
36 }
37 },
38 {
39 "path" : "pages/refundProgress/refundProgress",
40 "style": {
41 "navigationBarTitleText": "申请退款"
42 }
43 },
44 {
45 "path": "pages/addAddress/addAddress",
46 "style": {
47 "navigationBarTitleText": "新增地址"
48 }
49 },
50 {
51 "path" : "pages/confirmOrder/confirmOrder",
52 "style" : {
53 "navigationBarTitleText": "确认订单"
54 }
55 },
56 {
57 "path": "pages/user/user",
58 "style": {
59 "navigationBarTitleText": "我的"
60 }
61 },
62 {
63 "path": "pages/refundment/refundWays"
64 },
65 {
66 "path": "pages/refundment/refundment"
67 },
68 {
69 "path": "pages/predelivery/predelivery"
70 },
71 {
72 "path": "pages/customerService/customerService",
73 "style":{
74 "navigationBarTitleText" : "在线客服"
75 }
76 },
77 {
78 "path": "pages/myOrderPaying/myOrderPaying",
79 "style":{
80 "navigationBarTitleText" : "我的订单"
81 }
82 },
83 {
84 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
85 "style":{
86 "navigationBarTitleText" : "镜片名称名称"
87 }
88 },
89 {
90 "path" : "pages/detailStandard/detailStandard_sun",
91 "style": {
92 "navigationBarTitleText": "太阳镜选购页"
93 }
94 },
95 {
96 "path" : "pages/detailStandard/detailStandard_k",
97 "style": {
98 "navigationBarTitleText": "镜框选购页"
99 }
100 }
101
102 ],
103 "globalStyle": {
104 "navigationBarTextStyle": "black",
105 "navigationBarTitleText": "uni-app",
106 "navigationBarBackgroundColor": "#F8F8F8",
107 "backgroundColor": "#F8F8F8"
108 },
109 "tabBar": {
110 "color": "#C0C4CC",
111 "selectedColor": "#fa436a",
112 "borderStyle": "black",
113 "backgroundColor": "#ffffff",
114 "list": [{
115 "pagePath": "pages/index/index",
116 "iconPath": "static/tab-home.png",
117 "selectedIconPath": "static/tab-home-current.png",
118 "text": "首页"
119 },
120 {
121 "pagePath": "pages/cart/cart",
122 "iconPath": "static/tab-cart.png",
123 "selectedIconPath": "static/tab-cart-current.png",
124 "text": "购物车"
125 },
126 {
127 "pagePath": "pages/user/user",
128 "iconPath": "static/tab-my.png",
129 "selectedIconPath": "static/tab-my-current.png",
130 "text": "我的"
131 }
132 ]
133 },
134 "condition" : { //模式配置，仅开发期间生效
135 "current": 0, //当前激活的模式(list 的索引项)
136 "list": [
137 {
138 "name": "", //模式名称
139 "path": "", //启动页面，必选
140 "query": "" //启动参数，在页面的onLoad函数里面得到
141 }
142 ]
143 }
144 }
1 {
2 "pages" : [
3 {
src/pages/cart/cart.vue
Diff comments   View file @600d496
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 3
4 <view class="card"> 4 <view class="card">
5 <view class="cardHeader"> 5 <view class="cardHeader">
6 <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> -->
7 <block v-if="pIsoPen"> 6 <block v-if="pIsoPen">
8 <view class="partentChecked" @click="pChange(pIsoPen)"> 7 <view class="partentChecked" @click="pChange(pIsoPen)">
9 <span class="status correct"></span> 8 <span class="status correct"></span>
10 </view> 9 </view>
11 </block> 10 </block>
12 <block v-else> 11 <block v-else>
13 <view class="partentCheck" @click="pChange(pIsoPen)"></view> 12 <view class="partentCheck" @click="pChange(pIsoPen)"></view>
14 </block> 13 </block>
15 <image src="../../static/store.png" mode="aspectFill"></image> 14 <image src="../../static/store.png" mode="aspectFill"></image>
16 <text>非常戴镜</text> 15 <text>非常戴镜</text>
17 </view> 16 </view>
18 17
19 <view class="cardBody"> 18 <view class="cardBody">
20 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
21 <template v-if="childIsOpen.child1"> 19 <template v-if="childIsOpen.child1">
22 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> 20 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
23 <span class="status correct"></span> 21 <span class="status correct"></span>
24 </view> 22 </view>
25 </template> 23 </template>
26 <template v-else> 24 <template v-else>
27 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> 25 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
28 </template> 26 </template>
29 <view class="goodInfo"> 27 <view class="goodInfo">
30 <view class="imageWrap"> 28 <view class="imageWrap">
31 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 29 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
32 </view> 30 </view>
33 <view class="infoRight"> 31 <view class="infoRight">
34 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 32 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
35 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 33 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
36 <!-- <text class="icon">></text> --> 34 <view class="icon"></view>
37 </view> 35 </view>
38 <view class="priceBox"> 36 <view class="priceBox">
39 <view class="price">￥{{198}}</view> 37 <view class="price">￥{{198}}</view>
40 <text>(限购{{maxCount}}副)</text> 38 <text>(限购{{maxCount}}副)</text>
41 <view class="counter"> 39 <view class="counter">
42 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 40 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
43 <text>{{count}}</text> 41 <text>{{count}}</text>
44 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 42 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
45 </view> 43 </view>
46 </view> 44 </view>
47 </view> 45 </view>
48 </view> 46 </view>
49 </view> 47 </view>
50 <view class="cardBody"> 48 <view class="cardBody">
51 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> 49 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
52 <template v-if="childIsOpen.child2"> 50 <template v-if="childIsOpen.child2">
53 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')"> 51 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
54 <span class="status correct"></span> 52 <span class="status correct"></span>
55 </view> 53 </view>
56 </template> 54 </template>
57 <template v-else> 55 <template v-else>
58 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view> 56 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
59 </template> 57 </template>
60 <view class="goodInfo"> 58 <view class="goodInfo">
61 <view class="imageWrap"> 59 <view class="imageWrap">
62 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 60 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
63 </view> 61 </view>
64 <view class="infoRight"> 62 <view class="infoRight">
65 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 63 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
66 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 64 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
67 <!-- <text class="icon">></text> --> 65 <view class="icon"></view>
68 </view> 66 </view>
69 <view class="priceBox"> 67 <view class="priceBox">
70 <view class="price">￥198</view> 68 <view class="price">￥198</view>
71 <text>(限购{{maxCount}}副)</text> 69 <text>(限购{{maxCount}}副)</text>
72 <view class="counter"> 70 <view class="counter">
73 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 71 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
74 <text>{{count}}</text> 72 <text>{{count}}</text>
75 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 73 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
76 </view> 74 </view>
77 </view> 75 </view>
78 </view> 76 </view>
79 </view> 77 </view>
80 </view> 78 </view>
81 </view> 79 </view>
82 80
83 <view class="footer"> 81 <view class="footer">
84 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 82 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
85 <view class="footerRight"> 83 <view class="footerRight">
86 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> 84 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
87 <view class="paybtn">立即支付</view> 85 <view class="paybtn">立即支付</view>
88 </navigator> 86 </navigator>
89 </view> 87 </view>
90 </view> 88 </view>
91 89
92 </view> 90 </view>
93 </template> 91 </template>
94 92
95 <script> 93 <script>
94 import store from '@/store';
95
96 export default { 96 export default {
97 97
98 data() { 98 data() {
99 return { 99 return {
100 totalPrice: 360, 100 totalPrice: 360,
101 count:1, 101 count:1,
102 maxCount:20, 102 maxCount:20,
103 pIsoPen: false, 103 pIsoPen: false,
104 childIsOpen:{ 104 childIsOpen:{
105 "child1":true, 105 "child1":true,
106 "child2":true 106 "child2":true
107 }, 107 },
108 } 108 }
109 }, 109 },
110 onLoad() { 110 computed:{
111 111 cartList() {
112 } 112 // 也可以从 getters 获取
113 , 113 console.log('cart-list', this.$store.state.cart.cartList);
114 return this.$store.state.cart.cartList;
115 }
116 },
117 onLoad: function() {
118 store.dispatch('cart/getCartList',{
119 uid: 1, //用户id
120 });
121 },
114 methods: { 122 methods: {
115 counter(isadd){ 123 counter(isadd){
116 if(isadd){ 124 if(isadd){
117 this.count >= this.maxCount? this.addDisabled = true:this.count++; 125 this.count >= this.maxCount? this.addDisabled = true:this.count++;
118 }else{ 126 }else{
119 this.count <= 1? this.desDisabled = true:this.count--; 127 this.count <= 1? this.desDisabled = true:this.count--;
120 } 128 }
121 }, 129 },
122 pChange(isopen){ 130 pChange(isopen){
123 // console.log(isopen) 131 // console.log(isopen)
124 this.pIsoPen=!isopen 132 this.pIsoPen=!isopen
125 this.childIsOpen.child1=!isopen 133 this.childIsOpen.child1=!isopen
126 this.childIsOpen.child2=!isopen 134 this.childIsOpen.child2=!isopen
127 }, 135 },
128 cChange(isopen,child){ 136 cChange(isopen,child){
129 // console.log(child) 137 // console.log(child)
130 if(child==='child1'){ 138 if(child==='child1'){
131 this.childIsOpen.child1=!isopen 139 this.childIsOpen.child1=!isopen
132 } 140 }
133 if(child==='child2'){ 141 if(child==='child2'){
134 this.childIsOpen.child2=!isopen 142 this.childIsOpen.child2=!isopen
135 } 143 }
136 } 144 }
137 } 145 }
138 } 146 }
139 </script> 147 </script>
140 148
141 <style lang="scss"> 149 <style lang="scss">
142 .content { 150 .content {
143 min-height: 100vh; 151 min-height: 100vh;
144 background-color: #f2f2f2; 152 background-color: #f2f2f2;
145 display: flex; 153 display: flex;
146 flex-direction: column; 154 flex-direction: column;
147 align-items: center; 155 align-items: center;
148 justify-content: space-between; 156 justify-content: space-between;
149 padding: 20rpx 40rpx; 157 padding: 20rpx 40rpx;
150 box-sizing: border-box; 158 box-sizing: border-box;
151 159
152 .partentCheck{ 160 .partentCheck{
153 width: 16px; 161 width: 16px;
154 height: 16px; 162 height: 16px;
155 border-radius: 18px; 163 border-radius: 18px;
156 border: 1px solid #CFCFCF; 164 border: 1px solid #CFCFCF;
157 background-color: #FFFFFF; 165 background-color: #FFFFFF;
158 } 166 }
159 .partentChecked{ 167 .partentChecked{
160 width: 18px; 168 width: 18px;
161 height: 18px; 169 height: 18px;
162 border-radius: 18px; 170 border-radius: 18px;
163 background-color: #FF6B4A; 171 background-color: #FF6B4A;
164 .correct { 172 .correct {
165 display: inline-block; 173 display: inline-block;
166 width: 5px; 174 width: 5px;
167 height: 1px; 175 height: 1px;
168 background: #FFFFFF; 176 background: #FFFFFF;
169 line-height: 0; 177 line-height: 0;
170 font-size: 0; 178 font-size: 0;
171 position: relative; 179 position: relative;
172 top: -6px; 180 top: -6px;
173 left: 4px; 181 left: 4px;
174 -webkit-transform: rotate(45deg); 182 -webkit-transform: rotate(45deg);
175 } 183 }
176 .correct:after { 184 .correct:after {
177 content: '/'; 185 content: '/';
178 display: block; 186 display: block;
179 width: 8px; 187 width: 8px;
180 height: 1px; 188 height: 1px;
181 background: #FFFFFF; 189 background: #FFFFFF;
182 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 190 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
183 } 191 }
184 } 192 }
185 193
186 .card{ 194 .card{
187 background-color: #FFFFFF; 195 background-color: #FFFFFF;
188 border-radius: 16rpx; 196 border-radius: 16rpx;
189 box-sizing: border-box; 197 box-sizing: border-box;
190 padding: 36rpx 36rpx 36rpx 18rpx; 198 padding: 36rpx 36rpx 36rpx 18rpx;
191 display: flex; 199 display: flex;
192 flex-direction: column; 200 flex-direction: column;
193 align-items: center; 201 align-items: center;
194 justify-content: space-between; 202 justify-content: space-between;
195 .cardHeader{ 203 .cardHeader{
196 width: 100%; 204 width: 100%;
197 height: 36rpx; 205 height: 36rpx;
198 display: flex; 206 display: flex;
199 align-items: center; 207 align-items: center;
200 justify-content: flex-start; 208 justify-content: flex-start;
201 image{ 209 image{
202 height: 32rpx; 210 height: 32rpx;
203 width: 32rpx; 211 width: 32rpx;
204 padding-left: 6px; 212 padding-left: 6px;
205 padding-right: 10px; 213 padding-right: 10px;
206 } 214 }
207 text{ 215 text{
208 // font-family: PingFangSC-Regular; 216 // font-family: PingFangSC-Regular;
209 font-size: 14px; 217 font-size: 14px;
210 color: #333333; 218 color: #333333;
211 letter-spacing: -0.26px; 219 letter-spacing: -0.26px;
212 } 220 }
213 } 221 }
214 .cardBody{ 222 .cardBody{
215 width: 100%; 223 width: 100%;
216 height: 300rpx; 224 height: 300rpx;
217 display: flex; 225 display: flex;
218 align-items: center; 226 align-items: center;
219 justify-content: space-between; 227 justify-content: space-between;
220 .goodInfo{ 228 .goodInfo{
221 width: 95%; 229 width: 95%;
222 display: flex; 230 display: flex;
223 flex-direction: row; 231 flex-direction: row;
224 justify-content: flex-start; 232 justify-content: flex-start;
225 padding-left: 6px; 233 padding-left: 6px;
226 .imageWrap{ 234 .imageWrap{
227 height: 188rpx; 235 height: 188rpx;
228 width: 188rpx; 236 width: 188rpx;
229 margin-right: 28rpx; 237 margin-right: 28rpx;
230 image{ 238 image{
231 border-radius: 4px; 239 border-radius: 4px;
232 height: 188rpx; 240 height: 188rpx;
233 width: 188rpx; 241 width: 188rpx;
234 } 242 }
235 } 243 }
236 .infoRight{ 244 .infoRight{
237 display: flex; 245 display: flex;
238 flex-direction: column; 246 flex-direction: column;
239 align-items: flex-start; 247 align-items: flex-start;
240 justify-content: space-between; 248 justify-content: space-between;
241 height: 240rpx; 249 height: 240rpx;
242 .goodName{ 250 .goodName{
243 font-size: 28rpx; 251 font-size: 28rpx;
244 color: #333333; 252 color: #333333;
245 } 253 }
246 .describ{ 254 .describ{
247 width: 100%; 255 width: 100%;
248 height: 80rpx; 256 height: 80rpx;
249 box-sizing: border-box; 257 box-sizing: border-box;
250 padding: 10rpx; 258 padding: 10rpx;
251 font-size: 20rpx; 259 font-size: 20rpx;
252 color: #999999; 260 color: #999999;
253 background: #F2F2F2; 261 background: #F2F2F2;
262 display: flex;
263 justify-content: center;
264 align-items: center;
254 text{ 265 text{
255 text-overflow: -o-ellipsis-lastline; 266 text-overflow: -o-ellipsis-lastline;
256 overflow: hidden; 267 overflow: hidden;
257 text-overflow: ellipsis; 268 text-overflow: ellipsis;
258 display: -webkit-box; 269 display: -webkit-box;
259 -webkit-line-clamp: 2; 270 -webkit-line-clamp: 2;
260 line-clamp: 2; 271 line-clamp: 2;
261 -webkit-box-orient: vertical; 272 -webkit-box-orient: vertical;
262 } 273 }
263 // .icon{ 274 // .icon{
264 // transform: rotate(90deg); 275 // transform: rotate(90deg);
276 // height: 13px;
277 // width: 20px;
278
265 // } 279 // }
280 .icon{
281 width: 0;
282 height: 0;
283 border-left: 5px transparent;
284 border-right: 5px transparent;
285 border-top: 5px #979797;
286 border-bottom: 0 transparent;
287 border-style: solid;
288 position: relative;
289 margin-left: 10px;
290 // transform: scaleY(-1);
291 }
292 .icon::after{
293 content: '';
294 position: absolute;
295 top: -6.5px;
296 left: -5px;
297 border-left: 5px transparent;
298 border-right: 5px transparent;
299 border-top: 5px #FFFFFF;
300 border-bottom: 0 transparent;
301 border-style: solid;
302 }
266 } 303 }
267 .priceBox{ 304 .priceBox{
268 display: flex; 305 display: flex;
269 justify-content: space-between; 306 justify-content: space-between;
270 align-items: center; 307 align-items: center;
271 // margin-top: 26px; 308 // margin-top: 26px;
272 width: 100%; 309 width: 100%;
273 font-size: 14px; 310 font-size: 14px;
274 color: #999999; 311 color: #999999;
275 .price{ 312 .price{
276 color: #FF6B4A; 313 color: #FF6B4A;
277 font-size: 28rpx; 314 font-size: 28rpx;
278 } 315 }
279 .counter{ 316 .counter{
280 display: flex; 317 display: flex;
281 flex-direction: row; 318 flex-direction: row;
282 justify-content: space-between; 319 justify-content: space-between;
283 align-items: center; 320 align-items: center;
284 font-size: 28rpx; 321 font-size: 28rpx;
285 color: #333333; 322 color: #333333;
286 width: 122rpx; 323 width: 122rpx;
287 .btn{ 324 .btn{
288 display: flex; 325 display: flex;
289 justify-content: center; 326 justify-content: center;
290 line-height: 32rpx; 327 line-height: 32rpx;
291 height: 32rpx; 328 height: 32rpx;
292 width: 32rpx; 329 width: 32rpx;
293 background-color: #F2F2F2; 330 background-color: #F2F2F2;
294 color: #CFCFCF; 331 color: #CFCFCF;
295 } 332 }
296 } 333 }
297 } 334 }
298 } 335 }
299 } 336 }
300 } 337 }
301 } 338 }
302 339
303 .footer{ 340 .footer{
304 position: fixed; 341 position: fixed;
305 left: 0; 342 left: 0;
306 bottom: 0px; 343 bottom: 0px;
307 height: 112rpx; 344 height: 112rpx;
308 width: 100%; 345 width: 100%;
309 background-color: #FFFFFF; 346 background-color: #FFFFFF;
310 font-size: 16px; 347 font-size: 16px;
311 display: flex; 348 display: flex;
312 justify-content: space-between; 349 justify-content: space-between;
313 align-items: center; 350 align-items: center;
314 .footerLeft{ 351 .footerLeft{
315 display: flex; 352 display: flex;
316 justify-content: center; 353 justify-content: center;
317 align-items: center; 354 align-items: center;
318 width: 50%; 355 width: 50%;
319 color: #333333; 356 color: #333333;
320 text{ 357 text{
321 color: #FF6B4A; 358 color: #FF6B4A;
322 } 359 }
323 } 360 }
324 .footerRight{ 361 .footerRight{
325 display: flex; 362 display: flex;
326 justify-content: flex-end; 363 justify-content: flex-end;
327 align-items: center; 364 align-items: center;
328 width: 50%; 365 width: 50%;
329 margin-right: 26rpx; 366 margin-right: 26rpx;
330 .paybtn{ 367 .paybtn{
331 display: flex; 368 display: flex;
332 justify-content: center; 369 justify-content: center;
333 align-items: center; 370 align-items: center;
334 background: #FF6B4A; 371 background: #FF6B4A;
335 border-radius: 20px; 372 border-radius: 20px;
336 border-radius: 20px; 373 border-radius: 20px;
337 color: #FFFFFF; 374 color: #FFFFFF;
338 width: 204rpx; 375 width: 204rpx;
339 height: 80rpx; 376 height: 80rpx;
340 } 377 }
341 } 378 }
342 379
343 } 380 }
344 } 381 }
345 382
346 383
347 384
src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
Diff comments   View file @600d496
1 <template> 1 <template>
2 <!-- 折叠框 --> 2 <!-- 折叠框 -->
3 <view class="myCollapse"> 3 <view class="myCollapse">
4 <view class="head"> 4 <view class="head">
5 <view>{{title}}</view> 5 <view>{{title}}</view>
6 <view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view> 6 <view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view>
7 <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view> 7 <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view>
8 <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view> 8 <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view>
9 </view> 9 </view>
10 <view class="body"> 10 <view class="body">
11 11
12 <block v-if="isOpen"> 12 <block v-if="isOpen">
13 13
14 <view style="background-color: #FFFFFF;" class="funBox"> 14 <view style="background-color: #FFFFFF;" class="funBox">
15 <block v-if="title==='镜片种类'"> 15 <block v-if="title==='镜片种类'">
16 <view class="noRange"> 16 <view class="noRange">
17 <block v-for="(item) in funList" :key="item.key"> 17 <block v-for="(item) in funList" :key="item.key">
18 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 18 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
19 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 19 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
20 </block> 20 </block>
21 </view> 21 </view>
22 <view class="noRange"> 22 <view class="noRange">
23 <block v-for="(item,index) in funList2" :key="item.key"> 23 <block v-for="(item,index) in funList2" :key="item.key">
24 <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'" 24 <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'"
25 :style="colorList[index]" @click="choice2(index,item.key-1,item.isChioce)"></view> 25 :style="colorList[index]" @click="choice2(index,item.isChioce)"></view>
26 </block> 26 </block>
27 </view> 27 </view>
28 </block> 28 </block>
29 <block v-else> 29 <block v-else>
30 <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view> 30 <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view>
31 <view class="noRange"> 31 <view class="noRange">
32 <block v-for="(item) in funList" :key="item.key"> 32 <block v-for="(item) in funList" :key="item.key">
33 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 33 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
34 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 34 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
35 </block> 35 </block>
36 </view> 36 </view>
37 37
38 <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view> 38 <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
39 <view class="noRange" style="max-width: 624rpx"> 39 <view class="noRange" style="max-width: 624rpx">
40 <block v-for="(item,index) in funList2" :key="item.key"> 40 <block v-for="(item,index) in funList2" :key="item.key">
41 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 41 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
42 @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view> 42 @click="choice2(index,item.isChioce)">{{item.name}}</view>
43 </block> 43 </block>
44 </view> 44 </view>
45 </block> 45 </block>
46 </view> 46 </view>
47 </block> 47 </block>
48 48
49 <block v-else> 49 <block v-else>
50 *<block v-for="(item,index) in funContent" :key="index"> 50 *<block v-for="(item,index) in funContent" :key="index">
51 <text v-if="item!==null">{{item}}</text> 51 <text v-if="item!==null">{{item}}</text>
52 </block> 52 </block>
53 </block> 53 </block>
54 </view> 54 </view>
55 </view> 55 </view>
56 56
57 </template> 57 </template>
58 58
59 <script> 59 <script>
60 export default { 60 export default {
61 props:{ 61 props:{
62 isOpenProps:{ 62 isOpenProps:{
63 // 是否展开，默认 true 63 // 是否展开，默认 true
64 type: Boolean, 64 type: Boolean,
65 default: true 65 default: true
66 }, 66 },
67 funListProp:{ 67 funListProp:{
68 "name":String, 68 "name":String,
69 "isChioce": Number, 69 "isChioce": Number,
70 "key":Number 70 "key":Number
71 }, 71 },
72 funList2Prop:{ 72 funList2Prop:{
73 type:Array, 73 type:Array,
74 } 74 }
75 , 75 ,
76 funContentProp: { 76 funContentProp: {
77 type: Array 77 type: Array
78 }, 78 },
79 title:{ 79 title:{
80 type: String, 80 type: String,
81 default: '' 81 default: ''
82 } 82 }
83 }, 83 },
84 data() { 84 data() {
85 return { 85 return {
86 isOpen:this.isOpenProps, 86 isOpen:this.isOpenProps,
87 // 颜色数组要与传入的值手动相同 87 // 颜色数组要与传入的值手动相同
88 colorList:[ 88 colorList:[
89 "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);", 89 "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
90 "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);", 90 "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
91 "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);", 91 "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
92 "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);", 92 "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
93 "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);" 93 "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
94 ], 94 ],
95 funList: this.funListProp, 95 funList: this.funListProp,
96 funList2: this.funList2Prop, 96 funList2: this.funList2Prop,
97 funContent: this.funContentProp 97 funContent: this.funContentProp
98 }; 98 };
99 }, 99 },
100 100
101 methods:{ 101 methods:{
102 myCollapseChange(isopen){ 102 myCollapseChange(isopen){
103 this.isOpen = !isopen 103 this.isOpen = !isopen
104 }, 104 },
105 choice(index,isChoice){ 105 choice(index,isChoice){
106 this.funList[index].isChioce = !isChoice 106 if(this.funList[index].type==="fun"){
107 if(!isChoice){ 107 this.funList[index].isChioce = !isChoice
108 this.funContent[index] = this.funList[index].name 108 if(!isChoice){
109 this.funContent[index] = this.funList[index].name
110 }
111 else{
112 this.funContent[index] = ''
113 }
109 } 114 }
110 else{ 115 else if(this.funList[index].type==="kind"){
111 this.funContent[index] = '' 116 for(let i=0;i<this.funList.length;i++){
117 this.funList[i].isChioce = false
118 }
119 this.funList[index].isChioce = !isChoice
120 this.funContent[0]=this.funList[index].name
121 }else {
122 for(let i=0;i<this.funList.length;i++){
123 this.funList[i].isChioce = false
124 }
125 for(let i=0;i<this.funList2.length;i++){
126 this.funList2[i].isChioce = false
127 }
128 this.funList[index].isChioce = !isChoice
129 this.funContent[0]=this.funList[index].name
112 } 130 }
113 }, 131 },
114 choice2(index,conIndex,isChoice){ 132 choice2(index,isChoice){
115 this.funList2[index].isChioce = !isChoice 133 if(this.funList2[index].type==="kind"){
116 if(!isChoice){ 134 for(let i=0;i<this.funList2.length;i++){
117 this.funContent[conIndex] = this.funList2[index].name 135 this.funList2[i].isChioce = false
136 }
137 this.funList2[index].isChioce = !isChoice
138 this.funContent[1] = this.funList2[index].name
118 } 139 }
119 else{ 140 else{
120 this.funContent[conIndex] = '' 141 for(let i=0;i<this.funList.length;i++){
142 this.funList[i].isChioce = false
143 }
144 for(let i=0;i<this.funList2.length;i++){
145 this.funList2[i].isChioce = false
146 }
147 this.funList2[index].isChioce = !isChoice
148 this.funContent[0]=this.funList2[index].name
121 } 149 }
122 } 150 }
123 } 151 }
124 } 152 }
125 </script> 153 </script>
126 154
127 <style lang="scss"> 155 <style lang="scss">
128 .myCollapse{ 156 .myCollapse{
129 width: 100%; 157 width: 100%;
130 padding-bottom: 28rpx; 158 padding-bottom: 28rpx;
131 margin-top: 7px; 159 margin-top: 7px;
132 border-bottom: 1px solid #E9E9E9; 160 border-bottom: 1px solid #E9E9E9;
133 .head{ 161 .head{
134 display: flex; 162 display: flex;
135 justify-content: space-between; 163 justify-content: space-between;
136 height: 24px; 164 height: 24px;
137 // font-family: PingFangSC-Medium; 165 // font-family: PingFangSC-Medium;
138 font-size: 16px; 166 font-size: 16px;
139 color: #333333; 167 color: #333333;
140 letter-spacing: -0.3px; 168 letter-spacing: -0.3px;
141 text-align: justify; 169 text-align: justify;
142 line-height: 24px; 170 line-height: 24px;
143 margin-bottom: 18rpx; 171 margin-bottom: 18rpx;
144 .headRighted{ 172 .headRighted{
145 width: 0; 173 width: 0;
146 height: 0; 174 height: 0;
147 border-left: 4px solid transparent; 175 border-left: 4px solid transparent;
148 border-right: 4px solid transparent; 176 border-right: 4px solid transparent;
149 border-bottom: 4px solid #CFCFCF; 177 border-bottom: 4px solid #CFCFCF;
150 transform: scaleY(-1); 178 transform: scaleY(-1);
151 margin-top: 10px; 179 margin-top: 10px;
152 } 180 }
153 .headMid{ 181 .headMid{
154 // font-family: PingFangSC-Regular; 182 // font-family: PingFangSC-Regular;
155 font-size: 10px; 183 font-size: 10px;
156 color: #999999; 184 color: #999999;
157 letter-spacing: -0.19px; 185 letter-spacing: -0.19px;
158 margin-left: -120rpx; 186 margin-left: -120rpx;
159 } 187 }
160 .headRight{ 188 .headRight{
161 width: 0; 189 width: 0;
162 height: 0; 190 height: 0;
163 border-left: 4px solid transparent; 191 border-left: 4px solid transparent;
164 border-right: 4px solid transparent; 192 border-right: 4px solid transparent;
165 border-bottom: 4px solid #CFCFCF; 193 border-bottom: 4px solid #CFCFCF;
166 margin-top: 10px; 194 margin-top: 10px;
167 } 195 }
168 } 196 }
169 .body{ 197 .body{
170 // font-family: PingFangSC-Regular; 198 // font-family: PingFangSC-Regular;
171 font-size: 12px; 199 font-size: 12px;
172 color: #666666; 200 color: #666666;
173 letter-spacing: 0; 201 letter-spacing: 0;
174 display: flex; 202 display: flex;
175 flex-wrap: wrap; 203 flex-wrap: wrap;
176 text{ 204 text{
177 padding-left: 4px; 205 padding-left: 4px;
178 } 206 }
179 } 207 }
180 } 208 }
181 .funBox { 209 .funBox {
182 // display: flex; 210 // display: flex;
183 width: 100%; 211 width: 100%;
184 // flex-wrap: wrap; 212 // flex-wrap: wrap;
185 // max-width: 624rpx; 213 // max-width: 624rpx;
186 .range{ 214 .range{
187 // font-family: PingFangSC-Regular; 215 // font-family: PingFangSC-Regular;
188 font-size: 10px; 216 font-size: 10px;
189 color: #999999; 217 color: #999999;
190 letter-spacing: -0.19px; 218 letter-spacing: -0.19px;
191 margin-bottom: 5px; 219 margin-bottom: 5px;
192 } 220 }
193 .noRange{ 221 .noRange{
194 display: flex; 222 display: flex;
195 flex-wrap: wrap; 223 flex-wrap: wrap;
196 // max-width: 624rpx; 224 // max-width: 624rpx;
197 // margin-bottom: 28rpx; 225 // margin-bottom: 28rpx;
198 .boxChoiced,.boxChoice{ 226 .boxChoiced,.boxChoice{
199 height: 60rpx; 227 height: 60rpx;
200 border-radius: 4rpx; 228 border-radius: 4rpx;
201 // font-family: PingFangSC-Regular; 229 // font-family: PingFangSC-Regular;
202 font-size: 12px; 230 font-size: 12px;
203 letter-spacing: 0; 231 letter-spacing: 0;
204 line-height: 60rpx; 232 line-height: 60rpx;
205 box-sizing: border-box; 233 box-sizing: border-box;
206 padding: 0 20rpx; 234 padding: 0 20rpx;
207 margin-right: 20rpx; 235 margin-right: 20rpx;
208 margin-bottom: 13rpx; 236 margin-bottom: 13rpx;
209 } 237 }
210 .boxChoiced{ 238 .boxChoiced{
211 background: rgba(255,107,74,0.15); 239 background: rgba(255,107,74,0.15);
212 color: #FF6B4A; 240 color: #FF6B4A;
213 } 241 }
214 .boxChoice{ 242 .boxChoice{
215 background: #F2F2F2; 243 background: #F2F2F2;
216 color: #666666; 244 color: #666666;
217 } 245 }
218 .boxChoiced-C,.boxChoice-C{ 246 .boxChoiced-C,.boxChoice-C{
219 width: 64rpx; 247 width: 64rpx;
220 height: 64rpx; 248 height: 64rpx;
221 border-radius: 32rpx; 249 border-radius: 32rpx;
222 margin-right: 8px; 250 margin-right: 8px;
223 } 251 }
224 .boxChoiced-C{ 252 .boxChoiced-C{
225 opacity: 0.7; 253 opacity: 0.7;
226 border: 1px solid #FF6B4A; 254 border: 1px solid #FF6B4A;
227 } 255 }
228 .boxChoice-C{ 256 .boxChoice-C{
229 opacity: 0.7; 257 opacity: 0.7;
230 border: 1px solid #FFFFFF; 258 border: 1px solid #FFFFFF;
231 } 259 }
232 } 260 }
233 261
234 } 262 }
235 </style> 263 </style>
236 264
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
Diff comments   View file @600d496
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="goods-info"> 3 <view class="goods-info">
4 <image src="../../static/myorder-paying-pic.png"></image> 4 <image src="../../static/myorder-paying-pic.png"></image>
5 <view class="box-right"> 5 <view class="box-right">
6 <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text> 6 <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
7 <text class="p2">支持7天无理由退货 顺丰发货</text> 7 <text class="p2">支持7天无理由退货 顺丰发货</text>
8 <view class="priceBox"> 8 <view class="priceBox">
9 <view class="price">￥{{price*count}}</view> 9 <view class="price">￥{{price*count}}</view>
10 <view class="counter"> 10 <view class="counter">
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> 11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 <text>{{count}}</text> 12 <text>{{count}}</text>
13 <view class="btn" @click="counter(true)">+</view> 13 <view class="btn" @click="counter(true)">+</view>
14 </view> 14 </view>
15 </view> 15 </view>
16 </view> 16 </view>
17 </view> 17 </view>
18 <view class="goods-data"> 18 <view class="goods-data">
19 <!-- 实用功能折叠框 --> 19 <!-- 实用功能折叠框 -->
20 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse> 20 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
21 <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse> 21 <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
22 <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse> 22 <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
23 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse> 23 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
24 24
25 <view class="opCollapse"> 25 <view class="opCollapse">
26 <view class="head"> 26 <view class="head">
27 <view v-if="!opIsOpen">填写验光数据</view> 27 <view v-if="!opIsOpen">填写验光数据</view>
28 <view v-else></view> 28 <view v-else></view>
29 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view> 29 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> 30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
31 </view> 31 </view>
32 <view class="body"> 32 <view class="body">
33 <template v-if="opIsOpen"> 33 <template v-if="opIsOpen">
34 34
35 <view class="goods-form"> 35 <view class="goods-form">
36 <text class="p1">填写验光数据</text> 36 <text class="p1">填写验光数据</text>
37 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 37 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
38 <view class="picker" > 38 <view class="picker" >
39 <view class="picker-choice"> 39 <view class="picker-choice">
40 <view class="choice-left"> 40 <view class="choice-left">
41 <text class="p11">{{pickerInfoList[0].nameC}}</text> 41 <text class="p11">{{pickerInfoList[0].nameC}}</text>
42 <text class="p12">{{pickerInfoList[0].nameE}}</text> 42 <text class="p12">{{pickerInfoList[0].nameE}}</text>
43 </view> 43 </view>
44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
47 <image src="../../static/detail-tabicon.png" ></image> 47 <image src="../../static/detail-tabicon.png" ></image>
48 </picker> 48 </picker>
49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
52 <image src="../../static/detail-tabicon.png" ></image> 52 <image src="../../static/detail-tabicon.png" ></image>
53 </picker> 53 </picker>
54 </view> 54 </view>
55 </view> 55 </view>
56 <view class="picker" > 56 <view class="picker" >
57 <view class="picker-choice"> 57 <view class="picker-choice">
58 <view class="choice-left"> 58 <view class="choice-left">
59 <text class="p11">{{pickerInfoList[1].nameC}}</text> 59 <text class="p11">{{pickerInfoList[1].nameC}}</text>
60 <text class="p12">{{pickerInfoList[1].nameE}}</text> 60 <text class="p12">{{pickerInfoList[1].nameE}}</text>
61 </view> 61 </view>
62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
65 <image src="../../static/detail-tabicon.png" ></image> 65 <image src="../../static/detail-tabicon.png" ></image>
66 </picker> 66 </picker>
67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
70 <image src="../../static/detail-tabicon.png" ></image> 70 <image src="../../static/detail-tabicon.png" ></image>
71 </picker> 71 </picker>
72 </view> 72 </view>
73 </view> 73 </view>
74 <view class="picker" > 74 <view class="picker" >
75 <view class="picker-choice"> 75 <view class="picker-choice">
76 <view class="choice-left"> 76 <view class="choice-left">
77 <text class="p11">{{pickerInfoList[2].nameC}}</text> 77 <text class="p11">{{pickerInfoList[2].nameC}}</text>
78 <text class="p12">{{pickerInfoList[2].nameE}}</text> 78 <text class="p12">{{pickerInfoList[2].nameE}}</text>
79 </view> 79 </view>
80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
83 <image src="../../static/detail-tabicon.png" ></image> 83 <image src="../../static/detail-tabicon.png" ></image>
84 </picker> 84 </picker>
85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
88 <image src="../../static/detail-tabicon.png" ></image> 88 <image src="../../static/detail-tabicon.png" ></image>
89 </picker> 89 </picker>
90 </view> 90 </view>
91 </view> 91 </view>
92 <view class="picker" > 92 <view class="picker" >
93 <view class="picker-choice"> 93 <view class="picker-choice">
94 <view class="choice-left"> 94 <view class="choice-left">
95 <text class="p11">{{pickerInfoList[3].nameC}}</text> 95 <text class="p11">{{pickerInfoList[3].nameC}}</text>
96 <text class="p12">{{pickerInfoList[3].nameE}}</text> 96 <text class="p12">{{pickerInfoList[3].nameE}}</text>
97 </view> 97 </view>
98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
101 <image src="../../static/detail-tabicon.png" ></image> 101 <image src="../../static/detail-tabicon.png" ></image>
102 </picker> 102 </picker>
103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
106 <image src="../../static/detail-tabicon.png" ></image> 106 <image src="../../static/detail-tabicon.png" ></image>
107 </picker> 107 </picker>
108 </view> 108 </view>
109 </view> 109 </view>
110 <view class="picker" > 110 <view class="picker" >
111 <view class="picker-choice"> 111 <view class="picker-choice">
112 <view class="choice-left"> 112 <view class="choice-left">
113 <text class="p11">{{pickerInfoList[4].nameC}}</text> 113 <text class="p11">{{pickerInfoList[4].nameC}}</text>
114 </view> 114 </view>
115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
116 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 116 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
117 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> 117 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
118 <image src="../../static/detail-tabicon.png" ></image> 118 <image src="../../static/detail-tabicon.png" ></image>
119 </picker> 119 </picker>
120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
121 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 121 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
122 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> 122 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
123 <image src="../../static/detail-tabicon.png" ></image> 123 <image src="../../static/detail-tabicon.png" ></image>
124 </picker> 124 </picker>
125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
126 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 126 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
127 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> 127 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
128 <image src="../../static/detail-tabicon.png" ></image> 128 <image src="../../static/detail-tabicon.png" ></image>
129 </picker> 129 </picker>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view class="confirm"> 132 <view class="confirm">
133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
134 <text>确认以上输入信息来源于我的验光数据!</text> 134 <text>确认以上输入信息来源于我的验光数据!</text>
135 </view> 135 </view>
136 </view> 136 </view>
137 137
138 </template> 138 </template>
139 <template v-else> 139 <template v-else>
140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox"> 140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
141 <template v-if="item.nameC==='验光日期'"> 141 <template v-if="item.nameC==='验光日期'">
142 <text class="names">{{item.nameC}}</text> 142 <text class="names">{{item.nameC}}</text>
143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> 143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> 144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
145 <text>{{item.nameArray3[item.nameIndex2]}}日</text> 145 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
146 </template> 146 </template>
147 <template v-else> 147 <template v-else>
148 <template v-if="item.nameC==='度数'"> 148 <template v-if="item.nameC==='度数'">
149 <text style="display: inline;">*</text> 149 <text style="display: inline;">*</text>
150 </template> 150 </template>
151 151
152 <text class="names">{{item.nameC}}</text> 152 <text class="names">{{item.nameC}}</text>
153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
155 </template> 155 </template>
156 </view> 156 </view>
157 </template> 157 </template>
158 </view> 158 </view>
159 </view> 159 </view>
160 160
161 </view> 161 </view>
162 <view class="submit">立即结算</view> 162 <view class="submit">立即结算</view>
163 </view> 163 </view>
164 </template> 164 </template>
165 165
166 <script> 166 <script>
167 import MyCollapse from './compoents/MyCollapse.vue' 167 import MyCollapse from './compoents/MyCollapse.vue'
168 export default { 168 export default {
169 components: { 169 components: {
170 MyCollapse 170 MyCollapse
171 }, 171 },
172 data() { 172 data() {
173 return { 173 return {
174 count:1, 174 count:1,
175 disabled:false, 175 disabled:false,
176 price:180, 176 price:180,
177 // 实用功能参数 177 // 实用功能参数
178 funIsOpen:true, // 默认myCollapse开启 178 funIsOpen:true, // 默认myCollapse开启
179 funList: [ 179 funList: [
180 {"name":"防紫外线","isChioce": false,"key":1}, 180 {"name":"防紫外线","isChioce": false,"key":1,"type": "fun"},
181 {"name":"防蓝光","isChioce": false,"key":2}, 181 {"name":"防蓝光","isChioce": false,"key":2,"type": "fun"},
182 {"name":"智能变色","isChioce": false,"key":3}, 182 {"name":"智能变色","isChioce": false,"key":3,"type": "fun"},
183 {"name":"易清洁","isChioce": false,"key":4}, 183 {"name":"易清洁","isChioce": false,"key":4,"type": "fun"},
184 {"name":"防辐射","isChioce": false,"key":5}, 184 {"name":"防辐射","isChioce": false,"key":5,"type": "fun"},
185 {"name":"抗疲劳","isChioce": false,"key":6}, 185 {"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"},
186 ], 186 ],
187 funContent:[], 187 funContent:[],
188 188
189 // 镜片种类参数 189 // 镜片种类参数
190 kindIsOpen:true, 190 kindIsOpen:true,
191 kindList1: [ 191 kindList1: [
192 {"name":"染色","isChioce":false,key:1}, 192 {"name":"染色","isChioce":false,key:1,"type": "kind"},
193 {"name":"渐变","isChioce":false,key:2}, 193 {"name":"渐变","isChioce":false,key:2,"type": "kind"},
194 ], 194 ],
195 kindList2: [ 195 kindList2: [
196 {"name":"JB234759","isChioce":false,key:3}, 196 {"name":"JB234759","isChioce":false,key:3,"type": "kind"},
197 {"name":"JB234759","isChioce":false,key:4}, 197 {"name":"JB234759","isChioce":false,key:4,"type": "kind"},
198 {"name":"JB234759","isChioce":false,key:5}, 198 {"name":"JB234759","isChioce":false,key:5,"type": "kind"},
199 {"name":"JB234759","isChioce":false,key:6}, 199 {"name":"JB234759","isChioce":false,key:6,"type": "kind"},
200 {"name":"JB234759","isChioce":false,key:7}, 200 {"name":"JB234759","isChioce":false,key:7,"type": "kind"},
201 ], 201 ],
202 kindContent:[], 202 kindContent:[],
203 // 材质选择 203 // 材质选择
204 maIsOpen:true, 204 maIsOpen:true,
205 maList1: [ 205 maList1: [
206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true}, 206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
207 {"name":"特殊镜片","isChioce":false,key:2}, 207 {"name":"特殊镜片","isChioce":false,key:2},
208 ], 208 ],
209 maList2: [ 209 maList2: [
210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
211 {"name":"玻璃镜片","isChioce":false,key:4}, 211 {"name":"玻璃镜片","isChioce":false,key:4},
212 ], 212 ],
213 maContent:[], 213 maContent:[],
214 // 折射率参数 214 // 折射率参数
215 reIsOpen:true, 215 reIsOpen:true,
216 reList1: [ 216 reList1: [
217 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true}, 217 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
218 {"name":"1.60","isChioce":false,key:2}, 218 {"name":"1.60","isChioce":false,key:2},
219 ], 219 ],
220 reList2: [ 220 reList2: [
221 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 221 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
222 {"name":"1.67","isChioce":false,key:4}, 222 {"name":"1.67","isChioce":false,key:4},
223 {"name":"1.71","isChioce":false,key:5}, 223 {"name":"1.71","isChioce":false,key:5},
224 {"name":"1.74","isChioce":false,key:6}, 224 {"name":"1.74","isChioce":false,key:6},
225 ], 225 ],
226 reContent:[], 226 reContent:[],
227 // 验光参数 227 // 验光参数
228 opIsOpen:true, 228 opIsOpen:true,
229 tablist: { 229 tablist: {
230 // read: true, 230 // read: true,
231 // seeLong: false, 231 // seeLong: false,
232 confirm: false 232 confirm: false
233 }, 233 },
234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
235 // 度数相关数据 235 // 度数相关数据
236 pickerInfoList:[ 236 pickerInfoList:[
237 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, 237 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
238 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, 238 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
239 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, 239 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
240 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, 240 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
241 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} 241 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
242 ], 242 ],
243 243
244 } 244 }
245 }, 245 },
246 methods: { 246 methods: {
247 counter(isadd){ 247 counter(isadd){
248 if(isadd){ 248 if(isadd){
249 this.count++ 249 this.count++
250 }else{ 250 }else{
251 this.count <= 1? this.disabled = true:this.count-- 251 this.count <= 1? this.disabled = true:this.count--
252 } 252 }
253 }, 253 },
254 myCollapseChange(isopen){ 254 myCollapseChange(isopen){
255 // console.log(isopen) 255 // console.log(isopen)
256 this.opIsOpen = !isopen 256 this.opIsOpen = !isopen
257 }, 257 },
258 changeConfirm() { 258 changeConfirm() {
259 this.tablist.confirm = !this.tablist.confirm 259 this.tablist.confirm = !this.tablist.confirm
260 }, 260 },
261 261
262 bindPickerChange01: function(e) { 262 bindPickerChange01: function(e) {
263 this.pickerInfoList[0].nameIndex1 = e.target.value 263 this.pickerInfoList[0].nameIndex1 = e.target.value
264 }, 264 },
265 bindPickerChange02: function(e) { 265 bindPickerChange02: function(e) {
266 this.pickerInfoList[0].nameIndex2 = e.target.value 266 this.pickerInfoList[0].nameIndex2 = e.target.value
267 }, 267 },
268 268
269 bindPickerChange11: function(e) { 269 bindPickerChange11: function(e) {
270 this.pickerInfoList[1].nameIndex1 = e.target.value 270 this.pickerInfoList[1].nameIndex1 = e.target.value
271 }, 271 },
272 bindPickerChange12: function(e) { 272 bindPickerChange12: function(e) {
273 this.pickerInfoList[1].nameIndex2 = e.target.value 273 this.pickerInfoList[1].nameIndex2 = e.target.value
274 }, 274 },
275 275
276 bindPickerChange21: function(e) { 276 bindPickerChange21: function(e) {
277 this.pickerInfoList[2].nameIndex1 = e.target.value 277 this.pickerInfoList[2].nameIndex1 = e.target.value
278 }, 278 },
279 bindPickerChange22: function(e) { 279 bindPickerChange22: function(e) {
280 this.pickerInfoList[2].nameIndex2 = e.target.value 280 this.pickerInfoList[2].nameIndex2 = e.target.value
281 }, 281 },
282 282
283 bindPickerChange31: function(e) { 283 bindPickerChange31: function(e) {
284 this.pickerInfoList[3].nameIndex1 = e.target.value 284 this.pickerInfoList[3].nameIndex1 = e.target.value
285 }, 285 },
286 bindPickerChange32: function(e) { 286 bindPickerChange32: function(e) {
287 this.pickerInfoList[3].nameIndex2 = e.target.value 287 this.pickerInfoList[3].nameIndex2 = e.target.value
288 }, 288 },
289 289
290 bindPickerChange41: function(e) { 290 bindPickerChange41: function(e) {
291 this.pickerInfoList[4].nameIndex1 = e.target.value 291 this.pickerInfoList[4].nameIndex1 = e.target.value
292 }, 292 },
293 bindPickerChange42: function(e) { 293 bindPickerChange42: function(e) {
294 this.pickerInfoList[4].nameIndex2 = e.target.value 294 this.pickerInfoList[4].nameIndex2 = e.target.value
295 }, 295 },
296 bindPickerChange43: function(e) { 296 bindPickerChange43: function(e) {
297 this.pickerInfoList[4].nameIndex3 = e.target.value 297 this.pickerInfoList[4].nameIndex3 = e.target.value
298 }, 298 },
299 } 299 }
300 } 300 }
301 </script> 301 </script>
302 302
303 <style lang="scss" scoped> 303 <style lang="scss" scoped>
304 .content{ 304 .content{
305 width: 100%; 305 width: 100%;
306 background-color: #F2F2F2; 306 background-color: #F2F2F2;
307 display: flex; 307 display: flex;
308 flex-direction: column; 308 flex-direction: column;
309 align-items: center; 309 align-items: center;
310 } 310 }
311 311
312 .goods-info{ 312 .goods-info{
313 width: 100%; 313 width: 100%;
314 height: 272rpx; 314 height: 272rpx;
315 box-sizing: border-box; 315 box-sizing: border-box;
316 padding: 40rpx 40rpx 36rpx 36rpx; 316 padding: 40rpx 40rpx 36rpx 36rpx;
317 margin: 36rpx 0 18rpx 0; 317 margin: 36rpx 0 18rpx 0;
318 // margin-bottom: -18rpx; 318 // margin-bottom: -18rpx;
319 // margin-top: -36rpx; 319 // margin-top: -36rpx;
320 background: #FFFFFF; 320 background: #FFFFFF;
321 border-radius: 16rpx; 321 border-radius: 16rpx;
322 display: flex; 322 display: flex;
323 image{ 323 image{
324 width: 94px; 324 width: 94px;
325 height: 94px; 325 height: 94px;
326 margin-right: 28rpx; 326 margin-right: 28rpx;
327 } 327 }
328 .box-right{ 328 .box-right{
329 width: 458rpx; 329 width: 458rpx;
330 display: flex; 330 display: flex;
331 flex-direction: column; 331 flex-direction: column;
332 align-items: flex-start; 332 align-items: flex-start;
333 justify-content: space-between; 333 justify-content: space-between;
334 .p1 { 334 .p1 {
335 // font-family: PingFangSC-Regular; 335 // font-family: PingFangSC-Regular;
336 font-size: 14px; 336 font-size: 14px;
337 color: #333333; 337 color: #333333;
338 letter-spacing: -0.26px; 338 letter-spacing: -0.26px;
339 text-align: justify; 339 text-align: justify;
340 line-height: 18px; 340 line-height: 18px;
341 } 341 }
342 .p2 { 342 .p2 {
343 // font-family: PingFangSC-Regular; 343 // font-family: PingFangSC-Regular;
344 font-size: 10px; 344 font-size: 10px;
345 color: #999999; 345 color: #999999;
346 letter-spacing: -0.19px; 346 letter-spacing: -0.19px;
347 margin-top: -20rpx; 347 margin-top: -20rpx;
348 } 348 }
349 .priceBox{ 349 .priceBox{
350 display: flex; 350 display: flex;
351 flex-direction: row; 351 flex-direction: row;
352 justify-content: space-between; 352 justify-content: space-between;
353 width: 100%; 353 width: 100%;
354 .price{ 354 .price{
355 color: #FF6B4A; 355 color: #FF6B4A;
356 font-size: 28rpx; 356 font-size: 28rpx;
357 } 357 }
358 .counter{ 358 .counter{
359 display: flex; 359 display: flex;
360 flex-direction: row; 360 flex-direction: row;
361 justify-content: space-between; 361 justify-content: space-between;
362 font-size: 28rpx; 362 font-size: 28rpx;
363 color: #333333; 363 color: #333333;
364 width: 122rpx; 364 width: 122rpx;
365 .btn{ 365 .btn{
366 display: flex; 366 display: flex;
367 justify-content: center; 367 justify-content: center;
368 line-height: 32rpx; 368 line-height: 32rpx;
369 height: 32rpx; 369 height: 32rpx;
370 width: 32rpx; 370 width: 32rpx;
371 background-color: #F2F2F2; 371 background-color: #F2F2F2;
372 color: #CFCFCF; 372 color: #CFCFCF;
373 } 373 }
374 } 374 }
375 } 375 }
376 } 376 }
377 } 377 }
378 378
379 .goods-data{ 379 .goods-data{
380 width: 100%; 380 width: 100%;
381 box-sizing: border-box; 381 box-sizing: border-box;
382 padding: 37rpx 40rpx 0 40rpx; 382 padding: 37rpx 40rpx 0 40rpx;
383 background: #FFFFFF; 383 background: #FFFFFF;
384 border-radius: 12rpx; 384 border-radius: 12rpx;
385 margin-bottom: 92px; 385 margin-bottom: 92px;
386 .opCollapse{ 386 .opCollapse{
387 width: 100%; 387 width: 100%;
388 padding-bottom: 28rpx; 388 padding-bottom: 28rpx;
389 margin-top: 7px; 389 margin-top: 7px;
390 border-bottom: 1px solid #E9E9E9; 390 border-bottom: 1px solid #E9E9E9;
391 .head{ 391 .head{
392 display: flex; 392 display: flex;
393 justify-content: space-between; 393 justify-content: space-between;
394 height: 24px; 394 height: 24px;
395 // font-family: PingFangSC-Medium; 395 // font-family: PingFangSC-Medium;
396 font-size: 16px; 396 font-size: 16px;
397 color: #333333; 397 color: #333333;
398 letter-spacing: -0.3px; 398 letter-spacing: -0.3px;
399 text-align: justify; 399 text-align: justify;
400 line-height: 24px; 400 line-height: 24px;
401 margin-bottom: 18rpx; 401 margin-bottom: 18rpx;
402 .headRighted{ 402 .headRighted{
403 width: 0; 403 width: 0;
404 height: 0; 404 height: 0;
405 border-left: 4px solid transparent; 405 border-left: 4px solid transparent;
406 border-right: 4px solid transparent; 406 border-right: 4px solid transparent;
407 border-bottom: 4px solid #CFCFCF; 407 border-bottom: 4px solid #CFCFCF;
408 transform: scaleY(-1); 408 transform: scaleY(-1);
409 margin-top: 10px; 409 margin-top: 10px;
410 } 410 }
411 .headMid{ 411 .headMid{
412 // font-family: PingFangSC-Regular; 412 // font-family: PingFangSC-Regular;
413 font-size: 10px; 413 font-size: 10px;
414 color: #999999; 414 color: #999999;
415 letter-spacing: -0.19px; 415 letter-spacing: -0.19px;
416 margin-left: -120rpx; 416 margin-left: -120rpx;
417 } 417 }
418 .headRight{ 418 .headRight{
419 width: 0; 419 width: 0;
420 height: 0; 420 height: 0;
421 border-left: 4px solid transparent; 421 border-left: 4px solid transparent;
422 border-right: 4px solid transparent; 422 border-right: 4px solid transparent;
423 border-bottom: 4px solid #CFCFCF; 423 border-bottom: 4px solid #CFCFCF;
424 margin-top: 10px; 424 margin-top: 10px;
425 } 425 }
426 } 426 }
427 .body{ 427 .body{
428 // font-family: PingFangSC-Regular; 428 // font-family: PingFangSC-Regular;
429 font-size: 12px; 429 font-size: 12px;
430 color: #666666; 430 color: #666666;
431 letter-spacing: 0; 431 letter-spacing: 0;
432 .bodyBox{ 432 .bodyBox{
433 margin-top: 15px; 433 margin-top: 15px;
434 .names{ 434 .names{
435 // font-family: PingFangSC-Regular; 435 // font-family: PingFangSC-Regular;
436 font-size: 12px; 436 font-size: 12px;
437 color: #151515; 437 color: #151515;
438 letter-spacing: 0; 438 letter-spacing: 0;
439 text-align: justify; 439 text-align: justify;
440 line-height: 17px; 440 line-height: 17px;
441 margin-left: 5px; 441 margin-left: 5px;
442 margin-right: 10px; 442 margin-right: 10px;
443 } 443 }
444 text{ 444 text{
445 // font-family: PingFangSC-Regular; 445 // font-family: PingFangSC-Regular;
446 font-size: 12px; 446 font-size: 12px;
447 color: #666666; 447 color: #666666;
448 letter-spacing: 0; 448 letter-spacing: 0;
449 text-align: justify; 449 text-align: justify;
450 } 450 }
451 } 451 }
452 452
453 } 453 }
454 } 454 }
455 455
456 } 456 }
457 457
458 .goods-form { 458 .goods-form {
459 display: flex; 459 display: flex;
460 flex-direction: column; 460 flex-direction: column;
461 align-items: center; 461 align-items: center;
462 justify-content: center; 462 justify-content: center;
463 background-color: #fff; 463 background-color: #fff;
464 width: 100%; 464 width: 100%;
465 465
466 .p1 { 466 .p1 {
467 font-size: 16px; 467 font-size: 16px;
468 color: #333333; 468 color: #333333;
469 letter-spacing: -0.3px; 469 letter-spacing: -0.3px;
470 text-align: justify; 470 text-align: justify;
471 line-height: 24px; 471 line-height: 24px;
472 margin: 4px 0; 472 margin: 4px 0;
473 473
474 } 474 }
475 .p2 { 475 .p2 {
476 font-size: 12px; 476 font-size: 12px;
477 color: #999999; 477 color: #999999;
478 letter-spacing: -0.23px; 478 letter-spacing: -0.23px;
479 margin-bottom: 18rpx; 479 margin-bottom: 18rpx;
480 } 480 }
481 image{ 481 image{
482 width: 28rpx; 482 width: 28rpx;
483 height: 26rpx; 483 height: 26rpx;
484 } 484 }
485 .confirm { 485 .confirm {
486 display: flex; 486 display: flex;
487 align-items: center; 487 align-items: center;
488 font-size: 12px; 488 font-size: 12px;
489 color: #666666; 489 color: #666666;
490 letter-spacing: -0.23px; 490 letter-spacing: -0.23px;
491 width: 684rpx; 491 width: 684rpx;
492 image{ 492 image{
493 margin-right:25rpx; 493 margin-right:25rpx;
494 } 494 }
495 } 495 }
496 .picker{ 496 .picker{
497 display: flex; 497 display: flex;
498 flex-direction: column; 498 flex-direction: column;
499 justify-content: center; 499 justify-content: center;
500 align-items: center; 500 align-items: center;
501 width: 100%; 501 width: 100%;
502 image{ 502 image{
503 width: 10px; 503 width: 10px;
504 height: 10px; 504 height: 10px;
505 margin-right: 5px; 505 margin-right: 5px;
506 } 506 }
507 .picker-choice{ 507 .picker-choice{
508 display: flex; 508 display: flex;
509 width: 684rpx; 509 width: 684rpx;
510 align-items: center; 510 align-items: center;
511 margin-bottom: 40rpx; 511 margin-bottom: 40rpx;
512 .choice-left{ 512 .choice-left{
513 width: 210rpx; 513 width: 210rpx;
514 .p11 { 514 .p11 {
515 font-size: 14px; 515 font-size: 14px;
516 color: #333333; 516 color: #333333;
517 letter-spacing: -0.26px; 517 letter-spacing: -0.26px;
518 text-align: justify; 518 text-align: justify;
519 line-height: 24px; 519 line-height: 24px;
520 // margin-right: 10px; 520 // margin-right: 10px;
521 } 521 }
522 .p12 { 522 .p12 {
523 font-size: 10px; 523 font-size: 10px;
524 color: #3F3F3F; 524 color: #3F3F3F;
525 letter-spacing: -0.19px; 525 letter-spacing: -0.19px;
526 text-align: justify; 526 text-align: justify;
527 line-height: 24px; 527 line-height: 24px;
528 } 528 }
529 529
530 530
531 } 531 }
532 .p13 { 532 .p13 {
533 font-size: 10px; 533 font-size: 10px;
534 color: #999999; 534 color: #999999;
535 letter-spacing: -0.19px; 535 letter-spacing: -0.19px;
536 margin-right: 10px; 536 margin-right: 10px;
537 } 537 }
538 .p13-date { 538 .p13-date {
539 font-size: 10px; 539 font-size: 10px;
540 color: #999999; 540 color: #999999;
541 letter-spacing: -0.19px; 541 letter-spacing: -0.19px;
542 margin-right: 5px; 542 margin-right: 5px;
543 } 543 }
544 .p14 { 544 .p14 {
545 font-size: 14px; 545 font-size: 14px;
546 color: #666666; 546 color: #666666;
547 letter-spacing: -0.26px; 547 letter-spacing: -0.26px;
548 text-align: center; 548 text-align: center;
549 width: 124rpx; 549 width: 124rpx;
550 border-bottom: 1px solid #CFCFCF; 550 border-bottom: 1px solid #CFCFCF;
551 } 551 }
552 552
553 } 553 }
554 } 554 }
555 } 555 }
556 556
557 .submit{ 557 .submit{
558 width: 100%; 558 width: 100%;
559 height: 112rpx; 559 height: 112rpx;
560 background: #FF6B4A; 560 background: #FF6B4A;
561 position: fixed; 561 position: fixed;
562 bottom: 0; 562 bottom: 0;
563 text-align: center; 563 text-align: center;
564 line-height: 112rpx; 564 line-height: 112rpx;
565 // font-family: PingFangSC-Regular; 565 // font-family: PingFangSC-Regular;
566 font-size: 16px; 566 font-size: 16px;
567 color: #FFFFFF; 567 color: #FFFFFF;
568 letter-spacing: -0.3px; 568 letter-spacing: -0.3px;
569 } 569 }
570 570
571 </style> 571 </style>
572 572
src/pages/index/index.vue
Diff comments   View file @600d496
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <view class="searchBar"> 5 <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 6 <icon class="searchIcon" type="search" size="14"></icon>
7 <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> 7 <input class="searchIpt" placeholder="老花镜" confirm-type="search" />
8 </view> 8 </view>
9 9
10 <!-- 筛选栏--> 10 <!-- 筛选栏-->
11 <!-- <view class="screenBar"> 11 <view class="screenBar">
12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> 12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
13 <view 13 <view
14 class="screenItem" 14 class="screenItem"
15 v-bind:class="{ active: current === item.current }" 15 v-bind:class="{ active: current === item.current }"
16 v-if="item.current === 2" 16 v-if="item.current === 2"
17 @click="dropDown" 17 @click="dropDown"
18 > 18 >
19 {{ item.text }} 19 {{ item.text }}
20 <icon type="info" size="14"></icon> 20 <icon type="info" size="14"></icon>
21 </view> 21 </view>
22 <view 22 <view
23 class="screenItem" 23 class="screenItem"
24 v-bind:class="{ active: current === item.current }" 24 v-bind:class="{ active: current === item.current }"
25 v-if="item.current === 4" 25 v-if="item.current === 4"
26 @click="showDrawer('showRight')" 26 @click="showDrawer('showRight')"
27 > 27 >
28 {{ item.text }} 28 {{ item.text }}
29 <icon type="info" size="14"></icon> 29 <icon type="info" size="14"></icon>
30 </view> 30 </view>
31 <view v-if="item.current !== 2&&item.current!==4"> 31 <view v-if="item.current !== 2&&item.current!==4">
32 <view 32 <view
33 class="screenItem" 33 class="screenItem"
34 v-bind:class="{ active: current === item.current }" 34 v-bind:class="{ active: current === item.current }"
35 >{{ item.text }}</view> 35 >{{ item.text }}</view>
36 </view> 36 </view>
37 </view> 37 </view>
38 </view> --> 38 </view>
39 </view> 39 </view>
40 <!-- <Uni-drawer 40 <Uni-drawer
41 ref="showRight" 41 ref="showRight"
42 mask="true" 42 mask="true"
43 maskClick="true" 43 maskClick="true"
44 mode="right" 44 mode="right"
45 :width="320" 45 :width="320"
46 @change="change($event,'showRight')" 46 @change="change($event,'showRight')"
47 > 47 >
48 <view class="close"> 48 <view class="close">
49 <view @click="closeDrawer('showRight')"> 49 <view @click="closeDrawer('showRight')">
50 <text class="word-btn-white">关闭</text> 50 <text class="word-btn-white">关闭</text>
51 </view> 51 </view>
52 </view> 52 </view>
53 </Uni-drawer> --> 53 </Uni-drawer>
54 54
55 <!-- 筛选菜单--> 55 <!-- 筛选菜单-->
56 <view class="content-wrap"> 56 <view class="content-wrap">
57 <view> 57 <view>
58 <HMfilterDropdown 58 <HMfilterDropdown
59 :filterData="filterData" 59 :filterData="filterData"
60 :defaultSelected="filterDropdownValue" 60 :defaultSelected="filterDropdownValue"
61 :updateMenuName="true" 61 :updateMenuName="true"
62 @confirm="confirm" 62 @confirm="confirm"
63 data-format="Object" 63 data-format="Object"
64 ></HMfilterDropdown> 64 ></HMfilterDropdown>
65 <!-- 商品列表 --> 65 <!-- 商品列表 -->
66 <view class="goods-list"> 66 <view class="goods-list">
67 <view class="product-list"> 67 <view class="product-list">
68 <view class="product" v-for="(goods) in goodsList" :key="goods.id"> 68 <view class="product" v-for="(goods) in goodsList" :key="goods.id">
69 <Card :goods="goods"></Card> 69 <Card :goods="goods"></Card>
70 </view> 70 </view>
71 </view> 71 </view>
72 <view class="loading-text">{{loadingText}}</view> 72 <view class="loading-text">{{loadingText}}</view>
73 </view> 73 </view>
74 </view> 74 </view>
75 </view> 75 </view>
76 </view> 76 </view>
77 </template> 77 </template>
78 78
79 <script> 79 <script>
80 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; 80 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
81 import Card from "@/components/CommodityCard/CommodityCard.vue"; 81 import Card from "@/components/CommodityCard/CommodityCard.vue";
82 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; 82 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
83 import data from "@/common/data.js"; //筛选菜单数据 83 import data from "@/common/data.js"; //筛选菜单数据
84 import store from '@/store'; 84 import store from '@/store';
85 85
86 export default { 86 export default {
87 components: { 87 components: {
88 UniDrawer: UniDrawer, 88 UniDrawer: UniDrawer,
89 HMfilterDropdown: HMfilterDropdown, 89 HMfilterDropdown: HMfilterDropdown,
90 Card: Card 90 Card: Card
91 }, 91 },
92 data() { 92 data() {
93 return { 93 return {
94 screenItems: [ 94 screenItems: [
95 { current: 0, text: "全部", hasIcon: false }, 95 { current: 0, text: "全部", hasIcon: false },
96 { current: 1, text: "销量", hasIcon: false }, 96 { current: 1, text: "销量", hasIcon: false },
97 { current: 2, text: "价格", hasIcon: true }, 97 { current: 2, text: "价格", hasIcon: true },
98 { current: 3, text: "折扣", hasIcon: false }, 98 { current: 3, text: "折扣", hasIcon: false },
99 { current: 4, text: "筛选", hasIcon: true } 99 { current: 4, text: "筛选", hasIcon: true }
100 ], 100 ],
101 current: 0, 101 current: 0,
102 showRight: false, 102 showRight: false,
103 indexArr: "", 103 indexArr: "",
104 valueArr: "", 104 valueArr: "",
105 loadingText: "~~到底了~~", 105 loadingText: "~~到底了~~",
106 filterDropdownValue: [], 106 filterDropdownValue: [],
107 filterData: [], 107 filterData: [],
108 // goodsList:[ 108 // goodsList:[
109 // { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, 109 // { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
110 // { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, 110 // { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
111 // { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, 111 // { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
112 // { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, 112 // { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
113 // { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, 113 // { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
114 // { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, 114 // { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
115 // { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, 115 // { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
116 // { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, 116 // { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
117 // { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, 117 // { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
118 // { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 } 118 // { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
119 // ], 119 // ],
120 }; 120 };
121 }, 121 },
122 computed: { 122 computed: {
123 goodsList() { 123 goodsList() {
124 // 也可以从 getters 获取 124 // 也可以从 getters 获取
125 return this.$store.state.test.list; 125 return this.$store.state.test.list;
126 }, 126 },
127 categoryList(){ 127 categoryList(){
128 // console.log(this.$store.state.categoryOrder.categoryList); 128 // console.log(this.$store.state.categoryOrder.categoryList);
129 const categoryList = this.$store.state.categoryOrder.categoryList 129 const categoryList = this.$store.state.categoryOrder.categoryList
130 let newData = [ 130 let newData = [
131 { 131 {
132 "name":'产品', 132 "name":'产品',
133 "type": 'filter', 133 "type": 'filter',
134 "submenu": [{ 134 "submenu": [{
135 "submenu": [ 135 "submenu": [
136 136
137 ] 137 ]
138 }, 138 },
139 ], 139 ],
140 }, 140 },
141 { 141 {
142 "name":'品牌', 142 "name":'品牌',
143 "type": 'filter',
144 "submenu": [{
143 "type": 'filter', 145 "submenu": [
144 "submenu": [{ 146 ]
145 "submenu": [ 147 },
146 ] 148 ]
147 }, 149 },
148 ] 150 {
149 }, 151 "name":'使用场景',
150 { 152 "type": 'filter',
151 "name":'使用场景', 153 "submenu": [{
152 "type": 'filter', 154 "submenu": [
153 "submenu": [{ 155 ]
154 "submenu": [ 156 }
155 ] 157 ]
156 } 158 },
157 ] 159 {
158 }, 160 "name":'材质',
159 { 161 "type": 'filter',
160 "name":'材质', 162 "submenu": [{
161 "type": 'filter', 163 "submenu": [
162 "submenu": [{ 164 ]
163 "submenu": [ 165 }
164 ] 166 ]
165 } 167 },
166 ] 168 {
167 }, 169 "name":'筛选',
168 { 170 "type": 'filter',
169 "name":'筛选', 171 "submenu": [{
170 "type": 'filter', 172 // "name": "折扣(多选)",
171 "submenu": [{ 173 "submenu": [
172 // "name": "折扣(多选)", 174 ]
173 "submenu": [ 175 }
174 ] 176 ]
175 } 177 }
176 ] 178 ]
177 } 179 // newData[0].submenu[0].submenu = categoryList[0].submenu
178 ] 180 // newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu
179 newData[0].submenu[0].submenu = categoryList[0].submenu 181 // newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu
180 newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu 182 // newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu
181 newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu 183 // newData[4].submenu[0] = categoryList[3]
182 newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu 184 this.filterData = newData;
183 newData[4].submenu[0] = categoryList[3] 185 // this.filterData = categoryList;
184 this.filterData = newData; 186 }
185 // this.filterData = categoryList; 187
186 } 188 },
187 189 filters: {
188 }, 190 outData(value) {
189 filters: { 191 return JSON.stringify(value);
190 outData(value) { 192 }
191 return JSON.stringify(value); 193 },
192 } 194 onLoad: function() {
193 }, 195 store.dispatch('test/fetch');
194 onLoad: function() { 196 store.dispatch('categoryOrder/fetch')
195 store.dispatch('test/fetch'); 197
196 store.dispatch('categoryOrder/fetch') 198 // 登陆
197 199 // store.dispatch('user/login')
198 }, 200
199 methods: { 201 },
200 showDrawer(e) { 202 methods: {
201 this.$refs[e].open(); 203 showDrawer(e) {
202 }, 204 this.$refs[e].open();
203 closeDrawer(e) { 205 },
204 this.$refs[e].close(); 206 closeDrawer(e) {
205 }, 207 this.$refs[e].close();
206 change(e, type) { 208 },
207 this[type] = e; 209 change(e, type) {
208 }, 210 this[type] = e;
209 onClickItem(e) { 211 },
210 if (this.current !== e) { 212 onClickItem(e) {
211 this.current = e; 213 if (this.current !== e) {
212 } 214 this.current = e;
213 }, 215 }
214 dropDown() { 216 },
215 console.log("下拉"); 217 dropDown() {
216 }, 218 console.log("下拉");
217 //接收菜单结果 219 },
218 confirm(e) { 220 //接收菜单结果
219 this.indexArr = e.index; 221 confirm(e) {
220 this.valueArr = e.value; 222 this.indexArr = e.index;
221 return; 223 this.valueArr = e.value;
222 console.log("修改菜单"); 224 return;
223 this.filterData[4].submenu[1] = { 225 console.log("修改菜单");
224 name: "项目2", 226 this.filterData[4].submenu[1] = {
225 submenu: [] 227 name: "项目2",
226 }; 228 submenu: []
227 } 229 };
228 }, 230 }
229 231 },
230 }; 232
231 </script> 233 };
232 234 </script>
233 <style lang="scss"> 235
234 .content { 236 <style lang="scss">
235 display: flex; 237 .content {
236 flex-direction: column; 238 display: flex;
237 align-items: center; 239 flex-direction: column;
238 justify-content: center; 240 align-items: center;
239 background-color: #f7f6f6; 241 justify-content: center;
240 } 242 background-color: #f7f6f6;
241 .header { 243 }
242 display: flex; 244 .header {
243 flex-direction: column; 245 display: flex;
244 align-items: center; 246 flex-direction: column;
245 justify-content: center; 247 align-items: center;
246 background-color: #f7f6f6; 248 justify-content: center;
247 height: 178rpx; 249 background-color: #f7f6f6;
248 width: 100%; 250 height: 178rpx;
249 z-index: 999; 251 width: 100%;
250 position: fixed; 252 z-index: 999;
251 top: 0; 253 position: fixed;
252 left: 0; 254 top: 0;
253 } 255 left: 0;
254 .searchBar { 256 }
255 width: 670rpx; 257 .searchBar {
256 display: flex; 258 width: 670rpx;
257 justify-content: center; 259 display: flex;
258 align-items: center; 260 justify-content: center;
259 box-sizing: border-box; 261 align-items: center;
260 padding: 0rpx 16rpx; 262 box-sizing: border-box;
261 border: 1px solid #ff6b4a; 263 padding: 0rpx 16rpx;
262 border-radius: 8rpx; 264 border: 1px solid #ff6b4a;
263 background-color: #ffffff; 265 border-radius: 8rpx;
264 } 266 background-color: #ffffff;
265 267 }
266 .searchIpt { 268
267 height: 68rpx; 269 .searchIpt {
268 width: 670rpx; 270 height: 68rpx;
269 padding: 16rpx; 271 width: 670rpx;
270 font-size: 28rpx; 272 padding: 16rpx;
271 box-sizing: border-box; 273 font-size: 28rpx;
272 } 274 box-sizing: border-box;
273 .screenBar { 275 }
274 width: 670rpx; 276 .screenBar {
275 height: 110rpx; 277 width: 670rpx;
276 display: flex; 278 height: 110rpx;
277 flex-direction: row; 279 display: flex;
278 justify-content: space-between; 280 flex-direction: row;
279 align-items: center; 281 justify-content: space-between;
280 color: #333333; 282 align-items: center;
281 font-size: 32rpx; 283 color: #333333;
282 } 284 font-size: 32rpx;
283 .active { 285 }
284 color: #ff6b4a; 286 .active {
285 } 287 color: #ff6b4a;
286 .screenItem { 288 }
287 display: flex; 289 .screenItem {
288 justify-content: center; 290 display: flex;
289 align-items: center; 291 justify-content: center;
290 } 292 align-items: center;
291 .content-wrap { 293 }
292 width: 100%; 294 .content-wrap {
293 background-color: #ffffff; 295 width: 100%;
294 } 296 background-color: #ffffff;
295 297 }
296 .HMfilterDropdown { 298
297 top: 178rpx !important; 299 .HMfilterDropdown {
298 } 300 top: 178rpx !important;
299 301 }
300 .goods-list { 302
301 padding-top: 286rpx; 303 .goods-list {
302 .loading-text { 304 padding-top: 286rpx;
303 width: 100%; 305 .loading-text {
304 display: flex; 306 width: 100%;
305 justify-content: center; 307 display: flex;
306 align-items: center; 308 justify-content: center;
307 height: 30px; 309 align-items: center;
308 color: #979797; 310 height: 30px;
309 font-size: 12px; 311 color: #979797;
310 } 312 font-size: 12px;
311 .product-list { 313 }
312 width: 92%; 314 .product-list {
313 padding: 0 4% 3vw 4%; 315 width: 92%;
314 display: flex; 316 padding: 0 4% 3vw 4%;
315 justify-content: space-between; 317 display: flex;
316 flex-wrap: wrap; 318 justify-content: space-between;
317 .product { 319 flex-wrap: wrap;
318 width: 48%; 320 .product {
319 margin: 0 0 20rpx 0; 321 width: 48%;
320 background: #ffffff; 322 margin: 0 0 20rpx 0;
321 border: 1px solid #f2f2f2; 323 background: #ffffff;
322 } 324 border: 1px solid #f2f2f2;
323 } 325 }
324 } 326 }
325 </style> 327 }
326 328 </style>
329
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @600d496
1 <template> 1 <template>
2 2
3 <view class="content"> 3 <view class="content">
4 <view class="order-hr"></view> 4 <view class="order-hr"></view>
5 <view class="order-time"> 5 <view class="order-time">
6 <text>请在</text> 6 <text>请在</text>
7 <!-- <text class="p2"></text> --> 7 <!-- <text class="p2"></text> -->
8 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" 8 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false"
9 :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> 9 :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown>
10 <text>内完成付款</text> 10 <text>内完成付款</text>
11 </view> 11 </view>
12 <view class="order"> 12 <view class="order">
13 <view class="order-user"> 13 <view class="order-user">
14 <view class="order-user-head"> 14 <view class="order-user-head">
15 <text class="p1">钱大大</text> 15 <text class="p1">钱大大</text>
16 <text class="p2">18823749843</text> 16 <text class="p2">18823749843</text>
17 </view> 17 </view>
18 <view class="order-user-body"> 18 <view class="order-user-body">
19 <image src="../../static/myorder-paying-location.png"></image> 19 <image src="../../static/myorder-paying-location.png"></image>
20 <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text> 20 <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="order-info"> 23 <view class="order-info">
24 <view class="order-info-head"> 24 <view class="order-info-head">
25 <image src="../../static/myorder-paying-pic.png"></image> 25 <image src="../../static/myorder-paying-pic.png"></image>
26 <view class="order-info-head-r"> 26 <view class="order-info-head-r">
27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> 27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
28 <view class="p2" style="margin: 0;"> 28 <view class="p2" style="margin: 0;">
29 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 29 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
30 <!-- <view class="arrow"></view> --> 30 <!-- <view class="arrow"></view> -->
31 </view> 31 </view>
32 <text class="p3"><span>￥180</span><span class="p4">X1</span></text> 32 <text class="p3"><span>￥180</span><span class="p4">X1</span></text>
33 </view> 33 </view>
34 </view> 34 </view>
35 <!-- <view class="order-info-goodsnum"> 35 <!-- <view class="order-info-goodsnum">
36 <text>X1</text> 36 <text>X1</text>
37 </view> --> 37 </view> -->
38 <text class="order-info-freight"> 38 <text class="order-info-freight">
39 <text class="p1">运费</text> 39 <text class="p1">运费</text>
40 <text class="p2">0.00</text> 40 <text class="p2">0.00</text>
41 </text> 41 </text>
42 <text class="order-info-discount"> 42 <text class="order-info-discount">
43 <text class="p1">优惠</text> 43 <text class="p1">优惠</text>
44 <text class="p2">-￥70.00</text> 44 <text class="p2">-￥70.00</text>
45 </text> 45 </text>
46 <text class="order-info-price"> 46 <text class="order-info-price">
47 <text class="p1">实付</text> 47 <text class="p1">实付</text>
48 <text class="p2">￥110</text> 48 <text class="p2">￥110</text>
49 </text> 49 </text>
50 <text class="order-info-num"> 50 <text class="order-info-num">
51 <text>订单号：203486795859605849</text> 51 <text>订单号：203486795859605849</text>
52 </text> 52 </text>
53 <text class="order-info-time"> 53 <text class="order-info-time">
54 <text>下单时间：2020-10-22 14:32:42</text> 54 <text>下单时间：2020-10-22 14:32:42</text>
55 </text> 55 </text>
56 <view class="order-info-hr"></view> 56 <view class="order-info-hr"></view>
57 <view class="order-info-contact"> 57 <view class="order-info-contact">
58 <image src="../../static/myorder-paying-contact.png"></image> 58 <image src="../../static/myorder-paying-contact.png"></image>
59 <text>联系客服</text> 59 <text>联系客服</text>
60 </view> 60 </view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view class="order-confim"> 63 <view class="order-confim">
64 <button class="b1">取消订单</button> 64 <button class="b1">取消订单</button>
65 <button class="b2">立即支付</button> 65 <button class="b2">立即支付</button>
66 </view> 66 </view>
67 </view> 67 </view>
68 </template> 68 </template>
69 69
70 <script> 70 <script>
71 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 71 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
72 export default { 72 export default {
73 components: { 73 components: {
74 UniCountdown 74 UniCountdown
75 }, 75 },
76 data() { 76 data() {
77 return { 77 return {
78 scrollHeight: false, 78 scrollHeight: false,
79 } 79 }
80 }, 80 },
81 methods: { 81 methods: {
82 82
83 } 83 }
84 } 84 }
85 </script> 85 </script>
86 86
87 <style lang="scss" scoped> 87 <style lang="scss" scoped>
88 .content{ 88 .content{
89 display: flex; 89 display: flex;
90 flex-direction: column; 90 flex-direction: column;
91 justify-content: center; 91 justify-content: center;
92 align-items: center; 92 align-items: center;
93 background-color: #f2f2f2; 93 background-color: #f2f2f2;
94 } 94 }
95 95
96 96
97 .order { 97 .order {
98 min-height: 1196rpx; 98 min-height: 1196rpx;
99 margin-bottom: 112rpx; 99 margin-bottom: 112rpx;
100 background: #F2F2F2; 100 background: #F2F2F2;
101 } 101 }
102 .order-hr { 102 .order-hr {
103 width: 100%; 103 width: 100%;
104 height: 1px; 104 height: 1px;
105 background-color: #E9E9E9; 105 background-color: #E9E9E9;
106 } 106 }
107 .order-time { 107 .order-time {
108 width: 100%; 108 width: 100%;
109 height: 140rpx; 109 height: 140rpx;
110 background-color: #fff; 110 background-color: #fff;
111 display: flex; 111 display: flex;
112 justify-content: center; 112 justify-content: center;
113 text { 113 text {
114 // font-family: PingFangSC-Regular; 114 // font-family: PingFangSC-Regular;
115 margin-top: 48rpx; 115 margin-top: 48rpx;
116 font-size: 14px; 116 font-size: 14px;
117 color: #333333; 117 color: #333333;
118 letter-spacing: -0.26px; 118 letter-spacing: -0.26px;
119 } 119 }
120 .p2 { 120 .p2 {
121 // font-family: DINAlternate-Bold; 121 // font-family: DINAlternate-Bold;
122 margin: 42rpx 20rpx 0 20rpx; 122 margin: 42rpx 20rpx 0 20rpx;
123 font-size: 18px; 123 font-size: 18px;
124 color: #EC5D3B; 124 color: #EC5D3B;
125 letter-spacing: -0.34px; 125 letter-spacing: -0.34px;
126 } 126 }
127 } 127 }
128 128
129 .order-user { 129 .order-user {
130 width: 670rpx; 130 width: 670rpx;
131 height: 228rpx; 131 height: 228rpx;
132 background: #FFFFFF; 132 background: #FFFFFF;
133 border-radius: 14rpx; 133 border-radius: 14rpx;
134 margin: 0 auto; 134 margin: 0 auto;
135 margin-top: 20rpx; 135 margin-top: 20rpx;
136 margin-bottom: 20rpx; 136 margin-bottom: 20rpx;
137 .order-user-head { 137 .order-user-head {
138 display: flex; 138 display: flex;
139 height: 108rpx; 139 height: 108rpx;
140 width: 100%; 140 width: 100%;
141 align-items: center; 141 align-items: center;
142 margin-left: 126rpx; 142 margin-left: 126rpx;
143 .p1 { 143 .p1 {
144 // font-family: PingFangSC-Regular; 144 // font-family: PingFangSC-Regular;
145 font-size: 14px; 145 font-size: 14px;
146 color: #333333; 146 color: #333333;
147 letter-spacing: -0.26px; 147 letter-spacing: -0.26px;
148 margin-right: 20rpx; 148 margin-right: 20rpx;
149 } 149 }
150 .p2 { 150 .p2 {
151 // font-family: PingFangSC-Regular; 151 // font-family: PingFangSC-Regular;
152 font-size: 14px; 152 font-size: 14px;
153 color: #999999; 153 color: #999999;
154 letter-spacing: -0.26px; 154 letter-spacing: -0.26px;
155 } 155 }
156 } 156 }
157 .order-user-body { 157 .order-user-body {
158 display: flex; 158 display: flex;
159 width: 100%; 159 width: 100%;
160 image{ 160 image{
161 width: 24px; 161 width: 24px;
162 height: 26px; 162 height: 26px;
163 margin: 12rpx 32rpx 0 40rpx; 163 margin: 12rpx 32rpx 0 40rpx;
164 } 164 }
165 .p3 { 165 .p3 {
166 // font-family: PingFangSC-Semibold; 166 // font-family: PingFangSC-Semibold;
167 font-size: 14px; 167 font-size: 14px;
168 color: #333333; 168 color: #333333;
169 letter-spacing: -0.26px; 169 letter-spacing: -0.26px;
170 } 170 }
171 } 171 }
172 } 172 }
173 173
174 .order-info { 174 .order-info {
175 width: 670rpx; 175 width: 670rpx;
176 background-color: #fff; 176 background-color: #fff;
177 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); 177 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
178 border-radius: 16rpx; 178 border-radius: 16rpx;
179 margin: 0 auto; 179 margin: 0 auto;
180 view{ 180 view{
181 margin-left: 40rpx; 181 margin-left: 40rpx;
182 } 182 }
183 text{ 183 text{
184 font-size: 14px; 184 font-size: 14px;
185 } 185 }
186 .order-info-head { 186 .order-info-head {
187 display: flex; 187 display: flex;
188 padding-top: 40rpx; 188 padding-top: 40rpx;
189 image{ 189 image{
190 height: 188rpx; 190 height: 188rpx;
191 width: 188rpx; 191 width: 188rpx;
192 } 192 }
193 .order-info-head-r{ 193 .order-info-head-r{
194 margin: 0; 194 margin: 0;
195 width: 368rpx; 195 width: 368rpx;
196 margin-left: 24rpx; 196 margin-left: 24rpx;
197 // margin-top: 40rpx; 197 // margin-top: 40rpx;
198 text{ 198 text{
199 display: block; 199 display: block;
200 } 200 }
201 // .arrow{ 201 // .arrow{
202 // width: 0; 202 // width: 0;
203 // height: 0; 203 // height: 0;
204 // border-left: 5px transparent; 204 // border-left: 5px transparent;
205 // border-right: 5px transparent; 205 // border-right: 5px transparent;
206 // border-top: 5px #979797; 206 // border-top: 5px #979797;
207 // border-bottom: 0 transparent; 207 // border-bottom: 0 transparent;
208 // border-style: solid; 208 // border-style: solid;
209 // position: relative; 209 // position: relative;
210 // // transform: scaleY(-1); 210 // // transform: scaleY(-1);
211 // } 211 // }
212 // .arrow::after{ 212 // .arrow::after{
213 // content: ''; 213 // content: '';
214 // position: absolute; 214 // position: absolute;
215 // top: -6.5px; 215 // top: -6.5px;
216 // left: -5px; 216 // left: -5px;
217 // border-left: 5px transparent; 217 // border-left: 5px transparent;
218 // border-right: 5px transparent; 218 // border-right: 5px transparent;
219 // border-top: 5px #FFFFFF; 219 // border-top: 5px #FFFFFF;
220 // border-bottom: 0 transparent; 220 // border-bottom: 0 transparent;
221 // border-style: solid; 221 // border-style: solid;
222 // } 222 // }
223 .p1 { 223 .p1 {
224 min-height: 40px; 224 min-height: 40px;
225 // font-family: PingFangSC-Regular; 225 // font-family: PingFangSC-Regular;
226 font-size: 14px; 226 font-size: 14px;
227 color: #333333; 227 color: #333333;
228 letter-spacing: -0.26px; 228 letter-spacing: -0.26px;
229 line-height: 18px; 229 line-height: 18px;
230 // line-height: 20px; 230 // line-height: 20px;
231 } 231 }
232 .p2 { 232 .p2 {
233 height: 34px; 233 height: 34px;
234 padding: 1px 0 3px 0; 234 padding: 1px 0 3px 0;
235 // font-family: PingFangSC-Regular; 235 // font-family: PingFangSC-Regular;
236 font-size: 12px; 236 font-size: 12px;
237 color: #999999; 237 color: #999999;
238 letter-spacing: -0.23px; 238 letter-spacing: -0.23px;
239 } 239 }
240 .p3 { 240 .p3 {
241 height: 20px; 241 height: 20px;
242 // font-family: PingFangSC-Regular; 242 // font-family: PingFangSC-Regular;
243 font-size: 14px; 243 font-size: 14px;
244 color: #FF6B4A; 244 color: #FF6B4A;
245 letter-spacing: -0.26px; 245 letter-spacing: -0.26px;
246 } 246 }
247 .p4{ 247 .p4{
248 font-size: 12px; 248 font-size: 12px;
249 color: #999999; 249 color: #999999;
250 letter-spacing: -0.23px; 250 letter-spacing: -0.23px;
251 margin-left: 10px; 251 margin-left: 10px;
252 } 252 }
253 } 253 }
254 254
255 } 255 }
256 // .order-info-goodsnum { 256 // .order-info-goodsnum {
257 // display: flex; 257 // display: flex;
258 // align-items: center; 258 // align-items: center;
259 // justify-content: flex-end; 259 // justify-content: flex-end;
260 // text { 260 // text {
261 // margin-right: 44rpx; 261 // margin-right: 44rpx;
262 // // ont-family: PingFangSC-Regular; 262 // // ont-family: PingFangSC-Regular;
263 // font-size: 12px; 263 // font-size: 12px;
264 // color: #999999; 264 // color: #999999;
265 // letter-spacing: -0.23px; 265 // letter-spacing: -0.23px;
266 // } 266 // }
267 // } 267 // }
268 .order-info-freight { 268 .order-info-freight {
269 display: block; 269 display: block;
270 margin-left: 40rpx; 270 margin-left: 40rpx;
271 margin-top: 22rpx; 271 margin-top: 22rpx;
272 .p1{ 272 .p1{
273 // font-family: PingFangSC-Regular; 273 // font-family: PingFangSC-Regular;
274 font-size: 14px; 274 font-size: 14px;
275 color: #333333; 275 color: #333333;
276 letter-spacing: -0.26px; 276 letter-spacing: -0.26px;
277 line-height: 18px; 277 line-height: 18px;
278 margin-right: 24px; 278 margin-right: 24px;
279 } 279 }
280 .p2 { 280 .p2 {
281 // font-family: PingFangSC-Regular; 281 // font-family: PingFangSC-Regular;
282 font-size: 14px; 282 font-size: 14px;
283 color: #FF6B4A; 283 color: #FF6B4A;
284 letter-spacing: -0.26px; 284 letter-spacing: -0.26px;
285 } 285 }
286 } 286 }
287 .order-info-discount { 287 .order-info-discount {
288 display: block; 288 display: block;
289 margin-left: 40rpx; 289 margin-left: 40rpx;
290 margin-top: 24rpx; 290 margin-top: 24rpx;
291 .p1 { 291 .p1 {
292 // font-family: PingFangSC-Regular; 292 // font-family: PingFangSC-Regular;
293 font-size: 14px; 293 font-size: 14px;
294 color: #333333; 294 color: #333333;
295 letter-spacing: -0.26px; 295 letter-spacing: -0.26px;
296 line-height: 18px; 296 line-height: 18px;
297 margin-right: 24px; 297 margin-right: 24px;
298 } 298 }
299 .p2 { 299 .p2 {
300 // font-family: PingFangSC-Regular; 300 // font-family: PingFangSC-Regular;
301 font-size: 14px; 301 font-size: 14px;
302 color: #FF6B4A; 302 color: #FF6B4A;
303 letter-spacing: -0.26px; 303 letter-spacing: -0.26px;
304 } 304 }
305 } 305 }
306 .order-info-price { 306 .order-info-price {
307 display: block; 307 display: block;
308 margin-left: 40rpx; 308 margin-left: 40rpx;
309 margin-top: 24rpx; 309 margin-top: 24rpx;
310 .p1 { 310 .p1 {
311 // font-family: PingFangSC-Semibold; 311 // font-family: PingFangSC-Semibold;
312 font-size: 14px; 312 font-size: 14px;
313 color: #333333; 313 color: #333333;
314 letter-spacing: -0.26px; 314 letter-spacing: -0.26px;
315 line-height: 18px; 315 line-height: 18px;
316 margin-right: 24px; 316 margin-right: 24px;
317 } 317 }
318 .p2 { 318 .p2 {
319 // font-family: PingFangSC-Semibold; 319 // font-family: PingFangSC-Semibold;
320 font-size: 14px; 320 font-size: 14px;
321 color: #FF6B4A; 321 color: #FF6B4A;
322 letter-spacing: -0.26px; 322 letter-spacing: -0.26px;
323 } 323 }
324 } 324 }
325 .order-info-num{ 325 .order-info-num{
326 display: block; 326 display: block;
327 margin-left: 40rpx; 327 margin-left: 40rpx;
328 margin-top: 44rpx; 328 margin-top: 44rpx;
329 text{ 329 text{
330 // font-family: PingFangSC-Regular; 330 // font-family: PingFangSC-Regular;
331 font-size: 12px; 331 font-size: 12px;
332 color: #999999; 332 color: #999999;
333 letter-spacing: -0.23px; 333 letter-spacing: -0.23px;
334 } 334 }
335 } 335 }
336 .order-info-time { 336 .order-info-time {
337 display: block; 337 display: block;
338 margin: 8rpx 0 48rpx 40rpx; 338 margin: 8rpx 0 48rpx 40rpx;
339 text{ 339 text{
340 // font-family: PingFangSC-Regular; 340 // font-family: PingFangSC-Regular;
341 font-size: 12px; 341 font-size: 12px;
342 color: #999999; 342 color: #999999;
343 letter-spacing: -0.23px; 343 letter-spacing: -0.23px;
344 } 344 }
345 } 345 }
346 .order-info-hr{ 346 .order-info-hr{
347 width: 520rpx; 347 width: 520rpx;
348 height: 1px; 348 height: 1px;
349 background-color: #E9E9E9; 349 background-color: #E9E9E9;
350 margin-bottom: 20rpx; 350 margin-bottom: 20rpx;
351 } 351 }
352 .order-info-contact { 352 .order-info-contact {
353 display: flex; 353 display: flex;
354 padding-bottom: 28rpx; 354 padding-bottom: 28rpx;
355 image{ 355 image{
356 width: 19px; 356 width: 19px;
357 height: 16px; 357 height: 16px;
358 } 358 }
359 text { 359 text {
360 // font-family: PingFangSC-Regular; 360 // font-family: PingFangSC-Regular;
361 margin-left: 20rpx; 361 margin-left: 20rpx;
362 font-size: 14px; 362 font-size: 14px;
363 color: #333333; 363 color: #333333;
364 letter-spacing: -0.26px; 364 letter-spacing: -0.26px;
365 line-height: 18px; 365 line-height: 18px;
366 } 366 }
367 } 367 }
368 } 368 }
369 369
370 .order-confim { 370 .order-confim {
371 display: flex; 371 display: flex;
372 align-items: center; 372 align-items: center;
373 z-index: 999; 373 z-index: 999;
374 width: 100%; 374 width: 100%;
375 height: 112rpx; 375 height: 112rpx;
376 position: fixed; 376 position: fixed;
377 bottom: 0; 377 bottom: 0;
378 background: #FFFFFF; 378 background: #FFFFFF;
379 button { 379 button {
380 width: 204rpx; 380 width: 204rpx;
381 height: 80rpx; 381 height: 80rpx;
382 border: 1px solid #FF6B4A; 382 border: 1px solid #FF6B4A;
383 border-radius: 40rpx; 383 border-radius: 40rpx;
384 font-size: 32rpx; 384 font-size: 32rpx;
385 letter-spacing: -0.3px; 385 letter-spacing: -0.3px;
386 margin-right: 0; 386 margin-right: 0;
387 } 387 }
388 .b1 { 388 .b1 {
389 // font-family: PingFangSC-Regular; 389 // font-family: PingFangSC-Regular;
390 color: #FF6B4A; 390 color: #FF6B4A;
391 391
392 } 392 }
393 .b2 { 393 .b2 {
394 // font-family: PingFangSC-Regular; 394 // font-family: PingFangSC-Regular;
395 background-color: #FF6B4A; 395 background-color: #FF6B4A;
396 color: #FFFFFF; 396 color: #FFFFFF;
397 margin: 0 26rpx 0 20rpx; 397 margin: 0 26rpx 0 20rpx;
398 } 398 }
399 } 399 }
400 400
401 </style> 401 </style>
402 402
src/pages/user/user.vue
Diff comments   View file @600d496
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view class="content"> 3 <view v-if="isAuth" class="content">
4 <view class="userInfo"> 4 <view class="userInfo">
5 <view class="info"> 5 <view class="info">
6 <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> 6 <image :src="headerphoto" mode="aspectFill"></image>
7 <view class="infoText"> 7 <view class="infoText">
8 <text class="userName">{{userName}}</text> 8 <text class="userName">{{nickName}}</text>
9 <text class="nickName">用户名：骆驼不死的祥子</text>
10 </view> 9 </view>
11 </view> 10 </view>
12 <view class="service"> 11 <view class="service">
13 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
14 </view> 13 </view>
15 </view> 14 </view>
16 <view class="myOrder"> 15 <view class="myOrder">
17 <view class="orderHeader"> 16 <view class="orderHeader">
18 <text>全部订单</text> 17 <text>全部订单</text>
19 <view class="btn" @click="toMyOrder"> 18 <view class="btn" @click="toMyOrder">
20 全部 19 全部
21 <image src="../../static/right.png" mode="aspectFill"></image> 20 <image src="../../static/right.png" mode="aspectFill"></image>
22 </view> 21 </view>
23 </view> 22 </view>
24 <view class="orderBody"> 23 <view class="orderBody">
25 <view class="item waitPay" @click="toMyOrderPaying"> 24 <view class="item waitPay" @click="toMyOrderPaying">
26 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 25 <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
27 <text>待付款</text> 26 <text>待付款</text>
28 </view> 27 </view>
29 <view class="item waitDeliver" @click="toPredelivery" > 28 <view class="item waitDeliver" @click="toPredelivery" >
30 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 29 <image src="../../static/waitPay.png" mode="aspectFill"></image>
31 <text>待发货</text> 30 <text>待发货</text>
32 </view> 31 </view>
33 <view class="item waitReceive" @click="torefunProgress"> 32 <view class="item waitReceive" @click="torefunProgress">
34 <image src="../../static/waitReceive.png" mode="aspectFill"></image> 33 <image src="../../static/waitReceive.png" mode="aspectFill"></image>
35 <text>待收货</text> 34 <text>待收货</text>
36 </view> 35 </view>
37 <view class="item service" @click="torefundment"> 36 <view class="item service" @click="torefundment">
38 <image src="../../static/service.png" mode="aspectFill"></image> 37 <image src="../../static/service.png" mode="aspectFill"></image>
39 <text>退换/售后</text> 38 <text>退换/售后</text>
40 </view> 39 </view>
41 </view> 40 </view>
42 </view> 41 </view>
43 <view class="recommend"> 42 <view class="recommend">
44 <view class="title"> 43 <view class="title">
45 <view class="line"></view> 44 <view class="line"></view>
46 <view class="text">精选推荐</view> 45 <view class="text">精选推荐</view>
47 <view class="line"></view> 46 <view class="line"></view>
48 </view> 47 </view>
49 <!-- 商品列表 --> 48 <!-- 商品列表 -->
50 <view class="goods-list"> 49 <view class="goods-list">
51 <view class="product-list"> 50 <view class="product-list">
52 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> 51 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
53 <Card :goods = "goods"></Card> 52 <Card :goods = "goods"></Card>
54 </view> 53 </view>
55 </view> 54 </view>
56 <view class="loading-text">{{loadingText}}</view> 55 <view class="loading-text">{{loadingText}}</view>
57 </view> 56 </view>
58 </view> 57 </view>
59 </view> 58 </view>
60 59 <view v-else class="auth">
60 <view class="icon"></view>
61 <view class="divider"></view>
62 <view class="title">申请获取以下权限</view>
63 <view class="text">获得您的公开信息(昵称、头像等)</view>
64 <button
65 type="primary"
66 open-type="getUserInfo"
67 @getuserinfo="onGotUserInfo"
68 >授权登陆</button>
69 </view>
61 </view> 70 </view>
62 </template> 71 </template>
63 72
64 <script> 73 <script>
65 import Card from "@/components/CommodityCard/CommodityCard.vue" 74 import Card from "@/components/CommodityCard/CommodityCard.vue";
75 import store from '@/store';
76
66 export default { 77 export default {
67 components: { 78 components: {
68 'Card':Card 79 'Card':Card
69 }, 80 },
70 data() { 81 data() {
71 return { 82 return {
72
73 //商品数据 83 //商品数据
74 goodsList:[ 84 goodsList:[
75 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 85 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
76 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 86 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
77 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 87 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
78 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 88 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
79 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 89 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
80 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 90 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
81 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 91 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
82 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 92 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
83 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 93 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
84 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } 94 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
85 ], 95 ],
86 headerphoto:'', 96 isAuth: true, // 是否显示授权页面
87 userName:'Adam'
88 } 97 }
89 }, 98 },
90 onLoad() { 99 onLoad() {
91 100 // 判断是否授权
101 uni.getSetting({
102 success(res) {
103 console.log('authSetting',res.authSetting)
104 if(res.authSetting['scope.userInfo'] === true) {
105 this.isAuth = true
106 } else {
107 this.isAuth = false
108 }
109 }
110 })
111 },
112 computed: {
113 nickName() {
114 console.log('nickName', this.$store.state.user.userInfo)
115 return this.$store.state.user.userInfo.nickName;
116 },
117 headerphoto() {
118 return this.$store.state.user.userInfo.headerphoto;
119 },
120 userRecommandList() {
121 console.log('recommandList', this.$store.state.userRecommand.recommandList);
122 return this.$store.state.userRecommand.recommandList;
123 }
124 },
125 onLoad: function() {
126 store.dispatch('userRecommand/getRecommandList', {
127 uid: 2,
128 });
92 }, 129 },
93 methods: { 130 methods: {
131 // 授权
132 onGotUserInfo(e) {
133 console.log('anthInfo', e);
134 if(e.detail.errMsg == 'getUserInfo:ok') {
135 const { fromInfo } = this.$store.state.user;
136 console.log('=====la', fromInfo)
137 // 用户授权成功
138 store.dispatch('user/getUserInfo', fromInfo);
139 this.isAuth = true
140 }
141 },
94 toMyOrder(){ 142 toMyOrder(){
95 uni.navigateTo({ 143 uni.navigateTo({
96 url: '../myOrder/myOrder?current=0', 144 url: '../myOrder/myOrder?current=0',
97 success: res => {}, 145 success: res => {},
98 fail: () => {}, 146 fail: () => {},
99 complete: () => {} 147 complete: () => {}
100 }); 148 });
101 }, 149 },
102 toPredelivery(){ 150 toPredelivery(){
103 uni.navigateTo({ 151 uni.navigateTo({
104 url: '../myOrder/myOrder?current=2', 152 url: '../myOrder/myOrder?current=2',
105 success: res => {}, 153 success: res => {},
106 fail: () => {}, 154 fail: () => {},
107 complete: () => {} 155 complete: () => {}
108 }); 156 });
109 }, 157 },
110 toMyOrderPaying(){ 158 toMyOrderPaying(){
111 uni.navigateTo({ 159 uni.navigateTo({
112 url: '../myOrder/myOrder?current=1', 160 url: '../myOrder/myOrder?current=1',
113 success: res => {}, 161 success: res => {},
114 fail: () => {}, 162 fail: () => {},
115 complete: () => {} 163 complete: () => {}
116 }); 164 });
117 }, 165 },
118 torefundment(){ 166 torefundment(){
119 uni.navigateTo({ 167 uni.navigateTo({
120 url:'../refundment/refundment', 168 url:'../refundment/refundment',
121 }) 169 })
122 }, 170 },
123 torefunProgress(){ 171 torefunProgress(){
124 uni.navigateTo({ 172 uni.navigateTo({
125 url:'../refundProgress/refundProgress' 173 url:'../refundProgress/refundProgress'
126 }) 174 })
127 } 175 }
128 } 176 }
129 } 177 }
130 </script> 178 </script>
131 179
132 <style lang="scss"> 180 <style lang="scss">
133 .warp{ 181 .warp{
134 font-size: 24rpx; 182 font-size: 24rpx;
135 background-color: #f2f2f2; 183 background-color: #f2f2f2;
136 height: 100vh; 184 height: 100vh;
137 } 185 }
138 .content { 186 .content {
139 display: flex; 187 display: flex;
140 flex-direction: column; 188 flex-direction: column;
141 align-items: center; 189 align-items: center;
142 justify-content: center; 190 justify-content: center;
143 background-color: #F2F2F2; 191 background-color: #F2F2F2;
144 } 192 }
145 .userInfo{ 193 .userInfo{
146 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); 194 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
147 width: 100%; 195 width: 100%;
148 height: 240rpx; 196 height: 240rpx;
149 color: #FFFFFF; 197 color: #FFFFFF;
150 padding: 60rpx 82rpx 80rpx 44rpx; 198 padding: 60rpx 82rpx 80rpx 44rpx;
151 box-sizing: border-box; 199 box-sizing: border-box;
152 display: flex; 200 display: flex;
153 flex-direction: row; 201 flex-direction: row;
154 justify-content: space-between; 202 justify-content: space-between;
155 align-items: flex-start; 203 align-items: flex-start;
156 .info{ 204 .info{
157 display: flex; 205 display: flex;
158 flex-direction: row; 206 flex-direction: row;
159 justify-content: space-between; 207 justify-content: space-between;
160 align-items: center; 208 align-items: center;
161 image{ 209 image{
162 border-radius: 50rpx; 210 border-radius: 50rpx;
163 height: 100rpx ; 211 height: 100rpx ;
164 width: 100rpx; 212 width: 100rpx;
165 margin-right: 40rpx; 213 margin-right: 40rpx;
166 } 214 }
167 .infoText{ 215 .infoText{
168 display: flex; 216 display: flex;
169 flex-direction: column; 217 flex-direction: column;
170 justify-content: space-between; 218 justify-content: space-between;
171 align-items: flex-scetart; 219 align-items: flex-scetart;
172 .userName{ 220 .userName{
173 font-size: 18px; 221 font-size: 18px;
174 color: #FFFFFF; 222 color: #FFFFFF;
175 margin-bottom: 8rpx; 223 margin-bottom: 8rpx;
176 } 224 }
177 .nickName{ 225 .nickName{
178 font-size: 12px; 226 font-size: 12px;
179 color: #FFFFFF; 227 color: #FFFFFF;
180 } 228 }
181 } 229 }
182 } 230 }
183 .service{ 231 .service{
232 margin-top: 20rpx;
184 image{ 233 image{
185 height: 36rpx; 234 height: 36rpx;
186 width: 36rpx; 235 width: 36rpx;
187 } 236 }
188 } 237 }
189 } 238 }
190 .myOrder{ 239 .myOrder{
191 width: 100%; 240 width: 100%;
192 height: 296rpx; 241 height: 296rpx;
193 margin-top: 20rpx; 242 margin-top: 20rpx;
194 margin-bottom: 20rpx; 243 margin-bottom: 20rpx;
195 padding: 0 40rpx; 244 padding: 0 40rpx;
196 box-sizing: border-box; 245 box-sizing: border-box;
197 background: #FFFFFF; 246 background: #FFFFFF;
198 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 247 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
199 border-radius: 6px; 248 border-radius: 6px;
200 border-radius: 6px; 249 border-radius: 6px;
201 display: flex; 250 display: flex;
202 flex-direction: column; 251 flex-direction: column;
203 justify-content: space-around; 252 justify-content: space-around;
204 align-items: center; 253 align-items: center;
205 .orderHeader{ 254 .orderHeader{
206 width: 100%; 255 width: 100%;
207 height: 100rpx; 256 height: 100rpx;
208 display: flex; 257 display: flex;
209 flex-direction: row; 258 flex-direction: row;
210 justify-content: space-between; 259 justify-content: space-between;
211 align-items: center; 260 align-items: center;
212 border-bottom: 1px solid #E9E9E9;; 261 border-bottom: 1px solid #E9E9E9;;
213 font-weight: bold; 262 font-weight: bold;
214 font-size: 18px; 263 font-size: 18px;
215 color: #333333; 264 color: #333333;
216 .btn{ 265 .btn{
217 font-size: 12px; 266 font-size: 12px;
218 color: #999999; 267 color: #999999;
219 image{ 268 image{
220 margin-left: 20rpx; 269 margin-left: 20rpx;
221 height: 16rpx; 270 height: 16rpx;
222 width: 8rpx; 271 width: 8rpx;
223 } 272 }
224 } 273 }
225 } 274 }
226 .orderBody{ 275 .orderBody{
227 width: 100%; 276 width: 100%;
228 display: flex; 277 display: flex;
229 flex-direction: row; 278 flex-direction: row;
230 justify-content: space-between; 279 justify-content: space-between;
231 align-items: center; 280 align-items: center;
232 .item{ 281 .item{
233 display: flex; 282 display: flex;
234 flex-direction: column; 283 flex-direction: column;
235 align-items: center; 284 align-items: center;
236 image{ 285 image{
237 width: 46rpx; 286 width: 46rpx;
238 height: 46rpx; 287 height: 46rpx;
239 } 288 }
240 text{ 289 text{
241 margin-top: 24rpx; 290 margin-top: 24rpx;
242 font-size: 12px; 291 font-size: 12px;
243 color: #333333; 292 color: #333333;
244 } 293 }
245 } 294 }
246 } 295 }
247 } 296 }
248 .recommend{ 297 .recommend{
249 background: #FFFFFF; 298 background: #FFFFFF;
250 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 299 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
251 border-radius: 6px; 300 border-radius: 6px;
252 border-radius: 6px; 301 border-radius: 6px;
253 width: 100%; 302 width: 100%;
254 .title{ 303 .title{
255 display: flex; 304 display: flex;
256 flex-direction: row; 305 flex-direction: row;
257 align-items: center; 306 align-items: center;
258 justify-content: space-between; 307 justify-content: space-between;
259 padding: 20rpx 40rpx; 308 padding: 20rpx 40rpx;
260 .line{ 309 .line{
261 width: 264rpx; 310 width: 264rpx;
262 height: 1rpx; 311 height: 1rpx;
263 border-bottom: 1px solid #EAEAEA; 312 border-bottom: 1px solid #EAEAEA;
264 } 313 }
265 .text{ 314 .text{
266 font-family: PingFangSC-Medium; 315 font-family: PingFangSC-Medium;
267 font-size: 14px; 316 font-size: 14px;
268 color: #333333; 317 color: #333333;
269 letter-spacing: -0.26px; 318 letter-spacing: -0.26px;
270 text-align: justify; 319 text-align: justify;
271 line-height: 24px; 320 line-height: 24px;
272 } 321 }
273 } 322 }
274 .goods-list{ 323 .goods-list{
275 .loading-text{ 324 .loading-text{
276 width: 100%; 325 width: 100%;
277 display: flex; 326 display: flex;
278 justify-content: center; 327 justify-content: center;
279 align-items: center; 328 align-items: center;
280 height: 30px; 329 height: 30px;
281 color: #979797; 330 color: #979797;
282 font-size: 12px; 331 font-size: 12px;
283 } 332 }
284 .product-list{ 333 .product-list{
285 width: 92%; 334 width: 92%;
286 padding: 0 4% 3vw 4%; 335 padding: 0 4% 3vw 4%;
287 display: flex; 336 display: flex;
288 justify-content: space-between; 337 justify-content: space-between;
289 flex-wrap: wrap; 338 flex-wrap: wrap;
290 .product{ 339 .product{
291 width: 48%; 340 width: 48%;
292 margin: 0 0 20rpx 0; 341 margin: 0 0 20rpx 0;
293 background: #FFFFFF; 342 background: #FFFFFF;
294 border: 1px solid #F2F2F2; 343 border: 1px solid #F2F2F2;
295 } 344 }
296 } 345 }
297 } 346 }
298 } 347 }
348 .auth {
349 height: 100vh;
350 display: flex;
351 flex-direction: column;
352 align-items: center;
353 .icon {
354 width: 140rpx;
355 height: 140rpx;
356 border-radius: 50%;
357 margin-top: 100rpx;
358 background-color: grey;
359 }
360 .divider {
361 height: 1rpx;
362 width: 600rpx;
363 margin-top: 80rpx;
364 background-color: #E6E3E3;
365 }
366 .title {
367 width: 600rpx;
368 margin-top: 50rpx;
369 text-align: left;
370 }
371 .text {
372 width: 600rpx;
373 margin-top: 30rpx;
374 text-align: left;
375 color: #E6E3E3;
376 }
377 button {
378 width: 450rpx;
379 height: 80rpx;
380 line-height: 80rpx;
381 margin-top: 80rpx;
382 border-radius: 30rpx;
383 }
384 }
src/store/modules/cart.js
Diff comments   View file @600d496
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const { cartList } = urlAlias;
5
6 const state = {
7 cartList: [],
8 };
9
10 const mutations = {
11 INIT: (state, cartList) => {
12 state.cartList = cartList;
13 },
14 };
15
16
17
18 const actions = {
19
20 getCartList({ commit }, param) {
21 request({
22 url: cartList,
23 success: (res) => {
24
25 commit('INIT', res.data.data)
26 },
27 fail: (res) => {
28 console.log("fail status === > ", res);
29 },
30 complete: (res) => {
31 console.log("complete status === > ", res);
32 },
33 })
34 }
35
36 }
37
38 export default {
39 namespaced: true,
40 state,
41 mutations,
42 actions,
43 };
src/store/modules/user.js
Diff comments   View file @600d496
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 login,
6 getUserInfo,
7 } = urlAlias;
8
9 const state = {
10 fromInfo: {
11 loginQueryInfo: {},
12 fromuid: 0,
13 fromsid: 0,
14 frompid: 0,
15 scene: 1001,
16 },
17 userInfo: {
18 uid: 1,
19 openid: '',
20 nickName: '',
21 headerphoto: '',
22 }
23 };
24
25 const mutations = {
26 FROM: (state, data) => {
27 state.formInfo = data;
28 },
29 UPDATE: (state, data) => {
30 state.userInfo = data;
31 }
32 };
33
34 const actions = {
35 // 登陆
36 login({ commit }, param) {
37 const {
38 frompid = undefined,
39 fromsid = undefined,
40 fromuid = undefined,
41 scene = 1001 ,
42 } = param || {};
43 uni.login({
44 provider: 'weixin',
45 success: function (loginRes) {
46 console.log('login',loginRes);
47 request({
48 url: login,
49 data: {
50 app_uid: 2020,
51 code: loginRes.code,
52 frompid,
53 fromsid,
54 fromuid,
55
56 },
57 success: (res) => {
58 const { data: { session_key, openid} } = res;
59 console.log('res', res)
60 // 写入缓存
61 uni.setStorageSync('session_key', session_key);
62 uni.setStorageSync('openid', openid);
63 request({
64 url: getUserInfo,
65 data: {
66 app_uid: 2020,
67 frompid,
68 fromsid,
69 fromuid,
70 openid,
71 scene,
72 },
73 success: (res) => {
74 console.log('userInfo=====', res);
75 const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res;
76 const userInfo = {
77 uid,
78 openid,
79 nickName,
80 headerphoto,
81 }
82 commit("UPDATE", userInfo)
83 }
84 })
85 }
86 })
87 }
88 });
89 },
90 setFrom({ commit }, param) {
91 commit("FROM", param);
92 },
93 getUserInfo( { commit }, param) {
94 const {
95 frompid = undefined,
96 fromsid = undefined,
97 fromuid = undefined,
98 scene = 1001 ,
99 } = param || {};
100 // 写入缓存
101 const openid = uni.getStorageSync('openid', openid);
102 request({
103 url: getUserInfo,
104 data: {
105 app_uid: 2020,
106 frompid,
107 fromsid,
108 fromuid,
109 openid,
110 scene,
111 },
112 success: (res) => {
113 console.log('userInfo=====', res);
114 const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res;
115 const userInfo = {
116 uid,
117 openid,
118 nickName,
119 headerphoto,
120 }
121 commit("UPDATE", userInfo)
122 }
123 })
124 },
125 }
126
127 export default {
128 namespaced: true,
129 state,
130 mutations,
131 actions,
132 }
src/store/modules/userRecommand.js
Diff comments   View file @600d496
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 recommandList
6 } = urlAlias;
7
8 const state = {
9 recommandList: [],
10 };
11
12 const mutations = {
13 INIT: (state, list) => {
14 state.recommandList = list;
15 },
16 };
17
18 const actions = {
19 getRecommandList({ commit }, param) {
20 request({
21 url: recommandList,
22 success: (res) => {
23 console.log(res.data)
24 commit('INIT', res.data.data)
25 },
26 fail: (res) => {
27 console.log("fail status === > ", res);
28 },
29 complete: (res) => {
30 console.log("complete status === > ", res);
31 },
32 })
33 },
34 };
35
36 export default {
37 namespaced: true,
38 state,
39 mutations,
40 actions,
41 };
1 const urlAlias = { 1 const urlAlias = {
2 // 获取首页商品列表 2 // 获取首页商品列表
3 shopList: '/app/prod/list', 3 shopList: '/app/prod/list',
4 4
5 // 获取首页商品列表 5 // 获取首页商品列表
6 category: '/app/prod/category2', 6 category: '/app/prod/category2',
7 // 获取商品信息
8 read: '/app/prod/read',
9
10 // 首页
11 shopList: '/app/prod/list', // 获取首页商品列表
12 category: '/app/prod/category', // 获取首页商品分类
13
14 // 登陆
15 login: '/app/glass/getOpenId', // 登陆
16 getUserInfo: '/app/glass/userinfo', // 获取用户信息
17
18 // 我的订单
7 // 获取商品信息 19 orderList: '/app/order/list', // 获取订单列表
8 read: '/app/prod/read', 20
9 } 21 // 购物车
10 22 cartList: '/app/cart/list', // 获取购物车列表
11 export default urlAlias; 23
12 24 // 我的
25 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
26 }
27
28 export default urlAlias;
29