Commit f1da24fb30607b6d39e18bac713e45778b577462

Authored by Adam
Exists in master

s

src/components/CommodityCard/CommodityCard.vue
1 <template> 1 <template>
2 <view class="card" @tap="toGoods(goods.id)"> 2 <view class="card" @tap="toGoods(goods.goods_id,goods.goodType)">
3 <image mode="widthFix" :src="goods.imgurl" ></image> 3 <image mode="widthFix" :src="goods.img" ></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.rsSon.Min_Price}}</view> 7 <view class="price">{{goods.price}}</view>
8 <view class="originCost"> 8 <view class="originCost">
9 {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}} 9 {{goods.originCost}}
10 <!-- {{goods.oldPrice}} -->
11 </view> 10 </view>
12 </view> 11 </view>
13 <view class="slogan">{{goods.trade_num}}</view> 12 <view class="slogan">{{goods.slogan}}</view>
14 </view> 13 </view>
15 </view> 14 </view>
16 </template> 15 </template>
17 16
18 <script> 17 <script>
19 export default { 18 export default {
20 props: { 19 props: {
21 /** 20 /**
22 * 商品数据 21 * 商品数据
23 */ 22 */
24 goods: { 23 goods: {
25 id: Number, 24 goods_id: Number,
26 imgurl: String, 25 img: String,
27 name: String, 26 name: String,
28 oldPrice:String, 27 originCost:String,
29 price: String, 28 price: String,
30 memo:String 29 slogan:String,
30 goodType:String,
31 } 31 }
32 32
33 }, 33 },
34 created() { 34 created() {
35 console.log(this.goods)
35 }, 36 },
36 data() { 37 data() {
37 return { 38 return {
38 39
39 }; 40 };
40 }, 41 },
41 methods:{ 42 methods:{
42 toGoods(id){ 43 toGoods(id,type){
43 console.log('toGoods =====> id======>', id) 44 // console.log('toGoods =====> id======>', id)
44 uni.navigateTo({ 45 // console.log(type)
45 url: `../detail/detail?oderId=1`, 46 switch(type){
46 success: res => {}, 47 case 1:
47 fail: () => {}, 48 uni.navigateTo({
48 complete: () => {} 49 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
49 }); 50 success: res => {},
51 fail: () => {},
52 complete: () => {}
53 });
54 break;
55 case 2:
56 uni.navigateTo({
57 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
58 success: res => {},
59 fail: () => {},
60 complete: () => {}
61 });
62 break;
63 case 3:
64 uni.navigateTo({
65 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
66 success: res => {},
67 fail: () => {},
68 complete: () => {}
69 });
70 break;
71 case 4:
72 uni.navigateTo({
73 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
74 success: res => {},
75 fail: () => {},
76 complete: () => {}
77 });
78 break;
79 default :
80 break
81 }
50 } 82 }
51 } 83 }
52 } 84 }
53 </script> 85 </script>
54 86
55 <style lang="scss"> 87 <style lang="scss">
56 image{ 88 image{
57 width: 100%; 89 width: 100%;
58 height: 120rpx; 90 height: 120rpx;
59 } 91 }
60 .name{ 92 .name{
61 width: 92%; 93 width: 92%;
62 height: 54rpx; 94 height: 54rpx;
63 padding: 5px 4%; 95 padding: 5px 4%;
64 display: -webkit-box; 96 display: -webkit-box;
65 -webkit-box-orient: vertical; 97 -webkit-box-orient: vertical;
66 -webkit-line-clamp: 2; 98 -webkit-line-clamp: 2;
67 text-align: justify; 99 text-align: justify;
68 overflow: hidden; 100 overflow: hidden;
69 font-size: 24rpx; 101 font-size: 24rpx;
70 color: #333333; 102 color: #333333;
71 } 103 }
72 .info{ 104 .info{
73 display: flex; 105 display: flex;
74 justify-content: space-between; 106 justify-content: space-between;
75 align-items: center; 107 align-items: center;
76 width: 92%; 108 width: 92%;
77 padding: 5px 4% 5px 4%; 109 padding: 5px 4% 5px 4%;
78 .priceBox{ 110 .priceBox{
79 display: flex; 111 display: flex;
80 justify-content: space-between; 112 justify-content: space-between;
81 align-items: center; 113 align-items: center;
82 .price{ 114 .price{
83 color: #EB5D3B; 115 color: #EB5D3B;
84 font-size: 28rpx; 116 font-size: 28rpx;
85 font-weight: 600; 117 font-weight: 600;
86 margin-right: 10rpx; 118 margin-right: 10rpx;
87 } 119 }
88 .originCost{ 120 .originCost{
89 text-decoration:line-through; 121 text-decoration:line-through;
90 color: #999999; 122 color: #999999;
91 font-size: 20rpx; 123 font-size: 20rpx;
92 } 124 }
93 125
94 } 126 }
95 .slogan{ 127 .slogan{
96 color: #999999; 128 color: #999999;
97 font-size: 20rpx; 129 font-size: 20rpx;
98 } 130 }
99 } 131 }
100 </style> 132 </style>
src/components/UniCollapseItem/UniCollapseItem.vue
1 <template> 1 <template>
2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }" 2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
3 class="uni-collapse-cell"> 3 class="uni-collapse-cell">
4 <view class="uni-collapse-cell__title" @click="onClick"> 4 <view class="uni-collapse-cell__title" @click="onClick">
5 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" /> 5 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
6 <text class="uni-collapse-cell__title-text">{{ title }}</text> 6 <text class="uni-collapse-cell__title-text">{{ title }}</text>
7 <!-- #ifdef MP-ALIPAY --> 7 <!-- #ifdef MP-ALIPAY -->
8 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 8 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
9 class="uni-collapse-cell__title-arrow"> 9 class="uni-collapse-cell__title-arrow">
10 <uni-icons color="#bbb" size="20" type="arrowdown" /> 10 <uni-icons color="#bbb" size="20" type="arrowdown" />
11 </view> 11 </view>
12 <!-- #endif --> 12 <!-- #endif -->
13 <!-- #ifndef MP-ALIPAY --> 13 <!-- #ifndef MP-ALIPAY -->
14 <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 14 <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
15 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" /> 15 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
16 <!-- #endif --> 16 <!-- #endif -->
17 </view> 17 </view>
18 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content"> 18 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
19 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"> 19 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper"
20 :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"
21 >
20 <slot /> 22 <slot />
21 </view> 23 </view>
22 </view> 24 </view>
23 </view> 25 </view>
24 </template> 26 </template>
25 27
26 <script> 28 <script>
27 import UniIcons from '../UniIcons/UniIcons.vue' 29 import UniIcons from '../UniIcons/UniIcons.vue'
28 export default { 30 export default {
29 name: 'UniCollapseItem', 31 name: 'UniCollapseItem',
30 components: { 32 components: {
31 UniIcons 33 UniIcons
32 }, 34 },
33 props: { 35 props: {
34 title: { 36 title: {
35 // 列表标题 37 // 列表标题
36 type: String, 38 type: String,
37 default: '' 39 default: ''
38 }, 40 },
39 name: { 41 name: {
40 // 唯一标识符 42 // 唯一标识符
41 type: [Number, String], 43 type: [Number, String],
42 default: 0 44 default: 0
43 }, 45 },
44 disabled: { 46 disabled: {
45 // 是否禁用 47 // 是否禁用
46 type: Boolean, 48 type: Boolean,
47 default: false 49 default: false
48 }, 50 },
49 showAnimation: { 51 showAnimation: {
50 // 是否显示动画 52 // 是否显示动画
51 type: Boolean, 53 type: Boolean,
52 default: false 54 default: false
53 }, 55 },
54 open: { 56 open: {
55 // 是否展开 57 // 是否展开
56 type: Boolean, 58 type: Boolean,
57 default: false 59 default: false
58 }, 60 },
59 thumb: { 61 thumb: {
60 // 缩略图 62 // 缩略图
61 type: String, 63 type: String,
62 default: '' 64 default: ''
63 } 65 }
64 }, 66 },
65 data() { 67 data() {
66 return { 68 return {
67 isOpen: false 69 isOpen: false
68 } 70 }
69 }, 71 },
70 watch: { 72 watch: {
71 open(val) { 73 open(val) {
72 this.isOpen = val 74 this.isOpen = val
73 } 75 }
74 }, 76 },
75 inject: ['collapse'], 77 inject: ['collapse'],
76 created() { 78 created() {
77 this.isOpen = this.open 79 this.isOpen = this.open
78 this.nameSync = this.name ? this.name : this.collapse.childrens.length 80 this.nameSync = this.name ? this.name : this.collapse.childrens.length
79 this.collapse.childrens.push(this) 81 this.collapse.childrens.push(this)
80 if (String(this.collapse.accordion) === 'true') { 82 if (String(this.collapse.accordion) === 'true') {
81 if (this.isOpen) { 83 if (this.isOpen) {
82 let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2] 84 let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
83 if (lastEl) { 85 if (lastEl) {
84 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false 86 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
85 } 87 }
86 } 88 }
87 } 89 }
88 }, 90 },
89 methods: { 91 methods: {
90 onClick() { 92 onClick() {
91 if (this.disabled) { 93 if (this.disabled) {
92 return 94 return
93 } 95 }
94 if (String(this.collapse.accordion) === 'true') { 96 if (String(this.collapse.accordion) === 'true') {
95 this.collapse.childrens.forEach(vm => { 97 this.collapse.childrens.forEach(vm => {
96 if (vm === this) { 98 if (vm === this) {
97 return 99 return
98 } 100 }
99 vm.isOpen = false 101 vm.isOpen = false
100 }) 102 })
101 } 103 }
102 this.isOpen = !this.isOpen 104 this.isOpen = !this.isOpen
103 this.collapse.onChange && this.collapse.onChange() 105 this.collapse.onChange && this.collapse.onChange()
104 this.$forceUpdate() 106 this.$forceUpdate()
105 console.log(this.isOpen) 107 console.log(this.isOpen)
106 } 108 }
107 } 109 }
108 } 110 }
109 </script> 111 </script>
110 112
111 <style lang="scss" scoped> 113 <style lang="scss" scoped>
112 @import '@/uni.scss'; 114 @import '@/uni.scss';
113 115
114 .uni-collapse-cell { 116 .uni-collapse-cell {
115 flex-direction: column; 117 flex-direction: column;
116 border-color: #FFFFFF; 118 border-color: #FFFFFF;
117 border-bottom-width: 1px; 119 border-bottom-width: 1px;
118 border-bottom-style: solid; 120 border-bottom-style: solid;
119 } 121 }
120 122
121 123
122 .uni-collapse-cell--hover { 124 .uni-collapse-cell--hover {
123 background-color: #FFFFFF; 125 background-color: #FFFFFF;
124 } 126 }
125 127
126 .uni-collapse-cell--open { 128 .uni-collapse-cell--open {
127 background-color: #FFFFFF; 129 background-color: #FFFFFF;
128 } 130 }
129 131
130 .uni-collapse-cell--disabled { 132 .uni-collapse-cell--disabled {
131 background-color: #FFFFFF; 133 background-color: #FFFFFF;
132 // opacity: 0.3; 134 // opacity: 0.3;
133 } 135 }
134 136
135 137
136 .uni-collapse-cell--hide { 138 .uni-collapse-cell--hide {
137 height: 48px; 139 height: 48px;
138 } 140 }
139 141
140 .uni-collapse-cell--animation { 142 .uni-collapse-cell--animation {
141 transition: transform 0.5s ease; 143 transition: transform 0s ease;
142 transition-property: transform; 144 transition-property: transform;
143 transition-duration: 0.5s; 145 transition-duration: 0s;
144 transition-timing-function: ease; 146 transition-timing-function: ease;
145 } 147 }
146 148
147 .uni-collapse-cell__title { 149 .uni-collapse-cell__title {
148 // padding: 12px 12px; 150 // padding: 12px 12px;
149 font-size: 16px; 151 font-size: 16px;
150 color: #333333; 152 color: #333333;
151 position: relative; 153 position: relative;
152 /* #ifndef APP-NVUE */ 154 /* #ifndef APP-NVUE */
153 display: flex; 155 display: flex;
154 width: 100%; 156 width: 100%;
155 box-sizing: border-box; 157 box-sizing: border-box;
156 /* #endif */ 158 /* #endif */
157 height: 48px; 159 height: 48px;
158 line-height: 24px; 160 line-height: 24px;
159 flex-direction: row; 161 flex-direction: row;
160 justify-content: space-between; 162 justify-content: space-between;
161 align-items: center; 163 align-items: center;
162 } 164 }
163 165
164 .uni-collapse-cell__title:active { 166 .uni-collapse-cell__title:active {
165 background-color: #FFFFFF; 167 background-color: #FFFFFF;
166 } 168 }
167 169
168 .uni-collapse-cell__title-img { 170 .uni-collapse-cell__title-img {
169 height: $uni-img-size-base; 171 height: $uni-img-size-base;
170 width: $uni-img-size-base; 172 width: $uni-img-size-base;
171 margin-right: 10px; 173 margin-right: 10px;
172 } 174 }
173 175
174 .uni-collapse-cell__title-arrow { 176 .uni-collapse-cell__title-arrow {
175 width: 20px; 177 width: 20px;
176 height: 20px; 178 height: 20px;
177 transform: rotate(0deg); 179 transform: rotate(0deg);
178 transform-origin: center center; 180 transform-origin: center center;
179 181
180 } 182 }
181 183
182 .uni-collapse-cell__title-arrow-active { 184 .uni-collapse-cell__title-arrow-active {
183 transform: rotate(180deg); 185 transform: rotate(180deg);
184 } 186 }
185 187
186 .uni-collapse-cell__title-text { 188 .uni-collapse-cell__title-text {
187 flex: 1; 189 flex: 1;
188 font-size: $uni-font-size-base; 190 font-size: $uni-font-size-base;
189 /* #ifndef APP-NVUE */ 191 /* #ifndef APP-NVUE */
190 white-space: nowrap; 192 white-space: nowrap;
191 color: inherit; 193 color: inherit;
192 /* #endif */ 194 /* #endif */
193 /* #ifdef APP-NVUE */ 195 /* #ifdef APP-NVUE */
194 lines: 1; 196 lines: 1;
195 /* #endif */ 197 /* #endif */
196 overflow: hidden; 198 overflow: hidden;
197 text-overflow: ellipsis; 199 text-overflow: ellipsis;
198 } 200 }
199 201
200 .uni-collapse-cell__content { 202 .uni-collapse-cell__content {
201 overflow: hidden; 203 overflow: hidden;
202 } 204 }
203 205
204 .uni-collapse-cell__wrapper { 206 .uni-collapse-cell__wrapper {
205 /* #ifndef APP-NVUE */ 207 /* #ifndef APP-NVUE */
206 display: flex; 208 display: flex;
207 /* #endif */ 209 /* #endif */
208 flex-direction: column; 210 flex-direction: column;
209 } 211 }
210 212
211 .uni-collapse-cell__content--hide { 213 .uni-collapse-cell__content--hide {
212 // height: 0px; 214 // height: 0px;
213 // line-height: 0px; 215 // line-height: 0px;
214 } 216 }
215 </style> 217 </style>
216 218
src/components/UniCountdown/UniCountdown.vue
File was created 1 <template>
2 <view class="uni-countdown">
3 <text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
4 <text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
5 <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
6 <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
7 <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
8 <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
9 <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
10 <text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
11 </view>
12 </template>
13 <script>
14 export default {
15 name: 'UniCountdown',
16 props: {
17
18 showDay: {
19 type: Boolean,
20 default: true
21 },
22 showColon: {
23 type: Boolean,
24 default: true
25 },
26 backgroundColor: {
27 type: String,
28 default: '#FFFFFF'
29 },
30 borderColor: {
31 type: String,
32 default: '#000000'
33 },
34 color: {
35 type: String,
36 default: '#000000'
37 },
38 splitorColor: {
39 type: String,
40 default: '#000000'
41 },
42 day: {
43 type: Number,
44 default: 0
45 },
46 hour: {
47 type: Number,
48 default: 0
49 },
50 minute: {
51 type: Number,
52 default: 0
53 },
54 second: {
55 type: Number,
56 default: 0
57 }
58 },
59 data() {
60 return {
61 timer: null,
62 syncFlag: false,
63 d: '00',
64 h: '00',
65 i: '00',
66 s: '00',
67 leftTime: 0,
68 seconds: 0
69 }
70 },
71 watch: {
72 day(val) {
73 this.changeFlag()
74 },
75 hour(val) {
76 this.changeFlag()
77 },
78 minute(val) {
79 this.changeFlag()
80 },
81 second(val) {
82 this.changeFlag()
83 }
84 },
85 created: function(e) {
86 this.startData();
87 },
88 beforeDestroy() {
89 clearInterval(this.timer)
90 },
91 methods: {
92 toSeconds(day, hours, minutes, seconds) {
93 return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
94 },
95 timeUp() {
96 clearInterval(this.timer)
97 this.$emit('timeup')
98 },
99 countDown() {
100 let seconds = this.seconds
101 let [day, hour, minute, second] = [0, 0, 0, 0]
102 if (seconds > 0) {
103 day = Math.floor(seconds / (60 * 60 * 24))
104 hour = Math.floor(seconds / (60 * 60)) - (day * 24)
105 minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
106 second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
107 } else {
108 this.timeUp()
109 }
110 if (day < 10) {
111 day = '0' + day
112 }
113 if (hour < 10) {
114 hour = '0' + hour
115 }
116 if (minute < 10) {
117 minute = '0' + minute
118 }
119 if (second < 10) {
120 second = '0' + second
121 }
122 this.d = day
123 this.h = hour
124 this.i = minute
125 this.s = second
126 },
127 startData() {
128 this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
129 if (this.seconds <= 0) {
130 return
131 }
132 this.countDown()
133 this.timer = setInterval(() => {
134 this.seconds--
135 if (this.seconds < 0) {
136 this.timeUp()
137 return
138 }
139 this.countDown()
140 }, 1000)
141 },
142 changeFlag() {
143 if (!this.syncFlag) {
144 this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
145 this.startData();
146 this.syncFlag = true;
147 }
148 clearInterval(this.timer)
149 }
150 }
151 }
152 </script>
153 <style lang="scss" scoped>
154 @import '~@/uni.scss';
155 $countdown-height: 48rpx;
156 $countdown-width: 52rpx;
157
158 .uni-countdown {
159 /* #ifndef APP-NVUE */
160 display: flex;
161 /* #endif */
162 flex-direction: row;
163 justify-content: flex-start;
164 padding: 2rpx 0;
165 }
166
167 .uni-countdown__splitor {
168 /* #ifndef APP-NVUE */
169 display: flex;
170 /* #endif */
171 justify-content: center;
172 line-height: $countdown-height;
173 padding: 5rpx;
174 font-size: 18px;
175 }
176
177 .uni-countdown__number {
178 /* #ifndef APP-NVUE */
179 display: flex;
180 /* #endif */
181 justify-content: center;
182 align-items: center;
183 width: $countdown-width;
184 height: $countdown-height;
185 line-height: $countdown-height;
186 margin: 5rpx;
187 text-align: center;
188 font-size: 18px;
189 }
190 </style>
191
src/components/UniSliper/UniSliper.vue
File was created 1 <template>
2 <div class="c-progress">
3 <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
4 <div class="c-progress-inner" :style="setProgressStyle"></div>
5 <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
6 </div>
7 <span v-if="showPerText">{{stand_width}}mm</span>
8 </div>
9 </template>
10
11 <script>
12 // 使用了element的颜色
13 const colorTable = {
14 success: '#13ce66',
15 fail: '#ff4949',
16 warning: '#e6a23c',
17 default: '#409EFF'
18 }
19 export default {
20 name: 'CProgress',
21 props: {
22 percent: {
23 type: Number,
24 default: 60
25 },
26 showSlider: {
27 type: Boolean,
28 default: true
29 },
30 showPerText: {
31 type: Boolean,
32 default: true
33 },
34 // 进度条的宽度
35 width: {
36 type: Number,
37 default: 300
38 },
39 bgColor: {
40 type: String,
41 default: '#ebeef5'
42 },
43 progressColor: {
44 type: String,
45 default: '#409EFF'
46 },
47 // 滑块的宽度
48 sliderWidth: {
49 type: Number,
50 default: 20
51 },
52 // 颜色的类型
53 type: {
54 type: String,
55 default: colorTable.default
56 },
57 //规格长度
58 standard:{
59 type: Number,
60 default: 1.4
61 },
62 //初始长度
63 stand_width:{
64 type: Number,
65 default: 0
66 }
67 },
68 data () {
69 return {
70 sliderLeft: 0, // 滑块相对父元素发x坐标
71 progressWidth: 0, // 进度条当前的的宽度
72 tempPercent: 0,
73 }
74 },
75 computed: {
76 // 设置进度条的背景样式
77 setProgressBgStyle () {
78 return {
79 // 加上滑块的宽度
80 width: `${this.width + this.sliderWidth}px`
81 }
82 },
83 // 设置进度条的样式
84 setProgressStyle () {
85 const color = colorTable[this.type] || this.progressColor
86 return {
87 width: `${this.progressWidth}px`,
88 background: color
89 }
90 },
91 // 设置滑块的样式
92 setSliderStyle () {
93 const color = colorTable[this.type] || this.progressColor
94 return {
95 border: `1px solid ${color}`,
96 width: `${this.sliderWidth}px`,
97 height: `${this.sliderWidth}px`,
98 left: `${this.sliderLeft}px`
99 }
100 }
101 },
102 mounted () {
103 this.sliderLeft = this.width / 100 * this.percent
104 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
105 this.tempPercent = this.percent
106 this.addListener()
107 },
108 methods: {
109 addListener () {
110 const slider = this.$refs.slider
111 const progress = this.$refs.progress
112 let isClickSlider = false
113 let distance = 0 // 滑块与点击坐标的绝对距离
114 progress.onclick = (e) => {
115 // 阻止事件冒泡
116 if (e.target == slider) {
117 return
118 }
119 let curX = progress.offsetLeft
120 this.sliderLeft = e.pageX - curX
121 if (this.sliderLeft <= 0) {
122 this.sliderLeft = 0
123 }
124 if (this.sliderLeft >= this.width) {
125 this.sliderLeft = this.width
126 }
127 this._countCurPercent()
128 }
129 // slider.onmousedown = (e) => {
130 // isClickSlider = true
131 // let curX = slider.offsetLeft
132 // distance = e.pageX - curX // 得出绝对距离
133 // }
134 progress.onmousemove = (e) => {
135 if (isClickSlider) {
136 // 判断是否已经超出进度条的长度
137 if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
138 this.sliderLeft = e.pageX - distance
139 this._countCurPercent()
140 }
141 }
142 }
143 progress.onmouseup = () => {
144 isClickSlider = false
145 }
146 },
147 // 算出百分比
148 _countCurPercent () {
149 this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
150 this.progressWidth = this.sliderLeft + 20
151 // 取整的时候宽度可能不为0,所以在0和100的时候也将宽度取整
152 if (this.tempPercent <= 0) {
153 this.progressWidth = 0
154 this.sliderLeft = 0
155 }
156 if (this.tempPercent >= 100) {
157 this.progressWidth = this.width + 20
158 this.sliderLeft = this.width
159 }
160 this.stand_width = this.tempPercent*this.standard
161 this.stand_width = parseInt(this.stand_width/1) //取整
162 this.$emit('percentChange', this.tempPercent)
163 }
164 }
165 }
166 </script>
167
168 <style scoped lang="scss">
169 .c-progress {
170 $width: 300px;
171 $radius: 5px;
172 display: flex;
173 align-items: center;
174
175 span {
176 margin-left: 5px;
177 font-size: 14px;
178 color: #666;
179 }
180
181 .c-progress-outer {
182 width: $width;
183 height: 10px;
184 background: #ebeef5;
185 position: relative;
186 display: flex;
187 align-items: center;
188
189 .c-progress-inner {
190 width: 100px;
191 height: 10px;
192 background: #409EFF;
193 }
194
195 .c-progress-slider {
196 width: 20px;
197 height: 20px;
198 border-radius: 50%;
199 background: #fff;
200 border: 1px solid #409EFF;
201 position: absolute;
202 z-index: 10;
203 left: 10px;
204 }
205 }
206 }
207 </style>
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path": "pages/cart/cart",
5 "style": {
6 "navigationBarTitleText": "购物车"
7 }
8 },
9 {
10 "path": "pages/index/index", 4 "path": "pages/index/index",
11 "style": { 5 "style": {
12 "navigationBarTitleText": "商城一览" 6 "navigationBarTitleText": "商城一览"
13 } 7 }
14 }, 8 },
9 {
10 "path": "pages/myOrder/myOrder",
11 "style": {
12 "navigationBarTitleText": "我的订单"
13 }
15 { 14 },
16 "path": "pages/frameDetail/frameDetail", 15 {
17 "style": { 16 "path": "pages/frameDetail/frameDetail",
18 "navigationBarTitleText": "产品详情" 17 "style": {
19 } 18 "navigationBarTitleText": "产品详情"
20 }, 19 }
21 { 20 },
22 "path": "pages/lensDetails/lensDetails", 21 {
23 "style": { 22 "path": "pages/lensDetails/lensDetails",
24 "navigationBarTitleText": "产品详情" 23 "style": {
25 } 24 "navigationBarTitleText": "产品详情"
26 }, 25 }
26 },
27 {
28 "path": "pages/cart/cart",
29 "style": {
30 "navigationBarTitleText": "购物车"
31 }
27 { 32 },
28 "path": "pages/purchaseLenses/purchaseLenses", 33 {
29 "style": { 34 "path": "pages/purchaseLenses/purchaseLenses",
30 "navigationBarTitleText": "产品选购" 35 "style": {
31 } 36 "navigationBarTitleText": "产品选购"
32 }, 37 }
33 { 38 },
34 "path": "pages/refundProgress/refundProgress", 39 {
35 "style": { 40 "path": "pages/refundProgress/refundProgress",
36 "navigationBarTitleText": "申请退款" 41 "style": {
37 } 42 "navigationBarTitleText": "申请退款"
38 }, 43 }
39 {
40 "path": "pages/myOrder/myOrder",
41 "style": {
42 "navigationBarTitleText": "我的订单"
43 }
44 }, 44 },
45 { 45 {
46 "path": "pages/addAddress/addAddress", 46 "path": "pages/addAddress/addAddress",
47 "style": { 47 "style": {
48 "navigationBarTitleText": "新增地址" 48 "navigationBarTitleText": "新增地址"
49 } 49 }
50 }, 50 },
51 { 51 {
52 "path": "pages/confirmOrder/confirmOrder", 52 "path": "pages/confirmOrder/confirmOrder",
53 "style": { 53 "style": {
54 "navigationBarTitleText": "确认订单"
55 }
56 },
57 {
58 "path": "pages/user/user",
59 "style": { 54 "navigationBarTitleText": "确认订单"
60 "navigationBarTitleText": "我的" 55 }
56 },
57 {
58 "path": "pages/user/user",
59 "style": {
60 "navigationBarTitleText": "我的"
61 }
61 } 62 },
62 }, 63 {
63 { 64 "path": "pages/refundment/refundWays"
64 "path": "pages/refundment/refundWays" 65 },
65 }, 66 {
66 { 67 "path": "pages/refundment/refundment"
67 "path": "pages/refundment/refundment" 68 },
68 }, 69 {
69 { 70 "path": "pages/predelivery/predelivery"
70 "path": "pages/Predelivery/Predelivery" 71 },
71 }, 72 {
73 "path": "pages/customerService/customerService",
74 "style": {
75 "navigationBarTitleText": "在线客服"
76 }
77 },
78 {
79 "path": "pages/myOrderPaying/myOrderPaying",
80 "style": {
81 "navigationBarTitleText": "我的订单"
82 }
83 },
84 {
85 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
86 "style": {
87 "navigationBarTitleText": "镜片名称名称"
88 }
89 },
90 {
91 "path": "pages/detailStandard/detailStandard_sun",
92 "style": {
93 "navigationBarTitleText": "太阳镜选购页"
72 { 94 }
73 "path": "pages/customerService/customerService" 95 },
74 }, 96 {
75 { 97 "path": "pages/detailStandard/detailStandard_k",
98 "style": {
99 "navigationBarTitleText": "镜框选购页"
100 }
76 "path": "pages/myOrderPaying/myOrderPaying" 101 }
77 } 102 ],
78 ], 103 "globalStyle": {
79 "globalStyle": { 104 "navigationBarTextStyle": "black",
80 "navigationBarTextStyle": "black", 105 "navigationBarTitleText": "uni-app",
81 "navigationBarTitleText": "uni-app", 106 "navigationBarBackgroundColor": "#F8F8F8",
82 "navigationBarBackgroundColor": "#F8F8F8", 107 "backgroundColor": "#F8F8F8"
83 "backgroundColor": "#F8F8F8" 108 },
84 }, 109 "tabBar": {
85 "tabBar": { 110 "color": "#C0C4CC",
86 "color": "#C0C4CC", 111 "selectedColor": "#fa436a",
87 "selectedColor": "#fa436a", 112 "borderStyle": "black",
88 "borderStyle": "black", 113 "backgroundColor": "#ffffff",
89 "backgroundColor": "#ffffff", 114 "list": [
90 "list": [ 115 {
91 { 116 "pagePath": "pages/index/index",
92 "pagePath": "pages/index/index", 117 "iconPath": "static/tab-home.png",
93 "iconPath": "static/tab-home.png", 118 "selectedIconPath": "static/tab-home-current.png",
94 "selectedIconPath": "static/tab-home-current.png", 119 "text": "首页"
95 "text": "首页" 120 },
96 }, 121 {
97 { 122 "pagePath": "pages/cart/cart",
98 "pagePath": "pages/cart/cart", 123 "iconPath": "static/tab-cart.png",
99 "iconPath": "static/tab-cart.png", 124 "selectedIconPath": "static/tab-cart-current.png",
100 "selectedIconPath": "static/tab-cart-current.png", 125 "text": "购物车"
101 "text": "购物车" 126 },
102 }, 127 {
103 { 128 "pagePath": "pages/user/user",
104 "pagePath": "pages/user/user", 129 "iconPath": "static/tab-my.png",
src/pages/Predelivery/Predelivery.vue
1 <template> File was deleted
2 <view class="container">
3 <view v-for="(items) in form" :key="items.key" class="order">
4 <view class="order_number">订单号:{{items.orderNum}}<span>待发货</span></view>
5 <view class="order_detail">
6 <view class="detail_img"><image v-bind:src="items.img"></image></view>
7 <view class="detail_zi">
8 <view class="zi_name">{{items.name}}</view>
9 <view class="zi_standard">规格:{{items.standard}}</view>
10 <view class="zi_preprice">¥{{items.preprice}}<span>X{{items.number}}</span></view>
11 </view>
12 </view>
13 <view class="now_price">实付:<span>¥{{items.nowprice}}</span></view>
14 <view class="clear"></view>
15 <view class="button">
16 <view class="button1">申请退款</view>
17 <view class="button2">提醒发货</view>
18 </view>
19 </view>
20 </view>
21 </template>
22
23 <script>
24 export default {
25 data(){
26 return{
27 form:[
28 {
29 key: 0,
30 name:'商品名称',
31 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
32 img: '/static/img/detail/delivery.png',
33 preprice: 180,
34 number:1,
35 orderNum: 2034867958596334,
36 nowprice: 110,
37 }
38 ]
39
40 }
41 }
42 }
43 </script>
44
45 <style lang="scss">
46 .container{
47 width: 100%;
48 height: 100%;
49 background: #F2F2F2;
50 height: 700px;
51 //要获取屏幕大小
52 }
53 .order{
54 background: #FFFFFF;
55 width: 90%;
56 height: 450rpx;
57 margin: 0 auto;
58 padding: 40rpx;
59 box-sizing: border-box;
60 border-radius: 5px;
61 }
62 .order_number{
63 color: #999999;
64 font-size: 12px;
65 font-family: "PingFangSC-Regular";
66 span{
67 font-family: PingFangSC-Regular;
68 font-size: 14px;
69 color: #FF6B4A;
70 letter-spacing: -0.26px;
71 line-height: 18px;
72 float: right;
73 }
74 }
75 .order_detail{
76 display: flex;
77 justify-content: space-around;
78 margin-top: 12px;
79 }
80 .detail_img image{
81 width: 188rpx;
82 height: 188rpx;
83 }
84 .detail_zi{
85 font-family: PingFangSC-Regular;
86 width: 55%;
87 height: 100%;
88 view{
89 margin-bottom: 20rpx;
90 }
91 .zi_name{
92 font-size: 14px;
93 color: #333333;
94 letter-spacing: -0.26px;
95 line-height: 18px;
96 }
97 .zi_standard{
98 font-size: 12px;
99 color: #999999 ;
100 }
101 .zi_preprice{
102 font-size: 14px;
103 color: #FF6B4A;
104 span{
105 float: right;
106 font-size: 12px;
107 color: #999999;
108 }
109 }
110 }
111 .now_price{
112 font-size: 14px;
113 color: #333333;
114 float: right;
115 span{
116 font-size: 14px;
117 color: #FF6B4A ;
118 }
119 }
120 .clear{
121 clear: both;
122 }
123 .button{
124 display: flex;
125 justify-content: flex-end;
126 margin-top: 14px;
127 view{
128 width: 156rpx;
129 height: 48rpx;
130 border-radius: 12px;
131 font-size: 12px;
132 text-align: center;
133 line-height: 20px;
134 }
135 .button1{
136 border: 1px solid #FF6B4A;
137 font-family: PingFangSC-Regular;
138 color: #FF6B4A;
139 letter-spacing: -0.23px;
140 margin-right: 30rpx;
141 }
142 .button2{
143 border: 1px solid #FF6B4A;
144 background: #FF6B4A;
145 font-family: PingFangSC-Regular;
146 color: #FFFFFF;
147 letter-spacing: -0.23px;
148
149 }
150 }
151 </style>
src/pages/cart/cart.vue
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <checkbox-group name=""> 3
4 <label> 4 <view class="card">
5 <view class="card"> 5 <view class="cardHeader">
6 <view class="cardHeader"> 6 <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> -->
7 <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)"/> 7 <block v-if="pIsoPen">
8 <image src="../../static/customerService-btn.png" mode="aspectFill"></image> 8 <view class="partentChecked" @click="pChange(pIsoPen)">
9 <text>非常戴镜</text> 9 <span class="status correct"></span>
10 </view> 10 </view>
11 <view class="cardBody"> 11 </block>
12 <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" /> 12 <block v-else>
13 <view class="goodInfo"> 13 <view class="partentCheck" @click="pChange(pIsoPen)"></view>
14 <view class="imageWrap"> 14 </block>
15 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 15 <image src="../../static/store.png" mode="aspectFill"></image>
16 </view> 16 <text>非常戴镜</text>
17 <view class="infoRight"> 17 </view>
18 <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> 18
19 <view class="describ"><text>支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货</text> 19 <view class="cardBody">
20 <!-- <text class="icon">></text> --> 20 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
21 </view> 21 <template v-if="childIsOpen.child1">
22 <view class="priceBox"> 22 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
23 <view class="price">¥198</view> 23 <span class="status correct"></span>
24 <text>(限购{{maxCount}}副)</text> 24 </view>
25 <view class="counter"> 25 </template>
26 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 26 <template v-else>
27 <text>{{count}}</text> 27 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
28 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 28 </template>
29 </view> 29 <view class="goodInfo">
30 </view> 30 <view class="imageWrap">
31 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
32 </view>
33 <view class="infoRight">
34 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
35 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
36 <!-- <text class="icon">></text> -->
37 </view>
38 <view class="priceBox">
39 <view class="price">¥{{198}}</view>
40 <text>(限购{{maxCount}}副)</text>
41 <view class="counter">
42 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
43 <text>{{count}}</text>
44 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
31 </view> 45 </view>
32 </view> 46 </view>
33 </view> 47 </view>
34 </view> 48 </view>
35 </label> 49 </view>
36 </checkbox-group> 50 <view class="cardBody">
37 51 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
52 <template v-if="childIsOpen.child2">
53 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
54 <span class="status correct"></span>
55 </view>
56 </template>
57 <template v-else>
58 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
59 </template>
60 <view class="goodInfo">
61 <view class="imageWrap">
62 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
63 </view>
64 <view class="infoRight">
65 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
66 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
67 <!-- <text class="icon">></text> -->
68 </view>
69 <view class="priceBox">
70 <view class="price">¥198</view>
71 <text>(限购{{maxCount}}副)</text>
72 <view class="counter">
73 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
74 <text>{{count}}</text>
75 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
76 </view>
77 </view>
78 </view>
79 </view>
80 </view>
81 </view>
38 82
39 <view class="footer"> 83 <view class="footer">
40 <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view> 84 <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view>
41 <view class="footerRight"> 85 <view class="footerRight">
42 <view class="paybtn">立即支付</view> 86 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
87 <view class="paybtn">立即支付</view>
88 </navigator>
43 </view> 89 </view>
44 </view> 90 </view>
91
45 </view> 92 </view>
46 </template> 93 </template>
47 94
48 <script> 95 <script>
49 export default { 96 export default {
97
50 data() { 98 data() {
51 return { 99 return {
52 totalPrice: 360, 100 totalPrice: 360,
53 count:1, 101 count:1,
54 maxCount:20, 102 maxCount:20,
103 pIsoPen: false,
104 childIsOpen:{
105 "child1":true,
106 "child2":true
107 },
55 } 108 }
56 }, 109 },
57 onLoad() { 110 onLoad() {
58 111
59 }, 112 }
113 ,
60 methods: { 114 methods: {
61 counter(isadd){ 115 counter(isadd){
62 if(isadd){ 116 if(isadd){
63 this.count >= this.maxCount? this.addDisabled = true:this.count++; 117 this.count >= this.maxCount? this.addDisabled = true:this.count++;
64 }else{ 118 }else{
65 this.count <= 1? this.desDisabled = true:this.count--; 119 this.count <= 1? this.desDisabled = true:this.count--;
66 } 120 }
67 }, 121 },
122 pChange(isopen){
123 // console.log(isopen)
124 this.pIsoPen=!isopen
125 this.childIsOpen.child1=!isopen
126 this.childIsOpen.child2=!isopen
127 },
128 cChange(isopen,child){
129 // console.log(child)
130 if(child==='child1'){
131 this.childIsOpen.child1=!isopen
132 }
133 if(child==='child2'){
134 this.childIsOpen.child2=!isopen
135 }
136 }
68 } 137 }
69 } 138 }
70 </script> 139 </script>
71 140
72 <style lang="scss"> 141 <style lang="scss">
73 .content { 142 .content {
74 min-height: 100vh; 143 min-height: 100vh;
75 background-color: #F7F6F6; 144 background-color: #f2f2f2;
76 display: flex; 145 display: flex;
77 flex-direction: column; 146 flex-direction: column;
78 align-items: center; 147 align-items: center;
79 justify-content: space-between; 148 justify-content: space-between;
80 padding: 20rpx 40rpx; 149 padding: 20rpx 40rpx;
81 box-sizing: border-box; 150 box-sizing: border-box;
82 151
152 .partentCheck{
153 width: 16px;
154 height: 16px;
155 border-radius: 18px;
156 border: 1px solid #CFCFCF;
157 background-color: #FFFFFF;
158 }
159 .partentChecked{
160 width: 18px;
161 height: 18px;
162 border-radius: 18px;
163 background-color: #FF6B4A;
164 .correct {
165 display: inline-block;
166 width: 5px;
167 height: 1px;
168 background: #FFFFFF;
169 line-height: 0;
170 font-size: 0;
171 position: relative;
172 top: -6px;
173 left: 4px;
174 -webkit-transform: rotate(45deg);
175 }
176 .correct:after {
177 content: '/';
178 display: block;
179 width: 8px;
180 height: 1px;
181 background: #FFFFFF;
182 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
183 }
184 }
185
83 .card{ 186 .card{
84 background-color: #FFFFFF; 187 background-color: #FFFFFF;
85 border-radius: 16rpx; 188 border-radius: 16rpx;
86 box-sizing: border-box; 189 box-sizing: border-box;
87 padding: 36rpx 36rpx 36rpx 18rpx; 190 padding: 36rpx 36rpx 36rpx 18rpx;
88 display: flex; 191 display: flex;
89 flex-direction: column; 192 flex-direction: column;
90 align-items: center; 193 align-items: center;
91 justify-content: space-between; 194 justify-content: space-between;
92 .cardHeader{ 195 .cardHeader{
93 width: 100%; 196 width: 100%;
94 height: 36rpx; 197 height: 36rpx;
95 display: flex; 198 display: flex;
96 align-items: center; 199 align-items: center;
97 justify-content: flex-start; 200 justify-content: flex-start;
98 image{ 201 image{
99 height: 32rpx; 202 height: 32rpx;
100 width: 32rpx; 203 width: 32rpx;
204 padding-left: 6px;
205 padding-right: 10px;
206 }
207 text{
208 // font-family: PingFangSC-Regular;
209 font-size: 14px;
210 color: #333333;
211 letter-spacing: -0.26px;
101 } 212 }
102 } 213 }
103 .cardBody{ 214 .cardBody{
104 width: 100%; 215 width: 100%;
105 height: 300rpx; 216 height: 300rpx;
106 display: flex; 217 display: flex;
107 align-items: center; 218 align-items: center;
108 justify-content: space-between; 219 justify-content: space-between;
109 .goodInfo{ 220 .goodInfo{
110 width: 95%; 221 width: 95%;
111 display: flex; 222 display: flex;
112 flex-direction: row; 223 flex-direction: row;
113 justify-content: flex-start; 224 justify-content: flex-start;
225 padding-left: 6px;
114 .imageWrap{ 226 .imageWrap{
115 height: 188rpx; 227 height: 188rpx;
116 width: 188rpx; 228 width: 188rpx;
117 margin-right: 28rpx; 229 margin-right: 28rpx;
118 image{ 230 image{
231 border-radius: 4px;
119 height: 188rpx; 232 height: 188rpx;
120 width: 188rpx; 233 width: 188rpx;
121 } 234 }
122 } 235 }
123 .infoRight{ 236 .infoRight{
124 display: flex; 237 display: flex;
125 flex-direction: column; 238 flex-direction: column;
126 align-items: flex-start; 239 align-items: flex-start;
127 justify-content: space-between; 240 justify-content: space-between;
128 height: 220rpx; 241 height: 240rpx;
129 .goodName{ 242 .goodName{
130 font-size: 28rpx; 243 font-size: 28rpx;
131 color: #333333; 244 color: #333333;
132 } 245 }
133 .describ{ 246 .describ{
134 width: 100%; 247 width: 100%;
135 height: 80rpx; 248 height: 80rpx;
136 box-sizing: border-box; 249 box-sizing: border-box;
137 padding: 10rpx; 250 padding: 10rpx;
138 font-size: 20rpx; 251 font-size: 20rpx;
139 color: #999999; 252 color: #999999;
140 background: #F2F2F2; 253 background: #F2F2F2;
141 text{ 254 text{
142 text-overflow: -o-ellipsis-lastline; 255 text-overflow: -o-ellipsis-lastline;
143 overflow: hidden; 256 overflow: hidden;
144 text-overflow: ellipsis; 257 text-overflow: ellipsis;
145 display: -webkit-box; 258 display: -webkit-box;
146 -webkit-line-clamp: 2; 259 -webkit-line-clamp: 2;
147 line-clamp: 2; 260 line-clamp: 2;
148 -webkit-box-orient: vertical; 261 -webkit-box-orient: vertical;
149 } 262 }
150 // .icon{ 263 // .icon{
151 // transform: rotate(90deg); 264 // transform: rotate(90deg);
152 // } 265 // }
153 } 266 }
154 .priceBox{ 267 .priceBox{
155 display: flex; 268 display: flex;
156 justify-content: space-between; 269 justify-content: space-between;
157 align-items: center; 270 align-items: center;
271 // margin-top: 26px;
158 width: 100%; 272 width: 100%;
159 font-size: 14px; 273 font-size: 14px;
160 color: #999999; 274 color: #999999;
161 .price{ 275 .price{
162 color: #FF6B4A; 276 color: #FF6B4A;
163 font-size: 28rpx; 277 font-size: 28rpx;
164 } 278 }
165 .counter{ 279 .counter{
166 display: flex; 280 display: flex;
167 flex-direction: row; 281 flex-direction: row;
168 justify-content: space-between; 282 justify-content: space-between;
169 align-items: center; 283 align-items: center;
170 font-size: 28rpx; 284 font-size: 28rpx;
171 color: #333333; 285 color: #333333;
172 width: 122rpx; 286 width: 122rpx;
173 .btn{ 287 .btn{
174 display: flex; 288 display: flex;
175 justify-content: center; 289 justify-content: center;
176 line-height: 32rpx; 290 line-height: 32rpx;
177 height: 32rpx; 291 height: 32rpx;
178 width: 32rpx; 292 width: 32rpx;
179 background-color: #F2F2F2; 293 background-color: #F2F2F2;
180 color: #CFCFCF; 294 color: #CFCFCF;
181 } 295 }
182 } 296 }
183 } 297 }
184 } 298 }
185 } 299 }
186 } 300 }
187 } 301 }
188 302
189 .footer{ 303 .footer{
190 position: fixed; 304 position: fixed;
191 left: 0; 305 left: 0;
192 bottom: 0; 306 bottom: 0px;
193 height: 112rpx; 307 height: 112rpx;
194 width: 100%; 308 width: 100%;
195 background-color: #FFFFFF; 309 background-color: #FFFFFF;
196 font-size: 16px; 310 font-size: 16px;
197 display: flex; 311 display: flex;
198 justify-content: space-between; 312 justify-content: space-between;
199 align-items: center; 313 align-items: center;
200 .footerLeft{ 314 .footerLeft{
201 display: flex; 315 display: flex;
202 justify-content: center; 316 justify-content: center;
203 align-items: center; 317 align-items: center;
204 width: 50%; 318 width: 50%;
205 color: #333333; 319 color: #333333;
206 text{ 320 text{
207 color: #FF6B4A; 321 color: #FF6B4A;
208 } 322 }
209 } 323 }
210 .footerRight{ 324 .footerRight{
211 display: flex; 325 display: flex;
212 justify-content: flex-end; 326 justify-content: flex-end;
213 align-items: center; 327 align-items: center;
214 width: 50%; 328 width: 50%;
215 margin-right: 26rpx; 329 margin-right: 26rpx;
216 .paybtn{ 330 .paybtn{
217 display: flex; 331 display: flex;
218 justify-content: center; 332 justify-content: center;
219 align-items: center; 333 align-items: center;
220 background: #FF6B4A; 334 background: #FF6B4A;
221 border-radius: 20px; 335 border-radius: 20px;
222 border-radius: 20px; 336 border-radius: 20px;
223 color: #FFFFFF; 337 color: #FFFFFF;
224 width: 204rpx; 338 width: 204rpx;
225 height: 80rpx; 339 height: 80rpx;
226 } 340 }
227 } 341 }
228 342
229 } 343 }
230 } 344 }
231 345
346
347
232 </style> 348 </style>
233 349
src/pages/detailStandard/detailStandard_k.vue
File was created 1 <template>
2 <view class="container">
3 <view class="detail">
4 <view class="detail1"><image v-bind:src="detail.image"></image></view>
5 <view class="detail2">
6 <view class="detail2_name">{{detail.name}}</view>
7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
8 <view class="detail2_price"><span>¥{{detail.price}}</span></view>
9 </view>
10 </view>
11 <view class="choose">
12 <view class="colour">
13 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
14 <view class="colour_exp">*黑色 BHL192345</view>
15 <view class="colour2">
16 <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
17 </view>
18 <hr/>
19 </view>
20 <view class="size">
21 <view class="size1">
22 <view class="size1_1">框架尺寸</view>
23 <view><span>+¥20</span><image src="/static/img/detail/xiala2.png"></image></view>
24 </view>
25 <view class="size2">
26 <view>通用</view>
27 <view>定制</view>
28 </view>
29 <view class="D3_list">
30 <view v-for="(item) in parameter" :key="item.key">
31 <view><image class="D3_image" v-bind:src = "item.img"></image></view>
32 <view class="D3_list_jDu">
33 <!-- uni-sliper插件 -->
34 <c-progress class="c-progress"
35 :percent="item.percent"
36 :show-slider="false" :width="190"
37 :standard="item.standard_l"
38 :stand_width="item.slength"
39 progressColor="#FF6B4A"
40 />
41 <view>{{item.standard}}</view>
42 </view>
43 </view>
44 <hr/>
45 </view>
46 </view>
47 <view class="part">
48 <view class="size1">
49 <view class="size1_1">配件</view>
50 <view><span>+¥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
51 </view>
52 <view class="colour_exp">*0290</view>
53 <view class="part_som">
54 <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
55 </view>
56 </view>
57 </view>
58 <view class="buy">
59 <view class="buy1">选了镜框,想选镜片?</view>
60 <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view>
61 <view class="buy3">
62 <view class="buy3_1">暂时不选</view>
63 <view class="buy3_2">立即去选</view>
64 </view>
65 </view>
66 <view class="zhanwei"></view>
67 <view class="button"><view>立即结算</view></view>
68 </view>
69 </template>
70 <script>
71 import CProgress from '../../components/UniSliper/UniSliper'
72
73 export default {
74 components: {
75 CProgress
76 },
77 data(){
78 return{
79 detail:{
80 image:'/static/img/detail/d1.png',
81 name:'商品名称商品名称商品名称商品名称商品名称',
82 price: 180,
83 number: 1,
84 },
85 //框架颜色
86 colour:[
87 {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
88 {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
89 {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
90 {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
91 {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
92 {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
93 {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
94 ],
95 //规格
96 parameter:[
97 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
98 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
99 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
100 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
101 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
102 ],
103 //配饰
104 part:[
105 {key: 0,img:'/static/img/detail/Kuang/g1.png'},
106 {key: 1,img:'/static/img/detail/Kuang/g1.png'},
107 {key: 2,img:'/static/img/detail/Kuang/g2.png'},
108 {key: 3,img:'/static/img/detail/Kuang/g1.png'},
109 {key: 4,img:'/static/img/detail/Kuang/g1.png'},
110 {key: 5,img:'/static/img/detail/Kuang/g3.png'},
111 {key: 6,img:'/static/img/detail/Kuang/g3.png'},
112 {key: 7,img:'/static/img/detail/Kuang/g2.png'},
113 ],
114 }
115 }
116 }
117 </script>
118
119 <style lang="scss">
120 .container{
121 min-height: 100vh;
122 background: #F2F2F2;
123 padding-top: 10px;
124 box-sizing: border-box;
125 }
126 hr{
127 border: none;
128 height: 1px;
129 background: #F2F2F2;
130 margin-top: 18px;
131 }
132 .detail{
133 height: 272rpx;
134 background: #FFFFFF;
135 border-radius: 8px;
136 padding: 16px;
137 box-sizing: border-box;
138 display: flex;
139 justify-content: space-between;
140 align-items: center;
141 }
142 .detail1{
143 height: 188rpx;
144 width: 188rpx;
145 image{
146 width: 100%;
147 height: 100%;
148 border-radius: 8px;
149 }
150 }
151 .detail2{
152 width: 68%;
153 view{
154 margin-bottom: 8px;
155 font-family: PingFangSC-Regular;
156 }
157 .detail2_name{
158 font-size: 14px;
159 color: #333333;
160 letter-spacing: -0.26px;
161 line-height: 18px;
162 }
163 .detail2_tui{
164 font-size: 10px;
165 color: #999999;
166 letter-spacing: -0.19px;
167 span{
168 margin-right: 10px;
169 }
170 }
171 .detail2_price{
172 font-size: 14px;
173 color: #FF6B4A;
174 letter-spacing: -0.26px;
175 }
176 }
177 .choose{
178 background: #FFFFFF;
179 padding: 16px;
180 box-sizing: border-box;
181 margin-top: 10px;
182 border-radius: 8px;
183 .colour1{
184 span{
185 font-family: PingFangSC-Medium;
186 font-size: 16px;
187 color: #333333;
188 letter-spacing: -0.3px;
189 text-align: justify;
190 line-height: 24px;
191 font-weight: bold;
192 }
193 image{
194 float: right;
195 width: 40rpx;
196 height: 36rpx;
197 }
198 }
199 .colour_exp{
200 font-family: PingFangSC-Regular;
201 font-size: 12px;
202 color: #666666;
203 letter-spacing: 0;
204 margin-top: 10px;
205 margin-bottom: 10px;
206 }
207 .colour2{
208 display: grid;
209 grid-template-columns: repeat(5, 17%);
210 justify-content: space-between ;
211 grid-row-gap: 10px;
212 margin-bottom: 14px;
213 view{
214 border: 1px solid #F2F2F2;
215 image{
216 width: 100%;
217 height: 100%;
218 }
219 }
220 view:hover{
221 border: 1px solid #FF6B4A;
222 }
223 }
224 }
225 .size,.part{
226 margin-top:14px;
227 .size1{
228 display: flex;
229 justify-content: space-between;
230 margin-bottom: 10px;
231 .size1_1{
232 font-weight: bold;
233 font-family: PingFangSC-Medium;
234 font-size: 16px;
235 color: #333333;
236 letter-spacing: -0.3px;
237 line-height: 24px;
238 }
239 view{
240 span{
241 font-family: PingFangSC-Regular;
242 font-size: 14px;
243 color: #FF6B4A;
244 letter-spacing: -0.26px;
245 margin-right: 12px;
246 }
247 image{
248 width: 40rpx;
249 height: 36rpx;
250 }
251 }
252 }
253 .size2{
254 view{
255 display: inline-flex;
256 align-items: center;
257 justify-content: center; //字体居中
258 margin-right: 12px;
259 margin-bottom: 20px;
260 width: 136rpx;
261 height: 60rpx;
262 background: #F2F2F2;
263 border-radius: 2px;
264 font-family: PingFangSC-Regular;
265 font-size: 12px;
266 color: #666666;
267 }
268 view:hover{
269 color: #FF6B4A;
270 background: rgba(255,107,74,0.15);
271 }
272 }
273 .D3_list{
274 margin-bottom: 4px;
275 }
276 .D3_list>view{
277 display: flex;
278 align-content: center;
279 margin-bottom: 10px;
280 view{
281 margin-right: 10px;
282 }
283 }
284 .D3_list image{
285 width: 50px;
286 height: 25px;
287 margin-right: 6px;
288 }
289 .D3_list span{
290 margin-left: 6px;
291 margin-right: 5px;
292 font-family: 'PingFangSC-Regular';
293 }
294 .D3_list_jDu{
295 view{
296 font-family: PingFangSC-Regular;
297 font-size: 10px;
298 color: #999999;
299 letter-spacing: -0.19px;
300 }
301 }
302 }
303 .part{
304 .part_som{
305 display: grid;
306 justify-content: space-between;
307 grid-template-columns: repeat(4, 22%);
308 grid-row-gap: 12px;
309 margin-bottom: 14px;
310 view{
311 border: 1px solid #F2F2F2;
312 height: 72rpx;
313 image{
314 width: 100%;
315 height: 100%;
316 }
317 }
318 view:hover{
319 border: 1px solid #FF6B4A;
320 }
321 }
322 }
323 .buy{
324 height: 280rpx;
325 background: #FFFFFF ;
326 margin-top: 10px;
327 border-radius: 8px;
328 padding-top: 20px;
329 box-sizing: border-box;
330 margin-bottom: 20px;
331 }
332 .buy1{
333 font-family: PingFangSC-Medium;
334 font-size: 16px;
335 font-weight: bold;
336 color: #333333;
337 text-align: center;
338 }
339 .buy2{
340 font-family: PingFangSC-Regular;
341 font-size: 12px;
342 color: #999999;
343 text-align: center;
344 margin: 10px;
345 }
346 .buy3{
347 font-family: PingFangSC-Regular;
348 font-size: 16px;
349 display: flex;
350 justify-content: center;
351 margin-top: 14px;
352 view{
353 border-radius: 20px;
354 width: 240rpx;
355 height: 80rpx;
356 display: flex;
357 justify-content: center;
358 align-items: center;
359 }
360 .buy3_1{
361 margin-right: 20px;
362 background: rgba(255,107,74,0.15);
363 color: #FF6B4A ;
364 }
365 .buy3_2{
366 background: #FF6B4A;
367 color: #FFFFFF ;
368 }
369 }
370 .zhanwei{
371 background: #F2F2F2;
372 height: 120rpx;
373 }
374 .button{
375 position: fixed;
376 bottom: 0;
377 width:100%;
378 height: 112rpx;
379 background: #FF6B4A 100%;
380 view{
381 color: #FFFFFF;
382 height: 100%;
383 display: flex;
384 justify-content: center;
385 align-items: center;
386 font-family: PingFangSC-Regular;
387 font-size: 16px;
388 }
389 }
390 </style>
src/pages/detailStandard/detailStandard_sun.vue
File was created 1 <template>
2 <view class="container">
3 <view class="detail">
4 <view class="detail1"><image v-bind:src="detail.image"></image></view>
5 <view class="detail2">
6 <view class="detail2_name">{{detail.name}}</view>
7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
8 <view class="detail2_price"><span>¥{{detail.price}}</span></view>
9 </view>
10 </view>
11 <view class="choose">
12 <view class="colour">
13 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
14 <view class="colour_exp">*黑色 BHL192345</view>
15 <view class="colour2">
16 <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
17 </view>
18 <hr/>
19 </view>
20 <view class="colour">
21 <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
22 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
23 <view class="jp_colour2">
24 <view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view>
25 </view>
26 <hr/>
27 </view>
28 <view class="split">
29 <view class="split1">
30 <span>折射率</span>
31 <span class="split1_span">注:折射率越高,镜片越薄,看起来更美观。</span>
32 <image src="/static/img/detail/xiala2.png"></image>
33 </view>
34 <view class="split2">
35 <view class="split2_number">0-300度</view>
36 <view class="split2_choose"><view class="split2_tui">1.56(推荐)</view><view>1.60</view></view>
37 </view>
38 <view class="split2">
39 <view class="split2_number">300-1000度</view>
40 <view class="split2_choose"><view class="split2_tui">1.71(推荐)</view>
41 <view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view>
42 </view>
43 <hr/>
44 </view>
45 <view class="size">
46 <view class="size1">
47 <view class="size1_1">框架尺寸</view>
48 <view><span>+¥20</span><image src="/static/img/detail/xiala2.png"></image></view>
49 </view>
50 <view class="size2">
51 <view>通用</view>
52 <view>定制</view>
53 </view>
54 <!-- uni-sliper插件 -->
55 <view class="D3_list">
56 <view v-for="(item) in parameter" :key="item.key">
57 <view><image class="D3_image" v-bind:src = "item.img"></image></view>
58 <view class="D3_list_jDu">
59 <c-progress class="c-progress"
60 :percent="item.percent"
61 :show-slider="false" :width="190"
62 :standard="item.standard_l"
63 :stand_width="item.slength"
64 progressColor="#FF6B4A"
65 />
66 <view>{{item.standard}}</view>
67 </view>
68 </view>
69 <hr/>
70 </view>
71 </view>
72 <view class="part">
73 <view class="size1">
74 <view class="size1_1">配件</view>
75 <view><span>+¥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
76 </view>
77 <view class="colour_exp">*0290</view>
78 <view class="part_som">
79 <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
80 </view>
81 </view>
82 </view>
83 <view class="buy">
84 <view class="buy1">选了镜框,想选镜片?</view>
85 <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view>
86 <view class="buy3">
87 <view class="buy3_1">暂时不选</view>
88 <view class="buy3_2">立即去选</view>
89 </view>
90 </view>
91 <view class="zhanwei"></view>
92 <view class="button"><view>立即结算</view></view>
93 </view>
94 </template>
95 <script>
96 import CProgress from '../../components/UniSliper/UniSliper'
97
98 export default {
99 components: {
100 CProgress
101 },
102 data(){
103 return{
104 detail:{
105 image:'/static/img/detail/sun_glass.png',
106 name:'商品名称商品名称商品名称商品名称商品名称',
107 price: 180,
108 number: 1,
109 },
110 //框架颜色
111 colour:[
112 {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
113 {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
114 {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
115 {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
116 {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
117 {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
118 {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
119 ],
120 //镜片颜色
121 jp:[
122 {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'},
123 {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'},
124 {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'},
125 {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'},
126 {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'},
127 {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'},
128 {key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'},
129 {key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'},
130 {key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'}
131 ],
132 //规格参数
133 parameter:[
134 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
135 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
136 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
137 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
138 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
139 ],
140 //配饰
141 part:[
142 {key: 0,img:'/static/img/detail/Kuang/g1.png'},
143 {key: 1,img:'/static/img/detail/Kuang/g1.png'},
144 {key: 2,img:'/static/img/detail/Kuang/g2.png'},
145 {key: 3,img:'/static/img/detail/Kuang/g1.png'},
146 {key: 4,img:'/static/img/detail/Kuang/g1.png'},
147 {key: 5,img:'/static/img/detail/Kuang/g3.png'},
148 {key: 6,img:'/static/img/detail/Kuang/g3.png'},
149 {key: 7,img:'/static/img/detail/Kuang/g2.png'},
150
151 ],
152 }
153 }
154 }
155 </script>
156
157 <style lang="scss">
158 .container{
159 min-height: 100vh;
160 background: #F2F2F2;
161 padding-top: 10px;
162 box-sizing: border-box;
163 }
164 hr{
165 border: none;
166 height: 1px;
167 background: #F2F2F2;
168 margin-top: 18px;
169 }
170 .detail{
171 height: 272rpx;
172 background: #FFFFFF;
173 border-radius: 8px;
174 padding: 16px;
175 box-sizing: border-box;
176 display: flex;
177 justify-content: space-between;
178 align-items: center;
179 }
180 .detail1{
181 height: 188rpx;
182 width: 188rpx;
183 image{
184 width: 100%;
185 height: 100%;
186 border-radius: 8px;
187 }
188 }
189 .detail2{
190 width: 68%;
191 view{
192 margin-bottom: 8px;
193 font-family: PingFangSC-Regular;
194 }
195 .detail2_name{
196 font-size: 14px;
197 color: #333333;
198 letter-spacing: -0.26px;
199 line-height: 18px;
200 }
201 .detail2_tui{
202 font-size: 10px;
203 color: #999999;
204 letter-spacing: -0.19px;
205 span{
206 margin-right: 10px;
207 }
208 }
209 .detail2_price{
210 font-size: 14px;
211 color: #FF6B4A;
212 letter-spacing: -0.26px;
213 }
214 }
215 .choose{
216 background: #FFFFFF;
217 padding: 16px;
218 box-sizing: border-box;
219 margin-top: 10px;
220 border-radius: 8px;
221 .colour1{
222 span{
223 font-family: PingFangSC-Medium;
224 font-size: 16px;
225 color: #333333;
226 letter-spacing: -0.3px;
227 text-align: justify;
228 line-height: 24px;
229 font-weight: bold;
230 }
231 image{
232 float: right;
233 width: 40rpx;
234 height: 36rpx;
235 }
236 }
237 .colour_exp{
238 font-family: PingFangSC-Regular;
239 font-size: 12px;
240 color: #666666;
241 letter-spacing: 0;
242 margin-top: 10px;
243 margin-bottom: 10px;
244 }
245 .colour2{
246 display: grid;
247 grid-template-columns: repeat(5, 17%);
248 justify-content: space-between ;
249 grid-row-gap: 10px;
250 margin-bottom: 14px;
251 view{
252 border: 1px solid #F2F2F2;
253 image{
254 width: 100%;
255 height: 100%;
256 }
257 }
258 view:hover{
259 border: 1px solid #FF6B4A;
260 }
261 }
262 }
263 .jp_colour2{
264 display: grid;
265 grid-template-columns: repeat(6, 12%);
266 grid-row-gap: 10px;
267 grid-column-gap: 6px;
268 margin-bottom: 14px;
269 view{
270 border: 1px solid #F2F2F2;
271 height: 80rpx;
272 image{
273 width: 100%;
274 height: 100%;
275 }
276 }
277 view:hover{
278 border: 1px solid #FF6B4A;
279 }
280 }
281 .split1{
282 span{
283 font-family: PingFangSC-Medium;
284 font-size: 16px;
285 color: #333333;
286 letter-spacing: -0.3px;
287 text-align: justify;
288 line-height: 24px;
289 font-weight: bold;
290 margin-right:8px;
291 }
292 .split1_span{
293 font-family: PingFangSC-Regular;
294 font-size: 10px;
295 color: #999999;
296 letter-spacing: -0.3px;
297 font-weight:normal;
298 }
299 image{
300 float: right;
301 width: 40rpx;
302 height: 36rpx;
303 }
304 }
305 .split2{
306 margin-bottom: 12px;
307 .split2_number{
308 font-family: PingFangSC-Regular;
309 font-size: 10px;
310 color: #999999;
311 letter-spacing: -0.19px;
312 margin-bottom: 6px;
313 }
314 .split2_choose{
315 display: flex;
316 view{
317 display: flex;
318 justify-content: center;
319 align-items: center;
320 font-family: PingFangSC-Regular;
321 font-size: 12px;
322 color: #666666;
323 background: #F2F2F2;
324 width: 100rpx;
325 height: 60rpx;
326 border-radius: 2px;
327 margin-right: 10px;
328 }
329 view:hover{
330 color: #FF6B4A;
331 background: rgba(255,107,74,0.15);
332 }
333 .split2_tui{
334 width: 186rpx;
335 height: 60rpx;
336 }
337 }
338
339 }
340 .size,.part{
341 margin-top:14px;
342 .size1{
343 display: flex;
344 justify-content: space-between;
345 margin-bottom: 10px;
346 .size1_1{
347 font-weight: bold;
348 font-family: PingFangSC-Medium;
349 font-size: 16px;
350 color: #333333;
351 letter-spacing: -0.3px;
352 line-height: 24px;
353 }
354 view{
355 span{
356 font-family: PingFangSC-Regular;
357 font-size: 14px;
358 color: #FF6B4A;
359 letter-spacing: -0.26px;
360 margin-right: 12px;
361 }
362 image{
363 width: 40rpx;
364 height: 36rpx;
365 }
366 }
367 }
368 .size2{
369 view{
370 display: inline-flex;
371 align-items: center;
372 justify-content: center; //字体居中
373 margin-right: 12px;
374 margin-bottom: 20px;
375 width: 136rpx;
376 height: 60rpx;
377 background: #F2F2F2;
378 border-radius: 2px;
379 font-family: PingFangSC-Regular;
380 font-size: 12px;
381 color: #666666;
382 }
383 view:hover{
384 color: #FF6B4A;
385 background: rgba(255,107,74,0.15);
386 }
387 }
388 .D3_list{
389 margin-bottom: 4px;
390 }
391 .D3_list>view{
392 display: flex;
393 align-content: center;
394 margin-bottom: 10px;
395 view{
396 margin-right: 10px;
397 }
398 }
399 .D3_list image{
400 width: 50px;
401 height: 25px;
402 margin-right: 6px;
403 }
404 .D3_list span{
405 margin-left: 6px;
406 margin-right: 5px;
407 font-family: 'PingFangSC-Regular';
408 }
409 .D3_list_jDu{
410 view{
411 font-family: PingFangSC-Regular;
412 font-size: 10px;
413 color: #999999;
414 letter-spacing: -0.19px;
415 }
416 }
417 }
418 .part{
419 .part_som{
420 display: grid;
421 justify-content: space-between;
422 grid-template-columns: repeat(4, 22%);
423 grid-row-gap: 12px;
424 margin-bottom: 14px;
425 view{
426 border: 1px solid #F2F2F2;
427 height: 72rpx;
428 image{
429 width: 100%;
430 height: 100%;
431 }
432 }
433 view:hover{
434 border: 1px solid #FF6B4A;
435 }
436 }
437 }
438 .buy{
439 height: 280rpx;
440 background: #FFFFFF ;
441 margin-top: 10px;
442 border-radius: 8px;
443 padding-top: 20px;
444 box-sizing: border-box;
445 margin-bottom: 20px;
446 }
447 .buy1{
448 font-family: PingFangSC-Medium;
449 font-size: 16px;
450 font-weight: bold;
451 color: #333333;
452 text-align: center;
453 }
454 .buy2{
455 font-family: PingFangSC-Regular;
456 font-size: 12px;
457 color: #999999;
458 text-align: center;
459 margin: 10px;
460 }
461 .buy3{
462 font-family: PingFangSC-Regular;
463 font-size: 16px;
464 display: flex;
465 justify-content: center;
466 margin-top: 14px;
467 view{
468 border-radius: 20px;
469 width: 240rpx;
470 height: 80rpx;
471 display: flex;
472 justify-content: center;
473 align-items: center;
474 }
475 .buy3_1{
476 margin-right: 20px;
477 background: rgba(255,107,74,0.15);
478 color: #FF6B4A ;
479 }
480 .buy3_2{
481 background: #FF6B4A;
482 color: #FFFFFF ;
483 }
484 }
485 .zhanwei{
486 background: #F2F2F2;
487 height: 120rpx;
488 }
489 .button{
490 position: fixed;
491 bottom: 0;
492 width:100%;
493 height: 112rpx;
494 background: #FF6B4A 100%;
495 view{
496 color: #FFFFFF;
497 height: 100%;
498 display: flex;
499 justify-content: center;
500 align-items: center;
501 font-family: PingFangSC-Regular;
502 font-size: 16px;
503 }
504 }
505
506 </style>
src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
File was created 1 <template>
2 <!-- 折叠框 -->
3 <view class="myCollapse">
4 <view class="head">
5 <view>{{title}}</view>
6 <view v-if="title==='折射率'" class="headMid">注:折射率越高,镜片越薄,看着更美观。</view>
7 <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view>
8 <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view>
9 </view>
10 <view class="body">
11
12 <block v-if="isOpen">
13
14 <view style="background-color: #FFFFFF;" class="funBox">
15 <block v-if="title==='镜片种类'">
16 <view class="noRange">
17 <block v-for="(item) in funList" :key="item.key">
18 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
19 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
20 </block>
21 </view>
22 <view class="noRange">
23 <block v-for="(item,index) in funList2" :key="item.key">
24 <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'"
25 :style="colorList[index]" @click="choice2(index,item.key-1,item.isChioce)"></view>
26 </block>
27 </view>
28 </block>
29 <block v-else>
30 <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view>
31 <view class="noRange">
32 <block v-for="(item) in funList" :key="item.key">
33 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
34 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
35 </block>
36 </view>
37
38 <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
39 <view class="noRange" style="max-width: 624rpx">
40 <block v-for="(item,index) in funList2" :key="item.key">
41 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
42 @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view>
43 </block>
44 </view>
45 </block>
46 </view>
47 </block>
48
49 <block v-else>
50 *<block v-for="(item,index) in funContent" :key="index">
51 <text v-if="item!==null">{{item}}</text>
52 </block>
53 </block>
54 </view>
55 </view>
56
57 </template>
58
59 <script>
60 export default {
61 props:{
62 isOpenProps:{
63 // 是否展开,默认 true
64 type: Boolean,
65 default: true
66 },
67 funListProp:{
68 "name":String,
69 "isChioce": Number,
70 "key":Number
71 },
72 funList2Prop:{
73 type:Array,
74 }
75 ,
76 funContentProp: {
77 type: Array
78 },
79 title:{
80 type: String,
81 default: ''
82 }
83 },
84 data() {
85 return {
86 isOpen:this.isOpenProps,
87 // 颜色数组要与传入的值手动相同
88 colorList:[
89 "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
90 "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
91 "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
92 "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
93 "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
94 ],
95 funList: this.funListProp,
96 funList2: this.funList2Prop,
97 funContent: this.funContentProp
98 };
99 },
100
101 methods:{
102 myCollapseChange(isopen){
103 this.isOpen = !isopen
104 },
105 choice(index,isChoice){
106 this.funList[index].isChioce = !isChoice
107 if(!isChoice){
108 this.funContent[index] = this.funList[index].name
109 }
110 else{
111 this.funContent[index] = ''
112 }
113 },
114 choice2(index,conIndex,isChoice){
115 this.funList2[index].isChioce = !isChoice
116 if(!isChoice){
117 this.funContent[conIndex] = this.funList2[index].name
118 }
119 else{
120 this.funContent[conIndex] = ''
121 }
122 }
123 }
124 }
125 </script>
126
127 <style lang="scss">
128 .myCollapse{
129 width: 100%;
130 padding-bottom: 28rpx;
131 margin-top: 7px;
132 border-bottom: 1px solid #E9E9E9;
133 .head{
134 display: flex;
135 justify-content: space-between;
136 height: 24px;
137 // font-family: PingFangSC-Medium;
138 font-size: 16px;
139 color: #333333;
140 letter-spacing: -0.3px;
141 text-align: justify;
142 line-height: 24px;
143 margin-bottom: 18rpx;
144 .headRighted{
145 width: 0;
146 height: 0;
147 border-left: 4px solid transparent;
148 border-right: 4px solid transparent;
149 border-bottom: 4px solid #CFCFCF;
150 transform: scaleY(-1);
151 margin-top: 10px;
152 }
153 .headMid{
154 // font-family: PingFangSC-Regular;
155 font-size: 10px;
156 color: #999999;
157 letter-spacing: -0.19px;
158 margin-left: -120rpx;
159 }
160 .headRight{
161 width: 0;
162 height: 0;
163 border-left: 4px solid transparent;
164 border-right: 4px solid transparent;
165 border-bottom: 4px solid #CFCFCF;
166 margin-top: 10px;
167 }
168 }
169 .body{
170 // font-family: PingFangSC-Regular;
171 font-size: 12px;
172 color: #666666;
173 letter-spacing: 0;
174 display: flex;
175 flex-wrap: wrap;
176 text{
177 padding-left: 4px;
178 }
179 }
180 }
181 .funBox {
182 // display: flex;
183 width: 100%;
184 // flex-wrap: wrap;
185 // max-width: 624rpx;
186 .range{
187 // font-family: PingFangSC-Regular;
188 font-size: 10px;
189 color: #999999;
190 letter-spacing: -0.19px;
191 margin-bottom: 5px;
192 }
193 .noRange{
194 display: flex;
195 flex-wrap: wrap;
196 // max-width: 624rpx;
197 // margin-bottom: 28rpx;
198 .boxChoiced,.boxChoice{
199 height: 60rpx;
200 border-radius: 4rpx;
201 // font-family: PingFangSC-Regular;
202 font-size: 12px;
203 letter-spacing: 0;
204 line-height: 60rpx;
205 box-sizing: border-box;
206 padding: 0 20rpx;
207 margin-right: 20rpx;
208 margin-bottom: 13rpx;
209 }
210 .boxChoiced{
211 background: rgba(255,107,74,0.15);
212 color: #FF6B4A;
213 }
214 .boxChoice{
215 background: #F2F2F2;
216 color: #666666;
217 }
218 .boxChoiced-C,.boxChoice-C{
219 width: 64rpx;
220 height: 64rpx;
221 border-radius: 32rpx;
222 margin-right: 8px;
223 }
224 .boxChoiced-C{
225 opacity: 0.7;
226 border: 1px solid #FF6B4A;
227 }
228 .boxChoice-C{
229 opacity: 0.7;
230 border: 1px solid #FFFFFF;
231 }
232 }
233
234 }
235 </style>
236
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
File was created 1 <template>
2 <view class="content">
3 <view class="goods-info">
4 <image src="../../static/myorder-paying-pic.png"></image>
5 <view class="box-right">
6 <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
7 <text class="p2">支持7天无理由退货 顺丰发货</text>
8 <view class="priceBox">
9 <view class="price">¥{{price*count}}</view>
10 <view class="counter">
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 <text>{{count}}</text>
13 <view class="btn" @click="counter(true)">+</view>
14 </view>
15 </view>
16 </view>
17 </view>
18 <view class="goods-data">
19 <!-- 实用功能折叠框 -->
20 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" 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>
23 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
24
25 <view class="opCollapse">
26 <view class="head">
27 <view v-if="!opIsOpen">填写验光数据</view>
28 <view v-else></view>
29 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
31 </view>
32 <view class="body">
33 <template v-if="opIsOpen">
34
35 <view class="goods-form">
36 <text class="p1">填写验光数据</text>
37 <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text>
38 <view class="picker" >
39 <view class="picker-choice">
40 <view class="choice-left">
41 <text class="p11">{{pickerInfoList[0].nameC}}</text>
42 <text class="p12">{{pickerInfoList[0].nameE}}</text>
43 </view>
44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
47 <image src="../../static/detail-tabicon.png" ></image>
48 </picker>
49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
52 <image src="../../static/detail-tabicon.png" ></image>
53 </picker>
54 </view>
55 </view>
56 <view class="picker" >
57 <view class="picker-choice">
58 <view class="choice-left">
59 <text class="p11">{{pickerInfoList[1].nameC}}</text>
60 <text class="p12">{{pickerInfoList[1].nameE}}</text>
61 </view>
62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
65 <image src="../../static/detail-tabicon.png" ></image>
66 </picker>
67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
70 <image src="../../static/detail-tabicon.png" ></image>
71 </picker>
72 </view>
73 </view>
74 <view class="picker" >
75 <view class="picker-choice">
76 <view class="choice-left">
77 <text class="p11">{{pickerInfoList[2].nameC}}</text>
78 <text class="p12">{{pickerInfoList[2].nameE}}</text>
79 </view>
80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
83 <image src="../../static/detail-tabicon.png" ></image>
84 </picker>
85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
88 <image src="../../static/detail-tabicon.png" ></image>
89 </picker>
90 </view>
91 </view>
92 <view class="picker" >
93 <view class="picker-choice">
94 <view class="choice-left">
95 <text class="p11">{{pickerInfoList[3].nameC}}</text>
96 <text class="p12">{{pickerInfoList[3].nameE}}</text>
97 </view>
98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
101 <image src="../../static/detail-tabicon.png" ></image>
102 </picker>
103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
106 <image src="../../static/detail-tabicon.png" ></image>
107 </picker>
108 </view>
109 </view>
110 <view class="picker" >
111 <view class="picker-choice">
112 <view class="choice-left">
113 <text class="p11">{{pickerInfoList[4].nameC}}</text>
114 </view>
115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</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">
118 <image src="../../static/detail-tabicon.png" ></image>
119 </picker>
120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</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">
123 <image src="../../static/detail-tabicon.png" ></image>
124 </picker>
125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</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">
128 <image src="../../static/detail-tabicon.png" ></image>
129 </picker>
130 </view>
131 </view>
132 <view class="confirm">
133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
134 <text>确认以上输入信息来源于我的验光数据!</text>
135 </view>
136 </view>
137
138 </template>
139 <template v-else>
140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
141 <template v-if="item.nameC==='验光日期'">
142 <text class="names">{{item.nameC}}</text>
143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
145 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
146 </template>
147 <template v-else>
148 <template v-if="item.nameC==='度数'">
149 <text style="display: inline;">*</text>
150 </template>
151
152 <text class="names">{{item.nameC}}</text>
153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
155 </template>
156 </view>
157 </template>
158 </view>
159 </view>
160
161 </view>
162 <view class="submit">立即结算</view>
163 </view>
164 </template>
165
166 <script>
167 import MyCollapse from './compoents/MyCollapse.vue'
168 export default {
169 components: {
170 MyCollapse
171 },
172 data() {
173 return {
174 count:1,
175 disabled:false,
176 price:180,
177 // 实用功能参数
178 funIsOpen:true, // 默认myCollapse开启
179 funList: [
180 {"name":"防紫外线","isChioce": false,"key":1},
181 {"name":"防蓝光","isChioce": false,"key":2},
182 {"name":"智能变色","isChioce": false,"key":3},
183 {"name":"易清洁","isChioce": false,"key":4},
184 {"name":"防辐射","isChioce": false,"key":5},
185 {"name":"抗疲劳","isChioce": false,"key":6},
186 ],
187 funContent:[],
188
189 // 镜片种类参数
190 kindIsOpen:true,
191 kindList1: [
192 {"name":"染色","isChioce":false,key:1},
193 {"name":"渐变","isChioce":false,key:2},
194 ],
195 kindList2: [
196 {"name":"JB234759","isChioce":false,key:3},
197 {"name":"JB234759","isChioce":false,key:4},
198 {"name":"JB234759","isChioce":false,key:5},
199 {"name":"JB234759","isChioce":false,key:6},
200 {"name":"JB234759","isChioce":false,key:7},
201 ],
202 kindContent:[],
203 // 材质选择
204 maIsOpen:true,
205 maList1: [
206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
207 {"name":"特殊镜片","isChioce":false,key:2},
208 ],
209 maList2: [
210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
211 {"name":"玻璃镜片","isChioce":false,key:4},
212 ],
213 maContent:[],
214 // 折射率参数
215 reIsOpen:true,
216 reList1: [
217 {"name":"1.56(推荐)","isChioce":false,key:1,"range":"0-300度","isRange":true},
218 {"name":"1.60","isChioce":false,key:2},
219 ],
220 reList2: [
221 {"name":"1.71(推荐)","isChioce":false,key:3,"range":"300-1000度","isRange":true},
222 {"name":"1.67","isChioce":false,key:4},
223 {"name":"1.71","isChioce":false,key:5},
224 {"name":"1.74","isChioce":false,key:6},
225 ],
226 reContent:[],
227 // 验光参数
228 opIsOpen:true,
229 tablist: {
230 // read: true,
231 // seeLong: false,
232 confirm: false
233 },
234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
235 // 度数相关数据
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},
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},
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}
242 ],
243
244 }
245 },
246 methods: {
247 counter(isadd){
248 if(isadd){
249 this.count++
250 }else{
251 this.count <= 1? this.disabled = true:this.count--
252 }
253 },
254 myCollapseChange(isopen){
255 // console.log(isopen)
256 this.opIsOpen = !isopen
257 },
258 changeConfirm() {
259 this.tablist.confirm = !this.tablist.confirm
260 },
261
262 bindPickerChange01: function(e) {
263 this.pickerInfoList[0].nameIndex1 = e.target.value
264 },
265 bindPickerChange02: function(e) {
266 this.pickerInfoList[0].nameIndex2 = e.target.value
267 },
268
269 bindPickerChange11: function(e) {
270 this.pickerInfoList[1].nameIndex1 = e.target.value
271 },
272 bindPickerChange12: function(e) {
273 this.pickerInfoList[1].nameIndex2 = e.target.value
274 },
275
276 bindPickerChange21: function(e) {
277 this.pickerInfoList[2].nameIndex1 = e.target.value
278 },
279 bindPickerChange22: function(e) {
280 this.pickerInfoList[2].nameIndex2 = e.target.value
281 },
282
283 bindPickerChange31: function(e) {
284 this.pickerInfoList[3].nameIndex1 = e.target.value
285 },
286 bindPickerChange32: function(e) {
287 this.pickerInfoList[3].nameIndex2 = e.target.value
288 },
289
290 bindPickerChange41: function(e) {
291 this.pickerInfoList[4].nameIndex1 = e.target.value
292 },
293 bindPickerChange42: function(e) {
294 this.pickerInfoList[4].nameIndex2 = e.target.value
295 },
296 bindPickerChange43: function(e) {
297 this.pickerInfoList[4].nameIndex3 = e.target.value
298 },
299 }
300 }
301 </script>
302
303 <style lang="scss" scoped>
304 .content{
305 width: 100%;
306 background-color: #F2F2F2;
307 display: flex;
308 flex-direction: column;
309 align-items: center;
310 }
311
312 .goods-info{
313 width: 100%;
314 height: 272rpx;
315 box-sizing: border-box;
316 padding: 40rpx 40rpx 36rpx 36rpx;
317 margin: 36rpx 0 18rpx 0;
318 // margin-bottom: -18rpx;
319 // margin-top: -36rpx;
320 background: #FFFFFF;
321 border-radius: 16rpx;
322 display: flex;
323 image{
324 width: 94px;
325 height: 94px;
326 margin-right: 28rpx;
327 }
328 .box-right{
329 width: 458rpx;
330 display: flex;
331 flex-direction: column;
332 align-items: flex-start;
333 justify-content: space-between;
334 .p1 {
335 // font-family: PingFangSC-Regular;
336 font-size: 14px;
337 color: #333333;
338 letter-spacing: -0.26px;
339 text-align: justify;
340 line-height: 18px;
341 }
342 .p2 {
343 // font-family: PingFangSC-Regular;
344 font-size: 10px;
345 color: #999999;
346 letter-spacing: -0.19px;
347 margin-top: -20rpx;
348 }
349 .priceBox{
350 display: flex;
351 flex-direction: row;
352 justify-content: space-between;
353 width: 100%;
354 .price{
355 color: #FF6B4A;
356 font-size: 28rpx;
357 }
358 .counter{
359 display: flex;
360 flex-direction: row;
361 justify-content: space-between;
362 font-size: 28rpx;
363 color: #333333;
364 width: 122rpx;
365 .btn{
366 display: flex;
367 justify-content: center;
368 line-height: 32rpx;
369 height: 32rpx;
370 width: 32rpx;
371 background-color: #F2F2F2;
372 color: #CFCFCF;
373 }
374 }
375 }
376 }
377 }
378
379 .goods-data{
380 width: 100%;
381 box-sizing: border-box;
382 padding: 37rpx 40rpx 0 40rpx;
383 background: #FFFFFF;
384 border-radius: 12rpx;
385 margin-bottom: 92px;
386 .opCollapse{
387 width: 100%;
388 padding-bottom: 28rpx;
389 margin-top: 7px;
390 border-bottom: 1px solid #E9E9E9;
391 .head{
392 display: flex;
393 justify-content: space-between;
394 height: 24px;
395 // font-family: PingFangSC-Medium;
396 font-size: 16px;
397 color: #333333;
398 letter-spacing: -0.3px;
399 text-align: justify;
400 line-height: 24px;
401 margin-bottom: 18rpx;
402 .headRighted{
403 width: 0;
404 height: 0;
405 border-left: 4px solid transparent;
406 border-right: 4px solid transparent;
407 border-bottom: 4px solid #CFCFCF;
408 transform: scaleY(-1);
409 margin-top: 10px;
410 }
411 .headMid{
412 // font-family: PingFangSC-Regular;
413 font-size: 10px;
414 color: #999999;
415 letter-spacing: -0.19px;
416 margin-left: -120rpx;
417 }
418 .headRight{
419 width: 0;
420 height: 0;
421 border-left: 4px solid transparent;
422 border-right: 4px solid transparent;
423 border-bottom: 4px solid #CFCFCF;
424 margin-top: 10px;
425 }
426 }
427 .body{
428 // font-family: PingFangSC-Regular;
429 font-size: 12px;
430 color: #666666;
431 letter-spacing: 0;
432 .bodyBox{
433 margin-top: 15px;
434 .names{
435 // font-family: PingFangSC-Regular;
436 font-size: 12px;
437 color: #151515;
438 letter-spacing: 0;
439 text-align: justify;
440 line-height: 17px;
441 margin-left: 5px;
442 margin-right: 10px;
443 }
444 text{
445 // font-family: PingFangSC-Regular;
446 font-size: 12px;
447 color: #666666;
448 letter-spacing: 0;
449 text-align: justify;
450 }
451 }
452
453 }
454 }
455
456 }
457
458 .goods-form {
459 display: flex;
460 flex-direction: column;
461 align-items: center;
462 justify-content: center;
463 background-color: #fff;
464 width: 100%;
465
466 .p1 {
467 font-size: 16px;
468 color: #333333;
469 letter-spacing: -0.3px;
470 text-align: justify;
471 line-height: 24px;
472 margin: 4px 0;
473
474 }
475 .p2 {
476 font-size: 12px;
477 color: #999999;
478 letter-spacing: -0.23px;
479 margin-bottom: 18rpx;
480 }
481 image{
482 width: 28rpx;
483 height: 26rpx;
484 }
485 .confirm {
486 display: flex;
487 align-items: center;
488 font-size: 12px;
489 color: #666666;
490 letter-spacing: -0.23px;
491 width: 684rpx;
492 image{
493 margin-right:25rpx;
494 }
495 }
496 .picker{
497 display: flex;
498 flex-direction: column;
499 justify-content: center;
500 align-items: center;
501 width: 100%;
502 image{
503 width: 10px;
504 height: 10px;
505 margin-right: 5px;
506 }
507 .picker-choice{
508 display: flex;
509 width: 684rpx;
510 align-items: center;
511 margin-bottom: 40rpx;
512 .choice-left{
513 width: 210rpx;
514 .p11 {
515 font-size: 14px;
516 color: #333333;
517 letter-spacing: -0.26px;
518 text-align: justify;
519 line-height: 24px;
520 // margin-right: 10px;
521 }
522 .p12 {
523 font-size: 10px;
524 color: #3F3F3F;
525 letter-spacing: -0.19px;
526 text-align: justify;
527 line-height: 24px;
528 }
529
530
531 }
532 .p13 {
533 font-size: 10px;
534 color: #999999;
535 letter-spacing: -0.19px;
536 margin-right: 10px;
537 }
538 .p13-date {
539 font-size: 10px;
540 color: #999999;
541 letter-spacing: -0.19px;
542 margin-right: 5px;
543 }
544 .p14 {
545 font-size: 14px;
546 color: #666666;
547 letter-spacing: -0.26px;
548 text-align: center;
549 width: 124rpx;
550 border-bottom: 1px solid #CFCFCF;
551 }
552
553 }
554 }
555 }
556
557 .submit{
558 width: 100%;
559 height: 112rpx;
560 background: #FF6B4A;
561 position: fixed;
562 bottom: 0;
563 text-align: center;
564 line-height: 112rpx;
565 // font-family: PingFangSC-Regular;
566 font-size: 16px;
567 color: #FFFFFF;
568 letter-spacing: -0.3px;
569 }
570
571 </style>
572
src/pages/frameDetail/frameDetail.vue
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" > 5 <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
6 <swiper-item v-for="(item) in infos" :key="item.goods_id"> 6 <swiper-item v-for="(item) in infos" :key="item.goods_id">
7 <image :src="item.img" mode="scaleToFill"></image> 7 <image :src="item.img" mode="scaleToFill"></image>
8 </swiper-item> 8 </swiper-item>
9 </swiper> 9 </swiper>
10 <view class="D1_price">¥{{price}}</view> 10 <view class="D1_price">¥{{price}}</view>
11 <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view> 11 <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
12 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 12 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
13 </view> 13 </view>
14 <view class="D2" v-if="goodType === 0 || goodType === 3"> 14 <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4">
15 <view><span class="D2_span1">框架材质:</span><span class="D2_span2">{{introduction.material}}</span></view> 15 <view><span class="D2_span1">框架材质:</span><span class="D2_span2">{{introduction.material}}</span></view>
16 <view><span class="D2_span1">风格:</span><span class="D2_span2">{{introduction.func}}</span></view> 16 <view><span class="D2_span1">风格:</span><span class="D2_span2">{{introduction.func}}</span></view>
17 <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> 17 <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view>
18 </view> 18 </view>
19 <view class="D2" v-if="goodType === 1"> 19 <view class="D2" v-if="updateGoodType == 1">
20 <view><span class="D2_span1">镜片材质:</span><span class="D2_span2">{{introduction.material}}</span></view> 20 <view><span class="D2_span1">镜片材质:</span><span class="D2_span2">{{introduction.material}}</span></view>
21 <view><span class="D2_span1">功能:</span><span class="D2_span2">{{introduction.func}}</span></view> 21 <view><span class="D2_span1">功能:</span><span class="D2_span2">{{introduction.func}}</span></view>
22 <view><span class="D2_span1">使用场景:</span><span class="D2_span2">{{introduction.rate}}</span></view> 22 <view><span class="D2_span1">使用场景:</span><span class="D2_span2">{{introduction.rate}}</span></view>
23 </view> 23 </view>
24 <view class="D2" v-if="goodType === 2"> 24 <view class="D2" v-if="updateGoodType == 3">
25 <view><span class="D2_span1">材质:</span><span class="D2_span2">{{introduction.material}}</span></view> 25 <view><span class="D2_span1">材质:</span><span class="D2_span2">{{introduction.material}}</span></view>
26 <view><span class="D2_span1">直径/基弧:</span><span class="D2_span2">{{introduction.func}}</span></view> 26 <view><span class="D2_span1">直径/基弧:</span><span class="D2_span2">{{introduction.func}}</span></view>
27 <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> 27 <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view>
28 </view> 28 </view>
29 29
30 <view class="D3"> 30 <view class="D3">
31 <view class="screenBar"> 31 <view class="screenBar">
32 <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" > 32 <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" >
33 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 33 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
34 </view> 34 </view>
35 </view> 35 </view>
36 <view class="screen-item " v-if="current ===0"> 36 <view class="screen-item " v-if="current ===0">
37 <view class="D3_list"> 37 <view class="D3_list">
38 <view v-for="(item) in parameter" :key="item.key"> 38 <view v-for="(item) in parameter" :key="item.key">
39 <image class="D3_image" v-bind:src = "item.img"></image> 39 <image class="D3_image" v-bind:src = "item.img"></image>
40 <span>{{item.standard}}</span> 40 <span>{{item.standard}}</span>
41 <span>{{item.slength}}</span> 41 <span>{{item.slength}}</span>
42 </view> 42 </view>
43 </view> 43 </view>
44 </view > 44 </view >
45 <view class="screen-item " v-if="current ===1"> 45 <view class="screen-item " v-if="current ===1">
46 <view class="D3_list"> 46 <view class="D3_list">
47 <view>主体</view> 47 <view>主体</view>
48 <view>商品产地:韩国</view> 48 <view>商品产地:韩国</view>
49 <view>包装清单:彩色隐形 * 1</view> 49 <view>包装清单:彩色隐形 * 1</view>
50 </view> 50 </view>
51 </view > 51 </view >
52 <view class="screen-item " v-if="current ===2"> 52 <view class="screen-item " v-if="current ===2">
53 <view class="customerService"> 53 <view class="customerService">
54 <view class="serviceItem" > 54 <view class="serviceItem" >
55 <view class="title"> 55 <view class="title">
56 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 56 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
57 <text class="titleText">卖家服务</text> 57 <text class="titleText">卖家服务</text>
58 </view> 58 </view>
59 <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验</view> 59 <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验</view>
60 </view> 60 </view>
61 <view class="serviceItem" > 61 <view class="serviceItem" >
62 <view class="title"> 62 <view class="title">
63 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 63 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
64 <text class="titleText">平台承诺</text> 64 <text class="titleText">平台承诺</text>
65 </view> 65 </view>
66 <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 66 <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
67 </view> 67 </view>
68 <view class="serviceItem"> 68 <view class="serviceItem">
69 <view class="title"> 69 <view class="title">
70 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 70 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
71 <text class="titleText">正品保证</text> 71 <text class="titleText">正品保证</text>
72 </view> 72 </view>
73 <view class="itemContent">向您保证所售商品均为正品行货</view> 73 <view class="itemContent">向您保证所售商品均为正品行货</view>
74 </view> 74 </view>
75 <view class="serviceItem2"> 75 <view class="serviceItem2">
76 <view class="title"> 76 <view class="title">
77 <text class="titleText">权利申明</text> 77 <text class="titleText">权利申明</text>
78 </view> 78 </view>
79 <view class="itemContent">任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 79 <view class="itemContent">任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
80 </view> 80 </view>
81 <view class="serviceItem2"> 81 <view class="serviceItem2">
82 <view class="title"> 82 <view class="title">
83 <text class="titleText">价格保证</text> 83 <text class="titleText">价格保证</text>
84 </view> 84 </view>
85 <view class="itemContent"> 85 <view class="itemContent">
86 <view class="itemContent-child"> 86 <view class="itemContent-child">
87 <text class="contentTitle">平台价:</text> 87 <text class="contentTitle">平台价:</text>
88 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 88 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
89 </view> 89 </view>
90 <view class="itemContent-child"> 90 <view class="itemContent-child">
91 <text class="contentTitle">划线价:</text> 91 <text class="contentTitle">划线价:</text>
92 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 92 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
93 </view> 93 </view>
94 <view class="itemContent-child"> 94 <view class="itemContent-child">
95 <text class="contentTitle">平折扣:</text> 95 <text class="contentTitle">平折扣:</text>
96 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 96 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
97 </view> 97 </view>
98 <view class="itemContent-child"> 98 <view class="itemContent-child">
99 <text class="contentTitle">异常问题:</text> 99 <text class="contentTitle">异常问题:</text>
100 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 100 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
101 </view> 101 </view>
102 102
103 </view> 103 </view>
104 </view> 104 </view>
105 </view> 105 </view>
106 </view > 106 </view >
107 </view> 107 </view>
108 <view class="D4" v-if="current !==2"> 108 <view class="D4" v-if="current !==2">
109 <view class="D4_esvalue"> 109 <view class="D4_esvalue">
110 <view>{{esvalue}}</view> 110 <view>{{esvalue}}</view>
111 <view class="D4_2"> 111 <view class="D4_2">
112 <view class="star" v-for="o in starCount" :key="o"> 112 <view class="star" v-for="o in starCount" :key="o">
113 <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image> 113 <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image>
114 </view> 114 </view>
115 </view> 115 </view>
116 </view> 116 </view>
117 <view class="D4_list"> 117 <view class="D4_list">
118 <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view> 118 <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
119 </view> 119 </view>
120 </view> 120 </view>
121 <view class="D5" v-if="current !==2"> 121 <view class="D5" v-if="current !==2">
122 <view class="D5_fixed1"> 122 <view class="D5_fixed1">
123 <image src="/static/img/detail/hr.png"></image> 123 <image src="/static/img/detail/hr.png"></image>
124 <view>商品详细</view> 124 <view>商品详细</view>
125 <image src="/static/img/detail/hr.png"></image> 125 <image src="/static/img/detail/hr.png"></image>
126 </view> 126 </view>
127 <view class="D5_all"> 127 <view class="D5_all">
128 <image v-bind:src="imgAll"></image> 128 <image v-bind:src="imgAll"></image>
129 </view> 129 </view>
130 <view class="D5_photoes"> 130 <view class="D5_photoes">
131 <view class="D5_photoes1"> 131 <view class="D5_photoes1">
132 <view v-for="(photoes) in photoes" :key="photoes.value"> 132 <view v-for="(photoes) in photoes" :key="photoes.value">
133 <image v-bind:src = "photoes.img"></image> 133 <image v-bind:src = "photoes.img"></image>
134 <view>{{photoes.value}}</view> 134 <view>{{photoes.value}}</view>
135 </view> 135 </view>
136 </view> 136 </view>
137 <view class="D5_logo1">帕森防蓝光镜片</view> 137 <view class="D5_logo1">帕森防蓝光镜片</view>
138 <view class="D5_logo2">健康护眼,我们是认真的!</view> 138 <view class="D5_logo2">健康护眼,我们是认真的!</view>
139 <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view> 139 <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view class="D6" v-if="current !==2"> 142 <view class="D6" v-if="current !==2">
143 <view class="D6_v1">CHARM DETAIL</view> 143 <view class="D6_v1">CHARM DETAIL</view>
144 <view class="D6_v2">细节展示</view> 144 <view class="D6_v2">细节展示</view>
145 <view ><image v-bind:src="imgDetail"></image></view> 145 <view ><image v-bind:src="imgDetail"></image></view>
146 <view>........................................................................</view> 146 <view>........................................................................</view>
147 <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view> 147 <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
148 </view> 148 </view>
149 149
150 <!-- 底部菜单 --> 150 <!-- 底部菜单 -->
151 <view class="botton"> 151 <view class="botton">
152 <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view> 152 <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
153 <view class="botton_2"> 153 <view class="botton_2">
154 <view class="botton_input">加入购物车</view> 154 <view class="botton_input">加入购物车</view>
155 <view class="botton_now" @click="goPerchase">立即购买</view> 155 <view class="botton_now" @click="goPerchase">立即购买</view>
156 </view> 156 </view>
157 </view> 157 </view>
158 </view> 158 </view>
159 </template> 159 </template>
160 160
161 <script> 161 <script>
162 export default { 162 export default {
163 data(){ 163 data(){
164 return { 164 return {
165 name:'商品名称', 165 name:'商品名称',
166 goodType:1, 166 goodType:2,
167 price: 120, 167 price: 120,
168 number: 391, 168 number: 391,
169 screenItems: [ 169 screenItems: [
170 {current:0,text:'商品保障'}, 170 {current:0,text:'商品保障'},
171 {current:1,text:'规格参数'}, 171 {current:1,text:'规格参数'},
172 {current:2,text:'售后保障'}, 172 {current:2,text:'售后保障'},
173 ], 173 ],
174 current: 0, 174 current: 0,
175 starCount:5, 175 starCount:5,
176 infos: [ 176 infos: [
177 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, 177 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
178 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, 178 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
179 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, 179 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
180 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, 180 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
181 ], 181 ],
182 parameter:[ 182 parameter:[
183 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'}, 183 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
184 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'}, 184 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
185 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'}, 185 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
186 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'}, 186 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
187 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'}, 187 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
188 {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'} 188 {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
189 ], 189 ],
190 assess:[ 190 assess:[
191 {key: 0, Iassess: '价格实惠'}, 191 {key: 0, Iassess: '价格实惠'},
192 {key: 1, Iassess: '美观大方'}, 192 {key: 1, Iassess: '美观大方'},
193 {key: 2, Iassess: '易搭配'} 193 {key: 2, Iassess: '易搭配'}
194 ], 194 ],
195 esvalue:'宝贝好评率 100%', 195 esvalue:'宝贝好评率 100%',
196 introduction:{ 196 introduction:{
197 material:'钛合金', 197 material:'钛合金',
198 func:'抗疲劳/防辐射', 198 func:'抗疲劳/防辐射',
199 rate: 1.6 199 rate: 1.6
200 }, 200 },
201 imgAll:'/static/img/detail/d8.png' , 201 imgAll:'/static/img/detail/d8.png' ,
202 photoes:[ 202 photoes:[
203 {value:'日常办公', img:'/static/img/detail/d9.png'}, 203 {value:'日常办公', img:'/static/img/detail/d9.png'},
204 {value:'上网', img:'/static/img/detail/d10.png'}, 204 {value:'上网', img:'/static/img/detail/d10.png'},
205 {value:'追剧', img:'/static/img/detail/d11.png'}, 205 {value:'追剧', img:'/static/img/detail/d11.png'},
206 {value:'玩游戏', img:'/static/img/detail/d12.png'}, 206 {value:'玩游戏', img:'/static/img/detail/d12.png'},
207 ], 207 ],
208 imgDetail:'/static/img/detail/d13.png', 208 imgDetail:'/static/img/detail/d13.png',
209 imgShop:{ 209 imgShop:{
210 img:'/static/tab-cart.png', 210 img:'/static/tab-cart.png',
211 IsShown: false 211 IsShown: false
212 } 212 }
213 } 213 }
214 }, 214 },
215 onLoad:function(option){
216 this.goodType = option.goodType
217 console.log(this.updateGoodType)
218 },
219 computed:{
220 updateGoodType(){
221 return this.goodType
222 }
223 },
215 methods:{ 224 methods:{
216 goPerchase(){ 225 goPerchase(){
217 uni.navigateTo({ 226 switch(this.updateGoodType){
218 url: '../purchaseLenses/purchaseLenses', 227 case '1':
219 success: res => {}, 228 uni.navigateTo({
220 fail: () => {}, 229 url: '../detailsChoiceArgs/detailsChoiceArgs',
221 complete: () => {} 230 success: res => {},
222 }); 231 fail: () => {},
232 complete: () => {}
233 });
234 break;
235 case '2':
236 uni.navigateTo({
237 url: `../detailStandard/detailStandard_k`,
238 success: res => {},
239 fail: () => {},
240 complete: () => {}
241 });
242 break;
243 case '3':
244 uni.navigateTo({
245 url: `../purchaseLenses/purchaseLenses`,
246 success: res => {},
247 fail: () => {},
248 complete: () => {}
249 });
250 break;
251 case '4':
252 uni.navigateTo({
253 url: `../detailStandard/detailStandard_sun`,
254 success: res => {},
255 fail: () => {},
256 complete: () => {}
257 });
258 break;
259 default :
260 break
261 }
223 }, 262 },
224 tabChange(e) { 263 tabChange(e) {
225 if (this.current !== e) { 264 if (this.current !== e) {
226 this.current = e; 265 this.current = e;
227 } 266 }
228 } 267 }
229 } 268 }
230 } 269 }
231 </script> 270 </script>
232 <style lang='scss'> 271 <style lang='scss'>
233 .container{ 272 .container{
234 background-color:#f8f8f8 ; 273 background-color:#f8f8f8 ;
235 } 274 }
236 .D1,.D2,.D3,.D4,.D6{ 275 .D1,.D2,.D3,.D4,.D6{
237 background: #ffffff; 276 background: #ffffff;
238 margin-bottom: 10px; 277 margin-bottom: 10px;
239 padding:8px 20px 8px 20px; 278 padding:8px 20px 8px 20px;
240 box-sizing: border-box; 279 box-sizing: border-box;
241 .swiperImage { 280 .swiperImage {
242 width: 684rpx; 281 width: 684rpx;
243 height: 512rpx; 282 height: 512rpx;
244 image { 283 image {
245 width: 100%; 284 width: 100%;
246 height: 100%; 285 height: 100%;
247 border-radius: 16rpx; 286 border-radius: 16rpx;
248 } 287 }
249 } 288 }
250 } 289 }
251 .D5{ 290 .D5{
252 background: #ffffff; 291 background: #ffffff;
253 padding:8px 20px 8px 20px; 292 padding:8px 20px 8px 20px;
254 box-sizing: border-box; 293 box-sizing: border-box;
255 } 294 }
256 .swiperImage{ 295 .swiperImage{
257 width: 100%; 296 width: 100%;
258 height: 560rpx; 297 height: 560rpx;
259 .swiper-item{ 298 .swiper-item{
260 width: 100%; 299 width: 100%;
261 image{ 300 image{
262 width: 100%; 301 width: 100%;
263 } 302 }
264 } 303 }
265 } 304 }
266 .D1{ 305 .D1{
267 .D1_price{ 306 .D1_price{
268 color: #EB5D3B; 307 color: #EB5D3B;
269 font-size: 18px; 308 font-size: 18px;
270 margin-top: 5px; 309 margin-top: 5px;
271 font-family: 'PingFangSC-Semibold'; 310 font-family: 'PingFangSC-Semibold';
272 } 311 }
273 .D1_name{ 312 .D1_name{
274 font-size: 16px; 313 font-size: 16px;
275 font-family: 'PingFangSC-Semibold'; 314 font-family: 'PingFangSC-Semibold';
276 margin-top: 5px; 315 margin-top: 5px;
277 display: flex; 316 display: flex;
278 justify-content: space-between; 317 justify-content: space-between;
279 .D1_name1{ 318 .D1_name1{
280 font-weight: bold; 319 font-weight: bold;
281 font-size: 16px; 320 font-size: 16px;
282 color: #333333; 321 color: #333333;
283 } 322 }
284 .D1_number{ 323 .D1_number{
285 color: #999999 ; 324 color: #999999 ;
286 font-size: 14px; 325 font-size: 14px;
287 font-family: 'PingFangSC-Regular'; 326 font-family: 'PingFangSC-Regular';
288 } 327 }
289 } 328 }
290 .D1_spans{ 329 .D1_spans{
291 font-size: 10px; 330 font-size: 10px;
292 color:#999999; 331 color:#999999;
293 margin-top: 5px; 332 margin-top: 5px;
294 span{ 333 span{
295 height: 14px; 334 height: 14px;
296 margin-right: 10px; 335 margin-right: 10px;
297 } 336 }
298 } 337 }
299 338
300 } 339 }
301 .D2{ 340 .D2{
302 font-size: 14px; 341 font-size: 14px;
303 font-family: 'PingFangSC-Regular'; 342 font-family: 'PingFangSC-Regular';
304 view{ 343 view{
305 height: 24px; 344 height: 24px;
306 } 345 }
307 .D2_span1{ 346 .D2_span1{
308 color: #999999; 347 color: #999999;
309 } 348 }
310 .D2_span2{ 349 .D2_span2{
311 color: #333333; 350 color: #333333;
312 } 351 }
313 } 352 }
314 .D3{ 353 .D3{
315 .screenBar{ 354 .screenBar{
316 width: 670rpx; 355 width: 670rpx;
317 margin-top: 20rpx; 356 margin-top: 20rpx;
318 margin-bottom: 24rpx; 357 margin-bottom: 24rpx;
319 display: flex; 358 display: flex;
320 flex-direction: row; 359 flex-direction: row;
321 justify-content: space-between; 360 justify-content: space-between;
322 align-items: center; 361 align-items: center;
323 font-size: 14px; 362 font-size: 14px;
324 color: #333333; 363 color: #333333;
325 transition:all 0.2s; 364 transition:all 0.2s;
326 } 365 }
327 .screen-item{ 366 .screen-item{
328 font-size: 32rpx; 367 font-size: 32rpx;
329 color: #333333; 368 color: #333333;
330 display: flex; 369 display: flex;
331 transition:all 0.2s; 370 transition:all 0.2s;
332 .D3_list{ 371 .D3_list{
333 margin-bottom: 4px; 372 margin-bottom: 4px;
334 } 373 }
335 .D3_list view{ 374 .D3_list view{
336 display: flex; 375 display: flex;
337 align-content: center; 376 align-content: center;
338 font-size: 14px; 377 font-size: 14px;
339 color: #333333; 378 color: #333333;
340 } 379 }
341 .D3_list image{ 380 .D3_list image{
342 width: 50px; 381 width: 50px;
343 height: 25px; 382 height: 25px;
344 margin-right: 6px; 383 margin-right: 6px;
345 } 384 }
346 .D3_list span{ 385 .D3_list span{
347 margin-left: 6px; 386 margin-left: 6px;
348 margin-right: 5px; 387 margin-right: 5px;
349 font-family: 'PingFangSC-Regular'; 388 font-family: 'PingFangSC-Regular';
350 } 389 }
351 } 390 }
352 .active{ 391 .active{
353 border-bottom: 4rpx solid #FF6B4A; 392 border-bottom: 4rpx solid #FF6B4A;
354 } 393 }
355 .customerService{ 394 .customerService{
356 margin-bottom: 90rpx; 395 margin-bottom: 90rpx;
357 .serviceItem{ 396 .serviceItem{
358 margin-bottom: 32rpx; 397 margin-bottom: 32rpx;
359 .title{ 398 .title{
360 display: flex;flex-direction: row; 399 display: flex;flex-direction: row;
361 align-items: center; 400 align-items: center;
362 .titleText{ 401 .titleText{
363 font-size: 14px; 402 font-size: 14px;
364 color: #333333; 403 color: #333333;
365 margin-bottom: 12rpx; 404 margin-bottom: 12rpx;
366 } 405 }
367 } 406 }
368 .itemContent{ 407 .itemContent{
369 font-size: 14px; 408 font-size: 14px;
370 color: #999999; 409 color: #999999;
371 margin-left: 18rpx; 410 margin-left: 18rpx;
372 } 411 }
373 } 412 }
374 .serviceItem2{ 413 .serviceItem2{
375 margin-left: 18rpx; 414 margin-left: 18rpx;
376 margin-bottom: 32rpx; 415 margin-bottom: 32rpx;
377 .titleText{ 416 .titleText{
378 font-size: 14px; 417 font-size: 14px;
379 color: #FF6B4A; 418 color: #FF6B4A;
380 } 419 }
381 .itemContent{ 420 .itemContent{
382 font-size: 14px; 421 font-size: 14px;
383 color: #999999; 422 color: #999999;
384 .itemContent-child{ 423 .itemContent-child{
385 margin-bottom: 40rpx; 424 margin-bottom: 40rpx;
386 .contentTitle{ 425 .contentTitle{
387 border-bottom: 1px solid #FF6B4A; 426 border-bottom: 1px solid #FF6B4A;
388 } 427 }
389 } 428 }
390 } 429 }
391 } 430 }
392 } 431 }
393 } 432 }
394 .D4{ 433 .D4{
395 .D4_esvalue{ 434 .D4_esvalue{
396 font-size: 14px; 435 font-size: 14px;
397 color: #333333; 436 color: #333333;
398 display: flex; 437 display: flex;
399 justify-content: space-between; 438 justify-content: space-between;
400 margin-bottom: 10px; 439 margin-bottom: 10px;
401 .D4_2{ 440 .D4_2{
402 width: 90px; 441 width: 90px;
403 display: flex; 442 display: flex;
404 align-items: center; 443 align-items: center;
405 justify-content: space-between; 444 justify-content: space-between;
406 } 445 }
407 } 446 }
408 .D4_esvalue view{ 447 .D4_esvalue view{
409 font-size: 14px; 448 font-size: 14px;
410 color: #333333; 449 color: #333333;
411 font-weight: bold; 450 font-weight: bold;
412 } 451 }
413 .D4_list view{ 452 .D4_list view{
414 display: inline-block; 453 display: inline-block;
415 font-size: 12px; 454 font-size: 12px;
416 text-align: center; 455 text-align: center;
417 margin-right: 12px; 456 margin-right: 12px;
418 width: 90px; 457 width: 90px;
419 height: 24px; 458 height: 24px;
420 line-height: 24px; 459 line-height: 24px;
421 background: #F2F2F2; 460 background: #F2F2F2;
422 color: #666666 ; 461 color: #666666 ;
423 } 462 }
424 } 463 }
425 .D5{ 464 .D5{
426 .D5_fixed1{ 465 .D5_fixed1{
427 display: flex; 466 display: flex;
428 justify-content: space-between; 467 justify-content: space-between;
429 align-content: center; 468 align-content: center;
430 margin-bottom: 12px; 469 margin-bottom: 12px;
431 view{ 470 view{
432 font-size: 14px; 471 font-size: 14px;
433 color: #333333; 472 color: #333333;
434 font-weight: bold; 473 font-weight: bold;
435 font-family: 'PingFangSC-Medium'; 474 font-family: 'PingFangSC-Medium';
436 line-height: 24px; 475 line-height: 24px;
437 } 476 }
438 image{ 477 image{
439 width: 240rpx; 478 width: 240rpx;
440 height: 3px; 479 height: 3px;
441 margin-top: 10px; 480 margin-top: 10px;
442 } 481 }
443 } 482 }
444 .D5_all { 483 .D5_all {
445 width: 100%; 484 width: 100%;
446 height: 380px; 485 height: 380px;
447 margin-bottom: 30px; 486 margin-bottom: 30px;
448 font-family: 'PingFangSC-Regular'; 487 font-family: 'PingFangSC-Regular';
449 border: #999999 solid 1.5px; 488 border: #999999 solid 1.5px;
450 image{ 489 image{
451 width: 100%; 490 width: 100%;
452 height: 380px; 491 height: 380px;
453 }} 492 }}
454 .D5_photoes1{ 493 .D5_photoes1{
455 display: grid; 494 display: grid;
456 grid-template-columns: 48% 48%; 495 grid-template-columns: 48% 48%;
457 grid-row-gap: 10px; 496 grid-row-gap: 10px;
458 grid-column-gap: 4%; 497 grid-column-gap: 4%;
459 image{ 498 image{
460 width: 100%; 499 width: 100%;
461 height: 70px; 500 height: 70px;
462 } 501 }
463 view{ 502 view{
464 width: 100%; 503 width: 100%;
465 font-size: 14px; 504 font-size: 14px;
466 text-align: center; 505 text-align: center;
467 background: #949494; 506 background: #949494;
468 font-family: 'PingFangSC-Regular'; 507 font-family: 'PingFangSC-Regular';
469 color: #ffffff; 508 color: #ffffff;
470 view{ 509 view{
471 height: 24px; 510 height: 24px;
472 line-height: 24px; 511 line-height: 24px;
473 } 512 }
474 } 513 }
475 } 514 }
476 .D5_logo1,.D5_logo2{ 515 .D5_logo1,.D5_logo2{
477 text-align: center; 516 text-align: center;
478 } 517 }
479 .D5_logo1{ 518 .D5_logo1{
480 margin-top: 40px; 519 margin-top: 40px;
481 font-size: 24px; 520 font-size: 24px;
482 font-weight: bold; 521 font-weight: bold;
483 font-family: 'PingFangSC-Semibold'; 522 font-family: 'PingFangSC-Semibold';
484 } 523 }
485 .D5_logo2{ 524 .D5_logo2{
486 font-size: 12px; 525 font-size: 12px;
487 } 526 }
488 .D5_logo3{ 527 .D5_logo3{
489 width: 100%; 528 width: 100%;
490 text-align: center; 529 text-align: center;
491 image{ 530 image{
492 width: 50px; 531 width: 50px;
493 height: 24px; 532 height: 24px;
494 } 533 }
495 } 534 }
496 } 535 }
497 .D6{ 536 .D6{
498 width: 100%; 537 width: 100%;
499 height: 430px; 538 height: 430px;
500 background: #F9F6ED; 539 background: #F9F6ED;
501 margin-bottom: 74px; 540 margin-bottom: 74px;
502 view{ 541 view{
503 text-align: center; 542 text-align: center;
504 } 543 }
505 .D6_v1{ 544 .D6_v1{
506 font-weight: bold; 545 font-weight: bold;
507 } 546 }
508 .D6_v2{ 547 .D6_v2{
509 font-size: 14px; 548 font-size: 14px;
510 margin-bottom: 30px; 549 margin-bottom: 30px;
511 } 550 }
512 .D6_v5{ 551 .D6_v5{
513 .D6_v5_s1{ 552 .D6_v5_s1{
514 font-weight: bold; 553 font-weight: bold;
515 } 554 }
516 .D6_v5_s2{ 555 .D6_v5_s2{
517 font-size: 14px; 556 font-size: 14px;
518 } 557 }
519 } 558 }
520 } 559 }
521 .botton{ 560 .botton{
522 position: fixed; 561 position: fixed;
523 bottom: 0; 562 bottom: 0;
524 height: 74px; 563 height: 74px;
525 width: 100%; 564 width: 100%;
526 background: #FFFFFF; 565 background: #FFFFFF;
527 padding: 20px 20px 8px 20px; 566 padding: 20px 20px 8px 20px;
528 font-family: 'PingFangSC-Regular'; 567 font-family: 'PingFangSC-Regular';
529 box-sizing: border-box; 568 box-sizing: border-box;
530 display: flex; 569 display: flex;
531 justify-content: space-between; 570 justify-content: space-between;
532 align-content: center; 571 align-content: center;
533 .botton_1{ 572 .botton_1{
534 width: 20%; 573 width: 20%;
535 height: 100%; 574 height: 100%;
536 text-align: center; 575 text-align: center;
537 color: #989898; 576 color: #989898;
538 } 577 }
539 image{ 578 image{
540 width: 60%; 579 width: 60%;
541 height: 30px; 580 height: 30px;
542 } 581 }
543 .botton_image{ 582 .botton_image{
544 font-size: 12px; 583 font-size: 12px;
545 text-align: center; 584 text-align: center;
546 } 585 }
547 .botton_2{ 586 .botton_2{
548 width: 74%; 587 width: 74%;
549 height: 86%; 588 height: 86%;
550 display: grid; 589 display: grid;
551 grid-template-columns: 50% 50%; 590 grid-template-columns: 50% 50%;
552 } 591 }
553 .botton_input{ 592 .botton_input{
554 display: inline-flex; 593 display: inline-flex;
555 align-items: center; 594 align-items: center;
556 justify-content: space-around; 595 justify-content: space-around;
557 background: #FFF0EC; 596 background: #FFF0EC;
558 font-size: 16px; 597 font-size: 16px;
559 color: #FF6B4A; 598 color: #FF6B4A;
560 border-radius: 20px 0 0 20px; 599 border-radius: 20px 0 0 20px;
561 } 600 }
562 .botton_now{ 601 .botton_now{
563 display: inline-flex; 602 display: inline-flex;
564 align-items: center; 603 align-items: center;
565 justify-content: space-around; 604 justify-content: space-around;
566 background: #FF6B4A; 605 background: #FF6B4A;
567 font-size: 16px; 606 font-size: 16px;
568 color: #FFFFFF; 607 color: #FFFFFF;
569 border-radius:0 20px 20px 0; 608 border-radius:0 20px 20px 0;
570 } 609 }
571 } 610 }
572 </style> 611 </style>
src/pages/index/index.vue
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 // //商品数据 105 loadingText: "~~到底了~~",
106 // goodsList: [
107 // {
108 // // goods_id: 0,
109 // // img: "/static/img/goods/p1.jpg",
110 // // name: "商品名称",
111 // // originCost: "¥198",
112 // // price: "¥168",
113 // // slogan: "1235人浏览"
114 // }
115 // ],
116 loadingText: "正在加载...",
117 filterDropdownValue: [], 106 filterDropdownValue: [],
118 filterData: [] 107 filterData: [],
108 goodsList:[
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 },
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 },
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 },
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 },
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 }
119 ],
119 }; 120 };
120 }, 121 },
121 computed: { 122 computed: {
122 goodsList() { 123 // goodsList() {
123 // 也可以从 getters 获取 124 // // 也可以从 getters 获取
124 console.log(this.$store.getters.list); 125 // console.log('list', this.$store.state.test.list);
125 return this.$store.state.test.list; 126 // return this.$store.state.test.list;
126 } 127 // },
128 // categoryList(){
129 // console.log(this.$store.state.categoryOrder.categoryList);
130 // this.filterData = this.$store.state.categoryOrder.categoryList
131 // }
132
127 }, 133 },
128 filters: { 134 filters: {
129 outData(value) { 135 outData(value) {
130 return JSON.stringify(value); 136 return JSON.stringify(value);
131 } 137 }
132 }, 138 },
133 onLoad: function() { 139 onLoad: function() {
134 store.dispatch('test/fetch'); 140 store.dispatch('test/fetch');
135 // uni.request({ 141 store.dispatch('categoryOrder/fetch')
136 // url: "https://api.glass.xiuyetang.com/app/prod/list", 142
137 // method: "post",
138 // data: {
139 // // text: 'uni.request'
140 // },
141 // header: {
142 // // 'custom-header': 'hello', //自定义请求头信息
143 // "Content-Type": "application/x-www-form-urlencoded"
144 // // 'Content-Type':'multipart/form-data'
145 // // 'Content-Type':'ext/plain'
146 // },
147 // timeout: 3000,
148 // // dataType:'json'
149 // // responseType:'text',
150 // // sslVerify: true, //验证 ssl 证书
151 // withCredentials: false, //跨域请求时是否携带凭证(cookies)
152 // success: res => {
153 // console.error("success status === > ", res);
154 // this.goodsList = res.data.data;
155 // // console.log('res.data', res.data);
156 // // this.text = 'request success';
157 // },
158 // fail: res => {
159 // console.log("fail status === > ", res);
160 // },
161 // complete: res => {
162 // console.log("complete status === > ", res);
163 // }
164 // });
165 //定时器模拟ajax异步请求数据 143 //定时器模拟ajax异步请求数据
166 // setTimeout(()=>{ 144 setTimeout(()=>{
167 // //传入defaultSelected的结构不能错,错了就报错运行异常。 不选中的项目传入null 145 //传入defaultSelected的结构不能错,错了就报错运行异常。 不选中的项目传入null
168 // this.filterDropdownValue = [ 146 // this.filterDropdownValue = [
169 // [1,1,0], //第0个菜单选中 一级菜单的第1项,二级菜单的第1项,三级菜单的第3项 147 // [1,1,0], //第0个菜单选中 一级菜单的第1项,二级菜单的第1项,三级菜单的第3项
170 // [null,null], //第1个菜单选中 都不选中 148 // [null,null], //第1个菜单选中 都不选中
171 // [1], //第2个菜单选中 一级菜单的第1项 149 // [1], //第2个菜单选中 一级菜单的第1项
172 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项,第二个筛选的第1,2,7项,第三个筛选的第1,0项 150 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项,第二个筛选的第1,2,7项,第三个筛选的第1,0项
173 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项,第二个筛选的第1项,第三个筛选的第1项 151 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项,第二个筛选的第1项,第三个筛选的第1项
174 // ]; 152 // ];
175 // this.filterData = data; 153 // this.filterData = data;
176 // },100); 154 },100);
177 // 模拟ajax请求子菜单数据。
178 // setTimeout(()=>{
179 // console.log('发起请求','ddddddd');
180 // // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
181 // },3000);
182 }, 155 },
183 methods: { 156 methods: {
184 showDrawer(e) { 157 showDrawer(e) {
185 this.$refs[e].open(); 158 this.$refs[e].open();
186 }, 159 },
187 closeDrawer(e) { 160 closeDrawer(e) {
188 this.$refs[e].close(); 161 this.$refs[e].close();
189 }, 162 },
190 change(e, type) { 163 change(e, type) {
191 this[type] = e; 164 this[type] = e;
192 }, 165 },
193 onClickItem(e) { 166 onClickItem(e) {
194 if (this.current !== e) { 167 if (this.current !== e) {
195 this.current = e; 168 this.current = e;
196 } 169 }
197 }, 170 },
198 dropDown() { 171 dropDown() {
199 console.log("下拉"); 172 console.log("下拉");
200 }, 173 },
201 //接收菜单结果 174 //接收菜单结果
202 confirm(e) { 175 confirm(e) {
203 this.indexArr = e.index; 176 this.indexArr = e.index;
204 this.valueArr = e.value; 177 this.valueArr = e.value;
205 return; 178 return;
206 console.log("修改菜单"); 179 console.log("修改菜单");
207 this.filterData[4].submenu[1] = { 180 this.filterData[4].submenu[1] = {
208 name: "项目2", 181 name: "项目2",
209 submenu: [] 182 submenu: []
210 }; 183 };
211 } 184 }
212 }, 185 },
213 onNavigationBarButtonTap(e) { 186
214 this.showRight = !this.showRight;
215 },
216 //上拉加载,
217 onReachBottom() {
218 console.log("到底加载");
219 let len = this.goodsList.length;
220 if (len >= 30) {
221 this.loadingText = "~~到底了~~";
222 return false;
223 } else {
224 this.loadingText = "正在加载...";
225 }
226 let end_goods_id = this.goodsList[len - 1].goods_id;
227 for (let i = 1; i <= 10; i++) {
228 let goods_id = end_goods_id + i;
229 let p = {
230 goods_id: goods_id,
231 img:
232 "/static/img/goods/p" +
233 (goods_id % 10 == 0 ? 10 : goods_id % 10) +
234 ".jpg",
235 name: "商品名称",
236 originCost: "¥198",
237 price: "¥168",
238 slogan: "1235人付款"
239 };
240 this.goodsList.push(p);
241 }
242 }
243 }; 187 };
244 </script> 188 </script>
245 189
246 <style lang="scss"> 190 <style lang="scss">
247 .content { 191 .content {
248 display: flex; 192 display: flex;
249 flex-direction: column; 193 flex-direction: column;
250 align-items: center; 194 align-items: center;
251 justify-content: center; 195 justify-content: center;
252 background-color: #f7f6f6; 196 background-color: #f7f6f6;
253 } 197 }
254 .header { 198 .header {
255 display: flex; 199 display: flex;
256 flex-direction: column; 200 flex-direction: column;
257 align-items: center; 201 align-items: center;
258 justify-content: center; 202 justify-content: center;
259 background-color: #f7f6f6; 203 background-color: #f7f6f6;
260 height: 178rpx; 204 height: 178rpx;
261 width: 100%; 205 width: 100%;
262 z-index: 999; 206 z-index: 999;
263 position: fixed; 207 position: fixed;
264 top: 0; 208 top: 0;
265 left: 0; 209 left: 0;
266 } 210 }
267 .searchBar { 211 .searchBar {
268 width: 670rpx; 212 width: 670rpx;
269 display: flex; 213 display: flex;
270 justify-content: center; 214 justify-content: center;
271 align-items: center; 215 align-items: center;
272 box-sizing: border-box; 216 box-sizing: border-box;
273 padding: 0rpx 16rpx; 217 padding: 0rpx 16rpx;
274 border: 1px solid #ff6b4a; 218 border: 1px solid #ff6b4a;
275 border-radius: 8rpx; 219 border-radius: 8rpx;
276 background-color: #ffffff; 220 background-color: #ffffff;
277 } 221 }
278 222
279 .searchIpt { 223 .searchIpt {
280 height: 68rpx; 224 height: 68rpx;
281 width: 670rpx; 225 width: 670rpx;
282 padding: 16rpx; 226 padding: 16rpx;
283 font-size: 28rpx; 227 font-size: 28rpx;
284 box-sizing: border-box; 228 box-sizing: border-box;
285 } 229 }
286 .screenBar { 230 .screenBar {
287 width: 670rpx; 231 width: 670rpx;
288 height: 110rpx; 232 height: 110rpx;
289 display: flex; 233 display: flex;
290 flex-direction: row; 234 flex-direction: row;
291 justify-content: space-between; 235 justify-content: space-between;
292 align-items: center; 236 align-items: center;
293 color: #333333; 237 color: #333333;
294 font-size: 32rpx; 238 font-size: 32rpx;
295 } 239 }
296 .active { 240 .active {
297 color: #ff6b4a; 241 color: #ff6b4a;
298 } 242 }
299 .screenItem { 243 .screenItem {
300 display: flex; 244 display: flex;
301 justify-content: center; 245 justify-content: center;
302 align-items: center; 246 align-items: center;
303 } 247 }
304 .content-wrap { 248 .content-wrap {
305 width: 100%; 249 width: 100%;
306 background-color: #ffffff; 250 background-color: #ffffff;
307 } 251 }
308 252
309 .HMfilterDropdown { 253 .HMfilterDropdown {
310 top: 178rpx !important; 254 top: 178rpx !important;
311 } 255 }
312 256
313 .goods-list { 257 .goods-list {
314 padding-top: 286rpx; 258 padding-top: 286rpx;
315 .loading-text { 259 .loading-text {
316 width: 100%; 260 width: 100%;
317 display: flex; 261 display: flex;
318 justify-content: center; 262 justify-content: center;
319 align-items: center; 263 align-items: center;
320 height: 30px; 264 height: 30px;
321 color: #979797; 265 color: #979797;
322 font-size: 12px; 266 font-size: 12px;
src/pages/myOrder/components/OrderCard.vue
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="card" v-if="current === order.orderType" > 3 <view class="card" v-if="current === order.orderType" >
4 <view class="cardHeader"> 4 <view class="cardHeader">
5 <text class="orderId">订单号:{{order.orderId}}</text> 5 <text class="orderId">订单号:{{order.orderId}}</text>
6 <text class="orderType" v-if="order.orderType===1">待付款</text> 6 <text class="orderType" v-if="order.orderType===1">待付款</text>
7 <text class="orderType" v-if="order.orderType===2">待发货</text> 7 <text class="orderType" v-if="order.orderType===2">待发货</text>
8 <text class="orderType" v-if="order.orderType === 3">待收货</text> 8 <text class="orderType" v-if="order.orderType === 3">待收货</text>
9 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 9 <text class="orderType" v-if="order.orderType === 4">退款售后</text>
10 <text class="orderType" v-if="order.orderType === 5">已完成</text> 10 <text class="orderType" v-if="order.orderType === 5">已完成</text>
11 </view> 11 </view>
12 <view class="orderCardInfo"> 12 <view class="orderCardInfo">
13 <image :src="order.img" mode="aspectFill"></image> 13 <image :src="order.img" mode="aspectFill"></image>
14 <view class="infoText"> 14 <view class="infoText">
15 <view class="orderName">{{order.name}}</view> 15 <view class="orderName">{{order.name}}</view>
16 <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view> 16 <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view>
17 <view class="infoText-bottom"> 17 <view class="infoText-bottom">
18 <view class="markPrice">{{order.price}}</view> 18 <view class="markPrice">{{order.price}}</view>
19 <view class="buy-num">X{{order.buyNum}}</view> 19 <view class="buy-num">X{{order.buyNum}}</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view> 23 <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view>
24 <view class="btns" v-if="order.orderType === 1"> 24 <view class="btns" v-if="order.orderType === 1">
25 <view class="btn-type1">申请退款</view> 25 <view class="btn-type1">申请退款</view>
26 <view class="btn-type2">去支付</view> 26 <view class="btn-type2">去支付</view>
27 </view> 27 </view>
28 <view class="btns" v-if="order.orderType === 0"> 28 <view class="btns" v-if="order.orderType === 0">
29 <view class="btn-type1">再次购买</view> 29 <view class="btn-type1">再次购买</view>
30 </view> 30 </view>
31 </view> 31 </view>
32 <view class="card" v-if="current === 0" > 32 <view class="card" v-if="current === 0" >
33 <view class="cardHeader"> 33 <view class="cardHeader">
34 <text class="orderId">订单号:{{order.orderId}}</text> 34 <text class="orderId">订单号:{{order.orderId}}</text>
35 <text class="orderType" v-if="order.orderType===1">待付款</text> 35 <text class="orderType" v-if="order.orderType===1">待付款</text>
36 <text class="orderType" v-if="order.orderType===2">待发货</text> 36 <text class="orderType" v-if="order.orderType===2">待发货</text>
37 <text class="orderType" v-if="order.orderType === 3">待收货</text> 37 <text class="orderType" v-if="order.orderType === 3">待收货</text>
38 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 38 <text class="orderType" v-if="order.orderType === 4">退款售后</text>
39 </view> 39 </view>
40 <view class="orderCardInfo"> 40 <view class="orderCardInfo">
41 <image :src="order.img" mode="aspectFill"></image> 41 <image :src="order.img" mode="aspectFill"></image>
42 <view class="infoText"> 42 <view class="infoText">
43 <view class="orderName">{{order.name}}</view> 43 <view class="orderName">{{order.name}}</view>
44 <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view> 44 <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view>
45 <view class="infoText-bottom"> 45 <view class="infoText-bottom">
46 <view class="markPrice">{{order.price}}</view> 46 <view class="markPrice">{{order.price}}</view>
47 <view class="buy-num">X{{order.buyNum}}</view> 47 <view class="buy-num">X{{order.buyNum}}</view>
48 </view> 48 </view>
49 </view> 49 </view>
50 </view> 50 </view>
51 <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view> 51 <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view>
52 <view class="btns" v-if="order.orderType === 1"> 52 <view class="btns" v-if="order.orderType === 1">
53 <view class="btn-type1" @click="toRefundment">申请退款</view> 53 <view class="btn-type1" @click="toRefundment">申请退款</view>
54 <view class="btn-type2">去支付</view> 54 <view class="btn-type2">去支付</view>
55 </view> 55 </view>
56 <view class="btns" v-if="order.orderType === 0"> 56 <view class="btns" v-if="order.orderType === 0">
57 <view class="btn-type1">再次购买</view> 57 <view class="btn-type1">再次购买</view>
58 </view> 58 </view>
59 </view> 59 </view>
60 </view> 60 </view>
61 </template> 61 </template>
62 62
63 <script> 63 <script>
64 export default { 64 export default {
65 props: { 65 props: {
66 /** 66 /**
67 * 订单数据 67 * 订单数据
68 */ 68 */
69 order: { 69 order: {
70 orderId: Number, 70 orderId: Number,
71 img: String, 71 img: String,
72 name: String, 72 name: String,
73 originCost:String, 73 originCost:String,
74 price: String, 74 price: String,
75 orderType:Number, 75 orderType:Number,
76 buyNum:Number 76 buyNum:Number
77 }, 77 },
78 /** 78 /**
79 * 当前选择 79 * 当前选择
80 */ 80 */
81 current:Number 81 current:Number
82 82
83 }, 83 },
84 data() { 84 onLoad() {
85 return { 85 // console.log('dd');
86 }; 86 console.log('order', this.props.order);
87 },
88 data() {
89 return {
90 };
87 }, 91 },
88 methods:{ 92 methods:{
89 toRefundment(){ 93 toRefundment(){
90 uni.navigateTo({ 94 uni.navigateTo({
91 url: '../refundment/refundment', 95 url: '../refundment/refundment',
92 success: res => {}, 96 success: res => {},
93 fail: () => {}, 97 fail: () => {},
94 complete: () => {} 98 complete: () => {}
95 }); 99 });
96 } 100 }
97 } 101 }
98 } 102 }
99 </script> 103 </script>
100 104
101 <style lang="scss"> 105 <style lang="scss">
102 .card{ 106 .card{
103 width: 670rpx; 107 width: 670rpx;
104 height: 478rpx; 108 height: 478rpx;
105 background: #FFFFFF; 109 background: #FFFFFF;
106 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); 110 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
107 border-radius: 8px; 111 border-radius: 8px;
108 border-radius: 8px; 112 border-radius: 8px;
109 margin-top: 20rpx; 113 margin-top: 20rpx;
110 padding: 40rpx; 114 padding: 40rpx;
111 box-sizing: border-box; 115 box-sizing: border-box;
112 .cardHeader{ 116 .cardHeader{
113 width: 100%; 117 width: 100%;
114 height: 40rpx; 118 height: 40rpx;
115 display: flex; 119 display: flex;
116 justify-content: space-between; 120 justify-content: space-between;
117 align-items: center; 121 align-items: center;
118 .orderId{ 122 .orderId{
119 font-size: 12px; 123 font-size: 12px;
120 color: #999999; 124 color: #999999;
121 } 125 }
122 .orderType{ 126 .orderType{
123 font-size: 14px; 127 font-size: 14px;
124 color: #FF6B4A; 128 color: #FF6B4A;
125 } 129 }
126 } 130 }
127 .orderCardInfo{ 131 .orderCardInfo{
128 width: 100%; 132 width: 100%;
129 height: 188rpx; 133 height: 188rpx;
130 display: flex; 134 display: flex;
131 flex-direction: row; 135 flex-direction: row;
132 justify-content: space-between; 136 justify-content: space-between;
133 align-items: center; 137 align-items: center;
134 margin-top: 40rpx; 138 margin-top: 40rpx;
135 image{ 139 image{
136 height: 188rpx; 140 height: 188rpx;
137 width: 188rpx; 141 width: 188rpx;
138 margin-right: 24rpx; 142 margin-right: 24rpx;
139 } 143 }
140 .infoText{ 144 .infoText{
141 display: flex; 145 display: flex;
142 flex-direction: column; 146 flex-direction: column;
143 justify-content: space-between; 147 justify-content: space-between;
144 align-items: flex-start; 148 align-items: flex-start;
145 height: 188rpx; 149 height: 188rpx;
146 } 150 }
147 .orderName{ 151 .orderName{
148 font-size: 14px; 152 font-size: 14px;
149 color: #333333; 153 color: #333333;
150 } 154 }
151 .orderDescrib{ 155 .orderDescrib{
152 font-size: 12px; 156 font-size: 12px;
153 color: #999999; 157 color: #999999;
154 } 158 }
155 .infoText-bottom{ 159 .infoText-bottom{
156 display: flex; 160 display: flex;
157 flex-direction: row; 161 flex-direction: row;
158 justify-content: space-between; 162 justify-content: space-between;
159 align-items: center; 163 align-items: center;
160 width: 100%; 164 width: 100%;
161 .markPrice{ 165 .markPrice{
162 font-size: 14px; 166 font-size: 14px;
163 color: #FF6B4A; 167 color: #FF6B4A;
164 } 168 }
165 .buy-num{ 169 .buy-num{
166 font-size: 12px; 170 font-size: 12px;
167 color: #999999; 171 color: #999999;
168 } 172 }
169 } 173 }
170 } 174 }
171 .payPrice{ 175 .payPrice{
172 text-align: right; 176 text-align: right;
173 margin: 20rpx 0; 177 margin: 20rpx 0;
174 font-size: 14px; 178 font-size: 14px;
175 color: #333333; 179 color: #333333;
176 .priceNum{ 180 .priceNum{
177 font-size: 14px; 181 font-size: 14px;
178 color: #FF6B4A; 182 color: #FF6B4A;
179 } 183 }
180 } 184 }
181 .btns{ 185 .btns{
182 display: flex; 186 display: flex;
183 justify-content: flex-end; 187 justify-content: flex-end;
184 align-items: center; 188 align-items: center;
185 .btn-type1{ 189 .btn-type1{
186 height: 48rpx; 190 height: 48rpx;
187 width: 156rpx; 191 width: 156rpx;
188 border: 1px solid #FF6B4A; 192 border: 1px solid #FF6B4A;
189 border-radius: 12px; 193 border-radius: 12px;
190 border-radius: 12px; 194 border-radius: 12px;
191 text-align: center; 195 text-align: center;
192 line-height: 48rpx; 196 line-height: 48rpx;
193 font-size: 12px; 197 font-size: 12px;
194 color: #FF6B4A; 198 color: #FF6B4A;
195 } 199 }
196 .btn-type2{ 200 .btn-type2{
197 height: 48rpx; 201 height: 48rpx;
198 width: 140rpx; 202 width: 140rpx;
199 background: #FF6B4A; 203 background: #FF6B4A;
200 border-radius: 12px; 204 border-radius: 12px;
201 border-radius: 12px; 205 border-radius: 12px;
202 text-align: center; 206 text-align: center;
203 line-height: 48rpx; 207 line-height: 48rpx;
204 font-size: 12px; 208 font-size: 12px;
205 color: #FFFFFF; 209 color: #FFFFFF;
206 margin-left: 20rpx; 210 margin-left: 20rpx;
207 } 211 }
208 } 212 }
209 } 213 }
210 </style> 214 </style>
211 215
src/pages/myOrder/myOrder.vue
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 <view class="screenBar"> 9 <view class="screenBar">
10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > 10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
12 </view> 12 </view>
13 </view> 13 </view>
14 </view> 14 </view>
15 <view class="orderList" > 15 <view class="orderList" >
16 <view v-for="(order) in orderList" :key="order.orderId"> 16 <view
17 v-for="(order) in orderList"
18 :key="order.orderId"
19 >
17 <OrderCard :order = "order" :current="current"></OrderCard> 20 <OrderCard :order = "order" :current="current"></OrderCard>
18 </view> 21 </view>
19 </view> 22 </view>
20 <view class="footer">已显示全部</view> 23 <view class="footer">已显示全部</view>
21 </view> 24 </view>
22 </template> 25 </template>
23 <script> 26 <script>
24 import OrderCard from './components/OrderCard.vue' 27 import OrderCard from './components/OrderCard.vue';
28 import store from '@/store';
29
25 export default { 30 export default {
26 components:{ 31 components:{
27 'OrderCard':OrderCard 32 'OrderCard': OrderCard
28 }, 33 },
29 data() { 34 data() {
30 return { 35 return {
31 screenItems: [ 36 screenItems: [
32 {current:0,text:'全部'}, 37 {current:0,text:'全部'},
33 {current:1,text:'待付款'}, 38 {current:1,text:'待付款'},
34 {current:2,text:'待发货'}, 39 {current:2,text:'待发货'},
35 {current:3,text:'待收货'}, 40 {current:3,text:'待收货'},
36 {current:4,text:'退款售后'}, 41 {current:4,text:'退款售后'},
37 ], 42 ],
38 current: 0, 43 current: 0,
39 //订单数据 44 //订单数据
40 orderList:[ 45 // orderList:[
41 { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1}, 46 // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1},
42 { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1}, 47 // { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1},
43 { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:2 ,buyNum:1}, 48 // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:2 ,buyNum:1},
44 { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1}, 49 // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1},
45 { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1}, 50 // { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1},
46 { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1}, 51 // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1},
47 { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1}, 52 // { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1},
48 { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1}, 53 // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1},
49 { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1} 54 // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1}
50 ], 55 // ],
51
52 }; 56 };
53 }, 57 },
58
59 onLoad: function() {
60 store.dispatch('myOrder/getList', {
61 uid: "1",
62 way: "0",
63 });
64 },
65 computed: {
66 orderList() {
67 console.log('orderList', this.$store.state.myOrder.orderlist);
68 return this.$store.state.myOrder.orderlist;
69 }
70 },
54 methods:{ 71 methods:{
55 onClickItem(e) { 72 onClickItem(e) {
56 if (this.current !== e) { 73 if (this.current !== e) {
57 this.current = e; 74 this.current = e;
58 } 75 }
59 } 76 }
60 } 77 }
61 } 78 }
62 </script> 79 </script>
63 80
64 <style lang="scss"> 81 <style lang="scss">
65 .content { 82 .content {
66 display: flex; 83 display: flex;
67 flex-direction: column; 84 flex-direction: column;
68 align-items: center; 85 align-items: center;
69 background-color: #F7F6F6; 86 background-color: #F7F6F6;
70 min-height: 100vh; 87 min-height: 100vh;
71 .header{ 88 .header{
72 background-color: #ffffff; 89 background-color: #ffffff;
73 width: 100%; 90 width: 100%;
74 height: 232rpx; 91 height: 232rpx;
75 padding: 40rpx 40rpx 36rpx 40rpx; 92 padding: 40rpx 40rpx 36rpx 40rpx;
76 box-sizing: border-box; 93 box-sizing: border-box;
77 position: fixed; 94 position: fixed;
78 top: 0; 95 top: 0;
79 left: 0; 96 left: 0;
80 .searchBar { 97 .searchBar {
81 width: 670rpx; 98 width: 670rpx;
82 display: flex; 99 display: flex;
83 justify-content: center; 100 justify-content: center;
84 align-items: center; 101 align-items: center;
85 box-sizing: border-box; 102 box-sizing: border-box;
86 padding: 0rpx 16rpx; 103 padding: 0rpx 16rpx;
87 border: 1px solid #FF6B4A; 104 border: 1px solid #FF6B4A;
88 border-radius: 8rpx; 105 border-radius: 8rpx;
89 background-color: #ffffff; 106 background-color: #ffffff;
90 } 107 }
91 108
92 .screenBar{ 109 .screenBar{
93 width: 670rpx; 110 width: 670rpx;
94 height: 110rpx; 111 height: 110rpx;
95 display: flex; 112 display: flex;
96 flex-direction: row; 113 flex-direction: row;
97 justify-content: space-between; 114 justify-content: space-between;
98 align-items: center; 115 align-items: center;
99 color: #333333; 116 color: #333333;
100 font-size: 32rpx; 117 font-size: 32rpx;
101 } 118 }
102 .screenItem{ 119 .screenItem{
103 height: 50rpx; 120 height: 50rpx;
104 font-size: 32rpx; 121 font-size: 32rpx;
105 color: #333333; 122 color: #333333;
106 display: flex; 123 display: flex;
107 justify-content: center; 124 justify-content: center;
108 align-items: center; 125 align-items: center;
109 transition:all 0.2s; 126 transition:all 0.2s;
110 } 127 }
111 .active{ 128 .active{
112 // font-size: 34rpx; 129 // font-size: 34rpx;
113 color: #EC5D3B; 130 color: #EC5D3B;
114 } 131 }
115 .searchIpt { 132 .searchIpt {
116 height: 68rpx; 133 height: 68rpx;
117 width: 670rpx; 134 width: 670rpx;
118 padding: 16rpx; 135 padding: 16rpx;
119 font-size: 28rpx; 136 font-size: 28rpx;
120 box-sizing: border-box; 137 box-sizing: border-box;
121 } 138 }
122 } 139 }
123 .orderList{ 140 .orderList{
124 margin-top: 232rpx; 141 margin-top: 232rpx;
125 } 142 }
126 .footer{ 143 .footer{
127 font-size: 14px; 144 font-size: 14px;
128 color: #B8B8B8; 145 color: #B8B8B8;
129 margin: 40rpx 0; 146 margin: 40rpx 0;
130 } 147 }
131 } 148 }
132 </style> 149 </style>
src/pages/myOrderPaying/myOrderPaying.vue
1 <template> 1 <template>
2 <view class="content"> 2
3 <view class="header"> 3 <view class="content">
4 <view class="header-name"> 4 <view class="order-hr"></view>
5 <navigator open-type="navigateBack" hover-class="navigator-hover"> 5 <view class="order-time">
6 <image src="/static/back.png"></image> 6 <text>请在</text>
7 </navigator> 7 <!-- <text class="p2"></text> -->
8 <text>我的订单</text> 8 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false"
9 </view> 9 :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown>
10 <text>内完成付款</text>
10 </view> 11 </view>
11 <scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }"> 12 <view class="order">
12 <view class="order-hr"></view>
13 <view class="order-time">
14 <text>请在</text>
15 <text class="p2">00:59:58 </text>
16 <text>内完成付款</text>
17 </view>
18 <view class="order-user"> 13 <view class="order-user">
19 <view class="order-user-head"> 14 <view class="order-user-head">
20 <text class="p1">钱大大</text> 15 <text class="p1">钱大大</text>
21 <text class="p2">18823749843</text> 16 <text class="p2">18823749843</text>
22 </view> 17 </view>
23 <view class="order-user-body"> 18 <view class="order-user-body">
24 <image src="../../static/myorder-paying-location.png"></image> 19 <image src="../../static/myorder-paying-location.png"></image>
25 <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text> 20 <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text>
26 </view> 21 </view>
27 </view> 22 </view>
28 <view class="order-info"> 23 <view class="order-info">
29 <view class="order-info-head"> 24 <view class="order-info-head">
30 <image src="../../static/myorder-paying-pic.png"></image> 25 <image src="../../static/myorder-paying-pic.png"></image>
31 <view class="order-info-head-r"> 26 <view class="order-info-head-r">
32 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> 27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
33 <text class="p2">规格:玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text> 28 <view class="p2" style="margin: 0;">
34 <text class="p3">¥180</text> 29 规格:玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
30 <!-- <view class="arrow"></view> -->
31 </view>
32 <text class="p3"><span>¥180</span><span class="p4">X1</span></text>
35 </view> 33 </view>
36 </view> 34 </view>
37 <view class="order-info-goodsnum"> 35 <!-- <view class="order-info-goodsnum">
38 <text>X1</text> 36 <text>X1</text>
39 </view> 37 </view> -->
40 <text class="order-info-freight"> 38 <text class="order-info-freight">
41 <text class="p1">运费</text> 39 <text class="p1">运费</text>
42 <text class="p2">0.00</text> 40 <text class="p2">0.00</text>
43 </text> 41 </text>
44 <text class="order-info-discount"> 42 <text class="order-info-discount">
45 <text class="p1">优惠</text> 43 <text class="p1">优惠</text>
46 <text class="p2">-¥70.00</text> 44 <text class="p2">-¥70.00</text>
47 </text> 45 </text>
48 <text class="order-info-price"> 46 <text class="order-info-price">
49 <text class="p1">实付</text> 47 <text class="p1">实付</text>
50 <text class="p2">¥110</text> 48 <text class="p2">¥110</text>
51 </text> 49 </text>
52 <text class="order-info-num"> 50 <text class="order-info-num">
53 <text>订单号:203486795859605849</text> 51 <text>订单号:203486795859605849</text>
54 </text> 52 </text>
55 <text class="order-info-time"> 53 <text class="order-info-time">
56 <text>下单时间:2020-10-22 14:32:42</text> 54 <text>下单时间:2020-10-22 14:32:42</text>
57 </text> 55 </text>
58 <view class="order-info-hr"></view> 56 <view class="order-info-hr"></view>
59 <view class="order-info-contact"> 57 <view class="order-info-contact">
60 <image src="../../static/myorder-paying-contact.png"></image> 58 <image src="../../static/myorder-paying-contact.png"></image>
61 <text>联系客服</text> 59 <text>联系客服</text>
62 </view> 60 </view>
63 </view> 61 </view>
64 </scroll-view> 62 </view>
65 <view class="order-confim"> 63 <view class="order-confim">
66 <button class="b1">取消订单</button> 64 <button class="b1">取消订单</button>
67 <button class="b2">立即支付</button> 65 <button class="b2">立即支付</button>
68 </view> 66 </view>
69 </view> 67 </view>
70 </template> 68 </template>
71 69
72 <script> 70 <script>
71 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
73 export default { 72 export default {
73 components: {
74 UniCountdown
75 },
74 data() { 76 data() {
75 return { 77 return {
76 scrollHeight: false, 78 scrollHeight: false,
77 } 79 }
78 }, 80 },
79 methods: { 81 methods: {
80 82
81 } 83 }
82 } 84 }
83 </script> 85 </script>
84 86
85 <style lang="scss" scoped> 87 <style lang="scss" scoped>
86 .content{ 88 .content{
87 display: flex; 89 display: flex;
88 flex-direction: column; 90 flex-direction: column;
89 justify-content: center; 91 justify-content: center;
90 align-items: center; 92 align-items: center;
93 background-color: #f2f2f2;
91 } 94 }
92 95
93 .header{
94 display: flex;
95 flex-direction: column;
96 align-items: center;
97 justify-content: center;
98 width: 100%;
99 height: 44px;
100 position: fixed;
101 top: 0;
102 z-index: 999;
103 background-color: #fff;
104 .header-name{
105 display: flex;
106 align-items: center;
107 width: 670rpx;
108 image {
109 width: 11px;
110 height: 18px;
111 }
112 text {
113 // font-family: PingFangSC-Regular;
114 font-size: 36rpx;
115 color: #333333;
116 letter-spacing: -0.34px;
117 margin: 0 0 10rpx 54rpx;
118 }
119 }
120 }
121 96
122 .scroll-view { 97 .order {
123 // height: 1760rpx; // 测试 98 min-height: 1196rpx;
99 margin-bottom: 112rpx;
124 background: #F2F2F2; 100 background: #F2F2F2;
125 } 101 }
126 .order-hr { 102 .order-hr {
127 width: 100%; 103 width: 100%;
128 height: 1px; 104 height: 1px;
129 background-color: #E9E9E9; 105 background-color: #E9E9E9;
130 } 106 }
131 .order-time { 107 .order-time {
132 width: 100%; 108 width: 100%;
133 height: 140rpx; 109 height: 140rpx;
134 background-color: #fff; 110 background-color: #fff;
135 display: flex; 111 display: flex;
136 justify-content: center; 112 justify-content: center;
137 text { 113 text {
138 // font-family: PingFangSC-Regular; 114 // font-family: PingFangSC-Regular;
139 margin-top: 48rpx; 115 margin-top: 48rpx;
140 font-size: 14px; 116 font-size: 14px;
141 color: #333333; 117 color: #333333;
142 letter-spacing: -0.26px; 118 letter-spacing: -0.26px;
143 } 119 }
144 .p2 { 120 .p2 {
145 // font-family: DINAlternate-Bold; 121 // font-family: DINAlternate-Bold;
146 margin: 42rpx 20rpx 0 20rpx; 122 margin: 42rpx 20rpx 0 20rpx;
147 font-size: 18px; 123 font-size: 18px;
148 color: #EC5D3B; 124 color: #EC5D3B;
149 letter-spacing: -0.34px; 125 letter-spacing: -0.34px;
150 } 126 }
151 } 127 }
152 128
153 .order-user { 129 .order-user {
154 width: 670rpx; 130 width: 670rpx;
155 height: 228rpx; 131 height: 228rpx;
156 background: #FFFFFF; 132 background: #FFFFFF;
157 border-radius: 14rpx; 133 border-radius: 14rpx;
158 margin: 0 auto; 134 margin: 0 auto;
159 margin-top: 20rpx; 135 margin-top: 20rpx;
160 margin-bottom: 20rpx; 136 margin-bottom: 20rpx;
161 .order-user-head { 137 .order-user-head {
162 display: flex; 138 display: flex;
163 height: 108rpx; 139 height: 108rpx;
164 width: 100%; 140 width: 100%;
165 align-items: center; 141 align-items: center;
166 margin-left: 126rpx; 142 margin-left: 126rpx;
167 .p1 { 143 .p1 {
168 // font-family: PingFangSC-Regular; 144 // font-family: PingFangSC-Regular;
169 font-size: 14px; 145 font-size: 14px;
170 color: #333333; 146 color: #333333;
171 letter-spacing: -0.26px; 147 letter-spacing: -0.26px;
172 margin-right: 20rpx; 148 margin-right: 20rpx;
173 } 149 }
174 .p2 { 150 .p2 {
175 // font-family: PingFangSC-Regular; 151 // font-family: PingFangSC-Regular;
176 font-size: 14px; 152 font-size: 14px;
177 color: #999999; 153 color: #999999;
178 letter-spacing: -0.26px; 154 letter-spacing: -0.26px;
179 } 155 }
180 } 156 }
181 .order-user-body { 157 .order-user-body {
182 display: flex; 158 display: flex;
183 width: 100%; 159 width: 100%;
184 image{ 160 image{
185 width: 24px; 161 width: 24px;
186 height: 26px; 162 height: 26px;
187 margin: 12rpx 32rpx 0 40rpx; 163 margin: 12rpx 32rpx 0 40rpx;
188 } 164 }
189 .p3 { 165 .p3 {
190 // font-family: PingFangSC-Semibold; 166 // font-family: PingFangSC-Semibold;
191 font-size: 14px; 167 font-size: 14px;
192 color: #333333; 168 color: #333333;
193 letter-spacing: -0.26px; 169 letter-spacing: -0.26px;
194 } 170 }
195 } 171 }
196 } 172 }
197 173
198 .order-info { 174 .order-info {
199 width: 670rpx; 175 width: 670rpx;
200 background-color: #fff; 176 background-color: #fff;
201 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);
202 border-radius: 16rpx; 178 border-radius: 16rpx;
203 margin: 0 auto; 179 margin: 0 auto;
204 view{ 180 view{
205 margin-left: 40rpx; 181 margin-left: 40rpx;
206 } 182 }
207 text{ 183 text{
208 font-size: 14px; 184 font-size: 14px;
209 } 185 }
210 .order-info-head { 186 .order-info-head {
211 display: flex; 187 display: flex;
212 padding-top: 40rpx; 188 padding-top: 40rpx;
213 image{ 189 image{
214 height: 188rpx; 190 height: 188rpx;
215 width: 188rpx; 191 width: 188rpx;
216 } 192 }
217 .order-info-head-r{ 193 .order-info-head-r{
218 margin: 0; 194 margin: 0;
219 width: 368rpx; 195 width: 368rpx;
220 margin-left: 24rpx; 196 margin-left: 24rpx;
221 // margin-top: 40rpx; 197 // margin-top: 40rpx;
222 text{ 198 text{
223 display: block; 199 display: block;
224 } 200 }
201 // .arrow{
202 // width: 0;
203 // height: 0;
204 // border-left: 5px transparent;
205 // border-right: 5px transparent;
206 // border-top: 5px #979797;
207 // border-bottom: 0 transparent;
208 // border-style: solid;
209 // position: relative;
210 // // transform: scaleY(-1);
211 // }
212 // .arrow::after{
213 // content: '';
214 // position: absolute;
215 // top: -6.5px;
216 // left: -5px;
217 // border-left: 5px transparent;
218 // border-right: 5px transparent;
219 // border-top: 5px #FFFFFF;
220 // border-bottom: 0 transparent;
221 // border-style: solid;
222 // }
225 .p1 { 223 .p1 {
226 height: 40px; 224 min-height: 40px;
227 // font-family: PingFangSC-Regular; 225 // font-family: PingFangSC-Regular;
228 font-size: 14px; 226 font-size: 14px;
229 color: #333333; 227 color: #333333;
230 letter-spacing: -0.26px; 228 letter-spacing: -0.26px;
231 line-height: 18px; 229 line-height: 18px;
232 // line-height: 20px; 230 // line-height: 20px;
233 } 231 }
234 .p2 { 232 .p2 {
235 height: 34px; 233 height: 34px;
236 padding: 1px 0 3px 0; 234 padding: 1px 0 3px 0;
237 // font-family: PingFangSC-Regular; 235 // font-family: PingFangSC-Regular;
238 font-size: 12px; 236 font-size: 12px;
239 color: #999999; 237 color: #999999;
240 letter-spacing: -0.23px; 238 letter-spacing: -0.23px;
241 } 239 }
242 .p3 { 240 .p3 {
243 height: 20px; 241 height: 20px;
244 // font-family: PingFangSC-Regular; 242 // font-family: PingFangSC-Regular;
245 font-size: 14px; 243 font-size: 14px;
246 color: #FF6B4A; 244 color: #FF6B4A;
247 letter-spacing: -0.26px; 245 letter-spacing: -0.26px;
248 } 246 }
247 .p4{
248 font-size: 12px;
249 color: #999999;
250 letter-spacing: -0.23px;
251 margin-left: 10px;
252 }
249 } 253 }
250 254
251 } 255 }
252 .order-info-goodsnum { 256 // .order-info-goodsnum {
253 display: flex; 257 // display: flex;
254 align-items: center; 258 // align-items: center;
255 justify-content: flex-end; 259 // justify-content: flex-end;
256 text { 260 // text {
257 margin-right: 44rpx; 261 // margin-right: 44rpx;
258 // ont-family: PingFangSC-Regular; 262 // // ont-family: PingFangSC-Regular;
259 font-size: 12px; 263 // font-size: 12px;
260 color: #999999; 264 // color: #999999;
261 letter-spacing: -0.23px; 265 // letter-spacing: -0.23px;
262 } 266 // }
263 } 267 // }
264 .order-info-freight { 268 .order-info-freight {
265 display: block; 269 display: block;
266 margin-left: 40rpx; 270 margin-left: 40rpx;
267 margin-top: 22rpx; 271 margin-top: 22rpx;
268 .p1{ 272 .p1{
269 // font-family: PingFangSC-Regular; 273 // font-family: PingFangSC-Regular;
270 font-size: 14px; 274 font-size: 14px;
271 color: #333333; 275 color: #333333;
272 letter-spacing: -0.26px; 276 letter-spacing: -0.26px;
273 line-height: 18px; 277 line-height: 18px;
274 margin-right: 24px; 278 margin-right: 24px;
275 } 279 }
276 .p2 { 280 .p2 {
277 // font-family: PingFangSC-Regular; 281 // font-family: PingFangSC-Regular;
278 font-size: 14px; 282 font-size: 14px;
279 color: #FF6B4A; 283 color: #FF6B4A;
280 letter-spacing: -0.26px; 284 letter-spacing: -0.26px;
281 } 285 }
282 } 286 }
283 .order-info-discount { 287 .order-info-discount {
284 display: block; 288 display: block;
285 margin-left: 40rpx; 289 margin-left: 40rpx;
286 margin-top: 24rpx; 290 margin-top: 24rpx;
287 .p1 { 291 .p1 {
288 // font-family: PingFangSC-Regular; 292 // font-family: PingFangSC-Regular;
289 font-size: 14px; 293 font-size: 14px;
290 color: #333333; 294 color: #333333;
291 letter-spacing: -0.26px; 295 letter-spacing: -0.26px;
292 line-height: 18px; 296 line-height: 18px;
293 margin-right: 24px; 297 margin-right: 24px;
294 } 298 }
295 .p2 { 299 .p2 {
296 // font-family: PingFangSC-Regular; 300 // font-family: PingFangSC-Regular;
297 font-size: 14px; 301 font-size: 14px;
298 color: #FF6B4A; 302 color: #FF6B4A;
299 letter-spacing: -0.26px; 303 letter-spacing: -0.26px;
300 } 304 }
301 } 305 }
302 .order-info-price { 306 .order-info-price {
303 display: block; 307 display: block;
304 margin-left: 40rpx; 308 margin-left: 40rpx;
305 margin-top: 24rpx; 309 margin-top: 24rpx;
306 .p1 { 310 .p1 {
307 // font-family: PingFangSC-Semibold; 311 // font-family: PingFangSC-Semibold;
308 font-size: 14px; 312 font-size: 14px;
309 color: #333333; 313 color: #333333;
310 letter-spacing: -0.26px; 314 letter-spacing: -0.26px;
311 line-height: 18px; 315 line-height: 18px;
312 margin-right: 24px; 316 margin-right: 24px;
313 } 317 }
314 .p2 { 318 .p2 {
315 // font-family: PingFangSC-Semibold; 319 // font-family: PingFangSC-Semibold;
316 font-size: 14px; 320 font-size: 14px;
317 color: #FF6B4A; 321 color: #FF6B4A;
318 letter-spacing: -0.26px; 322 letter-spacing: -0.26px;
319 } 323 }
320 } 324 }
321 .order-info-num{ 325 .order-info-num{
322 display: block; 326 display: block;
323 margin-left: 40rpx; 327 margin-left: 40rpx;
324 margin-top: 44rpx; 328 margin-top: 44rpx;
325 text{ 329 text{
326 // font-family: PingFangSC-Regular; 330 // font-family: PingFangSC-Regular;
327 font-size: 12px; 331 font-size: 12px;
328 color: #999999; 332 color: #999999;
329 letter-spacing: -0.23px; 333 letter-spacing: -0.23px;
330 } 334 }
331 } 335 }
332 .order-info-time { 336 .order-info-time {
333 display: block; 337 display: block;
334 margin: 8rpx 0 48rpx 40rpx; 338 margin: 8rpx 0 48rpx 40rpx;
335 text{ 339 text{
336 // font-family: PingFangSC-Regular; 340 // font-family: PingFangSC-Regular;
337 font-size: 12px; 341 font-size: 12px;
338 color: #999999; 342 color: #999999;
339 letter-spacing: -0.23px; 343 letter-spacing: -0.23px;
340 } 344 }
341 } 345 }
342 .order-info-hr{ 346 .order-info-hr{
343 width: 520rpx; 347 width: 520rpx;
344 height: 1px; 348 height: 1px;
345 background-color: #E9E9E9; 349 background-color: #E9E9E9;
346 margin-bottom: 20rpx; 350 margin-bottom: 20rpx;
347 } 351 }
348 .order-info-contact { 352 .order-info-contact {
349 display: flex; 353 display: flex;
350 padding-bottom: 28rpx; 354 padding-bottom: 28rpx;
351 image{ 355 image{
352 width: 19px; 356 width: 19px;
353 height: 16px; 357 height: 16px;
354 } 358 }
355 text { 359 text {
356 // font-family: PingFangSC-Regular; 360 // font-family: PingFangSC-Regular;
357 margin-left: 20rpx; 361 margin-left: 20rpx;
358 font-size: 14px; 362 font-size: 14px;
359 color: #333333; 363 color: #333333;
360 letter-spacing: -0.26px; 364 letter-spacing: -0.26px;
361 line-height: 18px; 365 line-height: 18px;
362 } 366 }
363 } 367 }
364 } 368 }
src/pages/predelivery/predelivery.vue
File was created 1 <template>
2 <view class="container">
3 <view v-for="(items) in form" :key="items.key" class="order">
4 <view class="order_number">订单号:{{items.orderNum}}<span>待发货</span></view>
5 <view class="order_detail">
6 <view class="detail_img"><image v-bind:src="items.img"></image></view>
7 <view class="detail_zi">
8 <view class="zi_name">{{items.name}}</view>
9 <view class="zi_standard">规格:{{items.standard}}</view>
10 <view class="zi_preprice">¥{{items.preprice}}<span>X{{items.number}}</span></view>
11 </view>
12 </view>
13 <view class="now_price">实付:<span>¥{{items.nowprice}}</span></view>
14 <view class="clear"></view>
15 <view class="button">
16 <view class="button1">申请退款</view>
17 <view class="button2">提醒发货</view>
18 </view>
19 </view>
20 </view>
21 </template>
22
23 <script>
24 export default {
25 data(){
26 return{
27 form:[
28 {
29 key: 0,
30 name:'商品名称',
31 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
32 img: '/static/img/detail/delivery.png',
33 preprice: 180,
34 number:1,
35 orderNum: 2034867958596334,
36 nowprice: 110,
37 }
38 ]
39
40 }
41 }
42 }
43 </script>
44
45 <style lang="scss">
46 .container{
47 width: 100%;
48 height: 100%;
49 background: #F2F2F2;
50 height: 700px;
51 //要获取屏幕大小
52 }
53
54 .order{
55 background: #FFFFFF;
56 width: 90%;
57 height: 450rpx;
58 margin: 0 auto;
59 padding: 40rpx;
60 box-sizing: border-box;
61 border-radius: 5px;
62 }
63 .order_number{
64 color: #999999;
65 font-size: 12px;
66 font-family: "PingFangSC-Regular";
67 span{
68 font-family: PingFangSC-Regular;
69 font-size: 14px;
70 color: #FF6B4A;
71 letter-spacing: -0.26px;
72 line-height: 18px;
73 float: right;
74 }
75 }
76 .order_detail{
77 display: flex;
78 justify-content: space-around;
79 margin-top: 12px;
80 }
81 .detail_img image{
82 width: 188rpx;
83 height: 188rpx;
84 }
85 .detail_zi{
86 font-family: PingFangSC-Regular;
87 width: 55%;
88 height: 100%;
89 view{
90 margin-bottom: 20rpx;
91 }
92 .zi_name{
93 font-size: 14px;
94 color: #333333;
95 letter-spacing: -0.26px;
96 line-height: 18px;
97 }
98 .zi_standard{
99 font-size: 12px;
100 color: #999999 ;
101 }
102 .zi_preprice{
103 font-size: 14px;
104 color: #FF6B4A;
105 span{
106 float: right;
107 font-size: 12px;
108 color: #999999;
109 }
110 }
111 }
112 .now_price{
113 font-size: 14px;
114 color: #333333;
115 float: right;
116 span{
117 font-size: 14px;
118 color: #FF6B4A ;
119 }
120 }
121 .clear{
122 clear: both;
123 }
124 .button{
125 display: flex;
126 justify-content: flex-end;
127 margin-top: 14px;
128 view{
129 width: 156rpx;
130 height: 48rpx;
131 border-radius: 12px;
132 font-size: 12px;
133 text-align: center;
134 line-height: 20px;
135 }
136 .button1{
137 border: 1px solid #FF6B4A;
138 font-family: PingFangSC-Regular;
139 color: #FF6B4A;
140 letter-spacing: -0.23px;
141 margin-right: 30rpx;
142 }
143 .button2{
144 border: 1px solid #FF6B4A;
145 background: #FF6B4A;
146 font-family: PingFangSC-Regular;
147 color: #FFFFFF;
148 letter-spacing: -0.23px;
149
150 }
151 }
152 </style>
src/pages/refundment/refundWays.vue
File was created 1 <template>
2 <view class="container" v-bind:style="{height: curheight+'px'}">
3 <view class="refund" v-for="(items) in refund" :key="items.key">
4 <view class="detail">
5 <view class="detail_img"><image v-bind:src="items.img"></image></view>
6 <view class="detail2">
7 <view class="detail_name">{{items.name}}</view>
8 <view class="detail_standard">规格:{{items.standard}}</view>
9 <view class="detail_price">
10 <span>¥{{items.price}}</span>
11 <span>X{{items.number}}</span>
12 </view>
13 </view>
14 </view>
15 <view class="refund_price">
16 <span class="refund_price1">退款金额</span>
17 <span class="refund_price2">¥{{items.refundprice}}</span>
18 </view>
19 <view class="refund_reason">
20 <view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
21 </view>
22 <view class="refund_reason">
23 <view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
24 </view>
25 <view class="refund_reason">
26 <view>换货<image src="/static/img/detail/xiala.png"></image></view>
27 </view>
28 </view>
29 </view>
30 </template>
31
32 <script>
33 export default {
34 //获取浏览器高度
35 beforeMount(height){
36 var h = document.documentElement.clientHeight || document.body.clientHeight;
37 this.curheight = h-44;
38
39 },
40 data(){
41 return{
42 curheight:0, //浏览器高度
43 refund:[
44 {
45 key:0,
46 img:'/static/img/detail/d1.png',
47 name:'商品名称',
48 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
49 price: 180,
50 number: 1,
51 refundprice: 110,
52 refund_img:'/static/img/detail/refund_img.png',
53 }
54 ],
55 }
56 }
57 }
58 </script>
59
60 <style lang="scss">
61
62 .container{
63 background: #F2F2F2;
64 padding-top: 10px;
65 box-sizing: border-box;
66 }
67 .refund{
68 width: 90%;
69 height: 300px;
70 margin: 0 auto;
71 background: #FFFFFF;
72 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
73 border-radius: 8px;
74 padding: 14px;
75 box-sizing: border-box;
76 }
77 .detail{
78 display: flex;
79 justify-content: space-between;
80 font-family: PingFangSC-Regular;
81 margin-bottom: 20px;
82 .detail2{
83 width: 64%;
84 view{
85 margin-bottom: 8px;
86 }
87 .detail_name{
88 font-size: 14px;
89 color:#333333;
90 }
91 .detail_standard{
92 font-size: 12px;
93 color: #999999;
94 }
95 .detail_price{
96 font-size: 14px;
97 color: #999999;
98 display: flex;
99 justify-content: space-between;
100 }
101 }
102 .detail_img{
103 width: 188rpx;
104 height: 188rpx;
105 border-radius: 40px;
106 image{
107 width: 100%;
108 height: 100%;
109 }
110 }
111 }
112
113 .refund_price{
114 font-family: PingFangSC-Semibold;
115 font-size: 14px;
116 color: #333333;
117 letter-spacing: -0.26px;
118 line-height: 18px;
119 margin-bottom: 26px;
120 .refund_price1{
121 font-weight: bold;
122 margin-right: 16px;
123 }
124 .refund_price2{
125 color: #FF6B4A;
126 }
127 }
128 .refund_reason{
129 margin-top: 16px;
130 margin-bottom: 16px;
131 font-family: PingFangSC-Regular;
132 font-size: 12px;
133 color: #333333;
134 letter-spacing: -0.23px;
135 line-height: 18px;
136 view{
137 display: inline-block;
138 font-size: 12px;
139 color: #333333;
140 letter-spacing: -0.23px;
141 line-height: 18px;
142 width: 90%;
143 image{
144 width: 30rpx;
145 height: 24rpx;
146 float: right;
147 }
148 }
149 }
150
151
152 </style>
src/pages/user/user.vue
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view class="content"> 3 <view 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="../../static/img/detail/d10.png" mode="aspectFill"></image>
7 <view class="infoText"> 7 <view class="infoText">
8 <text class="userName">{{userName}}</text> 8 <text class="userName">{{userName}}</text>
9 <text class="nickName">用户名:骆驼不死的祥子</text> 9 <text class="nickName">用户名:骆驼不死的祥子</text>
10 </view> 10 </view>
11 </view> 11 </view>
12 <view class="service"> 12 <view class="service">
13 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 13 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
14 </view> 14 </view>
15 </view> 15 </view>
16 <view class="myOrder"> 16 <view class="myOrder">
17 <view class="orderHeader"> 17 <view class="orderHeader">
18 <text>全部订单</text> 18 <text>全部订单</text>
19 <view class="btn" @click="toMyOrder"> 19 <view class="btn" @click="toMyOrder">
20 全部 20 全部
21 <image src="../../static/right.png" mode="aspectFill"></image> 21 <image src="../../static/right.png" mode="aspectFill"></image>
22 </view> 22 </view>
23 </view> 23 </view>
24 <view class="orderBody"> 24 <view class="orderBody">
25 <view class="item,waitPay" @click=toMyOrderPaying> 25 <view class="item waitPay" @click="toMyOrderPaying">
26 <image src="../../static/waitPay.png" mode="aspectFill"></image> 26 <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
27 <text>待付款</text> 27 <text>待付款</text>
28 </view> 28 </view>
29 <view class="item,waitDeliver" @click=toPredelivery> 29 <view class="item waitDeliver" @click="toPredelivery" >
30 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 30 <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
31 <text>待发货</text> 31 <text>待发货</text>
32 </view> 32 </view>
33 <view class="item,waitReceive"> 33 <view class="item waitReceive" @click="torefunProgress">
34 <image src="../../static/waitReceive.png" mode="aspectFill"></image> 34 <image src="../../static/waitReceive.png" mode="aspectFill"></image>
35 <text>待收货</text> 35 <text>待收货</text>
36 </view> 36 </view>
37 <view class="item,service"> 37 <view class="item service" @click="torefundment">
38 <image src="../../static/service.png" mode="aspectFill"></image> 38 <image src="../../static/service.png" mode="aspectFill"></image>
39 <text>退换/售后</text> 39 <text>退换/售后</text>
40 </view> 40 </view>
41 </view> 41 </view>
42 </view> 42 </view>
43 <view class="recommend"> 43 <view class="recommend">
44 <view class="title"> 44 <view class="title">
45 <view class="line"></view> 45 <view class="line"></view>
46 <view class="text">精选推荐</view> 46 <view class="text">精选推荐</view>
47 <view class="line"></view> 47 <view class="line"></view>
48 </view> 48 </view>
49 <!-- 商品列表 --> 49 <!-- 商品列表 -->
50 <view class="goods-list"> 50 <view class="goods-list">
51 <view class="product-list"> 51 <view class="product-list">
52 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> 52 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)">
53 <Card :goods = "goods"></Card> 53 <Card :goods = "goods"></Card>
54 </view> 54 </view>
55 </view> 55 </view>
56 <view class="loading-text">{{loadingText}}</view> 56 <view class="loading-text">{{loadingText}}</view>
57 </view> 57 </view>
58 </view> 58 </view>
59 </view> 59 </view>
60 60
61 </view> 61 </view>
62 </template> 62 </template>
63 63
64 <script> 64 <script>
65 import Card from "@/components/CommodityCard/CommodityCard.vue" 65 import Card from "@/components/CommodityCard/CommodityCard.vue"
66 export default { 66 export default {
67 components: { 67 components: {
68 'Card':Card 68 'Card':Card
69 }, 69 },
70 data() { 70 data() {
71 return { 71 return {
72 72
73 //商品数据 73 //商品数据
74 goodsList:[ 74 goodsList:[
75 { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, 75 { 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人浏览' }, 76 { 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人浏览' }, 77 { 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人浏览' }, 78 { 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人浏览' }, 79 { 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人浏览' }, 80 { 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人浏览' }, 81 { 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人浏览' }, 82 { 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人浏览' }, 83 { 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人浏览' } 84 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }
85 ], 85 ],
86 headerphoto:'', 86 headerphoto:'',
87 userName:'Adam' 87 userName:'Adam'
88 } 88 }
89 }, 89 },
90 onLoad() { 90 onLoad() {
91 91
92 }, 92 },
93 methods: { 93 methods: {
94 toMyOrder(){ 94 toMyOrder(){
95 uni.navigateTo({ 95 uni.navigateTo({
96 url: '../myOrder/myOrder', 96 url: '../myOrder/myOrder?current=0',
97 success: res => {}, 97 success: res => {},
98 fail: () => {}, 98 fail: () => {},
99 complete: () => {} 99 complete: () => {}
100 }); 100 });
101 }, 101 },
102 toPredelivery(){ 102 toPredelivery(){
103 uni.navigateTo({ 103 uni.navigateTo({
104 url: '../Predelivery/Predelivery', 104 url: '../myOrder/myOrder?current=2',
105 success: res => {}, 105 success: res => {},
106 fail: () => {}, 106 fail: () => {},
107 complete: () => {} 107 complete: () => {}
108 }); 108 });
109 }, 109 },
110 toMyOrderPaying(){ 110 toMyOrderPaying(){
111 uni.navigateTo({ 111 uni.navigateTo({
112 url: '../myorder-paying/myorder-paying', 112 url: '../myOrder/myOrder?current=1',
113 success: res => {}, 113 success: res => {},
114 fail: () => {}, 114 fail: () => {},
115 complete: () => {} 115 complete: () => {}
116 }); 116 });
117 },
118 torefundment(){
119 uni.navigateTo({
120 url:'../refundment/refundment',
121 })
122 },
123 torefunProgress(){
124 uni.navigateTo({
125 url:'../refundProgress/refundProgress'
126 })
117 } 127 }
118 } 128 }
119 } 129 }
120 </script> 130 </script>
121 131
122 <style lang="scss"> 132 <style lang="scss">
123 .warp{ 133 .warp{
124 font-size: 24rpx; 134 font-size: 24rpx;
125 background-color: #f2f2f2; 135 background-color: #f2f2f2;
126 height: 100vh; 136 height: 100vh;
127 } 137 }
128 .content { 138 .content {
129 display: flex; 139 display: flex;
130 flex-direction: column; 140 flex-direction: column;
131 align-items: center; 141 align-items: center;
132 justify-content: center; 142 justify-content: center;
133 background-color: #F2F2F2; 143 background-color: #F2F2F2;
134 } 144 }
135 .userInfo{ 145 .userInfo{
136 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); 146 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
137 width: 100%; 147 width: 100%;
138 height: 240rpx; 148 height: 240rpx;
139 color: #FFFFFF; 149 color: #FFFFFF;
140 padding: 60rpx 82rpx 80rpx 44rpx; 150 padding: 60rpx 82rpx 80rpx 44rpx;
141 box-sizing: border-box; 151 box-sizing: border-box;
142 display: flex; 152 display: flex;
143 flex-direction: row; 153 flex-direction: row;
144 justify-content: space-between; 154 justify-content: space-between;
145 align-items: flex-start; 155 align-items: flex-start;
146 .info{ 156 .info{
147 display: flex; 157 display: flex;
148 flex-direction: row; 158 flex-direction: row;
149 justify-content: space-between; 159 justify-content: space-between;
150 align-items: center; 160 align-items: center;
151 image{ 161 image{
152 border-radius: 50rpx; 162 border-radius: 50rpx;
153 height: 100rpx ; 163 height: 100rpx ;
154 width: 100rpx; 164 width: 100rpx;
155 margin-right: 40rpx; 165 margin-right: 40rpx;
156 } 166 }
157 .infoText{ 167 .infoText{
158 display: flex; 168 display: flex;
159 flex-direction: column; 169 flex-direction: column;
160 justify-content: space-between; 170 justify-content: space-between;
161 align-items: flex-scetart; 171 align-items: flex-scetart;
162 .userName{ 172 .userName{
163 font-size: 18px; 173 font-size: 18px;
164 color: #FFFFFF; 174 color: #FFFFFF;
165 margin-bottom: 8rpx; 175 margin-bottom: 8rpx;
166 } 176 }
167 .nickName{ 177 .nickName{
168 font-size: 12px; 178 font-size: 12px;
169 color: #FFFFFF; 179 color: #FFFFFF;
170 } 180 }
171 } 181 }
172 } 182 }
173 .service{ 183 .service{
174 image{ 184 image{
175 height: 36rpx; 185 height: 36rpx;
176 width: 36rpx; 186 width: 36rpx;
177 } 187 }
178 } 188 }
179 } 189 }
180 .myOrder{ 190 .myOrder{
181 width: 100%; 191 width: 100%;
182 height: 296rpx; 192 height: 296rpx;
183 margin-top: 20rpx; 193 margin-top: 20rpx;
184 margin-bottom: 20rpx; 194 margin-bottom: 20rpx;
185 padding: 0 40rpx; 195 padding: 0 40rpx;
186 box-sizing: border-box; 196 box-sizing: border-box;
187 background: #FFFFFF; 197 background: #FFFFFF;
188 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 198 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
189 border-radius: 6px; 199 border-radius: 6px;
190 border-radius: 6px; 200 border-radius: 6px;
191 display: flex; 201 display: flex;
192 flex-direction: column; 202 flex-direction: column;
193 justify-content: space-around; 203 justify-content: space-around;
194 align-items: center; 204 align-items: center;
195 .orderHeader{ 205 .orderHeader{
196 width: 100%; 206 width: 100%;
197 height: 100rpx; 207 height: 100rpx;
198 display: flex; 208 display: flex;
199 flex-direction: row; 209 flex-direction: row;
200 justify-content: space-between; 210 justify-content: space-between;
201 align-items: center; 211 align-items: center;
202 border-bottom: 1px solid #E9E9E9;; 212 border-bottom: 1px solid #E9E9E9;;
203 font-weight: bold; 213 font-weight: bold;
204 font-size: 18px; 214 font-size: 18px;
205 color: #333333; 215 color: #333333;
206 .btn{ 216 .btn{
207 font-size: 12px; 217 font-size: 12px;
208 color: #999999; 218 color: #999999;
209 image{ 219 image{
210 margin-left: 20rpx; 220 margin-left: 20rpx;
211 height: 16rpx; 221 height: 16rpx;
212 width: 8rpx; 222 width: 8rpx;
213 } 223 }
214 } 224 }
215 } 225 }
216 .orderBody{ 226 .orderBody{
217 width: 100%; 227 width: 100%;
218 display: flex; 228 display: flex;
219 flex-direction: row; 229 flex-direction: row;
220 justify-content: space-between; 230 justify-content: space-between;
221 align-items: center; 231 align-items: center;
222 .item{ 232 .item{
223 display: flex; 233 display: flex;
224 flex-direction: column; 234 flex-direction: column;
225 align-items: center; 235 align-items: center;
226 image{ 236 image{
227 width: 46rpx; 237 width: 46rpx;
228 height: 46rpx; 238 height: 46rpx;
229 } 239 }
230 text{ 240 text{
231 margin-top: 24rpx; 241 margin-top: 24rpx;
232 font-size: 12px; 242 font-size: 12px;
233 color: #333333; 243 color: #333333;
234 } 244 }
235 } 245 }
236 } 246 }
237 } 247 }
238 .recommend{ 248 .recommend{
239 background: #FFFFFF; 249 background: #FFFFFF;
240 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 250 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
241 border-radius: 6px; 251 border-radius: 6px;
242 border-radius: 6px; 252 border-radius: 6px;
253 width: 100%;
243 .title{ 254 .title{
244 display: flex; 255 display: flex;
245 flex-direction: row; 256 flex-direction: row;
246 align-items: center; 257 align-items: center;
247 justify-content: space-between; 258 justify-content: space-between;
248 padding: 20rpx 40rpx; 259 padding: 20rpx 40rpx;
249 .line{ 260 .line{
250 width: 264rpx; 261 width: 264rpx;
251 height: 1rpx; 262 height: 1rpx;
252 border-bottom: 1px solid #EAEAEA; 263 border-bottom: 1px solid #EAEAEA;
253 } 264 }
254 .text{ 265 .text{
255 font-family: PingFangSC-Medium; 266 font-family: PingFangSC-Medium;
256 font-size: 14px; 267 font-size: 14px;
257 color: #333333; 268 color: #333333;
258 letter-spacing: -0.26px; 269 letter-spacing: -0.26px;
259 text-align: justify; 270 text-align: justify;
260 line-height: 24px; 271 line-height: 24px;
261 } 272 }
262 } 273 }
263 .goods-list{ 274 .goods-list{
264 .loading-text{ 275 .loading-text{
265 width: 100%; 276 width: 100%;
266 display: flex; 277 display: flex;
267 justify-content: center; 278 justify-content: center;
268 align-items: center; 279 align-items: center;
269 height: 30px; 280 height: 30px;
270 color: #979797; 281 color: #979797;
271 font-size: 12px; 282 font-size: 12px;
272 } 283 }
273 .product-list{ 284 .product-list{
274 width: 92%; 285 width: 92%;
275 padding: 0 4% 3vw 4%; 286 padding: 0 4% 3vw 4%;
276 display: flex; 287 display: flex;
277 justify-content: space-between; 288 justify-content: space-between;
278 flex-wrap: wrap; 289 flex-wrap: wrap;
279 .product{ 290 .product{
280 width: 48%; 291 width: 48%;
281 margin: 0 0 20rpx 0; 292 margin: 0 0 20rpx 0;
282 background: #FFFFFF; 293 background: #FFFFFF;
283 border: 1px solid #F2F2F2; 294 border: 1px solid #F2F2F2;
284 } 295 }
285 } 296 }
286 } 297 }
287 } 298 }
288 299
289 </style> 300 </style>
290 301
src/static/img/detail/Kuang/g1.png

9.28 KB

src/static/img/detail/Kuang/g2.png

8.61 KB

src/static/img/detail/Kuang/g3.png

7.95 KB

src/static/img/detail/Kuang/s1.png

7.61 KB

src/static/img/detail/Kuang/s2.png

7.83 KB

src/static/img/detail/Kuang/s3.png

7.28 KB

src/static/img/detail/Kuang/s4.png

7.69 KB

src/static/img/detail/Kuang/s5.png

7.39 KB

src/static/img/detail/Kuang/s6.png

7.27 KB

src/static/img/detail/Kuang/s7.png

7.6 KB

src/static/img/detail/Kuang/sun_jp.png

2.5 KB

src/static/img/detail/sun_glass.png

25.2 KB

src/store/modules/categoryOrder.js
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 category
6 } = urlAlias;
7
8 const state = {
9 categoryList: [],
10 };
11
12 const mutations = {
13 INIT: (state, categoryList) => {
14 state.categoryList = categoryList;
15 },
16 };
17
18 const actions = {
19 fetch({ commit }, param) {
20 request({
21 url: category,
22 success: (res) => {
23 commit('INIT', res.data.data)
24 },
25 fail: (res) => {
26 console.log("fail status === > ", res);
27 },
28 complete: (res) => {
29 console.log("complete status === > ", res);
30 },
31 })
32 },
33 };
34
35 export default {
36 namespaced: true,
37 state,
38 mutations,
39 actions,
40 };
41
src/store/modules/myOrder.js
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 orderList
6 } = urlAlias;
7
8 const data = {
9 data: [
10 {
11 finished_time: null,
12 is_refound: "0",
13 mch_id: "1436019502",
14 money_of_dcw: "0",
15 money_of_partner: "0",
16 money_of_shop: "0",
17 orderJudge: false,
18 order_info: {
19 address:{
20 cityName: "镇江市",
21 countyName: "丹阳市",
22 detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
23 errMsg: "chooseAddress:ok",
24 nationalCode: "321181",
25 postalCode: "212300",
26 provinceName: "江苏省",
27 telNumber: "15896379277",
28 userName: "点餐汪客服",
29 },
30 cartinfo:['11', '12'],
31 keyname: "1_1587129366",
32 lefttime: 179995,
33 list:[
34 {
35 cart_id: "11",
36 imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
37 img_index_url: null,
38 memo: "志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流,01-8701",
39 mp_id: "1",
40 nowPrice: 100,
41 num: "2",
42 oldPrice: "0",
43 p_discount: "1",
44 p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流",
45 p_root_index: "1",
46 p_sale_price: "0",
47 peopleName: "me",
48 pics: '',
49 pid: "4",
50 sk_id: "38",
51 },
52 ],
53 orderDesc: "总共包括有:01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流在内的1件商品",
54 total_fee: 100
55 },
56 partner_uid: "0",
57 pay_cate: "2020",
58 pay_id: "3",
59 pay_time: "2020-04-17 21:16:12",
60 pay_wood_desc: "在【非常戴镜】的微信付款凭证",
61 pay_wood_id: "fcdj-1-1_1587129366",
62 prepay_id: "wx172116124528226bf1a8adad1662456500",
63 re_check_staus: "0",
64 shopid: "0",
65 split_userid: "0",
66 status: "1",
67 total_fee: "100",
68 uid: "1",
69 }
70 ],
71 msg: "订单列表",
72 status: 0,
73 }
74
75 const state = {
76 orderList: [],
77 };
78
79 const mutations = {
80 INIT: (state, data) => {
81 state.orderList = data;
82 },
83 };
84
85 const actions = {
86 getList({ commit }, param) {
87 request({
88 url: orderList,
89 data: param,
90 success: (res) => {
91 const resData = {
92 ...res,
93 data,
94 }
95 console.log('data.data', resData.data.data);
96 commit("INIT", resData.data.data);
97 },
98 })
99 }
100 }
101
102 export default {
103 namespaced: true,
104 state,
105 mutations,
106 actions,
107 }
src/store/modules/test.js
1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 shopList
6 } = urlAlias;
7
1 const state = { 8 const state = {
2 list: [], 9 list: [],
3 }; 10 };
4 11
5 const mutations = { 12 const mutations = {
6 INIT: (state, list) => { 13 INIT: (state, list) => {
7 state.list = list; 14 state.list = list;
8 }, 15 },
9 }; 16 };
10 17
11 const actions = { 18 const actions = {
12 fetch({ commit }, param) { 19 fetch({ commit }, param) {
13 uni 20 request({
14 .request({ 21 url: shopList,
15 url: "https://api.glass.xiuyetang.com/app/prod/list", 22 success: (res) => {
16 method: "post", 23 commit('INIT', res.data.data)
17 data: {}, 24 },
18 header: { 25 fail: (res) => {
19 "Content-Type": "application/x-www-form-urlencoded", 26 console.log("fail status === > ", res);
20 }, 27 },
21 timeout: 3000, 28 complete: (res) => {
22 withCredentials: false, 29 console.log("complete status === > ", res);
23 success: (res) => { 30 },
24 commit('INIT', res.data.data) 31 })
25 }, 32 // uni
26 fail: (res) => { 33 // .request({
27 console.log("fail status === > ", res); 34 // url: "https://api.glass.xiuyetang.com/app/prod/list",
28 }, 35 // method: "post",
29 complete: (res) => { 36 // data: {},
30 console.log("complete status === > ", res); 37 // header: {
31 }, 38 // "Content-Type": "application/x-www-form-urlencoded",
32 }); 39 // },
40 // timeout: 3000,
41 // withCredentials: false,
42 // success: (res) => {
43 // commit('INIT', res.data.data)
44 // },
45 // fail: (res) => {
46 // console.log("fail status === > ", res);
47 // },
48 // complete: (res) => {
49 // console.log("complete status === > ", res);
50 // },
51 // });
33 }, 52 },
34 }; 53 };
35 54
36 export default { 55 export default {
37 namespaced: true, 56 namespaced: true,
38 state, 57 state,
39 mutations, 58 mutations,
40 actions, 59 actions,
41 }; 60 };
42 61
src/store/request.js
File was created 1 const DOMAIN = 'https://api.glass.xiuyetang.com';
2
3 export default async function request({
4 url,
5 method = "post",
6 data = {},
7 header = {
8 "Content-Type": "application/x-www-form-urlencoded",
9 },
10 timeout = 3000,
11 withCredentials = false, // 跨域请求时是否携带凭证(cookies)
12 // sslVerify: true, // 验证 ssl 证书
13 success,
14 fail = (res) => {
15 console.log("fail status === > ", res);
16 },
17 complete = (res) => {
18 console.log("complete status === > ", res);
19 },
20 }) {
21 console.log("DOMAIN", DOMAIN, url);
22 uni
23 .request({
24 url: DOMAIN + url,
25 method,
26 data,
27 header,
28 timeout,
29 withCredentials,
30 success,
31 fail,
32 complete,
33 })
34 }
File was created 1 const urlAlias = {
2 // 获取首页商品列表
3 shopList: '/app/prod/list',
4
5 // 获取首页商品列表
6 category: '/app/prod/category',
7 }
8
9 export default urlAlias;
10