吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (7)
Showing 4 changed files   Show diff stats
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @cb58acb
... ... @@ -62,8 +62,8 @@
62 62 <text class="remarks">支持7天无理由退货 顺丰发货</text>
63 63 <view class="priceBox">
64 64 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
65   - ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
66   - </text></view>
  65 + ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
  66 + </text></view>
67 67 <view class="counter">
68 68 <view
69 69 class="btn"
... ... @@ -82,12 +82,13 @@
82 82 </view>
83 83 </view>
84 84 <view class="infoBottom">
85   - <view class="norm">规格 <text >
86   - <!-- 长度超出变省略号未做 -->
87   - <block
88   - v-for="(item, index) in current"
89   - :key="index"
90   - >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block></block>
  85 + <view class="norm">规格 <text>
  86 + <!-- 长度超出变省略号未做 -->
  87 + <block
  88 + v-for="(item, index) in current"
  89 + :key="index"
  90 + >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
  91 + </block>
91 92 </text></view>
92 93 <view class="shippingMethod">配送方式 <text>快递</text></view>
93 94 <view class="message">买家留言
... ... @@ -170,71 +171,73 @@
170 171 </template>
171 172  
172 173 <script>
173   -import store from '@/store'
  174 +import store from "@/store";
174 175  
175 176 export default {
176 177 data() {
177 178 return {
178   - addAddress: '添加收货地址',
  179 + addAddress: "添加收货地址",
179 180 count: 1,
180 181 pid: 0,
181 182 disabled: false,
182   - freight: 0.00,
  183 + freight: 0.0,
183 184 showAddress: false,
184   - note: '',
  185 + note: "",
185 186 addressInfo: {
186   - address: '',
187   - },
  187 + address: ""
  188 + }
188 189 // isAnonymous:
189   - }
  190 + };
190 191 },
191 192 onLoad({ pid, addressId, isCart }) {
192   - this.pid = pid
  193 + this.pid = pid;
193 194 // 若已经选择地址
194 195 if (addressId) {
195   - store.dispatch('address/details', {
196   - add_id: addressId,
197   - }).then(({ code, data }) => {
198   - if (code === 1) {
199   - console.log('code', code, data)
200   - this.showAddress = true
201   - this.addressInfo = data
202   - }
203   - })
  196 + store
  197 + .dispatch("address/details", {
  198 + add_id: addressId
  199 + })
  200 + .then(({ code, data }) => {
  201 + if (code === 1) {
  202 + console.log("code", code, data);
  203 + this.showAddress = true;
  204 + this.addressInfo = data;
  205 + }
  206 + });
204 207 } else {
205   - store.dispatch('address/default').then(({ code, data }) => {
  208 + store.dispatch("address/default").then(({ code, data }) => {
206 209 if (code === 1) {
207   - console.log('code', code, data)
208   - this.showAddress = true
209   - this.addressInfo = data
  210 + console.log("code", code, data);
  211 + this.showAddress = true;
  212 + this.addressInfo = data;
210 213 }
211   - })
  214 + });
212 215 }
213   - store.dispatch('read/fetch', {
214   - pid,
215   - })
  216 + store.dispatch("read/fetch", {
  217 + pid
  218 + });
216 219 },
217 220 computed: {
218   - goodInfo () {
219   - console.log('state', this.$store.state)
220   - return this.$store.state.read.goodInfo
221   - },
222   - skuInfo () {
223   - return this.$store.state.order.param.sk_id_arr
  221 + goodInfo() {
  222 + console.log("state", this.$store.state);
  223 + return this.$store.state.read.goodInfo;
224 224 },
225   - attrList () {
226   - return this.$store.state.order.param.attrList
  225 + skuInfo() {
  226 + return this.$store.state.order.param.sk_id_arr;
227 227 },
228   - current () {
229   - return this.$store.state.order.param.current
  228 + attrList() {
  229 + return this.$store.state.order.param.attrList;
230 230 },
  231 + current() {
  232 + return this.$store.state.order.param.current;
  233 + }
231 234 },
232 235 methods: {
233 236 counter(isadd) {
234 237 if (isadd) {
235   - this.count++
  238 + this.count++;
236 239 } else {
237   - this.count <= 1 ? this.disabled = true : this.count--
  240 + this.count <= 1 ? (this.disabled = true) : this.count--;
238 241 }
239 242 },
240 243 // 跳转添加地址页面
... ... @@ -242,32 +245,36 @@ export default {
242 245 uni.navigateTo({
243 246 url: `../address/addressList?edit=${1}`,
244 247 success: res => {},
245   - fail: (error) => { console.log('跳转到地址列表页面失败====>', error) },
246   - complete: () => {},
247   - })
  248 + fail: error => {
  249 + console.log("跳转到地址列表页面失败====>", error);
  250 + },
  251 + complete: () => {}
  252 + });
248 253 },
249 254 // 下单
250 255 orderBuild() {
251   - console.log('this', this.$store.state)
252   - const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
253   - store.dispatch('order/buyNow', {
254   - pid: skId.pid,
255   - sk_id: skId.sk_id,
256   - number: this.count,
257   - mp_id: mpId,
258   - address: JSON.stringify(this.addressInfo),
259   - totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
260   - liuyan: this.note,
261   - dir: 1,
262   - }).then((res) => {
263   - this.pay(res.data)
264   - })
  256 + console.log("this", this.$store.state);
  257 + const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param;
  258 + store
  259 + .dispatch("order/buyNow", {
  260 + pid: skId.pid,
  261 + sk_id: skId.sk_id,
  262 + number: this.count,
  263 + mp_id: mpId,
  264 + address: JSON.stringify(this.addressInfo),
  265 + totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
  266 + liuyan: this.note,
  267 + dir: 1
  268 + })
  269 + .then(res => {
  270 + this.pay(res.data);
  271 + });
265 272 },
266 273 // 支付
267 274 pay(res) {
268   - console.log('pay', res)
269   - const { data, exKeyName: keyName } = res
270   - const uid = uni.getStorageSync('uid')
  275 + console.log("pay", res);
  276 + const { data, exKeyName: keyName } = res;
  277 + const uid = uni.getStorageSync("uid");
271 278 const fieldSet = {
272 279 openid: this.$store.state.user.userInfo.openid,
273 280 uid: this.$store.state.user.userInfo.uid,
... ... @@ -275,20 +282,20 @@ export default {
275 282 payCate: 2020,
276 283 payMoney: Number(this.skuInfo.real_price) * this.count * 100,
277 284 payWoodId: `fcdj-${uid}-${keyName}`,
278   - nonceStr: 'asfafasfasfasfasf',
279   - signType: 'MD5',
  285 + nonceStr: "asfafasfasfasfasf",
  286 + signType: "MD5",
280 287 app_uid: 2020,
281 288 timeStamp: new Date().getTime().toString(),
282 289 billInfo: JSON.stringify(data),
283   - keyname: keyName,
284   - }
285   - console.log('fieldSet', fieldSet)
286   - store.dispatch('order/pay', fieldSet).then((res) => {
287   - console.log('res', res)
288   - })
289   - },
290   - },
291   -}
  290 + keyname: keyName
  291 + };
  292 + console.log("fieldSet", fieldSet);
  293 + store.dispatch("order/pay", fieldSet).then(res => {
  294 + console.log("res", res);
  295 + });
  296 + }
  297 + }
  298 +};
