123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437 |
- <template>
- <view class="store_introduction">
- <view class="content">
- <view class="store_con" :style="'background-image:url( ' + store_banner + ');background-size:100% 100%;background-repeat:no-repeat'">
- <!-- 店铺详情 -->
- <view class="info_left" v-if="vender_detail">
- <image class="avat" :src="vender_detail.storeLogoUrl" mode="aspectFill"></image>
- <view class="info_des">
- <view class="info_top">
- <text>{{vender_detail.storeName}}</text>
- <text v-if="vender_detail.isOwnShop == 1">{{$L('自营')}}</text>
- </view>
- <view class="info_bot">
- <image :src="imgUrl+'store/renqizhi.png'"></image>
- <text>人气:{{vender_detail.followNumber}}</text>
- </view>
- </view>
- </view>
- <!-- 店铺二维码 -->
- <view class="store_code">
- <view class="store_code_top">
- <text>{{$L('店铺二维码')}}</text>
- <image :src="imgUrl+'store/erweima.png'" @tap="handleShare"></image>
- </view>
- <view class="store_code_des">
- <view class="des_pre">
- <text>{{$L('描述相符')}}</text>
- <text>{{vender_detail.descriptionScore?vender_detail.descriptionScore:''}}</text>
- </view>
- <view class="des_pre">
- <text>{{$L('服务态度')}}</text>
- <text>{{vender_detail.serviceScore?vender_detail.serviceScore:''}}</text>
- </view>
- <view class="des_pre">
- <text>{{$L('发货速度')}}</text>
- <text>{{vender_detail.deliverScore?vender_detail.deliverScore:''}}</text>
- </view>
- </view>
- </view>
- <!-- 公司相关 -->
- <view class="company_related">
- <view class="related_pre">
- <text>{{$L('公司名称')}}</text>
- <text>{{vender_detail.companyName ? vender_detail.companyName : '--'}}</text>
- </view>
- <view class="related_pre">
- <text>{{$L('公司所在地')}}</text>
- <text>{{vender_detail.address ? vender_detail.address : '--'}}</text>
- </view>
- <view class="related_pre">
- <text>{{$L('开店时间')}}</text>
- <text>{{vender_detail.createTime ? vender_detail.createTime : '--'}}</text>
- </view>
- <view class="related_yewu">
- <text>{{$L('主营商品')}}</text>
- <text>{{vender_detail.mainBusiness ? vender_detail.mainBusiness : '--'}}</text>
- </view>
- </view>
- </view>
- </view>
- <!-- 遮罩层 -->
- <view class="mask" catchtouchmove="preventTouchMove" v-if="modalDlg" @tap="close"></view>
- <!-- 二维码分享弹框 -->
- <view class="modalDlg" v-if="modalDlg">
- <text>{{vender_detail.storeName}}</text>
- <text>{{$L('邀请好友来扫一扫分享店铺给TA')}}</text>
- <image :src="'data:image/png;base64,'+vender_detail.storeQRCode"></image>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- bid: '',
- vid: '',
- store_list: [],
- vender_detail: '',
- //店铺详情
- modalDlg: false,
- //模态框
- imgUrl: getApp().globalData.imgUrl,
- //图片地址
- store_banner: '', //店铺首页banner图
- city_site_open: "",
- searchList: [],
- show: false
- };
- },
- components: {},
- props: {},
- onLoad: function (options) {
- this.vid=options.vid
- this.venderDetail(); //店铺详情
- },
- methods: {
- // 商铺详情
- venderDetail(e) {
- let key = uni.getStorageSync('token');
- let that = this;
- let {
- vid
- } = that;
- let client=''
- // #ifdef MP
- client='wx_xcx'
- // #endif
- if (vid) {
- let param={}
- param.data = {}
- param.data.storeId = vid
- param.url = 'v3/seller/front/store/detail';
- this.$request(param).then(res => {
- if (res.state == 200) {
- let vender_detail = res.data;
- this.vender_detail = vender_detail
- this.store_banner = vender_detail.storeBackdropUrl
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- }
- },
- //点击二维码分享
- handleShare(e) {
- this.modalDlg= true
- },
- // 禁止屏幕滚动
- preventTouchMove: function () {},
- //关闭弹框
- close(e) {
- this.modalDlg= false
- },
- back() {
- this.searchList= [],
- this.show= false
- this.searchPn = 1;
- this.search_hasmore = true;
- }
- }
- };
- </script>
- <style>
- /* pages/storeIntroduction/storeIntroduction.wxss */
- .store_introduction{
- width: 100%;
- height: 100%;
- background: #F5F5F5;
- }
- .content{
- width: 751rpx;
- height: 100%;
- background-size: 100%;
- background: #F5F5F5;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
- .store_top{
- width: 100%;
- height: 47rpx;
- color: #FFFFFF;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- padding: 0 18rpx;
- box-sizing: border-box;
- position: fixed;
- top: 0;
- }
- .store_top text{
- font-size:36rpx;
- font-family:PingFang SC;
- font-weight:500;
- color:rgba(255,255,255,1);
- line-height:32rpx;
- }
- .store_top image{
- width: 48rpx;
- height: 40rpx;
- margin-left: 239rpx;
- }
- .store_con{
- width: 100%;
- height: 566rpx;
- padding-top: 40rpx;
- background: #F8F8F8;
- padding-left: 21rpx;
- box-sizing: border-box;
- }
- .info_left{
- width: 100%;
- display: flex;
- align-items: center;
- }
- .info_left .avat{
- width:80rpx;
- height:80rpx;
- border-radius:50%;
- margin-right: 16rpx;
- }
- .info_des{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: space-between;
- }
- .info_top{
- display: flex;
- align-items: center;
- }
- .info_top text:nth-of-type(1){
- font-size:30rpx;
- font-family:PingFang SC;
- font-weight:bold;
- color:rgba(255,255,255,1);
- line-height:32rpx;
- margin-right: 20rpx;
- }
- .info_top image{
- width: 40rpx;
- height: 40rpx;
- margin-right: 14rpx;
- }
- .info_top text:nth-of-type(2){
- width:60rpx;
- height:30rpx;
- background:rgba(252,28,28,1);
- border-radius:15rpx;
- font-size:24rpx;
- font-family:PingFang SC;
- font-weight:400;
- color:rgba(255,255,255,1);
- line-height: 30rpx;
- text-align: center;
- }
- .info_bot{
- display: flex;
- align-items: center;
- margin-top: 13rpx;
- }
- .info_bot image{
- width: 40rpx;
- height: 40rpx;
- margin-right: 8rpx;
- }
- .info_bot text{
- font-size:24rpx;
- font-family:PingFang SC;
- font-weight:500;
- color:rgba(255,255,255,1);
- line-height:32rpx;
- }
- .store_code{
- width:710rpx;
- height:283rpx;
- background:rgba(255,255,255,1);
- border-radius:15rpx;
- margin: 30rpx 0 20rpx;
- }
- .store_code_top{
- /* width: 100%; */
- height: 89rpx;
- padding: 0 20rpx;
- box-sizing: border-box;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1rpx solid #F2F2F2;
- border-radius: 15rpx 15rpx 0 0;
- }
- .store_code_top text{
- font-size:28rpx;
- font-family:PingFang SC;
- font-weight:bold;
- color:rgba(45,45,45,1);
- line-height:32rpx;
- }
- .store_code_top image{
- width: 35rpx;
- height: 35rpx;
- }
- .store_code_des{
- width: 100%;
- height: 193rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- padding: 25rpx 0;
- box-sizing: border-box;
- }
- .des_pre{
- display: flex;
- align-items: center;
- padding-left: 20rpx;
- box-sizing: border-box;
- }
- .des_pre text:nth-child(1){
- font-size:26rpx;
- font-family:PingFang SC;
- font-weight:500;
- color:rgba(102,102,102,1);
- line-height:32rpx;
- }
- .des_pre text:nth-child(2){
- font-size:26rpx;
- font-family:PingFang SC;
- font-weight:500;
- color:#FE811C;
- line-height:32rpx;
- margin-left: 200rpx;
- }
- .company_related{
- width:710rpx;
- /* height:476rpx; */
- padding-bottom: 29rpx;
- background:rgba(255,255,255,1);
- border-radius:15rpx;
- }
- .related_pre{
- /* width: 100%; */
- height: 89rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-left:20rpx;
- padding-right: 20rpx;
- box-sizing: border-box;
- border-bottom: 1rpx solid #F2F2F2;
- }
- .related_pre text:nth-child(1){
- font-size:28rpx;
- font-family:PingFang SC;
- font-weight:bold;
- color:rgba(45,45,45,1);
- line-height:32rpx;
- }
- .related_pre text:nth-child(2){
- font-size:26rpx;
- font-family:PingFang SC;
- font-weight:400;
- color:rgba(102,102,102,1);
- line-height:32rpx;
- width: 500rpx;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- word-break: break-all;
- text-align: right;
- }
- .related_yewu{
- display: flex;
- flex-direction: column;
- padding: 0 20rpx;
- box-sizing: border-box;
- }
- .related_yewu text:nth-child(1){
- font-size:28rpx;
- font-family:PingFang SC;
- font-weight:bold;
- color:rgba(45,45,45,1);
- line-height:32rpx;
- display: flex;
- height: 88rpx;
- padding: 32rpx 0 0 0;
- box-sizing: border-box;
- }
- .related_yewu text:nth-child(2){
- font-size:26rpx;
- font-family:PingFang SC;
- font-weight:400;
- color:rgba(102,102,102,1);
- line-height:36rpx;
- }
- .mask{
- width:750rpx;
- height:100%;
- position:fixed;
- top:0;
- left:0;
- right: 0;
- margin: 0 auto;
- background:#000;
- z-index:9000;
- opacity:0.5;
- }
- /* 弹出层 */
- .modalDlg{
- width:620rpx;
- height:650rpx;
- background:rgba(255,255,255,1);
- border:1px solid rgba(187,187,187,1);
- border-radius:15px;
- position:fixed;
- top:359rpx;
- left:0;
- right:0;
- z-index:9999;
- margin:0 auto;
- display: flex;
- flex-direction: column;
- align-items:center;
- }
- .modalDlg text:nth-child(1){
- font-size:30rpx;
- font-family:PingFang SC;
- font-weight:bold;
- color:rgba(45,45,45,1);
- line-height:32rpx;
- margin: 48rpx 0 20rpx;
- }
- .modalDlg text:nth-child(2){
- font-size:26rpx;
- font-family:PingFang SC;
- font-weight:500;
- color:rgba(102,102,102,1);
- line-height:32rpx;
- }
- .modalDlg image{
- width:388rpx;
- height:389rpx;
- margin-top: 59rpx;
- }
- </style>
|