优化提交页面样式,优化商品默认为第一个热词进行搜索,修复分销商铺bug

master
lemon橪 2021-09-01 17:30:54 +08:00
parent c53af2fcc3
commit 275d76c0dd
11 changed files with 290 additions and 235 deletions

View File

@ -2,8 +2,8 @@
"name" : "lili商城", "name" : "lili商城",
"appid" : "__UNI__C100675", "appid" : "__UNI__C100675",
"description" : "", "description" : "",
"versionName" : "4.0.32", "versionName" : "4.0.34",
"versionCode" : 4000032, "versionCode" : 4000034,
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
"compatible" : { "compatible" : {

View File

@ -6,7 +6,7 @@
<div class="empty" v-if="couponsList.length <= 0"> <div class="empty" v-if="couponsList.length <= 0">
<u-empty text="暂无优惠券" mode="coupon"></u-empty> <u-empty text="暂无优惠券" mode="coupon"></u-empty>
</div> </div>
<view class="coupon-item" v-for="(item, index) in couponsList" :key="index" v-if="item.memberCouponStatus == 'NEW'"> <view class="coupon-item" v-for="(item, index) in couponsList" :key="index" >
<view class="left"> <view class="left">
<view class="wave-line"> <view class="wave-line">
<view class="wave" v-for="(item, index) in 12" :key="index"></view> <view class="wave" v-for="(item, index) in 12" :key="index"></view>
@ -31,7 +31,7 @@
<view class="reason" v-if="item.reason">{{item.reason}}</view> <view class="reason" v-if="item.reason">{{item.reason}}</view>
<view class="end-time">有效期至:{{item.endTime}}</view> <view class="end-time">有效期至:{{item.endTime}}</view>
</view> </view>
<view class="receive" @click="clickWay(item)"> <view class="receive" v-if="current ==0" @click="clickWay(item)">
<text>立即</text><br /> <text>立即</text><br />
<text>使用</text> <text>使用</text>
</view> </view>
@ -53,7 +53,7 @@ export default {
name: "可用优惠券", name: "可用优惠券",
}, },
{ {
name: "不可优惠券", name: "不可优惠券",
}, },
], ],
couponsList: [], // couponsList: [], //

View File

