This commit is contained in:
唐明明
2021-10-28 14:17:59 +08:00
506 changed files with 15820 additions and 29553 deletions

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
unpackage
unpackage/*
node_modules

72
App.vue
View File

@@ -1,48 +1,36 @@
<script> <script>
export default { export default {
onLaunch: function() { onLaunch() {
// if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') { // if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') {
// handleFontSize(); // handleFontSize()
// } else { // } else {
// document.addEventListener('WeixinJSBridgeReady', handleFontSize, false); // document.addEventListener('WeixinJSBridgeReady', handleFontSize, false);
// } // }
// function handleFontSize() { // function handleFontSize() {
// // 设置网页字体为默认大小 // // 设置网页字体为默认大小
// WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 }); // WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
// // 重写设置网页字体大小的事件 // // 重写设置网页字体大小的事件
// WeixinJSBridge.on('menu:setfont', function() { // WeixinJSBridge.on('menu:setfont', function() {
// WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 }); // WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
// }); // })
// } // }
}, },
onShow(){ onShow() {
uni.getClipboardData({ console.log('App Show');
success: res=> { },
if(res.data.indexOf('$InviTaTiOn$CoDe/$-?') === 2){ onHide() {
this.globalData.parentId = res.data.replace('$InviTaTiOn$CoDe/$-?', '') console.log('App Hide');
} },
}, globalData: {
fail(err) { mainColor: 'white'
console.log(err)
}
})
},
onHide: function() {
console.log('App Hide')
},
globalData:{
parentId: ""
}
} }
};
</script> </script>
<style>
page{
background: #F5F5F5;
-webkit-text-size-adjust: 100% !important;
}
</style>
<style lang="scss"> <style lang="scss">
@import "uview-ui/index.scss"; @import 'uview-ui/index.scss';
page {
background: #f5f5f5;
-webkit-text-size-adjust: 100% !important;
}
</style> </style>

View File

@@ -0,0 +1,62 @@
/**
* zdx
* moduleName: 地址
*/
import { request } from '../index'
// 地址列表
const addresses = () => {
return request({
url: 'mall/addresses',
method: 'GET'
})
}
// 新增地址
const addAddresses = (data) => {
return request({
url: 'mall/addresses',
method: 'post',
data: data
})
}
// 根据地址id获取地址的详细信息
const getAddresses = (id) => {
return request({
url: 'mall/addresses/'+id,
method: 'get'
})
}
// 编辑
const editAddresses = (id,data) => {
return request({
url: 'mall/addresses/'+id,
method: 'put',
data:data
})
}
// 删除
const delAddresses = (id) => {
return request({
url: 'mall/addresses/'+id,
method: 'DELETE'
})
}
// 默认
const defaultAddresses = (id) => {
return request({
url: 'mall/addresses/'+id+'/default',
method: 'post'
})
}
export {
addresses,
addAddresses,
getAddresses,
editAddresses,
delAddresses,
defaultAddresses
}

View File

@@ -39,9 +39,27 @@ const appliesCategory = data => {
}) })
} }
// 企业广场
const companies = data => {
return request({
url: 'companies',
data
})
}
// 企业列表
const companiesList = data => {
return request({
url: 'companies/lists',
data
})
}
export { export {
appliesCreate, appliesCreate,
applies, applies,
appliesInfo, appliesInfo,
appliesCategory appliesCategory,
companies,
companiesList
} }

83
apis/interfaces/coupon.js Normal file
View File

@@ -0,0 +1,83 @@
/**
* Web-zdx
* moduleName: 优惠券相关
*/
import { request } from '../index'
// 我的优惠券
const myCoupon = (data) => {
return request({
url: 'coupons/user/coupons',
method: 'get',
data: data
})
}
// 优惠券分组列表
const getCouponsListById = (id,data) => {
return request({
url: 'coupons/user/coupons/'+id+'/list',
data:data
})
}
// 根据优惠券id获取优惠券的详情信息
const getCouponsInfoById = (id) => {
return request({
url: 'coupons/user/coupons/'+id,
})
}
// 根据企业id获取企业首页的轮播图列表
const couponsByCompanyId = (data) => {
return request({
url: 'coupons/all',
method: 'get',
data: data
})
}
// 领取优惠券
const couponsGrant = (id) => {
return request({
url: 'coupons/'+id+'/grant',
method: 'POST'
})
}
// 获取优惠券可使用商品
const getGoodsByGrantId = (data) => {
return request({
url: 'user/coupons/goods',
data: data
})
}
// 使用提货券兑换商品
const exchangeGoods = (data) => {
return request({
url: 'user/coupons/exchange',
method: 'POST',
data: data
})
}
// 获取核销二维码
const getQrcodeByGrantId = (data) => {
return request({
url: 'coupons/user/coupons/qrcode',
data: data
})
}
export {
myCoupon,
couponsByCompanyId,
couponsGrant,
getGoodsByGrantId,
exchangeGoods,
getCouponsListById,
getCouponsInfoById,
getQrcodeByGrantId
}

View File

@@ -106,6 +106,88 @@ const managesGoodsExtends = id => {
}) })
} }
// 领取优惠券
const managesCoupons = (id) => {
return request({
url: 'coupons/'+ id +'/grant',
method: 'POST'
})
}
// 商城首页
const mall = data => {
return request({
url: "mall"
})
}
// 商品列表
const list = data => {
return request({
url: "mall/goods",
data
})
}
// 通证权益 搜索页面
const searchUrl = (apiUrl,data) => {
return request({
url : apiUrl,
data: data
})
}
// 企业行业分类
const companyCategory = () => {
return request({
url : 'companies/industry'
})
}
// 商品分类搜索-默认关键字
const randgoodsUrl = (apiUrl, data) => {
return request({
url: apiUrl,
data: data
})
}
// 商品详情
const goods = id => {
return request({
url: 'mall/goods/' + id
})
}
// 商品分类
const goodsCategory = () => {
return request({
url : 'mall/categories'
})
}
// 商品确认商品信息页面get 下单页 post
const mallBuyGoods = (data, method) => {
return request({
url: 'mall/buy/goods',
method: method,
data: data
})
}
// 区块链证书
const managesChain = (id) => {
return request({
url: 'mall/goods/' + id + '/chain'
})
}
// 商品认证
const managesAttestation = (id) => {
return request({
url: 'mall/goods/' + id + '/message'
})
}
// 商品溯源
const managesTracedTo = (id) => {
return request({
url: 'mall/goods/' + id + '/trace'
})
}
export { export {
managesGoodsIndex, managesGoodsIndex,
managesGoodsMint, managesGoodsMint,
@@ -118,5 +200,17 @@ export {
managesGoodsEdit, managesGoodsEdit,
managesCreate, managesCreate,
managesGoodsPut, managesGoodsPut,
managesGoodsExtends managesGoodsExtends,
managesCoupons,
mall,
list,
searchUrl,
companyCategory,
randgoodsUrl,
goods,
goodsCategory,
mallBuyGoods,
managesChain,
managesAttestation,
managesTracedTo
} }

View File

@@ -0,0 +1,146 @@
/**
* Web-zdx
* moduleName: 我的数权
*/
import { request } from '../index'
// 我的数权
const mallWarrants = (data) => {
return request({
url: 'mall/warrants',
method: 'GET',
data: data
})
}
// 我的数权Id获取数权详情
const mallWarrantsList = (symbol) => {
return request({
url: 'mall/warrants/exchange',
method: 'GET',
data: {
symbol:symbol
}
})
}
// 确认提货
const mallWarrantsSure = (data) => {
return request({
url: 'mall/warrants/exchange',
method: 'POST',
data: data
})
}
// 我的邮寄订单,我的提货单
const mallShipmentsPostShop = (apiUrl,data) => {
return request({
url: apiUrl,
method: 'GET',
data: data
})
}
// 根据提货单的no 获取提货单的详情
const mallShipmentsInfo = (no) => {
return request({
url: 'mall/shipments/'+no,
method: 'GET'
})
}
// 取消提货单
const mallShipmentsCancel = (shipmentNo) => {
return request({
url: 'mall/shipments/'+ shipmentNo+'/cancel',
method: 'POST'
})
}
// 签收提货单
const mallShipmentsSign = (shipmentNo) => {
return request({
url: 'mall/shipments/'+ shipmentNo+'/sign',
method: 'POST'
})
}
// 退货单申请退货
const mallShipmentsRefund = (data) => {
return request({
url: 'mall/shipments/'+ data.shipment_no+'/refund',
method: 'POST',
data:data
})
}
// 退货单申请退货前置条件
const mallShipmentsRefundInfo = (shipmentNo) => {
return request({
url: 'mall/shipments/'+ shipmentNo+'/refund',
method: 'GET'
})
}
// 查看物流接口
const mallShipmentsLogistic = (shipmentNo) => {
return request({
url: 'mall/shipments/'+ shipmentNo+'/logistic',
method: 'GET'
})
}
// 我的退货单 mall/refunds
const mallRefunds = (data) => {
return request({
url: 'mall/refunds',
method: 'GET',
data: data
})
}
//退货单详情页
const mallRefundsInfo = (no) => {
return request({
url: 'mall/refunds/'+no,
method: 'GET'
})
}
// 确认退货mall/refunds/{refund}/deliver
const mallRefundsDeliver = (data) => {
return request({
url: 'mall/refunds/'+data.refund+'/deliver',
method: 'POST',
data:data
})
}
// 提货单或者服务单生成提货二维码
const mallWarrantsQrcode = (data) => {
return request({
url: 'mall/warrants/qrcode',
method: 'GET',
data:data
})
}
export {
mallWarrants,
mallWarrantsList,
mallWarrantsSure,
mallShipmentsPostShop,
mallShipmentsInfo,
mallShipmentsCancel,
mallShipmentsSign,
mallShipmentsRefund,
mallShipmentsRefundInfo,
mallShipmentsLogistic,
mallRefunds,
mallRefundsInfo,
mallRefundsDeliver,
mallWarrantsQrcode
}

47
apis/interfaces/order.js Normal file
View File

@@ -0,0 +1,47 @@
/**
* Web唐明明
* 匆匆数载恍如梦,岁月迢迢华发增。
* 碌碌无为枉半生,一朝惊醒万事空。
* moduleName: 订单
*/
import { request } from '../index'
// 创建,确认订单
const buy = (data, method) => {
return request({
url: 'mall/buy/goods',
method,
data
})
}
// eb支付
const eb = (no) => {
return request({
url: 'mall/pay/' + no + '/eb',
})
}
// 微信支付
const wxPay = (data) => {
return request({
url: 'mall/pay/' + data.order_no + '/wechat',
data: data,
method:'get'
})
}
// EB支付
const ebPay = (data) => {
return request({
url: 'mall/pay/' + data.order_no + '/eb'
})
}
export {
buy,
eb,
wxPay,
ebPay
}

BIN
components/.DS_Store vendored Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -13,11 +13,11 @@
{{item.price}}<text>易币</text> {{item.price}}<text>易币</text>
</view> </view>
<view class="price cny" v-if="priceType === 'CNY'"> <view class="price cny" v-if="priceType === 'CNY'">
<text></text>{{item.original_price}} <text></text>{{item.price.price_min}}
</view> </view>
<view class="sales"> <view class="sales">
<slot name="statistics" :value="item"> <slot name="statistics" :value="item">
{{item.sales}} {{item.sales}}
</slot> </slot>
</view> </view>
</view> </view>

View File

@@ -0,0 +1,225 @@
<template>
<view class="industry--list">
<block v-if="list.length > 0">
<view class="industry--box" v-for="(item, index) in list" :key="index" @click="industry(item)">
<image class="industry--cover" :src="item.cover" mode="aspectFill"></image>
<view class="industry--vip">{{item.level.name}}</view>
<view class="industry--content">
<view class="industry--title nowrap">{{item.name}}</view>
<view class="industry--credit">信用值 {{item.integrity}}</view>
<view class="industry--trade nowrap" v-if="item.industry">行业{{item.industry.title}}</view>
<view class="industry--bar">
<view class="industry--color">
<view class="industry--strip" :style="{width: item.process + '%'}"></view>
</view>
<view class="industry--per">{{item.process}}%</view>
</view>
<!-- <view class="industry--credibility">
<uni-rate
:readonly="true"
color="#ddd"
active-color="#e93340"
:value="item.star"
:size="14"
/>
</view> -->
<!-- <uni-icons class="industry--arrow" type="arrowright" color="#ddd" size="14" /> -->
<view class="industry--tool">
<view class="industry--deal">
权证数<text class="industry--number">{{item.goodsCount}}</text>
</view>
</view>
</view>
</view>
</block>
<block v-else>
<view class="industry--null">
</view>
</block>
</view>
</template>
<script>
export default {
name: "industry-list",
props: {
// 数据列表
list: {
type: Array,
default: () => {
return new Array
}
},
// 列表空提示
toast: {
type: String,
default: '暂无商品数据 -_-!'
}
},
methods: {
industry(e) {
this.$emit('on-industry', e)
}
}
}
</script>
<style lang="scss" scoped>
// 列表信息
.industry--list {
padding-bottom: $padding;
}
.industry--box {
position: relative;
margin: $margin - 10 $margin;
background: white;
border-radius: $radius/2;
padding: $padding ($padding*3) $padding ($padding * 2 + 128);
min-height: 128rpx;
.industry--vip {
position: absolute;
top: $padding;
left: $padding;
background-color: #191919;
color: #f3c8a8;
font-size: 24rpx;
line-height: 32rpx;
padding: 0 8rpx;
border-radius: 6rpx 6rpx 6rpx 0;
}
.industry--cover {
position: absolute;
left: $padding;
top: $padding;
width: 128rpx;
height: 128rpx;
}
.industry--title {
font-weight: bold;
font-size: $title-size-lg;
width: 80%;
line-height: 40rpx;
}
.industry--credit {
font-size: 22rpx;
display: inline-block;
font-weight: normal;
color: #ec652f;
border: 2rpx solid #ec652f;
line-height: 36rpx;
border-radius: 6rpx;
padding: 0 6rpx;
margin: 10rpx 0;
}
.industry--trade {
font-size: 24rpx;
color: $text-gray;
line-height: 40rpx;
}
.industry--bar {
display: flex;
width: 70%;
margin-top: 4rpx;
.industry--color {
background: #ebebeb;
border-left: 2rpx solid transparent;
border-right: 2rpx solid transparent;
width: calc(100% - 50rpx);
border-radius: 60rpx;
margin: 6rpx 10rpx 0 0;
height: 18rpx;
.industry--strip {
background-color: #ff8562;
border: 1px solid #ff8562;
border-radius: 10px;
box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
background-size: 3em 3em;
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ec3950 0.9em, #ec3950 2.1em, transparent 2.1em, transparent 2.9em, #ec3950 3.1em);
height: 14rpx;
border-radius: 60rpx;
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
height: 100%;
background-image: linear-gradient(to bottom, #db152e, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #db152e);
border-radius: 20rpx;
}
}
}
.industry--per {
font-size: 20rpx;
color: rgba(0, 0, 0, 0.8);
transform: scale(.8);
}
}
.industry--tool {
position: absolute;
top: 60rpx;
right: $padding;
.industry--deal {
width: 120rpx;
height: 120rpx;
text-align: center;
background: linear-gradient(to bottom, #e1293f, #f85d31);
box-shadow: 0 0 14rpx rgba(260, 60, 80, .9);
color: #FFFFFF;
font-size: 26rpx;
border-radius: 50%;
padding-top: 25rpx;
box-sizing: border-box;
font-size: 24rpx;
.industry--number {
font-size: 28rpx;
font-weight: 600;
display: block;
margin-top: 4rpx;
}
}
}
.industry--credibility {
padding-top: 8rpx;
height: 48rpx;
box-sizing: border-box;
}
.industry--arrow {
position: absolute;
right: $margin;
top: 50%;
margin-top: -7px;
}
}
// 数据空
.industry--null {
width: 100%;
padding: 20vh 0;
text-align: center;
font-size: $title-size-m;
color: $text-gray;
}
</style>

View File

@@ -0,0 +1,175 @@
<template>
<view class="MallRefundsTemplate">
<view class="top">
<view class="company">
<view class="company-logo">
<image :src="item.shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{item.shop.name}}</view>
</view>
<view class="no ellipsis">退货单号 {{item.refund_no}}</view>
</view>
<view class="status" style="color:#ff5500;">{{item.state.text}}</view>
</view>
<view class="goods-info" @click="goDetail(item.goods_sku.goods_id)">
<image class="goods-img" :src="item.goods_sku.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{item.goods_sku.goods_name}}</view>
<!-- <span>{{item.account.balance}}</span> -->
</view>
<view class="sku">权证个数 <span>x {{item.qty}}</span> </view>
<!-- <view class="sku">提货方式 <span> {{item.type_text}}</span> </view> -->
</view>
</view>
</view>
</template>
<script>
export default {
name: "MallRefundsTemplate",
data() {
return {
};
},
props: {
item: Object
},
methods: {
// 跳转到商品详情页面
goDetail(id) {
uni.navigateTo({
url: '/pages/goods/details?id=' + id
})
}
}
}
</script>
<style lang="scss" scoped>
.MallRefundsTemplate{
position: relative;
z-index: 0;
}
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-bottom: 20rpx;
border-bottom: solid 1rpx #f7f7f7;
position: relative;
z-index: 0;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 460rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 10rpx;
font-size: $title-size*0.8;
color: #999;
width: 500rpx;
}
.status {
color: #999;
font-size: $title-size*.9;
position: absolute;
top: 0;
right: 0;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 36rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
margin-bottom: 10rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
// width: 340rpx;
}
span {
font-size: 32rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
.flexrow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy {
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
</style>

View File

@@ -0,0 +1,172 @@
<template>
<view class="MallShipmentTemplate" >
<view class="top" >
<view class="company">
<view class="company-logo">
<image :src="item.shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{item.shop.name}}</view>
</view>
<view class="no ellipsis">发货单号 {{item.shipment_no}}</view>
<!-- <view class="no ellipsis">创建时间 {{item.created_at}}</view> -->
</view>
<view class="status" style="color:#DD524D;">{{item.state_text}}</view>
</view>
<view class="goods-info" @click="goDetail(item.goods_sku.goods_id)">
<image class="goods-img" :src="item.goods_sku.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{item.goods_sku.goods_name}}</view>
<!-- <span>{{item.account.balance}}</span> -->
</view>
<view class="sku">权证个数 <span>x {{item.qty}}</span> </view>
<view class="sku" v-if="item.goods_type === 2">使用方式 <span> 门店使用</span> </view>
<view class="sku" v-else>提货方式 <span> {{item.type_text}}</span> </view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "MallShipmentTemplate",
data() {
return {
};
},
props:{
item:Object
},
methods: {
// 跳转到商品详情页面
goDetail(id) {
uni.navigateTo({
url: '/pages/goods/details?id='+id
})
}
}
}
</script>
<style lang="scss" scoped>
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-bottom: 20rpx;
border-bottom: solid 1rpx #f7f7f7;
position: relative;
z-index: 0;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 460rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 10rpx;
font-size: $title-size*0.8;
color: #999;
width: 530rpx;
}
.status {
color: #999;
font-size: $title-size*.9;
position: absolute;
top: 0;
right: 0;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 36rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
margin-bottom: 10rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
// width: 340rpx;
}
span {
font-size: 32rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
.flexrow{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy{
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
</style>

View File

@@ -0,0 +1,178 @@
<template>
<view class="OrderTemplate" >
<view class="top" v-if="isTop">
<view class="company">
<view class="company-logo">
<image :src="item.shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{item.shop.name}}</view>
</view>
<view class="flexrow">
<view class="no ellipsis">区块链地址 {{item.account.addr}}</view> <span class="copy" @click="copy(item.account.addr)">复制</span>
</view>
</view>
</view>
<view class="goods-info" @click="goDetail(item.goods.goods_id)">
<image class="goods-img" :src="item.goods.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{item.goods.goods_name}}</view>
<!-- <span>{{item.account.balance}}</span> -->
</view>
<view class="sku">权证个数 <span>x {{item.account.balance}}</span> </view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "OrderTemplate",
data() {
return {
};
},
props:{
item : Object,
isTop : {
type: Boolean,
default: true
}
},
onShow() {
console.log(this.item,'onshow,numtempa')
},
methods: {
// 跳转到商品详情页面
goDetail(id) {
uni.navigateTo({
url: '/pages/goods/details?id='+id
})
},
// 复制
copy(e){
uni.setClipboardData({
data: e,
success: res=>{
console.log('res',res)
}
})
}
}
}
</script>
<style lang="scss" scoped>
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-bottom: 20rpx;
border-bottom: solid 1rpx #f7f7f7;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 600rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 10rpx;
font-size: $title-size*0.8;
color: #999;
width: 500rpx;
}
.status {
color: #999;
font-size: $title-size;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 36rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
margin-bottom: 10rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
// width: 340rpx;
}
span {
font-size: 32rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
.flexrow{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy{
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
</style>

BIN
components/v-tabs/.DS_Store vendored Normal file

Binary file not shown.

182
components/v-tabs/readme.md Normal file
View File

@@ -0,0 +1,182 @@
## 插件说明
> 这是 `v-tabs` 插件的升级版本,参数上有很大变动,支持 `H5` `小程序` `手机端`,如果是在之前的插件上升级的话,请注意参数的变更,触发的事件没有变更。
## 使用说明
### 1、最基本用法
- 视图文件
```html
<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
```
- 脚本文件
```js
export default {
data() {
return {
current: 0,
tabs: ['军事', '国内', '新闻新闻', '军事', '国内', '新闻', '军事', '国内', '新闻']
}
},
methods: {
changeTab(index) {
console.log('当前选中的项:' + index)
}
}
}
```
### 2、平铺整个屏幕
- 视图文件
```html
<v-tabs v-model="activeTab" :scroll="false" :tabs="['全部', '进行中', '已完成']"></v-tabs>
```
- 脚本文件
```js
export default {
data() {
return {
activeTab: 0
}
}
}
```
### 3、胶囊用法
- 视图文件
```html
<v-tabs v-model="current" :tabs="tabs" :pills="true" line-height="0" activeColor="#fff" @change="changeTab"></v-tabs>
```
- 脚本文件
```js
data() {
return {
current: 2,
tabs: [
'军事',
'国内',
'新闻新闻',
'军事',
'国内',
'新闻',
'军事',
'国内',
'新闻',
],
},
methods: {
changeTab(index) {
console.log('当前选中索引:' + index)
}
}
}
```
## 文档说明
### 1、属性说明
| 参数 | 类型 | 默认值 | 说明 |
| :---------------: | :-----: | :-------: | :----------------------------------------: |
| value | Number | 0 | 必传(双向绑定的值) |
| color | String | '#333' | 默认文字颜色 |
| activeColor | String | '#2979ff' | 选中文字的颜色 |
| fontSize | String | '28rpx' | 默认文字大小(rpx 或 px) |
| bold | Boolean | true | 是否加粗选中项 |
| scroll | Boolean | true | 是否显示滚动条,平铺设置 false |
| height | String | '70rpx' | tab 高度(rpx 或 px) |
| lineHeight | String | '10rpx' | 滑块高度(rpx 或 px) |
| lineColor | String | '#2979ff' | 滑块的颜色 |
| lineScale | Number | 0.5 | 滑块宽度缩放值 |
| lineRadius | String | '10rpx' | 滑块圆角宽度(rpx 或 px) |
| pills | Boolean | false | 是否开启胶囊 |
| pillsColor | String | '#2979ff' | 胶囊背景颜色(rpx 或 px) |
| pillsBorderRadius | String | '10rpx' | 胶囊圆角宽度(rpx 或 px) |
| field | String | '' | 如果 tabs 子项是对象,输入需要展示的键名 |
| bgColor | String | '#fff' | 背景色,支持 linear-gradient 渐变 |
| padding | String | '0' | 整个 tab padding 属性 |
| fixed | Boolean | false | 是否固定在顶部 |
| paddingItem | String | '0 22rpx' | 选项的边距(设置上下不生效,需要设置高度) |
### 2、事件说明
| 名称 | 参数 | 说明 |
| :----: | :---: | :--------------------------------: |
| change | index | 改变选中项触发, index 选中项的下标 |
## 更新日志
### 2020-09-24
1. 修复 `v-tabs` 第一次可能出现第一个标签显示不完整的情况
2. 修改了 `pages/tabs/order` 示例文件
### 2020-09-21
1. 修复添加 `fixed` 属性后,滚动条无效
2. 修复选项很少的情况下,下划线计算计算错误
3. 新增 `paddingItem` 属性,设置选项左右边距(上下边距需要设置 `height` 属性,或者设置 `padding` 属性)
**写在最后:**
欢迎各位老铁反馈 bug ,本人后端 PHP 一枚,只是应为感兴趣前端,自己琢磨,自己搞。如果你在使用的过程中有什么不合理,需要优化的,都可以在下面评论(或加我 QQ: 1207791534本人看见后回复、修正感谢。
### 2020-09-17
1. 紧急修复 bug横向滑动不了的情况
### 2020-09-16
1. 新增 `fixed` 属性,是否固定在顶部,示例地址:`pages/tabs/tabs-static`
2. 优化之前的页面结构
**注意:**
1. 使用 `padding` 属性的时候,尽量不要左右边距,会导致下划线位置不对
2. 如果不绑定 `v-model` 会导致 `change` 事件改变的时候,下划线不跟随问题
### 2020-09-09
1. 修复 `width` 错误dom 加载的时候没有及时获取到 `data` 属性导致的。
### 2020-08-29
1. 优化异步改变 `tabs` 后,下划线不初始化问题
2. `github` 地址上有图 2 的源码,需要的自行下载,页面路径:`pages/tabs/order`
### 2020-08-20
1. 优化 `节点查询``选中渲染`
2. 优化支付宝中 `createSelectorQuery()` 的影响
### 2020-08-19
1. 优化 `change` 事件触发机制
### 2020-08-16
1. 修改默认高度为 `70rpx`
2. 新增属性 `bgColor`,可设置背景颜色,默认 `#fff`
3. 新增整个 `tab``padding` 属性,默认 `0`
### 2020-08-13
1. 全新的 `v-tabs 2.0`
2. 支持 `H5` `小程序` `APP`
3. 属性高度可配置
## 预览
![v-tabs 2.0.1.gif](https://tva1.sinaimg.cn/large/007S8ZIlgy1ghsv40mj76g30ai0i2tsd.gif)
![v-tabs 2.0.2.gif](https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/42f3a920-a674-11ea-8a24-ffee00625e2e_1.png?v=1597912963)

View File

@@ -0,0 +1,339 @@
<template>
<view :id="elId" class="v-tabs">
<scroll-view
id="scrollContainer"
:scroll-x="scroll"
:scroll-left="scroll ? scrollLeft : 0"
:scroll-with-animation="scroll"
:style="{ position: fixed ? 'fixed' : 'relative', zIndex: 1993 }"
>
<view
class="v-tabs__container"
:style="{
display: scroll ? 'inline-flex' : 'flex',
whiteSpace: scroll ? 'nowrap' : 'normal',
background: bgColor,
height,
padding
}"
>
<view
class="v-tabs__container-item"
v-for="(v, i) in tabs"
:key="i"
:style="{
color: current == i ? activeColor : color,
fontSize: current == i ? fontSize : fontSize,
fontWeight: bold && current == i ? 'bold' : '',
justifyContent: !scroll ? 'center' : '',
flex: scroll ? '' : 1,
padding: paddingItem
}"
@click="change(i)"
>
{{ field ? v[field] : v }}
</view>
<view
v-if="!pills"
class="v-tabs__container-line"
:style="{
background: lineColor,
width: lineWidth + 'px',
height: lineHeight,
borderRadius: lineRadius,
left: lineLeft + 'px',
transform: `translateX(-${lineWidth / 2}px)`
}"
></view>
<view
v-else
class="v-tabs__container-pills"
:style="{
background: pillsColor,
borderRadius: pillsBorderRadius,
left: pillsLeft + 'px',
width: currentWidth + 'px',
height
}"
></view>
</view>
</scroll-view>
<view
class="v-tabs__placeholder"
:style="{
height: fixed ? height : '0',
padding
}"
></view>
</view>
</template>
<script>
/**
* v-tabs
* @property {Number} value 选中的下标
* @property {Array} tabs tabs 列表
* @property {String} bgColor = '#fff' 背景颜色
* @property {String} color = '#333' 默认颜色
* @property {String} activeColor = '#2979ff' 选中文字颜色
* @property {String} fontSize = '28rpx' 默认文字大小
* @property {String} activeFontSize = '28rpx' 选中文字大小
* @property {Boolean} bold = [true | false] 选中文字是否加粗
* @property {Boolean} scroll = [true | false] 是否滚动
* @property {String} height = '60rpx' tab 的高度
* @property {String} lineHeight = '10rpx' 下划线的高度
* @property {String} lineColor = '#2979ff' 下划线的颜色
* @property {Number} lineScale = 0.5 下划线的宽度缩放比例
* @property {String} lineRadius = '10rpx' 下划线圆角
* @property {Boolean} pills = [true | false] 是否胶囊样式
* @property {String} pillsColor = '#2979ff' 胶囊背景色
* @property {String} pillsBorderRadius = '10rpx' 胶囊圆角大小
* @property {String} field 如果是对象,显示的键名
* @property {Boolean} fixed = [true | false] 是否固定
* @property {String} paddingItem = '0 22rpx' 选项的边距
*
* @event {Function(current)} change 改变标签触发
*/
export default {
props: {
value: {
type: Number,
default: 0
},
tabs: {
type: Array,
default() {
return []
}
},
bgColor: {
type: String,
default: '#fff'
},
padding: {
type: String,
default: '0'
},
color: {
type: String,
default: '#333'
},
activeColor: {
type: String,
default: '#2979ff'
},
fontSize: {
type: String,
default: '28rpx'
},
activeFontSize: {
type: String,
default: '32rpx'
},
bold: {
type: Boolean,
default: true
},
scroll: {
type: Boolean,
default: true
},
height: {
type: String,
default: '70rpx'
},
lineColor: {
type: String,
default: '#2979ff'
},
lineHeight: {
type: String,
default: '10rpx'
},
lineScale: {
type: Number,
default: 0.5
},
lineRadius: {
type: String,
default: '10rpx'
},
pills: {
type: Boolean,
deafult: false
},
pillsColor: {
type: String,
default: '#2979ff'
},
pillsBorderRadius: {
type: String,
default: '10rpx'
},
field: {
type: String,
default: ''
},
fixed: {
type: Boolean,
default: false
},
paddingItem: {
type: String,
default: '0 22rpx'
}
},
data() {
return {
elId: '',
lineWidth: 30,
currentWidth: 0, // 当前选项的宽度
lineLeft: 0, // 滑块距离左侧的位置
pillsLeft: 0, // 胶囊距离左侧的位置
scrollLeft: 0, // 距离左边的位置
containerWidth: 0, // 容器的宽度
current: 0 // 当前选中项
}
},
watch: {
value(newVal) {
this.current = newVal
this.$nextTick(() => {
this.getTabItemWidth()
})
},
current(newVal) {
this.$emit('input', newVal)
},
tabs(newVal) {
this.$nextTick(() => {
this.getTabItemWidth()
})
}
},
methods: {
// 产生随机字符串
randomString(len) {
len = len || 32
let $chars =
'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
let maxPos = $chars.length
let pwd = ''
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
},
// 切换事件
change(index) {
if (this.current !== index) {
this.current = index
this.$emit('change', index)
}
},
// 获取左移动位置
getTabItemWidth() {
let query = uni
.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
// 获取容器的宽度
query
.select(`#scrollContainer`)
.boundingClientRect((data) => {
if (!this.containerWidth && data) {
this.containerWidth = data.width
}
})
.exec()
// 获取所有的 tab-item 的宽度
query
.selectAll('.v-tabs__container-item')
.boundingClientRect((data) => {
if (!data) {
return
}
let lineLeft = 0
let currentWidth = 0
if (data) {
for (let i = 0; i < data.length; i++) {
if (i < this.current) {
lineLeft += data[i].width
} else if (i == this.current) {
currentWidth = data[i].width
} else {
break
}
}
}
// 当前滑块的宽度
this.currentWidth = currentWidth
// 缩放后的滑块宽度
this.lineWidth = currentWidth * this.lineScale * 1
// 滑块作移动的位置
this.lineLeft = lineLeft + currentWidth / 2
// 胶囊距离左侧的位置
this.pillsLeft = lineLeft
// 计算滚动的距离左侧的位置
if (this.scroll) {
this.scrollLeft = this.lineLeft - this.containerWidth / 2
}
})
.exec()
}
},
mounted() {
this.elId = 'xfjpeter_' + this.randomString()
this.current = this.value
this.$nextTick(() => {
this.getTabItemWidth()
})
}
}
</script>
<style lang="scss" scoped>
.v-tabs {
width: 100%;
box-sizing: border-box;
overflow: hidden;
::-webkit-scrollbar {
display: none;
}
&__container {
min-width: 100%;
position: relative;
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
&-item {
display: flex;
align-items: center;
height: 100%;
position: relative;
z-index: 10;
// padding: 0 11px;
transition: all 0.3s;
white-space: nowrap;
}
&-line {
position: absolute;
bottom: 0;
transition: all 0.3s linear;
}
&-pills {
position: absolute;
transition: all 0.3s linear;
z-index: 9;
}
}
}
</style>

View File

@@ -0,0 +1,355 @@
<template>
<view class="wrapper" v-show="isShowMask">
<transition name="content">
<view class="content_view" v-show="isShow">
<view class="title_view">
<view class="title">请选择所在地区</view>
<view class="close_view" @click="hidden">
<icon class="close_icon" :type="'clear'" size="26" />
</view>
</view>
<view class="select_top">
<view class="select_top_item" ref="select_top_item" v-for="(item,index) in dataList" :key="index"
@click="select_top_item_click(index)">
<text class="address_value">{{item.name || '请选择'}}</text>
<view :class="index === currentIndex?'indicator':'no-indicator'" ref="indicator"></view>
</view>
</view>
<swiper class="swiper" :current="currentIndex" @change="swiperChange">
<swiper-item v-for="(swiper_item,swiper_index) in dataList" :key="swiper_index">
<view class="swiper-item">
<scroll-view class="scroll-view-item" scroll-y="true">
<view class="address_item" v-for="(item,index) in cityAreaArray[swiper_index]" :key="index"
@click="address_item_click(swiper_index,index)">
{{item.name}}
<uni-icons class="address_item_icon" v-if="selectIndexArr[swiper_index] === index"
type="checkmarkempty" color="#009b69"></uni-icons>
</view>
</scroll-view>
</view>
</swiper-item>
</swiper>
</view>
</transition>
<view class="mask" @click="hidden" v-show="isShowMask"></view>
</view>
</template>
<script>
import cityData from '../../static/yixuan-selectAddress/city.json'
export default {
data() {
return {
isShow: false,
isShowMask: false,
dataList: ['请选择'],
currentIndex: 0,
cityData: {}, // 省市区对象
cityAreaArray: [], // 省市区数组
selectIndexArr: [], // 省市区index
indicatorStyleLeft: 16
};
},
props: {
addressIdList: {
type: Array
}
},
methods: {
show() {
this.isShow = true
this.isShowMask = true
},
hidden() {
this.isShow = false
setTimeout(() => {
this.isShowMask = false
}, 500);
},
select_top_item_click(index) {
console.log('select_top_item_click')
this.currentIndex = index
this.$nextTick(() => {
this.changeIndicator(index)
})
},
swiperChange(event) {
let index = event.detail.current
this.currentIndex = index
this.changeIndicator(index)
},
changeIndicator(index) {
let indicatorWidth = 30
const query = uni.createSelectorQuery().in(this);
let arr = query.selectAll('.select_top_item .address_value')
arr.fields({
size: true,
scrollOffset: false
}, data => {
let itemWidth = data[index]["width"] > 80 ? 70 : data[index]["width"]
let itemCenterX = 10 + index * 80 + itemWidth / 2
let left = itemCenterX - indicatorWidth / 2
// console.log('changeIndicator',itemWidth,index)
this.indicatorStyleLeft = left
}).exec();
},
address_item_click(swiper_index, index) {
this.selectIndexArr.splice(swiper_index, 5, index)
//判断当前是否为最下一级
if (swiper_index === 0) { //第一级
let currentObj = this.cityData[index]
let city = {
name: currentObj.name,
id: currentObj.region_id
}
console.log(city)
this.dataList.splice(swiper_index, 5, city)
this.dataList.splice(swiper_index + 1, 0, '请选择')
this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["city"])
console.log(this.cityAreaArray)
setTimeout(() => {
this.currentIndex = 1
this.changeIndicator(1)
}, 50);
} else {
let currentAreaArray = this.cityAreaArray[swiper_index]
let currentObj = currentAreaArray[index]
let area = currentObj["area"]
console.log(currentAreaArray)
if (area !== undefined) {
let city = {
name: currentObj.name,
id: currentObj.region_id
}
this.dataList.splice(swiper_index, 5, city)
this.dataList.splice(swiper_index + 1, 0, '请选择')
this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["area"])
setTimeout(() => {
this.currentIndex = swiper_index + 1
this.changeIndicator(swiper_index + 1)
}, 50);
} else { //是最下一级
let city = {
name: currentObj.name,
id: currentObj.region_id
}
this.dataList.splice(swiper_index, 1, city)
//选择成功返回数据
this.$emit("selectAddress", this.dataList)
this.$nextTick(() => {
this.changeIndicator(swiper_index)
})
setTimeout(() => {
this.isShow = false
}, 100);
setTimeout(() => {
this.isShowMask = false
}, 500);
}
}
}
},
created() {
this.cityData = cityData
this.cityAreaArray.push(cityData)
if (this.addressIdList.length > 0) {
const privinceId = this.addressIdList[0] // 省份id请求接口返回
const cityId = this.addressIdList[1] // 城市id请求接口返回
const areaId = this.addressIdList[2] // 区域id请求接口返回
const privince = cityData // 省份数组
let city = [] // 城市数组
let area = [] // 区域数组
let cityAreaArray = []
let selectIndexArr = []
let dataList = []
let pIndex = privince.findIndex((item) => item.region_id === privinceId) // 省份的id
cityAreaArray.push(privince)
selectIndexArr.push(pIndex)
dataList.push(privince[pIndex])
city = privince[pIndex].city
let cIndex = city.findIndex((item) => item.region_id === cityId) // 城市的id
cityAreaArray.push(city)
selectIndexArr.push(cIndex)
dataList.push(city[cIndex])
area = city[cIndex].area
let aIndex = area.findIndex((item) => item.region_id === areaId) // 城市的id
cityAreaArray.push(area)
selectIndexArr.push(aIndex)
dataList.push(area[aIndex])
this.cityAreaArray = cityAreaArray
this.selectIndexArr = selectIndexArr
this.dataList = dataList
this.$emit("selectAddress", this.dataList)
}
}
}
</script>
<style lang="scss">
// 不换行
@mixin no-wrap() {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.wrapper {
z-index: 1999;
position: absolute;
top: -44px;
left: 0;
bottom: 0;
right: 0;
.content_view {
z-index: 999;
background: white;
position: absolute;
height: 60%;
left: 0;
bottom: 0;
right: 0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
.title_view {
height: 120rpx;
display: flex;
justify-content: center;
align-items: center;
padding: 0 $uni-spacing-row-sm;
position: relative;
border-bottom: solid 1rpx #f8f8f8;
.title {
font-size: uni-font-size-sm;
}
.close_view {
height: 60px;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
}
}
.select_top {
height: 8%;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 20rpx 0 20rpx;
position: relative;
margin: 30rpx 0 50rpx 0;
box-sizing: border-box;
.select_top_item {
max-width: 33.33%;
float: left;
font-size: $title-size - 1;
color: $text-price;
text-align: left;
@include no-wrap();
margin-right: $margin*1;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// box-sizing: border-box;
}
.indicator {
width: 30px;
height: 2px;
margin-top: 20rpx;
background: $text-price;
transition: left 0.5s ease;
}
.no-indicator {
background: #fff;
width: 30px;
height: 2px;
margin-top: 20rpx;
transition: left 0.5s ease;
}
}
.swiper {
height: 70%;
position: relative;
left: 0;
top: 0;
bottom: 0;
right: 0;
.swiper-item {
height: 100%;
.scroll-view-item {
height: 100%;
padding: 0 10px;
.address_item {
padding: $padding*1.5 0;
border-bottom: solid 0.2rpx #f7f7f7;
font-size: $title-size - 1;
display: flex;
align-items: center;
.address_item_icon {
margin-left: 20rpx;
// width: 20px;
// height: 20px;
// margin-right: 10px;
}
}
}
}
}
}
.mask {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: $uni-text-color-grey;
opacity: 0.7;
}
}
.content-enter {
transform: translateY(100%);
}
.content-enter-to {
transform: translateY(0%);
}
.content-enter-active {
transition: transform 0.5s;
}
.content-leave {
transform: translateY(0%);
}
.content-leave-to {
transform: translateY(100%);
}
.content-leave-active {
transition: transform 0.5s;
}
</style>

View File

@@ -18,6 +18,78 @@
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, { }, {
"path": "pages/equity/index",
"name": "equity",
"auth": true,
"style": {
"navigationBarTitleText": "通证商城",
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
}
}, {
"path": "pages/equity/search",
"name": "Search",
"auth": true,
"style": {
"navigationBarTitleText": "搜索列表"
}
}, {
"path": "pages/goods/goodsClassify",
"name": "goodsClassify",
"style": {
"navigationBarTitleText": "商品分类",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "pages/goods/lists",
"name": "goodsList",
"style": {
"navigationBarTitleText": "商品列表",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "pages/goods/confirmOrder",
"name": "ConfirmOrder",
"style": {
"navigationBarTitleText": "订单确认页面",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd"
}
},
{
"path": "pages/goods/payStatus",
"name": "PayStatus",
"style": {
"navigationBarTitleText": "支付状态",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd"
}
},
{
"path": "pages/goods/chain",
"name": "GoodsChain",
"style": {
"navigationBarTitleText": "区块链证书",
"navigationBarBackgroundColor": "#FFFFFF"
}
}, {
"path": "pages/goods/attestation",
"name": "GoodsAttestation",
"style": {
"navigationBarTitleText": "商品认证",
"navigationBarBackgroundColor": "#FFFFFF"
}
}, {
"path": "pages/goods/tracedTo",
"name": "GoodstracedTo",
"style": {
"navigationBarTitleText": "商品溯源",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "pages/user/index", "path": "pages/user/index",
"name": "User", "name": "User",
"auth": true, "auth": true,
@@ -41,7 +113,87 @@
} }
} }
} }
},
{
"path": "pages/user/order/numberWeight",
"name": "NumberWeight",
"style": {
"navigationBarTitleText": "我的权证",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd"
}
},
{
"path": "pages/user/order/numberWeightInfo",
"name": "NumberWeightInfo",
"style": {
"navigationBarTitleText": "权证详情",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd"
}
},
{
"path": "pages/user/order/servicesOrder",
"name": "ServicesOrder",
"style": {
"enablePullDownRefresh": true,
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd",
"navigationBarTitleText": "已使用服务类订单"
}
}, { }, {
"path": "pages/user/order/servicesOrderInfo",
"name": "ServicesOrderInfo",
"style": {
"enablePullDownRefresh": true,
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd",
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/user/order/mallShipments",
"name": "MallShipments",
"style": {
"navigationBarTitleText": "已经提货",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd"
}
}, {
"path": "pages/user/order/logistics",
"name": "Orderlogistics",
"style": {
"navigationBarTitleText": "查看物流",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd"
}
}, {
"path": "pages/user/order/mallShipmentsInfo",
"name": "MallShipmentsInfo",
"style": {
"navigationBarTitleText": "提货单详情页面",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd"
}
},
{
"path": "pages/user/address/list",
"name": "AddressList",
"style": {
"navigationBarTitleText": "地址管理",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd"
}
}, {
"path": "pages/user/address/create",
"name": "AddressCreate",
"style": {
"navigationBarTitleText": "地址新增",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#8b64fd"
}
},
{
"path": "pages/user/code", "path": "pages/user/code",
"name": "userCode", "name": "userCode",
"auth": false, "auth": false,
@@ -127,6 +279,21 @@
"style": { "style": {
"navigationBarTitleText": "发布商品类目" "navigationBarTitleText": "发布商品类目"
} }
},{
"path": "pages/goods/details",
"name": "goodsDetails",
"style": {
"navigationBarTitleText": "",
"titleNView": {
"backgroundColor": "#FFFFFF",
"type": "transparent",
"buttons": [{
"text": "分享",
"fontSize": "12",
"color": "#555555"
}]
}
}
}, { }, {
"path": "pages/goods/add", "path": "pages/goods/add",
"name": "goodsAdd", "name": "goodsAdd",
@@ -447,6 +614,11 @@
"iconPath": "static/tabBar/tabBar_icon_01.png", "iconPath": "static/tabBar/tabBar_icon_01.png",
"selectedIconPath": "static/tabBar/tabBar_show_01.png", "selectedIconPath": "static/tabBar/tabBar_show_01.png",
"pagePath": "pages/found/index" "pagePath": "pages/found/index"
},{
"text": "通证商城",
"iconPath": "static/tabBar/tabBar_icon_01.png",
"selectedIconPath": "static/tabBar/tabBar_show_01.png",
"pagePath": "pages/equity/index"
}, { }, {
"text": "节点中心", "text": "节点中心",
"iconPath": "static/tabBar/tabBar_icon_02.png", "iconPath": "static/tabBar/tabBar_icon_02.png",
@@ -455,6 +627,7 @@
}] }]
}, },
"easycom": { "easycom": {
"nv": "@/uni_modules/pyh-nv/components/pyh-nv/pyh-nv.vue",
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
} }
} }

