Adam / gulu-vue

Download as
Browse Code »

Commit a3d2beaa8c5eb40e1af47250587d8ff41f577fcc

Authored by 范牧
1 parent 5638d36da2
Exists in master

立即支付功能

Showing 7 changed files with 723 additions and 373 deletions   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @a3d2bea
1 <template> 1 <template>
2 <view 2 <view
3 class="card" 3 class="card"
4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" 4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5 > 5 >
6 <image 6 <image
7 mode="widthFix" 7 mode="widthFix"
8 :src="goods.imgurl?goods.imgurl:goods.pic" 8 :src="goods.imgurl?goods.imgurl:goods.pic"
9 ></image> 9 ></image>
10 <view class="name">{{goods.name?goods.name:goods.p_name}}</view> 10 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
11 <view class="info"> 11 <view class="info">
12 <view class="priceBox"> 12 <view class="priceBox">
13 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view> 13 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>
14 <view class="originCost"> 14 <view class="originCost">
15 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} --> 15 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->
16 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}} 16 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
17 </view> 17 </view>
18 </view> 18 </view>
19 <view class="trade_num">{{goods.trade_num}}人购买</view> 19 <view class="trade_num">{{goods.trade_num}}人购买</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </template> 22 </template>
23 23
24 <script> 24 <script>
25 export default { 25 export default {
26 props: { 26 props: {
27 /** 27 /**
28 * 商品数据 28 * 商品数据
29 */ 29 */
30 goods: { 30 goods: {
31 id: Number, 31 id: Number,
32 imgurl: String, 32 imgurl: String,
33 name: String, 33 name: String,
34 rsSon: Object, 34 rsSon: Object,
35 originCost: String, 35 originCost: String,
36 price: String, 36 price: String,
37 trade_num: String, 37 trade_num: String,
38 goodType: String, 38 goodType: String,
39 }, 39 },
40 40
41 }, 41 },
42 created () { 42 created () {
43 }, 43 },
44 data () { 44 data () {
45 return { 45 return {
46 46
47 } 47 }
48 }, 48 },
49 methods: { 49 methods: {
50 toGoods (id, sk_id) { 50 toGoods (id, skId) {
51 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id) 51 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId)
52 uni.navigateTo({ 52 uni.navigateTo({
53 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, 53 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId,
54 success: res => {}, 54 success: res => {},
55 fail: () => {}, 55 fail: () => {},
56 complete: () => {}, 56 complete: () => {},
57 }) 57 })
58 }, 58 },
59 }, 59 },
60 } 60 }
61 </script> 61 </script>
62 62
63 <style lang="scss"> 63 <style lang="scss">
64 image { 64 image {
65 width: 100%; 65 width: 100%;
66 height: 120rpx; 66 height: 120rpx;
67 } 67 }
68 .name { 68 .name {
69 width: 92%; 69 width: 92%;
70 height: 54rpx; 70 height: 54rpx;
71 padding: 5px 4%; 71 padding: 5px 4%;
72 display: -webkit-box; 72 display: -webkit-box;
73 -webkit-box-orient: vertical; 73 -webkit-box-orient: vertical;
74 -webkit-line-clamp: 2; 74 -webkit-line-clamp: 2;
75 text-align: justify; 75 text-align: justify;
76 overflow: hidden; 76 overflow: hidden;
77 font-size: 24rpx; 77 font-size: 24rpx;
78 color: #333333; 78 color: #333333;
79 } 79 }
80 .info { 80 .info {
81 display: flex; 81 display: flex;
82 justify-content: space-between; 82 justify-content: space-between;
83 align-items: center; 83 align-items: center;
84 width: 92%; 84 width: 92%;
85 padding: 5px 4% 5px 4%; 85 padding: 5px 4% 5px 4%;
86 .priceBox { 86 .priceBox {
87 display: flex; 87 display: flex;
88 justify-content: space-between; 88 justify-content: space-between;
89 align-items: center; 89 align-items: center;
90 .price { 90 .price {
91 color: #eb5d3b; 91 color: #eb5d3b;
92 font-size: 28rpx; 92 font-size: 28rpx;
93 font-weight: 600; 93 font-weight: 600;
94 margin-right: 10rpx; 94 margin-right: 10rpx;
95 } 95 }
96 .originCost { 96 .originCost {
97 text-decoration: line-through; 97 text-decoration: line-through;
98 color: #999999; 98 color: #999999;
99 font-size: 20rpx; 99 font-size: 20rpx;
100 } 100 }
101 } 101 }
102 .trade_num { 102 .trade_num {
103 color: #999999; 103 color: #999999;
104 font-size: 20rpx; 104 font-size: 20rpx;
105 } 105 }
106 } 106 }
107 </style> 107 </style>
108 108
src/pages/cart/cart.vue
Diff comments   View file @a3d2bea
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <block v-if="cartList.length==0"> 3 <block v-if="cartList.length==0">
4 4
5 </block> 5 </block>
6 <block v-else> 6 <block v-else>
7 <view class="card"> 7 <view class="card">
8 <view class="cardHeader"> 8 <view class="cardHeader">
9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 9 <view
10 @tap="pChange(pIsoPen)"> 10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11 <span class="correct"></span> 11 @tap="pChange(pIsoPen)"
12 </view> 12 >
13 <image src="../../static/store.png" mode="aspectFill"></image> 13 <span class="correct"></span>
14 <text>非常戴镜</text> 14 </view>
15 </view> 15 <image
16 src="../../static/store.png"
17 mode="aspectFill"
18 ></image>
19 <text>非常戴镜</text>
20 </view>
16 21
17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" 22 <view
18 @longpress="delCart(item.cart_id,index)"> 23 class="cardBody"
19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" 24 v-for="(item,index) in cartList"
20 @tap="Change(childIsOpen[index],index)"> 25 :key="item.cart_id"
21 <span class="correct"></span> 26 @longpress="delCart(item.cart_id,index)"
22 </view> 27 >
23 <view class="imageWrap"> 28 <view
24 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 29 v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
25 </view> 30 @tap="Change(childIsOpen[index],index)"
26 <view class="goodInfo"> 31 >
27 <!-- <view class="imageWrap"> 32 <span class="correct"></span>
33 </view>
34 <view class="imageWrap">
35 <image
36 :src="item.img_index_url"
37 mode="aspectFit"
38 style="width: 188rpx;height: 168rpx;"
39 ></image>
40 </view>
41 <view class="goodInfo">
42 <!-- <view class="imageWrap">
28 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 43 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
29 </view> --> 44 </view> -->
30 <view class="infoRight"> 45 <view class="infoRight">
31 <view class="goodName" @tap="toGoods(item.pid,item.sk_id)">{{item.p_name}}</view> 46 <view
32 <!-- <view class="describ"> --> 47 class="goodName"
33 <uni-collapse accordion="true" > 48 @tap="toGoods(item.pid,item.sk_id)"
34 <uni-collapse-item showAnimation='true' 49 >{{item.p_name}}</view>
35 :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'" > 50 <!-- <view class="describ"> -->
36 <text class="describ"> 51 <uni-collapse accordion="true">
37 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> 52 <uni-collapse-item
38 {{tag.label+`&nbsp;&nbsp;`}} 53 showAnimation='true'
39 </block> 54 :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'"
40 </text> 55 >
41 <!-- <text> 56 <text class="describ">
57 <block
58 v-for="tag in item.tag.prod_tag_fun"
59 :key="tag.value"
60 >
61 {{tag.label+`&nbsp;&nbsp;`}}
62 </block>
63 </text>
64 <!-- <text>
42 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> 65 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
43 {{tag.label+`&nbsp;&nbsp;`}} 66 {{tag.label+`&nbsp;&nbsp;`}}
44 </block> 67 </block>
45 </text> --> 68 </text> -->
46 </uni-collapse-item> 69 </uni-collapse-item>
47 </uni-collapse> 70 </uni-collapse>
48 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> 71 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
49 <!-- </view> --> 72 <!-- </view> -->
50 <view class="priceBox"> 73 <view class="priceBox">
51 <view class="price">￥{{item.nowPrice*item.num}}</view> 74 <view class="price">￥{{item.nowPrice*item.num}}</view>
52 <text class="maxCount">(限购{{maxCount}}副)</text> 75 <text class="maxCount">(限购{{maxCount}}副)</text>
53 <view class="counter"> 76 <view class="counter">
54 <view class="btn" disabled="this.addDisabled" type="default" 77 <view
55 @tap="counter(index,false,item)">-</view> 78 class="btn"
56 <text>{{item.num}}</text> 79 disabled="this.addDisabled"
57 <view class="btn" disabled="this.desDisabled" type="default" 80 type="default"
58 @tap="counter(index,true,item)">+</view> 81 @tap="counter(index,false,item)"
59 </view> 82 >-</view>
60 </view> 83 <text>{{item.num}}</text>
61 </view> 84 <view
62 </view> 85 class="btn"
63 </view> 86 disabled="this.desDisabled"
64 </view> 87 type="default"
65 </block> 88 @tap="counter(index,true,item)"
66 <view class="footer"> 89 >+</view>
67 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 90 </view>
68 <view class="footerRight"> 91 </view>
69 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> 92 </view>
70 <view class="paybtn" >立即结算</view> 93 </view>
71 </navigator> 94 </view>
72 </view> 95 </view>
73 </view> 96 </block>
97 <view class="footer">
98 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
99 <view class="footerRight">
100 <navigator
101 url="/pages/confirmOrder/confirmOrder"
102 hover-class="navigator-hover"
103 >
104 <view class="paybtn">立即结算</view>
105 </navigator>
106 </view>
107 </view>
74 108
75 </view> 109 </view>
76 </template> 110 </template>
77 111
78 <script> 112 <script>
79 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 113 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
80 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 114 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
81 import store from '@/store' 115 import store from '@/store'
82 116
83 export default { 117 export default {
84 components: { UniCollapse, UniCollapseItem }, 118 components: { UniCollapse, UniCollapseItem },
85 data() { 119 data() {
86 return { 120 return {
87 totalPrice: 0, 121 totalPrice: 0,
88 pIsoPen: false, 122 pIsoPen: false,
89 // childIsOpen:[], 123 // childIsOpen:[],
90 maxCount: 20 124 maxCount: 20,
91 } 125 }
92 }, 126 },
93 computed: { 127 computed: {
94 128
95 cartList() { 129 cartList() {
96 // console.log('cart-list', this.$store.state.cart.cartList); 130 // console.log('cart-list', this.$store.state.cart.cartList);
97 return this.$store.state.cart.cartList 131 return this.$store.state.cart.cartList
98 }, 132 },
99 childIsOpen() { 133 childIsOpen() {
100 const temp = [] 134 const temp = []
101 temp.length = this.$store.state.cart.cartList.length 135 temp.length = this.$store.state.cart.cartList.length
102 for (let i = 0; i < temp.length; i++) { 136 for (let i = 0; i < temp.length; i++) {
103 temp[i] = false 137 temp[i] = false
104 } 138 }
105 console.log('this.childisOPne===>', temp) 139 console.log('this.childisOPne===>', temp)
106 return temp 140 return temp
107 } 141 },
108 }, 142 },
109 onLoad: function() { 143 onLoad: function() {
110 // store.dispatch('cart/addCart', { 144 // store.dispatch('cart/addCart', {
111 // uid: this.$store.state.user.userInfo.uid, 145 // uid: this.$store.state.user.userInfo.uid,
112 // openid: this.$store.state.user.userInfo.openid, 146 // openid: this.$store.state.user.userInfo.openid,
113 // mp_id: 7, 147 // mp_id: 7,
114 // sk_id: 7, 148 // sk_id: 7,
115 // num: 1, 149 // num: 1,
116 // pid: 8, 150 // pid: 8,
117 // price: 128, 151 // price: 128,
118 // checkedSKU:{}, 152 // checkedSKU:{},
119 // }) 153 // })
120 store.dispatch('cart/getCartList', { 154 store.dispatch('cart/getCartList', {
121 uid: this.$store.state.user.userInfo.uid // 用户id 155 uid: this.$store.state.user.userInfo.uid, // 用户id
122 }) 156 })
123 }, 157 },
124 158
125 methods: { 159 methods: {
126 160
127 toGoods(id, sk_id) { 161 toGoods(id, sk_id) {
128 console.log('cart-list', this.$store.state.cart.cartList); 162 console.log('cart-list', this.$store.state.cart.cartList)
129 console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id) 163 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
130 uni.navigateTo({ 164 uni.navigateTo({
131 url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id, 165 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
132 success: res => {}, 166 success: res => {},
133 fail: () => {}, 167 fail: () => {},
134 complete: () => {} 168 complete: () => {},
135 }) 169 })
136 // uni.navigateTo({ 170 // uni.navigateTo({
137 // url: '../frameDetail/frameDetail?oderId=' + id, 171 // url: '../frameDetail/frameDetail?oderId=' + id,
138 // success: res => {}, 172 // success: res => {},
139 // fail: () => {}, 173 // fail: () => {},
140 // complete: () => {} 174 // complete: () => {}
141 // }) 175 // })
142 // console.log('toGoods =====> id:' + id + '======>type:' + type) 176 // console.log('toGoods =====> id:' + id + '======>type:' + type)
143 // switch (type) { 177 // switch (type) {
144 // case 1: 178 // case 1:
145 // uni.navigateTo({ 179 // uni.navigateTo({
146 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 180 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
147 // success: res => {}, 181 // success: res => {},
148 // fail: () => {}, 182 // fail: () => {},
149 // complete: () => {} 183 // complete: () => {}
150 // }) 184 // })
151 // break 185 // break
152 // case 2: 186 // case 2:
153 // uni.navigateTo({ 187 // uni.navigateTo({
154 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 188 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
155 // success: res => {}, 189 // success: res => {},
156 // fail: () => {}, 190 // fail: () => {},
157 // complete: () => {} 191 // complete: () => {}
158 // }) 192 // })
159 // break 193 // break
160 // case 3: 194 // case 3:
161 // uni.navigateTo({ 195 // uni.navigateTo({
162 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 196 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
163 // success: res => {}, 197 // success: res => {},
164 // fail: () => {}, 198 // fail: () => {},
165 // complete: () => {} 199 // complete: () => {}
166 // }) 200 // })
167 // break 201 // break
168 // case 4: 202 // case 4:
169 // uni.navigateTo({ 203 // uni.navigateTo({
170 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 204 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
171 // success: res => {}, 205 // success: res => {},
172 // fail: () => {}, 206 // fail: () => {},
173 // complete: () => {} 207 // complete: () => {}
174 // }) 208 // })
175 // break 209 // break
176 // default : 210 // default :
177 // break 211 // break
178 // } 212 // }
179 }, 213 },
180 214
181 counter(index, isadd, item) { 215 counter(index, isadd, item) {
182 // console.log('===>>counter ===>num',num) 216 // console.log('===>>counter ===>num',num)
183 // console.log('===>>counter ===>isadd',isadd) 217 // console.log('===>>counter ===>isadd',isadd)
184 console.log('item=====>',item) 218 console.log('item=====>', item)
185 console.log('num=====>',item.num) 219 console.log('num=====>', item.num)
186 let nums = parseInt(item.num) 220 const nums = parseInt(item.num)
187 if (isadd) { 221 if (isadd) {
188 if (nums >= this.maxCount) { 222 if (nums >= this.maxCount) {
189 this.addDisabled = true 223 this.addDisabled = true
190 } else { 224 } else {
191 this.addDisabled = true 225 this.addDisabled = true
192 // 修改num 226 // 修改num
193 if (this.childIsOpen[index]) { 227 if (this.childIsOpen[index]) {
194 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice 228 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
195 } 229 }
196 store.dispatch('cart/modiCart', { 230 store.dispatch('cart/modiCart', {
197 uid: this.$store.state.user.userInfo.uid, 231 uid: this.$store.state.user.userInfo.uid,
198 openid: this.$store.state.user.userInfo.openid, 232 openid: this.$store.state.user.userInfo.openid,
199 mp_id: item.mp_id, 233 mp_id: item.mp_id,
200 sk_id: item.sk_id, 234 sk_id: item.sk_id,
201 price: item.nowPrice, 235 price: item.nowPrice,
202 pid: item.pid, 236 pid: item.pid,
203 num: nums + 1, 237 num: nums + 1,
204 cart_id: item.cart_id, 238 cart_id: item.cart_id,
205 args: { 239 args: {
206 index: index, 240 index: index,
207 isadd: isadd 241 isadd: isadd,
208 } 242 },
209 }) 243 })
210 this.addDisabled = false 244 this.addDisabled = false
211 } 245 }
212 } else { 246 } else {
213 if (nums <= 1) { 247 if (nums <= 1) {
214 this.desDisabled = true 248 this.desDisabled = true
215 } else { 249 } else {
216 this.desDisabled = false 250 this.desDisabled = false
217 // post 请求修改相关参数 251 // post 请求修改相关参数
218 if (this.childIsOpen[index]) { 252 if (this.childIsOpen[index]) {
219 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice 253 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
220 } 254 }
221 store.dispatch('cart/modiCart', { 255 store.dispatch('cart/modiCart', {
222 uid: this.$store.state.user.userInfo.uid, 256 uid: this.$store.state.user.userInfo.uid,
223 openid: this.$store.state.user.userInfo.openid, 257 openid: this.$store.state.user.userInfo.openid,
224 mp_id: item.mp_id, 258 mp_id: item.mp_id,
225 sk_id: item.sk_id, 259 sk_id: item.sk_id,
226 price: item.nowPrice, 260 price: item.nowPrice,
227 pid: item.pid, 261 pid: item.pid,
228 num: nums - 1, 262 num: nums - 1,
229 cart_id: item.cart_id, 263 cart_id: item.cart_id,
230 args: { 264 args: {
231 index: index, 265 index: index,
232 isadd: isadd 266 isadd: isadd,
233 } 267 },
234 }) 268 })
235 this.desDisabled = true 269 this.desDisabled = true
236 } 270 }
237 } 271 }
238 // store.dispatch('cart/getCartList', { 272 // store.dispatch('cart/getCartList', {
239 // uid: this.$store.state.user.userInfo.uid // 用户id 273 // uid: this.$store.state.user.userInfo.uid // 用户id
240 // }) 274 // })
241 }, 275 },
242 276
243 Change(isopen, indexC) { 277 Change(isopen, indexC) {
244 // console.log('lalla===>',isopen) 278 // console.log('lalla===>',isopen)
245 this.childIsOpen[indexC] = !isopen 279 this.childIsOpen[indexC] = !isopen
246 if (!isopen) { 280 if (!isopen) {
247 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 281 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
248 } else { 282 } else {
249 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 283 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
250 } 284 }
251 let m = true 285 let m = true
252 for (let i = 0; i < this.childIsOpen.length; i++) { 286 for (let i = 0; i < this.childIsOpen.length; i++) {
253 m = m & this.childIsOpen[i] 287 m = m & this.childIsOpen[i]
254 } 288 }
255 if (m == 1) { 289 if (m == 1) {
256 this.pIsoPen = true 290 this.pIsoPen = true
257 } else { 291 } else {
258 this.pIsoPen = false 292 this.pIsoPen = false
259 } 293 }
260 }, 294 },
261 pChange(isopen) { 295 pChange(isopen) {
262 this.pIsoPen = !isopen 296 this.pIsoPen = !isopen
263 for (let i = 0; i < this.childIsOpen.length; i++) { 297 for (let i = 0; i < this.childIsOpen.length; i++) {
264 this.childIsOpen[i] = !isopen 298 this.childIsOpen[i] = !isopen
265 } 299 }
266 if (this.pIsoPen) { 300 if (this.pIsoPen) {
267 // 计算总价逻辑 301 // 计算总价逻辑
268 if (this.childIsOpen.length != 0) { 302 if (this.childIsOpen.length != 0) {
269 for (let i = 0; i < this.childIsOpen.length; i++) { 303 for (let i = 0; i < this.childIsOpen.length; i++) {
270 if (this.childIsOpen[i]) { 304 if (this.childIsOpen[i]) {
271 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) 305 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
272 } 306 }
273 } 307 }
274 } 308 }
275 } else { 309 } else {
276 this.totalPrice = 0 310 this.totalPrice = 0
277 } 311 }
278 }, 312 },
279 delCart(cart_id, index) { 313 delCart(cart_id, index) {
280 // console.log('userInfo',this.$store.state.user.userInfo) 314 // console.log('userInfo',this.$store.state.user.userInfo)
281 cart_id = parseInt(cart_id) 315 cart_id = parseInt(cart_id)
282 // console.log('delcart------>cart_id',cart_id) 316 // console.log('delcart------>cart_id',cart_id)
283 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 317 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
284 // console.log('delcart======>index',index) 318 // console.log('delcart======>index',index)
285 const uid=this.$store.state.user.userInfo.uid 319 const uid = this.$store.state.user.userInfo.uid
286 const openid=this.$store.state.user.userInfo.openid 320 const openid = this.$store.state.user.userInfo.openid
287 uni.showModal({ 321 uni.showModal({
288 title: '是否删除该商品', 322 title: '是否删除该商品',
289 // content: '是否删除该商品', 323 // content: '是否删除该商品',
290 success: function (res) { 324 success: function (res) {
291 if (res.confirm) { 325 if (res.confirm) {
292 // this.$store.state.cart.cartList.splice(index,1) 326 // this.$store.state.cart.cartList.splice(index,1)
293 store.dispatch('cart/delCart', { 327 store.dispatch('cart/delCart', {
294 uid: uid, 328 uid: uid,
295 openid: openid, 329 openid: openid,
296 cart_id: cart_id, // 要修改的购物车id 330 cart_id: cart_id, // 要修改的购物车id
297 arg: index // 由于action 传参是能接收两参数，因此将index放入对象 331 arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
298 }) 332 })
299 console.log('用户点击确定') 333 console.log('用户点击确定')
300 } 334 }
301 } 335 },
302 }) 336 })
303 } 337 },
304 } 338 },
305 } 339 }
306 </script> 340 </script>
307 341
308 <style lang="scss"> 342 <style lang="scss">
309 .content { 343 .content {
310 min-height: 100vh; 344 min-height: 100vh;
311 background-color: #f2f2f2; 345 background-color: #f2f2f2;
312 display: flex; 346 display: flex;
313 flex-direction: column; 347 flex-direction: column;
314 align-items: center; 348 align-items: center;
315 justify-content: space-between; 349 justify-content: space-between;
316 padding: 20rpx 40rpx; 350 padding: 20rpx 40rpx;
317 box-sizing: border-box; 351 box-sizing: border-box;
318
319 .partentCheck{
320 width: 16px;
321 height: 16px;
322 border-radius: 22px;
323 border: 1px solid #CFCFCF;
324 background-color: #FFFFFF;
325 margin: 6px;
326 }
327 .partentChecked{
328 width: 18px;
329 height: 18px;
330 border-radius: 22px;
331 background-color: #FF6B4A;
332 margin: 6px;
333 .correct {
334 display: inline-block;
335 position: relative;
336 width: 10rpx;
337 height: 2rpx;
338 background: #FFFFFF;
339 line-height: 0;
340 font-size: 0;
341 position: relative;
342 top: -7px;
343 left: 4px;
344 -webkit-transform: rotate(45deg);
345 }
346 .correct:after {
347 content: '/';
348 display: block;
349 width: 16rpx;
350 height: 2rpx;
351 background: #FFFFFF;
352 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
353 }
354 }
355
356 .card{
357 background-color: #FFFFFF;
358 border-radius: 16rpx;
359 box-sizing: border-box;
360 padding: 36rpx 36rpx 36rpx 18rpx;
361 display: flex;
362 flex-direction: column;
363 align-items: center;
364 justify-content: space-between;
365 margin-bottom: 180rpx;
366 .cardHeader{
367 width: 100%;
368 height: 36rpx;
369 display: flex;
370 align-items: center;
371 justify-content: flex-start;
372 margin-bottom: 20rpx;
373 image{
374 height: 32rpx;
375 width: 32rpx;
376 padding-left: 6px;
377 padding-right: 10px;
378 }
379 text{
380 // font-family: PingFangSC-Regular;
381 font-size: 14px;
382 color: #333333;
383 letter-spacing: -0.26px;
384 }
385 }
386 .cardBody{
387 width: 100%;
388 min-height: 300rpx;
389 display: flex;
390 align-items: center;
391 justify-content: space-between;
392 .goodInfo{
393 width: 390rpx;
394 display: flex;
395 flex-direction: row;
396 justify-content: flex-start;
397 padding-left: 6px;
398 352
399 .imageWrap{ 353 .partentCheck {
400 height: 188rpx; 354 width: 16px;
401 width: 188rpx; 355 height: 16px;
402 margin-right: 28rpx; 356 border-radius: 22px;
357 border: 1px solid #cfcfcf;
358 background-color: #ffffff;
359 margin: 6px;
360 }
361 .partentChecked {
362 width: 18px;
363 height: 18px;
364 border-radius: 22px;
365 background-color: #ff6b4a;
366 margin: 6px;
367 .correct {
368 display: inline-block;
369 position: relative;
370 width: 10rpx;
371 height: 2rpx;
372 background: #ffffff;
373 line-height: 0;
374 font-size: 0;
375 position: relative;
376 top: -7px;
377 left: 4px;
378 -webkit-transform: rotate(45deg);
379 }
380 .correct:after {
381 content: "/";
382 display: block;
383 width: 16rpx;
384 height: 2rpx;
385 background: #ffffff;
386 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
387 }
388 }
403 389
404 image{ 390 .card {
405 border-radius: 4px; 391 background-color: #ffffff;
406 height: 188rpx; 392 border-radius: 16rpx;
407 width: 188rpx; 393 box-sizing: border-box;
408 } 394 padding: 36rpx 36rpx 36rpx 18rpx;
409 } 395 display: flex;
410 .infoRight{ 396 flex-direction: column;
411 display: flex; 397 align-items: center;
412 flex-direction: column; 398 justify-content: space-between;
413 align-items: flex-start; 399 margin-bottom: 180rpx;
414 justify-content: space-between; 400 .cardHeader {
415 min-height: 240rpx; 401 width: 100%;
416 .goodName{ 402 height: 36rpx;
417 display: -webkit-box; 403 display: flex;
418 -webkit-box-orient: vertical; 404 align-items: center;
419 -webkit-line-clamp: 2; 405 justify-content: flex-start;
420 text-align: justify; 406 margin-bottom: 20rpx;
421 overflow: hidden; 407 image {
422 font-size: 28rpx; 408 height: 32rpx;
423 color: #333333; 409 width: 32rpx;
424 } 410 padding-left: 6px;
425 .describ{ 411 padding-right: 10px;
426 width: 100%; 412 }
427 // min-height: 80rpx; 413 text {
428 // box-sizing: border-box; 414 // font-family: PingFangSC-Regular;
429 // padding: 10rpx; 415 font-size: 14px;
430 font-size: 20rpx; 416 color: #333333;
431 letter-spacing: -0.23px; 417 letter-spacing: -0.26px;
432 text-align: justify; 418 }
433 color: #999999; 419 }
434 // background: #F9F9F9; 420 .cardBody {
435 // display: flex; 421 width: 100%;
436 // justify-content: center; 422 min-height: 300rpx;
437 // align-items: center; 423 display: flex;
438 // text{ 424 align-items: center;
439 // text-overflow: -o-ellipsis-lastline; 425 justify-content: space-between;
440 // overflow: hidden; 426 .goodInfo {
441 // text-overflow: ellipsis; 427 width: 390rpx;
442 // display: -webkit-box; 428 display: flex;
443 // -webkit-line-clamp: 2; 429 flex-direction: row;
444 // line-clamp: 2; 430 justify-content: flex-start;
445 // -webkit-box-orient: vertical; 431 padding-left: 6px;
446 // }
447 // .icon {
448 // width: 0;
449 // height: 0;
450 // border-left: 5px transparent;
451 // border-right: 5px transparent;
452 // border-top: 5px #979797;
453 // border-bottom: 0 transparent;
454 // border-style: solid;
455 // position: relative;
456 // margin-left: 10px;
457 // // transform: scaleY(-1);
458 // }
459 // .icon::after{
460 // content: '';
461 // position: absolute;
462 // top: -6.5px;
463 // left: -5px;
464 // border-left: 5px transparent;
465 // border-right: 5px transparent;
466 // border-top: 5px #FFFFFF;
467 // border-bottom: 0 transparent;
468 // border-style: solid;
469 // }
470 }
471 .priceBox{
472 display: flex;
473 justify-content: space-between;
474 align-items: center;
475 // margin-top: 26px;
476 width: 100%;
477 font-size: 14px;
478 color: #999999;
479 .maxCount{
480 color: #999999;
481 font-size: 24rpx;
482 }
483 .price{
484 color: #FF6B4A;
485 font-size: 28rpx;
486 }
487 .counter{
488 display: flex;
489 flex-direction: row;
490 justify-content: space-between;
491 align-items: center;
492 font-size: 28rpx;
493 color: #333333;
494 width: 122rpx;
495 .btn{
496 display: flex;
497 justify-content: center;
498 line-height: 32rpx;
499 height: 32rpx;
500 width: 32rpx;
501 background-color: #F2F2F2;
502 color: #CFCFCF;
503 }
504 }
505 }
506 }
507 }
508 }
509 }
510 432
511 .footer{ 433 .imageWrap {
512 position: fixed; 434 height: 188rpx;
513 left: 0; 435 width: 188rpx;
514 bottom: 0px; 436 margin-right: 28rpx;
515 height: 112rpx;
516 width: 100%;
517 background-color: #FFFFFF;
518 font-size: 16px;
519 display: flex;
520 justify-content: space-between;
521 align-items: center;
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @a3d2bea
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view></view> 3 <view></view>
4 <view 4 <view
5 class="addAddress" 5 class="addAddress"
6 @tap="toaddAddress" 6 @tap="toaddAddress"
7 v-if="this.showAddress" 7 v-if="this.showAddress"
8 > 8 >
9 <view class="addIcon"> 9 <view class="addIcon">
10 <image 10 <image
11 src="../../static/add.png" 11 src="../../static/add.png"
12 mode="aspectFill" 12 mode="aspectFill"
13 ></image> 13 ></image>
14 </view> 14 </view>
15 <view class="addressText">{{addAddress}}</view> 15 <view class="addressText">{{addAddress}}</view>
16 <image 16 <image
17 src="../../static/right.png" 17 src="../../static/right.png"
18 mode="aspectFill" 18 mode="aspectFill"
19 ></image> 19 ></image>
20 </view> 20 </view>
21 <view 21 <view
22 v-else 22 v-else
23 @tap="toaddAddress" 23 @tap="toaddAddress"
24 class="list order-user" 24 class="list order-user"
25 > 25 >
26 <view class="order-user-head"> 26 <view class="order-user-head">
27 <view class="name"> 27 <view class="name">
28 <view 28 <view
29 v-if="addressInfo.default === '1'" 29 v-if="addressInfo.default === '1'"
30 class="default" 30 class="default"
31 ><text>默认</text></view>{{addressInfo.name}} 31 ><text>默认</text></view>{{addressInfo.name}}
32 </view> 32 </view>
33 <text class="mobile">{{addressInfo.mobile}}</text> 33 <text class="mobile">{{addressInfo.mobile}}</text>
34 </view> 34 </view>
35 <view class="order-user-body"> 35 <view class="order-user-body">
36 <image src="../../static/myorder-paying-location.png"></image> 36 <image src="../../static/myorder-paying-location.png"></image>
37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text> 37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
38 </view> 38 </view>
39 <image 39 <image
40 class="arrow" 40 class="arrow"
41 src="../../static/right.png" 41 src="../../static/right.png"
42 ></image> 42 ></image>
43 </view> 43 </view>
44 <view class="content"> 44 <view class="content">
45 <view class="orderInfo"> 45 <view class="orderInfo">
46 <view class="title"> 46 <view class="title">
47 <image 47 <image
48 src="../../static/store.png" 48 src="../../static/store.png"
49 mode="aspectFill" 49 mode="aspectFill"
50 style="width: 40rpx;height: 40rpx;" 50 style="width: 40rpx;height: 40rpx;"
51 ></image> 51 ></image>
52 <text>非常戴镜</text> 52 <text>非常戴镜</text>
53 </view> 53 </view>
54 <view class="infoBox"> 54 <view class="infoBox">
55 <view class="infoTop"> 55 <view class="infoTop">
56 <image 56 <image
57 :src="goodInfo.img_index_url" 57 :src="goodInfo.img_index_url"
58 mode="aspectFill" 58 mode="aspectFill"
59 ></image> 59 ></image>
60 <view class="infoRight"> 60 <view class="infoRight">
61 <text class="goodName">商品名称商品名称商品名称名称名称</text> 61 <text class="goodName">商品名称商品名称商品名称名称名称</text>
62 <text class="remarks">支持7天无理由退货 顺丰发货</text> 62 <text class="remarks">支持7天无理由退货 顺丰发货</text>
63 <view class="priceBox"> 63 <view class="priceBox">
64 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost"> 64 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
65 ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}} 65 ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
66 </text></view> 66 </text></view>
67 <view class="counter"> 67 <view class="counter">
68 <view 68 <view
69 class="btn" 69 class="btn"
70 disabled="this.disabled" 70 disabled="this.disabled"
71 type="default" 71 type="default"
72 @click="counter(false)" 72 @click="counter(false)"
73 >-</view> 73 >-</view>
74 <text>{{count}}</text> 74 <text>{{count}}</text>
75 <view 75 <view
76 class="btn" 76 class="btn"
77 type="default" 77 type="default"
78 @click="counter(true)" 78 @click="counter(true)"
79 >+</view> 79 >+</view>
80 </view> 80 </view>
81 </view> 81 </view>
82 </view> 82 </view>
83 </view> 83 </view>
84 <view class="infoBottom"> 84 <view class="infoBottom">
85 <view class="norm">规格 <text > 85 <view class="norm">规格 <text>
86 <!-- 长度超出变省略号未做 --> 86 <!-- 长度超出变省略号未做 -->
87 <block 87 <block
88 v-for="(item, index) in current" 88 v-for="(item, index) in current"
89 :key="index" 89 :key="index"
90 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block></block> 90 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
91 </block>
91 </text></view> 92 </text></view>
92 <view class="shippingMethod">配送方式 <text>快递</text></view> 93 <view class="shippingMethod">配送方式 <text>快递</text></view>
93 <view class="message">买家留言 94 <view class="message">买家留言
94 <input 95 <input
95 type="text" 96 type="text"
96 :value="note" 97 :value="note"
97 placeholder="建议提前协商(50字以内)" 98 placeholder="建议提前协商(50字以内)"
98 /> 99 />
99 </view> 100 </view>
100 </view> 101 </view>
101 </view> 102 </view>
102 </view> 103 </view>
103 <view class="payWay"> 104 <view class="payWay">
104 <view class="item"> 105 <view class="item">
105 <text>支付方式</text> 106 <text>支付方式</text>
106 <view class="itemRight"> 107 <view class="itemRight">
107 <view class="rightText"> 108 <view class="rightText">
108 <view class="choosePayWay"> 109 <view class="choosePayWay">
109 <image 110 <image
110 src="../../static/store.png" 111 src="../../static/store.png"
111 mode="aspectFill" 112 mode="aspectFill"
112 ></image> 113 ></image>
113 <text>微信支付</text> 114 <text>微信支付</text>
114 </view> 115 </view>
115 <!-- <view class="randomSubstraction">最高随机立减￥99</view> --> 116 <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
116 </view> 117 </view>
117 <!-- <image 118 <!-- <image
118 src="../../static/right.png" 119 src="../../static/right.png"
119 mode="aspectFill" 120 mode="aspectFill"
120 ></image> --> 121 ></image> -->
121 </view> 122 </view>
122 </view> 123 </view>
123 <!-- <view class="item"> 124 <!-- <view class="item">
124 <text>优惠券</text> 125 <text>优惠券</text>
125 <view class="itemRight"> 126 <view class="itemRight">
126 <view class="rightText"> 127 <view class="rightText">
127 <view class="chooseOffers"> 128 <view class="chooseOffers">
128 <text>-￥70.00</text> 129 <text>-￥70.00</text>
129 </view> 130 </view>
130 <view class="preferentialWay">最大优惠</view> 131 <view class="preferentialWay">最大优惠</view>
131 </view> 132 </view>
132 <image 133 <image
133 src="../../static/right.png" 134 src="../../static/right.png"
134 mode="aspectFill" 135 mode="aspectFill"
135 ></image> 136 ></image>
136 </view> 137 </view>
137 </view> --> 138 </view> -->
138 <view class="item"> 139 <view class="item">
139 <text>运费</text> 140 <text>运费</text>
140 <view class="itemRight"> 141 <view class="itemRight">
141 <view class="freight">免运费</view> 142 <view class="freight">免运费</view>
142 </view> 143 </view>
143 </view> 144 </view>
144 <view class="item"> 145 <view class="item">
145 <text>合计</text> 146 <text>合计</text>
146 <view class="itemRight"> 147 <view class="itemRight">
147 <view class="total">¥{{Number(skuInfo.real_price) * count}}</view> 148 <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
148 </view> 149 </view>
149 </view> 150 </view>
150 </view> 151 </view>
151 <!-- 152 <!--
152 <view class="checkBox"> 153 <view class="checkBox">
153 <checkbox-group> 154 <checkbox-group>
154 <label> 155 <label>
155 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 156 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
156 </label> 157 </label>
157 </checkbox-group> 158 </checkbox-group>
158 </view> --> 159 </view> -->
159 </view> 160 </view>
160 <view class="footer"> 161 <view class="footer">
161 <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view> 162 <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
162 <view class="footerRight"> 163 <view class="footerRight">
163 <view 164 <view
164 class="paybtn" 165 class="paybtn"
165 @tap="orderBuild" 166 @tap="orderBuild"
166 >立即支付</view> 167 >立即支付</view>
167 </view> 168 </view>
168 </view> 169 </view>
169 </view> 170 </view>
170 </template> 171 </template>
171 172
172 <script> 173 <script>
173 import store from '@/store' 174 import store from '@/store'
175 import MD5Util from '../../utils/md5'
174 176
175 export default { 177 export default {
176 data() { 178 data() {
177 return { 179 return {
178 addAddress: '添加收货地址', 180 addAddress: '添加收货地址',
179 count: 1, 181 count: 1,
180 pid: 0, 182 pid: 0,
181 disabled: false, 183 disabled: false,
182 freight: 0.00, 184 freight: 0.00,
183 showAddress: false, 185 showAddress: false,
184 note: '', 186 note: '',
185 addressInfo: { 187 addressInfo: {
186 address: '', 188 address: '',
187 }, 189 },
188 // isAnonymous: 190 // isAnonymous:
189 } 191 }
190 }, 192 },
191 onLoad({ pid, addressId, isCart }) { 193 onLoad({ pid, addressId, isCart }) {
192 this.pid = pid 194 this.pid = pid
193 // 若已经选择地址 195 // 若已经选择地址
194 if (addressId) { 196 if (addressId) {
195 store.dispatch('address/details', { 197 store.dispatch('address/details', {
196 add_id: addressId, 198 add_id: addressId,
197 }).then(({ code, data }) => { 199 }).then(({ code, data }) => {
198 if (code === 1) { 200 if (code === 1) {
199 console.log('code', code, data) 201 console.log('code', code, data)
200 this.showAddress = true 202 this.showAddress = true
201 this.addressInfo = data 203 this.addressInfo = data
202 } 204 }
203 }) 205 })
204 } else { 206 } else {
205 store.dispatch('address/default').then(({ code, data }) => { 207 store.dispatch('address/default').then(({ code, data }) => {
206 if (code === 1) { 208 if (code === 1) {
207 console.log('code', code, data) 209 console.log('code', code, data)
208 this.showAddress = true 210 this.showAddress = true
209 this.addressInfo = data 211 this.addressInfo = data
210 } 212 }
211 }) 213 })
212 } 214 }
213 store.dispatch('read/fetch', { 215 store.dispatch('read/fetch', {
214 pid, 216 pid,
215 }) 217 })
216 }, 218 },
217 computed: { 219 computed: {
218 goodInfo () { 220 goodInfo () {
219 console.log('state', this.$store.state) 221 console.log('state', this.$store.state)
220 return this.$store.state.read.goodInfo 222 return this.$store.state.read.goodInfo
221 }, 223 },
222 skuInfo () { 224 skuInfo () {
223 return this.$store.state.order.param.sk_id_arr 225 return this.$store.state.order.param.sk_id_arr
224 }, 226 },
225 attrList () { 227 attrList () {
226 return this.$store.state.order.param.attrList 228 return this.$store.state.order.param.attrList
227 }, 229 },
228 current () { 230 current () {
229 return this.$store.state.order.param.current 231 return this.$store.state.order.param.current
230 }, 232 },
231 }, 233 },
232 methods: { 234 methods: {
233 counter(isadd) { 235 counter(isadd) {
234 if (isadd) { 236 if (isadd) {
235 this.count++ 237 this.count++
236 } else { 238 } else {
237 this.count <= 1 ? this.disabled = true : this.count-- 239 this.count <= 1 ? this.disabled = true : this.count--
238 } 240 }
239 }, 241 },
240 // 跳转添加地址页面 242 // 跳转添加地址页面
241 toaddAddress() { 243 toaddAddress() {
242 uni.navigateTo({ 244 uni.navigateTo({
243 url: `../address/addressList?edit=${1}`, 245 url: `../address/addressList?edit=${1}`,
244 success: res => {}, 246 success: res => {},
245 fail: (error) => { console.log('跳转到地址列表页面失败====>', error) }, 247 fail: (error) => { console.log('跳转到地址列表页面失败====>', error) },
246 complete: () => {}, 248 complete: () => {},
247 }) 249 })
248 }, 250 },
249 // 下单 251 // 下单
250 orderBuild() { 252 orderBuild() {
253 uni.showLoading({
254 title: '支付中',
255 })
251 console.log('this', this.$store.state) 256 console.log('this', this.$store.state)
252 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param 257 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
253 store.dispatch('order/buyNow', { 258 store.dispatch('order/buyNow', {
254 pid: skId.pid, 259 pid: skId.pid,
255 sk_id: skId.sk_id, 260 sk_id: skId.sk_id,
256 number: this.count, 261 number: this.count,
257 mp_id: mpId, 262 mp_id: mpId,
258 address: JSON.stringify(this.addressInfo), 263 address: JSON.stringify(this.addressInfo),
259 totalPrice: Number(this.skuInfo.real_price) * this.count * 100, 264 totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
260 liuyan: this.note, 265 liuyan: this.note,
261 dir: 1, 266 dir: 1,
262 }).then((res) => { 267 }).then((res) => {
263 this.pay(res.data) 268 this.pay(res.data)
264 }) 269 })
265 }, 270 },
266 // 支付 271 // 支付
267 pay(res) { 272 pay(res) {
268 console.log('pay', res) 273 console.log('pay', res)
269 const { data, exKeyName: keyName } = res 274 const { data, exKeyName: keyName } = res
270 const uid = uni.getStorageSync('uid') 275 const uid = uni.getStorageSync('uid')
276 const timeStamp = new Date().getTime().toString()
277 const nonceStr = 'asfafasfasfasfasf'
271 const fieldSet = { 278 const fieldSet = {
272 openid: this.$store.state.user.userInfo.openid, 279 openid: this.$store.state.user.userInfo.openid,
273 uid: this.$store.state.user.userInfo.uid, 280 uid: this.$store.state.user.userInfo.uid,
274 shopid: 0, 281 shopid: 0,
275 payCate: 2020, 282 payCate: 2020,
276 payMoney: Number(this.skuInfo.real_price) * this.count * 100, 283 payMoney: Number(this.skuInfo.real_price) * this.count * 100,
277 payWoodId: `fcdj-${uid}-${keyName}`, 284 payWoodId: `fcdj-${uid}-${keyName}`,
278 nonceStr: 'asfafasfasfasfasf', 285 payWoodDesc: '在【非常戴镜】的微信付款凭证',
286 nonceStr,
279 signType: 'MD5', 287 signType: 'MD5',
280 app_uid: 2020, 288 app_uid: 2020,
281 timeStamp: new Date().getTime().toString(), 289 timeStamp,
282 billInfo: JSON.stringify(data),
283 keyname: keyName, 290 keyname: keyName,
291 billInfo: JSON.stringify(data),
284 } 292 }
285 console.log('fieldSet', fieldSet) 293 console.log('fieldSet', fieldSet)
286 store.dispatch('order/pay', fieldSet).then((res) => { 294 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
287 console.log('res', res) 295 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
296 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
297 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
298 uni.requestPayment({
299 appId: data.appid,
300 timeStamp,
301 nonceStr,
302 total_fee: Number(this.skuInfo.real_price) * this.count * 100,
303 package: `prepay_id=${data.prepay_id}`,
304 signType: 'MD5',
305 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
306 success: (res) => {
307 uni.showModal({
308 content: '支付成功',
309 showCancel: false,
310 })
311 console.log('res-----支付成功', res)
312 uni.reLaunch({
313 url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`,
314 })
315 },
316 fail: (res) => {
317 uni.showModal({
318 content: '支付失败',
319 showCancel: false,
320 })
321 console.log('res------支付失败', res)
322 uni.reLaunch({
323 url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`,
324 })
325 },
326 complete: () => {
327 uni.hideLoading()
328 },
329 })
330 } else {
331 console.log('支付失败')
332 uni.hideLoading()
333 }
288 }) 334 })
289 }, 335 },
290 }, 336 },
291 } 337 }
292 </script> 338 </script>
293 339
294 <style lang="scss"> 340 <style lang="scss">
295 .wrap { 341 .wrap {
296 height: 100vh; 342 height: 100vh;
297 background-color: #f2f2f2; 343 background-color: #f2f2f2;
298 font-family: PingFangSC-Regular; 344 font-family: PingFangSC-Regular;
299 letter-spacing: -0.23px; 345 letter-spacing: -0.23px;
300 position: absolute; 346 position: absolute;
301 } 347 }
302 .addAddress { 348 .addAddress {
303 background-color: #ffffff; 349 background-color: #ffffff;
304 box-sizing: border-box; 350 box-sizing: border-box;
305 height: 124rpx; 351 height: 124rpx;
306 width: 100%; 352 width: 100%;
307 display: flex; 353 display: flex;
308 align-items: center; 354 align-items: center;
309 padding: 0 40rpx; 355 padding: 0 40rpx;
310 .addIcon { 356 .addIcon {
311 background-color: #f2f2f2; 357 background-color: #f2f2f2;
312 height: 56rpx; 358 height: 56rpx;
313 width: 60rpx; 359 width: 60rpx;
314 border-radius: 4rpx; 360 border-radius: 4rpx;
315 display: flex; 361 display: flex;
316 justify-content: center; 362 justify-content: center;
317 align-items: center; 363 align-items: center;
318 margin-right: 40rpx; 364 margin-right: 40rpx;
319 } 365 }
320 image { 366 image {
321 height: 28rpx; 367 height: 28rpx;
322 width: 28rpx; 368 width: 28rpx;
323 } 369 }
324 .addressText { 370 .addressText {
325 font-size: 28rpx; 371 font-size: 28rpx;
326 color: #333333; 372 color: #333333;
327 margin-right: 364rpx; 373 margin-right: 364rpx;
328 } 374 }
329 } 375 }
330 .content { 376 .content {
331 background-color: #f2f2f2; 377 background-color: #f2f2f2;
332 width: 100%; 378 width: 100%;
333 display: flex; 379 display: flex;
334 flex-direction: column; 380 flex-direction: column;
335 justify-content: center; 381 justify-content: center;
336 align-items: center; 382 align-items: center;
337 padding: 40rpx; 383 padding: 40rpx;
338 box-sizing: border-box; 384 box-sizing: border-box;
339 .orderInfo { 385 .orderInfo {
340 width: 670rpx; 386 width: 670rpx;
341 height: 488rpx; 387 height: 488rpx;
342 background-color: #ffffff; 388 background-color: #ffffff;
343 border-radius: 20rpx; 389 border-radius: 20rpx;
344 box-sizing: border-box; 390 box-sizing: border-box;
345 padding: 0 40rpx 40rpx 40rpx; 391 padding: 0 40rpx 40rpx 40rpx;
346 .title { 392 .title {
347 display: flex; 393 display: flex;
348 align-items: center; 394 align-items: center;
349 font-size: 28rpx; 395 font-size: 28rpx;
350 color: #333333; 396 color: #333333;
351 height: 60rpx; 397 height: 60rpx;
352 line-height: 40rpx; 398 line-height: 40rpx;
353 padding: 10rpx 10rpx 10rpx 0rpx; 399 padding: 10rpx 10rpx 10rpx 0rpx;
354 image { 400 image {
355 margin-right: 20rpx; 401 margin-right: 20rpx;
356 } 402 }
357 } 403 }
358 .infoBox { 404 .infoBox {
359 margin-top: 42rpx; 405 margin-top: 42rpx;
360 .infoTop { 406 .infoTop {
361 display: flex; 407 display: flex;
362 flex-direction: row; 408 flex-direction: row;
363 image { 409 image {
364 height: 188rpx; 410 height: 188rpx;
365 width: 188rpx; 411 width: 188rpx;
366 margin-right: 24rpx; 412 margin-right: 24rpx;
367 } 413 }
368 .infoRight { 414 .infoRight {
369 width: 374rpx; 415 width: 374rpx;
370 display: flex; 416 display: flex;
371 flex-direction: column; 417 flex-direction: column;
372 align-items: flex-start; 418 align-items: flex-start;
373 justify-content: space-between; 419 justify-content: space-between;
374 .goodName { 420 .goodName {
375 font-size: 28rpx; 421 font-size: 28rpx;
376 color: #333333; 422 color: #333333;
377 } 423 }
378 .remarks { 424 .remarks {
379 font-size: 20rpx; 425 font-size: 20rpx;
380 color: #999999; 426 color: #999999;
381 } 427 }
382 .priceBox { 428 .priceBox {
383 display: flex; 429 display: flex;
384 justify-content: space-between; 430 justify-content: space-between;
385 align-items: center; 431 align-items: center;
386 width: 100%; 432 width: 100%;
387 .price { 433 .price {
388 color: #ff6b4a; 434 color: #ff6b4a;
389 font-size: 28rpx; 435 font-size: 28rpx;
390 } 436 }
391 .originCost { 437 .originCost {
392 text-decoration: line-through; 438 text-decoration: line-through;
393 color: #999999; 439 color: #999999;
394 font-size: 20rpx; 440 font-size: 20rpx;
395 } 441 }
396 .counter { 442 .counter {
397 display: flex; 443 display: flex;
398 flex-direction: row; 444 flex-direction: row;
399 justify-content: space-between; 445 justify-content: space-between;
400 font-size: 28rpx; 446 font-size: 28rpx;
401 color: #333333; 447 color: #333333;
402 width: 122rpx; 448 width: 122rpx;
403 .btn { 449 .btn {
404 display: flex; 450 display: flex;
405 justify-content: center; 451 justify-content: center;
406 line-height: 32rpx; 452 line-height: 32rpx;
407 height: 32rpx; 453 height: 32rpx;
408 width: 32rpx; 454 width: 32rpx;
409 background-color: #f2f2f2; 455 background-color: #f2f2f2;
410 color: #cfcfcf; 456 color: #cfcfcf;
411 } 457 }
412 } 458 }
413 } 459 }
414 } 460 }
415 } 461 }
416 .infoBottom { 462 .infoBottom {
417 display: flex; 463 display: flex;
418 flex-direction: column; 464 flex-direction: column;
419 justify-content: flex-start; 465 justify-content: flex-start;
420 font-size: 24rpx; 466 font-size: 24rpx;
421 color: #333333; 467 color: #333333;
422 text { 468 text {
423 color: #999999; 469 color: #999999;
424 margin-left: 20rpx; 470 margin-left: 20rpx;
425 } 471 }
426 472
427 .norm { 473 .norm {
428 margin-top: 28rpx; 474 margin-top: 28rpx;
429 } 475 }
430 .shippingMethod { 476 .shippingMethod {
431 margin-top: 12rpx; 477 margin-top: 12rpx;
432 } 478 }
433 .message { 479 .message {
434 display: flex; 480 display: flex;
435 flex-direction: row; 481 flex-direction: row;
436 align-items: center; 482 align-items: center;
437 margin-top: 18rpx; 483 margin-top: 18rpx;
438 input { 484 input {
439 margin-left: 20rpx; 485 margin-left: 20rpx;
440 width: 75%; 486 width: 75%;
441 } 487 }
442 } 488 }
443 } 489 }
444 } 490 }
445 } 491 }
446 .payWay { 492 .payWay {
447 height: 464rpx; 493 height: 464rpx;
448 width: 670rpx; 494 width: 670rpx;
449 background-color: #ffffff; 495 background-color: #ffffff;
450 color: #333333; 496 color: #333333;
451 font-size: 24rpx; 497 font-size: 24rpx;
452 border-radius: 20rpx; 498 border-radius: 20rpx;
453 box-sizing: border-box; 499 box-sizing: border-box;
454 padding: 0 52rpx 0rpx 40rpx; 500 padding: 0 52rpx 0rpx 40rpx;
455 margin-top: 20rpx; 501 margin-top: 20rpx;
456 display: flex; 502 display: flex;
457 flex-direction: column; 503 flex-direction: column;
458 justify-content: center; 504 justify-content: center;
459 align-items: flex-start; 505 align-items: flex-start;
460 .item { 506 .item {
461 display: flex; 507 display: flex;
462 flex-direction: row; 508 flex-direction: row;
463 justify-content: space-between; 509 justify-content: space-between;
464 align-items: center; 510 align-items: center;
465 width: 100%; 511 width: 100%;
466 height: 115rpx; 512 height: 115rpx;
467 .itemRight { 513 .itemRight {
468 display: flex; 514 display: flex;
469 flex-direction: row; 515 flex-direction: row;
470 justify-content: space-between; 516 justify-content: space-between;
471 align-items: center; 517 align-items: center;
472 image { 518 image {
473 height: 24rpx; 519 height: 24rpx;
474 width: 12rpx; 520 width: 12rpx;
475 } 521 }
476 .rightText { 522 .rightText {
477 margin-right: 20rpx; 523 margin-right: 20rpx;
478 text-align: right; 524 text-align: right;
479 .choosePayWay { 525 .choosePayWay {
480 text { 526 text {
481 color: #333333; 527 color: #333333;
482 } 528 }
483 image { 529 image {
484 height: 26rpx; 530 height: 26rpx;
485 width: 30rpx; 531 width: 30rpx;
486 margin-right: 20px; 532 margin-right: 20px;
487 } 533 }
488 } 534 }
489 .randomSubstraction { 535 .randomSubstraction {
490 color: #ff6b4a; 536 color: #ff6b4a;
491 } 537 }
492 .preferentialWay { 538 .preferentialWay {
493 color: #999999; 539 color: #999999;
494 } 540 }
495 } 541 }
496 .freight, 542 .freight,
497 .total { 543 .total {
498 margin-right: 32rpx; 544 margin-right: 32rpx;
499 } 545 }
500 text { 546 text {
501 color: #ff6b4a; 547 color: #ff6b4a;
502 } 548 }
503 } 549 }
504 } 550 }
505 } 551 }
506 // .checkBox { 552 // .checkBox {
507 // height: 58rpx; 553 // height: 58rpx;
508 // line-height: 58rpx; 554 // line-height: 58rpx;
509 // width: 100%; 555 // width: 100%;
510 // margin-top: 36rpx; 556 // margin-top: 36rpx;
511 // margin-left: 40rpx; 557 // margin-left: 40rpx;
512 // font-size: 12px; 558 // font-size: 12px;
513 // color: #999999; 559 // color: #999999;
514 // } 560 // }
515 } 561 }
516 .footer { 562 .footer {
517 height: 112rpx; 563 height: 112rpx;
518 width: 100%; 564 width: 100%;
519 background-color: #fff; 565 background-color: #fff;
520 font-size: 16px; 566 font-size: 16px;
521 display: flex; 567 display: flex;
522 justify-content: space-between; 568 justify-content: space-between;
523 align-items: center; 569 align-items: center;
524 position: fixed; 570 position: fixed;
525 bottom: 0; 571 bottom: 0;
526 .footerLeft { 572 .footerLeft {
527 display: flex; 573 display: flex;
528 justify-content: center; 574 justify-content: center;
529 align-items: center; 575 align-items: center;
530 width: 50%; 576 width: 50%;
531 color: #333333; 577 color: #333333;
532 text { 578 text {
533 color: #ff6b4a; 579 color: #ff6b4a;
534 } 580 }
535 } 581 }
536 .footerRight { 582 .footerRight {
537 display: flex; 583 display: flex;
538 justify-content: flex-end; 584 justify-content: flex-end;
539 align-items: center; 585 align-items: center;
540 width: 50%; 586 width: 50%;
541 margin-right: 26rpx; 587 margin-right: 26rpx;
542 .paybtn { 588 .paybtn {
543 display: flex; 589 display: flex;
544 justify-content: center; 590 justify-content: center;
545 align-items: center; 591 align-items: center;
546 background: #ff6b4a; 592 background: #ff6b4a;
547 border-radius: 20px; 593 border-radius: 20px;
548 border-radius: 20px; 594 border-radius: 20px;
549 color: #ffffff; 595 color: #ffffff;
550 width: 204rpx; 596 width: 204rpx;
551 height: 80rpx; 597 height: 80rpx;
552 } 598 }
553 } 599 }
554 } 600 }
555 // 地址信息样式 601 // 地址信息样式
556 .order-user { 602 .order-user {
557 width: 670rpx; 603 width: 670rpx;
558 height: 228rpx; 604 height: 228rpx;
559 background: #ffffff; 605 background: #ffffff;
560 border-radius: 14rpx; 606 border-radius: 14rpx;
561 margin: 0 auto; 607 margin: 0 auto;
562 margin-top: 20rpx; 608 margin-top: 20rpx;
563 position: relative; 609 position: relative;
564 .order-user-head { 610 .order-user-head {
565 display: flex; 611 display: flex;
566 height: 108rpx; 612 height: 108rpx;
567 width: 100%; 613 width: 100%;
568 align-items: center; 614 align-items: center;
569 margin-left: 126rpx; 615 margin-left: 126rpx;
570 .name { 616 .name {
571 display: flex; 617 display: flex;
572 justify-content: space-between; 618 justify-content: space-between;
573 font-size: 14px; 619 font-size: 14px;
574 color: #333333; 620 color: #333333;
575 letter-spacing: -0.26px; 621 letter-spacing: -0.26px;
576 margin-right: 20rpx; 622 margin-right: 20rpx;
577 .default { 623 .default {
578 height: 40rpx; 624 height: 40rpx;
579 width: 80rpx; 625 width: 80rpx;
580 background-color: #4a90e2; 626 background-color: #4a90e2;
581 border-radius: 13px; 627 border-radius: 13px;
582 border-radius: 13px; 628 border-radius: 13px;
583 text-align: center; 629 text-align: center;
584 margin-right: 20rpx; 630 margin-right: 20rpx;
585 text { 631 text {
586 font-size: 12px; 632 font-size: 12px;
587 color: #ffffff; 633 color: #ffffff;
588 letter-spacing: -0.23px; 634 letter-spacing: -0.23px;
589 } 635 }
590 } 636 }
591 } 637 }
592 .mobile { 638 .mobile {
593 font-size: 14px; 639 font-size: 14px;
594 color: #999999; 640 color: #999999;
595 letter-spacing: -0.26px; 641 letter-spacing: -0.26px;
596 } 642 }
597 } 643 }
598 .order-user-body { 644 .order-user-body {
599 display: flex; 645 display: flex;
600 width: 100%; 646 width: 100%;
601 image { 647 image {
602 width: 24px; 648 width: 24px;
603 height: 26px; 649 height: 26px;
604 margin: 12rpx 32rpx 0 40rpx; 650 margin: 12rpx 32rpx 0 40rpx;
605 } 651 }
606 .address { 652 .address {
607 font-weight: bold; 653 font-weight: bold;
608 font-size: 14px; 654 font-size: 14px;
609 color: #333333; 655 color: #333333;
610 letter-spacing: -0.26px; 656 letter-spacing: -0.26px;
611 } 657 }
612 } 658 }
613 .arrow { 659 .arrow {
614 width: 6px; 660 width: 6px;
615 height: 12px; 661 height: 12px;
616 position: absolute; 662 position: absolute;
617 right: 40rpx; 663 right: 40rpx;
618 bottom: 104rpx; 664 bottom: 104rpx;
619 } 665 }
620 } 666 }
621 </style> 667 </style>
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @a3d2bea
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper 5 <swiper
6 class="swiperImage" 6 class="swiperImage"
7 :indicator-dots="true" 7 :indicator-dots="true"
8 :autoplay="true" 8 :autoplay="true"
9 :interval="4000" 9 :interval="4000"
10 :duration="500" 10 :duration="500"
11 > 11 >
12 <swiper-item 12 <swiper-item
13 v-for="(item, index) in goodInfo.pics" 13 v-for="(item, index) in goodInfo.pics"
14 :key="index" 14 :key="index"
15 > 15 >
16 <image 16 <image
17 :src="item" 17 :src="item"
18 mode="scaleToFill" 18 mode="scaleToFill"
19 ></image> 19 ></image>
20 </swiper-item> 20 </swiper-item>
21 </swiper> 21 </swiper>
22 <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> 22 <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> 23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25 </view> 25 </view>
26 <view 26 <view
27 class="D2" 27 class="D2"
28 v-if="updateGoodType == 2 || updateGoodType == 4" 28 v-if="updateGoodType == 2 || updateGoodType == 4"
29 > 29 >
30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> 31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33 </view> 33 </view>
34 <!-- <view 34 <!-- <view
35 class="D2" 35 class="D2"
36 v-if="updateGoodType == 1" 36 v-if="updateGoodType == 1"
37 > 37 >
38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> 39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> 40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41 </view> 41 </view>
42 <view 42 <view
43 class="D2" 43 class="D2"
44 v-if="updateGoodType == 3" 44 v-if="updateGoodType == 3"
45 > 45 >
46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> 47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49 </view> --> 49 </view> -->
50 <view class="D3"> 50 <view class="D3">
51 <view class="screenBar"> 51 <view class="screenBar">
52 <view 52 <view
53 v-for="item in screenItems" 53 v-for="item in screenItems"
54 :key="item.current" 54 :key="item.current"
55 @click="tabChange(item.current)" 55 @click="tabChange(item.current)"
56 > 56 >
57 <view 57 <view
58 class="screenItem" 58 class="screenItem"
59 v-bind:class="{ active: current === item.current }" 59 v-bind:class="{ active: current === item.current }"
60 >{{ item.text || '暂无' }}</view> 60 >{{ item.text || '暂无' }}</view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view 63 <view
64 class="screen-item" 64 class="screen-item"
65 v-if="current === 1" 65 v-if="current === 1"
66 > 66 >
67 <view class="D3_list"> 67 <view class="D3_list">
68 <view 68 <view
69 v-for="(item) in parameter" 69 v-for="(item) in parameter"
70 :key="item.key" 70 :key="item.key"
71 > 71 >
72 <image 72 <image
73 class="D3_image" 73 class="D3_image"
74 v-bind:src="item.img" 74 v-bind:src="item.img"
75 ></image> 75 ></image>
76 <span>{{item.standard || '暂无'}}</span> 76 <span>{{item.standard || '暂无'}}</span>
77 <span>{{item.slength || '暂无'}}</span> 77 <span>{{item.slength || '暂无'}}</span>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 <view 81 <view
82 class="screen-item" 82 class="screen-item"
83 v-if="current === 0" 83 v-if="current === 0"
84 > 84 >
85 <view class="D3_list"> 85 <view class="D3_list">
86 <!-- <block> 86 <!-- <block>
87 <view>主体</view> 87 <view>主体</view>
88 <view>商品产地：韩国</view> 88 <view>商品产地：韩国</view>
89 <view>包装清单：彩色隐形 * 1</view> 89 <view>包装清单：彩色隐形 * 1</view>
90 </block> --> 90 </block> -->
91 <!-- 迭代时建议配合接口修改 为数组 --> 91 <!-- 迭代时建议配合接口修改 为数组 -->
92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> 92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93 <view class=""> 93 <view class="">
94 年龄：<view 94 年龄：<view
95 v-for="(item,index) in tag.prod_tag_age" 95 v-for="(item,index) in tag.prod_tag_age"
96 :key="index" 96 :key="index"
97 > 97 >
98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> 98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> 102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103 <view class=""> 103 <view class="">
104 颜色：<view 104 颜色：<view
105 v-for="(item,index) in tag.prod_tag_color" 105 v-for="(item,index) in tag.prod_tag_color"
106 :key="index" 106 :key="index"
107 > 107 >
108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> 108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109 </view> 109 </view>
110 </view> 110 </view>
111 </view> 111 </view>
112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> 112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113 <view class=""> 113 <view class="">
114 脸型：<view 114 脸型：<view
115 v-for="(item,index) in tag.prod_tag_face" 115 v-for="(item,index) in tag.prod_tag_face"
116 :key="index" 116 :key="index"
117 > 117 >
118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> 118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119 </view> 119 </view>
120 </view> 120 </view>
121 </view> 121 </view>
122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> 122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123 <view class=""> 123 <view class="">
124 赠品：<view 124 赠品：<view
125 v-for="(item,index) in tag.prod_tag_freesend" 125 v-for="(item,index) in tag.prod_tag_freesend"
126 :key="index" 126 :key="index"
127 > 127 >
128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> 128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129 </view> 129 </view>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> 132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133 <view class=""> 133 <view class="">
134 保险：<view 134 保险：<view
135 v-for="(item,index) in tag.prod_tag_insurance" 135 v-for="(item,index) in tag.prod_tag_insurance"
136 :key="index" 136 :key="index"
137 > 137 >
138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> 138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139 </view> 139 </view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> 142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143 <view class=""> 143 <view class="">
144 材质：<view 144 材质：<view
145 v-for="(item,index) in tag.prod_tag_metal" 145 v-for="(item,index) in tag.prod_tag_metal"
146 :key="index" 146 :key="index"
147 > 147 >
148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> 148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149 </view> 149 </view>
150 </view> 150 </view>
151 </view> 151 </view>
152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> 152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153 <view class=""> 153 <view class="">
154 个性：<view 154 个性：<view
155 v-for="(item,index) in tag.prod_tag_personal" 155 v-for="(item,index) in tag.prod_tag_personal"
156 :key="index" 156 :key="index"
157 > 157 >
158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> 158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159 </view> 159 </view>
160 </view> 160 </view>
161 </view> 161 </view>
162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> 162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163 <view class=""> 163 <view class="">
164 场景：<view 164 场景：<view
165 v-for="(item,index) in tag.prod_tag_sense" 165 v-for="(item,index) in tag.prod_tag_sense"
166 :key="index" 166 :key="index"
167 > 167 >
168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> 168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169 </view> 169 </view>
170 </view> 170 </view>
171 </view> 171 </view>
172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> 172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173 <view class=""> 173 <view class="">
174 性别：<view 174 性别：<view
175 v-for="(item,index) in tag.prod_tag_sex" 175 v-for="(item,index) in tag.prod_tag_sex"
176 :key="index" 176 :key="index"
177 > 177 >
178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> 178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179 </view> 179 </view>
180 </view> 180 </view>
181 </view> 181 </view>
182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> 182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183 <view class=""> 183 <view class="">
184 风格：<view 184 风格：<view
185 v-for="(item,index) in tag.prod_tag_style" 185 v-for="(item,index) in tag.prod_tag_style"
186 :key="index" 186 :key="index"
187 > 187 >
188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> 188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189 </view> 189 </view>
190 </view> 190 </view>
191 </view> 191 </view>
192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> 192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193 <view class=""> 193 <view class="">
194 重量：<view 194 重量：<view
195 v-for="(item,index) in tag.prod_tag_weight" 195 v-for="(item,index) in tag.prod_tag_weight"
196 :key="index" 196 :key="index"
197 > 197 >
198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> 198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199 </view> 199 </view>
200 </view> 200 </view>
201 </view> 201 </view>
202 </view> 202 </view>
203 </view> 203 </view>
204 <view 204 <view
205 class="screen-item " 205 class="screen-item "
206 v-if="current ===2" 206 v-if="current ===2"
207 > 207 >
208 <view class="customerService"> 208 <view class="customerService">
209 <view class="serviceItem"> 209 <view class="serviceItem">
210 <view class="title"> 210 <view class="title">
211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212 <text class="titleText">卖家服务</text> 212 <text class="titleText">卖家服务</text>
213 </view> 213 </view>
214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> 214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
215 </view> 215 </view>
216 <view class="serviceItem"> 216 <view class="serviceItem">
217 <view class="title"> 217 <view class="title">
218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219 <text class="titleText">平台承诺</text> 219 <text class="titleText">平台承诺</text>
220 </view> 220 </view>
221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222 </view> 222 </view>
223 <view class="serviceItem"> 223 <view class="serviceItem">
224 <view class="title"> 224 <view class="title">
225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226 <text class="titleText">正品保证</text> 226 <text class="titleText">正品保证</text>
227 </view> 227 </view>
228 <view class="itemContent">向您保证所售商品均为正品行货</view> 228 <view class="itemContent">向您保证所售商品均为正品行货</view>
229 </view> 229 </view>
230 <view class="serviceItem2"> 230 <view class="serviceItem2">
231 <view class="title"> 231 <view class="title">
232 <text class="titleText">权利申明</text> 232 <text class="titleText">权利申明</text>
233 </view> 233 </view>
234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235 </view> 235 </view>
236 <view class="serviceItem2"> 236 <view class="serviceItem2">
237 <view class="title"> 237 <view class="title">
238 <text class="titleText">价格保证</text> 238 <text class="titleText">价格保证</text>
239 </view> 239 </view>
240 <view class="itemContent"> 240 <view class="itemContent">
241 <view class="itemContent-child"> 241 <view class="itemContent-child">
242 <text class="contentTitle">平台价:</text> 242 <text class="contentTitle">平台价:</text>
243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244 </view> 244 </view>
245 <view class="itemContent-child"> 245 <view class="itemContent-child">
246 <text class="contentTitle">划线价:</text> 246 <text class="contentTitle">划线价:</text>
247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248 </view> 248 </view>
249 <view class="itemContent-child"> 249 <view class="itemContent-child">
250 <text class="contentTitle">平折扣:</text> 250 <text class="contentTitle">平折扣:</text>
251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252 </view> 252 </view>
253 <view class="itemContent-child"> 253 <view class="itemContent-child">
254 <text class="contentTitle">异常问题:</text> 254 <text class="contentTitle">异常问题:</text>
255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256 </view> 256 </view>
257 257
258 </view> 258 </view>
259 </view> 259 </view>
260 </view> 260 </view>
261 </view> 261 </view>
262 </view> 262 </view>
263 <view 263 <view
264 class="D4" 264 class="D4"
265 v-if="current !==2" 265 v-if="current !==2"
266 > 266 >
267 <view class="D4_esvalue"> 267 <view class="D4_esvalue">
268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view> 268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
269 <view class="D4_2"> 269 <view class="D4_2">
270 <view 270 <view
271 class="star" 271 class="star"
272 v-for="o in starCount" 272 v-for="o in starCount"
273 :key="o" 273 :key="o"
274 > 274 >
275 <image 275 <image
276 src="../../static/img/detail/d_star.png" 276 src="../../static/img/detail/d_star.png"
277 mode="aspectFill" 277 mode="aspectFill"
278 style="height: 26rpx; width: 28rpx;" 278 style="height: 26rpx; width: 28rpx;"
279 ></image> 279 ></image>
280 </view> 280 </view>
281 </view> 281 </view>
282 </view> 282 </view>
283 <view class="D4_list"> 283 <view class="D4_list">
284 <view 284 <view
285 v-for="(assess) in goodInfo.judge_tag" 285 v-for="(assess) in goodInfo.judge_tag"
286 :key="assess.key" 286 :key="assess.key"
287 >{{assess.name}}</view> 287 >{{assess.name}}</view>
288 </view> 288 </view>
289 </view> 289 </view>
290 <view 290 <view
291 class="D5" 291 class="D5"
292 v-if="current !==2" 292 v-if="current !==2"
293 > 293 >
294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)"> 294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
295 <image src="/static/img/detail/hr.png"></image> 295 <image src="/static/img/detail/hr.png"></image>
296 <view>商品详细</view> 296 <view>商品详细</view>
297 <image src="/static/img/detail/hr.png"></image> 297 <image src="/static/img/detail/hr.png"></image>
298 </view> 298 </view>
299 <view class="D5_all" v-html="test"> 299 <view class="D5_all" v-html="test">
300 <!-- <block> 300 <!-- <block>
301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text> 301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302 </block> --> 302 </block> -->
303 </view> 303 </view>
304 </view> 304 </view>
305 <!-- 底部菜单 --> 305 <!-- 底部菜单 -->
306 <view class="botton"> 306 <view class="botton">
307 <view 307 <view
308 @tap="toCart()" 308 @tap="toCart()"
309 class="botton_1" 309 class="botton_1"
310 > 310 >
311 <image v-bind:src="imgShop.img"></image> 311 <image v-bind:src="imgShop.img"></image>
312 <view class="botton_image">购物车</view> 312 <view class="botton_image">购物车</view>
313 </view> 313 </view>
314 <view class="botton_2"> 314 <view class="botton_2">
315 <view 315 <view
316 class="botton_input" 316 class="botton_input"
317 @tap="addCart()" 317 @tap="addCart()"
318 >加入购物车</view> 318 >加入购物车</view>
319 <view 319 <view
320 class="botton_now" 320 class="botton_now"
321 @tap="goPerchase()" 321 @tap="goPerchase()"
322 >立即购买</view> 322 >立即购买</view>
323 </view> 323 </view>
324 </view> 324 </view>
325 </view> 325 </view>
326 </template> 326 </template>
327 327
328 <script> 328 <script>
329 import store from '@/store' 329 import store from '@/store'
330 export default { 330 export default {
331 data () { 331 data () {
332 return { 332 return {
333 test: '', 333 test: '',
334 goodType: 2, 334 goodType: 2,
335 pid: 0, 335 pid: 0,
336 // 购物车数据 336 // 购物车数据
337 addCartList: { 337 addCartList: {
338 mp_id: 0, 338 mp_id: 0,
339 uid: 0, 339 uid: 0,
340 sk_id: 0, 340 sk_id: 0,
341 num: 1, 341 num: 1,
342 price: '', 342 price: '',
343 }, 343 },
344 screenItems: [ 344 screenItems: [
345 { current: 0, text: '商品介绍' }, 345 { current: 0, text: '商品介绍' },
346 { current: 1, text: '规格参数' }, 346 { current: 1, text: '规格参数' },
347 { current: 2, text: '售后保障' }, 347 { current: 2, text: '售后保障' },
348 ], 348 ],
349 current: 0, 349 current: 0,
350 starCount: 5, 350 starCount: 5,
351 parameter: [ 351 parameter: [
352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, 357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
358 ], 358 ],
359 esvalue: '宝贝好评率', 359 esvalue: '宝贝好评率',
360 introduction: { 360 introduction: {
361 material: '钛合金', 361 material: '钛合金',
362 func: '抗疲劳/防辐射', 362 func: '抗疲劳/防辐射',
363 rate: '男/女', 363 rate: '男/女',
364 }, 364 },
365 imgAll: '/static/img/detail/d8.png', 365 imgAll: '/static/img/detail/d8.png',
366 photoes: [ 366 photoes: [
367 { value: '日常办公', img: '/static/img/detail/d9.png' }, 367 { value: '日常办公', img: '/static/img/detail/d9.png' },
368 { value: '上网', img: '/static/img/detail/d10.png' }, 368 { value: '上网', img: '/static/img/detail/d10.png' },
369 { value: '追剧', img: '/static/img/detail/d11.png' }, 369 { value: '追剧', img: '/static/img/detail/d11.png' },
370 { value: '玩游戏', img: '/static/img/detail/d12.png' }, 370 { value: '玩游戏', img: '/static/img/detail/d12.png' },
371 ], 371 ],
372 imgDetail: '/static/img/detail/d13.png', 372 imgDetail: '/static/img/detail/d13.png',
373 imgShop: { 373 imgShop: {
374 img: '/static/tab-cart.png', 374 img: '/static/tab-cart.png',
375 IsShown: false, 375 IsShown: false,
376 }, 376 },
377 tag: { 377 tag: {
378 prod_tag_freesend: [{ 378 prod_tag_freesend: [{
379 label: '眼镜盒', 379 label: '眼镜盒',
380 value: '262', 380 value: '262',
381 }], 381 }],
382 }, 382 },
383 } 383 }
384 }, 384 },
385 onLoad: function ({ pid, sk_id }) { 385 onLoad: function ({ pid, sk_id: skId }) {
386 this.pid = pid 386 this.pid = pid
387 // console.log('sk_id=====>',sk_id) 387 // console.log('sk_id=====>',sk_id)
388 store.dispatch('read/fetch', { 388 store.dispatch('read/fetch', {
389 pid, 389 pid,
390 sk_id, 390 sk_id: skId,
391 }).then(() => { 391 }).then(() => {
392 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 392 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
393 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 393 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
394 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 394 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
395 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 395 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
396 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 396 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
397 this.parameter[5].slength = `${this.goodInfo.weight}mm` 397 this.parameter[5].slength = `${this.goodInfo.weight}mm`
398 this.tag = this.goodInfo.tag 398 this.tag = this.goodInfo.tag
399 this.test = this.goodInfo.prodIntro1 399 this.test = this.goodInfo.prodIntro1
400 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') 400 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
401 // addCart 401 // addCart
402 this.addCartList.price = this.goodInfo.p_sale_price 402 this.addCartList.price = this.goodInfo.p_sale_price
403 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id 403 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
404 this.addCartList.mp_id = this.goodInfo.glassData.mp_id 404 this.addCartList.mp_id = this.goodInfo.glassData.mp_id
405 this.addCartList.uid = this.$store.state.user.userInfo.uid 405 this.addCartList.uid = this.$store.state.user.userInfo.uid
406 }) 406 })
407 // console.log(this.$store.state.user.userInfo.uid + 'ssss') 407 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
408 }, 408 },
409 computed: { 409 computed: {
410 updateGoodType () { 410 updateGoodType () {
411 return this.goodType 411 return this.goodType
412 }, 412 },
413 goodInfo () { 413 goodInfo () {
414 console.log(this.$store.state.read.goodInfo) 414 console.log(this.$store.state.read.goodInfo)
415 return this.$store.state.read.goodInfo 415 return this.$store.state.read.goodInfo
416 }, 416 },
417 }, 417 },
418 methods: { 418 methods: {
419 // 前往购物车 419 // 前往购物车
420 toCart() { 420 toCart() {
421 uni.switchTab({ 421 uni.switchTab({
422 url: '/pages/cart/cart', 422 url: '/pages/cart/cart',
423 success: res => {}, 423 success: res => {},
424 fail: (error) => { console.log('跳转购物车失败======>', error) }, 424 fail: (error) => { console.log('跳转购物车失败======>', error) },
425 complete: () => { console.log('toCart') }, 425 complete: () => { console.log('toCart') },
426 }) 426 })
427 }, 427 },
428 // 加入购物车 428 // 加入购物车
429 addCart () { 429 addCart () {
430 store.dispatch('cart/addCart', { 430 store.dispatch('cart/addCart', {
431 uid: this.$store.state.user.userInfo.uid, 431 uid: this.$store.state.user.userInfo.uid,
432 openid: this.$store.state.user.userInfo.openid, 432 openid: this.$store.state.user.userInfo.openid,
433 mp_id: this.addCartList.mp_id, 433 mp_id: this.addCartList.mp_id,
434 sk_id: this.addCartList.sk_id, 434 sk_id: this.addCartList.sk_id,
435 num: this.addCartList.num, 435 num: this.addCartList.num,
436 pid: this.pid, 436 pid: this.pid,
437 price: this.addCartList.price, 437 price: this.addCartList.price,
438 checkedSKU: {}, 438 checkedSKU: {},
439 }) 439 })
440 store.dispatch('cart/getCartList', { 440 store.dispatch('cart/getCartList', {
441 uid: this.$store.state.user.userInfo.uid, // 用户id 441 uid: this.$store.state.user.userInfo.uid, // 用户id
442 }) 442 })
443 }, 443 },
444 goPerchase () { 444 goPerchase () {
445 // switch (this.updateGoodType) { 445 // switch (this.updateGoodType) {
446 // case '1': 446 // case '1':
447 console.log('goPerchase') 447 console.log('goPerchase')
448 uni.navigateTo({ 448 uni.navigateTo({
449 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 449 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
450 success: res => {}, 450 success: res => {},
451 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 451 fail: (error) => { console.log('跳转参数选择失败======>', error) },
452 complete: () => { console.log('goPerchase') }, 452 complete: () => { console.log('goPerchase') },
453 }) 453 })
454 // break 454 // break
455 // case '2': 455 // case '2':
456 // uni.navigateTo({ 456 // uni.navigateTo({
457 // url: '../detailStandard/detailStandard_k', 457 // url: '../detailStandard/detailStandard_k',
458 // success: res => {}, 458 // success: res => {},
459 // fail: () => {}, 459 // fail: () => {},
460 // complete: () => {} 460 // complete: () => {}
461 // }) 461 // })
462 // break 462 // break
463 // case '3': 463 // case '3':
464 // uni.navigateTo({ 464 // uni.navigateTo({
465 // url: '../purchaseLenses/purchaseLenses', 465 // url: '../purchaseLenses/purchaseLenses',
466 // success: res => {}, 466 // success: res => {},
467 // fail: () => {}, 467 // fail: () => {},
468 // complete: () => {} 468 // complete: () => {}
469 // }) 469 // })
470 // break 470 // break
471 // case '4': 471 // case '4':
472 // uni.navigateTo({ 472 // uni.navigateTo({
473 // url: '../detailStandard/detailStandard_sun', 473 // url: '../detailStandard/detailStandard_sun',
474 // success: res => {}, 474 // success: res => {},
475 // fail: () => {}, 475 // fail: () => {},
476 // complete: () => {} 476 // complete: () => {}
477 // }) 477 // })
478 // break 478 // break
479 // default : 479 // default :
480 // break 480 // break
481 // } 481 // }
482 }, 482 },
483 // 加入购物车 483 // 加入购物车
484 // addCart () { 484 // addCart () {
485 // store.dispatch('cart/addCart', { 485 // store.dispatch('cart/addCart', {
486 // uid: this.$store.state.user.userInfo.uid, 486 // uid: this.$store.state.user.userInfo.uid,
487 // openid: this.$store.state.user.userInfo.openid, 487 // openid: this.$store.state.user.userInfo.openid,
488 // pid: this.pid, 488 // pid: this.pid,
489 // checkedSKU: {}, 489 // checkedSKU: {},
490 // }) 490 // })
491 // store.dispatch('cart/getCartList', { 491 // store.dispatch('cart/getCartList', {
492 // uid: this.$store.state.user.userInfo.uid, // 用户id 492 // uid: this.$store.state.user.userInfo.uid, // 用户id
493 // }) 493 // })
494 // }, 494 // },
495 tabChange (e) { 495 tabChange (e) {
496 if (this.current !== e) { 496 if (this.current !== e) {
497 this.current = e 497 this.current = e
498 } 498 }
499 }, 499 },
500 }, 500 },
501 } 501 }
502 </script> 502 </script>
503 <style lang='scss'> 503 <style lang='scss'>
504 .container { 504 .container {
505 background-color: #f8f8f8; 505 background-color: #f8f8f8;
506 } 506 }
507 .D1, 507 .D1,
508 .D2, 508 .D2,
509 .D3, 509 .D3,
510 .D4, 510 .D4,
511 .D6 { 511 .D6 {
512 background: #ffffff; 512 background: #ffffff;
513 margin-bottom: 10px; 513 margin-bottom: 10px;
514 padding: 8px 20px 8px 20px; 514 padding: 8px 20px 8px 20px;
515 box-sizing: border-box; 515 box-sizing: border-box;
516 .swiperImage { 516 .swiperImage {
517 width: 684rpx; 517 width: 684rpx;
518 height: 480rpx; 518 height: 480rpx;
519 image { 519 image {
520 max-width: 100%; 520 max-width: 100%;
521 max-height: 100%; 521 max-height: 100%;
522 border-radius: 16rpx; 522 border-radius: 16rpx;
523 } 523 }
524 } 524 }
525 } 525 }
526 .D5 { 526 .D5 {
527 background: #ffffff; 527 background: #ffffff;
528 padding: 8px 20px 8px 20px; 528 padding: 8px 20px 8px 20px;
529 box-sizing: border-box; 529 box-sizing: border-box;
530 } 530 }
531 .swiperImage { 531 .swiperImage {
532 width: 100%; 532 width: 100%;
533 height: 560rpx; 533 height: 560rpx;
534 .swiper-item { 534 .swiper-item {
535 width: 100%; 535 width: 100%;
536 image { 536 image {
537 width: 100%; 537 width: 100%;
538 } 538 }
539 } 539 }
540 } 540 }
541 .D1 { 541 .D1 {
542 .D1_price { 542 .D1_price {
543 color: #eb5d3b; 543 color: #eb5d3b;
544 font-size: 18px; 544 font-size: 18px;
545 margin-top: 5px; 545 margin-top: 5px;
546 font-family: "PingFangSC-Semibold"; 546 font-family: "PingFangSC-Semibold";
547 display: flex; 547 display: flex;
548 justify-content: space-between; 548 justify-content: space-between;
549 .D1_number { 549 .D1_number {
550 color: #999999; 550 color: #999999;
551 font-size: 14px; 551 font-size: 14px;
552 font-family: "PingFangSC-Regular"; 552 font-family: "PingFangSC-Regular";
553 } 553 }
554 } 554 }
555 .D1_name { 555 .D1_name {
556 font-size: 16px; 556 font-size: 16px;
557 font-family: "PingFangSC-Semibold"; 557 font-family: "PingFangSC-Semibold";
558 margin-top: 5px; 558 margin-top: 5px;
559 .D1_name1 { 559 .D1_name1 {
560 font-weight: bold; 560 font-weight: bold;
561 font-size: 16px; 561 font-size: 16px;
562 color: #333333; 562 color: #333333;
563 } 563 }
564 } 564 }
565 .D1_spans { 565 .D1_spans {
566 font-size: 10px; 566 font-size: 10px;
567 color: #999999; 567 color: #999999;
568 margin-top: 5px; 568 margin-top: 5px;
569 span { 569 span {
570 height: 14px; 570 height: 14px;
571 margin-right: 10px; 571 margin-right: 10px;
572 } 572 }
573 } 573 }
574 } 574 }
575 .D2 { 575 .D2 {
576 font-size: 14px; 576 font-size: 14px;
577 font-family: "PingFangSC-Regular"; 577 font-family: "PingFangSC-Regular";
578 view { 578 view {
579 height: 24px; 579 height: 24px;
580 } 580 }
581 .D2_span1 { 581 .D2_span1 {
582 color: #999999; 582 color: #999999;
583 } 583 }
584 .D2_span2 { 584 .D2_span2 {
585 color: #333333; 585 color: #333333;
586 } 586 }
587 } 587 }
588 .D3 { 588 .D3 {
589 .screenBar { 589 .screenBar {
590 width: 670rpx; 590 width: 670rpx;
591 margin-top: 20rpx; 591 margin-top: 20rpx;
592 margin-bottom: 24rpx; 592 margin-bottom: 24rpx;
593 display: flex; 593 display: flex;
594 flex-direction: row; 594 flex-direction: row;
595 justify-content: space-between; 595 justify-content: space-between;
596 align-items: center; 596 align-items: center;
597 font-size: 14px; 597 font-size: 14px;
598 color: #333333; 598 color: #333333;
599 transition: all 0.2s; 599 transition: all 0.2s;
600 } 600 }
601 .screen-item { 601 .screen-item {
602 font-size: 32rpx; 602 font-size: 32rpx;
603 color: #333333; 603 color: #333333;
604 display: flex; 604 display: flex;
605 transition: all 0.2s; 605 transition: all 0.2s;
606 .D3_list { 606 .D3_list {
607 margin-bottom: 4px; 607 margin-bottom: 4px;
608 } 608 }
609 .D3_list view { 609 .D3_list view {
610 display: flex; 610 display: flex;
611 align-content: center; 611 align-content: center;
612 font-size: 14px; 612 font-size: 14px;
613 color: #333333; 613 color: #333333;
614 } 614 }
615 .D3_list image { 615 .D3_list image {
616 width: 50px; 616 width: 50px;
617 height: 25px; 617 height: 25px;
618 margin-right: 6px; 618 margin-right: 6px;
619 } 619 }
620 .D3_list span { 620 .D3_list span {
621 margin-left: 6px; 621 margin-left: 6px;
622 margin-right: 5px; 622 margin-right: 5px;
623 font-family: "PingFangSC-Regular"; 623 font-family: "PingFangSC-Regular";
624 } 624 }
625 } 625 }
626 .active { 626 .active {
627 border-bottom: 4rpx solid #ff6b4a; 627 border-bottom: 4rpx solid #ff6b4a;
628 } 628 }
629 .customerService { 629 .customerService {
630 margin-bottom: 90rpx; 630 margin-bottom: 90rpx;
631 .serviceItem { 631 .serviceItem {
632 margin-bottom: 32rpx; 632 margin-bottom: 32rpx;
633 .title { 633 .title {
634 display: flex; 634 display: flex;
635 flex-direction: row; 635 flex-direction: row;
636 align-items: center; 636 align-items: center;
637 .titleText { 637 .titleText {
638 font-size: 14px; 638 font-size: 14px;
639 color: #333333; 639 color: #333333;
640 margin-bottom: 12rpx; 640 margin-bottom: 12rpx;
641 } 641 }
642 } 642 }
643 .itemContent { 643 .itemContent {
644 font-size: 14px; 644 font-size: 14px;
645 color: #999999; 645 color: #999999;
646 margin-left: 18rpx; 646 margin-left: 18rpx;
647 } 647 }
648 } 648 }
649 .serviceItem2 { 649 .serviceItem2 {
650 margin-left: 18rpx; 650 margin-left: 18rpx;
651 margin-bottom: 32rpx; 651 margin-bottom: 32rpx;
652 .titleText { 652 .titleText {
653 font-size: 14px; 653 font-size: 14px;
654 color: #ff6b4a; 654 color: #ff6b4a;
655 } 655 }
656 .itemContent { 656 .itemContent {
657 font-size: 14px; 657 font-size: 14px;
658 color: #999999; 658 color: #999999;
659 .itemContent-child { 659 .itemContent-child {
660 margin-bottom: 40rpx; 660 margin-bottom: 40rpx;
661 .contentTitle { 661 .contentTitle {
662 border-bottom: 1px solid #ff6b4a; 662 border-bottom: 1px solid #ff6b4a;
663 } 663 }
664 } 664 }
665 } 665 }
666 } 666 }
667 } 667 }
668 } 668 }
669 .D4 { 669 .D4 {
670 .D4_esvalue { 670 .D4_esvalue {
671 font-size: 14px; 671 font-size: 14px;
672 color: #333333; 672 color: #333333;
673 display: flex; 673 display: flex;
674 justify-content: space-between; 674 justify-content: space-between;
675 margin-bottom: 10px; 675 margin-bottom: 10px;
676 .D4_2 { 676 .D4_2 {
677 width: 90px; 677 width: 90px;
678 display: flex; 678 display: flex;
679 align-items: center; 679 align-items: center;
680 justify-content: space-between; 680 justify-content: space-between;
681 } 681 }
682 } 682 }
683 .D4_esvalue view { 683 .D4_esvalue view {
684 font-size: 14px; 684 font-size: 14px;
685 color: #333333; 685 color: #333333;
686 font-weight: bold; 686 font-weight: bold;
687 } 687 }
688 .D4_list{ 688 .D4_list{
689 display: grid; 689 display: grid;
690 grid-row-gap: 10px; 690 grid-row-gap: 10px;
691 grid-column-gap: 4px; 691 grid-column-gap: 4px;
692 } 692 }
693 .D4_list view { 693 .D4_list view {
694 display: flex; 694 display: flex;
695 justify-content: center; 695 justify-content: center;
696 align-items: center; 696 align-items: center;
697 font-size: 12px; 697 font-size: 12px;
698 width: 118px; 698 width: 118px;
699 height: 24px; 699 height: 24px;
700 border-radius: 2px; 700 border-radius: 2px;
701 background: #f2f2f2; 701 background: #f2f2f2;
702 color: #666666; 702 color: #666666;
703 // letter-spacing: 1px; 703 // letter-spacing: 1px;
704 } 704 }
705 } 705 }
706 .D5 { 706 .D5 {
707 .D5_fixed1 { 707 .D5_fixed1 {
708 display: flex; 708 display: flex;
709 justify-content: space-between; 709 justify-content: space-between;
710 align-content: center; 710 align-content: center;
711 margin-bottom: 12px; 711 margin-bottom: 12px;
712 view { 712 view {
713 font-size: 14px; 713 font-size: 14px;
714 color: #333333; 714 color: #333333;
715 font-weight: bold; 715 font-weight: bold;
716 font-family: "PingFangSC-Medium"; 716 font-family: "PingFangSC-Medium";
717 line-height: 24px; 717 line-height: 24px;
718 } 718 }
719 image { 719 image {
720 width: 240rpx; 720 width: 240rpx;
721 height: 3px; 721 height: 3px;
722 margin-top: 10px; 722 margin-top: 10px;
723 } 723 }
724 } 724 }
725 .D5_all { 725 .D5_all {
726 width: 100%; 726 width: 100%;
727 margin-top: 30rpx; 727 margin-top: 30rpx;
728 margin-right: 30rpx; 728 margin-right: 30rpx;
729 margin-bottom: 180rpx; 729 margin-bottom: 180rpx;
730 font-family: "PingFangSC-Regular"; 730 font-family: "PingFangSC-Regular";
731 // border: #999999 solid 1.5px; 731 // border: #999999 solid 1.5px;
732 } 732 }
733 } 733 }
734 .D6 { 734 .D6 {
735 width: 100%; 735 width: 100%;
736 height: 430px; 736 height: 430px;
737 background: #f9f6ed; 737 background: #f9f6ed;
738 margin-bottom: 74px; 738 margin-bottom: 74px;
739 view { 739 view {
740 text-align: center; 740 text-align: center;
741 } 741 }
742 .D6_v1 { 742 .D6_v1 {
743 font-weight: bold; 743 font-weight: bold;
744 } 744 }
745 .D6_v2 { 745 .D6_v2 {
746 font-size: 14px; 746 font-size: 14px;
747 margin-bottom: 30px; 747 margin-bottom: 30px;
748 } 748 }
749 .D6_v5 { 749 .D6_v5 {
750 .D6_v5_s1 { 750 .D6_v5_s1 {
751 font-weight: bold; 751 font-weight: bold;
752 } 752 }
753 .D6_v5_s2 { 753 .D6_v5_s2 {
754 font-size: 14px; 754 font-size: 14px;
755 } 755 }
756 } 756 }
757 } 757 }
758 .botton { 758 .botton {
759 position: fixed; 759 position: fixed;
760 bottom: 0; 760 bottom: 0;
761 height: 74px; 761 height: 74px;
762 width: 100%; 762 width: 100%;
763 background: #ffffff; 763 background: #ffffff;
764 padding: 20px 20px 8px 20px; 764 padding: 20px 20px 8px 20px;
765 font-family: "PingFangSC-Regular"; 765 font-family: "PingFangSC-Regular";
766 box-sizing: border-box; 766 box-sizing: border-box;
767 display: flex; 767 display: flex;
768 justify-content: space-between; 768 justify-content: space-between;
769 align-content: center; 769 align-content: center;
770 .botton_1 { 770 .botton_1 {
771 width: 20%; 771 width: 20%;
772 height: 100%; 772 height: 100%;
773 text-align: center; 773 text-align: center;
774 color: #989898; 774 color: #989898;
775 } 775 }
776 image { 776 image {
777 width: 60%; 777 width: 60%;
778 height: 30px; 778 height: 30px;
779 } 779 }
780 .botton_image { 780 .botton_image {
781 font-size: 12px; 781 font-size: 12px;
782 text-align: center; 782 text-align: center;
783 } 783 }
784 .botton_2 { 784 .botton_2 {
785 width: 74%; 785 width: 74%;
786 height: 86%; 786 height: 86%;
787 display: grid; 787 display: grid;
788 grid-template-columns: 50% 50%; 788 grid-template-columns: 50% 50%;
789 } 789 }
790 .botton_input { 790 .botton_input {
791 display: inline-flex; 791 display: inline-flex;
792 align-items: center; 792 align-items: center;
793 justify-content: space-around; 793 justify-content: space-around;
794 background: #fff0ec; 794 background: #fff0ec;
795 font-size: 16px; 795 font-size: 16px;
796 color: #ff6b4a; 796 color: #ff6b4a;
797 border-radius: 20px 0 0 20px; 797 border-radius: 20px 0 0 20px;
798 } 798 }
799 .botton_now { 799 .botton_now {
800 display: inline-flex; 800 display: inline-flex;
801 align-items: center; 801 align-items: center;
802 justify-content: space-around; 802 justify-content: space-around;
803 background: #ff6b4a; 803 background: #ff6b4a;
804 font-size: 16px; 804 font-size: 16px;
805 color: #ffffff; 805 color: #ffffff;
806 border-radius: 0 20px 20px 0; 806 border-radius: 0 20px 20px 0;
807 } 807 }
808 } 808 }
809 </style> 809 </style>
810 810
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @a3d2bea
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)"> 3 <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)">
4 <view class="cardHeader"> 4 <view class="cardHeader">
5 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> 5 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text>
6 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> 6 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
7 <text class="orderType" v-if="status=='0'">待付款</text> 7 <text class="orderType" v-if="status=='0'">待付款</text>
8 <text class="orderType" v-if="status=='1'">待收货</text> 8 <text class="orderType" v-if="status=='1'">待收货</text>
9 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> 9 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
10 <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> 10 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
11 </view> 11 </view>
12 <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList.list" :key="orderInfo"> 12 <view class="orderCardInfo" v-for="(orderInfo, index) in orderInfoList.list" :key="index">
13 <image :src="orderInfo.imgUrl" mode="aspectFill"></image> 13 <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
14 <view class="infoText"> 14 <view class="infoText">
15 <view class="orderName">{{orderInfo.p_name}}</view> 15 <view class="orderName">{{orderInfo[0].p_name}}</view>
16 <view class="orderDescrib">{{orderInfo.p_name}}</view> 16 <view class="orderDescrib">{{orderInfo.p_name}}</view>
17 <view class="infoText-bottom"> 17 <view class="infoText-bottom">
18 <view class="markPrice">{{orderInfo.nowPrice}}</view> 18 <view class="markPrice">{{orderInfo.nowPrice}}</view>
19 <view class="buy-num">X {{orderInfo.num}}</view> 19 <view class="buy-num">X {{orderInfo.num}}</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> 23 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
24 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> 24 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
25 <view class="btns" v-if="status == '0'"> 25 <view class="btns" v-if="status == '0'">
26 <view class="btn-type1" >取消订单</view> 26 <view class="btn-type1" >取消订单</view>
27 <view class="btn-type2">去支付</view> 27 <view class="btn-type2">去支付</view>
28 </view> 28 </view>
29 <view class="btns" v-if="status == '1'"> 29 <view class="btns" v-if="status == '1'">
30 <view class="btn-type2">确认收货</view> 30 <view class="btn-type2">确认收货</view>
31 </view> 31 </view>
32 <view class="btns" v-if="status == '2'"> 32 <view class="btns" v-if="status == '2'">
33 <view class="btn-type2">再次购买</view> 33 <view class="btn-type2">再次购买</view>
34 </view> 34 </view>
35 <!-- <view class="btns" v-if="status == '3'"> 35 <!-- <view class="btns" v-if="status == '3'">
36 <view class="btn-type2">再次购买</view> 36 <view class="btn-type2">再次购买</view>
37 </view> --> 37 </view> -->
38 </view> 38 </view>
39 <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)"> 39 <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">
40 <view class="cardHeader"> 40 <view class="cardHeader">
41 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> 41 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text>
42 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> 42 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
43 <text class="orderType" v-if="status=='0'">待付款</text> 43 <text class="orderType" v-if="status=='0'">待付款</text>
44 <text class="orderType" v-if="status=='1'">待收货</text> 44 <text class="orderType" v-if="status=='1'">待收货</text>
45 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> 45 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
46 <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> 46 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
47 </view> 47 </view>
48 <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo"> 48 <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
49 <image :src="orderInfo.imgUrl" mode="aspectFill"></image> 49 <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
50 <view class="infoText"> 50 <view class="infoText">
51 <view class="orderName">{{orderInfo.p_name}}</view> 51 <view class="orderName">{{orderInfo.p_name}}</view>
52 <view class="orderDescrib">{{orderInfo.p_name}}</view> 52 <view class="orderDescrib">{{orderInfo.p_name}}</view>
53 <view class="infoText-bottom"> 53 <view class="infoText-bottom">
54 <view class="markPrice">{{orderInfo.nowPrice}}</view> 54 <view class="markPrice">{{orderInfo.nowPrice}}</view>
55 <view class="buy-num">X {{orderInfo.num}}</view> 55 <view class="buy-num">X {{orderInfo.num}}</view>
56 </view> 56 </view>
57 </view> 57 </view>
58 </view> 58 </view>
59 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> 59 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
60 <view class="btns" v-if="status == '0'"> 60 <view class="btns" v-if="status == '0'">
61 <view class="btn-type1" >取消订单</view> 61 <view class="btn-type1" >取消订单</view>
62 <view class="btn-type2">去支付</view> 62 <view class="btn-type2">去支付</view>
63 </view> 63 </view>
64 <view class="btns" v-if="status == '1'"> 64 <view class="btns" v-if="status == '1'">
65 <view class="btn-type2">确认收货</view> 65 <view class="btn-type2">确认收货</view>
66 </view> 66 </view>
67 <view class="btns" v-if="status == '2'"> 67 <view class="btns" v-if="status == '2'">
68 <view class="btn-type2">再次购买</view> 68 <view class="btn-type2">再次购买</view>
69 </view> 69 </view>
70 <!-- <view class="btns" v-if="status == '3'"> 70 <!-- <view class="btns" v-if="status == '3'">
71 <view class="btn-type2">再次购买</view> 71 <view class="btn-type2">再次购买</view>
72 </view> --> 72 </view> -->
73 </view> 73 </view>
74 </view> 74 </view>
75 </template> 75 </template>
76 76
77 <script> 77 <script>
78 export default { 78 export default {
79 props: { 79 props: {
80 /** 80 /**
81 * 订单数据 81 * 订单数据
82 */ 82 */
83 order: { 83 order: {
84 // orderId: Number, 84 // orderId: Number,
85 // img: String, 85 // img: String,
86 // name: String, 86 // name: String,
87 // originCost:String, 87 // originCost:String,
88 // price: String, 88 // price: String,
89 // orderType:Number, 89 // orderType:Number,
90 // buyNum:Number, 90 // buyNum:Number,
91 finished_time: null, 91 finished_time: null,
92 is_refound: String, 92 is_refound: String,
93 mch_id: String, 93 mch_id: String,
94 money_of_dcw: String, 94 money_of_dcw: String,
95 money_of_partner: String, 95 money_of_partner: String,
96 money_of_shop: String, 96 money_of_shop: String,
97 orderJudge: Boolean, 97 orderJudge: Boolean,
98 order_info: { 98 order_info: {
99 address:{ 99 address:{
100 cityName: String, 100 cityName: String,
101 countyName: String, 101 countyName: String,
102 detailInfo: String, 102 detailInfo: String,
103 errMsg: String, 103 errMsg: String,
104 nationalCode: String, 104 nationalCode: String,
105 postalCode: String, 105 postalCode: String,
106 provinceName: String, 106 provinceName: String,
107 telNumber: String, 107 telNumber: String,
108 userName: String, 108 userName: String,
109 }, 109 },
110 cartinfo: ["127"], 110 cartinfo: ["127"],
111 keyname: "330_1588911391", 111 keyname: "330_1588911391",
112 lefttime: Number, 112 lefttime: Number,
113 list:[ 113 list:[
114 { 114 {
115 cart_id: "127", 115 cart_id: "127",
116 imgUrl: String, 116 imgUrl: String,
117 img_index_url: null, 117 img_index_url: null,
118 memo: String, 118 memo: String,
119 mp_id: String, 119 mp_id: String,
120 nowPrice: String, 120 nowPrice: String,
121 num: String, 121 num: String,
122 oldPrice: Number, 122 oldPrice: Number,
123 p_discount: String, 123 p_discount: String,
124 p_name: String, 124 p_name: String,
125 p_root_index: String, 125 p_root_index: String,
126 p_sale_price: String, 126 p_sale_price: String,
127 peopleName: String, 127 peopleName: String,
128 pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"], 128 pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"],
129 pid: String, 129 pid: String,
130 sk_id: String, 130 sk_id: String,
131 } 131 }
132 ], 132 ],
133 orderDesc: String, 133 orderDesc: String,
134 total_fee: Number, 134 total_fee: Number,
135 }, 135 },
136 partner_uid: String, 136 partner_uid: String,
137 pay_cate: String, 137 pay_cate: String,
138 pay_id: String, 138 pay_id: String,
139 pay_time: String, 139 pay_time: String,
140 pay_wood_desc: String, 140 pay_wood_desc: String,
141 pay_wood_id: String, 141 pay_wood_id: String,
142 prepay_id: String, 142 prepay_id: String,
143 re_check_staus: String, 143 re_check_staus: String,
144 shopid: String, 144 shopid: String,
145 split_userid: String, 145 split_userid: String,
146 status: String, 146 status: String,
147 // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价 147 // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价
148 total_fee: String, 148 total_fee: String,
149 uid: String, 149 uid: String,
150 }, 150 },
151 /** 151 /**
152 * 当前选择 152 * 当前选择
153 */ 153 */
154 current:Number 154 current:Number
155 155
156 }, 156 },
157 created() { 157 created() {
158 console.log(this.order); 158 console.log(this.order);
159 // console.log(this.order.status ); 159 // console.log(this.order.status );
160 // console.log(this.current); 160 // console.log(this.current);
161 }, 161 },
162 computed:{ 162 computed:{
163 status(){ 163 status(){
164 return this.order.status 164 return this.order.status
165 }, 165 },
166 orderInfoList(){ 166 orderInfoList(){
167 console.log('this.order.order_info[0]', this.order)
167 return this.order.order_info[0] 168 return this.order.order_info[0]
168 } 169 }
169 }, 170 },
170 data() { 171 data() {
171 return { 172 return {
172 }; 173 };
173 }, 174 },
174 methods:{ 175 methods:{
175 toRefundment(){ 176 toRefundment(){
176 uni.navigateTo({ 177 uni.navigateTo({
177 url: '../refundment/refundment', 178 url: '../refundment/refundment',
178 success: res => {}, 179 success: res => {},
179 fail: () => {}, 180 fail: () => {},
180 complete: () => {} 181 complete: () => {}
181 }); 182 });
182 }, 183 },
183 toOrderInfo(status,payId){ 184 toOrderInfo(status,payId){
184 console.log(status,payId) 185 console.log(status,payId)
185 switch(status){ 186 switch(status){
186 // 0待付款 1待收货 2已收货 3 已评价 187 // 0待付款 1待收货 2已收货 3 已评价
187 case '0': 188 case '0':
188 uni.navigateTo({ 189 uni.navigateTo({
189 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 190 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
190 fail(errMsg) { 191 fail(errMsg) {
191 console.log(errMsg) 192 console.log(errMsg)
192 } 193 }
193 }) 194 })
194 break; 195 break;
195 case '1': 196 case '1':
196 uni.navigateTo({ 197 uni.navigateTo({
197 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 198 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
198 fail(errMsg) { 199 fail(errMsg) {
199 console.log(errMsg) 200 console.log(errMsg)
200 } 201 }
201 }) 202 })
202 203
203 break; 204 break;
204 case '2 || 3': 205 case '2 || 3':
205 uni.navigateTo({ 206 uni.navigateTo({
206 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 207 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
207 fail(errMsg) { 208 fail(errMsg) {
208 console.log(errMsg) 209 console.log(errMsg)
209 } 210 }
210 }) 211 })
211 break; 212 break;
212 default: 213 default:
213 break; 214 break;
214 215
215 } 216 }
216 } 217 }
217 } 218 }
218 } 219 }
219 </script> 220 </script>
220 221
221 <style lang="scss"> 222 <style lang="scss">
222 .card{ 223 .card{
223 width: 670rpx; 224 width: 670rpx;
224 height: 478rpx; 225 height: 478rpx;
225 background: #FFFFFF; 226 background: #FFFFFF;
226 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); 227 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
227 border-radius: 8px; 228 border-radius: 8px;
228 border-radius: 8px; 229 border-radius: 8px;
229 margin-top: 20rpx; 230 margin-top: 20rpx;
230 padding: 40rpx; 231 padding: 40rpx;
231 box-sizing: border-box; 232 box-sizing: border-box;
232 .cardHeader{ 233 .cardHeader{
233 width: 100%; 234 width: 100%;
234 height: 40rpx; 235 height: 40rpx;
235 display: flex; 236 display: flex;
236 justify-content: space-between; 237 justify-content: space-between;
237 align-items: center; 238 align-items: center;
238 .orderId{ 239 .orderId{
239 font-size: 12px; 240 font-size: 12px;
240 color: #999999; 241 color: #999999;
241 } 242 }
242 .orderType{ 243 .orderType{
243 font-size: 14px; 244 font-size: 14px;
244 color: #FF6B4A; 245 color: #FF6B4A;
245 } 246 }
246 } 247 }
247 .orderCardInfo{ 248 .orderCardInfo{
248 width: 100%; 249 width: 100%;
249 height: 188rpx; 250 height: 188rpx;
250 display: flex; 251 display: flex;
251 flex-direction: row; 252 flex-direction: row;
252 justify-content: space-between; 253 justify-content: space-between;
253 align-items: center; 254 align-items: center;
254 margin-top: 40rpx; 255 margin-top: 40rpx;
255 image{ 256 image{
256 height: 188rpx; 257 height: 188rpx;
257 width: 188rpx; 258 width: 188rpx;
258 margin-right: 24rpx; 259 margin-right: 24rpx;
259 } 260 }
260 .infoText{ 261 .infoText{
261 display: flex; 262 display: flex;
262 flex-direction: column; 263 flex-direction: column;
263 justify-content: space-between; 264 justify-content: space-between;
264 align-items: flex-start; 265 align-items: flex-start;
265 height: 188rpx; 266 height: 188rpx;
266 width: 368rpx; 267 width: 368rpx;
267 } 268 }
268 .orderName{ 269 .orderName{
269 font-size: 14px; 270 font-size: 14px;
270 color: #333333; 271 color: #333333;
271 display: -webkit-box; 272 display: -webkit-box;
272 overflow: hidden; 273 overflow: hidden;
273 -webkit-box-orient: vertical; 274 -webkit-box-orient: vertical;
274 -webkit-line-clamp: 2; 275 -webkit-line-clamp: 2;
275 } 276 }
276 .orderDescrib{ 277 .orderDescrib{
277 font-size: 12px; 278 font-size: 12px;
278 color: #999999; 279 color: #999999;
279 display: -webkit-box; 280 display: -webkit-box;
280 overflow: hidden; 281 overflow: hidden;
281 -webkit-box-orient: vertical; 282 -webkit-box-orient: vertical;
282 -webkit-line-clamp: 2; 283 -webkit-line-clamp: 2;
283 } 284 }
284 .infoText-bottom{ 285 .infoText-bottom{
285 display: flex; 286 display: flex;
286 flex-direction: row; 287 flex-direction: row;
287 justify-content: flex-start; 288 justify-content: flex-start;
288 align-items: center; 289 align-items: center;
289 width: 100%; 290 width: 100%;
290 .markPrice{ 291 .markPrice{
291 font-size: 14px; 292 font-size: 14px;
292 color: #FF6B4A; 293 color: #FF6B4A;
293 margin-right: 20rpx; 294 margin-right: 20rpx;
294 } 295 }
295 .buy-num{ 296 .buy-num{
296 font-size: 12px; 297 font-size: 12px;
297 color: #999999; 298 color: #999999;
298 } 299 }
299 } 300 }
300 } 301 }
301 .payPrice{ 302 .payPrice{
302 text-align: right; 303 text-align: right;
303 margin: 20rpx 0; 304 margin: 20rpx 0;
304 font-size: 14px; 305 font-size: 14px;
305 color: #333333; 306 color: #333333;
306 .priceNum{ 307 .priceNum{
307 font-size: 14px; 308 font-size: 14px;
308 color: #FF6B4A; 309 color: #FF6B4A;
309 } 310 }
310 } 311 }
311 .btns{ 312 .btns{
312 display: flex; 313 display: flex;
313 justify-content: flex-end; 314 justify-content: flex-end;
314 align-items: center; 315 align-items: center;
315 .btn-type1{ 316 .btn-type1{
316 height: 48rpx; 317 height: 48rpx;
317 width: 156rpx; 318 width: 156rpx;
318 border: 1px solid #FF6B4A; 319 border: 1px solid #FF6B4A;
319 border-radius: 12px; 320 border-radius: 12px;
320 border-radius: 12px; 321 border-radius: 12px;
321 text-align: center; 322 text-align: center;
322 line-height: 48rpx; 323 line-height: 48rpx;
323 font-size: 12px; 324 font-size: 12px;
324 color: #FF6B4A; 325 color: #FF6B4A;
325 } 326 }
326 .btn-type2{ 327 .btn-type2{
327 height: 48rpx; 328 height: 48rpx;
328 width: 140rpx; 329 width: 140rpx;
329 background: #FF6B4A; 330 background: #FF6B4A;
330 border-radius: 12px; 331 border-radius: 12px;
331 border-radius: 12px; 332 border-radius: 12px;
332 text-align: center; 333 text-align: center;
333 line-height: 48rpx; 334 line-height: 48rpx;
334 font-size: 12px; 335 font-size: 12px;
335 color: #FFFFFF; 336 color: #FFFFFF;
336 margin-left: 20rpx; 337 margin-left: 20rpx;
337 } 338 }
338 } 339 }
339 } 340 }
340 </style> 341 </style>
341 342
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @a3d2bea
1 <!-- 订单待付款 待收货 --> 1 <!-- 订单待付款 待收货 -->
2 <template> 2 <template>
3 <view class="content"> 3 <view class="content">
4 <!-- 待付款 --> 4 <!-- 待付款 -->
5 <view 5 <view
6 class="order-time" 6 class="order-time"
7 v-if="status == '0'" 7 v-if="status == '0'"
8 > 8 >
9 <text>请在</text> 9 <text>请在</text>
10 <uni-countdown 10 <uni-countdown
11 color="#EC5D3B" 11 color="#EC5D3B"
12 splitor-color="#EC5D3B" 12 splitor-color="#EC5D3B"
13 :show-day="false" 13 :show-day="false"
14 :hour="0" 14 :hour="0"
15 :second="getTime" 15 :second="getTime"
16 @timeup=timeup 16 @timeup=timeup
17 ></uni-countdown> 17 ></uni-countdown>
18 <text>内完成付款</text> 18 <text>内完成付款</text>
19 </view> 19 </view>
20 <!-- 待收货 --> 20 <!-- 待收货 -->
21 <view 21 <view
22 class="headerBanner" 22 class="headerBanner"
23 v-if="status == '1'" 23 v-if="status == '1'"
24 > 24 >
25 <view class="bannerLeft"> 25 <view class="bannerLeft">
26 <view class="T1">卖家已发货</view> 26 <view class="T1">卖家已发货</view>
27 <view class="T2">还剩 确认收货</view> 27 <view class="T2">还剩 确认收货</view>
28 </view> 28 </view>
29 <image 29 <image
30 src="../../static/car.png" 30 src="../../static/car.png"
31 mode="aspectFill" 31 mode="aspectFill"
32 ></image> 32 ></image>
33 </view> 33 </view>
34 <view class="order"> 34 <view class="order">
35 <view class="order-user"> 35 <view class="order-user">
36 <view class="order-user-head"> 36 <view class="order-user-head">
37 <text class="p1">{{orderAddressInfo.userName}}</text> 37 <text class="p1">{{orderAddressInfo.userName}}</text>
38 <text class="p2">{{orderAddressInfo.telNumber}}</text> 38 <text class="p2">{{orderAddressInfo.telNumber}}</text>
39 </view> 39 </view>
40 <view class="order-user-body"> 40 <view class="order-user-body">
41 <image src="../../static/myorder-paying-location.png"></image> 41 <image src="../../static/myorder-paying-location.png"></image>
42 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text> 42 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
43 </view> 43 </view>
44 </view> 44 </view>
45 <view class="order-info"> 45 <view class="order-info">
46 <view 46 <view
47 class="order-info-head" 47 class="order-info-head"
48 v-for="(orderInfoListItem,index) in orderInfoList" 48 v-for="(orderInfoListItem,index) in orderInfoList"
49 :key="index" 49 :key="index"
50 > 50 >
51 <image 51 <image
52 :src="orderInfoListItem.imgUrl" 52 :src="orderInfoListItem.imgUrl"
53 mode="aspectFill" 53 mode="aspectFill"
54 ></image> 54 ></image>
55 <view class="order-info-head-r"> 55 <view class="order-info-head-r">
56 <text class="p1">{{orderInfoListItem.p_name}}</text> 56 <text class="p1">{{orderInfoListItem.p_name}}</text>
57 <view 57 <view
58 class="p2" 58 class="p2"
59 style="margin: 0;" 59 style="margin: 0;"
60 > 60 >
61 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 61 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
62 <!-- <view class="arrow"></view> --> 62 <!-- <view class="arrow"></view> -->
63 </view> 63 </view>
64 <view class="infoText-bottom"> 64 <view class="infoText-bottom">
65 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view> 65 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
66 <view class="buy-num">X {{orderInfoListItem.num}}</view> 66 <view class="buy-num">X {{orderInfoListItem.num}}</view>
67 </view> 67 </view>
68 </view> 68 </view>
69 </view> 69 </view>
70 <!-- <view class="order-info-goodsnum"> 70 <!-- <view class="order-info-goodsnum">
71 <text>X1</text> 71 <text>X1</text>
72 </view> --> 72 </view> -->
73 <text class="order-info-freight"> 73 <text class="order-info-freight">
74 <text class="p1">运费</text> 74 <text class="p1">运费</text>
75 <text class="p2">{{orderInfo.trans_price}}</text> 75 <text class="p2">免运费</text>
76 </text> 76 </text>
77 <text class="order-info-discount"> 77 <text class="order-info-discount">
78 <text class="p1">优惠</text> 78 <text class="p1">优惠</text>
79 <text class="p2">-￥{{totalDiscount}}</text> 79 <text class="p2">-￥{{totalDiscount}}</text>
80 </text> 80 </text>
81 <text class="order-info-price"> 81 <text class="order-info-price">
82 <text class="p1">实付</text> 82 <text class="p1">实付</text>
83 <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text> 83 <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text>
84 </text> 84 </text>
85 <text class="order-info-num"> 85 <text class="order-info-num">
86 <text>订单号：{{payId}}</text> 86 <text>订单号：{{payId}}</text>
87 </text> 87 </text>
88 <text class="order-info-time"> 88 <text class="order-info-time">
89 <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text> 89 <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text>
90 </text> 90 </text>
91 <view class="order-info-hr"></view> 91 <view class="order-info-hr"></view>
92 <view class="order-info-contact"> 92 <view class="order-info-contact">
93 <image src="../../static/myorder-paying-contact.png"></image> 93 <image src="../../static/myorder-paying-contact.png"></image>
94 <text>联系客服</text> 94 <text>联系客服</text>
95 </view> 95 </view>
96 </view> 96 </view>
97 </view> 97 </view>
98 <view 98 <view
99 class="order-confim" 99 class="order-confim"
100 v-if="status == '0'" 100 v-if="status == '0'"
101 > 101 >
102 <button 102 <button
103 class="b1" 103 class="b1"
104 @click="cancleOrder" 104 @click="cancleOrder"
105 >取消订单</button> 105 >取消订单</button>
106 <button 106 <button
107 class="b2" 107 class="b2"
108 @click="paylog" 108 @click="paylog"
109 >立即支付</button> 109 >立即支付</button>
110 </view> 110 </view>
111 111
112 <view 112 <view
113 class="order-confim" 113 class="order-confim"
114 v-if="status == '1'" 114 v-if="status == '1'"
115 > 115 >
116 <!-- <button class="b1">取消订单</button> --> 116 <!-- <button class="b1">取消订单</button> -->
117 <button 117 <button
118 class="b2" 118 class="b2"
119 @click="confirmOrder" 119 @click="confirmOrder"
120 >确认收货</button> 120 >确认收货</button>
121 </view> 121 </view>
122 </view> 122 </view>
123 </template> 123 </template>
124 124
125 <script> 125 <script>
126 import store from '@/store' 126 import store from '@/store'
127 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 127 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
128 export default { 128 export default {
129 components: { 129 components: {
130 UniCountdown 130 UniCountdown,
131 }, 131 },
132 data () { 132 data () {
133 return { 133 return {
134 payId: '', 134 payId: '',
135 payTime: '', 135 payTime: '',
136 status: '', 136 status: '', // status 0 待付款 1 已发货
137 uid: '', 137 uid: '',
138 openid: '', 138 openid: '',
139 lefttime: 0 139 lefttime: 0,
140 isPay: 0,
140 } 141 }
141 }, 142 },
142 onLoad: function (option) { 143 onLoad: function (option) {
143 console.log(option) 144 console.log(option)
144 this.payId = option.payId 145 this.payId = option.payId
145 this.status = option.status 146 this.status = option.status
147 this.isPay = option.isPay
146 const openid = uni.getStorageSync('openid') 148 const openid = uni.getStorageSync('openid')
147 const uid = this.$store.state.user.uid 149 const uid = this.$store.state.user.uid
148 this.uid = uid 150 this.uid = uid
149 this.openid = openid 151 this.openid = openid
150 store.dispatch('orderRead/getOrderInfo', { 152 store.dispatch('orderRead/getOrderInfo', {
151 pay_id: this.payId, 153 pay_id: this.payId,
152 uid: '1', 154 uid: '1',
153 openid: openid 155 openid: openid,
154 }) 156 })
155
156 // this.orderInfo = this.$store.state.orderRead.orderInfo 157 // this.orderInfo = this.$store.state.orderRead.orderInfo
157 }, 158 },
159 // 若从支付页面跳转过来，返回直接返回到首页
160 onBackPress(option) {
161 if (option.from === 'backbutton' && this.isPay) {
162 uni.switchTab({
163 url: '/pages/index/index',
164 })
165 return true // 阻止默认返回行为
166 }
167 },
158 computed: { 168 computed: {
159 // 获取订单详细信息 169 // 获取订单详细信息
160 orderInfo () { 170 orderInfo () {
161 console.log('orderInfo', this.$store.state.orderRead.orderInfo) 171 console.log('orderInfo', this.$store.state.orderRead.orderInfo)
162 return this.$store.state.orderRead.orderInfo || {} 172 return this.$store.state.orderRead.orderInfo || {}
163 }, 173 },
164 orderInfoList () { 174 orderInfoList () {
165 const orderInfoList = this.orderInfo.order_info[0].list 175 const orderInfoList = this.orderInfo.order_info[0].list
166 return orderInfoList 176 return orderInfoList
167 }, 177 },
168 // 获取订单地址信息 178 // 获取订单地址信息
169 orderAddressInfo () { 179 orderAddressInfo () {
170 return this.orderInfo.order_info[0].address 180 return this.orderInfo.order_info[0].address
171 }, 181 },
172 // 订单付款时间 182 // 订单付款时间
173 getTime () { 183 getTime () {
174 return this.orderInfo.order_info[0].lefttime 184 return this.orderInfo.order_info[0].lefttime
175 }, 185 },
176 // 计算总优惠额 186 // 计算总优惠额
177 totalDiscount () { 187 totalDiscount () {
178 const discountInfoList = this.orderInfo.discount_info 188 const discountInfoList = this.orderInfo.discount_info
179 let totalDiscount = 0 189 let totalDiscount = 0
180 if (discountInfoList) { 190 if (discountInfoList) {
181 discountInfoList.map((discountItem, index) => { 191 discountInfoList.map((discountItem, index) => {
182 totalDiscount += Number(discountItem.value) 192 totalDiscount += Number(discountItem.value)
183 }) 193 })
184 } 194 }
185 // console.log(totalDiscount) 195 // console.log(totalDiscount)
186 return totalDiscount 196 return totalDiscount
187 } 197 },
188 }, 198 },
189 methods: { 199 methods: {
190 // 取消订单 200 // 取消订单
191 timeup () { 201 timeup () {
192 this.cancleOrder() 202 this.cancleOrder()
193 }, 203 },
194 cancleOrder () { 204 cancleOrder () {
195 const uid = this.uid 205 const uid = this.uid
196 const openid = this.openid 206 const openid = this.openid
197 uni.showModal({ 207 uni.showModal({
198 title: '提示', 208 title: '提示',
199 content: '现在取消，订单不可恢复哦，确认取消吗？', 209 content: '现在取消，订单不可恢复哦，确认取消吗？',
200 success: function (res) { 210 success: function (res) {
201 if (res.confirm) { 211 if (res.confirm) {
202 store.dispatch('cancelOrder/cancel', { 212 store.dispatch('cancelOrder/cancel', {
203 keyname: '1', 213 keyname: '1',
204 uid: uid, 214 uid: uid,
205 openid: openid 215 openid: openid,
206 }) 216 })
207 } else if (res.cancel) { 217 } else if (res.cancel) {
208 console.log('用户点击取消') 218 console.log('用户点击取消')
209 } 219 }
210 } 220 },
211 }) 221 })
212 }, 222 },
213 paylog () { 223 paylog () {
214 224
215 }, 225 },
216 confirmOrder () { 226 confirmOrder () {
217 store.dispatch('statusConfirm/confirm', { 227 store.dispatch('statusConfirm/confirm', {
218 uid: this.uid, 228 uid: this.uid,
219 openid: this.openid, 229 openid: this.openid,
220 oldway: '1', 230 oldway: '1',
221 way: '2', 231 way: '2',
222 pay_id: this.payId, 232 pay_id: this.payId,
223 judgeContent: '', 233 judgeContent: '',
224 orderInfo: this.orderInfo.order_info 234 orderInfo: this.orderInfo.order_info,
225 }).then( 235 }).then(
226 setTimeout(() => { 236 setTimeout(() => {
227 uni.navigateBack() 237 uni.navigateBack()
228 }, 1500) 238 }, 1500),
229 ) 239 )
230 } 240 },
231 }, 241 },
232 filters: { 242 filters: {
233 timerChange: function(value) { 243 timerChange: function(value) {
234 var newDate = new Date() 244 var newDate = new Date()
235 newDate.setTime(value * 1000) 245 newDate.setTime(value * 1000)
236 return newDate.toLocaleString() 246 return newDate.toLocaleString()
237 } 247 },
238 } 248 },
239 } 249 }
240 </script> 250 </script>
241 251
242 <style lang="scss" scoped> 252 <style lang="scss" scoped>
243 .content { 253 .content {
244 min-height: 100vh; 254 min-height: 100vh;
245 display: flex; 255 display: flex;
246 flex-direction: column; 256 flex-direction: column;
247 justify-content: flex-start; 257 justify-content: flex-start;
248 align-items: center; 258 align-items: center;
249 background-color: #f2f2f2; 259 background-color: #f2f2f2;
250 } 260 }
251 261
252 .order { 262 .order {
253 margin-bottom: 112rpx; 263 margin-bottom: 112rpx;
254 background: #f2f2f2; 264 background: #f2f2f2;
255 margin-top: 140rpx; 265 margin-top: 140rpx;
256 width: 670rpx; 266 width: 670rpx;
257 } 267 }
258 268
259 .order-time { 269 .order-time {
260 width: 100%; 270 width: 100%;
261 height: 140rpx; 271 height: 140rpx;
262 background-color: #fff; 272 background-color: #fff;
263 display: flex; 273 display: flex;
264 justify-content: center; 274 justify-content: center;
265 align-items: center; 275 align-items: center;
266 position: fixed; 276 position: fixed;
267 top: 0; 277 top: 0;
268 left: 0; 278 left: 0;
269 text { 279 text {
270 // font-family: PingFangSC-Regular; 280 // font-family: PingFangSC-Regular;
271 // margin-top: 48rpx; 281 // margin-top: 48rpx;
272 font-size: 14px; 282 font-size: 14px;
273 color: #333333; 283 color: #333333;
274 letter-spacing: -0.26px; 284 letter-spacing: -0.26px;
275 } 285 }
276 .p2 { 286 .p2 {
277 // font-family: DINAlternate-Bold; 287 // font-family: DINAlternate-Bold;
278 margin: 42rpx 20rpx 0 20rpx; 288 margin: 42rpx 20rpx 0 20rpx;
279 font-size: 18px; 289 font-size: 18px;
280 color: #ec5d3b; 290 color: #ec5d3b;
281 letter-spacing: -0.34px; 291 letter-spacing: -0.34px;
282 } 292 }
283 } 293 }
284 .headerBanner { 294 .headerBanner {
285 width: 100%; 295 width: 100%;
286 height: 140rpx; 296 height: 140rpx;
287 background: #4a90e2; 297 background: #4a90e2;
288 padding: 26rpx 60rpx 24rpx 60rpx; 298 padding: 26rpx 60rpx 24rpx 60rpx;
289 box-sizing: border-box; 299 box-sizing: border-box;
290 color: #ffffff; 300 color: #ffffff;
291 display: flex; 301 display: flex;
292 justify-content: space-between; 302 justify-content: space-between;
293 align-items: center; 303 align-items: center;
294 position: fixed; 304 position: fixed;
295 top: 0; 305 top: 0;
296 left: 0; 306 left: 0;
297 .bannerLeft { 307 .bannerLeft {
298 font-size: 36rpx; 308 font-size: 36rpx;
299 display: flex; 309 display: flex;
300 flex-direction: column; 310 flex-direction: column;
301 justify-content: center; 311 justify-content: center;
302 align-items: center; 312 align-items: center;
303 .T2 { 313 .T2 {
304 font-size: 24rpx; 314 font-size: 24rpx;
305 } 315 }
306 } 316 }
307 image { 317 image {
308 height: 56rpx; 318 height: 56rpx;
309 width: 72rpx; 319 width: 72rpx;
310 } 320 }
311 } 321 }
312 322
313 .order-user { 323 .order-user {
314 height: 228rpx; 324 height: 228rpx;
315 background: #ffffff; 325 background: #ffffff;
316 border-radius: 14rpx; 326 border-radius: 14rpx;
317 margin: 0 auto; 327 margin: 0 auto;
318 margin-top: 20rpx; 328 margin-top: 20rpx;
319 margin-bottom: 20rpx; 329 margin-bottom: 20rpx;
320 .order-user-head { 330 .order-user-head {
321 display: flex; 331 display: flex;
322 height: 108rpx; 332 height: 108rpx;
323 align-items: center; 333 align-items: center;
324 margin-left: 126rpx; 334 margin-left: 126rpx;
325 .p1 { 335 .p1 {
326 // font-family: PingFangSC-Regular; 336 // font-family: PingFangSC-Regular;
327 font-size: 14px; 337 font-size: 14px;
328 color: #333333; 338 color: #333333;
329 letter-spacing: -0.26px; 339 letter-spacing: -0.26px;
330 margin-right: 20rpx; 340 margin-right: 20rpx;
331 } 341 }
332 .p2 { 342 .p2 {
333 // font-family: PingFangSC-Regular; 343 // font-family: PingFangSC-Regular;
334 font-size: 14px; 344 font-size: 14px;
335 color: #999999; 345 color: #999999;
336 letter-spacing: -0.26px; 346 letter-spacing: -0.26px;
337 } 347 }
338 } 348 }
339 .order-user-body { 349 .order-user-body {
340 display: flex; 350 display: flex;
341 width: 100%; 351 width: 100%;
342 image { 352 image {
343 width: 24px; 353 width: 24px;
344 height: 26px; 354 height: 26px;
345 margin: 12rpx 32rpx 0 40rpx; 355 margin: 12rpx 32rpx 0 40rpx;
346 } 356 }
347 .p3 { 357 .p3 {
348 // font-family: PingFangSC-Semibold; 358 // font-family: PingFangSC-Semibold;
349 font-size: 14px; 359 font-size: 14px;
350 color: #333333; 360 color: #333333;
351 letter-spacing: -0.26px; 361 letter-spacing: -0.26px;
352 } 362 }
353 } 363 }
354 } 364 }
355 365
356 .order-info { 366 .order-info {
357 background-color: #fff; 367 background-color: #fff;
358 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); 368 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
359 border-radius: 16rpx; 369 border-radius: 16rpx;
360 margin: 0 auto; 370 margin: 0 auto;
361 view { 371 view {
362 margin-left: 40rpx; 372 margin-left: 40rpx;
363 } 373 }
364 text { 374 text {
365 font-size: 14px; 375 font-size: 14px;
366 } 376 }
367 .order-info-head { 377 .order-info-head {
368 display: flex; 378 display: flex;
369 padding-top: 40rpx; 379 padding-top: 40rpx;
370 image { 380 image {
371 height: 188rpx; 381 height: 188rpx;
372 width: 188rpx; 382 width: 188rpx;
373 } 383 }
374 .order-info-head-r { 384 .order-info-head-r {
375 margin: 0; 385 margin: 0;
376 width: 368rpx; 386 width: 368rpx;
377 margin-left: 24rpx; 387 margin-left: 24rpx;
378 // margin-top: 40rpx; 388 // margin-top: 40rpx;
379 text { 389 text {
380 display: block; 390 display: block;
381 } 391 }
382 // .arrow{ 392 // .arrow{
383 // width: 0; 393 // width: 0;
384 // height: 0; 394 // height: 0;
385 // border-left: 5px transparent; 395 // border-left: 5px transparent;
386 // border-right: 5px transparent; 396 // border-right: 5px transparent;
387 // border-top: 5px #979797; 397 // border-top: 5px #979797;
388 // border-bottom: 0 transparent; 398 // border-bottom: 0 transparent;
389 // border-style: solid; 399 // border-style: solid;
390 // position: relative; 400 // position: relative;
391 // // transform: scaleY(-1); 401 // // transform: scaleY(-1);
392 // } 402 // }
393 // .arrow::after{ 403 // .arrow::after{
394 // content: ''; 404 // content: '';
395 // position: absolute; 405 // position: absolute;
396 // top: -6.5px; 406 // top: -6.5px;
397 // left: -5px; 407 // left: -5px;
398 // border-left: 5px transparent; 408 // border-left: 5px transparent;
399 // border-right: 5px transparent; 409 // border-right: 5px transparent;
400 // border-top: 5px #FFFFFF; 410 // border-top: 5px #FFFFFF;
401 // border-bottom: 0 transparent; 411 // border-bottom: 0 transparent;
402 // border-style: solid; 412 // border-style: solid;
403 // } 413 // }
404 .p1 { 414 .p1 {
405 min-height: 40px; 415 min-height: 40px;
406 // font-family: PingFangSC-Regular; 416 // font-family: PingFangSC-Regular;
407 font-size: 14px; 417 font-size: 14px;
408 color: #333333; 418 color: #333333;
409 letter-spacing: -0.26px; 419 letter-spacing: -0.26px;
410 line-height: 18px; 420 line-height: 18px;
411 // line-height: 20px; 421 // line-height: 20px;
412 } 422 }
413 .p2 { 423 .p2 {
414 height: 34px; 424 height: 34px;
415 padding: 1px 0 3px 0; 425 padding: 1px 0 3px 0;
416 // font-family: PingFangSC-Regular; 426 // font-family: PingFangSC-Regular;
417 font-size: 12px; 427 font-size: 12px;
418 color: #999999; 428 color: #999999;
419 letter-spacing: -0.23px; 429 letter-spacing: -0.23px;
420 } 430 }
421 .infoText-bottom { 431 .infoText-bottom {
422 display: flex; 432 display: flex;
423 flex-direction: row; 433 flex-direction: row;
424 justify-content: flex-start; 434 justify-content: flex-start;
425 align-items: center; 435 align-items: center;
426 width: 100%; 436 width: 100%;
427 margin-left: 0; 437 margin-left: 0;
428 .markPrice { 438 .markPrice {
429 font-size: 14px; 439 font-size: 14px;
430 color: #ff6b4a; 440 color: #ff6b4a;
431 margin-right: 20rpx; 441 margin-right: 20rpx;
432 margin-left: 0rpx; 442 margin-left: 0rpx;
433 } 443 }
434 .buy-num { 444 .buy-num {
435 font-size: 12px; 445 font-size: 12px;
436 color: #999999; 446 color: #999999;
437 } 447 }
438 } 448 }
439 } 449 }
440 } 450 }
441 // .order-info-goodsnum { 451 // .order-info-goodsnum {
442 // display: flex; 452 // display: flex;
443 // align-items: center; 453 // align-items: center;
444 // justify-content: flex-end; 454 // justify-content: flex-end;
445 // text { 455 // text {
446 // margin-right: 44rpx; 456 // margin-right: 44rpx;
447 // // ont-family: PingFangSC-Regular; 457 // // ont-family: PingFangSC-Regular;
448 // font-size: 12px; 458 // font-size: 12px;
449 // color: #999999; 459 // color: #999999;
450 // letter-spacing: -0.23px; 460 // letter-spacing: -0.23px;
451 // } 461 // }
452 // } 462 // }
453 .order-info-freight { 463 .order-info-freight {
454 display: block; 464 display: block;
455 margin-left: 40rpx; 465 margin-left: 40rpx;
456 margin-top: 22rpx; 466 margin-top: 22rpx;
457 .p1 { 467 .p1 {
458 // font-family: PingFangSC-Regular; 468 // font-family: PingFangSC-Regular;
459 font-size: 14px; 469 font-size: 14px;
460 color: #333333; 470 color: #333333;
461 letter-spacing: -0.26px; 471 letter-spacing: -0.26px;
462 line-height: 18px; 472 line-height: 18px;
463 margin-right: 24px; 473 margin-right: 24px;
464 } 474 }
465 .p2 { 475 .p2 {
466 // font-family: PingFangSC-Regular; 476 // font-family: PingFangSC-Regular;
467 font-size: 14px; 477 font-size: 14px;
468 color: #ff6b4a; 478 color: #ff6b4a;
469 letter-spacing: -0.26px; 479 letter-spacing: -0.26px;
470 } 480 }
471 } 481 }
472 .order-info-discount { 482 .order-info-discount {
473 display: block; 483 display: block;
474 margin-left: 40rpx; 484 margin-left: 40rpx;
475 margin-top: 24rpx; 485 margin-top: 24rpx;
476 .p1 { 486 .p1 {
477 // font-family: PingFangSC-Regular; 487 // font-family: PingFangSC-Regular;
478 font-size: 14px; 488 font-size: 14px;
479 color: #333333; 489 color: #333333;
480 letter-spacing: -0.26px; 490 letter-spacing: -0.26px;
481 line-height: 18px; 491 line-height: 18px;
482 margin-right: 24px; 492 margin-right: 24px;
483 } 493 }
484 .p2 { 494 .p2 {
485 // font-family: PingFangSC-Regular; 495 // font-family: PingFangSC-Regular;
486 font-size: 14px; 496 font-size: 14px;
487 color: #ff6b4a; 497 color: #ff6b4a;
488 letter-spacing: -0.26px; 498 letter-spacing: -0.26px;
489 } 499 }
490 } 500 }
491 .order-info-price { 501 .order-info-price {
492 display: block; 502 display: block;
493 margin-left: 40rpx; 503 margin-left: 40rpx;
494 margin-top: 24rpx; 504 margin-top: 24rpx;
495 .p1 { 505 .p1 {
496 // font-family: PingFangSC-Semibold; 506 // font-family: PingFangSC-Semibold;
497 font-size: 14px; 507 font-size: 14px;
498 color: #333333; 508 color: #333333;
499 letter-spacing: -0.26px; 509 letter-spacing: -0.26px;
500 line-height: 18px; 510 line-height: 18px;
501 margin-right: 24px; 511 margin-right: 24px;
502 } 512 }
503 .p2 { 513 .p2 {
504 // font-family: PingFangSC-Semibold; 514 // font-family: PingFangSC-Semibold;
505 font-size: 14px; 515 font-size: 14px;
506 color: #ff6b4a; 516 color: #ff6b4a;
507 letter-spacing: -0.26px; 517 letter-spacing: -0.26px;
508 } 518 }
509 } 519 }
510 .order-info-num { 520 .order-info-num {
511 display: block; 521 display: block;
512 margin-left: 40rpx; 522 margin-left: 40rpx;
513 margin-top: 44rpx; 523 margin-top: 44rpx;
514 text { 524 text {
515 // font-family: PingFangSC-Regular; 525 // font-family: PingFangSC-Regular;
516 font-size: 12px; 526 font-size: 12px;
517 color: #999999; 527 color: #999999;
518 letter-spacing: -0.23px; 528 letter-spacing: -0.23px;
519 } 529 }
520 } 530 }
521 .order-info-time { 531 .order-info-time {
522 display: block; 532 display: block;
523 margin: 8rpx 0 48rpx 40rpx; 533 margin: 8rpx 0 48rpx 40rpx;
524 text { 534 text {
525 // font-family: PingFangSC-Regular; 535 // font-family: PingFangSC-Regular;
526 font-size: 12px; 536 font-size: 12px;
527 color: #999999; 537 color: #999999;
528 letter-spacing: -0.23px; 538 letter-spacing: -0.23px;
529 } 539 }
530 } 540 }
531 .order-info-hr { 541 .order-info-hr {
532 width: 520rpx; 542 width: 520rpx;
533 height: 1px; 543 height: 1px;
534 background-color: #e9e9e9; 544 background-color: #e9e9e9;
535 margin-bottom: 20rpx; 545 margin-bottom: 20rpx;
536 } 546 }
537 .order-info-contact { 547 .order-info-contact {
538 display: flex; 548 display: flex;
539 padding-bottom: 28rpx; 549 padding-bottom: 28rpx;
540 image { 550 image {
541 width: 19px; 551 width: 19px;
542 height: 16px; 552 height: 16px;
543 } 553 }
544 text { 554 text {
545 // font-family: PingFangSC-Regular; 555 // font-family: PingFangSC-Regular;
546 margin-left: 20rpx; 556 margin-left: 20rpx;
547 font-size: 14px; 557 font-size: 14px;
548 color: #333333; 558 color: #333333;
549 letter-spacing: -0.26px; 559 letter-spacing: -0.26px;
550 line-height: 18px; 560 line-height: 18px;
551 } 561 }
552 } 562 }
553 } 563 }
554 564
555 .order-confim { 565 .order-confim {
556 display: flex; 566 display: flex;
557 align-items: center; 567 align-items: center;
558 justify-content: flex-end; 568 justify-content: flex-end;
559 // z-index: 999; 569 // z-index: 999;
560 width: 100%; 570 width: 100%;
561 height: 112rpx; 571 height: 112rpx;
562 position: fixed; 572 position: fixed;
563 bottom: 0; 573 bottom: 0;
564 background: #ffffff; 574 background: #ffffff;
565 button { 575 button {
566 width: 204rpx; 576 width: 204rpx;
567 height: 80rpx; 577 height: 80rpx;
568 border: 1px solid #ff6b4a; 578 border: 1px solid #ff6b4a;
569 border-radius: 40rpx; 579 border-radius: 40rpx;
570 font-size: 32rpx; 580 font-size: 32rpx;
571 letter-spacing: -0.3px; 581 letter-spacing: -0.3px;
572 margin-right: 0; 582 margin-right: 0;
573 } 583 }
574 .b1 { 584 .b1 {
575 // font-family: PingFangSC-Regular; 585 // font-family: PingFangSC-Regular;
576 color: #ff6b4a; 586 color: #ff6b4a;
577 background-color: #ffffff; 587 background-color: #ffffff;
578 } 588 }
579 .b2 { 589 .b2 {
580 // font-family: PingFangSC-Regular; 590 // font-family: PingFangSC-Regular;
581 background-color: #ff6b4a; 591 background-color: #ff6b4a;
582 color: #ffffff; 592 color: #ffffff;
583 margin: 0 26rpx 0 20rpx; 593 margin: 0 26rpx 0 20rpx;
584 } 594 }
585 } 595 }
586 </style> 596 </style>
File was created 1 /*
2 * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
3 * Digest Algorithm, as defined in RFC 1321.
4 * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
5 * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
6 * Distributed under the BSD License
7 */
8
9 /*
10 * Configurable variables. You may need to tweak these to be compatible with
11 * the server-side, but the defaults work in most cases.
12 */
13 var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */
14 var b64pad = ""; /* base-64 pad character. "=" for strict RFC compliance */
15 var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */
16
17 /*
18 * These are the functions you'll usually want to call
19 * They take string arguments and return either hex or base-64 encoded strings
20 */
21 function hex_md5(s) {
22 return binl2hex(core_md5(str2binl(s), s.length * chrsz));
23 }
24
25 function b64_md5(s) {
26 return binl2b64(core_md5(str2binl(s), s.length * chrsz));
27 }
28
29 function str_md5(s) {
30 return binl2str(core_md5(str2binl(s), s.length * chrsz));
31 }
32
33 function hex_hmac_md5(key, data) {
34 return binl2hex(core_hmac_md5(key, data));
35 }
36
37 function b64_hmac_md5(key, data) {
38 return binl2b64(core_hmac_md5(key, data));
39 }
40
41 function str_hmac_md5(key, data) {
42 return binl2str(core_hmac_md5(key, data));
43 }
44
45 /*
46 * Perform a simple self-test to see if the VM is working
47 */
48 function md5_vm_test() {
49 return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
50 }
51
52 /*
53 * Calculate the MD5 of an array of little-endian words, and a bit length
54 */
55 function core_md5(x, len) {
56 /* append padding */
57 x[len >> 5] |= 0x80 << ((len) % 32);
58 x[(((len + 64) >>> 9) << 4) + 14] = len;
59
60 var a = 1732584193;
61 var b = -271733879;
62 var c = -1732584194;
63 var d = 271733878;
64
65 for (var i = 0; i < x.length; i += 16) {
66 var olda = a;
67 var oldb = b;
68 var oldc = c;
69 var oldd = d;
70
71 a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936);
72 d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586);
73 c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819);
74 b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330);
75 a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897);
76 d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426);
77 c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341);
78 b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983);
79 a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416);
80 d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417);
81 c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);
82 b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);
83 a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682);
84 d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);
85 c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);
86 b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329);
87
88 a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510);
89 d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632);
90 c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713);
91 b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302);
92 a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691);
93 d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083);
94 c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);
95 b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848);
96 a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438);
97 d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690);
98 c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961);
99 b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501);
100 a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467);
101 d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784);
102 c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473);
103 b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);
104
105 a = md5_hh(a, b, c, d, x[i + 5], 4, -378558);
106 d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463);
107 c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562);
108 b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);
109 a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060);
110 d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353);
111 c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632);
112 b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);
113 a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174);
114 d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222);
115 c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979);
116 b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189);
117 a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487);
118 d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);
119 c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520);
120 b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651);
121
122 a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844);
123 d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415);
124 c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);
125 b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055);
126 a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571);
127 d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606);
128 c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);
129 b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799);
130 a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359);
131 d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);
132 c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380);
133 b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649);
134 a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070);
135 d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);
136 c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259);
137 b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551);
138
139 a = safe_add(a, olda);
140 b = safe_add(b, oldb);
141 c = safe_add(c, oldc);
142 d = safe_add(d, oldd);
143 }
144 return Array(a, b, c, d);
145
146 }
147
148 /*
149 * These functions implement the four basic operations the algorithm uses.
150 */
151 function md5_cmn(q, a, b, x, s, t) {
152 return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b);
153 }
154
155 function md5_ff(a, b, c, d, x, s, t) {
156 return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
157 }
158
159 function md5_gg(a, b, c, d, x, s, t) {
160 return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
161 }
162
163 function md5_hh(a, b, c, d, x, s, t) {
164 return md5_cmn(b ^ c ^ d, a, b, x, s, t);
165 }
166
167 function md5_ii(a, b, c, d, x, s, t) {
168 return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
169 }
170
171 /*
172 * Calculate the HMAC-MD5, of a key and some data
173 */
174 function core_hmac_md5(key, data) {
175 var bkey = str2binl(key);
176 if (bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
177
178 var ipad = Array(16),
179 opad = Array(16);
180 for (var i = 0; i < 16; i++) {
181 ipad[i] = bkey[i] ^ 0x36363636;
182 opad[i] = bkey[i] ^ 0x5C5C5C5C;
183 }
184
185 var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
186 return core_md5(opad.concat(hash), 512 + 128);
187 }
188
189 /*
190 * Add integers, wrapping at 2^32. This uses 16-bit operations internally
191 * to work around bugs in some JS interpreters.
192 */
193 function safe_add(x, y) {
194 var lsw = (x & 0xFFFF) + (y & 0xFFFF);
195 var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
196 return (msw << 16) | (lsw & 0xFFFF);
197 }
198
199 /*
200 * Bitwise rotate a 32-bit number to the left.
201 */
202 function bit_rol(num, cnt) {
203 return (num << cnt) | (num >>> (32 - cnt));
204 }
205
206 /*
207 * Convert a string to an array of little-endian words
208 * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
209 */
210 function str2binl(str) {
211 var bin = Array();
212 var mask = (1 << chrsz) - 1;
213 for (var i = 0; i < str.length * chrsz; i += chrsz)
214 bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (i % 32);
215 return bin;
216 }
217
218 /*
219 * Convert an array of little-endian words to a string
220 */
221 function binl2str(bin) {
222 var str = "";
223 var mask = (1 << chrsz) - 1;
224 for (var i = 0; i < bin.length * 32; i += chrsz)
225 str += String.fromCharCode((bin[i >> 5] >>> (i % 32)) & mask);
226 return str;
227 }
228
229 /*
230 * Convert an array of little-endian words to a hex string.
231 */
232 function binl2hex(binarray) {
233 var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
234 var str = "";
235 for (var i = 0; i < binarray.length * 4; i++) {
236 str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) +
237 hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF);
238 }
239 return str;
240 }
241
242 /*
243 * Convert an array of little-endian words to a base-64 string
244 */
245 function binl2b64(binarray) {
246 var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
247 var str = "";
248 for (var i = 0; i < binarray.length * 4; i += 3) {
249 var triplet = (((binarray[i >> 2] >> 8 * (i % 4)) & 0xFF) << 16) |
250 (((binarray[i + 1 >> 2] >> 8 * ((i + 1) % 4)) & 0xFF) << 8) |
251 ((binarray[i + 2 >> 2] >> 8 * ((i + 2) % 4)) & 0xFF);
252 for (var j = 0; j < 4; j++) {
253 if (i * 8 + j * 6 > binarray.length * 32) str += b64pad;
254 else str += tab.charAt((triplet >> 6 * (3 - j)) & 0x3F);
255 }
256 }
257 return str;
258 }
259 module.exports = {
260 MD5: hex_md5
261 }