Browse Source

优化商品详情、新增限时秒杀和封装接口请求

master
ltlzx 4 years ago
parent
commit
4804259a67
  1. 39
      api/request.js
  2. 108
      common/common.scss
  3. 107
      common/scss/order.scss
  4. 5
      config.js
  5. 6
      pages.json
  6. 109
      pages/index/flashSale.vue
  7. 15
      pages/index/index.vue
  8. 8
      pages/login/verifyEmail.vue
  9. 2
      pages/order/refundDetails.vue
  10. 73
      pages/productDetails/index.vue
  11. 3
      pages/productDetails/review.vue
  12. BIN
      static/img/add.png

39
api/request.js

@ -0,0 +1,39 @@
import config from '../config.js'
const json_data={
appcode:'SHISE' ,//应用编码
appchannel:'FXXXXHUAWEI' ,//应用发布渠道
appver: '1.0.0',//应用版本
appname:'cnic_buyer' ,//应用名称
manufacturer:'HUAWEI' ,//设备生产商
phonebrand:'HORNOR' ,//设备品牌
phonetype:'X30' ,//设备型号
phoneos:'ANDROID'// 设备系统
}
const httpRequest = (params) => {
uni.showLoading({
title: "努力加载中..."
});
let httpOptions = {
url: config.apiUri + params.url,
data: params.data,
method: params.method,
header: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
};
return new Promise((resolve, reject) => {
uni.request({
...httpOptions,
success: res => {
uni.hideLoading();
resolve(res);
},
fail: err => {
uni.hideLoading();
reject(err);
}
})
})
}
export default httpRequest;

108
common/common.scss