292 299 </script>
293 300  
294 301 <style lang="scss">
... ...
src/pages/refundment/Refundways.vue
Diff comments   View file @cb58acb
1 1 <template>
2   - <view class="container" v-bind:style="{height: curheight+'px'}">
3   - <view class="refund" v-for="(items) in refund" :key="items.key">
4   - <view class="detail">
5   - <view class="detail_img"><image v-bind:src="items.img"></image></view>
6   - <view class="detail2">
7   - <view class="detail_name">{{items.name}}</view>
8   - <view class="detail_standard">规格：{{items.standard}}</view>
9   - <view class="detail_price">
10   - <span>￥{{items.price}}</span>
11   - <span>X{{items.number}}</span>
12   - </view>
13   - </view>
14   - </view>
15   - <view class="refund_price">
16   - <span class="refund_price1">退款金额</span>
17   - <span class="refund_price2">￥{{items.refundprice}}</span>
18   - </view>
19   - <view class="refund_reason">
20   - <view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
21   - </view>
22   - <view class="refund_reason">
23   - <view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
24   - </view>
25   - <view class="refund_reason">
26   - <view>换货<image src="/static/img/detail/xiala.png"></image></view>
27   - </view>
  2 + <view
  3 + class="container"
  4 + v-bind:style="{height: curheight+'px'}"
  5 + >
  6 + <view
  7 + class="refund"
  8 + v-for="(items) in refund"
  9 + :key="items.key"
  10 + >
  11 + <view class="detail">
  12 + <view class="detail_img">
  13 + <image v-bind:src="items.img"></image>
