index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. <template>
  2. <view class="container">
  3. <view class="fixed-top">
  4. <view class="flex shop-auth" @click="bindAuth">
  5. <view>注:添加门店前请先授权扫码,点击右侧按钮授权,如已授权可忽略</view>
  6. <view class="shop-auth-btn flex-center">
  7. 扫码授权
  8. </view>
  9. </view>
  10. <view class="search-user flex-y-center ">
  11. <view class="search-content flex-y-center">
  12. <icon type="search" size="18" />
  13. <input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch"
  14. class="flex-grow-1" type="text" placeholder-style="font-size:26rpx" placeholder="请输入关键词" />
  15. <view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
  16. <icon type="clear" size="18" />
  17. </view>
  18. </view>
  19. <view class="search-btn" @click="search">
  20. 搜索
  21. </view>
  22. </view>
  23. </view>
  24. <view class="shop-auth-hg100">
  25. </view>
  26. <block v-if='list.length<=0'>
  27. <no-none></no-none>
  28. <navigator url="../addStore/addStore" class="shop_add">
  29. +去添加门店
  30. </navigator>
  31. </block>
  32. <block v-else>
  33. <!-- 设置圆角 -->
  34. <!-- <uni-search-bar :radius="100" @confirm="search"></uni-search-bar> -->
  35. <view class="list">
  36. <view class="item" v-for="(item,index) in list" :key="index">
  37. <block v-if="item.shop_info_status">
  38. <view class="attestation" :class="item.shop_info_status =='01'?'active':''">
  39. {{item.shop_info_status =='01'?'已认证':'待优化'}}
  40. </view>
  41. </block>
  42. <view class="top ">
  43. <view class="flex">
  44. <navigator :hover-class="none" :url="`./storeNumberdetail?id=${item.id}`"
  45. class="flex-grow-1 flex-y-center">
  46. <image :src="URL+item.thumb" mode="aspectFill" class="store-img"></image>
  47. <view class="info ">
  48. <view class="name text-1">{{item.title}}</view>
  49. <view class="money text-1">电话:{{item.tel}}</view>
  50. <view class="money text-1">创建时间:{{item.create_time}}</view>
  51. </view>
  52. </navigator>
  53. <view class="flex-grow-0 flex-y-center">
  54. <view class="layui-btn-xs" @click.stop="navigatorShop(item.id)">
  55. 进入门店
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. <navigator v-if="item.koubeiId" :hover-class="none" :url="`./storeNumberdetail?id=${item.id}`"
  61. class="bottom flex flex-y-center">
  62. <!-- <text class="iconfont iconmendiandizhi"></text> -->
  63. <view class="money text-1" style="margin-top: 0;">蚂蚁门店ID:{{item.koubeiId}}</view>
  64. </navigator>
  65. </view>
  66. </view>
  67. </block>
  68. <zx-footer-bar :active="1" :type="type" />
  69. <uni-popup ref="popup" type="center">
  70. <view class="popup-content">
  71. <image :src="qrcodeImg"></image>
  72. <view class="save-btn flex-center" @click="upCode">
  73. 保存图片
  74. </view>
  75. </view>
  76. </uni-popup>
  77. </view>
  78. </template>
  79. <script>
  80. import zxFooterBar from '../../components/zx-footer-bar/zx-footer-bar.vue'
  81. // #ifdef MP-WEIXIN
  82. import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
  83. // #endif
  84. export default {
  85. components: {
  86. zxFooterBar,
  87. },
  88. data() {
  89. return {
  90. list: [],
  91. URL: getApp().globalData.URL,
  92. type: 2,
  93. qrcodeImg: "",
  94. seTval: '',
  95. keywords: ''
  96. }
  97. },
  98. onLoad(e) {
  99. if (!uni.getStorageSync("admin_id")) {
  100. uni.reLaunch({
  101. url: "/pages/login/login"
  102. })
  103. }
  104. this.type = e.type;
  105. this.qrcode();
  106. },
  107. onShow() {
  108. this.http();
  109. },
  110. onShareAppMessage() {
  111. },
  112. onShareTimeline() {
  113. },
  114. methods: {
  115. getSearch(e) {
  116. if (!e.detail.value) {
  117. this.keywords = "";
  118. this.http();
  119. }
  120. this.keywords = e.detail.value;
  121. },
  122. onDel() {
  123. this.seTval = '';
  124. this.keywords = "";
  125. this.http();
  126. },
  127. confirm(e) {
  128. this.keywords = e.detail.value;
  129. this.http();
  130. },
  131. search(e) {
  132. this.http();
  133. },
  134. upCode(e) {
  135. // #ifdef H5
  136. uni.showModal({
  137. title: '提示',
  138. content: '请长按二维码图片进行保存',
  139. showCancel: false,
  140. confirmText: '好的',
  141. });
  142. // #endif
  143. // #ifdef MP-WEIXIN
  144. var url = this.qrcodeImg;
  145. console.log(url, "url")
  146. saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
  147. //成功的逻辑
  148. console.log(res, "保存成功")
  149. wx.showToast({
  150. title: '保存成功',
  151. icon: 'none',
  152. mask: true,
  153. })
  154. setTimeout(() => {
  155. this.$refs.popup.close();
  156. }, 2000)
  157. }).catch((err) => {
  158. console.log(err, "保存失败")
  159. if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
  160. err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
  161. "saveImageToPhotosAlbum:fail authorize no response") {
  162. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  163. uni.showModal({
  164. title: '提示',
  165. content: '需要您设置授权保存相册',
  166. showCancel: false,
  167. success: modalSuccess => {
  168. uni.openSetting({
  169. success(settingdata) {
  170. console.log("settingdata", settingdata)
  171. if (settingdata.authSetting[
  172. 'scope.writePhotosAlbum']) {
  173. uni.showModal({
  174. title: '提示',
  175. content: '获取权限成功,再次点击图片即可保存',
  176. showCancel: false,
  177. })
  178. } else {
  179. uni.showModal({
  180. title: '提示',
  181. content: '获取权限失败,将无法保存到相册哦~',
  182. showCancel: false,
  183. })
  184. }
  185. },
  186. fail(failData) {
  187. console.log("failData", failData)
  188. },
  189. complete(finishData) {
  190. console.log("finishData", finishData)
  191. }
  192. })
  193. }
  194. })
  195. }
  196. // 失败后的逻辑
  197. })
  198. // #endif
  199. },
  200. bindAuth() {
  201. if (!this.qrcodeImg) {
  202. return
  203. }
  204. this.$refs.popup.open();
  205. },
  206. qrcode() {
  207. this.request({
  208. url: "Smdcshop/store_ewm",
  209. data: {
  210. admin_id: uni.getStorageSync("admin_id"),
  211. },
  212. }).then(res => {
  213. console.log(res, "res")
  214. if (res.code === '200') {
  215. this.qrcodeImg = res.data;
  216. }
  217. }).catch((res) => {});
  218. },
  219. navigatorShop(id) {
  220. this.request({
  221. url: "Smdcshop/storeadmin",
  222. data: {
  223. id,
  224. },
  225. }).then(res => {
  226. console.log(res, "res")
  227. if (res.code === '200') {
  228. // this.list = res.data;
  229. // 门店
  230. // if (this.is_login == 3) {
  231. // getApp().globalData.is_shop=1;
  232. uni.setStorageSync("is_shop", true);
  233. uni.setStorageSync("is_login", 3);
  234. uni.setStorageSync("admin_shopid", uni.getStorageSync("admin_id"));
  235. uni.setStorageSync("admin_id", res.data.id);
  236. uni.setStorageSync("store_id", res.data.store_id);
  237. uni.reLaunch({
  238. url: "../../storeInfoIng/storeInfo"
  239. })
  240. // }
  241. // 商家
  242. }
  243. }).catch((res) => {});
  244. },
  245. http() {
  246. this.request({
  247. url: "Smdcshop/shop_store_index",
  248. data: {
  249. admin_id: uni.getStorageSync("admin_id"),
  250. serch: this.keywords,
  251. },
  252. showLoading: true
  253. }).then(res => {
  254. console.log(res, "res")
  255. if (res.code === '200') {
  256. this.list = res.data;
  257. }
  258. }).catch((res) => {});
  259. }
  260. }
  261. }
  262. </script>
  263. <style>
  264. page {
  265. background: #F4F5F7;
  266. }
  267. .fixed-top {
  268. position: fixed;
  269. top: 0rpx;
  270. left: 0;
  271. width: 100%;
  272. }
  273. .search-user {
  274. z-index: 999;
  275. height: 100rpx;
  276. background: #FFFFFF;
  277. margin-left: 15rpx;
  278. }
  279. .search-user .search-content {
  280. width: 83%;
  281. height: 70rpx;
  282. background: #F1F1F1;
  283. border-radius: 100rpx;
  284. padding: 0 20rpx;
  285. }
  286. .search-user .search-content icon {
  287. margin-right: 10rpx;
  288. }
  289. .search-user .search-btn {
  290. margin-left: 20rpx;
  291. font-size: 28rpx;
  292. }
  293. .save-btn {
  294. width: 330rpx;
  295. height: 90rpx;
  296. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  297. opacity: 1;
  298. border-radius: 6rpx;
  299. margin: 0 auto;
  300. color: #FFFFFF;
  301. font-size: 30rpx;
  302. font-family: Source Han Sans CN;
  303. font-weight: 500;
  304. opacity: 1;
  305. margin-top: 30rpx;
  306. }
  307. .shop_add {
  308. text-align: center;
  309. font-size: 30rpx;
  310. color: #999;
  311. width: 227rpx;
  312. border: 1px solid #999;
  313. padding: 10rpx 0;
  314. margin: 0 auto;
  315. border-radius: 6rpx;
  316. margin-top: 20rpx;
  317. }
  318. .popup-content {
  319. /* width: 100%; */
  320. /* height: 656rpx; */
  321. /* background: #fff; */
  322. /* padding: 40rpx; */
  323. }
  324. .popup-content image {
  325. width: 350rpx;
  326. height: 350rpx;
  327. }
  328. .shop-auth {
  329. font-size: 26rpx;
  330. color: red;
  331. padding: 15rpx 30rpx;
  332. /* margin-bottom: 20rpx; */
  333. background: #FFFFFF;
  334. width: 100%;
  335. border-bottom: 1rpx solid #F1F1F1;
  336. }
  337. .shop-auth-btn {
  338. color: #fff;
  339. background-color: #1E9FFF;
  340. min-width: 150rpx;
  341. font-size: 24rpx;
  342. border-radius: 8rpx;
  343. }
  344. .shop-auth-hg100 {
  345. height: 200rpx;
  346. }
  347. .layui-btn-xs {
  348. height: 32px;
  349. line-height: 32px;
  350. padding: 0 8px;
  351. font-size: 12px;
  352. background-color: #1E9FFF;
  353. color: #FFFFFF;
  354. border-radius: 8rpx;
  355. }
  356. .list {
  357. padding: 20rpx 20rpx 0rpx 20rpx;
  358. }
  359. .list .item {
  360. width: 100%;
  361. /* height: 213rpx; */
  362. background-color: #fff;
  363. border-radius: 12rpx;
  364. overflow: hidden;
  365. box-sizing: border-box;
  366. padding: 0 24rpx;
  367. margin-bottom: 20rpx;
  368. border: 1px solid #f1f1f1;
  369. position: relative;
  370. }
  371. .attestation {
  372. width: 201rpx;
  373. height: 30rpx;
  374. color: #fff;
  375. background: #FD2C2C;
  376. text-align: center;
  377. transform: rotate(-42deg);
  378. position: absolute;
  379. left: -32px;
  380. top: 9px;
  381. font-size: 20rpx;
  382. line-height: 30rpx;
  383. }
  384. .list .item .active {
  385. color: #fff;
  386. background: #1E9FFF;
  387. }
  388. .list .item .top {
  389. padding: 24rpx 0;
  390. border-bottom: 1rpx solid #f0f0f0;
  391. }
  392. .list .item .store-img {
  393. display: block;
  394. width: 94rpx;
  395. height: 94rpx;
  396. flex: none;
  397. border-radius: 9rpx;
  398. }
  399. .list .item .info {
  400. padding: 0 24rpx;
  401. flex: none;
  402. /* width: 300rpx; */
  403. box-sizing: border-box;
  404. width: 85%;
  405. }
  406. .list .item .icon-gengduo {
  407. font-size: 24rpx;
  408. color: #999;
  409. }
  410. .list .item .name {
  411. font-size: 32rpx;
  412. font-weight: bold;
  413. color: #333;
  414. line-height: 45rpx;
  415. }
  416. .list .item .money {
  417. font-size: 24rpx;
  418. color: #999;
  419. margin-top: 16rpx;
  420. }
  421. .list .item .bottom {
  422. height: 70rpx;
  423. }
  424. .list .item .bottom .icon-mendiandizhi {
  425. color: #59A7FF;
  426. }
  427. .list .item .bottom .addr {
  428. font-size: 24rpx;
  429. color: #999;
  430. margin-left: 16rpx;
  431. }
  432. </style>