liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into test

Browse Source
This commit is contained in:
lifizer
2024-09-24 11:08:56 +08:00
parent a9e3ac2eda 787b2eada4
commit 6ce59471f3
46 changed files with 3164 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/order.js
+18
View File
@@ -160,4 +160,22 @@ export function orderVerific(verifyCode, isConfirm) {
// 延迟收货
export function orderDelay(uni) {
return request.post("/order/extendedDelivery", {uni})
}
/**
* 再买一单
* @param {*} params
* @returns
*/
export function aginConfirm(params) {
return request.post('/order/buyAgainConfirm', params)
}
/**
* 修改地址
* @param {*} params
* @returns
*/
export function editAddress(params) {
return request.post('/order/editAddress', params)
}
api/user.js
+18
View File
@@ -568,3 +568,21 @@ export function getUserPointBill(param) {
export function getUserSpreadRule(param) {
return request.get('/userSpreadRule', param, { login: false })
}
/**
* 我的足迹
* @param {*} params
* @returns
*/
export function getHistory(params) {
return request.get('/history/list', params)
}
/**
* 购物车猜你喜欢
* @param {*} params
* @returns
*/
export function getUserLike(params) {
return request.get('/cart/guessYouLike',params)
}
assets/css/style.less
+3 -3
View File
@@ -3461,10 +3461,10 @@ page {
}
.order-details .footer .bnt {
width: 1.76*100rpx;
height: 0.6*100rpx;
width: 1.36*100rpx;
height: 0.5*100rpx;
text-align: center;
line-height: 0.6*100rpx;
line-height: 0.5*100rpx;
border-radius: 0.5*100rpx;
color: #fff;
font-size: 0.27*100rpx;
assets/css/v12-style.less
+64 -10
View File
@@ -3,8 +3,8 @@
@dark-color: #333333;
@white-color: #fff;
@colors: #C52733, #333333, #fff, #666, #F0F0F0;
@classnames: primary, dark, white, secondary-dark, grey;
@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543;
@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow;
/*=====================================*/
each(@colors, {
@@ -59,13 +59,18 @@ each(@colors, {
margin-bottom: @baseNum;
}
.v12-ma-@{i} {
margin: @baseNum;
margin-left: @baseNum;
margin-right: @baseNum;
margin-bottom: @baseNum;
margin-top: @baseNum;
}
.v12-mx-@{i} {
margin: 0 @baseNum;
margin-left: @baseNum;
margin-right: @baseNum;
}
.v12-my-@{i} {
margin: @baseNum 0;
margin-bottom: @baseNum;
margin-top: @baseNum;
}
.v12-pt-@{i} {
padding-top: @baseNum;
@@ -80,13 +85,18 @@ each(@colors, {
padding-bottom: @baseNum;
}
.v12-pa-@{i} {
padding: @baseNum;
padding-top: @baseNum;
padding-bottom: @baseNum;
padding-right: @baseNum;
padding-left: @baseNum;
}
.v12-px-@{i} {
padding: 0 @baseNum
padding-right: @baseNum;
padding-left: @baseNum;
}
.v12-py-@{i} {
padding: @baseNum 0
padding-top: @baseNum;
padding-bottom: @baseNum;
}
.generateMarginAndPadding(@n, (@i + 1))
}
@@ -96,13 +106,21 @@ each(@colors, {
.generateRadius(@n, @i: 0) when (@i <= @n) {
@baseRadius: @i * 1rpx;
.v12-radius-@{i} {
border-radius: @baseRadius
border-radius: @baseRadius !important;
}
.generateRadius(@n, (@i + 1))
}
.generateRadius(100);
/*=========================================*/
.generateSpacing(@n, @i: 0) when(@i <= @n) {
@baseSpacing:@i * 1rpx;
.v12-spacing-@{i} {
letter-spacing: @baseSpacing !important;
}
.generateSpacing(@n, (@i + 1))
}
.generateSpacing(100);
/*====================flex 函数表达式=====================*/
.v12-d-flex{
@@ -123,21 +141,57 @@ each(@colors, {
display: flex;
align-items: end;
}
.v12-align-baseline{
display: flex;
align-items: baseline;
}
.v12-justify-center{
display: flex;
justify-content: center;
}
.v12-justify-around{
display: flex;
justify-content: space-around;
}
.v12-justify-between{
display: flex;
justify-content: space-between;
}
.v12-justify-start{
display: flex;
justify-content: flex-start;
}
.v12-justify-end{
display: flex;
justify-content: flex-end;
}
.v12-d-grid-columns-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.v12-text-right{
text-align: right;
}
.v12-text-left{
text-align: left;
}
.v12-text-center{
text-align: center;
}
.v12-btn{
width: 136rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
border-radius: 50rpx;
color: #fff;
font-size: 27rpx;
}
.v12-full-width{
width: 100%;
}
assets/script/global.js
+1
View File
@@ -63,6 +63,7 @@ export default {
date = date.replace(/-/g, '/');
let timestamp = new Date(date).getTime();
let now = new Date().getTime();
return timestamp - now;
},
components/Coupons.vue
+61 -31
View File
@@ -1,41 +1,46 @@
<template>
<view class="components-coupons">
<image
:src="data.image"
class="coupons__cover"
mode="widthFix"
/>
<view class="coupons__section flex jc-between ai-center">
<view>有效期至：
<text>{{ data.endTime }}</text>
</view>
<!-- status: 0-未使用，1-已使用，2-已过期 -->
<view
v-if="data.status === 2"
class="coupons__tag coupons__tag-expire"
>已到期</view>
<view
v-if="data.status === 0 && !radioModel"
class="coupons__tag coupons__tag-expire"
>不可用</view>
<view @click="selectCoupon">
<view class="image-wrap">
<image
:src="data.image"
class="coupons__cover"
mode="widthFix"
/>
<view @click="selectCoupon" class="check-radio" :class="{'v12-primary': data.checked}">
<radio
v-if="radioModel && data.status === 0"
:value="data.id"
:checked="data.checked"
color="#FF564A"
color="#C52733"
borderColor="#C52733"
/>
</view>
</view>
<view class="coupons__section flex jc-between ai-center">
<view>
<text class="v12-dark-text v12-font-weight-500 v12-font-28">有效期至：</text>
<text class='v12-primary-text v12-font-weight-500 v12-font-28'>{{ data.endTime }}</text>
</view>
<!-- status: 0-未使用，1-已使用，2-已过期 -->
<view
v-if="data.status === 2"
class="coupons__tag coupons__tag-expire v12-font-24"
>已到期</view>
<view
v-if="data.status === 0 && !radioModel"
class="coupons__tag coupons__tag-expire v12-font-24"
>不可用</view>
</view>
<view class="coupons__rules">
<view class="coupons__rules-title" @click="changeRules()">使用规则
<view class="coupons__rules-title v12-font-22" @click="changeRules()">使用规则
<image :class="{'open':isOpen}" :src="webUrl + '/20231125220409665027.png'" mode="scaleToFill"/>
</view>
<view
:class="isOpen ? 'auto-height' : ''"
class="coupon-html"
>
<rich-text :nodes="data.description" />
<rich-text class='v12-font-22 v12-dark1-text' :nodes="data.description" />
</view>
</view>
</view>
@@ -81,26 +86,51 @@ export default {
</script>
<style scoped lang="less">
.check-radio{
position: absolute;
bottom: 10px;
right: 16px;
height: 32rpx;
width: 32rpx;
border-radius: 50%;
border: 2px solid #C52733;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
radio {
margin-right: -6px;
}
}
.image-wrap{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
border-radius: 20rpx;
position: relative
}
.components-coupons {
width: 686rpx;
box-sizing: border-box;
border: 2rpx solid #FF564A;
border-radius: 16rpx;
overflow: hidden;
background: #fff;
image {
vertical-align: middle;
}
.coupons__cover {
width: 100%;
height: auto;
width: 600rpx;
height: 200rpx;
border-radius: 20rpx;
}
.coupons__section {
width: 100%;
box-sizing: border-box;
padding: 18rpx 20rpx 16rpx 16rpx;
padding: 18rpx 20rpx 16rpx 50rpx;
font-size: 32rpx;
line-height: 1;
@@ -130,7 +160,7 @@ export default {
}
.coupons__rules {
padding: 0 20rpx 20rpx 16rpx;
padding: 0 20rpx 20rpx 50rpx;
.coupons__rules-title {
color: #999999;
@@ -147,11 +177,11 @@ export default {
}
}
.coupon-html {
height: 80rpx;
overflow: hidden;
transition: all .3s;
transition: all .3s ease-in-out;
height: 60rpx;
&.auto-height {
height: auto;
height: auto !important;
}
}
}
components/CouponsPopup.vue
+97 -4
View File
@@ -1,15 +1,69 @@
<template>
<view class="popup-coupons">
<view class="popup-box">
<view class="popup-title bold tc">选择优惠券</view>
<view class="popup-title bold tc">优惠详情</view>
<SubSection
:current="current"
:can-use="canUse"
:not-use="notUse"
radio-model
@change="changeNav"
v-if="showTab"
/>
<view class="v12-radius-20 v12-white v12-align-center v12-justify-around v12-pa-3" v-else>
<view class="">
<view class="v12-text-center v12-font-28">
券后价
</view>
<view class="v12-mt-3 v12-text-center v12-red-text">
<text class="v12-font-28">
￥
</text>
<text class="v12-font-44">
{{ computePrice }}
</text>
</view>
</view>
<view class="v12-text-center v12-font-44">
=
</view>
<view class="">
<view class="v12-text-center v12-font-28">
当前售价
</view>
<view class="v12-mt-3 v12-text-center">
<text class="v12-font-28">
￥
</text>
<text class="v12-font-44">
{{ currentPrice }}
</text>
</view>
</view>
<view class="v12-text-center v12-font-44">
-
</view>
<view class="">
<view class="v12-text-center">
满减
</view>
<view class="v12-mt-3 v12-text-center v12-font-44">
{{ selectItem.couponPrice || 0 }}
</view>
</view>
</view>
<view class="list-box">
<view class="larg-one v12-mb-3">
<Coupons
:data="largOne"
:radio-model="current === 0"
@change="selectCoupon"
/>
</view>
<view class="v12-font-32 v12-dark-text v12-spacing-2 v12-font-bold v12-mb-3">
更多可使用券
</view>
<view
v-for="(item, index) in list"
:key="index"
@@ -19,6 +73,7 @@
:data="item"
:radio-model="current === 0"
@change="selectCoupon"
v-if="index !== maxIndex"
/>
</view>
<view
@@ -33,7 +88,7 @@
<view
v-if="current === 0"
:class="{ 'btn-disabled': current === 1 }"
class="btn-done bold flex jc-center ai-center"
class="btn-done bold flex jc-center ai-center v12-primary"
@click="setCoupon"
>
确定
@@ -55,13 +110,24 @@ export default {
usable: [],
unusable: []
}
},
showTab: {
type: Boolean,
default: true
},
currentPrice: {
default: 0,
type: Number
}
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
current: 0,
couponId: uni.getStorageSync('couponId') || 0
couponId: uni.getStorageSync('couponId') || 0,
selectItem: {
couponPrice: 0
},
}
},
computed: {
@@ -80,14 +146,39 @@ export default {
},
notUse() {
return this.twoList['unusable'].length
},
computePrice() {
return this.force2Decimal(this.currentPrice - this.selectItem.couponPrice) || this.currentPrice
},
maxIndex() {
const maxIndex = this.list.reduce((a, b, c) => {
return (this.list[a].couponPrice < b.couponPrice) ? c : a
}, 0)
return maxIndex
},
largOne() {
if(this.list[this.maxIndex]) {
this.selectCoupon(this.list[this.maxIndex].id)
uni.setStorageSync('couponId', this.list[this.maxIndex].id)
}
// this.$emit('max', this.list[this.maxIndex] || {})
return this.list[this.maxIndex] || {}
}
},
mounted() {
this.$emit('max', this.largOne)
},
methods: {
force2Decimal(value) {
return this.$force2Decimal(value);
},
changeNav(index) {
this.current = index
},
selectCoupon(id) {
this.couponId = id
this.selectItem = this.list.find(e => e.id === id) || {}
this.list.map(item => {
item.checked = id === item.id
})
@@ -95,7 +186,7 @@ export default {
setCoupon() {
if (this.current === 1) return
uni.setStorageSync('couponId', this.couponId)
this.$emit('change')
this.$emit('change', this.selectItem || {})
}
}
}
@@ -103,6 +194,7 @@ export default {
<style scoped lang="less">
.popup-coupons {
background: #F0F0F0;
.popup-box {
padding: 34rpx 32rpx;
}
@@ -116,6 +208,7 @@ export default {
.list-box {
max-height: 640rpx;
height: 640rpx;
margin-top: 32rpx;
overflow-y: auto;
}
components/OrderGoods.vue
+23 -13
View File
@@ -2,43 +2,43 @@
<view class="orderGoods">
<view
v-if="title.length > 0"
class="total acea-row row-middle"
class="v12-pa-3 acea-row row-middle"
>
<view
style="position: relative;"
class="acea-row row-left row-middle"
>
<image
<!-- <image
style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"
src="http://admin-api.xdd618.com/file/pic/20210807230759738342.png" mode=""
/>
<text class="title">
/> -->
<text class="title v12-font-32">
{{ title }}
</text>
</view>
</view>
<view
v-else
class="total"
class=""
>共{{ cartInfo.length }}件商品</view>
<view class="goodWrapper">
<view
v-for="cart in cartInfo"
:key="cart.id"
class="item acea-row row-between-wrapper"
style="flex-wrap: nowrap;"
class="item acea-row row-between-wrapper v12-mt-3"
style="flex-wrap: nowrap; border:none"
>
<view class="pictrue" style="margin-right: 20rpx;">
<image :src="cart.productInfo.image" class="image" />
</view>
<view class="text">
<view class="text" style="height: 100%;justify-content: space-between;">
<view class="acea-row row-between-wrapper">
<view class="name line1 one-t">{{ cart.productInfo.storeName }}</view>
<view class="name line1 one-t v12-font-bold">{{ cart.productInfo.storeName }}</view>
</view>
<view class="acea-row row-middle row-between attr-wrap">
<view
v-if="cart.productInfo.attrInfo"
class="attr more-t"
class="more-t v12-font-24 v12-secondary-dark-text"
>
规格：{{ cart.productInfo.attrInfo.sku }}
</view>
@@ -49,8 +49,12 @@
>评价</view>
</view>
<view class="money font-color-lightred acea-row row-between">
<text>￥{{ cart.truePrice }}</text>
<text class="num">x{{ cart.cartNum }}</text>
<view class="v12-font-bold">
<text class="v12-font-28 v12-dark-text">应付：</text>
<text class="v12-font-22">￥</text>
<text class="v12-primary-text v12-font-28">{{ cart.truePrice }}</text>
</view>
<text class="num v12-dark-text">x{{ cart.cartNum }}</text>
</view>
</view>
</view>
@@ -86,6 +90,12 @@ export default {
};
</script>
<style scoped>
.orderGoods{
border-radius: 20rpx 20rpx 0 0;
}
.item{
height: 160rpx !important;
}
.title{
font-size:26rpx;
color:#080F1A;
@@ -99,10 +109,10 @@ export default {
display: block;
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
}
.attr-wrap {
position: relative;
min-height: 80rpx;
margin-top: 8rpx;
align-items: flex-start;
}
components/ProductWindow.vue
+64 -23
View File
@@ -6,45 +6,46 @@
<image :src="attr.productSelect.image" class="image" />
</view>
<view class="text">
<view class="line1">{{ attr.productSelect.store_name }}</view>
<view class="money font-color-lightred">
<view class="money font-color-lightred v12-font-">
￥
<text class="num">{{ attr.productSelect.price }}</text>
<text class="stock">库存: {{ attr.productSelect.stock }}</text>
<text class="num v12-font-40">{{ attr.productSelect.price }}</text>
<text class="v12-ml-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">￥</text>
<text class="v12-mr-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">{{ attr.productSelect.otPrice }}</text>
<text class="v12-white-text v12-red v12-font-22 v12-radius-40 v12-px-1 v12-font-weight-400">会员价</text>
<!-- <text class="stock">库存: {{ attr.productSelect.stock }}</text> -->
</view>
<view class="more-t">{{ attr.productSelect.store_name }}</view>
</view>
<view class="iconfont icon-guanbi" @click="closeAttr"></view>
</view>
<view class="productWinList">
<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
<view class="title">{{ item.attrName }}</view>
<view class="listn acea-row row-middle">
<view class="listn acea-row v12-justify-start">
<view
v-for="(itemn, indexn) in item.attrValue"
:key="indexn"
:class="{
'on': item.index == indexn,
'actived': item.index == indexn,
'disabled': getAttrItemData(itemn.attr).stock === 0
}"
class="itemn"
class="itemn v12-radius-40"
@click="tapAttr(indexw, indexn, itemn)"
>
{{ itemn.attr }}
<text
v-if="getAttrItemData(itemn.attr).stock === 0"
class="tag"
>缺货</text>
<text v-if="getAttrItemData(itemn.attr).stock === 0" class="less-tag" style="color: #fff !important;">缺货</text>
</view>
</view>
</view>
</view>
<view class="cart">
<view class="title">数量</view>
<view class="cart v12-justify-between v12-align-center">
<view class="titlev12-dark-text f12-font-32">购买数量</view>
<view class="carnum acea-row row-left">
<view class="item reduce" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</view>
<view class="item num">{{ cartNum }}</view>
<view style="border-radius: 40rpx 0rpx 0rpx 40rpx" class="cart-btn item reduce v12-font-36 v12-font-bold v12-white-text v12-dark1 v12-dark1-border" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</view>
<view class="item v12-font-36 v12-font-bold v12-dark-text cart-btn">{{ cartNum }}</view>
<view
class="item plus"
style="border-radius:0 40rpx 40rpx 0"
class="item plus v12-font-bold v12-white-text v12-primary v12-primary-border v12-font-36 cart-btn"
:class="
cartNum >= attr.productSelect.stock
? 'on'
@@ -64,7 +65,11 @@ export default {
props: {
attr: {
type: Object,
default: () => {}
default: () => {
return {
productAttr: []
}
}
},
// 使用字符串再转成对象的原因是，当key='2.5g'时，会变成key='2'，导致数据丢失
productValueStr: {
@@ -98,12 +103,18 @@ export default {
this.$emit("changeFun", { action: "ChangeCartNum", value: 1 })
},
getAttrItemData(attr) {
let result = {}
this.productValueArr.map(item => {
if (item.attrItemkey === attr) {
result = item
}
})
let result = {
stock: 0
}
if (this.attr.productAttr.length === 1) {
this.productValueArr.map(item => {
if (item.attrItemkey === attr) {
result = item
}
})
} else {
result.stock = 1
}
return result
},
tapAttr: function(indexw, indexn, itemn) {
@@ -141,3 +152,33 @@ export default {
}
}
</script>
<style scope>
.itemn{
margin: 28rpx 0 0 34rpx !important;
width: auto;
}
.money{
margin-top: 0 !important
}
.actived{
border-color: #C52733 !important;
color: #fff !important;
background: #C52733
}
.cart-btn{
height:52rpx !important;
width:52rpx !important
}
.less-tag{
position: absolute;
background: #FF5562;
border-radius: 8rpx;
height: 38rpx;
line-height: 38rpx;
right: -15px;
top: -10px;
padding: 0 3px;
font-size: 24rpx;
font-weight:400
}
</style>
components/ServiceWin.vue
+54
View File
@@ -0,0 +1,54 @@
<template>
<view class="">
<u-popup :show="show" @close="close" @open="open" closeable>
<view class="v12-px-3">
<view class="v12-text-center v12-font-32 v12-py-3 v12-secondary-dark-text">
服务说明
</view>
<view class="wrap v12-dark-text">
<view class="service-title">
<text class="v12-dark-text v12-font-32">
售后服务
</text>
</view>
<view class="">
<text class="v12-font-28 v12-font-bold">
{{ info }}
</text>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
props: {
info: ''
},
data() {
return {
show:false
}
},
methods: {
close() {
this.show = false
this.$emit('close')
},
open() {
this.show = true
this.$emit('open')
}
}
}
</script>
<style>
.wrap{
background: rgba(197,39,51,0.1);
border-radius: 16rpx;
padding: 20rpx;
}
</style>
components/SubSection.vue
+14 -6
View File
@@ -38,14 +38,15 @@ export default {
<template>
<view class="sub-section flex">
<view class="sub-section__item flex jc-center ai-center" :class="{'sub-section__active':index===0}"
<view class="sub-section__item flex jc-center ai-center"
@click="change(0)">
可使用 ({{ canUse }})
</view>
<view class="sub-section__item flex jc-center ai-center" :class="{'sub-section__active':index===1}"
<view class="sub-section__item flex jc-center ai-center"
@click="change(1)">
{{radioModel?'不可用':'已到期'}} ({{ notUse }})
</view>
<view class="sub-section__active" :style="{left: (80 + index * 360) + 'rpx'}"></view>
</view>
</template>
@@ -54,20 +55,27 @@ export default {
width: 686rpx;
height: 80rpx;
box-sizing: border-box;
border: 2rpx solid #FF564A;
border-radius: 4rpx;
border-radius: 20rpx;
font-size: 32rpx;
overflow: hidden;
position: relative;
.sub-section__item {
width: 50%;
background: #FFFFFF;
color: #333333;
font-weight: bold;
position: relative;
}
.sub-section__active {
background: #FF564A;
color: #FFFFFF;
position: absolute;
width: 140rpx;
height: 8rpx;
background: linear-gradient(to right, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
border-radius: 0rpx 0rpx 26rpx 26rpx;
bottom: (80 - 34) / 2 * 1rpx;
transition: left ease-in-out 0.3s;
}
}
</style>
components/UserEvaluation.vue
+14 -3
View File
@@ -11,11 +11,14 @@
</view>
<view class="acea-row row-middle">
<view class="name line1">{{ item.nickname }}</view>
<view class="start" :class="'star' + item.star"></view>
</view>
</view>
<view class="time">{{ item.createTime }} {{ item.sku||'' }}</view>
<view class="evaluate-infor">{{ item.comment }}</view>
<view class="v12-px-4">
<view class="v12-secondary-dark-text v12-font-24 attr-bg"> {{ item.sku }}</view>
<view class="start" :class="'star' + item.star"></view>
</view>
<!-- <view class="time">{{ item.createTime }} {{ item.sku||'' }}</view> -->
<view class="evaluate-infor v12-font-24">{{ item.comment }}</view>
<view class="imgList acea-row">
<view v-if="item.video" class="pictrue">
<video
@@ -67,3 +70,11 @@ export default {
}
};
</script>
<style lang="less" scoped>
.attr-bg{
background: rgba(197,39,51,0.1);
padding: 7rpx 5px;
width: fit-content;
border-radius: 12rpx;
}
</style>
components/xdd-tabbar/index.vue
+13
View File
@@ -10,6 +10,10 @@
:src="webUrl + '/home/tabbar-center.png'"
class="img"
/>
<view
:class="currIndex === 4 ? 'curr' : ''"
class="name"
>寻趣味</view>
</view>
<view class="tabbar-list">
<view
@@ -132,6 +136,15 @@ export default {
width: 136rpx;
height: 136rpx;
}
.name {
text-align: center;
font-size: 24rpx;
color: #9a9a9a;
transform: translateY(-4rpx);
&.curr {
color: #C52733;
}
}
}
.tabbar-list {
position: relative;
components/yzc-paykeyboard/yzc-paykeyboard.vue
+1 -1
View File
@@ -100,7 +100,7 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
input {
display: none;
}
manifest.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name" : "地标文化特产",
"appid" : "__UNI__281C173",
"appid" : "__UNI__7880B21",
"description" : "",
"versionName" : "4.0.0",
"versionCode" : 4,
pages.json
+20 -5
View File
@@ -139,6 +139,13 @@
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/shop/GoodsCon/qualifications",
"style": {
"navigationBarTitleText": "商家资质",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/user/address/AddAddress/index",
"style": {
@@ -201,6 +208,14 @@
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "pages/user/History/index",
"style": {
"navigationBarTitleText": "商品足迹",
"navigationBarBackgroundColor": "#FFFFFF",
"enablePullDownRefresh": false
}
},
{
"path": "pages/user/UserBill/index",
"style": {
@@ -574,33 +589,33 @@
{
"path": "views/famousList",
"style": {
"navigationBarTitleText": "千县名品"
"navigationBarTitleText": "寻迹千县"
}
},
{
"path": "views/famousQianxian",
"style": {
"navigationBarTitleText": "千县名品"
"navigationBarTitleText": "寻迹千县"
}
},
{
"path": "views/famousQianxianShop",
"style": {
"navigationBarTitleText": "千县名品",
"navigationBarTitleText": "寻迹千县",
"navigationStyle": "custom"
}
},
{
"path": "views/famousQianxianTheme",
"style": {
"navigationBarTitleText": "千县名品",
"navigationBarTitleText": "寻迹千县",
"navigationStyle": "custom"
}
},
{
"path": "views/famousQianxianVillageShop",
"style": {
"navigationBarTitleText": "千县名品",
"navigationBarTitleText": "寻迹千县",
"navigationStyle": "custom"
}
},
pages/authorization/index.vue
+142 -63
View File
@@ -1,6 +1,6 @@
<template>
<view class="pages-auth">
<view class="tip-1">为了提供更优质的服务，需要获取</view>
<view class="pages-auth v12-justify-between v12-flex-column">
<!-- <view class="tip-1">为了提供更优质的服务，需要获取</view>
<view class="tip-2">您的头像、昵称</view>
<view class="wechat flex jc-between ai-center">
@@ -12,18 +12,9 @@
</view>
</view>
<image class="select" :src="webUrl+'/20220613104953149068.png'" mode="scaleToFill"/>
</view>
</view> -->
<view class="agree-box">
<checkbox-group @change="changeAgree">
<label>
<checkbox value="yes" style="transform:scale(0.8)"/>
</label>
<text @click="changeShow">我已阅读并同意
<text class="btn-show">《用户服务协议及隐私政策》</text>
</text>
</checkbox-group>
</view>
<view class="dialog-mask" v-if="show">
<view class="dialog-body">
@@ -40,27 +31,67 @@
<view class="dialog-mask" v-if="showFillOut">
<view class="dialog-fill flex flex-col ai-center">
<view class="title bold">请完善您的信息</view>
<button
class="avatar-wrapper"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image
:src="avatarUrl"
class="avatar"
/>
</button>
<input
type="nickname"
maxlength="12"
class="input-wrapper"
placeholder="请输入昵称"
@input="inputName"
@confirm="inputName"
@blur="inputName"
/>
<view class="input-wrapper">
<!-- <view class="title bold">请完善您的信息</view> -->
<view class="v12-align-center v12-justify-start v12-py-4" style="width:550rpx">
<view class="v12-mr-3">
<image class="app-logo__image--inner" :src="webUrl+'/orderIcon/applogo.png'" mode="aspectFit|aspectFill|widthFix" lazy-load="true"></image>
</view>
<view class="v12-dark-text v12-font-bold">
<text class="v12-font-40">
地标文化特产
</text>
<text class="v12-mx-1">
|
</text>
<text class="v12-font-24">
申请使用
</text>
</view>
</view>
<view class="v12-dark-text v12-font-40 v12-mt-3 v12-font-bold" style="width:550rpx">
获取你的昵称、头像
</view>
<view class="v12-align-center v12-justify-between v12-mb-3 v12-mt-6" style="width:550rpx">
<view class="v12-align-center">
<view class="v12-dark-text v12-mr-3">
头像
</view>
<button
class="avatar-wrapper v12-ma-0"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image
:src="avatarUrl"
class="avatar"
/>
</button>
</view>
<view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="v12-align-center v12-justify-between v12-my-4" style="width:550rpx">
<view class="v12-align-center">
<view class="v12-dark-text v12-mr-3">
昵称
</view>
<input
type="nickname"
maxlength="12"
class="input-wrapper "
placeholder="请填写您的昵称"
v-model="nickname"
@input="inputName"
@confirm="inputName"
@blur="inputName"
/>
</view>
<view>
<u-icon name="close" @click="clearName"></u-icon>
</view>
</view>
<!-- <view class="input-wrapper">
<picker
:value="form.birthday"
mode="date"
@@ -69,8 +100,8 @@
>
{{ form.birthday || '请选择出生日期' }}
</picker>
</view>
<view class="gender-row">
</view> -->
<!-- <view class="gender-row">
性别：
<u-radio-group
v-model="form.gender"
@@ -88,14 +119,42 @@
label="女"
/>
</u-radio-group>
</view> -->
<view class="v12-justify-between v12-py-6 " style="width: 550rpx">
<view class="v12-primary-border v12-primary v12-white-text v12-btn v12-px-8 v12-py-1" @click="onSubmit">允许</view>
<view class="v12-dark-border v12-dark-text v12-btn v12-px-8 v12-py-1" @click="back">拒绝</view>
</view>
<view class="btn-submit" @click="onSubmit">确认</view>
</view>
</view>
<view class="app-logo v12-align-center v12-flex-column">
<image class="app-logo__image" :src="webUrl+'/orderIcon/applogo.png'" mode="aspectFit|aspectFill|widthFix" lazy-load="true"></image>
<view class="v12-mt-3 v12-font-32 v12-dark-text v12-font-weight-600">发现家乡好物</view>
</view>
<view class="btn-box">
<button class="btn-yes" type="default" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">同意</button>
<button class="btn-no" type="default" @tap="back">拒绝</button>
<button class="btn-yes v12-primary" type="mini" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">快捷登录</button>
<!-- <button class="btn-no" type="default" @tap="back">拒绝</button> -->
</view>
<view class="agree-box v12-align-center">
<u-checkbox-group
@change="changeAgree"
v-model="isAgree"
>
<u-checkbox
activeColor="#C52733"
size="16"
name="yes"
>
</u-checkbox>
</u-checkbox-group>
<text @click="changeShow">我已阅读并同意
<text class="btn-show">《用户服务协议及隐私政策》</text>
</text>
<!-- <checkbox-group @change="changeAgree">
<label>
<checkbox value="yes" style="transform:scale(0.6)" iconColor="#C52733" />
</label>
</checkbox-group> -->
</view>
</view>
</template>
@@ -114,7 +173,7 @@ export default {
authorize: false,
canIUseGetUserProfile: false,
agreeInfo: {},
isAgree: false,
isAgree: [],
show: false,
showFillOut: false,
nickname: '',
@@ -150,7 +209,10 @@ export default {
this.show=!this.show;
},
changeAgree(event) {
this.isAgree = event.detail.value.length > 0
this.isAgree = event
},
clearName() {
this.nickname = ''
},
toLogin() {
this.$yrouter.push({
@@ -176,7 +238,7 @@ export default {
})
},
getUserInfoProfile() {
if (!this.isAgree) {
if (!this.isAgree[0]) {
uni.showToast({
title: "请先阅读并同意《用户服务协议及隐私政策》",
icon: "none",
@@ -282,10 +344,20 @@ export default {
}
</script>
<style lang="scss">
<style lang="less">
.app-logo{
margin-top: 70rpx;
}
.app-logo__image--inner{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.pages-auth {
padding: 148rpx 48rpx;
padding: 148rpx 48rpx;
height: 100vh;
box-sizing: border-box;
.tip-1 {
font-size: 28rpx;
line-height: 40rpx;
@@ -329,12 +401,12 @@ export default {
}
.agree-box {
margin: 200rpx 0 60rpx;
// margin: 200rpx 0 60rpx;
font-size: 28rpx;
color: #666;
color: #333;
padding: 0 20rpx;
.btn-show {
color: #000;
color: #4099FF;
}
}
@@ -352,7 +424,7 @@ export default {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 630rpx;
width: 686rpx;
height: 70vh;
box-sizing: border-box;
padding: 60rpx;
@@ -385,7 +457,7 @@ export default {
transform: translate(-50%, -50%);
box-sizing: border-box;
overflow: hidden;
width: 516rpx;
width: 686rpx;
border-radius: 24rpx;
background: #fff;
@@ -397,15 +469,14 @@ export default {
}
.avatar-wrapper {
width: 180rpx;
height: 180rpx;
margin-top: 38rpx;
width: 80rpx;
height: 80rpx;
padding: 0;
background: none;
.avatar {
width: 180rpx;
height: 180rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
}
@@ -415,13 +486,13 @@ export default {
}
.input-wrapper {
width: 360rpx;
height: 72rpx;
margin-top: 32rpx;
background: rgba(248, 249, 251, 1);
color: #999;
font-size: 32rpx;
text-align: center;
text-align: left;
border-radius: 40rpx;
padding: 0 20rpx;
}
.gender-row {
display: flex;
@@ -448,9 +519,10 @@ export default {
}
.btn-box {
width: 338rpx;
margin: 0 auto;
// width: 338rpx;
// margin: 0 auto;
padding: 0 20rpx;
padding-bottom: 340rpx;
button::after {
border: none;
}
@@ -461,8 +533,10 @@ export default {
}
.btn-yes {
background: #FF564A;
color: #fff;
width: 100%;
border-radius: 40rpx;
letter-spacing: 1px;
}
.btn-no {
@@ -472,4 +546,9 @@ export default {
}
}
}
.app-logo__image{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
</style>
pages/cart.vue
+243 -15
View File
@@ -6,23 +6,92 @@
class="pages-cart tabbar-page"
>
<u-navbar
:left-icon="selectCount > 0 ? 'trash' : ''"
:left-icon="selectCount > 0 ? '' : ''"
title="购物车"
fixed
@leftClick="remove"
/>
<view v-if="isLoad">
<view v-if="isLoad" :style="{paddingBottom: list.length > 0 ? '120rpx;' : ''}" class="list-wrap">
<view class="v12-justify-between v12-px-2">
<view class="v12-font-28 v12-dark-text v12-align-center" @click="show = true">
<image :src="webUrl+'/orderIcon/map.png'" style="width: 30rpx;height: 30rpx" class="v12-mr-1"/>
<text>{{ addressInfo.city }}</text>
<view class="v12-ml-1" style="margin-top: 2px;">
<u-icon name="arrow-down"></u-icon>
</view>
</view>
<view class="v12-font-28 v12-font-bold v12-dark-text" @click="editCart">{{ isEdit ? '完成' : '管理' }}</view>
</view>
<view
v-if="list.length === 0"
class="tc"
style="margin-top: 300rpx"
class="tc v12-my-6"
>
<image
:src="$VUE_APP_RESOURCES_URL + '/20240106211138206789.png'"
style="width: 420rpx;height: 418rpx"
:src="$VUE_APP_RESOURCES_URL + '/orderIcon/购物车2.png'"
style="width: 294rpx;height: 354rpx"
mode="scaleToFill"
/>
</view>
<view v-if="list.length === 0">
<view class="v12-px-14">
<u-divider
text=" · 猜你喜欢 · "
textColor="#333"
lineColor="#333"
textPosition="center"
></u-divider>
</view>
<view class="userlike-wrap">
<view
v-for="(item, index) in userLikeList"
:key="index"
@click="goGoodsCon(item)"
class="v12-radius-20 v12-white v12-mb-3 like-card"
>
<view class="img-wrap">
<image :src="item.image" class="img"></image>
<image
v-if="item.isOldBrand"
:src="webUrl + '/home/old-mark.png'"
class="mark-img"
/>
<image
v-if="item.isLandmarkGoods"
:src="webUrl + '/home/mark-land.png'"
class="mark-img"
/>
<image
v-if="item.isCountyFamous"
:src="webUrl + '/home/qixian-mark.png'"
class="mark-img"
/>
</view>
<view class="info-wrap v12-pa-2">
<view class="more-t v12-font-28 v12-dark-text v12-mb-2">
{{ item.storeName }}
</view>
<view v-if="item.bestContent" class="more-t v12-mb-2 v12-font-24 v12-yellow-text v12-font-weight-300">
{{ item.bestContent }}
</view>
<view class="v12-align-center v12-primary-text v12-font-24 v12-mb-2" v-if="item.couponName">
<view class="v12-primary-border v12-radius-8 v12-px-1">券</view>
<view class="v12-primary-border v12-radius-8 v12-px-1">{{ item.couponName }}</view>
</view>
<view class="v12-justify-between v12-align-center">
<view class="v12-font-40 v12-font-bold v12-primary-text">
<text class="">￥</text>
<text class="price-txt price-red">{{ item.price }}</text>
</view>
<view class="btn">
<image
:src="webUrl + '/home/icon-cart.png'"
class="img-icon"
/>
</view>
</view>
</view>
</view>
</view>
</view>
<view
v-for="(item, index) in list"
:key="index"
@@ -30,12 +99,12 @@
>
<view class="flex jc-between">
<view class="flex ai-center mer-left">
<CheckboxIcon
<!-- <CheckboxIcon
:default-state="item['state']"
:mark="[index]"
style="margin-right: 24rpx;"
@change="onChange"
/>
/> -->
<image
:src="item['merAvatar']"
class="store-cover"
@@ -141,7 +210,7 @@
</view>
</view>
</view>
<view class="footer-fixed flex jc-between ai-center">
<view class="footer-fixed flex jc-between ai-center" v-if="list.length > 0">
<view style="margin-left: 32rpx;">
<CheckboxIcon
style="margin-right: 24rpx;"
@@ -151,13 +220,20 @@
/>
<text class="v12-dark-text v12-font-32 v12-font-bold">全选({{ selectCount }})</text>
</view>
<view class="flex ai-center">
<view class="flex ai-center" v-if="!isEdit">
<view >
<text class="v12-font-24 v12-dark-text v12-font-weight-550"> 合计:</text>
<text class="v12-font-22 v12-primary-text v12-font-bold">￥</text>
<text class="v12-font-26 v12-primary-text v12-font-bold">{{ total }}</text>
</view>
<view class="btn-submit v12-mx-3 bold flex jc-center ai-center v12-radius-80 v12-primary" @click="submit">结算</view>
<view class="btn-submit v12-mx-3 flex jc-center ai-center v12-radius-80 v12-primary" @click="submit">结算</view>
</view>
<view class="flex ai-center" v-else>
<view @click="clearCart" class="v12-justify-between v12-align-center">
<view style="margin-top: 1px"><u-icon name="trash"></u-icon> </view>
<view>清空</view>
</view>
<view @click="remove" class="btn-submit v12-mx-3 flex jc-center ai-center v12-radius-80 v12-primary">删除</view>
</view>
</view>
<view
@@ -225,11 +301,40 @@
v-else
:show-avatar="false"
/>
<u-popup :show="show " @close="closePopup" closeable>
<view class="v12-secondary-dark-text v12-font-32 v12-text-center v12-py-4">收货地址</view>
<view v-if="addressInfo">
<view class="v12-px-3 v12-mb-3 v12-font-32 v12-justify-start v12-align-center">
<view style="opacity: 0; width: 28px">
<image :src="webUrl+'/orderIcon/map.png'" style="width: 30rpx;height: 30rpx" class="v12-mr-1"/>
</view>
<view>收货人：{{ addressInfo.realName }} {{ addressInfo.phone }}</view>
</view>
<view class="v12-px-3 v12-mb-3 v12-font-28 v12-justify-between v12-align-start">
<view style="width: 30px;">
<image :src="webUrl+'/orderIcon/map.png'" style="width: 30rpx;height: 30rpx" class="v12-mr-1"/>
</view>
<view style="margin-bottom: 4px;width: 100%" class="more-t v12-text-left">{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.district }}{{ addressInfo.detail }}</view>
<view style="width: 50px;" @click="editAddress">
<image :src="webUrl+'/orderIcon/编辑.png'" style="width: 30rpx;height: 30rpx" class="v12-mr-1"/>
</view>
</view>
</view>
<view v-else>
<view class="v12-font-28 v12-pa-3 v12-secondary-dark-text ">尚未设置收货地址!</view>
</view>
<view class=" v12-px-3 v12-mb-3">
<view class="v12-py-2 v12-primary-text v12-font-28 v12-radius-60 v12-text-center plus-btn" @click="addNewAddress">+ 添加新地址</view>
</view>
</u-popup>
<xdd-tabbar :curr-index="2" />
</view>
</template>
<script>
import XddTabbar from '@/components/xdd-tabbar'
import {getAddressList, getUserLike} from "@/api/user";
import {
changeCartNum,
getCartGroup,
@@ -247,6 +352,8 @@ export default {
mixins: [pageListenMixins],
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
show: false,
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
isLoad: false,
list: [],
@@ -258,7 +365,11 @@ export default {
productValueArr: []
},
showAttr: false,
pageKeyId: Object.freeze('landmarkGoodsIndex')
pageKeyId: Object.freeze('landmarkGoodsIndex'),
isEdit: false,
addressList:[],
addressInfo: {},
userLikeList: []
}
},
computed: {
@@ -284,7 +395,15 @@ export default {
created() {
this.getCart()
},
onLoad() {
this.getAddress()
},
onShow() {
this.isEdit = false
uni.$on('chooseAddress', (res) => {
this.addressInfo = res;
this.$forceUpdate()
})
if (!this.isLoad) {
return
}
@@ -295,12 +414,76 @@ export default {
this.pageToHideHandle()
},
methods: {
goGoodsCon(item) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: item.productId
}
})
},
closePopup() {
this.show = false
},
editAddress() {
this.$yrouter.push({
path: "/pages/user/address/AddressManagement/index",
query: {
choosMode: 1
}
});
},
addNewAddress() {
this.$yrouter.push({
path: "/pages/user/address/AddAddress/index",
query: {
choosMode: 1
}
});
},
getAddress() {
getAddressList({page: 1, limit: 9999}).then(res => {
this.addressList = res.data
this.addressInfo = res.data.find(e => e.isDefault == 1) || res.data[0] && res.data[0] || null
});
},
clearCart() {
const ids = this.list.map(l => {
return l.carts.map(g => g.id)
}).flat()
uni.showModal({
title: '确定清空购物车吗?',
content: '',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success: async (result) => {
if (result.confirm) {
uni.showLoading()
postCartDel(ids).then(res => {
const { success } = res
if (success) {
this.getCart()
}
}).finally(() => {
uni.hideLoading()
})
}
}
})
},
editCart() {
this.isEdit = !this.isEdit
},
async getCart() {
const res = await getCartGroup()
if (res.success) {
this.isLoad = true
this.list = res.data['valid']
this.handleAll(false)
const _res = await getUserLike()
this.userLikeList = _res.data
}
},
handleAll(state) {
@@ -554,7 +737,7 @@ export default {
const ids = this.handleIds()
if (ids.length === 0) return
uni.navigateTo({
url: '/pages/order/OrderSubmission/index?id=' + ids.join(',')
url: '/pages/order/OrderSubmission/index?id=' + ids.join(',') + '&address=' + JSON.stringify(this.addressInfo)
})
}
}
@@ -562,6 +745,17 @@ export default {
</script>
<style scoped lang="less">
.img-icon{
width: 48rpx;
height: 48rpx;
}
.list-wrap{
height: calc(100vh - 410rpx);
overflow: auto;
}
.plus-btn{
background: rgba(197,39,51,0.2);
}
.v12-minus-btn{
border-radius: 28rpx 0rpx 0rpx 28rpx;
border: 1px solid #E6E6E6;
@@ -678,11 +872,15 @@ view {
.footer-fixed {
position: fixed;
left: 0;
bottom: 180rpx;
bottom: 200rpx;
width: 100vw;
height: 100rpx;
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
background: #FFFFFF;
width: 708rpx;
right: 0;
margin: auto;
border-radius: 26rpx;
.btn-submit {
width: 196rpx;
@@ -818,4 +1016,34 @@ view {
.tabbar-page {
padding: 0 0 180rpx 0;
}
.userlike-wrap{
column-count: 2;
padding: 0 20rpx;
column-fill: balance;
}
.like-card{
break-inside: avoid;
}
.img {
position: relative;
z-index: 2;
display: block;
width: 345rpx;
height: 345rpx;
border-radius: 20rpx;
}
.mark-img {
position: absolute;
top: 0;
right: -2px;
z-index: 3;
display: block;
width: 84rpx;
height: 74rpx;
}
.img-wrap{
position: relative;
overflow: hidden;
border-radius: 20rpx;
}
</style>
pages/cloud/components/HotelItem.vue
+3 -3
View File
@@ -55,14 +55,14 @@ export default {
margin: 20rpx 0 0 0;
.cover-box {
position: relative;
width: 328rpx;
width: 338rpx;
height: auto;
border-radius: 14rpx;
overflow: hidden;
}
.cover {
width: 328rpx;
height: 328rpx;
width: 338rpx;
height: 338rpx;
vertical-align: middle;
}
.icon {
pages/cloud/haveFun.vue
+134 -41
View File
@@ -1,20 +1,30 @@
<template>
<view class="have-fun tabbar-page">
<view class="top-box">
<view class="search-box flex jc-between ai-center">
<input
v-model="name"
type="text"
placeholder="搜索店铺"
placeholder-style="color:#949494"
@confirm="search"
>
<image
class="icon"
:src="webUrl+'/20220903142935869059.png'"
mode="scaleToFill"
@click="search"
/>
<view class="v12-justify-start v12-align-center">
<view class="flex jc-end">
<view class="city-box" @click="goCity('cloud')">
<text style="white-space:nowrap; width: 90rpx" class="v12-primary-text one-t">{{ cityName }}</text>
<image :src="webUrl+'/orderIcon/map.png'" mode="scaleToFill"></image>
</view>
</view>
<view class="search-box v12-primary-border flex jc-between ai-center">
<input
v-model="name"
type="text"
placeholder="请输入关键词~"
placeholder-style="color:#949494"
@confirm="search"
>
<view class="search-btn v12-primary v12-white-text v12-radius-60" @click="search">
<text class="v12-font-bold">搜索</text>
<image
class="icon v12-ml-1"
:src="webUrl+'/orderIcon/搜索 (1).png'"
mode="scaleToFill"
/>
</view>
</view>
</view>
<scroll-view class="type-box flex" scroll-x enable-flex>
<view
@@ -31,12 +41,39 @@
</view>
</scroll-view>
</view>
<view class="type-banner-wrap">
<view v-if="currType.titleImage" class="title">
<image
:src="currType.titleImage"
mode="heightFix"
class="img"
/>
</view>
<view v-if="currType.carousel" class="slider-wrap">
<swiper
indicatorDots="true"
indicator-color="rgba(255, 255, 255, .3)"
indicator-active-color="#ffffff"
autoplay
circular
style="height: 330rpx;"
>
<block
v-for="(item, bannerIndex) in currType.carousel"
:key="bannerIndex"
>
<swiper-item>
<view class="swiper-item" @click="typeBannerItemClick(item)">
<image :src="item.carouselImage" class="img" />
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<view class="body">
<view class="flex jc-end">
<view class="city-box" @click="goCity('cloud')">
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
<text>{{ cityName }}</text>
</view>
<view>
<text class="v12-font-bold" v-if="currType.carousel">推荐</text>
</view>
<view v-if="isLoad">
<view v-if="hotelList.length > 0">
@@ -95,10 +132,13 @@ export default {
page: 1,
typeList: [],
typeIndex: 0,
// 当前选中的类型
currType: {},
cityName: '',
hotelList: [],
isLoad: false,
pageKeyId: Object.freeze('findFunIndex')
pageKeyId: Object.freeze('findFunIndex'),
isNext: false
}
},
computed: {
@@ -113,22 +153,29 @@ export default {
},
onReachBottom() {
// 后端接口结构需要调整下，需要补充总页数，前端可判断当前页数大于等于总页数则不发送网络请求
this.page++
this.fetchList()
if(this.isNext) {
this.page++
this.fetchList()
}
},
onLoad() {
getHotelTypeList().then(({data}) => {
this.typeList = data
this.getMapData()
})
},
onShow() {
this.page = 1
this.currType = {}
this.typeIndex = 0
this.name = ''
getHotelTypeList().then(({data}) => {
this.typeList = data
this.currType = data[this.typeIndex]
this.getMapData()
})
const memCityName = uni.getStorageSync('cityName')
if (memCityName.length) {
this.cityName = memCityName
uni.removeStorageSync('cityName')
this.name = ''
this.search()
}
},
methods: {
@@ -147,13 +194,16 @@ export default {
if (map.length > 1) {
const {latitude, longitude} = map[1]
const address = await getCurAddress(latitude, longitude)
this.cityName = address[1].data.result.ad_info.city
if(!this.cityName) {
this.cityName = address[1].data.result.ad_info.city
}
this.search()
}
},
tapType(index) {
if (this.typeIndex === index) return
this.typeIndex = index
this.currType = this.typeList[index]
this.name = ''
this.search()
},
@@ -187,28 +237,48 @@ export default {
data[i].videoCover = ''
}
this.hotelList.push(data[i])
if(data.length < 10) {
this.isNext = false
} else {
this.isNext = true
}
}
}
}).finally(() => {
this.isLoad = true
})
},
typeBannerItemClick(item) {
if (!item.hotelId) return
uni.navigateTo({ url: `/pagesInn/inn/innHome?id=${item.hotelId}` })
}
}
}
</script>
<style scoped lang="less">
.search-btn{
position: absolute;
top: 2rpx;
bottom: 2rpx;
right: 2rpx;
padding: 0rpx 20rpx;
display: flex;
align-items: center;
font-size: 28rpx;
}
.have-fun {
//padding-top: 120rpx;
.top-box {
padding: 32rpx 0 20rpx;
background: #fff;
background: #f5f5f5;
.search-box {
width: 686rpx;
position: relative;
width: 575rpx;
height: 60rpx;
box-sizing: border-box;
margin: 0 auto;
// margin: 0 auto;
padding: 0 24rpx 0 32rpx;
border: 2rpx solid #BBD2D2;
border-radius: 30rpx;
@@ -224,20 +294,20 @@ export default {
}
.type-box {
height: 180rpx;
height: 200rpx;
box-sizing: border-box;
white-space: nowrap;
padding: 20rpx 20rpx 0 48rpx;
padding: 20rpx 20rpx 0 20rpx;
.item {
width: 160rpx;
height: 160rpx;
width: 185rpx;
height: 185rpx;
margin-right: 20rpx;
border-radius: 26rpx;
image {
width: 72rpx;
height: 72rpx;
width: 92rpx;
height: 92rpx;
}
.name {
@@ -259,16 +329,16 @@ export default {
}
.body {
padding: 20rpx 32rpx;
padding: 20rpx 20rpx;
background: #f5f5f5;
}
.city-box {
display: inline-flex;
align-items: center;
padding: 8rpx 18rpx 8rpx 16rpx;
padding: 8rpx 20rpx 8rpx 20rpx;
border-radius: 30px;
background: #fff;
background: #f5f5f5;
image {
width: 32rpx;
@@ -286,7 +356,7 @@ export default {
display: flex;
justify-content: space-between;
.list {
width: 328rpx;
width: 348rpx;
.item {
width: 100%;
box-sizing: border-box;
@@ -297,4 +367,27 @@ export default {
.tabbar-page {
padding: 0 0 180rpx 0;
}
.type-banner-wrap {
padding: 0 20rpx;
background-color: #f5f5f5;
.title {
padding: 20rpx 0;
.img {
display: block;
height: 48rpx;
}
}
.slider-wrap {
width: 100%;
height: 330rpx;
padding: 0 0 20rpx 0;
.swiper-item {
.img {
display: block;
width: 100%;
height: 330rpx;
}
}
}
}
</style>
pages/order/MyOrder/index.vue
+302 -70
View File
@@ -1,35 +1,48 @@
<template>
<view class="my-order" ref="container">
<view class="my-order v12-mx-2" ref="container">
<view class="m-search-wrap v12-mb-2 v12-mt-3">
<u-search placeholder="请输入商品名/订单号" shape="round" :inputStyle="inputStyle" :showAction="false" bgColor="#FFF" v-model="keyword" @search="changeType"></u-search>
</view>
<view class="m-tab-warp">
<u-tabs
lineHeight="0"
lineColor="#FF564A"
:activeStyle="activeStyle"
:inactiveStyle="inactiveStyle"
:current="type"
:list="tabList"
@click="tabChange">
</u-tabs>
</view>
<!-- <u-tabs lineColor="#FF564A" activeStyle="#FF564A" inactiveStyle="#C2C5CC" :current="type" :list="tabList"
@click="tabChange"></u-tabs> -->
<u-tabs lineColor="#FF564A" activeStyle="#FF564A" inactiveStyle="#C2C5CC" :current="type" :list="tabList"
@click="tabChange"></u-tabs>
<view class="list" style="padding: 80rpx 0 30rpx;">
<view class="list v12-ma-0" style="padding: 0rpx 0 30rpx;">
<view class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
<view class="shop-info flex jc-between ai-center" v-if="order.merName">
<view class="shop-info flex jc-between ai-center" v-if="order.merName" @click="goStore(order)">
<view class="flex ai-center">
<image :src="webUrl+'/20221008152431059973.png'" style="width: 40rpx;height: 40rpx"/>
<text class="name">{{ order.merName }}</text>
<image :src="webUrl+'/orderIcon/shop.png'" style="width: 32rpx;height: 32rpx"/>
<text class="name v12-font-weight-400 v12-dark-text v12-font-24">{{ order.merName }}</text>
<image :src="webUrl+'/orderIcon/arrow.png'" style="width: 24rpx;height: 24rpx; margin-top: 5rpx"/>
</view>
<view class="flex ai-center">
<image :src="webUrl+'/20221008152418897577.png'" style="width: 24rpx;height: 24rpx"/>
<text class="address">{{ order.merCityName }}</text>
<image :src="webUrl+'/orderIcon/map.png'" style="width: 28rpx;height: 28rpx"/>
<text class="address v12-dark-text v12-font-bold v12-font-24">{{ order.merCityName }}</text>
</view>
</view>
<view class="title acea-row row-between-wrapper" style="padding: 0 0 0 30rpx !important;">
<view class="acea-row row-middle">
<span class="sign cart-color acea-row row-center-wrapper"
v-if="order.combinationId > 0">拼团</span>
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.seckillId > 0">秒杀</span>
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.bargainId > 0">砍价</span>
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.storeId > 0">门店</span>
<span class="sign cart-color acea-row row-center-wrapper v12-priamry-text v12-priamry-border v12-radius-40" v-if="order.combinationId > 0">拼团</span>
<span class="sign cart-color acea-row row-center-wrapper v12-priamry-text v12-priamry-border v12-radius-40" v-if="order.seckillId > 0">秒杀</span>
<span class="sign cart-color acea-row row-center-wrapper v12-priamry-text v12-priamry-border v12-radius-40" v-if="order.bargainId > 0">砍价</span>
<span class="sign cart-color acea-row row-center-wrapper v12-priamry-text v12-priamry-border v12-radius-40" v-if="order.storeId > 0">门店</span>
订单号:{{ order.orderId }}
</view>
<view class="font-color-white statusTag" v-if="order.isTickets===1 && order._status._type === 1">
<view class="font-color-white statusTag v12-primary" v-if="order.isTickets===1 && order._status._type === 1">
待核销
</view>
<view class="font-color-white statusTag" v-else>{{ getStatus(order) }}</view>
<view class="font-color-white statusTag v12-primary" v-else>{{ getStatus(order) }}</view>
</view>
<view @click="goOrderDetails(order)">
<view class="item-info acea-row row-between row-top" v-for="(cart,cartInfoIndex) in order.cartInfo"
@@ -58,53 +71,72 @@
</view>
<view class="text">
<view class="acea-row name-wrap">
<view class="name more-t">{{ cart.productInfo.storeName }}</view>
<view class="name more-t v12-font-bold">{{ cart.productInfo.storeName }}</view>
<view class="money">
<view>￥{{ force2Decimal(cart.truePrice) }}</view>
<view>
<text class="v12-font-22">￥</text>
<text class="v12-font-28">{{ force2Decimal(cart.truePrice) }}</text>
</view>
</view>
</view>
<view class="acea-row attr-wrap">
<view class="acea-row attr-wrap ">
<view
v-if="cart.productInfo.attrInfo"
class="attr"
class="attr v12-secondary-dark-text v12-font-24 "
>
规格：{{ cart.productInfo.attrInfo.sku }}
{{ cart.productInfo.attrInfo.sku }}
</view>
<view>x{{ cart.cartNum }}</view>
<view class="v12-dark-text v12-font-22">x{{ cart.cartNum }}</view>
</view>
</view>
</view>
</view>
<view class="totalPrice acea-row row-between row-middle">
<view class="" v-if="order.createTime"><span class="orderTime">{{ order.createTime }}</span></view>
<view class="">共{{ order.totalNum || 0 }}件商品，总金额
<text class="money font-color-lightred">￥{{ force2Decimal(order.payPrice) }}</text>
<view class="" v-if="order.createTime"><span class="orderTime v12-font-24 v12-dark1-text">{{ order.createTime }}</span></view>
<view class="v12-font-24 v12-dark1-text">共{{ order.totalNum || 0 }}件商品，
<text class="v12-dark-text v12-font-28 v12-font-bold">
总金额
</text>
<text class="v12-font-22 v12-primary-text v12-font-bold">
￥
</text>
<text class="money font-color-lightred v12-font-28 v12-primary-text v12-font-bold">{{ force2Decimal(order.payPrice) }}</text>
</view>
</view>
<view class="bottom flex jc-between ai-center">
<view class="group-btn"
v-if="(Number(order._status._type) === 2 || Number(order._status._type) === 3) &&
order.isTickets === 0">
<text class="btn-more" @click="tapShowMore(order,orderListIndex)">更多</text>
<text class="btn-more v12-font-24" @click="tapShowMore(order,orderListIndex)">更多</text>
<view class="group-float" v-show="order.showMore">
<view class="btn btn-service flex jc-center ai-center" @click="goRoom(order)"
v-if="order.merName">联系客服
<view class="btn btn-service flex jc-center ai-center v12-font-24" @click="goRoom(order)"
v-if="order.merName">联系商家
</view>
<view class="btn flex jc-center ai-center" @click="goRefund(order)">申请退款</view>
<view class="btn flex jc-center ai-center v12-font-24" @click="goRefund(order)">申请退款</view>
</view>
</view>
<template v-else>
<view class="bnt service" @click="goRoom(order)" v-if="order.merName">联系客服</view>
<view v-else></view>
<view class="v12-justify-between" style="width: 100%">
<view>
<view class="bnt service" @click="goRoom(order)" v-if="order.merName && order._status._type != 0 && Number(order._status._type) !== 9">联系商家</view>
</view>
<view class="v12-justify-between">
<view class="bnt service" @click="goOrderDetails(order)" v-if="['-1','-2','-3'].includes(order._status._type)">查看详情</view>
<view class="bnt service" @click="delOrder(order)" v-if="['9'].includes(order._status._type)">删除订单</view>
<!-- <view class="bnt v12-primary-text v12-primary-border" @click="takeOrder(order)" v-if="['-2','-3'].includes(order._status._type)">确认收货</view> -->
</view>
</view>
<!-- <view v-else></view> -->
</template>
<view class="flex">
<template v-if="order._status._type == 0">
<view class="bnt cancelBnt" @click="cancelOrder(order)">取消订单</view>
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即付款</view>
<view class="bnt cancelBnt v12-dark-text v12-dark-border" @click="cancelOrder(order)">取消订单</view>
<view class="bnt cancelBnt v12-dark-text v12-dark-border" @click="addressTap(order)">修改地址</view>
<view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="subscribePay(order)">立即付款</view>
</template>
<template v-if="(order._status._type == 1 || order._status._type == 9) && order.isTickets==0">
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看详情</view>
<template v-if="(order._status._type == 1 ) && order.isTickets==0">
<view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="goOrderDetails(order)">查看详情</view>
</template>
<template v-if="order._status._type == 1 && order.isTickets == 1">
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即核销</view>
@@ -113,23 +145,31 @@
<view class="bnt default" v-if="order.isExtendedDelivery==0"
@click="toDelay(order.orderId)">延长收货
</view>
<view class="bnt default" @click="goLogistics(order)">查看物流</view>
<view class="bnt bg-color-lightred" @click="takeOrder(order)">确认收货</view>
<view class="bnt default v12-radius-40" @click="goLogistics(order)">查看物流</view>
<view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="takeOrder(order)">确认收货</view>
</template>
<template v-if="order._status._type == 3">
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">去评价</view>
<view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="goOrderDetails(order)">去评价</view>
</template>
<template v-if="order._status._type === 4">
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看订单</view>
</template>
</view>
</view>
<view class="v12-px-3 v12-pb-4" v-if="order._status._type == 1">
<view class="v12-font-22 v12-secondary-dark-text order-tips" v-if="order.isFastPost !== 0">商家已接收您的订单，支付成功后预计{{ order.isFastPost === 1 ? 48 : 72 }}小时内发货</view>
</view>
</view>
</view>
<u-modal :show="showExtend" title="确认延长收货时间？" content='每笔订单只能延长一次哦' showCancelButton
@cancel="showExtend=false" @confirm="doneDelay"></u-modal>
<u-modal
:show="showExtend"
title="确认延长收货时间？"
content='每笔订单只能延长一次哦'
showCancelButton
@cancel="showExtend=false"
@confirm="doneDelay">
</u-modal>
<view class="noCart" v-if="orderList.length === 0 && page > 1">
<view class="pictrue">
<image :src="webUrl+'/20240102232734472795.png'"/>
@@ -137,11 +177,20 @@
</view>
<Loading :loaded="loaded" :loading="loading"></Loading>
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
<passkeyborad
:money="orderInfo.payPrice"
showMoney
:show="isShowPayPwdPop"
ref='payPwdPop'
@close="pwdPopClose"
@finish="pwdPopFinish"
></passkeyborad>
</view>
</template>
<script>
import {getOrderData, getOrderList, orderDelay} from "@/api/order";
import {cancelOrderHandle, payOrderHandle, takeOrderHandle} from "@/libs/order";
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
import {getOrderData, getOrderList, orderDelay, editAddress } from "@/api/order";
import {cancelOrderHandle, payOrderHandle, takeOrderHandle, yuePayOrderHandle, delOrderHandle} from "@/libs/order";
import Loading from "@/components/Loading";
import Payment from "@/components/Payment";
import {mapGetters} from "vuex";
@@ -152,12 +201,33 @@ export default {
mixins: [pageListenMixins],
data() {
return {
isShowPayPwdPop: false,
inputStyle: {
height: '64rpx',
},
activeStyle: {
color: '#C52733',
background: 'rgba(197,39,51,0.1)',
borderRadius: '30rpx',
padding: '5rpx 20rpx',
fontWeight: '600'
},
inactiveStyle: {
height: '48rpx !important',
background: '#fff !important',
borderRadius: '30rpx !important',
color: '#333333 !important',
padding: '5rpx 15rpx',
fontSize: '28rpx !important',
lineHeight: '48rpx !important'
},
webUrl: this.$VUE_APP_RESOURCES_URL,
tabList: [
{name: '全部'},
{name: '待付款'},
{name: '待发货'},
{name: '待收货/待核销'},
{name: '退款/售后'},
{name: '待评价'},
{name: '已完成'}],
offlinePayStatus: 2,
@@ -171,37 +241,145 @@ export default {
pay: false,
payType: ["yue", "weixin"],
from: this.$deviceType,
orderInfo: {},
showExtend: false,
delayId: null,
pageKeyId: Object.freeze('userOrderIndex')
pageKeyId: Object.freeze('userOrderIndex'),
keyword: '',
_orderId: '',
addressId: '',
};
},
components: {
Loading,
Payment
Payment,
passkeyborad
},
computed: mapGetters(["userInfo"]),
onShow: function () {
onShow() {
this.type = this.type || parseInt(this.$yroute.query.type) || 0;
this.changeType(this.type);
this.getOrderData();
this.getOrderListReq();
uni.$on('chooseAddress', (res) => {
this.addressId = res.id
})
},
onHide: function () {
onHide() {
this.orderList = [];
this.page = 1;
this.limit = 20;
this.loaded = false;
this.loading = false;
},
watch: {
addressId(val) {
if(val) {
const params = {
addressId: this.addressId,
orderId: this._orderId
}
setTimeout(() => {
uni.showModal({
title:'确定修改地址吗?',
content: '',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success:(success)=>{
if(success.confirm) {
uni.showLoading()
editAddress(params).then(res => {
uni.showToast({
icon: 'success',
title: '修改成功！'
})
}).finally(() => {
uni.hideLoading()
})
}
},
complete:(complete)=>{
this.addressId = ''
this._orderId = ''
},
})
}, 1000)
}
}
},
methods: {
delOrder(order) {
delOrderHandle(order.orderId).then(() => {
// this.goBack()
this.page = 1
this.orderList = [];
this.getOrderListReq()
})
},
goStore(order) {
if(!order.hotelId) {
uni.showToast({
title: '未找到相关店铺！'
})
return
}
this.$yrouter.push({
path: "/pagesInn/inn/innHome",
query: {
id: order.hotelId
}
});
},
async toYuePay(payPwd) {
const that = this;
//网络请求
await yuePayOrderHandle(this.orderInfo.orderId, "yue", that.from, payPwd);
that.changeType();
this.payPassword = "";
},
pwdPopClose() {
this.isShowPayPwdPop = false;
},
pwdPopFinish(payPwd) {
this.payPassword = payPwd;
this.toYuePay(payPwd);
this.isShowPayPwdPop = false;
},
subscribePay(order) {
this.orderInfo = order
uni.requestSubscribeMessage({
tmplIds: ['7O3wKw7_D4t7yfSOlvecKuOQP8QEPY88uBx2FJg43HE', 'TSmTnGibZ8IxWCiRWOvLxha6-0u7tE-V1-WbDCiPkKU', '9Q6xLHe6HyjkU5Zn5k_2zxYPf2y4MxVyUbOSW8pcZRU'],
complete: () => this.pay = true
})
},
addressTap(order) {
this._orderId = order.orderId
this.$yrouter.push({
path: "/pages/user/address/AddressManagement/index",
query: {
choosMode: 1
}
});
},
force2Decimal(v) {
return this.$force2Decimal(v);
},
goRoom(order) {
const params = {
goodsId: order.cartInfo[0].productId,
goodsName: order.cartInfo[0].productInfo.storeName,
skuStr: order.cartInfo[0].productInfo.attrInfo.sku,
price: order.cartInfo[0].productInfo.attrInfo.price,
seckillId: order.cartInfo[0].seckillId,
cover: order.cartInfo[0].productInfo.attrInfo.image,
goodsData: '',
seckillData: ''
}
uni.navigateTo({
url: `/pkg_common/views/room?id=${order.merId}&name=${order.merName}`
url: `/pkg_common/views/room?id=${order.merId}&name=${order.merName}&params=${JSON.stringify(params)}`
})
},
goRefund(order) {
@@ -210,7 +388,7 @@ export default {
// 打开售后的目的就是开启已完成/待评价订单的退款功能，确认打开售后之后，小程序用户再点击申请退款，就可以进入退款申请填写页面，正常走退款流程，提交退款申请以后，订单状态变为退款中
if (order.refundSystemStatus === 0) {
uni.showToast({
title: '订单已收货，如需退款请联系客服',
title: '订单已收货，如需退款请联系商家',
mask: false,
icon: 'none',
duration: 3000
@@ -303,7 +481,9 @@ export default {
this.changeType(this.type);
},
tabChange(item) {
this.type = item.index;
this.type = item.index
this.changeType();
},
changeType() {
@@ -316,15 +496,26 @@ export default {
getOrderListReq() {
if (this.loading || this.loaded) return;
this.loading = true;
const types = {
0: 0,
1: 1,
2: 2,
3: 3,
4: -3,
5: 4,
6: 5,
}
const type = types[this.type]
const {
page,
limit,
type
keyword
} = this;
getOrderList({
page,
limit,
type
type,
keyword
}).then(res => {
this.orderList = this.orderList.concat(res.data);
if (this.orderList.length > 0) {
@@ -335,6 +526,9 @@ export default {
this.page++;
this.loaded = res.data.length < this.limit;
this.loading = false;
}).finally(() => {
this.loading = false;
// console.log('???',this.loading);
});
},
tapShowMore(order, index) {
@@ -364,10 +558,10 @@ export default {
status = "退款中";
break;
case -2:
status = "已退款";
status = "退款成功";
break;
case -3:
status = "已驳回";
status = "退款失败";
break;
case 9:
status = "已取消";
@@ -388,7 +582,7 @@ export default {
});
},
paymentTap: function (order) {
var that = this;
const that = this;
if (
!(order.combinationId > 0 || order.bargainId > 0 || order.seckillId > 0)
) {
@@ -409,7 +603,16 @@ export default {
});
};
},
toPay() {
toPay(type) {
const that = this;
console.log(type, "支付方式");
//余额支付需要输入支付密码
if (type == "yue") {
this.isShowPayPwdPop = true;
return;
} else {
payOrderHandle(this.orderInfo.orderId, type, that.from);
}
},
toDelay(id) {
@@ -428,12 +631,35 @@ export default {
}
};
</script>
<style>
.my-order .u-tabs{
background-color: transparent !important;
position: sticky !important;
}
.my-order .u-tabs__wrapper__nav__item{
padding: 0 8rpx !important;
}
.my-order .u-search__content{
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
}
</style>
<style scoped lang="less">
page {
background-color: #fff;
}
.order-tips{
height: 44rpx;
background: rgba(0,0,0,0.05);
border-radius: 40rpx;
padding: 5rpx 24rpx;
line-height: 44rpx;
}
.m-tab-warp{
position: sticky;
top: 0;
background-color: #f5f5f5;
}
/deep/ .u-tabs {
position: fixed;
z-index: 1;
@@ -443,13 +669,16 @@ page {
}
.list {
.item:first-child{
margin-top: 0;
}
.item {
margin: 30rpx 0;
border-radius: 12rpx;
.shop-info {
padding: 20rpx 16rpx;
border-bottom: 2rpx solid #eee;
// border-bottom: 2rpx solid #eee;
.name {
margin-left: 6rpx;
@@ -481,22 +710,25 @@ page {
}
.bottom {
border-top: 2rpx solid #eee;
border-top: 0rpx solid #eee;
.bnt {
display: flex;
justify-content: center;
align-items: center;
width: 160rpx;
height: 56rpx;
box-sizing: border-box;
border-radius: 20rpx;
width: 128rpx;
height: 44rpx;
border-radius: 40rpx;
font-size: 24rpx;
// font-weight: bold;
border: 1px solid #707070;
color: #333;
padding: 1px 3px;
}
.service {
border: 2rpx solid #0DC5C5;
color: #0DC5C5;
border: 1px solid #707070;
color: #333;
}
}
}
@@ -520,13 +752,13 @@ page {
}
.statusTag {
font-size: 20rpx;
font-size: 24rpx;
color: #fff;
padding: 0 20rpx;
padding: 4rpx 20rpx;
background: #0DC5C5;
height: 38rpx;
line-height: 38rpx;
border-radius: 20rpx 0px 0px 20rpx;
border-radius: 60rpx 0px 0px 60rpx;
}
.group-btn {
pages/order/OrderDetails/index.vue
+443 -82
View File
@@ -1,25 +1,54 @@
<template>
<view class="order-details" style="padding: 30rpx;">
<!-- 给header上与data上加on为退款订单-->
<view class="header acea-row row-middle" :class="refundOrder ? 'on' : ''"
style="background: #0DC5C5;border-radius: 24rpx;">
<view class="status-img-box">
<view class=" v12-pa-3 v12-white" :class="refundOrder ? 'on' : ''" style="border-radius: 20rpx;">
<!-- <view class="status-img-box">
<image class="status-img" :src="getStatusImg(orderInfo)" mode=""></image>
</view>
<view class="data" :class="refundOrder ? 'on' : ''">
<view class="state" v-if="orderInfo.isTickets===1 && orderInfo._status._type == 2">待核销</view>
<view class="state" v-else>{{ getStatus(orderInfo) }}</view>
<view v-if="getStatus(orderInfo)!=='待付款'">{{ orderInfo._status._msg }}</view>
<view class="pending-payments flex ai-center" v-else>
<text>请在</text>
<u-count-down :time="$global.diffSSS(this.orderInfo.paymentTimeout)"/>
<text>内支付，逾期订单将自动取消</text>
</view> -->
<view :class="refundOrder ? 'on' : ''">
<view class="state v12-primary-text v12-font-32 v12-font-bold" v-if="orderInfo.isTickets===1 && orderInfo._status._type == 2">待核销</view>
<view class="state v12-primary-text v12-font-32 v12-font-bold" v-else>{{ getStatus(orderInfo) }}</view>
<view v-if="getStatus(orderInfo)!=='待付款'" class="v12-mt-2 v12-font-24 v12-secondary-dark-text" :class="{'fails-bg': orderInfo._status._type == -3}">{{ orderInfo._status._msg }}</view>
<view class="pending-payments flex ai-center v12-mt-2 v12-font-24 v12-secondary-dark-text" v-else>
<text>需支付{{ orderInfo.payPrice }}元，</text>
<!-- {{ orderInfo.paymentTimeout }} -->
剩余<u-count-down format="HH:mm:ss" autoStart :time="$global.diffSSS(orderInfo.paymentTimeout)" />订单将自动取消
</view>
<u-divider></u-divider>
<div class="name v12-mb-3 v12-font-28 v12-font-bold">
<text class="v12-mr-3"> {{ orderInfo.realName }}</text>
<text class="phone">{{ orderInfo.userPhone }}</text>
</div>
<div class="v12-font-28 v12-secondary-dark-text v12-justify-between">
<text class=" more-t" style="flex: 2;">{{ orderInfo.userAddress }}</text>
<view v-if="getStatus(orderInfo) === '待付款'" @click="goAddress" class="v12-btn cancel v12-dark-text v12-dark-border v12-radius-40" >修改地址</view>
</div>
</view>
</view>
<view class="reject-reason" v-if="orderInfo._status._type==-3 && orderInfo.refundRejectReason">驳回原因：{{ orderInfo.refundRejectReason }}</view>
<!-- <view class="reject-reason" v-if="orderInfo._status._type==-3 && orderInfo.refundRejectReason">驳回原因：{{ orderInfo.refundRejectReason }}</view> -->
<view @click="goLogistics(orderInfo)" class="v12-radius-20 v12-white v12-pa-3 v12-mt-4" v-if="orderInfo._status._type == 3 || (orderInfo._status._type == 2 && orderInfo.isTickets!==1)">
<view >
<text class="v12-secondary-dark-text v12-font-28">{{ orderInfo.deliveryName }}：{{ orderInfo.deliveryId }}</text>
<text class="v12-font-22 v12-px-2 v12-py-1 v12-ml-1 v12-primary-text v12-primary-border v12-radius-40" @click="copyClipboard(orderInfo.orderId)">
复制
</text>
</view>
<view class="v12-mt-2 v12-justify-between">
<view class="v12-align-center">
<view class="v12-align-center v12-mr-2">
<image class="logo" :src="webUrl+'/orderIcon/car.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
</view>
<view class="v12-font-28 v12-secondary-dark-text">{{ logistics.Traces && logistics.Traces.length > 0 ? logistics.Traces[logistics.Traces.length - 1].acceptStation : '暂无轨迹信息'}}</view>
</view>
<view>
<uni-icons type="right" size="20" color="#707070"></uni-icons>
</view>
</view>
<view class="v12-mt-2">
<text class="v12-dark-text v12-font-24">{{ logistics.Traces && logistics.Traces.length > 0 ? logistics.Traces[logistics.Traces.length - 1].acceptTime : '' }}</text>
</view>
</view>
<template v-if="!refundOrder">
<view class="code-box flex jc-center ai-center" v-if="orderInfo.isTickets===1 && orderInfo._status._type==2">
<image class="code-img" :src="orderInfo.code"/>
@@ -61,28 +90,10 @@
<span class="iconfont icon-weizhi"></span>查看位置
</div>
</div>
<view class="address acea-row row-middle" style="margin-top: 30rpx;border-radius: 24rpx;flex-wrap: nowrap;"
v-if="orderInfo.shippingType === 1">
<view class="" style="flex-shrink: 0;margin-right: 20rpx;">
<image style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20230304135530688212.png'" mode=""></image>
</view>
<view class="acea-row row-middle" style="flex-grow: 1;">
<view class="name acea-row row-middle row-between" style="flex-wrap: nowrap;width: 100%;">
<view class="acea-row row-middle">
{{ orderInfo.realName }}
<text class="phone">{{ orderInfo.userPhone }}</text>
</view>
<!-- <view class="acea-row row-middle">
<image style="width: 32rpx;height: 32rpx;" :src="webUrl+'/20210808005541949297.png'" mode=""
@click="call(orderInfo.userPhone)"></image>
</view> -->
</view>
<view>{{ orderInfo.userAddress }}</view>
</view>
</view>
<div class="address" v-else>
<div class="address" v-if="orderInfo.shippingType !== 1">
<div class="name">
{{ system_store.name }}
{{ system_store.name }}
<span class="phone">{{ system_store.phone }}</span>
<span class="iconfont icon-tonghua font-color-red" :href="'tel:' + system_store.phone"></span>
</div>
@@ -91,50 +102,139 @@
</template>
</template>
<view style="margin-top: 30rpx;border-radius:24rpx;overflow: hidden;">
<OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []" title="商品信息"></OrderGoods>
<view style="margin-top: 30rpx;border-radius:20rpx;overflow: hidden;" class="v12-white">
<!-- <OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []" title="商品信息"></OrderGoods> -->
<view class="v12-radius-20 v12-pa-3" v-for="(cart, d) in orderInfo.cartInfo" :key="d">
<view class="v12-justify-between">
<view class="">
<image style="width: 120rpx; height: 120rpx" class="v12-radius-8" :src="cart.productInfo.image"></image>
</view>
<view class="v12-justify-between v12-flex-column v12-ml-2" style="flex: 2">
<view class="v12-font-28 v12-dark-text v12-font-bold more-t">
{{ cart.productInfo.storeName }}
</view>
<view v-if="cart.productInfo.attrInfo" class="more-t v12-secondary-dark-text v12-font-24">
{{ cart.productInfo.attrInfo.sku }}
</view>
</view>
<view class="v12-justify-between v12-flex-column v12-dark-text v12-text-right">
<view class=" ">
<text class="v12-font-22">
￥
</text>
<text class="v12-font-28">{{ cart.truePrice }}</text>
</view>
<view class="v12-font-22">
<text>x{{ cart.cartNum }}</text>
</view>
</view>
</view>
<view class="" v-if="orderInfo.cartInfo &&( d === orderInfo.cartInfo.length - 1)">
<view class="v12-justify-between v12-mt-3 v12-dark-text">
<view class="v12-font-24 v12-dark-text">
商品总价
</view>
<view class="v12-text-right">
<text class="v12-font-22">￥</text>
<text class="v12-font-28">
{{ force2Decimal(orderInfo.totalPrice) }}
</text>
</view>
</view>
<view class="v12-justify-between v12-mt-3" v-if="orderInfo.payPostage > 0">
<view class="v12-font-24 v12-dark-text">
运费
</view>
<view class="v12-text-right">
<text class="v12-font-22">￥</text>
<text class="v12-font-28">
{{ force2Decimal(orderInfo.payPostage) }}
</text>
</view>
</view>
<view class="v12-justify-between v12-mt-3" v-if="orderInfo.couponPrice > 0">
<view class="v12-font-24 v12-dark-text">
满减优惠
</view>
<view class="v12-text-right">
-
<text class="v12-font-22">￥</text>
<text class="v12-font-28">
{{ force2Decimal(orderInfo.couponPrice) }}
</text>
</view>
</view>
<view class="v12-justify-between v12-mt-3" v-if="orderInfo.useIntegral > 0">
<view class="v12-font-24 v12-dark-text">
积分抵扣
</view>
<view class="v12-text-right">
-
<text class="v12-font-22">￥</text>
<text class="v12-font-28">
{{ force2Decimal(orderInfo.deductionPrice) }}
</text>
</view>
</view>
<u-divider></u-divider>
<view class="v12-justify-between v12-mt-3">
<view class="v12-font-28 v12-font-bold v12-dark-text">
实付款
</view>
<view class="v12-text-right v12-font-bold v12-primary-text">
<text class="v12-font-22">￥</text>
<text class="v12-font-28">
{{ force2Decimal(orderInfo.payPrice) }}
</text>
</view>
</view>
</view>
</view>
</view>
<view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
<view class="item acea-row row-middle"
<view class="wrapper v12-radius-20 v12-mt-7" style="margin-top: 30rpx">
<!-- <view class="item acea-row row-middle"
style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003431044270.png'"
mode=""></image>
<text style="font-size: 26rpx;color: #080F1A;">订单信息</text>
</view>
<view class="item acea-row row-between">
<view class="flex-0">订单编号：</view>
<view class="conter acea-row row-middle row-right">
</view> -->
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
<view class="flex-0">订单编号</view>
<view class="v12-text-right ">
{{ orderInfo.orderId }}
<image @click="copyClipboard(orderInfo.orderId)" style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
:src="webUrl+'/20210808003517657208.png'" mode=""></image>
<text class="v12-px-2 v12-py-1 v12-ml-1 v12-primary-text v12-primary-border v12-radius-40" @click="copyClipboard(orderInfo.orderId)">
复制
</text>
<!-- <image @click="copyClipboard(orderInfo.orderId)" style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
:src="webUrl+'/20210808003517657208.png'" mode=""></image> -->
</view>
</view>
<view class="item acea-row row-between">
<view class="flex-0">下单时间：</view>
<view class="conter">
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
<view class="flex-0">下单时间</view>
<view class="v12-text-right">
<text>{{ orderInfo.createTime }}</text>
</view>
</view>
<view class="item acea-row row-between">
<view class="flex-0">订单类型：</view>
<view class="conter">{{ orderTypeName }}</view>
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
<view class="flex-0">订单类型</view>
<view class="v12-text-right">{{ orderTypeName }}</view>
</view>
<view class="item acea-row row-between">
<view class="flex-0">支付状态：</view>
<view class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
<view class="flex-0">支付状态</view>
<view class="v12-text-right">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
</view>
<view class="item acea-row row-between">
<view class="flex-0">支付方式：</view>
<view class="conter">{{ orderInfo._status._payType }}</view>
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
<view class="flex-0">支付方式</view>
<view class="v12-text-right">{{ orderInfo._status._payType }}</view>
</view>
<view class="item acea-row row-between" v-if="orderInfo.mark">
<view class="flex-0">买家留言：</view>
<view class="conter conttent-left">{{ orderInfo.mark }}</view>
<view class="item acea-row row-between v12-font-24 v12-dark-text" v-if="orderInfo.mark">
<view class="flex-0">买家备注：</view>
<view class="v12-text-right conttent-left">{{ orderInfo.mark }}</view>
</view>
</view>
<view v-if="orderInfo.status != 0">
<view v-if="false">
<view class="wrapper" v-if="true">
<view class="item acea-row row-between">
<view class="flex-0">配送方式：</view>
@@ -169,7 +269,7 @@
</view>
</view>
<!-- 退款订单详情 -->
<view class="wrapper" v-if="refundOrder">
<view class="wrapper" v-if="false">
<view class="item acea-row row-between">
<view>收货人：</view>
<view class="conter">{{ orderInfo.realName }}</view>
@@ -183,7 +283,7 @@
<view class="conter">{{ orderInfo.userAddress }}</view>
</view>
</view>
<view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
<view v-if="false" class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
<view class="item acea-row row-between" style="flex-wrap: nowrap;">
<view class="acea-row row-middle" style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003453973795.png'"
@@ -212,38 +312,107 @@
<view style="height:100rpx;" v-if="!refundOrder && offlineStatus"></view>
<view class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus">
<template v-if="status.type == 0">
<view class="bnt cancel" @click="cancelOrder">取消订单</view>
<view class="bnt bg-color-red" @click="subscribePay">立即付款</view>
<view class="v12-justify-between v12-align-center full-width" style="width: 100%">
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
<view class="v12-justify-between v12-align-center">
<view class="">
<text class="v12-font-22 v12-dark1-text">
共{{ orderInfo.totalNum }}件商品
</text>
<text class="v12-font-bold v12-dark-text v12-font-28 v12-mx-2">
实付款
</text>
<text class="v12-font-bold v12-primary-text v12-font-22">
￥
</text>
<text class="v12-font-bold v12-primary-text v12-font-28">
{{ force2Decimal(orderInfo.payPrice) }}
</text>
</view>
<view class="bnt v12-primary-text v12-primary-border v12-ml-1" @click="subscribePay">立即付款</view>
</view>
</view>
</template>
<template v-if="status.type == 1">
<view class="bnt cancel" @click="goGoodsReturn(orderInfo)">申请退款</view>
<template v-if="status.type == 1" >
<view class="v12-justify-between " style="width: 100%">
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
<view class="bnt v12-primary-text v12-primary-border cancel" @click="goGoodsReturn(orderInfo)">申请退款</view>
</view>
</template>
<template v-if="status.type == 2">
<view class="bnt default"
@click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
v-if="orderInfo.isTickets!==1">查看物流
<view class="v12-justify-between " style="width: 100%">
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
<view class="v12-justify-between">
<view class="" style="position: relative">
<text class="btn-more v12-font-24 v12-mr-2" @click="showMore = !showMore">更多</text>
<view class="group-float" v-show="showMore" :style="{top: orderInfo.isExtendedDelivery==0 ? '-60px' : '-32px'}">
<view v-if="orderInfo.isExtendedDelivery==0" class="btn flex jc-center ai-center v12-font-24" @click="toDelay(orderInfo.orderId)">延长收货</view>
<view class="btn flex jc-center ai-center v12-font-24" @click="goGoodsReturn(orderInfo)">申请退款</view>
</view>
</view>
<view class="bnt v12-dark-text v12-dark-border default"
@click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
v-if="orderInfo.isTickets!==1">查看物流
</view>
<view class="bnt v12-primary-text v12-primary-border" @click="takeOrder">确认收货</view>
</view>
</view>
<view class="bnt bg-color-red" @click="takeOrder">确认收货</view>
</template>
<template v-if="status.type == 3">
<view class="bnt default" @click="
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
" v-if="orderInfo.isTickets!==1">查看物流
<view class="v12-justify-between " style="width: 100%">
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
<view class="v12-justify-between">
<view class="" style="position: relative">
<text class="btn-more v12-font-24 v12-mr-2" @click="showMore = !showMore">更多</text>
<view class="group-float" v-show="showMore" :style="{top: '-32px'}">
<view class="btn flex jc-center ai-center v12-font-24" @click="goGoodsReturn(orderInfo)">申请退款</view>
</view>
</view>
<view class="bnt v12-dark-text v12-dark-border cancel" @click="buyAgin">再买一单</view>
<view class="bnt v12-primary-text v12-primary-border" @click="routerGo(orderInfo.cartInfo[0])">立即评价</view>
<!-- <view class="bnt v12-dark-text v12-dark-border default" @click="
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
" v-if="orderInfo.isTickets!==1">查看物流
</view> -->
</view>
</view>
</template>
<template v-if="status.type == -1">
<view style="width: 100%">
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
</view>
</template>
<template v-if="status.type == -2">
<view class="v12-justify-between " style="width: 100%">
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
<view class="bnt v12-dark-text v12-dark-border cancel" @click="buyAgin">再买一单</view>
</view>
</template>
<template v-if="status.type == -3">
<view class="v12-justify-between " style="width: 100%">
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
<view class="v12-justify-between ">
<view class="bnt v12-dark-text v12-dark-border cancel" @click="buyAgin">再买一单</view>
<view class="bnt v12-primary-text v12-primary-border" @click="routerGo(orderInfo.cartInfo[0])">立即评价</view>
</view>
</view>
</template>
<template v-if="status.type == 4">
<view class="bnt cancel" @click="delOrder">删除订单</view>
<view class="bnt v12-dark-text v12-dark-border cancel" @click="delOrder">删除订单</view>
<view
v-if="orderInfo.isTickets !== 1"
class="bnt default"
class="bnt v12-dark-text v12-dark-border default"
@click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
>查看物流
</view>
</template>
<template v-if="status.type == 6">
<view class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</view>
<view class="bnt v12-primary-text v12-primary-border" @click="goGroupRule(orderInfo)">查看拼团</view>
</template>
</view>
<u-modal :show="showExtend" title="确认延长收货时间？" content='每笔订单只能延长一次哦' showCancelButton
@cancel="showExtend=false" @confirm="doneDelay"></u-modal>
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
<view class="geoPage" v-if="mapShow">
<iframe width="100%" height="100%" frameborder="0" scrolling="no"
@@ -259,13 +428,14 @@
<script>
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
import OrderGoods from "@/components/OrderGoods";
import {orderDetail} from "@/api/order";
import {orderDetail, orderDelay, aginConfirm, express, editAddress} from "@/api/order";
import Payment from "@/components/Payment";
import DataFormat from "@/components/DataFormat";
import {copyClipboard} from "@/utils";
import {mapGetters} from "vuex";
import {cancelOrderHandle, delOrderHandle, payOrderHandle, takeOrderHandle, yuePayOrderHandle} from "@/libs/order";
import { pageListenMixins } from '@/mixins/pageListenMixins'
// import {postCartAdd} from "@/api/store";
const STATUS = [
"待付款",
@@ -292,6 +462,10 @@ export default {
mixins: [pageListenMixins],
data: function () {
return {
addressId: null,
showExtend: false,
delayId: '',
showMore: false,
isShowPayPwdPop: false,
offlinePayStatus: 2,
orderTypeName: "普通订单",
@@ -310,7 +484,8 @@ export default {
mapShow: false,
payPassword: null,
webUrl: this.$VUE_APP_RESOURCES_URL,
pageKeyId: Object.freeze('userOrderInfo')
pageKeyId: Object.freeze('userOrderInfo'),
logistics: {}
};
},
computed: {
@@ -322,6 +497,46 @@ export default {
onShow() {
this.id = this.$yroute.query.id;
this.getDetail();
uni.$on('chooseAddress', (res) => {
this.addressId = res.id
})
},
watch: {
addressId(val) {
if(val) {
const params = {
addressId: this.addressId,
orderId: this.orderInfo.orderId
}
setTimeout(() => {
uni.showModal({
title:'确定修改地址吗?',
content: '',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success:(success)=>{
if(success.confirm) {
uni.showLoading()
editAddress(params).then(res => {
uni.showToast({
icon: 'success',
title: '修改成功！'
})
this.getDetail();
}).finally(() => {
uni.hideLoading()
})
}
},
complete:(complete)=>{
uni.hideLoading()
this.addressId = ''
},
})
}, 1000)
}
}
},
// inject: ["app"],
mounted: function () {
@@ -329,6 +544,111 @@ export default {
},
methods: {
copyClipboard,
getExpressInfo() {
let params = {
orderCode: this.orderInfo.id,
shipperCode: this.orderInfo.deliverySn,
logisticCode: this.orderInfo.deliveryId
};
express(params)
.then(res => {
const {success, data} = res
if(success) {
this.logistics = data || {}
}
})
.catch(err => {
// uni.showToast({
// title:
// err.msg || err.response.data.msg || err.response.data.message,
// icon: "none",
// duration: 2000
// });
});
},
goLogistics(order) {
this.$yrouter.push({
path: "/pages/order/Logistics/index",
query: {
id: order.orderId
}
});
},
buyAgin() {
const params = {
orderId: this.orderInfo.orderId
}
aginConfirm(params).then(res => {
const ids = res.data.cartInfo.map(e => e.id)
const addressInfo = res.data.addressInfo
if (ids.length === 0) return
uni.navigateTo({
url: '/pages/order/OrderSubmission/index?id=' + ids.join(',') + '&address=' + JSON.stringify(addressInfo)
})
})
},
goAddress() {
this.$yrouter.push({
path:'/pages/user/address/AddressManagement/index',
query: {
choosMode: 1
}
})
},
toDelay(id) {
this.delayId = id;
this.showExtend = true;
},
doneDelay() {
orderDelay(this.delayId).then(() => {
this.showExtend = false;
this.getDetail()
});
},
buyOrder() {
let q = {
productId: this,
cartNum: that.attr.productSelect.cart_num,
new: 1,
uniqueId: that.attr.productSelect !== undefined ?
that.attr.productSelect.unique : ""
};
const ids = this.orderInfo.cartId
if (ids.length === 0) return
uni.navigateTo({
url: '/pages/order/OrderSubmission/index?id=' + ids
})
},
routerGo(cart) {
this.$yrouter.push({
path: "/pages/shop/GoodsEvaluate/index",
query: { id: cart.unique }
});
},
goOrderDetails(order) {
this.$yrouter.push({
path: "/pages/order/OrderDetails/index",
query: {
id: order.orderId
}
});
},
goRoom(order) {
const params = {
goodsId: order.cartInfo[0].productId,
goodsName: order.cartInfo[0].productInfo.storeName,
skuStr: order.cartInfo[0].productInfo.attrInfo.sku,
price: order.cartInfo[0].productInfo.attrInfo.price,
seckillId: order.cartInfo[0].seckillId,
cover: order.cartInfo[0].productInfo.attrInfo.image,
goodsData: '',
seckillData: ''
}
uni.navigateTo({
url: `/pkg_common/views/room?id=${order.merId}&name=${order.merName}&params=${JSON.stringify(params)}`
})
},
force2Decimal(v) {
return this.$force2Decimal(v);
},
@@ -358,7 +678,7 @@ export default {
status = "已退款";
break;
case -3:
status = "已驳回";
status = "退款失败";
break;
}
return status;
@@ -562,6 +882,9 @@ export default {
this.system_store = res.data.systemStore || {};
this.mapKey = res.data.mapKay;
this.setOfflinePayStatus(this.orderInfo.offlinePayStatus);
if(this.orderInfo._status._type == 3 || (this.orderInfo._status._type == 2 && this.orderInfo.isTickets!==1)) {
this.getExpressInfo()
}
})
.catch(err => {
uni.showToast({
@@ -590,6 +913,45 @@ export default {
};
</script>
<style scoped lang="less">
.u-count-down__text{
color: #999 !important;
}
.footer{
height: 122rpx;
border-radius: 40rpx 40rpx 0rpx 0rpx;
}
.fails-bg{
padding:10rpx;
background: rgba(197,39,51,0.2);
border-radius: 8rpx;
color: #C52733 !important;
line-height: 34rpx
}
.group-float {
position: absolute;
width: 196rpx;
box-sizing: border-box;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
padding: 0 20rpx;
background: #fff;
left: -40px;
right: 0;
top: -62px;
.btn {
box-sizing: border-box;
padding: 20rpx 0;
color: #333;
font-size: 32rpx;
line-height: 1;
}
.btn-service {
border-bottom: 1rpx solid #F0F0F0;
}
}
.bnt{
font-size: 28rpx !important;
}
.geoPage {
position: fixed;
width: 100%;
@@ -756,9 +1118,8 @@ export default {
/deep/ .pending-payments {
font-size: 26rpx;
letter-spacing: 1px;
.u-count-down__text {
color: #FF5C5C;
font-size: 26rpx;
line-height: 1;
}
pages/order/OrderSubmission/index.vue
+183 -108
View File
@@ -3,28 +3,26 @@
<view class="allAddress" style="background-color: #f6f6f6;">
<view
class="address acea-row row-middle"
class="address acea-row v12-align-start"
style="flex-wrap: nowrap;margin: 0 0 30rpx 0;border-radius: 16rpx;"
v-if="shipping_type === 0"
@click="addressTap"
>
<image style="flex-shrink: 0;width: 48rpx;height: 48rpx;margin-right: 20rpx;"
:src="webUrl+'/20230304135530688212.png'" mode=""></image>
<image style="flex-shrink: 0;width: 36rpx;height: 36rpx;margin-right: 20rpx;"
:src="webUrl+'/orderIcon/map.png'" mode=""></image>
<view class="acea-row row-between-wrapper" style="flex-wrap: nowrap;flex-grow: 1;">
<view class="addressCon" v-if="addressInfo.realName">
<view class="name">
{{ addressInfo.realName }}
<text class="phone">{{ addressInfo.phone }}</text>
</view>
<view>
<view class="more-t">
{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.district }}{{ addressInfo.detail }}
</view>
<view class="name v12-font-28 v12-mt-3">
<text>{{ addressInfo.realName }}</text>
<text class="phone">{{ addressInfo.phone }}</text>
</view>
</view>
<view class="addressCon" v-else>
<view class="setaddress">设置收货地址</view>
</view>
<view class="iconfont icon-jiantou" style="flex-shrink: 0;"></view>
</view>
</view>
<div style="flex-wrap: nowrap;" class="address acea-row row-middle" v-else @click="showStoreList">
@@ -47,70 +45,154 @@
</div>
</view>
<OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo" title="商品列表"></OrderGoods>
<OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo" title="商品信息"></OrderGoods>
<view class="wrapper" style="margin: 30rpx 0;border-radius: 16rpx;">
<view class="wrapper" style="margin:0;border-radius:0 0 20rpx 20rpx">
<view class="item acea-row row-between-wrapper" style="flex-wrap: nowrap;" v-if="shipping_type === 0">
<view class="v12-pa-2 acea-row row-between-wrapper" style="flex-wrap: nowrap;" v-if="shipping_type === 0">
<view class="acea-row row-middle" style="flex-wrap: nowrap;">
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230820761721.png'"
mode=""></image>
<text class="">快递费用</text>
<!-- <image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230820761721.png'"
mode=""></image> -->
<text class="v12-font-24 v12-secondary-dark-text v12-pr-3 v12-text-right" style="width: 140rpx">快递费用</text>
</view>
<view class="discount" style="width: auto !important;">
{{ orderPrice.payPostage > 0 ? force2Decimal(orderPrice.payPostage) : "免运费" }}
<view class="discount v12-secondary-dark-text v12-font-24 " style="width: auto !important;">
{{ orderPrice.payPostage > 0 ? force2Decimal(orderPrice.payPostage) : "包邮" }}
</view>
</view>
<view v-else>
<view class="item acea-row row-between-wrapper">
<view>联系人</view>
<view class="v12-pa-2 acea-row row-between-wrapper">
<view class="v12-font-24 v12-secondary-dark-text v12-pr-3 v12-text-right" style="width: 140rpx">联系人</view>
<view class="discount">
<input type="text" placeholder="请填写您的联系姓名" v-model="contacts"/>
<input class="v12-font-24" type="text" placeholder="请填写您的联系姓名" v-model="contacts"/>
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>联系电话</view>
<view class="v12-pa-2 acea-row row-between-wrapper">
<view class="v12-font-24 v12-secondary-dark-text v12-pr-3 v12-text-right" style="width: 140rpx">联系电话</view>
<view class="discount">
<input type="text" placeholder="请填写您的联系电话" v-model="contactsTel"/>
</view>
</view>
</view>
<view class="item" style="z-index: -1">
<view class="acea-row row-middle">
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230836494421.png'"
mode=""></image>
<text class="">备注信息（150字以内)</text>
<view class=" v12-pa-2 v12-justify-between " style="z-index: -1;">
<view class="v12-align-start">
<!-- <image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230836494421.png'"
mode=""></image> -->
<text class="v12-font-24 v12-secondary-dark-text v12-pr-3 v12-text-right" style="width: 140rpx;">备注</text>
</view>
<textarea v-model="mark"></textarea>
<textarea v-model="mark" placeholder="建议与商家协商一致" class="mark v12-font-24 "></textarea>
</view>
</view>
<view class="wrapper" style="margin: 30rpx 0;border-radius: 16rpx;">
<!-- v12 -->
<view class="v12-mt-3">
<view class="v12-white v12-pa-3 v12-radius-20" >
<view class="v12-justify-between v12-align-center v12-py-1" >
<view class="v12-font-24 v12-dark-text">商品总价：</view>
<view class="v12-secondary-dark-text">
<text class="v12-font-22 ">￥</text>
<text class="v12-font-28">{{ force2Decimal(orderPrice.totalPrice) }}</text>
</view>
</view>
<!-- <view class="v12-justify-between v12-align-center v12-py-1" >
<view class="v12-font-24 v12-dark-text">运费</view>
<view class="v12-secondary-dark-text">
<text class="v12-font-22 ">￥</text>
<text class="v12-font-28">{{ force2Decimal(orderPrice.payPostage) }}</text>
</view>
</view> -->
<view class="v12-justify-between v12-align-center v12-py-1">
<view class="v12-font-24 v12-dark-text v12-align-center">
<text>优惠券</text>
<view class="v12-align-center v12-ml-1" v-if="couponTitle">
<view class="v12-primary-text v12-primary-border v12-font-22 v12-radius-6 v12-px-1">券</view>
<view class="v12-primary-text v12-primary-border v12-font-22 v12-radius-6 v12-px-1">{{ couponTitle }}</view>
</view>
</view>
<view class="v12-justify-between v12-align-center">
<view class="v12-mr-2" @click="changeCoupons" v-if="couponList.usable.length !== 0">
<text class="v12-dark-text v12-font-24" >{{ couponList.usable.length === 0 ? '无' : '去选择' }}</text>
<text class="iconfont icon-jiantou v12-font-24 v12-dark-text"></text>
</view>
<view class="v12-secondary-dark-text">
<text class="v12-font-22 ">-￥</text>
<text class="v12-font-28">{{ force2Decimal(orderPrice.couponPrice) }}</text>
</view>
</view>
</view>
<view class="v12-justify-between v12-align-center v12-py-1">
<view class="v12-font-24 v12-dark-text">积分抵扣</view>
<view class="v12-secondary-dark-text v12-align-center ">
<!-- <view class="v12-mr-2">
<u-switch
v-model="usePointsCheck"
size="14"
@change="usePointsCheckChange"
/>
</view> -->
<view>
<text class="v12-font-22 ">-￥</text>
<text class="v12-font-28">{{ force2Decimal(orderPrice.deductionPrice) }}</text>
</view>
</view>
</view>
</view>
<!-- <view class="coupon-cell">
<view class="flex jc-between ai-center">
<view class="title">积分抵扣：</view>
<view class="flex ai-center">
<u-switch
v-model="usePointsCheck"
size="20"
@change="usePointsCheckChange"
/>
</view>
</view>
<view v-if="usePointsCheck" class="flex jc-between ai-center points-cell">
<view>积分：{{ orderPrice.usedPoints }}</view>
<view class="flex ai-center">
-￥{{ force2Decimal(orderPrice.deductionPrice) }}
</view>
</view>
</view> -->
<!-- <view class="coupon-cell flex jc-between ai-center" @click="changeCoupons">
<view class="title">优惠券：</view>
<view class="flex ai-center">
<text style="color:#999999" v-if="couponList.usable.length===0">无</text>
<view class="flex ai-center" v-else>
<text style="color:#FF564A">{{ couponIndex < 0 ? '去选择' : -couponList.usable[couponIndex].couponPrice }}
</text>
<view class="iconfont icon-jiantou" style="flex-shrink: 0;"></view>
</view>
</view>
</view> -->
</view>
<view class="wrapper" style="margin: 30rpx 0;border-radius: 20rpx;">
<view class="item">
<!-- <view>支付方式</view> -->
<view class="acea-row row-left row-middle">
<view class="acea-row row-middle" style="position: relative;">
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230846995104.png'"
mode=""></image>
<text class="pay-method-title">支付方式</text>
<!-- <image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230846995104.png'"
mode=""></image> -->
<text class="v12-dark-text v12-font-32 v12-font-bold">支付方式</text>
<!-- <text class="pink-dot"></text> -->
</view>
</view>
<view class="list">
<view class="list" style="margin-top: 0;">
<view
class="payItem acea-row row-middle"
:class="active === 'weixin' ? 'on' : ''"
@click="payItem('weixin')"
v-show="isWeixin"
style="flex-wrap: nowrap;"
@click="payItem('weixin')"
style="flex-wrap: nowrap; margin-top: 0"
>
<view class="name acea-row">
<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
<view class="name acea-row v12-font-24">
<!-- <view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view> -->
<image style="flex-shrink: 0;width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/orderIcon/微信支付.png'" mode=""></image>
微信支付
</view>
<view class="tip">微信快捷支付</view>
<label class="radio">
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#FF0000"/>
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#C52733"/>
<text></text>
</label>
</view>
@@ -119,33 +201,35 @@
:class="active === 'weixin' ? 'on' : ''"
@click="payItem('weixin')"
v-show="!isWeixin"
style="flex-wrap: nowrap;"
style="flex-wrap: nowrap; margin-top: 20rpx"
>
<view class="name acea-row ">
<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
<view class="name acea-row v12-font-24">
<!-- <view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view> -->
<image style="flex-shrink: 0;width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/orderIcon/微信支付.png'" mode=""></image>
微信支付
</view>
<view class="tip"></view>
<label class="radio">
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#FF0000"/>
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#C52733"/>
<text></text>
</label>
</view>
<view
class="payItem acea-row row-middle"
class="payItem acea-row row-middle v12-justify-between"
:class="active === 'yue' ? 'on' : ''"
@click="payItem('yue')"
style="flex-wrap: nowrap;"
>
<view class="name acea-row ">
<view style="background-color: #007AFF;" class="iconfont icon-icon-test"
:class="active === 'yue' ? 'bounceIn' : ''"></view>
<view class="name acea-row v12-font-24">
<!-- <view style="background-color: #007AFF;" class="iconfont icon-icon-test"
:class="active === 'yue' ? 'bounceIn' : ''"></view> -->
<image style="flex-shrink: 0;width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/orderIcon/余额宝.png'" mode=""></image>
余额支付
</view>
<view class="tip">可用余额：{{ userInfo.nowMoney ? force2Decimal(userInfo.nowMoney) : 0.00 }}</view>
<!-- <view class="tip">可用余额：{{ userInfo.nowMoney ? force2Decimal(userInfo.nowMoney) : 0.00 }}</view> -->
<label class="radio">
<radio style="transform: scale(0.7);" value="" :checked="active === 'yue'" color="#FF0000"/>
<radio style="transform: scale(0.7);" value="" :checked="active === 'yue'" color="#C52733"/>
<text></text>
</label>
@@ -153,53 +237,7 @@
</view>
</view>
</view>
<view class="moneyList" style="margin-bottom:30rpx;border-radius: 16rpx;">
<view class="item acea-row row-between-wrapper" v-if="orderPrice.totalPrice !== undefined">
<view>商品总价：</view>
<view class="money">￥{{ force2Decimal(orderPrice.totalPrice) }}</view>
</view>
<view class="item acea-row row-between-wrapper" v-if="orderPrice.payPostage > 0">
<view>运费：</view>
<view class="money">￥{{ force2Decimal(orderPrice.payPostage) }}</view>
</view>
<!-- <view class="item acea-row row-between-wrapper" v-if="orderPrice.couponPrice > 0">
<view>优惠券抵扣：</view>
<view class="money">-￥{{ force2Decimal(orderPrice.couponPrice) }}</view>
</view>
<view class="item acea-row row-between-wrapper" v-if="orderPrice.deductionPrice > 0">
<view>积分抵扣：</view>
<view class="money">-￥{{ force2Decimal(orderPrice.deductionPrice) }}</view>
</view> -->
</view>
<view v-if="canUsePoints" class="coupon-cell">
<view class="flex jc-between ai-center">
<view class="title">积分抵扣：</view>
<view class="flex ai-center">
<u-switch
v-model="usePointsCheck"
size="20"
@change="usePointsCheckChange"
/>
</view>
</view>
<view v-if="usePointsCheck" class="flex jc-between ai-center points-cell">
<view>积分：{{ orderPrice.usedPoints }}</view>
<view class="flex ai-center">
-￥{{ force2Decimal(orderPrice.deductionPrice) }}
</view>
</view>
</view>
<view class="coupon-cell flex jc-between ai-center" @click="changeCoupons">
<view class="title">优惠券：</view>
<view class="flex ai-center">
<text style="color:#999999" v-if="couponList.usable.length===0">无</text>
<view class="flex ai-center" v-else>
<text style="color:#FF564A">{{ couponIndex < 0 ? '去选择' : -couponList.usable[couponIndex].couponPrice }}
</text>
<view class="iconfont icon-jiantou" style="flex-shrink: 0;"></view>
</view>
</view>
</view>
<!-- v9 优惠券开始 -->
<u-popup
@@ -213,19 +251,31 @@
v-if="couponList.usable.length > 0"
:two-list="couponList"
@change="changeCoupons"
:currentPrice="force2Decimal(orderPrice.totalPrice)"
@max="couponMax"
:show-tab="false"
/>
</u-popup>
<!-- v9 优惠券结束 -->
<view style="height:80rpx"></view>
<view class="footer acea-row row-between-wrapper" style="height: 80rpx;">
<view style="margin-left: 30rpx;">
<text style="color: #000000;font-size: 24rpx;font-weight: bold;">合计:</text>
<text class="" style="color: #FF564A;font-size: 28rpx;font-weight: bold;">
￥{{ force2Decimal(orderPrice.payPrice) }}
</text>
<view class="footer v12-justify-end v12-px-3" style="height: 120rpx;">
<view class="v12-align-center v12-px-4">
<view class="v12-mr-2">
<view>
<text class="v12-font-28 v12-dark-text v12-mr-2">共{{ total }}件</text>
<text class="v12-font-28 v12-dark-text v12-mr-1">合计:</text>
<text class="v12-font-22 v12-primary-text v12-font-bold">￥</text>
<text class="v12-font-36 v12-primary-text v12-font-bold">{{ force2Decimal(orderPrice.payPrice) }}</text>
</view>
<view class="v12-primary-text v12-font-22 v12-text-right">
<text>共减</text>
<text>￥</text>
<text>{{ force2Decimal(orderPrice.totalDiscountPrice) }}</text>
</view>
</view>
<view class="v12-primary v12-white-text v12-radius-60 v12-px-3 v12-py-2 v12-font-bold" @click="subscribePay">立即付款</view>
</view>
<view class="settlement acea-row row-middle row-center" @click="subscribePay">立即结算</view>
</view>
<AddressWindow
v-model="showAddress"
@@ -320,7 +370,9 @@ export default {
canUsePoints: false,
// 订单最大可使用积分数量
maxPoints: 0,
pageKeyId: Object.freeze('orderConfirm')
pageKeyId: Object.freeze('orderConfirm'),
total: 0,
couponTitle: ''
};
},
computed: mapGetters(["userInfo", "storeItems"]),
@@ -344,7 +396,6 @@ export default {
//地址切换也要重新计算一下
that.computedPrice('onLoad chooseAddress');
})
console.log(that.$yroute);
if (that.$yroute.query.pinkid !== undefined) {
that.pinkId = that.$yroute.query.pinkid;
}
@@ -367,6 +418,10 @@ export default {
},
methods: {
isNullOrEmpty,
couponMax(e) {
this.couponTitle = e.couponTitle
this.couponId = uni.getStorageSync('couponId') || 0
},
showStoreList() {
this.$store.commit("get_to", "orders");
this.$yrouter.push({
@@ -399,6 +454,8 @@ export default {
});
} else {
this.orderPrice = data.result;
console.log(this.orderPrice);
if (this.usePointsCheck) {
this.usePointsNumber = data.result.usedPoints
} else {
@@ -438,11 +495,20 @@ export default {
_this.canUsePoints = data.canUsePoints
_this.maxPoints = data.maxPoints
// 如果允许使用积分，则默认开启
_this.total = data.cartInfo.map(i => i.cartNum).reduce((a, b) => {
return a + b
}, 0)
if (data.canUsePoints) {
_this.usePointsCheck = true
_this.usePointsNumber = data.maxPoints
}
_this.addressInfo = data.addressInfo || {}
if(_this.$yroute.query.address !== undefined ) {
_this.addressInfo = JSON.parse(_this.$yroute.query.address) || {}
} else {
_this.addressInfo = data.addressInfo || {}
}
_this.systemStore = data.systemStore || {}
_this.storeSelfMention = data.storeSelfMention
_this.computedPrice()
@@ -707,16 +773,25 @@ export default {
});
},
// v9-2
changeCoupons() {
changeCoupons(item) {
if(!item) return
if (this.couponList.usable.length === 0) return
this.show = !this.show
this.couponId = uni.getStorageSync('couponId') || 0
this.couponTitle = item.couponTitle
},
}
};
</script>
<style scoped lang="less">
.mark{
background: rgba(0,0,0,0.05);
height: 128rpx;
border-radius: 16rpx;
padding: 5px 10px
}
.pink-dot {
width: 24rpx;
height: 24rpx;
@@ -765,6 +840,7 @@ export default {
.order-submission .wrapper .item .list .payItem {
border: none !important;
height: auto !important;
}
.order-submission .wrapper .item .list .payItem.on {
@@ -856,7 +932,6 @@ export default {
.order-submission .allAddress .address {
width: 6.91 * 100rpx;
height: 1.5 * 100rpx;
margin: 0 auto;
box-sizing: border-box;
}
pages/shop/GoodsCon/index.vue
+190 -68
View File
@@ -14,21 +14,48 @@
<view class="wrapper">
<!-- 原模块 -->
<view class="change-section bg-white" v-if="source !== 'pre' && source !== 'day' && source !== 'kill' && source !== 'spe'">
<view class="introduce bold">{{ storeInfo.storeName }}</view>
<rich-text class="subInfo" :nodes="storeInfo.storeInfo" v-if="storeInfo.storeInfo"/>
<view class="share acea-row row-between row-middle" style="flex-wrap: nowrap;">
<view class="money font-color-lightred acea-row ai-end">
<text class="num">￥{{ attr.productSelect.price }}</text>
<text style="color: #999999;font-size: 24rpx;">￥</text>
<text style="color: #999999;font-size: 24rpx;text-decoration: line-through;">
{{ attr.productSelect.otPrice }}
</text>
<text v-if="storeInfo.vipPrice && storeInfo.vipPrice > 0" class="vip-price-tag">已享受会员价格</text>
<view>
<view class="share acea-row row-between row-middle" style="flex-wrap: nowrap;margin-top: 0;">
<view class="money font-color-lightred acea-row v12-align-center">
<view>
<text class="v12-font-22 v12-red-text">￥</text>
<text class=" v12-primary-text v12-font-44 v12-red-text">{{ attr.productSelect.price }}</text>
<text class="v12-ml-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">￥</text>
<text class="v12-mr-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">{{ attr.productSelect.otPrice }}</text>
<text v-if="storeInfo.vipPrice && storeInfo.vipPrice > 0" class="v12-white-text v12-red v12-font-22 v12-radius-40 v12-px-1 v12-font-weight-400">会员价</text>
</view>
</view>
<view style="flex-shrink:0;" class="acea-row row-middle share-btn" @click="listenerActionSheet">
<image :src="webUrl+'/20210806121714655368.png'" mode="" style="width: 36rpx;height: 36rpx;"></image>
</view>
</view>
<view style="flex-shrink:0;" class="acea-row row-middle" @click="listenerActionSheet">
<image :src="webUrl+'/20210806121714655368.png'" mode="" style="width: 36rpx;height: 36rpx;"></image>
<view class="v12-mt-1 v12-mb-3">
<view
v-if="couponListLimit2ToShow.length > 0"
class="cell flex jc-between ai-center"
@click="changeCoupons()"
>
<view class="v12-justify-start">
<view
v-for="(item, index) in couponListLimit2ToShow"
:key="index"
class="v12-mr-2"
>
<view class="v12-align-center" v-if="index < 2">
<view class="v12-primary-text v12-primary-border v12-radius-6 v12-font-22 v12-px-1">券</view>
<view class="v12-primary-text v12-primary-border v12-radius-6 v12-font-22 v12-px-1">{{ item.couponTitle }}</view>
</view>
</view>
</view>
<view class="value value2 v12-font-24 v12-primary-text">
更多优惠
<uni-icons type="right" size="14" color="#707070"></uni-icons>
</view>
</view>
</view>
</view>
<view class="introduce bold">{{ storeInfo.storeName }}</view>
<rich-text class="subInfo" :nodes="storeInfo.storeInfo" v-if="storeInfo.storeInfo"/>
</view>
<!-- v4 特产 -->
@@ -148,13 +175,13 @@
<!-- v9 优惠券开始 -->
<u-popup :show="show" :round="10" mode="bottom" closeOnClickOverlay @close="changeCoupons()">
<CouponsPopup :two-list="couponList" @change="changeCoupons"/>
<CouponsPopup :two-list="couponList" @change="changeCoupons" :showTab="false" :currentPrice="storeInfo.price" />
</u-popup>
<!-- v9 优惠券结束 -->
<!-- v6服务项目开始 -->
<view class="service-section goods-section" v-if="storeInfo && storeInfo.isTickets!=1">
<view
<!-- <view
v-if="couponListLimit2ToShow.length > 0"
class="cell flex jc-between ai-center"
@click="changeCoupons()"
@@ -170,47 +197,77 @@
优惠详情
<uni-icons type="right" size="13" color="#707070"></uni-icons>
</view>
</view> -->
<view class="cell flex jc-between ai-center" @click="toQualifications">
<view class="flex ai-center">
<view class="after-title v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/资质认证.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
<text class="v12-ml-1 v12-font-28">资质</text>
</view>
<view class="title v12-secondary-dark-text">{{ storeInfo.merName }}</view>
</view>
<view class="value v12-justify-end v12-align-center">
<!-- <text class=" v12-dark1-text v12-font-24">库存：{{ attr.productSelect.stock }}</text> -->
<uni-icons type="right" size="16" color="#707070"></uni-icons>
</view>
</view>
<view class="cell flex jc-between ai-center" @click="selecAttrTap">
<view class="flex ai-center">
<view class="after-title">规格</view>
<view class="title bold">{{ attrValue }}</view>
<view class="after-title v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/items.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
<text class="v12-ml-1 v12-font-28">选择</text>
</view>
<view class="title attr-bg v12-primary-text one-t">{{ attrValue }}</view>
</view>
<view class="value">库存：{{ attr.productSelect.stock }}
<uni-icons type="right" size="13" color="#707070"></uni-icons>
<view class="value v12-justify-end v12-align-center">
<text class=" v12-dark1-text v12-font-24">库存：{{ attr.productSelect.stock }}</text>
<uni-icons type="right" size="16" color="#707070"></uni-icons>
</view>
</view>
<view class="cell flex jc-between ai-center">
<view class="flex">
<view class="after-title">送至</view>
<view class="title bold" v-if="postAddress">{{ postAddress }}
<view class="sub-title flex ai-end">
<image class="icon-time" :src="webUrl+'/20230106150523489905.png'" mode="scaleToFill"/>
<view class="text">
<view class="flex v12-align-start">
<view class="after-title v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/car.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
<text class="v12-ml-1 v12-font-28">送至</text>
</view>
<view class="title " v-if="postAddress">
<view class="address-wrap">
<image class="logo" :src="webUrl+'/orderIcon/地址.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
<text class="v12-font-28 v12-secondary-dark-text">{{ postAddress }}</text>
</view>
<view class="sub-title flex ai-end" style="margin-top: 0;" >
<view class="v12-font-20 v12-dark1-text address-wrap">
<image class="logo" :src="webUrl+'/orderIcon/地址.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx; opacity: 0;"/>
<text v-if="storeInfo.isFastPost == 1">预计48小时内发货</text>
<text v-if="storeInfo.isFastPost == 2">预计72小时内发货</text>
<text v-if="storeInfo.isFastPost == 0">{{ "预计发货时间：" + storeInfo.postTime }}</text>
</view>
</view>
</view>
<view class="title bold" @click="getAddress" v-else>无法获取定位信息，点击重新授权定位</view>
<view class="title v12-font-28 v12-secondary-dark-text" @click="getAddress" v-else>无法获取定位信息，点击重新授权定位</view>
</view>
</view>
<view class="cell flex jc-between ai-center">
<view class="flex ai-center">
<view class="after-title">快递</view>
<view class="title bold">{{ storeInfo.postage === 0 ? "免运费" : `￥${storeInfo.postage}` }}</view>
<view class="after-title v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/快递.png'" mode="" style="margin-right:0; width: 28rpx; height:28rpx"/>
<text class="v12-ml-1 v12-font-28">快递</text>
</view>
<view class="title v12-secondary-dark-text v12-font-28">{{ storeInfo.postage === 0 ? "免运费" : `￥${storeInfo.postage}` }}</view>
</view>
<!-- <view class="value red">销量：{{ storeInfo.sales }}</view> -->
</view>
<view class="cell flex jc-between ai-center" v-if="storeInfo.guarantee">
<view class="flex ai-center">
<view class="after-title flex-0">保障</view>
<view class="title bold">{{ storeInfo.guarantee }}</view>
<!-- v-if="storeInfo.guarantee" -->
<view class="cell flex jc-between ai-center" v-if="storeInfo.guarantee" @click="showService">
<view class="flex v12-align-start" >
<view class="after-title flex-0 v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/服务.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
<text class="v12-ml-1 v12-font-28">服务</text>
</view>
<!-- <view class="title v12-secondary-dark-text v12-font-28">{{ storeInfo.guarantee }}</view> -->
<rich-text class='title v12-secondary-dark-text v12-font-28' :nodes="storeInfo.guarantee" />
</view>
</view>
</view>
@@ -218,14 +275,17 @@
<view class="store-section goods-section" v-if="systemStore">
<view class="flex jc-between ai-center">
<view class="title bold flex ai-center">
<image class="logo" :src="systemStore.image" mode="scaleToFill"/>
<view>
<image class="logo" :src="systemStore.image" mode="" style="width: 72rpx; height:72rpx"/>
</view>
{{ systemStore.name }}
</view>
<view
class="flex ai-center store-btn"
class=" v12-btn v12-primary v12-white-text v12-primary-border v12-font-24"
style="height: 42rpx; line-height:42rpx"
@click="goStore"
>
进店逛逛
进店逛逛>
</view>
</view>
@@ -241,18 +301,45 @@
</view>
<view class="more-t bold">{{ item.storeName }}</view>
</view>
<view class="price bold">￥{{ item.price }}</view>
<view class="v12-justify-between">
<view class="price bold">￥{{ item.price }}</view>
<view class="">
<image class="logo" :src="webUrl+'/orderIcon/组 355.png'" mode="" style="margin-right:0; width: 28rpx; height:28rpx"/>
</view>
</view>
</view>
</view>
</view>
<!-- 门店信息结束 -->
<!-- 用户评价开始 -->
<!-- v-if="replyCount" -->
<view class="userEvaluation" v-if="replyCount" >
<view class="title acea-row row-between-wrapper">
<view>
<text class="v12-font-weight-500 v12-dark-text">商品评价</text>
<text class="v12-ml-2 v12-dark1-text">({{ replyCount }})</text>
</view>
<text @click="goEvaluateList(id)" class="praise">
<!-- <text class="font-color-red">{{ replyChance }}%</text>
好评率 -->
<text class="iconfont icon-jiantou"></text>
</text>
</view>
<user-evaluation :reply="reply"></user-evaluation>
</view>
<!-- 用户评价结束 -->
<view class="v12-justify-center">
<view style="width: 50%;">
<u-divider text="商品详情" lineColor="#666" textColor="#666" :hairline="false"></u-divider>
</view>
</view>
<!-- v6产品参数开始 -->
<view
class="param-section goods-section"
v-if="Object.entries(storeInfo.exPropertiesData).length>0 && storeInfo.isTickets!==1"
>
<view class="bold">产品参数</view>
<view class="v12-font-24 v12-dark-text v12-font-weight-500">产品参数</view>
<view class="table">
<view
v-for="(item,index) in storeInfo.exPropertiesData.slice(0, exSliceEnd)"
@@ -260,26 +347,26 @@
class="row flex ai-center"
>
<view class="title tc">
<view class="title-cont">
<view class="title-cont v12-font-24 v12-text-center">
{{ item.key }}
</view>
</view>
<view class="value tc bold">
<view class="value-cont">
<view class="value tc v12-font-weight-500">
<view class="value-cont v12-font-24 v12-text-center">
{{ item.value }}
</view>
</view>
</view>
<view
v-if="storeInfo.exPropertiesData.length > 3"
class="row btn tc"
class="row btn tc v12-font-22"
style="color:#666"
@click="changeExEnd"
>
<uni-icons
:type="exSliceEnd === 3 ? 'bottom' : 'top'"
size="13"
color="#707070"
size="14"
color="#666666"
></uni-icons>
点击{{ exSliceEnd === 3 ? '展开查看' : '折叠' }}更多参数
</view>
@@ -287,20 +374,6 @@
</view>
<!-- v6产品参数结束 -->
<!-- 用户评价开始 -->
<view class="userEvaluation" v-if="replyCount">
<view class="title acea-row row-between-wrapper">
<view>用户评价({{ replyCount }})</view>
<text @click="goEvaluateList(id)" class="praise">
<text class="font-color-red">{{ replyChance }}%</text>
好评率
<text class="iconfont icon-jiantou"></text>
</text>
</view>
<user-evaluation :reply="reply"></user-evaluation>
</view>
<!-- 用户评价结束 -->
<!-- 商品详情开始 -->
<view class="product-intro" style="margin-top: 24rpx">
<rich-text :nodes="storeInfo.description" v-if="source!='pre' && source!='day'"/>
@@ -339,7 +412,7 @@
</view>
<view @click="goShoppingCart()" class="item animated" v-if="!animated">
<view class="iconfont icon-gouwuche1">
<text class="num bg-color-lightred" v-if="CartCount > 0">{{ CartCount }}</text>
<text class="num bg-color-lightred v12-primary" v-if="CartCount > 0">{{ CartCount }}</text>
</view>
<text style="text-align: center;">购物车</text>
</view>
@@ -357,7 +430,7 @@
style="background: transparent !important;border-radius: 0 !important;"
>
<view
class="btn-car"
class="btn-car v12-primary-text v12-primary-border"
:class="{
'btn-car-disabled': (attr.productSelect.stock === 0 && attr.cartAttr) || storeInfo.stock === 0
}"
@@ -383,6 +456,7 @@
:product-value-arr="productValueArr"
:cartNum="cart_num"
/>
<ServiceWin ref="serviceWin" :info="storeInfo.guarantee" />
<StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
:posterData="posterData" :goodId="id"></StorePoster>
<ShareInfo v-on:setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></ShareInfo>
@@ -414,6 +488,7 @@ import ProductWindow from "@/components/ProductWindow";
import StorePoster from "@/components/StorePoster";
import ShareInfo from "@/components/ShareInfo";
import CountDown from "@/components/CountDown";
import ServiceWin from "@/components/ServiceWin";
import {getCartCount, getProductCode, getProductDetail, postCartAdd} from "@/api/store";
import {userBindParent} from "@/api/user";
import {handleQrCode, isWeixin} from "@/utils";
@@ -437,7 +512,8 @@ export default {
ProductWindow,
StorePoster,
ShareInfo,
CouponsPopup
CouponsPopup,
ServiceWin
},
mixins: [pageListenMixins],
data: function () {
@@ -512,7 +588,8 @@ export default {
uniqueId: null,
isFavorite: false,
pageKeyId: '',
couponListLimit2ToShow: []
couponListLimit2ToShow: [],
qualifications: []
}
},
computed: mapGetters(["isLogin", "location", "userInfo"]),
@@ -663,6 +740,18 @@ export default {
}
},
methods: {
showService() {
this.$refs.serviceWin.show = true
},
toQualifications() {
const merInfo = {
name: this.storeInfo.merName,
qualifications: this.qualifications
}
uni.navigateTo({
url:'/pages/shop/GoodsCon/qualifications?mer=' + JSON.stringify(merInfo),
})
},
goRoom() {
const params = {
goodsId: this.productId,
@@ -916,6 +1005,7 @@ export default {
const { data } = res
this.$set(this, 'storeInfo', data.storeInfo)
this.isWenwan = data.isWenwan
this.qualifications = data.qualifications || []
// 给 attr 赋值，将请求回来的规格赋值给 attr
if (this.source !== 'pre' && this.source !== 'day' && this.source !== 'kill' && this.source !== 'spe') {
this.$set(this.attr, 'productAttr', data.productAttr)
@@ -1084,11 +1174,21 @@ export default {
if (changeValue) {
num.cart_num++;
if (num.cart_num > stock) {
this.$set(this.attr.productSelect, "cart_num", stock);
this.$set(this, "cart_num", stock);
if(stock < 1) {
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "cart_num", 1);
} else {
this.$set(this.attr.productSelect, "cart_num", stock);
this.$set(this, "cart_num", stock);
}
} else {
this.$set(this.attr.productSelect, "cart_num", num.cart_num);
this.$set(this, "cart_num", num.cart_num);
if (num.cart_num < 1) {
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "cart_num", 1);
} else {
this.$set(this.attr.productSelect, "cart_num", num.cart_num);
this.$set(this, "cart_num", num.cart_num);
}
}
} else {
num.cart_num--;
@@ -1301,7 +1401,17 @@ export default {
.bg-white {
background-color: white;
}
.share-btn{
flex-shrink: 0;
padding: 10rpx;
border: 1px solid #ddd;
border-radius: 50%;
position: fixed;
background: #fff;
right: 20rpx;
bottom: 100px;
z-index: 1;
}
.wenwan-info {
margin: 0 32rpx;
padding: 16rpx 0 24rpx;
@@ -1566,7 +1676,7 @@ export default {
height: 60rpx;
line-height: 60rpx;
border-radius: 30rpx;
background: #FF564A;
background: #C52733;
color: #FFFFFF;
}
@@ -1882,4 +1992,16 @@ export default {
font-size: 28rpx;
margin-right: 40rpx;
}
.attr-bg{
background: rgba(197,39,51,0.1);
padding: 0rpx 5px;
height: 42rpx;
line-height: 42rpx;
border-radius: 12rpx;
max-width: 360rpx;
}
.address-wrap{
display: flex;
align-items: flex-end;
}
</style>
pages/shop/GoodsCon/qualifications.vue
+58
View File
@@ -0,0 +1,58 @@
<template>
<view class="v12-px-3 v12-py-5 qua-card ">
<view class="v12-white v12-radius-16">
<view class="v12-justify-between v12-pa-3">
<text class="v12-font-32 v12-dark-text">
商家名称
</text>
<text class="v12-font-32 v12-dark-text v12-font-bold">
{{ merInfo.name }}
</text>
</view>
<view class="v12-my-3 v12-justify-center v12-pb-3" v-for="(item , i) in merInfo.qualifications" :key="i">
<image @tap="previewImage(i)" class="img" :src="item.image" :data-src="item.image" mode="widthFix" lazy-load="true" v-if="more || i === 0"></image>
</view>
<view class="v12-align-center v12-justify-center v12-font-24 v12-pb-3" @click="showMore" v-if="!more && merInfo.qualifications.length > 1">
<text class="v12-dark1-text">查看更多</text>
<u-icon name="arrow-down"></u-icon>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
merInfo: {
qualifications: []
},
more: false
}
},
onLoad(opts) {
this.merInfo = JSON.parse(opts.mer)
},
methods: {
previewImage (i) {
uni.previewImage({
current: i,
urls: this.merInfo.qualifications
})
},
showMore() {
this.more = !this.more
}
}
}
</script>
<style lang="less">
.qua-card {
}
.img{
width: 662rpx;
height: 360rpx;
border-radius: 16rpx;
}
</style>
pages/user/History/index.vue
+282
View File
@@ -0,0 +1,282 @@
<template>
<view class="v12-pb-10">
<view class="v12-justify-around v12-pa-2 v12-white data-nav">
<view
v-for="(day, i) in currentWeek"
:key="i"
class="v12-font-26"
>
<view style="color:#BCBCBC" class="day-wrap">{{ getDate(day) }}</view>
<view class="v12-dark-text day-wrap" :class="{'active': actived === i, 'disabled': disabled(day)}" @click="handle(day, i)">{{ getDay(day) }}</view>
</view>
</view>
<view v-if="isLoad" class="history-wrap">
<view
v-for="(item, index) in items"
:key="index"
class="v12-mt-3"
:id="`history-${item.historyDate}`"
>
<view class="" style="height: 56px; width: 100%" v-if="isSrcoll"></view>
<view >
<text class="v12-font-bold v12-font-32">{{ item.historyDate }}</text>
<view class="wrapper">
<view
v-for="(historyItem, historyKey) in item.histories"
:key="historyKey"
class="v12-white v12-radius-20 history-card"
@click="goodsDetail(historyItem)"
>
<image
class="goods-img"
:src="historyItem.image"
mode="scaleToFill"
/>
<view class="good-info">
<view
:style="{
opacity: !historyItem.couponName ? 0 : 1
}"
class="v12-align-center v12-mt-2"
>
<view class="v12-primary-text v12-primary-border v12-radius-6 v12-font-22 v12-px-1">券</view>
<view class="v12-primary-text v12-primary-border v12-radius-6 v12-font-22 v12-px-1">{{ historyItem.couponName }}</view>
</view>
<view class="v12-justify-between v12-mt-2 price">
<view class="v12-font-bold v12-primary-text v12-align-center">
<text class="v12-font-16">￥</text>
<text class="v12-font-24">{{ historyItem.price }}</text>
<view class="ot-price v12-font-weight-400">
<text class="v12-font-22">￥</text>
<text class="v12-font-22">{{ historyItem.otPrice }}</text>
<view class="under-line"></view>
</view>
</view>
<image
:src="webUrl+'/orderIcon/组 355.png'"
class="icon"
/>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="v12-px-6" v-if="items.length > 0">
<u-divider text=" · 已经到底啦 · " textPosition="center"></u-divider>
</view>
<image
v-if="items.length === 0"
:src="webUrl + '/orderIcon/nohistory.png'"
class="img-nodata v12-mt-16"
mode="widthFix"
/>
</view>
<goo-skeleton
v-else
:show-avatar="false"
/>
</view>
</template>
<script>
import { getHistory } from '@/api/user'
export default {
data() {
return {
currentWeek: [],
actived: 0,
webUrl: this.$VUE_APP_RESOURCES_URL,
isLoad: false,
items: [],
isSrcoll: false
}
},
onLoad() {
this.queryHistory()
},
onShow() {
this.$nextTick(() => {
this.currentWeek = this.getWeek()
this.actived = this.getActived()
})
},
methods: {
disabled(day) {
const dayItems = this.items.filter(item => {
return item.historyDate === day
}).map(e => {
return e.histories
}).flat()
return dayItems.length === 0
},
getActived() {
const weekMap = this.currentWeek.map(e => new Date(e).getDay())
const today = new Date().getDay()
return weekMap.indexOf(today)
},
getWeek() {
const dates = []
const now = new Date();
// 0-6, 0是周日
const dayOfWeek = now.getDay()
// 当前日
const numDate = now.getDate()
const numDaysToMonday = dayOfWeek - 1 > -1 ? dayOfWeek : 0
// 得到本周周一的日期
const monday = new Date(now)
monday.setDate(numDate - numDaysToMonday)
// 生成本周剩余的日期
for (let i = 0; i < 7; i++) {
dates.push(new Date(monday).toISOString().slice(0, 10))
monday.setDate(monday.getDate() + 1)
}
return dates
},
getDay(date) {
return new Date(date).getDate()
},
getDate(date) {
const dateMap = {
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六',
0: '日'
}
const d = new Date(date).getDay()
return dateMap[d]
},
handle(day, i) {
if(this.disabled(day)) return
this.actived = i
this.isSrcoll = true
uni.pageScrollTo({
selector:`#history-${day}`,
duration:200,
success:(success)=>{
this.isSrcoll = false
},
})
},
formatStr(str) {
const regx = /-/g
return str.replace(regx, '')
},
goodsDetail (item) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: item.productId
}
})
},
queryHistory() {
this.items = []
this.isLoad = false
getHistory().then(res => {
const { data = [] } = res
if (data.length > 0) {
this.items = data.filter(e => e.histories && e.histories.length > 0).reverse()
// data.map(item => {
// if (item.histories) {
// if (item.histories.length > 0) {
// this.items.push(item)
// }
// }
// })
}
}).finally(() => {
this.isLoad = true
})
}
}
}
</script>
<style lang="less" scoped>
.data-nav{
position: sticky;
width: 100%;
top: 0;
z-index: 9;
box-sizing: border-box;
}
.disabled{
color: #CBCBCB !important;
}
.history-wrap {
padding: 0 20rpx;
.img-nodata {
width: 100%;
}
}
.under-line{
width: 100%;
height: 3rpx;
background-color: #CBCBCB;
position: absolute;
top: 4rpx;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.wrapper{
display: flex;
flex-wrap: wrap;
width: 710rpx;
margin: 0 auto;
}
.history-card{
width: 226rpx;
box-sizing: border-box;
margin-top: 16rpx;
margin-right: 16rpx;
border-radius: 20rpx;
overflow: hidden;
&:nth-child(3n) {
margin-right: 0;
}
.goods-img {
display: block;
width: 226rpx;
height: 226rpx;
}
.good-info {
padding: 12rpx 12rpx 20rpx 12rpx;
.price {
line-height: 34rpx;
.ot-price {
margin: 0 0 0 10rpx;
color: #CBCBCB;
position: relative;
}
}
.icon {
display: block;
width: 34rpx;
height: 34rpx;
}
}
}
.active{
background: #C52733;
color: #fff !important;
}
.day-wrap{
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border-radius: 50%;
}
</style>
pages/user/User/index.vue
+17 -6
View File
@@ -156,7 +156,7 @@
</view>
<text>待评价</text>
</view>
<view @click="goReturnList()" class="item">
<view @click="goMyOrder(5)" class="item">
<view class="pictrue">
<image
:src="webUrl+'/icon/icon-order-status5.png'"
@@ -213,6 +213,7 @@
<u-swiper
:list="userCenterCarousel"
keyName="image"
img-mode="aspectFit"
@click="handleSwiper"
></u-swiper>
</view>
@@ -332,11 +333,10 @@ export default {
allowEnter: true
},
{
text: '帮助中心',
url: '',
text: '商品足迹',
url: '/pages/user/History/index',
icon: '/icon/icon-help.png',
allowEnter: true,
showTip: true
allowEnter: true
},
{
text: '设置中心',
@@ -426,10 +426,18 @@ export default {
this.$yrouter.push('/pages/order/ReturnList/index')
},
goMyOrder(type) {
const types = {
0: 0,
1: 1,
2: 2,
3: 3,
4: 5,
5: 4,
}
this.$yrouter.push({
path: '/pages/order/MyOrder/index',
query: {
type
type: types[type]
}
})
},
@@ -524,6 +532,9 @@ export default {
</script>
<style lang="less">
.full-width{
width: 100%;
}
.innTag {
margin-left: -30rpx;
width: 196rpx;
pages/user/address/AddAddress/index.vue
+15 -1
View File
@@ -368,7 +368,7 @@ export default {
is_default: isDefault ? true : false,
post_code: ""
};
postAddress(data).then(function () {
postAddress(data).then(function (res) {
if (that.id) {
uni.showToast({
title: "修改成功",
@@ -382,6 +382,20 @@ export default {
duration: 2000
});
}
if(that.$yroute.query.choosMode == 1) {
const item = {
id: res.data.id,
realName: name,
phone: phone,
district: that.address.district,
province: that.address.province,
city: that.address.city,
detail: detail,
is_default: isDefault ? true : false,
post_code: ""
}
uni.$emit('chooseAddress', item)
}
that.$yrouter.back();
});
} catch (err) {
pages/user/address/AddressManagement/index.vue
+1 -1
View File
@@ -6,7 +6,7 @@
>
<view style="margin-bottom: 12rpx;" class="line" v-if="addressList.length > 0">
<image :src="webUrl+'/20230304135025917856.png'"/>
<!-- <image :src="webUrl+'/20230304135025917856.png'"/> -->
</view>
<view style="position: relative;" class="item" v-for="(item, addressListIndex) in addressList"
:key="addressListIndex" @click="tapAddress(item)">
pagesInn/inn/innHome.vue
+4 -4
View File
@@ -469,10 +469,10 @@ export default {
height: '500rpx'
},
tabList: [
{ text: '精选商品', value: 0, isShow: true },
{ text: '最新资讯', value: 1, isShow: true },
{ text: '企业文化', value: 2, isShow: true },
{ text: '商家资质', value: 3, isShow: true }
{ text: '商品', value: 0, isShow: true },
{ text: '资讯', value: 1, isShow: true },
{ text: '文化', value: 2, isShow: true },
{ text: '资质', value: 3, isShow: true }
],
isLoadGoodListoSuccess: false,
isLoadInfoListSuccess: false,
pagesInn/inn/innProfileEdit.vue
+6 -1
View File
@@ -331,6 +331,11 @@ export default {
})
},
submit() {
const suffixs = ['.png', '.jpg', '.jpeg', '.bmp', '.gif', '.webp', '.psd', '.svg', '.tiff']
const suffix = this.innApplyInfo.cover ? this.innApplyInfo.cover.substring(this.innApplyInfo.cover.lastIndexOf(".")) : '';
const isImg = suffixs.indexOf(suffix.toLowerCase()) > -1
console.log(suffix);
if(this.loading) {
return
}
@@ -338,7 +343,7 @@ export default {
this.$dialog.error('请上传店铺LOGO')
return
}
if (!this.innApplyInfo.cover && this.innApplyInfo.coverType === 1) {
if (!isImg && this.innApplyInfo.coverType === 1) {
this.$dialog.error('请上传店铺封面图片')
return
}
pkg_common/views/room.vue
+48 -14
View File
@@ -26,28 +26,47 @@
</view>
<view class="msg v12-d-flex" style="box-sizing: content-box" v-if="item.msg_type===2">
<view class="goods-logo">
<image class="img v12-radius-8" :src="params.cover"></image>
<image class="img v12-radius-8" :src="wsJson(item.msg_content).cover"></image>
</view>
<view class="conent v12-ml-3 v12-justify-between v12-flex-column">
<view class="">
<view class="goodsName one-t v12-font-26">
{{ params.goodsName }}
{{ wsJson(item.msg_content).goodsName }}
</view>
<view class="goodsSku v12-secondary-dark-text v12-font-22 v12-font-weight-400 one-t">
{{ params.skuStr }}
{{ wsJson(item.msg_content).skuStr }}
</view>
</view>
<view class="price v12-primary-text v12-font-24">
￥{{ params.price }}
￥{{ wsJson(item.msg_content).price }}
</view>
</view>
</view>
</view>
<image class="cover" :src="item.header || webUrl+'/20221114155314348118.png'"/>
</view>
</view>
<view class="msg v12-d-flex goods-link" style="box-sizing: content-box" v-if="params" @click="sendGoods">
<view class="goods-logo">
<image class="img v12-radius-8" :src="params.cover"></image>
</view>
<view class="conent v12-ml-3 v12-justify-between v12-flex-column">
<view class="">
<view class="goodsName one-t v12-font-26">
{{ params.goodsName }}
</view>
<view class="goodsSku v12-secondary-dark-text v12-font-22 v12-font-weight-400 one-t">
{{ params.skuStr }}
</view>
</view>
<view class="price v12-primary-text v12-font-24">
￥{{ params.price }}
</view>
</view>
</view>
</view>
<view class="footer flex jc-between ai-end v12-align-center">
<image :src="webUrl+'/20221014095236624035.png'" @click="getUploadToken"></image>
<view class="input-box">
@@ -87,13 +106,16 @@ export default {
roomId: null, //房间ID
content: "", //消息内容
list: [], //消息列表,
params: {}
params: null
}
},
onLoad(options) {
this.storeId = options.id;
this.merName = options.name;
this.params = options.params && JSON.parse(options.params) || {}
this.params = options.params && JSON.parse(options.params) || null
setTimeout(()=>{
this.params = null
}, 10000)
if (this.merName!="undefined" && this.merName!="null") {
uni.setNavigationBarTitle({
title: this.merName
@@ -110,6 +132,9 @@ export default {
}
},
methods: {
wsJson(json) {
return JSON.parse(json)
},
getUploadToken() {
let that = this;
@@ -165,7 +190,14 @@ export default {
}
})
},
sendGoods() {
if(Object.values(this.params).length > 0) {
this.content = JSON.stringify(this.params)
// this.list.push(this.params)
this.userSend(2)
}
this.params = null
},
// 预览图片
preview(url) {
uni.previewImage({
@@ -186,11 +218,7 @@ export default {
console.log('WebSocket连接已打开！', res);
this.socketOpen = true;
this.createRoom();
if(Object.values(this.params).length > 0) {
this.content = JSON.stringify(this.params)
// this.list.push(this.params)
this.userSend(2)
}
});
uni.onSocketError(err => {
@@ -292,6 +320,12 @@ export default {
</script>
<style scoped lang="less">
.goods-link{
box-sizing: content-box;
position: fixed;
bottom: 200rpx;
right: 20rpx;
}
.goodsName,.goodsSku{
max-width: 400rpx;
}
@@ -307,7 +341,7 @@ export default {
}
.main {
padding: 0 32rpx 130rpx;
padding: 0 32rpx 160rpx;
.datetime {
margin: 30rpx 0;
pkg_common/views/roomLogs.vue
+46 -11
View File
@@ -3,17 +3,31 @@
<view v-if="list.length > 0">
<view
v-for="(item,index) in list"
:key="index" @click="goRoom(item)"
class="item flex"
:key="index"
class="item"
>
<image class="cover flex-0" :src="item.store_avatar || webUrl+'/20221114155314348118.png'"/>
<view>
<view class="flex jc-between ai-center">
<view class="name">{{ item.store_name }}</view>
<view class="datetime" v-if="item.last_msg">{{ item.last_msg.created_at }}</view>
<u-swipe-action
class="v12-mt-3"
>
<u-swipe-action-item
:options="options1"
:key="index"
@click.stop="removeRoom(item.room_id)"
>
<view>
<view class="v12-justify-between v12-pa-3 flex" @click="goRoom(item)">
<image class="cover flex-0" :src="item.store_avatar || webUrl+'/20221114155314348118.png'"/>
<view>
<view class="flex jc-between ai-center">
<view class="name">{{ item.store_name }}</view>
<view class="datetime" v-if="item.last_msg">{{ item.last_msg.created_at }}</view>
</view>
<view class="sub one-t" v-if="item.last_msg">{{ item.last_msg.msg_type===0?item.last_msg.msg_content:'[图片]' }}</view>
</view>
</view>
</view>
<view class="sub one-t" v-if="item.last_msg">{{ item.last_msg.msg_type===0?item.last_msg.msg_content:'[图片]' }}</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</view>
<view class="v4-nodata" v-if="list.length===0">
@@ -32,7 +46,8 @@ export default {
return {
webUrl:this.$VUE_APP_RESOURCES_URL,
uid: null,
list: []
list: [],
options1: [{text: '删除', style: {color: '#fff', backgroundColor: '#C52733'} }]
}
},
computed: mapGetters(['userInfo']),
@@ -56,6 +71,27 @@ export default {
}
}
})
},
removeRoom(id) {
const _this = this
uni.showModal({
title:'确定删除消息？',
success:(res)=>{
if(res.confirm) {
uni.request({
url: _this.$SERVICE_API_URL + '//chat-remove',
method: 'POST',
data: {room_id: id},
success:(res)=>{
if(res.data.status_code === 200) {
_this.fetchList()
}
},
})
}
},
})
}
}
}
@@ -70,7 +106,6 @@ export default {
.item {
margin-bottom: 24rpx;
padding: 28rpx 20rpx 24rpx;
border-radius: 8rpx;
background: #FFFFFF;
pkg_product/components/ThemePageTemplate4.vue
+2 -2
View File
@@ -9,7 +9,7 @@
<view class="page-wrap">
<view class="page-2">
<image
:src="templateProperties.page3BackgroundImage"
:src="templateProperties.page2BackgroundImage"
class="section-bg"
mode="widthFix"
/>
@@ -20,7 +20,7 @@
mode="scaleToFill"
/>
<image
v-for="(item, index) in templateProperties.page3Links"
v-for="(item, index) in templateProperties.page2Links"
:key="index"
:src="item.image"
class="item"
pkg_product/views/famousList.vue
+5 -4
View File
@@ -157,15 +157,15 @@
</view>
<image
v-if="!searchEvent"
:src="webUrl + '/home/no-data-bg.png'"
:src="webUrl + '/orderIcon/nodata.png'"
mode="widthFix"
class="loadend"
class="loadend v12-mt-16"
/>
</view>
<image
v-if="list.length === 0"
:src="webUrl + '/orderIcon/nodata.png'"
class="img-nodata"
class="img-nodata v12-mt-16"
mode="scaleToFill"
/>
</view>
@@ -299,7 +299,8 @@ export default {
}).exec()
},
countyItemClick(item) {
uni.navigateTo({ url: `/pkg_product/views/famousQianxian?id=${item.id}` })
if (!item.hasShopPage) return
uni.navigateTo({ url: `/pkg_product/views/famousQianxianShop?id=${item.id}` })
}
}
}
pkg_product/views/famousQianxianShop.vue
+134 -16
View File
@@ -213,6 +213,11 @@
</view>
</view>
</view>
<image
:src="webUrl + '/home/no-data-bg.png'"
mode="widthFix"
class="no-data-loadend"
/>
</view>
</view>
<goo-skeleton v-else />
@@ -225,17 +230,22 @@
<view class="county-intro-wrap">
<view class="title">
县城介绍
<view class="btn" @click="toggleCountyIntro">
<!-- <view class="btn" @click="toggleCountyIntro">
{{ toggleCountyIntroStatus ? '收起' : '展开' }}
<image :src="webUrl + '/page/qianxian/icon-arrow.png'" class="icon" />
</view>
</view> -->
</view>
<view
<!-- <view
:class="toggleCountyIntroStatus ? 'show-more' : ''"
class="intro-main"
>
<rich-text :nodes="inn.countyIntro" />
<view v-if="!toggleCountyIntroStatus" class="layer" />
</view> -->
<view class="v12-py-3">
<u-read-more ref="uReadMore" showHeight="200">
<u-parse :content="inn.countyIntro" @load="load"></u-parse>
</u-read-more>
</view>
<view class="title">
图片
@@ -283,6 +293,11 @@
</view>
</view>
</view>
<image
:src="webUrl + '/home/no-data-bg.png'"
mode="widthFix"
class="no-data-loadend"
/>
</view>
<goo-skeleton v-else />
</view>
@@ -479,12 +494,57 @@
</view>
</view>
</view>
<view v-else class="no-data">暂无村屋出租</view>
<view v-else class="no-data">暂无村屋资讯</view>
</view>
</view>
</view>
</view>
</view>
<!-- 产品 -->
<view
v-if="activeIndex === 4"
class="good-list-wrap"
>
<view class="good-list-cont">
<view class="list-cont-left">
<view
v-for="(item, index) in leftList"
:key="index"
class="item flex"
>
<xdd-product-item
:item="item"
:show-coupon="false"
name-key="productName"
image-key="productImage"
price-key="productPrice"
@view="goGoodsCon(item)"
/>
</view>
</view>
<view class="list-cont-right">
<view
v-for="(item, index) in rightList"
:key="index"
class="item flex"
>
<xdd-product-item
:item="item"
:show-coupon="false"
name-key="productName"
image-key="productImage"
price-key="productPrice"
@view="goGoodsCon(item)"
/>
</view>
</view>
</view>
<image
:src="webUrl + '/home/no-data-bg.png'"
mode="widthFix"
class="loadend"
/>
</view>
</view>
</view>
<goo-skeleton v-else />
@@ -526,17 +586,20 @@ import {
getCountyFamousIndustry,
getCountyFamousIndustryProject,
getCountyFamousInvestmentFile,
getCountyFamousVillage
getCountyFamousVillage,
getCountyFamousCityDetail
} from '@/api/qianxian'
import {formatDateTime} from '@/utils'
import {getUrlParam} from '@/utils/common.js'
import imgBox from '@/components/imageTypeSet/imagebox.vue'
import XddProductItem from '@/components/xdd-product-item'
import cookie from '@/utils/store/cookie'
import { pageListenMixins } from '@/mixins/pageListenMixins'
export default {
components: {
imgBox
imgBox,
XddProductItem
},
mixins: [pageListenMixins],
data() {
@@ -568,7 +631,8 @@ export default {
{ text: '资讯', value: 0, isShow: true },
{ text: '文化', value: 1, isShow: true },
{ text: '攻略', value: 2, isShow: true },
{ text: '产业', value: 3, isShow: true }
{ text: '产业', value: 3, isShow: true },
{ text: '产品', value: 4, isShow: true }
],
// 资讯
infoArray: [],
@@ -591,9 +655,12 @@ export default {
industryTab: [
{ name: '产业项目', icon: '/page/qianxian/icon-04.png' },
{ name: '招商政策', icon: '/page/qianxian/icon-03.png' },
{ name: '村屋出租', icon: '/page/qianxian/icon-07.png' }
{ name: '村屋资讯', icon: '/page/qianxian/icon-07.png' }
],
industryTabIndex: 0
industryTabIndex: 0,
// 产品
leftList: [],
rightList: [],
}
},
// 必须在页面加 onPageScroll(e){} ，才能滑动显示背景
@@ -620,6 +687,17 @@ export default {
this.getListReq()
},
methods: {
load() {
this.$refs.uReadMore.init();
},
goGoodsCon(item) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: item.productId
}
})
},
getListReq() {
// getPoster(this.id).then(({data}) => this.posterUrl = data)
getCountyFamousIndustry({
@@ -662,6 +740,23 @@ export default {
this.villageList = data.records || []
}
})
getCountyFamousCityDetail(this.id).then(res => {
const { success, data } = res
if (success) {
const products = data.products || []
products.map((item, index) => {
item.isOldBrand = 0
item.isLandmarkGoods = 0
item.isCountyFamous = 1
if (index % 2 === 0) {
this.leftList.push(item)
}
if (index % 2 === 1) {
this.rightList.push(item)
}
})
}
})
},
getShopDetailReq() {
const _this = this
@@ -1186,9 +1281,9 @@ export default {
}
}
.top-tab {
padding: 40rpx 0 20rpx 0;
padding: 40rpx 20rpx 20rpx 20rpx;
.tab {
margin: 0 20rpx;
width: 20%;
.tab-item {
height: 52rpx;
padding: 0 30rpx;
@@ -1350,6 +1445,7 @@ export default {
.intro-main {
position: relative;
height: 400rpx;
min-height: 400rpx;
margin: 30rpx 0 50rpx 0;
overflow: hidden;
&.show-more {
@@ -1365,16 +1461,14 @@ export default {
}
}
.pic-list {
// display: flex;
// flex-wrap: wrap;
width: 100%;
width: 660rpx;
padding: 30rpx 0 0 0;
margin: 0 auto;
.item {
// width: calc(50% - 10rpx);
margin: 0 20rpx 20rpx 0;
.img {
display: block;
width: 100%;
width: 320rpx;
height: 360rpx;
border-radius: 16rpx;
}
@@ -1653,10 +1747,34 @@ export default {
}
}
}
.good-list-wrap {
background-color: #f6f6f6;
.loadend {
width: 100%;
}
}
.good-list-cont {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
padding: 0 21rpx 21rpx 21rpx;
.list-cont-left,
.list-cont-right {
width: calc(50% - 11rpx);
}
.item {
position: relative;
margin: 21rpx 0 0 0;
}
}
.tab-no-data {
text-align: center;
font-size: 32rpx;
color: #999;
line-height: 200rpx;
}
.no-data-loadend {
width: 100%;
}
</style>
pkg_product/views/famousQianxianVillageShop.vue
+7 -9
View File
@@ -56,8 +56,8 @@
<image :src="inn.logo" v-if="inn.logo"></image>
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
</view>
<view class="a3 flex" style="width: 100%">
<view class="inn-owner one-t">{{ inn.name }}</view>
<view class="a3 flex v12-justify-between v12-align-center" style="width: calc(100% - 130rpx)">
<view class="inn-owner more-t">{{ inn.name }}</view>
<view class="inn-owner-desc">
{{ inn.contact }}/联系人
</view>
@@ -232,9 +232,9 @@ export default {
height: '500rpx'
},
tabList: [
{ text: '村屋详情', value: 0, isShow: true },
{ text: '村屋介绍', value: 1, isShow: true },
{ text: '村屋资讯', value: 2, isShow: true }
{ text: '详情', value: 0, isShow: true },
{ text: '介绍', value: 1, isShow: true },
{ text: '资讯', value: 2, isShow: true }
],
// 资讯
infoArray: [],
@@ -444,17 +444,15 @@ export default {
line-height: 48rpx;
}
.inn-owner {
width: calc(100% - 240rpx);
font-size: 36rpx;
flex: 2;
font-size: 32rpx;
font-weight: bold;
color: #333;
line-height: 40rpx;
}
.inn-owner-desc {
margin: 0 0 0 20rpx;
color: #999;
font-size: 24rpx;
line-height: 40rpx;
}
.inn-tag-wrap {
margin-top: 10rpx;
pkg_user/views/myFavorite.vue
+7 -3
View File
@@ -47,6 +47,7 @@
v-if="tabsIndex === 0"
:class="{'manage-state': isManage}"
class="scroll-box"
:style="{background : productList.length === 0 ? '#f5f5f5' : '#fff !important'}"
scroll-y
@scrolltolower="fetchProduct()"
>
@@ -102,6 +103,7 @@
v-if="tabsIndex === 1"
:class="{'manage-state':isManage}"
class="scroll-box"
:style="{background : storeList.length === 0 ? '#f5f5f5' : '#fff !important'}"
scroll-y
@scrolltolower="fetchStore()"
>
@@ -169,6 +171,7 @@
v-if="tabsIndex === 2"
scroll-y
:class="{'manage-state':isManage}"
:style="{background : videoList.length === 0 ? '#f5f5f5' : '#fff !important'}"
class="scroll-box"
@scrolltolower="fetchVideo()"
>
@@ -217,6 +220,7 @@
v-if="tabsIndex === 3"
:class="{'manage-state':isManage}"
class="scroll-box county-scroll"
:style="{background : countyFamousList.length === 0 ? '#f5f5f5' : '#fff !important'}"
scroll-y
@scrolltolower="fetchCountyFamous()"
>
@@ -631,13 +635,13 @@ export default {
.scroll-box {
height: calc(100vh - 168rpx);
box-sizing: border-box;
background: #FFFFFF;
background: #f5f5f5;
&.county-scroll {
background-color: #f0f0f0;
background-color: #f5f5f5;
}
.no-data {
padding: 100px 0 0 0;
border-top: 20px solid #f0f0f0;
border-top: 20px solid #f5f5f5;
.img {
display: block;
width: 305rpx;
uni_modules/uni-countdown/changelog.md
+26
View File
@@ -0,0 +1,26 @@
## 1.2.3（2024-02-20）
- 新增 支持控制小时，分钟的显隐：showHour showMinute
## 1.2.2（2022-01-19）
- 修复 在微信小程序中样式不生效的bug
## 1.2.1（2022-01-18）
- 新增 update 方法 ，在动态更新时间后，刷新组件
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown)
## 1.1.3（2021-10-18）
- 重构
- 新增 font-size 支持自定义字体大小
## 1.1.2（2021-08-24）
- 新增 支持国际化
## 1.1.1（2021-07-30）
- 优化 vue3下小程序事件警告的问题
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.5（2021-06-18）
- 修复 uni-countdown 重复赋值跳两秒的 bug
## 1.0.4（2021-05-12）
- 新增 组件示例地址
## 1.0.3（2021-05-08）
- 修复 uni-countdown 不能控制倒计时的 bug
## 1.0.2（2021-02-04）
- 调整为uni_modules目录规范
uni_modules/uni-countdown/components/uni-countdown/i18n/en.json
+6
View File
@@ -0,0 +1,6 @@
{
"uni-countdown.day": "day",
"uni-countdown.h": "h",
"uni-countdown.m": "m",
"uni-countdown.s": "s"
}
uni_modules/uni-countdown/components/uni-countdown/i18n/index.js
+8
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
}
uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json
+6
View File
@@ -0,0 +1,6 @@
{
"uni-countdown.day": "天",
"uni-countdown.h": "时",
"uni-countdown.m": "分",
"uni-countdown.s": "秒"
}
uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json
+6
View File
@@ -0,0 +1,6 @@
{
"uni-countdown.day": "天",
"uni-countdown.h": "時",
"uni-countdown.m": "分",
"uni-countdown.s": "秒"
}
uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
+281
View File
@@ -0,0 +1,281 @@
<template>
<view class="uni-countdown">
<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
<text v-if="showHour" :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
<text v-if="showHour" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
<text v-if="showMinute" :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
<text v-if="showMinute" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text>
</view>
</template>
<script>
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const {
t
} = initVueI18n(messages)
/**
* Countdown 倒计时
* @description 倒计时组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=25
* @property {String} backgroundColor 背景色
* @property {String} color 文字颜色
* @property {Number} day 天数
* @property {Number} hour 小时
* @property {Number} minute 分钟
* @property {Number} second 秒
* @property {Number} timestamp 时间戳
* @property {Boolean} showDay = [true|false] 是否显示天数
* @property {Boolean} showHour = [true|false] 是否显示小时
* @property {Boolean} showMinute = [true|false] 是否显示分钟
* @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
* @property {String} splitorColor 分割符号颜色
* @event {Function} timeup 倒计时时间到触发事件
* @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
*/
export default {
name: 'UniCountdown',
emits: ['timeup'],
props: {
showDay: {
type: Boolean,
default: true
},
showHour: {
type: Boolean,
default: true
},
showMinute: {
type: Boolean,
default: true
},
showColon: {
type: Boolean,
default: true
},
start: {
type: Boolean,
default: true
},
backgroundColor: {
type: String,
default: ''
},
color: {
type: String,
default: '#333'
},
fontSize: {
type: Number,
default: 14
},
splitorColor: {
type: String,
default: '#333'
},
day: {
type: Number,
default: 0
},
hour: {
type: Number,
default: 0
},
minute: {
type: Number,
default: 0
},
second: {
type: Number,
default: 0
},
timestamp: {
type: Number,
default: 0
}
},
data() {
return {
timer: null,
syncFlag: false,
d: '00',
h: '00',
i: '00',
s: '00',
leftTime: 0,
seconds: 0
}
},
computed: {
dayText() {
return t("uni-countdown.day")
},
hourText(val) {
return t("uni-countdown.h")
},
minuteText(val) {
return t("uni-countdown.m")
},
secondText(val) {
return t("uni-countdown.s")
},
timeStyle() {
const {
color,
backgroundColor,
fontSize
} = this
return {
color,
backgroundColor,
fontSize: `${fontSize}px`,
width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放
lineHeight: `${fontSize * 20 / 14}px`,
borderRadius: `${fontSize * 3 / 14}px`,
}
},
splitorStyle() {
const { splitorColor, fontSize, backgroundColor } = this
return {
color: splitorColor,
fontSize: `${fontSize * 12 / 14}px`,
margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
}
}
},
watch: {
day(val) {
this.changeFlag()
},
hour(val) {
this.changeFlag()
},
minute(val) {
this.changeFlag()
},
second(val) {
this.changeFlag()
},
start: {
immediate: true,
handler(newVal, oldVal) {
if (newVal) {
this.startData();
} else {
if (!oldVal) return
clearInterval(this.timer)
}
}
}
},
created: function(e) {
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
this.countDown()
},
// #ifndef VUE3
destroyed() {
clearInterval(this.timer)
},
// #endif
// #ifdef VUE3
unmounted() {
clearInterval(this.timer)
},
// #endif
methods: {
toSeconds(timestamp, day, hours, minutes, seconds) {
if (timestamp) {
return timestamp - parseInt(new Date().getTime() / 1000, 10)
}
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
},
timeUp() {
clearInterval(this.timer)
this.$emit('timeup')
},
countDown() {
let seconds = this.seconds
let [day, hour, minute, second] = [0, 0, 0, 0]
if (seconds > 0) {
day = Math.floor(seconds / (60 * 60 * 24))
hour = Math.floor(seconds / (60 * 60)) - (day * 24)
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
} else {
this.timeUp()
}
if (day < 10) {
day = '0' + day
}
if (hour < 10) {
hour = '0' + hour
}
if (minute < 10) {
minute = '0' + minute
}
if (second < 10) {
second = '0' + second
}
this.d = day
this.h = hour
this.i = minute
this.s = second
},
startData() {
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
if (this.seconds <= 0) {
this.seconds = this.toSeconds(0, 0, 0, 0, 0)
this.countDown()
return
}
clearInterval(this.timer)
this.countDown()
this.timer = setInterval(() => {
this.seconds--
if (this.seconds < 0) {
this.timeUp()
return
}
this.countDown()
}, 1000)
},
update(){
this.startData();
},
changeFlag() {
if (!this.syncFlag) {
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
this.startData();
this.syncFlag = true;
}
}
}
}
</script>
<style lang="scss" scoped>
$font-size: 14px;
.uni-countdown {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&__splitor {
margin: 0 2px;
font-size: $font-size;
color: #333;
}
&__number {
border-radius: 3px;
text-align: center;
font-size: $font-size;
}
}
</style>
uni_modules/uni-countdown/package.json
+83
View File
@@ -0,0 +1,83 @@
{
"id": "uni-countdown",
"displayName": "uni-countdown 倒计时",
"version": "1.2.3",
"description": "CountDown 倒计时组件",
"keywords": [
"uni-ui",
"uniui",
"countdown",
"倒计时"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"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": "y"
}
}
}
}
}
uni_modules/uni-countdown/readme.md
+10
View File
@@ -0,0 +1,10 @@
## CountDown 倒计时
> **组件名：uni-countdown**
> 代码块： `uCountDown`
倒计时组件。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839