28 14 </view>
  15 + <view class="detail2">
  16 + <view class="detail_name">{{items.name}}</view>
  17 + <view class="detail_standard">规格：{{items.standard}}</view>
  18 + <view class="detail_price">
  19 + <span>￥{{items.price}}</span>
  20 + <span>X{{items.number}}</span>
  21 + </view>
  22 + </view>
  23 + </view>
  24 + <view class="refund_price">
  25 + <span class="refund_price1">退款金额</span>
  26 + <span class="refund_price2">￥{{items.refundprice}}</span>
  27 + </view>
  28 + <view class="refund_reason">
  29 + <view>仅退款<image src="/static/img/detail/xiala.png"></image>
  30 + </view>
  31 + </view>
  32 + <view class="refund_reason">
  33 + <view>退款退货<image src="/static/img/detail/xiala.png"></image>
  34 + </view>
  35 + </view>
  36 + <view class="refund_reason">
  37 + <view>换货<image src="/static/img/detail/xiala.png"></image>
  38 + </view>
  39 + </view>
29 40 </view>
  41 + </view>
30 42 </template>
31 43  
32 44 <script>
33 45 export default {
34   - //获取浏览器高度
35   - beforeMount(height){
36   - var h = document.documentElement.clientHeight || document.body.clientHeight;
37   - this.curheight = h-44;
38   -
39   - },
40   - data(){
41   - return{
42   - curheight:0, //浏览器高度
43   - refund:[
44   - {
45   - key:0,
46   - img:'/static/img/detail/d1.png',
47   - name:'商品名称',
48   - standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
49   - price: 180,
50   - number: 1,
51   - refundprice: 110,
52   - refund_img:'/static/img/detail/refund_img.png',
53   - }
54   - ],
55   - }
56   - }
57   -}
  46 + //获取浏览器高度
  47 + beforeMount(height) {
  48 + var h = document.documentElement.clientHeight || document.body.clientHeight;
  49 + this.curheight = h - 44;
  50 + },
  51 + data() {
  52 + return {
  53 + curheight: 0, //浏览器高度
  54 + refund: [
  55 + {
  56 + key: 0,
  57 + img: "/static/img/detail/d1.png",
  58 + name: "商品名称",
  59 + standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻",
  60 + price: 180,
  61 + number: 1,
  62 + refundprice: 110,
  63 + refund_img: "/static/img/detail/refund_img.png"
  64 + }
  65 + ]
  66 + };
  67 + }
  68 +};