View File

@@ -7,7 +7,8 @@
<view class="white-box"> <view class="white-box">
<view class="inputs logo"> <view class="inputs logo">
<label>企业LOGO</label> <label>企业LOGO</label>
<image class="logo-cover" :src="logo.showpath || require('@/static/icons/add-icon.png')" @click="updImg('logo')" mode="aspectFill"></image> <image class="logo-cover" :src="logo.showpath || require('@/static/icons/add-icon.png')"
@click="updImg('logo')" mode="aspectFill"></image>
</view> </view>
<view class="inputs"> <view class="inputs">
<label>企业名称</label> <label>企业名称</label>
@@ -15,7 +16,8 @@
</view> </view>
<view class="inputs"> <view class="inputs">
<label>企业行业</label> <label>企业行业</label>
<picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title" @change="changePicker" data-type="industry"> <picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title"
@change="changePicker" data-type="industry">
<view class="picker-text nowrap"> <view class="picker-text nowrap">
{{industry[industryIndex].title}} {{industry[industryIndex].title}}
<uni-icons class="picker-icon" type="arrowdown"></uni-icons> <uni-icons class="picker-icon" type="arrowdown"></uni-icons>
@@ -26,12 +28,17 @@
<label>经营类目</label> <label>经营类目</label>
<view class="picker-text nowrap" @click="opnePopup"> <view class="picker-text nowrap" @click="opnePopup">
<block v-if="categorys.length > 0"> <block v-if="categorys.length > 0">
<text class="text-item" v-for="(item, index) in category" :key="index" v-if="item.check">{{item.name}}</text> <text class="text-item" v-for="(item, index) in category" :key="index"
v-if="item.check">{{item.name}}</text>
</block> </block>
<block v-else>选择经营类目</block> <block v-else>选择经营类目</block>
<uni-icons class="picker-icon" type="arrowdown"></uni-icons> <uni-icons class="picker-icon" type="arrowdown"></uni-icons>
</view> </view>
</view> </view>
<view class="inputs" v-if="is_range">
<label>经营范围</label>
<textarea :auto-height='true' v-model="range" placeholder="输入经营范围" />
</view>
<view class="inputs"> <view class="inputs">
<label>法人姓名</label> <label>法人姓名</label>
<input type="text" v-model="corporate" placeholder="输入法人姓名" /> <input type="text" v-model="corporate" placeholder="输入法人姓名" />
@@ -46,7 +53,8 @@
</view> </view>
<view class="inputs logo"> <view class="inputs logo">
<label>营业执照</label> <label>营业执照</label>
<image class="license-cover" :src="license.showpath || require('@/static/icons/add-icon.png')" @click="updImg('license')" mode="aspectFill"></image> <image class="license-cover" :src="license.showpath || require('@/static/icons/add-icon.png')"
@click="updImg('license')" mode="aspectFill"></image>
</view> </view>
<view class="btns"> <view class="btns">
<button type="default" size="default" @click="submitApplies">提交认证</button> <button type="default" size="default" @click="submitApplies">提交认证</button>
@@ -60,7 +68,8 @@
<view class="subtitle">请选择经营类目</view> <view class="subtitle">请选择经营类目</view>
</view> </view>
<view class="category-flex"> <view class="category-flex">
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in category" :key="index" @click="item.check = !item.check">{{item.name}}</view> <view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in category"
:key="index" @click="item.check = !item.check">{{item.name}}</view>
</view> </view>
<view class="btns"> <view class="btns">
<button type="default" size="default" @click="affirmCategory">确定</button> <button type="default" size="default" @click="affirmCategory">确定</button>
@@ -71,120 +80,134 @@
</template> </template>
<script> <script>
import { appliesCreate, applies, appliesInfo, appliesCategory } from '@/apis/interfaces/company' import {
import { uploads } from '@/apis/interfaces/uploading' appliesCreate,
applies,
appliesInfo,
appliesCategory
} from '@/apis/interfaces/company'
import {
uploads
} from '@/apis/interfaces/uploading'
export default { export default {
data() { data() {
return { return {
formType : "", formType: "",
name : "", name: "",
corporate : "", corporate: "",
identity : "", identity: "",
org : "", org: "",
logo : { logo: {
showpath: '', showpath: '',
path : '' path: ''
}, },
license : { license: {
showpath: '', showpath: '',
path : '' path: ''
}, },
industry : [], industry: [],
industryIndex: 0, industryIndex: 0,
reason : '', reason: '',
category : [], category: [],
categorys : [] categorys: [],
range: "",
is_range: false,
}; };
}, },
created(){ created() {
// 读取配置信息 // 读取配置信息
appliesCreate().then(res=>{ appliesCreate().then(res => {
this.industry = res this.industry = res.industries
this.formType = this.$Route.query.form_type this.formType = this.$Route.query.form_type
if(this.formType === 'put'){ this.is_range = res.is_range
if (this.formType === 'put') {
appliesInfo().then(formValue => { appliesInfo().then(formValue => {
for(let val of formValue.categories){ for (let val of formValue.categories) {
if(val.check){ if (val.check) {
this.categorys.push(val.category_id) this.categorys.push(val.category_id)
} }
} }
this.name = formValue.name this.range = formValue.range
this.industryIndex = this.industry.findIndex(val=> val.industry_id === formValue.industry.industry_id) this.name = formValue.name
this.category = formValue.categories this.industryIndex = this.industry.findIndex(val => val.industry_id === formValue
this.corporate = formValue.certification.name .industry.industry_id)
this.identity = formValue.certification.idcard this.category = formValue.categories
this.org = formValue.certification.code this.corporate = formValue.certification.name
this.logo = formValue.cover this.identity = formValue.certification.idcard
this.license = formValue.certification.license this.org = formValue.certification.code
this.logo = formValue.cover
this.license = formValue.certification.license
}).catch(valueErr => { }).catch(valueErr => {
uni.showToast({ uni.showToast({
title: valueErr.message, title: valueErr.message,
icon : 'none' icon: 'none'
}) })
}) })
}else{ } else {
this.getAppliesCategory(res[0].industry_id) console.log('11', res)
this.getAppliesCategory(res.industries[0].industry_id)
} }
}).catch(err =>{ }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
icon : 'none' icon: 'none'
}) })
}) })
}, },
methods:{ methods: {
// 选择经营类目 // 选择经营类目
opnePopup(){ opnePopup() {
this.$refs.categoryPopup.open('bottom') this.$refs.categoryPopup.open('bottom')
}, },
// 确认选择类目 // 确认选择类目
affirmCategory(){ affirmCategory() {
this.categorys = [] this.categorys = []
for(let val of this.category){ for (let val of this.category) {
if(val.check){ if (val.check) {
this.categorys.push(val.category_id) this.categorys.push(val.category_id)
} }
} }
this.$refs.categoryPopup.close() this.$refs.categoryPopup.close()
}, },
// 提交信息 // 提交信息
submitApplies(){ submitApplies() {
let method = this.formType === 'put' ? 'PUT' : 'POST' let method = this.formType === 'put' ? 'PUT' : 'POST'
applies({ applies({
name : this.name, name: this.name,
cover : this.logo.path, cover: this.logo.path,
license : this.license.path, license: this.license.path,
user_name : this.corporate, user_name: this.corporate,
id_card : this.identity, id_card: this.identity,
code : this.org, code: this.org,
industry_id : this.industry[this.industryIndex].industry_id, industry_id: this.industry[this.industryIndex].industry_id,
categories : this.categorys categories: this.categorys,
range: this.range
}, method).then(res => { }, method).then(res => {
uni.showModal({ uni.showModal({
title : '提示', title: '提示',
content : '您的企业认证信息已提交审核需3-7个工作日请耐心等待', content: '您的企业认证信息已提交审核需3-7个工作日请耐心等待',
showCancel : false, showCancel: false,
confirmText : '确认', confirmText: '确认',
success : resModal => { success: resModal => {
this.$Router.back() this.$Router.back()
} }
}) })
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
icon : 'none' icon: 'none'
}) })
}) })
}, },
// 选择器 // 选择器
changePicker(e){ changePicker(e) {
this.industryIndex = e.detail.value this.industryIndex = e.detail.value
this.getAppliesCategory(this.industry[e.detail.value].industry_id) this.getAppliesCategory(this.industry[e.detail.value].industry_id)
}, },
// 获取经营类目 // 获取经营类目
getAppliesCategory(id){ getAppliesCategory(id) {
appliesCategory({ appliesCategory({
industry: id, industry: id,
}).then(res => { }).then(res => {
@@ -192,18 +215,18 @@
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
icon : 'none' icon: 'none'
}) })
}) })
}, },
// 上传图片 // 上传图片
updImg(type){ updImg(type) {
uni.chooseImage({ uni.chooseImage({
count : 1, count: 1,
success : path => { success: path => {
uploads([{ uploads([{
uri : path.tempFilePaths[0] uri: path.tempFilePaths[0]
}]).then(res => { }]).then(res => {
this[type] = { this[type] = {
showpath: res.url[0], showpath: res.url[0],
@@ -212,7 +235,7 @@
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
icon : 'none' icon: 'none'
}) })
}) })
} }
@@ -224,30 +247,34 @@
<style lang="scss" scoped> <style lang="scss" scoped>
// 内容 // 内容
.content{ .content {
.header{ .header {
padding: $padding * 2 0; padding: $padding * 2 0;
box-sizing: border-box; box-sizing: border-box;
@extend .vertical; @extend .vertical;
.title{
.title {
text-align: center; text-align: center;
font-size: $title-size + 14; font-size: $title-size + 14;
font-weight: bold; font-weight: bold;
line-height: 90rpx; line-height: 90rpx;
} }
.subtitle{
.subtitle {
font-size: $title-size-m; font-size: $title-size-m;
color: $text-gray; color: $text-gray;
text-align: center; text-align: center;
} }
} }
.white-box{
.white-box {
background-color: white; background-color: white;
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
min-height: 85vh; min-height: 85vh;
padding: $padding $padding * 2 $padding * 2; padding: $padding $padding * 2 $padding * 2;
box-sizing: border-box; box-sizing: border-box;
.inputs{
.inputs {
position: relative; position: relative;
margin-top: $margin; margin-top: $margin;
background: white; background: white;
@@ -255,38 +282,46 @@
padding-left: 200rpx; padding-left: 200rpx;
line-height: 90rpx; line-height: 90rpx;
min-height: 90rpx; min-height: 90rpx;
label{
label {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 200rpx; width: 200rpx;
font-size: $title-size; font-size: $title-size;
} }
input{
input {
height: 90rpx; height: 90rpx;
line-height: 90rpx; line-height: 90rpx;
font-size: $title-size; font-size: $title-size;
} }
.picker-text{
.picker-text {
position: relative; position: relative;
padding-right: 90rpx; padding-right: 90rpx;
.picker-icon{
.picker-icon {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
} }
.text-item{
.text-item {
margin-left: 10rpx; margin-left: 10rpx;
&:first-child{
&:first-child {
margin-left: 0; margin-left: 0;
} }
} }
} }
} }
.logo{
.logo {
height: $padding + 98; height: $padding + 98;
padding-bottom: $padding; padding-bottom: $padding;
.logo-cover{
.logo-cover {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@@ -295,39 +330,47 @@
background: $border-color-lg; background: $border-color-lg;
border-radius: 50%; border-radius: 50%;
} }
.license-cover{
.license-cover {
@extend .logo-cover; @extend .logo-cover;
border-radius: 0; border-radius: 0;
width: 131rpx; width: 131rpx;
} }
} }
.btns{
.btns {
padding-top: $padding * 2; padding-top: $padding * 2;
button{
button {
background: $mian-color; background: $mian-color;
border-radius: 0; border-radius: 0;
height: 90rpx; height: 90rpx;
line-height: 90rpx; line-height: 90rpx;
font-size: $title-size; font-size: $title-size;
color: white; color: white;
&::after{
&::after {
border: none; border: none;
} }
} }
} }
} }
// 经营类目 // 经营类目
.category-popup{ .category-popup {
background: #F5F5F5; background: #F5F5F5;
padding: 0 $padding * 2 $padding * 2 $padding * 2; padding: 0 $padding * 2 $padding * 2 $padding * 2;
.header{
.header {
padding-bottom: $padding; padding-bottom: $padding;
} }
.category-flex{
.category-flex {
margin: 0 -10rpx; margin: 0 -10rpx;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.category-flex-item{
.category-flex-item {
margin: 10rpx; margin: 10rpx;
background: white; background: white;
width: calc(33.33% - 20rpx); width: calc(33.33% - 20rpx);
@@ -335,22 +378,26 @@
text-align: center; text-align: center;
font-size: $title-size-m; font-size: $title-size-m;
@extend .nowrap; @extend .nowrap;
&.show{
&.show {
color: white; color: white;
background-color: $mian-color; background-color: $mian-color;
} }
} }
} }
.btns{
.btns {
padding-top: $padding * 2; padding-top: $padding * 2;
button{
button {
background: $mian-color; background: $mian-color;
border-radius: 0; border-radius: 0;
height: 90rpx; height: 90rpx;
line-height: 90rpx; line-height: 90rpx;
font-size: $title-size; font-size: $title-size;
color: white; color: white;
&::after{
&::after {
border: none; border: none;
} }
} }

1060
pages/equity/index.vue Normal file

File diff suppressed because it is too large Load Diff

324
pages/equity/search.vue Normal file
View File

@@ -0,0 +1,324 @@
<template>
<view>
<view class="top">
<view class="search">
<input class="search-input" type="text" focus @input="onInput" :placeholder="nameVal" />
<view class="search-btn" @click="searchClick">搜索</view>
</view>
<view class="tabs">
<view class="tabs-item" @click="onTabs">
{{searchType == 0 ? '价格' : '信用值'}}
<image class="icon" mode="widthFix"
:src="require(marketType == 'asc' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')" />
</view>
<view class="tabs-item" v-if="searchType == 0" @click="pageUrl">全部分类 <image class="tabs-item-arrow"
src="@/static/icons/search_row.png" mode=""></image>
</view>
<view class="tabs-item" v-if="searchType == 1" @click="companyOpne">{{companyName}}
<image class="tabs-item-arrow" src="@/static/icons/search_row.png" mode=""></image>
</view>
</view>
</view>
<view class="lists">
<!-- 优选商品 -->
<goods-list :list="searchArr" priceType="CNY" v-if="searchType == 0" @on-goods="onGoods" />
<!-- 商家 -->
<industry-list :list="searchArr" v-if="searchType == 1" @on-industry="onOpenWechat" />
</view>
<!-- 分页 -->
<uni-load-more :status="pageStatus" :iconSize="16" v-if="searchArr.length > 0" />
<!-- 企业分类弹出 -->
<view class="companyBack" :class="companyShow ? 'active' : ''"></view>
<view class="companyPopup" :class="companyShow ? 'active' : ''">
<view class="nowrap companyPopup-label" :class="{'show': item.industry_id == companyId}"
v-for="(item, index) in categoryArr" :key="index" @click="companyList(item.industry_id, index)">
{{item.title}}
</view>
</view>
</view>
</template>
<script>
import {
searchUrl,
companyCategory,
randgoodsUrl
} from '@/apis/interfaces/goods'
export default {
data() {
return {
nameVal: '',
searchArr: [],
searchType: '0', // 分类 0位商品 1为企业
marketType: 'asc', // 排序
categoryArr: [], // 分类数组--企业
companyId: '', // 分类数组--企业id
companyName: '选择行业',
companyShow: false,
// 分页
pageStatus: '',
page: 1
}
},
onLoad() {
this.searchType = this.$Route.query.type
// 商品分类默认关键字 type=0为商品列表; type=1为企业列表
let wechaUrl = '' // 定义接口来源名称
if (this.searchType == '0') wechaUrl = 'mall/randgoods' //商品关键字
if (this.searchType == '1') wechaUrl = 'companies/rand' //商品关键字
randgoodsUrl(wechaUrl, {
type: 1
}).then(res => {
this.nameVal = res.name
})
// 企业分类数据
if (this.searchType == '1') {
companyCategory().then(res => {
this.categoryArr = res
})
}
},
methods: {
// 商品详情
onGoods(e) {
this.$Router.push({
name: 'goodsDetails',
params: {
id: e.goods_id
}
})
},
// 打开微信小程序
onOpenWechat(e) {
plus.share.getServices(res => {
let sweixin = null;
for (let val of res) {
if (val.id === 'weixin') {
sweixin = val
}
}
/** 以此为例子 显示跳转引导页
* 'index_4'
* index 跳小程序企业首页
* 4 企业id
**/
if (sweixin != null) {
sweixin.launchMiniProgram({
id: e.original_id,
path: 'pages/login/guide?scene=index_' + e.company_id,
})
} else {
uni.showToast({
title: '当前环境不支持打开微信小程序',
icon: 'none'
})
}
})
},
// 列表数据
getList() {
// type=0为商品列表; type=1为企业列表
let wechaUrl = '' // 定义接口来源名称
if (this.searchType == '0') wechaUrl = 'mall/goods' // 商品列表
if (this.searchType == '1') wechaUrl = 'companies/lists' //企业列表
searchUrl(wechaUrl, {
page: this.goodsPage,
order_by: this.marketType,
industry_id: this.companyId,
name: this.nameVal
}).then(res => {
if (res.page.current === 1) {
this.searchArr = []
}
this.searchArr = this.searchArr.concat(res.data)
this.goodsPage = res.page.current
this.pageStatus = res.page.has_more ? 'more' : 'noMore'
})
},
// 输入关键词
onInput(val) {
this.nameVal = val.detail.value
},
// 搜索
searchClick() {
// 获取列表
this.getList();
},
// 筛选产品
onTabs(e) {
this.marketType = this.marketType == 'asc' ? 'desc' : 'asc'
this.getList()
},
// 商品分类跳转
pageUrl() {
this.$Router.push({
name: 'goodsClassify'
})
},
// 查看企业行业
companyOpne() {
this.companyShow = !this.companyShow
},
// 筛选企业列表
companyList(id, index) {
this.companyId = id
this.companyName = this.categoryArr[index].title
this.companyShow = false
// 获取全局列表
this.getList();
}
},
// 下拉加载
onReachBottom() {
if (this.pageStatus == 'more') {
this.pageStatus = 'loading'
this.goodsPage += 1
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
.top {
position: fixed;
top: 0;
//#ifdef H5
top: 100rpx;
//#endif
left: 0;
z-index: 9;
width: 100%;
height: 180rpx;
.search {
background: white;
height: 100rpx;
width: 100%;
padding: 20rpx $padding 0;
box-sizing: border-box;
display: flex;
.search-input {
padding: 0 $padding;
box-sizing: border-box;
height: 60rpx;
background-color: #f7f7f7;
font-size: $title-size-m;
border-radius: 80rpx;
flex: 1;
margin-right: $margin;
}
.search-btn {
line-height: 60rpx;
color: #e93340;
}
}
.tabs {
background: white;
display: flex;
justify-content: space-around;
height: 80rpx;
margin-bottom: 20rpx;
box-sizing: border-box;
line-height: 80rpx;
text-align: center;
.tabs-item {
font-size: $title-size-m;
color: $text-gray;
.icon {
width: 32rpx;
height: 32rpx;
vertical-align: middle;
margin-left: $margin / 3;
margin-bottom: 4rpx;
}
&.show {
color: $text-price;
}
.tabs-item-arrow {
width: 24rpx;
height: 24rpx;
margin-left: 10rpx;
}
}
}
}
// 列表
.lists {
padding: 180rpx 0 $padding;
}
// 企业弹出
.companyBack,
.companyPopup {
position: fixed;
top: 200rpx;
left: 0;
width: 100%;
z-index: 99;
}
.companyBack {
height: calc(100% - 200rpx);
background-color: rgba(0, 0, 0, .2);
display: none;
&.active {
display: block;
}
}
.companyPopup {
height: 45%;
overflow: hidden;
overflow-y: scroll;
border-top: 1rpx solid #f1f1f1;
background-color: #FFFFFF;
padding: $padding - 10 $padding;
display: none;
box-sizing: border-box;
.companyPopup-label {
width: calc(25% - 20rpx);
font-size: $title-size-sm - 2;
display: inline-block;
height: 60rpx;
line-height: 58rpx;
border: 1rpx solid #F8F8F8;
background-color: #FFFFFF;
margin: 10rpx;
text-align: center;
&.show {
color: #e93340;
border-color: #efd3d3;
background-color: #fef9f9;
}
}
&.active {
display: block;
}
}
</style>

View File

@@ -64,9 +64,9 @@
<input type="digit" v-model="skus_price" placeholder="0.00"/> <input type="digit" v-model="skus_price" placeholder="0.00"/>
<text class="units">{{skus_unit != '' ? '/' + skus_unit : ''}}</text> <text class="units">{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
</view> </view>
<view class="form-box inputs-flex input-unit"> <view class="form-box inputs-flex input-unit " style="background-color: #eee9fd;" v-if="skus_price>0">
<label class="form-label">分销佣金</label> <label class="form-label">可结算货款 </label>
<input type="digit" v-model="skus_charge" placeholder="0.00"/> <input type="digit" :value="percentTotal" :disabled="true" /> <span class='des'>(扣除分佣后预计到账金额)</span>
<text class="units">{{skus_unit != '' ? '/' + skus_unit : ''}}</text> <text class="units">{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
</view> </view>
</view> </view>
@@ -191,7 +191,6 @@
skus_price : '', // 销售价格 skus_price : '', // 销售价格
skus_number : 1, // 易货起购数量 skus_number : 1, // 易货起购数量
skus_unit : '件', // 规格文字 skus_unit : '件', // 规格文字
skus_charge : '', // 分销佣金
skus_stock : '', // 库存 skus_stock : '', // 库存
isChange : false, // 是否支持易货 isChange : false, // 是否支持易货
stores : [], // 关联店铺 stores : [], // 关联店铺
@@ -201,6 +200,7 @@
{text: '快递', type: 1}, {text: '快递', type: 1},
{text: '自提', type: 2} {text: '自提', type: 2}
], ],
percent:0,// 预结算货款比例
// 配置信息 // 配置信息
storesArr : [], // 可选店铺 storesArr : [], // 可选店铺
tags : [], // 可选商品标签 tags : [], // 可选商品标签
@@ -209,6 +209,11 @@
type : 1, // 1为商品2为服务 type : 1, // 1为商品2为服务
}; };
}, },
computed:{
percentTotal(){
return this.percent * this.skus_price
}
},
created() { created() {
// 编辑状态信息 // 编辑状态信息
if(this.$Route.query.type && this.$Route.query.type === 'edit'){ if(this.$Route.query.type && this.$Route.query.type === 'edit'){
@@ -244,7 +249,6 @@
this.skus_price = res.data.skus[0].price this.skus_price = res.data.skus[0].price
this.skus_number = res.data.skus[0].number this.skus_number = res.data.skus[0].number
this.skus_unit = res.data.skus[0].unit this.skus_unit = res.data.skus[0].unit
this.skus_charge = res.data.skus[0].charge
this.skus_stock = res.data.skus[0].stock this.skus_stock = res.data.skus[0].stock
this.isPostSale = res.data.is_post_sale == 0 this.isPostSale = res.data.is_post_sale == 0
this.isChange = res.data.is_change == 0 this.isChange = res.data.is_change == 0
@@ -253,6 +257,9 @@
this.storesArr = storesArr this.storesArr = storesArr
this.services = services this.services = services
this.stores = stores this.stores = stores
this.percent = Number(res.percent)
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
@@ -283,6 +290,7 @@
this.type = res.type this.type = res.type
this.categoryId = this.$Route.query.id this.categoryId = this.$Route.query.id
this.categoryCid= this.$Route.query.cid this.categoryCid= this.$Route.query.cid
this.percent = Number(res.percent)
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
@@ -377,7 +385,6 @@
skus_price : this.skus_price, skus_price : this.skus_price,
skus_number : this.skus_number, skus_number : this.skus_number,
skus_unit : this.skus_unit, skus_unit : this.skus_unit,
skus_charge : this.skus_charge,
skus_stock : this.skus_stock, skus_stock : this.skus_stock,
is_change : this.isChange ? 0 : 1, is_change : this.isChange ? 0 : 1,
logistic_type: this.logisticArr[this.logisticType].type, logistic_type: this.logisticArr[this.logisticType].type,
@@ -471,6 +478,12 @@
} }
.input-unit{ .input-unit{
padding-right: 200rpx; padding-right: 200rpx;
.des{
font-size: 26rpx;padding-bottom: 20rpx;display: inline-block;
color: #999;
position: relative;
right: -200rpx;
}
.units{ .units{
position: absolute; position: absolute;
right: 0; right: 0;

211
pages/goods/attestation.vue Normal file
View File

@@ -0,0 +1,211 @@
<template>
<view class="GoodsAuthentication">
<view class="authenticationTop">区块链溯源码{{info.token}}</view>
<!-- 商品认证 商品和服务 -->
<view class="authenticationItem">
<view class="authenticationItemTitle">商品认证</view>
<view class="authenticationItemcontent" v-if="info.goods">
<view class="authenticationItemcontentItem">
<view class="title">{{info.goods.type ===1?'商品名称':'项目名称'}}: </view>
<view class="content">{{info.goods.name || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">生产批次</view>
<view class="content">{{info.goods.batch || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===2">
<view class="title">项目分类</view>
<view class="content">{{info.goods.category || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">规格</view>
<view class="content">{{info.goods.skus[0].unit || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">数量</view>
<view class="content">{{info.goods.skus[0].stock || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">售价</view>
<view class="content">{{info.goods.skus[0].price || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">生产日期</view>
<view class="content">{{info.goods.producted_at || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">{{info.goods.type ===1?'保质期':'有效期'}}</view>
<view class="content">{{info.goods.expiried_at || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">生产厂家</view>
<view class="content">{{info.goods.product_name || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">生产地</view>
<view class="content">{{info.goods.product_address || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">供应商</view>
<view class="content">{{info.goods.skus[0].price || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">经营许可证</view>
<view class="content">{{info.goods.lisence || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">实物照片</view>
<image class="img" v-if="info.goods.cover" :src="info.goods.cover"
@click="priveImg(info.goods.cover)" mode="aspectFill" />
<view class="content" v-else>暂无数据</view>
</view>
</view>
</view>
<!-- 企业认证 商品和服务通用 -->
<view class="authenticationItem">
<view class="authenticationItemTitle">企业认证</view>
<view class="authenticationItemcontent" v-if="info.certification">
<view class="authenticationItemcontentItem">
<view class="title">企业名称</view>
<view class="content">{{info.certification.name || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">企业地址</view>
<view class="content">{{info.certification.address || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">统一信用代码</view>
<view class="content">{{info.certification.certification.code || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">行业</view>
<view class="content">{{info.certification.industry.title || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">经营范围</view>
<view class="content">{{info.certification.range || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">联系电话</view>
<u-icon name="phone-fill" v-if='info.certification.contack'
@click="call(info.certification.contact)" color="#2979ff" label-color="#2979ff" label-size="26"
:label='info.certification.contact' />
<view class="content" v-else> 暂无数据 </view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">营业执照</view>
<image class="img" v-if='info.certification.certification.license'
:src="info.certification.certification.license"
@click="priveImg(info.certification.certification.license)" mode="aspectFill" />
<view class="content" v-else>暂无数据</view>
</view>
</view>
</view>
<!-- 弹窗提示喽 -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
managesAttestation
} from '@/apis/interfaces/goods'
export default {
data() {
return {
info: ''
}
},
created() {
managesAttestation(this.$Route.query.id).then(res => {
this.info = res
})
},
methods: {
priveImg(img) {
uni.previewImage({
current: img, // 当前显示图片的http链接
urls: [img] // 需要预览的图片http链接列表
})
},
call(phone) {
uni.makePhoneCall({
phoneNumber: phone,
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F7F7F7;
}
.GoodsAuthentication {
padding: 30rpx;
.authenticationTop {
width: 100%;
padding: 20rpx 50rpx;
background-color: $main-color;
font-size: 26rpx;
color: #fff;
border-radius: 60rpx;
word-break: break-all;
text-align: center;
}
// 商品认证
.authenticationItem {
width: 100%;
min-height: 300rpx;
margin-top: 20rpx;
.authenticationItemTitle {
font-size: 30rpx;
color: #333333;
font-weight: 600;
padding: 30rpx 20rpx;
}
.authenticationItemcontent {
width: 100%;
min-height: 500rpx;
background-color: #fff;
border-radius: 20rpx;
border: solid rgba(200, 38, 0, .05) 6rpx;
box-shadow: 2rpx 2rpx 20rpx 0rpx rgba(200, 38, 0, .051);
padding: 10rpx 20rpx;
.authenticationItemcontentItem {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
padding: 20rpx 0;
font-size: 24rpx;
.title {
width: 180rpx;
}
.content {
text-overflow: ellipsis;
width: calc(100% - 180rpx);
}
.img {
width: 340rpx;
height: 200rpx;
}
}
}
}
}
</style>

115
pages/goods/chain.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<view class="GoodsChain">
<image src="https://e-chain.cnskl.com/storage/imageresource/chain-bg.png" class='chainBg' />
<view class="chain-content">
<view class="chain-center">
<image src="/static/icons/e-logo.png" mode="aspectFill" class="logo" />
<view class="name">易品新境区块链溯源证书</view>
<view class="no">区块链溯源证书{{info.token}}</view>
<view class="content">
<view class="con-item">兹证明</view>
<view class="con-item" v-if="info.company">
{{info.company.name}}产品符合溯源规范认证内容如下特授权其产品在易品新境区块链溯源商城出售
</view>
<view class="con-item">交易哈希: {{info.hash}}</view>
<view class="con-item">区块链高度: {{info.height}}</view>
</view>
<view class="date" v-if="info.applied_at">授权时间: {{info.applied_at}}</view>
<view class="date">有效期至: {{info.ended_at}}</view>
<view class="companyInfo">易品新境区块链有限公司</view>
</view>
</view>
<!-- 弹窗提示喽 -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import { managesChain } from '@/apis/interfaces/goods'
export default {
data() {
return {
info: ''
}
},
created() {
managesChain(this.$Route.query.id).then(res=>{
this.info = res
})
},
methods: {}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F7F7F7;
}
.GoodsChain {
background-color:fff;
width: 100%;
position: relative;
z-index: 1;
.chainBg{
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.chain-content{
width: 100%;
min-height: 100%;
z-index: 2;
padding: 18vh 10vw 15vh 10vw ;
box-sizing: border-box;
position: relative;
z-index: 3;
.chain-center{
width: 100%;
min-height: 100%;
.logo{
width: 160rpx;
height: 160rpx;
border-radius: 50%;
position: relative;
margin-left: -80rpx;
left: 50%;
margin-bottom: 20rpx;
border: solid rgba($color: #fff, $alpha: .3) 10rpx;
}
.name{
font-size: 40rpx;
font-weight: bold;
text-align: center;
}
.no{
font-size: 26rpx;
font-weight: bold;
text-align: center;
margin-top: 10rpx;
}
.content{
margin-top: 60rpx;
font-size: 28rpx;
padding: 0 20rpx;
.con-item{
margin-bottom: 30rpx;
word-break: break-all;
}
}
.date{
text-align: right;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.companyInfo{
text-align: right;
margin-bottom: 40rpx;
padding-right: 20rpx;
}
}
}
}
</style>

View File

@@ -0,0 +1,625 @@
<template>
<view class="ConfirmOrder">
<view class="goods-info1">
<view class="top">
<view class="company">
<image :src="shop.cover" mode="aspectFill" />
<view class="name">{{shop.name}}</view>
</view>
</view>
<view class="goods-info">
<image class="goods-img" :src="info.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{info.title}}</view> <span>{{info.price}}</span>
</view>
<!-- <view class="sku">均码规格/<span>x {{info.qty}}</span> </view> -->
<view class="sku">
<span>数量</span>
<span>
<u-number-box v-model="params.qty" :min='1' :max='1000' @change='numberBoxChange' />
</span>
</view>
</view>
</view>
<!-- <view class="goods-type">支付方式<span>在线支付</span></view> -->
<view class="goods-type" @click="showCouponList = true">优惠券
<span>{{coupon_grant_id!==''?'已优惠 - ¥'+coupon_price:'选择优惠券'}}
<u-icon name="arrow-right" color="#666" size="24" />
</span>
</view>
<!-- <view class="goods-type" style="border-top: solid 20rpx #f7f7f7;">创建时间<span>2021-11-20 13:00:15</span></view> -->
<view class="goods-type">商品总价 <span>{{amount}}</span></view>
<view class="goods-type" v-if="coupon_price>0">优惠<span> - {{coupon_price}}</span></view>
<!-- <view class="goods-type">运费 <span>免邮</span></view> -->
<view class="goods-type">
<u-input class="order-content" type="textarea" v-model="remark" :clearable='false' :border="true"
:auto-height="true" placeholder="请填写订单备注" />
</view>
<view class="pay-select">请选择支付方式</view>
<view class="pay-select-item" @click="selectPay('2')">
<view class="pay-left">
<u-icon class="wx-icon" name="weixin-fill" color="#fff" size="40"></u-icon>
<view class="pay-wx-title">
微信支付
<span>推荐微信用户使用</span>
</view>
</view>
<u-icon v-if="selectTypeId!== '2'" name="checkmark-circle" color="#f7f7f7" size="50"></u-icon>
<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50"></u-icon>
</view>
<!-- <view class="pay-select-item" @click="selectPay('1')">
<view class="pay-left">
<u-icon class="wx-icon" name="integral-fill" color="#fff" size="40"></u-icon>
<view class="pay-wx-title">
E币交易
<span>可用Eb总额{{account.getEBBalance}}</span>
</view>
</view>
<u-icon v-if="selectTypeId!== '1'" name="checkmark-circle" color="#f7f7f7" size="50" />
<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50" />
</view> -->
</view>
<!-- 订单 -->
<view class="actions">
<view class="title">
实付金额<span class="money">{{total}}</span>
</view>
<view @click="order" class="nowPay">提交订单</view>
</view>
<!-- 优惠券弹窗 -->
<u-popup v-model="showCouponList" mode="bottom" border-radius="14">
<scroll-view scroll-y="true" style="height: 1000rpx;" class="scrollView">
<view class="coupon-title">可用优惠券列表</view>
<view class="coupon-list-item" v-for="(item,index) in list" :key="index" v-if="list.length>0">
<u-icon v-if="coupon_grant_id!== item.coupon_grant_id" name="checkmark-circle" color="#cacaca"
size="50">
</u-icon>
<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50"></u-icon>
<couponTemplate style="flex: 1;" :item="{...item}" :showUse='false' />
<!-- 遮挡层用户控制点击事件 -->
<view class="coupon-list-item" @click="selectCoupon(item)"></view>
</view>
<!-- 没有优惠券列表 -->
<no-list v-if="list.length === 0" name='no-counpon' txt="没有任何可用券哦" />
</scroll-view>
</u-popup>
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import couponTemplate from "@/components/coupon-template/coupon-template-2"
import {
mallBuyGoods
} from '@/apis/interfaces/goods'
import {
wxPay,
ebPay
} from '@/apis/interfaces/order'
export default {
name: 'OrderInfo',
components: {
couponTemplate
},
data() {
return {
// box: {
// min: 1,
// max: 100
// },
amount: 0,
account: {},
total: 0,
shop: {}, // 店铺信息
info: {}, // 商品详情
showCouponList: false, // 默认false不显示优惠券弹窗列表
coupon_grant_id: '', // 默认没有选择任何一个优惠券
list: [], // 优惠券列表
params: {}, // 上个页面携带过来的参数
remark: '', // 备注
order_no: '', // 下单成功的id
selectTypeId: '2', // 微信支付2 E币支付1
coupon_price: '' // 代驾券显示金额,提货券显示什么呢
};
},
onLoad(e) {
// 获取确认订单页面参数
this.params = e
this.params.qty = Number(e.qty)
this.mallBuyGoods(e, 'get') // 确认订单商品信息get
},
methods: {
// 确认商品详情页get下单页面post
mallBuyGoods(params, method) {
params.coupon_grant_id = this.coupon_grant_id
mallBuyGoods(params, method).then(res => {
if (method === 'get') {
this.amount = res.amount
this.account = res.account
this.total = res.total
this.list = res.coupons
this.shop = res.detail[0].shop
this.info = res.detail[0].items[0]
this.coupon_price = res.coupon_price
} else {
this.order_no = res.order_no
this.nowPay()
}
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
},
// 提交订单
order() {
let params = this.params
params.coupon_grant_id = this.coupon_grant_id
params.remark = this.remark
params.channel = 'app'
this.mallBuyGoods(params, 'post')
},
// 触发支付
nowPay() {
this.canPay = false
let apiUrl = ''
let data = {}
if (this.selectTypeId === '2') {
apiUrl = wxPay
data = {
order_no: this.order_no,
type: 'app'
}
} else {
apiUrl = ebPay
data = {
order_no: this.order_no
}
}
apiUrl(data).then(res => {
if (this.selectTypeId === '2') {
if (typeof res === 'string') {
let payInfo = JSON.parse(res)
uni.requestPayment({
provider: "wxpay",
orderInfo: payInfo,
success: res => {
uni.showToast({
title: '支付成功',
duration: 3000,
mask: true,
icon: 'none'
})
setTimeout(() => {
uni.reLaunch({
url: '/pages/goods/payStatus?success=true'
})
this.canPay = true
}, 3000);
},
fail: (err) => {
console.log('payerr', err)
uni.showToast({
title: '支付失败',
duration: 3000,
mask: true,
icon: 'none'
})
setTimeout(() => {
uni.reLaunch({
url: '/pages/goods/payStatus?success=false'
})
this.canPay = true
}, 3000);
}
})
} else {
uni.showToast({
title: '创建订单成功',
duration: 3000,
mask: true,
icon: 'none'
})
setTimeout(() => {
this.canPay = true
uni.reLaunch({
url: '/pages/goods/payStatus?success=true'
})
}, 3000);
}
}
}).catch(err => {
uni.showToast({
title: err.message,
duration: 3000,
mask: true,
icon: 'none'
})
setTimeout(res => {
this.canPay = true
}, 2000)
})
},
// 选择可用优惠券
selectCoupon(item) {
if (this.coupon_grant_id === item.coupon_grant_id) {
this.coupon_grant_id = ''
// this.coupon_price = ''
} else {
this.coupon_grant_id = item.coupon_grant_id
// this.coupon_price = item.price
}
this.mallBuyGoods(this.params, 'get')
this.showCouponList = false
},
// 增加库存时候触发事件
numberBoxChange(e) {
this.params.qty = e.value
this.mallBuyGoods(this.params, 'get')
},
// 选择支付方式
selectPay(id) {
if (id === '1') {
if (this.info.is_change) {
this.selectTypeId = id
} else {
this.$refs.uToast.show({
title: '当前商品不支持EB支付'
})
}
} else if (id === '2') {
this.selectTypeId = id
}
},
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
}
.pay-select {
padding: 20rpx 30rpx;
border-top: 20rpx #f7f7f7 solid;
}
.pay-select-item {
background-color: #fff;
padding: 30rpx;
border-bottom: solid 1rpx #f7f7f7;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.pay-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.pay-wx-title {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
box-sizing: border-box;
margin-left: 30rpx;
font-size: 28rpx;
span {
font-size: 24rpx;
color: #cacaca;
margin-top: 10rpx;
}
}
}
.wx-icon {
background-color: #8b64fd;
border-radius: 10rpx;
padding: 10rpx;
}
}
.ConfirmOrder {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
padding-bottom: 80rpx;
.acceptInfo {
margin: 0 30rpx;
// background-color: #fff;
box-shadow: 0 0 14rpx 4rpx rgba($color: $mian-color, $alpha: 0.2);
border-radius: 20rpx;
padding: 30rpx;
position: relative;
top: -30rpx;
.name {
font-size: 36rpx;
font-weight: 600;
span {
padding-left: 20rpx;
font-size: 30rpx;
}
}
.address {
padding: 20rpx 40rpx;
font-size: 28rpx;
span {
margin-left: 10rpx;
}
}
}
.goods-info1 {
background-color: #fff;
border-top: solid 20rpx #f7f7f7;
.goods-type {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 40rpx;
color: #666;
border-bottom: solid 1rpx #f7f7f7;
}
.goods-type span {
color: #000;
}
.order-content {
width: 100%;
}
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20rpx 40rpx;
border-bottom: solid 1rpx #f7f7f7;
.company {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-right: 20rpx;
}
}
.name {
font-size: 30rpx;
color: #484848;
}
.no {
margin-top: 20rpx;
font-size: $title-size*0.9;
color: #999;
}
.status {
color: #999;
font-size: $title-size;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-bottom: 20rpx;
padding: 30rpx 40rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
width: 340rpx;
}
span {
font-size: 34rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
// 合计信息
.total {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
font-size: 28rpx;
color: #353535;
flex: 1;
text-align: right;
margin-top: 20rpx;
padding-bottom: 30rpx;
}
.total-btn {
// border: solid 1rpx #f7f7f7;
padding: 10rpx 30rpx;
border-radius: 10rpx;
color: red;
}
}
// 操作信息
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
flex-wrap: wrap;
flex: 1;
font-size: 30rpx;
color: #666;
width: 100%;
background-color: #Fff;
position: fixed;
bottom: 0;
padding: 20rpx 0;
span {
color: $mian-color;
margin-right: 30rpx;
font-weight: 600;
font-size: 32rpx;
}
.nowPay {
padding: 20rpx 50rpx;
text-align: center;
box-sizing: border-box;
background-color: $mian-color;
color: #fff;
}
}
// 优惠券弹窗
.scrollView {
// padding: 40rpx;
box-sizing: border-box;
position: relative;
// 标题
.coupon-title {
padding: 40rpx;
font-weight: bold;
font-size: 40rpx;
border-bottom: solid 1rpx #f7f7f7;
}
// 优惠券样式
.coupon-list-item {
border-bottom: solid 1rpx #f7f7f7;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
width: 100%;
.coupon-list-item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba($color: #000, $alpha: 0);
z-index: 10001;
}
}
}
// 选择收货地址
.add-addr {
width: 100%;
background-color: #fff;
border-bottom: solid rgba($color: $mian-color, $alpha:0.2) 10rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 40rpx;
.selectNew {
flex: 1;
text-align: center;
}
.selectNew2 {
padding: 20rpx 0;
flex: 1;
font-size: 34rpx;
color: #353535;
span {
color: #666;
font-size: 28rpx;
margin-left: 20rpx;
}
.addrs {
font-size: 26rpx;
margin-top: 10rpx;
color: #666;
}
}
}
}
</style>

751
pages/goods/details.vue Normal file
View File

@@ -0,0 +1,751 @@
<template>
<view class="content" v-if="!loding">
<!-- 轮播主图 -->
<view class="goods-covers">
<swiper class="swiper" indicator-dots indicator-active-color="#c82626">
<block v-if="goodsObj.pictures.length > 0">
<swiper-item v-for="(item, index) in goodsObj.pictures" :key="index">
<image class="swiper-item" :src="item" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
</view>
<!-- 产品详情 -->
<view class="goods-content">
<view class="header">
<view class="flex-box">
<view class="price"><text></text>{{goodsObj.price.show}}</view>
<view class="sales">累计易货{{goodsObj.sales}}</view>
</view>
<view class="coupon" v-if="couponSee.length > 0" @click="couponsOpne">
<view class="coupon-list" v-for="(item, index) in couponSee" :key="index">
<view class="coupon-label">
{{item.title}}
</view>
</view>
<view class="coupon-btn">领券<image class="coupon-btn-img" src="../../static/icons/goods_row.png" mode="aspectFill"></image></view>
</view>
<view class="title"><view class="title-hot">热卖</view>{{goodsObj.name}}</view>
<!-- <view class="sub-title">{{goodsObj.description}}</view> -->
</view>
<!-- 商家信息 -->
<view class="store">
<image class="logo" :src="goodsObj.shop.cover" mode="aspectFill"></image>
<view class="store-cont">
<view class="store-title">{{goodsObj.shop.name}}</view>
<view class="rate">
<uni-rate
:readonly="true"
color="#ddd"
active-color="#c82626"
:value="goodsObj.company.star"
:size="14"
/>
</view>
<view class="openbtn" @click="onOpenWechat">进店<image class="openbtn-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image></view>
</view>
<view class="tooSee">
<view class="tooSee-label" @click="$Router.push({name: 'GoodsChain', params: {id: goodsObj.goods_id}})">
区块链证书
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
</view>
<view class="tooSee-label" @click="$Router.push({name: 'GoodsAttestation', params: {id: goodsObj.goods_id}})">
商品认证
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
</view>
<view class="tooSee-label" @click="$Router.push({name: 'GoodstracedTo', params: {id: goodsObj.goods_id}})">
商品溯源
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
</view>
</view>
</view>
<!-- 产品规格 -->
<view class="size">
<view class="size-item nowrap">
<label class="title">规格</label>
{{goodsObj.skus[0].goods_name}}
</view>
<view class="size-item nowrap">
<label class="title">说明</label>
特价商品不可与优惠券叠加使用
</view>
<view class="size-item nowrap" v-if="goodsObj.services.length > 0">
<label class="title">服务</label>
<view class="goods-serve" @click="serveOpne">
<image class="goods-serve-img" src="../../static/icons/goods_buy.png" mode="aspectFill"></image>
<view class="nowrap goods-serve-name"><text v-for="(item, index) in goodsObj.services">{{item.name}}</text></view>
<image class="goods-serve-img" src="../../static/icons/goods_spot.png" mode="aspectFill"></image>
</view>
</view>
</view>
<!-- 产品详情 -->
<view class="product">
<block v-for="(item, index) in goodsObj.content" :key="index">
<image :src="item" mode="widthFix"></image>
</block>
</view>
</view>
<!-- footer -->
<view class="footer">
<button class="btn" size="default" @click="buyGoods">立即购买</button>
</view>
<!-- 优惠券弹出 -->
<uni-popup ref="couponsPopup">
<view class="coupons-popup">
<view class="coupons-header">
<view class="title">优惠券</view>
<image @click="couponsClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
</view>
<view class="coupons-cont">
<view class="coupons-name">
可领取的优惠券
</view>
<view class="coupons-list" v-for="(item , index) in coupons" :key="index">
<view class="coupons-tips" v-if="item.type">
<!-- value == 1服务券 value == 2代金券 value == 3提货券 -->
<text class="coupons-tips-text" v-if="item.type.value == '1'">服务券</text>
<text class="coupons-tips-text" v-else-if="item.type.value == '2'">代金券</text>
<text class="coupons-tips-text" v-else>提货券</text>
</view>
<view class="coupons-left" v-if="item.type.value == '2'">
<view class="coupons-number">
<text></text>{{item.price}}
</view>
<view class="coupons-full">
{{item.full}}可用
</view>
</view>
<view class="coupons-left" v-if="item.type.value == '1' || item.type.value =='3'">
<image :src="item.cover" mode="aspectFill" class="coupon-left-img" />
</view>
<view class="coupons-left" v-else-if="item.type.value == '3'">
<view class="coupons-number coupons-small">
提货券
</view>
</view>
<view class="coupons-center">
<view class="nowrap coupons-title">
{{item.title}}
</view>
<view class="coupons-time" v-if="item.time">
{{item.time.interval}}
</view>
</view>
<view v-if="item.can.get" class="coupons-right" @click="drawCoupons(item.coupon_id, index)">
领取
</view>
<view v-else class="coupons-right coupons-right-active">
已领取
</view>
</view>
</view>
<view class="coupons-true" @click="couponsClose">
确定
</view>
</view>
</uni-popup>
<!-- 服务保障弹出 -->
<uni-popup ref="servePopup">
<view class="coupons-popup">
<view class="coupons-header">
<view class="title">保障</view>
<image @click="serveClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
</view>
<view class="serve-cont">
<view class="serve-label" v-for="(item, index) in goodsObj.services" :key="index">
<view class="serve-label-name">
{{item.name}}
</view>
<view class="serve-label-text">
{{item.content}}
</view>
</view>
</view>
<view class="coupons-true" @click="serveClose">
确定
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { goods, managesCoupons } from '@/apis/interfaces/goods'
import userAuth from '@/public/userAuth'
export default {
data() {
return {
loding : true,
goodsObj : {},
identity : '',
company : {},
coupons : {},
couponSee : ""
};
},
created() {
goods(this.$Route.query.id).then(res=>{
this.loding = false
this.goodsObj = res
this.identity = res.identity.id || ''
this.company = res.company
this.couponSee= res.coupons.slice(0, 3)
this.coupons = res.coupons
})
},
methods:{
// 提交购买单
buyGoods(){
let token = this.$store.getters.getToken
if(token == ''){
let userLogin = new userAuth()
userLogin.Login()
return
}
// this.$Router.push({
// name: 'Buy',
// params: {
// skuId: this.goodsObj.skus[0].sku_id,
// qty : this.goodsObj.skus[0].number
// }
// })
uni.navigateTo({
url: '/pages/goods/confirmOrder?qty=1&type=2&goods_sku_id=' + this.goodsObj.skus[0].sku_id
})
},
// 打开微信小程序
onOpenWechat(){
plus.share.getServices(res => {
let sweixin = null;
for(let val of res){
if(val.id === 'weixin'){
sweixin = val
}
}
/** 以此为例子 显示跳转引导页
* 'index_4'
* index 跳小程序企业首页
* 4 企业id
**/
if(sweixin != null){
sweixin.launchMiniProgram({
id : this.company.original_id,
path: 'pages/login/guide?scene=index_' + this.company.company_id
})
}else{
uni.showToast({
title: '当前环境不支持打开微信小程序',
icon : 'none'
})
}
})
},
// 领取优惠券
drawCoupons(id){
let token = this.$store.getters.getToken
if(token == ''){
let userLogin = new userAuth()
userLogin.Login()
return
}
managesCoupons(id).then(res=>{
uni.showToast({
title: '领取成功',
type: 'primary',
duration: 3000
})
}).catch(err => {
uni.showToast({
icon : 'none',
title: err.message
})
})
},
// 选择优惠券-显示
couponsOpne(){
this.$refs.couponsPopup.open('bottom')
},
// 选择优惠券-隐藏
couponsClose(){
this.$refs.couponsPopup.close()
},
// 查看保障服务-显示
serveOpne(){
this.$refs.servePopup.open('bottom')
},
// 查看保障服务-隐藏
serveClose() {
this.$refs.servePopup.close()
}
}
}
</script>
<style lang="scss" scoped>
.content{
position: relative;
padding-top: 100%;
}
// 轮播图
.goods-covers{
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding-top: 100%;
.swiper{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.swiper-item{
width: 100%;
height: 100%;
}
}
}
// 商品详情
.goods-content{
position: relative;
z-index: 2;
background-color: white;
border-radius: $radius $radius 0 0;
padding-bottom: calc((#{$padding} * 2) + (env(safe-area-inset-bottom) / 2) + 90rpx);
padding-bottom: calc((#{$padding} * 2) + (constant(safe-area-inset-bottom) / 2) + 90rpx);
// 详情
.header{
padding: 0 $padding $padding;
.title{
font-size: $title-size;
font-weight: bold;
line-height: 50rpx;
.title-hot {
display: inline-block;
background-color: #fee195;
font-size: 24rpx;
border-radius: 50rpx;
padding: 0 10rpx;
height: 34rpx;
line-height: 36rpx;
margin: 6rpx 10rpx 0 0;
}
}
.sub-title{
line-height: 40rpx;
font-size: $title-size-sm;
color: $text-gray;
padding-bottom: $padding/3;
}
.flex-box{
display: flex;
justify-content: space-between;
line-height: 90rpx;
.price{
font-weight: bold;
color: $text-price;
font-size: $title-size + 14;
text{
font-size: 70%;
}
width: calc(60% - #{$padding});
}
.sales{
font-size: $title-size-sm;
color: $text-gray;
width: 40%;
text-align: right;
}
}
// 新增优惠券
.coupon {
background-color: #fef2f2;
color: #e1293f;
border-radius: 8rpx;
border: 1rpx solid #ffe5e5;
padding: $padding - 15;
box-sizing: border-box;
display: flex;
position: relative;
margin-bottom: $margin - 10;
.coupon-list {
font-size: 22rpx;
.coupon-label {
display: inline-block;
border: 1rpx solid #e998a1;
border-radius: 50rpx;
padding: 0 15rpx;
height: 34rpx;
line-height: 34rpx;
margin-right: $margin - 10;
}
}
.coupon-btn {
position: absolute;
right: $padding - 20;
top: 0;
line-height: 60rpx;
font-size: 24rpx;
display: flex;
font-weight: 700;
.coupon-btn-img {
width: 22rpx;
height: 22rpx;
margin: 20rpx 0 0 4rpx;
}
}
}
}
// 新增服务
.goods-serve {
display: flex;
.goods-serve-img {
width: 36rpx;
height: 36rpx;
margin-top: 26rpx;
}
.goods-serve-name {
margin: 0 30rpx 0 20rpx;
width: calc(100% - 122rpx);
text {
padding-right: $padding;
position: relative;
&:last-child {
padding-right: 0;
}
}
}
}
// 店铺
.store{
position: relative;
margin: 0 $margin;
background: #F8F8F8;
border-radius: $radius/2;
padding: $padding;
min-height: 220rpx;
.logo{
position: absolute;
left: $margin;
top: $margin;
width: 98rpx;
height: 98rpx;
border-radius: $radius/2;
}
.store-cont {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding-left: 150rpx;
padding-top: 20rpx;
box-sizing: border-box;
height: 140rpx;
}
.tooSee {
position: absolute;
top: 150rpx;
left: 0;
font-size: 24rpx;
padding-left: $padding;
box-sizing: border-box;
.tooSee-label {
background-color: #fd683e;
border-radius: 8rpx 4rpx 4rpx 6rpx;
color: #FFFFFF;
height: 48rpx;
line-height: 48rpx;
padding: 0 $padding - 15;
box-sizing: border-box;
display: inline-block;
margin-right: $margin * 2;
position: relative;
&::after, &::before{
content: '';
position: absolute;
}
&::after {
right: -40rpx;
top: 0;
background-color: #f64c37;
width: 40rpx;
height: 100%;
border-radius: 4rpx 8rpx 8rpx 4rpx;
}
&::before {
right: -1rpx;
top: 5%;
border: 1rpx dashed #fb745a;
height: 90%;
z-index: 2;
box-sizing: border-box;
}
&:last-child {
margin: 0;
}
&:first-child {
background-color: #f2d7aa;
color: #362507;
}
&:first-child::after {
background-color: #f1d599;
}
&:first-child::before {
border-color: #fae2b9;
}
.tooSee-label-img {
position: absolute;
right: -34rpx;
top: 12rpx;
width: 28rpx;
height: 28rpx;
z-index: 9;
}
&:first-child .tooSee-label-img {
filter: brightness(.2)
}
}
}
.store-title{
font-size: $title-size-lg;
font-weight: bold;
line-height: 60rpx;
color: $text-color;
margin-bottom: 10rpx;
}
// rate
.openbtn{
position: absolute;
right: $margin - 10;
top: $margin * 3.5;
color: #848484;
height: 60rpx;
line-height: 60rpx;
text-align: center;
font-size: $title-size-m;
margin-top: -30rpx;
display: flex;
.openbtn-img {
width: 32rpx;
height: 32rpx;
filter: brightness(.5);
margin-top: 14rpx;
}
}
}
// 产品规格
.size{
margin-top: $margin;
border-top: solid 20rpx #F8F8F8;
border-bottom: solid 20rpx #F8F8F8;
.size-item{
position: relative;
padding: 0 $padding 0 ($padding + 100);
line-height: 90rpx;
font-size: $title-size-m;
&::after{
position: absolute;
left: $margin;
right: 0;
bottom: 0;
content: " ";
height: 1rpx;
background-color: $border-color;
}
&:last-child::after{
display: none;
}
.title{
position: absolute;
left: $margin;
top: 0;
font-weight: bold;
}
}
}
// 产品详情
.product{
image{
vertical-align: top;
width: 100%;
}
}
}
// 立即购买
.footer{
padding: $padding;
background: white;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 99;
box-sizing: border-box;
.btn[size='default']{
width: 100%;
height: 90rpx;
line-height: 90rpx;
padding: 0;
border-radius: 0;
box-sizing: border-box;
background: $text-price;
color: white;
font-weight: bold;
font-size: $title-size;
margin-bottom: calc(env(safe-area-inset-bottom) / 2);
margin-bottom: calc(constant(safe-area-inset-bottom) / 2);
}
}
// 优惠券弹出样式
.coupons-popup {
background-color: #FFFFFF;
border-radius: 40rpx 40rpx 0 0;
padding: $padding;
box-sizing: border-box;
.coupons-header {
text-align: center;
position: relative;
margin-bottom: $margin*1.5;
.title {
font-weight: 700;
}
.close {
position: absolute;
right: 0;
top: 0;
z-index: 2;
width: 38rpx;
height: 38rpx;
}
}
.coupons-cont {
.coupons-name {
color: #616065;
font-size: 30rpx;
}
.coupons-list {
border: 2rpx solid #d6b9be;
border-radius: 10rpx;
overflow: hidden;
position: relative;
margin-top: $margin;
// background-color: red;
.coupons-tips {
// background-color: #211e17;
background-image: linear-gradient(to right, #f8e5c0, #d6a46a);
color: #8d4928;
position: absolute;
border-radius: 0 0 20rpx 0;
padding: 0 8rpx;
height: 34rpx;
line-height: 34rpx;
left: 0;
top: 0;
z-index: 10;
.coupons-tips-text {
font-size: 24rpx;
transform:scale(.85);
display: block;
}
}
.coupons-left {
background-color: #fdedee;
color: #e1293f;
width: 190rpx;
text-align: center;
padding: $padding - 10 0;
border-right: 2rpx dashed #eccdd4;
.coupon-left-img{
width: 180rpx;
height: 100rpx;
border-radius: 20rpx;
}
.coupons-number {
font-size: 40rpx;
font-weight: 600;
text {
font-size: 24rpx;
}
&.coupons-small {
font-size: 32rpx;
padding: 20rpx 0;
}
}
.coupons-full {
font-size: 24rpx;
}
}
.coupons-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding: $padding - 10 130rpx 0 220rpx;
box-sizing: border-box;
font-size: 28rpx;
.coupons-time {
font-size: 24rpx;
margin-top: 10rpx;
color: #514c51;
}
}
.coupons-right {
position: absolute;
right: 20rpx;
top: 36rpx;
width: 110rpx;
text-align: center;
background-color: #e1293f;
color: #FFFFFF;
border-radius: 80rpx;
font-size: 24rpx;
line-height: 52rpx;
&.coupons-right-active {
background-color: #adadad;
color: #FFFFFF;
}
}
}
}
.coupons-true {
background-image: linear-gradient(to right, #e1293f, #fd275d);
color: #FFFFFF;
border-radius: 80rpx;
line-height: 84rpx;
text-align: center;
margin-top: $margin*5;
}
}
// 新增服务保障样式
.serve-label {
margin-top: $margin + 10;
font-size: 28rpx;
.serve-label-name {
font-weight: 700;
margin-bottom: $margin - 10;
}
.serve-label-text {
line-height: 44rpx;
}
}
.serve-cont {
height: 40vh;
overflow-y: scroll;
}
</style>

View File

@@ -143,6 +143,7 @@
} }
let submitFund = managesGoodsAuth(this.$Route.query.id, submitData) let submitFund = managesGoodsAuth(this.$Route.query.id, submitData)
submitFund.then(res => { submitFund.then(res => {
uni.setStorageSync('refresh',true)
uni.showModal({ uni.showModal({
title : '提示', title : '提示',
content : '商品权证认证信息已提交,请耐心等待平台审核', content : '商品权证认证信息已提交,请耐心等待平台审核',

View File

@@ -0,0 +1,117 @@
<template>
<view class="content-flex" v-if="!loding">
<scroll-view class="stair" scroll-y>
<view class="stair-item" :class="{'show': stairIndex == index}" v-for="(item, index) in category"
:key="index" @click="stairIndex = index">{{item.name}}</view>
<view class="ios-bottom"></view>
</scroll-view>
<scroll-view class="second" scroll-y>
<!-- @click="goList(item.category_id)" -->
<!-- @click="$Router.push({name:'goodsList',query:{id:item.category_id}})" -->
<view class="second-item" v-for="(item, index) in category[stairIndex].children" :key="index" @click="goList(item.category_id)">
{{item.name}}
<uni-icons class="arrow-icon" type="arrowright" color="#999" size="14"></uni-icons>
</view>
<view class="ios-bottom"></view>
</scroll-view>
</view>
</template>
<script>
import {
goodsCategory
} from '@/apis/interfaces/goods'
export default {
data() {
return {
loding: true,
category: [],
stairIndex: 0,
secondIndex: 0
};
},
created() {
goodsCategory().then(res => {
this.loding = false
this.category = res
})
},
methods: {
// 跳转列表页面
goList(id) {
uni.navigateTo({
url: `/pages/goods/lists?id=${id}`
})
}
}
}
</script>
<style lang="scss" scoped>
.content-flex {
background-color: white;
height: 100vh;
display: flex;
font-size: $title-size-m;
.stair {
background: #F5F5F5;
width: 240rpx;
.stair-item {
text-align: center;
padding: 0 $padding;
line-height: 90rpx;
color: $text-gray;
@extend .nowrap;
&.show {
position: relative;
background: white;
color: $text-price;
font-weight: bold;
&::before {
position: absolute;
height: 40rpx;
width: 5rpx;
background: $text-price;
content: " ";
left: 0;
top: 20rpx;
}
}
}
}
.second {
width: calc(100% - 240rpx);
.second-item {
position: relative;
padding: 0 ($padding + 80) 0 $padding;
line-height: 90rpx;
color: $text-gray;
.arrow-icon {
position: absolute;
right: $padding;
}
&::after {
position: absolute;
height: 1rpx;
content: ' ';
background: $border-color;
left: $padding;
right: 0;
top: 0;
}
&:first-child::after {
display: none;
}
}
}
}
</style>

128
pages/goods/lists.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<view class="Goods-LISTS">
<view class="tabs">
<view class="tabs-item" :class="{'show': tabIndex == 0}" @click="onTabs" data-index="0">最新</view>
<view class="tabs-item" :class="{'show': tabIndex == 1}" @click="onTabs" data-index="1">
价格
<image class="icon" mode="widthFix"
:src="require(marketType == 'asc' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')" />
</view>
</view>
<view class="lists">
<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
</view>
</view>
</template>
<script>
import {
list
} from '@/apis/interfaces/goods'
import goodsList from '@/components/goods-list/goods-list'
export default {
name: 'Goods-LISTS',
data() {
return {
tabIndex: 0,
marketType: 'asc',
goods: [],
page: 1,
has_more: true,
};
},
onReachBottom() {
if (this.has_more) {
this.page = this.page + 1
this.getList()
} else {
uni.showToast({
title: '我是有底线的~',
icon: 'none'
})
}
},
created() {
this.getList()
},
methods: {
onTabs(e) {
let index = e.target.dataset.index
if (index == 0 && index == this.tabIndex) return
if (index == 1 && index == this.tabIndex) this.marketType = this.marketType == 'asc' ? 'desc' : 'asc'
this.tabIndex = index
this.has_more = true
this.page = 1
this.goods = []
this.getList()
},
onGoods(e) {
uni.navigateTo({
url:'/pages/goods/details?id='+e.goods_id
})
// this.$Router.push({
// name: 'goodsDetails',
// params: {
// id: e.goods_id
// }
// })
},
getList() {
let data = {
order_by: this.tabIndex == 1 ? this.marketType : '',
page: this.page
}
if (this.$Route.query.type) {
data.category_id = this.$Route.query.id
} else {
data.category_cid = this.$Route.query.id
}
list(data).then(res => {
this.goods = this.goods.concat(res.data)
this.has_more = res.page.has_more
})
}
}
}
</script>
<style lang="scss" scoped>
.tabs {
position: fixed;
top: 0;
//#ifdef H5
top: 90rpx;
//#endif
left: 0;
z-index: 9;
width: 100%;
display: flex;
justify-content: space-around;
background: white;
height: 70rpx;
line-height: 70rpx;
text-align: center;
.tabs-item {
font-size: $title-size-m;
color: $text-gray;
.icon {
width: 32rpx;
height: 32rpx;
vertical-align: middle;
margin-left: $margin / 3;
margin-bottom: 4rpx;
}
&.show {
color: $text-price;
}
}
}
// 列表
.lists {
padding-top: 70rpx;
}
</style>

101
pages/goods/payStatus.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<view class="PayStatus">
<image class="payStatusImg" :src="success?'/static/imgs/paySuccess.png':'/static/imgs/payFail.png'" mode="widthFix" />
<view class="payTitle">{{success?'支付成功':'支付失败'}}</view>
<view class="payDes">{{success?'您已支付完成,订单稍后配送':'吼吼,您的支付未完成'}}</view>
<view class="payBackCheck">
<!-- <view class="check" v-if='success' @click="check">查看权证</view> -->
<view class="back" @click="back">返回首页</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
success:false,// 支付失败false 支付成功true
};
},
onLoad(e) {
if(e.success === 'true'){
uni.setNavigationBarTitle({
title:'支付成功'
})
this.success=true
}else{
uni.setNavigationBarTitle({
title:'支付失败'
})
this.success=false
}
},
methods: {
check() {
uni.reLaunch({
url:'/pages/property/order/numberWeight'
})
},
back() {
uni.reLaunch({
url:'/pages/equity/index'
})
}
}
}
</script>
<style lang="scss" scoped>
.PayStatus {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.payStatusImg {
width: 300rpx;
padding: 50rpx 0;
margin-top: 100rpx;
}
.payTitle {
font-size: 34rpx;
font-weight: bold;
color: #353535;
}
.payDes {
font-size: 26rpx;
color: #666;
padding: 20rpx;
margin-bottom: 30rpx;
}
.payBackCheck {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
font-size: 28rpx;
width: 100%;
.check {
border: $main-color solid 1rpx;
color: $main-color;
padding: 14rpx 50rpx;
border-radius: 4rpx;
}
.back {
background-color: $main-color;
color: #fff;
padding: 14rpx 50rpx;
border-radius: 4rpx;
}
}
}
</style>

229
pages/goods/tracedTo.vue Normal file
View File

@@ -0,0 +1,229 @@
<template>
<view class="GoodsAuthentication">
<view class="authenticationTop" v-if='list.length>0'>区块链溯源码:{{info.token}}</view>
<!-- 进度条 -->
<view v-if='list.length>0' class='timeAxis'>
<view class="box-top" v-for="(item,index) in list" :key="index">
<view class="left-box-top"><span>商品交易</span>{{item.blockTime}}</view> <!-- 左边 -->
<view class="line" :class="{active:true,none:index==(list.length-1)}">
<!-- 中线 -->
<view class="dot" :class="{active:true}"></view><!-- 圆点 -->
</view>
<!-- 右边 -->
<view class="right-box-top">
<view class="authenticationItem">
<view class="authenticationItemcontent">
<view class="authenticationItemcontentItem" v-if="item.goods">
<view class="title">名称:</view>
<view class="content">{{item.goods.name}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="item.goods">
<view class="title">规格:</view>
<view class="content">{{item.goods.skus[0].unit}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">购买数量:</view>
<view class="content">{{item.amount}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">区块链高度:</view>
<view class="content">{{item.height}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">交易哈希:</view>
<view class="content">{{item.hash}}</view>
</view>
<view class="zhushi">注释:{{item.note}}</view>
</view>
</view>
</view>
</view>
</view>
<no-list v-if="list.length === 0" name='no-chain' txt="没有任何数据哦~" />
<!-- 弹窗提示喽 -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
managesTracedTo
} from '@/apis/interfaces/goods'
export default {
data() {
return {
list: '',
info: ''
}
},
created() {
managesTracedTo(this.$Route.query.id).then(res => {
this.list = res.list
this.info = res
})
},
methods: {
priveImg(img) {
uni.previewImage({
current: img, // 当前显示图片的http链接
urls: [img] // 需要预览的图片http链接列表
})
},
call(phone) {
uni.makePhoneCall({
phoneNumber: phone,
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F7F7F7;
}
.GoodsAuthentication {
padding: 30rpx;
.authenticationTop {
width: 100%;
padding: 20rpx 50rpx;
background-color: $main-color;
font-size: 26rpx;
color: #fff;
border-radius: 60rpx;
word-break: break-all;
text-align: center;
margin-bottom: 40rpx;
}
// 商品认证
.authenticationItem {
width: 100%;
min-height: 300rpx;
.authenticationItemTitle {
font-size: 30rpx;
color: #333333;
font-weight: 600;
padding: 30rpx 20rpx;
}
}
.timeAxis {
margin-top: 60rpx;
}
}
.box-top {
width: 100%;
min-height: 120rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
.left-box-top {
width: 124rpx;
text-align: center;
color: #cacaca;
font-size: 22rpx;
padding-top: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
box-sizing: border-box;
span {
font-size: 28rpx;
// font-weight: bold;
color: #333;
padding-bottom: 10rpx;
padding-right: 4rpx;
}
}
.line {
width: 2rpx;
background-color: rgba(228, 231, 237, 1);
margin: 0 20rpx 0 20rpx;
padding-top: 0;
.dot {
width: 20rpx;
height: 20rpx;
background-color: rgba(228, 231, 237, 1);
border-radius: 50%;
position: relative;
left: -10rpx;
}
}
.right-box-top {
flex: 1;
width: calc(100% - 170rpx);
padding: 0 0 20rpx 0;
// 商品认证
.authenticationItem {
width: 100%;
.authenticationItemcontent {
width: 100%;
background-color: #fff;
border-radius: 20rpx;
border: solid rgba(200, 38, 0, .05) 6rpx;
box-shadow: 2rpx 2rpx 20rpx 0rpx rgba(200, 38, 0, .051);
padding: 10rpx 20rpx;
.zhushi {
font-size: 24rpx;
color: #999;
padding: 10rpx 0;
word-wrap: break-word;
}
.authenticationItemcontentItem {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
padding: 12rpx 0;
font-size: 26rpx;
.title {
width: 160rpx;
}
.content {
text-overflow: ellipsis;
width: calc(100% - 180rpx);
word-wrap: break-word;
}
.img {
width: 220rpx;
height: 160rpx;
}
}
}
}
}
}
//激活元素
.active {
background-color: #c82626 !important;
}
// 隐藏元素
.none {
background-color: rgba(0, 0, 0, 0) !important;
}
</style>

View File

@@ -0,0 +1,302 @@
<template>
<view class="address-create" v-if="isloaded">
<view class="list-item">
<view class="item">收货人 <input placeholder-class="placeholder-style" maxlength="10" v-model="name"
placeholder="请输入收货人姓名" />
</view>
</view>
<view class="list-item">
<view class="item">联系电话 <input placeholder-class="placeholder-style" v-model="mobile" type="number" maxlength="11"
placeholder="请输入收货人手机号码" /></view>
</view>
<view class="list-item">
<view class="item">所在区域
<span @click="btnClick()">{{addressTxt || '请选择省市区县,乡镇等'}}</span>
</view>
</view>
<view class="list-item">
<view class="item">详细地址 <textarea placeholder-class="placeholder-style" v-model="address" auto-height
placeholder="请完善详细街道,楼牌号等" />
</view>
</view>
<view class="list-item moren">
<view class="item">
<view class="uni-list-cell-db">设置默认地址</view>
<switch @change="switchChange" :checked="is_default" color='#8b64fd' style="transform:scale(0.9)" />
</view>
</view>
<view class="besure" @click="besure">保存</view>
<selectAddress ref='selectAddress' :addressIdList='addressIdList' @selectAddress="successSelectAddress" />
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
import cityData from '@/static/yixuan-selectAddress/city.json'
import {
addAddresses,
getAddresses,
editAddresses
} from '@/apis/interfaces/address'
export default {
components: {
selectAddress
},
data() {
return {
name: '', //姓名
mobile: '', //电话
address: '', //详细地址
is_default: false, //默认 1=默认
addressTxt: '', // 已选择的地址显示 (页面显示)
addressIdList: [], // 向子组件传递参数数组[3,36,37] 即显示默认值【province_idprovince_iddistrict_id】
addressId: '',
isloaded: false
};
},
onLoad(e) {
if (!!e.id) {
uni.setNavigationBarTitle({
title: '编辑地址'
})
this.addressId = e.id
this.getInfo(e.id)
} else {
this.isloaded = true
}
},
methods: {
// 根据地址id获取地址的详细信息
getInfo(id) {
getAddresses(id).then(res => {
const array = [res.province.region_id, res.city.region_id, res.district.region_id]
this.addressIdList = array
this.name = res.name
this.mobile = res.mobile
this.address = res.address
this.addressTxt = res.province.name + ' ' + res.city.name + ' ' + res.district.name
this.is_default = res.default
this.isloaded = true
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
},
// 是否勾选默认
switchChange(e) {
this.is_default = e.target.value
},
// 点击省市区选择
btnClick() {
this.$refs.selectAddress.show()
},
besure() {
let params = {
name: this.name,
mobile: this.mobile,
address: this.address,
is_default: this.is_default ? 1 : 0,
province_id: this.addressIdList[0],
city_id: this.addressIdList[1],
district_id: this.addressIdList[2]
}
console.log(params,'params。。。')
if (params.name.trim() === '') {
uni.showToast({
title: '请重新核对姓名',
icon: 'none'
})
} else if (params.mobile.trim() === '' || params.mobile.trim().length !== 11) {
uni.showToast({
title: '请重新核对手机号码',
icon: 'none'
})
} else if (this.addressIdList[0] === undefined || this.addressIdList[1] === undefined || this.addressIdList[
2] === undefined) {
uni.showToast({
title: '请完善省市区信息',
icon: 'none'
})
} else if (params.address.trim() === '') {
uni.showToast({
title: '请完善详细的收货地址',
icon: 'none'
})
} else {
if (this.addressId) {
editAddresses(this.addressId, params).then(res => {
this.$refs.uToast.show({
title: res,
type: 'primary',
duration: 3000
})
uni.setStorageSync('refresh',true)
uni.navigateBack({})
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
} else {
addAddresses(params).then(res => {
this.$refs.uToast.show({
title: res,
type: 'primary',
duration: 3000
})
uni.navigateBack({})
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
}
}
},
// 选择成功回调
successSelectAddress(address) {
if (address[0].id) {
this.addressIdList = [address[0].id, address[1].id, address[2].id]
this.addressTxt = address[0].name + ' ' + address[1].name + ' ' + address[2].name
}
},
}
}
</script>
<style lang="scss">
.Create-addr {
line-height: 100vh;
background-color: #fff;
}
.list-item {
padding: 0 $padding*1.5;
background-color: #fff;
.item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: $padding 0;
border-bottom: solid #f8f8f8 1rpx;
font-size: $title-size - 2;
color: #333;
input,
textarea,
span,
.picker {
color: #353535;
font-size: $title-size - 1;
width: 74%;
}
.picker {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
.picker-item {
width: 33.33%;
border: solid 1rpx #ccc;
text-align: center;
}
}
.placeholder-style {
color: #ccc;
}
}
}
.moren {
border-top: $padding solid #f7f7f7;
}
.besure {
background-color: $text-price;
color: #fff;
text-align: center;
margin: $margin*1.5;
border-radius: $radius;
padding: $padding*1.3;
}
.popup {
min-height: 500rpx;
.popup-top {
position: relative;
font-size: $title-size - 4;
.title {
text-align: center;
padding: $padding*1.5 $padding*2;
border-bottom: solid 1rpx #f7f7f7;
}
.select {
position: absolute;
top: $padding;
right: $padding;
color: $text-price;
}
}
.addr-show {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: 0 $padding *3;
font-size: $title-size;
.addr-show-item {
padding: $padding*1.5 0;
margin-right: $margin*2;
max-width: 33.33%;
overflow: hidden;
}
.picker-item-selected {
border-bottom: solid $text-price 4rpx;
}
}
.scroll-Y {
height: 60vh;
padding: $padding*2;
box-sizing: border-box;
.scroll-item {
padding: $padding*1.5 0;
border-bottom: solid .25rpx rgba($color: #000000, $alpha: 0.02);
color: #353535;
font-size: $title-size;
.pr20 {
padding-right: 20rpx;
}
}
}
}
</style>

271
pages/user/address/list.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<view class="Address-list" v-if="loaded">
<!-- 收货地址列表 -->
<view class="addr-list" v-for="(item,index) in addressLists" v-if="addressLists.length>0" @tap="select(index)"
:key="index">
<view class="addr-name-phone"> <span class="name">{{item.name}}</span> <span class="phone">
{{item.mobile}}</span>
</view>
<view class="addr-des">{{item.full_address}}</view>
<view class="moren-edit-del">
<view class="moren" :style="item.default?'':'color:#cacaca'+'!important;'"
@click.stop="moren(item.default+','+item.address_id)">
<uni-icons class="uni-icons" type="checkbox-filled" size="20"
:color="item.default?'#8b64fd':'#cacaca'">
</uni-icons>
默认
</view>
<view class="edit-del">
<view class="edit" @click.stop="edit(item.address_id)">
<uni-icons class="uni-icons" type="compose" size="16" color="#666"></uni-icons>编辑
</view>
<view class="del" @click.stop="del(item.address_id)" v-if="type != 'selectSite'">
<uni-icons type="trash" size="16" color="#666"></uni-icons> 删除
</view>
</view>
</view>
</view>
<view>
<!-- 底部新增按钮 -->
<uni-fab horizontal="left" vertical="bottom" :pattern='pattern' @fabClick="fabClick" />
</view>
<!-- 没有收货地址 -->
<no-list v-if="addressLists.length === 0" name='no-addr' txt="您还没有收货地址哦~" />
<!-- 请求中... -->
<!-- <view>{{loading?'请求中....':'请求结束'}}</view> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
addresses,
addAddresses,
getAddresses,
delAddresses,
defaultAddresses,
editAddresses
} from '@/apis/interfaces/address'
export default {
data() {
return {
addressLists: [],
type: '', //用于分辨是否从订单页面-选择地址 有值为订单页面来源 === 1 是返回上一页时候处理上一页参数
loaded: false, //默认页面不可渲染,请求接口后可以渲染
pattern: {
buttonColor: '#8b64fd'
}
};
},
onLoad(e) {
console.log(e)
if (e.type !== undefined) {
this.type = e.type
}
},
// 下拉刷新
onPullDownRefresh() {
// this.getAddr()
},
onShow() {
this.getAddr()
},
methods: {
// 新增
fabClick() {
uni.navigateTo({
url: '/pages/user/address/create'
})
},
// 修改
edit(id) {
uni.navigateTo({
url: '/pages/user/address/create?id=' + id
})
},
// 删除
del(id) {
let that = this
uni.showModal({
title: '是否确认删除',
success: (res) => {
if (res.confirm) {
delAddresses(id).then(res => {
that.$refs.uToast.show({
title: res,
type: 'primary',
duration: 3000
})
that.getAddr()
}).catch(err => {
that.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
}
}
})
},
// 默认
moren(data) {
let defaultT = data.split(',')[0]
let id = data.split(',')[1]
if (defaultT === 'false') {
defaultAddresses(id).then(res => {
this.$refs.uToast.show({
title: res,
type: 'primary',
duration: 3000
})
setTimeout(res => {
this.getAddr()
}, 500)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
}
},
// 获取列表
getAddr() {
this.loaded = true
addresses().then(res => {
this.addressLists = res
uni.stopPullDownRefresh()
console.log(this.type === '1', this.type)
if (this.type == '1') {
if (this.addressLists.length === 0) {
let pages = getCurrentPages();
let nowPage = pages[pages.length - 1];
let prevPage = pages[pages.length - 2];
prevPage.$vm.address = '';
} else {
let pages = getCurrentPages();
let nowPage = pages[pages.length - 1];
let prevPage = pages[pages.length - 2];
prevPage.$vm.address = res[0];
}
}
uni.setStorageSync('refresh', false)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
},
// 选择地址跳转
select(index) {
if (this.type == '1') {
let pages = getCurrentPages();
let nowPage = pages[pages.length - 1];
let prevPage = pages[pages.length - 2];
prevPage.$vm.address = this.addressLists[index];
uni.navigateBack({
delta: 1
})
}
}
}
}
</script>
<style lang="scss" scoped>
.Address-list {
width: 100%;
min-height: 100vh;
padding: $padding;
box-sizing: border-box;
// margin-bottom: 150rpx;
.no-more-addr {
font-size: $title-size*0.9;
color: $text-price;
uni-icons {
padding-right: $padding*0.5;
}
}
// 地址列表
.addr-list {
box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.1);
padding: $padding $padding*1.5;
background-color: #fff;
margin-bottom: $margin;
border-radius: $radius*0.5;
.name {
color: #353535;
font-weight: bold;
font-size: $title-size*1.1;
}
.phone {
margin-left: $margin*2;
}
.addr-des {
padding: $padding*.9 0 $padding*1 0;
font-size: $title-size-m;
border-bottom: solid #f8f8f8 1rpx;
color: $text-color;
}
.moren-edit-del {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding-top: $padding;
.moren,
.edit-del {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-size: $title-size*0.9;
color: $text-price;
.uni-icons {
padding-right: $padding*0.5;
}
.edit {
padding-right: $padding*1.5;
color: $text-color;
}
.del {
color: $text-color;
}
}
}
}
// 新增地址
.besure {
background-color: $text-price;
color: #fff;
text-align: center;
margin: $margin*1.5;
border-radius: $radius;
padding: $padding*1.3;
position: absolute;
}
}
</style>

View File

@@ -58,14 +58,14 @@
<view class="userVip-top-name" v-if="userIdentity.right"> <view class="userVip-top-name" v-if="userIdentity.right">
{{ userData.identity.id == 1 ? '开通' + userIdentity.right.name : '到期时间' + userIdentity.times.ended_at}} {{ userData.identity.id == 1 ? '开通' + userIdentity.right.name : '到期时间' + userIdentity.times.ended_at}}
</view> </view>
<view class="userVip-top-btn" v-if="userData.identity.id != 5" <!-- v-if="userData.identity.id != 5" -->
@click="openVip(userIdentity.right.identity_id)"> <view class="userVip-top-btn" @click="openVip(userIdentity.right.identity_id)" >
{{ userData.identity.id == 1 ? '去开通' : '去升级'}} {{ userData.identity.id == 1 ? '去开通' : userIdentity.is_top ?'已达成满级':'去升级'}}
<image class="userVip-top-arrow" src="/static/user/userVip_arrow.png"></image> <image class="userVip-top-arrow" src="/static/user/userVip_arrow.png"></image>
</view> </view>
<view class="userVip-top-btn" v-else> <!-- <view class="userVip-top-btn" v-else>
已达成满级 已达成满级
</view> </view> -->
</view> </view>
<!-- 已认证后显示 --> <!-- 已认证后显示 -->
<view class="userVip-rights"> <view class="userVip-rights">
@@ -75,10 +75,14 @@
全部更多 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png"> 全部更多 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png">
</image> </image>
</view> --> </view> -->
<view class="userVip-rightst-more" @click="openVip(userIdentity.right.identity_id)"> <view class="userVip-rightst-more" @click="openVip(userIdentity.right.identity_id)">
全部更多 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png"> 全部更多 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png">
</image> </image>
</view> </view>
<!-- <view class="userVip-rightst-more" v-else>
全部更多 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png">
</image>
</view> -->
</view> </view>
<view class="userVip-rightst-list" v-if="userIdentity.right"> <view class="userVip-rightst-list" v-if="userIdentity.right">
<view v-for="(item, index) in userIdentity.right.rights" :key="index" <view v-for="(item, index) in userIdentity.right.rights" :key="index"
@@ -205,6 +209,53 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 我的权证 -->
<!-- <view class="user-group">
<view class="title">
<view class="title-text">我的权证</view>
</view>
<view class="group-flex group-flex-4">
<view class="item" @click="$Router.push({name:'NumberWeight'})">
<view class="item-num">{{count.warrnats}}</view>
<view class="item-title">权证持有</view>
</view>
<view class="item" @click="$Router.push({name: 'marketManag'})">
<view class="item-num">{{count.warrnat_transfer}}</view>
<view class="item-title">权证转让</view>
</view>
<view class="item" @click="$Router.push({name:'ServicesOrder'})">
<view class="item-num">{{count.shipment_fuwu_count}}</view>
<view class="item-title">已使用</view>
</view>
<view class="item" @click="$Router.push({name:'MallShipments'})">
<view class="item-num">{{count.shipment_goods_count}}</view>
<view class="item-title">已提货</view>
</view>
</view>
</view> -->
<!-- 我的权证 -->
<view class="userPartner">
<view class="partner-title">
我的权证
</view>
<view class="tool-list">
<view class="tool-label" @click="$Router.push({name:'NumberWeight'})">
<image class="tool-label-img" src="/static/user/userServe-00.png" mode=""></image>
<view class="tool-label-name">权证持有</view>
</view>
<view class="tool-label" @click="$Router.push({name:'ServicesOrder'})">
<image class="tool-label-img" src="/static/user/userServe-02.png" mode=""></image>
<view class="tool-label-name">已使用</view>
</view>
<view class="tool-label" @click="$Router.push({name:'MallShipments'})">
<image class="tool-label-img" src="/static/user/userServe-03.png" mode=""></image>
<view class="tool-label-name">已提货</view>
</view>
</view>
</view>
<!-- 我的服务 --> <!-- 我的服务 -->
<view class="userPartner"> <view class="userPartner">
<view class="partner-title"> <view class="partner-title">

View File

@@ -0,0 +1,178 @@
<template>
<view class="LogisticsIndex" v-if="loaded">
<block v-if="list.length>0">
<view class="logistics-top">
<view>{{express.express_name}} <span class="copy" @click='copy(express.express_no)'>复制单号</span></view>
<view><span>快递编号</span>{{express.express_no}} </view>
</view>
<view class="Logistics-content">
<view>物流追踪</view>
<view class="list">
<view class="list-item" v-for="(item,index) in list" :key='index'>
<view :class="['dian',index === 0 ?'dian-active':'']"></view>
<view :class="['content',index === 0?'content-active':'']">
<view class=""><span style='padding-right: 10rpx;'>{{item.status}} - </span>{{item.context}}
</view>
<view class="date"> {{item.time}} </view>
</view>
</view>
</view>
</view>
</block>
<!-- 没有订单列表 -->
<no-list v-if="list.length === 0" name='no-addr' txt="暂无任务物流进度信息~" />
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
mallShipmentsLogistic
} from '@/apis/interfaces/numberWeight'
export default {
data() {
return {
list: [],
loaded:false,
no: '', // 快递单号
express:{},// 地址信息
}
},
onLoad(e) {
// this.no = this.$route.params.no
// this.getLogistic(this.no)
this.no = e.no
this.getLogistic(this.no)
},
methods: {
getLogistic(no) {
mallShipmentsLogistic(no).then(res => {
console.log(res)
this.list = res.logistics
this.express = res.express
this.loaded = true
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
},
// 复制
copy(no) {
uni.setClipboardData({
data: no,
success: res=>{
console.log('success');
console.log(res)
}
});
},
}
}
</script>
<style lang="scss">
page {
background-color: #F8F8F8;
}
.LogisticsIndex {
font-size: $title-size;
color: #333;
margin-top: 20rpx;
// 物流名称
.logistics-top {
background-color: #fff;
padding: 30rpx 50rpx;
margin-bottom: 20rpx;
view:nth-child(2) {
padding-top: $padding * 0.5;
font-size: 0.9*$title-size;
}
.copy {
display: inline-block;
padding: $padding *0.4 $padding;
background-color: $main-color;
margin-left: 30rpx;
color: #fff;
font-size: $title-size *0.8;
border-radius: 6rpx;
}
}
// 物流进度
.Logistics-content {
background-color: #fff;
padding: 30rpx 50rpx;
margin: 50rpx 0;
.list {
margin-top: $margin*2;
margin-left: 20rpx;
.list-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
box-sizing: border-box;
position: relative;
border-left: solid 2rpx #cacaca;
padding-bottom: $margin*1.6;
&:last-child {
border-left: solid 2rpx #fff !important;
}
&:first-child {
color: $main-color !important;
}
.dian {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #cacaca;
border: solid 10rpx rgba($color:#cacaca, $alpha: 0.3);
position: relative;
left: -11rpx;
}
.dian-active {
background-color: $main-color;
width: 30rpx;
height: 30rpx;
left: -16rpx;
border: solid 10rpx rgba($color: $main-color, $alpha: 0.3);
box-shadow: 0 0 20rpx 4rpx rgba($color: $main-color, $alpha: 0.5);
}
.content {
flex: 1;
margin-left: 60rpx;
// padding: 10rpx 0;
font-size: $title-size * 0.9;
color: #666;
position: relative;
top: -10rpx;
.date {
margin-top: $margin;
}
}
.content-active {
color: $main-color;
}
}
}
}
}
</style>

View File

@@ -0,0 +1,326 @@
<template>
<view class="NumberWeight">
<!-- 订单分类 -->
<scroll-view class="nav" scroll-x="true" :scroll-into-view='selectCategoryId' scroll-with-animation="true">
<view :class="['nav-item' ,selectNavId === item.id?'nav-item-selected':'']" v-for="(item,index) in navList"
:key="index" @click="selectNav(item.id)">
{{item.name}}
{{item.id ==='apply' && count.apply >0 ? '('+count.apply + ')':''}}
{{item.id ==='deliver' && count.deliver >0 ?'('+count.deliver + ')':''}}
{{item.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
{{item.id ==='signed' && count.signed >0 ?'('+count.signed + ')':''}}
{{item.id ==='process' && count.process >0 ?'('+count.process + ')':''}}
{{item.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
</view>
</scroll-view>
<!-- 有订单列表 -->
<view class="" v-if="lists.length > 0">
<!-- 订单列表 -->
<view class="order-list" v-for="(item,index) in lists" :key="index">
<MallRefundsTemplate :item="item" />
<view class="actions">
<view @click="goDetail(item.refund_id)" class="nowPay">查看详情</view>
</view>
</view>
</view>
<!-- 没有订单列表 -->
<no-list v-if="lists.length === 0" name='no-order' txt="暂无数据~" />
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
MallRefundsTemplate
} from '@/components/mall-refunds-template/mall-refunds-template'
import { mallRefunds } from '@/apis/interfaces/numberWeight'
export default {
components: {
MallRefundsTemplate
},
data() {
return {
lists: [],
page:1,
total:0,
navList: [{
name: '待审核',
id: 'apply'
},{
name: '待返货',
id: 'deliver'
},{
name: '待签收',
id: 'delivered'
},{
name: '已签收',
id: 'signed'
},
{
name: '待退权证',
id: 'process'
},
{
name: '完成退货',
id: 'completed'
}
],
selectNavId: 'apply',
count:{}
};
},
onLoad() {
this.getList()
},
onShow(){
console.log(uni.getStorageSync('refresh'),'getStorageSync')
if(uni.getStorageSync('refresh')){
this.reset()
}
},
onUnload() {
uni.setStorageSync('refresh',false)
},
onReachBottom() {
if(this.total>this.lists.length){
this.page = this.page + 1
this.getList()
}else{
this.$refs.uToast.show({
title: '吼吼吼~我是有底的~',
type: 'error',icon:false,
duration: 3000
})
}
},
methods: {
reset(){
this.page =1
this.total = 0
this.lists = []
this.getList()
uni.setStorageSync('refresh',false)
},
// 选择订单
selectNav(id) {
if (this.selectNavId !== id) {
this.selectNavId = id
this.reset()
}
},
// 获取订单列表
getList(){
let data = {
pageSize:20,
page:this.page,
state:this.selectNavId
}
mallRefunds(data).then(res=>{
console.log(res)
this.count = res.count
this.lists = this.lists.concat(res.lists.data)
this.total = res.lists.page.total
}).catch(err=>{
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
},
// 取消提货单
nowCancel(index,no){
console.log(index,no)
uni.showModal({
title: '哎呦,提醒你',
content: '是否确认要取消订单啊,取消后请去我的权证中查看',
success: (res) =>{
if (res.confirm) {
mallShipmentsCancel(no).then(res=>{
console.log(res)
this.$refs.uToast.show({
title:res,
type: 'error',icon:false,
duration: 3000
})
this.lists.splice(index,1)
this.total = this.total - 1
}).catch(err=>{
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
} else if (res.cancel) {
this.$refs.uToast.show({
title:'放弃了~',
type: 'error',icon:false,
duration: 3000
})
}
}
});
},
// 签收提货单
nowSign(index,no){
console.log(index,no)
uni.showModal({
title: '哎呦,提醒你',
content: '是否确认已经收到商品了呀',
success: (res) =>{
if (res.confirm) {
console.log(no)
mallShipmentsSign(no).then(res=>{
console.log(res)
this.$refs.uToast.show({
title:res,
type: 'error',icon:false,
duration: 3000
})
this.lists.splice(index,1)
this.total = this.total - 1
}).catch(err=>{
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
} else if (res.cancel) {
this.$refs.uToast.show({
title:'放弃了~',
type: 'error',icon:false,
duration: 3000
})
}
}
});
},
// 查看详情
goDetail(no){
this.$router.push({
name: 'MallRefundsInfo',
params:{
no:no
}
})
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
}
.NumberWeight {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
// 订单nav
.nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
white-space: nowrap;
font-size: $title-size*0.95;
padding: 0 30rpx;
background-color: #fff;
color: #666;
border-top: solid 20rpx #f7f7f7;
position: sticky;
top: 0rpx;
z-index: 1;
.nav-item {
display: inline-block;
border-bottom: solid 4rpx #fff;
padding: 30rpx 10rpx;
margin-right: 10rpx;
}
.nav-item-selected {
border-bottom: solid 4rpx $main-color;
color: $main-color;
}
}
// 订单列表
.order-list {
background-color: #fff;
border-radius: 20rpx;
min-height: 300rpx;
margin: 30rpx 20rpx 0 20rpx;
padding:30rpx 30rpx 20rpx 30rpx ;
// border-top: solid 4rpx #cacaca;
// 操作信息
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
flex-wrap: wrap;
flex: 1;
font-size: 28rpx;
color: #fff;
border-top: solid 1rpx #EFF4F2;
.nowPay {
padding: 4rpx 20rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
// background-color: $main-color;
color: #999;
border:solid 1rpx #cacaca;
}
.cancelOrder {
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
background-color: #DD524D;
}
.logistics {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.sign {
background-color: #DD524D;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.evaluate {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
}
</style>

View File

@@ -0,0 +1,716 @@
<template>
<view class="OrderInfo" v-if="loaded">
<!-- 订单状态 -->
<view class="order-status">
<view class="info">
{{state.text}}
<span>{{state.remark}}</span>
</view>
<image src="/static/imgs/fire.png" mode="widthFix"></image>
</view>
<view class="goods-info1">
<view class="top">
<view class="company">
<view class="company-logo">
<image :src="info.shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{info.shop.name}}</view>
</view>
<view class="flexrow">
<view class="no ellipsis">退后单号 {{info.refund_no}}</view>
</view>
</view>
</view>
<view class="goods-info">
<image class="goods-img" :src="info.goods_sku.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{info.goods_sku.goods_name}}</view>
<!-- <span>16.80</span> -->
</view>
<view class="sku">权证个数 <span>x {{info.qty}}</span> </view>
</view>
</view>
<navigator class="total" hover-class="none" :url='"/pages/goods/details?id="+info.goods_sku.goods_id'>
<view class="total-btn">再次购买</view>
</navigator>
<view class="goods-type">创建退货时间 <span>{{info.created_at}}</span></view>
<view class="goods-type">运费 <span>自行承担运费</span></view>
<view class="goods-type">退货数量 <span>
<u-number-box v-model="info.qty" :disabled="true"></u-number-box>
</span></view>
<view class="goods-type">退货方式<span>快递退回</span></view>
<block v-if="info.can.user_deliver">
<view class="goods-type-1">物流公司
<u-input v-model="company" placeholder='请输入退货物流公司' />
</view>
<view class="goods-type-1">物流单号
<u-input v-model="number" placeholder='请输入物流单号' />
</view>
</block>
</view>
<!-- 操作相关 -->
<view class="actions">
<view @click="showLogs = true" class="nowPay">查看退货日志</view>
<view v-if="info.can.user_deliver" @click="nowRefunds(refund_id)" class="nowPay">确认退货</view>
</view>
<!-- 显示 -->
<u-popup v-model="showLogs" mode="bottom" border-radius="14">
<scroll-view scroll-y="true" style="height: 1000rpx;" class="scrollView" v-if="logs.length>0">
<view class="coupon-title">退货操作进度 </view>
<view class="list">
<view class="list-item" v-for="(item,index) in logs" :key='index'>
<view :class="['dian',index === 0 ?'dian-active':'']"></view>
<view :class="['content',index === 0?'content-active':'']">
<view class="title">{{item.state_text?item.state_text:'当前状态不明确,需后台返回'}}</view>
<view class="des">原因{{item.title || '无理由'}} 备注{{item.remark || '无备注'}}</view>
<view class="pictures">
<image @click="priveImg(index,idx)" v-for="(it,idx) in item.pictures" :key='idx' :src="it" mode="aspectFill" />
</view>
<view class="date"> {{item.created_at}} </view>
</view>
</view>
</view>
<!-- 没有优惠券列表 -->
<no-list v-if="logs.length === 0" name='no-news' txt="没有任何退货进度信息哦~" />
</scroll-view>
</u-popup>
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
mallRefundsInfo,
mallRefundsDeliver
} from '@/apis/interfaces/numberWeight'
export default {
name: 'OrderInfo',
data() {
return {
info: {},
qty: 1,
state:{},
refund_id: '', // 退货单no
company: '',
number: '',
logs: [],
loaded:false,
showLogs: false // 默认不显示记录信息
};
},
onLoad(e) {
// this.refund_id = this.$route.params.no
// this.getInfo(this.refund_id)
this.refund_id = e.no
this.getInfo(e.no)
},
onShow() {
if (uni.getStorageSync('refresh')) {
this.getInfo(this.refund_id)
}
},
methods: {
// 获取退货的基本信息
getInfo(refund_id) {
mallRefundsInfo(refund_id).then(res => {
this.info = res
this.logs = res.log
this.state = res.state
this.loaded = true
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
},
priveImg(index,idx){
console.log(this.logs[index].pictures);
uni.previewImage({
current:idx,
urls:this.logs[index].pictures
})
},
// 确认退货
nowRefunds(no) {
let data = {
refund: this.refund_id,
company: this.company,
number: this.number,
}
if (data.company === '') {
this.$refs.uToast.show({
title: '请核对物流公司名称',
type: 'error',icon:false,
duration: 3000
})
return;
}
if (data.number === '') {
this.$refs.uToast.show({
title: '请核对物流单号',
type: 'error',icon:false,
duration: 3000
})
return;
}
uni.showModal({
title: '哎呦,提醒你',
content: '是否确退货信息准确无误呀',
success: (res) => {
if (res.confirm) {
mallRefundsDeliver(data).then(res => {
console.log(res)
this.$refs.uToast.show({
title: res,
type: 'error',icon:false,
duration: 3000
})
this.getInfo(data.refund)
uni.setStorageSync('refresh', true)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
} else if (res.cancel) {
this.$refs.uToast.show({
title: '放弃了~',
type: 'error',icon:false,
duration: 3000
})
}
}
});
},
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
}
.OrderInfo {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
padding-bottom: 80rpx;
.order-status {
width: 100%;
height: 300rpx;
background-image: linear-gradient(to bottom, $main-color, $main-color-light);
color: #Fff;
font-size: 36rpx;
padding: 30rpx 50rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.info {
font-size: 36rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
span {
font-size: 28rpx;
padding-top: 30rpx;
}
}
image {
width: 200rpx;
}
}
.acceptInfo {
margin: 0 30rpx;
background-color: #fff;
box-shadow: 0 0 14rpx 4rpx rgba($color: $main-color, $alpha: 0.2);
border-radius: 20rpx;
padding: 30rpx;
position: relative;
top: -30rpx;
.name {
font-size: 36rpx;
font-weight: 600;
span {
padding-left: 20rpx;
font-size: 30rpx;
}
}
.address {
padding-top: 20rpx;
font-size: 28rpx;
span {
margin-left: 10rpx;
}
}
}
.goods-info1 {
padding: 20rpx 40rpx;
background-color: #fff;
.goods-type {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #f7f7f7;
}
.goods-type-1 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #f7f7f7;
u-input {
flex: 1;
margin-left: 50rpx;
}
}
.goods-type-address {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
u-icon {
padding-left: 20rpx;
}
}
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #EFF4F2;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 600rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 16rpx;
font-size: $title-size*0.8;
color: #999;
// width: 500rpx;
}
.status {
color: #999;
font-size: $title-size;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 40rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
width: 500rpx;
}
span {
font-size: 34rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
// 合计信息
.total {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
font-size: 26rpx;
color: $main-color;
flex: 1;
text-align: right;
margin-top: 20rpx;
padding-bottom: 30rpx;
}
.total-btn {
border: solid 1rpx $main-color;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
// 操作信息
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
flex-wrap: wrap;
background-color: #fff;
flex: 1;
font-size: 28rpx;
padding: 20rpx 50rpx 30rpx 50rpx;
color: #fff;
.nowPay {
padding: 4rpx 20rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
// background-color: $main-color;
color: #999;
border: solid 1rpx #cacaca;
}
.cancelOrder {
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
background-color: #DD524D;
}
.logistics {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.sign {
background-color: #DD524D;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.evaluate {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
.flexrow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy {
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
.no-address {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
// 优惠券弹窗
.scrollView {
// padding: 40rpx;
box-sizing: border-box;
position: relative;
// 标题
.coupon-title {
padding: 40rpx;
font-weight: bold;
font-size: 40rpx;
border-bottom: solid 1rpx #f7f7f7;
}
// 优惠券样式
.coupon-list-item {
border-bottom: solid 1rpx #f7f7f7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
width: 100%;
padding: 20rpx 50rpx;
.coupon-item {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding-top: 10rpx;
}
}
}
.list-top1 {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: $title-size*0.94;
width: 100%;
margin-left: 0 !important;
margin-top: 30rpx;
.shop-info {
margin-left: 20rpx;
}
.list-top1-img {
width: 170rpx;
height: 170rpx;
border-radius: 10rpx;
}
.des {
font-size: 28rpx;
}
.title {
font-size: 32rpx;
}
}
.list-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
font-size: $title-size*0.94;
border-bottom: solid 1rpx #f7f7f7;
width: 600rpx;
margin-left: 30rpx;
.list-top-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.shop-info {
flex: 1;
}
.title {
width: 380rpx;
font-size: $title-size*1;
font-weight: 400;
}
.urate {
padding: 10rpx 0;
}
.des {
// padding-top: $padding*0.8;
font-size: $title-size * 0.8;
color: #999;
span {
color: #666;
padding: 0 10rpx;
}
}
.list-banner {
width: 120rpx;
margin-right: $margin*1.5;
height: 120rpx;
border-radius: 4rpx;
}
}
.list-top-right {
border: solid 1rpx $main-color;
color: $main-color;
display: inline-block;
padding: 8rpx 16rpx;
font-size: $title-size *0.8;
border-radius: 4rpx;
}
}
.list {
margin-top: $margin*2;
margin-left: 20rpx;
padding: 30rpx 50rpx;
.list-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
box-sizing: border-box;
position: relative;
border-left: solid 2rpx #cacaca;
padding-bottom: $margin*1.6;
&:last-child {
border-left: solid 2rpx #fff !important;
}
&:first-child {
color: $main-color !important;
}
.dian {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #cacaca;
border: solid 10rpx rgba($color:#cacaca, $alpha: 0.3);
position: relative;
left: -11rpx;
}
.dian-active {
background-color: $main-color;
width: 30rpx;
height: 30rpx;
left: -16rpx;
border: solid 10rpx rgba($color: $main-color, $alpha: 0.3);
box-shadow: 0 0 20rpx 4rpx rgba($color: $main-color, $alpha: 0.5);
}
.content {
flex: 1;
margin-left: 60rpx;
// padding: 10rpx 0;
font-size: $title-size * 0.9;
color: #666;
position: relative;
top: -10rpx;
.date {
margin-top: $margin;
}
}
.content-active {
color: $main-color;
}
.pictures{
width: 100%;
image{
width: 160rpx;
height: 160rpx;
margin: 8rpx;
border-radius: 2rpx;
}
}
}
}
</style>

View File

@@ -0,0 +1,499 @@
<template>
<view class="mallShipments">
<!-- 订单分类 -->
<view class="nav">
<view :class="['nav-item' ,selectTypeId === item.id?'nav-item-selected':'']"
v-for="(item,index) in typeList" :key="index" @click="selectType(item.id,index)">
{{item.name}}
{{item.id ==='signed' && count.signed >0 ? '('+count.signed + ')':''}}
{{item.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
{{item.id ==='init' && count.init >0 ?'('+count.init + ')':''}}
{{item.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
</view>
</view>
<!-- 快递点 自提单显示 -->
<scroll-view class="nav1" v-if='selectTypeIndex === 0 || selectTypeIndex === 1' scroll-x="true" scroll-with-animation="true">
<view :class="['nav-item' ,state === it.id?'nav-item-selected':'']" v-for="(it,idx) in typeList[selectTypeIndex].categrery"
:key="idx" @click="selectNav(it.id)">
{{it.name}}
{{it.id ==='signed' && count.signed >0 ? '('+count.signed + ')':''}}
{{it.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
{{it.id ==='init' && count.init >0 ?'('+count.init + ')':''}}
{{it.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
</view>
</scroll-view>
<!--退货单 -->
<scroll-view class="nav1" v-else scroll-x="true" scroll-with-animation="true">
<view :class="['nav-item' ,state === it.id?'nav-item-selected':'']" v-for="(it,idx) in typeList[selectTypeIndex].categrery"
:key="idx" @click="selectNav(it.id)">
{{it.name}}
{{it.id ==='apply' && count.apply >0 ? '('+count.apply + ')':''}}
{{it.id ==='deliver' && count.deliver >0 ?'('+count.deliver + ')':''}}
{{it.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
{{it.id ==='signed' && count.signed >0 ?'('+count.signed + ')':''}}
{{it.id ==='process' && count.process >0 ?'('+count.process + ')':''}}
{{it.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
</view>
</scroll-view>
<!-- 有订单列表 -->
<block v-if="lists.length > 0">
<!-- 订单列表 -->
<view class="order-list" v-for="(item,index) in lists" :key="index" v-if='selectTypeIndex === 0 || selectTypeIndex === 1'>
<MallShipmentsTemplate :item="item" />
<view class="actions">
<view class="nowPay" @click="goDetail(item.shipment_no)">查看详情</view>
<view v-if="item.can.cancel" @click="nowCancel(index,item.shipment_no)" class="nowPay">取消订单</view>
<view v-if="item.can.sign" @click="nowSign(index,item.shipment_no)" class="nowPay">确认签收</view>
<view v-if="item.can.refund" @click="nowRefund(item.shipment_no)" class="nowPay">申请退货</view>
<view v-if="item.can.logistic" @click="nowLogistics(item.shipment_no)" class="nowPay">查看物流</view>
</view>
</view>
<!-- 有订单列表 -->
<view class="" v-if="selectTypeIndex === 2">
<!-- 订单列表 -->
<view class="order-list" v-for="(item,index) in lists" :key="index">
<MallRefundsTemplate :item="item" />
<view class="actions">
<view @click="goDetail1(item.refund_id)" class="nowPay">查看详情</view>
</view>
</view>
</view>
</block>
<!-- 没有订单列表 -->
<no-list v-if="lists.length === 0" name='no-order' txt="暂无数据~" />
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import MallShipmentsTemplate from '@/components/mall-shipments-template/mall-shipments-template'
import MallRefundsTemplate from '@/components/mall-refunds-template/mall-refunds-template'
import {
mallShipmentsPostShop,
mallShipmentsSign,
mallShipmentsCancel
} from '@/apis/interfaces/numberWeight'
export default {
components: {
MallShipmentsTemplate,MallRefundsTemplate
},
data() {
return {
lists: [],
page: 1,
total: 0,
navList: [],
count: {}, // 订单数量
typeList: [{
name: '快递单',
id: 'post',
categrery: [{
name: '待发货',
id: 'init'
},
{
name: '已发货',
id: 'delivered'
},
{
name: '已签收',
id: 'signed'
},
{
name: '已完成',
id: 'completed'
}
]
},
{
name: '自提单',
id: 'take',
categrery: [{
name: '已提货',
id: 'signed'
},
{
name: '已完成',
id: 'completed'
}
]
},
{
name: '退货单',
id: 'refund',
categrery: [{
name: '待审核',
id: 'apply'
}, {
name: '待返货',
id: 'deliver'
}, {
name: '待签收',
id: 'delivered'
}, {
name: '已签收',
id: 'signed'
},
{
name: '待确认退货',
id: 'process'
},
{
name: '完成退货',
id: 'completed'
}
]
},
],
selectTypeId: 'post',
state: 'init',
selectTypeIndex: 0
};
},
onLoad(e) {
this.getList()
},
onShow() {
console.log(uni.getStorageSync('refresh'), 'getStorageSync')
if (uni.getStorageSync('refresh')) {
this.reset()
}
},
onUnload() {
uni.setStorageSync('refresh', false)
},
onReachBottom() {
if (this.total > this.lists.length) {
this.page = this.page + 1
this.getList()
} else {
this.$refs.uToast.show({
title: '吼吼吼~我是有底的~',
type: 'error',
icon: false,
duration: 3000
})
}
},
methods: {
reset() {
this.page = 1
this.total = 0
this.lists = []
this.getList()
uni.setStorageSync('refresh', false)
},
// 选择状态
selectNav(id) {
if (this.state !== id) {
this.state = id
this.reset()
}
},
// 快递单post 提货单 take 退货单refund
selectType(id,index) {
console.log('id' + id)
if (this.selectTypeId !== id) {
this.state = this.typeList[index].categrery[0].id
this.selectTypeId = id
this.selectTypeIndex = index
this.reset()
}
},
// 获取订单列表
getList() {
let data = {
pageSize: 4,
page: this.page,
state: this.state
}
let apiUrl = ''
if (this.selectTypeId === 'post') {
apiUrl = 'mall/shipments/post'
} else if(this.selectTypeId === 'take') {
apiUrl = 'mall/shipments/shop'
data.channel = 'app'
} else if(this.selectTypeId === 'refund') {
apiUrl = 'mall/refunds'
}
mallShipmentsPostShop(apiUrl, data).then(res => {
console.log(res.count)
this.count = res.count
this.lists = this.lists.concat(res.lists.data)
this.total = res.lists.page.total
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',
icon: false,
duration: 3000
})
})
},
// 取消提货单
nowCancel(index, no) {
console.log(index, no)
uni.showModal({
title: '哎呦,提醒你',
content: '是否确认要取消订单啊,取消后请去我的权证中查看',
success: (res) => {
if (res.confirm) {
mallShipmentsCancel(no).then(res => {
console.log(res)
this.$refs.uToast.show({
title: res,
type: 'error',
icon: false,
duration: 3000
})
this.lists.splice(index, 1)
this.total = this.total - 1
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',
icon: false,
duration: 3000
})
})
} else if (res.cancel) {
this.$refs.uToast.show({
title: '放弃了~',
type: 'error',
icon: false,
duration: 3000
})
}
}
});
},
// 签收提货单
nowSign(index, no) {
console.log(index, no)
uni.showModal({
title: '哎呦,提醒你',
content: '是否确认已经收到商品了呀',
success: (res) => {
if (res.confirm) {
console.log(no)
mallShipmentsSign(no).then(res => {
console.log(res)
this.$refs.uToast.show({
title: res,
type: 'error',
icon: false,
duration: 3000
})
this.lists.splice(index, 1)
this.total = this.total - 1
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',
icon: false,
duration: 3000
})
})
} else if (res.cancel) {
this.$refs.uToast.show({
title: '放弃了~',
type: 'error',
icon: false,
duration: 3000
})
}
}
});
},
// 申请退货
nowRefund(no) {
// this.$Router.push({
// name: 'MallShipmentsRefund',
// params: {
// no: no
// }
// })
uni.navigateTo({
url:'/pages/user/order/mallShipmentsRefund?no='+no
})
},
// 查看物流
nowLogistics(no) {
// this.$Router.push({
// name: 'Orderlogistics',
// params: {
// no: no
// }
// })
uni.navigateTo({
url:'/pages/user/order/logistics?no='+no
})
},
// 查看详情
goDetail(no) {
// this.$Router.push({
// name: 'MallShipmentsInfo',
// query:{
// no:no
// }
// })
uni.navigateTo({
url:'/pages/user/order/mallShipmentsInfo?no='+no
})
},
// 查看退货单详情
// 查看详情
goDetail1(no){
// this.$Router.push({
// name: 'MallRefundsInfo',
// params:{
// no:no
// }
// })
uni.navigateTo({
url:'/pages/user/order/mallRefundsInfo?no='+no
})
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
}
.mallShipments {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
// 订单nav
.nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
font-size: $title-size*0.95;
padding: 0 30rpx;
background-color: #fff;
color: #666;
border-top: solid 20rpx #f7f7f7;
position: sticky;
top: 0rpx;
z-index: 10000;
.nav-item {
border-bottom: solid 4rpx #fff;
padding: 30rpx 10rpx;
}
.nav-item-selected {
border-bottom: solid 4rpx $main-color;
color: $main-color;
}
}
.nav1 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
white-space: nowrap;
font-size: $title-size*0.95;
padding:30rpx 30rpx 20rpx 30rpx;
color: #666;
position: sticky;
top: 120rpx;
z-index: 10000;
background-color: #f7f7f7;
.nav-item {
display: inline-block;
padding-right: 30rpx;
}
.nav-item-selected {
color: $main-color;
}
}
// 订单列表
.order-list {
background-color: #fff;
border-radius: 20rpx;
min-height: 300rpx;
margin: 30rpx 20rpx 0 20rpx;
padding: 30rpx 30rpx 20rpx 30rpx;
// border-top: solid 4rpx #cacaca;
// 操作信息
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
flex-wrap: wrap;
flex: 1;
font-size: 28rpx;
color: #fff;
border-top: solid 1rpx #EFF4F2;
.nowPay {
padding: 4rpx 20rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
// background-color: $main-color;
color: #999;
border: solid 1rpx #cacaca;
}
.cancelOrder {
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
background-color: #DD524D;
}
.logistics {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.sign {
background-color: #DD524D;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.evaluate {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
}
</style>

View File

@@ -0,0 +1,669 @@
<template>
<view class="OrderInfo" v-if="loaded">
<!-- 订单状态 -->
<view class="order-status">
<view class="info">
{{info.state_text}}
<span>您的快递正在坐着火箭朝您飞来</span>
</view>
<image src="/static/imgs/fire.png" mode="widthFix"></image>
</view>
<!-- 收货人 -->
<view class="acceptInfo" v-if="type === '1'" >
<block >
<view class="name">{{address.name}} <span>{{address.mobile}}</span> </view>
<view class="address">
<u-icon name="map" color="red"></u-icon>
<span>{{address.full_address}}</span>
</view>
</block>
</view>
<view class="goods-info1">
<view class="top" >
<view class="company">
<view class="company-logo">
<image :src="info.shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{info.shop.name}}</view>
</view>
<view class="flexrow">
<view class="no ellipsis">发货单号 {{info.shipment_no}}</view>
</view>
</view>
</view>
<view class="goods-info">
<image class="goods-img" :src="info.goods_sku.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{info.goods_sku.goods_name}}</view>
<!-- <span>16.80</span> -->
</view>
<view class="sku">权证个数 <span>x {{info.qty}}</span> </view>
</view>
</view>
<navigator class="total" hover-class="none" :url='"/pages/goods/details?id="+info.goods_sku.goods_id'>
<view class="total-btn">再次购买</view>
</navigator>
<view class="goods-type">创建提货单时间 <span>{{info.created_at}}</span></view>
<view class="goods-type" v-if="type === '1'">运费 <span>免邮</span></view>
<view class="goods-type">提货数量 <span><u-number-box v-model="info.qty" :disabled="true"></u-number-box></span></view>
<view class="goods-type">提货方式
<u-radio-group v-model="type">
<u-radio
v-for="(item, index) in list" :key="index"
:name="item.id"
:disabled="type !== item.id"
>
{{item.name}}
</u-radio>
</u-radio-group>
</view>
<!-- <view class="goods-type" v-if="type === '2'">提货码
<span @click='takeCode'>查看提货码</span>
</view> -->
<view class="goods-type-1" v-if="type === '2'">
提货门店
<view class="goods-type-address">
<view class="list-top1">
<image :src="info.store.cover.showpath" @click="map(info.store)" mode="aspectFill" class="list-top1-img" />
<view class="shop-info shop-info1">
<view class="title ellipsis">{{info.store.name}}</view>
<view class="des" style="padding-top: 16rpx;">营业时间{{info.store.start_time}}</view>
<view class="des" style="padding-top: 4rpx;" @click="call(info.store.mobile)">联系电话{{info.store.mobile}}</view>
<view class="des" style="padding-top: 4rpx;" @click="map(info.store)">门店地址{{info.store.address}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 订单 -->
<view class="actions">
<view v-if="info.can.cancel" @click="nowCancel(shipment_no)" class="nowPay">取消订单</view>
<view v-if="info.can.sign" @click="nowSign(shipment_no)" class="nowPay">确认签收</view>
<view v-if="info.can.refund" @click="nowRefund(shipment_no)" class="nowPay">申请退货</view>
<view v-if="info.can.logistic" @click="nowLogistics(shipment_no)" class="nowPay">查看物流</view>
</view>
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import { mallShipmentsInfo,mallShipmentsCancel,mallShipmentsSign } from '@/apis/interfaces/numberWeight'
export default {
name: 'OrderInfo',
data() {
return {
info:{},
list: [
{ name: '快递', disabled: true , id:'1'},
{ name: '自提', disabled: false , id:'2'}
],
address:{},
type: '1', //提货类型2 自提 1 邮寄
showStoreList: false, // 默认false不显示优惠券弹窗列表
store_id: '', // 默认没有选择任何一个优惠券
store_Name:'',// 门店名称
qty :1,
shipment_no:'', // 提货单no
loaded:false
};
},
onLoad(e) {
this.shipment_no = e.no
this.getInfo(e.no)
},
onShow() {
if(uni.getStorageSync('refresh')){
this.getInfo(this.shipment_no)
}
},
methods: {
getInfo(shipment_no){
mallShipmentsInfo(shipment_no).then(res=>{
this.info = res
this.address = res.express
this.type = res.type+''
this.loaded = true
}).catch(err=>{
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
},
// 取消提货单
nowCancel(no){
uni.showModal({
title: '哎呦,提醒你',
content: '是否确认要取消订单啊,取消后请去我的权证中查看',
success: (res) =>{
if (res.confirm) {
mallShipmentsCancel(no).then(res=>{
console.log(res)
this.$refs.uToast.show({
title:res,
type: 'error',icon:false,
duration: 3000
})
this.getInfo(no)
}).catch(err=>{
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
} else if (res.cancel) {
this.$refs.uToast.show({
title:'放弃了~',
type: 'error',icon:false,
duration: 3000
})
}
}
});
},
// 签收提货单
nowSign(no){
console.log(no)
uni.showModal({
title: '哎呦,提醒你',
content: '是否确认已经收到商品了呀',
success: (res) =>{
if (res.confirm) {
console.log(no)
mallShipmentsSign(no).then(res=>{
console.log(res)
this.$refs.uToast.show({
title:res,
type: 'error',icon:false,
duration: 3000
})
this.getInfo(no)
uni.setStorageSync('refresh',true)
}).catch(err=>{
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
} else if (res.cancel) {
this.$refs.uToast.show({
title:'放弃了~',
type: 'error',icon:false,
duration: 3000
})
}
}
});
},
// 查看提货二维码 弹窗
takeCode(){
console.log(this.info.code)
let url = this.info.code,
urls = [this.info.code]
uni.previewImage({
current:url,
urls:urls
})
},
// 申请退货
nowRefund(no){
this.$router.push({
name: 'MallShipmentsRefund',
params:{
no:no
}
})
},
call(e){
uni.makePhoneCall({
phoneNumber:e
})
},
map(info){
console.log(info.latitude,info.longitude)
uni.openLocation({
latitude: Number(info.latitude),
longitude: Number(info.longitude),
success: function () {
console.log('success');
}
});
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
}
.OrderInfo {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
padding-bottom: 80rpx;
.order-status {
width: 100%;
height: 300rpx;
background-image: linear-gradient(to bottom, $main-color, $main-color-light);
color: #Fff;
font-size: 36rpx;
padding: 30rpx 50rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.info {
font-size: 36rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
span {
font-size: 28rpx;
padding-top: 30rpx;
}
}
image {
width: 200rpx;
}
}
.acceptInfo {
margin: 0 30rpx;
background-color: #fff;
box-shadow: 0 0 14rpx 4rpx rgba($color: $main-color, $alpha: 0.2);
border-radius: 20rpx;
padding: 30rpx;
position: relative;
top: -30rpx;
.name {
font-size: 36rpx;
font-weight: 600;
span {
padding-left: 20rpx;
font-size: 30rpx;
}
}
.address {
padding-top: 20rpx;
font-size: 28rpx;
span {
margin-left: 10rpx;
}
}
}
.goods-info1 {
padding: 20rpx 40rpx;
background-color: #fff;
.goods-type {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #f7f7f7;
}
.goods-type-1{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #f7f7f7;
}
.goods-type-address{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
u-icon{
padding-left: 20rpx;
}
}
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #EFF4F2;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 600rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 16rpx;
font-size: $title-size*0.8;
color: #999;
// width: 500rpx;
}
.status {
color: #999;
font-size: $title-size;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 40rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
width: 500rpx;
}
span {
font-size: 34rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
// 合计信息
.total {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
font-size: 26rpx;
color: $main-color;
flex: 1;
text-align: right;
margin-top: 20rpx;
padding-bottom: 30rpx;
}
.total-btn {
border: solid 1rpx $main-color;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
// 操作信息
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
flex-wrap: wrap;
background-color: #fff;
flex: 1;
font-size: 28rpx;
padding: 20rpx 50rpx 30rpx 50rpx;
color: #fff;
.nowPay {
padding: 4rpx 20rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
// background-color: $main-color;
color: #999;
border:solid 1rpx #cacaca;
}
.cancelOrder {
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
background-color: #DD524D;
}
.logistics {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.sign {
background-color: #DD524D;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.evaluate {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
.flexrow{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy{
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
.no-address{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
// 优惠券弹窗
.scrollView {
// padding: 40rpx;
box-sizing: border-box;
position: relative;
// 标题
.coupon-title {
padding: 40rpx;
font-weight: bold;
font-size: 40rpx;
border-bottom: solid 1rpx #f7f7f7;
}
// 优惠券样式
.coupon-list-item {
border-bottom: solid 1rpx #f7f7f7;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
width: 100%;
.coupon-list-item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba($color: #000, $alpha: 0);
z-index: 10001;
}
}
}
.list-top1{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: $title-size*0.94;
width: 100%;
margin-left: 0 !important;
margin-top: 30rpx;
.shop-info{
margin-left: 20rpx;
}
.list-top1-img{
width:170rpx;
height: 170rpx;
border-radius: 10rpx;
}
.des{
font-size: 28rpx;
}
.title{
font-size: 32rpx;
}
}
.list-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
font-size: $title-size*0.94;
border-bottom: solid 1rpx #f7f7f7;
width: 600rpx;
margin-left: 30rpx;
.list-top-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.shop-info{
flex: 1;
}
.title {
width: 380rpx;
font-size: $title-size*1;
font-weight: 400;
}
.urate {
padding: 10rpx 0;
}
.des {
// padding-top: $padding*0.8;
font-size: $title-size * 0.8;
color: #999;
span {
color: #666;
padding: 0 10rpx;
}
}
.list-banner {
width: 120rpx;
margin-right: $margin*1.5;
height: 120rpx;
border-radius: 4rpx;
}
}
.list-top-right {
border: solid 1rpx $main-color;
color: $main-color;
display: inline-block;
padding: 8rpx 16rpx;
font-size: $title-size *0.8;
border-radius: 4rpx;
}
}
</style>

View File

@@ -0,0 +1,341 @@
<template>
<view class="MallShipmentRefund">
<view class="mes-des">
因您信誉良好 尊享退货包运费·7天无理由退货
</view>
<!-- 申请类型 -->
<view class="list">
<view class="list-left">申请类型</view>
<view class="list-right">申请退货</view>
</view>
<!-- 退货原因 -->
<view class="list">
<view class="list-left">退货原因</view>
<u-select v-model="show" :list="list" mode='single-column' @confirm="confirm"></u-select>
<view class="list-right" @click="show = true">{{title?title:'请选择退货'}}
<u-icon name="arrow-right" color="#cacaca" size="26" />
</view>
</view>
<!-- 退货图片 -->
<view class="list">
<view class="list-left">退货图片</view>
<view class="list-right-img">
<view class="upImg" v-for="(item,index) in pictures.showpath">
<image @click="priviewImg(index)" mode="aspectFill" :src="item" />
<u-icon name="close" @click='closeImg(index)' class='closeImg' />
</view>
<view class="addImg" @click="updImgs">
<u-icon name="plus" label='上传图片' label-pos='bottom' size='50' margin-bottom='10' color='#606266'
label-size='26' />
</view>
</view>
</view>
<!-- 申请原因 -->
<view class="list1">
<view class="list-left">备注原因</view>
<u-input class="list-right" v-model="remark" maxlength='300' placeholder='请输入您的退货原因' type="textarea"
height='230' :border="true" :clearable='false' />
<view class="">
{{remark.length+'/'+300}}
</view>
</view>
<!-- 订单 -->
<view class="actions">
<view class="nowPay" @click="sure">确认退货</view>
</view>
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
mallShipmentsRefundInfo,
mallShipmentsRefund
} from '@/apis/interfaces/numberWeight'
import {
uploads
} from '@/apis/interfaces/uploading'
export default {
name: 'MallShipmentRefund',
data() {
return {
remark: '',
shipment_no: '', // 提货单no
title: '',
list: [],
show: false,
pictures: {
path: [],
showpath: []
}, // 退货单图片
};
},
onLoad(e) {
// this.shipment_no = this.$route.params.no
// this.getInfo(this.shipment_no)
this.shipment_no = e.no
this.getInfo(e.no)
},
methods: {
// 预览上传图片
priviewImg(index) {
console.log(index, this.pictures.showpath)
uni.previewImage({
current: index,
urls: this.pictures.showpath
})
},
// 上传图片
updImgs(type) {
uni.chooseImage({
success: res => {
console.log(res)
let path = res.tempFiles.map((val, index) => {
return {
name: 'uploads' + index,
uri: val.path
}
})
uploads(path).then(pathRes => {
// console.log(pathRes)
this.pictures = {
path: [...this.pictures.path, ...pathRes.path],
showpath: [...this.pictures.showpath, ...pathRes.url]
}
console.log(this.pictures)
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none'
})
})
}
})
},
// 删除图片
closeImg(index) {
console.log(index)
this.pictures.path.splice(index, 1)
this.pictures.showpath.splice(index, 1)
console.log(this.pictures);
},
// 获取退货的基本信息
getInfo(shipment_no) {
mallShipmentsRefundInfo(shipment_no).then(res => {
let list = res.title
let lists = []
list.map(item => {
let items = {
label: item
}
lists.push(items)
})
console.log(lists)
this.list = lists
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
},
confirm(e) {
this.title = e[0].label
},
sure() {
let data = {
title: this.title,
shipment_no: this.shipment_no,
remark: this.remark,
pictures:this.pictures.path
}
if (data.title === '') {
this.$refs.uToast.show({
title: '请选择退货原因',
type: 'error',icon:false,
duration: 3000
})
return;
}
if (data.remark === '') {
this.$refs.uToast.show({
title: '请填写备注信息',
type: 'error',icon:false,
duration: 3000
})
return;
}
uni.showModal({
title: '哎呦,提醒你',
content: '您是否确认申请退货',
success: (res) => {
if (res.confirm) {
mallShipmentsRefund(data).then(res => {
console.log(res)
this.$refs.uToast.show({
title: res,
type: 'error',icon:false,
duration: 3000
})
uni.setStorageSync('refresh', true)
setTimeout(res => {
uni.navigateBack()
}, 2000)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
} else if (res.cancel) {
this.$refs.uToast.show({
title: '放弃了~',
type: 'error',icon:false,
duration: 3000
})
}
}
});
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
background-color: #fff;
}
//
.mes-des {
background-color: rgba($color: #ff0000, $alpha: .1);
color: #ff0000;
text-shadow: 0 0 6rpx rgba($color: #000000, $alpha:.1);
padding: 32rpx;
text-align: center;
}
// 确认退货
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex-wrap: wrap;
flex: 1;
font-size: 28rpx;
padding: 30rpx;
color: #fff;
.nowPay {
padding: 20rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
width: 600rpx;
font-size: 32rpx;
background-color: $main-color;
text-align: center;
}
}
.list1 {
font-size: 30rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
padding: 40rpx;
border-bottom: solid 1rpx #f7f7f7;
u-input {
width: 100%;
margin-top: 30rpx;
}
.list-right {
width: 100%;
margin-top: 30rpx;
}
}
.list {
font-size: 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
padding: 40rpx;
border-bottom: solid 1rpx #f7f7f7;
.list-right {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
flex: 1;
margin-left: 50rpx;
font-size: 30rpx;
}
.list-right-img {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
box-sizing: border-box;
flex: 1;
margin-left: 50rpx;
font-size: 30rpx;
.upImg {
width: 159rpx;
height: 159rpx;
margin: 4rpx;
position: relative;
image {
width: 100%;
height: 100%;
}
.closeImg {
position: absolute;
top: 0;
right: 0;
z-index: 1;
padding: 20rpx;
}
}
.addImg {
width: 159rpx;
height: 159rpx;
background-color: #f7f7f7;
display: flex;
justify-content: center;
}
}
}
</style>

View File

@@ -0,0 +1,202 @@
<template>
<view class="NumberWeight">
<!-- 有订单列表 -->
<view class="" v-if="lists.length > 0">
<!-- 订单列表 -->
<view class="order-list" v-for="(item,index) in lists" :key="index">
<NumberWeightTemplate :item="item" />
<view class="actions">
<view @click="nowTake(item.symbol)" class="nowPay">去提货</view>
</view>
</view>
</view>
<!-- 没有订单列表 -->
<no-list v-if="lists.length === 0" name='no-order' txt="暂无数据~" />
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import NumberWeightTemplate from '@/components/number-weight-template/number-weight-template'
import {
mallWarrants
} from '@/apis/interfaces/numberWeight'
export default {
components: {
NumberWeightTemplate
},
data() {
return {
lists: [],
page: 1,
total: 0
};
},
onLoad() {
this.getList()
},
onShow() {
if (uni.getStorageSync('refresh')) {
this.page = 1
this.total = 0
this.lists = []
this.getList()
}
},
onUnload() {
uni.setStorageSync('refresh', false)
},
onReachBottom() {
if (this.total > this.lists.length) {
this.page = this.page + 1
this.getList()
} else {
this.$refs.uToast.show({
title: '吼吼吼~我是有底的~',
type: 'error',
icon: false,
duration: 3000
})
}
},
methods: {
getList() {
let data = {
perPage: 10,
page: this.page
}
mallWarrants(data).then(res => {
console.log(res)
this.lists = this.lists.concat(res.data)
this.total = res.total
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',
icon: false,
duration: 3000
})
})
},
// 立即提货
nowTake(symbol) {
uni.navigateTo({
url: './numberWeightInfo?symbol=' + symbol
})
},
// 转让权证
navMarkets(symbol) {
this.$Router.push({
name: 'marketTransfer',
params: {
symbol
}
})
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
}
.NumberWeight {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
// 订单nav
.nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
font-size: $title-size*0.95;
padding: 0 30rpx;
background-color: #fff;
color: #666;
border-top: solid 20rpx #f7f7f7;
.nav-item {
border-bottom: solid 4rpx #fff;
padding: 30rpx 10rpx;
}
.nav-item-selected {
border-bottom: solid 4rpx $main-color;
color: $main-color;
}
}
// 订单列表
.order-list {
background-color: #fff;
border-radius: 20rpx;
min-height: 300rpx;
margin: 30rpx 20rpx 0 20rpx;
padding: 30rpx 30rpx 20rpx 30rpx;
// border-top: solid 4rpx #cacaca;
// 操作信息
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
flex-wrap: wrap;
flex: 1;
font-size: 28rpx;
color: #fff;
border-top: solid 1rpx #EFF4F2;
.nowPay {
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
background-color: $main-color;
}
.cancelOrder {
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
background-color: #DD524D;
}
.logistics {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.sign {
background-color: #DD524D;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.evaluate {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
}
</style>

View File

@@ -0,0 +1,800 @@
<template>
<view class="OrderInfo" v-if="loaded">
<!-- 订单状态 -->
<view class="order-status">
<view class="info">
待提货
<span>确认提货后快递会坐着火箭朝您飞来</span>
</view>
<image src="/static/imgs/fire.png" mode="widthFix" />
</view>
<!-- 收货人 -->
<view class="acceptInfo" v-if="type === '1'">
<navigator v-if='!!address.name' url="/pages/user/address/list?type=1" hover-class="none">
<view class="name">{{address.name}} <span>{{address.mobile}}</span> </view>
<view class="address">
<u-icon name="map" color="red"></u-icon>
<span>{{address.full_address}}</span>
</view>
</navigator>
<navigator v-else class="no-address selectNew" url="/pages/user/address/list?type=1" hover-class="none">
<u-icon name="map-fill" color="#613091" size="40" label='选择收货地址' />
</navigator>
</view>
<view class="goods-info1">
<view class="top">
<view class="company">
<view class="company-logo">
<image :src="shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{shop.name}}</view>
</view>
<view class="flexrow">
<view class="no ellipsis">区块链地址 {{account.addr}}</view> <span class="copy"
@click='copy(account.addr)'>复制</span>
</view>
</view>
</view>
<view class="goods-info">
<image class="goods-img" :src="goods.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{goods.goods_name}}</view>
<!-- <span>16.80</span> -->
</view>
<view class="sku">可提个数 <span>x {{account.balance}}</span> </view>
</view>
</view>
<navigator class="total" hover-class="none" :url='"/pages/goods/details?id="+goods.goods_id'>
<view class="total-btn">再次购买</view>
</navigator>
<view class="goods-type" v-if="type === '1'">运费 <span>免邮</span></view>
<view class="goods-type">提货数量 <span>
<u-number-box v-model="qty" :min='1' :max='account.balance'></u-number-box>
</span></view>
<view class="goods-type">提货方式
<u-radio-group v-model="type" @change="radioGroupChange">
<u-radio v-for="(item, index) in list" :key="index" :name="item.id" :disabled="type !== item.id">
{{item.name}}
</u-radio>
</u-radio-group>
</view>
<!-- 不显示了就 -->
<view class="goods-type" v-if="type === '100'">
提货门店
<view class="goods-type-address" @click="showStoreList = true">
{{store_Name!==''?store_Name:'选择门店'}}
<u-icon name="arrow-right" color="#999" size="20" />
</view>
</view>
</view>
<!-- 订单 -->
<view class="actions">
<view class="nowPay" @click="nowTake">{{type === '2'?'生成提货二维码':'确认提货'}}</view>
</view>
<!-- 优惠券弹窗 -->
<u-popup v-model="showStoreList" mode="bottom" border-radius="14">
<scroll-view scroll-y="true" style="height: 1000rpx;" class="scrollView">
<view class="coupon-title">可提货门店</view>
<view class="coupon-list-item" v-for="(item,index) in stores" :key="index" v-if="stores.length>0">
<u-icon v-if="store_id!== item.store_id" name="checkmark-circle" color="#cacaca" size="50" />
<u-icon v-else name="checkmark-circle-fill" color="#2979ff" size="50" />
<!-- 遮挡层用户控制点击事件 -->
<view class="list-top">
<view class="list-top-left">
<image :src="item.cover" mode="aspectFill" class="list-banner"></image>
<view class="shop-info">
<view class="title ellipsis">{{item.name}}</view>
<view class="des" style="padding-top: 12rpx;">营业时间{{item.opening_time}}</view>
<view class="des" style="padding-top: 4rpx;">门店地址{{item.address}}</view>
</view>
</view>
</view>
<view class="coupon-list-item" @click="selectStore(item)"></view>
</view>
<!-- 没有优惠券列表 -->
<no-list v-if="stores.length === 0" name='no-shop' txt="没有任何门店哦~" />
</scroll-view>
</u-popup>
<!-- 二维码展示动画效果 -->
<view class="showCode " v-if="showCode">
<view class="showCodeBg" @click="showCode = false"></view>
<view :class="['showCodeContent', showCode?'showCodeContentSelect':'showCodeContentSelectNo']">
<view class="showCodeTitle">提货二维码</view>
<image :src="showCodeImg" mode="widthFix"></image>
<view class="showCodeDes">此码请小心保管,丢失或被用不退不换</view>
</view>
</view>
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
mallWarrantsList,
mallWarrantsSure,
mallWarrantsQrcode
} from '@/apis/interfaces/numberWeight'
export default {
name: 'OrderInfo',
data() {
return {
symbol: '',
account: {},
address: {},
addresses: [],
goods: {},
shop: {},
stores: [],
list: [{
name: '快递',
disabled: false,
id: '1'
},
{
name: '自提',
disabled: false,
id: '2'
}
],
type: '', //提货类型2 自提 1 邮寄
showStoreList: false, // 默认false不显示优惠券弹窗列表
store_id: '', // 默认没有选择任何一个优惠券
store_Name: '', // 门店名称
qty: 1,
showCode:false,
showCodeImg:'',
loaded:false
};
},
onLoad(e) {
this.symbol = e.symbol
this.getInfo(e.symbol)
// this.getInfo('G22S20')
},
// 监听弹窗页面为false时候重新请求当前页面
watch: {
showCode(newVal, oldVal) {
if(!newVal && oldVal){
this.getInfo(this.symbol)
uni.setStorageSync('refresh',true)
}
}
},
methods: {
getInfo(symbol) {
mallWarrantsList(symbol).then(res => {
this.account = res.account
this.address = res.address
this.addresses = res.addresses
this.goods = res.goods
this.stores = res.stores
this.shop = res.shop
this.stores = res.stores
this.qty = res.account.balance
this.type = res.logistic_type + ''
this.loaded = true
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
setTimeout(res => {
uni.setStorageSync('refresh',true)
uni.navigateBack({})
}, 2000)
})
},
// 选中任一radio时由radio-group触发
radioGroupChange(e) {
this.type = e
if (e === '2') {
this.store_id = ''
this.store_Name = ''
}
},
// 选择可用优惠券
selectStore(item) {
this.store_id = item.store_id
this.store_Name = item.name
this.showStoreList = false
},
// 确认提货
nowTake() {
let data = {
symbol: this.symbol,
type: this.type,
store_id: this.store_id || '',
qty: this.qty,
address_id: this.address.address_id || '',
}
if (data.type === '1') {
if (data.address_id === '') {
this.$refs.uToast.show({
title: '请添加收货地址',
type: 'error',icon:false,
duration: 3000
})
return;
}
data.store_id = ''
}
console.log(data)
// 快递单继续沿用之前的信息
if (data.type === '1') {
mallWarrantsSure(data).then(res => {
console.log(res)
this.$refs.uToast.show({
title: res,
type: 'error',icon:false,
duration: 3000,
})
uni.setStorageSync('refresh', true)
setTimeout(res => {
uni.navigateBack({})
}, 3000)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
}
// 提货或者服务单生成二维码
else {
mallWarrantsQrcode(data).then(res => {
console.log(res)
this.showCodeImg = res.code
// uni.setStorageSync('refresh', true)
this.showCode = true
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',icon:false,
duration: 3000
})
})
}
},
// 复制
copy(e) {
uni.setClipboardData({
data: e,
success: () => {
}
})
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
}
.OrderInfo {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
padding-bottom: 80rpx;
.order-status {
width: 100%;
height: 300rpx;
background-image: linear-gradient(to bottom, $main-color, $main-color-light);
color: #Fff;
font-size: 36rpx;
padding: 30rpx 50rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.info {
font-size: 36rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
span {
font-size: 28rpx;
padding-top: 30rpx;
}
}
image {
width: 200rpx;
}
}
.acceptInfo {
margin: 0 30rpx;
background-color: #fff;
box-shadow: 0 0 14rpx 4rpx rgba($color: $main-color, $alpha: 0.2);
border-radius: 20rpx;
padding: 30rpx;
position: relative;
top: -30rpx;
.name {
font-size: 36rpx;
font-weight: 600;
span {
padding-left: 20rpx;
font-size: 30rpx;
}
}
.address {
padding-top: 20rpx;
font-size: 28rpx;
span {
margin-left: 10rpx;
}
}
}
.goods-info1 {
padding: 20rpx 40rpx;
background-color: #fff;
.goods-type {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #f7f7f7;
}
.goods-type-address {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
u-icon {
padding-left: 20rpx;
}
}
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #EFF4F2;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 600rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 10rpx;
font-size: $title-size*0.8;
color: #999;
width: 500rpx;
}
.status {
color: #999;
font-size: $title-size;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 40rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
width: 500rpx;
}
span {
font-size: 34rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
// 合计信息
.total {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
font-size: 26rpx;
color: $main-color;
flex: 1;
text-align: right;
margin-top: 20rpx;
padding-bottom: 30rpx;
}
.total-btn {
border: solid 1rpx $main-color;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
// 操作信息
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex-wrap: wrap;
flex: 1;
font-size: 28rpx;
padding: 30rpx;
color: #fff;
.nowPay {
padding: 20rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
width: 600rpx;
font-size: 32rpx;
background-color: $main-color;
text-align: center;
}
.cancelOrder {
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
background-color: #DD524D;
}
.logistics {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.sign {
background-color: #DD524D;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.evaluate {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
.flexrow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy {
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
.no-address {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
// 优惠券弹窗
.scrollView {
// padding: 40rpx;
box-sizing: border-box;
position: relative;
// 标题
.coupon-title {
padding: 40rpx;
font-weight: bold;
font-size: 40rpx;
border-bottom: solid 1rpx #f7f7f7;
}
// 优惠券样式
.coupon-list-item {
border-bottom: solid 1rpx #f7f7f7;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
width: 100%;
.coupon-list-item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba($color: #000, $alpha: 0);
z-index: 10001;
}
}
}
.list-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
font-size: $title-size*0.94;
border-bottom: solid 1rpx #f7f7f7;
width: 600rpx;
margin-left: 30rpx;
.list-top-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.shop-info {
flex: 1;
}
.title {
width: 380rpx;
font-size: $title-size*1;
font-weight: 400;
}
.urate {
padding: 10rpx 0;
}
.des {
// padding-top: $padding*0.8;
font-size: $title-size * 0.8;
color: #999;
span {
color: #666;
padding: 0 10rpx;
}
}
.list-banner {
width: 120rpx;
margin-right: $margin*1.5;
height: 120rpx;
border-radius: 4rpx;
}
}
.list-top-right {
border: solid 1rpx $main-color;
color: $main-color;
display: inline-block;
padding: 8rpx 16rpx;
font-size: $title-size *0.8;
border-radius: 4rpx;
}
}
// 二维码展示
// 动画效果
.showCode {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 1;
.showCodeBg {
background-color: rgba($color:#000, $alpha: 0.3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.showCodeContentSelect {
animation: sk-foldCubeAngle .6s linear both;
}
.showCodeContentSelectNo {
animation: sk-foldCubeAngleNo .6s linear both;
}
.showCodeContent {
width: 600rpx;
minheight: 500rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 30rpx;
position: relative;
z-index: 199;
image {
width: 60%;
}
.showCodeTitle {
font-weight: 600;
padding-bottom: 20rpx;
font-size: 36rpx;
margin-bottom: 20rpx;
}
.showCodeDes{
padding: 20rpx 0 20rpx 0;
color: gray;
font-size: 24rpx;
}
}
@keyframes sk-foldCubeAngle {
0% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
100% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
}
@keyframes sk-foldCubeAngleNo {
0% {
transform: scale(1);
opacity: 1;
}
25% {
transform: scale(0);
opacity: 0;
}
}
@keyframes turn {
0% {
-webkit-transform: rotate(0deg);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg);
opacity: .9;
}
50% {
-webkit-transform: rotate(180deg);
opacity: .8;
}
75% {
-webkit-transform: rotate(270deg);
opacity: .9;
}
100% {
-webkit-transform: rotate(360deg);
opacity: 1;
}
}
}
</style>

View File

@@ -0,0 +1,237 @@
<template>
<view class="NumberWeight">
<!-- 订单分类 -->
<view class="nav" >
<view :class="['nav-item' ,selectNavId === item.id?'nav-item-selected':'']" v-for="(item,index) in navList"
:key="index" @click="selectNav(item.id)">
{{item.name}}
{{item.id ==='signed' && count.signed >0 ? '('+count.signed + ')':''}}
{{item.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
{{item.id ==='init' && count.init >0 ?'('+count.init + ')':''}}
{{item.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
</view>
</view>
<!-- 有订单列表 -->
<block v-if="lists.length > 0">
<!-- 订单列表 -->
<view class="order-list" v-for="(item,index) in lists" :key="index">
<MallShipmentsTemplate :item="item" />
<view class="actions">
<view class="nowPay" @click="goDetail(item.shipment_no)" >查看详情</view>
</view>
</view>
</block>
<!-- 没有订单列表 -->
<no-list v-if="lists.length === 0" name='no-order' txt="暂无数据~" />
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import MallShipmentsTemplate from '@/components/mall-shipments-template/mall-shipments-template'
import { mallShipmentsPostShop , mallShipmentsSign , mallShipmentsCancel } from '@/apis/interfaces/numberWeight'
export default {
components: {
MallShipmentsTemplate
},
data() {
return {
lists: [],
page:1,
total:0,
navList: [],
type:'',// post 快递单 空为自提单
selectNavId: 'signed',
count:{},// 订单数量
};
},
onLoad(e) {
this.navList = [
{
name: '已使用',
id: 'signed'
},
{
name: '已完成',
id: 'completed'
}
]
this.selectNavId = 'signed'
this.getList()
},
onShow(){
console.log(uni.getStorageSync('refresh'),'getStorageSync')
if(uni.getStorageSync('refresh')){
this.reset()
}
},
onUnload() {
uni.setStorageSync('refresh',false)
},
onReachBottom() {
if(this.total>this.lists.length){
this.page = this.page + 1
this.getList()
}else{
this.$refs.uToast.show({
title: '吼吼吼~我是有底的~',
duration: 3000
})
}
},
methods: {
reset(){
this.page =1
this.total = 0
this.lists = []
this.getList()
uni.setStorageSync('refresh',false)
},
// 选择订单
selectNav(id) {
if (this.selectNavId !== id) {
this.selectNavId = id
this.reset()
}
},
// 获取订单列表
getList(){
let data = {
pageSize:4,
page:this.page,
state:this.selectNavId
}
let apiUrl = ''
apiUrl = 'mall/shipments/service'
data.channel = 'app'
mallShipmentsPostShop(apiUrl,data).then(res=>{
console.log(res.count)
this.count = res.count
this.lists = this.lists.concat(res.lists.data)
this.total = res.lists.page.total
}).catch(err=>{
this.$refs.uToast.show({
title: err.message,
duration: 3000
})
})
},
// 查看详情
goDetail(no){
uni.navigateTo({
url:'/pages/property/order/servicesOrderInfo?no='+no
})
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
}
.NumberWeight {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
// 订单nav
.nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
font-size: $title-size*0.95;
padding: 0 30rpx;
background-color: #fff;
color: #666;
border-top: solid 20rpx #f7f7f7;
position: sticky;
top: 0rpx;
z-index: 10000;
.nav-item {
border-bottom: solid 4rpx #fff;
padding: 30rpx 10rpx;
}
.nav-item-selected {
border-bottom: solid 4rpx $main-color;
color: $main-color;
}
}
// 订单列表
.order-list {
background-color: #fff;
border-radius: 20rpx;
min-height: 300rpx;
margin: 30rpx 20rpx 0 20rpx;
padding:30rpx 30rpx 20rpx 30rpx ;
// border-top: solid 4rpx #cacaca;
// 操作信息
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
flex-wrap: wrap;
flex: 1;
font-size: 28rpx;
color: #fff;
border-top: solid 1rpx #EFF4F2;
.nowPay {
padding: 4rpx 20rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
// background-color: $main-color;
color: #999;
border:solid 1rpx #cacaca;
}
.cancelOrder {
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
background-color: #DD524D;
}
.logistics {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.sign {
background-color: #DD524D;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.evaluate {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
}
</style>

View File

@@ -0,0 +1,594 @@
<template>
<view class="OrderInfo" v-if="loaded">
<!-- 订单状态 -->
<view class="order-status">
<view class="info">
{{info.state_text}}
<span>您的快递正在坐着火箭朝您飞来</span>
</view>
<image src="/static/imgs/fire.png" mode="widthFix"></image>
</view>
<!-- 收货人 -->
<view class="acceptInfo" v-if="type === '1'">
<block>
<view class="name">{{address.name}} <span>{{address.mobile}}</span> </view>
<view class="address">
<u-icon name="map" color="red"></u-icon>
<span>{{address.full_address}}</span>
</view>
</block>
</view>
<view class="goods-info1">
<view class="top">
<view class="company">
<view class="company-logo">
<image :src="info.shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{info.shop.name}}</view>
</view>
<view class="flexrow">
<view class="no ellipsis">发货单号 {{info.shipment_no}}</view>
</view>
</view>
</view>
<view class="goods-info">
<image class="goods-img" :src="info.goods_sku.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{info.goods_sku.goods_name}}</view>
<!-- <span>16.80</span> -->
</view>
<view class="sku">权证个数 <span>x {{info.qty}}</span> </view>
</view>
</view>
<navigator class="total" hover-class="none" :url='"/pages/goods/details?id="+info.goods_sku.goods_id'>
<view class="total-btn">再次购买</view>
</navigator>
<view class="goods-type">使用时间 <span>{{info.created_at}}</span></view>
<view class="goods-type">使用数量 <span> x {{info.qty}}</span></view>
<view class="goods-type">使用方式<span>门店使用</span>
</view>
<view class="goods-type-1" v-if="type === '2'">
提货门店
<view class="goods-type-address">
<view class="list-top1">
<image :src="info.store.cover.showpath" @click="map(info.store)" mode="aspectFill"
class="list-top1-img" />
<view class="shop-info shop-info1">
<view class="title ellipsis">{{info.store.name}}</view>
<view class="des" style="padding-top: 16rpx;">营业时间{{info.store.start_time}}</view>
<view class="des" style="padding-top: 4rpx;" @click="call(info.store.mobile)">
联系电话{{info.store.mobile}}</view>
<view class="des" style="padding-top: 4rpx;" @click="map(info.store)">
门店地址{{info.store.address}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
mallShipmentsInfo
} from '@/apis/interfaces/numberWeight'
export default {
name: 'OrderInfo',
data() {
return {
info: {},
list: [{
name: '快递',
disabled: true,
id: '1'
},
{
name: '自提',
disabled: false,
id: '2'
}
],
address: {},
type: '1', //提货类型2 自提 1 邮寄
showStoreList: false, // 默认false不显示优惠券弹窗列表
store_id: '', // 默认没有选择任何一个优惠券
store_Name: '', // 门店名称
qty: 1,
loaded: false,
shipment_no: '', // 提货单no
};
},
onLoad(e) {
console.log(e)
this.shipment_no = e.no
this.getInfo(e.no)
console.log(this.shipment_no)
// this.getInfo('2021081817410747800300000004')
},
onShow() {
if (uni.getStorageSync('refresh')) {
this.getInfo(this.shipment_no)
}
},
methods: {
getInfo(shipment_no) {
mallShipmentsInfo(shipment_no).then(res => {
this.info = res
this.address = res.express
this.type = res.type + ''
this.loaded = true
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
},
call(e) {
uni.makePhoneCall({
phoneNumber: e
})
},
map(info) {
console.log(info.latitude, info.longitude)
uni.openLocation({
latitude: Number(info.latitude),
longitude: Number(info.longitude),
success: function() {
console.log('success');
}
});
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
}
.OrderInfo {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background-color: #F7F7F7;
padding-bottom: 80rpx;
.order-status {
width: 100%;
height: 300rpx;
background-image: linear-gradient(to bottom, $main-color, $main-color-light);
color: #Fff;
font-size: 36rpx;
padding: 30rpx 50rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.info {
font-size: 36rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
span {
font-size: 28rpx;
padding-top: 30rpx;
}
}
image {
width: 200rpx;
}
}
.acceptInfo {
margin: 0 30rpx;
background-color: #fff;
box-shadow: 0 0 14rpx 4rpx rgba($color: $main-color, $alpha: 0.2);
border-radius: 20rpx;
padding: 30rpx;
position: relative;
top: -30rpx;
.name {
font-size: 36rpx;
font-weight: 600;
span {
padding-left: 20rpx;
font-size: 30rpx;
}
}
.address {
padding-top: 20rpx;
font-size: 28rpx;
span {
margin-left: 10rpx;
}
}
}
.goods-info1 {
padding: 20rpx 40rpx;
background-color: #fff;
.goods-type {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #f7f7f7;
}
.goods-type-1 {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #f7f7f7;
}
.goods-type-address {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
u-icon {
padding-left: 20rpx;
}
}
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
border-bottom: solid 1rpx #EFF4F2;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 600rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 16rpx;
font-size: $title-size*0.8;
color: #999;
// width: 500rpx;
}
.status {
color: #999;
font-size: $title-size;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 40rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
width: 500rpx;
}
span {
font-size: 34rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
// 合计信息
.total {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
font-size: 26rpx;
color: $main-color;
flex: 1;
text-align: right;
margin-top: 20rpx;
padding-bottom: 30rpx;
}
.total-btn {
border: solid 1rpx $main-color;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
// 操作信息
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
flex-wrap: wrap;
background-color: #fff;
flex: 1;
font-size: 28rpx;
padding: 20rpx 50rpx 30rpx 50rpx;
color: #fff;
.nowPay {
padding: 4rpx 20rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
// background-color: $main-color;
color: #999;
border: solid 1rpx #cacaca;
}
.cancelOrder {
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
background-color: #DD524D;
}
.logistics {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.sign {
background-color: #DD524D;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.evaluate {
background-color: $main-color;
padding: 10rpx 30rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
.flexrow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy {
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
.no-address {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
// 优惠券弹窗
.scrollView {
// padding: 40rpx;
box-sizing: border-box;
position: relative;
// 标题
.coupon-title {
padding: 40rpx;
font-weight: bold;
font-size: 40rpx;
border-bottom: solid 1rpx #f7f7f7;
}
// 优惠券样式
.coupon-list-item {
border-bottom: solid 1rpx #f7f7f7;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
width: 100%;
.coupon-list-item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba($color: #000, $alpha: 0);
z-index: 10001;
}
}
}
.list-top1 {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: $title-size*0.94;
width: 100%;
margin-left: 0 !important;
margin-top: 30rpx;
.shop-info {
margin-left: 20rpx;
}
.list-top1-img {
width: 170rpx;
height: 170rpx;
border-radius: 10rpx;
}
.des {
font-size: 28rpx;
}
.title {
font-size: 32rpx;
}
}
.list-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 30rpx 0;
font-size: $title-size*0.94;
border-bottom: solid 1rpx #f7f7f7;
width: 600rpx;
margin-left: 30rpx;
.list-top-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.shop-info {
flex: 1;
}
.title {
width: 380rpx;
font-size: $title-size*1;
font-weight: 400;
}
.urate {
padding: 10rpx 0;
}
.des {
// padding-top: $padding*0.8;
font-size: $title-size * 0.8;
color: #999;
span {
color: #666;
padding: 0 10rpx;
}
}
.list-banner {
width: 120rpx;
margin-right: $margin*1.5;
height: 120rpx;
border-radius: 4rpx;
}
}
.list-top-right {
border: solid 1rpx $main-color;
color: $main-color;
display: inline-block;
padding: 8rpx 16rpx;
font-size: $title-size *0.8;
border-radius: 4rpx;
}
}
</style>

View File

@@ -4,16 +4,23 @@
<view class="canBack" v-if="canForm"></view> <view class="canBack" v-if="canForm"></view>
<view class="canPop" v-if="canForm"> <view class="canPop" v-if="canForm">
<block v-if="voucher"> <block v-if="voucher">
<image class="canPop-tips" @click="canClick" src="/static/user/order-cancelPay.png" mode="widthFix"></image> <image class="canPop-tips" @click="canClick" src="/static/user/order-cancelPay.png" mode="widthFix">
</image>
<view class="canPop-cont">打款凭证</view> <view class="canPop-cont">打款凭证</view>
<image class="canPop-cover" v-if="voucher.status.value === 3" :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="updImg()" mode="aspectFill" /> <image class="canPop-cover" v-if="voucher.status.value === 3"
<image class="canPop-cover" v-else :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="preImg()" mode="aspectFill" /> :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="updImg()"
mode="aspectFill" />
<image class="canPop-cover" v-else :src="canFromImg.showpath || require('@/static/icons/add-icon.png')"
@click="preImg()" mode="aspectFill" />
<view class="canPop-status">状态{{voucher.status.text}}</view> <view class="canPop-status">状态{{voucher.status.text}}</view>
<view class="canPop-remark" v-if="voucher.remark && voucher.status.value === 3">驳回原因{{voucher.remark}}</view> <view class="canPop-remark" v-if="voucher.remark && voucher.status.value === 3">驳回原因{{voucher.remark}}
<view class="canPop-btn" v-if="voucher.status.value === 3" @click="canSubmitEdit(voucher.voucher_id)">重新提交</view> </view>
<view class="canPop-btn" v-if="voucher.status.value === 3" @click="canSubmitEdit(voucher.voucher_id)">
重新提交</view>
</block> </block>
<block v-else> <block v-else>
<image class="canPop-tips" @click="canClick" src="/static/user/order-cancelPay.png" mode="widthFix"></image> <image class="canPop-tips" @click="canClick" src="/static/user/order-cancelPay.png" mode="widthFix">
</image>
<view class="canPop-cont">上传打款凭证</view> <view class="canPop-cont">上传打款凭证</view>
<image class="canPop-cover" :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" <image class="canPop-cover" :src="canFromImg.showpath || require('@/static/icons/add-icon.png')"
@click="updImg()" mode="aspectFill"></image> @click="updImg()" mode="aspectFill"></image>
@@ -34,8 +41,10 @@
src="../../static/user/vip_privilege_03.png" mode="widthFix"></image> src="../../static/user/vip_privilege_03.png" mode="widthFix"></image>
</view> </view>
<view class="vip-number" v-if="item.count"> <view class="vip-number" v-if="item.count">
{{ item.count.stock > 0 ? '剩余名额:' + item.count.residue : '不限名数' }}</view> {{ item.count.stock > 0 ? '剩余名额:' + item.count.residue : '不限名数' }}
<view class="currentInfo" v-if="currentInfo.identity.identity_id === item.identity_id">当前身份</view> </view>
<view class="currentInfo" v-if="currentInfo.identity.identity_id === item.identity_id">当前身份
</view>
<view class="vip-tips"> <view class="vip-tips">
<!-- 会员 --> <!-- 会员 -->
<view v-if="item.identity_id == 2" class="vip-tips-text vip-tips-color-01">{{ item.title }} <view v-if="item.identity_id == 2" class="vip-tips-text vip-tips-color-01">{{ item.title }}
@@ -43,15 +52,18 @@
<!-- VIP节点 --> <!-- VIP节点 -->
<view v-else-if="item.identity_id == 3" class="vip-tips-text vip-tips-color-02"> <view v-else-if="item.identity_id == 3" class="vip-tips-text vip-tips-color-02">
{{ item.title }}</view> {{ item.title }}
</view>
<!-- 主节点 --> <!-- 主节点 -->
<view v-else-if="item.identity_id == 4" class="vip-tips-text vip-tips-color-03"> <view v-else-if="item.identity_id == 4" class="vip-tips-text vip-tips-color-03">
{{ item.title }}</view> {{ item.title }}
</view>
<!-- 超级节点 --> <!-- 超级节点 -->
<view v-else-if="item.identity_id == 5" class="vip-tips-text vip-tips-color-04"> <view v-else-if="item.identity_id == 5" class="vip-tips-text vip-tips-color-04">
{{ item.title }}</view> {{ item.title }}
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -74,16 +86,19 @@
<block v-if="openCondition.energy_shard"> <block v-if="openCondition.energy_shard">
<view class="privilege-label" :class="{ active: openCondition.energy_shard.finish }"> <view class="privilege-label" :class="{ active: openCondition.energy_shard.finish }">
{{ openCondition.energy_shard.message }} {{ openCondition.energy_shard.message }}
<uni-icons v-if="openCondition.energy_shard.finish" type="checkmarkempty" size="17" color="#f6b338"></uni-icons> <uni-icons v-if="openCondition.energy_shard.finish" type="checkmarkempty" size="17"
color="#f6b338"></uni-icons>
</view> </view>
<view class="privilege-label" :class="{ active: openCondition.price.finish }" v-if="!openCondition.energy_shard.finish"> <view class="privilege-label" :class="{ active: openCondition.price.finish }"
v-if="!openCondition.energy_shard.finish">
{{ openCondition.price.message }} {{ openCondition.price.message }}
</view> </view>
<view class="privilege-label" v-else>{{ openCondition.service_charge.message }}</view> <view class="privilege-label" v-else>{{ openCondition.service_charge.message }}</view>
</block> </block>
<block v-else> <block v-else>
<view class="privilege-label" v-if="openCondition.certification" <view class="privilege-label" v-if="openCondition.certification"
:class="{ active: openCondition.certification.finish }">{{ openCondition.certification.message }}</view> :class="{ active: openCondition.certification.finish }">
{{ openCondition.certification.message }}</view>
</block> </block>
</view> </view>
</view> </view>
@@ -108,9 +123,12 @@
</view> </view>
<!-- 开通按钮 --> <!-- 开通按钮 -->
<view class="footer" > <view class="footer">
<image class="footer-btn" v-if="identitie[tabsIndex].can.show_button && voucher === ''" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openOrder" /> <image class="footer-btn" v-if="identitie[tabsIndex].can.show_button && voucher === ''"
<view class="current-btn-sh" v-if="identitie[tabsIndex].can.show_button && voucher !== ''" @click="openOrder" >{{voucher.status.value === 1?'申请审核中':''}}{{voucher.status.value === 3?'申请被驳回查看原因':''}}</view> :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openOrder" />
<view class="current-btn-sh" v-if="identitie[tabsIndex].can.show_button && voucher !== ''"
@click="openOrder">
{{voucher.status.value === 1?'申请审核中':''}}{{voucher.status.value === 3?'申请被驳回查看原因':''}}</view>
<!-- <view class="current-btn-sh" v-if="!identitie[tabsIndex].can.show_button && voucher === ''">已开通</view> --> <!-- <view class="current-btn-sh" v-if="!identitie[tabsIndex].can.show_button && voucher === ''">已开通</view> -->
<view class="ios-bottom"></view> <view class="ios-bottom"></view>
</view> </view>
@@ -143,7 +161,7 @@
path: '' path: ''
}, },
openCondition: {}, openCondition: {},
voucher:'', //弹窗展示得内容 voucher: '', //弹窗展示得内容
} }
}, },
created() { created() {
@@ -167,11 +185,12 @@
}); });
this.identitie = res.identities this.identitie = res.identities
if (type === 'cre') { if (type === 'cre') {
let Index = res.identities.findIndex(val => val.identity_id == this.$Route.query.identity_id) let Index = res.identities.findIndex(val => val.identity_id == this.$Route.query
if(Index+1 === res.identities){ .identity_id)
if (Index + 1 === res.identities.length) {
this.tabsIndex = Index this.tabsIndex = Index
}else{ } else {
this.tabsIndex = Index+1 this.tabsIndex = Index + 1
} }
} }
this.openCondition = res.identities[this.tabsIndex].obj_condition this.openCondition = res.identities[this.tabsIndex].obj_condition
@@ -180,13 +199,14 @@
this.canBtn = res.identities[this.tabsIndex].can this.canBtn = res.identities[this.tabsIndex].can
this.currentInfo = res.user this.currentInfo = res.user
this.loding = false this.loding = false
this.voucher = this.identitie[this.tabsIndex].voucher?this.identitie[this.tabsIndex].voucher:'' this.voucher = this.identitie[this.tabsIndex].voucher ? this.identitie[this.tabsIndex]
if(this.voucher){ .voucher : ''
if (this.voucher) {
this.canFromImg = this.identitie[this.tabsIndex].voucher.cover this.canFromImg = this.identitie[this.tabsIndex].voucher.cover
}else{ } else {
this.canFromImg = { this.canFromImg = {
path:'', path: '',
showpath:'' showpath: ''
} }
} }
}).catch(err => { }).catch(err => {
@@ -236,8 +256,8 @@
if(payType === 1) this.aliPayConfig(res.id) if(payType === 1) this.aliPayConfig(res.id)
}).catch(err=>{ }).catch(err=>{
uni.showToast({ uni.showToast({
title:err.message, title: err.message,
icon:"none" icon: "none"
}) })
}) })
}, },
@@ -268,8 +288,8 @@
}) })
}).catch(err=>{ }).catch(err=>{
uni.showToast({ uni.showToast({
title:err.message, title: err.message,
icon:"none" icon: "none"
}) })
}) })
}, },
@@ -309,10 +329,10 @@
}) })
}, },
// 预览图片 // 预览图片
preImg(){ preImg() {
uni.previewImage({ uni.previewImage({
current:this.voucher.cover.showpath, current: this.voucher.cover.showpath,
urls:[this.voucher.cover.showpath] urls: [this.voucher.cover.showpath]
}) })
}, },
@@ -341,9 +361,9 @@
}) })
}, },
// 编辑凭证 // 编辑凭证
canSubmitEdit(id){ canSubmitEdit(id) {
let newCover = this.canFromImg.path let newCover = this.canFromImg.path
vipVoucherUpdate(id,{ vipVoucherUpdate(id, {
cover: newCover cover: newCover
}).then(res => { }).then(res => {
this.$Router.push({ this.$Router.push({
@@ -409,11 +429,12 @@
height: 240rpx; height: 240rpx;
border: 2rpx solid #f3f3f3; border: 2rpx solid #f3f3f3;
} }
.canPop-remark{
.canPop-remark {
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.canPop-status{ .canPop-status {
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
@@ -626,7 +647,8 @@
.footer-btn { .footer-btn {
width: 74%; width: 74%;
} }
.current-btn{
.current-btn {
width: 74%; width: 74%;
height: 80rpx; height: 80rpx;
background-image: linear-gradient(to right, #7c52fc, #976dff); background-image: linear-gradient(to right, #7c52fc, #976dff);
@@ -636,7 +658,8 @@
line-height: 80rpx; line-height: 80rpx;
font-size: 36rpx; font-size: 36rpx;
} }
.current-btn-sh{
.current-btn-sh {
background-color: #cacaca; background-color: #cacaca;
width: 74%; width: 74%;
height: 80rpx; height: 80rpx;

View File

@@ -11,7 +11,10 @@ $text-gray: #555;
$text-gray-m: #999; $text-gray-m: #999;
$text-price: #8b64fd; $text-price: #8b64fd;
$mian-color: #8b64fd; $mian-color: #8b64fd;
$main-color: #8b64fd;
$mian-color-deep: #824f9a; $mian-color-deep: #824f9a;
$mian-color-light:#8b64fd;
$main-color-light:#8b64fd;
// 矿机 // 矿机
$block-color: #2b2449; $block-color: #2b2449;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/icons/search_row.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/imgs/coupon-fu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
static/imgs/coupon-quan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
static/imgs/coupon-ti.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
static/imgs/fire.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/imgs/payFail.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/imgs/paySuccess.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -0,0 +1,93 @@
## 1.2.82021-08-17
1、修复搜索导航栏按钮组位置问题
## 1.2.72021-08-13
1、h5端自动同步标签标题如微信标题<br>
2、组件内新增h5AutoTitle配置后可以h5端自动获取页面标题详情看描述文件
## 1.2.62021-08-13
更新说明文档
## 1.2.52021-08-13
修复按钮组位置偏差问题
## 1.2.42021-07-21
1、btn的icon添加text可以带文字<br>
2、修复样式btn右边间距、输入框字体大小改为inherit等
## 1.2.32021-07-20
1、开启了model滚动监听<br>
2、按钮组添加了badge设置角标
## 1.2.22021-05-25
1、新增设置样式事件setStyle()可通过ref来调用
2、修改config内style传参格式改为string类型兼容小程序
3、新增组件内注释
4、其它小优化
## 1.2.12021-03-16
处理了手机从竖屏变横屏后显示错乱问题
## 1.2.02021-03-05
处理了右按钮样式小程序兼容错误
## 1.1.92021-03-01
处理nvue兼容性引入scss失败、css错误
## 1.1.82021-02-25
1、兼容nvue
2、添加背景图
## 1.1.72021-02-24
1、兼容uni_modules官方新推出的插件管理兼容nv写法需要在pages.json添加代码"easycom": {"nv": "@/uni_modules/pyh-nv/components/pyh-nv/pyh-nv.vue"}
2、nvRoute函数更名为nv
## 1.1.62021-02-01
1、修复model定位问题
## 1.1.52021-02-01
1、全类型支持设置右方按钮组
2、添加h5 document.title等于config的标题
3、添加属性model可在页面内独立使用常用于不满足右方按钮小程序不显示的兼容方案使用2个nv
4、优化代码结构
## 1.1.42020-11-18
1、修复微信公众号中input的disabled点击跳转失效问题
2、修复右上角纯图片按钮变形问题
## 1.1.32020-09-27
修复config空值有时会报错的bug
## 1.1.22020-09-14
添加通用导航栏渐变色背景功能渐变色背景会导致transparent背景色渐变失效
## 1.1.12020-09-01
修复icon原生组件在小程序内高度铺满导致的错误问题
## 1.1.02020-08-27
1、使用icon代替图片图标,完全独立组件
2、添加回到顶部的功能
## 1.0.92020-08-18
''' 1、单logo模式支持全样式设置可实现全背景图等
2、优化了路由跳转判断及多端跳转
3、组件内利用了scss的特性优化了主色的修改
4、示例项目内添加了全局变量globalData以及全路由封装函数nvRoute组件也做了兼容处理可快速设置配置如需路由做特殊处理比如history模式等可使用封装的nvRoute统一处理 '''
## 1.0.82020-08-17
1、修改搜索框动态赋值方式更加方便直接修改search.value需要初始化value旧的赋值方式已废弃。重要 2、注释样式上版本组件内样式没有注释uni.scss的部分
## 1.0.72020-08-13
1、修改标题字体的size和weight,等同于uniapp的h5样式 2、补充组件主色覆盖样式的注释可去除注释快速修改也可使用uni.scss快速修改主色
## 1.0.62020-07-29
1、补充文档对于搜索框赋值的说明添加动态赋值功能
## 1.0.52020-07-20
补充单组件文件缺少的文件iconfont.wxss(后续版本已移除该文件)
## 1.0.42020-07-08
1、修复fixed定位辅助容器高度问题
2、补充示例项目属性项
## 1.0.32020-07-08
1、添加config.position属性并且默认为'fixed' 2、添加config.fixedAssist属性———固定定位辅助导航栏高度与导航栏一致可设置背景色 3、原home返回键背景取消如需要需使用componentBgColor 4、状态栏字体颜色与导航栏字体颜色一致状态栏字体只支持#000000或#ffffff 5、config.color 改为导航栏和状态栏字体色,也用于渐变完成时字体色(状态栏字体只支持#000000或#ffffff 6、transparent.initColor代替之前的状态栏字体颜色设置该值为导航栏与状态栏初始色状态栏字体只支持#000000或#ffffff 7、修改默认字体色为'#000000'
## 1.0.22020-07-07
修改示例配置,更友好上手
## 1.0.12020-07-07
上传初版,更新说明文档
## 1.0.02020-07-07
上传初版

Binary file not shown.

View File

@@ -0,0 +1,515 @@
<template name="nv">
<view class="pyh-nv-box" :style="style">
<view class='nvHeight' :style="[{'height':navigatorHeight+'px'},{'background':(config.fixedAssist&&config.fixedAssist.bgColor)||''}]" v-if="isFixed&&!(config.fixedAssist&&config.fixedAssist.hide)"></view>
<image :src="config.bgImage" :style="[{'position':config.model?'fixed':'absolute'},{'top':(config.model?(navigatorTop+'px'):0)},{'width':windowWidth+'px','height':navigatorHeight+'px'}]" v-if="config.bgImage" class="bgImage"></image>
<view :class="['nvBox',{'noModel':!config.model}]" :style="[{'width':windowWidth+'px'},{'color':getTxtColor},{'background':getBgColor},{'opacity':config.transparent&&config.transparent.type=='content'?transparent.opacity:1},{'position':isFixed?'fixed':'relative'},{'top':(isFixed&&config.model?(navigatorTop+'px'):0)}]">
<view class='nvHeight' :style="[{'height':navigatorHeight+'px'}]"></view>
<view class='nvFixed' :style="[{'width':windowWidth+'px'}]">
<!-- 单logo -->
<view :class="['nvContent','nvLogoBox',{'androidwx':androidwx}]" v-if="config.type=='logo'">
<image :src="config.logo.src?config.logo.src:'/static/logo.png'" class="nvLogo" :style="config.logo.style" :mode="config.logo.style|getImgMode" @tap.stop="nvLogoTap"></image>
<view v-if="config.btn&&config.btn.length>0" class="nvBtnGroup">
<block v-for="(b,n) in config.btn" :key="n">
<view class="nvBtn" v-if="b.icon" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||''">
<image :src="b.icon" mode="widthFix" class="nvBtnImg"></image>
<text class="nvBtnIconTxt" v-if="b.text">{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
<view class="nvBtn" v-else-if="b.text" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||{color:getTxtColor}">
<text>{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
</block>
</view>
</view>
<!-- 含搜索 -->
<view :class="['nvContent','nvSearchBox',{'nvHadBack':!config.hideback}]" v-else-if="config.type=='search'">
<image :src="config.logo.src?config.logo.src:'/static/logo.png'" class="nvLogo nvSearchLogo" :style="config.logo.style" :mode="config.logo.style|getImgMode" @tap.stop="nvLogoTap" v-if="config.logo&&!config.address"></image>
<view class="nvAddress" :style="[{'background':(config.address.bgColor||config.componentBgColor||'')},{'color':(config.address.color||'')}]" v-if="config.address" @tap.stop="nvAddressTap">
<text class="iconfont nvAddressIcon" :style="{'color':(config.address.color||'')}">&#xe613;</text>
<view class="nvAddressTextBox">
<text class="nvAddressText">{{config.address[config.address.fields||'province']||'广东省'}}</text>
</view>
</view>
<view class="nvSForm" >
<view class="nvSBox" :style="[{'background':(config.search.bgColor||config.componentBgColor||'')},{'border':config.search.border||''}]" @tap.stop="searchTap" data-isInput="true">
<icon type="search" size="18" class="searchIcon"></icon>
<input class="nvInput" type="text" :value="inputValue" :focus="config.search.focus" :placeholder="config.search.placeholder" :disabled="!config.search.input" @input="inputChange" @confirm="formSubmit" :confirm-type="config.search.confirmType||'search'" placeholder-class="searchPlac" :placeholder-style="config.search.placeholderStyle||''"/>
<icon type="clear" size="15" class="nvSClose" @tap.stop="inputClear" v-if="inputValue"></icon>
</view>
<text class='nvSBtn' @tap.stop="formSubmit" v-if="config.search.btn&&config.search.input" :style="config.search.btn.style||''">{{config.search.btn.text||'搜索'}}</text>
</view>
<view v-if="config.btn&&config.btn.length>0" class="nvBtnGroup nvBtnGroup-static">
<block v-for="(b,n) in config.btn" :key="n">
<view class="nvBtn" v-if="b.icon" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||''">
<image :src="b.icon" mode="widthFix" class="nvBtnImg"></image>
<text class="nvBtnIconTxt" v-if="b.text">{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
<view class="nvBtn" v-else-if="b.text" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||{color:getTxtColor}">
<text>{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
</block>
</view>
</view>
<!-- 默认导航栏 -->
<view class="nvContent nvDefault" v-else>
<view v-if="config.tabArr&&config.tabArr.length>0" :class="['nvTitle','nvTabBox',{'androidwx':androidwx}]">
<view :class="['nvTab',{'nvTabHide':t.hide}]" @tap.stop="nvTabTap" :data-index="i" v-for="(t,i) in config.tabArr" :key="i">
<text :class="[t.active?'nTTxt-ac':'nTTxt']" :style="{'color':(t.active?mainColor:getTxtColor)}">{{t.title}}</text>
<view :class="[t.active?'nTLine-ac':'nTLine']"></view>
</view>
</view>
<view v-else :class="['nvTitle',{'androidwx':androidwx},{'hideback':config.hideback}]">
<text :style="{'color': getTxtColor}">{{config.title||title}}</text>
</view>
<view v-if="config.btn&&config.btn.length>0" class="nvBtnGroup">
<block v-for="(b,n) in config.btn" :key="n">
<view class="nvBtn" v-if="b.icon" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||''">
<image :src="b.icon" mode="widthFix" class="nvBtnImg"></image>
<text class="nvBtnIconTxt" v-if="b.text">{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
<view class="nvBtn" v-else-if="b.text" @tap.stop="nvBtnTap" :data-index="n" :data-type="b.type" :style="b.style||{color:getTxtColor}">
<text>{{b.text}}</text>
<view class="nvBadge" v-if="b.badge&&b.badge.text" :style="b.badge.style||''">{{b.badge.text}}</view>
</view>
</block>
</view>
</view>
<!-- 返回键 -->
<text :class="['iconfont','nvback',{'nvhome':isSharePage&&!config.closeCheckback}]" @tap.stop="backTap" :style="{'background':(isSharePage&&!config.closeCheckback?(config.componentBgColor||''):''),'color':getTxtColor,'border-radius':'26rpx','font-size': isSharePage&&!config.closeCheckback?'36rpx':'54rpx'}" v-if="!config.hideback">{{isSharePage&&!config.closeCheckback?'&#xe605;':'&#xe743;'}}</text>
</view>
</view>
<text class="iconfont nvToTop" :style="(config.toTop&&config.toTop.style)||''" v-if="config.toTop&&showToTop" @tap.stop="toTopTap">&#xe64d;</text>
</view>
</template>
<script>
var platform;
//#ifdef H5
platform="h5"
//#endif
//#ifdef APP-PLUS
platform="app"
//#endif
//#ifdef MP
platform="mp"
//#endif
export default {
name:"nv",
props:{
config:{
type:Object,
default(){
return {}
}
},
},
data() {
return {
title:getApp().globalData.NAME||"pyh-nv",
h5AutoTitle:true,
platform:platform||'h5',
mainColor:getApp().globalData.mainColor||"#fff",
currentPages:getCurrentPages().length||1,
home:getApp().globalData.HOME||"/pages/index/index",
inputValue:'',
showToTop:false,
transparent:{
initColor:"#ffffff",
finishColor:"#000000",
color:"#ffffff",
opacity:0
},
windowWidth:uni.getSystemInfoSync().windowWidth,
style:""
};
},
watch:{
"config.search.value":function(value){
//监听输入框值得改变
var e = {detail:{value:value}};
this.inputValue = e.detail.value;
if(this.config.type=="search"&&this.config.search.input)this.$emit("nvInput",e);
}
},
filters:{
getImgMode(style){
//获取图片mode类型
if(style&&style.indexOf("height")>-1){
return 'aspectFill';
}else{
return 'widthFix';
}
}
},
computed:{
statusHeight(){
//状态栏高度
var statusBarHeight = this.config.model?0:uni.getSystemInfoSync().statusBarHeight;
return statusBarHeight+'px';
},
navigatorHeight(){
//导航栏高度
var statusBarHeight = this.config.model?0:uni.getSystemInfoSync().statusBarHeight;
var windowWidth = this.lockWindowWidth&&this.windowWidth>750?375:this.windowWidth;
return parseInt(88*windowWidth/750)+statusBarHeight;
},
navigatorTop(){
//model类型下的顶部高度
var windowWidth = this.lockWindowWidth&&this.windowWidth>750?375:this.windowWidth;
if(this.config.model){
return parseInt(88*windowWidth/750)+uni.getSystemInfoSync().statusBarHeight;
}else{
return 0;
}
},
//安全区域高度
safeArea(){return this.config.safeArea||uni.getSystemInfoSync().safeArea.height;},
//固定定位判断
isFixed(){return this.config.transparent||this.config.position=='fixed'||this.config.position=='absolute'||!this.config.position;},
//判断分享页
isSharePage(){return this.currentPages==1;},
//安卓微信
androidwx(){
if(this.config.checkAndroidwx&&this.platform=="mp"&&uni.getSystemInfoSync().platform.indexOf("ios")==-1){
return true;
}else{
return false;
}
},
//获取字体色
getTxtColor(){
return ((this.config.transparent&&this.config.transparent.initColor)?this.transparent.color:'')||this.config.color||'';
},
//获取/转换背景色
getBgColor(){
var that = this;
if(this.config.bgImage){
return "transparent";
}else if(this.config.bgColor&&this.config.bgColor.indexOf("gradient")>-1){
return this.config.bgColor;
}else{
return (this.config.bgColor||this.config.transparent)?'rgba('+getRgbString()+','+(this.config.transparent&&this.config.transparent.type!='content'?this.transparent.opacity:1)+')':'#fff';
}
function getRgbString(){
var bgColor = that.config.bgColor||"#ffffff",returnString=""
if(bgColor.indexOf(",")>-1){
returnString = bgColor.split('(')[1].replace(')','').split(',').slice(0,3).join(",")
}else{
if(bgColor.length==4)bgColor = bgColor+bgColor.charAt(bgColor.length-1)+bgColor.charAt(bgColor.length-1)+bgColor.charAt(bgColor.length-1)
var string = bgColor.replace("#",'');
returnString = parseInt(string.substring(0,2), 16)+','+parseInt(string.substring(2,4), 16)+','+parseInt(string.substring(4,6), 16)
}
return returnString
}
}
},
created() {
// #ifdef APP-NVUE
var domModule = weex.requireModule("dom");
domModule.addRule('fontFace', {
'fontFamily': 'iconfont',
'src': "url('http://at.alicdn.com/t/font_1687851_vdpjdiddv6.ttf')"
})
// #endif
if(this.config.search&&this.config.search.value)this.inputValue=this.config.search.value;
if(this.config.transparent&&this.config.transparent.initColor){
var initColor = this.config.transparent.initColor,finishColor = this.config.color||"#000000";
if(initColor.indexOf("#")>-1&&initColor.length==4){
initColor = initColor+initColor.charAt(initColor.length-1)+initColor.charAt(initColor.length-1)+initColor.charAt(initColor.length-1);
}
if(finishColor.indexOf("#")>-1&&finishColor.length==4){
finishColor = finishColor+finishColor.charAt(finishColor.length-1)+finishColor.charAt(finishColor.length-1)+finishColor.charAt(finishColor.length-1);
}
if(!((initColor=="#000000"||initColor=="#ffffff")&&(finishColor=="#000000"||finishColor=="#ffffff"))){
console.log("状态栏颜色只支持,#000000或#ffffff");
}
this.transparent.initColor = initColor;
this.transparent.color = initColor;
this.transparent.finishColor = finishColor;
}
this.deviceOrientation=uni.getSystemInfoSync().windowWidth>750?"landscape":"portrait";
if(this.deviceOrientation=="portrait")this.lockWindowWidth=true;
uni.onWindowResize((res)=>{
if(this.deviceOrientation!=res.deviceOrientation){
this.deviceOrientation = res.deviceOrientation;
this.windowWidth = res.size.windowWidth;
}
})
},
mounted() {
if(this.config.color){
var obj = {frontColor:this.config.color,backgroundColor:this.config.bgColor||"#ffffff"};
uni.setNavigationBarColor(obj);
}
if(this.config.transparent&&this.config.transparent.initColor){
var obj = {frontColor:this.transparent.initColor,backgroundColor:this.config.bgColor||"#ffffff"};
uni.setNavigationBarColor(obj);
}
if(platform=="h5"&&!this.config.model){
this.config.title&&uni.setNavigationBarTitle({title:this.config.title})
if(document.title&&this.h5AutoTitle)this.title=document.title
document.setTitle = function(t) {document.title = t;var i = document.createElement('iframe');/*i.src = '//m.baidu.com/favicon.ico';*/i.style.display = 'none';i.onload = function() {setTimeout(function(){i.remove();}, 9)};document.body.appendChild(i);}
setTimeout(()=>{document.setTitle(this.config.title||this.title);}, 1);
}
},
onUnload() {uni.offWindowResize();},
methods:{
setStyle(object){
//设置导航栏样式
var style = "";
for(var i in object){style += (i+":"+object[i]+";")}
this.style=style;
},
nvLogoTap(e){
//logo点击
var url = this.config.logo.url;
this.$emit("nvLogoTap");
url&&uni.reLaunch({url:url});
},
nvAddressTap(e){
//地址图标点击
this.$emit("nvAddressTap");
},
searchTap(e){
//搜索按钮点击
if(this.config.search.url||this.config.search.linkType){
this.linkTo({currentTarget:{dataset:{url:this.config.search.url,type:this.config.search.linkType||''}}});
}else{
this.$emit("searchTap");
}
},
inputChange(e){
//输入框输入
this.inputValue = e.detail.value;
if(this.config.type=="search"&&this.config.search.input)this.$emit("nvInput",e)
},
inputClear(e){
//输入框清除
this.inputValue="";
if(this.config.type=="search"&&this.config.search.input)this.$emit("nvInput",e);
},
formSubmit(e){
//输入框提交
var e = {detail:{value:this.inputValue}};
this.$emit("nvFormSubmit",e)
},
nvBtnTap(e){
//右按键点击
var e = {type:e.currentTarget.dataset.type,index:parseInt(e.currentTarget.dataset.index)};
this.$emit("nvBtnTap",e);
},
nvTabTap(e){
//中间tab按键点击
var e = {index:parseInt(e.currentTarget.dataset.index)};
this.$emit("nvTabTap",e);
},
toTopTap(e){
//回到顶部
this.showToTop=false
uni.pageScrollTo({scrollTop:0,duration:this.config.toTop.duration||(this.config.toTop.duration===0?0:300)});
this.$emit("nvToTop");
},
pageScroll(e={scrollTop:0}){
//页面滚动
if(!this.config.transparent)return;
var anchor = this.navigatorHeight;
if(this.config.transparent.anchor)anchor=this.config.transparent.anchor;
var op = parseFloat(parseFloat(e.scrollTop/anchor).toFixed(1));
if(e.scrollTop<=anchor){
this.transparent.opacity = op;
if(this.config.transparent.initColor){
if(op>=.5){
this.transparent.color=this.transparent.finishColor;
uni.setNavigationBarColor({frontColor:this.transparent.finishColor,backgroundColor:this.config.bgColor||"#ffffff"});
}else{
this.transparent.color=this.transparent.initColor;
uni.setNavigationBarColor({frontColor:this.transparent.initColor,backgroundColor:this.config.bgColor||"#ffffff"});
}
}
}else{
this.transparent.opacity = 1;
}
if(this.config.toTop){
if(this.showToTop&&e.scrollTop<this.safeArea){
this.showToTop=false;
}
if(!this.showToTop&&e.scrollTop>=this.safeArea){
this.showToTop=true;
}
}
},
backTap(){
//返回键点击
if(this.config.backpress){
this.$emit("backTap");
}else{
this.linkTo({currentTarget:{dataset:{type:'navigateBack'}}});
}
},
linkTo(e) {
//跳转
var url=e.currentTarget.dataset.url,
type=e.currentTarget.dataset.type,
isInput=e.currentTarget.dataset.isInput;
if(isInput&&this.config.type=="search"&&this.config.search&&this.config.search.input){
return;
}
if(this.$nv){
this.$nv(url,type);
}else{
if(!url&&!type)return;
if(url=="/"||url==".")return;
if(typeof(url)=="object"){
uni.navigateTo(url);
return
}
if(typeof(url)=="number"){
if(this.currentPages==1){
uni.reLaunch({url:this.home})
}else{
uni.navigateBack({delta:Math.abs(url||1)})
}
return;
}
if(type){
if (type.indexOf("ab")>-1) {
uni.switchTab({ url: url });
} else if (type=='-1'||type.indexOf("redirect")>-1||type.indexOf("rep")>-1) {
uni.redirectTo({ url: url });
} else if (type.indexOf("aunch")>-1) {
uni.reLaunch({ url: url });
} else if (type.indexOf("ack")>-1) {
if(this.currentPages==1){
uni.reLaunch({url:this.home});
}else{
uni.navigateBack();
}
}else{
uni.navigateTo({url:url});
}
}else{
if(url.indexOf("/")==0||url.indexOf(".")==0){
uni.navigateTo({url:url});
}else{
if(url.indexOf("?")>0){url+="&platform="+platform;}else{url+="?platform="+platform;};
if(platform=="h5"){
top.location.href=url;
}else if(platform=="app"){
plus.runtime.openUrl(url);
}else{
uni.navigateTo({url:"/pages/other/webview/webview?src="+url.replace("?","&")});
}
}
}
}
}
}
}
</script>
<style lang="scss" scoped>
@font-face {
font-family: iconfont;
src: url('./iconfont.ttf')
}
.iconfont {
font-family: iconfont;
font-size: 30rpx;
font-style: normal;
}
//主色可以设置uni.scss的$mainColor
//或
//uni.scss未定义或定义为null,修改下方$mainColor的默认值
$mainColor: #aa55ff !default;
.pyh-nv-box{position: relative;}
.bgImage{position: absolute;left: 0;top: 0;}
.nvBox{background-color: #fff;z-index: 991;color: #000000;}
.noModel{z-index: 992;}
.nvHeight{height: 88rpx;}
.nvFixed{position: absolute;bottom: 0;height: 88rpx;left: 0;z-index: 992;padding: 0 20rpx;}
.nvContent{flex: 1;height: 88rpx;align-items: center;}
.nvInput{font-size: inherit;flex: 1;}
.searchIcon{
width: 18px;
margin-right: 20rpx;
/* #ifdef MP */
height: 18px;
/* #endif */
}
.nvTitle{position: absolute;top: 0;left: 0;right: 0;text-align: center;height: 88rpx;line-height: 88rpx;align-items: center;justify-content: center;padding: 0 80rpx;font-size: 32rpx;font-weight: bold;overflow: hidden;text-overflow: ellipsis;}
.androidwx{text-align: left;padding-left: 80rpx;justify-content: flex-start!important;}
.nvback{font-size: 54rpx;position: absolute;left: 6rpx;padding-left: 8rpx;bottom: 18rpx;flex-direction: row;align-items: center;z-index: 992;width: 52rpx;height: 52rpx;}
.nvhome{border-radius: 26rpx;font-size: 36rpx;padding: 0;left: 20rpx;text-align: center;justify-content: center;}
.nvHadBack{padding-left: 60rpx;}
//logo
.nvLogoBox{align-items: center;justify-content: center;position: absolute;left: 0;padding-right: 0rpx!important;left: 0;right: 0;}
.nvLogo{width: 60rpx;}
//含搜索框
.nvSearchLogo{margin-right: 20rpx;}
.nvAddress{background-color: #f8f8f8;border-radius: 44rpx;justify-content: center;align-items: center;padding: 0 16rpx 0 10rpx;font-size: 28rpx;line-height: 30rpx;margin-right: 20rpx;color: #000000;height: 60rpx;width: 144rpx;}
.nvAddressIcon{width: 30rpx;margin-right: 4rpx;font-size: 34rpx;}
.nvAddressTextBox{width: 84rpx;overflow: hidden;}
.nvAddressText{flex: 1;font-size: 28rpx;line-height: 30rpx;overflow: hidden;text-overflow: ellipsis;}
.searchPlac{color: #bbb;}
.nvSForm{flex: 1;justify-content: space-between;align-items: center;}
.nvSBox{flex: 1;border-radius: 44rpx;background-color: #f8f8f8;height: 60rpx;line-height: 60rpx;padding: 0 20rpx;align-items: center;}
.nvSBtn{color: #fff;border-radius: 44rpx;height: 60rpx;line-height: 60rpx;width: 120rpx;padding: 0;text-align: center;font-size: 28rpx;margin-left: 20rpx;background-color: $mainColor;}
.nvSClose{
/* #ifdef MP */
height: 15px;
/* #endif */
}
//右边按钮组
.nvBtnGroup{position: absolute;right: 20rpx;top: 0;height: 88rpx;align-items: center;justify-content: center;z-index: 993;font-size: 28rpx;color: #000000;}
.nvBtn{display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;}
.nvBtn:first-child{margin-left: 0;}
.nvBtn,.nvBtnImg{padding: 0;margin-left: 20rpx;background: transparent;border: 0;color: #000000;z-index: 3;font-size: 28rpx;position: relative;}
.nvBtnImg{width: 48rpx;margin-left: 0;}
.nvBtnGroup-static{position: relative;padding-left: 20rpx;right: 0;}
.nvBtn .nvBadge{width: 26rpx;height: 26rpx;position: absolute;top: -8rpx;right: -8rpx;display: flex;align-items: center;justify-content: center;border-radius: 50%;overflow: hidden;background-color: red;color: #fff;font-size: 16rpx;z-index: 4;}
//tab栏
.nvTabBox{position: absolute!important;}
.nvTab{flex-direction: column!important;align-items: center;justify-content: flex-end;margin: 0 10rpx;position: relative;}
.nTTxt,.nTTxt-ac{padding: 0 10rpx;line-height: 88rpx;}
.nTLine,.nTLine-ac{height: 4rpx;border-radius: 2rpx;background: transparent;position: absolute;bottom: 0;left: 0;right: 0;}
.nTTxt-ac{color: $mainColor;}
.nTLine-ac{background: $mainColor;}
.nvTabHide{width:0;height:0;margin:0;overflow:hidden;}
//回到顶部
.nvToTop{position: fixed;bottom: 200rpx;right: 40rpx;z-index: 992;background: #fff;border-radius: 50%;width: 80rpx;height: 80rpx;text-align: center;line-height: 80rpx;font-size: 46rpx;box-shadow: 2rpx 2rpx 2rpx 2rpx #ddd;}
//小程序胶囊留位
/* #ifdef MP-WEIXIN */
.noModel .nvContent{padding-right: 200rpx;}
.noModel .nvSBtn,.noModel .nvBtnGroup{display: none;}
/* #endif */
/* #ifdef APP-NVUE */
.nvContent,.nvback,.nvLogoBox,.nvSearchBox,.nvAddress,.nvSForm,.nvSBox,.nvBtnGroup,.nvTabBox,.nvTab{flex-direction: row;}
.nvTitle,.nvAddress,.nvAddressText{lines: 1;}
.pyh-nv-box,.nvBox,.nvHeight,.nvFixed,.nvTitle,.nvLogoBox,.nvSearchBox,.nTLine,.nTLine-ac{flex: 1;}
.nvTab{flex-direction: column!important;align-items: center;justify-content: flex-end;line-height: 80rpx;margin: 0 10rpx;}
/* #endif */
/* #ifndef APP-NVUE */
.nvContent,.nvback,.nvLogoBox,.nvSearchBox,.nvAddress,.nvSForm,.nvSBox,.nvBtnGroup,.nvTabBox,.nvTab{display: flex;flex-direction: row;}
.nvTitle,.nvAddressText{white-space: nowrap;}
.nvBox,.nvBox *,.nvContent,.nvTitle,.nvFixed{box-sizing: border-box;}
.nvLogo,.nvAddressIcon,.nvBtnImg{height: auto;}
.pyh-nv-box,.nvBox,.nvHeight,.nvFixed,.nvTitle,.nvLogoBox,.nvSearchBox,.nTLine,.nTLine-ac{width: 100%;}
/* #endif */
</style>

View File

@@ -0,0 +1,79 @@
{
"id": "pyh-nv",
"name": "pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏",
"version": "1.2.8",
"description": "所有属性都可自定义兼容各端包括nvue所有类型导航栏都可渐变还可设置状态栏字体色1.1.6版本后续非uni_modules版本不再更新",
"keywords": [
"导航栏",
"自定义",
"渐变",
"状态栏",
"多端兼容"
],
"displayName": "pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏",
"repository": "https://github.com/Ulovely/pyh-nv",
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
},
"engines": {
"HBuilderX": "^3.1.0"
}
}

View File

@@ -0,0 +1,131 @@
### pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏
pyh-nv 导航栏组件,组件名:``nv``,代码块: nv。
**使用方式:**
uni_modules:
[uni_modules使用方法](https://uniapp.dcloud.io/uni_modules?id=%e4%bd%bf%e7%94%a8-uni_modules-%e6%8f%92%e4%bb%b6)
uni_modules在template内的名称为pyh-nv,兼容nv写法需要在pages.json添加代码
"easycom": {"nv": "@/uni_modules/pyh-nv/components/pyh-nv/pyh-nv.vue"}
非uni_modules:
复制uni_modules->pyh-nv->components->pyh-nv文件到根目录的components下
在 ``main.js`` 中引用组件
```javascript
import nv from "@/components/pyh-nv/pyh-nv.vue";
Vue.component("nv",nv)
```
在 ``template`` 中使用组件
```html
<nv></nv>
<nv :config="{'hideback':true}"></nv>
<nv :config="config"></nv>
```
在 ``script`` 中 config 说明
所有配置都为选填,无需要可以不配置,不复杂!!!</br>
所有配置都为选填,无需要可以不配置,不复杂!!!</br>
所有配置都为选填,无需要可以不配置,不复杂!!!</br>
**config 属性说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|title |String |'pyh-nv' |标题,默认值为getApp().globalData.NAME或组件内title写死的字符串h5端能自动同步标签标题比如微信标题标题可以使用config配置修改|
|position |String |'fixed' |定位方式,fixed和absoult都是固定定位其它值为静态导航栏随页面滚动 |
|hideback |Boolean|false |是否隐藏导航栏返回功能 |
|model |Boolean|false |是否页面内独立使用模型如果是固定定位top为导航栏高度 |
|bgImage |String |'' |导航栏背景图,如果使用则bgColor无效|
|bgColor |String |'#ffffff' |导航栏背景色,如果使用渐变色transparent渐变属性失效|
|color |String |'#000000' |导航栏和状态栏字体色,也用于渐变完成时字体色(状态栏字体只支持#000000或#ffffff|
|componentBgColor |String |'#f8f8f8' |导航栏组件背景色(可被覆盖),如果有设置,回到首页的返回键有背景色|
|type |String |'default' |导航栏类型(默认为通用),还有logo和search |
|safeArea |Number |安全高度 |暂时只用于控制滚动显示,比如回到顶部 |
|toTop |Object | |是否使用回到顶部,有该属性就是使用,详细见下方toTop说明} |
|logo |Object | |导航栏logo的配置,仅type为logo或search时有效,详细见下方logo说明 |
|search |Object | |导航栏含搜索框的配置,仅type为search时有效,详细见下方search说明 |
|transparent |Object | |导航栏渐变配置,详细见下方transparent说明 |
|fixedAssist |Object | |固定/绝对定位时辅助容器,{hide:false,bgColor:''} |
|address |Object | |搜索导航栏左地址配置,{province:'广东省'} |
|btn |Array |[] |导航栏右方按钮组,{text:'点击1',style:''},{icon:'',text:'',badge:{text:'1',style:''}}|
|tabArr |Array |[] |导航栏中间tab切换,{title:'',active:true,hide:false} |
**pyh-nv.vue 内配置说明:**
|title |String |'pyh-nv' |标题默认值,getApp().globalData.NAME或自定义字符串 |
|h5AutoTitle |Boolean|false |为true时而且config没传入title,h5端自动获取pages.json的navigationBarTitleText|
**config 内 toTop 配置说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|duration |Number |300 |回到顶部的滚动动画时间ms |
|style |String |'' |样式配置 |
**config 内 logo 配置说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|src |String |'/static/logo.png' |logo路径 |
|url |String |'' |如果传值,点击logo会reLaunch到该url |
|style |String |'' |样式配置 |
**config 内 search 配置说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|value |String |'' |input的初始值如需动态赋值必须初始化 |
|bgColor |String |'#f8f8f8' |组件背景色,覆盖 componentBgColor |
|input |Boolean|false |输入框提示语样式 |
|url |String |'' |input为false时生效,点击navigateTo到url |
|focus |Boolean|false |是否自动聚焦 |
|border |String |'' |输入框边框样式 |
|placeholder |String |'搜索' |输入框提示语 |
|placeholderStyle |String |'' |输入框提示语样式 |
|btn |Object | |input为true时生效,搜索框提交按钮,{text:'搜索',style:''} |
|confirmType |String |'search' |同官方input的confirm-type,设置回车键文字 |
**config 内 transparent 配置说明:**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|type |String |'background' |渐变类型,content为全透明渐变 |
|anchor |Number |当前导航栏高度 |最终渐变位置 |
|initColor |String |'#ffffff' |导航栏与状态栏初始色,(状态栏字体只支持#000000或#ffffff |
**组件pyh-nv 事件说明(详情请参考示例项目)**
|属名 |说明 |
|--- |---- |
|nvLogoTap |点击logo,仅logo存在时生效 |
|nvAddressTap |点击地址,仅地址存在时生效 |
|nvInput |输入框input事件,仅search.input为true时生效 |
|nvFormSubmit |输入框确认事件,仅search.input为true时生效 |
|nvBtnTap |右方按钮组点击事件,仅右方按钮存在时生效 |
|nvTabTap |中间tab组点击事件,仅中间tab按钮存在时生效 |
**ref 事件说明(详情请参考示例项目)**
|事件名 |参数类型 |参数默认值 |说明 |
|--- |---- |---- |---
|setStyle |Object |{} |直接设置导航栏样式 |
|pageScroll |Object |{scrollTop:0} |传递页面滚动信息 |
**感谢:**
> 有更多优化建议和需求,请联系作者 panyh 。谢谢!

View File

@@ -0,0 +1,8 @@
## 1.1.02021-07-30
- 组件兼容 vue3如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.72021-05-12
- 新增 组件示例地址
## 1.0.62021-02-05
- 调整为uni_modules目录规范
- 优化 按钮背景色调整
- 优化 兼容pc端

View File

@@ -0,0 +1,448 @@
<template>
<view class="uni-cursor-point">
<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{
'uni-fab--leftBottom': leftBottom,
'uni-fab--rightBottom': rightBottom,
'uni-fab--leftTop': leftTop,
'uni-fab--rightTop': rightTop
}"
class="uni-fab">
<view :class="{
'uni-fab__content--left': horizontal === 'left',
'uni-fab__content--right': horizontal === 'right',
'uni-fab__content--flexDirection': direction === 'vertical',
'uni-fab__content--flexDirectionStart': flexDirectionStart,
'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
'uni-fab__content--other-platform': !isAndroidNvue
}"
:style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" class="uni-fab__content"
elevation="5">
<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" class="uni-fab__item"
@click="_onItemClick(index, item)">
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" />
<text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
</view>
<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
</view>
</view>
<view :class="{
'uni-fab__circle--leftBottom': leftBottom,
'uni-fab__circle--rightBottom': rightBottom,
'uni-fab__circle--leftTop': leftTop,
'uni-fab__circle--rightTop': rightTop,
'uni-fab__content--other-platform': !isAndroidNvue
}"
class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }" @click="_onClick">
<view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
</view>
</view>
</template>
<script>
let platform = 'other'
// #ifdef APP-NVUE
platform = uni.getSystemInfoSync().platform
// #endif
/**
* Fab 悬浮按钮
* @description 点击可展开一个图形按钮菜单
* @tutorial https://ext.dcloud.net.cn/plugin?id=144
* @property {Object} pattern 可选样式配置项
* @property {Object} horizontal = [left | right] 水平对齐方式
* @value left 左对齐
* @value right 右对齐
* @property {Object} vertical = [bottom | top] 垂直对齐方式
* @value bottom 下对齐
* @value top 上对齐
* @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
* @value horizontal 水平显示
* @value vertical 垂直显示
* @property {Array} content 展开菜单内容配置项
* @property {Boolean} popMenu 是否使用弹出菜单
* @event {Function} trigger 展开菜单点击事件,返回点击信息
* @event {Function} fabClick 悬浮按钮点击事件
*/
export default {
name: 'UniFab',
emits:['fabClick','trigger'],
props: {
pattern: {
type: Object,
default () {
return {}
}
},
horizontal: {
type: String,
default: 'left'
},
vertical: {
type: String,
default: 'bottom'
},
direction: {
type: String,
default: 'horizontal'
},
content: {
type: Array,
default () {
return []
}
},
show: {
type: Boolean,
default: false
},
popMenu: {
type: Boolean,
default: true
}
},
data() {
return {
fabShow: false,
isShow: false,
isAndroidNvue: platform === 'android',
styles: {
color: '#3c3e49',
selectedColor: '#007AFF',
backgroundColor: '#fff',
buttonColor: '#007AFF'
}
}
},
computed: {
contentWidth(e) {
return (this.content.length + 1) * 55 + 10 + 'px'
},
contentWidthMin() {
return 55 + 'px'
},
// 动态计算宽度
boxWidth() {
return this.getPosition(3, 'horizontal')
},
// 动态计算高度
boxHeight() {
return this.getPosition(3, 'vertical')
},
// 计算左下位置
leftBottom() {
return this.getPosition(0, 'left', 'bottom')
},
// 计算右下位置
rightBottom() {
return this.getPosition(0, 'right', 'bottom')
},
// 计算左上位置
leftTop() {
return this.getPosition(0, 'left', 'top')
},
rightTop() {
return this.getPosition(0, 'right', 'top')
},
flexDirectionStart() {
return this.getPosition(1, 'vertical', 'top')
},
flexDirectionEnd() {
return this.getPosition(1, 'vertical', 'bottom')
},
horizontalLeft() {
return this.getPosition(2, 'horizontal', 'left')
},
horizontalRight() {
return this.getPosition(2, 'horizontal', 'right')
}
},
watch: {
pattern(newValue, oldValue) {
//console.log(JSON.stringify(newValue))
this.styles = Object.assign({}, this.styles, newValue)
}
},
created() {
this.isShow = this.show
if (this.top === 0) {
this.fabShow = true
}
// 初始化样式
this.styles = Object.assign({}, this.styles, this.pattern)
},
methods: {
_onClick() {
this.$emit('fabClick')
if (!this.popMenu) {
return
}
this.isShow = !this.isShow
},
open() {
this.isShow = true
},
close() {
this.isShow = false
},
/**
* 按钮点击事件
*/
_onItemClick(index, item) {
this.$emit('trigger', {
index,
item
})
},
/**
* 获取 位置信息
*/
getPosition(types, paramA, paramB) {
if (types === 0) {
return this.horizontal === paramA && this.vertical === paramB
} else if (types === 1) {
return this.direction === paramA && this.vertical === paramB
} else if (types === 2) {
return this.direction === paramA && this.horizontal === paramB
} else {
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
}
}
}
}
</script>
<style lang="scss" scoped>
.uni-fab {
position: fixed;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
z-index: 10;
}
.uni-cursor-point {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-fab--active {
opacity: 1;
}
.uni-fab--leftBottom {
left: 5px;
bottom: 20px;
/* #ifdef H5 */
left: calc(5px + var(--window-left));
bottom: calc(20px + var(--window-bottom));
/* #endif */
padding: 10px;
}
.uni-fab--leftTop {
left: 5px;
top: 30px;
/* #ifdef H5 */
left: calc(5px + var(--window-left));
top: calc(30px + var(--window-top));
/* #endif */
padding: 10px;
}
.uni-fab--rightBottom {
right: 5px;
bottom: 20px;
/* #ifdef H5 */
right: calc(5px + var(--window-right));
bottom: calc(20px + var(--window-bottom));
/* #endif */
padding: 10px;
}
.uni-fab--rightTop {
right: 5px;
top: 30px;
/* #ifdef H5 */
right: calc(5px + var(--window-right));
top: calc(30px + var(--window-top));
/* #endif */
padding: 10px;
}
.uni-fab__circle {
position: fixed;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
background-color: #3c3e49;
border-radius: 55px;
z-index: 11;
}
.uni-fab__circle--leftBottom {
left: 15px;
bottom: 30px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
bottom: calc(30px + var(--window-bottom));
/* #endif */
}
.uni-fab__circle--leftTop {
left: 15px;
top: 40px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
top: calc(40px + var(--window-top));
/* #endif */
}
.uni-fab__circle--rightBottom {
right: 15px;
bottom: 30px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
bottom: calc(30px + var(--window-bottom));
/* #endif */
}
.uni-fab__circle--rightTop {
right: 15px;
top: 40px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
top: calc(40px + var(--window-top));
/* #endif */
}
.uni-fab__circle--left {
left: 0;
}
.uni-fab__circle--right {
right: 0;
}
.uni-fab__circle--top {
top: 0;
}
.uni-fab__circle--bottom {
bottom: 0;
}
.uni-fab__plus {
font-weight: bold;
}
.fab-circle-v {
position: absolute;
width: 3px;
height: 31px;
left: 26px;
top: 12px;
background-color: white;
transform: rotate(0deg);
transition: transform 0.3s;
}
.fab-circle-h {
position: absolute;
width: 31px;
height: 3px;
left: 12px;
top: 26px;
background-color: white;
transform: rotate(0deg);
transition: transform 0.3s;
}
.uni-fab__plus--active {
transform: rotate(135deg);
}
.uni-fab__content {
/* #ifndef APP-NVUE */
box-sizing: border-box;
display: flex;
/* #endif */
flex-direction: row;
border-radius: 55px;
overflow: hidden;
transition-property: width, height;
transition-duration: 0.2s;
width: 55px;
border-color: #DDDDDD;
border-width: 1rpx;
border-style: solid;
}
.uni-fab__content--other-platform {
border-width: 0px;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.uni-fab__content--left {
justify-content: flex-start;
}
.uni-fab__content--right {
justify-content: flex-end;
}
.uni-fab__content--flexDirection {
flex-direction: column;
justify-content: flex-end;
}
.uni-fab__content--flexDirectionStart {
flex-direction: column;
justify-content: flex-start;
}
.uni-fab__content--flexDirectionEnd {
flex-direction: column;
justify-content: flex-end;
}
.uni-fab__item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
opacity: 0;
transition: opacity 0.2s;
}
.uni-fab__item--active {
opacity: 1;
}
.uni-fab__item-image {
width: 25px;
height: 25px;
margin-bottom: 3px;
}
.uni-fab__item-text {
color: #FFFFFF;
font-size: 12px;
}
.uni-fab__item--first {
width: 55px;
}
</style>

View File

@@ -0,0 +1,383 @@
<template>
<view>
<view :class="{
leftBottom: leftBottom,
rightBottom: rightBottom,
leftTop: leftTop,
rightTop: rightTop
}" v-if="leftBottom||rightBottom||leftTop||rightTop" class="fab-box fab">
<view :class="{
left: horizontal === 'left' && direction === 'horizontal',
top: vertical === 'top' && direction === 'vertical',
bottom: vertical === 'bottom' && direction === 'vertical',
right: horizontal === 'right' && direction === 'horizontal'
}" :style="{ 'background-color': styles.buttonColor }" class="fab-circle" @click="_onClick">
<view class="fab-circle-box" :class="{ active: isShow }">
<view class="fab-circle-v"></view>
<view class="fab-circle-h"></view>
</view>
</view>
<view :class="{
left: horizontal === 'left',
right: horizontal === 'right',
flexDirection: direction === 'vertical',
flexDirectionStart: flexDirectionStart,
flexDirectionEnd: flexDirectionEnd
}" :style="{ width: boxWidth, height: boxHeight, background: styles.backgroundColor }" class="fab-content">
<view v-if="flexDirectionStart || horizontalLeft" class="fab-item first" />
<view v-for="(item, index) in content" :key="index" :class="{ active: isShow }" :style="{
color: item.active ? styles.selectedColor : styles.color
}" class="fab-item" @click="_onItemClick(index, item)">
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="content-image" mode="widthFix" />
<text class="text">{{ item.text }}</text>
</view>
<view v-if="flexDirectionEnd || horizontalRight" class="fab-item first" />
</view>
</view>
</view>
</template>
<script>
import uniIcons from "../uni-icons/uni-icons.vue";
export default {
name: 'UniFab',
components:{
uniIcons
},
props: {
pattern: {
type: Object,
default () {
return {}
}
},
horizontal: {
type: String,
default: 'left'
},
vertical: {
type: String,
default: 'bottom'
},
direction: {
type: String,
default: 'horizontal'
},
content: {
type: Array,
default () {
return []
}
},
show: {
type: Boolean,
default: false
}
},
data() {
return {
fabShow: false,
flug: true,
isShow: false,
styles: {
color: '#3c3e49',
selectedColor: '#007AFF',
backgroundColor: '#fff',
buttonColor: '#3c3e49'
}
}
},
computed: {
contentWidth(e) {
return uni.upx2px((this.content.length + 1) * 110 + 20) + 'px'
},
contentWidthMin() {
return uni.upx2px(110) + 'px'
},
// 动态计算宽度
boxWidth() {
return this.getPosition(3, 'horizontal')
},
// 动态计算高度
boxHeight() {
return this.getPosition(3, 'vertical')
},
// 计算左下位置
leftBottom() {
return this.getPosition(0, 'left', 'bottom')
},
// 计算右下位置
rightBottom() {
return this.getPosition(0, 'right', 'bottom')
},
// 计算左上位置
leftTop() {
return this.getPosition(0, 'left', 'top')
},
rightTop() {
return this.getPosition(0, 'right', 'top')
},
flexDirectionStart() {
return this.getPosition(1, 'vertical', 'top')
},
flexDirectionEnd() {
return this.getPosition(1, 'vertical', 'bottom')
},
horizontalLeft() {
return this.getPosition(2, 'horizontal', 'left')
},
horizontalRight() {
return this.getPosition(2, 'horizontal', 'right')
}
},
watch: {
pattern(newValue, oldValue) {
//console.log(JSON.stringify(newValue))
this.styles = Object.assign({}, this.styles, newValue)
}
},
created() {
this.isShow = this.show
if (this.top === 0) {
this.fabShow = true
}
// 初始化样式
this.styles = Object.assign({}, this.styles, this.pattern)
},
methods: {
_onClick() {
this.isShow = !this.isShow
},
open() {
this.isShow = true
},
close() {
this.isShow = false
},
/**
* 按钮点击事件
*/
_onItemClick(index, item) {
this.$emit('trigger', {
index,
item
})
},
/**
* 获取 位置信息
*/
getPosition(types, paramA, paramB) {
if (types === 0) {
return this.horizontal === paramA && this.vertical === paramB
} else if (types === 1) {
return this.direction === paramA && this.vertical === paramB
} else if (types === 2) {
return this.direction === paramA && this.horizontal === paramB
} else {
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
}
}
}
}
</script>
<style lang="scss" scoped>
.uni-icon {
font-family: uniicons;
font-size: 30px;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.fab-box {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.fab-box.top {
width: 60rpx;
height: 60rpx;
right: 30rpx;
bottom: 60rpx;
border: 1px #5989b9 solid;
background: #6699cc;
border-radius: 10rpx;
color: #fff;
transition: all 0.3;
opacity: 0;
}
.fab-box.active {
opacity: 1;
}
.fab-box.fab {
z-index: 10;
}
.fab-box.fab.leftBottom {
left: 30rpx;
bottom: 60rpx;
}
.fab-box.fab.leftTop {
left: 30rpx;
top: 80rpx;
/* #ifdef H5 */
top: calc(80rpx + var(--window-top));
/* #endif */
}
.fab-box.fab.rightBottom {
right: 30rpx;
bottom: 60rpx;
}
.fab-box.fab.rightTop {
right: 30rpx;
top: 80rpx;
/* #ifdef H5 */
top: calc(80rpx + var(--window-top));
/* #endif */
}
.fab-circle {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 110rpx;
height: 110rpx;
background: #3c3e49;
/* background: #5989b9; */
border-radius: 50%;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
z-index: 11;
}
.fab-circle-box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transition: all 0.3s;
}
.fab-circle-v {
position: absolute;
width: 8rpx;
height: 60rpx;
left: 50%;
top: 50%;
margin: -30rpx 0 0 -4rpx;
background-color: white;
}
.fab-circle-h {
position: absolute;
width: 60rpx;
height: 8rpx;
left: 50%;
top: 50%;
margin: -4rpx 0 0 -30rpx;
background-color: white;
}
.fab-circle.left {
left: 0;
}
.fab-circle.right {
right: 0;
}
.fab-circle.top {
top: 0;
}
.fab-circle.bottom {
bottom: 0;
}
.fab-circle .uni-icon-plusempty {
color: #ffffff;
font-size: 80rpx;
transition: all 0.3s;
font-weight: bold;
}
.fab-circle-box.active {
transform: rotate(135deg);
font-size: 80rpx;
}
.fab-content {
background: #6699cc;
box-sizing: border-box;
display: flex;
border-radius: 100rpx;
overflow: hidden;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
width: 110rpx;
}
.fab-content.left {
justify-content: flex-start;
}
.fab-content.right {
justify-content: flex-end;
}
.fab-content.flexDirection {
flex-direction: column;
justify-content: flex-end;
}
.fab-content.flexDirectionStart {
flex-direction: column;
justify-content: flex-start;
}
.fab-content.flexDirectionEnd {
flex-direction: column;
justify-content: flex-end;
}
.fab-content .fab-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 110rpx;
height: 110rpx;
font-size: 24rpx;
color: #fff;
opacity: 0;
transition: opacity 0.2s;
}
.fab-content .fab-item.active {
opacity: 1;
}
.fab-content .fab-item .content-image {
width: 50rpx;
height: 50rpx;
margin-bottom: 5rpx;
}
.fab-content .fab-item.first {
width: 110rpx;
}
</style>

View File

@@ -0,0 +1,83 @@
{
"id": "uni-fab",
"displayName": "uni-fab 悬浮按钮",
"version": "1.1.0",
"description": "悬浮按钮 fab button ,点击可展开一个图标按钮菜单。",
"keywords": [
"uni-ui",
"uniui",
"按钮",
"悬浮按钮",
"fab"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

View File

@@ -0,0 +1,91 @@
## Fab 悬浮按钮
> **组件名uni-fab**
> 代码块: `uFab`
点击可展开一个图形按钮菜单
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 不建议动态修改属性,可能会耗损部分性能。
> - 展开菜单暂不支持字体图标,使用图片路径时建议使用绝对路径,相对路径可能会有问题。
> - 选中状态要通过自己控制,如果不希望有选中状态,不处理 `active` 即可。
> - 展开菜单建议最多显示四个,如果过多对于小屏手机可能会超出屏幕。
### 基本用法
`template` 中使用组件
```html
<template>
<view>
<uni-fab
:pattern="pattern"
:content="content"
:horizontal="horizontal"
:vertical="vertical"
:direction="direction"
@trigger="trigger"
></uni-fab>
</view>
</template>
```
## API
### Fab Props
| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| pattern | Object | - | 可选样式配置项 |
| horizontal| String | 'left' | 水平对齐方式。`left`:左对齐,`right`:右对齐 |
| vertical | String | 'bottom' | 垂直对齐方式。`bottom`:下对齐,`top`:上对齐 |
| direction | String | 'horizontal' | 展开菜单显示方式。`horizontal`:水平显示,`vertical`:垂直显示 |
| popMenu | Boolean | true | 是否使用弹出菜单 |
| content | Array | - | 展开菜单内容配置项 |
**pattern配置项**
| 参数 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| color | String | #3c3e49 | 文字默认颜色 |
| selectedColor | String | #007AFF | 文字选中时的颜色 |
| backgroundColor | String | #ffffff | 背景色 |
| buttonColor | String | #3c3e49 | 按钮背景色 |
**content配置项**
| 参数 | 类型 | 说明 |
| :-: | :-: | :-: | :-: |
| iconPath | String | 图片路径 |
| selectedIconPath | String | 选中后图片路径|
| text | String | 文字 |
| active | Boolean | 是否选中当前 |
### Fab Events
| 参数 | 类型 | 说明 |
| :-: | :-: | :-: |
| @trigger | Function | 展开菜单点击事件,返回点击信息|
| @fabClick | Function | 悬浮按钮点击事件 |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab](https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab)

View File

@@ -0,0 +1,10 @@
## 1.2.12021-08-24
- 新增 支持国际化
## 1.2.02021-07-30
- 组件兼容 vue3如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.82021-05-12
- 新增 组件示例地址
## 1.1.72021-03-30
- 修复 uni-load-more 在首页使用时h5 平台报 'uni is not defined' 的 bug
## 1.1.62021-02-05
- 调整为uni_modules目录规范

View File

@@ -0,0 +1,5 @@
{
"uni-load-more.contentdown": "Pull up to show more",
"uni-load-more.contentrefresh": "loading...",
"uni-load-more.contentnomore": "No more data"
}

View File

@@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

View File

@@ -0,0 +1,5 @@
{
"uni-load-more.contentdown": "上拉显示更多",
"uni-load-more.contentrefresh": "正在加载...",
"uni-load-more.contentnomore": "没有更多数据了"
}

View File

@@ -0,0 +1,5 @@
{
"uni-load-more.contentdown": "上拉顯示更多",
"uni-load-more.contentrefresh": "正在加載...",
"uni-load-more.contentnomore": "沒有更多數據了"
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,86 @@
{
"id": "uni-load-more",
"displayName": "uni-load-more 加载更多",
"version": "1.2.1",
"description": "LoadMore 组件,常用在列表里面,做滚动加载使用。",
"keywords": [
"uni-ui",
"uniui",
"加载更多",
"load-more"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "u"
}
}
}
}
}

View File

@@ -0,0 +1,70 @@
### LoadMore 加载更多
> **组件名uni-load-more**
> 代码块: `uLoadMore`
用于列表中,做滚动加载使用,展示 loading 的各种状态。
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 使用方式
在 ``template`` 中使用组件
```html
<uni-load-more :status="more"></uni-load-more>
```
## API
### LoadMore Props
|属性名 |类型 | 可选值 |默认值 |说明 |
|:-: |:-: |:-: |:-: |:-: |
|iconSize |Number |- |24 |指定图标大小 |
|status |String |more/loading/noMore |more |loading 的状态 |
|showIcon |Boolean|- |true |是否显示 loading 图标 |
|iconType |String |snow/circle/auto |auto |指定图标样式|
|color |String |- |#777777 |图标和文字颜色 |
|contentText|Object|- |{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}|各状态文字说明 |
#### Status Options
|参数名称 |说明 |
|:-: |:-: |
|more |loading前 |
|loading|loading前中 |
|more |没有更多数据 |
#### IconType Options
|参数名称 |说明 |
|:-: |:-: |
|snow |ios雪花加载样式 |
|circle |安卓环形加载样式 |
|auto |根据平台自动选择加载样式 |
> **说明**
> `iconType`为`snow`时,在`APP-NVUE`平台不可设置大小,在非`APP-NVUE`平台不可设置颜色
### 事件说明
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|clickLoadMore |点击加载更多时触发 |e.detail={status:'loading'}|
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/load-more/load-more](https://hellouniapp.dcloud.net.cn/pages/extUI/load-more/load-more)

View File

@@ -0,0 +1,20 @@
## 1.2.22021-09-10
- 优化 默认值修改为 0 颗星
## 1.2.12021-07-30
- 优化 vue3下事件警告的问题
## 1.2.02021-07-13
- 组件兼容 vue3如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.22021-05-12
- 新增 组件示例地址
## 1.1.12021-04-21
- 修复 布局变化后 uni-rate 星星计算不准确的 bug
- 优化 添加依赖 uni-icons, 导入 uni-rate 自动下载依赖
## 1.1.02021-04-16
- 修复 uni-rate 属性 margin 值为 string 组件失效的 bug
## 1.0.92021-02-05
- 优化 组件引用关系通过uni_modules引用组件
## 1.0.82021-02-05
- 调整为uni_modules目录规范
- 支持 pc 端

View File

@@ -0,0 +1,393 @@
<template>
<view>
<view
ref="uni-rate"
class="uni-rate"
>
<view
class="uni-rate__icon"
:class="{'uni-cursor-not-allowed': disabled}"
:style="{ 'margin-right': marginNumber + 'px' }"
v-for="(star, index) in stars"
:key="index"
@touchstart.stop="touchstart"
@touchmove.stop="touchmove"
@mousedown.stop="mousedown"
@mousemove.stop="mousemove"
@mouseleave="mouseleave"
>
<uni-icons
:color="color"
:size="size"
:type="isFill ? 'star-filled' : 'star'"
/>
<!-- #ifdef APP-NVUE -->
<view
:style="{ width: star.activeWitch.replace('%','')*size/100+'px'}"
class="uni-rate__icon-on"
>
<uni-icons
style="text-align: left;"
:color="disabled?'#ccc':activeColor"
:size="size"
type="star-filled"
/>
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view
:style="{ width: star.activeWitch}"
class="uni-rate__icon-on"
>
<uni-icons
:color="disabled?disabledColor:activeColor"
:size="size"
type="star-filled"
/>
</view>
<!-- #endif -->
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
/**
* Rate 评分
* @description 评分组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=33
* @property {Boolean} isFill = [true|false] 星星的类型,是否为实心类型, 默认为实心
* @property {String} color 未选中状态的星星颜色,默认为 "#ececec"
* @property {String} activeColor 选中状态的星星颜色,默认为 "#ffca3e"
* @property {String} disabledColor 禁用状态的星星颜色,默认为 "#c0c0c0"
* @property {Number} size 星星的大小
* @property {Number} value/v-model 当前评分
* @property {Number} max 最大评分评分数量,目前一分一颗星
* @property {Number} margin 星星的间距,单位 px
* @property {Boolean} disabled = [true|false] 是否为禁用状态,默认为 false
* @property {Boolean} readonly = [true|false] 是否为只读状态,默认为 false
* @property {Boolean} allowHalf = [true|false] 是否实现半星,默认为 false
* @property {Boolean} touchable = [true|false] 是否支持滑动手势,默认为 true
* @event {Function} change uniRate 的 value 改变时触发事件e={value:Number}
*/
export default {
name: "UniRate",
props: {
isFill: {
// 星星的类型,是否镂空
type: [Boolean, String],
default: true
},
color: {
// 星星未选中的颜色
type: String,
default: "#ececec"
},
activeColor: {
// 星星选中状态颜色
type: String,
default: "#ffca3e"
},
disabledColor: {
// 星星禁用状态颜色
type: String,
default: "#c0c0c0"
},
size: {
// 星星的大小
type: [Number, String],
default: 24
},
value: {
// 当前评分
type: [Number, String],
default: 0
},
modelValue: {
// 当前评分
type: [Number, String],
default: 0
},
max: {
// 最大评分
type: [Number, String],
default: 5
},
margin: {
// 星星的间距
type: [Number, String],
default: 0
},
disabled: {
// 是否可点击
type: [Boolean, String],
default: false
},
readonly: {
// 是否只读
type: [Boolean, String],
default: false
},
allowHalf: {
// 是否显示半星
type: [Boolean, String],
default: false
},
touchable: {
// 是否支持滑动手势
type: [Boolean, String],
default: true
}
},
data() {
return {
valueSync: "",
userMouseFristMove: true,
userRated: false,
userLastRate: 1
};
},
watch: {
value(newVal) {
this.valueSync = Number(newVal);
},
modelValue(newVal) {
this.valueSync = Number(newVal);
},
},
computed: {
stars() {
const value = this.valueSync ? this.valueSync : 0;
const starList = [];
const floorValue = Math.floor(value);
const ceilValue = Math.ceil(value);
for (let i = 0; i < this.max; i++) {
if (floorValue > i) {
starList.push({
activeWitch: "100%"
});
} else if (ceilValue - 1 === i) {
starList.push({
activeWitch: (value - floorValue) * 100 + "%"
});
} else {
starList.push({
activeWitch: "0"
});
}
}
return starList;
},
marginNumber() {
return Number(this.margin)
}
},
created() {
this.valueSync = Number(this.value||this.modelValue);
this._rateBoxLeft = 0
this._oldValue = null
},
mounted() {
setTimeout(() => {
this._getSize()
}, 100)
// #ifdef H5
this.PC = this.IsPC()
// #endif
},
methods: {
touchstart(e) {
// #ifdef H5
if( this.IsPC() ) return
// #endif
if (this.readonly || this.disabled) return
const {
clientX,
screenX
} = e.changedTouches[0]
// TODO 做一下兼容,只有 Nvue 下才有 screenX其他平台式 clientX
this._getRateCount(clientX || screenX)
},
touchmove(e) {
// #ifdef H5
if( this.IsPC() ) return
// #endif
if (this.readonly || this.disabled || !this.touchable) return
const {
clientX,
screenX
} = e.changedTouches[0]
this._getRateCount(clientX || screenX)
},
/**
* 兼容 PC @tian
*/
mousedown(e) {
// #ifdef H5
if( !this.IsPC() ) return
if (this.readonly || this.disabled) return
const {
clientX,
} = e
this.userLastRate = this.valueSync
this._getRateCount(clientX)
this.userRated = true
// #endif
},
mousemove(e) {
// #ifdef H5
if( !this.IsPC() ) return
if( this.userRated ) return
if( this.userMouseFristMove ) {
console.log('---mousemove----', this.valueSync);
this.userLastRate = this.valueSync
this.userMouseFristMove = false
}
if (this.readonly || this.disabled || !this.touchable) return
const {
clientX,
} = e
this._getRateCount(clientX)
// #endif
},
mouseleave(e) {
// #ifdef H5
if( !this.IsPC() ) return
if (this.readonly || this.disabled || !this.touchable) return
if( this.userRated ) {
this.userRated = false
return
}
this.valueSync = this.userLastRate
// #endif
},
// #ifdef H5
IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (let v = 0; v < Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
},
// #endif
/**
* 获取星星个数
*/
_getRateCount(clientX) {
this._getSize()
const size = Number(this.size)
if(size === NaN){
return new Error('size 属性只能设置为数字')
}
const rateMoveRange = clientX - this._rateBoxLeft
let index = parseInt(rateMoveRange / (size + this.marginNumber))
index = index < 0 ? 0 : index;
index = index > this.max ? this.max : index;
const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
let value = 0;
if (this._oldValue === index && !this.PC) return;
this._oldValue = index;
if (this.allowHalf) {
if (range > (size / 2)) {
value = index + 1
} else {
value = index + 0.5
}
} else {
value = index + 1
}
value = Math.max(0.5, Math.min(value, this.max))
this.valueSync = value
this._onChange()
},
/**
* 触发动态修改
*/
_onChange() {
this.$emit("input", this.valueSync);
this.$emit("update:modelValue", this.valueSync);
this.$emit("change", {
value: this.valueSync
});
},
/**
* 获取星星距离屏幕左侧距离
*/
_getSize() {
// #ifndef APP-NVUE
uni.createSelectorQuery()
.in(this)
.select('.uni-rate')
.boundingClientRect()
.exec(ret => {
if (ret) {
this._rateBoxLeft = ret[0].left
}
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
const size = ret.size
if (size) {
this._rateBoxLeft = size.left
}
})
// #endif
}
}
};
</script>
<style
lang="scss"
scoped
>
.uni-rate {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
line-height: 1;
font-size: 0;
flex-direction: row;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-rate__icon {
position: relative;
line-height: 1;
font-size: 0;
}
.uni-rate__icon-on {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
line-height: 1;
text-align: left;
}
.uni-cursor-not-allowed {
/* #ifdef H5 */
cursor: not-allowed !important;
/* #endif */
}
</style>

View File

@@ -0,0 +1,87 @@
{
"id": "uni-rate",
"displayName": "uni-rate 评分",
"version": "1.2.2",
"description": "Rate 评分组件,可自定义评分星星图标的大小、间隔、评分数。",
"keywords": [
"uni-ui",
"uniui",
"评分"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "u"
}
}
}
}
}

View File

@@ -0,0 +1,107 @@
## Rate 评分
> **组件名uni-rate**
> 代码块: `uRate`
> 关联组件:`uni-icons`
评分组件,多用于购买商品后,对商品进行评价等场景
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的使用说明,可以帮你避免一些错误。
> - 暂时不支持零星选择
> - 当前版本暂不支持修改图标,后续版本会继续优化
> - 绑定值推荐使用 `v-model` 的方式
> - 如需设置一个星星表示多分显示5个星星最高分10分。这种情况请在 change 事件监听中自行处理,获取到的值乘以你的基数就可以,默认组件是一星一分
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
## 基本用法
```html
<!-- 基本用法 -->
<!-- 需要在 script 中绑定 value 变量 -->
<uni-rate v-model="value" @change="onChange"/>
<!-- 不支持滑动手势选择评分 -->
<uni-rate :touchable="false" :value="5"/>
<!-- 设置尺寸大小 -->
<uni-rate :size="18" :value="5"/>
<!-- 设置评分数 -->
<uni-rate :max="10" :value="5" />
<!-- 设置星星间隔 -->
<uni-rate :value="4" :margin="20" />
<!-- 设置颜色 -->
<uni-rate :value="3" color="#bbb" active-color="red" />
<!-- 选择半星 -->
<uni-rate allow-half :value="3.5" />
<!-- 只读状态 -->
<uni-rate :readonly="true" :value="2" />
<!-- 禁用状态 -->
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
<!-- 未选中的星星为镂空状态 -->
<uni-rate :value="3" :is-fill="false" />
```
```javascript
export default {
components: {},
data() {
return {
value: 2
}
},
methods: {
onChange(e) {
console.log('rate发生改变:' + JSON.stringify(e))
}
}
}
```
## API
### Rate Props
属性名 | 类型 | 默认值 | 说明
:-: | :-: | :-: | :-:
value/v-model | Number | 0 | 当前评分
color | String | #ececec | 未选中状态的星星颜色
activeColor | String | #ffca3e | 选中状态的星星颜色
disabledColor | String | #c0c0c0 | 禁用状态的星星颜色
size | Number | 24 | 星星的大小
max | Number | 5 | 最大评分评分数量,目前一分一颗星
margin | Number | 0 | 星星的间距,单位 px
isFill | Boolean | true | 星星的类型,是否为实心类型
disabled | Boolean | false | 是否为禁用状态 (之前版本为已读状态,现更正为禁用状态)
readonly | Boolean | false | 是否为只读状态
allowHalf | Boolean | false | 是否展示半星
touchable | Boolean | true | 是否支持滑动手势
### Rate Events
事件称名 | 说明 | 返回参数
:-: | :-: | :-:
@change | 改变 value 的值返回 | e = { value:number }
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/rate/rate](https://hellouniapp.dcloud.net.cn/pages/extUI/rate/rate)

View File

@@ -1,3 +0,0 @@
iosProfile=/Users/WebTmm/Documents/苹果开发证书/链商星球/苹果分发证书/2.mobileprovision
ioscertFile=/Users/WebTmm/Documents/苹果开发证书/链商星球/苹果分发证书/证书.p12
ioscertPassword=0Q5HXGcBQJ8YMwxaFLGRyQ==

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -1,25 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<script>
var __UniViewStartTime__ = Date.now();
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title>View</title>
<link rel="stylesheet" href="view.css" />
</head>
<body>
<div id="app"></div>
<script src="__uniappes6.js"></script>
<script src="view.umd.min.js"></script>
<script src="app-view.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@@ -1 +0,0 @@
(function(e){function r(r){for(var n,l,i=r[0],p=r[1],a=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p[n]);f&&f(r);while(s.length)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var p=t[i];0!==o[p]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={"app-config":0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e["default"]}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this["webpackJsonp"]=this["webpackJsonp"]||[],p=i.push.bind(i);i.push=r,i=i.slice();for(var a=0;a<i.length;a++)r(i[a]);var f=p;t()})([]);

Some files were not shown because too many files have changed in this diff Show More