Skip to content

U
user
Commit 304eb752 by songbingqi
Options

修改首页 订单详情 商品详情 样式

parent 57bed203
Showing with 640 additions and 273 deletions
App.vue
...@@ -13,6 +13,12 @@ export default { ...@@ -13,6 +13,12 @@ export default {
// mask:true // mask:true
// }); // });
// uni.clearStorageSync(); // uni.clearStorageSync();
wx.getSystemInfo({
success: res => {
const BottomSafeHeight = res.screenHeight - res.safeArea.bottom
uni.setStorage({ key: 'BottomSafeHeight', data: BottomSafeHeight });
}
})
}, },
onShow: function () { onShow: function () {
}, },
......
components/bocft-toast/bocft-toast.vue 0 → 100644
// toast.vue
<template>
<view class="toastCSS" v-show="show" @touchmove.stop.prevent="moveHandle">
<!-- 弹窗关闭按钮 -->
<view class="content">
{{title}}
</view>
</view>
</template>
<script>
export default {
name:"show-toast",
data() {
return {
percent: 0,
};
},
computed: {
show(){
return this.$toastStore.state.show;
},
title(){
return this.$toastStore.state.title;
},
time(){
return this.$toastStore.state.time;
}
},
methods:{
},
beforeDestroy(){
this.$toastStore.commit('hideToast')
},
}
</script>
<style scoped lang="less">
.toastCSS{
background: #4C4C4C;
max-width: 266rpx;
position: fixed;
z-index: 10023;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 26rpx 30rpx;
.content{
letter-spacing: 1.8rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 34rpx;
text-align: center;
}
}
</style>
components/bocft-toast/initToast.js 0 → 100644
// initToast.js
import Vuex from 'vuex'
export default function initToast(v) {
// 挂在store到全局Vue原型上
v.prototype.$toastStore = new Vuex.Store({
state: {
show:false,
title:"标题",
time:2000
},
mutations: {
hideToast(state) {
if(state.hideTabBar){
wx.showTabBar();
}
// #endif
state.show = false;
},
showToast(state,data) {
state = Object.assign(state,data)
state.show = true
if (!state.buttonShow) {
setTimeout(()=>{
state.show = false
return
},state.time)
}
},
}
})
v.prototype.showToast = function (option) {
if (typeof option === 'object') {
if(option.hideTabBar){
wx.hideTabBar();
}
v.prototype.$toastStore.commit('showToast', option)
}
}
}
components/menuAssembly/index.vue
<template> <template>
<view class="page-body"> <view class="page-body">
<scroll-view class="nav-left" :class="buied?'buiedcss':''" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation> <scroll-view class="nav-left" :class="[buied?'buiedcss':'',shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
<view class="nav-left-item" v-for="item in classifyData" @click="categoryClickMain(item.id)" :key="item.id" <view class="nav-left-item" v-for="item in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
:class="item.id == categoryId ? 'active' : ''"> :class="item.id == categoryId ? 'active' : ''">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<view :class="item.id == categoryId ? 'active-line' : ''"></view> <view :class="item.id == categoryId ? 'active-line' : ''"></view>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view class="nav-right" :class="buied?'buiedcss':''" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll" <scroll-view class="nav-right" :class="[buied?'buiedcss':'',shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll"
scroll-with-animation> scroll-with-animation>
<view v-for="category in classifyData" :id="category.id" :key="category.id" class="box"> <view v-for="category in classifyData" :id="category.id" :key="category.id" class="box">
<view :style="loads" class="right-title">{{ category.name }}</view> <view :style="loads" class="right-title">{{ category.name }}</view>
<view class="nav-right-item" v-for="item in category.goods" :key="item.goodsId"> <view class="nav-right-item" v-for="item in category.goods" :key="item.goodsId">
<image src="/static/imgs/isRecommend.png" v-if="item.isRecommend == 1" class="isRecommend" /> <view class="thumbnailBox">
<image @click="cart(item, category)" class="thumbnail" v-if="item.pics.thumbnailApplet" :src="item.pics.thumbnailApplet" /> <image src="/static/imgs/aixin.png" v-if="item.isRecommend == 1" class="isRecommend" />
<image @click="cart(item, category)" class="thumbnail" v-else :src="item.pics.thumbnail" /> <image @click="cart(item, category)" class="thumbnail" v-if="item.pics.thumbnailApplet" :src="item.pics.thumbnailApplet" />
<image @click="cart(item, category)" class="thumbnail" v-else :src="item.pics.thumbnail" />
</view>
<view @click="cart(item, category)" class="info"> <view @click="cart(item, category)" class="info">
<view class="goods-name">{{ item.name }}</view> <view class="goods-name">{{ item.name }}</view>
<view class="tags" v-if="item.tags"> <view class="tags" v-if="item.tags">
...@@ -24,12 +26,17 @@ ...@@ -24,12 +26,17 @@
<view class="desc">{{ item.desc || '' }}</view> <view class="desc">{{ item.desc || '' }}</view>
</view> </view>
<view class="mon"> <view class="mon">
<view class="discount">￥{{ getSku(item).discount }}</view> <view class="priceBox">
<view class="price">￥<text class="num">{{ getSku(item).price }}</text></view> <view class="discount">￥{{ getSku(item).discount }}</view>
<view class="price">￥<text class="num">{{ getSku(item).price }}</text></view>
</view>
<view class="addbox">
<image v-if="getSku(item).state==1" @click.stop="getallNum(item, category)" class="add" :src="'../../static/imgs/jiahao.png'" />
<!-- <u-icon class="add" name="plus-circle-fill" color="#003AE9" @click.stop="getallNum(item, category)" size="22"></u-icon> -->
</view>
</view> </view>
</view> </view>
<u-icon v-if="getSku(item).state==1" class="add" name="plus-circle-fill" color="#003AE9" @click.stop="getallNum(item, category)" size="22"></u-icon> <div v-if="getSku(item).state!=1" class="sellNull" style="color: orangered;font-size: 22rpx;">已售罄</div>
<div v-else style="color: orangered;font-size: 22rpx;">已售罄</div>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
...@@ -37,6 +44,7 @@ ...@@ -37,6 +44,7 @@
</template> </template>
<script> <script>
import { $EventBus } from "../../utils/EventBus";
export default { export default {
name: 'menuAssembly', name: 'menuAssembly',
props:['buied'], props:['buied'],
...@@ -47,9 +55,25 @@ export default { ...@@ -47,9 +55,25 @@ export default {
categoryPostion: [], categoryPostion: [],
scrollLeftTop: 0, scrollLeftTop: 0,
scrollTop: 0, scrollTop: 0,
scrolled: true scrolled: true,
goods:[],
shopCarFlag:false
}
},
watch:{
goods(val){
this.shopCarFlag = val.length>0
} }
}, },
created() {
$EventBus.$off('updateCar');
},
mounted(){
this.goods = uni.getStorageSync('shopCarInfo') || [];
$EventBus.$on('updateCar', () => {
this.goods = uni.getStorageSync('shopCarInfo') || [];
});
},
methods: { methods: {
getSku(data) { getSku(data) {
const { skus } = data; const { skus } = data;
...@@ -337,17 +361,17 @@ export default { ...@@ -337,17 +361,17 @@ export default {
} }
.nav-left { .nav-left {
width: 152rpx; box-sizing: border-box;
width: 160rpx;
background: #fff; background: #fff;
border-right: 2rpx solid #D5D5D5; border-right: 2rpx solid #EEEEEE;
height: calc(100vh - 376rpx); height: calc(100vh - 376rpx);
overflow: auto; overflow: auto;
} }
.nav-left-item { .nav-left-item {
position: relative; position: relative;
height: 170rpx; height: 143rpx;
line-height: 170rpx;
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
...@@ -362,15 +386,21 @@ export default { ...@@ -362,15 +386,21 @@ export default {
} }
.nav-right { .nav-right {
box-sizing: border-box;
height: calc(100vh - 376rpx); height: calc(100vh - 376rpx);
overflow: auto; overflow: auto;
box-sizing: border-box; padding-top: 50rpx;
padding-top: 60rpx; width: 585.21rpx;
width: 596rpx;
} }
.buiedcss{ .buiedcss{
height: calc(100vh - 376rpx - 183rpx); height: calc(100vh - 376rpx - 183rpx);
} }
.shopCarcss{
padding-bottom: 100rpx;
}
.box { .box {
display: block; display: block;
overflow: hidden; overflow: hidden;
...@@ -384,55 +414,71 @@ export default { ...@@ -384,55 +414,71 @@ export default {
} }
.right-title { .right-title {
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
padding-left: 28rpx; padding-left: 28rpx;
margin-bottom: 40rpx; margin-bottom: 24.84rpx;
height: 44rpx; height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 44rpx; line-height: 40rpx;
} }
.nav-right-item { .nav-right-item {
display: flex; display: flex;
padding: 0rpx 36rpx 0rpx 42rpx; align-items: center;
padding: 0rpx 36rpx 0rpx 32rpx;
margin-bottom: 50rpx; margin-bottom: 50rpx;
height: 162rpx; height: 162rpx;
background: #fff; background: #fff;
position: relative; position: relative;
.thumbnailBox{
.thumbnail { position: relative;
//缩略图 .isRecommend {
display: flex; position: absolute;
align-items: center; width: 22.46rpx;
width: 140rpx; height: 22.46rpx;
height: 140rpx; top: 28rpx;
margin-right: 34rpx; right: 24rpx
}
.thumbnail {
//缩略图
display: flex;
align-items: center;
width: 160rpx;
height: 160rpx;
margin-top: 6rpx;
}
} }
.info { .info {
flex: 1; flex: 1;
margin-left: 23.78rpx;
.goods-name { .goods-name {
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-size: 28rpx; font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.tags { .tags {
.tag-item { .tag-item {
font-family: Arial, Helvetica SC; margin-top: 8.9rpx;
height: 24rpx; font-family: ArialMT, Helvetica SC;
height: 28rpx;
border-radius: 4rpx; border-radius: 4rpx;
background-color: #f0edf1; background-color: #f0edf1;
margin-right: 10rpx; margin-right: 10rpx;
padding: 4rpx 6rpx; padding: 4rpx 10rpx;
font-size: 20rpx; font-size: 20rpx;
color: #999999; color: #999999;
line-height: 24rpx; line-height: 28rpx;
display: inline-block; display: inline-block;
vertical-align: top;
} }
} }
...@@ -442,28 +488,34 @@ export default { ...@@ -442,28 +488,34 @@ export default {
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
line-height: 40rpx; line-height: 40rpx;
margin-top: 12rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
.desc { .desc {
flex: 1; flex: 1;
height: 22rpx;
line-height: 26rpx;
} }
} }
.mon { .mon {
width: 338.45rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 22rpx;
.discount { .discount {
font-family: Futura, Arial, sans-serif; font-family: Futura-Medium, Futura;
display: inline-block; height: 30rpx;
height: 32rpx; font-size: 24rpx;
font-size: 28rpx;
color: #333333; color: #333333;
line-height: 32rpx; line-height: 30rpx;
margin-right: 6rpx; margin-right: 6rpx;
font-weight: 600; font-weight:500;
} }
.price { .price {
flex: 1; flex: 1;
display: inline-block;
height: 22rpx; height: 22rpx;
font-size: 20rpx; font-size: 20rpx;
color: #666666; color: #666666;
...@@ -473,16 +525,30 @@ export default { ...@@ -473,16 +525,30 @@ export default {
text-decoration: line-through; text-decoration: line-through;
} }
} }
.priceBox{
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: flex-start;
}
.addbox{
line-height: 26rpx;
.add{
width: 40rpx;
height: 40rpx;
}
}
} }
} }
.isRecommend { .sellNull{
position: absolute; position: absolute;
width: 30rpx; right: 32rpx;
height: 30rpx; top: 0rpx;
top: 10rpx;
left: 50rpx
} }
} }
.nav-right-item image { .nav-right-item image {
...@@ -492,22 +558,24 @@ export default { ...@@ -492,22 +558,24 @@ export default {
.active { .active {
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
font-weight: 500;
color: #333333; color: #333333;
background: #FFFFFF;
font-size: 24rpx; font-size: 24rpx;
box-shadow: 0px 2px 3px #f4f2f2;
background: #fff; background: #fff;
} }
.active-line { .active-line {
height: 170rpx; height: 100%;
width: 2rpx; width: 2rpx;
position: absolute; position: absolute;
right: -2rpx; right: 0rpx;
top: 0; box-sizing:border-box;
top: 0;
background: #003AE9;
z-index: 1; z-index: 1;
border-right: 8rpx solid #006ECF; border: 2rpx solid #003AE9;
;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
......
components/shopCar/shopCar.vue
...@@ -18,36 +18,43 @@ ...@@ -18,36 +18,43 @@
<view class="goods-detail" v-for="(item, index) in goods" :key="index"> <view class="goods-detail" v-for="(item, index) in goods" :key="index">
<view class="detail-left"> <view class="detail-left">
<view class="goods-left"> <view class="goods-left">
<u-checkbox-group @change="selected(item)"> <view class="checkBox">
<view class="check" @click="selected(item)" :class="item.flag?'checked':'nochecked'"></view>
</view>
<!-- <u-checkbox-group @change="selected(item)">
<label> <label>
<u-checkbox shape="circle" class="selected" color="#555555" <u-checkbox shape="circle" class="selected" color="#555555"
:checked="item.flag" /> :checked="item.flag" />
</label> </label>
</u-checkbox-group> </u-checkbox-group> -->
<image :src="item.pics.thumbnailApplet || item.pics.thumbnail" <view>
style="width: 150rpx;height: 140rpx;"></image> <image :src="item.pics.thumbnailApplet || item.pics.thumbnail"
style="width: 120rpx;height: 120rpx;margin-top: 4rpx"></image>
</view>
</view> </view>
<view class="size"> <view class="size">
<text style="font-size: 28rpx;color: #000000;">{{ item.name }}</text> <view class="goods-name">{{ item.name }}</view>
<text style="font-size:20rpx;color:#666666"> <view class="goods-skus">
<text v-for="(rl, index) in item.sku.rules" :key="rl.ruleName"> <text v-for="(rl, index) in item.sku.rules" :key="rl.ruleName">
{{ rl.ruleName }} {{ rl.ruleName }}
<text v-if="index != item.sku.rules.length - 1">/</text> <text v-if="index != item.sku.rules.length - 1">/</text>
</text> </text>
</text> </view>
<text> <view class="goods-price">
<text class="goods-price">￥{{ item.sku.discount }}</text> <text class="price-discount">￥{{ item.sku.discount }}</text>
<text class="price-x">￥</text> <text class="price-x">￥</text>
<text class="price-xx">{{ item.sku.price }}</text> <text class="price-xx">{{ item.sku.price }}</text>
</text> </view>
</view> </view>
</view> </view>
<view class="detail-right"> <view class="detail-right">
<!-- <text class="subtract" @click="reduce(item, index)">-</text> --> <view class="subtract" @click="reduce(item, index)"></view>
<u-icon class="subtract" name="minus-circle" @click="reduce(item, index)" color="#2979ff" size="22"></u-icon>
<text class="num">{{ item.num }}</text> <text class="num">{{ item.num }}</text>
<view class="add" @click="add(item)" ></view>
<!-- <text class="subtract" @click="reduce(item, index)">-</text> -->
<!-- <u-icon class="subtract" name="minus-circle" @click="reduce(item, index)" color="#2979ff" size="22"></u-icon> -->
<!-- <text @click="add(item)" class="add">+</text> --> <!-- <text @click="add(item)" class="add">+</text> -->
<u-icon class="add" name="plus-circle-fill" color="#2979ff" @click="add(item)" size="22"></u-icon> <!-- <u-icon class="add" name="plus-circle-fill" color="#2979ff" @click="add(item)" size="22"></u-icon> -->
</view> </view>
</view> </view>
</view> </view>
...@@ -66,12 +73,13 @@ ...@@ -66,12 +73,13 @@
<text class="shopClassStyle">￥{{ totalPrice.toFixed(2) }}</text> <text class="shopClassStyle">￥{{ totalPrice.toFixed(2) }}</text>
</view> </view>
</view> </view>
<view class="end-right" @click="saveReserve" v-if="userms"> <view class="end-right goSubmmit" @click="saveReserve" v-if="userms">
付款
</view> </view>
<button v-if="!userms" class="end-right" style="border-radius: 0;" open-type="getPhoneNumber" <!-- <view v-if="!userms" class="end-right goSubmmit" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="saveReserve">
</view> -->
<button v-if="!userms" class="end-right goSubmmit" style="border-radius: 0;" open-type="getPhoneNumber"
@getphonenumber="saveReserve"> @getphonenumber="saveReserve">
付款
</button> </button>
</view> </view>
</view> </view>
...@@ -190,6 +198,7 @@ export default { ...@@ -190,6 +198,7 @@ export default {
this.goods.splice(index, 1); this.goods.splice(index, 1);
} }
uni.setStorageSync('shopCarInfo', this.goods); uni.setStorageSync('shopCarInfo', this.goods);
$EventBus.$emit('updateCar');
}, },
add(item) { add(item) {
let s = 0; let s = 0;
...@@ -207,6 +216,7 @@ export default { ...@@ -207,6 +216,7 @@ export default {
let num = Number(item.num) let num = Number(item.num)
item.num = num + 1 item.num = num + 1
uni.setStorageSync('shopCarInfo', this.goods); uni.setStorageSync('shopCarInfo', this.goods);
$EventBus.$emit('updateCar');
} }
}, },
computed: { computed: {
...@@ -238,9 +248,12 @@ export default { ...@@ -238,9 +248,12 @@ export default {
.shopClassStyle { .shopClassStyle {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
font-size: 28rpx; font-size: 32rpx;
font-weight: 500;
font-family: Futura-Medium, Futura;
display: flex; display: flex;
margin-left: 30rpx; margin-left: 38rpx;
letter-spacing: 1px;
align-items: center; align-items: center;
} }
...@@ -252,17 +265,17 @@ export default { ...@@ -252,17 +265,17 @@ export default {
.header { .header {
height: 88rpx; height: 88rpx;
display: flex; display: flex;
border-bottom: 1rpx solid rgb(235, 235, 235); border-bottom: 1px solid #ECECEC;
.left { .left {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 40rpx; padding-left: 31rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 500;
color: #000000; color: #333333;
} }
.right { .right {
...@@ -270,7 +283,7 @@ export default { ...@@ -270,7 +283,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding-right: 40rpx; padding-right: 31rpx;
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -299,49 +312,102 @@ export default { ...@@ -299,49 +312,102 @@ export default {
&-detail { &-detail {
display: flex; display: flex;
padding: 30rpx 15rpx 30rpx 30rpx; padding: 30rpx 26rpx 30rpx 32rpx;
background-color: #fff; background-color: #fff;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.detail-left { .detail-left {
display: flex; display: flex;
height: 128rpx;
align-items: center;
justify-content: space-between;
.goods-left { .goods-left {
display: flex; display: flex;
align-items: center; align-items: center;
.checkBox{
margin-right: 32rpx;
width: 40rpx;
display: flex;
align-items: center;
height: 100%;
.check{
width: 100%;
height: 40rpx;
}
.checked{
background: url('../../static/imgs/duigouxuanzhong.png') center center no-repeat;
background-size:100% 100%;
}
.nochecked{
background: url('../../static/imgs/weixuanzhong.png') center center no-repeat;
background-size:100% 100%;
}
}
} }
} }
.size { .size {
display: flex;
justify-content: space-around;
flex-direction: column;
margin-left: 30rpx; margin-left: 30rpx;
.goods-name{
.goods-price { height: 40rpx;
font-size: 24rpx; font-size: 28rpx;
font-family: Arial-BoldMT, Arial; font-family: PingFangSC-Medium, PingFang SC;
font-weight: normal; padding-top: 5rpx;
color: #FF5200; font-weight: 500;
color: #333333;
line-height: 40rpx;
} }
.price-x { .goods-skus {
margin-left: 6rpx; margin-top: 4rpx;
height: 22rpx;
font-size: 20rpx; font-size: 20rpx;
font-family: ArialMT; font-family: PingFangSC-Regular, PingFang SC;
line-height: 22rpx; font-weight: 400;
color: #666666; color: #999999;
line-height: 26rpx;
} }
.goods-price {
margin-top: 24rpx;
.price-discount{
height: 38rpx;
font-size: 24rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
line-height: 30rpx;
}
.price-x {
margin-left: 6rpx;
font-size: 20rpx;
font-family: ArialMT;
line-height: 22rpx;
color: #999999;
}
.price-xx {
text-decoration: line-through;
height: 22rpx;
font-size: 20rpx;
font-family: ArialMT;
color: #999999;
line-height: 22px;
}
}
.price-xx {
font-size: 20rpx;
text-decoration: line-through;
}
} }
.detail-right { .detail-right {
display: flex; display: flex;
justify-content: flex-start;
align-items: center;
// text { // text {
// width: 40rpx; // width: 40rpx;
// line-height: 40rpx; // line-height: 40rpx;
...@@ -350,24 +416,29 @@ export default { ...@@ -350,24 +416,29 @@ export default {
// margin-right: 10rpx; // margin-right: 10rpx;
// color: #000000; // color: #000000;
// } // }
// .subtract { .subtract {
// float: left; width: 40rpx;
// position: relative; height: 40rpx;
background: url('../../static/imgs/jianhao.png') center center no-repeat;
background-size:100% 100%;
// } }
.num { .num {
// float: left; height: 28rpx;
// position: relative; font-size: 32rpx;
margin-left: 15rpx; font-family: ArialMT;
margin-right: 15rpx;
color: #000000; color: #000000;
// font-size: 28rpx; line-height: 28rpx;
margin-left: 26rpx;
margin-right: 26rpx;
font-weight: bold; font-weight: bold;
} }
// .add { .add {
// float: left; width: 40rpx;
// position: relative; height: 40rpx;
// } background: url('../../static/imgs/jiahao.png') center center no-repeat;
background-size:100% 100%;
}
} }
} }
} }
...@@ -404,6 +475,7 @@ export default { ...@@ -404,6 +475,7 @@ export default {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1);
display: flex; display: flex;
z-index: 10075; z-index: 10075;
align-items: center; align-items: center;
...@@ -420,25 +492,26 @@ export default { ...@@ -420,25 +492,26 @@ export default {
} }
.car-img { .car-img {
width: 40rpx; width: 45rpx;
height: 48rpx; height: 54rpx;
display: inline-block; display: inline-block;
background: url('../../static/imgs/icon-shop-package.png') center center no-repeat; background: url('../../static/imgs/gouwudai.png') center center no-repeat;
background-size: cover; background-size: cover;
position: relative; position: relative;
.badge { .badge {
position: absolute; position: absolute;
height: 24rpx; height: 26rpx;
background: #006ECF; font-family: Futura-Medium, Futura;
background: #FF72C1;
right: -16rpx; right: -16rpx;
top: -4rpx; top: -4rpx;
min-width: 24rpx; min-width: 26rpx;
font-size: 16rpx; font-weight: 500;
font-family: Arial-BoldMT, Arial; font-size: 20rpx;
font-weight: normal; font-weight: normal;
color: #FFFFFF; color: #FFFFFF;
line-height: 18rpx; line-height: 26rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -453,10 +526,15 @@ export default { ...@@ -453,10 +526,15 @@ export default {
font-size: 32rpx; font-size: 32rpx;
line-height: 92rpx; line-height: 92rpx;
background-color: #006ECF; background-color: #006ECF;
text-align: center; text-align: right;
color: #fff; color: #fff;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
.goSubmmit{
background: url('../../static/imgs/fukuan.png') center center no-repeat;
width: 200rpx;
height: 100%;
}
} }
</style> </style>
main.js
...@@ -7,9 +7,18 @@ import utils from './utils/utils'; ...@@ -7,9 +7,18 @@ import utils from './utils/utils';
// 需要在Vue.use(uView)之后执行 // 需要在Vue.use(uView)之后执行
// #ifndef VUE3 // #ifndef VUE3
import Vue from 'vue'; import Vue from 'vue';
import Vuex from 'vuex'
import uView from 'uview-ui'; import uView from 'uview-ui';
import User from '@/request/user'; import User from '@/request/user';
// main.js
import initToast from "@/components/bocft-toast/initToast.js"
import showToast from "@/components/bocft-toast/bocft-toast.vue"
initToast(Vue);
Vue.component('show-toast',showToast);
Vue.use(uView); Vue.use(uView);
Vue.prototype.$utils = utils; Vue.prototype.$utils = utils;
Vue.prototype.setPrice = (price) => price && Number(price).toFixed(2); Vue.prototype.setPrice = (price) => price && Number(price).toFixed(2);
...@@ -22,6 +31,10 @@ Vue.prototype.loginByPhoneNumber = (e) => { ...@@ -22,6 +31,10 @@ Vue.prototype.loginByPhoneNumber = (e) => {
} }
}; };
Vue.prototype.$toast = (e) => {
console.log(Vuex)
}
Vue.config.productionTip = false; Vue.config.productionTip = false;
App.mpType = 'app'; App.mpType = 'app';
......
menuSubPackage/pages/goodsDetail/goodsDetail.vue
<template> <template>
<view class="spec-content"> <view class="spec-content">
<view class="topBar" :style="{'top':topBarTop+'px','height':topBarHeight+'px'}">
<u-icon @click="goBack" name="arrow-left" color="#000000" size="20"></u-icon>
</view>
<view v-if="goodInfo"> <view v-if="goodInfo">
<view class="uni-margin-wrap"> <view class="uni-margin-wrap">
<swiper v-if="goodInfo.pics.introImagesApplet" class="swiper"> <swiper v-if="goodInfo.pics.introImagesApplet" class="swiper">
...@@ -33,7 +36,7 @@ ...@@ -33,7 +36,7 @@
</view> </view>
</view> </view>
<view class="spec-detail"> <view class="spec-detail">
<view class="spec-detail-title spec-info-left">商品详情</view> <view class="spec-detail-title spec-info-left">商品详细</view>
<view v-if="goodInfo.pics.detailImagesApplet"> <view v-if="goodInfo.pics.detailImagesApplet">
<view class="spec-detail-img" v-for="item in goodInfo.pics.detailImagesApplet" :key="item"> <view class="spec-detail-img" v-for="item in goodInfo.pics.detailImagesApplet" :key="item">
<image class="spec-detail-img-item" :src="item" mode="scaleToFill"></image> <image class="spec-detail-img-item" :src="item" mode="scaleToFill"></image>
...@@ -46,7 +49,7 @@ ...@@ -46,7 +49,7 @@
<view class="good-select-height"></view> <view class="good-select-height"></view>
</view> </view>
<view class="good-select good-select-height"> <view class="good-select good-select-height" :style="{'padding-bottom':BottomSafeHeight+'px'}">
<view class="good-select-price"> <view class="good-select-price">
<div> <div>
<text class="good-select-price-normal">￥{{ priceTotal.discount }}</text> <text class="good-select-price-normal">￥{{ priceTotal.discount }}</text>
...@@ -54,19 +57,24 @@ ...@@ -54,19 +57,24 @@
</div> </div>
<div v-if="!size > 0" style="color: orangered">已售罄</div> <div v-if="!size > 0" style="color: orangered">已售罄</div>
<div v-else class="set_size"> <div v-else class="set_size">
<u-icon name="minus-circle" @click="reduceGood" color="#2979ff" size="22"></u-icon> <view class="subtract" @click="reduceGood"></view>
<span>{{ size }}</span> <span>{{ size }}</span>
<u-icon name="plus-circle-fill" color="#2979ff" @click="addGood" size="22"></u-icon> <view class="add" @click="addGood" ></view>
<!-- <u-icon name="minus-circle" @click="reduceGood" color="#2979ff" size="22"></u-icon> -->
<!-- <u-icon name="plus-circle-fill" color="#2979ff" @click="addGood" size="22"></u-icon> -->
</div> </div>
</view> </view>
<view v-if="size > 0" class="good-select-cont"> <view v-if="size > 0" class="good-select-cont">
<a class="good-select-btn1" @click="getallNum()" v-if="userms"> <view>
立即购买 <a class="good-select-btn1" @click="getallNum()" v-if="userms">
</a> 立即购买
<button v-if="!userms" class="good-select-btn1" style="border-radius: 0;" open-type="getPhoneNumber" </a>
@getphonenumber="getallNum"> <button v-if="!userms" class="good-select-btn1" style="border-radius: 0;" open-type="getPhoneNumber"
立即购买 @getphonenumber="getallNum">
</button> 立即购买
</button>
</view>
<span class="good-select-btn2" @click="shoppingCart" type="default">加入购物袋</span> <span class="good-select-btn2" @click="shoppingCart" type="default">加入购物袋</span>
</view> </view>
</view> </view>
...@@ -91,10 +99,29 @@ export default { ...@@ -91,10 +99,29 @@ export default {
loginInfo:"", loginInfo:"",
pirce: 0, pirce: 0,
size: 0, size: 0,
topBarTop:0,
topBarHeight:0,
BottomSafeHeight:0
} }
}, },
onShow() { onShow() {
uni.removeStorageSync('goodsList'); uni.removeStorageSync('goodsList');
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')
},
mounted(){
// 获取胶囊坐标位置
const res = wx.getMenuButtonBoundingClientRect()
const menuInfoTop = res.top
const menuInfoBottom = res.bottom
const menuHeight = res.height
let headHeight = 0
wx.getSystemInfo({
success: (res) => {
headHeight = res.statusBarHeight
}
})
this.topBarTop = menuInfoTop
this.topBarHeight = menuHeight
}, },
onLoad() { onLoad() {
if(!this.userms){ if(!this.userms){
...@@ -136,6 +163,11 @@ export default { ...@@ -136,6 +163,11 @@ export default {
}) })
}, },
methods: { methods: {
goBack(){
wx.navigateBack({
delta: 1
});
},
setDefaultStyle(id) { setDefaultStyle(id) {
let selected = false; let selected = false;
if (this.skusDefault && this.skusDefault.rules) { if (this.skusDefault && this.skusDefault.rules) {
...@@ -265,13 +297,23 @@ export default { ...@@ -265,13 +297,23 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.topBar{
// border: 1px solid red;
position: fixed;
z-index: 10;
width: 100%;
display: flex;
align-items: center;
padding-left: 34rpx;
}
.uni-margin-wrap { .uni-margin-wrap {
width: 100%; width: 100%;
} }
.swiper { .swiper {
height: 597rpx; height: 561rpx;
width: 100%; width: 100%;
} }
...@@ -286,7 +328,7 @@ export default { ...@@ -286,7 +328,7 @@ export default {
} }
.spec-info-left { .spec-info-left {
padding: 22rpx 34rpx; padding: 24rpx 32rpx;
} }
...@@ -300,46 +342,44 @@ export default { ...@@ -300,46 +342,44 @@ export default {
text-align: left; text-align: left;
.good-name { .good-name {
font-size: 32rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 500;
color: #000000; color: #333333;
line-height: 44rpx; line-height: 44rpx;
margin-top: 24rpx; margin-top: 24rpx;
} }
.good-spec-name { .good-spec-name {
margin-top: 24rpx; margin-top: 51rpx;
color: rgba(0, 0, 0, 1); font-family: PingFangSC-Regular, PingFang SC;
font-size: 28rpx; color: #999999;
font-weight: 400;
font-size: 24rpx;
text-align: left; text-align: left;
line-height: 40rpx; line-height: 40rpx;
font-weight: bold;
} }
.good-spec-rule { .good-spec-rule {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
margin-left: 8rpx; margin-top: 26rpx;
margin-top: 24rpx;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: 0rpx;
.div_item { .div_item {
position: relative; position: relative;
width: 120rpx; width: 120rpx;
height: 48rpx; height: 48rpx;
margin-right: 10rpx; margin-right: 32rpx;
margin-top: 10rpx;
line-height: 48rpx; line-height: 48rpx;
margin-left: 10rpx;
.default { .default {
width: 42rpx; width: 42rpx;
height: 25rpx; height: 25rpx;
background-color: #ed79c5; background-color: #ed79c5;
border-radius: 5rpx;
position: absolute; position: absolute;
right: -17rpx; right: -17rpx;
top: -15rpx; top: -15rpx;
...@@ -358,33 +398,57 @@ export default { ...@@ -358,33 +398,57 @@ export default {
.good-spec-rule-item { .good-spec-rule-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6rpx;
font-size: 24rpx; font-size: 24rpx;
color: #000; color: #333333;
text-align: center; text-align: center;
font-weight: 400;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 50rpx; line-height: 50rpx;
border-radius: 0rpx;
border: none;
font-family: PingFangSC-Regular, PingFang SC;
background: #EAEAEA;
&.active { &.active {
background: #006ECF; font-weight: 400;
background: #003AE9;
color: #fff; color: #fff;
border-radius: 0rpx;
border: 0rpx;
font-family: PingFangSC-Regular, PingFang SC;
} }
} }
.good-spec-rule-item::after{
border-radius: 0rpx;
border: 0rpx;
}
// button[disabled]:not([type]) {
// background: red;
// }
.spec-detail { .spec-detail {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.spec-detail-title { .spec-detail-title {
font-weight: bold; width: 112rpx;
margin-bottom: 30rpx; height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
color: #333333;
line-height: 40px;
} }
.spec-detail-img { .spec-detail-img {
margin-top: 55rpx;
margin-left: 30rpx;
margin-right: 30rpx;
height: 500rpx; height: 500rpx;
} }
...@@ -402,6 +466,7 @@ export default { ...@@ -402,6 +466,7 @@ export default {
position: fixed; position: fixed;
bottom: 0rpx; bottom: 0rpx;
text-align: center; text-align: center;
height: 268rpx;
background-color: #fff; background-color: #fff;
height: auto; height: auto;
padding-bottom: 20rpx; padding-bottom: 20rpx;
...@@ -410,62 +475,87 @@ export default { ...@@ -410,62 +475,87 @@ export default {
.good-select-price { .good-select-price {
display: flex; display: flex;
align-items: center; align-items: center;
height: 58rpx; height: 68rpx;
background: #FFFFFF; background: #FFFFFF;
justify-content: space-between; justify-content: space-between;
padding: 10rpx 34rpx; align-items: center;
padding: 22rpx 32rpx;
} }
.good-select-price-normal { .good-select-price-normal {
font-size: 36rpx; font-family: Futura-Medium, Futura;
color: rgba(235, 95, 23, 1); letter-spacing: 1px;
margin-right: 10rpx; font-size: 32rpx;
font-weight: 600; color: #333333;
margin-right: 12rpx;
font-weight: 500;
} }
.good-select-price-small { .good-select-price-small {
font-size: 20rpx; font-size: 20rpx;
text-decoration: line-through; text-decoration: line-through;
font-family: ArialMT;
color: #999999;
} }
.good-select-cont { .good-select-cont {
margin-top: 20rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
justify-content: space-between; justify-content: space-between;
padding: 0 32rpx; padding: 0 30rpx;
} }
.good-select-btn1 { .good-select-btn1 {
width: 328rpx; width: 328rpx;
height: 76rpx; height: 104rpx;
border-radius: 10rpx; border: 2rpx solid #003AE9;
border: 2rpx solid #006ECF; font-size: 28rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #006ECF; color: #003AE9;
line-height: 76rpx; border-radius: 2px;
line-height: 104rpx;
text-align: center; text-align: center;
background: #FFFFFF;
} }
.good-select-btn2 { .good-select-btn2 {
width: 328rpx; width: 328rpx;
height: 76rpx; height: 104rpx;
background: #006ECF; border-radius: 2px;
border-radius: 10rpx; font-size: 28rpx;
line-height: 76rpx; font-family: PingFangSC-Regular, PingFang SC;
background: #003AE9;
line-height: 104rpx;
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.set_size { .set_size {
display: flex; display: flex;
width: 150rpx;
justify-content: space-between;
align-items: center;
.subtract {
width: 40rpx;
height: 40rpx;
background: url('@/static/imgs/jianhao.png') center center no-repeat;
background-size:100% 100%;
}
.add {
width: 40rpx;
height: 40rpx;
background: url('@/static/imgs/jiahao.png') center center no-repeat;
background-size:100% 100%;
}
span { span {
margin: 0 20rpx margin: 0 26rpx;
font-size: 32rpx;
font-family: ArialMT;
color: #000000;
} }
} }
</style> </style>
orderSubPackage/pages/settlement/index.vue
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
<div class="total"> <div class="total">
<div class="size">共{{ totalNum }}件商品</div> <div class="size">共{{ totalNum }}件商品</div>
<div> <div class="priceBox">
<span class="paid_in">实付</span> <span class="paid_in">实付</span>
<span class="money">￥{{ totalPrice }}</span> <span class="money">￥{{ totalPrice }}</span>
</div> </div>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
</div> </div>
</div> </div>
<div style="height:150rpx"></div> <div style="height:150rpx"></div>
<div class="footer"> <div class="footer" :style="{'padding-bottom':BottomSafeHeight+'px'}">
<div class="total"> <div class="total">
<div class="the_sum"> <div class="the_sum">
<span class="name">合计</span> <span class="name">合计</span>
...@@ -74,8 +74,8 @@ ...@@ -74,8 +74,8 @@
<div class="price">总优惠￥{{ reduction }}</div> <div class="price">总优惠￥{{ reduction }}</div>
</div> --> </div> -->
</div> </div>
<view v-if="userms" class="payment" @click="messageAndSave">付款</view> <view v-if="userms" class="payment" @click="messageAndSave"></view>
<button v-if="!userms" class="payment" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">付款</button> <button v-if="!userms" class="payment" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
</div> </div>
</view> </view>
</template> </template>
...@@ -96,6 +96,7 @@ export default { ...@@ -96,6 +96,7 @@ export default {
this.duration = data.data this.duration = data.data
}) })
} }
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')
}, },
onLoad(option) { onLoad(option) {
if(!this.userms){ if(!this.userms){
...@@ -160,7 +161,8 @@ export default { ...@@ -160,7 +161,8 @@ export default {
option: '', option: '',
payType: '1', payType: '1',
duration: '', duration: '',
loginInfo: '' loginInfo: '',
BottomSafeHeight:0
} }
}, },
computed: { computed: {
...@@ -263,7 +265,6 @@ export default { ...@@ -263,7 +265,6 @@ export default {
width: 686rpx; width: 686rpx;
height: 306rpx; height: 306rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx;
margin: 0 auto; margin: 0 auto;
margin-top: 32rpx; margin-top: 32rpx;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
...@@ -273,12 +274,13 @@ export default { ...@@ -273,12 +274,13 @@ export default {
h3 { h3 {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 500;
color: #000000; font-weight: 500;
color: #333333;
} }
.address { .address {
margin-top: 16rpx; margin-top: 18rpx;
.address_1 { .address_1 {
...@@ -289,34 +291,35 @@ export default { ...@@ -289,34 +291,35 @@ export default {
} }
.address_2 { .address_2 {
margin-top: 5rpx; margin-top: 18rpx;
font-size: 20rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #999999;
} }
} }
.take_order { .take_order {
margin-top: 28rpx; margin-top: 25rpx;
padding-top: 28rpx; padding-top: 25rpx;
border-top: 1rpx solid #EEEEEE; border-top: 1rpx solid #ECECEC;
height: 2rpx;
.title { .title {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #333333;
} }
.time { .time {
font-size: 20rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #999999;
.min { .min {
color: #006ECF; color: #003AE9;
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
margin: 0 5rpx; margin: 0 5rpx;
...@@ -329,24 +332,23 @@ export default { ...@@ -329,24 +332,23 @@ export default {
.goods_info { .goods_info {
width: 686rpx; width: 686rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx;
margin: 0 auto; margin: 0 auto;
margin-top: 32rpx; margin-top: 32rpx;
padding: 24rpx 32rpx; padding: 26rpx 32rpx;
box-sizing: border-box; box-sizing: border-box;
h3 { h3 {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 500;
color: #000000; color: #333333;
} }
.goods { .goods {
margin-top: 42rpx; margin-top: 24rpx;
border-bottom: 1rpx solid #EEEEEE; border-bottom: 1px solid #ECECEC;
padding-bottom: 30rpx; padding-bottom: 25rpx;
.goods_item { .goods_item {
display: flex; display: flex;
...@@ -354,10 +356,10 @@ export default { ...@@ -354,10 +356,10 @@ export default {
} }
.goods_img { .goods_img {
height: 80rpx; height: 112rpx;
width: 80rpx; width: 112rpx;
background-color: #eee; background-color: #eee;
margin-right: 30rpx; margin-right: 31rpx;
} }
.goods_text { .goods_text {
...@@ -370,24 +372,24 @@ export default { ...@@ -370,24 +372,24 @@ export default {
align-items: center; align-items: center;
.name { .name {
font-size: 24rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600; font-weight: 400;
color: #333333; color: #666666;
} }
.price { .price {
font-size: 28rpx; font-size: 28rpx;
font-family: Arial-BoldMT, Arial; font-family: Futura-Medium, Futura;
font-weight: normal; font-weight: 500;
color: #000000; color: #333333;
} }
.psce_name { .psce_name {
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #999999;
} }
.size { .size {
...@@ -398,14 +400,13 @@ export default { ...@@ -398,14 +400,13 @@ export default {
} }
.goods_psce { .goods_psce {
margin-top: 10rpx; margin-top: 18rpx;
} }
} }
} }
.discount { .discount {
margin-top: 15rpx; margin-top: 25rpx;
padding-top: 15rpx;
.discount_1 { .discount_1 {
display: flex; display: flex;
...@@ -447,39 +448,42 @@ export default { ...@@ -447,39 +448,42 @@ export default {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 30rpx; margin-top: 25rpx;
.size { .size {
font-size: 24rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
} }
.paid_in { .priceBox{
font-size: 24rpx; display: flex;
font-family: PingFangSC-Regular, PingFang SC; align-items: center;
font-weight: 600; .paid_in {
color: #000000; font-size: 28rpx;
} font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.money { .money {
font-weight: 600; font-weight: 500;
font-size: 32rpx; font-size: 36rpx;
color: #000000; color: #333333;
vertical-align: middle; vertical-align: middle;
}
} }
} }
} }
.Payment_method { .Payment_method {
width: 686rpx; width: 686rpx;
height: 86rpx; margin: 30rpx auto 0;
margin: 32rpx auto 0; padding: 26rpx 30rpx;
padding: 0 32rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; font-size: 28rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
...@@ -491,42 +495,47 @@ export default { ...@@ -491,42 +495,47 @@ export default {
.type { .type {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 600; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
font-size: 24rpx;
.icon { .icon {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin-right: 10rpx; margin-right: 8rpx;
} }
} }
} }
.footer { .footer {
height: 92rpx; height: 100rpx;
background: #fff; background: #fff;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
display: flex; display: flex;
align-items: center;
width: 100%; width: 100%;
.total { .total {
flex: 1; flex: 1;
padding-left: 32rpx; padding-left: 30rpx;
.the_sum { .the_sum {
line-height: 92rpx; display: flex;
align-items: center;
.name { .name {
font-size: 24rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500; font-weight: 400;
color: #000000; color: #333333;
} }
.price { .price {
font-size: 28rpx; margin-left: 13rpx;
font-family: Arial-BoldMT, Arial; font-size: 36rpx;
font-weight: normal; font-family: Futura-Medium, Futura;
color: #000000; font-weight: 500;
color: #333333;
} }
} }
...@@ -540,15 +549,10 @@ export default { ...@@ -540,15 +549,10 @@ export default {
} }
.payment { .payment {
width: 170rpx; width: 200rpx;
height: 100%; height: 100%;
background: #006ECF; background: url('@/static/imgs/fukuan.png') center center no-repeat;
text-align: center; background-size: 100%;
line-height: 92rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
} }
} }
</style> </style>
\ No newline at end of file
pages.json
...@@ -95,9 +95,10 @@ ...@@ -95,9 +95,10 @@
}, },
"tabBar": { "tabBar": {
"custom": false, "custom": false,
"color": "#000000", "color": "#999999",
"selectedColor": "#006ECF", "selectedColor": "#003AE9",
"iconWidth": "22px", "iconWidth": "32rpx",
"borderStyle":"white",
"list": [ "list": [
{ {
"iconPath": "/static/imgs/caidanweixuanzhong.png", "iconPath": "/static/imgs/caidanweixuanzhong.png",
......
pages/menu/menu.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</view> </view>
</view> </view>
<view> <view>
<u-icon name="arrow-right" v-if="userms" class="arrow-right-select" color="#717171"></u-icon> <image class="arrow-right-select" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" />
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber" <button class="login-btn" v-if="!userms" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">立刻登录 @getphonenumber="getPhoneNumber">立刻登录
</button> </button>
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
<OrderQrCode ref="OrderQrCode" /> <OrderQrCode ref="OrderQrCode" />
<canvas class="canvas-code" canvas-id="myQrcode2" <canvas class="canvas-code" canvas-id="myQrcode2"
style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" /> style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" />
<show-toast ref="toast"/>
</view> </view>
</template> </template>
<script> <script>
...@@ -199,7 +200,7 @@ export default { ...@@ -199,7 +200,7 @@ export default {
e.loginInfo = this.loginInfo e.loginInfo = this.loginInfo
User.getPhoneNumber(e); User.getPhoneNumber(e);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") { } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
uni.showToast({ title: '已拒绝手机号授权', icon: 'error' }) this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
} }
}, },
// 获取定位授权 // 获取定位授权
...@@ -220,7 +221,7 @@ export default { ...@@ -220,7 +221,7 @@ export default {
fail: (err) => { //1.2 拒绝授权 fail: (err) => { //1.2 拒绝授权
wx.exitMiniProgram({ success: (res) => { } }) wx.exitMiniProgram({ success: (res) => { } })
// console.log("获取位置失败") // console.log("获取位置失败")
uni.showToast({ "title" : "获取位置失败,请打开位置授权", icon : 'error' }) this.showToast({ "title" : "获取位置失败,请打开位置授权", icon : 'error'})
} }
}) })
// if (res.authSetting['scope.userLocation']) { // if (res.authSetting['scope.userLocation']) {
...@@ -252,7 +253,7 @@ export default { ...@@ -252,7 +253,7 @@ export default {
let itemCopy = JSON.parse(JSON.stringify(item)); let itemCopy = JSON.parse(JSON.stringify(item));
const sku = itemCopy.skus.find(v => v.isDefault == 1 && v.state != 2) || itemCopy.skus.find(v => v.isDefault == 0 && v.state != 2); const sku = itemCopy.skus.find(v => v.isDefault == 1 && v.state != 2) || itemCopy.skus.find(v => v.isDefault == 0 && v.state != 2);
if (!sku) { if (!sku) {
uni.showToast({ title: '本商品已经售罄', icon: 'none' }); this.showToast({ title: '本商品已经售罄', icon: 'none' });
return; return;
} else { } else {
itemCopy.skus = [sku]; itemCopy.skus = [sku];
...@@ -301,7 +302,6 @@ export default { ...@@ -301,7 +302,6 @@ export default {
.arrow-right-select { .arrow-right-select {
width: 9rpx; width: 9rpx;
height: 22rpx; height: 22rpx;
// border: 3rpx solid #FFFFFF // border: 3rpx solid #FFFFFF
} }
} }
...@@ -358,9 +358,9 @@ export default { ...@@ -358,9 +358,9 @@ export default {
} }
.user-info { .user-info {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
width: 530.55rpx;
justify-content:space-between; justify-content:space-between;
flex-wrap:nowrap; flex-wrap:nowrap;
.user-name { .user-name {
...@@ -385,6 +385,10 @@ export default { ...@@ -385,6 +385,10 @@ export default {
flex: 1; flex: 1;
} }
} }
.arrow-right-select{
width: 9rpx;
height: 22rpx;
}
} }
.login-btn { .login-btn {
...@@ -404,27 +408,27 @@ export default { ...@@ -404,27 +408,27 @@ export default {
} }
.order-banner { .order-banner {
width: 710rpx; width: 718rpx;
height: 179rpx; height: 179rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 4rpx 2rpx 4rpx 3rpx #f3f1f4; box-shadow: -2px -2px 4px 0px rgba(102, 102, 102, 0.1), 4px 4px 8px 0px rgba(102, 102, 102, 0.1);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
left: 20rpx; left: 16rpx;
top: 12rpx; top: 0rpx;
z-index: 10; z-index: 10;
display: flex; display: flex;
justify-content: flex-start;
.info { .info {
padding-left: 32rpx; padding-left: 34rpx;
flex: 1;
.first { .first {
height: 44rpx; height: 44rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #6d6a6d; color: #666666;
line-height: 44rpx; line-height: 44rpx;
margin-top: 40rpx; margin-top: 40rpx;
.first-code{ .first-code{
...@@ -435,19 +439,21 @@ export default { ...@@ -435,19 +439,21 @@ export default {
} }
.second { .second {
margin-top: 20rpx; margin-top: 12rpx;
height: 34rpx; height: 34rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #a4a2a5; color: #999999;
line-height: 34rpx; line-height: 34rpx;
letter-spacing: 0rpx; letter-spacing: 0rpx;
text-shadow: -2px -2px 4px rgba(102, 102, 102, 0.1);
.time { .time {
font-size: 32rpx; font-size: 32rpx;
font-family: Futura, Arial, sans-serif; font-family: Futura Medium, Arial, sans-serif;
font-weight: normal; font-weight: normal;
color: #003ae9; color: #003AE9;
margin: 0 16rpx; margin: 0 16rpx;
} }
} }
...@@ -458,12 +464,14 @@ export default { ...@@ -458,12 +464,14 @@ export default {
height: 104rpx; height: 104rpx;
border-right: 2rpx solid #f8f5f8; border-right: 2rpx solid #f8f5f8;
position: absolute; position: absolute;
right: 188rpx; left: 510rpx;
box-shadow: -2rpx -2rpx 4rpx 0rpx rgba(102, 102, 102, 0.1);
top: 36rpx; top: 36rpx;
} }
.barCode-box { .barCode-box {
margin-top: 30rpx; margin-top: 30rpx;
margin-left: 126rpx;
width: 150rpx; width: 150rpx;
height: 122rpx; height: 122rpx;
display: flex; display: flex;
......
static/imgs/caidanweixuanzhong.png
static/imgs/caidanweixuanzhong.png

2.75 KB | W: | H:

static/imgs/caidanweixuanzhong.png

1.98 KB | W: | H:

static/imgs/caidanweixuanzhong.png
static/imgs/caidanweixuanzhong.png
static/imgs/caidanweixuanzhong.png
static/imgs/caidanweixuanzhong.png
  • 2-up
  • Swipe
  • Onion skin
static/imgs/caidanxuanzhong.png
static/imgs/caidanxuanzhong.png

2.62 KB | W: | H:

static/imgs/caidanxuanzhong.png

3.23 KB | W: | H:

static/imgs/caidanxuanzhong.png
static/imgs/caidanxuanzhong.png
static/imgs/caidanxuanzhong.png
static/imgs/caidanxuanzhong.png
  • 2-up
  • Swipe
  • Onion skin
static/imgs/dingdanweixuanzhong.png
static/imgs/dingdanweixuanzhong.png

1.15 KB | W: | H:

static/imgs/dingdanweixuanzhong.png

1.54 KB | W: | H:

static/imgs/dingdanweixuanzhong.png
static/imgs/dingdanweixuanzhong.png
static/imgs/dingdanweixuanzhong.png
static/imgs/dingdanweixuanzhong.png
  • 2-up
  • Swipe
  • Onion skin
static/imgs/dingdanxuanzhong.png
static/imgs/dingdanxuanzhong.png

1017 Bytes | W: | H:

static/imgs/dingdanxuanzhong.png

3.03 KB | W: | H:

static/imgs/dingdanxuanzhong.png
static/imgs/dingdanxuanzhong.png
static/imgs/dingdanxuanzhong.png
static/imgs/dingdanxuanzhong.png
  • 2-up
  • Swipe
  • Onion skin
static/imgs/wodeweixuanzhong.png
static/imgs/wodeweixuanzhong.png

2.36 KB | W: | H:

static/imgs/wodeweixuanzhong.png

3.57 KB | W: | H:

static/imgs/wodeweixuanzhong.png
static/imgs/wodeweixuanzhong.png
static/imgs/wodeweixuanzhong.png
static/imgs/wodeweixuanzhong.png
  • 2-up
  • Swipe
  • Onion skin
static/imgs/wodexuanzhong.png
static/imgs/wodexuanzhong.png

1.9 KB | W: | H:

static/imgs/wodexuanzhong.png

4.97 KB | W: | H:

static/imgs/wodexuanzhong.png
static/imgs/wodexuanzhong.png
static/imgs/wodexuanzhong.png
static/imgs/wodexuanzhong.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment