完成3.0功能升级
This commit is contained in:
Gao xiaosong
+8
-1
@@ -3,13 +3,20 @@ import request from "@/utils/request";
|
|||||||
/**
|
/**
|
||||||
* 省市区
|
* 省市区
|
||||||
*/
|
*/
|
||||||
export function district(data) {
|
export function getCity(data) {
|
||||||
return request.get("/city_list", data, {
|
return request.get("/city_list", data, {
|
||||||
// return request.get("/citys", data, {
|
// return request.get("/citys", data, {
|
||||||
login: false
|
login: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function district(data) {
|
||||||
|
// return request.get("/city_list", data, {
|
||||||
|
return request.get("/citys", data, {
|
||||||
|
login: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 用户登录
|
* 用户登录
|
||||||
* @param data object 用户账号密码
|
* @param data object 用户账号密码
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+11
-15
@@ -1381,8 +1381,9 @@ page {
|
|||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
padding-top: 0.34*100rpx;
|
padding-top: 0.34*100rpx;
|
||||||
margin: 0 0.3*100rpx;
|
margin: 0 0.3*100rpx;
|
||||||
&.no-border{
|
|
||||||
border:0;
|
&.no-border {
|
||||||
|
border: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2405,8 +2406,8 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.user .wrapper .myService .serviceList .item .pictrue {
|
.user .wrapper .myService .serviceList .item .pictrue {
|
||||||
width: 0.52*100rpx;
|
width: 36rpx;
|
||||||
height: 0.52*100rpx;
|
height: 36rpx;
|
||||||
margin-right: 0.16*100rpx;
|
margin-right: 0.16*100rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3583,22 +3584,17 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.personal-data .wrapper .wrapList .item {
|
.personal-data .wrapper .wrapList .item {
|
||||||
width: 6.9*100rpx;
|
width: 100%;
|
||||||
height: 1.6*100rpx;
|
/*height: 1.6rem;*/
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
border-radius: 0.2*100rpx;
|
border-radius: 20rpx;
|
||||||
margin-bottom: 0.22*100rpx;
|
|
||||||
padding: 0 0.3*100rpx;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 0.02*100rpx solid #f8f8f8;
|
// border: 0.02rem solid #f8f8f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.personal-data .wrapper .wrapList .item.on {
|
.personal-data .wrapper .wrapList .item.on {
|
||||||
border-color: #e93323;
|
|
||||||
border-radius: 0.2*100rpx;
|
|
||||||
background: url("https://h5.yixiang.co/static/images/figure.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-color: #fff9f9;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.personal-data .wrapper .wrapList .item .picTxt {
|
.personal-data .wrapper .wrapList .item .picTxt {
|
||||||
@@ -4415,7 +4411,7 @@ page {
|
|||||||
width: 1.8*100rpx;
|
width: 1.8*100rpx;
|
||||||
height: 1.8*100rpx;
|
height: 1.8*100rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bargain .wrapper .pictxt .pictrue image {
|
.bargain .wrapper .pictxt .pictrue image {
|
||||||
|
|||||||
@@ -0,0 +1,285 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<text class="uni-input" @tap="open">{{value}}</text>
|
||||||
|
<uni-popup ref="popup" type="bottom">
|
||||||
|
<view class="cityselect">
|
||||||
|
<view class="cityselect-header">
|
||||||
|
<view class="cityselect-title">
|
||||||
|
<text>请选择地址</text>
|
||||||
|
</view>
|
||||||
|
<view class="cityselect-nav">
|
||||||
|
<view class="item" v-if="provinceActive" @tap="changeNav(0)">
|
||||||
|
<text>{{provinceActive.n}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="item" v-if="cityActive" @tap="changeNav(1)">
|
||||||
|
<text>{{cityActive.n}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="item" v-if="districtActive" @tap="changeNav(2)">
|
||||||
|
<text>{{districtActive.n}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="item active" v-else>
|
||||||
|
<text>请选择</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cityselect-content">
|
||||||
|
<swiper class="swiper" disable-touch="true" touchable="false" :current="current">
|
||||||
|
<swiper-item>
|
||||||
|
<scroll-view scroll-y class="cityScroll">
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
class="cityselect-item"
|
||||||
|
v-for="(item,index) in province"
|
||||||
|
:key="index"
|
||||||
|
@tap="selectProvince(index)"
|
||||||
|
>
|
||||||
|
<view class="cityselect-item-box">
|
||||||
|
<text>{{item.n}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<scroll-view scroll-y class="cityScroll">
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
class="cityselect-item"
|
||||||
|
v-for="(item,index) in city"
|
||||||
|
:key="index"
|
||||||
|
@tap="selectCity(index)"
|
||||||
|
>
|
||||||
|
<view class="cityselect-item-box">
|
||||||
|
<text>{{item.n}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<scroll-view scroll-y class="cityScroll">
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
class="cityselect-item"
|
||||||
|
v-for="(item,index) in district"
|
||||||
|
:key="index"
|
||||||
|
@tap="selectDistrict(index)"
|
||||||
|
>
|
||||||
|
<view class="cityselect-item-box">
|
||||||
|
<text>{{item.n}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script type="text/babel">
|
||||||
|
import uniPopup from "./uni-popup/uni-popup.vue";
|
||||||
|
import uniPopupMessage from "./uni-popup/uni-popup-message.vue";
|
||||||
|
import uniPopupDialog from "./uni-popup/uni-popup-dialog.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CitySelect",
|
||||||
|
components: {
|
||||||
|
uniPopup,
|
||||||
|
uniPopupMessage,
|
||||||
|
uniPopupDialog
|
||||||
|
},
|
||||||
|
props: ["callback", "items", "defaultValue"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: "请选择",
|
||||||
|
show: this.value,
|
||||||
|
province: [],
|
||||||
|
provinceActive: null,
|
||||||
|
city: [],
|
||||||
|
cityActive: null,
|
||||||
|
district: [],
|
||||||
|
districtActive: null,
|
||||||
|
current: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
items(nextItem) {
|
||||||
|
console.log(nextItem);
|
||||||
|
this.province = nextItem;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
console.log(this);
|
||||||
|
if (this.defaultValue) {
|
||||||
|
this.value = this.defaultValue;
|
||||||
|
}
|
||||||
|
this.province = this.items;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.province = this.items;
|
||||||
|
this.provinceActive = null;
|
||||||
|
this.cityActive = null;
|
||||||
|
this.districtActive = null;
|
||||||
|
this.city = [];
|
||||||
|
this.district = [];
|
||||||
|
this.current = 0;
|
||||||
|
this.$refs.popup.open();
|
||||||
|
},
|
||||||
|
changeNav(index) {
|
||||||
|
if (index == 0) {
|
||||||
|
this.provinceActive = null;
|
||||||
|
}
|
||||||
|
if (index == 1) {
|
||||||
|
this.cityActive = null;
|
||||||
|
}
|
||||||
|
if (index == 2) {
|
||||||
|
this.districtActive = null;
|
||||||
|
}
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
selectProvince(index) {
|
||||||
|
this.provinceActive = this.province[index];
|
||||||
|
this.city = this.province[index].c;
|
||||||
|
this.current = 1;
|
||||||
|
},
|
||||||
|
selectCity(index) {
|
||||||
|
this.cityActive = this.city[index];
|
||||||
|
this.district = this.city[index].c;
|
||||||
|
this.current = 2;
|
||||||
|
},
|
||||||
|
selectDistrict(index) {
|
||||||
|
this.districtActive = this.district[index];
|
||||||
|
this.value = `${this.provinceActive.n} ${this.cityActive.n} ${this.districtActive.n}`;
|
||||||
|
// this.callback({
|
||||||
|
// province: {
|
||||||
|
// id: this.provinceActive.v,
|
||||||
|
// name: this.provinceActive.n
|
||||||
|
// },
|
||||||
|
// city: {
|
||||||
|
// id: this.cityActive.v,
|
||||||
|
// name: this.cityActive.n
|
||||||
|
// },
|
||||||
|
// district: {
|
||||||
|
// id: this.districtActive.v,
|
||||||
|
// name: this.districtActive.n
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
this.$emit("callback", {
|
||||||
|
province: {
|
||||||
|
id: this.provinceActive.v,
|
||||||
|
name: this.provinceActive.n
|
||||||
|
},
|
||||||
|
city: {
|
||||||
|
id: this.cityActive.v,
|
||||||
|
name: this.cityActive.n
|
||||||
|
},
|
||||||
|
district: {
|
||||||
|
id: this.districtActive.v,
|
||||||
|
name: this.districtActive.n
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.$refs.popup.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.cityselect {
|
||||||
|
width: 100%;
|
||||||
|
height: 75%;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 1502;
|
||||||
|
position: relative;
|
||||||
|
height: 800rpx;
|
||||||
|
.cityScroll {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.swiper {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cityselect-header {
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.cityselect-title {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
height: 95rpx;
|
||||||
|
line-height: 95rpx;
|
||||||
|
position: relative;
|
||||||
|
&:cityselect-title:after {
|
||||||
|
height: 1px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cityselect-nav {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.item {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #222;
|
||||||
|
display: block;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 92rpx;
|
||||||
|
padding: 0 16rpx;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 40%;
|
||||||
|
&.active {
|
||||||
|
color: #f23030 !important;
|
||||||
|
border-bottom: 1rpx solid #f23030;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cityselect-content {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.cityselect-item {
|
||||||
|
.cityselect-item-box {
|
||||||
|
display: block;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 64rpx;
|
||||||
|
max-height: 65rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
height: 1rpx;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="show?'yd-mask g-fix-ios-overflow-scrolling-bug':'yd-mask' "
|
||||||
|
ref="scrollView"
|
||||||
|
:style="styles"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script type="text/babel">
|
||||||
|
export default {
|
||||||
|
name: "yd-mask",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: this.value
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
bgcolor: {
|
||||||
|
type: String,
|
||||||
|
default: "#000"
|
||||||
|
},
|
||||||
|
zindex: {
|
||||||
|
default: 1500
|
||||||
|
},
|
||||||
|
opacity: {
|
||||||
|
default: 0.5
|
||||||
|
},
|
||||||
|
animated: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
styles() {
|
||||||
|
const style = {
|
||||||
|
"z-index": this.zindex,
|
||||||
|
"background-color": this.bgcolor
|
||||||
|
};
|
||||||
|
if (this.show) {
|
||||||
|
style["opacity"] = this.opacity;
|
||||||
|
style["pointer-events"] = "auto";
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@css-prefix: yd;
|
||||||
|
|
||||||
|
.@{css-prefix} {
|
||||||
|
&-mask {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease-in;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,10 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view class="switchWindow" :class="switchActive === true ? 'on' : ''">
|
<view class="switchWindow" :class="switchActive === true ? 'on' : ''">
|
||||||
<!-- @/static/images/public.png -->
|
|
||||||
<view class="pictrue">
|
<view class="pictrue">
|
||||||
<image v-if="login_type === 'h5'" src="@/static/images/h5.png" />
|
|
||||||
<image src="@/static/images/h5.png" alt v-else />
|
|
||||||
</view>
|
</view>
|
||||||
<!-- 是否选择切换到小程序账户？ -->
|
<!-- 是否选择切换到小程序账户？ -->
|
||||||
<view class="info">
|
<view class="info">
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="evaluateWtapper">
|
<view class="evaluateWtapper">
|
||||||
<view class="evaluateItem" v-for="(item, evaluateWtapperIndex) in reply" :key="evaluateWtapperIndex">
|
<view
|
||||||
|
class="evaluateItem"
|
||||||
|
v-for="(item, evaluateWtapperIndex) in reply"
|
||||||
|
:key="evaluateWtapperIndex"
|
||||||
|
>
|
||||||
<view class="pic-text acea-row row-middle">
|
<view class="pic-text acea-row row-middle">
|
||||||
<view class="pictrue">
|
<view class="pictrue">
|
||||||
<image :src="item.avatar" class="image" />
|
<image :src="item.avatar" class="image" />
|
||||||
@@ -10,23 +14,22 @@
|
|||||||
<view class="start" :class="'star' + item.star"></view>
|
<view class="start" :class="'star' + item.star"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="time">{{ dataFormat(item.addTime) }} {{ item.suk||'' }}</view>
|
<view class="time">{{ item.createTime }} {{ item.sku||'' }}</view>
|
||||||
<view class="evaluate-infor">{{ item.comment }}</view>
|
<view class="evaluate-infor">{{ item.comment }}</view>
|
||||||
<view class="imgList acea-row">
|
<view class="imgList acea-row">
|
||||||
<view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq">
|
<view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq">
|
||||||
<image :src="itemn" class="image" />
|
<image :src="itemn" class="image" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!--<view class="reply" v-if="item.merchant_reply_content">-->
|
<view class="reply" v-if="item.merchantReplyContent">
|
||||||
<!--<text class="font-color-red">店小二</text>：{{-->
|
<span class="font-color-red">yshop店员</span>
|
||||||
<!--item.merchant_reply_content-->
|
：{{item.merchantReplyContent}}
|
||||||
<!--}}-->
|
</view>
|
||||||
<!--</view>-->
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { dataFormat } from "@/utils";
|
import { dataFormat } from "@/utils";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "UserEvaluation",
|
name: "UserEvaluation",
|
||||||
@@ -41,7 +44,7 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted: function() {},
|
mounted: function() {},
|
||||||
methods: {
|
methods: {
|
||||||
dataFormat,
|
dataFormat
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,143 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
var provinceData = [{
|
|
||||||
"label": "北京市",
|
|
||||||
"value": "11"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "天津市",
|
|
||||||
"value": "12"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "河北省",
|
|
||||||
"value": "13"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "山西省",
|
|
||||||
"value": "14"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "内蒙古自治区",
|
|
||||||
"value": "15"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "辽宁省",
|
|
||||||
"value": "21"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "吉林省",
|
|
||||||
"value": "22"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "黑龙江省",
|
|
||||||
"value": "23"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "上海市",
|
|
||||||
"value": "31"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "江苏省",
|
|
||||||
"value": "32"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "浙江省",
|
|
||||||
"value": "33"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "安徽省",
|
|
||||||
"value": "34"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "福建省",
|
|
||||||
"value": "35"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "江西省",
|
|
||||||
"value": "36"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "山东省",
|
|
||||||
"value": "37"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "河南省",
|
|
||||||
"value": "41"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "湖北省",
|
|
||||||
"value": "42"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "湖南省",
|
|
||||||
"value": "43"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "广东省",
|
|
||||||
"value": "44"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "广西壮族自治区",
|
|
||||||
"value": "45"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "海南省",
|
|
||||||
"value": "46"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "重庆市",
|
|
||||||
"value": "50"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "四川省",
|
|
||||||
"value": "51"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "贵州省",
|
|
||||||
"value": "52"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "云南省",
|
|
||||||
"value": "53"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "西藏自治区",
|
|
||||||
"value": "54"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "陕西省",
|
|
||||||
"value": "61"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "甘肃省",
|
|
||||||
"value": "62"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "青海省",
|
|
||||||
"value": "63"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "宁夏回族自治区",
|
|
||||||
"value": "64"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "新疆维吾尔自治区",
|
|
||||||
"value": "65"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "台湾",
|
|
||||||
"value": "66"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "香港",
|
|
||||||
"value": "67"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "澳门",
|
|
||||||
"value": "68"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "钓鱼岛",
|
|
||||||
"value": "69"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
export default provinceData;
|
|
||||||
@@ -1,381 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="simple-address" v-if="showPopup" @touchmove.stop.prevent="clear">
|
|
||||||
<!-- 遮罩层 -->
|
|
||||||
<view
|
|
||||||
class="simple-address-mask"
|
|
||||||
@touchmove.stop.prevent="clear"
|
|
||||||
v-if="maskClick"
|
|
||||||
:class="[ani + '-mask', animation ? 'mask-ani' : '']"
|
|
||||||
:style="{
|
|
||||||
'background-color': maskBgColor
|
|
||||||
}"
|
|
||||||
@tap="hideMask(true)"
|
|
||||||
></view>
|
|
||||||
|
|
||||||
<view class="simple-address-content simple-address--fixed" :class="[type, ani + '-content', animation ? 'content-ani' : '']">
|
|
||||||
<view class="simple-address__header">
|
|
||||||
<view class="simple-address__header-btn-box" @click="pickerCancel"><text class="simple-address__header-text">取消</text></view>
|
|
||||||
<view class="simple-address__header-btn-box" @click="pickerConfirm"><text class="simple-address__header-text" :style="{ color: themeColor }">确定</text></view>
|
|
||||||
</view>
|
|
||||||
<view class="simple-address__box">
|
|
||||||
<picker-view indicator-style="height: 70rpx;" class="simple-address-view" :value="pickerValue" @change="pickerChange">
|
|
||||||
<picker-view-column>
|
|
||||||
<!-- #ifndef APP-NVUE -->
|
|
||||||
<view class="picker-item" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<text class="picker-item" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</text>
|
|
||||||
<!-- #endif -->
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<!-- #ifndef APP-NVUE -->
|
|
||||||
<view class="picker-item" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<text class="picker-item" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</text>
|
|
||||||
<!-- #endif -->
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<!-- #ifndef APP-NVUE -->
|
|
||||||
<view class="picker-item" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<text class="picker-item" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</text>
|
|
||||||
<!-- #endif -->
|
|
||||||
</picker-view-column>
|
|
||||||
</picker-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import provinceData from './city-data/province.js';
|
|
||||||
import cityData from './city-data/city.js';
|
|
||||||
import areaData from './city-data/area.js';
|
|
||||||
export default {
|
|
||||||
name: 'simpleAddress',
|
|
||||||
props: {
|
|
||||||
mode: {
|
|
||||||
// 地址类型
|
|
||||||
// default 则代表老版本根据index索引获取数据
|
|
||||||
//
|
|
||||||
type: String,
|
|
||||||
default: 'default'
|
|
||||||
},
|
|
||||||
// 开启动画
|
|
||||||
animation: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
/* 弹出层类型，可选值；
|
|
||||||
bottom：底部弹出层
|
|
||||||
*/
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'bottom'
|
|
||||||
},
|
|
||||||
// maskClick
|
|
||||||
maskClick: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
maskBgColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'rgba(0, 0, 0, 0.4)' //背景颜色 rgba(0, 0, 0, 0.4) 为空则调用 uni.scss
|
|
||||||
},
|
|
||||||
themeColor: {
|
|
||||||
type: String,
|
|
||||||
default: '' // 主题色
|
|
||||||
},
|
|
||||||
/* 默认值 */
|
|
||||||
pickerValueDefault: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return [0, 0, 0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
ani: '',
|
|
||||||
showPopup: false,
|
|
||||||
pickerValue: [0, 0, 0],
|
|
||||||
provinceDataList: [],
|
|
||||||
cityDataList: [],
|
|
||||||
areaDataList: []
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
show(newValue) {
|
|
||||||
if (newValue) {
|
|
||||||
this.open();
|
|
||||||
} else {
|
|
||||||
this.close();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pickerValueDefault() {
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.init();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init() {
|
|
||||||
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
|
|
||||||
this.provinceDataList = provinceData;
|
|
||||||
this.cityDataList = cityData[this.pickerValueDefault[0]];
|
|
||||||
this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]];
|
|
||||||
this.pickerValue = this.pickerValueDefault;
|
|
||||||
},
|
|
||||||
handPickValueDefault() {
|
|
||||||
if (this.pickerValueDefault !== [0, 0, 0]) {
|
|
||||||
if (this.pickerValueDefault[0] > provinceData.length - 1) {
|
|
||||||
this.pickerValueDefault[0] = provinceData.length - 1;
|
|
||||||
}
|
|
||||||
if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
|
|
||||||
this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1;
|
|
||||||
}
|
|
||||||
if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
|
|
||||||
this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pickerChange(e) {
|
|
||||||
let changePickerValue = e.detail.value;
|
|
||||||
if (this.pickerValue[0] !== changePickerValue[0]) {
|
|
||||||
// 第一级发生滚动
|
|
||||||
this.cityDataList = cityData[changePickerValue[0]];
|
|
||||||
this.areaDataList = areaData[changePickerValue[0]][0];
|
|
||||||
changePickerValue[1] = 0;
|
|
||||||
changePickerValue[2] = 0;
|
|
||||||
} else if (this.pickerValue[1] !== changePickerValue[1]) {
|
|
||||||
// 第二级滚动
|
|
||||||
this.areaDataList = areaData[changePickerValue[0]][changePickerValue[1]];
|
|
||||||
changePickerValue[2] = 0;
|
|
||||||
}
|
|
||||||
this.pickerValue = changePickerValue;
|
|
||||||
this._$emit('onChange');
|
|
||||||
},
|
|
||||||
_$emit(emitName) {
|
|
||||||
let pickObj = {
|
|
||||||
label: this._getLabel(),
|
|
||||||
value: this.pickerValue,
|
|
||||||
cityCode: this._getCityCode(),
|
|
||||||
areaCode: this._getAreaCode(),
|
|
||||||
provinceCode: this._getProvinceCode(),
|
|
||||||
labelArr:this._getLabel().split('-')
|
|
||||||
};
|
|
||||||
console.log(this._getLabel().split('-'));
|
|
||||||
this.$emit(emitName, pickObj);
|
|
||||||
},
|
|
||||||
_getLabel() {
|
|
||||||
let pcikerLabel =
|
|
||||||
this.provinceDataList[this.pickerValue[0]].label + '-' + this.cityDataList[this.pickerValue[1]].label + '-' + this.areaDataList[this.pickerValue[2]].label;
|
|
||||||
return pcikerLabel;
|
|
||||||
},
|
|
||||||
_getCityCode() {
|
|
||||||
return this.cityDataList[this.pickerValue[1]].value;
|
|
||||||
},
|
|
||||||
_getProvinceCode() {
|
|
||||||
return this.provinceDataList[this.pickerValue[0]].value;
|
|
||||||
},
|
|
||||||
_getAreaCode() {
|
|
||||||
return this.areaDataList[this.pickerValue[2]].value;
|
|
||||||
},
|
|
||||||
queryIndex(params = [], type = 'value') {
|
|
||||||
// params = [ 11 ,1101,110101 ];
|
|
||||||
// 1.获取省份的index
|
|
||||||
let provinceIndex = provinceData.findIndex(res => res[type] == params[0]);
|
|
||||||
let cityIndex = cityData[provinceIndex].findIndex(res => res[type] == params[1]);
|
|
||||||
let areaIndex = areaData[provinceIndex][cityIndex].findIndex(res => res[type] == params[2]);
|
|
||||||
return {
|
|
||||||
index: [provinceIndex, cityIndex, areaIndex],
|
|
||||||
data: {
|
|
||||||
province: provinceData[provinceIndex],
|
|
||||||
city: cityData[provinceIndex][cityIndex],
|
|
||||||
area: areaData[cityIndex][0][areaIndex]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
clear() {},
|
|
||||||
hideMask() {
|
|
||||||
this._$emit('onCancel');
|
|
||||||
this.close();
|
|
||||||
},
|
|
||||||
pickerCancel() {
|
|
||||||
this._$emit('onCancel');
|
|
||||||
this.close();
|
|
||||||
},
|
|
||||||
pickerConfirm() {
|
|
||||||
this._$emit('onConfirm');
|
|
||||||
this.close();
|
|
||||||
},
|
|
||||||
open() {
|
|
||||||
this.showPopup = true;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.ani = 'simple-' + this.type;
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
close(type) {
|
|
||||||
if (!this.maskClick && type) return;
|
|
||||||
this.ani = '';
|
|
||||||
this.$nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.showPopup = false;
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.simple-address {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-address-mask {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
transition-property: opacity;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
opacity: 0;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
z-index: 99;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.mask-ani {
|
|
||||||
transition-property: opacity;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-bottom-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-center-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-address--fixed {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
transition-property: transform;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
transform: translateY(460rpx);
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
z-index: 99;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-address-content {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-content-bottom {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: translateY(500rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-ani {
|
|
||||||
transition-property: transform, opacity;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-bottom-content {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-center-content {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-address__header {
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-bottom-color: #f2f2f2;
|
|
||||||
border-bottom-style: solid;
|
|
||||||
border-bottom-width: 1rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-address--fixed-top {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-top-color: $uni-border-color;
|
|
||||||
border-top-style: solid;
|
|
||||||
border-top-width: 1rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-address__header-btn-box {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 70rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-address__header-text {
|
|
||||||
text-align: center;
|
|
||||||
font-size: $uni-font-size-base;
|
|
||||||
color: #1aad19;
|
|
||||||
line-height: 70rpx;
|
|
||||||
padding-left: 40rpx;
|
|
||||||
padding-right: 40rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-address__box {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple-address-view {
|
|
||||||
position: relative;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
width: 100%;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
width: 750rpx;
|
|
||||||
/* #endif */
|
|
||||||
height: 408rpx;
|
|
||||||
background-color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker-item {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 70rpx;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
export default {
|
||||||
|
created() {
|
||||||
|
if (this.type === 'message') {
|
||||||
|
// 不显示遮罩
|
||||||
|
this.maskShow = false
|
||||||
|
// 获取子组件对象
|
||||||
|
this.childrenMsg = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
customOpen() {
|
||||||
|
if (this.childrenMsg) {
|
||||||
|
this.childrenMsg.open()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
customClose() {
|
||||||
|
if (this.childrenMsg) {
|
||||||
|
this.childrenMsg.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import message from './message.js';
|
||||||
|
// 定义 type 类型:弹出类型：top/bottom/center
|
||||||
|
const config = {
|
||||||
|
// 顶部弹出
|
||||||
|
top:'top',
|
||||||
|
// 底部弹出
|
||||||
|
bottom:'bottom',
|
||||||
|
// 居中弹出
|
||||||
|
center:'center',
|
||||||
|
// 消息提示
|
||||||
|
message:'top',
|
||||||
|
// 对话框
|
||||||
|
dialog:'center',
|
||||||
|
// 分享
|
||||||
|
share:'bottom',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
config:config
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins: [message],
|
||||||
|
}
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-popup-dialog">
|
||||||
|
<view class="uni-dialog-title">
|
||||||
|
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-dialog-content">
|
||||||
|
<text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
|
||||||
|
<input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
|
||||||
|
</view>
|
||||||
|
<view class="uni-dialog-button-group">
|
||||||
|
<view class="uni-dialog-button" @click="close">
|
||||||
|
<text class="uni-dialog-button-text">取消</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
||||||
|
<text class="uni-dialog-button-text uni-button-color">确定</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* PopUp 弹出层-对话框样式
|
||||||
|
* @description 弹出层-对话框样式
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||||
|
* @property {String} value input 模式下的默认值
|
||||||
|
* @property {String} placeholder input 模式下输入提示
|
||||||
|
* @property {String} type = [success|warning|info|error] 主题样式
|
||||||
|
* @value success 成功
|
||||||
|
* @value warning 提示
|
||||||
|
* @value info 消息
|
||||||
|
* @value error 错误
|
||||||
|
* @property {String} mode = [base|input] 模式、
|
||||||
|
* @value base 基础对话框
|
||||||
|
* @value input 可输入对话框
|
||||||
|
* @property {String} content 对话框内容
|
||||||
|
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||||
|
* @event {Function} confirm 点击确认按钮触发
|
||||||
|
* @event {Function} close 点击取消按钮触发
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "uniPopupDialog",
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '请输入内容'
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 对话框主题 success/warning/info/error 默认 success
|
||||||
|
*/
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'error'
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 对话框模式 base/input
|
||||||
|
*/
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'base'
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 对话框标题
|
||||||
|
*/
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '提示'
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 对话框内容
|
||||||
|
*/
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
|
||||||
|
*/
|
||||||
|
beforeClose: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogType: 'error',
|
||||||
|
focus: false,
|
||||||
|
val: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inject: ['popup'],
|
||||||
|
watch: {
|
||||||
|
type(val) {
|
||||||
|
this.dialogType = val
|
||||||
|
},
|
||||||
|
mode(val) {
|
||||||
|
if (val === 'input') {
|
||||||
|
this.dialogType = 'info'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value(val) {
|
||||||
|
this.val = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 对话框遮罩不可点击
|
||||||
|
this.popup.mkclick = false
|
||||||
|
if (this.mode === 'input') {
|
||||||
|
this.dialogType = 'info'
|
||||||
|
this.val = this.value
|
||||||
|
} else {
|
||||||
|
this.dialogType = this.type
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.focus = true
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击确认按钮
|
||||||
|
*/
|
||||||
|
onOk() {
|
||||||
|
this.$emit('confirm', () => {
|
||||||
|
this.popup.close()
|
||||||
|
if (this.mode === 'input') this.val = this.value
|
||||||
|
}, this.mode === 'input' ? this.val : '')
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击取消按钮
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
if (this.beforeClose) {
|
||||||
|
this.$emit('close', () => {
|
||||||
|
this.popup.close()
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-popup-dialog {
|
||||||
|
width: 300px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-title {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-title-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 15px 15px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-content-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6e6e6e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-button-group {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
border-top-color: #f5f5f5;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-button {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-border-left {
|
||||||
|
border-left-color: #f0f0f0;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-left-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-button-text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-button-color {
|
||||||
|
color: $uni-color-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__success {
|
||||||
|
color: $uni-color-success;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__warn {
|
||||||
|
color: $uni-color-warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__error {
|
||||||
|
color: $uni-color-error;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__info {
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-popup-message" :class="'uni-popup__'+[type]">
|
||||||
|
<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PopUp 弹出层-消息提示
|
||||||
|
* @description 弹出层-消息提示
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||||
|
* @property {String} type = [success|warning|info|error] 主题样式
|
||||||
|
* @value success 成功
|
||||||
|
* @value warning 提示
|
||||||
|
* @value info 消息
|
||||||
|
* @value error 错误
|
||||||
|
* @property {String} message 消息提示文字
|
||||||
|
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniPopupMessage',
|
||||||
|
props: {
|
||||||
|
/**
|
||||||
|
* 主题 success/warning/info/error 默认 success
|
||||||
|
*/
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'success'
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 消息文字
|
||||||
|
*/
|
||||||
|
message: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 显示时间，设置为 0 则不会自动关闭
|
||||||
|
*/
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 3000
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inject: ['popup'],
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.popup.childrenMsg = this
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
if (this.duration === 0) return
|
||||||
|
clearTimeout(this.popuptimer)
|
||||||
|
this.popuptimer = setTimeout(() => {
|
||||||
|
this.popup.close()
|
||||||
|
}, this.duration)
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
clearTimeout(this.popuptimer)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-popup-message {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
background-color: #e1f3d8;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-color: #eee;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
.uni-popup-message-text {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__success {
|
||||||
|
background-color: #e1f3d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__success-text {
|
||||||
|
color: #67C23A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__warn {
|
||||||
|
background-color: #faecd8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__warn-text {
|
||||||
|
color: #E6A23C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__error {
|
||||||
|
background-color: #fde2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__error-text {
|
||||||
|
color: #F56C6C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__info {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__info-text {
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,165 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-popup-share">
|
||||||
|
<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
|
||||||
|
<view class="uni-share-content">
|
||||||
|
<view class="uni-share-content-box">
|
||||||
|
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||||
|
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||||
|
<text class="uni-share-text">{{item.text}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-share-button-box">
|
||||||
|
<button class="uni-share-button" @click="close">取消</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'UniPopupShare',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '分享到'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inject: ['popup'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bottomData: [{
|
||||||
|
text: '微信',
|
||||||
|
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
|
||||||
|
name: 'wx'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '支付宝',
|
||||||
|
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
|
||||||
|
name: 'wx'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'QQ',
|
||||||
|
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
|
||||||
|
name: 'qq'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '新浪',
|
||||||
|
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
|
||||||
|
name: 'sina'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '百度',
|
||||||
|
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
|
||||||
|
name: 'copy'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '其他',
|
||||||
|
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
|
||||||
|
name: 'more'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 选择内容
|
||||||
|
*/
|
||||||
|
select(item, index) {
|
||||||
|
this.$emit('select', {
|
||||||
|
item,
|
||||||
|
index
|
||||||
|
}, () => {
|
||||||
|
this.popup.close()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 关闭窗口
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
this.popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-popup-share {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.uni-share-title {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.uni-share-title-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.uni-share-content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-content-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-content-item {
|
||||||
|
width: 90px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-content-item:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-image {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-text {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3B4144;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-button-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 10px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-button {
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-button::after {
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,294 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
|
||||||
|
<uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
|
||||||
|
@click="onTap" />
|
||||||
|
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
|
||||||
|
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</uni-transition>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uniTransition from '../uni-transition/uni-transition.vue'
|
||||||
|
import popup from './popup.js'
|
||||||
|
/**
|
||||||
|
* PopUp 弹出层
|
||||||
|
* @description 弹出层组件，为了解决遮罩弹层的问题
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||||
|
* @property {String} type = [top|center|bottom] 弹出方式
|
||||||
|
* @value top 顶部弹出
|
||||||
|
* @value center 中间弹出
|
||||||
|
* @value bottom 底部弹出
|
||||||
|
* @value message 消息提示
|
||||||
|
* @value dialog 对话框
|
||||||
|
* @value share 底部分享示例
|
||||||
|
* @property {Boolean} animation = [ture|false] 是否开启动画
|
||||||
|
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
||||||
|
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniPopup',
|
||||||
|
components: {
|
||||||
|
uniTransition
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 开启动画
|
||||||
|
animation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||||
|
// message: 消息提示 ; dialog : 对话框
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'center'
|
||||||
|
},
|
||||||
|
// maskClick
|
||||||
|
maskClick: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
popup: this
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins: [popup],
|
||||||
|
watch: {
|
||||||
|
/**
|
||||||
|
* 监听type类型
|
||||||
|
*/
|
||||||
|
type: {
|
||||||
|
handler: function(newVal) {
|
||||||
|
this[this.config[newVal]]()
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 监听遮罩是否可点击
|
||||||
|
* @param {Object} val
|
||||||
|
*/
|
||||||
|
maskClick(val) {
|
||||||
|
this.mkclick = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
duration: 300,
|
||||||
|
ani: [],
|
||||||
|
showPopup: false,
|
||||||
|
showTrans: false,
|
||||||
|
maskClass: {
|
||||||
|
'position': 'fixed',
|
||||||
|
'bottom': 0,
|
||||||
|
'top': 0,
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
||||||
|
},
|
||||||
|
transClass: {
|
||||||
|
'position': 'fixed',
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
},
|
||||||
|
maskShow: true,
|
||||||
|
mkclick: true,
|
||||||
|
popupstyle: 'top'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.mkclick = this.maskClick
|
||||||
|
if (this.animation) {
|
||||||
|
this.duration = 300
|
||||||
|
} else {
|
||||||
|
this.duration = 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clear(e) {
|
||||||
|
// TODO nvue 取消冒泡
|
||||||
|
e.stopPropagation()
|
||||||
|
},
|
||||||
|
open() {
|
||||||
|
this.showPopup = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
new Promise(resolve => {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.showTrans = true
|
||||||
|
// fixed by mehaotian 兼容 app 端
|
||||||
|
this.$nextTick(() => {
|
||||||
|
resolve();
|
||||||
|
})
|
||||||
|
}, 50);
|
||||||
|
}).then(res => {
|
||||||
|
// 自定义打开事件
|
||||||
|
clearTimeout(this.msgtimer)
|
||||||
|
this.msgtimer = setTimeout(() => {
|
||||||
|
this.customOpen && this.customOpen()
|
||||||
|
}, 100)
|
||||||
|
this.$emit('change', {
|
||||||
|
show: true,
|
||||||
|
type: this.type
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
close(type) {
|
||||||
|
this.showTrans = false
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$emit('change', {
|
||||||
|
show: false,
|
||||||
|
type: this.type
|
||||||
|
})
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
// 自定义关闭事件
|
||||||
|
this.customOpen && this.customClose()
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.showPopup = false
|
||||||
|
}, 300)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onTap() {
|
||||||
|
if (!this.mkclick) return
|
||||||
|
this.close()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 顶部弹出样式处理
|
||||||
|
*/
|
||||||
|
top() {
|
||||||
|
this.popupstyle = 'top'
|
||||||
|
this.ani = ['slide-top']
|
||||||
|
this.transClass = {
|
||||||
|
'position': 'fixed',
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 底部弹出样式处理
|
||||||
|
*/
|
||||||
|
bottom() {
|
||||||
|
this.popupstyle = 'bottom'
|
||||||
|
this.ani = ['slide-bottom']
|
||||||
|
this.transClass = {
|
||||||
|
'position': 'fixed',
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
'bottom': 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 中间弹出样式处理
|
||||||
|
*/
|
||||||
|
center() {
|
||||||
|
this.popupstyle = 'center'
|
||||||
|
this.ani = ['zoom-out', 'fade']
|
||||||
|
this.transClass = {
|
||||||
|
'position': 'fixed',
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
'display': 'flex',
|
||||||
|
'flexDirection': 'column',
|
||||||
|
/* #endif */
|
||||||
|
'bottom': 0,
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
'top': 0,
|
||||||
|
'justifyContent': 'center',
|
||||||
|
'alignItems': 'center'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-popup {
|
||||||
|
position: fixed;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: $uni-bg-color-mask;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask-ani {
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-top-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-bottom-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-center-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__wrapper {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
top: var(--window-top);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef H5 */
|
||||||
|
top: 0;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__wrapper-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
/* iphonex 等安全区设置，底部安全区适配 */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-ani {
|
||||||
|
// transition: transform 0.3s;
|
||||||
|
transition-property: transform, opacity;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-top-content {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-bottom-content {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-center-content {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,279 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
|
||||||
|
@click="change">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const animation = uni.requireNativePlugin('animation');
|
||||||
|
// #endif
|
||||||
|
/**
|
||||||
|
* Transition 过渡动画
|
||||||
|
* @description 简单过渡动画组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||||
|
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||||
|
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||||
|
* @value fade 渐隐渐出过渡
|
||||||
|
* @value slide-top 由上至下过渡
|
||||||
|
* @value slide-right 由右至左过渡
|
||||||
|
* @value slide-bottom 由下至上过渡
|
||||||
|
* @value slide-left 由左至右过渡
|
||||||
|
* @value zoom-in 由小到大过渡
|
||||||
|
* @value zoom-out 由大到小过渡
|
||||||
|
* @property {Number} duration 过渡动画持续时间
|
||||||
|
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniTransition',
|
||||||
|
props: {
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
modeClass: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 300
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow: false,
|
||||||
|
transform: '',
|
||||||
|
ani: { in: '',
|
||||||
|
active: ''
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.open()
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
stylesObject() {
|
||||||
|
let styles = {
|
||||||
|
...this.styles,
|
||||||
|
'transition-duration': this.duration / 1000 + 's'
|
||||||
|
}
|
||||||
|
let transfrom = ''
|
||||||
|
for (let i in styles) {
|
||||||
|
let line = this.toLine(i)
|
||||||
|
transfrom += line + ':' + styles[i] + ';'
|
||||||
|
}
|
||||||
|
return transfrom
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.timer = null
|
||||||
|
// this.nextTick = (time = 50) => new Promise(resolve => {
|
||||||
|
// clearTimeout(this.timer)
|
||||||
|
// this.timer = setTimeout(resolve, time)
|
||||||
|
// return this.timer
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
change() {
|
||||||
|
this.$emit('click', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
},
|
||||||
|
open() {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.isShow = true
|
||||||
|
this.transform = ''
|
||||||
|
this.ani.in = ''
|
||||||
|
for (let i in this.getTranfrom(false)) {
|
||||||
|
if (i === 'opacity') {
|
||||||
|
this.ani.in = 'fade-in'
|
||||||
|
} else {
|
||||||
|
this.transform += `${this.getTranfrom(false)[i]} `
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this._animation(true)
|
||||||
|
}, 50)
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
close(type) {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this._animation(false)
|
||||||
|
},
|
||||||
|
_animation(type) {
|
||||||
|
let styles = this.getTranfrom(type)
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
if(!this.$refs['ani']) return
|
||||||
|
animation.transition(this.$refs['ani'].ref, {
|
||||||
|
styles,
|
||||||
|
duration: this.duration, //ms
|
||||||
|
timingFunction: 'ease',
|
||||||
|
needLayout: false,
|
||||||
|
delay: 0 //ms
|
||||||
|
}, () => {
|
||||||
|
if (!type) {
|
||||||
|
this.isShow = false
|
||||||
|
}
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.transform = ''
|
||||||
|
for (let i in styles) {
|
||||||
|
if (i === 'opacity') {
|
||||||
|
this.ani.in = `fade-${type?'out':'in'}`
|
||||||
|
} else {
|
||||||
|
this.transform += `${styles[i]} `
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
if (!type) {
|
||||||
|
this.isShow = false
|
||||||
|
}
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
|
||||||
|
}, this.duration)
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
},
|
||||||
|
getTranfrom(type) {
|
||||||
|
let styles = {
|
||||||
|
transform: ''
|
||||||
|
}
|
||||||
|
this.modeClass.forEach((mode) => {
|
||||||
|
switch (mode) {
|
||||||
|
case 'fade':
|
||||||
|
styles.opacity = type ? 1 : 0
|
||||||
|
break;
|
||||||
|
case 'slide-top':
|
||||||
|
styles.transform += `translateY(${type?'0':'-100%'}) `
|
||||||
|
break;
|
||||||
|
case 'slide-right':
|
||||||
|
styles.transform += `translateX(${type?'0':'100%'}) `
|
||||||
|
break;
|
||||||
|
case 'slide-bottom':
|
||||||
|
styles.transform += `translateY(${type?'0':'100%'}) `
|
||||||
|
break;
|
||||||
|
case 'slide-left':
|
||||||
|
styles.transform += `translateX(${type?'0':'-100%'}) `
|
||||||
|
break;
|
||||||
|
case 'zoom-in':
|
||||||
|
styles.transform += `scale(${type?1:0.8}) `
|
||||||
|
break;
|
||||||
|
case 'zoom-out':
|
||||||
|
styles.transform += `scale(${type?1:1.2}) `
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return styles
|
||||||
|
},
|
||||||
|
_modeClassArr(type) {
|
||||||
|
let mode = this.modeClass
|
||||||
|
if (typeof(mode) !== "string") {
|
||||||
|
let modestr = ''
|
||||||
|
mode.forEach((item) => {
|
||||||
|
modestr += (item + '-' + type + ',')
|
||||||
|
})
|
||||||
|
return modestr.substr(0, modestr.length - 1)
|
||||||
|
} else {
|
||||||
|
return mode + '-' + type
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// getEl(el) {
|
||||||
|
// console.log(el || el.ref || null);
|
||||||
|
// return el || el.ref || null
|
||||||
|
// },
|
||||||
|
toLine(name) {
|
||||||
|
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.uni-transition {
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transition-property: transform, opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-top-in {
|
||||||
|
/* transition-property: transform, opacity; */
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-top-active {
|
||||||
|
transform: translateY(0);
|
||||||
|
/* opacity: 1; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-right-in {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-right-active {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-bottom-in {
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-bottom-active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-left-in {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-left-active {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-in-in {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-out-active {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-out-in {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Generated
+5
@@ -18,6 +18,11 @@
|
|||||||
"version": "1.8.22",
|
"version": "1.8.22",
|
||||||
"resolved": "https://registry.npm.taobao.org/dayjs/download/dayjs-1.8.22.tgz",
|
"resolved": "https://registry.npm.taobao.org/dayjs/download/dayjs-1.8.22.tgz",
|
||||||
"integrity": "sha1-XoNdd2s3PiFmeL6NEsM22nGiWpw="
|
"integrity": "sha1-XoNdd2s3PiFmeL6NEsM22nGiWpw="
|
||||||
|
},
|
||||||
|
"vue-ydui": {
|
||||||
|
"version": "1.2.6",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/vue-ydui/download/vue-ydui-1.2.6.tgz",
|
||||||
|
"integrity": "sha1-GQZItGcjkXAEpMJKe+/TzWnWQ1U="
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-1
@@ -12,6 +12,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"animate.css": "^3.7.2",
|
"animate.css": "^3.7.2",
|
||||||
"async-validator": "^3.2.4",
|
"async-validator": "^3.2.4",
|
||||||
"dayjs": "^1.8.22"
|
"dayjs": "^1.8.22",
|
||||||
|
"vue-ydui": "^1.2.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -370,7 +370,7 @@ export default {
|
|||||||
getBargainDetail(that.bargainId)
|
getBargainDetail(that.bargainId)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
that.bargain = res.data.bargain;
|
that.bargain = res.data.bargain;
|
||||||
that.datatime = that.bargain.stopTime;
|
that.datatime = that.bargain.stopTime / 1000;
|
||||||
that.getBargainHelpCount();
|
that.getBargainHelpCount();
|
||||||
})
|
})
|
||||||
.catch(res => {
|
.catch(res => {
|
||||||
@@ -573,32 +573,32 @@ page {
|
|||||||
background-color: #eb3729;
|
background-color: #eb3729;
|
||||||
}
|
}
|
||||||
.bargainBnt_hui {
|
.bargainBnt_hui {
|
||||||
font-size: 0.3*100rpx;
|
font-size: 0.3 * 100rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 6*100rpx;
|
width: 6 * 100rpx;
|
||||||
height: 0.8*100rpx;
|
height: 0.8 * 100rpx;
|
||||||
border-radius: 0.4*100rpx;
|
border-radius: 0.4 * 100rpx;
|
||||||
background: #bbb;
|
background: #bbb;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 0.8*100rpx;
|
line-height: 0.8 * 100rpx;
|
||||||
margin-top: 0.32*100rpx;
|
margin-top: 0.32 * 100rpx;
|
||||||
}
|
}
|
||||||
.bargain_view {
|
.bargain_view {
|
||||||
left:0;
|
left: 0;
|
||||||
right:0;
|
right: 0;
|
||||||
height: 0.48*100rpx;
|
height: 0.48 * 100rpx;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border-radius: 0 0 0.06*100rpx 0.06*100rpx;
|
border-radius: 0 0 0.06 * 100rpx 0.06 * 100rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
font-size: 0.22*100rpx;
|
font-size: 0.22 * 100rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 0.48*100rpx;
|
line-height: 0.48 * 100rpx;
|
||||||
}
|
}
|
||||||
.iconfonts {
|
.iconfonts {
|
||||||
font-size: 0.22*100rpx;
|
font-size: 0.22 * 100rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,8 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="group-list" ref="container">
|
<view class="group-list" ref="container">
|
||||||
<!-- <view class="header">
|
|
||||||
<image src="@/static/images/group.png" class="image" />
|
|
||||||
</view>-->
|
|
||||||
<view class="list" v-if="combinationList.length>0">
|
<view class="list" v-if="combinationList.length>0">
|
||||||
<view
|
<view
|
||||||
class="item acea-row row-between-wrapper"
|
class="item acea-row row-between-wrapper"
|
||||||
|
|||||||
@@ -27,7 +27,7 @@
|
|||||||
:hourText="' : '"
|
:hourText="' : '"
|
||||||
:minuteText="' : '"
|
:minuteText="' : '"
|
||||||
:secondText="false"
|
:secondText="false"
|
||||||
:datatime="pinkT.stopTime"
|
:datatime="pinkT.stopTime/1000"
|
||||||
></count-down>
|
></count-down>
|
||||||
<text>结束</text>
|
<text>结束</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -155,7 +155,8 @@ export default {
|
|||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
title:
|
||||||
|
err.msg || err.response.data.msg || err.response.data.message,
|
||||||
icon: "none",
|
icon: "none",
|
||||||
duration: 2000
|
duration: 2000
|
||||||
});
|
});
|
||||||
@@ -239,8 +240,8 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.tips-warp{
|
.tips-warp {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -245,11 +245,6 @@
|
|||||||
that.$set(that, 'banner', res.data.banner);
|
that.$set(that, 'banner', res.data.banner);
|
||||||
that.$set(that, 'menus', res.data.menus);
|
that.$set(that, 'menus', res.data.menus);
|
||||||
that.$set(that, 'roll', res.data.roll);
|
that.$set(that, 'roll', res.data.roll);
|
||||||
that.$set(that, 'activity', res.data.activity);
|
|
||||||
if(res.data.activity){
|
|
||||||
var activityOne = res.data.activity.shift();
|
|
||||||
that.$set(that, 'activityOne', activityOne);
|
|
||||||
}
|
|
||||||
that.$set(that, 'info', res.data.info);
|
that.$set(that, 'info', res.data.info);
|
||||||
that.$set(that, 'firstList', res.data.firstList);
|
that.$set(that, 'firstList', res.data.firstList);
|
||||||
that.$set(that, 'bastList', res.data.bastList);
|
that.$set(that, 'bastList', res.data.bastList);
|
||||||
@@ -269,6 +264,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
goGoodSearch() {
|
goGoodSearch() {
|
||||||
|
// this.$yrouter.push('/pages/shop/GoodsEvaluate/index');
|
||||||
this.$yrouter.push('/pages/shop/GoodSearch/index');
|
this.$yrouter.push('/pages/shop/GoodSearch/index');
|
||||||
},
|
},
|
||||||
goWxappUrl(item) {
|
goWxappUrl(item) {
|
||||||
|
|||||||
@@ -41,6 +41,12 @@
|
|||||||
<view class="iconfont icon-jiantou"></view>
|
<view class="iconfont icon-jiantou"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<div class="attribute acea-row row-between-wrapper">
|
||||||
|
<div>
|
||||||
|
运费：<span class="atterTxt">{{ tempName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
|
<view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
|
||||||
<view>
|
<view>
|
||||||
<text>{{ attrTxt }}：</text>
|
<text>{{ attrTxt }}：</text>
|
||||||
@@ -268,6 +274,8 @@ export default {
|
|||||||
systemStore: {},
|
systemStore: {},
|
||||||
qqmapsdk: null,
|
qqmapsdk: null,
|
||||||
productConClass: "product-con",
|
productConClass: "product-con",
|
||||||
|
tempName: '全国包邮'
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: mapGetters(["isLogin", "location"]),
|
computed: mapGetters(["isLogin", "location"]),
|
||||||
@@ -356,6 +364,7 @@ export default {
|
|||||||
that.reply = res.data.reply ? [res.data.reply] : [];
|
that.reply = res.data.reply ? [res.data.reply] : [];
|
||||||
that.$set(that, "reply", that.reply);
|
that.$set(that, "reply", that.reply);
|
||||||
that.$set(that, "priceName", res.data.priceName);
|
that.$set(that, "priceName", res.data.priceName);
|
||||||
|
that.$set(that, "tempName", res.data.tempName);
|
||||||
that.posterData.image = that.storeInfo.image;
|
that.posterData.image = that.storeInfo.image;
|
||||||
if (that.storeInfo.storeName.length > 30) {
|
if (that.storeInfo.storeName.length > 30) {
|
||||||
that.posterData.title =
|
that.posterData.title =
|
||||||
|
|||||||
+190
-217
@@ -1,226 +1,199 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="evaluate-con">
|
<view class="evaluate-con">
|
||||||
<view class="goodsStyle acea-row row-between" v-if="orderCon.productInfo">
|
<view class="goodsStyle acea-row row-between" v-if="orderCon.productInfo">
|
||||||
<view class="pictrue">
|
<view class="pictrue">
|
||||||
<image :src="orderCon.productInfo.image" class="image" />
|
<image :src="orderCon.productInfo.image" class="image" />
|
||||||
</view>
|
</view>
|
||||||
<view class="text acea-row row-between">
|
<view class="text acea-row row-between">
|
||||||
<view class="name line2">{{ orderCon.productInfo.storeName }}</view>
|
<view class="name line2">{{ orderCon.productInfo.storeName }}</view>
|
||||||
<view class="money">
|
<view class="money">
|
||||||
<view>￥{{ orderCon.productInfo.price }}</view>
|
<view>￥{{ orderCon.productInfo.price }}</view>
|
||||||
<view class="num">x{{ orderCon.cartNum }}</view>
|
<view class="num">x{{ orderCon.cartNum }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="score">
|
<view class="score">
|
||||||
<view class="item acea-row row-middle" v-for="(item, scoreListIndexw) in scoreList" :key="scoreListIndexw">
|
<view
|
||||||
<view>{{ item.name }}</view>
|
class="item acea-row row-middle"
|
||||||
<view class="starsList">
|
v-for="(item, scoreListIndexw) in scoreList"
|
||||||
<text @click="stars(starsIndexn, scoreListIndexw)" v-for="(itemn, starsIndexn) in item.stars" :key="starsIndexn"
|
:key="scoreListIndexw"
|
||||||
class="iconfont" :class="
|
>
|
||||||
item.index >= starsIndexn
|
<view>{{ item.name }}</view>
|
||||||
? 'icon-shitixing font-color-red'
|
<view class="starsList">
|
||||||
: 'icon-kongxinxing'
|
<text
|
||||||
"></text>
|
@click="stars(starsIndexn, scoreListIndexw)"
|
||||||
</view>
|
v-for="(itemn, starsIndexn) in item.stars"
|
||||||
<text class="evaluate">
|
:key="starsIndexn"
|
||||||
{{
|
class="iconfont"
|
||||||
item.index === -1 ? "" : item.index + 1 + "分"
|
:class="item.index >= starsIndexn ? 'icon-shitixing font-color-red': 'icon-kongxinxing'"
|
||||||
}}
|
></text>
|
||||||
</text>
|
</view>
|
||||||
</view>
|
<text class="evaluate">{{item.index === -1 ? "" : item.index + 1 + "分"}}</text>
|
||||||
<view class="textarea">
|
</view>
|
||||||
<textarea placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~" v-model="expect"></textarea>
|
<view class="textarea">
|
||||||
<view class="list acea-row row-middle">
|
<textarea placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~" v-model="expect"></textarea>
|
||||||
<view class="pictrue" v-for="(item, uploadPicturesIndex) in uploadPictures" :key="uploadPicturesIndex">
|
<view class="list acea-row row-middle">
|
||||||
<image :src="item" />
|
<view
|
||||||
<text class="iconfont icon-guanbi1 font-color-red" @click="uploadPictures.splice(uploadPicturesIndex, 1)"></text>
|
class="pictrue"
|
||||||
</view>
|
v-for="(item, uploadPicturesIndex) in uploadPictures"
|
||||||
<!-- <VueCoreImageUpload
|
:key="uploadPicturesIndex"
|
||||||
class="btn btn-primary"
|
|
||||||
:crop="false"
|
|
||||||
compress="80"
|
|
||||||
@imageuploaded="imageuploaded"
|
|
||||||
:headers="headers"
|
|
||||||
:max-file-size="5242880"
|
|
||||||
:credentials="false"
|
|
||||||
inputAccept="image/*"
|
|
||||||
inputOfFile="file"
|
|
||||||
:url="url"
|
|
||||||
v-if="uploadPictures.length < 8"
|
|
||||||
>
|
>
|
||||||
<view
|
<image :src="item" />
|
||||||
class="pictrue uploadBnt acea-row row-center-wrapper row-column"
|
<text
|
||||||
>
|
class="iconfont icon-guanbi1 font-color-red"
|
||||||
<text class="iconfont icon-icon25201"></text>
|
@click="uploadPictures.splice(uploadPicturesIndex, 1)"
|
||||||
<view>上传图片</view>
|
></text>
|
||||||
</view>
|
</view>
|
||||||
</VueCoreImageUpload>-->
|
<view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage">
|
||||||
</view>
|
<text class="iconfont icon-icon25201"></text>
|
||||||
</view>
|
<view>上传图片</view>
|
||||||
<view class="evaluateBnt bg-color-red" @click="submit">立即评价</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="evaluateBnt bg-color-red" @click="submit">立即评价</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.evaluate-con .score .textarea .list .pictrue.uploadBnt {
|
.evaluate-con .score .textarea .list .pictrue.uploadBnt {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { postOrderProduct, postOrderComment } from "@/api/store";
|
||||||
postOrderProduct,
|
import { trim, chooseImage } from "@/utils";
|
||||||
postOrderComment
|
import { VUE_APP_API_URL } from "@/config";
|
||||||
} from "@/api/store";
|
import { required } from "@/utils/validate";
|
||||||
import {
|
import { validatorDefaultCatch } from "@/utils/dialog";
|
||||||
trim
|
|
||||||
} from "@/utils";
|
|
||||||
import {
|
|
||||||
VUE_APP_API_URL
|
|
||||||
} from "@/config";
|
|
||||||
import {
|
|
||||||
required
|
|
||||||
} from "@/utils/validate";
|
|
||||||
import {
|
|
||||||
validatorDefaultCatch
|
|
||||||
} from "@/utils/dialog";
|
|
||||||
|
|
||||||
const NAME = "GoodsEvaluate";
|
const NAME = "GoodsEvaluate";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: NAME,
|
name: NAME,
|
||||||
components: {
|
components: {
|
||||||
// VueCoreImageUpload
|
// VueCoreImageUpload
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
orderCon: {
|
orderCon: {
|
||||||
cartProduct: {
|
cartProduct: {
|
||||||
productInfo: {}
|
productInfo: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scoreList: [{
|
scoreList: [
|
||||||
name: "商品质量",
|
{
|
||||||
stars: ["", "", "", "", ""],
|
name: "商品质量",
|
||||||
index: -1
|
stars: ["", "", "", "", ""],
|
||||||
},
|
index: -1
|
||||||
{
|
},
|
||||||
name: "服务态度",
|
{
|
||||||
stars: ["", "", "", "", ""],
|
name: "服务态度",
|
||||||
index: -1
|
stars: ["", "", "", "", ""],
|
||||||
}
|
index: -1
|
||||||
],
|
}
|
||||||
url: `${VUE_APP_API_URL}/api/qiNiuContent`,
|
],
|
||||||
headers: {
|
uploadPictures: [],
|
||||||
Authorization: "Bearer " + this.$store.state.token
|
expect: "",
|
||||||
},
|
unique: ""
|
||||||
uploadPictures: [],
|
};
|
||||||
expect: "",
|
},
|
||||||
unique: ""
|
mounted: function() {
|
||||||
};
|
this.unique = this.$yroute.query.id;
|
||||||
},
|
this.getOrderProduct();
|
||||||
mounted: function() {
|
},
|
||||||
this.unique = this.$yroute.query.id;
|
watch: {
|
||||||
this.getOrderProduct();
|
$yroute(n) {
|
||||||
},
|
if (n.name === NAME && this.unique !== n.params.id) {
|
||||||
watch: {
|
this.unique = n.params.id;
|
||||||
$yroute(n) {
|
this.$set(this.scoreList[0], "index", -1);
|
||||||
if (n.name === NAME && this.unique !== n.params.id) {
|
this.$set(this.scoreList[1], "index", -1);
|
||||||
this.unique = n.params.id;
|
this.expect = "";
|
||||||
this.$set(this.scoreList[0], "index", -1);
|
this.uploadPictures = [];
|
||||||
this.$set(this.scoreList[1], "index", -1);
|
this.getOrderProduct();
|
||||||
this.expect = "";
|
}
|
||||||
this.uploadPictures = [];
|
}
|
||||||
this.getOrderProduct();
|
},
|
||||||
}
|
methods: {
|
||||||
}
|
getOrderProduct: function() {
|
||||||
},
|
let that = this,
|
||||||
methods: {
|
unique = that.unique;
|
||||||
getOrderProduct: function() {
|
postOrderProduct(unique).then(res => {
|
||||||
let that = this,
|
that.orderCon = res.data;
|
||||||
unique = that.unique;
|
});
|
||||||
postOrderProduct(unique).then(res => {
|
},
|
||||||
that.orderCon = res.data;
|
stars: function(indexn, indexw) {
|
||||||
});
|
this.scoreList[indexw].index = indexn;
|
||||||
},
|
},
|
||||||
stars: function(indexn, indexw) {
|
chooseImage() {
|
||||||
this.scoreList[indexw].index = indexn;
|
chooseImage(img => {
|
||||||
},
|
this.uploadPictures.push(img);
|
||||||
imageuploaded(res) {
|
});
|
||||||
if (res.errno !== 0) {
|
},
|
||||||
uni.showToast({
|
async submit() {
|
||||||
title: res.msg || "上传图片失败",
|
const expect = trim(this.expect),
|
||||||
icon: 'none',
|
product_score =
|
||||||
duration: 2000
|
this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1,
|
||||||
});
|
service_score =
|
||||||
return
|
this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1;
|
||||||
}
|
try {
|
||||||
this.uploadPictures.push(res.data[0]);
|
await this.$validator({
|
||||||
},
|
product_score: [
|
||||||
async submit() {
|
required("请选择商品质量分数", {
|
||||||
const expect = trim(this.expect),
|
type: "number"
|
||||||
product_score =
|
})
|
||||||
this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1,
|
],
|
||||||
service_score =
|
service_score: [
|
||||||
this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1;
|
required("请选择服务态度分数", {
|
||||||
try {
|
type: "number"
|
||||||
await this.$validator({
|
})
|
||||||
product_score: [
|
]
|
||||||
required("请选择商品质量分数", {
|
}).validate({
|
||||||
type: "number"
|
product_score,
|
||||||
})
|
service_score
|
||||||
],
|
});
|
||||||
service_score: [
|
} catch (e) {
|
||||||
required("请选择服务态度分数", {
|
return validatorDefaultCatch(e);
|
||||||
type: "number"
|
}
|
||||||
})
|
postOrderComment({
|
||||||
]
|
productScore: product_score,
|
||||||
}).validate({
|
serviceScore: service_score,
|
||||||
product_score,
|
unique: this.unique,
|
||||||
service_score
|
pics: this.uploadPictures.join(","),
|
||||||
});
|
comment: expect
|
||||||
} catch (e) {
|
})
|
||||||
return validatorDefaultCatch(e);
|
.then(() => {
|
||||||
}
|
uni.showToast({
|
||||||
postOrderComment({
|
title: "评价成功",
|
||||||
productScore: product_score,
|
icon: "success",
|
||||||
serviceScore: service_score,
|
duration: 2000
|
||||||
unique: this.unique,
|
});
|
||||||
pics: this.uploadPictures.join(","),
|
|
||||||
comment: expect
|
// ? 回跳到上一页
|
||||||
})
|
this.$yrouter.back();
|
||||||
.then(() => {
|
|
||||||
uni.showToast({
|
// ? 默认跳转到详情页
|
||||||
title: "评价成功",
|
// this.$yrouter.push({
|
||||||
icon: "success",
|
// path: "/pages/order/OrderDetails/index",
|
||||||
duration: 2000
|
// query: {
|
||||||
});
|
// id: this.orderCon.orderId
|
||||||
|
// }
|
||||||
// ? 回跳到上一页
|
// });
|
||||||
this.$yrouter.back()
|
|
||||||
|
// ? 可选重定向到详情页，这时左上角会有一个返回首页的图标
|
||||||
// ? 默认跳转到详情页
|
// this.$yrouter.reLaunch({
|
||||||
// this.$yrouter.push({
|
// path: "/pages/home/index",
|
||||||
// path: "/pages/order/OrderDetails/index",
|
// });
|
||||||
// query: {
|
})
|
||||||
// id: this.orderCon.orderId
|
.catch(err => {
|
||||||
// }
|
uni.showToast({
|
||||||
// });
|
title:
|
||||||
|
err.msg || err.response.data.msg || err.response.data.message,
|
||||||
// ? 可选重定向到详情页，这时左上角会有一个返回首页的图标
|
icon: "none",
|
||||||
// this.$yrouter.reLaunch({
|
duration: 2000
|
||||||
// path: "/pages/home/index",
|
});
|
||||||
// });
|
});
|
||||||
})
|
}
|
||||||
.catch(err => {
|
}
|
||||||
uni.showToast({
|
};
|
||||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
|
||||||
icon: 'none',
|
|
||||||
duration: 2000
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,57 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="personal-data">
|
<view class="personal-data">
|
||||||
<view class="wrapper">
|
<view class="wrapper">
|
||||||
<view class="title">管理我的账号</view>
|
|
||||||
<view class="wrapList">
|
<view class="wrapList">
|
||||||
<view
|
<view class="item acea-row row-between-wrapper on">
|
||||||
class="item acea-row row-between-wrapper"
|
|
||||||
:class="item.uid === userInfo.uid ? 'on' : ''"
|
|
||||||
v-for="(item, switchUserInfoIndex) in switchUserInfo"
|
|
||||||
:key="switchUserInfoIndex"
|
|
||||||
>
|
|
||||||
<view class="picTxt acea-row row-between-wrapper">
|
<view class="picTxt acea-row row-between-wrapper">
|
||||||
<view class="pictrue">
|
<view class="pictrue" @tap="chooseImage">
|
||||||
<!-- <VueCoreImageUpload
|
<div class="pictrue">
|
||||||
class="btn btn-primary"
|
<img :src="avatar" />
|
||||||
:crop="false"
|
</div>
|
||||||
compress="80"
|
<image src="@/static/images/alter.png" class="alter" />
|
||||||
@imageuploaded="imageuploaded"
|
|
||||||
:headers="headers"
|
|
||||||
:max-file-size="5242880"
|
|
||||||
:credentials="false"
|
|
||||||
inputAccept="image/*"
|
|
||||||
inputOfFile="file"
|
|
||||||
:url="url"
|
|
||||||
ref="upImg"
|
|
||||||
v-if="item.uid === userInfo.uid"
|
|
||||||
>
|
|
||||||
<view class="pictrue">
|
|
||||||
<image :src="item.avatar" />
|
|
||||||
</view>
|
|
||||||
</VueCoreImageUpload>-->
|
|
||||||
<!-- <view class="pictrue" v-else>
|
|
||||||
<image :src="item.avatar" />
|
|
||||||
</view>-->
|
|
||||||
<image
|
|
||||||
src="@/static/images/alter.png"
|
|
||||||
class="alter"
|
|
||||||
v-if="item.uid === userInfo.uid"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="text">
|
<view class="text">
|
||||||
<view class="name line1">{{ item.nickname }}</view>
|
<view class="name line1">{{ userInfo.nickname }}</view>
|
||||||
<view class="phone">绑定手机号：{{ item.phone }}</view>
|
<view class="phone">
|
||||||
|
绑定手机号：
|
||||||
|
<text v-if="userInfo.phone">{{ userInfo.phone }}</text>
|
||||||
|
<text v-else>未绑定</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
|
||||||
class="currentBnt acea-row row-center-wrapper font-color-red"
|
|
||||||
v-if="item.uid === userInfo.uid"
|
|
||||||
>当前账号</view>
|
|
||||||
<view
|
|
||||||
class="bnt font-color-red acea-row row-center-wrapper"
|
|
||||||
v-else
|
|
||||||
@click="switchAccounts(index)"
|
|
||||||
>使用账号</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -82,23 +49,26 @@
|
|||||||
<text>点击修改密码</text>
|
<text>点击修改密码</text>
|
||||||
<text class="iconfont icon-suozi"></text>
|
<text class="iconfont icon-suozi"></text>
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view>-->
|
||||||
</view>
|
</view>
|
||||||
<!--<view class="modifyBnt bg-color-red" @click="submit">保存修改</view>-->
|
<view class="modifyBnt bg-color-red" @click="submit">保存修改</view>
|
||||||
<!-- <view
|
<view
|
||||||
class="logOut cart-color acea-row row-center-wrapper"
|
class="logOut cart-color acea-row row-center-wrapper"
|
||||||
@click="logout"
|
@click="logout"
|
||||||
v-if="!isWeixin"
|
v-if="$deviceType=='app'"
|
||||||
>
|
>退出登录</view>
|
||||||
退出登录
|
|
||||||
</view>-->
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from "vuex";
|
import { mapGetters } from "vuex";
|
||||||
import { trim, isWeixin } from "@/utils";
|
import { trim, isWeixin, chooseImage } from "@/utils";
|
||||||
import { VUE_APP_API_URL } from "@/config";
|
import { VUE_APP_API_URL } from "@/config";
|
||||||
import { postUserEdit, getLogout, switchH5Login, getUser } from "@/api/user";
|
import {
|
||||||
|
postUserEdit,
|
||||||
|
getLogout,
|
||||||
|
switchH5Login,
|
||||||
|
getUserInfo
|
||||||
|
} from "@/api/user";
|
||||||
import cookie from "@/utils/store/cookie";
|
import cookie from "@/utils/store/cookie";
|
||||||
import store from "@//store";
|
import store from "@//store";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
@@ -110,10 +80,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
url: `${VUE_APP_API_URL}/upload/image`,
|
|
||||||
headers: {
|
|
||||||
Authorization: "Bearer " + this.$store.state.token
|
|
||||||
},
|
|
||||||
avatar: "",
|
avatar: "",
|
||||||
isWeixin: false,
|
isWeixin: false,
|
||||||
currentAccounts: 0,
|
currentAccounts: 0,
|
||||||
@@ -156,7 +122,8 @@ export default {
|
|||||||
.catch(err => {
|
.catch(err => {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
title:
|
||||||
|
err.msg || err.response.data.msg || err.response.data.message,
|
||||||
icon: "none",
|
icon: "none",
|
||||||
duration: 2000
|
duration: 2000
|
||||||
});
|
});
|
||||||
@@ -170,7 +137,7 @@ export default {
|
|||||||
},
|
},
|
||||||
getUserInfo: function() {
|
getUserInfo: function() {
|
||||||
let that = this;
|
let that = this;
|
||||||
getUser().then(res => {
|
getUserInfo().then(res => {
|
||||||
// let switchUserInfo = res.data.switchUserInfo;
|
// let switchUserInfo = res.data.switchUserInfo;
|
||||||
// for (let i = 0; i < switchUserInfo.length; i++) {
|
// for (let i = 0; i < switchUserInfo.length; i++) {
|
||||||
// if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
|
// if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
|
||||||
@@ -184,24 +151,18 @@ export default {
|
|||||||
// that.$set(this, "switchUserInfo", switchUserInfo);
|
// that.$set(this, "switchUserInfo", switchUserInfo);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
imageuploaded(res) {
|
chooseImage() {
|
||||||
if (res.status !== 200) {
|
chooseImage(img => {
|
||||||
uni.showToast({
|
console.log(img)
|
||||||
title: res.msg || res.response.data.msg,
|
this.avatar = img;
|
||||||
icon: "none",
|
});
|
||||||
duration: 2000
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.switchUserInfo[this.userIndex] === undefined) return;
|
|
||||||
this.$set(this.switchUserInfo[this.userIndex], "avatar", res.data.url);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
submit: function() {
|
submit: function() {
|
||||||
let userInfo = this.switchUserInfo[this.userIndex];
|
let userInfo = this.userInfo;
|
||||||
postUserEdit({
|
postUserEdit({
|
||||||
nickname: trim(this.userInfo.nickname),
|
nickname: trim(this.userInfo.nickname),
|
||||||
avatar: userInfo.avatar
|
avatar: this.avatar
|
||||||
}).then(
|
}).then(
|
||||||
res => {
|
res => {
|
||||||
this.$store.dispatch("userInfo", true);
|
this.$store.dispatch("userInfo", true);
|
||||||
@@ -214,7 +175,8 @@ export default {
|
|||||||
},
|
},
|
||||||
err => {
|
err => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
title:
|
||||||
|
err.msg || err.response.data.msg || err.response.data.message,
|
||||||
icon: "none",
|
icon: "none",
|
||||||
duration: 2000
|
duration: 2000
|
||||||
});
|
});
|
||||||
@@ -230,8 +192,10 @@ export default {
|
|||||||
getLogout()
|
getLogout()
|
||||||
.then(res => {
|
.then(res => {
|
||||||
this.$store.commit("logout");
|
this.$store.commit("logout");
|
||||||
clearAuthStatus();
|
this.$yrouter.replace({
|
||||||
location.href = location.origin;
|
path: "/pages/user/Login/index",
|
||||||
|
query: {}
|
||||||
|
});
|
||||||
})
|
})
|
||||||
.catch(err => {});
|
.catch(err => {});
|
||||||
} else if (res.cancel) {
|
} else if (res.cancel) {
|
||||||
|
|||||||
@@ -117,11 +117,7 @@
|
|||||||
<view class="myService">
|
<view class="myService">
|
||||||
<view class="serviceList acea-row row-middle">
|
<view class="serviceList acea-row row-middle">
|
||||||
<template v-for="(item, MyMenusIndex) in MyMenus">
|
<template v-for="(item, MyMenusIndex) in MyMenus">
|
||||||
<view
|
<view class="item" :key="MyMenusIndex" @click="goPages(MyMenusIndex)">
|
||||||
class="item"
|
|
||||||
:key="MyMenusIndex"
|
|
||||||
@click="goPages(MyMenusIndex)"
|
|
||||||
>
|
|
||||||
<view class="pictrue">
|
<view class="pictrue">
|
||||||
<image :src="item.pic" />
|
<image :src="item.pic" />
|
||||||
</view>
|
</view>
|
||||||
@@ -133,19 +129,9 @@
|
|||||||
<view class="pictrue"></view>
|
<view class="pictrue"></view>
|
||||||
<view class="cell">hexiao</view>
|
<view class="cell">hexiao</view>
|
||||||
<text class="iconfont icon-jiantou"></text>
|
<text class="iconfont icon-jiantou"></text>
|
||||||
</view> -->
|
</view>-->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!--<view -->
|
|
||||||
<!--class="item"-->
|
|
||||||
<!--@click="changeswitch(true)"-->
|
|
||||||
<!--v-if="userInfo.phone && isWeixin"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<view class="pictrue"><image src="@/static/images/switch.png" /></view>-->
|
|
||||||
<!--<view>账号切换</!--<view>-->
|
|
||||||
<!--</!--<view>-->
|
|
||||||
<!-- </view>
|
|
||||||
</view>-->
|
|
||||||
</view>
|
</view>
|
||||||
<view class="by">
|
<view class="by">
|
||||||
<view>
|
<view>
|
||||||
@@ -163,7 +149,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
|
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
|
||||||
import { getUser, getMenuUser, bindingPhone } from "@/api/user";
|
import { getUserInfo, getMenuUser, bindingPhone } from "@/api/user";
|
||||||
import { isWeixin, VUE_APP_RESOURCES_URL } from "@/utils";
|
import { isWeixin, VUE_APP_RESOURCES_URL } from "@/utils";
|
||||||
import SwitchWindow from "@/components/SwitchWindow";
|
import SwitchWindow from "@/components/SwitchWindow";
|
||||||
import Authorization from "@/pages/authorization/index";
|
import Authorization from "@/pages/authorization/index";
|
||||||
@@ -283,7 +269,7 @@ export default {
|
|||||||
},
|
},
|
||||||
User: function() {
|
User: function() {
|
||||||
let that = this;
|
let that = this;
|
||||||
getUser().then(res => {
|
getUserInfo().then(res => {
|
||||||
that.user = res.data;
|
that.user = res.data;
|
||||||
that.orderStatusNum = res.data.orderStatusNum;
|
that.orderStatusNum = res.data.orderStatusNum;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -12,29 +12,13 @@
|
|||||||
<view class="item acea-row row-between-wrapper">
|
<view class="item acea-row row-between-wrapper">
|
||||||
<view class="name">所在地区</view>
|
<view class="name">所在地区</view>
|
||||||
<view class="picker acea-row row-between-wrapper select-value form-control">
|
<view class="picker acea-row row-between-wrapper select-value form-control">
|
||||||
<view class="address" @tap="openAddres">
|
<view class="address">
|
||||||
<!-- <picker
|
<CitySelect
|
||||||
@columnchange="addRessColumnchange"
|
ref="cityselect"
|
||||||
@change="changeAddress"
|
:defaultValue="addressText"
|
||||||
range-key="name"
|
@callback="result"
|
||||||
mode="multiSelector"
|
:items="district"
|
||||||
:range="district"
|
></CitySelect>
|
||||||
>
|
|
||||||
<text class="uni-input" v-if="model2">{{model2}}</text>
|
|
||||||
<text class="uni-input" v-else>请选择地区</text>
|
|
||||||
</picker>-->
|
|
||||||
<text class="uni-input">{{model2||'请选择'}}</text>
|
|
||||||
<simple-address
|
|
||||||
ref="simpleAddress"
|
|
||||||
:pickerValueDefault="cityPickerValueDefault"
|
|
||||||
@onConfirm="onConfirm"
|
|
||||||
themeColor="#007AFF"
|
|
||||||
></simple-address>
|
|
||||||
<!-- <view slot="right" @click.stop="show2 = true">{{ model2 || "请选择收货地址" }}</view> -->
|
|
||||||
<!-- <vant-popup :show="show2" position="bottom" @close="closeaArea">
|
|
||||||
<vant-area :area-list="district" columns-num="3" :columns-placeholder="['请选择', '请选择', '请选择']" title="请选择"
|
|
||||||
@confirm="result2" />
|
|
||||||
</vant-popup>-->
|
|
||||||
</view>
|
</view>
|
||||||
<view class="iconfont icon-dizhi font-color-red"></view>
|
<view class="iconfont icon-dizhi font-color-red"></view>
|
||||||
</view>
|
</view>
|
||||||
@@ -57,92 +41,63 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view></view>
|
<view></view>
|
||||||
<view class="keepBnt bg-color-red" @click="submit">立即保存</view>
|
<view class="keepBnt bg-color-red" @tap="submit">立即保存</view>
|
||||||
<view class="wechatAddress" v-if="isWechat && !id" @click="getAddress">导入微信地址</view>
|
<view class="wechatAddress" v-if="isWechat && !id" @click="getAddress">导入微信地址</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script type="text/babel">
|
<script type="text/babel">
|
||||||
// import { CitySelect } from "vue-ydui/dist/lib.rem/cityselect";
|
import CitySelect from "@/components/CitySelect";
|
||||||
// import District from "@/utils/area";
|
import { getAddress, postAddress, getCity } from "@/api/user";
|
||||||
import simpleAddress from "@/components/simple-address/simple-address.nvue";
|
|
||||||
import { getAddress, postAddress, district } from "@/api/user";
|
|
||||||
import attrs, { required, chs_phone } from "@/utils/validate";
|
import attrs, { required, chs_phone } from "@/utils/validate";
|
||||||
import { validatorDefaultCatch } from "@/utils/dialog";
|
import { validatorDefaultCatch } from "@/utils/dialog";
|
||||||
// import { openAddress } from "@/libs/wechat";
|
// import { openAddress } from "@/libs/wechat";
|
||||||
import { isWeixin } from "@/utils";
|
import { isWeixin } from "@/utils";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: "AddAddress",
|
||||||
components: {
|
components: {
|
||||||
// CitySelect
|
CitySelect
|
||||||
simpleAddress
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show2: false,
|
|
||||||
model2: "",
|
|
||||||
districts: [],
|
|
||||||
district: [],
|
district: [],
|
||||||
id: 0,
|
id: 0,
|
||||||
userAddress: { isDefault: 0 },
|
userAddress: { isDefault: 0 },
|
||||||
address: {},
|
address: {},
|
||||||
isWechat: isWeixin(),
|
isWechat: isWeixin(),
|
||||||
selectAddressValue: null,
|
addressText: ""
|
||||||
cityPickerValueDefault: [0, 0, 1],
|
|
||||||
pickerText: ""
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
let id = this.$yroute.query.id;
|
let id = this.$yroute.query.id;
|
||||||
this.id = id;
|
this.id = id;
|
||||||
// document.title = !id ? "添加地址" : "修改地址";
|
|
||||||
this.getUserAddress();
|
this.getUserAddress();
|
||||||
district().then(res => {
|
this.getCityList();
|
||||||
// city_list 市
|
},
|
||||||
// county_list 区
|
watch: {
|
||||||
// province_list 省
|
addressText(nextModel2) {
|
||||||
this.districts = res.data;
|
console.log(nextModel2, 8585858585);
|
||||||
});
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
openAddres() {
|
getCityList: function() {
|
||||||
// 根据 label 获取
|
let that = this;
|
||||||
if (this.address.province) {
|
getCity()
|
||||||
// 这个插件有个问题，直辖市的 city 必须得是 市辖区
|
.then(res => {
|
||||||
try {
|
that.district = res.data;
|
||||||
let str = "市";
|
that.ready = true;
|
||||||
let city = this.address.city;
|
})
|
||||||
if (this.address.province.indexOf(str) != -1) {
|
.catch(err => {
|
||||||
city = "市辖区";
|
that.$dialog.error(err.msg);
|
||||||
}
|
});
|
||||||
var index = this.$refs.simpleAddress.queryIndex(
|
|
||||||
[this.address.province, city, this.address.district],
|
|
||||||
"label"
|
|
||||||
);
|
|
||||||
this.cityPickerValueDefault = index.index;
|
|
||||||
} catch (error) {}
|
|
||||||
}
|
|
||||||
this.$refs.simpleAddress.open();
|
|
||||||
|
|
||||||
// var index = this.$refs.simpleAddress.queryIndex(
|
|
||||||
// [13, 1302, 130203],
|
|
||||||
// "value"
|
|
||||||
// );
|
|
||||||
// this.cityPickerValueDefault = index.index;
|
|
||||||
// this.$refs.simpleAddress.open();
|
|
||||||
},
|
|
||||||
onConfirm(e) {
|
|
||||||
this.pickerText = JSON.stringify(e);
|
|
||||||
this.model2 = e.label;
|
|
||||||
this.address.province = e.labelArr[0] || "";
|
|
||||||
this.address.city = e.labelArr[1] || "";
|
|
||||||
this.address.district = e.labelArr[2] || "";
|
|
||||||
},
|
},
|
||||||
getUserAddress: function() {
|
getUserAddress: function() {
|
||||||
if (!this.id) return false;
|
if (!this.id) return false;
|
||||||
let that = this;
|
let that = this;
|
||||||
getAddress(that.id).then(res => {
|
getAddress(that.id).then(res => {
|
||||||
that.userAddress = res.data;
|
that.userAddress = res.data;
|
||||||
that.model2 =
|
that.addressText =
|
||||||
res.data.province + " " + res.data.city + " " + res.data.district;
|
res.data.province + " " + res.data.city + " " + res.data.district;
|
||||||
that.address.province = res.data.province;
|
that.address.province = res.data.province;
|
||||||
that.address.city = res.data.city;
|
that.address.city = res.data.city;
|
||||||
@@ -151,9 +106,12 @@ export default {
|
|||||||
},
|
},
|
||||||
getAddress() {},
|
getAddress() {},
|
||||||
async submit() {
|
async submit() {
|
||||||
|
console.log(this);
|
||||||
|
console.log(this.address);
|
||||||
|
console.log(this.addressText);
|
||||||
let name = this.userAddress.realName,
|
let name = this.userAddress.realName,
|
||||||
phone = this.userAddress.phone,
|
phone = this.userAddress.phone,
|
||||||
model2 = this.model2,
|
addressText = this.addressText,
|
||||||
detail = this.userAddress.detail,
|
detail = this.userAddress.detail,
|
||||||
isDefault = this.userAddress.isDefault;
|
isDefault = this.userAddress.isDefault;
|
||||||
try {
|
try {
|
||||||
@@ -166,9 +124,9 @@ export default {
|
|||||||
required(required.message("联系电话")),
|
required(required.message("联系电话")),
|
||||||
chs_phone(chs_phone.message())
|
chs_phone(chs_phone.message())
|
||||||
],
|
],
|
||||||
model2: [required("请选择地址")],
|
addressText: [required("请选择地址")],
|
||||||
detail: [required(required.message("具体地址"))]
|
detail: [required(required.message("具体地址"))]
|
||||||
}).validate({ name, phone, model2, detail });
|
}).validate({ name, phone, addressText, detail });
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return validatorDefaultCatch(e);
|
return validatorDefaultCatch(e);
|
||||||
}
|
}
|
||||||
@@ -204,7 +162,7 @@ export default {
|
|||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
title: err.msg || err.response.data.msg || err.response.data.message,
|
||||||
icon: "none",
|
icon: "none",
|
||||||
duration: 2000
|
duration: 2000
|
||||||
});
|
});
|
||||||
@@ -213,17 +171,17 @@ export default {
|
|||||||
ChangeIsDefault: function() {
|
ChangeIsDefault: function() {
|
||||||
this.userAddress.isDefault = !this.userAddress.isDefault;
|
this.userAddress.isDefault = !this.userAddress.isDefault;
|
||||||
},
|
},
|
||||||
closeaArea() {
|
result(values) {
|
||||||
this.show2 = false;
|
console.log(this);
|
||||||
},
|
console.log(values);
|
||||||
result2(ret) {
|
this.address = {
|
||||||
let values = ret.mp.detail.values;
|
province: values.province.name || "",
|
||||||
this.closeaArea();
|
city: values.city.name || "",
|
||||||
this.address.province = values[0].name || "";
|
district: values.district.name || ""
|
||||||
this.address.city = values[1].name || "";
|
};
|
||||||
this.address.district = values[2].name || "";
|
this.addressText = `${this.address.province}${this.address.city}${this.address.district}`;
|
||||||
this.model2 =
|
// this.addressText =
|
||||||
this.address.province + this.address.city + this.address.district;
|
// this.address.province + this.address.city + this.address.district;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 1.5 KiB |
Regular → Executable
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 8.2 KiB |
+1
-1
@@ -106,7 +106,7 @@ const vuexStore = new Vuex.Store({
|
|||||||
},
|
},
|
||||||
getUser({ state, commit }) {
|
getUser({ state, commit }) {
|
||||||
return new Promise(reslove => {
|
return new Promise(reslove => {
|
||||||
getUser().then(res => {
|
getUserInfo().then(res => {
|
||||||
console.log(res)
|
console.log(res)
|
||||||
commit("updateUserInfo", res.data);
|
commit("updateUserInfo", res.data);
|
||||||
reslove(res.data);
|
reslove(res.data);
|
||||||
|
|||||||
+57
-7
@@ -9,6 +9,7 @@ import store from "../store";
|
|||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import cookie from "@/utils/store/cookie";
|
import cookie from "@/utils/store/cookie";
|
||||||
import stringify from "@/utils/querystring";
|
import stringify from "@/utils/querystring";
|
||||||
|
import { VUE_APP_API_URL } from "@/config";
|
||||||
|
|
||||||
export function dataFormat(time, option) {
|
export function dataFormat(time, option) {
|
||||||
time = +time * 1000;
|
time = +time * 1000;
|
||||||
@@ -186,7 +187,7 @@ export const login = () => {
|
|||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
store.commit("login", data.token, dayjs(data.expires_time));
|
store.commit("login", data.token, dayjs(data.expires_time));
|
||||||
store.dispatch('userInfo', true)
|
store.dispatch('userInfo', true)
|
||||||
getUser().then(user => {
|
getUserInfo().then(user => {
|
||||||
console.log('获取用户信息成功')
|
console.log('获取用户信息成功')
|
||||||
store.dispatch('setUserInfo', user.data)
|
store.dispatch('setUserInfo', user.data)
|
||||||
resolve(user)
|
resolve(user)
|
||||||
@@ -221,7 +222,7 @@ export const login = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const handleGetUserInfo = () => {
|
export const handleGetUserInfo = () => {
|
||||||
getUser().then(res => {
|
getUserInfo().then(res => {
|
||||||
console.log('获取用户信息')
|
console.log('获取用户信息')
|
||||||
store.dispatch('setUserInfo', res.data)
|
store.dispatch('setUserInfo', res.data)
|
||||||
var pages = getCurrentPages() //获取加载的页面
|
var pages = getCurrentPages() //获取加载的页面
|
||||||
@@ -418,7 +419,7 @@ export function routerPermissions(url, type) {
|
|||||||
console.log('————————')
|
console.log('————————')
|
||||||
let path = url
|
let path = url
|
||||||
if (!path) {
|
if (!path) {
|
||||||
path = '/'+getCurrentPageUrlWithArgs()
|
path = '/' + getCurrentPageUrlWithArgs()
|
||||||
}
|
}
|
||||||
if (Vue.prototype.$deviceType == 'routine') {
|
if (Vue.prototype.$deviceType == 'routine') {
|
||||||
console.log('————————')
|
console.log('————————')
|
||||||
@@ -449,15 +450,15 @@ export function routerPermissions(url, type) {
|
|||||||
if (type == 'reLaunch') {
|
if (type == 'reLaunch') {
|
||||||
reLaunch({
|
reLaunch({
|
||||||
path,
|
path,
|
||||||
|
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (type == 'replace') {
|
if (type == 'replace') {
|
||||||
replace({
|
replace({
|
||||||
path,
|
path,
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
push({
|
push({
|
||||||
@@ -734,7 +735,7 @@ export const handleLoginFailure = () => {
|
|||||||
console.log('————————')
|
console.log('————————')
|
||||||
store.commit("updateAuthorizationPage", true);
|
store.commit("updateAuthorizationPage", true);
|
||||||
|
|
||||||
let path = '/'+getCurrentPageUrlWithArgs()
|
let path = '/' + getCurrentPageUrlWithArgs()
|
||||||
|
|
||||||
// 判断是不是拼团进来的
|
// 判断是不是拼团进来的
|
||||||
if (getCurrentPageUrl() == 'pages/activity/GroupRule/index' && handleQrCode()) {
|
if (getCurrentPageUrl() == 'pages/activity/GroupRule/index' && handleQrCode()) {
|
||||||
@@ -828,3 +829,52 @@ const handleNoParameters = () => {
|
|||||||
});
|
});
|
||||||
}, 1500)
|
}, 1500)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function chooseImage(callback) {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: 1,
|
||||||
|
sourceType: ["album"],
|
||||||
|
success: res => {
|
||||||
|
uni.getImageInfo({
|
||||||
|
src: res.tempFilePaths[0],
|
||||||
|
success: image => {
|
||||||
|
console.log(image);
|
||||||
|
uni.showLoading({ title: "图片上传中", mask: true });
|
||||||
|
uni.uploadFile({
|
||||||
|
url: `${VUE_APP_API_URL}/api/upload`,
|
||||||
|
file: image,
|
||||||
|
filePath: image.path,
|
||||||
|
header: {
|
||||||
|
Authorization: "Bearer " + store.getters.token
|
||||||
|
},
|
||||||
|
name: "file",
|
||||||
|
success: res => {
|
||||||
|
console.log(res);
|
||||||
|
if (callback) {
|
||||||
|
callback(JSON.parse(res.data).link)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "上传图片失败",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
},
|
||||||
|
complete: res => {
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "获取图片信息失败",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user