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