mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-20 01:15:53 +08:00
Compare commits
43 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fe0d888da0 | ||
|
|
58f33b05dd | ||
|
|
ba3034e5cb | ||
|
|
4c7663d671 | ||
|
|
a78dca1a0c | ||
|
|
c529688932 | ||
|
|
0cfb5d42c0 | ||
|
|
13f3971f2a | ||
|
|
075399d329 | ||
|
|
90d9fa9671 | ||
|
|
6ca01d2c71 | ||
|
|
275d76c0dd | ||
|
|
c53af2fcc3 | ||
|
|
c45a378665 | ||
|
|
cb982c2883 | ||
|
|
52e6c57f70 | ||
|
|
9a91e58f2c | ||
|
|
25fb26b7d0 | ||
|
|
8f5f44022b | ||
|
|
a2994454aa | ||
|
|
915aee9143 | ||
|
|
224eb05703 | ||
|
|
775bf3055d | ||
|
|
d76bab4b71 | ||
|
|
3d1e175194 | ||
|
|
885ccb5006 | ||
|
|
eb11f9dbae | ||
|
|
415dd15dd1 | ||
|
|
3f19fc8c15 | ||
|
|
464379178d | ||
|
|
1fbb43c848 | ||
|
|
b93395d0dc | ||
|
|
1141923407 | ||
|
|
209060fd76 | ||
|
|
e02fa75274 | ||
|
|
4ca71d0987 | ||
|
|
123127d977 | ||
|
|
d19b02a97d | ||
|
|
aad083970e | ||
|
|
436dd56e54 | ||
|
|
a9db24d1ad | ||
|
|
a6fec5cf70 | ||
|
|
0ea121e59e |
@@ -2,10 +2,23 @@
|
|||||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
||||||
"version": "0.0",
|
"version": "0.0",
|
||||||
"configurations": [{
|
"configurations": [{
|
||||||
"type": "uniCloud",
|
"app-plus" :
|
||||||
"default": {
|
{
|
||||||
"launchtype": "remote"
|
"launchtype" : "remote"
|
||||||
}
|
},
|
||||||
|
"default" :
|
||||||
|
{
|
||||||
|
"launchtype" : "remote"
|
||||||
|
},
|
||||||
|
"h5" :
|
||||||
|
{
|
||||||
|
"launchtype" : "remote"
|
||||||
|
},
|
||||||
|
"mp-weixin" :
|
||||||
|
{
|
||||||
|
"launchtype" : "remote"
|
||||||
|
},
|
||||||
|
"type" : "uniCloud"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
2
App.vue
2
App.vue
@@ -195,7 +195,7 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "uview-ui/index.scss";
|
@import "uview-ui/index.scss";
|
||||||
@import "./static/font/iconfont/iconfont.css";
|
|
||||||
// -------适配底部安全区 苹果x系列刘海屏
|
// -------适配底部安全区 苹果x系列刘海屏
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ export function getAddressList(pageNumber, pageSize) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取物流公司
|
* 获取物流公司
|
||||||
*/
|
*/
|
||||||
|
|||||||
18
api/goods.js
18
api/goods.js
@@ -118,17 +118,6 @@ export function getCategoryList(id) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取商品分类
|
|
||||||
* @param parent_id
|
|
||||||
*/
|
|
||||||
export function getCategory(parent_id = 0) {
|
|
||||||
return http.request({
|
|
||||||
url: `goods/categories/${parent_id}/children`,
|
|
||||||
method: Method.GET,
|
|
||||||
loading: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -167,20 +156,23 @@ export function cash(params) {
|
|||||||
/**
|
/**
|
||||||
* 分销商提现历史
|
* 分销商提现历史
|
||||||
*/
|
*/
|
||||||
export function cashLog() {
|
export function cashLog(params) {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: `/distribution/cash`,
|
url: `/distribution/cash`,
|
||||||
method: Method.GET,
|
method: Method.GET,
|
||||||
|
params
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取分销商分页订单列表
|
* 获取分销商分页订单列表
|
||||||
*/
|
*/
|
||||||
export function distributionOrderList() {
|
export function distributionOrderList(params) {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: `/distribution/distributionOrder`,
|
url: `/distribution/distributionOrder`,
|
||||||
method: Method.GET,
|
method: Method.GET,
|
||||||
|
params
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -30,12 +30,12 @@ export function getCategory(parent_id = 0) {
|
|||||||
* 获取热门关键词
|
* 获取热门关键词
|
||||||
* @param num
|
* @param num
|
||||||
*/
|
*/
|
||||||
export function getHotKeywords(start = 0, end = 10) {
|
export function getHotKeywords(count) {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: "/goods/hot-words",
|
url: "/goods/hot-words",
|
||||||
method: Method.GET,
|
method: Method.GET,
|
||||||
loading: false,
|
loading: false,
|
||||||
params: { start, end },
|
params: { count },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,9 +18,9 @@ export function resetByMobile(params) {
|
|||||||
* 发送验证码
|
* 发送验证码
|
||||||
* @param mobile
|
* @param mobile
|
||||||
*/
|
*/
|
||||||
export function sendMobile(mobile) {
|
export function sendMobile(mobile,type='LOGIN') {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: `${api.common}/sms/LOGIN/${mobile}`,
|
url: `${api.common}/sms/${type}/${mobile}`,
|
||||||
method: "GET",
|
method: "GET",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -206,7 +206,7 @@ export function getGoodsCollection(params, type) {
|
|||||||
* 收藏商品
|
* 收藏商品
|
||||||
* @returns {AxiosPromise}
|
* @returns {AxiosPromise}
|
||||||
*/
|
*/
|
||||||
export function collectionGoods(id, type) {
|
export function collectionGoods(type, id) {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: `/member/collection/add/${type}/${id}`,
|
url: `/member/collection/add/${type}/${id}`,
|
||||||
method: Method.POST,
|
method: Method.POST,
|
||||||
@@ -230,11 +230,23 @@ export function deleteGoodsCollection(ids) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除店铺收藏
|
||||||
|
* @param store_id
|
||||||
|
*/
|
||||||
|
export function deleteStoreCollection(store_id) {
|
||||||
|
return http.request({
|
||||||
|
url: `/member/collection/delete/STORE/${store_id}`,
|
||||||
|
method: Method.DELETE,
|
||||||
|
needToken: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取商品是否被收藏
|
* 获取商品是否被收藏
|
||||||
* @param good_id
|
* @param good_id
|
||||||
*/
|
*/
|
||||||
export function getGoodsIsCollect(good_id, type) {
|
export function getGoodsIsCollect(type, good_id) {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: `/member/collection/isCollection/${type}/${good_id}`,
|
url: `/member/collection/isCollection/${type}/${good_id}`,
|
||||||
method: Method.GET,
|
method: Method.GET,
|
||||||
@@ -257,18 +269,6 @@ export function collectionStore(store_id) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除店铺收藏
|
|
||||||
* @param store_id
|
|
||||||
*/
|
|
||||||
export function deleteStoreCollection(store_id) {
|
|
||||||
return http.request({
|
|
||||||
url: `members/collection/store/${store_id}`,
|
|
||||||
method: Method.DELETE,
|
|
||||||
needToken: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取当前登录的用户信息
|
* 获取当前登录的用户信息
|
||||||
* @returns {AxiosPromise}
|
* @returns {AxiosPromise}
|
||||||
|
|||||||
@@ -51,13 +51,25 @@ export function getPointsCategory() {
|
|||||||
* 获取积分商城商品
|
* 获取积分商城商品
|
||||||
* @param params
|
* @param params
|
||||||
*/
|
*/
|
||||||
export function getPointsGoods(params) {
|
export function getPointsGoods(params) {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: "/promotion/pointsGoods",
|
url: "/promotion/pointsGoods",
|
||||||
method: Method.GET,
|
method: Method.GET,
|
||||||
params,
|
params,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* 获取积分商城商品详情
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
export function getPointsGoodsDetail(id) {
|
||||||
|
return http.request({
|
||||||
|
url: "/promotion/pointsGoods/"+id,
|
||||||
|
method: Method.GET,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取限时抢购时间线 当天限时抢购信息
|
* 获取限时抢购时间线 当天限时抢购信息
|
||||||
@@ -151,12 +163,26 @@ export function getBargainLog(params) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 分页获取砍价活动-帮砍记录
|
* 分页获取砍价活动-帮砍记录
|
||||||
*/
|
*/
|
||||||
export function helpBargain(kanJiaActivityId) {
|
export function helpBargain(kanJiaActivityId) {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: `promotion/kanjiaGoods/help/${kanJiaActivityId}`,
|
url: `promotion/kanjiaGoods/help/${kanJiaActivityId}`,
|
||||||
method: Method.POST,
|
method: Method.POST,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 分页获取已参与的砍价活动
|
||||||
|
*/
|
||||||
|
export function getMineBargainLog(params) {
|
||||||
|
return http.request({
|
||||||
|
url: `/promotion/kanjiaGoods/kanjiaActivity/mine/`,
|
||||||
|
method: Method.GET,
|
||||||
|
params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
29
api/store.js
29
api/store.js
@@ -20,10 +20,37 @@ export function getstoreList(params) {
|
|||||||
* 获取店铺基本信息
|
* 获取店铺基本信息
|
||||||
* @param storeId
|
* @param storeId
|
||||||
*/
|
*/
|
||||||
export function getstoreBaseInfo(storeId) {
|
export function getStoreBaseInfo(storeId) {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: `/store/get/detail/${storeId}`,
|
url: `/store/get/detail/${storeId}`,
|
||||||
method: Method.GET,
|
method: Method.GET,
|
||||||
loading: false,
|
loading: false,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取店铺分类
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export function getStoreCategory(id) {
|
||||||
|
return http.request({
|
||||||
|
url: `/store/label/get/${id}`,
|
||||||
|
method: Method.GET,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 营业执照
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export function getLicencePhoto(id) {
|
||||||
|
return http.request({
|
||||||
|
url: `/store/get/licencePhoto/${id}`,
|
||||||
|
method: Method.GET,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
3
components/m-buy/README.md
Normal file
3
components/m-buy/README.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
## 购买组件
|
||||||
|
1.本组件是砍价,积分购买,参团等复用组
|
||||||
|
2.后续会将此组件和商品购买组件合并,文档后续再出
|
||||||
424
components/m-buy/goods.vue
Normal file
424
components/m-buy/goods.vue
Normal file
@@ -0,0 +1,424 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
|
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode"
|
||||||
|
:mask-close-able="isClose" :mask="isMask" :border-radius="setup.radius" @close="closeMask()">
|
||||||
|
<!-- 商品 -->
|
||||||
|
<view class="goods-box bottom">
|
||||||
|
<view class="goods-header">
|
||||||
|
<view class="goods-img">
|
||||||
|
<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx"
|
||||||
|
:src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
|
||||||
|
</view>
|
||||||
|
<view class="goods-skus">
|
||||||
|
<!-- 有活动商品价格 -->
|
||||||
|
<view class="goods-price " v-if="goodsDetail.promotionPrice">
|
||||||
|
<span>
|
||||||
|
¥
|
||||||
|
<span class="goods-price-promotionShow goods-price-bigshow"
|
||||||
|
v-if="goodsDetail.promotionPrice">{{ formatPrice(goodsDetail.promotionPrice)[0] }}</span>
|
||||||
|
.{{ formatPrice(goodsDetail.promotionPrice)[1] }}
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
<div class="promotion-box">
|
||||||
|
¥
|
||||||
|
<span class="goods-price-bigshow">{{
|
||||||
|
formatPrice(goodsDetail.price)[0]
|
||||||
|
}}</span>
|
||||||
|
.{{ formatPrice(goodsDetail.price)[1] }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
<!-- 正常商品的价格 -->
|
||||||
|
<view class="goods-price" v-else>
|
||||||
|
<span>
|
||||||
|
¥
|
||||||
|
<span class="goods-price-bigshow">{{
|
||||||
|
formatPrice(goodsDetail.price)[0]
|
||||||
|
}}</span>
|
||||||
|
.{{ formatPrice(goodsDetail.price)[1] }}
|
||||||
|
</span>
|
||||||
|
</view>
|
||||||
|
<view class="goods-check-skus">
|
||||||
|
已选
|
||||||
|
<span class="goods-check-skus-name">
|
||||||
|
{{ selectName }}
|
||||||
|
<span>,{{ num }}个</span>
|
||||||
|
</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 商品信息 -->
|
||||||
|
<view class="goods-skus-box">
|
||||||
|
<!-- 规格 -->
|
||||||
|
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
|
||||||
|
<view class="skus-view-list">
|
||||||
|
<view class="view-class-title">{{ spec.name }}</view>
|
||||||
|
<view :class="{ active: spec_val.value == currentSelceted[specIndex] }" class="skus-view-item"
|
||||||
|
v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
|
||||||
|
@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 数量 -->
|
||||||
|
<view class="goods-skus-number">
|
||||||
|
<view class="view-class-title">数量</view>
|
||||||
|
<u-number-box :bg-color="numberBox.bgColor" :color="numberBox.color" :input-width="numberBox.width"
|
||||||
|
:input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
|
||||||
|
</u-number-box>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<view class="btns">
|
||||||
|
|
||||||
|
<view class="box-btn card" v-if="buyType != 'PINTUAN' && goodsDetail.goodsType!='VIRTUAL_GOODS'"
|
||||||
|
@click="addToCartOrBuy('cart')">加入购物车</view>
|
||||||
|
<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as API_trade from "@/api/trade.js";
|
||||||
|
import setup from "./popup";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
setup,
|
||||||
|
num: 1,
|
||||||
|
// 步进器的大小尺寸单位是 rpx
|
||||||
|
numberBox: {
|
||||||
|
width: "50",
|
||||||
|
height: "50",
|
||||||
|
size: "22",
|
||||||
|
color: "#333",
|
||||||
|
bgColor: "#fff",
|
||||||
|
},
|
||||||
|
selectName: "", //选中商品的昵称
|
||||||
|
selectSkuList: "", //选中商铺sku,
|
||||||
|
selectedSpecImg: "", //选中的图片路径
|
||||||
|
buyType: "", //用于存储促销,拼团等活动类型
|
||||||
|
parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据
|
||||||
|
formatList: [],
|
||||||
|
currentSelceted: [],
|
||||||
|
skuList: "",
|
||||||
|
isMask: false, //是否显示遮罩层
|
||||||
|
isClose: false, //是否可以点击遮罩关闭
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
"goodsDetail", //商品详情
|
||||||
|
"buyMask",
|
||||||
|
"selectedSku",
|
||||||
|
"goodsSpec",
|
||||||
|
"addr",
|
||||||
|
],
|
||||||
|
watch: {
|
||||||
|
buyType: {
|
||||||
|
handler(val) {
|
||||||
|
this.buyType = val;
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
selectSkuList: {
|
||||||
|
handler(val) {
|
||||||
|
this.$emit("changed", val);
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 格式化金钱 1999 --> [1999,00]
|
||||||
|
formatPrice(val) {
|
||||||
|
if (typeof val == "undefined") {
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
return val.toFixed(2).split(".");
|
||||||
|
},
|
||||||
|
|
||||||
|
closeMask() {
|
||||||
|
this.$emit("closeBuy", false);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**点击规格 */
|
||||||
|
handleClickSpec(val, index, specValue) {
|
||||||
|
this.$set(this.currentSelceted, index, specValue.value);
|
||||||
|
let selectedSkuId = this.goodsSpec.find((i) => {
|
||||||
|
let matched = true;
|
||||||
|
let specValues = i.specValues.filter((j) => j.specName !== "images");
|
||||||
|
for (let n = 0; n < specValues.length; n++) {
|
||||||
|
if (specValues[n].specValue !== this.currentSelceted[n]) {
|
||||||
|
matched = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (matched) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.selectSkuList = {
|
||||||
|
spec: {
|
||||||
|
specName: val.name,
|
||||||
|
specValue: specValue.value,
|
||||||
|
},
|
||||||
|
data: this.goodsDetail,
|
||||||
|
};
|
||||||
|
this.selectName = specValue.value;
|
||||||
|
|
||||||
|
this.$emit("handleClickSku", {
|
||||||
|
skuId: selectedSkuId.skuId,
|
||||||
|
goodsId: this.goodsDetail.goodsId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加到购物车或购买
|
||||||
|
*/
|
||||||
|
addToCartOrBuy(val) {
|
||||||
|
if (!this.selectSkuList) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "请选择规格商品",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let data = {
|
||||||
|
skuId: this.goodsDetail.id,
|
||||||
|
num: this.num,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (val == "cart") {
|
||||||
|
API_trade.addToCart(data).then((res) => {
|
||||||
|
if (res.data.code == 200) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "商品已添加到购物车",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$emit("queryCart");
|
||||||
|
this.closeMask();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 判断是否拼团商品
|
||||||
|
if (this.buyType) {
|
||||||
|
data.cartType = "PINTUAN";
|
||||||
|
} else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") {
|
||||||
|
data.cartType = "VIRTUAL";
|
||||||
|
} else {
|
||||||
|
data.cartType = "BUY_NOW";
|
||||||
|
}
|
||||||
|
|
||||||
|
API_trade.addToCart(data).then((res) => {
|
||||||
|
if (res.data.code == 200) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/order/fillorder?way=${data.cartType}&addr=${
|
||||||
|
this.addr.id || ""
|
||||||
|
}&parentOrder=${encodeURIComponent(
|
||||||
|
JSON.stringify(this.parentOrder)
|
||||||
|
)}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 直接购买
|
||||||
|
*/
|
||||||
|
buy(data) {
|
||||||
|
API_trade.addToCart(data).then((res) => {
|
||||||
|
if (res.data.success) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/order/fillorder?way=${
|
||||||
|
data.cartType
|
||||||
|
}&addr=${""}&parentOrder=${encodeURIComponent(
|
||||||
|
JSON.stringify(this.parentOrder)
|
||||||
|
)}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
formatSku(list) {
|
||||||
|
// 格式化数据
|
||||||
|
if (!Array.isArray(list)) return false;
|
||||||
|
let arr = [{}];
|
||||||
|
list.forEach((item, index) => {
|
||||||
|
item.specValues.forEach((spec, specIndex) => {
|
||||||
|
let name = spec.specName;
|
||||||
|
let values = {
|
||||||
|
value: spec.specValue,
|
||||||
|
quantity: item.quantity,
|
||||||
|
};
|
||||||
|
if (name === "images") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
arr.forEach((arrItem, arrIndex) => {
|
||||||
|
if (
|
||||||
|
arrItem.name == name &&
|
||||||
|
arrItem.values &&
|
||||||
|
!arrItem.values.find((i) => i.value === values.value)
|
||||||
|
) {
|
||||||
|
arrItem.values.push(values);
|
||||||
|
}
|
||||||
|
|
||||||
|
let keys = arr.map((key) => {
|
||||||
|
return key.name;
|
||||||
|
});
|
||||||
|
if (!keys.includes(name)) {
|
||||||
|
arr.push({
|
||||||
|
name: name,
|
||||||
|
values: [values],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
arr.shift();
|
||||||
|
this.formatList = arr;
|
||||||
|
|
||||||
|
list.forEach((item) => {
|
||||||
|
if (item.skuId === this.goodsDetail.id) {
|
||||||
|
item.specValues
|
||||||
|
.filter((i) => i.specName !== "images")
|
||||||
|
.forEach((value, _index) => {
|
||||||
|
this.currentSelceted[_index] = value.specValue;
|
||||||
|
this.selectName = value.specValue;
|
||||||
|
this.selectSkuList = {
|
||||||
|
spec: value,
|
||||||
|
data: this.goodsDetail,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.skuList = list;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.formatSku(this.goodsSpec);
|
||||||
|
|
||||||
|
console.log(this.goodsDetail);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "./popup.scss";
|
||||||
|
|
||||||
|
.buy {
|
||||||
|
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
|
||||||
|
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
|
||||||
|
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.u-icon-plus,
|
||||||
|
.u-icon-minus,
|
||||||
|
.u-icon-disabled {
|
||||||
|
height: 30rpx !important;
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-skus-number {
|
||||||
|
justify-content: space-between;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .uni-scroll-view {
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: $price-light-color !important;
|
||||||
|
border: 2rpx solid $price-color;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $price-color !important;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-skus-box {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 610rpx;
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
height: 570rpx;
|
||||||
|
// #endif
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-skus-view {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.skus-view-list {
|
||||||
|
> .skus-view-item {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 36rpx;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 24rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #262626;
|
||||||
|
background: #f2f2f2;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-header {
|
||||||
|
height: 200rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-box {
|
||||||
|
padding: 50rpx 36rpx 0 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-skus {
|
||||||
|
padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
color: $price-color;
|
||||||
|
line-height: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.promotion-box {
|
||||||
|
line-height: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: #999;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
/deep/ span {
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.promotion {
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
.goods-price-promotionShow {
|
||||||
|
font-size: 48rpx;
|
||||||
|
}
|
||||||
|
.goods-check-skus {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
> .goods-check-skus-name {
|
||||||
|
margin-left: 4rpx;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
8
components/m-buy/popup.js
Normal file
8
components/m-buy/popup.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
height:"1000rpx", //弹出层高度
|
||||||
|
mode:"bottom", //弹出层位置
|
||||||
|
radius:"32", //圆角 rpx,
|
||||||
|
close:false //能否点击遮罩退出
|
||||||
|
}
|
||||||
37
components/m-buy/popup.scss
Normal file
37
components/m-buy/popup.scss
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
.view-class-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #262626;
|
||||||
|
|
||||||
|
font-weight: 700;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
}
|
||||||
|
.confirmBtn {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
.confirmBtn,
|
||||||
|
.box-btn {
|
||||||
|
line-height: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
|
||||||
|
background: $price-color;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 200px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 5rpx auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.goods-price-bigshow {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.box-btn {
|
||||||
|
flex: 1;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
}
|
||||||
@@ -4,16 +4,16 @@
|
|||||||
<div class="goods-list">
|
<div class="goods-list">
|
||||||
<div @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in goodsList" :key="item_index">
|
<div @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in goodsList" :key="item_index">
|
||||||
<div class="goods-img">
|
<div class="goods-img">
|
||||||
<u-image :src="item.thumbnail" mode="aspectFill" height="350rpx" width="100%">
|
<u-image :src="item.content.thumbnail" mode="aspectFill" height="350rpx" width="100%">
|
||||||
<u-loading slot="loading"></u-loading>
|
<u-loading slot="loading"></u-loading>
|
||||||
</u-image>
|
</u-image>
|
||||||
</div>
|
</div>
|
||||||
<div class="goods-desc">
|
<div class="goods-desc">
|
||||||
<div class="goods-title">
|
<div class="goods-title">
|
||||||
{{ item.goodsName }}
|
{{ item.content.goodsName }}
|
||||||
</div>
|
</div>
|
||||||
<div class="goods-bottom">
|
<div class="goods-bottom">
|
||||||
<div class="goods-price">¥{{ item.price | unitPrice }}</div>
|
<div class="goods-price">¥{{ item.content.price | unitPrice }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -73,13 +73,12 @@ export default {
|
|||||||
delete submit[key];
|
delete submit[key];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
let goodsList = await getGoodsList(submit);
|
let goodsList = await getGoodsList(submit);
|
||||||
this.goodsList.push(...goodsList.data.result.content);
|
this.goodsList.push(...goodsList.data.result.content);
|
||||||
},
|
},
|
||||||
handleClick(item) {
|
handleClick(item) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -58,13 +58,6 @@ export default {
|
|||||||
// 图片缩略图、 商品名称 、 type(goods,shop,pintuan) 拼团商品分享以及店铺分享
|
// 图片缩略图、 商品名称 、 type(goods,shop,pintuan) 拼团商品分享以及店铺分享
|
||||||
|
|
||||||
props: ["thumbnail", "goodsName", "type", "goodsId", "link"],
|
props: ["thumbnail", "goodsName", "type", "goodsId", "link"],
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
onShareAppMessage(res) {
|
|
||||||
return {
|
|
||||||
imageUrl: this.thumbnail || require("@/static/logo.png"),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
methods: {
|
methods: {
|
||||||
close() {
|
close() {
|
||||||
this.$emit("close");
|
this.$emit("close");
|
||||||
@@ -97,11 +90,8 @@ export default {
|
|||||||
},
|
},
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// #ifdef APP-PLUS
|
shareTitle() {
|
||||||
handleShare(val) {
|
|
||||||
if (val.type <= 1) {
|
|
||||||
let shareTitle;
|
let shareTitle;
|
||||||
|
|
||||||
if (this.type == "goods") {
|
if (this.type == "goods") {
|
||||||
shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`;
|
shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`;
|
||||||
} else if (this.type == "shops") {
|
} else if (this.type == "shops") {
|
||||||
@@ -111,7 +101,13 @@ export default {
|
|||||||
} else if (this.type == "kanjia") {
|
} else if (this.type == "kanjia") {
|
||||||
shareTitle = `请快来帮我砍一刀${this.goodsName}`;
|
shareTitle = `请快来帮我砍一刀${this.goodsName}`;
|
||||||
}
|
}
|
||||||
|
return shareTitle;
|
||||||
|
},
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
handleShare(val) {
|
||||||
|
console.log("12312312")
|
||||||
|
if (val.type <= 1) {
|
||||||
let scene; // "WXSenceTimeline 朋友圈 WXSceneSession 微信好友"
|
let scene; // "WXSenceTimeline 朋友圈 WXSceneSession 微信好友"
|
||||||
val.type == 1
|
val.type == 1
|
||||||
? (scene = "WXSenceTimeline")
|
? (scene = "WXSenceTimeline")
|
||||||
@@ -123,7 +119,7 @@ export default {
|
|||||||
imageUrl: this.thumbnail,
|
imageUrl: this.thumbnail,
|
||||||
type: 0,
|
type: 0,
|
||||||
summary: this.goodsName,
|
summary: this.goodsName,
|
||||||
title: shareTitle,
|
title: this.shareTitle(),
|
||||||
success: function (res) {
|
success: function (res) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "分享成功!",
|
title: "分享成功!",
|
||||||
|
|||||||
@@ -1,151 +0,0 @@
|
|||||||
<template>
|
|
||||||
<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size"
|
|
||||||
:style="badgeStyle" class="uni-badge" @click="onClick()">{{ text }}</text>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* Badge 数字角标
|
|
||||||
* @description 数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
|
|
||||||
* @property {String} text 角标内容
|
|
||||||
* @property {String} type = [default|primary|success|warning|error] 颜色类型
|
|
||||||
* @value default 灰色
|
|
||||||
* @value primary 蓝色
|
|
||||||
* @value success 绿色
|
|
||||||
* @value warning 黄色
|
|
||||||
* @value error 红色
|
|
||||||
* @property {String} size = [normal|small] Badge 大小
|
|
||||||
* @value normal 一般尺寸
|
|
||||||
* @value small 小尺寸
|
|
||||||
* @property {String} inverted = [true|false] 是否无需背景颜色
|
|
||||||
* @event {Function} click 点击 Badge 触发事件
|
|
||||||
* @example <uni-badge text="1"></uni-badge>
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'UniBadge',
|
|
||||||
props: {
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'default'
|
|
||||||
},
|
|
||||||
inverted: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
default: 'normal'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
badgeStyle: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
text() {
|
|
||||||
this.setStyle()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.setStyle()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setStyle() {
|
|
||||||
this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
|
|
||||||
},
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$bage-size: 12px;
|
|
||||||
$bage-small: scale(0.8);
|
|
||||||
$bage-height: 20px;
|
|
||||||
|
|
||||||
.uni-badge {
|
|
||||||
/* #ifndef APP-PLUS */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: row;
|
|
||||||
height: $bage-height;
|
|
||||||
line-height: $bage-height;
|
|
||||||
color: $uni-text-color;
|
|
||||||
border-radius: 100px;
|
|
||||||
background-color: $uni-bg-color-hover;
|
|
||||||
background-color: transparent;
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
||||||
font-size: $bage-size;
|
|
||||||
padding: 0px 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--inverted {
|
|
||||||
padding: 0 5px 0 0;
|
|
||||||
color: $uni-bg-color-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--default {
|
|
||||||
color: $uni-text-color;
|
|
||||||
background-color: $uni-bg-color-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--default-inverted {
|
|
||||||
color: $uni-text-color-grey;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--primary {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--primary-inverted {
|
|
||||||
color: $uni-color-primary;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--success {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--success-inverted {
|
|
||||||
color: $uni-color-success;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--warning {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--warning-inverted {
|
|
||||||
color: $uni-color-warning;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--error {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-error;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--error-inverted {
|
|
||||||
color: $uni-color-error;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-badge--small {
|
|
||||||
transform: $bage-small;
|
|
||||||
transform-origin: center center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,170 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
|
|
||||||
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
|
|
||||||
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* Drawer 抽屉
|
|
||||||
* @description 抽屉侧滑菜单
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=26
|
|
||||||
* @property {Boolean} mask = [true | false] 是否显示遮罩
|
|
||||||
* @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
|
|
||||||
* @property {Boolean} mode = [left | right] Drawer 滑出位置
|
|
||||||
* @value left 从左侧滑出
|
|
||||||
* @value right 从右侧侧滑出
|
|
||||||
* @property {Number} width 抽屉的宽度 ,仅 vue 页面生效
|
|
||||||
* @event {Function} close 组件关闭时触发事件
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'UniDrawer',
|
|
||||||
props: {
|
|
||||||
/**
|
|
||||||
* 显示模式(左、右),只在初始化生效
|
|
||||||
*/
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 蒙层显示状态
|
|
||||||
*/
|
|
||||||
mask: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 遮罩是否可点击关闭
|
|
||||||
*/
|
|
||||||
maskClick:{
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 抽屉宽度
|
|
||||||
*/
|
|
||||||
width: {
|
|
||||||
type: Number,
|
|
||||||
default: 220
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visibleSync: false,
|
|
||||||
showDrawer: false,
|
|
||||||
rightMode: false,
|
|
||||||
watchTimer: null,
|
|
||||||
drawerWidth: 220
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
this.drawerWidth = this.width
|
|
||||||
// #endif
|
|
||||||
this.rightMode = this.mode === 'right'
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
clear(){},
|
|
||||||
close(type) {
|
|
||||||
// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
|
|
||||||
if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
|
|
||||||
this._change('showDrawer', 'visibleSync', false)
|
|
||||||
},
|
|
||||||
open() {
|
|
||||||
// fixed by mehaotian 处理重复点击打开的事件
|
|
||||||
if(this.visibleSync) return
|
|
||||||
this._change('visibleSync', 'showDrawer', true)
|
|
||||||
},
|
|
||||||
_change(param1, param2, status) {
|
|
||||||
this[param1] = status
|
|
||||||
if (this.watchTimer) {
|
|
||||||
clearTimeout(this.watchTimer)
|
|
||||||
}
|
|
||||||
this.watchTimer = setTimeout(() => {
|
|
||||||
this[param2] = status
|
|
||||||
this.$emit('change',status)
|
|
||||||
}, status ? 50 : 300)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
// 抽屉宽度
|
|
||||||
$drawer-width: 220px;
|
|
||||||
|
|
||||||
.uni-drawer {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer__content {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: $drawer-width;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer--left {
|
|
||||||
left: 0;
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
transform: translateX(-$drawer-width);
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
transform: translateX(-100%);
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer--right {
|
|
||||||
right: 0;
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
transform: translateX($drawer-width);
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
transform: translateX(100%);
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer__content--visible {
|
|
||||||
transform: translateX(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.uni-drawer__mask {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: $uni-bg-color-mask;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-drawer__mask--visible {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,269 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<cell>
|
|
||||||
<!-- #endif -->
|
|
||||||
<view :class="disabled ? 'uni-list-item--disabled' : ''" :hover-class="disabled || showSwitch ? '' : 'uni-list-item--hover'" class="uni-list-item" @click="onClick">
|
|
||||||
<view class="uni-list-item__container" :class="{ 'uni-list-item--first': isFirstChild }">
|
|
||||||
<view v-if="thumb" class="uni-list-item__icon"><image :src="thumb" class="uni-list-item__icon-img" /></view>
|
|
||||||
<view v-else-if="showExtraIcon" class="uni-list-item__icon">
|
|
||||||
<uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" class="uni-icon-wrapper" />
|
|
||||||
</view>
|
|
||||||
<view class="uni-list-item__content">
|
|
||||||
<slot name="left"></slot>
|
|
||||||
<text class="uni-list-item__content-title">{{ title }}</text>
|
|
||||||
<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="uni-list-item__extra">
|
|
||||||
<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
|
|
||||||
<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
|
|
||||||
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange" />
|
|
||||||
<slot name="right"></slot>
|
|
||||||
<uni-icons v-if="showArrow" :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
</cell>
|
|
||||||
<!-- #endif -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniIcons from '../uni-icons/uni-icons.vue';
|
|
||||||
import uniBadge from '../uni-badge/uni-badge.vue';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ListItem 列表子组件
|
|
||||||
* @description 列表子组件
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
|
||||||
* @property {String} title 标题
|
|
||||||
* @property {String} note 描述
|
|
||||||
* @property {String} thumb 左侧缩略图,若thumb有值,则不会显示扩展图标
|
|
||||||
* @property {String} badgeText 数字角标内容
|
|
||||||
* @property {String} badgeType 数字角标类型,参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
|
|
||||||
* @property {String} rightText 右侧文字内容
|
|
||||||
* @property {Boolean} disabled = [true|false]是否禁用
|
|
||||||
* @property {Boolean} showArrow = [true|false] 是否显示箭头图标
|
|
||||||
* @property {Boolean} showBadge = [true|false] 是否显示数字角标
|
|
||||||
* @property {Boolean} showSwitch = [true|false] 是否显示Switch
|
|
||||||
* @property {Boolean} switchChecked = [true|false] Switch是否被选中
|
|
||||||
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
|
|
||||||
* @property {Boolean} scrollY = [true|false] 允许纵向滚动,需要显式的设置其宽高
|
|
||||||
* @property {Object} extraIcon 扩展图标参数,格式为 {color: '#4cd964',size: '22',type: 'spinner'}
|
|
||||||
* @event {Function} click 点击 uniListItem 触发事件
|
|
||||||
* @event {Function} switchChange 点击切换 Switch 时触发
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'UniListItem',
|
|
||||||
components: {
|
|
||||||
uniIcons,
|
|
||||||
uniBadge
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}, // 列表标题
|
|
||||||
note: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}, // 列表描述
|
|
||||||
disabled: {
|
|
||||||
// 是否禁用
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showArrow: {
|
|
||||||
// 是否显示箭头
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
showBadge: {
|
|
||||||
// 是否显示数字角标
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showSwitch: {
|
|
||||||
// 是否显示Switch
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
switchChecked: {
|
|
||||||
// Switch是否被选中
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
badgeText: {
|
|
||||||
// badge内容
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
badgeType: {
|
|
||||||
// badge类型
|
|
||||||
type: String,
|
|
||||||
default: 'success'
|
|
||||||
},
|
|
||||||
rightText: {
|
|
||||||
// 右侧文字内容
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
thumb: {
|
|
||||||
// 缩略图
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
showExtraIcon: {
|
|
||||||
// 是否显示扩展图标
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
extraIcon: {
|
|
||||||
type: Object,
|
|
||||||
default() {
|
|
||||||
return {
|
|
||||||
type: 'contact',
|
|
||||||
color: '#000000',
|
|
||||||
size: 20
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inject: ['list'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isFirstChild: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (!this.list.firstChildAppend) {
|
|
||||||
this.list.firstChildAppend = true;
|
|
||||||
this.isFirstChild = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click');
|
|
||||||
},
|
|
||||||
onSwitchChange(e) {
|
|
||||||
this.$emit('switchChange', e.detail);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
|
|
||||||
|
|
||||||
.uni-list-item {
|
|
||||||
font-size: $uni-font-size-lg;
|
|
||||||
position: relative;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item--disabled {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item--hover {
|
|
||||||
background-color: $uni-bg-color-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__container {
|
|
||||||
line-height: 48rpx;
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
padding: $list-item-pd;
|
|
||||||
padding-left: 0;
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
/* #ifdef APP-PLUS */
|
|
||||||
border-top-color: $uni-border-color;
|
|
||||||
border-top-style: solid;
|
|
||||||
border-top-width: 0.5px;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item--first {
|
|
||||||
border-top-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
.uni-list-item__container:after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 1px;
|
|
||||||
content: '';
|
|
||||||
-webkit-transform: scaleY(0.5);
|
|
||||||
transform: scaleY(0.5);
|
|
||||||
background-color: $uni-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item--first:after {
|
|
||||||
height: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
.uni-list-item__content {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-direction: column;
|
|
||||||
color: #3b4144;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__content-title {
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
color: #3b4144;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__content-note {
|
|
||||||
margin-top: 6rpx;
|
|
||||||
color: $uni-text-color-grey;
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__extra {
|
|
||||||
// width: 25%;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__icon {
|
|
||||||
display: flex;
|
|
||||||
margin-right: 18rpx;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
margin-left: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__icon-img {
|
|
||||||
// height: $uni-img-size-base;
|
|
||||||
// width: $uni-img-size-base;
|
|
||||||
height: 38rpx;
|
|
||||||
width: 38rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list-item__extra-text {
|
|
||||||
color: $uni-text-color-grey;
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- #ifndef APP-NVUE -->
|
|
||||||
<view class="uni-list">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<list class="uni-list" :enableBackToTop="enableBackToTop" loadmoreoffset="15" :scroll-y="scrollY" @loadmore="loadMore">
|
|
||||||
<slot />
|
|
||||||
</list>
|
|
||||||
<!-- #endif -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* List 列表
|
|
||||||
* @description 列表组件
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'UniList',
|
|
||||||
'mp-weixin': {
|
|
||||||
options: {
|
|
||||||
multipleSlots: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
enableBackToTop: {
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
scrollY: {
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
list: this
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.firstChildAppend = false
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadMore(e) {
|
|
||||||
this.$emit("scrolltolower");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-list {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
position: relative;
|
|
||||||
flex-direction: column;
|
|
||||||
// border-bottom-color: $uni-border-color;
|
|
||||||
// border-bottom-style: solid;
|
|
||||||
// border-bottom-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
.uni-list:before {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-list:after {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #endif */
|
|
||||||
</style>
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
|
|
||||||
<slot />
|
|
||||||
</refresh>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifndef APP-NVUE -->
|
|
||||||
<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'UniRefresh',
|
|
||||||
props: {
|
|
||||||
display: {
|
|
||||||
type: [String],
|
|
||||||
default: "hide"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pulling: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isShow() {
|
|
||||||
if (this.display === "show" || this.pulling === true) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
methods: {
|
|
||||||
onchange(value) {
|
|
||||||
this.pulling = value;
|
|
||||||
},
|
|
||||||
onrefresh(e) {
|
|
||||||
this.$emit("refresh", e);
|
|
||||||
},
|
|
||||||
onpullingdown(e) {
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
this.$emit("pullingdown", e);
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
var detail = {
|
|
||||||
viewHeight: 90,
|
|
||||||
pullingDistance: e.height
|
|
||||||
}
|
|
||||||
this.$emit("pullingdown", detail);
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.uni-refresh {
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
var pullDown = {
|
|
||||||
threshold: 95,
|
|
||||||
maxHeight: 200,
|
|
||||||
callRefresh: 'onrefresh',
|
|
||||||
callPullingDown: 'onpullingdown',
|
|
||||||
refreshSelector: '.uni-refresh'
|
|
||||||
};
|
|
||||||
|
|
||||||
function ready(newValue, oldValue, ownerInstance, instance) {
|
|
||||||
var state = instance.getState()
|
|
||||||
state.canPullDown = newValue;
|
|
||||||
// console.log(newValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchStart(e, instance) {
|
|
||||||
var state = instance.getState();
|
|
||||||
state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
|
|
||||||
state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
|
|
||||||
if (!state.canPullDown) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// console.log("touchStart");
|
|
||||||
|
|
||||||
state.height = 0;
|
|
||||||
state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
|
||||||
state.refreshInstance.setStyle({
|
|
||||||
'height': 0
|
|
||||||
});
|
|
||||||
state.refreshInstance.callMethod("onchange", true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchMove(e, ownerInstance) {
|
|
||||||
var instance = e.instance;
|
|
||||||
var state = instance.getState();
|
|
||||||
if (!state.canPullDown) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var oldHeight = state.height;
|
|
||||||
var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
|
||||||
var height = endY - state.touchStartY;
|
|
||||||
if (height > pullDown.maxHeight) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var refreshInstance = state.refreshInstance;
|
|
||||||
refreshInstance.setStyle({
|
|
||||||
'height': height + 'px'
|
|
||||||
});
|
|
||||||
|
|
||||||
height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
|
|
||||||
state.height = height;
|
|
||||||
refreshInstance.callMethod(pullDown.callPullingDown, {
|
|
||||||
height: height
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchEnd(e, ownerInstance) {
|
|
||||||
var state = e.instance.getState();
|
|
||||||
if (!state.canPullDown) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
state.refreshInstance.callMethod("onchange", false);
|
|
||||||
|
|
||||||
var refreshInstance = state.refreshInstance;
|
|
||||||
if (state.height > pullDown.threshold) {
|
|
||||||
refreshInstance.callMethod(pullDown.callRefresh);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
refreshInstance.setStyle({
|
|
||||||
'height': 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function propObserver(newValue, oldValue, instance) {
|
|
||||||
pullDown = newValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
touchmove: touchMove,
|
|
||||||
touchstart: touchStart,
|
|
||||||
touchend: touchEnd,
|
|
||||||
propObserver: propObserver
|
|
||||||
}
|
|
||||||
@@ -1,395 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
|
|
||||||
<!-- #ifdef MP-ALIPAY -->
|
|
||||||
<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" @click="close">
|
|
||||||
<uni-icons type="closeempty" :color="color" size="12" />
|
|
||||||
</view>
|
|
||||||
<view v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon">
|
|
||||||
<uni-icons type="sound" :color="color" size="14" />
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifndef MP-ALIPAY -->
|
|
||||||
<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" type="closeempty" :color="color"
|
|
||||||
size="12" @click="close" />
|
|
||||||
<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound" :color="color"
|
|
||||||
size="14" />
|
|
||||||
<!-- #endif -->
|
|
||||||
<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
|
|
||||||
<view :id="elIdBox" class="uni-noticebar__content" :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
|
|
||||||
<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}"
|
|
||||||
:style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more" @click="clickMore">
|
|
||||||
<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
|
|
||||||
<uni-icons type="arrowright" :color="moreColor" size="14" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniIcons from '../uni-icons/uni-icons.vue'
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
const dom = weex.requireModule('dom');
|
|
||||||
const animation = weex.requireModule('animation');
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
/**
|
|
||||||
* NoticeBar 自定义导航栏
|
|
||||||
* @description 通告栏组件
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=30
|
|
||||||
* @property {Number} speed 文字滚动的速度,默认100px/秒
|
|
||||||
* @property {String} text 显示文字
|
|
||||||
* @property {String} backgroundColor 背景颜色
|
|
||||||
* @property {String} color 文字颜色
|
|
||||||
* @property {String} moreColor 查看更多文字的颜色
|
|
||||||
* @property {String} moreText 设置“查看更多”的文本
|
|
||||||
* @property {Boolean} single = [true|false] 是否单行
|
|
||||||
* @property {Boolean} scrollable = [true|false] 是否滚动,为true时,NoticeBar为单行
|
|
||||||
* @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
|
|
||||||
* @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
|
|
||||||
* @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标,为true时,NoticeBar为单行
|
|
||||||
* @event {Function} click 点击 NoticeBar 触发事件
|
|
||||||
* @event {Function} close 关闭 NoticeBar 触发事件
|
|
||||||
* @event {Function} getmore 点击”查看更多“时触发事件
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UniNoticeBar',
|
|
||||||
components: {
|
|
||||||
uniIcons
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
text: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
moreText: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#fffbe8'
|
|
||||||
},
|
|
||||||
speed: {
|
|
||||||
// 默认1s滚动100px
|
|
||||||
type: Number,
|
|
||||||
default: 100
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '#de8c17'
|
|
||||||
},
|
|
||||||
moreColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#999999'
|
|
||||||
},
|
|
||||||
single: {
|
|
||||||
// 是否单行
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
scrollable: {
|
|
||||||
// 是否滚动,添加后控制单行效果取消
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showIcon: {
|
|
||||||
// 是否显示左侧icon
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showGetMore: {
|
|
||||||
// 是否显示右侧查看更多
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showClose: {
|
|
||||||
// 是否显示左侧关闭按钮
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
|
||||||
const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
|
||||||
return {
|
|
||||||
textWidth: 0,
|
|
||||||
boxWidth: 0,
|
|
||||||
wrapWidth: '',
|
|
||||||
webviewHide: false,
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
stopAnimation: false,
|
|
||||||
// #endif
|
|
||||||
elId: elId,
|
|
||||||
elIdBox: elIdBox,
|
|
||||||
show: true,
|
|
||||||
animationDuration: 'none',
|
|
||||||
animationPlayState: 'paused',
|
|
||||||
animationDelay: '0s'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
var pages = getCurrentPages();
|
|
||||||
var page = pages[pages.length - 1];
|
|
||||||
var currentWebview = page.$getAppWebview();
|
|
||||||
currentWebview.addEventListener('hide',()=>{
|
|
||||||
this.webviewHide = true
|
|
||||||
})
|
|
||||||
currentWebview.addEventListener('show',()=>{
|
|
||||||
this.webviewHide = false
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initSize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
beforeDestroy() {
|
|
||||||
this.stopAnimation = true
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
methods: {
|
|
||||||
initSize() {
|
|
||||||
if (this.scrollable) {
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
let query = [],
|
|
||||||
boxWidth = 0,
|
|
||||||
textWidth = 0;
|
|
||||||
let textQuery = new Promise((resolve, reject) => {
|
|
||||||
uni.createSelectorQuery()
|
|
||||||
// #ifndef MP-ALIPAY
|
|
||||||
.in(this)
|
|
||||||
// #endif
|
|
||||||
.select(`#${this.elId}`)
|
|
||||||
.boundingClientRect()
|
|
||||||
.exec(ret => {
|
|
||||||
this.textWidth = ret[0].width
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
let boxQuery = new Promise((resolve, reject) => {
|
|
||||||
uni.createSelectorQuery()
|
|
||||||
// #ifndef MP-ALIPAY
|
|
||||||
.in(this)
|
|
||||||
// #endif
|
|
||||||
.select(`#${this.elIdBox}`)
|
|
||||||
.boundingClientRect()
|
|
||||||
.exec(ret => {
|
|
||||||
this.boxWidth = ret[0].width
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
query.push(textQuery)
|
|
||||||
query.push(boxQuery)
|
|
||||||
Promise.all(query).then(() => {
|
|
||||||
this.animationDuration = `${this.textWidth / this.speed}s`
|
|
||||||
this.animationDelay = `-${this.boxWidth / this.speed}s`
|
|
||||||
setTimeout(() => {
|
|
||||||
this.animationPlayState = 'running'
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
dom.getComponentRect(this.$refs['animationEle'], (res) => {
|
|
||||||
let winWidth = uni.getSystemInfoSync().windowWidth
|
|
||||||
this.textWidth = res.size.width
|
|
||||||
animation.transition(this.$refs['animationEle'], {
|
|
||||||
styles: {
|
|
||||||
transform: `translateY(-${winWidth}px)`
|
|
||||||
},
|
|
||||||
duration: 0,
|
|
||||||
timingFunction: 'linear',
|
|
||||||
delay: 0
|
|
||||||
}, () => {
|
|
||||||
if (!this.stopAnimation) {
|
|
||||||
animation.transition(this.$refs['animationEle'], {
|
|
||||||
styles: {
|
|
||||||
transform: `translateY(-${this.textWidth}px)`
|
|
||||||
},
|
|
||||||
timingFunction: 'linear',
|
|
||||||
duration: (this.textWidth - winWidth) / this.speed * 1000,
|
|
||||||
delay: 1000
|
|
||||||
}, () => {
|
|
||||||
if (!this.stopAnimation) {
|
|
||||||
this.loopAnimation()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
if (!this.scrollable && (this.single || this.moreText)) {
|
|
||||||
dom.getComponentRect(this.$refs['textBox'], (res) => {
|
|
||||||
this.wrapWidth = res.size.width
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
loopAnimation() {
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
animation.transition(this.$refs['animationEle'], {
|
|
||||||
styles: {
|
|
||||||
transform: `translateY(0px)`
|
|
||||||
},
|
|
||||||
duration: 0
|
|
||||||
}, () => {
|
|
||||||
if (!this.stopAnimation) {
|
|
||||||
animation.transition(this.$refs['animationEle'], {
|
|
||||||
styles: {
|
|
||||||
transform: `translateY(-${this.textWidth}px)`
|
|
||||||
},
|
|
||||||
duration: this.textWidth / this.speed * 1000,
|
|
||||||
timingFunction: 'linear',
|
|
||||||
delay: 0
|
|
||||||
}, () => {
|
|
||||||
if (!this.stopAnimation) {
|
|
||||||
this.loopAnimation()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
clickMore() {
|
|
||||||
this.$emit('getmore')
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
this.show = false;
|
|
||||||
this.$emit('close')
|
|
||||||
},
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
.uni-noticebar {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6px 12px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar-close {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-wrapper--single {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
line-height: 18px;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-wrapper--single,
|
|
||||||
.uni-noticebar__content-wrapper--scrollable {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
.uni-noticebar__content-wrapper--scrollable {
|
|
||||||
position: relative;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
.uni-noticebar__content--scrollable {
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
flex: 0;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
flex: 1;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content--single {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
flex: none;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-text {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 18px;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
word-break: break-all;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-text--single {
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
lines: 1;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
/* #endif */
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__content-text--scrollable {
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
lines: 1;
|
|
||||||
padding-left: 750rpx;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
height: 18px;
|
|
||||||
line-height: 18px;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding-left: 100%;
|
|
||||||
animation: notice 10s 0s linear infinite both;
|
|
||||||
animation-play-state: paused;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__more {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: inline-flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-noticebar__more-text {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes notice {
|
|
||||||
100% {
|
|
||||||
transform: translate3d(-100%, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
export default {
|
|
||||||
created() {
|
|
||||||
if (this.type === 'message') {
|
|
||||||
// 获取自组件对象
|
|
||||||
this.maskShow = false
|
|
||||||
this.children = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
if (this.type === 'message') {
|
|
||||||
// 不显示遮罩
|
|
||||||
this.maskShow = false
|
|
||||||
// 获取子组件对象
|
|
||||||
this.childrenMsg = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
customOpen() {
|
|
||||||
if (this.childrenMsg) {
|
|
||||||
this.childrenMsg.open()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
customClose() {
|
|
||||||
if (this.childrenMsg) {
|
|
||||||
this.childrenMsg.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
import message from './message.js';
|
|
||||||
// 定义 type 类型:弹出类型:top/bottom/center
|
|
||||||
const config = {
|
|
||||||
// 顶部弹出
|
|
||||||
top:'top',
|
|
||||||
// 底部弹出
|
|
||||||
bottom:'bottom',
|
|
||||||
// 居中弹出
|
|
||||||
center:'center',
|
|
||||||
// 消息提示
|
|
||||||
message:'top',
|
|
||||||
// 对话框
|
|
||||||
dialog:'center',
|
|
||||||
// 分享
|
|
||||||
share:'bottom',
|
|
||||||
}
|
|
||||||
export default {
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
config:config
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mixins: [message],
|
|
||||||
}
|
|
||||||
@@ -1,243 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="uni-popup-dialog">
|
|
||||||
<view class="uni-dialog-title">
|
|
||||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
|
|
||||||
</view>
|
|
||||||
<view class="uni-dialog-content">
|
|
||||||
<text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
|
|
||||||
<input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
|
|
||||||
</view>
|
|
||||||
<view class="uni-dialog-button-group">
|
|
||||||
<view class="uni-dialog-button" @click="close">
|
|
||||||
<text class="uni-dialog-button-text">取消</text>
|
|
||||||
</view>
|
|
||||||
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
|
||||||
<text class="uni-dialog-button-text uni-button-color">确定</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* PopUp 弹出层-对话框样式
|
|
||||||
* @description 弹出层-对话框样式
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|
||||||
* @property {String} value input 模式下的默认值
|
|
||||||
* @property {String} placeholder input 模式下输入提示
|
|
||||||
* @property {String} type = [success|warning|info|error] 主题样式
|
|
||||||
* @value success 成功
|
|
||||||
* @value warning 提示
|
|
||||||
* @value info 消息
|
|
||||||
* @value error 错误
|
|
||||||
* @property {String} mode = [base|input] 模式、
|
|
||||||
* @value base 基础对话框
|
|
||||||
* @value input 可输入对话框
|
|
||||||
* @property {String} content 对话框内容
|
|
||||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
|
||||||
* @event {Function} confirm 点击确认按钮触发
|
|
||||||
* @event {Function} close 点击取消按钮触发
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "uniPopupDialog",
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
placeholder: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: '请输入内容'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 对话框主题 success/warning/info/error 默认 success
|
|
||||||
*/
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'error'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 对话框模式 base/input
|
|
||||||
*/
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'base'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 对话框标题
|
|
||||||
*/
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '提示'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 对话框内容
|
|
||||||
*/
|
|
||||||
content: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 拦截取消事件 ,如果拦截取消事件,必须监听close事件,执行 done()
|
|
||||||
*/
|
|
||||||
beforeClose: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialogType: 'error',
|
|
||||||
focus: false,
|
|
||||||
val: ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inject: ['popup'],
|
|
||||||
watch: {
|
|
||||||
type(val) {
|
|
||||||
this.dialogType = val
|
|
||||||
},
|
|
||||||
mode(val) {
|
|
||||||
if (val === 'input') {
|
|
||||||
this.dialogType = 'info'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
value(val) {
|
|
||||||
this.val = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// 对话框遮罩不可点击
|
|
||||||
this.popup.mkclick = false
|
|
||||||
if (this.mode === 'input') {
|
|
||||||
this.dialogType = 'info'
|
|
||||||
this.val = this.value
|
|
||||||
} else {
|
|
||||||
this.dialogType = this.type
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.focus = true
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* 点击确认按钮
|
|
||||||
*/
|
|
||||||
onOk() {
|
|
||||||
this.$emit('confirm', () => {
|
|
||||||
this.popup.close()
|
|
||||||
if (this.mode === 'input') this.val = this.value
|
|
||||||
}, this.mode === 'input' ? this.val : '')
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 点击取消按钮
|
|
||||||
*/
|
|
||||||
close() {
|
|
||||||
if (this.beforeClose) {
|
|
||||||
this.$emit('close', () => {
|
|
||||||
this.popup.close()
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.popup.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-popup-dialog {
|
|
||||||
width: 300px;
|
|
||||||
border-radius: 15px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-title {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 15px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-title-text {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-content {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px 15px 15px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-content-text {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #6e6e6e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-button-group {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
border-top-color: #f5f5f5;
|
|
||||||
border-top-style: solid;
|
|
||||||
border-top-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-button {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-border-left {
|
|
||||||
border-left-color: #f0f0f0;
|
|
||||||
border-left-style: solid;
|
|
||||||
border-left-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-button-text {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-button-color {
|
|
||||||
color: $uni-color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-dialog-input {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__success {
|
|
||||||
color: $uni-color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__warn {
|
|
||||||
color: $uni-color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__error {
|
|
||||||
color: $uni-color-error;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__info {
|
|
||||||
color: #909399;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="uni-popup-message" :class="'uni-popup__'+[type]">
|
|
||||||
<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/**
|
|
||||||
* PopUp 弹出层-消息提示
|
|
||||||
* @description 弹出层-消息提示
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|
||||||
* @property {String} type = [success|warning|info|error] 主题样式
|
|
||||||
* @value success 成功
|
|
||||||
* @value warning 提示
|
|
||||||
* @value info 消息
|
|
||||||
* @value error 错误
|
|
||||||
* @property {String} message 消息提示文字
|
|
||||||
* @property {String} duration 显示时间,设置为 0 则不会自动关闭
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UniPopupMessage',
|
|
||||||
props: {
|
|
||||||
/**
|
|
||||||
* 主题 success/warning/info/error 默认 success
|
|
||||||
*/
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'success'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 消息文字
|
|
||||||
*/
|
|
||||||
message: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 显示时间,设置为 0 则不会自动关闭
|
|
||||||
*/
|
|
||||||
duration: {
|
|
||||||
type: Number,
|
|
||||||
default: 3000
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inject: ['popup'],
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.popup.childrenMsg = this
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
open() {
|
|
||||||
if (this.duration === 0) return
|
|
||||||
clearTimeout(this.popuptimer)
|
|
||||||
this.popuptimer = setTimeout(() => {
|
|
||||||
this.popup.close()
|
|
||||||
}, this.duration)
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
clearTimeout(this.popuptimer)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-popup-message {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
background-color: #e1f3d8;
|
|
||||||
padding: 10px 15px;
|
|
||||||
border-color: #eee;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
.uni-popup-message-text {
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__success {
|
|
||||||
background-color: #e1f3d8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__success-text {
|
|
||||||
color: #67C23A;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__warn {
|
|
||||||
background-color: #faecd8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__warn-text {
|
|
||||||
color: #E6A23C;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__error {
|
|
||||||
background-color: #fde2e2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__error-text {
|
|
||||||
color: #F56C6C;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__info {
|
|
||||||
background-color: #F2F6FC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__info-text {
|
|
||||||
color: #909399;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,165 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="uni-popup-share">
|
|
||||||
<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
|
|
||||||
<view class="uni-share-content">
|
|
||||||
<view class="uni-share-content-box">
|
|
||||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
|
||||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
|
||||||
<text class="uni-share-text">{{item.text}}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="uni-share-button-box">
|
|
||||||
<button class="uni-share-button" @click="close">取消</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'UniPopupShare',
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '分享到'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inject: ['popup'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
bottomData: [{
|
|
||||||
text: '微信',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
|
|
||||||
name: 'wx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '支付宝',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
|
|
||||||
name: 'wx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'QQ',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
|
|
||||||
name: 'qq'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '新浪',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
|
|
||||||
name: 'sina'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '百度',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
|
|
||||||
name: 'copy'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '其他',
|
|
||||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
|
|
||||||
name: 'more'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* 选择内容
|
|
||||||
*/
|
|
||||||
select(item, index) {
|
|
||||||
this.$emit('select', {
|
|
||||||
item,
|
|
||||||
index
|
|
||||||
}, () => {
|
|
||||||
this.popup.close()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 关闭窗口
|
|
||||||
*/
|
|
||||||
close() {
|
|
||||||
this.popup.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-popup-share {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.uni-share-title {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
.uni-share-title-text {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
.uni-share-content {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-content-box {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 360px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-content-item {
|
|
||||||
width: 90px;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-content-item:active {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-image {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-text {
|
|
||||||
margin-top: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #3B4144;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-button-box {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
padding: 10px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-button {
|
|
||||||
flex: 1;
|
|
||||||
border-radius: 50px;
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-share-button::after {
|
|
||||||
border-radius: 50px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,294 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
|
|
||||||
<uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
|
|
||||||
@click="onTap" />
|
|
||||||
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
|
|
||||||
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
</uni-transition>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniTransition from '../uni-transition/uni-transition.vue'
|
|
||||||
import popup from './popup.js'
|
|
||||||
/**
|
|
||||||
* PopUp 弹出层
|
|
||||||
* @description 弹出层组件,为了解决遮罩弹层的问题
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|
||||||
* @property {String} type = [top|center|bottom] 弹出方式
|
|
||||||
* @value top 顶部弹出
|
|
||||||
* @value center 中间弹出
|
|
||||||
* @value bottom 底部弹出
|
|
||||||
* @value message 消息提示
|
|
||||||
* @value dialog 对话框
|
|
||||||
* @value share 底部分享示例
|
|
||||||
* @property {Boolean} animation = [ture|false] 是否开启动画
|
|
||||||
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
|
||||||
* @event {Function} change 打开关闭弹窗触发,e={show: false}
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UniPopup',
|
|
||||||
components: {
|
|
||||||
uniTransition
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
// 开启动画
|
|
||||||
animation: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
|
|
||||||
// message: 消息提示 ; dialog : 对话框
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'center'
|
|
||||||
},
|
|
||||||
// maskClick
|
|
||||||
maskClick: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
popup: this
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mixins: [popup],
|
|
||||||
watch: {
|
|
||||||
/**
|
|
||||||
* 监听type类型
|
|
||||||
*/
|
|
||||||
type: {
|
|
||||||
handler: function(newVal) {
|
|
||||||
this[this.config[newVal]]()
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 监听遮罩是否可点击
|
|
||||||
* @param {Object} val
|
|
||||||
*/
|
|
||||||
maskClick(val) {
|
|
||||||
this.mkclick = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
duration: 300,
|
|
||||||
ani: [],
|
|
||||||
showPopup: false,
|
|
||||||
showTrans: false,
|
|
||||||
maskClass: {
|
|
||||||
'position': 'fixed',
|
|
||||||
'bottom': 0,
|
|
||||||
'top': 0,
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
|
||||||
},
|
|
||||||
transClass: {
|
|
||||||
'position': 'fixed',
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
},
|
|
||||||
maskShow: true,
|
|
||||||
mkclick: true,
|
|
||||||
popupstyle: 'top'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.mkclick = this.maskClick
|
|
||||||
if (this.animation) {
|
|
||||||
this.duration = 300
|
|
||||||
} else {
|
|
||||||
this.duration = 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
clear(e) {
|
|
||||||
// TODO nvue 取消冒泡
|
|
||||||
e.stopPropagation()
|
|
||||||
},
|
|
||||||
open() {
|
|
||||||
this.showPopup = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
new Promise(resolve => {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
this.showTrans = true
|
|
||||||
// fixed by mehaotian 兼容 app 端
|
|
||||||
this.$nextTick(() => {
|
|
||||||
resolve();
|
|
||||||
})
|
|
||||||
}, 50);
|
|
||||||
}).then(res => {
|
|
||||||
// 自定义打开事件
|
|
||||||
clearTimeout(this.msgtimer)
|
|
||||||
this.msgtimer = setTimeout(() => {
|
|
||||||
this.customOpen && this.customOpen()
|
|
||||||
}, 100)
|
|
||||||
this.$emit('change', {
|
|
||||||
show: true,
|
|
||||||
type: this.type
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
close(type) {
|
|
||||||
this.showTrans = false
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$emit('change', {
|
|
||||||
show: false,
|
|
||||||
type: this.type
|
|
||||||
})
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
// 自定义关闭事件
|
|
||||||
this.customOpen && this.customClose()
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
this.showPopup = false
|
|
||||||
}, 300)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onTap() {
|
|
||||||
if (!this.mkclick) return
|
|
||||||
this.close()
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 顶部弹出样式处理
|
|
||||||
*/
|
|
||||||
top() {
|
|
||||||
this.popupstyle = 'top'
|
|
||||||
this.ani = ['slide-top']
|
|
||||||
this.transClass = {
|
|
||||||
'position': 'fixed',
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 底部弹出样式处理
|
|
||||||
*/
|
|
||||||
bottom() {
|
|
||||||
this.popupstyle = 'bottom'
|
|
||||||
this.ani = ['slide-bottom']
|
|
||||||
this.transClass = {
|
|
||||||
'position': 'fixed',
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
'bottom': 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 中间弹出样式处理
|
|
||||||
*/
|
|
||||||
center() {
|
|
||||||
this.popupstyle = 'center'
|
|
||||||
this.ani = ['zoom-out', 'fade']
|
|
||||||
this.transClass = {
|
|
||||||
'position': 'fixed',
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
'display': 'flex',
|
|
||||||
'flexDirection': 'column',
|
|
||||||
/* #endif */
|
|
||||||
'bottom': 0,
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
'top': 0,
|
|
||||||
'justifyContent': 'center',
|
|
||||||
'alignItems': 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-popup {
|
|
||||||
position: fixed;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
z-index: 99;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__mask {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: $uni-bg-color-mask;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mask-ani {
|
|
||||||
transition-property: opacity;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-top-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-bottom-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-center-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__wrapper {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
/* #ifdef H5 */
|
|
||||||
top: var(--window-top);
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef H5 */
|
|
||||||
top: 0;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__wrapper-box {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: relative;
|
|
||||||
/* iphonex 等安全区设置,底部安全区适配 */
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-ani {
|
|
||||||
// transition: transform 0.3s;
|
|
||||||
transition-property: transform, opacity;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.uni-top-content {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-bottom-content {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-center-content {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,135 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="uni-section" nvue>
|
|
||||||
<view v-if="type" class="uni-section__head">
|
|
||||||
<view :class="type" class="uni-section__head-tag" />
|
|
||||||
</view>
|
|
||||||
<view class="uni-section__content">
|
|
||||||
<text :class="{'distraction':!subTitle}" class="uni-section__content-title">{{ title }}</text>
|
|
||||||
<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
|
|
||||||
</view>
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Section 标题栏
|
|
||||||
* @description 标题栏
|
|
||||||
* @property {String} type = [line|circle] 标题装饰类型
|
|
||||||
* @value line 竖线
|
|
||||||
* @value circle 圆形
|
|
||||||
* @property {String} title 主标题
|
|
||||||
* @property {String} subTitle 副标题
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UniTitle',
|
|
||||||
props: {
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
subTitle: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
title(newVal) {
|
|
||||||
if (uni.report && newVal !== '') {
|
|
||||||
uni.report('title', newVal)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-section {
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
margin-top: 10px;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 10px;
|
|
||||||
height: 50px;
|
|
||||||
background-color: $uni-bg-color-grey;
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
border-bottom-color: $uni-border-color;
|
|
||||||
border-bottom-style: solid;
|
|
||||||
border-bottom-width: 0.5px;
|
|
||||||
/* #endif */
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
.uni-section:after {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 1px;
|
|
||||||
content: '';
|
|
||||||
-webkit-transform: scaleY(.5);
|
|
||||||
transform: scaleY(.5);
|
|
||||||
background-color: $uni-border-color;
|
|
||||||
}
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
.uni-section__head {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
|
||||||
height: 15px;
|
|
||||||
background-color: $uni-text-color-disable;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circle {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-top-right-radius: 50px;
|
|
||||||
border-top-left-radius: 50px;
|
|
||||||
border-bottom-left-radius: 50px;
|
|
||||||
border-bottom-right-radius: 50px;
|
|
||||||
background-color: $uni-text-color-disable;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-section__content {
|
|
||||||
flex: 1;
|
|
||||||
color: $uni-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-section__content-title {
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
color: $uni-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.distraction {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-section__content-sub {
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
color: $uni-text-color-grey;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,253 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="uni-steps">
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
|
||||||
<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
|
||||||
<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
|
||||||
<text v-if="direction=='column'" :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options"
|
|
||||||
:key="index">
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
|
|
||||||
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active">
|
|
||||||
<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
|
|
||||||
</view>
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
|
|
||||||
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
|
|
||||||
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
|
|
||||||
<!-- <view v-if="index==0 && direction!='column'" class="address">北京市</view>
|
|
||||||
<view v-if="options.length-1 == index && direction!='column'" class="address">太原市</view> -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniIcons from '../uni-icons/uni-icons.vue'
|
|
||||||
export default {
|
|
||||||
name: 'UniSteps',
|
|
||||||
components: {
|
|
||||||
uniIcons
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
direction: {
|
|
||||||
// 排列方向 row column
|
|
||||||
type: String,
|
|
||||||
default: 'row'
|
|
||||||
},
|
|
||||||
activeColor: {
|
|
||||||
// 激活状态颜色
|
|
||||||
type: String,
|
|
||||||
default: '#1aad19'
|
|
||||||
},
|
|
||||||
deactiveColor: {
|
|
||||||
// 未激活状态颜色
|
|
||||||
type: String,
|
|
||||||
default: '#999999'
|
|
||||||
},
|
|
||||||
active: {
|
|
||||||
// 当前步骤
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
} // 数据
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-steps {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
flex: 1;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-text-container {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-text-container {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-text {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: inline-flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-text {
|
|
||||||
padding: 6px 0px;
|
|
||||||
// border-bottom-style: solid;
|
|
||||||
// border-bottom-width: 1px;
|
|
||||||
// border-bottom-color: $uni-border-color;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-title {
|
|
||||||
font-size: 24rpx;
|
|
||||||
line-height: 16px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-title {
|
|
||||||
font-size: 24rpx;
|
|
||||||
text-align: left;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-desc {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 14px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-desc {
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
text-align: left;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-container {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-container {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: inline-flex;
|
|
||||||
/* #endif */
|
|
||||||
width: 30px;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-line-item {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: inline-flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
flex: 1;
|
|
||||||
height: 14px;
|
|
||||||
line-height: 14px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
.address{
|
|
||||||
position: absolute;
|
|
||||||
top: 40rpx;
|
|
||||||
left: 60rpx;
|
|
||||||
color: #999;
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-line-item {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-line {
|
|
||||||
flex: 1;
|
|
||||||
height: 1px;
|
|
||||||
background-color: $uni-text-color-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-line {
|
|
||||||
width: 1px;
|
|
||||||
background-color: $uni-text-color-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-line--after {
|
|
||||||
transform: translateX(1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-line--after {
|
|
||||||
flex: 1;
|
|
||||||
transform: translate(0px, 1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-line--before {
|
|
||||||
transform: translateX(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-line--before {
|
|
||||||
height: 6px;
|
|
||||||
transform: translate(0px, -1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-circle {
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
border-radius: 100px;
|
|
||||||
background-color: $uni-text-color-grey;
|
|
||||||
margin: 0px 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-circle {
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
border-radius: 100px;
|
|
||||||
background-color: $uni-text-color-grey;
|
|
||||||
margin: 4px 0px 5px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__row-check {
|
|
||||||
margin: 0px 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-steps__column-check {
|
|
||||||
height: 14px;
|
|
||||||
line-height: 14px;
|
|
||||||
margin: 2px 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,184 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="uni-swiper__warp">
|
|
||||||
<slot />
|
|
||||||
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
|
|
||||||
<view v-for="(item,index) in info" :style="{
|
|
||||||
'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
|
|
||||||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
|
|
||||||
</view>
|
|
||||||
<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
|
|
||||||
<view v-for="(item,index) in info" :style="{
|
|
||||||
'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
|
||||||
:key="index" class="uni-swiper__dots-item" />
|
|
||||||
</view>
|
|
||||||
<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
|
|
||||||
<view v-for="(item,index) in info" :class="[index === current&&'uni-swiper__dots-long']" :style="{
|
|
||||||
'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
|
||||||
:key="index" class="uni-swiper__dots-item " />
|
|
||||||
</view>
|
|
||||||
<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
|
|
||||||
<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
|
|
||||||
</view>
|
|
||||||
<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
|
|
||||||
<view v-for="(item,index) in info" :style="{
|
|
||||||
'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
|
||||||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'UniSwiperDot',
|
|
||||||
props: {
|
|
||||||
info: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
current: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
dotsStyles: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 类型 :default(默认) indexes long nav
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'default'
|
|
||||||
},
|
|
||||||
// 只在 nav 模式下生效,变量名称
|
|
||||||
field: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dots: {
|
|
||||||
width: 8,
|
|
||||||
height: 8,
|
|
||||||
bottom: 10,
|
|
||||||
color: '#fff',
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, .3)',
|
|
||||||
border: '1px rgba(0, 0, 0, .3) solid',
|
|
||||||
selectedBackgroundColor: '#333',
|
|
||||||
selectedBorder: '1px rgba(0, 0, 0, .9) solid'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
dotsStyles(newVal) {
|
|
||||||
this.dots = Object.assign(this.dots, this.dotsStyles)
|
|
||||||
},
|
|
||||||
mode(newVal) {
|
|
||||||
if (newVal === 'indexes') {
|
|
||||||
this.dots.width = 20
|
|
||||||
this.dots.height = 20
|
|
||||||
} else {
|
|
||||||
this.dots.width = 8
|
|
||||||
this.dots.height = 8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
if (this.mode === 'indexes') {
|
|
||||||
this.dots.width = 20
|
|
||||||
this.dots.height = 20
|
|
||||||
}
|
|
||||||
this.dots = Object.assign(this.dots, this.dotsStyles)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-swiper__warp {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-box {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-item {
|
|
||||||
width: 8px;
|
|
||||||
border-radius: 100px;
|
|
||||||
margin-left: 6px;
|
|
||||||
background-color: $uni-bg-color-mask;
|
|
||||||
// transition: width 0.2s linear; 不要取消注释,不然会不能变色
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-item:first-child {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-default {
|
|
||||||
border-radius: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-long {
|
|
||||||
border-radius: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-bar {
|
|
||||||
border-radius: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-nav {
|
|
||||||
bottom: 0px;
|
|
||||||
height: 40px;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-nav-item {
|
|
||||||
/* overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap; */
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
color: #fff;
|
|
||||||
margin: 0 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-indexes {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
// flex: 1;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-swiper__dots-indexes-text {
|
|
||||||
color: #fff;
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,230 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view :class="[
|
|
||||||
'uni-tag--' + type,
|
|
||||||
disabled === true || disabled === 'true' ? 'uni-tag--disabled' : '',
|
|
||||||
inverted === true || inverted === 'true' ? type + '-uni-tag--inverted' : '',
|
|
||||||
circle === true || circle === 'true' ? 'uni-tag--circle' : '',
|
|
||||||
mark === true || mark === 'true' ? 'uni-tag--mark' : '',
|
|
||||||
'uni-tag--' + size
|
|
||||||
]"
|
|
||||||
@click="onClick()" class="uni-tag" v-if="text">
|
|
||||||
<text :class="[type === 'default' ? 'uni-tag--default':'uni-tag-text',inverted === true || inverted === 'true' ? 'uni-tag-text--'+type : '',size === 'small' ? 'uni-tag-text--small':'' ]">{{ text }}</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* Tag 标签
|
|
||||||
* @description 用于展示1个或多个文字标签,可点击切换选中、不选中的状态
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=35
|
|
||||||
* @property {String} text 标签内容
|
|
||||||
* @property {String} size = [normal|small] 大小尺寸
|
|
||||||
* @value normal 正常
|
|
||||||
* @value small 小尺寸
|
|
||||||
* @property {String} type = [default|primary|success|warning|error|royal] 颜色类型
|
|
||||||
* @value default 灰色
|
|
||||||
* @value primary 蓝色
|
|
||||||
* @value success 绿色
|
|
||||||
* @value warning 黄色
|
|
||||||
* @value error 红色
|
|
||||||
* @value royal 紫色
|
|
||||||
* @property {Boolean} disabled = [true|false] 是否为禁用状态
|
|
||||||
* @property {Boolean} inverted = [true|false] 是否无需背景颜色(空心标签)
|
|
||||||
* @property {Boolean} circle = [true|false] 是否为圆角
|
|
||||||
* @event {Function} click 点击 Tag 触发事件
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "UniTag",
|
|
||||||
props: {
|
|
||||||
type: {
|
|
||||||
// 标签类型default、primary、success、warning、error、royal
|
|
||||||
type: String,
|
|
||||||
default: "default"
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
// 标签大小 normal, small
|
|
||||||
type: String,
|
|
||||||
default: "normal"
|
|
||||||
},
|
|
||||||
// 标签内容
|
|
||||||
text: {
|
|
||||||
type: String,
|
|
||||||
default: ""
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
// 是否为禁用状态
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
inverted: {
|
|
||||||
// 是否为空心
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
circle: {
|
|
||||||
// 是否为圆角样式
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
mark: {
|
|
||||||
// 是否为标记样式
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick() {
|
|
||||||
if (this.disabled === true || this.disabled === "true") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.$emit("click");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$tag-pd: 0px 16px;
|
|
||||||
$tag-small-pd: 0px 8px;
|
|
||||||
|
|
||||||
.uni-tag {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
padding: $tag-pd;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
justify-content: center;
|
|
||||||
color: $uni-text-color;
|
|
||||||
border-radius: $uni-border-radius-base;
|
|
||||||
background-color: $uni-bg-color-grey;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-bg-color-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--circle {
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--mark {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-right-radius: 15px;
|
|
||||||
border-bottom-right-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--small {
|
|
||||||
height: 20px;
|
|
||||||
padding: $tag-small-pd;
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--default {
|
|
||||||
color: $uni-text-color;
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--small {
|
|
||||||
font-size: $uni-font-size-sm !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--primary {
|
|
||||||
color: $uni-color-primary !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--success {
|
|
||||||
color: $uni-color-success !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--warning {
|
|
||||||
color: $uni-color-warning !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag-text--error {
|
|
||||||
color: $uni-color-error !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--primary {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-primary;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary-uni-tag--inverted {
|
|
||||||
color: $uni-color-primary;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--success {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-success;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-uni-tag--inverted {
|
|
||||||
color: $uni-color-success;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--warning {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-warning;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning-uni-tag--inverted {
|
|
||||||
color: $uni-color-warning;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--error {
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
background-color: $uni-color-error;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-error;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-uni-tag--inverted {
|
|
||||||
color: $uni-color-error;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-color-error;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-tag--inverted {
|
|
||||||
color: $uni-text-color;
|
|
||||||
background-color: $uni-bg-color;
|
|
||||||
border-width: 1rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $uni-bg-color-grey;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,279 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
|
|
||||||
@click="change">
|
|
||||||
<slot></slot>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
const animation = uni.requireNativePlugin('animation');
|
|
||||||
// #endif
|
|
||||||
/**
|
|
||||||
* Transition 过渡动画
|
|
||||||
* @description 简单过渡动画组件
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
|
||||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
|
||||||
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
|
||||||
* @value fade 渐隐渐出过渡
|
|
||||||
* @value slide-top 由上至下过渡
|
|
||||||
* @value slide-right 由右至左过渡
|
|
||||||
* @value slide-bottom 由下至上过渡
|
|
||||||
* @value slide-left 由左至右过渡
|
|
||||||
* @value zoom-in 由小到大过渡
|
|
||||||
* @value zoom-out 由大到小过渡
|
|
||||||
* @property {Number} duration 过渡动画持续时间
|
|
||||||
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'uniTransition',
|
|
||||||
props: {
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
modeClass: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
duration: {
|
|
||||||
type: Number,
|
|
||||||
default: 300
|
|
||||||
},
|
|
||||||
styles: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isShow: false,
|
|
||||||
transform: '',
|
|
||||||
ani: { in: '',
|
|
||||||
active: ''
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
show: {
|
|
||||||
handler(newVal) {
|
|
||||||
if (newVal) {
|
|
||||||
this.open()
|
|
||||||
} else {
|
|
||||||
this.close()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
stylesObject() {
|
|
||||||
let styles = {
|
|
||||||
...this.styles,
|
|
||||||
'transition-duration': this.duration / 1000 + 's'
|
|
||||||
}
|
|
||||||
let transfrom = ''
|
|
||||||
for (let i in styles) {
|
|
||||||
let line = this.toLine(i)
|
|
||||||
transfrom += line + ':' + styles[i] + ';'
|
|
||||||
}
|
|
||||||
return transfrom
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// this.timer = null
|
|
||||||
// this.nextTick = (time = 50) => new Promise(resolve => {
|
|
||||||
// clearTimeout(this.timer)
|
|
||||||
// this.timer = setTimeout(resolve, time)
|
|
||||||
// return this.timer
|
|
||||||
// });
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
change() {
|
|
||||||
this.$emit('click', {
|
|
||||||
detail: this.isShow
|
|
||||||
})
|
|
||||||
},
|
|
||||||
open() {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this.isShow = true
|
|
||||||
this.transform = ''
|
|
||||||
this.ani.in = ''
|
|
||||||
for (let i in this.getTranfrom(false)) {
|
|
||||||
if (i === 'opacity') {
|
|
||||||
this.ani.in = 'fade-in'
|
|
||||||
} else {
|
|
||||||
this.transform += `${this.getTranfrom(false)[i]} `
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
this._animation(true)
|
|
||||||
}, 50)
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
close(type) {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this._animation(false)
|
|
||||||
},
|
|
||||||
_animation(type) {
|
|
||||||
let styles = this.getTranfrom(type)
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
if(!this.$refs['ani']) return
|
|
||||||
animation.transition(this.$refs['ani'].ref, {
|
|
||||||
styles,
|
|
||||||
duration: this.duration, //ms
|
|
||||||
timingFunction: 'ease',
|
|
||||||
needLayout: false,
|
|
||||||
delay: 0 //ms
|
|
||||||
}, () => {
|
|
||||||
if (!type) {
|
|
||||||
this.isShow = false
|
|
||||||
}
|
|
||||||
this.$emit('change', {
|
|
||||||
detail: this.isShow
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
this.transform = ''
|
|
||||||
for (let i in styles) {
|
|
||||||
if (i === 'opacity') {
|
|
||||||
this.ani.in = `fade-${type?'out':'in'}`
|
|
||||||
} else {
|
|
||||||
this.transform += `${styles[i]} `
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
if (!type) {
|
|
||||||
this.isShow = false
|
|
||||||
}
|
|
||||||
this.$emit('change', {
|
|
||||||
detail: this.isShow
|
|
||||||
})
|
|
||||||
|
|
||||||
}, this.duration)
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
},
|
|
||||||
getTranfrom(type) {
|
|
||||||
let styles = {
|
|
||||||
transform: ''
|
|
||||||
}
|
|
||||||
this.modeClass.forEach((mode) => {
|
|
||||||
switch (mode) {
|
|
||||||
case 'fade':
|
|
||||||
styles.opacity = type ? 1 : 0
|
|
||||||
break;
|
|
||||||
case 'slide-top':
|
|
||||||
styles.transform += `translateY(${type?'0':'-100%'}) `
|
|
||||||
break;
|
|
||||||
case 'slide-right':
|
|
||||||
styles.transform += `translateX(${type?'0':'100%'}) `
|
|
||||||
break;
|
|
||||||
case 'slide-bottom':
|
|
||||||
styles.transform += `translateY(${type?'0':'100%'}) `
|
|
||||||
break;
|
|
||||||
case 'slide-left':
|
|
||||||
styles.transform += `translateX(${type?'0':'-100%'}) `
|
|
||||||
break;
|
|
||||||
case 'zoom-in':
|
|
||||||
styles.transform += `scale(${type?1:0.8}) `
|
|
||||||
break;
|
|
||||||
case 'zoom-out':
|
|
||||||
styles.transform += `scale(${type?1:1.2}) `
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return styles
|
|
||||||
},
|
|
||||||
_modeClassArr(type) {
|
|
||||||
let mode = this.modeClass
|
|
||||||
if (typeof(mode) !== "string") {
|
|
||||||
let modestr = ''
|
|
||||||
mode.forEach((item) => {
|
|
||||||
modestr += (item + '-' + type + ',')
|
|
||||||
})
|
|
||||||
return modestr.substr(0, modestr.length - 1)
|
|
||||||
} else {
|
|
||||||
return mode + '-' + type
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// getEl(el) {
|
|
||||||
// console.log(el || el.ref || null);
|
|
||||||
// return el || el.ref || null
|
|
||||||
// },
|
|
||||||
toLine(name) {
|
|
||||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.uni-transition {
|
|
||||||
transition-timing-function: ease;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
transition-property: transform, opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-top-in {
|
|
||||||
/* transition-property: transform, opacity; */
|
|
||||||
transform: translateY(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-top-active {
|
|
||||||
transform: translateY(0);
|
|
||||||
/* opacity: 1; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-right-in {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-right-active {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-bottom-in {
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-bottom-active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-left-in {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-left-active {
|
|
||||||
transform: translateX(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-in-in {
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-out-active {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-out-in {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -65,7 +65,6 @@ export default {
|
|||||||
// 可自行调整
|
// 可自行调整
|
||||||
this.scHight = phone.screenHeight / 2 - 200 + "px";
|
this.scHight = phone.screenHeight / 2 - 200 + "px";
|
||||||
this.getCode();
|
this.getCode();
|
||||||
|
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
height: {
|
height: {
|
||||||
@@ -315,30 +314,6 @@ export default {
|
|||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-bom {
|
|
||||||
border-bottom: 0.5rpx solid #dddddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-red {
|
|
||||||
border-bottom: 1rpx solid #d33e18;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-bom-big {
|
|
||||||
border-bottom: 8rpx solid #dddddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-bom-white {
|
|
||||||
border-bottom: 2rpx solid #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-bom-green {
|
|
||||||
border-bottom: 4rpx solid #f8f9bd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-bom-index {
|
|
||||||
border-bottom: 4rpx solid #27d9b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-left {
|
.padding-left {
|
||||||
padding-left: 20rpx;
|
padding-left: 20rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
const name = "lilishop";
|
const name = "lilishop"; //全局商城name
|
||||||
|
const schemeName = 'lilishop' //唤醒app需要的schemeName
|
||||||
export default {
|
export default {
|
||||||
name: name,
|
name: name,
|
||||||
schemeLink: `${name}://`, //唤起app地址
|
schemeLink: `${schemeName}://`, //唤起app地址
|
||||||
downloadLink: "https://pickmall.cn/download-page/index.html", //下载地址,下载app的地址
|
downloadLink: "https://pickmall.cn/download-page/index.html", //下载地址,下载app的地址
|
||||||
shareLink: "https://m-b2b2c.pickmall.cn", //分享地址,也就是在h5中默认的复制地址
|
shareLink: "https://m-b2b2c.pickmall.cn", //分享地址,也就是在h5中默认的复制地址
|
||||||
appid: "wx6f10f29075dc1b0b", //小程序唯一凭证,即 AppID,可在「微信公众平台 - 设置 - 开发设置」页中获得。(需要已经成为开发者,且帐号没有异常状态)
|
appid: "wx6f10f29075dc1b0b", //小程序唯一凭证,即 AppID,可在「微信公众平台 - 设置 - 开发设置」页中获得。(需要已经成为开发者,且帐号没有异常状态)
|
||||||
@@ -9,5 +10,7 @@ export default {
|
|||||||
aMapKey: "d649892b3937a5ad20b76dacb2bcb5bd", //在高德中申请web端key
|
aMapKey: "d649892b3937a5ad20b76dacb2bcb5bd", //在高德中申请web端key
|
||||||
scanAuthNavigation:['https://m-b2b2c.pickmall.cn/'], //扫码认证跳转域名配置 会根据此处配置的路由进行跳转
|
scanAuthNavigation:['https://m-b2b2c.pickmall.cn/'], //扫码认证跳转域名配置 会根据此处配置的路由进行跳转
|
||||||
iosAppId:"id1564638363", //AppStore的应用地址id 具体在分享->拷贝链接中查看
|
iosAppId:"id1564638363", //AppStore的应用地址id 具体在分享->拷贝链接中查看
|
||||||
logo:"https://lilishop-oss.oss-cn-beijing.aliyuncs.com/4c864e133c2944efad1f7282ac8a3b9e.png" //logo地址
|
logo:"https://lilishop-oss.oss-cn-beijing.aliyuncs.com/4c864e133c2944efad1f7282ac8a3b9e.png", //logo地址
|
||||||
|
customerServiceMobile:"13161366885", //客服电话
|
||||||
|
customerServiceEmail:"lili@lili.com" //客服邮箱
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,7 +1,18 @@
|
|||||||
|
/**
|
||||||
|
* 微信小程序支付
|
||||||
|
* 此处针对于微信小程序开发的支付插件
|
||||||
|
* 第一次支付成功后会跳出订阅的消息 如果用户拒绝或同意都会跳转到支付成功页面
|
||||||
|
* 如果点击订阅 会将状态写进缓存 之后不再提醒。
|
||||||
|
*
|
||||||
|
* @param {sn,price}
|
||||||
|
*/
|
||||||
|
|
||||||
import { initiatePay } from "@/api/trade";
|
import { initiatePay } from "@/api/trade";
|
||||||
|
import { getWeChatMpMessage } from "@/api/message.js";
|
||||||
class LiLiWXPay {
|
class LiLiWXPay {
|
||||||
constructor(...payList) {
|
constructor(...payList) {
|
||||||
this.data = payList[0];
|
this.data = payList[0];
|
||||||
|
console.log(payList);
|
||||||
// 调用支付
|
// 调用支付
|
||||||
this.pay = () => {
|
this.pay = () => {
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
@@ -32,13 +43,7 @@ class LiLiWXPay {
|
|||||||
icon: "none",
|
icon: "none",
|
||||||
title: "支付成功!",
|
title: "支付成功!",
|
||||||
});
|
});
|
||||||
// 之后成功后跳转到支付成功页面
|
sendMessage(payList[0].price);
|
||||||
uni.redirectTo({
|
|
||||||
url:
|
|
||||||
"/pages/cart/payment/success?paymentMethod=WECHAT" +
|
|
||||||
"&payPrice=" +
|
|
||||||
this.data.price,
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
fail: (e) => {
|
fail: (e) => {
|
||||||
this.exception = e;
|
this.exception = e;
|
||||||
@@ -59,4 +64,53 @@ class LiLiWXPay {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function sendMessage(price) {
|
||||||
|
//判断用户是否已经进行了订阅
|
||||||
|
if (!uni.getStorageSync("acceptSubscribeMessage")) {
|
||||||
|
//订阅消息
|
||||||
|
getWeChatMpMessage().then((res) => {
|
||||||
|
var message = res.data.result;
|
||||||
|
var templateid = message.map((item) => item.code);
|
||||||
|
uni.requestSubscribeMessage({
|
||||||
|
tmplIds: templateid,
|
||||||
|
success: (res) => {
|
||||||
|
for (let key in res) {
|
||||||
|
// 表示用户拒绝订阅该信息
|
||||||
|
if (res[key] == "reject") {
|
||||||
|
this.checked = false;
|
||||||
|
} else {
|
||||||
|
uni.setStorageSync("acceptSubscribeMessage", res);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
uni.removeStorageSync("acceptSubscribeMessage");
|
||||||
|
this.checked = false;
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
/**
|
||||||
|
* 已经支付成功
|
||||||
|
*/
|
||||||
|
uni.redirectTo({
|
||||||
|
url:
|
||||||
|
"/pages/cart/payment/success?paymentMethod=WECHAT" +
|
||||||
|
"&payPrice=" +
|
||||||
|
price,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
/**
|
||||||
|
* 已经支付成功
|
||||||
|
*/
|
||||||
|
uni.redirectTo({
|
||||||
|
url:
|
||||||
|
"/pages/cart/payment/success?paymentMethod=WECHAT" +
|
||||||
|
"&payPrice=" +
|
||||||
|
price,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default LiLiWXPay;
|
export default LiLiWXPay;
|
||||||
|
|||||||
@@ -1,274 +0,0 @@
|
|||||||
/**
|
|
||||||
* 本模块封装了Android、iOS的应用权限判断、打开应用权限设置界面、以及位置系统服务是否开启
|
|
||||||
*/
|
|
||||||
|
|
||||||
var isIos;
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
isIos = plus.os.name == "iOS";
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// 判断推送权限是否开启
|
|
||||||
function judgeIosPermissionPush() {
|
|
||||||
var result = false;
|
|
||||||
var UIApplication = plus.ios.import("UIApplication");
|
|
||||||
var app = UIApplication.sharedApplication();
|
|
||||||
var enabledTypes = 0;
|
|
||||||
if (app.currentUserNotificationSettings) {
|
|
||||||
var settings = app.currentUserNotificationSettings();
|
|
||||||
enabledTypes = settings.plusGetAttribute("types");
|
|
||||||
console.log("enabledTypes1:" + enabledTypes);
|
|
||||||
if (enabledTypes == 0) {
|
|
||||||
console.log("推送权限没有开启");
|
|
||||||
} else {
|
|
||||||
result = true;
|
|
||||||
console.log("已经开启推送功能!");
|
|
||||||
}
|
|
||||||
plus.ios.deleteObject(settings);
|
|
||||||
} else {
|
|
||||||
enabledTypes = app.enabledRemoteNotificationTypes();
|
|
||||||
if (enabledTypes == 0) {
|
|
||||||
console.log("推送权限没有开启!");
|
|
||||||
} else {
|
|
||||||
result = true;
|
|
||||||
console.log("已经开启推送功能!");
|
|
||||||
}
|
|
||||||
console.log("enabledTypes2:" + enabledTypes);
|
|
||||||
}
|
|
||||||
plus.ios.deleteObject(app);
|
|
||||||
plus.ios.deleteObject(UIApplication);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断定位权限是否开启
|
|
||||||
function judgeIosPermissionLocation() {
|
|
||||||
var result = false;
|
|
||||||
var cllocationManger = plus.ios.import("CLLocationManager");
|
|
||||||
var status = cllocationManger.authorizationStatus();
|
|
||||||
result = status != 2;
|
|
||||||
console.log("定位权限开启:" + result);
|
|
||||||
// 以下代码判断了手机设备的定位是否关闭,推荐另行使用方法 checkSystemEnableLocation
|
|
||||||
var enable = cllocationManger.locationServicesEnabled();
|
|
||||||
var status = cllocationManger.authorizationStatus();
|
|
||||||
console.log("enable:" + enable);
|
|
||||||
console.log("status:" + status);
|
|
||||||
if (enable && status != 2) {
|
|
||||||
result = true;
|
|
||||||
console.log("手机定位服务已开启且已授予定位权限");
|
|
||||||
} else {
|
|
||||||
console.log("手机系统的定位没有打开或未给予定位权限");
|
|
||||||
}
|
|
||||||
plus.ios.deleteObject(cllocationManger);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断麦克风权限是否开启
|
|
||||||
function judgeIosPermissionRecord() {
|
|
||||||
var result = false;
|
|
||||||
var avaudiosession = plus.ios.import("AVAudioSession");
|
|
||||||
var avaudio = avaudiosession.sharedInstance();
|
|
||||||
var permissionStatus = avaudio.recordPermission();
|
|
||||||
console.log("permissionStatus:" + permissionStatus);
|
|
||||||
if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
|
|
||||||
console.log("麦克风权限没有开启");
|
|
||||||
} else {
|
|
||||||
result = true;
|
|
||||||
console.log("麦克风权限已经开启");
|
|
||||||
}
|
|
||||||
plus.ios.deleteObject(avaudiosession);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断相机权限是否开启
|
|
||||||
function judgeIosPermissionCamera() {
|
|
||||||
var result = false;
|
|
||||||
var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
|
|
||||||
var authStatus = AVCaptureDevice.authorizationStatusForMediaType("vide");
|
|
||||||
console.log("authStatus:" + authStatus);
|
|
||||||
if (authStatus == 3) {
|
|
||||||
result = true;
|
|
||||||
console.log("相机权限已经开启");
|
|
||||||
} else {
|
|
||||||
console.log("相机权限没有开启");
|
|
||||||
}
|
|
||||||
plus.ios.deleteObject(AVCaptureDevice);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断相册权限是否开启
|
|
||||||
function judgeIosPermissionPhotoLibrary() {
|
|
||||||
var result = false;
|
|
||||||
var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
|
|
||||||
var authStatus = PHPhotoLibrary.authorizationStatus();
|
|
||||||
console.log("authStatus:" + authStatus);
|
|
||||||
if (authStatus == 3) {
|
|
||||||
result = true;
|
|
||||||
console.log("相册权限已经开启");
|
|
||||||
} else {
|
|
||||||
console.log("相册权限没有开启");
|
|
||||||
}
|
|
||||||
plus.ios.deleteObject(PHPhotoLibrary);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断通讯录权限是否开启
|
|
||||||
function judgeIosPermissionContact() {
|
|
||||||
var result = false;
|
|
||||||
var CNContactStore = plus.ios.import("CNContactStore");
|
|
||||||
var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
|
|
||||||
if (cnAuthStatus == 3) {
|
|
||||||
result = true;
|
|
||||||
console.log("通讯录权限已经开启");
|
|
||||||
} else {
|
|
||||||
console.log("通讯录权限没有开启");
|
|
||||||
}
|
|
||||||
plus.ios.deleteObject(CNContactStore);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断日历权限是否开启
|
|
||||||
function judgeIosPermissionCalendar() {
|
|
||||||
var result = false;
|
|
||||||
var EKEventStore = plus.ios.import("EKEventStore");
|
|
||||||
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
|
|
||||||
if (ekAuthStatus == 3) {
|
|
||||||
result = true;
|
|
||||||
console.log("日历权限已经开启");
|
|
||||||
} else {
|
|
||||||
console.log("日历权限没有开启");
|
|
||||||
}
|
|
||||||
plus.ios.deleteObject(EKEventStore);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断备忘录权限是否开启
|
|
||||||
function judgeIosPermissionMemo() {
|
|
||||||
var result = false;
|
|
||||||
var EKEventStore = plus.ios.import("EKEventStore");
|
|
||||||
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
|
|
||||||
if (ekAuthStatus == 3) {
|
|
||||||
result = true;
|
|
||||||
console.log("备忘录权限已经开启");
|
|
||||||
} else {
|
|
||||||
console.log("备忘录权限没有开启");
|
|
||||||
}
|
|
||||||
plus.ios.deleteObject(EKEventStore);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Android权限查询
|
|
||||||
function requestAndroidPermission(permissionID) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
plus.android.requestPermissions(
|
|
||||||
[permissionID], // 理论上支持多个权限同时查询,但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
|
|
||||||
function (resultObj) {
|
|
||||||
var result = 0;
|
|
||||||
for (var i = 0; i < resultObj.granted.length; i++) {
|
|
||||||
var grantedPermission = resultObj.granted[i];
|
|
||||||
console.log("已获取的权限:" + grantedPermission);
|
|
||||||
result = 1;
|
|
||||||
}
|
|
||||||
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
|
|
||||||
var deniedPresentPermission = resultObj.deniedPresent[i];
|
|
||||||
console.log("拒绝本次申请的权限:" + deniedPresentPermission);
|
|
||||||
result = 0;
|
|
||||||
}
|
|
||||||
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
|
|
||||||
var deniedAlwaysPermission = resultObj.deniedAlways[i];
|
|
||||||
console.log("永久拒绝申请的权限:" + deniedAlwaysPermission);
|
|
||||||
result = -1;
|
|
||||||
}
|
|
||||||
resolve(result);
|
|
||||||
// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
|
|
||||||
// if (result != 1) {
|
|
||||||
// gotoAppPermissionSetting()
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
function (error) {
|
|
||||||
console.log("申请权限错误:" + error.code + " = " + error.message);
|
|
||||||
resolve({
|
|
||||||
code: error.code,
|
|
||||||
message: error.message,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 使用一个方法,根据参数判断权限
|
|
||||||
function judgeIosPermission(permissionID) {
|
|
||||||
if (permissionID == "location") {
|
|
||||||
return judgeIosPermissionLocation();
|
|
||||||
} else if (permissionID == "camera") {
|
|
||||||
return judgeIosPermissionCamera();
|
|
||||||
} else if (permissionID == "photoLibrary") {
|
|
||||||
return judgeIosPermissionPhotoLibrary();
|
|
||||||
} else if (permissionID == "record") {
|
|
||||||
return judgeIosPermissionRecord();
|
|
||||||
} else if (permissionID == "push") {
|
|
||||||
return judgeIosPermissionPush();
|
|
||||||
} else if (permissionID == "contact") {
|
|
||||||
return judgeIosPermissionContact();
|
|
||||||
} else if (permissionID == "calendar") {
|
|
||||||
return judgeIosPermissionCalendar();
|
|
||||||
} else if (permissionID == "memo") {
|
|
||||||
return judgeIosPermissionMemo();
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 跳转到**应用**的权限页面
|
|
||||||
function gotoAppPermissionSetting() {
|
|
||||||
if (isIos) {
|
|
||||||
var UIApplication = plus.ios.import("UIApplication");
|
|
||||||
var application2 = UIApplication.sharedApplication();
|
|
||||||
var NSURL2 = plus.ios.import("NSURL");
|
|
||||||
// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
|
|
||||||
var setting2 = NSURL2.URLWithString("app-settings:");
|
|
||||||
application2.openURL(setting2);
|
|
||||||
|
|
||||||
plus.ios.deleteObject(setting2);
|
|
||||||
plus.ios.deleteObject(NSURL2);
|
|
||||||
plus.ios.deleteObject(application2);
|
|
||||||
} else {
|
|
||||||
// console.log(plus.device.vendor);
|
|
||||||
var Intent = plus.android.importClass("android.content.Intent");
|
|
||||||
var Settings = plus.android.importClass("android.provider.Settings");
|
|
||||||
var Uri = plus.android.importClass("android.net.Uri");
|
|
||||||
var mainActivity = plus.android.runtimeMainActivity();
|
|
||||||
var intent = new Intent();
|
|
||||||
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
|
|
||||||
var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
|
|
||||||
intent.setData(uri);
|
|
||||||
mainActivity.startActivity(intent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查系统的设备服务是否开启
|
|
||||||
// var checkSystemEnableLocation = async function () {
|
|
||||||
function checkSystemEnableLocation() {
|
|
||||||
if (isIos) {
|
|
||||||
var result = false;
|
|
||||||
var cllocationManger = plus.ios.import("CLLocationManager");
|
|
||||||
var result = cllocationManger.locationServicesEnabled();
|
|
||||||
console.log("系统定位开启:" + result);
|
|
||||||
plus.ios.deleteObject(cllocationManger);
|
|
||||||
return result;
|
|
||||||
} else {
|
|
||||||
var context = plus.android.importClass("android.content.Context");
|
|
||||||
var locationManager = plus.android.importClass(
|
|
||||||
"android.location.LocationManager"
|
|
||||||
);
|
|
||||||
var main = plus.android.runtimeMainActivity();
|
|
||||||
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
|
|
||||||
var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
|
|
||||||
console.log("系统定位开启:" + result);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
judgeIosPermission: judgeIosPermission,
|
|
||||||
requestAndroidPermission: requestAndroidPermission,
|
|
||||||
checkSystemEnableLocation: checkSystemEnableLocation,
|
|
||||||
gotoAppPermissionSetting: gotoAppPermissionSetting,
|
|
||||||
};
|
|
||||||
37
main.js
37
main.js
@@ -4,41 +4,46 @@ import * as filters from "./utils/filters.js"; // global filter
|
|||||||
import uView from "uview-ui";
|
import uView from "uview-ui";
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 仅在h5中显示唤醒app功能
|
||||||
|
* 在h5页面手动挂载
|
||||||
|
*
|
||||||
|
*/
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
// 在h5页面手动挂载 h5唤醒app插件
|
|
||||||
import airBtn from "@/components/m-airbtn/index.vue";
|
import airBtn from "@/components/m-airbtn/index.vue";
|
||||||
let btn = Vue.component("airBtn", airBtn); //全局注册
|
let btn = Vue.component("airBtn", airBtn); //全局注册
|
||||||
document.body.appendChild(new btn().$mount().$el);
|
document.body.appendChild(new btn().$mount().$el);
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 全局filters
|
||||||
|
*/
|
||||||
|
|
||||||
Object.keys(filters).forEach((key) => {
|
Object.keys(filters).forEach((key) => {
|
||||||
Vue.filter(key, filters[key]);
|
Vue.filter(key, filters[key]);
|
||||||
});
|
});
|
||||||
|
|
||||||
const msg = (title, duration = 1500, mask = false, icon = "none") => {
|
// 引入Vuex
|
||||||
//统一提示方便全局修改
|
|
||||||
if (Boolean(title) === false) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
uni.showToast({
|
|
||||||
title,
|
|
||||||
duration,
|
|
||||||
mask,
|
|
||||||
icon,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 引入vuex
|
|
||||||
Vue.prototype.$store = store;
|
Vue.prototype.$store = store;
|
||||||
Vue.use(uView);
|
Vue.use(uView);
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 注意!
|
||||||
|
* 此处将常用的颜色嵌入到原型链上面
|
||||||
|
* 颜色使用驼峰命名对应 uni.scss中全局颜色变量名
|
||||||
|
* 如需更换主题请修改此处以及uni.scss中的全局颜色
|
||||||
|
*/
|
||||||
// 主题色
|
// 主题色
|
||||||
Vue.prototype.$mainColor = "#ff3c2a";
|
Vue.prototype.$mainColor = "#ff3c2a";
|
||||||
// 高亮主题色
|
// 高亮主题色
|
||||||
Vue.prototype.$lightColor = "#ff6b35";
|
Vue.prototype.$lightColor = "#ff6b35";
|
||||||
// 可直接 this.$api调用
|
// 辅助高亮颜色
|
||||||
Vue.prototype.$api = { msg };
|
Vue.prototype.$aiderLightColor = "#ff9f28";
|
||||||
|
|
||||||
|
|
||||||
App.mpType = "app";
|
App.mpType = "app";
|
||||||
|
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
"name" : "lili商城",
|
"name" : "lili商城",
|
||||||
"appid" : "__UNI__C100675",
|
"appid" : "__UNI__C100675",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "4.0.23",
|
"versionName" : "4.0.42",
|
||||||
"versionCode" : 4000023,
|
"versionCode" : 4000042,
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
"app-plus" : {
|
"app-plus" : {
|
||||||
"compatible" : {
|
"compatible" : {
|
||||||
@@ -178,7 +178,7 @@
|
|||||||
"mp-weixin" : {
|
"mp-weixin" : {
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"usingComponents" : true,
|
"usingComponents" : true,
|
||||||
"appid" : "",
|
"appid" : "wx6f10f29075dc1b0b",
|
||||||
"optimization" : {
|
"optimization" : {
|
||||||
"subPackages" : true
|
"subPackages" : true
|
||||||
},
|
},
|
||||||
|
|||||||
42
package-lock.json
generated
42
package-lock.json
generated
@@ -1,42 +0,0 @@
|
|||||||
{
|
|
||||||
"requires": true,
|
|
||||||
"lockfileVersion": 1,
|
|
||||||
"dependencies": {
|
|
||||||
"async-validator": {
|
|
||||||
"version": "1.12.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.12.2.tgz",
|
|
||||||
"integrity": "sha512-57EETfCPFiB7M4QscvQzWSGNsmtkjjzZv318SK1CBlstk+hycV72ocjriMOOM48HjvmoAoJGpJNjC7Z76RlnZA=="
|
|
||||||
},
|
|
||||||
"core-js": {
|
|
||||||
"version": "2.6.11",
|
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
|
|
||||||
"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
|
|
||||||
},
|
|
||||||
"deepmerge": {
|
|
||||||
"version": "1.5.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
|
|
||||||
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
|
|
||||||
},
|
|
||||||
"popper.js": {
|
|
||||||
"version": "0.6.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-0.6.4.tgz",
|
|
||||||
"integrity": "sha1-GDfEdgr1TSuyC2b5wJuSmT2Exik="
|
|
||||||
},
|
|
||||||
"uview": {
|
|
||||||
"version": "0.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/uview/-/uview-0.1.0.tgz",
|
|
||||||
"integrity": "sha1-tASc8q1kE1430huAdCtjeoLl7yo=",
|
|
||||||
"requires": {
|
|
||||||
"async-validator": "^1.7.1",
|
|
||||||
"core-js": "^2.4.1",
|
|
||||||
"deepmerge": "^1.5.0",
|
|
||||||
"popper.js": "^0.6.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"xmldom": {
|
|
||||||
"version": "0.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.3.0.tgz",
|
|
||||||
"integrity": "sha512-z9s6k3wxE+aZHgXYxSTpGDo7BYOUfJsIRyoZiX6HTjwpwfS2wpQBQKa2fD+ShLyPkqDYo5ud7KitmLZ2Cd6r0g=="
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
73
pages.json
73
pages.json
@@ -36,13 +36,7 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/navigation/point/point-mall",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "积分商城",
|
|
||||||
"enablePullDownRefresh": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/navigation/search/searchPage",
|
"path": "pages/navigation/search/searchPage",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -343,7 +337,18 @@
|
|||||||
"pages": [{
|
"pages": [{
|
||||||
"path": "shopPage",
|
"path": "shopPage",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "详情展示",
|
"navigationBarTitleText": "",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "licencePhoto",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "营业执照"
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "shopPageGoods",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -497,6 +502,25 @@
|
|||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"navigationBarTextStyle": "white"
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "bargain/log",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "砍价记录"
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "point/detail",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "point/pointList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "积分商城"
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -510,16 +534,8 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的优惠券",
|
"navigationBarTitleText": "我的优惠券",
|
||||||
"app-plus": {
|
"app-plus": {
|
||||||
"bounce": "coupon/none",
|
"bounce": "coupon/none"
|
||||||
"titleNView": {
|
|
||||||
"padding-right": "12",
|
|
||||||
"buttons": [{
|
|
||||||
"fontSrc": "/static/font/iconfont/iconfont.ttf",
|
|
||||||
"text": "\ue608",
|
|
||||||
"fontSize": "20",
|
|
||||||
"color": "#FFFFFF"
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -540,19 +556,8 @@
|
|||||||
"path": "coupon/couponCenter",
|
"path": "coupon/couponCenter",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "领券中心",
|
"navigationBarTitleText": "领券中心",
|
||||||
"enablePullDownRefresh": true,
|
"enablePullDownRefresh": true
|
||||||
"app-plus": {
|
|
||||||
"bounce": "none",
|
|
||||||
"titleNView": {
|
|
||||||
"padding-right": "12",
|
|
||||||
"buttons": [{
|
|
||||||
"fontSrc": "/static/font/iconfont/iconfont.ttf",
|
|
||||||
"text": "\ue608",
|
|
||||||
"fontSize": "20",
|
|
||||||
"color": "#FFFFFF"
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -746,12 +751,6 @@
|
|||||||
"text": "分类"
|
"text": "分类"
|
||||||
},
|
},
|
||||||
|
|
||||||
// {
|
|
||||||
// "pagePath": "pages/navigation/point/point-mall",
|
|
||||||
// "iconPath": "static/tabbar/point-mall.png",
|
|
||||||
// "selectedIconPath": "static/tabbar/point-mall-s.png",
|
|
||||||
// "text": "积分商城"
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
"pagePath": "pages/tabbar/cart/cartList",
|
"pagePath": "pages/tabbar/cart/cartList",
|
||||||
"iconPath": "static/tabbar/cart.png",
|
"iconPath": "static/tabbar/cart.png",
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
<u-tabs :list="list" :is-scroll="false" :active-color="lightColor" :current="current" @change="(i)=>{current = i}">
|
||||||
|
</u-tabs>
|
||||||
|
|
||||||
<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>
|
||||||
@@ -19,29 +22,40 @@
|
|||||||
<view class="circle circle-bottom"></view>
|
<view class="circle circle-bottom"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="right">
|
<view class="right">
|
||||||
<view>
|
<view class="desc">
|
||||||
<view v-if="item.scopeType">
|
<view v-if="item.scopeType">
|
||||||
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
|
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
|
||||||
<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
|
<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
|
||||||
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view>
|
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view>
|
||||||
</view>
|
</view>
|
||||||
<view>有效期至:{{item.endTime}}</view>
|
<view class="reason" v-if="item.reason">{{item.reason}}</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>
|
||||||
<view class="bg-quan"> 券 </view>
|
<view class="bg-quan">券</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { useCoupon, getMemberCanUse } from "@/api/trade.js";
|
import { useCoupon } from "@/api/trade.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
lightColor: this.$lightColor,
|
||||||
|
current: 0,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
name: "可用优惠券",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "不可用优惠券",
|
||||||
|
},
|
||||||
|
],
|
||||||
couponsList: [], //优惠券集合
|
couponsList: [], //优惠券集合
|
||||||
params: {
|
params: {
|
||||||
//传参
|
//传参
|
||||||
@@ -55,36 +69,26 @@ export default {
|
|||||||
routerVal: "", //上级传参
|
routerVal: "", //上级传参
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
/**
|
watch: {
|
||||||
* 赋值
|
current(val) {
|
||||||
*/
|
console.log(this.$store.state.cantUseCoupons);
|
||||||
onLoad(val) {
|
val == 0
|
||||||
this.routerVal = val;
|
? (this.couponsList = this.$store.state.canUseCoupons)
|
||||||
this.params.scopeId = val.skuId;
|
: (this.couponsList = this.$store.state.cantUseCoupons);
|
||||||
this.params.storeId = val.storeId;
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
uni.getStorage({
|
this.init();
|
||||||
key: "totalPrice",
|
|
||||||
success: (res) => {
|
|
||||||
this.params.totalPrice = res.data;
|
|
||||||
this.getCoupons();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
* 获取优惠券数量
|
* 从vuex中拿取优惠券信息
|
||||||
*/
|
*/
|
||||||
getCoupons() {
|
init() {
|
||||||
getMemberCanUse(this.params).then((res) => {
|
this.couponsList = this.$store.state.canUseCoupons;
|
||||||
if (res.data.success) {
|
|
||||||
this.couponsList = res.data.result.records;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 领取优惠券
|
* 领取优惠券
|
||||||
*/
|
*/
|
||||||
@@ -109,6 +113,19 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.desc {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.end-time,
|
||||||
|
.reason {
|
||||||
|
color: #999;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
|
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
|
||||||
<!-- 空白页 -->
|
<!-- 空白页 -->
|
||||||
<u-empty mode="coupon" text="暂无优惠券了" v-if="navItem.wheterEmpty"></u-empty>
|
<u-empty mode="coupon" text="暂无优惠券了" v-if="navItem.wheterEmpty"></u-empty>
|
||||||
|
|
||||||
<!-- 数据 -->
|
<!-- 数据 -->
|
||||||
<view v-if="navItem.dataList && coupon" class="coupon-item" :class="{ 'coupon-used': navIndex != 0 }" v-for="(coupon, index) in navItem.dataList" :key="index">
|
<view v-if="navItem.dataList && coupon" class="coupon-item" :class="{ 'coupon-used': navIndex != 0 }" v-for="(coupon, index) in navItem.dataList" :key="index">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
@@ -47,7 +48,7 @@
|
|||||||
<text class="text-2" v-if="coupon.used_status == 1">将过期</text>
|
<text class="text-2" v-if="coupon.used_status == 1">将过期</text>
|
||||||
</view>
|
</view>
|
||||||
<image class="no-icon" v-if="navIndex == 1" src="@/static/img/used.png"></image>
|
<image class="no-icon" v-if="navIndex == 1" src="@/static/img/used.png"></image>
|
||||||
<image class="no-icon" v-if="navIndex == 2" src="@/pages/floor/imgs/overdue.png"></image>
|
<image class="no-icon" v-if="navIndex == 2" src="@/static/img/overdue.png"></image>
|
||||||
<view class="receive" v-if="navIndex == 0" @click="useItNow(coupon)">
|
<view class="receive" v-if="navIndex == 0" @click="useItNow(coupon)">
|
||||||
<text>立即</text><br />
|
<text>立即</text><br />
|
||||||
<text>使用</text>
|
<text>使用</text>
|
||||||
@@ -112,7 +113,7 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoad() {
|
onShow() {
|
||||||
this.getData();
|
this.getData();
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -142,7 +143,7 @@ export default {
|
|||||||
let index = this.tabCurrentIndex;
|
let index = this.tabCurrentIndex;
|
||||||
getMemberCoupons(this.navList[index].params).then((res) => {
|
getMemberCoupons(this.navList[index].params).then((res) => {
|
||||||
uni.stopPullDownRefresh();
|
uni.stopPullDownRefresh();
|
||||||
if (res.statusCode == 200) {
|
if (res.data.success) {
|
||||||
let data = res.data.result.records;
|
let data = res.data.result.records;
|
||||||
if (data.length == 0) {
|
if (data.length == 0) {
|
||||||
if (res.data.pageNumber == 1) {
|
if (res.data.pageNumber == 1) {
|
||||||
@@ -157,6 +158,7 @@ export default {
|
|||||||
this.navList[index].dataList.push(...data);
|
this.navList[index].dataList.push(...data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log(this.navList[index].dataList)
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -220,7 +222,7 @@ $item-color: #fff;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.swiper-box {
|
.swiper-box {
|
||||||
height: calc(100% - 40px);
|
height: calc(100vh - 40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-scroll-content {
|
.list-scroll-content {
|
||||||
|
|||||||
@@ -6,8 +6,7 @@
|
|||||||
<p class="ptips">收银台</p>
|
<p class="ptips">收银台</p>
|
||||||
|
|
||||||
<p class="ptips">剩余支付时间:
|
<p class="ptips">剩余支付时间:
|
||||||
<u-count-down :show-days="false" :show-border="true" font-size="28" color="#008ffa"
|
<u-count-down :show-days="false" :show-border="true" font-size="28" color="#008ffa" border-color="#008ffa" ref="uCountDown" :timestamp="autoCancel"></u-count-down>
|
||||||
border-color="#008ffa" ref="uCountDown" :timestamp="autoCancel"></u-count-down>
|
|
||||||
</p>
|
</p>
|
||||||
<p class="ptips">
|
<p class="ptips">
|
||||||
支付金额
|
支付金额
|
||||||
@@ -152,6 +151,8 @@
|
|||||||
parms.clientType = this.paymentType;
|
parms.clientType = this.paymentType;
|
||||||
|
|
||||||
API_Trade.getCashierData(parms).then((res) => {
|
API_Trade.getCashierData(parms).then((res) => {
|
||||||
|
|
||||||
|
if(res.data.success){
|
||||||
this.cashierParams = res.data.result;
|
this.cashierParams = res.data.result;
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
@@ -160,8 +161,6 @@
|
|||||||
});
|
});
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// #ifndef MP-WEIXIN
|
// #ifndef MP-WEIXIN
|
||||||
if(this.routerVal.recharge_sn){
|
if(this.routerVal.recharge_sn){
|
||||||
this.payList = res.data.result.support.filter((item) => {
|
this.payList = res.data.result.support.filter((item) => {
|
||||||
@@ -171,11 +170,33 @@
|
|||||||
else{
|
else{
|
||||||
this.payList = res.data.result.support;
|
this.payList = res.data.result.support;
|
||||||
}
|
}
|
||||||
|
// #ifndef APP-PLUS
|
||||||
|
//判断是否微信浏览器
|
||||||
|
var ua = window.navigator.userAgent.toLowerCase();
|
||||||
|
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
||||||
|
|
||||||
|
this.payList = res.data.result.support.filter((item) => {
|
||||||
|
return item != "ALIPAY";
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
this.walletValue = res.data.result.walletValue;
|
this.walletValue = res.data.result.walletValue;
|
||||||
this.autoCancel =
|
this.autoCancel =
|
||||||
(res.data.result.autoCancel - new Date().getTime()) / 1000;
|
(res.data.result.autoCancel - new Date().getTime()) / 1000;
|
||||||
|
}
|
||||||
|
else if(res.data.code == 32000){
|
||||||
|
setTimeout(()=>{
|
||||||
|
uni.redirectTo({
|
||||||
|
url: `/pages/order/myOrder?status=0`
|
||||||
|
});
|
||||||
|
},500)
|
||||||
|
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -239,7 +260,7 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
fail: (e) => {
|
fail: (e) => {
|
||||||
console.log(e);
|
console.log(this);
|
||||||
this.exception = e;
|
this.exception = e;
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
content: "支付失败,如果您已支付,请勿反复支付",
|
content: "支付失败,如果您已支付,请勿反复支付",
|
||||||
@@ -277,7 +298,7 @@
|
|||||||
WeixinJSBridge.invoke(
|
WeixinJSBridge.invoke(
|
||||||
"getBrandWCPayRequest",
|
"getBrandWCPayRequest",
|
||||||
response.result,
|
response.result,
|
||||||
function(res) {
|
(res) => {
|
||||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||||
// 使用以上方式判断前端返回,微信团队郑重提示:
|
// 使用以上方式判断前端返回,微信团队郑重提示:
|
||||||
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
|
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
|
||||||
@@ -376,93 +397,93 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.method_icon {
|
.method_icon {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.method_name {
|
.method_name {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
padding-left: 24rpx;
|
padding-left: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .u-row {
|
/deep/ .u-row {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between !important;
|
justify-content: space-between !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.method_name,
|
.method_name,
|
||||||
.col1 {
|
.col1 {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col1 {
|
.col1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
flex: 99;
|
flex: 99;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col3 {
|
.col3 {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.payItem {
|
.payItem {
|
||||||
padding: 13px 25rpx;
|
padding: 13px 25rpx;
|
||||||
border-top: 1px solid #f9f9f9;
|
border-top: 1px solid #f9f9f9;
|
||||||
|
|
||||||
line-height: 100rpx;
|
line-height: 100rpx;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ptips {
|
.ptips {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
margin: 20rpx 0;
|
margin: 20rpx 0;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|
||||||
>span {
|
> span {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
color: #df5a52;
|
color: #df5a52;
|
||||||
margin-left: 10rpx;
|
margin-left: 10rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
width: 392rpx !important;
|
width: 392rpx !important;
|
||||||
height: 296rpx !important;
|
height: 296rpx !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
height: auto;
|
height: auto;
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-4 {
|
.block-4 {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: $u-tips-color;
|
color: $u-tips-color;
|
||||||
|
|
||||||
>p {
|
> p {
|
||||||
padding: 8rpx;
|
padding: 8rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 40rpx 0;
|
padding: 40rpx 0;
|
||||||
// justify-content: center; //这个是X轴居中
|
// justify-content: center; //这个是X轴居中
|
||||||
// align-items: center; //这个是 Y轴居中
|
// align-items: center; //这个是 Y轴居中
|
||||||
}
|
}
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -471,13 +492,13 @@
|
|||||||
width: 200rpx;
|
width: 200rpx;
|
||||||
height: 200rpx;
|
height: 200rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-1 {
|
.block-1 {
|
||||||
margin-top: 80rpx;
|
margin-top: 80rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
margin: 0 20rpx;
|
margin: 0 20rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,19 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode" :mask-close-able="isClose" :mask="isMask" :border-radius="setup.radius" @close="closeMask()">
|
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode"
|
||||||
|
:mask-close-able="isClose" :mask="isMask" :border-radius="setup.radius" @close="closeMask()">
|
||||||
<!-- 商品 -->
|
<!-- 商品 -->
|
||||||
<view class="goods-box bottom">
|
<view class="goods-box bottom">
|
||||||
<view class="goods-header">
|
<view class="goods-header">
|
||||||
<view class="goods-img">
|
<view class="goods-img">
|
||||||
<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx" :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
|
<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx"
|
||||||
|
:src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
|
||||||
</view>
|
</view>
|
||||||
<view class="goods-skus">
|
<view class="goods-skus">
|
||||||
|
|
||||||
<!-- 有活动商品价格 -->
|
<!-- 有活动商品价格 -->
|
||||||
<view class="goods-price " v-if="goodsDetail.promotionPrice">
|
<view class="goods-price " v-if="goodsDetail.promotionPrice">
|
||||||
<span>
|
<span>
|
||||||
¥
|
¥
|
||||||
<span class="goods-price-promotionShow goods-price-bigshow" v-if="goodsDetail.promotionPrice">{{ formatPrice(goodsDetail.promotionPrice)[0] }}</span>
|
<span class="goods-price-promotionShow goods-price-bigshow"
|
||||||
|
v-if="goodsDetail.promotionPrice">{{ formatPrice(goodsDetail.promotionPrice)[0] }}</span>
|
||||||
.{{ formatPrice(goodsDetail.promotionPrice)[1] }}
|
.{{ formatPrice(goodsDetail.promotionPrice)[1] }}
|
||||||
<span></span>
|
<span></span>
|
||||||
</span>
|
</span>
|
||||||
@@ -23,17 +25,18 @@
|
|||||||
formatPrice(goodsDetail.price)[0]
|
formatPrice(goodsDetail.price)[0]
|
||||||
}}</span>
|
}}</span>
|
||||||
.{{ formatPrice(goodsDetail.price)[1] }}
|
.{{ formatPrice(goodsDetail.price)[1] }}
|
||||||
<span></span>
|
|
||||||
</div>
|
</div>
|
||||||
</view>
|
</view>
|
||||||
<!-- 正常商品的价格 -->
|
<!-- 正常商品的价格 -->
|
||||||
<view class="goods-price" v-else>
|
<view class="goods-price" v-else>
|
||||||
|
<span>
|
||||||
¥
|
¥
|
||||||
<span class="goods-price-bigshow">{{
|
<span class="goods-price-bigshow">{{
|
||||||
formatPrice(goodsDetail.price)[0]
|
formatPrice(goodsDetail.price)[0]
|
||||||
}}</span>
|
}}</span>
|
||||||
.{{ formatPrice(goodsDetail.price)[1] }}
|
.{{ formatPrice(goodsDetail.price)[1] }}
|
||||||
<span></span>
|
</span>
|
||||||
</view>
|
</view>
|
||||||
<view class="goods-check-skus">
|
<view class="goods-check-skus">
|
||||||
已选
|
已选
|
||||||
@@ -50,20 +53,24 @@
|
|||||||
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
|
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
|
||||||
<view class="skus-view-list">
|
<view class="skus-view-list">
|
||||||
<view class="view-class-title">{{ spec.name }}</view>
|
<view class="view-class-title">{{ spec.name }}</view>
|
||||||
<view :class="{ active: spec_val.id == currentSelceted[specIndex] }" class="skus-view-item" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
|
<view :class="{ active: spec_val.value == currentSelceted[specIndex] }" class="skus-view-item"
|
||||||
|
v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
|
||||||
@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}</view>
|
@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 数量 -->
|
<!-- 数量 -->
|
||||||
<view class="goods-skus-number">
|
<view class="goods-skus-number">
|
||||||
<view class="view-class-title">数量</view>
|
<view class="view-class-title">数量</view>
|
||||||
<u-number-box :bg-color="numberBox.bgColor" :color="numberBox.color" :input-width="numberBox.width" :input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
|
<u-number-box :bg-color="numberBox.bgColor" :color="numberBox.color" :input-width="numberBox.width"
|
||||||
|
:input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
|
||||||
</u-number-box>
|
</u-number-box>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 按钮 -->
|
<!-- 按钮 -->
|
||||||
<view class="btns">
|
<view class="btns">
|
||||||
<view class="box-btn card" v-if="buyType !='PINTUAN'" @click="addToCartOrBuy('cart')">加入购物车</view>
|
|
||||||
|
<view class="box-btn card" v-if="buyType != 'PINTUAN' && goodsDetail.goodsType!='VIRTUAL_GOODS'"
|
||||||
|
@click="addToCartOrBuy('cart')">加入购物车</view>
|
||||||
<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
|
<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -98,7 +105,13 @@ export default {
|
|||||||
isClose: false, //是否可以点击遮罩关闭
|
isClose: false, //是否可以点击遮罩关闭
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: ["goodsDetail", "buyMask", "selectedSku", "goodsSpec", "addr"],
|
props: [
|
||||||
|
"goodsDetail", //商品详情
|
||||||
|
"buyMask",
|
||||||
|
"selectedSku",
|
||||||
|
"goodsSpec",
|
||||||
|
"addr",
|
||||||
|
],
|
||||||
watch: {
|
watch: {
|
||||||
buyType: {
|
buyType: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
@@ -129,14 +142,12 @@ export default {
|
|||||||
|
|
||||||
/**点击规格 */
|
/**点击规格 */
|
||||||
handleClickSpec(val, index, specValue) {
|
handleClickSpec(val, index, specValue) {
|
||||||
this.$set(this.currentSelceted, index, specValue.id);
|
this.$set(this.currentSelceted, index, specValue.value);
|
||||||
|
|
||||||
let selectedSkuId = this.goodsSpec.find((i) => {
|
let selectedSkuId = this.goodsSpec.find((i) => {
|
||||||
let matched = true;
|
let matched = true;
|
||||||
let specValues = i.specValues.filter((j) => j.specName !== "images");
|
let specValues = i.specValues.filter((j) => j.specName !== "images");
|
||||||
|
|
||||||
for (let n = 0; n < specValues.length; n++) {
|
for (let n = 0; n < specValues.length; n++) {
|
||||||
if (specValues[n].specValueId !== this.currentSelceted[n]) {
|
if (specValues[n].specValue !== this.currentSelceted[n]) {
|
||||||
matched = false;
|
matched = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -145,7 +156,6 @@ export default {
|
|||||||
return i;
|
return i;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.selectSkuList = {
|
this.selectSkuList = {
|
||||||
spec: {
|
spec: {
|
||||||
specName: val.name,
|
specName: val.name,
|
||||||
@@ -155,24 +165,9 @@ export default {
|
|||||||
};
|
};
|
||||||
this.selectName = specValue.value;
|
this.selectName = specValue.value;
|
||||||
|
|
||||||
this.$emit("handleClickSku", selectedSkuId.skuId, this.goodsDetail.id);
|
this.$emit("handleClickSku", {
|
||||||
},
|
skuId: selectedSkuId.skuId,
|
||||||
|
goodsId: this.goodsDetail.goodsId,
|
||||||
/**
|
|
||||||
* 直接购买
|
|
||||||
*/
|
|
||||||
buy(data) {
|
|
||||||
|
|
||||||
API_trade.addToCart(data).then((res) => {
|
|
||||||
if (res.data.code == 200) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/order/fillorder?way=${data.cartType}&addr=${
|
|
||||||
this.addr.id || ""
|
|
||||||
}&parentOrder=${encodeURIComponent(
|
|
||||||
JSON.stringify(this.parentOrder)
|
|
||||||
)}`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -202,36 +197,57 @@ export default {
|
|||||||
|
|
||||||
this.$emit("queryCart");
|
this.$emit("queryCart");
|
||||||
this.closeMask();
|
this.closeMask();
|
||||||
} else {
|
|
||||||
uni.showToast({
|
|
||||||
title: res.data.message,
|
|
||||||
duration: 2000,
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// 判断是否拼团商品
|
// 判断是否拼团商品
|
||||||
if (this.buyType) {
|
if (this.buyType) {
|
||||||
data.cartType = "PINTUAN";
|
data.cartType = "PINTUAN";
|
||||||
|
} else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") {
|
||||||
|
data.cartType = "VIRTUAL";
|
||||||
} else {
|
} else {
|
||||||
data.cartType = "BUY_NOW";
|
data.cartType = "BUY_NOW";
|
||||||
}
|
}
|
||||||
|
|
||||||
this.buy(data);
|
API_trade.addToCart(data).then((res) => {
|
||||||
|
if (res.data.code == 200) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/order/fillorder?way=${data.cartType}&addr=${
|
||||||
|
this.addr.id || ""
|
||||||
|
}&parentOrder=${encodeURIComponent(
|
||||||
|
JSON.stringify(this.parentOrder)
|
||||||
|
)}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 直接购买
|
||||||
|
*/
|
||||||
|
buy(data) {
|
||||||
|
API_trade.addToCart(data).then((res) => {
|
||||||
|
if (res.data.success) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/order/fillorder?way=${
|
||||||
|
data.cartType
|
||||||
|
}&addr=${""}&parentOrder=${encodeURIComponent(
|
||||||
|
JSON.stringify(this.parentOrder)
|
||||||
|
)}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
formatSku(list) {
|
formatSku(list) {
|
||||||
// 格式化数据
|
// 格式化数据
|
||||||
|
|
||||||
let arr = [{}];
|
let arr = [{}];
|
||||||
list.forEach((item, index) => {
|
list.forEach((item, index) => {
|
||||||
item.specValues.forEach((spec, specIndex) => {
|
item.specValues.forEach((spec, specIndex) => {
|
||||||
let id = spec.specNameId;
|
|
||||||
let name = spec.specName;
|
let name = spec.specName;
|
||||||
let values = {
|
let values = {
|
||||||
id: spec.specValueId,
|
|
||||||
value: spec.specValue,
|
value: spec.specValue,
|
||||||
quantity: item.quantity,
|
quantity: item.quantity,
|
||||||
};
|
};
|
||||||
@@ -243,7 +259,7 @@ export default {
|
|||||||
if (
|
if (
|
||||||
arrItem.name == name &&
|
arrItem.name == name &&
|
||||||
arrItem.values &&
|
arrItem.values &&
|
||||||
!arrItem.values.find((i) => i.id === values.id)
|
!arrItem.values.find((i) => i.value === values.value)
|
||||||
) {
|
) {
|
||||||
arrItem.values.push(values);
|
arrItem.values.push(values);
|
||||||
}
|
}
|
||||||
@@ -253,7 +269,6 @@ export default {
|
|||||||
});
|
});
|
||||||
if (!keys.includes(name)) {
|
if (!keys.includes(name)) {
|
||||||
arr.push({
|
arr.push({
|
||||||
id: id,
|
|
||||||
name: name,
|
name: name,
|
||||||
values: [values],
|
values: [values],
|
||||||
});
|
});
|
||||||
@@ -270,7 +285,7 @@ export default {
|
|||||||
item.specValues
|
item.specValues
|
||||||
.filter((i) => i.specName !== "images")
|
.filter((i) => i.specName !== "images")
|
||||||
.forEach((value, _index) => {
|
.forEach((value, _index) => {
|
||||||
this.currentSelceted[_index] = value.specValueId;
|
this.currentSelceted[_index] = value.specValue;
|
||||||
|
|
||||||
this.selectName = value.specValue;
|
this.selectName = value.specValue;
|
||||||
|
|
||||||
@@ -288,6 +303,8 @@ export default {
|
|||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.formatSku(this.goodsSpec);
|
this.formatSku(this.goodsSpec);
|
||||||
|
|
||||||
|
console.log(this.goodsDetail);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -321,10 +338,10 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: $jd-light-color !important;
|
background: $price-light-color !important;
|
||||||
border: 2rpx solid $jd-color;
|
border: 2rpx solid $price-color;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $jd-color !important;
|
color: $price-color !important;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -376,7 +393,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.goods-price {
|
.goods-price {
|
||||||
color: $jd-color;
|
color: $price-color;
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
|
|
||||||
background: $jd-color;
|
background: $price-color;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -67,12 +67,12 @@ import { getGoods } from "@/api/goods.js";
|
|||||||
import { getPinTuanShare } from "@/api/order";
|
import { getPinTuanShare } from "@/api/order";
|
||||||
import shares from "@/components/m-share/index";
|
import shares from "@/components/m-share/index";
|
||||||
import storage from "@/utils/storage.js";
|
import storage from "@/utils/storage.js";
|
||||||
import popupGoods from "./popup/goods"; //购物车商品的模块
|
import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
flage:false, //判断接口是否正常请求
|
flage: false, //判断接口是否正常请求
|
||||||
addr: {
|
addr: {
|
||||||
id: "",
|
id: "",
|
||||||
},
|
},
|
||||||
@@ -140,7 +140,7 @@ export default {
|
|||||||
async init(sn, sku) {
|
async init(sn, sku) {
|
||||||
let res = await getPinTuanShare(sn, sku);
|
let res = await getPinTuanShare(sn, sku);
|
||||||
if (res.data.success && res.data.result.promotionGoods) {
|
if (res.data.success && res.data.result.promotionGoods) {
|
||||||
this.flage = true
|
this.flage = true;
|
||||||
this.data = res.data.result;
|
this.data = res.data.result;
|
||||||
this.selectedGoods = res.data.result.promotionGoods;
|
this.selectedGoods = res.data.result.promotionGoods;
|
||||||
let endTime = Date.parse(
|
let endTime = Date.parse(
|
||||||
@@ -172,7 +172,10 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
this.isMaster = false;
|
this.isMaster = false;
|
||||||
// 获取商品详情
|
// 获取商品详情
|
||||||
this.getGoodsDetail(this.routers.sku, this.routers.goodsId);
|
this.getGoodsDetail({
|
||||||
|
id: this.routers.sku,
|
||||||
|
goodsId: this.routers.goodsId,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取当前商品是否已经购买
|
// 获取当前商品是否已经购买
|
||||||
@@ -184,14 +187,15 @@ export default {
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '当前拼团单有误!请联系管理员重试',
|
title: "当前拼团单有误!请联系管理员重试",
|
||||||
duration: 2000,
|
duration: 2000,
|
||||||
icon:"none"
|
icon: "none",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 获取商品详情
|
// 获取商品详情
|
||||||
getGoodsDetail(id, goodsId) {
|
getGoodsDetail(val) {
|
||||||
|
let { id, goodsId } = val;
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: "加载中",
|
title: "加载中",
|
||||||
mask: true,
|
mask: true,
|
||||||
|
|||||||
@@ -7,36 +7,24 @@
|
|||||||
<div class="pay-btns">
|
<div class="pay-btns">
|
||||||
<div v-show="!from" @click="checkOrder">查看{{this.orderType == "RECHARGE" ? '余额' : '订单'}}</div>
|
<div v-show="!from" @click="checkOrder">查看{{this.orderType == "RECHARGE" ? '余额' : '订单'}}</div>
|
||||||
<div @click="navigateTo('/pages/tabbar/home/index', 'switch')">回到首页</div>
|
<div @click="navigateTo('/pages/tabbar/home/index', 'switch')">回到首页</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pay-box">
|
<div class="pay-box">
|
||||||
<div class="pay-tag-box">
|
<div class="pay-tag-box">
|
||||||
<h2>订单支付成功!</h2>
|
<h2>订单支付成功!</h2>
|
||||||
|
|
||||||
<div class="pay-item">
|
<div class="pay-item">
|
||||||
<div>
|
<div>
|
||||||
支付方式:
|
支付方式:
|
||||||
</div>
|
</div>
|
||||||
<div>{{paymentMethod | paymentTypeFilter}}</div>
|
<div>{{paymentMethod | paymentTypeFilter}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
|
||||||
<div class="subscribe flex">
|
|
||||||
<div>订阅订单状态</div>
|
|
||||||
<div>
|
|
||||||
<u-switch size="50" :disabled="checked" :active-color="activeColor" @change="changeStatus" v-model="checked"></u-switch>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- #endif -->
|
|
||||||
</div>
|
</div>
|
||||||
<goodsRecommend />
|
<goodsRecommend />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getWeChatMpMessage } from "@/api/message.js";
|
|
||||||
import goodsRecommend from "@/components/m-goods-recommend";
|
import goodsRecommend from "@/components/m-goods-recommend";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@@ -48,7 +36,6 @@ export default {
|
|||||||
payPrice: 0,
|
payPrice: 0,
|
||||||
goodsList: [],
|
goodsList: [],
|
||||||
activeColor: this.$mainColor,
|
activeColor: this.$mainColor,
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
@@ -73,6 +60,7 @@ export default {
|
|||||||
this.from = options.from || "";
|
this.from = options.from || "";
|
||||||
this.payPrice = options.payPrice || 0;
|
this.payPrice = options.payPrice || 0;
|
||||||
this.orderType = options.orderType;
|
this.orderType = options.orderType;
|
||||||
|
// this.sendMessage()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
checkOrder() {
|
checkOrder() {
|
||||||
@@ -95,30 +83,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
sendMessage() {
|
|
||||||
//订阅消息
|
|
||||||
//#ifdef MP-WEIXIN
|
|
||||||
getWeChatMpMessage().then((res) => {
|
|
||||||
var message = res.data.result;
|
|
||||||
var templateid = message.map((item) => item.code);
|
|
||||||
uni.requestSubscribeMessage({
|
|
||||||
tmplIds: templateid,
|
|
||||||
success: (res) => {
|
|
||||||
for (let key in res) {
|
|
||||||
if (res[key] == "reject") {
|
|
||||||
this.checked = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fail: (res) => {
|
|
||||||
uni.removeStorageSync("acceptSubscribeMessage");
|
|
||||||
this.checked = false;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
//#endif
|
|
||||||
},
|
|
||||||
|
|
||||||
navigateTo(url, type) {
|
navigateTo(url, type) {
|
||||||
if (type === "switch") {
|
if (type === "switch") {
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
|
|||||||
@@ -149,15 +149,7 @@ export default {
|
|||||||
delete this.form.___path;
|
delete this.form.___path;
|
||||||
addAddress(this.form).then((res) => {
|
addAddress(this.form).then((res) => {
|
||||||
if (res.data.success) {
|
if (res.data.success) {
|
||||||
if (this.routerVal.type == "order") {
|
uni.navigateBack();
|
||||||
uni.redirectTo({
|
|
||||||
url: `/pages/mine/address/address?way=${this.routerVal.way}`,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
uni.redirectTo({
|
|
||||||
url: `/pages/mine/address/addressManage`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="address">
|
<view class="address">
|
||||||
|
|
||||||
<u-empty class="empty" v-if="empty" text="暂无收货地址" mode="address"></u-empty>
|
<u-empty class="empty" v-if="addressList.length == 0" text="暂无收货地址" mode="address"></u-empty>
|
||||||
<view class="list" v-else>
|
<view class="list" v-else>
|
||||||
<view class="item c-content" v-for="(item, index) in addressList" :key="index">
|
<view class="item c-content" v-for="(item, index) in addressList" :key="index">
|
||||||
<view class="basic" @click="selectAddressData(item)">
|
<view class="basic" @click="selectAddressData(item)">
|
||||||
@@ -50,7 +50,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
addressList: [], //地址列表
|
addressList: [], //地址列表
|
||||||
showAction: false, //是否显示下栏框
|
showAction: false, //是否显示下栏框
|
||||||
empty: false, //是否为空
|
|
||||||
removeList: [
|
removeList: [
|
||||||
{
|
{
|
||||||
text: "确定",
|
text: "确定",
|
||||||
@@ -67,7 +66,11 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
onPullDownRefresh() {
|
||||||
|
//下拉刷新
|
||||||
|
this.addressList = [];
|
||||||
|
this.getAddressList();
|
||||||
|
},
|
||||||
onLoad: function (val) {
|
onLoad: function (val) {
|
||||||
this.routerVal = val;
|
this.routerVal = val;
|
||||||
},
|
},
|
||||||
@@ -76,19 +79,12 @@ export default {
|
|||||||
this.getAddressList();
|
this.getAddressList();
|
||||||
},
|
},
|
||||||
onHide() {},
|
onHide() {},
|
||||||
onBackPress(e) {
|
|
||||||
uni.redirectTo({
|
|
||||||
url: "/pages/order/fillorder?way=" + this.routerVal.way,
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
async selectAddressData(val) {
|
async selectAddressData(val) {
|
||||||
await API_Trade.setAddressId(val.id, this.routerVal.way);
|
await API_Trade.setAddressId(val.id, this.routerVal.way);
|
||||||
|
|
||||||
uni.redirectTo({
|
uni.navigateBack({
|
||||||
url: `/pages/order/fillorder?way=${this.routerVal.way}`,
|
delta: 1,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
//获取地址列表
|
//获取地址列表
|
||||||
@@ -99,18 +95,11 @@ export default {
|
|||||||
this.params.pageNumber,
|
this.params.pageNumber,
|
||||||
this.params.pageSize
|
this.params.pageSize
|
||||||
).then((res) => {
|
).then((res) => {
|
||||||
|
|
||||||
if (res.data.result.records.length == 0) {
|
|
||||||
this.empty = true;
|
|
||||||
} else {
|
|
||||||
res.data.result.records.forEach((item) => {
|
res.data.result.records.forEach((item) => {
|
||||||
item.consigneeAddressPath = item.consigneeAddressPath.split(",");
|
item.consigneeAddressPath = item.consigneeAddressPath.split(",");
|
||||||
});
|
});
|
||||||
|
this.addressList = res.data.result.records;
|
||||||
this.$set(this, "addressList", res.data.result.records);
|
console.log(this.addressList);
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
});
|
});
|
||||||
@@ -139,7 +128,6 @@ export default {
|
|||||||
},
|
},
|
||||||
//新建。编辑地址
|
//新建。编辑地址
|
||||||
addAddress(id) {
|
addAddress(id) {
|
||||||
|
|
||||||
if (id) {
|
if (id) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:
|
url:
|
||||||
@@ -177,5 +165,5 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import './address.scss';
|
@import "./address.scss";
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="address">
|
<view class="address">
|
||||||
<u-empty class="empty" v-if="empty" text="暂无收货地址" mode="address"></u-empty>
|
<u-empty class="empty" v-if="this.addressList == 0" text="暂无收货地址" mode="address"></u-empty>
|
||||||
<view class="list" v-else>
|
<view class="list" >
|
||||||
<view class="item c-content" v-for="(item, index) in addressList" :key="index">
|
<view class="item c-content" v-for="(item, index) in addressList" :key="index">
|
||||||
<view class="basic">
|
<view class="basic">
|
||||||
<text>{{ item.name }}</text>
|
<text>{{ item.name }}</text>
|
||||||
@@ -50,7 +50,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
addressList: [], //地址列表
|
addressList: [], //地址列表
|
||||||
showAction: false, //是否显示下栏框
|
showAction: false, //是否显示下栏框
|
||||||
empty: false, //是否为空
|
|
||||||
removeList: [
|
removeList: [
|
||||||
{
|
{
|
||||||
text: "确定",
|
text: "确定",
|
||||||
@@ -77,10 +77,16 @@ export default {
|
|||||||
onLoad: function (val) {
|
onLoad: function (val) {
|
||||||
this.routerVal = val;
|
this.routerVal = val;
|
||||||
},
|
},
|
||||||
|
onPullDownRefresh() {
|
||||||
|
//下拉刷新
|
||||||
|
this.addressList = [];
|
||||||
|
this.getAddressList();
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 进入页面检测当前账户是否登录
|
* 进入页面检测当前账户是否登录
|
||||||
*/
|
*/
|
||||||
onShow() {
|
onShow() {
|
||||||
|
let that = this;
|
||||||
if (this.$options.filters.isLogin("auth")) {
|
if (this.$options.filters.isLogin("auth")) {
|
||||||
this.getAddressList();
|
this.getAddressList();
|
||||||
} else {
|
} else {
|
||||||
@@ -90,9 +96,7 @@ export default {
|
|||||||
confirmColor: this.$lightColor,
|
confirmColor: this.$lightColor,
|
||||||
success: function (res) {
|
success: function (res) {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
uni.navigateTo({
|
that.$options.filters.navigateToLogin();
|
||||||
url: "/pages/passport/login",
|
|
||||||
});
|
|
||||||
} else if (res.cancel) {
|
} else if (res.cancel) {
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
}
|
}
|
||||||
@@ -108,14 +112,11 @@ export default {
|
|||||||
this.params.pageNumber,
|
this.params.pageNumber,
|
||||||
this.params.pageSize
|
this.params.pageSize
|
||||||
).then((res) => {
|
).then((res) => {
|
||||||
if (res.data.result.records.length == 0) {
|
|
||||||
this.empty = true;
|
|
||||||
} else {
|
|
||||||
res.data.result.records.forEach((item) => {
|
res.data.result.records.forEach((item) => {
|
||||||
item.consigneeAddressPath = item.consigneeAddressPath.split(",");
|
item.consigneeAddressPath = item.consigneeAddressPath.split(",");
|
||||||
});
|
});
|
||||||
this.addressList = res.data.result.records;
|
this.addressList = res.data.result.records;
|
||||||
}
|
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -169,5 +170,5 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import './address.scss';
|
@import "./address.scss";
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ export default {
|
|||||||
walletNum: 0,
|
walletNum: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async mounted() {
|
async onShow() {
|
||||||
if (this.$options.filters.isLogin("auth")) {
|
if (this.$options.filters.isLogin("auth")) {
|
||||||
let result = await getUserWallet(); //预存款
|
let result = await getUserWallet(); //预存款
|
||||||
this.walletNum = result.data.result.memberWallet;
|
this.walletNum = result.data.result.memberWallet;
|
||||||
@@ -36,9 +36,8 @@ export default {
|
|||||||
duration: 3000,
|
duration: 3000,
|
||||||
title: "请先登录!",
|
title: "请先登录!",
|
||||||
});
|
});
|
||||||
uni.redirectTo({
|
|
||||||
url: "/pages/passport/login",
|
this.$options.filters.navigateToLogin("redirectTo");
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@@ -12,6 +12,10 @@
|
|||||||
<view @click="handleAll" :style="{ color: $mainColor }">全部</view>
|
<view @click="handleAll" :style="{ color: $mainColor }">全部</view>
|
||||||
<view style="font-size: 24rpx; color: #999">可提现金额<span>{{ walletNum | unitPrice }}</span>元</view>
|
<view style="font-size: 24rpx; color: #999">可提现金额<span>{{ walletNum | unitPrice }}</span>元</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="tips">
|
||||||
|
最低提现金额为1.00元
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -19,7 +23,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getUserWallet,withdrawalApply } from "@/api/members";
|
import { getUserWallet, withdrawalApply } from "@/api/members";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -67,4 +71,8 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "./style.scss";
|
@import "./style.scss";
|
||||||
|
.tips {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -56,9 +56,6 @@ export default {
|
|||||||
type: 0,
|
type: 0,
|
||||||
routers: "",
|
routers: "",
|
||||||
achParams: {
|
achParams: {
|
||||||
distributionId: (this.routers && this.routers.id) || "", //分销商id
|
|
||||||
distributionName: (this.routers && this.routers.name) || "", //分销商名称
|
|
||||||
distributionOrderStatus: "", //分销商订单状态
|
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
},
|
},
|
||||||
@@ -72,15 +69,14 @@ export default {
|
|||||||
title: title, //这是修改后的导航栏文字
|
title: title, //这是修改后的导航栏文字
|
||||||
});
|
});
|
||||||
this.routers = option;
|
this.routers = option;
|
||||||
|
this.type = option.type;
|
||||||
option.type == 0 ? this.achievement() : this.history();
|
option.type == 0 ? this.achievement() : this.history();
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
this.status = "loading";
|
this.status = "loading";
|
||||||
this.params.pageNumber++;
|
this.type == 0 ? this.achParams.pageNumber++ : this.params.pageNumber++;
|
||||||
|
this.type == 0 ? this.achievement() : this.history();
|
||||||
this.type == 1 ? this.history() : this.achievement();
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 业绩
|
// 业绩
|
||||||
|
|||||||
@@ -174,9 +174,7 @@ export default {
|
|||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.routers = options;
|
this.routers = options;
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {},
|
||||||
showFlag(val) {},
|
|
||||||
},
|
|
||||||
onShow() {
|
onShow() {
|
||||||
this.goodsList = [];
|
this.goodsList = [];
|
||||||
this.init();
|
this.init();
|
||||||
@@ -224,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}`,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -273,12 +271,7 @@ export default {
|
|||||||
|
|
||||||
// 选择商品
|
// 选择商品
|
||||||
handleClickGoods(val) {
|
handleClickGoods(val) {
|
||||||
uni.showLoading({
|
|
||||||
title: "加载中",
|
|
||||||
mask: true,
|
|
||||||
});
|
|
||||||
checkedDistributionGoods({ id: val.id, checked: true }).then((res) => {
|
checkedDistributionGoods({ id: val.id, checked: true }).then((res) => {
|
||||||
uni.hideLoading();
|
|
||||||
if (res.data.success) {
|
if (res.data.success) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "已添加到我的选品库",
|
title: "已添加到我的选品库",
|
||||||
@@ -295,12 +288,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
uni.showLoading({
|
|
||||||
title: "加载中",
|
|
||||||
});
|
|
||||||
distributionGoods(this.params).then((res) => {
|
distributionGoods(this.params).then((res) => {
|
||||||
uni.hideLoading();
|
|
||||||
|
|
||||||
if (res.data.success && res.data.result.records.length >= 1) {
|
if (res.data.success && res.data.result.records.length >= 1) {
|
||||||
res.data.result.records.forEach((item) => {
|
res.data.result.records.forEach((item) => {
|
||||||
this.$set(item, "___selected", false);
|
this.$set(item, "___selected", false);
|
||||||
@@ -466,7 +454,7 @@ export default {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
> .-item-price {
|
> .-item-price {
|
||||||
color: $jd-color;
|
color: $price-color;
|
||||||
> span {
|
> span {
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div v-html="res.content"></div>
|
<u-parse v-html="res.content"></u-parse>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -30,11 +30,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import uniSteps from "@/components/uni-steps/uni-steps.vue";
|
|
||||||
import { getExpress } from "@/api/trade.js";
|
import { getExpress } from "@/api/trade.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { uniSteps },
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
express: "",
|
express: "",
|
||||||
|
|||||||
@@ -11,10 +11,11 @@
|
|||||||
<view v-if="tabCurrentIndex == 0" class="tab-content">
|
<view v-if="tabCurrentIndex == 0" class="tab-content">
|
||||||
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
|
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
|
||||||
<!-- 空白页 -->
|
<!-- 空白页 -->
|
||||||
<u-empty text="暂无收藏商品数据" mode="favor" v-if="goodsEmpty"></u-empty>
|
<u-empty style="margin-top:40rpx;" text="暂无收藏商品数据" mode="favor" v-if="goodsEmpty"></u-empty>
|
||||||
<!-- 商品展示数据 -->
|
<!-- 商品展示数据 -->
|
||||||
<u-swipe-action @open="openLeftChange(item,index,'goods')" :show="item.selected" btn-width="180" :options="LeftOptions" v-else v-for="(item,index) in goodList"
|
<u-swipe-action @open="openLeftChange(item,index,'goods')" :show="item.selected" btn-width="180"
|
||||||
@click="clickGoodsSwiperAction(item,index)" :index="index" :key="index">
|
:options="LeftOptions" v-else v-for="(item,index) in goodList" @click="clickGoodsSwiperAction(item,index)"
|
||||||
|
:index="index" :key="index">
|
||||||
<view class="goods" @click="goGoodsDetail(item)">
|
<view class="goods" @click="goGoodsDetail(item)">
|
||||||
<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
|
<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
|
||||||
<u-loading slot="loading"></u-loading>
|
<u-loading slot="loading"></u-loading>
|
||||||
@@ -34,20 +35,22 @@
|
|||||||
<view v-else class="tab-content">
|
<view v-else class="tab-content">
|
||||||
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
|
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
|
||||||
<!-- 空白页 -->
|
<!-- 空白页 -->
|
||||||
<u-empty text="暂无收藏店铺数据" mode="favor" v-if="storeEmpty"></u-empty>
|
<u-empty style="margin-top:40rpx;" text="暂无收藏店铺数据" mode="favor" v-if="storeEmpty"></u-empty>
|
||||||
<!-- 店铺展示数据 -->
|
<!-- 店铺展示数据 -->
|
||||||
<u-swipe-action @open="openLeftChange(item,'store')" :show="item.selected" btn-width="180" :options="LeftOptions" v-else v-for="(item,index) in storeList" :key="index"
|
<u-swipe-action @open="openLeftChange(item,'store')" :show="item.selected" btn-width="180"
|
||||||
|
:options="LeftOptions" v-else v-for="(item,index) in storeList" :key="index"
|
||||||
@click="clickstoreSwiperAction(item)">
|
@click="clickstoreSwiperAction(item)">
|
||||||
<view class="store" @click="gostoreMainPage(item.storeId)">
|
<view class="store" @click="gostoreMainPage(item.id)">
|
||||||
<view class="intro">
|
<view class="intro">
|
||||||
<view class="store-logo">
|
<view class="store-logo">
|
||||||
<u-image width="102rpx" height="102rpx" :src="item.logo" :alt="item.storeName" mode="aspectFit">
|
<u-image width="102rpx" height="102rpx" :src="item.storeLogo" :alt="item.storeName" mode="aspectFit">
|
||||||
<u-loading slot="loading"></u-loading>
|
<u-loading slot="loading"></u-loading>
|
||||||
</u-image>
|
</u-image>
|
||||||
</view>
|
</view>
|
||||||
<view class="store-name">
|
<view class="store-name">
|
||||||
<view>{{item.storeName}}</view>
|
<view>{{item.storeName}}</view>
|
||||||
<u-tag size="mini" type="error" :color="$mainColor" v-if="item.selfOperated" text="自营" mode="plain" shape="circle" />
|
<u-tag size="mini" type="error" :color="$mainColor" v-if="item.selfOperated" text="自营" mode="plain"
|
||||||
|
shape="circle" />
|
||||||
</view>
|
</view>
|
||||||
<view class="store-collect">
|
<view class="store-collect">
|
||||||
<view>进店逛逛</view>
|
<view>进店逛逛</view>
|
||||||
@@ -133,7 +136,6 @@ export default {
|
|||||||
*/
|
*/
|
||||||
clickGoodsSwiperAction(val) {
|
clickGoodsSwiperAction(val) {
|
||||||
deleteGoodsCollection(val.skuId).then((res) => {
|
deleteGoodsCollection(val.skuId).then((res) => {
|
||||||
|
|
||||||
if (res.statusCode == 200) {
|
if (res.statusCode == 200) {
|
||||||
this.storeList = [];
|
this.storeList = [];
|
||||||
this.goodList = [];
|
this.goodList = [];
|
||||||
@@ -159,7 +161,6 @@ export default {
|
|||||||
*/
|
*/
|
||||||
tabClick(index) {
|
tabClick(index) {
|
||||||
this.tabCurrentIndex = index;
|
this.tabCurrentIndex = index;
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<image src="/static/pointTrade/point_bg_1.png" mode=""></image>
|
<image src="/static/pointTrade/point_bg_1.png" mode=""></image>
|
||||||
<image class="point-img" src="/static/pointTrade/tradehall.png" />
|
<image class="point-img" src="/static/pointTrade/tradehall.png" />
|
||||||
<view class="position-point">
|
<view class="position-point">
|
||||||
<view class="apply-point" @click="goIntro"><text>积分介绍</text></view>
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
<view>{{ item.content }}</view>
|
<view>{{ item.content }}</view>
|
||||||
<view>{{ item.createTime}}</view>
|
<view>{{ item.createTime}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view><span>{{item.pointType == "1" ? '+' : '-'}}</span>{{ item.variablePoint }}</view>
|
<view><span>{{item.pointType == "INCREASE" ? '+' : '-'}}</span>{{ item.variablePoint }}</view>
|
||||||
</view>
|
</view>
|
||||||
<uni-load-more :status="count.loadStatus"></uni-load-more>
|
<uni-load-more :status="count.loadStatus"></uni-load-more>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="edition-intro">
|
<view class="edition-intro">
|
||||||
<image src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/4c864e133c2944efad1f7282ac8a3b9e.png" class="logo" />
|
<image :src="config.logo" class="logo" />
|
||||||
<h1> {{config.name}}</h1>
|
<h1> {{config.name}}</h1>
|
||||||
<view class='version'>
|
<view class='version'>
|
||||||
<!-- #ifdef APP-PLUS -->
|
<!-- #ifdef APP-PLUS -->
|
||||||
@@ -24,11 +24,11 @@
|
|||||||
</u-cell-group>
|
</u-cell-group>
|
||||||
|
|
||||||
<view class="intro">
|
<view class="intro">
|
||||||
<view>客服热线:13161366885</view>
|
<view>{{config.customerServiceMobile ? `客服热线:${config.customerServiceMobile}` : ``}}</view>
|
||||||
<view style="margin:20rpx 0 0 0;">客服邮箱:lili@lili.com</view>
|
<view style="margin:20rpx 0 0 0;">{{config.customerServiceEmail ? `客服邮箱:${config.customerServiceEmail}` : ``}}</view>
|
||||||
|
|
||||||
<view>
|
<view>
|
||||||
<view style="margin:20rpx 0; color:#003a8c;" @click="navigateTo('/pages/mine/help/tips?type=user')">《lili商城用户协议》</view>
|
<view style="margin:20rpx 0; color:#003a8c;" @click="navigateTo('/pages/mine/help/tips?type=user')">《{{config.name}}用户协议》</view>
|
||||||
<view>CopyRight @{{config.name}} </view>
|
<view>CopyRight @{{config.name}} </view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -54,6 +54,7 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
const platform = uni.getSystemInfoSync().platform;
|
const platform = uni.getSystemInfoSync().platform;
|
||||||
/**
|
/**
|
||||||
* 获取是否是安卓
|
* 获取是否是安卓
|
||||||
@@ -72,6 +73,7 @@ export default {
|
|||||||
version: inf.version,
|
version: inf.version,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
// #endif
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
<u-form :model="codeForm" class="form" ref="validateCodeForm">
|
<u-form :model="codeForm" class="form" ref="validateCodeForm">
|
||||||
<view v-if="!validateFlage">
|
<view v-if="!validateFlage">
|
||||||
<u-form-item label-width="120" label="手机号" prop="mobile">
|
<u-form-item label-width="120" label="手机号" prop="mobile">
|
||||||
<u-input v-model="codeForm.mobile" placeholder="请输入您的手机号" />
|
<u-input maxlength="11" v-model="codeForm.mobile" placeholder="请输入您的手机号" />
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item class="sendCode" label-width="120" prop="code" label="验证码">
|
<u-form-item class="sendCode" label-width="120" prop="code" label="验证码">
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<view class="submit" @click="validatePhone">验证</view>
|
<view class="submit" @click="validatePhone">验证</view>
|
||||||
<myVerification keep-running @send="verification" class="verification" ref="verification" business="LOGIN" />
|
<myVerification keep-running @send="verification" class="verification" ref="verification" business="FIND_USER" />
|
||||||
</view>
|
</view>
|
||||||
<view v-if="validateFlage">
|
<view v-if="validateFlage">
|
||||||
<u-form-item label-width="120" label="旧密码">
|
<u-form-item label-width="120" label="旧密码">
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { sendMobile, resetByMobile, modifyPass } from "@/api/login";
|
import { sendMobile, resetByMobile, modifyPass } from "@/api/login";
|
||||||
import storage from "@/utils/storage.js";
|
|
||||||
import { md5 } from "@/utils/md5.js"; // md5
|
import { md5 } from "@/utils/md5.js"; // md5
|
||||||
import myVerification from "@/components/verification/verification.vue"; //验证
|
import myVerification from "@/components/verification/verification.vue"; //验证
|
||||||
import uuid from "@/utils/uuid.modified.js";
|
import uuid from "@/utils/uuid.modified.js";
|
||||||
@@ -108,7 +108,7 @@ export default {
|
|||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: "正在获取验证码",
|
title: "正在获取验证码",
|
||||||
});
|
});
|
||||||
sendMobile(this.codeForm.mobile).then((res) => {
|
sendMobile(this.codeForm.mobile, "FIND_USER").then((res) => {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
// 这里此提示会被this.start()方法中的提示覆盖
|
// 这里此提示会被this.start()方法中的提示覆盖
|
||||||
if (res.data.code == 200) {
|
if (res.data.code == 200) {
|
||||||
@@ -161,8 +161,7 @@ export default {
|
|||||||
if (valid) {
|
if (valid) {
|
||||||
resetByMobile(this.codeForm).then((res) => {
|
resetByMobile(this.codeForm).then((res) => {
|
||||||
if (res.data.success) {
|
if (res.data.success) {
|
||||||
storage.setAccessToken(res.data.result.accessToken);
|
this.validateFlage = !this.validateFlage;
|
||||||
storage.setRefreshToken(res.data.result.refreshToken);
|
|
||||||
// 登录成功
|
// 登录成功
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "验证成功!",
|
title: "验证成功!",
|
||||||
@@ -238,6 +237,9 @@ page {
|
|||||||
padding: 80rpx 0;
|
padding: 80rpx 0;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
}
|
}
|
||||||
|
.submit {
|
||||||
|
background: $light-color;
|
||||||
|
}
|
||||||
.box-tips {
|
.box-tips {
|
||||||
margin: 0 72rpx;
|
margin: 0 72rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,13 +17,10 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
navigateTo(url) {
|
navigateTo(url) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: url + `?mobile=${this.mobile}`,
|
url: url,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onLoad(option) {
|
|
||||||
this.mobile = option.mobile;
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -59,9 +59,7 @@ export default {
|
|||||||
storage.setAccessToken("");
|
storage.setAccessToken("");
|
||||||
storage.setRefreshToken("");
|
storage.setRefreshToken("");
|
||||||
storage.setUserInfo({});
|
storage.setUserInfo({});
|
||||||
uni.redirectTo({
|
this.$options.filters.navigateToLogin("redirectTo");
|
||||||
url: "/pages/passport/login",
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -1,26 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="sign-in">
|
<view class="sign-in">
|
||||||
<view class="signin-btn-con">
|
<view class="date-card">
|
||||||
|
<div class="box">
|
||||||
<div class="circle-box">
|
<div class="circle-box">
|
||||||
<div class="cricle" @click="signIn()">
|
<div class="cricle" @click="signIn()">
|
||||||
<span v-if="!ifSign" :class="{ active: signFlag || ifSign }">签到</span>
|
<span v-if="!ifSign" :class="{ active: signFlag || ifSign }">签到</span>
|
||||||
<span v-else :class="{ active: signFlag || ifSign }" :style="ifSign ? 'transform: rotateY(0deg);' : ''">已签</span>
|
<span v-else :class="{ active: signFlag || ifSign }"
|
||||||
|
:style="ifSign ? 'transform: rotateY(0deg);' : ''">已签</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<text class="tips">坚持每天连续签到可以获多重奖励哦</text>
|
<text class="tips">坚持每天连续签到可以获多重奖励哦</text>
|
||||||
|
</div>
|
||||||
</view>
|
</view>
|
||||||
<div class="date-card">
|
<div class="date-card">
|
||||||
<view class="date-con">
|
<view class="date-con">
|
||||||
<view class="date-tit">
|
<view class="date-tit">
|
||||||
<u-row style="width: 100%; justify-content: center;">
|
<div class="current-month">
|
||||||
<div style="text-align: center; " class="text">{{ currentMonth }} {{ currentYear }}</div>
|
<div class="day">每日记录<span> ({{ currentMonth }})</span></div>
|
||||||
</u-row>
|
</div>
|
||||||
</view>
|
</view>
|
||||||
<view class="week">
|
<view class="week">
|
||||||
<text v-for="item in weekArr" :key="item.id">{{ item }}</text>
|
<text v-for="item in weekArr" :key="item.id">{{ item }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="date" v-for="obj in dataObj" :key="obj.id">
|
<view class="date" v-for="obj in dataObj" :key="obj.id">
|
||||||
<view class="item" v-for="item in obj" :key="item.id" :class="item == '' ? 'hide' : ''" :animation="item == currentDay ? animationData : ''">
|
<view class="item" v-for="item in obj" :key="item.id" :class="item == '' ? 'hide' : ''"
|
||||||
|
:animation="item == currentDay ? animationData : ''">
|
||||||
<view class="just" :class="signArr.indexOf(item) != -1 ? 'active' : ''">
|
<view class="just" :class="signArr.indexOf(item) != -1 ? 'active' : ''">
|
||||||
<view class="top">{{ item }} </view>
|
<view class="top">{{ item }} </view>
|
||||||
<view class="bottom">
|
<view class="bottom">
|
||||||
@@ -36,7 +40,7 @@
|
|||||||
">
|
">
|
||||||
<view class="top">{{ item }}</view>
|
<view class="top">{{ item }}</view>
|
||||||
<view class="bottom">
|
<view class="bottom">
|
||||||
<u-icon name="checkmark" color="#ff9f28"></u-icon>
|
<u-icon name="checkmark" :color="aiderLightColor"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -50,16 +54,7 @@
|
|||||||
<text class="close" @click="close">×</text>
|
<text class="close" @click="close">×</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="mask-con">
|
<view class="mask-con">
|
||||||
<view class="keep-sign">
|
<u-icon size="120" style="margin: 50rpx 0" :color="aiderLightColor" name="checkmark"></u-icon>
|
||||||
本月已连续签到
|
|
||||||
<text>{{ continuity }}</text>
|
|
||||||
天
|
|
||||||
</view>
|
|
||||||
<u-icon size="120" style="margin: 50rpx 0" color="#ff9f28" name="checkmark"></u-icon>
|
|
||||||
<view class="mark">
|
|
||||||
<view>获得积分</view>
|
|
||||||
<text>{{ continuityPoint }}</text>
|
|
||||||
</view>
|
|
||||||
<text class="text">连续签到可获得额外奖励哦!</text>
|
<text class="text">连续签到可获得额外奖励哦!</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -71,8 +66,7 @@ import { sign, signTime } from "@/api/point.js";
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
continuity: 1, //本月连续签到天数
|
aiderLightColor:this.$aiderLightColor,
|
||||||
continuityPoint: 2, //获得的积分
|
|
||||||
signFlag: false,
|
signFlag: false,
|
||||||
animationData: {},
|
animationData: {},
|
||||||
maskFlag: false, //
|
maskFlag: false, //
|
||||||
@@ -115,7 +109,6 @@ export default {
|
|||||||
this.getDate();
|
this.getDate();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 补0
|
* 补0
|
||||||
*/
|
*/
|
||||||
@@ -215,7 +208,6 @@ export default {
|
|||||||
Number(itemVal[1]) === Number(this.currentMonthIndex)
|
Number(itemVal[1]) === Number(this.currentMonthIndex)
|
||||||
) {
|
) {
|
||||||
this.signArr.push(Number(itemVal[2]));
|
this.signArr.push(Number(itemVal[2]));
|
||||||
|
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
Number(itemVal[0]) === Number(date.getFullYear()) &&
|
Number(itemVal[0]) === Number(date.getFullYear()) &&
|
||||||
@@ -295,70 +287,79 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
page {
|
||||||
|
background: #f7f7f7;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.date-card {
|
.date-card {
|
||||||
padding: 0 40rpx;
|
padding: 0 32rpx;
|
||||||
|
margin: 32rpx 0;
|
||||||
|
box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
|
||||||
}
|
}
|
||||||
.tips {
|
.tips {
|
||||||
margin-top: 34rpx;
|
margin-top: 54rpx;
|
||||||
|
color: #999;
|
||||||
|
font-size: 24rpx;
|
||||||
|
letter-spacing: 1rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle-box {
|
.circle-box {
|
||||||
width: 200rpx;
|
width: 200rpx;
|
||||||
height: 200rpx;
|
height: 200rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-top: 60rpx;
|
background: $aider-light-color;
|
||||||
background: #ff9f28;
|
box-shadow: 0 4rpx 24rpx 0 rgba($color: $aider-light-color, $alpha: 1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center; //这个是X轴居中
|
justify-content: center; //这个是X轴居中
|
||||||
align-items: center; //这个是 Y轴居中
|
align-items: center; //这个是 Y轴居中
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cricle {
|
.cricle {
|
||||||
width: 160rpx;
|
width: 160rpx;
|
||||||
height: 160rpx;
|
height: 160rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #ff9f28;
|
background: $aider-light-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 160rpx;
|
line-height: 160rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
}
|
}
|
||||||
|
.current-month {
|
||||||
page {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sign-in {
|
|
||||||
color: #333;
|
|
||||||
.signin-btn-con {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 670rpx;
|
margin: 20rpx 0;
|
||||||
background-image: linear-gradient(180deg, #ff6b35, #ff9f28, #ffcc03);
|
}
|
||||||
|
.box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text {
|
padding:64rpx 32rpx;
|
||||||
color: #fff;
|
background: #fff;
|
||||||
font-size: 28rpx;
|
border-radius: 20rpx;
|
||||||
font-weight: 400;
|
}
|
||||||
}
|
.sign-in {
|
||||||
}
|
color: #333;
|
||||||
|
|
||||||
.date-con {
|
.date-con {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
min-height: 730rpx;
|
min-height: 730rpx;
|
||||||
border-radius: 0.8em;
|
border-radius: 20rpx;
|
||||||
border: 1px solid #ededed;
|
|
||||||
padding: 0 28rpx;
|
padding: 0 28rpx;
|
||||||
transform: translateY(-320rpx);
|
|
||||||
box-shadow: (1px 3px 5px rgba(0, 0, 0, 0.2));
|
|
||||||
}
|
}
|
||||||
|
.day {
|
||||||
|
font-size: 36rpx;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
.date-tit {
|
.date-tit {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 30rpx 0;
|
margin: 0 0 30rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.week {
|
.week {
|
||||||
@@ -429,7 +430,7 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
color: #ff9f28;
|
color: $aider-light-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -471,7 +472,7 @@ page {
|
|||||||
width: 540rpx;
|
width: 540rpx;
|
||||||
height: 130rpx;
|
height: 130rpx;
|
||||||
line-height: 130rpx;
|
line-height: 130rpx;
|
||||||
background: #ff9f28;
|
background: $aider-light-color;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -488,7 +489,7 @@ page {
|
|||||||
|
|
||||||
.mask-con {
|
.mask-con {
|
||||||
width: 540rpx;
|
width: 540rpx;
|
||||||
height: 460rpx;
|
height: 380rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
.sort-active {
|
.sort-active {
|
||||||
border: 1px solid $light-color;
|
border: 1px solid $light-color;
|
||||||
color: $light-color;
|
color: $light-color;
|
||||||
background: $jd-light-color !important;
|
background: $price-light-color !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oldKeyList {
|
.oldKeyList {
|
||||||
|
|||||||
@@ -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,20 +80,21 @@
|
|||||||
</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">
|
||||||
<u-image width="182rpx" height="200rpx" class="imgGoods" :src="item.thumbnail">
|
<u-image width="182rpx" height="200rpx" class="imgGoods" :src="item.content.thumbnail">
|
||||||
<u-loading slot="loading"></u-loading>
|
<u-loading slot="loading"></u-loading>
|
||||||
</u-image>
|
</u-image>
|
||||||
</u-col>
|
</u-col>
|
||||||
<u-col :span="8" @click.native="navigateToDetailPage(item)" class="switchType2">
|
<u-col :span="8" @click.native="navigateToDetailPage(item)" class="switchType2">
|
||||||
<div class="title clamp3" style="">{{ item.goodsName }}</div>
|
<div class="title clamp3" style="">{{ item.content.goodsName }}</div>
|
||||||
<view class="price-box">
|
<view class="price-box">
|
||||||
<div class="price" v-if="item.price!=undefined">
|
<div class="price" v-if="item.content.price!=undefined">
|
||||||
¥<span>{{ formatPrice(item.price )[0] }} </span>.{{
|
¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
|
||||||
formatPrice(item.price )[1]
|
formatPrice(item.content.price )[1]
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
</view>
|
</view>
|
||||||
@@ -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,19 +150,21 @@
|
|||||||
!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.content.thumbnail" mode="aspectFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="goods-detail">
|
<view class="goods-detail">
|
||||||
<div class="title clamp">{{ item.goodsName }}</div>
|
<div class="title clamp">{{ item.content.goodsName }}</div>
|
||||||
<view class="price-box">
|
<view class="price-box">
|
||||||
<div class="price" v-if="item.price!=undefined">
|
<div class="price" v-if="item.content.price!=undefined">
|
||||||
|
|
||||||
¥<span>{{ formatPrice(item.price )[0] }} </span>.{{
|
¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
|
||||||
formatPrice(item.price )[1]
|
formatPrice(item.content.price )[1]
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
</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,
|
||||||
}">
|
}">
|
||||||
@@ -274,7 +283,7 @@ import { getGoodsList, getGoodsRelated } from "@/api/goods.js";
|
|||||||
|
|
||||||
import { getHotKeywords } from "@/api/home.js";
|
import { getHotKeywords } from "@/api/home.js";
|
||||||
import mSearch from "@/components/m-search-revision/m-search-revision.vue";
|
import mSearch from "@/components/m-search-revision/m-search-revision.vue";
|
||||||
|
import storage from "@/utils/storage";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -337,7 +346,6 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(val) {
|
onLoad(val) {
|
||||||
// return false
|
|
||||||
this.init();
|
this.init();
|
||||||
this.initSortGoods();
|
this.initSortGoods();
|
||||||
// 接收分类的数据
|
// 接收分类的数据
|
||||||
@@ -360,9 +368,22 @@ export default {
|
|||||||
this.loadData();
|
this.loadData();
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
//引用mSearch组件,如不需要删除即可
|
|
||||||
mSearch,
|
mSearch,
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
/**
|
||||||
|
* 将搜索的字和热词进行匹配,如果为热词则不改商品搜索关键字
|
||||||
|
*/
|
||||||
|
keyword(val) {
|
||||||
|
if (val) {
|
||||||
|
if (val) {
|
||||||
|
this.defaultKeyword = val;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.defaultKeyword = "请输入搜索商品";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
this.params.pageNumber++;
|
this.params.pageNumber++;
|
||||||
@@ -497,8 +518,9 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
this.loadDefaultKeyword();
|
// 加载搜索记录
|
||||||
this.loadOldKeyword(this.loadIndex);
|
this.loadOldKeyword(this.loadIndex);
|
||||||
|
// 加载热词
|
||||||
this.loadHotKeyword();
|
this.loadHotKeyword();
|
||||||
},
|
},
|
||||||
blur() {
|
blur() {
|
||||||
@@ -511,7 +533,7 @@ export default {
|
|||||||
},
|
},
|
||||||
navigateToDetailPage(item) {
|
navigateToDetailPage(item) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
loadmore() {
|
loadmore() {
|
||||||
@@ -577,8 +599,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) {
|
||||||
@@ -594,15 +624,39 @@ export default {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
//加载热门搜索
|
|
||||||
|
/**
|
||||||
|
* 加载热门搜索
|
||||||
|
* 1.5分钟之后更新缓存
|
||||||
|
* 2.如果有缓存热门关键字则去请求缓存
|
||||||
|
*/
|
||||||
async loadHotKeyword() {
|
async loadHotKeyword() {
|
||||||
this.hotKeywordList = [];
|
this.hotKeywordList = [];
|
||||||
let res = await getHotKeywords();
|
if (
|
||||||
|
!storage.getHotWords().time ||
|
||||||
|
storage.getHotWords().time <= new Date().getTime() / 1000
|
||||||
|
) {
|
||||||
|
// 没有缓存或者第一次进入请求接口保存缓存
|
||||||
|
let res = await getHotKeywords(10);
|
||||||
let keywords = res.data.result;
|
let keywords = res.data.result;
|
||||||
|
|
||||||
keywords.forEach((item) => {
|
keywords.forEach((item) => {
|
||||||
this.hotKeywordList.push(item);
|
this.hotKeywordList.push(item);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let hotData = {
|
||||||
|
time: new Date().getTime() / 1000 + 30 * 5,
|
||||||
|
keywords: keywords,
|
||||||
|
};
|
||||||
|
storage.setHotWords(hotData);
|
||||||
|
} else {
|
||||||
|
let keywords = storage.getHotWords().keywords;
|
||||||
|
|
||||||
|
keywords.forEach((item) => {
|
||||||
|
this.hotKeywordList.push(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.loadDefaultKeyword();
|
||||||
},
|
},
|
||||||
//加载商品 ,带下拉刷新和上滑加载
|
//加载商品 ,带下拉刷新和上滑加载
|
||||||
async loadData(type, loading) {
|
async loadData(type, loading) {
|
||||||
@@ -610,7 +664,7 @@ export default {
|
|||||||
if (type == "refresh") {
|
if (type == "refresh") {
|
||||||
this.goodsList = [];
|
this.goodsList = [];
|
||||||
}
|
}
|
||||||
//没有更多直接返回
|
//没有更多直接返回 #TODO
|
||||||
let goodsList = await getGoodsList(this.params);
|
let goodsList = await getGoodsList(this.params);
|
||||||
|
|
||||||
if (goodsList.data.result.content.length < 10) {
|
if (goodsList.data.result.content.length < 10) {
|
||||||
@@ -620,19 +674,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,
|
||||||
@@ -663,7 +705,6 @@ export default {
|
|||||||
content: "确定清除历史搜索记录?",
|
content: "确定清除历史搜索记录?",
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
|
|
||||||
this.oldKeywordList = [];
|
this.oldKeywordList = [];
|
||||||
uni.removeStorage({
|
uni.removeStorage({
|
||||||
key: "OldKeys",
|
key: "OldKeys",
|
||||||
@@ -674,27 +715,39 @@ 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;
|
||||||
this.keyword = keyword;
|
|
||||||
|
if (!keyword) {
|
||||||
|
/**
|
||||||
|
* 进行空搜索
|
||||||
|
* 第一次搜索如果没有关键词会将热门搜索中第一个热词进行判定
|
||||||
|
* 如果没有热词则会展示一个空词搜索
|
||||||
|
*/
|
||||||
|
keyword = (this.hotKeywordList.length && this.hotKeywordList[0]) || "";
|
||||||
|
}
|
||||||
|
this.defaultKeyword == "请输入搜索商品" ? (keyword = "") : "";
|
||||||
|
// this.keyword = keyword;
|
||||||
|
keyword ? (this.keyword = keyword) : "";
|
||||||
this.saveKeyword(keyword); //保存为历史
|
this.saveKeyword(keyword); //保存为历史
|
||||||
this.isShowSeachGoods = true;
|
this.isShowSeachGoods = true;
|
||||||
this.$refs.mSearch.isShowSeachGoods = true;
|
this.$refs.mSearch.isShowSeachGoods = true;
|
||||||
this.params.keyword = keyword;
|
this.params.keyword = this.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);
|
||||||
},
|
},
|
||||||
//保存关键字到历史记录
|
//保存关键字到历史记录
|
||||||
saveKeyword(keyword) {
|
saveKeyword(keyword) {
|
||||||
|
|
||||||
if (!keyword) return false;
|
if (!keyword) return false;
|
||||||
uni.getStorage({
|
uni.getStorage({
|
||||||
key: "OldKeys",
|
key: "OldKeys",
|
||||||
@@ -715,7 +768,6 @@ export default {
|
|||||||
data: JSON.stringify(OldKeys),
|
data: JSON.stringify(OldKeys),
|
||||||
});
|
});
|
||||||
this.oldKeywordList = OldKeys; //更新历史搜索
|
this.oldKeywordList = OldKeys; //更新历史搜索
|
||||||
|
|
||||||
},
|
},
|
||||||
fail: (e) => {
|
fail: (e) => {
|
||||||
var OldKeys = [keyword];
|
var OldKeys = [keyword];
|
||||||
@@ -727,12 +779,6 @@ export default {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// 搜索关键字
|
|
||||||
getKeywordNumFun(keywords) {
|
|
||||||
this.params.keyword = keywords;
|
|
||||||
this.$set(this.sortParams, "keyword", keywords);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -129,8 +129,8 @@ export default {
|
|||||||
params: {
|
params: {
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
sort: 'createTime',
|
sort: "createTime",
|
||||||
order: 'desc'
|
order: "desc",
|
||||||
},
|
},
|
||||||
|
|
||||||
logParams: {
|
logParams: {
|
||||||
@@ -171,6 +171,8 @@ export default {
|
|||||||
this.logParams = {
|
this.logParams = {
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
|
sort: "createTime",
|
||||||
|
order: "desc",
|
||||||
};
|
};
|
||||||
if (index === 1) {
|
if (index === 1) {
|
||||||
this.logParams.serviceStatus = "APPLY";
|
this.logParams.serviceStatus = "APPLY";
|
||||||
|
|||||||
@@ -462,7 +462,7 @@ page,
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.images-view {
|
.images-view {
|
||||||
padding: 20rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -484,7 +484,12 @@ page,
|
|||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0rpx 20rpx;
|
width: 100%;
|
||||||
|
/deep/ .u-btn{
|
||||||
|
width: 94% !important;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -75,7 +75,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="detail-item">
|
<view class="detail-item">
|
||||||
<view class="title">申请原因:</view>
|
<view class="title">申请原因:</view>
|
||||||
<view class="value">{{ serviceDetail.reason }}</view>
|
<view class="value">{{ reason }}</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="detail-item" v-if="serviceDetail.apply_vouchers">
|
<!-- <view class="detail-item" v-if="serviceDetail.apply_vouchers">
|
||||||
<view class="title">申请凭证:</view>
|
<view class="title">申请凭证:</view>
|
||||||
@@ -195,6 +195,7 @@ import {
|
|||||||
getServiceDetail,
|
getServiceDetail,
|
||||||
getstoreAfterSaleAddress,
|
getstoreAfterSaleAddress,
|
||||||
getAfterSaleLog,
|
getAfterSaleLog,
|
||||||
|
getAfterSaleReason,
|
||||||
} from "@/api/after-sale.js";
|
} from "@/api/after-sale.js";
|
||||||
import UniIcons from "@/components/uni-icons/uni-icons.vue";
|
import UniIcons from "@/components/uni-icons/uni-icons.vue";
|
||||||
|
|
||||||
@@ -204,6 +205,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
reason: "", //申请原因
|
||||||
serviceTypeList: {
|
serviceTypeList: {
|
||||||
// 售后类型
|
// 售后类型
|
||||||
CANCEL: "取消",
|
CANCEL: "取消",
|
||||||
@@ -330,6 +332,20 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取申请原因
|
||||||
|
*/
|
||||||
|
getReasonList(serviceType) {
|
||||||
|
getAfterSaleReason(serviceType).then((res) => {
|
||||||
|
if (res.data.success) {
|
||||||
|
// 1357583466371219456
|
||||||
|
this.reason = res.data.result.filter((item) => {
|
||||||
|
return item.id == this.serviceDetail.reason;
|
||||||
|
})[0].reason;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 初始化详情
|
* 初始化详情
|
||||||
*/
|
*/
|
||||||
@@ -340,7 +356,10 @@ export default {
|
|||||||
getServiceDetail(this.sn).then((res) => {
|
getServiceDetail(this.sn).then((res) => {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
this.serviceDetail = res.data.result;
|
this.serviceDetail = res.data.result;
|
||||||
if (this.serviceDetail.serviceType == "RETURN_GOODS") {
|
if (
|
||||||
|
this.serviceDetail.serviceType == "RETURN_GOODS" ||
|
||||||
|
this.serviceDetail.serviceType === "RETURN_MONEY"
|
||||||
|
) {
|
||||||
this.refundShow = true;
|
this.refundShow = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -349,10 +368,13 @@ export default {
|
|||||||
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
|
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
|
||||||
this.serviceDetail.refundWay === "OFFLINE";
|
this.serviceDetail.refundWay === "OFFLINE";
|
||||||
this.bankShow =
|
this.bankShow =
|
||||||
(this.serviceDetail.serviceType === "RETURN_GOODS" ||
|
this.serviceDetail.serviceType === "RETURN_MONEY" ||
|
||||||
|
((this.serviceDetail.serviceType === "RETURN_GOODS" ||
|
||||||
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
|
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
|
||||||
this.serviceDetail.refundWay === "OFFLINE" &&
|
this.serviceDetail.refundWay === "OFFLINE" &&
|
||||||
this.serviceDetail.accountType === "BANK_TRANSFER";
|
this.serviceDetail.accountType === "BANK_TRANSFER");
|
||||||
|
|
||||||
|
this.getReasonList(this.serviceDetail.serviceType);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -103,7 +103,9 @@ export default {
|
|||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
padding: 26rpx 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.speak-msg {
|
.speak-msg {
|
||||||
padding: 26rpx 32rpx;
|
padding: 26rpx 32rpx;
|
||||||
> span {
|
> span {
|
||||||
@@ -120,6 +122,6 @@ export default {
|
|||||||
padding: 16rpx;
|
padding: 16rpx;
|
||||||
}
|
}
|
||||||
.tips {
|
.tips {
|
||||||
margin: 40rpx 0;
|
margin: 40rpx 32rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,48 +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" size="mini" />
|
<div class="address-list" v-if="address.consigneeAddressPath.length != 0">
|
||||||
|
<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">
|
||||||
@@ -52,17 +42,19 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="group">
|
<view class="group">
|
||||||
<view>
|
<view>
|
||||||
<u-image borderRadius="50%" shape="square" class="head-img" width="81rpx" height="81rpx" :src="masterWay.face || '/static/missing-face.png'"></u-image>
|
<u-image borderRadius="50%" shape="square" class="head-img" width="81rpx" height="81rpx"
|
||||||
|
:src="masterWay.face || '/static/missing-face.png'"></u-image>
|
||||||
<view class="btn-one">团长</view>
|
<view class="btn-one">团长</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="line"> </view>
|
<view class="line"> </view>
|
||||||
<view>
|
<view>
|
||||||
<!-- 如果有最后一名,显示最后一名,没有最后一名,显示等待参团 -->
|
<!-- 如果有最后一名,显示最后一名,没有最后一名,显示等待参团 -->
|
||||||
<u-image class="head-img" v-if="endWay.face" :src="endWay.face" borderRadius="50%" shape="square" width="81rpx" height="81rpx">
|
<u-image class="head-img" v-if="endWay.face" :src="endWay.face" borderRadius="50%" shape="square"
|
||||||
|
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>
|
||||||
|
|
||||||
<view class="wait">{{ endWay.nickname || "等待参团" }}</view>
|
<view class="wait">{{ endWay.nickname || "等待参团" }}</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -71,38 +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" @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" :span="3">
|
<div class="goods-image"
|
||||||
<u-image borderRadius="10rpx" :src="val.goodsSku.thumbnail" alt />
|
@click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" :span="3">
|
||||||
</u-col>
|
<u-image borderRadius="10rpx" width="200rpx" height="200rpx" :src="val.goodsSku.thumbnail" alt />
|
||||||
<u-col :span="9" @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" class="tabC">
|
</div>
|
||||||
<div style="overflow: hidden">
|
<div @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)"
|
||||||
<p class="sp_name">{{ val.goodsSku.goodsName }}</p>
|
class="goods-detail">
|
||||||
<p class="sp_promotion" v-if="val.promotion_tags">
|
<div class="flex">
|
||||||
<view class="sp_tag sp_tag_plain" v-for="(promotion_item, promotion_index) in val.promotion_tags" :key="promotion_index">{{ promotion_item }}</view>
|
<p class="goods-name">{{ val.goodsSku.goodsName }}</p>
|
||||||
</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>
|
||||||
</u-col>
|
<span class="goods-price">{{formatPrice(val.goodsSku.price)[0]}}</span>
|
||||||
</u-row>
|
<span>.{{formatPrice(val.goodsSku.price)[1] }}</span>
|
||||||
|
</p>
|
||||||
<u-row>
|
</div>
|
||||||
<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()">
|
||||||
@@ -110,35 +94,25 @@
|
|||||||
<span v-else>不开发票</span>
|
<span v-else>不开发票</span>
|
||||||
</u-col>
|
</u-col>
|
||||||
</u-row>
|
</u-row>
|
||||||
|
<u-row>
|
||||||
|
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :offset="0" :span="9" @click="shippingFlag = true">配送
|
||||||
|
</u-col>
|
||||||
|
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="3" textAlign="right" @click="shippingFlag = true">
|
||||||
|
{{shippingMethod.find(e=>{ return e.value == shippingText; }).label }}
|
||||||
|
</u-col>
|
||||||
|
</u-row>
|
||||||
|
<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>
|
||||||
|
|
||||||
<!-- 发票信息 -->
|
<!-- 发票信息 -->
|
||||||
<invoices :res="receiptList" @callbackInvoice="callbackInvoice" v-if="invoiceFlag" />
|
<invoices :res="receiptList" @callbackInvoice="callbackInvoice" v-if="invoiceFlag" />
|
||||||
<u-select v-model="shippingFlag" :list="shippingMethod"></u-select>
|
<u-select v-model="shippingFlag" :list="shippingMethod"></u-select>
|
||||||
|
|
||||||
<!-- 优惠券 -->
|
|
||||||
<div class="box box4">
|
|
||||||
<u-row>
|
|
||||||
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :offset="0" :span="9" @click="shippingFlag = true">配送方式</u-col>
|
|
||||||
<u-col v-if="orderMessage.cartTypeEnum != 'VIRTUAL'" :span="3" textAlign="right" @click="shippingFlag = true">
|
|
||||||
{{ shippingMethod.find(e=>{ return e.value == shippingText; }).label }}
|
|
||||||
</u-col>
|
|
||||||
</u-row>
|
|
||||||
<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()">
|
|
||||||
{{ couponNums || "0" }}张可用
|
|
||||||
<u-icon name="arrow-right"></u-icon>
|
|
||||||
</u-col>
|
|
||||||
</u-row>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="box box5" v-if="orderMessage.priceDetailDTO">
|
<div class="box box5" v-if="orderMessage.priceDetailDTO">
|
||||||
<div>
|
<div>
|
||||||
<u-row>
|
<u-row>
|
||||||
@@ -152,47 +126,64 @@
|
|||||||
<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" text="包邮" type="warning" size="mini" mode="plain" shape="circle" />
|
<span v-if="orderMessage.priceDetailDTO.freightPrice == 0">包邮</span>
|
||||||
<span>¥{{
|
<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" :text="`优惠 ${orderMessage.priceDetailDTO.discountPrice} 元`" type="warning"
|
<span
|
||||||
size="mini" mode="plain" shape="circle" />
|
v-if="orderMessage.priceDetailDTO.discountPrice">-¥{{orderMessage.priceDetailDTO.discountPrice | unitPrice}}</span>
|
||||||
<span>{{
|
<span v-else>0.00</span>
|
||||||
orderMessage.priceDetailDTO.discountPrice | unitPrice
|
|
||||||
}}</span>
|
|
||||||
</u-col>
|
</u-col>
|
||||||
</u-row>
|
</u-row>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 配送地区没有提示 -->
|
<!-- 配送地区没有提示 -->
|
||||||
<div class="notSupportFreight" v-if="notSupportFreight.length !=0">
|
<div class="notSupportFreight" v-if="notSupportFreight.length !=0">
|
||||||
<u-notice-bar style="width:100%" :volume-icon="false" mode="horizontal" :list="notSupportFreightGoodsList"></u-notice-bar>
|
<u-notice-bar style="width:100%" :volume-icon="false" mode="horizontal" :list="notSupportFreightGoodsList">
|
||||||
|
</u-notice-bar>
|
||||||
</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 class="number">
|
<span>¥</span>
|
||||||
¥
|
<span class="price">{{ formatPrice(orderMessage.priceDetailDTO.flowPrice)[0] }}</span>
|
||||||
<span>{{ orderMessage.priceDetailDTO.billPrice | unitPrice }}</span>
|
<span>.{{formatPrice(orderMessage.priceDetailDTO.flowPrice)[1] }} </span>
|
||||||
</span>
|
</div>
|
||||||
|
<span v-else class="number"><span
|
||||||
|
style="margin-right:10rpx;">{{orderMessage.priceDetailDTO.payPoint | unitPrice }}</span>积分</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="navRiv" @click="createTradeFun()">
|
<div class="navRiv" @click="createTradeFun()">
|
||||||
<!-- #ifndef MP-WEIXIN -->
|
<!-- #ifndef MP-WEIXIN -->
|
||||||
@@ -322,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;
|
||||||
@@ -509,8 +507,6 @@ export default {
|
|||||||
|
|
||||||
// 获取结算参数
|
// 获取结算参数
|
||||||
getOrderList() {
|
getOrderList() {
|
||||||
// 获取购物车可用优惠券
|
|
||||||
this.getCartsCouponNums();
|
|
||||||
// 获取结算参数
|
// 获取结算参数
|
||||||
API_Trade.getCheckoutParams(this.routerVal.way).then((res) => {
|
API_Trade.getCheckoutParams(this.routerVal.way).then((res) => {
|
||||||
res.data.result.cartList.forEach((item, index) => {
|
res.data.result.cartList.forEach((item, index) => {
|
||||||
@@ -520,6 +516,12 @@ export default {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
this.orderMessage = res.data.result;
|
this.orderMessage = res.data.result;
|
||||||
|
/**
|
||||||
|
* 为了避免路径传值在h5中超出限制问题
|
||||||
|
* 这块将可用的优惠券以及不可用的优惠券放入到vuex里面进行存储
|
||||||
|
*/
|
||||||
|
this.$store.state.canUseCoupons = res.data.result.canUseCoupons;
|
||||||
|
this.$store.state.cantUseCoupons = res.data.result.cantUseCoupons;
|
||||||
|
|
||||||
if (!res.data.result.memberAddress.id) {
|
if (!res.data.result.memberAddress.id) {
|
||||||
// 获取会员默认地址
|
// 获取会员默认地址
|
||||||
@@ -543,20 +545,20 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/**购物车可用优惠券 */
|
|
||||||
getCartsCouponNums() {
|
|
||||||
API_Trade.getCartCouponNum(this.routerVal.way).then((res) => {
|
|
||||||
if (res.data.success) {
|
|
||||||
this.couponNums = res.data.result;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
//
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</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;
|
||||||
}
|
}
|
||||||
@@ -567,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 {
|
||||||
@@ -621,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -641,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;
|
||||||
@@ -662,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 {
|
||||||
@@ -699,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;
|
||||||
@@ -752,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;
|
||||||
@@ -772,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 {
|
||||||
@@ -792,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 {
|
||||||
@@ -821,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: #f7f7f7;
|
||||||
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;
|
||||||
}
|
}
|
||||||
@@ -843,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>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 367 B After Width: | Height: | Size: 367 B |
@@ -79,7 +79,11 @@ export default {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.$api.msg("暂无发票可预览");
|
uni.showToast({
|
||||||
|
title: "暂无发票可预览",
|
||||||
|
duration: 2000,
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
download() {
|
download() {
|
||||||
@@ -95,7 +99,11 @@ export default {
|
|||||||
uni.saveFile({
|
uni.saveFile({
|
||||||
tempFilePath: tempFilePath,
|
tempFilePath: tempFilePath,
|
||||||
success: function (res) {
|
success: function (res) {
|
||||||
_this.$api.msg("发票已下载到" + res.savedFilePath);
|
uni.showToast({
|
||||||
|
title: "发票已下载到" + res.savedFilePath,
|
||||||
|
duration: 2000,
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -103,7 +111,11 @@ export default {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.$api.msg("暂无发票可下载");
|
uni.showToast({
|
||||||
|
title: "暂无发票可下载",
|
||||||
|
duration: 2000,
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -193,13 +205,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 34rpx;
|
|
||||||
margin: 60rpx 20rpx;
|
|
||||||
&::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.u-cell {
|
.u-cell {
|
||||||
padding: 35rpx 20rpx;
|
padding: 35rpx 20rpx;
|
||||||
height: 110rpx;
|
height: 110rpx;
|
||||||
|
|||||||
@@ -219,6 +219,7 @@ export default {
|
|||||||
if (status == 0) {
|
if (status == 0) {
|
||||||
this.loadData(status);
|
this.loadData(status);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
@@ -504,6 +505,9 @@ page,
|
|||||||
|
|
||||||
.swiper-box {
|
.swiper-box {
|
||||||
height: calc(100vh - 40px);
|
height: calc(100vh - 40px);
|
||||||
|
// #ifdef H5
|
||||||
|
height: calc(100vh - 40px - 44px);
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-scroll-content {
|
.list-scroll-content {
|
||||||
|
|||||||
@@ -6,15 +6,17 @@
|
|||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item class="cell code" label-width="120" prop="code" label="验证码">
|
<u-form-item class="cell code" label-width="120" prop="code" label="验证码">
|
||||||
<div style="display:flex; with:100%;">
|
<div style="display:flex; width:100%;">
|
||||||
<u-input v-model="codeForm.code" placeholder="请输入验证码" />
|
<u-input maxlength="6" v-model="codeForm.code" placeholder="请输入验证码" />
|
||||||
<u-verification-code keep-running unique-key="page-login" :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
|
<u-verification-code keep-running unique-key="page-login" :seconds="seconds" @end="end" @start="start"
|
||||||
<view @tap="getCode" class="text-tips">{{ tips }}</view>
|
ref="uCode" @change="codeChange"></u-verification-code>
|
||||||
|
<view @tap="getCode" :style="{color:aiderLightColor}" class="text-tips">{{ tips }}</view>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<view class="submit" @click="submit">登录</view>
|
<view class="submit bg-linear-gradient" @click="submit">登录</view>
|
||||||
<view class="text-tips cell" @click="clickLogin">一键登录</view>
|
<view :style="{color:aiderLightColor}" class="text-tips cell" @click="clickLogin">一键登录</view>
|
||||||
<myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification" business="LOGIN" />
|
<myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification" business="LOGIN" />
|
||||||
</u-form>
|
</u-form>
|
||||||
</div>
|
</div>
|
||||||
@@ -34,6 +36,7 @@ export default {
|
|||||||
props: ["status"], //是否勾选 《用户隐私》和《隐私政策》
|
props: ["status"], //是否勾选 《用户隐私》和《隐私政策》
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
aiderLightColor: this.$aiderLightColor,
|
||||||
uuid,
|
uuid,
|
||||||
flage: false, //是否验证码验证
|
flage: false, //是否验证码验证
|
||||||
codeFlag: true, //验证开关,用于是否展示验证码
|
codeFlag: true, //验证开关,用于是否展示验证码
|
||||||
@@ -71,7 +74,6 @@ export default {
|
|||||||
},
|
},
|
||||||
// 必须要在onReady生命周期setRules,因为onLoad生命周期组件可能尚未创建完毕
|
// 必须要在onReady生命周期setRules,因为onLoad生命周期组件可能尚未创建完毕
|
||||||
mounted() {
|
mounted() {
|
||||||
// whetherNavigate();
|
|
||||||
this.$refs.validateCodeForm.setRules(this.codeRules);
|
this.$refs.validateCodeForm.setRules(this.codeRules);
|
||||||
/**
|
/**
|
||||||
* 条件编译判断当前客户端类型
|
* 条件编译判断当前客户端类型
|
||||||
@@ -80,6 +82,7 @@ export default {
|
|||||||
this.clientType = "H5";
|
this.clientType = "H5";
|
||||||
//#endif
|
//#endif
|
||||||
//#ifdef APP-PLUS
|
//#ifdef APP-PLUS
|
||||||
|
|
||||||
this.clientType = "APP";
|
this.clientType = "APP";
|
||||||
//#endif
|
//#endif
|
||||||
},
|
},
|
||||||
@@ -189,6 +192,7 @@ export default {
|
|||||||
// 跳转到一键登录
|
// 跳转到一键登录
|
||||||
clickLogin() {
|
clickLogin() {
|
||||||
this.$emit("open", "click");
|
this.$emit("open", "click");
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**点击验证码*/
|
/**点击验证码*/
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
margin: 40rpx 0;
|
margin: 40rpx 0;
|
||||||
}
|
}
|
||||||
.login-ball {
|
.login-ball {
|
||||||
background-image: linear-gradient(25deg, #fa123b, #ff6b35, #ff9f28, #ffcc03);
|
|
||||||
border-bottom-left-radius: 300rpx;
|
border-bottom-left-radius: 300rpx;
|
||||||
height: 400rpx;
|
height: 400rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -43,25 +42,22 @@ span {
|
|||||||
.submit {
|
.submit {
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
|
|
||||||
background-image: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03);
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
|
margin-top: 20rpx;
|
||||||
width: 200rpx;
|
width: 200rpx;
|
||||||
height: 200rpx;
|
height: 200rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: scale(2.5);
|
|
||||||
}
|
}
|
||||||
.logo-cell {
|
.logo-cell {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.text-tips {
|
.text-tips {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ff9f28;
|
|
||||||
}
|
}
|
||||||
.tips {
|
.tips {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -1,12 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<view v-if="mpWechatLogin">
|
<view>
|
||||||
|
<!-- -->
|
||||||
|
<view v-if="codeLogin">
|
||||||
<!-- 背景 -->
|
<!-- 背景 -->
|
||||||
<view class="login-ball small"></view>
|
<view class="login-ball bg-linear-gradient small"></view>
|
||||||
|
|
||||||
<view class="logo-cell">
|
<view class="logo-cell">
|
||||||
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
<image class="logo" :src="config.logo" mode="aspectFit"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="title">LiLi商城</view>
|
<view class="title">{{config.name}}</view>
|
||||||
|
|
||||||
<!-- 验证码登录 -->
|
<!-- 验证码登录 -->
|
||||||
<codeLogin @open="open" :status="value" v-if="login && loginData.code" />
|
<codeLogin @open="open" :status="value" v-if="login && loginData.code" />
|
||||||
@@ -17,12 +19,16 @@
|
|||||||
<!-- 隐私政策 -->
|
<!-- 隐私政策 -->
|
||||||
<div class="privacy">
|
<div class="privacy">
|
||||||
<u-checkbox-group :icon-size="24" width="45rpx">
|
<u-checkbox-group :icon-size="24" width="45rpx">
|
||||||
<u-checkbox v-model="value" active-color="rgb(255, 107, 53)"></u-checkbox>
|
<u-checkbox v-model="value" :active-color="lightColor"></u-checkbox>
|
||||||
|
|
||||||
</u-checkbox-group>
|
</u-checkbox-group>
|
||||||
同意<span @click="handleClick('user')">《用户协议》</span>和<span @click="handleClick('privacy')">《隐私政策》</span>
|
同意<span @click="handleClick('user')">《用户协议》</span>和<span @click="handleClick('privacy')">《隐私政策》</span>
|
||||||
</div>
|
</div>
|
||||||
</view>
|
</view>
|
||||||
|
<view v-if="wechatLogin">
|
||||||
|
<wechatH5Login />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import codeLogin from "./codeLogin";
|
import codeLogin from "./codeLogin";
|
||||||
@@ -31,25 +37,10 @@ import { getUserInfo } from "@/api/members";
|
|||||||
import storage from "@/utils/storage.js";
|
import storage from "@/utils/storage.js";
|
||||||
import { loginCallback } from "@/api/connect.js";
|
import { loginCallback } from "@/api/connect.js";
|
||||||
import { webConnect } from "@/api/connect.js";
|
import { webConnect } from "@/api/connect.js";
|
||||||
|
import config from "@/config/config";
|
||||||
|
import wechatH5Login from "./wechatH5Login.vue";
|
||||||
export default {
|
export default {
|
||||||
onShow() {
|
onShow() {
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
this.mpWechatLogin = false;
|
|
||||||
if (this.$options.filters.isLogin("auth")) {
|
|
||||||
getCurrentPages().length > 1
|
|
||||||
? uni.navigateBack({
|
|
||||||
delta: getCurrentPages().length - 2,
|
|
||||||
})
|
|
||||||
: uni.switchTab({
|
|
||||||
url: "/pages/tabbar/home/index",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: "/pages/passport/wechatMPLogin",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
//#ifdef H5
|
//#ifdef H5
|
||||||
let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
|
let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
|
||||||
if (isWXBrowser) {
|
if (isWXBrowser) {
|
||||||
@@ -64,7 +55,10 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
mpWechatLogin: true, //是否加载微信登录
|
config,
|
||||||
|
lightColor: this.$lightColor,
|
||||||
|
wechatLogin: false, //是否加载微信公众号登录
|
||||||
|
codeLogin: false, //是否加载正常验证码登录
|
||||||
value: true, //隐私政策
|
value: true, //隐私政策
|
||||||
loginData: {
|
loginData: {
|
||||||
code: true, //验证码登录
|
code: true, //验证码登录
|
||||||
@@ -77,6 +71,23 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
codeLogin,
|
codeLogin,
|
||||||
onClickLogin,
|
onClickLogin,
|
||||||
|
wechatH5Login,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// #ifndef APP-PLUS
|
||||||
|
//判断是否微信浏览器
|
||||||
|
var ua = window.navigator.userAgent.toLowerCase();
|
||||||
|
if (ua.match(/MicroMessenger/i) == "micromessenger") {
|
||||||
|
this.wechatLogin = true;
|
||||||
|
return;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.codeLogin = true;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.codeLogin = true;
|
||||||
|
// #endif
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
@@ -100,7 +111,6 @@ export default {
|
|||||||
//联合信息返回登录
|
//联合信息返回登录
|
||||||
stateLogin(state) {
|
stateLogin(state) {
|
||||||
loginCallback(state).then((res) => {
|
loginCallback(state).then((res) => {
|
||||||
|
|
||||||
let data = res.data;
|
let data = res.data;
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
storage.setAccessToken(data.result.accessToken);
|
storage.setAccessToken(data.result.accessToken);
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
.verification {
|
|
||||||
}
|
|
||||||
/deep/ .u-form-item {
|
/deep/ .u-form-item {
|
||||||
margin: 40rpx 0 !important;
|
margin: 40rpx 0 !important;
|
||||||
padding: 40rpx 0 !important;
|
padding: 40rpx 0 !important;
|
||||||
|
|||||||
@@ -3,11 +3,13 @@
|
|||||||
<u-form ref="validateCodeForm">
|
<u-form ref="validateCodeForm">
|
||||||
<div class="login-list">
|
<div class="login-list">
|
||||||
<!-- 循环出当前可使用的第三方登录模式 -->
|
<!-- 循环出当前可使用的第三方登录模式 -->
|
||||||
<div class="login-item" v-for="(item,index) in loginList" :key="index">
|
<div :style="{background:item.color}" class="login-item" v-for="(item,index) in loginList" :key="index">
|
||||||
<u-icon :color="item.color" size="80" :name="item.icon" @click="navigateLogin(item)"></u-icon>
|
<u-icon v-if="item.title!='APPLE'" color="#fff" size="42" :name="item.icon" @click="navigateLogin(item)"></u-icon>
|
||||||
|
<u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)" width="80" height="80" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<view class="text-tips cell" @click="clickCodeLogin">账号密码登录</view>
|
|
||||||
|
<view :style="{color:aiderLightColor}" class="text-tips cell" @click="clickCodeLogin">账号密码登录</view>
|
||||||
</u-form>
|
</u-form>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -22,15 +24,16 @@ import api from "@/config/api.js";
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
aiderLightColor: this.$aiderLightColor,
|
||||||
loginList: [
|
loginList: [
|
||||||
{
|
{
|
||||||
icon: "weixin-circle-fill",
|
icon: "weixin-fill",
|
||||||
color: "#00a327",
|
color: "#00a327",
|
||||||
title: "微信",
|
title: "微信",
|
||||||
code: "WECHAT",
|
code: "WECHAT",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "qq-circle-fill",
|
icon: "qq-fill",
|
||||||
color: "#38ace9",
|
color: "#38ace9",
|
||||||
title: "QQ",
|
title: "QQ",
|
||||||
code: "QQ",
|
code: "QQ",
|
||||||
@@ -117,23 +120,23 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
/** 根据参数显示登录模块 */
|
/** 根据参数显示登录模块 */
|
||||||
methodFilter(code) {
|
methodFilter(code) {
|
||||||
// let way = [];
|
let way = [];
|
||||||
// this.loginList.forEach((item) => {
|
this.loginList.forEach((item) => {
|
||||||
// if (code.length != 0) {
|
if (code.length != 0) {
|
||||||
// code.forEach((val) => {
|
code.forEach((val) => {
|
||||||
// if (item.code == val) {
|
if (item.code == val) {
|
||||||
// way.push(item);
|
way.push(item);
|
||||||
// }
|
}
|
||||||
// });
|
});
|
||||||
// } else {
|
} else {
|
||||||
// uni.showToast({
|
uni.showToast({
|
||||||
// title: '配置有误请联系管理员',
|
title: "配置有误请联系管理员",
|
||||||
// duration: 2000,
|
duration: 2000,
|
||||||
// icon:"none"
|
icon: "none",
|
||||||
// });
|
});
|
||||||
// }
|
}
|
||||||
// });
|
});
|
||||||
// this.loginList = way;
|
this.loginList = way;
|
||||||
},
|
},
|
||||||
/**跳转到登录页面 */
|
/**跳转到登录页面 */
|
||||||
navigateLogin(connectLogin) {
|
navigateLogin(connectLogin) {
|
||||||
@@ -149,7 +152,7 @@ export default {
|
|||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
let code = connectLogin.code;
|
let code = connectLogin.code;
|
||||||
let buyer = api.buyer;
|
let buyer = api.buyer;
|
||||||
window.open(buyer+`/connect/login/web/`+code, "_self");
|
window.open(buyer + `/connect/login/web/` + code, "_self");
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
this.nonH5OpenId(connectLogin);
|
this.nonH5OpenId(connectLogin);
|
||||||
@@ -240,10 +243,25 @@ export default {
|
|||||||
});
|
});
|
||||||
// 执行登录
|
// 执行登录
|
||||||
getUserInfo().then((user) => {
|
getUserInfo().then((user) => {
|
||||||
|
if (user.data.success) {
|
||||||
|
/**
|
||||||
|
* 个人信息存储到缓存userInfo中
|
||||||
|
*/
|
||||||
storage.setUserInfo(user.data.result);
|
storage.setUserInfo(user.data.result);
|
||||||
storage.setHasLogin(true);
|
storage.setHasLogin(true);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算出当前router路径
|
||||||
|
* 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
|
||||||
|
* 2.都不满足返回跳转页面
|
||||||
|
*/
|
||||||
|
whetherNavigate();
|
||||||
|
} else {
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/tabbar/home/index",
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
whetherNavigate()
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -259,22 +277,20 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import url("./login.scss");
|
@import url("./login.scss");
|
||||||
|
|
||||||
.submit {
|
.login-list {
|
||||||
margin: 80rpx 0 40rpx 0;
|
margin: 140rpx 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-list {
|
.login-item {
|
||||||
|
width: 80rpx;
|
||||||
|
|
||||||
|
border-radius: 10rpx;
|
||||||
|
height: 80rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 40rpx 0;
|
justify-content: center;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
|
|
||||||
.login-item {
|
|
||||||
font-size: 24rpx;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
margin: 4rpx 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
153
pages/passport/wechatH5Login.vue
Normal file
153
pages/passport/wechatH5Login.vue
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<u-navbar :custom-back="back" title="公众网页登录"></u-navbar>
|
||||||
|
<view class="wx-auth-container">
|
||||||
|
<div class="box">
|
||||||
|
<view class="logo-info">
|
||||||
|
<text class="title">欢迎进入{{ projectName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="small-tips">
|
||||||
|
<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
|
||||||
|
<view>您的公开信息(昵称、头像)</view>
|
||||||
|
</view>
|
||||||
|
<view class="btns">
|
||||||
|
<button @click="getUserProfile()" class="btn-auth">使用微信授权</button>
|
||||||
|
<div @click="backToHome" class="btn-callback">暂不登录</div>
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
|
||||||
|
import config from "@/config/config";
|
||||||
|
import api from "@/config/api.js";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 授权信息展示,商城名称
|
||||||
|
projectName: config.name,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
//微信小程序进入页面,先获取code,否则几率出现code和后续交互数据不对应情况
|
||||||
|
mounted() {
|
||||||
|
// 小程序默认分享
|
||||||
|
uni.showShareMenu({ withShareTicket: true });
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
back() {
|
||||||
|
whetherNavigate();
|
||||||
|
},
|
||||||
|
getUserProfile() {
|
||||||
|
let code = "WECHAT";
|
||||||
|
let buyer = api.buyer;
|
||||||
|
window.open(buyer + `/connect/login/web/` + code, "_self");
|
||||||
|
},
|
||||||
|
backToHome() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: `/pages/tabbar/home/index`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
.wx-auth-container {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
margin-top: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-info {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 20rpx;
|
||||||
|
flex-direction: column;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-transform: scale(2.5);
|
||||||
|
transform: scale(2.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
text.title,
|
||||||
|
text.shop {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 60rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
margin: 0 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文字提示*/
|
||||||
|
.small-tips {
|
||||||
|
width: 94%;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin: 0 0 20rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-auth {
|
||||||
|
width: 92%;
|
||||||
|
background: $light-color;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0 auto 40rpx;
|
||||||
|
border-radius: 100px;
|
||||||
|
animation: mymove 5s infinite;
|
||||||
|
-webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
|
||||||
|
animation-direction: alternate; /*轮流反向播放动画。*/
|
||||||
|
animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
||||||
|
/* Safari 和 Chrome */
|
||||||
|
-webkit-animation: mymove 5s infinite;
|
||||||
|
-webkit-animation-direction: alternate; /*轮流反向播放动画。*/
|
||||||
|
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
||||||
|
}
|
||||||
|
.btn-callback {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
background: #ededed;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
border-radius: 100px;
|
||||||
|
width: 92%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
margin-top: 100rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: scale(1); /*开始为原始大小*/
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: scale(1.1); /*放大1.1倍*/
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -12,14 +12,15 @@
|
|||||||
<view class="wx-auth-container">
|
<view class="wx-auth-container">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<view class="logo-info">
|
<view class="logo-info">
|
||||||
<text class="title">欢迎进入{{ projectName }}商城</text>
|
<text class="title">欢迎进入{{ projectName }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="small-tips">
|
<view class="small-tips">
|
||||||
<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
|
<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
|
||||||
<view>您的公开信息(昵称、头像)</view>
|
<view>您的公开信息(昵称、头像)</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="btns">
|
<view class="btns">
|
||||||
<button type="primary" bindtap="getUserProfile" @click="getUserProfile()" class="btn-auth">确认微信授权</button>
|
<button type="primary" bindtap="getUserProfile" @click="getUserProfile()" class="btn-auth">使用微信授权</button>
|
||||||
|
<div @click="backToHome" class="btn-callback">暂不登录</div>
|
||||||
</view>
|
</view>
|
||||||
</div>
|
</div>
|
||||||
</view>
|
</view>
|
||||||
@@ -32,13 +33,14 @@ import { mpAutoLogin } from "@/api/connect.js";
|
|||||||
import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
|
import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
|
||||||
import { getUserInfo } from "@/api/members";
|
import { getUserInfo } from "@/api/members";
|
||||||
import storage from "@/utils/storage.js";
|
import storage from "@/utils/storage.js";
|
||||||
|
import config from '@/config/config'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 是否展示手机号码授权弹窗,默认第一步不展示,要先获取用户基础信息
|
// 是否展示手机号码授权弹窗,默认第一步不展示,要先获取用户基础信息
|
||||||
phoneAuthPopup: false,
|
phoneAuthPopup: false,
|
||||||
// 授权信息展示,商城名称
|
// 授权信息展示,商城名称
|
||||||
projectName: "LiLi",
|
projectName: config.name,
|
||||||
//微信返回信息,用于揭秘信息,获取sessionkey
|
//微信返回信息,用于揭秘信息,获取sessionkey
|
||||||
code: "",
|
code: "",
|
||||||
//微信昵称
|
//微信昵称
|
||||||
@@ -50,7 +52,6 @@ export default {
|
|||||||
|
|
||||||
//微信小程序进入页面,先获取code,否则几率出现code和后续交互数据不对应情况
|
//微信小程序进入页面,先获取code,否则几率出现code和后续交互数据不对应情况
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
// 小程序默认分享
|
// 小程序默认分享
|
||||||
uni.showShareMenu({ withShareTicket: true });
|
uni.showShareMenu({ withShareTicket: true });
|
||||||
|
|
||||||
@@ -73,7 +74,12 @@ export default {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
back() {
|
back() {
|
||||||
whetherNavigate('wx');
|
whetherNavigate("wx");
|
||||||
|
},
|
||||||
|
backToHome() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: `/pages/tabbar/home/index`,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
//获取用户信息
|
//获取用户信息
|
||||||
getUserProfile(e) {
|
getUserProfile(e) {
|
||||||
@@ -129,11 +135,10 @@ export default {
|
|||||||
getUserInfo().then((user) => {
|
getUserInfo().then((user) => {
|
||||||
storage.setUserInfo(user.data.result);
|
storage.setUserInfo(user.data.result);
|
||||||
storage.setHasLogin(true);
|
storage.setHasLogin(true);
|
||||||
setTimeout(() => {
|
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
delta: 1,
|
delta: 1,
|
||||||
});
|
});
|
||||||
}, 500);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -218,27 +223,55 @@ text.shop {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.register {
|
.register {
|
||||||
color: #00a327 !important;
|
color: $weChat-color !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-auth {
|
.btn-auth {
|
||||||
width: 92%;
|
width: 92%;
|
||||||
margin: 0 auto 100rpx;
|
margin: 0 auto 40rpx;
|
||||||
|
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
|
animation: mymove 5s infinite;
|
||||||
|
-webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
|
||||||
|
animation-direction: alternate; /*轮流反向播放动画。*/
|
||||||
|
animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
||||||
|
/* Safari 和 Chrome */
|
||||||
|
-webkit-animation: mymove 5s infinite;
|
||||||
|
-webkit-animation-direction: alternate; /*轮流反向播放动画。*/
|
||||||
|
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
||||||
|
}
|
||||||
|
.btn-callback {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
background: #ededed;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
border-radius: 100px;
|
||||||
|
width: 92%;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
margin-top: 100rpx;
|
margin-top: 100rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: scale(1); /*开始为原始大小*/
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: scale(1.1); /*放大1.1倍*/
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -7,9 +7,11 @@
|
|||||||
<!-- 仅h5有效 打开App -->
|
<!-- 仅h5有效 打开App -->
|
||||||
|
|
||||||
<!-- 分享 -->
|
<!-- 分享 -->
|
||||||
<shares v-if="shareFlage && goodsDetail.id" :skuId="this.routerVal.id" :goodsId="this.routerVal.goodsId" :link="'/pages/product/goods?id='+this.routerVal.id+'&goodsId='+this.routerVal.goodsId"
|
<shares v-if="shareFlage && goodsDetail.id" :skuId="this.routerVal.id" :goodsId="this.routerVal.goodsId"
|
||||||
|
:link="'/pages/product/goods?id='+this.routerVal.id+'&goodsId='+this.routerVal.goodsId"
|
||||||
:thumbnail="goodsDetail.thumbnail" :goodsName="goodsDetail.goodsName" type="goods" @close="shareFlage = false" />
|
:thumbnail="goodsDetail.thumbnail" :goodsName="goodsDetail.goodsName" type="goods" @close="shareFlage = false" />
|
||||||
<popups v-model="popupsSwitch" @tapPopup="handleNavbarList" :popData="navbarListData" :x="navbarListX" :y="navbarListY" placement="top-start" />
|
<popups v-model="popupsSwitch" @tapPopup="handleNavbarList" :popData="navbarListData" :x="navbarListX"
|
||||||
|
:y="navbarListY" placement="top-start" />
|
||||||
<view class="index">
|
<view class="index">
|
||||||
|
|
||||||
<!-- topBar -->
|
<!-- topBar -->
|
||||||
@@ -22,7 +24,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scroll-hide'">
|
<div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scroll-hide'">
|
||||||
<div class="headerRow">
|
<div class="headerRow">
|
||||||
<div class="nav-item" v-for="header in headerList" :key="header.id" :class="{ cur: scrollId === header.id }" @click="headerTab(header.id)">
|
<div class="nav-item" v-for="header in headerList" :key="header.id"
|
||||||
|
:class="{ cur: scrollId === header.id }" @click="headerTab(header.id)">
|
||||||
{{ header.text }}
|
{{ header.text }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -30,7 +33,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</u-navbar>
|
</u-navbar>
|
||||||
|
|
||||||
<u-navbar :border-bottom="false" v-show="!headerFlag" class="header-only-back" :background="navbarOnlyBack" :is-back="false">
|
<u-navbar :border-bottom="false" v-show="!headerFlag" class="header-only-back" :background="navbarOnlyBack"
|
||||||
|
:is-back="false">
|
||||||
<div>
|
<div>
|
||||||
<div class="bg-back">
|
<div class="bg-back">
|
||||||
<u-icon size="40" @click="back()" name="arrow-left" class="icon-back"></u-icon>
|
<u-icon size="40" @click="back()" name="arrow-left" class="icon-back"></u-icon>
|
||||||
@@ -42,7 +46,8 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
|
<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
|
||||||
<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scroll-page" :scroll-top="tabScrollTop" @scroll="pageScroll">
|
<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scroll-page"
|
||||||
|
:scroll-top="tabScrollTop" @scroll="pageScroll">
|
||||||
<view>
|
<view>
|
||||||
<!-- 轮播图 -->
|
<!-- 轮播图 -->
|
||||||
<GoodsSwiper id="main1" :res="imgList" />
|
<GoodsSwiper id="main1" :res="imgList" />
|
||||||
@@ -58,7 +63,8 @@
|
|||||||
{{ goodsDetail.goodsName || "" }}
|
{{ goodsDetail.goodsName || "" }}
|
||||||
</view>
|
</view>
|
||||||
<view class="favorite" @click="clickFavorite(goodsDetail.id)">
|
<view class="favorite" @click="clickFavorite(goodsDetail.id)">
|
||||||
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'" :name="favorite ? 'heart-fill' : 'heart'"></u-icon>
|
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'" :name="favorite ? 'heart-fill' : 'heart'">
|
||||||
|
</u-icon>
|
||||||
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{ favorite ? "已收藏" : "收藏" }}</view>
|
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{ favorite ? "已收藏" : "收藏" }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -88,7 +94,8 @@
|
|||||||
<view>分享</view>
|
<view>分享</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="icons" @click="clickFavorite(goodsDetail.id)">
|
<view class="icons" @click="clickFavorite(goodsDetail.id)">
|
||||||
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'" :name="favorite ? 'heart-fill' : 'heart'"></u-icon>
|
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'"
|
||||||
|
:name="favorite ? 'heart-fill' : 'heart'"></u-icon>
|
||||||
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{ favorite ? "已收藏" : "收藏" }}</view>
|
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{ favorite ? "已收藏" : "收藏" }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -153,7 +160,8 @@
|
|||||||
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />
|
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />
|
||||||
|
|
||||||
<!-- 宝贝详情 -->
|
<!-- 宝贝详情 -->
|
||||||
<GoodsIntro id="main9" :res="goodsDetail" :goodsParams="goodsParams" :goodsId="goodsDetail.goodsId" v-if="goodsDetail.id" />
|
<GoodsIntro id="main9" :res="goodsDetail" :goodsParams="goodsParams" :goodsId="goodsDetail.goodsId"
|
||||||
|
v-if="goodsDetail.id" />
|
||||||
|
|
||||||
<!-- 宝贝推荐 -->
|
<!-- 宝贝推荐 -->
|
||||||
<GoodsRecommend id="main11" :res="likeGoodsList" />
|
<GoodsRecommend id="main11" :res="likeGoodsList" />
|
||||||
@@ -178,7 +186,8 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- 正常结算页面 -->
|
<!-- 正常结算页面 -->
|
||||||
<view class="detail-btn" v-if="!isGroup">
|
<view class="detail-btn" v-if="!isGroup">
|
||||||
<view class="to-store-car to-store-btn" v-if="goodsDetail.goodsType!='VIRTUAL_GOODS'" @click="shutMask(4)">加入购物车</view>
|
<view class="to-store-car to-store-btn" v-if="goodsDetail.goodsType!='VIRTUAL_GOODS'" @click="shutMask(4)">
|
||||||
|
加入购物车</view>
|
||||||
<view class="to-buy to-store-btn" @click="shutMask(4, 'buy')">立即购买</view>
|
<view class="to-buy to-store-btn" @click="shutMask(4, 'buy')">立即购买</view>
|
||||||
<view class="to-store-car to-store-btn" v-if="startTimer">暂未开始</view>
|
<view class="to-store-car to-store-btn" v-if="startTimer">暂未开始</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -215,10 +224,12 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 配送地址弹窗 -->
|
<!-- 配送地址弹窗 -->
|
||||||
<popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id" :goodsId="goodsDetail.id" :addressFlag="addressFlag" />
|
<popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id"
|
||||||
|
:goodsId="goodsDetail.id" :addressFlag="addressFlag" />
|
||||||
|
|
||||||
<!-- 商品规格 商品详情,以及默认参与活动的id-->
|
<!-- 商品规格 商品详情,以及默认参与活动的id-->
|
||||||
<popupGoods :addr="delivery" ref="popupGoods" @changed="changedGoods" @closeBuy="closePopupBuy" @queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :id="productId"
|
<popupGoods :addr="delivery" ref="popupGoods" @changed="changedGoods" @closeBuy="closePopupBuy"
|
||||||
|
@queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :id="productId"
|
||||||
v-if="goodsDetail.id " :pointDetail="pointDetail" @handleClickSku="selectSku" :buyMask="buyMask" />
|
v-if="goodsDetail.id " :pointDetail="pointDetail" @handleClickSku="selectSku" :buyMask="buyMask" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -475,8 +486,7 @@ export default {
|
|||||||
this.init(
|
this.init(
|
||||||
this.routerVal.id,
|
this.routerVal.id,
|
||||||
this.routerVal.goodsId,
|
this.routerVal.goodsId,
|
||||||
this.routerVal.distributionId,
|
this.routerVal.distributionId
|
||||||
this.routerVal.whetherPoint
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -507,21 +517,16 @@ export default {
|
|||||||
* 初始化信息
|
* 初始化信息
|
||||||
*/
|
*/
|
||||||
async init(id, goodsId, distributionId) {
|
async init(id, goodsId, distributionId) {
|
||||||
console.log(id, goodsId);
|
|
||||||
this.isGroup = false; //初始化拼团
|
this.isGroup = false; //初始化拼团
|
||||||
this.productId = id; // skuId
|
this.productId = id; // skuId
|
||||||
// 这里请求获取到页面数据 解析数据
|
// 这里请求获取到页面数据 解析数据
|
||||||
uni.showLoading({
|
|
||||||
title: "加载中",
|
|
||||||
mask: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
let response = await getGoods(id, goodsId);
|
let response = await getGoods(id, goodsId);
|
||||||
if (!response.data.success) {
|
if (!response.data.success) {
|
||||||
|
setTimeout(()=>{
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
return false;
|
},500)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 这里是绑定分销员
|
// 这里是绑定分销员
|
||||||
if (distributionId || this.$store.state.distributionId) {
|
if (distributionId || this.$store.state.distributionId) {
|
||||||
let disResult = await getGoodsDistribution(distributionId);
|
let disResult = await getGoodsDistribution(distributionId);
|
||||||
@@ -529,12 +534,11 @@ export default {
|
|||||||
this.$store.state.distributionId = distributionId;
|
this.$store.state.distributionId = distributionId;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
uni.hideLoading();
|
|
||||||
/**商品信息以及规格信息存储 */
|
/**商品信息以及规格信息存储 */
|
||||||
this.goodsDetail = response.data.result.data;
|
this.goodsDetail = response.data.result.data;
|
||||||
this.goodsSpec = response.data.result.specs;
|
this.goodsSpec = response.data.result.specs;
|
||||||
this.PromotionList = response.data.result.promotionMap;
|
this.PromotionList = response.data.result.promotionMap;
|
||||||
this.goodsParams = response.data.result.goodsParamsDTOList || []
|
this.goodsParams = response.data.result.goodsParamsDTOList || [];
|
||||||
|
|
||||||
// 判断是否拼团活动或者积分商品 如果有则显示拼团活动信息
|
// 判断是否拼团活动或者积分商品 如果有则显示拼团活动信息
|
||||||
this.PromotionList &&
|
this.PromotionList &&
|
||||||
@@ -552,7 +556,7 @@ export default {
|
|||||||
this.imgList = this.goodsDetail.goodsGalleryList;
|
this.imgList = this.goodsDetail.goodsGalleryList;
|
||||||
|
|
||||||
// 获取店铺基本信息
|
// 获取店铺基本信息
|
||||||
this.getstoreBaseInfoFun(this.goodsDetail.storeId);
|
this.getStoreBaseInfoFun(this.goodsDetail.storeId);
|
||||||
|
|
||||||
// 获取购物车
|
// 获取购物车
|
||||||
this.cartCount();
|
this.cartCount();
|
||||||
@@ -676,8 +680,8 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* 获取店铺信息
|
* 获取店铺信息
|
||||||
*/
|
*/
|
||||||
getstoreBaseInfoFun(id) {
|
getStoreBaseInfoFun(id) {
|
||||||
API_store.getstoreBaseInfo(id).then((res) => {
|
API_store.getStoreBaseInfo(id).then((res) => {
|
||||||
if (res.data.success) {
|
if (res.data.success) {
|
||||||
this.storeDetail = res.data.result;
|
this.storeDetail = res.data.result;
|
||||||
}
|
}
|
||||||
@@ -704,7 +708,7 @@ export default {
|
|||||||
*/
|
*/
|
||||||
getGoodsCollectionFun(goodsId) {
|
getGoodsCollectionFun(goodsId) {
|
||||||
if (storage.getHasLogin()) {
|
if (storage.getHasLogin()) {
|
||||||
API_Members.getGoodsIsCollect(goodsId, "GOODS").then((res) => {
|
API_Members.getGoodsIsCollect("GOODS",goodsId ).then((res) => {
|
||||||
this.favorite = res.data.result;
|
this.favorite = res.data.result;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -726,6 +730,7 @@ export default {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取相似商品列表
|
* 获取相似商品列表
|
||||||
|
*
|
||||||
*/
|
*/
|
||||||
getOtherLikeGoods() {
|
getOtherLikeGoods() {
|
||||||
getGoodsList({
|
getGoodsList({
|
||||||
@@ -735,7 +740,6 @@ export default {
|
|||||||
keyword: this.goodsDetail.name,
|
keyword: this.goodsDetail.name,
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
this.likeGoodsList = res.data.result.content;
|
this.likeGoodsList = res.data.result.content;
|
||||||
console.warn(this.likeGoodsList);
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -816,7 +820,7 @@ export default {
|
|||||||
this.deleteGoodsCollectionFun(id);
|
this.deleteGoodsCollectionFun(id);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
API_Members.collectionGoods(id, "GOODS").then((res) => {
|
API_Members.collectionGoods("GOODS",id ).then((res) => {
|
||||||
if (res.data.success) {
|
if (res.data.success) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "收藏成功!",
|
title: "收藏成功!",
|
||||||
|
|||||||
56
pages/product/licencePhoto.vue
Normal file
56
pages/product/licencePhoto.vue
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
|
<p>公司名称:{{storeData.companyName}}</p>
|
||||||
|
<p>公司地址:{{storeData.companyAddress}}</p>
|
||||||
|
<p>公司地址地区:{{storeData.companyAddressPath}}</p>
|
||||||
|
<p>员工人数:{{storeData.employeeNum}}</p>
|
||||||
|
<p>法定经营范围:{{storeData.scope}}</p>
|
||||||
|
<u-image @click="preview()" width="100%" height="400rpx" mode="aspectFit" :src="storeData.licencePhoto"></u-image>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getLicencePhoto } from "@/api/store.js";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
storeData: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.getStoreLicencePhoto(options.id);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getStoreLicencePhoto(id) {
|
||||||
|
let res = await getLicencePhoto(id);
|
||||||
|
if (res.data.success) {
|
||||||
|
this.storeData = res.data.result;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点击图片放大或保存
|
||||||
|
*/
|
||||||
|
preview() {
|
||||||
|
uni.previewImage({
|
||||||
|
current: 0,
|
||||||
|
urls: [this.storeData.licencePhoto],
|
||||||
|
longPressActions: {
|
||||||
|
itemList: ["保存图片"],
|
||||||
|
success: function (data) {},
|
||||||
|
fail: function (err) {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wrapper {
|
||||||
|
padding: 32rpx;
|
||||||
|
> p {
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
.search{
|
|
||||||
margin-top: 28rpx !important;
|
|
||||||
}
|
|
||||||
.status_bar{
|
|
||||||
height: calc(var(--status-bar-height) + 188rpx ) !important;
|
|
||||||
}
|
|
||||||
@@ -71,14 +71,14 @@ export default {
|
|||||||
goodsDetail: {
|
goodsDetail: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
this.grade = val.grade;
|
this.grade = val.grade;
|
||||||
this.getGoodsComments();
|
this.getGoodsCommentsMethods();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true,
|
||||||
immediate: true,
|
immediate: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// this.getGoodsComments();
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
parseLoaded() {
|
parseLoaded() {
|
||||||
@@ -86,7 +86,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// 获取商品评论
|
// 获取商品评论
|
||||||
getGoodsComments() {
|
getGoodsCommentsMethods() {
|
||||||
API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then(
|
API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then(
|
||||||
(res) => {
|
(res) => {
|
||||||
this.commDetail = res.data.result;
|
this.commDetail = res.data.result;
|
||||||
@@ -223,10 +223,6 @@ export default {
|
|||||||
color: #333;
|
color: #333;
|
||||||
padding: 20rpx 0;
|
padding: 20rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
|
||||||
}
|
|
||||||
|
|
||||||
.bot {
|
.bot {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|||||||
@@ -125,7 +125,7 @@ export default {
|
|||||||
width: 52rpx;
|
width: 52rpx;
|
||||||
height: 6rpx;
|
height: 6rpx;
|
||||||
|
|
||||||
background-image: linear-gradient(90deg, $jd-color, $jd-light-color);
|
background-image: linear-gradient(90deg, $price-color, $price-light-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .goods-detail-item {
|
> .goods-detail-item {
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
:fade="true"
|
:fade="true"
|
||||||
duration="450"
|
duration="450"
|
||||||
:lazy-load="true"
|
:lazy-load="true"
|
||||||
:src="item.thumbnail"
|
:src="item.content.thumbnail"
|
||||||
width="330rpx"
|
width="330rpx"
|
||||||
height="330rpx"
|
height="330rpx"
|
||||||
class="like-goods-uimage"
|
class="like-goods-uimage"
|
||||||
@@ -21,12 +21,12 @@
|
|||||||
<u-loading slot="loading"></u-loading>
|
<u-loading slot="loading"></u-loading>
|
||||||
</u-image>
|
</u-image>
|
||||||
<view style="background-color: #ffffff; width: 100%">
|
<view style="background-color: #ffffff; width: 100%">
|
||||||
<view class="name">{{ item.goodsName }}</view>
|
<view class="name">{{ item.content.goodsName }}</view>
|
||||||
<view class="price-sales">
|
<view class="price-sales">
|
||||||
<div class="item-price" v-if="item.price != undefined">
|
<div class="item-price" v-if="item.content.price != undefined">
|
||||||
¥
|
¥
|
||||||
<span>{{ formatPrice(item.price)[0] }}</span>
|
<span>{{ formatPrice(item.content.price)[0] }}</span>
|
||||||
.{{formatPrice(item.price)[1]}}
|
.{{formatPrice(item.content.price)[1]}}
|
||||||
<!-- <text v-if="item.point != undefined">+{{ item.point }}积分</text> -->
|
<!-- <text v-if="item.point != undefined">+{{ item.point }}积分</text> -->
|
||||||
</div>
|
</div>
|
||||||
</view>
|
</view>
|
||||||
@@ -44,7 +44,7 @@ export default {
|
|||||||
// 点击店铺推荐
|
// 点击店铺推荐
|
||||||
clickGoods(val) {
|
clickGoods(val) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/product/goods?id=${val.id}&goodsId=${val.goodsId}`
|
url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 格式化金钱 1999 --> [1999,00]
|
// 格式化金钱 1999 --> [1999,00]
|
||||||
@@ -148,7 +148,7 @@ export default {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: $jd-color;
|
color: $price-color;
|
||||||
line-height: 23px;
|
line-height: 23px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
> span {
|
> span {
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ export default {
|
|||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
.checked {
|
.checked {
|
||||||
background: $jd-color;
|
background: $price-color;
|
||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
@@ -63,7 +63,7 @@
|
|||||||
<!-- 数量 -->
|
<!-- 数量 -->
|
||||||
<view class="goods-skus-number">
|
<view class="goods-skus-number">
|
||||||
<view class="view-class-title">数量</view>
|
<view class="view-class-title">数量</view>
|
||||||
<u-number-box :bg-color="numberBox.bgColor" :color="numberBox.color" :input-width="numberBox.width" :input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
|
<u-number-box :bg-color="numberBox.bgColor" :max="200" :color="numberBox.color" :input-width="numberBox.width" :input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
|
||||||
</u-number-box>
|
</u-number-box>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -322,10 +322,10 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: $jd-light-color !important;
|
background: $price-light-color !important;
|
||||||
border: 2rpx solid $jd-color;
|
border: 2rpx solid $price-color;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $jd-color !important;
|
color: $price-color !important;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -377,7 +377,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.goods-price {
|
.goods-price {
|
||||||
color: $jd-color;
|
color: $price-color;
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
|
|
||||||
background: $jd-color;
|
background: $price-color;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
padding-left: 14rpx;
|
padding-left: 14rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
&::before {
|
&::before {
|
||||||
background-image: linear-gradient(180deg, $jd-color, $jd-light-color);
|
background-image: linear-gradient(180deg, $price-color, $price-light-color);
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|||||||
@@ -94,9 +94,9 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.deg_tag {
|
.deg_tag {
|
||||||
color: $jd-color;
|
color: $price-color;
|
||||||
padding: 0 4rpx;
|
padding: 0 4rpx;
|
||||||
border: 2rpx solid $jd-color;
|
border: 2rpx solid $price-color;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -73,7 +73,7 @@
|
|||||||
}
|
}
|
||||||
.promotion {
|
.promotion {
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
border: 2rpx solid $jd-light-color;
|
border: 2rpx solid $price-light-color;
|
||||||
padding: 2rpx 6rpx;
|
padding: 2rpx 6rpx;
|
||||||
margin-left: 10rpx;
|
margin-left: 10rpx;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|||||||
@@ -24,15 +24,15 @@
|
|||||||
<view class="store-recommend-title">商品推荐</view>
|
<view class="store-recommend-title">商品推荐</view>
|
||||||
<view class="recommend-list">
|
<view class="recommend-list">
|
||||||
<view class="recommend-item" @click="clickGoods(item)" v-for="(item, index) in res" :key="index">
|
<view class="recommend-item" @click="clickGoods(item)" v-for="(item, index) in res" :key="index">
|
||||||
<u-image class="recommend-item-img" :fade="true" duration="450" :lazy-load="true" :src="item.thumbnail" height="218rpx">
|
<u-image class="recommend-item-img" :fade="true" duration="450" :lazy-load="true" :src="item.content.thumbnail" height="218rpx">
|
||||||
<u-loading slot="loading"></u-loading>
|
<u-loading slot="loading"></u-loading>
|
||||||
<view slot="error" style="font-size: 24rpx; ">加载失败</view>
|
<view slot="error" style="font-size: 24rpx; ">加载失败</view>
|
||||||
</u-image>
|
</u-image>
|
||||||
<view class="recommend-item-name">
|
<view class="recommend-item-name">
|
||||||
{{ item.goodsName }}
|
{{ item.content.goodsName }}
|
||||||
</view>
|
</view>
|
||||||
<view class="item-price" v-if="item.price != undefined">
|
<view class="item-price" v-if="item.price != undefined">
|
||||||
¥<span class="item-price-blod">{{ formatPrice(item.price)[0] }}</span>.{{ formatPrice(item.price)[1] }}
|
¥<span class="item-price-blod">{{ formatPrice(item.content.price)[0] }}</span>.{{ formatPrice(item.content.price)[1] }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -58,7 +58,7 @@ export default {
|
|||||||
// 点击商品
|
// 点击商品
|
||||||
clickGoods(val) {
|
clickGoods(val) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/product/goods?id=${val.id}&goodsId=${val.goodsId}`,
|
url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -106,22 +106,22 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.shopTag{
|
|
||||||
background: $main-color;
|
|
||||||
font-size: 24rpx;
|
|
||||||
padding: 0 12rpx;
|
|
||||||
margin-left: 10rpx;
|
|
||||||
font-weight: normal;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-list-view {
|
.recommend-list-view {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.shopTag {
|
||||||
|
background: $main-color;
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
padding: 6rpx 12rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.store-info {
|
.store-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 40rpx 20rpx 50rpx;
|
padding: 40rpx 20rpx 50rpx;
|
||||||
@@ -139,22 +139,19 @@ export default {
|
|||||||
.name-star {
|
.name-star {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
padding: 10rpx 0;
|
|
||||||
font-size: 30rpx;
|
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
line-height: 1;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
line-height: 24px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
}
|
||||||
.desc {
|
.desc {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: #999;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
text{
|
text {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -212,7 +209,7 @@ export default {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 18rpx 0;
|
margin: 18rpx 0;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: $jd-color;
|
color: $price-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recommend-list-con {
|
.recommend-list-con {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.red {
|
.red {
|
||||||
color: $jd-color;
|
color: $price-color;
|
||||||
}
|
}
|
||||||
page {
|
page {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@@ -10,8 +10,8 @@ page {
|
|||||||
top: 5rpx;
|
top: 5rpx;
|
||||||
padding: 2rpx 6rpx;
|
padding: 2rpx 6rpx;
|
||||||
border-top: 4rpx;
|
border-top: 4rpx;
|
||||||
border: 2rpx solid $jd-color;
|
border: 2rpx solid $price-color;
|
||||||
color: $jd-color;
|
color: $price-color;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
line-height: 18rpx;
|
line-height: 18rpx;
|
||||||
@@ -81,8 +81,8 @@ page {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.-goods-price {
|
.-goods-price {
|
||||||
flex: 8;
|
flex: 7;
|
||||||
color: $jd-color;
|
color: $price-color;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
/deep/ .price {
|
/deep/ .price {
|
||||||
|
|||||||
@@ -1,75 +1,238 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="store-page">
|
<div>
|
||||||
<view class="status_bar">
|
<u-navbar :border-bottom="false">
|
||||||
<!-- 这里是状态栏 -->
|
<u-search v-model="keyword" @search="search" @click="search" placeholder="请输入搜索"></u-search>
|
||||||
</view>
|
</u-navbar>
|
||||||
<view class="header">
|
<div class="wrapper">
|
||||||
<div class="search">
|
<!-- 店铺信息模块 -->
|
||||||
<u-icon @click="back" style="margin:0 10rpx 0;" name="arrow-left" size="40" color="#fff"></u-icon>
|
<div class="store flex">
|
||||||
<u-search :show-action="false" border-color="#fff" bg-color="#fff" v-model="keyword" @search="search" placeholder="请输入搜索" />
|
<u-image border-radius="10" width="150" height="150" :src="storeInfo.storeLogo || config.logo" mode="aspectFit">
|
||||||
<u-icon @click="shareChange()" style="margin:0 10rpx 0;" name="share-fill" size="40" color="#fff"></u-icon>
|
</u-image>
|
||||||
|
<div class="box">
|
||||||
|
<div class="store-name" @click="getStoreLicencePhoto">
|
||||||
|
{{ storeInfo.storeName || ''}}
|
||||||
|
<u-icon style="margin-left:10rpx;" name="arrow-right"></u-icon>
|
||||||
</div>
|
</div>
|
||||||
<view class="tab-header">
|
<div class="flex store-message">
|
||||||
<text :class="{ cur: tabIndex == 0 }" @click="checkNavigation(0)">首页</text>
|
<div> <span>{{ storeInfo.collectionNum || 0 }}</span>关注 </div>
|
||||||
<text :class="{ cur: tabIndex == 1 }" @click="checkNavigation(1)">商品</text>
|
<div> <span>{{ storeInfo.goodsNum || 0 }}</span>件商品 </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="collection">
|
||||||
|
<div class="collection-btn" @click="whetherCollection"> {{ isCollection ? '已关注' : '+ 关注' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 店铺简介 -->
|
||||||
|
<div class="store-desc wes-2">
|
||||||
|
{{storeInfo.storeDesc}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 联系客服 -->
|
||||||
|
<div class="kefu" @click="linkKefuDetail">
|
||||||
|
<u-icon name="kefu-ermai"></u-icon>
|
||||||
|
联系客服
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 优惠券 -->
|
||||||
|
<scroll-view scroll-x="true" show-scrollbar="false" class="discount" v-if="couponList.length > 0">
|
||||||
|
<view class="card-box" v-for="(item, index) in couponList" :key="index">
|
||||||
|
<view class="card" @click="getCoupon(item)">
|
||||||
|
<view class="money">
|
||||||
|
<view>
|
||||||
|
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
|
||||||
|
<span v-else>{{ item.price }}元</span>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="xian"></view>
|
||||||
|
<view class="text">
|
||||||
|
<text>{{'领取优惠券'}}</text>
|
||||||
|
<text>满{{ item.consumeThreshold | unitPrice }}元可用</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<swiper :current="tabIndex" class="swiper-box" @change="tabChange">
|
|
||||||
<swiper-item class="swiper-item" v-for="(item, index) in indexCats" :key="index">
|
|
||||||
<scroll-view class="scroll-v" scroll-anchoring enableBackToTop="true" scroll-y @refresherrefresh="refresh()" @scroll="pageScroll">
|
|
||||||
<storePageMain :load="load" :storeId="storeId" v-if="index == 0"></storePageMain>
|
|
||||||
<storePageGoods :load="load" :categoryId="item" :storeId="storeId" v-if="index == 1"></storePageGoods>
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
|
|
||||||
<!-- 分享 -->
|
<!-- tab -->
|
||||||
<shares type="shops" :link="'/pages/product/shopPage?id='+ this.storeId" v-if="shareFlage" @close="shareFlage = false" />
|
<u-tabs :list="tabs" :active-color="mainColor" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
|
||||||
|
<!-- menu -->
|
||||||
|
|
||||||
|
<!-- 商品 -->
|
||||||
|
<div class="contant" v-if="current == 0">
|
||||||
|
<view v-if="!goodsList.length" class="empty">暂无商品信息</view>
|
||||||
|
<view v-else class="item" v-for="(item,index) in goodsList" :key="index" @click="navigateToGoodsDetail(item)">
|
||||||
|
<u-image width="100%" height="330rpx" mode="aspectFit" :src="item.content.thumbnail">
|
||||||
|
<u-loading slot="loading"></u-loading>
|
||||||
|
</u-image>
|
||||||
|
<div class="name">{{ item.content.goodsName }}</div>
|
||||||
|
<div class="price">
|
||||||
|
<div>¥{{ item.content.price | unitPrice }}</div>
|
||||||
|
</div>
|
||||||
|
<view class="buyCount">
|
||||||
|
<div>已售 {{ item.content.buyCount || "0" }}</div>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
<!-- 全部分类 -->
|
||||||
|
<div class="category" v-if="current == 1">
|
||||||
|
<div class="category-item" v-for="(item,index) in categoryList" :key="index">
|
||||||
|
<div class="flex" @click="getCategoryGoodsList(item)">
|
||||||
|
<div>{{item.labelName}}</div>
|
||||||
|
<div>
|
||||||
|
<u-icon color="#999" name="arrow-right"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分类子级 -->
|
||||||
|
<div class="child-list" v-if="item.children && item.children.length!=0">
|
||||||
|
<div class="child" @click="getCategoryGoodsList(child)" v-for="(child,i) in item.children">{{child.labelName}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<u-back-top :scroll-top="scrollTop"></u-back-top>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import shares from "@/components/m-share/index"; //分享
|
import { getStoreBaseInfo, getStoreCategory } from "@/api/store.js";
|
||||||
import storePageMain from "./shopPageMain.vue";
|
import {
|
||||||
import storePageGoods from "./shopPageGoods.vue";
|
receiveCoupons,
|
||||||
|
deleteStoreCollection,
|
||||||
|
collectionGoods,
|
||||||
|
getGoodsIsCollect,
|
||||||
|
} from "@/api/members.js";
|
||||||
|
import config from "@/config/config";
|
||||||
|
import storage from "@/utils/storage";
|
||||||
|
import { getGoodsList } from "@/api/goods.js";
|
||||||
|
import { getAllCoupons } from "@/api/promotions.js";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
shares,
|
|
||||||
storePageMain,
|
|
||||||
storePageGoods,
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
shareFlage: false, //分享share
|
config,
|
||||||
tabIndex: 0, //默认为第一个tab
|
scrollTop: 0,
|
||||||
keyword: "", //搜索关键字
|
mainColor: this.$mainColor, //主色调
|
||||||
load: false,
|
current: 0, //初始tabs的索引
|
||||||
storeId: undefined, //店铺id
|
tabs: [{ name: "全部商品" }, { name: "分类查看" }], // 标签
|
||||||
indexCats: [0, 1], //默认为2个tab
|
storeId: "",
|
||||||
loadIndex: 1, //加载的距离
|
keyword: "",
|
||||||
|
storeInfo: {}, //店铺详情
|
||||||
|
isCollection: false, //是否关注
|
||||||
|
goodsList: [], //推荐货物
|
||||||
|
couponList: [], //优惠券列表
|
||||||
|
categoryList: [],
|
||||||
|
couponParams: { pageNumber: 1, pageSize: 50, storeId: "" },
|
||||||
|
goodsParams: { pageNumber: 1, pageSize: 50, storeId: "" },
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
current(val) {
|
||||||
|
val == 0 ? this.getGoodsData() : this.getCategoryData();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 加载
|
* 加载
|
||||||
*/
|
*/
|
||||||
async onLoad(options) {
|
async onLoad(options) {
|
||||||
this.storeId = options.id;
|
this.storeId = options.id;
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
this.scrollTop = e.scrollTop;
|
||||||
|
},
|
||||||
|
onPullDownRefresh() {
|
||||||
|
|
||||||
|
this.init();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
// 小程序默认分享
|
// 小程序默认分享
|
||||||
uni.showShareMenu({ withShareTicket: true });
|
uni.showShareMenu({ withShareTicket: true });
|
||||||
// #endif
|
// #endif
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 下拉加载
|
||||||
|
onReachBottom() {
|
||||||
|
this.goodsParams.pageNumber++;
|
||||||
|
this.getGoodsData();
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
// 点击分享
|
getStoreLicencePhoto() {
|
||||||
async shareChange() {
|
uni.navigateTo({
|
||||||
this.shareFlage = true;
|
url: `/pages/product/licencePhoto?id=${this.storeId}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 初始化信息
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
this.goodsList = [];
|
||||||
|
this.categoryList = [];
|
||||||
|
this.couponList = [];
|
||||||
|
this.goodsParams.pageNumber = 1;
|
||||||
|
if (this.$options.filters.isLogin("auth")) {
|
||||||
|
this.enableGoodsIsCollect();
|
||||||
|
}
|
||||||
|
// 店铺信息
|
||||||
|
this.getStoreData();
|
||||||
|
// 商品信息
|
||||||
|
this.getGoodsData();
|
||||||
|
// 优惠券信息
|
||||||
|
this.getCouponsData();
|
||||||
|
// 店铺分类
|
||||||
|
this.getCategoryData();
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 联系客服
|
||||||
|
*/
|
||||||
|
linkKefuDetail() {
|
||||||
|
// 客服
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
// originalPrice: this.goodsDetail.original || this.goodsDetail.price,
|
||||||
|
uuid: storage.getUuid(),
|
||||||
|
token: storage.getAccessToken(),
|
||||||
|
sign: this.storeInfo.yzfSign,
|
||||||
|
mpSign: this.storeInfo.yzfMpSign,
|
||||||
|
};
|
||||||
|
uni.navigateTo({
|
||||||
|
url:
|
||||||
|
"/pages/product/customerservice/index?params=" +
|
||||||
|
encodeURIComponent(JSON.stringify(params)),
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
const sign = this.storeInfo.yzfSign;
|
||||||
|
uni.navigateTo({
|
||||||
|
url:
|
||||||
|
"/pages/tabbar/home/web-view?src=https://yzf.qq.com/xv/web/static/chat/index.html?sign=" +
|
||||||
|
sign,
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 获取店铺分类 */
|
||||||
|
async getCategoryData() {
|
||||||
|
let res = await getStoreCategory(this.storeId);
|
||||||
|
if (res.data.success) {
|
||||||
|
this.categoryList = res.data.result;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**是否收藏店铺 */
|
||||||
|
async enableGoodsIsCollect() {
|
||||||
|
let res = await getGoodsIsCollect("STORE", this.storeId);
|
||||||
|
if (res.data.success) {
|
||||||
|
this.isCollection = res.data.result;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**商品分类中商品集合 */
|
||||||
|
getCategoryGoodsList(val) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/product/shopPageGoods?title=${val.labelName}&id=${val.id}&storeId=${this.storeId}`,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -81,184 +244,307 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/** 点击tab */
|
||||||
|
changeTab(index) {
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 下滑加载
|
* 店铺信息
|
||||||
*/
|
*/
|
||||||
pageScroll(e) {
|
async getStoreData() {
|
||||||
if (e.detail.scrollTop > 300 * this.loadIndex) {
|
let res = await getStoreBaseInfo(this.storeId);
|
||||||
this.loadIndex++;
|
res.data.success
|
||||||
this.load = this.loadIndex;
|
? (this.storeInfo = res.data.result)
|
||||||
|
: uni.reLaunch({ url: "/" });
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 加载商品 */
|
||||||
|
async getGoodsData() {
|
||||||
|
let res = await getGoodsList(this.goodsParams);
|
||||||
|
if (res.data.success) {
|
||||||
|
this.goodsList.push(...res.data.result.content);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 加载优惠券 */
|
||||||
|
async getCouponsData() {
|
||||||
|
this.couponParams.storeId = this.storeId;
|
||||||
|
let res = await getAllCoupons(this.couponParams);
|
||||||
|
if (res.data.success) {
|
||||||
|
this.couponList.push(...res.data.result.records);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 返回
|
* 跳转到商品详情
|
||||||
*/
|
*/
|
||||||
back() {
|
navigateToGoodsDetail(val) {
|
||||||
if (getCurrentPages().length == 1) {
|
uni.navigateTo({
|
||||||
uni.switchTab({
|
url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`,
|
||||||
url: "/pages/tabbar/home/index",
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否收藏
|
||||||
|
*/
|
||||||
|
whetherCollection() {
|
||||||
|
if (this.isCollection) {
|
||||||
|
deleteStoreCollection(this.storeId).then((res) => {
|
||||||
|
if (res.data.success) {
|
||||||
|
this.isCollection = false;
|
||||||
|
uni.showToast({
|
||||||
|
icon: "none",
|
||||||
|
duration: 3000,
|
||||||
|
title: "取消关注成功!",
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.navigateBack();
|
collectionGoods("STORE", this.storeId).then((res) => {
|
||||||
|
if (res.data.success) {
|
||||||
|
this.isCollection = true;
|
||||||
|
uni.showToast({
|
||||||
|
icon: "none",
|
||||||
|
duration: 3000,
|
||||||
|
title: "关注成功!",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 点击导航栏
|
* 领取
|
||||||
*/
|
*/
|
||||||
checkNavigation(index) {
|
getCoupon(item) {
|
||||||
this.tabIndex = index;
|
if (!this.$options.filters.isLogin("auth")) {
|
||||||
},
|
uni.showToast({
|
||||||
|
icon: "none",
|
||||||
|
duration: 3000,
|
||||||
|
title: "请先登录!",
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
this.$options.filters.navigateToLogin("redirectTo");
|
||||||
* 滑动回调
|
return false;
|
||||||
*/
|
}
|
||||||
tabChange(e) {
|
receiveCoupons(item.id).then((res) => {
|
||||||
this.tabIndex = e.detail.current;
|
if (res.data.success) {
|
||||||
this.checkNavigation(this.tabIndex);
|
uni.showToast({
|
||||||
|
icon: "none",
|
||||||
|
duration: 3000,
|
||||||
|
title: "领取成功!",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
|
||||||
page {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// #ifdef MP-WEIXIN
|
.wrapper {
|
||||||
@import "./mp-shopPage.scss";
|
background: #fff;
|
||||||
// #endif
|
padding: 32rpx;
|
||||||
input[type="search"] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
// 也可以去除加上border: 0;之类的 根据设计图来
|
|
||||||
}
|
}
|
||||||
|
.store {
|
||||||
input::-webkit-search-cancel-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
// 关闭的按钮
|
|
||||||
|
|
||||||
.storeScrollBox {
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-page {
|
|
||||||
height: 100%;
|
|
||||||
// background: #fff;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
.tab-header {
|
|
||||||
height: 80rpx;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 28rpx;
|
> .box {
|
||||||
z-index: 9999;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
text {
|
justify-content: center;
|
||||||
width: 50%;
|
margin-left: 30rpx;
|
||||||
text-align: center;
|
font-size: 24rpx;
|
||||||
position: relative;
|
color: #999;
|
||||||
color: #fff;
|
flex: 2;
|
||||||
&.cur {
|
> .store-name {
|
||||||
font-size: 30rpx;
|
font-size: 34rpx;
|
||||||
|
color: #333;
|
||||||
|
letter-spacing: 1rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
> .store-message {
|
||||||
|
margin-top: 25rpx;
|
||||||
|
> div {
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin: 0 5rpx;
|
||||||
|
> span {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.collection-btn {
|
||||||
|
background: $main-color;
|
||||||
|
padding: 6rpx 0;
|
||||||
|
width: 140rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
border-radius: 100px;
|
||||||
&::after {
|
text-align: center;
|
||||||
content: "";
|
}
|
||||||
position: absolute;
|
.store-desc {
|
||||||
width: 30rpx;
|
margin: 40rpx 0 0 0;
|
||||||
border: 1px solid #fff;
|
color: #999;
|
||||||
bottom: -6rpx;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -15rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-line {
|
|
||||||
height: 1px;
|
|
||||||
background: #f2f2f2;
|
|
||||||
position: fixed;
|
|
||||||
top: 170rpx;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-box {
|
.contant {
|
||||||
width: 750rpx;
|
margin-top: 20rpx;
|
||||||
|
display: flex;
|
||||||
height: calc(
|
flex-wrap: wrap;
|
||||||
100% - var(--status-bar-height) - var(--window-top) - var(--window-bottom) -
|
justify-content: space-between;
|
||||||
(160rpx) - 16rpx - 28rpx
|
> .empty {
|
||||||
);
|
|
||||||
|
|
||||||
// #ifdef H5
|
|
||||||
height: calc(
|
|
||||||
100% - var(--status-bar-height) - var(--window-top) - var(--window-bottom) -
|
|
||||||
(160rpx)
|
|
||||||
);
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-item {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-v {
|
|
||||||
width: 750rpx;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.status_bar {
|
|
||||||
height: calc(var(--status-bar-height) + 160rpx);
|
|
||||||
width: 100%;
|
|
||||||
background-image: linear-gradient(
|
|
||||||
25deg,
|
|
||||||
$main-color,
|
|
||||||
$light-color,
|
|
||||||
$aider-light-color
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
width: 100%;
|
|
||||||
position: fixed;
|
|
||||||
top: var(--status-bar-height);
|
|
||||||
|
|
||||||
padding: 16rpx 0 0;
|
|
||||||
font-size: 30rpx;
|
|
||||||
z-index: 9999;
|
|
||||||
> .search {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
.back {
|
margin-top: 40rpx;
|
||||||
width: 90rpx;
|
|
||||||
height: 90rpx;
|
|
||||||
}
|
}
|
||||||
|
.item {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.input-wrap {
|
background: #fff;
|
||||||
background: $light-color;
|
width: 49%;
|
||||||
width: 600rpx;
|
height: 484rpx;
|
||||||
height: 58rpx;
|
|
||||||
padding: 10rpx 30rpx 10rpx 30rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid $light-color;
|
|
||||||
|
|
||||||
input {
|
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid #f8f8f8;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-align: left !important;
|
||||||
|
color: #333;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
line-height: 1.4em;
|
||||||
|
max-height: 2.8em; //height是line-height的整数倍,防止文字显示不全
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
font-weight: 500;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 30rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.buyCount {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 24upx;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.discount {
|
||||||
|
height: 154rpx;
|
||||||
|
border-top: 1px solid #f6f6f6;
|
||||||
|
border-bottom: 18rpx solid #f6f6f6;
|
||||||
|
background: #f6f6f6;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
.card-box {
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: 25rpx;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
width: 324rpx;
|
||||||
|
height: 116rpx;
|
||||||
|
background: #fff;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.money {
|
||||||
|
width: 45%;
|
||||||
|
color: #fd6466;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
text {
|
||||||
|
font-size: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.xian {
|
||||||
|
height: 66rpx;
|
||||||
|
border: 1px dashed #f6f6f6;
|
||||||
|
position: relative;
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
width: 22rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
position: absolute;
|
||||||
|
background: #f6f6f6;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
border-radius: 0 0 22rpx 22rpx;
|
||||||
|
top: -30rpx;
|
||||||
|
left: -10rpx;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
border-radius: 22rpx 22rpx 0 0;
|
||||||
|
bottom: -30rpx;
|
||||||
|
left: -10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
flex: 1;
|
||||||
|
color: $aider-light-color;
|
||||||
|
font-size: 24rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 14rpx;
|
||||||
|
text:nth-of-type(2) {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
.cur:nth-of-type(1) {
|
||||||
|
color: #ccc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.category-item {
|
||||||
|
background: #fff;
|
||||||
|
padding: 22rpx;
|
||||||
|
margin: 20rpx 10rpx;
|
||||||
|
> .flex {
|
||||||
|
color: #666;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
> .child-list {
|
||||||
|
display: flex;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
> .child {
|
||||||
|
justify-content: center;
|
||||||
|
margin: 1% 0;
|
||||||
|
display: flex;
|
||||||
|
width: 48%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 1%;
|
||||||
|
border: 1rpx solid #ededed;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 70rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 70rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.kefu {
|
||||||
|
background: #f7f7f7;
|
||||||
|
height: 70rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 32rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,340 +1,129 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="index-content">
|
<div>
|
||||||
<!-- 搜索板块 -->
|
<u-navbar :title="title"></u-navbar>
|
||||||
<view class="index-navs">
|
<!-- 商品 -->
|
||||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 1 }" @click="tabClick(1)">精选</view>
|
<div class="contant">
|
||||||
<view class="index-nav-divider"></view>
|
<view v-if="!goodsList.length" class="empty">暂无商品信息</view>
|
||||||
|
<view v-else class="item" v-for="(item,index) in goodsList" :key="index" @click="navigateToGoodsDetail(item)">
|
||||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 2}" @click="tabClick(2,'buyCount')">
|
<u-image width="100%" mode="aspectFit" height="324rpx" :src="item.content.thumbnail">
|
||||||
销量
|
|
||||||
<view class="index-nav-arrows">
|
|
||||||
<view class="index-nav-arrow">
|
|
||||||
<image src="/static/index/arrow-up-1.png" v-if="params.sort === 'buyCount' && params.order === 'asc'" mode="aspectFit"></image>
|
|
||||||
<image src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
|
||||||
</view>
|
|
||||||
<view class="index-nav-arrow">
|
|
||||||
<image src="/static/index/arrow-down.png" v-if="params.sort === 'buyCount' && params.order === 'desc'" mode="aspectFit"></image>
|
|
||||||
<image src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="index-nav-divider"></view>
|
|
||||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 3}" @click="tabClick(3,'price')">
|
|
||||||
价格
|
|
||||||
<view class="index-nav-arrows">
|
|
||||||
<view class="index-nav-arrow">
|
|
||||||
<image src="/static/index/arrow-up-1.png" v-if="params.sort === 'price' && params.order === 'asc'" mode="aspectFit"></image>
|
|
||||||
<image src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
|
||||||
</view>
|
|
||||||
<view class="index-nav-arrow">
|
|
||||||
<image src="/static/index/arrow-down.png" v-if="params.sort === 'price' && params.order === 'desc'" mode="aspectFit"></image>
|
|
||||||
<image src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<scroll-view scroll-with-animation scroll-y class="scoll-page" @scroll="pageScroll">
|
|
||||||
<view class="index-items">
|
|
||||||
<view class="index-item" v-for="(goods, index) in goodsList" :key="index" @click="toGoodsDetail(goods)">
|
|
||||||
<view class="index-item-img">
|
|
||||||
<u-image mode="aspectFit" height="160px" width="173px" class="index-item-store-img" :src="goods.thumbnail">
|
|
||||||
<u-loading slot="loading"></u-loading>
|
<u-loading slot="loading"></u-loading>
|
||||||
</u-image>
|
</u-image>
|
||||||
<view class="index-item-title">
|
<div class="name">{{ item.content.goodsName }}</div>
|
||||||
<div> {{ goods.goodsName }}</div>
|
<div class="price">
|
||||||
<view class="index-item-title-desc" v-if="goods.sellingPoint ">{{ goods.sellingPoint }}</view>
|
<div>¥{{ item.content.price | unitPrice }}</div>
|
||||||
</view>
|
</div>
|
||||||
<view class="index-item-price">
|
<view class="buyCount">
|
||||||
<div class="price">¥{{ goods.price | unitPrice }}</div>
|
<div>已售 {{ item.buyCount || "0" }}</div>
|
||||||
<view class="index-item-sale">
|
|
||||||
已售 {{ goods.buyCount || "0" }}
|
|
||||||
<!-- 好评90% -->
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</div>
|
||||||
</view>
|
</div>
|
||||||
</view>
|
|
||||||
<u-loadmore bg-color="#f6f6f6" @loadmore="loadMore" :status="loadStatus" />
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getGoodsList } from "@/api/goods.js";
|
import { getGoodsList } from "@/api/goods.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
|
||||||
storeId: {
|
|
||||||
value: Number,
|
|
||||||
},
|
|
||||||
categoryId: {
|
|
||||||
value: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
load: {
|
|
||||||
value: Number,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loadStatus: "loadmore", //加载更多状态
|
title: "",
|
||||||
nav: 1,
|
routerVal: "",
|
||||||
// 默认双列显示
|
goodsList: [],
|
||||||
goodsListTemplate: 2,
|
|
||||||
// 过滤参数
|
|
||||||
curCateFid: "",
|
|
||||||
params: {
|
params: {
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
storeId: this.storeId,
|
|
||||||
},
|
|
||||||
goodsList: [],
|
|
||||||
cateList: [
|
|
||||||
{ name: "综合", value: "100001" },
|
|
||||||
{ name: "推荐", value: "100002" },
|
|
||||||
{ name: "信用", value: "100003" },
|
|
||||||
],
|
|
||||||
|
|
||||||
typeSort1: true,
|
order: "desc",
|
||||||
typeSort2: false,
|
keyword: "",
|
||||||
|
storeCatId: "",
|
||||||
|
storeId: "",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
onLoad(options) {
|
||||||
load(val) {
|
this.routerVal = options;
|
||||||
this.params.pageNumber = val;
|
this.params.storeId = options.storeId;
|
||||||
this.loadMore();
|
this.params.storeCatId = options.id;
|
||||||
|
this.title = options.title;
|
||||||
},
|
},
|
||||||
|
onShow() {
|
||||||
|
this.goodsList =[]
|
||||||
|
this.params.pageNumber = 1;
|
||||||
|
this.getGoodsData();
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
onReachBottom(){
|
||||||
|
this.params.pageNumber ++;
|
||||||
this.loadMore();
|
this.getGoodsData();
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initGoodsInfo();
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
pageScroll(e) {},
|
/**
|
||||||
loadMore() {
|
* 跳转到商品详情
|
||||||
this.initGoodsInfo();
|
*/
|
||||||
},
|
navigateToGoodsDetail(val) {
|
||||||
tabClick(index, type) {
|
|
||||||
this.goodsList = [];
|
|
||||||
this.params.pageNumber = 0;
|
|
||||||
this.params.pageSize = 10;
|
|
||||||
|
|
||||||
this.nav = index;
|
|
||||||
if (this.params.sort == type) {
|
|
||||||
this.params.order == "asc"
|
|
||||||
? (this.params.order = "desc")
|
|
||||||
: (this.params.order = "asc");
|
|
||||||
this.$set(this.params, "sort", type);
|
|
||||||
} else {
|
|
||||||
this.params.order = "desc";
|
|
||||||
this.$set(this.params, "sort", type);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.initGoodsInfo();
|
|
||||||
},
|
|
||||||
toGoodsDetail(val) {
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/product/goods?id=${val.id}&goodsId=${val.goodsId}`,
|
url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
initGoodsInfo() {
|
|
||||||
this.params.storeId = this.storeId;
|
|
||||||
getGoodsList(this.params).then((res) => {
|
|
||||||
if (
|
|
||||||
res.data.result.totalElements <=
|
|
||||||
res.data.result.number * res.data.result.size
|
|
||||||
) {
|
|
||||||
|
|
||||||
this.loadStatus = "noMore";
|
async getGoodsData() {
|
||||||
} else {
|
// #TODO
|
||||||
|
let goodsList = await getGoodsList(this.params);
|
||||||
this.loadStatus = "loadmore";
|
if (goodsList.data.success) {
|
||||||
|
this.goodsList.push(...goodsList.data.result.content);
|
||||||
}
|
}
|
||||||
this.goodsList.push(...res.data.result.content);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 点击了右侧的模板选择按钮:即单列还是双列展示商品
|
|
||||||
goodsTemplateChanged(templateValue) {
|
|
||||||
this.goodsListTemplate = templateValue;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.scoll-page {
|
.contant {
|
||||||
height: 100%;
|
margin-top: 20rpx;
|
||||||
}
|
|
||||||
.store-items {
|
|
||||||
padding-top: 20rpx;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.store-item {
|
|
||||||
width: 710rpx;
|
|
||||||
height: 226rpx;
|
|
||||||
padding-left: 20rpx;
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
position: relative;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.store-item-img {
|
|
||||||
margin-right: 20rpx;
|
|
||||||
image {
|
|
||||||
width: 186rpx;
|
|
||||||
height: 186rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-item-title {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.store-item-title-desc {
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
.store-item-price {
|
|
||||||
font-size: 110rpx;
|
|
||||||
color: #ff5a10;
|
|
||||||
padding-top: 10rpx;
|
|
||||||
}
|
|
||||||
.store-item-sale {
|
|
||||||
font-size: 25rpx;
|
|
||||||
color: #999;
|
|
||||||
padding-top: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-navs {
|
|
||||||
height: 120rpx;
|
|
||||||
margin-top: -10rpx;
|
|
||||||
padding: 0 52rpx;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.index-item-store-img {
|
|
||||||
width: 346rpx !important;
|
|
||||||
height: 320rpx !important;
|
|
||||||
}
|
|
||||||
.index-nav {
|
|
||||||
font-size: 30rpx;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
&-active {
|
|
||||||
color: $aider-light-color;
|
|
||||||
font-weight: 700;
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 30rpx;
|
|
||||||
border: 1px solid $aider-light-color;
|
|
||||||
bottom: -6rpx;
|
|
||||||
left: 96rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-nav-desc {
|
|
||||||
margin-top: 8rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-nav-divider {
|
|
||||||
height: 64rpx;
|
|
||||||
border-left: 1px solid #dddddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-nav-arrows {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.index-nav-arrow {
|
|
||||||
image {
|
|
||||||
width: 26rpx;
|
|
||||||
height: 26rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.index-nav-arrow:last-child {
|
|
||||||
margin-top: -26rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-items {
|
|
||||||
padding-left: 20rpx;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
justify-content: space-between;
|
||||||
.index-item {
|
> .empty {
|
||||||
width: 346rpx;
|
width: 100%;
|
||||||
padding-bottom: 10rpx;
|
display: flex;
|
||||||
background-color: #fff;
|
justify-content: center;
|
||||||
margin: 0 18rpx 20rpx 0;
|
margin-top: 40rpx;
|
||||||
border-radius: 16rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.index-item-img {
|
|
||||||
image {
|
|
||||||
width: 346rpx;
|
|
||||||
height: 320rpx;
|
|
||||||
}
|
}
|
||||||
}
|
.item {
|
||||||
.index-item-title {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #333333;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0 0 0 20rpx;
|
|
||||||
box-sizing: border-box;
|
background: #fff;
|
||||||
}
|
width: 49%;
|
||||||
.index-item-title-desc {
|
height: 484rpx;
|
||||||
font-size: 25rpx;
|
font-size: 26rpx;
|
||||||
color: #999999;
|
display: flex;
|
||||||
margin-top: 10rpx;
|
flex-direction: column;
|
||||||
}
|
border: 1px solid #f8f8f8;
|
||||||
.index-item-price {
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-align: left !important;
|
||||||
|
color: #333;
|
||||||
padding: 0 20rpx;
|
padding: 0 20rpx;
|
||||||
> .price {
|
margin-top: 20rpx;
|
||||||
|
line-height: 1.4em;
|
||||||
|
max-height: 2.8em; //height是line-height的整数倍,防止文字显示不全
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
> .index-item-sale {
|
.buyCount {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 20rpx;
|
||||||
font-size: 24upx;
|
font-size: 24upx;
|
||||||
|
justify-content: space-between;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,583 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="store-page">
|
|
||||||
<view>
|
|
||||||
<!-- 商店信息 -->
|
|
||||||
<view class="store-info">
|
|
||||||
<view class="logo">
|
|
||||||
<image :src="storeInfo.storeLogo || '/static/logo.png'" mode="aspectFit"></image>
|
|
||||||
</view>
|
|
||||||
<view class="store-name">
|
|
||||||
<view class="name">{{ storeInfo.storeName }}</view>
|
|
||||||
<view>{{ storeInfo.goodsNum || 0 }}关注 {{ storeInfo.collectionNum || 0 }}件商品</view>
|
|
||||||
</view>
|
|
||||||
<view class="follow" @click="whetherCollection">
|
|
||||||
<view>{{ isCollection == 'success' ? '已关注' : '+ 关注' }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="store-intro">
|
|
||||||
<view class="title">店铺简介</view>
|
|
||||||
<view class="text" >
|
|
||||||
<view v-html="storeInfo.storeDesc"></view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 优惠券 -->
|
|
||||||
<scroll-view scroll-x="true" show-scrollbar="false" class="discount" v-if="couponList.length > 0">
|
|
||||||
<view class="card-box" v-for="(item, index) in couponList" :key="index">
|
|
||||||
<view class="card" @click="getCoupon(item)">
|
|
||||||
<view class="money">
|
|
||||||
<view>
|
|
||||||
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
|
|
||||||
<span v-else>{{ item.price }}元</span>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
<view class="xian"></view>
|
|
||||||
<view class="text">
|
|
||||||
<text>{{'领取优惠券' }}</text>
|
|
||||||
<text>满{{ item.consumeThreshold | unitPrice }}元可用</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
<!-- 精选商品 -->
|
|
||||||
<view class="handpick">
|
|
||||||
<view class="title">精选商品</view>
|
|
||||||
<view class="contant">
|
|
||||||
<view v-if="!recommandGoods.length" class="no-goods">暂无商品信息</view>
|
|
||||||
<view v-else class="item" v-for="(item,index) in recommandGoods" :key="index" @click="navigateToGoodsDetail(item)">
|
|
||||||
<u-image width="324rpx" height="324rpx" mode="aspectFit" :src="item.thumbnail">
|
|
||||||
<u-loading slot="loading"></u-loading>
|
|
||||||
</u-image>
|
|
||||||
<div class="name">{{ item.goodsName }}</div>
|
|
||||||
<div class="price">
|
|
||||||
<div>¥{{ item.price | unitPrice }}</div>
|
|
||||||
</div>
|
|
||||||
<view class="buyCount">
|
|
||||||
<div>已售 {{ item.buyCount || "0" }}</div>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { getstoreBaseInfo } from "@/api/store.js";
|
|
||||||
import {
|
|
||||||
receiveCoupons,
|
|
||||||
deleteGoodsCollection,
|
|
||||||
collectionGoods,
|
|
||||||
getGoodsIsCollect,
|
|
||||||
} from "@/api/members.js";
|
|
||||||
import { getGoodsList } from "@/api/goods.js";
|
|
||||||
import { getAllCoupons } from "@/api/promotions.js";
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
storeId: {
|
|
||||||
value: Number,
|
|
||||||
},
|
|
||||||
load: {
|
|
||||||
value: Boolean,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 店铺介绍按钮
|
|
||||||
storeInfo: "", //店铺详情
|
|
||||||
isCollection: false, //是否关注
|
|
||||||
recommandGoods: [], //推荐货物
|
|
||||||
couponList: [], //优惠券列表
|
|
||||||
params: {
|
|
||||||
pageNumber: 1,
|
|
||||||
pageSize: 50,
|
|
||||||
storeId: "",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {},
|
|
||||||
mounted(options) {
|
|
||||||
if (this.$options.filters.isLogin("auth")) {
|
|
||||||
getGoodsIsCollect("STORE", this.storeId).then((res) => {
|
|
||||||
this.isCollection = res.data.message;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.initStoreInfo();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 店铺信息
|
|
||||||
*/
|
|
||||||
initStoreInfo() {
|
|
||||||
uni.showLoading({
|
|
||||||
title: "加载中",
|
|
||||||
});
|
|
||||||
this.params.storeId = this.storeId;
|
|
||||||
getstoreBaseInfo(this.storeId).then((res) => {
|
|
||||||
if (res.data.success) {
|
|
||||||
this.storeInfo = res.data.result;
|
|
||||||
uni.hideLoading();
|
|
||||||
Promise.all([
|
|
||||||
getAllCoupons(this.params),
|
|
||||||
getGoodsList({ storeId: this.storeId }),
|
|
||||||
,
|
|
||||||
]).then((res) => {
|
|
||||||
this.couponList = res[0].data.result.records;
|
|
||||||
this.recommandGoods = res[1].data.result.content;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
uni.reLaunch({
|
|
||||||
url: "/",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 跳转到商品详情
|
|
||||||
*/
|
|
||||||
navigateToGoodsDetail(val) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/product/goods?id=${val.id}&goodsId=${val.goodsId}`,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 是否收藏
|
|
||||||
*/
|
|
||||||
whetherCollection() {
|
|
||||||
if (this.isCollection) {
|
|
||||||
deleteGoodsCollection("STORE", this.storeId).then((res) => {
|
|
||||||
if (res.statusCode === 200) {
|
|
||||||
this.isCollection = "error";
|
|
||||||
uni.showToast({
|
|
||||||
icon: "none",
|
|
||||||
duration: 3000,
|
|
||||||
title: "取消关注成功!",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
collectionGoods("STORE", this.storeId).then((res) => {
|
|
||||||
if (res.statusCode === 200) {
|
|
||||||
this.isCollection = "success";
|
|
||||||
uni.showToast({
|
|
||||||
icon: "none",
|
|
||||||
duration: 3000,
|
|
||||||
title: "关注成功!",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取优惠券
|
|
||||||
*/
|
|
||||||
getCoupon(item) {
|
|
||||||
if (!this.$options.filters.isLogin("auth")) {
|
|
||||||
uni.showToast({
|
|
||||||
icon: "none",
|
|
||||||
duration: 3000,
|
|
||||||
title: "请先登录!",
|
|
||||||
});
|
|
||||||
uni.redirectTo({
|
|
||||||
url: "/pages/passport/login",
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
receiveCoupons(item.id).then((res) => {
|
|
||||||
if (res.data.success) {
|
|
||||||
uni.showToast({
|
|
||||||
icon: "none",
|
|
||||||
duration: 3000,
|
|
||||||
title: "领取成功!",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.store-page {
|
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
|
||||||
.header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: #fff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
height: 90rpx;
|
|
||||||
line-height: 90rpx;
|
|
||||||
font-size: 30rpx;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
.tab-header {
|
|
||||||
position: fixed;
|
|
||||||
top: 90rpx;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 30rpx;
|
|
||||||
z-index: 9999;
|
|
||||||
background: #fff;
|
|
||||||
text {
|
|
||||||
width: 30%;
|
|
||||||
text-align: center;
|
|
||||||
&.cur {
|
|
||||||
color: #29bb9c;
|
|
||||||
font-size: 34rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header-line {
|
|
||||||
height: 1px;
|
|
||||||
background: #f2f2f2;
|
|
||||||
position: fixed;
|
|
||||||
top: 190rpx;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
.store-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 40rpx 40rpx 30rpx;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 128rpx;
|
|
||||||
height: 128rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 6px;
|
|
||||||
image {
|
|
||||||
width: 128rpx;
|
|
||||||
height: 128rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-name {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #999;
|
|
||||||
margin-left: -50rpx;
|
|
||||||
.name {
|
|
||||||
margin: 20rpx 0 16rpx;
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: #333;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.follow {
|
|
||||||
padding: 40rpx 0;
|
|
||||||
> view {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #fff;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
height: 56rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
background: $aider-light-color;
|
|
||||||
border-radius: 28rpx;
|
|
||||||
text {
|
|
||||||
font-size: 40rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.store-intro {
|
|
||||||
padding: 0 40rpx 18rpx;
|
|
||||||
.title,
|
|
||||||
.text {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #999999;
|
|
||||||
line-height: 48rpx;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
padding-left: 20rpx;
|
|
||||||
position: relative;
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
width: 1px;
|
|
||||||
height: 45rpx;
|
|
||||||
background: #999;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
position: relative;
|
|
||||||
&.close {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding-right: 46rpx;
|
|
||||||
}
|
|
||||||
&.open {
|
|
||||||
padding-right: 0;
|
|
||||||
white-space: wrap;
|
|
||||||
overflow: auto;
|
|
||||||
text-overflow: clip;
|
|
||||||
}
|
|
||||||
.zhankai {
|
|
||||||
width: 20rpx;
|
|
||||||
height: 20rpx;
|
|
||||||
position: absolute;
|
|
||||||
right: 10rpx;
|
|
||||||
bottom: 0;
|
|
||||||
border-top: 3px solid #999;
|
|
||||||
border-right: 3px solid #999;
|
|
||||||
&.close {
|
|
||||||
transform: rotateZ(135deg);
|
|
||||||
bottom: 15rpx;
|
|
||||||
}
|
|
||||||
&.open {
|
|
||||||
transform: rotateZ(-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.discount {
|
|
||||||
height: 189rpx;
|
|
||||||
border-top: 1px solid #f6f6f6;
|
|
||||||
border-bottom: 18rpx solid #f6f6f6;
|
|
||||||
background: #f6f6f6;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
.card-box {
|
|
||||||
display: inline-block;
|
|
||||||
padding-top: 25rpx;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
width: 324rpx;
|
|
||||||
height: 116rpx;
|
|
||||||
background: #fff;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.money {
|
|
||||||
width: 45%;
|
|
||||||
color: #fd6466;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
text {
|
|
||||||
font-size: 50rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.xian {
|
|
||||||
height: 66rpx;
|
|
||||||
border: 1px dashed #f6f6f6;
|
|
||||||
position: relative;
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
width: 22rpx;
|
|
||||||
height: 12rpx;
|
|
||||||
position: absolute;
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
border-radius: 0 0 22rpx 22rpx;
|
|
||||||
top: -30rpx;
|
|
||||||
left: -10rpx;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
border-radius: 22rpx 22rpx 0 0;
|
|
||||||
bottom: -30rpx;
|
|
||||||
left: -10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
flex: 1;
|
|
||||||
color: $aider-light-color;
|
|
||||||
font-size: 24rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-left: 14rpx;
|
|
||||||
text:nth-of-type(2) {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
.cur:nth-of-type(1) {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.hot,
|
|
||||||
.handpick {
|
|
||||||
.title {
|
|
||||||
height: 132rpx;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
line-height: 132rpx;
|
|
||||||
font-size: 32rpx;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
width: 44rpx;
|
|
||||||
height: 6rpx;
|
|
||||||
position: absolute;
|
|
||||||
background: #f0f1fc;
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
top: 63rpx;
|
|
||||||
left: 236rpx;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
border-radius: 22rpx 22rpx 0 0;
|
|
||||||
top: 63rpx;
|
|
||||||
right: 236rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.no-goods {
|
|
||||||
width: 100%;
|
|
||||||
height: 364rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 364rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.hot {
|
|
||||||
.contant {
|
|
||||||
height: 364rpx;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
.item-box {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
width: 216rpx;
|
|
||||||
margin-left: 15rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
image {
|
|
||||||
width: 212rpx;
|
|
||||||
height: 212rpx;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
color: #333;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 66rpx;
|
|
||||||
}
|
|
||||||
.price {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
color: #fd6466;
|
|
||||||
text {
|
|
||||||
font-size: 26rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
border-bottom: 18rpx solid #f9f9f9;
|
|
||||||
}
|
|
||||||
.item-img-recommand {
|
|
||||||
width: 324rpx !important;
|
|
||||||
height: 324rpx !important;
|
|
||||||
}
|
|
||||||
.item-img {
|
|
||||||
width: 212rpx !important;
|
|
||||||
height: 212rpx !important;
|
|
||||||
}
|
|
||||||
.handpick {
|
|
||||||
background: #fff;
|
|
||||||
.contant {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 40rpx;
|
|
||||||
.item {
|
|
||||||
width: 324rpx;
|
|
||||||
height: 484rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid #f8f8f8;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
image {
|
|
||||||
width: 324rpx;
|
|
||||||
height: 260rpx;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
text-align: left !important;
|
|
||||||
color: #333;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
line-height: 1.4em;
|
|
||||||
max-height: 2.8em; //height是line-height的整数倍,防止文字显示不全
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.price {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $main-color;
|
|
||||||
font-size: 30rpx;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.buyCount {
|
|
||||||
display: flex;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
font-size: 24upx;
|
|
||||||
justify-content: space-between;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottom {
|
|
||||||
background: #fff;
|
|
||||||
height: 90rpx;
|
|
||||||
text-align: center;
|
|
||||||
text {
|
|
||||||
color: #ccc;
|
|
||||||
font-size: 24rpx;
|
|
||||||
position: relative;
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
width: 180rpx;
|
|
||||||
height: 1px;
|
|
||||||
background: #f0f1fc;
|
|
||||||
position: absolute;
|
|
||||||
top: 20rpx;
|
|
||||||
left: -270rpx;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
width: 180rpx;
|
|
||||||
height: 1px;
|
|
||||||
background: #f0f1fc;
|
|
||||||
position: absolute;
|
|
||||||
top: 20rpx;
|
|
||||||
right: -200rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<u-navbar back-icon-color="#fff" :background="background" :border-bottom="false" title=""></u-navbar>
|
<u-navbar :custom-back="back" back-icon-color="#fff" :background="background" :border-bottom="false">
|
||||||
|
</u-navbar>
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<!-- 砍价列表 -->
|
<!-- 砍价列表 -->
|
||||||
@@ -15,7 +16,8 @@
|
|||||||
{{bargainDetail.goodsName}}
|
{{bargainDetail.goodsName}}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex price-box">
|
<div class="flex price-box">
|
||||||
<div class="purchase-price">当前:<span>¥{{ activityData.surplusPrice == 0 ? this.bargains.purchasePrice : activityData.surplusPrice | unitPrice}}</span>
|
<div class="purchase-price">
|
||||||
|
当前:<span>¥{{ activityData.surplusPrice == 0 ? this.bargains.purchasePrice : activityData.surplusPrice | unitPrice}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-price">原价:<span>¥{{ bargainDetail.price | unitPrice}}</span>
|
<div class="max-price">原价:<span>¥{{ bargainDetail.price | unitPrice}}</span>
|
||||||
|
|
||||||
@@ -26,22 +28,28 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 砍价进度 -->
|
<!-- 砍价进度 -->
|
||||||
<div class="bargain-progress">
|
<div class="bargain-progress">
|
||||||
<u-line-progress class="line" :active-color="lightColor" striped striped-active :percent="totalPercent"></u-line-progress>
|
<u-line-progress class="line" :active-color="lightColor" striped striped-active :percent="totalPercent">
|
||||||
|
</u-line-progress>
|
||||||
<div class="flex tips">
|
<div class="flex tips">
|
||||||
<div>已砍{{cutPrice}}元</div>
|
<div>已砍{{cutPrice}}元</div>
|
||||||
<div>还剩{{activityData.surplusPrice}}元</div>
|
<div>还剩{{activityData.surplusPrice}}元</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 参与砍价 -->
|
<!-- 参与砍价 -->
|
||||||
<div class="bargaining" v-if="!activityData.pass" @click="shareBargain">
|
<div class="bargaining" v-if="!activityData.pass && activityData.status!='END'" @click="shareBargain">
|
||||||
邀请砍价
|
邀请砍价
|
||||||
</div>
|
</div>
|
||||||
<!-- 立即购买 -->
|
<!-- 立即购买 -->
|
||||||
|
<div v-else>
|
||||||
|
|
||||||
<div class="buy" v-else @click="getGoodsDetail">
|
<div v-if="activityData.status!='END'" class="buy" @click="getGoodsDetail">
|
||||||
立即购买
|
立即购买
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 我要开团 -->
|
||||||
|
<div class="start" v-if="activityData.memberId != $options.filters.isLogin().id" @click="startOpenGroup">我要开团
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 帮砍列表 -->
|
<!-- 帮砍列表 -->
|
||||||
<div class="box box2">
|
<div class="box box2">
|
||||||
@@ -73,28 +81,30 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 砍价 -->
|
<!-- 砍价 -->
|
||||||
<u-modal title="恭喜您砍掉了" v-model="Bargaining" mask-close-able :show-confirm-button="false" :title-style="{color: lightColor}">
|
<u-modal title="恭喜您砍掉了" v-model="Bargaining" mask-close-able :show-confirm-button="false"
|
||||||
|
:title-style="{color: lightColor}">
|
||||||
<view class="slot-content">
|
<view class="slot-content">
|
||||||
<u-count-to :start-val="0" ref="uCountTo" font-size="100" :color="lightColor" :end-val="kanjiaPrice" :decimals="2" :autoplay="autoplay"></u-count-to><span class="price">元</span>
|
<u-count-to :start-val="0" ref="uCountTo" font-size="100" :color="lightColor" :end-val="kanjiaPrice"
|
||||||
|
:decimals="2" :autoplay="autoplay"></u-count-to><span class="price">元</span>
|
||||||
</view>
|
</view>
|
||||||
</u-modal>
|
</u-modal>
|
||||||
<!-- 帮砍 -->
|
<!-- 帮砍 -->
|
||||||
|
|
||||||
<u-modal :show-title="false" v-model="helpBargainFlage" :show-confirm-button="false">
|
<u-modal :show-title="false" v-model="helpBargainFlage" :show-confirm-button="false">
|
||||||
<view class="help-bargain" @click="handleClickHelpBargain">
|
<view class="help-bargain" @click="handleClickHelpBargain">
|
||||||
<u-image width="100%" height="600rpx" src="/pages/promotion/static/bargain.jpeg"></u-image>
|
<u-image width="100%" height="600rpx"
|
||||||
|
src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/91631d5a66c7426bbe3f7d644ee41946.jpeg"></u-image>
|
||||||
<u-image class="help" width="300rpx" height="80rpx" src="/pages/promotion/static/help-bargain.png"></u-image>
|
<u-image class="help" width="300rpx" height="80rpx" src="/pages/promotion/static/help-bargain.png"></u-image>
|
||||||
</view>
|
</view>
|
||||||
</u-modal>
|
</u-modal>
|
||||||
|
|
||||||
<!-- 分享 -->
|
<!-- 分享 -->
|
||||||
<shares @close="closeShare" :link="'/pages/promotion/bargain/detail?id='+routerVal.id+'&activityId='+activityData.id" type="kanjia" :thumbnail="bargainDetail.thumbnail"
|
<shares @close="closeShare" :link="share()" type="kanjia" :thumbnail="bargainDetail.thumbnail"
|
||||||
:goodsName="bargainDetail.goodsName" v-if="shareFlage " />
|
:goodsName="bargainDetail.goodsName" v-if="shareFlage " />
|
||||||
|
|
||||||
<!-- 购买 -->
|
<!-- 购买 -->
|
||||||
|
<popupGoods ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="bargainDetail"
|
||||||
<popupGoods :addr="addr" ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="bargainDetail" :goodsSpec="goodsSpec" v-if="bargainDetail.id "
|
:goodsSpec="goodsSpec" v-if="bargainDetail.id " @handleClickSku="getGoodsDetail" />
|
||||||
@handleClickSku="getGoodsDetail" />
|
|
||||||
|
|
||||||
<!-- 产品详情 -->
|
<!-- 产品详情 -->
|
||||||
<div class=" box4">
|
<div class=" box4">
|
||||||
@@ -105,7 +115,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import popupGoods from "@/pages/cart/payment/popup/goods"; //购物车商品的模块
|
import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
|
||||||
import {
|
import {
|
||||||
getBargainDetail,
|
getBargainDetail,
|
||||||
getBargainActivity,
|
getBargainActivity,
|
||||||
@@ -113,8 +123,8 @@ import {
|
|||||||
getBargainLog,
|
getBargainLog,
|
||||||
helpBargain,
|
helpBargain,
|
||||||
} from "@/api/promotions";
|
} from "@/api/promotions";
|
||||||
import { getGoods } from "@/api/goods.js";
|
|
||||||
import shares from "@/components/m-share/index";
|
import shares from "@/components/m-share/index";
|
||||||
|
import config from "@/config/config";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
shares,
|
shares,
|
||||||
@@ -163,6 +173,17 @@ export default {
|
|||||||
this.params.kanjiaActivityId = options.activityId;
|
this.params.kanjiaActivityId = options.activityId;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
onShareAppMessage(res) {
|
||||||
|
return {
|
||||||
|
path: this.share(),
|
||||||
|
title: `请快来帮我砍一刀${this.bargainDetail.goodsName}`,
|
||||||
|
imageUrl: this.thumbnail || config.logo,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
|
||||||
onShow() {
|
onShow() {
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
@@ -201,6 +222,32 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
share() {
|
||||||
|
return (
|
||||||
|
"/pages/promotion/bargain/detail?id=" +
|
||||||
|
this.routerVal.id +
|
||||||
|
"&activityId=" +
|
||||||
|
this.activityData.id
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// 返回上一级
|
||||||
|
back() {
|
||||||
|
// 进行路由栈判定如果当前路由栈是空的就返回拼团列表页面
|
||||||
|
if (getCurrentPages().length > 1) {
|
||||||
|
uni.navigateBack();
|
||||||
|
} else {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: `/pages/promotion/bargain/list`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 跳转选择商品页面
|
||||||
|
startOpenGroup() {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: `/pages/promotion/bargain/list`,
|
||||||
|
});
|
||||||
|
},
|
||||||
closePopupBuy(val) {
|
closePopupBuy(val) {
|
||||||
this.maskFlag = false;
|
this.maskFlag = false;
|
||||||
},
|
},
|
||||||
@@ -218,22 +265,12 @@ export default {
|
|||||||
title: "加载中",
|
title: "加载中",
|
||||||
mask: true,
|
mask: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$refs.popupGoods.buy({
|
this.$refs.popupGoods.buy({
|
||||||
skuId: this.bargainDetail.id,
|
skuId: this.bargainDetail.id,
|
||||||
|
id: this.routerVal.id,
|
||||||
num: 1,
|
num: 1,
|
||||||
cartType: "KANJIA",
|
cartType: "KANJIA",
|
||||||
});
|
});
|
||||||
// getGoods(this.bargainDetail.id, this.bargainDetail.goodsId).then(
|
|
||||||
// (response) => {
|
|
||||||
// this.goodsDetail = response.data.result.data;
|
|
||||||
// this.selectedGoods = response.data.result.data;
|
|
||||||
// this.goodsSpec = response.data.result.specs;
|
|
||||||
// uni.hideLoading();
|
|
||||||
|
|
||||||
// // this.maskFlag = true;
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 初始化商品以及砍价活动
|
// 初始化商品以及砍价活动
|
||||||
@@ -257,7 +294,7 @@ export default {
|
|||||||
let res = await getBargainActivity(this.params);
|
let res = await getBargainActivity(this.params);
|
||||||
// 判断当前是否是第一次进入,如果是第一次进入默认砍一刀
|
// 判断当前是否是第一次进入,如果是第一次进入默认砍一刀
|
||||||
res.data.success
|
res.data.success
|
||||||
? res.data.result
|
? res.data.result.launch
|
||||||
? (this.activityData = res.data.result)
|
? (this.activityData = res.data.result)
|
||||||
: this.openActivity()
|
: this.openActivity()
|
||||||
: "";
|
: "";
|
||||||
@@ -316,7 +353,7 @@ page {
|
|||||||
padding: 10rpx 0;
|
padding: 10rpx 0;
|
||||||
}
|
}
|
||||||
.wrapper {
|
.wrapper {
|
||||||
background: url("../static/Bargaining.png");
|
background: url("https://lilishop-oss.oss-cn-beijing.aliyuncs.com/aac88f4e8eff452a8010af42c4560b04.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
height: 700rpx;
|
height: 700rpx;
|
||||||
@@ -371,7 +408,23 @@ page {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.bargaining,
|
||||||
|
.buy,
|
||||||
|
.start {
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
width: 80%;
|
||||||
|
margin: 50rpx auto 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
font-size: 30rpx;
|
||||||
|
padding: 18rpx;
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
|
.start {
|
||||||
|
border: 1rpx solid $main-color;
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
.bargaining,
|
.bargaining,
|
||||||
.buy {
|
.buy {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<u-navbar back-icon-color="#fff" :background="background" :border-bottom="false" title=""></u-navbar>
|
<u-navbar :custom-back="back" back-icon-color="#fff" :background="background" :border-bottom="false" >
|
||||||
|
</u-navbar>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<!-- 砍价列表 -->
|
<!-- 砍价列表 -->
|
||||||
<div class="box">
|
<div class="box">
|
||||||
|
<!-- 已砍的商品 -->
|
||||||
<div class="bargain" v-if="bargainList.length!=0">
|
<div class="bargain" v-if="bargainList.length!=0">
|
||||||
<div class="flex bargain-item" v-for="(item,index) in bargainList" :key="index">
|
<div class="flex bargain-item" v-for="(item,index) in bargainList" :key="index">
|
||||||
<div class="goods-img">
|
<div class="goods-img">
|
||||||
@@ -34,7 +36,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
background: {
|
background: {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: "transparent",
|
||||||
},
|
},
|
||||||
params: {
|
params: {
|
||||||
promotionStatus: "START", //开始/上架
|
promotionStatus: "START", //开始/上架
|
||||||
@@ -45,16 +47,28 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
|
this.params.pageNumber = 1;
|
||||||
|
this.bargainList = [];
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
this.params.pageNumber++;
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 返回上一级
|
||||||
|
back() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/tabbar/home/index",
|
||||||
|
});
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 初始化砍价列表
|
* 初始化砍价列表
|
||||||
*/
|
*/
|
||||||
async init() {
|
async init() {
|
||||||
let res = await getBargainList(this.params); //砍价列表
|
let res = await getBargainList(this.params); //砍价列表
|
||||||
if (res.data.success) {
|
if (res.data.success) {
|
||||||
this.bargainList = res.data.result.records;
|
this.bargainList.push(...res.data.result.records);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -68,14 +82,13 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
page{
|
page {
|
||||||
background-color: $light-color !important;
|
background-color: $light-color !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
background: url("../static/Bargaining.png");
|
background: url("https://lilishop-oss.oss-cn-beijing.aliyuncs.com/aac88f4e8eff452a8010af42c4560b04.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
height: 700rpx;
|
height: 700rpx;
|
||||||
@@ -95,7 +108,6 @@ page{
|
|||||||
}
|
}
|
||||||
.bargain-item {
|
.bargain-item {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
border-bottom: 1rpx solid #f6f6f6;
|
border-bottom: 1rpx solid #f6f6f6;
|
||||||
padding: 32rpx 0;
|
padding: 32rpx 0;
|
||||||
}
|
}
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user