@ -222,7 +222,7 @@ export default {
*/ */
handleNavgationGoods(val) { handleNavgationGoods(val) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/product/goods?id=${val.skuId}&goodsId=${val.id}`, url: `/pages/product/goods?id=${val.skuId}&goodsId=${val.goodsId}`,
}); });
}, },

View File

@ -1,10 +1,9 @@
<template> <template>
<view class="content"> <view class="content">
<u-navbar :background="navObj" :is-back="false"> <u-navbar :background="navObj" :is-back="false">
<!-- mSearch组件 如果使用原样式删除组件元素--> <mSearch ref="mSearch" class="mSearch-input-box" @clickLeft="back" :mode="2" :placeholder="defaultKeyword"
@search="doSearch(false)" @confirm="doSearch(false)" @SwitchType="doSearchSwitch()" v-model="keyword"
<mSearch ref="mSearch" class="mSearch-input-box" @clickLeft="back" :mode="2" :placeholder="defaultKeyword" @search="doSearch(false)" @input="inputChange" @confirm="doSearch(false)" :isFocusVal="!isShowSeachGoods"></mSearch>
@SwitchType="doSearchSwitch()" v-model="keyword" :isFocusVal="!isShowSeachGoods"></mSearch>
</u-navbar> </u-navbar>
<view class="search-keyword" v-if="!isShowSeachGoods"> <view class="search-keyword" v-if="!isShowSeachGoods">
@ -23,22 +22,19 @@
<view class="u-tips">热门搜索</view> <view class="u-tips">热门搜索</view>
</view> </view>
<view class="keyword keywordBox"> <view class="keyword keywordBox">
<view class="wes" v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{ keyword }}</view> <view class="wes" v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">
{{ keyword }}</view>
</view> </view>
</view> </view>
<view class="keyword-block" v-if="oldKeywordList.length > 0"> <view class="keyword-block" v-if="oldKeywordList.length > 0">
<view class="keyword-list-header"> <view class="keyword-list-header">
<view class="u-tips">搜索历史</view> <view class="u-tips">搜索历史</view>
</view> </view>
<div class="oldKeyList"> <div class="oldKeyList">
<div class="oldKeyItem" v-if="keyword" v-for="(keyword, index) in oldKeywordList" :key="index"
<div class="oldKeyItem" v-if="keyword" v-for="(keyword, index) in oldKeywordList" :key="index" @click="doSearch(keyword)"> @click="doSearch(keyword)">
<span>{{ keyword }} </span> <span>{{ keyword }} </span>
</div> </div>
<div @click="showMore" v-if=" oldKeywordIndex > loadIndex" class="oldKeyItem"></div> <div @click="showMore" v-if=" oldKeywordIndex > loadIndex" class="oldKeyItem"></div>
</div> </div>
</view> </view>
@ -54,11 +50,13 @@
<text>销量</text> <text>销量</text>
<view class="p-box"> <view class="p-box">
<view class="index-nav-arrow"> <view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-up-1.png" v-if="params.sort === 'buyCount' && params.order === 'asc'" mode="aspectFit"></image> <image class="img" src="/static/index/arrow-up-1.png"
v-if="params.sort === 'buyCount' && params.order === 'asc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image> <image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
</view> </view>
<view class="index-nav-arrow"> <view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-down.png" v-if="params.sort === 'buyCount' && params.order === 'desc'" mode="aspectFit"></image> <image class="img" src="/static/index/arrow-down.png"
v-if="params.sort === 'buyCount' && params.order === 'desc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image> <image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
</view> </view>
</view> </view>
@ -67,11 +65,13 @@
<text>价格</text> <text>价格</text>
<view class="p-box"> <view class="p-box">
<view class="index-nav-arrow"> <view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-up-1.png" v-if="params.sort === 'price' && params.order === 'asc'" mode="aspectFit"></image> <image class="img" src="/static/index/arrow-up-1.png"
v-if="params.sort === 'price' && params.order === 'asc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image> <image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
</view> </view>
<view class="index-nav-arrow"> <view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-down.png" v-if="params.sort === 'price' && params.order === 'desc'" mode="aspectFit"></image> <image class="img" src="/static/index/arrow-down.png"
v-if="params.sort === 'price' && params.order === 'desc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image> <image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
</view> </view>
</view> </view>
@ -80,7 +80,8 @@
</view> </view>
<!-- 一行一个商品展示 --> <!-- 一行一个商品展示 -->
<div v-if="isSWitch"> <div v-if="isSWitch">
<scroll-view :style="{ height: goodsHeight }" enableBackToTop="true" lower-threshold="250" @scrolltolower="loadmore()" scroll-with-animation scroll-y class="scoll-page"> <scroll-view :style="{ height: goodsHeight }" enableBackToTop="true" lower-threshold="250"
@scrolltolower="loadmore()" scroll-with-animation scroll-y class="scoll-page">
<div class="goodsClass"> <div class="goodsClass">
<u-row v-for="(item, index) in goodsList" :key="index" class="goodsRow"> <u-row v-for="(item, index) in goodsList" :key="index" class="goodsRow">
<u-col :span="4" @click.native="navigateToDetailPage(item)" class="switchType1"> <u-col :span="4" @click.native="navigateToDetailPage(item)" class="switchType1">
@ -113,7 +114,8 @@
<u-col :span="12" class="storeSellerBox"> <u-col :span="12" class="storeSellerBox">
<div class="storeSellerName" @click="clickTostore()"> <div class="storeSellerName" @click="clickTostore()">
<div class="textHidden"> <div class="textHidden">
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated" text="自营" type="error" /> <u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated" text="自营"
type="error" />
<span style=" <span style="
color: #333333; color: #333333;
@ -148,9 +150,11 @@
!isSWitch && !isSWitch &&
!(goodsList == [] || goodsList == '' || goodsList == null) !(goodsList == [] || goodsList == '' || goodsList == null)
"> ">
<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page"> <scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true"
@scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
<view class="goods-list"> <view class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navigateToDetailPage(item)"> <view v-for="(item, index) in goodsList" :key="index" class="goods-item"
@click="navigateToDetailPage(item)">
<view class="image-wrapper"> <view class="image-wrapper">
<image :src="item.thumbnail" mode="aspectFill"></image> <image :src="item.thumbnail" mode="aspectFill"></image>
</view> </view>
@ -179,7 +183,8 @@
</div> </div>
<div class="storeSellerName"> <div class="storeSellerName">
<div class="textHidden"> <div class="textHidden">
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated" text="自营" type="error" /> <u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated" text="自营"
type="error" />
<span>{{ item.storeName || "暂无" }}</span> <span>{{ item.storeName || "暂无" }}</span>
</div> </div>
<span> <span>
@ -201,7 +206,8 @@
<view class="sort-item"> <view class="sort-item">
<view class="sort-title"> 品牌 </view> <view class="sort-title"> 品牌 </view>
<view class="flex" v-if="sortData.brands"> <view class="flex" v-if="sortData.brands">
<view class="sort-brand-item" :key="brandsIndex" v-for="(brand, brandsIndex) in sortData.brands" @click="handleSort(brand, brandsIndex, 'brand')"> <view class="sort-brand-item" :key="brandsIndex" v-for="(brand, brandsIndex) in sortData.brands"
@click="handleSort(brand, brandsIndex, 'brand')">
<view class="sort-radius" :class="{ <view class="sort-radius" :class="{
'sort-active': brand.__selected, 'sort-active': brand.__selected,
}"> }">
@ -214,7 +220,9 @@
<view class="sort-item"> <view class="sort-item">
<view class="sort-title"> 全部分类 </view> <view class="sort-title"> 全部分类 </view>
<view class="flex" style="flex-wrap: wrap;" v-if="sortData.categories"> <view class="flex" style="flex-wrap: wrap;" v-if="sortData.categories">
<view class="sort-brand-item" :key="categoriesIndex" v-for="(categoryId, categoriesIndex) in sortData.categories" @click="handleSort(categoryId, categoriesIndex, 'categoryId')"> <view class="sort-brand-item" :key="categoriesIndex"
v-for="(categoryId, categoriesIndex) in sortData.categories"
@click="handleSort(categoryId, categoriesIndex, 'categoryId')">
<view class="sort-radius" :class="{ <view class="sort-radius" :class="{
'sort-active': categoryId.__selected, 'sort-active': categoryId.__selected,
}"> }">
@ -248,7 +256,8 @@
<view class="sort-item" :key="paramIndex" v-for="(param, paramIndex) in sortData.paramOptions"> <view class="sort-item" :key="paramIndex" v-for="(param, paramIndex) in sortData.paramOptions">
<view class="sort-title"> {{ param.key }} </view> <view class="sort-title"> {{ param.key }} </view>
<view class="flex" style="flex-warp:warp" v-if="param.values"> <view class="flex" style="flex-warp:warp" v-if="param.values">
<view class="sort-brand-item" :key="i" v-for="(value, i) in param.values" @click="handleSort(value, i, 'prop', param)"> <view class="sort-brand-item" :key="i" v-for="(value, i) in param.values"
@click="handleSort(value, i, 'prop', param)">
<view class="sort-radius" :class="{ <view class="sort-radius" :class="{
'sort-active': value.__selected, 'sort-active': value.__selected,
}"> }">
@ -337,7 +346,6 @@ export default {
}; };
}, },
onLoad(val) { onLoad(val) {
// return false
this.init(); this.init();
this.initSortGoods(); this.initSortGoods();
// //
@ -360,9 +368,27 @@ export default {
this.loadData(); this.loadData();
}, },
components: { components: {
//mSearch
mSearch, mSearch,
}, },
watch: {
/**
* 将搜索的字和热词进行匹配,如果为热词则不改商品搜索关键字
*/
keyword(val) {
if (val) {
let identical = this.hotKeywordList.some((item) => {
return item == val;
});
if (!identical) {
this.defaultKeyword = "请输入搜索商品";
} else {
this.defaultKeyword = val;
}
} else {
this.defaultKeyword = "请输入搜索商品";
}
},
},
onReachBottom() { onReachBottom() {
this.params.pageNumber++; this.params.pageNumber++;
@ -497,8 +523,9 @@ export default {
}, },
init() { init() {
this.loadDefaultKeyword(); //
this.loadOldKeyword(this.loadIndex); this.loadOldKeyword(this.loadIndex);
//
this.loadHotKeyword(); this.loadHotKeyword();
}, },
blur() { blur() {
@ -577,8 +604,16 @@ export default {
}, },
// //
loadDefaultKeyword() { loadDefaultKeyword() {
//ajax, /**
* 定义默认搜索关键字会根据当前热门搜索来进行显示
* 如果当前热门搜索没有的话则会显示默认关键字
*/
if (this.hotKeywordList.length != 0) {
//
this.defaultKeyword = this.hotKeywordList[0];
} else {
this.defaultKeyword = "请输入搜索商品"; this.defaultKeyword = "请输入搜索商品";
}
}, },
//,Storage //,Storage
loadOldKeyword(index) { loadOldKeyword(index) {
@ -626,6 +661,7 @@ export default {
this.hotKeywordList.push(item); this.hotKeywordList.push(item);
}); });
} }
this.loadDefaultKeyword();
}, },
// //
async loadData(type, loading) { async loadData(type, loading) {
@ -643,19 +679,7 @@ export default {
this.initSortGoods(); this.initSortGoods();
uni.hideLoading(); uni.hideLoading();
}, },
//
inputChange(event) {
//
var keyword = event.detail ? event.detail.value : event;
if (!keyword) {
this.keywordList = [];
this.isShowKeywordList = false;
return;
}
this.isShowKeywordList = true;
this.getKeywordNumFun(keyword);
},
// //
drawCorrelativeKeyword(keywords, keyword) { drawCorrelativeKeyword(keywords, keyword) {
var len = keywords.length, var len = keywords.length,
@ -696,14 +720,27 @@ export default {
}, },
// //
doSearchSwitch(val) { doSearchSwitch() {
this.isSWitch = !this.isSWitch; this.isSWitch = !this.isSWitch;
this.isShowSeachGoods = true; this.isShowSeachGoods = true;
}, },
// /**
* 执行搜索
*/
doSearch(keyword) { doSearch(keyword) {
// //
keyword = keyword === false ? this.keyword : keyword; keyword = keyword === false ? this.keyword : keyword;
if (!keyword) {
/**
* 进行空搜索
* 第一次搜索如果没有关键词会将热门搜索中第一个热词进行判定
* 如果没有热词则会展示一个空词搜索
*/
keyword = (this.hotKeywordList.length && this.hotKeywordList[0]) || "";
}
this.defaultKeyword == "请输入搜索商品" ? (keyword = "") : "";
this.keyword = keyword; this.keyword = keyword;
this.saveKeyword(keyword); // this.saveKeyword(keyword); //
this.isShowSeachGoods = true; this.isShowSeachGoods = true;
@ -711,7 +748,6 @@ export default {
this.params.keyword = keyword; this.params.keyword = keyword;
this.params.pageNumber = 1; this.params.pageNumber = 1;
this.$set(this.sortParams, "keyword", keyword); this.$set(this.sortParams, "keyword", keyword);
this.loadData("refresh", 1); this.loadData("refresh", 1);
}, },
// //
@ -747,12 +783,6 @@ export default {
}, },
}); });
}, },
//
getKeywordNumFun(keywords) {
this.params.keyword = keywords;
this.$set(this.sortParams, "keyword", keywords);
},
}, },
}; };
</script> </script>

View File

@ -1,49 +1,38 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<!-- 选择地址 --> <!-- 选择地址 -->
<div class="box1 box"> <div class="address-box" @click="clickToAddress()">
<u-row style="margin-top: 32rpx"> <div class="user-box flex">
<u-col style="padding: 0 !important" :offset="0" :span="11" @click.native="clickToAddress()"> <div class="flex-8">
<div v-if="!address.id"></div> <div v-if="!address.id"></div>
<div v-else> <div v-else>
<div class="userClass"> <div class="user-address">
{{ address.name }} <!-- 省市区 -->
<span> <div class="flex flex-a-c">
{{ address.mobile | secrecyMobile }} <span class="default" v-if="address.isDefault"></span>
<u-tag v-if="address.isDefault" text="默认" style="margin-left: 24rpx" mode="plain" type="error" <div class="address-list" v-if="address.consigneeAddressPath.length != 0">
size="mini" /> <span class="address-item" v-for="(item,index) in address.consigneeAddressPath" :key="index">
{{item}}
</span> </span>
</div> </div>
<div class="userAdress"> </div>
<span v-if="address.consigneeAddressPath[0]">{{ <!-- 详细地址 -->
address.consigneeAddressPath[0] <div class="user-address-detail wes-2">
}}</span>
<span v-if="address.consigneeAddressPath[1]">{{
address.consigneeAddressPath[1]
}}</span>
<span v-if="address.consigneeAddressPath[2]">{{
address.consigneeAddressPath[2]
}}</span>
<span v-if="address.consigneeAddressPath[3]">{{
address.consigneeAddressPath[3]
}}</span>
<span>
{{ address.detail }} {{ address.detail }}
</span> </div>
<!-- 姓名 手机号 -->
<div>
<span>{{ address.name }}</span>
<span class="mobile">{{ address.mobile | secrecyMobile }}</span>
</div>
</div>
</div> </div>
</div> </div>
</u-col>
<u-col :span="1" @click.native="
navigateTo('/pages/mine/address/address?way=' + routerVal.way)
" style="text-align: right">
<u-icon name="arrow-right" style="color: #bababa"></u-icon> <u-icon name="arrow-right" style="color: #bababa"></u-icon>
</u-col>
</u-row>
</div> </div>
<!-- 背景 --> <!-- 背景 -->
<div class="bar"></div> <div class="bar"></div>
</div>
<!-- 开团信息 --> <!-- 开团信息 -->
<view class="group-box" v-if="isAssemble"> <view class="group-box" v-if="isAssemble">
@ -64,7 +53,6 @@
width="81rpx" height="81rpx"> width="81rpx" height="81rpx">
<view slot="loading"></view> <view slot="loading"></view>
</u-image> </u-image>
<u-image class="head-img" borderRadius="50%" shape="square" v-else width="81rpx" height="81rpx" <u-image class="head-img" borderRadius="50%" shape="square" v-else width="81rpx" height="81rpx"
:src="endWay.face || '/static/missing-face.png'"></u-image> :src="endWay.face || '/static/missing-face.png'"></u-image>
@ -75,43 +63,30 @@
<!-- 店铺商品信息 --> <!-- 店铺商品信息 -->
<div class="box box2" v-for="(item, index) in orderMessage.cartList" :key="index"> <div class="box box2" v-for="(item, index) in orderMessage.cartList" :key="index">
<u-row class="tab1" @click="navigateToStore(item)"> <div @click="navigateToStore(item)">
<u-col :offset="0"> <div class="store-name">
<span class="ybname">{{ item.storeName }}</span> <span>{{ item.storeName }}</span>
</u-col> </div>
</u-row> </div>
<div class="promotionNotice">{{ item.promotionNotice || '' }}</div> <div class="promotionNotice">{{ item.promotionNotice || '' }}</div>
<u-row class="goodsBorder" v-for="(val, i) in item.skuList" :key="i"> <div class="flex goods-item" v-for="(val, i) in item.skuList" :key="i">
<u-col class="tabL" :offset="0" <div class="goods-image"
@click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" :span="3"> @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" :span="3">
<u-image borderRadius="10rpx" :src="val.goodsSku.thumbnail" alt /> <u-image borderRadius="10rpx" width="200rpx" height="200rpx" :src="val.goodsSku.thumbnail" alt />
</u-col> </div>
<u-col :span="9" <div @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)"
@click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" class="goods-detail">
class="tabC"> <div class="flex">
<div style="overflow: hidden"> <p class="goods-name">{{ val.goodsSku.goodsName }}</p>
<p class="sp_name">{{ val.goodsSku.goodsName }}</p>
<p class="sp_promotion" v-if="val.promotion_tags">
<view class="sp_tag sp_tag_plain" v-for="(promotion_item, promotion_index) in val.promotion_tags"
:key="promotion_index">{{ promotion_item }}</view>
</p>
<span class="nums">x{{ val.num }}</span> <span class="nums">x{{ val.num }}</span>
</div> </div>
<p class="goods-prices">
<p class="sp_number">{{ val.goodsSku.price | unitPrice }}</p> <span></span>
<span class="goods-price">{{formatPrice(val.goodsSku.price)[0]}}</span>
</u-col> <span>.{{formatPrice(val.goodsSku.price)[1] }}</span>
</u-row> </p>
</div>
<u-row>
<u-col :offset="0" :span="4" class="tl" style="text-align: left">备注信息</u-col>
<u-col :span="8" textAlign="right">
<u-input style="text-align:right;" class="uinput" v-model="remarkVal[index].remark" />
</u-col>
</u-row>
</div> </div>
<!-- 订单信息 -->
<div class="box box3">
<u-row> <u-row>
<u-col :offset="0" :span="4">发票信息</u-col> <u-col :offset="0" :span="4">发票信息</u-col>
<u-col :span="8" class="tipsColor" textAlign="right" @click.native="invoice()"> <u-col :span="8" class="tipsColor" textAlign="right" @click.native="invoice()">
@ -119,37 +94,25 @@
<span v-else></span> <span v-else></span>
</u-col> </u-col>
</u-row> </u-row>
</div>
<!-- 发票信息 -->
<invoices :res="receiptList" @callbackInvoice="callbackInvoice" v-if="invoiceFlag" />
<u-select v-model="shippingFlag" :list="shippingMethod"></u-select>
<!-- 优惠券 -->
<div class="box box4">
<u-row> <u-row>
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :offset="0" :span="9" @click="shippingFlag = true"> <u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :offset="0" :span="9" @click="shippingFlag = true">
</u-col> </u-col>
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="3" textAlign="right" @click="shippingFlag = true"> <u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="3" textAlign="right" @click="shippingFlag = true">
{{shippingMethod.find(e=>{ return e.value == shippingText; }).label }} {{shippingMethod.find(e=>{ return e.value == shippingText; }).label }}
</u-col> </u-col>
</u-row> </u-row>
<u-row> <u-row>
<u-col :offset="0" :span="9" @click="GET_Discount()"></u-col> <u-col :offset="0" :span="4" class="tl" style="text-align: left">备注信息</u-col>
<u-col :span="8" textAlign="right">
<u-col :span="3" v-if="orderMessage.priceDetailDTO && orderMessage.priceDetailDTO.couponPrice" textAlign="right" <u-input style="text-align:right;" class="uinput" v-model="remarkVal[index].remark" />
@click="GET_Discount()">
<span class="main-color">-{{orderMessage.priceDetailDTO.couponPrice | unitPrice}}</span>
</u-col>
<!-- orderMessage.priceDetailDTO.couponPrice | unitPrice -->
<u-col :span="3" v-else textAlign="right" @click="GET_Discount()">
{{ orderMessage.canUseCoupons.length || "0" }}张可用
<u-icon name="arrow-right"></u-icon>
</u-col> </u-col>
</u-row> </u-row>
</div> </div>
<!-- 发票信息 -->
<invoices :res="receiptList" @callbackInvoice="callbackInvoice" v-if="invoiceFlag" />
<u-select v-model="shippingFlag" :list="shippingMethod"></u-select>
<div class="box box5" v-if="orderMessage.priceDetailDTO"> <div class="box box5" v-if="orderMessage.priceDetailDTO">
<div> <div>
<u-row> <u-row>
@ -163,34 +126,45 @@
<u-row> <u-row>
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="7"></u-col> <u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="7"></u-col>
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="5" class="tr tipsColor" textAlign="right"> <u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="5" class="tr tipsColor" textAlign="right">
<u-tag v-if="orderMessage.priceDetailDTO.freightPrice == 0" style="margin-right: 20rpx" color="#FF6262" <span v-if="orderMessage.priceDetailDTO.freightPrice == 0"></span>
text="包邮" type="warning" size="mini" mode="plain" shape="circle" />
<span v-else>{{ <span v-else>{{
orderMessage.priceDetailDTO.freightPrice | unitPrice orderMessage.priceDetailDTO.freightPrice | unitPrice
}}</span> }}</span>
</u-col> </u-col>
</u-row> </u-row>
</div> </div>
<u-row>
<u-col :offset="0" :span="9" @click="GET_Discount()"></u-col>
<u-col :span="3" v-if="orderMessage.priceDetailDTO && orderMessage.priceDetailDTO.couponPrice" textAlign="right"
@click="GET_Discount()">
<span class="main-color">-{{orderMessage.priceDetailDTO.couponPrice | unitPrice}}</span>
</u-col>
<!-- orderMessage.priceDetailDTO.couponPrice | unitPrice -->
<u-col :span="3" v-else textAlign="right" @click="GET_Discount()">
{{ orderMessage.canUseCoupons.length || "0" }} 张可用
<u-icon name="arrow-right"></u-icon>
</u-col>
</u-row>
<div> <div>
<u-row> <u-row>
<u-col :span="9">优惠金额</u-col> <u-col :span="9">优惠金额</u-col>
<u-col :span="3" textAlign="right">-{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</u-col> <u-col :span="3" textAlign="right" v-if=" orderMessage.priceDetailDTO.couponPrice">
-{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</u-col>
<u-col :span="3" textAlign="right" v-else>0.00</u-col>
</u-row> </u-row>
</div> </div>
<div> <div>
<u-row> <u-row>
<u-col :span="6">活动优惠</u-col> <u-col :span="6">活动优惠</u-col>
<u-col :span="6" class="tr tipsColor" textAlign="right"> <u-col :span="6" class="tr tipsColor" textAlign="right">
<u-tag style="margin-right: 20rpx" v-if="orderMessage.priceDetailDTO.discountPrice != 0" color="#FF6262" <span
:text="`优惠 ${orderMessage.priceDetailDTO.discountPrice} 元`" type="warning" size="mini" mode="plain" v-if="orderMessage.priceDetailDTO.discountPrice">-{{orderMessage.priceDetailDTO.discountPrice | unitPrice}}</span>
shape="circle" /> <span v-else>0.00</span>
<span>{{
orderMessage.priceDetailDTO.discountPrice | unitPrice
}}</span>
</u-col> </u-col>
</u-row> </u-row>
</div> </div>
</div> </div>
<!-- 配送地区没有提示 --> <!-- 配送地区没有提示 -->
@ -200,13 +174,14 @@
</div> </div>
<!-- 结账 --> <!-- 结账 -->
<div class="box6 mp-iphonex-bottom" v-if="orderMessage.priceDetailDTO"> <div class="box6 mp-iphonex-bottom" v-if="orderMessage.priceDetailDTO">
<div class="tabbar-left"> <div class="tabbar-left">
合计 <div v-if="!orderMessage.priceDetailDTO.payPoint" class="number">
<span v-if="!orderMessage.priceDetailDTO.payPoint" class="number"> <span>¥</span>
¥ <span class="price">{{ formatPrice(orderMessage.priceDetailDTO.flowPrice)[0] }}</span>
<span>{{ orderMessage.priceDetailDTO.flowPrice | unitPrice }}</span> <span>.{{formatPrice(orderMessage.priceDetailDTO.flowPrice)[1] }} </span>
</span> </div>
<span v-else class="number"><span <span v-else class="number"><span
style="margin-right:10rpx;">{{orderMessage.priceDetailDTO.payPoint | unitPrice }}</span>积分</span> style="margin-right:10rpx;">{{orderMessage.priceDetailDTO.payPoint | unitPrice }}</span>积分</span>
</div> </div>
@ -338,6 +313,13 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
// 1999 --> [1999,00]
formatPrice(val) {
if (typeof val == "undefined") {
return val;
}
return val.toFixed(2).split(".");
},
// //
async callbackInvoice(val) { async callbackInvoice(val) {
this.invoiceFlag = false; this.invoiceFlag = false;
@ -567,7 +549,16 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
page {
background: #ededed !important;
}
</style>
<style scoped lang="scss"> <style scoped lang="scss">
.flex-8 {
flex: 8;
}
.main-color { .main-color {
font-weight: bold; font-weight: bold;
} }
@ -578,12 +569,13 @@ export default {
} }
.promotionNotice { .promotionNotice {
font-size: 24rpx; font-size: 24rpx;
margin: 20rpx 0;
color: $aider-light-color; color: $aider-light-color;
} }
.nums { .nums {
flex: 2;
color: $light-color; color: $light-color;
float: right;
width: 15%;
text-align: center; text-align: center;
} }
.wait { .wait {
@ -632,11 +624,8 @@ export default {
.group-title { .group-title {
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400; font-weight: 400;
color: $light-color; color: $light-color;
} }
@ -652,7 +641,6 @@ export default {
.group { .group {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -673,15 +661,7 @@ export default {
height: 4rpx; height: 4rpx;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
background: url("/pages/floor/imgs/line.png") no-repeat; background: url("@/pages/order/imgs/line.png") no-repeat;
}
.tabC {
> p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
.box2 { .box2 {
@ -710,21 +690,6 @@ export default {
width: 100% !important; width: 100% !important;
} }
.userClass {
font-weight: bold;
font-size: 32rpx;
color: $u-content-color;
> span {
margin-left: 20rpx;
}
}
.userAdress {
margin: 20rpx 0;
color: $u-tips-color;
font-size: 26rpx;
}
.box6 { .box6 {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -763,7 +728,7 @@ export default {
border-radius: 0.4em; border-radius: 0.4em;
} }
.sp_promotion { .goods-promotion {
float: left; float: left;
width: 75%; width: 75%;
margin: 4rpx 0; margin: 4rpx 0;
@ -783,15 +748,9 @@ export default {
margin-left: 0; margin-left: 0;
} }
.sp_name { .goods-name {
float: left; flex: 8;
width: 75%;
font-size: 28rpx; font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.sp_type { .sp_type {
@ -803,28 +762,21 @@ export default {
.number { .number {
color: $main-color; color: $main-color;
font-size: 26rpx; font-size: 26rpx;
margin-left: 10rpx; font-weight: bold;
> span { > span {
font-size: 36rpx; font-size: 36rpx;
} }
} }
.sp_number { .goods-prices {
color: $light-color; margin: 10rpx 0;
color: $main-color;
font-size: 28rpx; font-size: 28rpx;
} font-weight: bold;
> .goods-price {
.box1 { font-size: 38rpx;
background: #f6f6f6 !important; padding: 0 2rpx;
min-height: 166rpx;
// height: 200rpx;
/deep/ .u-row {
border: none;
} }
margin-bottom: 0 !important;
} }
.box { .box {
@ -832,18 +784,19 @@ export default {
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
margin-bottom: 20rpx; margin-bottom: 20rpx;
color: #666;
padding: 0 32rpx; padding: 0 32rpx;
} }
.wrapper { .wrapper {
background: #f9f9f9;
height: auto; height: auto;
background: #ededed;
padding-bottom: 200rpx; padding-bottom: 200rpx;
overflow: auto !important; overflow: auto !important;
} }
.ybname { .store-name {
margin-left: 20rpx; margin-top: 32rpx;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
} }
@ -854,18 +807,67 @@ export default {
/deep/ .u-col-3, /deep/ .u-col-3,
.tipsColor { .tipsColor {
color: $u-tips-color; color: #333;
} }
.tabL { .goods-image {
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
}
.default {
background: $main-color;
font-size: 24rpx;
border-radius: 8rpx;
padding: 0rpx 12rpx;
color: #fff;
}
.address-box {
border-radius: 40rpx;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
overflow: hidden;
background: #fff;
margin-bottom: 20rpx;
color: #666;
}
.address-list {
margin-left: 20rpx;
}
.address-item {
font-weight: normal;
letter-spacing: 1rpx;
}
.user-box {
padding: 32rpx;
}
.user-address-detail {
color: #333;
font-size: 38rpx;
font-weight: bold;
margin: 20rpx 0;
letter-spacing: 1rpx;
}
.mobile {
margin-left: 20rpx;
}
.price {
font-size: 50rpx !important;
margin: 0 2rpx;
}
.goods-detail {
display: flex;
flex-direction: column;
/deep/ .u-image, justify-content: center;
.u-image__image { flex: 8;
width: 132rpx !important; margin-left: 20rpx !important;
height: 132rpx !important; > p {
border-radius: 0.4em !important; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.goods-item {
margin: 20rpx 0;
}
</style> </style>

View File

Before

Width:  |  Height:  |  Size: 367 B

After

Width:  |  Height:  |  Size: 367 B

View File

@ -81,7 +81,7 @@ page {
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
.box { .box {
padding: 32rpx; padding: 0 32rpx;
background: #fff; background: #fff;
} }
.buy { .buy {
@ -99,6 +99,7 @@ page {
flex: 1; flex: 1;
justify-content: center; justify-content: center;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.tips { .tips {
@ -119,6 +120,12 @@ page {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.flex {
border-bottom: 1rpx solid #f7f7f7;
padding: 20rpx 0;
margin: 10rpx 0;
}
.SUCCESS { .SUCCESS {
color: $light-color; color: $light-color;
} }

View File

@ -6,7 +6,8 @@
<scroll-view scroll-x> <scroll-view scroll-x>
<view class="index-navs"> <view class="index-navs">
<view class="index-nav-v"> <view class="index-nav-v">
<view class="index-nav" :class="{ 'index-nav-active': nav == index }" @click="clickNavigateTime(index)" v-for="(item, index) in timeLine" :key="index"> <view class="index-nav" :class="{ 'index-nav-active': nav == index }" @click="clickNavigateTime(index)"
v-for="(item, index) in timeLine" :key="index">
{{ item.timeLine }}:00 {{ item.timeLine }}:00
<view class="index-nav-desc">{{ index === 0 && item.distanceStartTime === 0 ? '抢购中' : '即将开始' }} <view class="index-nav-desc">{{ index === 0 && item.distanceStartTime === 0 ? '抢购中' : '即将开始' }}
</view> </view>
@ -34,7 +35,8 @@
</view> </view>
<view class="sale-item-surplus"> <view class="sale-item-surplus">
仅剩{{ item.quantity - item.salesNum }} 仅剩{{ item.quantity - item.salesNum }}
<view class="sale-item-surplus-text" :style="{ width: (item.quantity / (item.quantity - item.salesNum)) * 100 + '%' }"> <view class="sale-item-surplus-text"
:style="{ width: (item.quantity / (item.quantity - item.salesNum)) * 100 + '%' }">
</view> </view>
</view> </view>
<view class="sale-item-btn" @click="navigateToGoodsDetail(item)"> <view class="sale-item-btn" @click="navigateToGoodsDetail(item)">
@ -160,6 +162,7 @@ export default {
*/ */
clickNavigateTime(type) { clickNavigateTime(type) {
this.nav = type; this.nav = type;
this.goodsList = [];
this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime; this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
this.time = this.time =
this.timeLine[this.nav].distanceStartTime || this.timeLine[this.nav].distanceStartTime ||

View File

@ -1,14 +1,18 @@
<template> <template>
<div class="layout"> <div class="layout">
<u-sticky >
<div class="goods-cell-title"> <div class="goods-cell-title">
<div class="goods-item-title" :class="{ 'selected-title': selected.index == index }" @click="handleClickTitle(title, index)" v-for="(title, index) in res.list[0].titleWay" :key="index"> <div class="goods-item-title" :class="{ 'selected-title': selected.index == index }"
@click="handleClickTitle(title, index)" v-for="(title, index) in res.list[0].titleWay" :key="index">
<h4 class="h4">{{ title.title }}</h4> <h4 class="h4">{{ title.title }}</h4>
<div>{{ title.desc }}</div> <div>{{ title.desc }}</div>
</div> </div>
</div> </div>
</u-sticky>
<div class="goods-list"> <div class="goods-list">
<div v-if="selected.val == item.type" @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in res.list[0].listWay" :key="item_index"> <div v-if="selected.val == item.type" @click="handleClick(item)" class="goods-item"
v-for="(item, item_index) in res.list[0].listWay" :key="item_index">
<div class="goods-img"> <div class="goods-img">
<u-image :src="item.img" height="350rpx" mode="aspectFit" width="100%"> <u-image :src="item.img" height="350rpx" mode="aspectFit" width="100%">
<u-loading slot="loading"></u-loading> <u-loading slot="loading"></u-loading>
@ -49,6 +53,11 @@ export default {
immediate: true, immediate: true,
}, },
}, },
mounted () {
this.$u.getRect('.goods-cell-title').then(res=>{
console.log(res)
})
},
methods: { methods: {
handleClick(item) { handleClick(item) {
uni.navigateTo({ uni.navigateTo({
@ -86,6 +95,7 @@ $w_94: 94%;
} }
.goods-cell-title { .goods-cell-title {
background: #f9f9f9;
padding: 10px; padding: 10px;
transition: 0.35s; transition: 0.35s;
display: flex; display: flex;

View File

@ -25,7 +25,9 @@
<textPicture v-if="item.type == 'textPicture'" :res="item.options" /> <textPicture v-if="item.type == 'textPicture'" :res="item.options" />
<menuLayout v-if="item.type == 'menu'" :res="item.options" /> <menuLayout v-if="item.type == 'menu'" :res="item.options" />
<flexOne v-if="item.type == 'flexOne'" :res="item.options" /> <flexOne v-if="item.type == 'flexOne'" :res="item.options" />
<goods v-if="item.type == 'goods'" :res="item.options" /> <goods v-if="item.type == 'goods'" :res="item.options" />
<group v-if="item.type == 'group'" :res="item.options" /> <group v-if="item.type == 'group'" :res="item.options" />
<!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> --> <!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> --> <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
@ -94,8 +96,6 @@ export default {
}, },
mounted() { mounted() {
this.init(); this.init();
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// //

View File

@ -147,6 +147,9 @@ $font-weight: 400;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
.flex-a-c{
align-items: center;
}
.relative { .relative {
position: relative; position: relative;
} }