@ -113,6 +113,114 @@
} }
} }
// 谈判细节
.order_popup{
position: fixed;
z-index: 999;
background-color: white;
width: 100%;
bottom: 0;
.order_popup_title{
position: relative;
font-size: 32rpx;
font-weight: bold;
border-bottom: 1px solid #E2E2E2;
display: flex;
align-items: center;
justify-content: center;
padding-top: 44.67rpx;
padding-bottom: 30.67rpx;
image{
width: 21.33rpx;
height: 21.33rpx;
position: absolute;
right: 26rpx;
top: 50%;
margin-top: -5.5rpx;
}
.order_popup_title_span{
color: #B22234;
}
}
.order_popup_commodity{
border-bottom:1px solid #E2E2E2 ;
padding-bottom: 40rpx;
}
.order_popup_coupons{
padding:0 26.67rpx;
padding-top: 28rpx;
padding-bottom: 106.67rpx;
}
.order_popup_pay{
padding: 0 26.67rpx;
padding-bottom: 56.67rpx;
.pay_item{
border-bottom: 1px solid #EEEEEE;
padding: 13.33rpx 0;
display: flex;
align-items: center;
font-size: 28rpx;
&:nth-child(4){
border-bottom: none
}
.pay_item_select{
width: 29.33rpx;
height: 29.33rpx;
margin-right: 26rpx;
}
.pay_item_right{
display: flex;
align-items: center;
image{
width: 74.67rpx;
height: 74.67rpx;
margin-right: 28.67rpx;
}
}
}
button{
background: black;
color: white;
height: 88rpx;
line-height: 88rpx;
font-size: 26.67rpx;
font-weight: bold;
margin-top: 33.33rpx;
}
}
.order_popup_points{
padding-bottom: 63.33rpx;
padding-left: 47.33rpx;
padding-top: 34.67rpx;
font-size: 28rpx;
.points_item{
display: flex;
align-items: center;
margin-bottom: 40rpx;
&:last-child{
margin-bottom: 0;
}
image{
width: 29.33rpx;
height: 29.33rpx;
margin-right: 26rpx;
}
}
}
}
// 遮罩层 // 遮罩层
.mask{ .mask{

107
common/scss/order.scss

@ -194,114 +194,7 @@
} }
} }
// 谈判细节
.order_popup{
position: fixed;
z-index: 999;
background-color: white;
width: 100%;
bottom: 0;
.order_popup_title{
position: relative;
font-size: 32rpx;
font-weight: bold;
border-bottom: 1px solid #E2E2E2;
display: flex;
align-items: center;
justify-content: center;
padding-top: 44.67rpx;
padding-bottom: 30.67rpx;
image{
width: 21.33rpx;
height: 21.33rpx;
position: absolute;
right: 26rpx;
top: 50%;
margin-top: -5.5rpx;
}
.order_popup_title_span{
color: #B22234;
}
}
.order_popup_commodity{
border-bottom:1px solid #E2E2E2 ;
padding-bottom: 40rpx;
}
.order_popup_coupons{
padding:0 26.67rpx;
padding-top: 28rpx;
padding-bottom: 106.67rpx;
}
.order_popup_pay{
padding: 0 26.67rpx;
padding-bottom: 56.67rpx;
.pay_item{
border-bottom: 1px solid #EEEEEE;
padding: 13.33rpx 0;
display: flex;
align-items: center;
font-size: 28rpx;
&:nth-child(4){
border-bottom: none
}
.pay_item_select{
width: 29.33rpx;
height: 29.33rpx;
margin-right: 26rpx;
}
.pay_item_right{
display: flex;
align-items: center;
image{
width: 74.67rpx;
height: 74.67rpx;
margin-right: 28.67rpx;
}
}
}
button{
background: black;
color: white;
height: 88rpx;
line-height: 88rpx;
font-size: 26.67rpx;
font-weight: bold;
margin-top: 33.33rpx;
}
}
.order_popup_points{
padding-bottom: 63.33rpx;
padding-left: 47.33rpx;
padding-top: 34.67rpx;
font-size: 28rpx;
.points_item{
display: flex;
align-items: center;
margin-bottom: 40rpx;
&:last-child{
margin-bottom: 0;
}
image{
width: 29.33rpx;
height: 29.33rpx;
margin-right: 26rpx;
}
}
}
}
// 进度条 // 进度条
.logistics_details{ .logistics_details{

5
config.js

@ -0,0 +1,5 @@
var weburl='https://en.meixx.com/mapi/api_v2011.php';
export default {
apiUri: 'http://'+weburl+'/api/',
imgUri: 'http://'+weburl+'/',
}

6
pages.json

@ -204,6 +204,12 @@
"style": { "style": {
"titleNView":false "titleNView":false
} }
},
{
"path": "pages/index/flashSale",
"style": {
"titleNView":false
}
} }
], ],
"globalStyle": { "globalStyle": {

109
pages/index/flashSale.vue

@ -0,0 +1,109 @@
<template>
<view>
<uni-nav-bar left-icon="left" title="Flash Sale" color="#000000" rightIcon="info" @clickLeft="back" @clickRight="isDelete=!isDelete" :border="false"/>
<view class="body">
<view class="countDown">
<text>Ends in</text>
<uni-countdown :showDay="false" :hour="23" :minute="0" :second="0" color="#FFFFFF" background-color="#1B1B1B" class="countDown_assembly" />
</view>
<view class="tips">
Chic selects commodities from time to time to carry
out special price activities.
</view>
<view class="tips1">The quantity of special price commodities is limited and will be sold out</view>
<view class="recommend">
<view class="recommend_content">
<view class="recommend_content_item" v-for="(item,index) in 2 " :key="index">
<view class="recommend_content_item_image"></view>
<text>Adidas Yeezy Boost 350 DazzlingBlue Black</text>
<view class="recommend_item_operation">
<view>
<view class="recommend_content_item_pric">US$314.00</view>
<view class="recommend_content_item_pric1">US$314.00</view>
</view>
<image src="../../static/img/add.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
back(){
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
}
.body{
border-top: 13.33rpx #F7F7F7 solid;
padding:0 26rpx;
padding-top: 34rpx;
}
.recommend{
padding: 0;
.recommend_item_operation{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10rpx;
.recommend_content_item_pric{
color: #B22234;
font-weight: 600;
font-size: 32rpx;
margin-top: 0;
}
.recommend_content_item_pric1{
font-size: 24rpx;
color: #666666;
text-decoration: line-through;
}
image{
width: 58.67rpx;
height: 58.67rpx;
}
}
}
.countDown{
display: flex;
align-items: center;
font-size: 41.33rpx;
justify-content: center;
margin-bottom: 34rpx;
.countDown_assembly{
margin-left: 12.67rpx;
}
}
.tips{
width: 572.67rpx;
margin: 0 auto;
font-size: 24rpx;
margin-bottom: 14rpx;
text-align: center;
}
.tips1{
font-size: 20rpx;
color: #666666;
margin-bottom: 30rpx;
text-align: center;
}
</style>

15
pages/index/index.vue

@ -77,13 +77,16 @@
<image src="../../static/img/index_discount.png" mode="" class="discount page_padding"></image> <image src="../../static/img/index_discount.png" mode="" class="discount page_padding"></image>
<!-- 标题 --> <!-- 标题 -->
<view class="index_title page_padding"> <navigator url="/pages/index/flashSale">
<text>Flash Sale</text> <view class="index_title page_padding">
<view class="title_right"> <text>Flash Sale</text>
<uni-countdown :showDay="false" :hour="23" :minute="0" :second="0" color="#FFFFFF" background-color="#1B1B1B" /> <view class="title_right">
<image src="../../static/img/right.png" mode=""></image> <uni-countdown :showDay="false" :hour="23" :minute="0" :second="0" color="#FFFFFF" background-color="#1B1B1B" />
<image src="../../static/img/right.png" mode=""></image>
</view>
</view> </view>
</view> </navigator>
<!-- SPIKE 1 --> <!-- SPIKE 1 -->
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false"> <scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false">

8
pages/login/verifyEmail.vue

@ -6,11 +6,11 @@
</view> </view>
<input type="text" class="login_input" placeholder="Enter code"> <input type="text" class="login_input" placeholder="Enter code">
<view class="tips">The code is incorrect.</view> <view class="tips">The code is incorrect.</view>
<button class="login_submit" >CONTINUE</button> <button class="login_submit" @click="isShow=true">CONTINUE</button>
<view class="verify_text">Resend code</view> <view class="verify_text">Resend code</view>
</view> </view>
<view class="mask"></view> <view class="mask" v-show="isShow" @click="isShow=false"></view>
<view class="verify_popup"> <view class="verify_popup" v-show="isShow">
<view class="verify_popup_close"> <view class="verify_popup_close">
<image src="../../static/img/close.png" mode=""></image> <image src="../../static/img/close.png" mode=""></image>
</view> </view>
@ -27,7 +27,7 @@
export default { export default {
data() { data() {
return { return {
isShow:false
} }
}, },
methods:{ methods:{

2
pages/order/refundDetails.vue

@ -181,7 +181,7 @@
data() { data() {
return { return {
// 0 1 2退 3 4退 5 6退 // 0 1 2退 3 4退 5 6退
details_index:0, details_index:5,
isShow:false, isShow:false,
} }
}, },

73
pages/productDetails/index.vue

@ -128,7 +128,7 @@
</view> </view>
</scroll-view> </scroll-view>
<view class="security"> <view class="security">
<view class="goods_title"> <view class="goods_title" @click="isSecurity=true">
<view class="goods_title_left"> <view class="goods_title_left">
<image src="/static/img/security.png" mode=""></image> <image src="/static/img/security.png" mode=""></image>
<text>Shipping security</text> <text>Shipping security</text>
@ -197,7 +197,7 @@
<view class="recommend recommend1"> <view class="recommend recommend1">
<view class="recommend_title">Other options</view> <view class="recommend_title">Other options</view>
<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false"> <scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
<view class="spike1_item1" v-for="(item,index) in 8" :key="index" @click="goPage"> <view class="spike1_item1" v-for="(item,index) in 8" :key="index" >
<view class="spike1_item_img"></view> <view class="spike1_item_img"></view>
<view class="spike1_item_bottom"> <view class="spike1_item_bottom">
<text>US$314.00</text> <text>US$314.00</text>
@ -226,7 +226,39 @@
<button @click="addCart">ADD TO CART</button> <button @click="addCart">ADD TO CART</button>
</view> </view>
</view> </view>
<view class="mask" @click="isCart=false" v-show="isCart"></view> <view class="mask" @click="isCart=false,isSecurity=false" v-show="isCart || isSecurity"></view>
<view class="order_popup" v-show="isSecurity">
<view class="order_popup_title">
<text>Shipping security</text>
<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image>
</view>
<view class="securityDetails">
<view class="securityDetails_item">
<view class="securityDetails_item_title">Support 7-day return and replacement</view>
<view>
If there are quality problems or spillage damage within 7
days after receiving the goods, you can apply for return
and replacement Processing
</view>
</view>
<view class="securityDetails_item">
<view class="securityDetails_item_title">Private service</view>
<view>
The package is tightly packed and there is no sensitive
information on the express list
</view>
</view>
<view class="securityDetails_item">
<view class="securityDetails_item_title">Genuine guarantee</view>
<view>
t is guaranteed that there is no problem. All goods are
original and genuine products and brand authorized sales,
so as to eliminate one Cut fake goods to ensure your
shopping
</view>
</view>
</view>
</view>
<view class="addCard" v-show="isCart"> <view class="addCard" v-show="isCart">
<image src="/static/img/close1.png" mode="" class="addCard_close"></image> <image src="/static/img/close1.png" mode="" class="addCard_close"></image>
<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false"> <scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
@ -272,6 +304,7 @@
navWidth:'80rpx', navWidth:'80rpx',
current:0, current:0,
isVedio:false, isVedio:false,
isSecurity:false,
info: [{ info: [{
colorClass: 'uni-bg-red', colorClass: 'uni-bg-red',
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg', url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
@ -336,6 +369,40 @@
border-radius: 25rpx; border-radius: 25rpx;
} }
} }
.securityDetails{
padding-top: 50.67rpx;
padding-bottom: 120rpx;
padding-left: 54.67rpx;
padding-right: 45.33rpx;
.securityDetails_item{
margin-bottom: 52rpx;
font-size: 24.67rpx;
font-weight: 400;
color: #999999;
&:last-child{
margin-bottom: 0;
}
.securityDetails_item_title{
position: relative;
color: #333333;
font-size: 30rpx;
font-weight: 500;
margin-bottom: 10.33rpx;
&:before{
content: "";
width: 6rpx;
height: 6rpx;
position: absolute;
border-radius: 50%;
background-color: #999999;
left: -25.67rpx;
top: 50%;
margin-top: -3rpx;
}
}
}
}
.variations_select_size{ .variations_select_size{
margin-left: 20.67rpx; margin-left: 20.67rpx;
display: flex; display: flex;

3
pages/productDetails/review.vue

@ -20,9 +20,6 @@
<image src="/static/img/bottom.png" mode=""></image> <image src="/static/img/bottom.png" mode=""></image>
</view> </view>
</view> </view>
<view class="info_price">
<text>US$314.00</text>
</view>
</view> </view>
</view> </view>
</view> </view>

BIN
static/img/add.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Loading…
Cancel
Save