58 69 </script>
59 70  
60 71 <style lang="scss">
61   -
62   -.container{
63   - background: #F2F2F2;
64   - padding-top: 10px;
65   - box-sizing: border-box;
  72 +.container {
  73 + background: #f2f2f2;
  74 + padding-top: 10px;
  75 + box-sizing: border-box;
66 76 }
67   -.refund{
68   - width: 90%;
69   - height: 300px;
70   - margin: 0 auto;
71   - background: #FFFFFF;
72   - box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
73   - border-radius: 8px;
74   - padding: 14px;
75   - box-sizing: border-box;
  77 +.refund {
  78 + width: 90%;
  79 + height: 300px;
  80 + margin: 0 auto;
  81 + background: #ffffff;
  82 + box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
  83 + border-radius: 8px;
  84 + padding: 14px;
  85 + box-sizing: border-box;
76 86 }
77   -.detail{
78   - display: flex;
79   - justify-content: space-between;
80   - font-family: PingFangSC-Regular;
81   - margin-bottom: 20px;
82   - .detail2{
83   - width: 64%;
84   - view{
85   - margin-bottom: 8px;
86   - }
87   - .detail_name{
88   - font-size: 14px;
89   - color:#333333;
90   - }
91   - .detail_standard{
92   - font-size: 12px;
93   - color: #999999;
94   - }
95   - .detail_price{
96   - font-size: 14px;
97   - color: #999999;
98   - display: flex;
99   - justify-content: space-between;
100   - }
  87 +.detail {
  88 + display: flex;
  89 + justify-content: space-between;
  90 + font-family: PingFangSC-Regular;
  91 + margin-bottom: 20px;
  92 + .detail2 {
  93 + width: 64%;
  94 + view {
  95 + margin-bottom: 8px;
101 96 }
102   - .detail_img{
103   - width: 188rpx;
104   - height: 188rpx;
105   - border-radius: 40px;
106   - image{
107   - width: 100%;
108   - height: 100%;
109   - }
  97 + .detail_name {
  98 + font-size: 14px;
  99 + color: #333333;
110 100 }
111   -}
112   -
113   -.refund_price{
114   - font-family: PingFangSC-Semibold;
115   - font-size: 14px;
116   - color: #333333;
117   - letter-spacing: -0.26px;
118   - line-height: 18px;
119   - margin-bottom: 26px;
120   - .refund_price1{
121   - font-weight: bold;
122   - margin-right: 16px;
  101 + .detail_standard {
  102 + font-size: 12px;
  103 + color: #999999;
  104 + }
  105 + .detail_price {
  106 + font-size: 14px;
  107 + color: #999999;
  108 + display: flex;
  109 + justify-content: space-between;
123 110 }
124   - .refund_price2{
125   - color: #FF6B4A;
  111 + }
  112 + .detail_img {
  113 + width: 188rpx;
  114 + height: 188rpx;
  115 + border-radius: 40px;
  116 + image {
  117 + width: 100%;
  118 + height: 100%;
126 119 }
  120 + }
127 121 }
128   -.refund_reason{
129   - margin-top: 16px;
130   - margin-bottom: 16px;
131   - font-family: PingFangSC-Regular;
  122 +
  123 +.refund_price {
  124 + font-family: PingFangSC-Semibold;
  125 + font-size: 14px;
  126 + color: #333333;
  127 + letter-spacing: -0.26px;
  128 + line-height: 18px;
  129 + margin-bottom: 26px;
  130 + .refund_price1 {
  131 + font-weight: bold;
  132 + margin-right: 16px;
  133 + }
  134 + .refund_price2 {
  135 + color: #ff6b4a;
  136 + }
  137 +}
  138 +.refund_reason {
  139 + margin-top: 16px;
  140 + margin-bottom: 16px;
  141 + font-family: PingFangSC-Regular;
  142 + font-size: 12px;
  143 + color: #333333;
  144 + letter-spacing: -0.23px;
  145 + line-height: 18px;
  146 + view {
  147 + display: inline-block;
132 148 font-size: 12px;
133 149 color: #333333;
134 150 letter-spacing: -0.23px;
135 151 line-height: 18px;
136   - view{
137   - display: inline-block;
138   - font-size: 12px;
139   - color: #333333;
140   - letter-spacing: -0.23px;
141   - line-height: 18px;
142   - width: 90%;
143   - image{
144   - width: 30rpx;
145   - height: 24rpx;
146   - float: right;
147   - }
  152 + width: 90%;
  153 + image {
  154 + width: 30rpx;
  155 + height: 24rpx;
  156 + float: right;
148 157 }
  158 + }
149 159 }
150   -
151   -
152 160 </style>
153 161 \ No newline at end of file
... ...
src/pages/refundment/refundWays.vue
Diff comments   View file @cb58acb
1 1 <template>
2   - <view class="container" v-bind:style="{height: curheight+'px'}">
3   - <view class="refund" v-for="(items) in refund" :key="items.key">
4   - <view class="detail">
5   - <view class="detail_img"><image v-bind:src="items.img"></image></view>
6   - <view class="detail2">
7   - <view class="detail_name">{{items.name}}</view>
8   - <view class="detail_standard">规格：{{items.standard}}</view>
9   - <view class="detail_price">
10   - <span>￥{{items.price}}</span>
11   - <span>X{{items.number}}</span>
12   - </view>
13   - </view>
14   - </view>
15   - <view class="refund_price">
16   - <span class="refund_price1">退款金额</span>
17   - <span class="refund_price2">￥{{items.refundprice}}</span>
18   - </view>
19   - <view class="refund_reason">
20   - <view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
21   - </view>
22   - <view class="refund_reason">
23   - <view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
24   - </view>
25   - <view class="refund_reason">
26   - <view>换货<image src="/static/img/detail/xiala.png"></image></view>
27   - </view>
  2 + <view
  3 + class="container"
  4 + v-bind:style="{height: curheight+'px'}"
  5 + >
  6 + <view
  7 + class="refund"
  8 + v-for="(items) in refund"
  9 + :key="items.key"
  10 + >
  11 + <view class="detail">
  12 + <view class="detail_img">
  13 + <image v-bind:src="items.img"></image>
28 14 </view>
  15 + <view class="detail2">
  16 + <view class="detail_name">{{items.name}}</view>
  17 + <view class="detail_standard">规格：{{items.standard}}</view>
  18 + <view class="detail_price">
  19 + <span>￥{{items.price}}</span>
  20 + <span>X{{items.number}}</span>
  21 + </view>
  22 + </view>
  23 + </view>
  24 + <view class="refund_price">
  25 + <span class="refund_price1">退款金额</span>
  26 + <span class="refund_price2">￥{{items.refundprice}}</span>
  27 + </view>
  28 + <view class="refund_reason">
  29 + <view>仅退款<image src="/static/img/detail/xiala.png"></image>
  30 + </view>
  31 + </view>
  32 + <view class="refund_reason">
  33 + <view>退款退货<image src="/static/img/detail/xiala.png"></image>
  34 + </view>
  35 + </view>
  36 + <view class="refund_reason">
  37 + <view>换货<image src="/static/img/detail/xiala.png"></image>
  38 + </view>
  39 + </view>
29 40 </view>
  41 + </view>
30 42 </template>
31 43  
32 44 <script>
33 45 export default {
34   - //获取浏览器高度
35   - beforeMount(height){
36   - var h = document.documentElement.clientHeight || document.body.clientHeight;
37   - this.curheight = h-44;
38   -
39   - },
40   - data(){
41   - return{
42   - curheight:0, //浏览器高度
43   - refund:[
44   - {
45   - key:0,
46   - img:'/static/img/detail/d1.png',
47   - name:'商品名称',
48   - standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
49   - price: 180,
50   - number: 1,
51   - refundprice: 110,
52   - refund_img:'/static/img/detail/refund_img.png',
53   - }
54   - ],
55   - }
56   - }
57   -}
  46 + //获取浏览器高度
  47 + beforeMount(height) {
  48 + var h = document.documentElement.clientHeight || document.body.clientHeight;
  49 + this.curheight = h - 44;
  50 + },
  51 + data() {
  52 + return {
  53 + curheight: 0, //浏览器高度
  54 + refund: [
  55 + {
  56 + key: 0,
  57 + img: "/static/img/detail/d1.png",
  58 + name: "商品名称",
  59 + standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻",
  60 + price: 180,
  61 + number: 1,
  62 + refundprice: 110,
  63 + refund_img: "/static/img/detail/refund_img.png"
  64 + }
  65 + ]
  66 + };
  67 + }
  68 +};
58 69 </script>
59 70  
60 71 <style lang="scss">
61   -
62   -.container{
63   - background: #F2F2F2;
64   - padding-top: 10px;
65   - box-sizing: border-box;
  72 +.container {
  73 + background: #f2f2f2;
  74 + padding-top: 10px;
  75 + box-sizing: border-box;
66 76 }
67   -.refund{
68   - width: 90%;
69   - height: 300px;
70   - margin: 0 auto;
71   - background: #FFFFFF;
72   - box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
73   - border-radius: 8px;
74   - padding: 14px;
75   - box-sizing: border-box;
  77 +.refund {
  78 + width: 90%;
  79 + height: 300px;
  80 + margin: 0 auto;
  81 + background: #ffffff;
  82 + box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
  83 + border-radius: 8px;
  84 + padding: 14px;
  85 + box-sizing: border-box;
76 86 }
77   -.detail{
78   - display: flex;
79   - justify-content: space-between;
80   - font-family: PingFangSC-Regular;
81   - margin-bottom: 20px;
82   - .detail2{
83   - width: 64%;
84   - view{
85   - margin-bottom: 8px;
86   - }
87   - .detail_name{
88   - font-size: 14px;
89   - color:#333333;
90   - }
91   - .detail_standard{
92   - font-size: 12px;
93   - color: #999999;
94   - }
95   - .detail_price{
96   - font-size: 14px;
97   - color: #999999;
98   - display: flex;
99   - justify-content: space-between;
100   - }
  87 +.detail {
  88 + display: flex;
  89 + justify-content: space-between;
  90 + font-family: PingFangSC-Regular;
  91 + margin-bottom: 20px;
  92 + .detail2 {
  93 + width: 64%;
  94 + view {
  95 + margin-bottom: 8px;
101 96 }
102   - .detail_img{
103   - width: 188rpx;
104   - height: 188rpx;
105   - border-radius: 40px;
106   - image{
107   - width: 100%;
108   - height: 100%;
109   - }
  97 + .detail_name {
  98 + font-size: 14px;
  99 + color: #333333;
110 100 }
111   -}
112   -
113   -.refund_price{
114   - font-family: PingFangSC-Semibold;
115   - font-size: 14px;
116   - color: #333333;
117   - letter-spacing: -0.26px;
118   - line-height: 18px;
119   - margin-bottom: 26px;
120   - .refund_price1{
121   - font-weight: bold;
122   - margin-right: 16px;
  101 + .detail_standard {
  102 + font-size: 12px;
  103 + color: #999999;
  104 + }
  105 + .detail_price {
  106 + font-size: 14px;
  107 + color: #999999;
  108 + display: flex;
  109 + justify-content: space-between;
123 110 }
124   - .refund_price2{
125   - color: #FF6B4A;
  111 + }
  112 + .detail_img {
  113 + width: 188rpx;
  114 + height: 188rpx;
  115 + border-radius: 40px;
  116 + image {
  117 + width: 100%;
  118 + height: 100%;
126 119 }
  120 + }
127 121 }
128   -.refund_reason{
129   - margin-top: 16px;
130   - margin-bottom: 16px;
131   - font-family: PingFangSC-Regular;
  122 +
  123 +.refund_price {
  124 + font-family: PingFangSC-Semibold;
  125 + font-size: 14px;
  126 + color: #333333;
  127 + letter-spacing: -0.26px;
  128 + line-height: 18px;
  129 + margin-bottom: 26px;
  130 + .refund_price1 {
  131 + font-weight: bold;
  132 + margin-right: 16px;
  133 + }
  134 + .refund_price2 {
  135 + color: #ff6b4a;
  136 + }
  137 +}
  138 +.refund_reason {
  139 + margin-top: 16px;
  140 + margin-bottom: 16px;
  141 + font-family: PingFangSC-Regular;
  142 + font-size: 12px;
  143 + color: #333333;
  144 + letter-spacing: -0.23px;
  145 + line-height: 18px;
  146 + view {
  147 + display: inline-block;
132 148 font-size: 12px;
133 149 color: #333333;
134 150 letter-spacing: -0.23px;
135 151 line-height: 18px;
136   - view{
137   - display: inline-block;
138   - font-size: 12px;
139   - color: #333333;
140   - letter-spacing: -0.23px;
141   - line-height: 18px;
142   - width: 90%;
143   - image{
144   - width: 30rpx;
145   - height: 24rpx;
146   - float: right;
147   - }
  152 + width: 90%;
  153 + image {
  154 + width: 30rpx;
  155 + height: 24rpx;
  156 + float: right;
148 157 }
  158 + }
149 159 }
150   -
151   -
152 160 </style>
153 161 \ No newline at end of file
... ...
src/pages/refundment/refundment.vue
Diff comments   View file @cb58acb
1 1 <template>
2   - <view class="container" v-bind:style="{height: curheight+'px'}">
3   - <view class="refund" v-for="(items) in refund" :key="items.key">
4   - <view class="detail">
5   - <view class="detail_img"><image v-bind:src="items.img"></image></view>
6   - <view class="detail2">
7   - <view class="detail_name">{{items.name}}</view>
8   - <view class="detail_standard">规格：{{items.standard}}</view>
9   - <view class="detail_price">
10   - <span>￥{{items.price}}</span>
11   - <span>X{{items.number}}</span>
12   - </view>
13   - </view>
14   - </view>
15   - <view class="refund_price">
16   - <span class="refund_price1">退款金额</span>
17   - <span class="refund_price2">￥{{items.refundprice}}</span>
18   - </view>
19   - <view class="refund_reason">
20   - <span >退款原因</span>
21   - <!-- 跳转退款原因详细页 -->
22   - <view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image></view>
23   - </view>
24   - <view class="refund_explain">
25   - <span>退款说明</span>
26   - <input placeholder="选填" value="">
27   - </view>
28   - <view class="refund_img">
29   - <span class="refund_img1">上传图片</span>
30   - <span class="refund_img2">（最多3张）</span>
31   - <view><image v-bind:src="items.refund_img"></image></view>
32   - </view>
  2 + <view
  3 + class="container"
  4 + v-bind:style="{height: curheight+'px'}"
  5 + >
  6 + <view
  7 + class="refund"
  8 + v-for="(items) in refund"
  9 + :key="items.key"
  10 + >
  11 + <view class="detail">
  12 + <view class="detail_img">
  13 + <image v-bind:src="items.img"></image>
33 14 </view>
34   - <view class="button">
35   - <span>提交</span>
  15 + <view class="detail2">
  16 + <view class="detail_name">{{items.name}}</view>
  17 + <view class="detail_standard">规格：{{items.standard}}</view>
  18 + <view class="detail_price">
  19 + <span>￥{{items.price}}</span>
  20 + <span>X{{items.number}}</span>
  21 + </view>
36 22 </view>
  23 + </view>
  24 + <view class="refund_price">
  25 + <span class="refund_price1">退款金额</span>
  26 + <span class="refund_price2">￥{{items.refundprice}}</span>
  27 + </view>
  28 + <view class="refund_reason">
  29 + <span>退款原因</span>
  30 + <!-- 跳转退款原因详细页 -->
  31 + <view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image>
  32 + </view>
  33 + </view>
  34 + <view class="refund_explain">
  35 + <span>退款说明</span>
  36 + <input
  37 + placeholder="选填"
  38 + value=""
  39 + >
  40 + </view>
  41 + <view class="refund_img">
  42 + <span class="refund_img1">上传图片</span>
  43 + <span class="refund_img2">（最多3张）</span>
  44 + <view>
  45 + <image v-bind:src="items.refund_img"></image>
  46 + </view>
  47 + </view>
  48 + </view>
  49 + <view class="button">
  50 + <span>提交</span>
37 51 </view>
  52 + </view>
38 53 </template>
39 54  
40 55 <script>
41   -
42 56 export default {
43   - //获取浏览器高度
44   - beforeMount(height){
45   - var h = document.documentElement.clientHeight || document.body.clientHeight;
46   - this.curheight = h-44;
47   -
48   - },
49   - methods:{
50   - Jump(){
51   - this.$router.push({path: "Refundways"})
52   - },
53   - },
54   - data(){
55   - return{
56   - curheight:0, //浏览器高度
57   - refund:[
58   - {
59   - key:0,
60   - img:'/static/img/detail/d1.png',
61   - name:'商品名称',
62   - standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
63   - price: 180,
64   - number: 1,
65   - refundprice: 110,
66   - refund_img:'/static/img/detail/refund_img.png',
67   - }
68   - ],
69   - }
  57 + //获取浏览器高度
  58 + beforeMount(height) {
  59 + var h = document.documentElement.clientHeight || document.body.clientHeight;
  60 + this.curheight = h - 44;
  61 + },
  62 + methods: {
  63 + Jump() {
  64 + this.$router.push({ path: "refundWays" });
70 65 }
71   -}
  66 + },
  67 + data() {
  68 + return {
  69 + curheight: 0, //浏览器高度
  70 + refund: [
  71 + {
  72 + key: 0,
  73 + img: "/static/img/detail/d1.png",
  74 + name: "商品名称",
  75 + standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻",
  76 + price: 180,
  77 + number: 1,
  78 + refundprice: 110,
  79 + refund_img: "/static/img/detail/refund_img.png"
  80 + }
  81 + ]
  82 + };
  83 + }
  84 +};
72 85 </script>
73 86  
74 87 <style lang="scss">
75   -
76   -.container{
77   - background: #F2F2F2;
78   - padding-top: 10px;
79   - box-sizing: border-box;
  88 +.container {
  89 + background: #f2f2f2;
  90 + padding-top: 10px;
  91 + box-sizing: border-box;
80 92 }
81   -.refund{
82   - width: 90%;
83   - height: 353px;
84   - margin: 0 auto;
85   - background: #FFFFFF;
86   - box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
87   - border-radius: 8px;
88   - padding: 14px;
89   - box-sizing: border-box;
  93 +.refund {
  94 + width: 90%;
  95 + height: 353px;
  96 + margin: 0 auto;
  97 + background: #ffffff;
  98 + box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
  99 + border-radius: 8px;
  100 + padding: 14px;
  101 + box-sizing: border-box;
90 102 }
91   -.detail{
92   - display: flex;
93   - justify-content: space-between;
94   - font-family: PingFangSC-Regular;
95   - margin-bottom: 20px;
96   - .detail2{
97   - width: 64%;
98   - view{
99   - margin-bottom: 8px;
100   - }
101   - .detail_name{
102   - font-size: 14px;
103   - color:#333333;
104   - }
105   - .detail_standard{
106   - font-size: 12px;
107   - color: #999999;
108   - }
109   - .detail_price{
110   - font-size: 14px;
111   - color: #999999;
112   - display: flex;
113   - justify-content: space-between;
114   - }
  103 +.detail {
  104 + display: flex;
  105 + justify-content: space-between;
  106 + font-family: PingFangSC-Regular;
  107 + margin-bottom: 20px;
  108 + .detail2 {
  109 + width: 64%;
  110 + view {
  111 + margin-bottom: 8px;
115 112 }
116   - .detail_img{
117   - width: 188rpx;
118   - height: 188rpx;
119   - border-radius: 40px;
120   - image{
121   - width: 100%;
122   - height: 100%;
123   - }
  113 + .detail_name {
  114 + font-size: 14px;
  115 + color: #333333;
124 116 }
125   -}
126   -.refund_explain,.refund_img,.refund_price,.refund_reason{
127   - margin-top: 16px;
128   - margin-bottom: 16px;
129   -}
130   -.refund_price{
131   - font-family: PingFangSC-Semibold;
132   - font-size: 14px;
133   - color: #333333;
134   - letter-spacing: -0.26px;
135   - line-height: 18px;
136   - .refund_price1{
137   - font-weight: bold;
138   - margin-right: 16px;
  117 + .detail_standard {
  118 + font-size: 12px;
  119 + color: #999999;
  120 + }
  121 + .detail_price {
  122 + font-size: 14px;
  123 + color: #999999;
  124 + display: flex;
  125 + justify-content: space-between;
139 126 }
140   - .refund_price2{
141   - color: #FF6B4A;
  127 + }
  128 + .detail_img {
  129 + width: 188rpx;
  130 + height: 188rpx;
  131 + border-radius: 40px;
  132 + image {
  133 + width: 100%;
  134 + height: 100%;
142 135 }
  136 + }
143 137 }
144   -.refund_reason,.refund_explain span,.refund_img1{
145   - font-family: PingFangSC-Regular;
146   - font-size: 12px;
147   - color: #333333;
148   - letter-spacing: -0.23px;
149   - line-height: 18px;
  138 +.refund_explain,
  139 +.refund_img,
  140 +.refund_price,
  141 +.refund_reason {
  142 + margin-top: 16px;
  143 + margin-bottom: 16px;
150 144 }
151   -.refund_explain{
152   - display: flex;
153   - justify-content: space-between;
154   - align-items: center;
  145 +.refund_price {
  146 + font-family: PingFangSC-Semibold;
  147 + font-size: 14px;
  148 + color: #333333;
  149 + letter-spacing: -0.26px;
  150 + line-height: 18px;
  151 + .refund_price1 {
  152 + font-weight: bold;
  153 + margin-right: 16px;
  154 + }
  155 + .refund_price2 {
  156 + color: #ff6b4a;
  157 + }
155 158 }
156   -.refund_explain input,.refund_img2{
157   - width: 78%;
158   - font-family: PingFangSC-Regular;
159   - font-size: 12px;
160   - color: #B8B8B8;
161   - letter-spacing: -0.23px;
  159 +.refund_reason,
  160 +.refund_explain span,
  161 +.refund_img1 {
  162 + font-family: PingFangSC-Regular;
  163 + font-size: 12px;
  164 + color: #333333;
  165 + letter-spacing: -0.23px;
  166 + line-height: 18px;
162 167 }
163   -.refund_reason{
164   - span{
165   - margin-right: 20px;
166   - }
167   - view{
168   - display: inline-block;
169   - font-family: PingFangSC-Regular;
170   - font-size: 12px;
171   - color: #B8B8B8;
172   - letter-spacing: -0.23px;
173   - width: 76%;
174   - image{
175   - width: 30rpx;
176   - height: 26rpx;
177   - float: right;
178   - }
179   - }
  168 +.refund_explain {
  169 + display: flex;
  170 + justify-content: space-between;
  171 + align-items: center;
180 172 }
181   -.refund_img{
182   - .refund_img1{
183   - margin-right: 10px;
184   - }
185   - view{
186   - margin-top: 20px;
187   - width: 66rpx;
188   - height: 60rpx;
189   - image{
190   - width: 100%;
191   - height: 100%;
192   - }
193   - }
  173 +.refund_explain input,
  174 +.refund_img2 {
  175 + width: 78%;
  176 + font-family: PingFangSC-Regular;
  177 + font-size: 12px;
  178 + color: #b8b8b8;
  179 + letter-spacing: -0.23px;
194 180 }
195   -a{
196   - text-decoration: none;
  181 +.refund_reason {
  182 + span {
  183 + margin-right: 20px;
  184 + }
  185 + view {
  186 + display: inline-block;
197 187 font-family: PingFangSC-Regular;
198 188 font-size: 12px;
199   - color: #B8B8B8;
  189 + color: #b8b8b8;
200 190 letter-spacing: -0.23px;
  191 + width: 76%;
  192 + image {
  193 + width: 30rpx;
  194 + height: 26rpx;
  195 + float: right;
  196 + }
  197 + }
201 198 }
202   -.button{
203   - width: 100%;
204   - height: 112rpx;
205   - background: #FF6B4A ;
206   - display: flex;
207   - justify-content: center;
208   - align-items: center;
209   - position: fixed;
210   - bottom: 0;
211   - span{
212   - color:#FFFFFF;
213   - font-family: PingFangSC-Regular;
214   - font-size: 16px;
215   - letter-spacing: -0.3px;
  199 +.refund_img {
  200 + .refund_img1 {
  201 + margin-right: 10px;
  202 + }
  203 + view {
  204 + margin-top: 20px;
  205 + width: 66rpx;
  206 + height: 60rpx;
  207 + image {
  208 + width: 100%;
  209 + height: 100%;
216 210 }
  211 + }
  212 +}
  213 +a {
  214 + text-decoration: none;
  215 + font-family: PingFangSC-Regular;
  216 + font-size: 12px;
  217 + color: #b8b8b8;
  218 + letter-spacing: -0.23px;
  219 +}
  220 +.button {
  221 + width: 100%;
  222 + height: 112rpx;
  223 + background: #ff6b4a;
  224 + display: flex;
  225 + justify-content: center;
  226 + align-items: center;
  227 + position: fixed;
  228 + bottom: 0;
  229 + span {
  230 + color: #ffffff;
  231 + font-family: PingFangSC-Regular;
  232 + font-size: 16px;
  233 + letter-spacing: -0.3px;
  234 + }
217 235 }
218   -
219   -
220 236 </style>
221 237 \ No newline at end of file
... ...